/* =============================================================================
   MAGI MACHINA — Page-specific compositions.
   ========================================================================== */

/* --- Capability readout --------------------------------------------------- */
.cap-list { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.cap-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9ch;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  padding-block: var(--sp-3);
  border-top: var(--hair) solid var(--line-2);
  color: var(--ink-soft);
}
.cap-list li::before {
  content: "▸";
  color: var(--accent);
  font-size: 0.8em;
}

/* --- Wave card — abstract ASCII water + caption ---------------------------- */
.hana-card {
  position: relative;
  isolation: isolate;     /* keeps the screen-blend glow inside the card */
  background: var(--paper-3);
  border: var(--hair) solid var(--line-2);
  border-radius: var(--radius);
  padding: var(--sp-4);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--sp-3);
  min-height: 22rem;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease),
              border-color var(--dur-s) var(--ease),
              background-color var(--dur-s) var(--ease-fade), color var(--dur-s) var(--ease-fade);
}
@media (hover: hover) and (pointer: fine) {
  .hana-card:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    box-shadow: var(--shadow-lift);
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hana-card:hover { transform: translateY(-3px); }
}
/* single-column layouts: the card rides the shell grid — its edges align
   with the header menu (the gutters keep it off the viewport edge) */
@media (max-width: 860px) {
  .hana-card { min-height: 19rem; }
}
.hana-card__art {
  grid-row: 1;
  place-self: center;
  font-size: clamp(3.8px, 0.52vw, 5.6px);
  font-weight: 500;
  line-height: 1.04;
  max-width: 100%;
  overflow: hidden;
  contain: layout style paint;
  /* small fields — the true halo is affordable here */
  text-shadow: var(--glow-strong);
}
:root[data-theme="dark"] .hana-card__art {
  text-shadow: none;
  filter: drop-shadow(0 0 8px rgba(124, 134, 255, 0.65))
          drop-shadow(0 0 28px rgba(90, 102, 255, 0.35));
}
:root[data-theme="magi"] .hana-card__art {
  text-shadow: none;
  filter: drop-shadow(0 0 8px rgba(61, 255, 115, 0.6))
          drop-shadow(0 0 26px rgba(61, 255, 115, 0.3));
}
.hana-card__caption {
  grid-row: 2;
  position: relative;
  z-index: 2;             /* above the card's grain veil */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  border-top: var(--hair) solid var(--line-2);
  padding-top: var(--sp-3);
}
.hana-card__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: var(--glow-soft);
}
.hana-card__line {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  text-align: right;
  max-width: 16rem;
}

/* --- Calm horizon — generative, seamless on the page paper ------------------- */
.wave-band {
  position: relative;
  min-height: clamp(18rem, 42vh, 26rem);
  display: grid;
  /* sky over water, split where horizonField() draws its waterline (58 %):
     the quote is centred in the sky and never sits on the crests */
  grid-template-rows: 58fr 42fr;
  align-items: center;
  overflow: hidden;
  cursor: crosshair;
}
.wave-band__inner {
  position: relative;
  z-index: 2;             /* the quote floats above the water */
  display: grid;
  gap: var(--sp-4);
  justify-items: center;
  pointer-events: none;   /* the cursor stirs the water below */
}
.wave-band__art {
  position: absolute;
  inset: 0;
  font-size: clamp(5px, 0.55vw, 7.5px);
  font-weight: 500;
  line-height: 1.04;
  overflow: hidden;
  contain: layout style paint;
  text-shadow: var(--glow-strong);
}
:root[data-theme="dark"] .wave-band__art {
  text-shadow: none;
  filter: drop-shadow(0 0 8px rgba(124, 134, 255, 0.65))
          drop-shadow(0 0 28px rgba(90, 102, 255, 0.35));
}
:root[data-theme="magi"] .wave-band__art {
  text-shadow: none;
  filter: drop-shadow(0 0 8px rgba(61, 255, 115, 0.6))
          drop-shadow(0 0 26px rgba(61, 255, 115, 0.3));
}
.wave-band__quote {
  /* two lines, exactly the dictionary's (it carries the break), and never a
     soft wrap inside one: a browser measuring the fitted box a hair too
     narrow would otherwise push « d'abord. » onto a line of its own */
  white-space: pre;
  font-family: var(--font-sans);
  font-size: clamp(1.1rem, 2.2vw, var(--fs-md));
  font-weight: 540;
  letter-spacing: -0.01em;
  text-align: center;
  max-width: 36rem;
  /* a clearing of calm paper, so the line stays legible over the live
     field — matches the page the band now sits on, in both themes */
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(2rem, 7vw, 4.5rem);
  background: radial-gradient(closest-side,
    var(--paper) 45%,
    color-mix(in srgb, var(--paper) 72%, transparent) 74%,
    transparent 100%);
}

