/* Complink prototype A4 — Warm human-scale paper composition
   Paper sheets on a warm desk, one folder, restrained drawn connectors, sparse text. */

:root {
  --zinc-50: #fafafa; --zinc-100: #f4f4f5; --zinc-200: #e4e4e7; --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa; --zinc-500: #71717a; --zinc-600: #52525b; --zinc-700: #3f3f46;
  --zinc-800: #27272a; --zinc-900: #18181b;
  --indigo-50: #eef2ff; --indigo-100: #e0e7ff; --indigo-200: #c7d2fe; --indigo-300: #a5b4fc;
  --indigo-400: #818cf8; --indigo-500: #6366f1; --indigo-600: #4f46e5; --indigo-700: #4338ca;
  /* Primary emphasis from the shared palette (light): oklch(0.51 0.23 277); hex fallback first */
  --primary: #4f46e5; --primary: oklch(0.51 0.23 277);
  --primary-strong: #4338ca; --primary-strong: oklch(0.46 0.21 277);
  --primary-fg: #f3f2ff; --primary-fg: oklch(0.96 0.02 272);
  --paper: #faf9f7; --sheet: #ffffff; --fg: var(--zinc-900); --muted: var(--zinc-500); --line: var(--zinc-200);
  --shadow-paper: 0 1px 2px rgba(24, 24, 27, .06), 0 10px 24px rgba(24, 24, 27, .07);
  --nav-h: 64px;
  --page-x: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t: .65s;
  font-family: 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
}
@media (max-width: 600px), (max-height: 520px) { :root { --nav-h: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--fg); font-size: 17px; line-height: 1.6; }
h1, h2, h3, p { margin: 0; }
h1 em, h2 em { font-style: normal; color: var(--primary); }
img, svg { display: block; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 8px; }
section { scroll-margin-top: var(--nav-h); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 12px; background: var(--zinc-900); color: #fff; border-radius: 8px; text-decoration: none; }
.skip-link:focus { top: 12px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s; white-space: nowrap; }
.btn-primary { background: var(--primary); color: var(--primary-fg); box-shadow: 0 1px 2px rgba(49, 46, 129, .25); }
.btn-primary:hover { background: var(--primary-strong); }
.btn-ghost { background: transparent; color: var(--zinc-800); border-color: var(--zinc-300); }
.btn-ghost:hover { background: var(--zinc-100); }
.btn-sm { min-height: 36px; padding: 6px 14px; font-size: .9rem; }
.btn-lg { min-height: 52px; padding: 12px 28px; font-size: 1.1rem; }
.btn-link { min-height: 32px; padding: 4px 0; color: var(--indigo-600); background: none; border: 0; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; border-radius: 4px; }
.dev-label { display: inline-block; margin-top: 12px; padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--zinc-600); font-size: .8rem; font-weight: 600; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; gap: 16px; padding: 0 var(--page-x); background: rgba(250, 249, 247, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.brand { display: inline-flex; margin-right: auto; }
.brand img { width: 150px; height: auto; }
.site-nav { display: flex; align-items: center; gap: 24px; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.site-nav a { display: inline-block; color: var(--zinc-700); text-decoration: none; font-weight: 500; font-size: .95rem; padding: 6px 12px; border-radius: 999px; }
.site-nav a:hover { background: #fff; color: var(--zinc-900); }
.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--zinc-300); border-radius: 999px; background: #fff; cursor: pointer; place-items: center; }
.menu-toggle-bars { position: relative; width: 18px; height: 2px; background: var(--zinc-800); display: block; border-radius: 2px; }
.menu-toggle-bars::before, .menu-toggle-bars::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--zinc-800); border-radius: 2px; transition: transform .2s; }
.menu-toggle-bars::before { top: -6px; } .menu-toggle-bars::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 759px) {
  .brand img { width: 128px; }
  .menu-toggle { display: grid; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px var(--page-x) 16px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 12px 32px rgba(24, 24, 27, .08); }
  .site-nav.is-open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { display: block; padding: 10px 0; font-size: 1.05rem; border-radius: 0; border-bottom: 1px solid var(--line); }
  .site-nav .btn { margin-top: 8px; }
}

