/* ============================================================================
   Survizo: the shared chrome (design language v5, 6 Oct 2026)
   ----------------------------------------------------------------------------
   The one layer EVERY page of survizo.com loads, the developer portal
   included: the metric-matched fallback face, the colour tokens (light, and
   dark declared twice), the header with its Platform menu and phone menu, the
   theme switch, and the footer site map. The markup it styles is stamped into
   each page from tool/marketing-chrome.html by tool/marketing-chrome.mjs.

   Site pages load this and then styles.css (their own components); the
   portal loads this and then developers/portal.css (its docs layout). So:
   - every rule here is scoped to the chrome (.site-header, .site-footer,
     .skip) or is a utility both layers share (.icon, .sr-only, .wrap); a bare
     element or component selector here would leak into the portal;
   - tokens live here and only here, so the site and the portal cannot drift
     apart in colour, and the two dark blocks stay identical (pinned by
     tool/check_marketing_assets.test.mjs).

   Rules this sheet is held to (the measured contrast table is in the
   design-language-v5 note the lead keeps):
   - Nothing here is pink or magenta. The logo files carry the one pink mark.
   - Violet (--accent) is the action, the eyebrows, link underlines and focus.
   - Two faces: Figtree (400 and 700) for headings, buttons, the header, the
     footer and the logo; IBM Plex Sans (400 and 600) for the body text.
   - The logo is a PAIR: a black wordmark on the light ground, a white one on
     the dark. Which one shows is a token (--logo-light / --logo-dark) set in
     the same three blocks as every colour, so it follows the device, a pinned
     choice, and works with scripting off, with no flash.
   ========================================================================== */

/* Metric-matched stand-ins for Figtree while it loads (font-display: swap):
   Arial scaled so the site's own words set to the same width, with Figtree's
   own ascent and descent, so the swap moves as little as possible. Measured
   with fontTools from the vendored file (instanced at wght 400 and 700)
   against Windows' Arial and Arial Bold, over every paragraph (400) and
   every h1-h3 (700) on the three pages: 99.27% and 96.22%. */
@font-face {
  font-family: "Figtree Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
  font-weight: 400;
  size-adjust: 99.27%;
  ascent-override: 95.70%;
  descent-override: 25.18%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Figtree Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Bold");
  font-weight: 700;
  size-adjust: 96.22%;
  ascent-override: 98.73%;
  descent-override: 25.98%;
  line-gap-override: 0%;
}

/* The same for the body face, IBM Plex Sans (added 8 Oct 2026). Measured the
   same way, with fontTools from the vendored files (instanced at wght 400
   and 600, both subsets) against Windows' Arial and Arial Bold, over every
   paragraph, list item and table cell (400) and every b, strong and th (600,
   what bold body text shows) on the 20 site pages: 100.86% and 97.40%. The
   bold stand-in is declared at 700 because bold text asks for 700 and the
   face that arrives, at 600, is the closest weight the family has.
   Plex's own ascent and descent are 1025 and 275 per 1000; each override is
   that divided by the size-adjust, because the browser scales it by it. */
@font-face {
  font-family: "IBM Plex Sans Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
  font-weight: 400;
  size-adjust: 100.86%;
  ascent-override: 101.63%;
  descent-override: 27.27%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "IBM Plex Sans Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Bold");
  font-weight: 700;
  size-adjust: 97.40%;
  ascent-override: 105.24%;
  descent-override: 28.23%;
  line-gap-override: 0%;
}

