/* NeuraPlanner page styles. Load after neura.css: tokens, .wrap, .btn, .sec, .label, .h2, .lede, header and footer come from there. */
/* hero */
.phero{padding-top:calc(var(--hdr) + clamp(48px,7vw,104px));padding-bottom:clamp(48px,6vw,80px)}
.phero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.phero .label{margin-bottom:18px}
.phero h1{font-size:clamp(44px,5.4vw,76px);line-height:1;letter-spacing:-.04em}
.phero h1 .dot{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.phero h1 .line{display:block;margin-top:.32em;font-size:.5em;line-height:1.38;letter-spacing:-.03em;max-width:22em}
.phero h1 .sub{color:#fff;background:var(--acc-fig);padding:0 .16em .04em;border-radius:.14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.phero .lede{font-size:17px;margin-top:24px;max-width:50ch}
.phero .ctas{margin-top:32px}
.render{margin:0;aspect-ratio:3/2;max-width:100%;position:relative}
.render{mix-blend-mode:darken}
.render img{width:100%;height:100%;object-fit:contain;filter:brightness(1.045) contrast(1.02)}
@media (max-width:980px){ .phero-grid{grid-template-columns:minmax(0,1fr);gap:32px} .render{max-width:440px} }

/* placeholder plates, swapped for the ChatGPT images later */
.ph-plate{fill:var(--white);stroke:var(--line);stroke-width:1.2}
.ph-side{fill:var(--paper-2);stroke:var(--line);stroke-width:1.2}
.ph-dash{fill:none;stroke:var(--acc-deep);stroke-width:1.2;stroke-dasharray:5 5}
.ph-t{font-family:var(--mono);font-size:12px;fill:var(--mute)}
.ph-t.b{font-family:var(--sans);font-size:15px;fill:var(--ink-2);font-weight:500}

/* video */
.vid{position:relative;border-radius:16px;overflow:hidden;background:var(--ink);aspect-ratio:16/9;width:100%;max-width:960px;margin-inline:auto}
.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--ink)}
.vid.playing .vid-play{opacity:0;pointer-events:none}
.vid-play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;border:0;background:none;cursor:pointer;padding:0;transition:opacity .3s}
.vid-play .pb{width:84px;height:84px;border-radius:50%;background:var(--acc-fig);display:grid;place-items:center;box-shadow:0 10px 40px rgba(28,28,26,.25);transition:transform .3s var(--ease),background .25s}
.vid-play:hover .pb{transform:scale(1.06);background:var(--acc-ink)}
.vid-play svg{width:26px;height:26px;margin-left:4px;fill:#fff}
.vid-cap{display:flex;justify-content:space-between;gap:16px;margin:14px auto 0;max-width:960px;font-size:13.5px;color:var(--mute)}
.vid-cap b{font-weight:500;color:var(--ink)}
.vid-cap .num{font-family:var(--mono);font-size:12.5px}
@media (max-width:600px){ .vid-play .pb{width:64px;height:64px} }

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.stats > div{border-top:1px solid var(--line);padding-top:20px;display:grid;gap:10px;align-content:start}
.stats .v{font-size:clamp(36px,3.6vw,52px);line-height:.9;letter-spacing:-.035em;font-weight:400;color:var(--acc-fig);font-feature-settings:"tnum" 1}
.stats .v .u{font-size:.5em;letter-spacing:-.01em;margin-left:4px;color:var(--acc-fig)}
.stats small{font-size:13.5px;color:var(--ink-2);line-height:1.45;max-width:22ch}
@media (max-width:760px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px} }

