/* Corpus homepage. One orchestrated moment (the hero: what each source holds lands on its card in the app), one
   scroll story (questions on the left, the phone answering on the right), one thing to play with (the chromosome
   map). Everything else is quiet. Motion respects Reduce Motion. */
.home{--maxw:1240px;--gutter:clamp(16px,4vw,32px);--section:clamp(64px,8vw,112px);--spring:cubic-bezier(.34,1.45,.64,1);--field:#437C58;--on-field:#FFFCF7;overflow-x:clip}
@media (prefers-color-scheme:dark){.home{--field:#2C4A37}}
@media (prefers-reduced-motion:no-preference){html:has(body.home){scroll-behavior:smooth}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--ground);padding:10px 14px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{left:12px}
.home h2{font:700 clamp(40px,5.4vw,72px)/.98 var(--display);letter-spacing:-.028em;margin:0 0 20px;text-wrap:balance}
.home h3{font:700 22px/1.15 var(--display);letter-spacing:-.015em;margin:0 0 8px}
.home .lead{font:400 clamp(18px,1.5vw,20.5px)/1.5 var(--text);color:var(--ink2);max-width:38ch;margin:0;text-wrap:pretty}
.ask,.dna,.end{scroll-margin-top:64px}
.pebble.still{animation-play-state:paused}

/* Header */
.bar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--ground) 84%,transparent);-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.bar.scrolled{border-bottom-color:var(--line)}
.bar-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);height:64px;display:flex;align-items:center;gap:28px}
.bar .wordmark{font-size:28px;margin-right:auto}
.bar-nav{display:flex;gap:26px}
.bar-nav a{color:var(--ink2);font:600 15px var(--text);text-decoration:none}
.bar-nav a:hover{color:var(--ink)}
.pill{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;background:var(--ink);color:var(--ground);font:700 14.5px var(--text);text-decoration:none;white-space:nowrap}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.14fr);align-items:center;gap:clamp(20px,4vw,56px);max-width:var(--maxw);margin:0 auto;padding:clamp(28px,4.5vw,64px) var(--gutter) clamp(32px,4vw,64px)}
.hero h1{font:700 clamp(50px,6.5vw,94px)/.92 var(--display);letter-spacing:-.03em;margin:0 0 28px;text-wrap:balance}
.hero h1 .nw{white-space:nowrap}
.hero h1 .pebble{--ps:.25em;width:.25em;height:.25em;margin-left:.07em;vertical-align:.03em;animation:morph 9s ease-in-out infinite,breath 5s ease-in-out infinite}
.hero-lead{font:400 clamp(18px,1.55vw,21px)/1.5 var(--text);color:var(--ink2);max-width:33ch;margin:0;text-wrap:pretty}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:34px}
.store{display:inline-block;border-radius:10px}
.store img{display:block;height:54px;width:auto}
.quiet-link{color:var(--ink);font:700 16.5px var(--text);text-decoration:underline;text-decoration-color:var(--band);text-decoration-thickness:2px;text-underline-offset:6px}
.quiet-link:hover{text-decoration-color:var(--ink)}
.cta-note{font-size:14.5px;color:var(--ink2);margin:16px 0 0;text-wrap:pretty}
.cta-note a{color:var(--ink)}

/* The stage: one em-based drawing that scales with its column and, on wide screens, with the window's height so the
   whole composition sits above the fold. Desktop is 60em × 64em. */
