/* Got your note: the marketing page (from the Clear study in thenship-concept).
   White, one typeface, hairlines, and the annotation UI as the hero. */

@font-face { font-family: "Inter"; src: url("/assets/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #ffffff;
  --surface: #f8f8f9;
  --ink: #111113;
  --ink-2: #5e5e66;
  --ink-3: #9a9aa2;
  --line: #ececef;
  --line-2: #dfdfe4;
  --note: #ffe766;
  --note-2: #f1d34a;
  --note-soft: #fff7cc;
  --wf: #f1f1f3;
  --wf-2: #e6e6ea;
  --wf-3: #cdcdd3;
  --sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  --out: cubic-bezier(0.22, 1, 0.36, 1);
  --io: cubic-bezier(0.65, 0, 0.35, 1);
  --pop: cubic-bezier(0.34, 1.45, 0.64, 1);
  --card: 0 0 0 1px rgba(17, 17, 19, 0.06), 0 1px 2px rgba(17, 17, 19, 0.04), 0 12px 32px -12px rgba(17, 17, 19, 0.16);
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E");
  color-scheme: light;
  interpolate-size: allow-keywords;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--sans); letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-optical-sizing: auto; font-feature-settings: "cv11", "ss03"; }
::selection { background: var(--note); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
a { color: inherit; }
img { max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }
code { font: 400 0.85em/1 var(--mono); letter-spacing: 0; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 8px 12px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 14px; }
.skip-link:focus { top: 12px; }
.dim { color: var(--ink-3); }
.wrap { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.wrap-w { width: min(1200px, calc(100% - 32px)); margin-inline: auto; }
.wrap-n { width: min(680px, calc(100% - 48px)); margin-inline: auto; }

/* The mark: a note with its corner folded. */
.mark { width: 18px; height: 18px; overflow: visible; transition: transform 0.45s var(--pop); }
.mark .paper { fill: var(--note); stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.mark .fold { fill: var(--note-2); stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; transform-origin: 14px 14px; transition: transform 0.45s var(--pop); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
a.brand:hover .mark { transform: rotate(-8deg); }
a.brand:hover .mark .fold { transform: scale(1.25); }

/* Avatars: one colour per person, the agent in ink. */
.av { display: inline-grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--ink); font: 600 10.5px/1 var(--sans); letter-spacing: 0; }
.av-i { background: var(--note); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.av-t { background: #dde7ff; }
.av-k { background: #e3f2e6; }
.av-a { background: var(--ink); color: #fff; }
.av-a svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Buttons */
.btn { display: inline-flex; white-space: nowrap; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--ink); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(0, 0, 0, 0.18), 0 6px 16px -8px rgba(0, 0, 0, 0.4); font: 500 14.5px/1 var(--sans); letter-spacing: -0.01em; text-decoration: none; cursor: pointer; transition: background 0.2s, box-shadow 0.2s, transform 0.2s var(--out); }
.btn:hover { background: #2a2a2e; }
.btn:active { transform: scale(0.98); }
.btn-s { height: 32px; padding: 0 12px; border-radius: 8px; font-size: 13.5px; }
.btn-ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(0, 0, 0, 0.04); }
.btn-ghost:hover { background: var(--surface); }

/* Nav */
.nav { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, 0.82); border-bottom: 1px solid transparent; -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); }
@supports (animation-timeline: scroll()) {
  .nav { animation: hairline linear both; animation-timeline: scroll(); animation-range: 0 100px; }
  @keyframes hairline { to { border-bottom-color: var(--line); } }
}
.nav-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 60px; }
.links { display: flex; gap: 28px; }
.links a { color: var(--ink-2); font-size: 14px; text-decoration: none; transition: color 0.2s; }
.links a:hover { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 16px; justify-self: end; }
.nav-signin { color: var(--ink-2); font-size: 14px; text-decoration: none; transition: color 0.2s; }
.nav-signin:hover { color: var(--ink); }
.f-text .fine a { color: inherit; text-underline-offset: 3px; }

/* Hero */
.hero { padding-top: clamp(72px, 10vw, 128px); text-align: center; }
h1 { font-size: clamp(42px, 6.6vw, 76px); line-height: 1.02; letter-spacing: -0.045em; }
.sub { max-width: 34em; margin: 22px auto 0; color: var(--ink-2); font-size: clamp(16.5px, 1.6vw, 19px); line-height: 1.5; letter-spacing: -0.015em; }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 34px; }
/* The hero acts the product out: a note lands on "feedback", and "Tighten the loop" gets marked. */
.hero .sub { color: var(--ink); font-size: clamp(20px, 2.3vw, 26px); font-weight: 500; letter-spacing: -0.025em; }
.hs { white-space: nowrap; }
.br-s { display: none; }
.w-mark { position: relative; display: inline-block; }
.w-mark::before { content: ""; position: absolute; inset: 0.04em -0.05em -0.02em -0.04em; border-radius: 0.12em; box-shadow: 0 0 0 2px var(--note-2), 0 0 0 7px rgba(255, 231, 102, 0.35); opacity: 0; transform: scale(1.06); animation: ring 0.6s 0.9s var(--pop) forwards; pointer-events: none; }
.h-pin { position: absolute; top: -0.26em; right: -0.3em; display: grid; place-items: center; width: clamp(20px, 0.44em, 32px); height: clamp(20px, 0.44em, 32px); border: 2px solid #fff; border-radius: 50% 50% 50% 3px; background: var(--note); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06); transform: scale(0); transform-origin: 0 100%; animation: pin 0.55s 1.15s var(--pop) forwards; }
.h-pin b { font-size: clamp(9px, 0.18em, 13px); font-weight: 600; letter-spacing: 0; }
.w-hi { padding: 0 0.08em; margin: 0 -0.08em; border-radius: 0.12em; background: linear-gradient(var(--note), var(--note)) 0 90% / 0% 45% no-repeat; animation: mark 0.7s 2s var(--io) forwards; }
/* Who it's for is typed out, deleted and retyped, with a blinking cursor so it reads as live. */
.rot { white-space: nowrap; }
.rot-c { display: inline-block; width: 0.07em; height: 0.82em; margin-left: 0.04em; vertical-align: -0.04em; border-radius: 0.03em; background: var(--note-2); animation: blink 1.05s steps(1) infinite; }
.rot.typing .rot-c { animation: none; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes ring { to { opacity: 1; transform: none; } }
@keyframes pin { to { transform: scale(1); } }
@keyframes mark { to { background-size: 100% 42%; } }
.btn-note { background: var(--note); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 20px -10px rgba(180, 140, 0, 0.6); }
.btn-note:hover { background: var(--note-2); }
.btn-note .mark { width: 17px; height: 17px; margin-left: -2px; }
.btn-note:hover .mark .fold { transform: rotate(-12deg); }
.try { margin-top: 14px; color: var(--ink-3); font-size: 13.5px; }
.hero > * { animation: rise 1s var(--out) both; }
.hero > :nth-child(2) { animation-delay: 0.08s; }
.hero > :nth-child(3) { animation-delay: 0.16s; }
.hero > :nth-child(4) { animation-delay: 0.24s; }
.demo { animation: rise 1.1s 0.3s var(--out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } }

/* ---------- The product window ---------- */
.demo { position: relative; margin-top: clamp(56px, 7vw, 88px); }
.demo-in { position: relative; }
.demo-in::before { content: ""; position: absolute; inset: 8% 10% auto; height: 70%; z-index: -1; background: radial-gradient(closest-side, rgba(255, 231, 102, 0.28), transparent); filter: blur(40px); pointer-events: none; }
.app { overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, 0.07), 0 2px 4px rgba(17, 17, 19, 0.03), 0 32px 80px -32px rgba(17, 17, 19, 0.28); }
.app-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 44px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #fcfcfd; }
.dots { display: flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--wf-2); }
.url { padding: 4px 12px; border-radius: 7px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); font-size: 12.5px; }
.rev { justify-self: end; height: 22px; overflow: hidden; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-2); font: 500 11px/22px var(--mono); }
.roll { display: grid; transition: transform 0.55s var(--pop); }
.roll b { padding: 0 7px; font-weight: 500; }
.roll b + b { background: var(--ink); color: #fff; }
.at-4 .roll { transform: translateY(-22px); transition-delay: 0.2s; }
.app-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; }