/* Hero */
.hero { position: relative; height: calc(100vh - var(--nav-h)); height: calc(100dvh - var(--nav-h)); overflow: hidden; padding: 0 var(--page-x); }
.hero-grid { height: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(16px, 4vw, 72px); max-width: 1240px; margin: 0 auto; }
.hero-title { font-size: clamp(2.3rem, 3.6vw + 2.2vh, 5rem); line-height: 1.02; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; max-width: 11em; }
.hero-lede { margin-top: clamp(14px, 2.6vh, 28px); max-width: 28em; font-size: clamp(1rem, .45vw + .8rem, 1.2rem); color: var(--zinc-600); text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(18px, 3vh, 32px); }
.hero-papers { justify-self: center; height: min(calc(100vh - var(--nav-h) - 72px), 540px); height: min(calc(100dvh - var(--nav-h) - 72px), 540px); aspect-ratio: 480 / 420; }
.hero-papers svg { width: 100%; height: 100%; }
.hand-lines path { animation: a4-march 1.4s linear infinite; }
@keyframes a4-march { to { stroke-dashoffset: -11; } }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; align-content: center; } .hero-papers { display: none; } }
@media (max-width: 900px) and (min-height: 820px) { .hero-papers { display: block; height: 30vh; } .hero-papers .folder-text { display: none; } }
@media (max-height: 560px) {
  .hero-papers { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: clamp(1.75rem, 4.6vw, 2.8rem); }
  .hero-lede { margin-top: 10px; font-size: .95rem; }
  .hero-actions { margin-top: 14px; }
}
@media (max-width: 420px) { .hero-actions .btn { width: 100%; } }

/* Story — desk stage */
.story { position: relative; height: 480vh; }
.story-intro { padding: clamp(32px, 7vh, 72px) var(--page-x) 8px; max-width: 1240px; margin: 0 auto; }
.story-intro h2 { font-size: clamp(1.75rem, 2.4vw + 1.2vh, 3.1rem); line-height: 1.08; letter-spacing: -.025em; font-weight: 700; max-width: 16em; text-wrap: balance; }
.stage { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); height: calc(100dvh - var(--nav-h)); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 64px auto auto; gap: 0; max-width: 1240px; margin: 0 auto; padding: 8px var(--page-x) 16px; overflow: hidden; }
.stage > * { min-width: 0; }
/* Folder sits on the desk's bottom edge so the drawn connector starts at its boundary. */
.desk { position: relative; min-height: 0; display: grid; align-items: end; justify-items: center; }