/* how it works */
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:48px;align-items:end;margin-bottom:56px}
.head .label{margin-bottom:14px}
@media (max-width:860px){ .head{grid-template-columns:minmax(0,1fr);gap:18px;margin-bottom:40px} }
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.step{display:grid;gap:12px;align-content:start;min-width:0}
.step-ic{aspect-ratio:1;max-width:100%;border-radius:14px;background:var(--panel);display:grid;place-items:center;overflow:hidden;position:relative;transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .3s}
.step-ic::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px var(--acc-deep);opacity:0;transition:opacity .3s}
.step:hover .step-ic{transform:translateY(-6px);background:var(--white);box-shadow:0 18px 40px -18px rgba(28,28,26,.28)}
.step:hover .step-ic::after{opacity:.55}
.step-ic img{animation:bob 6s ease-in-out infinite;animation-delay:calc(var(--i) * -1.2s)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.step-ic img{width:100%;height:100%;object-fit:contain;mix-blend-mode:darken}
.step-n{font-family:var(--mono);font-size:12px;color:var(--acc-ink);display:flex;align-items:center;gap:10px;margin-top:6px}
.step-n::after{content:"";flex:1;height:1.5px;border-radius:1px;background:linear-gradient(var(--acc-deep),var(--acc-deep)) left center/100% 100% no-repeat,var(--line)}
.step h3,.step p{transition:color .3s}
.step:hover h3{color:var(--acc-ink)}
/* entrance: cards rise in turn while the rule under each number fills like a progress track */
.steps.armed .step{opacity:.001;transform:translateY(28px)}
.steps.armed .step-n::after{background-size:0% 100%,auto}
.steps.play .step{animation:stepIn .8s var(--ease) backwards;animation-delay:calc(var(--i) * .22s)}
.steps.play .step-ic{animation:tileIn .9s cubic-bezier(.3,1.4,.5,1) backwards;animation-delay:calc(var(--i) * .22s + .05s)}
.steps.play .step-n{animation:numIn .5s ease backwards;animation-delay:calc(var(--i) * .22s + .3s)}
.steps.play .step-n::after{animation:track .55s var(--ease) backwards;animation-delay:calc(var(--i) * .22s + .35s)}
@keyframes stepIn{from{opacity:.001;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes tileIn{from{transform:scale(.86) rotate(-2deg)}to{transform:none}}
@keyframes numIn{from{color:var(--soft)}to{color:var(--acc-ink)}}
@keyframes track{from{background-size:0% 100%,auto}to{background-size:100% 100%,auto}}
.step h3{font-size:19px;letter-spacing:-.015em;line-height:1.2}
.step p{font-size:14px;line-height:1.55;color:var(--ink-2)}
@media (max-width:1080px){ .steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:36px} }
@media (max-width:640px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px} .step:last-child{grid-column:1/-1} .step:last-child .step-ic{max-width:calc(50% - 7px)} }

/* payback chart */
.ex{margin-top:72px;background:var(--panel);border-radius:16px;padding:28px 28px 22px;display:grid;gap:20px;position:relative}
.ex-top{display:flex;justify-content:space-between;align-items:flex-start;gap:28px}
.ex-top > div:first-child{min-width:0}
.ex-top h3{font-size:clamp(19px,1.7vw,24px);letter-spacing:-.02em;line-height:1.2;max-width:28ch;margin-top:6px}
.stat{display:grid;justify-items:end;gap:2px;flex:none;text-align:right}
.stat .v{font-size:clamp(36px,3.6vw,50px);line-height:.88;letter-spacing:-.035em;font-weight:400;color:var(--acc-fig);font-feature-settings:"tnum" 1}
.stat .v .u{font-size:.48em;margin-left:3px}
.stat small{font-size:12.5px;color:var(--mute);margin-top:8px;max-width:26ch}
.chart{margin:0;position:relative;overflow-x:auto}
.chart svg{width:100%;min-width:520px;height:auto;display:block;overflow:visible}
.chart text{font-family:var(--mono);font-size:11px;fill:var(--mute)}
.chart .gl{stroke:var(--rule);stroke-width:1}
.chart .zero{stroke:var(--line);stroke-width:1.2}
.chart .l-with{fill:none;stroke:var(--acc-deep);stroke-width:2.4;stroke-linecap:round}
.chart .l-wo{fill:none;stroke:var(--ink);stroke-opacity:.45;stroke-width:1.8;stroke-linecap:round}
.chart .gain{fill:var(--acc);fill-opacity:.28}
.chart .pd{stroke:var(--panel);stroke-width:2}
.chart .pd.w{fill:var(--acc-deep)}
.chart .pd.o{fill:var(--ink-2)}
.chart .pl{font-family:var(--sans);font-size:12px;font-weight:500}
.chart .pl.w{fill:var(--acc-ink)}
.chart .pl.o{fill:var(--ink-2)}
.chart .guide{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3;opacity:0;transition:opacity .15s}
.chart .hd{opacity:0;transition:opacity .15s}
.chart.hover .guide,.chart.hover .hd{opacity:1}
.chart .ov{fill:transparent;cursor:crosshair}
.tip{position:absolute;pointer-events:none;z-index:3;background:var(--ink);color:var(--paper);border-radius:10px;padding:10px 12px;font:12px/1.5 var(--mono);min-width:180px;opacity:0;transition:opacity .12s;box-shadow:0 8px 24px rgba(28,28,26,.2)}
.chart.hover .tip{opacity:1}
.tip .yr{color:var(--acc);margin-bottom:4px}
.tip .r{display:flex;justify-content:space-between;gap:14px}
.tip .r span:first-child{color:rgba(242,240,234,.65)}
.ex-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.keys{display:flex;gap:8px 20px;flex-wrap:wrap;font-size:12.5px;color:var(--mute)}
.keys span{display:inline-flex;align-items:center;gap:8px}
.keys i{width:14px;height:9px;border-radius:2px;display:inline-block}
.keys .k-w{height:2px;background:var(--acc-deep)}
.keys .k-o{height:2px;background:rgba(28,28,26,.45)}
.keys .k-g{background:var(--acc);opacity:.6}
.note{font-size:12.5px;color:var(--mute)}
@media (max-width:640px){ .ex{padding:20px 16px 16px;margin-top:56px} .ex-top{flex-direction:column;gap:14px} .stat{justify-items:start;text-align:left} }

/* draw-in, from a visible resting state */
.chart.drawing .l-with,.chart.drawing .l-wo{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1.6s var(--ease) forwards}
.chart.drawing .l-wo{animation-delay:.15s}
.chart.drawing .gain,.chart.drawing .pt{opacity:0;animation:fade .6s ease 1.3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}

/* cta */
.cta{text-align:center;display:grid;justify-items:center;gap:20px}
.cta .h2{max-width:22ch}
.cta .lede{margin-inline:auto}
.cta .ctas{justify-content:center;margin-top:8px}
.cta .mail{font-size:13.5px;color:var(--mute)}
.cta .mail span{color:var(--ink-2);user-select:all}

.rise{animation:rise .8s var(--ease) both}
.rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}
@keyframes rise{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .rise,.chart.drawing *,.steps *,.step-ic img{animation:none!important} .steps.armed .step{opacity:1;transform:none} .steps.armed .step-n::after{background-size:100% 100%,auto} html{scroll-behavior:auto} }