/* 4THINKERS — v1.0.0. Plan: docs/website-plan.md. Layout: the Illustrator design file, kept outside git (1920 px).

   Type: five roles, three screen tiers, steps of ×1.25 (gentle, so titles and text stay in proportion):
               Desktop ≥1600   Laptop 1024–1599   Phone & tablet <1024   line height
     Display   70              56                 40                      1.08   big titles, the band title and the figures
     Title     35              28                 24                      1.3    step titles, hero and footer logo
     Lead      22              22                 18                      1.25   the line after every big title, intro, step answers, step line
     Body      18              18                 16                      1.5    paragraphs, points, cards, figure labels, table, footer links, buttons
     Small     14              14                 13                      1.5    labels, struck lines, notes, © line
   Pairing rule: every big title is followed by a Lead line. Sizes jump at the tiers; they never change while scrolling.
   Exceptions: diagram labels (scale with the drawing), superscripts, Marcellus optical sizes (lowercase +4%, capitals −8%).
   Fonts: Satoshi everywhere; Marcellus only for "think" words (.t), the logotype (.wm) and the research figures (.fig).
   Spacing: 8 px base — 4 8 12 16 24 32 48 64 96 128 160 192. Between sections: 160 → 64 (--sec);
   where the background changes colour, half on each side. Title → line under it: 24. Line → content: 64 → 40.
   Motion: transform and opacity only; all of it off with prefers-reduced-motion. */

@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Variable.ttf") format("truetype"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Marcellus"; src: url("../fonts/Marcellus-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  --page: #ffffff;
  --raised: #f2f2f2;
  --text-1: #141716;
  --text-2: #565958;
  --text-3: #7f7f7f;
  --border: #e4e4e4;
  --blue: #2c2ff0;
  --sans: "Satoshi", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --serif: "Marcellus", "Times New Roman", serif;

  /* type: five roles; laptop and phone values are set in the tier media queries below */
  --fs-display: 70px;
  --fs-title: 35px;
  --fs-lead: 22px;
  --fs-body: 18px;
  --fs-small: 14px;

  /* spacing */
  --sec: clamp(64px, 39.53px + 6.275vw, 160px);
  --gap: calc(var(--sec) * 2);   /* the one gap between sections */
  --mx: clamp(20px, 4.9vw, 94px);
  --wide: 1400px;
  --narrow: 1180px;
  --head: 72px;
  --r: 12px;
}
@media (max-width: 1599px) { :root { --fs-display: 56px; --fs-title: 28px; } }
@media (max-width: 1023px) { :root { --fs-display: 40px; --fs-title: 24px; --fs-lead: 18px; --fs-body: 16px; --fs-small: 13px; } }
@media (max-width: 599px) { :root { --fs-body: 13px; } }   /* phones: body text at the size of the 66% line (Austin, 22 Oct); four sizes 40 / 24 / 18 / 13 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 24px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: var(--page); color: var(--text-1); font: 400 var(--fs-body)/1.5 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ol, ul { margin: 0; padding: 0; font-weight: inherit; font-size: inherit; }
p, li, summary, dd, td, th { text-wrap: pretty; }   /* no single word left alone on a last line */
.br-d { display: none; }   /* phrase breaks for desktop only */
@media (min-width: 1400px), (min-width: 380px) and (max-width: 599px) { .br-d { display: inline; } }   /* where the step column fits each phrase on one line */
.hero-pre { text-wrap: wrap; }   /* Austin's own breaks, left as they are */
ol, ul { list-style: none; }
b { font-weight: 500; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }
.skip { position: absolute; left: 16px; top: -48px; z-index: 100; background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; margin: 0 auto; padding: 0 var(--mx); }
.wrap.wide { max-width: calc(var(--wide) + 2 * var(--mx)); }
.wrap.narrow { max-width: calc(var(--narrow) + 2 * var(--mx)); }
.center { text-align: center; }
.blue { color: var(--blue); }

/* Marcellus for "think" words: sized 4% up so its cap height matches Satoshi */
.t { font-family: var(--serif); font-weight: 400; font-size: 1.04em; letter-spacing: 0; }
.t.caps { font-size: .92em; }   /* Marcellus capitals read larger than Satoshi at the same size */

