/* =========================================================================
   Case Study — heute.at. Page-specific layouts.
   Inherits tokens, typography, .nav, .footer, surface system from
   ../../styles.css. Component prefix: .cs-
   Shared shells mirror the Mopo / Tamedia / taz studies for consistency.
   The signature surface here is .cs-criterion — a typographic ink slab
   built around the German "Paderborn" quote, the literal criterion that
   decided the contract.
   ========================================================================= */

/* ============================================================
   Section grid overlay — same chrome as the others.
   ============================================================ */
.s__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    repeating-linear-gradient(to right,
      var(--grid-line-drench) 0 1px,
      transparent 1px calc(100% / 12));
}
.s[data-surface="light"] .s__grid,
.s[data-surface="white"] .s__grid {
  background-image:
    repeating-linear-gradient(to right,
      var(--grid-line-light) 0 1px,
      transparent 1px calc(100% / 12));
}
.s[data-surface="ink"] .s__grid {
  background-image:
    repeating-linear-gradient(to right,
      rgba(255, 255, 255, 0.06) 0 1px,
      transparent 1px calc(100% / 12));
}

/* ============================================================
   HERO — Drench.
   ============================================================ */
.cs-hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--section-y) + 60px);
}
.cs-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.cs-hero__text {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  align-content: end;
}
.cs-hero__ticker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  opacity: 0.85;
  margin: 0;
}
.cs-hero__dot {
  width: 8px;
  height: 8px;
  background: var(--white);
  display: inline-block;
  animation: cs-pulse 2.4s var(--ease-out-quart) infinite;
}
.cs-hero__sep { opacity: 0.5; }

