/* Shared by index.html and result.html. */
:root{
  --bg:#0d0d0e; --panel:#17191c; --panel-2:#1d2024; --line:#2a2e34;
  --fg:#f2f3f4; --dim:#9aa0a8; --dim-2:#6c737c;
  --lime:#c5f230; --lime-dk:#a8d420;
  --cream:#fcfaf5; --cream-2:#f1ece1; --ink:#0d0d0e;
  --red:#e8563a; --green:#6fbf2e;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --maxw:660px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.15}
a{color:var(--lime)}

.kicker{font:600 13px/1.45 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.kicker.red{color:var(--red)}
/* lime on cream is unreadable — darken it, but not the red variant, which is
   already readable and carries the "not ready" signal */
#verdict .kicker:not(.red),#paid .kicker{color:#57900f}
.comment{font:400 14px/1 var(--mono);color:var(--dim-2)}

/* ---------- sticky top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(13,13,14,.94);backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;min-width:0}
.brand .arw{color:var(--lime);font:800 20px/1 var(--sans);flex:none}
/* stack the name over the byline — inline spans wrap into each other */
.brand .stack{display:flex;flex-direction:column;min-width:0}
.brand .nm{display:block;font:800 19px/1.05 var(--sans);letter-spacing:-.03em;
  color:var(--fg);white-space:nowrap}
.brand .by{display:block;margin-top:3px;font:400 10px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim-2);white-space:nowrap}
.live{display:flex;align-items:center;gap:8px;flex:none;
  font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lime)}
.live .dot{width:7px;height:7px;border-radius:50%;background:var(--lime);flex:none;
  animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}

/* ---------- hero ---------- */
header{padding:34px 0 0;text-align:center}
.logo{font:800 30px/1 var(--sans);letter-spacing:-.03em;color:var(--fg);text-decoration:none;display:inline-block}
.logo span{color:var(--lime)}
h1.hero{font-size:40px;font-weight:800;margin:0;letter-spacing:-.035em;line-height:1.08}
h1.hero .hl{color:var(--lime);display:block}
.hero-sub{margin:16px auto 0;max-width:34em;font-size:17px;color:var(--dim)}
.hero-sub b{color:var(--fg);font-weight:700}

/* ---------- video with sound overlay ---------- */
.video{position:relative}
.sound-cta{
  position:absolute;left:50%;top:11%;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;z-index:3;cursor:pointer;border:0;
  background:var(--lime);color:var(--ink);
  font:700 15px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  padding:15px 22px;white-space:nowrap;max-width:92%;
  box-shadow:0 6px 26px rgba(0,0,0,.45);
}
.sound-cta:hover{background:var(--lime-dk)}
.sound-cta[hidden]{display:none}
.watch-note{margin-top:12px;text-align:center;font:400 13px/1.6 var(--mono);color:var(--dim-2)}
.watch-note .m{color:var(--red);font-weight:700}
.watch-note .m .dot{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--red);margin-right:7px;vertical-align:1px}

/* ---------- glowing primary CTA ---------- */
.cta-big{
  display:block;width:100%;margin:26px 0 0;padding:22px 18px;border:0;cursor:pointer;
  background:var(--lime);color:var(--ink);text-align:center;text-decoration:none;
  font:700 17px/1.25 var(--mono);letter-spacing:.05em;text-transform:uppercase;
  box-shadow:0 0 34px rgba(197,242,48,.34);
  transition:box-shadow .2s ease, background .2s ease;
}
.cta-big:hover{background:var(--lime-dk);box-shadow:0 0 44px rgba(197,242,48,.5)}

@media (max-width:430px){
  .brand .nm{font-size:17px}
  .live{font-size:10px;letter-spacing:.07em}
  .sound-cta{font-size:12px;padding:12px 14px;gap:8px}
  .cta-big{font-size:14px;padding:19px 12px}
}
@media (max-width:340px){ .brand .by{display:none} }

/* The 16:9 box is reserved in CSS and the iframe is written during parse, so
   the video never appears late and shoves the form down the page. */
