/* ==========================================================================
   CreatorSense site v2 — design system (phase 1: index.html, trace.html)
   --------------------------------------------------------------------------
   Self-contained: pages on v2 load this file instead of site.css. Brand
   tokens are unchanged (cream ground, warm ink, the coral → rose → violet →
   sky gradient, 22px radius, Fraunces / Outfit / JetBrains Mono). What is new
   is a deep "night" ink for dark bands, a deepened gradient that keeps white
   text at WCAG AA on buttons and gradient headline text, and a set of
   components every page can share.

   Sections, top to bottom:
     1. Tokens            8. Risk cards           15. Blog cards
     2. Base              9. Step timeline        16. CTA card
     3. Layout           10. Service cards        17. Footer
     4. Buttons          11. Hub diagram          18. Mocks (evidence card etc.)
     5. Header + menu    12. Compare              19. Trace widgets (scorecard,
     6. Eyebrow, heads   13. FAQ accordion            calculator, pricing, lab)
     7. Hero, chips,     14. Strip / mini cards   20. Reveal-on-scroll
        stats, cards
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --bg: #fbf8f6;
  --ink: #1c1917;
  --ink-soft: #57534e; /* body copy: 7.2:1 on cream, 6.7:1 on the tint */
  --muted: #78716c; /* brand muted: small print on cream/white only */
  --line: rgba(28, 25, 23, 0.08);
  --line-strong: rgba(28, 25, 23, 0.14);
  --white: #ffffff;
  --tint: #f6eff0; /* soft section background */

  --rose: #ff6b8a;
  --coral: #ff8f6b;
  --amber: #ffc46b;
  --violet: #b07cff;
  --sky: #6bb7ff;
  --grad: linear-gradient(120deg, var(--coral), var(--rose) 40%, var(--violet) 75%, var(--sky));
  /* Same hues, deepened so white text and gradient headline text pass AA
     (every stop is 3.9:1 or better on cream; white on each stop is 4.5:1+). */
  --grad-deep: linear-gradient(110deg, #c8502a, #c93a5e 38%, #8b4fe0 72%, #2563c9);
  --accent-ink: #6d28d9; /* eyebrow and link text on light */
  --link: #7c3aed;

  /* Night: a warm near-black with a violet lean, for dark bands and cards. */
  --night: #1b1519;
  --night-2: #251d23;
  --night-line: rgba(255, 255, 255, 0.1);
  --on-night: #f6f0ea;
  --on-night-soft: #cdc5bf; /* 10:1 on night */
  --night-glow:
    radial-gradient(60% 70% at 85% 10%, rgba(176, 124, 255, 0.22), transparent 70%),
    radial-gradient(50% 60% at 5% 100%, rgba(255, 107, 138, 0.16), transparent 70%);

  --ok: #15803d;
  --hold: #b45309;

  --radius: 22px;
  --radius-sm: 14px;
  --radius-lg: 28px;
  --shadow: 0 1px 2px rgba(28, 25, 23, 0.04), 0 14px 34px -18px rgba(60, 30, 50, 0.18);
  --shadow-lg: 0 2px 4px rgba(28, 25, 23, 0.04), 0 30px 60px -28px rgba(60, 30, 50, 0.32);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Outfit", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --max: 1160px;
  --gutter: 16px;
  --header-h: 64px;
  color-scheme: light;
}

@media (min-width: 720px) {
  :root {
    --gutter: 28px;
    --header-h: 72px;
  }
}

/* 2. Base ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
}

p {
  margin: 0 0 1rem;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid #7c3aed;
  outline-offset: 3px;
  border-radius: 6px;
}

.section-dark :focus-visible,
.site-footer :focus-visible,
.cta-card :focus-visible,
.dark-card :focus-visible {
  outline-color: #e9d5ff;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

ul,
ol {
  margin: 0;
  padding-left: 1.2rem;
}

code,
.mono {
  font-family: var(--font-mono);
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  border-radius: 12px;
  background: var(--night);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 8px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 3. Layout ---------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container--narrow {
  max-width: calc(820px + 2 * var(--gutter));
}

.section {
  padding: 4.5rem 0;
}

@media (min-width: 900px) {
  .section {
    padding: 6.5rem 0;
  }
}

.section--tight {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

/* Soft tint that fades in and out of the cream, so bands don't read as boxes. */
.section-tint {
  background: linear-gradient(
    180deg,
    var(--bg) 0,
    var(--tint) 7rem,
    var(--tint) calc(100% - 7rem),
    var(--bg) 100%
  );
}

.section-dark {
  position: relative;
  background: var(--night-glow), var(--night);
  color: var(--on-night);
  overflow: hidden;
}

.section-dark h2,
.section-dark h3 {
  color: var(--on-night);
}

.section-dark p {
  color: var(--on-night-soft);
}

.section-dark a:not(.btn) {
  color: #e9d5ff;
}

.grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 720px) {
  .grid {
    gap: 1.25rem;
  }
  .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(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.grid > * {
  min-width: 0;
}

.center {
  text-align: center;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.center .actions,
.actions--center {
  justify-content: center;
}

.section-foot {
  margin-top: 2.5rem;
  text-align: center;
}

.small {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.note {
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.section-dark .note,
.section-dark .small {
  color: var(--on-night-soft);
}

/* 4. Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.35rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: 600 1rem/1.2 var(--font-body);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition:
    box-shadow 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease;
}

.btn:hover {
  text-decoration: none;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.btn-primary {
  background: var(--grad-deep);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(201, 58, 94, 0.55);
}

.btn-primary:hover {
  box-shadow: 0 14px 30px -10px rgba(139, 79, 224, 0.55);
}

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

.btn-ghost:hover {
  border-color: rgba(124, 58, 237, 0.45);
}

/* On dark: bright brand gradient with ink text (8:1 on the coral stop). */
.btn-on-dark {
  background: var(--grad);
  color: var(--ink);
}

.btn-on-dark:hover {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);
}

.btn-ghost-dark {
  background: transparent;
  color: var(--on-night);
  border-color: rgba(255, 255, 255, 0.32);
}

.btn-ghost-dark:hover {
  border-color: rgba(255, 255, 255, 0.7);
}

.btn-sm {
  min-height: 40px;
  padding: 0.5rem 1rem;
  font-size: 0.92rem;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  color: var(--link);
}

.text-link svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* 5. Header + mobile menu ----------------------------------------------------
   Sticky white bar: wordmark, a short nav, one secondary and one primary
   button. Under 960px the nav folds into a <details> menu, so it opens and
   closes with no JavaScript. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: none;
  text-decoration: none;
}

.brand img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

/* The existing gradient wordmark, unchanged. */
.brand__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
  line-height: 1;
  color: transparent;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
}

.site-nav {
  display: none;
  align-items: center;
  gap: 0.25rem;
  margin-left: 1.5rem;
}

.site-nav a {
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.97rem;
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--ink);
  background: rgba(28, 25, 23, 0.04);
}

.site-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.site-header__login {
  display: none;
  padding: 0.5rem 0.6rem;
  color: var(--ink-soft);
  font-weight: 500;
  text-decoration: none;
}

.site-header__login:hover {
  color: var(--ink);
}

.site-header__scan {
  display: none;
}

.site-header .btn {
  min-height: 42px;
  padding: 0.55rem 1.05rem;
  font-size: 0.94rem;
  white-space: nowrap;
}

@media (max-width: 479px) {
  .brand__word {
    font-size: 1.12rem;
  }
  .brand img {
    width: 26px;
    height: 26px;
  }
  .site-header .site-header__trial {
    padding: 0.5rem 0.8rem;
    font-size: 0.86rem;
  }
}

.menu {
  position: static;
}

.menu > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1.5px solid var(--line-strong);
  background: var(--white);
  cursor: pointer;
  list-style: none;
}

.menu > summary::-webkit-details-marker {
  display: none;
}

.menu > summary svg {
  width: 22px;
  height: 22px;
}

.menu .icon-close,
.menu[open] .icon-open {
  display: none;
}

.menu[open] .icon-close {
  display: block;
}

.menu__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--header-h);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: 0.75rem var(--gutter) 1.5rem;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 40px -24px rgba(28, 25, 23, 0.3);
}

.menu__panel nav {
  display: grid;
}

.menu__panel nav a {
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 500;
  font-size: 1.05rem;
  text-decoration: none;
}

.menu__panel nav a[aria-current="page"] {
  font-weight: 700;
}

.menu__panel .actions {
  margin-top: 1rem;
}

.menu__panel .btn {
  flex: 1 1 100%;
}

@media (max-width: 379px) {
  .site-header__trial {
    display: none;
  }
}

@media (min-width: 960px) {
  .site-nav,
  .site-header__login,
  .site-header__scan {
    display: inline-flex;
  }
  .menu {
    display: none;
  }
}

/* 6. Eyebrow pill + headings ------------------------------------------------ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 1.1rem;
  padding: 0.38rem 0.8rem;
  border-radius: 999px;
  background: rgba(176, 124, 255, 0.14);
  color: var(--accent-ink);
  font: 600 0.75rem/1.2 var(--font-body);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--grad-deep);
}

.section-dark .eyebrow,
.cta-card .eyebrow,
.dark-card .eyebrow {
  background: rgba(255, 255, 255, 0.08);
  color: #e9d5ff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.section-dark .eyebrow::before,
.cta-card .eyebrow::before {
  background: var(--grad);
}

.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.06;
  font-variation-settings: "opsz" 120;
}

h1.display {
  font-size: clamp(2.45rem, 7.2vw, 4.6rem);
}

h2.display {
  font-size: clamp(2rem, 5vw, 3.25rem);
}

.display .line {
  display: block;
}

/* Second line in the accent: the deep gradient keeps AA for large text. */
.display .accent {
  display: block;
  width: fit-content;
  max-width: 100%;
  color: #8b4fe0;
  background: var(--grad-deep);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.06em;
}

