/* ============================================================
   sunrise.css — single-source-of-truth for the sunrise + 3-mode
   toggle layer. Refactored 2026-05-03.

   Selector strategy: all rules anchored on body classes set at
   build time. Available classes (per build):
     homepage  body.bgai-studio.page-index
     about     body.bgai-studio.page-about
     sub-pages body.bgai-studio.page-{the-website,pricing,faq,...}
                 → matched as bgai-studio:not(.page-index):not(.page-about)
     learn     body.almanac-heritage.bgai-learn.page-learn-*
     almanac   body.almanac-heritage.page-almanac
   Body classes survive JS errors and are present at first paint.
   The data-sunrise attribute and the .pattern-x-card JS wrap
   remain as runtime enhancements but no rule depends on them.

   Mode strategy (per Mark, 2026-05-03):
     paper — solid cream paper, sunrise only behind hero
     dawn  — cream ~60%, backdrop-blur, mountains read through
     open  — no paper. Type + ornaments live on the sunrise
             itself, in cream and warm tones, full publication DNA
             carried over the modern sky.

   Layout sections:
     1. Persistent sunrise background
     2. Chrome over sunrise (all pages with sunrise)
     3. Pattern Y. Full hero (homepage + about)
     4. Pattern X. Cream card over sunrise (sub-pages)
     5. Pattern Z. Frosted cards over sunrise (Learn)
     6. Hero conversation overlay
     7. Mode variations
     8. Reduced motion + mobile
   ============================================================ */


/* === 1. Persistent sunrise background ============================
   Rendered into base.html for every page. Hidden by inline JS on
   pages without a sunrise (e.g. /almanac/). Position: fixed so it
   stays behind as the visitor scrolls. */

/* Body becomes the positioning anchor so sunrise-bg can stretch
   to the full document height. fixed-position made the sunrise
   only visible in the first viewport; for the dawn/open modes
   where every section sits over sunrise, the sunrise needs to
   extend down the entire page. */
body { position: relative; }
.sunrise-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 100vh;
  z-index: 0;
  pointer-events: none;
  background: #0a1024;
}
.sunrise-bg svg,
.sunrise-bg object {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
/* Pattern X dims the sunrise so the cream card holds reading rhythm.
   In open mode we lift the dim so the sunrise reads more brightly. */
.sunrise-bg--dim { filter: brightness(0.78) saturate(0.92); }
html[data-mode="open"] .sunrise-bg--dim { filter: brightness(0.9) saturate(0.96); }


/* === 2. Chrome over sunrise =====================================
   Every page with the .sunrise-bg active gets the chrome inverted
   to cream-on-dark. Anchored on the body classes that opt in. */

body.page-index .heritage-chrome,
body.page-about .heritage-chrome,
body.bgai-studio:not(.page-index):not(.page-about) .heritage-chrome,
body.bgai-learn .heritage-chrome {
  background-color: transparent;
  background-image: linear-gradient(to bottom, rgba(10, 16, 36, 0.78) 0%, rgba(10, 16, 36, 0.42) 60%, rgba(10, 16, 36, 0) 100%);
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.page-index .heritage-chrome .bgai-wm .w-beargrass,
body.page-about .heritage-chrome .bgai-wm .w-beargrass,
body.bgai-studio:not(.page-index):not(.page-about) .heritage-chrome .bgai-wm .w-beargrass,
body.bgai-learn .heritage-chrome .bgai-wm .w-beargrass {
  color: var(--cream-fixed);
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.85), 0 0 14px rgba(10, 16, 36, 0.5);
}

body.page-index .heritage-chrome .bgai-wm .w-ai,
body.page-about .heritage-chrome .bgai-wm .w-ai,
body.bgai-studio:not(.page-index):not(.page-about) .heritage-chrome .bgai-wm .w-ai,
body.bgai-learn .heritage-chrome .bgai-wm .w-ai {
  color: #f4c45a;
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.85), 0 0 14px rgba(10, 16, 36, 0.5);
}

body.page-index .heritage-sitenav a,
body.page-about .heritage-sitenav a,
body.bgai-studio:not(.page-index):not(.page-about) .heritage-sitenav a,
body.bgai-learn .heritage-sitenav a {
  color: var(--cream-fixed);
  opacity: 0.92;
  text-shadow: 0 1px 3px rgba(10, 16, 36, 0.85);
}

body.page-index .heritage-sitenav a:hover,
body.page-about .heritage-sitenav a:hover,
body.bgai-studio:not(.page-index):not(.page-about) .heritage-sitenav a:hover,
body.bgai-learn .heritage-sitenav a:hover { opacity: 1; }

body.page-index .nav-cta,
body.page-about .nav-cta,
body.bgai-studio:not(.page-index):not(.page-about) .nav-cta {
  background: var(--barn);
  color: var(--cream-fixed);
  padding: 0.4em 0.85em;
  border-radius: 3px;
}
body.page-index .mode-toggle__btn,
body.page-about .mode-toggle__btn,
body.bgai-studio:not(.page-index):not(.page-about) .mode-toggle__btn,
body.bgai-learn .mode-toggle__btn { color: var(--cream-fixed); }

/* Section-nav row (Learn library / topics / about, Almanac sections)
   reads cream-on-dark too so it doesn't break the inverted chrome. */
