:root{
  --ink:#18181B; --ink2:#26262b; --gold:#EAA908; --gold2:#FACC15; --goldtint:#FFF7E4;
  --paper:#FbF9F4; --card:#ffffff; --muted:#6b6b73; --line:rgba(24,24,27,.10);
  --green:#1F9D57; --greentint:#E9F6EE; --red:#D5502F; --redtint:#FBEDE8;
  --shadow:0 1px 2px rgba(24,24,27,.05), 0 12px 40px rgba(24,24,27,.10);
  --radius:16px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--ink); background:var(--paper); line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  font-synthesis:none;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }
/* Display face: Bricolage Grotesque on marketing headings only (UI/mockups stay Inter) */
h1, .hero h1, .sec-head h2, .cta h2, .roi-copy h2, .faq h2{
  font-family:'Bricolage Grotesque','Inter',sans-serif; font-weight:800; letter-spacing:-.025em; text-wrap:balance;
}
h1,h2,h3{ line-height:1.08; letter-spacing:-.02em; text-wrap:balance; }
section{ scroll-margin-top:80px; }
.gold{ color:var(--gold); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  background:var(--ink); color:#fff; font-weight:700; font-size:15px;
  padding:14px 22px; border-radius:12px; border:1px solid var(--ink);
  cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(24,24,27,.22); }
.btn.btn-sm{ padding:9px 16px; font-size:14px; border-radius:10px; }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn.ghost:hover{ background:#fff; border-color:var(--ink); }

/* header */
.hd{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:24px;
  padding:14px clamp(18px,5vw,64px); backdrop-filter:saturate(160%) blur(10px);
  background:rgba(251,249,244,.78); border-bottom:1px solid var(--line);
}
.logo{ display:inline-flex; align-items:center; gap:9px; font-weight:900; font-size:19px; letter-spacing:-.02em; }
.logo img{ height:26px; width:auto; display:block; }
.ft .logo img{ height:22px; }
.logo .dot{ width:13px; height:13px; border-radius:4px; background:var(--gold); box-shadow:0 0 0 3px var(--goldtint); }
.nav{ display:flex; gap:26px; margin-left:auto; font-size:14.5px; font-weight:500; color:var(--muted); }
.nav a:hover{ color:var(--ink); }
.hd .btn{ margin-left:0; }
.nav + .btn{ margin-left:0; }

/* hero */
.hero{
  display:grid; grid-template-columns:1.02fr .98fr; gap:48px; align-items:center;
  max-width:1200px; margin:0 auto; padding:clamp(40px,7vw,88px) clamp(18px,5vw,32px) 40px;
}
.eyebrow{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); background:var(--goldtint); border:1px solid rgba(234,169,8,.3); padding:6px 13px; border-radius:20px; }
.eyebrow.light{ color:var(--gold2); background:rgba(234,169,8,.14); border-color:rgba(234,169,8,.3); }
h1{ font-size:clamp(40px,6.4vw,68px); font-weight:900; margin:20px 0 0; }
.hero .sub{ font-size:clamp(16px,2vw,19px); color:var(--muted); max-width:30rem; margin:18px 0 26px; }

