/* Themis landing: the story, told like a film (1 Oct 2026). Everything below the hero.
   Scroll drives the drawings; text lifts in from a soft blur; watermarks drift slower than the page.
   Neat and quiet by design: one gold thread, line drawings, no screenshots. With reduced motion, every scene is still. */

/* the older scroll fades must not fight the new reveals */
.cine .rest>*,.cn-founder .founder-in>*,.cn-closing>*{animation:none!important}

/* ---------- reveals ---------- */
.cn-lines>span{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.cn-lines>span>span{display:inline-block}
.cn-armed .cn-lines>span>span{transform:translateY(105%);transition:transform 1.1s var(--out)}
.cn-armed .cn-lines>span:nth-child(2)>span{transition-delay:.09s}
.cn-armed .cn-lines>span:nth-child(3)>span{transition-delay:.18s}
.cn-armed .cn-lines.in>span>span{transform:none}
.cn-armed .cn-rv,.cn-armed .cn-copy>*,.cn-armed .cn-rest>a,.cn-armed .cn-rest>p,.cn-armed .cn-closing>.btn,.cn-armed .cn-founder .sign>*{opacity:0;transform:translateY(16px);filter:blur(6px);transition:opacity 1s var(--out),transform 1s var(--out),filter 1s var(--out)}
.cn-armed .in.cn-rv,.cn-armed .in>.cn-copy>*,.cn-armed .cn-rest.in>a,.cn-armed .cn-rest.in>p,.cn-armed .cn-closing.in>.btn,.cn-armed .cn-founder.in .sign>*{opacity:1;transform:none;filter:none}
.cn-armed .in>.cn-copy>:nth-child(2){transition-delay:.08s}.cn-armed .in>.cn-copy>:nth-child(3){transition-delay:.18s}.cn-armed .in>.cn-copy>:nth-child(4){transition-delay:.3s}.cn-armed .in>.cn-copy>:nth-child(5){transition-delay:.42s}.cn-armed .in>.cn-copy>:nth-child(6){transition-delay:.5s}
.cn-armed .cn-rest.in>a{transition-delay:.25s}.cn-armed .cn-rest.in>p{transition-delay:.4s}
.cn-armed .cn-closing.in>.btn{transition-delay:.5s}
.cn-armed .cn-founder.in .sign>:nth-child(2){transition-delay:.1s}.cn-armed .cn-founder.in .sign>:nth-child(3){transition-delay:.2s}.cn-armed .cn-founder.in .sign>:nth-child(4){transition-delay:.28s}.cn-armed .cn-founder.in .sign>:nth-child(5){transition-delay:.36s}
.cn-sweep{color:var(--ink);font-weight:600;background:linear-gradient(var(--gold),var(--gold)) no-repeat 0 100%/0% 2px;padding-bottom:2px;transition:background-size 1.2s cubic-bezier(.65,0,.35,1) .9s}
.in .cn-sweep,html:not(.cn-armed) .cn-sweep{background-size:100% 2px}

/* ---------- scene 1: the problem ---------- */
.story.cine{width:min(1080px,100% - 32px);margin:130px auto 0}
.cn-problem{position:relative;min-height:min(92vh,760px);display:grid;place-items:center;padding:40px 0}
.cn-head{position:relative;z-index:1;max-width:760px;text-align:center}
.cn-head h2{font-size:clamp(40px,6vw,76px);line-height:1.02;letter-spacing:-.045em}
.cn-head p{max-width:560px;margin:26px auto 0;font-size:19px;line-height:1.6;color:var(--ink2);text-wrap:balance}
.cn-sheets{position:absolute;inset:0;pointer-events:none}
.cn-sheet{position:absolute;width:170px;height:214px;padding:18px 16px;box-sizing:border-box;border:1.3px solid color-mix(in srgb,var(--ink) 16%,transparent);border-radius:6px;background:color-mix(in srgb,var(--surface) 70%,transparent);display:flex;flex-direction:column;gap:10px;will-change:transform}
.cn-sheet span{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 34%,transparent)}
.cn-sheet i{height:2px;border-radius:2px;background:color-mix(in srgb,var(--ink) 12%,transparent)}
.cn-sheet.s1{left:-2%;top:4%;rotate:-9deg}
.cn-sheet.s2{right:2%;top:30%;rotate:7deg}
.cn-sheet.s3{left:10%;bottom:0;rotate:-3deg}
.cn-clock{position:absolute;right:14%;top:0;width:150px;height:150px;opacity:.26;fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;will-change:transform}
.cn-clock .hub{fill:var(--ink);stroke:none}
.cn-clock .hh,.cn-clock .mh{transform-box:view-box;transform-origin:60px 60px}
.cn-clock .mh{stroke:var(--gold);animation:cn-spin 6s linear infinite}
.cn-clock .hh{stroke-width:2;animation:cn-spin 72s linear infinite}
@keyframes cn-spin{to{transform:rotate(360deg)}}

