/* LeedLoop marketing site — shared styles for / (enquiries) and /publish.
   Layout: problem-first narrative. Hook → proof → where it leaks → your own cost → the fix → the whole loop → price → objections → the choice.
   Dark-only by brand choice; tokens mirror the LeedLoop app so site and dashboard read as one product. */
:root {
  color-scheme: dark;
  --bg:#121317; --sf:#1a1b1f; --s2:#1e1f23; --s3:#26272c;
  --bo:rgba(255,255,255,0.07); --bo2:rgba(255,255,255,0.12);
  --tx:#e9e8ec; --mu:#9098a8; --mu2:#dbc2b1;
  --or:#f76b1c; --ot:#ffb781; --od:rgba(247,107,28,0.10); --on-or:#2a1204;
  --gr:#34c38f; --gd:rgba(52,195,143,0.12); --re:#e26d6d; --rd:rgba(226,109,109,0.10); --am:#f2b84b;
  --wa-in:#202c33; --wa-out:#1f4a3e; --wa-bg:#0b141a;
  --display:'Sora', 'Inter', system-ui, sans-serif;
  --body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:80px; overflow-x:clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { transition:none !important; animation:none !important; } }
body { overflow-x:clip; font-family:var(--body); background:var(--bg); color:var(--tx); line-height:1.6; font-size:16px; -webkit-font-smoothing:antialiased; }
a { color:var(--ot); text-decoration:none; }
a:hover { color:var(--or); }
:focus-visible { outline:2px solid var(--or); outline-offset:3px; border-radius:6px; }
.wrap { max-width:1120px; margin:0 auto; padding-inline:clamp(16px, 4vw, 28px); }
h1, h2, h3 { font-family:var(--display); letter-spacing:-0.025em; text-wrap:balance; line-height:1.12; }
h2 { font-size:clamp(26px, 4vw, 38px); font-weight:700; }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--or); }
.lede { color:var(--mu); font-size:17px; max-width:62ch; }
.num { font-variant-numeric:tabular-nums; }
section { padding-block:clamp(48px, 7vw, 88px); }
section.tight { padding-top:0; }
.sec-head { display:grid; gap:14px; margin-bottom:32px; max-width:760px; }
.card { background:var(--sf); border:1px solid var(--bo); border-radius:16px; padding:clamp(16px, 3vw, 28px); min-width:0; }
.note { font-size:12.5px; color:var(--mu); }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:10px; font-weight:700; font-size:15px; border:1px solid transparent; transition:background .15s, border-color .15s, color .15s; cursor:pointer; font-family:var(--body); text-align:center; }
.btn-primary { background:var(--or); color:var(--on-or); }
.btn-primary:hover { background:var(--ot); color:var(--on-or); }
.btn-ghost { border-color:var(--bo2); color:var(--tx); background:transparent; }
.btn-ghost:hover { border-color:var(--or); color:var(--ot); }
.wa-ico { width:18px; height:18px; flex-shrink:0; }
.fine { font-size:13px; color:var(--mu); margin-top:14px; }
.ctas { display:flex; flex-wrap:wrap; gap:12px; }
.ctas .btn { padding:14px 24px; }

/* Header */
header.top { position:sticky; top:env(safe-area-inset-top, 0px); z-index:50; background:rgba(18,19,23,0.9); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--bo); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:14px; height:64px; }
.nav-left { display:flex; align-items:center; gap:22px; min-width:0; }
.brand-lockup { height:28px; width:auto; display:block; }
.prod { display:inline-flex; background:var(--s2); border:1px solid var(--bo); border-radius:99px; padding:3px; font-size:13px; font-weight:600; }
.prod a { padding:5px 12px; border-radius:99px; color:var(--mu); white-space:nowrap; }
.prod a:hover { color:var(--tx); }
.prod a[aria-current="page"] { background:var(--od); color:var(--ot); box-shadow:inset 0 0 0 1px rgba(247,107,28,0.3); }
.nav-links { display:flex; align-items:center; gap:22px; font-size:14px; }
.nav-links a:not(.btn) { color:var(--mu); font-weight:500; }
.nav-links a:not(.btn):hover { color:var(--tx); }
.nav-links .btn { padding:9px 16px; font-size:14px; }
@media (max-width: 900px) { .nav-links .hide-sm { display:none; } }
@media (max-width: 560px) { .brand-lockup { height:24px; } .nav-left { gap:10px; } .prod a { padding:5px 9px; } .nav-links .btn { display:none; } }

