/*
 * Citedex marketing design system — the single source of truth for every
 * public surface: public/{index,scan,login,onboard}.html and the server-
 * rendered /index/:slug page in src/benchmark.ts.
 *
 * The dashboard SPA at /app is deliberately NOT on this system. It stays dark
 * and owns its tokens in app/src/styles.css. Dark appears here only as an
 * intentional motif (b-nav--dark, b-cta--dark, b-footer) so the hand-off from
 * a light marketing page into the dark app reads as one product in two modes.
 *
 * Email cannot use any of this — no external stylesheets, no CSS custom
 * properties, no @font-face survive Gmail. src/theme.ts holds the same values
 * as plain hex for that purpose, and test/theme.test.ts fails the build if the
 * two drift apart.
 *
 * Layer order below is load-bearing; keep additions in their own section.
 *   1 fonts   2 tokens   3 base   4 type   5 atoms   6 blocks   7 responsive
 */

/* ─────────────────────────────── 1. fonts ───────────────────────────────
   Self-hosted so there is no third-party request on any page. These are the
   Google Fonts latin subsets, committed as binaries — the upstream gstatic
   URLs are version-pinned (v4/v5) and will 404 on the next release.
   The sans is the real variable build (fvar/gvar/HVAR/STAT), so the 500 weight
   used by every heading is a genuine axis position, not synthetic bolding. */

@font-face {
  font-family: "Instrument Sans";
  src: url(/fonts/instrument-sans-var.woff2) format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url(/fonts/instrument-serif.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ─────────────────────────────── 2. tokens ────────────────────────────── */

:root {
  /* surfaces */
  --ds-bg: #f1f0ed;
  --ds-surface: #ffffff;
  --ds-soft: #f3f1ec;
  --ds-tint1: #efede7;
  --ds-tint2: #f0eee9;
  --ds-tint3: #edebe5;

  /* ink */
  --ds-ink: #171614;
  --ds-muted: #6e6a63;
  /* muted2 is for text at 13px and below. --ds-muted clears AA on white
     (5.38) but only scrapes it on tint3 (4.51); small text gets the margin. */
  --ds-muted2: #5c5952;
  --ds-line: #e5e1da;

  /* actions */
  --ds-btn: #171614;
  --ds-btnInk: #ffffff;
  --ds-accent: #171614;

  /* categorical — used as hairline borders and tint backgrounds, never as
     text. Measured on their own tints these run 3.65–4.73:1, which fails AA
     for the 11px surface pills, so pill text is always --ds-ink (15.7:1). */
  --ds-cmpA: #b4643c;
  --ds-cmpAbg: #f6ede7;
  --ds-cmpB: #9b5a86;
  --ds-cmpBbg: #f6ebf1;
  --ds-cmpC: #4a6b96;
  --ds-cmpCbg: #e9eff7;
  --ds-star: #c2762f;

  /* data viz. Hue, not luminance, separates owned from neutral — the two sit
     at similar lightness by design. The non-colour channel is the "you" pill
     on .row.is-you, which is what actually satisfies WCAG 1.4.1. */
  --ds-bar: #7d786f;
  --ds-barOwned: #9a5a1c;
  --ds-barTrack: #edebe5;
  --ds-pos: #2f6b4f;
  --ds-neg: #a34a18;

  /* geometry */
  --ds-r: 10px;
  --ds-rs: 8px;

  --ds-font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ds-display: "Instrument Serif", ui-serif, Georgia, serif;
}

/* ─────────────────────────────── 3. base ──────────────────────────────── */

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ds-bg);
  color: var(--ds-ink);
  font-family: var(--ds-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  opacity: 0.7;
}

/* Keyboard focus only — a visible ring on every mouse click reads as a bug to
   sighted users and is why so many sites delete :focus outright. */
:focus-visible {
  outline: 2px solid var(--ds-ink);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection {
  background: var(--ds-ink);
  color: var(--ds-btnInk);
}

img {
  max-width: 100%;
  display: block;
}

main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 96px;
}

/* Document-shaped pages — the public Index, sign-in, onboarding. A measure
   this wide keeps prose readable where there is no product UI to fill it. */
main.narrow {
  max-width: 880px;
}

/* Single-card pages (sign-in). Centres the card in whatever height is left
   below the nav without making <body> a flex container for every page. */
main.center {
  min-height: calc(100vh - 150px);
  display: grid;
  place-items: center;
  padding-top: 32px;
}

main.center > .card {
  width: 100%;
  max-width: 420px;
}

/* Page sections stack with real air between them; the bordered card inside
   each block supplies its own internal padding. The editorial look depends on
   this gap being generous — tighten it and the page reads as a dashboard. */
section {
  margin-top: 72px;
}

/* ─────────────────────────────── 4. type ──────────────────────────────── */

h1,
h2,
h3 {
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(34px, 5vw, 54px);
  letter-spacing: -0.04em;
  line-height: 1.02;
}

h2 {
  font-size: clamp(26px, 3.2vw, 38px);
}

h3 {
  font-size: 15px;
  letter-spacing: -0.01em;
  font-weight: 600;
}

/* The small uppercase label that sits above a heading. Carries the section's
   Search Console noun (PROPERTIES / QUERIES / COVERAGE) on the landing page. */
.kicker {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ds-muted2);
}

