/* ============================================================
   Beyond Set / Ryan Kelly. Webinar funnel design system.

   Palette is built from Ryan's one stated brand colour, #15352a,
   a deep forest green (onboarding answer, "Stack" section).
   The accent is hi-vis lime: it is the highest-contrast partner
   to that green, and it is the exact colour his audience already
   wears to work. Trades cue, not a neon-gamer cue.

   Loud font: Archivo (heavy, uppercase, industrial).
   Quiet font: Inter.
   ============================================================ */

:root{
  --ink:       #060C09;   /* page ground, near-black with a green cast */
  --ink-2:     #0A1610;   /* raised ground */
  --green:     #15352A;   /* HIS BRAND COLOUR. panels, cards, bands */
  --green-lift:#1C4838;   /* hover + active green */
  --green-deep:#0E2119;   /* section tint */

  --acc:       #C4F04C;   /* hi-vis lime. every primary CTA */
  --acc-dim:   #9FC93B;
  --acc-glow:  rgba(196,240,76,.35);

  --w:         #F2F5F1;   /* bone white */
  --mut:       rgba(242,245,241,.68);
  --faint:     rgba(242,245,241,.44);
  --line:      rgba(242,245,241,.13);
  --line-2:    rgba(242,245,241,.07);
  --card:      rgba(242,245,241,.035);

  --warn:      #FF6B4A;

  --display: "Archivo", system-ui, -apple-system, sans-serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;

  --wrap: 1160px;
  --r: 16px;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--ink);
  color:var(--w);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}

/* ---------- ambient background ---------- */

.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg .orb{position:absolute;border-radius:50%;filter:blur(130px)}
.bg .o1{width:62vw;height:62vw;max-width:880px;max-height:880px;
  background:rgba(21,53,42,.85);left:-20vw;top:-22vw}
.bg .o2{width:48vw;height:48vw;max-width:720px;max-height:720px;
  background:rgba(196,240,76,.07);right:-18vw;top:38vh}
.bg .grid{position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(242,245,241,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(242,245,241,.035) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 100%);
}

main{position:relative;z-index:1}
.wrap{width:min(var(--wrap),calc(100% - 40px));margin:0 auto}

/* ---------- type ---------- */

.kicker{
  font-family:var(--display);
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--acc);font-weight:600;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;
  letter-spacing:-.022em;line-height:1.02;text-transform:uppercase}
h1{font-size:clamp(33px,4.4vw,59px);margin-top:14px}
h2{font-size:clamp(27px,3.9vw,48px)}
h3{font-size:20px;line-height:1.1}
h4{font-size:15px;letter-spacing:.02em}
.hi{color:var(--acc)}
.mark{background:var(--acc);color:var(--ink);padding:0 .14em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.lede{font-size:clamp(16px,1.55vw,19px);color:var(--mut);
  margin-top:18px;max-width:640px;line-height:1.55}
.tiny{font-size:12px;color:var(--faint);line-height:1.45}
.sec-head{margin:0 auto 32px;max-width:760px;text-align:center}
.sec-head .lede{margin:14px auto 0}
.sec-head .kicker{display:block}
section{padding:clamp(52px,7vw,100px) 0}

/* ---------- buttons: green liquid glass ---------- */
/* Ported from the 21st.dev LiquidButton (React/Tailwind) to vanilla CSS, because
   this funnel is static HTML. The look is carried by the layered inset shadows,
   not the SVG turbulence, so it degrades cleanly. His lime survives as the edge
   highlight, the glow and the label, which is what keeps the CTA legible on a
   near-black ground. Revert switch: set --btn-fill to var(--acc). */

.btn{
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;font-size:16px;padding:18px 26px;border-radius:14px;
  cursor:pointer;width:100%;text-align:center;overflow:hidden;
  color:var(--acc);
  border:1px solid rgba(196,240,76,.34);
  background:
    linear-gradient(180deg,rgba(196,240,76,.16) 0%,rgba(28,72,56,.55) 42%,rgba(21,53,42,.72) 100%),
    rgba(21,53,42,.55);
  -webkit-backdrop-filter:blur(14px) saturate(190%);
          backdrop-filter:blur(14px) saturate(190%);
  box-shadow:
    inset 0 1px 0 0 rgba(226,255,150,.55),
    inset 1.5px 1.5px 1px -1px rgba(226,255,150,.35),
    inset -1.5px -1.5px 1px -1px rgba(6,12,9,.7),
    inset 0 0 14px 6px rgba(196,240,76,.07),
    inset 0 -10px 18px -12px rgba(6,12,9,.9),
    0 2px 8px rgba(6,12,9,.55),
    0 0 22px rgba(196,240,76,.16);
  transition:transform .16s ease,box-shadow .22s ease,border-color .22s ease,
             background .22s ease,color .16s ease;
}

/* specular sweep: the moving highlight that reads as liquid */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(105deg,
    transparent 30%,rgba(226,255,150,.30) 47%,rgba(255,255,255,.14) 52%,transparent 68%);
  transform:translateX(-120%);
  transition:transform .62s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(120%)}

