/* ═══════════════════════════════════════════════════════════════
   TITLE SHOT — web stylesheet
   ─────────────────────────────────────────────────────────────
   Single source of truth for jointitleshot.com. Covers:
     • Homepage (index.html)
     • Checkout form (subscribe.html)
     • Success page (success.html)

   Design principles applied throughout:
     1. One accent (gold). Everything else is neutral.
     2. 8px spacing grid — no arbitrary values.
     3. Type scale via a small set of fixed sizes, not ad-hoc px.
     4. Depth via subtle gradients + inset highlights, never heavy
        shadows or drop-shadow filters.
     5. Restrained borders (rgba white) so the black stays pure.
   ═══════════════════════════════════════════════════════════════ */

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

/* ── Design tokens ──────────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:            #000000;
  --card:          #0a0a0a;
  --card-hi:       #101010;

  /* Text */
  --fg:            #fafafa;
  --fg-dim:        #a1a1aa;
  --muted:         #71717a;

  /* Lines — using rgba so they never look harsh against pure black */
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* Form fields — sit ~20% brighter than the card surface (#0a0a0a)
     so the field shape is legible. Previously #000 on #0a0a0a, which
     the eye reads as the same color. On focus the field lifts a step
     further (rather than sinking), so "this is where you're typing"
     registers without a jarring jump. */
  --field-bg:      #161616;
  --field-bg-hi:   #1f1f1f;
  --field-border:  rgba(255, 255, 255, 0.10);

  /* Accent — gold only. Used sparingly; if everything is gold,
     nothing is. */
  --gold:          #d4af37;
  --gold-bright:   #e6c657;
  --gold-dim:      rgba(212, 175, 55, 0.12);
  --gold-line:     rgba(212, 175, 55, 0.22);

  /* Radii */
  --radius-lg:     20px;
  --radius-md:     12px;
  --radius-sm:     8px;
  --radius-pill:   999px;

  /* Type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ── Base ───────────────────────────────────────────────────── */
html,
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Tabular numerals prevent price/label jitter when JS swaps them. */
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--gold);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* ── Ambient glow ───────────────────────────────────────────── */
/* A single soft radial behind the top of the page. Reads as
   "lit from above" rather than "we put a gradient on it." */
.glow {
  position: fixed;
  inset: 0 0 auto 0;
  height: 620px;
  background: radial-gradient(
    ellipse 900px 500px at 50% -80px,
    rgba(212, 175, 55, 0.10) 0%,
    rgba(212, 175, 55, 0.03) 35%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Layout ─────────────────────────────────────────────────── */
.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 24px;
}

.content {
  width: 100%;
  max-width: 480px;
}

/* ── Header ─────────────────────────────────────────────────── */
.header {
  text-align: center;
  margin-bottom: 40px;
}

.brand-logo {
  display: block;
  height: 36px;
  width: auto;
  margin: 0 auto 36px;
  opacity: 0.95;
}

.headline {
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.08;
  /* Negative tracking on large type is the single biggest tell of a
     designed page vs. a default-h1 page. */
  letter-spacing: -0.035em;
  /* Balance avoids a lone orphan word on the second line. Supported
     in all modern browsers; harmless where it isn't. */
  text-wrap: balance;
  margin-bottom: 18px;
}

.subhead {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--fg-dim);
  max-width: 34ch;         /* ~34 chars per line = ideal measure */
  margin: 0 auto;
  text-wrap: pretty;
}

/* ── Referral banner ────────────────────────────────────────── */
/* The previous pass over-corrected and crushed the text. This
   version lands the single-line banner at roughly 34–36px tall —
   the classic "compact badge" proportion where the text has ~8px
   of vertical air on each side and the box still reads as a
   stamp, not a slab. `align-self: start` remains, because on
   desktop the spanning pricing card next to it would otherwise
   stretch the banner to fill an inflated grid row. */
.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--gold-line);
  background: var(--gold-dim);
  color: var(--gold-bright);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 20px;
  /* Prevents grid stretch on desktop. No-op on mobile block layout. */
  align-self: start;
}

/* `hidden` attribute fix.
   The UA stylesheet sets `display: none` on `[hidden]`, but any author
   `display:` rule on the same element beats it — author styles always
   override UA styles regardless of specificity. So our `display: flex`
   above was rendering the banner as an empty gold-outlined box even
   when JS hadn't removed the `hidden` attribute.
   This explicit `[hidden]` rule has higher specificity than `.banner`
   alone, so it wins and the element actually disappears when hidden. */
.banner[hidden] { display: none; }