.lede {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.6;
  color: var(--ds-muted);
  max-width: 58ch;
  margin: 0;
  text-wrap: pretty;
}

.sub {
  color: var(--ds-muted);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

.hint {
  color: var(--ds-muted2);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

.fineprint {
  color: var(--ds-muted2);
  font-size: 13px;
  line-height: 1.55;
}

.muted {
  color: var(--ds-muted);
}

.wordmark {
  font-family: var(--ds-display);
  font-size: 23px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ds-ink);
}

.wordmark span {
  font-style: italic;
}

/* ────────────────────────────── 5. atoms ──────────────────────────────
   These class names predate the redesign and are emitted from ~15 template
   -literal sites inside scan.html's render(). They are lifted here verbatim
   with light values precisely so that rendering code needs no string edits.
   Renaming any of them means editing generated markup — don't. */

.card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r);
  padding: 28px 30px;
}

.card > h2 {
  font-size: 19px;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}

.card > .hint {
  margin: 0 0 18px;
}

/* a data row: label · bar · value */
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--ds-line);
}

.row:first-of-type {
  border-top: 0;
}

.name {
  width: 160px;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 7px;
}

.bar {
  flex: 1;
  height: 22px;
  min-width: 60px;
  background: var(--ds-barTrack);
  border-radius: 4px;
  overflow: hidden;
}

.bar > i {
  display: block;
  height: 100%;
  background: var(--ds-bar);
  border-radius: 4px;
}

.bar.owned > i {
  background: var(--ds-barOwned);
}

.val {
  width: 78px;
  text-align: right;
  flex-shrink: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ds-muted2);
}

/* "your brand". The owned bar is a hue shift, not a luminance one, so colour
   alone cannot carry this meaning (WCAG 1.4.1) — the pill is the real channel.
   It is deliberately REAL markup (<span class="you">you</span>) rather than
   ::after content: generated content is presentation-layer, isn't selectable,
   and vanishes with the stylesheet. The one label that says "this row is you"
   should not depend on a CSS file loading. */
.you {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--ds-cmpAbg);
  border: 1px solid var(--ds-star);
  color: var(--ds-ink);
}

/* Engine-surface label. HANDOFF decision #4: every metric is labelled by the
   surface it came from, and that rule is non-negotiable. Text is always ink
   on a tint so the 11px size still clears AA; the hue lives in the border. */
.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  padding: 1px 7px;
  border-radius: 5px;
  background: var(--ds-tint1);
  border: 1px solid var(--ds-line);
  color: var(--ds-ink);
  white-space: nowrap;
  /* Several blocks (b-tiles, b-badges) lay their children out with grid, whose
     default `stretch` turns an inline-block pill into a full-width bar. This
     keeps a pill pill-shaped wherever it lands; ignored outside grid. */
  justify-self: start;
}

.tag.synthetic {
  background: var(--ds-cmpBbg);
  border-color: var(--ds-cmpB);
}

.tag.api {
  background: var(--ds-cmpCbg);
  border-color: var(--ds-cmpC);
}

/* Previously undefined on /scan while the dashboard styled it — a `web`
   surface silently rendered as a neutral pill on the funnel page only. */
.tag.web {
  background: var(--ds-cmpAbg);
  border-color: var(--ds-cmpA);
}

