/* ==========================================================================
   tokens.css — design tokens for the [BRAND] placeholder site
   Owner: spec-writer-agent. Source of truth: ../DESIGN_SPEC.md
   Every value was measured on the reference layout (see ./reference/).

   BREAKPOINTS (media queries cannot read custom properties, so copy these
   literals into @media rules):
     desktop         : (min-width: 1200px)                         default styles
     tablet          : (max-width: 1199.98px)                      page variant "T" (790–1199)
     nav-mobile      : (max-width: 839.98px)                       nav only: desktop nav -> mobile nav
     quote-sm        : (max-width: 809px)                          serif pull-quote 24px -> 20px
     phone           : (max-width: 789.98px)                       page variant "P" (<= 789)
     footer grid tracks change on their own via auto-fill (no query needed).
   Custom-media notes (not natively supported, documentation only):
     @custom-media --tablet     (max-width: 1199.98px);
     @custom-media --nav-mobile (max-width: 839.98px);
     @custom-media --quote-sm   (max-width: 809px);
     @custom-media --phone      (max-width: 789.98px);

   Type is STEPPED, not fluid: sizes are constant inside a range and change
   only at 1200 / 809 / 790. The one viewport-relative value is the tablet
   hero headline min-height (max(520px, 43.24vh)).
   ========================================================================== */