body.page-index .heritage-chrome__inner--section,
body.page-about .heritage-chrome__inner--section,
body.bgai-studio:not(.page-index):not(.page-about) .heritage-chrome__inner--section,
body.bgai-learn .heritage-chrome__inner--section {
  border-top-color: rgba(244, 235, 215, 0.18);
  background: transparent;
}
body.page-index .heritage-sectionnav a,
body.page-about .heritage-sectionnav a,
body.bgai-studio:not(.page-index):not(.page-about) .heritage-sectionnav a,
body.bgai-learn .heritage-sectionnav a {
  color: rgba(244, 235, 215, 0.78);
  text-shadow: 0 1px 3px rgba(10, 16, 36, 0.85);
}
body.page-index .heritage-sectionnav a:hover,
body.page-about .heritage-sectionnav a:hover,
body.bgai-studio:not(.page-index):not(.page-about) .heritage-sectionnav a:hover,
body.bgai-learn .heritage-sectionnav a:hover { color: var(--cream-fixed); }
body.page-index .heritage-sectionnav a.is-active,
body.page-about .heritage-sectionnav a.is-active,
body.bgai-studio:not(.page-index):not(.page-about) .heritage-sectionnav a.is-active,
body.bgai-learn .heritage-sectionnav a.is-active { color: var(--warm); }
body.page-index .heritage-edition,
body.page-about .heritage-edition,
body.bgai-studio:not(.page-index):not(.page-about) .heritage-edition,
body.bgai-learn .heritage-edition { color: var(--warm); }
body.page-index .heritage-edition::after,
body.page-about .heritage-edition::after,
body.bgai-studio:not(.page-index):not(.page-about) .heritage-edition::after,
body.bgai-learn .heritage-edition::after { background: rgba(244, 235, 215, 0.32); }

/* Horizon stripe at the top of the chrome on Pattern Y pages */
body.page-index .heritage-chrome::before,
body.page-about .heritage-chrome::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--indigo) 0%, var(--barn) 50%, var(--warm) 100%);
  opacity: 0.85;
  z-index: 1;
}


/* === 3. Pattern Y. Full sunrise hero (homepage + about) ==========
   Two pages share the layout: home.body.html uses .home-hero,
   about.body.html uses .article-head--hero. Both render as a
   full-viewport hero with copy on the left, conversation on the
   right, scroll cue at the bottom. */

body.page-index .home-hero,
body.page-about .article-head--hero {
  position: relative;
  z-index: 5;
  min-height: 88vh;
  margin: 0;
  padding: 6rem var(--pad-x) 2rem;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-bottom: 0;
  max-width: none;
  text-align: left;
  color: var(--cream-fixed);
}
body.page-index .home-hero__inner,
body.page-about .article-head--hero__inner {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 380px);
  gap: 3rem;
  align-items: center;
  flex: 1;
  width: 100%;
  max-width: var(--w-wide);
  margin: 0 auto;
}
body.page-index .home-hero__copy,
body.page-about .article-head--hero__copy { color: var(--cream-fixed); }

/* Eyebrow */
body.page-index .home-hero__eyebrow,
body.page-about .article-head--hero__eyebrow {
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-weight: 600;
  margin: 0 0 1rem;
  opacity: 0.92;
  color: var(--cream-fixed);
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.5);
}

/* Headline. About uses .headline.sheen-swell which heritage.css clips
   to a gradient — clear it so cream solid type renders. */
body.page-index .home-hero__headline,
body.page-about .article-head--hero h1,
body.page-about .article-head--hero .headline,
body.page-about .article-head--hero .headline.sheen-swell {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 0 0 1rem;
  max-width: 16ch;
  font-weight: 400;
  color: var(--cream-fixed);
  background: none;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--cream-fixed);
  text-shadow: 0 2px 12px rgba(10, 16, 36, 0.7), 0 0 30px rgba(10, 16, 36, 0.45);
}

/* Hero rule */
body.page-index .home-hero__rule,
body.page-about .article-head--hero__rule {
  height: 1px;
  width: 4em;
  background: var(--cream-fixed);
  opacity: 0.55;
  margin: 0.7rem 0;
}

/* Hero deck */
body.page-index .home-hero__deck,
body.page-about .article-head--hero__deck {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 36, "wght" 450, "SOFT" 60;
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  margin: 0;
  max-width: 50ch;
  color: var(--cream-fixed);
  text-shadow: 0 2px 8px rgba(10, 16, 36, 0.7);
}

/* Scroll cue */
body.page-index .home-hero__cue,
body.page-about .article-head--hero__cue {
  position: relative;
  z-index: 5;
  text-align: center;
  color: var(--cream-fixed);
  font-family: var(--ui);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-weight: 600;
  opacity: 0.8;
  margin: 2rem auto 0;
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.5);
}
body.page-index .home-hero__cue-label,
body.page-about .article-head--hero__cue-label { display: block; margin-bottom: 0.6em; }
body.page-index .home-hero__cue-arrow,
body.page-about .article-head--hero__cue-arrow {
  display: block;
  margin: 0 auto;
  width: 18px;
  height: 26px;
  animation: heroBounce 2.6s ease-in-out infinite;
}
body.page-index .home-hero__cue-arrow svg,
body.page-about .article-head--hero__cue-arrow svg { width: 100%; height: 100%; }
@keyframes heroBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* Below-the-fold paper. Sections paint cream full-bleed via the
   shadow-spread trick so the cream extends past the section's
   max-width to the viewport edges. clip-path keeps scrollbars
   tame. Mode rules in section 7 swap the spread color for dawn /
   open variants. */