.btn:hover{
  transform:translateY(-1px);
  color:var(--w);
  border-color:rgba(196,240,76,.62);
  box-shadow:
    inset 0 1px 0 0 rgba(226,255,150,.75),
    inset 1.5px 1.5px 1px -1px rgba(226,255,150,.45),
    inset -1.5px -1.5px 1px -1px rgba(6,12,9,.7),
    inset 0 0 18px 8px rgba(196,240,76,.12),
    0 10px 30px rgba(6,12,9,.6),
    0 0 38px var(--acc-glow);
}
.btn:active{transform:translateY(0) scale(.988)}
.btn:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

.btn.inline{width:auto;padding:19px 34px}

/* solid lime, kept for anywhere a glass CTA would lose the fight */
.btn.solid{
  color:var(--ink);background:var(--acc);border-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.45),0 2px 10px rgba(6,12,9,.5);
}
.btn.solid:hover{color:var(--ink);background:#D2FB5E;
  box-shadow:0 14px 42px var(--acc-glow)}

.btn.ghost{
  background:rgba(242,245,241,.03);color:var(--w);
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 0 rgba(242,245,241,.10);
}
.btn.ghost:hover{background:var(--card);border-color:var(--acc);color:var(--w);
  box-shadow:inset 0 1px 0 0 rgba(242,245,241,.16),0 0 22px rgba(196,240,76,.14)}

.btn[disabled]{opacity:.55;cursor:default;transform:none;box-shadow:none}
.btn[disabled]::before{display:none}

/* progressive enhancement: real displacement where the engine supports it */
@supports (backdrop-filter:url(#rk-glass)) or (-webkit-backdrop-filter:url(#rk-glass)){
  .btn:not(.solid):not(.ghost){
    -webkit-backdrop-filter:url(#rk-glass) blur(12px) saturate(190%);
            backdrop-filter:url(#rk-glass) blur(12px) saturate(190%);
  }
}
@media (prefers-reduced-motion:reduce){
  .btn,.btn::before{transition:none}
  .btn:hover{transform:none}
}

.mob-cta{display:none}
@media (max-width:900px){.mob-cta{display:inline-flex;margin-top:22px}}

/* ---------- sticky countdown bar ---------- */

.bar{position:sticky;top:0;z-index:6;background:rgba(6,12,9,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .in{display:flex;align-items:center;justify-content:center;
  gap:18px;padding:10px 16px;font-family:var(--display);font-size:11px;
  letter-spacing:.28em;text-transform:uppercase;font-weight:600;color:var(--mut)}
.bar .t{display:flex;gap:12px}
.bar .t b{font-weight:800;color:var(--acc);font-size:15px;
  letter-spacing:.02em;min-width:2.5em;text-align:center;display:block}
.bar .t i{font-style:normal;color:var(--faint);font-size:9px;
  display:block;letter-spacing:.18em;margin-top:2px;text-align:center}
@media (max-width:600px){
  .bar .in{gap:12px;padding:9px 12px}
  .bar .lbl{font-size:9.5px;letter-spacing:.18em;max-width:74px;line-height:1.25}
  .bar .t{gap:9px}
}

/* ---------- hero ---------- */

.hero{padding:clamp(38px,5.5vw,70px) 0 44px;display:grid;
  grid-template-columns:1.24fr .86fr;gap:44px;align-items:start}
.pill{display:inline-flex;align-items:flex-start;gap:10px;border:1px solid var(--line);
  background:var(--card);border-radius:999px;padding:8px 15px;font-size:13px;
  letter-spacing:.02em;color:var(--mut)}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 12px var(--acc);display:inline-block;flex:none;margin-top:6px;
  animation:blip 2.2s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.35}}

.video{margin-top:26px;position:relative;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);background:#000;aspect-ratio:16/9;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.video img,.video video,.video iframe{width:100%;height:100%;
  object-fit:cover;position:absolute;inset:0;border:0}
.video .play{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.62));
  cursor:pointer}
