/* =============================================================
   Coherence & Security page — composed layout on NC tokens
   Loaded after styles.css; reuses :root design tokens.
   Namespace: .cs-
   ============================================================= */
.cs {
  --cs-max: var(--container-inner);
  /* The page's two accents (docs/_as/colors.html): green 152 and amber 75.
     The bright pair is for dark surfaces, the -ink pair for paper. */
  --cs-green: oklch(0.8 0.19 152);
  --cs-amber: oklch(0.85 0.19 75);
  --cs-green-ink: #2B9E60;
  --cs-amber-ink: #C47727;
}
.cs-section { padding: var(--space-8) var(--gutter) 0; }
.cs-section--tight { padding-top: var(--space-7); }
/* Sections with no framed panel of their own need the breathing room a panel
   would have supplied, or they read as part of the section above. */
.cs-section--airy {
  padding-top: calc(var(--space-8) + var(--space-6));
  padding-bottom: var(--space-6);
}

/* ---------- Section heads ---------- */
.cs-head { max-width: 700px; }
/* For headings long enough that 700px forces a second line. */
.cs-head--wide { max-width: 900px; }
.cs-head--center { margin-inline: auto; text-align: center; }
.cs-head--center .cs-sub { margin-inline: auto; }

.cs-h2 {
  font-family: var(--font-title); font-weight: 700;
  font-size: var(--fs-h2); letter-spacing: -0.02em; line-height: 1.01;
  text-wrap: balance;
  margin: var(--space-3) 0 0;
}
.cs-h2 em { font-style: normal; }
.cs-h2--bright { color: var(--color-on-dark); }
.cs-h2--bright em { font-style: normal; }
.cs-sub {
  font-size: var(--fs-lead); line-height: 1.6; color: var(--color-ink-60);
  max-width: 620px; margin: var(--space-3) 0 0;
}
.cs-sub--bright { color: var(--color-on-dark-muted); }

/* ---------- Reveal on scroll ----------
   Scroll-driven, CSS-only. Where `view()` timelines aren't supported the rule
   never applies, so content is simply always visible — there is no state in
   which an element can stay hidden. Elements already on screen at load are
   past the animation range, so they paint at their end state. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cs [data-reveal] {
      animation: cs-rise linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 55%;
    }
  }
}
@keyframes cs-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* =============================================================
   HERO
   ============================================================= */
.cs-hero {
  position: relative; overflow-x: clip; text-align: left;
  max-width: none;
  /* No bottom padding: the card ends the hero, and the next section's own
     padding-top is the gap below it (hero-panel skill). */
  padding: calc(var(--header-height) + var(--space-5)) var(--gutter) 0;
  /* The clip keeps the main glows off the next section. The margin is
     generous enough to hold the corner accent's visible falloff — that
     blob's box runs to 74vw, but its gradient is already transparent past
     ~58% of its own radius, so the hard box edge that the margin would
     otherwise clip is invisible anyway.
     X-only: clipping both axes (`overflow: clip`) let this margin leak into
     the page's real horizontal scroll width on narrow viewports. Dropping
     the Y clip removes the vertical hard edge entirely rather than just
     pushing it out, which only makes the shadow/glow bleed more visible. */
  overflow-clip-margin: 420px;
}
.cs-hero__glow, .cs-hero__glow--b, .cs-hero__glow--c, .cs-hero__glow--corner {
  position: absolute; z-index: 0; pointer-events: none;
}
/* Literal copy of home's hero glow recipe (css/styles.css .hero__glow /
   --lime / --violet), per the "Background glow gradient" rule — position,
   size, timing, keyframe percentage steps, hue-drift deltas, alphas and
   stop percentages are all identical to home's; only the two hues (152deg
   green, 75deg yellow-green, from docs/_as/colors.html) and the pastel
   oklch register (L 0.9, C ~0.1-0.12) are page-specific — see
   css/resources.css for the confirmed-working reference. */
.cs-hero__glow {
  top: -24%; right: -42%;
  width: 100vw; height: 100vh;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.9 0.12 var(--g-h1, 152deg) / 0.85),
    oklch(0.9 0.1 var(--g-h2, 75deg) / 0.4) 46%,
    transparent 72%
  );
  animation:
    cs-glow-morph 11s ease-in-out infinite,
    cs-glow-float 17s ease-in-out infinite;
}
@keyframes cs-glow-morph {
  0%, 100% { --g-h1: 152deg; --g-h2: 75deg; --g-w: 44%; --g-h: 54%; --g-x: 46%; --g-y: 54%; }
  30%      { --g-h1: 188deg; --g-h2: 97deg; --g-w: 66%; --g-h: 42%; --g-x: 60%; --g-y: 40%; }
  62%      { --g-h1: 126deg; --g-h2: 49deg; --g-w: 42%; --g-h: 64%; --g-x: 40%; --g-y: 60%; }
}
@keyframes cs-glow-float {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);    filter: hue-rotate(0deg)  saturate(1); }
  50%      { transform: scale(1.22) translate3d(-8%, 6%, 0); filter: hue-rotate(14deg) saturate(1.1); }
}
/* Bottom-left blob: green on its own, home's lime formula and delta shape. */
.cs-hero__glow--b {
  top: auto; right: auto;
  bottom: -20%; left: -22%;
  width: 60vw; height: 60vh;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.9 0.12 var(--g-h1, 152deg) / 0.4),
    transparent 66%
  );
  animation:
    cs-glow-morph-b 14s ease-in-out -5s infinite,
    cs-glow-float-b 21s ease-in-out -9s infinite;
}
@keyframes cs-glow-morph-b {
  0%, 100% { --g-h1: 152deg; --g-w: 46%; --g-h: 46%; --g-x: 50%; --g-y: 50%; }
  40%      { --g-h1: 184deg; --g-w: 68%; --g-h: 56%; --g-x: 60%; --g-y: 42%; }
  72%      { --g-h1: 130deg; --g-w: 42%; --g-h: 66%; --g-x: 40%; --g-y: 58%; }
}
@keyframes cs-glow-float-b {
  0%, 100% { transform: scale(1.06) translate3d(0, 0, 0);    filter: hue-rotate(0deg)   saturate(1); }
  50%      { transform: scale(0.84) translate3d(9%, -7%, 0); filter: hue-rotate(-12deg) saturate(1.12); }
}
/* Top-centre blob: yellow-green on its own, home's violet slot (position +
   timing) carrying a single-hue fade instead of a blend. */