.section-dark .display .accent,
.cta-card .display .accent {
  color: var(--violet);
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
}

.section-head {
  max-width: 760px;
  margin-bottom: 2.75rem;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
}

/* The accent line sizes to its text (so the whole gradient shows), which
   means it needs centring explicitly in centred heads. */
.center .display .accent {
  margin-left: auto;
  margin-right: auto;
}

.section-head .lede {
  margin-top: 1.1rem;
}

.lede {
  font-size: 1.12rem;
  color: var(--ink-soft);
  max-width: 62ch;
}

.center .lede {
  margin-left: auto;
  margin-right: auto;
}

.section-dark .lede {
  color: var(--on-night-soft);
}

/* 7. Hero, trust chips, stats, cards ---------------------------------------- */
.hero {
  position: relative;
  padding: 3.5rem 0 3rem;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 620px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(45% 55% at 15% 0%, rgba(255, 143, 107, 0.18), transparent 70%),
    radial-gradient(40% 50% at 88% 6%, rgba(176, 124, 255, 0.16), transparent 70%);
}

@media (min-width: 900px) {
  .hero {
    padding: 5.5rem 0 4rem;
  }
}

.hero .lede {
  margin-top: 1.4rem;
  font-size: clamp(1.08rem, 2.2vw, 1.25rem);
}

.hero .actions {
  margin-top: 2rem;
}

.hero-note {
  margin-top: 0.9rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

.center .chips {
  justify-content: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.85rem 0.42rem 0.6rem;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
}

.chip svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--ok);
}

.chip--plain {
  padding-left: 0.85rem;
}

/* Stats row: a figure and its label. Figures are all real (see page source). */
.stats {
  text-align: left;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 1rem;
  margin: 0;
  padding: 2rem 0 0;
}

@media (min-width: 900px) {
  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
  }
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-left: 1rem;
  border-left: 2px solid transparent;
  border-image: var(--grad-deep) 1;
}

.stat dt {
  order: 2;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.stat dd {
  order: 1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.75rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat a {
  font-size: 0.85rem;
  font-weight: 600;
}

.card {
  position: relative;
  padding: 1.6rem;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

@media (min-width: 720px) {
  .card {
    padding: 1.9rem;
  }
}

.card h3 {
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.6rem;
}

.card p,
.card li {
  color: var(--ink-soft);
  font-size: 1rem;
}

.card ul {
  display: grid;
  gap: 0.35rem;
  margin: 0.5rem 0 0;
}

.card .actions {
  margin-top: 1.25rem;
}

.card-kicker {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-ink);
}

.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1.1rem;
  border-radius: 12px;
  background: rgba(176, 124, 255, 0.12);
  color: var(--accent-ink);
}

.icon-box svg {
  width: 22px;
  height: 22px;
}

.dark-card {
  background: var(--night-glow), var(--night);
  border-color: transparent;
  color: var(--on-night);
}

.dark-card h3 {
  color: var(--on-night);
}

.dark-card p,
.dark-card li {
  color: var(--on-night-soft);
}

/* Audience split: two large link cards. */
.audience {
  display: grid;
  gap: 1rem;
}

@media (min-width: 820px) {
  .audience {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.audience-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
}

.audience-card:hover {
  text-decoration: none;
  border-color: rgba(124, 58, 237, 0.3);
}

.audience-card__art {
  position: relative;
  height: 190px;
  overflow: hidden;
  background: var(--night-glow), var(--night);
}

.audience-card--creator .audience-card__art {
  background:
    radial-gradient(70% 90% at 20% 0%, rgba(255, 143, 107, 0.35), transparent 70%),
    radial-gradient(60% 80% at 100% 100%, rgba(176, 124, 255, 0.3), transparent 70%),
    #fff4ef;
}

.audience-card__art svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.audience-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
  padding: 1.6rem;
}

@media (min-width: 720px) {
  .audience-card__body {
    padding: 2rem;
  }
}

.audience-card__who {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.audience-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.audience-card p {
  color: var(--ink-soft);
  margin: 0;
}

.audience-card .go {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.6rem;
  font-weight: 600;
  color: var(--link);
}

.audience-card .go svg {
  width: 18px;
  height: 18px;
}

/* Platforms line: plain text, never logos. */
.platforms {
  text-align: center;
}

.platforms__label {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.platforms ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.platforms li {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  color: #6b625d;
  letter-spacing: -0.01em;
}

/* 8. Risk cards ------------------------------------------------------------ */
.risk-card {
  border-top: 0;
  overflow: hidden;
}

.risk-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--grad-deep);
}

.risk-card .icon-box {
  background: rgba(201, 58, 94, 0.1);
  color: #b4234a;
}

/* 9. Step timeline ------------------------------------------------------------
   Phone: one column, numbered dots on a rail to the left. Desktop: the rail
   runs down the middle and text and visual swap sides on each step. */
.steps {
  position: relative;
  display: grid;
  gap: 2.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 19px;
  width: 2px;
  background: linear-gradient(180deg, rgba(201, 58, 94, 0.35), rgba(139, 79, 224, 0.35), rgba(37, 99, 201, 0.2));
}

.step {
  position: relative;
  display: grid;
  gap: 1.25rem;
  padding-left: 60px;
}

.step__num {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--night);
  color: #fff;
  font: 500 0.85rem/1 var(--font-mono);
  box-shadow: 0 0 0 6px var(--tint);
}

