/* Stridely web. Editorial, light, unhurried. */
:root{
  --canvas:#F6F3FB;--paper:#FBFAFE;--surface:#FFFFFF;--ink:#221C33;--ink-2:#4B4460;--secondary:#78708A;--brand:#6E4ECD;--brand-deep:#5A45B8;
  --lavender:#ECE5FC;--mint:#E2F2D7;--peach:#FFE9DE;--line:#E7E2F0;--hero:#241B3A;--lime:#D1F57D;
  --display:"Plus Jakarta Sans",ui-rounded,-apple-system,"SF Pro Rounded",system-ui,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--display);-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
/* Fine grain over the whole page, so flat colour reads like paper */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.055;background-image:var(--grain)}
body>*{position:relative;z-index:1}
a{color:var(--brand);text-decoration:none}
h1,h2,h3{font-weight:800;letter-spacing:-.035em;line-height:1.02;margin:0 0 .45em}
h1{font-size:clamp(46px,8vw,96px)}
h2{font-size:clamp(34px,5vw,60px)}
h3{font-size:20px}
p{margin:0 0 1em}
img,svg{max-width:100%}
em.accent{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--brand)}
.wrap{max-width:1160px;margin:0 auto;padding:0 max(24px,env(safe-area-inset-left)) 0 max(24px,env(safe-area-inset-right))}
.narrow{max-width:720px}
.lead{font-size:clamp(18px,2vw,22px);line-height:1.5;color:var(--ink-2)}
/* Navigation */
.nav{display:flex;align-items:center;justify-content:space-between;padding:28px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;letter-spacing:-.04em;color:var(--ink)}
.brand svg{width:26px;height:26px;color:var(--brand)}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-weight:600;color:var(--ink-2);font-size:16px}
.nav-links a[aria-current]{color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--lavender);color:var(--ink);font-size:14px;font-weight:600}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--brand)}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border-radius:999px;font-weight:700;font-size:17px;border:0;cursor:pointer;transition:transform .25s var(--ease),background .2s;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#000;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost:hover{background:var(--surface)}
.btn-block{display:flex;width:100%}
.btn:active{transform:scale(.985)}
.arrow{font-family:var(--serif);font-style:italic}
/* Hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:30px 0 20px;min-height:calc(100vh - 90px)}
.hero h1{max-width:9ch}
.hero .lead{max-width:40ch;margin-bottom:28px}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero .fine{display:block;margin-top:18px;font-size:14px;color:var(--secondary)}
.hero .fine b{color:var(--ink);font-weight:700}
/* Two phones, layered, with parallax */
.duo{position:relative;height:640px;margin:0 auto;max-width:520px;width:100%}
.duo::before{content:"";position:absolute;inset:8% -10% -6%;border-radius:50%;background:radial-gradient(closest-side,var(--lavender) 0%,rgba(236,229,252,.5) 45%,transparent 72%);z-index:-1}
.device{background:#181226;border-radius:52px;padding:12px;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 40px 90px rgba(34,28,51,.28),0 12px 30px rgba(34,28,51,.14)}
.device img{display:block;width:100%;height:auto;border-radius:42px}
.duo .device{position:absolute;width:290px}
.duo .back{left:0;top:60px;transform:rotate(-7deg);opacity:.98}
.duo .front{right:0;top:0;transform:rotate(4deg)}
.duo .front,.duo .back{will-change:transform}
/* Maker's line */
.maker{display:flex;gap:18px;align-items:center;justify-content:center;padding:26px 0 60px;color:var(--secondary);font-size:15px;text-align:center}
.maker span{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink)}
/* Scroll story: sticky phone, copy passes by */
.story{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;padding:40px 0 60px}
.story .sticky{position:sticky;top:8vh;height:84vh;display:grid;place-items:center}
.story .frame{width:min(330px,100%);position:relative}
.story .frame .device{position:relative}
.story .frame img{position:absolute;inset:12px;width:calc(100% - 24px);height:auto;opacity:0;transition:opacity .6s var(--ease)}
.story .frame img.on{opacity:1}
.story .frame img:first-of-type{position:relative;inset:auto;width:100%;visibility:hidden}
.story .steps{display:flex;flex-direction:column}
.story .step{min-height:80vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .5s var(--ease)}
.story .step.on{opacity:1}
.story .step .k{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-bottom:14px}
.story .step h2{max-width:13ch}
.story .step p{font-size:19px;color:var(--ink-2);max-width:38ch}
/* Big statement */
.statement{padding:110px 0;text-align:center}
.statement h2{font-size:clamp(38px,6.4vw,84px);max-width:16ch;margin:0 auto .4em}
.statement p{max-width:48ch;margin:0 auto;color:var(--ink-2);font-size:19px}
.statement .n{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--brand)}
.ledger{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:60px auto 0;max-width:900px;border-top:1px solid var(--line)}
.ledger div{padding:24px 18px 0;border-right:1px solid var(--line);text-align:left}
.ledger div:last-child{border-right:0}
.ledger b{display:block;font-size:15px;margin-bottom:6px}
.ledger span{color:var(--secondary);font-size:15px;line-height:1.5}
/* Closing */
.close{position:relative;padding:120px 0 100px;text-align:center;overflow:hidden}
.close::before{content:"";position:absolute;left:50%;top:0;width:900px;height:900px;transform:translate(-50%,-30%);border-radius:50%;background:radial-gradient(closest-side,var(--lavender),transparent 70%);z-index:-1}
.close h2{margin-bottom:.4em}
.close p{color:var(--ink-2);font-size:19px;margin-bottom:28px}
footer{padding:40px 0 70px;border-top:1px solid var(--line);color:var(--secondary);font-size:15px}
footer .row{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
footer .links{display:flex;flex-wrap:wrap;gap:22px}
footer .links a{color:var(--ink-2)}
/* Reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* Long-form pages */
.page{padding:20px 0 50px}
.page h1{font-size:clamp(40px,6.5vw,72px)}
.prose h2{font-size:clamp(26px,3.2vw,36px);margin-top:1.8em}
.prose p,.prose li{color:var(--ink-2)}
.prose ul{padding-left:1.2em}
.prose li{margin:.4em 0}
.facts-inline{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:28px;margin:34px 0 10px}
.facts-inline div{border-top:2px solid var(--brand);padding-top:14px}
.facts-inline b{display:block;font-size:18px;margin-bottom:6px;color:var(--ink)}
.facts-inline span{color:var(--secondary);font-size:15px}
.qa{border-top:1px solid var(--line);padding:26px 0}
.qa h3{margin-bottom:.35em}
.qa p{color:var(--ink-2);margin:0}
/* Invite and friend pages */
.invite{min-height:100dvh;display:grid;place-items:center;padding:max(24px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.invite .card{background:var(--surface);border:1px solid var(--line);border-radius:30px;max-width:440px;width:100%;text-align:center;padding:38px 30px;box-shadow:0 30px 70px rgba(34,28,51,.10)}
.invite .mark{width:76px;height:76px;border-radius:24px;background:var(--hero);display:grid;place-items:center;margin:0 auto 18px;color:var(--lime)}
.invite .mark svg{width:38px;height:38px}
.invite h1{font-size:36px}
.invite p{color:var(--ink-2)}
.code{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:26px;font-weight:700;letter-spacing:.18em;color:var(--brand);background:var(--lavender);border-radius:16px;padding:14px;margin:14px 0}
.invite .fine{font-size:13px;margin-top:18px;color:var(--secondary)}
/* Responsive */
@media (max-width:1000px){.duo{height:560px;max-width:440px}.duo .device{width:250px}.story{gap:40px}}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;min-height:0;padding-top:10px;gap:28px}
  .hero h1{max-width:none}
  .duo{height:auto;max-width:300px}.duo::before{inset:0 -30%}
  .duo .device{position:relative;width:100%}
  .duo .back{display:none}.duo .front{transform:none;top:auto;right:auto}
  /* On phones the device sticks to the top, cropped by a soft fade, and the copy scrolls beneath it. */
  .story{display:block;padding:6px 0 10vh}
  .story .sticky{position:sticky;top:0;z-index:2;height:40vh;padding:12px 0 0;display:block;background:var(--paper);-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
  .story .sticky::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.055;background-image:var(--grain)}
  .story .frame{width:min(220px,56vw);margin:0 auto;position:relative}
  .story .step{min-height:58vh;padding:3vh 0 6vh;justify-content:flex-start}
  .story .step h2{max-width:none}
  .story .step p{font-size:17px}
  .ledger{grid-template-columns:1fr;border-top:0}.ledger div{border-right:0;border-top:1px solid var(--line);padding:18px 0}
}
@media (max-width:520px){.nav{padding:20px 0}.brand{font-size:20px}.nav-links{gap:18px}.nav-links a{font-size:15px}.pill{display:none}.hero .actions .btn{flex:1 1 auto}.device{border-radius:42px;padding:10px}.device img{border-radius:34px}.invite .card{padding:28px 20px}.invite h1{font-size:30px}.code{font-size:22px;letter-spacing:.12em}.maker{flex-direction:column;gap:6px}}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.duo .front,.duo .back{transform:none!important}}