/* AgentPrime, the public page. One continuous document: almost-black at the top, where the face and the phone
   live behind the words, and paper at the end, where one number gets you in. The scene (public/home/scene) owns
   the canvas, the haze and the vignette; this sheet owns the chrome, the type, the controls and the card.
   Serif for the three statements, one sans for everything else; blue only as light on glass, never as paint. */
:root{
  --clear:#05070d;--paper:#f5f7fb;--paper-2:#ffffff;--ink:#0c0d12;--ink-2:#4a4f5c;--muted:#80858f;--ambient:#e8edf7;
  --fg:#eef2fb;--fg-2:rgba(214,223,243,.76);--fg-3:rgba(168,183,214,.58);
  --ice:#a9c8ff;--ice-2:#7ea4ff;--deep:#1a2b57;
  --line-d:rgba(150,180,240,.16);--line-d2:rgba(150,180,240,.3);
  --line:rgba(12,13,18,.08);--line-2:rgba(12,13,18,.15);
  --bad-d:#ffa08f;--bad:#c2410c;
  --font:"Instrument Sans",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --serif:"Instrument Serif","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --r1:12px;--r2:16px;--r3:24px;
  --ease:cubic-bezier(.2,.8,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --nav-h:64px;--foot-h:73px;
  /* how far the light has come over the dissolve (0 dark, 1 paper): the scene drives it per frame from its own eased
     progress so the DOM wash and the canvas agree; left alone (no JS, no WebGL) the wash is simply there */
  --dissolve:1;
}
*{box-sizing:border-box}
html{background:var(--clear);overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--clear);color:var(--fg);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;color-scheme:dark}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
:focus-visible{outline:2px solid rgba(169,200,255,.85);outline-offset:3px}
.light :focus-visible,.signup :focus-visible,.foot :focus-visible{outline-color:rgba(26,43,87,.6)}

/* ---- chrome: the name, Sign in, and one glass pill -------------------------------------------------------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:30;padding-top:env(safe-area-inset-top)}
.nav .wrap{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between}
/* Light text on the dark side holds its own: the name and Sign in are bright enough to read down to the band where ink
   takes over; once the chrome has crossed to ink, each glyph carries a soft paper halo of its own (nothing over the
   scene, no bar under the chrome) so the name and Sign in keep their contrast over the dissolve's mid-tones. */
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.015em;font-size:15.5px;color:var(--fg)}
.brandmark{width:24px;height:24px;border-radius:7px;flex:none;display:block}
.nav-actions{display:flex;align-items:center;gap:22px}
/* the chrome crosses from the dark into the paper by a crossfade, never a hard flip */
.nav .brand,.nav .signin{transition:color .4s var(--ease),text-shadow .4s var(--ease)}
.signin{font-weight:500;font-size:14px;color:rgba(238,242,251,.9)}
.signin:hover{color:var(--fg)}
/* liquid glass: translucent deep blue, lit along its top edge, a soft bloom beneath; hover brightens the edge */
.cta.glass{position:relative;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px 0 17px;border-radius:999px;color:#eaf1ff;font-weight:500;font-size:14px;letter-spacing:-.005em;isolation:isolate;
  background:linear-gradient(180deg,rgba(84,118,190,.34),rgba(28,44,92,.3));
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(205,224,255,.5),inset 0 -1px 0 rgba(40,70,150,.35),0 0 0 1px rgba(130,168,255,.28),0 10px 28px -14px rgba(90,140,255,.55);
  transition:box-shadow .18s var(--ease),background .18s var(--ease),color .4s var(--ease),transform .2s var(--ease)}
.cta.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;background:radial-gradient(70% 90% at 50% -10%,rgba(190,215,255,.32),transparent 70%);transition:background .18s var(--ease)}
.cta.glass svg{width:14px;height:14px;transition:transform .25s var(--ease)}
/* hover: the edge light comes up (the top highlight near white, the ring a step brighter), the fill a touch lighter; a visible answer, still glass */
.cta.glass:hover{background:linear-gradient(180deg,rgba(108,146,222,.5),rgba(40,60,118,.42));box-shadow:inset 0 1px 0 rgba(236,244,255,.95),inset 0 -1px 0 rgba(60,98,190,.45),0 0 0 1px rgba(176,204,255,.62),0 12px 32px -12px rgba(120,170,255,.8)}
.cta.glass:hover::before{background:radial-gradient(70% 90% at 50% -10%,rgba(205,226,255,.48),transparent 70%)}
.cta.glass:hover svg{transform:translateX(2px)}
.cta.glass:active{transform:scale(.98)}
/* over paper the same pill turns to deep blue on frosted white. Two ways to say "paper": the scene adds scene-light to
   <html> from the tone its canvas paints under the chrome, and home.js adds .light to the nav where the band under it
   crosses to pale (an IntersectionObserver on the dissolve and the signup). The shell's flip is the fallback only: it
   is styled while no scene is ready, without WebGL (scene-static) or without the phone scene to key the tone, so the live
   page's ink never arrives on mid-blue ahead of the canvas. The two states are styled identically. */
