/* Funnel, deck and ads. The PROSPECT's brand. Centred throughout. */

.funnel{
  /* Catalyst: dark ground, Catalyst gold, Cinzel display (research/brand.md).
     Set here as the defaults so every page in funnel/, offer/, creative/ and
     emails/ renders in Jordan's brand even before config.js applies. */
  --p-paper:#0E0D0B; --p-ink:#F3EDE2; --p-accent:#D4A645;
  --p-soft:#2A2418; --p-line:rgba(243,237,226,.12);
  /* Raised card surface: a lifted dark, never white, on this dark brand. */
  --p-card:#1A1814; --p-card-ink:var(--p-ink);
  /* Text on a gold surface is the dark ground, never the cream ink. */
  --p-on-accent:#0E0D0B;
  --p-muted:rgba(243,237,226,.72);
  --p-display:"Cinzel","Trajan Pro",Georgia,serif; --p-body:"Inter",system-ui,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-soft);color:var(--p-ink);border-bottom:1px solid var(--p-line);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-card);color:var(--p-card-ink);border:1px solid var(--p-line);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-on-accent);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:#F2A08F;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-on-accent);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-on-accent)}
.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-on-accent)}
.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-on-accent)}
.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:#F2A08F}
.app__err{color:#F2A08F;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-on-accent);border-radius:8px;
  padding:.35rem .75rem;font-weight:650}


/* ======================================================================
   Catalyst build additions (Jordan Thompson). Everything below is specific
   to this build's funnel, offer, creative and email pages.
   ====================================================================== */

/* Cinzel is a capitals face: headlines set it with open tracking, never
   tight. Body stays Inter. */
.funnel h1,.funnel h2{letter-spacing:.01em;font-weight:600}
.funnel h1{line-height:1.16}
.funnel h3{font-family:var(--p-body);font-weight:650;letter-spacing:0}
.funnel .eyebrow{color:var(--p-accent);opacity:1;font-weight:600}
.funnel a{color:inherit}
.funnel .muted{color:var(--p-muted)}
.funnel .gold{color:var(--p-accent)}
.funnel ::selection{background:var(--p-accent);color:var(--p-on-accent)}
.funnel :focus-visible{outline:3px solid var(--p-accent);outline-offset:3px}

/* the wordmark: Catalyst, as text in Cinzel, the first A as an open triangle */
.wm{display:inline-flex;align-items:center;gap:.05em;font-family:var(--p-display);
  font-weight:500;letter-spacing:.32em;color:var(--p-accent);text-decoration:none;
  font-size:1rem;line-height:1}
.wm svg{width:.82em;height:.74em;margin:0 .3em 0 .02em;flex:0 0 auto}
.f-top{display:flex;justify-content:center;align-items:center;padding:22px 16px 0}
.f-top .wm{font-size:.9375rem}
.f-top small{display:block;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--p-muted);margin-top:.5rem;font-family:var(--p-body)}

/* hairline gold rule under section eyebrows */
.g-rule{width:44px;height:2px;background:var(--p-accent);border:0;margin:0 auto 1.4rem}

.section + .section{border-top:1px solid var(--p-line)}
.f-hero + .section{border-top:0}

/* registration: hero meta chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:1.4rem}
.chip{border:1px solid var(--p-line);border-radius:999px;padding:.4rem .85rem;
  font-size:.75rem;letter-spacing:.06em;color:var(--p-ink);background:var(--p-card)}
.chip b{color:var(--p-accent);font-weight:650}
.qualify{margin:1.4rem auto 0;max-width:46ch;font-size:.9375rem;color:var(--p-muted);
  border-top:1px solid var(--p-line);padding-top:1rem}

/* checkout form additions */
.form h3{font-family:var(--p-display);font-size:1.25rem;margin:0 0 .3rem;text-align:left}
.form .row2{display:grid;grid-template-columns:1fr;gap:0 12px}
@media(min-width:480px){.form .row2{grid-template-columns:1fr 1fr}}
.form input{color:var(--p-ink)}
.ticket{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-top:1px solid var(--p-line);border-bottom:1px solid var(--p-line);
  padding:.85rem 0;margin:.4rem 0 1rem;font-size:.9375rem}
