/* Webb Labs, "Set up Grok Bot" mock v3. Same system as mock v1 / v2: one family, black and white, one accent, air. v2 added video slots, the bot-family legend, the pre-order button state and the film lightbox. v3 (Kaleb's Oct 9 notes): the buy block is button + orange guarantee line only, phone crops, swipeable line-up, apps row, poster-style clip slots, sticky bar. */
:root{
  --bg:#ffffff; --bg2:#f5f5f7; --ink:#1d1d1f; --muted:#6e6e73; --line:#d2d2d7; --accent:#ff4d00;
  --disp:'Inter Tight',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif; --body:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  --max:1120px; --r:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.47;-webkit-font-smoothing:antialiased;letter-spacing:-.01em;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--disp);font-weight:600;letter-spacing:-.04em;line-height:1.04;color:var(--ink)}
h1{font-size:clamp(44px,7.2vw,88px);font-weight:700;letter-spacing:-.045em}
h2{font-size:clamp(34px,5vw,64px)}
h3{font-size:clamp(21px,2.2vw,28px);letter-spacing:-.025em}
.dim{color:var(--muted)}
.lead{font-size:clamp(19px,2vw,24px);line-height:1.35;color:var(--ink);max-width:36ch;margin-top:18px;letter-spacing:-.02em}
.muted{color:var(--muted)}
.fine{font-size:13px;color:var(--muted);margin-top:14px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
.sec{padding:clamp(72px,10vw,140px) 0}
.sec-gray{background:var(--bg2)}
.mock-tag{position:fixed;left:14px;bottom:14px;z-index:100;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--ink);padding:6px 10px;border-radius:6px;opacity:.85}
.todo{color:var(--accent);font-style:normal;font-weight:500}

/* buttons: solid, flat, nothing else */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:-.01em;color:#fff;background:var(--ink);border-radius:980px;padding:14px 26px;line-height:1;transition:opacity .15s ease;white-space:nowrap}
.btn:hover{opacity:.85}
.btn-sm{font-size:14px;padding:9px 16px}
.btn-buy{background:var(--accent)}
.btn.wide{width:100%;padding:17px}
.link{font-family:var(--disp);font-weight:500;font-size:17px;color:var(--accent);letter-spacing:-.01em}
.link span{margin-left:2px}
.link:hover{text-decoration:underline;text-underline-offset:4px}
.actions{display:flex;align-items:center;gap:26px;margin-top:30px}
.actions.center{justify-content:center}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08)}
.nav-in{max-width:var(--max);margin:0 auto;padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:-.02em}
.brand img{width:26px;height:26px}

/* hero */
.hero{padding:clamp(64px,9vw,120px) 24px 0;text-align:center}
.hero-copy{max-width:900px;margin:0 auto}
.sub{font-size:clamp(20px,2.4vw,28px);line-height:1.3;color:var(--muted);margin-top:22px;letter-spacing:-.02em}
.hero .actions{justify-content:center}
.hero .sub{max-width:30ch;margin-left:auto;margin-right:auto}
.hero-media{position:relative;max-width:1280px;margin:clamp(44px,6vw,80px) auto 0;border-radius:var(--r);overflow:hidden;background:var(--bg2);aspect-ratio:16/9}
.hero-media img{width:100%;height:100%;object-fit:cover}
.play{white-space:nowrap;position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:600;font-size:15px;color:var(--ink);background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border:0;border-radius:980px;padding:12px 20px 12px 14px;cursor:pointer}
.play{padding:8px 18px 8px 8px}
.hero-media .play img.play-face{width:40px;height:40px;border-radius:50%;object-fit:cover;display:block;object-position:50% 40%}

