/* ============================================================
   AERO RANKINGS - design system

   A product page, not a brochure. Quiet surfaces (white and #F5F5F7), type
   that does the talking (the platform's own system face: SF Pro on Apple
   devices, Inter everywhere else), generous space, soft depth, and one blue
   for every action. Amber survives with exactly one meaning: this business
   got named in the answer. It is never decoration.

   Token names are shared with the app (app.css), the chat widget (chat.js)
   and the dashboard scripts, so they keep their old names even where the
   meaning moved: --ink is the text colour, --accent is now the action blue,
   --mark is still the "named" amber.

   Full dark mode follows the OS. `.dark` / `.theme-dark` and
   [data-theme="dark"] force it; [data-theme="light"] opts out.
   ============================================================ */

:root {
  color-scheme: light;
  --paper: #FFFFFF;          /* page canvas */
  --surface: #FFFFFF;        /* cards that sit on a grey section */
  --surface-2: #F5F5F7;      /* the alternate ground, Apple's grey */
  --surface-3: #E8E8ED;
  --ink: #1D1D1F;            /* text */
  --ink-2: #424245;
  --ink-3: #6E6E73;          /* 5.0:1 on white, the lightest text allowed */
  --line: #E5E5EA;           /* hairline */
  --line-2: #D2D2D7;
  --rule: #D2D2D7;

  --accent: #0071E3;         /* every action */
  --accent-ink: #0066CC;     /* links in running text, 5.6:1 on white */
  --accent-soft: #E8F1FC;
  --mark: #FFC53D;           /* named, cited, singled out */
  --mark-soft: #FFF4D6;
  --mark-ink: #8A5A00;
  --good: #1E8E3E;
  --bad: #D70015;

  /* The night surface is fixed: it is the product-shot ground, and it must
     stay dark in light mode and dark mode alike. */
  --night: #000000;
  --night-2: #1D1D1F;
  --night-line: #333336;
  --night-ink: #F5F5F7;
  --night-ink-2: #A1A1A6;

  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Tight", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;

  --r-xs: 8px;
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .02);
  --shadow: 0 2px 6px rgba(0, 0, 0, .04), 0 12px 32px -8px rgba(0, 0, 0, .10);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, .05), 0 32px 80px -16px rgba(0, 0, 0, .22);

  --pad: clamp(1rem, 4vw, 2.75rem);
  --ease: cubic-bezier(.25, .1, .25, 1);
  --spring: cubic-bezier(.2, .9, .25, 1.1);
  --header-h: 52px;

  --canvas: var(--paper);    /* older names, still referenced */
  --hairline: var(--line);
}

/* One block of dark values, applied three ways. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #000000; --surface: #1C1C1E; --surface-2: #111113; --surface-3: #2C2C2E;
    --ink: #F5F5F7; --ink-2: #D1D1D6; --ink-3: #A1A1A6;
    --line: #2C2C2E; --line-2: #3A3A3C; --rule: #3A3A3C;
    --accent: #2997FF; --accent-ink: #2997FF; --accent-soft: #0B2540;
    --mark-soft: #3A2E10; --mark-ink: #FFC53D;
    --good: #30D158; --bad: #FF453A;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow: 0 12px 32px -8px rgba(0, 0, 0, .6);
    --shadow-lg: 0 32px 80px -16px rgba(0, 0, 0, .8);
  }
}
:root[data-theme="dark"], .dark, .theme-dark {
  color-scheme: dark;
  --paper: #000000; --surface: #1C1C1E; --surface-2: #111113; --surface-3: #2C2C2E;
  --ink: #F5F5F7; --ink-2: #D1D1D6; --ink-3: #A1A1A6;
  --line: #2C2C2E; --line-2: #3A3A3C; --rule: #3A3A3C;
  --accent: #2997FF; --accent-ink: #2997FF; --accent-soft: #0B2540;
  --mark-soft: #3A2E10; --mark-ink: #FFC53D;
  --good: #30D158; --bad: #FF453A;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow: 0 12px 32px -8px rgba(0, 0, 0, .6);
  --shadow-lg: 0 32px 80px -16px rgba(0, 0, 0, .8);
  --canvas: var(--paper);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }

/* `hidden` must beat any component display rule. */
[hidden] { display: none !important; }

body {
  font-family: var(--sans);
  background: var(--canvas);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection { background: var(--mark); color: #1D1D1F; }

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; letter-spacing: inherit; }

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ---- fields ----------------------------------------------------------- */
input, select, textarea {
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: .78rem .95rem;
  width: 100%;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: .8; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--accent); }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 2.4rem;
}
textarea { resize: vertical; min-height: 6rem; }

