/* ============================================================================
   CAMPAIGNIA LANDING PAGE STYLESHEET (v3.0.897)

   These 900 lines were inline in public/index.html until v3.0.897. Ian, 2026-09-13:
   "I want to take our exact initial Landing page that is geared toward D&D players and rework
   it so it's more for General Story Makers and Family Stories... I'd like it to have the exact
   same layout and For now I'm ok with the Fonts and styles."

   A SECOND LANDING PAGE NEEDS THESE RULES, AND TWO COPIES OF ONE STYLESHEET IS THE FAULT THIS
   PROJECT KEEPS PAYING FOR. So they live here once and every landing page links this file. A
   fix is made in one place; and the day a page should look nothing like this one, it is handed
   a different file instead -- the same swap point tier-grid.css was built as in v3.0.891.

   MOVED, NOT REWRITTEN. Every byte after this comment is the block that came out of index.html,
   in its original order and indentation, and the batch guard asserts the sha256 of this file
   from the comment terminator onward against the bytes it removed. Nothing was tidied on the
   way: a refactor that also edits is a refactor you cannot prove.

   NOTE THE FILE STARTS ITS RULES ON THE NEXT LINE WITH NO BLANK LINE OF ITS OWN -- the leading
   newline belongs to the extracted block, and adding one here would break that proof.
   ============================================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* v3.4.61 -- the colors are the brand theme sheet's (/css/themes/campaignia.css), linked by each page before this file. */
      --border: 5px solid var(--page-bg);
      --gutter: 10px;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-body);
      background: var(--panel);
      color: var(--on-panel);
      overflow-x: hidden;
    }

    /* HALFTONE */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: radial-gradient(circle, var(--halftone-dot) 1px, transparent 1px);
      background-size: 6px 6px;
      pointer-events: none;
      z-index: 1000;
    }

    /* NAV */
    /* v3.0.928 -- shorter bar. See the batch note: the button and the logo were tied
       for tallest, so both come down or neither does. */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 500;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 24px;   /* v3.0.928 -- was 14px. */
      background: rgba(var(--page-bg-rgb),0.96);
      border-bottom: 3px solid var(--page-bg);
      box-shadow: 0 3px 0 rgba(var(--accent-rgb),0.15);
    }

    /* STAGING ENV INDICATOR */
    html.staging-env nav { background:#ff6a00; border-bottom:3px solid #7a2e00; box-shadow:0 3px 0 rgba(0,0,0,0.25); }
    html.staging-env .nav-logo-text { color:#2b1400; }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
    }

    .nav-logo img { height: 30px; }   /* v3.0.928 -- was 38px, joint-tallest child of the bar. */

    .nav-logo-text {
      font-family: var(--font-label);
      font-size: 18px;
      font-weight: 700;
      color: var(--accent);
      letter-spacing: 4px;
    }

    .nav-actions { display: flex; align-items: center; gap: 12px; }

    .nav-link {
      font-family: var(--font-label);
      font-size: 11px;
      letter-spacing: 2px;
      color: rgba(var(--accent-rgb),0.6);
      text-decoration: none;
      transition: color 0.2s;
    }
    .nav-link:hover { color: var(--accent); }

    .btn-nav {
      font-family: var(--font-comic);
      /* v3.0.928 -- was 16px / 8px 24px. This is the Sign In button Ian asked about.
         It shares the height with .nav-logo img, so that came down by the same step. */
      font-size: 14px;
      letter-spacing: 2px;
      padding: 5px 18px;
      background: var(--button-cta);
      color: var(--on-panel);
      border: 3px solid var(--page-bg);
      border-radius: 3px;
      cursor: pointer;
      text-decoration: none;
      box-shadow: 3px 3px 0 var(--page-bg);
      transition: all 0.15s;
    }
    .btn-nav:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--page-bg); }
    .nav-toggle {
      display: none;
      background: none;
      border: 2px solid rgba(var(--accent-rgb),0.4);
      color: var(--accent);
      font-size: 20px;
      line-height: 1;
      padding: 4px 11px;
      border-radius: 4px;
      cursor: pointer;
    }
    .mobile-menu {
      display: none;
      position: fixed;
      top: 64px; left: 0; right: 0;
      z-index: 499;
      flex-direction: column;
      background: rgba(var(--page-bg-rgb),0.98);
      border-bottom: 3px solid var(--page-bg);
      box-shadow: 0 6px 16px rgba(0,0,0,0.5);
      padding: 6px 0;
    }
    .mobile-menu a {
      font-family: var(--font-label);
      font-size: 14px;
      letter-spacing: 2px;
      color: rgba(var(--accent-rgb),0.85);
      text-decoration: none;
      padding: 14px 24px;
      border-bottom: 1px solid rgba(var(--accent-rgb),0.12);
    }
    .mobile-menu a:last-child { border-bottom: none; }
    .mobile-menu a:hover, .mobile-menu a:active { color: var(--accent); background: rgba(var(--accent-rgb),0.06); }

    /* COMIC BOOK PAGE */
    .comic-book {
      padding-top: 64px;
      background: var(--hover-fill);
      min-height: 100vh;
      position: relative;
    }

    /* PAGE BACKGROUND - aged paper feel */
    .comic-page {
      max-width: 1200px;
      margin: 0 auto;
      background: var(--panel);
      padding: var(--gutter);
      position: relative;
    }

    /* ROW */
    .comic-row {
      display: flex;
      gap: var(--gutter);
      margin-bottom: var(--gutter);
    }

    /* PANEL BASE */
    .panel {
      border: var(--border);
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
      background: var(--panel);
    }

    /* ============================================================
       PANEL 1 — HERO (Full width, tall)
       ============================================================ */
    .panel-hero {
      width: 100%;
      min-height: 88vh;
      background-image: url('/images/DM_Rolling_Dice.png');
      background-size: cover;
      background-position: center top;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 0;
      margin-bottom: var(--gutter);
    }

    .panel-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(var(--page-bg-rgb),0.1) 0%,
        rgba(var(--page-bg-rgb),0.2) 40%,
        rgba(var(--page-bg-rgb),0.85) 75%,
        rgba(var(--page-bg-rgb),0.97) 100%
      );
    }

    .hero-content {
      position: relative;
      z-index: 2;
      padding: 4px 48px 32px;
      max-width: 800px;
    }

    .hero-eyebrow {
      font-family: var(--font-comic);
      font-size: 14px;
      letter-spacing: 6px;
      color: var(--button-cta);
      margin-bottom: 8px;
    }

    .hero-title {
      font-family: var(--font-comic);
      font-size: clamp(40px, 5.5vw, 72px);
      line-height: 0.92;
      color: var(--accent);
      text-shadow: 4px 4px 0 var(--page-bg), 6px 6px 0 rgba(0,0,0,0.4);
      margin-bottom: 8px;
      letter-spacing: 2px;
    }

    .hero-title .white { color: var(--on-panel); }
    .hero-title .red { color: var(--button-cta); }

    .hero-sub {
      font-family: var(--font-body);
      /* v3.0.928 -- was clamp(15px, 2vw, 18px). Both ends move by the same step, so the
         line scales exactly as it did and is simply two pixels larger everywhere. */
      font-size: clamp(17px, 2.2vw, 20px);
      font-style: italic;
      color: var(--accent-pale);
      line-height: 1.55;
      margin-bottom: 12px;
      max-width: 560px;
    }

    .hero-cta-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .btn-hero {
      font-family: var(--font-comic);
      font-size: 21px;
      letter-spacing: 2px;
      padding: 14px 32px;
      background: var(--button-cta);
      color: var(--on-panel);
      border: 4px solid var(--page-bg);
      border-radius: 3px;
      cursor: pointer;
      text-decoration: none;
      box-shadow: 5px 5px 0 var(--page-bg);
      transition: all 0.15s;
      display: inline-block;
    }
    .btn-hero:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--page-bg); }

    .btn-ghost {
      font-family: var(--font-label);
      font-size: 13px;
      letter-spacing: 2px;
      padding: 14px 28px;
      background: transparent;
      color: var(--accent);
      border: 2px solid rgba(var(--accent-rgb),0.4);
      border-radius: 3px;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.2s;
      display: inline-block;
    }
    .btn-ghost:hover { border-color: var(--accent); background: rgba(var(--accent-rgb),0.08); }

    .hero-trial {
      /* v3.0.928 -- was 12px. */ font-size: 14px;
      /* v3.0.926 -- was rgba(201,168,76,0.4): 2.24:1 on this panel, below the 4.5:1 floor.
         Ian: "It needs to be the same color as" the hero subtitle -- which is --gold-light. */
      color: var(--accent-pale);
      font-family: var(--font-label);
      letter-spacing: 1px;
      line-height: 1.45;
      margin-top: 8px;
    }

    /* CAPTION BOX - like comic book caption */
    .caption-box {
      background: var(--on-panel);
      color: var(--page-bg);
      border: var(--border);
      padding: 14px 18px;
      font-family: var(--font-body);
      font-size: 15px;
      font-style: italic;
      line-height: 1.7;
      position: relative;
    }

    .caption-box.gold-cap::before {
      content: attr(data-label);
      position: absolute;
      top: -1px; left: 12px;
      font-family: var(--font-comic);
      font-size: 10px;
      letter-spacing: 3px;
      background: var(--accent);
      color: var(--page-bg);
      padding: 0 8px;
      transform: translateY(-50%);
    }

    /* SPEECH BUBBLE */
    .speech-bubble {
      background: white;
      color: var(--page-bg);
      border: 4px solid var(--page-bg);
      border-radius: 20px;
      padding: 14px 20px;
      font-family: var(--font-comic);
      font-size: 20px;
      letter-spacing: 1px;
      position: relative;
      display: inline-block;
      box-shadow: 3px 3px 0 var(--page-bg);
    }

    .speech-bubble::after {
      content: '';
      position: absolute;
      bottom: -20px; left: 28px;
      border-left: 14px solid transparent;
      border-right: 8px solid transparent;
      border-top: 20px solid var(--page-bg);
    }
    .speech-bubble::before {
      content: '';
      position: absolute;
      bottom: -13px; left: 31px;
      border-left: 11px solid transparent;
      border-right: 6px solid transparent;
      border-top: 14px solid white;
      z-index: 1;
    }

    /* ============================================================
       ROW 2 — Players celebrating (left, tall) + How It Works (right)
       ============================================================ */
    .panel-players {
      width: 42%;
      min-height: 600px;
      background-image: url('/images/Player_Scoring_a_Critical_Hit.png');
      background-size: cover;
      background-position: center top;
      position: relative;
      flex-shrink: 0;
    }

    .panel-players::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(var(--page-bg-rgb),0.7) 0%, transparent 50%);
    }

    .players-caption {
      position: absolute;
      bottom: 16px;
      left: 16px;
      right: 16px;
      z-index: 2;
    }

    .panel-how {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: var(--gutter);
      background: transparent;
      border: none;
      padding: 0;
    }

    .how-title-panel {
      background: var(--danger);
      padding: 20px 24px;
      border: var(--border);
    }

    /* ============================================================
       v3.0.925 -- TD-780 Push 7b. WHAT YOU GET.

       Shaped on .panel-how / .how-step-panel deliberately, and it reuses .how-title-panel,
       .section-tag and .section-title rather than inventing a second header: every one of those
       is already named in landing-story.css's re-skin, so the story page gets them right for
       free. Only the two lines that had no equivalent are new.

       42%, matching what .panel-pricing used to take, so the payoff beside it keeps the 58% it
       was cropped for. The items are flex:1 so four of them fill the column against the payoff's
       600px rather than leaving a gap under the last one.
       ============================================================ */
    .panel-reward {
      width: 42%;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: var(--gutter);
      background: transparent;
      border: none;
      padding: 0;
    }

    .reward-items {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: var(--gutter);
    }

    .reward-item {
      flex: 1;
      border: var(--border);
      background: var(--panel);
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .reward-item-title {
      font-family: var(--font-comic);
      font-size: 20px;
      color: var(--accent);
      letter-spacing: 1px;
      margin-bottom: 4px;
    }

    .reward-item-desc {
      font-family: var(--font-body);
      /* v3.0.928 -- was 14px. */ font-size: 16px;
      font-style: italic;
      color: rgba(var(--on-panel-rgb),0.7);
      line-height: 1.55;
    }

    .section-tag {
      font-family: var(--font-comic);
      font-size: 11px;
      letter-spacing: 5px;
      color: rgba(var(--on-panel-rgb),0.6);
      margin-bottom: 4px;
      display: block;
    }

    .section-title {
      font-family: var(--font-comic);
      font-size: clamp(28px, 4vw, 48px);
      color: var(--on-panel);
      line-height: 1;
      letter-spacing: 2px;
      text-shadow: 2px 2px 0 rgba(0,0,0,0.4);
    }

    .how-steps {
      display: flex;
      flex-direction: column;
      gap: var(--gutter);
      flex: 1;
    }

    .how-step-panel {
      flex: 1;
      border: var(--border);
      background: var(--panel);
      padding: 20px;
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }

    .step-num {
      font-family: var(--font-comic);
      font-size: 52px;
      color: var(--accent);
      line-height: 1;
      text-shadow: 3px 3px 0 rgba(0,0,0,0.5);
      flex-shrink: 0;
      width: 50px;
    }

    .step-content {}

    .step-label {
      font-family: var(--font-comic);
      font-size: 10px;
      letter-spacing: 4px;
      color: var(--button-cta);
      margin-bottom: 4px;
    }

    .step-title {
      font-family: var(--font-comic);
      font-size: 22px;
      color: var(--accent);
      margin-bottom: 6px;
      letter-spacing: 1px;
    }

    .step-desc {
      font-family: var(--font-body);
      /* v3.0.928 -- was 14px. */ font-size: 16px;
      font-style: italic;
      color: rgba(var(--on-panel-rgb),0.7);
      line-height: 1.6;
    }

    /* ============================================================
       ROW 3 — Features strip (full width)
       ============================================================ */
    .features-strip {
      width: 100%;
      border: var(--border);
      background: var(--panel-deep);
      margin-bottom: var(--gutter);
      overflow: hidden;
    }

    .features-strip-header {
      background: var(--accent);
      padding: 12px 24px;
      border-bottom: var(--border);
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .features-strip-title {
      font-family: var(--font-comic);
      font-size: 28px;
      color: var(--page-bg);
      letter-spacing: 3px;
    }

    .features-strip-body {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }

    .feature-cell {
      padding: 24px 20px;
      border-right: 3px solid rgba(var(--accent-rgb),0.1);
      position: relative;
    }

    .feature-cell:last-child { border-right: none; }

    .feature-cell::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--danger);
    }

    .feature-icon { font-size: 28px; margin-bottom: 8px; display: block; }

    .feature-title {
      font-family: var(--font-comic);
      font-size: 18px;
      color: var(--accent);
      margin-bottom: 6px;
      letter-spacing: 1px;
    }

    .feature-desc {
      font-family: var(--font-body);
      /* v3.0.928 -- was 13px. */ font-size: 15px;
      font-style: italic;
      color: rgba(var(--on-panel-rgb),0.6);
      line-height: 1.6;
    }

    /* ============================================================
       ROW 4 — Pricing (left, 2/5) + Payoff image (right, 3/5)
       ============================================================ */
    .panel-pricing {
      width: 42%;
      border: var(--border);
      background: var(--panel);
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
    }

    .pricing-header {
      background: var(--accent);
      padding: 14px 20px;
      border-bottom: var(--border);
    }

    .pricing-header-title {
      font-family: var(--font-comic);
      font-size: 32px;
      color: var(--page-bg);
      letter-spacing: 2px;
    }

    .pricing-header-sub {
      /* v3.0.928 -- was 13px. */ font-size: 15px;
      color: rgba(var(--surface-ink-text-rgb),0.6);
      font-style: italic;
    }

    .pricing-tiers {
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    .tier-row {
      display: flex;
      align-items: center;
      padding: 7px 20px;
      border-bottom: 2px solid rgba(var(--accent-rgb),0.1);
      gap: 14px;
      transition: background 0.15s;
    }
    .tier-row:last-child { border-bottom: none; }
    .tier-row:hover { background: rgba(var(--accent-rgb),0.05); }

    /* ============================================================
       v3.0.924 -- TD-780 Push 7. PASSES ON THE STOREFRONT.

       .panel-pricing keeps its 42% rule untouched; the full-width behaviour is added by a
       PARENT class instead. That is deliberate -- a width this page has depended on for months
       is not worth rewriting when one more specific selector does the job, and any other row
       that ever wants the old proportions still has them.
       ============================================================ */
    .comic-row-pricing .panel-pricing { width: 100%; }

    .plan-blurb {
      padding: 12px 20px 10px;
      border-bottom: 2px solid rgba(var(--accent-rgb),0.1);
    }
    .plan-blurb b {
      font-family: var(--font-comic);
      font-size: 18px;
      letter-spacing: 1.5px;
      color: var(--accent);
      display: block;
    }
    .plan-blurb span {
      /* v3.0.928 -- was 13px. */ font-size: 15px;
      color: rgba(var(--on-panel-rgb),0.62);
      font-style: italic;
    }

    .pass-cards {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      padding: 14px 20px 16px;
      border-bottom: 2px solid rgba(var(--accent-rgb),0.1);
      align-items: stretch;
    }

    .pass-card {
      border: 2px solid rgba(var(--accent-rgb),0.45);
      border-radius: 3px;
      background: rgba(var(--accent-rgb),0.04);
      padding: 14px 14px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 2px;
      transition: border-color 0.15s, background 0.15s;
    }
    .pass-card:hover { border-color: var(--accent); background: rgba(var(--accent-rgb),0.08); }

    .pass-card-kicker {
      font-size: 10px;
      letter-spacing: 2px;
      color: rgba(var(--tier-platinum-rgb),0.75);
      text-transform: uppercase;
    }
    .pass-card-term {
      font-family: var(--font-comic);
      font-size: 26px;
      letter-spacing: 2px;
      color: var(--tier-platinum);
      line-height: 1.1;
    }
    /* TOKENS LEAD, AND THEY ARE THE BIGGEST THING ON THE CARD. It is where a pass actually wins:
       one carry-over lump against a monthly grant that is partly use-it-or-lose-it. */
    .pass-card-tokens {
      font-family: var(--font-comic);
      font-size: 30px;
      letter-spacing: 1px;
      color: var(--accent);
      margin-top: 6px;
      line-height: 1;
    }
    .pass-card-tokens-sub {
      /* v3.0.928 -- was 12px. */ font-size: 14px;
      font-style: italic;
      color: rgba(var(--on-panel-rgb),0.55);
      margin-bottom: 8px;
    }
    .pass-card-price {
      font-family: var(--font-comic);
      font-size: 24px;
      color: var(--on-panel);
      margin-bottom: 10px;
    }
    /* NO PER-MONTH FIGURE ON A PASS CARD. See the batch note: every pass is above Platinum's $22
       per month, and the subscription rows are directly underneath. */

    /* v3.0.926 -- THE PASS BUTTON WEARS PLATINUM, and not merely because Ian asked for that
       colour: a Platinum Pass grants the Platinum tier, so the button that buys one should be the
       button that buys Platinum. The value is written out rather than inherited because
       .tier-platinum .btn-tier is a descendant rule and a pass card has no .tier-platinum
       ancestor -- the guard asserts the two stay equal. */
    .btn-pass {
      margin-top: auto;
      width: 100%;
      font-size: 13px;
      background: var(--tier-platinum);
      color: var(--page-bg);
    }

    .tier-coin { font-size: 28px; flex-shrink: 0; }

    .tier-info { flex: 1; }

    .tier-name-row {
      font-family: var(--font-comic);
      /* v3.0.927 -- TD-780 Push 7d. 20px was sized for a 42% column. Matches .pass-card-term. */
      font-size: 26px;
      letter-spacing: 2px;
    }

    .tier-copper .tier-name-row { color: var(--copper); }
    .tier-silver .tier-name-row { color: var(--tier-silver); }
    .tier-gold .tier-name-row { color: var(--accent); }
    .tier-platinum .tier-name-row { color: var(--tier-platinum); }
    .tier-trial .tier-name-row { color: var(--button-cta); }

    .tier-perks {
      /* v3.0.927 -- matches .reward-item-desc. The pass cards carry no long descriptive line, so
         the anchor is the nearest sibling of the same KIND rather than of the same name. This is
         also the line that gained the most room: across the full row, 12px read as fine print. */
      /* v3.0.928 -- was 14px. */ font-size: 16px;
      color: rgba(var(--on-panel-rgb),0.5);
      font-style: italic;
      margin-top: 2px;
    }

    .tier-price-tag {
      font-family: var(--font-comic);
      /* v3.0.927 -- matches .pass-card-price. */
      font-size: 24px;
      color: var(--on-panel);
      text-align: right;
      flex-shrink: 0;
    }

    .tier-price-tag small {
      /* v3.0.928 -- was 12px. */ font-size: 14px;
      color: rgba(var(--on-panel-rgb),0.4);
      display: block;
      font-family: var(--font-body);
    }

    .btn-tier {
      display: block;
      font-family: var(--font-comic);
      font-size: 14px;
      letter-spacing: 2px;
      padding: 8px 16px;
      border: 3px solid var(--page-bg);
      border-radius: 3px;
      cursor: pointer;
      text-decoration: none;
      text-align: center;
      transition: all 0.15s;
      box-shadow: 2px 2px 0 var(--page-bg);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .btn-tier:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--page-bg); }

    /* v3.0.926 -- TD-780 Push 7c. A SAFE DEFAULT, so this class is never colourless again.
       Every background below is a MODIFIER; before this line .btn-tier had none of its own, so a
       .btn-tier used outside a .tier-* row rendered as the browser's default link -- blue text on
       nothing. That is exactly what happened to the pass buttons in v3.0.924, and it looked like a
       decision rather than an omission. The modifiers still win; this only catches the fall. */
    .btn-tier { background: var(--on-panel); color: var(--page-bg); }

    .tier-copper .btn-tier { background: var(--copper); color: var(--on-panel); }
    .tier-silver .btn-tier { background: var(--tier-silver); color: var(--page-bg); }
    .tier-gold .btn-tier { background: var(--accent); color: var(--page-bg); }
    .tier-platinum .btn-tier { background: var(--tier-platinum); color: var(--page-bg); }
    .tier-trial .btn-tier { background: var(--button-cta); color: var(--on-panel); }

    /* PAYOFF PANEL */
    .panel-payoff {
      flex: 1;
      min-height: 600px;
      background-image: url('/images/Campaignia_Book_Payoff2.png');
      background-size: cover;
      background-position: center top;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    .panel-payoff::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(var(--page-bg-rgb),0.4) 0%, transparent 60%);
    }

    .payoff-content {
      position: relative;
      z-index: 2;
      padding: 16px 24px;
      text-align: right;
    }

    .payoff-title {
      font-family: var(--font-comic);
      font-size: clamp(16px, 2vw, 24px);
      color: var(--accent);
      text-shadow: 2px 2px 0 var(--page-bg);
      line-height: 1.1;
      margin-bottom: 6px;
      letter-spacing: 1px;
    }

    .payoff-sub {
      font-family: var(--font-body);
      /* v3.0.928 -- was 13px. */ font-size: 15px;
      font-style: italic;
      color: var(--accent-pale);
      margin-bottom: 0;
      line-height: 1.5;
      display: none;
    }

    .btn-cta {
      font-family: var(--font-comic);
      font-size: 28px;
      letter-spacing: 3px;
      padding: 18px 56px;
      background: var(--button-cta);
      color: var(--on-panel);
      border: 4px solid var(--page-bg);
      border-radius: 3px;
      cursor: pointer;
      text-decoration: none;
      box-shadow: 5px 5px 0 var(--page-bg);
      transition: all 0.15s;
      display: inline-block;
    }
    .btn-cta:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--page-bg); }

    .cta-note {
      margin-top: 12px;
      font-size: 12px;
      color: rgba(var(--accent-rgb),0.4);
      font-family: var(--font-label);
      letter-spacing: 1px;
    }

    /* CTA STRIP below payoff image */
    .cta-strip {
      background: var(--danger);
      border: var(--border);
      border-top: none;
      padding: 28px 32px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
    }

    .cta-strip-text {
      font-family: var(--font-comic);
      font-size: clamp(20px, 3vw, 36px);
      color: var(--on-panel);
      letter-spacing: 2px;
      text-shadow: 2px 2px 0 rgba(0,0,0,0.4);
      text-align: left;
    }

    .cta-strip-sub {
      font-family: var(--font-body);
      /* v3.0.928 -- was 14px. */ font-size: 16px;
      font-style: italic;
      color: rgba(var(--on-panel-rgb),0.7);
      margin-top: 4px;
    }

    /* ============================================================
       ROW 5 — FAQ strip
       ============================================================ */
    .faq-strip {
      width: 100%;
      border: var(--border);
      background: var(--panel);
      margin-bottom: var(--gutter);
    }

    .faq-header {
      background: var(--danger);
      padding: 12px 24px;
      border-bottom: var(--border);
    }

    .faq-header-title {
      font-family: var(--font-comic);
      font-size: 28px;
      color: var(--on-panel);
      letter-spacing: 3px;
    }

    .faq-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
    }

    .faq-cell {
      padding: 20px;
      border-right: 2px solid rgba(var(--accent-rgb),0.1);
      border-bottom: 2px solid rgba(var(--accent-rgb),0.1);
    }

    .faq-cell:nth-child(3n) { border-right: none; }
    .faq-cell:nth-child(n+4) { border-bottom: none; }

    .faq-q {
      font-family: var(--font-comic);
      font-size: 17px;
      color: var(--accent);
      margin-bottom: 8px;
      letter-spacing: 0.5px;
      line-height: 1.2;
    }

    .faq-a {
      font-family: var(--font-body);
      /* v3.0.928 -- was 14px. */ font-size: 16px;
      font-style: italic;
      color: rgba(var(--on-panel-rgb),0.65);
      line-height: 1.6;
    }

    /* FOOTER */
    footer {
      background: var(--page-bg);
      border-top: var(--border);
      padding: 12px 32px 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: relative;
      z-index: 1;
    }

    .footer-top {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 24px;
    }
    .footer-top .footer-logo { justify-self: start; }
    .footer-top .footer-links { justify-self: center; }

    .footer-logo {
      font-family: var(--font-label);
      font-size: 16px;
      font-weight: 700;
      color: var(--accent);
      letter-spacing: 4px;
    }
    .footer-logo img { height: 41px; width: auto; display: block; }

    .footer-links { display: flex; gap: 24px; }

    .footer-link {
      font-family: var(--font-label);
      font-size: 11px;
      letter-spacing: 1px;
      /* v3.0.926 -- was rgba(201,168,76,0.4), 2.23:1 on --ink. */
      color: var(--accent-pale);
      text-decoration: none;
      transition: color 0.2s;
    }
    /* AND THE HOVER HAD TO MOVE WITH IT. --gold (#c9a84c) is DARKER than --gold-light (#e8d5a3),
       so leaving the hover alone would have made these links DIM on hover -- an affordance
       pointing the wrong way. Hover now goes to --parchment, which is brighter than the base. */
    .footer-link:hover { color: var(--on-panel); }

    .footer-copy {
      font-size: 11.5px;
      line-height: 1.5;
      /* v3.0.926 -- was rgba(201,168,76,0.4), 2.23:1 on --ink. This is the copyright and the
         publisher disclaimer, so it is now as legible as everything else in the footer. */
      color: var(--accent-pale);
      text-align: center;
      max-width: 880px;
      width: 100%;
      margin: 0 auto;
      padding-top: 8px;
      border-top: 1px solid rgba(var(--accent-rgb),0.14);
    }

    /* ANIMATIONS */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .hero-eyebrow { animation: fadeUp 0.7s ease 0.1s both; }
    .hero-title { animation: fadeUp 0.7s ease 0.25s both; }
    .hero-sub { animation: fadeUp 0.7s ease 0.4s both; }
    .hero-cta-wrap { animation: fadeUp 0.7s ease 0.55s both; }
    .hero-trial { animation: fadeUp 0.7s ease 0.65s both; }

    /* RESPONSIVE */
    @media (max-width: 900px) {
      .comic-row { flex-direction: column; }
      .panel-players { width: 100%; min-height: 400px; }
      .panel-pricing { width: 100%; }
      /* v3.0.925 -- the reward panel stacks above the payoff rather than beside it. */
      .panel-reward { width: 100%; }
      /* v3.0.924 -- one card per row rather than three slivers. */
      .pass-cards { grid-template-columns: 1fr; }
      .panel-payoff { min-height: 460px; }
      .features-strip-body { grid-template-columns: 1fr 1fr; }
      .faq-grid { grid-template-columns: 1fr; }
      .faq-cell { border-right: none; }
      footer { gap: 8px; text-align: center; }
      .footer-top { grid-template-columns: 1fr; justify-items: center; gap: 10px; }
      .footer-top .footer-logo { justify-self: center; }
      nav .nav-link { display: none; }
      .nav-toggle { display: inline-flex; align-items: center; }
      .mobile-menu.open { display: flex; }
      /* Hero stacks: text first, image below */
      .hero-split { flex-direction: column; min-height: 0 !important; }
      .hero-text-panel { padding: 32px 28px !important; }
      .hero-content { padding: 0 !important; max-width: 100%; }
      .hero-img-panel { min-height: 42vh; }
    }

    @media (max-width: 600px) {
      .features-strip-body { grid-template-columns: 1fr; }
      .feature-cell { border-right: none; }
      .hero-text-panel { padding: 26px 20px !important; }
      .hero-title { font-size: 42px; }
      .hero-sub { font-size: 18px; }   /* v3.0.928 -- was 16px, one step with the rest. */
      .features-strip-title { font-size: 21px; letter-spacing: 2px; }
      .faq-header-title { font-size: 21px; letter-spacing: 2px; }
      .features-strip-header, .faq-header { padding: 12px 18px; }
      .cta-strip { flex-direction: column; text-align: center; padding: 24px 20px; }
      .cta-strip-text { text-align: center; }
      .btn-cta { font-size: 22px; padding: 14px 34px; letter-spacing: 2px; }
      /* Pricing: coin + info on line 1, price + button wrap to line 2 */
      .tier-row { flex-wrap: wrap; row-gap: 8px; padding: 7px 16px; }
      .tier-info { flex: 1 1 calc(100% - 68px); }
      .tier-price-tag { text-align: left; }
      .btn-tier { margin-left: auto; }
    }

    @media (max-width: 400px) {
      .hero-title { font-size: 34px; }
      .nav-logo-text { font-size: 14px; letter-spacing: 2px; }
      .btn-nav { font-size: 13px; padding: 4px 12px; }   /* v3.0.928 -- was 14px / 8px 16px, which
         had become TALLER than the desktop rule it overrides. */
      .hero-text-panel { padding: 22px 16px !important; }
    }

