/* The FBA Mastermind's own type, self-hosted (latin subset), see research/brand.md */
@font-face{font-family:"Poppins";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/poppins-600-latin.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/poppins-700-latin.woff2") format("woff2")}
@font-face{font-family:"Rubik";font-weight:300 500;font-style:normal;font-display:swap;src:url("../fonts/rubik-400-latin.woff2") format("woff2")}
/* Funnel, deck and ads. The PROSPECT's brand. Centred throughout. */

.funnel{
  --p-paper:#F8F9FA; --p-ink:#1A2746; --p-accent:#FF9903;
  --p-soft:#FFEBCC; --p-line:rgba(26,39,70,.12);
  /* Raised card surface. NEVER hardcode #fff on a card again: on a dark-ground
     brand the ink is cream and a white card renders the copy invisible. The
     build sets --p-card only; --p-card-ink follows the ink automatically. */
  --p-card:#fff; --p-card-ink:var(--p-ink);
  --p-display:"Poppins","Helvetica Neue",Arial,sans-serif; --p-body:"Rubik",system-ui,-apple-system,sans-serif;
  background:var(--p-paper);color:var(--p-ink);font-family:var(--p-body);
}
.funnel h1,.funnel h2,.funnel h3{font-family:var(--p-display);color:var(--p-ink);
  line-height:1.12;letter-spacing:-.012em;text-wrap:balance;margin:0 auto .6em}
.funnel h1{font-size:clamp(1.625rem,3.2vw,2.75rem);max-width:20ch}
.funnel h2{font-size:clamp(1.375rem,2.2vw,1.875rem);max-width:24ch}
.funnel h3{font-size:1.125rem}
.funnel p{max-width:54ch;margin-inline:auto}
.funnel .eyebrow{font-family:var(--p-body);color:var(--p-ink);opacity:.55}

.f-bar{background:var(--p-ink);color:var(--p-paper);text-align:center;
  padding:11px 16px;font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase}
.f-bar b{color:var(--p-accent)}

.f-hero{padding-block:clamp(44px,6vw,80px) clamp(28px,3.5vw,48px)}
/* two stacked paddings between a hero and the first section reads as a gap,
   not as breathing room. The seam gets one, not two. */
.f-hero + .section{padding-top:clamp(24px,3vw,40px)}
.f-hero__sub{font-size:clamp(1rem,1.5vw,1.125rem);opacity:.78;margin-top:1rem}
.f-when{margin-top:1.5rem;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;opacity:.65}

.countdown{display:flex;gap:10px;margin:1.5rem auto 2rem;flex-wrap:wrap;justify-content:center}
.cd{background:var(--p-ink);color:var(--p-paper);min-width:76px;padding:13px 10px;
  border-radius:14px;text-align:center}
.cd b{display:block;font-family:var(--p-display);font-size:1.75rem;line-height:1;
  font-variant-numeric:tabular-nums}
.cd span{font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6}

.f-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:var(--p-accent);color:var(--p-ink);font-weight:650;
  padding:1.05rem 2rem;border:0;border-radius:999px;text-decoration:none;cursor:pointer;
  min-height:50px;box-shadow:0 8px 22px rgba(0,0,0,.12);
  transition:filter var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.f-btn:hover{filter:brightness(.96);transform:translateY(-1px)}

.pillars{display:grid;gap:18px;grid-template-columns:1fr;margin-top:2.25rem}
@media(min-width:760px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar{background:var(--p-card);color:var(--p-card-ink);border-radius:18px;padding:26px 22px;
  box-shadow:0 1px 0 var(--p-line),0 8px 24px rgba(0,0,0,.05)}
.pillar b{display:block;font-family:var(--p-display);font-size:1.125rem;margin-bottom:.5rem}
.pillar p{font-size:.9375rem;opacity:.8}

.host{display:grid;gap:clamp(24px,4vw,44px);grid-template-columns:1fr;
  align-items:center;justify-items:center;max-width:900px;margin-inline:auto}
@media(min-width:820px){.host{grid-template-columns:minmax(0,320px) 1fr;text-align:left}
  .host h2,.host p{margin-inline:0}}
.host img,.host .swap{border-radius:20px;width:100%}
.host__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:1.75rem}
.host__stats b{display:block;font-family:var(--p-display);font-size:1.5rem;color:var(--p-accent)}
.host__stats span{font-size:.75rem;opacity:.68;line-height:1.35;display:block}

.gift{background:var(--p-soft);border-radius:24px;padding:clamp(26px,4vw,44px);
  display:grid;gap:26px;grid-template-columns:1fr;align-items:center;
  max-width:900px;margin-inline:auto}
@media(min-width:820px){.gift{grid-template-columns:1fr minmax(0,280px)}}

.proof{display:grid;gap:16px;grid-template-columns:1fr;margin-top:2rem}
@media(min-width:640px){.proof{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.proof{grid-template-columns:repeat(3,1fr)}}
.proof figure{margin:0;border-radius:18px;overflow:hidden;
  background:var(--p-card);color:var(--p-card-ink);
  box-shadow:0 1px 0 var(--p-line),0 8px 22px rgba(0,0,0,.05)}
.proof figcaption{padding:12px 14px;font-size:.8125rem;opacity:.78}

.form{background:var(--p-card);color:var(--p-card-ink);border-radius:22px;padding:clamp(24px,3vw,34px);max-width:440px;
  margin-inline:auto;text-align:left;box-shadow:0 1px 0 var(--p-line),0 14px 36px rgba(0,0,0,.07)}
.form label{display:block;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  opacity:.6;margin:0 0 .4rem}
.form input{width:100%;padding:.9rem 1rem;border:1px solid var(--p-line);border-radius:12px;
  background:var(--p-paper);margin-bottom:1rem}
.form input:focus{outline:2px solid var(--p-accent);outline-offset:1px;border-color:transparent}
.form .err{color:#b3261e;font-size:.8125rem;margin:-.7rem 0 .9rem;display:none}
.form input[aria-invalid=true]+.err{display:block}
.form .f-btn{width:100%}

/* steps */
.steps{counter-reset:s;display:grid;gap:clamp(30px,4vw,52px);margin-top:2.25rem;
  max-width:720px;margin-inline:auto}
.step .swap,.step img,.step iframe{max-width:560px;margin-inline:auto;border-radius:18px}
.step{text-align:center}
.step::before{counter-increment:s;content:counter(s);
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin:0 auto .9rem;
  background:var(--p-accent);color:var(--p-ink);font-family:var(--p-display);font-size:1.125rem}
.cal-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:1rem;justify-content:center}
.cal-btns a{border:1px solid var(--p-line);border-radius:999px;padding:.65rem 1.1rem;
  text-decoration:none;font-size:.875rem;background:var(--p-card);
  color:var(--p-card-ink);min-height:44px;
  display:inline-flex;align-items:center}
.cal-btns a:hover{border-color:var(--p-accent)}

/* ── GMAIL: real chrome, sidebar, other mail blurred behind ───────────── */
.gmail{border-radius:16px;overflow:hidden;background:#fff;color:#202124;
  max-width:660px;margin-inline:auto;
  text-align:left;box-shadow:0 1px 0 rgba(0,0,0,.08),0 16px 40px rgba(0,0,0,.12);
  font-family:"Google Sans",Roboto,Arial,var(--p-body)}
.gm__top{display:flex;align-items:center;gap:14px;padding:10px 14px;border-bottom:1px solid #e8eaed}
.gm__logo{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.gm__logo svg{display:block}
.gm__logo span{font-size:1.125rem;color:#5f6368;letter-spacing:.01em}
.gm__search{flex:1;background:#eaf1fb;border-radius:999px;padding:8px 14px;
  font-size:.8125rem;color:#5f6368;display:flex;align-items:center;gap:8px}
.gm__body{display:grid;grid-template-columns:1fr}
@media(min-width:640px){.gm__body{grid-template-columns:132px 1fr}}
.gm__side{display:none;padding:12px 8px;border-right:1px solid #e8eaed}
@media(min-width:640px){.gm__side{display:block}}
.gm__compose{display:inline-flex;align-items:center;gap:8px;background:#c2e7ff;color:#001d35;
  border-radius:999px;padding:9px 16px;font-size:.8125rem;margin-bottom:12px}
.gm__nav{display:grid;gap:2px;font-size:.8125rem;color:#202124}
.gm__nav i{display:block;padding:6px 12px;border-radius:999px;font-style:normal}
.gm__nav i.on{background:#d3e3fd;font-weight:600}
.gm__tabs{display:flex;gap:0;border-bottom:1px solid #e8eaed;font-size:.8125rem;color:#5f6368}
.gm__tabs b{padding:10px 16px;color:#1a73e8;border-bottom:3px solid #1a73e8;font-weight:600}
.gm__tabs i{padding:10px 16px;font-style:normal}
.gm__row{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;
  padding:11px 14px;font-size:.875rem;border-bottom:1px solid #f1f3f4;color:#202124}
.gm__row.is-new{background:#fff;font-weight:600}
.gm__row.is-old{opacity:.42;filter:blur(2.2px);user-select:none;font-weight:400}
.gm__av{width:30px;height:30px;border-radius:50%;background:var(--p-accent);
  display:grid;place-items:center;font-size:.75rem;font-weight:700;color:var(--p-ink)}
.gm__av--grey{background:#dadce0}
/* An <img class="gm__av"> (the real profile picture, see main.js's
   data-fallback-initial handling) needs object-fit, the letter-circle
   fallback it degrades to does not, hence the separate rule instead of
   folding this into the base declaration above. */
img.gm__av{object-fit:cover}
.gm__sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm__sub em{font-style:normal;opacity:.65;font-weight:400}
.gm__time{font-size:.75rem;color:#5f6368}

/* ── INSTAGRAM: real in-feed chrome ──────────────────────────────────── */
.phone{width:min(360px,100%);border:11px solid #0d0d10;border-radius:44px;overflow:hidden;
  background:#fff;color:#262626;box-shadow:0 28px 70px rgba(0,0,0,.24);margin-inline:auto;text-align:left}
.ph__status{display:flex;justify-content:space-between;align-items:center;
  padding:10px 20px 6px;font-size:.75rem;font-weight:650;color:#000}
.ph__status span:last-child{letter-spacing:2px}
.ph__head{display:flex;align-items:center;gap:9px;padding:12px 12px 10px}
.ph__ring{width:34px;height:34px;border-radius:50%;padding:2px;flex:0 0 auto;
  background:conic-gradient(#f9ce34,#ee2a7b,#6228d7,#f9ce34)}
.ph__ring img,.ph__ring div{width:100%;height:100%;border-radius:50%;object-fit:cover;
  background:#ddd;border:2px solid #fff}
.ph__who{display:flex;align-items:center;gap:4px;flex:1;font-size:.8125rem;
  font-weight:650;line-height:1.25}
.ph__badge{width:13px;height:13px;flex:0 0 auto}
.ph__sponsored{display:block;font-weight:400;opacity:.55;font-size:.6875rem}
.ph__more{opacity:.5;font-size:1.15rem;letter-spacing:1px;padding:0 4px;flex:0 0 auto}
[data-carousel] .ph__media{cursor:grab}
[data-carousel].is-dragging .ph__media{cursor:grabbing}
.ph__media{position:relative;aspect-ratio:4/5;background:#f2f2f2;overflow:hidden}
.ph__media>.crv,.ph__media>[data-track]{position:absolute;inset:0}
.ph__arrow{position:absolute;top:50%;translate:0 -50%;z-index:3;width:28px;height:28px;
  border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.92);
  box-shadow:0 1px 5px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;
  color:#262626}
.ph__arrow--prev{left:10px}
.ph__arrow--next{right:10px}
.ph__arrow svg{width:15px;height:15px;stroke:#262626;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.dots{position:absolute;left:0;right:0;bottom:10px;z-index:2;display:flex;gap:5px;
  justify-content:center}
.dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);display:block}
.dots i.on{background:#fff}
.ph__cta{display:flex;justify-content:space-between;align-items:center;
  padding:11px 14px;background:#fafafa;border-top:1px solid #efefef;
  font-size:.8125rem;font-weight:650}
.ph__cta em{font-style:normal;opacity:.45;font-weight:400;font-size:.75rem}
.ph__actions{display:flex;align-items:center;gap:14px;padding:10px 14px 2px}
.ph__actions button{background:none;border:0;padding:0;cursor:pointer;line-height:0}
.ph__actions svg{width:23px;height:23px;stroke:#262626;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.ph__actions .sp{flex:1}
.ph__counts{display:flex;gap:16px;padding:6px 14px 0;font-size:.8125rem}
.ph__counts span{font-weight:650}
.ph__counts em{font-style:normal;font-weight:400;opacity:.55;margin-right:3px}
.ph__caption{padding:6px 14px 14px;font-size:.8125rem;line-height:1.45}
.ph__caption b{font-weight:650}

/* ── the static ad and carousel frames, actually designed ────────────── */

.crv{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:30px 26px;text-align:left;background:var(--p-ink);color:var(--p-paper)}
.crv--soft{background:var(--p-soft);color:var(--p-ink)}
.crv--paper{background:var(--p-paper);color:var(--p-ink)}
.crv--accent{background:var(--p-accent);color:var(--p-ink)}
.crv__kicker{font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
  opacity:.7;margin-bottom:14px}
.crv__h{font-family:var(--p-display);font-size:1.5rem;line-height:1.15;margin:0;
  letter-spacing:-.01em;text-wrap:balance;max-width:none}
.crv__sub{font-size:.8125rem;opacity:.82;margin:12px 0 0;max-width:none}
.crv__rule{width:36px;height:4px;border-radius:999px;background:var(--p-accent);margin:18px 0 0}
.crv--accent .crv__rule{background:var(--p-ink)}
.crv__foot{margin-top:auto;padding-top:18px;font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;opacity:.75}

/* .crv--photo: a real photograph of them, with the type over it. A set of
   statics that is 100% typography reads as an agency exercise; at least one
   static and two carousel slides carry their face. The scrim is what keeps
   the type legible over an image we do not control. */
.crv--photo{background:var(--p-ink);color:#fff;justify-content:flex-end;
  text-align:left;padding:26px 24px}
.crv--photo .crv__bg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0}
.crv--photo::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.55) 38%,rgba(0,0,0,.10) 72%,rgba(0,0,0,.02) 100%)}
.crv--photo > *:not(.crv__bg){position:relative;z-index:2;margin-inline:0;max-width:100%}
.crv--photo .crv__kicker{color:var(--p-accent);opacity:1;margin-top:auto}
/* the base .crv__foot uses margin-top:auto to pin itself down, which pins
   everything above it to the TOP. On the photo variant the whole text block
   belongs together at the bottom, over the dark end of the scrim. */
.crv--photo .crv__foot{margin-top:.9rem}
.crv--photo .crv__h{color:#fff;text-wrap:balance}
.crv--photo .crv__sub{color:rgba(255,255,255,.86)}
.crv--photo .crv__foot{color:rgba(255,255,255,.72);border-top-color:rgba(255,255,255,.22)}
.crv--photo .crv__rule{background:var(--p-accent)}
.crv__stat{font-family:var(--p-display);font-size:2.75rem;line-height:1;margin:0 0 6px}

/* .crv--bleed: full-bleed real photo, no scrim across the whole frame, just a
   short dark gradient strip at the bottom carrying one bold caption and a
   thin accent rule. This is the archival/story beat's variant, not a
   replacement for .crv--photo: it belongs to the carousel's wrong-turn and
   failure slides, never the hook or the offer slide, see build/ads.md. */
.crv--bleed{background:var(--p-ink);color:#fff;justify-content:flex-end;
  text-align:left;padding:0}
.crv--bleed .crv__bg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0}
.crv--bleed::after{content:"";position:absolute;inset:0 0 0 0;z-index:1;height:46%;
  top:auto;background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.05) 100%)}
.crv--bleed > *:not(.crv__bg){position:relative;z-index:2;margin-inline:0;max-width:100%}
.crv--bleed .crv__cap{padding:0 22px 20px;font-family:var(--p-display);
  font-size:1.15rem;line-height:1.2;margin:0;text-wrap:balance}
.crv--bleed .crv__rule{margin:0 22px 12px}

/* .crv__badge: the program mark plus an n/N counter, baked into the creative
   itself so a carousel slide still reads as part of a numbered system if it
   is ever screenshotted or forwarded on its own, separate from the phone
   chrome's own dot indicator. Top-right, small, out of the way of the copy. */
.crv__badge{position:absolute;top:14px;right:14px;z-index:3;display:flex;
  align-items:center;gap:6px;padding:5px 9px 5px 6px;border-radius:999px;
  background:rgba(0,0,0,.55);color:#fff;font-size:.625rem;letter-spacing:.06em;
  backdrop-filter:blur(2px)}
.crv__badge i{width:14px;height:14px;border-radius:4px;background:var(--p-accent);
  display:block;flex:0 0 auto}
.crv__badge span{opacity:.85}

/* ── application, with the Typeform footer ───────────────────────────── */
.app{background:var(--p-card);color:var(--p-card-ink);border-radius:22px;padding:clamp(26px,4vw,46px) clamp(22px,4vw,46px) 0;
  max-width:640px;margin-inline:auto;min-height:340px;display:flex;flex-direction:column;
  justify-content:center;box-shadow:0 1px 0 var(--p-line),0 16px 44px rgba(0,0,0,.08);
  text-align:left;overflow:hidden}
.app__q{display:none}
.app__q.on{display:block}
.app__n{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;opacity:.5;
  margin-bottom:.8rem}
.app h3{margin-inline:0;text-align:left}
.app p{margin-inline:0}
.app__opts{display:grid;gap:10px;margin-top:1.4rem}
.app__opt{display:flex;gap:12px;align-items:center;text-align:left;width:100%;
  border:1px solid var(--p-line);background:var(--p-paper);border-radius:12px;
  padding:.95rem 1.05rem;cursor:pointer;min-height:50px;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.app__opt:hover,.app__opt:focus-visible{border-color:var(--p-accent);background:var(--p-soft)}
.app__opt kbd{border:1px solid var(--p-line);border-radius:6px;padding:.15rem .5rem;
  font-family:var(--p-body);font-size:.75rem;background:var(--p-card);
  color:var(--p-card-ink)}
/* contact step: four real inputs, and the 1-10 scale */
.app__fields{display:grid;gap:12px;margin-top:1.4rem}
@media(min-width:560px){.app__fields{grid-template-columns:1fr 1fr}}
.app__fields label{display:block;font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;opacity:.6}
.app__fields input{display:block;width:100%;margin-top:.4rem;padding:.85rem 1rem;
  border:1px solid var(--p-line);border-radius:12px;background:var(--p-paper);
  color:var(--p-ink);font-family:var(--p-body);font-size:1rem;letter-spacing:normal;
  text-transform:none}
.app__fields input:focus{outline:2px solid var(--p-accent);outline-offset:1px;
  border-color:transparent}
.app__fields input[aria-invalid=true]{border-color:#b3261e}
.app__err{color:#b3261e;font-size:.8125rem;margin:.9rem 0 0}
.app__go{margin-top:1.3rem}
.app__scale{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.4rem}
.app__scale .app__opt{flex:1 0 auto;min-width:48px;justify-content:center;
  padding:.8rem .5rem;font-variant-numeric:tabular-nums}
.app__prog{height:4px;background:var(--p-line);border-radius:999px;margin-bottom:1.6rem;
  overflow:hidden}
.app__prog i{display:block;height:100%;background:var(--p-accent);width:16.6667%;
  transition:width var(--dur) var(--ease)}
.app__tf{margin:2rem -46px 0;padding:12px 20px;border-top:1px solid var(--p-line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:.75rem;background:var(--p-card);
  color:color-mix(in srgb,var(--p-card-ink) 55%,transparent)}
.app__tf b{display:inline-flex;align-items:center;gap:6px;font-weight:600;
  color:color-mix(in srgb,var(--p-card-ink) 75%,transparent)}
.app__tf .ok{background:var(--p-accent);color:var(--p-ink);border-radius:8px;
  padding:.35rem .75rem;font-weight:650}

/* Orange fails as text on the light ground (2.03:1), so stats stay ink. */
.host__stats b{color:var(--p-ink)}
.host__stats b::after{content:"";display:block;width:28px;height:3px;border-radius:2px;background:var(--p-accent);margin:.35rem 0 .15rem}

/* The FBA Mastermind build additions */
.f-logo{display:block;margin:0 auto 1.25rem;height:auto;max-width:200px}
.proof figure>img{display:block;width:100%;aspect-ratio:4/5;object-fit:contain;object-position:center;background:#000}
.proof figure>.vid{border-radius:0}
.gift__img{width:100%;height:auto;border-radius:16px;box-shadow:0 18px 40px rgba(26,39,70,.18)}
.host__img{height:auto}
.form .f-consent{display:flex;gap:.6rem;align-items:flex-start;text-transform:none;letter-spacing:0;
  font-size:.8125rem;opacity:.8;margin:.2rem 0 1rem;line-height:1.4}
.form .f-consent input{width:auto;margin-top:.15rem;padding:0}