.step__text h3 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
}

.step__text p {
  color: var(--ink-soft);
  max-width: 44ch;
}

.step__visual {
  min-width: 0;
}

@media (min-width: 900px) {
  .steps {
    gap: 4rem;
  }
  .steps::before {
    left: 50%;
    margin-left: -1px;
  }
  .step {
    grid-template-columns: 1fr 1fr;
    gap: 0 7rem;
    align-items: center;
    padding-left: 0;
  }
  .step__num {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .step__text {
    grid-column: 2;
    grid-row: 1;
  }
  .step__visual {
    grid-column: 1;
    grid-row: 1;
  }
  .step:nth-child(even) .step__text {
    grid-column: 1;
    text-align: right;
  }
  .step:nth-child(even) .step__text p {
    margin-left: auto;
  }
  .step:nth-child(even) .step__visual {
    grid-column: 2;
  }
}

/* 10. Service cards (numbered) ---------------------------------------------- */
.service-card {
  display: flex;
  flex-direction: column;
}

.service-card__num {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  font: 500 0.8rem/1 var(--font-mono);
  color: var(--muted);
}

.service-card h3 {
  font-size: 1.1rem;
}

.service-card p {
  font-size: 0.97rem;
}

/* 11. Hub diagram ---------------------------------------------------------- */
.hub-band {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1000px) {
  .hub-band {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 4rem;
  }
}

.hub {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hub__core {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.hub__mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--grad);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.06),
    0 0 40px rgba(176, 124, 255, 0.45);
}

.hub__mark svg {
  width: 28px;
  height: 28px;
}

.hub__core strong {
  display: block;
  color: var(--on-night);
  font-size: 1.05rem;
}

.hub__core > div > span {
  display: block;
  color: var(--on-night-soft);
  font-size: 0.92rem;
  line-height: 1.4;
}

.hub__node {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.6);
}

.hub__node svg {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 9px;
  background: rgba(176, 124, 255, 0.14);
  color: var(--accent-ink);
}

.hub__node strong {
  display: block;
  font-size: 0.95rem;
  line-height: 1.25;
}

.hub__node span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

.hub__rings {
  display: none;
}

/* Desktop: the core in the middle of two rings, six nodes around it. */
@media (min-width: 640px) {
  .hub {
    display: block;
    aspect-ratio: 1 / 0.92;
    max-width: 600px;
    margin: 0 auto;
  }
  .hub__rings {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .hub__core {
    position: absolute;
    left: 50%;
    top: 50%;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    width: 168px;
    height: 168px;
    padding: 1rem;
    border-radius: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    background: rgba(27, 21, 25, 0.9);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.16),
      0 0 0 10px rgba(255, 255, 255, 0.03);
  }
  .hub__core strong {
    font-size: 0.95rem;
  }
  .hub__core > div > span {
    font-size: 0.76rem;
    line-height: 1.3;
  }
  .hub__mark {
    width: 54px;
    height: 54px;
    font-size: 1rem;
  }
  .hub__node {
    position: absolute;
    width: 200px;
    transform: translate(-50%, -50%);
  }
  .hub__node:nth-child(3) {
    left: 50%;
    top: 7%;
  }
  .hub__node:nth-child(4) {
    left: 84%;
    top: 28%;
  }
  .hub__node:nth-child(5) {
    left: 84%;
    top: 72%;
  }
  .hub__node:nth-child(6) {
    left: 50%;
    top: 93%;
  }
  .hub__node:nth-child(7) {
    left: 16%;
    top: 72%;
  }
  .hub__node:nth-child(8) {
    left: 16%;
    top: 28%;
  }
}

/* 12. Compare ---------------------------------------------------------------- */
.compare {
  display: grid;
  gap: 1rem;
}

@media (min-width: 820px) {
  .compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.compare__col h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  padding-bottom: 1rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--line);
}

.compare__col.dark-card h3 {
  border-bottom-color: var(--night-line);
}

.compare__col ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.compare__col li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 0.75rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.compare__col.dark-card li {
  border-bottom-color: var(--night-line);
}

.compare__col li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.compare__col li strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

.compare__col.dark-card li strong {
  color: var(--on-night);
}

.compare__col li span {
  display: block;
  font-size: 0.95rem;
}

