/* HSTLE pitch v8, panel round 5 (6 Nov 2026). One live cat on a fixed canvas (z 1) between the scene grounds (z 0) and the words (z 2).
   Type: Mukta, the face hstle.in already ships, heavy for headlines. Numbers: the LED H lattice (led.js); the rupee sign
   is set in Mukta, leaned with the visor, because no 5 x 7 rupee reads at a glance. */
:root {
  --y: #FFC600;
  --k: #0B0B0B;
  --w: #FFFFFF;
  --k-mute: rgba(255, 255, 255, 0.72);
  --w-mute: rgba(11, 11, 11, 0.72);
  --sans: 'Mukta', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pad: 48px;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --t-fast: 160ms;
  --t-mid: 420ms;
  --t-ground: 600ms;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--k); }
body { margin: 0; font: 400 18px/1.45 var(--sans); color: var(--k); background: var(--k); overflow-x: hidden; }
p, h1, h2, h3, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
b { font-weight: 600; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--y); color: var(--k); padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.skip:focus { top: 12px; }

/* the cat's canvas: v8.js clips it to the scene that holds the cat and sets its opacity every frame */
#stage { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; opacity: 0; }

.scene { position: relative; min-height: 100svh; overflow: hidden; }
.scene > * { position: relative; z-index: 2; }
.s-black { background: var(--k); color: var(--w); }
.s-yellow { background: var(--y); color: var(--k); }
.s-white { background: var(--w); color: var(--k); }

/* headlines: heavy, tight, the brand's weight */
.cover h1, .half-head, .fig-head, .ask-head, .field-head, .rival b, .person-name,
.prob-head, .model-head, .why-head, .ledger-labels b, .dropped s {
  font-family: var(--sans); font-weight: 800; letter-spacing: -0.025em; line-height: 0.96;
}
.fig-head { font-size: clamp(30px, 3vw, 48px); line-height: 1; }

