/* Speakingboard preview: the page's own layout and sections, shared by the one-pager and the four market pages (Leonardo, 2026-10-02; site v3,
   copy-v3.md, phase 2). Esbi's page styles are esbi.css's own part, the demos' demos.css (site v3 phase 1). */
@font-face { font-family: "Mona Sans"; src: url(fonts/mona-sans-latin.woff2) format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(fonts/instrument-sans.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
:root {
  --ground: #0f1113; --raised: #15181b; --raised2: #1b1f23; --line: #2a2f34; --ink: #e8e6e1; --quiet: #9aa1a9; --dim: #6c737b;
  --amber: #f0a93a; --amber2: #e0a33a; --coral: #ff8757; --cream: #ffe9bf;
  --pad: clamp(20px, 4.2vw, 64px); --max: 1280px; --ease: cubic-bezier(.2, 0, 0, 1); --nav: 72px;
}
* { box-sizing: border-box; }
html { background: var(--ground); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav) + 12px); scroll-behavior: smooth; }
body { margin: 0; font: 400 18px/1.6 "Instrument Sans", system-ui, sans-serif; overflow-x: clip; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
h1, h2, h3, h4 { font-family: "Mona Sans", system-ui, sans-serif; font-stretch: 84%; margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }
.skip { position: absolute; left: 16px; top: -999px; z-index: 60; background: var(--ink); color: var(--ground); padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- nav: translucent from the first frame. The one-pager's (.links) has no Start Speaking: Esbi's orb
   takes its place on a desktop and an iPad (copy-v3 Nav, Mark 2:53 pm), and on a phone a hamburger opens the links (4:06 pm). A market
   page's nav keeps its Start Speaking, the link that carries the ad's tags to the app ---- */
/* a rule under it at all times, at every size, from the first frame (Mark, 6:29 pm: "Nav should have a rule or outline below it at all times") */
.nav { position: sticky; top: 0; z-index: 30; background: rgba(15,17,19,.84); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 24px; height: var(--nav); }
.nav .logo { display: flex; min-height: 44px; align-items: center; margin-right: auto; }
.nav .logo img { height: 32px; width: auto; }
.nav nav { display: flex; gap: 6px; align-items: center; font-size: 15.5px; color: var(--quiet); }
.nav nav a:not(.btn) { text-decoration: none; padding: 12px 11px; } .nav nav a:not(.btn):hover { color: var(--ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; font: 600 16.5px "Instrument Sans", sans-serif; text-decoration: none; border: 1px solid var(--line); color: var(--ink); background: transparent; cursor: pointer; white-space: nowrap; }
.btn.go { background: var(--amber2); border-color: var(--amber2); color: #1a1408; box-shadow: 0 10px 40px -10px rgba(240,169,58,.5); }
.btn.go:hover { filter: brightness(1.06); }
.nav .btn { min-height: 44px; margin-left: 10px; }
.btn .mic { width: 17px; height: 17px; flex: none; }
.nav .burger { display: none; }
@media (max-width: 860px) { .nav nav:not(.links) a:not(.btn) { display: none; } }
@media (max-width: 759px) {
  .nav .burger { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--ink); cursor: pointer; }
  .nav .burger i { grid-area: 1 / 1; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .26s var(--ease), opacity .18s; }
  .nav .burger i:nth-child(1) { transform: translateY(-7px); } .nav .burger i:nth-child(3) { transform: translateY(7px); }
  .nav[data-menu="open"] .burger i:nth-child(1) { transform: rotate(45deg); }
  .nav[data-menu="open"] .burger i:nth-child(2) { opacity: 0; }
  .nav[data-menu="open"] .burger i:nth-child(3) { transform: rotate(-45deg); }
  /* the menu drops from the nav; the rest of the page dims under it, and a tap there closes it (site.js) */
  .nav .links { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px var(--pad) 20px; background: var(--ground); border-bottom: 1px solid var(--line); }
  .nav[data-menu="open"] .links { display: flex; }
  .nav .links a:not(.btn) { display: flex; align-items: center; min-height: 58px; padding: 0; color: var(--ink); font: 650 24px/1.1 "Mona Sans", system-ui, sans-serif;
    font-stretch: 86%; letter-spacing: -.02em; border-top: 1px solid var(--line); }
  .nav .links a:first-child { border-top: 0; }
  .nav[data-menu="open"] .veil { display: block; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; z-index: -1; background: rgba(6,7,8,.55); cursor: pointer; }
}
.nav .veil { display: none; }

/* ---- ESBI'S FOUR PLACES (site v3 phase 2): the interface esbi.js builds against. Empty boxes this page lays out; esbi.js reads them with
   getBoundingClientRect and flies her there. Each is the box her orb takes at that place, except the belt's, which is the band she floats
   in while she inspects the line (hero.js lays it out). Three since Mark's 6:29 pm ("lets add the orb mechanics to desktop size also. So no
   button just like mobile and orb flying around lie on the iPhone"): no nav spot, and the belt's at every width. The meet spot is her big
   front orb (esbi.css --orb-front, 120 px, 180 on an iPad: Leo C), so she shrinks on the way down to her dock, not after. ---- */
[data-esbi-spot] { display: block; pointer-events: none; }

.slot [data-esbi-spot="meet"] { position: absolute; left: 50%; top: 55%; width: calc(var(--orb-front) * .8); height: calc(var(--orb-front) * .8); margin: calc(var(--orb-front) * -.4) 0 0 calc(var(--orb-front) * -.4); }
/* the close's: where Start Speaking was, with the room above it that her bubble pops into ("Feeeeel the magic") */
.close [data-esbi-spot="close"] { width: 56px; height: 56px; margin: 112px auto 0; }


/* ---- hero: the UNSPEAKABLES line. The whole first screen on every screen (Mark, 2026-10-02 5:43 pm: "Let's move the section below conveyer
   belt below the fold to give header more breathing room"): the copy at the top, the line at the foot, the callouts under the fold. hero.js
   sizes the line to fit and puts what room is left above the copy (--hero-air) ---- */
.hero { position: relative; display: flex; flex-direction: column; min-height: calc(100vh - var(--nav) - 1px); min-height: calc(100svh - var(--nav) - 1px);   /* the nav is 72 + its 1 px rule */
  padding-top: calc(clamp(24px, 3vw, 44px) + var(--hero-air, 0px)); }
.hero-copy { position: relative; z-index: 3; width: 100%; }
.hero h1 { font-size: clamp(44px, 5.2vw, 84px); font-weight: 740; line-height: .95; letter-spacing: -.04em; max-width: 16ch; margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: #f0a93a; }   /* Ember, the Start Speaking orange (Mark, 3:08 pm: "ends here. add color to this on header") */
/* an iPad held upright: the headline and body sized off the screen's height as well as its width, so the copy holds its own on a tall screen
   and the first screen's room goes to the line and air, not to a phone-sized headline */
@media (pointer: coarse) and (min-width: 760px) and (orientation: portrait) {
  .hero h1 { font-size: clamp(44px, max(5.2vw, min(7.8vw, 5.6svh)), 84px); }
  .hero .sub { font-size: clamp(18px, max(1.45vw, min(2.4vw, 1.75svh)), 21.5px); }
}
.hero .sub { position: relative; z-index: 2; font-size: clamp(18px, 1.45vw, 21.5px); line-height: 1.45; color: var(--quiet); max-width: 37ch; margin: 0; }
.hero .sub strong { font-weight: 600; color: var(--ink); }   /* "Just speak." heavier (Mark, 10:29 pm: "Bold or medium speak under headline"), in the headline's own colour, no tint (Mark via Gemini's spec, 2026-10-04 1:08 pm) */
.line { position: relative; z-index: 1; height: var(--stage-h, 400px); margin-top: auto; overflow-x: clip; overflow-y: visible; contain: layout; }   /* its sides clip what waits off the edge; the boards stand up out of its top, behind the copy (the copy's z-index is 3) */
.line > * { position: absolute; }
/* THE UNSPEAKABLES SIGN, BOLTED TO THE DUMPSTER'S SIDE (Mark, 2026-10-02 10:29 pm: "Move unspeakable sign. Put it on the side of trashcan.
   Keep it on there also for the other section with it."): the plank (img/plank.webp, its chains cut off) on the bin's face, a slight tilt,
   seated by a thin contact shadow. The hero's is placed by hero.js; the graveyard's by percentages of its drawing (below) */
.sign { position: absolute; display: block; pointer-events: none; transform: rotate(-1.8deg); transform-origin: 50% 50%; }
.sign img { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 1.5px rgba(8,9,10,.55)); }
/* ONE CONVEYOR (Mark, 2026-10-02 11:31 am): hub-to-hub tiles of the one drawing (art/junction.py), laid from the bin leftward until one runs
   off the screen at any width. Every join is a single drum with a leg on each side, the belt and rail straight across it */
.seg { background-image: url(img/conveyor-line.webp); background-repeat: no-repeat; z-index: 1; }
.seg .idler { position: absolute; border-radius: 50%; background-image: url(img/conveyor-line.webp); background-repeat: no-repeat; animation: spin var(--idler-t, 1.3s) linear infinite; }
.seg .run { position: absolute; overflow: hidden; }
.seg .run i { position: absolute; inset: 0 auto 0 0; width: calc(100% + 40px); background: repeating-linear-gradient(90deg, rgba(24,26,29,.55) 0 2px, transparent 2px 20px); animation: belt var(--tick-t, .22s) linear infinite; }
.seg .run.back i { animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes belt { from { transform: translateX(-20px); } to { transform: translateX(0); } }
.bin { z-index: 2; }
.bin img { width: 100%; height: auto; }
.bin.jolt { animation: jolt .32s var(--ease); }   /* the whole bin, so the sign bolted to it jolts with it */
@keyframes jolt { 30% { transform: translateY(2px) rotate(.5deg); } 65% { transform: translateY(-1px) rotate(-.25deg); } }
.lane { left: 0; top: 0; width: 100%; z-index: 3; overflow: hidden; }
.lane img { position: absolute; left: 0; top: 0; transform-origin: 50% 100%; will-change: transform; }
.floor { left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(232,230,225,.12) 12%, rgba(232,230,225,.12) 88%, transparent); z-index: 0; }
/* THE PHONE HERO (Mark, 2026-10-02 11:31 am, his iPhone: the conveyor sat under Safari's bottom bar): the hero is the SMALL viewport (100svh:
   the browser's bars shown), the conveyor at its foot, Esbi's band above it, a breath under the copy (hero.js). One body line on every
   screen (5:42 pm) */
@media (max-width: 759px) {
  .hero { padding-top: calc(14px + var(--hero-air, 0px)); padding-bottom: env(safe-area-inset-bottom); }   /* --hero-air: hero.js balances the copy in a tall phone's spare room (Mark, 8:26 pm) */
  .hero h1 { margin-bottom: 14px; }
  .hero .sub { margin-bottom: 0; text-wrap: balance; }
}

/* ---- the three callouts (copy-v3 pillars). Mark, 4:15 pm: "give the 3 callouts the entire above the fold height of iphone ... rules to
   seperate, just space allowed by height"; 6:33 pm: "the same should apply to desktop with the images next to copy. on mobile and desktop,
   lock the mic pen and paper airplane with the copy. Right justify for the mic, left for the pen, right for the paper airplane." At every
   size: one screen under the nav, a third each, no rules; each icon locked to its copy as one unit with a fixed gap, the copy justified
   toward its icon and the unit on that side (mic right, pen left, plane right); the copy never the full width ---- */
.proof { position: relative; z-index: 3; background: var(--ground); padding-top: clamp(64px, 7vw, 112px); padding-bottom: clamp(24px, 4vw, 64px); }   /* after Meet Esbi since 2026-10-04 3:04 pm */   /* room under the belt first (Mark, 7:24 pm: "Add more space below conveyer belt"); the three keep their full thirds, so the section grows past one screen rather than squeeze them */
.proof ul { list-style: none; margin: 0; padding: 0; }
.proof li { display: flex; align-items: center; justify-content: flex-end; gap: clamp(18px, 2.4vw, 36px); padding: 14px 0;
  min-height: calc((100vh - var(--nav) - 1px) / 3); min-height: calc((100svh - var(--nav) - 1px) / 3); }   /* the nav is 72 + its 1 px rule */
.proof li:nth-child(2) { justify-content: flex-start; }
.proof li:nth-child(2) .ico { order: -1; }
.proof p { flex: 0 1 auto; max-width: min(64%, 660px); margin: 0; text-align: right; color: var(--quiet); font-size: clamp(16.5px, 1.35vw, 20px); line-height: 1.45; }
.proof li:nth-child(2) p { text-align: left; }
/* the titles alone, larger (Mark, 2026-10-04 4:48 pm: "Section after meet esbi: remove body copy below titles. Increase size if needed for aesthetics") */
.proof b { display: block; margin: 0; color: var(--ink); font: 700 clamp(26px, 3vw, 46px)/1.1 "Mona Sans", system-ui, sans-serif; font-stretch: 88%; letter-spacing: -.015em; text-wrap: balance; }
@media (min-width: 760px) and (max-width: 1199px) { .proof b { font-size: 36px; } }   /* a tablet: the 3vw floor read small in all that room (26 px at 834) */
.proof .ico { display: block; flex: none; height: auto; }
.proof .ico.mic { width: auto; height: clamp(90px, 15svh, 170px); }
.proof .ico.untangle { width: clamp(130px, 17vw, 250px); }
.proof .ico.plane { width: clamp(112px, 14vw, 210px); }
/* the callouts on a phone (Mark, 6:55 pm: "reduce elements below the conveyer belt so each will have more space and feel more airy"; 6:56 pm:
   "Also give move space below the convert belt"): room under the belt first, then the three units a step smaller, still one screen together */
@media (max-width: 759px) {
  .proof { padding-top: 84px; }   /* the first line about 150 px under the belt at 390 (Mark, 7:24 pm) */
  .proof li { gap: 16px; padding: 10px 0; }
  .proof p { max-width: 68%; font-size: 16px; }
  .proof b { margin: 0; font-size: 22px; }
  .proof .ico.mic { height: clamp(66px, 10svh, 88px); }
  .proof .ico.untangle { width: 28vw; }
  .proof .ico.plane { width: 25vw; }
}

/* ---- meet Esbi: the section; her stage, orb and bubble are esbi.css's ---- */
.meet { text-align: center; padding: 24px 0; }
/* THE WHOLE FIRST SCREEN, like the hero (Mark, 2026-10-04 3:04 pm: "give meet esbi the same breathing room. it should occupy the entire above the
   fold for all screens (headline + orb) empty space above and below"): a screen tall under the nav, its headline, line and orb centred in it */
.meet { min-height: calc(100svh - var(--nav)); display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; scroll-margin-top: var(--nav); }
/* ...EVEN above and below: her stage keeps about 88 px under the orb (it's laid out for her bubble above it), so it's counted out of the centring
   (measured, headline-top to orb-bottom: 146 / 232 px at 1496, 26 / 115 on an iPad, 24 / 116 on an iPhone before) */
.meet .slot { margin-bottom: -116px; }   /* her spot raised to 55% (Mark, 2026-10-04 5:16 pm: "Move esbi's spot up a bit"; was 62%): the room under her counted out again */
/* ROOM BEFORE IT (Mark, 2026-10-04 5:08 pm: "Put more space below hero to give meet esbi more space and prominence"): the hero ends, a breath, then
   her screen (measured hero-end to headline: 190 px at 1496, 269 on an iPad, 65 on an iPhone before) */
.meet { margin-top: clamp(80px, 9vw, 150px); }
.meet h2 { font-size: clamp(68px, 11.5vw, 184px); font-weight: 780; letter-spacing: -.05em; line-height: .9; }
.meet .sub { font-size: clamp(19px, 1.6vw, 23px); color: var(--quiet); margin: 22px auto 0; max-width: 46ch; text-wrap: balance; }   /* two even lines on a phone (Mark, 6:35 pm: "reduce text container width so text is more balanced") */
/* an iPad: room above her (Mark: "space above the orb") */
@media (pointer: coarse) and (min-width: 760px) { .meet .slot { margin-top: 64px; } }

/* ---- the sections after Meet Esbi share one rhythm: a big headline, a quiet sub, then what it's about ---- */
.core, .listen, .team, .agents, .solo { padding: clamp(110px, 13vw, 190px) 0 clamp(40px, 6vw, 80px); }
:is(.team, .agents, .solo) h2 { font-size: clamp(40px, 4.8vw, 72px); font-weight: 730; letter-spacing: -.04em; line-height: .98; max-width: 16ch; }
:is(.part, .listen, .agents, .solo) .sub { color: var(--quiet); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; margin: 22px 0 0; max-width: 44ch; }
/* the class of Mark's 6:35 pm note ("reduce text container width so text is more balanced"): every section's sub breaks into even lines,
   never a long line and a stub (measured at 390: "Esbi has hands." 316/169 px, the graveyard and Who it's for ended on a word or two) */
:is(.part, .listen, .agents, .grave) .sub, .who .lede, .mind .lead { text-wrap: balance; }

/* THE CORE (Mark's headline: "Just say it. Esbi makes it. And never forgets."): one line for each part under it */
.core-h { font-size: clamp(46px, 6.6vw, 108px); font-weight: 760; letter-spacing: -.045em; line-height: .93; }
.core-h span { display: block; }
.part { padding-top: clamp(76px, 9vw, 136px); }
.part-head { max-width: 780px; }
.part h3 { font-size: clamp(34px, 3.8vw, 58px); font-weight: 720; letter-spacing: -.035em; line-height: 1; }
/* "Ask her to make" (Mark, 2026-10-02 5:54 pm: "Ask her to make options should be stacked so that there's five above five below"): ten equal
   chips in two rows of five, in the spec's order, one grid, so both rows share their columns and their centre; never a ragged wrap. Where
   five can't sit in a row (a phone), two columns of five, reading down. The chips' own box decides, not the screen */
.chips { margin-top: 30px; container-type: inline-size; }
.chips p { margin: 0 0 12px; color: var(--quiet); font-size: 16px; }
.chips ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 380px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; }
@container (min-width: 560px) { .chips ul { max-width: 600px; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row; } }
.chips li { padding: 6px 8px 7px; border-radius: 8px; background: var(--raised2); color: var(--ink); font-size: 15px; line-height: 1.25; text-align: center; white-space: nowrap; }
/* demos: at most two side by side (Mark), and under each only its title, since its speaker already says what's happening (Mark) */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.2vw, 28px); padding: clamp(36px, 4.4vw, 60px) 0 0; }
.card { background: var(--raised); border: 1px solid var(--line); border-radius: 24px; padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 34px; }
.card :is(h3, h4) { font-size: 22px; font-weight: 680; letter-spacing: -.015em; line-height: 1.2; }
@media (max-width: 759px) { .cards { grid-template-columns: 1fr; } }
/* BUILT-IN AWARENESS AND INTELLIGENCE: no demo (Mark); the lead line, then her fourteen ---- */
.mind .lead { margin: 26px 0 0; color: var(--ink); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; max-width: 46ch; }
.mind .lead strong { font-weight: 650; }
.mind-top { display: flex; align-items: center; justify-content: space-between; gap: clamp(28px, 5vw, 96px); }
.mind-art { flex: none; width: clamp(150px, 15vw, 230px); height: auto; margin-right: clamp(0px, 4vw, 72px); opacity: .92; }
.mind-art.wide { width: clamp(190px, 21vw, 320px); }   /* a wide drawing (Listen-In's ear trumpet) takes width for the owl's height */
@media (max-width: 759px) { .mind-top { align-items: flex-start; gap: 14px; } .mind-art { width: 92px; margin: 4px 0 0; } .mind-art.wide { width: 118px; } }
/* her fourteen in four groups (Mark, 6:05 pm: "Add icons in the built-in awareness and intelligence section. Also, I think we could have
   categories for the features here"): two groups a row on a desktop and an iPad, stacked on a phone, the icon left of every item. The icons
   are one line family on a 24-unit grid, in the drawings' own warm ink (art/key.py's light, a step under the headline) */
