/* Community funnel: opt-in, welcome (Private Invite + G.E.A.R. Authority Kit), upsell, downsells, confirmed.
   STANDALONE on purpose (2026-10-04): funnel pages do not load /styles.css, so the parallel site redesign
   cannot break checkout pages. Brand tokens below are the Miami Marketer brand kit, same values as /styles.css:
   Bebas Neue display (single weight), Inter body, red #fc0311, red-deep #be1b23, gold #fdc054, black #0d0d0d,
   dark-mode first, live-site pill buttons and rounded cards (brand layer at the end of this file).
   If the site tokens change, copy the new values here (see docs/HANDOFF-funnel-to-site.md).

   Motion rules for this file:
   - transform and opacity only, CSS transitions (interruptible), strong ease-out.
   - Text is never hidden by an animation. Pre-states exist only under html.fx (set by JS when motion is allowed)
     and only move text (translate), never fade it. Decorative pieces (strike lines, kit ticks, G.E.A.R. lights) may fade.
   - No JS, or prefers-reduced-motion: every element renders in its finished state. */

@font-face{font-family:'Bebas Neue';src:url('/assets/fonts/BebasNeue-Regular.woff') format('woff');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/fonts/Inter-Regular.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/fonts/Inter-Medium.woff') format('woff');font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/fonts/Inter-SemiBold.woff') format('woff');font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/fonts/Inter-Bold.woff') format('woff');font-weight:700;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/fonts/Inter-ExtraBold.woff') format('woff');font-weight:800;font-display:swap}

:root{
  --black:#0d0d0d;--ink:#ffffff;--red:#fc0311;--red-deep:#be1b23;--red-hover:#ff2a36;--red-text:#ff5560;--gold:#fdc054;
  --gradient-red:linear-gradient(90deg,#fc0311,#be1b23);--gradient-accent:linear-gradient(90deg,#fc0311,#fdc054);
  --paper:#111111;--paper-2:#141414;--card:#1a1a1a;--line:rgba(255,255,255,.12);--muted:#a9b3c6;
  --on-dark:#ffffff;--on-dark-muted:#c8d6f0;--line-dark:rgba(255,255,255,.14);
  --gutter:max(20px,calc((100vw - 1320px)/2));
  --display:'Bebas Neue',Impact,'Arial Narrow',sans-serif;--body:Inter,system-ui,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-drawer:cubic-bezier(.32,.72,0,1);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--body);overflow-x:hidden}