.stage-wrap{container-type:inline-size;width:100%;max-width:min(640px,calc((100vh - 190px) * .9375));max-width:min(640px,calc((100svh - 190px) * .9375));justify-self:end}
.stage{position:relative;width:60em;height:64em;font-size:10px;font-size:calc(100cqw / 60)}
.obj{position:absolute;left:var(--x);top:var(--y);width:var(--s);display:flex;flex-direction:column;align-items:center;gap:.5em;transform:rotate(var(--r));z-index:2}
.obj svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 .6em .9em rgba(43,34,28,.13))}
.tag{position:relative;display:inline-block;font:700 1.24em/1 var(--text);color:var(--ink);background:var(--surface);padding:.5em .72em;border-radius:999px;white-space:nowrap;box-shadow:0 .08em .2em rgba(43,34,28,.08),0 .5em 1.2em rgba(43,34,28,.1);transform:rotate(calc(var(--r) * -1));transition:opacity .3s ease}
.tag.ochre{background:var(--ochre-tint);color:var(--ochre-text)}
.tag.sent{opacity:.35;transition-duration:.1s}
.tube{--x:2.4em;--y:0;--r:-12deg;--s:10em}
.scan{--x:.4em;--y:15.6em;--r:-6deg;--s:10.6em}
.notes{--x:1.6em;--y:32.2em;--r:5deg;--s:10.4em}
.helix{--x:3.6em;--y:48.6em;--r:-16deg;--s:9.2em}
.smartring{--x:47em;--y:0;--r:4deg;--s:11.6em}
.watch{--x:48.6em;--y:17.6em;--r:9deg;--s:10em}
.bowl{--x:46.6em;--y:33.8em;--r:-3deg;--s:12.2em}
.pills{--x:48.8em;--y:49.6em;--r:7deg;--s:10em}
.hero-phone{position:absolute;left:16.4em;top:2.8em;--pw:27.6em;z-index:3}