/* ---- type -------------------------------------------------------------
   Large, heavy, tight. Headlines carry the page; nothing else competes. */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -0.022em; line-height: 1.1; color: var(--ink); }

.display {
  font-family: var(--display);
  font-size: clamp(2.75rem, 7.2vw, 5.75rem);
  font-weight: 700; letter-spacing: -0.038em; line-height: 1.03;
}
.display-2 {
  font-family: var(--display);
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.07;
}
.display-3 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700; letter-spacing: -0.028em; line-height: 1.12;
}
.lede {
  font-size: clamp(1.1rem, 1.6vw, 1.32rem); line-height: 1.5; letter-spacing: -0.016em;
  color: var(--ink-3); max-width: 40em; font-weight: 400;
}
.lede b, .lede strong { color: var(--ink); font-weight: 600; }
.lede a { color: var(--accent-ink); }
.lede a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Supporting prose (the name is historical: it was never monospace). */
.mono { font-family: var(--sans); font-size: .9rem; color: var(--ink-3); line-height: 1.55; letter-spacing: -0.008em; }
.mono b { color: var(--ink-2); font-weight: 600; }
.mono a, .link { color: var(--accent-ink); }
.mono a:hover, .link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* A label names data: column heads, a status, a source list. */
.label { font-size: .75rem; font-weight: 600; letter-spacing: .01em; color: var(--ink-3); line-height: 1.4; }

.num, table td, .stage-n, .sp-n { font-variant-numeric: tabular-nums; }

/* genuinely technical text: keys, snippets, selectors */
.code, code, pre, .kbd { font-family: var(--mono); font-size: .82rem; letter-spacing: 0; }

/* the one amber meaning: a name that got singled out in an answer */
.mark {
  background: linear-gradient(transparent 8%, var(--mark) 8%, var(--mark) 94%, transparent 94%);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 0 .22em; border-radius: 4px;
  color: #1D1D1F; font-weight: 600;
}

/* ---- structure ---------------------------------------------------------- */
.wrap { padding-left: var(--pad); padding-right: var(--pad); max-width: 1120px; margin: 0 auto; }
.wrap-wide { max-width: 1280px; }
.wrap-tight { max-width: 860px; }

.section { padding: clamp(4.5rem, 10vw, 8rem) 0; position: relative; }
.section-lift { background: var(--surface-2); }
.section-tall { padding: clamp(5.5rem, 12vw, 10rem) 0; }
.section-short { padding: clamp(3rem, 6vw, 4.5rem) 0; }
.section-open { padding-top: 0; }

/* The night band: product shots and the one dark moment on a page. */
.section-ink { background: var(--night); color: var(--night-ink); }
.section-ink h1, .section-ink h2, .section-ink h3, .section-ink .display-2 { color: #fff; }
.section-ink .lede, .section-ink .mono { color: var(--night-ink-2); }
.section-ink .mono b { color: var(--night-ink); }
.section-ink .mono a { color: #2997FF; }

/* Headings centre over their section, Apple style; context sits under. */
.section-head {
  display: grid; justify-items: center; text-align: center; gap: 1rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem); max-width: 48rem;
}
.section-head .mono { font-size: clamp(1.02rem, 1.4vw, 1.2rem); max-width: 38em; }
.section-head.left { justify-items: start; text-align: left; margin-left: 0; }
h1, h2, h3, .display, .display-2, .display-3 { text-wrap: balance; }
.lede, .row-desc, .mono { text-wrap: pretty; }

/* A small coloured word above a headline, used only where it names something
   real ("Free, no account"). */
.eyebrow { display: inline-block; font-size: .95rem; font-weight: 600; color: var(--accent-ink); letter-spacing: -0.01em; margin-bottom: .2rem; }
.section-ink .eyebrow { color: #2997FF; }

.xh, .statusline { display: none; }

/* ---- icons ---------------------------------------------------------------- */
.hgi { width: 1.2em; height: 1.2em; display: block; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* ---- buttons ---------------------------------------------------------------
   Pills. Blue is the action; black is the strong alternative; grey is quiet. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px; padding: .7rem 1.35rem;
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--ink);
  font-weight: 500; font-size: .98rem; letter-spacing: -0.01em; line-height: 1.2;
  transition: background 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--spring), box-shadow 180ms var(--ease);
  user-select: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: color-mix(in srgb, var(--surface-3) 80%, var(--ink) 8%); }