.video .play .pb{width:82px;height:82px;border-radius:50%;background:var(--acc);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 12px rgba(196,240,76,.16),0 12px 40px var(--acc-glow)}
.video .play .pb svg{width:29px;height:29px;margin-left:5px}
.video .play span{position:absolute;bottom:16px;left:0;right:0;text-align:center;
  font-family:var(--display);font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;font-weight:600;color:rgba(242,245,241,.75)}

/* ---------- form card ---------- */

.card{position:sticky;top:66px;background:var(--green);
  border:1px solid rgba(196,240,76,.3);border-radius:var(--r);
  padding:26px 24px 22px;
  box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(242,245,241,.07)}
.card h3{font-size:23px;text-align:center;line-height:1.06}
.card .when{text-align:center;color:var(--mut);font-size:14px;margin-top:9px}
.card .when b{color:var(--w);font-weight:700}
.card .local{text-align:center;font-size:12px;color:var(--faint);margin-top:4px}
.form{margin-top:18px;display:grid;gap:11px}
.form input{width:100%;background:rgba(6,12,9,.55);border:1px solid var(--line);
  border-radius:10px;padding:16px;color:var(--w);font-size:16px;outline:none;
  transition:border-color .12s ease}
.form input:focus{border-color:var(--acc)}
.form input::placeholder{color:rgba(242,245,241,.38)}
.form .err{border-color:var(--warn) !important}
.card .tiny{text-align:center;margin-top:12px}
.card .tiny a{color:var(--mut);text-decoration:underline}
.embed-slot iframe{width:100%;min-height:430px;border:0;border-radius:10px;background:#fff}
.consent{display:flex;gap:10px;align-items:flex-start;
  font-size:11.5px;color:var(--faint);line-height:1.4;text-align:left;margin-top:2px}
.consent input{width:16px;height:16px;flex:none;margin-top:2px;accent-color:var(--acc)}

/* ---------- proof strip ---------- */

.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(21,53,42,.35)}
.strip .in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line-2)}
.strip .s{background:var(--ink);padding:26px 22px;text-align:center}
.strip .s b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(26px,3.2vw,38px);color:var(--acc);line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.strip .s span{display:block;margin-top:9px;font-size:12.5px;color:var(--mut);line-height:1.35}

/* ---------- numbered learn items ---------- */

.learn{display:grid;gap:18px}
.learn .item{display:grid;grid-template-columns:1fr 1.02fr;gap:28px;
  align-items:center;border:1px solid var(--line);background:var(--card);
  border-radius:var(--r);padding:28px 30px;
  box-shadow:inset 0 1px 0 rgba(242,245,241,.06)}
.learn .n{width:38px;height:38px;border-radius:50%;background:var(--acc);
  color:var(--ink);font-family:var(--display);font-weight:800;display:flex;
  align-items:center;justify-content:center;font-size:15px;margin-bottom:13px}
.learn p{color:var(--mut);margin-top:11px;font-size:15.5px;line-height:1.55}
.vis{border-radius:12px;background:var(--green-deep);border:1px solid var(--line);
  min-height:215px;padding:22px;position:relative;overflow:hidden}
.vis .lab{font-family:var(--display);font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;font-weight:600;color:var(--faint)}

