/* =====================================================================================================================
   Talp on phones and tablets (2026-11-02). One layer over every page, injected last in the head by _build.py, so no page's
   own source changes for it. Desktop and laptop (1024 px wide and up, with a mouse) are untouched: every rule here sits
   behind a phone or tablet width (max-width:1023px and below) or behind (hover:none) and (pointer:coarse), which a mouse
   never matches. Checked by build/_viewport-check-mobile.py (phones and tablets) and build/_viewport-check.py (desktop).

   The words for the ranges used below:
     phone        (max-width:720px)                       the shell's own switch to the menu; portrait phones, small landscape
     short        (max-height:500px) and (max-width:1023px) a phone on its side: the screen is a letterbox
     tablet       (min-width:721px) and (max-width:1023px)  small tablets, portrait
     touch        (hover:none) and (pointer:coarse)         any finger, at any width (an iPad on its side is 1024 and up)
   Same type, same black ground and warm white, same words; a finger gets at least 44 px, reading type at least 14 px.
   ===================================================================================================================== */

/* ---------- the safe area: the notch, the home indicator (viewport-fit=cover, _build.py) ---------- */
@media (max-width:1023px){
  :root{ --safe-l:env(safe-area-inset-left, 0px); --safe-r:env(safe-area-inset-right, 0px); --safe-b:env(safe-area-inset-bottom, 0px); }
}
@media (max-height:500px) and (max-width:1023px) and (orientation:landscape){
  /* on its side the notch takes one edge: every edge line steps in past it, on both sides so the page stays centred */
  :root{ --pad:max(24px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); --sh-pad:var(--pad); --edge:var(--pad); }
}

/* ---------- the frame (2026-11-02, Zelda: "they should fit better on the screen ... the content sits all wide"): one side edge
   per screen that the nav, every title, list, card and the footer share (--pad, --edge, --sh-pad), measured with _fit-measure.py
     phones upright       24 px; 20 px under 360 (a 320 phone, a Fold's cover screen), where 4 px a side is a line's worth
     721 to 860           every iPad upright, a phone on its side laid out at 860: the page keeps its own layout inside a centred
                          column of 640 px; the edge is what is left, halved, never under 48 (744: 52, 820: 90, 834: 97)
   ---------- */
@media (max-width:359px){ :root{ --pad:20px; --sh-pad:20px; --edge:20px; } }
@media (min-width:721px) and (max-width:860px){
  :root{ --pad:max(48px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px), calc((100vw - 640px) / 2)); --sh-pad:var(--pad); --edge:var(--pad); }
}

