/* BeargrassPublishing v2 — bands.css.

   Owns the banded layout primitive: the .band wrapper, scene
   background with desktop/mobile dual-object swap, the hero band
   variant (eyebrow + headline + deck + conversation overlay), and
   per-mode treatments (Paper cream card / Night dark card / Open
   no-card frosted-strip cinema).

   Architecture:
     <section class="band band--hero">           hero band (one per page)
       <div class="band__bg">
         <object .band__bg-desktop ...>
         <object .band__bg-mobile ...>
       </div>
       <header class="band__content band__content--hero">...</header>
     </section>

     <main class="banded-main">
       <section class="band band--content" data-band-ordinal="N">
         <div class="band__bg">...</div>
         <div class="band__content">...content fragment...</div>
       </section>
       ...repeat per band...
     </main>

   Three modes (Paper / Night / Open) handled at the .band__content
   level. No !important.
*/

/* ============================================================
   Banded-main: full-width main, no inherited width constraints.
   ============================================================ */

body.layout-banded { background: var(--page-bg-deep); }
body.layout-banded main.banded-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ============================================================
   Band primitive
   ============================================================ */

.band {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 0;
  padding: var(--sp-3xl) var(--pad-x);
  min-height: 70vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Hero band — exactly one viewport on load. Eyebrow + headline +
   conversation overlay sit centered; scroll cue at bottom invites
   the read. Per Mark 2026-05-04: every page hero must be the viewport
   on load, no taller, no shorter, so the visitor sees "one moment,
   then the content opens". */
.band--hero {
  /* Subtract the sticky chrome height so the hero genuinely fits one
     viewport on load and the EXPLORE cue sits at the visible bottom,
     not below it. svh (small viewport height) ignores the mobile
     URL-bar collapse so the cue doesn't jump on scroll. Mark
     2026-05-05: the cue was rendering off-screen because the chrome
     pushed the band down by its own height. */
  min-height: calc(100svh - var(--chrome-h, 4.25rem));
  height: calc(100svh - var(--chrome-h, 4.25rem));
  padding: 3.5rem var(--pad-x) 1.5rem;
  align-items: stretch;
  flex-direction: column;
  justify-content: space-between;
}

@media (max-width: 720px) {
  /* Phone: bands are content-tall. The 60vh floor used at desktop creates
     800-1090px dead zones on phone where the scene SVG outlasts content
     and shows as stretched dark sky between bands (chrome mobile review,
     2026-05-07). Drop the floor; keep padding for breathing room. */
  .band         { min-height: 0; padding: var(--sp-2xl) var(--pad-x); }
  .band--hero {
    min-height: calc(100svh - var(--chrome-h, 3.75rem));
    height: auto;
    overflow: visible;
    padding: 2.5rem var(--pad-x) 1.25rem;
  }
}

/* Narrow desktop window (721-1023): the desktop hero layout is two
   columns (1fr + minmax(260px, 380px)) but the copy column compresses
   below ~370px and the headline + deck stack wraps tall enough to
   exceed the viewport-locked band height (height: 100svh - chrome).
   Audit at 2026-05-08 found 16 hero-overflow occurrences at v0721
   across paper/open/night.

   Cycle 1 fix (Mark 2026-05-08): release the locked height in this
   narrow-desktop range. Hero may grow taller than the viewport when
   content needs it. Trade: violates "exactly one viewport on load"
   in this width range. Less bad than the alternatives (overflow-hidden
   would clip text; hiding the chat overlay would touch the chatbot
   demo motif which is brand-locked). The "one viewport" intent
   continues to apply at 1024+ and at <=720. */
@media (min-width: 721px) and (max-width: 1023px) {
  .band--hero {
    height: auto;
    min-height: calc(100svh - var(--chrome-h, 4.25rem));
    overflow: visible;
  }
}

/* ============================================================
   Scene background — dual-object desktop/mobile swap
   ============================================================ */

.band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--page-bg-deep);
}
.band__bg-desktop,
.band__bg-mobile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.band__bg-desktop ::part(svg),
.band__bg-mobile  ::part(svg) { width: 100%; height: 100%; }

/* CSS object-fit on <object> isn't universally honored; use stretching
   inset:0 + width/height 100% which is the wrapping pattern that ships
   with the existing scene SVGs (they declare preserveAspectRatio="xMidYMid slice"). */
.band__bg-desktop { display: block; }
.band__bg-mobile  { display: none; }

@media (max-width: 768px) {
  .band__bg-desktop { display: none; }
  .band__bg-mobile  { display: block; }
}

.band > *:not(.band__bg) {
  position: relative;
  z-index: 1;
}

/* ============================================================
   Band content card (Paper + Night)
   ============================================================ */

.band__content {
  max-width: var(--w-content);
  width: 100%;
  margin: 0 auto;
  padding: var(--sp-2xl) var(--sp-2xl) var(--sp-xl);
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(35, 31, 26, 0.08);
  color: var(--ink);
  /* Cycle 1 fix (Mark 2026-05-08): width:100% with content-box default
     plus 40px sp-2xl padding pushed band content past its parent at
     narrow widths (audit at 320/360 open the-agent). Border-box folds
     padding into the width:100% computation. */
  box-sizing: border-box;
}
:root[data-mode="night"] .band__content:not(.band__content--hero) {
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7),
              0 0 0 1px rgba(240, 230, 207, 0.1);
}

/* Hero band content — transparent, no card, in every mode. The hero
   sits inside a 100vh band whose scene SVG is the canvas; a card or
   shadow on the headline plate fights the scene. Mark 2026-05-04:
   Night hero must read like Open hero, type direct on scene.

   The header itself becomes a column flex container that fills the
   band height and uses space-between, so the inner grid sits in the
   upper half (flex: 1 vertical center) and the EXPLORE cue pins to
   the band floor. The .band--hero space-between cannot do this on
   its own because .band__content--hero is its only in-flow child. */
.band__content--hero,
:root[data-mode="paper"] .band__content--hero,
:root[data-mode="night"] .band__content--hero,
:root[data-mode="open"]  .band__content--hero {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
  width: 100%;
  max-width: var(--w-content);
  color: var(--cream-fixed);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  margin: 0 auto;
}

/* Open mode — softer frosted plate so the scene shines through more.
   Mark 2026-05-05: split the difference between fully transparent
   (unreadable at warm peak) and 55% navy (too heavy). Now alpha 0.38
   with a lighter blur — type stays AA-Large, scene reads visibly.
   Cycle 1 fix (Mark 2026-05-08): added :not(.band__content--hero) to
   match the night-mode pattern at line 149. Without the qualifier this
   rule's padding (sp-2xl) tied with the compound hero rule's padding:0
   on specificity and won by source order, leaking 40px of horizontal
   padding into the hero band container in open mode. That was the
   210-occurrence open-mode hero overflow cluster. */
:root[data-mode="open"] .band__content:not(.band__content--hero) {
  background: rgba(10, 16, 36, 0.38);
  -webkit-backdrop-filter: blur(8px) saturate(0.95);
          backdrop-filter: blur(8px) saturate(0.95);
  border: 1px solid rgba(240, 230, 207, 0.14);
  box-shadow: 0 18px 36px rgba(10, 16, 36, 0.32);
  color: var(--cream-fixed);
  padding: var(--sp-2xl) var(--sp-2xl) var(--sp-xl);
  border-radius: var(--r-md);
}
/* Hero plate stays transparent — its own per-mode plate is on
   .band__hero-copy, not on the outer band content. */
