/* gethuntsman.com · lane 74, rebuilt as a product page in lane 74b (built by design/site-v2/final/_build/build.js).
   The app's own look: paper, ink and one blue (design/APPROVED.md:48-50). Blue is only the AI (the Mist art, the AI's
   glyphs) and the app's own blue controls inside the sample screens. Type is the system stack on Apple's scale; Geist
   Mono only inside the Mist canvas and the app screens.
   CSP: no inline style anywhere; every value lives here. Home's words are plain HTML in normal flow: no rule here ever
   hides them, and nothing waits for assets/home.js. */

@font-face { font-family: "Geist Mono"; src: url(/app/geistmono.woff2) format("woff2"); font-weight: 400 700; font-display: block; }

:root {
  --paper: #F5F5F2;
  --card: #FFFFFF;
  --surface: #ECECE8;
  --line: #D3D3CC;
  --hair: #E2E2DC;
  --ink: #16171A;
  --blue: #2B59E3;
  --blue-deep: #1D43B5;
  --wash: #E8EDFC;
  --night: #0D0E10;
  --night-card: #17181B;
  --night-line: #26272C;
  --night-line-2: #34353B;
  --night-ink: #EDEDEA;
  --night-blue: #6F8FF7;
  --sans: -apple-system, BlinkMacSystemFont, "Funnel Sans", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: clamp(20px, 5.6vw, 80px);
  /* one left/right edge for the nav, every section and every page: the gutter, or a centred 1280 column on wide screens */
  --edge: max(var(--gutter), calc((100vw - 1280px) / 2));
  --nav: 52px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.47 var(--sans);
  letter-spacing: -0.022em;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, p { margin: 0; }
figure { margin: 0; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 99; padding: 8px 14px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: 14px; text-decoration: none; }
.skip:focus { top: 10px; }

/* ------------------------------------------------------------------ nav: quiet, sticky, carries the one action */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav);
  background: rgba(245, 245, 242, 0.82);
  -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
  color: var(--ink);
}
.nav-in { height: 100%; padding: 0 var(--edge); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
.mk { display: block; flex: none; width: 22px; height: 22px; }
/* the wordmark: the name beside the mark on every page's nav. It shows only when it fits with the nav's 24 px of clear
   space before "Support", whatever the font or the phone (lane 74b fixer, F4: at 360 to 379 px it ran into "Support"):
   the brand may shrink, and once it is narrower than the mark and the name, the name wraps to a second line that the
   brand's one-line height clips. The mark alone is then the home link (its label still reads "Huntsman home"). */
.nav .brand { flex: 0 1 auto; min-width: 0; height: 22px; flex-wrap: wrap; align-content: flex-start; overflow: hidden; }
.wm { font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.022em; white-space: nowrap; }
.nav nav { flex: none; display: flex; align-items: center; gap: 22px; font-size: 14px; letter-spacing: -0.016em; }
.nav nav a { text-decoration: none; }
.nav nav a:hover, .nav nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; }
.store {
  display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-weight: 500; white-space: nowrap;
}
/* the pill is a link to Home's last line (#notify: email us and we tell you the day it's out), never a dead button */
.nav nav a.store, .nav nav a.store:hover { text-decoration: none; }
.nav nav a.store:hover { background: #2C2D32; }

/* the footer, on every page */
.foot { padding: 56px var(--edge) 56px; font-size: 12px; line-height: 1.5; letter-spacing: -0.01em; }
.foot-in { max-width: 1280px; margin: 0 auto; padding-top: 32px; border-top: 1px solid var(--line); }
.foot .mk { width: 20px; height: 20px; }
.foot .legal { max-width: 880px; margin: 20px 0 12px; }

/* ------------------------------------------------------------------ Home: the hero
   The approved line is the h1, in two sizes: its subject large, the three jobs after it. The Mist mark has its own box
   beside the words (below them on narrow screens), so it can never sit under them.
   The hero is as tall as its words and its art, never a forced full screen (panel fix, Oct 10: on a laptop the old
   near-full-height hero left an empty band under the words). So on every laptop and desktop the first sample phone
   already shows at the bottom of the first screen (check.js 15). */
.hero { display: flex; align-items: center; padding: clamp(32px, 6svh, 80px) var(--edge) clamp(32px, 6svh, 80px); }
.hero-in { width: 100%; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 80px); align-items: center; }
.line { font-weight: 600; }
.l1 { display: block; font-size: clamp(44px, 5.5vw, 88px); line-height: 1.03; letter-spacing: -0.02em; text-wrap: balance; }
.l2 { display: block; margin-top: 0.42em; font-size: clamp(24px, 2.5vw, 40px); line-height: 1.17; letter-spacing: -0.012em; text-wrap: pretty; }
.hero-lede { margin-top: clamp(24px, 3.4svh, 36px); max-width: 26em; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.36; letter-spacing: -0.012em; text-wrap: pretty; }
.risk { margin-top: clamp(20px, 3svh, 32px); max-width: 44em; font-size: 14px; line-height: 1.43; letter-spacing: -0.01em; }
.hero-art { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: min(56svh, 540px); }
.art { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; color: var(--blue); pointer-events: none; }