:root {
  /* grounds */
  --bg:           #FFFFFF;
  --surface:      #FFFFFF;  /* cards, the form, the theme switch */
  --panel:        #F5F5F5;  /* quiet panels */
  --tint:         #EFEDFD;  /* lavender: soft cards and bands */
  --line:         #E4E1F2;  /* hairlines, decorative only */
  --field-line:   #857E9F;  /* field edges and the chosen theme: 3.83 on white, 3.32 on --tint */

  /* ink */
  --ink:          #320F5E;  /* headings: 15.38 on white, 13.33 on --tint */
  --text:         #333333;  /* body: 12.63 / 10.95 */
  --ink-2:        #676767;  /* secondary: 5.66 / 4.90 (discuss.io's #9A9A9A fails, 2.81) */

  /* the one action, the eyebrows and the focus ring */
  --accent:       #6C16C7;  /* 8.15 on white, 7.06 on --tint; white on it 8.15 */
  --accent-hover: #5A0FAA;  /* white on it 10.08 */
  --on-accent:    #FFFFFF;
  --focus:        #6C16C7;

  /* the one deep band: how a study runs */
  --night:        #320F5E;
  --night-2:      #46207A;
  --night-line:   #5A3A88;
  --on-night:     #FFFFFF;  /* 15.38 on --night */
  --on-night-2:   #D9D1F2;  /* 10.51 */
  --night-accent: #D4C2FF;  /*  9.49; --night on it 9.49 */
  --on-night-accent: #320F5E;

  /* semantic, never decorative */
  --ok:           #1F6B41;  --ok-tint:     #E0F5E6;
  --warn:         #845A0F;  --warn-tint:   #FBEDD1;
  --danger:       #A13029;  --danger-tint: #FFE9E5;

  /* the hero's wash: light, low-saturation lavender into white */
  --wash: radial-gradient(70% 90% at 82% 0%, #E9E3FD 0%, rgba(233, 227, 253, 0) 72%),
          linear-gradient(180deg, #F6F4FE 0%, #FFFFFF 88%);
  --shadow-sm: 0 1px 2px rgba(50, 15, 94, .06), 0 4px 12px -4px rgba(50, 15, 94, .10);
  --shadow:    0 2px 6px rgba(50, 15, 94, .06), 0 24px 48px -24px rgba(50, 15, 94, .28);
  --shadow-lg: 0 4px 12px rgba(50, 15, 94, .08), 0 32px 64px -24px rgba(50, 15, 94, .36);

  /* which logo file shows: the black wordmark on the light ground */
  --logo-light:   block;
  --logo-dark:    none;

  /* type: Figtree 400 and 700 for headings and controls, IBM Plex Sans 400
     and 600 for the body (--font-body); the measured scale, fluid for phones */
  --font:    "Figtree", "Figtree Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "IBM Plex Sans", "IBM Plex Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-h1:    clamp(2.125rem, 1.72rem + 1.8vw, 2.8125rem);  /* 34 → 45 */
  --t-h2:    clamp(1.75rem, 1.5rem + 1.1vw, 2.1875rem);    /* 28 → 35 */
  --t-h3:    1.375rem;                                     /* 22 */
  --t-h4:    1.25rem;                                      /* 20 */
  --t-lead:  1.125rem;                                     /* 18 */
  --t-body:  1rem;                                         /* 16 */
  --t-small: .875rem;                                      /* 14 */

  /* rhythm: an 8 px grid */
  --gutter:  16px;
  --measure: 1248px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --pill: 999px;
  --section: clamp(64px, 5vw + 32px, 112px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 72px;

  color-scheme: light;
}

@media (min-width: 720px)  { :root { --gutter: 32px; --header-h: 80px; } }
@media (min-width: 1280px) { :root { --gutter: 40px; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           #170C2C;
    --surface:      #21143D;
    --panel:        #1C1135;
    --tint:         #261847;
    --line:         #382A5A;
    --field-line:   #8478A8;  /* 4.25 on --surface */
    --ink:          #F3F0FF;  /* 16.63 on --bg, 14.35 on --tint */
    --text:         #DCD6EE;  /* 13.24 / 11.42 */
    --ink-2:        #B9B0D6;  /*  9.10 /  7.86 */
    --accent:       #B98CFF;  /*  7.34 on --bg; --on-accent on it 7.07 */
    --accent-hover: #CBA9FF;
    --on-accent:    #1C0D3A;
    --focus:        #B98CFF;
    --night:        #22153F;
    --night-2:      #33215A;
    --night-line:   #4A3872;
    --on-night:     #FFFFFF;
    --on-night-2:   #D9D1F2;
    --night-accent: #D4C2FF;
    --on-night-accent: #1C0D3A;
    --ok:     #88D1A2;  --ok-tint:     #1D3425;
    --warn:   #EAC07A;  --warn-tint:   #3B2E18;
    --danger: #F08F83;  --danger-tint: #44241F;
    --wash: radial-gradient(70% 90% at 82% 0%, #2C1B52 0%, rgba(44, 27, 82, 0) 72%), linear-gradient(180deg, #1D1138 0%, #170C2C 88%);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px -4px rgba(0, 0, 0, .4);
    --shadow:    0 2px 6px rgba(0, 0, 0, .3), 0 24px 48px -24px rgba(0, 0, 0, .7);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, .35), 0 32px 64px -24px rgba(0, 0, 0, .8);
    --logo-light:   none;
    --logo-dark:    block;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:           #170C2C;
  --surface:      #21143D;
  --panel:        #1C1135;
  --tint:         #261847;
  --line:         #382A5A;
  --field-line:   #8478A8;
  --ink:          #F3F0FF;
  --text:         #DCD6EE;
  --ink-2:        #B9B0D6;
  --accent:       #B98CFF;
  --accent-hover: #CBA9FF;
  --on-accent:    #1C0D3A;
  --focus:        #B98CFF;
  --night:        #22153F;
  --night-2:      #33215A;
  --night-line:   #4A3872;
  --on-night:     #FFFFFF;
  --on-night-2:   #D9D1F2;
  --night-accent: #D4C2FF;
  --on-night-accent: #1C0D3A;
  --ok:     #88D1A2;  --ok-tint:     #1D3425;
  --warn:   #EAC07A;  --warn-tint:   #3B2E18;
  --danger: #F08F83;  --danger-tint: #44241F;
  --wash: radial-gradient(70% 90% at 82% 0%, #2C1B52 0%, rgba(44, 27, 82, 0) 72%), linear-gradient(180deg, #1D1138 0%, #170C2C 88%);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px -4px rgba(0, 0, 0, .4);
  --shadow:    0 2px 6px rgba(0, 0, 0, .3), 0 24px 48px -24px rgba(0, 0, 0, .7);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, .35), 0 32px 64px -24px rgba(0, 0, 0, .8);
  --logo-light:   none;
  --logo-dark:    block;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* ── utilities both layers share ──────────────────────────────────────── */
.icon {
  font-family: "Material Symbols Outlined";
  font-weight: 400; font-style: normal;
  font-size: 24px; line-height: 1;
  letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
  -webkit-font-feature-settings: "liga"; font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  flex: none;
  user-select: none;
  /* A square box whatever the ligature's letters measure: while the icon
     face is still loading (font-display: block) the name is laid out in a
     fallback face, and "arrow_forward" at that width once pushed the hero's
     buttons onto two lines and shifted the whole hero when the icon arrived
     (CLS 0.11 at 1440, measured). */
  width: 1em; height: 1em; overflow: hidden;
}
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wrap { width: 100%; max-width: calc(var(--measure) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
body.menu-open { overflow: hidden; }

/* The chrome sets its own type and focus, so it looks the same on a page whose
   body is set differently (the portal reads at 1.62). */
.site-header, .site-footer, .skip {
  font-family: var(--font); line-height: 1.45; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.site-header :focus-visible, .site-footer :focus-visible, .skip:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px;
}
.skip {
  position: absolute; left: var(--gutter); top: -64px; z-index: 60;
  background: var(--surface); color: var(--ink); padding: 12px 16px; border-radius: var(--pill);
  box-shadow: var(--shadow); font-weight: 700; text-decoration: none;
}
.skip:focus { top: 8px; }

/* ── the logo pair ────────────────────────────────────────────────────── */
/* Both files are transparent renders of the supplied lockup: the mark
   unchanged, the wordmark black (light ground) or white (dark ground). The
   tokens decide which one is laid out; the hidden one is never shown. */
.brand { display: inline-flex; align-items: center; flex: none; border-radius: var(--r-sm); text-decoration: none; }
.brand img { height: 30px; width: auto; }
.brand .logo-light { display: var(--logo-light); }
.brand .logo-dark  { display: var(--logo-dark); }
@media (min-width: 720px) { .site-header .brand img { height: 36px; } }

/* ── chrome buttons: the site's pills, scoped so they never restyle the
      portal's own .btn ─────────────────────────────────────────────────── */
.site-header .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 28px; margin: 0;
  border-radius: var(--pill); border: 2px solid transparent;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font); font-size: 1rem; font-weight: 700; line-height: 1; letter-spacing: normal;
  text-decoration: none; white-space: nowrap; box-shadow: none;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.site-header .btn:hover { background: var(--accent-hover); border-color: transparent; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.site-header .btn:active { transform: translateY(0); box-shadow: none; }
.site-header .btn:focus-visible { border-radius: var(--pill); }
.site-header .btn.sm { min-height: 40px; padding: 0 20px; font-size: .9375rem; }
.site-header .btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.site-header .btn-outline:hover { background: var(--tint); color: var(--ink); border-color: var(--ink); }

/* ── header: a white bar, the logo, pill links ───────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg); color: var(--text);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.site-header.is-scrolled, body.menu-open .site-header { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.header-row { position: relative; display: flex; align-items: center; gap: 16px; min-height: var(--header-h); }
.site-nav { display: none; }
.site-nav > ul { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 4px; }
.site-nav > ul > li > a, .site-header .signin, .nav-menu > summary {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--pill);
  font-size: 1rem; font-weight: 400; color: var(--ink); text-decoration: none;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.site-nav > ul > li > a:hover, .site-header .signin:hover, .nav-menu > summary:hover { background: var(--tint); }
.site-nav > ul > li > a[aria-current="page"] { background: var(--tint); font-weight: 700; }
.header-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.header-tools .signin, .header-tools > .theme-switch { display: none; }
.header-tools > .btn { display: none; }
@media (min-width: 480px) { .header-tools > .btn { display: inline-flex; } }
.menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border-radius: var(--pill);
  background: transparent; border: 1px solid var(--line); color: var(--ink);
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.menu-btn:hover { background: var(--tint); border-color: var(--field-line); }
.menu-btn .when-open { display: none; }
.menu-btn[aria-expanded="true"] .when-open { display: inline-block; }
.menu-btn[aria-expanded="true"] .when-closed { display: none; }

/* ── the Platform menu: a native disclosure, so it opens by click, Enter or
      Space with scripting off; chrome.js adds Escape and click-away ───── */
.nav-menu > summary { list-style: none; cursor: pointer; gap: 8px; user-select: none; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .18s var(--ease), margin .18s var(--ease);
}
.nav-menu[open] > summary { background: var(--tint); }
.nav-menu[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
/* the section you are in: any page the menu links to */
.nav-menu:has(a[aria-current="page"]) > summary { background: var(--tint); font-weight: 700; }
.nav-menu-panel {
  position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% - 4px); z-index: 45;
  display: grid; gap: 32px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  padding: 32px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  max-height: calc(100vh - var(--header-h) - 24px); overflow-y: auto; overscroll-behavior: contain;
}
/* the "Who it's for" menu: three columns of equal width (teams, use cases, sectors) */
.nav-menu-panel.nav-menu-even { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nav-menu-head {
  margin: 0 0 12px; font-size: var(--t-small); line-height: 1.3; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--accent);
}
.nav-menu-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.nav-menu-wide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.nav-menu-col a {
  display: grid; gap: 2px; padding: 10px 12px; margin-inline: -12px; border-radius: var(--r-md);
  color: var(--ink); text-decoration: none; transition: background-color .18s var(--ease);
}
.nav-menu-col a:hover { background: var(--tint); }
.nav-menu-col a b { font-weight: 700; font-size: 1rem; }
.nav-menu-col a span { font-size: var(--t-small); color: var(--ink-2); }
.nav-menu-col a[aria-current="page"] { background: var(--tint); }

/* theme switch: three real radio buttons in one pill */
.theme-switch {
  display: inline-flex; border: 1px solid var(--line); border-radius: var(--pill);
  padding: 3px; margin: 0; gap: 2px; background: var(--surface); min-inline-size: 0;
}
.theme-switch legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; }
.theme-switch label {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--pill); color: var(--ink-2); cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.theme-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.theme-switch label:hover { color: var(--ink); background: var(--tint); }
/* the chosen state is a 1.5px ring in --field-line: 3.83:1 (light) and 4.25:1
   (dark) against the switch, so the selection clears the 3:1 a state needs */
.theme-switch label:has(input:checked) { background: var(--tint); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--field-line); }
.theme-switch label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 1px; }
.theme-switch .icon { font-size: 20px; }

/* the phone menu: a sheet under the header, finished on its own terms */
.mobile-panel {
  position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 39;
  background: var(--bg); overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 0 32px; border-top: 1px solid var(--line);
}
.mobile-panel[hidden] { display: none; }
.mobile-panel ul { list-style: none; padding: 0; margin: 0; }
.mobile-panel nav > ul > li { border-bottom: 1px solid var(--line); padding-block: 4px; }
.mobile-panel nav > ul > li > a, .m-menu > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 0 8px; margin-inline: -8px; border-radius: var(--r-md);
  font-size: 1.25rem; font-weight: 700; color: var(--ink); text-decoration: none;
  transition: background-color .18s var(--ease);
}
.mobile-panel nav > ul > li > a .icon, .m-menu > summary .icon { color: var(--ink-2); font-size: 20px; transition: transform .18s var(--ease); }
.mobile-panel nav > ul > li > a:hover, .m-menu > summary:hover { background: var(--tint); }
.mobile-panel nav > ul > li > a:hover .icon { transform: translateX(2px); color: var(--ink); }
.mobile-panel a[aria-current="page"] { color: var(--accent); }
.m-menu > summary { list-style: none; cursor: pointer; }
.m-menu > summary::-webkit-details-marker { display: none; }
.m-menu[open] > summary .icon { transform: rotate(90deg); }
.m-menu-body { padding: 0 0 16px; }
.m-menu-head {
  margin: 16px 0 4px; font-size: var(--t-small); line-height: 1.3; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--accent);
}
.m-menu-body a {
  display: flex; align-items: center; min-height: 44px; padding: 0 8px; margin-inline: -8px;
  border-radius: var(--r-md); font-size: 1.0625rem; color: var(--ink); text-decoration: none;
}
.m-menu-body a:hover { background: var(--tint); }
.mobile-panel .panel-theme { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line); }
.mobile-panel .panel-actions { display: grid; gap: 12px; margin-top: 24px; }
.mobile-panel .panel-actions .btn { width: 100%; min-height: 52px; }

@media (min-width: 1200px) {
  .site-nav { display: block; margin-left: 24px; }
  .menu-btn, .mobile-panel { display: none !important; }
  .header-tools .signin, .header-tools > .theme-switch { display: inline-flex; }
  .header-tools { gap: 12px; }
}
@media (max-width: 1199px) { .nav-menu-panel { display: none; } }

/* ── footer: the site map ─────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--line); padding-block: 64px 40px; background: var(--bg); color: var(--text); }
.footer-grid { display: grid; gap: 40px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-brand { grid-column: 1 / -1; }
.footer-brand .brand img { height: 32px; }
.footer-grid p { color: var(--ink-2); font-size: var(--t-small); max-width: 26rem; margin: 16px 0 0; }
.footer-grid h2 {
  margin: 0 0 16px; font-family: var(--font); font-size: var(--t-small); line-height: 1.3; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--accent);
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.footer-grid ul a { display: inline-flex; min-height: 32px; align-items: center; color: var(--text); text-decoration: none; font-size: .9375rem; }
.footer-grid ul a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .22em; }
.footer-grid ul a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.footer-base { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--ink-2); line-height: 1.6; }
.footer-base a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .22em; }
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .footer-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); }
  .footer-brand { grid-column: auto; }
}

/* ── motion preference ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .site-header *, .site-footer * { transition-duration: .001ms !important; }
  .site-header .btn:hover { transform: none; }
}