/* --- Hermes portrait — the mark on a quiet card ------------------------------ */
.hermes-portrait {
  position: relative;
  aspect-ratio: 1 / 1.272;
  border: var(--hair) solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-3);
  display: grid;
  place-items: center;
}
.hermes-portrait__mark {
  position: relative;
  z-index: 1;
  width: 62%;
  mix-blend-mode: multiply;
  opacity: 0.92;
}
/* dark/magi themes: the b/w mark becomes light linework */
:root[data-theme="dark"] .hermes-portrait__mark,
:root[data-theme="magi"] .hermes-portrait__mark {
  filter: invert(1);
  mix-blend-mode: screen;
  opacity: 0.88;
}
.hermes-portrait .stamp {
  position: absolute;
  bottom: var(--sp-3); left: var(--sp-3);
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
}
.hermes-portrait .stamp::after { content: " ▮"; letter-spacing: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hermes-portrait .stamp::after { animation: mm-caret 1.1s steps(2, jump-none) infinite; }
  @keyframes mm-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
}

/* --- Case study panel (use-cases) ----------------------------------------------- */
/* follows the theme: paper card by day, deep night by night */
.study {
  background: var(--paper-3);
  color: var(--ink);
  border: var(--hair) solid var(--line-2);
  border-radius: var(--radius);
  padding: clamp(var(--sp-5), 6vw, var(--sp-7));
  position: relative;
  overflow: hidden;
  transition: background-color var(--dur-s) var(--ease-fade), color var(--dur-s) var(--ease-fade),
              border-color var(--dur-s) var(--ease-fade);
}
.study::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.8;
  box-shadow: 0 0 18px 0 color-mix(in srgb, var(--accent) 45%, transparent);
}
.study__grid { display: grid; grid-template-columns: 1.618fr 1fr; gap: clamp(var(--sp-4), 5vw, var(--sp-6)); align-items: center; position: relative; z-index: 1; }
.study__metrics { display: grid; gap: var(--sp-4); }
.study .metric__value { font-size: var(--fs-lg); }
.study__label { color: var(--ink-faint) !important; }
:root[data-theme="dark"] .study,
:root[data-theme="magi"] .study {
  background: var(--ocean-2);
  color: var(--sky-1);
  border-color: transparent;
}
:root[data-theme="dark"] .study::before,
:root[data-theme="magi"] .study::before {
  background: linear-gradient(90deg, transparent, var(--teal-1), transparent);
  box-shadow: 0 0 18px 0 color-mix(in srgb, var(--teal-1) 45%, transparent);
}
:root[data-theme="dark"] .study .metric__value,
:root[data-theme="magi"] .study .metric__value { color: var(--teal-1); }
:root[data-theme="dark"] .study__eyebrow,
:root[data-theme="magi"] .study__eyebrow { color: var(--teal-1) !important; }
:root[data-theme="dark"] .study__label,
:root[data-theme="magi"] .study__label { color: color-mix(in srgb, var(--sky-1) 55%, transparent) !important; }
@media (max-width: 860px) { .study__grid { grid-template-columns: 1fr; } }

/* --- Contact ----------------------------------------------------------------- */
/* the form should be reachable immediately — this page skips the big
   section padding (the sub-hero already provides the air above) */
#contact.section { padding-block-start: clamp(1.6rem, 3vw, 3rem); }
/* use cases: the honesty note opens the panel (no visible heading, so the
   top inset matches the panel's side inset), the filters breathe under it */