.wl-form{ display:flex; gap:10px; max-width:30rem; }
.wl-form input[type=email]{
  flex:1; min-width:0; padding:14px 16px; font-size:15px; border-radius:12px;
  border:1px solid var(--line); background:#fff; color:var(--ink); outline:none;
  transition:border .15s, box-shadow .15s;
}
.wl-form input[type=email]:focus{ border-color:var(--gold); box-shadow:0 0 0 4px var(--goldtint); }
.wl-form .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.wl-note{ font-size:13px; color:var(--muted); margin-top:12px; }
.wl-note.light{ color:#b9b9c2; }
/* early-access offer perks — highlighted */
.perks{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; padding:0; color:var(--ink); font-size:14px; }
.perks li{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--ink); background:var(--goldtint); border:1px solid rgba(234,169,8,.34); padding:7px 13px 7px 9px; border-radius:22px; }
.perks li b{ font-weight:800; }
.perks .pk-ic{ display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border-radius:50%; background:var(--gold); color:#fff; font-size:10px; font-weight:900; flex:0 0 auto; }

.spots{ margin-top:26px; max-width:22rem; }
.spots-bar{ height:8px; border-radius:20px; background:rgba(24,24,27,.08); overflow:hidden; }
.spots-bar span{ display:block; height:100%; border-radius:20px; background:linear-gradient(90deg,var(--gold),var(--gold2)); transition:width 1.1s cubic-bezier(.2,.7,.2,1); }
.spots-txt{ font-size:13px; color:var(--muted); margin-top:8px; }
.spots-txt b{ color:var(--ink); }
.spots.light .spots-bar{ background:rgba(255,255,255,.14); }
.spots.light .spots-txt{ color:#b9b9c2; } .spots.light .spots-txt b{ color:#fff; }

/* hero mockup */
.hero-mock{ position:relative; min-height:420px; }
.mock{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.mock-dash{ transform:rotate(1.2deg); }
.mock-top{ display:flex; align-items:center; gap:6px; padding:11px 14px; border-bottom:1px solid var(--line); background:#faf9f7; }
.tl{ width:10px; height:10px; border-radius:50%; } .tl.r{ background:#f0685a; } .tl.y{ background:#f5bd4f; } .tl.g{ background:#61c454; }
.mock-url{ margin-left:10px; font-size:11px; color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:6px; padding:2px 10px; }
.mock-body{ display:grid; grid-template-columns:128px 1fr; min-height:340px; }
.mk-side{ background:#fbfaf8; border-right:1px solid var(--line); padding:14px 10px; }
.mk-logo{ display:flex; align-items:center; gap:7px; font-weight:800; font-size:13px; margin-bottom:14px; }
.mk-logo .dot{ width:10px; height:10px; border-radius:3px; background:var(--gold); }
.mk-nav{ font-size:11.5px; color:var(--muted); padding:7px 9px; border-radius:8px; margin-bottom:3px; }
.mk-nav.on{ background:var(--ink); color:#fff; font-weight:600; }
.mk-main{ padding:16px 18px; }
.mk-h{ font-size:12px; font-weight:700; color:var(--muted); margin-bottom:11px; }
.mk-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:14px; }
.mk-kpi{ border:1px solid var(--line); border-radius:11px; padding:10px 11px; background:#fff; }
.mk-kpi.gold{ background:var(--goldtint); border-color:rgba(234,169,8,.3); }
.mk-kpi span{ display:block; font-size:9.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.mk-kpi b{ display:block; font-size:16px; font-weight:800; margin:3px 0 1px; }
.mk-kpi i{ font-size:9.5px; font-style:normal; font-weight:700; } .up{ color:var(--green); }
.mk-chart{ border:1px solid var(--line); border-radius:11px; padding:12px; margin-bottom:12px; background:#fff; }
.bars{ display:flex; align-items:flex-end; gap:8px; height:66px; }
.bars i{ flex:1; background:rgba(24,24,27,.10); border-radius:5px 5px 0 0; }
.bars i.hi{ background:linear-gradient(180deg,var(--gold2),var(--gold)); }
.mk-legend{ font-size:10px; color:var(--muted); margin-top:8px; }
.mk-rows{ display:flex; flex-direction:column; gap:6px; }
.mk-row{ display:flex; align-items:center; gap:9px; font-size:11.5px; }
.mk-row .av{ width:20px; height:20px; border-radius:6px; background:var(--ink); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.mk-row .nm{ font-weight:600; } .mk-row .amt{ margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums; }
.pill{ font-size:10px; font-weight:700; padding:2px 9px; border-radius:20px; }
.pill.g{ background:var(--greentint); color:var(--green); } .pill.r{ background:var(--redtint); color:var(--red); }
.pill.y{ background:rgba(250,204,21,.24); color:#7a5c00; } .pill.n{ background:#f1f1ee; color:var(--muted); }

.mock-card{ position:absolute; right:-6px; bottom:-14px; width:230px; padding:15px 16px; transform:rotate(-3deg); }
.mc-h{ font-size:12px; font-weight:800; margin-bottom:10px; }
.mc-outcomes{ display:flex; gap:6px; margin-bottom:12px; }
.mc-outcomes .pill{ border:1px solid transparent; opacity:.55; }
.mc-outcomes .pill.on{ opacity:1; box-shadow:0 0 0 2px rgba(31,157,87,.18); }
.mc-amt{ display:flex; align-items:baseline; justify-content:space-between; border-top:1px solid var(--line); padding-top:10px; }
.mc-amt span{ font-size:11px; color:var(--muted); } .mc-amt b{ font-size:18px; font-weight:800; }

/* marquee */
.marquee{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; padding:14px 0; }
.mq-track{ display:flex; gap:40px; white-space:nowrap; width:max-content; animation:mq 22s linear infinite; }
.mq-track span{ font-weight:700; color:var(--muted); font-size:15px; display:inline-flex; align-items:center; gap:40px; }
.mq-track span::before{ content:"✦"; color:var(--gold); }
@keyframes mq{ to{ transform:translateX(-50%); } }

/* sections */
.sec{ max-width:1160px; margin:0 auto; padding:clamp(56px,9vw,104px) clamp(18px,5vw,32px); }
/* full-bleed tinted bands to break the paper rhythm (warm gold wash) */
.sec.band{ position:relative; z-index:0; }
.sec.band::before{ content:""; position:absolute; z-index:-1; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%);
  background:linear-gradient(180deg,#FCF8EF 0%,#FAF3E2 100%);
  border-top:1px solid rgba(234,169,8,.15); border-bottom:1px solid rgba(234,169,8,.15); }
.sec-head{ max-width:38rem; margin:0 auto clamp(30px,5vw,52px); text-align:center; }
.kicker{ font-size:12.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--gold); }
.sec-head h2{ font-size:clamp(28px,4.6vw,44px); font-weight:900; margin:12px 0 12px; }
.sec-head p{ color:var(--muted); font-size:clamp(15px,1.7vw,18px); }

/* features */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feat{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 22px 24px; transition:transform .18s, box-shadow .2s, border-color .2s; }
.feat:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:rgba(234,169,8,.4); }
.feat.big{ grid-column:span 1; grid-row:span 2; display:flex; flex-direction:column; }
.feat h3{ font-size:19px; font-weight:800; margin-bottom:8px; }
.feat p{ color:var(--muted); font-size:14.5px; }
.mini{ margin-top:auto; padding-top:18px; }
.mini-form{ background:#fbfaf8; border:1px solid var(--line); border-radius:12px; padding:14px; margin-top:18px; }
.mf-row span{ font-size:13px; font-weight:600; }
.mf-opts{ display:flex; gap:7px; margin:10px 0 12px; }
.mf-opts i{ font-style:normal; font-size:12px; font-weight:600; padding:7px 12px; border-radius:9px; border:1px solid var(--line); background:#fff; color:var(--muted); }
.mf-opts i.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.mf-cta{ font-size:12.5px; font-weight:700; color:#fff; background:var(--gold); display:inline-block; padding:9px 14px; border-radius:9px; }
.mini-out{ display:flex; gap:8px; }
.mini-out .pill{ opacity:.5; } .mini-out .pill.on{ opacity:1; }
.mini-kpi{ display:flex; gap:8px; }
.mini-kpi div{ flex:1; border:1px solid var(--line); border-radius:10px; padding:9px; background:#fbfaf8; }
.mini-kpi span{ font-size:9.5px; color:var(--muted); text-transform:uppercase; }
.mini-kpi b{ display:block; font-size:16px; font-weight:800; margin-top:2px; }

/* ROI */
.roi{ }
.roi-wrap{ background:var(--ink); color:#fff; border-radius:24px; padding:clamp(28px,5vw,52px); display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; box-shadow:var(--shadow); }
.roi-copy .kicker{ color:var(--gold2); }
.roi-copy h2{ font-size:clamp(26px,3.6vw,38px); font-weight:900; margin:12px 0 12px; }
.roi-copy p{ color:#b9b9c2; max-width:24rem; }
.roi-slider{ display:block; margin-top:24px; }
.roi-slider span{ font-size:14px; color:#d4d4d8; } .roi-slider b{ color:var(--gold2); }
.roi-slider input{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:20px; background:rgba(255,255,255,.16); margin-top:12px; outline:none; }
.roi-slider input::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--gold); cursor:pointer; box-shadow:0 0 0 5px rgba(234,169,8,.22); }
.roi-slider input::-moz-range-thumb{ width:22px; height:22px; border:none; border-radius:50%; background:var(--gold); cursor:pointer; }
.roi-plans{ display:flex; gap:8px; margin-top:22px; }
.roi-plan{ flex:1; padding:9px 8px; border-radius:11px; border:1.5px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05); color:#d4d4d8; font:inherit; font-weight:700; font-size:14px; cursor:pointer; transition:border-color .15s, background .15s, color .15s; }
.roi-plan:hover{ border-color:rgba(255,255,255,.34); color:#fff; }
.roi-plan.is-active{ border-color:var(--gold); background:var(--gold); color:var(--ink); box-shadow:0 0 0 4px rgba(234,169,8,.18); }
.roi-plan:focus-visible{ outline:2px solid var(--gold2); outline-offset:2px; }
.roi-card{ background:#fff; color:var(--ink); border-radius:18px; padding:30px 28px; }
/* Each price + its breakdown is one group; the divider sits BELOW the breakdown. */
.roi-line{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; font-size:15px; padding-top:20px; }
.roi-card .roi-line:first-child{ padding-top:0; }
.roi-line span{ color:var(--muted); }
.roi-line b{ font-weight:800; font-size:19px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.roi-line-klozd b{ font-size:23px; }
.roi-breakdown{ font-size:12px; font-weight:600; color:var(--muted); margin-top:6px; padding-bottom:20px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
.roi-save{ display:flex; align-items:baseline; gap:8px; padding:22px 0 6px; }
.roi-save span{ color:var(--muted); font-size:14px; } .roi-save b{ font-size:38px; font-weight:900; color:var(--green); line-height:1; font-variant-numeric:tabular-nums; } .roi-save i{ font-style:normal; color:var(--muted); font-size:13px; }
.roi-year{ font-size:13px; color:var(--muted); } .roi-year b{ color:var(--ink); }

/* pricing */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start; }
.price{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; }
.price.hot{ border-color:var(--ink); box-shadow:var(--shadow); }
.pr-badge{ position:absolute; top:-11px; left:24px; background:var(--gold); color:var(--ink); font-size:11px; font-weight:800; padding:4px 11px; border-radius:20px; text-transform:uppercase; letter-spacing:.04em; }
.pr-name{ font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.pr-val{ font-size:20px; font-weight:800; margin:8px 0 16px; }
.price ul{ list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:20px; }
.price li{ font-size:14px; color:var(--ink); padding-left:24px; position:relative; }
.price li::before{ content:"✓"; position:absolute; left:0; color:var(--green); font-weight:800; }
.price .btn{ width:100%; }

/* FAQ */
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:0 20px; transition:border-color .2s, box-shadow .2s; }
.faq-item[open]{ border-color:rgba(234,169,8,.4); box-shadow:var(--shadow); }
.faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:19px 0; font-weight:700; font-size:clamp(15px,1.9vw,17px); color:var(--ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-plus{ position:relative; flex:0 0 auto; width:20px; height:20px; }
.faq-plus::before, .faq-plus::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--gold); border-radius:2px; transition:transform .25s ease; }
.faq-plus::before{ width:13px; height:2.5px; }
.faq-plus::after{ width:2.5px; height:13px; }
.faq-item[open] .faq-plus::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-a{ color:var(--muted); font-size:15px; line-height:1.6; padding:0 0 20px; max-width:64ch; animation:faqIn .28s ease; }
.faq-a b{ color:var(--ink); font-weight:700; }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* Trust band */
.trust{ background:var(--ink); color:#fff; }
.trust-in{ max-width:1160px; margin:0 auto; padding:20px clamp(18px,5vw,32px); display:flex; flex-wrap:wrap; justify-content:center; gap:14px 36px; }
.trust-i{ display:inline-flex; align-items:center; gap:9px; font-size:14.5px; font-weight:600; color:#e4e4e7; }
.trust-ic{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:rgba(234,169,8,.16); color:var(--gold2); font-size:11px; font-weight:900; }

/* CTA */
.cta{ background:radial-gradient(120% 120% at 82% 6%, #2c2c33 0%, #18181B 55%, #101013 100%); color:#fff; }
.cta-inner{ max-width:640px; margin:0 auto; padding:clamp(56px,9vw,110px) clamp(18px,5vw,32px); text-align:center; }
.cta h2{ font-size:clamp(30px,5.4vw,52px); font-weight:900; margin:16px 0 12px; }
.cta p{ color:#c4c4cc; font-size:clamp(15px,1.8vw,18px); max-width:30rem; margin:0 auto 26px; }
.wl-form.big{ max-width:30rem; margin:0 auto; }
.cta .wl-form.big input[type=email]{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#fff; }
.cta .wl-form.big input[type=email]::placeholder{ color:#9a9aa4; }
.cta .wl-form.big input[type=email]:focus{ border-color:var(--gold); box-shadow:0 0 0 4px rgba(234,169,8,.18); }
.cta .btn{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.cta .btn:hover{ background:var(--gold2); }
.cta .spots{ margin:26px auto 0; }

/* footer — dark, continues the CTA's dark base */
.ft{ background:#0d0d0f; color:#9a9aa4; border-top:1px solid rgba(255,255,255,.07); }
.ft-inner{ max-width:1160px; margin:0 auto; padding:clamp(44px,6vw,68px) clamp(18px,5vw,32px) 40px; display:grid; grid-template-columns:1.7fr .8fr .8fr 1.1fr; gap:clamp(28px,4vw,48px); }
.ft-brand .logo img{ height:24px; }
.ft-brand p{ margin:16px 0 18px; font-size:14px; line-height:1.65; color:#7f7f89; max-width:32ch; }
.ft-badge{ display:inline-flex; align-items:center; font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--gold2); background:rgba(234,169,8,.12); border:1px solid rgba(234,169,8,.28); padding:6px 12px; border-radius:20px; }
.ft-col h4{ color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin:2px 0 15px; }
.ft-col a{ display:block; color:#9a9aa4; font-size:14px; padding:5px 0; width:fit-content; transition:color .15s; }
.ft-col a:hover{ color:var(--gold2); }
.ft-cta p{ color:#7f7f89; font-size:13.5px; line-height:1.5; margin:0 0 15px; }
.ft-cta .btn{ background:var(--gold); border-color:var(--gold); color:var(--ink); font-size:14px; padding:11px 17px; }
.ft-cta .btn:hover{ background:var(--gold2); border-color:var(--gold2); }
.ft-bottom{ max-width:1160px; margin:0 auto; padding:20px clamp(18px,5vw,32px); border-top:1px solid rgba(255,255,255,.07); display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; font-size:13px; color:#67676f; }
.ft-bottom a{ color:#c4c4cc; font-weight:600; }
.ft-bottom a:hover{ color:var(--gold2); }
@media (max-width:760px){
  .ft-inner{ grid-template-columns:1fr 1fr; gap:32px 20px; }
  .ft-brand{ grid-column:1 / -1; }
}
@media (max-width:440px){ .ft-inner{ grid-template-columns:1fr; gap:26px; } }

/* toast */
.toast{ position:fixed; left:50%; bottom:28px; transform:translate(-50%,140%); opacity:0; pointer-events:none; visibility:hidden; background:var(--ink); color:#fff; padding:13px 20px; border-radius:12px; font-size:14px; font-weight:600; box-shadow:var(--shadow); z-index:100; transition:transform .3s cubic-bezier(.2,.9,.3,1.2), opacity .25s ease, visibility .25s; max-width:90vw; }
.toast.show{ transform:translate(-50%,0); opacity:1; pointer-events:auto; visibility:visible; }
.toast.err{ background:var(--red); }

/* responsive */
@media (max-width:900px){
  .hero{ grid-template-columns:minmax(0,1fr); gap:36px; }
  .hero-mock{ min-height:auto; }
  .mock-card{ position:static; width:auto; max-width:230px; transform:none; margin:16px auto 0; }
  .mock-dash{ transform:none; }
  .feat-grid{ grid-template-columns:repeat(2,1fr); }
  .feat.big{ grid-row:span 1; }
  .roi-wrap{ grid-template-columns:minmax(0,1fr); }
  .price-grid{ grid-template-columns:minmax(0,1fr); }
  .nav{ display:none; }
}
@media (max-width:560px){
  .feat-grid{ grid-template-columns:1fr; }
  .wl-form{ flex-direction:column; } .wl-form .btn{ width:100%; }
}

/* ═══════════════ Replaces-your-stack section ═══════════════ */
.tools .sec-head{ margin-bottom:clamp(24px,4vw,40px); }
.tool-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.tool{ display:flex; align-items:center; gap:11px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; font-weight:700; font-size:15px; transition:transform .18s ease, box-shadow .2s ease, border-color .2s; }
.tool i{ margin-left:auto; font-style:normal; font-weight:500; font-size:11.5px; color:var(--muted); }
.tool .tdot{ width:11px; height:11px; border-radius:50%; background:var(--c,#999); box-shadow:0 0 0 3px color-mix(in srgb, var(--c,#999) 16%, transparent); flex:0 0 auto; }
.tool:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--c,#999) 45%, var(--line)); }
@media (max-width:900px){ .tool-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .tool-grid{ grid-template-columns:1fr; } }

/* ═══════════════ Animations ═══════════════ */
/* Scroll reveal */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change:opacity, transform; }
.reveal.in{ opacity:1; transform:none; }
/* Stagger children (features / tools / pricing) */
.feat-grid > .reveal.in{ transition-delay:calc(var(--i,0) * .06s); }
.tool-grid > .reveal.in{ transition-delay:calc(var(--i,0) * .04s); }
.price-grid > .reveal.in{ transition-delay:calc(var(--i,0) * .08s); }

/* Hero entrance (above the fold — animate on load) */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
.hero-copy > *{ animation:fadeUp .7s both cubic-bezier(.2,.7,.2,1); }
.hero-copy > .eyebrow{ animation-delay:.05s; }
.hero-copy > h1{ animation-delay:.13s; }
.hero-copy > .sub{ animation-delay:.22s; }
.hero-copy > .wl-form{ animation-delay:.30s; }
.hero-copy > .wl-note, .hero-copy > .perks{ animation-delay:.37s; }
.hero-copy > .spots{ animation-delay:.44s; }
@keyframes floatIn{ from{ opacity:0; transform:translateY(26px) rotate(1.2deg); } to{ opacity:1; transform:translateY(0) rotate(1.2deg); } }
.mock-dash{ animation:floatIn .9s .25s both cubic-bezier(.2,.7,.2,1); }
.mock-card{ animation:fadeUp .8s .6s both; }
/* gentle float loop on the outcome card */
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-7px) rotate(-3deg); } }
.mock-card{ animation:fadeUp .8s .6s both, bob 5s 1.4s ease-in-out infinite; }

/* Mockup bars grow */
@keyframes growBar{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
.bars i{ transform-origin:bottom; animation:growBar .7s both cubic-bezier(.2,.8,.2,1); }
.bars i:nth-child(1){ animation-delay:.5s } .bars i:nth-child(2){ animation-delay:.58s }
.bars i:nth-child(3){ animation-delay:.66s } .bars i:nth-child(4){ animation-delay:.74s }
.bars i:nth-child(5){ animation-delay:.82s } .bars i:nth-child(6){ animation-delay:.9s }

/* Spots bar fill animation */
@keyframes fillBar{ from{ width:0 } }
.spots-bar span{ animation:fillBar 1.1s .5s both cubic-bezier(.3,.8,.3,1); }

/* Header link underline + nav hover */
.nav a{ position:relative; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--gold); transition:width .22s ease; border-radius:2px; }
.nav a:hover::after{ width:100%; }

/* Button shine on hover */
.btn{ position:relative; overflow:hidden; }
.btn::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%); transform:translateX(-120%); transition:transform .6s ease; }
.btn:hover::after{ transform:translateX(120%); }

/* Reduced motion — respect the user's preference */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .mq-track{ animation:none; }
}

/* header shadow on scroll + legal footer links */
.hd{ transition:box-shadow .25s ease, background .25s ease; }
.hd.scrolled{ box-shadow:0 4px 24px rgba(24,24,27,.07); }
.ft-links{ display:flex; gap:18px; flex-wrap:wrap; }
.ft-links a{ color:var(--muted); font-weight:500; }
.ft-links a:hover{ color:var(--ink); }
/* Legal pages */
.legal{ max-width:760px; margin:0 auto; padding:clamp(40px,7vw,80px) clamp(18px,5vw,28px) 60px; }
.legal h1{ font-size:clamp(30px,5vw,44px); font-weight:900; margin-bottom:.2em; }
.legal .updated{ color:var(--muted); font-size:14px; margin-bottom:2em; }
.legal h2{ font-size:19px; font-weight:800; margin:1.6em 0 .4em; }
.legal p, .legal li{ color:#3a3a40; font-size:15px; }
.legal ul{ padding-left:1.2em; }
.legal a{ color:var(--gold); font-weight:600; }
.legal .back{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-weight:600; font-size:14px; margin-bottom:2em; }

/* mockup logo = real wordmark */
.mk-logo img{ height:15px; width:auto; display:block; }

/* ═══════════════ Product tour ═══════════════ */
.tour-row{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px,5vw,60px); align-items:center; margin-bottom:clamp(40px,6vw,72px); }
.tour-row.rev .tour-copy{ order:2; }
.tour-copy .pin{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--c,#EAA908); background:color-mix(in srgb, var(--c,#EAA908) 12%, #fff); border:1px solid color-mix(in srgb, var(--c,#EAA908) 30%, transparent); padding:5px 12px; border-radius:20px; }
.tour-copy h3{ font-size:clamp(24px,3.4vw,34px); font-weight:900; margin:16px 0 12px; }
.tour-copy p{ color:var(--muted); font-size:16px; max-width:26rem; }
.ticks{ list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:10px; }
.ticks li{ position:relative; padding-left:28px; font-size:14.5px; font-weight:600; }
.ticks li::before{ content:"✓"; position:absolute; left:0; top:-1px; width:18px; height:18px; border-radius:50%; background:var(--greentint); color:var(--green); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; }

.big-mock{ box-shadow:var(--shadow); transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s; }
.big-mock.tilt{ transform:perspective(1400px) rotateY(6deg) rotateX(2deg); }
.big-mock.tilt-r{ transform:perspective(1400px) rotateY(-6deg) rotateX(2deg); }
.tour-mock:hover .big-mock{ transform:perspective(1400px) rotateY(0) rotateX(0) translateY(-4px); box-shadow:0 24px 60px rgba(24,24,27,.16); }
.pill.b{ background:#E8F0FE; color:#2563EB; }

/* Leads table mock */
.bm-body{ padding:16px 18px 20px; }
.bm-toolbar{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.bm-tab{ font-size:12px; font-weight:600; color:var(--muted); padding:6px 12px; border-radius:8px; }
.bm-tab.on{ background:var(--ink); color:#fff; }
.bm-search{ margin-left:auto; font-size:12px; color:#9a9aa4; border:1px solid var(--line); border-radius:8px; padding:6px 14px; }
.bm-table{ border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.bm-th, .bm-tr{ display:grid; grid-template-columns:1.6fr .9fr .8fr .7fr; align-items:center; gap:8px; padding:11px 14px; }
.bm-th{ background:#faf9f7; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; }
.bm-tr{ border-top:1px solid var(--line); font-size:13px; }
.bm-tr .nm{ display:flex; align-items:center; gap:9px; font-weight:600; }
.bm-tr .av{ width:22px; height:22px; border-radius:7px; background:var(--ink); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; font-style:normal; }
.bm-tr .amt{ font-weight:700; font-variant-numeric:tabular-nums; }
.bm-tr .act{ color:var(--muted); font-size:12px; }
.bm-tr .pill{ font-size:10px; }

/* Inbox mock */
.ib-body{ padding:16px 18px 20px; }
.ib-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:14px; }
.ib-stat{ border:1px solid var(--line); border-radius:11px; padding:11px 12px; }
.ib-stat.gold{ background:var(--goldtint); border-color:rgba(234,169,8,.3); }
.ib-stat span{ display:block; font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.ib-stat b{ font-size:20px; font-weight:800; }
.ib-card{ display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:8px; background:#fff; transition:transform .18s, box-shadow .2s; }
.ib-card:hover{ transform:translateX(3px); box-shadow:var(--shadow); }
.ib-card .ic{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:15px; }
.ic-c{ background:#FFF7E4; } .ic-r{ background:var(--redtint); } .ic-g{ background:var(--greentint); }
.ib-card .ic-txt{ display:flex; flex-direction:column; }
.ib-card .ic-txt b{ font-size:13px; } .ib-card .ic-txt span{ font-size:11.5px; color:var(--muted); }
.ib-card > .pill{ margin-left:auto; }

@media (max-width:860px){
  .tour-row{ grid-template-columns:minmax(0,1fr); gap:22px; }
  .tour-row.rev .tour-copy{ order:0; }
  .big-mock.tilt, .big-mock.tilt-r{ transform:none; }
}

/* ═══════════════ Mobile refinements ═══════════════ */
@media (max-width:760px){
  /* kill horizontal overflow: let flex/grid children shrink */
  .hero-copy, .hero-mock, .tour-copy, .tour-mock, .roi-copy, .roi-card, .mk-main, .sec-head{ min-width:0; }
  .mock, .big-mock{ max-width:100%; }
  .hero-mock .mock-card{ max-width:230px; margin:16px auto 0; }
  .big-mock.tilt, .big-mock.tilt-r{ transform:none; }
  .wl-form{ max-width:100%; }
  .hero .sub, .tour-copy p, .roi-copy p, .sec-head p{ max-width:100%; }
  /* dashboard mockup shrinks to fit the phone */
  .mock-body{ grid-template-columns:88px 1fr; min-height:auto; }
  .mk-side{ padding:11px 8px; } .mk-nav{ font-size:10px; padding:6px 7px; margin-bottom:2px; }
  .mk-logo img{ height:13px; }
  .mk-main{ padding:13px 12px; }
  .mk-kpis{ gap:6px; } .mk-kpi{ padding:8px; } .mk-kpi b{ font-size:12.5px; } .mk-kpi span{ font-size:8px; } .mk-kpi i{ font-size:8px; }
  .mk-h{ font-size:11px; }
  /* leads table: drop the Activity column on small screens */
  .bm-th span:last-child, .bm-tr span:last-child{ display:none; }
  .bm-th, .bm-tr{ grid-template-columns:1.5fr .9fr .7fr; padding:10px 11px; }
  .bm-tr{ font-size:12px; }
  .bm-toolbar{ flex-wrap:wrap; }
  .bm-search{ display:none; }
  /* inbox */
  .ib-stats{ gap:6px; } .ib-stat b{ font-size:17px; } .ib-stat span{ font-size:8.5px; }
  .ib-card .ic-txt b{ font-size:12px; } .ib-card .ic-txt span{ font-size:11px; }
}
@media (max-width:420px){
  h1{ font-size:37px; }
  .btn{ font-size:14px; padding:13px 18px; }
  .mk-kpis{ grid-template-columns:repeat(3,1fr); }
}

/* ═══════════════ Landing feedback additions ═══════════════ */
/* Hero transformation subtitle */
.hero-tag{ font-size:clamp(16px,2.3vw,21px); font-weight:700; color:var(--ink); margin:16px 0 0; letter-spacing:-.01em; }
.hero-tag b{ color:var(--gold); font-weight:800; }
.hero-copy > .hero-tag{ animation-delay:.18s; }

/* Repeated section CTA (alternating copy) */
.sec-cta{ display:flex; justify-content:center; margin-top:clamp(30px,4.5vw,48px); }
.sec-cta .btn{ font-size:15px; padding:15px 26px; }

/* Cost of inaction (below ROI) */
.inaction{ max-width:1000px; margin:clamp(38px,5vw,60px) auto 0; }
.ina-head{ text-align:center; max-width:38rem; margin:0 auto clamp(20px,3vw,30px); }
.ina-head h3{ font-family:'Bricolage Grotesque','Inter',sans-serif; font-weight:800; letter-spacing:-.02em; font-size:clamp(22px,3.4vw,32px); margin:10px 0 10px; }
.ina-head p{ color:var(--muted); font-size:clamp(14px,1.6vw,16px); }
.ina-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ina-card{ display:flex; align-items:center; gap:13px; background:var(--card); border:1px solid var(--line); border-left:3px solid var(--red); border-radius:14px; padding:16px 18px; box-shadow:var(--shadow); }
.ina-ic{ font-size:22px; flex:0 0 auto; }
.ina-txt{ flex:1; min-width:0; }
.ina-txt b{ display:block; font-size:13.5px; font-weight:700; line-height:1.3; }
.ina-txt span{ display:block; font-size:11.5px; color:var(--muted); margin-top:2px; }
.ina-amt{ font-size:18px; font-weight:800; color:var(--red); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ina-foot{ text-align:center; margin-top:20px; font-size:14.5px; color:var(--muted); }
.ina-foot b{ color:var(--ink); }

/* Pricing "from €X /mo" */
.pr-from{ font-size:13px; font-weight:600; color:var(--muted); margin-right:2px; }
.pr-per{ font-size:15px; font-weight:600; color:var(--muted); }

@media (max-width:760px){
  .ina-grid{ grid-template-columns:1fr; }
  .sec-cta .btn{ width:100%; justify-content:center; }
}

/* Pricing: seats sub-line */
.pr-seats{ font-size:12px; font-weight:600; color:var(--muted); margin:-6px 0 14px; }
.price.hot .pr-seats{ color:#8a5a00; }