.kpi {
  font-size: clamp(32px, 4.5vw, 46px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.kpi small {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ds-muted);
}

.kpi-price {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.kpi-price span {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ds-muted);
}

/* present / absent, as pills rather than ✓ and ✗ — those glyphs fall outside
   the latin subset and would silently render in the system font. */
.yes,
.no {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.yes {
  background: #e6f0ea;
  border: 1px solid var(--ds-pos);
  color: var(--ds-ink);
}

.no {
  background: var(--ds-tint3);
  border: 1px solid var(--ds-line);
  color: var(--ds-muted2);
}

.err {
  color: var(--ds-neg);
  font-size: 14px;
  min-height: 20px;
}

.note {
  background: var(--ds-tint1);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-rs);
  padding: 14px 16px;
  color: var(--ds-muted);
  font-size: 13.5px;
}

.spacer {
  flex: 1;
}

/* Vertical rhythm for generated card lists (the scan report). Uses grid gap
   rather than margins so the markup stays free of spacing concerns.
   .hidden carries !important precisely so it still wins over these. */

.stack-lg {
  display: grid;
  gap: 44px;
}

.hidden {
  display: none !important;
}

/* buttons */

.btn,
.cta,
button.btn {
  display: inline-block;
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 12px 22px;
  border-radius: var(--ds-rs);
  border: 1px solid var(--ds-btn);
  background: var(--ds-btn);
  color: var(--ds-btnInk);
  cursor: pointer;
  text-align: center;
  transition: opacity 0.15s ease;
}

.btn:hover,
.cta:hover {
  opacity: 0.85;
}

.btn.ghost {
  background: transparent;
  border-color: var(--ds-line);
  color: var(--ds-ink);
}

.btn.ghost:hover {
  background: var(--ds-tint1);
  opacity: 1;
}

.btn:disabled,
.cta:disabled,
button:disabled {
  opacity: 0.45;
  cursor: default;
}

.btn.block {
  display: block;
  width: 100%;
}

/* forms */

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 16px 0 6px;
}

input,
select,
textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 11px 13px;
  border-radius: var(--ds-rs);
  border: 1px solid var(--ds-line);
  background: var(--ds-surface);
  color: var(--ds-ink);
}

input::placeholder {
  color: #9c968c;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--ds-ink);
  outline-offset: -1px;
  border-color: var(--ds-ink);
}

/* Turnstile injects a 300×65 iframe after first paint. Reserving the box keeps
   the submit button from jumping under the cursor. */
#turnstileBox {
  margin-top: 18px;
  min-height: 65px;
}

/* tables */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

th,
td {
  text-align: left;
  padding: 11px 12px;
  border-top: 1px solid var(--ds-line);
  vertical-align: top;
}

th {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-muted2);
  border-top: 0;
  white-space: nowrap;
}

td.mono {
  font-variant-numeric: tabular-nums;
}

.table-wrap {
  overflow-x: auto;
}

/* waiting / progress */

.spin {
  text-align: center;
  padding: 60px 20px;
}

.spin .big {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 500;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}

.steps {
  display: grid;
  gap: 2px;
  max-width: 420px;
  margin: 26px auto 0;
  text-align: left;
}

.steps div {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 2px;
  border-top: 1px solid var(--ds-line);
  font-size: 14px;
  color: var(--ds-muted);
}

.steps div:first-child {
  border-top: 0;
}

/* Replaces the ◌ / ⏳ / ✕ glyphs, which are outside the latin subset. */
.steps div::before {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  border: 1.5px solid var(--ds-line);
  background: transparent;
}

.steps div.done {
  color: var(--ds-ink);
}

.steps div.done::before {
  background: var(--ds-pos);
  border-color: var(--ds-pos);
}

.steps div.failed {
  color: var(--ds-neg);
}

.steps div.failed::before {
  background: var(--ds-neg);
  border-color: var(--ds-neg);
}

/* Loading placeholder for the live-data panels. A failed fetch on a light
   editorial layout leaves a large empty bordered rectangle; skeleton rows make
   the pending state legible and the honest-failure copy handles the rest. */
.skel {
  display: block;
  height: 22px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--ds-tint3) 0%,
    var(--ds-tint1) 50%,
    var(--ds-tint3) 100%
  );
  background-size: 200% 100%;
  animation: skelPulse 1.4s ease-in-out infinite;
}

@keyframes skelPulse {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skel {
    animation: none;
  }
  * {
    transition-duration: 0.01ms !important;
  }
}

/* ────────────────────────────── 6. blocks ─────────────────────────────── */

/* nav */

.b-nav {
  border-bottom: 1px solid var(--ds-line);
  background: var(--ds-bg);
  position: sticky;
  top: 0;
  z-index: 50;
}

.b-nav .inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 15px 24px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.b-nav .links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--ds-muted);
}

/* The last page before the jump into the dark /app. Wearing the dark nav here
   makes that transition read as one system rather than two products. */