/* vis: two columns compare */
.two{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:15px}
.acct{border:1px solid var(--line);border-radius:10px;padding:14px}
.acct.on{border-color:var(--acc);background:rgba(196,240,76,.06)}
.acct .t{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:12.5px}
.acct.on .t{color:var(--acc)}
.acct .f{font-family:var(--display);font-size:25px;font-weight:800;margin-top:7px;line-height:1}
.acct .s{font-size:12px;color:var(--mut);margin-top:7px;line-height:1.4}

/* vis: bars */
.bars{display:flex;align-items:flex-end;gap:8px;height:118px;margin-top:22px}
.bars b{flex:1;background:rgba(242,245,241,.16);border-radius:4px 4px 0 0}
.bars b.win{background:var(--acc);box-shadow:0 0 28px var(--acc-glow)}
.barcap{display:flex;gap:8px;margin-top:11px}
.barcap span{flex:1;text-align:center;font-size:10px;color:var(--faint);
  letter-spacing:.06em;text-transform:uppercase}

/* vis: funnel bands */
.bands{display:grid;gap:8px;margin-top:16px}
.band{border-radius:8px;padding:12px 14px;font-size:13px;display:flex;
  justify-content:space-between;align-items:center;border:1px solid var(--line);gap:10px}
.band b{font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.03em;font-size:12.5px}
.band.b1{width:100%}.band.b2{width:84%}.band.b3{width:66%;
  border-color:var(--acc);background:rgba(196,240,76,.07)}
.band span{color:var(--mut);font-size:12px;white-space:nowrap}

/* vis: maths */
.maths{display:flex;align-items:baseline;gap:14px;margin-top:14px;flex-wrap:wrap}
.maths .big{font-family:var(--display);font-size:54px;font-weight:800;
  color:var(--acc);line-height:1}
.maths .eq{font-family:var(--display);font-size:21px;font-weight:800;color:var(--faint)}
.maths .mid{font-family:var(--display);font-size:33px;font-weight:800;line-height:1}
.maths .cap{font-size:12px;color:var(--mut);width:100%;margin-top:8px;line-height:1.45}

/* vis: timeline */
.tl{display:grid;gap:10px;margin-top:16px}
.tl .r{display:grid;grid-template-columns:66px 1fr;gap:12px;align-items:center}
.tl .r .m{font-family:var(--display);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.tl .r .v{height:26px;border-radius:6px;background:rgba(242,245,241,.12);
  display:flex;align-items:center;padding:0 10px;font-size:12px;
  font-weight:600;color:var(--mut)}
.tl .r.on .v{background:var(--acc);color:var(--ink)}
.tl .r.on .m{color:var(--acc)}

/* ---------- quote ---------- */

.quote{border:1px solid var(--line);background:var(--card);border-radius:var(--r);
  padding:36px 32px;text-align:center;max-width:830px;margin:0 auto}
.note{max-width:820px;margin-left:auto;margin-right:auto}
.quote .q{font-family:var(--display);font-size:clamp(20px,2.4vw,29px);
  font-weight:700;line-height:1.22;text-transform:none;letter-spacing:-.015em}
.quote .q span{color:var(--acc)}
.quote .who{margin-top:18px;font-family:var(--display);font-size:11px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--faint);font-weight:600}

/* ---------- proof cards ---------- */

.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pc{border:1px solid var(--line);background:var(--card);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column}
.pc.hero{grid-column:span 3;display:grid;grid-template-columns:.9fr 1.1fr;
  border-color:rgba(196,240,76,.35);background:rgba(21,53,42,.5)}
.pc .shot{background:var(--green-deep);border-bottom:1px solid var(--line);
  min-height:190px;display:flex;align-items:center;justify-content:center;
  padding:18px;position:relative}
.pc.hero .shot{border-bottom:0;border-right:1px solid var(--line);min-height:260px}
.pc .shot img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.pc .shot .empty{font-family:var(--display);font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--faint);text-align:center;line-height:1.8}
.pc .in{padding:22px 24px 26px}
.pc .nm{font-family:var(--display);font-weight:800;font-size:17px;
  text-transform:uppercase;letter-spacing:-.01em}