/* the LED numbers: lit dots big, unlit dots small and faint, leaned with the visor */
.led { display: block; }
.led-svg { display: block; height: 100%; width: auto; overflow: visible; }
.led-on { fill: var(--led-on); }
.led-halo { fill: var(--led-on); opacity: 0.17; }
.led-off { fill: var(--led-off); }
.s-black { --led-on: #FFC600; --led-off: rgba(255, 220, 120, 0.12); }
.s-yellow { --led-on: #0B0B0B; --led-off: rgba(11, 11, 11, 0.1); }
.s-white { --led-on: #0B0B0B; --led-off: rgba(11, 11, 11, 0.08); }
/* the rupee sign beside lit digits: Mukta 800, leaned 10 degrees like the lattice, cap height on the lit rows */
.rs { display: block; flex: none; font: 800 calc(var(--lh) * 0.98)/1 var(--sans); color: var(--led-on); transform: skewX(-10deg); margin: calc(var(--lh) * 0.005) calc(var(--lh) * -0.1) 0 0; }

/* the spine label over a scene's headline: a lit dot and a word */
.kicker { display: flex; align-items: center; gap: 10px; font: 600 16px/1.2 var(--sans); letter-spacing: 0.01em; margin-bottom: 16px; }
.kicker::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.s-black .kicker { color: var(--y); }
.s-black .kicker::before { box-shadow: 0 0 8px 1px rgba(255, 198, 0, 0.7); }
.s-white .kicker, .s-yellow .kicker { color: rgba(11, 11, 11, 0.66); }
.s-white .kicker::before, .s-yellow .kicker::before { background: var(--k); }

/* the cat's marks: invisible boxes the canvas follows. head = the visor box, body = the figure's box, feet at the bottom */
.spot, .scene > .spot { position: absolute; z-index: 2; pointer-events: none; }
.spot .fallback { display: none; }

/* founder markers: visible, opaque, never mistaken for copy */
.fm { display: block; width: fit-content; font: 600 14px/1.35 var(--sans); letter-spacing: 0.005em; padding: 7px 10px; border: 1.5px dashed currentColor; border-radius: 8px; max-width: 34em; }
.s-black .fm { color: var(--y); background: var(--k); }
.s-white .fm, .s-yellow .fm { color: var(--k); background: inherit; }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border-radius: 999px; background: var(--k); color: var(--y); font: 600 18px/1 var(--sans); text-decoration: none; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.btn::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--y); box-shadow: 0 0 8px 1px rgba(255, 198, 0, 0.8); }
.btn:hover { background: var(--w); color: var(--k); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible, .visor-hit:focus-visible { outline: 3px solid var(--k); outline-offset: 6px; }
.s-black .visor-hit:focus-visible { outline-color: var(--y); }

/* ---------- 0 cover: words on the left, the helmet bust large and low on the right ---------- */
.cover { --cv: min(26vw, 44svh); }
.masthead { position: absolute !important; top: 26px; left: var(--pad); right: var(--pad); display: flex; justify-content: space-between; align-items: center; }
.lockup img { width: 132px; height: auto; }
.mast-note { font: 500 14px/1.25 var(--sans); color: var(--k-mute); text-align: right; }
.mast-note span { display: block; color: var(--w); }
.cover-copy { position: absolute !important; left: var(--pad); top: 15svh; width: 38vw; }
.cover h1 { font-size: clamp(44px, 4.7vw, 80px); }
.lede { margin-top: 18px; font-size: 20px; line-height: 1.4; color: var(--k-mute); max-width: 21em; }
.readout { margin-top: 6svh; }
.fig-cover .led { height: clamp(64px, 6.6vw, 108px); }
.read-label { margin-top: 12px; font-size: 18px; line-height: 1.35; color: var(--k-mute); }
.read-label b { color: var(--w); }
.read-label .paid { color: var(--w); font-weight: 600; }
.read-more { margin-top: 10px; font-size: 16px; line-height: 1.4; color: var(--k-mute); max-width: 26em; }
.cover .fm { margin-top: 16px; }
.spot-cover { left: calc(69vw - var(--cv) / 2); top: calc(57svh - var(--cv) * 0.255); width: var(--cv); height: calc(var(--cv) * 0.51); pointer-events: auto; cursor: grab; touch-action: pan-y; border-radius: 22% / 40%; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.scene > .spot-cover { pointer-events: auto; }
.spot-cover.is-grabbing { cursor: grabbing; }
.visor-flat { display: none; width: 100%; height: 100%; }
.vlabs { position: static !important; }
/* the dates sit on the helmet's black brow, above their lattice columns, with a tick down to the column */
.vlab { position: fixed; left: 0; top: 0; z-index: 3; transform: translate(-50%, -100%); font: 600 13px/1 var(--sans); color: rgba(255, 255, 255, 0.82); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 240ms var(--ease); }
.vlab::after { content: ''; position: absolute; left: 50%; top: calc(100% + 4px); width: 1px; height: 6px; background: currentColor; opacity: 0.8; }
.vlab.is-on { opacity: 1; }
.vlab-sel { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 4px; border-radius: 999px; background: var(--y); color: var(--k); }
.vlab-sel::after { background: var(--y); top: calc(100% + 3px); }
.vlab-sel .chev { font-style: normal; font-weight: 800; opacity: 0.55; }


/* ---------- 1 the problem (white): three real tasks, each dropped; the head peeking up at them from the bottom edge ---------- */
.problem { --pv: min(15vw, 27svh); }
.prob-copy { position: absolute !important; left: var(--pad); top: 50%; transform: translateY(-50%); width: 62vw; }
.prob-head { font-size: clamp(48px, 5.6vw, 96px); }
.dropped { list-style: none; margin: 30px 0 0; padding: 0; }
.dropped li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.4em; font: 500 clamp(22px, 2vw, 30px)/1.25 var(--sans); padding: 12px 0; border-top: 1px solid rgba(11, 11, 11, 0.14); }
.dropped li:last-child { border-bottom: 1px solid rgba(11, 11, 11, 0.14); }
.dropped s { font-size: clamp(30px, 2.9vw, 46px); line-height: 1.05; text-decoration-thickness: 0.09em; text-decoration-color: var(--k); }
.prob-line { margin-top: 24px; font-size: 20px; line-height: 1.45; color: var(--w-mute); max-width: 30em; }
.spot-problem { width: var(--pv); height: calc(var(--pv) * 0.51); left: calc(83vw - var(--pv) / 2); top: calc(84svh - var(--pv) * 0.255); }

/* ---------- 2 why now (yellow): the words left in solid black, the cat big on the right, cropped by the bottom edge ---------- */
.why-copy { position: absolute !important; left: var(--pad); top: 50%; transform: translateY(-50%); width: 50vw; }
.why-head { font-size: clamp(46px, 5.2vw, 88px); }
.why-line { margin-top: 22px; font-size: 20px; line-height: 1.45; max-width: 25em; }
.spot-whynow { height: 94svh; width: calc(94svh * 0.553); left: calc(77vw - 47svh * 0.553); bottom: -18svh; }

/* ---------- 3 how it works (white): one frame, three whole live-app screens in a row, all one height ----------
   --ph: the phones' height, the largest that fits both the screen's height (under the kicker and the three lines) and a
   third of its width at the screen's own shape (780 x 1688). Every phone shows its whole screen. */
.how { --gap: 3vw; --ph: min(calc(100svh - 236px), calc((100vw - 2 * var(--pad) - 2 * var(--gap)) * 0.7214), 860px); }
.how-kicker { position: absolute !important; left: var(--pad); top: 5svh; margin: 0; }
.flow { position: absolute !important; left: var(--pad); right: var(--pad); top: calc(5svh + 46px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: var(--gap); row-gap: 18px; margin: 0; padding: 0; list-style: none; }
/* each step spans the two rows, so the three phones start on one line whatever their text runs to */
.step { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 18px; }
.step-text { align-self: start; font-size: 17px; line-height: 1.4; color: var(--w-mute); max-width: 21em; }
.step-line { display: block; margin-bottom: 6px; font: 800 clamp(24px, 2.1vw, 36px)/0.98 var(--sans); letter-spacing: -0.025em; color: var(--k); }
.phone { position: relative; box-sizing: content-box; height: calc(var(--ph) - 14px); width: auto; aspect-ratio: 780 / 1688; border: 7px solid var(--k); border-radius: 38px; overflow: hidden; background: var(--w); box-shadow: 0 36px 60px -32px rgba(40, 30, 0, 0.45); }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.how-cap { position: absolute !important; right: var(--pad); top: 5svh; font-size: 14px; line-height: 19px; color: var(--w-mute); }

/* ---------- 2 where: in person left, remote right, the cat standing between with a pin on its visor ---------- */
.half { position: absolute !important; top: 50%; transform: translateY(-50%); }
.half-in { left: var(--pad); width: 30vw; }
.half-out { right: var(--pad); width: 27vw; text-align: right; }
.half-out .half-sub { margin-left: auto; }
.half-kicker { font: 600 20px/1 var(--sans); color: var(--k-mute); margin-bottom: 12px; }
.half-head { font-size: clamp(44px, 4.8vw, 80px); }
.half-in .half-head { color: var(--y); }
.half-sub { margin-top: 16px; font-size: 19px; color: var(--k-mute); max-width: 19em; }
.spot-where { height: 78svh; width: calc(78svh * 0.553); left: calc(50vw - 39svh * 0.553); bottom: 6svh; }


/* ---------- 5 traction (yellow): last week's 20 huge on the left; the headline reads on from it, down to the 2 ---------- */
.traction { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 5vw; align-content: center; padding: 8svh var(--pad); }
.trac-kicker { grid-column: 1 / -1; margin-bottom: 3svh; }
.fig-trac { grid-column: 1; grid-row: 2; }
.fig-trac .led { height: clamp(220px, 58svh, 38vw); }
.trac-copy { grid-column: 2; grid-row: 2; align-self: start; padding-top: 2.4svh; max-width: 38rem; }
.trac-head { font-size: clamp(34px, 3.5vw, 58px); line-height: 1.02; text-wrap: balance; }
.trac-drop { display: block; margin-top: 0.28em; }
.trac-line { margin-top: 26px; font-size: 20px; line-height: 1.45; max-width: 27em; }

/* ---------- 6 supply (white): 4,583 across the screen, the cat standing on top of it with an ID tick on its visor ----------
   --sn: the number's height, --sv: the cat's. The number's box starts at the top of its lit dots (led-tight), and the
   cat's feet stand 4 px above it, so it is on the number without ever covering a dot. */
.supply { --sn: clamp(140px, 30svh, 21vw); --sv: clamp(160px, 31svh, 22vw); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6svh var(--pad) 7svh; }
.sup-kicker { position: absolute !important; left: var(--pad); top: 7svh; margin: 0; }
.sup-fig { position: relative; width: fit-content; margin-top: calc(var(--sv) + 4px); }
.fig-sup .led { height: var(--sn); }
.sup-fig > .spot-supply { position: absolute; height: var(--sv); width: calc(var(--sv) * 0.553); left: calc(50% - var(--sv) * 0.2765); bottom: calc(100% + 4px); }
.sup-head { margin-top: 4svh; max-width: 25em; font-size: clamp(28px, 2.5vw, 42px); }
.sup-line { margin-top: 14px; font-size: 20px; line-height: 1.45; max-width: 40em; color: var(--w-mute); }


/* ---------- 9 business model (black): one dot per rupee, the head peeking up at it ---------- */
.model-copy { position: absolute !important; left: var(--pad); top: 50%; transform: translateY(-50%); width: 38vw; }
.model-head { font-size: clamp(44px, 4.8vw, 80px); }
.model-line { margin-top: 18px; font-size: 20px; line-height: 1.45; color: var(--k-mute); max-width: 22em; }
.ledger { position: absolute !important; right: var(--pad); top: 50%; transform: translateY(-50%); width: 50vw; margin: 0; }
.ledger-labels { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 16px; }
.ledger-labels p { font-size: 18px; line-height: 1.3; color: var(--k-mute); }
.ledger-labels b { display: block; font-size: clamp(32px, 3vw, 50px); line-height: 1; color: var(--w); margin-bottom: 6px; }
.ledger-labels .lab-h { text-align: right; }
.ledger-labels .lab-h b { color: var(--y); }
.waffle { display: block; width: 100%; }
.waffle .led-svg { width: 100%; height: auto; }
.led-w { fill: var(--w); }
.ledger figcaption { margin-top: 16px; font-size: 16px; color: var(--k-mute); }


/* ---------- 8 competition (white): the thesis and its conclusion on the left, four plain statements on the right, run in,
   no rules, large enough to fill the frame; HSTLE's statement is marked as with a highlighter, not boxed. On a phone the
   conclusion follows the statements (it comes after them in the page) ---------- */
.field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 5vw; padding: 8svh var(--pad); }
.field-copy { grid-column: 1; grid-row: 1; align-self: end; }
.field-head { font-size: clamp(40px, 4.6vw, 76px); text-wrap: balance; }
.rivals { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.field-line { grid-column: 1; grid-row: 2; align-self: start; margin-top: 28px; font-size: 20px; line-height: 1.45; max-width: 21em; }
.rivals { margin: 0; padding: 0; list-style: none; }
.rival { font-size: clamp(20px, 2.5vw, 40px); line-height: 1.24; letter-spacing: -0.012em; color: var(--w-mute); }
.rival + .rival { margin-top: 0.9em; }
.rival b { font-size: 1em; line-height: inherit; color: var(--k); }
.rival-cousin, .rival-us { color: var(--k); }
.mark { background: linear-gradient(transparent 0.14em, var(--y) 0.14em, var(--y) calc(100% - 0.06em), transparent calc(100% - 0.06em)); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 0.16em; margin: 0 -0.16em; }

/* ---------- 9 the round: the ask, its one line and the button first; then the two founders either side of the cat,
   one line each from TEAM.md ---------- */
.ask { display: grid; grid-template-columns: 1fr minmax(0, 18vw) 1fr; grid-template-rows: auto auto auto; align-content: center; column-gap: 3vw; padding: 7svh var(--pad) 6svh; text-align: center; }
.ask-top { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; }
.ask-head { font-size: clamp(48px, 5.6vw, 96px); }
.ask-line { margin-top: 16px; font-size: 20px; line-height: 1.45; max-width: 33em; color: var(--w-mute); }
.ask-top .fm { margin-top: 18px; max-width: 40em; }
.ask-top .kicker { margin-bottom: 14px; }
.ask-cta { margin-top: 24px; }
.ask-team { grid-column: 1 / -1; grid-row: 2; margin: 6svh 0 2.6svh; font: 600 20px/1.3 var(--sans); color: var(--k); }
.person { max-width: 27em; }
.person-name { font-size: clamp(34px, 3.2vw, 52px); color: var(--k); }
.person-role { margin-top: 8px; font: 600 18px/1.3 var(--sans); color: var(--k); }
.person-cv { margin-top: 10px; font-size: 18px; line-height: 1.42; color: var(--w-mute); }
.person-a { grid-column: 1; grid-row: 3; justify-self: end; text-align: right; }
.person-b { grid-column: 3; grid-row: 3; justify-self: start; text-align: left; }
.ask > .spot-ask { position: relative; grid-column: 2; grid-row: 3; justify-self: center; align-self: end; margin-top: 3svh; height: 29svh; width: calc(29svh * 0.553); }

/* ---------- the receipts ---------- */
.notes { position: relative; z-index: 2; background: var(--k); color: rgba(255, 255, 255, 0.74); padding: 72px var(--pad) 64px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.notes-head { font: 800 24px/1 var(--sans); letter-spacing: -0.02em; color: var(--w); margin: 0 0 22px; }
.notes-cols { column-count: 2; column-gap: 48px; max-width: 1100px; }
.notes-cols p { font-size: 14px; line-height: 1.55; margin: 0 0 14px; break-inside: avoid; }
.notes-cols b { color: var(--w); }


/* ---------- phones: each scene composed as its own column ---------- */
@media (max-width: 759px) {
  :root { --pad: 16px; }
  body { font-size: 16px; }
  .scene { display: flex; flex-direction: column; }
  .scene > *:not(.spot):not(.vlabs):not(.route) { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; width: auto !important; }
  .spot, .scene > .spot { position: relative; flex: none; }
  .fig-head { font-size: 30px; }
  .fm { font-size: 13px; padding: 6px 8px; }

  .cover { --cv: 58vw; min-height: 100svh; }
  .scene.cover > .masthead:not(.spot):not(.vlabs):not(.route) { position: absolute !important; top: 16px !important; left: var(--pad) !important; right: var(--pad) !important; }
  .lockup img { width: 104px; }
  .mast-note { font-size: 13px; }
  .cover-copy { padding: 66px var(--pad) 0; }
  .cover h1 { font-size: 40px; line-height: 0.96; }
  .lede { margin-top: 10px; font-size: 16px; line-height: 1.35; }
  .readout { margin-top: 16px; display: flex; align-items: center; gap: 12px; }
  .fig-cover .led { height: 58px; }
  .read-label { margin-top: 0; font-size: 14px; line-height: 1.3; }
  .read-more { margin-top: 10px; font-size: 13px; line-height: 1.35; }
  .cover .fm { margin-top: 10px; font-size: 12px; }
  .spot-cover { left: auto; top: auto; width: var(--cv); height: calc(var(--cv) * 0.51); margin: calc(var(--cv) * 0.86) auto 0; }

  .problem { --pv: 54vw; padding: 56px 0 0; }
  .prob-copy { padding: 0 var(--pad); }
  .prob-head { font-size: 42px; }
  .dropped { margin-top: 18px; }
  .dropped li { font-size: 17px; padding: 9px 0; }
  .dropped s { font-size: 25px; }
  .prob-line { margin-top: 16px; font-size: 15px; }
  .scene > .spot-problem { position: absolute; width: var(--pv); height: calc(var(--pv) * 0.51); left: calc(74vw - var(--pv) / 2); top: auto; bottom: calc(5svh - var(--pv) * 0.255); margin: 0; }

  .whynow { padding: 56px 0 0; }
  .why-copy { padding: 0 var(--pad); }
  .why-head { font-size: 40px; }
  .why-line { margin-top: 14px; font-size: 15px; }
  .scene > .spot-whynow { position: absolute; height: 66svh; width: calc(66svh * 0.553); left: calc(58vw - 33svh * 0.553); bottom: -25svh; margin: 0; }

  /* round 6: one line and one whole app screen per phone screen. Each screen keeps its own shape (780 x 1688, no crop),
     and --php, the phone's height with its frame, leaves room on a 390 x 844 screen for the step's line above it */
  .how { --php: clamp(440px, calc(100svh - 230px), 640px); padding: 56px 0 34px; }
  .how-kicker { padding: 0 var(--pad); }
  .flow { display: block; margin: 0 var(--pad); }
  .step { display: block; margin-top: 34px; }
  .step-text { min-height: 0; font-size: 15px; max-width: none; margin-bottom: 14px; }
  .step-line { font-size: 30px; }
  .phone { box-sizing: content-box; height: calc(var(--php) - 10px); width: auto; max-width: calc(100% - 10px); aspect-ratio: 780 / 1688; border-width: 5px; border-radius: 30px; margin: 0 auto; }
  .how-cap { padding: 18px var(--pad) 0; font-size: 12px; }

  .where { padding: 60px 0 26px; justify-content: space-between; }
  .half { padding: 0 var(--pad); }
  .half-out { text-align: left; }
  .half-out .half-sub { margin-left: 0; }
  .half-kicker { font-size: 16px; margin-bottom: 8px; }
  .half-head { font-size: 42px; }
  .half-sub { font-size: 15px; margin-top: 8px; }
  .spot-where { height: 40svh; width: calc(40svh * 0.553); margin: 10px auto 6px; left: auto; bottom: auto; }


  .traction { display: flex; padding: 56px var(--pad) 44px; justify-content: center; }
  .trac-kicker { margin-bottom: 18px; }
  .fig-trac .led { height: 186px; }
  .trac-copy { padding-top: 14px; }
  .trac-head { font-size: 30px; }
  .trac-line { font-size: 16px; margin-top: 14px; }

  .supply { --sn: calc((100vw - 2 * var(--pad)) * 0.30035); --sv: 29svh; padding: 56px var(--pad) 40px; align-items: stretch; text-align: left; }
  .sup-fig { align-self: center; margin-top: calc(var(--sv) + 4px + 14px); }
  .supply .sup-fig > .spot-supply { position: absolute; margin: 0; }
  .sup-head { font-size: 30px; margin-top: 18px; }
  .sup-line { font-size: 16px; margin-top: 10px; }


  .model { padding: 56px 0 40px; justify-content: center; }
  .model-copy { padding: 0 var(--pad); }
  .model-head { font-size: 36px; }
  .model-line { font-size: 15px; margin-top: 10px; }
  .ledger { margin: 24px var(--pad) 0; }
  .ledger-labels p { font-size: 14px; }
  .ledger-labels b { font-size: 26px; margin-bottom: 4px; }
  .ledger figcaption { font-size: 13px; margin-top: 10px; }


  .field { display: flex; padding: 56px var(--pad) 44px; justify-content: center; }
  .field-head { font-size: 34px; }
  .field-line { font-size: 15px; margin-top: 22px; }
  .rivals { margin-top: 26px; }
  .rival { font-size: 19px; line-height: 1.32; }

  .ask { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto; padding: 56px var(--pad) 36px; }
  .ask > * { position: relative !important; }
  /* round 6: one line on a phone, sized to the column (the words measure 10.54 of their own size in Mukta 800) */
  .ask-head { font-size: min(42px, calc((100vw - 2 * var(--pad)) * 0.093)); }
  .ask-top .fm { margin-top: 12px; }
  .ask-line { font-size: 15px; margin-top: 10px; }
  .ask-cta { margin-top: 20px; }
  .ask > .spot-ask { grid-column: 1; grid-row: 2; height: 28svh; width: calc(28svh * 0.553); margin: 26px auto 8px; }
  /* on a phone the two founders stack under the cat, each set left so it reads as one */
  .ask-team { grid-row: 3; margin: 22px 0 0; font-size: 17px; text-align: left; }
  .person-a { grid-column: 1; grid-row: 4; margin-top: 18px; }
  .person-b { grid-column: 1; grid-row: 5; margin-top: 22px; }
  .person { justify-self: stretch; align-self: start; text-align: left; max-width: none; }
  .person-name { font-size: 28px; }
  .person-role { margin-top: 4px; font-size: 15px; }
  .person-cv { margin-top: 6px; font-size: 15px; line-height: 1.4; }

  .notes { padding: 48px var(--pad) 40px; }
  .notes-head { font-size: 24px; margin-bottom: 20px; }
  .notes-cols { column-count: 1; }
  .notes-cols p { font-size: 13px; }
}

/* no WebGL: the renders stand in, and the cover's visor is drawn flat */
html.no-gl #stage { display: none; }
html.no-gl .spot .fallback { display: block; position: absolute; width: 398%; height: auto; max-width: none; left: -146%; top: -301%; }
/* a full figure: the render's figure (rows 125 to 841 of 886, 70% of its width) scaled to the spot's height, feet on its foot */
html.no-gl .spot[data-kind="body"] .fallback { width: 167.7%; left: -33.85%; top: auto; bottom: -6.3%; }
html.no-gl .visor-flat { display: block; background: #0e1117; border-radius: 22% / 40%; }
html.no-gl .vlab { display: none; }

@media (prefers-reduced-motion: reduce) {
  .vlab { transition-duration: 1ms; }
}