/* Immortal Edge checkout. Same system as the Rank Up Challenge page, in icy blue on black. Checkout styles are at the bottom. */
:root{
  --bg:#050506; --bg-2:#08090b; --card:#0c0d10; --card-2:#101216;
  --line:rgba(143,197,242,.12); --line-2:rgba(143,197,242,.24); --line-3:rgba(143,197,242,.42);
  --hair:rgba(255,255,255,.07); --hair-2:rgba(255,255,255,.12);
  --text:#f4f5f7; --soft:#d0d4dc; --muted:#9097a6; --muted-2:#6a7080;
  --ice-1:#E4F2FE; --ice-2:#9ED2F8; --ice-3:#6BB0EC; --ice-4:#3F84C9;
  --ice-grad:linear-gradient(95deg,#4F97DC 0%,#8FC5F2 38%,#D9EDFD 50%,#7EB8EE 64%,#4C8FE0 100%);
  --ice-solid:linear-gradient(135deg,#D9EDFD 0%,#8FC5F2 45%,#4F97DC 100%);
  --ice-text:linear-gradient(100deg,#5E9FE0 0%,#A9D6F9 34%,#EAF6FF 52%,#8FC5F2 72%,#4F97DC 100%);
  --silver-text:linear-gradient(100deg,#7c7f88 0%,#c9ccd3 28%,#ffffff 52%,#eef0f4 70%,#b3b7c1 100%);
  --ink:#04121f;
  --serif:"Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, system-ui, sans-serif;
  --wrap:1200px;
  --ease:cubic-bezier(.22,.7,.2,1);
  --float:0 50px 110px -46px rgba(0,0,0,1), 0 24px 50px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.55);
}
*{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button, input, select, textarea{ font:inherit; color:inherit; }
::selection{ background:rgba(143,197,242,.3); }
a, button, summary{ -webkit-tap-highlight-color:rgba(143,197,242,.14); }
:focus-visible{ outline:2px solid var(--ice-2); outline-offset:3px; border-radius:8px; }

/* the spacey black: a faint icy grid and two slow cold glows, fixed behind everything */
.space{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.space .grid{ position:absolute; inset:0; background-image:linear-gradient(rgba(143,197,242,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(143,197,242,.04) 1px,transparent 1px); background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 85% 65% at 50% 0%,#000 15%,transparent 78%); mask-image:radial-gradient(ellipse 85% 65% at 50% 0%,#000 15%,transparent 78%); }
.space .g1{ position:absolute; top:-26vh; left:50%; width:130vw; height:90vh; margin-left:-65vw; background:radial-gradient(ellipse 45% 55% at 50% 0%,rgba(79,151,220,.16),transparent 70%); }
.space .g2{ position:absolute; top:10vh; right:-18vw; width:60vw; height:70vh; background:radial-gradient(closest-side,rgba(143,197,242,.07),transparent); animation:drift 26s ease-in-out infinite alternate; }
@keyframes drift{ to{ transform:translate(-8vw,6vh); } }

/* layout: .sec owns vertical padding, .wrap owns horizontal. Never both on one shorthand. */
.sec{ position:relative; padding-top:clamp(28px,5vw,72px); padding-bottom:clamp(28px,5vw,72px); }
.wrap{ max-width:var(--wrap); margin-left:auto; margin-right:auto; padding-left:clamp(20px,5vw,40px); padding-right:clamp(20px,5vw,40px); position:relative; }
.center{ text-align:center; }

/* type */
h1,h2,h3{ font-family:var(--serif); font-weight:400; letter-spacing:-.012em; line-height:1.02; text-wrap:balance; }
.silver{ background:var(--silver-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; padding-bottom:.14em; }
.ice, h1 em, h2 em{ background:var(--ice-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; padding-bottom:.14em; }
h1 em, h2 em{ font-style:italic; padding-right:.06em; }
.h2{ font-size:clamp(40px,5.4vw,70px); }
.kicker{ display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--ice-2); margin-bottom:18px; }
.kicker::before{ content:""; width:18px; height:1px; background:var(--ice-2); box-shadow:0 0 10px var(--ice-2); }
.center .kicker::after, .final .kicker::after{ content:""; width:18px; height:1px; background:var(--ice-2); box-shadow:0 0 10px var(--ice-2); }
.lead{ color:var(--soft); font-size:clamp(15.5px,1.6vw,17.5px); line-height:1.7; max-width:60ch; margin-top:20px; }
.center .lead{ margin-left:auto; margin-right:auto; }

/* buttons */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px; height:58px; padding-left:34px; padding-right:34px; border:0; border-radius:12px; cursor:pointer; overflow:hidden;
  font-family:var(--sans); font-size:15px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); background:var(--ice-grad);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(12,52,100,.3), 0 16px 40px -14px rgba(79,151,220,.6);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s; }
.btn:hover{ transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 0 rgba(12,52,100,.3), 0 24px 54px -14px rgba(79,151,220,.78); }
.btn:active{ transform:translateY(0); }
.btn .ar{ transition:transform .2s var(--ease); }
.btn:hover .ar{ transform:translateX(4px); }
.btn[disabled]{ cursor:default; filter:saturate(.6) brightness(.85); transform:none; }
.btn.ghost{ color:var(--text); background:rgba(255,255,255,.02); border:1px solid var(--hair-2); box-shadow:none; }
.btn.ghost:hover{ border-color:var(--line-3); background:rgba(143,197,242,.06); }
.btn.full{ width:100%; }
.btn .spin{ display:none; width:18px; height:18px; border-radius:50%; border:2px solid rgba(4,18,31,.25); border-top-color:var(--ink); animation:spin .8s linear infinite; }
.btn.busy .spin{ display:block; }
.btn.busy .lbl, .btn.busy .ar{ display:none; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.note{ margin-top:14px; font-size:13px; color:var(--muted-2); }

/* nav */
.nav{ position:sticky; top:0; z-index:60; background:rgba(5,5,6,.72); -webkit-backdrop-filter:saturate(150%) blur(14px); backdrop-filter:saturate(150%) blur(14px); border-bottom:1px solid var(--hair); }
.nav .in{ display:flex; align-items:center; justify-content:space-between; height:66px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ width:34px; height:34px; border-radius:50%; object-fit:cover; }
.brand .wm{ font-family:var(--serif); font-size:21px; letter-spacing:.005em; }
.brand .wm i{ color:var(--ice-2); }
.nav .btn{ height:42px; padding-left:20px; padding-right:20px; font-size:12.5px; border-radius:10px; }

/* ------------------------------------------------------------------ HERO */
.hero{ padding-top:clamp(28px,5vw,64px); padding-bottom:clamp(40px,6vw,80px); }
.hero .wrap{ display:grid; grid-template-columns:minmax(0,1fr) 500px; gap:clamp(36px,5vw,72px); align-items:center; }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; height:36px; padding-left:14px; padding-right:16px; border-radius:999px; border:1px solid var(--line-2); background:rgba(143,197,242,.05);
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ice-1); white-space:nowrap; }
.eyebrow i{ width:7px; height:7px; border-radius:50%; background:#ff4d5e; box-shadow:0 0 0 4px rgba(255,77,94,.16), 0 0 12px #ff4d5e; animation:live 1.6s ease-in-out infinite; }
@keyframes live{ 50%{ opacity:.45; box-shadow:0 0 0 7px rgba(255,77,94,.04), 0 0 16px #ff4d5e; } }
.hero h1{ margin-top:26px; font-size:clamp(46px,5.6vw,80px); }
.hero .sub{ margin-top:24px; max-width:52ch; color:var(--soft); font-size:clamp(16px,1.5vw,18px); line-height:1.7; }
.hero .sub .short{ display:none; }
.ticks{ list-style:none; margin-top:28px; display:grid; gap:12px; }
.ticks li{ display:flex; align-items:center; gap:12px; font-size:15px; }
.ticks li span{ width:22px; height:22px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--ice-solid); color:var(--ink); box-shadow:0 6px 16px -6px rgba(79,151,220,.7); }

/* countdown */
.count{ display:flex; gap:10px; margin-top:32px; }
.count-lbl{ margin-top:30px; font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ice-2); }
.count-lbl + .count{ margin-top:12px; }
.ticks li em{ font-style:normal; }

/* the free deadline strip inside the ticket card */
.deadline{ display:flex; align-items:center; gap:10px; min-height:40px; margin-top:16px; margin-left:28px; margin-right:28px; padding-left:14px; padding-right:14px; border-radius:11px;
  border:1px solid var(--line-2); background:rgba(143,197,242,.05); font-size:13px; color:var(--soft); }
.dl-dot{ width:7px; height:7px; flex:none; border-radius:50%; background:#ff4d5e; box-shadow:0 0 0 4px rgba(255,77,94,.16), 0 0 12px #ff4d5e; animation:live 1.6s ease-in-out infinite; }
.dl-text b{ color:var(--text); font-weight:600; }
.dl-short{ display:none; }
.dl-time{ margin-left:auto; flex:none; font-weight:700; color:var(--ice-1); font-variant-numeric:tabular-nums; }
.free-closed .dl-dot{ background:var(--ice-2); box-shadow:0 0 12px var(--ice-2); animation:none; }
.tier.closed{ opacity:.42; cursor:not-allowed; }
.tier.closed:hover{ border-color:var(--hair-2); }
.tclose{ display:inline-flex; align-items:center; gap:8px; margin-top:12px; font-size:12.5px; font-weight:600; color:var(--ice-2); }
.tclose i{ width:6px; height:6px; border-radius:50%; background:#ff4d5e; box-shadow:0 0 10px #ff4d5e; }
.free-closed .tclose i{ background:var(--muted-2); box-shadow:none; }
.count div{ width:78px; padding-top:12px; padding-bottom:10px; border-radius:14px; border:1px solid var(--line-2); background:linear-gradient(180deg,var(--card-2),var(--bg-2)); text-align:center; box-shadow:0 20px 40px -26px rgba(0,0,0,1); }
.count b{ display:block; font-family:var(--serif); font-weight:400; font-size:34px; line-height:1; color:var(--ice-1); font-variant-numeric:tabular-nums; }
.count small{ display:block; margin-top:6px; font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); }
.count.big{ justify-content:center; margin-top:36px; }
.count.big div{ width:clamp(70px,12vw,112px); padding-top:18px; padding-bottom:14px; }
.count.big b{ font-size:clamp(36px,5vw,58px); }
.count.live b{ color:#ff8f9a; }

/* ------------------------------------------------------------- TICKET */
.tixwrap{ position:relative; }
.tixwrap::before{ content:""; position:absolute; left:6%; right:6%; top:10%; bottom:-4%; border-radius:50%; background:radial-gradient(closest-side,rgba(79,151,220,.22),transparent); filter:blur(30px); z-index:-1; }
.tix{ position:relative; border-radius:24px; border:1px solid var(--line-2); background:linear-gradient(180deg,#0f1217,#08090c 62%); box-shadow:var(--float); scroll-margin-top:86px; transition:box-shadow .5s var(--ease), border-color .5s; }
.tix::before{ content:""; position:absolute; top:-1px; left:50%; width:220px; height:2px; margin-left:-110px; border-radius:2px; background:linear-gradient(90deg,transparent,var(--ice-1),transparent); box-shadow:0 0 22px rgba(143,197,242,.9); }
.tix.pulse{ border-color:var(--line-3); box-shadow:var(--float), 0 0 0 6px rgba(143,197,242,.08), 0 0 80px -20px rgba(79,151,220,.6); }
.tx-head{ display:flex; align-items:center; gap:16px; padding-top:26px; padding-left:28px; padding-right:28px; }
.tx-head img{ width:50px; height:50px; flex:none; border-radius:50%; border:1px solid var(--line-2); box-shadow:0 0 0 4px rgba(143,197,242,.06); }
.tx-kick{ display:block; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ice-2); }
.tx-title{ font-family:var(--serif); font-size:32px; line-height:1.1; margin-top:4px; }

.tiers{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-top:20px; padding-left:28px; padding-right:28px; }
.tier{ position:relative; text-align:left; border-radius:14px; border:1px solid var(--hair-2); background:rgba(255,255,255,.015); padding-top:14px; padding-bottom:13px; padding-left:15px; padding-right:15px; cursor:pointer; transition:border-color .25s, background .25s, box-shadow .25s; }
.tier:hover{ border-color:var(--line-2); }
.tier .t-top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.tier b{ font-size:14.5px; font-weight:600; }
.tier .px{ font-family:var(--serif); font-size:24px; line-height:1; color:var(--soft); }
.tier small{ display:block; margin-top:4px; font-size:12px; color:var(--muted); }
.tier.on{ border-color:var(--ice-2); background:rgba(143,197,242,.08); box-shadow:0 0 0 1px var(--ice-2) inset, 0 14px 30px -18px rgba(79,151,220,.7); }
.tier.on .px{ color:var(--ice-1); }
.tier .badge{ position:absolute; top:-10px; right:12px; height:20px; display:flex; align-items:center; padding-left:9px; padding-right:9px; border-radius:999px; background:var(--ice-grad); color:var(--ink); font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }

/* VIP perks: folded away until VIP is picked, then slides open under the toggle */
.vperks{ display:grid; grid-template-rows:0fr; opacity:0; padding-left:28px; padding-right:28px; transition:grid-template-rows .45s var(--ease), opacity .35s var(--ease); }
.vperks > div{ overflow:hidden; min-height:0; }
.tix[data-tier="vip"] .vperks{ grid-template-rows:1fr; opacity:1; }
.vperks-card{ margin-top:14px; padding-top:16px; padding-bottom:16px; padding-left:18px; padding-right:18px; border-radius:14px; border:1px solid var(--line-2);
  background:radial-gradient(ellipse 90% 140% at 100% 0%,rgba(143,197,242,.11),transparent 60%), rgba(143,197,242,.035); }
.vperks-h{ font-family:var(--serif); font-size:19px; line-height:1.2; color:var(--text); }
.vperks-h em{ font-style:italic; background:var(--ice-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; padding-right:.06em; }
.vperks ul{ list-style:none; margin-top:11px; display:grid; grid-template-columns:1fr 1fr; gap:7px 18px; }
.vperks li{ position:relative; padding-left:17px; font-size:13px; line-height:1.45; color:var(--soft); }
.vperks li::before{ content:"\2726"; position:absolute; left:0; top:1px; font-size:9.5px; line-height:1.9; color:var(--ice-2); text-shadow:0 0 8px rgba(143,197,242,.8); }
.tx-form{ padding-top:20px; padding-bottom:26px; padding-left:28px; padding-right:28px; }
.fld{ position:relative; display:block; margin-bottom:14px; }
.fld > label{ display:block; font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--soft); margin-bottom:7px; }
.fld > label em{ font-style:normal; font-weight:400; color:var(--muted-2); }
.fld input{ width:100%; height:50px; padding-left:15px; padding-right:15px; border-radius:12px; border:1px solid var(--hair-2); background:#07080a; font-size:15.5px; color:var(--text); transition:border-color .2s, box-shadow .2s; }
.fld input::placeholder{ color:#4f5561; }
.fld input:focus{ outline:none; border-color:var(--ice-2); box-shadow:0 0 0 4px rgba(143,197,242,.13); }
.fld.bad input, .fld.bad .phone{ border-color:#d6606e; }
.fld .err{ display:none; margin-top:6px; font-size:12.5px; color:#f09aa4; }
.fld.bad .err{ display:block; }
.suggest{ margin-top:7px; border:0; background:none; cursor:pointer; font-size:12.5px; color:var(--ice-2); text-decoration:underline; text-underline-offset:3px; padding:0; }

/* phone with country */
.phone{ display:flex; align-items:stretch; height:50px; border-radius:12px; border:1px solid var(--hair-2); background:#07080a; transition:border-color .2s, box-shadow .2s; }
.phone:focus-within{ border-color:var(--ice-2); box-shadow:0 0 0 4px rgba(143,197,242,.13); }
.phone .cc{ display:flex; align-items:center; gap:8px; flex:none; padding-left:13px; padding-right:11px; border:0; border-right:1px solid var(--hair-2); background:transparent; cursor:pointer; font-size:14.5px; font-weight:600; color:var(--soft); border-radius:12px 0 0 12px; transition:background .2s; }
.phone .cc:hover{ background:rgba(143,197,242,.06); }
.phone .cc img{ width:22px; height:15px; border-radius:3px; object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,.12); }
.phone .cc svg{ color:var(--muted-2); }
.phone input{ flex:1; min-width:0; height:auto; border:0; background:transparent; box-shadow:none !important; border-radius:0 12px 12px 0; padding-left:13px; letter-spacing:.02em; }
.phone .okmark{ display:flex; align-items:center; justify-content:center; width:22px; height:22px; margin-top:auto; margin-bottom:auto; margin-right:12px; flex:none; border-radius:50%; background:var(--ice-solid); color:var(--ink); transform:scale(0); transition:transform .3s var(--ease); }
.fld.good .okmark{ transform:scale(1); }
.ccpop{ position:absolute; left:0; right:0; top:84px; z-index:20; border-radius:14px; border:1px solid var(--line-2); background:#0c0e12; box-shadow:0 30px 60px -20px rgba(0,0,0,1); overflow:hidden; animation:pop .2s var(--ease); }
@keyframes pop{ from{ opacity:0; transform:translateY(-6px); } }
.ccpop input{ width:100%; height:46px; border:0; border-bottom:1px solid var(--hair); background:transparent; padding-left:15px; padding-right:15px; font-size:14.5px; color:var(--text); }
.ccpop input:focus{ outline:none; }
.cclist{ max-height:264px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(143,197,242,.3) transparent; }
.ccopt{ display:flex; align-items:center; gap:12px; width:100%; height:42px; padding-left:15px; padding-right:15px; border:0; background:transparent; cursor:pointer; text-align:left; font-size:14px; color:var(--soft); }
.ccopt img{ width:22px; height:15px; border-radius:3px; object-fit:cover; flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.1); }
.ccopt span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ccopt em{ font-style:normal; color:var(--muted-2); font-variant-numeric:tabular-nums; }
.ccopt:hover, .ccopt.act{ background:rgba(143,197,242,.08); color:var(--text); }
.ccopt.sel em{ color:var(--ice-2); }
.cclist .sep{ height:1px; background:var(--hair); margin-top:4px; margin-bottom:4px; }
/* instagram with a fixed @ in front */
.igin{ display:flex; align-items:stretch; height:50px; border-radius:12px; border:1px solid var(--hair-2); background:#07080a; transition:border-color .2s, box-shadow .2s; }
.igin:focus-within{ border-color:var(--ice-2); box-shadow:0 0 0 4px rgba(143,197,242,.13); }
.igin span{ display:flex; align-items:center; padding-left:15px; font-size:15.5px; font-weight:600; color:var(--ice-2); }
.igin input{ flex:1; min-width:0; height:auto; border:0; background:transparent; box-shadow:none !important; padding-left:4px; }
.fld.bad .igin{ border-color:#d6606e; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.vipnote{ display:none; align-items:flex-start; gap:10px; margin-top:4px; margin-bottom:14px; padding-top:12px; padding-bottom:12px; padding-left:14px; padding-right:14px; border-radius:12px; border:1px solid var(--line-2); background:rgba(143,197,242,.06); font-size:13px; line-height:1.55; color:var(--soft); }
.vipnote svg{ flex:none; margin-top:1px; color:var(--ice-2); }
.tix[data-tier="vip"] .vipnote{ display:flex; animation:pop .3s var(--ease); }
.formmsg{ display:none; margin-bottom:14px; padding-top:12px; padding-bottom:12px; padding-left:14px; padding-right:14px; border-radius:12px; border:1px solid rgba(214,96,110,.4); background:rgba(214,96,110,.08); font-size:13.5px; color:#f5b8bf; }
.formmsg.on{ display:block; }
.tx-form .btn{ margin-top:6px; }
.fine{ margin-top:12px; font-size:12.5px; color:var(--muted-2); text-align:center; }

/* ------------------------------------------------------------ MARQUEE */
.marq{ border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); overflow:hidden; padding-top:22px; padding-bottom:22px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marq .tr{ display:flex; gap:48px; width:max-content; animation:marq 38s linear infinite; }
.marq span{ display:inline-flex; align-items:center; gap:48px; font-family:var(--serif); font-size:26px; color:var(--soft); white-space:nowrap; }
.marq span::after{ content:"\2726"; font-family:var(--sans); font-size:13px; color:var(--ice-2); }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ---------------------------------------------------------- CARDS */
.card{ position:relative; border-radius:20px; border:1px solid var(--hair); background:linear-gradient(180deg,var(--card-2),var(--bg-2)); box-shadow:0 34px 70px -44px rgba(0,0,0,1);
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.card::before{ content:""; position:absolute; top:-1px; left:28px; width:34px; height:2px; border-radius:2px; background:var(--ice-2); box-shadow:0 0 14px rgba(143,197,242,.9); }
@media (hover:hover){ .js .card.in:hover{ transform:translateY(-4px); border-color:var(--line-2); box-shadow:0 44px 80px -40px rgba(0,0,0,1), 0 0 50px -30px rgba(79,151,220,.5); } }

.proofsec{ padding-top:clamp(40px,6vw,72px); }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.stat{ padding-top:26px; padding-bottom:24px; padding-left:24px; padding-right:24px; }
.stat b{ display:block; font-family:var(--serif); font-weight:400; font-size:clamp(30px,3vw,40px); line-height:1.05; }
.stat span{ display:block; margin-top:8px; font-size:13.5px; color:var(--muted); }

.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:56px; }
.pillar{ padding-top:32px; padding-bottom:32px; padding-left:30px; padding-right:30px; }
.pic{ width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center; color:var(--ice-1); border:1px solid var(--line-2);
  background:radial-gradient(circle at 30% 25%,rgba(143,197,242,.16),rgba(143,197,242,.02)); box-shadow:0 14px 30px -18px rgba(79,151,220,.8); }
.pillar h3{ font-size:28px; margin-top:22px; }
.pillar p{ margin-top:10px; color:var(--muted); font-size:15px; line-height:1.7; }

/* method */
.phases{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:64px; }
.phases::before{ content:""; position:absolute; top:28px; left:16%; right:16%; height:1px; background:linear-gradient(90deg,transparent,var(--line-3),var(--line-3),transparent); }
.phase{ text-align:center; display:flex; flex-direction:column; }
.orb{ position:relative; z-index:1; width:56px; height:56px; margin-left:auto; margin-right:auto; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:26px; color:var(--ice-1);
  background:radial-gradient(circle at 30% 25%,#18202a,#07080a); border:1px solid var(--line-3); box-shadow:0 0 0 8px var(--bg), 0 0 40px -8px rgba(79,151,220,.6); }
.phase .name{ margin-top:18px; font-family:var(--serif); font-size:38px; }
.phase .card{ flex:1; margin-top:20px; padding-top:28px; padding-bottom:28px; padding-left:28px; padding-right:28px; }
.phase .card::before{ left:50%; margin-left:-17px; }
.phase p{ color:var(--muted); font-size:15.5px; line-height:1.7; }
.ctarow{ margin-top:48px; text-align:center; }

/* wins */
.wins{ display:grid; grid-template-columns:1.1fr .9fr; grid-template-areas:"a b" "c d"; gap:18px; margin-top:56px; align-items:start; }
.win{ margin:0; border-radius:18px; overflow:hidden; border:1px solid var(--line-2); background:#0b0d11; box-shadow:var(--float); transition:transform .5s var(--ease); }
.win img{ width:100%; height:auto; }
.w1{ grid-area:a; } .w2{ grid-area:b; margin-top:36px; } .w3{ grid-area:c; } .w4{ grid-area:d; margin-top:-20px; }
@media (hover:hover){ .js .win.in:hover{ transform:translateY(-6px) rotate(-.3deg); } }

/* tiers */
.tiergrid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:52px; align-items:stretch; }
.tcard{ display:flex; flex-direction:column; padding-top:34px; padding-bottom:32px; padding-left:32px; padding-right:32px; }
.tcard.pro{ border-color:var(--line-3); background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(143,197,242,.1),transparent 70%), linear-gradient(170deg,#121820,#08090c 72%);
  box-shadow:var(--float), 0 0 70px -30px rgba(79,151,220,.55); }
.tbadge{ position:absolute; top:-12px; right:26px; height:24px; display:flex; align-items:center; padding-left:12px; padding-right:12px; border-radius:999px; background:var(--ice-grad); color:var(--ink); font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; box-shadow:0 10px 26px -10px rgba(79,151,220,.8); }
.tname{ font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ice-2); }
.tprice{ display:flex; align-items:baseline; gap:10px; margin-top:12px; }
.tprice b{ font-family:var(--serif); font-weight:400; font-size:60px; line-height:1; }
.tprice small{ font-size:13px; color:var(--muted); }
.tline{ margin-top:12px; font-size:15px; color:var(--soft); padding-bottom:22px; border-bottom:1px solid var(--hair); }
.tlist{ list-style:none; margin-top:22px; margin-bottom:28px; flex:1; }
.tlist li{ position:relative; padding-left:30px; margin-bottom:14px; font-size:15px; line-height:1.6; color:var(--soft); }
.tlist li::before{ content:""; position:absolute; left:3px; top:6px; width:11px; height:6px; border-left:2px solid var(--ice-2); border-bottom:2px solid var(--ice-2); transform:rotate(-45deg); }

/* sound familiar */
.quotes{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:52px; }
.quote{ padding-top:28px; padding-bottom:28px; padding-left:30px; padding-right:30px; display:flex; gap:16px; align-items:flex-start; }
.quote .qm{ flex:none; margin-top:4px; color:var(--ice-2); filter:drop-shadow(0 0 10px rgba(143,197,242,.5)); }
.quote p{ font-family:var(--serif); font-size:26px; line-height:1.25; color:var(--text); }
.who{ margin-top:18px; text-align:center; font-size:13px; color:var(--muted-2); }
.truth{ display:flex; gap:22px; align-items:flex-start; max-width:860px; margin-top:34px; margin-left:auto; margin-right:auto; padding-top:30px; padding-bottom:30px; padding-left:32px; padding-right:32px; border-radius:20px;
  border:1px solid var(--line-2); background:radial-gradient(ellipse 70% 120% at 0% 0%,rgba(143,197,242,.09),transparent 60%), #090b0e; box-shadow:var(--float); }
.truth .bulb{ width:52px; height:52px; flex:none; border-radius:15px; display:flex; align-items:center; justify-content:center; color:var(--ice-1); border:1px solid var(--line-2); background:rgba(143,197,242,.08); }
.truth p{ font-size:16.5px; line-height:1.72; color:var(--soft); }
.truth b{ color:var(--text); font-weight:600; }

/* founder */
.founder{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(40px,6vw,88px); align-items:center; }
.emblem{ position:relative; aspect-ratio:1; max-width:440px; width:100%; margin-left:auto; margin-right:auto; display:flex; align-items:center; justify-content:center; }
.emblem .ring{ position:absolute; border-radius:50%; border:1px solid var(--line); }
.emblem .r1{ inset:0; }
.emblem .r2{ inset:12%; border-color:var(--line-2); }
.emblem .r3{ inset:24%; border-color:var(--line-3); box-shadow:var(--float), 0 0 90px -30px rgba(79,151,220,.6); }
.emblem img{ position:relative; width:52%; border-radius:50%; box-shadow:0 30px 60px -20px rgba(0,0,0,1); animation:bob 7s ease-in-out infinite; }
@keyframes bob{ 50%{ transform:translateY(-8px); } }
.emblem .sat{ position:absolute; width:12px; height:12px; border-radius:50%; background:var(--ice-solid); box-shadow:0 0 16px rgba(143,197,242,.9); }
.emblem .spin1{ position:absolute; inset:0; animation:orbit 30s linear infinite; }
.emblem .spin2{ position:absolute; inset:12%; animation:orbit 22s linear infinite reverse; }
.emblem .spin1 .sat{ top:-6px; left:50%; margin-left:-6px; }
.emblem .spin2 .sat{ bottom:-4px; left:50%; margin-left:-4px; width:8px; height:8px; }
@keyframes orbit{ to{ transform:rotate(360deg); } }
.founder p.body{ margin-top:22px; color:var(--soft); font-size:16.5px; line-height:1.78; }
.founder p.body b{ color:var(--text); font-weight:600; }
.fstats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:28px; }
.fstats div{ border-radius:14px; border:1px solid var(--hair-2); padding-top:16px; padding-bottom:14px; padding-left:16px; padding-right:16px; background:rgba(255,255,255,.015); }
.fstats b{ display:block; font-family:var(--serif); font-weight:400; font-size:30px; line-height:1.05; }
.fstats span{ display:block; margin-top:4px; font-size:12.5px; color:var(--muted); }
.fquote{ margin-top:26px; font-family:var(--serif); font-style:italic; font-size:26px; color:var(--ice-1); }

/* honest answer */
.honest{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,6vw,80px); align-items:start; }
.honest .stick{ position:sticky; top:110px; }
.honest .lead{ margin-top:18px; }
.alist{ display:grid; gap:14px; }
.aitem{ display:flex; gap:22px; padding-top:26px; padding-bottom:26px; padding-left:28px; padding-right:28px; border-radius:18px; border:1px solid var(--hair); background:linear-gradient(180deg,var(--card-2),var(--bg-2)); }
.aitem .n{ font-family:var(--serif); font-size:40px; line-height:1; flex:none; width:48px; }
.aitem h3{ font-size:26px; }
.aitem p{ margin-top:8px; color:var(--muted); font-size:15px; line-height:1.7; }
.notfor{ margin-top:14px; padding-top:26px; padding-bottom:26px; padding-left:28px; padding-right:28px; border-radius:18px; border:1px dashed var(--line-2); }
.notfor h4{ font-size:16px; font-weight:600; line-height:1.45; }
.notfor p{ margin-top:10px; font-size:14.5px; line-height:1.7; color:var(--muted); }

/* how it works */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:56px; }
.step{ padding-top:34px; padding-bottom:34px; padding-left:32px; padding-right:32px; }
.step .big{ font-family:var(--serif); font-size:72px; line-height:.9; }
.step h3{ font-size:28px; margin-top:20px; }
.step p{ margin-top:10px; font-size:15px; line-height:1.7; color:var(--muted); }

/* faq */
.faq{ max-width:840px; margin-top:52px; margin-left:auto; margin-right:auto; display:grid; gap:10px; }
.faq details{ border-radius:16px; border:1px solid var(--hair); background:linear-gradient(180deg,var(--card-2),var(--bg-2)); transition:border-color .3s; }
.faq details[open]{ border-color:var(--line-2); }
.faq summary{ list-style:none; cursor:pointer; position:relative; padding-top:22px; padding-bottom:22px; padding-left:26px; padding-right:64px; font-size:16.5px; font-weight:500; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary i{ position:absolute; right:22px; top:50%; width:26px; height:26px; margin-top:-13px; border-radius:50%; border:1px solid var(--line-2); }
.faq summary i::before, .faq summary i::after{ content:""; position:absolute; left:50%; top:50%; width:10px; height:1.5px; margin-left:-5px; margin-top:-.75px; background:var(--ice-2); transition:transform .3s var(--ease); }
.faq summary i::after{ transform:rotate(90deg); }
.faq details[open] summary i::after{ transform:rotate(0); }
.faq .a{ padding-bottom:24px; padding-left:26px; padding-right:64px; color:var(--muted); font-size:15px; line-height:1.72; }

/* final */
.final{ text-align:center; padding-top:clamp(28px,5vw,72px); }
.final .panel{ position:relative; border-radius:28px; border:1px solid var(--line-2); background:radial-gradient(ellipse 60% 90% at 50% 0%,rgba(79,151,220,.14),transparent 70%), #07080b; box-shadow:var(--float);
  padding-top:clamp(56px,8vw,96px); padding-bottom:clamp(56px,8vw,96px); padding-left:clamp(22px,5vw,64px); padding-right:clamp(22px,5vw,64px); overflow:hidden; }
.final .panel::before{ content:""; position:absolute; top:-1px; left:50%; width:260px; height:2px; margin-left:-130px; background:linear-gradient(90deg,transparent,var(--ice-1),transparent); box-shadow:0 0 22px rgba(143,197,242,.9); }
.final h2{ font-size:clamp(44px,6vw,84px); max-width:16ch; margin-left:auto; margin-right:auto; }
.final .btnrow{ margin-top:36px; }

footer{ padding-top:56px; padding-bottom:56px; text-align:center; border-top:1px solid var(--hair); margin-top:clamp(56px,9vw,120px); }
footer .brand{ justify-content:center; }
footer .brand .wm{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
footer p{ max-width:70ch; margin-top:18px; margin-left:auto; margin-right:auto; font-size:12.5px; line-height:1.7; color:var(--muted-2); }

/* phone: sticky bar */
.dock{ position:fixed; left:12px; right:12px; bottom:12px; z-index:70; display:none; transform:translateY(140%); transition:transform .4s var(--ease); }
.dock .btn{ width:100%; height:54px; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 20px 50px -10px rgba(0,0,0,.9), 0 12px 30px -10px rgba(79,151,220,.6); }
.dock.on{ transform:none; }

/* reveal */
.js .rv{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .rv.in{ opacity:1; transform:none; }
.js .rv.d1{ transition-delay:.08s; } .js .rv.d2{ transition-delay:.16s; } .js .rv.d3{ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){
  .js .rv{ opacity:1 !important; transform:none !important; }
  .marq .tr, .space .g2, .emblem img, .emblem .spin1, .emblem .spin2, .eyebrow i{ animation:none; transition:none; }
}

/* ------------------------------------------------------------ RESPONSIVE */
@media (max-width:1080px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero .copy{ text-align:center; }
  .hero .sub{ margin-left:auto; margin-right:auto; }
  .ticks{ justify-content:center; }
  .ticks li{ justify-content:center; }
  .count{ justify-content:center; }
  .tixwrap{ max-width:540px; width:100%; margin-left:auto; margin-right:auto; }
  .stats{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .pillars{ grid-template-columns:1fr 1fr; }
  .steps, .tiergrid{ grid-template-columns:1fr; }
  .phases{ grid-template-columns:1fr; gap:40px; }
  .phases::before{ top:0; bottom:0; left:50%; right:auto; width:1px; height:auto; background:linear-gradient(180deg,transparent,var(--line-2) 10%,var(--line-2) 90%,transparent); }
  .founder, .honest{ grid-template-columns:1fr; }
  .honest .stick{ position:static; }
  .emblem{ max-width:300px; }
  .quotes{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .nav .btn{ font-size:11.5px; padding-left:16px; padding-right:16px; }
  .hero{ padding-top:22px; }
  .hero h1{ margin-top:18px; font-size:clamp(40px,11vw,52px); }
  .hero .sub{ margin-top:14px; font-size:15.5px; }
  .hero .sub .long, .hero .ticks, .hero .copy .count, .hero .count-lbl{ display:none; }
  .deadline{ margin-left:20px; margin-right:20px; margin-top:14px; font-size:12.5px; }
  .dl-text{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
  .dl-left, .dl-long{ display:none; }
  .dl-short{ display:inline; }
  .hero .sub .short{ display:inline; }
  .hero .wrap{ gap:24px; }
  .eyebrow{ height:32px; padding-left:12px; padding-right:13px; font-size:10.5px; letter-spacing:.1em; }
  .tx-head{ padding-top:22px; padding-left:20px; padding-right:20px; }
  .tx-title{ font-size:28px; }
  .tiers, .tx-form, .vperks{ padding-left:20px; padding-right:20px; }
  .vperks ul{ grid-template-columns:1fr; gap:6px; }
  .vperks-h{ font-size:18px; }
  .tiers{ padding-top:18px; }
  .tier{ padding-left:12px; padding-right:12px; }
  .tier b{ font-size:13.5px; }
  .tier small{ font-size:11.5px; }
  .pillars{ grid-template-columns:1fr; }
  .pillar, .step, .tcard, .quote, .aitem, .notfor{ padding-left:24px; padding-right:24px; }
  .stat{ padding-left:18px; padding-right:18px; }
  .wins{ grid-template-columns:1fr; grid-template-areas:"a" "b" "c" "d"; gap:14px; }
  .w2, .w4{ margin-top:0; }
  .quote p{ font-size:23px; }
  .truth{ flex-direction:column; gap:16px; padding-left:24px; padding-right:24px; }
  .fstats b{ font-size:24px; }
  .faq summary{ padding-left:20px; padding-right:56px; font-size:15.5px; }
  .faq .a{ padding-left:20px; padding-right:24px; }
  .marq span{ font-size:21px; }
  .count.big div{ width:72px; }
  /* keep name, email, phone and the button on the first 375x812 screen */
  .hero .sub{ display:none; }
  .tx-kick{ font-size:10px; letter-spacing:.12em; white-space:nowrap; }
  .tx-head{ padding-top:14px; }
  .tx-head img{ width:44px; height:44px; }
  .tiers{ padding-top:12px; }
  .tier{ padding-top:11px; padding-bottom:10px; }
  .tx-form{ padding-top:14px; padding-bottom:20px; }
  .fld{ margin-bottom:8px; }
  .fld > label{ margin-bottom:5px; }
  .fld input, .phone, .igin{ height:48px; }
  .phone input{ height:auto; }
  .fine{ margin-top:10px; }
  .dock{ display:block; }
  footer{ padding-bottom:96px; }
}

/* =================================================================== CHECKOUT */
html.locked{ overflow:hidden; }
.hero .wrap{ align-items:start; grid-template-columns:minmax(0,1fr) 520px; }
.hero .copy{ position:sticky; top:110px; padding-top:28px; }
.tix{ scroll-margin-top:84px; }

/* a quote under the ticks */
.hq{ display:flex; gap:14px; align-items:flex-start; max-width:460px; margin:0; margin-top:32px; padding-top:18px; padding-bottom:18px; padding-left:20px; padding-right:20px; border-radius:16px; border:1px solid var(--hair-2); background:rgba(255,255,255,.015); box-shadow:0 30px 60px -40px rgba(0,0,0,1); }
.hq .qm{ flex:none; margin-top:3px; color:var(--ice-2); filter:drop-shadow(0 0 10px rgba(143,197,242,.5)); }
.hq p{ font-family:var(--serif); font-size:21px; line-height:1.25; color:var(--text); }
.hq small{ display:block; margin-top:6px; font-size:12.5px; color:var(--muted); }

/* order summary */
.sum{ margin-top:20px; margin-left:28px; margin-right:28px; border-radius:16px; border:1px solid var(--hair-2); background:#07080a; overflow:hidden; }
.sum-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:14px; padding-bottom:14px; padding-left:16px; padding-right:16px; }
.sum-row b{ display:block; font-size:14.5px; font-weight:600; }
.sum-row small{ display:block; margin-top:2px; font-size:12.5px; color:var(--muted); }
.sum-row .amt{ flex:none; font-family:var(--serif); font-size:24px; line-height:1; color:var(--soft); font-variant-numeric:tabular-nums; }
.sum-promo{ border-top:1px dashed var(--hair-2); animation:pop .3s var(--ease); }
.sum-promo b span{ color:var(--ice-2); letter-spacing:.06em; }
.sum-promo .amt{ color:var(--ice-1); }
.sum-total{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:14px; padding-bottom:14px; padding-left:16px; padding-right:16px; border-top:1px solid var(--hair-2); background:rgba(143,197,242,.04); }
.sum-total > span:first-child{ font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ice-2); }
.sum-total .tot{ display:flex; align-items:baseline; gap:10px; }
.sum-total s{ font-family:var(--serif); font-size:20px; color:var(--muted-2); }
.sum-total b{ font-family:var(--serif); font-weight:400; font-size:38px; line-height:1; font-variant-numeric:tabular-nums; padding-bottom:0; }

/* promo code */
.promo{ margin-top:2px; margin-bottom:14px; }
.promo-tog{ display:inline-flex; align-items:center; gap:8px; border:0; background:none; cursor:pointer; padding-top:4px; padding-bottom:4px; font-size:13.5px; font-weight:600; color:var(--ice-2); transition:color .2s; }
.promo-tog:hover{ color:var(--ice-1); }
.promo-box{ margin-top:8px; animation:pop .25s var(--ease); }
.promo-box .fld{ margin-bottom:0; }
.promo-in{ display:flex; gap:8px; }
.promo-in input{ flex:1; min-width:0; text-transform:uppercase; letter-spacing:.08em; }
.promo-in input::placeholder{ text-transform:none; letter-spacing:0; }
.promo-in button{ flex:none; height:50px; padding-left:20px; padding-right:20px; border-radius:12px; border:1px solid var(--line-2); background:rgba(143,197,242,.08); cursor:pointer;
  font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ice-1); transition:border-color .2s, background .2s; }
.promo-in button:hover{ border-color:var(--line-3); background:rgba(143,197,242,.13); }
.promo-in button[disabled]{ opacity:.6; cursor:default; }
.promo-ok{ display:flex; align-items:center; gap:10px; min-height:46px; padding-left:12px; padding-right:12px; border-radius:12px; border:1px solid var(--line-3); background:rgba(143,197,242,.07); font-size:13.5px; color:var(--soft); animation:pop .3s var(--ease); }
.promo-ok b{ color:var(--text); letter-spacing:.06em; }
.promo-ok .tick{ width:22px; height:22px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--ice-solid); color:var(--ink); }
.promo-ok button{ margin-left:auto; border:0; background:none; cursor:pointer; font-size:12.5px; color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.promo-ok button:hover{ color:var(--text); }

/* Stripe's card box */
.paylbl{ display:flex; align-items:center; justify-content:space-between; margin-top:4px; margin-bottom:9px; font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--soft); }
.brands{ display:flex; gap:5px; }
.brands i{ display:inline-flex; align-items:center; height:20px; padding-left:6px; padding-right:6px; border-radius:5px; border:1px solid var(--hair-2); background:rgba(255,255,255,.03); font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.06em; color:var(--muted); }
.payel{ min-height:118px; }
.pe-skel{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pe-skel span{ grid-column:1 / -1; height:50px; border-radius:12px; border:1px solid var(--hair-2); background:linear-gradient(90deg,#07080a 30%,#0e1116 50%,#07080a 70%); background-size:300% 100%; animation:shim 1.4s linear infinite; }
.pe-skel span.h{ grid-column:auto; }
@keyframes shim{ from{ background-position:100% 0; } to{ background-position:0 0; } }
.pe-wait{ display:grid; gap:4px; padding-top:18px; padding-bottom:18px; padding-left:18px; padding-right:18px; border-radius:12px; border:1px dashed var(--line-2); font-size:13.5px; color:var(--muted); }
.pe-wait b{ color:var(--text); font-weight:600; }
.pe-demo .row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pe-demo .fld{ margin-bottom:10px; }
.demo-tag{ font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#ffb36b; }

/* terms box */
.agree{ position:relative; display:flex; align-items:flex-start; gap:11px; margin-top:16px; margin-bottom:16px; font-size:13.5px; line-height:1.5; color:var(--soft); cursor:pointer; }
.agree input{ position:absolute; opacity:0; width:20px; height:20px; margin:0; }
.agree .box{ position:relative; width:20px; height:20px; flex:none; border-radius:6px; border:1px solid var(--line-3); background:#07080a; transition:background .2s, border-color .2s, box-shadow .2s; }
.agree .box::after{ content:""; position:absolute; left:6px; top:2.5px; width:5px; height:10px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:rotate(45deg) scale(0); transition:transform .2s var(--ease); }
.agree input:checked + .box{ background:var(--ice-solid); border-color:transparent; box-shadow:0 6px 16px -6px rgba(79,151,220,.7); }
.agree input:checked + .box::after{ transform:rotate(45deg) scale(1); }
.agree input:focus-visible + .box{ outline:2px solid var(--ice-2); outline-offset:3px; }
.agree.bad .box{ border-color:#d6606e; box-shadow:0 0 0 4px rgba(214,96,110,.14); }
.agree a{ color:var(--ice-1); text-decoration:underline; text-underline-offset:3px; }
.safe{ display:flex; align-items:center; justify-content:center; gap:7px; }

/* the lighter options link */
.lighter{ margin-top:18px; text-align:center; font-size:13.5px; color:var(--muted); }
.lighter button, .fitnote button, .faq .inl{ border:0; background:none; cursor:pointer; padding:0; font-size:inherit; font-weight:600; color:var(--ice-1); text-decoration:underline; text-underline-offset:3px; }
.lighter button:hover, .fitnote button:hover, .faq .inl:hover{ color:#fff; }
.final .lighter{ margin-top:10px; }
.faq .a a{ color:var(--ice-1); text-decoration:underline; text-underline-offset:3px; }

/* result chips */
.chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:940px; margin-top:34px; margin-left:auto; margin-right:auto; }
.chip{ display:inline-flex; align-items:center; gap:9px; height:40px; padding-left:16px; padding-right:16px; border-radius:999px; border:1px solid var(--line-2); background:rgba(143,197,242,.05); font-size:13.5px; white-space:nowrap; }
.chip b{ font-weight:600; color:var(--ice-1); }
.chip span{ color:var(--muted); }
.chip span::before{ content:"\00B7"; margin-right:9px; color:var(--muted-2); }

/* staff */
.staff{ display:grid; gap:10px; margin-top:28px; }
.staff > div{ border-radius:14px; border:1px solid var(--hair-2); padding-top:16px; padding-bottom:16px; padding-left:18px; padding-right:18px; background:rgba(255,255,255,.015); }
.staff .r{ display:block; font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ice-2); }
.staff b{ display:block; margin-top:4px; font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.15; }
.staff p{ margin-top:4px; font-size:14px; line-height:1.6; color:var(--muted); }

/* fit check */
.fit{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:52px; }
.fitc{ padding-top:32px; padding-bottom:30px; padding-left:32px; padding-right:32px; }
.fitc .tlist{ margin-top:20px; margin-bottom:0; }
.fitc.no{ border-style:dashed; border-color:var(--line-2); background:transparent; box-shadow:none; }
.fitc.no::before{ display:none; }
.xlist li::before{ left:2px; top:5px; width:12px; height:12px; border:0; transform:none;
  background:linear-gradient(45deg,transparent 43%,#f09aa4 43%,#f09aa4 57%,transparent 57%), linear-gradient(-45deg,transparent 43%,#f09aa4 43%,#f09aa4 57%,transparent 57%); }
.fitnote{ margin-top:22px; padding-top:18px; border-top:1px solid var(--hair); font-size:14px; color:var(--muted); }

/* the lighter options modal */
.modal{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding-top:20px; padding-bottom:20px; padding-left:16px; padding-right:16px; }
.m-back{ position:absolute; inset:0; background:rgba(2,3,5,.8); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); animation:fade .25s var(--ease); }
@keyframes fade{ from{ opacity:0; } }
.m-panel{ position:relative; width:100%; max-width:880px; max-height:100%; overflow-y:auto; overscroll-behavior:contain; border-radius:26px; border:1px solid var(--line-2);
  background:linear-gradient(180deg,#0f1217,#08090c 62%); box-shadow:var(--float); padding-top:44px; padding-bottom:36px; padding-left:36px; padding-right:36px; animation:pop .3s var(--ease); }
.m-panel::before{ content:""; position:absolute; top:-1px; left:50%; width:220px; height:2px; margin-left:-110px; border-radius:2px; background:linear-gradient(90deg,transparent,var(--ice-1),transparent); box-shadow:0 0 22px rgba(143,197,242,.9); }
.m-panel h2{ font-size:clamp(34px,4.4vw,52px); }
.m-x{ position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%; border:1px solid var(--hair-2); background:rgba(255,255,255,.02); color:var(--soft); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .2s, color .2s; }
.m-x:hover{ border-color:var(--line-3); color:#fff; }
.lgrid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:30px; }
.lopt{ display:flex; flex-direction:column; padding-top:28px; padding-bottom:24px; padding-left:26px; padding-right:26px; border-radius:20px; border:1px solid var(--hair-2); background:linear-gradient(180deg,var(--card-2),var(--bg-2)); }
.lopt.pro{ border-color:var(--line-3); background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(143,197,242,.1),transparent 70%), linear-gradient(170deg,#121820,#08090c 72%); box-shadow:0 0 60px -30px rgba(79,151,220,.55); }
.lopt .tprice b{ font-size:52px; }
.lopt .tline{ font-size:14.5px; padding-bottom:18px; }
.lopt .tlist{ margin-top:18px; margin-bottom:22px; }
.lopt .tlist li{ font-size:14px; margin-bottom:10px; }
.lopt .via{ display:block; margin-top:12px; text-align:center; font-size:12px; color:var(--muted-2); }

/* footer links */
.flinks{ display:flex; justify-content:center; gap:22px; margin-top:16px; font-size:13px; color:var(--muted); }
.flinks a:hover{ color:var(--ice-1); }

@media (max-width:1080px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero .copy{ position:static; padding-top:0; }
  .hq{ margin-left:auto; margin-right:auto; text-align:left; }
}
@media (max-width:860px){
  .fit, .lgrid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .hero .sub{ display:block; }
  .hq{ display:none; }
  .sum{ margin-left:20px; margin-right:20px; margin-top:16px; }
  .sum-row, .sum-total{ padding-left:14px; padding-right:14px; }
  .sum-total b{ font-size:34px; }
  .fld input, .promo-in button{ height:48px; }
  .agree{ font-size:13px; }
  .fitc{ padding-left:24px; padding-right:24px; }
  .chip{ height:auto; min-height:38px; white-space:normal; padding-top:8px; padding-bottom:8px; font-size:13px; }
  .m-panel{ padding-top:56px; padding-bottom:24px; padding-left:18px; padding-right:18px; border-radius:22px; }
  .modal{ align-items:flex-end; padding-bottom:12px; padding-left:10px; padding-right:10px; }
  .lopt{ padding-left:20px; padding-right:20px; }
  .lopt .tprice b{ font-size:44px; }
  .lopt .tline{ display:none; }
  .lopt .tlist{ margin-top:14px; margin-bottom:18px; }
  .lopt .tlist li:nth-child(n+4){ display:none; }
  .lgrid{ margin-top:22px; }
  .flinks{ gap:16px; }
}