/* AnyTeam Interim — generated from tokens.json */
:root, [data-theme="light"] {
  --bg-primary: var(--white); /* Page background. White in light mode; near-black #111111 in dark mode (never pure #000). */
  --bg-secondary: var(--grey-100); /* Announcement bar, utility bar, ask field, carousel arrow buttons, quiet panels. */
  --bg-image: var(--grey-100); /* Ground behind product screenshots and agent-card art; the image ground while media loads. */
  --bg-hover: var(--grey-200); /* Hover fill on secondary buttons, icon buttons and list rows. */
  --bg-active: var(--grey-100); /* Pressed / selected row fill. */
  --bg-inverse: var(--grey-900); /* A band set in the opposite register (dark band on a light page, light band on a dark page). */
  --bg-disabled: var(--grey-200); /* Disabled button and control fills. */
  --art-night: #14204a; /* Night blue. Deepest Day Arc colour: night bands, image shadows. White text at any size (15.7:1); never black text. Day Arc palette: background colour only (solid fills, colour-block panels, bands, image treatments made in the Image Lab). Same in light and dark mode. Never for buttons, links, borders, icons or text. */
  --art-cobalt: #2350f5; /* Cobalt. Bold cool field and colour-block panel. White text at any size (5.9:1); black only at 24px+ (3.2:1). Day Arc palette: background colour only (solid fills, colour-block panels, bands, image treatments made in the Image Lab). Same in light and dark mode. Never for buttons, links, borders, icons or text. */
  --art-sky: #8fc8ff; /* Sky. Light cool field, morning and midday grounds. Black text at any size (10.7:1); never white text. Day Arc palette: background colour only (solid fills, colour-block panels, bands, image treatments made in the Image Lab). Same in light and dark mode. Never for buttons, links, borders, icons or text. */
  --art-paper: #fff7ee; /* Paper. Warm off-white field; the default panel behind product imagery and Cutouts (replaces the old #F2F1ED neutral). Black text at any size (17.8:1). Day Arc palette: background colour only (solid fills, colour-block panels, bands, image treatments made in the Image Lab). Same in light and dark mode. Never for buttons, links, borders, icons or text. */
  --art-sun: #ffc21a; /* Sun. Bright warm field and afternoon grounds. Black text at any size (11.7:1); never white text. Day Arc palette: background colour only (solid fills, colour-block panels, bands, image treatments made in the Image Lab). Same in light and dark mode. Never for buttons, links, borders, icons or text. */
  --art-ember: #ff5000; /* Ember. AnyTeam orange as a fill: bold fields, light trails, golden-hour grounds. Black text at any size (5.8:1); white at 24px+ only (3.3:1). Never as text or a UI accent. Day Arc palette: background colour only (solid fills, colour-block panels, bands, image treatments made in the Image Lab). Same in light and dark mode. Never for buttons, links, borders, icons or text. */
  --art-coral: #ff7a6b; /* Coral. Warm secondary field, dusk and golden grounds. Black text at any size (7.4:1); never white body text (2.5:1). Day Arc palette: background colour only (solid fills, colour-block panels, bands, image treatments made in the Image Lab). Same in light and dark mode. Never for buttons, links, borders, icons or text. */
  --art-blush: #ffd9cf; /* Blush. Pale warm tint for cards and quiet bands. Black text at any size (14.5:1). Day Arc palette: background colour only (solid fills, colour-block panels, bands, image treatments made in the Image Lab). Same in light and dark mode. Never for buttons, links, borders, icons or text. */
  --bg-on-image: var(--white); /* CTA pill and badges placed over photography, in both registers. */
  --action-primary: var(--black); /* Primary button fill (Book a demo). The only filled action on a screen. */
  --on-action-primary: var(--white); /* Label and icon on an action-primary fill (18.9:1). */
  --text-primary: var(--black); /* Headlines, body, card titles, nav links — on bg-primary and bg-secondary. */
  --text-secondary: var(--grey-500); /* Card subtitles, metadata, eyebrows, decks, figure captions. 4.9:1 on white, 4.5:1 on grey-100, 7.1:1 on #111. */
  --text-disabled: var(--grey-400); /* Disabled labels and sold-out sizes only. Exempt from contrast minimums; never use for readable copy. */
  --text-hover: var(--grey-500); /* Nav and text-link hover color (links dim on hover; they do not turn blue). */
  --text-inverse: var(--white); /* Text on bg-inverse bands. */
  --text-on-image: var(--white); /* Headlines and subheads over photography and video. Requires a scrim or a naturally dark area of the image. */
  --text-link: var(--black); /* Inline links inside running text and legal copy: the text colour, weight 400, always underlined. Navigation and CTAs stay text-primary. */
  --text-badge: var(--black); /* Card status line (Ready, Needs your OK, Coming soon) in body-1-strong. Neutral like all UI text; the word carries the meaning. */
  --text-critical: #d30005; /* Error messages and form validation. Status only: part of the minimal status set (critical, success, info, warning); never decorative. */
  --text-success: #007d48; /* Confirmation messages and positive status. Always paired with a word, never color alone. Status only: part of the minimal status set; never decorative. */
  --border-primary: var(--grey-500); /* Input borders and outlined controls that must meet 3:1. */
  --border-secondary: var(--grey-300); /* Secondary (outlined) button ring, option tiles, dividers between groups. */
  --border-tertiary: var(--grey-200); /* Hairlines: news-rail rules, list dividers, section separators. */
  --border-active: var(--black); /* Selected option tile, selected filter, focused input. */
  --border-critical: #d30005; /* Input in error. Status only: part of the minimal status set (critical, success, info, warning); never decorative. */
  --focus-ring: var(--black); /* Keyboard focus outline, 2px solid, 2px offset. Black on light grounds, white on dark (18.9:1). On a mid-tone art field, use the text colour that field's note allows. */
  --focus-shadow: rgba(17, 17, 17, 0.12); /* Soft 12px halo behind a focused form field. */
  --scrim: rgba(17, 17, 17, 0.36); /* Overlay behind modals and drawers; light darkening over video. */
  --scrim-strong: rgba(17, 17, 17, 0.8); /* Video control chips and heavy overlays. */
  --critical: #d30005; /* Error icon and status fill. Status only: part of the minimal status set (critical, success, info, warning); never decorative. */
  --success: #007d48; /* Success icon and status fill. Status only: part of the minimal status set; never decorative. */
  --info: #1151ff; /* Informational icon and status fill. Status only: part of the minimal status set; never decorative. */
  --warning: #fedf35; /* Warning banner fill. Always put on-warning text on it. Status only: part of the minimal status set; never decorative. */
  --on-warning: var(--black); /* Text and icons on a warning fill, in both modes (15:1 light, 16:1 dark). text-primary would turn white in dark mode and fail. */
  --black: #111111; /* AnyTeam black. The darkest value in the system — used instead of #000000 everywhere. */
  --white: #ffffff; /* Pure white. Retail page ground and text on dark/photography. */
  --grey-50: #fafafa; /* Lightest neutral. */
  --grey-100: #f5f5f5; /* Secondary ground, product image seamless. */
  --grey-200: #e5e5e5; /* Hover fill, tertiary border. */
  --grey-300: #cacacb; /* Secondary border. */
  --grey-400: #9e9ea0; /* Disabled text (light); secondary text (dark). */
  --grey-500: #707072; /* Secondary text (light); primary border. */
  --grey-600: #4b4b4d; /* Disabled fill on dark. */
  --grey-700: #39393b; /* Hover fill on dark. */
  --grey-800: #28282a; /* Raised surface on dark. */
  --grey-900: #1f1f21; /* Secondary ground on dark; inverse band on light. */
  --shadow-100: 0px 4px 8px 0px rgba(17, 17, 17, 0.06), 0px 0px 24px 4px rgba(17, 17, 17, 0.03); /* Dropdowns, menus, popovers only. In dark mode also lift the surface to bg-secondary; a shadow alone barely reads on #111. */
  --shadow-100-inverse: 0px 4px 8px 0px rgba(17, 17, 17, 0.18), 0px 0px 24px 4px rgba(17, 17, 17, 0.09); /* The same elevation on dark grounds or over imagery. */
  --shadow-focus: 0 0 0 12px rgba(17, 17, 17, 0.12); /* Focus halo on form fields (paired with border-active). */
}
[data-theme="dark"] {
  --bg-primary: var(--black);
  --bg-secondary: var(--grey-900);
  --bg-image: var(--grey-800);
  --bg-hover: var(--grey-700);
  --bg-active: var(--grey-800);
  --bg-inverse: var(--white);
  --bg-disabled: var(--grey-800);
  --bg-on-image: var(--white);
  --action-primary: var(--white);
  --on-action-primary: var(--black);
  --text-primary: var(--white);
  --text-secondary: var(--grey-400);
  --text-disabled: var(--grey-500);
  --text-hover: var(--grey-200);
  --text-inverse: var(--black);
  --text-on-image: var(--white);
  --text-link: var(--white);
  --text-badge: var(--white);
  --text-critical: #ff4e4a;
  --text-success: #1eaa52;
  --border-primary: var(--grey-400);
  --border-secondary: var(--grey-700);
  --border-tertiary: var(--grey-800);
  --border-active: var(--white);
  --border-critical: #ff4e4a;
  --focus-ring: var(--white);
  --focus-shadow: rgba(255, 255, 255, 0.16);
  --critical: #ff4e4a;
  --success: #1eaa52;
  --info: #1190ff;
  --warning: #feea55;
  --on-warning: var(--black);
  --shadow-100: 0px 4px 8px 0px rgba(0, 0, 0, 0.5), 0px 0px 24px 4px rgba(0, 0, 0, 0.35);
  --shadow-focus: 0 0 0 12px rgba(255, 255, 255, 0.16);
}
:root {
  --space-2: 2px; /* Hairline nudges, badge inner offsets. */
  --space-4: 4px; /* Icon-to-label gaps in tight chips; card info top padding. */
  --space-6: 6px; /* Vertical padding inside a small pill button (36px tall). */
  --space-8: 8px; /* Gap between grid tiles inside a carousel; card side padding. */
  --space-10: 10px; /* Between stacked option tiles. */
  --space-12: 12px; /* Card-grid gutter at large breakpoints; gap between hero subhead and CTA. */
  --space-16: 16px; /* Small button side padding; mobile grid gutter; gap between nav links. */
  --space-20: 20px; /* Eyebrow-to-headline spacing in editorial. */
  --space-24: 24px; /* Medium/large button side padding; mobile page margin; hero text inset. */
  --space-32: 32px; /* Between card group and its title. */
  --space-36: 36px; /* Hero text inset from the image edge at large widths. */
  --space-40: 40px; /* Section internal padding (small). */
  --space-48: 48px; /* Desktop page margin (exterior gutter); between stacked modules. */
  --space-60: 60px; /* Between homepage modules; nav bar height. */
  --space-72: 72px; /* Large module separation. */
  --space-84: 84px; /* Editorial section padding. */
  --space-90: 90px; /* Editorial hero top padding. */
  --space-120: 120px; /* Editorial section breaks on the dark register (section-heading top padding). */
  --radius-0: 0px; /* All marketing imagery, hero banners, cards, nav bars. The default. */
  --radius-4: 4px; /* Option selector tiles, checkboxes. */
  --radius-8: 8px; /* Text inputs, dropdown menus, toasts. */
  --radius-12: 12px; /* Modals and bottom sheets. */
  --radius-24: 24px; /* Search field (36px tall pill). */
  --radius-button: 30px; /* Every button: small, medium, large. Reads as a full pill at all heights. */
  --radius-rounded: 9999px; /* Circles: icon buttons, carousel arrows, colour swatches, avatars. */
  --control-s: 36px; /* Small pill button and ask/search field height (6px + 24px line + 6px). */
  --control-m: 48px; /* Medium button, option tile height. */
  --control-l: 60px; /* Large button (hero and final CTA): 18px + 24px + 18px. */
  --input-height: 56px; /* Text input field. */
  --nav-height: 60px; /* Main navigation bar. */
  --utility-bar-height: 36px; /* Optional top utility bar. */
  --icon-s: 16px; /* Inline and chevron icons. */
  --icon-m: 24px; /* Default icon size: nav, buttons. */
  --icon-l: 48px; /* Feature and empty-state icons. */
  --stroke-s: 1px; /* Hairline dividers. */
  --stroke-m: 1.5px; /* Button and selector ring; icon stroke. */
  --stroke-l: 2px; /* Active/selected ring, focus outline. */
  --bp-xs: 320px; /* Smallest supported width. */
  --bp-s: 600px; /* Large phone / small tablet. */
  --bp-m: 960px; /* Desktop layouts begin; type steps up. */
  --bp-l: 1440px; /* Oversize type steps up. */
  --bp-xl: 1920px; /* Max layout width; all type steps up. */
  --container-max: 1920px; /* Outer frame. Content inside it is inset by gutter-exterior (48px), giving 1824px of content. */
  --gutter-exterior-s: 24px; /* Page side margin below 960px. */
  --gutter-exterior-l: 48px; /* Page side margin at 960px+. */
  --gutter-grid: 16px; /* Column gutter below 960px. */
  --gutter-grid-l: 12px; /* Column gutter at 960px+ (card grids, carousels). Tighter on desktop by design. */
  --gutter-wide: 48px; /* Wide column gap (.at-grid--wide) between a copy group and a media group in editorial modules (SplitFeature, ArticleCard). */
  --grid-columns-s: 4; /* Columns below 600px. */
  --grid-columns-m: 8; /* Columns at 600–959px. */
  --grid-columns-l: 12; /* Columns at 960px+. */
  --ratio-16-9: 16 / 9; /* Full-bleed hero, product shot panel and video. */
  --ratio-3-2: 3 / 2; /* Editorial feature images. */
  --ratio-1-1: 1 / 1; /* Agent cards and carousel tiles. */
  --ratio-4-5: 4 / 5; /* Portrait product shots and mobile figures. */
  --ratio-3-4: 3 / 4; /* Portrait promo tiles. */
  --ratio-2-3: 2 / 3; /* Advisor and customer portraits. */
  --ratio-9-16: 9 / 16; /* Mobile hero and vertical video. */
  --duration-150: 150ms; /* Hover color and fill changes. */
  --duration-250: 250ms; /* Default UI transition. */
  --duration-300: 300ms; /* Menus and dropdowns opening. */
  --duration-350: 350ms; /* Drawers, mega-menu. */
  --duration-400: 400ms; /* Carousel slides, large panels. */
  --ease-functional: cubic-bezier(0.4, 0, 0.2, 1); /* UI state changes: hover, open, close. */
  --ease-expressive: cubic-bezier(0.6, 0, 0.1, 1); /* Brand moments: hero reveals, carousel moves. */
  --z-10: 10; /* Sticky rail controls. */
  --z-30: 30; /* Sticky nav. */
  --z-50: 50; /* Dropdowns and mega-menu. */
  --z-80: 80; /* Modal scrim. */
  --z-90: 90; /* Modal. */
  --z-100: 100; /* Toast. */
  --font-display: Anton, "Arial Narrow", Impact, sans-serif;
  --font-sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "EB Garamond", Palatino, "Palatino Linotype", "Book Antiqua", serif;
  --text-display-hero: 400 190px/0.99 var(--font-display); /* Manifesto hero, uppercase, one or two words per line. Desktop only; mobile drops to display-1-sm. */
  --text-display-1: 400 82px/1.05 var(--font-display); /* Hero headline, 960–1919px, uppercase. 103px at 1920+. */
  --text-display-2: 400 65px/1.05 var(--font-display); /* Secondary hero / contained banner headline, uppercase. 82px at 1920+. */
  --text-display-3: 400 52px/1.05 var(--font-display); /* Section banner headline, uppercase. 65px at 1920+. */
  --text-display-4: 400 41px/1.05 var(--font-display); /* Small promo tile headline, uppercase. 52px at 1920+. */
  --text-display-1-sm: 400 41px/1.05 var(--font-display); /* display-1 below 960px. */
  --text-display-2-sm: 400 34px/1.05 var(--font-display); /* display-2 below 960px. */
  --text-display-3-sm: 400 28px/1.05 var(--font-display); /* display-3 below 960px. */
  --text-display-4-sm: 400 21px/1.05 var(--font-display); /* display-4 below 960px. */
  --text-oversize-1: 500 120px/1 var(--font-sans); /* Mixed-case giant statement or live number in the grotesk. 960–1439px; 150px at 1440, 186px at 1920+, 96px below 960. */
  --text-oversize-2: 500 96px/1.1 var(--font-sans); /* 960–1439px; 120px at 1440, 150px at 1920+, 76px below 960. */
  --text-oversize-3: 500 76px/1.1 var(--font-sans); /* 960–1439px; 96px at 1440, 120px at 1920+, 60px / 1.2 below 960. */
  --text-title-1: 500 40px/1.2 var(--font-sans); /* Page title on landing pages. 48px at 1920+. */
  --text-title-2: 500 32px/1.2 var(--font-sans); /* Section title. 40px at 1920+. */
  --text-title-3: 500 24px/1.2 var(--font-sans); /* Sub-section heading, card-group and rail titles. 32px at 1920+. */
  --text-title-4: 500 20px/1.2 var(--font-sans); /* Module and card-group heading. 24px at 1920+. */
  --text-body-1: 400 16px/24px var(--font-sans); /* Default body, hero body, card subtitle (in text-secondary). */
  --text-body-1-strong: 500 16px/24px var(--font-sans); /* Nav links, buttons, card title, badge line. The workhorse weight. */
  --text-body-2: 400 14px/21px var(--font-sans); /* Secondary UI text, helper text, filter counts. */
  --text-body-2-strong: 500 14px/21px var(--font-sans); /* Image badges, small labels. */
  --text-body-3: 400 12px/18px var(--font-sans); /* Utility bar, captions, footer links. */
  --text-body-3-strong: 500 12px/18px var(--font-sans); /* Promo bar link, small emphasized labels. */
  --text-body-4: 400 10px/15px var(--font-sans); /* Micro legal only. Avoid where possible. */
  --text-body-4-strong: 500 10px/15px var(--font-sans); /* Micro tags. */
  --text-legal: 400 14px/21px var(--font-sans); /* Footer legal and terms. */
  --text-conversation-1: 400 48px/1.1 var(--font-serif); /* Serif voice for customer and advisor quotes, 960px+ (60px at 1920+, 32px / 1.35 below 960). */
  --text-conversation-2: 400 40px/1.1 var(--font-serif); /* 960px+ (48px at 1920+, 24px / 1.35 below 960). */
  --text-conversation-3: 400 32px/1.35 var(--font-serif); /* 960px+ (40px at 1920+, 20px below 960). */
  --text-conversation-4: 400 20px/1.35 var(--font-serif); /* 960px+ (16px / 1.5 below 960). */
  --text-footnote-serif: italic 400 26px/1.1 var(--font-serif); /* The asterisk footnote under a display-hero headline, and the handwritten-note annotation on product shots. Italic, text-primary, one line. */
  --text-statement: 400 48px/1.2 var(--font-sans); /* Manifesto paragraphs on the dark register, offset to start at the grid's 4th column. 28px below 960. */
  --text-section-heading: 500 48px/1.1 var(--font-sans); /* Editorial feature headline and split-feature heading. 32px below 960. */
  --text-card-headline: 500 26px/1.2 var(--font-sans); /* Article card headline, module titles on the dark register. */
  --text-rail-headline: 500 22px/1.2 var(--font-sans); /* News-rail item headline beside a thumbnail. */
  --text-editorial-body: 400 20px/1.5 var(--font-sans); /* Long-form article body at 960px+; 16px / 1.5 below. */
  --text-dek: 400 18px/1.5 var(--font-sans); /* Standfirst under a headline, in text-secondary. */
  --text-eyebrow: 400 13px/1.5 var(--font-sans); /* Category label above an article headline, in text-secondary, sentence case. */
  --text-nav-editorial: 500 16px/1 var(--font-sans); /* Editorial top nav; inactive links text-secondary, current page text-primary. */
}
.display-hero {
  font-family: var(--font-display);
  font-size: 190px;
  line-height: 0.99;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.display-1 {
  font-family: var(--font-display);
  font-size: 82px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.display-2 {
  font-family: var(--font-display);
  font-size: 65px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.display-3 {
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.display-4 {
  font-family: var(--font-display);
  font-size: 41px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.display-1-sm {
  font-family: var(--font-display);
  font-size: 41px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.display-2-sm {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.display-3-sm {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.display-4-sm {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.oversize-1 {
  font-family: var(--font-sans);
  font-size: 120px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0;
}
.oversize-2 {
  font-family: var(--font-sans);
  font-size: 96px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: 0;
}
.oversize-3 {
  font-family: var(--font-sans);
  font-size: 76px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: 0;
}
.title-1 {
  font-family: var(--font-sans);
  font-size: 40px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0;
}
.title-2 {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0;
}
.title-3 {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0;
}
.title-4 {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0;
}
.body-1 {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-1-strong {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0;
}
.body-2 {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-2-strong {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  letter-spacing: 0;
}
.body-3 {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-3-strong {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0;
}
.body-4 {
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 15px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-4-strong {
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 15px;
  font-weight: 500;
  letter-spacing: 0;
}
.legal {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  letter-spacing: 0;
}
.conversation-1 {
  font-family: var(--font-serif);
  font-size: 48px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0;
}
.conversation-2 {
  font-family: var(--font-serif);
  font-size: 40px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0;
}
.conversation-3 {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: 0;
}
.conversation-4 {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: 0;
}
.footnote-serif {
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-style: italic;
}
.statement {
  font-family: var(--font-sans);
  font-size: 48px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.section-heading {
  font-family: var(--font-sans);
  font-size: 48px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.card-headline {
  font-family: var(--font-sans);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.rail-headline {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0;
}
.editorial-body {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.dek {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.nav-editorial {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.01em;
}