.cs-hero__display {
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
  max-width: 18ch;
}
.cs-hero__lede {
  max-width: 52ch;
  font-size: clamp(1.125rem, 1.55vw, 1.5rem);
  line-height: 1.45;
  opacity: 0.92;
}
.cs-hero__chips {
  list-style: none;
  margin: clamp(12px, 2.5vw, 24px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cs-hero__chips li {
  border: 1px solid rgba(255, 255, 255, 0.32);
  padding: 12px 18px;
}

/* Brand badge */
.cs-hero__brands {
  --cs-mark-h: clamp(72px, 8vw, 120px);
  display: grid;
  justify-items: start;
  align-items: start;
  margin-top: clamp(8px, 1.5vw, 16px);
}
.cs-hero__brand {
  display: grid;
  gap: clamp(10px, 1.5vw, 16px);
  justify-items: start;
  padding: 0;
}
.cs-hero__brand-label { opacity: 0.7; justify-self: start; }
.cs-hero__brand-frame {
  width: auto;
  height: var(--cs-mark-h);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.cs-hero__logo {
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
  /* heute.at logo: red wordmark. We don't strip it — the red plate
     reads well on the drench, same treatment as Mopo and taz. */
  filter: none;
  opacity: 1;
}
@media (max-width: 560px) {
  .cs-hero__brands { --cs-mark-h: clamp(56px, 14vw, 88px); }
}

@keyframes cs-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

/* ============================================================
   AT-A-GLANCE — Light. Four cells of editorial facts.
   The cell display fits text-style values (e.g. "Plug + play"),
   not only numbers — same component, different content register.
   ============================================================ */
.cs-glance__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(32px, 5vw, 64px);
}
.cs-glance__head { display: grid; gap: 12px; max-width: 28ch; }
.cs-glance__eyebrow { color: var(--rocket-blue); margin: 0; }
.cs-glance__title {
  color: var(--ink);
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  line-height: 1.0;
}
.cs-glance__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(10, 10, 10, 0.14);
  border: 1px solid rgba(10, 10, 10, 0.14);
}
@media (max-width: 900px) { .cs-glance__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cs-glance__grid { grid-template-columns: 1fr; } }
.cs-glance__cell {
  background: var(--white-smoke);
  padding: clamp(24px, 3vw, 40px);
  display: grid;
  gap: 10px;
  align-content: end;
  min-height: 200px;
}
.cs-glance__num {
  font-family: var(--font-display);
  font-weight: 900;
  /* Slightly smaller than mopo's 4rem max — heute.at cells carry text,
     not big digits, so we want the values to wrap gracefully. */
  font-size: clamp(1.875rem, 3.4vw, 2.875rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--rocket-blue);
  text-wrap: balance;
}
.cs-glance__lbl { color: var(--graphite); max-width: 26ch; }

/* ============================================================
   CONTEXT — Light. Two columns.
   ============================================================ */
.cs-context__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 880px) { .cs-context__inner { grid-template-columns: 1fr; } }
.cs-context__eyebrow {
  display: block;
  color: var(--rocket-blue);
  margin: 0 0 18px;
}
.cs-context__statement {
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0 0 18px;
}
.cs-context__statement em {
  font-style: italic;
  font-weight: 900;
  color: var(--rocket-blue);
}
.cs-context__caption { margin: 0; opacity: 0.65; }
.cs-context__caption a {
  color: var(--ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.cs-context__caption a:hover { opacity: 0.7; }
.cs-context__right { display: grid; gap: clamp(16px, 2vw, 24px); }
.cs-context__right .body {
  color: var(--graphite);
  font-size: clamp(1rem, 1.2vw, 1.1875rem);
  line-height: 1.6;
  max-width: 60ch;
}
.cs-context__right .body em {
  font-style: italic;
  color: var(--ink);
}
.cs-context__right .body strong {
  font-weight: 700;
  color: var(--ink);
}
.cs-context__facts {
  margin: clamp(12px, 2vw, 20px) 0 0;
  padding: clamp(18px, 2vw, 24px) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  border-top: 1px solid rgba(10, 10, 10, 0.18);
}
.cs-context__facts > div { display: grid; gap: 4px; }
.cs-context__facts dt { color: var(--rocket-blue); opacity: 0.85; }
.cs-context__facts dd {
  color: var(--ink);
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ============================================================
   PAINS — Drench. Coral signal foil.
   ============================================================ */
.cs-pains__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(40px, 6vw, 80px);
}
.cs-pains__head { display: grid; gap: 14px; max-width: 30ch; }
.cs-pains__head .mono { opacity: 0.7; }
.cs-pains__head .headline {
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  line-height: 1.0;
}
.cs-pains__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
@media (max-width: 980px) { .cs-pains__list { grid-template-columns: 1fr; } }
.cs-pains__item {
  position: relative;
  background: var(--rocket-blue);
  padding: clamp(28px, 3.2vw, 44px);
  display: grid;
  gap: 14px;
  align-content: start;
}
.cs-pains__sig {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 4px;
  background: var(--signal-coral);
}
.cs-pains__no {
  font-size: 0.7rem;
  opacity: 0.8;
  margin-top: 6px;
}
.cs-pains__head-row {
  font-weight: 900;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  letter-spacing: -0.005em;
  line-height: 1.15;
  max-width: 24ch;
}
.cs-pains__body {
  font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
  line-height: 1.55;
  opacity: 0.92;
  max-width: 38ch;
}
.cs-pains__body em {
  font-style: italic;
  color: var(--white);
  opacity: 1;
}

/* ============================================================
   CRITERION — Ink (funeral surface, once per page).
   The taz study used a triptych here; the heute.at study uses a
   single typographic slab: the literal German criterion that decided
   the contract. The ditto-mark is the German „ (low-9 form) to honour
   the language convention.
   ============================================================ */
.cs-criterion { padding-top: var(--section-y); padding-bottom: var(--section-y); }

/* Two-column layout: verdict head + body paragraph live on the left,
   the typographic quote slab anchors the right. The quote spans both
   rows vertically so it visually answers the head and runs alongside
   the body. Collapses to a single column on narrow viewports. */
.cs-criterion__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-areas:
    "head  quote"
    "body  quote";
  gap: clamp(40px, 5vw, 72px) clamp(48px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 980px) {
  .cs-criterion__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "quote"
      "body";
    gap: clamp(36px, 5vw, 56px);
  }
}

.cs-criterion__head {
  grid-area: head;
  display: grid;
  gap: clamp(14px, 2vw, 24px);
  max-width: 64ch;
}
.cs-criterion__eyebrow { opacity: 0.75; color: var(--white); margin: 0; }
.cs-criterion__verdict {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--white);
  margin: 0;
  text-transform: uppercase;
  max-width: 22ch;
}
.cs-criterion__verdict strong {
  font-weight: 900;
  background-image: linear-gradient(transparent 64%, var(--signal-coral) 64%, var(--signal-coral) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-position: 0 0.05em;
  padding: 0 2px;
}

/* The quote slab — the heart of the signature surface. Sits in the
   right column of the criterion grid and visually answers the verdict
   on the left. The opening ditto-mark is a brand-blue ghost behind
   the first line. */
.cs-criterion__quote {
  grid-area: quote;
  position: relative;
  /* On desktop the quote is anchored next to the head — no extra top
     padding needed. On mobile the ditto-mark still needs room above. */
  padding: 0;
  display: grid;
  gap: clamp(20px, 3vw, 36px);
}
@media (max-width: 980px) {
  .cs-criterion__quote { padding-top: clamp(40px, 6vw, 64px); }
}
.cs-criterion__ditto {
  position: absolute;
  /* Sits behind the first line of the quote — a brand-blue ghost that
     reads as an oversized opening quotation mark without competing
     with the type itself. */
  top: -0.18em;
  left: -0.08em;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(12rem, 22vw, 22rem);
  line-height: 1;
  color: var(--rocket-blue);
  opacity: 0.20;
  pointer-events: none;
  user-select: none;
}
.cs-criterion__line {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  /* Sized to the right column, which is roughly half the section width
     at desktop. The longest manual line ("AND THE READERS") fits in
     the column at this scale. */
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--white);
  text-transform: uppercase;
  /* Don't balance — respect the manual <br> cadence. The column
     itself caps width; no explicit max-width needed. */
}
.cs-criterion__line em {
  font-style: italic;
  font-weight: 900;
  /* The verb that does the work — "walk" — gets the coral signal foil.
     Same accent as the verdict line above. */
  background-image: linear-gradient(transparent 64%, var(--signal-coral) 64%, var(--signal-coral) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-position: 0 0.05em;
  padding: 0 2px;
}
.cs-criterion__attr {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  opacity: 0.85;
  margin-top: clamp(4px, 1vw, 12px);
}
.cs-criterion__sep { opacity: 0.5; }

.cs-criterion__body {
  grid-area: body;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.2vw, 1.1875rem);
  line-height: 1.6;
  color: var(--white-smoke);
  opacity: 0.78;
  margin: 0;
  max-width: 56ch;
}