.pc .rl{font-size:12px;color:var(--acc);margin-top:5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase}
.pc p{color:var(--mut);font-size:14.5px;margin-top:12px;line-height:1.55}
.pc .fig{display:flex;gap:18px;margin-top:16px;flex-wrap:wrap}
.pc .fig div b{display:block;font-family:var(--display);font-size:21px;
  font-weight:800;color:var(--acc);line-height:1}
.pc .fig div span{display:block;font-size:11px;color:var(--faint);margin-top:4px;
  letter-spacing:.06em;text-transform:uppercase}

/* ---------- fit / not fit ---------- */

.fit{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fit .col{border:1px solid var(--line);background:var(--card);
  border-radius:var(--r);padding:28px 28px 30px}
.fit .col.yes{border-color:rgba(196,240,76,.32);background:rgba(21,53,42,.42)}
.fit .col h3{font-size:17px;margin-bottom:18px;text-align:center}
.fit .col.yes h3{color:var(--acc)}
.fit ul{list-style:none;display:grid;gap:13px}
.fit li{display:grid;grid-template-columns:20px 1fr;gap:12px;
  font-size:15px;color:var(--mut);line-height:1.5}
.fit li i{font-style:normal;font-weight:800;color:var(--acc);font-size:15px}
.fit .col.no li i{color:var(--faint)}

/* ---------- FAQ ---------- */

.faq{display:grid;gap:10px;max-width:840px;margin-left:auto;margin-right:auto}
.faq details{border:1px solid var(--line);background:var(--card);
  border-radius:12px;overflow:hidden}
.faq details[open]{border-color:rgba(196,240,76,.3);background:rgba(21,53,42,.4)}
.faq summary{padding:19px 22px;cursor:pointer;font-family:var(--display);
  font-weight:700;font-size:15.5px;letter-spacing:-.01em;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center;
  text-transform:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:21px;color:var(--acc);
  font-weight:800;flex:none;line-height:1}
.faq details[open] summary:after{content:"\2013"}
.faq .a{padding:0 22px 21px;color:var(--mut);font-size:15px;line-height:1.6}
.faq .a p+p{margin-top:11px}

/* ---------- closing band ---------- */

.close-band{border:1px solid rgba(196,240,76,.32);border-radius:var(--r);
  background:linear-gradient(150deg,var(--green) 0%,var(--green-deep) 100%);
  padding:clamp(34px,5vw,58px);text-align:center}
.close-band .lede{margin:16px auto 0}
.close-band .btn{max-width:400px;margin:28px auto 0}

/* ---------- footer ---------- */

footer{border-top:1px solid var(--line);padding:34px 0 46px;
  color:var(--faint);font-size:12.5px}
footer .in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{text-decoration:underline}

/* ---------- survey ---------- */

.svy{max-width:660px;margin:0 auto;padding:clamp(32px,6vw,64px) 0 80px}
.prog{height:5px;border-radius:99px;background:rgba(242,245,241,.1);overflow:hidden}
.prog i{display:block;height:100%;background:var(--acc);border-radius:99px;
  width:0;transition:width .32s cubic-bezier(.4,0,.2,1)}
.step-n{font-family:var(--display);font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--faint);font-weight:600;margin-top:16px}
.q-step{display:none}
.q-step.on{display:block;animation:qin .28s ease}
@keyframes qin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.q-step h2{font-size:clamp(24px,3.4vw,36px);margin-top:12px;text-transform:none;
  letter-spacing:-.02em;line-height:1.1}
.opts{display:grid;gap:11px;margin-top:28px}
.opt{display:flex;align-items:center;gap:15px;width:100%;text-align:left;
  border:1px solid var(--line);background:var(--card);border-radius:12px;
  padding:19px 20px;cursor:pointer;font-size:16px;color:var(--w);
  transition:border-color .12s ease,background .12s ease,transform .12s ease}