/* Papers */
.papers { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.paper { position: absolute; left: var(--x); top: var(--y); width: 104px; height: 128px; padding: 10px 10px 0; background: var(--sheet); border: 1px solid var(--line); border-radius: 3px; box-shadow: var(--shadow-paper); transform: rotate(var(--r)); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); transition: left var(--t) var(--ease), top var(--t) var(--ease), transform var(--t) var(--ease), opacity .4s var(--ease); }
.paper::after { content: ''; position: absolute; right: 0; top: 0; width: 18px; height: 18px; background: linear-gradient(225deg, var(--paper) 50%, var(--zinc-200) 50%, var(--zinc-100) 56%, #fff 70%); }
.paper-head { display: block; font-size: .72rem; font-weight: 700; color: var(--zinc-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 14px; }
.paper-lines { display: block; margin-top: 10px; height: 80px; background: repeating-linear-gradient(0deg, transparent 0 9px, var(--zinc-200) 9px 10px); -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent 95%); mask-image: linear-gradient(90deg, #000 70%, transparent 95%); }
.paper-drawing .paper-lines { background: repeating-linear-gradient(0deg, transparent 0 11px, var(--indigo-200) 11px 12px), repeating-linear-gradient(90deg, transparent 0 11px, var(--indigo-200) 11px 12px), linear-gradient(var(--indigo-500), var(--indigo-500)) 0 44px / 80% 3px no-repeat; -webkit-mask-image: none; mask-image: none; }
.paper-mail .paper-lines { background: repeating-linear-gradient(0deg, transparent 0 9px, var(--zinc-200) 9px 10px); -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 90%); mask-image: linear-gradient(90deg, #000 45%, transparent 90%); }
/* Gathered pile sits where the folder stands: bottom-centre of the desk. */
.story[data-state="1"] .paper { left: 50%; top: 100%; }
.story[data-state="1"] .paper:nth-child(1) { transform: translate(-50%, -120%) rotate(-2deg); }
.story[data-state="1"] .paper:nth-child(2) { transform: translate(-46%, -122%) rotate(2deg); }
.story[data-state="1"] .paper:nth-child(3) { transform: translate(-54%, -118%) rotate(-1deg); }
.story[data-state="1"] .paper:nth-child(4) { transform: translate(-48%, -116%) rotate(3deg); }
.story[data-state="1"] .paper:nth-child(5) { transform: translate(-52%, -124%) rotate(-3deg); }
.story[data-state="1"] .paper:nth-child(6) { transform: translate(-50%, -120%) rotate(1deg); }
.story[data-state="2"] .paper, .story[data-state="3"] .paper, .story[data-state="4"] .paper { left: 50%; top: 100%; opacity: 0; transform: translate(-50%, -120%) scale(.7); }

/* Folder */
.folder { position: relative; width: min(100%, 520px); opacity: 0; transform: translateY(10px) scale(.96); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.story[data-state="1"] .folder { opacity: .5; transform: none; transition-delay: .3s; }
.story[data-state="2"] .folder, .story[data-state="3"] .folder, .story[data-state="4"] .folder { opacity: 1; transform: none; }
.folder-tabs { display: flex; gap: 4px; padding: 0 12px; }
.folder-tabs button { padding: 4px 12px; border: 1px solid var(--indigo-200); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--indigo-50); color: var(--indigo-700); font-size: .72rem; font-weight: 600; }
.folder-tabs button[aria-selected="true"] { background: #fff; }
.folder-body { position: relative; padding: 14px 16px 12px 16px; background: var(--sheet); border: 1px solid var(--indigo-200); border-radius: 0 14px 14px 14px; box-shadow: var(--shadow-paper); }
.folder-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding-left: 22px; }
.folder-title { font-weight: 700; font-size: .95rem; }
.folder-meta { font-size: .76rem; color: var(--muted); opacity: 0; transition: opacity .5s; }
.story[data-state="2"] .folder-meta, .story[data-state="3"] .folder-meta, .story[data-state="4"] .folder-meta { opacity: 1; }
.folder-rows { list-style: none; margin: 0; padding: 0 0 0 22px; display: grid; gap: 4px; }
.folder-rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 28px; font-size: .88rem; color: var(--zinc-700); }
.row-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-tag { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--indigo-50); color: var(--indigo-700); font-size: .72rem; font-weight: 600; }
.folder .folder-rows li { opacity: 0; transform: translateX(-6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.folder .folder-rows li:nth-child(2) { transition-delay: 80ms; } .folder .folder-rows li:nth-child(3) { transition-delay: 160ms; } .folder .folder-rows li:nth-child(4) { transition-delay: 240ms; }
.story[data-state="2"] .folder .folder-rows li, .story[data-state="3"] .folder .folder-rows li, .story[data-state="4"] .folder .folder-rows li { opacity: 1; transform: none; }

/* Drawn connector down */
.connector { position: relative; height: 64px; }
.connector svg { width: 100%; height: 100%; overflow: visible; clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease); }
.story[data-state="3"] .connector svg, .story[data-state="4"] .connector svg { clip-path: inset(0 0 -4px 0); }

.connector-path-narrow { display: none; }
.connector-dot { position: absolute; left: 22%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--indigo-600); opacity: 0; transition: opacity .3s .6s; }
.story[data-state="3"] .connector-dot, .story[data-state="4"] .connector-dot { opacity: 1; }

/* Bench: agent note + memo */
/* Note top meets the connector's end; the note is centred in a 44% column so its pin sits at x = 22%. */
.bench { display: grid; grid-template-columns: minmax(0, 44%) 56px minmax(0, 1fr); align-items: start; }
.note { position: relative; justify-self: center; display: flex; max-width: 100%; min-width: 0; align-items: center; gap: 12px; padding: 14px 18px 12px 12px; background: var(--sheet); border: 1px solid var(--line); border-radius: 3px; box-shadow: var(--shadow-paper); transform: rotate(-1.5deg); opacity: .55; transition: opacity var(--t), box-shadow var(--t), border-color var(--t); }
.note-pin { position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--indigo-600); box-shadow: 0 2px 4px rgba(24, 24, 27, .3), inset 0 -2px 0 rgba(0, 0, 0, .15); }
.story[data-state="3"] .note { opacity: 1; border-color: var(--indigo-200); box-shadow: 0 1px 2px rgba(24, 24, 27, .06), 0 16px 36px rgba(79, 70, 229, .16); }
.agent-mark { width: 52px; height: 52px; }
.agent-mark svg { width: 100%; height: 100%; }
.agent-text { display: grid; line-height: 1.3; }
.agent-text { min-width: 0; }
.agent-mark { flex: none; }
.agent-name { font-weight: 700; font-size: .92rem; }
.agent-status { font-size: .8rem; color: var(--muted); text-wrap: pretty; }
.story[data-state="3"] .agent-status { color: var(--indigo-700); }

.hand-arrow { position: relative; height: 2px; width: 100%; margin-top: 38px; border-top: 1.6px dashed var(--indigo-500); opacity: 0; transition: opacity .4s; }
.hand-arrow::after { content: ''; position: absolute; right: 0; top: -5px; width: 8px; height: 8px; border-right: 1.6px solid var(--indigo-500); border-bottom: 1.6px solid var(--indigo-500); transform: rotate(-45deg); }
.story[data-state="4"] .hand-arrow { opacity: 1; }

.memo { position: relative; padding: 16px 18px 14px; background: var(--sheet); border: 1px solid var(--line); border-radius: 3px; box-shadow: var(--shadow-paper); transform: rotate(.8deg) translateY(10px); opacity: 0; visibility: hidden; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s var(--t); }
.story[data-state="4"] .memo, .memo.is-static { opacity: 1; visibility: visible; transform: rotate(.8deg); transition-delay: 0s; }
.clip { position: absolute; left: 18px; top: -10px; width: 12px; height: 30px; border: 2px solid var(--zinc-400); border-radius: 6px; background: linear-gradient(#fff, #fff) 3px 8px / 2px 16px no-repeat; }
.memo-title { font-weight: 700; font-size: .92rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.memo-label { padding: 1px 8px; border-radius: 999px; background: var(--zinc-100); color: var(--zinc-600); font-size: .7rem; font-weight: 600; letter-spacing: .02em; }
.memo-body { margin-top: 4px; font-size: .9rem; color: var(--zinc-700); line-height: 1.5; }
.memo-body strong { color: var(--zinc-900); }
.memo-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.source-tag { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px 2px 8px; border: 1px solid var(--indigo-200); border-radius: 4px; background: var(--indigo-50); color: var(--indigo-700); font-size: .78rem; font-weight: 600; cursor: pointer; }
.source-tag::before { content: ''; width: 8px; height: 8px; border: 1.5px solid var(--indigo-500); border-radius: 50%; }
.source-tag:hover { background: var(--indigo-100); }
.memo-decide { margin-left: auto; font-size: .78rem; color: var(--muted); font-weight: 600; }

/* Captions — single figure caption with dots */
.captions { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; min-width: 0; }
.captions li { min-width: 0; }
.captions li.is-current { flex: 0 1 auto; }
.captions button { display: inline-flex; max-width: 100%; align-items: center; gap: 10px; min-height: 40px; padding: 4px 6px; border: 0; background: none; border-radius: 999px; cursor: pointer; color: var(--muted); text-align: left; }
.captions .cap-text { flex: 1 1 auto; min-width: 0; }
.cap-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--zinc-400); background: transparent; transition: background-color .3s, border-color .3s; }
.cap-text { display: none; font-size: .95rem; line-height: 1.35; color: var(--zinc-800); }
.captions .is-current .cap-dot { background: var(--primary); border-color: var(--primary); }
.captions .is-done .cap-dot { border-color: var(--indigo-400); background: var(--indigo-200); }
.captions .is-current .cap-text { display: inline; }

/* Compact / mobile */
@media (max-width: 760px) {
  .stage { grid-template-rows: minmax(0, 1fr) 44px auto auto; }
  .connector { height: 44px; }
  .connector-path-wide { display: none; }
  .connector-path-narrow { display: block; }
  .connector-dot { left: 50%; }
  .bench { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; }
  .note { justify-self: center; width: 100%; max-width: 420px; transform: rotate(-1deg); }
  .hand-arrow { width: 2px; height: 28px; margin-top: 0; border-top: 0; border-left: 1.6px dashed var(--indigo-500); }
  .hand-arrow::after { right: auto; top: auto; left: -4px; bottom: 0; transform: rotate(45deg); }
  .memo { width: 100%; transform: rotate(0) translateY(10px); }
  .story[data-state="4"] .memo { transform: none; }
  .memo-decide { margin-left: 0; }
  .paper { width: 84px; height: 104px; }
  .paper-lines { height: 60px; }
  .folder-rows .row-extra { display: none; }
  .cap-text { font-size: .88rem; }
}
@media (max-height: 640px) {
  .story-intro { padding-top: 20px; }
  .story-intro h2 { font-size: 1.5rem; }
  .folder-rows .row-extra { display: none; }
  .stage { grid-template-rows: minmax(0, 1fr) 36px auto auto; }
  .connector { height: 36px; }
  .agent-mark { width: 40px; height: 40px; }
  .memo { padding: 10px 14px; }
  .memo-body { font-size: .84rem; }
  .paper { width: 80px; height: 96px; }
  .paper-lines { height: 54px; }
}

/* Complete normal-flow alternative for reduced motion. */
.story-static { display: none; }

/* Static story for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .story { height: auto; }
  .stage { display: none; }
  .story-static { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; max-width: 1240px; margin: 24px auto 0; padding: 0 var(--page-x) 64px; }
  .hand-lines path, .connector-path, .mark-rotor, .petal { animation: none !important; }
}
.static-panel { margin: 0; padding: 16px; background: var(--sheet); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-paper); }
.static-panel figcaption { margin-bottom: 12px; font-weight: 700; font-size: .95rem; }
.static-papers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.static-papers li { padding: 6px 10px; border: 1px solid var(--line); border-radius: 3px; font-size: .82rem; color: var(--zinc-700); background: #fff; }
.static-papers li:nth-child(odd) { transform: rotate(-2deg); } .static-papers li:nth-child(even) { transform: rotate(2deg); }
.static-rows { border: 1px solid var(--indigo-200); border-radius: 10px; padding: 8px 10px !important; }
.static-note { margin-top: 8px; font-size: .78rem; color: var(--muted); }
.static-agent { display: grid; justify-items: center; gap: 8px; text-align: center; }
.static-arrow { width: 2px; height: 36px; border-left: 1.6px dashed var(--indigo-500); position: relative; }
.static-arrow::after { content: ''; position: absolute; left: -5px; bottom: 0; width: 8px; height: 8px; border-right: 1.6px solid var(--indigo-500); border-bottom: 1.6px solid var(--indigo-500); transform: rotate(45deg); }
.static-agent .agent-name { font-size: .88rem; white-space: normal; }
.memo.is-static { transform: none; box-shadow: none; margin-top: 10px; }

/* Trusted by */
.trusted { padding: clamp(40px, 8vh, 80px) var(--page-x); text-align: center; }
.trusted-title { font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.trusted-card { display: inline-block; margin-top: 20px; padding: 16px 28px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-paper); }
.logo-crop { width: 200px; aspect-ratio: 1080 / 420; overflow: hidden; }
.logo-crop img { width: 100%; height: auto; transform: translateY(-30.5%); }

/* Finding */
.finding { padding: clamp(48px, 9vh, 96px) var(--page-x); }
.finding-inner { max-width: 960px; margin: 0 auto; }
.finding h2 { font-size: clamp(1.6rem, 2.4vw, 2.5rem); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; max-width: 18em; }
.finding-note { margin-top: 10px; font-size: .8rem; color: var(--muted); }
.compare { display: grid; grid-template-columns: 1fr 96px 1fr; align-items: center; gap: 0; margin-top: 28px; }
.excerpt { position: relative; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 3px; box-shadow: var(--shadow-paper); display: grid; gap: 10px; }
.excerpt-left { transform: rotate(-1deg); } .excerpt-right { transform: rotate(1deg); }
.excerpt header { font-size: .8rem; font-weight: 600; color: var(--zinc-600); }
.excerpt p { font-size: 1rem; line-height: 1.5; }
.excerpt mark, .snippet mark { background: var(--indigo-50); color: var(--primary); padding: 0 4px; border-radius: 4px; font-weight: 700; box-shadow: inset 0 -1px 0 var(--indigo-300); }
.compare-link { position: relative; height: 60px; }
.compare-link svg { width: 100%; height: 100%; }
.compare-link span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid var(--indigo-200); color: var(--indigo-600); font-weight: 700; font-size: 1.1rem; }
.finding-outcome { margin-top: 24px; font-size: 1rem; color: var(--zinc-700); }
.finding-badge { display: inline-block; margin-right: 8px; padding: 2px 10px; border-radius: 999px; background: var(--indigo-50); color: var(--indigo-700); font-size: .8rem; font-weight: 600; }
@media (max-width: 700px) {
  .compare { grid-template-columns: 1fr; gap: 8px; }
  .compare-link { height: 44px; width: 60px; justify-self: center; }
  .compare-link svg { transform: rotate(90deg); }
  .excerpt-left, .excerpt-right { transform: none; }
}

/* Closing */
.closing { padding: clamp(40px, 8vh, 96px) var(--page-x) clamp(56px, 10vh, 120px); }
.closing-content { max-width: 832px; margin: 0 auto; display: grid; justify-items: start; gap: 24px; }
.closing h2 { font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
.closing p { color: var(--zinc-600); max-width: 32em; }

/* Footer */
.site-footer { display: grid; grid-template-columns: 1fr 1fr auto; align-items: start; gap: 32px 48px; padding: 48px var(--page-x); border-top: 1px solid var(--line); font-size: .85rem; line-height: 1.7; color: var(--muted); }
.site-footer img { width: 120px; height: auto; }
.site-footer nav { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 24px; }
.site-footer p { margin: 0; }
.footer-company { display: grid; gap: 16px; }
.footer-contact { display: grid; gap: 16px; font-style: normal; }
.footer-copyright { font-size: .8rem; }
@media (max-width: 800px) { .site-footer { grid-template-columns: 1fr 1fr; gap: 32px; } .site-footer nav { grid-column: 1 / -1; grid-template-columns: repeat(3, max-content); } }
@media (max-width: 480px) { .site-footer { grid-template-columns: 1fr; } .site-footer nav { grid-template-columns: repeat(2, max-content); gap: 8px 24px; } }
.site-footer a { color: var(--zinc-600); text-decoration: none; }
.site-footer a:hover { color: var(--zinc-900); text-decoration: underline; }

/* Dialogs */
.dialog { width: min(92vw, 480px); padding: 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--fg); box-shadow: 0 32px 80px rgba(24, 24, 27, .22); }
.dialog::backdrop { background: rgba(24, 24, 27, .4); backdrop-filter: blur(4px); }
.dialog-form { display: grid; gap: 14px; padding: 24px; margin: 0; }
.dialog-head h2 { font-size: 1.3rem; letter-spacing: -.01em; line-height: 1.2; }
.dialog-status { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 999px; background: var(--zinc-100); color: var(--zinc-600); font-size: .78rem; font-weight: 600; }
.dialog-source .dialog-status { margin: 0 0 8px; }
.fld { display: grid; gap: 6px; }
.fld label { font-size: .88rem; font-weight: 600; }
.fld input, .fld textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--zinc-300); border-radius: 8px; font: inherit; font-size: .95rem; background: #fff; color: var(--fg); }
.fld input:focus, .fld textarea:focus { outline: 2px solid var(--indigo-600); outline-offset: 1px; border-color: var(--indigo-600); }
.dialog-note { min-height: 1.2em; font-size: .88rem; color: var(--indigo-700); }
.dialog-note:empty { display: none; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.snippet { padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; font-size: .95rem; line-height: 1.55; display: grid; gap: 8px; }
.snippet-meta { font-size: .8rem; color: var(--muted); }

/* Focused A4 polish: keep the original paper composition and gathering paths. */
:root { --shadow-active: 0 1px 2px rgba(24,24,27,.06), 0 12px 30px rgba(79,70,229,.12); }
.folder { pointer-events: none; visibility: hidden; }
.story[data-state="1"] .folder { visibility: visible; }
.story[data-state="2"] .folder, .story[data-state="3"] .folder, .story[data-state="4"] .folder { visibility: visible; pointer-events: auto; }
.folder-body { border-color: var(--line); transition: border-color .65s, box-shadow .65s; }
.folder-head, .folder-rows { padding-left: 0; }
.folder-tabs { padding-left: 12px; gap: 3px; }
.folder-tabs button { cursor: pointer; border-color: var(--line); background: #f1f0ee; color: var(--zinc-600); padding: 6px 10px; }
.folder-tabs button[aria-selected="true"] { color: var(--primary); background: #fff; }
.folder-tabs button:hover { background: #fff; }
.folder-tabs button:focus-visible { outline-offset: -3px; }
.folder-content { min-height: 124px; }
.folder-content [hidden] { display: none; }
.source-heading { font-size: .85rem; font-weight: 600; line-height: 1.4; }
.source-heading .row-tag { margin-left: 4px; white-space: nowrap; }
.source-preview { margin-top: 8px; font-size: .83rem; line-height: 1.5; color: var(--zinc-700); }
.source-disclaimer { margin-top: 8px; font-size: .65rem; color: var(--muted); }
.note { width: 100%; min-height: 104px; }
.agent-status { min-height: 2.6em; display: block; }
.agent-mark { display: grid; place-items: center; }
.agent-mark svg { width: 38px; height: 41px; }
.story[data-state="3"] .note, .story[data-state="4"] .stage .memo { border-color: var(--indigo-200); box-shadow: var(--shadow-active); }
.story[data-state="4"] .note { opacity: 1; border-color: var(--line); box-shadow: var(--shadow-paper); }
.note-pin { background: var(--zinc-300); transition: background .65s; }
.story[data-state="3"] .note-pin { background: var(--indigo-500); }
.story[data-state="3"] .logo-piece { animation: a4-process 1.8s ease-in-out infinite; }
.logo-piece:nth-child(2) { animation-delay: -.3s; }
.logo-piece:nth-child(3) { animation-delay: -.6s; }
.logo-piece:nth-child(4) { animation-delay: -.9s; }
.logo-piece:nth-child(5) { animation-delay: -1.2s; }
.logo-piece:nth-child(6) { animation-delay: -1.5s; }
@keyframes a4-process { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
.connector-path { stroke: var(--zinc-300); stroke-dasharray: none; transition: stroke .65s; }
.story[data-state="3"] .connector-path { stroke: var(--indigo-300); }
.connector-dot { display: none; }
.context-pulse { position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px rgba(99,102,241,.5); opacity: 0; offset-path: path('M 0 0 L 0 1'); offset-rotate: 0deg; pointer-events: none; }
.story[data-state="3"] .context-pulse { animation: a4-context-flow 1.8s ease-in-out infinite; }
@keyframes a4-context-flow { 0% { offset-distance: 0%; opacity: 0; } 15%,80% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@media (max-width: 760px) {
  .folder-head { gap: 6px; }
  .folder-meta { font-size: .65rem; }
  .folder-tabs { padding-left: 6px; }
  .folder-tabs button { padding: 6px 8px; font-size: .66rem; }
  .note { max-width: 420px; min-height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* Reserve one caption area on phones so changing a step cannot shift the desk. */
@media (max-width: 760px) {
  .captions { position: relative; flex-wrap: nowrap; align-items: flex-start; height: 104px; padding-bottom: 64px; }
  .captions li.is-current { flex: initial; }
  .captions button { width: 36px; justify-content: center; }
  .cap-text { position: absolute; top: 44px; left: 0; right: 0; text-align: center; }
  .folder .folder-rows .row-extra { display: flex; }
  .paper-head { white-space: normal; overflow: hidden; text-overflow: clip; padding-right: 6px; font-size: .65rem; line-height: 1.3; height: 2.6em; }
  .paper-lines { margin-top: 6px; height: 46px; }
}

/* Non-modal draft preview, anchored to the forwarding action. */
.draft-popover { position:fixed;inset:auto;margin:0;width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid var(--line);border-radius:10px;background:var(--sheet);color:var(--fg);box-shadow:0 4px 12px rgba(24,24,27,.06),0 16px 40px rgba(24,24,27,.12);opacity:0;transition:opacity .15s; }
.draft-popover.is-positioned {opacity:1;}
.draft-popover-head {display:flex;align-items:flex-start;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line);}
.draft-popover-head>div {flex:1;min-width:0;}
.draft-popover-head h2 {margin-top:6px;font-size:18px;line-height:1.3;letter-spacing:-.015em;}
.popover-close {display:grid;place-items:center;flex:none;width:32px;height:32px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer;}
.popover-close:hover {background:var(--zinc-100);color:var(--fg);}
.draft-popover-body {display:grid;gap:12px;padding-top:16px;font-size:15px;line-height:1.6;}
@media(max-width:480px) {.draft-popover {padding:20px;}}
@media(prefers-reduced-motion:reduce) {.draft-popover {transition:none;}}

/* Demonstration send: plane → spin → green check; no message is submitted. */
.draft-popover-actions {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);}
.draft-popover-actions>.snippet-meta {max-width:150px;font-size:11px;line-height:1.5;}
.draft-send {min-width:132px;justify-content:center;gap:8px;border-radius:10px;transition:background-color .25s,border-color .25s,box-shadow .25s;}
.draft-send[aria-disabled="true"] {cursor:default;}
.send-icon {position:relative;display:block;width:20px;height:20px;flex:none;}
.send-icon svg {position:absolute;inset:0;width:20px;height:20px;transition:opacity .15s,transform .25s;}
.send-spinner,.send-check {opacity:0;}
.draft-send[data-state="sending"] .send-plane,.draft-send[data-state="success"] .send-plane {opacity:0;transform:rotate(90deg) scale(.7);}
.draft-send[data-state="sending"] .send-spinner {opacity:1;animation:draft-send-spin .65s cubic-bezier(.4,0,.2,1) both;}
@keyframes draft-send-spin {from {transform:rotate(-90deg);}to {transform:rotate(270deg);}}
.draft-send[data-state="success"],.draft-send[data-state="success"]:hover {background:#15803d;border-color:#15803d;box-shadow:0 1px 2px rgba(20,83,45,.15);}
.draft-send[data-state="success"] .send-check {opacity:1;}
.send-check path {stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .28s ease-out;}
.draft-send[data-state="success"] .send-check path {stroke-dashoffset:0;}
.draft-popover.is-closing {opacity:0;}
@media(prefers-reduced-motion:reduce) {.draft-send,.send-icon svg,.send-check path {transition:none;} .draft-send[data-state="sending"] .send-spinner {animation:none;}}