/* ============================================================
   GAINS — Drench.
   ============================================================ */
.cs-gains__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(40px, 6vw, 72px);
}
.cs-gains__head { display: grid; gap: 14px; max-width: 30ch; }
.cs-gains__head .mono { opacity: 0.7; }
.cs-gains__head .headline {
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  line-height: 1.0;
}
.cs-gains__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 32px);
}
@media (max-width: 1000px) { .cs-gains__list { grid-template-columns: 1fr; } }
.cs-gains__item {
  background: var(--white);
  color: var(--ink);
  padding: clamp(28px, 3vw, 44px);
  display: grid;
  gap: 12px;
  align-content: start;
}
.cs-gains__no { color: var(--rocket-blue); }
.cs-gains__head-row {
  color: var(--ink);
  font-weight: 900;
  font-size: clamp(1.125rem, 1.6vw, 1.4375rem);
  letter-spacing: -0.01em;
  line-height: 1.1;
  max-width: 24ch;
  margin: 4px 0 0;
}
.cs-gains__quip {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--rocket-blue);
  margin: 0;
}
.cs-gains__body {
  color: var(--graphite);
  font-size: clamp(0.95rem, 1.05vw, 1.0625rem);
  line-height: 1.55;
  max-width: 40ch;
  margin: 0;
}
.cs-gains__metrics {
  list-style: none;
  margin: 8px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(10, 10, 10, 0.14);
  display: grid;
  gap: 6px;
  color: var(--ink);
}
.cs-gains__metrics li::before {
  content: "→ ";
  color: var(--rocket-blue);
  margin-right: 4px;
}

