/* Shared stylesheet for every page of wozerchurchmedia.com (index, wcm, study-bible, bible, help).
   Moved out of the old single-page index.html's inline <style> on 2026-10-07 when the site became
   multi-page; the rules below the "Multi-page site" marker at the end are new for that restructure. */
  /* Color identity matches the real app's own current default look exactly -- the "Midnight" skin
     (see wcm-app/src/shared/templateTypes.ts's DEFAULT_THEME and skinPalettes.ts's `midnight` entry),
     not the app's original "Indigo" skin this site used to mirror before Midnight became the default.
     --panel/--panel-soft/--panel-text* are the tokens that specifically stand in for the app's own
     bg/surface/text so any section styled to look like the booth console (nav mark, dark panels, the
     listen-visual mock, showcase cards) reads as the real product.

     Real, direct user correction (2026-09-09): this used to be a light cream page by default, with a
     dark "Midnight" variant only shown to visitors whose OS/browser happened to be set to dark mode
     (a @media (prefers-color-scheme: dark) override + an unused, never-wired-up [data-theme="dark"]
     toggle block). Caught live: the user's phone (dark mode on) showed the real, intended dark brand
     identity; their laptop (light mode) showed a completely different light page -- most visitors never
     enable OS dark mode, so the majority were seeing a page that didn't match the product at all. Fixed
     by making the dark palette the ONE unconditional default -- removed the media-query/data-theme
     scaffolding entirely, not just widened its condition. */
  :root {
    --bg: #0a0a0e;
    --bg-soft: #101014;
    --surface: #131319;
    --ink: #eef0f6;
    --ink-dim: #b3b8c8;
    --ink-faint: #8b8f9c;
    --panel: #1b1b23;
    --panel-soft: #16161d;
    --panel-text: #eef0f6;
    --panel-text-dim: #9aa1b8;
    --accent: #38bdf8;
    --accent-bright: #7dd3fc;
    --accent-on-panel: #38bdf8;
    --accent-on-panel-bright: #7dd3fc;
    --rule: #2c2c38;
    --rule-on-panel: rgba(238, 240, 246, 0.1);
    --good: #8ec281;
    --bad: #d98d7d;
    --font-display: "Fraunces", Georgia, serif;
    --font-body: "Work Sans", "Segoe UI", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", "Cascadia Code", Consolas, monospace;
  }

  * { box-sizing: border-box; }
  /* Real, measured bug (headless-Chrome check at a real 375px phone width): document.documentElement.
     scrollWidth came back 389px against a 375px viewport -- the hero-glow decoration below is
     deliberately positioned partway off the right edge (right: -160px) and, though header.hero itself
     clips it, body's own overflow-x:hidden alone doesn't reliably stop the ROOT element's scrollWidth
     from including it on every mobile browser (a known iOS Safari rubber-band-scroll gap in particular).
     Hiding it on html too, not just body, is the standard belt-and-suspenders fix. */
  html { scroll-behavior: smooth; overflow-x: hidden; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
    /* Real bug this squash alone doesn't fix: cutting the cap-fade-N animations down to 1 near-instant
       iteration doesn't leave the caption cycler on ANY sensible state -- .cycle has no opacity outside
       its animation, so once the (now-instant) animation finishes, every browser's default post-animation
       behavior (no fill-mode set) reverts all three to opacity's initial value of 1 -- all three fully
       visible and stacked on top of each other, the exact overlap bug this cycler exists to avoid.
       Simplest correct fix: skip the cycle entirely for reduced-motion and just show the first example. */
    .caption-out .cycle { animation: none !important; opacity: 0 !important; }
    .caption-out .cycle:first-of-type { opacity: 1 !important; }
  }

  a { color: inherit; }
  img, svg { max-width: 100%; display: block; }

  .wrap { max-width: 1120px; margin: 0 auto; padding-inline: 28px; }

  /* Scroll reveal */
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal.in-view { opacity: 1; transform: none; }
  .reveal-stagger.in-view > * { opacity: 1; transform: none; }
  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0.02s; }
  .reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.08s; }
  .reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.14s; }
  .reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.2s; }
  .reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.26s; }
  .reveal-stagger.in-view > *:nth-child(6) { transition-delay: 0.32s; }
  .reveal-stagger.in-view > *:nth-child(7) { transition-delay: 0.38s; }
  .reveal-stagger.in-view > *:nth-child(8) { transition-delay: 0.44s; }

  /* Nav */
  nav.top {
    position: sticky;
    top: 0;
    z-index: 10;
    /* Was a translucent background + backdrop-filter: blur(10px) -- real user-reported bug (2026-09-19):
       the sticky nav intermittently disappeared while scrolling on a real phone. Same root-cause category
       already documented and fixed once on this page (see .hero-glow's own comment): position:sticky +
       backdrop-filter is a well-documented Android Chrome/WebView compositing-bug combination. Same fix
       approach -- remove the blur, use a solid (not translucent) background instead of chasing the exact
       device repaint bug. Visually near-identical (bg-soft is already very close to bg), just solid. */
    background: var(--bg-soft);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
  nav.top.scrolled { border-bottom-color: var(--rule); box-shadow: 0 8px 24px -16px rgba(10, 10, 14, 0.35); }
  nav.top .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 16px;
  }
  /* Real bug caught testing Spanish (a language picker made this nav's ".wrap" a 3-child flex row
     instead of 2): "justify-content: space-between" divides its ONE pool of leftover space between
     however many direct children exist, so adding the picker as a third child quietly halved the
     brand/navlist gap -- invisible in English, but Spanish's longer nav labels ("Cómo escucha" etc.)
     ate the rest and the brand text ran straight into the first nav link with zero gap. Grouping
     navlist + picker + the mobile toggle into one ".nav-right" flex child restores exactly two
     top-level children again, so "justify-content: space-between" on .wrap always puts its full
     leftover space in one place (between the brand and this group) regardless of content width or
     how many controls live inside the group -- a fixed "gap" here spaces those controls consistently
     instead. */
  .nav-right { display: flex; align-items: center; gap: 24px; }
  .brand {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.15rem;
    text-decoration: none;
    color: var(--ink);
    flex-shrink: 0;
  }
  /* Matches the real app's own header treatment exactly (App.svelte's .mark) -- a bordered "WCM" badge
     beside the full name, not just the full name alone. Real, direct ask: the full name is long, lean on
     the abbreviation everywhere the app itself already does, starting with the one place a visitor sees
     before reading a word of copy. */
  .brand .mark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--accent);
    border: 1.5px solid var(--accent);
    border-radius: 6px;
    padding: 2px 6px;
    display: inline-block;
    flex-shrink: 0;
  }
  nav.top ul {
    list-style: none;
    display: flex;
    gap: 28px;
    margin: 0;
    padding: 0;
    font-size: 0.92rem;
    font-weight: 500;
  }
  /* Real bug caught testing Spanish/French/Portuguese at a real ~1000-1100px desktop width (above the
     640px hamburger breakpoint, so the full nav list is still expected to fit on one line): translated
     labels run measurably longer than their English originals ("Vista de Escenario" / "Véalo en acción"
     vs. "Stage View" / "See it in action"), and at this width the six links plus the language picker no
     longer fit -- the list quietly wrapped onto two lines instead of overflowing visibly, which is worse
     because nothing LOOKS broken in a screenshot taken at a "safe" width, it only shows up mid-range.
     Tightens link spacing and type size in exactly this narrower-desktop band so longer translations keep
     fitting on one line without pulling the hamburger breakpoint (640px) earlier for every language,
     English included, that doesn't need it. Placed AFTER the base "nav.top ul" rule above: equal
     specificity, so source order (not just the media query) decides which one wins at a matching width. */
  @media (min-width: 641px) and (max-width: 1180px) {
    nav.top ul { gap: 14px; font-size: 0.78rem; }
    .nav-right { gap: 12px; }
  }
  nav.top a.navlink {
    text-decoration: none;
    color: var(--ink-dim);
    position: relative;
    transition: color 0.15s ease;
  }
  nav.top a.navlink::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: -4px;
    height: 1.5px;
    background: var(--accent);
    transition: right 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  nav.top a.navlink:hover { color: var(--accent); }
  nav.top a.navlink:hover::after { right: 0; }
  nav.top .navlist { display: flex; }
  .nav-toggle { display: none; }
  /* Real, measured bug: plain ".navlist-mobile" (specificity 0,1,0) loses to the broad "nav.top ul"
     rule above (0,1,2, matches EVERY <ul> under nav.top, mobile list included) -- confirmed live via a
     real headless-Chrome tap on the hamburger at 375px: the opened mobile menu laid out as a horizontal
     flex row instead of a vertical list, overflowing off the right edge with "Contact" cut off entirely.
     Scoping to "nav.top .navlist-mobile" (0,2,1) guarantees this genuinely wins, same pattern the
     desktop .navlist rule just above already (redundantly, but correctly) uses. */
  nav.top .navlist-mobile { display: none; }

  /* Language picker -- a small custom dropdown (not a native <select>) so it can sit inline in the nav
     and match the rest of the site's own button styling instead of the browser's native select chrome. */
  .lang-picker { position: relative; }
  .lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink-dim);
    background: none;
    border: 1px solid var(--rule);
    border-radius: 7px;
    padding: 6px 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .lang-btn:hover, .lang-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
  .lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    list-style: none;
    margin: 0;
    padding: 6px;
    min-width: 150px;
    background: var(--panel);
    border: 1px solid var(--rule-on-panel);
    border-radius: 10px;
    box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  .lang-picker.open .lang-menu { opacity: 1; transform: none; pointer-events: auto; }
  .lang-menu li {
    padding: 9px 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--panel-text-dim);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
  }
  .lang-menu li:hover { background: var(--panel-soft); color: var(--panel-text); }
  .lang-menu li[aria-selected="true"] { color: var(--accent-on-panel); font-weight: 600; }
  .lang-picker-mobile { display: none; }

  /* Real, user-caught bug: below 640px the desktop navlist was just hidden outright with no fallback at
     all -- a phone visitor had a logo and nothing else clickable, forced into "endless scrolling to and
     fro" to find Pricing/Contact. A real hamburger + slide-down panel, not a second hidden thing. */
  @media (max-width: 640px) {
    nav.top .navlist { display: none; }
    .lang-picker { display: none; }
    .nav-toggle {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      /* Real, measured gap: a real headless-Chrome tap-target check at 375px found this button's real
         hit area was 36x36 -- under the standard ~44x44px minimum recommended touch-target size (Apple
         HIG / WCAG 2.5.5), the one control every single phone visitor needs to reach the rest of the
         site. Bars stay visually the same size (span/width below unchanged); only the button's own
         padding grows to widen the real tappable area. */
      width: 44px;
      height: 44px;
      padding: 0;
      background: none;
      border: none;
      cursor: pointer;
    }
    .nav-toggle span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--ink);
      border-radius: 2px;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    nav.top .navlist-mobile {
      display: block;
      list-style: none;
      margin: 0;
      padding: 0 24px;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.25s ease;
      border-top: 1px solid transparent;
    }
    /* Scoped the same way as the base rule above (see its own comment) -- otherwise THIS rule (two
       classes, no element, lower specificity than "nav.top .navlist-mobile") would itself lose to the
       base rule's max-height:0 and the menu would report .open (confirmed via a real click) yet never
       actually grow past 0 height. Real regression this project's own earlier specificity fix would have
       caused if this variant weren't re-scoped to match. */
    nav.top .navlist-mobile.open {
      /* Real bug caught testing Korean on a real 390px phone width: the fixed 320px cap was already
         tight for 6 English links, and adding the language-picker row on top of them (see .lang-picker-
         mobile below) pushed real measured content height to ~405px -- everything past ~320px was
         silently clipped by this element's own "overflow: hidden" (needed elsewhere to animate the
         closed state to 0 height), so the language row existed in the DOM but was completely
         unreachable by touch or sight. Raised well past every language's real measured height, with
         "min(...,75vh)" and its own scroll as a safety net for any future addition or a short landscape
         phone viewport, rather than re-measuring and hand-tuning a fixed number again next time. */
      max-height: min(75vh, 520px);
      overflow-y: auto;
      padding-block: 8px 16px;
      border-top-color: var(--rule);
    }
    .navlist-mobile li { border-bottom: 1px solid var(--rule); }
    .navlist-mobile li:last-child { border-bottom: none; }
    .navlist-mobile a.navlink {
      display: block;
      padding: 14px 4px;
      font-size: 1rem;
    }
    .navlist-mobile a.navlink::after { display: none; }
    .lang-picker-mobile {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 4px;
    }
    .lang-mobile-label { font-size: 0.85rem; color: var(--ink-faint); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
    .lang-mobile-options { display: flex; gap: 6px; flex-wrap: wrap; }
    .lang-mobile-options button {
      font-family: var(--font-mono);
      font-size: 0.74rem;
      font-weight: 600;
      color: var(--ink-dim);
      background: none;
      border: 1px solid var(--rule);
      border-radius: 6px;
      padding: 5px 8px;
      cursor: pointer;
    }
    .lang-mobile-options button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
  }

  /* Hero */
  header.hero { padding: 88px 0 72px; position: relative; overflow: hidden; }
  .hero-glow {
    position: absolute;
    top: -220px; right: -160px;
    width: 620px; height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
    pointer-events: none;
    /* Was "animation: drift 14s ease-in-out infinite" -- real bug, second one the user caught live on a
       real phone: fragments of the trust-band section's text bleeding through into the hero at the
       wrong position, persisting well after the (already-fixed) one-shot entrance animations finished.
       This was the one thing STILL animating forever in that region -- a large (620px) absolutely
       positioned element, continuously transform-animating, inside overflow:hidden, right next to a
       position:sticky + backdrop-filter nav, is a well-documented category of real Android Chrome/
       WebView compositing bugs (repaint artifacts from other page content bleeding into the GPU layer).
       Made static -- same visual glow, just not perpetually animating -- removes the only remaining
       ongoing compositing source in the hero rather than chasing this one device's exact repaint bug. */
  }
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 56px;
    align-items: center;
    position: relative;
  }
  @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }

  .eyebrow {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    animation: rise-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
  }
  .eyebrow::before { content: ""; width: 16px; height: 1px; background: var(--accent); display: inline-block; }

  @keyframes rise-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }

  h1.headline {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.4rem, 5vw, 3.7rem);
    line-height: 1.06;
    letter-spacing: -0.015em;
    margin: 0 0 22px;
    text-wrap: balance;
    opacity: 0;
    animation: rise-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.14s forwards;
  }
  h1.headline em {
    font-style: italic;
    font-weight: 500;
    color: var(--accent);
  }
  .lede {
    font-size: 1.18rem;
    color: var(--ink-dim);
    max-width: 48ch;
    margin: 0 0 34px;
    text-wrap: pretty;
    opacity: 0;
    animation: rise-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.24s forwards;
  }

  .cta-row {
    display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
    opacity: 0;
    animation: rise-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.34s forwards;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.96rem;
    padding: 13px 22px;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.2s ease;
    cursor: pointer;
  }
  .btn:active { transform: scale(0.98); }
  .btn-primary { background: var(--accent); color: #0a0a0e; }
  .btn-primary:hover { filter: brightness(1.07); box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--accent) 55%, transparent); }
  .btn-primary:disabled { opacity: 0.6; cursor: default; }
  .btn-arrow { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); flex-shrink: 0; }
  .btn-primary:hover .btn-arrow { transform: translateX(3px); }
  .btn-ghost { border-color: var(--rule); color: var(--ink); background: none; }
  .btn-ghost:hover { border-color: var(--accent); transform: translateY(-1px); }

  .trial-note {
    margin-top: 16px;
    font-size: 0.85rem;
    color: var(--ink-faint);
    opacity: 0;
    animation: rise-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.42s forwards;
  }

  /* Waveform visual */
  .listen-visual {
    background: var(--panel);
    border-radius: 20px;
    padding: 30px 26px;
    position: relative;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    animation: rise-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.35);
  }
  .listen-visual .tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--panel-text-dim);
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .listen-visual .tag .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #6fae5c;
    box-shadow: 0 0 0 3px rgba(111, 174, 92, 0.25);
    animation: pulse-dot-strong 1.8s ease-in-out infinite;
  }
  @keyframes pulse-dot-strong {
    0%, 100% { box-shadow: 0 0 0 3px rgba(111, 174, 92, 0.25); }
    50% { box-shadow: 0 0 0 6px rgba(111, 174, 92, 0.08); }
  }
  .bars {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    margin: 18px 0;
  }
  .bars span {
    width: 4px;
    background: var(--accent-on-panel);
    border-radius: 2px;
    animation: wave 1.6s ease-in-out infinite;
    opacity: 0.85;
  }
  @keyframes wave {
    0%, 100% { height: 18%; }
    50% { height: 100%; }
  }
  .caption-out {
    background: var(--panel-soft);
    border: 1px solid var(--rule-on-panel);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 0.92rem;
    color: var(--panel-text);
    min-height: 78px;
  }
  .caption-out .ref {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--accent-on-panel-bright);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
  }
  /* Three examples crossfading in an 8s loop, each its OWN explicit keyframe rule (not one shared
     animation + negative animation-delay) -- a shared-keyframe approach needs each item's "visible"
     window to be exactly 1/3 of the cycle for the stagger math to isolate them, and a first pass here
     (78%-visible keyframes on a 33%-per-item stagger) left all three opacity:1 at once, visibly
     overlapping. Explicit non-overlapping windows per item removes that whole class of off-by-N error. */
  .caption-out .cycle { display: block; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
  #cap1 { animation-name: cap-fade-1; animation-duration: 8s; }
  #cap2 { animation-name: cap-fade-2; animation-duration: 8s; }
  #cap3 { animation-name: cap-fade-3; animation-duration: 8s; }
  @keyframes cap-fade-1 {
    0%, 3% { opacity: 0; transform: translateY(4px); }
    9%, 28% { opacity: 1; transform: translateY(0); }
    33%, 100% { opacity: 0; transform: translateY(-4px); }
  }
  @keyframes cap-fade-2 {
    0%, 33% { opacity: 0; transform: translateY(4px); }
    36%, 61% { opacity: 1; transform: translateY(0); }
    66%, 100% { opacity: 0; transform: translateY(-4px); }
  }
  @keyframes cap-fade-3 {
    0%, 66% { opacity: 0; transform: translateY(4px); }
    69%, 94% { opacity: 1; transform: translateY(0); }
    99%, 100% { opacity: 0; transform: translateY(-4px); }
  }
  /* All three overlay in the SAME grid cell (grid-area 1/1) rather than each reserving its own box in
     normal flow -- that's what stops the "invisible" (opacity:0) ones from pushing the visible one down
     or ghosting through mid-transition. Grid, not position:absolute: an absolutely-positioned child is
     removed from flow entirely, so .caption-out's own height could never grow past its fixed min-height
     no matter how long a given cycle's text was -- real bug, confirmed live on a narrow phone viewport,
     the longer "Sermon point" example wrapped to more lines than 78px allows and spilled out past the
     box's bottom edge. Grid-stacked children stay in flow, so the (single, shared) grid row auto-sizes
     to whichever overlapping cycle is tallest at the current viewport width -- correct at every width,
     not just the ones this was eyeballed against. */
  .caption-out.cycle-wrap { display: grid; }
  .caption-out .cycle { grid-area: 1 / 1; }

  /* Trust band */
  .trust-band {
    background: var(--surface);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 22px 0;
  }
  .trust-band .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--ink-dim);
    text-align: center;
  }
  .trust-band .wrap span { white-space: nowrap; }
  .trust-band .wrap span::before { content: "\2014\A0"; color: var(--accent); }
  .trust-band .wrap span:first-child::before { content: ""; }

  /* Section shell */
  section { padding: 88px 0; }
  section.panel { background: var(--panel); color: var(--panel-text); }
  .section-head { max-width: 62ch; margin-bottom: 48px; }
  .section-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 12px;
  }
  section.panel .section-eyebrow { color: var(--accent-on-panel); }
  h2.section-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    margin: 0 0 14px;
    text-wrap: balance;
  }
  /* Real, direct user-caught bug: .section-eyebrow and .section-body both got a section.panel override
     for dark backgrounds, but .section-title (the h2) never did -- it fell back to whatever color
     cascaded down (the light-page --ink family), producing low-contrast, washed-out text on every dark
     .panel section's own heading (id="features", id="signup", etc.). */
  section.panel h2.section-title { color: var(--panel-text); }
  .section-body { color: var(--ink-dim); font-size: 1.04rem; }
  section.panel .section-body { color: var(--panel-text-dim); }

  /* Offline pledge */
  .pledge-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: 14px;
    overflow: hidden;
  }
  @media (max-width: 960px) { .pledge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .pledge-grid { grid-template-columns: minmax(0, 1fr); } }
  /* Real, direct user-caught gap: the Android apps used to be two small lines of fine print buried
     at the bottom of the free-tier pricing card -- easy to miss entirely, no visual weight at all
     next to everything else on the page. This gives them their own real section, same template as
     Stage View above, but a 2-column pledge-grid (not the default 4) since there are only 2 apps. */
  .pledge-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 560px) { .pledge-grid-2 { grid-template-columns: minmax(0, 1fr); } }
  /* Three companion apps since the Bible app split (2026-10-07): Remote Control, WCM Bible, WCM Study Bible. */
  .pledge-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 960px) { .pledge-grid-3 { grid-template-columns: minmax(0, 1fr); } }
  .pledge-cell .cell-cta { margin-top: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  /* Real bug found live (2026-09-25): the earlier plain-class rule here lost to the more specific
     .pledge-cell .cell-cta { display: flex; ... } rule above (two classes beats one), so this button
     was actually visible and clickable on the live site the whole time it was supposed to be hidden.
     !important guarantees this always wins, regardless of any other selector added later. */
  .wcm-bible-download-hidden { display: none !important; }
  .pledge-cell {
    background: var(--surface);
    padding: 30px 26px;
    transition: background 0.2s ease;
  }
  .pledge-cell:hover { background: var(--bg-soft); }
  .pledge-cell .num {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--accent);
    letter-spacing: 0.06em;
  }
  .pledge-cell h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    margin: 10px 0 8px;
  }
  .pledge-cell p { margin: 0; color: var(--ink-dim); font-size: 0.94rem; }

  /* Feature grid */
  .feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }
  @media (max-width: 980px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .feature-grid { grid-template-columns: minmax(0, 1fr); } }
  .feature-card {
    background: var(--panel-soft);
    border: 1px solid var(--rule-on-panel);
    border-radius: 12px;
    padding: 24px 22px;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
  }
  .feature-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent-on-panel) 55%, transparent);
    box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.5);
  }
  .feature-card .kicker {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accent-on-panel);
    margin-bottom: 10px;
  }
  .feature-card h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 8px;
  }
  .feature-card p { margin: 0; font-size: 0.9rem; color: var(--panel-text-dim); }

  /* Showcase -- real captures, presented in the same dark-panel-on-light-page language as .listen-visual
     above (same border-radius/shadow values), rather than a second, different visual treatment. The
     video/images are already dark (the app's own midnight canvas) so no extra colored wrapper is needed --
     clipping their own corners and giving them the same floating shadow is enough to read as one
     consistent "screen floating on the page" motif, not a jarring drop-in. */
  .showcase-video-wrap {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.35);
    margin-bottom: 22px;
  }
  .showcase-video-wrap video { width: 100%; height: auto; display: block; }
  .showcase-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }
  @media (max-width: 980px) { .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .showcase-grid { grid-template-columns: minmax(0, 1fr); } }
  .showcase-card {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--panel);
    box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  }
  .showcase-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5); }
  .showcase-card img { width: 100%; height: auto; display: block; }
  .showcase-card figcaption {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    color: var(--panel-text-dim);
    padding: 12px 14px;
    border-top: 1px solid var(--rule-on-panel);
  }
  .feature-card.trial-flag { position: relative; }
  .feature-card .pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--accent-on-panel);
    color: #0a0a0e;
    padding: 2px 8px;
    border-radius: 20px;
    margin-bottom: 10px;
    font-weight: 600;
  }

  /* Licensing */
  .license-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 36px;
    align-items: start;
  }
  /* Real, user-caught bug: a bare "1fr" track (unlike hero-grid's own minmax(0, ...) tracks above) uses
     the grid item's min-content width as an implicit floor, so a price-card whose bullet text/price line
     couldn't wrap below ~361px silently overflowed a real 375px-wide phone viewport by 14px -- confirmed
     live via a real headless-Chrome measurement at 375px, not eyeballed. minmax(0, 1fr) removes that
     floor, the same fix hero-grid's own tracks already use, so the column genuinely shrinks to fit. */
  @media (max-width: 760px) { .license-panel { grid-template-columns: minmax(0, 1fr); } }
  .price-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 28px 26px;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  }
  .price-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(10, 10, 14, 0.28); }
  .price-card h3 { font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 6px; }
  .price-card .price { font-family: var(--font-mono); font-size: 1.6rem; color: var(--accent); margin: 4px 0 14px; }
  .price-card ul { margin: 0; padding-left: 1.15em; color: var(--ink-dim); font-size: 0.94rem; }
  .price-card li { margin-bottom: 7px; }
  .price-card-featured { border-color: var(--accent); position: relative; }
  .early-pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--accent);
    color: #0a0a0e;
    padding: 3px 9px;
    border-radius: 20px;
    margin-bottom: 12px;
    font-weight: 600;
  }
  .cell-pill { margin-top: 8px; margin-bottom: 0; }
  .price-strike { color: var(--ink-faint); text-decoration: line-through; font-size: 1.05rem; margin-right: 0.4em; }
  .price-suffix { font-family: var(--font-body); font-size: 0.68rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; }
  .price-compare {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    font-size: 0.82rem;
    color: var(--ink-faint);
    line-height: 1.5;
  }
  /* Real, direct ask: nowhere on the site acknowledged a church needing more than one license (several
     campuses, an overflow room, a couple of extra booths). Deliberately not styled as a third price
     card -- there's no real per-seat price decided yet, so this stays a plain, honest note pointing at
     the existing contact form rather than implying a self-serve tier that doesn't exist. */
  .bulk-note {
    margin: 28px 0 0;
    text-align: center;
    font-size: 0.92rem;
    color: var(--ink-dim);
  }
  .bulk-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
  .bulk-note a:hover { color: var(--accent-bright); }

  /* Filled in client-side by osDetect() -- see that script's own comment near the bottom of the file.
     data-kind toggles color: "warn" (visitor is very likely NOT on Windows) reads in --bad's warm tone
     without shouting (no background fill, this isn't an error state, just an honest heads-up); "ok"
     (Windows detected) stays quiet in --ink-dim, a confidence signal, not the headline. Empty text-content
     before JS runs means nothing renders and no layout jump happens either way. */
  .os-notice { margin: 14px 0 0; font-size: 0.86rem; color: var(--ink-dim); }
  .os-notice[data-kind="warn"] { color: var(--bad); }
  .os-notice strong { color: inherit; }

  /* Signup */
  .signup-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
  @media (max-width: 760px) { .signup-grid { grid-template-columns: minmax(0, 1fr); } }
  .signup-copy p { color: var(--panel-text-dim); max-width: 42ch; margin: 0 0 14px; }
  .signup-alt { font-size: 0.88rem; }
  .signup-alt a { color: var(--accent-on-panel); text-decoration: none; }
  .signup-alt a:hover { text-decoration: underline; }
  .builder-note {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--rule-on-panel, var(--rule));
    font-size: 0.88rem;
    color: var(--ink-dim-on-panel, var(--ink-dim));
  }
  .signup-form, .buy-form, .download-form { display: flex; flex-direction: column; gap: 16px; }
  .buy-form, .download-form { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--rule-on-panel); }
  .form-field { display: flex; flex-direction: column; gap: 7px; }
  .form-field label { font-size: 0.84rem; font-weight: 600; color: var(--panel-text-dim); }
  .form-field .optional { font-weight: 400; color: var(--ink-faint); }
  .form-field input, .form-field textarea {
    background: var(--panel); border: 1px solid var(--rule-on-panel); color: var(--panel-text);
    font-family: var(--font-body); font-size: 0.95rem; border-radius: 8px;
    padding: 12px 14px; outline: none; resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .form-field input:focus, .form-field textarea:focus {
    border-color: var(--accent-on-panel);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-on-panel) 20%, transparent);
  }
  .form-field input::placeholder, .form-field textarea::placeholder { color: var(--ink-faint); }
  .form-status { font-size: 0.88rem; margin: 0; min-height: 1.2em; }
  .form-status[data-state="ok"] { color: var(--good); }
  .form-status[data-state="error"] { color: var(--bad); }

  /* Footer / contact */
  footer.contact { padding: 88px 0 64px; }
  .contact-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    border-top: 1px solid var(--rule);
    padding-top: 40px;
  }
  .contact-inner h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    margin: 0 0 8px;
    text-wrap: balance;
  }
  .contact-inner p { margin: 0; color: var(--ink-dim); }
  .contact-inner a.mail {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
  }
  .foot-meta {
    margin-top: 48px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--ink-faint);
  }
  .foot-links {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    font-size: 0.8rem;
    color: var(--ink-faint);
  }
  .foot-links a { color: var(--ink-faint); text-decoration: none; }
  .foot-links a:hover { color: var(--accent); }

  a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  /* Back-to-top button -- real user-reported gap (2026-09-19): no quick way back to the top of a long
     page besides manually scrolling. Hidden until the user has actually scrolled down a bit (toggled via
     a "visible" class from a scroll listener), fixed to the bottom-right corner, above any mobile nav. */
  #backToTop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--rule);
    background: var(--bg-soft);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 8px 24px -12px rgba(10, 10, 14, 0.5);
  }
  #backToTop.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
  #backToTop:hover { border-color: var(--accent); color: var(--accent); }
  @media (prefers-reduced-motion: reduce) { #backToTop { transition: opacity 0.2s ease; } }

  /* ===== Multi-page site (2026-10-07) ===== */

  /* Current page in the shared nav */
  nav.top a.navlink[aria-current="page"] { color: var(--accent); }
  nav.top a.navlink[aria-current="page"]::after { right: 0; }
  .navlist-mobile a.navlink[aria-current="page"] { color: var(--accent); }

  .android-remote-note a { color: var(--accent); text-decoration: none; font-size: 0.9rem; }
  .android-remote-note a:hover { text-decoration: underline; }

  /* Inline text link with an arrow, used for "Learn more" style links */
  .text-link { color: var(--accent); text-decoration: none; font-weight: 600; font-size: 0.94rem; display: inline-flex; align-items: center; gap: 6px; }
  .text-link:hover { color: var(--accent-bright); }
  .text-link .btn-arrow { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
  .text-link:hover .btn-arrow { transform: translateX(3px); }

  /* Smaller hero for the product sub-pages */
  header.hero.page-hero { padding: 72px 0 64px; }
  .hero-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
  .soon-pill, .live-pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
    white-space: nowrap;
  }
  .soon-pill { background: var(--accent); color: #0a0a0e; }
  .live-pill { border: 1px solid var(--good); color: var(--good); }
  .platform-line { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-faint); margin: 16px 0 0; letter-spacing: 0.02em; }

  /* In-page section strip (wcm.html) -- scrolls sideways inside itself on a phone, never the page */
  .subnav { border-bottom: 1px solid var(--rule); background: var(--bg); }
  .subnav .wrap { display: flex; gap: 22px; overflow-x: auto; padding-block: 12px; scrollbar-width: none; }
  .subnav .wrap::-webkit-scrollbar { display: none; }
  .subnav a { flex-shrink: 0; font-size: 0.85rem; color: var(--ink-dim); text-decoration: none; white-space: nowrap; }
  .subnav a:hover { color: var(--accent); }
  .subnav .subnav-label { flex-shrink: 0; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); align-self: center; white-space: nowrap; }

  /* Product cards (home) */
  .product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  @media (max-width: 960px) { .product-grid { grid-template-columns: minmax(0, 1fr); } }
  .product-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 16px;
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
  }
  .product-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.6); }
  .product-card .product-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
  .product-card .for { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); }
  .product-card h3 { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; margin: 0 0 4px; }
  .product-card .platforms { font-size: 0.84rem; color: var(--ink-faint); margin: 0 0 14px; }
  .product-card > p { color: var(--ink-dim); margin: 0 0 16px; font-size: 0.96rem; }
  .product-card ul { margin: 0 0 22px; padding-left: 1.1em; color: var(--ink-dim); font-size: 0.92rem; }
  .product-card li { margin-bottom: 6px; }
  .product-card .product-cta { margin-top: auto; }

  /* "How it fits together" flow */
  .flow-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; counter-reset: flow; list-style: none; margin: 0; padding: 0; }
  @media (max-width: 1100px) { .flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flow-step:last-child:nth-child(odd) { grid-column: 1 / -1; } }
  @media (max-width: 560px) { .flow-steps { grid-template-columns: minmax(0, 1fr); } }
  .flow-step {
    position: relative;
    background: var(--panel-soft);
    border: 1px solid var(--rule-on-panel);
    border-radius: 12px;
    padding: 22px 20px 20px;
  }
  .flow-step .where { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent-on-panel); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
  .flow-step .where::before {
    counter-increment: flow;
    content: counter(flow);
    flex-shrink: 0;
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-on-panel); color: #0a0a0e; font-weight: 700; font-size: 0.72rem;
  }
  .flow-step h3 { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; margin: 0 0 8px; color: var(--panel-text); }
  .flow-step p { margin: 0; font-size: 0.9rem; color: var(--panel-text-dim); }
  /* Arrow between steps on wide screens only (the grid wraps below 1100px, where arrows would point wrong) */
  @media (min-width: 1101px) {
    .flow-step:not(:last-child)::after {
      content: "\2192";
      position: absolute;
      right: -15px; top: 20px;
      color: var(--accent-on-panel);
      font-size: 1rem;
      z-index: 1;
    }
  }
  .flow-note { margin: 22px 0 0; font-size: 0.88rem; color: var(--panel-text-dim); }
  .flow-note a { color: var(--accent-on-panel); }

  /* Mock "sermon received" card in the home hero */
  .sermon-mock .sermon-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--panel-text); margin: 14px 0 2px; }
  .sermon-mock .sermon-speaker { font-size: 0.86rem; color: var(--panel-text-dim); margin: 0 0 14px; }
  .sermon-mock .mock-rows { display: grid; gap: 8px; }
  .sermon-mock .mock-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; background: var(--panel-soft); border: 1px solid var(--rule-on-panel); border-radius: 8px; padding: 9px 12px; font-size: 0.86rem; color: var(--panel-text); }
  .sermon-mock .mock-row .k { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-on-panel-bright); flex-shrink: 0; }
  .sermon-mock .mock-row .v { text-align: right; min-width: 0; }

  /* Two-column info blocks reuse .license-panel + .price-card */
  .price-card .tier-line { font-family: var(--font-mono); font-size: 1.05rem; color: var(--accent); margin: 4px 0 14px; }
  .price-card .card-cta { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

  /* Notify form (Study Bible) and help cards */
  .notify-wrap { max-width: 560px; }
  .notify-form { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
  .notify-form .btn { align-self: flex-start; }
  .help-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  @media (max-width: 960px) { .help-grid { grid-template-columns: minmax(0, 1fr); } }
  .help-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 24px 22px; }
  .help-card h3 { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; margin: 0 0 8px; }
  .help-card p { margin: 0 0 12px; color: var(--ink-dim); font-size: 0.93rem; }
  .help-card p:last-child { margin-bottom: 0; }
  .help-card ol, .help-card ul { margin: 0; padding-left: 1.2em; color: var(--ink-dim); font-size: 0.93rem; }
  .help-card li { margin-bottom: 6px; }
  .help-card a { color: var(--accent); }

  /* YouTube playlist embed (help.html) */
  .video-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--rule);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45);
  }
  .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .video-embed .video-placeholder {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    padding: 24px; text-align: center; color: var(--panel-text-dim); font-size: 0.95rem;
  }
  .video-embed .video-placeholder svg { color: var(--accent); }
  .video-embed[data-ready="true"] .video-placeholder { display: none; }

  /* Shared footer */
  footer.site-foot { padding: 72px 0 56px; border-top: 1px solid var(--rule); }
  .foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 32px; }
  @media (max-width: 760px) { .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .foot-grid .foot-about { grid-column: 1 / -1; } }
  .foot-about p { margin: 12px 0 0; color: var(--ink-dim); font-size: 0.92rem; max-width: 40ch; }
  .foot-col h4 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin: 4px 0 12px; font-weight: 600; }
  .foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.92rem; }
  .foot-col a { color: var(--ink-dim); text-decoration: none; overflow-wrap: anywhere; }
  .foot-col a:hover { color: var(--accent); }
  footer.site-foot .foot-meta { border-top: 1px solid var(--rule); padding-top: 24px; margin-top: 40px; }

  /* Long words (emails, product names) must never force sideways scroll on a 360px phone */
  .section-body, .product-card, .help-card, .price-card, .pledge-cell, .feature-card { overflow-wrap: anywhere; }
  .section-body a, .trial-note a { color: var(--accent); }
  section.panel .section-body a { color: var(--accent-on-panel); }
  .cell-cta .text-link { margin-left: 4px; }
  /* Longer translations (French especially) of the trust-band items must wrap on a phone, not run off-screen */
  @media (max-width: 560px) { .trust-band .wrap span { white-space: normal; } }
  /* Italic accent word in a headline: keep its overhang from touching the next roman word */
  h1.headline em { padding-right: 0.06em; }

  /* ===== Marketing refresh (2026-10-07): outcomes, real screenshots, WhatsApp ===== */

  /* Hero outcome list: what a church gains, not a feature list */
  .gain-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; max-width: 46ch; }
  .gain-list li { position: relative; padding-left: 30px; color: var(--ink); font-size: 1rem; line-height: 1.45; }
  .gain-list li::before {
    content: ""; position: absolute; left: 0; top: 0.2em; width: 18px; height: 18px; border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
  }
  .gain-list li::after {
    content: ""; position: absolute; left: 6px; top: calc(0.2em + 4px); width: 5px; height: 9px;
    border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
  }

  /* A real phone screenshot in a simple device frame */
  .phone-shot { margin: 0; width: min(100%, 260px); justify-self: center; }
  .phone-shot .phone-frame {
    background: var(--panel); border: 1px solid var(--rule); border-radius: 34px; padding: 9px;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  }
  .phone-shot img { width: 100%; height: auto; border-radius: 26px; display: block; background: var(--bg); }
  .phone-shot figcaption { margin-top: 12px; text-align: center; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.03em; color: var(--ink-faint); }
  section.panel .phone-shot figcaption { color: var(--panel-text-dim); }
  .hero-shot { justify-self: center; width: min(100%, 270px); }
  @media (max-width: 860px) { .hero-shot { width: min(100%, 240px); } }

  /* A row of phone screenshots: wraps on wide screens, swipes sideways on a phone (inside its own box, so
     the page itself never scrolls horizontally) */
  .shot-gallery { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; }
  .shot-gallery .phone-shot { flex: 0 0 240px; }
  @media (max-width: 640px) {
    .shot-gallery { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; gap: 18px; padding: 4px 2px 14px; scrollbar-width: thin; }
    .shot-gallery .phone-shot { flex: 0 0 68%; scroll-snap-align: center; }
  }
  .shot-note { margin: 18px 0 0; text-align: center; font-size: 0.86rem; color: var(--ink-faint); }
  section.panel .shot-note { color: var(--panel-text-dim); }

  /* Home: WCM on the big screen next to the two phone apps */
  .screens-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
  .screens-grid .showcase-card figcaption { font-size: 0.72rem; }
  .screens-grid .phone-shot { width: 100%; max-width: 240px; }
  @media (max-width: 860px) {
    .screens-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
    .screens-grid > .showcase-card { grid-column: 1 / -1; }
  }

  /* "Pro" marker on a feature cell */
  .pro-pill { display: inline-block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 9px; border-radius: 20px; font-weight: 600; border: 1px solid var(--accent); color: var(--accent); margin-top: 8px; }

  /* Why WCM: six honest differentiators */
  .why-grid .pledge-cell h3 { margin-top: 0; }
  .why-grid .why-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); margin-bottom: 14px; }
  @media (max-width: 960px) and (min-width: 561px) { .why-grid.pledge-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* WhatsApp "Talk to us": rendered by site.js ONLY when WHATSAPP_NUMBER is filled in */
  .wa-float {
    position: fixed; right: 20px; bottom: 20px; z-index: 10; display: inline-flex; align-items: center; gap: 9px;
    background: #25d366; color: #0a0a0e; text-decoration: none; font-weight: 600; font-size: 0.92rem;
    padding: 11px 16px 11px 13px; border-radius: 999px; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.6);
    transition: transform 0.2s ease, filter 0.2s ease;
  }
  .wa-float:hover { transform: translateY(-2px); filter: brightness(1.05); }
  .wa-float:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .wa-float svg { flex-shrink: 0; }
  body.has-wa #backToTop { bottom: 84px; }
  @media (max-width: 560px) { .wa-float .wa-label { display: none; } .wa-float { padding: 13px; } body.has-wa #backToTop { bottom: 80px; } }
  .wa-inline { margin: 0 0 14px; }
  .gain-list + .cta-row { margin-top: 30px; }
  /* The projected WCM capture is near-black like the page: frame it so it reads as a screen */
  .screens-grid .showcase-card { border: 1px solid var(--rule); }
  .screens-grid .showcase-card img { background: #000; }
  /* Korean: break lines between words, not inside them */
  html[lang="ko"] body { word-break: keep-all; }

/* Downloads paused (site.js DOWNLOADS_PAUSED) */
.btn-paused { cursor: default; opacity: 0.75; pointer-events: none; }

/* ---- Big release (2026-10-14): WCM 1.2.35, Bible / Study Bible 0.9.16, Church Life, church pages without
   WCM. New building blocks only; nothing above changes. Ideas borrowed from good product sites (not their
   look): numbered pillars with a real screen each, alternating feature rows, a "one week" timeline,
   short two-part headlines, an FAQ, and install steps that stand out. */

/* "What's new" strip under the nav */
.news-bar { background: color-mix(in srgb, var(--accent) 12%, var(--bg)); border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.news-bar .wrap { display: flex; align-items: center; justify-content: center; gap: 8px 12px; flex-wrap: wrap; padding-block: 10px; font-size: 0.9rem; text-align: center; }
.news-bar .news-tag { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--accent); color: #0a0a0e; border-radius: 20px; padding: 2px 9px; font-weight: 700; }
.news-bar a { color: var(--accent-bright); font-weight: 600; text-underline-offset: 3px; }

/* Lead-in under a section title: one bold sentence, then the body */
.lead-in { font-weight: 600; color: var(--ink); font-size: 1.08rem; margin: 0 0 10px; }
section.panel .lead-in { color: var(--panel-text); }

/* Three pillars, each with a real screen */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 960px) { .pillars { grid-template-columns: minmax(0, 1fr); } }
.pillar { background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
section.panel .pillar { background: var(--panel-soft); border-color: var(--rule-on-panel); }
.pillar .pillar-shot { aspect-ratio: 16 / 10; background: #000; overflow: hidden; border-bottom: 1px solid var(--rule); }
.pillar .pillar-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pillar .pillar-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.pillar .num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--accent); margin: 0 0 6px; }
.pillar h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; margin: 0 0 4px; }
.pillar .who { font-size: 0.84rem; color: var(--ink-faint); margin: 0 0 12px; }
section.panel .pillar .who { color: var(--panel-text-dim); }
.pillar p { margin: 0 0 16px; color: var(--ink-dim); font-size: 0.94rem; }
section.panel .pillar p { color: var(--panel-text-dim); }
.pillar .text-link { margin-top: auto; }

/* Alternating feature rows: text on one side, a real screen on the other */
.feature-rows { display: grid; gap: 72px; }
.feature-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px; align-items: center; }
.feature-row:nth-child(even) .feature-copy { order: 2; }
@media (max-width: 860px) {
  .feature-rows { gap: 56px; }
  .feature-row { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .feature-row:nth-child(even) .feature-copy { order: 0; }
}
.feature-copy .num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--accent); text-transform: uppercase; margin: 0 0 8px; }
section.panel .feature-copy .num { color: var(--accent-on-panel); }
.feature-copy h3 { font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 600; margin: 0 0 10px; text-wrap: balance; }
.feature-copy p { margin: 0 0 12px; color: var(--ink-dim); }
section.panel .feature-copy p { color: var(--panel-text-dim); }
.feature-copy ul, .feature-copy ol:not(.steps) { margin: 0 0 12px; padding-left: 1.2em; color: var(--ink-dim); font-size: 0.95rem; }
section.panel .feature-copy ul, section.panel .feature-copy ol:not(.steps) { color: var(--panel-text-dim); }
.feature-copy li { margin-bottom: 6px; }
.feature-copy strong { color: var(--ink); font-weight: 600; }
section.panel .feature-copy strong { color: var(--panel-text); }
.feature-copy .fine { font-size: 0.84rem; color: var(--ink-faint); }
section.panel .feature-copy .fine { color: var(--panel-text-dim); }
.feature-copy .steps { margin-bottom: 14px; }