.cs-hero__glow--c {
  top: -26%; left: 52%; right: auto; bottom: auto;
  width: 44vw; height: 44vh;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.9 0.1 var(--g-h1, 75deg) / 0.28),
    transparent 64%
  );
  animation:
    cs-glow-morph-c 18s ease-in-out -7s infinite,
    cs-glow-float-c 26s ease-in-out -13s infinite;
}
@keyframes cs-glow-morph-c {
  0%, 100% { --g-h1: 75deg; --g-w: 48%; --g-h: 48%; --g-x: 50%; --g-y: 50%; }
  38%      { --g-h1: 51deg; --g-w: 70%; --g-h: 42%; --g-x: 40%; --g-y: 58%; }
  70%      { --g-h1: 95deg; --g-w: 42%; --g-h: 60%; --g-x: 60%; --g-y: 44%; }
}
@keyframes cs-glow-float-c {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);     filter: hue-rotate(0deg)   saturate(1);   opacity: 1; }
  45%      { transform: scale(1.28) translate3d(-9%, 5%, 0);   filter: hue-rotate(-10deg) saturate(1.1); opacity: 0.7; }
}
/* Mandatory corner-seam accent: centred exactly where the hero ends and the
   next section begins (bottom-right), a quiet echo of the green wash. */
.cs-hero__glow--corner {
  top: auto; left: auto;
  bottom: -37vw; right: -37vw; width: 74vw; height: 74vw;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.9 0.12 var(--g-h1, 152deg) / 0.15),
    transparent 60%
  );
  animation:
    cs-glow-morph-corner 8s ease-in-out -4s infinite,
    cs-glow-float-corner 11s ease-in-out -8s infinite;
}
@keyframes cs-glow-morph-corner {
  0%, 100% { --g-h1: 152deg; --g-w: 46%; --g-h: 46%; --g-x: 50%; --g-y: 50%; }
  50%      { --g-h1: 174deg; --g-w: 55%; --g-h: 37%; --g-x: 40%; --g-y: 60%; }
}
@keyframes cs-glow-float-corner {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);    filter: saturate(1); }
  50%      { transform: scale(1.15) translate3d(9%, -6%, 0); filter: saturate(1.05); }
}

/* Mandatory mobile override: desktop's percentage-based blob positions
   clip away on a narrow screen. */
@media (max-width: 900px) {
  .cs-hero {
    background:
      radial-gradient(120% 70% at 85% 0%, oklch(0.9 0.12 152 / 0.28), transparent 62%),
      radial-gradient(90% 55% at 10% 35%, oklch(0.9 0.1 75 / 0.19), transparent 58%),
      radial-gradient(80% 50% at 70% 18%, oklch(0.9 0.12 152 / 0.08), transparent 55%),
      var(--color-paper);
  }
  .cs-hero__glow {
    top: -8%; right: -28%; width: 100vh; height: 100vh; opacity: 1;
    background: radial-gradient(
      var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
      oklch(0.9 0.12 var(--g-h1, 152deg) / 0.45),
      oklch(0.9 0.1 var(--g-h2, 75deg) / 0.22) 42%,
      transparent 70%
    );
  }
  .cs-hero__glow--b {
    top: auto; right: auto;
    bottom: 18%; left: -35%; width: 85vh; height: 85vh;
    background: radial-gradient(
      var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
      oklch(0.9 0.12 var(--g-h1, 152deg) / 0.28),
      transparent 68%
    );
  }
  .cs-hero__glow--c {
    top: 4%; left: 42%; width: 65vh; height: 65vh;
    background: radial-gradient(
      var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
      oklch(0.9 0.1 var(--g-h1, 75deg) / 0.16),
      transparent 66%
    );
  }
}
/* Hero card (hero-panel skill): the whole hero sits on one dark inset panel,
   capped at the content width and rounded like the closing CTA panel, per the
   "Section backgrounds never go full-bleed" rule. The pastel page glows above
   stay on the section and read around the panel; inside, a darker wash in the
   page's own two hues (152 green, 75 yellow-green) behind the copy. */
.cs-hero__panel {
  position: relative; z-index: 1; overflow: hidden;
  max-width: var(--cs-max); margin-inline: auto;
  background: var(--color-ink); color: var(--color-on-dark);
  border-radius: var(--radius-xl);
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
}
.cs-hero__wash {
  position: absolute; z-index: 0; pointer-events: none;
  /* Fade the box itself to transparent before its edge: the morph moves the
     gradient centre off-centre, and a clipped edge would show as a hard arc. */
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  top: -40%; left: -20%; width: 70vw; height: 70vw;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.72 0.17 var(--g-h1, 152deg) / 0.28),
    oklch(0.8 0.16 var(--g-h2, 75deg) / 0.12) 46%,
    transparent 70%
  );
  animation:
    cs-wash-morph 9s ease-in-out -3s infinite,
    cs-wash-float 13s ease-in-out -7s infinite;
}
@keyframes cs-wash-morph {
  0%, 100% { --g-h1: 152deg; --g-h2: 75deg; --g-w: 46%; --g-h: 56%; --g-x: 50%; --g-y: 46%; }
  50%      { --g-h1: 75deg; --g-h2: 152deg; --g-w: 56%; --g-h: 42%; --g-x: 66%; --g-y: 62%; }
}
@keyframes cs-wash-float {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);    filter: saturate(1); }
  50%      { transform: scale(1.18) translate3d(-8%, 8%, 0); filter: saturate(1.1); }
}
/* Copy takes the wider column; both columns centre on one midline. The wide
   gutter keeps the copy and the scan panel reading as two separate things. */
.cs-hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(3rem, 7vw, 6.5rem); align-items: center;
}

.cs-hero__title {
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(2.5rem, 4.4vw, 4.25rem);
  line-height: 0.9; letter-spacing: -0.045em;
  color: var(--color-on-dark);
  margin: var(--space-4) 0 0; max-width: none; text-wrap: balance;
}
.cs-hero__title em { font-style: normal; }
/* "Coherence" in the hero title: a dashed rule under the word marks it as a
   defined term, and hover or keyboard focus opens a white tooltip with the
   definition. The rule is a border, so it stays the title's own ink color. */