.traits { margin: clamp(44px, 5vw, 68px) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(44px, 4.6vw, 64px) clamp(32px, 5vw, 84px); }
.tgroup h4 { padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 21px; font-weight: 700; letter-spacing: -.012em; line-height: 1.2; }
.tgroup ul { list-style: none; margin: 0; padding: 0; }
.tgroup li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 18px; align-items: start; padding-top: 20px; }
.tgroup p { margin: 0; color: var(--quiet); font-size: 17px; line-height: 1.5; }
.tgroup strong { color: var(--ink); font-weight: 600; }
.ti { width: 30px; height: 30px; margin-top: -2px; color: #dcd7cc; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 759px) { .traits { grid-template-columns: 1fr; } .tgroup li { gap: 16px; } }

/* LISTEN-IN (its own section, prominent; Mark: "a selling point"): the feature's name at the scale of "Meet Esbi.", and Esbi going quiet
   set quieter. Its full-width demo comes in phase 3 */
/* Mark, 6:10 pm: "Listen-In mode headline is too big": one size class down, the core headline's tier (98.7 px at 1496, 46 at 390) */
.listen h2 { font-size: clamp(42px, 5.2vw, 84px);   /* reduced (Mark, 2026-10-04 2:25 pm: "reduce listen in mode hadline"; was clamp(46px, 6.6vw, 108px): 99 px at 1496, now 78) */
   font-weight: 780; letter-spacing: -.045em; line-height: .93; }
.listen h2 > span:not(.nw) { display: block; margin-top: .22em; font-size: max(.42em, 21px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; color: var(--quiet); }
.listen .sub { margin-top: 30px; font-size: clamp(19px, 1.6vw, 23px); max-width: 46ch; }
/* the four uses, each with its persona (Mark, 6:18 pm): two a row and one on a phone, so the groups (a table of three, a pair in armchairs)
   are drawn at the same scale as the walker. The art stands on one line, as "Built for how you actually think."'s figures do */
.uses { list-style: none; margin: clamp(52px, 5.6vw, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 5vw, 72px) clamp(32px, 5vw, 84px); }
.uses li { display: flex; flex-direction: column; color: var(--quiet); font-size: 17px; line-height: 1.5; }
.uses .art { height: clamp(170px, 15vw, 220px); display: flex; align-items: flex-end; margin-bottom: 24px; }
.uses .art img { max-height: 100%; width: auto; max-width: 100%; }
.uses b { display: block; margin-bottom: 8px; color: var(--ink); font: 680 22px/1.2 "Mona Sans", system-ui, sans-serif; font-stretch: 86%; letter-spacing: -.015em; }
.uses strong, .gets strong { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) { .uses { grid-template-columns: 1fr; row-gap: 52px; } .uses .art { height: 180px; } }

/* AI AGENTS (new): the headline left, what they do right */
.agents-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.agents h2 { max-width: 12ch; }
.models { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(26px, 3vw, 44px); margin: 30px 0 0; padding: 0; color: var(--quiet);
  font: 600 clamp(17px, 1.4vw, 20px)/1 "Mona Sans", system-ui, sans-serif; font-stretch: 94%; }
.models li { display: inline-flex; align-items: center; gap: 10px; }
.models svg { width: clamp(22px, 1.9vw, 28px); height: auto; flex: none; }
.gets { list-style: none; margin: 0; padding: 0; }
.gets li { padding: 20px 0 22px; border-top: 1px solid var(--line); color: var(--quiet); font-size: 17.5px; line-height: 1.5; }
.gets li:last-child { border-bottom: 1px solid var(--line); }
.gets b { display: block; margin-bottom: 6px; color: var(--ink); font: 680 21px/1.2 "Mona Sans", system-ui, sans-serif; font-stretch: 86%; letter-spacing: -.015em; }
@media (max-width: 900px) { .agents-in { grid-template-columns: 1fr; } }

/* ---- designed to stay out of your way (Mark, 2026-10-04): the principles, three a row, two on an upright iPad, one on a phone; the awareness
   section's icon-left items ---- */
.flow { padding: clamp(110px, 13vw, 190px) 0 clamp(40px, 6vw, 80px); }
.flow h2 { font-size: clamp(40px, 4.8vw, 72px); font-weight: 730; letter-spacing: -.04em; line-height: .98; max-width: 16ch; }
.flow .sub { color: var(--quiet); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; margin: 22px 0 0; max-width: 52ch; text-wrap: balance; }
.ways { list-style: none; margin: clamp(44px, 5vw, 68px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(28px, 4vw, 64px); }
.ways li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 18px; align-items: start; padding-top: 20px; border-top: 1px solid var(--line); }
.ways p { margin: 0; color: var(--quiet); font-size: 17px; line-height: 1.5; }
.ways strong { color: var(--ink); font-weight: 600; }
@media (max-width: 1000px) { .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ways { grid-template-columns: 1fr; } .ways li { gap: 16px; } }
.flow.learns { padding-top: clamp(60px, 7vw, 110px); }

/* ---- the ideas graveyard ---- */
.grave { padding: clamp(110px, 13vw, 190px) 0 clamp(40px, 6vw, 80px); }
.grave-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.grave-head { position: sticky; top: calc(var(--nav) + 40px); }
.grave h2 { font-size: clamp(40px, 4.8vw, 72px); font-weight: 730; letter-spacing: -.04em; line-height: .98; }
.grave .sub { color: var(--quiet); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; margin: 22px 0 0; max-width: 34ch; }
.grave-head .bin-art { position: relative; width: min(250px, 62%); margin-top: clamp(28px, 4vw, 56px); opacity: .9; }
.grave-head .bin-art > img { width: 100%; height: auto; }   /* height: auto, or its 485 height attribute stretches it tall */
/* its sign, as on the hero's: centred on the face between the brackets, as wide as the face allows less a tenth each side (art.js BIN.face: 82 to 558 of 640, 96 to 362
   of 485), in percentages of the drawing, so it holds at any size the drawing is shown */
.grave-head .bin-art .sign { width: 59.5%; left: 20.2%; top: 36.5%; }
.plots { list-style: none; margin: 0; padding: 0; }
/* the graveyard's drawings take more of the width (Mark, 6:48 pm: "Increase images to occupy more width real estage"), every row the same
   box, and Speakingboard is its icon (6:48 pm: "Use icon for speakingboard logo"; the kit's 01c-icon, not the wordmark) */
.plots li { display: grid; grid-template-columns: clamp(132px, 17vw, 240px) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 40px); align-items: center; padding: 26px 0; border-top: 1px solid var(--line); }
.plots li:last-child { border-bottom: 1px solid var(--line); }
/* explicit heights: a grid item's percentage max-height has no definite row to resolve against, and drew the drawings at full size */
.plots .art { --art-h: clamp(120px, 12vw, 184px); height: var(--art-h); display: grid; place-items: center; }
.plots .art img { max-height: var(--art-h); width: auto; max-width: 100%; transform: rotate(var(--tilt, -4deg)); opacity: .86; }
.plots h3 { font-size: 22px; font-weight: 680; letter-spacing: -.015em; line-height: 1.2; margin-bottom: 4px; }
.plots p { margin: 0; color: var(--quiet); font-size: 17px; line-height: 1.5; }
.plots li.sb { padding: 30px 0; }
.plots li.sb .art img { width: min(64%, calc(var(--art-h) * .68)); height: auto; transform: none; opacity: 1; }   /* the mark without its tile (Mark, 2026-10-04 2:38 pm: "remove bg on logo"): the box and the orb, sized by width, air round it; about half the size it was (2:56 pm: "logo way too big") */
.plots li.sb h3 { font-size: 24px; }
.plots li.sb p { color: var(--ink); }
.plots li.sb p + p { color: var(--quiet); margin-top: 6px; }
@media (max-width: 900px) { .grave-in { grid-template-columns: 1fr; } .grave-head { position: static; } .grave-head .bin-art { display: none; }
  .plots li { grid-template-columns: clamp(132px, 30%, 240px) minmax(0, 1fr); } .plots .art { --art-h: clamp(120px, 18vw, 170px); } }
/* TWO COLUMNS ON A PHONE (Mark, 2026-10-05 3:42 pm: "Idea graveyard: put talking points into 2 columns on iPhone"): each old way its drawing over its
   words, two to a row, Speakingboard the sixth: three even rows, a rule over each row */
@media (max-width: 520px) {
  .plots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; border-bottom: 1px solid var(--line); }
  .plots li, .plots li.sb { display: block; padding: 22px 0 24px; border-top: 1px solid var(--line); }
  .plots li:last-child { border-bottom: 0; }
  .plots .art { --art-h: 104px; justify-items: start; margin-bottom: 14px; }
  .plots li.sb .art { justify-items: start; }
  .plots li.sb .art img { width: 62px; }
  .plots h3, .plots li.sb h3 { font-size: 17.5px; line-height: 1.2; margin-bottom: 5px; text-wrap: balance; }
  .plots p { font-size: 14.5px; line-height: 1.45; text-wrap: pretty; }
}