/* ============================================================
   QUOTE — Light.
   ============================================================ */
.cs-quote__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}
.cs-quote__eyebrow { color: var(--rocket-blue); margin: 0; }
.cs-quote__card {
  position: relative;
  background: var(--white);
  padding: clamp(36px, 5vw, 72px) clamp(28px, 4vw, 64px);
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  border: 1px solid rgba(10, 10, 10, 0.06);
  overflow: hidden;
}
.cs-quote__ditto {
  position: absolute;
  top: -0.18em;
  left: clamp(8px, 1.5vw, 24px);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(12rem, 22vw, 22rem);
  line-height: 1;
  color: var(--rocket-blue);
  opacity: 0.10;
  pointer-events: none;
  user-select: none;
}
.cs-quote__body {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
  max-width: 36ch;
}
.cs-quote__body em {
  font-style: italic;
  color: var(--rocket-blue);
}
.cs-quote__foot {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid rgba(10, 10, 10, 0.12);
}
.cs-quote__avatar {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--rocket-blue);
  color: var(--white);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  overflow: hidden;
}
.cs-quote__avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.cs-quote__attr { display: grid; gap: 2px; }
.cs-quote__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  color: var(--ink);
  letter-spacing: -0.005em;
}
.cs-quote__role { color: var(--graphite); }
.cs-quote__logo {
  height: 28px;
  width: auto;
  max-width: 110px;
  opacity: 0.85;
}

/* ============================================================
   ROLLOUT — Light. Four-step rail.
   ============================================================ */
.cs-roll { border-top: 1px solid rgba(10, 10, 10, 0.08); }
.cs-roll__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(36px, 5vw, 64px);
}
.cs-roll__head { display: grid; gap: 14px; max-width: 30ch; }
.cs-roll__eyebrow { color: var(--rocket-blue); margin: 0; }
.cs-roll__title {
  color: var(--ink);
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  line-height: 1.0;
}
.cs-roll__rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(10, 10, 10, 0.18);
}
@media (max-width: 960px) { .cs-roll__rail { grid-template-columns: 1fr; } }
.cs-roll__step {
  padding: clamp(24px, 3vw, 36px) clamp(20px, 2.5vw, 28px) clamp(20px, 3vw, 32px) 0;
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
}
.cs-roll__step + .cs-roll__step {
  border-left: 1px solid rgba(10, 10, 10, 0.18);
  padding-left: clamp(20px, 2.5vw, 28px);
}
@media (max-width: 960px) {
  .cs-roll__step + .cs-roll__step {
    border-left: none;
    border-top: 1px solid rgba(10, 10, 10, 0.18);
    padding-left: 0;
    padding-top: clamp(20px, 3vw, 28px);
  }
}
.cs-roll__step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--rocket-blue);
}
.cs-roll__step + .cs-roll__step::before { left: clamp(20px, 2.5vw, 28px); }
@media (max-width: 960px) {
  .cs-roll__step + .cs-roll__step::before { left: 0; }
}
.cs-roll__no { color: var(--rocket-blue); }

.cs-roll__icon {
  width: 28px;
  height: 28px;
  color: var(--rocket-blue);
  display: block;
  margin-bottom: 4px;
}

/* Step 1 — Scope/target. Crosshair arms grow outward. */
html.has-js .cs-roll__icon--scope path {
  stroke-dasharray: 6;
  stroke-dashoffset: 6;
  transition: stroke-dashoffset 480ms var(--ease-out-quart);
  transition-delay: 220ms;
}
.cs-roll__step.is-in .cs-roll__icon--scope path { stroke-dashoffset: 0; }

/* Step 2 — Reject. The slash draws across the circle. */
html.has-js .cs-roll__icon--reject .cs-roll__icon-slash {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset 540ms var(--ease-out-quart);
  transition-delay: 320ms;
}
.cs-roll__step.is-in .cs-roll__icon--reject .cs-roll__icon-slash { stroke-dashoffset: 0; }