.cs-term {
  position: relative; display: inline-block; cursor: help;
  line-height: 1.05; outline: none;
}
/* Dotted hint line, pulled up to sit just under the letters (the inline
   box's bottom edge leaves a descender-sized gap below "Coherence"). */
.cs-term::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.1em;
  border-bottom: 3px dotted color-mix(in srgb, var(--color-on-dark) 60%, transparent);
  pointer-events: none;
}
.cs-term:focus-visible::after { border-bottom-style: solid; }
.cs-term__tip {
  position: absolute; z-index: 5; top: calc(100% + 2px); left: 0;
  width: min(320px, 78vw); padding: 12px 14px;
  background: #fff; color: var(--color-ink);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 400;
  line-height: 1.5; letter-spacing: 0; text-transform: none; white-space: normal;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
  pointer-events: none;
}
.cs-term:hover .cs-term__tip,
.cs-term:focus .cs-term__tip {
  opacity: 1; visibility: visible; transform: none;
}
/* Punch line under the service name. Same flat on-dark colour as the title;
   size alone separates them. */
.cs-hero__deck {
  font-family: var(--font-title); font-weight: 600;
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  line-height: 1.03; letter-spacing: -0.03em;
  color: var(--color-on-dark);
  max-width: none; text-wrap: pretty; margin: var(--space-4) 0 0;
}
.cs-hero__deck em { font-style: normal; }
.cs-hero__lead {
  font-size: var(--fs-lead); line-height: 1.6; color: var(--color-on-dark-muted);
  max-width: 48ch; margin: var(--space-4) 0 0; text-wrap: pretty;
}
.cs-hero__lead strong { color: var(--color-on-dark); font-weight: 600; }
.cs-hero__cta { margin-top: var(--space-6); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
/* Eyebrow with the Lovable partner pill on the same line, to its right.
   The pill is ink on ink here, so it gets a flat outline instead of
   disappearing into the card. */
.cs-hero__top {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.cs-hero__top .cs-eyebrow { margin: 0; }
.cs-hero__top .hero__trust-chip {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 6px 14px;
}

/* ---------- Scan panel (hero visual) ----------
   Wireframe (hero-panel skill): on the dark card every surface is a 1px line,
   no grey fills, no inner wash, no drop shadow. Colour only marks meaning:
   the severity of each finding and the scan status. */
.cs-visual {
  position: relative; display: flex;
  width: 100%; margin-left: auto;
  --cs-line: rgba(255, 255, 255, 0.18);
  --cs-wire: 1px solid rgba(255, 255, 255, 0.16);
}
.cs-scan {
  position: relative; z-index: 2; overflow: hidden;
  flex: 1 1 auto; display: flex; flex-direction: column;
  background: transparent; color: var(--color-on-dark);
  border: 1px solid var(--cs-line);
  border-radius: var(--radius-lg);
}
.cs-scan__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 18px; border-bottom: 1px solid var(--cs-line);
  background: transparent;
}
.cs-scan__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.3);
}
.cs-scan__file {
  margin-left: 6px; font-family: var(--font-mono); font-size: 0.6875rem;
  color: var(--color-on-dark-muted); letter-spacing: 0.02em;
}
.cs-scan__live {
  margin-left: auto;
  font-family: var(--font-title); font-size: var(--fs-label-xs); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-secondary-lime);
}

.cs-scan__body {
  position: relative; flex: 1 0 auto;
  display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(180px, 22vw, 300px);
  padding: 10px 18px;
}
/* The scan line: a bright green rule travelling down the findings, with a
   soft glow around it and a faint trail above it. The box is the full body
   with the line on its bottom edge, so one -100% to 0 travel covers the
   panel whatever height it ends up at. */
.cs-scan__sweep {
  position: absolute; inset: 0; pointer-events: none;
  animation: cs-sweep 4.6s var(--ease) infinite;
}
.cs-scan__sweep::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 64px;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--color-secondary-green) 22%, transparent),
    transparent);
}
.cs-scan__sweep::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: color-mix(in srgb, var(--color-secondary-green) 60%, white);
  box-shadow:
    0 0 6px 1px color-mix(in srgb, var(--color-secondary-green) 80%, transparent),
    0 0 18px 3px color-mix(in srgb, var(--color-secondary-green) 45%, transparent);
}
@keyframes cs-sweep {
  0% { transform: translateY(-100%); opacity: 0; }
  12% { opacity: 1; }
  86% { transform: translateY(-2%); opacity: 1; }
  100% { transform: translateY(0); opacity: 0; }
}

.cs-find {
  flex: 0 0 auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 14px;
  padding: 13px 0; border-bottom: var(--cs-wire);
}
.cs-find:last-of-type { border-bottom: 0; }
/* On load the findings arrive one by one, the way results stream in from a
   real scan, then the footer verdict. Child 1 is the sweep, so rows start at 2. */
@media (prefers-reduced-motion: no-preference) {
  .cs-find, .cs-scan__foot > * { animation: cs-find-in 0.5s var(--ease) both; }
  .cs-find:nth-child(2) { animation-delay: 0.3s; }
  .cs-find:nth-child(3) { animation-delay: 0.55s; }
  .cs-find:nth-child(4) { animation-delay: 0.8s; }
  .cs-find:nth-child(5) { animation-delay: 1.05s; }
  .cs-find:nth-child(6) { animation-delay: 1.3s; }
  .cs-scan__verdict { animation-delay: 1.6s; }
  .cs-scan__plan { animation-delay: 1.85s; }
}
@keyframes cs-find-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
/* One width for every severity so the labels start on a single left edge,
   the way a real findings table would read. Outlined, not filled: the
   severity colour carries the meaning on the line and the text. */
.cs-find__sev {
  min-width: 5.25rem; text-align: center;
  font-family: var(--font-title); font-size: var(--fs-label-xs); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 6px; white-space: nowrap;
  background: transparent; border: 1px solid currentColor;
}
/* Severity is status, not decoration: red-pink critical, gold high, cyan
   medium, green pass. These never follow the page accents. */
