/* ==========================================================================
   The Baize Room — Waitlist Funnel
   Design tokens and components from the-baize-room-design-system (a79c4594)
   ========================================================================== */

/* ---- Fonts (self-hosted variable subsets, latin) ---- */
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/eb-garamond-var-latin.woff2') format('woff2')}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 800;font-display:swap;src:url('../fonts/eb-garamond-italic-var-latin.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/montserrat-var-latin.woff2') format('woff2')}

/* ---- Tokens ---- */
:root{
--gold:#d9a326;--gold-bright:#e8bc4f;--gold-deep:#b8891c;--gold-12:rgba(217,163,38,.12);--gold-55:rgba(217,163,38,.55);
--ink:#1b2023;--ink-800:#22282c;--ink-700:#2b3237;
--white:#fff;--white-70:rgba(255,255,255,.7);--white-50:rgba(255,255,255,.5);--white-30:rgba(255,255,255,.3);--white-12:rgba(255,255,255,.12);
--surface-page:var(--ink);--surface-raised:var(--ink-800);--surface-inset:var(--ink-700);
--text-primary:var(--white);--text-secondary:var(--white-70);--text-muted:var(--white-50);--text-inverse:var(--ink);
--accent:var(--gold);--accent-hover:var(--gold-bright);--accent-pressed:var(--gold-deep);
--border-subtle:var(--white-12);--border-strong:var(--white-30);--border-gold:var(--gold-55);
--font-display:'EB Garamond',Garamond,'Times New Roman',serif;
--font-body:'Montserrat','Helvetica Neue',Arial,sans-serif;
--fs-body:16px;--fs-small:14px;--fs-caption:12px;--fs-eyebrow:13px;
--lh-heading:1.15;--lh-body:1.7;
--tracking-caps:.22em;
--weight-display:500;--weight-semibold:600;--weight-bold:700;
--ease-out:cubic-bezier(.22,.61,.36,1);--dur-fast:150ms;--dur-med:300ms;
--scrim:rgba(27,32,35,.82);
}

/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--surface-page)}
body{color:var(--text-primary);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
h1{font-family:var(--font-display);font-weight:var(--weight-display);line-height:var(--lh-heading);margin:0}
p{margin:0}
a{color:var(--accent);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--accent-hover)}
.br-eyebrow{font-family:var(--font-body);font-size:var(--fs-eyebrow);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--accent)}
.br-rule{width:64px;height:2px;background:var(--gold);border:none;margin:0}
@media (prefers-reduced-motion: no-preference){
  .br-reveal{animation:br-fade .9s var(--ease-out) both}
}
@keyframes br-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---- Buttons ---- */
.br-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-body);font-weight:var(--weight-bold);letter-spacing:var(--tracking-caps);text-transform:uppercase;text-align:center;border-radius:0;cursor:pointer;transition:all var(--dur-fast) var(--ease-out);text-decoration:none;white-space:nowrap}
.br-btn--lg{font-size:14px;padding:20px 44px}
.br-btn--primary{background:var(--accent);color:var(--text-inverse);border:1px solid var(--accent)}
.br-btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--text-inverse)}
.br-btn--primary:active{background:var(--accent-pressed);border-color:var(--accent-pressed)}
.br-btn--outline{background:transparent;color:var(--accent);border:1px solid var(--border-gold)}
.br-btn--outline:hover{border-color:var(--accent);color:var(--accent-hover);background:var(--gold-12)}
.br-btn--ghost{background:transparent;color:var(--text-primary);border:1px solid transparent;font-size:13px;padding:12px 20px}
.br-btn--ghost:hover{color:var(--accent)}
.br-btn[disabled]{opacity:.4;pointer-events:none}
.br-btn:focus-visible,.br-input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- Badge ---- */
.br-badge{display:inline-flex;align-items:center;font-family:var(--font-body);font-size:11px;font-weight:var(--weight-bold);letter-spacing:var(--tracking-caps);text-transform:uppercase;padding:6px 14px;border:1px solid var(--border-gold);color:var(--accent)}
.br-badge[hidden]{display:none}

/* ---- Inputs ---- */
.br-input{background:var(--surface-inset);border:1px solid var(--border-subtle);color:var(--text-primary);font-family:var(--font-body);font-size:15px;padding:14px 16px;border-radius:0;outline:none;transition:border-color var(--dur-fast) var(--ease-out);width:100%}
.br-input::placeholder{color:var(--text-muted)}
.br-input:focus{border-color:var(--accent)}

