/* ===================================================================
   upsell-themes.css  —  per-page themes for the three upsells.
   Loaded AFTER /style.css. Themed by the body class the page carries:
   `u1` on /upsell1/, `u2` on /upsell2/, `u3` on /upsell3/.

   Same brand family throughout: same fonts, same layout, same navy
   foundation. Only accent, temperature and contrast change, so the
   three pages read as three volumes of one product line.

   u1 — Priority Transfer ($297): SPEED. Warm amber accent on a light
        warm paper-white, forward-leaning left-edge rules on the offer
        box and timer, amber CTA. The brightest, most energetic page.
   u2 — The Payout Lock ($197): THREAT. Cold steel-blue accent on a
        cool grey page with near-black navy headings and the heaviest
        borders of the three; alarm-red CTA. Darkest and most guarded.
   u3 — Payout Records Pack ($97): PAPERWORK. Sepia-gold accent on a
        warm document-paper background, ruled/stamped detailing, calm
        filed-and-approved green CTA. Lightest, least dramatic.

   In all three the buy button stays the single most prominent element.
   =================================================================== */

/* -------------------------------------------------------------------
   Shared theme plumbing. Each theme only sets these variables; the
   rules below read them, so a new theme is a handful of lines.
   ------------------------------------------------------------------- */
body.u1, body.u2, body.u3 {
  --accent: var(--gold);        /* page accent: rules, labels, timer   */
  --accent-soft: var(--line);   /* tinted border / hairline            */
  --head: var(--navy);          /* h1 + price colour                   */
  --page: #fff;                 /* page background                     */
  --panel: #fafbfc;             /* offer / promo panel background      */
  --cta: #1a7f37;              /* buy button                          */
  --cta-2: #17702f;            /* buy button hover                    */
  --cta-glow: rgba(26,127,55,.25);
  --bar-top: var(--bar);        /* thin top banner                     */
  background: var(--page);
}

/* top banner + logo rule pick up the theme */
body.u1 .topbar, body.u2 .topbar, body.u3 .topbar { background: var(--bar-top); border-bottom-color: var(--accent-soft); }
body.u1 .brand,  body.u2 .brand,  body.u3 .brand  { background: transparent; border-bottom-color: var(--accent); }

/* headings + video frame */
body.u1 .u-head h1, body.u2 .u-head h1, body.u3 .u-head h1 { color: var(--head); }
body.u1 .video, body.u2 .video, body.u3 .video { border-color: var(--head); }

/* promo / offer panel */
body.u1 .draw, body.u2 .draw, body.u3 .draw { background: var(--panel); border-color: var(--accent-soft); }
body.u1 .draw h2, body.u2 .draw h2, body.u3 .draw h2 { color: var(--head); }
body.u1 .draw-btn, body.u2 .draw-btn, body.u3 .draw-btn { background: var(--head); }
body.u1 .draw-btn:hover, body.u2 .draw-btn:hover, body.u3 .draw-btn:hover { background: var(--navy-2); }
body.u1 .reels span, body.u2 .reels span, body.u3 .reels span { border-color: var(--accent-soft); color: var(--head); }
body.u1 .draw-prices .now, body.u2 .draw-prices .now, body.u3 .draw-prices .now { color: var(--head); }

/* buy button — old markup (.btn) and rebuilt markup (.buy-btn) */
body.u1 .btn, body.u1 .buy-btn,
body.u2 .btn, body.u2 .buy-btn,
body.u3 .btn, body.u3 .buy-btn {
  background: var(--cta);
  color: #fff;
  box-shadow: 0 8px 20px var(--cta-glow);
}
body.u1 .btn:hover, body.u1 .buy-btn:hover,
body.u2 .btn:hover, body.u2 .buy-btn:hover,
body.u3 .btn:hover, body.u3 .buy-btn:hover { background: var(--cta-2); }

/* zero-specificity fallback: if the rebuilt buy button has no base rules
   in style.css yet, it still renders as a big obvious button. Any real
   rule in style.css outranks this. */
:where(.buy-btn) {
  display: block; text-decoration: none; text-align: center;
  border: 0; width: 100%; font: inherit; cursor: pointer;
  border-radius: 7px; padding: 17px 20px; font-weight: 700; font-size: 19px; line-height: 1.25;
}
:where(.buy-main) { display: block; }
:where(.buy-sub)  { display: block; font-weight: 600; font-size: 15px; opacity: .95; margin-top: 5px; }

/* product shot — old (.box-shot) and rebuilt (.shot) */
body.u1 .shot, body.u2 .shot, body.u3 .shot { display: block; width: 100%; height: auto; margin: 18px auto 4px; }

/* timer + footer */
body.u1 .timer, body.u2 .timer, body.u3 .timer { color: var(--head); }
body.u1 .timer .u, body.u2 .timer .u, body.u3 .timer .u { border-color: var(--accent-soft); }
body.u1 .footer, body.u2 .footer, body.u3 .footer { border-top-color: var(--accent); }


/* ===================================================================
   u1 — PRIORITY TRANSFER · $297 · speed, movement, warm energy
   =================================================================== */
body.u1 {
  --accent: #e07410;
  --accent-soft: #f0d7b8;
  --head: #14264a;
  --page: #fffaf4;
  --panel: #fff;
  --cta: #c2560b;
  --cta-2: #9f4508;
  --cta-glow: rgba(194,86,11,.28);
  --bar-top: #fdf0e0;
  --muted: #6a6257;
}
/* forward-leaning: accent rules sit on the LEADING edge and the
   offer panel is tilted off square to suggest motion */
