/* ===== Visual story pages (/blog/...) — loaded after ai.css =====
   Default rules show every scene in its FINAL state (no JS, reduced motion).
   Hidden "before" states and animations only apply to .anim scenes (added by blog.js)
   inside @media (prefers-reduced-motion: no-preference). */

.story { --color-cap: #f43f5e; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.1em; height: 1.1em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: -.18em; }

/* ----- Hero ----- */
.story__hero { padding-bottom: 28px; }
.story__sub { margin-top: 14px; font-size: clamp(1.1rem, 2.4vw, 1.3rem); font-weight: 600; color: var(--color-text); }
.story__notice {
  display: inline-block; margin-top: 18px; padding: 6px 14px; border-radius: 999px; font-size: .88rem;
  color: #fde68a; background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .4);
}
.story__notice strong { color: var(--color-human); }
.story__arc { width: 100%; max-width: 560px; margin-top: 18px; overflow: visible; }
.story__trail { fill: none; stroke: var(--color-text-muted); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 9; opacity: .7; }
.story__end { fill: var(--color-bg); stroke: var(--color-accent); stroke-width: 2.5; }
.story__arc text { fill: var(--color-text); font: 700 22px Inter, sans-serif; letter-spacing: .04em; }
.story__plane { color: var(--color-accent); transform-box: view-box; transform-origin: 300px 440px; }

/* ----- Progress strip ----- */
.story__body { padding-top: 20px; }
.progress { position: sticky; top: 58px; z-index: 50; margin: 0 -12px 40px; padding: 10px 12px; border-radius: 0 0 12px 12px; background: rgba(11, 15, 26, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.progress .mini-flow { margin: 0; flex-wrap: nowrap; }
.article__body .progress a { border: 0; color: var(--color-text); }
.progress a span { display: inline-block; white-space: nowrap; transition: background .25s, opacity .25s, box-shadow .25s; }
.js .progress a span { opacity: .6; }
.js .progress a.is-current span { opacity: 1; }
.progress a.is-current span { background: rgba(56, 189, 248, .18); box-shadow: 0 0 0 1px var(--color-accent); }
.progress a.is-current span.is-agent { background: rgba(99, 102, 241, .28); box-shadow: 0 0 0 1px var(--color-primary); }
.progress a.is-current span.is-human { background: rgba(245, 158, 11, .2); box-shadow: 0 0 0 1px var(--color-human); }
.progress a.is-current span.is-done { background: rgba(34, 197, 94, .2); box-shadow: 0 0 0 1px var(--color-done); }

/* ----- Scene shell ----- */
.scene { padding: 0; margin-bottom: 56px; scroll-margin-top: 120px; }
.article__body .scene__title { display: flex; align-items: center; gap: 12px; font-size: clamp(1.2rem, 2.6vw, 1.5rem); margin-bottom: 14px; }
.scene__num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .85rem; font-weight: 800; color: #fff; background: var(--color-surface); border: 2px solid var(--color-primary); }
.scene__card {
  position: relative; min-height: 360px; padding: 32px 28px; display: grid; place-items: center; overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
}
.scene__card--chart { padding: 24px 20px 18px; place-items: stretch; align-content: center; }
.article__body .scene__caption { margin: 14px 0 0; text-align: center; font-size: 1.02rem; color: var(--color-text); }
.scene__replay {
  position: absolute; top: 12px; right: 12px; z-index: 5; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  color: var(--color-text-muted); background: var(--color-bg); border: 1px solid var(--color-border); cursor: pointer;
  visibility: hidden; opacity: 0; transition: opacity .3s, color .2s, border-color .2s;
}
.scene__replay .ico { width: 18px; height: 18px; }
.scene__replay:hover { color: var(--color-text); border-color: var(--color-accent); }
.scene__replay:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.scene.is-done .scene__replay { visibility: visible; opacity: 1; }

/* ----- Chips (shared) ----- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: .9rem; font-weight: 600;
  color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border);
}
.chip--target { color: #86efac; border-color: var(--color-done); background: rgba(34, 197, 94, .1); }
.chip--cap { color: #fda4af; border-color: var(--color-cap); background: rgba(244, 63, 94, .1); }
.chip--ask { color: #fcd34d; border-color: var(--color-human); background: rgba(245, 158, 11, .1); }
.chips--muted .chip { color: var(--color-text-muted); font-weight: 500; }

/* ----- Scene 1: chat -> brief ----- */
.s1 { display: grid; width: 100%; max-width: 560px; }
.s1 > * { grid-area: 1 / 1; }
.chat { display: none; }
.chat__head { display: flex; justify-content: space-between; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--color-border); font-size: .9rem; font-weight: 600; }
.who { display: inline-flex; align-items: center; gap: 8px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; }
.avatar--agent { color: #fff; background: var(--color-primary); }
.avatar--ana { color: #1a1204; background: var(--color-human); }
.chat__list { display: flex; flex-direction: column; gap: 8px; }
.bubble { position: relative; max-width: 80%; padding: 8px 14px; font-size: .93rem; line-height: 1.4; border-radius: 16px; }
.bubble--agent { align-self: flex-start; background: rgba(99, 102, 241, .22); border: 1px solid rgba(129, 140, 248, .5); border-bottom-left-radius: 4px; }
.bubble--ana { align-self: flex-end; background: rgba(245, 158, 11, .16); border: 1px solid rgba(245, 158, 11, .5); border-bottom-right-radius: 4px; }
.typing { position: absolute; left: 14px; top: 50%; translate: 0 -50%; display: flex; gap: 4px; opacity: 0; }
.bubble--ana .typing { left: auto; right: 14px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-muted); }
.brief { align-self: center; padding: 22px; border-radius: 14px; background: var(--color-bg); border: 1px solid var(--color-border); }
.brief__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.brief__head h3 { font-size: 1.1rem; font-weight: 800; }
.brief__ok { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--color-done); border: 1.5px solid var(--color-done); background: rgba(34, 197, 94, .1); }

/* ----- Scene 2: clock + run loop ----- */
.s2 { display: grid; grid-template-columns: 250px 1fr; gap: 22px; align-items: center; width: 100%; }
.clock { width: 100%; overflow: visible; }
.clock__face { fill: var(--color-bg); stroke: var(--color-border); stroke-width: 2; }
.clock__dot { fill: var(--color-accent); stroke: var(--color-bg); stroke-width: 3; transform-box: fill-box; transform-origin: center; }
.clock__mag { color: var(--color-accent); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; opacity: 0; }
.clock text { fill: var(--color-text); font: 600 16px Inter, sans-serif; }
.clock__hand { stroke: var(--color-primary-hover); stroke-width: 4; stroke-linecap: round; transform-box: view-box; transform-origin: 150px 120px; transform: rotate(90deg); }
.clock__hub { fill: var(--color-primary-hover); }
.run__tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.tile {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 12px 6px;
  border-radius: 12px; background: var(--color-bg); border: 1px solid var(--color-primary); box-shadow: 0 0 14px rgba(99, 102, 241, .25);
}
.run__tiles .tile:not(:last-child)::after { content: '→'; position: absolute; right: -13px; top: 22px; font-size: .8rem; color: var(--color-text-muted); }
.tile__ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--color-accent); background: rgba(56, 189, 248, .1); }
.tile__ico .ico { width: 18px; height: 18px; }
.tile strong { font-size: .85rem; line-height: 1.2; }
.tile small { font-size: .82rem; line-height: 1.25; color: var(--color-text-muted); }
.article__body .tile--sleep { margin: 14px 0 0; flex-direction: row; justify-content: center; gap: 10px; border-color: var(--color-border); box-shadow: none; color: var(--color-text); }
.tile--sleep .tile__ico { color: var(--color-text-muted); background: rgba(148, 163, 184, .1); }
.zzz { font-weight: 700; font-style: italic; color: var(--color-text-muted); letter-spacing: .05em; }