.cs-find__sev--crit { color: color-mix(in srgb, var(--color-secondary-magenta) 80%, white); }
.cs-find__sev--high { color: var(--color-secondary-gold); }
.cs-find__sev--med  { color: color-mix(in srgb, var(--color-secondary-cyan) 70%, white); }
.cs-find__sev--pass { color: color-mix(in srgb, var(--color-secondary-green) 80%, white); }
.cs-find__label {
  font-size: 0.8125rem; line-height: 1.3; color: var(--color-on-dark);
  min-width: 0; overflow-wrap: break-word;
}
.cs-find__meta { font-family: var(--font-mono); font-size: 0.625rem; color: rgba(223, 224, 218, 0.45); white-space: nowrap; }

.cs-scan__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px;
  border-top: 1px solid var(--cs-line);
  background: transparent;
}
.cs-scan__verdict {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.02em; color: var(--color-on-dark-muted);
}
/* Status badge: ink tinted with the lime accent and light text, never a
   bright fill on the black card. */
.cs-scan__plan {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-size: var(--fs-label-xs); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  background: color-mix(in srgb, var(--color-secondary-lime) 18%, var(--color-ink));
  color: var(--color-on-dark);
  border: 1px solid color-mix(in srgb, var(--color-secondary-lime) 48%, transparent);
  padding: 5px 11px; border-radius: var(--radius-pill);
}
.cs-visual__caption {
  margin: var(--space-3) 0 0; text-align: center;
  font-size: 0.75rem; color: var(--color-ink-35);
}

/* ---------- Trust strip ---------- */
.cs-trust {
  max-width: var(--cs-max); margin: var(--space-7) auto 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-ink); border-bottom: 1px solid var(--border-ink);
}
.cs-trust__item { display: grid; gap: 4px; }
.cs-trust__k {
  font-family: var(--font-title); font-size: 1.375rem; font-weight: 700;
  letter-spacing: -0.02em; color: var(--color-ink);
}
.cs-trust__v { font-size: 0.8125rem; line-height: 1.45; color: var(--color-ink-45); }

/* =============================================================
   RISK BAND (light section, black cards at the full content width)
   ============================================================= */
.cs-risk { position: relative; max-width: var(--cs-max); margin-inline: auto; }
.cs-risk__in { position: relative; }
.cs-risk__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3); margin-top: var(--space-7);
}
.cs-quiet {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-5);
  background: var(--color-ink);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.cs-quiet:hover { border-color: rgba(255, 255, 255, 0.22); transform: translateY(-2px); }
.cs-quiet__mark {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cs-amber) 22%, transparent);
  color: var(--cs-amber);
}
.cs-quiet__mark svg { width: 20px; height: 20px; }
.cs-quiet__title {
  font-family: var(--font-title); font-size: var(--fs-card-title); font-weight: 700;
  line-height: 1.25; letter-spacing: -0.015em; color: var(--color-on-dark); margin: 0 0 var(--space-2);
}
.cs-quiet__body { font-size: 1rem; line-height: 1.6; color: var(--color-on-dark-muted); margin: 0; }
.cs-risk__foot {
  margin: var(--space-6) 0 0; font-family: var(--font-title); text-align: center;
  font-size: var(--fs-md); font-weight: 600; color: var(--color-ink);
}

/* =============================================================
   SEE / CAN'T SEE COMPARISON
   ============================================================= */
.cs-compare {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-6);
  border: 1px solid var(--border-ink); border-radius: var(--radius-xl);
  background: var(--color-surface-light); overflow: hidden;
}
.cs-col { padding: var(--space-6); }
.cs-col--unknown { border-right: 1px solid var(--border-ink); }
.cs-col--known { background: color-mix(in srgb, var(--cs-green) 6%, var(--color-surface-light)); }
.cs-col__tag {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-title); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-45);
  margin: 0 0 var(--space-4);
}
.cs-col--known .cs-col__tag { color: var(--cs-green-ink); }
.cs-col--unknown .cs-col__tag { color: var(--cs-amber-ink); }
.cs-col__list { display: grid; gap: var(--space-3); }
.cs-col__list li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 0.9375rem; line-height: 1.55; color: var(--color-ink-60);
}
.cs-col__list li strong { color: var(--color-ink); font-weight: 600; }
.cs-col__icn {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cs-col__icn svg { width: 100%; height: 100%; }
.cs-col--known .cs-col__icn { color: var(--cs-green-ink); }
.cs-col--unknown .cs-col__icn { color: var(--cs-amber-ink); }
.cs-compare__note {
  grid-column: 1 / -1;
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--border-ink);
  font-family: var(--font-title); font-size: var(--fs-md); font-weight: 600; color: var(--color-ink);
}

/* =============================================================
   WHAT WE CHECK
   ============================================================= */
.cs-checks {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4); margin-top: var(--space-6);
}
.cs-check {
  display: flex; flex-direction: column;
  background: var(--color-ink); color: var(--color-on-dark);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg); padding: var(--space-5);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.cs-check:hover {
  transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.2);
}
.cs-check__icon {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--color-ink-elevated); border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--cs-green); margin-bottom: var(--space-4);
}
.cs-check__icon svg { width: 20px; height: 20px; }
.cs-check__title {
  font-family: var(--font-title); font-size: var(--fs-card-title); font-weight: 700;
  letter-spacing: -0.01em; color: var(--color-on-dark); margin: 0 0 8px;
}
.cs-check__body { font-size: 0.9375rem; line-height: 1.55; color: var(--color-on-dark-muted); margin: 0; }
.cs-check__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.cs-tag {
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.01em;
  color: var(--color-on-dark-muted); padding: 4px 9px;
  background: var(--color-ink-elevated); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-pill);
}

/* =============================================================
   WHAT YOU GET
   ============================================================= */
.cs-get {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4vw, var(--space-7)); align-items: center; margin-top: var(--space-7);
}
.cs-get__list { display: grid; gap: var(--space-4); }
.cs-deliver { display: flex; gap: var(--space-3); align-items: flex-start; }
.cs-deliver__n {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  font-family: var(--font-title); font-size: 0.75rem; font-weight: 700;
  background: var(--color-ink); color: var(--cs-amber);
}
.cs-deliver__title {
  font-family: var(--font-title); font-size: var(--fs-card-title); font-weight: 700;
  letter-spacing: -0.01em; margin: 4px 0 5px;
}
.cs-deliver__body { font-size: 0.9375rem; line-height: 1.55; color: var(--color-ink-60); margin: 0; }