:root {
  /* ---------- Color: surfaces ---------- */
  --color-bg: #ffffff;                          /* page, light sections, white cards/pills */
  --color-bg-dark: #05010d;                     /* dark band: hero (dark state), press, bento, import */
  --color-bg-subtle: rgba(0, 0, 0, 0.02);       /* footer band, more-reasons cards (renders ~#fafafa) */
  --color-surface: #fafafa;                     /* light feature cards */
  --color-surface-warm: #faf8f7;                /* warm light card (live-data pair, left) */
  --color-surface-dark-1: #050408;              /* bento wide card */
  --color-surface-dark-navy: #010a1a;           /* bento tall card 1 */
  --color-surface-dark-violet: #0d0a14;         /* bento tall card 3 */
  --color-surface-dark-green: #0a0e0c;          /* bento tall card 4 */
  --color-surface-deep-teal: #021e30;           /* live-data wide card */
  --color-surface-glass-dark: rgba(255, 255, 255, 0.05); /* press tiles on dark */
  --color-surface-glass-wine: rgba(26, 5, 12, 0.8);      /* glass widget in bento tower card */
  --color-surface-glass-wine-head: rgba(26, 5, 12, 0.3);
  --color-surface-chip-red: #fffcfc;            /* broadcast red status chip */
  --color-nav-dark: rgba(10, 10, 10, 0.2);      /* nav pill over dark sections */
  --color-hero-pill: rgba(0, 0, 0, 0.85);       /* hero tab bar */
  --color-scrim-40: rgba(0, 0, 0, 0.4);         /* 32px round media buttons */
  --color-scrim-white-60: rgba(255, 255, 255, 0.6);
  --color-modal-overlay: rgba(255, 255, 255, 0.8);

  /* ---------- Color: text ---------- */
  --color-text: #000000;
  --color-text-80: rgba(0, 0, 0, 0.8);          /* reviews h3, review body */
  --color-text-70: rgba(0, 0, 0, 0.7);          /* nav links */
  --color-text-65: rgba(0, 0, 0, 0.65);         /* section intro leads, hero lead */
  --color-text-60: rgba(0, 0, 0, 0.6);          /* card body on light cards, centered leads */
  --color-text-55: rgba(0, 0, 0, 0.55);         /* body, footer links, footer note, CTA lead */
  --color-text-50: rgba(0, 0, 0, 0.5);          /* small labels, captions, list secondary */
  --color-text-footnote: rgba(59, 59, 67, 0.6);
  --color-text-link-hover: #262626;
  --color-text-ink-violet: #0d0021;             /* history card titles, more-reasons h3 */
  --color-text-ink-green: #002111;              /* sharing card title */
  --color-text-body-violet: #383145;
  --color-text-body-green: #415249;
  --color-text-inverse: #ffffff;
  --color-text-inverse-90: rgba(255, 255, 255, 0.9);
  --color-text-inverse-80: rgba(255, 255, 255, 0.8);
  --color-text-inverse-75: rgba(255, 255, 255, 0.75);
  --color-text-inverse-60: rgba(255, 255, 255, 0.6);
  --color-text-inverse-50: rgba(255, 255, 255, 0.5);
  --color-tab-inactive: #c1c0c0;                /* hero tab labels when not active */

  /* ---------- Color: accents ---------- */
  --color-accent: #007bff;                      /* blue pill (broadcast) */
  --color-accent-hover: #006ce0;
  --color-accent-dot: #0085ff;                  /* footer location dots */
  --color-accent-green: #08a85b;                /* sharing eyebrows */
  --color-accent-violet: #6100ff;               /* history eyebrow */
  --color-accent-violet-soft: #977bd3;
  --color-accent-yellow: #f7be00;               /* active hero tab thumb */
  --color-danger: #d92d20;
  --color-star: #f7ab38;                        /* review stars */
  --color-btn-dark: #000000;
  --color-btn-dark-hover: rgba(0, 0, 0, 0.8);
  --color-btn-light-hover: #f0f0f0;
  --color-progress-track: rgba(0, 0, 0, 0.2);
  /* press hover fills: neutral placeholders (reference used brand colors) */
  --color-press-fill-1: #3a3a44;
  --color-press-fill-2: #2c3550;
  --color-press-fill-3: #2f4a3a;
  --color-press-fill-4: #3f335a;
  --color-press-fill-5: #ffffff;

  /* ---------- Color: borders & dividers ---------- */
  --color-border: rgba(0, 0, 0, 0.08);          /* chips, light hairlines */
  --color-border-strong: rgba(0, 0, 0, 0.12);   /* white pill outline, review header divider */
  --color-border-control: rgba(33, 33, 33, 0.12);
  --color-border-red: #eedfde;
  --color-border-dark: rgba(255, 255, 255, 0.08); /* dark card hairline (::after) */
  --color-border-glass: rgba(255, 255, 255, 0.18);
  --color-divider-dark: rgba(255, 255, 255, 0.1);
  --color-divider-vert: rgba(255, 255, 255, 0.15);
  --color-ring-dark: #222222;                   /* avatar ring in reviews pill */

  /* ---------- Gradients & masks ---------- */
  --grad-announcement: linear-gradient(171deg, rgb(97, 97, 112) -45%, rgb(18, 18, 140) 69%);
  --grad-btn-dark: linear-gradient(180deg, rgb(39, 40, 47) 0%, rgb(13, 12, 15) 100%);
  --grad-hero-glow: radial-gradient(50% 50% at 50% 50%, rgb(36, 1, 111) 36.99%, rgba(36, 1, 111, 0) 100%);
  --grad-fade-to-dark: linear-gradient(180deg, rgba(5, 1, 13, 0) 0%, rgb(5, 1, 13) 100%);
  --grad-fade-to-dark-phone: linear-gradient(180deg, rgba(5, 1, 13, 0) 0%, rgb(5, 1, 13) 35.91%);
  --grad-media-fade: linear-gradient(180deg, rgba(204, 238, 255, 0) 0%, rgb(5, 1, 13) 100%);
  --grad-card-navy-top: linear-gradient(180deg, rgb(1, 10, 26) -27%, rgba(1, 10, 26, 0) 100%);
  --grad-card-violet-top: linear-gradient(180deg, rgb(11, 8, 16) -27%, rgba(11, 8, 16, 0) 100%);
  --grad-card-green-vignette: radial-gradient(58% 67% at 50% 50%, rgba(10, 14, 12, 0) 36.52%, rgb(10, 14, 12) 100%);
  --grad-card-violet: linear-gradient(180deg, rgb(18, 0, 54) 0%, rgb(37, 1, 96) 51.02%, rgb(18, 0, 54) 100%);
  --grad-placeholder: linear-gradient(135deg, #d9d9de 0%, #b9b9c2 100%);           /* image slots on light */
  --grad-placeholder-dark: linear-gradient(135deg, #2a2733 0%, #121019 100%);      /* image slots on dark */
  --mask-hero-media: radial-gradient(50% 50% at 50% 50%, #000 24.26%, transparent 100%);
  --mask-marquee: linear-gradient(90deg, transparent 0%, #000 15%, rgba(0, 0, 0, 0.847) 85%, transparent 100%);
  --mask-reviews-fade: linear-gradient(180deg, #000 36%, transparent 48%);

  /* ---------- Fonts ---------- */
  /* Google Fonts URL: https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..700&family=EB+Garamond:wght@700&family=Indie+Flower&display=swap */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-hand: "Indie Flower", "Comic Sans MS", cursive;
  --fw-regular: 400;
  --fw-medium: 500;    /* default body weight */
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- Type scale (desktop defaults; overrides below) ----------
     size / line-height / letter-spacing. Letter-spacing values are the
     Inter-calibrated ones so line breaks match the reference.            */
  --fs-display: 65px;        --lh-display: 78px;       --ls-display: -1.25px;
  --fs-title-xl: 56px;       --lh-title-xl: 56px;      --ls-title-xl: -0.38px;
  --fs-title-l: 48px;        --lh-title-l: 52.8px;     /* CTA h3 */
  --fs-title-l-soft: 48px;   --lh-title-l-soft: 57.6px;/* reviews h3 */
  --fs-title-m: 44px;        --lh-title-m: 48.4px;     /* import / broadcast h3 */
  --fs-title-s: 40px;        --lh-title-s: 48px;       /* more-reasons h3 */
  --fs-card-xl: 36px;        --lh-card-xl: 39.6px;
  --fs-card-l: 32px;         --lh-card-l: 35.2px;
  --fs-card-l-dark: 32px;    --lh-card-l-dark: 36.8px; /* bento wide card title, never shrinks */
  --fs-card-m: 28px;         --lh-card-m: 30.8px;      --ls-card-m: -0.12px;
  --fs-board: 32px;          --lh-board: 35.2px;       /* broadcast chip codes */
  --fs-quote: 24px;          --lh-quote: 21.6px;       --ls-quote: -0.02em;
  --fs-lead-l: 22px;         --lh-lead-l: 33px;        --ls-lead-l: -0.42px;
  --fs-lead-l-tight: 22px;   --lh-lead-l-tight: 30.8px;
  --fs-link-lg: 22px;        --lh-link-lg: 33px;
  --fs-lead-m: 18px;         --lh-lead-m: 27px;        --ls-lead-m: -0.2px;
  --fs-lead-s: 17px;         --lh-lead-s: 25.5px;      --ls-lead-s: -0.2px;   /* hero lead */
  --fs-lead-s-tight: 17px;   --lh-lead-s-tight: 23.8px;                        /* CTA lead */
  --fs-body: 16px;           --lh-body: 24px;          --ls-body: -0.14px;
  --fs-body-card: 16px;      --lh-body-card: 24px;     /* card body; 15/22.5 on phone */
  --fs-small: 15px;          --lh-small: 22.5px;       --ls-small: -0.19px;
  --fs-button: 17px;         --lh-button: 20.4px;      --ls-button: -0.13px;
  --fs-button-sm: 15px;      --lh-button-sm: 18px;
  --fs-nav: 15px;            --lh-nav: 30px;           --ls-nav: -0.25px;
  --fs-nav-cta: 14px;        --lh-nav-cta: 28px;
  --fs-wordmark: 18px;       --lh-wordmark: 21.6px;
  --fs-announcement: 14px;   --lh-announcement: 16.8px;
  --fs-footer-heading: 15px; --lh-footer-heading: 18px;
  --fs-footer-link: 15px;    --lh-footer-link: 22.5px;
  --fs-label: 13px;          --lh-label: 15.6px;
  --fs-caption: 13px;        --lh-caption: 15.6px;
  --fs-micro: 12px;          --lh-micro: 14.4px;
  --fs-ui-body: 17px;        --lh-ui-body: 20.4px;     --ls-ui-body: -0.43px;  /* reviewer names */
  --fs-ui-subhead: 15px;     --lh-ui-subhead: 20px;    --ls-ui-subhead: -0.23px;
  --fs-ui-footnote: 13px;    --lh-ui-footnote: 18px;   --ls-ui-footnote: -0.08px;
  --fs-hand: 16px;           --lh-hand: 19.2px;

  /* ---------- Spacing (px scale actually used) ---------- */
  --space-2: 2px;   --space-3: 3px;   --space-4: 4px;   --space-6: 6px;
  --space-7: 7px;   --space-8: 8px;   --space-10: 10px; --space-12: 12px;
  --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-25: 25px;
  --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-52: 52px;
  --space-56: 56px; --space-64: 64px; --space-65: 65px; --space-72: 72px;
  --space-76: 76px; --space-80: 80px; --space-100: 100px; --space-120: 120px;
  --space-140: 140px; --space-150: 150px; --space-160: 160px; --space-180: 180px;
  --space-200: 200px;

  /* semantic spacing */
  --gutter: 24px;                     /* side padding at every width */
  --card-pad: 40px;                   /* feature card padding (24 on phone) */
  --card-gap: 32px;                   /* between stacked cards and card pairs (24 on tablet) */
  --section-header-gap: 20px;         /* h2 -> lead (24 on phone) */
  --section-header-pb: 64px;          /* lead -> first card */
  --feature-gap: 180px;               /* between light feature sections */

  /* ---------- Layout ---------- */
  --container-max: 1000px;
  --container: min(var(--container-max), calc(100vw - 2 * var(--gutter)));
  --text-w-hero-lead: 737px;
  --text-w-feature: 680px;           /* light feature h2 + lead */
  --text-w-centered-h3: 952px;
  --text-w-centered-lead: 600px;
  --text-w-more-h3: 624px;
  --text-w-reviews-h3: 731px;
  --text-w-cta-lead: 78%;            /* 743px at 1000 container */
  --reviews-wall-max: 1400px;
  --devices-inner-max: 1500px;
  --nav-block-h: 171px;              /* 119px on nav-mobile */
  --nav-row-h: 56px;
  --nav-pill-collapsed-w: 718px;
  --announcement-h: 39px;
  --hero-headline-min-h: 440px;      /* max(520px, 43.24vh) tablet, 550px phone */
  --hero-stage-top: 20vh;
  --hero-stage-h: 80vh;
  --hero-runway-h: 900px;
  --hero-tabbar-top: calc(100vh - 80px);
  --hero-tabbar-mt: calc(-29vh - 80px);

  /* ---------- Radii ---------- */
  --radius-6: 6px;       /* announcement icon */
  --radius-7: 7px;       /* mobile logo */
  --radius-8: 8px;       /* press tiles (outer corner tiles get 16 on the outer corner) */
  --radius-10: 10px;     /* broadcast marquee rows */
  --radius-12: 12px;     /* review cards, icon tiles, footer logo & map tiles */
  --radius-16: 16px;     /* notification cards, chips, glass widget */
  --radius-20: 20px;     /* all feature cards */
  --radius-40: 40px;     /* 198x44 pill buttons */
  --radius-50: 50px;     /* nav collapsed pill, blue pill, tab thumb step 1 */
  --radius-67: 67px;     /* tab thumb steps 2-4 */
  --radius-70: 70px;     /* hero tab bar */
  --radius-logo: 30%;    /* nav logo square */
  --radius-pill: 9999px;

  /* ---------- Shadows ---------- */
  --shadow-ring-02: rgba(0,0,0,.02) 0 0 0 1px, rgba(0,0,0,.02) 0 1px 1px .5px, rgba(0,0,0,.02) 0 3px 3px 1.5px, rgba(0,0,0,.02) 0 6px 6px -3px, rgba(0,0,0,.02) 0 12px 12px -6px, rgba(0,0,0,.02) 0 24px 24px -12px;
  --shadow-soft-02: rgba(0,0,0,.02) 0 1px 1px .5px, rgba(0,0,0,.02) 0 3px 3px 1.5px, rgba(0,0,0,.02) 0 6px 6px -3px, rgba(0,0,0,.02) 0 12px 12px -6px, rgba(0,0,0,.02) 0 24px 24px -12px;
  --shadow-ring-04: rgba(0,0,0,.04) 0 0 0 1px, rgba(0,0,0,.02) 0 1px 1px .5px, rgba(0,0,0,.02) 0 3px 3px 1.5px, rgba(0,0,0,.02) 0 6px 6px -3px, rgba(0,0,0,.02) 0 12px 12px -6px, rgba(0,0,0,.02) 0 24px 24px -12px;
  --shadow-soft-03: rgba(0,0,0,.03) 0 1px 1px .5px, rgba(0,0,0,.03) 0 3px 3px 1.5px, rgba(0,0,0,.03) 0 6px 6px -3px, rgba(0,0,0,.03) 0 12px 12px -6px, rgba(0,0,0,.03) 0 24px 24px -12px;
  --shadow-ring-03: rgba(0,0,0,.03) 0 0 1px 1px, rgba(0,0,0,.03) 0 1px 1px .25px, rgba(0,0,0,.03) 0 3px 3px 1.5px, rgba(0,0,0,.03) 0 6px 6px -3px, rgba(0,0,0,.03) 0 12px 12px -6px, rgba(0,0,0,.03) 0 24px 24px -12px;
  --shadow-ring-06: rgba(0,0,0,.06) 0 0 0 1px, rgba(0,0,0,.06) 0 1px 1px .5px, rgba(0,0,0,.06) 0 3px 3px 1.5px, rgba(0,0,0,.06) 0 6px 6px -3px, rgba(0,0,0,.06) 0 12px 12px -6px, rgba(0,0,0,.06) 0 24px 24px -12px;
  --shadow-float: rgba(0,0,0,0) 0 248px 69px 0, rgba(0,0,0,.03) 0 159px 3px 10px, rgba(0,0,0,.1) 0 89px 54px 5px, rgba(0,0,0,.17) 0 40px 40px 0, rgba(0,0,0,.19) 0 10px 22px 0;
  --shadow-dot: rgba(0,0,0,.19) 0 1px 2px 0;
  --shadow-press-glow-blur: 20px;   /* press hover shadow clone: blur(20px), opacity .8, scale 1.05 */

  /* ---------- Blur ---------- */
  --blur-nav-dark: 24px;
  --blur-glass: 18px;
  --blur-pill: 5px;          /* hero tab bar, round media buttons */
  /* reviews progressive blur, 8 stacked layers (bottom 298px of the wall) */
  --blur-prog-1: 0.09375px; --blur-prog-2: 0.1875px; --blur-prog-3: 0.375px; --blur-prog-4: 0.75px;
  --blur-prog-5: 1.5px;     --blur-prog-6: 3px;      --blur-prog-7: 6px;     --blur-prog-8: 12px;

  /* ---------- Z-index layers ---------- */
  --z-base: 0;
  --z-raised: 1;             /* hero headline, card text over card media */
  --z-hero-stage: 2;         /* sticky phone stage */
  --z-hero-fade: 3;          /* hero bottom fade strip */
  --z-hero-tabbar: 4;        /* sticky tab bar */
  --z-nav: 9;                /* fixed navbar */
  --z-modal: 10;             /* get-app overlay + modal */

  /* ---------- Motion: durations ---------- */
  --dur-instant: 0ms;
  --dur-fast: 200ms;          /* theme swap, modal fade */
  --dur-hover: 250ms;         /* press tile hover */
  --dur-pill: 300ms;          /* notification pills, mockup screen crossfade */
  --dur-bounce: 400ms;
  --dur-pop: 450ms;
  --dur-nav: 500ms;
  --dur-soft: 500ms;
  --dur-bloom: 600ms;
  --dur-spring: 650ms;        /* default spring (95% settled at 325ms) */
  --dur-stagger: 100ms;
  --dur-radar: 10s;           /* one full ring rotation */
  --dur-pulse: 1s;            /* footer dot pulse */
  --marquee-speed: 30;        /* px per second (JS/CSS: duration = distance / 30) */

  /* ---------- Motion: easings ----------
     Each spring has a cubic-bezier fallback (used by default) and an exact
     linear() curve (swapped in by the @supports block below).            */
  --ease-spring-default-fallback: cubic-bezier(.2, .5, .05, 1.05);   /* k500 d60 m1, 650ms, no overshoot */
  --ease-spring-nav-fallback: cubic-bezier(.25, .5, .1, 1.1);        /* k400 d40 m1, 500ms */
  --ease-spring-pop-fallback: cubic-bezier(.4, .95, .05, 1.1);       /* k400 d30 m1, 450ms, +2.8% */
  --ease-spring-soft-fallback: cubic-bezier(.3, .5, .05, 1.1);       /* k300 d30 m1, 500ms, +0.4% */
  --ease-spring-bounce-fallback: cubic-bezier(.35, .75, .05, 1.1);   /* bounce .2 dur .4, 400ms, +1.5% */

  --ease-spring-default-linear: linear(0, .111 4.2%, .289 8.3%, .45 12.5%, .578 16.7%, .678 20.8%, .754 25%, .812 29.2%, .857 33.3%, .891 37.5%, .917 41.7%, .936 45.8%, .952 50%, .963 54.2%, .972 58.3%, .978 62.5%, .984 66.7%, .987 70.8%, .99 75%, .993 79.2%, .994 83.3%, .996 87.5%, .997 91.7%, .998 95.8%, 1);
  --ease-spring-nav-linear: linear(0, .066 4.2%, .203 8.3%, .355 12.5%, .496 16.7%, .616 20.8%, .713 25%, .788 29.2%, .845 33.3%, .888 37.5%, .92 41.7%, .943 45.8%, .96 50%, .971 54.2%, .98 58.3%, .986 62.5%, .99 66.7%, .993 70.8%, .995 75%, .997 79.2%, .998 83.3%, .998 87.5%, .999 91.7%, .999 95.8%, 1);
  --ease-spring-pop-linear: linear(0, .058 4.2%, .191 8.3%, .353 12.5%, .514 16.7%, .658 20.8%, .776 25%, .867 29.2%, .933 33.3%, .978 37.5%, 1.006 41.7%, 1.021 45.8%, 1.027 50%, 1.028 54.2%, 1.026 58.3%, 1.021 62.5%, 1.017 66.7%, 1.012 70.8%, 1.009 75%, 1.005 79.2%, 1.003 83.3%, 1.001 87.5%, 1);
  --ease-spring-soft-linear: linear(0, .053 4.2%, .172 8.3%, .315 12.5%, .457 16.7%, .585 20.8%, .693 25%, .781 29.2%, .849 33.3%, .899 37.5%, .936 41.7%, .962 45.8%, .979 50%, .991 54.2%, .998 58.3%, 1.002 62.5%, 1.004 66.7%, 1.004 75%, 1.003 83.3%, 1.002 91.7%, 1);
  --ease-spring-bounce-linear: linear(0, .057 4.2%, .187 8.3%, .344 12.5%, .498 16.7%, .635 20.8%, .748 25%, .837 29.2%, .903 33.3%, .949 37.5%, .979 41.7%, .998 45.8%, 1.009 50%, 1.014 54.2%, 1.015 58.3%, 1.014 62.5%, 1.012 66.7%, 1.01 70.8%, 1.008 75%, 1.005 79.2%, 1.004 83.3%, 1.002 87.5%, 1);

  /* the tokens components should use */
  --ease-spring-default: var(--ease-spring-default-fallback);
  --ease-spring-nav: var(--ease-spring-nav-fallback);
  --ease-spring-pop: var(--ease-spring-pop-fallback);
  --ease-spring-soft: var(--ease-spring-soft-fallback);
  --ease-spring-bounce: var(--ease-spring-bounce-fallback);
  --ease-inout: cubic-bezier(.44, 0, .56, 1);
  --ease-out-soft: cubic-bezier(.12, .23, .5, 1);
  --ease-in-bloom: cubic-bezier(.5, 0, .88, .77);
  --ease-scroll: cubic-bezier(.3, 0, .1, 1);   /* tab-click smooth scroll, 500ms */
  --ease-linear: linear;

  /* shorthand transitions */
  --t-spring: var(--dur-spring) var(--ease-spring-default);
  --t-nav: var(--dur-nav) var(--ease-spring-nav);
  --t-pop: var(--dur-pop) var(--ease-spring-pop);
  --t-soft: var(--dur-soft) var(--ease-spring-soft);
  --t-bounce: var(--dur-bounce) var(--ease-spring-bounce);
  --t-hover: var(--dur-hover) var(--ease-inout);
  --t-fast: var(--dur-fast) var(--ease-inout);
}

/* Exact spring curves where linear() is supported */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring-default: var(--ease-spring-default-linear);
    --ease-spring-nav: var(--ease-spring-nav-linear);
    --ease-spring-pop: var(--ease-spring-pop-linear);
    --ease-spring-soft: var(--ease-spring-soft-linear);
    --ease-spring-bounce: var(--ease-spring-bounce-linear);
  }
}

/* ---------- Tablet: 790–1199.98 ---------- */
@media (max-width: 1199.98px) {
  :root {
    --fs-lead-s: 16px; --lh-lead-s: 24px; --ls-lead-s: -0.14px;
    --card-gap: 24px;
    --hero-headline-min-h: max(520px, 43.24vh);
  }
}

/* ---------- Nav switch: <= 839.98 ---------- */
@media (max-width: 839.98px) {
  :root {
    --nav-block-h: 119px;
    --fs-wordmark: 16px; --lh-wordmark: 19.2px;
  }
}

/* ---------- Serif quote preset: <= 809 ---------- */
@media (max-width: 809px) {
  :root { --fs-quote: 20px; --lh-quote: 18px; }
}

/* ---------- Phone: <= 789.98 ---------- */
@media (max-width: 789.98px) {
  :root {
    --lh-display: 71.5px;
    --fs-title-xl: 32px;      --lh-title-xl: 41.6px;   --ls-title-xl: 0;
    --fs-title-l: 32px;       --lh-title-l: 35.2px;
    --fs-title-l-soft: 32px;  --lh-title-l-soft: 35.2px;
    --fs-title-m: 32px;       --lh-title-m: 35.2px;
    --fs-title-s: 26px;       --lh-title-s: 33.8px;
    --fs-card-xl: 28px;       --lh-card-xl: 32.2px;
    --fs-card-l: 28px;        --lh-card-l: 32.2px;
    --fs-card-m: 28px;        --lh-card-m: 32.2px;
    --fs-lead-l: 16px;        --lh-lead-l: 24px;       --ls-lead-l: -0.14px;
    --fs-lead-l-tight: 16px;  --lh-lead-l-tight: 22.4px;
    --fs-lead-m: 16px;        --lh-lead-m: 24px;       --ls-lead-m: -0.14px;
    --fs-lead-s: 17px;        --lh-lead-s: 25.5px;     --ls-lead-s: -0.2px;
    --fs-lead-s-tight: 16px;  --lh-lead-s-tight: 22.4px;
    --fs-body-card: 15px;     --lh-body-card: 22.5px;
    --fs-button: 15px;        --lh-button: 18px;
    --card-pad: 24px;
    --card-gap: 32px;
    --section-header-gap: 24px;
    --hero-headline-min-h: 550px;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-spring: 0ms; --dur-nav: 0ms; --dur-pop: 0ms; --dur-soft: 0ms; --dur-bounce: 0ms;
    --dur-bloom: 0ms; --dur-pill: 0ms; --dur-hover: 0ms;
    /* opacity/color fades may keep --dur-fast (200ms); loops (radar, ticker, parallax) must stop in components */
  }
}