/* =====================================================================
   Sonder master site: shared foundation
   Owned by the foundation. Page builders consume, never edit.
   Light porcelain theme (Concept A) + live palette and liquid glass
   + Concept D depth. Docs: _brief/foundation.md · Kit: _kit.html
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. Registered properties (let the pointer glow fade, not snap)
--------------------------------------------------------------------- */
@property --glow-c { syntax: '<color>'; inherits: false; initial-value: transparent; }

/* ---------------------------------------------------------------------
   1. Tokens
--------------------------------------------------------------------- */
:root {
  /* brand */
  --amber: #E8934A;
  --amber-hover: #F0A150;
  --amber-ink: #995522;          /* amber TEXT on light, AA */
  --amber-ink-hover: #824416;
  --amber-soft: #F9EFE2;         /* amber-tinted fill behind amber-ink text */
  --amber-line: #E2C3A0;
  --on-amber: #26190E;           /* labels on amber fills, never white */
  --porcelain: #F8F7F4;
  --paper: #FFFFFF;
  --charcoal: #222522;
  --forest: #203C35;
  --champagne: #E5DCCB;
  --stone: #72776E;
  --cs: #2D503B;                 /* connection greens: strong / mid / light */
  --cm: #506A49;
  --cl: #75866C;

  /* neutrals */
  --band: #F2F1EC;               /* warm stone band */
  --band-2: #ECEAE3;
  --line: #DDDFD6;
  --line-soft: #EBECE5;
  --line2: #C1C7B9;
  --muted: #586251;
  --body: #4D5748;
  --ink: var(--charcoal);
  --bg: var(--porcelain);
  --panel: var(--paper);
  --panel-2: #FBFAF7;

  /* status (muted, earthy) */
  --ok: #35654E;   --ok-bg: #EEF4EF;   --ok-line: #CCDCCE;
  --warn: #856018; --warn-bg: #F8F1DF; --warn-line: #E7D7AD;
  --bad: #AC4C3D;  --bad-bg: #FAEDE9;  --bad-line: #EBCAC2;

  /* routing lines */
  --ln-rail: var(--amber);
  --ln-forest: #203C35;
  --ln-sage: #506A49;
  --ln-sage2: #75866C;
  --ln-champ: #C6AD86;
  --ln-stone: #72776E;
  --ln-ink: #995522;

  /* liquid glass */
  --glass-top: rgba(255, 255, 255, .80);
  --glass-bot: rgba(255, 255, 255, .54);
  --glass-edge: rgba(255, 255, 255, .86);
  --glass-ring: rgba(34, 37, 34, .065);
  --glass-blur: blur(16px) saturate(1.08);
  --glass-sheen: rgba(255, 255, 255, .55);
  --glow: #f0a15a33;
  --focus: var(--amber-ink);

  /* depth */
  --sh-1: 0 1px 2px #22252208, 0 3px 8px -4px #22252214;
  --sh-2: 0 1px 2px #2225220a, 0 12px 32px -14px #2225222e;
  --sh-3: 0 1px 2px #2225220d, 0 30px 80px -30px #22252240, 0 12px 28px -18px #2225221f;
  --sh-glass: 0 0 0 1px var(--glass-ring), inset 0 1px 0 #ffffffd9, inset 0 -1px 0 #22252208,
              0 1px 2px #2225220a, 0 14px 30px -16px #22252229, 0 44px 80px -44px #7a4a1a33;

  /* type */
  --display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  /* fluid scale, tuned 320 → 1440, then stepped up at 1920 / 2400 */
  --fs-hero-max: 6.5rem;
  /* "Your recruiting desk" is 8.75em wide in Space Grotesk 600 at -0.05em:
     this size keeps it on one line inside the container at every width. */
  --fs-hero: clamp(1.75rem, calc((100vw - 2 * var(--gutter)) * .955 / 8.75), var(--fs-hero-max));
  --fs-display: clamp(2.5rem, 1.55rem + 4.6vw, 5rem);
  --fs-h2: clamp(2rem, 1.35rem + 3.2vw, 3.75rem);
  --fs-h3: clamp(1.375rem, 1.18rem + .95vw, 1.875rem);
  --fs-h4: clamp(1.125rem, 1.06rem + .32vw, 1.3125rem);
  --fs-tagline: clamp(1.375rem, 1.08rem + 1.45vw, 2.25rem);
  --fs-lead: clamp(1.0625rem, 1rem + .32vw, 1.25rem);
  --fs-body: clamp(1rem, .975rem + .12vw, 1.0625rem);
  --fs-small: .9375rem;
  --fs-caption: .8125rem;
  --fs-micro: .75rem;            /* the floor: nothing readable goes below 12px */

  /* space */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --section-y: clamp(4rem, 2.6rem + 6.2vw, 8.5rem);
  --head-gap: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  --gutter: 16px;
  --container: 1200px;
  --container-wide: 1280px;
  --container-narrow: 880px;
  --container-prose: 720px;

  /* shape */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px;

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 160ms;
  --dur-hover: 180ms;

  /* nav geometry */
  --nav-top: 10px;
  --nav-bar: 56px;
  --nav-h: calc(var(--nav-top) + var(--nav-bar) + 10px);

  color-scheme: light;
  interpolate-size: allow-keywords;
}
@media (min-width: 640px)  { :root { --gutter: 24px; --nav-top: 12px; --nav-bar: 60px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; --nav-bar: 64px; --nav-h: calc(var(--nav-top) + var(--nav-bar) + 12px); } }
@media (min-width: 1440px) { :root { --gutter: 40px; } }
@media (min-width: 1920px) {
  :root {
    --container: 1320px; --container-wide: 1440px; --container-narrow: 960px; --container-prose: 780px;
    --fs-hero-max: 8rem; --fs-display: 5.75rem; --fs-h2: 4.25rem; --fs-h3: 2.0625rem; --fs-h4: 1.375rem;
    --fs-tagline: 2.5rem; --fs-lead: 1.3125rem; --fs-body: 1.0938rem; --fs-small: 1rem;
    --section-y: 9.5rem; --head-gap: 5rem;
  }
}
@media (min-width: 2400px) {
  :root {
    --container: 1520px; --container-wide: 1680px; --container-narrow: 1080px; --container-prose: 860px;
    --fs-hero-max: 9.75rem; --fs-display: 6.75rem; --fs-h2: 5rem; --fs-h3: 2.375rem; --fs-h4: 1.5rem;
    --fs-tagline: 2.875rem; --fs-lead: 1.4375rem; --fs-body: 1.1875rem; --fs-small: 1.0625rem; --fs-caption: .9375rem;
    --section-y: 11rem;
  }
}

/* ---------------------------------------------------------------------
   2. Reset + base
--------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font: 400 var(--fs-body)/1.6 var(--sans); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg, video, canvas, picture { display: block; max-width: 100%; }
img { height: auto; }
svg { overflow: visible; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--display); font-weight: 600; color: var(--ink); text-wrap: balance; }
h1 { letter-spacing: -.05em; line-height: 1.02; }
h2 { font-size: var(--fs-h2); letter-spacing: -.045em; line-height: 1.05; }
h3 { font-size: var(--fs-h3); letter-spacing: -.032em; line-height: 1.15; }
h4 { font-size: var(--fs-h4); letter-spacing: -.02em; line-height: 1.3; }
p { text-wrap: pretty; }
strong, b { font-weight: 600; }
table { border-collapse: collapse; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
::selection { background: var(--amber); color: var(--on-amber); }
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
:where(a, button, summary, label, input, [role="button"]) { -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: fixed; left: 16px; top: -80px; z-index: 300; padding: 12px 18px; border-radius: var(--r-sm);
  background: var(--charcoal); color: #fff; font-weight: 600; box-shadow: var(--sh-2); transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------------------
   3. Type utilities (decoupled from heading level)
--------------------------------------------------------------------- */
.t-hero { font-family: var(--display); font-weight: 600; font-size: var(--fs-hero); line-height: 1.0; letter-spacing: -.05em; color: var(--ink); text-wrap: initial; }
.t-hero .line { display: block; white-space: nowrap; }
.t-display { font-family: var(--display); font-weight: 600; font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.05em; }
.t-h2 { font-family: var(--display); font-weight: 600; font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.045em; }
.t-h3 { font-family: var(--display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.032em; }
.t-h4 { font-family: var(--display); font-weight: 600; font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -.02em; }
.t-lead, .lead { font-size: var(--fs-lead); line-height: 1.62; color: var(--body); text-wrap: pretty; }
.t-body { font-size: var(--fs-body); line-height: 1.65; color: var(--body); }
.t-small { font-size: var(--fs-small); line-height: 1.6; color: var(--body); }
.t-caption { font-size: var(--fs-caption); line-height: 1.55; color: var(--muted); }
.t-micro { font-size: var(--fs-micro); line-height: 1.5; color: var(--muted); }
.t-mono, code, .code { font-family: var(--mono); font-size: max(.75rem, .875em); font-weight: 500; }
.t-num { font-variant-numeric: tabular-nums; }
.t-muted { color: var(--muted); }
.t-body-c { color: var(--body); }
.t-ink { color: var(--ink); }
.t-amber { color: var(--amber-ink); }
.t-forest { color: var(--forest); }
.t-ok { color: var(--ok); }

/* Editorial serif: hero tagline, "sonder, n.", at most 1–2 pull quotes per page */
.tagline { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: var(--fs-tagline); line-height: 1.2; letter-spacing: -.01em; color: var(--forest); }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.pullquote { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.625rem, 1.2rem + 2vw, 2.75rem); line-height: 1.18; letter-spacing: -.012em; color: var(--forest); text-wrap: balance; }