.shot-frame { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--rule); background: #000; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); }
section.panel .shot-frame { border-color: var(--rule-on-panel); }
.shot-frame img { width: 100%; height: auto; display: block; }
.shot-frame.light { background: #f4f6f9; }
.shot-cap { margin: 10px 0 0; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.03em; color: var(--ink-faint); text-align: center; }
section.panel .shot-cap { color: var(--panel-text-dim); }
.shot-stack { display: grid; gap: 14px; margin: 0; }
.shot-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 480px) { .shot-pair { grid-template-columns: minmax(0, 1fr); } }
.shot-small { max-width: 460px; justify-self: center; width: 100%; }
.phone-pair { display: flex; justify-content: center; align-items: flex-start; gap: 22px; }
.phone-pair .phone-shot { flex: 0 1 230px; }
@media (max-width: 480px) { .phone-pair { gap: 12px; } .phone-pair .phone-shot { flex: 1 1 0; } .phone-pair .phone-shot .phone-frame { border-radius: 24px; padding: 6px; } .phone-pair .phone-shot img { border-radius: 19px; } }

/* Small cards row */
.mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 18px; }
.mini-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 22px 22px 20px; overflow-wrap: anywhere; }
section.panel .mini-card { background: var(--panel-soft); border-color: var(--rule-on-panel); }
.mini-card .kicker { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.mini-card h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; margin: 0 0 8px; }
.mini-card p { margin: 0 0 8px; color: var(--ink-dim); font-size: 0.92rem; }
section.panel .mini-card p { color: var(--panel-text-dim); }
.mini-card p:last-child { margin-bottom: 0; }
.mini-card ol:not(.steps), .mini-card ul { margin: 0; padding-left: 1.2em; color: var(--ink-dim); font-size: 0.92rem; }
section.panel .mini-card ol:not(.steps), section.panel .mini-card ul { color: var(--panel-text-dim); }
.mini-card li { margin-bottom: 5px; }
.mini-card a { color: var(--accent); }
.mini-card .steps > li { font-size: 0.92rem; }

