/* D-10/D-4: local metric-matched fallbacks for the two fonts the hero headline swaps in late
   (Geist 600 arrives fast; Instrument Serif italic, used only by the "asset." emphasis, arrives
   noticeably later and is a much narrower face than any generic serif). Sized from real browser
   measurements of both faces at 100px ("Hxgjpqy asset ABCDEFG 0123"): Geist 600 fba 101/fbd 29/w
   1439 vs Arial 600 fba 91/fbd 21/w 1450; Instrument Serif italic fba 99/fbd 31/w 994 vs Times
   New Roman italic fba 89/fbd 22/w 1269. Without this, the swap moved the headline's line box (and
   everything under it) by up to 47px and measured 0.10-0.22 load CLS on an iPhone SE alone. */
@font-face{font-family:"Geist Fallback";src:local(Arial),local(Helvetica);size-adjust:99.21%;ascent-override:101%;descent-override:29%;line-gap-override:0%}
@font-face{font-family:"Instrument Serif Fallback";src:local("Times New Roman"),local(Times);size-adjust:78.34%;ascent-override:99%;descent-override:31%;line-gap-override:0%}
/* D-8: --ink-blue was #2f7fe0, 3.56:1 on cream (measured on .pricing .kicker); its other two
   consumers (.pricing .title em, a large emphasis word, and .pitem's own-circle icon) only gain
   contrast from a darker value, so this is fixed at the source rather than per selector. */
:root{--bg:#07122b;--text:#fff;--muted:#8fa2bd;--faint:#7388aa;--accent:#3aa0ff;--accent-bright:#6dbfff;--green:#37d399;--cream:#f4f1ea;--ink:#0b1020;--ink-muted:#58627a;--ink-blue:#2164b4;
  --ease:cubic-bezier(.34,1.3,.64,1);--ease-soft:cubic-bezier(.16,1,.3,1);--wrap:1360px;--gut:40px;--gut:max(40px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))}
*{box-sizing:border-box;margin:0;padding:0}
/* D-9: sections carry their own scroll-margin-top for anchor jumps, but a plain Tab into an
   element inside one (the first FAQ question measured landing flush against the fixed nav) has no
   such margin of its own. scroll-padding-top covers every native scroll-into-view, focus included. */
html{scroll-behavior:smooth;scroll-padding-top:calc(76px + env(safe-area-inset-top, 0px))}
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
html,body{overflow-x:clip}
body{background:var(--bg);color:var(--text);font-family:Geist,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:inherit}
[hidden]{display:none!important}
section{position:relative;z-index:1;padding:clamp(80px,9vw,136px) var(--gut);min-height:0}
.in{max-width:var(--wrap);margin:0 auto;position:relative;z-index:1}
@media (max-width:760px){:root{--gut:20px;--gut:max(20px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))}}

/* ---------- chapter title: one style everywhere ---------- */
.kicker{font:500 15px/1 Geist,sans-serif;color:var(--accent-bright);letter-spacing:-.01em}
.title{font:600 clamp(42px,5.6vw,82px)/1 Geist,sans-serif;letter-spacing:-.058em;margin-top:16px;max-width:1000px;text-wrap:balance}
.title em{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;color:var(--accent-bright);letter-spacing:-.015em}
.lede{font:400 18px/1.55 Geist,sans-serif;color:var(--muted);margin-top:20px;max-width:620px;letter-spacing:-.01em;text-wrap:pretty}
.center{text-align:center}.center .title,.center .lede{margin-left:auto;margin-right:auto}
.split{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:end}
.split .lede{margin-top:0;justify-self:end;max-width:460px}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr);gap:18px}.split .lede{justify-self:start}#run .split>div:last-child{justify-self:stretch !important;min-width:0;width:100%}}
.lift:hover{transform:translateY(-5px)}

/* ---------- nav ---------- */
.navwrap{position:fixed;top:16px;top:calc(16px + env(safe-area-inset-top, 0px));left:0;right:0;z-index:50;display:flex;justify-content:center;padding:0 18px;padding-left:max(18px, env(safe-area-inset-left, 0px));padding-right:max(18px, env(safe-area-inset-right, 0px));pointer-events:none}
.nav{pointer-events:auto;width:100%;max-width:var(--wrap);height:60px;border-radius:30px;display:flex;align-items:center;padding:0 9px 0 11px;gap:10px;transition:background .5s,color .5s}
.nav img{width:38px;height:38px;border-radius:50%;box-shadow:0 0 0 2px rgba(109,191,255,.5),0 0 18px rgba(58,160,255,.3)}
.nav .brand{font-weight:600;font-size:15px;letter-spacing:-.02em;padding-right:14px;border-right:1px solid rgba(255,255,255,.12)}
.nav .links{display:flex;gap:2px;margin:0 auto;position:relative;touch-action:none;user-select:none;-webkit-user-select:none}
.nav .links a{-webkit-user-drag:none;position:relative;z-index:2;font-size:14px;font-weight:500;color:rgba(255,255,255,.72);text-decoration:none;padding:9px 15px;border-radius:999px;text-shadow:0 1px 2px rgba(0,0,0,.45);transition:color .2s}
.nav .links a:hover,.nav .links a.active{color:#fff}
.nav .links .act{position:absolute;z-index:1;top:0;height:100%;border-radius:999px;background:rgba(58,160,255,.2);box-shadow:inset 0 1px 0 rgba(157,214,255,.35),inset 0 0 0 1px rgba(109,191,255,.18);transition:left .45s var(--ease),width .45s var(--ease),opacity .2s}
/* .46 let a dark card passing under the bar (the navy "Hop on a call" CTA, the electric-blue
   FAQ transition) drag the blend to a flat grey, 2.95:1 for the links (round 7 fix round 2,
   V-7): the filtered backdrop under a dark object is still dark, and a thin white overlay
   barely masks it. >=.85 keeps the bar reading white regardless of what passes under it,
   matching the mid/lite tier's own .93 three lines down, which never had this bug. */
.nav.light{background:rgba(255,255,255,.88);color:var(--ink);box-shadow:0 14px 40px rgba(20,34,70,.14),0 2px 6px rgba(20,34,70,.08)}
/* Without the SVG lens (WebKit, phones) the frost alone let body text show through behind the logo. A denser tint there. */
html:not([data-tier="full"]) .nav:not(.light){background:rgba(6,13,28,.72)}
html:not([data-tier="full"]) .nav.light{background:rgba(255,255,255,.93)}
/* The lite tier has no frost at all (Chrome on a touch phone lands here), so at .72 the copy scrolling under
   the bar read straight through it, sharp, behind "MikeTheElite". With nothing to blur it, the bar goes near solid. */
html.q-lite .nav:not(.light){background:rgba(6,13,28,.95)}
.nav.light::after{box-shadow:inset 0 0 0 1px rgba(10,20,40,.08),inset 0 1px 0 rgba(255,255,255,.9)}
.nav.light .brand{border-color:rgba(10,20,40,.12)}
.nav.light .links a{color:rgba(11,16,32,.62);text-shadow:none}.nav.light .links a:hover,.nav.light .links a.active{color:var(--ink)}
.nav.light .links .act{background:rgba(58,160,255,.14);box-shadow:inset 0 0 0 1px rgba(58,160,255,.18)}
/* Section menu from 900px down: iPad portrait is 820, and six links plus the brand and the CTA
   already sit in the crushed 760-900 band. Landscape iPad (1180) keeps the links. The old 759px and
   760-900px link-condense rules that used to live here are dead: the links now hide outright at
   <=900px (below), so nothing in that band ever renders condensed links (fix round 1, T-R11 nit). */
.navwrap .nav{z-index:3}
/* Not a `.g` lens: the toggle sits inside the nav's own backdrop root, so a nested SVG lens can only
   sample the nav's own near-transparent paint and the alpha lift turns that opaque black (round 7 fix
   round 1, T-R1). A plain tinted chip over the nav's own bend reads as real glass without the nesting bug. */
.nav-toggle{display:none;width:44px;height:44px;flex:0 0 44px;align-items:center;justify-content:center;padding:0;border:0;border-radius:22px;color:#fff;cursor:pointer;
  background:rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(255,255,255,.15),0 2px 8px rgba(0,0,0,.22);transition:background .25s,color .25s}
.nav-toggle:hover{background:rgba(255,255,255,.14)}
.nav-toggle-lines{display:grid;gap:5px;width:16px}
.nav-toggle-lines span{display:block;height:2px;border-radius:99px;background:currentColor;transition:transform .22s var(--ease-soft),opacity .22s}
.nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav.light .nav-toggle{color:var(--ink);background:rgba(255,255,255,.62)}
@media (max-width:900px){
  .nav .links{display:none}
  .nav .brand{border:0;margin-right:auto;padding-right:0}
  .nav-toggle{display:inline-flex}
  .nav .cta.sm{flex:0 0 auto}
}
@media (max-width:390px){
  .nav{gap:6px;padding:0 6px 0 8px}
  .nav img{width:30px;height:30px}
  .nav .brand{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
  .nav .cta.sm{height:40px;padding:0 10px;font-size:12px}
}
/* r9 A3, touch targets: the nav's Book a call was 40-42px tall on phones and iPads, and the six links a
   landscape iPad shows are 36px. On a touch screen (and anywhere the menu button shows) the CTA is 44px,
   the toggle's own height, and the links keep their look but take a finger across an invisible 44px band. */
@media (max-width:900px),(hover:none),(pointer:coarse){.nav .cta.sm{height:44px}}
@media (hover:none),(pointer:coarse){.nav .links a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}}
html.menu-lock,html.menu-lock body{overflow:hidden}
html.menu-lock body{overscroll-behavior:none}
.smenu{position:fixed;inset:0;z-index:1;pointer-events:auto}
/* C1 (round 8), fix round 1: the controller's video showed a near-invisible arc with no bend on the
   numbers cards, then an instant cut to the rest panel -- "reads as a fade, not a warp." Two changes:
   a real, visible glass BODY (a lift in brightness, not near-black-on-navy) with its own directional
   rim baked in as a safety net independent of the SVG lens, and the crossfade held off until the
   spring is 80% of the way there (see menu.js GLASS_OUT/PANEL_IN) so the warp is what plays for most
   of the ~500-650ms grow, not an invisible prelude to it. */
.smenu-glass{position:fixed;left:0;top:0;z-index:1;border-radius:50%;pointer-events:none;opacity:0;
  will-change:transform,opacity;transform-origin:50% 50%;transform:translate3d(-200vw,-200vh,0) scale(.01);
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.4),rgba(210,228,255,.16) 46%,rgba(150,190,255,.12) 78%,rgba(120,165,235,.16) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),
    inset 5px 6px 10px rgba(255,255,255,.6),
    inset -6px -7px 16px rgba(4,10,26,.55),
    0 0 50px rgba(190,220,255,.22);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6)}
html[data-tier="full"] .smenu-glass.lensed{-webkit-backdrop-filter:none}
/* Lowered from .94: at that alpha nothing of the page tinted the glass at all, which read as "the same
   flat dark boxes" next to Mike's r8-4 screenshot. .6 plus a heavier 28px blur lets the page's own
   blues and the number colours bleed through as a genuine tint while staying legible (fix round 1). */
/* No rim: the panel is the whole screen, so an inset edge light only drew a white hairline along the
   top, both sides and the bottom of the phone, right under the status bar and above Safari's bar (r9-4). */
.smenu-panel{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,var(--bg),rgba(8,16,34,.6) 150px,rgba(8,16,34,.6) calc(100% - 110px),var(--bg));
  -webkit-backdrop-filter:blur(28px) saturate(1.6);backdrop-filter:blur(28px) saturate(1.6)}
.smenu.open .smenu-panel{pointer-events:auto}
/* A tap open focuses the dialog itself (menu.js open): a ring round the whole screen would be the edge line again. */
.smenu-panel:focus,.smenu-panel:focus-visible{outline:none}
/* r9-4, real iPhone: with the menu open Safari fills its own status bar and bottom bar bands with the page
   colour (7,18,43, --bg), so the panel's top and bottom edges start as that exact navy instead of showing a
   step. Over a light section (the cream Offer) the .6 frost turned the whole menu a flat grey slab with
   white labels on grey and hard navy bands above and below: there the tint goes dense (menu.js .onlight).
   The panel's own gradient (above) is the first half of this. */
.smenu.onlight .smenu-panel{background:linear-gradient(180deg,var(--bg),rgba(7,18,43,.9) 150px,rgba(7,18,43,.9) calc(100% - 110px),var(--bg))}
/* The nav sits on the open menu, so it wears its dark look there even when the page under it is light. */
html.menu-open .nav.light{background:rgba(6,13,28,.72);color:#fff;box-shadow:0 12px 34px rgba(0,0,0,.42),0 2px 6px rgba(0,0,0,.28)}
html.menu-open .nav.light::after{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)}
html.menu-open .nav.light .brand{border-color:rgba(255,255,255,.12)}
html.menu-open .nav.light .nav-toggle{color:#fff;background:rgba(255,255,255,.09)}
.smenu-back{position:absolute;inset:0;border:0;padding:0;background:transparent;cursor:pointer}
.smenu-list{position:relative;z-index:2;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;
  overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:calc(92px + env(safe-area-inset-top, 0px)) 18px calc(22px + env(safe-area-inset-bottom, 0px))}
/* margin:auto 0, not center on the panel, so the group centers vertically only while it has room: with
   more items than fit, the auto margins collapse to 0 and it reads top-down and scrolls, the same as
   before, rather than clipping at the top the way justify-content:center would (round 8, C1: "anchor
   the list so it doesn't look unfinished" -- the 2 quick routes below fill what's left of the group). */
.smenu-links{width:min(520px,100%);margin:auto 0;display:flex;flex-direction:column;gap:10px}
/* Each item's own opacity is set every frame off the same spring the glass grows on (menu.js), staggered
   by index, so no transition-delay chain is needed here. transform stays free for the .pressed swell
   below. No backdrop-filter of its own: a chip inside .smenu-panel's own backdrop root can only ever
   re-filter that panel's already-filtered output, so it was a no-op paint cost (fix round 1, T-R11). */
/* Apple-style glass capsule (fix round 1): a light translucent white fill fading 14% -> 4% top to
   bottom (2nd layer), plus a brighter specular band across the upper third only (1st layer, transparent
   below 33%) -- the "still reads as the same flat dark box as r8-4" complaint, addressed. */
.smenu-list a{position:relative;display:flex;align-items:center;min-height:64px;padding:0 22px;border-radius:20px;text-decoration:none;color:#fff;
  font:600 22px/1 Geist,sans-serif;letter-spacing:-.03em;will-change:opacity;transition:transform .16s var(--ease);
  background:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.07) 32%,transparent 33%),
    linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.04) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.14)}