/* ---- built for how you actually think: four figures (restored 2026-10-02; 039e8450^'s rules, the section's own selectors renamed from .who) ---- */
.thinkers { padding: clamp(90px, 11vw, 160px) 0 clamp(40px, 6vw, 80px); }
.thinkers h2 { font-size: clamp(40px, 4.8vw, 72px); font-weight: 730; letter-spacing: -.04em; line-height: .98; max-width: 14ch; }
.who-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); margin-top: clamp(40px, 5vw, 72px); }
.who-grid article { display: flex; flex-direction: column; }
.who-grid .art { height: clamp(170px, 15vw, 230px); display: flex; align-items: flex-end; margin-bottom: 26px; }
.who-grid .art img { max-height: 100%; width: auto; max-width: 100%; }
.who-grid h3 { font-size: 22px; font-weight: 680; letter-spacing: -.015em; line-height: 1.18; margin-bottom: 10px; }
.who-grid p { margin: 0; color: var(--quiet); font-size: 17px; line-height: 1.5; }
@media (max-width: 1000px) { .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; } }
@media (max-width: 520px) { .who-grid { grid-template-columns: 1fr; } .who-grid .art { height: 190px; } }

/* ---- who it's for: people who call the shots (Mark, 2026-10-02 11:11 am: the four markets; copy markets-copy.md). Each card plays its own
   market's demo while it's on screen, the market's speaker at its corner, and opens that market's page ---- */