.btn:active { transform: scale(.97); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: color-mix(in srgb, var(--ink) 85%, var(--paper)); }
.btn-ghost { background: transparent; color: var(--accent-ink); padding-inline: .4rem; }
.btn-ghost:hover { background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.btn-lg { min-height: 52px; padding: .9rem 1.7rem; font-size: 1.05rem; }
.btn-sm { min-height: 34px; padding: .4rem .95rem; font-size: .86rem; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn .hgi { width: 1.05em; height: 1.05em; }
.section-ink .btn:not(.btn-accent):not(.btn-solid) { background: rgba(255, 255, 255, .14); color: #fff; }
.section-ink .btn:not(.btn-accent):not(.btn-solid):hover { background: rgba(255, 255, 255, .22); }
.section-ink .btn-solid { background: #fff; color: #1D1D1F; }

/* "Learn more ›" links: the Apple text CTA */
.more { color: var(--accent-ink); font-weight: 500; display: inline-flex; align-items: center; gap: .2rem; }
.more::after { content: '›'; font-size: 1.25em; line-height: 1; transform: translateY(-.04em); transition: transform 180ms var(--ease); }
.more:hover { text-decoration: underline; text-underline-offset: 3px; }
.more:hover::after { transform: translate(2px, -.04em); }
.section-ink .more { color: #2997FF; }

.tag {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .76rem; font-weight: 600; letter-spacing: 0;
  background: var(--accent-soft); color: var(--accent-ink);
  border-radius: var(--r-pill); padding: .22rem .65rem;
}
.tag-quiet { background: var(--surface-2); color: var(--ink-3); }
.tag-mark { background: var(--mark-soft); color: var(--mark-ink); }

/* ---- header: frosted glass ------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 90;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 max(var(--pad), calc((100vw - 1120px) / 2 + var(--pad)));
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.brand {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.025em;
}
.brand .hgi { width: 1.25em; height: 1.25em; color: var(--accent); }
.site-nav { display: flex; align-items: center; gap: .1rem; }
.site-nav a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .75rem; border-radius: var(--r-pill);
  font-size: .82rem; font-weight: 400; letter-spacing: -0.005em;
  color: color-mix(in srgb, var(--ink) 80%, transparent);
  transition: color 160ms var(--ease), background 160ms var(--ease);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.site-nav a.nav-cta { background: var(--accent); color: #fff; font-weight: 500; padding: .38rem .9rem; margin-left: .45rem; }
.site-nav a.nav-cta:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.header-meta { display: none; }
.menu-btn { display: none; padding: .5rem; border-radius: var(--r-pill); }

/* ---- list rows ------------------------------------------------------------- */
.rows { display: grid; border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: 1fr 1.6fr auto;
  gap: 1.5rem; align-items: baseline;
  padding: 1.35rem .25rem; border-bottom: 1px solid var(--line);
  transition: background 160ms var(--ease);
}
a.row:hover, .row.hover:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.row-idx { display: none; }
.row-title { font-family: var(--display); font-size: 1.12rem; font-weight: 600; letter-spacing: -0.02em; display: flex; align-items: center; gap: .55rem; line-height: 1.3; }
.row-title .hgi { color: var(--accent); width: .95em; height: .95em; }
.row-desc { color: var(--ink-3); font-size: 1rem; line-height: 1.55; }
.row-arrow { justify-self: end; color: var(--ink-3); transition: color 160ms var(--ease), transform 160ms var(--ease); }
a.row:hover .row-arrow { color: var(--accent); transform: translateX(3px); }
.row-arrow .hgi { width: 1.05em; height: 1.05em; }

/* ---- cards and tiles ------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }

/* The bento tile: the main content pattern. Grey on white sections, white on
   grey sections, never a border and a shadow at once. */
.tile {
  background: var(--surface-2); border-radius: var(--r-xl);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  position: relative; overflow: hidden;
}
.section-lift .tile { background: var(--surface); }
.section-ink .tile { background: var(--night-2); color: var(--night-ink); }
.tile h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -0.028em; }
.tile p { color: var(--ink-3); margin-top: .6rem; line-height: 1.5; }
.section-ink .tile p { color: var(--night-ink-2); }
.tile .tile-kicker { font-size: .9rem; font-weight: 600; color: var(--accent-ink); margin-bottom: .5rem; }
.section-ink .tile .tile-kicker { color: #2997FF; }
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.bento > .span-2 { grid-column: span 2; }
.bento > .span-3 { grid-column: span 3; }
.bento > .span-4 { grid-column: span 4; }
.bento > .span-6 { grid-column: span 6; }
@media (max-width: 900px) { .bento > [class*="span-"] { grid-column: span 6; } }

/* ---- stages: a real sequence ------------------------------------------------ */
.stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.stage { background: var(--surface-2); border-radius: var(--r-xl); padding: clamp(1.6rem, 3vw, 2.2rem); display: grid; align-content: start; }
.section-lift .stage { background: var(--surface); }
.stage-n {
  display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem;
  border-radius: 50%; background: var(--accent); color: #fff;
  font-size: .95rem; font-weight: 700; margin-bottom: 1.2rem;
}
.stage h3 { font-size: clamp(1.3rem, 2vw, 1.55rem); letter-spacing: -0.026em; }
.stage p { margin-top: .6rem; color: var(--ink-3); font-size: .98rem; line-height: 1.55; }
.stage-out { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-3); }
.stage-out b { color: var(--ink); font-weight: 600; }
@media (max-width: 860px) { .stages { grid-template-columns: 1fr; } }

/* ---- capability tiles (kept for older pages) --------------------------------- */
.caps { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cap { background: var(--surface-2); border-radius: var(--r-xl); padding: clamp(1.6rem, 3vw, 2.2rem); }
.section-lift .cap { background: var(--surface); }
.cap h3 { display: flex; align-items: center; gap: .6rem; font-size: 1.3rem; letter-spacing: -0.026em; }
.cap h3 .hgi { color: var(--accent); width: 1em; height: 1em; }
.cap p { margin-top: .6rem; color: var(--ink-3); line-height: 1.55; }
@media (max-width: 800px) { .caps { grid-template-columns: 1fr; } }

/* ---- sources panel: which pages an engine read ------------------------------- */
.sources-panel { background: var(--night-2); color: var(--night-ink); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.sp-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--night-line); font-size: .8rem; font-weight: 500; color: var(--night-ink-2); }
.sp-bar .tag { background: rgba(255, 255, 255, .1); color: var(--night-ink-2); }
.sp-body { padding: .4rem; display: grid; gap: .15rem; }
.sp-row { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: .8rem; align-items: center; padding: .7rem .8rem; border-radius: var(--r-sm); font-size: .95rem; }
.sp-row .sp-n { color: #6E6E73; font-size: .82rem; }
.sp-row .sp-host { color: var(--night-ink); }
.sp-row .sp-tag { font-size: .76rem; color: #8E8E93; }
.sp-row.is-you { background: var(--mark); }
.sp-row.is-you .sp-n, .sp-row.is-you .sp-host, .sp-row.is-you .sp-tag { color: #1D1D1F; }
.sp-row.is-you .sp-host { font-weight: 600; }
.sp-note { padding: .9rem 1.1rem 1.2rem; font-size: .9rem; color: var(--night-ink-2); line-height: 1.55; border-top: 1px solid var(--night-line); }

/* ---- industries --------------------------------------------------------------- */
.ind-index { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px) { .ind-index { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ind-index { grid-template-columns: 1fr; } }
.ind-index a {
  display: grid; gap: .35rem; align-content: start;
  padding: 1.4rem 1.5rem; border-radius: var(--r-lg);
  background: var(--surface-2); color: var(--ink);
  font-weight: 600; font-size: 1.08rem; letter-spacing: -0.02em;
  transition: transform 220ms var(--spring), box-shadow 220ms var(--ease), background 220ms var(--ease);
}
.section-lift .ind-index a { background: var(--surface); }
.ind-index a span { font-size: .92rem; font-weight: 400; color: var(--ink-3); letter-spacing: -0.01em; }
.ind-index a:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* ---- stat strips -------------------------------------------------------------- */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stat-strip > div { padding: 1.4rem 1.5rem; background: var(--surface-2); border-radius: var(--r-lg); }
.section-lift .stat-strip > div { background: var(--surface); }
.stat-strip .num { font-family: var(--display); font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; margin-bottom: .35rem; }

/* ---- tables -------------------------------------------------------------------- */
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--line); font-size: .92rem; }
th { font-size: .78rem; color: var(--ink-3); font-weight: 600; background: var(--surface-2); letter-spacing: 0; }
th:first-child { border-top-left-radius: var(--r-xs); }
th:last-child { border-top-right-radius: var(--r-xs); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- forms ---------------------------------------------------------------------- */
.field { display: grid; gap: .45rem; }
.field label { font-size: .88rem; font-weight: 500; color: var(--ink-2); }
.field .hint { font-size: .82rem; color: var(--ink-3); }

/* ---- FAQ: native disclosure, so it works with no script ------------------------------ */
.faq { border-top: 1px solid var(--line); max-width: 52rem; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.35rem 0; font-family: var(--display); font-size: clamp(1.05rem, 1.6vw, 1.2rem); font-weight: 600; letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: .65rem; height: .65rem;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 240ms var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq details > div { padding: 0 3rem 1.5rem 0; color: var(--ink-3); line-height: 1.6; }
.faq details > div a { color: var(--accent-ink); }
.faq details > div a:hover { text-decoration: underline; }

/* ---- footer ---------------------------------------------------------------------- */
.site-footer { background: var(--surface-2); color: var(--ink-3); padding: 2.6rem 0 2.4rem; font-size: .8rem; }
.site-footer .brand { color: var(--ink); }
.footer-grid { display: flex; justify-content: space-between; gap: 2rem 3rem; flex-wrap: wrap; }
.footer-grid .mono { font-size: .8rem; }
.footer-grid a { color: var(--ink-2); }
.footer-grid a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line-2); }

/* ---- motion -----------------------------------------------------------------------
   Content is visible by default. Script arms only elements below the fold, and a
   timer releases anything still waiting, so a headless or failed render never
   ships a blank section. */
.reveal.armed { opacity: 0; transform: translateY(24px) scale(.985); transition: opacity 800ms var(--ease), transform 900ms cubic-bezier(.16, 1, .3, 1); }
.reveal.armed.in { opacity: 1; transform: none; }

.arv { opacity: 1; transform: none; }
.wsplit .w, .wsplit .w > span { display: inline; transform: none; }
#scroll-progress { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal.armed { opacity: 1; transform: none; }
}

/* ---- responsive ------------------------------------------------------------------- */
@media (max-width: 900px) {
  .row { grid-template-columns: 1fr auto; gap: .4rem 1rem; }
  .row-desc { grid-column: 1 / -1; grid-row: 2; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .site-nav { display: none; }
  .site-nav.open {
    display: flex; position: fixed; inset: var(--header-h) 0 auto 0;
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; z-index: 89;
    padding: .6rem var(--pad) 1.4rem; gap: .1rem;
  }
  .site-nav.open a { padding: .85rem .4rem; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; border-radius: 0; border-bottom: 1px solid var(--line); }
  .site-nav.open a.nav-cta { margin: 1rem 0 0; justify-content: center; font-size: 1.05rem; border-radius: var(--r-pill); border: 0; padding: .85rem; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 560px) {
  .stat-strip { grid-template-columns: 1fr; }
  .faq details > div { padding-right: 0; }
}

/* ---- free check: you vs nearby competitors (#633). Shared by the homepage result
   panel (dark, overrides in index.html) and the /check/:token page (light).
   A table when its box is wide; one labelled block per business when narrow. */
.cx-wrap { container-type: inline-size; margin-top: .8rem; }
.cx-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
/* Reset the site-wide th look (grey fill, muted ink) so the table follows its panel. */
.cx-table th, .cx-table td { text-align: left; vertical-align: top; padding: .6rem .5rem; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); border-bottom: 0; background: none; color: inherit; border-radius: 0; font-size: inherit; }
.cx-table thead th { border-top: 0; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.cx-table th[scope="row"] { font-weight: 600; overflow-wrap: anywhere; }
.cx-table th[scope="row"] em { font-style: normal; font-weight: 500; opacity: .7; }
.cx-table tr.cx-you th, .cx-table tr.cx-you td { background: color-mix(in srgb, currentColor 6%, transparent); }
.cx-table td small { display: block; font-size: .76rem; opacity: .72; line-height: 1.35; margin-top: .15rem; overflow-wrap: anywhere; }
.cx-table .cx-none > span { opacity: .6; }
.cx-table .cx-pass > span { color: #1e8e3e; font-weight: 600; }
.cx-table .cx-fail > span { color: #d70015; font-weight: 600; }
.cx-summary { font-weight: 600; margin: .4rem 0 0; line-height: 1.45; }
.cx-date { font-size: .82rem; margin-top: .7rem; }
@container (max-width: 860px) {
  .cx-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cx-table, .cx-table tbody, .cx-table tr { display: block; }
  .cx-table tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .1rem .8rem; padding: .7rem .6rem; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); border-radius: 10px; }
  .cx-table th[scope="row"] { grid-column: 1 / -1; border: 0; padding: 0 0 .35rem; font-size: .95rem; }
  .cx-table td { border: 0; padding: .3rem 0; }
  .cx-table td::before { content: attr(data-label); display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; opacity: .6; margin-bottom: .1rem; }
  .cx-table tr.cx-you th, .cx-table tr.cx-you td { background: none; }
  .cx-table tr.cx-you { background: color-mix(in srgb, currentColor 6%, transparent); }
}