.b-nav--dark {
  background: var(--ds-ink);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.b-nav--dark .logo,
.b-nav--dark .wordmark {
  color: #fff;
}

.b-nav--dark .links {
  color: rgba(255, 255, 255, 0.66);
}

.b-nav--dark .btn {
  background: #fff;
  border-color: #fff;
  color: var(--ds-ink);
}

/* hero */

.b-hero {
  padding: 84px 0 40px;
  display: grid;
  gap: 22px;
  justify-items: center;
  text-align: center;
}

/* Long headlines read better broken by measure than by column width. */
.b-hero h1 {
  max-width: 17ch;
}

.b-hero .lede {
  max-width: 52ch;
  text-align: center;
}

.b-hero .ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Split hero: copy at 5/12, a form or live product surface at 7/12.
   Top-aligned, not centred — the right column is usually much taller, and
   centring leaves the copy floating in the middle of the viewport. */
.b-split {
  padding: 60px 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: start;
}

.b-split .copy {
  display: grid;
  gap: 18px;
  justify-items: start;
}

.b-split .ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Announcement / status pill above a hero headline. */
.b-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  padding: 5px 12px 5px 6px;
  border-radius: 999px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  color: var(--ds-muted);
}

.b-eyebrow b {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ds-tint1);
  color: var(--ds-ink);
  font-size: 11px;
  font-weight: 600;
}

/* engine strip — the text-only equivalent of a logo wall */

.b-strip {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r);
  background: var(--ds-surface);
  padding: 26px 24px;
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
}

.b-strip .items {
  display: flex;
  gap: 14px 30px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.b-strip .items > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* section head — kicker + heading + optional lede */

.b-head {
  display: grid;
  gap: 11px;
  margin-bottom: 24px;
}

.b-head.center {
  justify-items: center;
  text-align: center;
}

/* icon feature tiles — hairline grid, no card shadows */

.b-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--ds-line);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-rs);
  overflow: hidden;
}

.b-tiles > div {
  background: var(--ds-surface);
  padding: 26px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.b-tiles .n {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--ds-tint1);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ds-muted2);
}

/* comparison / tinted card columns */

.b-cmp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}

.b-cmp > div {
  padding: 26px;
  border-radius: var(--ds-rs);
  border: 1px solid var(--ds-line);
  background: var(--ds-soft);
  display: grid;
  gap: 9px;
  align-content: start;
}

.b-cmp > div.t1 {
  background: var(--ds-cmpAbg);
}

.b-cmp > div.t2 {
  background: var(--ds-cmpBbg);
}

.b-cmp > div.t3 {
  background: var(--ds-cmpCbg);
}

/* The one highlighted column (the Growth tier). Ink, not colour — colour is
   already doing categorical work elsewhere on the page. */
.b-cmp > div.featured {
  border-color: var(--ds-ink);
  border-width: 1.5px;
  background: var(--ds-surface);
}

/* ledger — claim left, oversized figure right, hairline between */

.b-ledger {
  display: grid;
}

.b-ledger > div {
  display: flex;
  gap: 20px;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 20px 0;
  border-top: 1px solid var(--ds-line);
}

.b-ledger > div:first-child {
  border-top: 0;
}

.b-ledger .claim {
  font-size: 14.5px;
  color: var(--ds-muted);
  max-width: 46ch;
}

.b-ledger .fig {
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 500;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* An honestly empty figure: an em-dash plus what it would take to fill it.
   This replaces the blurred fake numbers the scan upsell used to show. */
.b-ledger .fig.empty {
  color: #b8b2a7;
}

.needs {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 3px 9px;
  margin-left: 10px;
  border-radius: 999px;
  background: var(--ds-tint1);
  border: 1px solid var(--ds-line);
  color: var(--ds-muted2);
  white-space: nowrap;
  vertical-align: middle;
}

/* 3-up stat row */

.b-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--ds-line);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-rs);
  overflow: hidden;
}

.b-stats > div {
  background: var(--ds-surface);
  padding: 22px 24px;
  display: grid;
  gap: 4px;
}

/* surface-honesty badges */

.b-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px;
}

.b-badges > div {
  padding: 20px 22px;
  border-radius: var(--ds-rs);
  border: 1px solid var(--ds-line);
  background: var(--ds-surface);
  display: grid;
  gap: 8px;
  align-content: start;
}

/* FAQ — native <details>, no JavaScript */

.b-faq > details {
  border-top: 1px solid var(--ds-line);
}

.b-faq > details:last-of-type {
  border-bottom: 1px solid var(--ds-line);
}