body.page-index .lead,
body.page-index .toc,
body.page-index .sss-triptych,
body.page-index .site-foot,
body.page-about main.sales-main,
body.page-about .sss-triptych,
body.page-about .site-foot {
  position: relative;
  z-index: 5;
  background: var(--paper);
  box-shadow: 0 0 0 100vmax var(--paper);
  clip-path: inset(0 -100vmax);
}
body.page-index .lead { padding-top: var(--sp-xl); margin-top: 0; }


/* === 4. Pattern X. Cream paper card over sunrise =================
   Sub-pages: /the-website, /the-agent, /how-we-build, /pricing,
   /faq, /contact, /bloom-test. The article-head + main + related
   are wrapped at runtime into a single .pattern-x-card container.
   If the JS hasn't run, the per-element fallback below renders
   the same surface (with a visible seam, expected at first paint). */

body.bgai-studio:not(.page-index):not(.page-about) main.sales-main {
  position: relative;
  z-index: 5;
  max-width: var(--w-wide);
  margin: 4rem auto;
  padding: 0;
  background: transparent;
}

/* Single-card surface (preferred, JS-wrapped) */
body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card {
  position: relative;
  z-index: 5;
  max-width: var(--w-wide);
  margin: 4rem auto;
  background: var(--paper);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(35, 31, 26, 0.06);
  overflow: hidden;
  padding: var(--sp-xl);
}
body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card .article-head,
body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card main.sales-main,
body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card .related-reading {
  background: transparent;
  margin: 0;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
  max-width: none;
}
body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card .article-head { margin-bottom: var(--sp-md); }
body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card main.sales-main > section { margin-bottom: var(--sp-md); }
body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card .related-reading {
  margin-top: var(--sp-md);
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-md);
}

/* Per-element fallback for first paint before JS wraps */
body.bgai-studio:not(.page-index):not(.page-about) :not(.pattern-x-card) > .article-head {
  position: relative;
  z-index: 5;
  max-width: var(--w-wide);
  margin: 4rem auto 0;
  padding: var(--sp-xl) var(--sp-xl) var(--sp-md);
  background: var(--paper);
  border-radius: 8px 8px 0 0;
}
body.bgai-studio:not(.page-index):not(.page-about) :not(.pattern-x-card) > main.sales-main {
  margin-top: 0;
  background: var(--paper);
  border-radius: 0 0 8px 8px;
  padding: var(--sp-md) var(--sp-xl) var(--sp-xl);
}

/* Footer always on solid paper for Pattern X */
body.bgai-studio:not(.page-index):not(.page-about) .sss-triptych,
body.bgai-studio:not(.page-index):not(.page-about) .site-foot {
  position: relative;
  z-index: 5;
  background: var(--paper);
}


/* === 5. Pattern Z. Frosted cards over sunrise (Learn library) ====
   Each major section sits in its own frosted-cream card so the
   sunrise reads continuously between cards. */