#cases.section { padding-block-start: clamp(var(--sp-4), 4.5vw, var(--sp-6)); }
.cases__note { margin: 0 0 var(--sp-4); max-width: 62ch; }
.contact-grid {
  display: grid;
  grid-template-columns: 1.618fr 1fr;
  gap: clamp(var(--sp-5), 6vw, var(--sp-7));
  align-items: start;
}
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
  /* single column: the aside detaches from the form notes above and
     breathes before its card */
  .contact-side-block { gap: var(--sp-4); margin-top: var(--sp-3); }
}
/* label above + card below — the same anatomy as a form row, so the card's
   top border lines up with the first input's */
.contact-side-block {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}
.contact-side {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--paper-3);
  border: var(--hair) solid var(--line-2);
  border-radius: var(--radius);
  align-content: start;
}
.contact-side__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.contact-side__row {
  display: grid;
  gap: var(--sp-1);
  justify-items: start;   /* links hug their text — underline stops with it */
  padding-block: var(--sp-2);
  border-top: var(--hair) solid var(--line-2);
}
.contact-side__row:first-of-type { border-top: 0; }
.form__note { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-faint); }
.form__note a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }

/* --- Blog list ---------------------------------------------------------------------------- */
.post-list { border-bottom: var(--hair) solid var(--line); }

/* --- CTA band ---------------------------------------------------------------------------------- */
.cta-band .display { font-size: clamp(2rem, 5vw, var(--fs-xl)); }


/* Prose variant of the capability list: full sentences instead of short
   capability lines, two columns when there is room. Used for the problem
   statement and the list of refusals. */
.cap-list--prose li {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  letter-spacing: 0;
  line-height: 1.5;
}
@media (min-width: 720px) {
  .cap-list--2 { grid-template-columns: 1fr 1fr; column-gap: var(--sp-5); }
}

/* =============================================================================
   Demo storyboard (home, section 02) — an illustration, not a product.
   A question gets typed, the send key answers, the reply comes into focus
   word by word, its sources surface with a small overshoot; then it all
   leaves upward and the next trade begins (js/demo.js). The three scenes
   are stacked in one grid cell with their full text laid out, so the card
   never changes height. No blinking caret: a still bar that follows the text.
   ========================================================================== */
.demo {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: clamp(var(--sp-5), 5vw, var(--sp-6));
  padding: clamp(var(--sp-4), 3vw, var(--sp-5));
  background: var(--paper-3);
  border: var(--hair) solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.demo__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
}
/* the scenes as three thin segments: each one a button (named by its trade
   for screen readers) that jumps to its scene; the active one fills up */
