/* it. marketing site.
   The page chrome stays in the It app's palette: near-black, white ink, neutral
   greys, and one chroma. Green means a live connection or an answer on its way
   back to the agent, and nothing else. Every other colour on the page lives
   inside an interface an agent built. */

@font-face { font-family: "It Display"; font-weight: 600; font-display: swap; src: url(/fonts/display-600.woff2) format("woff2"); }
@font-face { font-family: "It Display"; font-weight: 700; font-display: swap; src: url(/fonts/display-700.woff2) format("woff2"); }
@font-face { font-family: "It Text"; font-weight: 400; font-display: swap; src: url(/fonts/text-400.woff2) format("woff2"); }
@font-face { font-family: "It Text"; font-weight: 500; font-display: swap; src: url(/fonts/text-500.woff2) format("woff2"); }
@font-face { font-family: "It Text"; font-weight: 600; font-display: swap; src: url(/fonts/text-600.woff2) format("woff2"); }
@font-face { font-family: "It Mono"; font-weight: 200 800; font-display: swap; src: url(/fonts/mono-var.woff2) format("woff2"); }

:root {
  --bg: #0a0a0a;
  --fg: #ffffff;
  --interactive: #121212;
  --fg-muted: rgba(255, 255, 255, 0.64);
  --fg-faint: rgba(255, 255, 255, 0.42);
  --fg-ghost: rgba(255, 255, 255, 0.26);
  --panel: rgba(255, 255, 255, 0.04);
  --panel-2: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.20);
  --ok: #34d399;
  --ok-soft: rgba(52, 211, 153, 0.14);
  --ok-line: rgba(52, 211, 153, 0.45);
  --bad: #ff5f5c;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 40px -18px rgba(0, 0, 0, 0.8);
  --shadow-pop: 0 50px 100px -40px rgba(0, 0, 0, 0.95);
  --display: "It Display", "Inter Display", Inter, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --text: "It Text", Inter, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "It Mono", "Ubuntu Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --gut: clamp(20px, 4vw, 72px);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); scroll-padding-top: 64px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--text); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv05", "ss01"; overflow-x: clip; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
ol { list-style: none; }
.tnum { font-variant-numeric: tabular-nums; }
.g { color: var(--ok); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--fg); color: #000; padding: 10px 14px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--ok); outline-offset: 3px; }
.wide { width: 100%; max-width: 1880px; margin: 0 auto; padding: 0 var(--gut); }

/* ── Wordmark and the green dot ───────────────────────────────────────── */
.wordmark { font-family: var(--display); font-weight: 700; letter-spacing: -0.05em; line-height: 1; white-space: nowrap; text-decoration: none; color: var(--fg); }
.wordmark .dot { display: inline-block; position: relative; width: 0.2em; height: 0.2em; margin-left: 0.045em; border-radius: 50%; background: var(--ok); }
.wm { font-family: var(--display); font-weight: 700; letter-spacing: -0.045em; color: #0b0c0e; }
.wm i { display: inline-block; width: 0.22em; height: 0.22em; border-radius: 50%; background: #10b981; margin-left: 0.05em; }
/* An answer reaching an agent: a round pulse out of the dot. It is a scaled copy of the dot, because a shadow spread this far past so small a circle comes out square. */
.wordmark .dot::after, .hdot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ok); opacity: 0; pointer-events: none; }
.dot.ping::after, .hdot.ping::before { animation: pulse 900ms var(--ease-out); }
@keyframes pulse { 0% { opacity: 0.55; transform: scale(1); } 100% { opacity: 0; transform: scale(var(--pulse, 7)); } }

/* ── Type ─────────────────────────────────────────────────────────────── */
.h2 { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 3.6vw, 60px); line-height: 1.04; letter-spacing: -0.04em; text-wrap: balance; }
.lede { font-size: clamp(17px, 1.45vw, 23px); line-height: 1.5; color: var(--fg-muted); text-wrap: pretty; }
.fine { margin-top: 32px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: var(--fg-ghost); }

.sec { position: relative; padding: clamp(110px, 14vw, 220px) 0 0; }
.shead { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 110px); align-items: end; margin-bottom: clamp(48px, 6vw, 96px); }
.shead .lede { padding-bottom: 0.4em; max-width: 36em; }

/* Split headlines: each word rises out of its own mask. */
.split .sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split .si { display: inline-block; }
.js .split .si { transform: translateY(105%); transition: transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 45ms); }
.js .split.in .si { transform: none; }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }

/* ── Buttons and pills ────────────────────────────────────────────────── */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--fg); color: #0a0a0a; font-weight: 600; font-size: 16px; letter-spacing: -0.005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 300ms var(--ease-out), background 160ms; }
.btn:hover { background: #e8e8e8; }
.btn:active { scale: 0.97; }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14.5px; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 15px; font-weight: 500; white-space: nowrap; }
.pill.danger { background: rgba(255, 95, 92, 0.12); color: #ff8a88; box-shadow: inset 0 0 0 1px rgba(255, 95, 92, 0.4); }
.pill i.d { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; color: var(--fg-muted); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.chip.ok { color: var(--ok); background: var(--ok-soft); box-shadow: inset 0 0 0 1px var(--ok-line); }

/* ── Nav ──────────────────────────────────────────────────────────────── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background 300ms, box-shadow 300ms; }
.nav.solid { background: rgba(10, 10, 10, 0.9); box-shadow: 0 1px 0 var(--line); }
.nav-in { height: 64px; display: flex; align-items: center; gap: 32px; padding: 0 var(--gut); max-width: 1880px; margin: 0 auto; }
.nav-mark { font-size: 30px; }
.nav-links { display: flex; gap: 28px; margin-left: auto; font-size: 14.5px; }
.nav-links a { color: var(--fg-muted); text-decoration: none; transition: color 160ms; }
.nav-links a:hover { color: var(--fg); }
.nav-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ok); transform-origin: 0 50%; transform: scaleX(0); opacity: 0.7; }

/* ── Devices ──────────────────────────────────────────────────────────── */
.dev { position: absolute; }
.phone { border-radius: 46px; background: #050505; box-shadow: 0 0 0 2px #2b2b2b, 0 0 0 7px #0d0d0d, 0 0 0 8px #272727, var(--shadow-pop); }
.phone > .scr { position: absolute; inset: 9px; border-radius: 38px; overflow: hidden; }
.phone .notch { position: absolute; top: 18px; left: 50%; width: 84px; height: 24px; margin-left: -42px; border-radius: 14px; background: #000; z-index: 5; }

/* Screen canvases render at a fixed size and are scaled to the device. */

/* ── Terminal ─────────────────────────────────────────────────────────── */
.term { background: #0c0c0c; border-radius: 16px; box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line); overflow: hidden; font-family: var(--mono); transition: box-shadow 500ms, filter 600ms, opacity 600ms; }
.term .tb { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--fg-faint); }
.term .tb i { width: 10px; height: 10px; border-radius: 50%; background: #2c2c2c; }
.term .tb span { margin-left: 8px; }
.tb-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--ok); font-size: 12px; }
.tb-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18); }
.term.off .tb-live { color: var(--fg-ghost); }
.term.off .tb-live::before { box-shadow: none; }
.term-body { padding: 16px 18px; }
.ln { display: grid; grid-template-columns: 58px 1fr; font-size: 14.5px; line-height: 1.55; color: var(--fg-muted); }
.ln + .ln { margin-top: 9px; }
.ln .who { color: var(--fg-ghost); }
.ln.you { color: var(--fg); }
.ln.back { color: var(--ok); }
.ln.back b { font-weight: 700; }
.ln.ok { color: var(--fg-ghost); }
.ln.sys { color: var(--fg-faint); font-style: italic; }
.ln.wake { color: var(--ok); }
@keyframes lnIn { from { opacity: 0; transform: translateY(8px); } }
.term.hot { box-shadow: var(--shadow-card), inset 0 0 0 1px var(--ok-line), 0 0 60px -10px rgba(52, 211, 153, 0.35); }
.term.off { filter: grayscale(1) brightness(0.55); }

/* ── Cards agents build (white surfaces) ──────────────────────────────── */
.icard { position: relative; background: #fff; color: #0b0c0e; border-radius: 18px; padding: 14px 14px 13px; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.05); }
.ic-from { font-size: 11px; color: #6b6b70; display: flex; align-items: center; gap: 5px; }
.ic-from .wm { font-size: 13px; }
.ic-q { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.022em; margin-top: 8px; line-height: 1.12; }
.ic-d { font-size: 12px; color: #55555a; margin-top: 6px; line-height: 1.4; }
.ic-btns { display: flex; gap: 6px; margin-top: 12px; }
.ic-b { flex: 1; height: 36px; border-radius: 11px; background: #efeff1; display: grid; place-items: center; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: transform 160ms, background 200ms, color 200ms; user-select: none; }
.ic-b.pri { background: #0b0c0e; color: #fff; }
.ic-b.hit { transform: scale(0.95); }
.ic-b.chosen { background: #067647; color: #fff; }
.ic-st { height: 0; overflow: hidden; margin-top: 0; border-radius: 10px; background: #dcfae6; color: #067647; font-size: 12px; font-weight: 600; display: grid; place-items: center; transition: height 350ms var(--ease-out), margin 350ms var(--ease-out); }
.ic-st.show { height: 30px; margin-top: 10px; }
.ic-st.dark { background: #0b0c0e; color: #fff; }
.ripple { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; border: 2px solid var(--ok); opacity: 0; pointer-events: none; z-index: 6; }
.ripple.go { animation: ripple 900ms var(--ease-out); }
@keyframes ripple { 0% { opacity: 0.95; transform: scale(1); } 100% { opacity: 0; transform: scale(3.6); } }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: 88px 0 40px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(28px, 4.5vw, 88px); align-items: center; min-height: calc(100svh - 128px); }
.hero-copy { position: relative; z-index: 2; max-width: 640px; }
.hero-h { font-family: var(--display); font-weight: 600; font-size: clamp(40px, 4.6vw, 80px); line-height: 1.02; letter-spacing: -0.045em; display: flex; align-items: flex-end; }
.hero-h .hh { display: block; }
.hdot { display: inline-block; position: relative; width: 0.2em; height: 0.2em; margin-left: 0.04em; }
.hdot i { position: absolute; inset: 0; border-radius: 50%; background: var(--ok); }
.hdot::after { content: ""; position: absolute; inset: -60%; border-radius: 50%; border: 0.03em solid var(--ok); opacity: 0; }
.hdot.ping::after { animation: ring 1.1s var(--ease-out); }
@keyframes ring { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.6); } }
.hero-sub { margin-top: 26px; font-family: var(--display); font-weight: 600; font-size: clamp(19px, 1.6vw, 26px); letter-spacing: -0.025em; line-height: 1.2; color: var(--fg-muted); }
.hero-lede { font-size: clamp(15.5px, 1.1vw, 18px); line-height: 1.55; color: var(--fg-muted); margin-top: 12px; max-width: 34em; }
.show { position: relative; }
.panel { position: relative; display: flex; flex-direction: column; min-height: clamp(560px, calc(100svh - 190px), 720px); padding: 26px 26px 18px; border-radius: 30px; background-color: #efece5; transition: background-color 700ms var(--ease-out); overflow: hidden; }
.pstage { position: relative; z-index: 1; flex: 1; display: grid; place-items: center; }
.pstage > * { grid-area: 1 / 1; }
.plog { position: relative; z-index: 1; min-height: 86px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.plog p { align-self: flex-start; display: flex; gap: 10px; align-items: baseline; max-width: 100%; padding: 8px 13px; border-radius: 12px; background: rgba(12, 12, 12, 0.88); color: #fff; font-size: 13.5px; line-height: 1.35; opacity: 0; transform: translateY(8px); transition: opacity 350ms var(--ease-out), transform 450ms var(--ease-out); }
.plog p.in { opacity: 1; transform: none; }
.plog p span { flex: none; font-family: var(--mono); font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.plog .py span { color: var(--ok); }
.panel.dark .plog p { background: rgba(255, 255, 255, 0.1); }
.pager { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pg-b { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; font-size: 12.5px; color: var(--fg-muted); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background 200ms, color 200ms; }
.pg-b:hover { color: var(--fg); }
.pg-b.on { background: #fff; color: #0b0c0e; box-shadow: none; }

.hero-copy > * { animation: fadeUp 800ms var(--ease-out) both; }
.hero-copy > :nth-child(2) { animation-delay: 120ms; } .hero-copy > :nth-child(3) { animation-delay: 200ms; } .hero-copy > :nth-child(4) { animation-delay: 280ms; } .hero-copy > :nth-child(5) { animation-delay: 340ms; }
.js .show { animation: rise 1100ms var(--ease-out) 150ms both; }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } }

.pointer { position: absolute; left: 0; top: 0; z-index: 30; width: 0; height: 0; opacity: 0; transition: transform 800ms var(--ease-io), opacity 300ms; pointer-events: none; }
.pointer.on { opacity: 1; }

/* Phone canvas (218 × 462) */
.ph-lock { position: absolute; top: 48px; left: 0; right: 0; text-align: center; color: #fff; transition: transform 500ms var(--ease-out), opacity 500ms; }
.ph-time { font-family: var(--display); font-weight: 600; font-size: 62px; letter-spacing: -0.04em; line-height: 1; }
.ph-date { font-size: 13px; opacity: 0.7; margin-top: 4px; }

/* Laptop canvas (624 × 382) */
.takes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.take { border-radius: 12px; padding: 7px; box-shadow: inset 0 0 0 1.5px #ececef; transition: box-shadow 300ms, transform 300ms; cursor: pointer; }
.take.chosen { box-shadow: inset 0 0 0 2.5px #0b0c0e; transform: translateY(-3px); }
.site { position: absolute; inset: 0; background: #fff; }
.site .bar { height: 28px; background: #ececee; display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.site .bar i { width: 8px; height: 8px; border-radius: 50%; background: #cfcfd4; }
.site .bar span { margin-left: 8px; flex: 1; height: 17px; border-radius: 5px; background: #fff; font-family: var(--mono); font-size: 9.5px; color: #7a7a80; display: flex; align-items: center; padding: 0 8px; }
.progress { height: 5px; border-radius: 3px; background: #e7e0d3; margin-top: 12px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: #2b2119; transition: width 1400ms var(--ease-io); }

/* ── 01 Word wall ─────────────────────────────────────────────────────── */
.pin { position: relative; }
.pin-in { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.ww { height: 300vh; margin-top: clamp(80px, 10vw, 160px); }
.ww .pin-in { display: flex; flex-direction: column; padding: 92px 0 28px; }
.ww-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; position: relative; }
.ww-hs { position: relative; }
.ww-h { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 3.4vw, 56px); line-height: 0.98; letter-spacing: -0.045em; transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); }
.ww-h2 { position: absolute; left: 0; bottom: 0; white-space: nowrap; opacity: 0; transform: translateY(30px); }
.ww.p2 [data-ww-h1] { opacity: 0; transform: translateY(-30px); }
.ww.p2 .ww-h2 { opacity: 1; transform: none; }
.ww-stats { display: flex; gap: clamp(24px, 3.5vw, 64px); transition: opacity 500ms, transform 600ms var(--ease-out); }
.ww-stat b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(40px, 4.8vw, 88px); letter-spacing: -0.05em; line-height: 0.9; }
.ww-stat span { display: block; margin-top: 8px; font-size: 15px; color: var(--fg-muted); max-width: 13em; }
.ww.p2 .ww-stats { opacity: 0; transform: translateY(-20px); }
.ww-field { position: relative; flex: 1; min-height: 0; margin-top: clamp(20px, 3vh, 40px); }
.ww-ask { display: flex; justify-content: flex-end; margin-bottom: 14px; transition: opacity 500ms; }
.ww-ask span { background: #232323; border-radius: 16px 16px 4px 16px; padding: 9px 15px; font-size: 15px; }
.ww.p2 .ww-ask { opacity: 0; }
.ww-wall { columns: 3 260px; column-gap: clamp(28px, 3vw, 56px); font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, 0.16); }
.ww-wall p { break-inside: avoid-column; margin-bottom: 0.55em; }
.ww-wall b { font-weight: 600; }
.ww-wall .w { display: inline-block; }
.ww.cv .ww-wall { color: transparent; }
.ww-canvas { position: absolute; left: 0; top: 0; pointer-events: none; }
.ww-card { position: absolute; left: 50%; top: 50%; width: min(520px, 92%); translate: -50% -46%; background: #fff; color: #0b0c0e; border-radius: 26px; padding: 22px 24px 20px; box-shadow: 0 50px 110px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.1); }
.ww-card > :not(.ww-slider) { opacity: 0; }
.ww-card { background: transparent; box-shadow: none; }
.ww-card.show { background: #fff; box-shadow: 0 50px 110px -30px rgba(0, 0, 0, 0.9); transition: background 500ms, box-shadow 500ms; }
.ww-card.show > * { opacity: 1; transition: opacity 500ms 100ms; }
.ww-card .ic-from { font-size: 12.5px; }
.ww-card .ic-from .wm { font-size: 15px; }
.ww-cq { font-family: var(--display); font-weight: 600; font-size: 34px; letter-spacing: -0.03em; margin-top: 10px; }
.ww-cd { font-size: 14.5px; color: #6b6b70; margin-top: 2px; }
.ww-swatch { height: 150px; border-radius: 18px; margin-top: 16px; background: #e2e8ef; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.ww-slider { position: relative; height: 50px; margin-top: 14px; touch-action: none; cursor: grab; border-radius: 12px; }
.ww-track { position: absolute; left: 0; right: 0; top: 50%; height: 12px; margin-top: -6px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.ww-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #dde5ee 0%, #ece5dc 40%, #f3d2b6 74%, #f4a468 100%); transform-origin: 0 50%; transform: scaleX(0); }
.ww-thumb { position: absolute; top: 50%; left: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 9px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.08); opacity: 0; transition: opacity 300ms; }
.ww-card.show .ww-thumb { opacity: 1; }
.ww-val { margin-top: 8px; text-align: center; font-size: 17px; font-weight: 600; color: #0b0c0e; }
.ww-sent { margin-top: 14px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 600; color: #067647; background: #dcfae6; opacity: 0 !important; transform: translateY(6px); transition: opacity 400ms, transform 400ms var(--ease-out); }
.ww-sent.show { opacity: 1 !important; transform: none; }

/* ── 02 Timeline ──────────────────────────────────────────────────────── */
.tl { height: 640vh; }
.tl .pin-in { background: radial-gradient(120% 80% at 50% 120%, #101010, var(--bg)); }
.tl-world { position: absolute; left: 0; top: 0; height: 100%; will-change: transform; }
.tl-line { position: absolute; left: 0; right: 0; top: 80%; height: 3px; }
.tl-line i { position: absolute; top: 0; height: 3px; border-radius: 2px; }
.tl-live { background: #fff; box-shadow: 0 0 22px rgba(255, 255, 255, 0.45); }
.tl-dead { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 4px, transparent 4px 16px); }
.tl-back { background: var(--ok); box-shadow: 0 0 26px rgba(52, 211, 153, 0.7); transform-origin: 100% 50%; transform: scaleX(0); }
.tl-term { position: absolute; top: 36%; }
.tl-term .term-body { min-height: 190px; }
.tl-term [data-tl-l] { display: none; }
.tl-term [data-tl-l].on { display: grid; animation: lnIn 420ms var(--ease-out); }
.tl-fly { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: #fff; color: #0b0c0e; font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: -0.02em; box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.8); opacity: 0; will-change: transform; }
.tl-fly .wm { font-size: 15px; }
.tl-mark { position: absolute; top: 80%; width: 0; }
.tl-mark i { position: absolute; left: -8px; top: -7px; width: 16px; height: 16px; border-radius: 50%; background: var(--fg); }
.tl-mark span { position: absolute; left: -60px; width: 120px; top: 22px; text-align: center; font-family: var(--mono); font-size: 13px; color: var(--fg-faint); }
.tl-mark b { position: absolute; left: -80px; width: 160px; top: 42px; text-align: center; font-size: 13px; font-weight: 500; color: var(--fg-muted); }
.tl-hour { position: absolute; top: 38%; font-family: var(--display); font-weight: 700; font-size: clamp(90px, 15vw, 260px); letter-spacing: -0.06em; line-height: 1; color: rgba(255, 255, 255, 0.085); translate: -50% 0; }
.tl-hour small { font-size: 0.24em; letter-spacing: 0; margin-left: 0.1em; }
.tl-note { position: absolute; top: 85%; font-size: clamp(15px, 1.25vw, 19px); color: var(--fg-muted); translate: -50% 0; white-space: nowrap; }
.tl-phone { top: 30%; height: 64%; aspect-ratio: 236 / 484; }
.tl-phone .scr { background: radial-gradient(120% 70% at 30% 0%, #1c2030, transparent 60%), #0b0b0e; }
.tl-phone .ph-lock { top: 9%; }
.tl-phone .ph-time { font-size: clamp(40px, 5.2vh, 64px); }
.tl-phone .icard { position: absolute; left: 7%; right: 7%; top: 34%; }
.tl-phone .ic-q { font-size: clamp(15px, 2.1vh, 20px); }
.tl-orb { position: absolute; left: 0; top: 80%; width: 22px; height: 22px; margin: -9.5px 0 0 -11px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 6px rgba(52, 211, 153, 0.2), 0 0 40px 8px rgba(52, 211, 153, 0.6); opacity: 0; }
.tl-orb.bad { background: var(--bad); box-shadow: 0 0 0 6px rgba(255, 95, 92, 0.2), 0 0 30px 6px rgba(255, 95, 92, 0.5); }
.tl-lost { position: absolute; top: calc(80% - 62px); translate: -50% 0; opacity: 0; transition: opacity 400ms; }
.tl-lost.on { opacity: 1; }
.tl-hud { position: absolute; left: 0; right: 0; top: 86px; z-index: 3; pointer-events: none; }
.tl-row { display: flex; align-items: flex-end; gap: clamp(20px, 4vw, 72px); margin-top: 10px; }
.tl-clock { font-family: var(--display); font-weight: 600; font-size: clamp(48px, 6vw, 104px); letter-spacing: -0.05em; line-height: 0.85; white-space: nowrap; }
.tl-clock small { font-size: 0.3em; letter-spacing: -0.01em; margin-left: 0.12em; color: var(--fg-muted); }
.tl-caps { position: relative; flex: 1; min-height: 3.2em; max-width: 34em; font-size: clamp(17px, 1.6vw, 26px); line-height: 1.25; letter-spacing: -0.015em; font-family: var(--display); font-weight: 600; }
.tl-caps p { position: absolute; left: 0; bottom: 0; opacity: 0; transform: translateY(14px); transition: opacity 450ms var(--ease-out), transform 550ms var(--ease-out); color: var(--fg-muted); }
.tl-caps p.on { opacity: 1; transform: none; }
.tl-caps p.bad { color: #ff8a88; }
.tl-caps p.good { color: var(--fg); }
.tl-caps p b { color: var(--ok); font-weight: 600; }
.tl-wait { position: absolute; right: var(--gut); bottom: 46px; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; color: var(--fg-muted); opacity: 0; transform: translateY(10px); transition: opacity 400ms, transform 500ms var(--ease-out), background 400ms, color 400ms; }
.tl-wait i { width: 8px; height: 8px; border-radius: 50%; background: #f5b82e; animation: blink 1.4s steps(1) infinite; }
.tl-wait b { font-family: var(--mono); font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.tl-wait.on { opacity: 1; transform: none; }
.tl-wait.bad { background: rgba(255, 95, 92, 0.12); color: #ff8a88; }
.tl-wait.bad i { background: var(--bad); }
.tl-scrub { position: absolute; left: var(--gut); right: var(--gut); bottom: 22px; height: 2px; background: var(--line); border-radius: 2px; }
.tl-scrub i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--fg-muted); transform-origin: 0 50%; transform: scaleX(0); }

/* ── 03 Screens ───────────────────────────────────────────────────────── */
.scr.light { background: #f3f3f5; container-type: size; }

@container (min-aspect-ratio: 1 / 1) {
}

/* ── Marquees ─────────────────────────────────────────────────────────── */
@keyframes mq { to { transform: translateX(-50%); } }

/* ── Both ways: the beam ──────────────────────────────────────────────── */
.beam { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 0.9fr) minmax(0, 1fr) minmax(60px, 0.9fr) minmax(0, 1fr); align-items: center; margin-top: clamp(56px, 7vw, 110px); }
.bstep { padding: 28px 26px; min-height: 150px; border-radius: 22px; background: var(--interactive); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line); display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.bstep b { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2vw, 32px); letter-spacing: -0.025em; }
.bstep > span:not(.wordmark) { font-size: 15.5px; color: var(--fg-muted); line-height: 1.45; }
.bstep.bit { align-items: center; text-align: center; box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line-strong); }
.bstep.bit .wordmark { font-size: clamp(56px, 5vw, 84px); color: var(--fg); }
.bpipe { position: relative; height: 60px; }
.bpipe i { position: absolute; left: 0; right: 0; height: 2px; background-size: 36px 2px; animation: flow 1.2s linear infinite; }
.bpipe .bout { top: 18px; background-image: linear-gradient(90deg, #fff 0 14px, transparent 14px); }
.bpipe .bback { bottom: 18px; background-image: linear-gradient(90deg, var(--ok) 0 14px, transparent 14px); animation-direction: reverse; }
.bpipe em { position: absolute; left: 0; right: 0; text-align: center; font-style: normal; font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
@keyframes flow { to { background-position: 36px 0; } }

/* ── Not that IT ──────────────────────────────────────────────────────── */
.notit { padding: clamp(110px, 14vw, 220px) 0 0; overflow-x: clip; }
.nt-band { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; transform: rotate(-1.6deg); margin: 0 -2vw; background: #0d0d0d; }
.nt-track { display: flex; width: max-content; animation: mq 60s linear infinite; }
.nt-track span { padding: 0 34px; font-family: var(--mono); font-size: clamp(15px, 1.4vw, 22px); color: var(--fg-faint); white-space: nowrap; }
.nt-track span::after { content: "✕"; margin-left: 68px; color: var(--fg-ghost); }
.nt-track s { text-decoration-color: rgba(255, 95, 92, 0.7); text-decoration-thickness: 2px; }
.nt-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 5vw, 100px); align-items: end; margin-top: clamp(60px, 7vw, 110px); }
.nt-h { font-family: var(--display); font-weight: 700; font-size: clamp(40px, 5.2vw, 92px); letter-spacing: -0.055em; line-height: 0.9; white-space: nowrap; }
.nt-it { display: inline-block; font-family: var(--mono); font-weight: 500; letter-spacing: -0.02em; color: var(--fg-faint); position: relative; }
.nt-it::after { content: ""; position: absolute; left: -4%; right: -4%; top: 52%; height: 0.07em; background: #ff8a88; transform: scaleX(0); transform-origin: 0 50%; transition: transform 700ms 500ms var(--ease-out); }
.nt-h.in .nt-it::after { transform: none; }
.nt-b { font-size: clamp(18px, 1.8vw, 28px); line-height: 1.4; color: var(--fg-muted); max-width: 26em; padding-bottom: 0.4em; }

/* 404 */
.nf-in { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.nf-mark { font-size: 72px; margin-bottom: 16px; }
.nf .h { font-family: var(--display); font-weight: 600; font-size: clamp(40px, 6vw, 96px); letter-spacing: -0.045em; line-height: 1; }
.nf .sub { font-size: 20px; color: var(--fg-muted); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .beam { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bpipe { height: 70px; }
  .bpipe i { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background-size: 2px 36px; }
  .bpipe .bout { margin-left: -14px; background-image: linear-gradient(180deg, #fff 0 14px, transparent 14px); }
  .bpipe .bback { margin-left: 12px; background-image: linear-gradient(180deg, var(--ok) 0 14px, transparent 14px); }
  .bpipe em { display: none; }
  @keyframes flow { to { background-position: 0 36px; } }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-in .btn { margin-left: auto; }
  .shead, .nt-in { grid-template-columns: minmax(0, 1fr); }
  .ww-top { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ww-stats { gap: 28px; }
  .ww-hs { min-height: 2.1em; }
}
@media (max-width: 760px) {
  .nt-h { white-space: normal; }
}

/* ── The things (hero panel) ──────────────────────────────────────────── */
.mosaic.out { opacity: 0; transform: translateY(-14px) scale(0.98); transition: opacity 300ms, transform 400ms var(--ease-out); pointer-events: none; }

/* Whiteboard */

/* Scratchpad */
.sp { position: relative; height: 262px; margin-top: 12px; border-radius: 14px; background: #f7f5ef; }

/* Study workspace */

/* Chessboard */

/* Map */
.me { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #2f6bff; box-shadow: 0 0 0 5px rgba(47, 107, 255, 0.25); translate: -50% -50%; }

/* Checklist */

/* Floor plan */

/* Calendar */

/* Drum machine */
.pad { aspect-ratio: 1; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.07); cursor: pointer; transition: background 150ms, transform 100ms, box-shadow 150ms, filter 150ms; }
.pad.on { background: var(--c); }
.pad.now { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); }
.pad.on.now { transform: scale(1.08); filter: brightness(1.25); }
.pad.agent { box-shadow: 0 0 0 2px #1c1c1f, 0 0 0 3.5px rgba(255, 255, 255, 0.6); }

/* Big red button */

/* The reel and the "It can do that." mosaic */
.mosaic { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; width: min(560px, 100%); }
.mt { aspect-ratio: 1; display: flex; align-items: flex-end; padding: 10px; border: 0; border-radius: 14px; color: #0b0c0e; font-size: 12.5px; font-weight: 600; text-align: left; line-height: 1.2; cursor: pointer; opacity: 0; transform: scale(0.85); transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out); }
.mt.dk { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
.mt.in { opacity: 1; transform: none; }
.mt:hover { transform: translateY(-3px); }

@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 28px; }
  .hero-copy { max-width: none; }
  .panel { min-height: 600px; }
}
@media (max-width: 560px) {
  .panel { padding: 16px 14px 14px; border-radius: 24px; min-height: 500px; }
  .mosaic { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) {
  .hero-copy { display: contents; }
  .hero-h { order: 1; }
  .show { order: 2; }
  .hero-sub { order: 3; margin-top: 0; }
  .hero-lede { order: 4; margin-top: -16px; }
}

/* ── Buttons that sit beside the main one, and the GitHub mark ────────── */
.btn-line { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-line:hover { background: var(--panel-2); }
.gh { flex: none; width: 1.05em; height: 1.05em; }
.nav-gh { display: inline-flex; align-items: center; gap: 7px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hero-note { margin-top: 14px; font-size: 14px; color: var(--fg-faint); }
.shead > .h2 { align-self: end; }
.tl-h { font-family: var(--display); font-weight: 600; font-size: clamp(20px, 2vw, 32px); letter-spacing: -0.03em; color: var(--fg-muted); margin-bottom: clamp(10px, 1.4vw, 22px); }
.url { white-space: nowrap; text-decoration: none; }
.url i, .udot { display: inline-block; width: 0.2em; height: 0.2em; margin: 0 0.07em; border-radius: 50%; background: var(--ok); }

/* ── The agent's nameplate on a demo, and the bead that flies to it ───── */

/* ── Both ways ────────────────────────────────────────────────────────── */
.both .beam { margin-top: clamp(40px, 5vw, 80px); }
.both-lines { margin-top: clamp(28px, 3vw, 48px); text-align: center; font-size: clamp(17px, 1.45vw, 23px); line-height: 1.5; color: var(--fg-muted); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.both-agents { list-style: none; justify-content: center; margin-top: clamp(24px, 2.6vw, 40px); }
.always-h { margin-top: clamp(80px, 9vw, 150px); font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.4vw, 40px); letter-spacing: -0.035em; }
.always { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; padding-top: 58px; }
.al-rail { position: absolute; left: 0; right: 0; top: 0; height: 34px; pointer-events: none; }
.pill.ok { background: var(--ok-soft); color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok-line); }
.al-pill { position: absolute; left: 0; top: 0; opacity: 0; transition: transform 600ms var(--ease-out), opacity 300ms, translate 260ms var(--ease-io); }
.al-pill.on { opacity: 1; }
.al-pill.drop { translate: 0 22px; opacity: 0; }
.al { position: relative; display: flex; align-items: center; gap: 18px; min-height: 112px; padding: 22px 26px; border: 0; border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); text-align: left; cursor: pointer; transition: background 400ms, box-shadow 400ms; }
.al:hover { background: var(--panel-2); }
.al.hit { background: rgba(52, 211, 153, 0.07); box-shadow: inset 0 0 0 1.5px var(--ok-line), 0 0 70px -20px rgba(52, 211, 153, 0.5); }
.al-i { flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, 0.5); transition: box-shadow 400ms; }
.al-i.on { background: var(--ok); box-shadow: 0 0 0 5px rgba(52, 211, 153, 0.2); }
.al-i.half { background: linear-gradient(90deg, var(--ok) 50%, transparent 50%); box-shadow: inset 0 0 0 2.5px var(--ok); }
.al.hit .al-i:not(.on):not(.half) { box-shadow: inset 0 0 0 2.5px var(--ok); }
.al-t { display: flex; flex-direction: column; gap: 4px; }
.al-t b { font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.6vw, 26px); letter-spacing: -0.02em; }
.al-t span { font-size: clamp(15px, 1.2vw, 19px); line-height: 1.4; color: var(--fg-muted); }

/* ── Real cards ───────────────────────────────────────────────────────── */
.made-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; margin-bottom: clamp(36px, 4.5vw, 72px); }
.made-note { font-size: 15px; color: var(--fg-faint); padding-bottom: 0.5em; }
.rc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 52px) clamp(18px, 2.2vw, 40px); }
.rc-pv { position: relative; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: var(--shadow-card), 0 0 0 1px rgba(255, 255, 255, 0.14); transform: perspective(1100px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform 500ms var(--ease-out), box-shadow 500ms; }
.rc-pv img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.rc.lit .rc-pv { box-shadow: var(--shadow-card), 0 0 0 1.5px var(--ok-line), 0 0 70px -24px rgba(52, 211, 153, 0.6); }
.rc figcaption { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: 14px; padding: 0 2px; }
.rc-say { display: flex; flex-direction: column; font-size: clamp(16px, 1.3vw, 21px); line-height: 1.35; letter-spacing: -0.01em; }
.rc-say.flip { flex-direction: column-reverse; }
.rc-agent { color: var(--ok); }
.rc-by { flex: none; margin-top: 0.35em; font-family: var(--mono); font-size: 12px; color: var(--fg-ghost); white-space: nowrap; }

/* ── How people work with agents ──────────────────────────────────────── */
.op-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 44px); margin-top: clamp(40px, 5vw, 80px); }
.op-e { position: relative; padding: clamp(20px, 2vw, 30px); border-radius: 26px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.op-e:not(:last-child)::after { content: "→"; position: absolute; left: 100%; top: 50%; width: clamp(22px, 2.6vw, 44px); text-align: center; translate: 0 -50%; color: var(--fg-ghost); font-size: clamp(18px, 1.8vw, 28px); }
.op-e.it { background: rgba(52, 211, 153, 0.06); box-shadow: inset 0 0 0 1.5px var(--ok-line), 0 0 90px -20px rgba(52, 211, 153, 0.3); }
.op-pic { position: relative; height: clamp(150px, 12vw, 190px); padding: 22px 24px; border-radius: 16px; background: #141414; box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; justify-content: center; gap: 13px; }
.op-md i { display: block; height: 11px; border-radius: 6px; background: rgba(255, 255, 255, 0.2); width: 86%; }
.op-md i:nth-child(2) { width: 64%; } .op-md i:nth-child(3) { width: 78%; } .op-md i:nth-child(4) { width: 42%; } .op-md i:nth-child(5) { width: 70%; }
.op-html { background: #f6f6f7; }
.op-html b { display: block; height: 58px; width: 62%; border-radius: 12px; background: linear-gradient(90deg, #98b4e7, #cebfef); }
.op-html span { display: block; height: 11px; border-radius: 6px; background: rgba(0, 0, 0, 0.16); width: 82%; }
.op-html span + span { width: 56%; }
.op-html em { position: absolute; right: 22px; top: 22px; width: 76px; height: 76px; border-radius: 50%; background: conic-gradient(#f0ca46 0 38%, #eca395 38% 70%, #afe1c6 70%); }
.op-chat { justify-content: flex-start; gap: 10px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3); }
.op-bub.op-me { align-self: flex-end; width: 44%; height: 20px; border-radius: 10px; background: rgba(255, 255, 255, 0.2); }
.op-bub.op-ai { align-self: flex-start; width: 92%; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.09); display: flex; flex-direction: column; gap: 10px; }
.op-bub.op-ai > u { display: block; width: 62%; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.22); }
.op-w { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 10px; background: #f6f6f7; }
.op-w > span { display: block; width: 36%; height: 10px; border-radius: 5px; background: rgba(0, 0, 0, 0.18); }
.op-step { display: flex; align-items: center; gap: 10px; color: #0b0c0e; font-size: 16px; font-weight: 600; }
.op-step b { width: 26px; height: 26px; border-radius: 8px; background: #e2e2e7; display: grid; place-items: center; }
.op-step em { font-style: normal; }
.op-it { background: #f6f6f7; gap: 18px; }
.op-sl { position: relative; height: 14px; border-radius: 99px; background: linear-gradient(90deg, #dde5ee, #f3d2b6 70%, #f4a468); }
.op-sl s { position: absolute; top: 50%; left: 20%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; box-shadow: 0 2px 9px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.08); animation: opKnob 5s var(--ease-io) infinite; }
.op-btn { align-self: flex-start; height: 40px; padding: 0 20px; border-radius: 12px; background: #0b0c0e; color: #fff; display: grid; place-items: center; font-size: 15px; font-weight: 600; }
.op-back { position: absolute; right: 18px; bottom: 20px; height: 34px; padding: 0 13px; border-radius: 999px; display: grid; place-items: center; background: var(--ok); color: #04130d; font-size: 14px; font-weight: 700; animation: opBack 5s var(--ease-out) infinite; }
@keyframes opKnob { 0%, 12% { left: 20%; } 40%, 100% { left: 66%; } }
@keyframes opBack { 0%, 46% { opacity: 0; transform: translateX(14px); } 56%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.op-k { margin-top: 24px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); }
.op-k .wordmark { font-size: 40px; letter-spacing: -0.05em; text-transform: none; line-height: 0.7; }
.op-d { margin-top: 8px; font-family: var(--display); font-weight: 600; font-size: clamp(20px, 1.9vw, 32px); letter-spacing: -0.026em; line-height: 1.12; }

/* ── Install ──────────────────────────────────────────────────────────── */
.inst { padding-bottom: clamp(110px, 13vw, 200px); }
.inst-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 120px); align-items: start; }
.join-t { font-family: var(--display); font-weight: 600; font-size: clamp(34px, 4vw, 68px); letter-spacing: -0.045em; line-height: 1.02; }
.inst-copy .lede { margin-top: 22px; max-width: 28em; }
.inst-facts { list-style: none; margin-top: clamp(28px, 3vw, 44px); max-width: 26em; border-top: 1px solid var(--line); }
.inst-facts li { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: clamp(17px, 1.4vw, 22px); letter-spacing: -0.01em; }
.inst-facts a { text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.inst-box { display: flex; flex-direction: column; gap: 14px; }
.cmd { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 14px 14px 14px 20px; border-radius: 18px; background: var(--interactive); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 300ms; }
.cmd.done { box-shadow: inset 0 0 0 1.5px var(--ok-line); }
.cmd-l { grid-column: 1; font-size: 13px; color: var(--fg-faint); }
.cmd code { grid-column: 1; font-family: var(--mono); font-size: clamp(14px, 1.1vw, 16.5px); line-height: 1.45; color: var(--fg); overflow-wrap: anywhere; }
.cmd-b { grid-column: 2; grid-row: 1 / span 2; height: 40px; min-width: 84px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--fg); color: #0a0a0a; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background 160ms, color 160ms; }
.cmd-b:hover { background: #e8e8e8; }
.cmd.done .cmd-b { background: var(--ok); color: #04130d; }
.inst-more summary { width: max-content; padding: 6px 2px; font-size: 15px; color: var(--fg-muted); cursor: pointer; }
.inst-more summary:hover { color: var(--fg); }
.inst-more[open] summary { margin-bottom: 8px; }
.inst-more .cmd + .cmd { margin-top: 10px; }
.inst-fine { margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--fg-faint); max-width: 44em; }

/* ── The footer: the closing wall, then everything else ───────────────── */
.foot { position: relative; border-top: 1px solid var(--line); }
.foot-close { position: relative; height: max(100svh, 760px); overflow: hidden; display: grid; place-items: center; }
.cw { position: absolute; inset: 0; pointer-events: none; }
.cw-col { position: absolute; top: 0; width: var(--tile, 372px); height: 100%; }
.cw-tile { position: absolute; left: 0; top: 0; width: var(--tile, 372px); height: var(--tile, 372px); border-radius: 24px; overflow: hidden; will-change: transform; }
.cw-fit { position: absolute; inset: 0; }
.cw-scrim { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 62% 40% at 50% 50%, rgba(10, 10, 10, 0.97) 0%, rgba(10, 10, 10, 0.94) 52%, rgba(10, 10, 10, 0) 100%), linear-gradient(180deg, #0a0a0a 0%, rgba(10, 10, 10, 0.3) 14%, rgba(10, 10, 10, 0.3) 84%, #0a0a0a 100%); }
.cl { position: relative; z-index: 2; width: 100%; padding: 0 var(--gut); text-align: center; }
.cl-stage { position: relative; height: 1em; font-family: var(--display); font-weight: 600; font-size: clamp(50px, 10.4vw, 184px); letter-spacing: -0.045em; line-height: 1; }
.cl-line { position: absolute; left: 0; right: 0; top: 0; white-space: nowrap; }
/* The line's pieces are placed by line.js, each from the line's own top left corner. */
.cl-line.live { height: 1em; }
.cl-p, .cl-g, .cl-meter, .cl-line .cl-dot { position: absolute; left: 0; top: 0; white-space: pre; }
.cl-p, .cl-line .cl-dot { opacity: 0; }
.cl-line .cl-dot { margin: 0; transform-origin: 0 0; --pulse: 4.6; }
.cl-line.run .cl-p, .cl-line.run .cl-dot { will-change: transform, opacity; }
.cl-meter { visibility: hidden; pointer-events: none; }
.cl-base { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.cl-sub { margin-top: clamp(18px, 2.2vw, 36px); font-family: var(--display); font-weight: 500; font-size: clamp(19px, 2.3vw, 42px); letter-spacing: -0.022em; color: var(--fg-muted); }
.cl-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: clamp(26px, 3vw, 44px); }
.cl-cta .btn-line { background: rgba(10, 10, 10, 0.6); }
.foot-base { position: relative; z-index: 2; background: var(--bg); padding: clamp(56px, 6vw, 100px) 0 22px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: clamp(40px, 6vw, 120px); }
.foot-mark { font-size: clamp(88px, 10vw, 168px); line-height: 0.8; margin-left: -0.04em; }
.foot-brand p { margin-top: clamp(20px, 2vw, 30px); max-width: 16em; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.4; color: var(--fg-muted); }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.foot-cols > div { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.foot-cols h3 { margin-bottom: 6px; font-family: var(--mono); font-weight: 400; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); }
.foot-cols a, .foot-cols span { font-size: clamp(16px, 1.25vw, 19px); color: var(--fg-muted); text-decoration: none; transition: color 160ms; }
.foot-cols a:hover { color: var(--fg); }
.foot-legal { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-top: clamp(64px, 8vw, 130px); padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--fg-faint); }
.foot-legal .url { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.03em; color: var(--fg); }
.foot-terms { display: inline-flex; gap: 22px; }
.foot-terms a { text-decoration: none; }
.foot-terms a:hover { color: var(--fg); }
/* Writing to us. It comes straight after the closing line, above the footer's two columns and as
   wide as they are (owner, 2026-10-12: "right after the Can it do that animation at the end, then
   the massive footer"), and it is a page of It's own, on the paper the pages in the film are on: the bar above it, a thing to tap,
   a box to write in, a thin line that runs along the bar while what you wrote is on its way, and
   the answer on the page. Green is the return path and that the other end is there, as everywhere. */
.write { margin-bottom: clamp(56px, 6vw, 104px); padding-bottom: clamp(56px, 6vw, 104px); border-bottom: 1px solid var(--line); align-items: start; }
.write-h { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 3.1vw, 50px); line-height: 1.05; letter-spacing: -0.04em; }
.write-or { margin-top: 14px; font-size: clamp(17px, 1.4vw, 22px); color: var(--fg-muted); }
.write-or a { color: var(--fg); text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.write-or a:hover { text-decoration-color: var(--fg); }
.wpage { --ink: #0b0c0e; --ink-2: #55524b; --ink-3: #8b877e; --rule: rgba(12, 12, 12, 0.11); position: relative; max-width: 820px; border-radius: 30px; background: #efece5; color: var(--ink); overflow: hidden; box-shadow: var(--shadow-pop); }
.wbar { position: relative; display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 clamp(18px, 2vw, 26px); border-bottom: 1px solid var(--rule); }
.wbar .wm { font-size: 22px; }
.wbar .wm i { position: relative; }
.wbar .wm i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #10b981; opacity: 0; }
.wbar .wm i.ping::after { animation: pulse 900ms var(--ease-out); }
.wbar-t { font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; }
/* (What has become of the last thing sent, in words: nothing until something is on its way.) */
.wbar-s { margin-left: auto; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.wpage[data-state="failed"] .wbar-s { color: #c8372d; }
/* (While it is on its way a line runs along the bar's lower edge, as it does above a page in It.) */
.wbar-line { position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; overflow: hidden; opacity: 0; transition: opacity 200ms; }
.wbar-line::before { content: ""; position: absolute; top: 0; left: 0; width: 34%; height: 100%; border-radius: 2px; background: #10b981; transform: translateX(-100%); }
.wpage[data-state="sending"] .wbar-line { opacity: 1; }
.wpage[data-state="sending"] .wbar-line::before { animation: wline 1100ms var(--ease-io) infinite; }
@keyframes wline { to { transform: translateX(300%); } }
.wform { position: relative; display: grid; gap: 12px; padding: clamp(20px, 2.2vw, 30px) clamp(18px, 2vw, 26px) 0; }
.wask { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2vw, 29px); line-height: 1.1; letter-spacing: -0.03em; }
.wabout { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 6px; }
.wchip { height: 38px; padding: 0 15px; border: 0; border-radius: 999px; background: rgba(12, 12, 12, 0.07); color: var(--ink); font-weight: 500; font-size: 14.5px; white-space: nowrap; cursor: pointer; transition: background 160ms, color 160ms, transform 160ms; }
.wchip:hover { background: rgba(12, 12, 12, 0.12); }
.wchip:active { transform: scale(0.96); }
.wchip[aria-pressed="true"] { background: var(--ink); color: #fff; }
.wfield { display: block; width: 100%; min-width: 0; padding: 14px 16px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, 0.62); box-shadow: inset 0 0 0 1px var(--rule); font-size: 16.5px; line-height: 1.45; color: var(--ink); outline: 0; transition: box-shadow 160ms, background 160ms; }
textarea.wfield { min-height: 124px; resize: none; }
.wfield::placeholder { color: var(--ink-3); }
.wfield:hover { box-shadow: inset 0 0 0 1px rgba(12, 12, 12, 0.24); }
.wfield:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.wfield.wrong { box-shadow: inset 0 0 0 1.5px #c8372d; }
.wfield[readonly] { background: transparent; box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink-2); }
.wrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.wsend { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; min-width: 124px; padding: 0 22px; border: 0; border-radius: 16px; background: var(--ink); color: #fff; font-weight: 600; font-size: 16px; white-space: nowrap; cursor: pointer; transition: transform 160ms, background 160ms, opacity 160ms; }
.wsend:hover { background: #26272b; }
.wsend:active { transform: scale(0.97); }
.wsend[disabled] { opacity: 0.55; cursor: progress; }
.wsend svg { flex: none; transition: transform 300ms var(--ease-out); }
.wsend:hover svg { transform: translateY(-2px); }
.wpage[data-state="sent"] .wsend { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(12, 12, 12, 0.24); }
.wpage[data-state="sent"] .wsend:hover { background: rgba(12, 12, 12, 0.06); }
.wpage[data-state="sent"] .wsend svg { display: none; }
.wpage[data-state="sent"] .wchip { pointer-events: none; }
.wpage[data-state="sent"] .wchip:not([aria-pressed="true"]) { opacity: 0.4; }
.wsaid { font-size: 14.5px; line-height: 1.45; color: #c8372d; }
.wsaid:empty { display: none; }
/* (A box no person sees or reaches: what fills it in is a program that fills in every box.) */
.write-hold { position: absolute; left: -200vw; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* What you did and what came back, said at the foot of the page as they are on the first screen's. */
/* (It takes no room until there is something to say, and then makes room for both lines at once, so that the page does not grow twice.) */
.wlog { display: grid; grid-template-rows: 0fr; padding: 0 clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px); transition: grid-template-rows 520ms var(--ease-out); }
.wlog-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.wlog-in::before { content: ""; flex: none; height: 12px; }
.wpage[data-state="sending"] .wlog, .wpage[data-state="sent"] .wlog { grid-template-rows: 1fr; }
.wlog-in { min-block-size: 0; }
.wpage[data-state="sending"] .wlog-in, .wpage[data-state="sent"] .wlog-in { min-height: 96px; }
.wlog p { display: flex; gap: 10px; align-items: baseline; max-width: 100%; padding: 8px 13px; border-radius: 12px; background: rgba(12, 12, 12, 0.88); color: #fff; font-size: 13.5px; line-height: 1.35; opacity: 0; transform: translateY(8px); transition: opacity 350ms var(--ease-out), transform 450ms var(--ease-out); }
.wlog p.in { opacity: 1; transform: none; }
.wlog p span { flex: none; font-family: var(--mono); font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.wlog .wl-you span { color: var(--ok); }
.wlog p b { font-weight: 400; min-width: 0; overflow-wrap: anywhere; }
.wlog .wl-you b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foot-pat { margin-top: 26px; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--fg-ghost); }

@media (max-width: 1180px) {
  .rc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-e:nth-child(2)::after { content: none; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .hero-cta { order: 5; margin-top: 0; }
  .hero-note { order: 6; margin-top: -14px; }
}
@media (max-width: 900px) {
  .inst-grid, .made-head { grid-template-columns: minmax(0, 1fr); }
  .always { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .al-rail { display: none; }
  .made-note { padding-bottom: 0; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .wpage { border-radius: 24px; }
  .wrow { grid-template-columns: minmax(0, 1fr); }
  .wsend { width: 100%; }
  .rc-grid, .op-strip { grid-template-columns: minmax(0, 1fr); }
  .op-e:not(:last-child)::after, .op-e:nth-child(2)::after { content: "↓"; left: 0; right: 0; top: 100%; width: auto; translate: none; line-height: 22px; }
  .cmd { grid-template-columns: minmax(0, 1fr); }
  .cmd-b { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; }
  .foot-close { height: max(92svh, 620px); }
}

/* ── The launch film, played on the page ──────────────────────────────── */
/* film.js is the film's own drawing code. Each of these is a canvas showing a cut of it. */
.fcanvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; transition: opacity 260ms; }
.fcanvas.off { opacity: 0; }
.fstage { position: relative; overflow: hidden; border-radius: 30px; background: radial-gradient(90% 70% at 50% -18%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 70%), #f4f1ea; }
.fs-loop { aspect-ratio: 1418 / 890; width: min(100%, 1280px, (100svh - 150px) * 1.593); min-width: min(100%, 560px); margin: clamp(8px, 2vw, 28px) auto 0; }
.fs-where { aspect-ratio: 2 / 1; width: min(100%, (100svh - 190px) * 2); min-width: min(100%, 560px); margin: clamp(8px, 2vw, 28px) auto 0; }
.fs-pager { justify-content: center; }
.fs-end { aspect-ratio: 1240 / 900; }
@media (max-width: 760px) {
  .fstage { border-radius: 22px; }
  .fs-where { aspect-ratio: 10 / 11; }
}

/* ══ Added 2026-10-12 from the rebuilt page, at the owner's word: the same room, the quotation,
   a room for every job, and the two films. docs/DECISIONS.md says what each is. ══ */

/* ── The same room: one tool's window, and then every tool's ───────────── */
.same { position: relative; overflow: hidden; margin-top: clamp(80px, 9vw, 150px); }
.same-view { position: relative; isolation: isolate; height: max(100svh, 700px); display: grid; place-items: center; overflow: hidden; }
/* (The wall is one canvas, drawn by same.js: it is given its size there, and is never larger than the screen.) */
.same-wall { position: absolute; left: 50%; top: 50%; z-index: 0; translate: -50% -50%; display: block; }
.same-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1200ms 500ms; background: radial-gradient(ellipse 56% 38% at 50% 50%, rgba(10, 10, 10, .97) 0%, rgba(10, 10, 10, .9) 44%, rgba(10, 10, 10, 0) 100%), linear-gradient(180deg, #0a0a0a 0%, rgba(10, 10, 10, .06) 15%, rgba(10, 10, 10, .06) 84%, #0a0a0a 100%); }
.same.far .same-scrim { opacity: 1; }
.same-in { position: relative; z-index: 2; text-align: center; }
.same-h, .same-l { opacity: 0; transform: translateY(16px); transition: opacity 800ms, transform 1000ms var(--ease-out); }
.same-h { font-size: clamp(32px, 4.4vw, 74px); transition-delay: 900ms; }
.same-l { margin: clamp(14px, 1.6vw, 24px) auto 0; max-width: 30em; color: rgba(255, 255, 255, .82); transition-delay: 1150ms; }
.same.far .same-h, .same.far .same-l { opacity: 1; transform: none; }
.quote { text-align: center; padding-top: clamp(40px, 6vw, 110px); padding-bottom: clamp(10px, 2vw, 40px); }
.quote blockquote { margin: 0 auto; max-width: 21em; font-family: var(--display); font-weight: 600; font-size: clamp(24px, 3vw, 50px); line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.quote figcaption { margin-top: clamp(16px, 1.8vw, 28px); font: 500 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); text-wrap: balance; }
.quote blockquote, .quote figcaption { opacity: 0; transform: translateY(14px); transition: opacity 900ms, transform 1100ms var(--ease-out); }
.quote.in blockquote, .quote.in figcaption { opacity: 1; transform: none; }
.quote.in figcaption { transition-delay: 250ms; }


/* ── A room for every job: rows of things to say to your agent ────────── */
.jobs { overflow: hidden; }
.jobs .shead { margin-bottom: clamp(34px, 4vw, 64px); }
/* The names share one column, as wide as the widest of them and where the page's own left edge
   is, and the things to say begin after it at any width of window. (A column of a fixed width
   was narrower than the page's left margin on a window wider than about 1,950 px, where the
   things to say then ran over the names: owner, 2026-10-12, "I don't see the row names sometimes".) */
.jobs-rows { --jedge: max(var(--gut), calc((100vw - 1880px) / 2 + var(--gut))); display: grid; grid-template-columns: max-content minmax(0, 1fr); }
.jrow { grid-column: 1 / -1; display: grid; grid-template-columns: calc(var(--jedge) + clamp(150px, 13vw, 250px)) minmax(0, 1fr); align-items: center; border-top: 1px solid var(--line); }
@supports (grid-template-columns: subgrid) { .jrow { grid-template-columns: subgrid; } }
.jrow:last-child { border-bottom: 1px solid var(--line); }
/* (The name of a row starts where the page's own left edge is.) */
.jkind { padding: 16px 26px 16px var(--jedge); }
.jkind b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(17px, 1.5vw, 23px); letter-spacing: -0.03em; white-space: nowrap; }
/* Each row is a real row that scrolls: it drifts by itself (js/jobs.js), and a finger, a wheel or a trackpad moves it. */
.jclip { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 90px), transparent); mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 90px), transparent); }
.jclip::-webkit-scrollbar { display: none; }
.jtrack { display: flex; gap: 10px; width: max-content; padding: 15px 0; }
.job { flex: none; height: 44px; padding: 0 18px; display: inline-flex; align-items: center; border: 0; border-radius: 999px; background: #fffdf8; color: #0b0c0e; font: 500 15.5px var(--text); white-space: nowrap; cursor: pointer; transition: transform 140ms, background 160ms; }
.job:hover { transform: translateY(-2px); background: #fff; }

/* ── The two films: a still in front, and nothing is fetched until it is pressed ── */
.fplayer { position: relative; aspect-ratio: 16 / 9; width: min(100%, 1280px, (100svh - 250px) * 1.778); min-width: min(100%, 560px); margin: 0 auto; border-radius: 30px; overflow: hidden; background: #111; box-shadow: inset 0 0 0 1px var(--line); }
.fplayer video, .fposter, .fposter img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fplayer video { background: #000; }
.fposter { border: 0; padding: 0; background: none; cursor: pointer; }
.fposter img { object-fit: cover; }
/* (What is pressed sits in the corner, so that it covers nothing the still says.) */
.fgo { position: absolute; left: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 28px); display: inline-flex; align-items: center; gap: 12px; padding: 8px 20px 8px 8px; border-radius: 999px; background: rgba(10, 10, 10, 0.82); color: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); transition: transform 300ms var(--ease-out); }
.fplay { width: clamp(44px, 4.4vw, 60px); height: clamp(44px, 4.4vw, 60px); border-radius: 50%; display: grid; place-items: center; background: #fff; color: #0a0a0a; }
.fplay svg { width: 40%; height: 40%; margin-left: 7%; }
.flen { font-weight: 600; font-size: clamp(15px, 1.3vw, 18px); letter-spacing: -0.01em; }
.fposter:hover .fgo { transform: scale(1.05); }
.fpick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(100%, 1280px, (100svh - 250px) * 1.778); min-width: min(100%, 560px); margin: 12px auto 0; }
.fp { display: grid; grid-template-columns: clamp(92px, 9vw, 150px) minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 10px 18px 10px 10px; border: 0; border-radius: 20px; background: var(--interactive); box-shadow: inset 0 0 0 1px var(--line); color: var(--fg); text-align: left; cursor: pointer; transition: box-shadow 200ms, background 200ms; }
.fp:hover { background: #181818; }
.fp.on { box-shadow: inset 0 0 0 1.5px var(--fg); }
.fp img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
.fp-t b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(17px, 1.4vw, 21px); letter-spacing: -0.02em; }
.fp-t span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.38; color: var(--fg-muted); }
.fp-len { font-family: var(--mono); font-size: 13px; color: var(--fg-faint); }
.play { flex: none; width: 0.95em; height: 0.95em; }

/* ── A word from the page: a thing to say was copied ──────────────────── */
.toast { position: fixed; z-index: 95; left: 50%; bottom: 24px; transform: translate(-50%, 12px); padding: 10px 18px; border-radius: 999px; background: var(--fg); color: #0a0a0a; font: 500 14.5px var(--text); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 240ms, transform 320ms var(--ease-out); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1000px) {
  .jobs-rows, .jrow { grid-template-columns: minmax(0, 1fr); }
  .jkind { padding-bottom: 0; }
  .quote { padding-top: 28px; }
}
@media (max-width: 760px) {
  .fplayer { border-radius: 22px; }
  .fpick { grid-template-columns: minmax(0, 1fr); }
  .quote figcaption { font-size: 11.5px; letter-spacing: 0.04em; }
}
/* A short screen, such as a phone on its side: the wall is not asked to be as tall as a laptop's. */
@media (max-height: 560px) and (orientation: landscape) {
  .same-view { height: max(100svh, 340px); }
}

/* ══ On a phone held upright (owner, 2026-10-12: "The sideways scrolling phone thing is really
   killing the vibe of the marketing website."): nothing on the page goes sideways. ══ */

/* ── The evening, upright in one screen ──────────────────────────────────
   On a wide screen the evening is drawn sideways by the page's own scroll. Here it stands
   in one screen and plays by itself: the agent above, your phone below, the wire between.
   timeline.js lays it out (it knows the screen's height) and plays it. */
@media (max-width: 759.98px) {
  .tl { height: auto; }
  .tl .pin-in { position: relative; height: max(100svh, 620px); max-height: 920px; }
  .tl .pin-in::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: linear-gradient(180deg, transparent, var(--bg)); pointer-events: none; z-index: 6; }
  .tl-world { width: 100%; transition: opacity 400ms; }
  .tl-mark, .tl-scrub { display: none; }
  .tl-hud { top: 76px; }
  .tl-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .tl-clock { font-size: 44px; }
  .tl-caps { min-height: 2.6em; max-width: none; width: 100%; font-size: 17px; }
  /* The agent's window keeps its last lines in view, as a terminal does. */
  .tl-term { left: var(--gut); right: var(--gut); top: 0; display: flex; flex-direction: column; }
  .tl-term .tb { flex: none; height: 34px; padding: 0 14px; font-size: 12px; }
  .tl-term .term-body { flex: 1; min-height: 0; padding: 10px 14px; overflow: hidden; }
  .tl-term .ln { font-size: 12px; line-height: 1.5; grid-template-columns: 44px 1fr; }
  .tl-term .ln + .ln { margin-top: 6px; }
  /* The wire: alive, then dead, then green from your phone upward. */
  .tl-line { left: 50%; right: auto; top: 0; width: 3px; height: 0; margin-left: -1.5px; }
  .tl-line i { left: 0; width: 3px; height: 100%; transition: opacity 500ms; }
  .tl-dead { background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0 4px, transparent 4px 14px); opacity: 0; }
  .tl-back { transform-origin: 50% 100%; transform: scaleY(0); }
  .tl.gone .tl-live { opacity: 0; }
  .tl.gone .tl-dead { opacity: 1; }
  /* The hours go by on one side of it, and your evening on the other. */
  .tl-hour { left: var(--gut); top: 0; width: calc(50% - var(--gut) - 18px); translate: none; text-align: right; font-size: clamp(60px, 19vw, 88px); white-space: nowrap; opacity: 0; transform: translateY(12px); transition: opacity 280ms, transform 380ms var(--ease-out); }
  .tl-note { left: calc(50% + 18px); right: var(--gut); top: 0; translate: none; white-space: normal; font-size: 15px; line-height: 1.3; opacity: 0; transform: translateY(8px); transition: opacity 320ms, transform 420ms var(--ease-out); }
  .tl-hour.on, .tl-note.on { opacity: 1; transform: none; }
  .tl-fly { left: 50%; top: 0; padding: 8px 12px; font-size: 14px; white-space: nowrap; z-index: 6; }
  /* Your phone stands in the bottom of the screen, and its question arrives on it. */
  .tl-phone { left: 50%; top: 0; width: min(264px, 70vw); height: auto; margin-left: calc(min(264px, 70vw) / -2); border-radius: 40px; }
  .tl-phone > .scr { border-radius: 32px; transition: filter 700ms; }
  .tl-phone.asleep > .scr { filter: brightness(0.5); }
  .tl-phone .notch { top: 16px; width: 72px; height: 20px; margin-left: -36px; }
  .tl-phone .ph-lock, .tl-phone .ic-d { display: none; }
  .tl-phone .icard { left: 6%; right: 6%; top: 46px; padding: 12px 12px 11px; opacity: 0; transform: translateY(-10px) scale(0.96); transition: opacity 350ms, transform 500ms var(--ease-out); }
  .tl-phone.got .icard { opacity: 1; transform: none; }
  .tl-phone .ic-q { margin-top: 6px; font-size: 17px; }
  .tl-phone .ic-btns { margin-top: 10px; }
  .tl-phone .ic-b { height: 34px; }
  .tl-orb { left: 50%; top: 0; margin: -11px 0 0 -11px; z-index: 2; }
  .tl-lost { left: 50%; top: 0; translate: -50% -50%; height: 30px; padding: 0 10px; font-size: 12.5px; z-index: 2; }
  .tl-wait { top: 0; bottom: auto; height: 32px; padding: 0 12px; font-size: 13px; z-index: 4; }
}


/* ── The headline that follows "They still answer in paragraphs." ────────
   It was kept on one line, which a phone is not wide enough for: its end ran off the side. */
@media (max-width: 759.98px) {
  .ww-h2 { right: 0; white-space: normal; }
}

/* ── A room for every job, on a phone: one card for each kind of room ────
   A row that drifts sideways shows a thing and a half on a phone, cut off at both ends. So
   here each kind is a card the width of the screen that says one thing at a time, whole,
   and turns to its next by itself (jobs.js). It is as tall as its longest thing to say, so
   that nothing under it moves when it turns. */
@media (max-width: 759.98px) {
  .jboard { display: grid; gap: 8px; padding: 0 var(--gut); }
  .jcard { display: grid; align-content: center; gap: 4px; padding: 12px 16px; border: 0; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--fg); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 140ms, background 200ms; }
  .jcard:active { transform: scale(0.985); background: var(--panel-2); }
  .jcard-k { font-size: 12.5px; font-weight: 500; color: var(--fg-faint); }
  .jcard-a { display: flex; align-items: center; min-height: 2.44em; font-family: var(--display); font-weight: 600; font-size: 17px; line-height: 1.22; letter-spacing: -0.02em; }
}