/* pause: two square-ended bars, play a sharp triangle (the mark's square language) */
.pause {
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; flex: none;
  display: grid; place-items: center; cursor: pointer; color: var(--ink); background: rgba(22, 23, 26, 0.07);
}
.pause:hover { background: rgba(22, 23, 26, 0.12); }
.hero-art .pause { position: absolute; right: 0; bottom: 0; }
.pause svg { width: 14px; height: 14px; display: block; }
.pause .i-play { display: none; }
.pause[aria-pressed="true"] .i-play { display: inline; }
.pause[aria-pressed="true"] .i-pause { display: none; }

/* ------------------------------------------------------------------ Home: the sections
   Each is one picture, one headline and one or two short sentences. Paper and white alternate. */
.feat { padding: clamp(64px, 9svh, 120px) var(--edge); }
.alt { background: var(--card); }
.feat-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 112px); align-items: center; }
.flip .feat-copy { order: 2; }
.feat-copy h2, .faq h2, .end h2 { font-size: clamp(36px, 3.7vw, 56px); line-height: 1.07; letter-spacing: -0.012em; font-weight: 600; text-wrap: balance; }
.feat-copy h2 { max-width: 12em; }
.feat-copy p { margin-top: 24px; max-width: 24em; font-size: clamp(19px, 1.55vw, 23px); line-height: 1.38; letter-spacing: -0.012em; text-wrap: pretty; }
.shot { display: flex; flex-direction: column; align-items: center; }
.shot figcaption { margin-top: 18px; min-height: 36px; display: flex; align-items: center; gap: 14px; font-size: 13px; line-height: 1.2; letter-spacing: -0.01em; }

.faq { padding: clamp(64px, 9svh, 120px) var(--edge); }
.qa { margin-top: clamp(32px, 5svh, 56px); }
.q { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 10px 48px; padding: 28px 0; border-top: 1px solid var(--line); }
.q h3 { font-size: 21px; line-height: 1.24; letter-spacing: 0.006em; font-weight: 600; text-wrap: balance; }
.q p { max-width: 34em; text-wrap: pretty; }

.end { padding: clamp(80px, 13svh, 152px) var(--edge); text-align: center; }
.end h2 { margin: 0 auto; max-width: 14em; font-size: clamp(36px, 4.4vw, 64px); line-height: 1.06; letter-spacing: -0.015em; }
.end p { margin-top: 20px; font-size: clamp(19px, 1.55vw, 23px); line-height: 1.38; }

/* ------------------------------------------------------------------ the phone and the app's screens
   A plain device: an ink body, the island, the status bar and the home bar. Each screen is the app's own layout at its
   402 x 874 design size; --u is one design pixel, so a screen scales as one picture at any phone width. The colours are
   the app's: paper, card white, ink, one blue for the AI and the app's blue controls (design/APPROVED.md:48). */
.phone {
  --pw: min(clamp(280px, 26vw, 390px), calc((100svh - 120px) * 426 / 898));
  position: relative; flex: none; width: var(--pw); aspect-ratio: 426 / 898;
  padding: calc(var(--pw) * 12 / 426); border-radius: calc(var(--pw) * 66 / 426); background: var(--ink);
}
.screen {
  --u: calc(var(--pw) / 426);
  position: relative; height: 100%; overflow: hidden; border-radius: calc(54 * var(--u));
  background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: calc(16 * var(--u)); line-height: 1.3; letter-spacing: -0.01em;
}
.screen b { font-weight: 600; }
.screen i { font-style: normal; }
.g { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }
.mini { display: block; flex: none; color: var(--blue); }

