@import url("/brand/tokens.css");

/* Presentation only. Existing DOM IDs, tracking and payment scripts stay intact. */
.brand-funnel {
  --black: var(--brand-navy);
  --black-soft: var(--brand-navy-deep);
  --navy: var(--brand-navy);
  --navy-light: var(--brand-navy-deep);
  --cream: var(--brand-paper);
  --paper: var(--brand-paper);
  --ink: var(--brand-text);
  --gold: var(--brand-gold);
  --gold-light: var(--brand-cream);
  --goldl: var(--brand-cream);
  --gold-dark: var(--brand-gold-ink);
  --goldd: var(--brand-gold-ink);
  --muted: var(--brand-muted);
  --line: var(--brand-line);
  --bd: var(--brand-line);
  --card: #fff;
  --max: var(--brand-content-width);
  --btn: var(--brand-gold);
  background: var(--brand-paper);
  color: var(--brand-text);
  font-family: var(--brand-font-body);
  -webkit-font-smoothing: antialiased;
}
.brand-funnel[data-brand-surface="dark"] {
  --text: var(--brand-on-dark);
  --muted: var(--brand-muted-dark);
  --line: rgb(212 172 53 / .25);
  --card: rgb(255 255 255 / .055);
  background: var(--brand-navy);
  color: var(--brand-on-dark);
}
.brand-funnel :is(h1,h2,h3,h4) {
  font-family: var(--brand-font-heading);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.brand-funnel :is(button,input,select,textarea,.cta,.rd-cta,.btn) {font-family:var(--brand-font-body)}
.brand-funnel .brand-strip{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px max(20px,calc((100vw - 1160px)/2));background:var(--brand-navy);color:var(--brand-on-dark);font-size:13px}
.brand-funnel .brand-strip>a{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.brand-funnel .brand-strip span{font-size:14px;font-weight:600;letter-spacing:.08em}
.brand-funnel .brand-strip small{display:block;font-size:11px;font-weight:400;letter-spacing:normal;color:var(--brand-gold)}
.brand-funnel :is(.cta,.rd-cta,.btn) {
  background:var(--brand-gold);
  color:var(--brand-navy);
  border:1px solid transparent;
  border-radius:var(--brand-radius);
  box-shadow:none;
  font-weight:700;
  text-transform:none;
  letter-spacing:normal;
}
.brand-funnel :is(.cta,.rd-cta,.btn):hover {background:var(--brand-gold-hover);filter:none}
.brand-funnel :is(.cta,.rd-cta,.btn):disabled {opacity:.65;cursor:wait}
.brand-funnel :is(.hero,.hero-band,.rd-dark,.rd-navy,footer,.urgency-bar) {background-color:var(--brand-navy)}
.brand-funnel .hero {background:var(--brand-navy)}
.brand-funnel .topbar {background:var(--brand-navy-deep);border-color:rgb(212 172 53 / .2)}
.brand-funnel .ribbon {background:var(--brand-navy)}
.brand-funnel .ribbon span {background:var(--brand-gold);color:var(--brand-navy);border-radius:var(--brand-radius);box-shadow:none;font-family:var(--brand-font-body)}
.brand-funnel .hero-kicker {font-family:var(--brand-font-heading);font-weight:600;color:var(--brand-on-dark)}
.brand-funnel .eyebrow {color:var(--brand-gold-ink)}
.brand-funnel :is(.hero,.rd-dark,.rd-navy) .eyebrow {color:var(--brand-gold)}
.brand-funnel .price {font-family:var(--brand-font-body);font-weight:700}
.brand-funnel :is(.prologue-card,.story-beat,.diff-card,.guarantee-box,.faq details) {border-color:var(--brand-line);border-radius:var(--brand-radius)}
.brand-funnel .prologue-card {background:var(--brand-paper)}
.brand-funnel .prologue-card :is(h2,.prologue-lead,.prologue-attribution strong) {color:var(--brand-navy)}
.brand-funnel .prologue-copy blockquote {color:var(--brand-text);font-family:var(--brand-font-heading)}
.brand-funnel .prologue-copy blockquote + blockquote {color:var(--brand-gold-ink)}
.brand-funnel .prologue-intro .prologue-lead {font-family:var(--brand-font-heading)}
.brand-funnel .brand-resource-links {display:flex;flex-wrap:wrap;justify-content:center;gap:12px 22px;margin:20px auto 0;max-width:1160px;padding:0 20px;font-size:13px}
.brand-funnel .brand-resource-links a {color:var(--brand-muted-dark);text-decoration:underline;text-underline-offset:4px}
.brand-funnel .brand-resource-links a:hover {color:var(--brand-gold)}
.brand-funnel :is(.cta,.rd-cta,.btn,.brand-resource-links a):focus-visible {outline:3px solid var(--brand-gold);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.brand-funnel :is(.cta,.rd-cta,.btn){transition:none}}