body.u1 .draw {
  border-left: 5px solid var(--accent);
  border-radius: 0 8px 8px 0;
  text-align: left;
}
body.u1 .draw h2 { color: var(--accent); }
body.u1 .draw-prices, body.u1 .reels { justify-content: flex-start; }
body.u1 .draw-btn { background: var(--accent); }
body.u1 .draw-btn:hover { background: var(--cta-2); }
body.u1 .u-head h1 { letter-spacing: -.015em; }
body.u1 .u-head h1::after {
  content: ""; display: block; width: 88px; height: 4px;
  background: var(--accent); margin: 12px auto 0; border-radius: 2px;
}
/* timer: warm chips, accent numerals, airy */
body.u1 .timer .u { background: #fff; border-color: var(--accent-soft); box-shadow: 0 2px 0 var(--accent-soft); }
body.u1 .timer .v { color: var(--cta); }
body.u1 .trust { color: #6a6257; }
body.u1 .decline { color: #7a7065; }


/* ===================================================================
   u2 — THE PAYOUT LOCK · $197 · security, threat, cold high contrast
   =================================================================== */
body.u2 {
  --accent: #2f7fa6;
  --accent-soft: #c3cedb;
  --head: #0a1730;
  --page: #eef1f6;
  --panel: #fff;
  --cta: #b3121f;
  --cta-2: #8d0d18;
  --cta-glow: rgba(179,18,31,.3);
  --bar-top: #dfe5ee;
  --muted: #566070;
}
/* guarded: heavier borders, deep header band, nothing soft */
body.u2 .brand { border-bottom-width: 6px; border-bottom-color: var(--head); }
body.u2 .topbar { color: #273349; }
body.u2 .u-head h1 { color: var(--head); letter-spacing: -.005em; }
body.u2 .video { border-width: 2px; border-color: var(--head); box-shadow: 0 12px 34px rgba(10,23,48,.3); }
body.u2 .draw {
  border: 2px solid var(--head);
  border-top: 5px solid var(--accent);
  border-radius: 4px;
}
body.u2 .draw h2 { color: var(--accent); letter-spacing: .14em; }
body.u2 .draw-btn { background: var(--head); border-radius: 3px; }
body.u2 .draw-btn:hover { background: var(--accent); }
body.u2 .reels span { border: 2px solid var(--head); border-radius: 3px; }
/* timer reads as a warning strip */
body.u2 .timer { gap: 4px; }
body.u2 .timer .u { background: var(--head); border: 1px solid var(--head); border-radius: 3px; }
body.u2 .timer .v { color: #fff; }
body.u2 .timer .k { color: #9fb0c9; }
body.u2 .timer-note { color: var(--cta); font-weight: 700; }
body.u2 .trust { color: #566070; }
body.u2 .decline { color: #46536a; }


/* ===================================================================
   u3 — PAYOUT RECORDS PACK · $97 · paperwork, permanence, calm
   =================================================================== */
body.u3 {
  --accent: #8a6d2f;
  --accent-soft: #ddd3bd;
  --head: #16294f;
  --page: #f7f4ec;
  --panel: #fffdf7;
  --cta: #1a6b33;
  --cta-2: #145728;
  --cta-glow: rgba(26,107,51,.22);
  --bar-top: #efe9db;
  --muted: #6b6454;
}
/* documentary: ruled paper, squared corners, flat and quiet */
body.u3 .brand { border-bottom: 3px double var(--accent); }
body.u3 .video { border-color: #3b4a68; box-shadow: 0 6px 18px rgba(22,41,79,.14); }
body.u3 .u-head h1 { color: var(--head); }
body.u3 .draw {
  border: 1px solid var(--accent-soft);
  border-radius: 2px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 30px, var(--accent-soft) 30px 31px),
    var(--panel);
}
body.u3 .draw h2 { color: var(--accent); }
body.u3 .draw-btn { background: var(--head); border-radius: 2px; }
body.u3 .draw-btn:hover { background: var(--accent); }
body.u3 .reels span { border-radius: 2px; background: var(--panel); }
body.u3 .btn, body.u3 .buy-btn { border-radius: 3px; }
/* a filed-record stamp line instead of a dramatic countdown */
body.u3 .timer-note { color: var(--accent); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }
body.u3 .timer .u { background: var(--panel); border: 1px solid var(--accent-soft); border-radius: 2px; }
body.u3 .timer .v { color: var(--head); }
body.u3 .timer .k { color: #8b8370; }
body.u3 .trust { color: #6b6454; }
body.u3 .decline { color: #5c5648; }
/* calmer pulse: this page is the quiet one, but the button still moves */
body.u3 .btn, body.u3 .buy-btn { animation-duration: 3.2s; }


/* -------------------------------------------------------------------
   Mobile: no fixed widths anywhere above; only trim the decorative
   bits that cost vertical space on small screens.
   ------------------------------------------------------------------- */
@media (max-width: 560px) {
  body.u1 .u-head h1::after { width: 64px; margin-top: 10px; }
  body.u1 .draw { border-left-width: 4px; }
  body.u2 .draw { border-width: 1px; border-top-width: 4px; }
  body.u2 .video { border-width: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  body.u1 .btn, body.u1 .buy-btn,
  body.u2 .btn, body.u2 .buy-btn,
  body.u3 .btn, body.u3 .buy-btn { animation: none; }
}