/* Section label: sentence case, amber ink, a quiet dot. No wide-tracked caps. */
.eyebrow { display: inline-flex; align-items: center; gap: .6em; font: 600 .875rem/1.4 var(--sans); color: var(--amber-ink); letter-spacing: 0; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px #e8934a2e; flex: none; }
.eyebrow--plain::before { display: none; }
/* Optional serif-italic kicker above a centred h2. Counts toward the serif budget. */
.kicker-serif { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem); line-height: 1.2; color: var(--forest); }

/* ---------------------------------------------------------------------
   4. Layout primitives
--------------------------------------------------------------------- */
.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.container--wide { width: min(var(--container-wide), 100% - 2 * var(--gutter)); }
.container--narrow { width: min(var(--container-narrow), 100% - 2 * var(--gutter)); }
.container--prose { width: min(var(--container-prose), 100% - 2 * var(--gutter)); }
.container--bleed { width: min(1440px, 100%); margin-inline: auto; }

.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .66); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--hairline { border-top: 1px solid var(--line); }

/* Band tones: porcelain (page) / stone (alternate) / paper / forest (ONE dark showcase per page) */
.band--porcelain { background: var(--porcelain); }
.band--stone { background: var(--band); }
.band--paper { background: var(--paper); }
.band--fade { background: linear-gradient(180deg, var(--porcelain), var(--band) 18%, var(--band) 82%, var(--porcelain)); }

/* Centred section header: [eyebrow or kicker] + h2 + lead */
.section-head { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 48rem; margin: 0 auto var(--head-gap); }
.section-head > * + * { margin-top: var(--s-4); }
.section-head > .eyebrow + *, .section-head > .kicker-serif + * { margin-top: var(--s-4); }
.section-head > h2 + .lead, .section-head > .t-h2 + .lead { margin-top: clamp(1rem, .8rem + .8vw, 1.5rem); }
.section-head .lead { max-width: 40rem; }
.section-head--wide { max-width: 60rem; }
.section-head--flush { margin-bottom: 0; }
.section-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); }
/* phones: CTAs stack as equal-width pills, centred */
@media (max-width: 559px) { .section-actions { flex-direction: column; align-items: stretch; width: min(100%, 22rem); margin-inline: auto; } .section-actions .btn { width: 100%; } }

.stack { display: flex; flex-direction: column; gap: var(--stack, var(--s-4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--s-3)); }
.cluster--center { justify-content: center; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* Responsive grids: collapse in steps, always centred as a unit */
.grid { display: grid; gap: var(--grid-gap, clamp(1rem, .6rem + 1.5vw, 1.5rem)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 260px), 100%), 1fr)); }
@media (max-width: 1023px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 720px) and (max-width: 1023px) { .grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: min(100%, calc(50% - var(--grid-gap, 1.25rem) / 2)); } }

