/* ============================================================
   ScalePDF Funnel — shared styles
   Loaded by partials/head.php on every funnel page.
   Owns: brand tokens, base reset, typography, topbar (all
   variants), footer, shared keyframes.
   Does NOT own: page-specific layout (hero, order card,
   checkout grid, upsell sections) — those live in each page's
   own <style> block.
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #141820;
  --bg2: #1A1F2B;
  --bg3: #1F2535;
  --bg4: #262D3D;
  --card-bg: #1C2230;
  --card-border: #2A3040;
  --g: #22C55E;
  --gl: #4ADE80;
  --gd: #15803D;
  --ga: rgba(34,197,94,.07);
  --gold: #D4A843;
  --gold-bright: #F5C842;
  --red: #C0392B;
  --red-bright: #E74C3C;
  --coral: #EF5350;
  --w: #FFFFFF;
  --t0: #E8E8E8;
  --t1: #C8CDD6;
  --t2: #8A95A8;
  --t3: #5C6678;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Figtree', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: var(--bg);
  color: var(--w);
  font-family: var(--sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input { font-family: inherit; }

/* ============================================================
   TOP BAR — sales variant ('full')
   Sticky top bar with urgency badge (left), centered logo,
   strike-through price + CTA (right). Used on sales/landing
   pages. The cohort-slot JS in shared-scripts.php fills in the
   dynamic seat count.
   ============================================================ */
.topbar-outer { background: #0A0D14; border-bottom: 1px solid rgba(255,255,255,.06); position: sticky; top: 0; z-index: 100; }
.topbar { display: flex; align-items: center; justify-content: space-between; max-width: 1340px; margin: 0 auto; padding: 0 20px; height: 80px; position: relative; }
.topbar-left { display: flex; align-items: center; gap: 14px; }
.topbar-badge { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; background: var(--gold); color: var(--bg); padding: 4px 12px; border-radius: 3px; }
.topbar-text { font-size: 13px; color: var(--t0); font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.topbar-text b { color: var(--gold-bright); font-weight: 800; }
.topbar-slots-mobile { display: none; }
.topbar-right { display: flex; align-items: center; gap: 16px; }
.topbar-price { font-size: 14px; color: var(--t2); display: inline-flex; align-items: baseline; gap: 6px; }
.topbar-price b { color: var(--w); font-size: 18px; font-weight: 700; }
.topbar-price s { color: var(--t1); font-size: 18px; font-weight: 700; text-decoration-line: line-through; text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
.topbar-cta { background: var(--g); color: var(--bg); font-size: 13px; font-weight: 700; padding: 8px 20px; border-radius: 4px; text-transform: uppercase; letter-spacing: .5px; transition: all .2s; }
.topbar-cta:hover { background: var(--gl); }
.topbar-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 48px; display: flex; align-items: center; }
.topbar-logo a { display: inline-flex; align-items: center; }
.topbar-logo img { height: 48px; width: auto; display: block; }

/* Mobile-only brand row above the urgency .topbar. Hidden by default;
   shown at the ≤600px breakpoint where the absolute-centered .topbar-logo
   is also hidden. Keeps the brand mark visible across the funnel. */
.topbar-brand-mobile { display: none; }

/* ============================================================
   TOP BAR — checkout variant ('minimal')
   Two stacked rows:
     1. .pc-topbar* (shared with 'post-checkout') — brand bar.
     2. .co-trust-bar — secure/encrypted/support badges below.
   This makes the checkout chrome read as the same brand bar as the
   sales + upsell pages, with a distinct trust slab underneath.
   ============================================================ */
/* Slightly lighter than the brand bar above (var(--bg2) = #1A1F2B vs
   the brand bar's #0A0D14) so there's a clear visual separation between
   the brand chrome and the trust strip. */
.co-trust-bar-outer { background: var(--bg2); border-bottom: 1px solid rgba(255,255,255,.05); margin-bottom: 32px; }
.co-trust-bar { display: flex; align-items: center; justify-content: center; gap: 28px; max-width: 1340px; margin: 0 auto; padding: 14px 20px; }
.co-trust-bar span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--t1); font-weight: 600; letter-spacing: .2px; }

/* ============================================================
   TOP BAR — post-checkout variant ('post-checkout')
   Used on upsell + downsell pages. No urgency, no price,
   no CTA — buyer is already in the flow. Just the brand.
   Sized to match the 'full' variant exactly (same height, same
   logo size) so the bar feels continuous across the journey.
   ============================================================ */