/* ---------- scene 2: now it does ---------- */
.cn-now{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:30px}
.cn-knot{width:120px;height:300px;overflow:visible;fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cn-knot path{stroke-dasharray:1;vector-effect:non-scaling-stroke}
.cn-knot .k{stroke-dashoffset:0}
.cn-knot .s{stroke-dashoffset:1}
.cn-now-h{position:relative;margin-top:-86px;padding:6px 18px;background:var(--bg);font-size:clamp(44px,6vw,80px);letter-spacing:-.05em;text-align:center}
.cn-now-h::before{content:"";position:absolute;inset:-40% -30%;z-index:-1;background:radial-gradient(closest-side,var(--glow),transparent);opacity:.7;animation:cn-breathe 4s ease-in-out infinite alternate}
@keyframes cn-breathe{from{opacity:.35;transform:scale(.94)}to{opacity:.85;transform:scale(1.05)}}

/* ---------- scene 3: the chapters on one gold thread ---------- */
.cn-chapters{position:relative;padding:40px 0 20px}
.cn-rail{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--line2);border-radius:2px}
.cn-rail i{position:absolute;inset:0;background:var(--gold);transform-origin:top;transform:scaleY(var(--rail,0));border-radius:2px}
html:not(.cn-armed) .cn-rail i{transform:none}
.cn-chap{position:relative;z-index:1;display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;margin-top:120px}
.cn-chap:first-of-type{margin-top:40px}
.cn-art{position:relative;display:grid;place-items:center;width:230px;height:230px;border-radius:50%;background:radial-gradient(closest-side,var(--bg) 78%,transparent)}
.cn-numeral{position:absolute;right:-70px;top:-50px;z-index:-1;font-size:190px;font-weight:800;line-height:1;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.3px color-mix(in srgb,var(--ink) 13%,transparent);will-change:transform;user-select:none}
.cn-node{position:absolute;top:-8px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--bg);border:1.6px solid var(--line2);transition:background .5s,border-color .5s,box-shadow .8s}
.lit .cn-node{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 8px color-mix(in srgb,var(--gold) 18%,transparent),0 0 24px 6px var(--glow)}
.cn-sym{width:190px;height:190px}
.cn-sym svg,.cn-mtn svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--sym);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cn-sym path,.cn-mtn path{vector-effect:non-scaling-stroke}
.cn-armed .cn-sym path,.cn-armed .cn-mtn path{stroke-dasharray:1;stroke-dashoffset:1}
.cn-copy{max-width:420px;margin-top:26px;padding:10px 18px 14px;background:var(--bg);border-radius:18px}
.cn-num{font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--gold)}
.cn-copy h3{margin-top:8px;font-size:clamp(28px,3vw,38px);line-height:1.1;letter-spacing:-.035em}
.cn-copy>p{margin-top:12px;font-size:17.5px;line-height:1.6;color:var(--ink2)}
.cn-copy .matters{margin-top:24px}
.cn-aha{margin-top:20px!important;font-size:clamp(19px,1.8vw,22px)!important;font-weight:600;letter-spacing:-.02em;color:var(--ink)!important}
.cn-aha span{background:linear-gradient(var(--gold),var(--gold)) no-repeat 0 100%/0% 2px;padding-bottom:3px;transition:background-size 1.2s cubic-bezier(.65,0,.35,1) 1.6s}
.in .cn-aha span,html:not(.cn-armed) .cn-aha span{background-size:100% 2px}
.cn-meta{margin-top:10px!important;font-size:13.5px!important;color:var(--ink3)!important}