/* One week timeline */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 14px; max-width: 860px; }
.timeline::before { content: ""; position: absolute; left: 105px; top: 8px; bottom: 8px; width: 2px; background: color-mix(in srgb, var(--accent) 35%, transparent); }
.timeline li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 36px; align-items: start; position: relative; }
.timeline li::before { content: ""; position: absolute; left: 100px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
section.panel .timeline li::before { box-shadow: 0 0 0 4px var(--panel); }
.timeline .when { font-family: var(--font-mono); font-size: 0.74rem; color: var(--accent); text-align: right; padding-top: 3px; line-height: 1.35; }
section.panel .timeline .when { color: var(--accent-on-panel); }
.timeline .what { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 18px; }
section.panel .timeline .what { background: var(--panel-soft); border-color: var(--rule-on-panel); }
.timeline .what h3 { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; margin: 0 0 4px; }
.timeline .what p { margin: 0; font-size: 0.9rem; color: var(--ink-dim); }
section.panel .timeline .what p { color: var(--panel-text-dim); }
.timeline .where-tag { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 4px; }
section.panel .timeline .where-tag { color: var(--panel-text-dim); }
@media (max-width: 560px) {
  .timeline::before { left: 6px; }
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-left: 28px; }
  .timeline li::before { left: 1px; top: 4px; }
  .timeline .when { text-align: left; padding-top: 0; }
}