/* The reviewed page: anonymous, so the notes stand out. */
.pg { position: relative; aspect-ratio: 16 / 12; overflow: hidden; background: #fff; container-type: inline-size; }
.w { position: absolute; display: block; border-radius: 0.8cqi; }
.nav-l { left: 6cqi; top: 5cqi; width: 10cqi; height: 2.2cqi; background: var(--wf-2); border-radius: 0.6cqi; }
.nav-r { right: 6cqi; top: 5.4cqi; display: flex; gap: 2.6cqi; }
.nav-r i { width: 5.5cqi; height: 1.2cqi; border-radius: 0.6cqi; background: var(--wf); }
.h1a { left: 6cqi; top: 20cqi; width: 40cqi; height: 3.6cqi; background: var(--wf-2); }
.h1b { left: 6cqi; top: 25.4cqi; width: 27cqi; height: 3.6cqi; background: var(--wf-2); }
.pa, .pb, .pc { left: 6cqi; height: 1.3cqi; background: var(--wf); }
.pa { top: 33.6cqi; width: 42cqi; }
.pb { top: 36.8cqi; width: 40cqi; }
.pc { top: 40cqi; width: 28cqi; }
.cta, .ghost { top: 46cqi; display: grid; place-items: center; height: 5.2cqi; border-radius: 1.1cqi; }
.cta { z-index: 1; left: 6cqi; width: 15cqi; box-shadow: inset 0 0 0 0.22cqi var(--ink); transition: background 0.5s var(--out); }
.cta > i { width: 7cqi; height: 1.1cqi; border-radius: 0.6cqi; background: var(--ink); transition: background 0.5s var(--out); }
.ghost { left: 23cqi; width: 11cqi; background: var(--wf); }
.ghost i { width: 6cqi; height: 1.1cqi; border-radius: 0.6cqi; background: var(--wf-3); }
.img { right: 6cqi; top: 17cqi; display: grid; place-items: center; width: 38cqi; height: 36cqi; border-radius: 1.6cqi; background: var(--wf); }
.img > svg { width: 12cqi; aspect-ratio: 80 / 64; fill: none; stroke: var(--wf-3); stroke-width: 2; stroke-linejoin: round; }
.at-4 .cta { background: var(--ink); transition-delay: 0.3s; }
.at-4 .cta > i { background: #fff; transition-delay: 0.3s; }

/* Pins: a note's author, stuck on what they meant. */
.hl { position: absolute; inset: -0.9cqi; z-index: -1; border-radius: 1.8cqi; box-shadow: 0 0 0 2px var(--note-2), 0 0 0 6px rgba(255, 231, 102, 0.35); opacity: 0; transform: scale(1.1); transition: opacity 0.3s, transform 0.5s var(--pop); }
.at-1 .hl { opacity: 1; transform: none; transition-delay: 1s; }
.at-5 .hl { opacity: 0; transform: scale(0.96); transition-delay: 1.1s; }
.pin, .pin-s { position: absolute; display: grid; place-items: center; padding: 0; border: 2px solid #fff; border-radius: 50% 50% 50% 3px; background: var(--note); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06); color: var(--ink); transform: scale(0); transform-origin: 0 100%; transition: transform 0.5s var(--pop), background 0.3s, color 0.3s; }
.pin > *, .pin-s > * { grid-area: 1 / 1; transition: opacity 0.2s; }
.pin svg, .pin-s svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.pin { top: -15px; right: -15px; z-index: 3; width: 28px; height: 28px; font: 600 11px/1 var(--sans); cursor: pointer; }
.pin::after { content: ""; position: absolute; inset: -8px; }
.pin:hover { transform: scale(1.08) !important; }
.pin-s { top: -10px; right: -12px; width: 22px; height: 22px; font: 600 9.5px/1 var(--sans); }
.pin-tom { background: #dde7ff; }
.pin-karim { top: 1.5cqi; right: 1.5cqi; background: #e3f2e6; }
.at-1 .pin { transform: none; transition-delay: 1.2s; }
.at-1 .pin-tom { transform: none; transition-delay: 2.2s; }
.at-1 .pin-karim { transform: none; transition-delay: 2.8s; }
.at-2 .pin-karim { background: var(--wf-2); color: var(--ink-3); transition-delay: 0.9s; }
.at-2 .pin-karim b { opacity: 0; transition-delay: 0.9s; }
.at-2 .pin-karim svg { opacity: 1; transition-delay: 0.9s; }
.at-5 .pin { background: var(--ink); color: #fff; transition-delay: 1.2s; }
.at-5 .pin b { opacity: 0; transition-delay: 1.2s; }
.at-5 .pin svg { opacity: 1; transition-delay: 1.2s; }

/* Cursors */
.cur { position: absolute; z-index: 6; display: flex; align-items: flex-start; pointer-events: none; opacity: 0; }
.cur svg { width: 15px; aspect-ratio: 20 / 22; fill: var(--ink); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.25)); transition: transform 0.15s var(--out); }
.cur em { margin: 12px 0 0 -3px; padding: 2px 7px; border-radius: 99px; background: var(--ink); color: #fff; font: 600 10.5px/1.4 var(--sans); font-style: normal; }
.cur-ines em { background: var(--note); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.cur-ines { left: 55%; top: 45%; transform: translate(26cqi, 18cqi); transition: transform 0.95s var(--io), opacity 0.3s; }
.at-1 .cur-ines { opacity: 1; transform: none; transition-delay: 0.1s; }
.at-2 .cur-ines { opacity: 0; transform: translate(4cqi, 3cqi); transition: transform 0.6s var(--out), opacity 0.4s; transition-delay: 0.1s; }
.now-1 .cur-ines svg { animation: tap 0.3s 1s var(--out); }
@keyframes tap { 50% { transform: scale(0.8); } }

/* The thread: the note, your agent's reply and your yes, in one place. */
.thread { position: absolute; left: calc(24cqi / var(--k, 1)); top: calc(41cqi / var(--k, 1)); z-index: 5; zoom: var(--k, 1); width: 300px; padding: 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, 0.07), 0 16px 40px -12px rgba(17, 17, 19, 0.24); font-size: 13px; line-height: 1.45; opacity: 0; transform: translateY(6px) scale(0.97); transform-origin: 0 0; transition: opacity 0.35s var(--out), transform 0.5s var(--out); }
.at-1 .thread { opacity: 1; transform: none; transition-delay: 1.45s; }
.th-msg { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
.th-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; font-size: 12.5px; }
.th-meta b { font-weight: 600; }
.th-meta > span { color: var(--ink-3); }
.th-meta code, .chip-el { padding: 2px 5px; border-radius: 5px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: 10.5px; }
.th-text { margin-top: 3px; color: var(--ink); }
.type { clip-path: inset(0 100% 0 0); transition: clip-path 1s steps(40, end); }
.at-1 .type { clip-path: inset(0 0 0 0); transition-delay: 1.75s; }
.grow { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--out); }
.grow > .in { min-height: 0; overflow: hidden; }
.g-agent > .in { opacity: 0; transition: opacity 0.35s; }
.th-agent { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.at-3 .g-agent { grid-template-rows: 1fr; transition-delay: 0.15s; }
.at-3 .g-agent > .in { opacity: 1; transition-delay: 0.3s; }
.st { display: inline-grid; }
.st > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; transition: opacity 0.25s; }
.st2 { opacity: 0; color: var(--ink); font-weight: 500; }
.at-4 .st1 { opacity: 0; transition-delay: 1.2s; }
.at-4 .st2 { opacity: 1; transition-delay: 1.2s; }
.th-diff { color: var(--ink-2); font: 400 11.5px/1.5 var(--mono); }
.th-diff code { margin-right: 4px; color: var(--ink-3); font-size: 1em; }
.th-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-top: 8px; }
.sh { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 7px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sh i { width: 38%; height: 20%; border-radius: 3px; box-shadow: inset 0 0 0 1.25px var(--ink); }
.sh-after i { background: var(--ink); }
.sh em { position: absolute; left: 6px; bottom: 3px; color: var(--ink-3); font: 400 9.5px/1.2 var(--mono); font-style: normal; }
.at-4 .g-shots { grid-template-rows: 1fr; transition-delay: 1.25s; }
.th-foot { display: flex; justify-content: flex-end; padding-top: 12px; }
.at-4 .g-foot { grid-template-rows: 1fr; transition-delay: 1.45s; }
.th-ok { position: relative; display: grid; place-items: center; height: 30px; padding: 0 12px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 500; transition: background 0.3s, color 0.3s, box-shadow 0.3s; }
.th-ok > .o1, .th-ok > .o2 { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; transition: opacity 0.2s; }
.th-ok .o2 { opacity: 0; }
.th-ok svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset 0.45s var(--out); }
.at-5 .th-ok { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); transition-delay: 1s; }
.at-5 .th-ok .o1 { opacity: 0; transition-delay: 1s; }
.at-5 .th-ok .o2 { opacity: 1; transition-delay: 1s; }
.at-5 .th-ok svg { stroke-dashoffset: 0; transition-delay: 1.1s; }
.now-5 .th-ok { animation: press 0.25s 0.85s var(--out); }
@keyframes press { 50% { transform: scale(0.95); } }
.told { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding: 7px 9px; border-radius: 8px; background: var(--note-soft); color: var(--ink); font-size: 12px; font-weight: 500; }
.told .av { width: 18px; height: 18px; font-size: 9px; }
.told svg { width: 12px; height: 12px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.at-5 .g-told { grid-template-rows: 1fr; transition-delay: 1.9s; }
.cur-ok { left: 55%; top: 55%; transform: translate(60px, 50px); transition: transform 0.8s var(--io), opacity 0.3s; }
.at-5 .cur-ok { opacity: 1; transform: none; transition-delay: 0.1s; }
.now-5 .cur-ok svg { animation: tap 0.3s 0.85s var(--out); }
.spin { width: 10px; height: 10px; border: 1.5px solid var(--line-2); border-top-color: var(--ink-2); border-radius: 50%; animation: spin 0.8s linear infinite; }
.app:not(.playing) .spin { animation-play-state: paused; }
@keyframes spin { to { transform: rotate(1turn); } }
.shutter { position: absolute; inset: 0; z-index: 4; background: #fff; opacity: 0; pointer-events: none; }
.now-4 .shutter { animation: flash 0.55s 0.85s var(--out); }
@keyframes flash { 20% { opacity: 0.7; } }

/* The notes sidebar: everything lands here first. */
.side { position: relative; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: #fcfcfd; }
.side-head { display: flex; align-items: center; justify-content: space-between; height: 48px; flex: none; padding: 0 14px 0 16px; border-bottom: 1px solid var(--line); }
.side-head b { font-size: 13.5px; font-weight: 600; }
.tabs { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.tab { padding: 3px 8px; border-radius: 6px; color: var(--ink-3); font-size: 11.5px; font-weight: 500; }
.tab.on { background: #fff; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, 0.05); color: var(--ink); }
.side-empty { position: absolute; inset: 48px 0 0; display: grid; place-items: center; padding: 24px; color: var(--ink-3); font-size: 13px; text-align: center; transition: opacity 0.3s; }
.at-1 .side-empty { opacity: 0; transition-delay: 1.4s; }
.rows { margin: 0; padding: 8px; list-style: none; }
.row { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 10px; border-radius: 10px; font-size: 13px; line-height: 1.4; opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.5s var(--out), background 0.3s, box-shadow 0.3s; }
.row + .row { margin-top: 2px; }
.row p { color: var(--ink-2); }
.row p b { margin-right: 4px; color: var(--ink); font-weight: 600; }
.chip-el { display: inline-block; margin-top: 6px; }
.at-1 .row { opacity: 1; transform: none; }
.at-1 .r-i { background: #fff; box-shadow: 0 0 0 1px var(--line), 0 1px 3px rgba(0, 0, 0, 0.05); transition-delay: 1.6s; }
.at-1 .r-t { transition-delay: 2.3s; }
.at-1 .r-k { transition-delay: 2.9s; }
.reply { max-height: 0; margin: 0; overflow: hidden; color: var(--ink-3) !important; opacity: 0; transition: max-height 0.4s var(--out), margin 0.4s var(--out), opacity 0.3s; }
.reply b { color: var(--ink-2) !important; }
.at-2 .reply { max-height: 20px; margin-top: 4px; opacity: 1; }
.at-2 .r-k .reply { transition-delay: 0.3s; }
.at-2 .r-t .reply { transition-delay: 1.1s; }
.at-2 .r-k > div > p:first-child { opacity: 0.55; transition: opacity 0.3s 0.9s; }
.state { display: grid; justify-items: end; padding-top: 1px; }
.state > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); font-size: 11.5px; font-weight: 500; white-space: nowrap; opacity: 0; transition: opacity 0.25s; }
.state svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.state .k0 { opacity: 1; }
.state .k0::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--note-2); }
.r-i .k1 { background: var(--ink); box-shadow: none; color: #fff; }
.r-i .k2, .r-i .k3, .r-i .k5 { color: var(--ink); }
.r-i .k4 { background: var(--note-soft); box-shadow: inset 0 0 0 1px var(--note-2); color: var(--ink); }
.r-k .k1 { background: var(--surface); box-shadow: none; color: var(--ink-3); }
.at-2 :is(.r-t, .r-k) .k0 { opacity: 0; }
.at-2 :is(.r-t, .r-k) .k1 { opacity: 1; }
.at-2 .r-k :is(.k0, .k1) { transition-delay: 0.9s; }
.at-2 .r-t :is(.k0, .k1) { transition-delay: 1.6s; }
.at-2 .r-i .k0 { opacity: 0; transition-delay: 1.9s; }
.now-2 .r-i .k1 { animation: send 3.8s linear both; }
@keyframes send { 0%, 49% { opacity: 0; } 51%, 66% { opacity: 1; transform: none; } 68% { transform: scale(0.94); } 71% { opacity: 1; transform: none; } 74%, 100% { opacity: 0; } }
.at-2 .r-i .k2 { opacity: 1; transition-delay: 2.8s; }
.at-3 .r-i .k2 { opacity: 0; transition-delay: 0.2s; }
.at-3 .r-i .k3 { opacity: 1; transition-delay: 0.2s; }
.at-4 .r-i .k3 { opacity: 0; transition-delay: 1.5s; }
.at-4 .r-i .k4 { opacity: 1; transition-delay: 1.5s; }
.at-5 .r-i .k4 { opacity: 0; transition-delay: 1.2s; }
.at-5 .r-i .k5 { opacity: 1; transition-delay: 1.2s; }
.cur-you { top: 12px; right: 40px; transform: translate(-60px, 70px); transition: transform 0.8s var(--io), opacity 0.3s; }
.at-2 .cur-you { opacity: 1; transform: none; transition-delay: 1.8s; }
.now-2 .cur-you svg { animation: tap 0.3s 2.55s var(--out); }
.at-3 .cur-you { opacity: 0; transform: translate(8px, 12px); transition-delay: 0.1s; }

/* Rewind: ease back to the untouched page. */
.app.rewind :is(.hl, .pin, .pin-s, .cur, .thread, .row) { opacity: 0 !important; transition: opacity 0.35s var(--out) !important; }
.app.rewind .cta { background: transparent; transition-delay: 0s; }
.app.rewind .cta > i { background: var(--ink); transition-delay: 0s; }
.app.rewind .roll { transform: none; transition-delay: 0s; }
.app.rewind .side-empty { opacity: 1; transition-delay: 0.1s; }
.app.instant, .app.instant * { transition: none !important; animation: none !important; }

/* Steps under the window */
.rail { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 22px; }
.play { display: grid; flex: none; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); cursor: pointer; transition: transform 0.2s var(--out); }
.play:active { transform: scale(0.92); }
.play svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.play svg.i-play { fill: currentColor; stroke: none; transform: translateX(0.5px); }
.rail ol { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.step { position: relative; padding: 6px 11px 9px; border: 0; border-radius: 8px; background: none; color: var(--ink-3); font: 500 13.5px/1.2 var(--sans); letter-spacing: -0.01em; cursor: pointer; transition: color 0.25s, background 0.2s; }
.step i { position: absolute; bottom: 3px; left: 11px; width: calc((100% - 22px) * var(--p, 0)); height: 1.5px; border-radius: 1px; background: var(--ink); }
.step.is-past i { width: calc(100% - 22px); }
.step:hover { background: var(--surface); color: var(--ink-2); }
.step[aria-current], .step.is-past { color: var(--ink); }

.kinds { padding-top: clamp(80px, 10vw, 128px); }
.kinds .f-text { max-width: 620px; }

/* What it works on: four anonymous things an agent might build. */
.kind-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; }
.kind p { margin-top: 12px; color: var(--ink-2); font-size: 14px; font-weight: 500; }
.thumb { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; background: linear-gradient(180deg, #fafafb, #f4f4f6); box-shadow: inset 0 0 0 1px var(--line); transition: transform 0.4s var(--out), box-shadow 0.4s var(--out); }
.kind:hover .thumb { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-2), 0 14px 30px -18px rgba(17, 17, 19, 0.3); }
.thumb i, .thumb span { position: absolute; display: block; }
.tp { display: grid !important; place-items: center; width: 22px; height: 22px; border: 2px solid #fff; border-radius: 50% 50% 50% 3px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); font-size: 9.5px; font-weight: 600; transform-origin: 0 100%; transition: transform 0.45s var(--pop); }
.kind:hover .tp { transform: scale(1.15) rotate(-6deg); }
.t-page .a { left: 12%; top: 22%; width: 34%; height: 7%; border-radius: 3px; background: var(--wf-3); }
.t-page .b { left: 12%; top: 34%; width: 30%; height: 4%; border-radius: 2px; background: var(--wf-2); }
.t-page .c { left: 12%; top: 42%; width: 24%; height: 4%; border-radius: 2px; background: var(--wf-2); }
.t-page .btn-w { left: 12%; top: 56%; width: 18%; height: 10%; border-radius: 4px; background: var(--ink); }
.t-page .img-w { right: 12%; top: 20%; width: 32%; height: 50%; border-radius: 6px; background: var(--wf-2); }
.t-page .tp { left: 26%; top: 47%; }
.t-deck .slide { left: 14%; top: 14%; width: 72%; height: 54%; border-radius: 5px; background: #fff; box-shadow: var(--card); }
.t-deck .slide .a { left: 10%; top: 16%; width: 46%; height: 12%; border-radius: 2px; background: var(--wf-3); }
.t-deck .slide :is(.b, .c, .d) { left: 10%; width: 60%; height: 6%; border-radius: 2px; background: var(--wf-2); }
.t-deck .slide .b { top: 44%; }
.t-deck .slide .c { top: 58%; width: 52%; }
.t-deck .slide .d { top: 72%; width: 40%; }
.t-deck .strip { left: 14%; bottom: 10%; display: flex !important; gap: 4%; width: 72%; height: 13%; }
.t-deck .strip i { position: static; flex: 1; border-radius: 3px; background: var(--wf-2); }
.t-deck .strip .on { box-shadow: 0 0 0 1.5px var(--ink); background: #fff; }
.t-deck .tp { right: 10%; top: 8%; }
.t-proto .phone { left: 50%; top: 10%; width: 30%; height: 80%; border-radius: 9px; background: #fff; box-shadow: var(--card); transform: translateX(-50%); }
.t-proto .phone .a { left: 12%; top: 10%; width: 50%; height: 6%; border-radius: 2px; background: var(--wf-3); }
.t-proto .phone .r { left: 12%; width: 76%; height: 12%; border-radius: 4px; background: var(--wf); }
.t-proto .phone .r:nth-child(2) { top: 24%; }
.t-proto .phone .r:nth-child(3) { top: 40%; }
.t-proto .phone .r:nth-child(4) { top: 56%; }
.t-proto .phone .tab { left: 12%; bottom: 7%; width: 76%; height: 7%; border-radius: 99px; background: var(--wf-2); }
.t-proto .tp { left: 60%; top: 36%; }
.t-doc .a { left: 14%; top: 16%; width: 40%; height: 7%; border-radius: 3px; background: var(--wf-3); }
.t-doc :is(.b, .c) { left: 14%; width: 66%; height: 4%; border-radius: 2px; background: var(--wf-2); }
.t-doc .b { top: 29%; }
.t-doc .c { top: 36%; width: 52%; }
.t-doc .bars { left: 14%; bottom: 14%; display: flex !important; align-items: flex-end; gap: 5%; width: 56%; height: 36%; }
.t-doc .bars i { position: static; flex: 1; border-radius: 3px 3px 0 0; background: var(--wf-2); }
.t-doc .bars i:nth-child(1) { height: 40%; }
.t-doc .bars i:nth-child(2) { height: 62%; }
.t-doc .bars i:nth-child(3) { height: 48%; }
.t-doc .bars i:nth-child(4) { height: 86%; background: var(--wf-3); }
.t-doc .bars i:nth-child(5) { height: 70%; }
.t-doc .tp { left: 52%; top: 46%; }

/* ---------- Features ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(40px, 6vw, 88px); padding-top: clamp(80px, 10vw, 128px); }
.feature.flip .f-text { order: 2; }
.feature.stack { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.feature.stack .f-text { max-width: 560px; }
/* The four chapters hang on one line: as you scroll, a note travels down it and each step lights up. */
.story { position: relative; padding-left: clamp(38px, 6vw, 88px); }
.story .feature { padding-top: clamp(96px, 12vw, 160px); }
.spine { position: absolute; top: 0; bottom: 0; left: 0; width: 26px; pointer-events: none; }
.spine .line { position: absolute; left: 12px; top: var(--a, 0); width: 2px; height: var(--len, 0); border-radius: 1px; background: var(--line); }
.spine .line i { position: absolute; inset: 0; border-radius: inherit; background: var(--ink); transform: scaleY(var(--p, 0)); transform-origin: 0 0; }
.spine .dot { position: absolute; left: 0; top: var(--y, 0); display: grid; place-items: center; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink-3); font: 600 12px/1 var(--sans); transition: background 0.3s, color 0.3s, box-shadow 0.3s, transform 0.4s var(--pop); }
.spine .dot.lit { background: var(--ink); box-shadow: none; color: #fff; }
.spine .dot.now { background: var(--note); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 5px rgba(255, 231, 102, 0.4); color: var(--ink); transform: scale(1.12); }
.rider { position: absolute; left: 1px; top: calc(var(--a, 0px) + var(--len, 0px) * var(--p, 0)); display: grid; place-items: center; width: 24px; height: 24px; margin-top: -12px; border-radius: 7px; background: #fff; box-shadow: 0 2px 8px rgba(17, 17, 19, 0.16), 0 0 0 1px rgba(17, 17, 19, 0.06); opacity: 0; transition: opacity 0.3s; }
.story.going .rider { opacity: 1; }
.rider .mark { width: 15px; height: 15px; }
.rider .ok { position: absolute; width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.story.done .rider { background: var(--ink); }
.story.done .rider .mark { opacity: 0; }
.story.done .rider .ok { opacity: 1; }
.f-text h2 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.06; letter-spacing: -0.04em; }
.f-text p { margin-top: 16px; color: var(--ink-2); font-size: 16.5px; line-height: 1.6; }
.f-text .fine { margin-top: 14px !important; color: var(--ink-3) !important; font-size: 13.5px !important; }
.f-fig { position: relative; display: grid; place-items: center; height: clamp(300px, 32vw, 380px); margin: 0; overflow: hidden; border-radius: 18px; background: linear-gradient(180deg, #fafafb, #f4f4f6); box-shadow: inset 0 0 0 1px var(--line); }
.pop { border-radius: 12px; background: #fff; box-shadow: var(--card); font-size: 13px; line-height: 1.45; }
.fig * { animation-play-state: paused !important; }
.fig.in-view * { animation-play-state: running !important; }

/* Leave a note: someone types on the page itself. */
.mini { position: absolute; left: 12%; top: 18%; width: 46%; padding: 22px; border-radius: 12px; background: #fff; box-shadow: var(--card); }
.m-l { display: block; width: 80%; height: 8px; border-radius: 4px; background: var(--wf-2); }
.m-l.s { width: 55%; margin-top: 8px; background: var(--wf); }
.m-btn { position: relative; display: block; width: 72px; height: 24px; margin-top: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--ink); }
.m-pin { position: absolute; top: -11px; right: -11px; display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid #fff; border-radius: 50% 50% 50% 3px; background: var(--note); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); font-size: 9.5px; font-weight: 600; }
.compose { position: absolute; left: 34%; top: 48%; width: min(320px, 58%); padding: 12px; }
/* Three ways in, one after the other: point at a button, frame an area, select words. */
.modes { position: absolute; top: 7%; left: 50%; display: flex; gap: 4px; padding: 3px; border-radius: 9px; background: #fff; box-shadow: var(--card); transform: translateX(-50%); }
.md { padding: 4px 10px; border-radius: 6px; color: var(--ink-3); font-size: 12px; font-weight: 500; white-space: nowrap; }
.md.ph-a, .md.ph-b, .md.ph-c { opacity: 1; animation-name: tab; }
.m-l.s { position: relative; }
.m-sel { position: absolute; inset: -3px -4px; border-radius: 3px; background: var(--mark, rgba(255, 226, 77, 0.55)); }
.m-img { position: relative; display: block; height: 46px; margin-top: 14px; border-radius: 6px; background: var(--wf); }
.m-frame { position: absolute; inset: -5px; border: 1.5px dashed var(--note-2); border-radius: 8px; background: rgba(255, 231, 102, 0.14); }
.cms { display: grid; }
.cm { grid-area: 1 / 1; }
.ph-a, .ph-b, .ph-c { opacity: 0; animation: phase 9s infinite; }
.ph-b { animation-delay: -6s; }
.ph-c { animation-delay: -3s; }
.cm .typed { animation: typed3 9s steps(30, end) infinite; }
.cm.ph-b .typed { animation-delay: -6s; }
.cm.ph-c .typed { animation-delay: -3s; }
.fig-compose .post { animation-duration: 3s; }
@keyframes phase { 0%, 32% { opacity: 1; } 33.3%, 100% { opacity: 0; } }
@keyframes tab { 0%, 32% { background: var(--ink); color: #fff; } 33.3%, 100% { background: none; color: var(--ink-3); } }
@keyframes typed3 { 0%, 3% { max-width: 0; } 18%, 100% { max-width: 22em; } }
.compose .th-meta .av { width: 20px; height: 20px; font-size: 9.5px; }
.field { margin-top: 10px; padding: 9px 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); white-space: nowrap; overflow: hidden; }
.typed { display: inline-block; max-width: 0; overflow: hidden; vertical-align: bottom; white-space: nowrap; animation: typed 6s steps(40, end) infinite; }
.caret { display: inline-block; width: 1.5px; height: 15px; margin-left: 1px; vertical-align: -3px; background: var(--ink); animation: blink 1s steps(1) infinite; }
@keyframes typed { 0%, 8% { max-width: 0; } 45%, 92% { max-width: 22em; } 100% { max-width: 0; } }
@keyframes blink { 50% { opacity: 0; } }
.pop-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.hint { color: var(--ink-3); font-size: 12px; }
.post { padding: 5px 10px; border-radius: 7px; background: var(--wf-2); color: var(--ink-3); font-size: 12px; font-weight: 500; animation: post 6s var(--out) infinite; }
@keyframes post { 0%, 46% { background: var(--wf-2); color: var(--ink-3); } 50%, 92% { background: var(--ink); color: #fff; } }

/* Choose: only one note goes on. */
.list { width: min(440px, 86%); padding: 6px; }
.list-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border-radius: 9px; }
.list-row + .list-row { margin-top: 2px; }
.list-row .t { overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.act { padding: 4px 9px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); font-size: 12px; font-weight: 500; }
.act.send { background: var(--ink); box-shadow: none; color: #fff; animation: pick 4.5s var(--out) infinite; }
.list-row.mine + .list-row { background: var(--surface); }
.av-o { background: var(--ink); color: #fff; }
.act.went { box-shadow: none; color: var(--ok); }
.act.queued { background: rgba(255, 231, 102, 0.35); box-shadow: inset 0 0 0 1px var(--note-2, #f5d63d); color: var(--ink); }
.list-foot { display: flex; justify-content: flex-end; margin: 6px 4px 4px; }
.dim-row { opacity: 0.5; }
@keyframes pick { 0%, 40% { transform: none; } 44% { transform: scale(0.94); } 48%, 100% { transform: none; } }

/* Fix: the terminal your agent already lives in. */
.term { width: min(460px, 88%); padding: 18px 20px; border-radius: 12px; background: #fff; box-shadow: var(--card); font: 400 12.5px/1.85 var(--mono); letter-spacing: 0; }
.tl { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; animation: line 7s steps(1) infinite both; }
.tl .p { margin-right: 8px; color: var(--ink-3); }
.tl.o { color: var(--ink-2); }
.tl.gap { margin-top: 10px; }
.tl.you { margin-inline: -20px; padding-inline: 20px; background: var(--note-soft); color: var(--ink); }
.tl.ok::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; background: var(--ink); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; }
.tl:nth-child(2) { animation-delay: 0.35s; }
.tl:nth-child(3) { animation-delay: 0.8s; }
.tl:nth-child(4) { animation-delay: 1.5s; }
.tl:nth-child(5) { animation-delay: 1.9s; }
.tl:nth-child(6) { animation-delay: 2.6s; }
.tl:nth-child(7) { animation-delay: 3.1s; }
.tl:nth-child(8) { animation-delay: 3.6s; }
.tl:nth-child(9) { animation-delay: 4.2s; }
.fig-term { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.term.cc { width: min(500px, 92%); padding: 16px 18px; border-radius: 12px; background: #1a1a19; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 50px -24px rgba(0, 0, 0, 0.55); color: #e8e6e3; font-size: 12px; line-height: 1.75; }
.cc .tl { color: #e8e6e3; }
.cc-head, .cc-you { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc .tl.o { color: #a3a09b; }
.cc .tl b { font-weight: 600; }
.cc-head { margin: 0 0 10px; padding: 6px 10px; border: 1px solid #d97757; border-radius: 6px; color: #e8e6e3; font-weight: 500; }
.cc-star { color: #d97757; }
.cc-dir { margin-left: 6px; color: #8a8782; }
.cc-you { margin-bottom: 6px; padding: 4px 10px; border: 1px solid #4a4845; border-radius: 6px; }
.cc-p { margin-right: 6px; color: #8a8782; }
.cc-dot { color: #5fb36b; }
.cc-l { display: inline-block; width: 1.6em; margin-left: 0.4em; color: #6b6964; }
.cc .tl.you { margin: 0; padding: 0; background: none; color: #f3d877; }
.cc .tl.add { color: #7fc68a; }
.cc .tl.ok::before { display: none; }
/* The session plays out a line at a time, holds, then fades as one and starts over: no line blinks on its own. */
.cc-run .tl:nth-child(1) { animation: cc1 10s infinite; }
.cc-run .tl:nth-child(2) { animation: cc2 10s infinite; }
.cc-run .tl:nth-child(3) { animation: cc3 10s infinite; }
.cc-run .tl:nth-child(4) { animation: cc4 10s infinite; }
.cc-run .tl:nth-child(5) { animation: cc5 10s infinite; }
.cc-run .tl:nth-child(6) { animation: cc6 10s infinite; }
.cc-run .tl:nth-child(7) { animation: cc7 10s infinite; }
.cc-run .tl:nth-child(8) { animation: cc8 10s infinite; }
@keyframes cc1 { 0%, 3.5% { opacity: 0; } 5.5%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cc2 { 0%, 8.0% { opacity: 0; } 10.0%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cc3 { 0%, 15.0% { opacity: 0; } 17.0%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cc4 { 0%, 19.0% { opacity: 0; } 21.0%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cc5 { 0%, 26.0% { opacity: 0; } 28.0%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cc6 { 0%, 31.0% { opacity: 0; } 33.0%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cc7 { 0%, 36.0% { opacity: 0; } 38.0%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cc8 { 0%, 42.0% { opacity: 0; } 44.0%, 92% { opacity: 1; } 100% { opacity: 0; } }

@keyframes line { 0% { opacity: 0; } 2%, 90% { opacity: 1; } 100% { opacity: 0; } }

/* Review: the real thing, interactive. */
.compare-wrap { width: 100%; max-width: 860px; }
.comparison { position: relative; aspect-ratio: 1280 / 900; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, 0.07), 0 24px 60px -30px rgba(17, 17, 19, 0.25); }
.comparison img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.comparison .before { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.comparison .tag { position: absolute; top: 14px; z-index: 2; padding: 4px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.88); box-shadow: 0 0 0 1px var(--line); color: var(--ink-2); font: 400 11px/1.3 var(--mono); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tag-before { left: 14px; }
.tag-after { right: 14px; }
.divider { position: absolute; top: 0; bottom: 0; left: var(--split); width: 1px; background: var(--ink); pointer-events: none; }
.grip { position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111113' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 5 3 8l3 3M10 5l3 3-3 3'/%3E%3C/svg%3E") center / 16px no-repeat; box-shadow: 0 0 0 1px var(--line-2), 0 4px 12px -4px rgba(0, 0, 0, 0.25); transform: translate(-50%, -50%); transition: transform 0.25s var(--out); }
.comparison:hover .grip { transform: translate(-50%, -50%) scale(1.06); }
.comparison:has(input:focus-visible) .grip { outline: 2px solid var(--ink); outline-offset: 3px; }
#compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.review-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 12px 12px 12px 14px; border-radius: 14px; background: #fff; box-shadow: var(--card); }
.review-bar p { display: flex; align-items: center; gap: 12px; font-size: 14.5px; }
.review-bar b { font-weight: 600; }
.review-bar .dim { display: block; font-size: 13px; }
.approve { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 38px; padding: 0 15px; border: 0; border-radius: 10px; background: var(--ink); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(0, 0, 0, 0.2); font: 500 14px/1 var(--sans); cursor: pointer; transition: background 0.2s, transform 0.2s var(--out); }
.approve:hover { background: #2a2a2e; }
.approve:active { transform: scale(0.98); }
.approve svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.approve:disabled { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); cursor: default; }

/* ---------- Details ---------- */
.details { padding-top: clamp(112px, 13vw, 160px); }
.details > h2 { font-size: clamp(28px, 3vw, 36px); letter-spacing: -0.035em; }
.d-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 40px; margin-top: 40px; }
.d-grid > div { padding-top: 18px; border-top: 1px solid var(--line); }
.d-grid h3 { font-size: 15px; letter-spacing: -0.015em; }
.d-grid p { margin-top: 6px; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.request { margin-top: 44px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.request summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; font-size: 15px; font-weight: 600; list-style: none; cursor: pointer; }
.request summary::-webkit-details-marker { display: none; }
.request summary::after, .faq-list summary::after { content: ""; flex: none; width: 11px; height: 11px; background: linear-gradient(var(--ink-2), var(--ink-2)) center / 100% 1.5px no-repeat, linear-gradient(var(--ink-2), var(--ink-2)) center / 1.5px 100% no-repeat; transition: transform 0.35s var(--out); }
.request[open] summary::after, .faq-list details[open] summary::after { transform: rotate(45deg); }
.task { margin-bottom: 20px; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: var(--card); }
.task-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); font: 400 12px/1 var(--mono); }
.copy { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: none; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 500 12.5px/1 var(--sans); cursor: pointer; }
.copy:hover { background: var(--surface); }
.copy svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; }
#task-json { max-height: 340px; margin: 0; padding: 14px 16px; overflow: auto; background: #fcfcfd; color: var(--ink-2); font: 400 12px/1.65 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Pricing ---------- */
.pricing { padding-top: clamp(96px, 11vw, 136px); }
.p-head { text-align: center; }
.p-head h2 { font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -0.04em; }
.p-head p { margin-top: 12px; color: var(--ink-2); font-size: 16.5px; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 760px; margin: 40px auto 0; }
.plan { display: flex; flex-direction: column; padding: 28px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.plan.pro { box-shadow: inset 0 0 0 1.5px var(--ink), 0 18px 40px -24px rgba(0, 0, 0, 0.35); }
.plan h3 { font-size: 15px; font-weight: 600; }
.plan .price { margin-top: 10px; color: var(--ink); font-size: 40px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.plan .price span { margin-left: 6px; color: var(--ink-3); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.plan .per { margin-top: 8px; color: var(--ink-3); font-size: 14px; }
.p-list { flex: 1; margin: 22px 0 26px; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; }
.p-list li { position: relative; padding: 5px 0 5px 24px; color: var(--ink); font-size: 15px; }
.p-list li::before { content: ""; position: absolute; top: 10px; left: 0; width: 14px; height: 14px; background: var(--ink); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; }

/* ---------- FAQ ---------- */
.faq { padding-top: clamp(96px, 11vw, 136px); }
.faq > h2 { font-size: clamp(28px, 3vw, 36px); letter-spacing: -0.035em; }
.faq-list { margin-top: 28px; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 0; font-size: 16px; font-weight: 500; list-style: none; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list details p { padding-bottom: 18px; max-width: 36em; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
@supports (interpolate-size: allow-keywords) {
  :is(.faq-list details, .request)::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size 0.4s var(--out), opacity 0.3s, content-visibility 0.4s allow-discrete; }
  :is(.faq-list details, .request)[open]::details-content { block-size: auto; opacity: 1; }
}

/* ---------- Close ---------- */
.close { padding: clamp(112px, 14vw, 176px) 0 clamp(96px, 12vw, 144px); text-align: center; }
.mark-lg { display: block; width: 40px; height: 40px; margin: 0 auto 24px; }
.js .mark-lg[data-reveal] { transform: translateY(-14px) rotate(-14deg); transition: opacity 0.4s, transform 0.9s var(--pop); }
.js .mark-lg[data-reveal].is-in { transform: rotate(-4deg); }
.mark-lg .paper, .mark-lg .fold { stroke-width: 1.1; }
.close h2 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -0.045em; }
.close > p:not(.prompt) { margin-top: 16px; color: var(--ink-2); font-size: 17px; }
.prompt { margin: 24px auto 0; max-width: 560px; padding: 16px 18px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font: 400 12.5px/1.7 var(--mono); letter-spacing: 0; text-align: left; }
.close .ctas { margin-top: 24px; }
.prompt { scroll-margin: 96px; transition: box-shadow 0.3s; }
.prompt.flash { animation: flash 1.6s var(--out); }
@keyframes flash { 0%, 35% { background: var(--note-soft); box-shadow: inset 0 0 0 1.5px var(--note-2); } }

.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 24px 0 48px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; }
.brand-s { color: var(--ink-2); font-size: 13.5px; }
.brand-s .mark { width: 15px; height: 15px; }
.foot a { color: var(--ink-2); text-decoration-color: var(--line-2); text-underline-offset: 3px; }

/* Dialog and toast */
dialog { width: min(380px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 24px 60px -20px rgba(0, 0, 0, 0.35); }
dialog::backdrop { background: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
dialog[open] { animation: open 0.35s var(--out); }
@keyframes open { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.note-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 0 18px; }
.note-head h2 { flex: 1; font-size: 15px; }
.close-btn { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink-2); cursor: pointer; }
.close-btn:hover { background: var(--surface); color: var(--ink); }
.close-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.note-text { margin: 12px 18px 0; font-size: 16px; font-weight: 500; letter-spacing: -0.015em; }
.note-meta { margin: 14px 0 0; padding: 0 18px 12px; }
.note-meta div { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.note-meta dt { color: var(--ink-3); }
.note-meta dd { margin: 0; }
.toast { position: fixed; bottom: 24px; left: 50%; z-index: 60; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: #fff; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.4); font-size: 13.5px; font-weight: 500; opacity: 0; transform: translate(-50%, 10px) scale(0.98); transition: opacity 0.2s, transform 0.4s var(--pop); pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Reveals */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 0.8s var(--out), transform 1s var(--out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Smaller screens ---------- */
@media (max-width: 1000px) {
  .app-body { grid-template-columns: minmax(0, 1fr); }
  .side { border-top: 1px solid var(--line); border-left: 0; min-height: 260px; }
  .feature, .feature.flip { grid-template-columns: minmax(0, 1fr); }
  .feature.flip .f-text { order: 0; }
  .d-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .kind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .links { display: none; }
  .nav-in { grid-template-columns: 1fr auto; }
  /* The page grows with the story instead of keeping room for its tallest step: the thread
     starts at 54% of the page's width (the viewport minus 22px) and the card grows from
     64px (a note) to 127 (sent), 244 (r2 ready) and 286 (approved). */
  .pg { --card: 64px; aspect-ratio: auto; height: calc(0.54 * (100vw - 22px) + var(--card) + 20px); transition: height 0.6s var(--out); }
  .now-3 .pg { --card: 127px; }
  .now-4 .pg { --card: 244px; }
  .now-5 .pg { --card: 286px; }
  .thread { left: 6cqi; top: 54cqi; width: min(300px, 88cqi); }
  .cur-ines { transform: translate(20cqi, 22cqi); }
  .rail .step { padding-inline: 8px; }
  .step i { left: 8px; width: calc((100% - 16px) * var(--p, 0)); }
  .step.is-past i { width: calc(100% - 16px); }
  .url { font-size: 11.5px; }
}
@media (max-width: 600px) {
  .wrap, .wrap-n { width: calc(100% - 32px); }
  .wrap-w { width: calc(100% - 20px); }
  .d-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .review-bar { flex-direction: column; align-items: stretch; }
  .approve { justify-content: center; }
  h1 { font-size: 35px; letter-spacing: -0.04em; }
  .br-s { display: inline; }
  .hero .ctas { flex-direction: column; }
  .hero .ctas .btn { width: 100%; }
  .nav .btn-s { padding: 0 10px; font-size: 12.5px; }
  .f-fig { height: 300px; }
  .term.cc { font-size: 11px; padding: 12px 13px; }
  .compose { left: 8%; width: 84%; }
  .mini { left: 8%; width: 64%; }
  .kind-grid { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .fig * { animation: none !important; }
  .typed { max-width: none; }
  .ph-a { opacity: 1; }
  .md.ph-a { background: var(--ink); color: #fff; }
  .rot { display: none; }
  .hero h1 .sr-only { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .tl { opacity: 1; }
}