.who { padding: clamp(90px, 11vw, 160px) 0 clamp(40px, 6vw, 80px); }
.who h2 { font-size: clamp(40px, 4.8vw, 72px); font-weight: 730; letter-spacing: -.04em; line-height: .98; max-width: 16ch; }
.who .lede { color: var(--quiet); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; margin: 22px 0 0; max-width: 44ch; }
.markets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 2.8vw, 44px); margin-top: clamp(44px, 5vw, 72px); }
.mcard { background: var(--raised); border: 1px solid var(--line); border-radius: 24px; padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 34px; scroll-margin-top: calc(var(--nav) + 20px); }
.mcard h3 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.12; margin-bottom: 8px; }
.mcard p { margin: 0; color: var(--quiet); font-size: 17px; line-height: 1.5; max-width: 46ch; }
.more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; color: var(--ink); font-weight: 600; text-decoration: none; }
.more::after { content: "\2192"; transition: transform .2s var(--ease); }
.more:hover::after { transform: translateX(3px); }
@media (max-width: 900px) { .markets { grid-template-columns: 1fr; } }

/* ---- a market page (site/<market>/, built by markets.py from markets-copy.md): copy left, its demo right, the other three below ---- */
.nav nav a[aria-current="page"] { color: var(--ink); }
.mhero { padding: clamp(36px, 5vw, 76px) 0 clamp(70px, 8vw, 120px); }
.mhero > .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 5vw, 84px); align-items: center; }
.mhero h1 { font-size: clamp(42px, 4.9vw, 78px); font-weight: 740; line-height: .96; letter-spacing: -.04em; max-width: 13ch; margin-bottom: 20px; }
.mhero .sub { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.45; color: var(--quiet); max-width: 38ch; margin: 0 0 26px; }
.gains { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 12px; max-width: 40ch; }
.gains li { position: relative; padding-left: 30px; font-size: 18px; line-height: 1.45; }
.gains li::before { content: ""; position: absolute; left: 3px; top: .34em; width: 12px; height: 6px; border: solid var(--quiet); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.mdemo { margin: 0; }
.mdemo figcaption { margin-top: 36px; padding-left: 74px; color: var(--dim); font-size: 15.5px; line-height: 1.45; }
.also { border-top: 1px solid var(--line); padding: clamp(70px, 8vw, 120px) 0 clamp(70px, 8vw, 110px); }
.also h2 { font-size: clamp(34px, 3.8vw, 56px); font-weight: 720; letter-spacing: -.035em; line-height: 1; max-width: 18ch; }
.also-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(32px, 4vw, 52px); }
.acard { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 4px 18px; align-items: end; text-decoration: none; background: var(--raised);
  border: 1px solid var(--line); border-radius: 20px; padding: 22px 22px 0 12px; overflow: hidden; }