/* type roles */
.display { font: 500 var(--fs-display)/1.08 var(--sans); letter-spacing: -0.02em; text-wrap: balance; }
.h3 { font: 400 var(--fs-title)/1.3 var(--sans); letter-spacing: -0.01em; text-wrap: balance; }
.lead { font: 400 var(--fs-lead)/1.25 var(--sans); color: var(--text-1); text-wrap: pretty; }
.label { font: 500 var(--fs-small)/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.small { font: 400 var(--fs-small)/1.5 var(--sans); color: var(--text-3); text-wrap: pretty; }
.small a { color: var(--text-2); }

/* logotype: Marcellus, 90% horizontal scale as in the deck */
.wm { display: inline-flex; align-items: baseline; color: var(--blue); text-decoration: none; font: 400 var(--fs-lead)/1 var(--serif); white-space: nowrap; letter-spacing: 0; }
.wm { transform: scaleX(.9); transform-origin: left center; }
.wm-4 { margin-right: .22em; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; height: clamp(48px, 44.18px + 0.98vw, 61px); padding: 0 clamp(24px, 21.45px + 0.654vw, 34px); border-radius: 999px; background: var(--blue); color: #fff; font: 500 var(--fs-body)/1 var(--sans); text-decoration: none; white-space: nowrap; transition: transform .18s ease, opacity .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; opacity: .9; }
.btn.sm { height: 44px; padding: 0 20px; }
.btn.inv { background: #fff; color: var(--blue); }
.top .btn, .foot .btn { font-size: var(--fs-small); }   /* the small pills (header, footer): text one step down so it doesn't read bigger than the main buttons */

/* ============ header: hidden over the hero, sticky after it ============ */
.top { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--head); background: rgba(255,255,255,.94); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--border); transform: translateY(-100%); transition: transform .3s ease; }
.top.on { transform: none; }
.top .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.top .wm { font-size: var(--fs-lead); }

/* ============ 1 · HERO ============ */
/* As drawn in the Illustrator design file (1920 × 1080): logo centred at the top; the chair (614–1252 px, top 314) stands on the
   bottom edge just left of centre; the left-aligned text block starts at 873 px, inside the chair's curve, its button
   ending 423 px above the bottom, clear of the seat. Positions use one unit --u (artboard px); type keeps the site scale. */
.hero { --hh: max(100svh, 720px); --u: min(calc(100vw / 1000), calc(var(--hh) / 1080)); position: relative; height: var(--hh); overflow: hidden; }   /* desktop: laid out for at least 720 px of height, so on short windows the text never meets the logo (the chair's feet go just below the fold) */
.hero-wm { position: absolute; top: calc(56 * var(--u)); left: 50%; transform: translateX(-50%) scaleX(.9); transform-origin: center; font-size: var(--fs-title); z-index: 2; }
.hero-chair { position: absolute; z-index: 1; bottom: 0; left: calc(50% - 346 * var(--u)); width: calc(637 * var(--u)); max-width: none; pointer-events: none; }
.hero-text { position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); bottom: calc(423 * var(--u) + var(--lift, 0px)); width: max-content; text-align: center; }   /* centred at every size (Austin, 22 Oct); --lift (JS) raises it clear of the backrest when needed */
.hero-pre { font: 400 var(--fs-lead)/1.25 var(--sans); }
/* entrance, very gentle: the chair settles back from a slight zoom (a slow dolly), the name and the text fade in after.
   Only when JS runs (.js on <html>); --lift is measured from the layout, so the zoom doesn't disturb it */
.js .hero-wm, .js .hero-text { opacity: 0; }
.js .hero-chair { opacity: 0; transform: scale(1.06); transform-origin: 50% 100%; }
.hero.go .hero-chair { opacity: 1; transform: none; transition: opacity 1.6s ease, transform 3.2s cubic-bezier(.16,.6,.2,1); }
.hero.go .hero-wm { opacity: 1; transition: opacity 1.2s ease .4s; }
.hero.go .hero-text { opacity: 1; transition: opacity 1.4s ease .7s; }
@media (prefers-reduced-motion: reduce) { .js .hero-chair { transform: none; } .hero.go .hero-chair, .hero.go .hero-wm, .hero.go .hero-text { transition: opacity .6s ease; } }
.hero-pre b { font-weight: 500; }
.hero-text .display { margin: 16px 0 clamp(24px, 19.92px + 1.05vw, 40px); }