/* Report card mock — the one dark surface in this section */
.cs-report {
  background: var(--color-ink-elevated); border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 38px 80px -46px rgba(0, 0, 0, 0.45);
  /* Everything inside the card reads its scroll progress from the card, not
     from its own box. A 7px bar or a 58px ring measured against itself is
     through its whole entry range in a few pixels of scroll, which lands as a
     pop; against the card the fills have the panel's full travel to play. */
  view-timeline-name: --cs-report;
}
.cs-report__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.cs-report__title {
  font-family: var(--font-title); font-size: 0.9375rem; font-weight: 700;
  letter-spacing: -0.01em; color: var(--color-on-dark); margin: 0;
}
.cs-report__sub { font-family: var(--font-mono); font-size: 0.625rem; color: var(--color-on-dark-muted); margin: 3px 0 0; }
/* The arc lives on a pseudo-element so it can be swept and turned without
   dragging the number around with it. --cs-arc has to be registered for the
   conic stop to interpolate at all; where @property is missing the stop still
   reads its declared value, so the ring paints full and static. */
@property --cs-arc {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
.cs-score {
  position: relative;
  flex: 0 0 auto; display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  --cs-score-p: 72%;
  --cs-arc: var(--cs-score-p);
}
.cs-score::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--color-secondary-green) 0 var(--cs-arc), rgba(255, 255, 255, 0.1) var(--cs-arc) 100%);
}
.cs-score__in {
  position: relative;
  width: 46px; height: 46px; border-radius: 50%; background: var(--color-ink-elevated);
  display: grid; place-items: center;
  font-family: var(--font-title); font-size: 0.8125rem; font-weight: 700; color: var(--color-on-dark);
}
.cs-report__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.cs-bars { display: grid; gap: 13px; }
.cs-bar__top {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  font-family: var(--font-title); font-size: 0.75rem; margin-bottom: 6px;
}
.cs-bar__name { color: var(--color-on-dark-muted); font-weight: 600; }
.cs-bar__val { font-family: var(--font-mono); font-size: 0.625rem; color: rgba(223, 224, 218, 0.5); }
.cs-bar__track { height: 7px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.cs-bar__fill {
  position: relative; overflow: hidden; transform-origin: left center;
  height: 100%; border-radius: var(--radius-pill); width: var(--w, 50%);
}
.cs-bar__fill--green { background: linear-gradient(90deg, var(--color-secondary-green), var(--color-secondary-lime)); }
.cs-bar__fill--cyan { background: linear-gradient(90deg, var(--color-secondary-cyan), var(--color-secondary-green)); }
.cs-bar__fill--gold { background: linear-gradient(90deg, var(--color-secondary-gold), var(--color-secondary-magenta)); }
.cs-bar__fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0 22%, rgba(255, 255, 255, 0.32) 50%, transparent 78% 100%);
  transform: translateX(-100%);
}

/* ---------- Report card motion ----------
   Two layers per bar, kept on separate properties so they never fight over the
   same declaration: the fill on arrival is `width`, which keeps each gradient
   anchored at its light end, and the slow re-read afterwards is `transform`,
   which nudges where the bar lands by about three percent. The ambient half
   sits outside @supports so it still runs in browsers without view()
   timelines, where the bars are simply full when they appear. */
@media (prefers-reduced-motion: no-preference) {
  .cs-bar__fill {
    animation: cs-bar-settle 13s ease-in-out infinite;
  }
  .cs-bar__fill::after {
    animation: cs-bar-sheen 5.6s var(--ease) infinite;
  }
  .cs-bar:nth-child(2) .cs-bar__fill { animation-duration: 15s; animation-delay: -4s; }
  .cs-bar:nth-child(3) .cs-bar__fill { animation-duration: 11s; animation-delay: -7s; }
  .cs-bar:nth-child(4) .cs-bar__fill { animation-duration: 16s; animation-delay: -2s; }
  .cs-bar:nth-child(2) .cs-bar__fill::after { animation-delay: 0.5s; }
  .cs-bar:nth-child(3) .cs-bar__fill::after { animation-delay: 1s; }
  .cs-bar:nth-child(4) .cs-bar__fill::after { animation-delay: 1.5s; }

  .cs-score::before {
    animation: cs-arc-drift 14s ease-in-out infinite;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Longhands, not the shorthand: `animation` would reset the timeline and
       range that the rules below depend on. */
    .cs-bar__fill {
      animation-name: cs-bar-in, cs-bar-settle;
      animation-duration: auto, 13s;
      animation-timing-function: linear, ease-in-out;
      animation-iteration-count: 1, infinite;
      animation-fill-mode: both, none;
      animation-delay: 0s, 0s;
      animation-timeline: --cs-report, auto;
      animation-range: entry 22% entry 62%, normal;
    }
    .cs-bar:nth-child(2) .cs-bar__fill {
      animation-duration: auto, 15s; animation-delay: 0s, -4s;
      animation-range: entry 29% entry 69%, normal;
    }
    .cs-bar:nth-child(3) .cs-bar__fill {
      animation-duration: auto, 11s; animation-delay: 0s, -7s;
      animation-range: entry 36% entry 76%, normal;
    }
    .cs-bar:nth-child(4) .cs-bar__fill {
      animation-duration: auto, 16s; animation-delay: 0s, -2s;
      animation-range: entry 43% entry 83%, normal;
    }

    .cs-score::before {
      animation-name: cs-arc-in, cs-arc-drift;
      animation-duration: auto, 14s;
      animation-timing-function: linear, ease-in-out;
      animation-iteration-count: 1, infinite;
      animation-fill-mode: both, none;
      animation-timeline: --cs-report, auto;
      animation-range: entry 14% entry 58%, normal;
    }

    /* The fix plan runs on `contain`, not `entry`. It sits in the bottom 150px
       of the card, so anything keyed to entry plays out below the fold and the
       visitor never sees it. Contain starts with the card's bottom edge level
       with the viewport's, which is the first moment these rows are on screen.
       Kept to the front third of that range so a visitor who stops scrolling
       is never left looking at a card with rows missing. */
    .cs-report__step {
      animation: cs-step-in linear both;
      animation-timeline: --cs-report;
      animation-range: contain 4% contain 18%;
    }
    .cs-report__step:nth-child(2) { animation-range: contain 10% contain 24%; }
    .cs-report__step:nth-child(3) { animation-range: contain 16% contain 30%; }
    .cs-report__step:nth-child(4) { animation-range: contain 22% contain 36%; }

    /* Each tick draws itself once its line has landed, so the plan reads as
       items being checked off one at a time. 20.16 is the tick path's own
       length, so the offset spends none of its travel off the end of it. */
    .cs-report__step svg path {
      stroke-dasharray: 20.16;
      animation: cs-check-draw linear both;
      animation-timeline: --cs-report;
      animation-range: contain 9% contain 20%;
    }
    .cs-report__step:nth-child(2) svg path { animation-range: contain 15% contain 26%; }
    .cs-report__step:nth-child(3) svg path { animation-range: contain 21% contain 32%; }
    .cs-report__step:nth-child(4) svg path { animation-range: contain 27% contain 38%; }
  }
}
@keyframes cs-bar-in {
  from { width: 0; }
  to { width: var(--w, 50%); }
}
@keyframes cs-bar-settle {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.965); }
}
@keyframes cs-bar-sheen {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}
@keyframes cs-arc-in {
  from { --cs-arc: 0%; }
  to { --cs-arc: var(--cs-score-p); }
}
@keyframes cs-arc-drift {
  0%, 100% { rotate: -5deg; }
  50% { rotate: 5deg; }
}
@keyframes cs-step-in {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}
@keyframes cs-check-draw {
  from { stroke-dashoffset: 20.16; }
  to { stroke-dashoffset: 0; }
}
.cs-report__next {
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
}
    .cs-report__step:nth-child(2) svg path { animation-range: contain 15% contain 26%; }
    .cs-report__step:nth-child(3) svg path { animation-range: contain 21% contain 32%; }
    .cs-report__step:nth-child(4) svg path { animation-range: contain 27% contain 38%; }
  }
}
@keyframes cs-bar-in {
  from { width: 0; }
  to { width: var(--w, 50%); }
}
@keyframes cs-bar-settle {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.965); }
}
@keyframes cs-bar-sheen {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}
@keyframes cs-arc-in {
  from { --cs-arc: 0%; }
  to { --cs-arc: var(--cs-score-p); }
}
@keyframes cs-arc-drift {
  0%, 100% { rotate: -5deg; }
  50% { rotate: 5deg; }
}
@keyframes cs-step-in {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}
@keyframes cs-check-draw {
  from { stroke-dashoffset: 20.16; }
  to { stroke-dashoffset: 0; }
}
.cs-report__next {
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.cs-report__label {
  font-family: var(--font-title); font-size: var(--fs-label-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-secondary-cyan); margin: 0 0 10px;
}
.cs-report__steps { display: grid; gap: 8px; }
.cs-report__step {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.8125rem; color: var(--color-on-dark-muted);
}
.cs-report__step svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--color-secondary-green); }
.cs-report__step span { min-width: 0; }
.cs-report__step b { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 400; color: rgba(223, 224, 218, 0.45); margin-left: auto; white-space: nowrap; }