/* the small drawings of Themis at work */
.cn-vig{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;margin:22px auto 0;text-align:left}
.vg-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);font-size:14.5px;font-weight:600;color:var(--ink);transition:background .4s,color .4s,border-color .4s}
.vg-tap{position:absolute;left:62%;top:10px;width:22px;height:22px;border-radius:50%;border:2px solid var(--gold);background:color-mix(in srgb,var(--gold) 30%,transparent);opacity:0}
.vg-card{display:flex;align-items:center;gap:12px;margin-top:6px;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.vg-card small{display:block;font-size:12px;color:var(--ink3)}
.vg-card b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.vg-ring{flex:none;width:22px;height:22px;border-radius:50%;border:2.4px solid var(--accent)}
.cn-armed .vg-start .vg-card{opacity:0;transform:translateY(12px)}
.in .vg-start .vg-chip.on{animation:cn-chip .45s ease 1s forwards}
.in .vg-start .vg-tap{animation:cn-tap 1.1s ease .4s both}
.in .vg-start .vg-card{animation:cn-up .8s var(--out) 1.5s forwards}
html:not(.cn-armed) .vg-start .vg-chip.on{background:var(--dark);color:var(--on-dark);border-color:var(--dark)}
@keyframes cn-chip{to{background:var(--dark);color:var(--on-dark);border-color:var(--dark)}}
@keyframes cn-tap{0%{opacity:0;transform:translate(40px,40px)}45%{opacity:1;transform:none}60%{transform:scale(.75)}75%{transform:none;opacity:1}100%{opacity:0}}
@keyframes cn-up{to{opacity:1;transform:none}}

.vg-steps{width:min(360px,100%);align-items:stretch;gap:12px;padding:16px;border-radius:16px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.vg-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.vg-track{position:relative;display:flex;align-items:center}
.vg-track b{flex:1;height:2px;background:var(--line2)}
.vg-track .n{flex:none;width:24px;height:24px;border-radius:50%;border:1.6px solid var(--accent);background:var(--surface);box-sizing:border-box}
.vg-track .n.q{width:15px;height:15px;margin:0 5px;border-radius:3px;transform:rotate(45deg)}
.vg-walk{position:absolute;left:-5px;top:-5px;width:34px;height:34px;border-radius:50%;border:2.5px solid var(--gold);box-sizing:border-box}
.vg-caps{position:relative;height:44px;font-size:13.5px;line-height:1.45;color:var(--ink2)}
.vg-caps>span{position:absolute;inset:0;opacity:0}
.vg-caps>span:first-child{opacity:1}
.vg-caps strong{display:block;color:var(--ink);font-weight:600}
.in .vg-walk{animation:cn-walk 9s cubic-bezier(.65,0,.35,1) .6s infinite}
.in .vg-track .f1{animation:cn-f1 9s ease .6s infinite}.in .vg-track .f2{animation:cn-f2 9s ease .6s infinite}.in .vg-track .f3{animation:cn-f3 9s ease .6s infinite}
.in .vg-caps>span:nth-child(1){animation:cn-c1 9s ease .6s infinite}.in .vg-caps>span:nth-child(2){animation:cn-c2 9s ease .6s infinite}.in .vg-caps>span:nth-child(3){animation:cn-c3 9s ease .6s infinite}.in .vg-caps>span:nth-child(4){animation:cn-c4 9s ease .6s infinite}
@keyframes cn-walk{0%,18%{transform:translateX(0)}25%,43%{transform:translateX(var(--w1,96px))}50%,68%{transform:translateX(var(--w2,196px))}75%,93%{transform:translateX(var(--w3,294px))}100%{transform:translateX(0)}}
@keyframes cn-f1{0%,22%{background:var(--surface)}25%,96%{background:var(--accent)}100%{background:var(--surface)}}
@keyframes cn-f2{0%,47%{background:var(--surface)}50%,96%{background:var(--accent)}100%{background:var(--surface)}}
@keyframes cn-f3{0%,72%{background:var(--surface)}75%,96%{background:var(--accent)}100%{background:var(--surface)}}
@keyframes cn-c1{0%,20%{opacity:1}24%,97%{opacity:0}100%{opacity:1}}
@keyframes cn-c2{0%,24%{opacity:0}28%,45%{opacity:1}49%,100%{opacity:0}}
@keyframes cn-c3{0%,49%{opacity:0}53%,70%{opacity:1}74%,100%{opacity:0}}
@keyframes cn-c4{0%,74%{opacity:0}78%,95%{opacity:1}99%,100%{opacity:0}}

.vg-cal{width:min(330px,100%);align-items:stretch;gap:8px;padding:14px;border-radius:16px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.vg-cal-head{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;font-weight:700;color:var(--ink3)}
.vg-cal-head .hol-l{color:var(--gold)}
.vg-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.vg-grid i{display:grid;place-items:center;height:30px;border-radius:8px;font-style:normal;font-size:12.5px;color:var(--ink3)}
.vg-grid i.h{height:18px;font-size:10.5px}
.vg-grid i.we{opacity:.45}
.vg-grid i.served{border:1.5px solid var(--ink);color:var(--ink);font-weight:700}
.vg-grid i.hol{border:1px dashed var(--gold);color:var(--gold)}
.vg-grid i.c{font-weight:600}
.vg-grid i[data-due]{box-shadow:0 0 0 2px var(--gold)}
.in .vg-grid i.c{animation:cn-day .35s ease calc(.5s + var(--k) * .28s) both}
html:not(.cn-armed) .vg-grid i.c{background:var(--accent);color:var(--on-dark)}
@keyframes cn-day{from{background:transparent;color:var(--ink3)}to{background:var(--accent);color:var(--on-dark)}}
.vg-due{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:13px;color:var(--ink3)}
.vg-due b{color:var(--ink);font-weight:600}
.vg-due .dot{width:10px;height:10px;border-radius:50%;background:var(--gold);animation:cn-pulse 2.4s ease-in-out infinite}
.cn-armed .vg-due{opacity:0;transform:translateY(8px)}
.in .vg-due{animation:cn-up .7s var(--out) 3.5s forwards}
@keyframes cn-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 45%,transparent)}50%{box-shadow:0 0 0 9px transparent}}