:is(html:not([data-scene-ready="1"]) .nav.light,html.scene-static .nav.light,html:has(canvas#scene[data-phone="0"]) .nav.light,html.scene-light .nav) .brand,:is(html:not([data-scene-ready="1"]) .nav.light,html.scene-static .nav.light,html:has(canvas#scene[data-phone="0"]) .nav.light,html.scene-light .nav) .signin{color:var(--ink);text-shadow:0 0 1px var(--paper),0 0 2px var(--paper),0 0 5px var(--paper),0 0 10px rgba(245,247,251,.9),0 0 18px rgba(245,247,251,.7)}
:is(html:not([data-scene-ready="1"]) .nav.light,html.scene-static .nav.light,html:has(canvas#scene[data-phone="0"]) .nav.light,html.scene-light .nav) .signin:hover{color:var(--ink-2)}
:is(html:not([data-scene-ready="1"]) .nav.light,html.scene-static .nav.light,html:has(canvas#scene[data-phone="0"]) .nav.light,html.scene-light .nav) .cta.glass{color:var(--deep);background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(226,234,250,.6));box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(26,43,87,.08),0 0 0 1px rgba(26,43,87,.18),0 10px 28px -16px rgba(26,43,87,.35)}
:is(html:not([data-scene-ready="1"]) .nav.light,html.scene-static .nav.light,html:has(canvas#scene[data-phone="0"]) .nav.light,html.scene-light .nav) .cta.glass::before{background:radial-gradient(70% 90% at 50% -10%,rgba(255,255,255,.9),transparent 70%)}

/* ---- the hero: the face behind, the words and the control in front --------------------------------------- */
.hero{position:relative;height:240vh;background:var(--clear)}
/* no transform, filter or backdrop-filter here: the scene's fixed canvas must stay fixed to the viewport */
.hero-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
/* the scene's own elements, before scene.css places them: zero specificity, so the scene's sheet always wins */
:where(.hero-stage>.scene,.hero-stage>.scene-haze,.hero-stage>.scene-vignette){position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
:where(.hero-stage>.scene-haze){background:radial-gradient(60% 70% at 28% 45%,rgba(60,110,200,.12),transparent 70%)}
:where(.hero-stage>.scene-vignette){background:radial-gradient(120% 90% at 30% 50%,transparent 55%,var(--clear) 100%)}
.hero-grid{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:52fr 48fr;gap:24px;align-items:center}
/* the grid's padding is always written as the full shorthand at .wrap.hero-grid specificity, at every width, so no
   .wrap{padding:0 …} rule for a narrower screen can wipe the room under the nav (or, on phones, above the bottom edge) */
.wrap.hero-grid{padding:var(--nav-h) 40px 0}
/* the scene drives --copy-o on #hero-copy (1 at the top, 0 once the camera starts moving in); without it the words stay */
.copy{max-width:560px;justify-self:start;opacity:var(--copy-o,1);transform:translate3d(0,calc((1 - var(--copy-o,1)) * -24px),0);will-change:opacity,transform}
/* one line on every desktop: 80px is the largest the statement fits in its column at 1240 */
h1{font:400 clamp(56px,5.6vw,80px)/.98 var(--serif);letter-spacing:-.025em;margin:0 0 20px;color:#f4f7ff;white-space:nowrap}
.hero .sub{font-size:18.5px;line-height:1.45;color:var(--fg-2);margin:0 0 32px;letter-spacing:-.006em;text-wrap:pretty}
/* the sign-up control keeps the width the longer headline used to give the column (456px at 1440), so the number field never clips */
.copy .auth{width:456px;max-width:100%}
/* (the copy keeps the room the old text cue took under the control, so the words and the control stand where they always
   have: the column centres the copy, and the pill now lives at the stage's bottom instead) */
.copy{padding-bottom:43px}
/* "See it work": the hero's secondary action, a small pill of dark liquid glass at the stage's bottom centre (the number
   stays the primary action). Translucent navy over a soft blur, a thin lit blue edge, a faint highlight along the top
   and a restrained bloom; hover lifts the edge, the glow and the highlight over 200 ms and nothing moves. It follows the
   copy's fade (--cue-o, mirrored from #hero-copy's --copy-o by home.js) and, once clicked, hands itself to the dust
   canvas (.see-dust) and steps out (.gone) until the visitor is back at the hero. */
.see-cue{position:absolute;left:0;right:0;bottom:max(40px,calc(env(safe-area-inset-bottom) + 24px));z-index:3;margin:0 auto;width:160px;height:44px;
  display:flex;align-items:center;justify-content:center;padding:2px 0 0;border-radius:999px;isolation:isolate;-webkit-tap-highlight-color:transparent;
  font:500 14.5px/1 var(--font);letter-spacing:.005em;color:rgba(234,241,255,.94);text-decoration:none;white-space:nowrap;
  background:linear-gradient(180deg,rgba(30,48,96,.46),rgba(9,16,38,.56));
  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
  box-shadow:inset 0 1px 0 rgba(196,218,255,.2),inset 0 -1px 0 rgba(40,70,150,.22),0 0 0 1px rgba(122,164,255,.42),0 0 18px -4px rgba(90,140,255,.34);
  opacity:var(--cue-o,1);transition:box-shadow .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.see-cue::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:.7;
  background:radial-gradient(75% 110% at 50% -25%,rgba(176,206,255,.2),transparent 68%);transition:opacity .2s var(--ease)}
@media (hover:hover){
  .see-cue:hover{color:#f4f8ff;background:linear-gradient(180deg,rgba(38,60,118,.5),rgba(11,20,46,.58));
    box-shadow:inset 0 1px 0 rgba(214,230,255,.32),inset 0 -1px 0 rgba(50,84,170,.26),0 0 0 1px rgba(154,190,255,.66),0 0 24px -3px rgba(104,154,255,.5)}
  .see-cue:hover::before{opacity:1}
}
.see-cue:focus-visible{outline:2px solid rgba(169,200,255,.85);outline-offset:4px}
/* scrolled out with the copy: not clickable or tabbable while it cannot be seen */
.see-cue.faded{visibility:hidden}
/* clicked: the pill fades under its own particles in the first moments of the dissolve, then stays out of the way. Its
   entrance is over for good once it has been pressed (.seen), so coming back never replays the page-load fade-in */
.see-cue.gone{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s linear,visibility 0s linear .16s}
.see-cue.seen{animation:none}
/* back at the hero: it returns as it left, softly */
.see-cue.back{transition:opacity .45s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
/* the dissolve's particles: a small 2D canvas over the pill, only for the half second it runs */
.see-dust{position:absolute;z-index:4;pointer-events:none;display:block}
/* the section takes focus after the guided scroll (so the keyboard carries on from there); it is a landmark, not a control */
.see:focus,.see:focus-visible{outline:none}
.auth{position:relative;min-height:60px}
.pane{display:none}
.pane.on{display:block;animation:rise .34s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* the control: a capsule of dark glass, the country at its left, the number, and the pale-blue arrow at its end */
.control{display:flex;align-items:center;height:60px;padding:6px 6px 6px 0;border-radius:999px;color:var(--fg);
  background:rgba(10,16,32,.58);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(200,220,255,.16),0 0 0 1px var(--line-d2),0 24px 60px -34px rgba(90,140,255,.55);transition:box-shadow .2s}
.control:focus-within{box-shadow:inset 0 1px 0 rgba(200,220,255,.2),0 0 0 1px rgba(169,200,255,.6),0 0 0 5px rgba(126,164,255,.14),0 24px 60px -34px rgba(90,140,255,.55)}
.cc{position:relative;display:flex;align-items:center;gap:7px;font-weight:500;white-space:nowrap;padding:0 13px 0 20px;height:100%;border-right:1px solid var(--line-d);cursor:pointer;font-size:15px;color:#dfe7fb}
.cc svg{width:12px;height:12px;color:var(--fg-3)}
.cc select{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.control input{flex:1;min-width:0;width:0;border:0;outline:0;background:transparent;font-size:16px;letter-spacing:-.005em;padding:0 16px;height:100%;color:#f4f7ff}
.control input::placeholder{color:rgba(190,204,236,.5)}
.go{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;height:48px;min-width:48px;padding:0 16px;font-weight:600;font-size:14.5px;cursor:pointer;white-space:nowrap;flex:none;
  color:#0a1736;background:linear-gradient(180deg,#c2d6ff,#9fbcff);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 22px rgba(126,164,255,.35);transition:box-shadow .2s,transform .15s,opacity .15s,filter .2s}
.control .go{padding:0;width:48px}
.go-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.go.wide .go-label{position:static;width:auto;height:auto;overflow:visible;clip:auto}
.go svg{width:17px;height:17px}
.go:hover{filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 0 30px rgba(126,164,255,.5)}
.go:active{transform:scale(.97)}
.go[disabled]{opacity:.55;cursor:default}
.go.wide{padding:0 20px 0 22px;height:50px}
.row{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.sep{width:3px;height:3px;border-radius:50%;background:var(--line-d2);flex:none}
.alt{border:0;background:none;padding:0;color:var(--fg-2);font-weight:500;font-size:14px;cursor:pointer;transition:color .15s}
.alt:hover{color:var(--fg)}
.alt[disabled]{color:var(--fg-3);cursor:default}
.note{margin:12px 0 0;font-size:14px;color:var(--fg-2);min-height:21px}
.note:empty{margin:0;min-height:0}
.note.bad{color:var(--bad-d)}
/* the other way in: a quiet "or", then Google, plainly second to the number */
.or{display:flex;align-items:center;gap:12px;margin:16px 0 12px;color:var(--fg-3);font-size:12px;line-height:1;letter-spacing:.04em}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line-d)}
.google{display:flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 16px;border-radius:999px;font-weight:500;font-size:15px;letter-spacing:-.005em;color:var(--fg);
  background:rgba(10,16,32,.5);box-shadow:0 0 0 1px var(--line-d2);transition:box-shadow .2s,transform .15s,background .2s}
.google:hover{background:rgba(16,24,44,.6);box-shadow:0 0 0 1px rgba(169,200,255,.5)}
.google:active{transform:scale(.995)}
.google .g{width:18px;height:18px;flex:none}
/* the code and the passkey offer, in whichever form sent the number */
.sent{margin:0 0 12px;font-size:15px;color:var(--fg-2)}
.sent b{color:var(--fg);font-weight:600;letter-spacing:.04em}
#pane-passkey .sent{font-size:17px;margin-bottom:4px}
#pane-passkey .sent b{letter-spacing:0}
.help{margin:0 0 16px;color:var(--fg-2);font-size:15px;line-height:1.45}
.code{display:flex;gap:8px;margin:0 0 16px}
.code input{width:46px;height:56px;text-align:center;font-size:22px;font-weight:600;border:0;border-radius:var(--r1);background:rgba(10,16,32,.58);box-shadow:0 0 0 1px var(--line-d2);outline:0;padding:0;color:#f4f7ff;transition:box-shadow .15s}
.code input::placeholder{color:rgba(190,204,236,.35);font-weight:500}
.code input:focus{box-shadow:0 0 0 1px rgba(169,200,255,.7),0 0 0 4px rgba(126,164,255,.14)}
.code input:focus::placeholder{color:transparent}
.code.bad input{box-shadow:0 0 0 1px var(--bad-d);animation:shake .4s var(--ease)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* ---- See it work: the phone the head's particles become, the conversation on it, the five capabilities on their orbits ----
   The section is 210vh: the camera settles and the words and the phone arrive over its first 100vh (the stage sliding
   in), then the stage is pinned for 110vh while the trails start to flow, the nodes light and the conversation plays;
   the finished conversation stays until the dissolve takes it. While the scene drives it (html.see-live, from
   phone.mjs) the whole layer is fixed to the viewport so the DOM phone sits exactly over the particle phone whatever
   the scroll, and the scene sets every opacity (on .see-fix: --see-copy, --see-phone, --see-scrim); without WebGL the
   layer is simply the stage, drawn in CSS and SVG. */
.see{position:relative;height:210vh;background:transparent}
.see-stage{position:sticky;top:0;height:100svh;overflow:hidden;z-index:2}
.see-fix{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden}
html.see-live:not(.scene-static):not(.see-failed) .see-fix{position:fixed;pointer-events:none;visibility:hidden}
html.see-live.see-on:not(.scene-static):not(.see-failed) .see-fix{visibility:visible}
html.see-live:not(.scene-static):not(.see-failed) .see-copy{opacity:var(--see-copy,0);transform:translateY(calc((1 - var(--see-copy,0))*14px));will-change:opacity,transform}
html.see-live:not(.scene-static):not(.see-failed) .phone{opacity:var(--see-phone,0);will-change:opacity,transform;
  transform:translate(calc(-50% + var(--carry-x,0px)),calc(-50% + var(--carry-y,0px))) scale(var(--carry-kx,1),var(--carry-k,1))}
html.see-live:not(.scene-static):not(.see-failed) .cap{left:0;top:0;opacity:0;will-change:transform,opacity}
html.see-live:not(.scene-static):not(.see-failed) .see-orbits,html.see-live:not(.scene-static):not(.see-failed) .see-area::before{display:none}
/* a legibility floor under the words: a soft dark scrim from the top (the scene drives its strength) */
.see-fix::before{content:"";position:absolute;left:0;right:0;top:0;height:46%;pointer-events:none;opacity:var(--see-scrim,1);background:radial-gradient(56% 90% at 50% 0%,rgba(5,7,13,.66),transparent 72%)}
.see-copy{position:relative;z-index:2;flex:none;text-align:center;padding:calc(var(--nav-h) + 2.4vh) 24px 0;text-shadow:0 2px 24px rgba(5,7,13,.85),0 0 6px rgba(5,7,13,.6)}
.see h2,.signup h2{font:400 clamp(44px,5.4vw,76px)/1 var(--serif);letter-spacing:-.022em;margin:0 0 14px;text-wrap:balance}
.see h2{color:#f4f7ff;margin-bottom:12px;font-size:clamp(40px,min(5.4vw,8.4vh),76px)}
.see .sub{margin:0 auto;max-width:31ch;font-size:19px;line-height:1.45;color:var(--fg-2);letter-spacing:-.006em;text-wrap:balance}
/* the phone's room: a size container, so the phone, the nodes and the static orbits all scale with the room left under
   the words. --ph is the phone's height (the room less a little air above and more below, capped, and on a narrow
   screen the width the nodes leave); --cy where its centre sits (the middle of the room, nudged up by the air below) */
.see-area{position:relative;z-index:1;flex:1;min-height:0;container-type:size;--gut:0px;--pt:12px;--pb:44px;
  --ph:min(calc(100cqh - var(--pt) - var(--pb)),800px,calc((100cqw - 2*var(--gut))*2.1333));--cy:calc(50% + (var(--pt) - var(--pb))/2)}
/* without WebGL: a soft ice glow behind the phone and the orbits as hairlines (the live scene draws both in light) */
.see-area::before{content:"";position:absolute;left:50%;top:var(--cy);width:calc(var(--ph)*1.5);height:calc(var(--ph)*1.25);transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(closest-side,rgba(80,120,220,.30),rgba(40,70,160,.10) 60%,transparent)}
/* (and a few still stars, so the room is the night the hero lives in, not a flat fill) */
.see-stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:radial-gradient(1px 1px at 12% 18%,#dbe6ff,transparent),radial-gradient(1px 1px at 27% 64%,#c9d8ff,transparent),radial-gradient(1.5px 1.5px at 41% 33%,#eef3ff,transparent),radial-gradient(1px 1px at 58% 82%,#c9d8ff,transparent),radial-gradient(1px 1px at 73% 27%,#dbe6ff,transparent),radial-gradient(1.5px 1.5px at 86% 58%,#eef3ff,transparent),radial-gradient(1px 1px at 94% 12%,#c9d8ff,transparent),radial-gradient(1px 1px at 5% 77%,#dbe6ff,transparent);
  background-size:340px 300px}
html.see-live:not(.scene-static):not(.see-failed) .see-stage::before{display:none}
/* (without the scene the page's still of the head stays behind everything: the room the phone stands in is its own night) */
html.scene-static .see-stage,html.see-failed .see-stage{background:radial-gradient(70% 55% at 50% 58%,#0c1531,var(--clear) 72%)}
/* the static rings: the far half under the phone, the near half over it (one unit of the drawing is half the phone's height) */
.see-orbits{position:absolute;left:50%;top:var(--cy);width:calc(var(--ph)*4);height:calc(var(--ph)*1.8);transform:translate(-50%,-50%);overflow:visible;pointer-events:none;fill:none;stroke:rgba(196,216,255,.42);filter:drop-shadow(0 0 4px rgba(120,165,255,.5))}
.see-orbits path{vector-effect:non-scaling-stroke;stroke-width:1.2;stroke-linecap:round}
.see-orbits.near{z-index:2;stroke:rgba(226,236,255,.3);mix-blend-mode:screen;filter:none}
.see-orbits.tall{display:none}

/* the phone: 300 x 640 at 1em = 13px; the frame is in em, so the whole of it scales with --ph, and the screen's
   contents a little larger than a real phone's, so the conversation reads at a laptop's size */
.phone{position:absolute;left:50%;top:var(--cy);z-index:1;height:var(--ph);aspect-ratio:300/640;margin:0;transform:translate(-50%,-50%);font-size:calc(var(--ph)*.0203125);padding:.69em;border-radius:3.55em;
  background:linear-gradient(155deg,#323a4c 0%,#11141c 24%,#07080c 62%,#222837 100%);
  box-shadow:inset 0 0 0 .07em rgba(222,234,255,.42),inset 0 0 0 .32em rgba(0,0,0,.55),0 0 0 .06em rgba(150,185,255,.4),0 0 1.6em rgba(120,160,255,.30),0 0 5em rgba(90,130,240,.16),0 2.4em 5em -1.2em rgba(0,0,0,.85)}
/* the side buttons: the action button and the volume pair on the left, the side button on the right */
.phone::before,.phone::after{content:"";position:absolute;width:.2em;background:linear-gradient(90deg,#2b3242,#4a5468 55%,#1b202b);box-shadow:0 0 .3em rgba(120,160,255,.25)}
.phone::before{left:-.17em;top:8.2em;height:2.3em;border-radius:.12em 0 0 .12em;box-shadow:0 3.5em 0 0 #343c4f,0 7em 0 0 #343c4f}
.phone::after{right:-.17em;top:11.4em;height:6.2em;border-radius:0 .12em .12em 0}
.phone-screen{position:relative;height:100%;border-radius:2.86em;background:#000;overflow:hidden;display:flex;flex-direction:column;color:#f5f5f7;
  font:400 1.09em/1.3 -apple-system,BlinkMacSystemFont,"SF Pro Text","Instrument Sans",system-ui,sans-serif;letter-spacing:-.006em;-webkit-font-smoothing:antialiased}
.ios-status,.ios-head{background:#151619}
.ios-status{position:relative;flex:none;height:3.05em;display:flex;align-items:center;justify-content:space-between;padding:.35em 1.65em 0 2.05em;font-weight:600}
.ios-time{font-size:1.05em;letter-spacing:-.01em}
.ios-island{position:absolute;left:50%;top:.66em;width:6.4em;height:1.85em;margin-left:-3.2em;border-radius:.93em;background:#000}
.ios-icons{display:flex;align-items:center;gap:.32em;color:#f5f5f7}
.ios-icons svg{display:block;height:.78em;fill:currentColor}
.ios-icons svg:nth-child(1){width:1.2em}.ios-icons svg:nth-child(2){width:1.05em}.ios-icons svg:nth-child(3){width:1.85em}
.ios-head{position:relative;flex:none;display:flex;justify-content:center;padding:.05em 1em .45em;border-bottom:.06em solid rgba(255,255,255,.09)}
.ios-back{position:absolute;left:1.05em;top:.85em;width:.66em;height:1.1em;color:#0a84ff}
.ios-video{position:absolute;right:.95em;top:.9em;width:1.65em;height:1.15em;color:#0a84ff}
.ios-contact{display:flex;flex-direction:column;align-items:center;gap:.22em}
.ios-avatar{display:block;width:2.7em;height:2.7em;border-radius:50%;overflow:hidden;background:#0b0d12;box-shadow:0 0 0 .07em rgba(255,255,255,.14)}
.ios-logo{display:block;width:100%;height:100%;object-fit:cover}
.ios-name{display:flex;align-items:center;gap:.22em;font-size:.74em;color:#f2f2f7}
.ios-name svg{width:.42em;height:.62em;color:#8e8e93}
/* the thread: the conversation sits at the bottom and grows upward; each new piece arrives (the scene adds .on as the
   pin plays) and the ones before it glide up by its height (one transform, no layout per frame) */
.ios-thread{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.ios-flow{flex:none;list-style:none;margin:0;padding:.4em .35em .3em}
html.see-anim .ios-flow{transition:transform .5s var(--ease-out)}
.step{display:block}
html.see-live:not(.scene-static):not(.see-failed) .step:not(.on){display:none}
html.see-anim .step.on>div{animation:msg-in .45s var(--ease-out) both}
@keyframes msg-in{from{opacity:0;transform:translateY(.7em)}to{opacity:1;transform:none}}
.msg{display:flex;flex-direction:column;padding:.13em .5em}
.msg.out{align-items:flex-end}.msg.in{align-items:flex-start}
.step[data-step="1"]>.msg,.step[data-step="3"]>.msg,.step[data-step="4"]>.msg,.step[data-step="5"]>.msg{padding-top:.62em}
.bubble{position:relative;z-index:0;max-width:86%;padding:.48em .8em .5em;border-radius:1.3em;overflow-wrap:break-word;text-wrap:pretty}
.out .bubble{background:#0a84ff;color:#fff}
.in .bubble{background:#262529;color:#f5f5f7}
/* the tail on the last bubble of a turn (the classic two-layer cut: a bubble-coloured curl, then the screen's black over its outside) */
.tail .bubble::before,.tail .bubble::after{content:"";position:absolute;bottom:0;z-index:-1;height:1.55em}
.tail.out .bubble::before{right:-.42em;width:1.4em;background:#0a84ff;border-bottom-left-radius:1.1em 1em}
.tail.out .bubble::after{right:-.78em;width:.78em;background:#000;border-bottom-left-radius:.75em}
.tail.in .bubble::before{left:-.42em;width:1.4em;background:#262529;border-bottom-right-radius:1.1em 1em}
.tail.in .bubble::after{left:-.78em;width:.78em;background:#000;border-bottom-right-radius:.75em}
.ios-stamp{margin:.32em .3em 0;font-size:.66em;font-weight:500;color:#8e8e93}
.rez{display:flex;flex-direction:column;width:82%;border-radius:1.2em;overflow:hidden;background:#1c1c1f;box-shadow:inset 0 0 0 .06em rgba(255,255,255,.07)}
.rez-main{display:flex;align-items:center;gap:.72em;padding:.6em}
.rez-img{flex:none;width:4.3em;height:4.3em;border-radius:.66em;overflow:hidden;box-shadow:inset 0 0 0 .06em rgba(255,255,255,.08)}
.rez-img svg{display:block;width:100%;height:100%}
.rez-text{display:flex;flex-direction:column;gap:.08em;min-width:0}
.rez-text b{font-size:1.04em;font-weight:600;color:#f5f5f7}
.rez-text span{font-size:.8em;color:#a1a1a6}
.rez-ok{display:flex;align-items:center;gap:.45em;padding:.52em .7em;border-top:.06em solid rgba(255,255,255,.08);font-size:.82em;color:#e5e5ea}
.rez-ok svg{flex:none;width:1.15em;height:1.15em;fill:#30d158}
.typing .bubble{display:flex;gap:.26em;padding:.7em .88em}
.typing i{display:block;width:.5em;height:.5em;border-radius:50%;background:#8e8e93;animation:typing 1.3s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes typing{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-.12em)}}
.ios-input{flex:none;display:flex;align-items:center;gap:.5em;padding:.3em .8em .1em}
.ios-plus{flex:none;display:grid;place-items:center;width:2.15em;height:2.15em;border-radius:50%;background:#262529;color:#a1a1a6}
.ios-plus svg{width:1em;height:1em}
.ios-field{flex:1;display:flex;align-items:center;justify-content:space-between;height:2.15em;padding:0 .8em;border-radius:1.08em;box-shadow:inset 0 0 0 .07em #3a3a3e;color:#6e6e73}
.ios-field svg{width:.64em;height:.96em;color:#8e8e93}
.ios-home{flex:none;display:block;width:8.6em;height:.33em;margin:.55em auto .5em;border-radius:.2em;background:#f2f2f7}
/* the near half of the trails, where the rings cross in front of the phone: the scene draws it here, over the screen
   (the canvas behind the phone cannot), clipped to the phone's outline and lightening what it crosses */
.see-front{position:absolute;inset:0;z-index:2;width:100%;height:100%;border-radius:3.55em;pointer-events:none;display:none;mix-blend-mode:screen}
html.see-live:not(.scene-static):not(.see-failed) .see-front{display:block}

/* the capabilities: a round glowing node on its orbit with its name under it. The scene writes each one's transform (its
   orbit anchor, projected), its opacity, the name's own fade (--lab, which follows the node's) and brightens it as a
   comet passes (--glow); without WebGL CSS puts it at the same point. The name sits on a soft dark backing, so a trail
   running behind it never cuts through the letters. */
.caps{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none;z-index:3}
.cap{position:absolute;left:calc(50% + var(--x)*var(--ph)/2);top:calc(var(--cy) - var(--y)*var(--ph)/2);width:0;height:0}
.cap-icon{position:absolute;left:-28px;top:-28px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#eef3ff;
  background:radial-gradient(circle at 50% 28%,rgba(92,126,200,.62),rgba(18,27,56,.96) 72%);
  box-shadow:inset 0 1px 0 rgba(222,234,255,.3),0 0 0 1px rgba(150,186,255,calc(.3 + .35*var(--glow,0))),0 0 calc(16px + 20px*var(--glow,0)) rgba(110,155,255,calc(.32 + .45*var(--glow,0)))}
.cap-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cap-label{position:absolute;left:0;top:36px;transform:translateX(-50%);padding:1px 9px 2px;border-radius:999px;font-size:15px;font-weight:500;letter-spacing:-.003em;color:rgba(230,237,252,.95);white-space:nowrap;opacity:var(--lab,1);
  background:rgba(5,7,13,.62);box-shadow:0 0 10px 5px rgba(5,7,13,.55);text-shadow:0 0 6px rgba(5,7,13,.9)}

/* without WebGL there is no cloud to show through the wash, so the dissolve is the light itself: one climb from the
   night to the paper with a soft ice glow where the phone was, never a stretch of bare black */
html.scene-static .dissolve::before{opacity:1;
  background:radial-gradient(60% 40% at 50% 28%,rgba(120,150,210,.28),transparent 70%),linear-gradient(180deg,#05070d 0%,#0b1226 16%,#1b2848 34%,#43577f 54%,#8a9cc0 72%,#cdd6ea 88%,var(--ambient) 100%)}

/* ---- the dissolve: the network loosens into light; the DOM half of the dark → pale crossing -------------
   The section is a window on the canvas for its first third (the particles disperse against the scene's own
   background), then the light comes in and reaches the ambient at its end, which the bright section continues
   from so there is no seam. The wash's strength follows --dissolve, which the scene may drive. */
.dissolve{position:relative;z-index:1;height:75vh;background:transparent}
/* the wash eases in from nothing (no kink against the dark canvas at its first stop) and reaches the ambient only at the end */
.dissolve::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--dissolve);
  background:linear-gradient(180deg,rgba(176,194,232,0) 0%,rgba(176,194,232,0) 34%,rgba(176,194,232,.05) 40%,rgba(176,194,232,.16) 47%,rgba(176,194,232,.30) 52%,rgba(176,194,232,.44) 57%,rgba(214,224,243,.66) 74%,rgba(232,237,247,.78) 90%,var(--ambient) 100%)}
/* (the tail stays a little open until the very end, so the scene's last particles show through the wash where the statement arrives; the seam with the bright section is exact at 100%) */
/* while the scene is live the wash's colour follows the canvas it lies on (--dissolve-bg, the scene's background of
   the moment, mixed toward the ambient): over the dark canvas it is the pale blue-grey above, and once the canvas has
   reached the ambient every stop is the ambient, so the open tail never lays a darker blue-grey band over a paper
   canvas (an 18 L stripe above the arriving statement); the sky ends as one gradient */
html[data-scene-ready="1"]:not(.scene-static) .dissolve::before{--wash:color-mix(in srgb,var(--dissolve-bg,#05070d) 35%,var(--ambient));
  background:linear-gradient(180deg,transparent 0%,transparent 34%,color-mix(in srgb,var(--wash) 5%,transparent) 40%,color-mix(in srgb,var(--wash) 16%,transparent) 47%,color-mix(in srgb,var(--wash) 30%,transparent) 52%,color-mix(in srgb,var(--wash) 44%,transparent) 57%,color-mix(in srgb,color-mix(in srgb,var(--wash),var(--ambient)) 66%,transparent) 74%,color-mix(in srgb,var(--ambient) 78%,transparent) 90%,var(--ambient) 100%)}

/* ---- the bright end: one number, then you're in ---------------------------------------------------------- */
/* the statement sits high, under the last of the dissolve, so it arrives while the final particles are still in view
   (the reference puts the copy directly beneath the dissolving cloud); the room above it is the sky */
/* desktops end with the footer under the card (the page's end leaves the dissolve's tail in view above the statement,
   as the reference does); phones size the section to the viewport so the statement ends just under the chrome */
.signup{position:relative;z-index:1;background:var(--paper);color:var(--ink);color-scheme:light;padding:max(10vh,88px) 0 max(10vh,96px);min-height:0;display:flex;align-items:flex-start;isolation:isolate}
.signup>.wrap{position:relative;z-index:2;width:100%}
/* the ambient: the same pale blue-grey the dissolve ends in, across the whole top edge, washing down softly from the centre */
.signup::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 46% at 50% 16%,var(--ambient),transparent 72%),linear-gradient(180deg,var(--ambient) 0,transparent 34%)}
/* room for the last sparse particles, the ones that drifted in from the dissolve: an empty layer the integration fills */
.signup-sky{position:absolute;left:0;right:0;top:0;height:min(56vh,520px);z-index:1;pointer-events:none;overflow:hidden}
.signup-grid{display:flex;flex-direction:column;align-items:center}
.signup-copy{text-align:center;margin-bottom:36px}
.signup h2{color:var(--ink)}
.signup .sub{margin:0;font-size:18px;color:var(--ink-2);letter-spacing:-.006em}
.card{width:100%;max-width:460px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r3);padding:28px 28px 26px;color:var(--ink);
  box-shadow:0 1px 2px rgba(10,15,30,.04),0 30px 70px -44px rgba(20,40,90,.4)}
.field{display:block;margin-bottom:18px}
.field>span,.field>label{display:block;font-size:13px;font-weight:600;letter-spacing:-.005em;color:var(--ink);margin-bottom:8px}
.entry{display:block;width:100%;height:52px;padding:0 16px;font-size:16px;letter-spacing:-.005em;color:var(--ink);background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--r1);outline:0;transition:border-color .2s,box-shadow .2s}
.entry::placeholder{color:#9aa0ae}
.entry:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(26,43,87,.12)}
.entry.bad{border-color:var(--bad)}
/* the same control, on paper */
.card .control{height:52px;padding:0;border-radius:var(--r1);color:var(--ink);background:var(--paper-2);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border:1px solid var(--line-2)}
.card .control:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px rgba(26,43,87,.12)}
.card .cc{color:var(--ink);border-right-color:var(--line);padding:0 12px 0 14px}
.card .cc svg{color:var(--muted)}
.card .control input{color:var(--ink);padding:0 14px}
.card .control input::placeholder{color:#9aa0ae}
.hint{margin:-6px 0 16px;font-size:13px;color:var(--ink-2)} /* 7.2:1 on white (the muted grey read 3.7:1 at 13 px) */
.card .go{color:#fff;background:var(--ink);box-shadow:none}
.card .go:hover{filter:none;background:#20232b}
.card .go.wide.primary{width:100%;height:52px;font-size:15px}
.card .or{color:var(--muted)}
.card .or::before,.card .or::after{background:var(--line)}
.card .google{color:var(--ink);background:var(--paper-2);box-shadow:0 0 0 1px var(--line-2)}
.card .google:hover{background:var(--paper-2);box-shadow:0 0 0 1px rgba(12,13,18,.3)}
.card .sent,.card .help,.card .note,.card .alt{color:var(--ink-2)}
.card .sent b,.card .alt:hover{color:var(--ink)}
.card .alt[disabled]{color:var(--muted)}
.card .note.bad{color:var(--bad)}
.card .sep{background:var(--line-2)}
.card .code input{color:var(--ink);background:var(--paper-2);box-shadow:0 0 0 1px var(--line-2)}
.card .code input::placeholder{color:#c6cad3}
.card .code input:focus{box-shadow:0 0 0 1px var(--ink),0 0 0 4px rgba(26,43,87,.12)}
.card .code.bad input{box-shadow:0 0 0 1px var(--bad)}

/* ---- the footer: the name, the three links, the year ------------------------------------------------------
   Its height is fixed per breakpoint (--foot-h, border included) so the bright section above it can be sized to
   end the page with its statement just under the chrome, on phones as on desktops. */
.foot{position:relative;z-index:1;background:var(--paper);color:var(--muted);padding:0 0 env(safe-area-inset-bottom)}
.foot .wrap{height:calc(var(--foot-h) - 1px);display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:13px}
.foot .brand{color:var(--ink);font-size:14px}
.foot .brandmark{width:18px;height:18px;border-radius:5px}
.foot-links{display:flex;gap:22px}
.foot-links a{color:var(--ink-2);transition:color .2s}
.foot-links a:hover{color:var(--ink)}

/* ---- arrival ---------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .copy>*{animation:settle 1s var(--ease-out) both}
  .copy h1{animation-delay:.15s}.copy .sub{animation-delay:.28s}.copy .auth{animation-delay:.4s}
  .see-cue{animation:cue-in .9s var(--ease-out) .55s backwards}
}
@keyframes settle{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes cue-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .pane.on,.code.bad input,.copy>*,.typing i{animation:none}
  html.see-anim .step.on>div,html.see-anim .ios-flow{animation:none;transition:none}
  .cta.glass,.cta.glass svg,.go,.alt,.control,.entry,.google,.signin,.code input{transition:none}
}

/* ---- laptops, tablets, phones ----------------------------------------------------------------------------- */
@media (max-width:1180px){
  .wrap{padding:0 32px}
  .wrap.hero-grid{padding:var(--nav-h) 32px 0}
  .hero-grid{grid-template-columns:48fr 52fr}
}
@media (max-width:900px){
  :root{--nav-h:60px}
  .wrap{padding:0 24px}
  .wrap.hero-grid{display:flex;flex-direction:column;justify-content:flex-end;gap:0;padding:var(--nav-h) 24px var(--hero-pb)}
  /* the pill sits under the control, centred, in a band the grid keeps free for it (the copy itself needs no extra room
     here): --cue-b above the screen's bottom (and above the home indicator on notched phones), --cue-gap under the control */
  :root{--cue-b:20px;--cue-gap:24px;--hero-pb:calc(env(safe-area-inset-bottom,0px) + var(--cue-b) + 44px + var(--cue-gap))}
  .copy{padding-bottom:0}
  .see-cue{bottom:calc(env(safe-area-inset-bottom,0px) + var(--cue-b))}
  .hero-left{display:none}
  .copy{max-width:560px;width:100%;align-self:center;text-align:center}
  h1{font-size:clamp(48px,13vw,64px);margin-bottom:14px;white-space:normal;text-wrap:balance}
  .hero .sub{font-size:17px;margin-bottom:24px}
  .code{justify-content:center}
  .row{justify-content:center}
  .see-copy{padding-top:calc(var(--nav-h) + 1.6vh)}
  .see .sub{font-size:16.5px;max-width:28ch}
  .dissolve{height:60vh} /* shorter on phones: the statement arrives half a viewport sooner, while the last particles are still in view (the scene's own dissolve reaches further to keep the climb even) */
  .signup{padding:max(10vh,88px) 0 10vh;min-height:calc(100svh - var(--foot-h) - env(safe-area-inset-bottom,0px))}
  .signup-copy{margin-bottom:28px}
  /* two rows: the name, then the links and the year */
  :root{--foot-h:100px}
  .foot .wrap{flex-wrap:wrap;align-content:center;justify-content:center;padding:0 24px;gap:14px 24px;text-align:center}
  .foot .brand{width:100%;justify-content:center}
}
@media (max-width:560px){
  .wrap{padding:0 20px}
  .wrap.hero-grid{padding:var(--nav-h) 20px var(--hero-pb)}
  /* a quieter pill on phones, a little further from the number field, so it never reads as a second form button */
  .see-cue{color:rgba(234,241,255,.82);box-shadow:inset 0 1px 0 rgba(196,218,255,.16),inset 0 -1px 0 rgba(40,70,150,.2),0 0 0 1px rgba(122,164,255,.32),0 0 16px -4px rgba(90,140,255,.28)}
  .nav-actions{gap:16px}
  .cta.glass{height:36px;padding:0 13px 0 15px;font-size:13.5px}
  h1{font-size:clamp(44px,12.5vw,56px)}
  .hero .sub{font-size:16px}
  .control{height:56px;padding:5px 5px 5px 0}
  .control .go,.go{height:46px;min-width:46px}
  .control .go{width:46px}
  .cc{padding:0 10px 0 16px;font-size:14px}
  .control input{padding:0 12px}
  .code input{width:42px;height:52px}
  .see h2,.signup h2{font-size:clamp(38px,11vw,48px)}
  .see h2{margin-bottom:8px}
  .see .sub{font-size:15.5px}
  .card{padding:22px 20px 20px;border-radius:20px}
  .sep{display:none}
  .signup .sub{font-size:16.5px}
  /* three rows: the name, the links, the year */
  :root{--foot-h:134px}
  .foot .wrap{padding:0 20px}
  .foot .copyright{width:100%}
}
/* short phones: the card is taller than the screen leaves it, so the statement keeps just under the chrome at the page's end */
@media (max-width:900px) and (max-height:720px){
  .signup{padding:84px 0 5vh}
}
@media (max-width:900px) and (max-height:660px){
  .signup{padding:76px 0 16px}
}
/* the pill's band on phones: a little more air under the number field on tall phones; the usual on shorter ones; on
   short landscape screens the band is the room the old text link took, so the headline stays clear of the nav */
@media (max-width:560px) and (min-height:700px){
  :root{--cue-gap:30px}
}
@media (max-width:900px) and (max-height:430px){
  :root{--cue-b:12px;--cue-gap:14px}
}
@media (max-width:360px){
  .wrap{padding:0 16px}
  .wrap.hero-grid{padding:var(--nav-h) 16px var(--hero-pb)}
  .nav-actions{gap:12px}
  .signin{font-size:13px}
  h1{font-size:40px}
  .cc{padding:0 8px 0 12px}
  .cc .flag{display:none}
  .code{gap:6px}
  .code input{width:40px;height:50px;font-size:20px}
  .card{padding:20px 16px 18px}
}
/* portrait windows: the phone is narrower than the room beside it; the rings are tall ellipses round it whose sides run
   through a gutter on each side, where the nodes ride them, smaller (the scene's "tall" layout, from the same table) */
@media (max-aspect-ratio:999/1000){
  .see-area{--gut:54px;--pt:10px;--pb:40px}
  .cap{left:calc(50% + var(--xt)*var(--ph)/2);top:calc(var(--cy) - var(--yt)*var(--ph)/2)}
  .cap-icon{left:-18px;top:-18px;width:36px;height:36px}
  .cap-icon svg{width:17px;height:17px;stroke-width:1.8}
  /* (a name never runs off the screen: on the left it starts at its node's left edge, on the right it ends at its right edge) */
  .cap-label{top:22px;padding:0 4px 1px;font-size:11px;box-shadow:0 0 6px 3px rgba(5,7,13,.55);transform:translateX(calc(-50% - var(--st,0)*(50% - 20px)))}
  .see-orbits.wide{display:none}
  .see-orbits.tall{display:block}
}
/* landscape windows that are short for the words and the phone: the line under the statement runs on one line */
@media (min-aspect-ratio:1/1) and (max-height:940px){
  .see-copy{padding-top:calc(var(--nav-h) + 1.4vh)}
  .see h2{font-size:clamp(40px,min(5.4vw,7.6vh),76px)}
  .see .sub{max-width:none;font-size:18px}
}
@media (min-aspect-ratio:1/1) and (max-height:800px){
  .see-area{--pt:8px;--pb:30px}
}
/* short phones: tighter words, so the phone keeps what height it can */
@media (max-aspect-ratio:999/1000) and (max-height:700px){
  .see-copy{padding-top:calc(var(--nav-h) + 4px)}
  .see h2{font-size:34px;margin-bottom:6px}
  .see .sub{font-size:14px;max-width:30ch}
  .see-area{--pt:6px;--pb:26px}
}