/* =============================================================
   STEPS
   ============================================================= */
.cs-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4); margin-top: var(--space-6);
}
.cs-step {
  display: flex; flex-direction: column;
  background: var(--color-surface-light); border: 1px solid transparent;
  border-radius: var(--radius-lg); padding: var(--space-5);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.cs-step:hover {
  transform: translateY(-3px); border-color: var(--border-ink);
  box-shadow: 0 22px 44px -30px rgba(0, 0, 0, 0.4);
}
.cs-step__icon {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--color-paper); border: 1px solid var(--border-ink);
  color: var(--cs-green-ink); margin-bottom: var(--space-4);
}
.cs-step__icon svg { width: 20px; height: 20px; }
.cs-step__title {
  font-family: var(--font-title); font-size: var(--fs-step); font-weight: 700;
  letter-spacing: -0.01em; margin: 0 0 9px;
}
.cs-step__body { flex: 1 0 auto; font-size: 0.9375rem; line-height: 1.6; color: var(--color-ink-60); margin: 0; }
.cs-step__meta {
  display: flex; align-items: center; gap: 8px;
  margin: var(--space-4) 0 0; padding-top: var(--space-3);
  border-top: 1px solid var(--border-ink);
  font-family: var(--font-title); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink-45);
}
.cs-step__meta svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--cs-green-ink); }

/* =============================================================
   PRICING LADDER
   ============================================================= */