/* proof gallery: the real Shorts, as slots until the clips are placed */
.gallery{max-width:1280px;margin:56px auto 0;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery figure img{aspect-ratio:16/10;object-fit:cover;border-radius:var(--r);background:var(--bg2)}
.gallery .clip{aspect-ratio:16/10;border-radius:var(--r);background:var(--bg2);border:1px solid var(--line);display:grid;place-items:center;text-align:center;padding:24px;font-size:13px;font-weight:600;color:var(--muted);line-height:1.4}
.gallery .clip small{display:block;font-weight:500;margin-top:6px}
.gallery figcaption{font-size:14px;color:var(--muted);margin-top:12px;line-height:1.4}
.gallery figcaption b{color:var(--ink);font-weight:600}

/* pinned story */
.story{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;margin-top:64px;align-items:start}
.story-steps{display:grid;gap:clamp(56px,10vh,120px);padding:12vh 0}
.step{opacity:.28;transition:opacity .4s ease}
.step.on{opacity:1}
.step .n{display:inline-block;font-family:var(--disp);font-weight:600;font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:980px;padding:4px 10px;margin-bottom:14px}
.step p{margin-top:10px;color:var(--muted);font-size:17px;max-width:42ch}
.story-media{position:sticky;top:96px;display:grid;gap:16px}
.story-media .frame[hidden]{display:none}
.frame{border-radius:var(--r);overflow:hidden;background:var(--bg2);aspect-ratio:16/10}
.frame img{width:100%;height:100%;object-fit:cover}

/* teammate (the "mission" section of v3) */
.banner{margin:56px auto 0;border-radius:var(--r);overflow:hidden;aspect-ratio:21/9;background:var(--bg2)}
.banner img{width:100%;height:100%;object-fit:cover}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:64px}
.cols p{margin-top:10px;color:var(--muted)}

