/* ============================================================================
   site/landing.css: the front page.
   Dark, large type, one pinned "product" that changes with the story. No web fonts, no images, no libraries.
   Movement is by transform and opacity only, switched off for anybody who asks for less (see the last block).
   ========================================================================= */
:root{
  --bg:#050507;--bg2:#0b0c10;--fg:#f5f5f7;--mut:#a1a1aa;--dim:#8d8d97;--line:rgba(255,255,255,.1);
  --accent:#2b8fd6;--accent-hi:#4ea3d8;--teal:#2dd4bf;--gold:#e0b341;
  --font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
svg{display:block}
.wrap{width:min(1120px,100% - 48px);margin-inline:auto}
.narrow{width:min(820px,100% - 48px)}

/* ---- a way past the bar for the keyboard ---- */
.skip{position:fixed;left:16px;top:-60px;z-index:100;padding:10px 18px;border-radius:999px;background:#fff;color:#000;font-weight:600;transition:top .2s}
.skip:focus{top:12px}

/* ---- navigation ---- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:28px;height:56px;padding:0 max(24px,calc((100% - 1120px)/2));background:rgba(5,5,7,0);transition:background .3s,backdrop-filter .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.is-solid{background:rgba(5,5,7,.72);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);border-color:var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:650;letter-spacing:-.01em}
.brand svg{width:24px;height:24px;color:var(--accent-hi)}
.nav__links{display:flex;gap:26px;margin-left:auto;font-size:14px;color:var(--mut)}
.nav__links a:hover{color:var(--fg)}
@media (max-width:720px){.nav__links{display:none}.nav .btn{margin-left:auto}}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 28px;border-radius:999px;background:var(--accent);color:#fff;font-weight:600;font-size:17px;letter-spacing:-.01em;transition:background .2s,transform .2s var(--ease),box-shadow .2s;box-shadow:0 8px 30px -8px rgba(43,143,214,.7)}
.btn:hover{background:var(--accent-hi);transform:translateY(-1px)}
.btn:active{transform:none}
.btn:focus-visible,.link:focus-visible,.nav a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:999px}
.btn--small{height:34px;padding:0 16px;font-size:14px;box-shadow:none}
.link{color:var(--accent-hi);font-size:17px;font-weight:500}
.link span{display:inline-block;transition:transform .2s var(--ease)}
.link:hover span{transform:translateX(3px)}
.cta{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;margin-top:34px}

/* ---- type ---- */
.eyebrow{margin:0 0 14px;font-size:15px;font-weight:600;color:var(--accent-hi);letter-spacing:.01em}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1.04}
h1{font-size:clamp(3.2rem,9vw + .4rem,7.6rem)}
.grad{background:linear-gradient(100deg,#7cc4f2 0%,#2b8fd6 45%,#2dd4bf 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{max-width:620px;margin:26px auto 0;font-size:clamp(1.1rem,1vw + .85rem,1.45rem);line-height:1.4;color:var(--mut);letter-spacing:-.01em}
.fine{margin:18px 0 0;font-size:13px;color:var(--dim)}
.big{font-size:clamp(2.2rem,5vw + .4rem,4.4rem)}
.sub{max-width:640px;margin:18px auto 0;font-size:clamp(1.05rem,.8vw + .8rem,1.3rem);color:var(--mut);letter-spacing:-.01em;line-height:1.45}

/* ---- hero ---- */
.hero{position:relative;padding:clamp(120px,22vh,200px) 0 clamp(40px,8vh,90px);text-align:center;overflow:hidden}
/* drawing-paper squares behind the words, fading out downwards (a layer of their own, so the words are never faded with them) */
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:linear-gradient(#000 40%,transparent 95%);mask-image:linear-gradient(#000 40%,transparent 95%);pointer-events:none}
.hero__glow{position:absolute;left:50%;top:-10%;width:min(1100px,140vw);height:640px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(43,143,214,.32),rgba(45,212,191,.08) 55%,transparent 75%);pointer-events:none}
.hero__glow--low{top:auto;bottom:-30%}
.hero__inner{position:relative}

/* ---- the story: one sticky stage, five steps ---- */
.story{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:0 4vw;width:min(1320px,100% - 32px);margin:0 auto;padding-bottom:12vh}
.story__stage{position:sticky;top:12vh;align-self:start;height:76vh;display:flex;align-items:center;z-index:1}
.story__steps{padding-top:8vh}
.step{min-height:86vh;display:flex;align-items:center}
.step__in{opacity:.28;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .step.is-on .step__in{opacity:1;transform:none}
html:not(.js) .step__in{opacity:1;transform:none}
.num{margin:0 0 10px;font-size:14px;font-weight:700;letter-spacing:.14em;color:var(--accent-hi)}
.step h2{font-size:clamp(2rem,3.4vw + .6rem,3.4rem)}
.step p:not(.num){margin:16px 0 0;font-size:clamp(1.05rem,.5vw + .9rem,1.25rem);color:var(--mut);line-height:1.45;max-width:30ch}
@media (max-width:900px){
  .story{display:block;width:100%;padding-bottom:6vh}
  .story__stage{top:64px;height:auto;padding:0 12px;background:linear-gradient(var(--bg) 82%,transparent);padding-bottom:16px}
  .story__steps{padding:0 24px}
  .step{min-height:62vh;align-items:flex-start;padding-top:8vh}
  .step p:not(.num){max-width:none}
}

/* ---- the window: the program, drawn in HTML ---- */
.win{width:100%;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:#12141a;box-shadow:0 50px 120px -30px rgba(43,143,214,.45),0 30px 60px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;color:#d6d8de;font-size:12px}
.win__bar{display:flex;align-items:center;gap:12px;height:36px;padding:0 14px;background:#181b22;border-bottom:1px solid rgba(255,255,255,.07)}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:#3a3e48}
.tab{padding:3px 12px;border-radius:7px;background:#0f1116;border:1px solid rgba(255,255,255,.08);font-size:11.5px;color:#c4c7cf}
.peers{margin-left:auto;display:flex}.peers b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10px;color:#fff;border:2px solid #181b22;margin-left:-6px;opacity:0;transform:scale(.6);transition:opacity .4s,transform .5s var(--ease)}
.peers .pa{background:#2b8fd6}.peers .pb{background:#17a589}
.win__body{display:grid;grid-template-columns:42px minmax(0,1fr) 168px}
.rail{display:flex;flex-direction:column;gap:6px;padding:10px 6px;background:#0f1116;border-right:1px solid rgba(255,255,255,.06)}
.rail i{display:grid;place-items:center;height:30px;border-radius:8px;color:#8d919c;transition:background .3s,color .3s}
.rail svg{width:17px;height:17px}
.sheetwrap{background:#2b2f38;padding:14px;min-width:0}
.sheet{width:100%;height:auto;border-radius:3px;box-shadow:0 6px 24px rgba(0,0,0,.45)}
.panel{padding:12px;background:#0f1116;border-left:1px solid rgba(255,255,255,.06)}
.panel h4{font-size:12px;letter-spacing:0;font-weight:650;color:#e9eaee;margin-bottom:10px}
.panel dl{margin:0}.panel .row{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.07);opacity:0;transform:translateX(8px);transition:opacity .5s,transform .5s var(--ease)}
.panel dt{color:#9ea2ad}.panel dd{margin:0;font-weight:650;color:#fff;font-variant-numeric:tabular-nums}
.panel__note{margin:12px 0 0;display:flex;gap:7px;align-items:flex-start;color:#7d818c;font-size:10.5px;line-height:1.35;opacity:0;transition:opacity .6s .5s}
.panel__note .d{flex:none;width:6px;height:6px;margin-top:4px;border-radius:50%;background:var(--teal)}
.win__status{display:flex;align-items:center;gap:18px;height:28px;padding:0 14px;background:#181b22;border-top:1px solid rgba(255,255,255,.07);font-size:11px;color:#9ea2ad}
.win__status b{font-weight:600;color:#c4c7cf}.grow{flex:1}
.win__status em{font-style:normal}
.s-scale .yes{display:none;color:#6ee7b7}.s-scale .no{color:#fbbf77}
.priv{display:inline-flex;gap:5px;align-items:center;color:#7be0c8}.priv svg{width:12px;height:12px}
@media (max-width:620px){.win__body{grid-template-columns:34px minmax(0,1fr)}.panel{display:none}}

/* the stage's state: what each step has put on the sheet */
.g-scale,.g-measure,.g-markup,.g-peers{opacity:0;transition:opacity .35s}
[data-step="2"] .g-scale,[data-step="3"] .g-scale,[data-step="4"] .g-scale,[data-step="5"] .g-scale,
[data-step="3"] .g-measure,[data-step="4"] .g-measure,[data-step="5"] .g-measure,
[data-step="4"] .g-markup,[data-step="5"] .g-markup,
[data-step="5"] .g-peers{opacity:1}
[data-step="3"] .peers b,[data-step="4"] .peers b{opacity:0}
[data-step="5"] .peers b{opacity:1;transform:none}
[data-step="2"] .s-scale .no,[data-step="3"] .s-scale .no,[data-step="4"] .s-scale .no,[data-step="5"] .s-scale .no{display:none}
[data-step="2"] .s-scale .yes,[data-step="3"] .s-scale .yes,[data-step="4"] .s-scale .yes,[data-step="5"] .s-scale .yes{display:inline}
[data-step="3"] .row,[data-step="4"] .row,[data-step="5"] .row,[data-step="3"] .panel__note,[data-step="4"] .panel__note,[data-step="5"] .panel__note{opacity:1;transform:none}
.row.r-b{transition-delay:.25s}.row.r-c{transition-delay:.5s}
/* the tool in hand, in the rail */
.rail i{position:relative}
[data-step="1"] .r1,[data-step="2"] .r2,[data-step="3"] .r3,[data-step="4"] .r4,[data-step="5"] .r5{background:rgba(43,143,214,.22);color:#7cc4f2}
[data-step="3"] .r3b{color:#c4b5fd}

/* the marks draw themselves when their step arrives (and only then: the class is added and removed by the page) */
.draw{stroke-dasharray:1;stroke-dashoffset:0}
.pop,.fadein{transform-box:fill-box;transform-origin:center}
.is-playing .draw{animation:draw .9s var(--ease) both}
.is-playing .draw.d2{animation-delay:.25s}.is-playing .draw.d3{animation-delay:.6s}
.is-playing .pop{animation:pop .5s var(--ease) .5s both}
.is-playing .pop.d2{animation-delay:.9s}.is-playing .pop.d3{animation-delay:1.1s}.is-playing .pop.d4{animation-delay:1.3s}
.is-playing .fadein{animation:fade .8s ease .1s both}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* two people moving round the sheet */
.cur{transform-box:view-box}
.ca{animation:wander-a 9s ease-in-out infinite alternate}.cb{animation:wander-b 11s ease-in-out infinite alternate}
@keyframes wander-a{0%{transform:translate(130px,150px)}50%{transform:translate(260px,110px)}100%{transform:translate(330px,196px)}}
/* nothing keeps moving while it is out of sight (the page marks them) */
.is-away .cur,.is-away .chip{animation-play-state:paused}
@keyframes wander-b{0%{transform:translate(400px,260px)}50%{transform:translate(310px,170px)}100%{transform:translate(160px,235px)}}

/* what is far below the screen is not drawn until it is near (the page stays light on a slow phone) */
.features,.together,.facts,.final{content-visibility:auto;contain-intrinsic-size:auto 640px}

/* ---- features ---- */
.features{padding:clamp(80px,14vh,160px) 0;text-align:center;background:linear-gradient(var(--bg),var(--bg2) 30%,var(--bg2) 85%,var(--bg))}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:56px;text-align:left}
.card{padding:26px 24px 28px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));transition:border-color .3s,transform .4s var(--ease),background .3s}
.card:hover{border-color:rgba(124,196,242,.4);transform:translateY(-3px)}
.card i{display:grid;place-items:center;width:42px;height:42px;margin-bottom:18px;border-radius:12px;color:#7cc4f2;background:rgba(43,143,214,.16)}
.card i svg{width:22px;height:22px}
.card h3{font-size:1.3rem;letter-spacing:-.02em;margin-bottom:8px}
.card p{margin:0;color:var(--mut);font-size:.98rem;line-height:1.5}

/* ---- together ---- */
.together{position:relative;padding:clamp(80px,16vh,180px) 0;text-align:center;background:radial-gradient(60% 70% at 50% 50%,rgba(45,212,191,.12),transparent 70%)}
.lead2{margin:26px 0 0;font-size:1.15rem;font-weight:600;color:var(--teal)}
.chips{list-style:none;margin:46px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.chip{display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.05);font-size:15px;color:#d6d8de;animation:bob 6s ease-in-out infinite}
.chip b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:12px;color:#fff;background:#2b8fd6}
.chip--b b{background:#17a589}.chip--c b{background:#7c3aed}
.chip--b{animation-delay:-2s}.chip--c{animation-delay:-4s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---- facts ---- */
.facts{padding:clamp(40px,8vh,90px) 0;border-block:1px solid var(--line)}
.facts__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px;margin:0;text-align:center}
.facts dt{font-size:clamp(2.6rem,5vw,4.2rem);font-weight:700;letter-spacing:-.04em;background:linear-gradient(120deg,#fff,#7cc4f2);-webkit-background-clip:text;background-clip:text;color:transparent}
.facts dd{margin:6px 0 0;color:var(--mut)}

/* ---- final ---- */
.final{position:relative;padding:clamp(100px,20vh,220px) 0;text-align:center;overflow:hidden}
.final .wrap{position:relative}
.foot{padding:26px 0 40px;border-top:1px solid var(--line);color:var(--dim);font-size:13px}
.foot__in{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* ---- scrolling in: only when scripting is there to take it off again ---- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.is-in{opacity:1;transform:none}
.js .grid .rv:nth-child(2n){transition-delay:.08s}.js .grid .rv:nth-child(3n){transition-delay:.16s}.js .grid .rv:nth-child(4n){transition-delay:.24s}

/* a gentle lift for the window as it arrives, with no script, where the browser can do it from the scroll itself */
@supports (animation-timeline: view()){
  .win{animation:lift linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  @keyframes lift{from{transform:translateY(60px) scale(.94);opacity:.4}to{transform:none;opacity:1}}
}

/* ---- a page not found ---- */
.lost{min-height:100vh;display:grid;place-items:center;text-align:center;padding:120px 24px 60px}
.lost h1{font-size:clamp(3rem,8vw,6rem)}

/* ---- for anybody who asks for less ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .rv{opacity:1;transform:none}
  .step__in{opacity:1;transform:none}
  .cur{display:none}
}

/* ---- the account area of the bar ---- */
.nav__acct{display:flex;align-items:center;gap:18px;margin-left:0}
.nav__signin{font-size:14px;color:var(--mut)}
.nav__signin:hover{color:var(--fg)}
.nav__links{margin-left:auto}
@media (max-width:720px){.nav__acct{margin-left:auto}.nav__signin{display:none}}

/* ---- the account page ---- */
.page .nav{background:rgba(5,5,7,.72);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);border-color:var(--line)}
.acct{position:relative;padding:clamp(110px,18vh,170px) 0 clamp(70px,12vh,140px);overflow:hidden}
.acct .wrap{position:relative}
.acct__head{text-align:center;margin-bottom:clamp(36px,6vh,64px)}
.acct__title{font-size:clamp(2.6rem,6vw + .4rem,5rem)}
.acct__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px;align-items:start}
.acard{padding:clamp(24px,3vw,36px);border:1px solid var(--line);border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015))}
.acard h2{font-size:1.7rem;letter-spacing:-.03em;margin-bottom:12px}
.acard p{margin:0 0 16px;color:var(--mut);line-height:1.5}
.acard .fine{margin-top:18px;color:var(--dim)}
.form{display:grid;gap:6px;margin-top:6px}
.form label{margin-top:10px;font-size:14px;font-weight:600;color:#d6d8de}
.form .opt{font-weight:400;color:var(--dim)}
.form input,.form select,.form textarea{width:100%;padding:13px 14px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.05);color:var(--fg);font:inherit;font-size:16px}
.form select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#a1a1aa 50%),linear-gradient(135deg,#a1a1aa 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.form select option{color:#111;background:#fff}
.form textarea{resize:vertical;min-height:84px}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:2px solid var(--accent-hi);outline-offset:1px;border-color:transparent}
.form .btn{margin-top:20px;justify-self:start}
.form .btn[disabled]{opacity:.55;cursor:default;transform:none}
.msg{min-height:1.5em;margin:12px 0 0;font-size:15px;color:var(--mut)}
.msg.is-ok{color:#6ee7b7}.msg.is-bad{color:#fca5a5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- a reading page (privacy) and the small delete box ---- */
.doc{padding:clamp(110px,18vh,170px) 0 clamp(70px,12vh,140px)}
.doc h1{margin-bottom:18px}
.doc h2{margin:38px 0 8px;font-size:1.35rem;letter-spacing:-.02em}
.doc p{margin:0 0 6px;color:var(--mut);font-size:1.05rem;line-height:1.6}
.doc .lede{margin:0 0 10px;text-align:left}
.doc a,.acard .fine a,.foot a{color:var(--accent-hi);text-decoration:underline;text-underline-offset:3px}
.doc a:hover,.foot a:hover{color:#fff}
.forget{margin-top:22px;border-top:1px solid var(--line);padding-top:14px;color:var(--mut)}
.forget summary{cursor:pointer;font-size:14px;color:var(--mut)}
.forget summary:hover{color:var(--fg)}
.forget .form{margin-top:10px}