/* ── Card ───────────────────────────────────────────────────── */
.pricing {
  position: relative;
  border: 1px solid var(--border);
  /* Very subtle top-lit gradient so the card has a "face" rather than
     being a flat rectangle. The gradient is only 6% lighter at the
     top edge — the eye reads depth, not a two-tone design. */
  background: linear-gradient(180deg, var(--card-hi) 0%, var(--card) 100%);
  border-radius: var(--radius-lg);
  padding: 36px 32px 32px;
  margin-bottom: 28px;
  text-align: center;
  /* Inset highlight = "top edge catches light." The large blurred
     shadow anchors the card without making it look like a drop-
     shadowed button. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 24px 64px -24px rgba(0, 0, 0, 0.9);
}

/* ── Pricing block ──────────────────────────────────────────── */
/* Rendered as a pill instead of plain text. Reads as a badge
   ("you're getting something"), not a label. */
.plan-label {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid var(--gold-line);
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  margin-bottom: 22px;
}

.price-row {
  display: flex;
  align-items: baseline;    /* the two prices share a baseline */
  justify-content: center;
  gap: 12px;
  margin-bottom: 6px;
}

.price-was {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.price {
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: -0.035em; /* same negative tracking as the headline */
  line-height: 1;
}

.price-unit-line {
  font-size: 0.8125rem;
  color: var(--fg-dim);
  margin-bottom: 22px;
}

.price-dot { opacity: 0.45; margin: 0 4px; }

/* ── Scarcity ───────────────────────────────────────────────── */
.scarcity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gold-bright);
  margin-bottom: 0;
}

/* Dot pulses (opacity + scale) while a soft glow stays constant —
   the glow "anchors" the dot so the pulse reads as a heartbeat
   rather than a flicker. */
.scarcity-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
  flex-shrink: 0;
  animation: scarcity-pulse 2s ease-in-out infinite;
}

@keyframes scarcity-pulse {
  0%, 100% { opacity: 1;    transform: scale(1);   }
  50%      { opacity: 0.45; transform: scale(0.8); }
}

/* ── Divider ────────────────────────────────────────────────── */
/* One deliberate hairline between the pricing block and the
   features. Creates a clean sectional break without a full border. */
.divider {
  height: 1px;
  background: var(--border);
  margin: 28px 0;
}

/* ── Features ───────────────────────────────────────────────── */
.features {
  list-style: none;
  text-align: left;         /* override the card's centered text */
  margin-bottom: 28px;
}

.features li {
  position: relative;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #d4d4d8;
  padding: 7px 0 7px 26px;
}

/* Gold dot marker — same visual language as the scarcity dot so the
   whole card feels like one system. */
.features li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(212, 175, 55, 0.5);
}

/* ── CTA ────────────────────────────────────────────────────── */
/* Gradient (not flat) + inset top highlight = "this button has
   a face." Solid-fill buttons read as flat HTML; a 12% gradient
   delta between top and bottom makes it feel embossed. */
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  padding: 0 24px;
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%);
  color: #0a0a0a;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  border: none;
  border-radius: var(--radius-md);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 4px 16px -4px rgba(212, 175, 55, 0.35);
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.cta:hover {
  background: linear-gradient(180deg, #f0d478 0%, var(--gold-bright) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 8px 24px -6px rgba(212, 175, 55, 0.55);
  transform: translateY(-1px);
  text-decoration: none;
}

/* Snap back down on press — no bounce, no linger. */
.cta:active { transform: translateY(0); }

.cta:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* ── Guarantee ──────────────────────────────────────────────── */
/* Deliberately small and muted. Sits under the CTA as risk
   reversal, not as a competing element. */
.guarantee {
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
  margin-top: 16px;
  text-wrap: pretty;
}

/* ── Legal ──────────────────────────────────────────────────── */
/* Constrained to ~40ch so it never runs edge-to-edge and always
   wraps to a tidy 3–4 line block. */
.legal {
  font-size: 0.6875rem;
  line-height: 1.65;
  color: var(--muted);
  text-align: center;
  max-width: 40ch;
  margin: 0 auto;
  text-wrap: pretty;
}

/* ═══════════════════════════════════════════════════════════════
   FORM FIELDS — used by subscribe.html
   ═══════════════════════════════════════════════════════════════ */

.field {
  display: block;
  margin-bottom: 20px;
}

.field-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 8px;
}

.field input {
  display: block;
  width: 100%;
  padding: 15px 16px;
  background: var(--field-bg);
  color: var(--fg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.field input:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--field-bg-hi);
}

/* Placeholder tone — keeps the hint text legible against the new
   lighter field background without competing with real input. */