/* ============ 2 · ARE YOU A THINKER? ============ */
.ask { padding: var(--gap) 0; text-align: center; }   /* as much room below as above, before the blue band */
.ask .lead { margin-top: 24px; }

/* ============ 3 · BAND + WITHOUT / WITH ============ */
.band { background: var(--blue); color: #fff; padding-top: calc(var(--gap) * .5); text-align: center; }   /* half the section rhythm on each side of a colour change */
.band-title { font: 500 var(--fs-display)/1.08 var(--sans); letter-spacing: -0.02em; text-wrap: balance; }
.band .lead { color: #fff; margin-top: 24px; }
.band .lead b { font-weight: 500; }
.duo-wrap { margin-top: clamp(40px, 33.88px + 1.57vw, 64px); background: linear-gradient(to bottom, var(--blue) 0 60%, var(--page) 60% 100%); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; }
.duo-card { background: var(--raised); color: var(--text-1); border-radius: var(--r); padding: clamp(24px, 19.9px + 1.05vw, 40px); }
.duo-k { font: 400 var(--fs-lead)/1.3 var(--sans); }   /* "Today, without / Tomorrow, with" a step above the card text */
.duo-k span:first-child { color: var(--text-3); }
.duo-k em { font-style: normal; color: var(--blue); }
.duo-k .t { color: var(--blue); }
.duo-d { margin-top: 8px; font: 400 var(--fs-body)/1.5 var(--sans); max-width: 30em; }
.duo-fig { display: block; width: 100%; height: auto; margin-top: clamp(24px, 20px + 1vw, 40px); overflow: visible; }
.duo-fig .fig-lab { font: 400 15px var(--sans); fill: var(--text-3); }
.duo-fig .fig-lab.blue { fill: var(--blue); }
.duo-fig .fig-wm { font: 400 15px var(--serif); fill: var(--blue); }
.duo-fig .wm-gap { transform-box: fill-box; transform-origin: 0 0; }   /* the break in the frame line behind the 4THINKERS label */
.duo-fig .pills rect { fill: var(--page); stroke: #04243a; stroke-width: .8; }
.duo-fig .pills text { font: 400 15px var(--sans); fill: var(--text-1); text-anchor: middle; }
.duo-fig .pills.b rect { stroke: var(--blue); }
.duo-fig .pills.b text { fill: var(--blue); }

/* ============ 4 · BUILT THE 4THINKERS WAY ============ */
.product { padding: calc(var(--gap) - 24px) 0 0; }   /* the sticky title adds 24 px of its own */
.pscroll { min-height: 290vh; }   /* scroll room: the block stays pinned while four steps pass */
.pin { position: sticky; top: var(--pin, var(--head)); }   /* title, step line, screen and text: one block, pinned, centred on tall screens */
.how-head { padding-top: 24px; }
.way { margin-top: 8px; }
.way ol { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 0; padding-top: 12px; padding-bottom: 12px; }
.way li { display: inline-flex; align-items: center; font: 400 var(--fs-lead)/1.25 var(--sans); }
.way li + li::before { content: "·"; margin: 0 .55em; color: var(--text-3); }
.way a { color: var(--text-3); text-decoration: none; transition: color .25s ease; }
.way li.on a { color: var(--blue); }
.way a:hover { color: var(--text-1); }

.pgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-top: clamp(32px, 26.9px + 1.31vw, 48px); }
.stage { grid-column: 1 / span 7; }
.frames { position: relative; aspect-ratio: 16 / 9; }
.screen { border-radius: 10px; overflow: hidden; background: #f0f0f0; border: 1px solid var(--border); box-shadow: 0 24px 60px -28px rgba(20,23,22,.28); }
.frames .screen { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.frames .screen.on { opacity: 1; }
.frames .screen img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
/* the schedule zooms from the whole screen into the deck's frame: x 2.2–68.0%, y 0–61.1% */
.frames .zoomable img { height: auto; transform-origin: 0 0; transform: none; transition: transform 1.4s cubic-bezier(.3,.1,.2,1); }
.frames .zoomable.zoom img { transform: scale(1.5195) translateX(-2.229%); }

.steps { grid-column: 8 / span 5; padding-left: clamp(16px, 2.2vw, 48px); }   /* more room between the screen and the text */
.steps-inner { display: grid; align-content: start; }
.pstep { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }   /* cross-fade only: nothing moves */
.pstep.on { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.pstep .label { color: var(--text-3); margin-bottom: 16px; }   /* the part name in grey, the step title in blue (Austin, 22 Oct) */
.pstep .h3 { margin-bottom: 12px; font-weight: 500; color: var(--blue); }
.pstep .answer { font: 400 var(--fs-body)/1.5 var(--sans); color: var(--text-1); margin-bottom: 24px; }   /* body size, like the points under it (18 desktop) */
.pstep .inline-screen { display: none; }
.points details { border-top: 1px solid var(--border); }
.points details:last-child { border-bottom: 1px solid var(--border); }
.points summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; font-size: var(--fs-body); line-height: 1.5; }
.points summary::-webkit-details-marker { display: none; }
.points summary::after { content: ""; flex: none; width: 12px; height: 12px; margin-right: 2px; color: var(--text-2);
  background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
  transition: transform .2s ease; }
.points details[open] summary::after { transform: rotate(90deg); background-size: 12px 1.5px, 1.5px 0; }
.points summary:hover::after { color: var(--blue); }
.points details p { padding: 0 32px 16px 0; font-size: var(--fs-body); line-height: 1.5; color: var(--text-2); }

/* ============ 5 · RESEARCHED, THEN DESIGNED ============ */
.research { padding: var(--gap) 0; }
.res-grid { display: grid; grid-template-columns: minmax(min-content, 5fr) minmax(0, 7fr); column-gap: 48px; align-items: start; }
.ast { color: inherit; text-decoration: none; }
.ast:hover { color: var(--blue); }
.res-line { margin-top: 24px; white-space: nowrap; font: 400 var(--fs-body)/1.5 var(--sans); color: var(--text-2); }   /* always two lines: fixed break, never wraps */
.sup { font-size: .7em; vertical-align: super; line-height: 0; text-decoration: none; color: var(--blue); }
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; padding-top: 16px; }
.fig { font: 400 var(--fs-display)/1.08 var(--serif); letter-spacing: -0.01em; color: var(--blue); font-variant-numeric: lining-nums; white-space: nowrap; }   /* Marcellus for the figures too (Austin, 22 Oct) */
.fig small { font-size: .52em; vertical-align: top; position: relative; top: .08em; margin-left: .04em; letter-spacing: 0; }
.fig-c { margin: 16px auto 0; white-space: nowrap; font: 400 var(--fs-lead)/1.25 var(--sans); text-wrap: balance; }

/* ============ 6 · WHAT'S DIFFERENT ============ */
.diff { padding: 0 0 var(--gap); }
.diff .lead { margin-top: 24px; }
.tbl { margin-top: clamp(40px, 32.4px + 1.96vw, 64px); border-top: 1px solid var(--text-1); }
.tr { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, minmax(90px, 160px)); align-items: center; column-gap: 8px; min-height: 84px; border-bottom: 1px solid var(--border); }
.tr.th { min-height: 64px; }
.tr.th span { font-size: var(--fs-small); line-height: 1.3; color: var(--text-2); text-align: center; }
.tr .who .k { display: block; font-size: var(--fs-small); color: var(--text-3); margin-bottom: 4px; }
.tr .who b { font-weight: 500; font-size: var(--fs-body); }
.tr.us .who .k { color: var(--blue); }
.tr.us .who b.t { font-size: var(--fs-lead); line-height: 1; color: var(--blue); font-weight: 400; }
.tr .m { display: flex; justify-content: center; }
.dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--text-3); flex: none; }
.dot.yes { background: var(--blue); border-color: var(--blue); }
.dot.full { background: var(--text-2); border-color: var(--text-2); }
.dot.part { border-color: var(--text-2); background: linear-gradient(90deg, var(--text-2) 50%, transparent 50%); }
.dot.part.q { background: conic-gradient(var(--text-2) 0 25%, transparent 25%); }
.tbl-m, .tbl-m-names { display: none; }
.tbl-foot { display: flex; justify-content: space-between; gap: 24px; margin-top: 16px; }
.legend { display: flex; gap: 16px; font-size: var(--fs-small); color: var(--text-2); }
.legend span { display: inline-flex; gap: 8px; align-items: center; }