.vg-cards{position:relative;width:min(340px,100%);height:222px;display:block}
.vg-c{position:absolute;left:0;right:0;top:calc(var(--k) * 72px);display:flex;flex-direction:column;gap:3px;padding:13px 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);font-size:15px;font-weight:600;line-height:1.4;color:var(--ink);rotate:var(--r)}
.vg-c small{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.vg-c.gold small{color:var(--gold)}
.cn-armed .vg-c{opacity:0;transform:translateY(60px) rotate(8deg)}
.in .vg-c{animation:cn-deal .9s var(--out) calc(.6s + var(--k) * .45s) forwards}
@keyframes cn-deal{to{opacity:1;transform:none}}

/* ---------- the rest ---------- */
.cn-rest{position:relative;z-index:1;margin-top:150px;padding:24px 0 10px;background:var(--bg)}

/* ---------- founder: the drawing, the name, the credentials ---------- */
.cn-founder{position:relative;overflow:hidden}
.cn-founder .founder-in{position:relative;z-index:1}
.cn-founder .sign{margin-top:0;padding-top:0;border-top:0}
.cn-signature{display:block;width:150px;height:14px;margin-top:6px;overflow:visible;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round}
.cn-signature path{stroke-dasharray:1}
.cn-armed .cn-signature path{stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.65,0,.35,1) .5s}
.cn-armed .cn-founder.in .cn-signature path{stroke-dashoffset:0}
.cn-mtn{position:absolute;left:50%;bottom:-40px;width:min(1100px,160%);height:auto;aspect-ratio:200/125;transform:translateX(-50%);opacity:.14;pointer-events:none}
.cn-mtn svg{stroke:var(--ink);stroke-width:1.2}