.ticket b{font-family:var(--p-display);font-size:1.375rem;color:var(--p-accent)}
.bump{display:flex;gap:12px;align-items:flex-start;border:1px dashed var(--p-accent);
  border-radius:12px;padding:12px 14px;margin:0 0 1rem;font-size:.875rem;cursor:pointer;
  background:var(--p-soft)}
.bump input{width:20px;height:20px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--p-accent)}
.bump b{color:var(--p-accent)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.75rem;line-height:1.45;
  color:var(--p-muted);margin:0 0 1.1rem;text-transform:none;letter-spacing:0;opacity:1;cursor:pointer}
.consent input{width:18px;height:18px;margin:1px 0 0;flex:0 0 auto;padding:0;accent-color:var(--p-accent)}
.form label.consent,.form label.bump{display:flex;text-transform:none;letter-spacing:0;opacity:1;font-size:.8125rem}
.form label.consent{font-size:.75rem}
.bump input,.consent input{padding:0;margin-bottom:0}
.form .consent:has(input[aria-invalid=true]) + .err{display:block;margin-top:-.6rem}
.form input[type=checkbox]:focus{outline:2px solid var(--p-accent);outline-offset:2px}
.secure{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:.9rem;
  font-size:.75rem;color:var(--p-muted)}
.secure svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.total{display:flex;justify-content:space-between;font-size:.875rem;margin:0 0 1rem;color:var(--p-muted)}
.total b{color:var(--p-ink)}

/* the gift, designed in type rather than photographed */
.gift{background:var(--p-soft);border:1px solid rgba(212,166,69,.28)}
.sheet{aspect-ratio:4/5;width:100%;max-width:280px;margin-inline:auto;border-radius:14px;
  background:linear-gradient(160deg,#211d15,#151310);border:1px solid rgba(212,166,69,.45);
  box-shadow:0 22px 50px rgba(0,0,0,.45);padding:24px 20px;display:flex;flex-direction:column;
  text-align:left;position:relative;overflow:hidden}
.sheet::before{content:"";position:absolute;inset:10px;border:1px solid rgba(212,166,69,.22);
  border-radius:8px;pointer-events:none}
.sheet .wm{font-size:.625rem}
.sheet__t{font-family:var(--p-display);font-size:1.375rem;line-height:1.15;margin:1.2rem 0 .3rem;
  color:var(--p-ink);letter-spacing:.02em}
.sheet__s{font-size:.6875rem;color:var(--p-muted);letter-spacing:.08em;text-transform:uppercase}
.sheet__rows{margin-top:auto;display:grid;gap:9px}
.sheet__rows span{display:flex;justify-content:space-between;font-size:.6875rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--p-muted);
  border-bottom:1px solid rgba(243,237,226,.16);padding-bottom:6px}
.sheet__rows span i{display:block;width:44%;height:1px;align-self:flex-end;
  background:rgba(243,237,226,.0)}

/* host block: gold stats */
.host__stats b{color:var(--p-accent)}
.host img{border-radius:20px;box-shadow:0 22px 50px rgba(0,0,0,.4)}
.host .eyebrow{display:block}