/* ----- Scene 3: chart ----- */
.chart { width: 100%; }
.chart__svg { width: 100%; height: auto; overflow: visible; font-family: Inter, sans-serif; }
.chart__svg--mobile, .chart__legend { display: none; }
.ch-zone--cap { fill: rgba(244, 63, 94, .07); }
.ch-zone--target { fill: rgba(34, 197, 94, .09); }
.ch-grid line { stroke: rgba(148, 163, 184, .14); stroke-width: 1; }
.ch-grid .ch-base { stroke: var(--color-border); stroke-width: 1.5; }
.ch-tick { fill: var(--color-text-muted); font-size: 13px; }
.chart__svg--mobile .ch-tick { font-size: 14px; }
.ch-cap, .ch-target { stroke-width: 2; stroke-dasharray: 7 5; transform-box: fill-box; transform-origin: left center; }
.ch-cap { stroke: var(--color-cap); }
.ch-target { stroke: var(--color-done); }
.ch-ref text { font-size: 13px; font-weight: 700; }
.chart__svg--mobile .ch-ref text { font-size: 14px; }
.ch-ref use { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ch-ref--cap { color: #fb7185; fill: #fb7185; }
.ch-ref--target { color: #4ade80; fill: #4ade80; }
.ch-line { fill: none; stroke: var(--color-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.ch-pt { fill: var(--color-accent); stroke: var(--color-surface); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
.ch-skip { transform-box: fill-box; transform-origin: center; }
.ch-skip circle { fill: var(--color-surface); stroke: #64748b; stroke-width: 2; }
.ch-skip path { stroke: #64748b; stroke-width: 1.5; }
.ch-tag { fill: var(--color-text); font-size: 13px; font-weight: 600; transform-box: fill-box; transform-origin: center; }
.chart__svg--mobile .ch-tag { font-size: 14px; }
.ch-tag--skip { fill: #94a3b8; font-weight: 500; }
.ch-bell { color: #fcd34d; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
.ch-hit { fill: var(--color-done); stroke: var(--color-surface); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
.ch-ring { fill: none; stroke: var(--color-done); stroke-width: 2; opacity: .45; transform-box: fill-box; transform-origin: center; transform: scale(1.6); }
.ch-tag--hit { fill: #4ade80; font-size: 15px; font-weight: 800; }
.chart__svg--mobile .ch-tag--hit { font-size: 15px; }
.article__body .chart__legend { margin: 8px 0 0; font-size: .85rem; color: var(--color-text-muted); align-items: center; gap: 6px; justify-content: center; }
.chart__legend .ico { color: #fcd34d; }

/* ----- Scene 4: phone ----- */
.s4 { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.article__body .pill { margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-size: .88rem; font-weight: 600; }
.pill--agent { color: #c7d2fe; border: 1px solid var(--color-primary); background: rgba(99, 102, 241, .14); }
.pill--done { color: #86efac; border: 1px solid var(--color-done); background: rgba(34, 197, 94, .12); }
.phone { position: relative; width: 300px; max-width: 100%; padding: 30px 12px 18px; border-radius: 36px; background: #05070d; border: 2px solid #334155; box-shadow: var(--shadow); }
.phone__notch { position: absolute; top: 10px; left: 50%; translate: -50% 0; width: 84px; height: 10px; border-radius: 999px; background: #1e293b; }
.phone__screen { display: flex; flex-direction: column; gap: 10px; padding: 12px 10px; min-height: 360px; border-radius: 24px; background: var(--color-bg-alt); overflow: hidden; }
.notif { padding: 10px 12px; border-radius: 14px; background: rgba(51, 65, 85, .7); border: 1px solid #475569; font-size: .82rem; display: grid; grid-template-columns: 1fr auto; row-gap: 2px; }
.notif__app { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: #c7d2fe; }
.notif__time { color: var(--color-text-muted); }
.article__body .notif p { grid-column: 1 / -1; margin: 0; color: var(--color-text); font-weight: 600; font-size: .9rem; }
.msg { font-size: .86rem; line-height: 1.45; border-radius: 16px; padding: 10px 12px; }
.msg--agent { align-self: flex-start; max-width: 92%; background: rgba(99, 102, 241, .2); border: 1px solid rgba(129, 140, 248, .5); border-top-left-radius: 4px; transform-origin: top center; }
.article__body .msg p { margin: 0; color: var(--color-text); }
.msg--ana { align-self: flex-end; display: flex; align-items: baseline; gap: 8px; font-weight: 800; color: #1a1204; background: var(--color-human); border-bottom-right-radius: 4px; }
.msg--ana time { white-space: nowrap; font-size: .82rem; font-weight: 600; color: rgba(26, 18, 4, .7); }
.replies { position: relative; display: flex; gap: 8px; }
.reply { flex: 1; text-align: center; padding: 8px 0; border-radius: 999px; font-size: .88rem; font-weight: 800; color: var(--color-text-muted); border: 1.5px solid #475569; }
.reply--buy { color: #1a1204; background: var(--color-human); border-color: var(--color-human); }
.finger { position: absolute; left: var(--fx, 25%); top: var(--fy, 50%); width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(226, 232, 240, .45); border: 2px solid rgba(255, 255, 255, .7); opacity: 0; pointer-events: none; }

/* ----- Scene 5: ticket ----- */
.s5 { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.ticket { position: relative; display: grid; grid-template-columns: 1fr 140px; width: 100%; max-width: 560px; border-radius: 18px; background: var(--color-bg); border: 1px solid var(--color-border); }
.ticket__main { padding: 22px 24px; }
.ticket__route { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.ticket__route span { display: flex; flex-direction: column; line-height: 1.1; }
.ticket__route b { font-size: 2.1rem; font-weight: 800; letter-spacing: .02em; }
.ticket__route small { font-size: .82rem; color: var(--color-text-muted); }
.ticket__route .ico { width: 28px; height: 28px; color: var(--color-accent); }
.ticket__meta { display: flex; gap: 28px; margin-bottom: 10px; }
.ticket__meta dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }
.ticket__meta dd { font-weight: 700; }
.article__body .ticket__pax { margin: 0; font-size: .88rem; color: var(--color-text-muted); }
.ticket__stub { display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 2px dashed var(--color-border); padding: 18px; }
.ticket__stub::before, .ticket__stub::after { content: ''; position: absolute; right: 131px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border); }
.ticket__stub::before { top: -10px; }
.ticket__stub::after { bottom: -10px; }
.ticket__stub small { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }
.ticket__stub b { font-size: 1.9rem; font-weight: 800; color: var(--color-done); }
.ticket__stamp {
  position: absolute; right: 150px; bottom: 16px; padding: 6px 14px; border-radius: 10px; font-weight: 800; font-size: 1.15rem; letter-spacing: .08em;
  color: var(--color-done); border: 3px solid var(--color-done); background: rgba(11, 15, 26, .7); transform: rotate(-8deg);
}

/* ----- Guardrails ----- */
.limits__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.limit { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 20px 14px; border-radius: var(--radius); background: var(--color-surface); border: 1px solid var(--color-border); }
.limit strong { font-size: .98rem; }
.limit > span:last-child { font-size: .88rem; color: var(--color-text-muted); line-height: 1.4; }
.limit__ico { width: 48px; height: 48px; margin-bottom: 4px; border-radius: 50%; display: grid; place-items: center; color: var(--color-accent); background: rgba(56, 189, 248, .1); border: 1px solid rgba(56, 189, 248, .35); }
.limit__ico .ico, .limit__ico svg { width: 24px; height: 24px; }
.limit--human .limit__ico { color: var(--color-human); background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .4); }
.limit__ico--lines svg { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.l-cap { stroke: var(--color-cap); }
.l-target { stroke: var(--color-done); }

/* ----- Business tie-in ----- */
.biz__flow { margin: 0 0 22px; }
.biz__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.biz__card { padding: 20px; border-radius: var(--radius); background: var(--color-surface); border: 1px solid var(--color-border); }
.biz__ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 10px; color: var(--color-accent); background: rgba(56, 189, 248, .1); }
.biz__ico .ico { width: 22px; height: 22px; }
.biz__card h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 8px; }
.article__body .biz__card p { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: .92rem; }
.biz__card p > span:first-child { color: var(--color-text-muted); }
.biz__card p > span:last-child { color: var(--color-text); font-weight: 600; }
.biz__arrow { width: 40px; height: 12px; fill: none; stroke: var(--color-human); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.biz__arrow path { stroke-dasharray: 1; }
.article__body .biz__note { margin: 12px 0 0; font-size: .85rem; color: var(--color-text-muted); text-align: center; }

/* ----- CTA tweak (no paragraph) ----- */
.story .article__cta h2 { margin-bottom: 22px; }

/* ----- More details (FAQ-style accordions) ----- */
.more details { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; margin-bottom: 12px; transition: border-color .2s; }
.more details[open] { border-color: rgba(129, 140, 248, .5); }
.more summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: '+'; font-size: 1.4rem; line-height: 1; color: var(--color-accent); transition: transform .25s; }
.more details[open] summary::after { transform: rotate(45deg); }
.more summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 12px; }
.more__body { padding: 0 22px 20px; }
.more__body > :last-child { margin-bottom: 0; }

/* ----- Responsive ----- */
@media (max-width: 860px) {
  .progress { position: static; margin: 0 0 32px; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .progress .mini-flow { flex-wrap: wrap; }
  .s2 { grid-template-columns: 1fr; justify-items: center; }
  .clock { max-width: 280px; }
  .run { width: 100%; max-width: 360px; }
  .run__tiles { grid-template-columns: 1fr; gap: 10px; }
  .tile { flex-direction: row; text-align: left; gap: 12px; padding: 10px 14px; }
  .tile strong { font-size: .92rem; }
  .tile small { margin-left: auto; text-align: right; }
  .run__tiles .tile:not(:last-child)::after { content: '↓'; right: auto; left: 30px; top: auto; bottom: -15px; }
  .limits__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .scene__card { padding: 24px 16px; min-height: 0; }
  .scene__card--chart { padding: 18px 12px 14px; }
  .chart__svg--desktop { display: none; }
  .chart__svg--mobile { display: block; }
  .article__body .chart__legend { display: flex; }
  .bubble { max-width: 88%; font-size: .9rem; }
  .brief { padding: 18px 16px; }
  .chip { font-size: .85rem; padding: 6px 10px; }
  .ticket { grid-template-columns: 1fr; }
  .ticket__main { padding: 20px 18px 16px; }
  .ticket__route b { font-size: 1.8rem; }
  .ticket__stub { flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 12px; border-left: 0; border-top: 2px dashed var(--color-border); padding: 14px 18px; }
  .ticket__stub::before, .ticket__stub::after { right: auto; top: auto; bottom: 47px; }
  .ticket__stub::before { left: -10px; }
  .ticket__stub::after { right: -10px; }
  .ticket__stamp { right: 16px; bottom: 16px; font-size: 1rem; }
  .biz__grid { grid-template-columns: 1fr; }
  .limit { padding: 16px 10px; }
  .more summary { padding: 16px 18px; }
  .more__body { padding: 0 18px 18px; }
}

/* ===== Animations: only when motion is OK and blog.js has armed the scene ===== */
@media (prefers-reduced-motion: no-preference) {
  /* "before" states */
  .anim .fx-fade, .anim .fx-up, .anim .fx-tag, .anim .fx-flip, .anim .fx-stamp, .anim .fx-drop, .anim .fx-expand, .anim .fx-ring { opacity: 0; }
  .anim .fx-pop { transform: scale(0); }
  .anim .fx-draw { stroke-dashoffset: 1; }
  .anim .fx-grow { transform: scaleX(0); }
  .anim .chat { display: block; }

  /* generic timeline */
  .anim.is-playing .fx-fade { animation: fx-fade var(--dur, .4s) ease var(--t, 0s) both; }
  .anim.is-playing .fx-up { animation: fx-up var(--dur, .25s) ease-out var(--t, 0s) both; }
  .anim.is-playing .fx-pop { animation: fx-pop .4s ease-out var(--t, 0s) both; }
  .anim.is-playing .fx-tag { animation: fx-tag 1.5s ease var(--t, 0s) both; }
  .anim.is-playing .fx-draw { animation: fx-draw var(--dur, .4s) linear var(--t, 0s) both; }
  .anim.is-playing .fx-grow { animation: fx-grow var(--dur, .5s) ease-out var(--t, 0s) both; }
  .anim.is-playing .fx-flip { animation: fx-flip .5s ease-out var(--t, 0s) both; }
  .anim.is-playing .fx-stamp { animation: fx-stamp .3s cubic-bezier(.3, 1.6, .6, 1) var(--t, 0s) both; }
  .anim.is-playing .ticket__stamp.fx-stamp { animation: fx-stamp-rot .3s ease-in var(--t, 0s) both, fx-shake .25s ease calc(var(--t, 0s) + .3s); }
  .anim.is-playing .fx-drop { animation: fx-drop .4s ease-out var(--t, 0s) both; }
  .anim.is-playing .fx-expand { animation: fx-expand .4s ease-out var(--t, 0s) both; }
  .anim.is-playing .fx-out { animation: fx-out .4s ease-in var(--t, 0s) both; }
  .anim.is-playing .fx-ring { animation: fx-ring .8s ease-out var(--t, 0s) 3 forwards; }
  .anim.is-playing .typing { animation: fx-typing .4s step-end var(--t, 0s) both; }
  .anim.is-playing .typing i { animation: fx-blink .6s ease-in-out infinite; }
  .anim.is-playing .typing i:nth-child(2) { animation-delay: .15s; }
  .anim.is-playing .typing i:nth-child(3) { animation-delay: .3s; }

  /* hero plane: ORD -> LIS once on load */
  .anim .story__plane { transform: rotate(-36.87deg); }
  .anim.is-playing .story__plane { animation: fx-fly 2.5s ease-in-out .2s both; }

  /* scene 2: hand sweeps 2 turns + a quarter (stops at noon); dots, magnifiers and tiles react */
  .anim .clock__hand { transform: rotate(0deg); }
  .anim .clock__dot { fill: #334155; }
  .anim .tile { opacity: .35; border-color: var(--color-border); box-shadow: none; }
  .anim .tile--sleep { opacity: .3; }
  .anim.is-playing .clock__hand { animation: fx-sweep 9s linear both; }
  .anim.is-playing .clock__dot { animation: fx-dot 4s ease-out var(--d) var(--n), fx-dot-on .3s ease 9s forwards; }
  .anim.is-playing .clock__mag { animation: fx-mag 4s ease-out var(--d) var(--n); }
  .anim.is-playing .tile { animation: fx-tile 1s linear calc(var(--k) + .05s) 9, fx-tile-on .3s ease calc(9s + var(--k)) forwards; }
  .anim.is-playing .tile--sleep { animation: fx-sleep 1s linear calc(var(--k) + .05s) 9, fx-tile-on .3s ease calc(9s + var(--k)) forwards; }

  /* scene 4: fingertip taps BUY */
  .anim.is-playing .finger { animation: fx-finger 1s ease var(--tap, 3.2s) both; }
  .anim.is-playing .reply--buy { animation: fx-press .3s ease calc(var(--tap, 3.2s) + .3s); }
}

@keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fx-pop { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes fx-tag { 0% { opacity: 0; transform: scale(.7); } 15% { opacity: 1; transform: scale(1.15); } 80% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }
@keyframes fx-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fx-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fx-flip { from { opacity: 0; transform: perspective(700px) rotateX(70deg); } to { opacity: 1; transform: none; } }
@keyframes fx-stamp { 0% { opacity: 0; transform: scale(1.8); } 100% { opacity: 1; transform: scale(1); } }
@keyframes fx-stamp-rot { 0% { opacity: 0; transform: rotate(-8deg) scale(1.6); } 100% { opacity: 1; transform: rotate(-8deg) scale(1); } }
@keyframes fx-shake { 0%, 100% { translate: 0 0; } 25% { translate: -2px 1px; } 50% { translate: 2px -1px; } 75% { translate: -1px 0; } }
@keyframes fx-drop { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
@keyframes fx-expand { from { opacity: 0; transform: scaleY(.3); } to { opacity: 1; transform: none; } }
@keyframes fx-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.92); visibility: hidden; } }
@keyframes fx-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: .45; transform: scale(1.6); } }
@keyframes fx-typing { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes fx-fly { from { transform: rotate(-36.87deg); } to { transform: rotate(36.87deg); } }
@keyframes fx-sweep { from { transform: rotate(0deg); } to { transform: rotate(810deg); } }
@keyframes fx-dot { 0% { fill: var(--color-accent); transform: scale(1.6); } 10% { fill: var(--color-accent); transform: scale(1); } 25%, 100% { fill: #334155; transform: scale(1); } }
@keyframes fx-dot-on { to { fill: var(--color-accent); } }
@keyframes fx-mag { 0% { opacity: 0; transform: translateY(4px); } 6% { opacity: 1; transform: none; } 20%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes fx-tile { 0% { opacity: 1; border-color: var(--color-primary); box-shadow: 0 0 14px rgba(99, 102, 241, .35); } 45% { opacity: 1; border-color: var(--color-primary); } 70%, 100% { opacity: .35; border-color: var(--color-border); box-shadow: none; } }
@keyframes fx-sleep { 0%, 15% { opacity: 1; } 35%, 100% { opacity: .3; } }
@keyframes fx-tile-on { to { opacity: 1; border-color: var(--color-primary); box-shadow: 0 0 14px rgba(99, 102, 241, .25); } }
@keyframes fx-finger { 0% { opacity: 0; transform: translate(60px, 50px); } 30% { opacity: 1; transform: none; } 50% { opacity: 1; transform: scale(.85); box-shadow: 0 0 0 0 rgba(245, 158, 11, .6); } 80% { opacity: .8; transform: scale(1); box-shadow: 0 0 0 22px rgba(245, 158, 11, 0); } 100% { opacity: 0; transform: none; } }
@keyframes fx-press { 50% { transform: scale(.92); } }

/* =====================================================================
   Example pages 2-5 (quote follow-up, translation progress, revision rounds,
   cleaner confirmation). Same rules as above: default = final state.
   ===================================================================== */
.story[class*="story--"] svg use { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* hero extras */
.story__notices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.story__notices .story__notice { margin-top: 0; }
.story__notice--lock { color: #bbf7d0; background: rgba(34, 197, 94, .1); border-color: rgba(34, 197, 94, .45); }
.story__notice--lock strong { color: var(--color-done); }
.story__notice .ico { margin-right: 6px; }
.article__body .story__note { margin: 12px 0 0; font-size: .9rem; color: var(--color-text-muted); text-align: center; }
.story__hero .story__note--hero { margin: 14px 0 0; font-size: .92rem; color: var(--color-text-muted); max-width: 640px; }
.article__body .story__note--block { text-align: left; padding: 14px 18px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); margin-top: 18px; color: var(--color-text); }
.story__art { width: 100%; max-width: 560px; margin-top: 18px; overflow: visible; }
.story__art--rev { max-width: 300px; }
.qh-dot { fill: var(--color-text-muted); }
.qh-icon { color: var(--color-accent); }
.qh-icon--pen { color: var(--color-human); }
.hbar { display: flex; gap: 6px; width: 100%; max-width: 560px; margin-top: 20px; }
.hbar__seg { flex: var(--w) 1 0; position: relative; height: 14px; border-radius: 7px; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); }
.hbar__seg i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: 7px; background: #818cf8; }
.hbar__seg:nth-child(2) i { background: #2dd4bf; }
.hbar__seg:nth-child(3) i { background: #c084fc; }
.ch-dots { stroke: var(--color-text-muted); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 11; opacity: .8; }
.ch-end { fill: var(--color-bg); stroke: var(--color-accent); stroke-width: 2.5; }
.ch-broom { color: var(--color-text-muted); }
.story__art .ch-lbl { fill: var(--color-text); font: 700 22px Inter, sans-serif; }
.ch-key { color: var(--color-human); }
.rh-pages rect { fill: var(--color-surface); stroke: #475569; stroke-width: 2; }
.rh-pages path { stroke: #475569; stroke-width: 2; fill: none; stroke-linecap: round; }
.rh-pen { color: var(--color-text); }
.rh-slash { stroke: var(--color-cap); stroke-width: 5; stroke-linecap: round; fill: none; }
.rh-d circle { fill: var(--color-surface); stroke: var(--color-border); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.rh-d text { fill: var(--color-text); font: 700 14px Inter, sans-serif; }
.rh-d--ok circle { fill: var(--color-done); stroke: var(--color-done); }
.rh-d--ok text { fill: #052e16; }
.rh-d--no circle { stroke: var(--color-cap); stroke-width: 3; }

/* chips, progress */
.chip--grey { color: var(--color-text-muted); }
.chip--info { color: #7dd3fc; border-color: var(--color-accent); background: rgba(56, 189, 248, .1); }
.mini-flow span.is-cap { border-color: var(--color-cap); }
.progress a.is-current span.is-cap { background: rgba(244, 63, 94, .18); box-shadow: 0 0 0 1px var(--color-cap); }

/* scene 2 shared */
.stack { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; }
.stack .run { width: 100%; }
.article__body .run__note { margin: 16px auto 0; display: flex; width: fit-content; max-width: 100%; }
.article__body .tile--hand { margin: 14px 0 0; flex-direction: row; justify-content: center; gap: 10px; }
.tile--off { border-style: dashed; border-color: #475569; box-shadow: none; opacity: .6; }
.tile__ico--human { color: var(--color-human); background: rgba(245, 158, 11, .1); }

/* quote: sunrise + day counter */
.sunrise { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; }
.sunrise__sun { width: 64px; height: 64px; color: #fcd34d; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sunrise__time { display: flex; flex-direction: column; line-height: 1.2; }
.sunrise__time b { font-size: 1.7rem; font-weight: 800; }
.sunrise__time small { font-size: .9rem; color: var(--color-text-muted); }
.daycal { display: flex; align-items: center; gap: 10px; padding: 8px 20px; border-radius: 14px; background: var(--color-bg); border: 2px solid var(--color-accent); }
.daycal__lbl { font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); }
.daycal__nums { display: inline-grid; min-width: 1.4ch; text-align: center; }
.dn { grid-area: 1 / 1; font-size: 2.4rem; font-weight: 800; line-height: 1.1; color: var(--color-text); }
.dn:not(.dn-final) { display: none; }

/* quote: 30-day timeline */
.qd { fill: var(--color-accent); stroke: var(--color-surface); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.qd--dim { fill: #334155; }
.qline { stroke-width: 4; stroke-linecap: round; }
.qline--dim { stroke: #334155; }
.qline--blue { stroke: var(--color-accent); stroke-dasharray: 1; display: none; }
.qline--green { stroke: var(--color-done); }
.qtick { stroke: var(--color-border); stroke-width: 1.5; }
.q-card { fill: var(--color-bg); stroke: var(--color-primary); stroke-width: 1.5; }
.q-card__t { fill: var(--color-text); font: 800 16px Inter, sans-serif; }
.q-card__s { fill: var(--color-text-muted); font: 500 14px Inter, sans-serif; }
.q-lead { stroke: #475569; stroke-width: 1.5; }
.q-bubble { color: var(--color-accent); transform-box: fill-box; transform-origin: center; }
.q-bubble--off { color: #64748b; }
.q-ok { fill: var(--color-human); }
.q-oktick { color: #1a1204; stroke-width: 3.2 !important; }
.q-eye { color: #94a3b8; }
.q-flag { color: #94a3b8; }
.q-x { stroke: #94a3b8; stroke-width: 2; fill: none; stroke-linecap: round; }
.q-stamp { transform-box: fill-box; transform-origin: center; transform: rotate(-8deg); }
.q-stamp rect { fill: rgba(11, 15, 26, .75); stroke: var(--color-done); stroke-width: 3; }
.q-stamp text { fill: var(--color-done); font: 800 20px Inter, sans-serif; letter-spacing: .06em; }
.q-lbl { fill: var(--color-text); font-size: 14px; font-weight: 600; }
.q-lbl--grey { fill: #94a3b8; font-weight: 500; }
.q-lbl--ok { fill: #4ade80; font-weight: 700; font-size: 15px; }
.story--quote .ch-tick, .story--clean .cl-tk { font-size: 14px; }
.vt-wrap { display: none; width: 100%; }
.vt { position: relative; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0 0 0 28px; }
.vt::before { content: ''; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 2px; background: var(--color-border); }
.vt__item { position: relative; }
.vt__dot { position: absolute; left: -28px; top: 13px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-accent); border: 3px solid var(--color-surface); }
.vt__card { padding: 10px 14px; border-radius: 12px; background: var(--color-bg); border: 1px solid var(--color-border); text-align: left; }
.vt__day { display: block; font-size: .85rem; font-weight: 600; color: var(--color-text-muted); }
.vt__card strong { display: flex; align-items: center; gap: 6px; font-size: .95rem; line-height: 1.35; }
.vt__card small { display: block; margin-top: 2px; font-size: .86rem; color: var(--color-text-muted); }
.vt--blue .vt__card { border-color: rgba(129, 140, 248, .5); }
.vt--green .vt__dot { background: var(--color-done); }
.vt--green .vt__card { border-color: var(--color-done); background: rgba(34, 197, 94, .08); }
.vt--off .vt__dot, .vt--grey .vt__dot { background: var(--color-surface); border-color: #64748b; }
.vt--off .vt__card, .vt--grey .vt__card { border-style: dashed; color: #94a3b8; }
.vt--red .vt__dot { background: var(--color-cap); }
.vt--red .vt__card { border-color: var(--color-cap); }
.vt--amber .vt__dot { background: var(--color-human); }
.vt--amber .vt__card { border-color: var(--color-human); background: rgba(245, 158, 11, .08); }
.vt__stamp { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 8px; font-weight: 800; letter-spacing: .06em; font-size: .95rem; color: var(--color-done); border: 2px solid var(--color-done); transform: rotate(-4deg); }
.lane { margin-bottom: 18px; }
.lane__h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1rem; font-weight: 700; }
.lane__chip { padding: 2px 10px; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--color-text-muted); border: 1px solid var(--color-border); }
.article__body .vt__cut { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 8px 12px; border-radius: 10px; font-size: .92rem; font-weight: 700; color: #fb7185; border: 1px dashed var(--color-cap); background: rgba(244, 63, 94, .06); }

/* scene 4 / 5 additions */
.msg__quote { margin-top: 6px !important; padding-left: 10px; border-left: 3px solid rgba(129, 140, 248, .6); font-style: italic; }
.replies--stack { flex-direction: column; }
.reply--wide { flex: 2; }
.pill--fail { color: #fda4af; border: 1px solid var(--color-cap); background: rgba(244, 63, 94, .1); }
.phone--wide { width: 340px; }
.draft { padding: 10px 12px; border-radius: 14px; background: var(--color-bg); border: 1px dashed #64748b; font-size: .86rem; line-height: 1.45; transform-origin: top center; }
.article__body .draft p { margin: 0; color: var(--color-text); }
.article__body .draft .draft__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 700; }
.draft__tag { padding: 1px 8px; border-radius: 6px; font-size: .82rem; letter-spacing: .06em; color: #cbd5e1; background: #334155; }
.draft__edit { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: var(--color-text-muted); font-size: .85rem; }
.paper { position: relative; width: 100%; max-width: 560px; padding: 20px 22px 24px; border-radius: 16px; background: var(--color-bg); border: 1px solid var(--color-border); }
.paper__head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.paper__head b { display: block; font-size: 1.15rem; }
.paper__head small, .paper__total small { display: block; font-size: .85rem; color: var(--color-text-muted); }
.paper__total { text-align: right; }
.paper__total b { color: var(--color-done); font-size: 1.8rem; font-weight: 800; }
.paper__sign { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 16px; margin-top: 18px; padding-top: 12px; border-top: 2px dashed var(--color-border); }
.paper__squiggle { width: 160px; height: 40px; flex-shrink: 0; }
.paper__squiggle path { fill: none; stroke: #c7d2fe; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.paper__signed { font-size: .9rem; color: var(--color-text-muted); padding-bottom: 6px; }
.paper__stamp { position: absolute; right: 18px; bottom: 22px; padding: 6px 14px; border-radius: 10px; font-weight: 800; font-size: 1.15rem; letter-spacing: .08em; color: var(--color-done); border: 3px solid var(--color-done); background: rgba(11, 15, 26, .75); transform: rotate(-8deg); }
.article__body .paper__kicker { margin: 0 0 12px; font-size: .9rem; font-weight: 700; color: var(--color-text-muted); }
.paper__rows { display: grid; gap: 8px; margin: 0 0 22px; }
.paper__rows li { display: flex; justify-content: space-between; gap: 12px; font-size: .95rem; }
.paper__rows b { color: var(--color-text); font-size: 1.2rem; }
.paper--co .paper__stamp { bottom: 14px; }
.s5__pair { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; width: 100%; }
.s5__pair .paper { flex: 1 1 320px; width: auto; }
.article__body .invoice { margin: 0; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-bg); font-size: .92rem; max-width: 260px; }
.invoice b { color: var(--color-done); }
.invoice__ok { display: inline-flex; align-items: center; gap: 4px; color: var(--color-done); font-weight: 700; }
.article__body .s5__alt { margin: 0; font-size: .9rem; color: var(--color-text-muted); text-align: center; max-width: 520px; }
.paper--board { display: grid; grid-template-columns: 1fr 130px; padding: 0; }
.paper__main { padding: 20px 22px 26px; }
.paper__title { font-size: 1.15rem; font-weight: 800; margin-bottom: 12px; }
.paper__ticks { display: grid; gap: 10px; margin: 0; }
.paper__tick { display: flex; align-items: flex-start; gap: 8px; font-size: .95rem; }
.paper__tick .ico { color: var(--color-done); margin-top: 3px; }
.paper__stub { display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 2px dashed var(--color-border); padding: 14px; text-align: center; }
.paper__stub b { font-size: 1.8rem; font-weight: 800; color: var(--color-done); }
.paper__stub small { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }
.paper--board .paper__stamp { right: 150px; bottom: 14px; font-size: 1rem; }
.board { position: relative; width: 100%; max-width: 620px; padding: 20px 22px 30px; border-radius: 16px; background: var(--color-bg); border: 1px solid var(--color-border); }
.article__body .board__head { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-weight: 800; color: var(--color-done); }
.board__list { display: grid; gap: 14px; margin: 0; }
.board__row { display: grid; grid-template-columns: minmax(0, 12em) 1fr; grid-template-areas: "n t" ". w"; gap: 4px 14px; align-items: center; }
.board__name { grid-area: n; font-weight: 700; font-size: .95rem; }
.board__track { grid-area: t; display: block; height: 14px; border-radius: 7px; background: var(--color-surface); border: 1px solid var(--color-border); overflow: hidden; }
.board__fill { display: flex; height: 100%; width: var(--p); background: var(--color-done); border-radius: 7px; }
.board__fill i { display: block; height: 100%; }
.board__a { background: #86efac; }
.board__b { background: #16a34a; }
.board__when { grid-area: w; font-size: .88rem; color: var(--color-text-muted); }
.board .board__stamp { right: 16px; bottom: -16px; font-size: 1.05rem; }

/* translation: timeline, burn-up */
.tlwrap { width: 100%; }
.tl { width: 100%; height: auto; overflow: visible; font-family: Inter, sans-serif; }
.tl--mobile { display: none; }
.tl-bar { fill: var(--color-border); }
.tl-end { fill: var(--color-cap); }
.tl-start { fill: var(--color-text-muted); }
.tl-mk__c { fill: var(--color-primary); stroke: var(--color-surface); stroke-width: 3; transform-box: fill-box; transform-origin: center; }
.tl-mk__i { color: #fff; }
.tl-t { fill: var(--color-text); font-size: 14px; font-weight: 600; }
.tl-t--b { fill: #c7d2fe; font-weight: 800; font-size: 15px; }
.tl-t--m { fill: var(--color-text-muted); font-weight: 500; }
.tl-brk { fill: none; stroke: var(--color-border); stroke-width: 2; }
.tl-dot { fill: #fff; stroke: var(--color-accent); stroke-width: 3; opacity: 0; }
.b-band { fill: rgba(245, 158, 11, .08); }
.b-pace { stroke: #94a3b8; stroke-width: 2; stroke-dasharray: 1; }
.b-limit { stroke: var(--color-human); stroke-width: 2; stroke-dasharray: 7 5; }
.b-dead { stroke: var(--color-cap); stroke-width: 2; stroke-dasharray: 7 5; }
.b-lbl { font-size: 14px; font-weight: 700; }
.b-lbl--pace { fill: #cbd5e1; }
.b-lbl--limit { fill: #fcd34d; }
.b-lbl--dead { fill: #fb7185; }
.b-axis { fill: var(--color-text-muted); font-size: 14px; font-weight: 500; }
.bl { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.bl--mara { stroke: #818cf8; }
.bl--jonas { stroke: #2dd4bf; }
.bl--lena { stroke: #c084fc; }
.bl--green { stroke: #4ade80; }
.bp { stroke: var(--color-surface); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
.bp--mara { fill: #818cf8; }
.bp--jonas { fill: #2dd4bf; }
.bp--lena { fill: #c084fc; }
.bp--green { fill: #4ade80; }
.bp--big { stroke: var(--color-human); stroke-width: 3; }
.b-lring { fill: none; stroke: var(--color-human); stroke-width: 2; opacity: .5; transform-box: fill-box; transform-origin: center; transform: scale(1.5); }
.b-ok { transform-box: fill-box; transform-origin: center; }
.b-ok circle { fill: var(--color-done); }
.b-ok use { color: #fff; stroke-width: 3 !important; }
.b-flag { transform-box: fill-box; transform-origin: center; }
.b-flag use { color: #fff; stroke-width: 2.4 !important; }
.b-tag text { fill: #94a3b8; font-size: 14px; font-weight: 500; }
.b-behind { fill: #fcd34d; font-weight: 800; font-size: 16px; transform-box: fill-box; transform-origin: left center; }
.b-behind text { fill: #fcd34d; font-size: 16px; font-weight: 800; }
.b-chip rect { fill: rgba(245, 158, 11, .16); stroke: var(--color-human); stroke-width: 1.5; }
.b-chip text { fill: #fcd34d; font-size: 14px; font-weight: 700; }
.b-end { font-size: 14px; font-weight: 800; }
.b-end--mara { fill: #a5b4fc; }
.b-end--jonas { fill: #5eead4; }
.b-end--lena { fill: #d8b4fe; }
.b-end--green { fill: #4ade80; }
.b-lead { stroke: #4ade80; stroke-width: 1.5; }
.b-back text { fill: #4ade80; font-size: 15px; font-weight: 800; }
.ch-tick--b { fill: #cbd5e1; font-weight: 700; }
.story--trans .ch-tick, .story--trans .chart__svg--mobile .ch-tick { font-size: 14px; }

/* revision: inbox, sees strip, staircase, checklist */
.inbox { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; }
.inbox__box { position: relative; display: grid; justify-items: center; gap: 6px; padding: 30px 24px 12px; border-radius: 14px; background: var(--color-bg); border: 1px solid var(--color-border); }
.inbox__ico .ico { width: 46px; height: 46px; color: var(--color-accent); }
.inbox__env { position: absolute; top: 6px; left: 50%; translate: -50% 0; color: #fcd34d; }
.inbox__env .ico { width: 26px; height: 26px; }
.inbox small { font-size: .86rem; color: var(--color-text-muted); }
.inbox__file { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; font-size: .92rem; font-weight: 600; background: var(--color-bg); border: 1px solid var(--color-primary); }
.inbox__daily { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-muted); }
.sees { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; text-align: left; }
.sees__col { padding: 14px 18px; border-radius: 12px; background: var(--color-bg); border: 1px solid var(--color-border); }
.article__body .sees__col h3 { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin: 0 0 8px; }
.sees__col ul { display: grid; gap: 4px; margin: 0; }
.sees__col li { position: relative; padding-left: 20px; font-size: .93rem; }
.sees__col li::before { content: '✓'; position: absolute; left: 0; color: var(--color-done); }
.sees__col--no { border-color: #475569; border-style: dashed; }
.sees__col--no h3 .ico { color: var(--color-cap); }
.article__body .sees__col--no p { margin: 0; color: var(--color-text-muted); font-size: .93rem; }
.sees__col--no s { text-decoration-thickness: 2px; text-decoration-color: var(--color-cap); }
.rev3 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; width: 100%; align-items: start; text-align: left; }
.stair { width: 100%; height: auto; overflow: visible; font-family: Inter, sans-serif; }
.st-zone--no { fill: rgba(244, 63, 94, .06); }
.st-zone--ok { fill: rgba(34, 197, 94, .06); }
.st-base { stroke: var(--color-border); stroke-width: 2; }
.st-cap { stroke: var(--color-cap); stroke-width: 2.4; stroke-dasharray: 7 5; transform-box: fill-box; transform-origin: left center; }
.st-ref text { fill: #fb7185; font-size: 16px; font-weight: 700; }
.st-ref use { color: #fb7185; }
.st-blk--start { fill: #334155; }
.st-blk--ok { fill: rgba(34, 197, 94, .28); stroke: var(--color-done); stroke-width: 2; }
.st-blk--no { fill: rgba(244, 63, 94, .1); stroke: var(--color-cap); stroke-width: 2.4; }
.st-step { transform-box: fill-box; transform-origin: bottom center; }
.st-t { fill: var(--color-text); font-size: 16px; font-weight: 500; }
.st-t--b { font-weight: 800; }
.st-ax { fill: var(--color-text); font-size: 16px; font-weight: 600; }
.st-ax--d { fill: var(--color-text-muted); font-weight: 500; }
.st-skip { color: #94a3b8; }
.st-skipx circle { fill: var(--color-surface); stroke: #64748b; stroke-width: 2; }
.st-skipx path { stroke: #94a3b8; stroke-width: 2; fill: none; stroke-linecap: round; }
.st-skipt { fill: #94a3b8; font-size: 16px; font-weight: 500; }
.st-pop rect { fill: rgba(244, 63, 94, .16); stroke: var(--color-cap); stroke-width: 1.5; }
.st-pop text { fill: #fecdd3; font-size: 16px; font-weight: 700; }
.st-pop { transform-box: fill-box; transform-origin: center; }
.st-lt { fill: var(--color-text); font-size: 16px; font-weight: 600; }
.st-lt--v { fill: var(--color-text-muted); font-weight: 500; }
.st-lt--cap { fill: #fb7185; font-weight: 600; }
.st-bar { fill: var(--color-border); }
.st-limit { stroke: var(--color-cap); stroke-width: 2.4; }
.st-tick circle { stroke: var(--color-surface); stroke-width: 2; }
.st-tick { transform-box: fill-box; transform-origin: center; }
.st-tick--ok circle { fill: var(--color-done); }
.st-tick--no circle { fill: var(--color-cap); }
.rr { padding: 16px 16px 8px; border-radius: 14px; background: var(--color-bg); border: 1px solid var(--color-border); }
.rr__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.article__body .rr__title { margin: 0; font-weight: 700; font-size: .95rem; }
.rr__title small { display: block; font-weight: 500; font-size: .85rem; color: var(--color-text-muted); }
.rr__chip { display: inline-grid; }
.rc { grid-area: 1 / 1; padding: 3px 12px; border-radius: 999px; font-size: .85rem; font-weight: 800; color: #fecdd3; border: 1.5px solid var(--color-cap); background: rgba(244, 63, 94, .12); text-align: center; }
.rc1, .rc2 { display: none; }
.rr__list { margin: 0; }
.rr__row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--color-border); }
.rr__label { font-size: .9rem; line-height: 1.35; }
.rr__st { display: grid; justify-items: end; text-align: right; max-width: 9.5em; }
.st { grid-area: 1 / 1; font-size: .88rem; font-weight: 700; line-height: 1.3; }
.st1, .st2 { display: none; }
.st--ok { color: #86efac; }
.st--no { color: #fda4af; }

/* cleaner: ring + timeline */
.ringwrap { width: 100%; max-width: 380px; }
.ring2 { width: 100%; height: auto; overflow: visible; font-family: Inter, sans-serif; }
.rg-track { fill: none; stroke: var(--color-border); stroke-width: 3; }
.rg-stop { fill: var(--color-accent); stroke: var(--color-bg); stroke-width: 3; transform-box: fill-box; transform-origin: center; }
.rg-stop--cut { fill: var(--color-cap); }
.rg-t { fill: var(--color-text); font-size: 17px; font-weight: 600; }
.rg-b { font-weight: 800; }
.rg-t--cut { fill: #fb7185; }
.rg-cutl use { color: #fb7185; }
.rg-dot { fill: #fff; stroke: var(--color-accent); stroke-width: 3; }
.rg-orbit { transform-box: view-box; transform-origin: 210px 126px; transform: rotate(180deg); }
.cl-lane { fill: rgba(22, 29, 49, .7); stroke: var(--color-border); stroke-width: 1; }
.cl-axis { stroke: #334155; stroke-width: 2; }
.cl-chip rect { fill: var(--color-bg); stroke: var(--color-border); stroke-width: 1.5; }
.cl-chip__h { fill: var(--color-text); font-size: 13.5px; font-weight: 700; }
.cl-chip__w { fill: #94a3b8; font-size: 13.5px; font-weight: 600; }
.cl-chip--pine .cl-chip__r2 { fill: rgba(34, 197, 94, .1); stroke: var(--color-done); }
.cl-chip--pine .cl-chip__r { display: none; }
.cl-chip--pine .cl-chip__w--c { fill: #4ade80; font-weight: 800; }
.cl-chip--pine .cl-chip__w--a, .cl-chip--pine .cl-chip__w--b { display: none; }
.cl-band { fill: rgba(34, 197, 94, .14); stroke: var(--color-done); stroke-width: 1.5; }
.cl-bandt { fill: #bbf7d0; font-size: 14px; font-weight: 600; }
.cl-tint { fill: rgba(244, 63, 94, .06); }
.cl-cut { stroke: var(--color-cap); stroke-width: 2.4; stroke-dasharray: 7 5; transform-box: fill-box; transform-origin: top center; }
.cl-cutl text { fill: #fb7185; font-size: 14px; font-weight: 700; }
.cl-cutl use { color: #fb7185; }
.cl-ax { stroke: var(--color-border); stroke-width: 1.5; }
.cl-brk { stroke: var(--color-text-muted); stroke-width: 2; fill: none; stroke-linecap: round; }
.cl-tk { fill: var(--color-text-muted); font-size: 14px; font-weight: 500; }
.cl-dot { stroke: var(--color-surface); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
.cl-dot--blue { fill: var(--color-accent); }
.cl-dot--green { fill: var(--color-done); }
.cl-dot--red { fill: var(--color-cap); }
.cl-tick { color: #fff; stroke-width: 3.2 !important; transform-box: fill-box; transform-origin: center; }
.cl-lbl { fill: var(--color-text); font-size: 14px; font-weight: 600; paint-order: stroke; stroke: #161d31; stroke-width: 4px; stroke-linejoin: round; }
.cl-lbl--blue { fill: #7dd3fc; }
.cl-lbl--green { fill: #4ade80; font-weight: 700; }
.cl-lbl--grey { fill: #94a3b8; font-weight: 500; }
.cl-lbl--red { fill: #fb7185; font-weight: 700; }
.cl-skip { transform-box: fill-box; transform-origin: center; }
.cl-skip circle { fill: var(--color-surface); stroke: #64748b; stroke-width: 2; }
.cl-skip path { stroke: #94a3b8; stroke-width: 1.8; fill: none; stroke-linecap: round; }
.cl-bell { color: #fcd34d; transform-box: fill-box; transform-origin: center; }
.cl-ring { fill: none; stroke: var(--color-cap); stroke-width: 2; opacity: .45; transform-box: fill-box; transform-origin: center; transform: scale(1.6); }
.cl-tap { transform-box: fill-box; transform-origin: center; }
.cl-tap rect { fill: rgba(245, 158, 11, .18); stroke: var(--color-human); stroke-width: 1.5; }
.cl-tap use { color: #fcd34d; }
.cl-tap text { fill: #fcd34d; font-size: 14px; font-weight: 700; }

/* business cards: linked + "This page" */
.biz__card { position: relative; transition: border-color .2s, background .2s; }
.biz__card.is-link:hover { border-color: var(--color-accent); background: #1a2340; }
.article__body .biz__card h3 a { color: var(--color-text); border: 0; }
.biz__card h3 a::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }
.article__body .biz__card h3 a:hover { color: var(--color-accent); }
.biz__card h3 a:focus-visible { outline: none; }
.biz__card h3 a:focus-visible::after { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.biz__card.is-link h3::after { content: ' →'; color: var(--color-accent); }
.biz__card.is-current { border-color: rgba(129, 140, 248, .6); }
.biz__tag { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; font-size: .82rem; font-weight: 700; vertical-align: 2px; color: #c7d2fe; border: 1px solid var(--color-primary); background: rgba(99, 102, 241, .16); }

/* examples pages: responsive */
@media (max-width: 860px) {
  .paper--board { grid-template-columns: 1fr; }
  .paper__stub { border-left: 0; border-top: 2px dashed var(--color-border); flex-direction: row; gap: 10px; padding: 12px 18px 38px; justify-content: flex-start; }
  .paper--board .paper__stamp { right: 16px; bottom: 12px; }
  .stack .run__tiles { max-width: 380px; margin: 0 auto; }
}
@media (max-width: 760px) {
  .story--quote .chart__svg--desktop, .story--clean .chart__svg--desktop { display: none; }
  .story--quote .vt-wrap, .story--clean .vt-wrap { display: block; }
  .story--trans .chart__svg--desktop, .story--trans .tl--desktop { display: none; }
  .story--trans .chart__svg--mobile { display: block; max-width: 460px; margin: 0 auto; }
  .story--trans .tl--mobile { display: block; max-width: 440px; margin: 0 auto; }
  .story--trans .article__body .chart__legend { display: block; text-align: center; }
  .rev3 { grid-template-columns: 1fr; }
  .stair { max-width: 460px; margin: 0 auto; }
  .sees { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .phone--wide { width: 100%; }
  .paper { padding: 18px 16px 24px; }
  .paper__stamp { font-size: 1rem; right: 12px; }
  .board { padding: 18px 16px 30px; }
  .board__row { grid-template-columns: 1fr; grid-template-areas: "n" "t" "w"; }
  .daycal { padding: 6px 16px; }
  .biz__tag { margin-left: 0; margin-top: 4px; }
}

/* ===== Animations for pages 2-5 ===== */
@media (prefers-reduced-motion: no-preference) {
  .anim .fx-slide, .anim .fx-env, .anim .fx-rise { opacity: 0; }
  .anim .fx-bar { width: 0; }
  .anim .fx-growy { transform: scaleY(0); }
  .anim .qline--blue { display: block; }
  .anim .qline--green { opacity: 0; }
  .anim .qd { fill: #334155; }
  .anim .dn { opacity: 0; }
  .anim .dn:not(.dn-final) { display: block; }
  .anim .tile--seq { opacity: .35; border-color: var(--color-border); box-shadow: none; }
  .anim .tile--off { opacity: .6; border-color: #475569; }
  .anim .tl-mk__c { fill: #334155; }
  .anim .st1, .anim .st2, .anim .rc1, .anim .rc2 { display: block; }
  .anim .st, .anim .rc { opacity: 0; }
  .anim .cl-chip--pine .cl-chip__r { display: block; fill: var(--color-bg); }
  .anim .cl-chip--pine .cl-chip__w--a, .anim .cl-chip--pine .cl-chip__w--b { display: block; }
  .anim .cl-chip--pine .cl-chip__w--a, .anim .cl-chip--pine .cl-chip__w--b, .anim .cl-chip--pine .cl-chip__w--c, .anim .cl-chip--pine .cl-chip__r2 { opacity: 0; }
  .anim .cl-band { fill: rgba(148, 163, 184, .1); stroke: var(--color-border); }
  .anim .rg-stop { fill: #334155; }
  .anim .rg-orbit { transform: rotate(0deg); }
  .anim .rh-d--ok circle { fill: var(--color-surface); stroke: var(--color-border); }
  .anim .rh-d--ok text { fill: var(--color-text); }
  .anim .ch-key { opacity: 0; }

  .anim.is-playing .fx-slide { animation: fx-slide var(--dur, .6s) ease-out var(--t, 0s) both; }
  .anim.is-playing .fx-env { animation: fx-env .6s ease-out var(--t, 0s) both; }
  .anim.is-playing .fx-rise { animation: fx-rise .45s ease-out var(--t, 0s) both; }
  .anim.is-playing .fx-bar { animation: fx-bar var(--dur, 1s) ease-out var(--t, 0s) both; }
  .anim.is-playing .fx-growy { animation: fx-growy .5s ease-out var(--t, 0s) both; }
  .anim.is-playing .fx-travel { animation: fx-travel var(--dur, 2.5s) ease-in-out var(--t, 0s) both; }
  .anim.is-playing .paper__stamp.fx-stamp { animation: fx-stamp-rot .3s ease-in var(--t, 0s) both, fx-shake .25s ease calc(var(--t, 0s) + .3s); }
  .anim.is-playing .q-stamp.fx-stamp { animation: fx-stamp-rot .3s ease-in var(--t, 0s) both; }
  .anim.is-playing .qline--green { animation: fx-fade .3s ease var(--t, 4s) both; }
  .anim.is-playing .qd.fx-pop { animation: fx-qd .3s ease var(--t, 0s) forwards; }
  .anim.is-playing .tile--seq { animation: var(--a); }
  .anim.is-playing .dn, .anim.is-playing .st, .anim.is-playing .rc { animation: var(--a); }
  .anim.is-playing .cl-chip--pine .cl-chip__w--a, .anim.is-playing .cl-chip--pine .cl-chip__w--b, .anim.is-playing .cl-chip--pine .cl-chip__w--c { animation: var(--a); }
  .anim.is-playing .cl-chip--pine .cl-chip__r2 { animation: fx-fade .3s ease 5.1s both; }
  .anim.is-playing .cl-chip--pine .cl-chip__r { animation: fx-gone .01s linear 5.1s forwards; }
  .anim.is-playing .cl-band { animation: fx-band .5s ease var(--t, 3.5s) forwards; }
  .anim.is-playing .rg-orbit { animation: fx-orbit 10s linear both; }
  .anim.is-playing .rg-stop { animation: fx-dot 4s ease-out var(--d) 2, fx-dot-on .3s ease 10s forwards; }
  .anim.is-playing .rg-stop--cut { animation: fx-dotc 4s ease-out var(--d) 2, fx-dotc-on .3s ease 10s forwards, fx-pulse .8s ease 10.2s; }
  .anim.is-playing .tl-dot { animation: fx-tl 5s linear both; }
  .anim.is-playing .tl-mk--1 .tl-mk__c, .anim.is-playing .tl-mk--2 .tl-mk__c { animation: fx-mkon .3s ease var(--m) forwards, fx-pulse .9s ease var(--m); }
  .anim.is-playing .rh-d--ok circle { animation: fx-dotok .4s ease var(--t) forwards; }
  .anim.is-playing .rh-d--ok text { animation: fx-dotok-t .4s ease var(--t) forwards; }
  .anim.is-playing .rh-d--no circle { animation: fx-pulse .6s ease var(--t); }
}
@keyframes fx-flash { 0% { opacity: .35; border-color: var(--color-border); box-shadow: none; } 30%, 65% { opacity: 1; border-color: var(--color-primary); box-shadow: 0 0 14px rgba(99, 102, 241, .35); } 100% { opacity: .35; border-color: var(--color-border); box-shadow: none; } }
@keyframes fx-gone { to { opacity: 0; visibility: hidden; } }
@keyframes fx-slide { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes fx-env { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes fx-rise { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }
@keyframes fx-bar { from { width: 0; } to { width: var(--p); } }
@keyframes fx-growy { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fx-travel { from { opacity: 1; transform: translateX(-240px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fx-qd { 0% { fill: #334155; transform: scale(0); } 60% { fill: var(--color-accent); transform: scale(1.7); } 100% { fill: var(--color-accent); transform: scale(1); } }
@keyframes fx-orbit { from { transform: rotate(0deg); } to { transform: rotate(900deg); } }
@keyframes fx-dotc { 0% { fill: var(--color-cap); transform: scale(1.6); } 10% { fill: var(--color-cap); transform: scale(1); } 25%, 100% { fill: #334155; transform: scale(1); } }
@keyframes fx-dotc-on { to { fill: var(--color-cap); } }
@keyframes fx-pulse { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.35); } }
@keyframes fx-tl { 0% { opacity: 1; transform: translateX(0); } 24% { opacity: 1; transform: translateX(var(--d1)); } 44% { opacity: 1; transform: translateX(var(--d1)); } 64%, 100% { opacity: 1; transform: translateX(var(--d2)); } }
@keyframes fx-mkon { to { fill: var(--color-primary); } }
@keyframes fx-band { to { fill: rgba(34, 197, 94, .14); stroke: var(--color-done); } }
@keyframes fx-dotok { to { fill: var(--color-done); stroke: var(--color-done); } }
@keyframes fx-dotok-t { to { fill: #052e16; } }