.demo__tabs {
  flex: 0 1 15rem;
  min-width: 0;
  display: flex;
  gap: 6px;
}
.demo__tab {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 14px;
  padding: 0;
}
.demo__tab > span {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.demo__prog {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 2px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--line-2);
  transition: background-color var(--dur-xs) var(--ease);
}
.demo__caption {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.demo__prog::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
}
.demo__tab[aria-pressed="true"] .demo__prog { background: var(--line); }
@media (hover: hover) and (pointer: fine) {
  .demo__tab:hover .demo__prog { background: color-mix(in srgb, var(--accent) 35%, transparent); }
}
/* pause / play (WCAG 2.2.2) — discreet, but always there */
.demo__toggle {
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  border-radius: var(--radius-pill);
  color: var(--ink-faint);
  transition: color var(--dur-xs) var(--ease), border-color var(--dur-xs) var(--ease),
              transform var(--dur-xs) var(--ease);
}
.demo__toggle::before,
.demo__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2px;
  height: 0.62rem;
  margin-top: -0.31rem;
  border-radius: 1px;
  background: currentColor;
}
.demo__toggle::before { left: calc(50% - 4px); }
.demo__toggle::after { left: calc(50% + 2px); }
.demo__toggle.is-paused::before {
  left: calc(50% - 3px);
  width: 0.55rem;
  height: 0.66rem;
  margin-top: -0.33rem;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.demo__toggle.is-paused::after { display: none; }
.demo__toggle:active { transform: scale(0.9); }
@media (hover: hover) and (pointer: fine) {
  .demo__toggle:hover { color: var(--accent); }
}

.demo__stage { display: grid; }
.demo__scene {
  grid-area: 1 / 1;
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  min-width: 0;
  visibility: hidden;
}
.demo__scene.is-active { visibility: visible; }

.demo__prompt {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  max-width: none;
  padding: 0.8em 0.9em 0.8em 1.1em;
  border: var(--hair) solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  font-size: clamp(0.98rem, 1.5vw, 1.08rem);
  line-height: 1.5;
}
.demo__mark {
  font-family: var(--font-mono);
  color: var(--accent);
  line-height: inherit;
}
.demo__q { flex: 1; min-width: 0; display: grid; }
.demo__q > span { grid-area: 1 / 1; }
.demo__q-ghost { visibility: hidden; }
/* the caret: a still bar riding at the end of the typed text */
.demo__scene.is-typing .demo__q-typed::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--accent);
}
.demo__send {
  position: relative;
  flex: none;
  width: 1.9rem;
  height: 1.6rem;
  border: var(--hair) solid var(--line);
  border-radius: 7px;
  color: var(--ink-faint);
  transition: color var(--dur-xs) var(--ease), background-color var(--dur-xs) var(--ease),
              border-color var(--dur-xs) var(--ease), opacity var(--dur-exit) var(--ease-in);
}
.demo__send::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.8rem;
  height: 0.8rem;
  background: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
}
.demo__scene.is-sent .demo__send,
.demo__scene.is-static .demo__send {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
:root[data-theme="dark"] .demo__scene.is-sent .demo__send,
:root[data-theme="magi"] .demo__scene.is-sent .demo__send { color: var(--ocean-2); }

.demo__answer {
  max-width: 46rem;
  font-size: clamp(1.15rem, 2.1vw, 1.45rem);
  font-weight: 520;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.demo__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  max-width: none;
}
.demo__src-label,
.demo__status {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.demo__src-label { margin-right: 0.35em; }
.demo__chip {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  padding: 0.38em 0.85em;
  border: var(--hair) solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  color: var(--accent);
  white-space: nowrap;
}
.demo__status { margin-left: auto; display: inline-flex; align-items: center; gap: 0.6em; }
.demo__status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* never an empty card: a pale prompt until the first letter, and still
   skeleton lines where the answer will come into focus — they hold through
   the thinking beat, then dissolve (fade + blur) just before the first word */
.demo__ph {
  color: var(--ink-faint);
  opacity: 0.8;
  pointer-events: none;
  transition: opacity var(--dur-xs) var(--ease-fade);
}
.demo__scene.has-text .demo__ph,
.demo__scene.is-static .demo__ph { opacity: 0; }
.demo__answer { position: relative; }
.demo__skel {
  position: absolute;
  top: 0.3em;
  left: 0;
  right: 0;
  display: grid;
  gap: 0.62em;
  pointer-events: none;
  opacity: 0;
  filter: blur(4px);
  transition: opacity var(--dur-exit) var(--ease-fade), filter var(--dur-exit) var(--ease-fade);
}
.demo__skel > i {
  display: block;
  height: 0.62em;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.demo__skel > i:nth-child(2) { width: 86%; }
.demo__skel > i:nth-child(3) { width: 44%; }
.demo__scene.is-thinking .demo__skel {
  opacity: 1;
  filter: none;
  transition-duration: var(--dur-xs);
}

/* the choreography (js/demo.js toggles .is-on / .is-sent / .is-leaving) */
.demo__scene:not(.is-static) .demo__answer .w:not(.is-on),
.demo__scene:not(.is-static) .demo__src-label:not(.is-on),
.demo__scene:not(.is-static) .demo__chip:not(.is-on),
.demo__scene:not(.is-static) .demo__status:not(.is-on) { opacity: 0; }
.demo__src-label { transition: opacity var(--dur-s) var(--ease-fade); }
.demo__answer .w { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  /* each streamed word settles slowly: several are still coming into focus
     while the next ones land, so the answer flows instead of snapping in */
  .demo__answer .w {
    translate: 0 0.3em;
    filter: blur(5px);
    transition: opacity var(--dur-m) var(--ease-fade), translate var(--dur-l) var(--ease),
                filter var(--dur-l) var(--ease);
  }
  .demo__chip, .demo__status {
    translate: 0 1.1rem;
    scale: 0.92;
    filter: blur(3px);
    transition: opacity var(--dur-s) var(--ease-fade), translate var(--dur-m) var(--ease-pop),
                scale var(--dur-m) var(--ease-pop), filter var(--dur-s) var(--ease);
  }
  .demo__scene .w.is-on, .demo__scene .demo__chip.is-on, .demo__scene .demo__status.is-on {
    translate: none;
    scale: none;
    filter: none;
  }
  .demo__scene.is-static .w, .demo__scene.is-static .demo__chip,
  .demo__scene.is-static .demo__status { translate: none; scale: none; filter: none; }
  .demo__scene.is-sent .demo__send { animation: mm-press var(--dur-s) var(--ease-pop); }
  @keyframes mm-press { 40% { transform: scale(0.84); } }
  /* leaving: everything lifts off and blurs, faster than it came, ease-in */
  .demo__scene.is-leaving .demo__q-typed,
  .demo__scene.is-leaving .demo__send,
  .demo__scene.is-leaving .w.is-on,
  .demo__scene.is-leaving .demo__chip.is-on,
  .demo__scene.is-leaving .demo__src-label.is-on,
  .demo__scene.is-leaving .demo__status.is-on {
    opacity: 0;
    translate: 0 -0.6em;
    filter: blur(4px);
    transition: opacity var(--dur-exit) var(--ease-in), translate var(--dur-exit) var(--ease-in),
                filter var(--dur-exit) var(--ease-in);
    transition-delay: calc(var(--i, 0) * 10ms);
  }
  .demo__scene.is-reset, .demo__scene.is-reset * { transition: none !important; animation: none !important; }
}
.demo__q-typed { transition: opacity var(--dur-exit) var(--ease-in); }

@media (max-width: 560px) {
  /* phones: segments on their own line, the caption and pause below */
  .demo__tabs { flex-basis: 100%; }
  .demo__caption { margin-left: 0; }
  .demo__toggle { margin-left: auto; }
  .demo__status { margin-left: 0; flex-basis: 100%; }
}

/* =============================================================================
   The pond behind each closing call to action (main.js pondField): water seen
   from above, very sparse, fading out from the button. Drops fall near it;
   the button sends its own ring when approached. Solid accent at night (the
   stretched .ascii light gradient would turn a full-band <pre> into a blob).
   ========================================================================== */
.cta-band { position: relative; overflow: hidden; isolation: isolate; }
.cta-band__pond {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  font-size: 7px;
  line-height: 1.04;
  color: var(--accent);
  opacity: 0.55;
  contain: layout style paint;
  -webkit-mask-image: radial-gradient(62% 72% at 50% 66%, #000 0%, rgba(0, 0, 0, 0.55) 46%, transparent 82%);
  mask-image: radial-gradient(62% 72% at 50% 66%, #000 0%, rgba(0, 0, 0, 0.55) 46%, transparent 82%);
}
:root[data-theme="dark"] .cta-band__pond,
:root[data-theme="magi"] .cta-band__pond {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--accent);
  opacity: 0.6;
}
/* letter-hugging knockout (as in the hero): the rings pass behind the text
   without ever crossing a letter */
.cta-band { --knock: var(--paper-2); }
:root[data-theme="dark"] .cta-band,
:root[data-theme="magi"] .cta-band { --knock: var(--ocean-2); }
.cta-band :is(h2, .section__lead, .cta-band__note) {
  text-shadow: 0 0 3px var(--knock), 0 0 10px var(--knock);
}
.cta-band .eyebrow {
  text-shadow: 0 0 3px var(--knock), 0 0 10px var(--knock), var(--glow-soft);
}