/* ==========================================================================
   THE LIVE HOUR LEDGER — Design System
   Theme adapted from the Radical Reports layout system
   Fonts: Space Grotesk (display) · Inter / Plus Jakarta Sans (body) · mono labels
   ========================================================================== */

:root{
  --bg:#ffffff;
  --bg-soft:#f7f8fb;
  --panel:#ffffff;
  --ink:#0d0d0d;
  --text:#111318;
  --muted:#5c6275;
  --line:rgba(13,13,13,.12);

  --red:#e51b23;
  --red-deep:#b3151b;
  --green:#60bf33;
  --green-deep:#3f8e24;
  --green-dark:#367e1d;
  --ink-soft:#1a1c22;
  --amber:#ffb020;

  --shadow:0 24px 70px rgba(11,12,27,.16);
  --shadow-soft:0 18px 50px rgba(0,0,0,.08);
  --shadow-card:0 22px 60px rgba(54,12,15,.10), 0 0 60px rgba(96,191,51,.05);
  --radius:30px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  color:var(--text);
  font-family:'Inter','Plus Jakarta Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:
    radial-gradient(circle at 10% 0, rgba(229,27,35,.10), transparent 30%),
    radial-gradient(circle at 88% 3%, rgba(96,191,51,.12), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(229,27,35,.07), transparent 36%),
    linear-gradient(180deg,#ffffff 0,#fbfcfa 42%,#ffffff 100%);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;
  background-image:
    linear-gradient(to right, rgba(13,13,13,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(96,191,51,.045) 1px, transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.05));
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.05));
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- Scroll progress ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:4px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--green),var(--red));
  box-shadow:0 0 18px rgba(96,191,51,.5);
  transition:width .1s linear;
}

/* ---------- Topbar ---------- */
.topbar{
  position:relative;z-index:60;
  background:linear-gradient(135deg,var(--ink) 0,#232631 55%,var(--ink) 100%);
  border-bottom:2px solid var(--green);
  padding:11px 14px;text-align:center;font-weight:800;color:#f8fafc;
  font-size:clamp(11px,2.3vw,14.5px);line-height:1.25;letter-spacing:.01em;
  box-shadow:0 14px 40px rgba(15,23,42,.14);
}
.topbar b{color:#a8ec7f}
.topbar .dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);
  margin-right:8px;vertical-align:middle;
  box-shadow:0 0 0 0 rgba(229,27,35,.7);animation:livePulse 1.8s infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(229,27,35,.65)}
  70%{box-shadow:0 0 0 10px rgba(229,27,35,0)}
  100%{box-shadow:0 0 0 0 rgba(229,27,35,0)}
}

/* ---------- Layout ---------- */
.wrap{width:min(1000px,calc(100% - 34px));margin:0 auto}
.narrow{width:min(760px,calc(100% - 34px));margin:0 auto}
section{position:relative}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:'Space Grotesk','Inter',sans-serif;color:var(--ink);margin:0 0 14px}
h1{
  font-size:clamp(30px,5.1vw,55px);line-height:1.02;letter-spacing:-.045em;
  font-weight:700;max-width:940px;margin:0 auto 16px;
}
h2{font-size:clamp(28px,4.6vw,46px);line-height:1.04;letter-spacing:-.04em;font-weight:700}
h3{font-size:clamp(19px,2.6vw,25px);line-height:1.2;letter-spacing:-.02em;font-weight:700}
p{margin:0 0 16px}

.red{color:var(--red)}
.grn{color:var(--green-deep)}
.hl{background:linear-gradient(180deg,transparent 58%,rgba(96,191,51,.38) 58%);padding:0 3px}
.hl-r{background:linear-gradient(180deg,transparent 58%,rgba(229,27,35,.22) 58%);padding:0 3px}
.u{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
strong{font-weight:800;color:var(--ink)}
em{font-style:italic}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.15em;
  color:var(--green-deep);background:#fff;
  border:1px solid rgba(96,191,51,.32);border-radius:999px;padding:9px 16px;
  margin-bottom:18px;box-shadow:0 12px 32px rgba(96,191,51,.10);
}
.eyebrow:before{content:"✦";color:var(--red)}
.eyebrow.r{color:var(--red);border-color:rgba(229,27,35,.28);box-shadow:0 12px 32px rgba(229,27,35,.09)}

