/* ============================================================
   Sunrise hero patterns + 3-mode toggle behavior.
   Loaded after bgai-sales.css. Scoped per page so non-sunrise
   pages stay clean.
   ============================================================ */

/* === 1. Persistent sunrise background ===
   Active on any page that includes the .sunrise-bg element.
   Position: fixed so it stays behind as the visitor scrolls. */
.sunrise-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #0a1024;
}
.sunrise-bg svg,
.sunrise-bg object {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
/* Dimming for Pattern X (cards over sky) — softens the sunrise so
   prose on cream cards stays comfortable. */
.sunrise-bg--dim {
  filter: brightness(0.78) saturate(0.92);
}

/* === 2. Chrome over sunrise ===
   On pages with a fixed sunrise background, the chrome wordmark
   and nav need cream type instead of ink so they read against
   the dark sky. Scoped via body[data-sunrise]. */
body[data-sunrise] .heritage-chrome {
  background: linear-gradient(to bottom, rgba(10, 16, 36, 0.55) 0%, rgba(10, 16, 36, 0) 100%);
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-sunrise] .heritage-chrome .bgai-wm .w-beargrass { color: var(--paper); }
body[data-sunrise] .heritage-chrome .bgai-wm .w-ai { color: #d07968; }
body[data-sunrise] .heritage-sitenav a { color: var(--paper); opacity: 0.92; }
body[data-sunrise] .heritage-sitenav a:hover { opacity: 1; }
body[data-sunrise] .nav-cta {
  background: var(--barn);
  color: var(--paper);
  padding: 0.4em 0.85em;
  border-radius: 3px;
}
body[data-sunrise] .mode-toggle__btn { color: var(--paper); }

/* Persistent horizon stripe on Pattern Y pages — a 4px gradient
   bar at the top of the chrome that survives scroll, so the
   sky never fully leaves. */
body[data-sunrise="hero"] .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) === */
body[data-sunrise="hero"] .home-hero,
body[data-sunrise="hero"] .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;
  text-align: left;
  border-bottom: 0;
  max-width: none;
  color: var(--paper);
}
body[data-sunrise="hero"] .home-hero__inner,
body[data-sunrise="hero"] .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[data-sunrise="hero"] .home-hero__copy,
body[data-sunrise="hero"] .article-head--hero__copy {
  color: var(--paper);
}
body[data-sunrise="hero"] .home-hero__eyebrow,
body[data-sunrise="hero"] .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(--paper);
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.5);
}
body[data-sunrise="hero"] .home-hero__headline,
body[data-sunrise="hero"] .article-head--hero h1 {
  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(--paper);
  text-shadow: 0 2px 12px rgba(10, 16, 36, 0.7), 0 0 30px rgba(10, 16, 36, 0.45);
}
body[data-sunrise="hero"] .home-hero__rule,
body[data-sunrise="hero"] .article-head--hero__rule {
  height: 1px;
  width: 4em;
  background: var(--paper);
  opacity: 0.55;
  margin: 0.7rem 0;
}
body[data-sunrise="hero"] .home-hero__deck,
body[data-sunrise="hero"] .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(--paper);
  text-shadow: 0 2px 8px rgba(10, 16, 36, 0.7);
}

/* Below-the-fold paper — fully opaque so prose stays readable */
body[data-sunrise="hero"] .lead,
body[data-sunrise="hero"] .toc,
body[data-sunrise="hero"] main.sales-main,
body[data-sunrise="hero"] .sss-triptych,
body[data-sunrise="hero"] .site-foot {
  position: relative;
  z-index: 5;
  background: var(--paper);
}
body[data-sunrise="hero"] .lead { padding-top: var(--sp-xl); margin-top: 0; }

/* === 4. Hero conversation stencil === */
.hero-convo {
  position: relative;
  color: var(--paper);
  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; } }
@keyframes heroConvoType { from { width: 0; } to { width: 100%; } }

