/* =============================================================
   Coherence & Security page — composed layout on NC tokens
   Loaded after styles.css; reuses :root design tokens.
   Namespace: .cs-
   ============================================================= */
.cs { --cs-max: var(--container-inner); }
.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.1;
  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: clip; text-align: left;
  max-width: none;
  padding: calc(var(--header-height) + var(--space-8)) var(--gutter) var(--space-8);
  /* The clip keeps the main glows off the next section, but it would also
     slice the scan panel's drop shadow into a straight line. The margin lets
     ink overflow past the padding box by more than the shadow's reach. It's
     also 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. */
  overflow-clip-margin: 420px;
}
.cs-hero__glow, .cs-hero__glow--b, .cs-hero__glow--corner {
  position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
}
/* Green/yellow wash, top-right — box and offset share the same vw value
   (half the box, negative, on both axes) so the gradient's own centre lands
   exactly on the hero's top-right corner. Hue, spread and centre are the
   `--g-h1/--g-h2/--g-w/--g-h/--g-x/--g-y` custom properties registered once
   in styles.css, reused here so the gradient itself morphs instead of a
   fixed shape just sliding around. */
.cs-hero__glow {
  top: -36vw; right: -36vw;
  width: 72vw; height: 72vw;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.8 0.19 var(--g-h1, 152deg) / 0.31),
    oklch(0.86 0.17 var(--g-h1, 152deg) / 0.14) 44%,
    transparent 70%
  );
  animation:
    cs-glow-morph 6s ease-in-out infinite,
    cs-glow-float 9s ease-in-out infinite;
}
@keyframes cs-glow-morph {
  0%, 100% { --g-h1: 142deg; --g-w: 44%; --g-h: 54%; --g-x: 46%; --g-y: 54%; }
  50%      { --g-h1: 165deg; --g-w: 55%; --g-h: 40%; --g-x: 60%; --g-y: 40%; }
}
@keyframes cs-glow-float {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);      filter: saturate(1); }
  50%      { transform: scale(1.22) translate3d(-10%, 8%, 0);  filter: saturate(1.1); }
}
/* Yellow wash, lower-left — the required "left-bottom" spot. Box and offset
   share the same vw value so the gradient's own centre lands exactly on the
   hero's bottom-left corner. Different cycle lengths + negative delays so it
   never breathes in sync with the top-right blob. */
.cs-hero__glow--b {
  top: auto; right: auto;
  bottom: -26.4vw; left: -26.4vw;
  width: 52.8vw; height: 52.8vw;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.85 0.19 var(--g-h1, 75deg) / 0.275),
    transparent 64%
  );
  animation:
    cs-glow-morph-b 7s ease-in-out -5s infinite,
    cs-glow-float-b 10s ease-in-out -9s infinite;
}
@keyframes cs-glow-morph-b {
  0%, 100% { --g-h1: 66deg; --g-w: 44%; --g-h: 44%; --g-x: 54%; --g-y: 46%; }
  50%      { --g-h1: 86deg; --g-w: 54%; --g-h: 36%; --g-x: 42%; --g-y: 58%; }
}
@keyframes cs-glow-float-b {
  0%, 100% { transform: scale(1.05) translate3d(0, 0, 0);      filter: saturate(1); }
  50%      { transform: scale(0.85) translate3d(12%, -9%, 0);  filter: saturate(1.12); }
}
/* Mandatory corner-seam accent: centred exactly where the hero ends and the
   next section begins, bottom-left. Box and offset share the same vw value
   (half the box width/height, negative) so the gradient's own centre — not
   its edge — lands on that corner point. Larger and fainter than it looks
   like it needs to be, since only the soft tail is ever visible. */
.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.84 0.18 var(--g-h1, 75deg) / 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: 66deg; --g-w: 46%; --g-h: 46%; --g-x: 50%; --g-y: 50%; }
  50%      { --g-h1: 86deg; --g-w: 56%; --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); }
}
.cs-hero__grid {
  position: relative; z-index: 2;
  max-width: var(--cs-max); margin-inline: auto;
  /* Even split: the copy column still clears the 440px the two CTA labels
     need to share a row, and the panel gets the same width to read as a
     product artefact rather than a thumbnail. */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4.5vw, 4.25rem); align-items: center;
}

.cs-pill {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-70);
  background: var(--glass); border: 1px solid var(--border-ink);
  padding: 0.45rem 0.85rem; border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
}
.cs-pill__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-secondary-green);
  animation: nc-pulse 2.4s var(--ease) infinite;
}