body.bgai-learn main {
  position: relative;
  z-index: 5;
  max-width: var(--w-wide);
  margin: 4rem auto;
  padding: 0 var(--pad-x);
  background: transparent;
}
body.bgai-learn .article-head,
body.bgai-learn .library-start-here,
body.bgai-learn .library-toc > div,
body.bgai-learn .library-editorial > div,
body.bgai-learn .soft-cta {
  background: rgba(244, 235, 215, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 6px;
  padding: var(--sp-md) var(--sp-lg);
  margin-bottom: var(--sp-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
body.bgai-learn .library-toc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
}
body.bgai-learn .library-toc > div { margin-bottom: 0; }
body.bgai-learn .sss-triptych,
body.bgai-learn .site-foot {
  position: relative;
  z-index: 5;
  background: var(--paper);
}

/* Essay pages under Learn. They use heritage article styling.
   Sit in a single frosted-cream card so the sunrise reads behind. */
body.bgai-learn .article-head:not(:first-child) ~ .article-body,
body.bgai-learn article > .article-body {
  background: rgba(244, 235, 215, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


/* === 6. Hero conversation overlay ===============================
   The .hero-convo aside lives in body fragments, gets typed in by
   /static/js/hero-conversation.js. Bubble shape stays consistent
   across all three patterns; only the position shifts. */

.hero-convo {
  position: relative;
  color: var(--cream-fixed);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
  min-height: 7rem;
}
.hero-convo__bubble {
  position: relative;
  padding: 0.9em 1.1em 0.9em 2.4em;
  margin-bottom: 0.9em;
  background: rgba(10, 16, 36, 0.45);
  backdrop-filter: blur(10px);
  -webkit-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;
}
.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); }
.hero-convo__role {
  position: absolute;
  top: 0.85em;
  left: 0.85em;
  font-family: var(--ui);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 700;
  opacity: 0.78;
}
.hero-convo__bubble--human .hero-convo__role { color: #b7c090; }
.hero-convo__bubble--agent .hero-convo__role { color: #d4a25a; }
.hero-convo__text {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  white-space: nowrap;
  width: 0;
}
.hero-convo__bubble.is-typed .hero-convo__text { width: 100% !important; white-space: normal; }
.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; } }

/* Position per pattern */
body.page-index .hero-convo,
body.page-about .hero-convo { position: relative; z-index: 5; }

body.bgai-studio:not(.page-index):not(.page-about) .hero-convo--card {
  display: block;
  max-width: var(--w-wide);
  margin: 5.5rem auto 0;
  padding: 0 var(--pad-x);
  position: relative;
  z-index: 5;
  min-height: 6rem;
}
body.bgai-studio:not(.page-index):not(.page-about) .hero-convo--card .hero-convo__bubble { max-width: 480px; }
body.bgai-studio:not(.page-index):not(.page-about) .hero-convo--card .hero-convo__bubble--agent { margin-left: 4em; }

body.bgai-learn .hero-convo--card {
  display: block;
  max-width: var(--w-wide);
  margin: 5rem auto 1rem;
  padding: 0 var(--pad-x);
  position: relative;
  z-index: 5;
}


/* === 7. Mode variations =========================================
   paper — solid cream cards, ink type, sunrise behind hero only
   night — SAME card structure as Paper, dark palette via tokens
   open  — no paper. Type rides the sunrise in cream + warm.

   Night requires no per-component selectors: the token swap in
   tokens.css means existing `var(--paper)`, `var(--ink)`, etc.
   render as dark surfaces with cream type automatically. The few
   places below that hardcode rgba() values get a Night override.

   Open-mode rules preserve the publication DNA: drop caps,
   sec-break ornaments, eyebrows with Roman numerals, fx- animations,
   pullquote rules, "Fin." mark, bio-divider — they get re-tinted
   for cream-on-sky readability but the structure is unchanged.
   ============================================================= */

/* ---------- Night ------------------------------------------- */
/* The full-bleed shadow-spread on .lead/.toc/main hardcoded paper
   color in the spread; swap to the live --paper token so Night flips
   correctly. */
html[data-mode="night"] body.page-index .lead,
html[data-mode="night"] body.page-index .toc,
html[data-mode="night"] body.page-index .sss-triptych,
html[data-mode="night"] body.page-index .site-foot,
html[data-mode="night"] body.page-about main.sales-main,
html[data-mode="night"] body.page-about .sss-triptych,
html[data-mode="night"] body.page-about .site-foot {
  background: var(--paper);
  box-shadow: 0 0 0 100vmax var(--paper);
  clip-path: inset(0 -100vmax);
}
/* The .lead-inner card on the homepage uses --paper-elev too; nothing
   to override — token swap handles it. */

/* Pattern X cards (sub-pages) and Pattern Z (Learn) use --paper too —
   token swap handles them. The chrome inversion still wants cream-on-
   dark sky, which already uses cream literals; nothing to change. */

/* ---------- Open -------------------------------------------- */
/* No paper. Cream + warm type rides the sunrise. Publication DNA
   preserved. Drop caps render in barn red on the sky. Sec-break
   ornaments tint to warm. Eyebrows go cream. */

/* Homepage sections */
html[data-mode="open"] body.page-index .lead,
html[data-mode="open"] body.page-index .toc {
  background: transparent;
  box-shadow: none;
  clip-path: none;
  color: var(--cream-fixed);
}
html[data-mode="open"] body.page-index .lead h2,
html[data-mode="open"] body.page-index .toc h2,
html[data-mode="open"] body.page-index .toc h3,
html[data-mode="open"] body.page-index .lead-headline {
  color: var(--cream-fixed);
  -webkit-text-fill-color: var(--cream-fixed);
  background: none;
  background-image: none;
  text-shadow: 0 2px 8px rgba(10, 16, 36, 0.65);
}
html[data-mode="open"] body.page-index .lead p,
html[data-mode="open"] body.page-index .toc p,
html[data-mode="open"] body.page-index .lead-deck {
  color: rgba(244, 235, 215, 0.92);
  text-shadow: 0 1px 3px rgba(10, 16, 36, 0.6);
}
html[data-mode="open"] body.page-index .toc .eyebrow,
html[data-mode="open"] body.page-index .lead-eyebrow,
html[data-mode="open"] body.page-index .toc-byline { color: var(--warm); }
html[data-mode="open"] body.page-index .lead-fig img {
  opacity: 0.85;
  filter: brightness(0.92) saturate(0.95);
  border-radius: 6px;
}
html[data-mode="open"] body.page-index .lead-read {
  color: var(--cream-fixed);
  border-bottom: 1px solid var(--warm);
}

/* About page main */
html[data-mode="open"] body.page-about main.sales-main {
  background: transparent;
  box-shadow: none;
  clip-path: none;
  color: var(--cream-fixed);
}
html[data-mode="open"] body.page-about main.sales-main h2,
html[data-mode="open"] body.page-about main.sales-main h3,
html[data-mode="open"] body.page-about main.sales-main .sec-heading {
  color: var(--cream-fixed);
  -webkit-text-fill-color: var(--cream-fixed);
  background: none;
  background-image: none;
  text-shadow: 0 2px 8px rgba(10, 16, 36, 0.65);
}
html[data-mode="open"] body.page-about main.sales-main p,
html[data-mode="open"] body.page-about main.sales-main .deck {
  color: rgba(244, 235, 215, 0.92);
  text-shadow: 0 1px 3px rgba(10, 16, 36, 0.6);
}

/* Pattern X sub-pages */
html[data-mode="open"] body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card {
  background: transparent;
  box-shadow: none;
  color: var(--cream-fixed);
}
html[data-mode="open"] body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card .headline,
html[data-mode="open"] body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card .sec-heading,
html[data-mode="open"] body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card h1,
html[data-mode="open"] body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card h2,
html[data-mode="open"] body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card h3 {
  color: var(--cream-fixed);
  -webkit-text-fill-color: var(--cream-fixed);
  background: none;
  background-image: none;
  text-shadow: 0 2px 8px rgba(10, 16, 36, 0.65);
}
html[data-mode="open"] body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card p,
html[data-mode="open"] body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card .deck,
html[data-mode="open"] body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card .body-open,
html[data-mode="open"] body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card .related-reading p {
  color: rgba(244, 235, 215, 0.92);
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.7);
}
html[data-mode="open"] body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card .body-open__cap,
html[data-mode="open"] body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card .article-head__rail,
html[data-mode="open"] body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card .related-reading__eyebrow,
html[data-mode="open"] body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card .fx-eyebrow {
  color: var(--warm);
}
/* Tier cards (pricing) and form panels keep a soft cream backing in open
   so the structured content remains scannable. */
html[data-mode="open"] body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card .tier,
html[data-mode="open"] body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card .bloom-form,
html[data-mode="open"] body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card .bloom-results,
html[data-mode="open"] body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card .contact-form {
  background: rgba(239, 228, 202, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
}
html[data-mode="open"] body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card .tier h3,
html[data-mode="open"] body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card .tier h2 {
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  text-shadow: none;
}
html[data-mode="open"] body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card .tier p {
  color: var(--ink);
  text-shadow: none;
}

/* Pullquote and sec-break ornaments in open mode */
html[data-mode="open"] body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card blockquote,
html[data-mode="open"] body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card .pullquote {
  color: var(--cream-fixed);
  border-color: rgba(244, 235, 215, 0.35);
}
html[data-mode="open"] body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card .sec-break svg { color: var(--warm); }

/* Drop caps lift to warm in open mode (visible on cream-on-sky) */
html[data-mode="open"] body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card .drop-cap,
html[data-mode="open"] body.bgai-studio:not(.page-index):not(.page-about) .pattern-x-card .body-open__cap {
  color: var(--warm);
  -webkit-text-fill-color: var(--warm);
}

/* Learn library cards in open mode — most translucent of the three */
html[data-mode="open"] body.bgai-learn .article-head,
html[data-mode="open"] body.bgai-learn .library-start-here,
html[data-mode="open"] body.bgai-learn .library-toc > div,
html[data-mode="open"] body.bgai-learn .library-editorial > div,
html[data-mode="open"] body.bgai-learn .soft-cta {
  background: rgba(244, 235, 215, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}
/* Learn essay body in open mode */
html[data-mode="open"] body.bgai-learn .article-body {
  background: rgba(244, 235, 215, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}


/* === 7b. Multi-section hero bands ===============================
   Pages opt in by including <section class="hero-band">…</section>
   blocks inside main. Main automatically goes full-width when it
   contains a band (CSS :has()), so the band's scene fills the
   viewport without breakout tricks.

   Per-mode treatment of the band's content card:
     paper — solid cream card, ink type, drop cap in barn
     night — solid dark card (token swap), cream type, drop cap in warm
     open  — no card, type rides the scene in cream + warm
   ============================================================= */

/* Main loses its max-width and paper bg when it contains bands.
   Allows bands to render full viewport width with their own scenes. */
/* main wrappers on banded pages — strip every layout constraint so
   bands inside are flush against the viewport. The .banded-main class
   is used on new banded pages; the .sales-main:has() rule covers
   pages that retain the legacy class. */
body.bgai-studio main.sales-main:has(.hero-band),
main.banded-main {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  width: 100% !important;
  display: block;
}

/* CRITICAL: the chrome JS sets data-sunrise="card" on bgai-studio
   sub-pages, which fires Pattern X paper-card styling on .article-head
   and main.sales-main from earlier sections of this file. Banded pages
   must override that — bands own the layout, scene own the bg. */
body[data-sunrise="card"]:has(.hero-band) .article-head {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
  grid-template-columns: none !important;
}
body[data-sunrise="card"]:has(.hero-band) main.sales-main,
body[data-sunrise="card"]:has(.hero-band) main {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
}
body[data-sunrise="card"]:has(.hero-band) .pattern-x-card {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
body:has(.hero-band) .sunrise-bg { display: none; }
/* Same for related-reading + footer when they sit after bands —
   they still want cream paper, but as their own banded surface. */
body.bgai-studio main.sales-main:has(.hero-band) > .related-reading,
body.bgai-studio main.sales-main:has(.hero-band) > .bg-illus {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: var(--sp-xl) var(--pad-x);
  background: var(--paper);
}
/* On banded pages the persistent .sunrise-bg div would compete with each
   band's own scene, making the page read as one continuous sky. Hide it
   so each band visibly owns its scene and section breaks are obvious. */
body.bgai-studio:has(.hero-band) .sunrise-bg,
body:has(.hero-band-hero) .sunrise-bg {
  display: none;
}

.hero-band {
  position: relative;
  isolation: isolate;
  min-height: 70vh;
  padding: var(--sp-3xl) var(--pad-x);
  /* Width equals the visible viewport (excluding scrollbar). 100% works
     because parent main is full body width via the banded-main rule.
     Avoid 100vw — that includes scrollbar gutter and causes horizontal
     overflow. */
  width: 100%;
  margin: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
/* Tall hero variant — for the page's opening band. Holds article-head
   markup (eyebrow + headline + rule + deck + conversation) instead of
   a section card. Always shows mountains; never letterboxed. */
.hero-band--hero {
  min-height: 88vh;
  padding: 6rem var(--pad-x) 2rem;
  align-items: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero-band--hero .hero-band__content {
  background: transparent;
  box-shadow: none;
  padding: 0;
  max-width: var(--w-wide);
  color: var(--cream-fixed);
}
.hero-band--hero .article-head--hero__inner {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 380px);
  gap: 3rem;
  align-items: center;
  flex: 1;
  width: 100%;
}
.hero-band--hero .article-head--hero__cue {
  text-align: center;
  margin: 2rem auto 0;
  color: var(--cream-fixed);
  font-family: var(--ui);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-weight: 600;
  opacity: 0.8;
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.5);
}
.hero-band--hero .article-head--hero__cue-label {
  display: block;
  margin-bottom: 0.6em;
}
.hero-band--hero .article-head--hero__cue-arrow {
  display: block;
  margin: 0 auto;
  width: 18px;
  height: 26px;
  animation: heroBounce 2.6s ease-in-out infinite;
}
.hero-band--hero .article-head--hero__cue-arrow svg {
  width: 100%;
  height: 100%;
}
@media (max-width: 720px) {
  .hero-band--hero .article-head--hero__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: end;
  }
}
.hero-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #0a1024;
}
.hero-band__bg object,
.hero-band__bg img,
.hero-band__bg picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.hero-band > *:not(.hero-band__bg) {
  position: relative;
  z-index: 1;
}

/* The band's content card. Reuses the publication ornaments inside;
   the card scales with viewport — narrow on phones (max-w-read),
   wider on desktops up to 880px so the band reads more cinematic. */
.hero-band__content,
.hero-band > section {
  max-width: clamp(640px, 60vw, 880px);
  width: 100%;
  margin: 0 auto;
  padding: var(--sp-2xl) var(--sp-2xl) var(--sp-xl);
  background: var(--paper);
  border-radius: 10px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(35, 31, 26, 0.08);
  color: var(--ink);
}
/* Night gets a slightly stronger shadow against the dark surface */
html[data-mode="night"] .hero-band__content,
html[data-mode="night"] .hero-band > section {
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(240, 230, 207, 0.1);
}
/* Sec-break inside a band: tint to warm so the rule reads against the scene */
.hero-band > .sec-break,
.hero-band__content > .sec-break {
  margin: var(--sp-md) auto;
  color: var(--barn);
}

/* Open mode: no card. Type rides the scene with text-shadow stack. */
html[data-mode="open"] .hero-band__content,
html[data-mode="open"] .hero-band > section {
  background: transparent;
  box-shadow: none;
  color: #f0e6cf;
  padding: var(--sp-2xl) var(--sp-2xl) var(--sp-xl);
}
/* Open-mode headlines get a frosted dark backdrop strip behind them
   so type lifts off bright sunrise/golden/sunset scenes. The strip
   is sized to the heading's natural width via inline-block + padding
   and uses backdrop-blur for that gradient-clipped publication feel.
   The strip's gradient pans across via openSheenPan keyframe so the
   "shimmer" lives in the lift, not the type — Open's sheen identity. */
/* Open-mode body H2 / sec-headings — ONE continuous frosted strip per
   heading (not per-line). Block-level with width: fit-content so the
   strip hugs the text but holds together across line wraps. The strip
   pans warm gradient as the Open shimmer signature. */
html[data-mode="open"] .hero-band__content h1,
html[data-mode="open"] .hero-band__content h2,
html[data-mode="open"] .hero-band__content h3,
html[data-mode="open"] .hero-band__content .sec-heading,
html[data-mode="open"] .hero-band > section h1,
html[data-mode="open"] .hero-band > section h2,
html[data-mode="open"] .hero-band > section h3,
html[data-mode="open"] .hero-band > section .sec-heading {
  color: var(--cream-fixed);
  -webkit-text-fill-color: var(--cream-fixed);
  background-image: linear-gradient(100deg,
    rgba(10, 16, 36, 0.62) 0%,
    rgba(10, 16, 36, 0.62) 35%,
    rgba(212, 162, 90, 0.4) 50%,
    rgba(10, 16, 36, 0.62) 65%,
    rgba(10, 16, 36, 0.62) 100%);
  background-size: 250% 100%;
  background-position: 100% 0%;
  display: block;
  width: fit-content;
  max-width: 100%;
  box-decoration-break: initial;
  -webkit-box-decoration-break: initial;
  padding: 0.3em 0.6em 0.34em;
  border-radius: 4px;
  box-shadow: 0 6px 22px rgba(10, 16, 36, 0.4);
  text-shadow: 0 2px 8px rgba(10, 16, 36, 0.7);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  font-family: var(--display);
  font-variation-settings: "opsz" 96, "wght" 420, "SOFT" 20, "WONK" 0;
  letter-spacing: -0.014em;
  line-height: 1.15;
  animation: openSheenPan 9s ease-in-out infinite;
}
/* === HERO H1 — superb typography pass, all modes ====================
   Lock the spec: tight letter-spacing (-0.022em), line-height 1.05,
   Caslon Display variable axis at display optical size (opsz 144).
   Per-mode color treatment below; layout shared.

   Open mode: SOLID cream type (no gradient text-clip — that combined
   with text-shadow read as fog on bright bgs). Drop-shadow filter
   provides the lift. Subtle filter-brightness pulse for shimmer.

   Night mode: subtle cream → gold → cream text-clip pan. Paper mode
   keeps existing sheen-swell from bgai-sales.css. */

html[data-mode="open"] .hero-band--hero .article-head--hero__copy,
html[data-mode="open"] .hero-band--hero .article-head--hero__eyebrow,
html[data-mode="open"] .hero-band--hero .article-head--hero__deck {
  background: none !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: none !important;
  display: block !important;
}

html[data-mode="open"] .hero-band--hero h1,
html[data-mode="open"] .hero-band--hero .headline {
  display: block !important;
  width: auto !important;
  max-width: 18ch !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-decoration-break: initial !important;
  -webkit-box-decoration-break: initial !important;
  line-height: 1.05 !important;
  letter-spacing: -0.022em !important;
  margin: 0 0 1rem !important;
  font-family: var(--display) !important;
  font-variation-settings: "opsz" 144, "wght" 400, "SOFT" 0, "WONK" 0 !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--cream-fixed) !important;
  -webkit-text-fill-color: var(--cream-fixed) !important;
  text-shadow: none !important;
  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));
  animation: heroCaslonBreath 14s ease-in-out infinite !important;
}
@keyframes heroCaslonBreath {
  0%, 100% { font-variation-settings: "opsz" 144, "wght" 400, "SOFT" 0, "WONK" 0; }
  50%      { font-variation-settings: "opsz" 144, "wght" 460, "SOFT" 30, "WONK" 0; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-mode="open"] .hero-band--hero h1,
  html[data-mode="open"] .hero-band--hero .headline { animation: none !important; }
}