.pc-topbar-outer { background: #0A0D14; border-bottom: 1px solid rgba(255,255,255,.06); }
.pc-topbar { display: flex; align-items: center; justify-content: center; max-width: 1340px; margin: 0 auto; padding: 0 20px; height: 80px; }
.pc-topbar img { height: 48px; width: auto; display: block; }

/* ============================================================
   FOOTER
   Centered links row + copyright/disclaimer text.
   ============================================================ */
.footer { padding: 40px 20px; border-top: 1px solid rgba(255,255,255,.05); text-align: center; max-width: 800px; margin: 0 auto; }
.footer a { font-size: 13px; color: var(--t3); cursor: pointer; margin: 0 10px; transition: color .2s; }
.footer a:hover { color: var(--w); }
.footer-copy { font-size: 11px; color: var(--t3); line-height: 1.9; margin-top: 16px; }

/* ============================================================
   SHARED KEYFRAMES
   ============================================================ */
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   RESPONSIVE — topbar + footer only
   Page-specific responsive rules live in each page's <style>.
   ============================================================ */
@media (max-width: 980px) {
  /* Absolute-centered logo doesn't fit alongside the badge/text + price/CTA
     at narrow widths. Hide it and let .topbar-brand-mobile (below) take over
     as the centered brand mark — gives every page a visible centered logo
     across the full viewport range, just like .pc-topbar already does on
     checkout/upsell/thank-you. */
  .topbar-logo { display: none; }
  .topbar-brand-mobile { display: flex; align-items: center; justify-content: center; height: 80px; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
  .topbar-brand-mobile img { height: 48px; width: auto; display: block; }
}

@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; height: auto; padding: 8px 16px; gap: 8px; }
  .co-trust-bar { gap: 18px; }
  .footer { padding: 32px 16px; }
}

@media (max-width: 600px) {
  /* Sales: a 2-row mobile layout. Row 1 (.topbar-brand-mobile) holds the
     logo so the brand mark is visible. Row 2 (.topbar) is the urgency
     strip — condensed slots badge + price + CTA. */
  .topbar-brand-mobile { display: flex; align-items: center; justify-content: center; height: 56px; padding: 0 12px; border-bottom: 1px solid rgba(255,255,255,.06); }
  .topbar-brand-mobile img { height: 40px; width: auto; display: block; }
  .topbar { padding: 8px 12px; gap: 8px; flex-wrap: nowrap; justify-content: space-between; height: auto; }
  /* On mobile the long "ONLY N SPOTS LEFT THIS WEEK" label is too wide.
     Swap it for the condensed badge variant. */
  .topbar-badge { display: none; }
  .topbar-text { display: none; }
  .topbar-slots-mobile { display: flex; align-items: center; gap: .35em; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; background: var(--gold); color: var(--bg); padding: 4px 10px; border-radius: 3px; white-space: nowrap; line-height: 1; }
  .topbar-slots-mobile b { color: var(--bg); font-weight: 800; }
  .topbar-left { gap: 0; flex-shrink: 0; }
  .topbar-right { gap: 8px; flex-shrink: 0; }
  .topbar-price { gap: 4px; white-space: nowrap; }
  .topbar-price b { font-size: 14px; }
  .topbar-price s { font-size: 13px; }
  .topbar-cta { padding: 7px 14px; font-size: 11px; letter-spacing: .3px; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; }
  /* Checkout + upsell brand bar shrinks to match the sales mobile brand row
     exactly: 56px tall, 40px logo. Keeps logo size consistent across the
     three funnel pages on mobile. */
  .pc-topbar { height: 56px; padding: 0 12px; }
  .pc-topbar img { height: 40px; }
  .co-trust-bar-outer { margin-bottom: 24px; }
  .co-trust-bar { gap: 8px 14px; padding: 12px; flex-wrap: wrap; }
  .co-trust-bar span { font-size: 11.5px; }
  /* On mobile, "Secure Order" gets its own line; the other two badges
     share the second line. Forces a 1+2 layout instead of the natural
     2+1 wrap. (gap above uses 8px row gap, 14px column gap.)
     Uses a 3-column grid (1fr | auto | 1fr) so the LABEL is pinned to
     the bar's true center, and the icon hangs in column 1 anchored to
     the label's left edge. This makes "Secure Order" visually align
     with "ScalePDF" in the brand bar above. */
  .co-trust-bar span:first-child {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    flex-basis: 100%;
    gap: 0;
  }
  .co-trust-bar span:first-child .co-trust-icon {
    justify-self: end;
    /* Override the base rule's inline-flex + gap:7px so the emoji
       and trailing &nbsp; render as one continuous text run instead
       of two flex items separated by 7px. Plain inline-block keeps
       the trailing space character intact at its natural font width. */
    display: inline-block;
    gap: 0;
  }
}

@media (max-width: 380px) {
  .topbar { padding: 7px 10px; gap: 6px; }
  .topbar-slots-mobile { font-size: 10px; letter-spacing: .4px; padding: 4px 8px; }
  .topbar-price b { font-size: 13px; }
  .topbar-price s { font-size: 12px; }
  .topbar-cta { padding: 6px 10px; font-size: 10px; }
  .co-trust-bar { gap: 10px; }
  .co-trust-bar span { font-size: 11px; gap: 5px; }
}