/* Estoa landing — round 5 (round 4 + contrast, vibrancy, motion, plainer words; notes at the end).
   Round 4:
   The owner on rounds 1-3 (plum, hot pink, a tiled board, many Stoa photographs): "the design is awful ...
   too many pictures of greeks ... the colors and layout so microsoft and AI slop like." Rebuilt on the
   direction "The quiet instrument" (tasteskill seed 1560532173): white paper, black ink, one centred
   column, small exact demonstrations of the product, a lot of decided space.

   Colour rule (from the home Inbox's design note): colour carries status and nothing else. Here the one
   colour is a highlighter yellow, and it marks only what needs you. The home build's own colours (cream
   with terracotta) were not reused: on a public page that pair now reads as "AI assistant". */

@font-face { font-family: "League Spartan"; src: url("fonts/league-spartan-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --bg: #ffffff;
  --surface: #f4f3f0;
  --surface-2: #e9e7e2;
  --ink: #0a0a0a;
  --muted: #474747;          /* 9.5:1 on white */
  --hl: #ffd400;             /* the highlighter: needs you, the waitlist chapter, the ticker */
  --black: #0b0b0b;
  --on-black-soft: #c4c4c4;  /* 11:1 on --black */
  --m: 40px;
  --col: 680px;
  --r: 14px;                 /* the product's own corner (fragments); the page itself has none */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --frame: max(var(--m), calc((100vw - 1120px) / 2));   /* hero, plate and about share these side margins */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: "Figtree", system-ui, sans-serif; font-size: 18px; line-height: 1.55; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; }
ul { list-style: none; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--hl); color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--m); top: -80px; z-index: 10; background: var(--ink); color: #fff; padding: 12px 18px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 16px; }
.soft { color: var(--muted); }

h1, h2, .mark { font-family: "League Spartan", "Figtree", sans-serif; font-weight: 700; letter-spacing: -0.04em; text-wrap: balance; }
h1 { font-size: clamp(3rem, .5rem + 5vw, 5.75rem); line-height: .88; }
h2 { font-size: clamp(2.4rem, 1.4rem + 3vw, 4.25rem); line-height: .95; margin-bottom: 28px; }
h3 { font-size: 18px; font-weight: 600; margin-bottom: 14px; }
mark { background: var(--hl); color: var(--ink); padding: 0 .25em; }

/* buttons: one shape, fully round; black, never coloured */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; text-decoration: none; border: 0; cursor: pointer; transition: transform .18s var(--ease), background-color .18s; }
.btn:hover { background: #333; }
.btn:active { transform: scale(.97); }
.tlink { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--surface-2); transition: text-decoration-color .2s; }
.tlink:hover { text-decoration-color: var(--ink); }