/* Phone frame, sized by --pw. Screen ratio is the 6.9" iPhone's 1320 × 2868. */
.phone{position:relative;width:var(--pw);padding:calc(var(--pw) * .028);border-radius:calc(var(--pw) * .155);background:linear-gradient(150deg,#6A5D54 0%,#2B221C 20%,#1A1512 62%,#3D332D 100%);box-shadow:inset 0 0 0 calc(var(--pw) * .005) rgba(255,255,255,.16),0 calc(var(--pw) * .1) calc(var(--pw) * .17) calc(var(--pw) * -.06) rgba(43,34,28,.42),0 calc(var(--pw) * .025) calc(var(--pw) * .05) rgba(43,34,28,.18)}
.phone::before{content:"";position:absolute;left:calc(var(--pw) * -.009);top:19%;width:calc(var(--pw) * .012);height:4.5%;border-radius:2px 0 0 2px;background:#3A312B;box-shadow:0 calc(var(--pw) * .13) 0 #3A312B,0 calc(var(--pw) * .27) 0 #3A312B}
.phone::after{content:"";position:absolute;right:calc(var(--pw) * -.009);top:27%;width:calc(var(--pw) * .012);height:10%;border-radius:0 2px 2px 0;background:#3A312B}
.screen{position:relative;overflow:hidden;aspect-ratio:1320 / 2868;border-radius:calc(var(--pw) * .127);background:#F5EFE6;isolation:isolate}
.screen::after{content:"";position:absolute;z-index:6;top:calc(var(--pw) * .024);left:50%;width:calc(var(--pw) * .27);height:calc(var(--pw) * .079);transform:translateX(-50%);border-radius:999px;background:#000}
.screen > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* A new answer arrives the way it does in the app: it rises into place. */
.screen .media,.shot-alt{opacity:0;transform:translateY(3%) scale(.985);transition:opacity .45s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.screen .media.on,.stage.answering .shot-alt{opacity:1;transform:none}

/* Where each value lands on the home screen (measured from the screenshot). */
.glow{position:absolute;z-index:4;left:4.8%;width:90.4%;border-radius:calc(var(--pw) * .05);box-shadow:0 0 0 .22em #437C58,0 0 0 .75em rgba(67,124,88,.2);opacity:0;pointer-events:none}
.glow.ochre{box-shadow:0 0 0 .22em #B5822B,0 0 0 .75em rgba(181,130,43,.22)}
.glow[data-card="results"]{top:32.1%;height:8.1%}
.glow[data-card="sleep"]{top:41.5%;height:13.6%}
.glow[data-card="fitness"]{top:56.4%;height:13.7%}
.glow[data-card="food"]{top:71.4%;height:8%}
.glow[data-card="changed"]{top:80.7%;height:8.3%}
.glow.agent{left:83%;top:89.5%;width:12.5%;height:auto;aspect-ratio:1;border-radius:50%}
.token{position:absolute;left:0;top:0;z-index:20;margin:0;opacity:0;pointer-events:none;will-change:transform,opacity;transform:none}

/* Hero sequence: the objects arrive, then (home.js) their values fly to the screen once the phone is in view. */
.js .stage:not(.go) .obj,.js .stage:not(.go) .hero-phone{opacity:0;animation:show 0s 2.5s forwards}
.stage.go .hero-phone{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.stage.go .obj{animation:pop .75s var(--spring) both;animation-delay:calc(160ms + var(--i) * 75ms)}
.stage.go .obj .tag{animation:tagin .4s ease-out both;animation-delay:calc(560ms + var(--i) * 75ms)}
@keyframes show{to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(2.4em)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:rotate(var(--r)) translateY(1.6em) scale(.72)}to{opacity:1;transform:rotate(var(--r))}}
@keyframes tagin{from{opacity:0;transform:rotate(calc(var(--r) * -1)) translateY(-.5em)}to{opacity:1;transform:rotate(calc(var(--r) * -1))}}

/* Just ask: the phone sits beside the heading, then stays centred while the questions scroll past it. */
.ask{max-width:var(--maxw);margin:0 auto;padding:var(--section) var(--gutter) clamp(24px,4vw,56px)}
.story{--pw:min(330px,calc((100vh - 120px) * .46));--ph:calc(var(--pw) * 2.107);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(24px,4vw,64px)}
.ask-head{max-width:600px}
.sample{margin:16px 0 0;font-size:14px;color:var(--ink2)}
.steps{display:flex;flex-direction:column}
.step{min-height:max(76vh,calc(var(--ph) + 56px));display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .5s ease}
.step:first-child{min-height:0;padding:clamp(56px,10vh,120px) 0 28vh}
.step.on{opacity:1}
/* The question is the user's bubble (corners 22/22/6/22, the tail bottom-right). Its words settle from the
   unconfirmed-transcript grey to ink, as dictation does in the app; then the pebble answers. */
.bubble{align-self:flex-start;max-width:20ch;margin:0 0 22px;padding:.45em .8em .5em;border-radius:.65em .65em .18em .65em;background:var(--moss-tint);color:var(--ink);font:500 clamp(24px,2.4vw,34px)/1.25 var(--text);letter-spacing:-.012em;text-wrap:balance}
.js .bubble .w{color:var(--ink3)}
.js .step.heard .bubble .w{color:var(--ink);transition:color .32s ease;transition-delay:calc(var(--wi) * 70ms)}
.answer{display:flex;gap:14px;align-items:flex-start;font:400 clamp(17.5px,1.45vw,20.5px)/1.55 var(--text);color:var(--ink2);max-width:38ch;margin:0}
.answer .pebble{--ps:26px;flex:none;width:26px;height:26px;margin-top:1px}
.js .step .answer > span:last-child{opacity:.35;transition:opacity .5s ease}
.js .step.heard .answer > span:last-child{opacity:1;transition-delay:.55s}
.step.heard .answer .pebble{animation:speak 1.3s ease-in-out .45s 1 both}
@keyframes speak{0%,100%{transform:scale(1)}18%{transform:scale(1.1)}36%{transform:scale(.97)}54%{transform:scale(1.07)}72%{transform:scale(.99)}86%{transform:scale(1.05)}}
.step-phone,.dots{display:none}
.story-phone{grid-column:2;grid-row:1;position:sticky;top:calc(32px + 50vh - var(--ph) / 2);align-self:start;justify-self:center}

/* DNA */
.dna{max-width:var(--maxw);margin:0 auto;padding:var(--section) var(--gutter)}
.dna-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,6vw,96px);align-items:center}
.dna-main .lead{max-width:44ch}
.try{margin:clamp(28px,3.5vw,40px) 0 12px;font:600 14.5px var(--text);color:var(--ink2)}
.asks{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.asks button{min-height:44px;font:600 15.5px/1.3 var(--text);color:var(--ink);background:var(--surface);border:0;box-shadow:inset 0 0 0 1.5px var(--line);padding:11px 17px;border-radius:999px;cursor:pointer;text-align:left;text-wrap:balance;transition:background .2s,color .2s,box-shadow .2s}
.asks button:hover{box-shadow:inset 0 0 0 1.5px var(--ink3)}
.asks button[aria-checked="true"]{background:var(--ink);color:var(--ground);box-shadow:none}
/* The map: 22 chromosomes and X at their real lengths, numbers on one line above, markers at their real positions. */
.karyo{--k0:#EAE1D4;--k1:#DCCFBE;--k2:#C3B29E;--mkc:#437C58;--bw:clamp(7px,1.15vw,15px);position:relative;display:flex;height:clamp(150px,18vw,230px);margin:clamp(52px,6vw,68px) 0 30px}
.chr{position:relative;flex:1 1 0;height:100%}
.chr .cb{position:absolute;top:0;left:50%;width:var(--bw);margin-left:calc(var(--bw) / -2);height:calc(var(--len) * .97%);border-radius:999px;background:var(--bands),var(--k0);box-shadow:inset 0 0 0 1px rgba(43,34,28,.05)}
.chr .cb::before,.chr .cb::after{content:"";position:absolute;top:var(--cen);width:calc(var(--bw) * .42);height:calc(var(--bw) * .55);margin-top:calc(var(--bw) * -.275);border-radius:50%;background:var(--ground)}
.chr .cb::before{left:calc(var(--bw) * -.2)}
.chr .cb::after{right:calc(var(--bw) * -.2)}
.chr b{position:absolute;left:0;right:0;bottom:calc(100% + 9px);text-align:center;font:600 11.5px/1 var(--text);color:var(--ink3)}
.mk{position:absolute;z-index:2;left:50%;top:var(--y);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 2px var(--mkc);transition:background .25s,opacity .25s}
.mk::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--mkc);opacity:0}
.mk em{position:absolute;left:calc(100% + 9px);top:50%;transform:translate(-4px,-50%);font:700 12.5px/1 var(--text);font-style:normal;color:var(--ground);background:var(--ink);padding:6px 9px;border-radius:999px;white-space:nowrap;opacity:0;box-shadow:0 0 0 3px var(--ground);transition:opacity .25s,transform .25s;pointer-events:none}
.chr:nth-child(n+18) .mk em{left:auto;right:calc(100% + 9px);transform:translate(4px,-50%)}
.karyo[data-topic] .mk{opacity:.5}
.karyo[data-topic="statins"] .mk.statins,.karyo[data-topic="drinks"] .mk.drinks,.karyo[data-topic="file"] .mk.file{z-index:5;opacity:1;background:var(--mkc)}
.karyo[data-topic="statins"] .mk.statins em,.karyo[data-topic="drinks"] .mk.drinks em,.karyo[data-topic="file"] .mk.file em{opacity:1;transform:translate(0,-50%)}
.karyo[data-topic="statins"] .mk.statins::after,.karyo[data-topic="drinks"] .mk.drinks::after,.karyo[data-topic="file"] .mk.file::after{animation:halo 1.8s ease-out infinite}
@keyframes halo{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.6);opacity:0}}
/* First view: a hairline reads across the file, lighting each marker as it passes. */
.karyo::before{content:"";position:absolute;z-index:6;top:-4px;bottom:-4px;left:0;width:2px;border-radius:1px;background:var(--mkc);opacity:0;pointer-events:none}
.karyo.reading::before{animation:sweep 1.3s cubic-bezier(.45,0,.3,1) forwards}
.karyo.reading .mk{animation:ping .55s ease-out both;animation-delay:calc(var(--ci) / 23 * 1.2s)}
@keyframes sweep{0%{left:0;opacity:0}8%,90%{opacity:.85}100%{left:100%;opacity:0}}
@keyframes ping{0%{background:var(--surface)}35%{background:var(--mkc);transform:scale(1.4)}100%{background:var(--surface);transform:none}}
.karyo-cap{font:500 16.5px/1.5 var(--text);color:var(--ink2);margin:0;min-height:4.5em;max-width:54ch}
.karyo-cap b{color:var(--ink)}
.dna-phone .phone{--pw:min(clamp(250px,24vw,310px),calc((100vh - 120px) / 2.16))}
.dna-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,4vw,56px);margin-top:clamp(56px,7vw,96px)}
.dna-points > div{border-top:1px solid var(--line);padding-top:20px}
.dna-points p{margin:0;color:var(--ink2);font-size:16.5px}
.fine{margin:28px 0 0;font-size:14px;color:var(--ink2);max-width:80ch}

/* Private: the brand's moss field with the cream pebble. Heading and points share one left edge. */
.private{background:var(--field);color:var(--on-field)}
.private-in{max-width:var(--maxw);margin:0 auto;padding:var(--section) var(--gutter)}
.private-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,72px);align-items:center}
.private h2,.private .lead,.private h3,.private p{color:var(--on-field)}
.private .lead{max-width:40ch}
.pebble.cream{--ps:clamp(110px,15vw,190px);width:var(--ps);height:var(--ps);margin-right:clamp(0px,4vw,56px);background:radial-gradient(farthest-corner at 32% 28%,#fff 0%,#FFFCF7 58%,#DCCFBE 100%);box-shadow:0 14px 36px rgba(28,23,20,.16);animation:morph 9s ease-in-out infinite,breath 5s ease-in-out infinite}
.private-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,4vw,56px);margin-top:clamp(48px,6vw,80px)}
.private-points > div{border-top:1px solid rgba(255,252,247,.3);padding-top:20px}
.private-points p{margin:0;font-size:16.5px}
.on-field{display:inline-block;margin-top:40px;color:var(--on-field);font-weight:700;text-decoration-thickness:2px;text-decoration-color:rgba(255,252,247,.5);text-underline-offset:6px}
.on-field:hover{text-decoration-color:var(--on-field)}
.private :focus-visible{outline-color:var(--on-field)}

/* Family: the app's People row (handoff §3.2): each person a circle in their tint with their initial in deep; the
   selected person has a ring in their base colour; "Add" is a dashed circle. The pebble stays the agent's. */
.family{max-width:var(--maxw);margin:0 auto;padding:var(--section) var(--gutter) clamp(40px,5vw,64px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(36px,7vw,110px);align-items:center}
.people{--av:clamp(64px,7vw,92px);display:flex;gap:clamp(18px,2.6vw,32px);align-items:flex-start}
.person{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:14px;color:var(--ink2)}
.person b{font:600 16px var(--text);color:var(--ink2);margin-top:12px}
.person.on b{font-weight:700;color:var(--ink)}
.av{display:grid;place-items:center;width:var(--av);height:var(--av);border-radius:50%;font:700 calc(var(--av) * .4)/1 var(--display);letter-spacing:-.02em}
.moss .av{background:var(--moss-tint);color:var(--moss-deep)}
.plum .av{background:var(--plum-tint);color:var(--plum-deep)}
.sky .av{background:var(--sky-tint);color:var(--sky-deep)}
.person.on .av{box-shadow:0 0 0 4px var(--ground),0 0 0 7px #437C58}
.add-ring{position:relative;width:calc(var(--av) * .94);height:calc(var(--av) * .94);margin:calc(var(--av) * .03);border-radius:50%;border:2px dashed #CDBFAE}
.add-ring::before,.add-ring::after{content:"";position:absolute;left:50%;top:50%;width:30%;height:2px;border-radius:1px;background:var(--ink3);transform:translate(-50%,-50%)}
.add-ring::after{transform:translate(-50%,-50%) rotate(90deg)}
.family-copy .lead{max-width:40ch}

/* More: four quiet notes, each with its drawn object. */
.more-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) var(--section);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,6vw,96px)}
.more-in > div{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:20px;align-content:start;border-top:1px solid var(--line);padding:26px 0 30px}
.more-in > div > h3,.more-in > div > p{grid-column:2}
.mi{grid-row:1 / span 2;width:56px;height:56px}
.mi svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 6px rgba(43,34,28,.1))}
.more p{margin:0;color:var(--ink2);max-width:46ch;font-size:16.5px}