/* ---------- early access: a slow sheen ---------- */
.join-card{position:relative;overflow:hidden}
.cn-sheen{position:absolute;top:-40%;bottom:-40%;left:-60%;width:36%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.09),transparent);transform:rotate(8deg);animation:cn-sheen 7s ease-in-out infinite}
@keyframes cn-sheen{0%,55%{left:-60%}100%{left:130%}}
.join-card>*:not(.cn-sheen){position:relative}
.cn-roll{display:inline-block;height:1em;overflow:hidden;vertical-align:baseline;line-height:1}
.cn-roll>span{display:block;transition:transform 1s cubic-bezier(.7,0,.3,1) .6s}
.cn-roll>span>span{display:block}
.cn-roll.go>span{transform:translateY(-1em)}

/* ---------- closing: the page deepens, the scales settle ---------- */
.cn-closing{position:relative;overflow:hidden;isolation:isolate}
.cn-glow{position:absolute;left:50%;top:40px;width:420px;height:420px;margin-left:-210px;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(228,199,124,.16),transparent);animation:cn-breathe 5s ease-in-out infinite alternate}
.cn-specks{position:absolute;inset:0;z-index:-1;pointer-events:none}
.cn-specks i{position:absolute;bottom:-10px;width:var(--sz);height:var(--sz);border-radius:50%;background:var(--th-gold-line);opacity:0;animation:cn-speck 11s linear var(--dl) infinite}
@keyframes cn-speck{0%{transform:translateY(0);opacity:0}12%{opacity:.8}100%{transform:translateY(-420px);opacity:0}}

/* ---------- wide screens: the drawing left, the words right, the thread between ---------- */
@media(min-width:960px){
 .cn-chap{grid-template-columns:1fr 1fr;column-gap:120px;justify-items:stretch;align-items:center;text-align:left;margin-top:170px}
 .cn-art{justify-self:end;width:300px;height:300px;margin-right:-30px}
 .cn-sym{width:250px;height:250px}
 .cn-numeral{right:auto;left:-120px;top:-40px;font-size:300px}
 .cn-node{left:auto;right:-67px;top:50%;margin:-6px 0 0}
 .cn-copy{margin-top:0;padding:0;background:none}
 .cn-vig{align-items:flex-start;margin-left:0}
 .cn-copy .matters{align-items:flex-start}
 .cn-copy .rot b{left:0;transform:none}
}
@media(max-width:640px){
 .story.cine{margin-top:96px}
 .cn-problem{min-height:auto;padding:150px 0 170px}
 .cn-head p{font-size:17px}
 .cn-sheet{width:132px;height:170px;padding:14px 12px;gap:8px}
 .cn-sheet.s1{left:-44px;top:0}
 .cn-sheet.s2{right:-40px;top:auto;bottom:34%}
 .cn-sheet.s3{left:18px;bottom:-10px}
 .cn-clock{right:-20px;top:-20px;width:120px;height:120px}
 .cn-chap{margin-top:96px}
 .cn-art{width:190px;height:190px}
 .cn-sym{width:156px;height:156px}
 .cn-numeral{font-size:150px;right:-60px;top:-44px}
 .cn-copy{max-width:calc(100% - 8px)}
 .cn-copy>p{font-size:16.5px}
 .cn-rest{margin-top:120px}
}