.video{margin:22px 0 0}
.video[hidden]{display:none}
.video .frame{position:relative;padding-top:56.25%;overflow:hidden;background:#000;border:1px solid var(--line)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

section{padding:28px 0 0}
/* the sticky bar is ~56px, so anything scrolled to must clear it */
#check,#summary,#verdict,#paid{scroll-margin-top:74px}

.form-card{border:1px solid var(--line);background:var(--panel);padding:24px}
.form-card h2{font-size:24px;font-weight:800}
.form-card .hint{margin-top:8px;color:var(--dim);font-size:15px}
#rankForm label{display:block;font:600 12px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);margin:20px 0 8px}
input{width:100%;padding:14px;font:400 16px/1 var(--sans);color:var(--fg);
  background:#0f1113;border:1px solid var(--line);border-radius:0;outline:none}
input::placeholder{color:#575d65}
input:focus{border-color:var(--lime)}
.row2{display:flex;gap:12px;flex-wrap:wrap}
.row2>div{flex:1 1 200px}

.cta{display:block;width:100%;margin-top:24px;padding:18px;border:0;cursor:pointer;
  font:700 17px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);background:var(--lime);text-align:center;text-decoration:none}
.cta:hover{background:var(--lime-dk)}
.cta[disabled]{opacity:.55;cursor:not-allowed}
.err{display:none;margin-top:12px;color:var(--red);font-size:14px}
.fineprint{margin-top:14px;font:400 12px/1.5 var(--mono);color:var(--dim-2)}

#verdict{background:var(--cream);color:var(--ink);padding:30px 22px;margin-top:30px}
#verdict h2{font-size:29px;font-weight:800;margin-top:12px}
#verdict>p{font-size:17px;color:#33383e;margin:16px 0 0}
.offer{margin-top:26px;border:1px solid #cfc9bc;background:var(--cream-2);padding:22px}
.offer h3{font-size:22px;font-weight:800;margin-top:12px}
.offer ul{list-style:none;margin:18px 0 0;padding:0}
.offer li{display:flex;gap:12px;margin:12px 0;font-size:16px;color:#2b3037}
.offer li::before{content:"✓";color:var(--green);font-weight:700;flex:none}
.offer .foot{margin-top:14px;text-align:center;font:400 13px/1.6 var(--mono);color:#5d636b}

.trust{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:center;
  padding:22px 0 0;font:400 13px/1.6 var(--mono);color:var(--dim)}
.trust a{color:inherit}

.stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:34px}
.stat{padding:26px 10px;text-align:center;border-bottom:1px solid var(--line)}
.stat:nth-child(odd){border-right:1px solid var(--line)}
.stat .n{font:800 32px/1 var(--sans);color:var(--lime)}
.stat .l{margin-top:8px;font-size:15px;color:var(--dim)}

.proof{margin-top:16px}
.camp{background:var(--panel-2);border:1px solid var(--line);padding:20px;margin-top:12px}
.camp .kw{font-size:18px;font-weight:700}
.camp .meta{margin-top:6px;font-size:15px;color:var(--dim-2)}
.camp .move{margin-top:14px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.camp .from{font:700 26px/1 var(--sans);color:var(--dim)}
.camp .arw{color:var(--dim-2)}
.camp .to{font:800 26px/1 var(--sans);color:var(--lime)}
.camp .days{font:400 15px/1 var(--mono);color:var(--dim)}

/* what-you-get lists on the audit page */
.give{list-style:none;margin:18px 0 0;padding:0}
.give li{display:flex;gap:12px;margin:12px 0;font-size:16px;color:#d3d7dc}
.give li::before{content:"✓";color:var(--lime);font-weight:700;flex:none}
.card{border:1px solid var(--line);background:var(--panel);padding:22px;margin-top:22px}
.card h3{font-size:19px;font-weight:700}

/* the buyer's own details, shown back to them before they pay */
.details{width:100%;border-collapse:collapse;margin-top:16px;font-size:15px}
.details th{text-align:left;padding:11px 14px 11px 0;color:var(--dim-2);white-space:nowrap;
  font:600 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid var(--line);vertical-align:top;width:1%}
.details td{padding:11px 0;color:var(--fg);border-bottom:1px solid var(--line);word-break:break-word}
.details tr:last-child th,.details tr:last-child td{border-bottom:0}
.details .ref{font:400 14px/1.5 var(--mono);color:var(--lime)}

.summary{margin-top:44px;border-top:1px solid var(--line);background:#111316}
.summary .wrap{padding-top:36px;padding-bottom:36px}
.summary h2{font-size:30px;font-weight:800;margin-bottom:24px}
.sline{display:flex;justify-content:space-between;gap:16px}
.sline .l{font-weight:700}
.sline .q{margin-top:4px;font:400 14px/1 var(--mono);color:var(--dim-2)}
.rule{height:1px;background:var(--line);margin:22px 0}
.total{display:flex;justify-content:space-between;align-items:flex-end}
.total .cur{margin-top:4px;font:400 13px/1 var(--mono);color:var(--dim-2)}
.total .v{font:800 30px/1 var(--sans)}

/* ---------- sticky checkout bar ----------
   Follows the buyer down the long audit page so the price and the pay button
   are always one tap away. Hidden while the real Summary is on screen, so the
   two never sit stacked on top of each other. */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:rgba(17,19,22,.97);border-top:1px solid var(--line);
  backdrop-filter:saturate(140%) blur(8px);
  transform:translateY(110%);transition:transform .22s ease;
  padding-bottom:env(safe-area-inset-bottom);
}
.stickybar.on{transform:translateY(0)}
.stickybar .wrap{display:flex;align-items:center;gap:14px;padding-top:12px;padding-bottom:12px}
.stickybar .sb-price{flex:1 1 auto;min-width:0}
.stickybar .sb-price .p{font:800 22px/1.1 var(--sans)}
.stickybar .sb-price .n{margin-top:2px;font:400 12px/1.3 var(--mono);color:var(--dim-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stickybar .cta{margin-top:0;width:auto;flex:0 0 auto;padding:15px 20px;font-size:14px}
/* room so the sticky bar never covers the footer links */
body.has-sticky{padding-bottom:92px}

#paid{display:none;background:var(--cream);color:var(--ink);padding:30px 22px}
#paid h2{font-size:28px;font-weight:800;margin-top:12px}
#paid p{font-size:17px;color:#33383e;margin:16px 0 0}
#paid .rcpt{margin-top:18px;padding-top:16px;border-top:1px solid #d6d0c3;
  font:400 13px/1.9 var(--mono);color:#5d636b;word-break:break-all;white-space:pre-line}

footer{padding:34px 0 56px;text-align:center;color:var(--dim-2);font-size:13px}
footer a{color:var(--dim);text-decoration:none;margin:0 3px}
footer a:hover{color:var(--fg)}
.disc{max-width:520px;margin:12px auto 0;line-height:1.6}

.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(0,0,0,.3);
  border-top-color:var(--ink);border-radius:50%;animation:sp .7s linear infinite;
  vertical-align:-2px;margin-right:9px}
@keyframes sp{to{transform:rotate(360deg)}}

@media (max-width:420px){
  h1.hero{font-size:33px}
  #verdict h2{font-size:25px}
}