.sb { position: absolute; left: 0; right: 0; top: 0; height: calc(54 * var(--u)); z-index: 6; color: var(--ink); }
.sb-t { position: absolute; left: calc(38 * var(--u)); top: calc(19 * var(--u)); font-size: calc(16.5 * var(--u)); font-weight: 600; line-height: 1; letter-spacing: -0.01em; }
.isl { position: absolute; left: 50%; top: calc(11 * var(--u)); width: calc(122 * var(--u)); height: calc(35 * var(--u)); margin-left: calc(-61 * var(--u)); border-radius: calc(18 * var(--u)); background: var(--night); }
.sb-r { position: absolute; right: calc(32 * var(--u)); top: calc(21 * var(--u)); display: flex; align-items: flex-end; gap: calc(7 * var(--u)); }
.sig { display: flex; align-items: flex-end; gap: calc(2 * var(--u)); height: calc(11 * var(--u)); }
.sig b { display: block; width: calc(3 * var(--u)); border-radius: calc(1 * var(--u)); background: currentColor; }
.sig b:nth-child(1) { height: 36%; } .sig b:nth-child(2) { height: 56%; } .sig b:nth-child(3) { height: 78%; } .sig b:nth-child(4) { height: 100%; }
.bat { display: flex; width: calc(25 * var(--u)); height: calc(12 * var(--u)); padding: calc(2 * var(--u)); border-radius: calc(3.5 * var(--u)); box-shadow: inset 0 0 0 calc(1 * var(--u)) currentColor; }
.bat b { display: block; width: 78%; border-radius: calc(1.5 * var(--u)); background: currentColor; }
.hb { position: absolute; left: 50%; bottom: calc(8 * var(--u)); width: calc(134 * var(--u)); height: calc(5 * var(--u)); margin-left: calc(-67 * var(--u)); border-radius: 99px; background: currentColor; z-index: 6; }

