/* Oikos brand: Porcelain Square, Sky (docs/DESIGN.md). Serif display for the marketing voice, Onest for everything else. */
:root{
  --th:235; --ph:275; --nh:265;
  --bg: oklch(0.968 0.009 var(--th));
  --card: oklch(0.997 0.002 var(--nh));
  --ink: oklch(0.22 0.03 var(--nh));
  --muted: oklch(0.42 0.025 var(--nh));
  --line: oklch(0.9 0.015 var(--th));
  --primary: oklch(0.38 0.121 var(--ph));
  --mark: oklch(0.5 0.165 var(--ph));
  --deep: oklch(0.26 0.09 var(--ph));
  --lilac-w: oklch(0.945 0.045 300); --lilac: oklch(0.86 0.07 300); --lilac-i: oklch(0.33 0.08 300);
  --mint-w: oklch(0.945 0.045 165);  --mint-i: oklch(0.33 0.08 165);
  --peach-w: oklch(0.945 0.045 55);  --peach-i: oklch(0.33 0.08 55);
  --sky-w: oklch(0.945 0.045 235);   --sky: oklch(0.86 0.07 235); --sky-i: oklch(0.33 0.08 235);
  --butter-w: oklch(0.93 0.09 95);   --butter-i: oklch(0.3 0.07 80);
  --rose-w: oklch(0.945 0.045 20);   --rose-i: oklch(0.38 0.12 25);
  --shadow: 0 1px 2px oklch(0.4 0.05 var(--th) / 10%), 0 30px 60px -30px oklch(0.35 0.08 var(--th) / 35%);
  --ease: cubic-bezier(.2,.7,.2,1);
  --serif: 'Instrument Serif', Georgia, serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Onest',system-ui,sans-serif; font-feature-settings:'ss01','cv11'; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased}
.mono{font-family:'IBM Plex Mono',monospace}
button{font:inherit; color:inherit}
a{color:inherit}
.ph{background:var(--butter-w); color:var(--butter-i); border-radius:4px; padding:0 5px}
.memo{position:fixed; left:14px; bottom:14px; z-index:60; max-width:300px; border-radius:12px; padding:10px 14px; background:var(--butter-w); color:var(--butter-i); font-size:12px; line-height:1.4; box-shadow:var(--shadow)}
.wrapw{max-width:1240px; margin:0 auto; padding:0 32px}
html{scrollbar-gutter:stable}   /* room for a scrollbar on every page, long or short, so the bar never moves sideways between pages */
.kicker{font-size:13px; font-weight:600; letter-spacing:.07em; color:var(--mark)}
.serif{font-family:var(--serif); font-weight:400; letter-spacing:-0.01em}
h1,h2{font-family:var(--serif); font-weight:400; margin:0; text-wrap:balance; letter-spacing:-0.015em}
h1 em,h2 em{color:var(--muted); letter-spacing:0}   /* the italic is narrower; tight tracking made its letters touch */
h2{font-size:clamp(40px,4.6vw,64px); line-height:1.02; margin-top:12px}
.rv{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .9s var(--ease)}
.rv.in{opacity:1; transform:none}
.cta{display:inline-flex; align-items:center; gap:10px; font-size:16px; font-weight:500; border-radius:999px; padding:15px 24px; background:var(--primary); color:oklch(0.99 0 0); text-decoration:none; box-shadow:0 14px 30px -14px oklch(0.38 0.121 275 / 70%); transition:transform .12s ease-out}
.cta:active{transform:scale(.97)}
.cta svg{transition:transform .3s var(--ease)} .cta:hover svg{transform:translateX(3px)}
.small{margin-top:12px; font-size:14px; color:var(--muted)}

/* ---------- top bar ---------- */
.bar{position:sticky; top:0; z-index:40; transition:background .3s ease, box-shadow .3s ease;
  background:linear-gradient(180deg, oklch(1 0 0 / 26%), oklch(1 0 0 / 10%));
  backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%);
  box-shadow:inset 0 -1px 0 oklch(1 0 0 / 45%)}
/* the hero runs up under the bar, so at the top the bar is glass over the hero's colours, not a white strip */
.heropin{margin-top:-64px} .hero{padding-top:64px}
.bar.solid{background:linear-gradient(180deg, oklch(1 0 0 / 68%), oklch(1 0 0 / 46%)); box-shadow:inset 0 -1px 0 oklch(1 0 0 / 70%), 0 1px 0 var(--line), 0 8px 24px oklch(0.4 0.06 265 / 6%)}
.bar .wrapw{display:flex; align-items:center; gap:28px; height:64px}
/* over the purple: dark glass, a light tint so the colour shows through, white text */
.bar.dark{background:linear-gradient(180deg, oklch(1 0 0 / 12%), oklch(1 0 0 / 5%)); box-shadow:inset 0 -1px 0 oklch(1 0 0 / 18%), inset 0 1px 0 oklch(1 0 0 / 10%); backdrop-filter:blur(18px) saturate(170%) brightness(1.08); -webkit-backdrop-filter:blur(18px) saturate(170%) brightness(1.08)}
.bar.dark, .bar.dark a, .bar.dark button{color:oklch(0.97 0.01 265)}
.bar{transition:background .35s ease, box-shadow .35s ease, color .35s ease}
@media (prefers-reduced-transparency: reduce){ .bar{background:oklch(0.99 0.004 235); backdrop-filter:none; -webkit-backdrop-filter:none} }
.brand{display:flex; align-items:center; gap:10px; font-size:21px; font-weight:500; text-decoration:none}
.brand svg{width:24px; height:24px}
.navl{display:flex; gap:6px; flex:1}
.navl > button,.navl > a{all:unset; cursor:pointer; font-size:15px; color:var(--muted); padding:8px 12px; border-radius:999px; transition:background .2s ease, color .2s ease}
.navl > button:hover,.navl > a:hover,.navl > button[aria-expanded="true"]{background:oklch(1 0 0 / 70%); color:var(--ink)}
.navl > button::after{content:""; display:inline-block; width:6px; height:6px; margin-left:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-3px) rotate(45deg)}
.menu{position:absolute; top:60px; left:max(32px, calc(50% - 620px + 120px)); width:560px; padding:10px; border-radius:20px; background:oklch(0.997 0.002 265 / 92%); backdrop-filter:blur(20px); box-shadow:0 2px 6px oklch(0.4 0.05 235 / 10%), 0 40px 80px -30px oklch(0.35 0.08 235 / 40%); display:grid; grid-template-columns:1fr 1fr; gap:4px; opacity:0; transform:translateY(-6px) scale(.98); transform-origin:top left; pointer-events:none; transition:opacity .2s ease, transform .25s var(--ease)}
.menu.open{opacity:1; transform:none; pointer-events:auto}
.menu a{display:flex; gap:12px; align-items:center; padding:10px; border-radius:14px; text-decoration:none; transition:background .15s ease}
.menu a:hover,.menu a[aria-current="true"]{background:var(--bg)}
.menu .av{flex:none; width:44px; height:44px; border-radius:50%; overflow:hidden; display:block} .menu .av svg{width:100%; height:100%; display:block; transform:scale(1.6) translateY(6%)}
.menu b{display:block; font-size:15px; font-weight:500}
.menu span{display:block; font-size:13px; color:var(--muted); margin-top:1px}

/* ---------- hero ---------- */
.hero{position:relative; isolation:isolate; overflow:hidden}
.hero::before{content:""; position:absolute; z-index:-1; inset:-10% -10% 0 -10%; background:
  radial-gradient(38% 55% at 74% 46%, oklch(0.93 0.05 300 / 75%), transparent 70%),
  radial-gradient(30% 40% at 88% 78%, oklch(0.95 0.04 55 / 70%), transparent 70%),
  radial-gradient(30% 45% at 8% 10%, oklch(0.95 0.035 235 / 80%), transparent 70%)}
.hgrid{display:grid; grid-template-columns:minmax(0,1fr) 620px; gap:48px; align-items:center; padding-top:28px; padding-bottom:20px}
main,.hero .hgrid{transition:opacity .22s ease} main.switching{opacity:0} .hero.switching .hgrid{opacity:0}
.eyebrow{display:inline-flex; gap:8px; align-items:center; font-size:14px; font-weight:500; color:var(--lilac-i); background:var(--lilac-w); padding:6px 12px; border-radius:999px}
.eyebrow i{width:6px; height:6px; border-radius:50%; background:currentColor}
h1{margin-top:0; font-size:clamp(50px,5.4vw,84px); line-height:1.06; letter-spacing:-0.006em}   /* room between lines so a g never meets the f below it */
h1 em{display:block}
.lede{margin:22px 0 0; font-size:20px; line-height:1.5; color:var(--muted); max-width:27em; text-wrap:pretty}
.copy .cta{margin-top:30px}

.stage{position:relative; width:620px; height:600px; justify-self:center}
.rail{display:none !important; position:absolute; left:290px; right:0; top:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; z-index:6}
.rail button{all:unset; cursor:pointer; display:flex; flex-direction:column; gap:7px; font-size:13px; color:var(--muted); transition:color .3s ease}
.rail .b{height:3px; border-radius:3px; background:oklch(0.88 0.02 265 / 70%); overflow:hidden}
.rail .b i{display:block; height:100%; background:var(--primary); transform:scaleX(0); transform-origin:left}
.rail button.on{color:var(--ink)} .rail button.done .b i{transform:scaleX(1)}
.rail button.on .b i{animation:fill var(--d,3000ms) linear forwards}
.paused .rail button.on .b i{animation:none; transform:scaleX(1)}
@keyframes fill{to{transform:scaleX(1)}}
.person{position:absolute; left:0; top:44px; width:330px; height:450px; border-radius:30px; overflow:hidden; box-shadow:var(--shadow); background:var(--lilac-w)}
.person svg{width:100%; height:100%; display:block; transform:scale(1.04); transition:transform 8s ease-out}
.person.live svg{transform:scale(1)}
.person .eyes,.menu .eyes{animation:blink 6s infinite}
@keyframes blink{0%,95%,100%{transform:scaleY(1)} 97%{transform:scaleY(.15)}}
.person .tag{position:absolute; left:14px; bottom:14px; padding:9px 14px; border-radius:14px; background:oklch(1 0 0 / 72%); backdrop-filter:blur(14px); font-size:13px; line-height:1.3}
.person .tag b{display:block; font-size:14px; font-weight:600}
.card{position:absolute; background:var(--card); border-radius:18px; box-shadow:var(--shadow); opacity:0; transition:transform .9s var(--ease), opacity .6s ease, filter .6s ease}
.dim .row,.dim h3,.dim .t,.dim .k{color:var(--muted) !important}
.dim{box-shadow:0 1px 2px oklch(0.4 0.05 235 / 8%)}
.inc{left:290px; top:96px; width:330px; padding:20px 22px; transform:translateY(30px)}
.inc .top{display:flex; justify-content:space-between; gap:10px; align-items:center}
.inc .file{font-size:12px; color:var(--muted)}
.pill{font-size:12px; font-weight:500; padding:4px 10px; border-radius:999px; background:var(--sky-w); color:var(--sky-i); white-space:nowrap}
.inc h3{margin:12px 0 2px; font-size:21px; font-weight:500; letter-spacing:-0.01em}
.inc .sub{font-size:13px; color:var(--muted)}
.rows{margin-top:12px; border-top:1px solid var(--line)}
.row{display:grid; grid-template-columns:1fr auto; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; transition:color .4s ease}
.row .v{font-variant-numeric:tabular-nums; text-align:right}
.finding{left:290px; top:150px; width:330px; padding:18px 20px; border-left:4px solid var(--rose-i); transform:translateY(26px) scale(.98)}
.finding .k{font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--rose-i)}
.finding .t{margin-top:6px; font-size:16px; line-height:1.4}
.finding .src{margin-top:10px; font-size:12px; padding:6px 9px; border-radius:8px; background:var(--butter-w); color:var(--butter-i); display:inline-block}
.reply{left:-14px; top:400px; width:330px; padding:14px 16px; display:flex; gap:12px; align-items:flex-start; transform:translateY(24px); z-index:3}
.reply .you{flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--lilac-w); color:var(--lilac-i)}
.reply .w{font-size:12px; color:var(--muted)} .reply .m{font-size:14.5px; line-height:1.4; margin-top:2px}
.kept{left:290px; top:170px; width:300px; padding:14px 16px; display:flex; gap:12px; align-items:center; transform:translateY(24px)}
.kept .ic{flex:none; width:38px; height:38px; border-radius:12px; background:var(--mint-w); color:var(--mint-i); display:grid; place-items:center}
.kept .n{font-size:24px; letter-spacing:-0.02em; font-variant-numeric:tabular-nums}
.kept .l{font-size:12.5px; color:var(--muted); line-height:1.3}
.b1 .inc{opacity:1; transform:none}
.b2 .inc,.b3 .inc{opacity:0; transform:translateY(-24px) scale(.97)}
.b2 .finding{opacity:1; transform:none}
.b2 .row.hit{color:var(--rose-i); font-weight:500}
.b3 .reply,.b3 .kept{opacity:1; transform:none}
.b3 .finding{opacity:0; transform:translateY(-24px) scale(.97)}
.b3 .kept{transition-delay:.5s}
.kept{padding:22px 24px} .kept .n{font-size:34px}
/* the hero holds while you scroll through its three moments, then the page moves on */
.herostick{position:sticky; top:0}   /* hero and "Instead," hold together: on a tall screen both show, on a short one "Instead," peeks in */
.beats{position:absolute; left:290px; right:0; bottom:-6px; display:flex; justify-content:center; gap:8px; z-index:6}
.beats{align-items:center}
/* invisible taller hit area, so the thin bars are easy to click */
.beats i::after,.dots i::after{content:""; position:absolute; inset:-10px -3px}
.beats i{position:relative; cursor:pointer; width:28px; height:4px; border-radius:4px; background:oklch(0.88 0.02 265 / 80%); transition:background .3s ease, width .4s var(--ease)}
.beats i.on{background:var(--primary); width:44px} .beats i.done{background:var(--lilac)}
.cue{position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 0 34px; font-size:13px; letter-spacing:.04em; color:var(--muted); transition:opacity .5s ease}
.cue.gone{opacity:0}
/* a mouse with a dot rolling down, and rings rippling out behind it like a drop in water */
.cue .m{position:relative; width:26px; height:40px; border-radius:14px; border:1.5px solid oklch(0.45 0.06 265 / 55%); background:oklch(1 0 0 / 55%); backdrop-filter:blur(6px)}
.cue .m::after{content:""; position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:var(--primary); animation:roll 2.2s var(--ease) infinite}
@keyframes roll{0%{transform:translateY(0); opacity:0} 20%{opacity:1} 70%{transform:translateY(14px); opacity:0} 100%{opacity:0}}
.cue .rp{position:absolute; left:50%; top:38px; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; border:1px solid oklch(0.6 0.12 280 / 35%); z-index:-1; animation:ripple 3.6s cubic-bezier(.2,.6,.3,1) infinite}
.cue .rp:nth-child(3){animation-delay:1.1s} .cue .rp:nth-child(4){animation-delay:2.2s}
@keyframes ripple{0%{transform:scale(1) scaleY(.4); opacity:0} 12%{opacity:.7} 75%{opacity:0} 100%{transform:scale(12) scaleY(.3); opacity:0}}
.cue i{display:none}
@keyframes cue{0%{transform:scaleY(0)} 60%{transform:scaleY(1); opacity:1} 100%{transform:scaleY(1); opacity:0}}

/* ---------- instead ---------- */
.instead{position:relative; z-index:2; text-align:center; padding:10px 32px 90px}
/* the papers spill over the sections above and below, and fade out rather than stop at an edge */
.instead canvas{position:absolute; left:0; top:-120px; width:100%; height:calc(100% + 280px); z-index:-1; pointer-events:none;
  /* fades out top and bottom, and keeps a clear oval round the words so no paper crosses them */
  --clear:radial-gradient(ellipse var(--cw, 40%) var(--ch, 30%) at 50% var(--cy, 50%), transparent 72%, #000 100%);
  -webkit-mask-image:linear-gradient(transparent, #000 12%, #000 84%, transparent), var(--clear); -webkit-mask-composite:source-in;
  mask-image:linear-gradient(transparent, #000 12%, #000 84%, transparent), var(--clear); mask-composite:intersect}
.instead > :not(canvas){position:relative}
.inspin{position:relative}
.instead.solo{position:sticky; top:64px; min-height:calc(100vh - 64px); display:flex; flex-direction:column; justify-content:center; padding-top:20px; padding-bottom:40px}
.instead.solo .big{transform:scale(calc(1.06 - var(--ip, 0) * .1)); transition:transform .2s linear}
.instead.solo .tags span{opacity:.25; transform:translateY(10px) scale(.94); transition:opacity .4s ease, transform .5s cubic-bezier(.34,1.56,.64,1)}
.instead.solo .tags span.lit{opacity:1; transform:none}
.instead .big{font-family:var(--serif); font-size:clamp(96px,13vw,200px); line-height:.9; color:var(--primary); font-style:italic}
.instead .line{margin-top:16px; font-size:clamp(22px,2.4vw,32px)}
.instead .line em{font-style:normal; color:var(--muted)}
.tags{margin-top:28px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.tags span{font-size:15px; font-weight:500; padding:8px 16px; border-radius:999px}
.tags span:nth-child(1){background:var(--rose-w); color:var(--rose-i)} .tags span:nth-child(2){background:var(--butter-w); color:var(--butter-i)}
.tags span:nth-child(3){background:var(--peach-w); color:var(--peach-i)} .tags span:nth-child(4){background:var(--sky-w); color:var(--sky-i)}
.tags span:nth-child(5){background:var(--lilac-w); color:var(--lilac-i)}

/* ---------- scale: everything flows in, the right things flow out ---------- */
.scale{background:var(--deep); color:oklch(0.97 0.01 265); position:relative; isolation:isolate; overflow:hidden; padding:96px 0 40px}
.scale::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(50% 60% at 50% 55%, oklch(0.36 0.12 275), transparent 75%)}
.scale .kicker{color:var(--lilac)}
/* desktop: the purple section holds while you scroll; each source and outcome lights up in turn and the counts climb */
@media (min-width: 1101px), (min-width: 900px) and (min-height: 501px){ .scalepin .scale{position:sticky; top:var(--scaleTop, 0px); padding-top:108px; padding-bottom:24px} }   /* held from the very top, so the purple runs under the frosted nav */
.node3{transition:box-shadow .4s ease, background .4s ease, transform .4s var(--ease)}
.node3.hot{background:linear-gradient(160deg, oklch(1 0 0 / 40%), oklch(1 0 0 / 18%)); box-shadow:inset 0 1px 0 oklch(1 0 0 / 60%), 0 0 0 1px oklch(0.85 0.08 200 / 60%), 0 0 28px oklch(0.8 0.12 220 / 45%); transform:translate(-50%,-50%) scale(1.06)}
.scale h2 em{color:oklch(0.8 0.04 275)}
.shead{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px}
.counter{text-align:left}
.counter .n{font-family:var(--serif); font-size:clamp(48px,5vw,76px); line-height:1; font-variant-numeric:tabular-nums}
.counter .l{font-size:14px; color:oklch(0.82 0.03 275)}
.net{position:relative; height:var(--netH, 520px); margin-top:24px}
.net canvas{position:absolute; inset:0; width:100%; height:100%}
.node3{position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:14px; background:linear-gradient(160deg, oklch(1 0 0 / 26%), oklch(1 0 0 / 10%)); border:1px solid oklch(1 0 0 / 30%); box-shadow:inset 0 1px 0 oklch(1 0 0 / 45%), 0 8px 24px oklch(0.15 0.08 275 / 35%); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); color:oklch(0.99 0 0); font-size:14px; font-weight:500; white-space:nowrap}
.node3 i{width:8px; height:8px; border-radius:50%}
.node3.src i{background:var(--sky)} .node3.dst i{background:oklch(0.86 0.07 165)}
.node3 .ph{font-size:11px; margin-left:4px}
.node3.out3 b{font-family:var(--serif); font-size:24px; font-weight:400; letter-spacing:-0.01em; font-variant-numeric:tabular-nums; line-height:1}
.node3.out3 span{color:oklch(0.88 0.03 275); font-weight:400}
.node3.bump{animation:bump .5s ease} @keyframes bump{40%{box-shadow:inset 0 1px 0 oklch(1 0 0 / 45%), 0 0 0 4px oklch(0.86 0.07 165 / 35%)}}
.hub{position:absolute; left:50%; top:50%; width:120px; height:120px; margin:-60px 0 0 -60px; border-radius:50%; background:oklch(0.99 0.005 265); color:var(--primary); display:grid; place-items:center; box-shadow:0 0 0 12px oklch(1 0 0 / 6%), 0 0 80px 10px oklch(0.6 0.15 275 / 55%)}
.hub svg{width:46px; height:46px}
.hub::after{content:""; position:absolute; inset:-12px; border-radius:50%; border:1px solid oklch(1 0 0 / 30%); animation:ring 3s ease-out infinite}
@keyframes ring{from{transform:scale(1); opacity:.8} to{transform:scale(1.8); opacity:0}}
.colh{position:absolute; top:0; font-size:12px; font-weight:600; letter-spacing:.07em; color:oklch(0.8 0.04 275)}

/* ---------- how it works: pinned ---------- */
.flow{position:relative; height:calc(100vh + 4 * 140vh)}  /* about one and a half screens of scroll per step, time to watch and read */
.pinwrap{position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; isolation:isolate}
#flowfx{position:absolute; inset:0; width:100%; height:100%; z-index:-1}
.fxtags span{justify-self:center; padding:4px 11px; border-radius:999px; background:oklch(1 0 0 / 80%); box-shadow:0 0 0 1px var(--line)}
.fxtags{position:absolute; display:grid; grid-template-columns:repeat(5,1fr); text-align:center; font-size:13px; font-weight:500; color:var(--ink); opacity:0; transition:opacity .5s ease .4s; pointer-events:none}
.fxtags.on{opacity:1}
.fxtags span{white-space:nowrap}
.outlist{display:none}
@media (max-width: 899px), (max-width: 1100px) and (max-height: 500px){ .fxtags,#flowfx{display:none} }
.pinwrap::before{content:""; position:absolute; z-index:-1; width:1000px; height:1000px; right:-200px; top:50%; transform:translateY(-50%); border-radius:50%; background:radial-gradient(closest-side, oklch(0.93 0.05 300 / 70%), transparent)}
.flowin{display:grid; grid-template-columns:minmax(0,1fr) calc(640px * var(--fz, 1)); gap:64px; align-items:center; width:100%}
.chs{position:relative; margin-top:34px; min-height:150px}
.ch{position:absolute; inset:0 0 auto 0; opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .7s var(--ease)}
.ch.on{opacity:1; transform:none}
.ch .num{font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--mark)}
.ch h3{margin:0; font-size:30px; font-weight:400; letter-spacing:-0.02em}
.ch p{margin:10px 0 0; font-size:18px; line-height:1.5; color:var(--muted); max-width:26em}
.dots{display:flex; gap:8px}
.dots i{position:relative; height:4px; width:22px; border-radius:4px; background:var(--line); transition:background .4s ease, width .5s var(--ease)}
.dots i.on{background:var(--primary); width:44px} .dots i.done{background:var(--lilac)}
.pipe{position:relative; display:flex; flex-direction:column; gap:12px; animation:floaty 9s ease-in-out infinite alternate}
@keyframes floaty{from{transform:translateY(-8px)} to{transform:translateY(8px)}}
.pipe::before{content:""; position:absolute; left:29px; top:20px; bottom:20px; width:2px; background:var(--line)}
.node{position:relative; display:none; background:var(--card); border-radius:18px; box-shadow:var(--shadow); padding:16px 20px 16px 68px}
.node.seen{display:block; animation:nodeIn .7s var(--ease)}
@keyframes nodeIn{from{opacity:0; transform:translateY(18px)}}
.node .dot{position:absolute; left:15px; top:15px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--bg); color:var(--muted); font-size:12px; font-weight:600}
.node.seen:not(.on) .dot{background:var(--mint-w); color:var(--mint-i)}
.node.on .dot{background:var(--primary); color:oklch(0.99 0 0)}
.node .ttl{display:flex; justify-content:space-between; gap:12px; font-size:16px; font-weight:500}
.node .ttl small{font-weight:400; font-size:13px; color:var(--muted)}
.node .det{display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease)}
.node.on .det{grid-template-rows:1fr}
.node .det > div{overflow:hidden}
.node .in{padding-top:14px; font-size:14px}
.mail{border:1px solid var(--line); border-radius:12px; padding:12px 14px}
.mail .f{color:var(--muted); font-size:13px} .mail .s{margin-top:4px; font-weight:500} .mail .b{margin-top:6px; color:var(--muted)}
.chip{display:inline-flex; margin-top:10px; font-size:12px; padding:5px 9px; border-radius:7px; background:var(--bg)}
.chk{display:flex; flex-direction:column; gap:8px}
.chk div{display:flex; gap:10px}
.chk i{flex:none; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:11px; font-weight:700; margin-top:1px}
.chk .ok{background:var(--mint-w); color:var(--mint-i)} .chk .no{background:var(--rose-w); color:var(--rose-i)}
.chk small{color:var(--muted)}
.sys{display:flex; flex-direction:column; gap:6px}
.sys div{display:grid; grid-template-columns:150px 1fr; gap:10px; padding:9px 11px; border-radius:10px; background:var(--bg)}
.sys b{font-weight:500}
.dec{border:1px solid var(--line); border-radius:12px; padding:12px 14px}
.dec .q{font-size:15px; font-weight:500}
.dec .bt{margin-top:10px; display:flex; gap:8px}
.dec .bt span{font-size:13px; font-weight:500; padding:7px 12px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line)}
.dec .bt span:first-child{background:var(--primary); color:oklch(0.99 0 0); box-shadow:none}
.draft{margin-top:10px; font-size:13px; line-height:1.5; color:var(--muted); border-left:3px solid var(--lilac); padding-left:10px}
.trail{display:flex; flex-direction:column; gap:5px}
.trail div{display:grid; grid-template-columns:64px 1fr; gap:8px}
.trail .t{color:var(--muted); font-variant-numeric:tabular-nums}

/* ---------- no AI project ---------- */
.easyg{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:40px}
.easyg > div{background:var(--card); border-radius:22px; padding:28px; box-shadow:var(--shadow)}
.easyg .i{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; margin-bottom:18px}
.easyg b{display:block; font-size:19px; font-weight:500}
.easyg span{display:block; margin-top:8px; font-size:15.5px; line-height:1.5; color:var(--muted)}

/* ---------- ask ---------- */
.ask{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:64px; align-items:start; align-content:center; padding-top:90px; padding-bottom:90px}
.askbox{background:var(--card); border-radius:24px; box-shadow:var(--shadow); padding:0; overflow:hidden; display:flex; flex-direction:column}
/* the chat plays out as you scroll: messages appear in order, the newest at the bottom, older ones slide up under a fade */
@media (min-width: 1101px), (min-width: 900px) and (min-height: 501px){ .askpin{height:calc(100vh + 160vh)} .askpin .ask{position:sticky; top:64px; min-height:calc(100vh - 64px); padding-top:24px; padding-bottom:24px} }
.askwhy{list-style:none; margin:36px 0 0; padding:0; display:grid; gap:10px; max-width:30em}
.askwhy li{padding:14px 16px 14px 18px; border-radius:16px; border-left:3px solid var(--line); opacity:.5; transition:opacity .4s ease, background .4s ease, border-color .4s ease}
.askwhy li b{display:block; font-size:16.5px; font-weight:500} .askwhy li span{display:block; margin-top:3px; font-size:14.5px; line-height:1.45; color:var(--muted)}
.askwhy li.on{opacity:1; background:oklch(1 0 0 / 70%); border-color:var(--primary); box-shadow:0 8px 24px -12px oklch(0.4 0.06 265 / 25%)}
@media (max-width: 899px), (max-width: 1100px) and (max-height: 500px){ .askwhy li{opacity:1} }
.askhead{display:flex; align-items:center; gap:8px; padding:14px 20px; border-bottom:1px solid var(--line); font-size:14px; font-weight:500}
.askhead .dot{width:8px; height:8px; border-radius:50%; background:var(--mint-i)} .askhead small{font-size:12px; color:var(--muted); font-weight:400}
.askview{position:relative; height:max(300px, min(680px, calc(100vh - 64px - 220px))); overflow:hidden; -webkit-mask-image:linear-gradient(transparent, #000 56px); mask-image:linear-gradient(transparent, #000 56px)}
.askmsgs{position:absolute; left:0; right:0; bottom:0; padding:20px 22px 16px; display:flex; flex-direction:column; gap:14px; transition:transform .5s var(--ease)}
.askmsgs .m{display:none; font-size:15px; line-height:1.55}
.askmsgs .m.on{display:block; animation:msgin .45s var(--ease) both}
@keyframes msgin{from{opacity:0; transform:translateY(10px)}}
.askmsgs .m.u{align-self:flex-end; max-width:86%; background:var(--primary); color:oklch(0.99 0 0); border-radius:18px 18px 4px 18px; padding:10px 15px}
.askmsgs .m.u .ty.typing::after{content:""; display:inline-block; width:2px; height:1em; margin-left:2px; vertical-align:-2px; background:currentColor; animation:caret 1s steps(1) infinite}
.askmsgs .m.a b{font-weight:500} .askmsgs .m.a ul{margin:8px 0 0; padding-left:18px} .askmsgs .m.a li{margin-bottom:6px}
.askmsgs .m.s.on{display:flex; flex-wrap:wrap; gap:8px}
.sug{font-size:13.5px; padding:7px 12px; border-radius:999px; background:var(--lilac-w); color:var(--lilac-i); border:1px solid transparent; transition:background .3s ease, border-color .3s ease, transform .3s var(--ease)}
.sug.pressed{background:oklch(0.9 0.06 285); border-color:var(--lilac-i); transform:scale(.97)}
.askmsgs .m.ok.on{display:flex; gap:10px; align-items:flex-start}
.tick{flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--mint-w); color:var(--mint-i); font-size:13px; font-weight:700}
.chipok{display:inline-block; margin-left:8px; font-size:12px; padding:3px 9px; border-radius:999px; background:var(--mint-w); color:var(--mint-i); white-space:nowrap}
.askin{display:flex; align-items:center; gap:10px; margin:0 14px 14px; padding:12px 14px 12px 16px; border-radius:14px; background:var(--bg, oklch(0.97 0.008 235)); border:1px solid var(--line); font-size:14px; color:var(--muted)}
.askin span{flex:1} .askin i{font-style:normal; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--primary); color:#fff}
@media (max-width: 899px), (max-width: 1100px) and (max-height: 500px){ .askview{height:auto; -webkit-mask-image:none; mask-image:none} .askmsgs{position:static} }
.askq{display:flex; justify-content:flex-end}
.askq span{background:var(--primary); color:oklch(0.99 0 0); border-radius:18px 18px 4px 18px; padding:11px 16px; font-size:15px; max-width:85%}
.aska{margin-top:18px; font-size:15.5px; line-height:1.55}
.aska b{font-weight:500} .aska ul{margin:10px 0 0; padding-left:18px} .aska li{margin-bottom:8px}
.cite{font-size:12px; color:var(--mark); text-decoration:underline; text-underline-offset:2px; white-space:nowrap; margin-left:4px}
.askfoot{margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted)}

/* ---------- leaders ---------- */
.leaders{text-align:center; padding:56px 32px 40px}
.leaders .q{font-family:var(--serif); font-size:clamp(42px,5vw,80px); line-height:1; max-width:13em; margin:14px auto 0; text-wrap:balance}
.leaders .q em{color:var(--muted)}

/* ---------- team: Swiss map ---------- */
.team{position:relative; isolation:isolate; overflow:hidden; padding:100px 0}
.team canvas,.swl{position:absolute; right:-4%; top:0; width:64%; height:100%; z-index:-1}
.team.grab{cursor:grab} .team.grabbing{cursor:grabbing; user-select:none}   /* the map can be turned with a mouse (scenes.js) */
.swl{pointer-events:none}
.swl span{position:absolute; left:0; top:0; margin:-34px 0 0 0; translate:-50% 0; font-size:12.5px; font-weight:500; color:var(--ink); background:oklch(1 0 0 / 80%); padding:3px 8px; border-radius:999px; white-space:nowrap; box-shadow:0 2px 6px oklch(0.4 0.05 265 / 12%)}
.tgrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start}
.team p{margin:20px 0 0; font-size:19px; line-height:1.55; color:var(--muted); max-width:28em}
.founder{margin:34px 0 0; max-width:520px; background:oklch(0.997 0.002 265 / 85%); backdrop-filter:blur(16px); border-radius:24px; padding:24px; box-shadow:var(--shadow); display:grid; grid-template-columns:84px 1fr; gap:18px; align-items:center}
.portrait{position:relative; width:84px; height:84px; border-radius:50%; background:linear-gradient(140deg, var(--lilac), oklch(0.7 0.1 275)); color:oklch(0.99 0 0); display:grid; place-items:center; font-size:26px; font-weight:500}
.portrait em{position:absolute; bottom:-6px; right:-12px; font-style:normal; font-size:10.5px; font-weight:600}
/* the photo in black and white, cut out (no background of its own) on a plain light circle */
.portrait img{width:100%; height:100%; border-radius:50%; object-fit:cover; filter:grayscale(1) contrast(1.06)}
.portrait:has(img){overflow:hidden; background:oklch(0.94 0.004 265)}
.founder blockquote{margin:0; font-family:var(--serif); font-size:24px; line-height:1.2}
.founder figcaption{grid-column:1 / -1; display:flex; gap:10px; flex-wrap:wrap; align-items:baseline; padding-top:14px; border-top:1px solid var(--line)}
.founder figcaption b{font-size:16px; font-weight:600} .founder figcaption span{font-size:14.5px; color:var(--muted)}
/* desktop: the page holds still on this section while the map tilts from top-down into 3D, then moves on */
@media (min-width: 1101px), (min-width: 900px) and (min-height: 501px){
  .teampin .teamstick{position:sticky; top:var(--teamTop, 64px)}   /* the leaders line and the team hold together; the quote stays up top where it fits */
  .teampin .team{padding:32px 0 40px}
}
.tnums .n{font-variant-numeric:tabular-nums}
.tnums{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:48px}
.tnums > div{border-top:2px solid var(--primary); padding-top:14px}
.tnums .n{font-family:var(--serif); font-size:clamp(48px,5vw,72px); line-height:1; color:var(--primary)}
.tnums .l{font-size:15px; color:var(--muted); margin-top:6px}

/* ---------- security ---------- */
.secu{display:grid; gap:44px; padding-top:100px; padding-bottom:90px; scroll-margin-top:84px}
.secu h2{max-width:20em}
.places{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; align-items:stretch}
.places > div{background:var(--card); border-radius:22px; padding:24px; box-shadow:var(--shadow)}
.places .f{font-size:13px; font-weight:600; letter-spacing:.05em; color:var(--mark)}
.places b{display:block; margin-top:10px; font-family:var(--serif); font-size:32px; font-weight:400; line-height:1.05}
.places > div > span{display:block; margin-top:8px; font-size:15px; line-height:1.45; color:var(--muted)}
.places .flag{display:block; height:56px; width:auto; margin-bottom:18px; border-radius:10px; box-shadow:0 6px 18px oklch(0.3 0.05 265 / 18%)}
.places .pl-ch{background:linear-gradient(160deg, oklch(0.96 0.03 25), var(--card) 55%)}
.places .pl-eu{background:linear-gradient(160deg, oklch(0.95 0.03 265), var(--card) 55%)}
.places .by{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:14px; font-weight:500; color:var(--ink)}
.places .by .ph{font-size:11px; font-weight:400}
.places .wide{display:flex; flex-direction:column; justify-content:center; gap:22px}
.places .wide p{margin:0; font-size:15px; line-height:1.45; color:var(--muted)}
.places .wide p strong{display:block; color:var(--ink); font-weight:500; margin-bottom:2px}