/* End */
.end{max-width:var(--maxw);margin:0 auto;padding:clamp(24px,3vw,48px) var(--gutter) var(--section);text-align:center}
.end-mark{display:block;margin:0 0 .26em;font:700 clamp(88px,15vw,210px)/.8 var(--display);letter-spacing:-.05em;color:var(--ink)}
.end-mark .pebble{--ps:.26em;width:.26em;height:.26em;margin-left:.08em;vertical-align:.03em;animation:morph 9s ease-in-out infinite,breath 5s ease-in-out infinite}
.end h2{margin-bottom:14px}
.end .lead{margin:0 auto;max-width:36ch}
.end .cta{justify-content:center}
.qr{display:flex;align-items:center;gap:12px;color:#2B221C}
.qr svg{width:76px;height:76px;padding:7px;background:#fff;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}
.qr span{max-width:13ch;font-size:14px;line-height:1.35;color:var(--ink2);text-align:left}

/* A floating button on phones, once the hero's button has scrolled away (handoff glass: floating controls only). */
.float-cta{position:fixed;z-index:60;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:14px;padding:6px 6px 6px 18px;border-radius:999px;background:color-mix(in srgb,var(--surface) 80%,transparent);-webkit-backdrop-filter:saturate(1.5) blur(19px);backdrop-filter:saturate(1.5) blur(19px);box-shadow:inset 1px 1px 0 rgba(255,255,255,.9),0 0 0 .5px rgba(43,34,28,.08),0 10px 30px rgba(43,34,28,.12);transform:translate(-50%,calc(100% + 40px));visibility:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),visibility 0s .4s}
.float-cta.show{transform:translate(-50%,0);visibility:visible;transition:transform .4s cubic-bezier(.2,.8,.2,1),visibility 0s}
.float-mark{font:700 22px/.8 var(--display);letter-spacing:-.05em;color:var(--ink);white-space:nowrap}
.float-mark .pebble{width:.26em;height:.26em;margin-left:.08em;vertical-align:.03em;box-shadow:none}
.float-cta a{display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:999px;background:var(--ink);color:var(--ground);font:700 15px var(--text);text-decoration:none;white-space:nowrap}
@media (min-width:901px){.float-cta{display:none}}

/* Footer */
.foot{border-top:1px solid var(--line)}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:32px var(--gutter) 48px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 48px;color:var(--ink2);font-size:14.5px}
.not-doctor{margin:0;max-width:64ch}
.not-doctor b{color:var(--ink)}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 22px;align-content:flex-start;justify-content:flex-end}
.foot-nav a{color:var(--ink2)}
.copy{grid-column:1 / -1;margin:6px 0 0;font-size:13px}