/* ============================ HERO: two tones ============================ */
.hero { min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr; }
.h-left { padding: var(--m) var(--m) var(--m) var(--frame); display: flex; flex-direction: column; }
.mark { font-size: 28px; letter-spacing: -0.03em; }
.h-copy { margin-top: auto; padding-bottom: 8px; }
.h1, h1 .ln { display: block; overflow: hidden; padding-bottom: .06em; }
h1 .ln > span { display: inline-block; }
.h-lead { margin-top: 28px; max-width: 34ch; font-size: 19px; }
.h-act { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.h-right { background: var(--black); display: grid; align-items: center; justify-items: end; padding: var(--m) var(--frame) var(--m) var(--m); }
.live { margin-right: 0; }

/* the live question (data-ui: the product's own look, corners included) */
.live { width: min(460px, 100%); display: flex; flex-direction: column; gap: 12px; }
.live-status { font-size: 16px; color: var(--on-black-soft); }
.live-status mark { transition: background-color .3s; }
.live-status mark.clear { background: #fff; }
.live-status mark { font-weight: 600; }
.note { background: #fff; border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.note-who { font-size: 15px; color: var(--muted); font-weight: 500; }
.note-q { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.note-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.note-btns button { min-height: 48px; border-radius: 999px; border: 0; background: var(--surface); font-weight: 600; cursor: pointer; transition: background-color .18s, transform .18s var(--ease); }
.note-btns button:first-child { background: var(--ink); color: #fff; }
.note-btns button:hover { background: var(--surface-2); }
.note-btns button:first-child:hover { background: #333; }
.note-btns button:active { transform: scale(.95); }
.note-done { font-weight: 600; }
.note.answered .note-btns { display: none; }
.term { background: #fff; border-radius: var(--r); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; min-height: 150px; }
.term-h { font-size: 14px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.term-wait { color: var(--muted); }
.term .you { font-weight: 600; }
.term .line { opacity: 0; transform: translateY(6px); animation: rise .4s var(--ease) forwards; }
.live-hint { font-size: 15px; color: var(--on-black-soft); }

/* ============================ THE COLUMN ============================ */
main > section { margin-top: 112px; }
.col { width: min(var(--col), calc(100% - 2 * var(--m))); margin-left: auto; margin-right: auto; }
.col > p + p { margin-top: 16px; }
.problem p { font-size: clamp(21px, 1.1rem + .7vw, 26px); line-height: 1.42; }

/* ---- how it works: call and response ---- */
.ex + .ex { margin-top: 72px; }
.ex-say { font-size: 20px; font-weight: 600; }
.call { position: relative; margin-top: 16px; background: var(--surface); border-radius: var(--r); }
.call pre { padding: 20px; overflow-x: auto; }
.call code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; line-height: 1.6; }
.copy { position: absolute; top: 12px; right: 12px; border: 0; border-radius: 999px; background: #fff; padding: 6px 14px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .18s; }
.copy:hover { background: var(--surface-2); }
.call.tap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 20px; }
.call.tap span:not(.soft) { padding: 8px 18px; border-radius: 999px; background: #fff; font-weight: 600; font-size: 15px; }
.call.tap .pressed { background: var(--ink) !important; color: #fff; }
.call.tap .soft { font-size: 15px; }
.resp { /* taste-skill-ignore: the product response card (data-ui) */ margin: 16px 0 0 56px; border: 1px solid var(--surface-2); border-radius: var(--r); padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.resp .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-2); }
.dot.on { background: var(--ink); }
.resp-q { font-size: 19px; font-weight: 600; line-height: 1.3; }
.resp .soft, .part .soft { font-size: 15px; }
.tag { align-self: flex-start; justify-self: start; display: inline-block; width: max-content; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); font-size: 14px; font-weight: 600; }
.tag.hl { background: var(--hl); color: var(--ink); }
.tag.ink { background: var(--ink); color: #fff; }
.tag.soft-tag { background: var(--surface); color: var(--muted); }
.resp.wide { width: min(760px, calc(100vw - 2 * var(--m) - 56px), calc(100% - 56px + (100vw - 100%) / 2 - var(--m))); flex-direction: row; gap: 16px; padding: 16px; }
.wide-term { flex: 1.3; background: var(--surface); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.wide-card { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 8px 4px; }

/* ---- the board: live demo with controls ---- */
.demo { margin-top: 36px; --w: min(760px, calc(100vw - 2 * var(--m))); width: var(--w); margin-left: calc((100% - var(--w)) / 2); background: var(--surface); border-radius: var(--r); display: grid; grid-template-columns: 62fr 38fr; overflow: hidden; }
.demo-list { padding: 16px; display: flex; flex-direction: column; gap: 6px; min-height: 470px; }
.r { background: #fff; border-radius: 10px; padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 2px; align-items: center; transition: opacity .25s, transform .25s var(--ease); }
.r-n { font-weight: 600; font-size: 16px; }
.r-a { grid-column: 1; font-size: 14px; color: var(--muted); }
.r .tag { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.r-was { display: none; grid-column: 1 / -1; font-size: 14px; margin-top: 4px; }
.demo.away .r-was { display: block; }
.r.off { display: none; }
.demo-ctl { background: var(--surface-2); padding: 20px 18px; display: flex; flex-direction: column; }
.ctl-h { font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.sw { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; cursor: pointer; }
.sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw i { width: 42px; height: 26px; border-radius: 999px; background: #c9c6bf; position: relative; flex: none; transition: background-color .2s; }
.sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); }
.sw input:checked + i { background: var(--ink); }
.sw input:checked + i::after { transform: translateX(16px); }
.sw input:focus-visible + i { outline: 3px solid var(--ink); outline-offset: 3px; }
.ctl-sum { margin-top: auto; font-size: 14px; color: var(--muted); padding-top: 16px; }
.under { margin-top: 16px; font-size: 15px; }

/* ---- what agents can send: one panel, notes in the margins ---- */
.plate { width: min(1120px, calc(100% - 2 * var(--m))); margin-left: auto; margin-right: auto; }
.plate h2 { text-align: center; margin-bottom: 48px; }
.prow { display: grid; grid-template-columns: 1fr 400px 1fr; column-gap: 48px; align-items: center; }
.prow + .prow { margin-top: 4px; }
.part { grid-column: 2; grid-row: 1; background: var(--surface); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; transition: background-color .2s; }
.prow:first-child .part { border-radius: var(--r) var(--r) 0 0; }
.prow:last-child .part { border-radius: 0 0 var(--r) var(--r); }
.prow.on-l .pn { grid-column: 1; grid-row: 1; text-align: right; justify-self: end; }
.prow.on-r .pn { grid-column: 3; grid-row: 1; }
.pn { max-width: 28ch; font-size: 16px; color: var(--muted); }
.pn b { display: block; color: var(--ink); font-size: 18px; font-weight: 600; margin-bottom: 2px; }
.prow:hover .part { background: var(--surface-2); }
.btns { display: flex; flex-wrap: wrap; gap: 8px; }
.btns span { padding: 7px 16px; border-radius: 999px; background: #fff; font-weight: 600; font-size: 15px; }
.btns .b1 { background: var(--ink); color: #fff; }
.ticks li { position: relative; padding: 3px 0 3px 28px; font-size: 16px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 6px; width: 18px; height: 18px; border-radius: 5px; background: #fff; }
.ticks li.done { color: var(--muted); text-decoration: line-through; }
.ticks li.done::before { background: var(--ink); }
.cmd { /* taste-skill-ignore: literal command in <code> */ font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; background: #fff; padding: 8px 10px; border-radius: 8px; }
.yours { background: #fff; padding: 8px 10px; border-radius: 8px; font-size: 16px; }

/* ---- about: side facts, wide paragraph ---- */
.about { width: min(1120px, calc(100% - 2 * var(--m))); margin-left: auto; margin-right: auto; }
.about-row { display: grid; grid-template-columns: 28% 1fr; }
.about-row + .about-row { margin-top: 88px; }
.facts { width: 180px; display: grid; gap: 20px; align-content: start; padding-top: 8px; }
.facts dt { font-size: 14px; color: var(--muted); }
.facts dd { font-size: 16px; font-weight: 600; line-height: 1.3; }
.about-text { max-width: 58em; }
.about-text p { max-width: 46ch; }
.about-text p { font-size: clamp(20px, 1.7vw, 26px); line-height: 1.38; }
.shard { width: calc(100% - 48px); max-width: 300px; }
.shard img { border-radius: var(--r); aspect-ratio: 4 / 3; object-fit: cover; }
.shard figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
.word { font-size: 16px; font-weight: 600; padding-top: 2px; }
.lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.lists li { display: flex; flex-direction: column; font-size: 18px; padding: 8px 0; }
.lists li .soft { font-size: 15px; }

/* ---- early access ---- */
.cta { padding-top: 0; }
.cta-say { font-size: clamp(22px, 1rem + 1vw, 28px); max-width: 32ch; line-height: 1.35; }
.field { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; max-width: 520px; position: relative; }
.field input[type="email"] { flex: 1 1 240px; min-width: 0; min-height: 48px; border: 0; border-radius: 999px; background: var(--surface); padding: 0 20px; font-size: 17px; }
.field input::placeholder { color: #6e6e6e; }
.hp { /* taste-skill-ignore: honeypot, never seen */ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wl-note { margin-top: 14px; font-size: 15px; color: var(--muted); max-width: 52ch; }
.wl-note.ok { color: var(--ink); font-weight: 600; }

/* ---- footer: one quiet line ---- */
.foot { margin-top: 10svh; padding: 0 var(--m) 30px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: baseline; font-size: 15px; color: var(--muted); }
.foot-links { display: flex; gap: 24px; }
.foot-links a { color: var(--ink); text-decoration: none; }
.foot-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-r { justify-self: end; }

/* ============================ MOTION ============================ */
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes up { from { transform: translateY(105%); } to { transform: none; } }
.js h1 .ln > span { animation: up .9s var(--ease) both; }
.js h1 .ln + .ln > span { animation-delay: .11s; }
.js .h-lead, .js .h-act { opacity: 0; transform: translateY(10px); animation: rise .6s .45s var(--ease) forwards; }
.js .live { opacity: 0; transform: translateY(16px); animation: rise .8s .3s var(--ease) forwards; }
.js [data-in] > * { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js [data-in].in > * { opacity: 1; transform: none; }
.js [data-in].in > *:nth-child(2) { transition-delay: .07s; }
.js [data-in].in > *:nth-child(3) { transition-delay: .14s; }
.js [data-in].in > *:nth-child(4) { transition-delay: .21s; }
.js [data-in].in > *:nth-child(5) { transition-delay: .28s; }
.js [data-in].in > *:nth-child(6) { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js h1 .ln > span, .js .h-lead, .js .h-act, .js .live, .js [data-in] > *, .term .line { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================ NARROWER ============================ */
@media (max-width: 1000px) {
  .prow { grid-template-columns: 1fr minmax(0, 400px); column-gap: 32px; }
  .prow.on-l .pn, .prow.on-r .pn { grid-column: 1; text-align: right; justify-self: end; }
  .part { grid-column: 2; }
  .about-row { grid-template-columns: 1fr; gap: 28px; }
  .facts { width: auto; grid-template-columns: repeat(3, 1fr); order: 2; }
}

/* ============================ PHONE ============================ */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .h-right { order: -1; padding: 72px var(--m) 40px; justify-items: center; }
  .h-left { padding: 48px var(--m) 8px; min-height: 0; }
  .mark { position: absolute; top: 24px; left: var(--m); color: #fff; }
  .h-copy { margin-top: 0; }
}
@media (max-width: 720px) {
  :root { --m: 20px; }
  body { font-size: 17px; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .h-right { order: -1; min-height: 58svh; padding: 64px var(--m) 24px; }
  .h-left { padding: 40px var(--m) 8px; }
  .mark { position: absolute; top: 20px; left: var(--m); font-size: 24px; }
  h1 { font-size: 13vw; }
  .h-lead { font-size: 17px; }
  main > section { margin-top: 104px; }
  .resp { margin-left: 0; margin-top: 24px; }
  .resp.wide { width: 100%; flex-direction: column; }
  .demo { --w: 100%; grid-template-columns: 1fr; }
  .demo-list { min-height: 0; }
  .demo-ctl { padding: 8px 18px 16px; }
  .plate h2 { text-align: left; }
  .prow { grid-template-columns: 1fr; row-gap: 12px; }
  .prow + .prow { margin-top: 40px; }
  .prow .part, .prow.on-l .pn, .prow.on-r .pn { grid-column: 1; grid-row: auto; text-align: left; justify-self: start; }
  .prow .part { justify-self: stretch; }
  .part { border-radius: var(--r) !important; }
  .facts { grid-template-columns: 1fr 1fr; }
  .shard { width: 100%; }
  .lists { grid-template-columns: 1fr; gap: 40px; }
  .cta { padding-top: 14svh; }
  .cta-say { font-size: 19px; }
  .foot { grid-template-columns: 1fr; gap: 8px; margin-top: 16svh; }
  .foot-r { justify-self: start; }
}

/* ============================ ROUND 5 ============================
   The owner on round 4: "way better, now it lacks more contrast and vibrancy, doesn't engage the user as
   well ... keep the language simple" and "make it feel more dynamic". Black chapters and one yellow
   chapter for contrast; a queue of questions to answer in the hero; a moving ticker of agent updates;
   the board's rows animate as the switches change them. Everything still stops under reduced motion. */

/* the queue of questions in the hero */
.stack { position: relative; min-height: 300px; }
.stack .note { position: absolute; inset: 0 0 auto 0; }
.note.enter { animation: card-in .55s var(--ease) both; }
.note.leave { animation: card-out .4s var(--ease) both; pointer-events: none; }
@keyframes card-in { from { opacity: 0; transform: translateX(48px) rotate(1.5deg); } to { opacity: 1; transform: none; } }
@keyframes card-out { to { opacity: 0; transform: translateY(-40px) scale(.96); } }
.note .reply { margin-top: 2px; font-size: 15px; color: var(--muted); }
.note-tag { align-self: flex-start; background: var(--hl); padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.done-card { background: var(--hl); border-radius: var(--r); padding: 24px 20px; display: flex; flex-direction: column; gap: 10px; }
.done-card .note-q { font-size: 26px; }
.again { align-self: flex-start; background: none; border: 0; padding: 4px 0; cursor: pointer; }

/* the ticker: agent updates passing by */
.ticker { background: var(--hl); overflow: hidden; white-space: nowrap; font-size: 18px; padding: 16px 0; }
.tick-track { display: inline-flex; gap: 56px; padding-left: 56px; animation: ticker 40s linear infinite; }
.tick-track span b { font-weight: 600; }
.ticker:hover .tick-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* chapters: full-width fields of colour */
.chapter { padding: 128px 0; }
.chapter.dark { background: var(--black); color: #fff; }
.chapter.dark .ex-sub { color: var(--on-black-soft); }
.chapter.dark .resp { border: 0; background: #fff; color: var(--ink); }
.chapter.dark .call.link { background: #1d1d1d; }
.chapter.yellow { background: var(--hl); color: var(--ink); }
.ex-say { font-family: "League Spartan", "Figtree", sans-serif; font-weight: 700; font-size: clamp(26px, 1.2rem + 1.2vw, 34px); letter-spacing: -0.03em; line-height: 1.05; }
.ex-sub { margin-top: 10px; font-size: 19px; max-width: 46ch; }
.call.link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 14px 20px; margin-top: 20px; }
.call.link code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 17px; color: var(--hl); }
.call.link .copy { position: static; background: var(--hl); color: var(--ink); }
.chapter.dark .resp { margin-top: 20px; }
.chapter.dark .resp.wide .wide-term { background: var(--surface); }

/* the board animates */
.r { animation: row-in .45s var(--ease) both; }
@keyframes row-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.part { transition: background-color .2s, transform .3s var(--ease); }
.prow:hover .part { transform: translateX(var(--nudge, 6px)); }
.prow.on-l:hover .part { --nudge: 6px; } .prow.on-r:hover .part { --nudge: -6px; }

/* plainer lists */
.lists li { display: block; font-size: 18px; padding: 7px 0; }
.lists h3 { font-family: "League Spartan", "Figtree", sans-serif; font-size: 24px; letter-spacing: -0.02em; }

/* the waitlist chapter */
.cta { padding-top: 120px; }
.cta h2 { margin-bottom: 18px; }
.chapter.yellow .cta-say { font-size: clamp(21px, 1.1rem + .6vw, 26px); }
.chapter.yellow .field input[type="email"] { background: #fff; }
.chapter.yellow .wl-note { color: var(--ink); }
main > section.cta { margin-top: 128px; }

/* the footer, black */
.foot { margin-top: 0; padding: 48px var(--m) 32px; background: var(--black); color: var(--on-black-soft); align-items: end; }
.foot .foot-mark { font-family: "League Spartan", "Figtree", sans-serif; font-weight: 700; font-size: clamp(56px, 9vw, 140px); line-height: .8; letter-spacing: -0.05em; color: #fff; }
.foot-links a { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .tick-track { animation: none !important; }
  .note.enter, .note.leave, .r { animation: none !important; opacity: 1 !important; transform: none !important; }
}
@media (max-width: 720px) {
  .stack { min-height: 290px; }
  .chapter { padding: 88px 0; }
  .ticker { font-size: 16px; padding: 12px 0; }
  .foot { grid-template-columns: 1fr; }
  .h-right { min-height: 0; padding-top: 72px; }
  .mark { color: #fff; }
}

/* ============================ ROUND 6 ============================
   After the four reviews (UI/UX, marketing, two cold readers). Hero copy centred with a slim nav and the
   email field up top; the question queue drawn as a real stack; a before/after for the problem; status
   colours that each mean one thing (yellow needs you, blue working, red stuck, green done); a two-column
   grid of what agents send; plain data and FAQ sections; the Greek story is a footnote. */
.st-work { background: #2457e0; color: #fff; }
.st-stuck { background: #c8261b; color: #fff; }
.st-done { background: #0b7a3b; color: #fff; }

/* hero */
.hero { grid-template-columns: 11fr 9fr; }
.h-left { justify-content: space-between; }
.h-right { padding-right: var(--frame); }
.h-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.h-nav { display: flex; gap: 24px; font-size: 16px; font-weight: 600; }
.h-nav a { text-decoration: none; padding: 8px 0; }
.h-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.h-copy { margin: auto 0; padding: 40px 0; }
.h-lead { font-size: clamp(19px, 1rem + .3vw, 21px); max-width: 32ch; color: var(--ink); }
.h-copy .field { margin-top: 32px; }
.h-copy .field input[type="email"] { background: var(--surface); }
.h-copy .wl-note { margin-top: 12px; }
.h-right { justify-items: end; }
.live { width: min(480px, 100%); }
.live-hint { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 16px; margin-top: 4px; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--hl); flex: none; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.55); opacity: .5; } }

/* the stack: the live card on top, the rest peeking out below it */
.stack { min-height: 330px; }
.stack .note { position: absolute; left: 0; right: 0; top: 0; transition: transform .45s var(--ease), opacity .45s var(--ease); transform-origin: 50% 100%; }
.stack .note[data-depth="0"] { z-index: 3; }
.stack .note[data-depth="1"] { z-index: 2; transform: translateY(18px) scale(.95); opacity: .75; }
.stack .note[data-depth="2"] { z-index: 1; transform: translateY(36px) scale(.9); opacity: .5; }
.stack .note[data-depth="1"] > *, .stack .note[data-depth="2"] > * { visibility: hidden; }
.stack .note.leave { z-index: 4; }
.note-btns button { min-height: 52px; font-size: 17px; }

/* ticker: slower, tools by name */
.tick-track { animation-duration: 60s; }

/* before / after */
.ba { width: min(1120px, calc(100% - 2 * var(--m))); margin-left: auto; margin-right: auto; display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.ba-text p { font-size: clamp(20px, 1.1rem + .5vw, 24px); line-height: 1.42; max-width: 30ch; }
.ba-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.mess { position: relative; height: 340px; }
.m { position: absolute; width: 92%; background: var(--surface); border-radius: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.35; color: var(--ink); }
.m .src { display: block; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.m1 { top: 0; left: 0; transform: rotate(-4deg); }
.m2 { top: 62px; left: 8%; transform: rotate(3deg); background: var(--surface-2); }
.m3 { top: 130px; left: 2%; transform: rotate(-2deg); }
.m4 { top: 196px; left: 10%; transform: rotate(5deg); background: var(--surface-2); }
.m5 { top: 262px; left: 0; transform: rotate(-3deg); }
.calm { background: var(--black); color: #fff; border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.calm .soft { color: var(--on-black-soft); }
.calm .btns span { background: #2a2a2a; color: #fff; }
.calm .btns .b1 { background: var(--hl); color: var(--ink); }
.ba-pics .m { animation: drift-in .8s var(--ease) both; }
.ba-pics .m2 { animation-delay: .08s; } .ba-pics .m3 { animation-delay: .16s; } .ba-pics .m4 { animation-delay: .24s; } .ba-pics .m5 { animation-delay: .32s; }
@keyframes drift-in { from { opacity: 0; translate: -24px 12px; } }

/* how it works: everything on the column */
.chapter.dark .resp { margin-left: 0; }
.resp.wide { width: 100%; }
.call.link .call-note { font-size: 15px; color: var(--on-black-soft); text-align: right; }
.chapter.dark .btns span { background: var(--surface); }
.chapter.dark .btns .b1 { background: var(--ink); color: #fff; }
.btns span { min-height: 40px; display: inline-flex; align-items: center; }

/* board */
.ctl-big { font-family: "League Spartan", "Figtree", sans-serif; font-weight: 700; font-size: 32px; letter-spacing: -0.03em; line-height: 1; }
.demo-ctl .ctl-sum { margin: 6px 0 18px; padding: 0; }
.ctl-try { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; margin-bottom: 4px; }

/* what agents can send: two columns, a colour edge per kind */
.kinds { width: min(1120px, calc(100% - 2 * var(--m))); margin-left: auto; margin-right: auto; }
.kgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.k { background: var(--surface); border-radius: var(--r); padding: 22px 24px; border-left: 6px solid var(--edge, var(--hl)); display: grid; grid-template-columns: 1fr 1.1fr; gap: 20px; align-items: center; transition: transform .3s var(--ease), background-color .2s; }
.k:hover { transform: translateY(-4px); background: var(--surface-2); }
.e-y { --edge: var(--hl); } .e-b { --edge: #2457e0; } .e-r { --edge: #c8261b; } .e-g { --edge: #0b7a3b; }
.k-t { font-family: "League Spartan", "Figtree", sans-serif; font-weight: 700; font-size: 26px; letter-spacing: -0.02em; line-height: 1.05; }
.k-s { grid-column: 1; font-size: 16px; color: var(--ink); margin-top: -12px; }
.k-t { grid-column: 1; align-self: end; }
.k-demo { grid-column: 2; grid-row: 1 / span 2; background: #fff; border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.k-demo .resp-q { font-size: 17px; }
.wave { display: flex; align-items: center; gap: 3px; height: 32px; }
.wave i { width: 4px; height: 50%; background: var(--ink); border-radius: 2px; animation: wave 1.2s ease-in-out infinite alternate; }
.wave i:nth-child(2n) { animation-delay: -.3s; height: 80%; } .wave i:nth-child(3n) { animation-delay: -.7s; height: 35%; }
@keyframes wave { from { transform: scaleY(.4); } to { transform: scaleY(1); } }

/* data and questions */
.checks li { position: relative; padding: 12px 0 12px 40px; font-size: 19px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 16px; width: 24px; height: 24px; border-radius: 50%; background: #0b7a3b; }
.checks li::after { content: ""; position: absolute; left: 7px; top: 22px; width: 10px; height: 6px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg); }
.faq details { background: var(--surface); border-radius: var(--r); padding: 0 20px; }
.faq details + details { margin-top: 8px; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 19px; padding: 18px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; line-height: 1; transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; max-width: 58ch; }

/* footer with the name's story as a footnote */
.foot { grid-template-columns: auto 1fr auto; gap: 40px; }
.foot-story { display: flex; gap: 16px; align-items: center; max-width: 560px; }
.foot-story picture { width: 120px; flex: none; }
.foot-story img { border-radius: 10px; aspect-ratio: 4 / 3; object-fit: cover; }
.foot-story figcaption { font-size: 14px; color: var(--on-black-soft); }
.foot-links { flex-wrap: wrap; justify-content: flex-end; }
.foot-links span { color: var(--on-black-soft); }

@media (prefers-reduced-motion: reduce) {
  .pulse, .wave i, .ba-pics .m { animation: none !important; }
}
@media (max-width: 960px) {
  .hero { display: flex; flex-direction: column; }
  .h-left { order: 0; }
  .h-right { order: 1; padding: 40px var(--m) 48px; min-height: 0; }
  .mark { position: static; color: var(--ink); }
  .ba { grid-template-columns: 1fr; gap: 32px; }
  .kgrid { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr; }
  .foot-links { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .h-nav { display: none; }
  .h-copy { padding: 32px 0 8px; }
  .field .btn, .field input[type="email"] { width: 100%; min-height: 52px; flex: 1 1 100%; }
  .ba-pics { grid-template-columns: 1fr; }
  .mess { height: 320px; }
  .k { grid-template-columns: 1fr; }
  .k-demo { grid-column: 1; grid-row: auto; }
  .k-s { margin-top: -8px; }
  .ticker { font-size: 15px; }
  .call.link { flex-direction: column; align-items: flex-start; }
  .call.link .call-note { text-align: left; }
}
.k-demo .btns span { background: var(--surface); }
.k-demo .btns .b1 { background: var(--ink); color: #fff; }

/* ============================ ROUND 7: illustrations, logo, icon ============================
   The owner: "we overdid it by removing all graphics". One illustrator's world (five small agent characters,
   black, white and the highlighter yellow), generated with gpt-image-2; the owner chose B, bold linocut, over A,
   fine ink line. Logo: ESTOA in inscriptional capitals only (the owner dropped the colonnade once the ostrakon
   became the icon). Icon: the ostrakon with an E. */
.mark img { height: 26px; width: auto; display: block; }
.h-art { max-width: 460px; margin: 0 0 24px -12px; }
.h-art img { width: 100%; height: auto; }
.ba-pics { grid-template-columns: 1fr 1fr; gap: 24px; }
.ba-fig img { width: 100%; height: auto; border-radius: var(--r); background: #fff; }
.ba-fig figcaption { margin-top: 10px; font-weight: 600; font-size: 16px; }
.ba-fig:first-child figcaption { color: var(--muted); }
.ex-head { display: flex; align-items: center; gap: 20px; }
.ex-art { width: 112px; height: 112px; flex: none; background: #fff; border-radius: 22px; overflow: hidden; display: grid; place-items: center; }
.ex-art img { width: 100%; height: 100%; object-fit: cover; }
.cta .col { position: relative; }
.cta-art { width: min(300px, 60%); margin: -40px 0 8px -16px; }
.cta-art img { width: 100%; height: auto; mix-blend-mode: multiply; }   /* the white paper drops out on the yellow */
.foot .foot-mark img { height: clamp(40px, 5vw, 72px); width: auto; display: block; }
.foot-story img { width: 96px; height: 96px; border-radius: 22px; flex: none; }
.foot-story picture { display: none; }
@media (min-width: 1100px) {
  .cta .col { display: grid; grid-template-columns: 1fr 260px; column-gap: 32px; }
  .cta .col > * { grid-column: 1; }
  .cta-art { grid-column: 2; grid-row: 1 / span 4; align-self: center; width: 100%; margin: 0; }
}
@media (max-width: 960px) {
  .h-art { max-width: 380px; margin: 8px 0 16px; }
  .mark img { height: 22px; }
}
@media (max-width: 720px) {
  .ba-pics { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ex-art { width: 84px; height: 84px; border-radius: 18px; }
  .cta-art { margin: -24px 0 4px -8px; width: 70%; }
}
.h-art img, .ba-fig img { mix-blend-mode: multiply; background: none; }   /* the art's off-white paper drops out */