/* ---------- touch: no tap flash, no long-press callout on the drawn things, no 300 ms wait ---------- */
@media (hover:none) and (pointer:coarse){
  html{ -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  a, button, summary, [role=button], label, select{ touch-action:manipulation; }
  canvas, video{ -webkit-touch-callout:none; }
  :focus:not(:focus-visible){ outline:none; }
}

/* ======================================================================== the nav ===================================== */
/* a finger's hit area for the logo and the links at every width, without moving a pixel of the drawing (padding given back
   by an equal negative margin) */
@media (hover:none) and (pointer:coarse) and (min-width:721px){
  header.site-nav .site-logo{ padding:5px 14px 5px 0; margin:-5px -14px -5px 0; }
  header.site-nav .site-links a{ padding-top:12px; padding-bottom:12px; margin-top:-12px; margin-bottom:-12px; }
  header.site-nav .site-links a:not(:last-child){ padding-right:11px; margin-right:-11px; }
  header.site-nav .site-links a:not(:first-child){ padding-left:11px; margin-left:-11px; }
}
.site-menu-foot{ display:none; }

@media (max-width:720px){
  header.site-nav{ padding-top:env(safe-area-inset-top, 0px); }
  header.site-nav .site-logo{ padding:5px 16px 5px 0; margin:-5px -16px -5px 0; }
  header.site-nav .site-menu{ position:relative; z-index:2; min-height:44px; min-width:84px; padding:0 18px; align-items:center; justify-content:center; gap:9px; line-height:1;
    font-size:15px; letter-spacing:-.01em; border-color:rgba(255,255,250,.24); background:rgba(0,0,0,.28); }
  header.site-nav .site-logo{ position:relative; z-index:2; }

  /* the menu (2026-11-02): the whole screen, black; the four pages large on the edge line, numbered as the site numbers its lists;
     the question as the one solid pill at the foot, under the thumb; the address and LinkedIn under it. It hangs from the
     header (absolute, so it never depends on the header being a containing block) and covers the screen under the bar. */
  header.site-nav .site-links{ position:absolute; left:0; right:0; top:0; height:100vh; height:100dvh; z-index:1;
    padding:calc(66px + env(safe-area-inset-top, 0px) + clamp(18px, 5vh, 44px)) var(--sh-pad) calc(22px + var(--safe-b, 0px));
    background:#000; box-shadow:none; overflow-y:auto; overscroll-behavior:contain; counter-reset:mm; }
  header.site-nav .site-links.open{ display:flex; animation:mm-in .32s cubic-bezier(.22,1,.36,1) both; }
  header.site-nav .site-links.closing{ animation:mm-out .2s cubic-bezier(.4,0,.2,1) both; }
  header.site-nav .site-links a{ margin:0; text-shadow:none; }
  header.site-nav .site-links a:not(.site-cta){ counter-increment:mm; display:flex; align-items:baseline; gap:16px; padding:11px 0;
    font-size:clamp(30px, 8.4vw, 38px); font-weight:500; letter-spacing:-.03em; line-height:1.1; color:#8f8f8c; }
  header.site-nav .site-links a:not(.site-cta)::before{ content:counter(mm, decimal-leading-zero); flex:none; width:22px; display:block; position:static; height:auto; background:none;
    font:300 11px/1 var(--sh-mono); letter-spacing:.08em; color:#5f5f5c; transform:translateY(-.55em); }
  header.site-nav .site-links a[aria-current]:not(.site-cta){ color:#f3f3f1; }
  header.site-nav .site-links a[aria-current]:not(.site-cta)::before{ color:#a7a7a4; }
  header.site-nav .site-links a.site-cta{ margin-top:auto; min-height:56px; padding:0 24px; justify-content:center; gap:12px; border-radius:999px;
    background:#f3f3f1; color:#0c0c0c !important; font-size:16px; font-weight:500; letter-spacing:-.01em; }
  header.site-nav .site-links a.site-cta[aria-current]{ background:#f3f3f1; color:#0c0c0c; }
  header.site-nav .site-links a.site-cta svg{ width:13px; height:13px; }
  header.site-nav .site-links.open a{ animation:mm-rise .62s cubic-bezier(.22,1,.36,1) both; }
  header.site-nav .site-links.open a:nth-child(2){ animation-delay:.04s; } header.site-nav .site-links.open a:nth-child(3){ animation-delay:.08s; }
  header.site-nav .site-links.open a:nth-child(4){ animation-delay:.12s; } header.site-nav .site-links.open a:nth-child(5){ animation-delay:.18s; }
  header.site-nav .site-menu-foot{ display:flex; flex-wrap:wrap; gap:0 28px; margin-top:14px; animation:mm-in .5s .24s cubic-bezier(.22,1,.36,1) both; }
  header.site-nav .site-menu-foot a{ display:inline-flex !important; align-items:center; min-height:44px; padding:0 !important; font:300 15px/1 var(--sh-mono) !important; letter-spacing:.01em !important; color:#a7a7a4 !important; }
  header.site-nav .site-menu-foot a::before{ display:none !important; }
  html.menu-open, html.menu-open body{ overflow:hidden; }
  html.menu-open header.site-nav::before{ opacity:0; }
  @keyframes mm-in{ from{ opacity:0; } }
  @keyframes mm-out{ to{ opacity:0; } }
  @keyframes mm-rise{ from{ opacity:0; transform:translateY(16px); } }
}
/* a phone on its side: the pages in one column on the left, the question and the address on the right */
@media (max-width:720px) and (max-height:500px){
  header.site-nav .site-links{ padding-top:calc(66px + 6px); }
  header.site-nav .site-links.open{ display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,40%); grid-template-rows:repeat(4, auto) 1fr; column-gap:32px; align-content:start; }
  header.site-nav .site-links a:not(.site-cta){ grid-column:1; font-size:24px; padding:8px 0; }
  header.site-nav .site-links a.site-cta{ grid-column:2; grid-row:1 / span 2; align-self:start; margin-top:8px; }
  header.site-nav .site-menu-foot{ grid-column:2; grid-row:3 / span 2; align-self:start; margin-top:4px; }
}
@media (max-width:720px) and (prefers-reduced-motion:reduce){
  header.site-nav .site-links.open, header.site-nav .site-links.open a, header.site-nav .site-menu-foot, header.site-nav .site-links.closing{ animation:none !important; }
}

/* the nav steps out of the way while a phone reads down the page, and comes back the moment the reader turns up (mobile.js) */
@media (max-width:720px), (max-height:500px) and (max-width:1023px){
  header.site-nav{ transition:transform .42s cubic-bezier(.22,1,.36,1); }
  html.nav-up:not(.menu-open) header.site-nav{ transform:translateY(-100%); }
  html.nav-up:not(.menu-open) header.site-nav::before{ opacity:0; }
}
@media (prefers-reduced-motion:reduce){ header.site-nav{ transition:none !important; } }

/* ======================================================================== the footer ================================== */
/* the site-wide notice under the copyright line (2026-11-04): a sentence, so reading type on phones, tablets and touch screens */
@media (max-width:1023px), (hover:none) and (pointer:coarse){
  html body .site-foot-note{ font-size:14px; line-height:1.5; }
}
@media (max-width:720px){
  footer.site-foot.room-foot{ padding-bottom:calc(16px + var(--safe-b, 0px)); }
  .site-foot-address{ font-size:14px !important; line-height:1.6 !important; }
  .site-foot-address a{ display:inline-flex; align-items:center; min-height:44px; margin:-6px 0 -10px; }
  .room-foot .site-foot-cols{ display:grid; grid-template-columns:1fr 1fr; gap:28px 20px; }
  .room-foot .site-foot-col:last-child{ grid-column:1 / -1; }
  .room-foot .site-foot-col a{ display:flex; align-items:center; min-height:44px; padding:0; font-size:16px; }
  .room-foot .site-foot-col h4{ margin-bottom:4px; }
  .site-foot-bottom{ font-size:12px !important; line-height:1.5; }
}
/* tablets and touch at any width: the same footer, a finger's height for every link (given back by a negative margin) */
@media (hover:none) and (pointer:coarse) and (min-width:721px){
  .room-foot .site-foot-col a{ padding-top:12px; padding-bottom:12px; margin-top:-10px; margin-bottom:-10px; position:relative; }
  .room-foot .site-foot-address a{ display:inline-block; padding:12px 0; margin:-12px 0; }
}
@media (min-width:721px) and (max-width:1023px){
  .site-foot-address{ font-size:14px !important; }
  /* on a tablet the band wraps taller and the room stands bright behind the words: the patches under them a step darker (the darker patch now lives in shell.css, for every width from 721) */
  .room-foot .foot-block, .room-foot .foot-block-brand{ background:rgba(0,0,0,.84); box-shadow:0 0 24px 14px rgba(0,0,0,.84); }
}

/* ======================================================================== About ======================================= */
/* the picture windows are not dragged below 1101 px (about-motion.js), so a finger on one scrolls the page instead of being held */
@media (max-width:1100px){ #board .win.drag{ touch-action:auto; } }
.ev-m{ display:none; }
/* an iPad mini on its side (1101 to 1179 px, a finger): the scene's words would sit at 12.8 px and raising them makes the windows
   collide, so About stacks there as it does below 1101 (the rules of about.html's max-width:1100 block, held for a finger) */
@media (hover:none) and (pointer:coarse) and (min-width:1101px) and (max-width:1179px){
  html{ scroll-snap-type:none; }
  #board .sec, #board .sec.events{ min-height:0; padding:clamp(40px,6vh,64px) var(--pad) clamp(32px,5vh,48px); display:grid; grid-template-columns:1fr 1fr; gap:14px; align-content:start; scroll-margin-top:66px; }
  #board .sec:first-of-type{ padding-top:calc(66px + 40px); }
  #board .sec > *{ grid-column:1 / -1; }
  #board .sec .t{ position:static; margin-bottom:10px; }
  #board .sec .corner{ position:static; text-align:right; margin-top:10px; }
  #board .win{ position:relative!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; width:auto!important; height:auto!important; min-height:0!important; transform:none!important; }
  #board .win.text{ max-width:var(--measure); padding:22px 24px 26px; }
  #board .win.text[style]{ font-size:var(--t-body)!important; }
  #board .win.text.founders{ display:block; padding-top:22px; }
  #board .win.img{ aspect-ratio:4/3; max-width:520px; width:100%!important; }
  #board .win.img.drag{ grid-column:auto; aspect-ratio:1; max-width:none; touch-action:auto; }
  #board .win.small{ max-width:62ch; }
  #board .logos, #board .press, #board .stack{ position:static; width:auto; }
  #board .stack{ max-width:62ch; width:auto!important; left:auto!important; top:auto!important; }
  #board .logos{ grid-template-columns:repeat(4,1fr); max-width:640px; }
  #board .press{ grid-template-columns:1fr 1fr; max-width:1000px; }
  #board .pc .body h3{ font-size:var(--t-body); }
  #board .pc .meta{ font-size:13px; }
  #board .sec.events .win.text{ max-width:48ch; }
}
@media (max-width:1100px), (hover:none) and (pointer:coarse) and (max-width:1179px){
  /* Events: the two posters under the title, each with its way out under it (mobile.js); the fixed layer over the wall's
     posters stands down, since the posters are outside a phone's or a tablet's screen. Also with a mouse from 1024 to 1100,
     where About stacks by its own rule and the section was the wall alone (2026-11-02, Zelda approved the audit's note) */
  .ev{ display:none !important; }
  #s-events{ padding-bottom:clamp(48px, 8vh, 80px); }
  #s-events .ev-m{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; max-width:600px; margin:4px 0 0; padding:0; list-style:none; }
  #s-events .ev-m a{ display:flex; flex-direction:column; gap:0; color:#f3f3f1; text-decoration:none; border-radius:10px; overflow:hidden;
    background:rgba(14,14,16,.52); border:1px solid rgba(255,255,250,.14); -webkit-backdrop-filter:blur(18px) saturate(1.15); backdrop-filter:blur(18px) saturate(1.15);
    box-shadow:inset 0 1px 0 rgba(255,255,250,.10), 0 30px 60px -30px rgba(0,0,0,.8); }
  #s-events .ev-m-pic{ display:block; aspect-ratio:1086/1579; background:#020202; overflow:hidden; }
  #s-events .ev-m-pic img{ display:block; width:100%; height:100%; object-fit:cover; filter:brightness(.92) contrast(.98); transition:filter .4s var(--ease), transform .6s var(--ease); }
  #s-events .ev-m-tag{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:48px; padding:0 14px; font:500 14px/1.2 var(--sans); letter-spacing:-.01em; }
  #s-events .ev-m-tag svg{ flex:none; width:11px; height:11px; transform:rotate(-90deg); }
  #s-events .ev-m-tag svg path{ fill:currentColor; }
  #s-events .ev-m a:active .ev-m-pic img{ filter:brightness(1.02); transform:scale(1.01); }
  #s-events .ev-m li{ opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .9s var(--ease); }
  #s-events .ev-m li:nth-child(2){ transition-delay:.12s; }
  #s-events .ev-m.in li{ opacity:1; transform:none; }
  /* the clocks' and the backers' labels, legible */
  .based .k, .backed .k, .based .city{ font-size:11px !important; }
}
@media (max-width:1100px) and (prefers-reduced-motion:reduce), (hover:none) and (pointer:coarse) and (max-width:1179px) and (prefers-reduced-motion:reduce){ #s-events .ev-m li{ opacity:1; transform:none; transition:none; } }
/* on its side the posters keep to the screen's height */
@media (max-height:500px) and (orientation:landscape) and (max-width:1023px){ #s-events .ev-m{ max-width:min(600px, calc((100svh - 96px) * 1.375 + 14px)); } }

/* About, stacked (every width up to 1100, and a finger to 1179): each corner word stands under its own title as its lighter second
   line, on the title's edge; at the foot of the section it read as the label of the next one (2026-11-02, Zelda, narrator item 8).
   Grid order only, the markup stays; above 1100 the scene keeps its corners */
@media (max-width:1100px), (hover:none) and (pointer:coarse) and (max-width:1179px){
  #board .sec .t{ order:-2; margin-bottom:0; }
  #board .sec .corner{ order:-1; text-align:left; margin:-8px 0 10px; }
  /* the text windows' measure: 62ch of this light face ran 89 characters a line on a phone on its side; 28em is about 68 */
  #board .win.text{ max-width:min(var(--measure), calc(28em + 48px)); }
}
/* About, stacked, read as a story (2026-11-02, Zelda: on a phone the words ran on too long): the photographs leave their collage
   at the end of each section and stand between the text windows, one at a time, the column's own width, so the page reads
   words, picture, words, picture. Grid order only, the markup and the desktop wall stay. The two event photographs whose banner
   carries the old line ("Your entire customer base") stay on the wall above 1100 and step out here */
@media (max-width:1100px), (hover:none) and (pointer:coarse) and (max-width:1179px){
  #board #p-banner, #board #p-a1{ display:none; }
  #board #w-about{ order:1; }
  #board #p-stage{ order:2; }
  #board #w-beliefs{ order:3; }
  #board #p-room{ order:4; }
  #board #p-stage, #board #p-room, #board #p-teams, #board #p-founders{ grid-column:1 / -1; width:100% !important; aspect-ratio:3/2;
    max-width:calc(28em + 48px); margin:10px 0; }
  #board #p-founders{ aspect-ratio:4/5; }
  #board #p-stage > img.ph{ object-position:58% 40%; }
}
/* About, stacked, the reader's pass (2026-11-06): the wall is fixed behind the words and its poster lettering passes under them.
   The titles and their second lines hold a stronger shadow; the press contact too (plain text, no tab, as Zelal set it, but white and larger);
   the quiet spare tile, there to even the desk's two rows, reads as a logo that failed to load when it stands alone on a row, so it steps out;
   the hidden hover word no longer pushes the date onto a second line; the legal lines get a taller ground, they run longer here */
@media (max-width:1100px), (hover:none) and (pointer:coarse) and (max-width:1179px){
  #board .sec .t, #board .sec .corner{ text-shadow:0 1px 3px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.75), 0 2px 28px rgba(0,0,0,.6); }
  #board .sec .corner{ font-weight:400; }
  #board .logos .reserved{ display:none; }
  #board .press .pcontact{ margin-top:2px; color:#fff; font-weight:400; font-size:14px; text-shadow:0 0 2px #000, 0 1px 6px rgba(0,0,0,.95), 0 0 18px rgba(0,0,0,.9); }
  #board .press .pcontact a{ color:#fff; }
  #board .pc .verb{ display:none; }
  #board .pc .meta{ gap:10px; } #board .pc .meta span{ white-space:nowrap; }
  body footer.site-foot::before{ height:260px; background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.9) 44%); }
}
/* a phone on its side: every picture 3:2 and no taller than the screen under the nav (66 px) with a little air */
@media (max-width:1100px) and (orientation:landscape) and (max-height:500px){
  #board #p-stage, #board #p-room, #board #p-teams, #board #p-founders{ aspect-ratio:3/2; max-width:min(calc(28em + 48px), calc((100svh - 82px) * 1.5)); }
  #board #p-founders > img.ph{ object-position:50% 62%; }
}

/* ======================================================================== shared: hit areas and reading type ========== */
/* tablets and touch at any width: the footer's links a finger's height apart (the desktop's short footer packs them 25 px apart) */
@media (hover:none) and (pointer:coarse) and (min-width:721px){
  .room-foot .site-foot-col a{ padding:11.5px 0 !important; margin:0 !important; line-height:21px; }
  .room-foot .site-foot-col h4{ margin-bottom:0 !important; }
  header.site-nav .site-links a{ min-height:44px; box-sizing:border-box; display:inline-flex; align-items:center; }
  .site-foot-bottom{ font-size:12px; }
}

/* touch screens at desktop widths (an iPad on its side, an iPad Pro upright): the desktop compositions stay, their reading type
   is held at 14 px and their small targets get a finger's height */
@media (hover:none) and (pointer:coarse){
  .site-foot-address{ font-size:14px !important; }
  html body .cv-note, html body .cv-chip, html body .cv-metaq, html body .pb-note, html body .pb-t span, html body .qpop .aside, html body .lg-addr{ font-size:14px; }
  html body.case-page{ --s-small:14px; }
  .lg-toc-list a{ min-height:44px; box-sizing:border-box; padding-top:12px !important; padding-bottom:12px !important; }
}
@media (hover:none) and (pointer:coarse) and (min-width:1180px){
  /* About's scene: the words' unit floors at 14 px instead of 12.8 (the scene keeps a sixth of room for exactly this) */
  .board{ --ut:clamp(.875px, var(--u), 1.32px) !important; }
  .sec > .win.text.note{ font-size:max(14px, calc(13 * var(--ut))) !important; }
  /* the clocks' cities and "Backed by" at 11 px, not 10 (2026-11-02, Zelda approved the audit's note) */
  .based .k, .backed .k, .based .city{ font-size:max(11px, calc(10.5 * var(--ut))) !important; }
}
/* labels a finger reads at 11 px at least (2026-11-02, Zelda approved the audit's note): the paper sheets' labels on an iPad on its
   side or a large iPad (below 1024 they already are), Use Cases' industry counts, Home's price-study kicker */
@media (hover:none) and (pointer:coarse), (max-width:1023px){
  html body.case-page{ --s-label:11px; }
  html body .cs-foot, html body .sheet.cv .cs-foot, html body .cv-cr-score span, html body .cv-ov .cf-pager span, html body .pb-steps li span, html body .pp span{ font-size:11px; }
  .v3 .cc-rail button sup{ font-size:11px; }
  html body .si-price-kicker{ font-size:11px; }
}

/* ======================================================================== Home ======================================== */
/* the ways on ("See how we check it", "See decisions we ran", "See all publications"): a finger's height, no visual change */
@media (hover:none) and (pointer:coarse){
  html body .stage .go:not(.cr-foot .go){ padding-top:12px; padding-bottom:12px; margin-top:-12px; margin-bottom:-12px; }
  html body .stage .si .decision-replay{ padding:13px 12px; margin:-9px -12px; }
  html body .wwt-variants button{ position:relative; z-index:3; }
  html body .wwt-variants button::after{ content:""; position:absolute; inset:-11px -10px -14px; }
  html body .wwt-variants:not([hidden]){ margin-bottom:10px; }
  html body .wwt-study .lk{ row-gap:24px !important; }   /* the two ways on, when they wrap, a finger's height apart */
  html body .stage .go{ position:relative; }
  html body .ho-cta, html body .cr-foot .go{ min-height:44px; box-sizing:border-box; }
  html body .sui .sx-step{ padding-top:8px; padding-bottom:6px; margin-top:-8px; }
  html body .si-enter{ position:relative; }
  html body .si-enter::after{ content:""; position:absolute; inset:-3px 0; }
  html body .wwt-prem{ position:relative; }
  html body .wwt-prem::after{ content:""; position:absolute; inset:-10px -3px; }
  html body .wwt-node{ min-height:44px; }
  /* the tunnel room: no keyboard hint for a finger, a finger's height for the way out and the chips */
  html body .si-close kbd{ display:none; }
  html body .si-close{ min-height:44px; padding:0 18px; box-sizing:border-box; }
  html body .si-chip{ min-height:44px; box-sizing:border-box; }
  /* the billboard's pill: a finger's height (it opens to the hackathon's poster) */
  html body .billboard:not(.open){ height:44px; border-radius:22px; }
  html body .billboard:not(.open) .bb-btn{ height:44px; border-radius:22px; padding:0 16px; }
  html body .billboard:not(.open) .bb-type{ line-height:44px; font-size:13px; }
}
@media (max-width:860px){
  html body .wst-l{ font-size:14px; }
  html body .wst-if{ font-size:14px; }
  html body .landing-note, html body .si-example-note{ font-size:14px; }
  html body .ix-key, html body .ix-note{ font-size:14px; }
}
@media (min-width:861px) and (max-width:1023px){
  html body .landing-note{ font-size:14px; }
}
@media (max-width:860px){
  html body .si-foot{ row-gap:20px; }
  /* Partners and Clients: the phone grid hid six of the nine marks with its spare cells; every mark stays, and mobile.js lets
     go of empty cells from the end so the four columns close on full rows */
  html body .wall-grid .c.hide-m:has(img){ display:flex; }
  html body .wall-grid .c.m-spare{ display:none; }
}
/* the a16z lockup's words follow the marks' unit (8.8 px on a phone): held at the label size so they can be read, the star and the
   other marks as they were (2026-11-02, Zelda approved the audit's note) */
@media (max-width:860px){ html body .hero .hb-lock span{ font-size:11px; } }
/* the narrowest phones (320 to 374): the four backers stand in one column, so the hackathon's pill keeps the right of the line */
@media (max-width:374px){
  html body .hero .hb-row{ grid-template-columns:auto; row-gap:9px; }
}

/* ======================================================================== Use Cases =================================== */
@media (max-width:820px){
  /* the industries: a row that scrolls under the thumb, each a finger's height, a soft edge where the row runs on */
  .v3.cc-page.cc-native .cc-rail{ top:4px; } .v3 .cc-rail{ gap:0 6px; -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 36px), transparent); padding-right:48px; scroll-padding:0 var(--sh-pad,24px); }
  .v3 .cc-rail button{ min-height:44px; box-sizing:border-box; padding:0 10px; margin:0; align-items:center; font-size:14px; }
  .v3 .cc-rail button sup{ font-size:11px; top:-.5em; }
  .v3 .cc-rail button i{ left:10px; right:10px; bottom:6px; }
  /* the deck keeps its share of a phone: the front card larger, the stack a touch higher */
  .v3.cc-page.cc-native .cc-mls-layer{ width:min(76vw, 46svh, 340px); }
  .v3.cc-page.cc-native .cc-mls-layers{ --bx:calc(var(--sh-pad,24px) + min(38vw, 23svh, 170px) - 50vw); --by:-3%; }
  /* the stage starts under the industries, so the stack never runs under their row on a short phone */
  .cc-page.cc-native .cc-mls-track{ margin-top:12px; }
  .cc-page.cc-native .cc-mls-stage{ margin-top:56px; height:calc(100% - 56px); }
  .cc-page.cc-native .cc-scroll-guide{ font-size:13px; }
}
/* upright (2026-11-02, Zelda: "the content sits all wide in the screen"): the industries wrap inside the gutters instead of running
   off the right edge, every one in view, the words of the first on the title's edge; the deck takes the height left under them */
@media (max-width:820px) and (orientation:portrait){
  .cc-page.cc-native .cc-mls-track{ display:flex; flex-direction:column; }
  .v3.cc-page.cc-native .cc-rail{ position:relative; top:auto; left:auto; right:auto; flex:none; flex-wrap:wrap; overflow:visible; gap:0;
    margin:0; padding:0 calc(var(--sh-pad,24px) - 10px); -webkit-mask-image:none; mask-image:none; }
  .cc-page.cc-native .cc-mls-stage{ flex:1 1 auto; min-height:0; height:auto; margin-top:6px; }
  /* the second row of industries takes 44 px from the deck: the cards give it back on a short phone (320x568: 213 px, not 243,
     clear of the counter), the front card's left edge stays on the edge line */
  .v3.cc-page.cc-native .cc-mls-layer{ width:min(76vw, calc(46svh - 48px), 340px); }
  .v3.cc-page.cc-native .cc-mls-layers{ --bx:calc(var(--sh-pad,24px) + min(38vw, calc(23svh - 24px), 170px) - 50vw); }
}
/* a phone on its side: the title, its line and the industries on the left; the deck fills the right, as tall as the screen allows */
@media (max-height:500px) and (orientation:landscape) and (max-width:1023px){
  .cc-page.cc-native .cc-scroll-pin{ display:block; padding-top:14px; }
  .v3 #case-catalogue .wrap:first-child{ position:relative; z-index:11; width:40%; padding-right:0; }
  .v3 #case-catalogue .sec-head h2{ font-size:28px; margin-bottom:6px; }
  .v3 #case-catalogue .cc-lead{ font-size:15px; }
  .cc-page.cc-native .cc-mls-track{ position:absolute; inset:0; margin:0; }
  .v3.cc-page.cc-native .cc-rail{ position:absolute; z-index:11; left:0; right:auto; top:var(--cc-rail-top, 90px); bottom:auto; width:40%; padding:0 24px 0 var(--sh-pad,24px); box-sizing:border-box;
    flex-direction:row; flex-wrap:nowrap; align-items:center; gap:0 2px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .v3 .cc-rail::-webkit-scrollbar{ display:none; }
  .v3 .cc-rail button{ flex:none; min-height:44px; box-sizing:border-box; padding:0 8px; margin:0; align-items:center; font-size:14px; }
  .v3 .cc-rail button:first-child{ margin-left:-8px; }
  .v3 .cc-rail button sup{ font-size:11px; top:-.5em; }
  .v3 .cc-rail button i{ left:8px; right:8px; top:auto; bottom:7px; width:auto; height:1px; }
  .v3 .cc-rail button i b{ left:0; top:-1px; bottom:0; width:var(--f,0%); height:auto; }
  .v3 .cc-rail button[aria-pressed="true"] i b{ width:100%; height:auto; }
  .cc-page.cc-native .cc-mls-stage{ position:absolute; left:40%; right:0; top:0; bottom:0; height:auto; margin:0; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 24px); mask-image:linear-gradient(90deg, transparent 0, #000 24px); }
  .v3 .cc-mls-layer{ width:min(52svh, 28vw, 240px) !important; }
  .v3.cc-page.cc-native .cc-mls-layers{ --bx:calc(36px + min(26svh, 14vw, 120px) - 50%); --by:-2%; }   /* the front card's left edge 36 px into the stage */
  .cc-page.cc-native .cc-mls-hud{ right:var(--sh-pad,24px); bottom:10px; }
  .cc-page.cc-native .cc-scroll-guide{ left:var(--sh-pad,24px); right:auto; width:calc(40% - var(--sh-pad,24px)); bottom:14px; font-size:13px; }
  .uc-outro{ padding:72px var(--sh-pad,24px) !important; min-height:0 !important; }
}
@media (max-width:1023px){
  .uc-outro{ padding-left:var(--sh-pad,24px) !important; padding-right:var(--sh-pad,24px) !important; }
  .uc-cta{ min-height:48px; box-sizing:border-box; font-size:15px; }
}
@media (hover:none) and (pointer:coarse) and (min-width:821px){
  .v3 .cc-rail button{ padding-top:16px; padding-bottom:16px; min-width:44px; box-sizing:border-box; }
}
/* the figures note under the lede (2026-11-04): reading type on phones, tablets and touch screens; on a phone on its side it takes
   two or three lines under the lede, so the industries start under it */
@media (max-width:1023px), (hover:none) and (pointer:coarse){
  html body.v3 #case-catalogue .cc-note{ font-size:14px; }
}
@media (max-height:500px) and (orientation:landscape) and (max-width:1023px){
  .v3.cc-page.cc-native .cc-rail{ --cc-rail-top:150px; }
}
@media (max-height:500px) and (orientation:landscape) and (max-width:620px){
  .v3.cc-page.cc-native .cc-rail{ --cc-rail-top:166px; }   /* the narrowest (568): the note runs to four lines */
}

/* ======================================================================== Case and Pub (the paper sheets) ============== */
/* the sheet's small print and the voices' captions (2026-11-04: they now say the persona is simulated): reading type on phones,
   tablets and touch screens */
@media (max-width:1023px), (hover:none) and (pointer:coarse){
  html body .cv-legal, html body .cv-vo figcaption{ font-size:14px; }
}
@media (max-width:1023px){
  html body .cv-note, html body .cv-chip, html body .cv-metaq{ font-size:14px; }
  html body.case-page{ --s-small:14px; --s-label:11px; --s-body:15.5px; }
  html body .pb-note, html body .pb-t span{ font-size:14px; }
  html body .cv-ov .cf-pager span{ font-size:11px; }
}
@media (hover:none) and (pointer:coarse){
  html body .cf-back{ min-height:44px; padding:0 14px 0 0; margin:-12px 0; }
  html body .cv-reel-nav button{ width:44px; height:44px; }
  html body .cv-ov-close{ width:44px; height:44px; }
  html body .pb-dl{ min-height:44px; box-sizing:border-box; }
  html body .cf-pager a{ min-height:44px; }
}

/* the narrowest phones: the publication's download button ran 5 px from a 320 screen's edge beside the cover; it takes the line
   under the cover and its notes (2026-11-02, measured with _fit-measure.py) */
@media (max-width:374px){ html body .pb-plate .pb-dl{ grid-column:1 / -1; } }

/* ======================================================================== The Lab ===================================== */
@media (hover:none) and (pointer:coarse){
  .lx-filter button{ min-height:44px; min-width:44px; box-sizing:border-box; padding:0 4px; margin:0 -4px; text-align:left; }
  .lx-switch button{ height:44px; min-width:46px; }
  .lx .act{ padding:13px 11px; margin:-13px -11px; }
  .lx-strip .ar{ width:44px; height:44px; }
  .lx-cite button{ padding:13px 8px; margin:-13px -8px; }
  .lx-cite .seg{ gap:22px; }
}
@media (max-width:720px){
  .lx-switch button{ padding:0 14px; }
  .lx-row .ln, .lx-cap .ln{ font-size:15px; }
  .lx .fx, .lx-strip{ font-size:13px; }
}
@media (min-width:721px) and (max-width:1023px){
  .lx-row .ln, .lx-cap .ln{ font-size:15px; }
  .lx .fx, .lx-row .n{ font-size:13px; }
}

/* ======================================================================== Bring us a question ========================= */
/* every field 16 px (iOS zooms the page into a smaller one) and a finger's height, at every width a finger uses */
@media (hover:none) and (pointer:coarse), (max-width:1023px){
  .qpop .f input, .qpop .f select, .qpop .f textarea, .qpop .f.small input, .qpop .msb, .qpop .msl li .oth{ font-size:16px !important; }
}
@media (hover:none) and (pointer:coarse){
  .qpop .f input, .qpop .f select, .qpop .f textarea, .qpop .msb{ height:46px; padding-top:12px; padding-bottom:10px; }
  .qpop .f textarea{ min-height:46px; }
  .qpop .aud .aw{ height:46px; }
  .qpop .f.sel::after{ top:19px; }
  .qpop .msl li{ padding-top:12px; padding-bottom:12px; }
  .qpop .msl li::before{ top:17px; }
  .qpop .send{ min-height:48px; box-sizing:border-box; }
  .qpop .f.writing .oth-back{ height:46px; width:44px; }
}
@media (max-width:1023px){
  .qpop .aside{ font-size:14px; }
  .qpop .aside a{ display:inline-flex; align-items:center; min-height:44px; }
}
@media (max-width:760px){
  .qpop .aside{ justify-self:start; text-align:left; margin-top:-4px; }
  /* the choice lists hang from the whole line (word and field), not from the field after the word, so the markets' two columns
     stay inside a phone's width; a long name wraps inside its column */
  .qpop .aud .ap{ position:relative; }
  .qpop .aud .f.ms, .qpop .aud .f.cb{ position:static; }
  .qpop .aud .msl{ left:-10px; right:-10px; min-width:0; }
  .qpop .aud .msl li{ white-space:normal; }
  .qpop .aud .msl.cols:not([hidden]){ grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:4px; }
}

/* ======================================================================== Brand ======================================= */
@media (hover:none) and (pointer:coarse){
  .bl .kit{ min-height:44px; box-sizing:border-box; }
  .bl .dl{ min-height:36px; padding:0 13px; position:relative; }
  .bl .dl::after{ content:""; position:absolute; inset:-4px -2px; }
  .bl .sec summary{ min-height:56px; align-items:center; }
  /* the merch rail: a tap turns a piece (mobile.js); the hover turn is a mouse's */
  .flip:hover img:first-child{ opacity:1; } .flip:hover img + img{ opacity:0; }
  .flip.turned img:first-child{ opacity:0; } .flip.turned img + img{ opacity:1; }
}
@media (max-width:1023px){
  .bl .nm i, .bl .sec .note{ font-size:14px; }
  .bl .nm b{ font-size:14px; }
}

/* ======================================================================== the legal set ============================== */
@media (hover:none) and (pointer:coarse){
  .lg-plain{ display:inline-flex; align-items:center; min-height:44px; margin:-14px 0; }
  .lg-toc-list a{ padding-top:11px; padding-bottom:11px; }
  .lg-set a{ display:inline-flex; align-items:center; min-height:44px; }
}
@media (max-width:1023px){
  .lg-addr{ font-size:14px; }
  .lg-end-say a{ display:inline-block; padding:10px 0; margin:-10px 0; }
}
/* the pinned title and the contents bar follow the nav when it steps away (mobile.js) */
@media (max-width:860px){
  .lg-pin{ transition:opacity .35s var(--ease), transform .42s cubic-bezier(.22,1,.36,1); }
  html.nav-up .lg.is-pinned .lg-pin{ transform:translateY(-52px); }
  .lg-side{ transition:top .42s cubic-bezier(.22,1,.36,1); }
  html.nav-up .lg-side{ top:60px !important; }
  html.nav-up .lg-side.is-stuck::before{ top:-60px; }
}

/* ======================================================================== 404 ========================================= */
@media (hover:none) and (pointer:coarse){
  .nf-text a{ min-height:44px; }
}