/* ============================================================
   Agents for Agents — marketing site
   Implemented from "Agents for Agents v2.dc.html" (Claude Design)
   Theme: canvas hero · vermilion accent
   ============================================================ */

:root {
  --accent: #E5482A;
  --canvas: #F7F6F3;
  --ink: #14151A;
  --ink-2: #5C5E66;
  --hair: #E4E2DC;
  --hair-strong: #D9D7CF;
  --faint: #6E6C66;
  --ghost: #EEECE6;
  --paper: #FDFCFA;
  --wash: #F3F1EC;
  --on-ink: #EDEAE3;
  --on-ink-sub: #9C9DA6;
  --on-ink-faint: #8E9099;
  --on-ink-legal: #83858F;
  --dark-line: #26272F;
  --dark-line-2: #2E3038;
  --dark-line-3: #3A3B44;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'General Sans', 'Helvetica Neue', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent); color: var(--canvas); }
img, video { max-width: 100%; }

.mono { font-family: var(--mono); }
.it { font-style: italic; }
.accent-text { color: var(--accent); }

/* ---------- shared shells ---------- */
.shell { max-width: 1264px; margin: 0 auto; padding: 0 32px; }
.frame { border-left: 1px solid var(--hair); border-right: 1px solid var(--hair); padding: 0 40px; }
.frame--pb { padding-bottom: 120px; }
.frame--pb-lg { padding-bottom: 120px; }
.frame--dark { border-left-color: var(--dark-line); border-right-color: var(--dark-line); }
.sec--bt { border-top: 1px solid var(--hair); }

.sec-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-size: 11px; letter-spacing: 0.2em; color: var(--faint);
  padding: 18px 0; border-bottom: 2px solid var(--ink);
}
.sec-head__label { color: var(--ink); }
.sec-head--dark { color: var(--on-ink-faint); border-bottom-color: var(--on-ink-faint); }

.h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 5.6vw, 68px); line-height: 1.04; letter-spacing: -0.015em;
  margin: 96px 0 88px;
}
.lede { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 620px; margin: 28px 0 0; }
.kicker { font-size: 12px; letter-spacing: 0.22em; color: var(--ink-2); margin: 0 0 20px; }
.kicker--dark { color: var(--on-ink-faint); margin-bottom: 16px; }

/* ---------- buttons ---------- */
.btn {
  text-decoration: none; font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em;
  padding: 18px 30px; display: inline-flex; align-items: center; transition: filter 120ms ease, border-color 120ms ease;
}
.btn--accent { background: var(--accent); color: var(--canvas); }
.btn--accent:hover { filter: brightness(0.9); }
.btn--accent:active { filter: brightness(0.82); }
.btn--accent:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dark .btn--accent:focus-visible, .hero .btn--accent:focus-visible { outline-color: var(--on-ink); }
.btn--ghost { color: var(--ink); border: 1px solid var(--hair-strong); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--ghost:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn--lg { font-size: 14px; padding: 20px 40px; }
.btn--pixel { position: relative; isolation: isolate; }
.btn--pixel canvas { position: absolute; inset: -28px; width: calc(100% + 56px); height: calc(100% + 56px); pointer-events: none; z-index: -1; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--canvas); border-bottom: 1px solid var(--hair); transition: border-color 200ms ease; }
.nav.is-scrolled { border-bottom-color: var(--hair-strong); }
.nav__inner { max-width: 1264px; margin: 0 auto; padding: 0 32px; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__brand { display: flex; align-items: baseline; gap: 12px; text-decoration: none; white-space: nowrap; }
.nav__wordmark { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 20px; color: var(--ink); letter-spacing: -0.01em; }
.nav__no { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--faint); }
.nav__links { display: flex; align-items: center; gap: 32px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; }
.nav__link { color: var(--ink-2); text-decoration: none; padding: 12px 0; white-space: nowrap; }
.nav__link:hover { color: var(--ink); }
.nav__cta { font-size: 12px; padding: 13px 20px; white-space: nowrap; }
.nav__menu { display: none; background: none; border: 1px solid var(--hair-strong); color: var(--ink); font-size: 12px; letter-spacing: 0.16em; padding: 12px 16px; cursor: pointer; }
.nav__menu:hover { border-color: var(--ink); }
.nav__menu:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.nav__menu.is-open { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.nav__drop { border-top: 1px solid var(--hair); background: var(--canvas); display: grid; }
.nav__drop[hidden] { display: none; }
.nav__drop a { color: var(--ink-2); text-decoration: none; font-size: 12px; letter-spacing: 0.16em; padding: 18px 32px; border-bottom: 1px solid var(--hair); }
.nav__drop a:last-child { border-bottom: none; }
.nav__drop a:hover { color: var(--ink); background: var(--wash); }
@media (max-width: 959px) {
  .nav__link { display: none; }
  .nav__menu { display: inline-flex; }
}
@media (min-width: 960px) { .nav__drop { display: none !important; } }

/* ---------- hero (full-bleed film) ---------- */
.hero {
  position: relative;
  min-height: calc(100svh - 64px);
  display: flex;
  color: var(--on-ink);
  background: var(--ink);
  overflow: hidden;
  border-bottom: 1px solid var(--dark-line);
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(10,11,14,0.82) 0%, rgba(10,11,14,0.30) 34%, rgba(10,11,14,0.10) 55%, rgba(10,11,14,0.42) 100%),
    linear-gradient(100deg, rgba(10,11,14,0.55) 0%, rgba(10,11,14,0.18) 46%, rgba(10,11,14,0) 70%);
}
.hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; }
.hero__meta {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 11px; letter-spacing: 0.2em; color: rgba(237,234,227,0.72);
  padding: 20px 0; border-bottom: 1px solid rgba(237,234,227,0.16);
}
.hero__grid {
  flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 64px; align-items: end; padding: 80px 0 56px;
}
.hero__copy { min-width: 0; }
.hero__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(56px, 9vw, 136px); line-height: 0.96; letter-spacing: -0.025em; margin: 0;
  color: var(--canvas);
  text-shadow: 0 2px 40px rgba(10,11,14,0.45);
}
.hero__title .it { font-weight: 500; }
.hero__sub { font-size: 19px; line-height: 1.55; color: rgba(237,234,227,0.86); max-width: 560px; margin: 36px 0 0; text-shadow: 0 1px 18px rgba(10,11,14,0.5); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.btn--ghost-film { color: var(--canvas); border-color: rgba(247,246,243,0.45); backdrop-filter: blur(2px); }
.btn--ghost-film:hover { border-color: var(--canvas); }


.hero__foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px;
  font-size: 11px; letter-spacing: 0.14em; color: rgba(237,234,227,0.72);
  padding: 16px 0 18px; border-top: 1px solid rgba(237,234,227,0.16);
}
.hero__foot-right { color: rgba(237,234,227,0.5); }