/* Night hero — cream → gold gradient text-clip + same Caslon axis */
html[data-mode="night"] .hero-band--hero h1,
html[data-mode="night"] .hero-band--hero .headline {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "wght" 400, "SOFT" 0, "WONK" 0;
  line-height: 1.05;
  letter-spacing: -0.022em;
  background: linear-gradient(100deg,
    var(--cream-fixed) 0%, var(--cream-fixed) 40%,
    #f4c45a 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;
  filter: drop-shadow(0 2px 8px rgba(10, 16, 36, 0.7));
  animation: heroNightSheen 12s ease-in-out infinite;
}
@keyframes heroNightSheen {
  0%, 100% { background-position: 100% 0%; }
  50%      { background-position: 0% 0%; }
}

/* Paper hero — sits over scene, cream type + dark drop-shadow.
   Tight letter-spacing matches Open + Night for consistency across modes. */
html[data-mode="paper"] .hero-band--hero h1,
html[data-mode="paper"] .hero-band--hero .headline,
html:not([data-mode]) .hero-band--hero h1,
html:not([data-mode]) .hero-band--hero .headline {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "wght" 400, "SOFT" 0, "WONK" 0;
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--cream-fixed);
  background: none;
  background-image: none;
  -webkit-text-fill-color: var(--cream-fixed);
  filter: drop-shadow(0 2px 8px rgba(10, 16, 36, 0.78)) drop-shadow(0 0 24px rgba(10, 16, 36, 0.5));
}
html[data-mode="open"] .hero-band > section h2,
html[data-mode="open"] .hero-band > section .sec-heading,
html[data-mode="open"] .hero-band__content h2 {
  line-height: 1.55;
}
@keyframes openSheenPan {
  0%, 100% { background-position: 100% 0%; }
  50%      { background-position: 0% 0%; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-mode="open"] .hero-band__content h1,
  html[data-mode="open"] .hero-band__content h2,
  html[data-mode="open"] .hero-band > section h1,
  html[data-mode="open"] .hero-band > section h2,
  html[data-mode="open"] .hero-band > section .sec-heading { animation: none; }
}
html[data-mode="open"] .hero-band__content p,
html[data-mode="open"] .hero-band__content .deck,
html[data-mode="open"] .hero-band > section p,
html[data-mode="open"] .hero-band > section .deck {
  color: rgba(240, 230, 207, 0.94);
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.75);
}
html[data-mode="open"] .hero-band__content .eyebrow,
html[data-mode="open"] .hero-band > section .eyebrow,
html[data-mode="open"] .hero-band > section .fx-eyebrow .eyebrow { color: var(--warm); }
html[data-mode="open"] .hero-band > section .drop-cap,
html[data-mode="open"] .hero-band > section .body-open__cap,
html[data-mode="open"] .hero-band > section .drop-cap::first-letter {
  color: var(--warm);
  -webkit-text-fill-color: var(--warm);
}
html[data-mode="open"] .hero-band > section .pull,
html[data-mode="open"] .hero-band > section blockquote,
html[data-mode="open"] .hero-band > section .pullquote {
  color: #f0e6cf;
  border-left-color: var(--warm);
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.75);
}
html[data-mode="open"] .hero-band > section .sec-break svg { color: var(--warm); }