/* === 5. Scroll cue at bottom of hero === */
body[data-sunrise="hero"] .home-hero__cue,
body[data-sunrise="hero"] .article-head--hero__cue {
  position: relative;
  z-index: 5;
  text-align: center;
  color: var(--paper);
  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[data-sunrise] .home-hero__cue-label,
body[data-sunrise] .article-head--hero__cue-label { display: block; margin-bottom: 0.6em; }
body[data-sunrise] .home-hero__cue-arrow,
body[data-sunrise] .article-head--hero__cue-arrow {
  display: block;
  margin: 0 auto;
  width: 18px;
  height: 26px;
  animation: homeHeroBounce 2.6s ease-in-out infinite;
}
body[data-sunrise] .home-hero__cue-arrow svg,
body[data-sunrise] .article-head--hero__cue-arrow svg { width: 100%; height: 100%; }
@keyframes homeHeroBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* === 6. Pattern X. Cream paper card over sunrise (sub-pages) ===
   The article-head + article-body live on a paper card that sits
   over the persistent sunrise. Card opacity controlled by the
   3-mode toggle (data-mode="paper" | "dawn" | "open"). */
body[data-sunrise="card"] main.sales-main,
body[data-sunrise="card"] main {
  position: relative;
  z-index: 5;
  max-width: var(--w-wide);
  margin: 4rem auto;
  padding: 0;
  background: transparent;
}
body[data-sunrise="card"] .article-head,
body[data-sunrise="card"] .article-body,
body[data-sunrise="card"] .related-reading,
body[data-sunrise="card"] .always-included,
body[data-sunrise="card"] .pricing-summary,
body[data-sunrise="card"] .faq,
body[data-sunrise="card"] .bloom-form,
body[data-sunrise="card"] .bloom-results {
  background: var(--paper);
  padding: var(--sp-md) var(--sp-xl);
}
body[data-sunrise="card"] main > .article-head:first-child,
body[data-sunrise="card"] main > article > .article-head:first-child,
body[data-sunrise="card"] main > section:first-child {
  border-radius: 8px 8px 0 0;
  padding-top: var(--sp-xl);
  box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(35, 31, 26, 0.06);
}
body[data-sunrise="card"] main > section:last-child,
body[data-sunrise="card"] main > article > section:last-child,
body[data-sunrise="card"] .related-reading:last-child {
  border-radius: 0 0 8px 8px;
  padding-bottom: var(--sp-xl);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}
/* Footer also on paper, full opacity */
body[data-sunrise="card"] .sss-triptych,
body[data-sunrise="card"] .site-foot {
  position: relative;
  z-index: 5;
  background: var(--paper);
}

/* === 7. Pattern Z. Words over sunrise (Learn library) ===
   No solid card. Each section sits in a frosted-cream backdrop-blur card. */
body[data-sunrise="words"] main {
  position: relative;
  z-index: 5;
  max-width: var(--w-wide);
  margin: 4rem auto;
  padding: 0 var(--pad-x);
}
body[data-sunrise="words"] .article-head,
body[data-sunrise="words"] .library-start-here,
body[data-sunrise="words"] .library-toc > div,
body[data-sunrise="words"] .library-editorial > div,
body[data-sunrise="words"] .soft-cta {
  background: rgba(244, 235, 215, 0.88);
  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[data-sunrise="words"] .library-toc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
}
body[data-sunrise="words"] .library-toc > div { margin-bottom: 0; }
@media (max-width: 720px) {
  body[data-sunrise="words"] .library-toc { grid-template-columns: 1fr; }
}
body[data-sunrise="words"] .sss-triptych,
body[data-sunrise="words"] .site-foot {
  background: var(--paper);
}

/* === 8. 3-mode toggle support ===
   Mode rules apply to Pattern X cards. Pattern Y hero is always
   full sunrise; Pattern Z words are always frosted-cream. The mode
   primarily breathes the sub-page cards. */
html[data-mode="paper"] body[data-sunrise="card"] .article-head,
html[data-mode="paper"] body[data-sunrise="card"] .article-body,
html[data-mode="paper"] body[data-sunrise="card"] .related-reading {
  background: var(--paper);
}
html[data-mode="dawn"] body[data-sunrise="card"] .article-head,
html[data-mode="dawn"] body[data-sunrise="card"] .article-body,
html[data-mode="dawn"] body[data-sunrise="card"] .related-reading {
  background: rgba(244, 235, 215, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html[data-mode="open"] body[data-sunrise="card"] main > .article-head:first-child,
html[data-mode="open"] body[data-sunrise="card"] main > section:first-child {
  box-shadow: none;
}
html[data-mode="open"] body[data-sunrise="card"] .article-head,
html[data-mode="open"] body[data-sunrise="card"] .article-body,
html[data-mode="open"] body[data-sunrise="card"] .related-reading {
  background: transparent;
  color: var(--paper);
}
html[data-mode="open"] body[data-sunrise="card"] .article-head h1,
html[data-mode="open"] body[data-sunrise="card"] .sec-heading,
html[data-mode="open"] body[data-sunrise="card"] .article-head__h1,
html[data-mode="open"] body[data-sunrise="card"] .headline {
  color: var(--paper);
  text-shadow: 0 2px 8px rgba(10, 16, 36, 0.6);
}
html[data-mode="open"] body[data-sunrise="card"] p,
html[data-mode="open"] body[data-sunrise="card"] .deck {
  color: rgba(244, 235, 215, 0.92);
  text-shadow: 0 1px 3px rgba(10, 16, 36, 0.6);
}
html[data-mode="open"] body[data-sunrise="card"] .body-open__cap,
html[data-mode="open"] body[data-sunrise="card"] .related-reading__eyebrow {
  color: var(--warm);
}

/* === 9. Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .hero-convo__cursor { animation: none; opacity: 0.5; }
  .home-hero__cue-arrow,
  .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; }
}

/* === 10. Mobile === */
@media (max-width: 720px) {
  body[data-sunrise="hero"] .home-hero,
  body[data-sunrise="hero"] .article-head--hero {
    min-height: 100vh;
    padding: 5rem 1.5rem 1.5rem;
  }
  body[data-sunrise="hero"] .home-hero__inner,
  body[data-sunrise="hero"] .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; }
}

/* === 11. Hero conversation positioning per pattern === */

/* Pattern Y (homepage + about): conversation sits in the right column
   of the hero, below headline. Already styled via main hero-convo rules. */
body[data-sunrise="hero"] .hero-convo {
  position: relative;
  z-index: 5;
}

/* Pattern X (sub-pages): conversation sits as a band above the
   article-head card, in the open sky region. Centered on max-w-wide. */
body[data-sunrise="card"] .hero-convo--card {
  display: block;
  max-width: var(--w-wide);
  margin: 4rem auto 1rem;
  padding: 0 var(--pad-x);
  position: relative;
  z-index: 5;
}
body[data-sunrise="card"] .hero-convo--card .hero-convo__bubble {
  max-width: 480px;
}
body[data-sunrise="card"] .hero-convo--card .hero-convo__bubble--agent {
  margin-left: 4em;
}

/* Pattern Z (learn library): conversation sits at the top, before
   the article-head. Floats over the sky like the other Z cards. */
body[data-sunrise="words"] .hero-convo--card {
  display: block;
  max-width: var(--w-wide);
  margin: 4rem auto 1rem;
  padding: 0 var(--pad-x);
  position: relative;
  z-index: 5;
}

/* Pattern X main needs to start AFTER the conversation band, not
   conflict with its 4rem auto top margin */
body[data-sunrise="card"] main.sales-main,
body[data-sunrise="card"] main {
  margin-top: 1rem;
}

/* Article-head--hero (about page) layout */
body[data-sunrise="hero"] .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;
}
/* Apply hero text styling to headline class on hero pages */
body[data-sunrise="hero"] .article-head--hero .headline {
  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(--paper);
  text-shadow: 0 2px 12px rgba(10, 16, 36, 0.7), 0 0 30px rgba(10, 16, 36, 0.45);
}

/* === 12. Fallback class-based triggers ===
   The data-sunrise attribute is set by inline JS at runtime. As a
   redundant safety, also trigger Pattern Y (hero) styling on
   body.page-index directly. Class-based selectors apply during
   the brief moment before the JS runs, and survive any JS failure. */
body.page-index .home-hero {
  position: relative !important;
  z-index: 5;
  min-height: 88vh !important;
  margin: 0 !important;
  padding: 6rem var(--pad-x) 2rem !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  border-bottom: 0;
  max-width: none !important;
  color: var(--paper);
}
body.page-index .home-hero__inner {
  display: grid !important;
  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 { color: var(--paper) !important; }
body.page-index .home-hero__eyebrow {
  color: var(--paper) !important;
  opacity: 0.92;
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.5);
}
body.page-index .home-hero__headline {
  color: var(--paper) !important;
  text-shadow: 0 2px 12px rgba(10, 16, 36, 0.7), 0 0 30px rgba(10, 16, 36, 0.45);
  max-width: 16ch;
}
body.page-index .home-hero__rule {
  background: var(--paper) !important;
  opacity: 0.55;
}
body.page-index .home-hero__deck {
  color: var(--paper) !important;
  text-shadow: 0 2px 8px rgba(10, 16, 36, 0.7);
}
body.page-index .heritage-chrome {
  background: linear-gradient(to bottom, rgba(10, 16, 36, 0.55) 0%, rgba(10, 16, 36, 0) 100%) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body.page-index .heritage-chrome .bgai-wm .w-beargrass { color: var(--paper) !important; }
body.page-index .heritage-chrome .bgai-wm .w-ai { color: #d07968 !important; }
body.page-index .heritage-sitenav a { color: var(--paper) !important; opacity: 0.92; }
body.page-index .nav-cta {
  background: var(--barn) !important;
  color: var(--paper) !important;
}
body.page-index .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;
}

/* === 13. Class-based fallbacks for about (Pattern Y) === */
body.page-about .article-head--hero {
  position: relative;
  z-index: 5;
  min-height: 88vh !important;
  margin: 0 !important;
  padding: 6rem var(--pad-x) 2rem !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  border-bottom: 0;
  max-width: none !important;
}
body.page-about .article-head--hero__inner {
  display: grid !important;
  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-about .article-head--hero .headline,
body.page-about .article-head--hero h1 {
  color: var(--paper) !important;
  background: none !important;
  -webkit-text-fill-color: var(--paper) !important;
  text-shadow: 0 2px 12px rgba(10, 16, 36, 0.7), 0 0 30px rgba(10, 16, 36, 0.45);
  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;
}
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(--paper) !important;
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.5);
}
body.page-about .article-head--hero__rule {
  height: 1px;
  width: 4em;
  background: var(--paper) !important;
  opacity: 0.55;
  margin: 0.7rem 0;
}
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(--paper) !important;
  text-shadow: 0 2px 8px rgba(10, 16, 36, 0.7);
}
body.page-about main.sales-main,
body.page-about .sss-triptych,
body.page-about .site-foot {
  position: relative;
  z-index: 5;
  background: var(--paper);
}
body.page-about .heritage-chrome {
  background: linear-gradient(to bottom, rgba(10, 16, 36, 0.55) 0%, rgba(10, 16, 36, 0) 100%) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body.page-about .heritage-chrome .bgai-wm .w-beargrass { color: var(--paper) !important; }
body.page-about .heritage-chrome .bgai-wm .w-ai { color: #d07968 !important; }
body.page-about .heritage-sitenav a { color: var(--paper) !important; opacity: 0.92; }
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;
}

/* === 14. Class-based fallbacks for sub-pages (Pattern X) ===
   page-sales is the body class for /the-website, /the-agent, etc.
   Apply Pattern X card layout. Skip page-about (handled above). */
body.page-sales:not(.page-about) main.sales-main {
  position: relative;
  z-index: 5;
  max-width: var(--w-wide);
  margin: 4rem auto;
  padding: 0;
  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;
}
body.page-sales:not(.page-about) .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;
  box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(35, 31, 26, 0.06);
}
body.page-sales:not(.page-about) main.sales-main {
  margin-top: 0;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(35, 31, 26, 0.06);
}
body.page-sales:not(.page-about) .heritage-chrome {
  background: linear-gradient(to bottom, rgba(10, 16, 36, 0.55) 0%, rgba(10, 16, 36, 0) 100%) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.page-sales:not(.page-about) .heritage-chrome .bgai-wm .w-beargrass { color: var(--paper) !important; }
body.page-sales:not(.page-about) .heritage-chrome .bgai-wm .w-ai { color: #d07968 !important; }
body.page-sales:not(.page-about) .heritage-sitenav a { color: var(--paper) !important; opacity: 0.92; }
body.page-sales:not(.page-about) .hero-convo--card {
  position: relative;
  z-index: 5;
  max-width: var(--w-wide);
  margin: 4rem auto 0.5rem;
  padding: 0 var(--pad-x);
}

/* === 15. Class-based fallback for Learn library (Pattern Z) === */
body.bgai-learn .heritage-chrome {
  background: linear-gradient(to bottom, rgba(10, 16, 36, 0.55) 0%, rgba(10, 16, 36, 0) 100%) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.bgai-learn .heritage-chrome .bgai-wm .w-beargrass { color: var(--paper) !important; }
body.bgai-learn .heritage-chrome .bgai-wm .w-ai { color: #d07968 !important; }
body.bgai-learn .heritage-sitenav a { color: var(--paper) !important; opacity: 0.92; }

/* === 16. Pattern X card unification ===
   Make the article-head + main.sales-main render as one continuous
   card surface, not two stacked cards. Override the dual-card defaults. */
body.page-sales:not(.page-about) .article-head {
  border-radius: 8px 8px 0 0;
  margin: 4rem auto 0 !important;
  box-shadow: -1px 0 0 rgba(35, 31, 26, 0.06), 1px 0 0 rgba(35, 31, 26, 0.06), 0 -2px 4px rgba(0, 0, 0, 0.05) !important;
  padding-bottom: 0 !important;
}
body.page-sales:not(.page-about) main.sales-main {
  border-radius: 0 0 8px 8px;
  margin: 0 auto 4rem !important;
  padding: var(--sp-md) var(--sp-xl) var(--sp-xl) !important;
  box-shadow: -1px 0 0 rgba(35, 31, 26, 0.06), 1px 0 0 rgba(35, 31, 26, 0.06), 0 24px 60px rgba(0, 0, 0, 0.3) !important;
}
/* Hide the floating conversation in margin tighter; small + above the card */
body.page-sales:not(.page-about) .hero-convo--card {
  margin: 5.5rem auto 0.5rem !important;
  padding: 0 var(--pad-x);
  max-width: var(--w-wide);
}
body.page-sales:not(.page-about) .hero-convo--card .hero-convo__bubble {
  max-width: 480px;
  background: rgba(10, 16, 36, 0.55);
}

/* ============================================================
   17. AUDIT FIXES (2026-05-02)
   Cleanup pass per docs/AUDIT-2026-05-02.md.
   ============================================================ */

/* Pattern X card unification via JS-injected .pattern-x-card wrapper.
   Override the previous per-element card styling to render a single
   continuous paper surface for sub-pages. */
body.page-sales:not(.page-about) .pattern-x-card {
  position: relative;
  z-index: 5;
  max-width: var(--w-wide);
  margin: 4rem auto !important;
  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) var(--sp-xl);
}
body.page-sales:not(.page-about) .pattern-x-card .article-head,
body.page-sales:not(.page-about) .pattern-x-card main.sales-main,
body.page-sales:not(.page-about) .pattern-x-card .related-reading {
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: none !important;
}
body.page-sales:not(.page-about) .pattern-x-card .article-head {
  margin-bottom: var(--sp-md) !important;
}
body.page-sales:not(.page-about) .pattern-x-card main.sales-main {
  padding: 0 !important;
}
body.page-sales:not(.page-about) .pattern-x-card main.sales-main > section {
  margin-bottom: var(--sp-md);
}
body.page-sales:not(.page-about) .pattern-x-card .related-reading {
  margin-top: var(--sp-md) !important;
  border-top: 1px solid var(--rule-ink);
  padding-top: var(--sp-md) !important;
}

/* About hero headline: clear the gradient-clipped text inherited from
   .headline.sheen-swell so it renders as solid cream. */
body.page-about .article-head--hero .headline,
body.page-about .article-head--hero .headline.sheen-swell,
body.page-about .article-head--hero h1 {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--paper) !important;
  color: var(--paper) !important;
  text-shadow: 0 2px 12px rgba(10, 16, 36, 0.7), 0 0 30px rgba(10, 16, 36, 0.45);
}
/* Same fix for the homepage just in case. */
body.page-index .home-hero__headline {
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: var(--paper) !important;
  color: var(--paper) !important;
}

/* Pattern Y mode variations — make the toggle DO something visible.
   Paper: as-is (full sunrise + cream below). 
   Dawn: deck text gets a slight glow + the below-fold sections fade
         to translucent at the seam.
   Open: the cream below-the-fold lifts to translucent so sunrise
         shows through more aggressively. */
html[data-mode="dawn"] body.page-index .lead,
html[data-mode="dawn"] body.page-index .toc,
html[data-mode="dawn"] body.page-about main.sales-main {
  background: rgba(244, 235, 215, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
html[data-mode="open"] body.page-index .lead,
html[data-mode="open"] body.page-index .toc,
html[data-mode="open"] body.page-about main.sales-main {
  background: rgba(244, 235, 215, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Pattern X Open mode: card lifts off, words go cream */
html[data-mode="open"] body.page-sales:not(.page-about) .pattern-x-card {
  background: rgba(244, 235, 215, 0.0) !important;
  box-shadow: none !important;
  color: var(--paper);
}
html[data-mode="open"] body.page-sales:not(.page-about) .pattern-x-card .headline,
html[data-mode="open"] body.page-sales:not(.page-about) .pattern-x-card .sec-heading,
html[data-mode="open"] body.page-sales:not(.page-about) .pattern-x-card h1,
html[data-mode="open"] body.page-sales:not(.page-about) .pattern-x-card h2 {
  color: var(--paper) !important;
  -webkit-text-fill-color: var(--paper) !important;
  background: none !important;
  background-image: none !important;
  text-shadow: 0 2px 8px rgba(10, 16, 36, 0.65);
}
html[data-mode="open"] body.page-sales:not(.page-about) .pattern-x-card p,
html[data-mode="open"] body.page-sales:not(.page-about) .pattern-x-card .deck,
html[data-mode="open"] body.page-sales:not(.page-about) .pattern-x-card .body-open {
  color: rgba(244, 235, 215, 0.92) !important;
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.7);
}
html[data-mode="open"] body.page-sales:not(.page-about) .pattern-x-card .body-open__cap,
html[data-mode="open"] body.page-sales:not(.page-about) .pattern-x-card .article-head__rail,
html[data-mode="open"] body.page-sales:not(.page-about) .pattern-x-card .related-reading__eyebrow {
  color: var(--warm) !important;
}
html[data-mode="open"] body.page-sales:not(.page-about) .pattern-x-card .tier {
  background: rgba(239, 228, 202, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Dawn mode for Pattern X: cream paper card stays but with translucency */
html[data-mode="dawn"] body.page-sales:not(.page-about) .pattern-x-card {
  background: rgba(244, 235, 215, 0.86) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Pattern Z (Learn library): force the words-on-sky layout */
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.92);
  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 .heritage-chrome {
  background: linear-gradient(to bottom, rgba(10, 16, 36, 0.55) 0%, rgba(10, 16, 36, 0) 100%) !important;
}
body.bgai-learn .heritage-chrome .bgai-wm .w-beargrass { color: var(--paper) !important; }
body.bgai-learn .heritage-chrome .bgai-wm .w-ai { color: #d07968 !important; }
body.bgai-learn .heritage-sitenav a { color: var(--paper) !important; opacity: 0.92; }

/* Hide the toggle on Pattern Y pages (where it has no visible effect)
   — just kidding, we DID add Pattern Y mode variations above, so the
   toggle now works on every page. Keep visible everywhere. */

/* Hero conversation visibility on Pattern X cards: position above the card */
body.page-sales:not(.page-about) .hero-convo--card {
  position: relative;
  z-index: 5;
  max-width: var(--w-wide);
  margin: 5.5rem auto 0 !important;
  padding: 0 var(--pad-x);
  min-height: 6rem;
}
body.page-sales:not(.page-about) .hero-convo--card .hero-convo__bubble {
  max-width: 480px;
  background: rgba(10, 16, 36, 0.55);
  border-color: rgba(255, 255, 255, 0.2);
}