/* Split: two columns only where it reads better; centred as a unit */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 5vw, 5rem); align-items: center; max-width: var(--split-max, 1120px); margin-inline: auto; }
.split--wide-l { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.split--wide-r { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.split--top { align-items: start; }
@media (max-width: 899px) {
  .split, .split--wide-l, .split--wide-r { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
  .split .media-first { order: -1; }
}

/* Pull a hero up under the floating nav so its background runs edge to edge */
.under-nav { margin-top: calc(-1 * var(--nav-h)); padding-top: calc(var(--nav-h) + var(--under-nav-pad, clamp(3rem, 2rem + 4vw, 6rem))); }

/* ---------------------------------------------------------------------
   5. Icons + wordmark + logo
--------------------------------------------------------------------- */
.ic { width: 1.125em; height: 1.125em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic--sm { width: 1em; height: 1em; }
.ic--lg { width: 1.375em; height: 1.375em; }

.wordmark { display: inline-flex; align-items: baseline; font: 700 var(--wm-size, 1.375rem)/1 var(--display); letter-spacing: -.035em; color: var(--charcoal); white-space: nowrap; }
.wordmark__o { width: 1.125em; height: 1.125em; margin: 0 -.08em; flex: none; align-self: center; transform: translateY(.05em); }
.wordmark__product { font-weight: 500; margin-left: .34em; color: color-mix(in srgb, currentColor 78%, transparent); }
.logo-mark { width: var(--mark, 48px); height: var(--mark, 48px); color: var(--charcoal); flex: none; }

/* ---------------------------------------------------------------------
   6. Buttons (live liquid-glass recipe, light theme: pills)
--------------------------------------------------------------------- */
.btn {
  --btn-h: 48px; --btn-px: 22px; --btn-fs: .9375rem;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: var(--btn-h); padding: 0 var(--btn-px); border-radius: var(--r-pill);
  font: 600 var(--btn-fs)/1.2 var(--sans); letter-spacing: -.01em; white-space: nowrap;
  text-decoration: none; cursor: pointer; user-select: none; -webkit-user-select: none;
  border: 1px solid transparent;
  transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-hover) ease,
              background-color var(--dur-hover) ease, border-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
.btn .ic { width: 1.1em; height: 1.1em; transition: transform .2s var(--ease-out); }
.btn--primary {
  color: var(--on-amber);
  background: linear-gradient(175deg, color-mix(in srgb, var(--amber) 82%, white), var(--amber) 52%, color-mix(in srgb, var(--amber) 95%, #995522));
  border-color: color-mix(in srgb, var(--amber) 60%, white);
  box-shadow: inset 0 2px 2px #ffffff60, inset 1px 0 1px #ffffff38, inset -1px 0 1px #ffffff26, inset 0 -2px 3px #99552226,
              0 0 0 .75px #9955222b, 0 3px 6px #99552214, 0 10px 22px -13px #99552266;
}
.btn--soft {
  color: var(--charcoal);
  background: linear-gradient(155deg, #ffffffde, #ffffff70 56%, #ffffffa6);
  border-color: #ffffffda;
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 2px 2px #fff, inset 1px 0 1px #ffffffcf, inset -1px 0 1px #ffffffa8, inset 0 -2px 3px #26292521,
              0 0 0 .75px #2629251c, 0 3px 6px #2629250d, 0 9px 18px -12px #26292555;
}
.btn--quiet { color: var(--charcoal); background: transparent; }
.btn--sm { --btn-h: 40px; --btn-px: 16px; --btn-fs: .875rem; }
.btn--lg { --btn-h: 56px; --btn-px: 28px; --btn-fs: 1.0313rem; }
.btn--block { width: 100%; }
.btn--icon { --btn-px: 0; width: var(--btn-h); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
  .btn:hover .ic--arrow { transform: translateX(2px); }
  .btn--primary:hover {
    background: linear-gradient(175deg, color-mix(in srgb, var(--amber-hover) 80%, white), var(--amber-hover) 52%, color-mix(in srgb, var(--amber-hover) 94%, #995522));
    box-shadow: inset 0 2px 3px #ffffff70, inset 1px 0 1px #ffffff40, inset -1px 0 1px #ffffff2c, inset 0 -2px 3px #99552226,
                0 0 0 .75px #99552233, 0 5px 9px #9955221a, 0 14px 26px -14px #99552277;
  }
  .btn--soft:hover {
    box-shadow: inset 0 2px 3px #ffffffb3, inset 1px 0 1px #ffffff80, inset -1px 0 1px #ffffff60, inset 0 -2px 3px #26292526,
                0 0 0 1px #26292520, 0 5px 9px #26292514, 0 14px 26px -16px #26292560;
  }
  .btn--quiet:hover { background: #2225220d; }
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn--soft:active:not(:disabled) { box-shadow: inset 0 2px 5px #26292533, inset 0 -1px 1px #ffffffb3, 0 0 0 .75px #26292526, 0 2px 4px #26292512; }
@media (pointer: coarse) { .btn--sm { --btn-h: 44px; } }

/* Text link with arrow */
.link { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; font-weight: 600; color: var(--amber-ink); text-decoration: none; border-radius: 6px; }
.link .ic { width: 1em; height: 1em; transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link:hover { color: var(--amber-ink-hover); text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 1px; }
  .link:hover .ic { transform: translateX(3px); }
}
.link--ink { color: var(--ink); }
.inline-link { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--amber-ink) 55%, transparent); text-underline-offset: .22em; text-decoration-thickness: 1px; }
.inline-link:hover { color: var(--amber-ink); }

/* ---------------------------------------------------------------------
   7. Liquid glass surfaces
   Material lives on ::before so a glass element is never the backdrop
   root for glass nested inside it. ::after is the specular rim.
   Pointer glow: site.js writes --gx/--gy; ::before fades --glow-c in.
--------------------------------------------------------------------- */
.glass {
  position: relative; isolation: isolate;
  border-radius: var(--glass-r, var(--r-xl));
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow, var(--sh-glass));
}
.glass::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(420px circle at var(--gx, 50%) var(--gy, -20%), var(--glow-c), transparent 62%),
    radial-gradient(140% 90% at 0% 0%, var(--glass-sheen), transparent 46%),
    linear-gradient(165deg, var(--glass-top), var(--glass-bot));
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transition: --glow-c .3s ease;
}
.glass::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(150deg, #fff, #ffffff00 28%, #ffffff00 68%, #ffffffbf);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@media (hover: hover) and (pointer: fine) {
  .glass:hover::before, .glass.is-glowing::before { --glow-c: var(--glow); }
}
.glass--card { --glass-r: var(--r-lg); padding: var(--card-pad, clamp(1.25rem, 1rem + 1vw, 1.75rem)); }
.glass--panel { --glass-r: clamp(22px, 1.4rem + .6vw, 30px); padding: var(--panel-pad, clamp(1.25rem, .8rem + 2vw, 2.5rem)); }
.glass--tile { --glass-r: 18px; --glass-blur: blur(14px) saturate(1.2); --glass-shadow: 0 0 0 1px var(--glass-ring), inset 0 1px 0 #ffffffe6, 0 1px 2px #2225220d, 0 12px 26px -14px #2225223d; }
.glass--chip { --glass-r: 18px; --glass-blur: blur(12px) saturate(1.2); --glass-shadow: 0 0 0 1px var(--glass-ring), inset 0 1px 0 #fff, 0 1px 2px #2225220a, 0 6px 16px -10px #22252233; }
.glass--pill { --glass-r: var(--r-pill); }
.glass--deep { --glass-shadow: 0 0 0 1px rgba(34,37,34,.06), inset 0 1px 0 #ffffffd9, inset 0 -1px 0 #22252208, 0 1px 2px #2225220f, 0 26px 54px -22px rgba(60,38,16,.26), 0 70px 120px -50px rgba(122,74,26,.30); }
/* Same look, no backdrop sampling: use for long lists / many cards on screen at once */
.glass--faux::before {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background:
    radial-gradient(420px circle at var(--gx, 50%) var(--gy, -20%), var(--glow-c), transparent 62%),
    radial-gradient(140% 90% at 0% 0%, rgba(255,255,255,.6), transparent 46%),
    linear-gradient(165deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
}
/* Inset well inside glass (D) */
.well { background: rgba(255, 255, 255, .62); border: 1px solid rgba(34, 37, 34, .07); border-radius: var(--r-md); box-shadow: inset 0 1px 0 #fff; }
/* Solid content card: hairline, paper. For dense info (pricing, clauses) */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--card-pad, clamp(1.25rem, 1rem + 1vw, 2rem)); box-shadow: var(--card-shadow, var(--sh-1)); }
.card--stone { background: var(--band); border-color: #E6E7DF; box-shadow: none; }
.card--flat { box-shadow: none; }

/* ---------------------------------------------------------------------
   8. Floating glass NAV (live pill) + mobile sheet
--------------------------------------------------------------------- */
.site-nav {
  position: sticky; top: 0; z-index: 100; height: var(--nav-h);
  padding: var(--nav-top) var(--gutter) 0; pointer-events: none;
}
/* Scroll edge effect: the page dissolves into its own colour above the pill, only once scrolled */
.site-nav::before {
  content: ""; position: absolute; inset: 0 0 auto; height: calc(100% + 10px); z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, #F8F7F4f2 30%, #F8F7F4b3 62%, #F8F7F400);
  opacity: 0; transition: opacity .18s var(--ease-out);
}
.site-nav[data-scrolled]::before { opacity: 1; }
.site-nav__bar {
  pointer-events: auto; position: relative; isolation: isolate;
  max-width: var(--container-wide); height: var(--nav-bar); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 8px 0 16px; border-radius: 20px; border: 1px solid #ffffffeb;
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px #2629251a, 0 4px 12px #26292508, 0 16px 36px -24px #26292542, 0 0 0 1px #2629250d;
  transition: transform .18s var(--ease-out), opacity .18s var(--ease-out);
}
.site-nav__bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(145deg, #ffffffd1, #ffffff7a);
  -webkit-backdrop-filter: blur(24px) saturate(1.25); backdrop-filter: blur(24px) saturate(1.25);
}
.site-nav[data-scrolled] .site-nav__bar { box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px #2629251a, 0 6px 16px #2629250d, 0 22px 44px -26px #2629255c, 0 0 0 1px #26292512; }
.site-nav[data-scrolled] .site-nav__bar::before { background: linear-gradient(145deg, #ffffffe6, #ffffffa6); }
.site-nav .wordmark { --wm-size: 1.1875rem; flex: none; align-items: center; padding: 6px 2px; border-radius: 10px; }
.site-nav__links { display: none; }
.site-nav__links a {
  position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 12px;
  font: 500 .90625rem/1 var(--sans); color: var(--body); white-space: nowrap;
  transition: color var(--dur-hover) ease, background-color var(--dur-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .site-nav__links a:hover { color: var(--charcoal); background: #ffffffbf; } }
/* The page you are on: full ink + the amber dot. Never heavier weight (it would reflow the row). */
.site-nav__links a[aria-current="page"], .site-nav__links a.is-active { color: var(--charcoal); }
.site-nav__links a[aria-current="page"]::after, .site-nav__links a.is-active::after {
  content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--amber);
}
.site-nav__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.site-nav__signin { display: none; }
.site-nav__cta { --btn-h: 40px; --btn-px: 14px; --btn-fs: .875rem; }
.site-nav__cta .ic--arrow { display: none; }
.site-nav__cta-short { display: none; }
.site-nav__menu {
  position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none;
  color: var(--charcoal); border: 1px solid #ffffffeb;
  background: linear-gradient(155deg, #ffffffde, #ffffff80);
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px #2629251a, 0 0 0 .75px #26292515, 0 3px 8px -4px #26292533;
  transition: transform var(--dur-press) var(--ease-out);
}
.site-nav__menu:active { transform: scale(.94); }
.site-nav__menu-lines { position: relative; width: 18px; height: 12px; }
.site-nav__menu-lines i { position: absolute; left: 0; width: 100%; height: 1.75px; border-radius: 2px; background: currentColor; transition: transform .18s var(--ease-out); }
.site-nav__menu-lines i:first-child { top: 1px; }
.site-nav__menu-lines i:last-child { top: 9px; }
.site-nav[data-open] .site-nav__menu-lines i:first-child { transform: translateY(4px) rotate(45deg); }
.site-nav[data-open] .site-nav__menu-lines i:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Scrim: dim to focus while the sheet is open */
.site-nav__scrim { position: fixed; inset: 0; z-index: -2; pointer-events: auto; background: rgba(28, 33, 29, .22); opacity: 0; transition: opacity .22s ease; }
.site-nav[data-open] .site-nav__scrim { opacity: 1; }

/* Mobile/tablet sheet: glass, big touch targets, scales in from the menu button */
.site-sheet {
  pointer-events: auto; position: absolute; z-index: 1;
  top: calc(var(--nav-top) + var(--nav-bar) + 8px); right: var(--gutter);
  width: min(400px, calc(100% - 2 * var(--gutter)));
  max-height: calc(100dvh - var(--nav-top) - var(--nav-bar) - 24px); overflow-y: auto; overscroll-behavior: contain;
  padding: 8px; border-radius: 24px; border: 1px solid #fff; isolation: isolate; background: var(--paper);
  box-shadow: inset 0 1px 1px #fff, 0 0 0 1px #26292512, 0 10px 30px -12px #2629252e, 0 40px 80px -40px #26292566;
  transform-origin: top right; opacity: 0; transform: translateY(-6px) scale(.97);
  transition: opacity .18s var(--ease-out), transform .22s var(--ease-out);
}
.site-sheet::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(160deg, #ffffffeb, #fffffff5 60%, #fbfaf7f2);
  -webkit-backdrop-filter: blur(28px) saturate(1.3); backdrop-filter: blur(28px) saturate(1.3);
}
.site-nav[data-open] .site-sheet { opacity: 1; transform: none; }
.site-sheet__links a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 54px; padding: 0 14px 0 16px; border-radius: 14px;
  font: 500 1.0625rem/1.2 var(--sans); color: var(--charcoal);
  transition: background-color var(--dur-hover) ease;
}
.site-sheet__links a .ic { width: 18px; height: 18px; color: var(--stone); }
.site-sheet__links a:active { background: #2225220d; }
@media (hover: hover) and (pointer: fine) { .site-sheet__links a:hover { background: #2225220a; } }
.site-sheet__links a[aria-current="page"] { background: var(--amber-soft); color: var(--amber-ink); }
.site-sheet__links a[aria-current="page"] .ic { color: var(--amber-ink); }
.site-sheet__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 8px; padding: 12px 8px 6px; border-top: 1px solid var(--line-soft); }
.site-sheet__note { margin: 4px 0 2px; text-align: center; font-size: var(--fs-caption); color: var(--muted); }
html.nav-locked { overflow: hidden; }

/* V3: leave the reading surface clear; navigation returns by intent. */
.site-nav[data-nav-hidden] .site-nav__bar { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.site-nav[data-nav-hidden]::before { opacity: 0; }
.site-nav[data-nav-instant] .site-nav__bar, .site-nav[data-nav-instant]::before,
.site-nav[data-nav-instant] .site-sheet, .site-nav[data-nav-instant] .site-nav__scrim,
.site-nav[data-nav-instant] .site-nav__menu-lines i, .site-nav[data-nav-instant] .site-nav__menu { transition: none; }
.nav-recall { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 99; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 15px; border: 1px solid var(--line2); border-radius: 999px; background: var(--paper); color: var(--ink); box-shadow: 0 4px 18px #22252218; font: 600 .8125rem/1 var(--sans); transition: transform .12s var(--ease-out); }
.nav-recall .ic { width: 17px; height: 17px; }
.nav-recall:active { transform: scale(.97); }
.nav-recall:focus-visible { transition: none; }
.nav-recall:focus-visible:active { transform: none; }
.nav-recall[hidden] { display: none; }
html:not(.js) .site-nav { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .site-nav .site-nav__bar, .site-nav::before, .site-nav .site-sheet, .site-nav .site-nav__scrim, .site-nav .site-nav__menu-lines i, .nav-recall { transition: none !important; }
  .site-nav[data-nav-hidden] .site-nav__bar, .nav-recall:active { transform: none; }
}
@media (forced-colors: active) { .nav-recall { background: ButtonFace; border: 1px solid ButtonText; color: ButtonText; } }
@media print { .nav-recall { display: none !important; } }

/* tablet: Sign in joins the bar */
@media (min-width: 640px) {
  .site-nav__signin { display: inline-flex; --btn-h: 40px; --btn-px: 16px; --btn-fs: .875rem; }
  .site-nav__cta { --btn-px: 16px; }
  .site-nav__cta .ic--arrow { display: inline-block; }
  .site-nav .wordmark { --wm-size: 1.3125rem; }
  .site-nav__bar { padding: 0 10px 0 20px; border-radius: 22px; }
}
/* desktop: links centred in the pill, menu button retires */
@media (min-width: 1140px) {
  .site-nav__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding: 0 10px 0 22px; border-radius: 24px; }
  .site-nav .wordmark { justify-self: start; --wm-size: 1.4375rem; }
  .site-nav__links { display: flex; align-items: center; gap: 2px; }
  .site-nav__actions { justify-self: end; }
  .site-nav__menu, .site-nav__scrim, .site-sheet { display: none !important; }
}
@media (min-width: 1140px) and (max-width: 1279px) { .site-nav__links a { padding: 0 11px; } }
@media (min-width: 1920px) {
  :root { --nav-bar: 68px; }
  .site-nav__links a { font-size: 1rem; padding: 0 16px; }
  .site-nav .wordmark { --wm-size: 1.5625rem; }
  .site-nav__signin, .site-nav__cta { --btn-h: 44px; --btn-fs: .9375rem; --btn-px: 18px; }
}
@media (min-width: 2400px) {
  :root { --nav-bar: 76px; }
  .site-nav__links a { font-size: 1.125rem; padding: 0 18px; height: 46px; }
  .site-nav .wordmark { --wm-size: 1.75rem; }
  .site-nav__signin, .site-nav__cta { --btn-h: 50px; --btn-fs: 1.0625rem; --btn-px: 22px; }
}
/* small phones: the CTA label shortens before anything else gives */
@media (max-width: 379px) {
  .site-nav__bar { padding: 0 6px 0 12px; gap: 6px; }
  .site-nav .wordmark { --wm-size: 1.0625rem; }
  .site-nav__cta { --btn-px: 12px; }
  .site-nav__cta-long { display: none; }
  .site-nav__cta-short { display: inline; }
  .site-nav__menu { width: 42px; height: 42px; }
  .site-sheet__actions .btn { --btn-px: 12px; --btn-fs: .875rem; min-width: 0; gap: 6px; }
}

/* ---------------------------------------------------------------------
   9. Footer
--------------------------------------------------------------------- */
.site-footer { position: relative; border-top: 1px solid var(--line); padding: clamp(3.5rem, 2.5rem + 3vw, 5rem) 0 clamp(1.75rem, 1.4rem + 1vw, 2.5rem); background: var(--bg); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.site-footer__brand .wordmark { --wm-size: 1.5rem; }
.site-footer__brand p { margin-top: 16px; max-width: 22rem; font-size: var(--fs-small); color: var(--body); line-height: 1.6; }
.site-footer__brand .site-footer__made { margin-top: 10px; font-size: .875rem; color: var(--muted); }
.site-footer__contact { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 14px; }
.site-footer__contact a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: .875rem; font-weight: 500; color: var(--amber-ink); }
.site-footer__contact a .ic { width: 15px; height: 15px; }
.site-footer__heading { margin: 0 0 14px; font: 600 .875rem/1.3 var(--sans); color: var(--ink); }
.site-footer__col li + li { margin-top: 4px; }
.site-footer__col a { display: inline-flex; align-items: center; min-height: 34px; font-size: .9375rem; color: var(--body); transition: color var(--dur-hover) ease; }
.site-footer__col a:hover { color: var(--amber-ink); }
.site-footer__col a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding-top: 22px; border-top: 1px solid var(--line); font-size: .875rem; color: var(--muted); }
.site-footer__top { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--body); font-weight: 500; }
.site-footer__top:hover { color: var(--amber-ink); }
@media (max-width: 1023px) {
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 28px; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 559px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ---------------------------------------------------------------------
   10. Chips, badges, status, kbd
--------------------------------------------------------------------- */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 11px; border-radius: var(--r-xs); border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font: 500 .8125rem/1.3 var(--sans); white-space: nowrap; }
.chip--must { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); background: color-mix(in srgb, var(--amber) 9%, var(--panel)); }
.chip--must::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.chip--nice { color: var(--body); }
.chip--pill { border-radius: var(--r-pill); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.status { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 2px 10px; border-radius: var(--r-pill); font: 600 .75rem/1.3 var(--sans); white-space: nowrap; color: var(--muted); background: #F0EFEA; }
.status .ic { width: 13px; height: 13px; }
.status--ok { color: var(--ok); background: var(--ok-bg); }
.status--warn { color: var(--warn); background: var(--warn-bg); }
.status--bad { color: var(--bad); background: var(--bad-bg); }
.status--amber { color: var(--amber-ink); background: var(--amber-soft); }
.status--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.badge { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border-radius: var(--r-pill); font: 600 .75rem/1.3 var(--sans); color: var(--amber-ink); background: var(--amber-soft); white-space: nowrap; }
.badge--solid { color: var(--on-amber); background: linear-gradient(165deg, color-mix(in srgb, var(--amber) 96%, white), color-mix(in srgb, var(--amber) 96%, #995522)); }
.badge--forest { color: var(--paper); background: var(--forest); }

/* "New · Sonder Jobs" announcement chip */
.tag-chip { display: inline-flex; align-items: center; gap: 9px; min-height: 34px; padding: 4px 14px 4px 5px; font: 500 .875rem/1.2 var(--sans); color: var(--body); }
.tag-chip.glass { --glass-r: var(--r-pill); --glass-shadow: 0 0 0 1px var(--glass-ring), inset 0 1px 0 #fff, 0 4px 14px -8px #2225222e; }
.tag-chip > .badge { min-height: 24px; padding: 3px 9px; }

kbd, .kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px;
  font: 500 .75rem/1 var(--mono); color: var(--body); vertical-align: .1em;
  background: rgba(255, 255, 255, .85); border: 1px solid rgba(34, 37, 34, .13); border-bottom-width: 2px; border-radius: 6px;
}
.meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-caption); color: var(--muted); }
.meta > * + *::before { content: "·"; margin-right: 10px; color: var(--line2); }

/* Sample-data caption under any real screenshot or rebuilt UI */
.sample-note { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; margin-top: 14px; font-size: var(--fs-caption); line-height: 1.5; color: var(--muted); text-align: center; }
.sample-note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); flex: none; }
.sample-note--start { justify-content: flex-start; text-align: left; }

/* ---------------------------------------------------------------------
   11. Check lists, facts grid, numbered list
--------------------------------------------------------------------- */
.checks { display: grid; gap: var(--checks-gap, 14px); }
.checks > li { position: relative; padding-left: 36px; font-size: var(--checks-fs, 1.0313rem); line-height: 1.55; color: var(--body); text-align: left; }
.checks > li::before {
  content: ""; position: absolute; left: 0; top: .12em; width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in srgb, var(--ln-sage) 13%, var(--panel)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335654E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.6 3.6L17.5 8.5'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ln-sage) 28%, transparent);
}
.checks > li strong { color: var(--ink); }
.checks--sm { --checks-fs: .9375rem; --checks-gap: 10px; }
.checks--sm > li { padding-left: 32px; }
.checks--sm > li::before { width: 20px; height: 20px; background-size: 12px; top: .1em; }
.checks--amber > li::before { background-color: var(--amber-soft); box-shadow: inset 0 0 0 1px var(--amber-line); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23995522' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.6 3.6L17.5 8.5'/%3E%3C/svg%3E"); }
.crosses > li::before { background-color: var(--bad-bg); box-shadow: inset 0 0 0 1px var(--bad-line); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AC4C3D' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E"); }

/* Facts / stats with hairlines (A trust row, C founders row) */
.facts { --cols: 4; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); border-block: 1px solid var(--line); }
.facts > * { position: relative; padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem) clamp(1rem, .6rem + 1.4vw, 2rem); }
.facts > * + * { border-left: 1px solid var(--line); }
.facts--center > * { text-align: center; display: flex; flex-direction: column; align-items: center; }
.facts--3 { --cols: 3; } .facts--2 { --cols: 2; }
.fact__icon { width: 24px; height: 24px; flex: none; color: var(--amber-ink); margin-bottom: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fact__value { display: block; font: 600 clamp(1.5rem, 1.2rem + 1.7vw, 2.75rem)/1.02 var(--display); letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fact__label { display: block; margin-top: 10px; font-size: var(--fs-small); color: var(--muted); line-height: 1.5; }
.fact__role { display: block; font: 600 .875rem/1.4 var(--sans); color: var(--amber-ink); margin-bottom: 10px; }
.fact__title { font: 600 clamp(1.375rem, 1.2rem + .8vw, 1.75rem)/1.15 var(--display); letter-spacing: -.03em; color: var(--ink); }
.fact__text { margin-top: 12px; font-size: var(--fs-small); color: var(--body); line-height: 1.65; }
@media (max-width: 1023px) {
  .facts:not(.facts--2):not(.facts--3) { --cols: 2; }
  .facts:not(.facts--2):not(.facts--3) > :nth-child(odd) { border-left: 0; }
  .facts:not(.facts--2):not(.facts--3) > :nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 719px) {
  .facts.facts--3 { --cols: 1; }
  .facts.facts--3 > * + * { border-left: 0; border-top: 1px solid var(--line); }
}
/* stat grids keep two columns on phones; text-heavy fact rows go to one */
@media (max-width: 479px) {
  .facts:not(.facts--2):not(.facts--3):not(.facts--center) { --cols: 1; }
  .facts:not(.facts--2):not(.facts--3):not(.facts--center) > * + * { border-left: 0; border-top: 1px solid var(--line); }
  .facts--center > * { padding-inline: 10px; }
}
@media (max-width: 359px) {
  .facts--center:not(.facts--2) { --cols: 1; }
  .facts--center:not(.facts--2) > * + * { border-left: 0; border-top: 1px solid var(--line); }
}

/* Numbered steps (stage list) */
.steps { counter-reset: step; display: grid; gap: 0; }
.steps > li { counter-increment: step; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; padding: 18px 0; border-top: 1px solid var(--line); text-align: left; }
.steps > li::before { content: counter(step, decimal-leading-zero); grid-row: span 2; font: 600 .875rem/1.9 var(--display); color: var(--amber-ink); font-variant-numeric: tabular-nums; }
.steps > li > b, .steps > li > strong { font: 600 1.0625rem/1.4 var(--display); letter-spacing: -.015em; color: var(--ink); }
.steps > li > p { grid-column: 2; font-size: var(--fs-small); color: var(--body); line-height: 1.6; }

/* ---------------------------------------------------------------------
   12. FAQ accordion (native <details>, height animates where supported)
--------------------------------------------------------------------- */
.faq { max-width: var(--container-prose); margin-inline: auto; text-align: left; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 64px; padding: 18px 2px; font: 500 clamp(1.0625rem, 1rem + .3vw, 1.1875rem)/1.4 var(--display); letter-spacing: -.015em; color: var(--ink);
  border-radius: 8px; transition: color var(--dur-hover) ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #2225220a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F685A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: transform .28s var(--ease-out), background-color var(--dur-hover) ease;
}
.faq details[open] summary::after { transform: rotate(180deg); background-color: var(--amber-soft); }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--amber-ink); } }
.faq summary:focus-visible { outline-offset: 2px; }
.faq__a { padding: 0 48px 24px 2px; font-size: var(--fs-body); line-height: 1.7; color: var(--body); }
.faq__a p + p { margin-top: 10px; }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size .32s var(--ease-out), content-visibility .32s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq--glass { padding: 6px clamp(14px, 1rem + 1vw, 28px); }
.faq--glass details:first-child { border-top: 0; }
.faq--glass details:last-child { border-bottom: 0; }
@media (max-width: 559px) { .faq__a { padding-right: 4px; } }

/* ---------------------------------------------------------------------
   13. Browser frame for REAL screenshots
--------------------------------------------------------------------- */
.frame { position: relative; margin-block: 0; }
.frame__bezel {
  position: relative; isolation: isolate; padding: clamp(5px, .3rem + .2vw, 8px); border-radius: clamp(18px, 1rem + .6vw, 26px);
  border: 1px solid #ffffffed;
  box-shadow: inset 0 2px 2px #fff, inset 0 -2px 3px #2629251c, 0 0 0 1px #26292515, 0 12px 30px -18px #26292540, 0 40px 80px -44px #26292570;
}
.frame__bezel::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(145deg, #ffffffd6, #ffffff7a); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
.frame__screen { overflow: hidden; border-radius: calc(clamp(18px, 1rem + .6vw, 26px) - clamp(5px, .3rem + .2vw, 8px)); background: var(--paper); border: 1px solid #22252214; }
.frame__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; height: 38px; padding: 0 14px; background: #FBFAF7; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-micro); color: var(--muted); }
.frame__dots { display: flex; gap: 6px; }
.frame__dots i { width: 9px; height: 9px; border-radius: 50%; background: #D9D5CB; }
.frame__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-micro); }
.frame__url { justify-self: end; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.frame__url .ic { width: 12px; height: 12px; }
.frame__media, .frame__media img { display: block; width: 100%; height: auto; }
/* Art direction without a separate crop file: set --ar-sm and --pos-sm on .frame */
.frame__media img { aspect-ratio: var(--ar, 1280 / 900); object-fit: cover; object-position: var(--pos, 0 0); }
@media (max-width: 639px) {
  .frame__bar { grid-template-columns: auto 1fr; height: 34px; padding: 0 10px; }
  .frame__url { display: none; }
  .frame__media img { aspect-ratio: var(--ar-sm, var(--ar, 1280 / 900)); object-position: var(--pos-sm, var(--pos, 0 0)); }
}
.frame--flat .frame__bezel { padding: 0; border: 0; box-shadow: var(--sh-3); }
.frame--flat .frame__bezel::before { display: none; }
.frame--flat .frame__screen { border-radius: var(--r-md); }

/* ---------------------------------------------------------------------
   14. Real brand icons (integrations)
--------------------------------------------------------------------- */
.brand-tile {
  --tile: 72px; position: relative; isolation: isolate; width: var(--tile); height: var(--tile); flex: none;
  display: grid; place-items: center; border-radius: calc(var(--tile) * .27);
  border: 1px solid #fffffff2;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #2225220d, 0 0 0 1px #2225220f, 0 2px 4px #2225220d, 0 16px 30px -16px #2225224d;
}
.brand-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(120% 80% at 20% 0%, #fff, #ffffff00 60%), linear-gradient(160deg, #ffffffee, #f6f5f1e0); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); }
.brand-tile img { width: calc(var(--tile) * .46); height: calc(var(--tile) * .46); object-fit: contain; }
.brand-tile img[src$=".png"] { max-width: 40px; max-height: 40px; }
.brand-tile--sm { --tile: 48px; }
.brand-tile--lg { --tile: 92px; }
.brand-tile:has(.brand-tile__label) { margin-bottom: 28px; }
.brand-tile__label { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); font: 600 .8125rem/1.2 var(--sans); color: var(--ink); white-space: nowrap; }
.app-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--paper); border: 1px solid var(--line-soft); box-shadow: 0 1px 2px #2225220d; }
.app-icon img { width: 22px; height: 22px; object-fit: contain; }
.app-icon--sm { width: 32px; height: 32px; border-radius: 9px; }
.app-icon--sm img { width: 18px; height: 18px; }

/* Score ring (small, e.g. 82% on an evidence card). Set --p (0–100). */
.score-ring { --size: 60px; --p: 0; position: relative; width: var(--size); height: var(--size); flex: none; }
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring circle { fill: none; stroke-width: 5.5; }
.score-ring__track { stroke: var(--line-soft); }
.score-ring__value { stroke: var(--amber); stroke-linecap: round; stroke-dasharray: var(--p) 100; }
.score-ring strong { position: absolute; inset: 0; display: grid; place-items: center; font: 600 calc(var(--size) * .27)/1 var(--display); letter-spacing: -.03em; color: var(--ink); }

/* Score orbit (B): the 82% ring built from the four weighted parts, each arc filled to what it earned.
   Circles use pathLength="100"; every arc sets --len (drawn length) and --off (minus its start).
   Default arcs are tuned for 40/30/20/10 with 3-unit gaps. Draws in when it carries .reveal. */
.score-orbit { --so-1: var(--amber); --so-2: var(--cs); --so-3: var(--cm); --so-4: var(--cl); --so-track: var(--line-soft); --so-guide: var(--line);
  position: relative; width: min(100%, var(--size, 440px)); aspect-ratio: 1; margin-inline: auto; }
.band--forest .score-orbit { --so-2: #D5E2C9; --so-3: #B2C3A5; --so-4: #8E9F83; --so-track: #ffffff14; --so-guide: #ffffff1f; }
.score-orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.score-orbit circle { fill: none; }
.so-guide { stroke: var(--so-guide); stroke-width: 1; vector-effect: non-scaling-stroke; }
.so-guide--dash { stroke-dasharray: 2 7; }
.so-track, .so-arc { stroke-width: 15; stroke-dasharray: var(--len) 100; stroke-dashoffset: var(--off); }
.so-track { stroke: var(--so-track); }
.so-arc { stroke-linecap: round; transition: stroke-dasharray 1.3s var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms + 150ms); }
.so-arc--1 { stroke: var(--so-1); } .so-arc--2 { stroke: var(--so-2); } .so-arc--3 { stroke: var(--so-3); } .so-arc--4 { stroke: var(--so-4); }
@media (prefers-reduced-motion: no-preference) { .js .score-orbit.reveal:not(.is-in) .so-arc { stroke-dasharray: 0 100; } }
.score-orbit__center { position: absolute; inset: 22%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; }
.score-orbit__value { font: 400 clamp(3.25rem, 2rem + 6vw, 6.25rem)/.9 var(--display); letter-spacing: -.06em; color: var(--ink); font-variant-numeric: tabular-nums; }
.score-orbit__value sup { font-size: .42em; vertical-align: .95em; margin-left: .04em; letter-spacing: 0; }
.score-orbit__name { font: 600 clamp(.9375rem, .88rem + .3vw, 1.0625rem)/1.3 var(--display); color: var(--ink); }
.score-orbit__tag { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); font: 600 clamp(.8125rem, .76rem + .25vw, .9375rem)/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.score-orbit__tag span { color: var(--muted); font-weight: 500; }

/* Score legend: the four parts with earned / max, hairline rows */
.score-legend { border-top: 1px solid var(--line); text-align: left; }
.score-legend > li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; padding: clamp(1rem, .8rem + .8vw, 1.5rem) 0; border-bottom: 1px solid var(--line); }
.score-legend__swatch { width: 22px; height: 5px; border-radius: 3px; background: var(--c, var(--amber)); align-self: center; }
.score-legend__name { font: 600 clamp(1.0625rem, 1rem + .4vw, 1.3125rem)/1.3 var(--display); letter-spacing: -.02em; color: var(--ink); }
.score-legend__name small { margin-left: 8px; font: 500 .8125rem/1 var(--sans); color: var(--muted); letter-spacing: 0; }
.score-legend__score { font: 600 clamp(1.0625rem, 1rem + .4vw, 1.3125rem)/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.score-legend__score span { color: var(--muted); font-weight: 500; }
.score-legend__text { grid-column: 2 / -1; font-size: var(--fs-small); line-height: 1.6; color: var(--body); }

/* Avatar initials */
.avatar { --size: 40px; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center; flex: none; font: 600 calc(var(--size) * .34)/1 var(--display); letter-spacing: -.02em; color: var(--forest); background: linear-gradient(160deg, #EFE7DA, #E1D5C0); border: 1px solid rgba(34,37,34,.06); }
.avatar--sage { color: var(--ok); background: linear-gradient(160deg, #E9F0E6, #D7E2D2); }
.avatar--amber { color: var(--amber-ink-hover); background: linear-gradient(160deg, #FBEBDB, #F3D6B9); }

/* ---------------------------------------------------------------------
   15. Aurora (D): soft warm field behind a hero only
--------------------------------------------------------------------- */
.aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora__blob { position: absolute; left: var(--x, 50%); top: var(--y, 30%); width: var(--w, 44vw); aspect-ratio: 1; margin: calc(var(--w, 44vw) / -2) 0 0 calc(var(--w, 44vw) / -2); border-radius: 50%; will-change: transform; }
.aurora__blob--amber { background: radial-gradient(closest-side, rgba(232,147,74,.24), rgba(232,147,74,.12) 50%, rgba(232,147,74,0)); }
.aurora__blob--champ { background: radial-gradient(closest-side, rgba(229,220,203,.95), rgba(229,220,203,.42) 55%, rgba(229,220,203,0)); }
.aurora__blob--sage { background: radial-gradient(closest-side, rgba(178,195,165,.32), rgba(178,195,165,.14) 55%, rgba(178,195,165,0)); }
.aurora--grain::after {
  content: ""; position: absolute; inset: 0; opacity: .32; mix-blend-mode: multiply; background-size: 200px 200px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .40  0 0 0 0 .34  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.aurora--fade { -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
@keyframes aurora-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6vw, 4vh, 0) scale(1.08); } }
@keyframes aurora-b { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-5vw, 6vh, 0) scale(.96); } }
@keyframes aurora-c { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(4vw, -5vh, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .aurora__blob:nth-child(3n+1) { animation: aurora-a 40s ease-in-out infinite alternate; }
  .aurora__blob:nth-child(3n+2) { animation: aurora-b 48s ease-in-out infinite alternate; }
  .aurora__blob:nth-child(3n) { animation: aurora-c 34s ease-in-out infinite alternate; }
}
.aurora-host { position: relative; isolation: isolate; }
.aurora-host > :not(.aurora) { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
   16. Forest ink band: the ONE dark showcase per page
--------------------------------------------------------------------- */
.band--forest {
  --bg: #17201C; --ink: #F2F1EA; --body: #CFD4CA; --muted: #B4BCB1; --line: #ffffff1c; --line-soft: #ffffff12; --line2: #ffffff30;
  --panel: #1F2A25; --panel-2: #1C2622; --amber-ink: #F2B47A; --amber-soft: #e8934a1f; --focus: #F2B47A;
  --ok: #A6D0B6; --ok-bg: #a6d0b61a; --warn: #E7C17F; --warn-bg: #e7c17f1a; --bad: #E9A69B; --bad-bg: #e9a69b1a;
  --ln-forest: #B2C3A5; --ln-sage: #8E9F83; --ln-sage2: #6C7E65; --ln-stone: #858B80; --ln-ink: #F0AE70;
  --glass-top: rgba(255,255,255,.085); --glass-bot: rgba(255,255,255,.035); --glass-edge: rgba(255,255,255,.14); --glass-ring: rgba(0,0,0,.25);
  --glass-sheen: rgba(255,255,255,.06); --glow: #f0a15a2e;
  --sh-glass: 0 0 0 1px rgba(0,0,0,.25), inset 0 1px 0 #ffffff1f, 0 24px 60px -30px #000000b3;
  position: relative; isolation: isolate; color: var(--ink);
  background:
    radial-gradient(55% 45% at 50% 0%, rgba(232,147,74,.17), rgba(232,147,74,0) 70%),
    radial-gradient(45% 40% at 88% 100%, rgba(178,195,165,.12), rgba(178,195,165,0) 70%),
    linear-gradient(180deg, #1A2420, #151D1A);
}
.band--forest :is(h1, h2, h3, h4) { color: var(--ink); }
.band--forest .eyebrow::before { box-shadow: 0 0 0 3px #e8934a40; }
.band--forest .glass::after { opacity: .22; }
.band--forest .card { background: var(--panel); border-color: var(--line); box-shadow: none; }
.band--forest .btn--soft { color: #F2F1EA; background: linear-gradient(155deg, #ffffff24, #ffffff0d); border-color: #ffffff2a; box-shadow: inset 0 1px 0 #ffffff26, 0 0 0 .75px #00000040, 0 8px 18px -10px #000000a0; }
.band--forest .tagline, .band--forest .pullquote, .band--forest .kicker-serif { color: #E5DCCB; }
.band--forest .status { background: #ffffff12; color: var(--muted); }
.band--forest .chip { background: #ffffff0d; border-color: var(--line); color: var(--ink); }
.band--forest kbd { background: #ffffff14; border-color: #ffffff26; color: var(--body); }
/* Inset variant: the band floats as a rounded slab inside the page (D) */
.band--inset { margin-inline: clamp(8px, .5rem + .8vw, 24px); border-radius: clamp(24px, 1rem + 2vw, 44px); overflow: hidden; }

/* ---------------------------------------------------------------------
   17. Routing-line primitives (the hero's nine-stage desk)
   Draw every path LEFT → RIGHT so flows and travellers move forward.
--------------------------------------------------------------------- */
.route { position: relative; }
.route__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rl { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rl--rail { stroke: var(--ln-rail); stroke-width: 2; }
.rl--forest { stroke: var(--ln-forest); }
.rl--sage { stroke: var(--ln-sage); }
.rl--sage2 { stroke: var(--ln-sage2); }
.rl--champ { stroke: var(--ln-champ); stroke-width: 1.75; }
.rl--stone { stroke: var(--ln-stone); }
.rl--ink { stroke: var(--ln-ink); }
.rl--faint { opacity: .45; }
/* moving dashes overlaid on a lane: reads as "work flowing forward" */
.rl-flow { fill: none; stroke: var(--ln-rail); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1.5 13; vector-effect: non-scaling-stroke; opacity: .9; }
@media (prefers-reduced-motion: no-preference) { .rl-flow { animation: rl-flow 1.4s linear infinite; } }
@keyframes rl-flow { from { stroke-dashoffset: 14.5; } to { stroke-dashoffset: 0; } }

.rl-dot { stroke: var(--rl-bg, var(--bg)); stroke-width: 3; vector-effect: non-scaling-stroke; }
.rl-dot--rail, .rl-dot--amber { fill: var(--ln-rail); }
.rl-dot--forest { fill: var(--ln-forest); }
.rl-dot--sage { fill: var(--ln-sage); }
.rl-dot--sage2 { fill: var(--ln-sage2); }
.rl-dot--champ { fill: var(--ln-champ); }
.rl-dot--stone { fill: var(--ln-stone); }
.rl-dot--ink { fill: var(--ln-ink); }
.rl-halo { fill: var(--ln-rail); opacity: .18; }

/* SVG text labels: number + name, haloed against the page */
.rl-label { font: 500 12px/1 var(--sans); fill: var(--muted); paint-order: stroke; stroke: var(--rl-bg, var(--bg)); stroke-width: 6px; stroke-linejoin: round; }
.rl-num { font: 600 12px/1 var(--display); fill: var(--amber-ink); paint-order: stroke; stroke: var(--rl-bg, var(--bg)); stroke-width: 6px; stroke-linejoin: round; font-variant-numeric: tabular-nums; }
/* HTML labels positioned in % over a scaling SVG: stay legible at any size */
.rl-tag { position: absolute; left: var(--x); top: var(--y); transform: translate(var(--tx, -50%), var(--ty, -130%)); display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--r-pill); font: 500 .75rem/1.2 var(--sans); color: var(--body); white-space: nowrap; background: color-mix(in srgb, var(--rl-bg, var(--bg)) 86%, transparent); }
.rl-tag b { font: 600 .75rem/1 var(--display); color: var(--amber-ink); font-variant-numeric: tabular-nums; }
.rl-tag--end { color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line); background: var(--paper); }

/* Travelling dot. SVG: <g class="rl-traveler"><circle r="7" class="rl-halo"/><circle r="3.5" class="rl-dot--rail"/>
   <animateMotion dur="9s" repeatCount="indefinite" path="…left→right…"/></g>
   HTML: <i class="rl-traveler-html" style="offset-path: path('M…'); --dur: 9s; --delay: -3s"></i> */
.rl-traveler { pointer-events: none; }
.rl-traveler-html {
  position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; pointer-events: none;
  background: var(--amber); box-shadow: 0 0 0 3px #e8934a38, 0 0 12px 2px #e8934a73; offset-rotate: 0deg; opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .rl-traveler-html { animation: rl-travel var(--dur, 10s) linear var(--delay, 0s) infinite; }
}
@keyframes rl-travel {
  0% { offset-distance: 0%; opacity: 0; }
  7% { opacity: 1; }
  92% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .rl-traveler, .rl-traveler-html { display: none; } }

/* ---------------------------------------------------------------------
   18. Reveal on scroll (never the only way content becomes visible)
   Hidden only under .js; site.js adds .is-in. If site.js never runs,
   a CSS failsafe animation shows everything after 3.5s.
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal:not(.is-in) { opacity: 0; transform: translateY(16px); animation: reveal-failsafe .01s linear 3.5s forwards; }
  .js .reveal--scale:not(.is-in) { transform: translateY(10px) scale(.97); }
  .js .reveal--fade:not(.is-in) { transform: none; }
  .js.reveal-ready .reveal:not(.is-in) { animation: none; }
  .js .reveal { transition: opacity .7s var(--ease-out), transform .85s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}
@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------
   19. Utilities
--------------------------------------------------------------------- */
.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; }
.nowrap { white-space: nowrap; }
.balance { text-wrap: balance; }
.pretty { text-wrap: pretty; }
.measure { max-width: 40rem; }
.mt-0 { margin-top: 0 !important; } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); } .mt-8 { margin-top: var(--s-8); }
.mb-0 { margin-bottom: 0 !important; }
.w-full { width: 100%; }
.relative { position: relative; }
.divider { height: 1px; background: var(--line); border: 0; }
.dot-sep { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; vertical-align: middle; margin: 0 .6em; }
/* Visibility by breakpoint */
@media (max-width: 639px) { .hide-sm { display: none !important; } }
@media (min-width: 640px) { .show-sm { display: none !important; } }
@media (max-width: 1023px) { .hide-md { display: none !important; } }
@media (min-width: 1024px) { .show-md { display: none !important; } }

/* ---------------------------------------------------------------------
   20. Accessibility modes
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
  .btn:hover, .btn:active, .site-nav__menu:active { transform: none !important; }
  .site-sheet { transform: none !important; }
  .aurora__blob { animation: none !important; }
  .rl-flow { animation: none !important; stroke-dasharray: none; opacity: 0; }
  .faq details::details-content { transition: none; }
}
/* Flat fallback: an override, never a gate on the glass itself */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .glass::before, .glass--faux::before, .frame__bezel::before, .brand-tile::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--panel); }
  .glass { border-color: var(--line2); }
  .glass::after { display: none; }
  .btn--soft { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper); border-color: var(--line2); }
  .btn--primary { background: var(--amber); }
  .site-nav__bar::before, .site-sheet::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper); }
  .site-nav__bar, .site-sheet { border-color: var(--line2); }
  .site-nav::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); -webkit-mask-image: none; mask-image: none; height: 100%; }
  .site-nav__menu { background: var(--paper); border-color: var(--line2); }
  .aurora { display: none; }
  .band--forest .glass::before { background: var(--panel); }
}
@media (prefers-contrast: more) {
  :root { --muted: #4A5246; --body: #353D31; --line: #A7AE9F; --line-soft: #C9CDC2; }
  .btn, .glass, .card, .chip, .status, .site-nav__bar { border-color: currentColor; }
}
@media (forced-colors: active) {
  .glass, .card, .site-nav__bar, .site-sheet, .frame__bezel, .brand-tile, .well, .chip, .status, .badge, .tag-chip, kbd { border: 1px solid CanvasText; background: Canvas; box-shadow: none; }
  .glass::before, .glass::after, .site-nav__bar::before, .site-sheet::before, .frame__bezel::before, .brand-tile::before, .site-nav::before { display: none; }
  .btn { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; box-shadow: none; }
  .btn--primary { border-width: 2px; }
  .site-nav__menu { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; }
  .site-nav__menu-lines i { background: ButtonText; }
  .site-nav__links a[aria-current="page"]::after, .site-nav__links a.is-active::after { background: Highlight; }
  .site-nav__links a[aria-current="page"] { text-decoration: underline; }
  .aurora, .rl-traveler, .rl-traveler-html, .rl-flow { display: none; }
  .rl { stroke: CanvasText; }
  .rl-dot { fill: CanvasText; stroke: Canvas; }
  .band--forest { background: Canvas; color: CanvasText; }
  .checks > li::before, .faq summary::after { forced-color-adjust: none; }
  .score-ring__value { stroke: Highlight; }
  .eyebrow::before, .sample-note::before { background: CanvasText; }
}
@media print {
  .site-nav, .aurora, .rl-traveler, .rl-traveler-html, .skip-link { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
  .glass::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
  body { background: #fff; }
}
/* Touch-sized shared navigation, including the footer and narrow phone menu. */
@media (pointer:coarse), (max-width:1139px) {
  .site-footer__col a, .site-footer__contact a, .site-footer__top { min-height:44px; }
  .site-nav__menu { width:44px; height:44px; }
  .site-nav__cta, .site-nav__signin { min-height:44px; }
  .site-nav .wordmark { min-height:44px; }
}
/* Version 2: quieter chrome, denser references, inspectable real screens. */
:root { --section-y:clamp(64px,7.5vw,112px); --head-gap:clamp(32px,4vw,56px); }
.btn--primary { box-shadow:inset 0 1px 1px #ffffff80,inset 0 -1px 2px #99552220,0 0 0 .5px #99552225,0 6px 16px -9px #99552270; }
.btn--soft { box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px #26292512,0 0 0 .5px #26292518,0 5px 14px -9px #26292544; }
.glass--panel::before { --glass-top:rgba(255,255,255,.94); --glass-bot:rgba(255,255,255,.86); }
.band--forest .glass--panel::before { --glass-top:rgba(255,255,255,.085); --glass-bot:rgba(255,255,255,.035); }
.site-nav__bar { box-shadow:inset 0 1px 1px #fff,0 0 0 1px #2225220a,0 8px 26px -18px #22252255; }
.faq details::details-content { transition:none; }
.section-head .lead { text-wrap:pretty; }
.section-jumps { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 22px; margin:28px auto 0; }
.section-jumps a { display:inline-flex; align-items:center; min-height:44px; color:var(--forest); font-size:14px; text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--line2); }
.reference-note { padding:18px 22px; border-left:2px solid var(--amber); background:var(--amber-soft); color:var(--body); font-size:14px; line-height:1.7; }
.has-inspector { position:relative; }
.frame-inspect { position:absolute; z-index:5; right:12px; bottom:12px; display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:9px 13px; border:1px solid #ffffffee; border-radius:99px; background:#fffffff0; color:var(--forest); font:500 12px/1 var(--sans); cursor:pointer; box-shadow:0 0 0 1px #22252214,0 4px 12px #22252215; backdrop-filter:blur(12px); }
.frame-inspect .ic { width:15px; height:15px; }
.frame-inspect:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
@media(hover:hover) and (pointer:fine) {
  .frame-inspect { opacity:0; transition:opacity 160ms ease; }
  .has-inspector:hover>.frame-inspect,.has-inspector:focus-within>.frame-inspect { opacity:1; }
  .btn--primary:hover { box-shadow:inset 0 1px 1px #ffffff80,0 0 0 .5px #99552225,0 7px 20px -10px #99552288; }
  .btn--soft:hover { box-shadow:inset 0 1px 1px #fff,0 0 0 .5px #26292528,0 6px 18px -10px #26292555; }
}
html.image-inspector-open { overflow:hidden; }
.image-inspector { width:min(1480px,calc(100vw - 48px)); max-width:none; max-height:calc(100dvh - 48px); margin:auto; padding:0; border:1px solid #ffffffb0; border-radius:22px; background:var(--porcelain); color:var(--ink); box-shadow:0 30px 100px #0005; overflow:hidden; }
.image-inspector[open] { display:flex; flex-direction:column; }
.image-inspector::backdrop { background:#14211cbb; backdrop-filter:blur(8px); }
.image-inspector__head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:17px 24px; border-bottom:1px solid var(--line); }
.image-inspector__head h2 { font-size:19px; letter-spacing:-.025em; }
.image-inspector__head p { margin-top:3px; color:var(--muted); font-size:12px; }
.image-inspector__close { display:grid; place-items:center; flex:none; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:var(--paper); color:var(--ink); font:400 28px/1 var(--sans); cursor:pointer; }
.image-inspector__stage { min-height:0; max-height:calc(100dvh - 226px); overflow:auto; overscroll-behavior:contain; display:flex; justify-content:center; align-items:center; background:#eaece7; padding:12px; }
.image-inspector__stage img { flex:none; width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 250px); object-fit:contain; box-shadow:0 2px 14px #22252216; }
.image-inspector.is-zoomed .image-inspector__stage { display:block; }
.image-inspector.is-zoomed img { max-width:none; max-height:none; }
.image-inspector__foot { padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid var(--line); }
.image-inspector__caption { max-width:70ch; font-size:13px; color:var(--body); line-height:1.5; }
.image-inspector__controls { display:flex; align-items:center; gap:20px; flex:none; }
.image-inspector__controls .link { min-height:44px; font-size:13px; }
.image-inspector__controls .btn { min-height:44px; }
@media(max-width:639px) {
  .image-inspector { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); border-radius:18px; }
  .image-inspector__head { padding:12px 14px; }
  .image-inspector__stage { padding:8px; max-height:calc(100dvh - 234px); }
  .image-inspector__stage img { max-height:calc(100dvh - 250px); }
  .image-inspector__foot { display:block; padding:12px 14px; }
  .image-inspector__caption { font-size:12px; max-height:54px; overflow:auto; }
  .image-inspector__controls { justify-content:space-between; margin-top:8px; gap:12px; }
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  .frame-inspect { background:var(--paper); backdrop-filter:none; border-color:var(--line2); }
  .image-inspector::backdrop { backdrop-filter:none; background:#14211cef; }
}
@media(forced-colors:active) {
  .frame-inspect,.image-inspector,.image-inspector__close { border:1px solid ButtonText; background:Canvas; color:CanvasText; }
  .image-inspector::backdrop { background:Canvas; }
}
@media print { .frame-inspect,.image-inspector { display:none!important; } }
html:not(.js) .site-nav__menu { display:none; }
.site-fallback-nav { display:none; }
@media(max-width:1139px) {
  .site-fallback-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 16px; padding:20px var(--gutter); margin-bottom:18px; font-size:14px; }
  .site-fallback-nav a { display:flex; align-items:center; min-height:44px; color:var(--forest); text-decoration:underline; text-underline-offset:4px; }
}