/* ============ 7 · CLOSE ============ */
.close { padding: 0 0 calc(var(--gap) * .5); text-align: center; overflow: hidden; }   /* the table section above already ends with the full rhythm */
.close-text .display { margin: 16px 0 max(24px, 2.4vw); }
.close-chairs { position: relative; width: min(32.4vw, 720px); margin: clamp(32px, 24.4px + 1.96vw, 56px) auto 0; }
.close-chairs img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
/* ============ 8 · RESEARCH NOTE ============ */
.foot-note { margin-top: clamp(48px, 41.5px + 1.67vw, 64px); padding-top: 24px; border-top: 1px solid rgba(255,255,255,.3); }
.foot-note .notes p + p { margin-top: 6px; }   /* one line per source: 1, then 2 */
.foot-note .small { color: rgba(255,255,255,.8); }
.foot-note .small a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* ============ FOOTER ============ */
.foot { background: var(--blue); color: #fff; padding: max(48px, calc(var(--sec) * .5)) 0 32px; }   /* 80 px on desktop, 48 on phones */
.foot a { color: #fff; text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
main { flex: 1 0 auto; }   /* short pages: the footer still sits at the bottom of the screen */
.foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 32px; }
.foot .wm { color: #fff; font-size: var(--fs-title); }
.foot-brand p { margin: 12px 0 0; font-size: var(--fs-body); }
.foot .btn.inv { color: var(--blue); }
.foot .btn.inv:hover { text-decoration: none; }
.foot-k { font: 500 var(--fs-small)/1.54 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 12px; }
.foot ul li { font-size: var(--fs-body); line-height: 1.5; padding: 2px 0; }
.foot-base { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.3); font-size: var(--fs-small); color: rgba(255,255,255,.8); }

/* reveal: transform/opacity only */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .top, .frames .screen, .way a, .points summary::after, .pstep { transition: none; }
  .frames .zoomable img { transition: none; }
}