.cs-anchor {
  max-width: 620px; margin: var(--space-5) auto 0; text-align: center;
  font-family: var(--font-title); font-size: var(--fs-md); font-weight: 600; color: var(--color-ink);
}
.cs-tiers {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4); margin-top: var(--space-6); align-items: stretch;
}
.cs-tier {
  position: relative; display: flex; flex-direction: column;
  background: var(--color-surface-light); border: 1px solid transparent;
  border-radius: var(--radius-xl); padding: var(--space-6) var(--space-5);
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.cs-tier:hover {
  transform: translateY(-4px); border-color: var(--border-ink);
  box-shadow: 0 28px 56px -34px rgba(0, 0, 0, 0.4);
}
.cs-tier--featured {
  background: var(--color-ink); color: var(--color-on-dark);
  border-color: transparent;
}
.cs-tier--featured::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(70% 60% at 50% 0%, oklch(0.85 0.15 152 / 0.22), transparent 70%);
}
.cs-tier__flag {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-title); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--radius-pill); white-space: nowrap;
  background: var(--cs-amber); color: var(--color-ink);
}
.cs-tier__inner { position: relative; display: flex; flex-direction: column; flex: 1; }
.cs-tier__step {
  font-family: var(--font-title); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink); margin: 0;
}
.cs-tier--featured .cs-tier__step { color: var(--color-on-dark); }
.cs-tier__name {
  font-family: var(--font-title); font-size: var(--fs-card-title); font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.2; margin: 10px 0 0;
}
.cs-tier--featured .cs-tier__name { color: var(--color-on-dark); }
.cs-tier__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin: var(--space-3) 0 0; }
.cs-tier__amount {
  font-family: var(--font-title); font-size: 2.25rem; font-weight: 700;
  letter-spacing: -0.03em; line-height: 1; color: var(--color-ink);
}
.cs-tier--featured .cs-tier__amount { color: var(--cs-amber); }
.cs-tier__unit { font-size: 0.8125rem; color: var(--color-ink-45); }
.cs-tier--featured .cs-tier__unit { color: var(--color-on-dark-muted); }
.cs-tier__pitch {
  font-size: 0.9375rem; line-height: 1.55; color: var(--color-ink-60);
  margin: var(--space-3) 0 0; padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-ink);
}
.cs-tier--featured .cs-tier__pitch { color: var(--color-on-dark-muted); border-bottom-color: rgba(255, 255, 255, 0.12); }
.cs-tier__list { display: grid; gap: 11px; margin: var(--space-4) 0 var(--space-5); }
.cs-tier__list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 0.875rem; line-height: 1.5; color: var(--color-ink-60);
}
.cs-tier--featured .cs-tier__list li { color: var(--color-on-dark-muted); }
.cs-tier__list li strong { color: var(--color-ink); font-weight: 600; }
.cs-tier--featured .cs-tier__list li strong { color: var(--color-on-dark); }
.cs-tier__tick {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; margin-top: 1px; border-radius: 50%;
  background: color-mix(in srgb, var(--cs-green) 20%, transparent);
  color: var(--cs-green-ink);
}
.cs-tier--featured .cs-tier__tick { color: var(--cs-amber); background: color-mix(in srgb, var(--cs-amber) 20%, transparent); }
.cs-tier__tick svg { width: 10px; height: 10px; }
.cs-tier__foot { margin-top: auto; display: grid; gap: 10px; }
.cs-tier__cta { width: 100%; }
.cs-tier__note { font-size: 0.75rem; color: var(--color-ink-45); margin: 0; text-align: center; }
.cs-tier--featured .cs-tier__note { color: var(--color-on-dark-muted); }
.cs-tiers__disclaimer {
  max-width: 720px; margin: var(--space-5) auto 0; text-align: center;
  font-size: var(--fs-sm); line-height: 1.6; color: var(--color-ink-45);
}
/* EN only: one currency line under the tiers. FR shows "$ US" on each price. */
.cs-tiers__currency {
  max-width: 720px; margin: var(--space-4) auto 0; text-align: center;
  font-size: var(--fs-sm); line-height: 1.6; color: var(--color-ink-45);
}
.cs-tiers__currency + .cs-tiers__disclaimer { margin-top: var(--space-2); }

/* =============================================================
   FAQ
   ============================================================= */
.cs-faq {
  max-width: 820px; margin: var(--space-6) auto 0; border-top: 1px solid var(--border-ink);
  view-timeline-name: --cs-faq;
}
.cs-faq__item { border-bottom: 1px solid var(--border-ink); }

/* Each row rises on its own slice of the list's scroll progress, so the six
   questions arrive as a cascade instead of one block. Measured against the
   list, not against each row: a 66px row is past its own entry range almost
   as soon as it appears. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cs .cs-faq__item[data-reveal] {
      animation-timeline: --cs-faq;
      animation-range: entry 8% entry 40%;
    }
    .cs .cs-faq__item:nth-child(2) { animation-range: entry 16% entry 48%; }
    .cs .cs-faq__item:nth-child(3) { animation-range: entry 24% entry 56%; }
    .cs .cs-faq__item:nth-child(4) { animation-range: entry 32% entry 64%; }
    .cs .cs-faq__item:nth-child(5) { animation-range: entry 40% entry 72%; }
    .cs .cs-faq__item:nth-child(6) { animation-range: entry 48% entry 80%; }
  }
}
.cs-faq__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) 0;
  font-family: var(--font-title); font-size: var(--fs-faq); font-weight: 700;
  letter-spacing: -0.01em; color: var(--color-ink);
}
.cs-faq__q::-webkit-details-marker { display: none; }
.cs-faq__icon { color: var(--color-active); }
.cs-faq__item[open] .cs-faq__q { color: var(--color-active); }
.cs-faq__a { font-size: var(--fs-md); line-height: 1.65; color: var(--color-ink-60); margin: 0; padding: 0 0 var(--space-5); max-width: 700px; }

/* =============================================================
   VISION — horizon
   ============================================================= */
.cs-horizon { margin-top: var(--space-5); }
.cs-horizon__body { max-width: 72ch; }
.cs-horizon__body p { font-size: var(--fs-md); line-height: 1.7; color: var(--color-ink-60); margin: 0 0 var(--space-3); }
.cs-horizon__body p:last-child { margin-bottom: 0; }
.cs-horizon__body strong { color: var(--color-ink); font-weight: 600; }

.cs-stages {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4); margin-top: var(--space-6);
}
.cs-stage {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  background: var(--color-ink); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg); padding: var(--space-5);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.cs-stage:hover {
  transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 22px 44px -30px rgba(0, 0, 0, 0.4);
}
.cs-stage__when {
  font-family: var(--font-title); font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cs-green); margin: 0 0 var(--space-2);
}
.cs-stage--next .cs-stage__when { color: var(--cs-amber); }
.cs-stage__title {
  font-family: var(--font-title); font-weight: 700;
  font-size: var(--fs-card-title); line-height: 1.25; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
  color: var(--color-on-dark);
}
.cs-stage__body { font-size: 1rem; line-height: 1.6; color: var(--color-on-dark-muted); margin: 0; }

/* Accent shade on the black cards (stages and risk cards), the same soft
   wash as the featured pricing tier, in the page's two hues. */
.cs-stage::before, .cs-quiet::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(80% 70% at 0% 0%, oklch(0.85 0.15 152 / 0.2), transparent 70%),
    radial-gradient(70% 60% at 100% 100%, oklch(0.85 0.15 75 / 0.1), transparent 70%);
}
.cs-stage--next::before, .cs-quiet:nth-child(even)::before {
  background:
    radial-gradient(80% 70% at 0% 0%, oklch(0.85 0.15 75 / 0.18), transparent 70%),
    radial-gradient(70% 60% at 100% 100%, oklch(0.85 0.15 152 / 0.1), transparent 70%);
}

.cs-vision__note {
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--border-ink);
  font-size: var(--fs-sm); color: var(--color-ink-45);
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1080px) {
  .cs-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
}