.acard img { width: 78px; height: auto; align-self: end; filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); }
.acard h3 { font-size: 20px; font-weight: 690; letter-spacing: -.015em; line-height: 1.15; margin: 0 0 6px; }
.acard p { margin: 0 0 22px; color: var(--quiet); font-size: 16px; line-height: 1.45; }
.acard:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.home-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 28px; color: var(--ink); font-weight: 600; text-underline-offset: 4px; }
@media (max-width: 980px) { .mhero > .wrap { grid-template-columns: 1fr; } .also-grid { grid-template-columns: 1fr; } }
@media (max-width: 759px) { .mdemo figcaption { padding-left: 0; margin-top: 30px; } }

/* ---- close (the page ends here; Mark, 3:24 pm) ---- */
.close { text-align: center; padding: clamp(110px, 13vw, 190px) 0 clamp(110px, 13vw, 190px); }
.close h2 { font-size: clamp(42px, 6vw, 92px); font-weight: 740; letter-spacing: -.04em; line-height: .98; max-width: 24ch; margin: 0 auto; }   /* room for each sentence to hold its line (Mark, 2026-10-04 4:43 pm: "Try not to break apart a thought"; was 15ch: "Don't waste your / breath. Say it to / Speakingboard.") */

/* ---- footer (Mark, 3:25 pm: "remove email on footer. put engineered flushed ot the right. use vertical rule to the left of it for privacy
   and terms"): the logo left; Privacy · Terms, a thin rule, Engineered by Seedro Systems, flush right. Its foot clears Esbi's dock ---- */