.b-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 2px;
  cursor: pointer;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  list-style: none;
}

.b-faq summary::-webkit-details-marker {
  display: none;
}

.b-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  color: var(--ds-muted);
  transition: transform 0.2s ease;
}

.b-faq details[open] summary::after {
  transform: rotate(45deg);
}

.b-faq .answer {
  margin: 0;
  padding: 0 2px 22px;
  max-width: 68ch;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ds-muted);
  text-wrap: pretty;
}

/* closing CTA */

.b-cta {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r);
  background: var(--ds-soft);
  padding: 56px 28px;
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
}

.b-cta--dark {
  background: var(--ds-ink);
  border-color: var(--ds-ink);
  color: #fff;
  padding: 44px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  text-align: left;
}

.b-cta--dark .sub,
.b-cta--dark .muted {
  color: rgba(255, 255, 255, 0.62);
}

.b-cta--dark .btn {
  background: #fff;
  border-color: #fff;
  color: var(--ds-ink);
}

/* footer */

.b-footer {
  background: var(--ds-ink);
  color: #fff;
  margin-top: 72px;
}

.b-footer .inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 24px 28px;
  display: grid;
  gap: 38px;
}

.b-footer .cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 32px;
}

.b-footer .brand {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 200px;
}

.b-footer .brand .logo,
.b-footer .brand .wordmark {
  color: #fff;
}

.b-footer .brand p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
  max-width: 32ch;
}

.b-footer .col {
  display: grid;
  gap: 9px;
  align-content: start;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.6);
}

.b-footer .col b {
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.b-footer .legal {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.45);
}

/* Onboarding's deselectable library. Not `.row` + `.name`: that pair fixes the
   label column at 160px, which is right for a brand leaderboard and useless for
   a 90-character buyer question. Deliberately a <label> wrapping its own
   checkbox, so the whole row is the hit target. */

.pick {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 2px;
  border-top: 1px solid var(--ds-line);
  cursor: pointer;
  font-size: 13.5px;
  line-height: 1.45;
  /* `label` is styled as a form caption in section 5; undo that here. */
  margin: 0;
  color: var(--ds-ink);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.pick:first-of-type {
  border-top: 0;
}

.pick input {
  /* Section 5 makes every input full-width and boxed. */
  width: auto;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  flex-shrink: 0;
  accent-color: var(--ds-ink);
}

/* Struck through rather than hidden, so deselecting shows what you gave up. */
.pick input:not(:checked) ~ .pick-text {
  color: var(--ds-muted);
  text-decoration: line-through;
}

.pick-text {
  flex: 1;
  min-width: 0;
}

.pick-text .tag {
  margin-left: 7px;
  vertical-align: 1px;
}

.pick-domain {
  color: var(--ds-muted2);
  font-size: 12.5px;
}

.pick-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 22px 0 2px;
}

.pick-head h2 {
  margin: 0;
  font-size: 15px;
}

.pick-head .count {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--ds-muted2);
  font-variant-numeric: tabular-nums;
}

/* The closing receipt. A verbatim engine sentence, which is the one thing the
   product has that its competitors don't — so onboarding ends on it rather than
   on an empty dashboard. */

.receipt {
  border-left: 2px solid var(--ds-star);
  background: var(--ds-soft);
  border-radius: var(--ds-rs);
  padding: 14px 16px;
  margin: 16px 0;
}

.receipt blockquote {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.55;
}

.receipt .meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ds-muted2);
}

/* ──────────────────────────── 7. responsive ───────────────────────────── */

@media (max-width: 860px) {
  .b-split {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 44px;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 15px;
  }

  main {
    padding: 0 18px 72px;
  }

  .b-nav .inner {
    padding: 13px 18px;
    gap: 14px;
  }

  .card {
    padding: 22px 18px;
  }

  .b-hero {
    padding: 48px 0 16px;
  }

  .b-cta {
    padding: 40px 20px;
  }

  .b-cta--dark {
    padding: 32px 22px;
  }

  .b-footer .inner {
    padding: 38px 18px 24px;
  }

  /* The label column is a fixed 160px, which at 320px leaves nothing for the
     bar. Below this width the row becomes label-over-bar. */
  .row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .name {
    width: 100%;
  }

  .val {
    width: auto;
    min-width: 56px;
  }
}

@media print {
  .b-nav,
  .b-cta,
  .b-cta--dark,
  .b-footer,
  .btn,
  .cta {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .card {
    break-inside: avoid;
  }
}