/* Open mode: body bg goes dark on banded pages so any vertical gap
   between the last band and the chrome footer reads as continuous
   night sky, not a cream strip cut. Heritage pages (no bands) keep
   the cream body bg in Open mode — they only have one section. */
html[data-mode="open"] body.bgai-studio:has(.hero-band) {
  background: #0a1024;
}

/* Open mode: footer adopts the Night palette so the cinematic feel
   carries past the last band into the chrome footer. Cream type on
   dark surface, gold AI accent, gold rule. Without this the cream
   footer reads as a hard cut back to "publication" mode. */
/* Open footer overrides need !important because earlier rules at
   higher specificity (e.g. body.bgai-studio:not(.page-index):not(.page-about)
   .site-foot) still set the cream background. The Open footer must
   render dark (Night palette) on every page. */
html[data-mode="open"] .sss-triptych,
html[data-mode="open"] .site-foot {
  background: #16212e !important;
  color: #f0e6cf !important;
  border-top-color: rgba(240, 230, 207, 0.18) !important;
}
html[data-mode="open"] .site-foot__wm .bgai-wm .w-beargrass { color: #f0e6cf !important; }
html[data-mode="open"] .site-foot__wm .bgai-wm .w-ai { color: #f4c45a !important; }
html[data-mode="open"] .sss-triptych__col,
html[data-mode="open"] .sss-triptych__sentence,
html[data-mode="open"] .site-foot a,
html[data-mode="open"] .site-foot__meta,
html[data-mode="open"] .site-foot__nav a,
html[data-mode="open"] .site-foot__nav h3,
html[data-mode="open"] .site-foot__nav__title { color: #f0e6cf !important; }
html[data-mode="open"] .sss-triptych__word { color: #f4c45a !important; }
html[data-mode="open"] .site-foot__sprig svg { color: #d4a25a !important; }


/* Per-mode H1/H2 shimmer treatment.
   Paper: keep the existing sheen-swell from bgai-sales.css (ink → warm gradient).
   Night: gradient updates to cream → gold → cream so it shimmers on dark cards.
   Open : NO gradient clip — gradient + text-shadow conflicts and reads as dirty
          smudged text. Solid cream + text-shadow only. */
html[data-mode="night"] .headline.sheen-swell,
html[data-mode="night"] .sec-heading.sheen-swell {
  background: linear-gradient(100deg,
    var(--ink) 0%, var(--ink) 40%,
    var(--warm) 50%,
    var(--ink) 60%, var(--ink) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
html[data-mode="open"] .headline.sheen-swell,
html[data-mode="open"] .sec-heading.sheen-swell,
html[data-mode="open"] .hero-band > section .headline,
html[data-mode="open"] .hero-band > section .headline.sheen-swell {
  background: none;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #f0e6cf;
  color: #f0e6cf;
  animation: none;
  text-shadow: 0 2px 10px rgba(10, 16, 36, 0.78), 0 0 30px rgba(10, 16, 36, 0.5);
}

/* Mobile: shorter bands so 5 sections don't = 5 viewport scrolls.
   On phones each band is ~50vh — content size leads, scene is
   contextual not dominant. Hero band stays taller for impact. */
@media (max-width: 720px) {
  .hero-band {
    min-height: 0;
    padding: var(--sp-xl) 1rem;
  }
  .hero-band--hero {
    min-height: 80vh;
    padding: 5rem 1rem 1.5rem;
  }
  .hero-band__content,
  .hero-band > section {
    padding: var(--sp-lg) var(--sp-md);
    max-width: 100%;
  }
}
/* Tablet sweet spot between mobile and desktop */
@media (min-width: 721px) and (max-width: 1024px) {
  .hero-band { min-height: 60vh; }
  .hero-band__content,
  .hero-band > section { max-width: 720px; }
}


/* === 8. Reduced motion + mobile =================================*/

@media (prefers-reduced-motion: reduce) {
  .hero-convo__cursor { animation: none; opacity: 0.5; }
  body.page-index .home-hero__cue-arrow,
  body.page-about .article-head--hero__cue-arrow { animation: none; }
  .hero-convo__bubble { opacity: 1 !important; transform: none !important; }
  .hero-convo__text { width: auto !important; white-space: normal !important; }
}

@media (max-width: 720px) {
  body.page-index .home-hero,
  body.page-about .article-head--hero {
    min-height: 100vh;
    padding: 5rem 1.5rem 1.5rem;
  }
  body.page-index .home-hero__inner,
  body.page-about .article-head--hero__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: end;
  }
  .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; }
  body.bgai-learn .library-toc { grid-template-columns: 1fr; }
}