/* ---------- reduced motion: every scene complete and still ---------- */
@media(prefers-reduced-motion:reduce){
 .cn-clock .mh,.cn-clock .hh,.cn-now-h::before,.cn-sheen,.cn-glow,.cn-specks i,.vg-due .dot,.in .vg-walk,.in .vg-track .n,.in .vg-caps>span{animation:none!important}
 .cn-specks{display:none}
}

/* fixes after the first look */
.cn-problem{width:100vw;margin-left:calc(50% - 50vw);overflow-x:clip}
.cn-problem .cn-head{padding:0 24px}
.cn-chapters{overflow-x:clip}
.join-count b .cn-roll,.join-count b .cn-roll span{font-size:inherit!important;color:inherit!important;letter-spacing:inherit}
.vg-cards{height:268px}
.vg-c{top:calc(var(--k) * 88px)}
@media(max-width:959px){
 .cn-founder .founder-copy{text-align:center}
 .cn-founder .sign-name{justify-content:center}
 .cn-founder .cn-signature{margin-inline:auto}
}
.cn-now{overflow-x:clip}
@media(min-width:960px){
 .cn-vig.vg-steps,.cn-vig.vg-cal{align-items:stretch}
 .cn-node{right:-36px}
}
.cn-mtn{opacity:.1}
@media(max-width:640px){.cn-problem{padding-bottom:90px}.cn-now{padding-top:0}}

/* ---------- refinement (1 Oct, later): calmer, neater, especially on phones ---------- */
/* Now it does: no spiral. One gold line draws down from the words into the chapters. */
.cn-now{padding-top:10px}
.cn-now-h{margin-top:0;padding:0 18px}
.cn-drop{display:block;width:2px;height:120px;margin-top:22px;overflow:visible;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round}
.cn-drop path{stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
html:not(.cn-armed) .cn-drop path{stroke-dashoffset:0}
.cn-chapters{padding-top:0}
.cn-rail{background:color-mix(in srgb,var(--line2) 60%,transparent);width:1.5px}
/* the chapters open cleanly: symbol, number, title, words, one drawing */
.cn-chap:first-of-type{margin-top:28px}
.cn-copy h3{text-wrap:balance}
.cn-copy>p{text-wrap:pretty}

@media(max-width:640px){
 /* the problem: two sheets at the edges and nothing behind the words */
 .cn-problem{min-height:auto;padding:120px 0 72px}
 .cn-sheet{width:112px;height:144px;padding:12px 11px;gap:7px;opacity:.75}
 .cn-sheet span{font-size:9px}
 .cn-sheet.s1{left:-38px;top:12px}
 .cn-sheet.s2{right:-34px;top:auto;bottom:6px}
 .cn-sheet.s3,.cn-clock{display:none}
 .cn-head h2{font-size:42px}
 /* one idea per screen: no giant numbers, smaller drawings */
 .cn-numeral{display:none}
 .cn-chap{margin-top:84px}
 .cn-art{width:168px;height:168px}
 .cn-sym{width:136px;height:136px}
 .cn-copy{margin-top:18px;padding:8px 14px 12px}
 .cn-copy h3{font-size:30px}
 /* chapter one: the three choices sit in one tidy row, smaller */
 .vg-start{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px}
 .vg-chip{min-height:34px;padding:0 12px;font-size:13px}
 .vg-card{width:100%;box-sizing:border-box;margin-top:8px;text-align:left}
 .vg-tap{left:18%;top:4px}
 .cn-copy .matters{margin-top:20px}
 .rot{font-size:22px}
 /* chapter four: the three cards a little tighter */
 .vg-cards{height:250px}
 .vg-c{top:calc(var(--k) * 82px);padding:11px 14px;font-size:14px}
 /* founder: no mountain lines on small screens */
 .cn-mtn{display:none}
 .cn-rest{margin-top:100px}
}
@media(max-width:640px){
 .cn-sheet.s1{left:-40px;top:14px}
 .cn-sheet.s2{right:-40px;left:auto;top:52px;bottom:auto}
 .cn-problem{padding-top:190px}
}
.join-count{align-items:center}