.smenu-list a.pressed{transform:scale(1.045)}
.smenu-list a.smenu-offer{background:linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.05) 32%,transparent 33%),
    linear-gradient(180deg,rgba(58,160,255,.34) 0%,rgba(58,160,255,.2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(109,191,255,.3),inset 0 0 0 1px rgba(109,191,255,.6)}
.smenu-list a[aria-current="true"]{background:linear-gradient(180deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.06) 32%,transparent 33%),
    linear-gradient(180deg,rgba(58,160,255,.3) 0%,rgba(58,160,255,.16) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(157,214,255,.3),inset 0 0 0 2px rgba(157,214,255,.92)}
.smenu-list a.smenu-book{justify-content:center;margin-top:6px;color:#fff;
  background:linear-gradient(180deg,rgba(84,172,255,.95),rgba(36,128,255,.95));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.22),0 10px 24px rgba(36,128,255,.35)}
/* The quick routes sit one list gap under Book a call (was gap + 2px: 16 above the CTA, 12 under it, 10 in the list). */
.smenu-quick{display:flex;gap:10px;margin-top:0}
.smenu-quick .smenu-qbtn{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 10px;border:0;border-radius:16px;cursor:pointer;
  font:600 14px/1 Geist,sans-serif;letter-spacing:-.01em;color:#fff;will-change:opacity;transition:transform .16s var(--ease);
  background:linear-gradient(180deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.06) 32%,transparent 33%),
    linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.04) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.14)}
.smenu-quick .smenu-qbtn.pressed{transform:scale(1.06)}
.smenu-quick .smenu-qbtn .ri{display:flex;flex:0 0 auto;width:15px;height:15px}
.smenu-quick .smenu-qbtn .ri svg{width:100%;height:100%}
@media (min-width:700px) and (min-height:900px){
  .smenu-links{width:min(560px,calc(100% - 48px));gap:14px}
  .smenu-list{padding-top:calc(120px + env(safe-area-inset-top, 0px))}
  .smenu-list a{min-height:88px;font-size:28px;border-radius:24px;padding:0 26px}
  .smenu-quick .smenu-qbtn{height:56px;font-size:16px}
}
@media (max-height:700px){
  .smenu-links{gap:8px}
  .smenu-list{padding-top:calc(78px + env(safe-area-inset-top, 0px))}
  .smenu-list a{min-height:52px;font-size:18px;padding:0 16px}
  .smenu-quick .smenu-qbtn{height:40px}
}
/* A landscape phone is ~390px tall: one column ran Book a call and the quick routes off the bottom, behind
   a scroll inside the menu. Two columns of section links fit the whole menu on the screen. */
@media (max-height:500px) and (min-width:560px){
  .smenu-links{display:grid;grid-template-columns:1fr 1fr;width:min(640px,100%)}
  .smenu-list a.smenu-book,.smenu-quick{grid-column:1/-1}
  .smenu-list a{min-height:48px}
}
@media (prefers-reduced-motion:reduce){
  .nav-toggle-lines span{transition:none}
  .smenu-glass{display:none}
  .smenu-panel{transition:opacity .18s linear}
  .smenu-list a,.smenu-quick .smenu-qbtn{transition:none}
  .smenu-list a.pressed,.smenu-quick .smenu-qbtn.pressed{transform:none}
}

/* ---------- CTAs ---------- */
/* D-8: white on the old gradient (84,172,255 -> 36,128,255) measured 3.48:1, worst pixel 2.85
   (the top inset highlight line ran almost white). Darkened both stops and the highlight so white
   text clears AA's 4.5:1 everywhere on the pill, not just the darkest strip of it. */
.cta{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:600;color:#fff;text-decoration:none;cursor:pointer;white-space:nowrap;
  background:linear-gradient(180deg,rgba(36,112,200,.97),rgba(18,85,170,.97));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.12),0 6px 18px rgba(24,95,180,.38)}
