:root{
  --paper:#F1F3EF; --paper-deep:#E6EAE4;
  --ink:#12201B; --ink-soft:#4C5A54; --ink-faint:#8A968F;
  --mint:#7FBFA5; --mint-deep:#2C6A52; --amber:#CF9B45; --rose:#C2657A;
  --night:#101312; --night-soft:#1A1F1D;
  --hair:rgba(18,32,27,.14); --hair-night:rgba(255,255,255,.12);
  --sans:"Familjen Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --wrap:1120px; --band:clamp(70px,9vw,120px); --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.55;letter-spacing:-.005em;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--mint-deep);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px}
.band{padding:var(--band) 0}
.band-tight{padding:calc(var(--band)*.62) 0}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.028em;line-height:1.03}
h1{font-size:clamp(2.4rem,5.6vw,3.9rem)}
h2{font-size:clamp(1.8rem,3.5vw,2.6rem);line-height:1.07}
h3{font-size:1.08rem;letter-spacing:-.012em;line-height:1.3}
p{margin:0}
.lede{font-family:var(--serif);font-size:clamp(1.1rem,1.8vw,1.3rem);line-height:1.62;
  font-weight:300;color:var(--ink-soft);max-width:56ch;letter-spacing:0}
.prose{max-width:62ch;color:var(--ink-soft)}
.stack>*+*{margin-top:22px}

/* header / nav */
.top{position:sticky;top:0;z-index:40;background:rgba(241,243,239,.85);
  backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .25s}
.top.stuck{border-bottom-color:var(--hair)}
.top-in{display:flex;align-items:center;gap:22px;height:66px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:600;
  font-size:1.12rem;letter-spacing:-.03em;margin-right:auto}
.brand svg{width:19px;height:19px;flex:none}
.nav{display:flex;gap:24px;align-items:center}
.nav a{text-decoration:none;font-size:.97rem;color:var(--ink-soft);padding:4px 0;
  border-bottom:1.5px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--ink);border-bottom-color:var(--mint)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);
  font-size:.98rem;font-weight:500;letter-spacing:-.01em;padding:12px 22px;border-radius:999px;
  border:1px solid transparent;text-decoration:none;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:#0a1512}