/* ---------- ticker ---------- */
.ticker { border-bottom: 1px solid var(--hair); overflow: hidden; background: var(--canvas); }
.ticker__track { display: flex; width: max-content; animation: a4a-tick 48s linear infinite; font-size: 11px; letter-spacing: 0.2em; color: var(--faint); padding: 12px 0; white-space: nowrap; }
.ticker__track span { padding-right: 48px; }
@keyframes a4a-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- sec 01 · problem ---------- */
.problem__title { max-width: 900px; }
.problem__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0; }
.problem__col { padding: 8px 0; }
.problem__col--left { padding-right: 56px; border-right: 1px solid var(--hair); }
.problem__col--right { padding-left: 56px; }
.problem__col .kicker { margin-bottom: 18px; }
.problem__body { font-size: 19px; line-height: 1.55; margin: 0; max-width: 480px; }
@media (max-width: 700px) {
  .problem__col--left { padding-right: 0; border-right: none; border-bottom: 1px solid var(--hair); padding-bottom: 40px; }
  .problem__col--right { padding-left: 0; padding-top: 40px; }
}

/* ---------- sec 02 · agents ---------- */
.agents__intro { padding: 96px 0 80px; }
.agents__title { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 7vw, 92px); line-height: 1.0; letter-spacing: -0.02em; margin: 0; }
.agents__layout { display: grid; grid-template-columns: 300px 1fr; gap: 0; align-items: start; }
@media (max-width: 1079px) { .agents__layout { grid-template-columns: 1fr; } .rail { display: none; } }

.rail { position: sticky; top: 96px; padding: 40px 40px 40px 0; border-right: 1px solid var(--hair); }
.rail__label { font-size: 11px; letter-spacing: 0.2em; color: var(--faint); margin: 0 0 24px; }
.rail__list { display: grid; gap: 2px; }
.rail__item { display: flex; align-items: baseline; gap: 14px; text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--ghost); transition: padding-left 140ms ease; }
.rail__item:hover { padding-left: 6px; }
.rail__num { font-size: 11px; letter-spacing: 0.12em; color: var(--faint); }
.rail__name { font-family: var(--serif); font-size: 20px; color: #8A8B92; }
.rail__mark { margin-left: auto; font-size: 11px; color: var(--accent); }
.rail__item.is-active .rail__num { color: var(--accent); }
.rail__item.is-active .rail__name { color: var(--ink); font-style: italic; }
.rail__item.is-active .rail__mark::after { content: "\2192"; }

.chapters { min-width: 0; }
.chapter { position: relative; padding: 72px 0 96px; border-bottom: 1px solid var(--hair); overflow: hidden; }
.chapter--last { border-bottom: none; padding-bottom: 110px; }
.chapter__ghost { position: absolute; top: -30px; right: -12px; font-family: var(--serif); font-weight: 500; font-size: 240px; line-height: 1; color: var(--ghost); user-select: none; pointer-events: none; }
.chapter__body { position: relative; padding-left: 48px; max-width: 720px; }
.chapter__body--wide { max-width: none; }
@media (min-width: 1080px) { .chapter__body { margin-left: 40px; } }
@media (max-width: 700px) { .chapter__body { padding-left: 0; } .chapter__ghost { font-size: 160px; } }
.chapter__title { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 3.8vw, 48px); line-height: 1.06; margin: 0 0 20px; max-width: 720px; }
.chapter__lede { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 560px; margin: 0 0 44px; }

