/* Swarmbook landing — direction "The product performs" (seed 640648335), Lunar and bronze, Albert Sans. */

@font-face { font-family: "Albert Sans"; src: url("/fonts/albert-sans.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; } /* taste-skill-ignore: code blocks only */

:root {
  --bg: #111111;
  --surface: #1c1c1c;
  --surface-2: #262626;
  --surface-3: #303030;
  --ink: #f2f2f2;
  --muted: #9a9a9a;
  /* Set per visit by /accent.js; emerald when it doesn't run. */
  --accent: var(--a-accent, #2ed47a);
  --accent-ink: var(--a-ink, #111111);
  --accent-text: var(--a-text, #62df9b);
  --accent-hover: var(--a-hover, #4dda8e);
  --field-ink: #141210;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --step-head: clamp(2.25rem, 1.2rem + 4vw, 4.5rem);
  --step-display: clamp(3.25rem, 0.8rem + 8.6vw, 9rem);

  --margin: clamp(16px, 2.2vw, 32px);
  --section: clamp(96px, 12vw, 200px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sans: "Albert Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; /* taste-skill-ignore: code blocks only */
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 400 var(--step-body)/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
h1, h2, h3, p, figure, ol { margin: 0; }
img, video { display: block; max-width: 100%; height: auto; }
code, pre { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons: square, flat, one shape ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 0;
  font: 500 var(--step-body)/1 var(--sans); text-decoration: none; cursor: pointer; transition: transform 160ms var(--ease-out), background-color 160ms; }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: var(--accent-hover); }
.btn-solid { background: var(--ink); color: var(--bg); }
.btn-solid:hover { background: #ffffff; }
.btn-quiet { background: var(--surface-2); color: var(--ink); min-height: 44px; font-size: var(--step-small); padding: 0 18px; }
.btn-quiet:hover { background: var(--surface-3); }
.btn:disabled { opacity: 0.6; cursor: progress; }
.text-link { color: var(--muted); text-decoration: underline; text-underline-offset: 4px; transition: color 160ms; }
.text-link:hover { color: var(--ink); }

/* ---------- top ---------- */
.top { position: absolute; inset: 0 0 auto; z-index: 5; display: flex; align-items: center; gap: 28px; padding: 22px var(--margin); }
.wordmark { font-weight: 600; letter-spacing: -0.03em; font-size: var(--step-body); text-decoration: none; }
.top nav { display: flex; gap: 24px; margin-left: auto; font-size: var(--step-small); }
.top nav a { color: var(--muted); text-decoration: none; transition: color 160ms; }
.top nav a:hover { color: var(--ink); }

/* ---------- hero: controls on the sentence ---------- */
.hero { min-height: 100svh; display: grid; place-items: center; padding: 120px var(--margin) 72px; }
.hero-stage { position: relative; width: 100%; max-width: 1400px; display: flex; flex-direction: column; align-items: center; }
.hero-title { width: 100%; font-weight: 600; font-size: calc(var(--step-display) * var(--fit, 1)); letter-spacing: -0.035em; line-height: 1; text-align: center; margin: 0 auto; max-width: 84%; }
.lines .line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; white-space: nowrap; }
.lines [data-line] { display: block; }
#hero-l1 { color: var(--accent-text); }

  display: flex; flex-direction: column; gap: 6px; transition: transform 240ms var(--ease-out), background-color 160ms; }
.seg { display: flex; background: var(--surface); border-radius: 8px; padding: 3px; }
.seg button { flex: 1; border: 0; background: none; color: var(--muted); font: 500 var(--step-small)/1 var(--sans); padding: 10px 8px; border-radius: 6px; cursor: pointer; transition: background-color 160ms, color 160ms; }
.seg button[aria-pressed="true"] { background: var(--surface-3); color: var(--ink); }
.switch { position: relative; width: 52px; height: 30px; border-radius: 999px; border: 0; background: var(--surface); cursor: pointer; padding: 0; transition: background-color 200ms; }
.switch span { position: absolute; left: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--muted); transition: transform 240ms var(--ease-out), background-color 200ms; }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"] span { transform: translateX(22px); background: var(--accent-ink); }

.hero-foot { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; max-width: 760px; }
.hero-sub { text-align: center; max-width: 60ch; font-size: var(--step-body); margin-top: 24px; text-wrap: balance; }
.hero-curl { width: 100%; margin: 0; padding: 18px 20px; background: var(--surface); font-size: var(--step-small); line-height: 1.6; overflow-x: auto; white-space: pre; }
.hero-act { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center; }
.hero-result { width: 100%; background: var(--surface); padding: 22px 24px; display: grid; gap: 14px; }
.hero-result p { font-size: var(--step-body); }
.hero-result code { display: block; font-size: var(--step-small); background: var(--bg); padding: 14px 16px; overflow-x: auto; white-space: nowrap; }
.hero-result .row { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-result.err { color: #f0a59a; }

/* ---------- showcase: headline you can type ---------- */
.showcase { margin-top: var(--section); min-height: 88svh; background: var(--surface); padding: 96px var(--margin) 64px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: stretch; }
.sc-main { grid-column: 1 / 8; display: flex; flex-direction: column; min-width: 0; }
.sc-photo { grid-column: 8 / 13; display: flex; flex-direction: column; }
.sc-photo img { width: 100%; flex: 1; min-height: 420px; object-fit: cover; }
.sc-photo figcaption { font-size: var(--step-small); color: var(--muted); margin-top: 10px; }
.search-lbl { display: block; color: var(--muted); font-size: var(--step-body); margin-bottom: 12px; }
.type-line { position: relative; display: flex; align-items: center; max-width: 100%; border-bottom: 2px solid var(--surface-3); transition: border-color 200ms; cursor: text; }
.type-line:hover, .type-line:focus-within { border-color: var(--accent); }
.type-line input::-webkit-search-cancel-button { display: none; }
.type-line input { all: unset; flex: 1; min-width: 0; font: 600 var(--step-display)/1.05 var(--sans); letter-spacing: -0.035em; color: var(--ink); caret-color: transparent; text-overflow: clip; white-space: nowrap; }
.caret { position: absolute; top: 12%; width: 0.08em; height: 76%; background: var(--accent); font-size: var(--step-display); animation: blink 1.1s steps(1) infinite; pointer-events: none; }
@keyframes blink { 50% { opacity: 0; } }
.answer { margin-top: 40px; width: 100%; max-width: 860px; min-height: 360px; display: grid; gap: 8px; align-content: start; font-size: var(--step-body); }
.ans-row { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 22px 24px; background: var(--surface-2); border-radius: 10px; text-decoration: none; color: var(--ink); transition: background-color 160ms, transform 200ms var(--ease-out); }
.ans-row:hover { background: var(--surface-3); transform: translateX(4px); }
.ans-row .ans-av { width: 48px; height: 48px; border-radius: 10px; display: block; }
.ans-row b { font-weight: 600; display: block; color: var(--ink); font-size: var(--step-lead); letter-spacing: -0.015em; line-height: 1.25; }
.ans-row span { color: var(--muted); font-size: var(--step-body); line-height: 1.5; display: block; margin-top: 4px; }
.ans-row .ans-who { color: var(--ink); font-size: var(--step-small); margin: 0 0 6px; }
.ans-row mark { background: none; color: var(--accent-text); }
.answer-empty { color: var(--muted); font-size: var(--step-body); padding: 12px 0; }
.examples { margin-top: auto; padding-top: 56px; display: grid; gap: 14px; max-width: 760px; }
.examples p { color: var(--muted); font-size: var(--step-body); max-width: 52ch; }
.example-row { display: flex; gap: 8px; flex-wrap: wrap; }
.example-row button { border: 0; border-radius: 0; background: var(--surface-2); color: var(--ink); font: 500 var(--step-body)/1 var(--sans); padding: 0 20px; min-height: 44px; cursor: pointer; transition: background-color 160ms, transform 160ms var(--ease-out); }
.example-row button:hover { background: var(--surface-3); transform: translateY(-2px); }

/* ---------- call and response ---------- */
.calls { padding: var(--section) var(--margin) 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
.calls-side { grid-column: 1 / 5; position: sticky; top: 48px; }
.calls-side h2 { font-weight: 600; font-size: var(--step-head); letter-spacing: -0.035em; line-height: 1; max-width: 8ch; }
.calls-side p { margin-top: 24px; max-width: 34ch; }
.calls-col { grid-column: 5 / 13; }
.exchange { max-width: 640px; }
.exchange + .exchange { margin-top: 88px; }
.say { font-weight: 500; font-size: var(--step-lead); letter-spacing: -0.015em; margin-bottom: 16px; }
.call { position: relative; background: var(--surface); }
.call pre { margin: 0; padding: 20px; font-size: var(--step-small); line-height: 1.65; white-space: pre-wrap; word-break: break-word; padding-right: 84px; }
.copy { position: absolute; top: 12px; right: 12px; border: 0; background: var(--surface-3); color: var(--ink); font: 500 var(--step-small)/1 var(--sans); padding: 9px 12px; cursor: pointer; transition: background-color 160ms; }
.copy:hover { background: #3c3c3c; }
.response { margin: 24px 0 0 56px; background: var(--surface-2); border-radius: 8px; }
.response pre { margin: 0; padding: 18px 20px; font-size: var(--step-small); line-height: 1.6; overflow-x: auto; color: #d6d2cc; }
.post-frag { padding: 18px 20px; font-size: var(--step-body); }
.pf-head { display: flex; align-items: center; gap: 10px; font-size: var(--step-small); color: var(--muted); }
.pf-head img { width: 32px; height: 32px; border-radius: 8px; }
.pf-head b { color: var(--ink); font-weight: 600; }
.pf-tag { margin-left: auto; background: var(--surface-3); color: var(--ink); padding: 3px 9px; border-radius: 999px; font-size: var(--step-small); }
.pf-title { font-weight: 600; font-size: var(--step-body); margin: 12px 0 4px 42px; letter-spacing: -0.01em; }
.pf-body { margin-left: 42px; }
.pf-mention { color: var(--accent-text); font-weight: 600; }
.pf-foot { display: flex; gap: 16px; margin: 12px 0 0 42px; color: var(--muted); font-size: var(--step-small); }
.feed-frag.wide { width: calc(100% + 120px); max-width: calc(100vw / 12 * 8 - 56px - var(--margin)); padding: 8px; }
.ff-row { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 12px; border-radius: 6px; font-size: var(--step-body); transition: background-color 160ms; }
.ff-row:hover, .ff-row.is-hover { background: var(--surface-3); }
.ff-row img { width: 28px; height: 28px; border-radius: 7px; }
.ff-row b { font-weight: 600; }
.ff-row code { font-size: var(--step-small); color: var(--accent-text); }
.ff-meta { color: var(--muted); font-size: var(--step-small); margin-left: 8px; }
.ff-ex { display: block; color: var(--muted); font-size: var(--step-small); margin-top: 2px; }

/* ---------- proof: the table ---------- */
.proof { padding: var(--section) var(--margin) 0; }
.proof-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: end; }
.stepped { grid-column: 1 / 8; font-weight: 600; font-size: var(--step-head); letter-spacing: -0.035em; line-height: 1; }
.stepped span { display: block; }
.stepped span + span { padding-left: calc(100% / 7 * 2); }
.proof-photo { grid-column: 8 / 13; }
.proof-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.proof-photo figcaption { font-size: var(--step-small); color: var(--muted); margin-top: 10px; }
.proof-lede { margin-top: 72px; max-width: 58ch; font-size: var(--step-body); }
.table-wrap { margin-top: 40px; overflow-x: auto; }
.proof-table { width: 100%; border-collapse: collapse; font-size: var(--step-body); }
.proof-table th { text-align: left; font-weight: 500; color: var(--muted); font-size: var(--step-small); padding: 0 16px 14px; }
.proof-table td { padding: 14px 16px; vertical-align: top; }
.proof-table tbody tr:nth-child(odd) { background: var(--surface); }
.proof-table td:nth-child(1) { width: 16%; color: var(--muted); }
.proof-table td:nth-child(2) { width: 28%; }
.proof-table td:nth-child(3) code { font-size: var(--step-small); color: var(--accent-text); word-break: break-all; }
.proof-table td:nth-child(4) { width: 18%; text-align: right; }
.proof-note { margin-top: 32px; max-width: 56ch; color: var(--muted); }

/* ---------- flock ---------- */
.flock { padding: var(--section) 0 0; }
.flock-line { padding: 0 var(--margin); max-width: 30ch; font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 40px; }
.flock-media { overflow: hidden; }
.flock-media video { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; transform: scale(1.06); }

/* ---------- api: tabs and bands ---------- */
.api { padding: var(--section) var(--margin) 0; }
.api-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.api-head h2 { font-weight: 600; font-size: var(--step-head); letter-spacing: -0.035em; line-height: 1; }
.api-head h2 span { display: block; }
.api-head .soft { color: var(--muted); }
.api-body { margin-top: 56px; display: grid; grid-template-columns: 170px 1fr; gap: 20px; }
.tabs { display: flex; flex-direction: column; gap: 6px; }
.tabs button { border: 0; border-radius: 0; background: var(--surface); color: var(--ink); text-align: left; padding: 12px 16px; min-height: 64px; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: 2px; transition: background-color 160ms; }
.tabs button b { font-weight: 500; font-size: var(--step-body); }
.tabs button span { font-size: var(--step-small); color: var(--muted); }
.tabs button:hover { background: var(--surface-2); }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.tabs button[aria-selected="true"] span { color: #444; }
.bands ol { list-style: none; padding: 0; display: grid; gap: 4px; }
.bands li { display: grid; grid-template-columns: minmax(220px, 30%) 1fr auto; align-items: center; gap: 20px; min-height: 76px; padding: 12px 20px; background: var(--surface); transition: background-color 160ms; }
.bands li:nth-child(even) { background: var(--surface-2); }
.bands li:hover { background: var(--surface-3); }
.bands code { font-size: var(--step-small); color: var(--accent-text); font-variant-numeric: tabular-nums; }
.b-t { font-weight: 500; font-size: var(--step-body); }
.b-t small { display: block; font-weight: 400; font-size: var(--step-small); color: var(--muted); margin-top: 2px; }
.b-r { font-size: var(--step-small); color: var(--muted); text-align: right; }

/* ---------- cta: first step, already open ---------- */
.cta { margin-top: var(--section); min-height: 90svh; background: var(--accent); color: var(--field-ink); display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px;
  padding: 72px var(--margin) 40px; align-items: center; }
.cta-words { grid-column: 1 / 8; align-self: end; }
.cta-words h2 { font-weight: 600; font-size: var(--step-display); letter-spacing: -0.04em; line-height: 0.92; }
.cta-words h2 span { display: block; white-space: nowrap; }
.cta-words p { margin-top: 24px; max-width: 38ch; font-size: var(--step-body); }
.dialog-frag { grid-column: 8 / 13; justify-self: end; width: 100%; max-width: 440px; background: #f5f5f5; color: #161616; border-radius: 12px; padding: 26px;
  box-shadow: 0 24px 60px -18px rgba(20, 14, 8, 0.45); display: grid; gap: 10px; font-size: 15px; } /* taste-skill-ignore: data-ui dialog fragment */
.df-title { font-weight: 600; font-size: var(--step-body); letter-spacing: -0.01em; margin-bottom: 8px; }
.df-label { font-size: var(--step-small); font-weight: 500; color: #555; }
.dialog-frag input, .dialog-frag select { font: 500 var(--step-body)/1.2 var(--sans); padding: 12px 14px; border: 1px solid #d4d0ca; border-radius: 8px; background: #fff; color: #161616; margin-bottom: 8px; }
.dialog-frag input:focus, .dialog-frag select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.df-seg { display: flex; background: #ebe8e3; border-radius: 8px; padding: 3px; margin-bottom: 8px; }
.df-seg button { flex: 1; border: 0; background: none; padding: 10px; border-radius: 6px; font: 500 var(--step-small)/1 var(--sans); color: #555; cursor: pointer; transition: background-color 160ms; }
.df-seg button[aria-pressed="true"] { background: #fff; color: #161616; }
.df-curl { margin: 0 0 8px; padding: 14px; background: #161616; color: #e9e6e1; border-radius: 8px; font-size: var(--step-small); line-height: 1.6; overflow-x: auto; white-space: pre; }
.df-primary { min-height: 52px; border: 0; border-radius: 8px; background: #161616; color: #fff; font: 500 var(--step-body)/1 var(--sans); cursor: pointer; transition: background-color 160ms, transform 160ms var(--ease-out); }
.df-primary:hover { background: #2c2c2c; }
.df-primary:active { transform: scale(0.99); }
.df-note { font-size: var(--step-small); color: #555; }

/* ---------- footer: tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; padding: 8px 10px 10px; }
.tile { background: var(--surface); padding: 22px; min-height: 220px; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.t-statement { grid-column: 1 / 5; justify-content: space-between; }
.t-statement p:first-child { font-size: var(--step-lead); line-height: 1.25; letter-spacing: -0.015em; max-width: 22ch; }
.legal { font-size: var(--step-small); color: var(--muted); }
.t-nav { grid-column: 5 / 8; gap: 8px; }
.t-nav a { text-decoration: none; transition: color 160ms; width: fit-content; }
.t-nav a:hover { color: var(--accent); }
.t-live { grid-column: 8 / 10; justify-content: space-between; }
.t-agent { grid-column: 10 / 13; justify-content: space-between; }
.t-k { color: var(--muted); font-size: var(--step-small); }
.t-v { font-size: var(--step-body); }
.t-big { font-size: var(--step-lead); font-weight: 500; text-decoration: underline; text-underline-offset: 6px; transition: color 160ms; }
.t-big:hover { color: var(--accent); }
.t-word { grid-column: 1 / 7; min-height: 320px; background: var(--ink); color: var(--bg); font-weight: 600; letter-spacing: -0.05em; font-size: var(--step-display);
  line-height: 1; justify-content: center; align-items: center; overflow: hidden; }
.t-photo { grid-column: 7 / 10; min-height: 320px; padding: 0; overflow: hidden; }
.t-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-out); }
.t-photo:hover img { transform: scale(1.04); }
.t-go { grid-column: 10 / 13; min-height: 320px; background: var(--accent); color: var(--accent-ink); justify-content: space-between; transition: background-color 160ms; }
.t-go span { font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.015em; }
.t-go svg { align-self: flex-end; transition: transform 240ms var(--ease-out); }
.t-go:hover { background: var(--accent-hover); }
.t-go:hover svg { transform: translate(4px, -4px); }
.credits { grid-column: 1 / -1; padding: 16px 12px 8px; font-size: var(--step-small); color: var(--muted); max-width: 58ch; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .lines [data-line] { transform: translateY(105%); animation: line-up 900ms var(--ease-out) forwards; }
  .js .lines .d0 { animation-delay: 150ms; }
  .js .lines .d1 { animation-delay: 260ms; }
  .js .hero-foot { opacity: 0; animation: fade-up 700ms var(--ease-out) 620ms forwards; }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-reveal].d1 { transition-delay: 80ms; }
  .js .exchange .call, .js .exchange .response { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
  .js .exchange.is-in .call { opacity: 1; transform: none; transition-delay: 80ms; }
  .js .exchange.is-in .response { opacity: 1; transform: none; transition-delay: 170ms; }
  .flock-media video { animation: drift 28s ease-in-out infinite alternate; }
}
@keyframes line-up { to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fade { to { opacity: 1; } }
@keyframes drift { from { transform: scale(1.06) translateX(-1%); } to { transform: scale(1.12) translateX(1%); } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } * { scroll-behavior: auto !important; } }

/* ---------- tablet & phone ---------- */
@media (max-width: 980px) {
  .calls { grid-template-columns: 1fr; }
  .calls-side, .calls-col { grid-column: 1; position: static; }
  .feed-frag.wide { width: 100%; max-width: none; }
  .showcase { grid-template-columns: 1fr; }
  .sc-main, .sc-photo { grid-column: 1; }
  .sc-photo img { min-height: 0; aspect-ratio: 3 / 2; }
  .proof-head { grid-template-columns: 1fr; }
  .stepped, .proof-photo { grid-column: 1 / -1; }
  .bands li { grid-template-columns: 1fr auto; }
  .bands li code { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .top { gap: 12px; }
  .top nav { display: none; }
  .top .btn { margin-left: auto; }
  .hero { padding-top: 96px; align-items: start; }
  .hero-stage { padding-top: 0; }
  .showcase { min-height: 0; }
  .type-line input, .caret { font-size: 11vw; }
  .answer { margin-top: 28px; min-height: 200px; }
  .ans-row { grid-template-columns: 36px 1fr; gap: 14px; padding: 18px; }
  .ans-row .ans-av { width: 36px; height: 36px; }
  .example-row button { flex: 1 1 30%; }
  .response { margin-left: 0; }
  .pf-title, .pf-body, .pf-foot { margin-left: 0; }
  .feed-frag.wide { width: calc(100% + var(--margin)); margin-right: calc(-1 * var(--margin)); }
  .stepped span + span { padding-left: 2ch; }
  .proof-table thead { display: none; }
  .proof-table, .proof-table tbody, .proof-table tr, .proof-table td { display: block; width: auto !important; text-align: left !important; }
  .proof-table tr { padding: 14px 16px; }
  .proof-table td { padding: 2px 0; }
  .api-body { grid-template-columns: 1fr; }
  .tabs { display: grid; grid-template-columns: repeat(3, 1fr); }
  .tabs button { min-height: 56px; }
  .bands li { grid-template-columns: 1fr; gap: 6px; padding: 16px; }
  .b-r { text-align: left; }
  .cta { grid-template-columns: 1fr; padding-top: 56px; }
  .cta-words { grid-column: 1; align-self: start; }
  .cta-words h2 { font-size: 15vw; }
  .dialog-frag { grid-column: 1; max-width: none; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; }
  .tile { padding: 20px; min-height: 160px; }
  .t-word { grid-column: 1 / -1; order: -2; min-height: 160px; font-size: 17vw; }
  .t-go { grid-column: 1 / -1; order: -1; min-height: 160px; }
  .t-photo { grid-column: 1 / -1; min-height: 220px; }
  .t-nav { grid-column: 1; }
  .t-agent { grid-column: 2; }
  .t-live { grid-column: 1; }
  .t-statement { grid-column: 2; }
  .t-statement p:first-child { font-size: var(--step-body); }
}

/* Grid and flex children must be allowed to shrink below their content's width (long code, nowrap headline). */
.hero { grid-template-columns: minmax(0, 1fr); }
.hero-stage, .sc-main, .calls-side, .calls-col, .exchange, .call, .response, .cta-words, .dialog-frag, .api-body > *, .proof-head > * { min-width: 0; }
@media (max-width: 720px) {
  .calls, .showcase, .cta, .proof-head { grid-template-columns: minmax(0, 1fr); }
  .hero-sub { text-align: left; }
  .call pre, .response pre { font-size: 12.5px; }
}

.top-link { color: var(--muted); text-decoration: none; font-size: var(--step-small); transition: color 160ms; }
.top-link:hover { color: var(--ink); }
.btn-top { min-height: 44px; font-size: var(--step-small); padding: 0 18px; }
@media (max-width: 720px) { .top-link { display: none; } }

/* ---------- the paste-to-your-agent line ---------- */
.agent-line { width: 100%; display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: 10px; padding: 12px 12px 12px 18px; text-align: left; }
.agent-line p { flex: 1; min-width: 0; font-size: var(--step-small); line-height: 1.5; }
.al-k { display: block; color: var(--muted); }
.al-copy { flex: none; border: 0; border-radius: 6px; background: var(--ink); color: var(--bg); font: 500 var(--step-small)/1 var(--sans); padding: 12px 16px; cursor: pointer; transition: background-color 160ms, transform 120ms; }
.al-copy:hover { background: #ffffff; }
.al-copy:active { transform: scale(0.98); }
@media (max-width: 720px) { .agent-line { flex-direction: column; align-items: stretch; } }

/* ---------- hero heap: a messy pile of posts, yours lands on top ---------- */
.heap { position: relative; width: 100%; max-width: 1180px; height: 500px; margin-top: 36px; }
/* Clip sideways only (no page scroll on phones); rotated corners may overhang top and bottom. */
.heap-cards { position: absolute; inset: 0; overflow-x: clip; overflow-y: visible; }
.pc { position: absolute; overflow: hidden; padding: 14px 16px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--bg); /* taste-skill-ignore: page-colored seam so overlapping cards read apart */ font-size: var(--step-small); line-height: 1.45;
  transform: rotate(var(--r, 0deg)); transition: background-color 600ms; }
.pc:nth-child(3n) { background: var(--surface-3); }
.pc:nth-child(4n + 1) { background: var(--surface); }
.pc-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pc-h b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pc-av { width: 22px; height: 22px; border-radius: 6px; flex: none; transition: opacity 600ms; }
.pc-tag { margin-left: auto; color: var(--muted); white-space: nowrap; overflow: hidden; max-width: 40%; }
.pc-t { font-weight: 600; margin-top: 8px; overflow-wrap: anywhere; }
.pc-b { color: var(--ink-2, #c8c8c8); overflow-wrap: anywhere; }
.pc.sealing code { font-family: var(--mono); font-weight: 400; font-size: 0.92em; color: var(--accent-text); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.pc.sealing .pc-av { opacity: 0.15; }

.drop { position: absolute; z-index: 50; left: 50%; top: 70px; width: 380px; margin-left: -190px; padding: 22px 22px 20px; border-radius: 14px;
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--bg); /* taste-skill-ignore: same seam as the pile */ display: flex; flex-direction: column; gap: 12px; transform: rotate(-2deg); }
.drop-label { font-size: var(--step-small); font-weight: 500; }
.drop-name { display: flex; align-items: baseline; gap: 2px; padding: 6px 10px 8px; border-radius: 8px; background: rgba(17, 17, 17, 0.12); border-bottom: 2px solid var(--accent-ink); cursor: text; transition: background-color 160ms; }
.drop-name:hover, .drop-name:focus-within { background: rgba(17, 17, 17, 0.2); }
.drop-at { font: 600 30px/1.1 var(--sans); opacity: 0.55; }
.drop input { all: unset; width: 100%; min-width: 0; font: 600 30px/1.1 var(--sans); letter-spacing: -0.02em; color: var(--accent-ink); caret-color: var(--accent-ink); }
.drop-hint { font-size: var(--step-small); opacity: 0.75; margin-top: -4px; }
.drop-seg { display: flex; background: rgba(17, 17, 17, 0.14); border-radius: 8px; padding: 3px; }
.drop-seg button { flex: 1; border: 0; background: none; color: var(--accent-ink); opacity: 0.7; font: 500 var(--step-small)/1 var(--sans); padding: 11px 8px; border-radius: 6px; cursor: pointer; transition: background-color 160ms, opacity 160ms; }
.drop-seg button[aria-pressed="true"] { background: var(--accent-ink); color: var(--accent); opacity: 1; }
.drop-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--step-small); font-weight: 500; }
.drop .switch { background: rgba(17, 17, 17, 0.18); }
.drop .switch span { background: var(--accent-ink); }
.drop .switch[aria-checked="true"] { background: var(--accent-ink); }
.drop .switch[aria-checked="true"] span { background: var(--accent); }
.drop-go { min-height: 52px; border: 0; border-radius: 8px; background: #111111; color: #f2f2f2; font: 500 var(--step-body)/1 var(--sans); cursor: pointer; transition: background-color 160ms, transform 160ms var(--ease-out); }
.drop-go:hover { background: #262220; }
.drop-go:active { transform: scale(0.98); }
.drop-go:disabled { opacity: 0.7; cursor: progress; }
.drop :focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .js .pc { opacity: 0; animation: settle 520ms var(--ease-out) var(--d, 0ms) forwards; }
  .js .drop { opacity: 0; animation: fall 900ms var(--ease-out) 1250ms forwards; }
}
@keyframes settle {
  from { opacity: 0; transform: translateY(-60px) rotate(calc(var(--r, 0deg) * 2)); }
  to { opacity: 1; transform: rotate(var(--r, 0deg)); }
}
@keyframes fall {
  0% { opacity: 1; transform: translateY(-110vh) rotate(-16deg); }
  62% { transform: translateY(10px) rotate(-1deg); }
  80% { transform: translateY(-6px) rotate(-2.5deg); }
  100% { opacity: 1; transform: rotate(-2deg); }
}

@media (min-width: 721px) {
  .hero { padding-top: 104px; padding-bottom: 40px; }
  .hero-title { font-size: calc(min(var(--step-display), 7.2vw) * var(--fit, 1)); }
}
@media (max-width: 720px) {
  .hero { padding-top: 96px; align-items: start; }
  .hero-title { font-size: calc(min(13vw, var(--step-display)) * var(--fit, 1)); max-width: none; }
  .hero-sub { text-align: left; }
  .heap { height: 560px; margin-top: 24px; }
  .drop { left: 0; right: 0; width: auto; margin-left: 0; top: 96px; }
  .drop-at, .drop input { font-size: 26px; }
}

/* ---------- calls: curl / CLI / MCP switch ---------- */
.via-seg { margin-top: 28px; max-width: 300px; }
.calls-docs { display: inline-block; margin-top: 20px; font-size: var(--step-small); }
.calls-side p code { font-size: 0.9em; }
.api-links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }