/* ============================================================
   Band layout — extracted verbatim from the prototype's home-page
   <style> block.

   Playbook §12.6: this was page-scoped CSS in the prototype, and the
   bands it styles are now reusable sections a merchant can add to ANY
   page. Anything a section can render must be styled by CSS that loads
   on every template, so this is global rather than requested by the
   home sections.

   Leaving it out was invisible in the HTML and in the console: the
   markup, the assets and the console were all clean, and .rr-bleed
   simply computed to position:static — the band's copy, badges and
   scrim all lost their positioning and stacked down the page.
   ============================================================ */

/* Full-height hero: fill what's under the sticky bar, with the ticker settling
   on the fold. svh rather than dvh so a collapsing mobile toolbar doesn't
   resize the hero mid-scroll; vh is the fallback for older engines. */
.hero-section { min-height:calc(100vh - var(--nav-h)); display:flex; flex-direction:column; }
@supports (height:100svh) { .hero-section { min-height:calc(100svh - var(--nav-h)); } }
.hero-grid { flex:1; display:grid; grid-template-columns:1.05fr 1fr; gap:40px; padding:40px var(--gutter) 56px; align-items:stretch; }
/* the copy reads as one block in the middle of the column — spreading it to
   the full column height leaves the claim pills and the CTAs orphaned */
.hero-copy { display:flex; flex-direction:column; justify-content:center; gap:28px; }
.hero-media { position:relative; border-radius:var(--r-card-lg); overflow:hidden; background:var(--stripe-dark); min-height:560px; }
.hero-media > img, .hero-media > video, .rr-bleed > img, .rr-bleed > video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.rr-bleed > .play-disc { top:50%; left:72%; z-index:2; }
.hero-media .ph-glow-yellow { mix-blend-mode:screen; opacity:.5; }
.hero-media.has-img::after { content:""; position:absolute; inset:auto 0 0 0; height:38%; background:linear-gradient(rgba(22,17,36,0) 0%, rgba(22,17,36,.75) 100%); pointer-events:none; }
.hero-media .foot { z-index:2; opacity:1; text-shadow:0 1px 8px rgba(22,17,36,.6); }
.rr-bleed > img { object-position:62% 45%; }
.rr-bleed .scrim { background:linear-gradient(90deg, rgba(22,17,36,.92) 0%, rgba(22,17,36,.72) 42%, rgba(22,17,36,.15) 78%, rgba(22,17,36,.05) 100%); }
.hero-media .foot { position:absolute; left:16px; right:16px; bottom:16px; display:flex; justify-content:space-between; font-size:12px; font-weight:700; letter-spacing:.06em; opacity:.7; }
.rr-bleed { position:relative; min-height:720px; background:var(--stripe-light); overflow:hidden; display:flex; }
.rr-bleed .scrim { position:absolute; inset:0; background:linear-gradient(90deg, rgba(22,17,36,.85) 0%, rgba(22,17,36,.4) 55%, rgba(22,17,36,0)); }
.rr-copy { position:relative; z-index:2; color:var(--paper); display:flex; flex-direction:column; gap:20px; max-width:640px; margin:auto 0 40px; padding-left:var(--gutter); }
.rr-badges { position:absolute; z-index:2; top:40px; left:var(--gutter); display:flex; gap:8px; flex-wrap:wrap; }
.rr-timer { position:absolute; z-index:2; right:var(--gutter); bottom:40px; }
.sys-grid { display:grid; grid-template-columns:1fr 80px 1fr; gap:0; align-items:center; }
.sys-arrow { display:flex; flex-direction:column; align-items:center; gap:6px; opacity:.5; }
.sys-arrow .bar { width:2px; height:60px; background:var(--paper); }
.blocks-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.sys-prod { display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border-radius:var(--r-input); background:var(--panel); text-decoration:none; }
.sys-prod:hover { background:var(--panel-2); }
/* Same box and stack as the outline cards beside it (.card-dark padding +
   1.5px border), so photo tops and price rows line up; the photo takes the
   height left over. */
.bundle-hero { display:flex; flex-direction:column; gap:12px; border:1.5px solid var(--ink); }
.bundle-hero-media { flex:1 1 auto; min-height:220px; }
.bundle-hero-media > img.contain { padding:0; }
.bundles-row { grid-template-columns:1.4fr 1fr 1fr; }
@media (max-width:900px) {
  .hero-grid, .sys-grid { grid-template-columns:1fr; }
  .bundle-hero-media { flex:none; min-height:0; aspect-ratio:4 / 3; }
  .hero-section { min-height:0; }
  .hero-media { min-height:320px; }
  .sys-arrow { flex-direction:row; padding:12px 0; } .sys-arrow .bar { width:60px; height:2px; }
  .rr-bleed { min-height:640px; } .rr-timer { display:none; }
  .rr-bleed > .play-disc { top:38%; left:50%; }
  .blocks-grid { grid-template-columns:repeat(3,1fr); }
  .bundles-row { grid-template-columns:1fr; }
  .rr-bleed .scrim { background:linear-gradient(rgba(22,17,36,.35) 0%, rgba(22,17,36,.6) 45%, rgba(22,17,36,.92) 100%); }
}

/* ============================================================
   §21.5 — merchant-safe copy fields.
   ============================================================ */

/* The accent word in a heading. One class, injected by the template from a
   plain-text "accent word" setting, so the merchant never handles a <span>
   and never sees an inline style they cannot retype. */
.hl { color: var(--accent); }

/* richtext emits its own <p>, so it can never render inside one — the browser
   auto-closes the outer paragraph and everything after it escapes the wrapper,
   losing the class and any animation attributes. Those wrappers are therefore
   <div>, carrying the SAME classes and inline styles the <p> carried.

   The name is .rte-host, not .rte: the prototype's stylesheet already
   defines .rte (17px/1.65), and reusing it silently restyled every lead.
   This class is deliberately structural only. An earlier version also set
   font-size/line-height here, which silently beat the design's own mobile
   override of .lead (19px instead of 16px) and made the hero 41px taller on a
   phone — a regression the console and the HTML could not show. Sizing stays
   where the design puts it; this only teaches the wrapper how to hold a
   rich-text value.

   It must also cope with a SHORT value, which the platform stores as bare
   inline text with no <p> at all — hence styling the wrapper, never the <p>. */
.rte-host > p { margin: 0 0 .7em; font: inherit; color: inherit; }
.rte-host > p:first-child { margin-top: 0; }
.rte-host > p:last-child { margin-bottom: 0; }
.rte-host a { color: inherit; text-decoration: underline; }
.rte-host ul, .rte-host ol { margin: .5em 0; padding-left: 1.2em; }
.rte-host li { margin: .2em 0; }