/* Agaton Agent demo. Visual language: an auditor's working paper.
   Ledger paper, green pencil tick marks, red pencil for exceptions, a highlighter on the row being checked. */

:root {
  --shell: #163a2d;      /* ledger-cover green: chrome, primary actions */
  --shell-2: #24533f;
  --paper: #eaf0e4;      /* columnar pad */
  --sheet: #f8faf4;      /* a sheet on the pad */
  --rule: #cddbc8;
  --rule-strong: #9fb89c;
  --ink: #1c2a23;
  --muted: #5b6e63;
  --faint: #93a398;
  --tick: #1e7b4c;       /* green pencil */
  --red: #c3343c;        /* red pencil */
  --hl: #f4de63;         /* highlighter */
  --cream: #eef3e6;

  --ui: "Bahnschrift", "Segoe UI", system-ui, sans-serif;
  --cond: "Bahnschrift SemiCondensed", "Bahnschrift", "Segoe UI", sans-serif;
  --pencil: "Ink Free", "Segoe Print", cursive;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0f2a20; }
body { font-family: var(--ui); color: var(--ink); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
.num, .tr, dd, .c-times b, .ds b { font-variant-numeric: tabular-nums; }

/* ---------- Stage ---------- */
#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform-origin: center center;
  background: var(--paper);
  overflow: hidden;
}
#scene { position: absolute; inset: 88px 0 0 0; transition: top .4s ease; }
.at-cover #scene { top: 0; }
.sc { position: absolute; inset: 0; padding: 40px 56px; }

