/* ================= THE GLASS =================
   Controls (nav, tab bars, buttons, the drops) are the real lens all the time.
   Panels (.tg) take the same lens while they sit still in the viewport; it sleeps during scroll. The pointer only moves a glint. */
.g::before,.tg::before,.lens::before,.bubble::before,.sheet::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:6;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.05) 45%,rgba(255,255,255,.1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.g{position:relative;isolation:isolate;background:rgba(0,0,0,.1);box-shadow:0 12px 34px rgba(0,0,0,.42),0 2px 6px rgba(0,0,0,.28);
  backdrop-filter:blur(9px) saturate(1.4) brightness(.8);-webkit-backdrop-filter:blur(9px) saturate(1.4) brightness(.8)}
.g::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.42),inset 0 1px 8px rgba(255,255,255,.1),inset 0 -8px 18px rgba(0,0,0,.2)}
.g>*{position:relative;z-index:2}
.tg{position:relative;isolation:isolate;border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 55%),rgba(9,15,30,.34);
  backdrop-filter:blur(18px) saturate(1.45);-webkit-backdrop-filter:blur(18px) saturate(1.45);
  box-shadow:0 24px 64px rgba(0,0,0,.36),0 2px 8px rgba(0,0,0,.2)}
.tg::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1),inset 0 -14px 34px rgba(0,0,0,.18)}
.tg>*{position:relative;z-index:2}
.tg.light{color:var(--ink);background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.58)),rgba(255,255,255,.3);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 34px 90px -30px rgba(20,34,70,.28),0 2px 8px rgba(20,34,70,.06)}
.tg.light::after{box-shadow:inset 0 0 0 1px rgba(10,20,40,.07),inset 0 1px 0 #fff,inset 0 -16px 36px rgba(20,40,80,.035)}
.tg.light::before{background:linear-gradient(180deg,#fff,rgba(10,20,40,.05))}
/* base: every engine frosts. In the full tier JS swaps a control's frost for the bare SVG lens (glass.js setLens). */
:root{--frost:blur(22px) saturate(1.5)}
.g, .tg { -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); }
/* full tier only: the SVG lens. WebKit never sees a url() inside backdrop-filter. */
html[data-tier="full"] .lensed { -webkit-backdrop-filter: none; }
.tg.navy{background:linear-gradient(150deg,rgba(7,16,31,.97),rgba(16,42,89,.95) 72%,rgba(11,22,48,.97));color:#fff;box-shadow:0 30px 80px -20px rgba(6,20,48,.45)}
html.q-lite .tg,html.q-lite .g{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.q-lite .tg{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015) 55%),#0a1122}
html.q-lite .tg.light{background:#fbfaf7}html.q-lite .tg.navy{background:linear-gradient(150deg,#07101f,#102a59 72%,#0b1630)}
html.q-lite .g{background:rgba(22,32,56,.94)}

/* ---------- the pointer: a dot that morphs into whatever it's on ---------- */
html.has-cursor,html.has-cursor *{cursor:none!important}
.cur-dot,.cur-ring{position:fixed;left:0;top:0;pointer-events:none;opacity:0}
html.has-cursor .cur-dot,html.has-cursor .cur-ring{visibility:visible}
.cur-dot{z-index:9999;width:6px;height:6px;border-radius:50%;background:#fff;mix-blend-mode:difference;will-change:transform,opacity}
.cur-ring{z-index:9998;width:30px;height:30px;border-radius:15px;display:grid;place-items:center;will-change:transform,width,height;
  border:1px solid rgba(255,255,255,.5);mix-blend-mode:difference;transition:background .25s,border-color .25s,box-shadow .25s}
.cur-ring span{font:500 13px/1 Geist,sans-serif;color:#fff;white-space:nowrap;opacity:0;transition:opacity .18s}
.cur-ring.m-pill{mix-blend-mode:normal;border-color:transparent;background:rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 0 0 1px rgba(255,255,255,.1),0 6px 18px rgba(0,0,0,.22)}
.cur-ring.m-pill.on-light{background:rgba(11,16,32,.06);box-shadow:inset 0 0 0 1px rgba(11,16,32,.08)}
.cur-ring.m-label{mix-blend-mode:normal;border-color:transparent;background:rgba(12,22,44,.6);backdrop-filter:blur(10px) saturate(1.5);-webkit-backdrop-filter:blur(10px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.14),0 12px 30px rgba(0,0,0,.35)}
.cur-ring.m-label span{opacity:1}
.cur-ring.m-big{border-color:var(--accent-bright)}
/* the glint where the light meets the edge of the glass you're on */
/* D1, r8-3: glint is a real <span> (glass.js's HG), and site.css's `.ccard span{margin-top:4px}`
   (meant for the @handle line under a card's title) matched it too: a generic type+class collision,
   not a card- or lens-specific bug. That margin pushed the glint's whole absolutely-positioned box
   down 4px and, since it also has top:0 and bottom:0, ate 4px off its own height resolving them, so
   its mask-ring rode 4px inside the card's true edge on every .tg it ever attaches to: a second,
   brighter line parallel to the real rim, sharing no corner radius with it, reading as two lines
   pulling apart at the curve (Mike's red arrow; confirmed by the controller's QA). `.ccard span` is
   (0,1,1); `.glint{margin:0}` alone is only (0,1,0) and loses that fight regardless of source order,
   so the override sits on `.tg>.glint` below, (0,2,0), which wins on every .tg this ever attaches to. */
.glint{position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:7;overflow:hidden;opacity:0;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.tg>.glint{position:absolute;margin:0}
.glint i{position:absolute;left:0;top:0;width:300px;height:300px;border-radius:50%;will-change:transform;background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,255,255,.22) 38%,transparent 70%)}
.tg.light .glint i{background:radial-gradient(circle,rgba(58,160,255,.7),rgba(58,160,255,.15) 38%,transparent 70%)}
@media (hover:none),(pointer:coarse){.cur-dot,.cur-ring,.cursor-light{display:none!important}}
/* The old site's pointer light: behind the panels so the lens has something uneven to bend. Off on the white chapter. */
.cursor-light{position:fixed;left:0;top:0;z-index:0;width:780px;height:780px;border-radius:50%;pointer-events:none;transform-origin:0 0;opacity:0;will-change:transform;
  background:radial-gradient(circle,rgba(58,160,255,.26) 0%,rgba(58,160,255,.075) 30%,transparent 60%);transition:opacity .4s,background .5s}
.cursor-light.on{opacity:1}
.cursor-light.on.is-quiet{opacity:0}
.cursor-light.warm{background:radial-gradient(circle,rgba(255,150,70,.22) 0%,rgba(255,150,70,.06) 30%,transparent 60%)}
@media (prefers-reduced-motion:reduce){.cursor-light{display:none!important}}
.lens{position:fixed;z-index:62;left:0;top:0;border-radius:999px;pointer-events:none;display:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),inset 0 1.5px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(255,255,255,.3),0 12px 28px rgba(0,0,0,.4);
  backdrop-filter:blur(1px) saturate(1.3) brightness(1.06);-webkit-backdrop-filter:blur(1px) saturate(1.3) brightness(1.06)}
.lens .fill{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.lens.cta-lens{pointer-events:auto;cursor:pointer;align-items:center;justify-content:center;color:#fff;font-weight:600;text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,.35);will-change:transform;transform-origin:50% 50%}
.lens.cta-lens.tone-white{color:var(--ink);text-shadow:none}
.lens.cta-lens.on{display:flex}
.lens.cta-lens span{position:relative;z-index:7}
.bubble{position:fixed;z-index:62;left:0;top:0;height:62px;border-radius:31px;pointer-events:none;display:none;transform-origin:50% 50%;will-change:transform,opacity;background:rgba(255,255,255,.03);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),inset 0 1.5px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(255,255,255,.32),0 14px 30px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.14);
  backdrop-filter:blur(1px) saturate(1.3) brightness(1.08);-webkit-backdrop-filter:blur(1px) saturate(1.3) brightness(1.08)}
.bubble.on{display:block}
.lens.hdrop{display:block;border-radius:50%;background:rgba(255,255,255,.015);transform-origin:50% 50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.55),inset 0 -2px 6px rgba(255,255,255,.12),0 30px 70px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08)}
/* #xwin is the picture, the same size as the drop. The inline url() (full tier, while the drop is open) bends and magnifies it, so it beats this without !important; mid/lite show the picture flat. */
.lens.hdrop:not(.mini){backdrop-filter:none;-webkit-backdrop-filter:none}
.lens.hdrop.mini{box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),inset 0 1.5px 0 rgba(255,255,255,.6),0 14px 34px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.1)}
/* mid/lite have no SVG lens. On a card the drop is a ring: clear centre, frosted rim, orange dot. */
.lens.hdrop .fdot{display:none}
html[data-tier="mid"] .lens.hdrop.ring,
html[data-tier="lite"] .lens.hdrop.ring{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-tier="mid"] .lens.hdrop.ring::after,
html[data-tier="lite"] .lens.hdrop.ring::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:rgba(214,232,255,.22);
  backdrop-filter:blur(10px) saturate(1.55);-webkit-backdrop-filter:blur(10px) saturate(1.55);
  -webkit-mask-image:radial-gradient(circle, transparent calc(50% - 8px), #000 calc(50% - 7px));
  mask-image:radial-gradient(circle, transparent calc(50% - 8px), #000 calc(50% - 7px))}
html[data-tier="mid"] .lens.hdrop.ring .fdot,
html[data-tier="lite"] .lens.hdrop.ring .fdot{display:block;position:absolute;z-index:8;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--warm,#ff9646);box-shadow:0 0 0 3px rgba(255,150,70,.28),0 0 12px rgba(255,150,70,.9)}
.scrim{position:fixed;inset:0;z-index:70;background:rgba(2,4,12,.6);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);opacity:0;pointer-events:none;transition:opacity .2s var(--ease-soft)}
.scrim.on{opacity:1;pointer-events:auto}
/* The case sheet: a deep navy panel with the thin glass rim (::before) and a top sheen, opaque so the page never
   competes with the story or the screenshot. It fades + settles in place (sheet.js); no backdrop to re-render. */
.sheet{position:fixed;z-index:71;border-radius:28px;overflow:hidden;isolation:isolate;display:none;transform-origin:50% 50%;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 26%),radial-gradient(120% 70% at 50% -10%,rgba(58,140,255,.16),transparent 60%),linear-gradient(160deg,#0b1631,#0b1a3b 60%,#09132b);
  background-color:#0a1530;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(0,0,0,.4),0 40px 120px rgba(0,0,0,.6)}
.sheet.open{display:block}
.sheet .body{position:absolute;inset:0;padding:34px 0 30px;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sheet .head{padding:0 36px;display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.sheet .head .who{font-size:15px;color:var(--muted)}
.sheet .head h3{font:600 clamp(26px,2.6vw,38px)/1.08 Geist,sans-serif;letter-spacing:-.05em;margin-top:6px;max-width:760px}
.sheet .head h3 em{font-family:"Instrument Serif",serif;font-weight:400;color:var(--accent-bright)}
.sheet .head p{color:var(--muted);font-size:15px;line-height:1.55;margin-top:10px;max-width:640px}
/* E1: the header stays short (who + h + chips) so the first slide's own headline never falls below the
   fold; the full story is a click away instead of always-on prose competing for the same screen. */
.sheet .head details.story{margin-top:12px}
.sheet .head details.story summary{cursor:pointer;color:var(--accent-bright);font:600 14px/1.2 Geist,sans-serif;list-style:none;display:inline-flex;align-items:center;gap:7px;-webkit-tap-highlight-color:transparent}
.sheet .head details.story summary::-webkit-details-marker{display:none}
.sheet .head details.story summary::before{content:"";width:6px;height:6px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .2s}
.sheet .head details.story[open] summary::before{transform:rotate(45deg)}
.sheet .head details.story p{margin-top:10px}
/* the lightbox opens where it will sit: fade + a small scale in (200ms), fade out (160ms). No morph from the page. */
.lb{position:fixed;z-index:80;border-radius:18px;overflow:hidden;display:none;box-shadow:0 40px 120px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.12);opacity:0;transform:scale(.96);transition:opacity .16s ease-out,transform .16s ease-out}
.lb.open{display:block}
.lb.on{opacity:1;transform:none;transition:opacity .2s ease-out,transform .2s var(--ease-soft)}
.lb img{width:100%;height:100%;object-fit:contain;background:#03060f}
.lbscrim{position:fixed;inset:0;z-index:79;background:rgba(1,3,10,.74);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity .16s ease-out}
.lbscrim.on{opacity:1;pointer-events:auto;cursor:zoom-out;transition-duration:.2s}
@media (prefers-reduced-motion:reduce){.lb,.lb.on,.lbscrim{transition:none}}
.lb .lbx,.lb .lbcap{display:none}
/* r9 B1: touch screens and narrow windows (.tl, sheet.js). The whole picture always fits inside the safe area; a
   close button sits in the top corner and the words the picture proves sit under it. Zoom (pinch or double-tap)
   scales the picture itself past the box, so the box stops clipping and the rounding + shadow move onto it. */
.lb.tl{overflow:visible;border-radius:16px;box-shadow:none;touch-action:none}
.lb.tl img{border-radius:16px;background:#03060f;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 30px 90px rgba(0,0,0,.6);transform-origin:0 0}
.lb.tl.zoomed img{border-radius:0}
.lb.tl .lbx{display:grid;position:absolute;z-index:4}
/* placed by sheet.js on every open; the reduced-motion rule's .01ms on "all" would otherwise slide it from the last open's spot for a frame */
.lb .lbx{transition:none!important}
.lb.tl .lbcap{display:block;position:absolute;top:calc(100% + 14px);z-index:1;transition:opacity .15s}
.lb.zoomed .lbcap{opacity:0;pointer-events:none}
.lbscrim.on{touch-action:none}
/* the words sit straight on the backdrop here, so the page behind has to fall away further than on desktop */
.lbscrim.tl{background:rgba(1,3,10,.9)}
.lbcap .lbq{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;font-size:24px;line-height:1.18;letter-spacing:-.01em;color:var(--accent-bright);text-wrap:pretty}
.lbcap .lbn{font:700 34px/1 Geist,sans-serif;letter-spacing:-.05em;color:#fff}
.lbcap .lbl{font:600 18px/1.3 Geist,sans-serif;letter-spacing:-.02em;color:#fff;text-wrap:pretty}
.lbcap .lbw{display:block;margin-top:7px;font-size:15px;line-height:1.35;color:var(--muted)}
.lbcap .lbh{display:block;margin-top:12px;font-size:13px;line-height:1.3;color:var(--faint)}
.lbcap .lbh:first-child{margin-top:0}
.fit .tg{padding:36px 36px 22px}
.minis .tg{border-radius:20px;padding:20px 22px}
/* the underline that follows your pointer under the line you're reading (from your original site) */
.hlm{position:fixed;left:0;top:0;z-index:9997;width:184px;height:5px;border-radius:999px;pointer-events:none;opacity:0;transform-origin:0 50%;will-change:transform,opacity;
  background:linear-gradient(90deg,transparent 0%,rgba(255,150,70,1) 12%,rgba(255,188,72,.96) 88%,transparent 100%);box-shadow:0 2px 8px rgba(255,150,70,.34),0 0 20px rgba(255,150,70,.18)}
@media (hover:none),(pointer:coarse){.hlm{display:none}}
.ptrack{position:absolute;left:0;display:flex;width:max-content;height:calc((100% - 16px) / 3);z-index:0;pointer-events:none;animation:pmarquee 60s linear infinite;will-change:transform}
.ptrack.r1{top:0}
.ptrack.r2{top:calc((100% - 16px) / 3 + 8px);animation-duration:80s;animation-direction:reverse}
.ptrack.r3{top:calc(2 * ((100% - 16px) / 3 + 8px));animation-duration:70s}
.pset{display:flex;gap:12px;padding-right:12px;align-items:center;height:100%}
.ptrack img{height:100%;width:auto;max-width:none;flex:none;border-radius:14px;opacity:.9;box-shadow:0 10px 22px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.08)}
@keyframes pmarquee{to{transform:translate3d(-50%,0,0)}}
.pfield:not(.go) .ptrack{animation-play-state:paused}
.pill{position:absolute;z-index:2;height:44px;padding:0 20px;border-radius:22px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;min-width:88px;
  color:#fff;font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1;text-shadow:0 1px 6px rgba(0,0,0,.5);
  animation:pilldrift var(--dur,12s) ease-in-out var(--delay,0s) infinite alternate;will-change:transform;transition:translate .35s var(--ease);
  /* pan-y (not none): a touch that starts on a pill and moves mostly vertically is a
     scroll, and the browser should take it natively -- play.js only claims the finger
     itself after a still hold or a clearly horizontal drag (round 7 finding: 22-33% of
     swipes starting on a pill grabbed it instead of scrolling). */
  touch-action:pan-y;user-select:none;-webkit-user-select:none}
.pill b{position:relative;z-index:2;font-weight:600}
.pill .gl{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06) 42%,rgba(255,255,255,.03));
  backdrop-filter:blur(8px) saturate(1.5) brightness(1.06);-webkit-backdrop-filter:blur(8px) saturate(1.5) brightness(1.06);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.72),inset 0 -2px 6px rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.2),0 10px 24px rgba(0,0,0,.32)}
@keyframes pilldrift{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(var(--dx),var(--dy),0)}100%{transform:translate3d(calc(var(--dx) * -1),calc(var(--dy) * -1),0)}}
.pfield:not(.go) .pill,.pill:hover{animation-play-state:paused}
.pill.is-held,.pill.is-fly{z-index:30}
/* is-held/is-fly cancel the hover lift's -4px (so JS's own translate3d math, which
   knows nothing about it, stays correct) without transitioning it: that .35s translate
   transition is for the drift pause/hover, and animating this cancel too reads as the
   hover lift sinking back down the moment you press, the opposite of a lift. */
.pill.is-held,.pill.is-fly{transition:none}
#pfield .pill::after{content:none}
@media (hover:hover) and (pointer:fine){
  .pill:hover{z-index:20;translate:0 -4px}
  .pill.is-held,.pill.is-fly,.pill.is-held:hover,.pill.is-fly:hover{z-index:30;translate:0 0}
  /* Above the glass, not under it: a badge tucked at top:-11px has its lower third
     painted over by the pill's own .gl (z-index:2), so it never reads as a full word.
     A short opacity fade beats the previous instant on/off as the pointer crosses pills. */
  #pfield:not(.played) .pill::after{content:"Drag me";position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);padding:4px 8px;border-radius:999px;opacity:0;pointer-events:none;white-space:nowrap;font:500 11px/1 Geist,sans-serif;letter-spacing:.02em;color:rgba(255,255,255,.92);background:rgba(8,14,28,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 4px 10px rgba(0,0,0,.3);transition:opacity .16s ease;z-index:5}
  /* Too close to the field's own top edge (overflow:hidden clips it): flip below instead (c-18). */
  #pfield:not(.played) .pill.hint-below::after{bottom:auto;top:calc(100% + 10px)}
  #pfield:not(.played) .pill:not(.is-held):not(.is-fly):hover::after{opacity:1}
}
html.q-lite .pill .gl{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(255,255,255,.14)}
@media (prefers-reduced-motion:reduce){.ptrack,.pill{animation:none}.pill,.pill::after,#pfield .pill .gl{transition:none}}
.sheet .facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sheet .facts span{height:30px;padding:0 13px;border-radius:15px;display:inline-flex;align-items:center;font-size:13px;color:#dbe8fa;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
@media (max-width:700px){
  .sheet .body{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .sheet > .close{position:absolute;top:10px;right:10px;z-index:8}
  /* glass.css loads after site.css, so the shared left edge has to be set here or the 36px head padding wins. */
  .sheet .head{padding-left:16px}
  .sheet .facts span{height:auto;max-width:100%;min-width:0;box-sizing:border-box;padding:6px 13px;white-space:normal;overflow-wrap:anywhere;line-height:18px}
}
/* r9 B1: a fact that wraps reads as one rounded box with even lines, in the header and on every slide. */
@media (max-width:700px){
  /* the close button stays on the sheet's top corner; a one-line headline (a 420px window) ran under it. The notch
     only shortens the headline's first line. */
  .sheet .shd::before{content:"";float:right;width:46px;height:18px}
  .sheet .facts span{border-radius:14px;text-wrap:balance}
  .shd .sfacts span{height:auto;min-height:26px;max-width:100%;box-sizing:border-box;padding:4px 11px;white-space:normal;overflow-wrap:anywhere;line-height:18px;border-radius:13px;text-wrap:balance}
}
/* r9 Q minors 6-7: the phone sheet shows it turns. A prev/next pair either side of "1 / 10" (the desktop's arrows sit
   beside the picture, hidden here), and each dot answers a 24px tap while it still draws 8px. Wider windows keep the
   footer they had: the pair is not drawn and the count stays in the footer's own grid. */
.vstep{display:contents}
.vsb{display:none}
@media (max-width:700px){
  .sheet .vstep{display:flex;align-items:center;gap:10px}
  .sheet .vsb{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;padding:0;border:0;cursor:pointer;color:#fff;-webkit-tap-highlight-color:transparent}
  .sheet .vsb[disabled]{opacity:.3;cursor:default}
  .sheet .vstep .count{min-width:44px;text-align:center}
  .sheet .dots{gap:0;padding:0 5px;border-radius:12px}
  .sheet .dots i{position:relative;width:24px;height:24px;border-radius:0;background:none;-webkit-tap-highlight-color:transparent}
  .sheet .dots i.on{width:30px;background:none}
  .sheet .dots i::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:4px;background:rgba(255,255,255,.3);transition:width .45s var(--ease),margin .45s var(--ease),background .3s}
  .sheet .dots i.on::before{width:22px;margin-left:-11px;background:#fff}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){.sheet .dots i::before{transition:none}}
/* r9 B1: a phone on its side gets the phone sheet (sheet.js PHONE_Q): it fills the screen, the picture comes first
   with its headline beside it (the desktop row, so the picture keeps the full height), and the story scrolls below. */
@media (max-height:520px) and (hover:none){
  .sheet .body{padding:14px 0 16px}
  .sheet .head{padding-left:16px;padding-right:16px}
  .sheet > .close{position:absolute;top:10px;right:10px;z-index:8}
  .sheet .viewer{order:-1;flex:0 0 auto;height:calc(100dvh - 104px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));min-height:170px;margin-top:0;padding:0 64px 0 16px}
  .sheet .vbtn{display:none}
  .sheet .slide{flex-direction:row;align-items:stretch;gap:20px}
  .sheet .shd{flex:0 0 36%;max-width:38%;display:flex;flex-direction:column;justify-content:center}
  .sheet .shd::before{content:none}
  .sheet .shd .sbig{font-size:clamp(28px,4.2vw,40px)}
  .sheet .shd .sbig.q{font-size:clamp(24px,3.4vw,34px)}
  .sheet .shd .sline{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
  .sheet .vfoot{order:-1;flex:none;display:flex;justify-content:center;align-items:center;column-gap:12px;padding:10px 16px 0}
}

/* ---------- touch: the panel frost painted once instead of re-blurred every frame (round 9, lane D) ----------
   On a touch phone or tablet (Safari's mid tier) every .tg panel and small .g chip was its own live
   backdrop-filter layer: up to 19 on screen at once in the FAQ, each re-blurring the page behind it at 3x
   on every frame of a scroll. Behind them is only the page's flat navy, so the 22px blur never showed; the
   frost only ever read as its colour shift (saturate 1.5 pulls #07122b toward #02123a). Here that shift is a
   plain background colour under each panel's own glass gradient: the same look, no live layer.
   Kept live: the nav, the tab bars, the hero's buttons, the About photo's swap chip and the pricing pills,
   which sit over moving or detailed content where the blur is the point. Fine pointers never match this. */
@media (hover:none) and (pointer:coarse){
  html[data-tier="mid"] .tg{-webkit-backdrop-filter:none;backdrop-filter:none}
  html[data-tier="mid"] .tg:not(.light):not(.navy){background-color:rgba(5,15,46,.67)}
  html[data-tier="mid"] :is(.opn,.pm,.rbtn,.rnext>i).g{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:rgba(17,25,46,.85)}
  html[data-tier="mid"] .ccard .ic{-webkit-backdrop-filter:none;backdrop-filter:none}
  /* Closed, these stay full-screen (the scrims) or fixed (the hero caption) layers with a live blur and
     opacity 0. Hidden, they are not composited at all; the scrim still fades out before it hides. */
  .scrim:not(.on){visibility:hidden;transition:opacity .2s var(--ease-soft),visibility 0s linear .2s}
  /* the lightbox picture fades out over .16s (sheet.js FADE_OUT); its backdrop has to stay up under it until then */
  .lbscrim:not(.on){visibility:hidden;transition:opacity .16s ease-out,visibility 0s linear .16s}
  .xcap:not(.on){visibility:hidden;transition:opacity .25s,visibility 0s linear .25s}
}
@media (hover:none) and (pointer:coarse) and (prefers-reduced-motion:reduce){.lbscrim:not(.on){transition:none}}