/* Landing page. Tokens, nav, buttons and plan cards come from site.css. */
/* hero */
.hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;overflow:hidden;padding:112px 0 84px}
.hero-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(640px circle at var(--mx,72%) var(--my,26%),rgba(var(--acc-r),.2),transparent 62%),linear-gradient(rgba(var(--ink-r),.05) 1px,transparent 1px) 0 0/64px 64px,linear-gradient(90deg,rgba(var(--ink-r),.05) 1px,transparent 1px) 0 0/64px 64px;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.hero-bg .d{position:absolute;width:150px;height:86px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:rgba(var(--acc-r),.13);animation:drift 15s ease-in-out infinite}
.hero-bg .d1{left:6%;top:62%}.hero-bg .d2{right:46%;top:14%;width:96px;height:55px;animation-delay:-5s;background:rgba(var(--ink-r),.07)}.hero-bg .d3{right:5%;bottom:10%;animation-delay:-9s}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.hero h1.mega{font-size:clamp(42px,6.2vw,84px);max-width:9.5em}
.seg{display:inline-flex;gap:2px;padding:4px;border:1px solid var(--line);border-radius:99px;background:var(--bg2);margin:0 0 22px;max-width:100%;overflow-x:auto}
.seg button{border:0;background:none;color:var(--mut);font:inherit;font-size:14px;font-weight:550;padding:9px 18px;border-radius:99px;cursor:pointer;white-space:nowrap;transition:background .25s,color .25s}
.seg button[aria-selected=true]{background:var(--solid);color:var(--on-solid)}
@media(hover:hover){.seg button[aria-selected=false]:hover{color:var(--ink)}}
.hero .lead{margin-bottom:30px;min-height:5.2em}
.note{font-size:14px;color:var(--mut);margin:18px 0 0}.note a{color:var(--accent2);text-decoration:underline}
.scroll-cue{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:3;display:grid;justify-items:center;gap:8px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut)}
.scroll-cue i{width:1px;height:34px;background:linear-gradient(var(--accent),transparent);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* product preview window */
.win{position:relative;background:var(--bg2);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;min-height:440px}
.win-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg3)}
.dots{display:flex;gap:6px}.dots i{width:9px;height:9px;border-radius:50%;background:rgba(var(--ink-r),.18)}
.win-title{font-size:13px;font-weight:600;flex:1}
.chip{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border:1px solid var(--line);border-radius:99px;color:var(--mut);white-space:nowrap}
.pane{padding:18px}.pane[hidden]{display:none}.pane.enter{animation:paneIn .55s cubic-bezier(.2,.7,.2,1)}
@keyframes paneIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stats div{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.stats b{display:block;font-size:20px;font-weight:650;letter-spacing:-.02em;line-height:1.2;font-variant-numeric:tabular-nums}.stats span{display:block;font-size:11.5px;line-height:1.3;color:var(--mut);margin-top:2px}
.stats .risk b{color:var(--bad)}
.plat-row{display:flex;align-items:center;gap:22px;margin:18px 0 6px}
.plat{width:156px;flex:none}.plat polygon{stroke:var(--bg2);stroke-width:1.5}
.t-ok{fill:var(--ok);fill-opacity:.6}.t-wip{fill:var(--accent);fill-opacity:.65}.t-risk{fill:var(--bad);fill-opacity:.75}.t-new{fill:none;stroke:rgba(var(--ink-r),.3)!important}
.legend{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:12.5px;color:var(--mut)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px}
.k-ok{background:var(--ok)}.k-wip{background:var(--accent)}.k-risk{background:var(--bad)}.k-new{border:1px solid var(--mut)}
.rows{list-style:none;margin:0;padding:0}
.rows li{display:grid;grid-template-columns:54px 1fr 90px 40px;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line);font-size:14px}
.rows .lotn{font:600 12.5px var(--mono);color:var(--ink2)}.rows .what{color:var(--mut)}.rows .pct{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.rows .risk .bar i{background:var(--bad)}
.bar{display:block;height:6px;border-radius:99px;background:rgba(var(--ink-r),.1);overflow:hidden}
.bar i{display:block;height:100%;width:var(--p);background:var(--accent);border-radius:99px;transform-origin:left;animation:grow 1.1s cubic-bezier(.2,.7,.2,1) both}
.bar.wide{margin-top:4px}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}
.post{border:1px solid var(--line);border-radius:16px;padding:14px;background:var(--bg)}
.post-head{display:flex;align-items:center;gap:12px}.post-head b{display:block;font-size:14.5px}.post-head small{color:var(--mut);font-size:12.5px}
.av{width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.pct-big{margin-left:auto;font-size:28px;font-weight:650;letter-spacing:-.03em;color:var(--accent)}
.photo{margin:12px 0;border-radius:12px;aspect-ratio:2/1;background:linear-gradient(180deg,rgba(var(--acc-r),.2),rgba(var(--ink-r),.04));color:var(--accent2);overflow:hidden}
.photo svg{width:100%;height:100%;display:block}.photo path{stroke-dasharray:700;stroke-dashoffset:700;animation:draw 1.8s .15s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.chat{display:grid;gap:8px;margin-top:14px}
.b{margin:0;padding:10px 14px;border-radius:16px;font-size:14px;max-width:82%;background:var(--bg3)}
.b.me{background:var(--accent);color:var(--on-accent);margin-left:auto}
.push{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--bg3);animation:drop .7s .2s cubic-bezier(.2,.7,.2,1) both}
@keyframes drop{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
.push-ico{width:36px;height:36px;border-radius:10px;background:var(--accent);flex:none}.push b{display:block;font-size:14.5px}.push small{color:var(--mut);font-size:12.5px}
.timeline{list-style:none;margin:22px 0 0;padding:0 0 0 22px;position:relative;display:grid;gap:18px}
.timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line)}
.timeline li{position:relative;display:flex;gap:14px;align-items:center}
.timeline li::before{content:"";position:absolute;left:-22px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--bg2)}
.timeline .th{width:64px;height:46px;border-radius:10px;background:linear-gradient(135deg,rgba(var(--acc-r),.35),rgba(var(--ink-r),.06));flex:none}
.timeline b{display:block;font-size:14.5px}.timeline small{color:var(--mut);font-size:12.5px}
/* audience strip */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;background:var(--bg2)}
.strip .wrap{display:flex;gap:18px 40px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.strip p{margin:0;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.strip ul{display:flex;flex-wrap:wrap;gap:8px 30px;list-style:none;margin:0;padding:0;font-weight:550;color:var(--ink2)}
/* product tour: this list is the no-script fallback; tour.css styles the live app that replaces it */
.tour-fallback{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.tour-fallback li{padding:20px 22px;border:1px solid var(--line);border-radius:18px;background:var(--bg2)}
.tour-fallback b{display:block;margin-bottom:4px;font-weight:620}.tour-fallback span{color:var(--mut);font-size:15px}
/* scroll-scrubbed lot build: plain text by default, sticky stage once the script has started it */
.scrub{border-top:1px solid var(--line)}
.scrub-stage{position:relative;padding:90px 0}
.scrub-stage canvas{display:none;width:100%;height:100%}
.scrub-ui{position:relative;z-index:2}
.scrub-copy{max-width:480px}.scrub-copy .big{font-size:clamp(32px,4.2vw,52px)}
.steps{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:4px}
.steps li{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:12px 14px;border-radius:14px}
.steps li span{font:600 12px var(--mono);color:var(--accent2);padding-top:4px}
.steps b{font-weight:600}.steps p{margin:2px 0 0;font-size:14.5px;color:var(--mut)}
.meter,.scrub-note{display:none}
.scrub.static canvas{display:block;position:relative;height:clamp(240px,40vw,420px)}
.scrub.static .scrub-stage{padding-top:50px}
.scrub.live .scrub-track{position:relative;height:620vh}
.scrub.live .scrub-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;padding:0}
.scrub.live canvas{display:block;position:absolute;inset:0;height:100%}
@media(min-width:821px){.scrub.live .scrub-stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--bg) 30%,rgba(var(--ink-r),0) 56%);opacity:.94}}
.scrub.live .scrub-ui{height:100%;display:flex;align-items:center;justify-content:space-between;pointer-events:none;padding-top:70px;padding-bottom:20px}
@media(max-height:900px){.scrub.live .scrub-copy .sub{display:none}.scrub.live .scrub-copy .big{margin-bottom:0}.scrub.live .steps{margin-top:18px}}
.scrub.live .steps li{opacity:.38;transition:opacity .4s,background .4s}.scrub.live .steps li.on{opacity:1;background:rgba(var(--ink-r),.06)}
.scrub.live .meter{display:block;align-self:flex-end;margin-bottom:7vh;text-align:right;min-width:min(26vw,240px)}
.meter span{font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.meter b{display:block;font-size:clamp(48px,6.4vw,92px);font-weight:650;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;margin:6px 0 14px}
.meter i{display:block;height:4px;background:rgba(var(--ink-r),.14);border-radius:99px;overflow:hidden}
.meter u{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0);text-decoration:none}
.scrub.live .scrub-note{display:block;position:absolute;right:24px;bottom:18px;margin:0;font-size:11.5px;color:var(--mut);z-index:2}
@media(max-width:820px){
  .scrub.live .scrub-ui{align-items:flex-end;justify-content:flex-start;padding-bottom:24px}
  .scrub.live .scrub-copy{background:linear-gradient(180deg,transparent,var(--bg) 34%);padding:56px 0 0;margin:0 -24px;padding-left:24px;padding-right:24px;max-width:none}
  .scrub.live .scrub-copy .sub{display:none}.scrub.live .scrub-copy .big{font-size:30px;margin-bottom:8px}.scrub.live .steps{margin-top:12px}
  .scrub.live .steps li:not(.on){display:none}
  .scrub.live .meter{position:absolute;top:84px;right:24px;margin:0;min-width:0}.scrub.live .meter b{font-size:44px;margin-bottom:8px}
  .scrub.live .scrub-note{left:24px;right:auto;bottom:4px}}