/* specimen toggle */
.spec__tabs { display: flex; gap: 0; border: 1px solid var(--hair); border-bottom: none; width: fit-content; }
.spec__tab { font-size: 12px; letter-spacing: 0.14em; padding: 13px 18px; border: none; cursor: pointer; background: transparent; color: var(--ink-2); }
.spec__tab + .spec__tab { border-left: 1px solid var(--hair); }
.spec__tab:hover { color: var(--ink); }
.spec__tab.is-active { background: var(--ink); color: var(--on-ink); }
.spec__tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.spec__panel { border: 1px solid var(--hair); background: var(--paper); padding: 36px; min-height: 210px; }
.spec__cap { font-size: 11px; letter-spacing: 0.18em; margin: 0 0 20px; }
.spec__cap--dim { color: #B0AEA6; }
.spec__text { margin: 0; max-width: 560px; }
.spec__text--generic { font-size: 18px; line-height: 1.6; color: #8A8B92; }
.spec__text--voice { font-family: var(--serif); font-size: 22px; line-height: 1.45; color: var(--ink); }
.spec__hint { font-size: 11px; letter-spacing: 0.14em; color: var(--faint); margin: 12px 2px 0; }

/* listing kit */
.kit { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }

/* ---- iPhone 15 Pro mockup (ported from the proven audit-site chassis) ---- */
.phone-stage { flex: none; perspective: 1400px; }
.iphone {
  width: 300px; position: relative; padding: 2.5px; border-radius: 48px;
  background: linear-gradient(145deg, #7a7a80, #3c3c40 30%, #2a2a2c 55%, #8a8a90);
  box-shadow: 0 40px 80px -24px rgba(20,21,26,0.45), 0 12px 28px rgba(20,21,26,0.18);
  transform: rotateY(-10deg) rotateX(3deg);
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.phone-stage:hover .iphone { transform: rotateY(0deg) rotateX(0deg); box-shadow: 0 56px 100px -28px rgba(20,21,26,0.5), 0 16px 36px rgba(20,21,26,0.2); }
.hw-btn { position: absolute; width: 3px; background: #2e2e30; border-radius: 2px; }
.hw-power { right: -3px; top: 27%; height: 56px; }
.hw-action { left: -3px; top: 18%; height: 18px; }
.hw-vol1 { left: -3px; top: 26%; height: 32px; }
.hw-vol2 { left: -3px; top: calc(26% + 40px); height: 32px; }
.iphone__body { background: #101012; border-radius: 46px; position: relative; }
.iphone__screen { position: relative; margin: 9px; border-radius: 38px; background: #fff; overflow: hidden; }
.iphone__island { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 27%; height: 21px; border-radius: 999px; background: #000; z-index: 5; }
.iphone__statusbar { display: flex; justify-content: space-between; align-items: center; padding: 11px 22px 6px; background: #fff; }
.iphone__time { font-family: -apple-system, var(--sans); font-weight: 600; font-size: 12px; color: #111; }
.iphone__sbicons { display: flex; gap: 5px; align-items: center; }
.iphone__home { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 90px; height: 4px; border-radius: 999px; background: #000; z-index: 4; }
.iphone__glass { position: absolute; inset: 0; border-radius: 38px; pointer-events: none; z-index: 6; background: linear-gradient(115deg, rgba(255,255,255,0.08) 0%, transparent 30%); }
.ig-top { display: flex; align-items: center; gap: 9px; padding: 8px 12px; }
.ig-avatar { width: 30px; height: 30px; border-radius: 999px; background: #191919; color: #d8b06a; display: flex; align-items: center; justify-content: center; font-family: Georgia, serif; font-size: 14px; flex: none; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #dbdbdb; }
.ig-handle { font-size: 12px; font-weight: 700; color: #111; line-height: 1.3; font-family: -apple-system, var(--sans); }
.ig-loc { font-size: 10px; color: #555; line-height: 1.3; font-family: -apple-system, var(--sans); }
.ig-more { width: 16px; height: 16px; fill: #111; margin-left: auto; }
.ig-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ig-strip::-webkit-scrollbar { display: none; }
.ig-strip img { width: 100%; flex: none; scroll-snap-align: start; display: block; aspect-ratio: 4 / 5; object-fit: cover; }
.ig-dots { display: flex; gap: 4px; justify-content: center; padding: 8px 0 2px; background: #fff; }
.ig-dots span { width: 6px; height: 6px; border-radius: 999px; background: rgba(0,0,0,0.25); transition: background 250ms ease-out; }
.ig-dots span.on { background: #0095f6; }
.ig-actions { display: flex; gap: 13px; padding: 8px 12px 4px; align-items: center; }
.ig-actions svg { width: 21px; height: 21px; stroke: #111; fill: none; stroke-width: 1.8; }
.ig-actions .ig-save { margin-left: auto; }
.ig-likes { font-size: 12px; color: #111; padding: 0 12px 3px; font-family: -apple-system, var(--sans); }
.ig-likes b { font-weight: 700; }
.ig-cap { font-size: 12px; color: #111; padding: 0 12px 4px; line-height: 1.45; font-family: -apple-system, var(--sans); }
.ig-cap b { font-weight: 700; }
.ig-comments { font-size: 12px; color: #8e8e8e; padding: 0 12px 14px; font-family: -apple-system, var(--sans); }
.kit__col { flex: 1; min-width: 240px; max-width: 360px; display: flex; flex-direction: column; gap: 12px; }
.kit__film { aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.kit__film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.kit__email-text { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.kit__list { list-style: none; padding: 0; margin: 4px 0 0; font-size: 11px; letter-spacing: 0.12em; color: var(--ink-2); display: grid; gap: 8px; }
.kit__list li { border-top: 1px solid var(--hair); padding-top: 8px; }

/* cards */
.card { border: 1px solid var(--hair); background: var(--paper); padding: 16px 18px; }
.card__label { font-size: 10px; letter-spacing: 0.16em; color: var(--ink-2); margin: 0 0 8px; }
.card__label--faint { color: var(--faint); letter-spacing: 0.18em; margin-bottom: 14px; }

/* reactivation */
.react { max-width: 400px; }
.react__label { font-size: 11px; letter-spacing: 0.18em; color: var(--ink-2); margin: 0 0 14px; }
.react__card { padding: 24px; }
.react__bubble { background: #ECEAE4; border-radius: 16px 16px 16px 4px; padding: 14px 18px; max-width: 300px; }
.react__bubble p { font-size: 15px; line-height: 1.5; margin: 0; color: var(--ink); }
.react__actions { display: flex; gap: 10px; margin-top: 18px; font-size: 11px; letter-spacing: 0.14em; }
.react__approve { color: var(--canvas); background: var(--ink); padding: 9px 14px; }
.react__edit { color: var(--ink-2); border: 1px solid var(--hair); padding: 8px 14px; }

/* digest */
.digest { max-width: 440px; padding: 32px; }
.digest__head { font-family: var(--serif); font-size: 23px; line-height: 1.25; margin: 0 0 16px; }
.digest__body { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0 0 12px; }
.digest__src { font-size: 10px; letter-spacing: 0.12em; color: var(--faint); margin: 0; border-top: 1px solid var(--hair); padding-top: 12px; }

/* strategist audit card */
.audit-card { max-width: 470px; padding: 32px; }
.audit-card__head { font-family: var(--serif); font-size: 21px; line-height: 1.3; margin: 0 0 18px; }
.audit-card__evidence { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.audit-card__evidence li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.audit-card__evidence li::before { content: '—'; position: absolute; left: 0; color: var(--accent); }
.audit-card__evidence strong { color: var(--ink); font-weight: 600; }
.audit-card__cost { font-size: 10px; letter-spacing: 0.12em; line-height: 1.7; color: var(--ink-2); margin: 20px 0 0; border-top: 1px solid var(--hair); padding-top: 12px; }
.audit-card__rec { font-size: 10px; letter-spacing: 0.12em; line-height: 1.7; color: var(--faint); margin: 14px 0 0; border-top: 1px solid var(--hair); padding-top: 12px; }
.audit-card__rec + .audit-card__rec { border-top: 0; padding-top: 0; margin-top: 10px; }
.audit-card__skip { color: var(--ink); }

/* ---------- sec 03 · how ---------- */
.how { background: var(--wash); }
.how__title { max-width: 800px; }
.how__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 48px; }
.beat { border-top: 2px solid var(--ink); padding-top: 28px; }
.beat--accent { border-top-color: var(--accent); }
.beat__num { font-family: var(--serif); font-size: 56px; line-height: 1; margin: 0 0 20px; }
.beat .kicker { margin-bottom: 12px; }
.beat__head { font-size: 24px; font-weight: 600; line-height: 1.2; margin: 0 0 14px; }
.beat__body { font-size: 16px; line-height: 1.55; color: var(--ink-2); margin: 0; }

/* ---------- dark sections ---------- */
.dark { background: var(--ink); color: var(--on-ink); }

/* ---------- sec 04 · see the difference ---------- */
.diff__intro { max-width: 860px; }
.diff__title { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 6.4vw, 80px); line-height: 1.0; letter-spacing: -0.02em; margin: 96px 0 0; }
.diff__lede { font-size: 18px; line-height: 1.55; color: var(--on-ink-sub); max-width: 640px; margin: 28px 0 0; }
.diff__block { margin: 88px 0 0; }
figure.diff__block { margin-left: 0; margin-right: 0; margin-bottom: 0; }
.diff__block:first-of-type { margin-top: 80px; }
.diff__block video { width: 100%; display: block; background: #000; border: 1px solid var(--dark-line-2); }
.diff__cap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; font-size: 11px; letter-spacing: 0.14em; color: var(--on-ink-faint); padding: 12px 2px 0; }
.diff__cap-strong { color: var(--on-ink); }

/* before/after */
.ba { position: relative; aspect-ratio: 16 / 9; overflow: hidden; user-select: none; touch-action: none; border: 1px solid var(--dark-line-2); cursor: ew-resize; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ba__before { clip-path: inset(0 48% 0 0); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: 52%; width: 2px; background: var(--canvas); box-shadow: 0 0 0 1px rgba(0,0,0,0.2); transform: translateX(-1px); }
.ba__knob { position: absolute; top: 50%; left: 52%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: var(--canvas); box-shadow: 0 2px 10px rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--ink); }
.ba__tag { position: absolute; bottom: 18px; font-size: 11px; letter-spacing: 0.16em; color: var(--canvas); background: rgba(20,21,26,0.65); padding: 6px 12px; }
.ba__tag--l { left: 18px; }
.ba__tag--r { right: 18px; }
.ba__row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-top: 16px; }
.ba__cap { font-size: 16px; line-height: 1.5; color: var(--on-ink-sub); margin: 0; }
.ba__ethics { font-size: 10px; letter-spacing: 0.14em; color: var(--on-ink-faint); display: inline-block; margin-top: 8px; }

input.a4a-range { -webkit-appearance: none; appearance: none; width: 240px; max-width: 100%; height: 2px; background: var(--dark-line-3); outline: none; cursor: pointer; }
input.a4a-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2px solid var(--canvas); box-shadow: 0 1px 4px rgba(0,0,0,0.4); cursor: pointer; }
input.a4a-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2px solid var(--canvas); box-shadow: 0 1px 4px rgba(0,0,0,0.4); cursor: pointer; }
input.a4a-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--on-ink); outline-offset: 2px; }
input.a4a-range:focus-visible::-moz-range-thumb { outline: 2px solid var(--on-ink); outline-offset: 2px; }

/* outputs grid */
.diff__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 22px; align-items: start; }
.shot { margin: 0; border: 1px solid var(--dark-line-2); background: var(--paper); overflow: hidden; }
.shot img { width: 100%; display: block; }
.shot figcaption { font-size: 11px; letter-spacing: 0.14em; color: var(--ink-2); padding: 12px 14px; border-top: 1px solid var(--hair); }
.shot--zoom { cursor: zoom-in; transition: transform 160ms ease; }
.shot--zoom:hover { transform: translateY(-2px); }
.shot--zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.shot__hint { color: var(--faint); }
.shot--zoom:hover .shot__hint { color: var(--accent); }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(10,11,14,0.94); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 24px 20px; }
.lightbox[hidden] { display: none; }
.lightbox__scroll { max-width: min(1400px, 96vw); max-height: 82vh; overflow: auto; border: 1px solid var(--dark-line-3); background: var(--paper); }
.lightbox__img { display: block; width: 100%; height: auto; }
.lightbox__cap { font-size: 11px; letter-spacing: 0.16em; color: var(--on-ink-faint); margin: 14px 0 0; }
.lightbox__close { position: absolute; top: 16px; right: 20px; background: none; border: 1px solid var(--dark-line-3); color: var(--on-ink); font-size: 11px; letter-spacing: 0.16em; padding: 11px 16px; cursor: pointer; }
.lightbox__close:hover { border-color: var(--on-ink); }
.lightbox__close:focus-visible { outline: 2px solid var(--on-ink); outline-offset: 2px; }

.diff__legal { font-size: 11px; letter-spacing: 0.14em; color: var(--on-ink-legal); margin: 26px 0 0; line-height: 1.8; }

/* dual film */
.films { display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; align-items: stretch; }
.films video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; border: 1px solid var(--dark-line-2); }
.films__main, .films__side { display: flex; flex-direction: column; }
.films__main video, .films__side video { flex: 1; min-height: 0; }
.films__tag { font-size: 10.5px; letter-spacing: 0.16em; color: var(--on-ink-faint); margin: 10px 0 0; }
@media (max-width: 820px) { .films { grid-template-columns: 1fr; } }

/* temporary veil over business pricing while the offer is socialized */
.veil { filter: blur(0.30em); user-select: none; -webkit-user-select: none; }

/* workflow: one link in — the whole kit out.
   Choreography is progressive enhancement: until JS adds .wf-armed the
   whole diagram is fully visible (no-JS fallback). Armed, every [data-th]
   waits for its scroll threshold; the spine draws via --wf-p. */
.wf { display: grid; grid-template-columns: 0.95fr 0.85fr 1.9fr; gap: 36px; align-items: start; margin-top: 34px; }
.wf__label { font-size: 10.5px; letter-spacing: 0.2em; color: var(--on-ink-faint); margin: 0 0 18px; }
.wf__cap { font-size: 10.5px; letter-spacing: 0.16em; color: var(--on-ink-faint); margin: 16px 0 0; line-height: 1.7; }

.workflow.wf-armed [data-th] { opacity: 0; transform: translateY(12px); transition: opacity 550ms cubic-bezier(0.2,0.7,0.2,1), transform 550ms cubic-bezier(0.2,0.7,0.2,1); }
.workflow.wf-armed [data-th].is-on { opacity: 1; transform: none; }

/* act i — deliberately small and sad */
.wf__url { display: flex; align-items: center; gap: 10px; border: 1px solid var(--dark-line-3); padding: 10px 12px; font-size: 11px; letter-spacing: 0.04em; color: var(--on-ink-sub); }
.wf__url-key { color: var(--accent); font-size: 10px; letter-spacing: 0.1em; border: 1px solid var(--dark-line-3); padding: 2px 5px; flex: none; }
.wf__url-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf__listing { margin: 14px 0 0; border: 1px solid var(--dark-line-2); background: var(--paper); overflow: hidden; cursor: zoom-in; }
.wf__listing img { display: block; width: 100%; filter: saturate(0.5) contrast(0.94); }
.wf__listing figcaption { font-size: 10px; letter-spacing: 0.16em; color: var(--faint); padding: 8px 10px; border-top: 1px solid var(--hair); }
.wf__phones { display: flex; gap: 8px; margin-top: 14px; }
.wf__phones img { width: calc((100% - 16px) / 3); height: 58px; object-fit: cover; border: 1px solid var(--dark-line-2); filter: saturate(0.4) brightness(0.92); }
.wf__phone--b { object-position: 20% 80%; transform: rotate(-1.2deg); }
.wf__phone--c { object-position: 80% 30%; transform: rotate(1deg); }

/* act ii — the machine spine */
.wf__spine { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; }
.wf__spine::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--dark-line-2); }
.wf__spine::after { content: ''; position: absolute; left: 5px; top: 8px; height: calc(100% - 16px); width: 1px; background: var(--accent); transform: scaleY(var(--wf-p, 1)); transform-origin: top; }
.workflow.wf-armed .wf__spine::after { transform: scaleY(var(--wf-p, 0)); }
.wf__node { position: relative; padding: 0 0 26px; }
.wf__node:last-child { padding-bottom: 0; }
.wf__dot { position: absolute; left: -22px; top: 4px; width: 11px; height: 11px; border: 1px solid var(--dark-line-3); border-radius: 50%; background: var(--ink); }
.wf__node.is-on .wf__dot, .workflow:not(.wf-armed) .wf__dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 3px rgba(229, 72, 42, 0.18); }
.wf__node-name { display: block; font-size: 11px; letter-spacing: 0.18em; color: var(--on-ink); }
.wf__node--accent .wf__node-name { color: var(--accent); }
.wf__node-sub { display: block; font-size: 12.5px; color: var(--on-ink-faint); margin-top: 4px; line-height: 1.5; }

/* act iii — the delivered kit */
.wf__folder { border: 1px solid var(--dark-line-3); background: rgba(255, 255, 255, 0.02); }
.wf__folder-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--dark-line-2); font-size: 11px; letter-spacing: 0.14em; color: var(--on-ink); }
.wf__folder-count { color: var(--accent); font-size: 10.5px; }
.wf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px; }
.wf__card { margin: 0; border: 1px solid var(--dark-line-2); background: var(--paper); overflow: hidden; display: flex; flex-direction: column; }
.wf__card--film { grid-column: 1 / -1; }
.wf__card video { display: block; width: 100%; background: #000; }
.wf__card > img { display: block; width: 100%; height: 172px; object-fit: cover; object-position: top; flex: none; }
.wf__card.shot--zoom { cursor: zoom-in; }
.wf__card figcaption { font-size: 10px; letter-spacing: 0.16em; color: var(--faint); padding: 9px 12px; border-top: 1px solid var(--hair); margin-top: auto; }
.wf__card--text { background: transparent; }
.wf__card--text figcaption { color: var(--on-ink-faint); border-top-color: var(--dark-line-2); }
.wf__quote { margin: 0; padding: 16px 16px 14px; font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.55; color: var(--on-ink); flex: 1; }
.wf__script { display: flex; flex-direction: column; gap: 9px; padding: 16px 16px 14px; font-size: 10.5px; letter-spacing: 0.05em; line-height: 1.55; color: var(--on-ink-sub); flex: 1; }
.wf__script em { font-style: normal; color: var(--accent); letter-spacing: 0.14em; }
.wf__browser { border-bottom: 1px solid var(--hair); }
.wf__browser-bar { display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: 9.5px; letter-spacing: 0.08em; color: var(--faint); border-bottom: 1px solid var(--hair); background: var(--wash); }
.wf__browser-dots { color: var(--hair-strong); font-size: 7px; letter-spacing: 2px; }
.wf__browser-body { position: relative; }
.wf__browser-body img { display: block; width: 100%; height: 128px; object-fit: cover; }
.wf__browser-hero { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 12px 8px; background: linear-gradient(to top, rgba(10, 11, 14, 0.78), rgba(10, 11, 14, 0)); display: flex; flex-direction: column; gap: 2px; }
.wf__browser-hero .mono { font-size: 9.5px; letter-spacing: 0.14em; color: var(--on-ink-sub); }
.wf__browser-head { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--on-ink); }
.wf__approve { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 13px 16px; border-top: 1px solid var(--dark-line-2); font-size: 10px; letter-spacing: 0.15em; color: var(--on-ink-faint); }
.wf__ap { display: inline-flex; align-items: center; gap: 8px; }
.wf__ap-mark { color: var(--accent); font-size: 11px; }
.wf__ap--accent.is-on, .workflow:not(.wf-armed) .wf__ap--accent { color: var(--accent); }

@media (max-width: 1080px) { .wf { grid-template-columns: 1fr 1fr; } .wf__output { grid-column: 1 / -1; } }
@media (max-width: 820px) {
  .wf { grid-template-columns: 1fr; gap: 44px; }
  .wf__grid { grid-template-columns: 1fr; }
  .wf__card > img { height: 150px; }
}

/* teaser + lead forms */
.teaser__title { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5vw, 60px); line-height: 1.02; letter-spacing: -0.015em; margin: 0 0 18px; }
.teaser__lede { font-size: 17px; line-height: 1.55; color: var(--on-ink-sub); max-width: 620px; margin: 0 0 36px; }
.lead-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lead-form { position: relative; }
.lead-form__row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; max-width: 900px; }
.lead-form__field { display: grid; gap: 9px; flex: 1; min-width: 220px; }
.lead-form__field > span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; color: var(--on-ink-faint); }
.lead-form__field > span em { font-style: normal; color: var(--on-ink-legal); }
.lead-form input:not(.lead-form__hp) {
  background: rgba(247,246,243,0.04); border: 1px solid var(--dark-line-3); color: var(--on-ink);
  font-family: var(--sans); font-size: 16px; padding: 15px 16px; width: 100%; border-radius: 0;
  transition: border-color 160ms ease, background 160ms ease;
}
.lead-form input:not(.lead-form__hp)::placeholder { color: #5d5f6a; }
.lead-form input:not(.lead-form__hp):focus { outline: none; border-color: var(--accent); background: rgba(247,246,243,0.07); }
.lead-form__btn { flex: none; }
.lead-form__msg { font-size: 11.5px; letter-spacing: 0.14em; color: var(--on-ink-sub); margin: 16px 0 0; min-height: 16px; }
.lead-form__msg.is-ok { color: #7BC47F; }
.lead-form__msg.is-err { color: var(--accent); }
.lead-form__msg a { color: var(--on-ink); }
.lead-form--door { max-width: 560px; margin: 48px auto 0; text-align: left; }
.lead-form__stack { display: grid; gap: 18px; }
.lead-form--door .lead-form__btn { justify-content: center; width: 100%; }

/* ---------- sec 05 · rate card ---------- */
.rate__title { margin-bottom: 16px; }
.rate__lede { margin: 0 0 72px; max-width: 640px; font-size: 18px; }
/* trial strip */
.plans-trial { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; border: 1px solid var(--hair-strong); border-left: 3px solid var(--accent); background: var(--paper); padding: 20px 24px; margin-bottom: 22px; }
.plans-trial__kicker { font-size: 11px; letter-spacing: 0.22em; color: var(--accent); }
.plans-trial__line { font-family: var(--sans); font-size: 16px; color: var(--ink-2); flex: 1; min-width: 0; letter-spacing: 0; }
.plans-trial__line b { color: var(--ink); font-weight: 600; }
.plans-trial__cta { font-size: 11px; padding: 12px 18px; }

/* plan cards (SaaS-clear, 37dev-bold) */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 20px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; border: 1px solid var(--hair-strong); border-top: 2px solid var(--ink); background: var(--paper); padding: 28px 26px 26px; transition: transform 220ms ease, box-shadow 220ms ease; }
.plan:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(20,21,26,0.28); }
.plan__kicker { font-size: 11px; letter-spacing: 0.22em; color: var(--ink-2); margin: 0 0 14px; }
.plan__name { font-family: var(--serif); font-size: 27px; margin: 0 0 14px; }
.plan__price { font-family: var(--serif); font-size: 32px; margin: 0 0 16px; line-height: 1; }
.plan__per { display: block; font-size: 10px; letter-spacing: 0.14em; color: var(--faint); margin-top: 9px; }
.plan__desc { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 0 0 20px; }
.plan__list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 0; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.plan__list li { padding: 10px 0 10px 20px; border-top: 1px solid var(--hair); position: relative; line-height: 1.5; }
.plan__list li::before { content: "+"; position: absolute; left: 0; color: var(--accent); font-weight: 500; }
.plan__cta { margin-top: auto; justify-content: center; font-size: 12px; padding: 15px 18px; }
.plan--featured { background: var(--ink); border-color: var(--ink); color: var(--on-ink); transform: translateY(-8px); box-shadow: 0 24px 56px -24px rgba(20,21,26,0.45); }
.plan--featured:hover { transform: translateY(-11px); }
.plan__tag { position: absolute; top: -13px; left: 24px; background: var(--accent); color: var(--canvas); font-size: 10px; letter-spacing: 0.2em; padding: 6px 12px; margin: 0; }
.plan--featured .plan__kicker { color: var(--on-ink-sub); }
.plan--featured .plan__desc { color: var(--on-ink-sub); }
.plan--featured .plan__per { color: var(--on-ink-faint); }
.plan--featured .plan__list { color: var(--on-ink-sub); }
.plan--featured .plan__list li { border-top-color: var(--dark-line-2); }
@media (max-width: 1100px) { .plans { grid-template-columns: repeat(2, 1fr); } .plan--featured { transform: none; } .plan--featured:hover { transform: translateY(-4px); } }
@media (max-width: 560px) { .plans { grid-template-columns: 1fr; } }

.rate__foot { font-size: 11px; letter-spacing: 0.14em; color: var(--faint); margin: 20px 2px 0; }
@media (max-width: 700px) { .rate__price { text-align: left; } }

/* ---------- sec 06 · faq ---------- */
.faq { display: grid; gap: 0; max-width: 960px; margin-top: 64px; }
.faq__item { border-bottom: 1px solid var(--hair); }
.faq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  background: none; border: none; cursor: pointer; text-align: left; padding: 30px 2px;
  font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 2.6vw, 27px); line-height: 1.2; color: var(--ink);
  transition: color 140ms ease;
}
.faq__q:hover { color: var(--accent); }
.faq__q:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faq__mark { font-size: 20px; color: var(--faint); flex: none; transition: transform 300ms cubic-bezier(0.2,0.7,0.2,1), color 140ms ease; }
.faq__item.is-open .faq__mark { transform: rotate(45deg); color: var(--accent); }
.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 380ms cubic-bezier(0.2,0.7,0.2,1); }
.faq__item.is-open .faq__panel { grid-template-rows: 1fr; }
.faq__panel-inner { overflow: hidden; }
.faq__a { font-size: 17px; line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 720px; padding: 0 2px 32px; }

/* ---------- sec 07 · the door ---------- */
.door__frame { padding-bottom: 140px; text-align: center; }
.door .sec-head { text-align: left; }
.door__title { font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 8vw, 104px); line-height: 1.0; letter-spacing: -0.02em; margin: 120px auto 0; max-width: 900px; }
.door__sub { font-size: 18px; line-height: 1.55; color: var(--on-ink-sub); max-width: 560px; margin: 28px auto 0; }
.door__cta { margin-top: 48px; }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: var(--on-ink-faint); border-top: 1px solid var(--dark-line); }
.footer__inner { max-width: 1264px; margin: 0 auto; padding: 48px 32px; display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; align-items: baseline; font-size: 11px; letter-spacing: 0.14em; }
.footer__links { display: flex; flex-wrap: wrap; gap: 24px; }
.footer__links a { color: var(--on-ink-faint); text-decoration: none; padding: 8px 0; }
.footer__links a:hover { color: var(--on-ink); }
.footer__legal { flex-basis: 100%; color: var(--on-ink-legal); letter-spacing: 0.1em; line-height: 1.7; }

/* ---------- instrument readout ---------- */
.readout { position: fixed; bottom: 20px; right: 20px; z-index: 60; background: var(--canvas); border: 1px solid var(--hair); padding: 9px 14px; display: flex; align-items: center; gap: 14px; font-size: 10px; letter-spacing: 0.16em; color: var(--ink-2); }
.readout__dot { width: 6px; height: 6px; background: var(--accent); flex: none; }
.readout__pct { color: var(--faint); }
@media (max-width: 1079px) { .readout { display: none; } }

/* ---------- reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(18px); filter: blur(5px); transition: opacity 550ms cubic-bezier(0.2,0.7,0.2,1), transform 550ms cubic-bezier(0.2,0.7,0.2,1), filter 550ms cubic-bezier(0.2,0.7,0.2,1); }
[data-reveal].is-in { opacity: 1; transform: translateY(0); filter: blur(0); }

/* ---------- alive: buttons, cards, hero ---------- */
.btn { transition: filter 140ms ease, border-color 140ms ease, transform 180ms cubic-bezier(0.2,0.7,0.2,1), box-shadow 180ms cubic-bezier(0.2,0.7,0.2,1); will-change: transform; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn--accent { box-shadow: 0 1px 0 rgba(20,21,26,0.08); }
.btn--accent:hover { box-shadow: 0 10px 26px -10px rgba(229,72,42,0.55); }
.card, .spec__panel, .shot, .digest, .audit-card { transition: box-shadow 220ms ease, transform 220ms ease; }
.card:hover, .digest:hover, .audit-card:hover { box-shadow: 0 14px 34px -18px rgba(20,21,26,0.22), 0 3px 10px rgba(20,21,26,0.05); transform: translateY(-2px); }
.shot--zoom:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -20px rgba(0,0,0,0.55); }
.rail__item, .nav__link { transition: color 140ms ease, padding-left 140ms ease; }

@keyframes a4a-heroline { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
.hero__title span { display: inline-block; opacity: 0; animation: a4a-heroline 900ms cubic-bezier(0.2,0.7,0.2,1) forwards; }
.hero__title br + span, .hero__title > span:nth-child(3) { animation-delay: 120ms; }
.hero__title > span:nth-child(5) { animation-delay: 240ms; }
.hero__sub { opacity: 0; animation: a4a-heroline 900ms cubic-bezier(0.2,0.7,0.2,1) 380ms forwards; }
.hero__ctas { opacity: 0; animation: a4a-heroline 900ms cubic-bezier(0.2,0.7,0.2,1) 500ms forwards; }
@keyframes a4a-kenburns { 0% { transform: scale(1); } 50% { transform: scale(1.045); } 100% { transform: scale(1); } }
.hero__video { animation: a4a-kenburns 28s ease-in-out infinite; will-change: transform; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-ticker] { animation: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .workflow [data-th] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .wf__spine::after { transform: none !important; }
  .rail__item, .nav, .btn, .card, .shot, .iphone, .faq__panel, .faq__mark, .plan, .shot--zoom { transition: none !important; }
  .hero__video, .hero__title span, .hero__sub, .hero__ctas { animation: none !important; opacity: 1 !important; transform: none !important; }
  .iphone, .phone-stage:hover .iphone { transform: none !important; }
  .btn:hover, .btn:active, .plan:hover, .shot--zoom:hover, .card:hover, .digest:hover, .audit-card:hover { transform: none !important; }
}

/* ---------- small screens ---------- */
@media (max-width: 700px) {
  .shell { padding: 0 20px; }
  .frame { padding-left: 22px; padding-right: 22px; }
  .nav__cta { display: none; }
  .nav__inner { gap: 14px; padding-left: 20px; padding-right: 20px; }
  .frame--pb, .frame--pb-lg { padding-bottom: 80px; }
  .hero__grid { padding: 64px 0 56px; gap: 44px; }
  .h2 { margin: 64px 0 56px; }
  .agents__intro { padding: 64px 0 56px; }
  .chapter { padding: 56px 0 72px; }
  .door__title { margin-top: 80px; }
}