.opt:hover{border-color:var(--acc);background:rgba(196,240,76,.06);transform:translateX(3px)}
.opt.sel{border-color:var(--acc);background:rgba(196,240,76,.11)}
.opt i{flex:none;width:26px;height:26px;border-radius:7px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-style:normal;
  font-family:var(--display);font-size:12px;font-weight:800;color:var(--faint)}
.opt:hover i,.opt.sel i{border-color:var(--acc);background:var(--acc);color:var(--ink)}
.svy-back{margin-top:24px;background:none;border:0;color:var(--faint);
  font-size:13px;cursor:pointer;text-decoration:underline;padding:0}
.svy-back:hover{color:var(--w)}

/* ---------- VIP / offer ---------- */

.stack{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--card)}
.stack .row{display:flex;justify-content:space-between;gap:18px;
  padding:16px 22px;border-bottom:1px solid var(--line-2);font-size:15px}
.stack .row:last-of-type{border-bottom:0}
.stack .row b{font-weight:600;color:var(--w)}
.stack .row span{color:var(--faint);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.stack .tot{display:flex;justify-content:space-between;gap:18px;
  padding:19px 22px;background:rgba(21,53,42,.6);
  border-top:1px solid rgba(196,240,76,.3);font-family:var(--display);
  font-weight:800;text-transform:uppercase;font-size:15px;letter-spacing:.02em}
.stack .tot span{color:var(--faint);text-decoration:line-through}
.price{text-align:center;padding:34px 24px;border:1px solid rgba(196,240,76,.34);
  border-radius:var(--r);background:linear-gradient(150deg,var(--green),var(--green-deep))}
.price .was{font-size:14px;color:var(--faint);text-decoration:line-through}
.price .now{font-family:var(--display);font-size:clamp(52px,8vw,76px);
  font-weight:800;color:var(--acc);line-height:1;letter-spacing:-.03em;margin-top:6px}
.price .sub{font-size:13.5px;color:var(--mut);margin-top:10px;line-height:1.5}
.price .btn{max-width:420px;margin:24px auto 0}
.decline{display:block;text-align:center;margin-top:20px;color:var(--faint);
  font-size:13.5px;text-decoration:underline}
.decline:hover{color:var(--mut)}
.feats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.feat{border:1px solid var(--line);background:var(--card);border-radius:12px;padding:22px 24px}
.feat h4{color:var(--acc);margin-bottom:9px}
.feat p{color:var(--mut);font-size:14.5px;line-height:1.55}

/* ---------- confirmation ---------- */

.conf-hero{text-align:center;padding:clamp(40px,6vw,76px) 0 34px}
.tick-big{width:64px;height:64px;border-radius:50%;background:var(--acc);
  display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.tick-big svg{width:30px;height:30px}
.cal{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;
  max-width:560px;margin:26px auto 0}
.cal a{border:1px solid var(--line);background:var(--card);border-radius:11px;
  padding:15px 12px;text-align:center;font-family:var(--display);font-size:12.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  transition:border-color .12s ease,background .12s ease}
.cal a:hover{border-color:var(--acc);background:rgba(196,240,76,.07)}
.steps{display:grid;gap:14px;max-width:760px;margin-left:auto;margin-right:auto}
.steps.cols{max-width:none;grid-template-columns:1fr 1fr}
.steps.wide{max-width:none}
@media (max-width:900px){.steps.cols{grid-template-columns:1fr;max-width:760px}}
.stp{display:grid;grid-template-columns:42px 1fr;gap:18px;align-items:start;
  border:1px solid var(--line);background:var(--card);border-radius:12px;padding:22px 24px}
.stp .n{width:42px;height:42px;border-radius:50%;background:var(--acc);color:var(--ink);
  font-family:var(--display);font-weight:800;display:flex;align-items:center;
  justify-content:center;font-size:16px}
.stp h4{margin-bottom:7px}
.stp p{color:var(--mut);font-size:14.5px;line-height:1.55}
.note{border-left:3px solid var(--acc);background:rgba(196,240,76,.07);
  padding:16px 20px;border-radius:0 10px 10px 0;color:var(--mut);
  font-size:14.5px;line-height:1.55}
.note b{color:var(--w)}
.note.warn{border-left-color:var(--warn);background:rgba(255,107,74,.08)}

/* ---------- sticky mobile CTA ---------- */

.stickycta{display:none}
@media (max-width:980px){
  .stickycta{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:20;
    background:rgba(6,12,9,.94);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  }
  /* the sticky bar scrolls over live content, so its glass gets a denser base.
     Pure translucency dissolves it over the lime chart and the numeral circles. */
  .stickycta .btn{
    padding:16px 20px;font-size:15px;
    background:
      linear-gradient(180deg,rgba(196,240,76,.20) 0%,rgba(28,72,56,.90) 45%,rgba(14,33,25,.95) 100%),
      rgba(10,22,16,.94);
    border-color:rgba(196,240,76,.55);
    box-shadow:
      inset 0 1px 0 0 rgba(226,255,150,.65),
      inset 0 -10px 18px -12px rgba(6,12,9,.95),
      0 -6px 24px rgba(6,12,9,.7),
      0 0 26px rgba(196,240,76,.20);
  }
  body{padding-bottom:82px}
}

/* ---------- responsive ---------- */

@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:32px}
  .card{position:static}
  .learn .item{grid-template-columns:1fr;gap:22px}
  .pc.hero{grid-template-columns:1fr}
  .pc.hero .shot{border-right:0;border-bottom:1px solid var(--line)}
  .proof{grid-template-columns:1fr 1fr}
  .pc.hero{grid-column:span 2}
}
@media (max-width:760px){
  .strip .in{grid-template-columns:1fr 1fr}
  .fit{grid-template-columns:1fr}
  .feats{grid-template-columns:1fr}
}
@media (max-width:620px){
  .proof{grid-template-columns:1fr}
  .pc.hero{grid-column:span 1}
  .cal{grid-template-columns:1fr}
  .learn .item{padding:24px 22px}
  .btn{font-size:15px;padding:17px 22px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ---------- commitment tick (guide page) ---------- */
.commit{
  display:flex; gap:14px; align-items:flex-start; margin:22px auto 0; max-width:520px;
  text-align:left;
  background:rgba(6,12,9,.35); border:1px solid var(--line);
  border-radius:12px; padding:18px 20px; cursor:pointer;
  transition:border-color .14s ease, background .14s ease;
}
.commit:hover{border-color:var(--acc)}
.commit:has(input:checked){border-color:var(--acc); background:rgba(196,240,76,.08)}
.commit input{width:22px; height:22px; flex:none; margin:1px 0 0;
  accent-color:var(--acc); cursor:pointer}
.commit span{font-size:15px; color:var(--mut); line-height:1.5}
.commit b{color:var(--w); font-weight:600}

/* ---------- centre-aligned funnel defaults (Ellis 2026-08-19) ---------- */
.svy .opts, .svy .opt{text-align:left}
.svy .note{text-align:left}
.svy .svy-back{display:inline-block}
.close-band .commit{text-align:left}
.stp p, .stp h4{text-align:left}
.feat{text-align:left}
.pc .in{text-align:left}

/* ---------- application form ---------- */
.fields{display:grid;gap:16px;margin-top:26px;text-align:left}
.fld{display:grid;gap:7px}
.fld > span{font-size:14px;color:var(--mut);font-weight:500;line-height:1.45}
.fld input,.fld select,.fld textarea{
  width:100%;background:rgba(6,12,9,.55);border:1px solid var(--line);
  border-radius:10px;padding:14px 15px;color:var(--w);font-size:16px;outline:none;
  transition:border-color .12s ease;font-family:inherit;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--acc)}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(242,245,241,.34)}
.fld .err,.fld input.err,.fld select.err,.fld textarea.err{border-color:var(--warn)}
.fld select{appearance:none;background-image:
  linear-gradient(45deg,transparent 50%,var(--faint) 50%),
  linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;cursor:pointer}
.fld select option{background:var(--green);color:var(--w)}
.stepnav{display:flex;gap:10px;margin-top:22px}
.stepnav .btn{flex:1}
.stepnav .btn.ghost{flex:0 0 34%}