/* feature grid */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:64px}
.cell{grid-column:span 2;background:var(--bg2);border:1px solid var(--line);border-radius:22px;padding:30px;display:flex;flex-direction:column;overflow:hidden;transition:border-color .3s}
.cell.w3{grid-column:span 3}
.cell h3{margin:0 0 8px;font-size:22px;letter-spacing:-.02em;font-weight:620}.cell p{margin:0;color:var(--mut);font-size:15.5px}
.cell .viz{margin-top:auto;padding-top:26px}
@media(hover:hover){.cell:hover,.persona:hover{border-color:rgba(var(--acc-r),.55)}}
.slider{position:relative;height:6px;background:rgba(var(--ink-r),.12);border-radius:99px}
.slider i{position:absolute;left:0;top:0;bottom:0;width:var(--p);background:var(--accent);border-radius:99px;transform-origin:left}
.slider u{position:absolute;left:var(--p);top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(var(--acc-r),.2);text-decoration:none}
.cell.in .slider i{animation:grow 1.3s .2s cubic-bezier(.2,.7,.2,1) both}
.dates{display:flex;justify-content:space-between;margin-top:16px;font:12px var(--mono);color:var(--mut)}.dates .now{color:var(--ink)}
.viz .b{max-width:78%}.viz .b+.b{margin-top:8px}
.viz.bars{display:flex;align-items:flex-end;gap:8px;height:128px}
.bars i{flex:1;height:var(--h);background:linear-gradient(180deg,var(--accent),rgba(var(--acc-r),.25));border-radius:6px 6px 2px 2px;transform-origin:bottom}
.cell.in .bars i{animation:growY .9s cubic-bezier(.2,.7,.2,1) both}.bars i:nth-child(2){animation-delay:.07s!important}.bars i:nth-child(3){animation-delay:.14s!important}.bars i:nth-child(4){animation-delay:.21s!important}.bars i:nth-child(5){animation-delay:.28s!important}.bars i:nth-child(6){animation-delay:.35s!important}
@keyframes growY{from{transform:scaleY(0)}to{transform:none}}
.cube{width:112px;color:var(--accent);display:block;animation:bob 5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{padding:7px 14px;border:1px solid var(--line);border-radius:99px;font-size:13.5px;color:var(--ink2);background:var(--bg3)}
.code{display:flex;gap:8px;align-items:center}
.code i{font:600 22px var(--mono);font-style:normal;width:38px;height:50px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:var(--bg3)}
.code em{width:8px}
.globe svg{width:128px;color:var(--ink2);display:block}
.ping{fill:var(--accent);transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-in-out infinite}.ping.p2{animation-delay:-.8s}.ping.p3{animation-delay:-1.6s}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.9);opacity:.35}}
@media(max-width:980px){.cell,.cell.w3{grid-column:span 3}}
@media(max-width:640px){.bento{grid-template-columns:1fr}.cell,.cell.w3{grid-column:auto}}
/* finance tools: every card is labelled Coming soon and its mockup is sample data */
.fin-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:56px}
.fcard{display:flex;flex-direction:column;gap:10px;background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:22px;transition:border-color .3s}
@media(hover:hover){.fcard:hover{border-color:rgba(var(--acc-r),.55)}}
.fcard-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fgroup{margin:0;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent2);white-space:nowrap}
.chip.soon{color:var(--accent2);border-color:rgba(var(--acc-r),.45);background:rgba(var(--acc-r),.08)}.fcard .chip{padding:3px 8px;letter-spacing:.05em}
.fcard h3{margin:2px 0 0;font-size:19px;letter-spacing:-.015em;font-weight:620;line-height:1.25}
.fcard .fd{margin:0;font-size:14.5px;line-height:1.5;color:var(--mut)}
.fviz{margin-top:auto;padding:10px 14px 6px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.fviz small{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:2px}
.fviz ul{list-style:none;margin:0;padding:0;font-size:13.5px}
.fviz li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 0;border-top:1px solid var(--line)}
.fviz li:first-child{border-top:0}.fviz li span{color:var(--mut);min-width:0}
.fviz li b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.fviz li.fbar{display:block;border-top:0;padding:0 0 6px}
.fcard .bar i{animation:none}.fcard.in .bar i{animation:grow 1.1s .25s cubic-bezier(.2,.7,.2,1) both}
.fact{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink2)}
.fin-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:34px}
.fin-foot .fine{margin:0}.fin-foot .fine+.fine{margin-top:4px}
@media(max-width:1100px){.fin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.fin-grid{grid-template-columns:1fr}}
/* personas */
.personas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:60px}
.persona{background:var(--bg2);border:1px solid var(--line);border-radius:22px;padding:34px;display:flex;flex-direction:column;gap:14px;transition:border-color .3s}
.persona h3{margin:0;font-size:28px;letter-spacing:-.025em;font-weight:620}.persona p{margin:0 0 10px;color:var(--mut);flex:1}.persona .pill{align-self:flex-start}
@media(max-width:900px){.personas{grid-template-columns:1fr}}
/* merit */
.merit{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:60px;align-items:center}
.rev{margin:0 0 16px;padding:26px;border:1px solid var(--line);border-radius:20px;background:var(--bg2)}
.stars{display:flex;gap:4px}
.stars i{width:18px;height:18px;background:var(--accent);clip-path:polygon(50% 0,62% 36%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 36%)}.stars i.off{background:rgba(var(--ink-r),.2)}
.rev blockquote{margin:14px 0;font-size:19px;line-height:1.45;letter-spacing:-.01em}
.rev figcaption{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13.5px;color:var(--mut)}
@media(max-width:900px){.merit{grid-template-columns:1fr;gap:36px}}
/* plans teaser, guarantee, closing */
#plans .plan.pref{transform:translateY(-14px)}
.band{text-align:center;background:radial-gradient(60% 120% at 50% 0%,rgba(var(--acc-r),.16),transparent 70%),var(--bg2)}
.band h2{margin-inline:auto}.band p.sub{margin:0 auto 34px}.band .cta{justify-content:center}.band .fine{max-width:52em;margin-inline:auto}
.final{text-align:center}.final h2{margin-inline:auto}.final .cta{justify-content:center;margin-top:34px}
/* sticky mobile CTA */
.sticky-cta{display:none}
@media(max-width:720px){
  .sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:15;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:var(--nav-bg);border-top:1px solid rgba(var(--ink-r),.08);transform:translateY(110%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s .35s}
  .sticky-cta.show{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .sticky-cta .pill{flex:1;padding:12px 10px}
  .has-sticky footer.foot{padding-bottom:100px}
  .scroll-cue{display:none}}
/* hero on tablets and phones */
@media(max-width:980px){
  .hero{align-items:flex-start;padding-top:100px}.hero-grid{grid-template-columns:1fr;gap:40px}.hero .lead{min-height:0}.win{min-height:0}}
@media(max-width:560px){
  .seg button{padding:9px 12px;font-size:13px}.stats{grid-template-columns:repeat(2,1fr)}.rows .what{display:none}.rows li{grid-template-columns:48px 1fr 38px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.photo path{stroke-dashoffset:0}}