.field input::placeholder,
.field textarea::placeholder {
  color: var(--muted);
}

.field input:disabled { opacity: 0.5; }

.field-error {
  display: block;
  font-size: 0.75rem;
  color: #ff6b61;
  margin-top: 6px;
}

.banner-error {
  border-color: rgba(255, 107, 97, 0.4);
  background: rgba(255, 107, 97, 0.08);
  color: #ff6b61;
}

.center { text-align: center; }

/* ═══════════════════════════════════════════════════════════════
   SUBSCRIBE PAGE — additions
   ═══════════════════════════════════════════════════════════════ */

/* The form sits inside the same .pricing card as the price display,
   but the fields need left-aligned labels even though the card's
   default text-align is center. This wrapper inverts the alignment
   for everything inside the form, so the price block stays centered
   and the fields read as a proper form. */
.form-fields {
  text-align: left;
}

/* Small risk-reversal line under the CTA. Sits inside the form so
   it moves with the card, not with the page. Font is a notch smaller
   than .guarantee so the two never compete. */
.trust-line {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
  margin-top: 16px;
  text-wrap: pretty;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — tightens on phones without restructuring
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .page         { padding: 48px 20px; }
  .pricing      { padding: 28px 22px 26px; }
  .price        { font-size: 2.25rem; }
  .brand-logo   { height: 36px; margin-bottom: 28px; }
  .header       { margin-bottom: 32px; }
}

/* ═══════════════════════════════════════════════════════════════
   CHECKOUT WARNING (subscribe.html)
   ═══════════════════════════════════════════════════════════════ */

/* Red callout above the email field. DORA's spec called for "red
   text" — a plain red line on the black background reads as noise,
   so this wraps it in a tinted card instead. Same visual family as
   .banner-error, but anchored above the field it applies to so the
   eye doesn't have to connect a distant error message back to the
   input. */
.field-warning {
  display: block;
  padding: 12px 14px;
  margin-bottom: 20px;
  border-radius: var(--radius-md);
  background: rgba(255, 107, 97, 0.08);
  border: 1px solid rgba(255, 107, 97, 0.35);
  color: #ffb3ad;
  font-size: 0.8125rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.field-warning strong {
  color: #ff6b61;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════════════
   SUCCESS PAGE (success.html)
   ═══════════════════════════════════════════════════════════════ */

/* Two sections on success.html, both using .pricing as their shell.
   The second section sits below the first with breathing room, so we
   need to override .pricing's default margin-bottom (which is tuned
   for a single card). */
.pricing + .pricing { margin-top: 0; }

.step-title {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--fg);
  margin: 4px 0 12px;
  text-wrap: balance;
}
.step-body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fg-dim);
  margin-bottom: 24px;
  text-wrap: pretty;
}

/* Video wrapper. max-width is generous enough for a vertical
   screen recording without being edge-to-edge on a 480px content
   column. `aspect-ratio: 16 / 9` reserves the space before the
   video loads so the CTA below doesn't jump up and then down
   as the metadata arrives. */
.video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
  margin-bottom: 20px;
}
.video-wrap video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Ghost CTA variant — used on the "email founders@" button. Outline
   only, so it reads as a secondary action without competing with the
   gold TestFlight CTA above it. Same tap target, same radius. */
.cta--ghost {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold-line);
  box-shadow: none;
}
.cta--ghost:hover {
  background: var(--gold-dim);
  color: var(--gold-bright);
  border-color: var(--gold);
  transform: translateY(-1px);
  text-decoration: none;
}
.cta--ghost:active { transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════
   EXIT-INTENT WAITLIST MODAL (index.xhtml, subscribe.html)
   ═══════════════════════════════════════════════════════════════ */

.exit-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.exit-modal[hidden] { display: none; }

.exit-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  /* Blur is a progressive enhancement — Safari and Chromium both
     support it, Firefox is behind a flag as of writing. The dark
     scrim alone is a fine fallback. */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.exit-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 32px 28px 28px;
  box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.9);
}

.exit-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, background 0.15s ease;
}
.exit-close:hover {
  color: var(--fg);
  background: rgba(255, 255, 255, 0.04);
}