.mark-x,
.mark-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.mark-x {
  background: rgba(28, 25, 23, 0.06);
  color: var(--muted);
}

.mark-ok {
  background: var(--grad);
  color: var(--night);
}

.mark-x svg,
.mark-ok svg {
  width: 14px;
  height: 14px;
}

/* 13. FAQ accordion (details/summary, no script) ----------------------------- */
.faq {
  display: grid;
  gap: 0.65rem;
}

.faq details {
  border-radius: var(--radius-sm);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
}

.faq details[open] {
  box-shadow: var(--shadow);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

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

.faq summary::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    linear-gradient(var(--accent-ink), var(--accent-ink)) center / 12px 2px no-repeat,
    linear-gradient(var(--accent-ink), var(--accent-ink)) center / 2px 12px no-repeat,
    rgba(176, 124, 255, 0.12);
  transition: transform 200ms ease;
}

.faq details[open] summary::after {
  background:
    linear-gradient(var(--accent-ink), var(--accent-ink)) center / 12px 2px no-repeat,
    rgba(176, 124, 255, 0.12);
}

.faq summary:focus-visible {
  border-radius: var(--radius-sm);
}

.faq__a {
  padding: 0 1.25rem 1.2rem;
  color: var(--ink-soft);
}

.faq__a p {
  max-width: 70ch;
}

/* 14. Strip / mini cards ----------------------------------------------------- */
.strip {
  display: grid;
  gap: 1rem;
  align-items: center;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
}

@media (min-width: 900px) {
  .strip {
    grid-template-columns: 0.8fr 1fr 1fr;
    gap: 1.5rem;
    padding: 1.75rem 2rem;
  }
}

.strip__title h2 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.strip__title p {
  margin-top: 0.35rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.mini {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1rem;
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.mini .icon-box {
  flex: none;
  margin: 0;
  width: 40px;
  height: 40px;
}

.mini h3 {
  font-size: 1rem;
  font-weight: 600;
}

.mini p {
  margin: 0.2rem 0 0.35rem;
  font-size: 0.93rem;
  color: var(--ink-soft);
}

.mini a {
  font-size: 0.92rem;
  font-weight: 600;
}

.mini .links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
}

/* Banner: a light, single-row call-out inside a section. */
.banner {
  display: grid;
  gap: 1.25rem;
  align-items: center;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(176, 124, 255, 0.14), transparent 70%),
    radial-gradient(50% 100% at 0% 100%, rgba(255, 143, 107, 0.14), transparent 70%),
    var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

@media (min-width: 860px) {
  .banner {
    grid-template-columns: 1fr auto;
    padding: 2.25rem 2.5rem;
    gap: 2.5rem;
  }
}

.banner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
}

.banner p {
  color: var(--ink-soft);
  max-width: 64ch;
}

/* 15. Blog cards ------------------------------------------------------------ */
.blog-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 760px) {
  .blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
}

.blog-card:hover {
  text-decoration: none;
  border-color: rgba(124, 58, 237, 0.3);
}

.blog-card__art {
  position: relative;
  height: 132px;
  overflow: hidden;
  background: var(--night-glow), var(--night);
}

.blog-card__art span {
  position: absolute;
  font: 500 0.72rem/1 var(--font-mono);
  color: rgba(255, 255, 255, 0.42);
  white-space: nowrap;
}

.blog-card__art b {
  position: absolute;
  left: 1.25rem;
  bottom: 1.1rem;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  background: var(--grad);
  color: var(--ink);
  font: 600 0.75rem/1 var(--font-mono);
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
  padding: 1.35rem 1.4rem 1.5rem;
}

.tag {
  align-self: flex-start;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(176, 124, 255, 0.12);
  color: var(--accent-ink);
  font-size: 0.76rem;
  font-weight: 600;
}

.blog-card h3 {
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.35;
}

.blog-card p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.blog-card .go {
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--link);
}

.link-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.link-list a {
  display: inline-block;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.link-list a:hover {
  border-color: rgba(124, 58, 237, 0.35);
  color: var(--accent-ink);
}

/* 16. CTA card -------------------------------------------------------------- */
.section--cta {
  padding-top: 0;
}

.cta-card {
  position: relative;
  display: grid;
  gap: 2rem;
  overflow: hidden;
  padding: 2.25rem 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--night-glow), var(--night);
  color: var(--on-night);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 900px) {
  .cta-card {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 3rem;
    padding: 3.5rem;
  }
}

.cta-card h2 {
  color: var(--on-night);
}

.cta-card p {
  color: var(--on-night-soft);
  max-width: 52ch;
}

.cta-card .lede {
  margin-top: 1rem;
  color: var(--on-night-soft);
}

.cta-card .actions {
  margin-top: 1.75rem;
}

.cta-card .small {
  margin-top: 1rem;
  color: var(--on-night-soft);
}

/* 17. Footer ----------------------------------------------------------------- */
.site-footer {
  background: var(--night-glow), var(--night);
  color: var(--on-night-soft);
  padding: 4rem 0 2rem;
  font-size: 0.95rem;
}