/* proof slots on a dark ground */
.funnel .swap{background:repeating-linear-gradient(45deg,#17150f,#17150f 10px,#1d1a13 10px,#1d1a13 20px);
  border-color:rgba(212,166,69,.35);color:rgba(243,237,226,.62)}

/* the confirmation page's lead video: a real still, labelled */
.still{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/9;
  max-width:720px;margin-inline:auto;background:#000;box-shadow:0 22px 50px rgba(0,0,0,.45)}
.still img{width:100%;height:100%;object-fit:cover;display:block;opacity:.86}
.still__play{position:absolute;inset:0;margin:auto;width:68px;height:68px;border-radius:50%;
  background:var(--p-accent);display:grid;place-items:center}
.still__play svg{width:24px;height:24px;fill:var(--p-on-accent);margin-left:4px}
.still__tag{position:absolute;left:14px;bottom:14px;background:rgba(14,13,11,.82);
  color:var(--p-ink);border:1px dashed rgba(212,166,69,.6);border-radius:999px;
  font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;padding:.45rem .8rem}
.still + .covers{max-width:620px;margin:1.2rem auto 0;text-align:left;font-size:.9375rem;
  color:var(--p-muted);padding-left:1.1rem}
.covers li{margin-bottom:.35rem}

/* breakout grid captions read as questions */
.breakouts figcaption{font-size:.875rem;opacity:1;color:var(--p-ink)}
.breakouts figcaption span{display:block;font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--p-accent);margin-bottom:.25rem}

/* for / not for */
.fit{display:grid;gap:16px;grid-template-columns:1fr;max-width:860px;margin:2rem auto 0;text-align:left}
@media(min-width:720px){.fit{grid-template-columns:1fr 1fr}}
.fit>div{background:var(--p-card);border:1px solid var(--p-line);border-radius:16px;padding:22px}
.fit h3{margin:0 0 .6rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--p-accent)}
.fit ul{margin:0;padding-left:1.1rem;font-size:.9375rem;line-height:1.6}
.fit li{margin-bottom:.35rem}

/* footer, with the image credits CC BY / BY-SA require */
.f-foot{border-top:1px solid var(--p-line);padding:28px 16px 40px;text-align:center;
  font-size:.75rem;color:var(--p-muted)}
.f-foot p{margin:0 auto .4rem;max-width:70ch}
.f-foot a{color:var(--p-muted)}

/* replay player */
.player{position:relative;aspect-ratio:16/9;max-width:860px;margin:1.6rem auto 0;
  border-radius:18px;overflow:hidden;background:#000;box-shadow:0 22px 50px rgba(0,0,0,.45)}
.player img{width:100%;height:100%;object-fit:cover;opacity:.55;display:block}
.player__bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;
  padding:12px 16px;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0));
  font-size:.75rem;color:#fff}
.player__bar i{flex:1;height:4px;border-radius:999px;background:rgba(255,255,255,.25);position:relative}
.player__bar i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--p-accent);border-radius:999px}

/* application option text on dark cards */
.app__opt{color:var(--p-ink)}
.app__opt kbd{color:var(--p-ink)}
.app h3{font-family:var(--p-body);font-weight:650;font-size:1.1875rem;line-height:1.35}
.app__tf{margin:2rem calc(-1 * clamp(22px,4vw,46px)) 0}
[data-app-decline],[data-app-reveal]{max-width:640px;margin-inline:auto}
.cal{background:#fff;border-radius:18px;overflow:hidden;margin-top:1.4rem;min-height:300px}

/* offer page: Operating Bureau's voice on Jordan's ground */
.of-two{display:grid;gap:18px;grid-template-columns:1fr;margin-top:2rem;max-width:900px;margin-inline:auto;text-align:left}
@media(min-width:760px){.of-two{grid-template-columns:1fr 1fr}}
.of-two>div{border:1px solid var(--p-line);border-radius:16px;padding:24px;background:var(--p-card);color:var(--p-card-ink)}
.of-two>div.on{border-color:var(--p-accent);background:var(--p-soft)}
.of-two .big{display:block;font-family:var(--p-display);font-size:clamp(1.75rem,3vw,2.375rem);margin:.4rem 0 .6rem;color:var(--p-ink)}
.of-two .on .big{color:var(--p-accent)}
.of-two p{margin:0;font-size:.9375rem;color:var(--p-muted);max-width:none}
.facts{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);max-width:760px;margin:2rem auto 0}
@media(min-width:760px){.facts{grid-template-columns:repeat(4,1fr)}}
.facts div{border:1px solid var(--p-line);border-radius:14px;padding:16px 12px;background:var(--p-card)}
.facts b{display:block;font-family:var(--p-display);font-size:1.5rem;color:var(--p-accent);line-height:1.1}
.facts span{display:block;font-size:.75rem;color:var(--p-muted);margin-top:.35rem;line-height:1.35}
.chain{max-width:760px;margin:1.6rem auto 0;border:1px solid var(--p-line);border-radius:16px;
  overflow:hidden;background:var(--p-card);text-align:left}
