/* Linnet marketing site v3. Warm paper, graphite, linnet red. One serif line per surface. */

:root {
  color-scheme: light dark;
  --canvas: #f6f4ef;
  --canvas-raised: #fcfbf8;
  --surface: #ffffff;
  --surface-soft: #eeeae2;
  --ink: #1b1b19;
  --ink-2: #4c4a45;
  --ink-3: #6a6760;
  --line: #ddd8ce;
  --line-strong: #a8a198;
  --red: #e35d42;
  --red-deep: #b8412a;
  --red-soft: #f8ded6;
  --ok: #21664f;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Manrope", "Avenir Next", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --shadow-1: 0 1px 2px rgb(27 27 25 / .06), 0 14px 36px rgb(27 27 25 / .07);
  --shadow-2: 0 24px 70px rgb(27 27 25 / .14);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --fast: 160ms;
  --base: 320ms;
  --slow: 700ms;
  --shell: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #191917;
    --canvas-raised: #1f1f1c;
    --surface: #252420;
    --surface-soft: #2f2d28;
    --ink: #f4f1ea;
    --ink-2: #d2ccc2;
    --ink-3: #a59f94;
    --line: #3f3c36;
    --line-strong: #6f685e;
    --red: #ef6e53;
    --red-deep: #f28a72;
    --red-soft: #4a2820;
    --ok: #7dc4a7;
    --shadow-1: 0 1px 2px rgb(0 0 0 / .2), 0 14px 36px rgb(0 0 0 / .22);
    --shadow-2: 0 24px 70px rgb(0 0 0 / .4);
  }
}
:root[data-theme="dark"] {
  --canvas: #191917;
  --canvas-raised: #1f1f1c;
  --surface: #252420;
  --surface-soft: #2f2d28;
  --ink: #f4f1ea;
  --ink-2: #d2ccc2;
  --ink-3: #a59f94;
  --line: #3f3c36;
  --line-strong: #6f685e;
  --red: #ef6e53;
  --red-deep: #f28a72;
  --red-soft: #4a2820;
  --ok: #7dc4a7;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .2), 0 14px 36px rgb(0 0 0 / .22);
  --shadow-2: 0 24px 70px rgb(0 0 0 / .4);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.shell { width: min(var(--shell), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Type */
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.display { font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; line-height: 1.02; font-variation-settings: "opsz" 72; }
h1.display { font-size: clamp(2.6rem, 6.4vw, 5.2rem); }
h2.display { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h3 { font-size: 1.15rem; letter-spacing: -.01em; }
p { margin: 0; }
.lede { max-width: 40ch; color: var(--ink-2); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.5; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--ink-3); font: 600 .72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--red); }
.section-head { display: grid; gap: 14px; max-width: 62ch; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head p { color: var(--ink-2); font-size: 1.05rem; max-width: 52ch; }
.mono { font-family: var(--mono); }
code, pre { font-family: var(--mono); font-size: .86rem; }
.actor { display: inline-block; padding: 3px 7px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--ink-2); font: 600 .66rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.actor.is-you { color: var(--ink); border-color: var(--ink); }
.actor.is-linnet { color: var(--red-deep); border-color: var(--red); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--ink); background: var(--ink); color: var(--canvas); font-weight: 700; text-decoration: none; cursor: pointer; transition: transform var(--fast) var(--ease), background var(--fast); }
.btn:hover { transform: translateY(-1px); }
.btn.is-secondary { background: transparent; color: var(--ink); }
.btn.is-secondary:hover { background: var(--surface); }
.btn.is-small { min-height: 36px; padding: 0 12px; font-size: .9rem; border-radius: 8px; }
.btn.is-ghost { border-color: var(--line); background: var(--surface); color: var(--ink); }
.text-link { color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--red); }
.text-link:hover { border-color: var(--ink); }

/* Header */
.site-head { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--canvas) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em; }
.brand img { width: 34px; height: 34px; }
.nav-links { display: flex; gap: 4px; margin-left: 8px; }
.nav-links a { padding: 8px 10px; border-radius: 8px; color: var(--ink-2); font-weight: 600; font-size: .95rem; text-decoration: none; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); background: var(--surface-soft); }
.nav-end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.theme-toggle { width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); cursor: pointer; display: grid; place-items: center; }
.theme-toggle svg { width: 16px; height: 16px; stroke: var(--ink); fill: none; stroke-width: 2; }
.nav-menu { display: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; }
.nav-menu span { display: block; width: 18px; height: 2px; margin: 3px auto; background: var(--ink); }
@media (max-width: 860px) {
  .nav-links { display: none; position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; padding: 10px var(--gutter) 16px; background: var(--canvas); border-bottom: 1px solid var(--line); }
  .nav.is-open .nav-links { display: flex; }
  .nav-menu { display: block; }
  .nav-end .btn.is-secondary { display: none; }
}

/* Sections */
section { padding-block: clamp(56px, 9vw, 120px); }
section + section { border-top: 1px solid var(--line); }