/* Narrow screens */
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);padding-top:clamp(32px,6vw,48px)}
  .stage-wrap{justify-self:stretch;max-width:520px;margin:0 auto}
  .stage{width:40em;height:68.6em;font-size:calc(100cqw / 40)}
  .hero-phone{left:9em;top:10.6em;--pw:22em}
  .obj{--r:0deg;height:9.6em;justify-content:flex-end}
  .tag{font-size:1.02em}
  .tube{--x:2.3em;--y:0;--s:6.4em}
  .scan{--x:11.8em;--y:0;--s:6.4em}
  .smartring{--x:21.6em;--y:0;--s:6.8em}
  .watch{--x:31.3em;--y:0;--s:6.4em}
  .notes{--x:2.8em;--y:58.6em;--s:6.4em}
  .helix{--x:12.2em;--y:58.6em;--s:5.6em}
  .bowl{--x:20.6em;--y:58.6em;--s:7.6em}
  .pills{--x:31.4em;--y:58.6em;--s:6.4em}
  .story{display:block}
  .story-phone{display:none}
  .steps{flex-direction:row;align-items:stretch;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:22px calc(var(--gutter) * -1) -26px;padding:8px var(--gutter) 40px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .steps::-webkit-scrollbar{display:none}
  /* Each question is its own card, with the phone rising out of its bottom edge. */
  .step,.step:first-child{flex:0 0 min(310px,84vw);min-height:0;padding:20px 18px 0;opacity:1;justify-content:flex-start;scroll-snap-align:center;background:var(--surface);border-radius:28px;overflow:hidden;box-shadow:var(--card-shadow)}
  .bubble{font-size:21px;max-width:none}
  .answer{font-size:16px;gap:12px;margin-bottom:20px}
  .answer .pebble{--ps:22px;width:22px;height:22px}
  .step-phone{display:block;--pw:min(236px,62vw,calc((100svh - 300px) / 1.7));margin:auto auto calc(var(--pw) * -.5)}
  .step-phone .media{opacity:1;transform:none}
  .dots{display:flex;justify-content:center;gap:2px;margin-top:4px}
  .dot{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer}
  .dot::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--band);transition:width .3s ease,background .3s ease}
  .dot.on::before{width:20px;background:var(--ink)}
  /* DNA on narrow screens: the map and what it says, then the questions, then the phone right below them. */
  .dna-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .dna-main{display:contents}
  .dna-main h2{order:1}
  .dna-main .lead{order:2}
  .karyo{order:3}
  .karyo-cap{order:4;min-height:0}
  .try{order:5;margin-top:28px}
  .asks{order:6}
  .dna-phone{order:7;justify-self:center;margin-top:28px}
  .dna-phone .phone{--pw:min(270px,70vw)}
  .dna-points,.private-points{grid-template-columns:minmax(0,1fr)}
  .dna-points > div,.private-points > div{padding:18px 0 22px}
  .family{grid-template-columns:minmax(0,1fr)}
  .more-in{grid-template-columns:minmax(0,1fr)}
  .foot-in{grid-template-columns:minmax(0,1fr)}
  .foot-nav{justify-content:flex-start}
  .qr{display:none!important}
}
@media (max-width:760px){
  .bar-nav{display:none}
  .bar .wordmark{font-size:26px}
  .private-head{align-items:start}
  .pebble.cream{--ps:72px;margin:6px 0 0}
  /* The map wraps to two rows of twelve, so numbers and names have room. */
  .karyo{flex-wrap:wrap;height:auto;row-gap:34px;margin-top:44px}
  .chr{flex:0 0 calc(100% / 12);height:clamp(104px,30vw,132px)}
  .chr:nth-child(n+18) .mk em{left:calc(100% + 9px);right:auto;transform:translate(-4px,-50%)}
  .chr:nth-child(n+8):nth-child(-n+12) .mk em,.chr:nth-child(n+20) .mk em{left:auto;right:calc(100% + 9px);transform:translate(4px,-50%)}
  .karyo[data-topic] .chr:nth-child(n+8):nth-child(-n+12) .mk em,.karyo[data-topic] .chr:nth-child(n+20) .mk em{transform:translate(0,-50%)}
  .karyo.reading .mk{animation-delay:calc(var(--cm) / 12 * 1.2s)}
  .mk em{font-size:11px;padding:5px 7px}
  .more-in > div{grid-template-columns:48px minmax(0,1fr);column-gap:16px}
  .mi{width:48px;height:48px}
  .foot-nav a{padding:11px 0}
}