/* offer */
.offer{display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:start}
.specs{list-style:none;margin-top:36px;border-top:1px solid var(--line)}
.specs li{display:grid;grid-template-columns:1fr 1.5fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--line)}
.specs b{font-family:var(--disp);font-weight:600;font-size:18px;letter-spacing:-.02em}
.specs span{color:var(--muted);font-size:16px}
.price{background:#fff;border-radius:var(--r);padding:36px;position:sticky;top:88px}
.amount{font-family:var(--disp);font-weight:700;font-size:72px;letter-spacing:-.05em;line-height:1}
.price .muted{margin:8px 0 22px}
.plain{list-style:none;margin-top:22px;display:grid;gap:10px;font-size:14px;color:var(--muted)}
.plain a{color:var(--accent)}

/* this week: rail + detail (the grade rail of v3, re-pointed at dated updates) */
.rail-wrap{margin-top:48px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scroll-padding-left:max(24px,calc((100vw - var(--max)) / 2 + 24px))}
.rail-wrap::-webkit-scrollbar{display:none}
.rail{display:flex;gap:14px;padding:4px max(24px,calc((100vw - var(--max)) / 2 + 24px)) 12px}
.card{flex:0 0 240px;scroll-snap-align:start;border-radius:var(--r);background:var(--bg2);padding:18px;cursor:pointer;border:2px solid transparent;transition:border-color .15s ease, transform .15s ease;text-align:left;font-family:var(--body);color:var(--ink)}
.card:hover{transform:translateY(-2px)}
.card.on{border-color:var(--ink);background:#fff}
.card .g{font-family:var(--disp);font-weight:600;font-size:13px;color:var(--muted)}
.card .t{font-family:var(--disp);font-weight:600;font-size:18px;letter-spacing:-.02em;margin-top:6px;line-height:1.15}
.card .s{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.4}
.card .st{display:inline-block;font-size:11.5px;font-weight:600;margin-top:12px;color:var(--muted)}
.detail{margin-top:28px;border-radius:var(--r);background:var(--bg2);overflow:hidden}
.dt{display:grid;grid-template-columns:.9fr 1.1fr;animation:dt .4s ease}
@keyframes dt{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dt-art{min-height:380px;position:relative}
.dt-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dt-body{padding:40px;display:grid;gap:22px;align-content:start}
.dt-kicker{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.dt-body h3{font-size:clamp(28px,3vw,40px);letter-spacing:-.035em}
.dt-quote{font-size:18px;line-height:1.45;color:var(--ink);border-left:2px solid var(--line);padding-left:18px}
.dt-quote small{display:block;font-size:13px;color:var(--muted);margin-top:8px}
.dt-quote a{color:var(--accent)}
.dt-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.dt-grid h4{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.dt-grid p{font-size:15px;color:var(--ink)}
.dt-meta{font-size:13px;color:var(--muted)}
#week .fine{margin-top:22px}

/* about */
.about{display:grid;grid-template-columns:200px 1fr;gap:48px;align-items:center}
.about img{width:200px;height:200px;object-fit:cover;border-radius:50%}

/* faq */
details{border-bottom:1px solid var(--line);padding:22px 0}
.narrow h2{margin-bottom:24px}
summary{cursor:pointer;font-family:var(--disp);font-weight:600;font-size:21px;letter-spacing:-.025em;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px}
summary::after{content:"+";font-weight:400;font-size:26px;color:var(--muted)}
details[open] summary::after{content:"–"}
details p{margin-top:12px;color:var(--muted);max-width:60ch}

/* final */
.final{text-align:center;padding-top:clamp(96px,14vw,180px);padding-bottom:clamp(96px,14vw,180px)}
.final h2{font-size:clamp(38px,6vw,80px)}

footer{border-top:1px solid var(--line);padding:40px 0 110px}
.foot{display:grid;gap:14px;font-size:12.5px;color:var(--muted)}
.foot a{color:var(--muted)}
.foot .brand{color:var(--ink)}

/* sticky mobile buy */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;align-items:center;justify-content:space-between;gap:12px;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:10px 16px 14px;transform:translateY(110%);transition:transform .3s ease}
.sticky.show{transform:none}
.sticky div{display:flex;flex-direction:column;line-height:1.2}
.sticky b{font-family:var(--disp);font-weight:600;font-size:15px}
.sticky span{font-size:12.5px;color:var(--muted)}
.sticky .btn{padding:12px 26px;font-size:15px;width:auto}
.sticky b,.sticky span{white-space:nowrap}

@media (max-width:980px){
  .gallery{grid-template-columns:1fr 1fr}
  .story{grid-template-columns:1fr;gap:24px}
  .story-media{position:static;order:-1}
  .story-steps{padding:0;gap:40px}
  .step{opacity:1}
  .cols{grid-template-columns:1fr;gap:28px}
  .offer{grid-template-columns:1fr}
  .price{position:static}
  .dt{grid-template-columns:1fr}
  .dt-art{min-height:240px}
  .about{grid-template-columns:1fr;text-align:left}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero{padding-top:44px}
  h1{font-size:clamp(38px,11.5vw,52px)}
  .sub{font-size:19px}
  .actions{flex-direction:column;gap:16px;margin-top:24px}
  .btn-buy{width:100%;padding:16px}
  .hero-media{border-radius:12px;aspect-ratio:4/5}
  .play{font-size:14px;bottom:16px}
  .gallery{grid-template-columns:1fr}
  .specs li{grid-template-columns:1fr;gap:6px}
  .dt-body{padding:24px 20px}
  .dt-grid{grid-template-columns:1fr}
  .card{flex-basis:200px}
  .nav .btn{display:none}
  .sticky{display:flex}
  .mock-tag{bottom:84px}
  footer{padding-bottom:130px}
}
@media (prefers-reduced-motion:reduce){.frame img{transition:none}}

/* v2: video slots. The image is always there; a clip fades in over it when the file exists and can play. */
.vslot{position:relative;overflow:hidden}
.vslot>img,.vslot>picture>img{width:100%;height:100%;object-fit:cover;display:block}
.vslot>picture{display:block;width:100%;height:100%}
.vslot-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease;pointer-events:none}
.vslot.has-video .vslot-video{opacity:1}
.hero-media.vslot .play{z-index:2}
.gallery .clip.vslot{display:grid;place-items:center}
.gallery .clip.vslot>span{display:block}
.gallery .clip.vslot.has-video>span{display:none}
.vslot-tall{aspect-ratio:9/16}
.gallery .clip.vslot-tall{aspect-ratio:9/16}

/* v2: the bot family legend under the line-up */
.legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-size:14px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.sw{width:14px;height:14px;border-radius:5px;display:inline-block}
.sw-black{background:#151515;border-radius:50%}.sw-orange{background:#ff7a1a}.sw-teal{background:#19c3c3;border-radius:50%}.sw-violet{background:#7c4dff;border-radius:4px}.sw-green{background:#2bb24c}.sw-pink{background:#ff4fa3;border-radius:7px 7px 4px 4px}.sw-blue{background:#2f7bff;border-radius:3px 3px 7px 7px}.sw-amber{background:#f5a623;border-radius:50% 50% 50% 50%/60% 60% 40% 40%}
#team .fine{margin-top:12px}

/* v2: pre-order state */
.btn-pre{flex-wrap:wrap}
.btn-pre small{font-family:var(--body);font-weight:500;font-size:12px;opacity:.85;margin-left:8px;letter-spacing:0}
.preorder-note{font-size:14px;color:var(--ink);margin-top:14px;line-height:1.4}
.preorder-note b{font-weight:600}
.preorder-note[hidden]{display:none}
details[hidden]{display:none}

/* v2: the film lightbox */
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.86);display:grid;place-items:center;padding:24px}
.lightbox[hidden]{display:none}
.lb-body{width:min(960px,100%);aspect-ratio:16/9;background:#000;border-radius:var(--r);overflow:hidden;position:relative;display:grid;place-items:center}
.lb-body video{width:100%;height:100%;object-fit:contain;display:none}
.lightbox.has-film .lb-body video{display:block}
.lb-note{color:#fff;font-size:15px;font-weight:500;text-align:center;padding:24px}
.lightbox.has-film .lb-note{display:none}
.lb-close{position:absolute;top:18px;right:22px;background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer}

@media (max-width:980px){
  .story-media{position:static;order:-1;display:none}      /* phones: each step gets its own picture below, see .step-media */
  .story-steps .step{display:grid;gap:12px}
  .gallery .clip.vslot-tall{aspect-ratio:9/16;max-width:320px;margin:0 auto}
}
@media (max-width:640px){
  .btn-pre small{flex-basis:100%;margin:6px 0 0}
  .legend{gap:8px 16px;font-size:13px}
}
.step .frame{margin-top:18px;aspect-ratio:16/10}
.step .frame.vslot>img{aspect-ratio:auto}
.step .n{justify-self:start}
@media (max-width:980px){
  /* the three Shorts: a swipeable rail of phone-shaped cards, not three full screens */
  .gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:0 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .gallery::-webkit-scrollbar{display:none}
  .gallery figure{flex:0 0 58vw;max-width:260px;scroll-snap-align:start}
  .gallery .clip.vslot-tall{max-width:none;margin:0}
}
/* v3: the buy block = the button + the orange guarantee line, nothing else (Kaleb, Oct 9). Flat orange text, never a glow. */
.buy-block{display:flex;flex-direction:column;align-items:center;gap:12px}
.hero .buy-block{margin-top:30px}
.price .buy-block{align-items:stretch;text-align:center}
.guar{font-family:var(--disp);font-weight:500;font-size:14px;letter-spacing:-.01em;color:var(--accent);line-height:1.2}
.sticky .guar{font-size:12.5px;font-weight:600;color:var(--accent)}

/* v3 crops (Kareem PAGE-NOTES-v2): hood keeps the floating bots' heads on desktop; step 1 keeps the whole phone; phones get 4:5 banners, the line-up edge to edge at 16:9, the hero window at 17% so the phone and the black bot are in frame. */
.banner.hood img{object-position:50% 30%}
#m1 img{object-position:50% 33%}
.final-media{margin:0 auto clamp(36px,5vw,56px);max-width:960px;border-radius:var(--r);overflow:hidden;background:var(--bg2);aspect-ratio:16/9}
.final-media img{width:100%;height:100%;object-fit:cover}

/* v3: the apps row under the hood */
.apps{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.apps span{display:inline-flex;align-items:baseline;gap:10px;font-size:14px;color:var(--muted);background:var(--bg2);border-radius:980px;padding:9px 14px;line-height:1.3}
.apps i{font-style:normal}
.apps b{color:var(--ink);font-weight:600}
.apps small{font-size:11.5px;color:var(--muted);white-space:nowrap}
#hood .fine{margin-top:12px}

/* v3: the three clip slots read as posters, not empty boxes, until the real Shorts drop in */
.gallery .clip{background:var(--ink);border:0;color:#fff;align-content:end;justify-items:start;text-align:left;padding:20px;position:relative}
.gallery .clip>span{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:-.02em;color:#fff;line-height:1.25}
.gallery .clip>span small{font-weight:500;font-size:12px;color:rgba(255,255,255,.65);margin-top:6px}
.gallery .clip::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#2c2c2e 0%,#1d1d1f 60%,#141416 100%)}
.gallery .clip::after{content:"";position:absolute;left:50%;top:42%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);-webkit-mask:none}
.gallery .clip>span{position:relative;z-index:1}
.gallery .clip.has-video::before,.gallery .clip.has-video::after{display:none}
.gallery .clip .tri{position:absolute;left:50%;top:42%;z-index:1;width:0;height:0;margin:-9px 0 0 -6px;border-left:16px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
.gallery .clip.has-video .tri{display:none}

@media (max-width:640px){
  .sub{font-size:18px;max-width:22ch;margin-left:auto;margin-right:auto}
  .hero .buy-block{margin-top:26px;gap:10px}
  .hero-media{margin-top:36px}
  .hero-media img.hero-img,.hero-media .vslot-video{object-position:17% 50%}
  .play{font-size:14px;bottom:14px;padding:6px 14px 6px 6px;gap:8px}
  .hero-media .play img.play-face{width:34px;height:34px}
  .banner{margin-top:32px;aspect-ratio:4/5}
  .banner.lineup{aspect-ratio:4/5;margin-left:-24px;margin-right:-24px;border-radius:0}   /* lineup-4x5.jpg (Kareem P2) via <picture>; the 16:9 file stays for desktop */
  .banner.lineup img{object-position:50% 50%}
  .banner.jobs img{object-position:50% 50%}
  .banner.hood img{object-position:40% 50%}
  .final-media{aspect-ratio:4/5;border-radius:12px}
  .final-media img{object-position:50% 50%}
  .dt-art{min-height:0;aspect-ratio:16/10}
  .apps{gap:8px}
  .apps span{display:grid;grid-template-columns:1fr auto;width:100%;font-size:14px;padding:11px 14px;border-radius:12px}
  .price{padding:28px 22px}
  .amount{font-size:64px}
  .sticky{padding:10px 20px 14px}
  .sticky .btn{padding:12px 20px}
  .final .fine{margin-top:10px}
}
@media (max-width:980px){
  #m3{display:none}   /* phones: the hood picture lands once, big, in the hood section (Kareem fix 4) */
}

/* ===== v4 (Kaleb, Oct 9 15:30) ===== */
/* The orbit: our drawn Grok Bot orb on top (near-black satin sphere, two white tilted pill eyes, the same construction as the animator's rig), the real app marks circling underneath on white edge-lit tiles. Drawn in CSS, moved in page.js. */
.orbit{position:relative;width:100%;max-width:960px;margin:40px auto 0;aspect-ratio:2/1;user-select:none;--orb:150px;--tile:92px}
.orbit-track{position:absolute;left:50%;top:66%;width:76%;height:40%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(0,0,0,.07);background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.035) 0%, rgba(0,0,0,.015) 55%, rgba(0,0,0,0) 72%)}
.orbit .orb{position:absolute;left:50%;top:30%;width:var(--orb);height:var(--orb);transform:translate(-50%,-50%);border-radius:50%;z-index:50;
  background:radial-gradient(circle at 34% 28%, #45454a 0%, #232326 30%, #151517 62%, #0d0d0f 100%);
  box-shadow:0 22px 44px rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.12), inset 0 -14px 30px rgba(0,0,0,.55), inset 0 3px 8px rgba(255,255,255,.07)}
.orbit .orb::after{content:"";position:absolute;left:24%;top:12%;width:30%;height:16%;border-radius:50%;background:radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.22), rgba(255,255,255,0) 70%)}
.orbit .eye{position:absolute;width:9.4%;height:20%;background:#fff;border-radius:999px}
.orbit .eye.l{left:32.5%;top:36.5%;transform:rotate(-9deg)}
.orbit .eye.r{left:58.5%;top:31.8%;transform:rotate(-13deg)}
.orbit .tile{position:absolute;left:0;top:0;width:var(--tile);height:var(--tile);margin:0;border-radius:24%;background:#fff;border:1px solid rgba(0,0,0,.06);display:grid;place-items:center;will-change:transform,opacity;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 10px 26px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.05)}
.orbit .tile img,.orbit .tile svg{width:60%;height:60%;object-fit:contain;display:block;color-scheme:light}
.orbit .tile img.app{width:76%;height:76%;border-radius:20%}
.orbit-cap{text-align:center;font-size:14px;color:var(--muted);margin-top:14px;max-width:46ch;margin-left:auto;margin-right:auto;line-height:1.4}
.lead-2{margin-top:40px}
.src-quote{margin-top:22px;max-width:60ch;font-size:16px;line-height:1.45;color:var(--ink);border-left:2px solid var(--line);padding-left:18px}
.src-quote small{display:block;font-size:13px;color:var(--muted);margin-top:8px}
.src-quote a{color:var(--accent)}
#hood .banner{margin-top:48px}
.foot .xai{font-size:11px;color:var(--muted);opacity:.8}
@media (max-width:640px){
  .orbit{aspect-ratio:1/1.06;margin-top:28px;--orb:116px;--tile:78px}
  .orbit-track{top:66%;width:92%;height:34%}
  .orbit .orb{top:27%}
  .orbit-cap{font-size:13px}
  .lead-2{margin-top:32px}
  .src-quote{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.orbit .tile{transition:none}}