/* ============ responsive ============ */
@media (max-width: 1180px) {
  .stage { grid-column: 1 / span 7; }
  .steps { grid-column: 8 / span 5; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 1299px) {   /* below the full narrow container the 66% line no longer fits beside the figures: stack */
  .res-grid { grid-template-columns: 1fr; row-gap: 48px; }
  .res-head { text-align: center; }
}
@media (max-width: 1039px) {
  .close-chairs { width: min(64vw, 440px); }
}
@media (max-width: 899px) {
  /* the chair stands centred on the bottom edge; the centred text ends 45% down the chair, as in the artboard,
     or higher where the backrest needs it (--lift) */
  .hero { --hh: max(100svh, 600px); container-type: inline-size; --cw: min(92cqw, 60svh * .8315); }
  .hero-wm { top: 32px; }
  .hero-chair { left: calc(50% - var(--cw) / 2); width: var(--cw); }
  .hero-text { max-width: calc(100cqw - 32px); bottom: calc(var(--cw) / .8315 * .55 + var(--lift, 0px)); }
}
@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; }
  .duo-wrap { background: linear-gradient(to bottom, var(--blue) 0 30%, var(--page) 30% 100%); }
  .pscroll { min-height: 0; }
  .pin { position: static; }
  .how-head { padding-top: 0; }
  .product { padding-top: var(--gap); }
  .way { display: none; }
  .pgrid { grid-template-columns: 1fr; }
  .stage { display: none; }
  .steps { grid-column: 1 / -1; padding-left: 0; }   /* stacked: no screen beside the text, so no gap either */
  .steps-inner { display: block; }
  .pstep { opacity: 1; visibility: visible; transform: none; padding: 40px 0; }
  .pstep.rv:not(.in) { opacity: 0; transform: translateY(16px); }   /* stacked steps fade in like the rest of the page */
  .pstep .inline-screen { display: block; margin-bottom: 24px; aspect-ratio: 16 / 9; }
  .pstep .inline-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
  .tbl { display: none; }
  .tbl-m { display: table; width: 100%; margin-top: 40px; border-collapse: collapse; border-top: 1px solid var(--text-1); }
  .tbl-m th, .tbl-m td { padding: 14px 4px; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; }
  .tbl-m thead th { font: 500 var(--fs-small)/1.3 var(--sans); color: var(--text-2); }
  .tbl-m thead th.us { color: var(--blue); }
  .tbl-m tbody th { text-align: left; font: 400 var(--fs-body)/1.3 var(--sans); padding-left: 0; width: 34%; }
  .tbl-m td .dot { display: block; margin: 0 auto; }
  .tbl-m td .dot, .tbl-foot .legend .dot { width: 13px; height: 13px; }   /* smaller on the phone table, legend to match */
  .tbl-m td:nth-child(2) { background: rgba(44,47,240,.04); }
  .tbl-m-names { display: block; margin-top: 12px; }
  .tbl-foot { flex-direction: column; }
  .tbl-foot .small { text-align: left; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 479px) {
  .res-line { font-size: var(--fs-small); margin-inline: -12px; }   /* Small, so both lines fit a phone; may use 12 px of the side margins */
}
@media (max-width: 359px) {
  .res-line { white-space: normal; }
}
@media (max-width: 599px) {
  .pstep .label, .pstep .h3 { margin-bottom: 8px; }   /* label, title and text read as one group */
  .ask .lead, .band .lead { margin-top: 12px; }   /* the lead sits close under its title */
  .tbl-m-names { font-size: 11px; }   /* source line under the table: a note, below the grid like the diagram labels */
  .btn:not(.sm) { font-size: 16px; }   /* the main buttons keep their size */
  .figs { grid-template-columns: 1fr; row-gap: 40px; padding-top: 0; }
}
@media (max-width: 560px) {
  .duo-fig .pills text { font-size: 20px; }
  .duo-fig .fig-lab, .duo-fig .fig-wm { font-size: 20px; }
  .duo-fig .wm-gap { transform: scaleX(1.29); }   /* widen the break for the 20 px label: 8 units clear each side */
  .top .btn { height: 40px; padding: 0 16px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-base { flex-direction: column; }
}

/* ============ LEGAL PAGES ============ */
.top.static { position: sticky; transform: none; }
.legal { padding: clamp(64px, 50.5px + 3.46vw, 120px) 0 var(--sec); }
.legal .wrap { max-width: calc(760px + 2 * var(--mx)); }
.legal h1 { font: 500 var(--fs-display)/1.08 var(--sans); letter-spacing: -0.02em; }
.legal .upd { margin-top: 16px; }
.legal h2 { font: 400 var(--fs-title)/1.3 var(--sans); margin: 48px 0 12px; }
.legal p, .legal li { font-size: var(--fs-body); line-height: 1.5; color: var(--text-2); }
.legal p + p { margin-top: 12px; }
.legal ul { margin-top: 12px; }
.legal li { padding-left: 20px; position: relative; }
.legal li::before { content: ""; position: absolute; left: 4px; top: .8em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); }
.legal dl { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 10px 24px; margin-top: 12px; }
.legal dt { font-size: var(--fs-body); color: var(--text-3); }
.legal dd { margin: 0; font-size: var(--fs-body); color: var(--text-1); }
.legal .todo { background: #fff4cc; color: var(--text-1); padding: 0 4px; border-radius: 3px; }
.legal a { color: var(--blue); }
@media (max-width: 560px) { .legal dl { grid-template-columns: 1fr; gap: 2px; } .legal dd { margin-bottom: 10px; } }

/* ============ DEMO REQUEST ============ */
.demo { padding: clamp(64px, 50.5px + 3.46vw, 120px) 0 var(--sec); min-height: calc(100svh - var(--head)); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }   /* fills the screen, footer below the fold; short content sits in the middle */
.demo .wrap { max-width: calc(760px + 2 * var(--mx)); }
.demo h1 { font: 500 var(--fs-display)/1.08 var(--sans); letter-spacing: -0.02em; text-align: center; text-wrap: balance; }
.demo-intro { margin-top: 24px; text-align: center; color: var(--text-2); }
.demo-form { margin-top: clamp(48px, 40.4px + 1.96vw, 64px); display: grid; gap: 32px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.f-field { display: grid; gap: 8px; }
.f-k { font: 500 var(--fs-body)/1.5 var(--sans); color: var(--text-1); }
.f-note { font: 400 var(--fs-small)/1.5 var(--sans); color: var(--text-3); margin-left: 8px; }
.f-field input { height: 52px; padding: 0 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--page); color: var(--text-1); font: 400 var(--fs-body)/1.5 var(--sans); width: 100%; box-sizing: border-box; transition: border-color .18s ease; }
.f-field input:hover { border-color: var(--text-3); }
.f-field input:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(44,47,240,.15); }
.f-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.f-set legend { padding: 0; margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border: 1px solid var(--border); border-radius: 999px; font: 400 var(--fs-body)/1 var(--sans); color: var(--text-1); background: var(--page); cursor: pointer; user-select: none; transition: background .18s ease, border-color .18s ease, color .18s ease; }
.chips label:hover span { border-color: var(--text-3); }
.chips input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.chips input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.f-set[aria-invalid] .chips span, .f-field input[aria-invalid] { border-color: #d0342c; }
.f-check { display: flex; gap: 12px; align-items: flex-start; font: 400 var(--fs-small)/1.5 var(--sans); color: var(--text-2); cursor: pointer; }
.f-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blue); }
.f-check a { color: var(--blue); }
.f-check input[aria-invalid] { outline: 2px solid #d0342c; outline-offset: 2px; }
.f-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.f-error { font: 400 var(--fs-small)/1.5 var(--sans); color: #d0342c; }
.demo-form .btn { justify-self: start; border: 0; cursor: pointer; }
.demo-form .btn:disabled { opacity: .6; cursor: default; }
.demo-done { margin-top: clamp(48px, 40.4px + 1.96vw, 64px); text-align: center; outline: none; }
.demo [hidden] { display: none !important; }   /* the form's grid would otherwise override hidden */
/* "Are you a thinker?": a switch that opens the rest of the form */
.f-switch { position: relative; display: flex; align-items: center; gap: 16px; margin-top: 8px; cursor: pointer; width: fit-content; }
.f-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sw-track { flex: none; position: relative; width: 64px; height: 36px; border-radius: 999px; background: var(--border); transition: background .25s ease; }
.sw-knob { position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20,23,22,.25); transition: transform .25s cubic-bezier(.3,.1,.2,1); }
.sw-q, .sw-yes { font: 400 var(--fs-lead)/1.25 var(--sans); }
.sw-yes { display: none; color: var(--blue); }
.f-switch input:checked ~ .sw-track { background: var(--blue); }
.f-switch input:checked ~ .sw-track .sw-knob { transform: translateX(28px); }
.f-switch input:checked ~ .sw-q { display: none; }
.f-switch input:checked ~ .sw-yes { display: inline; }
.f-switch input:focus-visible ~ .sw-track { outline: 2px solid var(--blue); outline-offset: 3px; }
.f-more { display: grid; gap: 32px; }
.demo-form.gated:not(.open) .f-more { display: none; }   /* only when JS runs; without it everything shows */
.demo-form.open .f-more { animation: f-rise .5s ease both; }
@keyframes f-rise { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .demo-form.open .f-more { animation: none; } .sw-knob, .sw-track { transition: none; } }
@media (max-width: 599px) {
  .demo { padding-top: 40px; }   /* so the switch shows on the first screen of a phone */
  .f-row { grid-template-columns: 1fr; gap: 32px; }
  .f-field input { font-size: 16px; }   /* under 16 px iPhones zoom the page when a field is tapped */
  .demo-form .btn { justify-self: stretch; }
}
.nowrap { white-space: nowrap; }

/* ============ 404 ============ */
.nf { min-height: calc(100svh - var(--head)); display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--sec) 0; box-sizing: border-box; }
.nf-code { font: 400 clamp(120px, 80px + 10vw, 220px)/1 var(--serif); color: var(--blue); letter-spacing: -0.01em; }   /* Marcellus, like the figures */
.nf-title { margin: 24px 0 40px; font: 500 var(--fs-title)/1.3 var(--sans); }

/* ============ LANGUAGE SWITCH (footer only) ============ */
.foot-lang { color: rgba(255,255,255,.8); }