@media (prefers-reduced-motion:reduce){
  .pebble,.hero h1 .pebble,.pebble.cream,.end-mark .pebble,.step.heard .answer .pebble{animation:none}
  .js .stage:not(.go) .obj,.js .stage:not(.go) .hero-phone,.stage.go .obj,.stage.go .obj .tag,.stage.go .hero-phone{opacity:1;animation:none}
  .step,.screen .media,.shot-alt,.asks button,.mk,.mk em,.dot::before,.tag,.float-cta{transition:none}
  .js .bubble .w{color:var(--ink)}
  .js .step .answer > span:last-child{opacity:1}
  .karyo .mk::after,.karyo.reading::before,.karyo.reading .mk{animation:none!important}
}

/* Dark: a darker chromosome map, the night moss for markers, dark tints for people, a faint edge so the phone doesn't
   sink into the page, and a quieter glass highlight. */
@media (prefers-color-scheme:dark){
  .karyo{--k0:#3A322B;--k1:#4A4038;--k2:#5E5249;--mkc:#7FBF95}
  .phone{outline:1px solid rgba(255,252,247,.14);outline-offset:-1px}
  .plum .av{background:#3A2633;color:#E2B6D1}
  .sky .av{background:#1F2C3B;color:#B4D0EE}
  .person.on .av{box-shadow:0 0 0 4px var(--ground),0 0 0 7px #7FBF95}
  .float-cta{box-shadow:inset 1px 1px 0 rgba(255,255,255,.08),0 0 0 .5px rgba(255,255,255,.1),0 10px 30px rgba(0,0,0,.4)}
}