/* Landing page. Paper-white and lavender like the 3D set, ink type, one cobalt accent. */
:root{--lav:#F3F5FD;--lav2:#E7ECFB;--line:#E3E6EE;--cyan:#00D8FA;--pad:clamp(20px,5vw,72px)}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body.home,body.blog{padding-inline:0;background:#fff;overflow-x:hidden}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:30;background:#fff;padding:8px 12px;border-radius:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;margin:0;text-wrap:balance}
.kicker{font:500 13px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
:where(.home,.blog) img{max-width:100%;height:auto;display:block}

/* top bar */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px var(--pad);background:rgba(243,245,253,.82);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.top .brand{display:flex;align-items:center;gap:10px;font:800 19px var(--display);letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.top .brand img{width:36px;height:36px;border-radius:10px;border:0;box-shadow:0 2px 8px rgba(30,50,120,.16)}
.top nav{display:flex;align-items:center;gap:clamp(12px,2.4vw,28px)}
.top nav a{color:var(--ink);text-decoration:none;font-size:15px}
.top nav a:not(.get):hover{color:var(--accent)}
.top .get{background:var(--ink);color:#fff;padding:9px 16px;border-radius:999px;font-weight:700}
.top .get:hover{background:var(--accent)}
@media (max-width:640px){.top nav a:not(.get){display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 26px;border-radius:999px;font:700 17px var(--body);text-decoration:none;transition:transform .18s,background .18s,box-shadow .18s}
.btn:hover{transform:translateY(-2px)}
.btn.ink{background:var(--ink);color:#fff;box-shadow:0 12px 30px rgba(21,23,27,.24)}
.btn.ink:hover{background:var(--accent);box-shadow:0 14px 34px rgba(43,89,240,.38)}
.btn.line{border:1.5px solid var(--ink);color:var(--ink);background:transparent}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(28px,5vw,64px) var(--pad) clamp(56px,7vw,96px);background:radial-gradient(90% 90% at 78% 30%,#fff 0,var(--lav) 55%,var(--lav2) 100%);border-radius:0 0 clamp(28px,5vw,56px) clamp(28px,5vw,56px)}
.hero h1{font-size:clamp(50px,7.6vw,118px);line-height:.95;letter-spacing:-.045em;margin-bottom:.32em}
.swoosh{position:relative;display:inline-block;white-space:nowrap}
.swoosh svg{position:absolute;left:-1%;right:-1%;bottom:-.16em;width:102%;height:.26em;overflow:visible}
.swoosh path{fill:var(--accent)}
.lede{font-size:clamp(18px,1.7vw,22px);line-height:1.45;color:#454B57;max-width:34em;margin:0 0 28px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;font-size:15px;color:#454B57}
.chips li{display:flex;align-items:center;gap:8px}
.chips li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.hero-film{position:relative;justify-self:center;width:min(100%,370px)}
.film{aspect-ratio:9/16;border-radius:38px;overflow:hidden;background:#fff;box-shadow:0 40px 90px -24px rgba(30,60,170,.42),0 0 0 8px #fff}
.film video{width:100%;height:100%;object-fit:cover;display:block}
.tag{position:absolute;margin:0;background:#fff;padding:10px 16px;border-radius:16px;box-shadow:0 14px 34px rgba(20,40,110,.18);font-size:14px;white-space:nowrap}
.tag b{font:800 22px var(--display);letter-spacing:-.02em;color:var(--accent);margin-right:3px}
.t1{left:-34px;top:16%}.t2{right:-26px;bottom:14%}
@media (prefers-reduced-motion:no-preference){.tag{animation:bob 5s ease-in-out infinite}.t2{animation-delay:-2.5s}}
@keyframes bob{50%{transform:translateY(-8px)}}
@media (max-width:900px){.hero{grid-template-columns:minmax(0,1fr)}.t1{left:-6px}.t2{right:-6px}}

section{border-top:0;padding-block:0}
.sec-head{margin-bottom:clamp(26px,4vw,44px)}
.sec-head h2,.try h2,.field h2,.private h2,.end h2{font-size:clamp(36px,5.4vw,72px);line-height:1;letter-spacing:-.04em;max-width:none}
.nos,.how,.more,.price,.blog-strip{padding:clamp(64px,9vw,120px) var(--pad) 0}

/* no abs, no ego, no filter */
.no-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.no img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 0;border-radius:26px}
.no h3{font-size:clamp(21px,2vw,26px);line-height:1.12;margin:18px 0 8px}
.no p{margin:0;color:var(--muted)}
@media (max-width:760px){.no-grid{grid-template-columns:minmax(0,1fr)}.no img{aspect-ratio:4/3.4}}

/* try a move */
.try{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;margin:clamp(64px,9vw,120px) var(--pad) 0;padding:clamp(28px,5vw,60px);background:var(--accent);color:#fff;border-radius:clamp(26px,4vw,44px)}
.try .kicker{color:#BFD0FF}
.try p:not(.kicker){color:#DCE5FF;margin:14px 0 22px;font-size:18px;max-width:30em}
.search{position:relative}
.search input{width:100%;height:56px;border:0;border-radius:16px;padding:0 18px;font:400 17px var(--body);background:#fff;color:var(--ink)}
.search input:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
#move-list{position:absolute;z-index:5;left:0;right:0;top:62px;list-style:none;margin:0;padding:6px;background:#fff;color:var(--ink);border-radius:16px;box-shadow:0 22px 50px rgba(10,20,80,.34);max-height:280px;overflow:auto}
#move-list button{all:unset;display:flex;justify-content:space-between;gap:12px;width:100%;box-sizing:border-box;padding:10px 12px;border-radius:10px;cursor:pointer}
#move-list button:hover,#move-list button:focus-visible{background:var(--lav)}
#move-list small{color:var(--muted)}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.quick button{appearance:none;border:1.5px solid rgba(255,255,255,.55);background:transparent;color:#fff;font:700 15px var(--body);padding:9px 15px;border-radius:999px;cursor:pointer}
.quick button:hover{background:#fff;color:var(--accent);border-color:#fff}
.stage{margin:0;background:#fff;color:var(--ink);border-radius:26px;padding:18px 18px 8px;min-width:0}
.stage figcaption{display:flex;flex-direction:column;gap:1px}
.stage small{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.stage b{font:800 24px var(--display);letter-spacing:-.02em}
.stage canvas{display:block;width:100%;aspect-ratio:1/.86}
@media (max-width:860px){.try{grid-template-columns:minmax(0,1fr)}}

/* steps */
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin:0;padding:0}
.steps li{counter-increment:s;border-top:2px solid var(--ink);padding-top:16px;min-width:0}
.steps li::before{content:"0" counter(s);font:500 14px var(--mono);color:var(--accent)}
.steps h3{font-size:clamp(23px,2.4vw,30px);margin:10px 0 8px;line-height:1.1}
.steps p{margin:0;color:var(--muted)}
@media (max-width:760px){.steps{grid-template-columns:minmax(0,1fr)}}

/* the field */
.field{position:relative;margin-top:clamp(64px,9vw,120px);background:linear-gradient(#fff,#F4F6FD 30%)}
.field-copy{text-align:center;padding:0 var(--pad);position:relative;z-index:1;margin-bottom:clamp(-110px,-7vw,-30px)}
.field-copy p{max-width:36em;margin:14px auto 0;color:var(--muted);font-size:18px}
.field img{width:100%;min-height:320px;object-fit:cover}

/* cards + screens */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cards article{background:var(--lav);border-radius:22px;padding:14px 18px 20px;min-width:0}
.cards canvas{display:block;width:100%;aspect-ratio:4/3}
.cards h3{font-size:20px;line-height:1.15;margin:10px 0 6px}
.cards p{margin:0;font-size:15px;color:var(--muted)}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.cards{grid-template-columns:minmax(0,1fr)}}
.screens{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;margin:clamp(28px,4vw,48px) calc(var(--pad) * -1) 0;padding:6px var(--pad) 18px;scrollbar-width:thin}
.screens figure{flex:0 0 min(236px,62vw);margin:0;scroll-snap-align:center}
.screens img{border-radius:30px;box-shadow:0 18px 40px -14px rgba(30,50,120,.3);border:1px solid var(--line);width:100%}
.screens figcaption{font:500 12px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-top:12px}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.plans article{border:1.5px solid var(--line);border-radius:26px;padding:clamp(22px,3vw,34px);min-width:0}
.plans .pro{border-color:var(--accent);background:linear-gradient(170deg,#fff,var(--lav))}
.plans h3{font-size:30px}
.plans small{display:block;font:500 13px var(--mono);letter-spacing:.02em;color:var(--accent);margin-top:4px}
.plans ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.plans li{padding-left:22px;position:relative}
.plans li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:3px;border-radius:2px;background:var(--accent)}
@media (max-width:680px){.plans{grid-template-columns:minmax(0,1fr)}}

/* privacy */
.private{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,64px);align-items:center;margin:clamp(64px,9vw,120px) var(--pad) 0;padding:clamp(28px,5vw,60px);background:#101217;color:#fff;border-radius:clamp(26px,4vw,44px)}
.private .kicker{color:var(--cyan)}
.private ul{list-style:none;margin:0;padding:0;display:grid;gap:14px;font-size:18px;color:#D9DDE6}
.private li{border-top:1px solid #2C3038;padding-top:14px}
.private li:first-child{border-top:0;padding-top:0}
@media (max-width:820px){.private{grid-template-columns:minmax(0,1fr)}}

/* latest posts */
.blog-strip .post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.post-card{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--ink)}
.post-card img{border-radius:18px;aspect-ratio:1200/630;object-fit:cover;width:100%;background:var(--lav)}
.post-card b{font:800 21px/1.14 var(--display);letter-spacing:-.02em;margin-top:12px}
.post-card:hover b{color:var(--accent)}
.post-card small{color:var(--muted);margin-top:6px}
.more-link{margin:18px 0 0}
@media (max-width:760px){.blog-strip .post-grid{grid-template-columns:minmax(0,1fr)}}

/* end */
.end{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:center;gap:clamp(16px,4vw,48px);padding:clamp(40px,6vw,72px) var(--pad);margin-top:clamp(48px,7vw,96px);background:linear-gradient(#fff,var(--lav) 40%)}
.end img{max-height:560px;width:auto;justify-self:end;mix-blend-mode:multiply}
.end p{font-size:20px;color:var(--muted);margin:14px 0 24px}
@media (max-width:720px){.end{grid-template-columns:minmax(0,1fr);text-align:center}.end img{justify-self:center;max-height:360px}}

.foot{padding:28px var(--pad) 36px;background:var(--lav);border:0;margin:0;display:block;font-size:14px;color:var(--muted)}
.foot .fine{max-width:60em;margin:0 0 14px}
.foot div{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between}
.foot nav{display:flex;gap:18px}
.foot a{color:var(--ink)}