/* Step 3 — Plug. Socket arc draws on intersect. */
html.has-js .cs-roll__icon--plug .cs-roll__icon-socket {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset 540ms var(--ease-out-quart);
  transition-delay: 280ms;
}
.cs-roll__step.is-in .cs-roll__icon--plug .cs-roll__icon-socket { stroke-dashoffset: 0; }

/* Step 4 — Live. Center dot scales in with concentric pulse rings. */
html.has-js .cs-roll__icon--live .cs-roll__icon-dot {
  transform-origin: 14px 14px;
  transform-box: fill-box;
  transform: scale(0);
  transition: transform 360ms var(--ease-out-expo);
  transition-delay: 320ms;
}
.cs-roll__step.is-in .cs-roll__icon--live .cs-roll__icon-dot { transform: scale(1); }

.cs-roll__step-title {
  color: var(--ink);
  font-weight: 900;
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
  letter-spacing: -0.005em;
  line-height: 1.15;
  max-width: 18ch;
}
.cs-roll__step-body {
  color: var(--graphite);
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 32ch;
  margin: 0;
}
.cs-roll__step-body em {
  font-style: italic;
  color: var(--ink);
}

/* ============================================================
   PROOF STRIP — Light.
   ============================================================ */
.cs-proof {
  padding-top: clamp(40px, 5vh, 64px);
  padding-bottom: clamp(40px, 5vh, 64px);
  border-top: 1px solid rgba(10, 10, 10, 0.08);
  border-bottom: 1px solid rgba(10, 10, 10, 0.08);
}
.cs-proof__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.cs-proof__chip {
  border: 1px solid rgba(10, 10, 10, 0.32);
  padding: 12px 18px;
  color: var(--ink);
}

/* ============================================================
   CTA — Drench.
   ============================================================ */
.cs-cta {
  min-height: 76vh;
  display: flex;
  align-items: center;
}
.cs-cta__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(18px, 2.5vw, 32px);
  max-width: 30ch;
}
.cs-cta__eyebrow { opacity: 0.7; margin: 0; }
.cs-cta__display {
  font-size: clamp(3rem, 10vw, 7.5rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
}
.cs-cta__lede { max-width: 40ch; }
.cs-cta__actions {
  margin-top: clamp(8px, 2vw, 24px);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.cs-cta__btn {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background-color 180ms var(--ease-out-quart),
              color 180ms var(--ease-out-quart),
              transform 240ms var(--ease-out-quart);
}
.cs-cta__btn--primary {
  background: var(--white);
  color: var(--rocket-blue);
  border: 1px solid var(--white);
}
.cs-cta__btn--primary:hover {
  background: transparent;
  color: var(--white);
  transform: translateY(-1px);
}
.cs-cta__btn--ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.cs-cta__btn--ghost:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}
.cs-cta__btn:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

/* ============================================================
   ENTRANCE CHOREOGRAPHY.
   ============================================================ */
.reveal { opacity: 1; transform: none; }
html.has-js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 720ms var(--ease-out-quint),
    transform 720ms var(--ease-out-quint);
  transition-delay: calc(var(--i, 0) * 80ms);
  will-change: opacity, transform;
}
html.has-js .reveal.is-in { opacity: 1; transform: translateY(0); }

.cs-pains__item .cs-pains__sig { width: 32px; }
html.has-js .cs-pains__item .cs-pains__sig {
  width: 0;
  transition: width 540ms var(--ease-out-quart);
  transition-delay: calc(var(--i, 0) * 80ms + 320ms);
}
html.has-js .cs-pains__item.is-in .cs-pains__sig { width: 32px; }

@media (prefers-reduced-motion: reduce) {
  .cs-hero__dot { animation: none; }
  .cs-cta__btn { transition: none; }
  .cs-roll__icon * { transition: none !important; transform: none !important; stroke-dashoffset: 0 !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .cs-pains__item .cs-pains__sig { width: 32px; transition: none; }
}

.cs-context__caption a:focus-visible {
  outline: 2px solid var(--rocket-blue);
  outline-offset: 3px;
}