/* ---------- Top bar ---------- */
#topbar {
  position: absolute; inset: 0 0 auto 0; height: 88px; z-index: 5;
  display: flex; align-items: center; gap: 44px; padding: 0 48px;
  background: var(--shell); color: var(--cream);
  transition: transform .4s ease;
}
.at-cover #topbar { transform: translateY(-100%); }
.tb-brand { display: flex; align-items: center; gap: 14px; }
.tb-logo svg { width: 44px; height: 44px; display: block; }
.tb-logo path { fill: none; stroke: var(--cream); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.tb-logo path + path { stroke: #9fe0b5; }
.tb-name { font-size: 30px; font-weight: 600; letter-spacing: .01em; }
.tb-client { display: flex; align-items: baseline; gap: 16px; font-size: 26px; padding-left: 44px; border-left: 1px solid rgba(238, 243, 230, .25); }
.tb-period { color: rgba(238, 243, 230, .6); font-size: 22px; }
.tb-erp { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 22px; color: rgba(238, 243, 230, .7);
  padding: 8px 18px; border: 1.5px solid rgba(238, 243, 230, .25); border-radius: 999px; }
.tb-erp .dot { width: 12px; height: 12px; border-radius: 50%; background: #8a958f; }
.tb-erp.on { color: var(--cream); border-color: rgba(159, 224, 181, .6); }
.tb-erp.on .dot { background: #6fdc98; box-shadow: 0 0 0 5px rgba(111, 220, 152, .18); }

/* ---------- Shared pieces ---------- */
.paper { background: var(--sheet); border: 1.5px solid var(--rule-strong); border-radius: 4px; box-shadow: 0 3px 0 var(--rule); }
.ruled {
  background-image: repeating-linear-gradient(to bottom, transparent 0 47px, rgba(159, 184, 156, .32) 47px 48px);
  background-color: var(--sheet);
}
h2 { font-size: 56px; font-weight: 600; letter-spacing: -.01em; color: var(--shell); }

.btn { font-size: 26px; font-weight: 600; padding: 14px 30px; border-radius: 6px; border: 2px solid var(--shell); cursor: pointer; transition: transform .12s, background .2s; }
.btn.primary { background: var(--shell); color: var(--cream); }
.btn.ghost { background: transparent; color: var(--shell); }
.btn.big { font-size: 32px; padding: 18px 44px; }
.btn:focus-visible { outline: 4px solid var(--hl); outline-offset: 3px; }
.btn.pressed { transform: translateY(2px) scale(.97); background: var(--tick); border-color: var(--tick); }

/* Pencil marks */
.mark { width: 34px; height: 34px; flex: none; overflow: visible; }
.mark path { fill: none; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw .3s ease-out forwards; }
.tick path { stroke: var(--tick); }
.cross path { stroke: var(--red); }
.tv { position: relative; display: inline-block; padding: 0 4px; }
.ring { position: absolute; left: -12px; top: -9px; width: calc(100% + 24px); height: calc(100% + 18px); overflow: visible; pointer-events: none; }
.ring path { fill: none; stroke: var(--red); stroke-width: 3.2; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw .45s ease-in-out forwards; }
.logo-mark path { fill: none; stroke: var(--shell); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw .6s ease-out .1s forwards; }
.logo-mark path + path { stroke: var(--tick); animation-delay: .6s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.static .mark path, .static .ring path, .static .logo-mark path, .static .strike path, .static .v-arrow path { animation: none; stroke-dashoffset: 0; }
.static, .static *, .final, .final * { transition: none !important; }
.static .appear, .static li { animation: none !important; }

/* ---------- 1 · Cover ---------- */
.cover {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(to bottom, transparent 0 63px, rgba(159, 184, 156, .35) 63px 64px);
}
.cover .brand { position: absolute; left: 150px; top: 290px; transform-origin: 0 0; transition: transform .7s cubic-bezier(.6, 0, .2, 1); }
.cover .brand .logo-mark { width: 150px; height: 150px; margin-left: -14px; }
.cover h1 { font-family: var(--cond); font-size: 176px; line-height: .95; font-weight: 600; letter-spacing: -.02em; color: var(--shell); margin-top: 12px; }
.cover .tagline { font-size: 48px; line-height: 1.25; margin-top: 30px; color: var(--ink); }

.slip { position: absolute; right: 150px; top: 300px; width: 640px; padding: 14px 28px; transform: rotate(1.2deg);
  background: var(--sheet); border: 1.5px solid var(--rule-strong); box-shadow: 0 3px 0 var(--rule), 0 24px 40px -28px rgba(22, 58, 45, .45);
  transition: opacity .5s, transform .6s; }
.slip-head { display: flex; justify-content: space-between; font-size: 20px; font-weight: 600; color: var(--muted); padding: 6px 0 10px; border-bottom: 2px solid var(--ink); }
.slip-row { display: grid; grid-template-columns: 70px 1fr 160px 50px; align-items: center; height: 66px; font-size: 24px; border-bottom: 1px solid var(--rule); }
.slip-row:last-child { border-bottom: 0; }
.s-num { color: var(--muted); }
.s-amt { position: relative; text-align: right; padding-right: 8px; }
.s-mark { display: flex; justify-content: flex-end; }

.problem { position: absolute; left: 150px; right: 150px; top: 330px; opacity: 0; pointer-events: none; transition: opacity .6s .35s; }
.problem .lead { font-size: 46px; line-height: 1.25; max-width: 1250px; }
.hours { position: relative; height: 30px; margin-top: 72px; font-size: 22px; color: var(--muted); }
.hours span { position: absolute; transform: translateX(-50%); }
.hours span:first-child { transform: none; }
.hours span:last-child { transform: translateX(-100%); }
.bar { display: flex; height: 110px; gap: 6px; margin-top: 10px; }
.seg { position: relative; background: rgba(22, 58, 45, .08); border-radius: 3px; }
.seg i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); border-radius: 3px; }
.seg-payroll i { background: var(--shell); }
.seg-depreciation i { background: var(--shell-2); }
.seg-bank i { background: #4f8a6d; }
.seg-label { position: absolute; top: calc(100% + 18px); left: 0; display: flex; flex-direction: column; gap: 4px; }
.seg-label b { font-size: 32px; }
.seg-label span { font-family: var(--cond); font-size: 40px; font-weight: 600; color: var(--shell); }
.seg-label em { font-style: normal; font-size: 22px; color: var(--muted); }
.problem .total { position: absolute; top: 540px; left: 0; font-size: 40px; color: var(--muted); }
.problem .total b { font-family: var(--cond); font-size: 84px; font-weight: 600; color: var(--ink); margin-right: 12px; }

.show-problem .brand { transform: translate(-60px, -240px) scale(.36); }
.show-problem .brand .tagline { opacity: 0; transition: opacity .3s; }
.show-problem .slip { opacity: 0; transform: translateX(60px) rotate(1.2deg); }
.show-problem .problem { opacity: 1; }
.show-problem .seg i { transform: scaleX(1); }
.show-problem.anim .seg i { animation: fill .9s cubic-bezier(.5, 0, .2, 1) both; }
.show-problem.anim .seg-payroll i { animation-delay: .9s; }
.show-problem.anim .seg-depreciation i { animation-delay: 1.8s; }
.show-problem.anim .seg-bank i { animation-delay: 2.7s; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- 2 · Connect ---------- */
.connect { max-width: 1200px; margin: 0 auto; padding-top: 70px; position: relative; height: 100%; }
.connect .sub { font-size: 30px; color: var(--muted); margin-top: 14px; }
.erp-card { margin-top: 54px; display: flex; align-items: center; justify-content: space-between; padding: 34px 44px; }
.erp-id { display: flex; align-items: center; gap: 26px; }
.erp-badge { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-size: 42px; font-weight: 700; color: var(--cream); background: var(--muted); }
.erp-id b { display: block; font-size: 42px; }
.erp-id div span { font-size: 24px; color: var(--muted); }
.erp-ok { display: none; align-items: center; gap: 12px; font-size: 34px; font-weight: 600; color: var(--tick); }
.erp-ok .mark { width: 56px; height: 56px; }
.datasets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; opacity: 0; transition: opacity .5s .3s; }
.ds { padding: 6px 0 6px 26px; border-left: 3px solid var(--rule-strong); }
.ds b { display: block; font-family: var(--cond); font-size: 100px; line-height: 1; font-weight: 600; color: var(--shell); }
.ds span { font-size: 26px; color: var(--muted); }
.pills { display: flex; gap: 14px; margin-top: 40px; opacity: 0; transition: opacity .5s .8s; }
.pills span { font-size: 22px; padding: 8px 20px; border: 2px solid var(--rule-strong); border-radius: 999px; color: var(--shell); }
.connected .erp-card .btn { display: none; }
.connected .erp-ok { display: flex; }
.connected .erp-badge { background: var(--shell); }
.connected .datasets, .connected .pills { opacity: 1; }

.consent-wrap { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(22, 58, 45, .32); opacity: 0; pointer-events: none; transition: opacity .35s; }
.asking .consent-wrap { opacity: 1; pointer-events: auto; }
.consent { width: 860px; padding: 44px 54px; transform: translateY(24px); transition: transform .4s; box-shadow: 0 3px 0 var(--rule), 0 40px 80px -30px rgba(22, 58, 45, .6); }
.asking .consent { transform: none; }
.c-app { display: flex; align-items: center; gap: 14px; font-size: 26px; font-weight: 600; color: var(--shell); }
.c-app .logo-mark { width: 46px; height: 46px; }
.consent h3 { font-size: 36px; line-height: 1.25; margin-top: 22px; font-weight: 600; }
.consent ul { margin-top: 26px; display: grid; gap: 14px; }
.consent li { display: flex; align-items: center; gap: 16px; font-size: 30px; }
.asking .consent li { animation: appear .4s both; }
.consent li .mark { width: 36px; height: 36px; }
.c-note { font-size: 24px; color: var(--muted); margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--rule); }
.c-actions { display: flex; justify-content: flex-end; gap: 16px; margin-top: 30px; }
@keyframes appear { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- 3 · Command ---------- */
.command { max-width: 1520px; margin: 0 auto; }
.ask { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px 30px; padding: 26px 36px; border-width: 2px; transition: border-color .3s; }
.ask-label { grid-column: 1 / -1; font-size: 22px; color: var(--muted); }
.ask-text { font-size: 38px; line-height: 1.3; min-height: 100px; }
.caret { display: inline-block; width: 3px; height: 40px; margin-left: 3px; vertical-align: -6px; background: var(--shell); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.sent .ask { border-color: var(--tick); }
.sent .caret { display: none; }
.sent .send { background: var(--tick); border-color: var(--tick); }
.reply { margin-top: 36px; opacity: 0; }
.planned .reply { opacity: 1; }
.r-head { display: flex; align-items: center; gap: 18px; }
.r-head .logo-mark { width: 54px; height: 54px; }
.r-head p { font-size: 32px; }
.r-plan { display: grid; gap: 16px; margin-top: 24px; }
.r-plan li { display: grid; grid-template-columns: 76px 1fr 220px; align-items: center; padding: 22px 32px; }
.planned.anim .r-plan li { animation: appear .45s both; }
.planned.anim .r-plan li:nth-child(1) { animation-delay: .4s; }
.planned.anim .r-plan li:nth-child(2) { animation-delay: .8s; }
.planned.anim .r-plan li:nth-child(3) { animation-delay: 1.2s; }
.planned.anim .r-foot { animation: appear .45s 1.7s both; }
.r-num { font-family: var(--cond); font-size: 52px; font-weight: 600; color: var(--shell); }
.r-what b { font-size: 32px; }
.r-rec { font-size: 24px; color: var(--muted); margin-left: 16px; }
.r-what p { font-size: 24px; color: var(--muted); margin-top: 4px; }
.r-time { text-align: right; }
.r-time span { display: block; font-size: 20px; color: var(--muted); }
.r-time b { font-family: var(--cond); font-size: 40px; font-weight: 600; }
.r-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; }
.r-foot p { font-size: 30px; }

/* ---------- 4–6 · Runs ---------- */
.run { display: flex; flex-direction: column; gap: 22px; height: 100%; }
.plan-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.chip { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 16px; padding: 14px 22px;
  border: 2px solid var(--rule-strong); border-radius: 6px; background: rgba(248, 250, 244, .6); }
.chip.waiting { opacity: .5; }
.chip.running { border-color: var(--shell); background: var(--sheet); }
.c-state { width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid var(--rule-strong); display: grid; place-items: center; }
.chip.running .c-state { border-color: var(--shell); border-top-color: transparent; animation: spin 1s linear infinite; }
.chip.done .c-state { border-color: transparent; }
.chip.done .c-state .mark { width: 38px; height: 38px; }
@keyframes spin { to { transform: rotate(360deg); } }
.c-name b { display: block; font-size: 28px; }
.c-name span { font-size: 21px; color: var(--muted); }
.c-times { display: flex; gap: 24px; }
.c-times span { display: flex; flex-direction: column; align-items: flex-end; }
.c-times em { font-style: normal; font-size: 18px; color: var(--muted); }
.c-times b { font-family: var(--cond); font-size: 30px; font-weight: 600; }
.c-agent b { color: var(--tick); }
.c-junior b { color: var(--muted); }

.run-body { flex: 1; display: grid; grid-template-columns: 1fr 540px; gap: 28px; min-height: 0; }
.wp { padding: 20px 26px 10px; display: flex; flex-direction: column; min-width: 0; }
.wp-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.agent-line { display: flex; align-items: center; gap: 14px; font-size: 27px; min-width: 0; white-space: nowrap; }
.agent-line .red { color: var(--red); font-weight: 600; }
.pulse { width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--tick); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(30, 123, 76, .18); } }
.finished .pulse { animation: none; }
.finished .status-text { color: var(--tick); font-weight: 600; }
.count { font-size: 24px; color: var(--muted); white-space: nowrap; }
.count b { font-family: var(--cond); font-size: 34px; font-weight: 600; color: var(--ink); }
.progress { height: 8px; border-radius: 4px; background: var(--rule); margin: 14px 0 12px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--tick); transition: width .12s linear; }
.t-head { display: grid; padding: 0 12px 8px; font-size: 20px; font-weight: 600; color: var(--muted); border-bottom: 2px solid var(--ink); }
.t-head .num { text-align: right; padding-right: 14px; }
.t-head span:last-child { padding-left: 14px; }
.viewport { overflow: hidden; position: relative; }
.tbody { transition: transform .14s linear; }
.tr { display: grid; height: 54px; align-items: center; padding: 0 12px; border-bottom: 1px solid var(--rule); font-size: 23px; color: var(--faint); }
.tr.ok, .tr.bad, .tr.cur { color: var(--ink); }
.tr.cur { background: linear-gradient(transparent 10%, rgba(244, 222, 99, .8) 10% 90%, transparent 90%); }
.tr.bad { background: rgba(195, 52, 60, .06); }
.td { position: relative; white-space: nowrap; }
.td.num { text-align: right; padding-right: 14px; }
.td.acct, .t-head .acct { padding-left: 22px; }
.td.mk { display: flex; align-items: center; gap: 8px; padding-left: 14px; }
.td.mk .mark { width: 32px; height: 32px; }
.pnote { font-family: var(--pencil); font-size: 22px; color: var(--red); white-space: nowrap; animation: write .6s steps(18) both; }
@keyframes write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.static .pnote { animation: none; }

.exceptions { display: flex; flex-direction: column; min-height: 0; }
.exceptions h3 { font-size: 32px; font-weight: 600; display: flex; align-items: center; gap: 14px; }
.badge { font-size: 24px; min-width: 44px; text-align: center; padding: 2px 12px; border-radius: 999px; background: var(--rule); color: var(--muted); }
.has-ex .badge { background: var(--red); color: #fff; }
.ex-empty { font-size: 24px; color: var(--muted); margin-top: 16px; line-height: 1.35; }
.has-ex .ex-empty { display: none; }
.ex-list { display: grid; gap: 14px; margin-top: 18px; }
.ex-list li { display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: start; padding: 16px 18px;
  background: var(--sheet); border: 1.5px solid var(--rule-strong); border-left: 6px solid var(--red); border-radius: 4px; animation: slide-in .35s ease-out both; }
.ex-list li .mark { width: 30px; height: 30px; margin-top: 2px; }
.ex-list b { display: block; font-size: 24px; line-height: 1.2; font-weight: 600; }
.ex-list span { display: block; font-size: 20px; color: var(--muted); margin-top: 4px; }
.ex-list em { font-style: normal; font-family: var(--cond); font-size: 24px; font-weight: 600; white-space: nowrap; }
@keyframes slide-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* ---------- 7 · Findings ---------- */
.findings { display: flex; flex-direction: column; gap: 26px; height: 100%; }
.verdict { display: flex; align-items: center; gap: 34px; }
.v-col span { display: block; font-size: 24px; color: var(--muted); }
.v-col b { position: relative; display: inline-block; font-family: var(--cond); font-size: 116px; line-height: 1; font-weight: 600; }
.v-hand b { color: var(--muted); }
.v-agent b { color: var(--shell); }
.strike { position: absolute; left: -8px; right: -8px; top: 38%; width: calc(100% + 16px); height: 40px; overflow: visible; }
.strike path { fill: none; stroke: var(--red); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.anim .strike path { animation: draw .5s ease-in .6s forwards; }
.v-arrow { width: 120px; height: 40px; margin-top: 24px; overflow: visible; }
.v-arrow path { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.anim .v-arrow path { animation: draw .5s ease-out 1.1s forwards; }
.anim .v-agent { animation: appear .5s 1.5s both; }
.anim .v-facts { animation: appear .5s 2s both; }
.v-facts { margin-left: auto; display: grid; gap: 6px; text-align: right; }
.v-facts p { font-size: 28px; color: var(--muted); }
.v-facts b { font-family: var(--cond); font-size: 52px; font-weight: 600; color: var(--ink); margin-right: 8px; }

.f-body { flex: 1; display: grid; grid-template-columns: 1fr 820px; gap: 30px; min-height: 0; }
.f-list { display: flex; flex-direction: column; gap: 10px; }
.f-group h4 { font-size: 21px; font-weight: 600; color: var(--muted); margin: 0 0 4px 16px; }
.f-item { width: 100%; display: grid; grid-template-columns: 1fr 180px 150px; align-items: center; gap: 12px; padding: 9px 16px;
  font-size: 24px; text-align: left; background: transparent; border: 2px solid transparent; border-bottom: 1px solid var(--rule); cursor: pointer; }
.f-item:hover { background: rgba(248, 250, 244, .7); }
.f-item.sel { background: var(--sheet); border: 2px solid var(--shell); border-radius: 4px; }
.f-item:focus-visible { outline: 4px solid var(--hl); }
.f-amt { text-align: right; font-family: var(--cond); font-weight: 600; font-variant-numeric: tabular-nums; }
.f-st { justify-self: end; font-size: 19px; font-weight: 600; padding: 3px 14px; border-radius: 999px; border: 2px solid currentColor; }
.f-item[data-st="open"] .f-st { color: var(--red); }
.f-item[data-st="confirmed"] .f-st { color: #fff; background: var(--red); border-color: var(--red); }
.f-item[data-st="dismissed"] .f-st { color: var(--muted); }
.f-item[data-st="dismissed"] .f-title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }

.f-detail { padding: 32px 42px; position: relative; overflow: hidden; }
.f-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; color: var(--muted); padding: 40px; text-align: center; }
.d-task { font-size: 21px; font-weight: 600; color: var(--muted); }
.f-detail h3 { font-size: 40px; line-height: 1.15; font-weight: 600; margin-top: 6px; }
.d-who { font-size: 25px; color: var(--muted); margin-top: 8px; }
.f-detail h5 { font-size: 22px; font-weight: 600; color: var(--shell); margin-top: 24px; }
.d-why { font-size: 27px; line-height: 1.4; margin-top: 6px; max-width: 720px; }
.f-detail dl { margin-top: 18px; }
.f-detail dl div { display: flex; justify-content: space-between; gap: 20px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.f-detail dt { font-size: 22px; color: var(--muted); }
.f-detail dd { font-size: 24px; font-weight: 600; }
.d-actions { display: flex; gap: 16px; margin-top: 28px; }
.decision { margin-top: 24px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 28px; }
.stamp { display: inline-block; font-family: var(--cond); font-size: 44px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 22px; border: 5px double currentColor; border-radius: 6px; transform: rotate(-6deg); }
.decision.confirmed .stamp { color: var(--red); }
.decision.dismissed .stamp { color: var(--shell); }
.decision p { font-size: 22px; color: var(--muted); }
.decision .reason { grid-column: 1 / -1; font-family: var(--pencil); font-size: 30px; color: #2b4c8c; margin-top: 10px; }
.decision.anim .stamp { animation: thump .35s cubic-bezier(.3, 1.6, .6, 1) both; }
.decision.anim .reason { animation: write 1.1s steps(40) .3s both; }
@keyframes thump { from { opacity: 0; transform: rotate(-6deg) scale(1.8); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }

/* ---------- 8 · Working paper ---------- */
.report { display: flex; flex-direction: column; align-items: center; gap: 18px; height: 100%; }
.r-toolbar { width: 1500px; display: flex; justify-content: space-between; align-items: center; }
.r-toolbar p { font-size: 28px; color: var(--muted); }
.sheet { width: 1500px; flex: 1; padding: 44px 64px; position: relative; }
.wp-ref { position: absolute; top: 30px; right: 48px; font-family: var(--pencil); font-size: 40px; color: var(--red);
  border: 3px solid var(--red); border-radius: 50%; padding: 2px 20px; transform: rotate(-5deg); }
.sheet header h2 { font-size: 50px; }
.sheet header p { font-size: 26px; color: var(--muted); margin-top: 8px; line-height: 1.35; }
.r-sum { width: 100%; border-collapse: collapse; margin-top: 30px; background: var(--sheet); }
.r-sum th { font-size: 21px; color: var(--muted); font-weight: 600; text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--ink); }
.r-sum td { font-size: 27px; padding: 13px 12px; border-bottom: 1px solid var(--rule); }
.r-sum .num { text-align: right; font-variant-numeric: tabular-nums; }
.r-sum td .mark { width: 32px; height: 32px; vertical-align: middle; }
.r-sum tfoot td { font-weight: 600; border-top: 2px solid var(--ink); border-bottom: 4px double var(--ink); }
.r-decisions { font-size: 26px; margin-top: 24px; }
.signoff { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-top: 40px; }
.signoff span { display: block; font-size: 20px; color: var(--muted); }
.signoff b { display: block; font-size: 32px; margin-top: 4px; }
.signoff em { display: block; font-style: normal; font-size: 22px; color: var(--muted); margin-top: 6px; }
.sign-line { height: 46px; width: 440px; border-bottom: 2px solid var(--ink); }

#toast { position: absolute; right: 48px; bottom: 40px; z-index: 9; display: flex; align-items: center; gap: 14px;
  padding: 18px 28px; border-radius: 6px; background: var(--shell); color: var(--cream); font-size: 24px;
  opacity: 0; transform: translateY(30px); transition: transform .35s ease, opacity .35s; pointer-events: none; }
#toast.show { opacity: 1; transform: none; }
#toast .tick path { stroke: #9fe0b5; }

/* ---------- 9 · Security ---------- */
.security { max-width: 1700px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; padding-bottom: 30px; }
.flow { display: grid; grid-template-columns: 1fr 270px 1fr 270px 1fr; align-items: center; margin-top: 48px; }
.node { min-height: 200px; padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.node b { font-size: 36px; }
.node span { font-size: 24px; color: var(--muted); }
.node.agent { border: 3px solid var(--shell); }
.node .logo-mark { width: 58px; height: 58px; }
.link { text-align: center; padding: 0 14px; }
.link span { display: block; font-size: 21px; color: var(--shell); font-weight: 600; margin-bottom: 12px; line-height: 1.25; }
.link i { position: relative; display: block; height: 4px; background: repeating-linear-gradient(90deg, var(--shell) 0 14px, transparent 14px 22px); transform-origin: left; }
.link i::after { content: ""; position: absolute; right: -4px; top: -9px; border: 11px solid transparent; border-left: 16px solid var(--shell); border-right: 0; }
.anim .link i { animation: grow .6s ease-out both; }
.anim .link:nth-of-type(4) i { animation-delay: .5s; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sec-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 64px; align-items: start; }
.pledges { display: grid; gap: 22px; }
.pledges li { display: flex; align-items: center; gap: 16px; font-size: 32px; }
.pledges .mark { width: 44px; height: 44px; }
.perms { width: 100%; border-collapse: separate; border-spacing: 0; padding: 14px 26px; opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .5s; }
.s1 .perms { opacity: 1; transform: none; }
.perms th { font-size: 20px; font-weight: 600; color: var(--muted); padding: 10px 8px; text-align: center; border-bottom: 2px solid var(--ink); }
.perms th:first-child, .perms td:first-child { text-align: left; }
.perms td { font-size: 26px; padding: 12px 8px; text-align: center; border-bottom: 1px solid var(--rule); }
.perms tr:last-child td { border-bottom: 0; }
.perms td .mark { width: 34px; height: 34px; vertical-align: middle; }
.perms td em { display: block; font-style: normal; font-size: 18px; color: var(--muted); }
.perms .no { color: var(--faint); }
.security:not(.s1) .perms .mark path { animation-play-state: paused; }

/* ---------- 10 · Setup and cost ---------- */
.cost { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; height: 100%; align-content: center; padding: 0 20px; }
.weeks { display: grid; gap: 18px; margin-top: 30px; }
.weeks li { padding: 26px 32px; }
.wk { font-size: 22px; font-weight: 600; color: var(--muted); }
.weeks b { display: block; font-size: 32px; margin-top: 6px; }
.weeks p { font-size: 24px; color: var(--muted); margin-top: 6px; }
.roi { opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .5s; }
.s1 .roi { opacity: 1; transform: none; }
.eq { display: flex; align-items: flex-end; gap: 24px; margin-top: 40px; }
.eq div { display: flex; flex-direction: column; }
.eq b { font-family: var(--cond); font-size: 104px; line-height: 1; font-weight: 600; color: var(--ink); }
.eq span { font-size: 22px; color: var(--muted); margin-top: 6px; }
.eq i { font-style: normal; font-size: 60px; color: var(--muted); padding-bottom: 36px; }
.eq .hl b { color: var(--shell); background: linear-gradient(transparent 58%, rgba(244, 222, 99, .85) 58% 92%, transparent 92%); padding: 0 6px; }
.payback { display: flex; align-items: center; gap: 16px; font-size: 30px; margin-top: 44px; }
.payback .mark { width: 44px; height: 44px; }
.cost:not(.s1) .payback .mark path { animation-play-state: paused; }

/* ---------- 11 · Rules ---------- */
.rules { max-width: 1500px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; padding-bottom: 30px; }
.rules ol { display: grid; gap: 16px; margin-top: 36px; }
.rules li { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 24px; padding: 20px 32px; opacity: 0; }
.rules.s0 .r0, .rules.s0 .r1, .rules.s0 .r2, .rules.s1 .r3, .rules.s1 .r4 { opacity: 1; }
.rules.anim.s0 .r0 { animation: appear .4s .2s both; }
.rules.anim.s0 .r1 { animation: appear .4s .5s both; }
.rules.anim.s0 .r2 { animation: appear .4s .8s both; }
.rules.anim.s1 .r3 { animation: appear .4s .1s both; }
.rules.anim.s1 .r4 { animation: appear .4s .4s both; }
.rules.s1 .r0, .rules.s1 .r1, .rules.s1 .r2 { animation: none; }
.ic svg { width: 60px; height: 60px; display: block; fill: none; stroke: var(--shell); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rules p { font-size: 36px; }

/* ---------- 12 · Pilot ---------- */
.pilot { display: grid; place-items: center; height: 100%; }
.proposal { width: 1320px; padding: 56px 72px 60px; position: relative; }
.proposal h2 { font-size: 66px; }
.proposal dl { margin-top: 28px; }
.proposal dl div { display: grid; grid-template-columns: 260px 1fr; padding: 18px 0; border-bottom: 1px solid var(--rule-strong); }
.proposal dt { font-size: 26px; color: var(--muted); padding-top: 4px; }
.proposal dd { font-size: 34px; }
.p-head { display: flex; align-items: center; justify-content: space-between; }
.p-head .stamp { font-size: 66px; color: var(--tick); transform: rotate(-8deg); opacity: 0; margin-right: 10px; }
.p-next { font-size: 28px; color: var(--muted); margin-top: 30px; opacity: 0; }
.s1 .p-head .stamp, .s1 .p-next { opacity: 1; }
.anim.s1 .p-head .stamp { animation: thump8 .4s cubic-bezier(.3, 1.6, .6, 1) both; }
.anim.s1 .p-next { animation: appear .4s .4s both; }
@keyframes thump8 { from { opacity: 0; transform: rotate(-8deg) scale(1.8); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}