/* Numbered steps (big circles): every instruction on the site is a numbered list */
.steps { list-style: none; counter-reset: st; margin: 0; padding: 0; display: grid; gap: 12px; }
.steps > li { counter-increment: st; position: relative; padding: 3px 0 0 44px; min-height: 30px; color: var(--ink); line-height: 1.5; }
.steps > li::before {
  content: counter(st); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.88rem;
  background: var(--accent); color: #0a0a0e;
}
section.panel .steps > li { color: var(--panel-text); }
.steps .sub { display: block; font-size: 0.86rem; color: var(--ink-faint); margin-top: 2px; }
section.panel .steps .sub { color: var(--panel-text-dim); }
.steps .ico { display: inline-flex; vertical-align: -6px; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 7px; background: color-mix(in srgb, #0a84ff 20%, transparent); color: #6cb4ff; margin: 0 3px; }
.steps .ico svg { width: 17px; height: 17px; }
.steps .ios-btn { display: inline-block; font-weight: 600; color: #6cb4ff; border: 1px solid color-mix(in srgb, #6cb4ff 45%, transparent); border-radius: 7px; padding: 0 7px; font-size: 0.9em; }
.steps b, .steps strong { font-weight: 600; }

/* The iPhone "Add to Home Screen" card */
.ios-card { position: relative; border-radius: 20px; padding: 34px 34px 30px; background: linear-gradient(160deg, color-mix(in srgb, #0a84ff 16%, var(--surface)) 0%, var(--surface) 60%); border: 2px solid color-mix(in srgb, #6cb4ff 55%, transparent); box-shadow: 0 30px 70px -40px color-mix(in srgb, #0a84ff 60%, transparent); }
.ios-card-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr); gap: 40px; align-items: center; }
@media (max-width: 860px) { .ios-card { padding: 26px 18px 22px; } .ios-card-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; } }
.ios-card .ios-flag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6cb4ff; margin: 0 0 10px; }
.ios-card h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 10px; text-wrap: balance; }
.ios-card .ios-intro { color: var(--ink-dim); margin: 0 0 22px; }
.ios-card .steps > li { font-size: 1.04rem; }
.ios-card .ios-note { margin: 18px 0 0; font-size: 0.88rem; color: var(--ink-faint); }
.ios-card .ios-cta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }
.ios-card .phone-shot { width: min(100%, 250px); }
.ios-subcard { margin-top: 28px; border-top: 1px dashed color-mix(in srgb, #6cb4ff 40%, transparent); padding-top: 24px; }
.ios-subcard h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; margin: 0 0 6px; }
.ios-subcard > p { color: var(--ink-dim); margin: 0 0 14px; font-size: 0.95rem; }
.ios-only-note { display: none; margin: 0 0 18px; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, #f5b84a 14%, transparent); border: 1px solid color-mix(in srgb, #f5b84a 45%, transparent); color: var(--ink); font-size: 0.9rem; }
body.is-ios-other .ios-only-note { display: block; }
body.is-ios .ios-card { border-color: #6cb4ff; }
body.is-ios [data-hide-on-ios] { display: none !important; }
[data-show-on-ios] { display: none !important; }
body.is-ios [data-show-on-ios] { display: inline-flex !important; }
body.is-ios .btn[data-ios-primary] { background: var(--accent); color: #0a0a0e; border-color: transparent; }

/* iPhone banner: only shown on an iPhone/iPad that is not already using the Home Screen app */
.ios-banner { display: none; background: color-mix(in srgb, #0a84ff 16%, var(--bg)); border-bottom: 1px solid color-mix(in srgb, #6cb4ff 45%, transparent); }
body.is-ios:not(.is-ios-standalone) .ios-banner { display: block; }
.ios-banner .wrap { display: flex; align-items: center; gap: 12px 14px; padding-block: 14px; flex-wrap: wrap; }
.ios-banner p { margin: 0; flex: 1 1 220px; font-size: 0.95rem; }
.ios-banner strong { color: #8cc6ff; }

/* FAQ */
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 0 20px; }
section.panel .faq details { background: var(--panel-soft); border-color: var(--rule-on-panel); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 30px 16px 0; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 2px; top: 13px; font-size: 1.3rem; color: var(--accent); line-height: 1; transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.faq details p { margin: 0 0 16px; color: var(--ink-dim); font-size: 0.95rem; }
section.panel .faq details p { color: var(--panel-text-dim); }
.faq details a { color: var(--accent); }

/* Contrast band: one short statement and two buttons */
.contrast-band { border: 1px solid var(--rule); border-radius: 18px; padding: 36px 34px; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 55%), var(--surface); display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 24px; align-items: center; }
@media (max-width: 760px) { .contrast-band { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; } }
.contrast-band h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 8px; text-wrap: balance; }
.contrast-band p { margin: 0; color: var(--ink-dim); }
.contrast-band .cta-col { display: flex; flex-wrap: wrap; gap: 12px; }

/* Two-column "what you get" comparison */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 760px) { .compare { grid-template-columns: minmax(0, 1fr); } }
.compare .col { border: 1px solid var(--rule); border-radius: 14px; padding: 22px; background: var(--surface); }
section.panel .compare .col { border-color: var(--rule-on-panel); background: var(--panel-soft); }
.compare .col.featured { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.compare h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin: 0 0 4px; }
.compare .col-line { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent); margin: 0 0 14px; }
.compare ul { margin: 0; padding-left: 1.15em; color: var(--ink-dim); font-size: 0.93rem; }
section.panel .compare ul { color: var(--panel-text-dim); }
.compare li { margin-bottom: 6px; }

/* Role chips for team links */
.role-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.role-list li { font-size: 0.84rem; border: 1px solid var(--rule); border-radius: 20px; padding: 4px 12px; color: var(--ink-dim); }
section.panel .role-list li { border-color: var(--rule-on-panel); color: var(--panel-text-dim); }
.role-list li b { color: var(--ink); font-weight: 600; }
section.panel .role-list li b { color: var(--panel-text); }

.section-cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
section[id], .ios-card[id] { scroll-margin-top: 72px; }