footer { border-top: 1px solid var(--line); padding: 34px 0 calc(34px + env(safe-area-inset-bottom)); color: var(--dim); font-size: 14.5px; }   /* balanced, top and bottom (Mark, 2026-10-04 12:56 pm: "balance vertical spacing. too much on bottom"; was 30 over 96) */
footer .wrap { display: flex; flex-wrap: wrap; gap: 26px 30px; align-items: center; justify-content: space-between; }   /* CLEAR SPACE: at least the logo's own height between it and anything else, the rows a phone wraps to included (Mark via Eva, 2026-10-04 2:01 pm: "logo should always have ample space around it when placed so it's not crowded"; was 10 px at 390) */
footer img { height: 26px; width: auto; }   /* the greyed mark: ONE grey, the orb too (img/logo-greyed.svg, the generated pages' greyed mark in the quiet ink #7d848c; Mark 2026-10-04 12:51 pm: "grey out footer logo"; logo-grey.svg had kept the amber orb and the light type); the nav's stays bright */
footer .legal { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; row-gap: 2px; margin-left: auto; }   /* on the narrowest screens the credit wraps whole, never "Seedro" from "Systems" */
footer nav { display: flex; align-items: center; }
footer nav a { text-decoration: none; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } footer nav a:hover { color: var(--ink); }
footer nav span { padding: 0 4px; }
footer .by { margin-left: 16px; padding-left: 18px; border-left: 1px solid var(--line); line-height: 1.35; }
footer b { color: var(--quiet); font-weight: 600; margin-left: .3em; white-space: nowrap; }
@media (max-width: 440px) { footer { font-size: 13.5px; } footer .by { margin-left: 10px; padding-left: 12px; } footer nav span { padding: 0 2px; } }
/* too narrow for one row (under ~370 px): Privacy · Terms over the credit, both flush right, and no rule left dangling between lines */
@media (max-width: 369px) { footer .legal { flex-direction: column; align-items: flex-end; } footer .by { margin-left: 0; padding-left: 0; border-left: 0; } }   /* a deliberate gap after "Engineered by" (Mark, 7:21 pm), on top of the word space */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .seg .idler, .seg .run i, .bin.jolt { animation: none !important; }
  .nav .burger i { transition: none; }
}
.nw { white-space: nowrap; }   /* "Listen-In" never breaks at its hyphen (the flow list at 1496 read "Listen-" / "In", 2026-10-04) */
/* A THOUGHT STAYS ON ONE LINE (Mark, 2026-10-04 4:43 pm: "put first sentence on one line. Make this a rule also. Try not to break apart a thought if
   it can be placed on one line and only slight adjustment is needed to fix it. Anything that clearly needs to be on second line because of its
   lenght and would break aesthetics, then ok to go 2nd line"): a sentence wrapped in .whole moves to the next line whole; one longer than the
   line wraps inside itself, and only at the seams marked inside it (a .whole within a .whole: "No typing, / no dragging boxes." on a phone,
   never "no / dragging") */
.whole { display: inline-block; }