/* The website: one small stylesheet. Colours are variables, so light and dark are the same page. No fonts or files are loaded from outside. */
:root{--bg:#fff;--bg2:#f4f5fb;--ink:#12131a;--muted:#555b70;--line:#e2e4ee;--paper:#fff;--accent:#4f46e5;--accent2:#0891b2;--ok:#16a34a;--warn:#d97706;--shadow:0 10px 30px -12px rgba(30,32,80,.25);--radius:18px;color-scheme:light}
html[data-theme="dark"]{--bg:#0b0d14;--bg2:#11141d;--ink:#eceef6;--muted:#a0a7bd;--line:#242a3b;--paper:#161a26;--accent:#8b8cf8;--accent2:#22d3ee;--shadow:0 10px 30px -12px rgba(0,0,0,.7);color-scheme:dark}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]){--bg:#0b0d14;--bg2:#11141d;--ink:#eceef6;--muted:#a0a7bd;--line:#242a3b;--paper:#161a26;--accent:#8b8cf8;--accent2:#22d3ee;--shadow:0 10px 30px -12px rgba(0,0,0,.7);color-scheme:dark}}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
img,svg{max-width:100%;height:auto}a{color:var(--accent);text-underline-offset:3px}a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent2);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#fff;padding:10px 16px;border-radius:10px;z-index:100}.skip:focus{left:8px}
.wrap{width:min(1120px,92vw);margin-inline:auto}
header.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:20px;min-height:64px}.logo{display:block;color:var(--ink);width:150px;flex:none}.logo svg{display:block;width:100%}
nav.main{display:flex;gap:4px;margin-inline:auto}nav.main a{color:var(--ink);text-decoration:none;padding:8px 12px;border-radius:10px;font-size:15px}nav.main a:hover{background:var(--bg2)}
.tools{display:flex;align-items:center;gap:8px}.tools button,.tools select,.menu{background:var(--bg2);color:var(--ink);border:1px solid var(--line);border-radius:10px;height:38px;padding:0 10px;font:inherit;font-size:14px;cursor:pointer}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;text-decoration:none;font-weight:600;padding:12px 22px;border-radius:12px;border:0;box-shadow:0 8px 20px -8px var(--accent);transition:transform .15s}.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}.btn.small{padding:8px 16px;font-size:15px}
.menu{display:none}
@media (max-width:860px){nav.main{display:none;position:absolute;inset:64px 0 auto 0;background:var(--bg);flex-direction:column;padding:12px 4vw;border-bottom:1px solid var(--line)}nav.main.open{display:flex}.menu{display:inline-block}.logo{width:130px}}
section{padding:84px 0}section.alt{background:var(--bg2)}
h1{font-size:clamp(40px,7vw,76px);line-height:1.02;margin:0 0 18px;letter-spacing:-.03em}h1 em{font-style:normal;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:clamp(28px,4vw,42px);line-height:1.12;margin:0 0 10px;letter-spacing:-.02em}h3{font-size:21px;margin:0 0 8px}p{margin:0 0 14px}.lead{font-size:clamp(18px,2.2vw,22px);color:var(--muted);max-width:60ch}.kicker{color:var(--accent);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px;margin-bottom:10px}
.head{max-width:720px;margin-bottom:36px}
.hero{padding:70px 0 60px;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;inset:-20% -10% auto auto;width:60vw;height:60vw;max-width:760px;max-height:760px;background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--accent) 28%,transparent),transparent 62%);filter:blur(10px);animation:drift 16s ease-in-out infinite alternate;z-index:0}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 20px}.badges{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted);font-size:15px;list-style:none;padding:0;margin:0}.badges li:before{content:"✓ ";color:var(--ok);font-weight:700}
.stage{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}
/* slides */
.deck{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 22px 16px}
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:0}.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;padding:6px 4px 12px}@media (max-width:820px){.slide{grid-template-columns:1fr;gap:12px}}
.slide .num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;margin-bottom:12px}.slide p{color:var(--muted);font-size:18px}
.controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}.dots{display:flex;gap:8px}.dots button{width:11px;height:11px;border-radius:50%;border:0;background:var(--line);padding:0;cursor:pointer}.dots button[aria-current="true"]{background:var(--accent);width:28px;border-radius:8px}
.arrows button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--bg2);color:var(--ink);font-size:20px;cursor:pointer}.arrows button:hover{border-color:var(--accent)}
/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px;transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.card p{color:var(--muted);margin:0}
.ico{width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);display:grid;place-items:center;margin-bottom:14px}.ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:34px}.plan{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column}.plan.pick{border:2px solid var(--accent);box-shadow:var(--shadow)}.plan .price{font-size:34px;font-weight:800;letter-spacing:-.02em;margin:6px 0}.plan .price small{font-size:15px;font-weight:500;color:var(--muted)}.plan ul{list-style:none;padding:0;margin:12px 0 22px;flex:1}.plan li{padding:6px 0 6px 26px;position:relative;border-bottom:1px solid var(--line)}.plan li:before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:10px}.chips span{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:600}
details{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:4px 20px;margin-bottom:10px}summary{cursor:pointer;font-weight:650;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}summary::-webkit-details-marker{display:none}summary:after{content:"+";color:var(--accent);font-size:24px;line-height:1}details[open] summary:after{content:"–"}details p{color:var(--muted)}
.mailnote{margin:6px 0 0;color:var(--muted);font-size:17px;user-select:all}.final{text-align:center}.final .cta{justify-content:center}
footer{border-top:1px solid var(--line);padding:40px 0;color:var(--muted);font-size:15px}footer .cols{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;align-items:center}footer a{color:var(--muted)}
.suggest{display:none;background:var(--accent);color:#fff;text-align:center;padding:8px 12px;font-size:15px}.suggest a{color:#fff;font-weight:700}.suggest.on{display:block}
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.js .reveal.in{opacity:1;transform:none}
.page{padding:56px 0}.page h1{font-size:clamp(32px,5vw,48px)}.page p,.page li{color:var(--muted);max-width:70ch}
/* drawings: the shapes below are the FINAL picture; the animations only draw it in, so reduced motion shows the finished picture */
.art{display:block;width:100%}.art text{font:600 20px system-ui,sans-serif;fill:var(--ink)}
.art .a-page,.art .a-box rect,.art .a-opt rect,.art .a-gone path,.art .a-out path,.art .d rect:first-child,.art .a-slip path,.art .a-node rect{fill:var(--paper);stroke:var(--line);stroke-width:2}
.art .a-bar,.art .ln,.art .a-count .bar{fill:var(--ink);opacity:.8}.art .soft{opacity:.2}.art .a-head{fill:var(--accent);opacity:.9}.art .a-cell{fill:var(--bg2);stroke:var(--line)}
.art .a-field{fill:color-mix(in srgb,var(--accent) 16%,transparent);stroke:var(--accent);stroke-width:2;stroke-dasharray:5 4}
.art .a-link{fill:none;stroke:var(--accent2);stroke-width:3;stroke-linecap:round;stroke-dasharray:6 6}.art .a-pin circle{fill:var(--accent2)}
.art .a-cursor path{fill:var(--ink);stroke:var(--paper);stroke-width:1.5}
.art .a-zone{fill:color-mix(in srgb,var(--accent) 7%,transparent);stroke:var(--accent);stroke-width:3;stroke-dasharray:10 8}
.art .a-file path:first-child,.art .a-docs .d rect:first-child{fill:var(--paper);stroke:var(--accent);stroke-width:3}.art .a-file rect{fill:var(--muted)}.art .a-file .fold{fill:none;stroke:var(--accent);stroke-width:3}
.art .a-arrow path{fill:none;stroke:var(--accent2);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.art .a-tick circle,.art .ok{fill:var(--ok)}.art .a-tick path,.art .tk{fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}.art .warn{fill:var(--warn)}.art .ex{stroke:#fff;stroke-width:3.4;stroke-linecap:round;fill:none}
.art .a-zip rect{fill:var(--accent);stroke:none}.art .a-zip path{stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round}.art .d .ln{fill:var(--muted);opacity:.6}
.art .a-shield path{fill:color-mix(in srgb,var(--accent) 14%,var(--paper));stroke:var(--accent);stroke-width:4}.art .a-lock rect{fill:var(--accent)}.art .a-lock path{stroke:var(--accent);stroke-width:7;stroke-linecap:round}.art .a-lock circle{fill:#fff}.art .a-lock path:last-child{stroke:#fff;stroke-width:4}
.art .a-stay .pg{fill:var(--paper);stroke:var(--ok);stroke-width:3}.art .a-stay .tk{stroke:var(--ok)}.art .a-gone path:first-child{stroke:var(--muted);stroke-dasharray:6 6}.art .a-gone rect{fill:var(--muted)}
.art .a-track{fill:var(--bg2);stroke:var(--line);stroke-width:2}.art .a-fill{fill:var(--accent);transform-origin:70px 123px;transform:scaleX(.8)}.art .a-mark path{stroke:var(--ink);stroke-width:2}.art .a-mark circle{fill:var(--warn)}
.art .a-cal rect:first-child{fill:var(--paper);stroke:var(--line);stroke-width:2}.art .a-cal .top{fill:var(--accent)}.art .a-cal path{stroke:var(--ink);stroke-width:4;stroke-linecap:round}.art .a-cal .dot{fill:var(--accent2)}
.art .b rect{fill:var(--paper);stroke:var(--accent);stroke-width:2.5}
.art .a-box rect.sc{fill:var(--bg2)}.art .a-box rect.st{fill:var(--muted)}.art .a-flow path{fill:none;stroke:var(--accent2);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:8 8}
.art .a-out path:first-child{stroke:var(--ok)}.art .a-out rect{fill:var(--muted)}
.art .a-stamp circle{fill:none;stroke:var(--ok);stroke-width:5}.art .a-stamp path{fill:none;stroke:var(--ok);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}.art .a-slip .soft{opacity:.25}
.art .a-node circle:first-child{fill:var(--accent);stroke:none}.art .a-node .hd{fill:#fff}.art .a-node .bd{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round}.art .a-node rect{stroke:var(--accent)}.art .a-node .w{fill:var(--accent2);stroke:none;opacity:.85}.art .a-line{fill:none;stroke:var(--line);stroke-width:3;stroke-linecap:round}
.art .a-opt rect:first-child{fill:var(--paper);stroke:var(--line)}.art .a-opt .ic{fill:var(--accent);stroke:none;opacity:.8}.art .a-opt.sel rect:first-child{stroke:var(--accent);stroke-width:3;fill:color-mix(in srgb,var(--accent) 9%,var(--paper))}
/* the motion: each piece appears in turn, then rests */
@keyframes drift{to{transform:translate(-6%,8%) scale(1.08)}}
@keyframes pop{from{opacity:0;transform:scale(.6)}}@keyframes rise{from{opacity:0;transform:translateY(14px)}}@keyframes draw{from{stroke-dashoffset:200;opacity:0}}@keyframes fall{from{transform:translateY(-70px);opacity:0}}
@keyframes fade{from{opacity:0}}@keyframes sweep{from{transform:scaleX(0)}}@keyframes wob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes dash{to{stroke-dashoffset:-32}}
@keyframes click{0%{transform:translate(380px,250px)}28%{transform:translate(160px,96px)}34%{transform:translate(160px,98px) scale(.9)}60%{transform:translate(168px,204px)}66%{transform:translate(168px,206px) scale(.9)}100%{transform:translate(300px,150px)}}
.art *{transform-box:fill-box}
.art .a-field{animation:pop .6s both}.art .f1{animation-delay:.2s}.art .f2{animation-delay:.5s}.art .f3{animation-delay:.9s}.art .f4{animation-delay:1.1s}.art .f5{animation-delay:1.3s}
.art .a-cursor{animation:click 7s ease-in-out infinite}
.art .a-link{animation:draw 1.4s both,dash 3s linear 1.4s infinite}.art .l2{animation-delay:.4s,1.8s}.art .l3{animation-delay:.8s,2.2s}.art .p1,.art .p2,.art .p3{animation:pop .5s both}.art .p1{animation-delay:1.2s}.art .p2{animation-delay:1.6s}.art .p3{animation-delay:2s}
.art .g1{animation:pop .6s 1s both}.art .g2{animation:pop .6s 1.4s both}.art .g3{animation:pop .6s 1.8s both}.art .c1,.art .c2,.art .c3{animation:wob 2.6s ease-in-out infinite}.art .c2{animation-delay:.4s}.art .c3{animation-delay:.8s}
.art .a-file{animation:fall 1.2s cubic-bezier(.3,1.4,.5,1) both}.art .a-arrow{animation:wob 1.6s ease-in-out infinite}.art .t1{animation:pop .5s 1.2s both}.art .t2{animation:pop .5s 1.6s both}.art .t3{animation:pop .5s 2s both}
.art .r1{animation:rise .6s .2s both}.art .r2{animation:rise .6s .7s both}.art .r3{animation:rise .6s 1.2s both}.art .r4{animation:rise .6s 1.7s both}
.art .d{animation:rise .8s both}.art .d1{animation-delay:.1s}.art .d2{animation-delay:.3s}.art .d3{animation-delay:.5s}.art .d4{animation-delay:.7s}
.art .d1{transform:translate(120px,20px) rotate(-14deg)}.art .d2{transform:translate(150px,16px) rotate(-5deg)}.art .d3{transform:translate(180px,16px) rotate(5deg)}.art .d4{transform:translate(210px,20px) rotate(14deg)}
.art .a-zip{animation:pop .7s 1s both}.art .a-lock{animation:wob 2.4s ease-in-out infinite}.art .a-gone{animation:fade 2s 1s reverse both}.art .a-stay{animation:pop .7s 1.6s both}
.art .a-fill{animation:sweep 1.8s .3s ease-out both}.art .a-mark{animation:fade .6s 2s both}.art .a-cal{animation:rise .7s 1s both}
.art .b{animation:pop .6s both}.art .b2{animation-delay:.2s}.art .b3{animation-delay:.4s}.art .b4{animation-delay:.6s}.art .b5{animation-delay:.8s}.art .b6{animation-delay:1s}.art .b7{animation-delay:1.2s}
.art .a-box.left{animation:rise .6s both}.art .a-box.mid{animation:rise .6s .3s both}.art .a-out{animation:pop .6s 1.2s both}.art .a-flow path{animation:dash 2s linear infinite}
.art .a-slip{animation:rise .8s both}.art .a-stamp{animation:pop .6s 1s cubic-bezier(.3,1.6,.5,1) both}
.art .a-node.top{animation:pop .6s both}.art .a-node.c1{animation-delay:.4s}.art .a-node.c2{animation-delay:.6s}.art .a-node.c3{animation-delay:.8s}
.art .a-opt{animation:rise .5s both}.art .o2{animation-delay:.2s}.art .o3{animation-delay:.4s}
.slide:not(.on) .art *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js .reveal{opacity:1;transform:none}.art .a-cursor{display:none}}
@media print{header.top,.deck .controls,.suggest,.cta{display:none}}