.exit-eyebrow {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 8px;
}
.exit-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--fg);
  margin-bottom: 12px;
  text-wrap: balance;
}
.exit-sub {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--fg-dim);
  margin-bottom: 20px;
  text-wrap: pretty;
}
.exit-form { display: flex; flex-direction: column; gap: 10px; }
.exit-form input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  background: var(--field-bg);
  color: var(--fg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.exit-form input:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--field-bg-hi);
}
.exit-status {
  font-size: 0.8125rem;
  line-height: 1.5;
  margin-top: 12px;
}
.exit-status--ok  { color: #6ee7b7; }
.exit-status--err { color: #ff6b61; }

/* ═══════════════════════════════════════════════════════════════
   PARTNER HUB — GOLD HERO (Step 1, partners.html)
   ─────────────────────────────────────────────────────────────
   Step 1 is the primary action on the page, so it gets the
   inverted treatment: gold surface, black copy, black CTA with
   gold text. This is the only place on the site where gold is
   used as a *surface* rather than an accent — the rarity is what
   makes it read as "this is the thing to do first."
   ═══════════════════════════════════════════════════════════════ */

.partner-hero {
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 24px 64px -24px rgba(212, 175, 55, 0.35);
  color: #0a0a0a;
}

/* Plan-label pill inverts to a black stamp with gold text so it
   stays legible against the gold surface. */
.partner-hero .plan-label {
  background: rgba(0, 0, 0, 0.85);
  color: var(--gold-bright);
  border-color: rgba(0, 0, 0, 0.9);
}

.partner-hero .step-title { color: #0a0a0a; }

/* Body copy uses a soft black rather than pure #0a0a0a — a
   100%-black paragraph on a warm gold surface looks like a
   misprint; ~72% opacity reads as "secondary" without muddying. */
.partner-hero .step-body { color: rgba(0, 0, 0, 0.72); }

/* CTA inverts: black fill, gold text, subtle inner top highlight
   so it still has a "face" like every other CTA on the site. */
.partner-hero .cta {
  background: #0a0a0a;
  color: var(--gold-bright);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 16px -4px rgba(0, 0, 0, 0.55);
}

.partner-hero .cta:hover {
  background: #1a1a1a;
  color: var(--gold-bright);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 24px -6px rgba(0, 0, 0, 0.7);
  transform: translateY(-1px);
  text-decoration: none;
}

.partner-hero .cta:active { transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════
   TABLET & DESKTOP OPTIMIZATION (768px+ and 1024px+)
   ─────────────────────────────────────────────────────────────
   Mobile (< 768px) remains a single 480px column for every page.

   Page-type layouts are driven by explicit classes:

   • .content                    Default single-card funnel
                                 (index.xhtml, subscribe.html).

   • .content--partners          Partner Hub. Four rows:
                                   Row 1: header (full width)
                                   Row 2: Step 1 gold hero (full width)
                                   Row 3: Step 2 wide dark (full width,
                                          form fields side by side)
                                   Row 4: Step 3 (left half) +
                                          Direct Partner Line (right half)

   • .content--success           Post-purchase. Two cards side by
                                 side, each at its natural height.
                                 No forced CTA alignment — the
                                 video card is genuinely taller and
                                 pretending otherwise only creates
                                 dead air in the shorter card.
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
  .page {
    padding: 72px 40px;
  }

  .brand-logo {
    height: 44px;
    margin-bottom: 32px;
  }

  /* ── Default single-card funnel (index, subscribe) ────────── */
  .content:not(.content--partners):not(.content--success) {
    max-width: 580px;
  }

  .content:not(.content--partners):not(.content--success) > .pricing {
    padding: 40px 36px 36px;
  }

  /* ── Partner Hub ──────────────────────────────────────────── */
  .content--partners {
    max-width: 940px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
  }

  /* Full-width rows: header, Step 1, Step 2 */
  .content--partners > .header,
  .content--partners > .partner-hero,
  .content--partners > .partner-wide {
    grid-column: 1 / -1;
  }

  /* ── Step 1: gold hero ────────────────────────────────────── */
  .content--partners > .partner-hero {
    padding: 40px 48px 36px;
    text-align: center;
    margin-bottom: 0;
  }

  .content--partners > .partner-hero .plan-label {
    margin-bottom: 18px;
  }

  .content--partners > .partner-hero .step-title {
    font-size: 1.5rem;
    max-width: 30ch;
    margin: 0 auto 10px;
  }

  .content--partners > .partner-hero .step-body {
    max-width: 54ch;
    margin: 0 auto 24px;
  }

  .content--partners > .partner-hero .cta {
    max-width: 380px;
    margin: 0 auto;
  }

  /* ── Step 2: wide dark card ───────────────────────────────── */
  .content--partners > .partner-wide {
    padding: 40px 48px 36px;
    text-align: center;
    margin-bottom: 0;
  }

  .content--partners > .partner-wide .plan-label {
    margin-bottom: 18px;
  }

  .content--partners > .partner-wide .step-title {
    max-width: 32ch;
    margin: 0 auto 10px;
  }

  .content--partners > .partner-wide .step-body {
    max-width: 62ch;
    margin: 0 auto 24px;
  }

  /* Partner Code + Audience Link share one row.
     The two .field elements become grid items inside this
     container. `gap` handles the separation between them, so the
     default `.field { margin-bottom: 20px }` needs to be zeroed
     out or it would push a phantom 20px below the row. */
  .content--partners > .partner-wide .form-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 720px;
    margin: 0 auto 20px;
    text-align: left;
  }

  .content--partners > .partner-wide .form-fields .field {
    margin-bottom: 0;
  }

  .content--partners > .partner-wide .cta {
    max-width: 380px;
    margin: 0 auto;
  }

  .content--partners > .partner-wide .trust-line {
    margin-top: 12px;
    margin-bottom: 0;
  }

  /* ── Row 4: Step 3 (left) + Direct Partner Line (right) ───── */
  .content--partners > .partner-third {
    grid-column: 1;
    padding: 32px 28px 28px;
    margin-bottom: 0;
    text-align: left;
  }

  .content--partners > .partner-help {
    grid-column: 2;
    padding: 32px 28px 28px;
    margin-bottom: 0;
    text-align: left;
  }

  .content--partners > .partner-third .plan-label,
  .content--partners > .partner-help .plan-label {
    margin-bottom: 14px;
  }

  .content--partners > .partner-third .step-title,
  .content--partners > .partner-help .step-title {
    margin: 0 0 10px;
  }

  .content--partners > .partner-third .step-body,
  .content--partners > .partner-help .step-body {
    margin-bottom: 18px;
  }

  /* ── Success page ─────────────────────────────────────────── */
  .content--success {
    max-width: 940px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
  }

  .content--success > .header,
  .content--success > .legal {
    grid-column: 1 / -1;
  }

  .content--success > .header {
    margin-bottom: 24px;
  }

  .content--success > .pricing {
    padding: 32px 28px 28px;
    margin-bottom: 0;
    text-align: left;
  }

  .content--success > .pricing .plan-label {
    margin-bottom: 14px;
  }

  .content--success > .pricing .step-title {
    margin: 0 0 10px;
  }

  .content--success > .pricing .step-body {
    margin-bottom: 18px;
  }

  .content--success > .pricing .video-wrap {
    margin-bottom: 18px;
  }

  .content--success > .pricing .trust-line {
    text-align: left;
    margin-top: 12px;
    margin-bottom: 0;
  }

  .content--success > .legal {
    max-width: 60ch;
    margin-top: 8px;
  }

  .exit-card {
    max-width: 460px;
    padding: 40px 36px 36px;
  }
}

@media (min-width: 1024px) {
  .glow {
    height: 760px;
    background: radial-gradient(
      ellipse 1300px 650px at 50% -100px,
      rgba(212, 175, 55, 0.11) 0%,
      rgba(212, 175, 55, 0.035) 40%,
      transparent 72%
    );
  }

  .page {
    padding: 80px 56px;
  }

  /* ── Default single-card funnel: 2-col split layout ───────── */
  .content:not(.content--partners):not(.content--success) {
    max-width: 1060px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(440px, 480px);
    grid-template-rows: auto auto auto;
    column-gap: 72px;
    row-gap: 20px;
  }

  .content:not(.content--partners):not(.content--success) > .header {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
    margin-bottom: 0;
  }

  .content:not(.content--partners):not(.content--success) > .header .brand-logo {
    height: 48px;
    margin: 0 0 32px 0;
  }

  .content:not(.content--partners):not(.content--success) > .header .headline {
    font-size: clamp(2.5rem, 3.6vw, 3.35rem);
    margin-bottom: 20px;
  }

  .content:not(.content--partners):not(.content--success) > .header .subhead {
    font-size: 1.15rem;
    margin: 0;
    max-width: 38ch;
  }

  .content:not(.content--partners):not(.content--success) > .banner {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-start;
    text-align: left;
    margin-bottom: 0;
  }

  .content:not(.content--partners):not(.content--success) > .legal {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    text-align: left;
    margin: 0;
    max-width: 44ch;
  }

  .content:not(.content--partners):not(.content--success) > .pricing {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: stretch;
    margin-bottom: 0;
    padding: 44px 40px 38px;
  }

  /* ── Partner Hub: widen the canvas on desktop ─────────────── */
  .content--partners {
    max-width: 1060px;
    gap: 28px;
  }

  .content--partners > .partner-hero {
    padding: 48px 64px 40px;
  }

  .content--partners > .partner-hero .step-title {
    font-size: 1.75rem;
    max-width: 26ch;
  }

  /* ── Success page: widen the canvas on desktop ────────────── */
  .content--success {
    max-width: 1060px;
    gap: 28px;
  }
}

   Page-type layouts are now driven by explicit classes instead of
   :has(.pricing + .pricing) — that selector couldn't distinguish
   "Partner Hub (4 cards)" from "Success (2 cards)", and it forced
   equal heights onto cards that don't have equal content.

   • .content                    Default single-card funnel
                                 (index.xhtml, subscribe.html).
   • .content--partners          Partner Hub: full-width hero card,
                                 then a 2-column duo, then a
                                 full-width concierge card.
   • .content--success           Post-purchase: two cards side by
                                 side, each at its natural height.
                                 No forced CTA alignment — the
                                 video card is genuinely taller and
                                 pretending otherwise only creates
                                 dead air in the shorter card.
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
  .page {
    padding: 72px 40px;
  }

  .brand-logo {
    height: 44px;
    margin-bottom: 32px;
  }

  /* ── Default single-card funnel (index, subscribe) ────────── */
  .content:not(.content--partners):not(.content--success) {
    max-width: 580px;
  }

  .content:not(.content--partners):not(.content--success) > .pricing {
    padding: 40px 36px 36px;
  }

  /* Concierge card — deliberately NOT a "Step". It's optional
     support, not part of the install flow. Instead of stretching
     edge-to-edge (which left a huge empty right half), it takes
     the exact width of one duo column and centers itself on the
     page. `100%` here refers to the grid area's width (the full
     content width, because this item spans 1 / -1); subtracting
     the 24px duo gap and dividing by 2 yields one column's width,
     matching Step 2 and Step 3 exactly. */
  .content--partners > .partner-help {
    justify-self: center;
    width: calc((100% - 24px) / 2);
    padd  /* ── Partner Hub ──────────────────────────────────────────── */
  /* Four rows now:
       Row 1: header (full-width)
       Row 2: Step 1 partner-hero (full-width, gold surface)
       Row 3: Step 2 partner-wide (full-width)
       Row 4: Step 3 partner-third (col 1) + partner-help (col 2)
     Rows 3 and 4 both exist so that Step 2 no longer shares a row
     with a shorter card — the previous 2-up layout was the root
     cause of the imbalance. */
  .content--partners {
    max-width: 940px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
  }

  /* Full-width rows */
  .content--partners > .header,
  .content--partners > .partner-hero,
  .content--partners > .partner-wide {
    grid-column: 1 / -1;
  }

  /* ── Step 1: gold hero ────────────────────────────────────── */
  .content--partners > .partner-hero {
    padding: 40px 48px 36px;
    text-align: center;
    margin-bottom: 0;
  }

  .content--partners > .partner-hero .plan-label {
    margin-bottom: 18px;
  }

  .content--partners > .partner-hero .step-title {
    font-size: 1.5rem;
    max-width: 30ch;
    margin: 0 auto 10px;
  }

  .content--partners > .partner-hero .step-body {
    max-width: 54ch;
    margin: 0 auto 24px;
  }

  .content--partners > .partner-hero .cta {
    max-width: 380px;
    margin: 0 auto;
  }

  /* ── Step 2: wide card ────────────────────────────────────── */
  /* Same footprint as Step 1, but a dark card. Content is
     centered with constrained inner measures: body copy stays at
     a comfortable reading line-length, and the form fields sit
     inside a 460px column so they don't stretch edge-to-edge on a
     940px surface. */
  .content--partners > .partner-wide {
    padding: 40px 48px 36px;
    text-align: center;
    margin-bottom: 0;
  }

  .content--partners > .partner-wide .plan-label {
    margin-bottom: 18px;
  }

  .content--partners > .partner-wide .step-title {
    max-width: 32ch;
    margin: 0 auto 10px;
  }

  .content--partners > .partner-wide .step-body {
    max-width: 62ch;
    margin: 0 auto 24px;
  }

  .content--partners > .partner-wide .form-fields {
    max-width: 460px;
    margin: 0 auto 20px;
    text-align: left;
  }

  .content--partners > .partner-wide .cta {
    max-width: 380px;
    margin: 0 auto;
  }

  .content--partners > .partner-wide .trust-line {
    margin-top: 12px;
    margin-bottom: 0;
  }

  /* ── Row 4: Step 3 (left) + Direct Partner Line (right) ───── */
  /* Both cards share identical padding and label/title/body
     rhythm. They're similar enough in content that natural
     heights land close to each other without forcing anything. */
  .content--partners > .partner-third {
    grid-column: 1;
    padding: 32px 28px 28px;
    margin-bottom: 0;
    text-align: left;
  }

  .content--partners > .partner-help {
    grid-column: 2;
    padding: 32px 28px 28px;
    margin-bottom: 0;
    text-align: left;
  }

  .content--partners > .partner-third .plan-label,
  .content--partners > .partner-help .plan-label {
    margin-bottom: 14px;
  }

  .content--partners > .partner-third .step-title,
  .content--partners > .partner-help .step-title {
    margin: 0 0 10px;
  }

  .content--partners > .partner-third .step-body,
  .content--partners > .partner-help .step-body {
    margin-bottom: 18px;
  }ing: 32px 28px 28px;
    margin-bottom: 0;
    text-align: left;
  }

  /* ── Success page ─────────────────────────────────────────── */
  .content--success {
    max-width: 940px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
  }

  .content--success > .header,
  .content--success > .legal {
    grid-column: 1 / -1;
  }

  .content--success > .header {
    margin-bottom: 24px;
  }

  .content--success > .pricing {
    padding: 32px 28px 28px;
    margin-bottom: 0;
    text-align: left;
  }

  .content--success > .pricing .plan-label {
    margin-bottom: 14px;
  }

  .content--success > .pricing .step-title {
    margin: 0 0 10px;
  }

  .content--success > .pricing .step-body {
    margin-bottom: 18px;
  }

  .content--success > .pricing .video-wrap {
    margin-bottom: 18px;
  }

  .content--success > .pricing .trust-line {
    text-align: left;
    margin-top: 12px;
    margin-bottom: 0;
  }

  .content--success > .legal {
    max-width: 60ch;
    margin-top: 8px;
  }

  .exit-card {
    max-width: 460px;
    padding: 40px 36px 36px;
  }
}

@media (min-width: 1024px) {
  .glow {
    height: 760px;
    background: radial-gradient(
      ellipse 1300px 650px at 50% -100px,
      rgba(212, 175, 55, 0.11) 0%,
      rgba(212, 175, 55, 0.035) 40%,
      transparent 72%
    );
  }

  .page {
    padding: 80px 56px;
  }

  /* ── Default single-card funnel: 2-col split layout ───────── */
  .content:not(.content--partners):not(.content--success) {
    max-width: 1060px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(440px, 480px);
    grid-template-rows: auto auto auto;
    column-gap: 72px;
    row-gap: 20px;
  }

  .content:not(.content--partners):not(.content--success) > .header {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
    margin-bottom: 0;
  }

  .content:not(.content--partners):not(.content--success) > .header .brand-logo {
    height: 48px;
    margin: 0 0 32px 0;
  }

  .content:not(.content--partners):not(.content--success) > .header .headline {
    font-size: clamp(2.5rem, 3.6vw, 3.35rem);
    margin-bottom: 20px;
  }

  .content:not(.content--partners):not(.content--success) > .header .subhead {
    font-size: 1.15rem;
    margin: 0;
    max-width: 38ch;
  }

  .content:not(.content--partners):not(.content--success) > .banner {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-start;
    text-align: left;
    margin-bottom: 0;
  }

  .content:not(.content--partners):not(.content--success) > .legal {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    text-align: left;
    margin: 0;
    max-width: 44ch;
  }

  .content:not(.content--partners):not(.content--success) > .pricing {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: stretch;
    margin-bottom: 0;
    padding: 44px 40px 38px;
  }

  /* ── Partner Hub: widen the canvas on desktop ─────────────── */
  .content--partners {
    max-width: 1060px;
    gap: 28px;
  }

  .content--partners > .partner-hero {
    padding: 48px 64px 40px;
  }

  .content--partners > .partner-hero .step-title {
    font-size: 1.75rem;
    max-width: 26ch;
  }

  /* ── Success page: widen the canvas on desktop ────────────── */
  .content--success {
    max-width: 1060px;
    gap: 28px;
  }
}
   ─────────────────────────────────────────────────────────────
   Mobile (< 768px) remains a 480px single column.
   • Multi-card pages (success.html, partners.html) switch to a
     2-column side-by-side dashboard grid on tablet & desktop.
   • Single-card funnel pages (index.xhtml, subscribe.html) widen
     on tablet and switch to an executive 2-column split layout
     (Hero copy on left, Pricing/Checkout card on right) on desktop.
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
  .page {
    padding: 72px 40px;
  }

  .brand-logo {
    height: 44px;
    margin-bottom: 32px;
  }

  /* Single-card pages (index.xhtml, subscribe.html) on tablet */
  .content:not(:has(.pricing + .pricing)) {
    max-width: 580px;
  }

  .content:not(:has(.pricing + .pricing)) > .pricing {
    padding: 40px 36px 36px;
  }

  /* Multi-card pages (success.html, partners.html) on tablet/desktop:
     Strict equal-height grid with absolute vertical space distribution */
  .content:has(.pricing + .pricing) {
    max-width: 960px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
  }

  .content:has(.pricing + .pricing) > .header,
  .content:has(.pricing + .pricing) > .banner,
  .content:has(.pricing + .pricing) > .legal {
    grid-column: 1 / -1;
  }

  .content:has(.pricing + .pricing) > .header {
    margin-bottom: 32px;
  }

  .content:has(.pricing + .pricing) > .header .subhead {
    max-width: 52ch;
  }

  /* CRITICAL: Enforce strict vertical flex distribution.
     We removed `justify-content: space-between` because it fought with `margin-top: auto` on the CTA,
     creating large gaps in the middle of the card. Instead, we let the natural stack flow from the top,
     and use `margin-top: auto` on the CTA to anchor it to the bottom. This eliminates dead air
     while ensuring CTAs line up perfectly across paired cards. */
  .content:has(.pricing + .pricing) > .pricing {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    padding: 36px 32px 32px;
    text-align: left;
    height: 100%;
  }

  .content:has(.pricing + .pricing) > .pricing .plan-label {
    align-self: flex-start;
    margin-bottom: 16px;
  }

  .content:has(.pricing + .pricing) > .pricing .step-title,
  .content:has(.pricing + .pricing) > .pricing .step-body {
    text-align: left;
    margin-bottom: 16px;
  }

  .content:has(.pricing + .pricing) > .pricing .form-fields {
    width: 100%;
    margin-top: 16px;
    margin-bottom: 16px;
  }

  .content:has(.pricing + .pricing) > .pricing .video-wrap {
    margin-top: 12px;
    margin-bottom: 16px;
  }

  /* Absolute baseline alignment for all CTAs inside paired grid cards */
  .content:has(.pricing + .pricing) > .pricing .cta {
    margin-top: auto;
    width: 100%;
  }

  .content:has(.pricing + .pricing) > .pricing .trust-line {
    text-align: left;
    margin-top: 12px;
    margin-bottom: 0;
  }

  .content:has(.pricing + .pricing) > .legal {
    max-width: 60ch;
    margin-top: 16px;
  }

  .exit-card {
    max-width: 460px;
    padding: 40px 36px 36px;
  }
}