/* ---------- outro ---------- */
.outro{position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); grid-template-rows:auto auto; column-gap:40px; align-items:center; max-width:1240px; margin:0 auto; padding:140px 32px 150px}
.outro::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(40% 60% at 28% 50%, oklch(0.93 0.05 300 / 80%), transparent 70%)}
/* desktop: the page holds on the closing section until the papers have settled into a neat pile, then scrolls on to the footer */
@media (min-width: 1101px), (min-width: 900px) and (min-height: 501px){
  .outropin{height:calc(100vh + 100vh)}
  .outrostick{display:contents}
  /* tall screens: security and the closing pile share one held screen */
  .outropin.joined .outrostick{display:block; position:sticky; top:64px}
  .outropin.joined .secu{position:relative; z-index:2; padding-top:28px; padding-bottom:0}
  .outropin.joined .outro{position:relative; top:0; min-height:0; height:var(--outroH, 560px); padding-top:16px; padding-bottom:16px}
  .outropin .outro{position:sticky; top:64px; min-height:calc(100vh - 64px - var(--footH, 72px)); padding-top:40px; padding-bottom:40px; align-content:center}
}
.outro::after{content:""; grid-row:1 / 3; grid-column:1; min-height:460px}   /* keeps the left column; the canvas floats over it */
/* larger than its column with soft edges, so papers drift in from nowhere instead of being cut by a box */
.stack{position:absolute; z-index:-1; left:-6%; top:-18%; width:62%; height:136%; pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side, #000 62%, transparent); mask-image:radial-gradient(closest-side, #000 62%, transparent)}
.crowd{position:absolute; left:0; top:clamp(8px, 5vh, 56px); width:44%; height:calc(100% - clamp(8px, 5vh, 56px));   /* room under the card above when the screen allows */ pointer-events:none; z-index:1}
.pp{position:absolute; display:flex; align-items:center; gap:8px; opacity:0; transform:scale(.6) translateY(14px); transition:opacity .5s ease, transform .7s cubic-bezier(.34,1.56,.64,1)}
.pp .face{display:block; width:var(--s, 76px); height:var(--s, 76px); border-radius:50%; overflow:hidden; background:var(--card); box-shadow:0 10px 26px -8px oklch(0.4 0.06 265 / 35%), 0 0 0 4px oklch(1 0 0 / 85%)}
.pp .face svg{width:100%; height:100%; display:block}
.pp .say{background:var(--card); border-radius:14px 14px 14px 4px; padding:8px 12px; font-size:13.5px; font-weight:500; white-space:nowrap; box-shadow:0 8px 22px -10px oklch(0.4 0.06 265 / 35%)}
.p0{left:4%; top:10%; --s:84px} .p1{left:58%; top:0; --s:68px} .p2{left:0; top:48%; --s:64px} .p3{left:50%; top:66%; --s:78px} .p4{left:10%; top:86%; --s:58px}
@media (max-height: 820px){ .pp{--s:56px !important} .pp .say{font-size:12.5px} }
/* the bubble floats beside the face, out of the layout, so a face never moves when its words appear */
@media (min-width: 1101px), (min-width: 900px) and (min-height: 501px){
  .pp .say{position:absolute; top:50%; left:calc(100% + 10px); translate:0 -50%; white-space:nowrap}
  .pp.sl .say{left:auto; right:calc(100% + 10px); border-radius:14px 14px 4px 14px}   /* app.js planTalk() picks the side */
}
.outro.happy .pp{opacity:1; transform:none; animation:bob 4.5s ease-in-out infinite}
.outro.happy .p1{transition-delay:.12s; animation-delay:-1.2s} .outro.happy .p2{transition-delay:.24s; animation-delay:-2.1s} .outro.happy .p3{transition-delay:.36s; animation-delay:-.6s} .outro.happy .p4{transition-delay:.48s; animation-delay:-3s}
@keyframes bob{50%{transform:translateY(-6px)}}
@media (max-width: 899px), (max-width: 1100px) and (max-height: 500px){ .crowd{position:relative; width:auto; height:auto; display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:0 0 24px; grid-row:auto} .pp{position:static; opacity:1; transform:none} .pp .say{display:none} .pp .face{width:56px; height:56px} }
.outro h2{grid-column:2; align-self:end; text-wrap:balance} .outro .cta{grid-column:2; justify-self:start; align-self:start}
@media (max-width: 899px), (max-width: 1100px) and (max-height: 500px){ .outro{grid-template-columns:1fr; text-align:center; padding-top:60px} .outro::after{display:none} .stack{position:relative; left:auto; top:auto; width:100%; height:360px; grid-row:auto} .outro h2,.outro .cta{grid-column:1} .outro .cta{justify-self:center} }
.outro h2{font-size:clamp(40px,4.4vw,78px)} .outro h2 em{display:block}
.outro .cta{margin-top:30px}
footer{border-top:1px solid var(--line)}
footer .wrapw{display:flex; flex-wrap:wrap; gap:12px 32px; padding-top:24px; padding-bottom:36px; font-size:14px; color:var(--muted)}
footer .sp{flex:1}
footer .legal{display:flex; flex-wrap:wrap; gap:6px 18px} footer .legal a{color:inherit; text-decoration:none}
footer .sm{display:none}
/* phones: the footer is one line, the links by their short names (the operator is named in the legal notice they lead to) */
@media (max-width: 680px){
  footer .wrapw{justify-content:center; padding-top:14px; padding-bottom:14px; font-size:13px}
  footer .sp, footer .co{display:none}
  footer .legal{justify-content:center; gap:6px 16px; white-space:nowrap}
  footer .lg{display:none} footer .sm{display:inline}
}
@media (max-width: 374px){ footer .wrapw{font-size:12.5px} footer .legal{column-gap:12px} }
@media (max-width: 340px){ footer .legal a[href="/cookies"]{display:none} }   /* the narrowest: Cookies stays a tap away in the cookie note and the privacy policy */
/* the cookie note: a small glass card in the corner, out of the way, gone once acknowledged */
.cookie{position:fixed; right:20px; bottom:20px; z-index:60; display:flex; align-items:center; gap:14px; max-width:calc(100vw - 40px); padding:10px 10px 10px 18px; border-radius:16px; font-size:13.5px; color:var(--ink);
  background:oklch(1 0 0 / 72%); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); box-shadow:0 0 0 1px oklch(0.4 0.05 265 / 8%), 0 12px 32px -12px oklch(0.4 0.06 265 / 30%);
  animation:cookieIn .6s var(--ease) 1.5s both}
.cookie[hidden]{display:none} .cookie b{font-weight:600} .cookie a{color:var(--muted); font-size:13px}
.cookie button{all:unset; cursor:pointer; padding:7px 14px; border-radius:10px; background:var(--primary); color:oklch(0.98 0.01 265); font-weight:500}
.cookie button:active{transform:scale(.97)}
.cookie button:focus-visible{outline:2.5px solid var(--mark); outline-offset:3px}   /* all:unset drops the page-wide focus ring */
/* Decline as easy to see and to press as Fine: the same size, outlined */
.cookie #cookieNo{background:none; color:var(--primary); box-shadow:inset 0 0 0 1px color-mix(in oklch, var(--primary) 35%, transparent)}
@media (hover: hover) and (pointer: fine){ .cookie #cookieNo:hover{box-shadow:inset 0 0 0 1px var(--primary)} }
@keyframes cookieIn{from{opacity:0; transform:translateY(12px)}}
@media (max-width: 680px){ .cookie{left:12px; right:12px; bottom:12px} }

/* how it works: one window, a short animated scene per step */
#wisps{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0}
.scene{position:relative; width:600px; justify-self:center}
@media (min-width: 1101px), (min-width: 900px) and (min-height: 501px){ .scene{zoom:var(--fz, 1)} }
.strip{position:relative; z-index:1; display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:16px; padding:0 12px 10px}   /* no panel behind the steps: the lines run straight into their bars */
.strip div,#dots i{cursor:pointer}
.strip div:hover{color:var(--ink)}
.strip div{font-size:12.5px; line-height:1.3; color:var(--muted); padding-top:10px; border-top:3px solid var(--line); transition:color .4s ease, border-color .4s ease}
.strip div.done{border-color:var(--lilac)} .strip div.on{border-color:var(--primary); color:var(--ink); font-weight:500}
.win{position:relative; height:440px; background:var(--card); border-radius:22px; box-shadow:var(--shadow); overflow:hidden}
.wbar{display:flex; align-items:center; gap:7px; height:46px; padding:0 18px; border-bottom:1px solid var(--line); font-size:13px; color:var(--muted)}
.wbar > i{width:10px; height:10px; border-radius:50%; background:var(--line)}
.wbar span{margin-left:10px} .wbar b{margin-left:auto; font-weight:500; font-size:12px; padding:3px 9px; border-radius:999px; background:var(--sky-w); color:var(--sky-i)}
.outs{position:absolute; inset:0; pointer-events:none; z-index:2} .outs:not(.on){display:none}
.out{position:absolute; right:-28px; display:flex; gap:10px; align-items:center; padding:10px 16px 10px 10px; border-radius:14px; background:oklch(0.3 0.09 275); color:oklch(0.98 0.01 265); box-shadow:0 14px 30px -10px oklch(0.3 0.09 275 / 55%); white-space:nowrap; animation:outgo 3s var(--ease) forwards}
.out i{flex:none; width:28px; height:28px; border-radius:9px; display:grid; place-items:center; font-style:normal; font-size:14px; background:oklch(1 0 0 / 14%); color:oklch(0.88 0.08 165)}
.out b{display:block; font-size:14px; font-weight:600} .out span{display:block; font-size:12.5px; color:oklch(0.86 0.03 265)}
@keyframes outgo{0%{opacity:0; transform:translate(40px,-50%) scale(.94)} 14%{opacity:1; transform:translate(0,-50%)} 78%{opacity:1; transform:translate(-10px,-50%)} 100%{opacity:0; transform:translate(-26px,-50%) scale(.97)}}
.vg{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .5s ease, visibility 0s .5s}
.vg.on{opacity:1; visibility:visible; transition:opacity .5s ease}
.vb{position:absolute; inset:46px 0 0 0; padding:22px 26px}
@keyframes up{from{opacity:0; transform:translateY(14px)}}
@keyframes show{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes pop{0%{opacity:0; transform:scale(.6)} 70%{transform:scale(1.08)} 100%{opacity:1; transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}

/* 1 · it arrives: an envelope flies in, the mail drops into the inbox, the rest move down */
.old{display:grid; grid-template-columns:34px 1fr 50px; gap:12px; align-items:center; padding:14px 6px; border-bottom:1px solid var(--line)}
.old i{width:34px; height:34px; border-radius:50%; background:var(--bg)} .old span{height:8px; border-radius:4px; background:var(--line)} .old span + span{width:40px; justify-self:end}
.vg.on .olds{animation:push .6s var(--ease) .9s both}
@keyframes push{from{transform:translateY(-140px)}}
.newm{position:relative; margin-bottom:8px; border-radius:14px; box-shadow:0 0 0 2px var(--sky), 0 10px 30px oklch(0.5 0.1 235 / 16%)}
.newm .mail{border:0; background:var(--card); padding:16px 18px}
.vg.on .newm{animation:drop .7s var(--ease) .9s both}
@keyframes drop{from{opacity:0; transform:translateY(-30px) scale(.96)}}
.env{position:absolute; right:40px; top:0; color:var(--primary); z-index:3; opacity:0}
.vg.on .env{animation:fly 1.1s var(--ease) both}
@keyframes fly{0%{opacity:0; transform:translate(140px,-60px) rotate(18deg) scale(1.3)} 30%{opacity:1} 75%{opacity:1; transform:translate(-200px,60px) rotate(-4deg) scale(.7)} 100%{opacity:0; transform:translate(-230px,80px) scale(.4)}}

/* 2 · it gets checked: a scan line reads the page, lines light up, the checks arrive one by one */
.vb.two{display:grid; grid-template-columns:190px 1fr; gap:28px; align-items:start}
.paper{position:relative; height:320px; padding:22px 18px; border-radius:10px; background:oklch(0.99 0.003 265); box-shadow:0 1px 2px oklch(0.4 0.05 235 / 12%), 0 8px 24px oklch(0.4 0.05 235 / 10%); display:flex; flex-direction:column; gap:11px; overflow:hidden}
.paper span{flex:none; height:6px; border-radius:3px; background:var(--line)} .paper span:nth-of-type(3n){width:70%} .paper span:nth-of-type(4n){width:86%}
.paper span.hl{background:oklch(0.84 0.07 15)}
.vg.on .paper span.hl{animation:hl .5s ease .9s both} .vg.on .paper span.hl ~ span.hl{animation-delay:1.6s}
@keyframes hl{from{background:var(--line)}}
.scan{position:absolute; left:0; right:0; height:46px; top:-46px; background:linear-gradient(transparent, oklch(0.7 0.12 235 / 22%)); border-bottom:2px solid var(--sky)}
.vg.on .scan{animation:scan 2.2s ease-in-out both}
@keyframes scan{to{top:100%}}
.two .chk{font-size:14.5px; gap:16px; margin-top:8px}
.vg.on .chk > div{animation:up .5s var(--ease) both}
.vg.on .chk > div:nth-child(1){animation-delay:.4s} .vg.on .chk > div:nth-child(2){animation-delay:1s} .vg.on .chk > div:nth-child(3){animation-delay:1.7s} .vg.on .chk > div:nth-child(4){animation-delay:2.3s}

/* 3 · your systems update: lines draw from Oikos to each system, each one ticks */
.hubv{position:absolute; inset:46px 0 0 0}
.hubv svg{position:absolute; inset:0; width:100%; height:100%}
.hubv path{fill:none; stroke:var(--lilac); stroke-width:2.5; stroke-dasharray:1; stroke-dashoffset:1}
.vg.on .hubv path{animation:draw .7s ease forwards} .vg.on .hubv path:nth-child(2){animation-delay:.5s} .vg.on .hubv path:nth-child(3){animation-delay:1s}
.ohub{position:absolute; left:46px; top:142px; width:110px; height:110px; border-radius:30px; background:var(--primary); color:oklch(0.99 0 0); display:grid; place-items:center; font-weight:600; font-size:17px}
.vg.on .ohub{animation:oring 1.6s ease-out infinite}
@keyframes oring{from{box-shadow:0 0 0 0 oklch(0.38 0.121 275 / 30%)} to{box-shadow:0 0 0 26px oklch(0.38 0.121 275 / 0%)}}
.hubv .sys{position:absolute; left:230px; right:26px; top:70px; gap:30px}
.hubv .sys div{position:relative; height:64px; align-content:center; grid-template-columns:1fr; gap:2px; padding:0 16px 0 54px; background:var(--card); box-shadow:0 0 0 1px var(--line)}
.hubv .sys div::before{content:"✓"; position:absolute; left:16px; top:20px; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; background:var(--mint-w); color:var(--mint-i)}
.hubv .sys span{color:var(--muted); font-size:13.5px}
.vg.on .hubv .sys div{animation:up .5s var(--ease) both} .vg.on .hubv .sys div::before{animation:pop .5s var(--ease) both}
.vg.on .hubv .sys div:nth-child(1){animation-delay:.5s} .vg.on .hubv .sys div:nth-child(2){animation-delay:1s} .vg.on .hubv .sys div:nth-child(3){animation-delay:1.5s}
.vg.on .hubv .sys div:nth-child(1)::before{animation-delay:.9s} .vg.on .hubv .sys div:nth-child(2)::before{animation-delay:1.4s} .vg.on .hubv .sys div:nth-child(3)::before{animation-delay:1.9s}

/* 4 · you decide: the pointer goes to the button, presses it, it's sent */
.vb.four{display:grid; align-content:center; padding:30px 40px}
.four .dec{border:0; padding:0; font-size:15px} .four .dec .q{font-size:24px; letter-spacing:-0.01em}
.four .dec .bt{margin-top:18px} .four .dec .bt span{font-size:15px; padding:11px 18px}
.four .draft{margin-top:20px; font-size:14.5px}
.vg.on .four .dec .bt span:first-child{animation:press .3s ease 1.7s both}
@keyframes press{50%{transform:scale(.93)}}
.cursor{position:absolute; left:90px; top:200px; width:24px; color:var(--ink); pointer-events:none; filter:drop-shadow(0 2px 3px oklch(0 0 0 / 25%)); opacity:0}
.vg.on .cursor{animation:aim 1.7s var(--ease) both}
@keyframes aim{from{opacity:0; transform:translate(240px,130px)} 30%{opacity:1} to{opacity:1}}
.sent{position:absolute; left:40px; bottom:30px; padding:10px 14px; border-radius:12px; background:var(--mint-w); color:var(--mint-i); font-size:14px; font-weight:500; opacity:0}
.vg.on .sent{animation:show .5s var(--ease) 2.1s both}

/* 5 · on the record: the steps write themselves, then it's stamped (or signed, for contracts) */
.vb.five{display:grid; grid-template-columns:1fr 200px; gap:26px; align-items:center; padding:30px 30px}
.five .trail{font-size:15.5px; gap:14px; align-self:stretch; justify-content:space-evenly}   /* the steps spread down the window, so the record fills it like the other steps */
.vg.on .five .trail > div{animation:up .45s var(--ease) both}
.vg.on .five .trail > div:nth-child(2){animation-delay:.25s} .vg.on .five .trail > div:nth-child(3){animation-delay:.5s} .vg.on .five .trail > div:nth-child(4){animation-delay:.75s} .vg.on .five .trail > div:nth-child(5){animation-delay:1s}
.seal{width:170px; height:170px; border-radius:50%; border:3px solid var(--mint-i); color:var(--mint-i); display:grid; place-items:center; text-align:center; font-weight:600; letter-spacing:.08em; font-size:13px; transform:rotate(-8deg); opacity:0}
.seal b{display:block; font-size:34px; letter-spacing:0; font-weight:500}
.vg.on .seal{animation:stamp .5s cubic-bezier(.3,1.6,.5,1) 1.4s both}
@keyframes stamp{from{opacity:0; transform:rotate(-8deg) scale(1.6)} to{opacity:1; transform:rotate(-8deg)}}
.sign{padding:16px; border-radius:14px; box-shadow:0 0 0 1px var(--line); font-size:13px}
.sign .h{display:flex; justify-content:space-between; color:var(--muted)} .sign .h b{color:var(--mint-i); font-weight:600}
.sign svg{display:block; margin:14px 0 4px; width:100%}
.sign path{fill:none; stroke:var(--primary); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:600; stroke-dashoffset:600}
.vg.on .sign path{animation:draw 1.4s ease .5s forwards}
.sign .ln{border-top:1px solid var(--line); padding-top:6px; color:var(--muted)}
.sign .fin{margin-top:12px; color:var(--mint-i); font-weight:500; opacity:0}
.vg.on .sign .fin{animation:show .4s var(--ease) 2s both}

/* desktop hero scales with the viewport: --z is set from the window size (0.72 to 1.35), so it fills a big screen and fits a short one */
@media (min-width: 1101px), (min-width: 900px) and (min-height: 501px){
  .wrapw{max-width:calc(1240px * max(1, var(--z, 1)))}   /* the whole page widens on big screens, so the nav and every section stay aligned */
  .hgrid{padding-top:calc(40px * var(--z, 1)); padding-bottom:calc(36px * var(--z, 1)); grid-template-columns:minmax(0,1fr) calc(620px * var(--z, 1)); gap:calc(56px * var(--z, 1))}
  .stage{zoom:var(--z, 1)}
  h1{font-size:calc(70px * var(--z, 1))}
  .lede{font-size:calc(20px * max(.92, var(--z, 1)))}
}
@media (max-width: 899px), (max-width: 1100px) and (max-height: 500px){
  .hgrid,.flowin,.ask,.tgrid,.secu{grid-template-columns:1fr}
  .stage{margin:10px auto 0}
  .flowin{gap:16px; align-content:start; padding-top:8vh}
  .chs{min-height:130px; margin-top:18px}
  .scene{justify-self:center}
  .team canvas{width:100%; right:0; opacity:.35} .swl{display:none}
  .easyg{grid-template-columns:1fr}
  .navl > a{display:none}
}
@media (max-width: 680px){
  .wrapw{padding:0 16px}
  .stage{zoom:.56; margin:24px 0 0}
  h1{font-size:46px}
  .menu{left:16px; right:16px; width:auto; grid-template-columns:1fr}
  .flowin{padding-top:3vh}
  .scene{zoom:.82; width:440px; justify-self:start} .strip{display:none}
  .node3.dst,.colh:last-of-type{display:none}
  .outlist{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px}
  .outlist div{padding:14px; border-radius:16px; background:linear-gradient(160deg, oklch(1 0 0 / 16%), oklch(1 0 0 / 6%)); border:1px solid oklch(1 0 0 / 22%)}
  .outlist b{display:block; font-family:var(--serif); font-size:26px; font-weight:400; font-variant-numeric:tabular-nums}
  .outlist span{font-size:13px; color:oklch(0.88 0.03 275)}
  .outlist h4{grid-column:1/-1; margin:0; font-size:12px; font-weight:600; letter-spacing:.08em; color:oklch(0.85 0.04 275)}
  .ch p{font-size:16px}
  .net{height:600px}
  .places,.tnums{grid-template-columns:1fr}
  .memo{font-size:0; padding:6px 10px} .memo::after{content:'Internal mock'; font-size:11px; font-weight:600}
  .node3{font-size:12px; padding:6px 10px}
  .copy .cta{width:100%; justify-content:center}
}

/* what changes: the section pins, and each card turns from today to with Oikos as you scroll (--k goes 0 to 1) */
.easy{position:relative; height:260vh}
.easyin{position:sticky; top:64px; height:calc(100vh - 64px); display:grid; grid-template-columns:minmax(0,1fr); align-content:center; gap:calc(26px * var(--zh, 1))}
/* heading and the evening it buys back on one line, the day underneath, the three changes as a row */
.lifetop{display:flex; justify-content:space-between; align-items:flex-end; gap:40px}
.lifetop h2{max-width:15em}
.day{background:var(--card); border-radius:24px; box-shadow:var(--shadow); padding:calc(22px * var(--zh, 1)) 28px calc(18px * var(--zh, 1))}
.day .axis{position:relative; height:18px; margin:0 64px 0 120px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.day .axis span{position:absolute; transform:translateX(-50%)}
.day .row{display:grid; grid-template-columns:120px 1fr; align-items:center; margin-top:calc(14px * var(--zh, 1))}
.day .row > b{font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--rose-i)}
.day .row.with > b{color:var(--mint-i)}
.day .track{position:relative; margin-right:64px; height:calc(40px * var(--zh, 1)); border-radius:12px; background:repeating-linear-gradient(90deg, transparent 0 calc(100% / 15 - 1px), var(--line) calc(100% / 15 - 1px) calc(100% / 15))}
.day .seg{position:absolute; top:0; bottom:0; border-radius:10px; display:flex; align-items:center; padding:0 12px; font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; line-height:calc(40px * var(--zh, 1))}
.day .seg.w{background:var(--mint-w); color:var(--mint-i)} .day .seg.p{background:var(--rose-w); color:var(--rose-i)}
.day .home{position:absolute; top:50%; transform:translate(10px,-50%); display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600; white-space:nowrap}
.day .home svg{flex:none}
.day .row.with .home{color:var(--primary)}
.day .row:not(.with) .home{color:var(--muted)}
.easyin h2{font-size:calc(clamp(40px,4vw,60px) * var(--zh, 1))}
.lifeg{display:grid; grid-template-columns:repeat(3,1fr); gap:calc(16px * var(--zh, 1))}
@media (min-width: 1101px), (min-width: 900px) and (min-height: 501px){ .life{padding:calc(20px * var(--zh, 1)) 24px} .life .vals{height:calc(46px * var(--zh, 1))} .life .vals b{font-size:calc(36px * var(--zh, 1))} .life .tg{margin-top:10px} .life .bar{margin-top:12px} .life p{margin-top:10px; font-size:14.5px} }
.family{flex:none; display:flex; align-items:center; gap:18px; margin-top:0; padding:16px 22px 16px 16px; border-radius:22px; background:oklch(1 0 0 / 75%); box-shadow:var(--shadow); width:max-content; max-width:100%;
  opacity:calc(var(--fk, 0) * 1.4 - .2); transform:translateY(calc((1 - var(--fk, 0)) * 24px))}
.fams{position:relative; display:flex; align-items:flex-end}
.fm{display:block; border-radius:50%; overflow:hidden; box-shadow:0 0 0 3px var(--card), 0 6px 16px -6px oklch(0.4 0.06 265 / 35%); margin-left:-14px}
.fm svg{width:100%; height:100%; display:block}
.f0{width:68px; height:68px; margin-left:0; z-index:3} .f1{width:64px; height:64px; z-index:2} .f2{width:46px; height:46px; z-index:4} .f3{width:42px; height:42px; z-index:1}
.heart{position:absolute; right:-8px; top:-10px; font-size:18px; color:oklch(0.65 0.2 15); animation:beat 1.6s ease-in-out infinite}
@keyframes beat{50%{transform:scale(1.2)}}
.famt small{display:block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--mint-i)} .famt b{display:block; margin-top:2px; font-size:17px; font-weight:500}
@media (max-width: 899px), (max-width: 1100px) and (max-height: 500px){ .lifetop{flex-direction:column; align-items:flex-start; gap:16px} .day .row{grid-template-columns:90px 1fr} .day .axis{margin-left:90px; margin-right:56px} .day .track{margin-right:56px} .day .seg{font-size:0; padding:0} }
@media (max-width: 680px){ .day{display:none} }
.life{--k:0; position:relative; background:var(--card); border-radius:24px; padding:26px; box-shadow:var(--shadow); transition:box-shadow .5s ease, transform .5s var(--ease)}
/* the card in focus: a light runs round its border while it changes */
@property --ga{syntax:'<angle>'; inherits:false; initial-value:0deg}
.life::before{content:""; position:absolute; inset:-2.5px; border-radius:inherit; padding:2.5px; pointer-events:none; opacity:0; transition:opacity .5s ease;
  background:conic-gradient(from var(--ga), oklch(0.75 0.1 280 / 35%) 0 40%, oklch(0.62 0.2 285) 62%, oklch(0.78 0.15 205) 76%, oklch(0.75 0.1 280 / 35%) 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:glowspin 3.2s linear infinite}
@keyframes glowspin{to{--ga:360deg}}
.life.focus{box-shadow:var(--shadow), 0 0 0 4px oklch(0.75 0.12 280 / 14%), 0 0 40px oklch(0.65 0.18 285 / 30%), 0 24px 60px -14px oklch(0.55 0.18 280 / 45%); transform:translateY(-3px)}
.life.focus::before{opacity:1}
.life .lw{font-size:15px; font-weight:500; color:var(--ink)}
.life .tg{position:relative; height:20px; margin-top:16px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase}
.life .tg i{position:absolute; left:0; top:0; font-style:normal}
.life .tg i:first-child{color:var(--rose-i); opacity:calc(1 - var(--k) * 2)}
.life .tg i:last-child{color:var(--mint-i); opacity:calc(var(--k) * 2 - 1)}
.life .vals{position:relative; height:52px; margin-top:4px}
.life .vals b{position:absolute; left:0; top:0; font-family:var(--serif); font-size:44px; font-weight:400; letter-spacing:-0.02em; line-height:1.1; white-space:nowrap}
.life .bf{color:var(--muted); opacity:calc(1 - var(--k) * 2); transform:translateY(calc(var(--k) * -18px))}
.life .af{color:var(--primary); opacity:calc(var(--k) * 2 - 1); transform:translateY(calc((1 - var(--k)) * 18px))}
.life .bar{height:8px; border-radius:8px; background:var(--line); margin-top:18px; overflow:hidden}
.life .bar i{display:block; margin:0; width:100%; height:100%; border-radius:inherit; transform-origin:left; transform:scaleX(calc(1 - var(--k) * .85));
  background:linear-gradient(90deg, oklch(0.72 0.12 20), oklch(0.78 0.1 60)); position:relative}
.life .bar i::after{content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg, var(--mint-i), var(--sky)); opacity:var(--k)}
.life p{margin:16px 0 0; font-size:15px; line-height:1.45; color:var(--muted); opacity:calc(.35 + var(--k) * .65)}
@media (max-width: 899px), (max-width: 1100px) and (max-height: 500px){ .easyin{display:flex; flex-direction:column; justify-content:center; top:0; height:100vh} .lifeg{grid-template-columns:1fr; gap:12px} .life{padding:18px 20px} .life .vals{height:40px} .life .vals b{font-size:34px} .easyin{gap:24px} .easy{height:300vh} }
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none !important; transition:opacity .2s ease !important} }