.cs-hero__title {
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  line-height: 0.98; letter-spacing: -0.045em;
  color: var(--color-ink);
  margin: var(--space-4) 0 0; max-width: 15ch; text-wrap: balance;
}
.cs-hero__title em { font-style: normal; }
/* Punch line under the service name. Same ink as the title throughout —
   no colour step, 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.12; letter-spacing: -0.03em;
  text-wrap: balance; color: var(--color-ink);
  max-width: 22ch; 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-ink-70);
  max-width: 48ch; margin: var(--space-4) 0 0; text-wrap: pretty;
}
.cs-hero__cta { margin-top: var(--space-6); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.cs-hero__reassure {
  margin: var(--space-3) 0 0; font-size: var(--fs-sm); color: var(--color-ink-45);
  display: flex; align-items: flex-start; gap: 0.5em;
}
.cs-hero__reassure svg {
  width: 15px; height: 15px; flex: 0 0 auto; margin-top: 0.28em;
  color: color-mix(in srgb, var(--color-secondary-green) 80%, black);
}
/* The homepage trust strip, left-aligned to the copy column instead of
   centred on the page. */
.cs-hero__trust { margin: var(--space-6) 0 0; justify-content: flex-start; }

/* ---------- Scan panel (hero visual) ----------
   Fills its half of the hero grid, so it carries the same visual weight as
   the copy. Every row label still holds one line at this width. */
.cs-visual {
  position: relative; display: flex;
  width: 100%; margin-left: auto;
}
.cs-scan {
  position: relative; z-index: 2; overflow: hidden;
  flex: 1 1 auto; display: flex; flex-direction: column;
  background: var(--color-ink); color: var(--color-on-dark);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  box-shadow: 0 32px 68px -42px rgba(0, 0, 0, 0.6);
}
.cs-scan__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: var(--color-ink-elevated);
}
.cs-scan__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.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; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-title); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-secondary-lime);
}
.cs-scan__live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-secondary-lime); animation: cs-pulse 1.8s ease-in-out infinite;
}
@keyframes cs-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }

.cs-scan__body {
  position: relative; flex: 0 0 auto;
  display: flex; flex-direction: column;
  padding: 14px 18px;
}
/* The sweep box is the full body, with the lit band in its bottom 100px, 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;
  background: linear-gradient(to bottom,
    transparent calc(100% - 100px),
    color-mix(in srgb, var(--color-secondary-green) 7%, transparent) calc(100% - 24px),
    color-mix(in srgb, var(--color-secondary-green) 32%, transparent));
  animation: cs-sweep 4.6s var(--ease) infinite;
}
@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: 1px solid rgba(255, 255, 255, 0.07);
}
.cs-find:last-of-type { border-bottom: 0; }
/* One width for every severity so the labels start on a single left edge,
   the way a real findings table would read. */