/* ---- Radio ---- */
.br-check{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-size:var(--fs-small);color:var(--text-secondary)}
.br-check input{appearance:none;width:18px;height:18px;margin:0;border:1px solid var(--border-strong);background:transparent;cursor:pointer;display:grid;place-content:center;transition:all var(--dur-fast) var(--ease-out);flex:none;border-radius:50%}
.br-check input:checked{border-color:var(--accent)}
.br-check input:checked::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* ---- Funnel shell ---- */
.fx-shell{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden}
.fx-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--ink) center/cover no-repeat}
.fx-scrim{position:absolute;inset:0;background:var(--scrim)}
.fx-brand{position:relative;z-index:2;display:grid;justify-items:center;padding:20px 32px 0}
.fx-wordmark{font-family:var(--font-display);font-size:22px;color:#fff;letter-spacing:.02em;font-weight:400}
.fx-content{position:relative;z-index:1;flex:1;width:100%;display:grid;justify-items:center;align-content:center;padding:24px 32px}
.fx-footer{position:relative;z-index:1;padding:14px 32px 18px;display:grid;gap:6px;justify-items:center;text-align:center;border-top:1px solid rgba(255,255,255,.08)}
.fx-footer p{margin:0;font-size:10.5px;line-height:1.6;color:rgba(255,255,255,.42);max-width:760px}
.fx-footer a{color:rgba(255,255,255,.55);text-decoration:underline}
.fx-footer a:hover{color:var(--accent)}
.fx-col{display:grid;gap:18px;justify-items:center;text-align:center;max-width:680px;width:100%}
.fx-step[hidden]{display:none}

/* ---- Step 1: opt-in ---- */
.fx-form{display:grid;gap:14px;width:100%;max-width:520px;text-align:left}
.fx-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fx-h1-optin{font-size:clamp(30px,3.6vw,46px);line-height:1.08;max-width:720px}
.fx-lede{color:var(--text-secondary);max-width:560px;font-size:16px;line-height:1.6}
.fx-lede--secondary{font-size:14px;color:var(--text-muted);margin-top:-6px}
.fx-micro{color:var(--text-muted);font-size:12px}

/* ---- Step 2: tiers ---- */
.fx-col--wide{max-width:860px}
.fx-h1-offer{font-size:clamp(28px,3.2vw,42px);line-height:1.1;max-width:680px}
.fx-offer-lede{color:var(--text-secondary);max-width:600px;font-size:15px;line-height:1.6}
.fx-steplabel{font-family:var(--font-body);font-size:11px;font-weight:var(--weight-semibold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted)}
.fx-tiers{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:100%;max-width:820px;text-align:left}
.fx-tier{position:relative;display:grid;gap:14px;align-content:start;padding:28px 26px;border:1px solid rgba(255,255,255,.14);background:rgba(34,40,44,.72)}
.fx-tier--featured{border-color:var(--border-gold)}
.fx-tier-flag{position:absolute;top:-1px;right:-1px;background:var(--accent);color:#1b2023;font-size:10px;font-weight:700;letter-spacing:.18em;padding:5px 12px}
.fx-tier-name{font-size:12px}
.fx-tier-price{display:flex;align-items:baseline;gap:10px}
.fx-tier-founder{font-family:var(--font-display);font-size:44px;color:#fff;line-height:1}
.fx-tier-per{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.fx-tier-usual{font-size:12.5px;color:var(--accent)}
.fx-tier-perks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fx-tier-perks li{font-size:13.5px;line-height:1.5;color:var(--text-secondary);padding-left:16px;position:relative}
.fx-tier-perks li::before{content:"·";position:absolute;left:0;color:var(--accent);font-weight:700}
.fx-reassure{color:var(--text-muted);font-style:italic;font-family:var(--font-display);font-size:16px}
.fx-btn-stack{flex-direction:column;gap:5px;padding-top:14px;padding-bottom:14px}
.fx-btn-sub{font-size:10px;font-weight:var(--weight-semibold);letter-spacing:.18em;opacity:.72}

/* ---- Step 3: survey ---- */
.fx-col--survey{text-align:left;align-items:stretch;max-width:560px;justify-items:stretch}
.fx-survey-head{display:grid;gap:20px;justify-items:center;text-align:center}
.fx-h1-survey{font-size:clamp(32px,4vw,48px);line-height:1.12}
.fx-survey-lede{color:var(--text-secondary);font-size:16px;line-height:1.7}
.fx-q{border:0;padding:0;margin:0;text-align:left;width:100%;max-width:520px;justify-self:center}
.fx-q legend{font-family:var(--font-body);font-size:12px;font-weight:var(--weight-semibold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--accent);margin-bottom:14px;padding:0}
.fx-q-note{display:block;margin-top:4px;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:none;color:var(--text-muted)}
.fx-q-opts{display:grid;gap:10px}
.fx-survey-actions{display:grid;gap:12px;margin-top:8px;max-width:520px;width:100%;justify-self:center}

/* ---- Step 4: Instagram ---- */
.fx-h1-ig{font-size:clamp(36px,4.5vw,56px);line-height:1.1;max-width:640px}
.fx-ig-lede{color:var(--text-secondary);max-width:520px;font-size:17px;line-height:1.7}
.fx-ig-frame{border:1px solid var(--border-gold);padding:20px 44px;color:#fff}
.fx-ig-handle{font-family:var(--font-display);font-size:28px;font-style:italic}
.fx-ig-close{color:var(--text-muted);font-size:13px;max-width:440px;line-height:1.7}

/* ---- Utility ---- */
.fx-btn-block{width:100%}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- Responsive ---- */
@media(max-width:640px){
  .fx-tiers{grid-template-columns:1fr}
  .fx-form-row{grid-template-columns:1fr}
  .fx-content{align-content:start;padding-top:28px}
  /* Long CTA labels must never force the column past the viewport */
  .br-btn{white-space:normal}
  .br-btn--lg{font-size:12.5px;padding:18px 20px;letter-spacing:.18em;line-height:1.5}
  .fx-btn-stack{padding-top:13px;padding-bottom:13px}
  .fx-content{padding-left:20px;padding-right:20px}
  .fx-tier{padding:24px 20px}
}