.cta.white{background:#fff;color:var(--ink);box-shadow:inset 0 -1px 0 rgba(0,0,0,.08),0 8px 24px rgba(0,0,0,.25)}
.cta.sm{height:42px;padding:0 18px;font-size:14px}
.cta.lg{height:60px;padding:0 34px;font-size:17px}
.cta.ghosted{visibility:hidden}
.ghostbtn{display:inline-flex;align-items:center;justify-content:center;height:60px;padding:0 30px;border-radius:999px;font-size:17px;font-weight:500;color:#fff;text-decoration:none}
.crown{position:fixed;z-index:61;left:0;top:0;pointer-events:none;opacity:0;transform-origin:50% 85%;
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg viewBox='0 0 120 82' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 66h94l-8 11H21l-8-11Z' fill='%23ffb236'/%3E%3Cpath d='M18 60 10 20l27 22L60 7l23 35 27-22-8 40H18Z' fill='%23ffd166'/%3E%3Cpath d='M18 60h84M37 42l7 18M60 7v53M83 42l-7 18' stroke='%23ff914d' stroke-width='5' stroke-linecap='round' opacity='.72'/%3E%3Ccircle cx='10' cy='20' r='7' fill='%23ffb236'/%3E%3Ccircle cx='60' cy='7' r='7' fill='%23ffb236'/%3E%3Ccircle cx='110' cy='20' r='7' fill='%23ffb236'/%3E%3C/svg%3E");
  filter:drop-shadow(0 20px 36px rgba(255,145,77,.34)) drop-shadow(0 0 14px rgba(255,209,102,.32))}

/* ---------- tab bar (the locked droplet) ---------- */
/* pan-y (not none): a vertical drag on the bar must scroll the page, never switch tabs. Horizontal
   drags stay in JS's own hands (touch-action leaves that axis alone), so the droplet drag still works. */
.seg{display:inline-flex;height:50px;padding:5px;border-radius:25px;gap:2px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.seg button{all:unset;cursor:pointer;position:relative;z-index:2;height:40px;padding:0 17px;border-radius:20px;display:flex;align-items:center;font-size:14px;font-weight:500;color:rgba(255,255,255,.78);text-shadow:0 1px 2px rgba(0,0,0,.45);transition:color .2s}
.seg button.on{color:#fff}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:inherit}
.blob{position:absolute;z-index:1;top:5px;height:40px;border-radius:20px;background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.08);
  transition:left .55s cubic-bezier(.34,1.56,.64,1),width .55s cubic-bezier(.34,1.56,.64,1),opacity .22s ease}
/* .g > * is position:relative and would keep the droplet in the flex row, one slot left of the active tab. */
.g.seg > .blob{position:absolute;z-index:1}
/* Phone and iPad tab bars live in the round 9 block at the end of this file (lane C, r9-2). */

/* ---------- hero: look closer. Full screen, the drop goes anywhere ---------- */
.hero{min-height:100vh;padding:104px var(--gut) 44px;display:flex;overflow:hidden;position:relative}
.hero::before{content:'';position:absolute;z-index:0;left:50%;top:-180px;width:560px;height:560px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(255,255,255,.42) 0%,rgba(166,220,255,.22) 22%,rgba(58,160,255,.08) 42%,transparent 68%);filter:blur(4px);opacity:.32;pointer-events:none}
.hero::after{content:'';position:absolute;z-index:0;inset:-4%;background:linear-gradient(90deg,rgba(7,18,43,.94),rgba(7,18,43,.60),rgba(7,18,43,.92)),url('/assets/brand/hero-background-clean.webp');background-size:cover;background-position:center top;opacity:.18;mix-blend-mode:screen;pointer-events:none;filter:saturate(1.08) blur(1.2px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent)}
.brand-light{position:absolute;z-index:0;left:50%;top:-70px;width:210px;height:430px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(109,191,255,.18) 35%,transparent 84%);filter:blur(18px);opacity:.42;pointer-events:none;clip-path:polygon(36% 0,64% 0,100% 100%,0 100%)}
.brand-mesh{position:absolute;z-index:1;width:240px;height:440px;background-image:radial-gradient(rgba(255,255,255,.78) 1px,transparent 1.7px);background-size:7px 7px;opacity:.22;pointer-events:none}
.brand-mesh--left{left:0;top:0;-webkit-mask-image:radial-gradient(ellipse at top left,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at top left,#000 30%,transparent 75%)}
.brand-mesh--right{right:0;top:0;-webkit-mask-image:radial-gradient(ellipse at top right,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at top right,#000 30%,transparent 75%)}
.hero .copy{position:relative;width:100%;max-width:var(--wrap);margin:0 auto;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.hero .copy a,.hero .copy button,.hero .kicker,.hero h1,.hero .lede,.hero .hint{pointer-events:auto}
.hero .kicker,.hero h1{position:relative;z-index:4}
.hero h1{font:600 clamp(58px,10.4vw,172px)/.9 Geist,sans-serif;letter-spacing:-.066em;margin:auto 0}
.hero h1 .l1{display:block}
.hero h1 .l2{display:block;text-align:right;margin-top:.02em}
.hero h1 em{display:inline-block;position:relative;font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;color:var(--accent-bright);letter-spacing:-.02em;font-size:1.1em;padding-right:.04em}
.hfoot{position:relative;z-index:6;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.hero .lede{margin:0;max-width:500px;font-size:19px}
.hero .ctas{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
.hint{margin-top:14px;font-size:14px;color:var(--faint);text-align:right}
.hprice{margin-top:14px;font-size:15px;color:var(--muted);text-align:right;letter-spacing:-.005em}
.hprice b{color:#fff;font-weight:600}
.hprice .nw{white-space:nowrap}
.hproof{margin-top:6px;font-size:14px;color:var(--muted);text-align:right;letter-spacing:-.005em}
.hint.phone{display:none}
@media (hover:none),(pointer:coarse){.hero .hint.desk{display:none}.hero .hint.phone{display:block}}
/* Dense phones already show the proof tiles above the H1 (c-4); a second proof line there just
   crowds the hint underneath it, so it only ships at 600px and up (the narrow-desktop QA width). */
@media (max-width:599px){.hproof{display:none}}
.xwin{position:absolute;left:0;top:0;border-radius:50%;overflow:hidden;z-index:5;pointer-events:none;will-change:transform;background:#050a18}
.xproof{position:absolute;left:0;top:0;will-change:transform;background:radial-gradient(60% 60% at 50% 40%,rgba(58,140,255,.18),transparent 70%),#060c1c}
.pw{position:absolute;transform:translate(-50%,-50%);width:214px;padding:8px 8px 15px;border-radius:18px;background:linear-gradient(180deg,#0f1a33,#0a1224);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.14),0 16px 36px rgba(0,0,0,.55)}
.pw .th{height:96px;border-radius:11px;background:#050a18;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.pw .th img{max-width:100%;max-height:100%;width:auto;height:auto}
.pw b{display:block;font:600 38px/1 Geist,sans-serif;letter-spacing:-.05em;margin:13px 6px 0;white-space:nowrap}
.pw span{display:block;font-size:13px;line-height:1.3;color:#9fb3cf;margin:6px 6px 0}
.pw.q b{font:italic 400 27px/1.08 "Instrument Serif",serif;letter-spacing:-.01em;color:var(--accent-bright);white-space:normal}
.xcap{position:fixed;z-index:63;left:0;top:0;pointer-events:none;height:34px;padding:0 14px;border-radius:17px;display:flex;align-items:center;gap:8px;font-size:13px;white-space:nowrap;opacity:0;transition:opacity .25s;
  background:rgba(12,22,44,.62);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)}
.xcap b{font-weight:600}.xcap span{color:var(--accent-bright)}
.xcap.on{opacity:1}
.pband{display:none}
@media (max-width:860px){.hfoot{grid-template-columns:1fr}.hero .ctas{justify-content:flex-start}.hint,.hprice,.hproof{text-align:left}.hero h1 .l2{text-align:left}}
/* phone hero: a few full receipts above the headline. The copy starts just under the band. */
.hero.is-phone{height:100vh;height:100svh;min-height:100vh;min-height:100svh;max-height:100svh;min-width:0}
/* Tablet widths use the phone band, but the hero wraps the band and the copy instead of stretching to the screen. */
@media (min-width:600px) and (max-width:859px){
  .hero.is-phone{height:auto;min-height:0;max-height:none}
}
/* A short landscape phone is wide enough for the tablet band, which then fills the screen and
   pushes the headline off it. Pin the hero to one screen so the pitch stays in view. */
@media (max-height:500px) and (min-width:600px) and (max-width:900px){
  .hero.is-phone{height:100svh;min-height:100svh;max-height:100svh}
}
/* A phone hero hugs its content (hero.js), so the backdrop image stopped dead at the hero's bottom edge:
   a straight line where (9,24,51) met the page's (7,18,43) above #numbers. Fade it out over the last
   stretch instead. The ::after runs 4% past the hero (inset -4%), so its 96% is the hero's own bottom. */
.hero.is-phone::after{-webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent),linear-gradient(180deg,#000 calc(96% - 180px),transparent 96%);mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent),linear-gradient(180deg,#000 calc(96% - 180px),transparent 96%);-webkit-mask-composite:source-in;mask-composite:intersect}
.hero.is-phone .pband{display:grid;position:absolute;z-index:2;pointer-events:none;gap:10px;align-items:stretch}
.hero.is-phone .pw{opacity:.9;display:flex;flex-direction:column;min-width:0;padding:6px 6px 8px}
.hero.is-phone .pband .pw{position:relative;left:auto;top:auto;width:100%;height:100%;transform:none}
.hero.is-phone .pw .th{flex:1 1 auto;height:auto;min-height:16px}
.hero.is-phone .pw b{white-space:nowrap;font-size:clamp(13px,4.8vw,38px);line-height:1;margin:6px 2px 0}
.hero.is-phone .pw.q b{white-space:normal}
.hero.is-phone .pw.q b{font-size:20px;line-height:1.1}
.hero.is-phone .pw span{font-size:12px;line-height:1.25;margin:3px 2px 0}
.hero.is-phone .pw.hot{z-index:4}
/* A held finger on a tile made iOS select the whole hero block (blue wash, Copy / Look Up bar). The tiles are
   buttons now, so only the words keep the long-press selection. */
.hero.is-phone{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hero.is-phone .copy{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
/* r9-5: on touch a tile is a plain tile. A tap opens it; a finger on it presses it in a touch (hero.js press). */
.hero.is-phone .pw{transition:scale .14s var(--ease-soft)}
.hero.is-phone .pw.pressed{scale:.96;filter:brightness(1.2)}
@media (prefers-reduced-motion:reduce){.hero.is-phone .pw{transition:none}.hero.is-phone .pw.pressed{scale:none}}
.hero.is-phone .copy{position:absolute;z-index:6;left:0;right:0;top:var(--copy-top,46%);bottom:auto;height:auto;width:auto;max-width:none;margin:0;padding:0 var(--gut) 12px;justify-content:flex-start;gap:8px;min-width:0}
.hero.is-phone.cramped .copy{gap:4px;padding-bottom:6px}
.hero.is-phone.cramped .hfoot{gap:6px}
.hero.is-phone.cramped .hint{margin-top:2px}
.hero.is-phone.cramped .lede{line-height:1.35}
.hero.is-phone h1{margin:0;font-size:clamp(32px,8.2vw,64px)}
.hero.is-phone .lede{font-size:clamp(15px,3.5vw,18px);line-height:1.45;max-width:36em}
.hero.is-phone .kicker{font-size:13px}
.hero.is-phone .cta.lg,.hero.is-phone .ghostbtn{height:48px;padding:0 16px;font-size:15px}
/* D-12: was 13px/14px, under the 15px floor for phone body copy. */
.hero.is-phone .hint{margin-top:8px;font-size:15px}
.hero.is-phone .hprice{margin-top:10px;font-size:15px}
.hero.is-phone .hproof{margin-top:4px;font-size:15px}
.hero.is-phone.cramped .hint{display:none}
.hero.is-phone .hfoot{gap:12px}
/* A touch iPad at 861px and up keeps the desktop's two-column foot under the receipt band, so Book the call
   starts level with the bottom of the headline box and sat on the "asset." underline. Give it air. */
@media (min-width:861px){.hero.is-phone .hfoot{margin-top:26px}}
/* Landscape phones fit the tablet band's width but not its height. The band drops to one row
   (hero.js) and the headline and lede shrink further so the CTA and price clear the fold too. */
@media (max-height:500px) and (min-width:600px) and (max-width:900px){
  .hero.is-phone h1{font-size:clamp(22px,5.6vw,32px)}
  .hero.is-phone .lede{font-size:13px;line-height:1.25;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px}
  .hero.is-phone .hfoot{gap:6px}
  .hero.is-phone .hint{display:none}
  .hero.is-phone .hprice{margin-top:4px;font-size:12px}
  /* the proof line stayed at 15px under a 12px price line, bigger than the line it supports */
  .hero.is-phone .hproof{margin-top:2px;font-size:12px}
}
/* Too short for a readable screenshot (hero.js adds .bare under 28px): number and label, centred in the tile. */
.hero.is-phone.bare .pw .th{display:none}
.hero.is-phone.bare .pw{justify-content:center}
/* Load-time CLS fix (D-4): before hero.js's first size() pass, this hero rendered in its
   desktop shape (auto height, .copy in normal flow near the top), then jumped into the phone
   shape the instant JS ran (.copy y 104 -> 350 on an iPhone 15 Pro, CLS 0.26-0.34). A real
   viewport media query already knows "phone" at first paint, so give the hero its phone box and
   land .copy near its final spot (the same 46% hero.js itself falls back to) before any script
   runs, instead of moving already-painted boxes. hero.js's own .is-phone rules above take over
   (same specificity fight always won by the two-class selector) the instant the class lands, so
   this is a pure pre-script scaffold, never a second source of truth. */
@media (max-width:859px){
  /* Metric-matched fallbacks (declared above, near :root): phone widths are where the swap-in
     shift was actually measured, so the fallback swap is scoped here rather than sitting on the
     unconditional rule. Widening this past 859px chases a DIFFERENT, pre-existing bug: the
     headline's manual two-line markup (.l1/.l2, each display:block) still lets a single line wrap
     internally, and at isolated desktop widths (1024px measured 0.32, 1280px 0.41, on the
     untouched base too) a font swap flips it between one line and two. Metric-matching only moves
     that boundary, it does not remove it (1279px "fixed" 1024px but broke 1280px). That is a real,
     separate bug worth a real fix (e.g. no-wrap the two spans, or font-display:block on Geist) --
     not something to paper over here with a fallback tuned for one width and wrong for the next. */
  .hero h1{font-family:Geist,"Geist Fallback",sans-serif}
  .hero h1 em{font-family:"Instrument Serif","Instrument Serif Fallback",serif}
  .hero:not(.is-phone) .copy{position:absolute;z-index:6;left:0;right:0;top:46%;bottom:auto;height:auto;width:auto;max-width:none;margin:0;padding:0 var(--gut) 12px;justify-content:flex-start;gap:8px;min-width:0}
  .hero:not(.is-phone) h1{margin:0;font-size:clamp(32px,8.2vw,64px)}
  .hero:not(.is-phone) .lede{font-size:clamp(15px,3.5vw,18px);line-height:1.45;max-width:36em}
  .hero:not(.is-phone) .kicker{font-size:13px}
  .hero:not(.is-phone) .cta.lg,.hero:not(.is-phone) .ghostbtn{height:48px;padding:0 16px;font-size:15px}
  .hero:not(.is-phone) .hint{margin-top:8px;font-size:15px}
  .hero:not(.is-phone) .hprice{margin-top:10px;font-size:15px}
  .hero:not(.is-phone) .hfoot{gap:12px}
}
/* Under 600px hero.js makes the hero one screen tall only while its content needs it; on a taller
   window it wraps the content (698-775px measured from 320 to 599 wide), so #numbers follows at a
   normal gap. Land close to that before script runs, so the wrap is not a big load shift. */
@media (max-width:599px){
  .hero:not(.is-phone){height:min(100vh,calc(655px + 20vw));height:min(100svh,calc(655px + 20vw));min-height:min(100svh,calc(655px + 20vw));max-height:min(100svh,calc(655px + 20vw));min-width:0}
}
/* 600-859 is the one range hero.js does NOT pin to the screen: its "fit" branch wraps the band
   and copy, then sets an explicit pixel height from what it measured (694-794px across this
   range on the merged site, not proportional to viewport height at all). A flat 100vh guess here
   undershoots or overshoots by 200-300px. Measured hero.js's own output at 600px (719) and 859px
   (794): close enough to straight-line that a width-based calc lands within about 20px everywhere
   between, instead of moving #numbers by a third of the screen once hero.js's real number lands. */
@media (min-width:600px) and (max-width:859px){
  .hero:not(.is-phone){height:calc(545px + 29vw);min-height:calc(545px + 29vw);max-height:calc(545px + 29vw);min-width:0}
}
/* A short landscape phone in that same width band gets pinned to the screen instead (hero.js's
   "short" branch, not "fit"): this comes after the calc rule above so it wins there by source order. */
@media (max-height:500px) and (min-width:600px) and (max-width:900px){
  .hero:not(.is-phone){height:100svh;min-height:100svh;max-height:100svh}
  .hero:not(.is-phone) h1{font-size:clamp(22px,5.6vw,32px)}
  .hero:not(.is-phone) .lede{font-size:13px;line-height:1.25;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px}
  .hero:not(.is-phone) .hfoot{gap:6px}
  .hero:not(.is-phone) .hint{display:none}
  .hero:not(.is-phone) .hprice{margin-top:4px;font-size:12px}
}
html.is-phone .lens.hdrop.mini{display:none !important}

/* ---------- a stage: every screenshot shown whole, centred, the same way everywhere ---------- */
.stage{position:relative;overflow:hidden;border-radius:20px;
  background:radial-gradient(90% 75% at 50% 0%,rgba(58,140,255,.24),transparent 70%),#060b18}
.stage > .st{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(12px,2.2vw,28px)}
.stage > .st.col{grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:18px}
.tile .st.col{grid-template-rows:minmax(0,5fr) minmax(0,1fr);gap:12px}
.stage > .st.pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.stage > .st > div{position:relative;width:100%;height:100%;min-width:0;min-height:0;display:grid;place-items:center}
/* The img shrink-wraps the picture (auto size, capped at its slot), so the rim, the shadow and the rounded corners sit on
   the screenshot itself, not on a bigger empty box around it. An absolute stretch here would letterbox inside a full box
   and the box's own ratio would change whenever the tile did. */
.stage img{width:auto;height:auto;max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain;border-radius:14px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 26px 60px rgba(0,0,0,.55);transition:transform 1.2s var(--ease-soft)}

/* ---------- numbers: tap one for the proof behind it ---------- */
/* Each card spans 3 shared rows through subgrid (label, number, caption), so a row of cards shares one number baseline
   and one height, and equal padding centres the block. (The old fixed 250px card with top-aligned content left the
   bottom half empty.) */
.hl{--nr:auto auto auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:var(--nr);column-gap:16px;row-gap:0;align-items:stretch}
.num{cursor:pointer;display:grid;grid-row:1/span 3;grid-template-rows:subgrid;row-gap:0}
.num .face{grid-row:1/-1;display:grid;grid-template-rows:subgrid;row-gap:0;padding:44px 28px;transition:opacity .35s,transform .6s var(--ease)}
.num .face>.big{grid-row:2}.num .face>.cap{grid-row:3}
.num .peek{position:absolute;top:12px;right:26px;font-size:13px;line-height:1;color:var(--accent-bright)}
.big{font:600 clamp(48px,5.2vw,78px)/1 Geist,sans-serif;letter-spacing:-.062em}
.big small{font-size:.5em;letter-spacing:-.03em;color:var(--muted);margin-left:2px}
.cap{font-size:15px;line-height:1.4;color:var(--muted);margin-top:12px;text-wrap:pretty}
.num .back,.quote .back{position:absolute;inset:10px;opacity:0;transform:scale(.94);transition:opacity .35s,transform .6s var(--ease);z-index:3}
.num .back .st{inset:0;padding:14px 14px 42px}
.num .back>span{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:12.5px;line-height:1.35;color:var(--muted);padding:0 12px}
.num .back>span b{color:#fff;font-weight:600}
.quote .back .st{inset:0}
.num.flip .face,.quote.flip .face{opacity:0;transform:scale(1.04)}
.num.flip .back,.quote.flip .back{opacity:1;transform:none}
/* r9 Q M3 (touch): the proof sits straight on the card, so the card keeps one rim (the dark inner panel read as a second
   one), and the words get their own row under the picture instead of an overlap that let the two touch. */
@media (hover:none),(pointer:coarse){
  .num .back{inset:0;background:none;border-radius:inherit;display:flex;flex-direction:column;gap:10px;padding:14px 12px 14px}
  .num .back>.st{position:relative;inset:auto;flex:1 1 0;min-height:0;padding:0;grid-template:minmax(0,1fr)/minmax(0,1fr)}
  .num .back>span{position:static;flex:none;padding:0}
}
@media (max-width:900px){
  /* 2 rows of cards: a fixed spacer track between them (a parent row-gap would leak into the subgrid) */
  .hl{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:var(--nr) 16px var(--nr)}
  .num{min-width:0}
  .num:nth-child(n+3){grid-row:5/span 3}
  #numbers .num .face{padding:36px 22px}
  #numbers .num .peek{position:static;grid-row:1;display:block;width:fit-content;max-width:100%;margin:0 0 8px;line-height:1.2}
}
/* D2: 12px horizontal was under the 22px phone floor, so the number sat almost against the card's own
   rounded corner. */
@media (max-width:520px){.hl{column-gap:10px;grid-template-rows:var(--nr) 10px var(--nr)}#numbers .num .face{padding:22px}.big{font-size:clamp(28px,8vw,42px)}.cap{font-size:13px}}

/* ---------- case grid + sheet ---------- */
.segwrap{position:relative;margin-top:36px}
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:22px;align-items:stretch;overflow-anchor:none}
#cases .tile[hidden]{display:none !important}
#cases.moving .tile{backdrop-filter:none;-webkit-backdrop-filter:none}
/* While the grid height eases, a shot can collapse to a few pixels for one frame and the picture's box rounds off its shape. */
#cases.moving .tile .shot{min-height:160px}
.tile{cursor:pointer;overflow:hidden;display:flex;flex-direction:column;min-width:0;min-height:0;transition:opacity .5s var(--ease-soft),transform .6s var(--ease),filter .5s}
.tile .shot{flex:1 1 auto;min-height:0;margin:4px 10px 10px;aspect-ratio:4/5}
.tile:hover .stage img{transform:scale(1.03)}
.tile .meta{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:22px 22px 6px}
.tile .who{font-size:13px;line-height:1.3;color:var(--muted)}
.tile .num2{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:2px;margin-top:6px;min-width:0;max-width:100%;white-space:normal}
.tile .num2 .fig{font:700 clamp(44px,12vw,56px)/.88 Geist,sans-serif;letter-spacing:-.06em;white-space:nowrap}
.tile .num2 em{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;font-size:clamp(20px,2vw,28px);line-height:1.05;color:var(--accent-bright);letter-spacing:-.01em}
.tile .chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none;width:100%}
.tile .chips li{font-size:13.5px;line-height:1.3;color:#e7eef8;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.tile .go{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-top:14px}
.tile .story{appearance:none;-webkit-appearance:none;background:none;border:0;padding:4px 0;margin:0;cursor:pointer;color:#fff;font:600 16px/1.2 Geist,sans-serif;text-decoration:underline;text-underline-offset:4px;text-align:left}
.tile .story .n{color:var(--accent-bright);font-weight:700;margin-left:8px;text-decoration:none}
.tile .story .rl{color:var(--accent-bright);font-weight:500;text-decoration:none}
.opn{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:18px}
.tile.wide{grid-column:1/-1;min-height:0}
/* Wide and solo: the number sits left, the screenshot beside it. Half tiles keep the shot underneath. */
@media (min-width:761px){
  .tile .num2 .fig{font-size:clamp(64px,5.4vw,96px)}
  .tile .num2 em{font-size:clamp(26px,2vw,40px)}
  #cases .tile.wide,#cases .tile.solo{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:stretch;min-height:480px}
  #cases .tile.wide .meta,#cases .tile.solo .meta{justify-content:center;padding:36px 28px 32px 40px}
  #cases .tile.wide .go,#cases .tile.solo .go{justify-content:flex-start;gap:16px}
  #cases .tile.wide .shot,#cases .tile.solo .shot{aspect-ratio:auto;margin:14px 14px 14px 0;min-height:0}
  #cases .tile.solo{grid-column:1/-1}
  /* 4/5 shots run past 80vh once the number block sits above them. Cap the tile, let the stage give. */
  #cases .tile:not(.wide):not(.solo){max-height:calc(80vh - 2px)}
  #cases .tile:not(.wide):not(.solo) .shot{flex:1 1 auto;min-height:0}
  #cases .tile:not(.wide):not(.solo) .meta{flex:0 0 auto}
  /* Health puts this pair in a tall half column beside a full analytics shot. Side by side leaves a dark field above and below. Stack so both shots use the height. */
  #cases .tile:not(.wide):not(.solo) .st.pair{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,.9fr) minmax(0,1.2fr);gap:12px}
}
.tile.dim{opacity:.2;transform:scale(.97);filter:saturate(.2)}
@media (max-width:760px){
  .cases{grid-template-columns:1fr}
  /* D2, r8-5: a fixed one-screen tile stretched .shot with flex to fill whatever height was left, so an
     image shallower than that leftover space (oc's near-square screenshot) sat over a ~250px empty band
     of stage background, and a tile whose meta+shot together ran taller than the fixed box let the shot
     spill past the tile's own bottom edge into the next one. The tile now follows its content instead;
     .shot sizes to its image's own ratio (--ar, set per tile below, pair/col tiles use the two images'
     combined ratio) and keeps the old one-screen figure as a cap, not a fixed size, for a tall shot. */
  #cases .tile{height:auto;max-height:none}
  #cases .tile .meta{padding:22px;flex:0 0 auto}
  #cases .tile .who{font-size:12px}
  #cases .tile .num2{margin-top:2px}
  #cases .tile .num2 em{font-size:18px}
  #cases .tile .chips{margin-top:8px;gap:5px}
  /* D-12: was 12px, under the 15px floor. A content-height tile always has room for it. */
  #cases .tile .chips li{font-size:15px;padding:3px 8px}
  #cases .tile .go{margin-top:6px}
  #cases .tile .story{font-size:15px}
  #cases .tile .shot,#cases .tile.wide .shot,#cases .tile .shot:has(.st.pair){aspect-ratio:var(--ar,.8);flex:none;min-height:0;margin:0 8px 8px;max-height:calc(100dvh - 84px - env(safe-area-inset-top, 0px))}
  /* Two shots side by side in the short phone stage shrink the reply until it cannot be read. Stack them. */
  #cases .tile .st.pair{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,.85fr) minmax(0,1.15fr);gap:8px;padding:8px}
}
/* The colour says what the number measures. White fades to full tone by half the glyph's height, so the tone
   reads as the number's own colour rather than a thin hem at the bottom. 17 months stays white. The sheet
   headline (opened from a tile) carries the same tone, so the colour survives the click. */
#numbers .num[data-tone="reach"],.tile[data-tone="reach"],.sheet[data-tone="reach"],.shd[data-tone="reach"]{--tone:#6dbfff}
#numbers .num[data-tone="growth"],.tile[data-tone="growth"],.sheet[data-tone="growth"],.shd[data-tone="growth"]{--tone:#37d399}
#numbers .num[data-tone="warm"],.tile[data-tone="warm"],.sheet[data-tone="warm"],.shd[data-tone="warm"]{--tone:#ff9646}
.tile[data-tone="gold"],.sheet[data-tone="gold"],.shd[data-tone="gold"]{--tone:#ffd166}
#numbers .num[data-tone] .big,#numbers .num[data-tone] .cn,.tile[data-tone] .fig,.sheet[data-tone] .head h3{background-image:linear-gradient(180deg,#fff 0%,var(--tone) 50%,var(--tone) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* "400 → " is the before-value, not the result: it stays plain white inside the coloured figure. The sheet's
   trailing clause (the <em>) resets back to a solid tone instead of inheriting the headline's transparent fill. */
.tile[data-tone] .fig .pre{background:none;-webkit-text-fill-color:#fff;color:#fff}
/* Screen-reader-only text: takes no visual space, so it can spell out what an aria-hidden glyph (the arrow) skips. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sheet[data-tone] .head h3 em{background:none;-webkit-text-fill-color:var(--tone);color:var(--tone)}
#numbers .num[data-tone] .pl{background:none;-webkit-text-fill-color:#ffd166;color:#ffd166}
#numbers .num[data-tone="reach"] .pl{-webkit-text-fill-color:#6dbfff;color:#6dbfff}
#numbers .num[data-tone="growth"] .pl{-webkit-text-fill-color:#37d399;color:#37d399}
.tile[data-tone] .num2 em{color:var(--tone)}
.tile[data-tone="reach"] .chips li{box-shadow:inset 0 0 0 1px rgba(109,191,255,.3)}
.tile[data-tone="growth"] .chips li{box-shadow:inset 0 0 0 1px rgba(55,211,153,.3)}
.tile[data-tone="gold"] .chips li{box-shadow:inset 0 0 0 1px rgba(255,209,102,.3)}
.tile[data-tone="warm"] .chips li{box-shadow:inset 0 0 0 1px rgba(255,150,70,.3)}
.close{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;font-size:20px;border:0;color:#fff}
.viewer{margin-top:18px;flex:1;min-height:0;display:flex;align-items:center;gap:14px;padding:6px 26px}
/* E1: a slide is 2 parts, the headline (sbig/sunit/sline/sfacts) and the screenshot, so the number always
   sits beside the picture it belongs to (the old site paired every screenshot with its own number). Stacked,
   headline above, under 900px; a fixed-width column beside the image from 900px up. */
.slide{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;gap:14px}
.shd{flex:0 0 auto;min-width:0;transition:opacity .18s var(--ease-soft)}
.shd .sbig{font:700 clamp(32px,7vw,44px)/1.05 Geist,sans-serif;letter-spacing:-.05em;text-wrap:pretty;
  background-image:linear-gradient(180deg,#fff 0%,var(--tone,#6dbfff) 55%,var(--tone,#6dbfff) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* A quoted line (someone's own words) reads as a quote, not a stat: the tile/hero serif-italic treatment. */
.shd .sbig.q{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;line-height:1.18;letter-spacing:-.01em;font-size:clamp(32px,7vw,40px);background:none;-webkit-text-fill-color:var(--tone,var(--accent-bright));color:var(--tone,var(--accent-bright))}
.shd .sunit{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;color:var(--accent-bright);font-size:clamp(15px,2vw,18px);margin-top:4px}
.shd .sline{color:#dbe8fa;font-size:14.5px;line-height:1.4;margin-top:8px;max-width:48ch;text-wrap:pretty}
.shd .sfacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.shd .sfacts:empty{display:none}
.shd .sfacts span{height:26px;padding:0 11px;border-radius:13px;display:inline-flex;align-items:center;font-size:12.5px;color:#dbe8fa;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.vbox{position:relative;flex:1;min-height:0;width:100%;min-width:0;display:grid;place-items:center;touch-action:pan-y;cursor:grab}
.vframe{position:relative;border-radius:16px;overflow:hidden;background:#050914;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 22px 60px rgba(0,0,0,.45)}
/* E1 bug fix: contain, never cover. A frame even a fraction off the image's own ratio used to crop the
   screenshot (the coach chat's first bubble lost its top); contain can only letterbox, never crop, at any width. */
.vframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .38s var(--ease-soft),transform .6s var(--ease-soft);cursor:zoom-in}
.vbtn{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:22px;cursor:pointer;border:0;color:#fff}
.vbtn[disabled]{opacity:.3;cursor:default}
.vfoot{padding:14px 36px 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.dots{grid-column:2;display:flex;gap:6px;justify-self:center;padding:6px 8px;border-radius:14px}
.dots i{display:block;height:8px;width:8px;border-radius:4px;background:rgba(255,255,255,.3);cursor:pointer;transition:width .45s var(--ease),background .3s}
.dots i.on{width:22px;background:#fff}
.count{grid-column:3;justify-self:end;font-size:13px;color:var(--faint)}
@media (min-width:900px){
  .slide{flex-direction:row;align-items:stretch;gap:28px}
  /* Controller fix round (2026-09-28): centre the headline on the image's own box -- a short or
     wide screenshot sits vertically centred in the tall .vbox (place-items:center), so a
     top-pinned headline floated well above it. Centring both reads as one row, the way the old
     site paired every number with its picture. */
  .shd{flex:0 0 36%;max-width:38%;display:flex;flex-direction:column;justify-content:center;padding-top:4px}
  .shd .sbig{font-size:clamp(44px,4.9vw,84px)}
  .shd .sbig.q{font-size:clamp(44px,2.8vw,54px)}
  /* A screenshot wider than ~2:1 (a chat bubble) only needs a little height at the normal 64%
     column width, so it read small even at "100% of its column". Give it a narrower headline
     column instead, so the picture itself grows (still capped by fitTo() at the image's own
     ratio -- never upscaled past its natural pixel size, so it can't blur). */
  .slide.wide-shot{gap:18px}
  .slide.wide-shot .shd{flex:0 0 200px;max-width:200px}
}
@media (max-width:700px){
  .vbtn{display:none}
  .sheet .head{flex:0 0 auto;min-width:0}
  .viewer{order:-1;flex:0 0 auto;height:60vh;min-height:300px;margin-top:0;padding:6px 16px}
  .slide{gap:10px}
  .shd .sbig{font-size:clamp(30px,9vw,38px)}
  .shd .sline{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  .vfoot{order:-1;flex:none;min-width:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:12px;row-gap:8px;padding:12px 16px 0}
}

/* ---------- client words ---------- */
.quotes{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:48px;align-items:stretch}
.quote{padding:32px 30px 28px;cursor:pointer;min-height:260px;min-width:0;display:flex;flex-direction:column}
.quote .face{display:flex;flex-direction:column;justify-content:space-between;flex:1;min-width:0;transition:opacity .35s,transform .6s var(--ease)}
.quote .q{font:500 24px/1.3 Geist,sans-serif;letter-spacing:-.03em;text-wrap:pretty}
.quote .q::before{content:"\201C";display:block;font-family:"Instrument Serif",serif;font-size:64px;line-height:.6;color:var(--accent-bright);margin-bottom:10px}
.quote .by{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:nowrap;width:100%;min-width:0;margin-top:auto;padding-top:22px;font-size:14px;color:var(--muted)}
/* D-11: an ellipsis here cut real attributions short ("Founder, after a we…") on the narrower
   phones. There is room to wrap instead: the card already flexes to its content's height. */
.quote .by .who{min-width:0;white-space:normal;overflow-wrap:break-word}
.quote .by .chat{flex:none;white-space:nowrap;font-size:13px;color:var(--accent-bright)}
@media (min-width:640px){.quotes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.quotes{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- what I run ---------- */
.run{margin-top:30px;display:grid;grid-template-columns:1fr 1.25fr;min-height:540px;overflow:hidden}
.run .txt{padding:48px 46px;display:flex;flex-direction:column;justify-content:center}
.run .panel{display:none}.run .panel.on{display:contents}
.run h3{font:600 44px/1.04 Geist,sans-serif;letter-spacing:-.05em;text-wrap:balance}
.run h3 em{font-family:"Instrument Serif",serif;font-weight:400;color:var(--accent-bright)}
.run p{color:var(--muted);font-size:17px;line-height:1.55;margin-top:16px;max-width:460px}
.rows{margin-top:28px;display:flex;flex-direction:column}
.rows div{display:flex;gap:14px;align-items:center;padding:14px 0;border-top:1px solid rgba(255,255,255,.08);font-size:15.5px;color:#dbe6f6}
.rows i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13px;color:#fff;background:rgba(58,160,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.run .vis{margin:12px}
.run .vis img{cursor:zoom-in}
.enter{animation:enter .7s var(--ease-soft) both}
@keyframes enter{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;height:46px;padding:0 18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;color:#fff;text-decoration:none;white-space:nowrap;cursor:pointer;
  background:linear-gradient(180deg,rgba(84,172,255,.95),rgba(36,128,255,.95));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 28px rgba(0,0,0,.4)}
@media (max-width:900px){.run{grid-template-columns:minmax(0,1fr)}.run .txt,.run .vis{min-width:0}.run .vis{min-height:360px}}

/* ---------- who it's for ---------- */
#fit{padding-bottom:0}
.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:48px;align-items:stretch}
.fit h4{font:600 26px/1.2 Geist,sans-serif;letter-spacing:-.035em}
.fit .rows div{font-size:17px;padding:19px 0}
.fit .no .rows i{background:rgba(255,150,70,.2)}

/* ---------- about ---------- */
/* Label and heading sit centred over one grid. The portrait keeps 1178x1400, so the frame
   never crops the picture. Its own ratio rarely matches the copy block's height exactly (the
   copy reflows a line at different widths), so the row centres both columns instead of top-
   aligning them: whichever spare gap that mismatch leaves splits evenly top and bottom. */
#about .ahead{text-align:center}
#about .ahead .title{max-width:none;margin-left:auto;margin-right:auto}
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,56px);align-items:center;margin:clamp(36px,4.5vw,56px) auto 0;max-width:1140px}
.portrait{--photo-x:50%;--photo-y:50%;padding:10px;border-radius:32px;display:flex;align-items:flex-start;position:relative;transform-origin:center center;width:100%;max-width:calc((80dvh - 20px) * 1178 / 1400);margin-inline:auto}
.portrait img{border-radius:24px;width:100%;height:auto;aspect-ratio:1178/1400;flex:0 0 auto;object-fit:contain;object-position:center center}
.about .right{display:flex;flex-direction:column;justify-content:flex-start}
#about .right > .lede:first-child{margin-top:0}
#about .right .lede{max-width:none}
#about .acct{color:#fff;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.34);transition:text-decoration-color .3s}
#about .acct:hover,#about .acct:focus-visible{text-decoration-color:var(--accent-bright)}
.astats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px;align-items:stretch}
#about .astat{border-radius:22px;padding:16px;min-width:0;display:flex;flex-direction:column}
#about .astat .big{font-size:clamp(26px,2.2vw,36px);letter-spacing:-.05em;line-height:1;white-space:nowrap}
#about .astat .cap{margin-top:10px;font-size:13.5px;line-height:1.35}
/* D2: same 22px phone floor as the other cards; 16px applied at every width before this. */
@media (max-width:599px){.astats{grid-template-columns:minmax(0,1fr)}#about .astat{padding:22px}}
/* Below 1100px the natural-ratio photo (5fr of the row) is shorter than the copy column can run,
   and floats with empty space above and below it (round 7 fix round 1, U-R3: judge found up to
   88px each side at 900-1100px, e.g. 900x900 frame 384px vs 559px copy). One column, photo on
   top, all the way up to where the two-column widths (1280+) are confirmed fine. */
@media (max-width:1099px){.about{grid-template-columns:minmax(0,1fr);gap:28px;max-width:none}.about>.right,.title{min-width:0;max-width:100%}.title em.mark{display:inline}.portrait img{min-height:0}}
/* tablets in one column: one centred reading column, the photo as wide as the text, so both share the same two edges */
@media (min-width:600px) and (max-width:1099px){#about .about{max-width:640px;margin-inline:auto}#about .portrait{max-width:min(100%, calc((80dvh - 20px) * 1178 / 1400));max-height:none;margin-inline:auto}}

/* ---------- the offer: the page turns white, like your original ---------- */
/* Both fades live in the section's own padding: --pf of fade, then solid cream (--ps above the label, --pe under the card).
   The About section gives up its bottom padding and the FAQ most of its top, so the fade IS the gap between chapters.
   --pf is registered so JS can read it in px: the nav turns light at the middle of each fade (sections.js). */
/* About's stat cards sat 10px above the fade (round 7 fix round 2, V-8): zero bottom padding left no
   air of its own, so the cards read as jammed against the horizon band. 56px gives them air without
   stacking on top of the fade's own shortened padding below (round 7 fix round 3, void #2). */
#about{padding-bottom:56px}
#faq{padding-top:clamp(16px,2vw,32px)}
#hero,#numbers,#reality,#results,#run,#words,#fit,#about,#offer,#faq,#book,#contact{scroll-margin-top:calc(76px + env(safe-area-inset-top, 0px))}
@property --pf{syntax:'<length>';inherits:true;initial-value:0px}
/* --pf was 72-104px: short enough that the intermediate #0c2f66/#3a7fd8/#c9dcf2 stops packed into
   that span read as one saturated blue stripe (round 7 fix round 2, V-8). V-8 fixed the stripe by
   dropping the two stops to a plain navy-to-cream gradient, which no longer needed a wide band to
   avoid banding, but widened --pf to >=240px anyway (matching the mock's own fade distance).
   Because .pricing's own top/bottom padding is `pf + ps` / `pf + pe`, that alone opened a ~400px
   dead band between the About stats and this section, and a ~300px one before the FAQ (round 7 fix
   round 3, voids #2/#3: a blind phone test read them as the page stalling). The 2-stop gradient is
   kept; --pf goes back down to a short, still-soft band, and --ps/--pe (the section's own padding
   beyond the fade) are tightened so the copy starts right after it. --pf still drives
   sections.js's nav-flip midpoint, so the two stay in sync.
   --ps was tightened too far (round 7 fix round 3): 32-48px let "The offer" label land on the
   fade's own tail, exactly what Mike called "literally in the middle of the transition" on 09-24.
   test_review_d.py's offerSolidAboveLabel needs clamp(64,7vw,120)px of solid cream above the
   label; --ps now matches that formula exactly (round 7 fix round 4), so the label always clears
   the fade while --pf itself stays short. */
.pricing{--pf:clamp(96px,4vw,132px);--ps:clamp(64px,7vw,120px);--pe:clamp(28px,2.5vw,40px);color:var(--ink);
  padding:calc(var(--pf) + var(--ps)) var(--gut) calc(var(--pe) + var(--pf));
  background:linear-gradient(180deg,var(--bg) 0,var(--cream) var(--pf),
    var(--cream) calc(100% - var(--pf)),var(--bg) 100%)}

.pricing .kicker{color:var(--ink-blue)}
.pricing .title{color:var(--ink);margin-top:10px}.pricing .title em{color:var(--ink-blue)}
.pricing .lede{color:var(--ink-muted)}
.pcard{margin-top:52px;padding:14px;border-radius:36px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:stretch}
.pleft{padding:34px 34px 30px;display:flex;flex-direction:column}
/* D-8: was #c25e10, 3.9:1 on its own tinted-cream background. */
.ptag{align-self:flex-start;height:30px;padding:0 13px;border-radius:15px;display:inline-flex;align-items:center;font-size:13px;font-weight:600;color:#964a0a;background:rgba(255,150,70,.12);box-shadow:inset 0 0 0 1px rgba(255,150,70,.3)}
.pamt{font:600 80px/1 Geist,sans-serif;letter-spacing:-.065em;margin-top:18px}
.pamt small{font-size:22px;letter-spacing:-.02em;color:var(--ink-muted);font-weight:500}
.pline{font:600 20px/1.3 Geist,sans-serif;letter-spacing:-.02em;margin-top:12px}
.pnote{font-size:15px;line-height:1.55;color:var(--ink-muted);margin-top:8px;max-width:540px}
.pitems{margin-top:30px;display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.pitem{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start}
.pitem i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700;color:var(--ink-blue);background:rgba(58,160,255,.12);box-shadow:inset 0 0 0 1px rgba(58,160,255,.2)}
.pitem b{display:block;font-size:16px;font-weight:600;letter-spacing:-.015em}
.pitem span{display:block;font-size:14px;line-height:1.4;color:var(--ink-muted);margin-top:3px}
.pmath{margin-top:auto;padding-top:24px;border-top:1px solid rgba(10,20,40,.08)}
.pitems+.pmath{margin-top:30px}
.pmath h5{font:600 15px/1.3 Geist,sans-serif;letter-spacing:-.01em}
.pmath p{font-size:15px;line-height:1.6;color:var(--ink-muted);margin-top:6px}
.pright{border-radius:26px;padding:34px 32px 30px;display:flex;flex-direction:column;gap:20px}
.pright .k{font-size:14px;font-weight:500;color:var(--accent-bright)}
.pright h3{font:600 38px/1.05 Geist,sans-serif;letter-spacing:-.045em;margin-top:10px;text-wrap:balance}
.pright p{font-size:16px;line-height:1.55;color:#b7c7de;margin-top:12px}
.pact{display:flex;flex-direction:column;gap:10px}
.pact .cta{width:100%}
.sec{height:48px;border-radius:24px;display:grid;place-items:center;font-size:15px;font-weight:500;text-decoration:none;color:#dbe8fa;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
@media (max-width:980px){.pcard{grid-template-columns:minmax(0,1fr)}}

/* ---------- FAQ ---------- */
.faqs{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.faqs .left{position:sticky;top:130px}
.faqs .left .cta{margin-top:30px}
.faq{display:flex;flex-direction:column;gap:12px}
.qa{border-radius:22px;cursor:pointer}
.qa .qh{display:flex;justify-content:space-between;align-items:center;gap:18px;width:100%;margin:0;padding:23px 26px;border:0;background:none;color:inherit;font:inherit;font-size:17.5px;font-weight:500;letter-spacing:-.015em;text-align:left;cursor:pointer;appearance:none}
.qa .pm{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:18px;transition:transform .5s var(--ease)}
.qa.open .pm{transform:rotate(45deg)}
.qa .ans{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .55s var(--ease-soft),visibility 0s linear .55s}
.qa.open .ans{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .55s var(--ease-soft),visibility 0s}
.qa .ans>div{overflow:hidden}
.qa .ans p{padding:0 26px 23px;color:var(--muted);font-size:16px;line-height:1.6}
@media (max-width:899px){.faqs{grid-template-columns:minmax(0,1fr);gap:30px}.faqs .left{position:static;min-width:0}}

/* ---------- book + contact ---------- */
.final .title{font-size:clamp(46px,6.8vw,100px);max-width:1200px}
.cal{margin:60px auto 0;max-width:1080px;padding:10px;border-radius:34px}
.cal .frame{position:relative;border-radius:26px;overflow:hidden;background:#0b1020;height:220px;display:grid;place-items:center;color:var(--faint);font-size:14px;transition:height .4s var(--ease-soft)}
/* Height comes from Calendly's own calendly.page_height message (sections.js), clamped 640-1100px, because
   Calendly's own layout runs taller on a narrower iframe (a stacked mobile view) than on a wide desktop one.
   --cal-h is unset (falls back to 700px) until that message arrives. */
.cal .frame.live{height:var(--cal-h,700px)}
/* r9 Q minor 4: a phone holds Calendly's loaded height (984px at 360-393, 952px from 430) while it loads (sections.js),
   set at once so a Book tap centres the box it will be. */
@media (max-width:700px){.cal .frame.reserve:not(.live){height:984px;transition:none}}
/* widget.js prepends position:relative, writes a pixel height, and (Calendly's own embed convention)
   a 320px min-width. All three are inline, so they need !important to keep the embed inside the frame at
   any viewport width, including a phone narrower than 320px. */
.cal .frame .calendly-inline-widget{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;min-width:0 !important;min-height:0 !important;max-height:none !important;margin:0 !important;opacity:0;visibility:hidden;pointer-events:none;background:#0b1020;transition:opacity .4s ease}
.cal .frame.live .calendly-inline-widget{opacity:1;visibility:visible;pointer-events:auto}
.calskel{position:relative;z-index:1;height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px 22px;line-height:1.45;transition:opacity .4s ease}
.calskel a{color:var(--accent-bright);text-underline-offset:3px}
.cal .frame.live .calskel{opacity:0;pointer-events:none}
.cal .frame.failed .calwait{display:none}
.cal .frame .calendly-inline-widget iframe,.cal iframe{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;min-width:0 !important;min-height:0 !important;max-height:none !important;border:0;display:block !important;background:#0b1020}
.cal .calendly-spinner{display:none}
@media (prefers-reduced-motion:reduce){.cal .frame,.cal .frame .calendly-inline-widget,.calskel{transition:none}}
.contact{padding:60px var(--gut) 50px}
.cgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:38px;align-items:stretch}
.ccard{min-width:0;min-height:164px;padding:24px 24px 22px;border-radius:24px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none}
.ccard .ic{width:44px;height:44px;margin:0;border-radius:14px;display:grid;place-items:center;color:var(--ink);background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.74));box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.45),0 6px 16px rgba(0,0,0,.28);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);transition:color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.ccard .ic svg{width:22px;height:22px;display:block}
.ccard .ic svg path{fill:currentColor}
.ccard b{display:block;font:600 20px/1.2 Geist,sans-serif;letter-spacing:-.02em}
.ccard span{display:block;font-size:14px;color:var(--muted);margin-top:4px}
.ccard .arr{position:absolute;right:24px;top:24px;font-size:18px;color:var(--faint);transition:transform .5s var(--ease),color .3s}
.ccard:hover .arr{transform:translate(3px,-3px);color:#fff}
html.q-lite .ccard .ic{background:#f4f1ea;-webkit-backdrop-filter:none;backdrop-filter:none}
/* Real ink mark on the base's white glass chip at rest (Mike: "get the actual logo in here, in that style
   too"). On hover/focus every card lifts the same way, so all six give the same feedback; Calendly, Telegram
   and LinkedIn also take their brand colour, X, Threads and Notion stay ink. */
@media (hover:hover){
  .ccard:hover .ic{transform:translateY(-2px) scale(1.05);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.7),0 10px 22px rgba(0,0,0,.3)}
  .ccard[data-mark="calendly"]:hover .ic{color:#006bff}
  .ccard[data-mark="telegram"]:hover .ic{color:#26a5e4}
  .ccard[data-mark="linkedin"]:hover .ic{color:#0a66c2}
}
.ccard:focus-visible .ic{transform:translateY(-2px) scale(1.05);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.7),0 10px 22px rgba(0,0,0,.3)}
.ccard[data-mark="calendly"]:focus-visible .ic{color:#006bff}
.ccard[data-mark="telegram"]:focus-visible .ic{color:#26a5e4}
.ccard[data-mark="linkedin"]:focus-visible .ic{color:#0a66c2}
.fbot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.07);font-size:13.5px;color:var(--faint)}
.fbot a{color:var(--accent-bright);text-decoration:none}
/* D-15: the link span used to be plain inline text, so on a narrow phone "Replay the intro" (the
   last link) wrapped onto its own line wherever the text happened to break, landing wherever that
   was rather than under "@MikeTheElite". A flex row with its own wrap keeps every link left-edge
   aligned even when it drops to a second line. */
.fbot > span:last-child{display:flex;flex-wrap:wrap;gap:8px 20px}
@media (max-width:900px){#contact .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  #contact .cgrid{gap:10px}
  /* D2, r8-5: 14/12/12 put the title almost against the card's own rounded corner. 22px on every side
     clears it, matching the phone floor used for the case and number tiles. */
  #contact .ccard{min-height:0;padding:22px;border-radius:18px;justify-content:flex-start;gap:10px}
  #contact .ccard b{font-size:15px}
  #contact .ccard div span{font-size:12px;line-height:1.3;overflow-wrap:anywhere}
  #contact .ccard .arr{right:22px;top:22px;font-size:15px}
}

.note{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut) 60px;color:var(--faint);font-size:13px}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-soft),transform .9s var(--ease-soft),filter .5s}
.reveal.inv{opacity:1;transform:none}
.tile.reveal.inv.dim{opacity:.2;transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ================= ROUND 11 ================= */
:root{--warm:#ff9646;--gold:#ffd166}

/* ---------- the orange, back where it was ---------- */
.kicker{display:inline-flex;align-items:center;gap:10px}
.big .pl{color:var(--warm);margin-left:1px}
.mark{position:relative;display:inline-block}
.mark::after{display:none!important}
.title em.mark.warm{color:var(--warm)}
/* drawn in by a left-to-right reveal: dash lengths under non-scaling-stroke are miscounted by Chrome on retina screens (the line broke into dashes) */
.mark-stroke{position:absolute;left:0;bottom:-0.18em;width:100%;height:0.32em;overflow:visible;pointer-events:none;z-index:2;clip-path:inset(-60% 104% -60% -4%);transition:clip-path .62s cubic-bezier(.22,1,.36,1)}
.mark-stroke path{fill:none;stroke:var(--warm,#ff9646);stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-width:clamp(2.2px,0.046em,4.4px);filter:drop-shadow(0 1px 4px rgba(255,150,70,.32))}
.hero .mark-stroke{bottom:-0.15em;height:0.25em}
.hero .mark-stroke path{stroke-width:clamp(2.4px,0.024em,5px)}
.mark.on .mark-stroke{clip-path:inset(-60% -4% -60% -4%)}
@media (prefers-reduced-motion:reduce){.mark-stroke{clip-path:none!important;transition:none!important}}
/* text links: orange line sweeps in under them */
.ul{position:relative;text-decoration:none;color:var(--accent-bright);font-weight:500}
.ul::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--warm),var(--gold));transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-soft)}
.ul:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- headlines rise in word by word ---------- */
.sw.reveal{opacity:1;transform:none}
.sw .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em .09em .16em;margin:-.06em -.09em -.16em}
.sw .w>i{display:inline-block;font-style:inherit;transform:translateY(115%);transition:transform 1.05s var(--ease-soft)}
.sw.inv .w>i{transform:none}
html.intro-on .hero .sw .w>i{transform:translateY(115%)!important;transition:none!important}
html.intro-on .hero .reveal:not(.sw){opacity:0!important;transform:translateY(22px)!important;transition:none!important}
html.intro-on .hero h1{visibility:hidden}
@media (prefers-reduced-motion:reduce){.sw .w>i{transform:none!important;transition:none!important}}

/* ---------- screenshots settle into place ---------- */
.reveal .stage img{transform:scale(1.06)}
.reveal.inv .stage img{transform:none}
.tile:hover .stage img{transform:scale(1.03)}

/* ---------- the intro: a drop forms, counts the views, then becomes the hero glass ----------
   Round 9: every duration here is paced to motion.js's ~1.1s intro (pop .5s, count .5s, fade .34s). */
.intro{position:fixed;inset:0;z-index:95;display:none;background:radial-gradient(55% 48% at 50% 46%,rgba(58,140,255,.2),transparent 72%),#040611;transition:opacity .34s var(--ease-soft)}
html.intro-on .intro{display:block}
html.intro-on{overflow:hidden}
.intro::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(200,230,255,.55) 1px,transparent 1.7px);background-size:14px 14px;opacity:.26;
  -webkit-mask-image:radial-gradient(42% 42% at 50% 46%,#000,transparent);mask-image:radial-gradient(42% 42% at 50% 46%,#000,transparent)}
.intro.out{opacity:0;pointer-events:none}
.idrop{position:absolute;left:50%;top:46%;width:270px;height:270px;margin:-135px 0 0 -135px;border-radius:50%;display:grid;place-items:center;transform:scale(0);
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.2),rgba(255,255,255,.03) 46%,rgba(255,255,255,.01));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 10px rgba(255,255,255,.14),0 30px 70px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(1.5px) saturate(1.4) brightness(1.1);-webkit-backdrop-filter:blur(1.5px) saturate(1.4) brightness(1.1)}
.intro.go .idrop{animation:ipop .5s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes ipop{from{transform:scale(0)}to{transform:scale(1)}}
.inum{font:600 44px/1 Geist,sans-serif;letter-spacing:-.05em;font-variant-numeric:tabular-nums;text-shadow:0 2px 14px rgba(0,0,0,.5);transition:opacity .25s,transform .28s var(--ease)}
.inum.pop{transform:scale(1.28)}
.inum .pl{color:var(--warm)}
.icap,.ihint{position:absolute;left:0;right:0;text-align:center;transition:opacity .25s}
.icap{top:calc(46% + 164px);font-size:15px;color:var(--muted);letter-spacing:-.01em}
.ihint{top:calc(46% + 190px);font-size:13px;color:var(--faint)}
.intro.fade .icap,.intro.fade .ihint,.intro.fade .inum{opacity:0}
.iskip{position:absolute;right:26px;bottom:24px;font-size:13px;color:var(--faint)}

/* ---------- more dashboards: a rail you can drag ---------- */
.railwrap{margin-top:72px}
.railhead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.sub{font:600 clamp(28px,3vw,42px)/1.05 Geist,sans-serif;letter-spacing:-.045em}
.sub em{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;color:var(--accent-bright);letter-spacing:-.01em}
.railhead p{color:var(--muted);font-size:15px;margin-top:10px}
.rnav{display:flex;gap:8px}
.rbtn{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:22px;cursor:pointer;border:0;color:#fff}
.rail{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:26px calc(50% - 50vw) 0;padding:8px calc(50vw - 50%) 34px;cursor:grab;user-select:none;-webkit-user-select:none}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing}
.rail.drag *{pointer-events:none}
.rcard{flex:none;width:318px;display:flex;flex-direction:column;border-radius:24px;text-decoration:none;color:inherit}
.rcard .stage{height:252px;margin:8px 8px 0;border-radius:18px}
.rcard .rm{margin-top:0;padding:14px 18px 18px}
.rcard b{display:block;font:600 44px/1 Geist,sans-serif;letter-spacing:-.05em}
@media (min-width:761px){.rcard b{font-size:52px}}
.rcard b em{font-family:"Instrument Serif",serif;font-weight:400;font-size:.9em;color:var(--accent-bright)}
.rcard .rm span{display:block;font-size:14px;line-height:1.4;color:var(--muted);margin-top:8px}
.rcard img{-webkit-user-drag:none}
/* D2: the rail card keeps its fixed width on a phone, but 14px still put its number under the
   card's own bottom-left/right corner. Same 22px floor as the other phone cards (round 9: the sides
   were still 20px, the only card on the page under the floor). */
@media (max-width:759px){.rcard .rm{padding:22px}}

/* ---------- case studies on X: one card, same edges as the tile grid ---------- */
#xcases{width:100%;margin-top:48px}
.xcases{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px 18px;align-items:center;width:100%;min-width:0;padding:14px 12px 14px 34px;text-decoration:none;color:inherit}
.xcases .xtext{min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:22px 8px 22px 6px}
.xcases .title.sm{font-size:clamp(34px,3.5vw,58px);line-height:.98;letter-spacing:-.05em;margin-top:14px;max-width:10.5em}
.xcases .xtext p{margin-top:16px;color:var(--muted);font-size:16.5px;line-height:1.55;letter-spacing:-.011em;max-width:28em}
.xcases .cta{margin-top:26px}
.xcases .stage.xpair{width:100%;min-width:0;min-height:0;aspect-ratio:2.42/1}
.xcases .stage .st{inset:16px}
.xcases.reveal .stage .st.pair img:first-child{transform:rotate(-3deg) scale(1.04)}
.xcases.reveal .stage .st.pair img:last-child{transform:rotate(3deg) scale(1.04)}
.xcases.reveal.inv .stage .st.pair img:first-child{transform:rotate(-3deg)}
.xcases.reveal.inv .stage .st.pair img:last-child{transform:rotate(3deg)}
.xcases.reveal:hover .stage .st.pair img,
.xcases.reveal.inv:hover .stage .st.pair img,
.xcases.reveal:focus-visible .stage .st.pair img,
.xcases.reveal.inv:focus-visible .stage .st.pair img{transform:rotate(0deg)}
@media (max-width:900px){
  .xcases{grid-template-columns:minmax(0,1fr);gap:18px;padding:22px 16px 16px}
  .xcases .xtext{padding:2px 6px 0}
  .xcases .title.sm{font-size:clamp(34px,5.4vw,52px);max-width:none}
}
/* Stacked pair only on a phone: from 600px up the two posts sit side by side (the 2.42/1 stage above),
   where the stack made a 1000px-tall card with a dark band under it on an iPad mini (round 9). */
@media (max-width:599px){
  /* .7 is the two ~1.44:1 posts stacked plus the gap and inset at every phone width (360-430); 2/3 left a
     30-60px dark band under the second post, and centring splits whatever rounding is left top and bottom. */
  .xcases .stage.xpair{aspect-ratio:.7}
  .xcases .stage .st.pair{display:flex;flex-direction:column;justify-content:center;gap:18px}
  .xcases .stage .st.pair img{max-width:100%;max-height:calc(50% - 9px)}
  .xcases.reveal .stage .st.pair img:first-child{transform:rotate(-1.5deg) scale(1.04)}
  .xcases.reveal .stage .st.pair img:last-child{transform:rotate(1.5deg) scale(1.04)}
  .xcases.reveal.inv .stage .st.pair img:first-child{transform:rotate(-1.5deg)}
  .xcases.reveal.inv .stage .st.pair img:last-child{transform:rotate(1.5deg)}
  .xcases.reveal:hover .stage .st.pair img,
  .xcases.reveal.inv:hover .stage .st.pair img,
  .xcases.reveal:focus-visible .stage .st.pair img,
  .xcases.reveal.inv:focus-visible .stage .st.pair img{transform:rotate(0deg)}
}

/* ---------- the reality: the words light up as you read down ---------- */
.rbig{font:600 clamp(46px,7.4vw,124px)/.96 Geist,sans-serif;letter-spacing:-.062em;margin-top:26px;max-width:1340px;text-wrap:balance}
.rbig em{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;color:var(--accent-bright);letter-spacing:-.015em}
.rbig .rw{opacity:.13;transition:opacity .35s linear}
.rbig .rw.lit{opacity:1}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:70px;max-width:1220px}
.rgrid p{font-size:19px;line-height:1.55;color:var(--muted);letter-spacing:-.01em;border-top:1px solid rgba(255,255,255,.1);padding-top:20px}
.rgrid p b{color:#fff;font-weight:600}
#reality{padding-bottom:0}
.rnext{display:flex;width:100%;align-items:center;gap:14px;margin-top:60px;font:600 24px/1 Geist,sans-serif;letter-spacing:-.03em;text-decoration:none;color:#fff}
.rnext i{font-style:normal;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:20px}
@media (max-width:900px){.rgrid{grid-template-columns:1fr;gap:18px}}

/* ---------- the group chats, on repeat ---------- */
.wallwrap{margin-top:84px}
.wallwrap .railhead{margin-bottom:19px}
/* Script drives each row (sections.js): it keeps running under the pointer, drags 1:1 and can be thrown.
   The padding is room for the hover lift and the shadows; the negative bottom margin hands that room back,
   so the rows sit 14px apart and the last one ends exactly on its bubbles (the section gap is the page's own). */
.wrow{overflow:hidden;margin:0 calc(50% - 50vw) -34px;padding:14px 0 34px;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.wtrack{display:flex;gap:14px;width:max-content;align-items:flex-end;pointer-events:auto;will-change:transform}
.wrow.drag,.wrow.drag *{cursor:grabbing}
.wrow.drag .chip{pointer-events:none}
.chip{flex:none;max-width:430px;padding:14px 18px 11px;border-radius:22px 22px 22px 7px;background:linear-gradient(180deg,#17243f,#0f1a2f);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.09),0 10px 24px rgba(0,0,0,.32);cursor:pointer;transition:transform .5s var(--ease)}
@media (hover:hover){.chip:hover{transform:translateY(-4px)}}
@media (prefers-reduced-motion:no-preference){.wrow{touch-action:pan-y;touch-action:pan-y pinch-zoom}}
.chip p{font-size:16px;line-height:1.4;color:#e8f0fc;letter-spacing:-.01em}
.chip span{display:block;margin-top:6px;font-size:12.5px;color:var(--faint)}
/* D-8: was #3d9dff -> #2479f0, white message text measured 3.0:1 (needs 4.5 at 16px/400); the
   label's .72 alpha measured 2.7:1 even after darkening the background under it, so it needs a
   higher alpha too, not just a darker gradient. Same darkened blue as .cta, for one brand blue. */
.chip.me{border-radius:22px 22px 7px 22px;background:linear-gradient(180deg,#2470c8,#1255aa);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 24px rgba(18,85,170,.28)}
.chip.me p{color:#fff}.chip.me span{color:rgba(255,255,255,.95)}
@media (prefers-reduced-motion:reduce){.wrow{overflow-x:auto;overflow-y:hidden;pointer-events:auto;scrollbar-width:none}.wrow::-webkit-scrollbar{display:none}.wtrack{will-change:auto}}

/* ---------- about: tilt the portrait, swap on click ---------- */
.portrait{position:relative;cursor:pointer}
.portrait img{transition:opacity .7s var(--ease-soft),transform 1.1s var(--ease-soft)}
.portrait img.alt{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);min-height:0;aspect-ratio:auto;object-fit:cover;object-position:64% 40%;opacity:0;transform:scale(1.05)}
.portrait.swap img.alt{opacity:1;transform:none}
.portrait.swap img:not(.alt){opacity:0;transform:scale(1.05)}
/* .tg > * is position:relative, so the highlight and the button need the child selector to sit on the photo. */
.portrait>.plight{position:absolute;z-index:3;inset:10px;border-radius:24px;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(circle at var(--photo-x) var(--photo-y),rgba(157,214,255,.3),rgba(58,160,255,.1) 22%,transparent 46%);
  transition:opacity .28s ease}
.portrait.is-tilting>.plight{opacity:1}
.portrait>.pswap{position:absolute;z-index:5;right:16px;bottom:16px;width:44px;height:44px;margin:0;padding:0;border:0;background:none;color:#fff;display:grid;place-items:center;border-radius:50%;cursor:pointer;appearance:none;-webkit-appearance:none}
.portrait>.pswap .g{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;pointer-events:none}
.portrait>.pswap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.portrait.is-tilting>.plight{opacity:0}.portrait img{transition:none}}

/* ---------- pricing: the rows react like your original ---------- */
/* hover nudges only where a pointer can hover: a tap would leave them stuck on a touch screen */
.pitem{transition:transform .45s var(--ease)}
.pitem i{transition:transform .5s var(--ease),background .3s,color .3s}
.pcard.reveal .pitem i{transform:scale(0)}
.pcard.reveal.inv .pitem i{transform:scale(1);transition-delay:calc(var(--k) * 90ms + .45s)}
@media (hover:hover){
  .pitem:hover{transform:translateX(6px)}
  .pitem:hover i{background:#1a6fd1;color:#fff;transform:scale(1.15)}
  .pcard.reveal.inv .pitem:hover i{transform:scale(1.15);transition-delay:0s}
}
.fit .rows div{transition:transform .45s var(--ease),color .3s}
.fit .rows div:hover{transform:translateX(6px);color:#fff}
.qa{transition:transform .45s var(--ease)}
@media (hover:hover){.qa:hover{transform:translateX(4px)}}

/* ---------- pricing: real receipts drift up in 3 columns (2 on phones), dimmed; the glass pills sit still on top ---------- */
.pfield{position:relative;flex:1;min-height:440px;border-radius:20px;overflow:hidden;user-select:none;background:#0b1426;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
/* the receipts come in and leave under a soft edge, so no tile is cut hard at the frame */
.pfield::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,#0b1426 0,rgba(11,20,38,0) 18%,rgba(11,20,38,0) 82%,#0b1426 100%)}
.pcol{--n:3;--g:10px;position:absolute;z-index:0;top:0;left:calc(var(--g) + var(--i) * (100% - var(--g)) / var(--n));width:calc((100% - var(--g)) / var(--n) - var(--g));
  opacity:.42;will-change:transform;animation:prise var(--dur,84s) linear var(--delay,0s) infinite}
.pstk{display:flex;flex-direction:column;gap:var(--g);padding-bottom:var(--g)}
.pcol img{width:100%;height:auto;border-radius:12px;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
@keyframes prise{to{transform:translate3d(0,-50%,0)}}
.pfield:not(.go) .pcol{animation-play-state:paused}
@media (max-width:560px){.pcol{--n:2}.pcol:nth-of-type(3){display:none}}
@media (prefers-reduced-motion:reduce){.pcol{animation:none}}
/* still pills: a darker glass so the white word reads over a bright receipt too */
#pfield .pill{animation:none}
#pfield .pill .gl{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.05) 45%,rgba(255,255,255,.02)),rgba(9,18,38,.38)}
/* Round 8 lane B: held/thrown pills no longer whiten their own fill (Mike, r8-2: "not
   like, high as that" -- "it looks... not glass"). play.js instead fades this fill to
   nothing as the pill becomes the glass raindrop overlay below (--dropk, set every frame
   while play.js's liftK is above 0; see assets/js/play.js renderDrop/hideDrop). No
   transition: JS already updates it at animation-frame cadence. */
#pfield .pill .gl{opacity:calc(1 - var(--dropk,0))}
/* The held-pill glass raindrop (assets/js/play.js: drop/buildDrop/renderDrop). One
   shared element, position:fixed on body so #pfield's overflow:hidden never clips it
   while it grows past the pill's own box; JS builds it at its full grown size once per
   grab (glass.js setLens gives it the real SVG lens in the full tier) and eases it
   between a tiny REST scale (same size as the pill, invisible) and 1 by transform, the
   same trick controls.js's tab-bar bubble uses. This base look is the mid/lite fallback:
   plain frost + a bright specular rim, matching .bubble's own fallback so the two read
   as one material off the full tier (lane-b.md: "WebKit / mid / lite: ... the same
   frosted + rim fallback the tab bubble gets"). */
.pilldrop{position:fixed;z-index:32;left:0;top:0;display:none;pointer-events:none;opacity:0;
  transform-origin:50% 50%;will-change:transform,opacity;background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.32),inset 0 1.5px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.28),0 16px 32px rgba(0,0,0,.4);
  backdrop-filter:blur(1px) saturate(1.32) brightness(1.08);-webkit-backdrop-filter:blur(1px) saturate(1.32) brightness(1.08)}
.pilldrop.on{display:block}
html.q-lite .pilldrop{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 10px 22px rgba(0,0,0,.35);backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
@media (prefers-reduced-motion:reduce){.pilldrop{display:none!important}}
/* D2: 8px put the price and the CTA against the card's own rounded corner (the offer card is in the
   phones' consistent padding scale too). 22px still clears 320px without min-content overflow: the
   halves stack full-width below 980px, so neither is fighting the other for room here. */
@media (max-width:420px){
  .pcard{padding:8px}
  .pleft{min-width:0;padding-left:22px;padding-right:22px}
  .pright{min-width:0;padding-left:22px;padding-right:22px}
  /* #pfield (lane B's pill drag field, not this lane's file) is a flex:1 child of .pright, so the
     14px this padding added on each side narrowed its own clientWidth and clamped the pill-drag
     bounds play.js reads from it tighter than before, a real cross-lane side effect (review_w.js's
     touchDragAndScroll caught it: a 70px drag landed at 46.7px, clamped). Cancel it here with an
     equal negative margin so #pfield's own width is exactly what it was before this padding bump. */
  #pfield{margin-left:-14px;margin-right:-14px}
}
.routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sec .ri{width:20px;height:20px;border-radius:6px;margin-right:9px;display:inline-grid;place-items:center;background:#fff;color:var(--ink);vertical-align:-4px;box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.45);transition:color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.sec .ri svg{width:13px;height:13px;display:block}
.sec .ri svg path{fill:currentColor}
/* Ink mark at rest, matching the contact cards. Both routes lift the same way on hover/focus; Telegram also takes its brand colour, X stays ink. */
@media (hover:hover){
  .sec:hover .ri{transform:translateY(-1px) scale(1.06);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.65),0 6px 14px rgba(0,0,0,.26)}
  .sec[data-mark="telegram"]:hover .ri{color:#26a5e4}
}
.sec:focus-visible .ri{transform:translateY(-1px) scale(1.06);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.65),0 6px 14px rgba(0,0,0,.26)}
.sec[data-mark="telegram"]:focus-visible .ri{color:#26a5e4}
.sec{display:flex;align-items:center;justify-content:center}
.sec:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
.pnotion{text-align:center;font-size:14px;margin-top:4px}

/* ---------- misc ---------- */
.tlink{display:inline-block;margin-top:24px;font-size:15px}
.calnote{display:none;text-align:center;margin-top:18px;font-size:14px;color:var(--faint)}
#book:has(.frame.live) .calnote{display:block}
.fbot .up{cursor:pointer}

.pamt{white-space:nowrap}
@media (max-width:560px){.pamt{font-size:64px}.pamt small{font-size:19px}}


/* ---------- rhythm, columns, phone type (B4 B7 B8 B10 B13 B14) ---------- */
section{padding:clamp(80px,9vw,136px) var(--gut);min-height:0}
.about,.about .right,.fit,.pcard,.pleft,.pright,.faq{min-width:0}
.split,.split>*,.hl,.num,.segwrap,.about .portrait{min-width:0}
@media (max-width:899px){
  #faq .faqside{position:static}
}
@media (max-width:1099px){
  .about{grid-template-columns:minmax(0,1fr)}
  .about .portrait{max-height:none;max-width:min(460px, calc((80dvh - 20px) * 1178 / 1400));margin-inline:auto}
}
@media (max-width:759px){
  .fit{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .fit > .tg{display:block;grid-row:auto}
  .fit .rows{display:flex}
  #numbers .num .big{font-size:clamp(40px,12vw,56px);white-space:nowrap}
  #numbers .num .cap{font-size:14px;line-height:1.35}
}
@media (min-width:760px){
  .fit{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto repeat(4,auto);column-gap:18px;row-gap:0}
  .fit > .tg{grid-row:1 / span 5;display:grid;grid-template-rows:subgrid}
  .fit .rows{display:contents}
  .fit h4{margin-bottom:28px}
}

/* 600px through iPad landscape: one receipt fills the screen under the nav.
   The number sits in its own column, centred, and the screenshot takes what is left.
   Desktop from 1280 stays on the two-up grid. */
@media (min-width:600px) and (max-width:1279px){
  .cases{grid-template-columns:minmax(0,1fr)}
  #cases .tile.wide,#cases .tile.solo,#cases .tile:not(.wide):not(.solo){
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:stretch;
    /* A tall, narrower viewport (iPad portrait, a resized desktop window) has far more height than
       the widest screenshot's aspect ratio ever needs: the shot floats in a mostly empty column.
       Cap the tile to the screen or to a share of its own width, whichever is shorter. */
    height:min(calc(100dvh - 84px - env(safe-area-inset-top, 0px)), 72vw);
    max-height:min(calc(100dvh - 84px - env(safe-area-inset-top, 0px)), 72vw);
    min-height:0}
  #cases .tile .meta,#cases .tile.wide .meta,#cases .tile.solo .meta{
    justify-content:center;align-items:flex-start;min-width:0;min-height:0;padding:22px 18px 18px 26px}
  #cases .tile .shot,#cases .tile.wide .shot,#cases .tile.solo .shot,#cases .tile .shot:has(.st.pair){
    aspect-ratio:auto;min-height:0;height:auto;margin:12px 12px 12px 0;align-self:stretch}
  #cases .tile .st.pair{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:8px}
  #cases .tile .num2 .fig{font-size:clamp(44px,8vw,64px)}
}
@media (min-width:761px) and (max-width:1279px){
  #cases .tile .num2 .fig{font-size:clamp(64px,5.4vw,84px)}
}
/* A landscape phone's tile has too little height to keep the number centred once the figure wraps
   to 2 lines and 3 chips sit under it (the "nl" case, 152K + 3 chips): the block leans low. Two chips
   is enough on a screen this short; the number stays balanced and the 3rd chip is still in the sheet. */
@media (min-width:600px) and (max-width:1279px) and (max-height:520px){
  #cases .tile .chips li:nth-child(n+3){display:none}
}
/* Controls a thumb can hit, below desktop widths. The resting droplet matches the taller tab. */
@media (max-width:1279px){
  .seg{height:auto;min-height:54px}
  /* border-box: min-width must cap the WHOLE tap target (padding included), or "all:unset"'s
     content-box turns every 44px floor into 44px-plus-padding and the 5-tab bar wraps at 401-414px. */
  .seg button{height:44px;min-height:44px;min-width:44px;box-sizing:border-box}
  .blob{height:44px}
  /* inline-flex trims the leading space inside .rl's own text node (a flex item's edge whitespace
     collapses like a block's), so "3" and "receipts" ran together (c-6); the margin puts it back.
     white-space keeps the whole line from breaking mid-count at in-between widths (600-1024px, D-2). */
  #cases .tile .story{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
  #cases .tile .story .rl{margin-left:.28em}
  main a.ul,main a.acct,main .tlink,main .pnotion,#book .calskel a{
    display:inline-block;padding:12px 2px;margin:-12px 0;min-height:44px;box-sizing:border-box}
}
/* One column of quotes: a short line should not sit in a 260px card. */
@media (max-width:639px){.quote{min-height:0}}

/* ---------- r9 B: phones and tablets ---------- */
@media (max-width:760px){
  /* r9-1: a chip that wraps to 2 lines ("Main account: 3.1K → 4.1K followers in 2 months") read as a stretched
     capsule with its last word alone on line 2. A rounded box with balanced lines reads as one fact. */
  #cases .tile .chips li{border-radius:14px;padding:5px 10px;line-height:1.3;text-wrap:balance}
  /* The group chats: a bubble as wide as the phone hid its neighbours, so a row read as 1 message. Narrower
     bubbles keep the next one in view at the edge, which is what says the row goes on. */
  .chip{max-width:min(300px,74vw)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    transition-delay:0s!important;
    scroll-behavior:auto!important;
  }
}

/* ================= ROUND 9, lane C: phone + iPad layout (desktop with a mouse untouched) =================
   Every rule below is scoped to a phone/tablet width (<=1023px) or to a touch screen (hover:none + coarse
   pointer), so a desktop window with a mouse at 1024px and up renders exactly as approved. */

/* ---------- tab bars (r9-2) ----------
   Phone: one full-width bar. Each tab is its label plus an equal share of the spare width (flex 1 1 auto),
   so the gaps between labels are equal, both ends match and there is no dead end of empty bar (Mike's
   r9-2: labels packed left with ~70px of bar left over on the right; at 400px and under the old equal-cell
   tabs gave "DMs" a 40px moat and "Engagement" 4px). A true pill: 54 tall / 27 radius, the 44px bubble
   22 radius, 5px inset all round, so the bubble's curve runs concentric with the bar's. */
@media (max-width:599px){
  .seg{display:flex;width:100%;max-width:100%;height:54px;min-height:54px;padding:5px;gap:2px;border-radius:27px;flex-wrap:nowrap}
  /* width:max-content is what makes WebKit share it out equally: with a plain auto basis Safari sized the
     tabs off its own button metrics and gave "DMs" 10px more room than "Engagement". */
  .seg button{flex:1 1 auto;width:max-content;min-width:44px;height:44px;min-height:44px;padding:0 2px;box-sizing:border-box;justify-content:center;border-radius:22px;font-size:14px}
  .seg .blob{height:44px;border-radius:22px}
}
@media (max-width:374px){.seg button{font-size:13px}}
/* iPad and the rest of the touch range: the bar hugs its tabs (equal 17px either side of every label, so the
   ends match), sitting under the heading. Same concentric pill. The iPad mini (744) used to get the phone's
   full-width bar with 300px of empty bar after "Coaching". */
@media (min-width:600px) and (max-width:1023px),(min-width:1024px) and (hover:none) and (pointer:coarse){
  .seg{display:inline-flex;width:auto;max-width:100%;height:54px;min-height:54px;border-radius:27px;flex-wrap:nowrap}
  .seg button{height:44px;min-height:44px;min-width:44px;padding:0 17px;box-sizing:border-box;justify-content:center;border-radius:22px}
  .seg .blob{height:44px;border-radius:22px}
}

/* ---------- numbers: the figure fits its card (22px floor) ----------
   12vw let "5,000+" run 10-16px past the card's own padding (the + sat 6-12px off the card's edge on 360-430
   phones). The card's content box is (100vw - 50px) / 2 - 44px and the widest figure is ~2.94em, so this is
   the largest size that still fits, capped where it always did. */
@media (max-width:599px){#numbers .num .big{font-size:clamp(28px,calc(17vw - 24px),56px)}}

/* ---------- results tiles ---------- */
/* r9-1: a chip that wraps ("Main account: 3.1K -> 4.1K followers in 2 months") kept its 999px pill radius and
   turned into a stadium with the text in its curved ends. 15px is a full pill on a one-line chip (it clamps
   to half its height) and a clean rounded box on a two-line one. pretty, not balance: balanced lines left a
   third of the box empty on the right (the box keeps its full width); pretty fills line 1 and only refuses
   to leave one word alone on line 2. */
@media (max-width:1023px),(hover:none) and (pointer:coarse){
  #cases .tile .chips li{border-radius:15px;text-wrap:pretty}
}
/* Round 9 integration: on a phone, cases.js hug() then sizes a wrapped chip to its longer line, which only holds
   with balance (pretty re-breaks the words once the box narrows and left a 66px empty run after them at 390). */
@media (max-width:760px){#cases .tile .chips li{padding:4px 10px;text-wrap:balance}}
/* iPad (and a landscape phone): the shot hugs its own screenshot instead of stretching to one screen tall.
   A near-square post sat in a 590-740px column with a 110-250px dark band above and below it (iPad Pro 11
   portrait, iPad Pro 12.9 portrait, iPad landscape). The tile now takes the taller of its number block and
   its picture; a tall picture still stops at one screen under the nav. */
@media (min-width:600px) and (max-width:1023px),(min-width:1024px) and (max-width:1279px) and (hover:none) and (pointer:coarse){
  #cases .tile.wide,#cases .tile.solo,#cases .tile:not(.wide):not(.solo){height:auto;max-height:none;align-items:center}
  #cases .tile .shot,#cases .tile.wide .shot,#cases .tile.solo .shot,#cases .tile .shot:has(.st.pair){
    /* An explicit width: with only aspect-ratio + justify-self the box shrink-wraps its absolutely placed
       picture to 0x0. The column's width, or the one-screen height cap times the picture's ratio, whichever is
       smaller, so a capped tall shot keeps its own ratio and sits against the tile's right inset. */
    aspect-ratio:var(--ar,.8);height:auto;align-self:center;justify-self:end;
    width:min(calc(100% - 12px),calc((100dvh - 108px - env(safe-area-inset-top, 0px)) * var(--ar,.8)));
    max-height:calc(100dvh - 108px - env(safe-area-inset-top, 0px))}
}

/* ---------- what I run ---------- */
/* Phone: 18px sides were under the 22px floor, and 48px under the rows plus the stage's own 12px margin left a
   ~60px empty band before a 360px stage that letterboxed a landscape screenshot with 70px of dark above and
   below it (r9-2's Reporting panel). The stage now takes each panel's own picture ratio (--ar in the markup). */
@media (max-width:599px){
  .run .txt{padding:34px 22px 22px}
  .run .vis{min-height:0;aspect-ratio:var(--ar,1);margin:0 12px 12px}
}
/* iPad portrait: the same, with a height cap, so a portrait post fills more of the wide stage than 360px did. */
@media (min-width:600px) and (max-width:900px){
  .run .txt{padding:40px 40px 26px}
  /* width from the capped height, centred: a height cap alone shrank the stage but left it hugging the left edge */
  .run .vis{min-height:0;aspect-ratio:var(--ar,1);width:min(calc(100% - 24px),calc(min(480px,60vh) * var(--ar,1)));justify-self:center;margin:0 12px 12px}
}

/* ---------- the offer on an iPad ----------
   What's included stays one stacked column, as Mike asked for the pricing card on 09-24 ("stacking the pricing page
   like our original website"; review_d pitemsStacked). Round 9 lane C had split it into 2 columns on the iPad; the
   integration put the stack back. Only the maths paragraphs keep a readable measure. */
@media (min-width:600px) and (max-width:980px){
  .pmath p{max-width:64ch}
}

/* ---------- rail cards on an iPad / touch screen: the same 22px floor as the phone (desktop keeps 14/18) ---------- */
@media (min-width:760px) and (max-width:1023px),(min-width:1024px) and (hover:none) and (pointer:coarse){.rcard .rm{padding:18px 22px 22px}}

/* ---------- about stats on an iPad: 16px sat tight in the narrow 3-up cards ---------- */
@media (min-width:600px) and (max-width:1023px){#about .astat{padding:20px}}

/* ---------- no lone last word on a phone or tablet ---------- */
/* Seen at 393-430: "month." alone under the offer line, "on" under a pricing row, "alone." under the maths,
   "pods?" under a FAQ question, "do." under the footer line, "swiping." / "repeat." under the rail and wall
   headings, "(I" hanging at a fit row's line end on the iPad. Safari 26 does both of these natively. */
@media (max-width:1023px),(hover:none) and (pointer:coarse){
  /* one-sentence lines (headings, captions, list rows): balance. pretty alone still left "founders", "mix",
     "approval" and "if" alone at 360px, because it only reshapes a last line it judges too short. */
  .pline,.qa .qh,.sub,.fbot > span:first-child,.rnext span,#numbers .num .cap,.rows > div,.fit h4,.rcard .rm span,#about .astat .cap,#cases .tile .num2 em,#book .center > p:not(.lede){text-wrap:balance}
  /* paragraphs: pretty (keeps the lines full, only refuses a lone last word) */
  .pitem span,.pmath p,.pnote,.rgrid p,#about .lede,.xcases .xtext p,.run p,#book .lede,.pright p,#results .split .lede,#contact .split .lede{text-wrap:pretty}
}

/* ---------- touch screens at desktop widths (iPad Pro 12.9 landscape, 1366): thumb-sized links too ---------- */
@media (min-width:1280px) and (hover:none) and (pointer:coarse){
  #cases .tile .story{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
  #cases .tile .story .rl{margin-left:.28em}
  main a.ul,main a.acct,main .tlink,main .pnotion,#book .calskel a{display:inline-block;padding:12px 2px;margin:-12px 0;min-height:44px;box-sizing:border-box}
}
/* A hyphenated word or range stays on one line: "re-" / "plan" and "2-" / "3 hours" read as typos when a line breaks them.
   The span is pure markup around copy, so it must never pick up a parent's own "span" rule (.pitem span, .rcard .rm span
   style the caption span they sit next to, not this). */
span.nw{display:inline!important;margin:0!important;padding:0!important;font:inherit!important;color:inherit!important;letter-spacing:inherit!important;background:none!important;box-shadow:none!important}
@media (max-width:1023px),(hover:none) and (pointer:coarse){span.nw{white-space:nowrap}}

/* ================= ROUND 9, fix round Q (Fixer Y): hero, intro, nav, About, lone words ================= */
/* M6: the phone tile band has no glass for any pointer (hero.js), so under 860px a mouse gets the same tap line
   as a phone. "Move your pointer around" promised a lens that is no longer there. */
@media (max-width:859px){.hero .hint.desk{display:none}.hero .hint.phone{display:block}}
/* Minor 13: a touch screen has nothing to click. */
.iskip .k-touch{display:none}
@media (hover:none),(pointer:coarse){.iskip .k-desk{display:none}.iskip .k-touch{display:inline}}
/* Minor 10: an iPad in landscape (and any touch screen at 901px and up) shows the desktop nav links. They were 36px
   tall boxes with an invisible 44px band; the box itself is now a finger's height. A mouse keeps the 36px look. */
@media (min-width:901px) and (pointer:coarse){.nav .links a{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;padding-top:0;padding-bottom:0}}
/* Minor 11: iPad portrait, one column: the About photo filled the screen with a face (640x760 at 768 and 820).
   Capped and centred, like the stacked offer card under it. */
@media (min-width:600px) and (max-width:1023px) and (orientation:portrait),(min-width:1024px) and (max-width:1099px) and (orientation:portrait) and (hover:none) and (pointer:coarse){
  #about .portrait{max-width:420px;margin-inline:auto}
}
/* Minors 1 + 2: the same no-lone-word rule as lane C's list above, for the case sheet's headline ("...since I took /
   over.") and the testimonial cards ("attention-to-detail", "commitment" alone on the last line). */
@media (max-width:1023px),(hover:none) and (pointer:coarse){
  .sheet .head h3,.quote .q{text-wrap:balance}
}
/* "attention-to-detail" is one long word that balance still left alone on the last line; it keeps "the" with it where
   the card is wide enough to hold both (234px; a 320px phone's card is 220px). */
@media (min-width:340px) and (max-width:1023px),(min-width:340px) and (hover:none) and (pointer:coarse){.quote .q .glue{white-space:nowrap}}