.chain div{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;
  padding:11px 18px;border-bottom:1px solid var(--p-line);font-size:.9375rem}
.chain div:last-child{border-bottom:0;background:var(--p-soft)}
.chain em{font-style:normal;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--p-muted)}
.chain b{font-variant-numeric:tabular-nums}
.chain div:last-child b{color:var(--p-accent);font-family:var(--p-display);font-size:1.25rem}
.stack{max-width:860px;margin:2rem auto 0;border:1px solid var(--p-line);border-radius:16px;
  overflow:hidden;background:var(--p-card);text-align:left}
.stack>div{display:grid;grid-template-columns:1fr;gap:4px;padding:18px 22px;border-bottom:1px solid var(--p-line)}
@media(min-width:720px){.stack>div{grid-template-columns:210px 1fr;gap:20px}}
.stack>div:last-child{border-bottom:0}
.stack dt,.stack .k{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--p-accent);padding-top:.2rem}
.stack .v{font-size:.9375rem;line-height:1.6}
.stack .v p{margin:0 0 .5rem;max-width:none}
.pillars3{display:grid;gap:14px;grid-template-columns:1fr;max-width:900px;margin:2rem auto 0}
@media(min-width:760px){.pillars3{grid-template-columns:repeat(3,1fr)}}
.pillars3>div{background:var(--p-card);border:1px solid var(--p-line);border-radius:16px;padding:22px;text-align:left}
.pillars3 i{font-style:normal;font-family:var(--p-display);color:var(--p-accent);font-size:.875rem;letter-spacing:.1em}
.pillars3 b{display:block;font-family:var(--p-display);font-size:1.125rem;margin:.3rem 0 .5rem;font-weight:600}
.pillars3 p{font-size:.9rem;color:var(--p-muted);margin:0}
.steps-run{max-width:760px;margin:2rem auto 0;text-align:left;counter-reset:r;display:grid;gap:12px}
.steps-run>div{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;
  background:var(--p-card);border:1px solid var(--p-line);border-radius:14px;padding:16px 18px}
.steps-run>div::before{counter-increment:r;content:counter(r);width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:var(--p-accent);color:var(--p-on-accent);
  font-family:var(--p-display);font-weight:600}
.steps-run b{display:block;margin-bottom:.2rem}
.steps-run p{margin:0;font-size:.9375rem;color:var(--p-muted);max-width:none}
.note{font-size:.8125rem;color:var(--p-muted);max-width:62ch;margin:1rem auto 0}
.ob-sign{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--p-muted)}
.sheet p{max-width:none;margin-inline:0}
.sheet__s{margin:0}
@media(max-width:520px){.host__stats b{font-size:1.125rem}.host__stats{gap:10px}}
/* creative: type inside the ad frames is left-set and full width */
.funnel .crv p{margin-inline:0;max-width:none}
.crv--photo > .crv__arrow,.crv--paper > .crv__arrow,.crv--soft > .crv__arrow{position:absolute}
.crv--photo .crv__bg{object-position:center 18%}
[data-carousel] .crv:not(.crv--bleed){padding-left:46px;padding-right:46px}
.funnel .phone{border-color:#1b1a17;box-shadow:0 0 0 1px rgba(243,237,226,.16),0 28px 70px rgba(0,0,0,.55)}