/* Sticky WhatsApp bar on phones */
.mbar { display:none; }
@media (max-width: 720px) {
  .mbar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; gap:10px; padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background:rgba(18,19,23,0.95); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--bo2); }
  .mbar .btn { flex:1; padding:12px 10px; font-size:14px; }
  body { padding-bottom:72px; }
}

/* Hero */
.hero { display:grid; grid-template-columns:minmax(0, 1.08fr) minmax(0, 0.92fr); gap:clamp(28px, 5vw, 64px); align-items:center; padding-block:clamp(40px, 7vw, 84px) clamp(32px, 5vw, 56px); position:relative; }
.hero::before { content:''; position:absolute; inset:-120px -20% auto 30%; height:520px; background:radial-gradient(closest-side, rgba(247,107,28,0.15), transparent); pointer-events:none; z-index:-1; }
.hero h1 { font-size:clamp(34px, 5.4vw, 58px); font-weight:800; margin-block:16px 20px; }
.hero h1 em { font-style:normal; color:var(--or); }
.hero .lede { font-size:clamp(16px, 1.6vw, 19px); margin-bottom:28px; }
@media (max-width: 880px) { .hero { grid-template-columns:1fr; } }

/* Phone mock with Without / With toggle */
.phone-wrap { display:grid; gap:10px; justify-items:center; width:100%; }
.seg { display:inline-flex; background:var(--s2); border:1px solid var(--bo2); border-radius:10px; padding:3px; }
.seg button { font:600 13.5px var(--body); color:var(--mu); background:transparent; border:0; padding:8px 14px; min-height:40px; border-radius:8px; cursor:pointer; }
.seg button[aria-selected="true"].bad { background:var(--re); color:#2a0b0b; }
.seg button[aria-selected="true"].good { background:var(--or); color:var(--on-or); }
.phone { background:var(--wa-bg); border:1px solid var(--bo2); border-radius:26px; padding:14px; box-shadow:0 30px 80px -30px rgba(0,0,0,0.8); max-width:420px; width:100%; }
.phone-bar { display:flex; align-items:center; gap:10px; padding:4px 6px 12px; border-bottom:1px solid var(--bo); margin-bottom:12px; }
.avatar { width:34px; height:34px; border-radius:50%; background:var(--s3); display:grid; place-items:center; color:var(--tx); font-weight:800; font-family:var(--display); font-size:13px; flex-shrink:0; }
.phone-bar b { font-size:14px; display:block; }
.phone-bar small { font-size:12px; color:var(--mu); }
.phone-bar small.on { color:var(--gr); }
.chat { display:flex; flex-direction:column; gap:8px; font-size:14px; line-height:1.45; min-height:318px; }
.msg { max-width:88%; padding:8px 10px 18px; border-radius:10px; position:relative; }
.msg time { position:absolute; right:8px; bottom:3px; font-size:10.5px; color:rgba(233,232,236,0.55); font-variant-numeric:tabular-nums; }
.msg.in { background:var(--wa-in); align-self:flex-start; border-top-left-radius:2px; }
.msg.out { background:var(--wa-out); align-self:flex-end; border-top-right-radius:2px; }
.msg ul { padding-left:16px; margin-top:4px; }
.msg .link { display:block; margin-top:8px; padding:8px 10px; border-radius:8px; background:rgba(0,0,0,0.25); font-size:12.5px; color:var(--ot); }
.daybreak { align-self:center; font-size:11.5px; color:var(--mu); background:var(--s2); padding:3px 10px; border-radius:6px; }
.gap-note { align-self:center; font-size:12px; color:var(--re); font-style:italic; }
.chat-foot { margin-top:12px; padding:10px 12px; border-radius:10px; font-size:13px; }
.chat-foot.good { background:var(--od); border:1px solid rgba(247,107,28,0.25); color:var(--mu2); }
.chat-foot.bad { background:var(--rd); border:1px solid rgba(226,109,109,0.3); color:var(--mu2); }
.chat-foot b { color:var(--tx); }
.phone-cap { font-size:12px; color:var(--mu); }

/* Proof strip */
.proof { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border:1px solid var(--bo); border-radius:16px; background:var(--sf); }
.proof > div { padding:20px 22px; border-left:1px solid var(--bo); min-width:0; }
.proof > div:first-child { border-left:0; }
.proof .big { font-family:var(--display); font-size:clamp(26px, 3.2vw, 34px); font-weight:700; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.proof .big span { color:var(--or); }
.proof p { font-size:13.5px; color:var(--mu); margin-top:4px; }
.proof-note { font-size:12.5px; color:var(--mu); margin-top:10px; }
@media (max-width: 760px) { .proof { grid-template-columns:repeat(2, minmax(0,1fr)); } .proof > div:nth-child(3) { border-left:0; } .proof > div:nth-child(n+3) { border-top:1px solid var(--bo); } }

/* Leaks: the enquiry's journey, with the four places it leaks */
.pipe { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; counter-reset:leak; position:relative; }
.leak { background:var(--sf); border:1px solid var(--bo); border-radius:16px; padding:20px; display:grid; gap:8px; align-content:start; min-width:0; position:relative; counter-increment:leak; }
.leak::before { content:counter(leak); width:28px; height:28px; border-radius:50%; background:var(--rd); color:var(--re); display:grid; place-items:center; font-weight:800; font-size:13px; font-family:var(--display); }
.leak .stage { font-size:11.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--mu); }
.leak h3 { font-size:18px; }
.leak p { font-size:14px; color:var(--mu); }
.leak .stat { margin-top:6px; padding-top:12px; border-top:1px dashed var(--bo2); font-size:13.5px; color:var(--mu2); }
.leak .stat b { font-family:var(--display); font-size:22px; color:var(--re); display:block; font-variant-numeric:tabular-nums; }
@media (min-width: 981px) { .leak:not(:last-child)::after { content:'→'; position:absolute; right:-13px; top:22px; color:var(--mu); font-size:16px; } }
@media (max-width: 980px) { .pipe { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .pipe { grid-template-columns:1fr; } }

.evidence { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:16px; margin-top:16px; }
.evidence h3 { font-size:15px; font-family:var(--body); letter-spacing:0; margin-bottom:4px; }
.evidence .sub { font-size:13px; color:var(--mu); margin-bottom:14px; }
@media (max-width: 900px) { .evidence { grid-template-columns:1fr; } }

/* Heatmap */
.heat-scroll { overflow-x:auto; }
.heat { display:grid; grid-template-columns:34px repeat(24, minmax(10px, 1fr)); gap:3px; min-width:380px; font-size:10.5px; color:var(--mu); }
.heat .d { align-self:center; font-weight:600; }
.heat .c { aspect-ratio:1; border-radius:3px; background:rgba(247,107,28,var(--a)); }
.heat .c.off { box-shadow:inset 0 0 0 1px rgba(255,255,255,0.32); }
.heat .h { text-align:center; font-variant-numeric:tabular-nums; }
.legend { display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:12px; font-size:12.5px; color:var(--mu); align-items:center; }
.swatch { display:inline-block; width:11px; height:11px; border-radius:3px; vertical-align:-1px; margin-right:6px; }

/* Drop-off bars */
.bars { display:grid; gap:14px; }
.bar-row { display:grid; gap:6px; }
.bar-row .lbl { display:flex; justify-content:space-between; gap:12px; font-size:13.5px; color:var(--mu); }
.bar-row .lbl b { color:var(--tx); font-variant-numeric:tabular-nums; white-space:nowrap; }
.bar { height:12px; border-radius:6px; background:var(--s3); overflow:hidden; }
.bar i { display:block; height:100%; border-radius:6px; background:var(--or); }
.bar i.dim { background:rgba(247,107,28,0.45); }
.bar i.gap { background:repeating-linear-gradient(135deg, rgba(226,109,109,0.55) 0 6px, rgba(226,109,109,0.22) 6px 12px); }

/* Calculator */
.calc { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px, 4vw, 40px); align-items:start; }
.sentence { font-size:clamp(18px, 2.2vw, 22px); line-height:1.8; color:var(--mu2); }
.sentence b { color:var(--tx); }
.slider { display:grid; gap:6px; margin-block:6px 22px; }
.slider input[type=range] { width:100%; accent-color:var(--or); height:28px; }
.slider .ends { display:flex; justify-content:space-between; font-size:12px; color:var(--mu); }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.chips button { font:600 14px var(--body); padding:8px 13px; min-height:40px; border-radius:9px; border:1px solid var(--bo2); color:var(--mu2); background:transparent; cursor:pointer; font-variant-numeric:tabular-nums; }
.chips button[aria-pressed="true"] { border-color:var(--or); background:var(--od); color:var(--tx); }
.calc-out { display:grid; gap:14px; }
.calc-big { font-family:var(--display); font-size:clamp(20px, 2.4vw, 26px); line-height:1.3; font-weight:700; }
.calc-big em { font-style:normal; color:var(--re); font-variant-numeric:tabular-nums; }
.dots { display:flex; flex-wrap:wrap; gap:4px; padding:14px; background:var(--bg); border:1px solid var(--bo); border-radius:12px; }
.dots i { width:9px; height:9px; border-radius:50%; background:var(--s3); }
.dots i.q { background:var(--or); box-shadow:0 0 0 2px rgba(247,107,28,0.3); }
.calc-legend { font-size:14.5px; color:var(--mu2); }
.calc-legend b { color:var(--or); }
@media (max-width: 860px) { .calc { grid-template-columns:1fr; } }

/* Fixes: one per leak */
.fixes { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; counter-reset:fix; }
.fix { background:var(--sf); border:1px solid var(--bo); border-radius:16px; padding:22px; display:grid; grid-template-columns:auto 1fr; gap:6px 16px; align-content:start; counter-increment:fix; min-width:0; }
.fix::before { content:counter(fix); grid-row:span 3; width:34px; height:34px; border-radius:10px; background:var(--gd); color:var(--gr); display:grid; place-items:center; font-weight:800; font-family:var(--display); }
.fix .was { font-size:12.5px; color:var(--mu); text-decoration:line-through; text-decoration-color:rgba(226,109,109,0.7); }
.fix h3 { font-size:18px; }
.fix p { font-size:14.5px; color:var(--mu); }
.fix .scope { grid-column:2; justify-self:start; margin-top:6px; font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:3px 9px; border-radius:99px; background:var(--s2); color:var(--mu); border:1px solid var(--bo2); }
@media (max-width: 760px) { .fixes { grid-template-columns:1fr; } }
.research { margin:22px auto 0; max-width:760px; text-align:center; font-size:14.5px; line-height:1.6; color:var(--mu); }
.research b { color:var(--tx); }
.research-k { display:block; font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--ot); margin-bottom:4px; }
.research-n { font-size:12.5px; }