.btn-mint{background:var(--mint);color:#0d1a15}
.btn-mint:hover{background:#93cdb4}
.btn-ghost{border-color:var(--hair);color:var(--ink)}
.btn-ghost:hover{background:var(--paper-deep)}
.btn-sm{padding:9px 17px;font-size:.92rem}
.night .btn-ghost{border-color:var(--hair-night);color:#EAEFEC}
.night .btn-ghost:hover{background:rgba(255,255,255,.06)}
.textlink{text-decoration:none;border-bottom:1.5px solid var(--mint);padding-bottom:2px;
  font-size:1rem;font-weight:500}

/* ---- screenshot art direction ---- */
.plinth{position:relative;padding:clamp(18px,3vw,38px);border-radius:22px;
  background:linear-gradient(165deg,#E9EDE7 0%,#DDE4DE 100%)}
.night .plinth{background:linear-gradient(165deg,#171B19 0%,#0D100F 100%);
  border:1px solid rgba(255,255,255,.05)}
.shot{border-radius:14px;overflow:hidden;background:var(--night);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 1px 2px rgba(18,32,27,.14),0 30px 60px -30px rgba(18,32,27,.55)}
.shot img{width:100%}
.glow{position:relative}
.glow::after{content:"";position:absolute;left:8%;right:8%;bottom:-4%;height:42%;z-index:-1;
  background:radial-gradient(ellipse at 50% 100%,rgba(127,191,165,.34),transparent 70%);filter:blur(10px)}
.cap{margin-top:14px;font-size:.88rem;color:var(--ink-faint);max-width:48ch}
.night .cap{color:#78847F}

/* detail strips: a real piece of UI, cropped, paired with a claim */
.detail{border-radius:12px;overflow:hidden;background:var(--night);
  border:1px solid rgba(255,255,255,.09);box-shadow:0 16px 34px -24px rgba(18,32,27,.6)}
.detail img{width:100%}
.detail-cap{margin-top:11px;font-size:.85rem;color:var(--ink-faint)}
.night .detail-cap{color:#78847F}

/* callouts */
.annot{position:relative}
.cal{position:absolute;display:none;font-size:.79rem;line-height:1.25;color:#CFE6DB;
  background:rgba(10,13,12,.86);border:1px solid rgba(127,191,165,.34);
  padding:6px 12px;border-radius:999px;white-space:nowrap;backdrop-filter:blur(4px)}
.cal::before{content:"";position:absolute;left:22px;width:1px;background:rgba(127,191,165,.5)}
.cal.up::before{bottom:100%;height:16px}
@media (min-width:900px){.cal{display:block}}

.heroart-wrap{position:relative}
.heroart{width:100%;height:auto;max-height:620px;display:block}
@media (max-width:880px){.heroart{max-height:460px;margin:0 auto}}
/* hero */
.hero{padding-top:clamp(44px,6vw,84px);padding-bottom:clamp(52px,7vw,92px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(34px,5vw,68px);align-items:center}
.hero h1{margin-bottom:24px}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:32px}
.hero-note{margin-top:18px;font-size:.92rem;color:var(--ink-faint)}
.hero-live{margin-top:22px;font-size:1.05rem;color:var(--ink-soft);min-height:1.6em}
.rotator{position:relative;display:inline-block;border-bottom:2px solid var(--mint);
  padding-bottom:1px;white-space:nowrap;color:var(--ink)}
.rotator span{display:inline-block;transition:opacity .34s ease,transform .34s ease}
.rotator.swap span{opacity:0;transform:translateY(-6px)}

/* page header for subpages */
.phead-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,68px);align-items:center}
@media (max-width:960px){.phead-grid{grid-template-columns:1fr}}
.phead{padding-top:clamp(46px,6vw,84px);padding-bottom:clamp(30px,4vw,52px)}
.phead .lede{margin-top:22px}
.crumb{font-size:.9rem;color:var(--ink-faint);margin-bottom:18px}

/* generic split */
.split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(30px,5vw,76px);align-items:start}
.split-mid{align-items:center}

/* night */
.night{background:var(--night);color:#EAEFEC}
.night h2,.night h3{color:#F4F8F6}
.night .prose,.night .lede{color:#A9B5B0}

/* three modes: columns under a structural rule */
.modes-cols{margin-top:clamp(38px,5vw,60px);border-top:1px solid var(--hair-night)}
.stops{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.stop{padding-top:26px;position:relative}
.stop::before{content:"";position:absolute;top:-1px;left:0;width:1px;height:17px;background:var(--hair-night)}
.stop h3{margin-bottom:8px}
.stop p{color:#A9B5B0;font-size:.98rem;max-width:34ch}
.stop-chip{display:inline-block;font-size:.82rem;color:var(--mint);margin-bottom:11px}

.problem{max-width:62ch}


.diff-head{max-width:22ch;margin-bottom:clamp(34px,4vw,48px)}
.diff{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(26px,4vw,54px);
  padding-top:clamp(30px,4vw,42px);border-top:1px solid var(--hair)}
.diff h3{margin-bottom:10px}
.diff p{color:var(--ink-soft);font-size:1rem;max-width:34ch}
@media (max-width:1000px){.diff{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.diff{grid-template-columns:1fr;gap:30px}}

/* segmented control */
.modes-stack>*+*{margin-top:clamp(28px,3.6vw,40px)}
.modes-intro{max-width:60ch}
.seg-panels .seg-panel p{max-width:62ch}
.seg{display:flex;gap:4px;padding:5px;background:#191F1C;border:1px solid var(--hair-night);border-radius:999px}
.seg button{flex:1;appearance:none;background:transparent;border:1px solid transparent;border-radius:999px;
  font-family:var(--sans);font-size:.95rem;font-weight:500;letter-spacing:-.01em;color:#8F9B96;
  padding:12px 8px;cursor:pointer;transition:color .16s,background .16s,border-color .16s}
.seg button:hover{color:#DCE5E1}
.seg button[aria-selected="true"]{background:rgba(127,191,165,.13);border-color:var(--mint);color:#F0F6F3}
.seg-panels{margin-top:22px;min-height:150px}
.seg-panel p{color:#A9B5B0;max-width:46ch}
.seg-best{color:var(--mint);font-size:.86rem;margin-bottom:10px}
@media (max-width:420px){.seg button{font-size:.86rem;padding:11px 4px}}

/* contexts */
.contexts{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;max-width:74ch}
.ctx{display:inline-flex;align-items:center;gap:9px;padding:10px 17px 10px 14px;
  border:1px solid var(--hair);border-radius:999px;font-size:1rem;background:rgba(255,255,255,.5)}
.dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--mint)}
.ctx:nth-child(2n) .dot{background:var(--amber)}
.ctx:nth-child(3n) .dot{background:var(--rose)}

/* demands list */
.demands{border-top:1px solid var(--hair)}
.demands ul{margin:0;padding:0}
.demands li{list-style:none;padding:15px 0;border-bottom:1px solid var(--hair);
  display:flex;gap:14px;align-items:baseline;color:var(--ink-soft);font-size:1.02rem}
.demands li b{font-weight:500;color:var(--ink)}
.demands .tick{flex:none;width:15px;color:var(--ink-faint);font-size:.82rem}
.turn{margin-top:26px;font-family:var(--serif);font-size:1.18rem;line-height:1.55;
  font-weight:300;max-width:46ch}

/* quote */
.quote{font-family:var(--serif);font-weight:300;font-size:clamp(1.28rem,2.5vw,1.8rem);
  line-height:1.42;letter-spacing:-.01em;max-width:24ch}
.quote-by{margin-top:18px;font-family:var(--sans);font-size:.9rem;color:var(--ink-faint);max-width:30ch}

/* principles */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,4vw,54px);margin-top:46px}
.three h3{margin-bottom:9px}
.three p{color:var(--ink-soft);font-size:1rem;max-width:34ch}
.three .bar{width:34px;height:3px;border-radius:2px;background:var(--mint);margin-bottom:18px}
.three>div:nth-child(2) .bar{background:var(--amber)}
.three>div:nth-child(3) .bar{background:var(--rose)}

/* roadmap + status */
.panel{background:var(--paper-deep);border:1px solid var(--hair);border-radius:var(--r);
  padding:clamp(28px,4.4vw,50px)}
.panel-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4vw,54px);align-items:start}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;color:var(--ink-soft);
  border:1px solid var(--hair);background:var(--paper);padding:6px 13px;border-radius:999px;margin-bottom:18px}
.tag i{width:6px;height:6px;border-radius:50%;background:var(--amber);display:block}
.plainlist{margin:0;padding:0;list-style:none;border-top:1px solid var(--hair)}
.plainlist li{padding:13px 0;border-bottom:1px solid var(--hair);color:var(--ink-soft);font-size:1rem;
  display:flex;gap:12px;align-items:baseline}
.plainlist .mark{flex:none;width:9px;height:9px;border-radius:50%;background:var(--mint);transform:translateY(-1px)}
.plainlist .mark.soon{background:transparent;border:1.5px solid var(--ink-faint)}

.night .tag{background:rgba(255,255,255,.06);border-color:var(--hair-night);color:#A9B5B0}
/* founder */
.portrait{width:clamp(140px,17vw,200px);border-radius:18px;overflow:hidden;
  border:1px solid var(--hair);box-shadow:0 18px 38px -26px rgba(18,32,27,.5)}
.portrait img{width:100%;height:auto}
.founder-name{margin-top:20px;font-weight:600;font-size:1.12rem;letter-spacing:-.02em}
.founder-role{margin:3px 0 14px;font-size:.9rem;color:var(--ink-faint)}
.founder{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr);gap:clamp(26px,4vw,64px);align-items:start}

/* beta */
.beta-in{max-width:620px}
.form{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.form input{flex:1 1 260px;min-width:0;padding:13px 18px;border-radius:999px;
  border:1px solid var(--hair-night);background:rgba(255,255,255,.06);color:#EAEFEC;
  font-family:var(--sans);font-size:1rem}
.form input::placeholder{color:#7C8783}
.form input:focus{outline:2px solid var(--mint);outline-offset:1px;border-color:transparent}
.formnote{margin-top:14px;font-size:.88rem;color:#78847F}
.done{margin-top:28px;padding:16px 22px;border:1px solid rgba(127,191,165,.4);border-radius:var(--r);
  background:rgba(127,191,165,.09);color:#CFE6DB;font-size:1rem}

/* closing cta */
.cta-row{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}

/* footer */
.foot{border-top:1px solid var(--hair-night);background:var(--night);color:#6F7B76}
.foot-in{display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:26px 0;font-size:.88rem;flex-wrap:wrap}
.foot a{text-decoration:none;color:#8A968F}
.foot a:hover{color:#C4CDC9}
.foot-nav{display:flex;gap:20px}

@media (max-width:880px){
  .hero-grid,.split,.panel-grid,.founder{grid-template-columns:1fr}
  .seq{grid-template-columns:repeat(2,1fr)}
  .step.last{grid-column:1/-1}
  .three{grid-template-columns:1fr;gap:32px}
  .stops{grid-template-columns:1fr;gap:0}
  .stop{padding:20px 0 20px 18px;border-left:1px solid var(--hair-night)}
  .stop::before{display:none}
  .seg-panels{min-height:0}
}
@media (max-width:640px){
  .top-in{height:60px;gap:14px}
  .nav{gap:15px}
  .nav a{font-size:.9rem}
  .hide-sm{display:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .seq{grid-template-columns:1fr}
  .step.last{grid-column:auto}
  .hero-cta .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}