@media (min-width: 1024px) {
  .glow {
    height: 760px;
    background: radial-gradient(
      ellipse 1300px 650px at 50% -100px,
      rgba(212, 175, 55, 0.11) 0%,
      rgba(212, 175, 55, 0.035) 40%,
      transparent 72%
    );
  }

  .page {
    padding: 80px 56px;
  }

  /* Single-card pages (index.xhtml, subscribe.html) on desktop */
  .content:not(:has(.pricing + .pricing)) {
    max-width: 1060px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(440px, 480px);
    grid-template-rows: auto auto auto;
    column-gap: 72px;
    row-gap: 20px;
  }

  .content:not(:has(.pricing + .pricing)) > .header {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
    margin-bottom: 0;
  }

  .content:not(:has(.pricing + .pricing)) > .header .brand-logo {
    height: 48px;
    margin: 0 0 32px 0;
  }

  .content:not(:has(.pricing + .pricing)) > .header .headline {
    font-size: clamp(2.5rem, 3.6vw, 3.35rem);
    margin-bottom: 20px;
  }

  .content:not(:has(.pricing + .pricing)) > .header .subhead {
    font-size: 1.15rem;
    margin: 0;
    max-width: 38ch;
  }

  .content:not(:has(.pricing + .pricing)) > .banner {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-start;
    text-align: left;
    margin-bottom: 0;
  }

  .content:not(:has(.pricing + .pricing)) > .legal {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    text-align: left;
    margin: 0;
    max-width: 44ch;
  }

  .content:not(:has(.pricing + .pricing)) > .pricing {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: stretch;
    margin-bottom: 0;
    padding: 44px 40px 38px;
  }

  /* Multi-card pages (success.html, partners.html) on desktop */
  .content:has(.pricing + .pricing) {
    max-width: 1060px;
    gap: 28px;
  }

  .content:has(.pricing + .pricing) > .header .brand-logo {
    height: 48px;
  }

  .content:has(.pricing + .pricing) > .pricing {
    padding: 40px 36px 36px;
  }
}