/* This week (as built today: no AI line under the headlines until the desk ships, planning/BUILD_LIST.md A2) */
.s-title { margin: calc(78 * var(--u)) calc(28 * var(--u)) 0; font-size: calc(34 * var(--u)); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
.s-h { margin: calc(24 * var(--u)) calc(28 * var(--u)) 0; font-size: calc(20 * var(--u)); line-height: 1.2; font-weight: 700; letter-spacing: -0.012em; }
.ev, .nw { margin: calc(10 * var(--u)) calc(28 * var(--u)) 0; padding-bottom: calc(12 * var(--u)); border-bottom: calc(1 * var(--u)) solid var(--hair); }
.ev b, .nw b { display: block; font-size: calc(17 * var(--u)); line-height: 1.3; }
.ev i, .nw i { display: block; margin-top: calc(5 * var(--u)); font: 500 calc(12.5 * var(--u))/1.3 var(--mono); letter-spacing: 0; }
.corner { position: absolute; right: calc(18 * var(--u)); bottom: calc(30 * var(--u)); width: calc(62 * var(--u)); height: calc(62 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: var(--card); box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--hair); }
.corner .mini { width: calc(46 * var(--u)); height: calc(46 * var(--u)); }

/* the AI panel over your position */
.pos { position: absolute; left: 0; right: 0; top: calc(72 * var(--u)); }
.pos-n { margin: 0 calc(28 * var(--u)); font-size: calc(19 * var(--u)); line-height: 1.2; font-weight: 600; }
.pos-p { margin: calc(4 * var(--u)) calc(28 * var(--u)) 0; font-size: calc(40 * var(--u)); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
.pos-c { display: block; width: 100%; height: calc(150 * var(--u)); margin-top: calc(20 * var(--u)); overflow: visible; }
.pos-c .pl { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pos-c .yl { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.pos-c .now { fill: var(--ink); }
.dim { position: absolute; inset: 0; z-index: 2; background: rgba(22, 23, 26, 0.3); }
.panel { position: absolute; left: 0; right: 0; top: calc(318 * var(--u)); bottom: 0; z-index: 3; padding: calc(8 * var(--u)) calc(20 * var(--u)) 0; border-radius: calc(26 * var(--u)) calc(26 * var(--u)) 0 0; background: var(--paper); }
.grab { display: block; width: calc(38 * var(--u)); height: calc(5 * var(--u)); margin: 0 auto; border-radius: 99px; background: var(--line); }
.pnh { position: relative; display: flex; align-items: center; justify-content: center; height: calc(44 * var(--u)); margin-top: calc(4 * var(--u)); }
.pnh .g { position: absolute; left: 0; width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.ph-t { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 700; }
.ph-t .mini { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.mu { width: fit-content; max-width: calc(268 * var(--u)); margin: calc(12 * var(--u)) 0 0 auto; padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(18 * var(--u)); background: var(--ink); color: #FFFFFF; font-size: calc(16 * var(--u)); line-height: 1.35; }
.ma { display: flex; gap: calc(10 * var(--u)); margin-top: calc(16 * var(--u)); }
.ma .mini { width: calc(21 * var(--u)); height: calc(18 * var(--u)); margin-top: calc(2 * var(--u)); }
.ma p { font-size: calc(16 * var(--u)); line-height: 1.42; }
.ma b { font-weight: 700; }
.ob { margin-top: calc(14 * var(--u)); padding-left: calc(28 * var(--u)); }
.ob span { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); height: calc(36 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: 99px; background: var(--wash); color: var(--blue-deep); font: 500 calc(13 * var(--u))/1 var(--mono); letter-spacing: 0; }
.ob .g { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.inp { position: absolute; left: calc(16 * var(--u)); right: calc(16 * var(--u)); bottom: calc(50 * var(--u)); height: calc(50 * var(--u)); display: flex; align-items: center; padding: 0 calc(6 * var(--u)) 0 calc(18 * var(--u)); border-radius: 99px; background: var(--card); box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--hair); font-size: calc(16 * var(--u)); }
.inp > span:first-child { opacity: 0.45; }
.snd { display: grid; place-items: center; width: calc(38 * var(--u)); height: calc(38 * var(--u)); margin-left: auto; border-radius: 50%; background: var(--blue); color: #FFFFFF; }
.snd .g { width: calc(18 * var(--u)); height: calc(18 * var(--u)); stroke-width: 2.2; }
.ft { position: absolute; left: 0; right: 0; bottom: calc(24 * var(--u)); text-align: center; font: 500 calc(11 * var(--u))/1 var(--mono); letter-spacing: 0; }

/* Ticket, Checkout, Bought: one phone, one state at a time (home.js moves data-state; without it the ticket stays) */
.st { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.35s linear, visibility 0s linear 0.35s; }
.s-act[data-state="ticket"] .st-ticket, .s-act[data-state="checkout"] .st-checkout, .s-act[data-state="swipe"] .st-checkout, .s-act[data-state="bought"] .st-bought { opacity: 1; visibility: visible; transition: opacity 0.35s linear, visibility 0s; }
.tk-h, .co-h { position: absolute; top: calc(64 * var(--u)); left: calc(20 * var(--u)); right: calc(20 * var(--u)); height: calc(36 * var(--u)); display: flex; align-items: center; justify-content: center; font: 600 calc(15 * var(--u))/1 var(--mono); letter-spacing: 0; }
.tk-h .g, .co-h .g { position: absolute; left: 0; width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.seg { position: absolute; top: calc(114 * var(--u)); left: calc(20 * var(--u)); right: calc(20 * var(--u)); height: calc(50 * var(--u)); display: flex; padding: calc(4 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--surface); }
.seg span { flex: 1; display: grid; place-items: center; border-radius: calc(11 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 600; }
.seg .on { background: var(--ink); color: #FFFFFF; }
.days { position: absolute; top: calc(182 * var(--u)); left: calc(16 * var(--u)); right: calc(16 * var(--u)); display: flex; justify-content: space-between; }
.days span { display: grid; place-items: center; height: calc(34 * var(--u)); padding: 0 calc(11 * var(--u)); border-radius: 99px; font: 500 calc(14 * var(--u))/1 var(--mono); letter-spacing: 0; }
.days .on { background: var(--blue); color: #FFFFFF; }
.ruler { position: absolute; top: calc(240 * var(--u)); left: calc(20 * var(--u)); right: calc(20 * var(--u)); height: calc(66 * var(--u)); display: flex; justify-content: space-between; align-items: flex-end; }
.ruler i { width: calc(40 * var(--u)); text-align: center; font: 500 calc(12 * var(--u))/1 var(--mono); letter-spacing: 0; }
.ruler .tk { position: absolute; left: 0; right: 0; top: calc(36 * var(--u)); border-top: calc(2 * var(--u)) dotted var(--line); }
.ruler .rb { position: absolute; left: 50%; top: 0; transform: translateX(-50%); display: grid; place-items: center; height: calc(26 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--ink); color: #FFFFFF; font: 600 calc(14 * var(--u))/1 var(--mono); letter-spacing: 0; }
.price { position: absolute; top: calc(336 * var(--u)); left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: calc(20 * var(--u)); }
.price b { font-size: calc(64 * var(--u)); line-height: 1; font-weight: 700; letter-spacing: -0.03em; }
.step { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.step i { display: grid; place-items: center; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; background: var(--surface); font-size: calc(22 * var(--u)); line-height: 1; }
.step em { font: 500 calc(17 * var(--u))/1 var(--mono); font-style: normal; }
.aic { position: absolute; top: calc(446 * var(--u)); left: calc(20 * var(--u)); right: calc(20 * var(--u)); display: flex; gap: calc(10 * var(--u)); padding: calc(18 * var(--u)); border-radius: calc(22 * var(--u)); background: var(--card); box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--hair); }
.aic .mini { width: calc(21 * var(--u)); height: calc(18 * var(--u)); margin-top: calc(3 * var(--u)); }
.aic p { font-size: calc(17 * var(--u)); line-height: 1.42; }
.aic b { font-weight: 700; }
.btns { position: absolute; left: calc(20 * var(--u)); right: calc(20 * var(--u)); bottom: calc(40 * var(--u)); display: flex; gap: calc(12 * var(--u)); }
.btns span { flex: 1; display: grid; place-items: center; height: calc(56 * var(--u)); border-radius: calc(16 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 700; }
.btns .b2 { background: var(--card); box-shadow: inset 0 0 0 calc(1.5 * var(--u)) var(--line); }
.btns .b1 { background: var(--blue); color: #FFFFFF; transition: transform 0.15s ease-out; }
.s-act.press .btns .b1 { transform: scale(0.96); }
.co-i { position: absolute; top: calc(122 * var(--u)); left: calc(20 * var(--u)); right: calc(20 * var(--u)); display: flex; align-items: center; justify-content: space-between; padding-bottom: calc(16 * var(--u)); border-bottom: calc(1 * var(--u)) solid var(--hair); }
.co-i div b { display: block; font-size: calc(17 * var(--u)); line-height: 1.3; }
.co-i div i { display: block; margin-top: calc(2 * var(--u)); font: 500 calc(13 * var(--u))/1.4 var(--mono); letter-spacing: 0; }
.co-i > b { font-size: calc(17 * var(--u)); font-weight: 700; }
.co-t { position: absolute; top: calc(204 * var(--u)); left: calc(20 * var(--u)); right: calc(20 * var(--u)); display: flex; align-items: baseline; justify-content: space-between; }
.co-t b { font-size: calc(20 * var(--u)); font-weight: 700; }
.co-t .co-big { font-size: calc(32 * var(--u)); letter-spacing: -0.02em; }
.co-x { position: absolute; top: calc(262 * var(--u)); left: calc(20 * var(--u)); right: calc(20 * var(--u)); display: flex; align-items: baseline; justify-content: space-between; padding: calc(14 * var(--u)) 0; border-top: calc(1 * var(--u)) solid var(--hair); border-bottom: calc(1 * var(--u)) solid var(--hair); }
.co-x b { font-size: calc(15 * var(--u)); }
.co-x i { font: 500 calc(12.5 * var(--u))/1 var(--mono); letter-spacing: 0; }
.co-s { position: absolute; top: calc(336 * var(--u)); left: calc(20 * var(--u)); right: calc(20 * var(--u)); }
.co-s b { display: block; font-size: calc(15 * var(--u)); }
.co-s p { margin-top: calc(6 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.45; }
.slab { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: calc(196 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(10 * var(--u)); background: var(--blue); color: #FFFFFF; transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1); }
.slab .g { width: calc(22 * var(--u)); height: calc(22 * var(--u)); stroke-width: 2.2; }
.slab span { font-size: calc(24 * var(--u)); font-weight: 700; }
.s-act[data-state="swipe"] .slab { height: 100%; }
.st-bought { background: var(--blue); color: #FFFFFF; }
.bart { position: absolute; left: 50%; top: calc(200 * var(--u)); width: calc(280 * var(--u)); height: calc(250 * var(--u)); margin-left: calc(-140 * var(--u)); color: #FFFFFF; }
.b-t { position: absolute; left: 0; right: 0; top: calc(486 * var(--u)); text-align: center; font-size: calc(34 * var(--u)); line-height: 1; font-weight: 700; letter-spacing: -0.02em; }
.b-s { position: absolute; left: 0; right: 0; top: calc(534 * var(--u)); text-align: center; font-size: calc(16 * var(--u)); line-height: 1.3; }
.s-act[data-state="swipe"] .sb, .s-act[data-state="bought"] .sb, .s-act[data-state="swipe"] .hb, .s-act[data-state="bought"] .hb { color: #FFFFFF; }

/* Connected */
.tiles { position: absolute; top: calc(286 * var(--u)); left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: calc(22 * var(--u)); }
.t-app, .t-brk { display: grid; place-items: center; width: calc(104 * var(--u)); height: calc(104 * var(--u)); border-radius: calc(24 * var(--u)); }
.t-app { background: var(--ink); }
.t-app .mini { width: calc(80 * var(--u)); height: calc(80 * var(--u)); color: #FFFFFF; }
.t-brk { background: var(--card); box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--hair); text-align: center; font-size: calc(19 * var(--u)); line-height: 1.15; font-weight: 700; }
.t-ok { display: grid; place-items: center; width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; background: var(--ink); color: #FFFFFF; }
.t-ok .g { width: calc(18 * var(--u)); height: calc(18 * var(--u)); stroke-width: 2.2; }
.c-t { position: absolute; left: 0; right: 0; top: calc(440 * var(--u)); text-align: center; font-size: calc(40 * var(--u)); line-height: 1; font-weight: 700; letter-spacing: -0.02em; }
.c-s { position: absolute; left: 0; right: 0; top: calc(498 * var(--u)); text-align: center; font: 500 calc(13 * var(--u))/1 var(--mono); letter-spacing: 0; }
.c-b { position: absolute; left: calc(20 * var(--u)); right: calc(20 * var(--u)); bottom: calc(44 * var(--u)); display: grid; place-items: center; height: calc(56 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--ink); color: #FFFFFF; font-size: calc(18 * var(--u)); font-weight: 700; }

/* ------------------------------------------------------------------ Support and Legal */
.page { padding: 0 var(--edge); }
.page-head { padding: clamp(56px, 10svh, 104px) 0 clamp(40px, 6svh, 64px); }
.page-head h1 { font-size: clamp(40px, 4vw, 56px); line-height: 1.07; letter-spacing: -0.005em; font-weight: 600; }
.contact, .page-head .lede { margin-top: 20px; max-width: 24em; font-size: clamp(21px, 2vw, 28px); line-height: 1.18; letter-spacing: 0.007em; }

.rows { padding-bottom: 96px; }
.nf .page { min-height: calc(100svh - var(--nav) - 240px); }
.row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px 48px; padding: 32px 0; border-top: 1px solid var(--line); }
.row h2 { font-size: 21px; line-height: 1.19; letter-spacing: 0.011em; font-weight: 600; text-wrap: balance; }
.page-head h1, .prose h2 { text-wrap: balance; }
.contact, .page-head .lede, .row-b p, .row-b li, .prose p, .prose li { text-wrap: pretty; }
.row-b { max-width: 40em; }
.row-b > * + * { margin-top: 12px; }
.row-b ol { margin: 0; padding-left: 1.25em; }
.row-b li + li { margin-top: 6px; }
.links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.brokers-line { display: flex; flex-wrap: wrap; gap: 0 6px; }
.brokers { list-style: none; margin: 0; padding: 0; display: flex; gap: 0 6px; }

/* the legal switcher lives beside the text (with the section list), never above the title */
.side { position: sticky; top: calc(var(--nav) + 32px); align-self: start; }
.docs { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0 0 32px -14px; font-size: 14px; }
.docs a { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; text-decoration: none; }
.docs a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.docs a:not([aria-current]):hover { background: var(--surface); }
.draft { display: inline-block; margin-top: 28px; padding: 10px 16px; border: 1px solid var(--ink); border-radius: 12px; font-size: 14px; line-height: 1.43; }
.draft-t { font-weight: 600; margin-right: 4px; }
.meta { margin-top: 14px; font-size: 14px; }

.doc { display: grid; grid-template-columns: 220px minmax(0, 700px); gap: 72px; padding-bottom: 104px; }
.toc { font-size: 14px; line-height: 1.35; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li + li { margin-top: 10px; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.prose h2 { margin: 56px 0 16px; font-size: 28px; line-height: 1.14; letter-spacing: 0.007em; font-weight: 600; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul, .prose table { margin: 0 0 16px; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 8px; }
.prose strong { font-weight: 600; }
.prose code { font-family: var(--mono); font-size: 0.86em; letter-spacing: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; letter-spacing: -0.01em; margin: 24px 0 24px; }
.prose th { text-align: left; font-weight: 600; padding: 0 16px 10px 0; border-bottom: 1px solid var(--ink); vertical-align: bottom; }
.prose td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
mark.ph { background: var(--surface); color: var(--ink); padding: 0 4px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line); }

/* ------------------------------------------------------------------ tablet and below: one column */
@media (max-width: 1068px) {
  .doc { grid-template-columns: 180px minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 899px) {
  .hero { min-height: 0; padding-top: clamp(28px, 5svh, 64px); }
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: clamp(8px, 2svh, 24px); }
  .l1 { font-size: clamp(40px, 8.4vw, 72px); }
  .l2 { font-size: clamp(23px, 4.4vw, 36px); }
  .hero-art { aspect-ratio: auto; height: clamp(220px, 36svh, 420px); max-height: none; }
  .feat-in { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .flip .feat-copy { order: 0; }
  .feat-copy h2 { max-width: 14em; }
  .phone { --pw: min(340px, calc(100vw - 2 * var(--gutter) - 8px), calc((100svh - 120px) * 426 / 898)); }
}

/* ------------------------------------------------------------------ phone */
@media (max-width: 734px) {
  .nav-in { gap: 20px; }
  .nav nav { gap: 12px; font-size: 12px; }
  .store { height: 28px; padding: 0 10px; }
  .mk { width: 20px; height: 20px; }
  .brand { gap: 7px; }
  .nav .brand { height: 20px; }
  .wm { font-size: 16px; line-height: 20px; }

  .risk { font-size: 13px; }
  .pause { width: 34px; height: 34px; }
  .feat-copy p { margin-top: 18px; }
  .q { grid-template-columns: minmax(0, 1fr); padding: 24px 0; }
  .q h3 { font-size: 19px; }
  .foot { padding: 40px var(--edge); }

  .row { grid-template-columns: 1fr; padding: 28px 0; }
  .doc { grid-template-columns: 1fr; }
  .toc { display: none; }
  .side { position: static; }
  .docs { flex-direction: row; gap: 4px; margin: 0 0 8px -14px; }
  .prose h2 { font-size: 24px; margin-top: 44px; }
  .prose table, .prose thead, .prose tbody, .prose tr, .prose th, .prose td { display: block; }
  .prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .prose tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .prose td { padding: 2px 0 8px; border: 0; }
  .prose td::before { content: attr(data-label); display: block; font-weight: 600; font-size: 14px; }
}

/* ------------------------------------------------------------------ very narrow phones */
@media (max-width: 359px) {
  .nav nav { gap: 12px; }
}

/* ------------------------------------------------------------------ reduced motion: stills, no fades */
@media (prefers-reduced-motion: reduce) {
  .pause { display: none; }
  .st, .slab, .btns .b1 { transition: none; }
}

.doc > *, .side { min-width: 0; }
@media (max-width: 719px) { .docs { flex-wrap: wrap; } }