.cs-find__sev {
  min-width: 5.25rem; text-align: center;
  font-family: var(--font-title); font-size: 0.5625rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 6px; white-space: nowrap;
}
.cs-find__sev--crit { background: var(--color-secondary-magenta); color: #fff; }
.cs-find__sev--high { background: var(--color-secondary-gold); color: #16130B; }
.cs-find__sev--med  { background: color-mix(in srgb, var(--color-secondary-cyan) 62%, white); color: #06121C; }
.cs-find__sev--pass { background: color-mix(in srgb, var(--color-secondary-green) 78%, white); color: #04160E; }
.cs-find__label {
  font-size: 0.875rem; 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 rgba(255, 255, 255, 0.09);
  background: var(--color-ink-elevated);
}
.cs-scan__verdict {
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.02em; color: var(--color-on-dark-muted);
}
.cs-scan__plan {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  background: var(--color-secondary-lime); color: var(--color-ink);
  padding: 7px 12px; 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); }

/* =============================================================
   DARK RISK BAND
   ============================================================= */
.cs-risk {
  position: relative; overflow: hidden;
  background: var(--color-ink); color: var(--color-on-dark);
  border-radius: var(--radius-xl); padding: var(--space-8) var(--space-6);
}
.cs-risk__glow {
  position: absolute; inset: 0;
  background: radial-gradient(44% 95% at 82% 8%, oklch(0.72 0.17 98 / 0.28), transparent 66%);
  animation: nc-hue 12s ease-in-out infinite alternate;
}
.cs-risk__in { position: relative; max-width: 1000px; margin-inline: auto; }
.cs-risk__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3); margin-top: var(--space-7);
}
.cs-quiet {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4);
  background: var(--color-ink-elevated);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.cs-quiet:hover { border-color: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }
.cs-quiet__mark {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: color-mix(in srgb, var(--color-secondary-magenta) 20%, transparent);
  color: var(--color-secondary-magenta);
}
.cs-quiet__mark svg { width: 15px; height: 15px; }
.cs-quiet__title {
  font-family: var(--font-title); font-size: 0.9375rem; font-weight: 700;
  letter-spacing: -0.01em; color: var(--color-on-dark); margin: 0 0 4px;
}
.cs-quiet__body { font-size: 0.875rem; line-height: 1.55; color: var(--color-on-dark-muted); margin: 0; }
.cs-risk__foot {
  margin: var(--space-6) 0 0; font-family: var(--font-title);
  font-size: var(--fs-md); font-weight: 600; color: var(--color-on-dark);
}
.cs-risk__foot em { font-style: normal; color: var(--color-secondary-lime); }

/* =============================================================
   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(--color-secondary-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: 0.625rem; 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: color-mix(in srgb, var(--color-secondary-green) 70%, var(--color-ink)); }
.cs-col--unknown .cs-col__tag { color: var(--color-secondary-magenta); }
.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(--color-secondary-green); }
.cs-col--unknown .cs-col__icn { color: var(--color-secondary-magenta); }
.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(--color-secondary-cyan); margin-bottom: var(--space-4);
}
.cs-check__icon svg { width: 20px; height: 20px; }
.cs-check__title {
  font-family: var(--font-title); font-size: 1.0625rem; 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(--color-secondary-lime);
}
.cs-deliver__title {
  font-family: var(--font-title); font-size: 1.0625rem; 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__label {
  font-family: var(--font-title); font-size: 0.5625rem; 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(--color-secondary-green); margin-bottom: var(--space-4);
}
.cs-step__icon svg { width: 20px; height: 20px; }
.cs-step__title {
  font-family: var(--font-title); font-size: 1.1875rem; 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: 0.6875rem; 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(--color-secondary-green); }

/* =============================================================
   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: 0.5625rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--radius-pill); white-space: nowrap;
  background: var(--color-secondary-lime); 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: 0.625rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-secondary-cyan); margin: 0;
}
.cs-tier--featured .cs-tier__step { color: var(--color-secondary-lime); }
.cs-tier__name {
  font-family: var(--font-title); font-size: 1.25rem; 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(--color-secondary-lime); }
.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(--color-secondary-green) 20%, transparent);
  color: color-mix(in srgb, var(--color-secondary-green) 78%, black);
}
.cs-tier--featured .cs-tier__tick { color: var(--color-secondary-lime); background: color-mix(in srgb, var(--color-secondary-lime) 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);
}

/* =============================================================
   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-md); font-weight: 700;
  letter-spacing: -0.01em; color: var(--color-ink);
}
.cs-faq__q::-webkit-details-marker { display: none; }
.cs-faq__icon { flex: 0 0 auto; position: relative; width: 22px; height: 22px; }
.cs-faq__icon::before, .cs-faq__icon::after {
  content: ""; position: absolute; background: var(--color-secondary-cyan); border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.cs-faq__icon::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.cs-faq__icon::after { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.cs-faq__item[open] .cs-faq__icon::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.cs-faq__item[open] .cs-faq__q { color: var(--color-secondary-cyan); }
.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 {
  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.625rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--color-on-dark-muted); margin: 0 0 6px;
}
.cs-stage__title {
  font-family: var(--font-title); font-weight: 700;
  font-size: 1.0625rem; letter-spacing: -0.01em; margin: 0 0 5px;
  color: var(--color-on-dark);
}
.cs-stage__body { font-size: 0.9375rem; line-height: 1.55; color: var(--color-on-dark-muted); margin: 0; }

.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__title { max-width: 20ch; }
  .cs-hero__deck { max-width: 32ch; }
  .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-4); }
  .cs-tiers { grid-template-columns: 1fr; gap: var(--space-6); 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-6); }
  .cs-section--tight { padding-top: var(--space-5); }
  .cs-section--airy { padding-top: var(--space-7); padding-bottom: var(--space-4); }
  .cs-h2 { font-size: clamp(1.5rem, 6.4vw, 1.875rem); 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-7)); }
  .cs-hero__deck { font-size: 1.25rem; margin-top: var(--space-3); }
  .cs-hero__lead { font-size: var(--fs-md); margin-top: var(--space-3); }
  .cs-hero__cta { margin-top: var(--space-5); }
  .cs-hero__cta .btn { flex: 1 1 100%; text-align: center; justify-content: center; }
  .cs-hero__trust { margin-top: var(--space-5); }

  .cs-scan__file { display: none; }
  .cs-find { grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
  .cs-find__meta { display: none; }
  .cs-scan__foot { gap: 8px; }
  .cs-scan__verdict { font-size: 0.625rem; }
  .cs-scan__plan { font-size: 0.5625rem; padding: 5px 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 { padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); }
  .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; 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; 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--corner, .cs-risk__glow, .cs-pill__dot { animation: none; }
  .cs-scan__sweep { display: none; }
  .cs-scan__live::before { animation: 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;
}

@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); }
}