/* ---- added for the live site: skip link, language switch, demo button, demo form ---- */
.skiplink{position:fixed; left:16px; top:-60px; z-index:100; padding:10px 16px; border-radius:12px; background:var(--primary); color:oklch(0.98 0.01 265); text-decoration:none; font-weight:500; transition:top .2s ease}
.skiplink:focus{top:12px}
main:focus{outline:none}
:focus-visible{outline:2.5px solid var(--mark); outline-offset:3px; border-radius:8px}
/* language: one quiet control, the current code; the other languages open below it */
.lang{position:relative; margin-left:auto}
.langbtn{all:unset; cursor:pointer; display:flex; align-items:center; gap:5px; padding:6px 8px; border-radius:10px; font-size:13px; font-weight:500; letter-spacing:.02em; color:var(--muted); transition:color .2s ease, background .2s ease}
.langbtn svg{width:15px; height:15px; opacity:.8}
.langbtn:hover,.langbtn[aria-expanded="true"]{color:var(--ink); background:oklch(1 0 0 / 60%)}
.langbtn:focus-visible{outline:2.5px solid var(--mark); outline-offset:2px}
.bar.dark .langbtn{color:oklch(0.9 0.02 265)} .bar.dark .langbtn:hover,.bar.dark .langbtn[aria-expanded="true"]{color:#fff; background:oklch(1 0 0 / 12%)}
.langs{position:absolute; right:0; top:calc(100% + 8px); margin:0; padding:6px; list-style:none; min-width:150px; background:var(--card); border-radius:14px; box-shadow:0 0 0 1px var(--line), 0 18px 40px -16px oklch(0.3 0.08 275 / 30%); transform-origin:top right; animation:langIn .18s var(--ease)}
@keyframes langIn{from{opacity:0; transform:scale(.96) translateY(-4px)}}
.langs a{display:block; padding:9px 12px; border-radius:9px; font-size:14.5px; color:var(--ink) !important; text-decoration:none}
.langs a:hover,.langs a:focus-visible{background:var(--bg)}
.langs a[aria-current]{font-weight:600}
.langs a[aria-current]::after{content:"✓"; float:right; color:var(--primary)}
@media (prefers-reduced-motion: reduce){ .langs{animation:none} }
.navcta{flex:none; padding:9px 16px; border-radius:999px; background:var(--primary); color:oklch(0.98 0.01 265) !important; font-size:14.5px; font-weight:500; text-decoration:none; white-space:nowrap}
.navcta:active{transform:scale(.97)}
@media (max-width: 680px){ .langbtn svg{display:none} .langbtn{padding:6px 4px} .navcta{padding:8px 13px; font-size:13.5px} .bar .wrapw{gap:14px} }

dialog.demo{width:min(560px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; border:0; border-radius:28px; padding:36px 36px 30px; background:var(--card); color:var(--ink); box-shadow:0 40px 100px -30px oklch(0.3 0.09 275 / 45%)}
dialog.demo::backdrop{background:oklch(0.25 0.05 275 / 35%); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
dialog.demo[open]{animation:dlgIn .45s var(--ease)}
@keyframes dlgIn{from{opacity:0; transform:translateY(16px) scale(.98)}}
dialog.demo h2{font-size:34px; line-height:1.05; padding-right:28px}
dialog.demo h2:focus{outline:none}
dialog.demo p{margin:12px 0 0; font-size:16px; line-height:1.5; color:var(--muted)}
dialog.demo label{display:block; margin-top:22px; font-size:14px; font-weight:500}
dialog.demo .row{display:flex; gap:10px; margin-top:8px}
dialog.demo input,dialog.demo select,dialog.demo textarea{font:inherit; font-size:16px; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:12px 14px; width:100%; box-sizing:border-box}
dialog.demo input:focus,dialog.demo select:focus,dialog.demo textarea:focus{outline:2px solid var(--mark); outline-offset:1px; background:var(--card)}
dialog.demo input[aria-invalid="true"]{border-color:var(--rose-i)}
dialog.demo .go{all:unset; cursor:pointer; flex:none; padding:12px 20px; border-radius:14px; background:var(--primary); color:oklch(0.98 0.01 265); font-weight:500; text-align:center}
dialog.demo .go:disabled{opacity:.6; cursor:default}
dialog.demo .go:focus-visible,dialog.demo .skip:focus-visible,dialog.demo .x:focus-visible{outline:2.5px solid var(--mark); outline-offset:3px}
dialog.demo .skip{all:unset; cursor:pointer; padding:12px 16px; color:var(--muted); font-weight:500}
dialog.demo .x{all:unset; cursor:pointer; position:absolute; right:18px; top:16px; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; font-size:24px; color:var(--muted)}
dialog.demo .x:hover{background:var(--bg)}
dialog.demo .err{color:var(--rose-i); font-size:14px; margin-top:8px; min-height:1px}
dialog.demo .small{font-size:13px} dialog.demo .small a{color:inherit}
dialog.demo .hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
dialog.demo .grid{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
dialog.demo .grid label{margin-top:16px} dialog.demo .grid input,dialog.demo .grid select,dialog.demo .grid textarea{margin-top:6px}
dialog.demo .grid .wide{grid-column:1 / -1}
dialog.demo label small{font-weight:400; color:var(--muted)}
dialog.demo .acts{display:flex; justify-content:flex-end; gap:8px; margin-top:22px}
dialog.demo .s3 .go{margin-top:24px}
@media (max-width: 560px){ dialog.demo{padding:28px 20px 22px; border-radius:24px} dialog.demo .row{flex-direction:column} dialog.demo .grid{grid-template-columns:1fr} dialog.demo h2{font-size:28px} }
@media (prefers-reduced-motion: reduce){ dialog.demo[open]{animation:none} }
/* "Stattdessen" is one long word: on phones it is set a little smaller so it fits the screen */
.instead .big:lang(de){font-size:min(clamp(96px,13vw,200px), 21.5vw)}
.bar .lang{margin-right:-14px}
.navl > button{white-space:nowrap}
.day .seg.thin{padding:0; color:transparent}

/* ---- hero: every bit of scroll shows (each step's bar fills with the scroll, the step is named, the cards travel further) ---- */
.beats i{overflow:hidden}
.beats i::before{content:""; position:absolute; inset:0; border-radius:inherit; background:var(--primary); transform-origin:left; transform:scaleX(0)}
.scrub .beats i::before{transform:scaleX(var(--f, 0))}
.scrub .beats i.on,.scrub .beats i.done{background:oklch(0.88 0.02 265 / 80%)}
.beatl{position:absolute; left:290px; right:0; bottom:-40px; text-align:center; font-size:14px; color:var(--muted); z-index:6; min-height:20px}
.beatl b{color:var(--primary); font-weight:600; margin-right:6px; font-variant-numeric:tabular-nums}
.card{filter:blur(4px)}
.b1 .inc,.b2 .finding,.b3 .reply,.b3 .kept{filter:none}
.inc{transform:translateX(48px) scale(.96)} .finding{transform:translateX(48px) scale(.96)} .reply,.kept{transform:translateY(40px) scale(.96)}
.b2 .inc,.b3 .inc,.b3 .finding{transform:translateX(-56px) scale(.94)}
.person{transition:transform 1s var(--ease)}
.b2 .person{transform:translateX(-10px) rotate(-1.5deg)} .b3 .person{transform:translateY(-10px) scale(.97)}
.cue{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); transition:opacity .4s ease; z-index:3}
.cue .mouse{display:block; width:18px; height:28px; border-radius:10px; border:1.5px solid currentColor; position:relative}
.cue .mouse::after{content:""; position:absolute; left:50%; top:6px; width:3px; height:6px; margin-left:-1.5px; border-radius:2px; background:currentColor; animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%{opacity:0; transform:translateY(-2px)} 40%{opacity:1} 100%{opacity:0; transform:translateY(8px)}}
.cue.gone{opacity:0}
@media (prefers-reduced-motion: reduce){ .cue .mouse::after{animation:none} .card{filter:none} }

/* ---- the platform layer on touch screens ---- */
html{-webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%}
a,button,[role="button"]{touch-action:manipulation}
button,[role="button"],.navcta,.cta{-webkit-user-select:none; user-select:none}

/* ---- phones: no holds, each section is one readable piece that scrolls past whole ---- */
@media (max-width: 680px){
  .cue{display:none}
  .heropin{height:auto !important} .herostick{position:relative}
  .hero{min-height:auto}
  .hgrid{padding-top:20px; gap:0}
  h1{font-size:clamp(36px, 10.4vw, 44px)}
  .lede{font-size:17px}
  .stage{zoom:calc((100vw - 32px) / 620); margin:36px auto 40px}
  .beatl{font-size:24px; left:0; bottom:-56px}   /* the stage is zoomed to about 0.58 here, so this reads as 14px */
  .beats{left:0}
  .instead{padding:40px 16px 72px}
  .easy{height:auto} .easyin{position:relative; top:auto; height:auto; padding:56px 0; gap:22px}
  .outro .stack{display:none}
  .outro{padding-top:56px; padding-bottom:64px}
  .outro .cta{width:100%; justify-content:center}
  .seal{position:absolute; right:14px; top:56px; width:84px; height:84px; font-size:8px} .seal b{font-size:20px}
  .cookie{left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); max-width:none; padding:8px 8px 8px 14px; font-size:12.5px; gap:10px; border-radius:14px}
  .cookie a{font-size:12px}
  .cookie button{padding:7px 12px}
}

/* ---- calls to action ----
   bar: a purple outline that fills in when the visitor stops scrolling for a moment
   page: a light runs round the border of the hero and closing buttons; the button itself stays as it is */
.navcta{background:transparent !important; color:var(--primary) !important; box-shadow:inset 0 0 0 1.5px var(--primary); transition:background .45s ease, color .45s ease, box-shadow .45s ease, transform .2s ease}
.navcta.nudge{background:var(--primary) !important; color:oklch(0.98 0.01 265) !important}
.bar.dark .navcta{color:#fff !important; box-shadow:inset 0 0 0 1.5px oklch(1 0 0 / 85%)} .bar.dark .navcta.nudge{background:#fff !important; color:var(--primary) !important}
@media (hover: hover) and (pointer: fine){ .navcta:hover{background:var(--primary) !important; color:oklch(0.98 0.01 265) !important} }
@property --ca{syntax:'<angle>'; inherits:false; initial-value:0deg}
.cta{position:relative; isolation:isolate}
.cta::after{content:""; position:absolute; inset:-3px; border-radius:inherit; padding:2px; pointer-events:none; z-index:-1;
  background:conic-gradient(from var(--ca), transparent 0 62%, oklch(0.75 0.13 300) 76%, oklch(0.92 0.08 230) 84%, oklch(0.75 0.13 300) 90%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation:ctaRun 3.2s linear infinite}
@keyframes ctaRun{to{--ca:360deg}}
@media (prefers-reduced-motion: reduce){ .cta::after{animation:none; background:oklch(0.75 0.13 300 / 70%)} }
/* the internal-mock note stays out of the way; the yellow marks show what is still to confirm */
.memo{display:none}

/* ---- overview intro: what Oikos is, and the four ways in ---- */
.intro{position:relative; isolation:isolate; overflow:hidden; margin-top:-64px; padding:calc(64px + 9vh) 0 8vh; min-height:calc(100lvh - 0px); display:flex; align-items:center; box-sizing:border-box}
.intro::before{content:""; position:absolute; z-index:-1; inset:0; background:
  radial-gradient(40% 55% at 78% 30%, oklch(0.93 0.05 300 / 75%), transparent 70%),
  radial-gradient(35% 45% at 12% 80%, oklch(0.95 0.04 55 / 65%), transparent 70%),
  radial-gradient(30% 45% at 10% 10%, oklch(0.95 0.035 235 / 80%), transparent 70%)}
.intro .kicker{margin:0; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--mark)}
.introh{margin-top:18px; font-size:clamp(48px,6.4vw,104px); line-height:1.02; max-width:14em}
.introh em{display:block}
.introl{margin:22px 0 0; max-width:34em; font-size:clamp(18px,1.5vw,21px); line-height:1.55; color:var(--muted)}
.introp{margin:44px 0 14px; font-size:14px; font-weight:600; color:var(--ink)}
.picks{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.picks a{position:relative; display:grid; grid-template-columns:48px 1fr; grid-template-rows:auto auto; column-gap:14px; row-gap:2px; align-items:center; padding:18px 40px 18px 18px; border-radius:20px; text-decoration:none; color:var(--ink);
  background:linear-gradient(160deg, oklch(1 0 0 / 72%), oklch(1 0 0 / 48%)); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:inset 0 0 0 1px oklch(1 0 0 / 70%), 0 14px 34px -18px oklch(0.4 0.08 275 / 35%); transition:transform .2s var(--ease), box-shadow .3s ease}
.picks .av{grid-row:1 / 3; width:48px; height:48px; border-radius:50%; overflow:hidden} .picks .av svg{width:100%; height:100%; display:block; transform:scale(1.6) translateY(6%)}
.picks b{font-size:16px; font-weight:600} .picks span:not(.av){font-size:13.5px; line-height:1.35; color:var(--muted)}
.picks i{position:absolute; right:16px; top:50%; transform:translateY(-50%); font-style:normal; color:var(--primary); transition:transform .2s var(--ease)}
.picks a:active{transform:scale(.98)}
@media (hover: hover) and (pointer: fine){ .picks a:hover{box-shadow:inset 0 0 0 1px oklch(1 0 0 / 80%), 0 20px 40px -18px oklch(0.4 0.1 275 / 45%)} .picks a:hover i{transform:translate(4px,-50%)} }
/* when the intro is there, it runs under the bar and the hero follows normally */
.overview .heropin{margin-top:0}   /* the hero keeps its 64px top padding, so jumping to it from a pick leaves the headline clear of the bar */
@media (max-width: 899px), (max-width: 1100px) and (max-height: 500px){ .picks{grid-template-columns:1fr 1fr} }
@media (max-width: 680px){ .intro{padding:calc(64px + 32px) 0 48px; min-height:auto} .introh{font-size:clamp(40px,11vw,52px)} .picks{grid-template-columns:1fr; gap:10px} .introp{margin-top:32px} }

/* demo form: wider, the problem in their own words first, the rest optional; selects drawn by us so nothing is clipped */
dialog.demo{width:min(640px, calc(100vw - 24px))}
dialog.demo .s2 .ok{margin:0 0 18px; padding:10px 14px; border-radius:12px; background:var(--mint-w); color:var(--mint-i); font-size:14.5px; font-weight:500}
dialog.demo .s2 .ok span{margin-right:6px}
/* the details, a little at a time: a page's fields, its step count, back and on */
dialog.demo .pg > label:first-of-type{margin-top:16px}
dialog.demo .pg h2 + label{margin-top:16px}
dialog.demo .chips{border:0; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
dialog.demo .chips legend{padding:0; margin-bottom:8px; font-size:14px; font-weight:500}
dialog.demo .chips button{all:unset; cursor:pointer; padding:9px 14px; border-radius:999px; border:1px solid var(--line); background:var(--bg); font-size:15px; line-height:1.25; touch-action:manipulation; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none}
dialog.demo .chips button[aria-checked="true"]{background:var(--primary); border-color:var(--primary); color:oklch(0.98 0.01 265)}
dialog.demo .chips button:focus-visible{outline:2.5px solid var(--mark); outline-offset:2px}
dialog.demo .chips button:active{transform:scale(.97)}
dialog.demo .acts{align-items:center}
dialog.demo .acts .of{margin-right:auto; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
dialog.demo .back{all:unset; cursor:pointer; padding:12px 14px; color:var(--muted); font-weight:500}
dialog.demo .back:focus-visible{outline:2.5px solid var(--mark); outline-offset:3px}
@media (hover: hover) and (pointer: fine){ dialog.demo .chips button:hover{border-color:var(--mark)} }
@media (max-width: 560px){ dialog.demo .acts .skip{padding:12px 8px} dialog.demo .pg h2{font-size:24px} }
dialog.demo .back[hidden]{display:none}   /* all:unset would show it */
@media (max-height: 560px){ dialog.demo label.big textarea{min-height:84px} dialog.demo .s2 .ok{margin-bottom:10px; padding:8px 12px} dialog.demo .pg p{font-size:14px} }   /* the keyboard up: the first page's field and its button stay above it */
dialog.demo label.big{margin-top:20px}
dialog.demo label.big textarea{margin-top:8px; min-height:120px; line-height:1.5; resize:vertical}
dialog.demo textarea::placeholder,dialog.demo input::placeholder{color:oklch(0.6 0.02 265)}
dialog.demo select{appearance:none; -webkit-appearance:none; padding-right:40px; line-height:1.3; text-overflow:ellipsis;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size:5px 5px; background-repeat:no-repeat}

/* thank-you: the loose papers settle into one neat stack, a stamp lands, a few scraps of paper fly off */
dialog.demo .s3{text-align:center}
dialog.demo .s3 h2{padding:0}
.yay{position:relative; width:180px; height:150px; margin:4px auto 10px}
.yay .sh{position:absolute; left:50%; top:22px; width:92px; height:118px; margin-left:-46px; border-radius:8px; background:var(--card);
  box-shadow:0 0 0 1px var(--line), 0 10px 24px -12px oklch(0.4 0.08 275 / 40%);
  background-image:linear-gradient(var(--line) 0 0), linear-gradient(var(--line) 0 0), linear-gradient(var(--line) 0 0), linear-gradient(var(--line) 0 0);
  background-size:60% 3px, 70% 3px, 50% 3px, 64% 3px; background-position:14px 22px, 14px 36px, 14px 50px, 14px 64px; background-repeat:no-repeat}
.yay .s1{--x:-70px; --y:-10px; --r:-24deg; transform:translateY(-2px) rotate(-3deg)}
.yay .s2{--x:64px; --y:-24px; --r:20deg; transform:translateY(-6px) rotate(2deg)}
.yay .s3{--x:-50px; --y:30px; --r:14deg; transform:translateY(-10px) rotate(-1deg)}
.yay .s4{--x:58px; --y:26px; --r:-18deg; transform:translateY(-14px)}
.yay.play .sh{animation:settle .8s var(--ease) both} .yay.play .s2{animation-delay:.08s} .yay.play .s3{animation-delay:.16s} .yay.play .s4{animation-delay:.24s}
@keyframes settle{from{opacity:0; transform:translate(var(--x), var(--y)) rotate(var(--r))}}
.yay .stamp{position:absolute; right:22px; bottom:2px; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-size:24px; font-weight:700; color:var(--mint-i); background:var(--mint-w); box-shadow:0 0 0 3px var(--mint-i) inset; transform:rotate(-12deg)}
.yay.play .stamp{animation:stampIn .5s cubic-bezier(.3,1.6,.5,1) .75s both}
@keyframes stampIn{from{opacity:0; transform:scale(2.2) rotate(-30deg)}}
.yay .bit{position:absolute; left:50%; top:60px; width:9px; height:12px; border-radius:2px; opacity:0}
.yay .b1{background:var(--lilac)} .yay .b2{background:var(--mint-i)} .yay .b3{background:var(--primary)} .yay .b4{background:oklch(0.85 0.09 55)} .yay .b5{background:var(--lilac)} .yay .b6{background:oklch(0.8 0.1 230)}
.yay .b1{--bx:-90px; --by:-40px} .yay .b2{--bx:84px; --by:-52px} .yay .b3{--bx:-70px; --by:40px} .yay .b4{--bx:96px; --by:20px} .yay .b5{--bx:-20px; --by:-70px} .yay .b6{--bx:30px; --by:-74px}
.yay.play .bit{animation:fly 1s cubic-bezier(.2,.7,.3,1) .85s both}
@keyframes fly{0%{opacity:1; transform:translate(0,0) rotate(0)} 100%{opacity:0; transform:translate(var(--bx), var(--by)) rotate(220deg)}}
@media (prefers-reduced-motion: reduce){ .yay.play .sh,.yay.play .stamp,.yay.play .bit{animation:none} }

/* intro on wide screens: the words and the four ways in on the left, the story on the right; the story drops on smaller screens */
.introfx{display:none}
.introtop,.introgo,.stagescr{display:contents}   /* phones make each of these a screen of its own */
.flowlead{display:none}
#stops{display:none}
.intro{padding-top:calc(64px + 5vh); padding-bottom:6vh}
.picks{grid-template-columns:1fr 1fr; max-width:720px}
@media (min-width: 1101px), (min-width: 900px) and (min-height: 501px){
  .intro .wrapw{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); column-gap:calc(64px * var(--z, 1)); align-items:center}
  .intro .wrapw :is(.introh,.introl,.introp,.picks){grid-column:1}
  .introh{font-size:calc(70px * var(--z, 1)); max-width:none}
  .introfx{display:flex; flex-direction:column; grid-column:2; grid-row:1 / 6; align-self:center; zoom:var(--z, 1); max-width:500px; justify-self:end; width:100%}
}
.fxl{margin:0 0 10px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--mark)}
.fxs{position:relative; height:250px}
.fxline{width:2px; height:44px; margin:14px 0 14px 40px; background:repeating-linear-gradient(var(--lilac) 0 5px, transparent 5px 10px)}
.fxc{position:absolute; left:0; right:24px; bottom:0; padding:22px 24px; border-radius:20px; background:var(--card); box-shadow:var(--shadow); z-index:calc(10 - var(--i, 0));
  opacity:0; transform:translateY(40px) scale(.96); transition:transform .9s var(--ease), opacity .6s ease, filter .6s ease}
.fxc.in{opacity:1; transform:translateY(calc(var(--i, 0) * -24px)) scale(calc(1 - var(--i, 0) * .06)); filter:saturate(calc(1 - var(--i, 0) * .4))}   /* older ones peek out above, like a pile being worked through */
.fxc .top{display:flex; justify-content:space-between; align-items:center; gap:10px} .fxc .file{font-size:12px; color:var(--muted)}
.fxc > b{display:block; margin-top:12px; font-size:21px; font-weight:500} .fxc .sub{display:block; font-size:13px; color:var(--muted)}
.fxc .fxk{margin-top:14px; display:flex; gap:8px; align-items:center; font-size:14px; color:var(--mint-i); opacity:0; transform:translateX(-8px); transition:opacity .5s ease, transform .5s var(--ease)}
.fxc .fxk i{font-style:normal; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--mint-w); font-size:12px}
.fxc.checked .fxk{opacity:1; transform:none}
.fxc .fxa{position:absolute; right:-24px; bottom:-22px; display:flex; gap:10px; align-items:center; padding:9px 14px 9px 9px; border-radius:14px; background:oklch(0.3 0.09 275); color:oklch(0.98 0.01 265); box-shadow:0 16px 30px -14px oklch(0.3 0.1 275 / 60%);
  opacity:0; transform:translateY(8px) scale(.94); transition:opacity .5s ease, transform .6s var(--ease)}
.fxc .fxa i{font-style:normal; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:oklch(1 0 0 / 14%); color:oklch(0.88 0.08 165); font-size:13px}
.fxc .fxa b{display:block; font-size:13.5px; font-weight:600} .fxc .fxa span{display:block; font-size:12px; color:oklch(0.86 0.03 265)}
.fxc.done .fxa{opacity:1; transform:none}
.fxc:not([style*="--i: 0"]) .fxa{opacity:0}
.ifam{display:flex; align-items:center; gap:18px; padding:16px 22px 16px 16px; border-radius:22px; background:oklch(1 0 0 / 75%); box-shadow:var(--shadow); width:max-content; max-width:100%; min-height:72px; transition-duration:.4s;
  opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .8s var(--ease)}
.ifam.on{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .fxc,.ifam{transition:none} }
@media (max-width: 680px){ .picks{grid-template-columns:1fr} .intro{padding-top:calc(64px + 28px)} }
/* the pile behind the newest card shows paper, not words, so two texts never cross */
.fxc > *{transition:opacity .35s ease}
.fxc:not([style*="--i: 0"]) > *{opacity:0}
.fxs{height:190px}
@media (min-width: 1101px), (min-width: 900px) and (min-height: 501px){ .intro{min-height:min(100lvh, 1000px)} }
/* the intro's colours fade into the hero's, so there is no hard edge between them */
.intro{overflow:visible} .intro::before{inset:0 0 -120px 0; -webkit-mask-image:linear-gradient(#000 70%, transparent); mask-image:linear-gradient(#000 70%, transparent)}
.overview .hero::before{-webkit-mask-image:linear-gradient(transparent 10%, #000 42%); mask-image:linear-gradient(transparent 10%, #000 42%)}   /* its top-left glow would start in a hard line under the intro */
.picks .av:empty{display:none}   /* server-drawn picks before the script adds the faces */
/* the menu sits inside the frosted bar, where its own blur can't reach the page behind, so it needs to be nearly solid to stay readable */
.menu{background:oklch(0.997 0.002 265 / 98.5%)}
.seg{transition:opacity .3s ease} .seg.gone{opacity:0}
.intro[hidden]{display:none}   /* .intro sets display, which would otherwise beat the hidden attribute on solution pages */
@media (min-width: 1101px), (min-width: 900px) and (min-height: 501px){ .intro{min-height:100lvh} }   /* the hero never peeks in under the intro, however tall the screen */
/* the scroll cue sits at the bottom of the window, whatever its height, and fades once the reader scrolls */
.cue{position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom, 0px)); z-index:30; pointer-events:none}
/* on tall screens the intro's words start near the top; the spare height falls below the picks, where the scroll cue sits */
@media (min-width: 1101px), (min-width: 900px) and (min-height: 501px){ .intro{align-items:flex-start; padding-top:calc(64px + clamp(32px, 6vh, 72px))} }
/* wide screens: the picks run under the words and the panel, four to a row, so all of them fit on a laptop screen */
@media (min-width: 1101px), (min-width: 900px) and (min-height: 501px){
  .intro .wrapw .introp, .intro .wrapw .picks{grid-column:1 / -1}
  .introfx{grid-row:1 / 4}
  .picks{grid-template-columns:repeat(4, minmax(0,1fr)); max-width:none; gap:12px}
  .picks a{padding:14px 34px 14px 14px; column-gap:12px} .picks .av{width:42px; height:42px} .picks a{grid-template-columns:42px 1fr}
  .picks b{font-size:15px}
}
.picks .other .av{display:grid; place-items:center; background:var(--bg); color:var(--mark); font-weight:600; font-size:18px; box-shadow:inset 0 0 0 1.5px oklch(0.7 0.06 275 / 50%)}
/* the intro without its kicker: the panel starts level with the headline, leaving room for the picks below */
@media (min-width: 1101px), (min-width: 900px) and (min-height: 501px){ .introfx{grid-row:1 / 3; align-self:start; margin-top:12px} }
@media (min-width: 1101px), (min-width: 900px) and (min-height: 501px){
  .intro{padding-top:calc(64px + clamp(20px, 5vh, 72px)); padding-bottom:clamp(24px, 5vh, 64px)}
  .introp{margin-top:clamp(20px, 4vh, 40px)}
  .picks span:not(.av){display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}   /* two lines at most, so a row keeps one height */
}
@media (min-width: 1101px) and (max-height: 880px), (min-width: 900px) and (min-height: 501px) and (max-height: 880px){ .introh{font-size:calc(58px * var(--z, 1))} .intro .introl{font-size:17px} .picks a{padding-top:11px; padding-bottom:11px} }
/* intro, final layout on wide screens: words and the ways in on the left, the work happening on the right */
@media (min-width: 1101px), (min-width: 900px) and (min-height: 501px){
  .intro .wrapw{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .intro .wrapw .introp, .intro .wrapw .picks{grid-column:1}
  .introfx{grid-row:1 / 5; align-self:center; margin-top:0}
  .picks{grid-template-columns:1fr 1fr; gap:10px}
  .picks a{padding:10px 32px 10px 10px; grid-template-columns:38px 1fr; column-gap:12px} .picks .av{width:38px; height:38px}
  .picks b{font-size:14.5px} .picks span:not(.av){font-size:12.5px; -webkit-line-clamp:1}
}
/* each persona tinted with its character's colour, so they're told apart at a glance */
.picks a[style*="--tint"]{background:linear-gradient(100deg, color-mix(in oklab, var(--tint) 70%, var(--card)), var(--card) 70%); box-shadow:var(--shadow), inset 3px 0 0 var(--tint2)}
/* tall screens: the personas grow into the room rather than leaving it empty */
@media (min-width: 900px) and (max-width: 1499px) and (min-height: 1000px){
  .picks{gap:14px} .picks a{padding:16px 36px 16px 14px; grid-template-columns:48px 1fr} .picks .av{width:48px; height:48px}
  .picks b{font-size:16px} .picks span:not(.av){font-size:13.5px; -webkit-line-clamp:2}
  .introh{font-size:calc(84px * var(--z, 1))} .introp{margin-top:48px}
}
/* phones: a two-column grid of tap-sized tiles, face and name only, so all eight fit on one screen */
@media (max-width: 680px){
  .picks{grid-template-columns:1fr 1fr; gap:10px}
  .picks a{grid-template-columns:1fr; justify-items:center; text-align:center; padding:16px 10px 14px; row-gap:8px; min-height:112px}
  .picks .av{grid-row:auto; width:48px; height:48px}
  .picks b{font-size:14px; line-height:1.25}
  .picks span:not(.av), .picks i{display:none}
  .picks a[style*="--tint"]{background:linear-gradient(180deg, color-mix(in oklab, var(--tint) 75%, var(--card)), var(--card) 85%); box-shadow:var(--shadow), inset 0 3px 0 var(--tint2)}
}
/* large windows: the words and the panel side by side, the personas as a row of small chips across the full width under them */
@media (min-width: 1500px){
  .intro .wrapw .introp, .intro .wrapw .picks{grid-column:1 / -1}
  .introfx{grid-row:1 / 3; align-self:start; margin-top:12px}
  .picks{grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px}
  .picks a{padding:14px 34px 14px 14px; grid-template-columns:42px 1fr; column-gap:12px} .picks .av{width:42px; height:42px}
  .picks b{font-size:15px} .picks span:not(.av){font-size:13px; -webkit-line-clamp:2}
}
/* the intro's "what it gives back": three things off the desk, the old load struck through */
.ifam:has(.lifted){display:block; width:100%; padding:14px 18px}
.lifted{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.lifted li{display:grid; grid-template-columns:22px 1fr auto auto; align-items:center; gap:10px; font-size:14px}
.lifted i{font-style:normal; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--mint-w); color:var(--mint-i); font-size:12px}
.lifted s{color:var(--muted); font-size:13px; text-decoration-color:oklch(0.6 0.15 20 / 70%)}
.lifted b{font-weight:600; color:var(--mint-i); font-size:14px}
/* its space is reserved: a fixed height and one line per item, so the swap never moves the page around it */
.ifam{box-sizing:border-box; height:128px; min-height:0; width:100%; display:block; padding:14px 18px}
.lifted li span{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lifted s, .lifted b{white-space:nowrap}
/* large screens: a purple pen drawing of a town's main street along the foot of the intro, one building for each team, drawn in as the page opens */
.street{display:none}
@media (min-width: 900px) and (min-height: 960px){
  .street{display:block; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:min(1400px, 100vw); height:auto; z-index:-1; pointer-events:none; overflow:visible}
  .street path{fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; animation:ink 1.6s var(--ease) forwards; animation-delay:calc(.4s + var(--d, 0s))}
  .street g{--d:inherit}
  .street .ink{stroke:oklch(0.52 0.15 285 / 55%); stroke-width:2}
  .street .nib{stroke:oklch(0.52 0.15 285 / 35%); stroke-width:.8}
}
@keyframes ink{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){ .street path{animation:none; stroke-dashoffset:0} }
@media (min-width: 900px) and (min-height: 960px){
  .street .ink{stroke:oklch(0.48 0.17 285 / 80%); stroke-width:2.4}
  .street path{animation-duration:1.1s}
}
/* the street draws three times as fast: each stroke in a third of the time, the buildings a third as far apart */
@media (min-width: 900px) and (min-height: 960px){ .street path{animation-duration:.37s; animation-delay:calc(.13s + var(--d, 0s) / 3)} }
/* the turning lights repaint every frame (an animated angle): they run only where they show, the card ring while its card is in focus, the button ring while the button is on screen */
.life::before{animation-play-state:paused} .life.focus::before{animation-play-state:running}
.cta:not(.live)::after{animation-play-state:paused}
/* "Something else?": their words first, then kept in view while they give their email */
dialog.demo .s0 textarea{display:block; width:100%; box-sizing:border-box; margin-top:8px; min-height:150px; line-height:1.5; resize:vertical}
dialog.demo .said{margin:18px 0 0; padding:12px 14px; border-radius:14px; background:var(--bg); border:1px solid var(--line)}
dialog.demo .said figcaption{font-size:13px; font-weight:500; color:var(--mint-i)}
dialog.demo .said blockquote{margin:6px 0 0; font-size:15px; line-height:1.45; color:var(--ink); white-space:pre-wrap; max-height:6.5em; overflow:auto}
/* hidden for the moment app.js takes to put a reloaded page back in place (see place.js) */
html.placing body{visibility:hidden}
/* the home page shows nothing until app.js has built it (class boot on <html>, taken off after the first render), so its first frame is the
   finished page, never one with half its words and pictures. If a script fails, it shows anyway after 3s (!important: reduced motion turns
   other animations off, not this one) */
html.boot body{visibility:hidden; animation:booted 0s 3s forwards !important}
@keyframes booted{to{visibility:visible}}
/* phones: each section is a screen of its own, and a scroll that comes to rest near a section's start settles on it,
   so no screen is left showing the tail of one section and half of the next. Tall sections still scroll freely inside. */
@media (max-width: 680px){
  html{scroll-padding-top:64px}
  .instead, .outro{min-height:calc(100lvh - 64px); box-sizing:border-box; display:flex; flex-direction:column; justify-content:center}
  .hero, #life, #security{min-height:calc(100lvh - 64px); box-sizing:border-box}
  /* gets done this month: the first count across the top, the other four two by two, so none is left on its own */
  .outlist div:first-of-type{grid-column:1 / -1; display:flex; align-items:baseline; gap:12px}
  .outlist div:first-of-type b{font-size:38px}
}

/* ---- phones: the page as a run of screens ----
   Each screen fills the window under the bar (100lvh: the browser's own bars never cut it off) and holds one complete piece.
   Sections too big for one screen are split; resting scrolls settle on a screen's start. The pinned ones (how it works, the chat,
   what changes) hold one screen still while the scroll plays them, as on a desktop. Phones and tablets held upright both. */
@media (max-width: 899px), (max-width: 1100px) and (max-height: 500px){
  /* --sh: a screen under the bar, with the browser's bars as small as they get (the stops are a screen apart);
     --sv: the part of it that still shows with them back at full size (an iPhone brings back its two-line bar as soon as the
     page scrolls up); --bb: the difference. Each screen keeps its words and cards within --sv, so a screen reached scrolling
     back up is never cut off at the bottom */
  :root{--sh:calc(100lvh - 64px); --sv:calc(100svh - 64px); --bb:calc(100lvh - 100svh)}
  .hero, #life{min-height:0}
  h2{font-size:clamp(32px, min(10vw, 6.2lvh), 46px)}

  /* overview: what Oikos is, then the ways in */
  .intro{display:block; min-height:0; padding:0}
  .introtop{display:flex; flex-direction:column; justify-content:center; min-height:100lvh; padding:64px 0 20px}
  .introh{font-size:clamp(34px, min(11vw, 7.2lvh), 52px)}
  .introl{font-size:clamp(15.5px, 2.75lvh, 18px); margin-top:clamp(14px, 3lvh, 24px)}
  .introgo{display:flex; flex-direction:column; justify-content:center; min-height:var(--sh); padding:12px 0}
  .introp{margin:0 0 clamp(12px, 2.4lvh, 20px); font-family:var(--serif); font-size:clamp(26px, 4.6lvh, 34px); font-weight:400; line-height:1.1}
  .picks{gap:10px; grid-auto-rows:clamp(80px, calc((var(--sh) - 130px) / 4), 132px)}
  .picks a{min-height:0; padding:8px 8px 10px; row-gap:6px; align-content:center}
  .picks .av{width:clamp(34px, 6.4lvh, 54px); height:clamp(34px, 6.4lvh, 54px)}
  .picks b{font-size:clamp(13px, 2.2lvh, 14.5px)}

  /* the hero: its words, then the story of one document as a screen of its own, drawn for the phone at full size */
  .hgrid{display:block; padding-top:0; padding-bottom:0}
  .copy{display:flex; flex-direction:column; justify-content:center; align-items:flex-start; min-height:var(--sh); padding:16px 0 20px}
  .hero h1{font-size:clamp(32px, min(10.4vw, 6.6lvh), 46px)}
  .lede{font-size:clamp(15.5px, 2.75lvh, 18px); margin-top:clamp(12px, 2.4lvh, 22px)}
  .copy .cta{margin-top:clamp(18px, 3.6lvh, 30px)}
  .stagescr{display:flex; flex-direction:column; justify-content:center; min-height:var(--sh); padding:12px 0 74px}
  .beats{left:0; right:0; bottom:-34px}
  .beatl{left:0; right:0; bottom:-66px; font-size:14px}

  /* "Instead,": one screen, sized to the window */
  .instead{min-height:var(--sh); padding:16px}
  .instead .big{padding-top:.16em}   /* set tighter than its size: the tall italic capital needs the room above it, or it rises under the bar */
  .instead .big, .instead .big:lang(de){font-size:min(23vw, 13lvh)}
  .instead .big:lang(de), .instead .big:lang(fr){font-size:min(19vw, 12lvh)}
  .instead .line{font-size:clamp(19px, 3.4lvh, 26px)}
  .tags{margin-top:clamp(16px, 3lvh, 28px); gap:8px} .tags span{font-size:14px; padding:7px 13px}

  /* the purple section in three: the claim with today's count, the network, what gets done */
  .scale{padding:0}
  .shead{min-height:var(--sh); flex-direction:column; flex-wrap:nowrap; justify-content:center; align-items:flex-start; gap:clamp(24px, 6lvh, 56px)}
  .counter .n{font-size:clamp(56px, 10lvh, 84px)}
  .net{height:var(--sh); margin:0}
  .outlist{min-height:var(--sh); margin:0; padding:16px 0; align-content:center}
  .outlist h4{margin-bottom:4px}

  /* how it works: the window holds while the scroll walks through the five steps */
  .flow{height:auto}
  .flow::after{content:""; display:block; height:calc(4 * 62lvh)}
  .flowlead{display:none}   /* phones and tablets go straight into the window; the steps show in it one by one */
  .flowl{list-style:none; margin:clamp(18px, 4lvh, 36px) 0 0; padding:0; display:grid; gap:clamp(10px, 2lvh, 16px); counter-reset:s}
  .flowl li{display:grid; grid-template-columns:28px 1fr; column-gap:10px}
  .flowl li::before{counter-increment:s; content:counter(s, decimal-leading-zero); grid-row:1 / 3; padding-top:3px; font-size:12.5px; font-weight:600; letter-spacing:.05em; color:var(--mark)}
  .flowl b{font-size:16.5px; font-weight:500} .flowl span{font-size:14px; line-height:1.4; color:var(--muted)}
  @media (max-height: 640px){ .flowl b{font-size:15.5px} .flowl span{font-size:13px} .flowl{gap:8px} }
  .pinwrap{height:100lvh; padding-top:64px; box-sizing:border-box; align-items:stretch}
  .flowin{padding-top:clamp(8px, 2lvh, 20px); padding-bottom:12px; gap:clamp(10px, 2lvh, 18px); align-content:center}
  .flowin > div:first-child > .kicker, #flowH{display:none}
  .chs{margin-top:0}
  .ch h3{margin-top:4px; font-size:clamp(22px, 3.8lvh, 28px)}
  .ch p{margin-top:6px; font-size:clamp(14.5px, 2.4lvh, 16px)}
  .dots{margin-top:2px}
  .scene{zoom:var(--sz, .8); justify-self:center}

  /* what changes: the claim and the evening it buys back, then the three changes held on screen while each one turns */
  .easy{height:auto}
  .easyin{position:relative; top:auto; height:auto; display:block; padding:0 16px}
  .easyin::after{content:""; display:block; height:90lvh}
  .famt{min-width:0}   /* a long line wraps inside the card instead of widening the page */
  .family{opacity:1; transform:none}   /* the evening is part of its screen's message, not a reward for the third card */
  .lifetop{min-height:var(--sh); justify-content:center; gap:clamp(20px, 4lvh, 36px)}
  .easyin h2{font-size:clamp(32px, min(10vw, 6.2lvh), 46px)}
  .lifeg{position:sticky; top:64px; height:var(--sh); align-content:center; gap:clamp(8px, 1.6lvh, 14px); padding:8px 0}
  .life{padding:clamp(12px, 2lvh, 18px) 16px}
  .life .lw{font-size:14.5px}
  .life .tg{margin-top:clamp(4px, 1lvh, 10px); height:16px; font-size:11px}
  .life{container-type:inline-size}
  .life .vals{display:grid; height:auto; min-height:clamp(32px, 5.6lvh, 42px); margin-top:2px}   /* both values in one cell: a long one wraps instead of running off the card */
  .life .vals b{position:static; grid-area:1 / 1; white-space:normal; text-wrap:balance; line-height:1.05; font-size:min(clamp(26px, 4.8lvh, 36px), 9.6cqi)}
  .life .bar{margin-top:clamp(6px, 1.2lvh, 12px); height:6px}
  .life p{margin-top:clamp(6px, 1.2lvh, 10px); font-size:13.5px; line-height:1.4}

  /* ask: why it's easy, then the chat held on screen while it plays out */
  .ask{display:block; padding:0 16px}
  .ask::after{content:""; display:block; height:110lvh}
  .ask > .rv:first-child{display:flex; flex-direction:column; justify-content:center; min-height:var(--sh); padding:12px 0}
  .askwhy{margin-top:clamp(16px, 3.4lvh, 32px); gap:8px}
  .askwhy li{padding:clamp(8px, 1.6lvh, 14px) 14px}
  .askwhy li b{font-size:15.5px} .askwhy li span{font-size:14px}
  .askbox{position:sticky; top:72px; height:calc(var(--sh) - 16px); scroll-margin-top:8px}
  .askview{flex:1; height:auto; min-height:0; -webkit-mask-image:linear-gradient(transparent, #000 48px); mask-image:linear-gradient(transparent, #000 48px)}
  .askmsgs{position:absolute; padding:16px 16px 12px; gap:12px}
  .askmsgs .m{font-size:14.5px}
  .askin{margin:0 10px 10px}

  /* the leaders' line, then the team in two: who we are, then the founder and the numbers */
  .leaders{min-height:var(--sh); display:flex; flex-direction:column; justify-content:center; padding:16px}
  .leaders .q{font-size:clamp(36px, min(11vw, 7lvh), 56px)}
  .team{padding:0}
  .team .wrapw{display:grid; grid-template-columns:minmax(0,1fr); min-height:calc(2 * var(--sh));
    grid-template-rows:1fr auto auto auto 1fr var(--bb) calc(var(--sv) / 2 + 60px) calc(var(--sv) / 2 - 60px) var(--bb)}
  .tgrid, .tgrid > .rv{display:contents}
  .team .wrapw > *, .tgrid > *, .tgrid > .rv > *{grid-column:1}   /* every piece in the one column */
  .team .kicker{grid-row:2} .team h2{grid-row:3} .team p{grid-row:4; font-size:clamp(15.5px, 2.75lvh, 18px)}
  .tgrid > div:empty{display:block; grid-row:7 / 10; grid-column:1}   /* the second screen */
  .founder{grid-row:7; align-self:end; margin:0; padding:clamp(16px, 2.6lvh, 24px)}
  .founder blockquote{font-size:clamp(19px, 3.2lvh, 24px)}
  .tnums{grid-row:8; align-self:start; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:clamp(16px, 3lvh, 28px)}
  .tnums .n{font-size:clamp(28px, 5lvh, 40px)} .tnums .l{font-size:12.5px; line-height:1.35}

  /* security in two: the promise and the three rules, then where the documents and the AI live */
  .secu{display:grid; grid-template-columns:minmax(0,1fr); gap:0; padding-top:0; padding-bottom:0; min-height:calc(2 * var(--sh));
    grid-template-rows:1fr auto auto 1fr var(--bb) calc(var(--sv) / 2) calc(var(--sv) / 2) var(--bb)}
  .places{display:contents}
  .secu > *, .places > *{grid-column:1}
  .secu > .rv{grid-row:2}
  .places .wide{grid-row:3; margin-top:clamp(20px, 4lvh, 36px); gap:clamp(12px, 2.4lvh, 20px); background:none; box-shadow:none; padding:0}
  .places .pl-ch{grid-row:6; align-self:end; margin-bottom:6px}
  .places .pl-eu{grid-row:7; align-self:start; margin-top:6px}
  .places > div:not(.wide){padding:clamp(14px, 2.4lvh, 22px) 18px}
  .places .flag{float:left; height:clamp(30px, 5lvh, 40px); margin:0 14px 6px 0; border-radius:8px}
  .places b{font-size:clamp(24px, 4.2lvh, 30px); margin-top:4px}
  .places > div > span{font-size:14px; clear:both; padding-top:4px}
  .places .by{display:none}   /* the provider is named in the line above */
  .places .wide p{font-size:15px}
  
  /* the close */
  .outro{min-height:calc(var(--sv, calc(100svh - 64px)) - var(--footH, 0px)); padding:24px 16px}   /* with the footer below it, one screen: the close and the page's end are one stop; the small viewport, as an iPhone brings its bar back at the page's end and a taller close jumped up under the nav */
  .secu{scroll-margin-top:0}   /* the bar's room is already the page's scroll padding; more would stop with the team still showing */
}
.navcta .sm{display:none}
/* narrow phones (360 and below): the bar's four controls drawn tighter, so they fit side by side */
@media (max-width: 400px){
  .bar .wrapw{gap:8px} .bar .lang{margin-right:-6px}
  .navl > button{padding:8px 6px; font-size:14.5px} .navl > button::after{margin-left:6px}
  .navcta{padding:7px 11px; font-size:13px}
  .navcta .lg{display:none} .navcta .sm{display:inline}
}
@media (max-width: 350px){ .brand{font-size:19px; gap:7px} .brand svg{width:21px; height:21px} .navl > button{font-size:14px} }

/* phones: the story drawn for a narrow screen at full size (a tablet keeps the wide drawing, scaled to its screen) */
@media (max-width: 680px){
  .stage{zoom:1; width:100%; height:min(calc(var(--sh) - 92px), 640px); margin:0 auto}
  .person{left:0; top:0; width:64%; height:64%; border-radius:26px}
  .inc,.finding{left:auto; right:0; top:50%; width:min(330px, 88%)}
  .finding{top:52%}
  .kept{left:auto; right:0; top:44%; width:min(300px, 80%)}
  .reply{left:0; top:auto; bottom:0; width:min(340px, 92%)}
}
/* tablets held upright: the same run of screens, with room for bigger type and the wide drawings */
@media (min-width: 681px) and (max-width: 899px), (min-width: 681px) and (max-width: 1100px) and (max-height: 500px){
  html{scroll-padding-top:64px}
  .cue{display:none}
  .heropin{height:auto !important} .herostick{position:relative}
  .stage{zoom:var(--tz, 1); margin:0 auto}
  .beats{left:0; right:0; bottom:-30px} .beatl{left:0; right:0; bottom:-58px; font-size:15px}
  h2, .easyin h2{font-size:clamp(44px, min(7vw, 5.6lvh), 64px)}
  .introh{font-size:clamp(52px, min(8vw, 6.4lvh), 80px)}
  .hero h1{font-size:clamp(50px, min(7.6vw, 6.2lvh), 76px)}
  .introl, .lede, .team p{font-size:clamp(18px, 2.2lvh, 21px); max-width:32em}
  .introp{font-size:clamp(30px, 3.6lvh, 40px)}
  .picks{grid-auto-rows:clamp(96px, calc((var(--sh) - 150px) / 4), 150px); gap:14px; max-width:none}
  .picks .av{width:clamp(48px, 6lvh, 64px); height:clamp(48px, 6lvh, 64px)} .picks b{font-size:16px}
  .instead .big, .instead .big:lang(de), .instead .big:lang(fr){font-size:min(19vw, 15lvh)}
  .instead .line{font-size:clamp(24px, 3lvh, 32px)} .tags span{font-size:15.5px; padding:8px 16px}
  .flowl b{font-size:19px} .flowl span{font-size:16px}
  .ch h3{font-size:30px} .ch p{font-size:17px}
  .lifeg{gap:16px} .life{padding:22px 26px} .life .lw{font-size:16.5px} .life p{font-size:15px}
  .askwhy li b{font-size:17px} .askwhy li span{font-size:15px} .askmsgs .m{font-size:16px}
  .leaders .q{font-size:clamp(48px, min(8vw, 6.4lvh), 80px)}
  .founder{max-width:600px} .founder blockquote{font-size:26px}
  .tnums .n{font-size:clamp(44px, 5lvh, 64px)} .tnums .l{font-size:15px}
  .places .pl-ch, .places .pl-eu{max-width:640px; width:100%; justify-self:center}
  .places b{font-size:34px} .places > div > span{font-size:16px}
  .places .wide p{font-size:17px}
  .counter .n{font-size:clamp(72px, 9lvh, 110px)}
}
/* short phones (an iPhone SE, small Androids with the browser's bars showing): every screen a little tighter, so the longest language still fits */
@media (max-width: 680px) and (max-height: 660px){
  .hero h1{font-size:clamp(28px, min(9.6vw, 6lvh), 40px)}
  .lede{font-size:clamp(14.5px, 2.6lvh, 16px); line-height:1.45}
  .copy .cta{padding:12px 20px; font-size:15px}
  .copy .small{font-size:13px; margin-top:8px}
  .flowl span{display:none}   /* the step names alone; each step's words come with its window */
  .life p{display:none}
  .life .tg{margin-top:2px}
  .picks{grid-auto-rows:clamp(76px, calc((var(--sh) - 136px) / 4), 132px)}
  .tnums{margin-top:12px; gap:10px} .tnums .l{font-size:11.5px} .founder{padding:14px 16px} .founder blockquote{font-size:18px}
}
@media (max-width: 400px){ .family{flex-wrap:wrap; row-gap:10px} }   /* a long word (Monatsabschluss) goes under the faces rather than past the edge */
/* phones held sideways: too short for a held screen, so screens get a sensible minimum and the chat and the changes play in place */
@media (max-width: 1100px) and (max-height: 500px){
  :root{--sh:max(calc(100lvh - 64px), 520px)}
  .lifeg{position:relative; top:auto; height:auto; padding:24px 0} .easyin::after{display:none}
  .askbox{position:relative; top:auto; height:auto} .ask::after{display:none}
  .askview{height:auto; -webkit-mask-image:none; mask-image:none} .askmsgs{position:static}
  .flowin{grid-template-columns:minmax(0,1fr) auto; align-items:center; align-content:center; column-gap:28px; padding-top:8px}   /* the step's words beside its window: the width is what there is */
  .strip{display:none}
}

/* phones and upright tablets: the story's screen holds while the scroll steps through its three moments (a gentle stop at each), then the page moves on */
@media (max-width: 899px) and (min-height: 501px){
  .hero{overflow:clip}   /* clip, not hidden: hidden would make the hero its own scroller and the story could not hold */
  .hgrid{position:relative}
  .stagescr{position:sticky; top:64px; height:var(--sh); min-height:0; box-sizing:border-box}
  .hgrid::after{content:""; display:block; height:120lvh}   /* the room the story holds through */
}

/* phones and upright tablets: the purple section is one screen: the claim and today's count, the network, three of the month's counts */
@media (max-width: 899px) and (min-height: 501px){
  .scale .wrapw{display:flex; flex-direction:column; height:100lvh; box-sizing:border-box; padding-top:calc(64px + clamp(14px, 3.5lvh, 40px)); padding-bottom:clamp(14px, 3lvh, 32px)}
  .shead{min-height:0; flex:none; justify-content:flex-start; gap:clamp(10px, 2.2lvh, 24px)}
  .scale h2{font-size:clamp(26px, 4.6lvh, 44px)}
  .counter{display:flex; align-items:baseline; gap:12px}
  .counter .n{font-size:clamp(40px, 7.5lvh, 68px)}
  .counter .l{max-width:22ch}
  .net{flex:1 1 auto; height:auto; min-height:90px; margin:clamp(6px, 1.5lvh, 16px) 0 0}
}
@media (max-width: 680px) and (min-height: 501px){
  .colh{display:none}
  .node3.src{transform:translate(0, -50%)}   /* from the left edge, so a long name (E-Mail-Postfächer) stays on screen */
  .hub{left:66%; width:80px; height:80px; margin:-40px 0 0 -40px} .hub svg{width:32px; height:32px}
  .outlist{min-height:0; flex:none; margin:0; padding:0; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; align-content:start}
  .outlist h4{margin:0 0 2px}
  .outlist div, .outlist div:first-of-type{grid-column:auto; display:block; padding:10px 10px 12px}
  .outlist div{container-type:inline-size}
  .outlist b, .outlist div:first-of-type b{font-size:min(clamp(20px, 3.6lvh, 26px), 24cqi); line-height:1.1; white-space:nowrap}   /* one line at any count, so the tiles and the network above keep their height as the counts go up */
  .outlist b small{font-size:.55em; letter-spacing:.02em}
  .outlist span{display:block; margin-top:4px; font-size:12px; line-height:1.3; hyphens:auto}
}
/* short phones (an iPhone SE): the purple's claim, count and tiles tighter, the tiles without their marks, so the network keeps room */
@media (max-width: 680px) and (min-height: 501px) and (max-height: 640px){
  .scale h2{font-size:clamp(22px, 4.2lvh, 26px)} .counter .n{font-size:clamp(34px, 6.4lvh, 40px)} .counter .l{font-size:13px}
  .outlist .lg{display:none} .outlist div, .outlist div:first-of-type{padding:8px 10px 10px} .net{min-height:64px}
}

/* phones and upright tablets: the browser's own scrolling, no snapping; the held screens (the story, how it works, what
   changes, the chat) stay on screen with sticky and play as the page scrolls past them */
@media (max-width: 899px) and (min-height: 501px){
  .scale{overflow:clip}   /* clip, not hidden: hidden makes it a scroller of its own */
  .team{overflow:clip}
  #security{min-height:calc(2 * var(--sh))}   /* two screens, so the two halves never overlap */
  /* each screen's own words and cards stay above the band the browser's full-size bar covers (--bb, at the top of this block) */
  .introtop, .introgo, .copy, .stagescr, .instead, .scale .wrapw, .lifetop, .lifeg, .leaders{border-bottom:var(--bb) solid transparent}
  .pinwrap{padding-bottom:var(--bb)}
  .askbox{height:calc(var(--sh) - 16px - var(--bb))}
  footer{padding-bottom:env(safe-area-inset-bottom, 0px)}   /* the page ends with the footer, nothing under it */
}

/* phones: the map of Switzerland whole and seen from above, across the top of the team's first screen, the words under it;
   the founder and the numbers make the second screen, the quote at a size that leaves them room */
@media (max-width: 680px) and (min-height: 501px){
  .team .wrapw{grid-template-rows:calc(var(--sh) * .34) auto auto auto 1fr var(--bb) calc(var(--sv) / 2 + 70px) calc(var(--sv) / 2 - 70px) var(--bb)}
  .team canvas{top:4px; height:calc(var(--sh) * .36); width:100%; right:0; opacity:.95}
  .founder{grid-template-columns:56px 1fr; gap:14px; padding:16px 18px}
  .founder blockquote{font-size:clamp(17px, 2.6lvh, 20px); line-height:1.25}
  .portrait{width:56px; height:56px; font-size:18px}
}
/* one progress bar: where the named steps show, the dots under the step's words go */
@media (min-width: 681px){ .dots{display:none} }
@media (max-width: 1100px) and (max-height: 500px){ .dots{display:flex} }   /* sideways phones hide the names, so keep the dots */
@media (max-width: 680px) and (min-height: 501px) and (max-height: 700px){   /* short phones: the words need the whole screen, so the map sits faintly behind them */
  .team .wrapw{grid-template-rows:1fr auto auto auto 1fr var(--bb) calc(var(--sv) / 2 + 70px) calc(var(--sv) / 2 - 70px) var(--bb)}
  .team canvas{top:0; height:calc(var(--sh) * .5); opacity:.25}
}
@media (max-width: 680px) and (max-height: 700px){ .inc, .finding{top:auto; bottom:0} }   /* short phones: under the face, never past the story's edge */

/* upright tablets: the day (today against with Oikos) on the heading's screen, under it, where it plays out in view */
@media (min-width: 681px) and (max-width: 899px) and (min-height: 501px){
  .lifetop{min-height:calc(var(--sh) - var(--dayH, 280px) - 56px)}
  .day{margin:0 0 56px}
}

/* phones: the step windows laid out for the narrow window */
@media (max-width: 680px){
  .ohub{left:14px; top:calc(50% - 36px); width:72px; height:72px; border-radius:20px; font-size:14px}
  .hubv .sys{left:112px; right:14px; top:0; bottom:0; justify-content:center; gap:14px}
  .hubv .sys div{height:auto; min-height:60px; padding:10px 12px 10px 44px}   /* grows with its words, so a tag stays inside */
  .hubv .sys div::before{left:12px; top:50%; margin-top:-12px}
  .vb.five{grid-template-columns:1fr; align-items:start; padding:26px 22px}
  .five .trail{gap:12px; align-self:start; justify-content:flex-start}   /* phones: the stamp sits in the corner below, so the steps stay together at the top */
  .five .trail div{grid-template-columns:54px 1fr}
  .five .sign svg{width:auto; height:56px; max-width:100%}   /* one column: a signature's height, not the window's width */
  .seal{top:auto; bottom:22px; right:22px}
}

/* phones and tablets: the people at the close, alive: each sways and blinks in their own time, and what got better
   for them comes up in a bubble, one at a time */
@media (max-width: 899px), (max-width: 1100px) and (max-height: 500px){
  .crowd{padding-top:56px; gap:12px}
  .pp{position:relative; display:block; left:auto; top:auto}   /* in the row, not at the desktop's scattered places */
  .outro .pp, .outro.happy .pp{animation:sway var(--bd, 4.2s) ease-in-out var(--bdl, 0s) infinite; transition-delay:0s}
  .pp .eyes{animation:blink var(--bl, 6s) infinite}
  .pp .say{display:block; position:absolute; bottom:calc(100% + 12px); left:50%; translate:-50% 0; z-index:2; font-size:13px; line-height:1.3;
    white-space:nowrap; text-align:center; border-radius:14px}
  .pp .say::after{content:""; position:absolute; top:100%; left:50%; margin-left:-6px; border:6px solid transparent; border-top-color:var(--say-bg)}
  .p0 .say{left:-4px; translate:0 0} .p0 .say::after{left:26px}
  .p4 .say{left:auto; right:-4px; translate:0 0} .p4 .say::after{left:auto; right:20px}
  .p1 .say, .p3 .say{order:0}
}
@keyframes sway{0%,100%{transform:translateY(0) rotate(0)} 30%{transform:translateY(-6px) rotate(-2.5deg)} 70%{transform:translateY(2px) rotate(2deg)}}
@media (max-width: 899px) and (prefers-reduced-motion: reduce), (max-width: 1100px) and (max-height: 500px) and (prefers-reduced-motion: reduce){ .outro .pp, .pp .eyes{animation:none} }
/* a bubble shows while its person talks (app.js talk()), tinged with their colour */
.pp .say{--say-bg:var(--tint2, var(--card)); background:var(--say-bg); color:var(--ink);
  box-shadow:0 0 0 1px color-mix(in oklch, var(--tint2, var(--line)) 80%, oklch(0.5 0.05 265 / 30%)), 0 8px 22px -10px oklch(0.4 0.06 265 / 35%);
  opacity:0; transform:translateY(8px) scale(.9); transition:opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1)}
.pp:empty .say:empty, .pp .say:empty{visibility:hidden}
.pp.talk .say{opacity:1; transform:none; visibility:visible}

/* phones (touch): the demo form is a sheet at the top of the visible screen, as tall as what the keyboard leaves; a narrow
   desktop window has no on-screen keyboard, so it keeps the centred dialog */
@media (max-width: 560px) and (pointer: coarse){
  dialog.demo{margin:0; inset:calc(var(--vvt, 0px) + 8px + env(safe-area-inset-top, 0px)) 8px auto 8px; width:auto; max-width:none;
    max-height:calc(var(--vvh, 100dvh) - 16px - env(safe-area-inset-top, 0px)); padding:22px 18px 18px; border-radius:22px}
  dialog.demo h2{font-size:25px}
  dialog.demo p{font-size:15px; margin-top:8px}
  dialog.demo label{margin-top:14px}
  dialog.demo[open]{animation:sheetIn .35s var(--ease)}
}
@keyframes sheetIn{from{opacity:0; transform:translateY(-16px)}}

/* the persona tiles: the earlier gradient from their colour into white, without the coloured edge */
.picks a[style*="--tint"]{background:linear-gradient(100deg, color-mix(in oklab, var(--tint) 60%, var(--card)), color-mix(in oklab, var(--tint) 18%, var(--card)) 75%); box-shadow:var(--shadow)}
@media (max-width: 680px){ .picks a[style*="--tint"]{background:linear-gradient(180deg, color-mix(in oklab, var(--tint) 65%, var(--card)), color-mix(in oklab, var(--tint) 18%, var(--card)) 85%)} }
.picks a[style*="--tint"] .av{background:color-mix(in oklab, var(--tint) 85%, var(--card)); box-shadow:0 0 0 3px oklch(1 0 0 / 80%)}
.picks a:not([style*="--tint"]){background:var(--card); box-shadow:0 0 0 1px oklch(0.9 0.012 265), 0 10px 24px -16px oklch(0.4 0.06 265 / 35%)}

/* the pile coming in: the letters behind the top one read as paper (an edge, a tint, faint lines), not a white blur */
.fxc{box-shadow:0 0 0 1px oklch(0.9 0.012 265), var(--shadow)}
.fxc:not([style*="--i: 0"]){background:
    linear-gradient(oklch(0.86 0.015 265) 0 0) 24px 9px / 38% 5px no-repeat,
    linear-gradient(oklch(0.9 0.012 265) 0 0) calc(24px + 40%) 9px / 22% 5px no-repeat,
    linear-gradient(180deg, oklch(0.985 0.006 265), oklch(0.965 0.01 265));
  box-shadow:0 0 0 1px oklch(0.87 0.015 265), 0 6px 14px -8px oklch(0.4 0.06 265 / 30%)}

.menu .other .av{display:grid; place-items:center; background:var(--bg); color:var(--mark); font-weight:600; font-size:18px; box-shadow:inset 0 0 0 1.5px oklch(0.7 0.06 275 / 50%)}

/* the systems' marks in the network: a small light tile so the brand colours read on the dark ground */
.node3 .lg{display:inline-flex; gap:3px; flex:none}
.node3 .lg svg{width:26px; height:26px; padding:3px; border-radius:8px; background:oklch(0.97 0.01 275); box-shadow:0 1px 0 oklch(1 0 0 / 60%) inset, 0 2px 6px -2px oklch(0.2 0.08 275 / 50%); display:block; box-sizing:content-box}
@media (max-width: 899px), (max-width: 1100px) and (max-height: 500px){ .node3 .lg svg{width:20px; height:20px; padding:2px; border-radius:6px} }
.outlist .lg{display:block; margin-bottom:8px} .outlist .lg svg{width:24px; height:24px; padding:3px; border-radius:6px; background:oklch(0.97 0.01 275); display:block; box-sizing:content-box}

/* faces: the mouth opens and moves only while its bubble is showing, as if speaking */
.pp .m0,.pp .m1{transition:opacity .15s ease}
.pp .m1{transform-box:fill-box; transform-origin:50% 0}
.pp.talk .m0{opacity:0} .pp.talk .m1{opacity:1; animation:speak 1.1s steps(1) infinite}
@keyframes speak{0%{transform:scaleY(1)} 14%{transform:scaleY(.45)} 27%{transform:scaleY(.9)} 41%{transform:scaleY(.3)} 55%{transform:scaleY(1)} 68%{transform:scaleY(.55)} 82%{transform:scaleY(.2)}}
.pp .eyes{animation:blink var(--bl, 6s) infinite}
@media (prefers-reduced-motion: reduce){ .pp.talk .m1,.pp .eyes{animation:none} }
/* a clear tail from each bubble to its speaker */
@media (min-width: 1101px), (min-width: 900px) and (min-height: 501px){
  .pp .say::before{content:""; position:absolute; top:50%; left:-9px; margin-top:-8px; border:8px solid transparent; border-left:0; border-right:12px solid var(--say-bg)}
  .pp.sl .say::before{left:auto; right:-9px; border-right:0; border-left:12px solid var(--say-bg); border-right-color:transparent}
}
@media (max-width: 899px), (max-width: 1100px) and (max-height: 500px){ .pp .say::after{margin-left:-9px; border-width:10px 9px 0; border-style:solid; border-color:var(--say-bg) transparent transparent} }

.pp.talk{z-index:5}   /* a speaker's bubble sits in front of the other faces */
.node3.out3 b{display:inline-block; text-align:left}
@media (max-width: 899px), (max-width: 1100px) and (max-height: 500px){ .pp{position:relative} }   /* the bubble's reference box, so app.js measures it where it sits */
@media (max-width: 899px) and (min-height: 900px){ .flowin{align-content:start; padding-top:clamp(20px, 6vh, 72px)} }   /* tall narrow windows: the step sits near the top, not adrift in the middle */
@media (max-width: 899px), (max-width: 1100px) and (max-height: 500px){ .crowd{top:0} }   /* the desktop offset under the card would push the row over the heading */
@media (max-width: 400px){ .pp.p4{display:none} }   /* very narrow: four people, one row */

/* small screens: the ask section starts with its chat; the intro screen before it said what the chat then shows */
@media (max-width: 899px), (max-width: 1100px) and (max-height: 500px){ .ask > .rv:first-child{display:none} }

/* tall narrow windows (a browser made narrow on a desktop): screens that would be mostly empty combine as their content allows,
   instead of one block per full screen; the held animations keep their own screens */
@media (max-width: 899px) and (min-height: 900px){
  /* each combined block is one screen */
  .leaders{min-height:0; box-sizing:border-box; padding:var(--gpad, 48px) 16px 0; border-bottom:0}   /* with the map: one centred group (app.js sets --gpad) */
  .team canvas{position:relative; top:auto; height:min(calc(var(--sh) * .46), 620px); margin:0 0 var(--gpad, 48px); opacity:1}   /* the country as the screen's picture, not a strip under the line */
  .team .wrapw{min-height:var(--sh); row-gap:0; box-sizing:border-box; padding-top:16px; padding-bottom:16px; grid-template-rows:1fr auto auto auto auto auto 1fr}
  .tgrid > div:empty{display:none}
  .founder{grid-row:5; align-self:start; margin-top:clamp(24px, 4lvh, 40px)}
  .tnums{grid-row:6}
  #security{min-height:var(--sh)} .secu{padding-top:16px; padding-bottom:16px; grid-template-rows:1fr auto auto auto auto auto 1fr; box-sizing:border-box}
  .secmore{grid-row:6; margin-top:clamp(16px, 2.4lvh, 24px)}
  .secu::after{display:none}
  .places .pl-ch{grid-row:4; align-self:start; margin:clamp(24px, 4lvh, 40px) 0 6px}
  .places .pl-eu{grid-row:5}
  .outropin{height:auto} .outrostick{position:static}
  .outro{display:flex; flex-direction:column; min-height:calc(var(--sv, calc(100svh - 64px)) - var(--footH, 0px)); justify-content:center; align-items:center; box-sizing:border-box; padding-top:24px; padding-bottom:24px}
  .outro .stack{display:none}
  .outro h2{align-self:center; text-align:center}
}
.day .dkey{display:flex; gap:18px; margin:14px 64px 0 120px; font-size:12.5px; color:var(--muted)}
.day .dkey span{display:inline-flex; align-items:center; gap:7px} .day .dkey span::before{content:""; width:14px; height:10px; border-radius:3px}
.day .dkey .p::before{background:var(--rose-w); box-shadow:inset 0 0 0 1px var(--rose-i)} .day .dkey .w::before{background:var(--mint-w); box-shadow:inset 0 0 0 1px var(--mint-i)}
@media (max-width: 899px), (max-width: 1100px) and (max-height: 500px){ .day .dkey{margin-left:90px; margin-right:0} }


/* tall narrow windows: the heading and the day share a screen as one centred group (app.js sets --lpad), the cards then hold
   on their own; the chat keeps a chat's height instead of the whole window's */
@media (max-width: 899px) and (min-height: 900px){
  .day{display:block; margin:clamp(20px, 3lvh, 32px) 0 0}   /* below it, the held cards' own empty top makes the bottom margin */
  .lifetop{min-height:0; justify-content:flex-end; padding-top:var(--lpad, 48px); box-sizing:border-box}
  .askbox{--ch:min(calc(var(--sh) - 16px), 820px); height:var(--ch); top:calc(64px + (var(--sh) - var(--ch)) / 2); scroll-margin-top:calc((var(--sh) - var(--ch)) / 2)}
}
@media (max-width: 460px){ .day .axis span:nth-child(even){display:none} }   /* narrow: every four hours, so the times don't run together */

/* under the security cards: the way to the full overview (/security) */
.secmore{margin:-28px 0 0; font-size:13px; justify-self:end; text-align:right} .secmore a{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line)} .secmore a::after{content:" →"} .secmore a:hover{color:var(--primary); border-color:currentColor}

/* tablets: the tile's first column is as wide as its face, so the words never run under it */
@media (min-width: 681px) and (max-width: 899px), (min-width: 681px) and (max-width: 1100px) and (max-height: 500px){ .picks a{grid-template-columns:auto 1fr; column-gap:16px; padding:16px 40px 16px 16px} }
/* tall tablets: what Oikos is and the ways in share one screen, as on a desktop, when they fit */
@media (min-width: 681px) and (max-width: 899px) and (min-height: 1000px){
  .intro{display:flex; flex-direction:column; justify-content:center; min-height:100lvh; box-sizing:border-box; padding:64px 0 24px}
  .introtop, .introgo{min-height:0; padding:0}
  .introgo{margin-top:clamp(36px, 4.5lvh, 64px)}
  .picks{grid-auto-rows:auto}
}

/* tall tablets: the hero's words and its story on one screen, the words above the held story */
@media (min-width: 681px) and (max-width: 899px) and (min-height: 1000px){
  .copy{position:sticky; top:64px; z-index:1; min-height:0; padding:clamp(32px, 4lvh, 56px) 0 8px; box-sizing:border-box}
  .stagescr{top:calc(64px + var(--copyH, 380px)); height:calc(var(--sh) - var(--copyH, 380px)); padding-bottom:64px}
  /* both let go together at the hold's end: the words reserve the story's height below them (and the story takes it back),
     so the page can't push the story up over the words before the words move */
  .copy{margin-bottom:calc(var(--sh) - var(--copyH, 380px))} .stagescr{margin-top:calc(var(--copyH, 380px) - var(--sh))}
}
/* tall tablets: the step titles and the closing line at the size the screen has room for */
@media (min-width: 681px) and (max-width: 899px) and (min-height: 900px){
  .ch h3{font-size:clamp(30px, 3.4lvh, 44px)} .ch p{font-size:clamp(17px, 1.9lvh, 20px)}
  .scale .wrapw{padding-top:calc(64px + clamp(32px, 4.5lvh, 64px))}
  .shead{gap:clamp(20px, 2.8lvh, 36px)}
  .scale h2{font-size:clamp(40px, min(5.6vw, 4.6lvh), 64px); line-height:1.08}   /* the purple section's claim with the room the screen has */
  .counter .n{font-size:clamp(60px, 7lvh, 96px)} .counter .l{font-size:17px; max-width:26ch}
  .flowin{align-content:center}
  .outro .cta, .outro h2{align-self:center}
}

/* the Trust menu: the Solutions menu's look, narrower, placed under its button by trust.js */
.tmenu{width:360px; left:auto; grid-template-columns:1fr; transition:none}   /* opens and closes at once */
.tmenu .av{display:grid; place-items:center; background:var(--bg); color:var(--mark)}
.tmenu .av svg{width:22px; height:22px; transform:none}

/* desktop: every wheel turn or swipe comes to rest on a whole screen, as on phones (the stops are placed by app.js) */
@media (min-width: 1101px), (min-width: 900px) and (min-height: 501px){
  html{scroll-snap-type:y mandatory; scroll-padding-top:64px}
  html.placing, html.jumping{scroll-snap-type:none}
  #stops{display:block; position:absolute; left:0; top:0; width:1px; height:0; pointer-events:none}
  #stops i{position:absolute; left:0; width:1px; height:1px; scroll-snap-align:start}
}

/* nothing may make the page wider than the window: a reload would otherwise restore a sideways scroll */
html, body{overflow-x:clip}
@media (max-width: 899px), (max-width: 1100px) and (max-height: 500px){ .secmore{margin-top:0} }   /* phones and tablets stack the cards with a smaller gap */

/* sections out of view (app.js marks them) hold their animations still */
.idle, .idle *, .idle *::before, .idle *::after{animation-play-state:paused !important}

/* mouse and trackpad: app.js pages from rest to rest, so the browser's own snapping stays out of its way */
html.paged{scroll-snap-type:none !important}

/* desktop: the hero and "Instead," fill the screen under the bar, their group in the middle, so resting on it never shows a strip of the purple below */
@media (min-width: 1101px), (min-width: 900px) and (min-height: 501px){
  .herostick{min-height:100vh; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center}   /* it rests at the very top, under the bar (its own 64px clear it) */
}
@media (min-width: 1101px), (min-width: 900px) and (min-height: 501px){ .scalepin .scale{min-height:100vh; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center} }   /* and the purple fills the screen it rests on, however tall, its content in the middle */

/* how it works: say that scrolling moves it on. Each step is numbered, the next one is named under it with an arrow that
   nudges downwards (a click goes there too), and the next step's bar fills as the page scrolls towards it */
.ch .num{margin-bottom:10px; font-variant-numeric:tabular-nums}
.flownext{display:inline-flex; align-items:center; gap:12px; margin-top:30px; padding:9px 18px 9px 9px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink); font:inherit; text-align:left; cursor:pointer; box-shadow:0 6px 20px -12px rgba(40,40,90,.35); transition:opacity .4s ease, transform .4s var(--ease)}
.flownext[hidden]{display:inline-flex; opacity:0; transform:translateY(6px); pointer-events:none}
.flownext .ar{flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--primary); color:#fff; animation:nudge 1.8s var(--ease) infinite}
.flownext .ar svg{width:15px; height:15px}
.flownext .tx{display:grid; gap:1px; font-size:12.5px; line-height:1.3; color:var(--muted)}
.flownext b{font-size:14.5px; font-weight:500; color:var(--ink)}
@keyframes nudge{0%, 55%, 100%{transform:translateY(0)} 25%{transform:translateY(4px)}}
@media (hover: hover) and (pointer: fine){ .flownext:hover{border-color:var(--lilac)} }
@media (prefers-reduced-motion: reduce){ .flownext .ar{animation:none} }
.strip div{position:relative}
.strip div.up::before{content:""; position:absolute; left:0; top:-3px; height:3px; width:calc(var(--sp, 0) * 100%); background:var(--lilac)}
#dots i{overflow:hidden}
#dots i.on + i::before{content:""; position:absolute; inset:0 auto 0 0; width:calc(var(--sp, 0) * 100%); background:var(--lilac)}
@media (max-width: 899px), (max-width: 1100px) and (max-height: 500px){ .flownext{margin-top:18px; padding:7px 14px 7px 7px} .flownext .ar{width:26px; height:26px} .ch .num{margin-bottom:6px} }

/* phones: Trust makes four controls in the bar, so they are drawn tighter to fit (Trust gives way only on the narrowest) */
@media (max-width: 440px){
  .bar .wrapw{gap:6px} .bar .lang{margin-right:-4px}
  .navl > button{padding:8px 4px; font-size:14px} .navl > button::after{margin-left:4px}
  .navcta{padding:7px 10px; font-size:13px}
}
@media (max-width: 350px){ #trustBtn{display:none} }

/* desktop, when the leaders line and the team don't fit one screen: the line gets a screen of its own, centred, and the team the next */
@media (min-width: 1101px), (min-width: 900px) and (min-height: 501px){
  .teampin.apart .teamstick{position:relative; top:auto}
  .teampin.apart .leaders{min-height:calc(100vh - 64px); box-sizing:border-box; display:flex; flex-direction:column; justify-content:center}
  .teampin.apart .team{min-height:calc(100vh - 64px); box-sizing:border-box; display:flex; flex-direction:column; justify-content:center}
}
@media (min-width: 1101px), (min-width: 900px) and (min-height: 501px){ .teampin:not(.apart) .teamstick{min-height:calc(100vh - 64px); display:flex; flex-direction:column} .teampin:not(.apart) .team{flex:1 0 auto; display:flex; flex-direction:column; justify-content:center} }   /* the leaders line and the team fill their screen */

/* phones and upright tablets scroll natively, so a section is as tall as what it holds, never a screen of empty room, with
   the same space between sections everywhere. Only the held screens (the story, how it works, what changes, the chat)
   keep a whole screen, since they stay on it while the scroll plays them. Last in the file, so it wins over the screen rules above */
@media (max-width: 899px) and (min-height: 501px){
  :root{--gap:clamp(48px, 8lvh, 80px)}
  .introgo, .copy, .instead, .shead, .outlist, .lifetop, .leaders{min-height:0; border-bottom:0}
  .introgo{padding:0 0 var(--gap)}
  .copy{padding:var(--gap) 0 24px}
  .instead{padding:var(--gap) 16px}
  /* the purple: the claim and today's count, the network at a fixed height, the month's counts */
  .scale .wrapw{display:block; height:auto; border-bottom:0; padding-top:var(--gap); padding-bottom:var(--gap)}
  .net{flex:none; height:clamp(260px, 40lvh, 380px); margin:16px 0 8px}
  .outlist{padding:0}
  /* what changes: the heading and the day, then the cards held while each one turns */
  .lifetop{padding:var(--gap) 0 0; justify-content:flex-start}
  /* the leaders' line, then the team: the words, the map under them, the quote, the numbers */
  .leaders{display:block; padding:var(--gap) 16px 0}
  .team{display:flex; flex-direction:column; padding:var(--gap) 16px}
  .team .wrapw, .tgrid, .tgrid > .rv{display:contents}
  .team .kicker{order:1} .team h2{order:2} .team p{order:3}
  .team canvas{order:4; position:relative; top:auto; right:auto; width:100%; height:clamp(220px, 34lvh, 360px); margin:20px 0 0; opacity:1; z-index:auto}
  .founder{order:5; margin:16px 0 0}
  .tnums{order:6; margin-top:28px}
  .tgrid > div:empty{display:none}
  /* security: the promise and the three rules, then where the documents and the AI live */
  #security{min-height:0}
  .secu{display:block; padding-top:0; padding-bottom:var(--gap); min-height:0}
  .places{display:flex; flex-direction:column; gap:12px}
  .places .wide{order:-1; margin:20px 0 8px}
  .places .pl-ch, .places .pl-eu{margin:0}
  .secmore{margin-top:16px}
}