.site-footer a {
  color: var(--on-night);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer__grid {
  display: grid;
  gap: 2.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-footer__brand {
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 2.5rem;
  }
  .site-footer__brand {
    grid-column: auto;
  }
}

.site-footer__brand p {
  max-width: 34ch;
  margin-top: 1rem;
  color: var(--on-night-soft);
}

.site-footer__social {
  display: flex;
  gap: 1rem;
  margin-top: 1.25rem;
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  font-size: 0.88rem;
}

.site-footer h2 {
  margin: 0 0 1rem;
  color: #e9d5ff;
  font: 600 0.78rem/1.2 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-footer ul {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__abn {
  color: var(--on-night-soft);
}

.site-footer__base {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--night-line);
  font-size: 0.86rem;
}

.site-footer__base p {
  margin: 0;
  max-width: 90ch;
}

/* 18. Mocks: evidence summary, match card, file chips ----------------------------
   Illustrations built from type and shape. Each carries an "Example" tag so
   nobody reads it as a real case. */
.mock-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(28, 25, 23, 0.06);
  color: var(--ink-soft);
  font: 500 0.7rem/1.2 var(--font-mono);
  letter-spacing: 0.04em;
}

.evidence {
  position: relative;
  display: grid;
  gap: 0;
  max-width: 940px;
  margin: 3rem auto 0;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  text-align: left;
}

@media (min-width: 760px) {
  .evidence {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }
}

/* Beside text (trace.html "after a match"): always one column. */
.evidence--side {
  margin: 0;
  max-width: 560px;
  width: 100%;
  justify-self: center;
  grid-template-columns: minmax(0, 1fr) !important;
}

.evidence--side .evidence__frame {
  min-height: 190px;
}

/* The leaked frame: a dark plate with the copy's mark drawn faintly across it. */
.evidence__frame {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  background:
    radial-gradient(90% 80% at 25% 20%, #6b5b8f 0%, transparent 60%),
    radial-gradient(80% 70% at 85% 85%, #9a6b5b 0%, transparent 60%),
    linear-gradient(160deg, #2a2340, #1b1519 65%);
}

.evidence__frame .wm {
  position: absolute;
  inset: -40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  transform: rotate(-22deg);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.18em;
  color: rgba(214, 190, 255, 0.2);
  white-space: nowrap;
  text-align: center;
}

.evidence__url {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 14px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.82);
  font: 500 0.74rem/1.2 var(--font-mono);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.evidence__url i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rose);
}

.evidence__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 58%;
  height: 2px;
  background: var(--violet);
  box-shadow: 0 0 22px 6px rgba(176, 124, 255, 0.45);
}

.evidence__frame .frameref {
  position: absolute;
  left: 14px;
  bottom: 14px;
  color: rgba(255, 255, 255, 0.6);
  font: 500 0.7rem/1 var(--font-mono);
  letter-spacing: 0.08em;
}

.evidence__body {
  padding: 1.5rem;
}

@media (min-width: 760px) {
  .evidence__body {
    padding: 1.9rem 2rem;
  }
}

.evidence__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.match-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(21, 128, 61, 0.1);
  color: #166534;
  font-size: 0.85rem;
  font-weight: 600;
}

.match-pill svg {
  width: 16px;
  height: 16px;
}

.evidence__k {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.evidence__v {
  margin: 0.15rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.evidence__id {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.3rem 0.55rem;
  border-radius: 8px;
  background: rgba(176, 124, 255, 0.12);
  color: var(--accent-ink);
  font: 500 0.8rem/1.2 var(--font-mono);
}

.checks {
  display: grid;
  gap: 0.5rem;
  margin: 1.25rem 0;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.93rem;
  color: var(--ink-soft);
}

.checks svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--ok);
}

.pack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pack li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.65rem;
  border-radius: 9px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 0.84rem;
  font-weight: 500;
}

.pack svg {
  width: 15px;
  height: 15px;
  color: var(--accent-ink);
}