:root[data-mode="open"] .band__content--hero {
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border: none;
  box-shadow: none;
}

/* ============================================================
   Hero band typography (locked spec — preserved from v1)
   ============================================================ */

.band__hero-inner {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 380px);
  gap: 3rem;
  align-items: center;
  flex: 1;
  width: 100%;
  max-width: var(--w-content);
  margin: 0 auto;
}
/* Learn essay hero — single column, content-height band.
   Cycle 2 fix (Mark 2026-05-08): the prior `1fr 1fr` template
   reserved a 50/50 right column for an article excerpt that the
   v2 generator never renders, so the right column was empty at
   desktop and the band's locked viewport height left ~400px of
   empty space below the copy at mobile. Single column collapses
   the empty slot; the band rule below releases the locked height
   so the hero is content-tall on essays specifically. */
body.layout-learn-essay .band__hero-inner {
  grid-template-columns: 1fr;
}
body.layout-learn-essay .band--hero {
  height: auto;
  min-height: auto;
}
@media (max-width: 720px) {
  .band__hero-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-2xl);
    align-items: start;
    width: 100%;
    min-width: 0;
  }
  .band__hero-copy {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: var(--sp-md) var(--sp-md);
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .band--hero { overflow-x: hidden; }
  /* Deck max-width: 52ch is wider than mobile viewport. Cap to plate
     width so the line wraps inside the plate, not past the edge. */
  .band__hero-deck { max-width: 100%; font-size: var(--fs-md); }
  .band__hero-headline { max-width: 100%; }
  .band__hero-eyebrow { font-size: 10px; letter-spacing: 0.22em; }
}
/* Phone (390px) — phone padding tightens further; hero copy must not
   touch the edge but also must use most of the width. */
@media (max-width: 480px) {
  .band--hero { padding: 1.5rem 0.75rem 1rem; }
  .band__hero-copy { padding: var(--sp-sm) var(--sp-md); border-radius: var(--r-sm); }
}

/* Hero copy block — per-mode tinted backdrop wash so the headline +
   deck always have AA-Large contrast against the SMIL scene at every
   phase. One shape, three color keys. Mark 2026-05-04: Paper hero
   was failing contrast at the warm SMIL peak; Night and Open held
   adequately but lacked register. Each mode now carries a soft
   blurred wash behind the copy with a left-rule accent in mode color
   — magazine-cover bar, not a floating card. */
.band__hero-copy {
  color: var(--cream-fixed);
  position: relative;
  isolation: isolate;
  padding: var(--sp-xl) var(--sp-2xl) var(--sp-xl) calc(var(--sp-2xl) + 4px);
  border-left: 2px solid rgba(240, 230, 207, 0.35);
  border-radius: var(--r-xs);
  -webkit-backdrop-filter: blur(18px) saturate(0.9);
          backdrop-filter: blur(18px) saturate(0.9);
}
@media (max-width: 720px) {
  .band__hero-copy { padding: var(--sp-lg) var(--sp-md); }
}

/* Paper hero — opaque cream paper plate, ink type. The prior 42%
   alpha plate failed AA at the SMIL warm peak (Mark 2026-05-05);
   bumped to a near-solid cream so the eyebrow + headline + deck have
   guaranteed reading contrast through every animation phase. */
:root[data-mode="paper"] .band__hero-copy {
  background: rgba(245, 235, 213, 0.94);
  border-left-color: var(--barn);
  box-shadow: 0 18px 40px rgba(35, 31, 26, 0.18);
}
/* Paper hero — cream plate. Hero H1 uses the same sheen pattern as
   the H2 sec-heading on Paper: ink → barn → ink letter-pan via
   background-clip:text. The cream plate makes a cream → warm-bright
   gradient invisible, so Paper switches to the dark-on-cream pair.
   The animation is the canonical sheenPan 12s, same as Night/Open. */
:root[data-mode="paper"] .band__hero-headline {
  background: linear-gradient(100deg,
    var(--ink) 0%, var(--ink) 40%,
    var(--barn) 50%,
    var(--ink) 60%, var(--ink) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  filter: none;
}
:root[data-mode="paper"] .band__hero-deck { color: var(--ink-sec); text-shadow: none; }
:root[data-mode="paper"] .band__hero-eyebrow {
  color: var(--barn);
  text-shadow: none;
  font-weight: 700;
}

/* Night hero — deep navy radial wash so cream type holds against any
   scene phase. Subtle, not a card. */
:root[data-mode="night"] .band__hero-copy {
  background: linear-gradient(120deg,
    rgba(10, 16, 36, 0.72) 0%,
    rgba(10, 16, 36, 0.55) 60%,
    rgba(10, 16, 36, 0.35) 100%);
  border-left-color: var(--warm-bright, #f4c45a);
}

/* Open hero — navy-tinted frosted strip with cream type. Same anatomy
   as Paper, opposite key. Keeps the cinematic-warm scene visible. */
:root[data-mode="open"] .band__hero-copy {
  background: rgba(10, 16, 36, 0.42);
  border-left-color: var(--warm-bright, #f4c45a);
}

.band__hero-eyebrow {
  font-family: var(--type-ui);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--cream-fixed);
  opacity: 0.92;
  margin: 0 0 1rem;
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.5);
}

.band__hero-rule {
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, rgba(240, 230, 207, 0.55), rgba(240, 230, 207, 0.05));
  margin: 1rem 0 1.4rem;
}

.band__hero-deck {
  font-family: var(--type-italic);
  font-variation-settings: "opsz" 36, "wght" 400, "SOFT" 50;
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: rgba(240, 230, 207, 0.94);
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.7);
  margin: 0;
  max-width: 52ch;
}

/* Hero H1 — Fraunces variable at fixed axis settings. Sized + tracked
   to match the v1 sunrise.css hero (clamp(2.2, 4.6vw, 3.6rem), max-width
   16ch, line-height 1.05). The hero H1 sits on a sunrise scene canvas
   in every mode (its scene SVG is per-band), so the type is always
   cream-fixed. The sheen is the canonical letter-pan: cream-fixed →
   warm-bright → cream-fixed at 12s, applied across all three modes. */
.band__hero-headline {
  font-family: var(--type-italic);
  font-variation-settings: "opsz" 144, "wght" 420, "SOFT" 30, "WONK" 0;
  /* Phase 3 token-fluid pass (Mark 2026-05-08): single clamp scaling
     1.7rem at 320px to 3.6rem at 1440px, no breakpoint snaps. The
     prior three-clamp stack had a regression at 720→721 where the
     headline shrank from 2.4 to 2.2 as the screen grew. */
  font-size: clamp(1.7rem, 1.16rem + 2.71vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
  font-weight: 400;
  background: linear-gradient(100deg,
    var(--cream-fixed) 0%, var(--cream-fixed) 40%,
    var(--warm-bright) 50%,
    var(--cream-fixed) 60%, var(--cream-fixed) 100%);
  background-size: 300% 100%;
  background-position: 100% 0%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin: 0 0 1rem;
  max-width: 16ch;
  filter: drop-shadow(0 2px 8px rgba(10, 16, 36, 0.7));
  animation: sheenPan 12s ease-in-out infinite;
}

/* Open hero — same sheen, plus the cinematic drop-shadow stack so
   the type lifts off the bright scene without fog. */
:root[data-mode="open"] .band__hero-headline {
  filter: drop-shadow(0 2px 8px rgba(10, 16, 36, 0.85))
          drop-shadow(0 0 24px rgba(10, 16, 36, 0.55))
          drop-shadow(0 0 1px rgba(244, 196, 90, 0.4));
}

/* Scroll cue — pinned to the bottom of the hero band so the visitor
   sees space-between rhythm: padding-top, headline+convo centered in
   the inner grid, and the EXPLORE arrow flush above the band edge.
   Mark 2026-05-04: prior layout had the cue floating just below the
   inner grid; now it lives at the viewport floor. */
.band__hero-cue {
  text-align: center;
  margin: 0 auto;
  padding-bottom: 0.5rem;
  color: var(--cream-fixed);
  font-family: var(--type-ui);
  font-size: 11px;
  letter-spacing: 0.05em;
  font-weight: 600;
  opacity: 0.85;
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.5);
}
.band__hero-cue-label { display: block; margin-bottom: 0.6em; }
.band__hero-cue-arrow {
  display: block;
  margin: 0 auto;
  width: 18px;
  height: 26px;
  animation: heroBounce 2.6s ease-in-out infinite;
}
.band__hero-cue-arrow svg { width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) {
  .band__hero-cue-arrow { animation: none; }
}

/* ============================================================
   Hero conversation overlay (typed Q+A bubbles)
   ============================================================ */