h1,h2,h3,p,dl,dd,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.005em;text-wrap:balance}
h3{text-wrap:balance}
p{text-wrap:pretty}
em{font-style:normal}
::selection{background:var(--gold);color:#0d0d0d}
:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.paper :focus-visible{outline-color:var(--red-text)}
.skip{position:absolute;left:12px;top:-80px;background:var(--gold);color:#0d0d0d;padding:12px 16px;font-weight:800;z-index:80}
.skip:focus{top:10px}
.wrap{padding:0 var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ico{width:20px;height:20px;flex:none}

/* ---------- Buttons: red = the one main action; text links for everything quiet ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:56px;padding:16px 26px;font-weight:800;font-size:16px;line-height:1.2;white-space:nowrap;text-wrap:balance;transition:transform .16s var(--ease-out),background-color .18s ease,box-shadow .18s ease}
.btn:active{transform:scale(.97)}
.btn:disabled{cursor:progress}
.btn-red{background:var(--red);color:#0d0d0d}
.btn-red:disabled{background:#ff5560}
@media (hover:hover) and (pointer:fine){
  .btn-red:hover:not(:disabled){background:var(--red-hover);transform:translateY(-2px);box-shadow:0 10px 24px -12px #fc031166}
  .btn-red:hover .ico{transform:translateX(3px)}
}
.btn .ico{transition:transform .2s var(--ease-out)}
.btn-ghost-dark{border:1px solid #ffffff55;color:#fff}
.btn-ghost-dark:hover{border-color:var(--gold);color:var(--gold)}
.btn-sm{min-height:48px;padding:12px 18px;font-size:14px}
.btn-block{width:100%}
.text-link{padding:0;display:inline-flex;align-items:center;gap:8px;min-height:48px;font-weight:800;font-size:15px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--red)}
.text-link:hover{color:var(--red-text)}
.on-dark .text-link{text-decoration-color:var(--gold)}
.on-dark .text-link:hover{color:var(--gold)}
.text-link .ico{width:16px;height:16px}
.links{display:flex;flex-wrap:wrap;gap:0 28px}
/* Pending state: the label changes in place, the button keeps its size, a small spinner shows we heard the tap */
.spin{width:18px;height:18px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Header / footer ---------- */
.site-header{position:sticky;top:0;z-index:20;height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--gutter);background:#0d0d0dee;color:#fff;border-bottom:1px solid var(--line-dark);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
@media (prefers-reduced-transparency:reduce){.site-header{background:#0d0d0d;backdrop-filter:none}}
.brand{display:flex;align-items:center;min-height:48px}
.brand img{width:140px}
.conf-logo{width:170px;height:auto}
.order-step{font-size:13px;color:var(--on-dark-muted)}
.site-footer{background:#0d0d0d;color:var(--on-dark-muted);border-top:1px solid var(--line-dark);padding:36px 0;font-size:13px}
.footer-grid{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.footer-logo{width:120px}

/* ---------- Polygon facets (brand motion language) ---------- */
.dark{position:relative;overflow:hidden;isolation:isolate;background:#0d0d0d;color:#fff}
.facets{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:linear-gradient(115deg,#0d0d0d 28%,#2b0f13 62%,#5e121c)}
.facets i{position:absolute;display:block;inset:-18% -12% -18% 30%;transform-origin:55% 50%}
.facets i:nth-child(1){background:#fc0311;opacity:.42;clip-path:polygon(48% 0,92% 0,66% 100%,10% 86%)}
.facets i:nth-child(2){background:#ff4a55;opacity:.2;clip-path:polygon(80% 6%,100% 60%,46% 100%,62% 40%)}
.facets i:nth-child(3){background:#be1b23;opacity:.66;clip-path:polygon(28% 6%,58% 0,6% 100%,0 62%)}
.facets i:nth-child(4){background:#fdc054;opacity:.12;clip-path:polygon(100% 22%,100% 100%,60% 92%)}
.facets:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0d0d0df2 0%,#0d0d0dcc 38%,#0d0d0d33 78%,transparent)}
.facets-soft:after{background:linear-gradient(90deg,#0d0d0df5 0%,#0d0d0de0 55%,#0d0d0d99)}
.facets-close:after{background:radial-gradient(ellipse at center,#0d0d0de0 0%,#0d0d0dc4 45%,#0d0d0d66 100%)}
.facets-close i{inset:-25% -10%}
.motion-on .facets i{animation:drift 18s ease-in-out infinite alternate;will-change:transform}
.motion-on .facets i:nth-child(2){animation-duration:23s;animation-delay:-8s;animation-direction:alternate-reverse}
.motion-on .facets i:nth-child(3){animation-duration:21s;animation-delay:-11s}
.motion-on .facets i:nth-child(4){animation-duration:26s;animation-delay:-5s}
.motion-paused .facets i{animation-play-state:paused!important}
@keyframes drift{from{transform:translate3d(-3%,-2%,0) rotate(-4deg) scale(1.04)}to{transform:translate3d(3%,2%,0) rotate(4deg) scale(1.1)}}
.motion-toggle{position:absolute;right:0;top:0;z-index:2;min-height:44px;padding:10px 14px;font-size:11px;font-weight:700;letter-spacing:.06em;color:#ddd;border:1px solid #ffffff40;background:#0d0d0d80}
.motion-toggle:hover{color:#fff;border-color:#fff}

/* ---------- Opt-in ---------- */
.hero{padding:0 var(--gutter)}
.hero-inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:end;min-height:min(760px,calc(100dvh - 72px))}
.hero-copy{padding:64px 0 96px;align-self:center}
.hero h1.flag{font-size:clamp(46px,5vw,76px);line-height:.95}
.flag>span,.flag>em{display:block}
.flag-b{font-size:min(1.6em,calc((100vw - 40px)/6.9));white-space:nowrap;line-height:.9;margin:.04em 0 .02em;letter-spacing:-.015em;color:var(--gold)}
.hero-sub{font-size:clamp(17px,1.4vw,20px);line-height:1.55;max-width:40ch;margin:26px 0 32px;color:#e9e9e5}
.meeting-when{display:block;margin-top:6px;color:var(--gold);font-weight:700}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px}
.cta-note{font-size:14px;color:var(--on-dark-muted)}
.hero-portrait{position:relative;align-self:end;justify-self:end;width:100%;max-width:560px}
.hero-portrait figcaption{position:absolute;left:0;right:0;bottom:0;padding:60px 24px 22px;background:linear-gradient(transparent,#0d0d0de6 60%);display:flex;flex-direction:column;gap:2px}
.hero-portrait strong{font:400 26px/1 var(--display);text-transform:uppercase}
.hero-portrait figcaption span{font-size:13px;color:var(--on-dark-muted)}
/* Entrance: transform only, copy is readable from the first frame */
.motion-on .hero-copy>*{animation:rise .6s var(--ease-out) both}
.motion-on .hero-copy>:nth-child(2){animation-delay:.05s}.motion-on .hero-copy>:nth-child(3){animation-delay:.1s}
@keyframes rise{from{transform:translateY(14px)}to{transform:none}}

.tools{padding:96px 0}
.tools-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 72px;align-items:end}
.tools h2{font-size:min(clamp(42px,4.6vw,68px),calc((100vw - 40px)/8.4))}
.tools-lede{font-size:18px;color:var(--muted);max-width:46ch;text-wrap:balance}
.tool-list{margin-top:48px;border-top:2px solid var(--ink)}
.tool-list li{display:grid;grid-template-columns:180px minmax(0,1fr) minmax(0,1.3fr);gap:8px 32px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.tool-track{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--red-text)}
.tool-list h3{font:400 min(26px,calc((100vw - 40px)/13.5))/1.02 var(--display);text-transform:uppercase}
.tool-list p{font-size:15px;color:var(--muted);text-wrap:balance}

.host-band{padding:80px 0}
.host-band-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px 72px;align-items:center}
.host-band h2{font-size:min(clamp(40px,4.4vw,62px),calc((100vw - 40px)/9))}
.host-band p{font-size:18px;color:var(--on-dark-muted);max-width:52ch}

.faq{padding:96px 0}
.faq h2{font-size:min(clamp(40px,4.4vw,62px),calc((100vw - 40px)/8))}
.faq-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px;margin-top:36px;border-top:1px solid var(--line)}
.faq-list div{padding:24px 0;border-bottom:1px solid var(--line)}
.faq-list dt{font-weight:800;font-size:18px;letter-spacing:-.015em}
.faq-list dd{margin-top:8px;color:var(--muted);font-size:16px;text-wrap:pretty}

.closing{padding:112px 0;text-align:center}
.closing-inner{display:flex;flex-direction:column;align-items:center}
.closing h2{font-size:min(clamp(52px,7vw,104px),calc((100vw - 40px)/7.2))}
.closing h2 em{color:var(--gold)}
.closing p{font-size:18px;color:#e2e2de;margin:24px 0 32px;max-width:44ch;text-wrap:balance}
.closing .text-link{margin-top:14px;font-size:14px;color:#e2e2de}
.lines>span,.lines>em{display:block;white-space:nowrap}

/* ---------- Modal (Typeform-style opt-in, checkout preview) ---------- */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px}
.modal-backdrop{position:absolute;inset:0;background:#0d0d0dcc;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media (prefers-reduced-transparency:reduce){.modal-backdrop{background:#0d0d0df2;backdrop-filter:none}}
.modal-panel{position:relative;width:min(620px,100%);max-height:calc(100dvh - 32px);overflow:hidden auto;background:#141414;color:#f5f5f3;border-top:6px solid var(--red);padding:26px 36px 22px}
/* Enter: backdrop fades, panel rises from below (a sheet on phones). Exit is instant so Escape never waits. */
.fx .modal .modal-backdrop{transition:opacity .24s ease}
.fx .modal .modal-panel{transition:transform .32s var(--ease-drawer)}
.fx .modal.entering .modal-backdrop{opacity:0}
.fx .modal.entering .modal-panel{transform:translateY(24px)}
.modal-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.modal-progress{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.modal-close{width:48px;height:48px;font-size:28px;line-height:1;color:#ddd;margin-right:-12px;display:grid;place-items:center}
.modal-close:hover{color:#fff}
.modal-close .ico{width:22px;height:22px}
.modal-bar{height:3px;background:#ffffff1f;margin:10px 0 32px}
.modal-bar i{display:block;height:100%;background:var(--red);transform-origin:left;transform:scaleX(.25);transition:transform .3s var(--ease-out)}
.q label{display:block;font:400 clamp(28px,4.4vw,40px)/1.05 var(--display);text-transform:uppercase;margin-bottom:22px;text-wrap:balance}
/* Question change: the new question slides in from the direction you are going (forward from the right, Back from the left) */
.fx .q.q-in-fwd{animation:q-fwd .24s var(--ease-out)}
.fx .q.q-in-back{animation:q-back .24s var(--ease-out)}
@keyframes q-fwd{from{transform:translateX(18px)}to{transform:none}}
@keyframes q-back{from{transform:translateX(-18px)}to{transform:none}}
.q input{width:100%;min-height:58px;padding:0 16px;background:#0d0d0d;color:#fff;border:1px solid #ffffff55;border-radius:0;font:600 19px/1.2 var(--body);caret-color:var(--gold)}
.q input::placeholder{color:#9a9a95}
.q input:focus{outline:3px solid var(--gold);outline-offset:2px;border-color:transparent}
.q input[aria-invalid=true]{border-color:#ff5560}
.q-error{min-height:24px;margin-top:8px;font-size:14px;color:#ff6a73}
.q-consent{font-size:12px;color:#b9b9b4;margin-top:4px}
.modal-actions{display:flex;align-items:center;gap:12px;margin-top:20px;flex-wrap:wrap}
.modal-hint{font-size:12px;color:#9a9a95;margin-top:12px}
@media (hover:none){.modal-hint{display:none}}
.demo-label{margin-top:16px;padding-top:12px;border-top:1px dashed #ffffff30;font-size:12px;color:#b9b9b4}
.demo-label-dark{border-top-color:#00000026;color:#666}
body.modal-open{overflow:hidden}

/* Checkout preview */
.co-title{font:400 clamp(30px,4vw,40px)/1 var(--display);text-transform:uppercase;margin-bottom:20px}
.co-title:focus{outline:none}
.co-line,.co-total{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid #ffffff22;font-size:16px}
.co-total{border-bottom:0;font-weight:800;font-size:18px}
.co-total b{font-variant-numeric:tabular-nums}
.co-kit{font-size:14px;color:#c9c9c4;padding:10px 0 2px}
.bump{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;margin:18px 0 6px;padding:18px;border:2px dashed var(--gold);cursor:pointer}
.bump input{width:24px;height:24px;margin:2px 0 0;accent-color:var(--red)}
.bump b{display:block;font-size:16px}
.bump small{display:block;font-size:14px;color:#c9c9c4;margin-top:4px}
.co-copy{font-size:17px;color:#d9d9d4;margin-bottom:8px}

/* ---------- Welcome: confirmation strip ---------- */
.confirm{padding:56px 0 48px}
.confirm-title{font:400 min(clamp(48px,6vw,88px),calc((100vw - 40px)/9))/.96 var(--display);text-transform:uppercase;white-space:nowrap}
.confirm-sub{font-size:19px;color:var(--muted);margin:16px 0 8px;max-width:60ch}
.confirm-sub+.confirm-sub{margin-top:0}
.confirm .links{margin-top:10px}
.confirm .text-link{color:var(--ink)}

/* ---------- Welcome: the Private Invite ---------- */
.invite{padding:88px 0 96px}
.invite-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:'head card' 'kit card';gap:40px 64px;align-items:start}
.invite-head{grid-area:head}
.invite-card{grid-area:card;position:sticky;top:96px}
.invite-kit{grid-area:kit}
.invite h2{font-size:min(clamp(40px,4.4vw,68px),calc((100vw - 40px)/9.2))}
.invite h2 span{display:block}
.invite h2 .plus{color:var(--gold);margin-top:.12em}
.invite-when{font-size:17px;font-weight:700;color:#e9e9e5;margin-top:22px}
.invite-when b{color:var(--gold)}

.invite-card{background:#f5f5f3;color:#0d0d0d;padding:30px 30px 24px;border-top:6px solid var(--red)}
.card-label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#be1b23}
/* Price that settles: the regular price gets struck through, then $97 drops into place */
.price-settle{display:flex;align-items:baseline;gap:16px;margin:10px 0 6px}
.price-was{position:relative;font:400 34px/1 var(--display);color:#6b6b66}
.price-was:after{content:'';position:absolute;left:-4px;right:-4px;top:52%;height:3px;background:var(--red);transform-origin:left center}
.price-now{display:inline-block;font:400 clamp(72px,8vw,96px)/.9 var(--display);letter-spacing:-.02em}
.price-for{font-size:15px;font-weight:700;color:#3d3d3a}
.invite-anchor{font-size:15px;color:#555;margin-top:12px}
.fx .price-was:after{transition:transform .42s var(--ease-out) .15s}
.fx .price-now{transition:transform .5s var(--ease-out) .35s}
.fx [data-settle]:not(.fx-in) .price-was:after{transform:scaleX(0)}
.fx [data-settle]:not(.fx-in) .price-now{transform:translateY(-14px)}

.countdown{background:#0d0d0d;color:#fff;padding:12px 18px 10px;margin:18px 0 4px}
.countdown-label{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.countdown-clock{font:400 40px/1 var(--display);font-variant-numeric:tabular-nums;margin-top:6px;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;text-align:center}
.countdown-clock i{font-style:normal;color:#ff4a55}
.countdown-units{display:grid;grid-template-columns:1fr 1fr 1fr;text-align:center;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#b9b9b4;margin-top:4px}
.invite-cta{width:100%;margin-top:18px}
.invite-small{font-size:13px;color:#555;margin-top:12px}

/* The Kit list: items "land" in the kit one by one. Rows only shift a few pixels; the tick beside each one pops in. */
.kit-title{font:400 min(34px,calc((100vw - 40px)/10))/1 var(--display);text-transform:uppercase;margin-bottom:6px}
.kit-lede{font-size:16px;color:var(--on-dark-muted);max-width:52ch}
.kit-items{margin-top:22px;border-top:1px solid var(--line-dark)}
.kit-items>li{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:0 16px;padding:20px 0;border-bottom:1px solid var(--line-dark)}
.kit-tick{width:24px;height:24px;margin-top:3px;background:var(--red);color:#0d0d0d;display:grid;place-items:center}
.kit-tick svg{width:16px;height:16px}
.kit-items h4{margin:0;font-size:18px;font-weight:800;letter-spacing:-.015em;line-height:1.25}
.kit-items p{font-size:15px;color:var(--on-dark-muted);margin-top:4px;max-width:58ch;text-wrap:balance}
.kit-value{font-weight:800;font-variant-numeric:tabular-nums;color:var(--gold);white-space:nowrap}
.kit-skills{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.kit-skills li{font-size:13px;font-weight:700;padding:5px 10px;border:1px solid #ffffff38;white-space:nowrap}
.kit-total{display:flex;justify-content:space-between;gap:16px;padding:16px 0;font-weight:800}
.kit-anchor-row{background:linear-gradient(90deg,#fc03111f,transparent 70%)}
.invite-again{display:none;margin-top:28px}
.fx .kit-items>li{transition:transform .45s var(--ease-out)}
.fx .kit-tick{transition:transform .32s var(--ease-out),opacity .2s ease}
.fx [data-unpack]:not(.fx-in)>li{transform:translateY(12px)}
.fx [data-unpack]:not(.fx-in) .kit-tick{transform:scale(.6);opacity:0}
.fx [data-unpack]>li:nth-child(2),.fx [data-unpack]>li:nth-child(2) .kit-tick{transition-delay:.09s}
.fx [data-unpack]>li:nth-child(3),.fx [data-unpack]>li:nth-child(3) .kit-tick{transition-delay:.18s}
.fx [data-unpack]>li:nth-child(4),.fx [data-unpack]>li:nth-child(4) .kit-tick{transition-delay:.27s}
.fx [data-unpack]>li:nth-child(5),.fx [data-unpack]>li:nth-child(5) .kit-tick{transition-delay:.36s}
.fx [data-unpack]>li:nth-child(6),.fx [data-unpack]>li:nth-child(6) .kit-tick{transition-delay:.45s}

/* G.E.A.R. strip: the four phases light up in order (gold letter fades over the muted one, a red rule draws under it).
   Lit is the static end state. Labels stay readable in both states. */
.gear{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:14px;max-width:520px}
.gear>span{position:relative;display:flex;flex-direction:column;padding:8px 10px 12px;background:#ffffff0d;min-width:0}
.gear b{position:relative;display:block;font:400 30px/1 var(--display);color:#ffffff59}
.gear b:after{content:attr(data-l);position:absolute;inset:0;color:var(--gold)}
.gear small{font-size:12px;font-weight:700;color:#e2e2de;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:clip}
.gear>span:after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red);transform-origin:left center}
.gear-ticks{display:flex;gap:3px;margin-top:8px}
.gear-ticks i{flex:1;height:4px;background:#ffffff80}
.fx .gear b:after{transition:opacity .3s ease}
.fx .gear>span:after{transition:transform .36s var(--ease-out)}
.fx .gear>span:nth-child(2) b:after,.fx .gear>span:nth-child(2):after{transition-delay:.16s}
.fx .gear>span:nth-child(3) b:after,.fx .gear>span:nth-child(3):after{transition-delay:.32s}
.fx .gear>span:nth-child(4) b:after,.fx .gear>span:nth-child(4):after{transition-delay:.48s}
.fx [data-gear]:not(.fx-in) b:after{opacity:0}
.fx [data-gear]:not(.fx-in)>span:after{transform:scaleX(0)}
.gear-light{max-width:none}
.gear-light>span{background:var(--paper-2)}
.gear-light b{color:#0d0d0d40}
.gear-light b:after{color:var(--red-text)}
.gear-light small{color:var(--ink)}
.gear-light .gear-ticks i{background:#0d0d0d55}

/* ---------- Quiet second option ---------- */
.quiet{padding:56px 0 72px}
.quiet-inner{max-width:720px}
.quiet h2{font:800 22px/1.25 var(--body);text-transform:none;letter-spacing:-.02em}
.quiet p{color:var(--muted);margin:8px 0 4px}
.quiet .text-link{color:var(--ink)}

/* ---------- Upsell / downsells ---------- */
.offer-hero{padding:72px 0 88px;min-height:calc(100dvh - 72px)}
.offer-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:'head card' 'list card';gap:28px 64px;align-items:start}
.offer-head{grid-area:head;align-self:end}
.offer-card{grid-area:card;align-self:center}
.offer-list{grid-area:list;display:grid;gap:10px}
.offer-h{font-size:min(clamp(46px,5.2vw,80px),calc((100vw - 40px)/8.4))}
.offer-h-one{font-size:min(clamp(44px,4.6vw,70px),calc((100vw - 40px)/13.6))}
.offer-lead{font-size:19px;color:#e2e2de;max-width:48ch;margin-top:22px}
.offer-list li{position:relative;padding-left:26px;font-size:16px;color:#d9d9d4;text-wrap:balance}
.offer-list li:before{content:'';position:absolute;left:0;top:.62em;width:14px;height:3px;background:var(--red)}
.offer-card{background:#f5f5f3;color:#0d0d0d;padding:30px;border-top:6px solid var(--gold)}
.offer-for{font-size:14px;color:#555}
.offer-anchor{font-size:16px;color:#555;margin-top:14px}
.offer-price{font:400 min(clamp(34px,3.4vw,46px),calc((100vw - 80px)/9.6))/1 var(--display);text-transform:uppercase;margin:8px 0 20px;min-height:56px;display:flex;align-items:center;flex-wrap:wrap;gap:0 .25em;text-wrap:balance}
.amt{position:relative;display:inline-block;white-space:nowrap}
.amt-was:after{content:'';position:absolute;left:-3px;right:-3px;top:54%;height:2px;background:var(--red);transform-origin:left center}
.fx .amt-was:after{transition:transform .4s var(--ease-out) .15s}
.fx .amt-now{transition:transform .5s var(--ease-out) .32s}
.fx [data-settle]:not(.fx-in) .amt-was:after{transform:scaleX(0)}
.fx [data-settle]:not(.fx-in) .amt-now{transform:translateY(-10px)}
.offer-forfeit{font-size:13px;color:#555;text-align:center;margin-top:16px}
.price-slot{display:inline-block;width:140px;height:48px;border:2px dashed #b5b5b0;background:repeating-linear-gradient(135deg,transparent 0 8px,#0000000a 8px 16px)}
.price-slot-sm{width:72px;height:22px;vertical-align:middle}
.offer-yes{width:100%;white-space:normal;text-align:center}
.offer-no{display:block;text-align:center;margin-top:10px;padding:12px 0;min-height:44px;font-size:15px;color:#333;text-decoration:underline;text-underline-offset:4px}
.offer-no:hover{color:var(--red-text)}

/* ---------- Confirmed ---------- */
.confirmed-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:56px;align-items:start}
.kit-start{margin-top:28px;padding:28px;background:var(--card);border:1px solid var(--line);border-top:6px solid var(--red)}
.kit-start h2{font-size:min(clamp(32px,3.4vw,46px),calc((100vw - 88px)/9))}
.kit-start p{font-size:16px;color:var(--muted);margin:12px 0 4px;max-width:54ch}
.kit-start .btn{margin-top:22px}
.confirmed .links{margin-top:18px}
.confirmed .text-link{color:var(--ink)}
.order-card{background:#0d0d0d;color:#fff;padding:28px 28px 22px;border-top:6px solid var(--gold)}
.order-card h2{font:400 30px/1 var(--display);text-transform:uppercase;margin-bottom:12px}
.order-items li,.order-total{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid #ffffff22;font-size:15px}
.order-items b,.order-total b{font-variant-numeric:tabular-nums}
.order-total{border-bottom:0;font-weight:800;font-size:17px}
.order-card .price-slot{border-color:#ffffff55;background:none}
.order-kit{font-size:13px;color:#c9c9c4;margin-top:6px}

/* ---------- Cards on the dark brand surface ---------- */
@media all{
  .invite-card,.offer-card{background:#1a1a1a;color:#fff}
  .card-label{color:#ff5560}
  .price-was{color:#a3a39d}
  .price-for{color:#d5d5cf}
  .invite-anchor,.invite-small,.offer-for,.offer-no,.offer-anchor,.offer-forfeit{color:#c4c4be}
  .demo-label-dark{color:#b4b4ae;border-top-color:#ffffff26}
  .price-slot{border-color:#66665f}
  .gear-light b{color:#ffffff40}
}

/* ---------- Responsive (phone first in behaviour: main button early, one idea per screen) ---------- */
@media (max-width:1024px){
  .host-band-grid,.confirmed-grid,.tools-head{grid-template-columns:1fr;gap:28px}
  .invite-grid{grid-template-columns:1fr;grid-template-areas:'head' 'card' 'kit';gap:32px}
  .invite-card{position:static;max-width:560px}
  .invite-again{display:block}
  .offer-grid{grid-template-columns:1fr;grid-template-areas:'head' 'card' 'list';gap:28px}
  .offer-card{max-width:560px}
  .faq-list{grid-template-columns:1fr}
  .tool-list li{grid-template-columns:150px minmax(0,1fr)}
  .tool-list p{grid-column:2}
}
@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr;gap:0;min-height:0}
  .hero-copy{padding:36px 0 28px}
  .hero h1.flag{font-size:clamp(34px,8.6vw,56px)}
  .hero-sub{margin:18px 0 22px}
  .hero-portrait{justify-self:center;max-width:400px;margin-top:4px}
}
@media (max-width:760px){
  .site-header{height:64px;gap:12px}
  .brand img{width:118px}
  .site-header .btn-sm{padding:10px 12px;font-size:13px;min-height:44px}
  .conf-logo{width:132px}
  .order-step{display:none}
  .tools,.faq{padding:64px 0}
  .host-band,.invite{padding:56px 0 64px}
  .closing{padding:80px 0}
  .tool-list{margin-top:32px}
  .tool-list li{grid-template-columns:1fr;gap:4px;padding:18px 0}
  .tool-list p{grid-column:auto}
  .confirm{padding:36px 0 32px}
  .modal{padding:0;place-items:end stretch}
  .modal-panel{width:100%;max-height:100dvh;padding:20px 20px 18px}
  .fx .modal.entering .modal-panel{transform:translateY(100%)}
  .modal-bar{margin-bottom:24px}
  .offer-hero{padding:36px 0 56px;min-height:0}
  .offer-lead{font-size:17px;margin-top:16px}
  .invite-card,.offer-card{padding:24px 20px 20px}
  .kit-start{padding:22px 20px}
  .cta-note{flex-basis:100%}
  .gear b{font-size:26px}
  .gear>span{padding:7px 7px 10px}
  .gear small{font-size:11px}
}
@media (max-width:420px){
  .btn{padding:15px 20px;gap:12px}
  .hero-actions{gap:4px 20px}
}
@media (max-width:359px){
  .brand img{width:96px}
  .site-header .btn-sm{padding:8px 10px;font-size:12px}
  .hero h1.flag{font-size:32px}
  .btn{white-space:normal;text-align:left}
  .gear small{font-size:10px}
}

/* Reduced motion: no drift, no entrances, no settle. Everything shows in its finished state.
   The spinner keeps turning slowly because it is the only status cue during a pending tap (its text label also changes). */
@media (prefers-reduced-motion:reduce){
  .facets i,.motion-on .hero-copy>*,.fx .q.q-in-fwd,.fx .q.q-in-back{animation:none!important}
  .btn,.btn .ico,.modal-bar i{transition:none}
  .spin{animation-duration:1.6s}
}
@media print{.facets,.motion-toggle,.site-header{display:none}}

/* =====================================================================
   Miami Marketer brand layer (2026-10-05): live-site component shapes on the funnel.
   ===================================================================== */
h1,h2{font-weight:400}
::selection{background:var(--red);color:#fff}
.hero h1 em,.flag-b,.gradient-text{background:var(--gradient-accent);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 2px 6px rgba(252,3,17,.35));width:fit-content}
.btn{border-radius:999px;font:800 15px/1.2 var(--body);padding:16px 28px;min-height:54px}
.btn-red{background:var(--gradient-red);color:#fff;box-shadow:0 8px 24px rgba(252,3,17,.3)}
.btn-red:disabled{background:var(--gradient-red);opacity:.75}
@media (hover:hover) and (pointer:fine){.btn-red:hover:not(:disabled){background:var(--gradient-red);box-shadow:0 12px 32px rgba(252,3,17,.45)}}
.btn-sm{min-height:44px;padding:10px 20px;font-size:13.5px}
.btn-ghost,.btn-line,.btn-dark,.btn-outline{border-radius:999px;background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff}
.invite-card,.offer-card,.kit-start,.modal-panel,.order-card,.kit-grid li,.tool,.faq-list div,.checkout,.co-panel{border-radius:16px}
.modal-panel{background:#141414;border-top:0;box-shadow:0 30px 80px -30px #000,inset 0 3px 0 var(--red)}
.q input,.q textarea,.q select{border-radius:12px}
.site-header{background:rgba(13,13,13,.88)}
.invite-card,.kit-start{border-top:0;box-shadow:inset 0 3px 0 var(--red)}
.offer-card,.order-card{border-top:0;box-shadow:inset 0 3px 0 var(--gold)}
.invite-card,.offer-card,.kit-start{border:1px solid rgba(255,255,255,.08)}

/* Dead space (2026-10-05): this block sat in a 720px box that the 1320px gutter squeezed to a 40px column at 2000px. Centered statement now. */
.quiet-inner{max-width:none;text-align:center}
.quiet p{max-width:56ch;margin-left:auto;margin-right:auto}
/* Welcome: the "Your seat is saved." confirmation is a statement with nothing beside it, so it is centered (confirmed page keeps its two-column grid). */
.confirm>.wrap:not(.confirmed-grid){text-align:center;display:flex;flex-direction:column;align-items:center}
.confirm>.wrap:not(.confirmed-grid) .confirm-sub{margin-left:auto;margin-right:auto}
.confirm>.wrap:not(.confirmed-grid) .links{justify-content:center}
/* Design QA 2026-10-06: headers with nothing beside them are centered (the list below spans the full width) */
.tools-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.tools-lede{margin:0 auto}
.faq h2{text-align:center}