/* v3.3.00 -- TD-1035. "See what they look like" under A REAL BOOK, and the photo window it opens
   (public/js/book-gallery.js). Photos of real printed books, Ian 2026-10-27. */
.book-gallery-link { display: inline-block; margin-top: 6px; font-family: var(--font-body); font-size: 13px; color: var(--accent-pale); text-decoration: underline; text-underline-offset: 3px; opacity: 0.85; }
.book-gallery-link:hover, .book-gallery-link:focus { color: var(--accent); opacity: 1; }
html.bkg-open, html.bkg-open body { overflow: hidden; }
.bkg-overlay { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; background: rgba(6,4,2,0.88); padding: 16px; }
.bkg-box { position: relative; width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 10px; background: var(--panel-deep); border: 1px solid rgba(var(--accent-rgb),0.35); border-radius: 10px; padding: 14px 16px 12px; box-sizing: border-box; }
.bkg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bkg-title { font-family: var(--font-comic); font-size: 22px; letter-spacing: 1px; color: var(--accent); }
.bkg-x { background: none; border: none; color: var(--accent); font-size: 30px; line-height: 1; cursor: pointer; padding: 0 4px; }
.bkg-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; flex: 1 1 auto; }
.bkg-img { display: block; max-width: 100%; max-height: calc(100vh - 230px); object-fit: contain; border-radius: 4px; background: #0a0703; }
.bkg-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb),0.5); background: rgba(var(--panel-deep-rgb),0.75); color: var(--accent); font-size: 28px; line-height: 38px; text-align: center; cursor: pointer; padding: 0; }
.bkg-prev { left: 6px; } .bkg-next { right: 6px; }
.bkg-cap { text-align: center; font-family: var(--font-body); font-style: italic; font-size: 15px; color: rgba(var(--on-panel-rgb),0.85); }
.bkg-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; justify-content: safe center; }
.bkg-thumb { flex: 0 0 auto; padding: 0; border: 2px solid transparent; border-radius: 4px; background: none; cursor: pointer; opacity: 0.7; }
.bkg-thumb img { display: block; height: 64px; width: auto; border-radius: 2px; }
.bkg-thumb.is-on, .bkg-thumb:hover { border-color: var(--accent); opacity: 1; }
.bkg-note { text-align: center; font-size: 12px; color: rgba(var(--on-panel-rgb),0.5); }
@media (max-width: 640px) {
  .bkg-overlay { padding: 8px; }
  .bkg-box { padding: 10px 10px 8px; }
  .bkg-title { font-size: 18px; }
  .bkg-img { max-height: calc(100vh - 200px); }
  .bkg-nav { width: 36px; height: 36px; font-size: 24px; line-height: 32px; }
  .bkg-thumb img { height: 52px; }
}