/* Small visuals for the timeline. */
.vis {
  padding: 1.25rem;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.vis__copies {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vis__copies li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  background: var(--bg);
}

.vis__thumb {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background:
    radial-gradient(80% 80% at 30% 20%, #8a76b3, transparent 65%),
    linear-gradient(160deg, #3a3150, #241c22);
}

.vis__copies b {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
}

.vis__copies code {
  display: block;
  font-size: 0.76rem;
  color: var(--accent-ink);
}

.vis__found {
  display: grid;
  gap: 0.7rem;
}

.vis__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  font: 500 0.78rem/1.2 var(--font-mono);
  color: var(--ink-soft);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vis__bar i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rose);
}

.vis__plate {
  height: 120px;
  border-radius: 12px;
  background:
    radial-gradient(90% 80% at 25% 20%, #6b5b8f 0%, transparent 60%),
    radial-gradient(80% 70% at 85% 85%, #9a6b5b 0%, transparent 60%),
    linear-gradient(160deg, #2a2340, #1b1519 65%);
}

.vis__match {
  display: grid;
  gap: 0.6rem;
}

.vis__match .row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.vis__match .row strong {
  color: var(--ink);
  font-weight: 600;
  text-align: right;
}

/* The copies stack on the closing CTA card. */
.copies-stack__label {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.6rem;
}

.copies-stack__label .mock-label {
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-night-soft);
}

.copies-stack {
  position: relative;
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.copies-stack li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: var(--on-night-soft);
  font-size: 0.92rem;
}

.copies-stack code {
  color: #e9d5ff;
  font-size: 0.8rem;
}

.copies-stack .is-match {
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    0 0 0 1px rgba(176, 124, 255, 0.5),
    0 18px 40px -18px rgba(176, 124, 255, 0.7);
  color: var(--on-night);
}

.copies-stack .is-match em {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--grad);
  color: var(--ink);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}

/* Is / isn't (trace.html, dark band). */
.is-isnt {
  display: grid;
  gap: 1rem;
}

.is-isnt > div {
  padding: 1.25rem 1.35rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.is-isnt h3 {
  margin-bottom: 0.4rem;
  font-size: 1rem;
  font-weight: 600;
}

.is-isnt p {
  font-size: 0.96rem;
}

/* 19. Trace widgets: hero reveal, scorecard, calculator, pricing, lab --------- */
.hero-split h1.display {
  font-size: clamp(2.4rem, 6vw, 3.75rem);
}

.hero-split {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 960px) {
  .hero-split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 4rem;
  }
}

/* The mark → leak → decode stage. Every element shows its final frame by
   default, so with no script (or reduced motion) the visitor sees the result:
   plate, the hidden mark read back, the verdict. trace-reveal.js adds
   .playing, and `animation-fill-mode: both` holds each element at its first
   keyframe until its delay passes. */
.hero-reveal {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.hero-reveal .stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #1b1726;
  box-shadow: var(--shadow-lg);
}

.hero-reveal .photo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 22% 18%, #6b5b8f 0%, transparent 55%),
    radial-gradient(100% 80% at 82% 78%, #8f6b5b 0%, transparent 60%),
    linear-gradient(160deg, #2a2340 0%, #1b1726 60%, #2b2436 100%);
}

.hero-reveal .frameref {
  position: absolute;
  left: 18px;
  top: 16px;
  z-index: 5;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.6);
}

.hero-reveal .wm {
  position: absolute;
  inset: -30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 5vw, 30px);
  transform: rotate(-24deg);
  pointer-events: none;
  font: 500 clamp(10px, 2.7vw, 13px) / 1 var(--font-mono);
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.hero-reveal .wm span {
  display: block;
  text-align: center;
}

.hero-reveal .wm--visible {
  color: var(--coral);
  opacity: 0;
}

.hero-reveal .wm--hidden {
  color: var(--violet);
  opacity: 0.85;
  text-shadow: 0 0 14px rgba(176, 124, 255, 0.6);
}

.hero-reveal .scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: 104%;
  height: 2px;
  background: var(--violet);
  box-shadow: 0 0 26px 6px rgba(176, 124, 255, 0.45);
  opacity: 0;
}

.hero-reveal .verdict {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
}

.hero-reveal .verdict-k {
  margin-bottom: 6px;
  font: 500 10px/1.2 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.hero-reveal .verdict-v {
  font: 500 15px/1.2 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--accent-ink);
}

.hero-reveal .verdict-note {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.hero-reveal .stage.playing .photo {
  animation: heroPlateIn 1.2s ease both;
}

.hero-reveal .stage.playing .frameref {
  animation: heroFadeIn 0.6s ease 0.9s both;
}

.hero-reveal .stage.playing .wm--visible {
  animation:
    heroMarkIn 1.6s ease 1.2s both,
    heroMarkOut 1.2s ease 4.4s forwards;
}

.hero-reveal .stage.playing .wm--hidden {
  /* A wipe that leaves the mark revealed: the mask is three frames tall and
     slides from its transparent end to its opaque end in step with the scan. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 64%, transparent 67%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 64%, transparent 67%);
  -webkit-mask-size: 100% 300%;
  mask-size: 100% 300%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation:
    heroHiddenOn 0.01s linear 5.6s both,
    heroSweepMask 2.8s linear 5.6s both;
}

.hero-reveal .stage.playing .scanline {
  animation: heroSweepLine 2.8s linear 5.6s both;
}

.hero-reveal .stage.playing .verdict {
  animation: heroVerdictIn 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 8.4s both;
}

@keyframes heroPlateIn {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes heroMarkIn {
  from {
    opacity: 0;
    letter-spacing: 0.34em;
  }
  to {
    opacity: 0.85;
    letter-spacing: 0.14em;
  }
}

@keyframes heroMarkOut {
  from {
    opacity: 0.85;
  }
  to {
    opacity: 0;
  }
}

@keyframes heroHiddenOn {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.85;
  }
}

@keyframes heroSweepMask {
  from {
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
  }
  to {
    -webkit-mask-position: 0 50%;
    mask-position: 0 50%;
  }
}

@keyframes heroSweepLine {
  from {
    top: -4%;
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  to {
    top: 104%;
    opacity: 0;
  }
}

@keyframes heroVerdictIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-reveal .caption {
  min-height: 3rem;
  margin: 1rem 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
  transition: opacity 0.35s ease;
}

/* Starts with class="caption show" and a fallback line in the markup, so the
   no-script view has a caption; the script swaps it beat by beat. */
.hero-reveal .caption:not(.show) {
  opacity: 0;
}

.hero-reveal .caption b {
  font-weight: 600;
  color: var(--accent-ink);
}

.hero-reveal .reveal-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.hero-reveal .beats {
  display: flex;
  flex: 1;
  gap: 5px;
}

.hero-reveal .beat {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: var(--line-strong);
  overflow: hidden;
}

.hero-reveal .beat i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--grad-deep);
}

.hero-reveal .beat.done i {
  width: 100%;
}

.hero-reveal .beat.active i {
  width: 100%;
  transition: width var(--beat-dur) linear;
}

.hero-reveal .reveal-replay {
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1.5px solid var(--line-strong);
  background: var(--white);
  color: var(--ink);
  font: 600 0.85rem/1.2 var(--font-body);
  cursor: pointer;
}

/* Replay only means something once the script has built the beat bar. */
.hero-reveal .reveal-controls:not(:has(.beat)) {
  display: none;
}

.hero-reveal .reveal-replay:hover {
  border-color: rgba(124, 58, 237, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .hero-reveal .stage.playing * {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
  .hero-reveal .beat.active i {
    transition: none;
  }
}

/* Scorecard table */
.table-scroll {
  overflow-x: auto;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.tool-table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: 0.93rem;
}

.tool-table th,
.tool-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.tool-table thead th {
  background: var(--bg);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

.tool-table tbody tr:last-child td {
  border-bottom: 0;
}

.tool-table td:first-child {
  font-weight: 500;
  color: var(--ink);
}

.sc-ok {
  color: var(--ok);
  font-weight: 600;
}

.sc-hold {
  color: var(--hold);
  font-weight: 600;
}

.sc-na {
  color: var(--muted);
}

.sc-note {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.score-cards .card h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Leak-vs-plan calculator */
.trace-eq__fields {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 720px) {
  .trace-eq__fields {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.4fr);
  }
}

.trace-eq__fields label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.trace-eq__fields input,
.trace-eq__fields select {
  width: 100%;
  min-height: 46px;
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
  border: 1.5px solid var(--line-strong);
  background: var(--white);
  font: inherit;
  font-weight: 500;
  color: var(--ink);
}

.trace-eq__fields input:focus-visible,
.trace-eq__fields select:focus-visible {
  outline-offset: 1px;
}

.card .trace-eq__result,
.trace-eq__result {
  margin: 0 0 0.65rem;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--ink);
}

.trace-eq__narrative {
  color: var(--ink-soft);
  max-width: 64ch;
}

/* Pricing (price-toggle.css still owns the toggle and the 4-plan grid) */
.card .price,
.price {
  margin: 0.25rem 0 0.5rem;
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}

.price small {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.plan-card {
  display: flex;
  flex-direction: column;
}

.plan-card .actions {
  margin-top: auto;
  padding-top: 1.25rem;
}

.plan-card .btn {
  width: 100%;
}

.grid-plans {
  margin-top: 0.5rem;
}

.band-includes {
  margin-top: 1.25rem;
}

.ext-note {
  margin-top: 0.75rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* Lab metrics strip (trace-lab-metrics.js renders into this) */
.lab-metrics__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.lab-metrics__card {
  padding: 1.2rem 1.25rem;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.lab-metrics__label {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.lab-metrics__value {
  margin: 0.35rem 0 0.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.lab-metrics__note,
.lab-metrics__foot,
.lab-metrics__loading,
.lab-metrics__empty {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.lab-metrics__foot {
  margin-top: 1rem;
  max-width: 70ch;
}

/* Consent banner (injected by analytics.js) */
.consent {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 1rem;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 44rem;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
}

.consent__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.consent__actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

.consent .btn {
  min-height: 40px;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .consent {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
  }
  .consent__actions .btn {
    flex: 1;
  }
}

/* 20. Reveal on scroll ------------------------------------------------------
   Content is visible by default. site-v2.js marks only elements that start
   below the fold as pending and reveals them as they arrive; with no script or
   with reduced motion nothing is ever hidden. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal].is-pending {
    opacity: 0;
    transform: translateY(18px);
  }
  [data-reveal].is-shown {
    opacity: 1;
    transform: none;
    transition:
      opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}