@media (max-width: 980px) {
  .cs-hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .cs-hero__lead { max-width: 58ch; }
  .cs-visual { max-width: 560px; width: 100%; margin-inline: auto; }
  .cs-risk__grid { grid-template-columns: 1fr; }
  .cs-compare { grid-template-columns: 1fr; }
  .cs-col--unknown { border-right: 0; border-bottom: 1px solid var(--border-ink); }
  .cs-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-get { grid-template-columns: 1fr; }
  .cs-report { max-width: 540px; width: 100%; margin-inline: auto; }
  .cs-steps { grid-template-columns: 1fr; gap: var(--space-3); }
  .cs-tiers { grid-template-columns: 1fr; gap: var(--space-3); max-width: 560px; margin-inline: auto; }
  .cs-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .cs-section { padding-top: var(--space-5); }
  .cs-section--tight { padding-top: var(--space-4); }
  .cs-section--airy { padding-top: var(--space-6); padding-bottom: var(--space-4); }
  .cs-h2 { font-size: clamp(1.75rem, 7vw, 2.125rem); margin-top: var(--space-2); }
  .cs-sub { font-size: var(--fs-md); margin-top: var(--space-2); }

  .cs-hero { padding-top: calc(var(--header-height) + var(--space-3)); padding-bottom: 0; }
  .cs-hero__panel { padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); }
  .cs-hero__deck { font-size: 1.25rem; margin-top: var(--space-3); }
  .cs-hero__lead { margin-top: var(--space-3); }
  .cs-hero__cta { margin-top: var(--space-5); }
  .cs-hero__cta .btn { width: 100%; flex: 1 1 100%; text-align: center; justify-content: center; }
  /* Compact scan panel under the buttons: three rows (the repeated Critical
     and the Medium row drop out), one line each, half the row height. */
  .cs-scan__bar { padding: 9px 14px; }
  .cs-scan__file { display: none; }
  .cs-scan__body { min-height: 0; padding: 4px 14px; }
  .cs-find { grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 7px 0; }
  /* nth-of-type counts the sweep div too: 3 and 5 are the 2nd and 4th rows. */
  .cs-find:nth-of-type(3), .cs-find:nth-of-type(5) { display: none; }
  .cs-find__sev { min-width: 4.5rem; padding: 3px 8px; }
  .cs-find__label { font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cs-find__meta { display: none; }
  .cs-scan__foot { gap: 8px; padding: 9px 14px; }
  .cs-scan__verdict { font-size: 0.625rem; }
  .cs-scan__plan { font-size: var(--fs-label-xs); padding: 4px 9px; }

  .cs-trust { grid-template-columns: 1fr; margin-top: var(--space-6); gap: var(--space-4); }
  .cs-trust__k { font-size: 1.1875rem; }

  .cs-risk__grid { margin-top: var(--space-5); }
  .cs-quiet { padding: var(--space-3); }

  .cs-compare { border-radius: var(--radius-lg); }
  .cs-col { padding: var(--space-4); }
  .cs-compare__note { padding: var(--space-4); }
  .cs-checks { grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-4); }
  .cs-check { padding: var(--space-4); }
  .cs-get { margin-top: var(--space-5); }
  .cs-report__head { padding: var(--space-3) var(--space-4); }
  .cs-report__body { padding: var(--space-4); }
  .cs-steps { margin-top: var(--space-5); }
  .cs-step { padding: var(--space-4); }
  .cs-tier { padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); }
  .cs-tier__amount { font-size: 1.875rem; }
  .cs-faq { margin-top: var(--space-4); }
  .cs-stages { grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-5); }
  .cs-stage { padding: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .cs-hero__glow, .cs-hero__glow--b, .cs-hero__glow--c, .cs-hero__glow--corner, .cs-hero__wash { animation: none; }
  .cs-scan__sweep { display: none; }
  .cs-term__tip { transition: none; }
  .cs-bar__fill, .cs-score::before, .cs-report__step { animation: none; }
  .cs-report__step svg path { animation: none; stroke-dasharray: none; }
  .cs-bar__fill::after { display: none; }
}

/* =============================================================
   TIER CHOICE OVERLAY
   ============================================================= */
.cs-choice {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.cs-choice[hidden] { display: none; }
.cs-choice__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 8, 0.55);
}
.cs-choice__panel {
  position: relative;
  width: min(1120px, 100%);
  max-height: min(96vh, 960px);
  background: var(--color-paper);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(10, 10, 8, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cs-choice__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-ink);
  background: #fff;
  color: var(--color-ink);
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(10, 10, 8, 0.12);
}
.cs-choice__close svg { width: 18px; height: 18px; }
.cs-choice__scroll {
  overflow: auto;
  padding: var(--space-5) var(--space-5) var(--space-4);
  -webkit-overflow-scrolling: touch;
}
.cs-choice__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding-right: var(--space-6);
}
.cs-choice__head .cs-h2 {
  margin-top: var(--space-2);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}
.cs-choice__lead {
  margin: var(--space-2) 0 0;
  font-family: var(--font-title);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.45;
}
.cs-tiers--choice {
  margin-top: var(--space-4);
}
.cs-tiers--choice .cs-tier {
  padding: var(--space-5) var(--space-4);
}
.cs-tiers--choice .cs-tier__pitch {
  margin-top: var(--space-2);
  padding-bottom: var(--space-3);
}
.cs-tiers--choice .cs-tier__list {
  gap: 9px;
  margin: var(--space-3) 0 var(--space-4);
}
.cs-tiers--choice .cs-tier__amount { font-size: 2rem; }
.cs-choice .cs-tiers__disclaimer {
  margin-top: var(--space-3);
  margin-bottom: 0;
}
.cs-choice .cs-tiers__currency { margin-top: var(--space-3); }
.cs-choice .cs-tiers__currency + .cs-tiers__disclaimer { margin-top: var(--space-1); }

@media (max-width: 980px) {
  .cs-choice { padding: var(--space-2); align-items: stretch; }
  .cs-choice__panel {
    max-height: none;
    height: 100%;
    border-radius: var(--radius-lg);
  }
  .cs-choice__scroll { padding: var(--space-5) var(--space-4) var(--space-4); }
  .cs-tiers--choice { max-width: 560px; margin-inline: auto; }
}

@media (max-width: 620px) {
  .cs-choice__close { top: 8px; right: 8px; width: 36px; height: 36px; }
  .cs-choice__head { padding-right: var(--space-5); }
}

/* Work showcase tags take the page's own two accents, not the shared
   palette: green first, amber second within each card. */
.cs .showcase-signal { --showcase-signal: var(--cs-green); }
.cs .showcase-signal:nth-child(even) { --showcase-signal: var(--cs-amber); }