/* Hero */
.hero { padding-top: clamp(40px, 6vw, 80px); }
.hero-grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } .hero-copy { position: sticky; top: 96px; } }
.hero-copy { display: grid; gap: 22px; max-width: 46ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* Lens */
.lens { display: inline-flex; padding: 4px; gap: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.lens button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font-weight: 700; cursor: pointer; transition: background var(--fast), color var(--fast); }
.lens button[aria-selected="true"] { background: var(--ink); color: var(--canvas); }
.lens button:hover:not([aria-selected="true"]) { background: var(--surface-soft); color: var(--ink); }
.lens-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lens-row > span { color: var(--ink-3); font-size: .9rem; }
[data-lens="store"] [data-lens-only]:not([data-lens-only~="store"]),
[data-lens="saas"] [data-lens-only]:not([data-lens-only~="saas"]),
[data-lens="agency"] [data-lens-only]:not([data-lens-only~="agency"]) { display: none !important; }

/* Demo: mirrors the product's chat and assistant card */
.demo { position: relative; display: grid; gap: 14px; }
.demo-stage { position: relative; display: grid; gap: 14px; }
.demo-stage.has-code { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 760px) { .demo-stage.has-code { grid-template-columns: 1fr; } }
.chat { position: relative; display: flex; flex-direction: column; min-height: 520px; padding: 22px 22px 18px; background: var(--canvas-raised); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.chat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding-right: 96px; color: var(--ink-3); font-size: .8rem; }
.chat-top b { color: var(--ink); font-weight: 700; }
.chat-brand { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .8rem; color: var(--ink-2); }
.chat-brand i { width: 20px; height: 20px; border-radius: 50%; background: var(--red); display: grid; place-items: center; color: #fff; font: 700 .6rem var(--mono); font-style: normal; }
.chat-intro { text-align: center; margin: 8px 0 18px; }
.chat-intro img { width: 56px; height: 56px; margin: 0 auto 6px; }
.chat-intro h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.chat-intro p { margin-top: 6px; color: var(--ink-3); font-size: .9rem; }
.chat-feed { flex: 1; margin: 0; padding: 0; list-style: none; display: grid; align-content: start; gap: 14px; }
.turn { display: grid; }
.turn.is-user { justify-items: end; }
.bubble { max-width: 88%; padding: 10px 14px; border-radius: 12px; font-size: .95rem; white-space: pre-wrap; }
.turn.is-user .bubble { background: var(--ink); color: var(--canvas); }
.turn.is-linnet .bubble { padding-left: 0; color: var(--ink); }
.turn.is-linnet .bubble::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 2px 0; border-radius: 50%; background: var(--red); }
.assistant-card { position: relative; max-width: 560px; overflow: visible; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.assistant-card-head { display: flex; justify-content: space-between; gap: 10px; padding: 14px 16px 0; }
.assistant-card-head strong { font-size: .95rem; }
.assistant-card-head span { flex: none; color: var(--ink-3); font-size: .78rem; }
.assistant-card-preview { position: relative; margin: 12px 16px 0; padding: 18px; overflow: hidden; background: var(--canvas); border: 1px solid var(--line); border-radius: 8px; }
.email { --brand-accent: var(--red); --brand-font: var(--sans); --brand-radius: 6px; --brand-card-radius: 8px; --brand-ink: #1b1b19; --brand-surface: #ffffff; max-width: 300px; margin: 0 auto; padding: 18px 18px 14px; background: var(--brand-surface); color: var(--brand-ink); border-radius: var(--brand-card-radius); font-family: var(--brand-font); box-shadow: 0 2px 8px rgb(0 0 0 / .08); }
.email-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-weight: 800; font-size: .8rem; letter-spacing: -.01em; }
.email-brand img { max-height: 22px; max-width: 120px; width: auto; }
.email-brand i { width: 18px; height: 18px; border-radius: 4px; background: var(--brand-accent); }
.email h4 { margin: 0 0 6px; font-size: 1rem; line-height: 1.2; font-weight: 800; }
.email p { font-size: .72rem; line-height: 1.45; color: #4c4a45; }
.email .email-cta { display: inline-block; margin-top: 10px; padding: 7px 12px; background: var(--brand-accent); color: #fff; border-radius: var(--brand-radius); font-size: .7rem; font-weight: 700; }
.email .email-foot { margin-top: 14px; font-size: .62rem; color: #6f6b64; }
.email-pic { height: 64px; margin-bottom: 10px; border-radius: 4px; background: repeating-linear-gradient(135deg, var(--surface-soft) 0 6px, transparent 6px 12px); }
.assistant-card dl { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 10px; margin: 12px 16px 0; font-size: .84rem; }
.assistant-card dt { color: var(--ink-3); }
.assistant-card dd { margin: 0; }
.assistant-card-summary { margin: 8px 16px 0; color: var(--ink-2); font-size: .84rem; }
.assistant-card-steps { display: grid; gap: 4px; margin: 12px 16px 0; padding: 0; list-style: none; font-size: .84rem; }
.assistant-card-steps li { padding: 7px 10px; background: var(--canvas); border: 1px solid var(--line); border-radius: 7px; }
.assistant-card-steps li.is-trigger { color: var(--ink-2); background: transparent; border-style: dashed; }
.assistant-card-steps li.is-delay { padding: 2px 10px; color: var(--ink-3); background: transparent; border: 0; font-size: .78rem; }
.assistant-popup-mock { display: grid; gap: 6px; justify-items: center; margin: 12px 16px 0; padding: 22px 18px; text-align: center; background: var(--canvas); border: 1px solid var(--line); border-radius: 8px; }
.assistant-popup-mock small { color: var(--ink-3); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.assistant-popup-mock strong { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; line-height: 1.2; }
.assistant-popup-mock p { color: var(--ink-2); font-size: .84rem; }
.assistant-popup-mock span { margin-top: 4px; padding: 7px 16px; color: var(--canvas); background: var(--ink); border-radius: 999px; font-size: .78rem; font-weight: 600; }
.assistant-card-actions { display: flex; align-items: center; gap: 8px; padding: 14px 16px 16px; }
.assistant-card-actions .btn { pointer-events: none; }
.assistant-card-actions small { color: var(--ink-3); font-size: .78rem; }
.count { font-variant-numeric: tabular-nums; }

/* Assembly animation: parts arrive one at a time */
.assistant-card > * { opacity: 0; transform: translateY(6px); }
.assistant-card > .stamp, .assistant-card.is-built > .stamp { opacity: 0; transform: rotate(-9deg) scale(1.9); transition: none; }
.assistant-card.is-built > .stamp.is-on { opacity: 1; transform: rotate(-9deg) scale(1); transition: transform 220ms cubic-bezier(.2, 1.4, .4, 1), opacity 120ms; }
.assistant-card.is-built > *, .no-motion .assistant-card > * { opacity: 1; transform: none; transition: opacity var(--base) var(--ease), transform var(--base) var(--ease); }
.assistant-card.is-built > :nth-child(2) { transition-delay: 120ms; }
.assistant-card.is-built > :nth-child(3) { transition-delay: 260ms; }
.assistant-card.is-built > :nth-child(4) { transition-delay: 400ms; }
.assistant-card.is-built > :nth-child(5) { transition-delay: 520ms; }
.assistant-card.is-built > :nth-child(6) { transition-delay: 620ms; }
.say .assistant-card > * { opacity: 1; transform: none; }

/* Stamp */
.stamp { position: absolute; right: 14px; bottom: 54px; z-index: 2; padding: 6px 10px; border: 3px double var(--red-deep); border-radius: 6px; color: var(--red-deep); font: 800 .95rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; transform: rotate(-9deg) scale(1.9); opacity: 0; mix-blend-mode: multiply; pointer-events: none; }
:root[data-theme="dark"] .stamp, :root:not([data-theme="light"]) .stamp { mix-blend-mode: normal; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .stamp { mix-blend-mode: multiply; } }
.stamp.is-on { opacity: 1; transform: rotate(-9deg) scale(1); transition: transform 220ms cubic-bezier(.2, 1.4, .4, 1), opacity 120ms; }
.stamp small { display: block; margin-top: 3px; font: 600 .55rem/1 var(--mono); letter-spacing: .08em; color: var(--red-deep); }

/* Composer */
.chat-composer { margin-top: 14px; padding: 12px 14px 10px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 6px 24px rgb(31 33 31 / .06); }
.chat-composer textarea { display: block; width: 100%; min-height: 44px; padding: 4px 0; border: 0; background: transparent; resize: none; outline: none; font-size: 1rem; line-height: 1.4; }
.chat-composer textarea::placeholder { color: var(--ink-3); }
.chat-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; color: var(--ink-3); font-size: .75rem; }
.chat-send { width: 38px; height: 38px; padding: 0; color: var(--canvas); background: var(--ink); border: 0; border-radius: 10px; font-size: 18px; cursor: pointer; }
.chat-starters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chat-starters button { padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: .8rem; cursor: pointer; }
.chat-starters button:hover { border-color: var(--ink); color: var(--ink); }
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 1px; background: var(--ink); vertical-align: -2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Flight: the card's plane leaves along a line and lands on the sent chip */
.flight { position: relative; height: 84px; margin-top: 4px; }
.flight svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flight .plane-svg { z-index: 2; }
.flight .route { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 5 6; }
.flight .plane { fill: var(--red); opacity: 0; offset-path: path("M 40 12 C 200 -10, 420 70, 640 44 S 900 8, 1080 40"); offset-rotate: auto; offset-distance: 0%; }
.flight.is-flying .plane { opacity: 1; animation: fly var(--slow) var(--ease) forwards; }
@keyframes fly { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@supports not (offset-path: path("M0 0")) {
  .flight .plane { transform: translate(40px, 12px); }
  .flight.is-flying .plane { animation: fly-x var(--slow) var(--ease) forwards; }
  @keyframes fly-x { to { transform: translate(1080px, 40px); } }
}
.flight-labels { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.sent-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: 600 .78rem var(--mono); color: var(--ink-2); opacity: .45; transition: opacity var(--base), border-color var(--base); }
.sent-chip.is-on { opacity: 1; border-color: var(--ink); color: var(--ink); }
.sent-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); font-style: normal; }
.sent-chip.is-on i { background: var(--ok); }
.report-chip { opacity: 0; transform: translateY(4px); transition: opacity var(--base), transform var(--base); }
.report-chip.is-on { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .flight { height: auto; padding-top: 72px; }
  .flight > svg:not(.plane-svg) { height: 72px; bottom: auto; }
  .flight-labels { position: static; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
  .sent-chip { max-width: 100%; white-space: normal; }
}

/* Code pane (Product lens) */
.code-pane { display: flex; flex-direction: column; background: #1c1b19; color: #f0ece3; border-radius: var(--r-lg); border: 1px solid #2e2c28; overflow: hidden; }
:root[data-theme="dark"] .code-pane, :root:not([data-theme="light"]) .code-pane { border-color: var(--line-strong); }
.code-tabs { display: flex; gap: 2px; padding: 10px 12px 0; border-bottom: 1px solid #2e2c28; }
.code-tabs button { padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #a9a397; font: 600 .8rem var(--mono); cursor: pointer; }
.code-tabs button[aria-selected="true"] { color: #fff; border-bottom-color: var(--red); }
.code-pane pre { flex: 1; margin: 0; padding: 16px; overflow: auto; font-size: .8rem; line-height: 1.6; white-space: pre; }
.code-pane .k { color: #f0a48f; }
.code-pane .s { color: #d9d2c3; }
.code-pane .c { color: #8a8478; }
.code-note { padding: 12px 16px; border-top: 1px solid #2e2c28; color: #d9d2c3; font-size: .82rem; }
.code-note b { color: #fff; }

/* Brand magic */
.magic { display: grid; gap: 8px; padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface); }
.magic label { font-weight: 700; font-size: .9rem; }
.magic form { display: flex; gap: 8px; }
.magic input { flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--canvas-raised); }
.magic small { color: var(--ink-3); font-size: .78rem; }
.magic small.is-error { color: var(--red-deep); }
.magic small.is-ok { color: var(--ok); }
.demo-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink-3); font-size: .82rem; }
.replay { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink-2); font-size: .82rem; cursor: pointer; }

/* Birds: one character moment per viewport, one-shot motion when it enters view */
.bird { pointer-events: none; user-select: none; }
.bird img { width: 100%; height: auto; }
.bird[data-move] img { transition: transform var(--slow) var(--ease); }
.bird[data-move="stamp"].is-live img { animation: stamp-press 900ms var(--ease) 1; }
.bird[data-move="hop"].is-live img { animation: hop 800ms var(--ease) 1; }
.bird[data-move="tilt"].is-live img { animation: tilt 900ms var(--ease) 1; }
.bird[data-move="peek"].is-live img { animation: peek 900ms var(--ease) 1; }
.bird[data-move="shove"].is-live img { animation: shove 1100ms var(--ease) 1; }
@keyframes stamp-press { 0% { transform: translateY(-14px) rotate(-3deg); } 45% { transform: translateY(6px) rotate(1deg); } 60% { transform: translateY(2px); } 100% { transform: none; } }
@keyframes hop { 0% { transform: translateY(0); } 30% { transform: translateY(-16px) rotate(-2deg); } 60% { transform: translateY(0); } 78% { transform: translateY(-5px); } 100% { transform: none; } }
@keyframes tilt { 0% { transform: rotate(0); } 40% { transform: rotate(-7deg); } 70% { transform: rotate(3deg); } 100% { transform: none; } }
@keyframes peek { 0% { transform: translateX(40px); opacity: 0; } 60% { transform: translateX(-6px); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes shove { 0% { transform: translateX(-30px); } 50% { transform: translateX(8px) rotate(2deg); } 100% { transform: none; } }
.hero-bird { position: absolute; right: -8px; top: -58px; width: 96px; z-index: 3; }
@media (max-width: 760px) { .hero-bird { width: 64px; top: -40px; right: 0; } }

/* Section 2: what you can say */
.say-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }
.say-item { display: grid; align-content: start; gap: 12px; padding: 18px; background: var(--canvas-raised); border: 1px solid var(--line); border-radius: var(--r-lg); }
.say-item .bubble { justify-self: end; }
.say-item .assistant-card { max-width: none; }
.say-item h3 { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--ink-3); font-family: var(--mono); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

/* Section 3: flight log */
.flightlog { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-block: 8px 40px; }
.flightlog::before { content: ""; position: absolute; left: 4%; right: 4%; top: 15px; border-top: 1.5px dashed var(--line-strong); }
.flightlog li { position: relative; display: grid; gap: 8px; padding-top: 36px; list-style: none; }
.flightlog li::before { content: ""; position: absolute; left: 0; top: 9px; width: 14px; height: 14px; border-radius: 50%; background: var(--canvas); border: 2px solid var(--ink); }
.flightlog li.is-linnet::before { border-color: var(--red); background: var(--red); }
.flightlog li.is-world::before { border-color: var(--ok); background: var(--ok); }
.flightlog b { font-size: 1rem; }
.flightlog span { color: var(--ink-2); font-size: .88rem; }
.flightlog .actor { justify-self: start; }
.flightlog .plane-mark { position: absolute; top: -2px; left: -10px; width: 26px; height: 26px; fill: var(--red); transform: rotate(10deg); }
.flightlog.is-live .plane-mark { animation: skip 1600ms var(--ease) 1; }
@keyframes skip { 0% { transform: translateX(0) rotate(10deg); } 50% { transform: translateX(120px) translateY(-14px) rotate(-6deg); } 100% { transform: translateX(0) rotate(10deg); } }
@media (max-width: 860px) {
  .flightlog { grid-template-columns: 1fr; gap: 6px; padding-left: 26px; }
  .flightlog::before { left: 6px; right: auto; top: 10px; bottom: 10px; border-top: 0; border-left: 1.5px dashed var(--line-strong); }
  .flightlog li { padding: 6px 0 14px; }
  .flightlog li::before { left: -26px; top: 10px; }
  .flightlog .plane-mark { display: none; }
}
.trust-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fact { padding: 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--canvas-raised); display: grid; gap: 6px; }
.fact b { font-size: 1rem; }
.fact span { color: var(--ink-2); font-size: .92rem; }
.line-block { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 24px; align-items: center; margin-top: 40px; padding: clamp(20px, 3vw, 32px); border: 1.5px solid var(--ink); border-radius: var(--r-lg); background: var(--surface); }
.line-block h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.01em; }
.line-list { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.line-list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; color: var(--ink-2); font-size: .95rem; }
.line-list li::before { content: "✕"; color: var(--red); font-weight: 800; line-height: 1.5; }
.line-list li.is-yes::before { content: "✓"; color: var(--ok); }
.line-block .bird { width: 180px; justify-self: center; }
@media (max-width: 700px) { .line-block { grid-template-columns: 1fr; } .line-block .bird { width: 130px; } }

/* Section 4: made for you */
.aud-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.aud { display: grid; align-content: start; gap: 12px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--canvas-raised); text-decoration: none; color: inherit; transition: border-color var(--fast), transform var(--fast) var(--ease); }
.aud:hover { border-color: var(--ink); transform: translateY(-2px); }
.aud h3 { font-size: 1.35rem; }
.aud .who { color: var(--ink-3); font-size: .85rem; }
.aud ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; color: var(--ink-2); font-size: .93rem; }
.aud li::before { content: "·"; margin-right: 8px; color: var(--red); font-weight: 800; }
.aud .example { margin-top: 6px; padding: 10px 12px; border-left: 2px solid var(--red); background: var(--surface); color: var(--ink); font-size: .9rem; border-radius: 0 8px 8px 0; }
.aud .example small { display: block; margin-bottom: 3px; color: var(--ink-3); font: 600 .66rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.aud .go { margin-top: auto; font-weight: 700; }
.aud[data-active="true"] { border-color: var(--ink); box-shadow: var(--shadow-1); }

/* Section 5: developers */
.dev-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.dev-card { display: grid; align-content: start; gap: 10px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--canvas-raised); }
.dev-card pre { margin: 0; padding: 14px; overflow: auto; background: #1c1b19; color: #f0ece3; border-radius: 10px; font-size: .78rem; line-height: 1.6; }
.dev-card pre .k { color: #f0a48f; } .dev-card pre .c { color: #8a8478; } .dev-card pre .hl { background: rgb(227 93 66 / .22); outline: 1px solid rgb(227 93 66 / .6); border-radius: 3px; padding: 0 2px; }
.dev-card p { color: var(--ink-2); font-size: .92rem; }
.dev-wrap { position: relative; }
.dev-bird { position: absolute; right: -6px; top: -78px; width: 120px; }
@media (max-width: 760px) { .dev-bird { width: 80px; top: -56px; } }

/* Section 6: fair email and the contact bill */
.fair-grid { display: grid; gap: clamp(24px, 4vw, 48px); grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
@media (max-width: 860px) { .fair-grid { grid-template-columns: 1fr; } }
.principle { font-family: var(--serif); font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.1; letter-spacing: -.015em; }
.principle em { font-style: italic; color: var(--red-deep); }
.fair-copy { display: grid; gap: 18px; }
.fair-copy p { color: var(--ink-2); max-width: 46ch; }
.fair-bird { width: min(240px, 60%); margin-top: 8px; }
.bill { display: grid; gap: 14px; padding: 22px; border: 1.5px solid var(--ink); border-radius: var(--r-lg); background: var(--surface); }
.bill-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bill-head h3 { font-size: 1rem; }
.bill-head span { font: 600 .68rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.bill-fields { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .bill-fields { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field label { font-weight: 700; font-size: .85rem; }
.field input, .field select { width: 100%; min-width: 0; min-height: 42px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--canvas-raised); }
.field input[type="range"] { padding: 0; min-height: 0; accent-color: var(--red); background: transparent; border: 0; }
.bill-rows { display: grid; gap: 0; border-top: 1px solid var(--line); }
.bill-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.bill-row b { font-size: 1rem; }
.bill-row small { display: block; color: var(--ink-3); font-size: .78rem; }
.bill-row .amount { font: 700 1.35rem var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bill-row.is-linnet .amount { color: var(--ok); }
.bill-row.is-linnet b::after { content: " · contacts"; color: var(--ink-3); font-weight: 400; font-size: .85rem; }
.bill-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 4px; }
.bill-total b { font-size: 1rem; }
.bill-total .amount { font: 800 1.6rem var(--mono); color: var(--red-deep); font-variant-numeric: tabular-nums; }
.bill-note { color: var(--ink-3); font-size: .78rem; line-height: 1.5; }
.bill-note a { color: var(--ink-2); }
.placeholder { display: inline-block; padding: 2px 8px; border: 1px dashed var(--line-strong); border-radius: 6px; color: var(--ink-3); font: 600 .72rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* Section 7: start */
.start-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 860px) { .start-grid { grid-template-columns: 1fr; } }
.steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--canvas-raised); counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); font: 600 .8rem/1.6 var(--mono); color: var(--red-deep); }
.steps b { display: block; }
.steps span { color: var(--ink-2); font-size: .92rem; }
.start-bird { width: min(300px, 70%); margin-inline: auto; }

/* Audience pages */
.page-hero { padding-top: clamp(40px, 6vw, 80px); }
.page-hero .hero-copy { max-width: 56ch; }
.jobs { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.job { display: grid; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--canvas-raised); }
.job b { font-size: 1rem; }
.job span { color: var(--ink-2); font-size: .92rem; }
.job .you-said { margin-top: 4px; padding: 8px 12px; background: var(--ink); color: var(--canvas); border-radius: 10px; font-size: .86rem; justify-self: start; }
.compare { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.compare div { display: grid; grid-template-columns: 1fr 1fr; }
.compare div + div { border-top: 1px solid var(--line); }
.compare div > * { padding: 12px 14px; font-size: .92rem; }
.compare div > :first-child { color: var(--ink-2); background: var(--canvas-raised); border-right: 1px solid var(--line); }
.compare div.is-head > * { font: 600 .68rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 520px) { .compare div { grid-template-columns: 1fr; } .compare div > :first-child { border-right: 0; border-bottom: 1px dashed var(--line); } }

/* Footer */
footer { padding: 40px 0 48px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: .88rem; }
.foot { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: space-between; }
.foot nav { display: flex; flex-wrap: wrap; gap: 16px; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* Reveal on scroll (opacity and transform only) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .assistant-card > * { opacity: 1; transform: none; transition: none; }
  .stamp { transition: none; }
  .caret { animation: none; }
  .bird[data-move].is-live img, .flightlog.is-live .plane-mark, .flight.is-flying .plane { animation: none; }
  .flight.is-flying .plane { opacity: 1; offset-distance: 100%; }
  .btn, .lens button, .aud { transition: none; }
}
.no-motion .reveal { opacity: 1; transform: none; }

/* Count card, as in the product */
.assistant-count { display: inline-block; margin-top: 8px; padding: 8px 12px; background: var(--canvas); border: 1px solid var(--line); border-radius: 8px; font-size: .84rem; }
.assistant-count b { margin-right: 6px; font-size: 1rem; }
.say-item .assistant-count { display: block; }
.lens-note { color: var(--ink-3); font-size: .85rem; }
/* Hero magic field */
.magic.is-hero { padding: 16px 18px; border: 1.5px solid var(--ink); background: var(--surface); box-shadow: var(--shadow-1); }
.magic.is-hero input { min-height: 46px; font-size: 1rem; }
.magic.is-hero .btn { min-height: 46px; white-space: nowrap; }
@media (max-width: 480px) { .magic form { flex-direction: column; } .magic .btn { width: 100%; } .box-foot small { display: none; } .box-foot { justify-content: flex-end; } }
.lens button { font-size: .95rem; }
.lens-row > span { color: var(--ink); font-weight: 700; font-size: 1rem; }
.hero .lens-row { margin-bottom: 4px; }

/* ===== v3.1: one box, three outputs ===== */
.hero-one { display: grid; gap: 22px; max-width: 880px; margin-inline: auto; text-align: center; }
.hero-one h1.display { font-size: clamp(2.4rem, 5.6vw, 4.2rem); text-wrap: balance; }
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; color: var(--ink-2); font-size: .95rem; }
.facts span::before { content: "✓"; margin-right: 6px; color: var(--red-deep); font-weight: 800; }
.box { position: relative; text-align: left; padding: 14px 14px 12px; background: var(--surface); border: 1.5px solid var(--ink); border-radius: 16px; box-shadow: var(--shadow-1); }
.box textarea { display: block; width: 100%; min-height: 58px; padding: 6px 4px; border: 0; background: transparent; resize: none; outline: none; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.4; }
.box textarea::placeholder { color: var(--ink-3); }
.box-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.box-foot small { color: var(--ink-3); font-size: .78rem; }
.box-go { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--ink); color: var(--canvas); font-weight: 700; cursor: pointer; }
.box-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
.box-row .lens-row > span { font-size: .9rem; }
.mode-link { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: 600 .85rem var(--mono); cursor: pointer; }
.mode-link[aria-pressed="true"] { background: #1c1b19; color: #f0ece3; border-color: #1c1b19; }
.chat-starters { justify-content: center; margin-top: 0; }
.chat-starters button { font-size: .82rem; }

/* Stage */
.stage { position: relative; max-width: 1080px; margin: 8px auto 0; text-align: left; }
.stage > [data-mode] { display: none; }
.stage[data-show="chat"] > [data-mode="chat"], .stage[data-show="kit"] > [data-mode="kit"], .stage[data-show="code"] > [data-mode="code"] { display: block; }
.stage .chat { min-height: 380px; }
.stage-grid { display: grid; gap: 14px; }
@media (min-width: 900px) { .stage-grid.is-split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }

/* Kit: the visitor's website as a full-size email */
.kit { display: grid; gap: 14px; }
@media (min-width: 900px) { .kit { grid-template-columns: 300px minmax(0, 1fr); align-items: start; } }
.kit-side { display: grid; gap: 12px; padding: 16px; background: var(--canvas-raised); border: 1px solid var(--line); border-radius: var(--r-lg); }
.kit-side h3 { font: 600 .68rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.kit-status { font-weight: 700; font-size: .95rem; }
.kit-source { font: 600 .68rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--red-deep); }
.kit-swatches { display: flex; gap: 6px; }
.kit-swatches i { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgb(0 0 0 / .12); }
.kit-side ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; color: var(--ink-2); font-size: .86rem; }
.kit-side pre { margin: 0; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-size: .72rem; line-height: 1.5; color: var(--ink-2); overflow: auto; }
.kit-types { display: flex; flex-wrap: wrap; gap: 6px; }
.kit-types button { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: .8rem; cursor: pointer; }
.kit-types button[aria-pressed="true"] { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.kit-next { display: grid; gap: 6px; padding-top: 6px; border-top: 1px dashed var(--line-strong); }
.kit-next b { font-size: .9rem; }
.kit-next button { text-align: left; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: .84rem; cursor: pointer; }
.kit-next button:hover { border-color: var(--ink); }
.kit-canvas { --k-accent: #e35d42; --k-action: #1b1b19; --k-canvas: #f6f4ef; --k-surface: #ffffff; --k-ink: #1b1b19; --k-muted: #6a6760; --k-line: #ddd8ce; --k-radius: 12px; --k-button-radius: 8px; --k-mark-radius: 8px; --k-border-width: 1px; --k-border-style: solid; --k-top-width: 5px; --k-top-color: var(--k-accent); --k-button-shadow: none; --k-shadow: 0 18px 44px rgb(27 27 25 / .12); --k-font: Arial, sans-serif; padding: 22px; background: var(--k-canvas); border: 1px solid var(--line); border-radius: var(--r-lg); }
.kit-inbox { display: grid; grid-template-columns: 64px 1fr; gap: 6px 12px; margin: 0 auto 16px; max-width: 560px; font-size: .84rem; color: var(--k-muted); }
.kit-inbox strong { color: var(--k-ink); font-weight: 600; }
.kit-paper { max-width: 560px; margin: 0 auto; background: var(--k-surface); color: var(--k-ink); border: var(--k-border-width) var(--k-border-style) var(--k-line); border-radius: var(--k-radius); box-shadow: var(--k-shadow); overflow: hidden; font-family: var(--k-font); }
.kit-top { height: var(--k-top-width); background: var(--k-top-color); }
.kit-head { display: flex; align-items: center; gap: 10px; padding: 18px 26px; background: var(--k-action); color: #fff; }
.kit-head img { max-height: 28px; max-width: 150px; width: auto; }
.kit-head i { width: 28px; height: 28px; border-radius: var(--k-mark-radius); background: var(--k-accent); display: grid; place-items: center; font: 800 .8rem var(--k-font); font-style: normal; color: #fff; }
.kit-head strong { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.kit-body { padding: 26px 26px 22px; }
.kit-overline { margin: 0 0 8px; color: var(--k-accent); font: 700 .68rem var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.kit-body h3 { margin: 0 0 10px; font-family: var(--k-font); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.kit-body p { margin: 0 0 16px; color: var(--k-muted); font-size: .95rem; line-height: 1.5; }
.kit-cta { display: inline-block; padding: 12px 20px; background: var(--k-action); color: #fff; border-radius: var(--k-button-radius); box-shadow: var(--k-button-shadow); font-weight: 700; font-size: .92rem; text-decoration: none; }
.kit-lines { display: grid; gap: 8px; margin-top: 18px; }
.kit-line { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px 0; border-top: 1px solid var(--k-line); font-size: .86rem; }
.kit-line span:last-child { font-weight: 600; }
.kit-note { margin-top: 18px; padding: 12px 14px; border: var(--k-border-width) var(--k-border-style) var(--k-line); border-radius: var(--k-button-radius); font-size: .78rem; color: var(--k-muted); }
.kit-note b { display: block; margin-bottom: 2px; color: var(--k-ink); font: 700 .66rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.kit-foot { padding: 14px 26px 18px; color: var(--k-muted); font-size: .7rem; }
.kit-foot a { color: inherit; }
.kit .stamp { position: static; display: inline-block; margin: 0; transform: rotate(-4deg); opacity: 1; }

/* Terminal: the developer's wow */
.term { background: #1c1b19; color: #f0ece3; border: 1px solid #2e2c28; border-radius: var(--r-lg); overflow: hidden; }
.term-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #2e2c28; }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3b3934; }
.term-bar .term-tabs { margin-left: 10px; display: flex; gap: 2px; }
.term-bar button { padding: 6px 10px; border: 0; border-radius: 6px; background: transparent; color: #a9a397; font: 600 .78rem var(--mono); cursor: pointer; }
.term-bar button[aria-selected="true"] { background: #2e2c28; color: #fff; }
.term pre { margin: 0; min-height: 250px; padding: 16px 18px; overflow: auto; font-size: .82rem; line-height: 1.65; white-space: pre-wrap; }
.term .p { color: #8a8478; } .term .ok { color: #7dc4a7; } .term .k { color: #f0a48f; } .term .u { color: #fff; font-weight: 700; } .term .d { color: #d9d2c3; }
.term-note { padding: 12px 18px; border-top: 1px solid #2e2c28; color: #d9d2c3; font-size: .84rem; }
.term-note b { color: #fff; }
.code-card { padding: 16px; background: var(--canvas-raised); border: 1px solid var(--line); border-radius: var(--r-lg); }
.code-card .assistant-card { max-width: none; }
.code-card > p { margin-bottom: 10px; color: var(--ink-2); font-size: .88rem; }

/* Who it's for */
.who-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.who { display: grid; align-content: start; gap: 10px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--canvas-raised); }
.who[data-active="true"] { border-color: var(--ink); box-shadow: var(--shadow-1); }
.who h3 { font-size: 1.3rem; }
.who .whom { color: var(--ink-3); font-size: .85rem; }
.who ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; color: var(--ink-2); font-size: .92rem; }
.who li::before { content: "·"; margin-right: 8px; color: var(--red); font-weight: 800; }
.who button { margin-top: 6px; text-align: left; padding: 10px 12px; border: 0; border-left: 2px solid var(--red); border-radius: 0 8px 8px 0; background: var(--surface); color: var(--ink); font-size: .9rem; cursor: pointer; }
.who button:hover { background: var(--surface-soft); }
.who button small { display: block; margin-bottom: 3px; color: var(--ink-3); font: 600 .66rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.who-bird { width: 110px; margin: -60px 0 0 auto; }
.section-tight { padding-block: clamp(44px, 7vw, 88px); }

/* Kit templates, richer */
.hint-link { padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; text-decoration: underline; cursor: pointer; }
.kit-hero { margin: 0; background: var(--k-canvas); }
.kit-hero img { width: 100%; height: 260px; object-fit: cover; display: block; }
.kit-hero.is-product { background: var(--k-surface); }
.kit-hero.is-product img { height: 300px; object-fit: contain; padding: 16px 0 0; }
.kit-steps { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: ks; }
.kit-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border: var(--k-border-width, 1px) var(--k-border-style, solid) var(--k-line); border-radius: var(--k-button-radius); font-size: .9rem; counter-increment: ks; }
.kit-steps li::before { content: counter(ks); width: 26px; height: 26px; border-radius: var(--k-mark-radius); background: var(--k-accent); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .78rem; }
.kit-line { grid-template-columns: auto 1fr auto; align-items: center; }
.kit-line img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; grid-row: span 1; }
.kit-line.is-head span:first-child { font-weight: 700; }
.kit-line.is-total { border-top: 2px solid var(--k-ink); font-weight: 700; }
.kit-line:not(:has(img)) { grid-template-columns: 1fr auto; }
.kit-address { margin: 12px 0 0; color: var(--k-muted); font-size: .84rem; }
.kit-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.kit-tile { border: var(--k-border-width, 1px) var(--k-border-style, solid) var(--k-line); border-radius: var(--k-button-radius); overflow: hidden; background: var(--k-surface); }
.kit-tile img, .kit-tile-ph { width: 100%; height: 150px; object-fit: cover; display: block; background: var(--k-canvas); }
.kit-tile-ph img { height: 150px; }
.kit-tile b { display: block; padding: 10px 12px 0; font-size: .86rem; }
.kit-tile span { display: block; padding: 2px 12px 12px; color: var(--k-accent); font-size: .8rem; font-weight: 700; }
.kit-foot { line-height: 1.6; }
.email-pic.has-img { background: none; height: auto; }
.email-pic.has-img img { width: 100%; height: 110px; object-fit: cover; border-radius: 4px; display: block; }
@media (max-width: 480px) { .kit-tiles { grid-template-columns: 1fr; } .kit-hero img { height: 180px; } }

/* Kit refinements */
.kit-canvas.is-light-head .kit-head { background: var(--k-surface); color: var(--k-ink); border-bottom: 1px solid var(--k-line); }
.kit-canvas.is-light-head .kit-head i { color: #fff; }
.kit-tile, .kit-tile-ph { border-radius: min(var(--k-radius, 12px), 14px); }
.kit-steps li { border-radius: min(var(--k-button-radius, 8px), 14px); }
.kit-note { border-radius: min(var(--k-button-radius, 8px), 12px); }
.kit-paper { border-radius: min(var(--k-radius, 12px), 22px); }
@media (max-width: 899px) { .kit-canvas { order: -1; } }

.dev-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-top: 18px; padding: 20px 22px; background: #1c1b19; color: #f0ece3; border-radius: var(--r-lg); }
.dev-band h3 { color: #fff; font-size: 1.2rem; }
.dev-band p { margin-top: 6px; color: #d9d2c3; font-size: .92rem; max-width: 70ch; }
.dev-band .btn { background: #f0ece3; color: #1c1b19; border-color: #f0ece3; }
@media (max-width: 700px) { .dev-band { grid-template-columns: 1fr; } }
.facts { font-size: .9rem; }
.lens { flex-wrap: wrap; justify-content: center; max-width: 100%; }
.hero-one, .hero-one > * { min-width: 0; max-width: 100%; }
.lens-row { max-width: 100%; }

/* Mascot moments: one per viewport, each tied to a product state */
.who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .who-grid { grid-template-columns: 1fr; } }
.who { position: relative; }
.who-head { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 12px; align-items: start; }
.who-head .whom { margin-top: 6px; }
.who-card-bird { width: 88px; margin: -6px 0 0; justify-self: end; }
.who-card-bird img { transform-origin: 50% 100%; }

@media (max-width: 640px) { .who-head { grid-template-columns: minmax(0, 1fr) 64px; } .who-card-bird { width: 64px; } }
.dev-band { position: relative; }
.dev-band-bird { position: absolute; right: 120px; bottom: -22px; width: 84px; }
@media (max-width: 700px) { .dev-band-bird { display: none; } }
.stage-bird { position: absolute; right: -8px; top: -70px; width: 108px; z-index: 3; }
.stage-bird img { transform-origin: 50% 100%; }
@media (max-width: 760px) { .stage-bird { width: 72px; top: -48px; right: 0; } }
.stage > [data-mode] { position: relative; }
.log-bird { position: absolute; right: -8px; top: -14px; width: 74px; }
@media (max-width: 860px) { .log-bird { right: 0; top: 0; width: 56px; } }
.badge-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1.5px solid var(--red-deep); border-radius: 999px; color: var(--red-deep); font: 700 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: scale(.8); transition: opacity var(--base), transform var(--base) var(--ease); }
.badge-chip svg { width: 14px; height: 14px; fill: var(--red-deep); }
.badge-chip.is-on { opacity: 1; transform: none; }
.flight-labels { gap: 8px; }
.foot-brand { display: inline-flex; align-items: center; gap: 10px; }
.foot-bird { width: 44px; height: 44px; }
.bird[data-move="wave"].is-live img { animation: wave 900ms var(--ease) 1; }
@keyframes wave { 0% { transform: rotate(0); } 30% { transform: rotate(-6deg) translateY(-4px); } 60% { transform: rotate(4deg); } 100% { transform: none; } }
.flight .badge-chip svg { position: static; inset: auto; width: 14px; height: 14px; }

/* Breadth in one row */
.pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 18px; }
.pills-label { width: 100%; margin-bottom: 4px; color: var(--ink-3); font: 600 .68rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.pills > span:not(.pills-label) { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: .82rem; }
/* Why strip */
.why-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: why; }
.why-list li { display: grid; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--canvas-raised); counter-increment: why; }
.why-list li::before { content: counter(why, decimal-leading-zero); color: var(--red-deep); font: 600 .8rem var(--mono); }
.why-list b { font-size: 1.05rem; }
.why-list span { color: var(--ink-2); font-size: .92rem; }
/* Checks on every card */
.card-checks { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 10px 16px 0; padding: 0; list-style: none; color: var(--ok); font-size: .74rem; }
.card-checks li::before { content: "✓ "; font-weight: 800; }
.assistant-card > .stamp, .assistant-card.is-built > .stamp { bottom: 14px; right: 14px; }
.assistant-card-actions { padding-right: 200px; min-height: 66px; }
@media (max-width: 480px) { .assistant-card-actions { padding-right: 16px; padding-bottom: 60px; } .assistant-card > .stamp, .assistant-card.is-built > .stamp { bottom: 10px; } }

/* Hands-on: the card's facts change on click, the approve button is real, the kit's words are editable */
.assistant-card dd.is-cycle, .assistant-card-steps li.is-cycle { cursor: pointer; border-bottom: 1px dashed var(--line-strong); }
.assistant-card dd.is-cycle { display: inline-block; }
.assistant-card dd.is-cycle::after, .assistant-card-steps li.is-cycle::after { content: " ⇅"; color: var(--ink-3); font-size: .75em; }
.assistant-card dd.did-change, .assistant-card-steps li.did-change { animation: nudge 300ms var(--ease) 1; }
@keyframes nudge { 0% { transform: translateX(0); } 50% { transform: translateX(3px); } 100% { transform: none; } }
.assistant-card-actions .btn { pointer-events: auto; cursor: pointer; border: 0; }
.assistant-card-actions .btn.is-waiting { animation: pulse 1.2s var(--ease) infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(227 93 66 / .45); } 50% { box-shadow: 0 0 0 8px rgb(227 93 66 / 0); } }
.assistant-card-actions .btn:disabled { cursor: default; }
#kit-heading[contenteditable], #kit-text[contenteditable] { outline: none; border-bottom: 1px dashed transparent; transition: border-color var(--fast); }
#kit-heading[contenteditable]:hover, #kit-text[contenteditable]:hover, #kit-heading[contenteditable]:focus, #kit-text[contenteditable]:focus { border-bottom-color: var(--k-accent); }
.kit-edit-hint { color: var(--ink-3); font-size: .78rem; }
@media (prefers-reduced-motion: reduce) { .assistant-card-actions .btn.is-waiting, .did-change { animation: none; } }
.assistant-card dd.is-cycle { display: inline-block; width: max-content; max-width: 100%; justify-self: start; }

/* Narrow widths: chips as a clean grid, buttons never break */
.btn, .box-go, .chat-send, .mode-link, .lens button { white-space: nowrap; }
.assistant-card-actions .btn { white-space: nowrap; }
@media (max-width: 900px) {
  .lens { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; border-radius: 16px; width: 100%; }
  .lens button { border-radius: 10px; min-height: 42px; padding: 0 10px; font-size: .92rem; }
  .lens-row { display: grid; gap: 8px; width: 100%; }
  .lens-row > span { text-align: left; }
  .box-row { flex-direction: column; align-items: stretch; }
  .mode-link { width: 100%; text-align: center; }
  .chat-starters { justify-content: flex-start; }
  .chat-starters button { flex: 1 1 calc(50% - 6px); text-align: center; }
}
@media (max-width: 560px) {
  .box-foot { flex-direction: column; align-items: stretch; gap: 8px; }
  .box-foot small { display: block; }
  .box-go { width: 100%; min-height: 46px; }
  .assistant-card-actions { flex-direction: column; align-items: flex-start; gap: 6px; }
}
.who ul { font-size: .95rem; }
.why-list span { font-size: .95rem; }
/* Hero: keep the demo on the first screen */
.hero { padding-top: clamp(28px, 4vw, 48px); }
.hero-one { gap: 14px; }
.hero-one h1.display { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.facts { gap: 6px 14px; font-size: .86rem; }
.box-row { gap: 8px 12px; }
.chat-starters { margin-top: 2px; }
@media (max-width: 560px) {
  .facts { display: none; }
  .hero-one h1.display { font-size: 2rem; }
  .lens button { min-height: 40px; font-size: .88rem; font-weight: 600; }
  .lens-row > span { font-size: .85rem; }
  .chat-starters button { flex: 1 1 100%; padding: 8px 12px; }
  .stage .chat { padding: 16px 12px 14px; min-height: 0; }
  .demo-foot { flex-direction: column; align-items: flex-start; }
}
/* Phone header and chat chip */
@media (max-width: 560px) {
  .nav { gap: 8px; }
  .nav-end .btn:not(.is-secondary) { display: none; }
  .brand { font-size: 1.05rem; }
  .chat-top { flex-direction: column; align-items: flex-start; gap: 6px; padding-right: 72px; }
  .chat-brand { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .chat-top b { font-size: .8rem; }
  .chat-starters button { flex: 1 1 calc(50% - 6px); }
}
.chat-top { min-width: 0; }
.chat-brand { min-width: 0; }
/* Phone: the box is a message field. Arrow button beside the text, hint below. */
@media (max-width: 560px) {
  .box { padding: 10px 10px 8px 12px; }
  .box-foot { display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "hint go"; align-items: end; gap: 8px; }
  .box-foot small { grid-area: hint; display: block; font-size: .74rem; line-height: 1.35; }
  .box-go { grid-area: go; width: 44px; min-height: 44px; padding: 0; border-radius: 12px; justify-content: center; font-size: 0; }
  .box-go::after { content: "→"; font-size: 1.25rem; }
}
/* Mascot scale: three sizes only. S = a corner companion, M = a card's bird, L = a section's scene. */
:root { --bird-s: 84px; --bird-m: 120px; --bird-l: 220px; }
@media (max-width: 700px) { :root { --bird-s: 64px; --bird-m: 88px; --bird-l: 150px; } }
.bird img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.hero-bird, .stage-bird, .dev-band-bird, .log-bird, .who-card-bird { width: var(--bird-s); }
.hero-bird { top: calc(var(--bird-s) * -0.62); }
.stage-bird { top: calc(var(--bird-s) * -0.66); }
.log-bird { top: calc(var(--bird-s) * -0.35); }
.who-card-bird { width: var(--bird-m); margin-top: -10px; }
.who-head { grid-template-columns: minmax(0, 1fr) var(--bird-m); }
.line-block .bird, .fair-bird, .start-bird { width: var(--bird-l); max-width: 60%; margin-inline: auto; }
.line-block { grid-template-columns: minmax(0, 1fr) var(--bird-l); }
@media (max-width: 700px) { .line-block { grid-template-columns: 1fr; } .who-head { grid-template-columns: minmax(0, 1fr) var(--bird-m); } }
.foot-bird { width: 40px; height: 40px; }
.line-block .bird { max-width: none; }
.who[data-active="true"] .who-card-bird { width: var(--bird-m); }