.lead{font-size:clamp(16.5px,1.6vw,20px);line-height:1.62;color:#343a4a;font-weight:500}
.micro{font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:700}

/* ---------- Panels ---------- */
.panel{
  width:min(960px,calc(100% - 34px));margin:0 auto;position:relative;overflow:hidden;
  background:#fff;border:1px solid rgba(13,13,13,.11);border-radius:var(--radius);
  padding:44px;box-shadow:var(--shadow-card);
}
.panel:after{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--red),var(--green));
}
.panel.tight{padding:32px}
.panel.dark{background:var(--ink);color:#e9ebf0;border-color:var(--ink)}
.panel.dark h2,.panel.dark h3{color:#fff}
.panel.dark .lead{color:#c9cfdb}

/* ---------- Flow arrow between sections ---------- */
.flow{
  width:min(900px,calc(100% - 34px));margin:26px auto;min-height:92px;
  display:flex;align-items:center;justify-content:center;position:relative;
}
.flow:before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);
  background:repeating-linear-gradient(180deg,var(--green) 0 14px,transparent 14px 26px);
  animation:dashDown 1.1s linear infinite;border-radius:99px;
}
@keyframes dashDown{from{background-position:0 0}to{background-position:0 26px}}
.flow:after{
  content:"";position:absolute;bottom:-2px;left:50%;width:16px;height:16px;
  border-right:3px solid var(--green);border-bottom:3px solid var(--green);
  transform:translateX(-50%) rotate(45deg);
  animation:arrowBounce 1.6s ease-in-out infinite;
}
@keyframes arrowBounce{
  0%,100%{transform:translateX(-50%) translateY(-3px) rotate(45deg)}
  50%{transform:translateX(-50%) translateY(7px) rotate(45deg)}
}
.flow span{
  position:relative;z-index:3;background:var(--ink);color:#fff;
  border:2px dashed var(--green);border-radius:999px;padding:12px 22px;
  font-family:ui-monospace,Menlo,monospace;font-size:12px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;
  box-shadow:0 18px 45px rgba(0,0,0,.14),0 0 0 8px #fff;
  animation:labelPop 3s ease-in-out infinite;
}
@keyframes labelPop{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-4px) scale(1.025)}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;flex-direction:column;
  min-width:min(430px,100%);padding:20px 38px;border-radius:22px;
  background:linear-gradient(135deg,var(--green) 0,#4ea52a 52%,var(--green-dark) 100%);
  color:#fff !important;font-weight:900;text-align:center;border:0;cursor:pointer;
  font-family:'Space Grotesk',sans-serif;letter-spacing:-.01em;
  box-shadow:0 22px 52px rgba(96,191,51,.34),0 12px 34px rgba(54,126,29,.20);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
  animation:btnBreathe 2.6s ease-in-out infinite;
}
.btn:hover{transform:translateY(-3px);filter:brightness(1.05);animation-play-state:paused}
.btn .b1{font-size:clamp(19px,2.9vw,26px);line-height:1.1;display:block}
.btn .b2{font-size:12.5px;font-weight:700;opacity:.92;letter-spacing:.09em;text-transform:uppercase;font-family:ui-monospace,Menlo,monospace}
@keyframes btnBreathe{
  0%,100%{box-shadow:0 22px 52px rgba(96,191,51,.30),0 0 0 0 rgba(96,191,51,.42)}
  50%{box-shadow:0 22px 52px rgba(96,191,51,.34),0 0 0 14px rgba(96,191,51,0)}
}
.btn.dark{background:linear-gradient(135deg,#1c1f27,var(--ink));box-shadow:0 22px 52px rgba(0,0,0,.28)}
.btn-wrap{text-align:center;margin:26px 0 8px}
.btn-note{margin-top:14px;font-size:13.5px;color:var(--muted);font-weight:600}
.btn-note b{color:var(--ink)}

.wplus-btn{display:inline-block;margin:16px auto 0;line-height:0}
.wplus-btn img{margin:0 auto;transition:transform .16s ease}
.wplus-btn:hover img{transform:translateY(-2px) scale(1.02)}

/* ---------- CTA block ---------- */
.cta-box{
  width:min(940px,calc(100% - 34px));margin:0 auto;text-align:center;position:relative;overflow:hidden;
  border-radius:34px;padding:48px 34px;background:var(--ink);color:#fff;
  box-shadow:0 30px 90px rgba(0,0,0,.24),0 0 0 6px rgba(96,191,51,.10);
}
.cta-box:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 18% 0, rgba(96,191,51,.20), transparent 38%),
    radial-gradient(circle at 88% 12%, rgba(229,27,35,.18), transparent 38%);
}
.cta-box>*{position:relative;z-index:2}
.cta-box h2{color:#fff}
.cta-box p{color:#cfd4df;max-width:700px;margin:0 auto 22px;font-size:clamp(15.5px,1.6vw,18.5px)}
.cta-benefits{list-style:none;padding:0;margin:0 auto 26px;max-width:640px;text-align:left;display:grid;gap:10px}
.cta-benefits li{color:#dfe3ec;font-weight:600;padding-left:30px;position:relative;font-size:15.5px}
.cta-benefits li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:900;font-size:17px}
.price-alert{
  display:inline-block;background:#fff;color:var(--green-deep);border-radius:999px;
  padding:9px 18px;font-family:ui-monospace,Menlo,monospace;font-weight:800;font-size:12.5px;
  letter-spacing:.11em;text-transform:uppercase;margin-bottom:18px;
}

/* ---------- Grids / cards ---------- */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{
  background:#fff;border:1px solid rgba(13,13,13,.10);border-radius:20px;padding:24px;
  box-shadow:0 14px 38px rgba(0,0,0,.06);position:relative;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 52px rgba(0,0,0,.10)}
.card h3{margin-bottom:8px;font-size:19px}
.card p{margin:0;font-size:15px;color:#454b5c;line-height:1.6}
.card .ico{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:22px;
  background:linear-gradient(135deg,rgba(96,191,51,.16),rgba(229,27,35,.10));margin-bottom:14px;
}
.card.num:before{
  content:attr(data-n);position:absolute;top:-14px;right:6px;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:74px;
  color:rgba(13,13,13,.05);line-height:1;
}

/* checklist */
.checks{list-style:none;padding:0;margin:22px 0;display:grid;gap:12px}
.checks li{position:relative;padding-left:36px;font-size:16px;font-weight:600;color:#2a2f3d;line-height:1.55}
.checks li:before{
  content:"✓";position:absolute;left:0;top:-1px;width:24px;height:24px;border-radius:8px;
  background:var(--green);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:900;
}
.checks.x li:before{content:"✕";background:var(--red)}

/* ---------- Hero ---------- */
.hero{padding:52px 0 10px;text-align:center}
.hero .lead{max-width:760px;margin:0 auto}
.trust-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:26px auto 0;max-width:820px;
}
.trust-pill{
  display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1px solid rgba(13,13,13,.10);border-radius:999px;padding:9px 16px;
  font-size:13px;font-weight:800;color:#2b3040;box-shadow:0 8px 24px rgba(0,0,0,.05);
}
.trust-pill b{color:var(--green-deep)}

/* ---------- Illustration: phone ---------- */
.stage{
  width:min(960px,calc(100% - 34px));margin:34px auto;padding:34px;border-radius:34px;
  background:linear-gradient(150deg,#fff,#f7f8fb);border:1px solid rgba(13,13,13,.10);
  box-shadow:var(--shadow-card);position:relative;overflow:hidden;
}
.stage:after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red),var(--green))}
.stage-cap{
  text-align:center;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:20px;font-weight:700;
}

.phone-scene{display:grid;grid-template-columns:250px 1fr;gap:34px;align-items:center}

.phone{
  width:250px;height:508px;border-radius:38px;background:#0b0c10;padding:11px;
  box-shadow:0 34px 80px rgba(0,0,0,.34),0 0 0 2px rgba(255,255,255,.06) inset;
  position:relative;margin:0 auto;
}
.phone:before{
  content:"";position:absolute;top:16px;left:50%;transform:translateX(-50%);
  width:74px;height:20px;border-radius:99px;background:#000;z-index:5;
}
.screen{
  width:100%;height:100%;border-radius:29px;overflow:hidden;position:relative;
  background:linear-gradient(170deg,#1b1f2a,#0e1116 60%,#161a22);
  display:flex;flex-direction:column;
}
.sc-top{
  padding:30px 12px 8px;display:flex;justify-content:space-between;align-items:center;
  font-size:10px;color:#98a0b3;font-family:ui-monospace,Menlo,monospace;
}
.live-badge{
  background:var(--red);color:#fff;font-weight:900;font-size:9.5px;letter-spacing:.12em;
  padding:4px 9px;border-radius:5px;display:inline-flex;gap:5px;align-items:center;
}
.live-badge i{width:5px;height:5px;background:#fff;border-radius:50%;animation:livePulse 1.4s infinite}
.sc-game{
  height:132px;margin:6px 10px;border-radius:12px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#2b1e5e,#7a2b6d 55%,#c23a35);
}
.sc-game:before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,.28), transparent 22%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.20), transparent 20%);
}
.sc-game span{
  position:absolute;bottom:8px;left:9px;font-size:9px;color:#fff;font-weight:800;
  background:rgba(0,0,0,.4);padding:3px 7px;border-radius:5px;letter-spacing:.06em;
}
.sc-tile{position:absolute;width:26px;height:26px;border-radius:6px;background:rgba(255,255,255,.85);animation:tileFloat 3.4s ease-in-out infinite}
.sc-tile:nth-child(2){top:24px;left:34px;animation-delay:.2s}
.sc-tile:nth-child(3){top:58px;left:96px;background:rgba(255,214,102,.9);animation-delay:.9s}
.sc-tile:nth-child(4){top:36px;left:158px;background:rgba(140,220,255,.9);animation-delay:1.5s}
@keyframes tileFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(6deg)}}

.sc-meta{padding:4px 12px 8px;color:#e6e9f0}
.sc-title{font-size:11px;font-weight:800;line-height:1.25;margin-bottom:5px}
.sc-stats{display:flex;gap:10px;font-size:9.5px;color:#9aa3b6;font-family:ui-monospace,Menlo,monospace}
.sc-stats b{color:var(--green)}
.sc-chat{
  flex:1;margin:0 10px 12px;background:rgba(255,255,255,.045);border-radius:12px;
  padding:9px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;
}
.msg{font-size:9.5px;line-height:1.4;color:#d6dbe6;opacity:0;transform:translateY(8px);animation:msgIn .5s forwards}
.msg b{color:#8fd66a}
.msg.r b{color:#ff8b8b}
.msg.y b{color:#ffd166}
@keyframes msgIn{to{opacity:1;transform:translateY(0)}}

/* ---------- Ledger illustration ---------- */
.ledger{background:#fff;border:1px solid rgba(13,13,13,.10);border-radius:20px;overflow:hidden;box-shadow:0 16px 44px rgba(0,0,0,.08)}
.ledger-head{
  background:var(--ink);color:#fff;padding:13px 18px;display:flex;justify-content:space-between;align-items:center;
  font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
}
.ledger-head span:last-child{color:var(--green)}
table.led{width:100%;border-collapse:collapse;font-size:13px}
table.led th{
  background:#f4f6f8;color:#4a5162;font-family:ui-monospace,Menlo,monospace;font-size:10px;
  letter-spacing:.09em;text-transform:uppercase;padding:10px 12px;text-align:left;font-weight:700;
  border-bottom:1px solid rgba(13,13,13,.08);
}
table.led td{padding:11px 12px;border-bottom:1px solid rgba(13,13,13,.06);font-weight:600;color:#333a4b}
table.led tr:last-child td{border-bottom:0}
table.led td.b{color:var(--green-deep);font-weight:900;font-family:ui-monospace,Menlo,monospace}
table.led tr.tot td{background:rgba(96,191,51,.09);font-weight:900;color:var(--ink);font-size:14.5px}
.bar{height:12px;border-radius:99px;background:#eef0f4;overflow:hidden;margin:14px 18px 18px}
.bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--green),#8fd66a);transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
.bar-lab{display:flex;justify-content:space-between;padding:0 18px 16px;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:var(--muted);font-weight:700;letter-spacing:.08em}

/* ---------- Versus diagram ---------- */
.vs{display:grid;grid-template-columns:1fr 62px 1fr;gap:0;align-items:stretch;margin:26px 0}
.vs-col{border-radius:20px;padding:26px;position:relative;overflow:hidden}
.vs-col.bad{background:linear-gradient(160deg,#fff6f6,#fff);border:1px solid rgba(229,27,35,.20)}
.vs-col.good{background:linear-gradient(160deg,#f4fcef,#fff);border:1px solid rgba(96,191,51,.28)}
.vs-col h3{font-size:17px;margin-bottom:4px}
.vs-col .tag{
  font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:800;margin-bottom:12px;display:block;
}
.vs-col.bad .tag{color:var(--red)}
.vs-col.good .tag{color:var(--green-deep)}
.vs-col ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.vs-col li{font-size:14.5px;padding-left:26px;position:relative;color:#3a4051;font-weight:600;line-height:1.5}
.vs-col.bad li:before{content:"✕";position:absolute;left:0;color:var(--red);font-weight:900}
.vs-col.good li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:900}
.vs-mid{display:grid;place-items:center}
.vs-mid span{
  width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;
  box-shadow:0 14px 34px rgba(0,0,0,.24),0 0 0 7px #fff;
}
.vs-col .punch{
  margin-top:16px;padding:12px 14px;border-radius:12px;font-size:13.5px;font-weight:800;
  font-family:ui-monospace,Menlo,monospace;letter-spacing:.02em;
}
.vs-col.bad .punch{background:rgba(229,27,35,.09);color:var(--red-deep)}
.vs-col.good .punch{background:rgba(96,191,51,.13);color:var(--green-deep)}

/* ---------- Math strip ---------- */
.math{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:center;
  background:var(--ink);border-radius:22px;padding:26px 22px;color:#fff;margin:24px 0;
  box-shadow:0 26px 64px rgba(0,0,0,.26);
}
.math .m{text-align:center}
.math .m .n{font-family:'Space Grotesk',sans-serif;font-size:clamp(24px,4.2vw,40px);font-weight:700;line-height:1;color:#fff}
.math .m .l{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:#98a0b3;margin-top:7px;font-weight:700}
.math .op{font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:700;color:var(--green);text-align:center}
.math .m.out .n{color:var(--green)}

/* ---------- Orbit / stack diagram ---------- */
.orbit{position:relative;height:400px;display:grid;place-items:center}
.orbit-core{
  width:170px;height:170px;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:var(--ink);color:#fff;box-shadow:0 24px 60px rgba(0,0,0,.28),0 0 0 10px rgba(96,191,51,.10);
  z-index:3;position:relative;padding:16px;
}
.orbit-core .n{font-family:'Space Grotesk',sans-serif;font-size:32px;font-weight:700;line-height:1;color:var(--green)}
.orbit-core .l{font-size:10.5px;font-family:ui-monospace,Menlo,monospace;letter-spacing:.11em;text-transform:uppercase;color:#98a0b3;margin-top:6px}
.orbit-ring{position:absolute;inset:20px;border:2px dashed rgba(13,13,13,.14);border-radius:50%;animation:spin 34s linear infinite}
.orbit-ring.two{inset:70px;animation-direction:reverse;animation-duration:26s;border-color:rgba(96,191,51,.22)}
@keyframes spin{to{transform:rotate(360deg)}}
.node{
  position:absolute;background:#fff;border:1px solid rgba(13,13,13,.10);border-radius:14px;
  padding:11px 14px;box-shadow:0 14px 34px rgba(0,0,0,.10);z-index:4;max-width:172px;
}
.node b{display:block;font-family:'Space Grotesk',sans-serif;font-size:13.5px;color:var(--ink);letter-spacing:-.01em}
.node span{font-size:11.5px;color:var(--muted);font-weight:600;line-height:1.35;display:block;margin-top:2px}
.node.n1{top:8px;left:50%;transform:translateX(-50%)}
.node.n2{top:96px;right:0}
.node.n3{bottom:96px;right:0}
.node.n4{bottom:8px;left:50%;transform:translateX(-50%)}
.node.n5{bottom:96px;left:0}
.node.n6{top:96px;left:0}
.node:before{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(96,191,51,.18)}
.node.n1:before{bottom:-5px;left:50%;transform:translateX(-50%)}
.node.n4:before{top:-5px;left:50%;transform:translateX(-50%)}
.node.n2:before,.node.n3:before{left:-5px;top:50%;transform:translateY(-50%)}
.node.n5:before,.node.n6:before{right:-5px;top:50%;transform:translateY(-50%)}

/* ---------- Journey / roadmap ---------- */
.road{position:relative;padding-left:44px;margin:30px 0}
.road:before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:3px;background:repeating-linear-gradient(180deg,var(--green) 0 10px,rgba(96,191,51,.18) 10px 20px);border-radius:99px}
.stop{position:relative;margin-bottom:26px}
.stop:before{
  content:"";position:absolute;left:-36px;top:6px;width:15px;height:15px;border-radius:50%;
  background:#fff;border:3px solid var(--green);box-shadow:0 0 0 5px #fff,0 6px 16px rgba(96,191,51,.28);
}
.stop .ph{
  font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--red);font-weight:800;margin-bottom:5px;
}
.stop h3{margin-bottom:6px;font-size:20px}
.stop p{margin:0;color:#454b5c;font-size:15.5px;line-height:1.62}

/* ---------- Bonus cards ---------- */
.bonus{
  background:#fff;border:1px solid rgba(13,13,13,.10);border-radius:22px;padding:26px;position:relative;
  box-shadow:0 16px 44px rgba(0,0,0,.07);overflow:hidden;transition:transform .2s ease;
}
.bonus:hover{transform:translateY(-5px)}
.bonus:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--red),var(--green))}
.bonus .tag{
  display:inline-block;background:var(--ink);color:#fff;font-family:ui-monospace,Menlo,monospace;
  font-size:10.5px;letter-spacing:.12em;padding:6px 12px;border-radius:7px;font-weight:800;margin-bottom:13px;
}
.bonus .val{
  position:absolute;top:20px;right:20px;font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:17px;color:var(--green-deep);background:rgba(96,191,51,.12);padding:5px 11px;border-radius:9px;
}
.bonus h3{font-size:19px;margin-bottom:8px;padding-right:74px}
.bonus p{font-size:14.8px;color:#454b5c;margin:0 0 12px;line-height:1.6}
.bonus .why{
  font-size:13.5px;font-weight:800;color:var(--ink);background:rgba(96,191,51,.10);
  border-left:3px solid var(--green);padding:10px 13px;border-radius:0 10px 10px 0;
}

/* ---------- Value stack ---------- */
.stack{background:#fff;border:1px solid rgba(13,13,13,.10);border-radius:22px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.08);margin:26px 0}
.stack .row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 20px;border-bottom:1px solid rgba(13,13,13,.06)}
.stack .row span:first-child{font-weight:700;color:#2b3040;font-size:15px;line-height:1.4}
.stack .row span:last-child{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--green-deep);white-space:nowrap;font-size:16px}
.stack .row.total{background:var(--ink);border:0}
.stack .row.total span{color:#fff !important;font-size:19px;font-weight:900}
.stack .row.total span:last-child{color:var(--green) !important;font-size:24px}

.price-box{text-align:center;margin:8px 0 0}
.price-strike{font-family:'Space Grotesk',sans-serif;font-size:22px;color:#9aa1b2;text-decoration:line-through;margin-bottom:2px}
.price-now{font-family:'Space Grotesk',sans-serif;font-size:clamp(56px,11vw,96px);font-weight:700;line-height:.95;color:var(--green)}
.price-sub{font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:8px}

/* ---------- FAQ ---------- */
.faq{border:1px solid rgba(13,13,13,.10);border-radius:16px;background:#fff;margin-bottom:12px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.04)}
.faq summary{
  cursor:pointer;padding:19px 52px 19px 22px;font-weight:800;font-size:16.5px;color:var(--ink);
  list-style:none;position:relative;font-family:'Space Grotesk',sans-serif;letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{
  content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:24px;color:var(--green);font-weight:400;transition:transform .2s ease;
}
.faq[open] summary:after{transform:translateY(-50%) rotate(45deg)}
.faq .a{padding:0 22px 20px;color:#454b5c;font-size:15.3px;line-height:1.66}
.faq .a p:last-child{margin:0}

/* ---------- Case studies ---------- */
.case{
  background:#fff;border:1px solid rgba(13,13,13,.10);border-radius:20px;padding:24px;
  box-shadow:0 14px 38px rgba(0,0,0,.06);position:relative;overflow:hidden;
}
.case .who{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);font-weight:800;margin-bottom:8px}
.case h3{font-size:18px;margin-bottom:9px}
.case p{font-size:14.6px;color:#454b5c;margin:0 0 14px;line-height:1.6}
.case .stat{display:flex;gap:16px;flex-wrap:wrap;border-top:1px dashed rgba(13,13,13,.14);padding-top:13px}
.case .stat div{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:var(--muted);letter-spacing:.07em;text-transform:uppercase;font-weight:700}
.case .stat b{display:block;font-family:'Space Grotesk',sans-serif;font-size:19px;color:var(--green-deep);letter-spacing:-.02em;text-transform:none}

/* ---------- Creator ---------- */
.creator{display:grid;grid-template-columns:190px 1fr;gap:30px;align-items:center}
.avatar{
  width:190px;height:190px;border-radius:26px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--ink),#2a2e3a);color:#fff;
  font-family:'Space Grotesk',sans-serif;font-size:56px;font-weight:700;
  box-shadow:0 24px 60px rgba(0,0,0,.26),0 0 0 8px rgba(96,191,51,.10);
}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:100;padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:rgba(13,13,13,.96);backdrop-filter:blur(10px);border-top:2px solid var(--green);
  display:none;align-items:center;justify-content:space-between;gap:12px;
  transform:translateY(110%);transition:transform .3s ease;
}
.sticky-cta.on{transform:translateY(0)}
.sticky-cta .p{color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;line-height:1.1;font-size:15px}
.sticky-cta .p small{display:block;font-family:ui-monospace,Menlo,monospace;font-size:9.5px;color:#9aa3b6;letter-spacing:.09em;text-transform:uppercase;margin-top:3px}
.sticky-cta a{
  background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;font-weight:900;
  padding:13px 20px;border-radius:13px;font-size:14.5px;white-space:nowrap;font-family:'Space Grotesk',sans-serif;
  box-shadow:0 10px 26px rgba(96,191,51,.34);
}

/* ---------- Exit modal ---------- */
.exit-overlay{position:fixed;inset:0;background:rgba(8,9,12,.72);backdrop-filter:blur(6px);z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.exit-overlay.on{display:flex}
.exit-modal{
  background:#fff;border-radius:26px;max-width:520px;width:100%;padding:36px 30px;text-align:center;position:relative;
  box-shadow:0 40px 110px rgba(0,0,0,.4);animation:popIn .3s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes popIn{from{opacity:0;transform:scale(.9) translateY(16px)}to{opacity:1;transform:none}}
.exit-modal:before{content:"";position:absolute;top:0;left:0;right:0;height:5px;border-radius:26px 26px 0 0;background:linear-gradient(90deg,var(--red),var(--green))}
.exit-close{position:absolute;top:12px;right:16px;font-size:26px;color:#9aa1b2;cursor:pointer;line-height:1;background:none;border:0}
.exit-modal h3{font-size:26px;margin-bottom:10px}
.exit-modal p{font-size:15.5px;color:#454b5c}

/* ---------- Footer ---------- */
.footer{margin-top:56px;padding:44px 0 40px;background:var(--ink);color:#aab1c0}
.footer .help{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:20px;
  padding:26px;text-align:center;margin-bottom:30px;
}
.footer .help h3{color:#fff;font-size:20px;margin-bottom:8px}
.footer .help a{color:#8fd66a;font-weight:800;text-decoration:underline}
.footer nav{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;margin-bottom:22px}
.footer nav a{color:#dfe3ec;font-weight:700;font-size:14.5px}
.footer nav a:hover{color:var(--green)}
.footer .legal{font-size:12.6px;line-height:1.72;color:#8890a2;text-align:center;max-width:840px;margin:0 auto}
.footer .legal strong{color:#c8cedb}
.wplus_spdisclaimer{
  color:#8890a2;font-size:12.5px;line-height:1.7;text-align:center;
  max-width:840px;margin:0 auto 18px;
}
.wplus_spdisclaimer a{color:#8fd66a;text-decoration:underline}
.copyright{text-align:center;margin-top:22px;font-size:12.5px;color:#7c8497}

/* ---------- Reveal animation ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- Legal page styles ---------- */
.doc{padding:44px 0 20px}
.doc h1{text-align:center;font-size:clamp(30px,5vw,46px)}
.doc .panel{padding:40px}
.doc h2{font-size:clamp(21px,2.6vw,27px);margin:34px 0 12px;padding-top:4px}
.doc h2:first-of-type{margin-top:0}
.doc p,.doc li{font-size:15.6px;line-height:1.75;color:#3d4354}
.doc ul{padding-left:22px;margin:0 0 16px}
.doc li{margin-bottom:9px}
.doc .updated{
  text-align:center;font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:26px;font-weight:700;
}
.backlink{display:inline-flex;align-items:center;gap:8px;margin:26px auto 0;font-weight:800;color:var(--green-deep)}
.doc-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:30px 0 0}
.doc-nav a{
  background:#fff;border:1px solid rgba(13,13,13,.10);border-radius:999px;padding:10px 18px;
  font-size:13.5px;font-weight:800;color:#2b3040;box-shadow:0 8px 22px rgba(0,0,0,.05);
}
.doc-nav a:hover{border-color:var(--green);color:var(--green-deep)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  .phone-scene{grid-template-columns:1fr;gap:26px}
  .creator{grid-template-columns:1fr;text-align:center;gap:20px}
  .avatar{margin:0 auto;width:150px;height:150px;font-size:44px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:760px){
  .panel{padding:28px 20px;width:min(100% - 26px,960px);border-radius:24px}
  .stage{padding:22px 16px;border-radius:24px;width:min(100% - 26px,960px)}
  .cta-box{padding:36px 20px;border-radius:26px;width:min(100% - 26px,940px)}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .vs{grid-template-columns:1fr;gap:14px}
  .vs-mid{padding:2px 0}
  .vs-mid span{width:44px;height:44px;font-size:13px}
  .math{grid-template-columns:1fr;gap:14px;padding:22px 18px}
  .math .op{font-size:20px}
  .math .m .n{font-size:34px}
  .orbit{height:auto;display:grid;gap:12px;place-items:stretch}
  .orbit-ring{display:none}
  .orbit-core{width:100%;height:auto;border-radius:20px;padding:22px;margin-bottom:6px}
  .orbit-core .n{font-size:36px}
  .node{position:static;max-width:100%;transform:none !important}
  .node:before{display:none}
  .flow{min-height:74px;margin:18px auto}
  .flow span{font-size:11px;padding:10px 16px;box-shadow:0 14px 34px rgba(0,0,0,.14),0 0 0 6px #fff}
  .btn{min-width:100%;padding:18px 22px;border-radius:18px}
  .sticky-cta{display:flex}
  body{padding-bottom:74px}
  .road{padding-left:32px}
  .road:before{left:9px}
  .stop:before{left:-30px;width:13px;height:13px}
  .bonus .val{position:static;display:inline-block;margin-bottom:10px}
  .bonus h3{padding-right:0}
  .hero{padding:34px 0 6px}
  .doc .panel{padding:26px 20px}
  table.led{font-size:12px}
  table.led th,table.led td{padding:9px 8px}
  .phone{width:100%;max-width:250px}
}

@media (max-width:400px){
  .trust-pill{font-size:11.5px;padding:8px 12px}
  .price-now{font-size:62px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important}
  .rv{opacity:1;transform:none}
}