/* The loop */
.loop { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; position:relative; }
.step { background:var(--sf); border:1px solid var(--bo); border-radius:16px; padding:18px; display:grid; gap:6px; align-content:start; min-width:0; position:relative; color:var(--tx); transition:border-color .15s, background .15s; }
a.step:hover { border-color:rgba(247,107,28,0.5); color:var(--tx); }
.step.here { border-color:rgba(247,107,28,0.55); background:linear-gradient(160deg, rgba(247,107,28,0.12), rgba(247,107,28,0.02) 70%); }
.step .n { font-size:11.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--mu); }
.step h3 { font-size:17px; font-family:var(--body); letter-spacing:-0.01em; }
.step p { font-size:13.5px; color:var(--mu); }
.step .prodtag { justify-self:start; margin-top:6px; font-size:12px; font-weight:700; color:var(--ot); background:var(--od); border:1px solid rgba(247,107,28,0.25); padding:3px 10px; border-radius:99px; }
@media (min-width: 901px) { .step:not(:last-child)::after { content:'→'; position:absolute; right:-11px; top:20px; color:var(--or); font-size:15px; } }
.loop-back { margin-top:12px; display:flex; align-items:center; gap:12px; padding:12px 18px; border:1px dashed rgba(247,107,28,0.4); border-radius:14px; font-size:14px; color:var(--mu2); }
.loop-back svg { width:22px; height:22px; color:var(--or); flex-shrink:0; }
.loop-back b { color:var(--tx); }
@media (max-width: 900px) { .loop { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .loop { grid-template-columns:1fr; } }

/* Plans */
.anchor { display:flex; flex-wrap:wrap; gap:10px 28px; align-items:center; background:var(--s2); border:1px dashed var(--bo2); border-radius:14px; padding:16px 22px; margin-bottom:22px; font-size:15px; color:var(--mu2); }
.anchor b { color:var(--tx); }
.plans { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; align-items:stretch; }
.plans.two { grid-template-columns:repeat(2, minmax(0,1fr)); max-width:900px; }
.plan { background:var(--sf); border:1px solid var(--bo); border-radius:18px; padding:26px 24px; display:flex; flex-direction:column; gap:16px; min-width:0; transition:border-color .2s, box-shadow .2s; }
.plan.featured { border-color:rgba(247,107,28,0.45); }
.plan.soon { background:transparent; border-style:dashed; }
.plan.match { border-color:var(--or); box-shadow:0 0 0 2px var(--or), 0 30px 60px -40px rgba(247,107,28,0.7); }
.plan-top { display:grid; gap:4px; }
.plan-top .row { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.plan h3 { font-size:24px; }
.pill { font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:4px 10px; border-radius:99px; background:var(--od); color:var(--ot); border:1px solid rgba(247,107,28,0.25); white-space:nowrap; }
.pill.muted { background:var(--s2); color:var(--mu); border-color:var(--bo2); }
.plan .job { color:var(--mu2); font-size:15px; }
.price { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.price b { font-family:var(--display); font-size:40px; font-weight:800; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
.price span { color:var(--mu); font-size:14px; }
.perday { font-size:13px; color:var(--mu); margin-top:-10px; }
.plugs { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12.5px; color:var(--mu); }
.plugs i { font-style:normal; width:22px; height:22px; border-radius:50%; display:inline-grid; place-items:center; font-weight:800; font-size:11.5px; background:var(--gd); color:var(--gr); }
.plugs i.no { background:var(--s2); color:var(--mu); opacity:0.6; }
.feat { list-style:none; display:grid; gap:10px; font-size:14.5px; }
.feat li { display:grid; grid-template-columns:18px 1fr; gap:10px; }
.feat li::before { content:''; width:16px; height:16px; margin-top:3px; border-radius:50%; background:var(--od) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23f76b1c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.feat li.plus { display:block; font-weight:700; font-size:13px; }
.feat li.plus::before { display:none; }
.allow { font-size:13.5px; color:var(--mu); border-top:1px solid var(--bo); padding-top:14px; }
.allow b { color:var(--tx); }
.plan .btn { margin-top:auto; width:100%; }
.plans.four { grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
.plans.four .plan { padding:22px 18px; }
.plans.four .price b { font-size:32px; }
.freebar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 20px; background:var(--gd); border:1px solid rgba(52,195,143,0.28); border-radius:14px; padding:14px 20px; margin-bottom:16px; font-size:14.5px; color:var(--mu2); }
.freebar b { color:var(--gr); font-family:var(--display); font-size:18px; margin-right:8px; }
@media (max-width: 1060px) { .plans.four { grid-template-columns:repeat(2, minmax(0,1fr)); max-width:none; } }
@media (max-width: 560px) { .plans.four { grid-template-columns:1fr; } }
@media (max-width: 960px) { .plans, .plans.two { grid-template-columns:1fr; max-width:580px; } .plans.four { max-width:none; } }
.addon { margin-top:18px; display:grid; grid-template-columns:auto 1fr auto; gap:16px 20px; align-items:center; background:var(--sf); border:1px solid var(--bo); border-radius:16px; padding:18px 22px; }
.addon .ico { width:40px; height:40px; border-radius:12px; background:var(--od); color:var(--or); display:grid; place-items:center; }
.addon .ico svg { width:22px; height:22px; }
.addon b { display:block; font-size:16px; }
.addon p { font-size:14px; color:var(--mu); }
@media (max-width: 720px) { .addon { grid-template-columns:auto 1fr; } .addon .btn { grid-column:1 / -1; } }
.handover-note { margin-top:18px; display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; font-size:14.5px; color:var(--mu); background:var(--sf); border:1px solid var(--bo); border-radius:14px; padding:18px 20px; }
.handover-note .i { width:30px; height:30px; border-radius:50%; background:var(--od); color:var(--or); display:grid; place-items:center; font-weight:800; font-family:var(--display); }
.handover-note b { color:var(--tx); }
.terms { display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:18px; font-size:14px; color:var(--mu2); }
.terms span::before { content:'✓'; color:var(--gr); font-weight:700; margin-right:8px; }

/* Plan chooser */
.chooser { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:20px 28px; align-items:center; background:var(--sf); border:1px solid var(--bo); border-radius:18px; padding:clamp(18px, 3vw, 26px); margin-bottom:20px; }
.chooser .qs { display:grid; gap:16px; }
.q { border:0; display:grid; gap:8px; min-width:0; }
.q legend { font-weight:600; font-size:15px; margin-bottom:8px; }
.opts { display:flex; flex-wrap:wrap; gap:8px; }
.opts label { cursor:pointer; position:relative; }
.opts input { position:absolute; opacity:0; pointer-events:none; }
.opts span { display:inline-block; padding:8px 13px; border-radius:9px; border:1px solid var(--bo2); font-size:14px; color:var(--mu2); transition:all .15s; }
.opts input:checked + span { border-color:var(--or); background:var(--od); color:var(--tx); }
.opts input:focus-visible + span { outline:2px solid var(--or); outline-offset:2px; }
.verdict { border-radius:14px; background:var(--s2); border:1px solid var(--bo2); padding:18px; display:grid; gap:8px; min-width:0; }
.verdict .k { font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--mu); }
.verdict .name { font-family:var(--display); font-size:24px; font-weight:700; }
.verdict .name em { font-style:normal; color:var(--or); }
.verdict p { font-size:14.5px; color:var(--mu); }
.verdict a { font-weight:600; font-size:14px; }
@media (max-width: 860px) { .chooser { grid-template-columns:1fr; } }

/* Audience tiles (publish) */
.aud2 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.aud2 .tile { background:var(--sf); border:1px solid var(--bo); border-radius:18px; padding:clamp(20px, 3vw, 28px); display:grid; gap:12px; align-content:start; }
.aud2 h3 { font-size:21px; }
.aud2 p { font-size:15px; color:var(--mu); }
.aud2 .pain { font-size:14.5px; color:var(--mu2); background:var(--s2); border-radius:10px; padding:12px 14px; }
.aud2 a { font-weight:600; font-size:14.5px; }
@media (max-width: 760px) { .aud2 { grid-template-columns:1fr; } }

/* Before / after rows (publish) */
.ba { display:grid; gap:12px; }
.ba-row { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:14px; align-items:stretch; }
.ba-row > div { border-radius:14px; padding:16px 18px; min-width:0; }
.ba-row .b { background:var(--rd); border:1px solid rgba(226,109,109,0.22); }
.ba-row .a { background:var(--gd); border:1px solid rgba(52,195,143,0.25); }
.ba-row strong { display:block; font-size:15.5px; margin-bottom:2px; }
.ba-row p { font-size:14px; color:var(--mu); }
.ba-row .arr { align-self:center; color:var(--or); font-size:20px; }
.ba-head { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:14px; font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; }
.ba-head span:first-child { color:var(--re); }
.ba-head span:last-child { color:var(--gr); }
.ba-head i { width:20px; }
@media (max-width: 700px) { .ba-row, .ba-head { grid-template-columns:1fr; } .ba-row .arr { display:none; } .ba-head { display:none; } .ba-row { gap:6px; margin-bottom:8px; } }

/* Feature grid (publish) */
.fgrid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.fcard { background:var(--sf); border:1px solid var(--bo); border-radius:16px; padding:22px; display:grid; gap:8px; align-content:start; min-width:0; }
.fcard h3 { font-size:17px; font-family:var(--body); letter-spacing:-0.01em; }
.fcard p { font-size:14px; color:var(--mu); }
.fcard .ico { width:36px; height:36px; border-radius:10px; background:var(--od); color:var(--or); display:grid; place-items:center; margin-bottom:6px; }
.fcard .ico svg { width:20px; height:20px; }
@media (max-width: 900px) { .fgrid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .fgrid { grid-template-columns:1fr; } }

/* Calendar mock (publish hero) */
.cal { background:var(--sf); border:1px solid var(--bo2); border-radius:18px; box-shadow:0 30px 80px -30px rgba(0,0,0,0.8); width:100%; max-width:480px; justify-self:center; overflow:hidden; }
.cal-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--bo); font-size:13px; color:var(--mu); }
.cal-head b { font-size:14px; color:var(--tx); }
.cal-scroll { overflow-x:auto; }
.cal-grid { display:grid; grid-template-columns:repeat(7, minmax(56px, 1fr)); min-width:400px; }
.cal-day { border-left:1px solid var(--bo); padding:8px 6px; min-height:170px; display:flex; flex-direction:column; gap:6px; }
.cal-day:first-child { border-left:0; }
.cal-day > span { font-size:11px; color:var(--mu); font-weight:600; }
.post { font-size:11px; line-height:1.3; background:var(--s2); border:1px solid var(--bo2); border-radius:7px; padding:6px; color:var(--mu2); }
.post .net { display:flex; gap:3px; margin-top:4px; }
.post .net i { font-style:normal; font-size:9px; font-weight:800; padding:1px 4px; border-radius:4px; background:rgba(66,103,178,0.35); color:#c9d6ff; }
.post .net i.ig { background:rgba(214,41,118,0.3); color:#ffc6de; }
.cal-foot { display:flex; flex-wrap:wrap; gap:8px 18px; padding:12px 16px; border-top:1px solid var(--bo); font-size:12.5px; color:var(--mu); }
.cal-foot b { color:var(--tx); }

/* Price calculator (publish) */
.pcalc { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px, 4vw, 40px); align-items:center; }
.pcalc .rec { font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--gr); }
.pcalc .total { font-family:var(--display); font-size:clamp(34px, 5vw, 48px); font-weight:800; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
.pcalc .per { color:var(--mu); font-size:15px; }
.pcalc .rows { display:grid; gap:8px; margin-top:14px; }
.pcalc .rows div { display:flex; justify-content:space-between; gap:12px; font-size:14px; color:var(--mu); border-bottom:1px solid var(--bo); padding-bottom:8px; }
.pcalc .rows b { color:var(--tx); font-variant-numeric:tabular-nums; white-space:nowrap; }
.term { display:inline-flex; background:var(--s2); border:1px solid var(--bo2); border-radius:10px; padding:3px; margin-top:6px; }
.term button { font:600 13.5px var(--body); color:var(--mu); background:transparent; border:0; padding:8px 14px; min-height:40px; border-radius:8px; cursor:pointer; }
.term button[aria-pressed="true"] { background:var(--or); color:var(--on-or); }
@media (max-width: 860px) { .pcalc { grid-template-columns:1fr; } }

/* Two futures (closing) */
.futures { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.future { border-radius:18px; padding:clamp(20px, 3vw, 28px); display:grid; gap:14px; align-content:start; }
.future.without { background:var(--sf); border:1px solid var(--bo); }
.future.with { background:linear-gradient(160deg, rgba(247,107,28,0.13), rgba(247,107,28,0.03) 60%); border:1px solid rgba(247,107,28,0.3); }
.future .tag { font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; }
.future.without .tag { color:var(--re); }
.future.with .tag { color:var(--or); }
.future ul { list-style:none; display:grid; gap:12px; }
.future li { font-size:15px; color:var(--mu2); padding-left:22px; position:relative; }
.future li::before { position:absolute; left:0; top:0; font-weight:800; }
.future.without li::before { content:'−'; color:var(--re); }
.future.with li::before { content:'+'; color:var(--or); }
.future li b { color:var(--tx); }
@media (max-width: 780px) { .futures { grid-template-columns:1fr; } }

/* FAQ */
.faq { display:grid; gap:10px; max-width:820px; }
.faq details { background:var(--sf); border:1px solid var(--bo); border-radius:12px; }
.faq summary { cursor:pointer; padding:18px 22px; font-weight:600; font-size:15.5px; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; color:var(--or); font-size:22px; font-weight:400; line-height:1; }
.faq details[open] summary::after { content:'–'; }
.faq details p { padding:0 22px 20px; font-size:14.5px; color:var(--mu); max-width:70ch; }

/* Closing CTA */
.close { text-align:center; border-radius:22px; padding:clamp(32px, 5vw, 56px) clamp(20px, 4vw, 40px); background:radial-gradient(ellipse at top, rgba(247,107,28,0.18), transparent 70%), var(--sf); border:1px solid rgba(247,107,28,0.28); display:grid; gap:16px; justify-items:center; margin-top:16px; }
.close h2 { max-width:24ch; }
.close .lede { margin:0 auto; }
.close .ctas { justify-content:center; margin-top:8px; }

footer { border-top:1px solid var(--bo); padding-block:32px; font-size:13px; color:var(--mu); }
.foot { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.foot a { color:var(--mu); }
.foot a:hover { color:var(--or); }