.hero-convo {
  position: relative;
  z-index: 5;
  color: var(--cream-fixed);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
  min-height: 7rem;
  max-width: 100%;
  box-sizing: border-box;
}
.hero-convo__bubble {
  position: relative;
  padding: 1.7em 1.1em 0.9em;
  margin-bottom: 0.9em;
  background: rgba(10, 16, 36, 0.45);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 4px 14px 14px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  opacity: 0;
  transform: translateY(8px);
  overflow: hidden;
  transition: opacity 0.5s ease, transform 0.5s ease;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.hero-convo__bubble--agent {
  border-radius: 14px 4px 14px 14px;
  background: rgba(212, 162, 90, 0.22);
  border-color: rgba(212, 162, 90, 0.45);
  margin-left: 1.4em;
}
.hero-convo__bubble.is-visible { opacity: 1; transform: translateY(0); }
.hero-convo__bubble.is-fading  { opacity: 0; transform: translateY(8px); }
/* Role label stacks above the message line so it never overlaps the
   typed text. Reviewer flagged label/text vertical collision; the
   prior absolute-positioned role was sitting on the same baseline as
   the first character of the typed text. */
.hero-convo__role {
  position: absolute;
  top: 0.55em;
  left: 1.1em;
  font-family: var(--type-ui);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.05em;
  font-weight: 700;
  opacity: 0.78;
}
.hero-convo__bubble--human .hero-convo__role { color: var(--olive); }
.hero-convo__bubble--agent .hero-convo__role { color: var(--warm); }
.hero-convo__text {
  display: block;
  white-space: normal;
  overflow-wrap: break-word;
  clip-path: inset(0 100% 0 0);
}
.hero-convo__bubble.is-typed .hero-convo__text {
  clip-path: inset(0 0 0 0);
}
@keyframes heroConvoType {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
/* Mobile — bubble becomes a column flex layout so the role label
   sits in its own row ABOVE the message and never overlaps the
   typed text. Mark 2026-05-05: 'CUSTOMER' was bleeding into the
   first line of the message. The label is moved out of absolute
   position and into a normal block above the message. */
@media (max-width: 720px) {
  .hero-convo,
  .hero-convo__bubble {
    max-width: 100%;
    box-sizing: border-box;
  }
  .hero-convo__bubble {
    padding: 0.7em 0.95em;
    display: flex;
    flex-direction: column;
    gap: 0.35em;
  }
  .hero-convo__role {
    position: static;
    display: block;
    margin: 0;
  }
  .hero-convo__text {
    white-space: normal;
    width: auto;
    display: block;
  }
}
.hero-convo__cursor {
  display: inline-block;
  width: 6px;
  height: 1em;
  background: currentColor;
  vertical-align: text-bottom;
  margin-left: 1px;
  animation: heroConvoCaret 1s steps(2, end) infinite;
}
@keyframes heroConvoCaret { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero-convo__bubble { opacity: 1; transform: none; }
  .hero-convo__text   { width: auto; white-space: normal; clip-path: none; }
  .hero-convo__cursor { animation: none; opacity: 0.5; }
}

@media (max-width: 720px) {
  .hero-convo { font-size: 12px; min-height: 6rem; }
  .hero-convo__bubble { padding: 0.75em 0.9em 0.75em 2.2em; }
  .hero-convo__bubble--agent { margin-left: 0.7em; }
}

/* Marquee Model C — three-pair cycle states.
   .is-pending hides the next pair until its slot.
   .is-dimmed lowers earlier pair to 55% as a fresh pair lands.
   .is-fading clears earlier pairs as the defer beat enters.
   The pair container is a flex column so customer + agent stack
   inside it the same way the prior single-pair layout did. */
.hero-convo__pair {
  display: flex;
  flex-direction: column;
  transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s 0s;
}
.hero-convo__pair.is-pending {
  display: none;
}
.hero-convo__pair.is-dimmed {
  opacity: 0.55;
}
.hero-convo__pair.is-fading {
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s 0.55s;
}

/* Approved-facts chip. Sits BELOW the agent bubble as a sibling
   inside .hero-convo__pair (flex column). Public Sans, sentence
   case, pill rounding. Hidden until the agent answer finishes
   typing, then fades in. Hero is always over a dark scene, so the
   chip always uses a dark-friendly plate. */
.hero-convo__chip {
  align-self: flex-start;
  margin: 0.4em 0 0 1.4em;
  padding: 0.15em 0.6em;
  font-family: var(--type-ui);
  font-size: 0.68rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
  font-weight: 600;
  border-radius: var(--r-pill);
  background: rgba(22, 33, 46, 0.78);
  color: var(--warm-bright);
  border: 1px solid rgba(240, 230, 207, 0.22);
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
}
.hero-convo__chip.is-visible { opacity: 0.9; }
.hero-convo__pair[data-defer="true"] .hero-convo__chip {
  background: rgba(166, 75, 59, 0.22);
  border-color: rgba(244, 196, 90, 0.35);
}

@media (max-width: 720px) {
  /* Phase 2 grid-stack: all three pairs share one grid cell so panel
     height is the tallest pair across the cycle. Inactive pairs hold
     their slot via visibility:hidden + opacity:0 so promoting or
     demoting a pair never reflows the chat panel. Mark 2026-05-08. */
  .hero-convo {
    display: grid;
    grid-template-columns: 1fr;
  }
  .hero-convo__pair {
    grid-column: 1;
    grid-row: 1;
  }
  .hero-convo__chip { margin-left: 0; }
  .hero-convo__pair.is-pending {
    display: flex;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  .hero-convo__pair.is-dimmed {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s 0.55s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-convo__pair { transition: none; }
  .hero-convo__chip { transition: none; }
}

/* ============================================================
   Hero panel — custom HTML in the hero right column. Used by the
   contact page to embed the contact form + call button directly
   in the hero, replacing the conversation overlay.
   ============================================================ */

/* Hero panel locked to the Open-mode dark frosted card across every
   mode. Mark 2026-05-05: the form card must read the same in Paper,
   Night, and Open. The :root[data-mode] qualifiers below pin every
   mode to the same surface so cascading mode rules cannot strip the
   eyebrow or the field surfaces. */
.hero-panel,
:root[data-mode="paper"] .hero-panel,
:root[data-mode="night"] .hero-panel,
:root[data-mode="open"]  .hero-panel {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 380px;
  background: rgba(10, 16, 36, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(0.92);
          backdrop-filter: blur(14px) saturate(0.92);
  border: 1px solid rgba(240, 230, 207, 0.18);
  border-radius: var(--r-md);
  padding: var(--sp-md) var(--sp-md) var(--sp-sm);
  color: var(--cream-fixed);
  box-shadow: 0 18px 40px rgba(10, 16, 36, 0.45);
  /* Cycle 1 fix (Mark 2026-05-08): width:100% with content-box pushed
     padding+border past the parent at narrow widths. Border-box keeps
     the panel inside its parent. */
  box-sizing: border-box;
}
.hero-panel__inner { display: flex; flex-direction: column; gap: 0.6rem; }
.hero-panel__eyebrow,
:root[data-mode="paper"] .hero-panel__eyebrow,
:root[data-mode="night"] .hero-panel__eyebrow,
:root[data-mode="open"]  .hero-panel__eyebrow {
  font-family: var(--type-ui);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--warm-bright, #f4c45a);
  text-shadow: 0 1px 2px rgba(10, 16, 36, 0.6);
  margin: 0;
}

.contact-form--hero,
:root[data-mode="paper"] .contact-form--hero,
:root[data-mode="night"] .contact-form--hero,
:root[data-mode="open"]  .contact-form--hero {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
}
.contact-form--hero .contact-form__row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
:root[data-mode="paper"] .contact-form--hero .contact-form__label,
:root[data-mode="night"] .contact-form--hero .contact-form__label,
:root[data-mode="open"]  .contact-form--hero .contact-form__label,
.contact-form--hero .contact-form__label {
  font-family: var(--type-ui);
  font-size: 11px;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: rgba(240, 230, 207, 0.78);
}
:root[data-mode="paper"] .contact-form--hero input,
:root[data-mode="paper"] .contact-form--hero textarea,
:root[data-mode="night"] .contact-form--hero input,
:root[data-mode="night"] .contact-form--hero textarea,
:root[data-mode="open"]  .contact-form--hero input,
:root[data-mode="open"]  .contact-form--hero textarea,
.contact-form--hero input,
.contact-form--hero textarea {
  font-family: var(--type-body);
  font-size: var(--fs-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(240, 230, 207, 0.22);
  border-radius: var(--r-sm);
  color: var(--cream-fixed);
  padding: 0.55em 0.7em;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}
.contact-form--hero input:focus,
.contact-form--hero textarea:focus {
  outline: none;
  border-color: var(--warm-bright, #f4c45a);
  background: rgba(255, 255, 255, 0.1);
}
.contact-form--hero ::placeholder { color: rgba(240, 230, 207, 0.45); }
.contact-form--hero .contact-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.3rem;
}
.contact-form--hero .contact-form__actions .btn-cta {
  flex: 1 1 auto;
  text-align: center;
  font-size: var(--fs-sm);
  padding: 0.65em 1.1em;
}
.contact-form--hero .contact-form__status {
  margin: 0;
  font-size: var(--fs-xs);
  color: rgba(240, 230, 207, 0.78);
  min-height: 1em;
}

@media (max-width: 720px) {
  /* Mark 2026-05-09: at mobile the hero panel sits below the copy
     in the single-column grid. Add margin auto so the panel
     centers within its grid cell when the cell is wider than
     the panel (e.g. 414 width where max-width 380 leaves 34px slack
     in the cell). At narrower widths max-width:100% takes over and
     centering is a no-op. */
  .hero-panel { max-width: 100%; margin-left: auto; margin-right: auto; }
  .hero-panel__inner { gap: 0.4rem; }
  .contact-form--hero .contact-form__actions .btn-cta { flex: 0 0 auto; width: 100%; }
}

/* ============================================================
   Per-band ornament glyph — chapter mark above the eyebrow.
   Each band carries a unique craft glyph in config; generator
   emits `<figure class="band__ornament">` at the top of the
   band content. Color follows the band's text color so the
   glyph reads in every mode without per-mode rules.
   ============================================================ */

.band__ornament {
  margin: 0 0 var(--sp-lg);
  width: 96px;
  height: 80px;
  color: var(--barn);
  opacity: 0.78;
  display: block;
}
.band__ornament svg {
  width: 100%;
  height: 100%;
  display: block;
}
.band__ornament svg, .band__ornament svg * { color: currentColor; }

/* Pullquote bands — ornament centers above the cinematic statement. */
.band[data-treatment="pullquote"] .band__ornament {
  margin: 0 auto var(--sp-md);
  color: var(--warm);
  opacity: 0.92;
  filter: drop-shadow(0 1px 4px rgba(10, 16, 36, 0.55));
}

/* Ornament color follows the body text color in that section so the
   SVG and the prose share one tone per mode. Paper = ink, Night /
   Open = cream. The selector explicitly mirrors the image-feature
   rule's specificity (`body.layout-banded .band[data-treatment]
   .band__ornament`) plus a `[data-mode]` qualifier, so the mode
   color always wins regardless of treatment. */
:root[data-mode="paper"] body.layout-banded .band[data-treatment] .band__ornament {
  color: var(--ink);
  opacity: 0.85;
}
:root[data-mode="night"] body.layout-banded .band[data-treatment] .band__ornament,
:root[data-mode="open"]  body.layout-banded .band[data-treatment] .band__ornament {
  color: var(--cream-fixed);
  opacity: 0.9;
  filter: drop-shadow(0 1px 6px rgba(10, 16, 36, 0.7));
}

/* Brand 4.7 / 4.17 two-tier sizing rule (Mark 2026-05-06):
   - Card-feature: 220x183, ornament beside copy. See rules at line ~1165.
   - Chip: 96x80, every other treatment.
   Magazine, pullquote, hoist, and tier-pair all share the chip box so
   the family reads as one size at one rhythm. The source is square
   (0 0 64 64), so 96x80 renders the SVG at 80x80 effective with 8px
   gutters, aligned to the eyebrow rule. */
.band[data-treatment="magazine"] .band__ornament,
.band[data-treatment="pullquote"] .band__ornament {
  width: 96px;
  height: 80px;
  margin-bottom: var(--sp-md);
}

/* Per-mode color tuning. Paper barn, Night warm, Open warm with lift. */
:root[data-mode="night"] .band__ornament { color: var(--warm); opacity: 0.86; }
:root[data-mode="open"]  .band__ornament {
  color: var(--warm);
  opacity: 0.92;
  filter: drop-shadow(0 1px 4px rgba(10, 16, 36, 0.65));
}

/* ============================================================
   Sec-break inside a band
   ============================================================ */

.band__content > .sec-break {
  margin: var(--sp-md) auto;
  max-width: 360px;
}
.sec-break .rule-line {
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.sec-break svg {
  width: 36px;
  height: 12px;
  color: currentColor;
}

/* ============================================================
   Treatment: m3 pullquote — no card, cinematic centered statement.
   The band carries one heading + one short paragraph, rendered as
   cream display type over the scene, like a verse on a wall. Used
   between prose bands to give the eye a beat.
   ============================================================ */

.band[data-treatment="pullquote"] {
  min-height: 80vh;
}
.band[data-treatment="pullquote"] .band__content {
  background: transparent;
  box-shadow: none;
  color: var(--cream-fixed);
  max-width: var(--w-content);
  padding: var(--sp-2xl) var(--sp-md);
  text-align: center;
}
/* Pullquote eyebrow header — center the whole stack so the pill and
   the cinematic statement share one axis. The global header.fx-eyebrow
   rule uses flex-column align-items:flex-start; override here to
   align-items:center inside pullquote bands. */
.band[data-treatment="pullquote"] .band__content header.fx-eyebrow,
:root[data-mode="paper"] .band[data-treatment="pullquote"] .band__content header.fx-eyebrow,
:root[data-mode="night"] .band[data-treatment="pullquote"] .band__content header.fx-eyebrow,
:root[data-mode="open"]  .band[data-treatment="pullquote"] .band__content header.fx-eyebrow {
  text-align: center;
  align-items: center;
  margin-bottom: var(--sp-md);
}
.band[data-treatment="pullquote"] .band__content .eyebrow {
  color: var(--warm-bright, #f4c45a);
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.7);
  margin-left: auto;
  margin-right: auto;
}
.band[data-treatment="pullquote"] .band__content .eyebrow::after {
  background: color-mix(in srgb, var(--warm) 55%, transparent);
}
.band[data-treatment="pullquote"] .band__content .sec-heading,
.band[data-treatment="pullquote"] .band__content h2 {
  font-family: var(--type-display);
  font-variation-settings: "opsz" 96, "wght" 400, "SOFT" 0, "WONK" 0;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.014em;
  color: var(--cream-fixed);
  -webkit-text-fill-color: var(--cream-fixed);
  background: none;
  background-image: none;
  text-shadow: 0 2px 12px rgba(10, 16, 36, 0.78),
               0 0 30px rgba(10, 16, 36, 0.45);
  max-width: 28ch;
  margin: 0 auto var(--sp-md);
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  animation: none;
  display: block;
  width: auto;
}
.band[data-treatment="pullquote"] .band__content p {
  font-family: var(--type-italic);
  font-variation-settings: "opsz" 96, "wght" 400, "SOFT" 60;
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  line-height: 1.5;
  color: var(--cream-fixed);
  text-shadow: 0 2px 6px rgba(10, 16, 36, 0.95),
               0 0 22px rgba(10, 16, 36, 0.8);
  max-width: 46ch;
  margin: 0 auto 1rem;
}
.band[data-treatment="pullquote"] .band__content a.cta {
  margin-top: var(--sp-md);
}

/* Cinematic statement reveal — the pullquote band is the cinematic beat
   of the page. Eyebrow, headline, and statement fade up + breathe in on
   scroll-into-view. View-timeline is honored on browsers that support
   it; older browsers fall back to a simple page-load fade-in (still
   cinematic-feeling). prefers-reduced-motion lands the band fully
   visible at start, no animation. */
@keyframes pullquoteReveal {
  0%   { opacity: 0; transform: translateY(20px); filter: blur(2px); }
  60%  { opacity: 1; transform: translateY(0);    filter: blur(0); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.band[data-treatment="pullquote"] .band__ornament,
.band[data-treatment="pullquote"] .band__content header.fx-eyebrow,
.band[data-treatment="pullquote"] .band__content .sec-heading,
.band[data-treatment="pullquote"] .band__content h2,
.band[data-treatment="pullquote"] .band__content p {
  animation: pullquoteReveal 1.2s ease-out both;
}
.band[data-treatment="pullquote"] .band__content header.fx-eyebrow { animation-delay: 0.05s; }
.band[data-treatment="pullquote"] .band__content .sec-heading,
.band[data-treatment="pullquote"] .band__content h2 { animation-delay: 0.25s; }
.band[data-treatment="pullquote"] .band__content p { animation-delay: 0.5s; }

@supports (animation-timeline: view()) {
  .band[data-treatment="pullquote"] .band__ornament,
  .band[data-treatment="pullquote"] .band__content header.fx-eyebrow,
  .band[data-treatment="pullquote"] .band__content .sec-heading,
  .band[data-treatment="pullquote"] .band__content h2,
  .band[data-treatment="pullquote"] .band__content p {
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
    animation-fill-mode: both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .band[data-treatment="pullquote"] .band__ornament,
  .band[data-treatment="pullquote"] .band__content header.fx-eyebrow,
  .band[data-treatment="pullquote"] .band__content .sec-heading,
  .band[data-treatment="pullquote"] .band__content h2,
  .band[data-treatment="pullquote"] .band__content p {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ============================================================
   Treatment: m2 magazine — wider card, two-column body. Eyebrow,
   sec-heading, body-open lead, and CTA span both columns; prose
   paragraphs flow into two columns with a hairline rule. Used for
   list-heavy bands (five-step process, six-things-included, four-rule
   Agent shape) where dense information benefits from a feature-article
   register.
   ============================================================ */

.band[data-treatment="magazine"] .band__content {
  max-width: var(--w-content);
  padding: var(--sp-2xl) var(--sp-3xl) var(--sp-xl);
}
.band[data-treatment="magazine"] .band__copy > p {
  font-size: var(--fs-md);
  line-height: 1.6;
}
/* Magazine column flow lives on .band__copy (the inner wrapper that
   render_band injects around fragment content). Targeting .band__copy
   here — not .band__content — is critical: the eyebrow header, body-open
   lead, and CTA are children of .band__copy, so the column-span rules
   need to match them as direct children. Mark 2026-05-05: H2 was falling
   into the left column on the-agent / the-website / how-we-build because
   the old selectors targeted .band__content > children, which the build
   wrap broke. */
@media (min-width: 880px) {
  .band[data-treatment="magazine"] .band__copy {
    column-count: 2;
    column-gap: var(--sp-2xl);
    column-rule: 1px solid var(--rule);
  }
  .band[data-treatment="magazine"] .band__copy > header.fx-eyebrow,
  .band[data-treatment="magazine"] .band__copy > .body-open,
  .band[data-treatment="magazine"] .band__copy > p.body-open,
  .band[data-treatment="magazine"] .band__copy > p.drop-cap,
  .band[data-treatment="magazine"] .band__copy > a.cta,
  .band[data-treatment="magazine"] .band__copy > .related-reading__list,
  .band[data-treatment="magazine"] .band__copy > figure {
    column-span: all;
  }
  .band[data-treatment="magazine"] .band__copy > p {
    break-inside: avoid;
    margin: 0 0 0.85rem;
  }
}
:root[data-mode="night"] .band[data-treatment="magazine"] .band__copy {
  column-rule-color: rgba(240, 230, 207, 0.18);
}
:root[data-mode="open"] .band[data-treatment="magazine"] .band__copy {
  column-rule-color: rgba(240, 230, 207, 0.22);
}

/* ============================================================
   Steps grid — N discrete numbered cards inside one band. Used by
   the-agent band I (the four-step Agent shape). Each card carries a
   numbered circle, a short title, and a body line. Grid auto-fits
   so 4 cards land in one row on desktop and stack on mobile.
   ============================================================ */

.band__content .steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap-lg);
  margin-top: var(--sp-lg);
}
/* Phone: single column so 3-up step cards do not overflow at narrow
   viewports. Chrome desktop review 2026-05-07 measured card 2 clipping
   at ~704px; auto-fit was packing 3 columns at the 220px minimum. */
@media (max-width: 720px) {
  .band__content .steps-grid { grid-template-columns: 1fr; }
}
.band__content .step-card {
  background: var(--paper-elev);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--sp-lg) var(--sp-lg) var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  color: var(--ink);
}
.band__content .step-card__num {
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: var(--barn);
  color: var(--cream-fixed);
  font-family: var(--type-italic);
  font-style: italic;
  font-weight: 700;
  font-size: var(--fs-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
.band__content .step-card__title {
  font-family: var(--type-italic);
  font-style: italic;
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
.band__content .step-card__body {
  font-family: var(--type-body);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-sec);
  margin: 0;
}

:root[data-mode="night"] .band__content .step-card {
  background: rgba(22, 33, 46, 0.78);
  border-color: rgba(240, 230, 207, 0.18);
  color: var(--cream-fixed);
}
:root[data-mode="night"] .band__content .step-card__num {
  background: var(--warm-bright);
  color: var(--ink-fixed);
}
:root[data-mode="night"] .band__content .step-card__title { color: var(--cream-fixed); }
:root[data-mode="night"] .band__content .step-card__body  { color: rgba(240, 230, 207, 0.82); }

:root[data-mode="open"] .band__content .step-card {
  background: rgba(10, 16, 36, 0.42);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border-color: rgba(240, 230, 207, 0.18);
  color: var(--cream-fixed);
}
:root[data-mode="open"] .band__content .step-card__num {
  background: var(--warm-bright);
  color: var(--ink-fixed);
}
:root[data-mode="open"] .band__content .step-card__title { color: var(--cream-fixed); }
:root[data-mode="open"] .band__content .step-card__body  { color: rgba(240, 230, 207, 0.94); }

/* ============================================================
   Sub-card pair — two cards side-by-side inside one band. Used by
   pricing band I (Website tier, Agent tier). Each .tier-card is a
   self-contained sub-plate with its own price, body, and CTA. The
   pair stacks at the small-card breakpoint so mobile reads as one
   tier per row.
   ============================================================ */

.band__content .tier-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-xl);
  margin-top: var(--sp-md);
}
@media (max-width: 760px) {
  .band__content .tier-pair { grid-template-columns: 1fr; }
}
.band__content .tier-card {
  background: var(--paper-elev);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: var(--sp-xl) var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
/* Card title: the friendly visitor name ("Your Website" / "Your Agent")
   set in the display serif. This is what the eye lands on first.
   Replaces the prior pill-style .fx-eyebrow on each card per the UX
   pass: a pill cannot do the work of a heading. */
.band__content .tier-card__title {
  font-family: var(--type-display);
  font-size: var(--fs-2xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.band__content .tier-card__tagline {
  font-family: var(--type-italic);
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--ink-sec);
  margin: 0 0 0.35rem;
  letter-spacing: 0;
}

/* Dependency chip: small top-right badge on the Agent card that says
   "Adds to Your Website". Communicates the dependency in one glance
   instead of burying it in prose. Survives mobile stacking. */
.band__content .tier-card { position: relative; }
.band__content .tier-card__dep-chip {
  position: absolute;
  top: var(--sp-md);
  right: var(--sp-md);
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  font-family: var(--type-ui);
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-sec);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
}

/* Two-row price block: Year 1 row, hairline rule, Year 2+ row. The
   rule is the visual statement that this is two phases of one
   relationship, not two random prices. Each row carries a small
   label below the figure. */
.band__content .tier-card__price-block {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.25rem 0 0.5rem;
}
.band__content .tier-card__price-rule {
  height: 1px;
  background: rgba(166, 75, 59, 0.30);
  border: 0;
  margin: 0;
}
.band__content .tier-card__price-row {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.band__content .tier-card__price {
  font-family: var(--type-italic);
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.band__content .tier-card__price .num {
  font-weight: 700;
  color: var(--barn);
}
.band__content .tier-card__price .unit { color: var(--ink-sec); font-style: italic; }
.band__content .tier-card__price .sep { color: var(--ink-ter); margin: 0 0.3em; }
.band__content .tier-card__price-row .label {
  font-family: var(--type-ui);
  font-size: var(--fs-xxs);
  letter-spacing: 0.04em;
  color: var(--ink-sec);
}
.band__content .tier-card .cta-row { margin-top: auto; padding-top: var(--sp-sm); }

/* Legacy: the old in-card .fx-eyebrow pill rule is no longer used by
   the redesigned cards. Kept harmless so any other surface that still
   uses it (none in v2 today) does not regress. */
.band__content .tier-card .fx-eyebrow {
  font-family: var(--type-ui);
  font-size: var(--fs-xxs);
  letter-spacing: 0.05em;
  color: var(--barn);
  margin: 0 0 0.2rem;
  font-weight: 700;
}

/* Pricing tier band needs a wider plate so two cards fit comfortably. */
body.page-pricing .band[data-band-ordinal="1"] .band__content {
  max-width: var(--w-content);
}

/* Night mode: tier sub-cards lift to elevated dark surface. */
:root[data-mode="night"] .band__content .tier-card {
  background: rgba(22, 33, 46, 0.78);
  border-color: rgba(240, 230, 207, 0.18);
  color: var(--cream-fixed);
}
:root[data-mode="night"] .band__content .tier-card__price { color: var(--cream-fixed); }
:root[data-mode="night"] .band__content .tier-card__price .num { color: var(--warm); }
:root[data-mode="night"] .band__content .tier-card__title { color: var(--cream-fixed); }
:root[data-mode="night"] .band__content .tier-card__tagline { color: rgba(240, 230, 207, 0.7); }
/* Bug fix: .unit and the per-row label inherited --ink-sec on dark
   surfaces and disappeared. Lift to cream-fixed at 85%. */
:root[data-mode="night"] .band__content .tier-card__price .unit,
:root[data-mode="night"] .band__content .tier-card__price-row .label {
  color: rgba(240, 230, 207, 0.85);
}
:root[data-mode="night"] .band__content .tier-card__price-rule {
  background: rgba(240, 230, 207, 0.18);
}
:root[data-mode="night"] .band__content .tier-card__dep-chip {
  color: rgba(240, 230, 207, 0.78);
  border-color: rgba(240, 230, 207, 0.28);
}

/* Open mode: tier sub-cards stay translucent so scene shows through. */
:root[data-mode="open"] .band__content .tier-card {
  background: rgba(10, 16, 36, 0.55);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-color: rgba(240, 230, 207, 0.22);
  color: var(--cream-fixed);
}
:root[data-mode="open"] .band__content .tier-card__price { color: var(--cream-fixed); }
:root[data-mode="open"] .band__content .tier-card__price .num { color: var(--warm-bright, #f4c45a); }
:root[data-mode="open"] .band__content .tier-card__title { color: var(--cream-fixed); }
:root[data-mode="open"] .band__content .tier-card__tagline { color: rgba(240, 230, 207, 0.7); }
/* Bug fix: same Open-mode lift for unit + per-row label. The Open
   capture before this rule showed "$75-125" gold-on-navy reading
   correctly while the unit "a month, year 1" went smudge-grey
   against the translucent navy plate. */
:root[data-mode="open"] .band__content .tier-card__price .unit,
:root[data-mode="open"] .band__content .tier-card__price-row .label {
  color: rgba(240, 230, 207, 0.85);
}
:root[data-mode="open"] .band__content .tier-card__price-rule {
  background: rgba(240, 230, 207, 0.18);
}
:root[data-mode="open"] .band__content .tier-card__dep-chip {
  color: rgba(240, 230, 207, 0.78);
  border-color: rgba(240, 230, 207, 0.28);
}

/* ============================================================
   Image-feature card variant — every banded page.

   Mark 2026-05-04: identical left-justified cards down a long page
   feel "kinda boring". Mark 2026-05-05: extend the rhythm to every
   banded page so width and ornament-side alternation is consistent
   site-wide. Each card band carries the ornament as a feature image
   beside the prose; even ordinals flip the ornament to the right.

   Bands containing a `.tier-pair` (pricing band I) opt out of the
   side-image layout — the pair already does the visual variation.
   ============================================================ */

body.layout-banded .band[data-treatment="card"] .band__content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--gap-xl);
  max-width: var(--w-content);
}
body.layout-banded .band[data-treatment="card"] .band__ornament {
  flex: 0 0 220px;
  width: 220px;
  max-width: 220px;
  height: auto;
  aspect-ratio: 6 / 5;
  margin: 0;
  opacity: 0.92;
  color: var(--barn);
}
body.layout-banded .band[data-treatment="card"] .band__ornament svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
body.layout-banded .band[data-treatment="card"] .band__copy {
  flex: 1 1 auto;
  min-width: 0;
}

/* Even bands flip: ornament on the right, copy on the left. */
body.layout-banded .band[data-band-ordinal="2"][data-treatment="card"] .band__ornament,
body.layout-banded .band[data-band-ordinal="4"][data-treatment="card"] .band__ornament {
  order: 2;
}

/* tier-pair bands (pricing band I) keep the column flow so the two
   sub-cards have the full plate width to spread across. */
body.layout-banded .band[data-treatment="card"]:has(.tier-pair) .band__content {
  flex-direction: column;
  align-items: stretch;
  max-width: var(--w-content);
}
body.layout-banded .band[data-treatment="card"]:has(.tier-pair) .band__ornament {
  flex: 0 0 auto;
  width: 96px;
  max-width: 96px;
  aspect-ratio: auto;
  height: 80px;
  margin: 0 auto var(--sp-sm);
  order: -1;
}

/* Read-On / related-reading bands — Mark 2026-05-05: the ornament
   should sit beside the eyebrow + H2 in the header, with the 3-card
   grid stretching full width below. We hoist the band__copy children
   into the band__content grid via display:contents so:
     row 1: small ornament | header (eyebrow + H2)
     row 2: 3-card grid spanning both columns
   Ornament shrinks to a header-scale chip (88×72) in this layout. */
body.layout-banded .band[data-treatment="card"]:has(.related-reading__list) .band__content {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-auto-rows: auto;
  align-items: center;
  gap: 0 var(--gap-lg);
  max-width: var(--w-content);
}
body.layout-banded .band[data-treatment="card"]:has(.related-reading__list) .band__ornament {
  grid-column: 1;
  grid-row: 1;
  flex: 0 0 auto;
  width: 96px;
  height: 80px;
  max-width: 96px;
  aspect-ratio: auto;
  margin: 0;
  order: 0;
}
body.layout-banded .band[data-treatment="card"]:has(.related-reading__list) .band__copy {
  display: contents;
}
body.layout-banded .band[data-treatment="card"]:has(.related-reading__list)
  .band__copy > header.fx-eyebrow {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}
body.layout-banded .band[data-treatment="card"]:has(.related-reading__list)
  .band__copy > .related-reading__list {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: var(--sp-lg);
}
@media (max-width: 760px) {
  body.layout-banded .band[data-treatment="card"]:has(.related-reading__list) .band__content {
    grid-template-columns: 1fr;
  }
  body.layout-banded .band[data-treatment="card"]:has(.related-reading__list) .band__ornament {
    grid-column: 1;
    margin: 0 auto var(--sp-sm);
  }
  body.layout-banded .band[data-treatment="card"]:has(.related-reading__list)
    .band__copy > header.fx-eyebrow {
    grid-column: 1;
    grid-row: 2;
    text-align: center;
  }
  body.layout-banded .band[data-treatment="card"]:has(.related-reading__list)
    .band__copy > .related-reading__list {
    grid-row: 3;
  }
}

/* Same hoist pattern for bands containing a .steps-grid OR a
   .library-list: small ornament chip next to the H2 in row 1, the
   N-card grid spans both columns in row 2. Without this, the ornament
   would take ~50% of the band width and force the cards into a 2x2
   instead of 1xN row. Mark 2026-05-05: the-agent band I needed all
   four step cards in one row at desktop; /learn/ band I needed the
   same treatment for the .library-list cards. */
body.layout-banded .band[data-treatment="card"]:has(.library-list) .band__content,
body.layout-banded .band[data-treatment="card"]:has(.start-here-list) .band__content {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-auto-rows: auto;
  gap: 0 var(--gap-lg);
  max-width: var(--w-content);
}
body.layout-banded .band[data-treatment="card"]:has(.library-list) .band__ornament,
body.layout-banded .band[data-treatment="card"]:has(.start-here-list) .band__ornament {
  grid-column: 1;
  grid-row: 1 / span 2;
  flex: 0 0 auto;
  width: 96px;
  height: 80px;
  max-width: 96px;
  aspect-ratio: auto;
  margin: 0;
  align-self: center;
}
body.layout-banded .band[data-treatment="card"]:has(.library-list) .band__copy,
body.layout-banded .band[data-treatment="card"]:has(.start-here-list) .band__copy {
  display: contents;
}
body.layout-banded .band[data-treatment="card"]:has(.library-list)
  .band__copy > span.fx-eyebrow,
body.layout-banded .band[data-treatment="card"]:has(.library-list)
  .band__copy > header.fx-eyebrow,
body.layout-banded .band[data-treatment="card"]:has(.start-here-list)
  .band__copy > span.fx-eyebrow,
body.layout-banded .band[data-treatment="card"]:has(.start-here-list)
  .band__copy > header.fx-eyebrow {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}
body.layout-banded .band[data-treatment="card"]:has(.library-list)
  .band__copy > h2.sec-heading,
body.layout-banded .band[data-treatment="card"]:has(.start-here-list)
  .band__copy > h2.sec-heading {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}
body.layout-banded .band[data-treatment="card"]:has(.library-list)
  .band__copy > p:not(.cta-row),
body.layout-banded .band[data-treatment="card"]:has(.library-list)
  .band__copy > p.drop-cap,
body.layout-banded .band[data-treatment="card"]:has(.start-here-list)
  .band__copy > p:not(.cta-row),
body.layout-banded .band[data-treatment="card"]:has(.start-here-list)
  .band__copy > p.drop-cap {
  grid-column: 1 / -1;
  margin: var(--sp-md) 0 0;
}
body.layout-banded .band[data-treatment="card"]:has(.library-list)
  .band__copy > .library-list,
body.layout-banded .band[data-treatment="card"]:has(.start-here-list)
  .band__copy > .start-here-list {
  grid-column: 1 / -1;
  margin-top: var(--sp-lg);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--rule);
}
body.layout-banded .band[data-treatment="card"]:has(.library-list)
  .band__copy > p.cta-row,
body.layout-banded .band[data-treatment="card"]:has(.start-here-list)
  .band__copy > p.cta-row {
  grid-column: 1 / -1;
  margin-top: var(--sp-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md);
}
@media (max-width: 760px) {
  body.layout-banded .band[data-treatment="card"]:has(.library-list) .band__content {
    grid-template-columns: 1fr;
  }
  body.layout-banded .band[data-treatment="card"]:has(.library-list) .band__ornament {
    grid-column: 1;
    grid-row: 1;
    margin: 0 auto var(--sp-sm);
  }
  body.layout-banded .band[data-treatment="card"]:has(.library-list)
    .band__copy > span.fx-eyebrow,
  body.layout-banded .band[data-treatment="card"]:has(.library-list)
    .band__copy > header.fx-eyebrow {
    grid-column: 1;
    grid-row: 2;
    text-align: center;
  }
  body.layout-banded .band[data-treatment="card"]:has(.library-list)
    .band__copy > h2.sec-heading {
    grid-column: 1;
    grid-row: 3;
    text-align: center;
  }
  body.layout-banded .band[data-treatment="card"]:has(.library-list)
    .band__copy > p,
  body.layout-banded .band[data-treatment="card"]:has(.library-list)
    .band__copy > p.drop-cap,
  body.layout-banded .band[data-treatment="card"]:has(.library-list)
    .band__copy > .library-list {
    grid-row: auto;
  }
}


body.layout-banded .band[data-treatment="card"]:has(.steps-grid) .band__content {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-auto-rows: auto;
  align-items: center;
  gap: 0 var(--gap-lg);
  max-width: var(--w-content);
}
body.layout-banded .band[data-treatment="card"]:has(.steps-grid) .band__ornament {
  grid-column: 1;
  grid-row: 1;
  flex: 0 0 auto;
  width: 96px;
  height: 80px;
  max-width: 96px;
  aspect-ratio: auto;
  margin: 0;
  order: 0;
}
body.layout-banded .band[data-treatment="card"]:has(.steps-grid) .band__copy {
  display: contents;
}
body.layout-banded .band[data-treatment="card"]:has(.steps-grid)
  .band__copy > header.fx-eyebrow,
body.layout-banded .band[data-treatment="card"]:has(.steps-grid)
  .band__copy > .body-open,
body.layout-banded .band[data-treatment="card"]:has(.steps-grid)
  .band__copy > p.body-open {
  grid-column: 2;
  margin: 0;
}
body.layout-banded .band[data-treatment="card"]:has(.steps-grid)
  .band__copy > .body-open,
body.layout-banded .band[data-treatment="card"]:has(.steps-grid)
  .band__copy > p.body-open {
  grid-row: 2;
  margin-top: var(--sp-sm);
}
body.layout-banded .band[data-treatment="card"]:has(.steps-grid)
  .band__copy > header.fx-eyebrow {
  grid-row: 1;
}
body.layout-banded .band[data-treatment="card"]:has(.steps-grid)
  .band__copy > .steps-grid {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: var(--sp-lg);
}
@media (max-width: 760px) {
  body.layout-banded .band[data-treatment="card"]:has(.steps-grid) .band__content {
    grid-template-columns: 1fr;
  }
  /* Mark 2026-05-08: ornament + eyebrow header were both placed at
     row 1 / column 1 on mobile because the desktop grid-row was not
     overridden, so the SVG painted on top of the H2. Lock the rows
     explicitly so each piece occupies its own row. */
  body.layout-banded .band[data-treatment="card"]:has(.steps-grid) .band__ornament {
    grid-column: 1;
    grid-row: 1;
    margin: 0 auto var(--sp-sm);
  }
  body.layout-banded .band[data-treatment="card"]:has(.steps-grid)
    .band__copy > header.fx-eyebrow {
    grid-column: 1;
    grid-row: 2;
    text-align: center;
  }
  body.layout-banded .band[data-treatment="card"]:has(.steps-grid)
    .band__copy > .body-open,
  body.layout-banded .band[data-treatment="card"]:has(.steps-grid)
    .band__copy > p.body-open {
    grid-column: 1;
    grid-row: 3;
    text-align: center;
  }
  body.layout-banded .band[data-treatment="card"]:has(.steps-grid)
    .band__copy > .steps-grid {
    grid-column: 1;
    grid-row: 4;
  }
}

/* Mobile: collapse to single column, ornament half-size centered
   above prose with tight gap. Mark 2026-05-05: ornaments at 220px
   wasted real estate on phones; halved to 80px with reduced gap. */
@media (max-width: 760px) {
  body.layout-banded .band[data-treatment="card"] .band__content {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-md);
    padding: var(--sp-lg) var(--sp-md);
  }
  body.layout-banded .band[data-band-ordinal="2"][data-treatment="card"] .band__ornament,
  body.layout-banded .band[data-band-ordinal="4"][data-treatment="card"] .band__ornament {
    order: -1;
  }
  body.layout-banded .band[data-treatment="card"] .band__ornament {
    width: 80px;
    max-width: 80px;
    height: auto;
    aspect-ratio: 6 / 5;
    flex: 0 0 auto;
    margin: 0 auto 0.25rem;
  }
  /* Mobile chip cohesion: hoist treatments share the card-feature
     mobile size so the whole site reads at one rhythm on phones. */
  body.layout-banded .band[data-treatment="card"]:has(.related-reading__list) .band__ornament,
  body.layout-banded .band[data-treatment="card"]:has(.library-list) .band__ornament,
  body.layout-banded .band[data-treatment="card"]:has(.start-here-list) .band__ornament,
  body.layout-banded .band[data-treatment="card"]:has(.steps-grid) .band__ornament {
    width: 80px;
    height: auto;
    aspect-ratio: 6 / 5;
    max-width: 80px;
  }
}

@media (max-width: 720px) {
  body.layout-learn-essay .band__hero-inner { grid-template-columns: 1fr; }
}