/* OopsAI v5. Lime is the reviewer's highlighter, orange is the stamp. */
@font-face{font-family:"Schibsted Grotesk";src:url(../assets/fonts/schibsted-grotesk.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Martian Mono";src:url(../assets/fonts/martian-mono.woff2) format("woff2");font-weight:100 800;font-stretch:75% 112.5%;font-display:swap}

:root{
  --paper:#fafbf7;--sheet:#fff;--ink:#1a1d22;--muted:#5b6259;--line:#dde2d6;
  --lime:#dfff94;--lime-edge:#b9d97a;--orange:#fa603a;--stamp:#c63e1c;--stamp-bg:#fff0ea;
  --sans:"Schibsted Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Martian Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,figure,ol,dl,dd{margin:0}
ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
code{font-family:var(--mono);font-stretch:87.5%}
:focus-visible{outline:3px solid var(--orange);outline-offset:4px;border-radius:4px}
h1,h2{text-wrap:balance}
h1{font-size:clamp(46px,5.6vw,86px);line-height:.96;letter-spacing:-.04em;font-weight:820}
h2{font-size:clamp(30px,3.3vw,46px);line-height:1.05;letter-spacing:-.03em;font-weight:780}
h3{font-size:21px;line-height:1.25;letter-spacing:-.015em;font-weight:720}
.wrap{width:min(1200px,calc(100% - 80px));margin-inline:auto}
.skip{position:fixed;z-index:20;left:16px;top:-80px;padding:12px 18px;background:var(--ink);color:#fff;border-radius:8px}
.skip:focus{top:12px}

/* Background field sits under everything and never takes input */
.field{position:fixed;inset:0 0 auto 0;width:100%;height:100vh;z-index:0;pointer-events:none}
body>header,body>main,body>footer{position:relative;z-index:1}
body>header{z-index:2}

/* Buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border:0;border-radius:100px;background:var(--orange);color:var(--ink);font-size:16px;font-weight:700;cursor:pointer;transition:background .15s,transform .15s}
.btn:hover{background:#ff7350}
.btn:active{transform:translateY(1px)}
.btn-small{min-height:42px;padding:0 18px;font-size:15px}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#30353b}
.link{font-weight:650;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/100% 1.5px;padding-bottom:2px;transition:background-size .2s}
.link:hover{background-size:0 1.5px}

/* Header */
.site-header{border-bottom:1px solid var(--line)}
.header-row{height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:baseline;gap:8px;font-size:26px;font-weight:820;letter-spacing:-.04em}
.brand-glyph{color:var(--orange);font-family:var(--mono);font-weight:700;font-size:20px;font-stretch:75%;letter-spacing:-.14em;margin-right:4px;transition:transform .2s}
.brand:hover .brand-glyph{transform:rotate(-8deg)}
.nav{display:flex;align-items:center;gap:30px;font-size:15px;font-weight:600}
.nav>a:not(.btn):hover,.nav [aria-current=page]{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px}
.menu-button{display:none;padding:9px 16px;border:1px solid var(--line);border-radius:100px;background:transparent;font-size:15px;font-weight:600}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,5vw,72px);align-items:center;padding-block:clamp(48px,7vw,96px)}
.lede{font-size:19px;line-height:1.5;color:var(--muted);max-width:30em;margin-top:28px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:34px}

/* Run log: the one moving thing on the page */
.runlog{background:var(--sheet);border:1px solid var(--line);border-radius:20px;box-shadow:0 1px 0 var(--line),0 24px 48px -28px #2a331f40;overflow:hidden}
.runlog-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 24px 16px;border-bottom:1px solid var(--line)}
.runlog-task{font-weight:750;font-size:17px;letter-spacing:-.01em}
.runlog-scope{font:400 12.5px/1.5 var(--mono);font-stretch:87.5%;color:var(--muted);margin-top:4px}
.runlog-scope{text-wrap:balance}
.runlog-scope span:first-child{color:var(--ink);font-weight:600;margin-right:6px}
.runlog-scope .sep{opacity:.5;margin:0 2px}
.replay{flex-shrink:0;border:1px solid var(--line);background:var(--paper);border-radius:100px;padding:6px 14px;font-size:14px;font-weight:600;cursor:pointer}
.replay:hover{border-color:var(--ink)}
.runlog-rows{padding:8px 0}
.row{display:grid;grid-template-columns:96px minmax(0,1fr) auto;column-gap:14px;align-items:baseline;padding:9px 24px;font-size:13.5px}
.row+.act{border-top:1px solid #eef1ea}
.note{grid-template-columns:96px minmax(0,1fr);padding-block:10px 6px}
.who{font:500 12px/1 var(--mono);font-stretch:87.5%;color:#6b7268}
.say{color:var(--muted);font-size:15px;line-height:1.4}
.tool{color:var(--muted);font-size:13px}
.target{font-size:13px;color:var(--ink);overflow-wrap:anywhere}
.diff{color:#3e7a2c;margin-left:6px}
.verdict{text-align:right;justify-self:end;font-size:14px}
.verdict b{display:inline-block;font-weight:750;white-space:nowrap}
.verdict small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.35;max-width:17em;margin-left:auto}
.ok .verdict b,.done .verdict b.v-final{padding:1px 6px;background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 0/100% 100%;border-radius:2px}
.oops .target{text-decoration:line-through;text-decoration-color:var(--stamp);text-decoration-thickness:1.5px}
.oops .verdict b{color:var(--stamp);border:1.5px solid currentColor;border-radius:5px;padding:1px 7px;background:var(--stamp-bg);transform:rotate(-3deg);font-size:13.5px;letter-spacing:.01em}
.oops .verdict small{color:var(--stamp)}
.done .tool,.done .target{font-weight:600;color:var(--ink)}
.v-wait{display:none!important;color:var(--muted);font-weight:600}
.runlog-foot{padding:14px 24px;border-top:1px solid var(--line);background:#f4f6ef;font-size:14px;color:var(--muted)}
.runlog-foot strong{color:var(--ink);font-weight:700}

/* Playback states (only when JS runs and motion is allowed) */
/* Rows that haven't arrived yet show as pale placeholders the size of their text */
.runlog.playing .row:not(.in) *{color:transparent!important;text-decoration-color:transparent!important;border-color:transparent!important;background:none!important}
.runlog.playing .row:not(.in)>.who,.runlog.playing .row:not(.in)>.say,.runlog.playing .row:not(.in)>.tool,.runlog.playing .row:not(.in)>.target{background:#eff2ea!important;border-radius:4px;justify-self:start}
.runlog.playing .row>*{transition:color .3s ease,background-color .3s ease}
.runlog.playing .act .verdict{visibility:hidden}
.runlog.playing .act.judged .verdict{visibility:visible}
.runlog.playing .ok.judged .verdict b{animation:highlight .32s ease-out both}
.runlog.playing .oops .target{text-decoration-color:transparent;transition:text-decoration-color .2s}
.runlog.playing .oops.judged .target{text-decoration-color:var(--stamp)}
.runlog.playing .oops.judged .verdict b{animation:stamp .26s cubic-bezier(.3,1.6,.5,1) both}
.runlog.playing .judged .verdict small{animation:fade .3s .15s ease both}
.runlog.playing .done.judged:not(.final) .v-wait{display:inline-block!important}
.runlog.playing .done:not(.final) .v-final{display:none}
.runlog.playing .done.final .verdict b.v-final{animation:highlight .32s ease-out both}
.runlog.playing .runlog-foot{opacity:0}
.runlog.playing.ended .runlog-foot{opacity:1;transition:opacity .4s}
.runlog .act.judged.oops{animation:flash .6s ease-out}
@keyframes highlight{from{background-size:0 100%}to{background-size:100% 100%}}
@keyframes stamp{from{opacity:0;transform:rotate(-12deg) scale(1.9)}to{opacity:1;transform:rotate(-3deg) scale(1)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes flash{from{background:var(--stamp-bg)}to{background:transparent}}

/* How it works */
.steps{padding-block:clamp(56px,7vw,100px);border-top:1px solid var(--line)}
.steps h2{max-width:16em}
.step-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:48px}
.step-list>li{border-top:2px solid var(--ink);padding-top:22px}
.step-n{display:inline-block;font:700 14px/1 var(--mono);padding:5px 8px;background:var(--lime);border-radius:2px;margin-bottom:18px}
.step-list p{color:var(--muted);margin-top:10px;max-width:28em}
.boundary{margin-top:22px;border:1px solid var(--line);border-radius:12px;background:var(--sheet);font-size:13px}
.boundary div{display:grid;grid-template-columns:76px 1fr;gap:10px;padding:10px 14px}
.boundary div+div{border-top:1px solid #eef1ea}
.boundary dt{font-weight:700}
.boundary dd{font-family:var(--mono);font-stretch:87.5%;font-size:12.5px;line-height:1.55}
.boundary .no dt,.boundary .no dd{color:var(--stamp)}

/* Statement */
.statement{background:var(--ink);color:var(--paper)}
.statement-inner{padding-block:clamp(64px,8vw,120px);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:56px;align-items:end}
.statement h2{font-size:clamp(36px,4.6vw,68px);line-height:1;letter-spacing:-.035em}
.statement p{color:#b9bfb4;font-size:18px;max-width:30em}

/* Product areas */
.pair{padding-block:clamp(48px,6vw,88px)}
.pair-item{display:block;padding:8px 48px 8px 0}
.pair-item+.pair-item{padding:8px 0 8px 48px;border-left:1px solid var(--line)}
.pair-item p{color:var(--muted);margin:14px 0 22px;max-width:30em}
.pair-item:hover .link{background-size:0 1.5px}
.pair-item:hover h2{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--lime-edge);text-underline-offset:8px}

/* Contact */
.contact{background:var(--lime);border-top:1px solid var(--lime-edge)}
.contact-inner{display:grid;grid-template-columns:1fr minmax(0,440px);gap:64px;align-items:start;padding-block:clamp(56px,7vw,96px)}
.contact h2{font-size:clamp(44px,5.6vw,80px);line-height:.96;letter-spacing:-.04em}
.contact-intro{margin-top:24px;max-width:28em;color:#3d4732}
.contact-form label{display:block;font-size:15px;font-weight:650;margin-bottom:8px}
.contact-form label span{font-weight:400;color:#56633f;margin-left:4px}
.contact-form input,.contact-form textarea{display:block;width:100%;border:1px solid #a9c174;background:#fdfff6;color:var(--ink);font:inherit;font-size:16px;padding:13px 15px;border-radius:12px;margin-bottom:20px}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px #1a1d221a}
.contact-form textarea{resize:vertical;min-height:104px}
.contact-form .btn{width:100%}
.contact-form .btn:disabled{opacity:.6;cursor:progress}
.contact-alt{font-size:14px;color:#46523a;margin-top:14px}
.contact-alt a{color:var(--ink);font-weight:650;text-decoration:underline;text-underline-offset:3px}
.copy{margin-left:10px;padding:3px 11px;border:1px solid #a9c174;border-radius:100px;background:#fdfff6;font-size:13px;font-weight:600;cursor:pointer;vertical-align:1px}
.copy:hover{border-color:var(--ink)}
.contact-status{font-size:15px;margin-top:12px;min-height:1.5em}
.contact-status[data-state=error]{color:#962c15}
.contact-status[data-state=success]{color:var(--ink);font-weight:650}
.form-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Footer */
.site-footer{border-top:1px solid var(--line)}
.footer-row{display:flex;align-items:center;gap:40px;padding-block:32px}
.footer-links{display:flex;gap:26px;font-size:15px}
.footer-links a:hover{text-decoration:underline;text-underline-offset:5px}
.footer-note{margin-left:auto;font-size:14px;color:var(--muted)}

/* Inner pages */
.page{padding-block:clamp(48px,6vw,88px)}
.page h1{font-size:clamp(42px,5vw,76px);max-width:13em}
.page-intro{font-size:20px;line-height:1.5;color:var(--muted);max-width:34em;margin-top:24px}
.block{border-top:1px solid var(--line);margin-top:clamp(48px,6vw,80px);padding-top:clamp(32px,4vw,48px)}
.block>h2{max-width:20em;margin-bottom:20px}
.block>p{max-width:40em;color:var(--muted);margin-bottom:16px}
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font-size:19px;font-weight:680}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--orange);font-weight:500;font-size:24px;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);padding-bottom:22px;max-width:40em}
.page-actions{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-top:clamp(48px,6vw,72px)}
.error-page{min-height:58vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:28px;padding-block:72px}
.error-code{font:700 15px/1 var(--mono);color:var(--stamp);border:1.5px solid currentColor;border-radius:5px;padding:5px 9px;background:var(--stamp-bg);transform:rotate(-3deg)}


/* Harness page: chapters and drawn scenes */
.chapter-n{display:inline-block;font:700 14px/1 var(--mono);padding:5px 8px;background:var(--lime);border-radius:2px;margin-bottom:16px}
.chapter>p:not(.chapter-n){max-width:40em;color:var(--muted)}
.svscene{margin-top:clamp(28px,4vw,44px);background:var(--sheet);border:1px solid var(--line);border-radius:20px;box-shadow:0 1px 0 var(--line),0 24px 48px -28px #2a331f40;overflow:hidden}
.sv-caption{padding:16px 24px 0;font-size:17px;font-weight:650;min-height:calc(2.7em + 16px)}
.sv{display:none;width:100%;height:auto;padding:4px 12px 16px;font-family:var(--sans);overflow:visible}
.svscene.js .sv{display:block}
.svscene.js .sv-fallback{display:none}
.sv-fallback{padding:12px 24px 24px;color:var(--muted)}
.sv text{text-anchor:middle;fill:var(--ink)}
.sv .sv-label{font-size:17px;font-weight:700}
.sv .sv-small{font-size:15px}
.sv .sv-sub{font-size:13px;font-weight:500;fill:var(--muted)}
.sv .sv-mini{font-size:12.5px;font-weight:600;fill:var(--muted)}
.sv .sv-left{text-anchor:start}
.sv .sv-code{font-family:var(--mono);font-size:12px;fill:var(--ink)}
.sv .sv-glyph{font-family:var(--mono);font-size:20px;font-weight:700;fill:var(--orange)}
.sv .sv-tracklabel{font-size:13px;font-weight:600;fill:#8a9186}
.sv-node rect{fill:var(--paper);stroke:var(--line);stroke-width:1.5;transition:fill .3s,stroke .3s}
.sv-agent rect{fill:var(--ink);stroke:var(--ink)}
.sv-agent text{fill:#fff!important}
.sv-tool.ok rect,.sv-chip.ok rect{fill:var(--lime);stroke:var(--lime-edge)}
.sv-tool.bad rect{fill:var(--stamp-bg);stroke:var(--stamp)}
.sv-tool.bad text{fill:var(--stamp)}
.sv-icon{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sv-tool.bad .sv-icon{stroke:var(--stamp)}
.sv-track{fill:none;stroke:#cfd6c7;stroke-width:1.6;stroke-dasharray:5 6;transition:stroke .3s,stroke-width .3s}
.sv-track.lit{stroke-dasharray:none;stroke-width:2.2}
.sv-track.lit-ok{stroke:#9fbf5c}
.sv-track.lit-oops{stroke:var(--stamp)}
.sv-track.lit-hold{stroke:var(--ink)}
.sv-harness rect{fill:#fff;stroke:var(--ink);stroke-width:1.6}
.sv-gate polygon{fill:#fff;stroke:var(--ink);stroke-width:1.6;transition:fill .2s}
.sv-gate.pulse polygon{fill:#f3fcd9}
.sv-runner rect:first-child{fill:#fff;stroke:var(--ink)}
.sv-chip rect{fill:var(--paper);stroke:var(--line);stroke-width:1.2;transition:fill .3s,stroke .3s}
.sv-chip text{font-size:12.5px;font-weight:650}
.sv-person rect,.sv-checks rect{fill:#fff}
.sv-person .sv-icon{stroke:var(--ink)}
.sv-light{fill:#e3e8dc;stroke:#cfd6c7;transition:fill .3s,stroke .3s}
.sv-light.ok{fill:#b8e05a;stroke:#8fb43f}
.sv-token{opacity:0;transition:opacity .2s}
.sv-token.on{opacity:1}
.sv-token rect{fill:var(--ink);transition:fill .2s,stroke .2s}
.sv-token text{font-family:var(--mono);font-size:13px;font-weight:500;fill:#fff;transition:fill .2s}
.sv-token.ok rect{fill:var(--lime);stroke:var(--lime-edge)}
.sv-token.ok text{fill:var(--ink)}
.sv-token.oops rect{fill:var(--stamp-bg);stroke:var(--stamp);stroke-width:1.5}
.sv-token.oops text{fill:var(--stamp)}
.sv-token.hold rect{fill:#fff;stroke:var(--ink);stroke-width:1.5}
.sv-token.hold text{fill:var(--ink)}
.sv-badge{opacity:0;transition:opacity .2s}
.sv-badge.on{opacity:1}
.sv-badge text{font-size:14px;font-weight:750}
.sv-badge.ok rect{fill:var(--lime)}
.sv-badge.oops rect,.sv-badge.stop rect{fill:var(--stamp-bg);stroke:var(--stamp);stroke-width:1.5}
.sv-badge.oops text,.sv-badge.stop text{fill:var(--stamp);font-family:var(--mono);font-size:13px}
.sv-badge.hold rect{fill:#fff;stroke:var(--ink);stroke-width:1.5}
.sv-badge.wait rect{fill:#fff;stroke:#cfd6c7;stroke-width:1.2}
.sv-badge.wait text{fill:var(--muted);font-weight:600}
.sv-tracefoot{border-top:1px solid var(--line);background:#f4f6ef;padding:14px 24px 16px}
.sv-tracename{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:6px}
.sv-trace{min-height:118px}
.sv-trace li{display:flex;justify-content:space-between;gap:16px;padding:5px 0;font-size:13.5px;animation:fade .3s ease both}
.sv-trace li+li{border-top:1px solid #e6eadf}
.sv-trace code{font-size:12.5px;overflow-wrap:anywhere}
.sv-trace b{font-weight:700;white-space:nowrap}
.sv-trace .oops b{color:var(--stamp)}
.sv-trace .ok b{background:var(--lime);padding:0 5px;border-radius:2px}
.sv-trace:empty::before{content:"Decisions appear here as requests come in.";font-size:13.5px;color:#6b7268}

/* Harness page: four outcomes */
.outcomes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(28px,4vw,40px);list-style:none;padding:0}
.oc{background:var(--sheet);border:1px solid var(--line);border-radius:18px;padding:12px 18px 20px}
.oc h3{margin-top:4px}
.oc p{color:var(--muted);font-size:15px;margin-top:6px}
.oc-svg{display:block;width:100%;height:auto;font-family:var(--sans);overflow:visible}
.oc-svg text{text-anchor:middle;font-size:13px;font-weight:700;fill:var(--ink)}
.oc-wire{stroke:#cfd6c7;stroke-width:1.6;stroke-dasharray:4 5}
.oc-box rect{fill:var(--paper);stroke:var(--line);stroke-width:1.5}
.oc-agent rect{fill:var(--ink);stroke:var(--ink)}
.oc-agent text{fill:#fff}
.oc-gate polygon{fill:#fff;stroke:var(--ink);stroke-width:1.6}
.oc-svg .oc-glyph{font-family:var(--mono);font-size:14px;fill:var(--orange)}
.oc-dot{fill:var(--ink);opacity:0}
.oc-stop .oc-dot{fill:var(--stamp)}
.oc-stamp rect{fill:var(--stamp-bg);stroke:var(--stamp);stroke-width:1.5}
.oc-svg .oc-stamp text{fill:var(--stamp);font-family:var(--mono)}
.oc-stamp{transform-box:fill-box;transform-origin:center;transform:rotate(-4deg)}
.oc-person{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round}
.oc-svg .oc-wait,.oc-svg .oc-yes,.oc-svg .oc-mini{font-size:11.5px;font-weight:650;text-anchor:start}
.oc-svg .oc-wait{fill:var(--muted);opacity:0}
.oc-svg .oc-yes{fill:#4f7a1e}
.oc-svg .oc-mini{fill:var(--muted)}
.oc-svg .oc-end{text-anchor:end}
.oc-lights circle{fill:#b8e05a;stroke:#8fb43f}
/* Static state (and reduced motion) shows each outcome's result; the loops play it out. */
.oc-ok .oc-dest rect,.oc-hold .oc-dest rect,.oc-check .oc-dest rect{fill:var(--lime);stroke:var(--lime-edge)}
.oc-stop .oc-dest{opacity:.45}
.oc .oc-dot{animation:4.8s ease-in-out infinite}
.oc-ok .oc-dot{animation-name:oc-go}
.oc-stop .oc-dot{animation-name:oc-bounce}
.oc-hold .oc-dot{animation-name:oc-wait}
.oc-check .oc-dot{animation-name:oc-wait}
.oc-ok .oc-dest rect,.oc-hold .oc-dest rect,.oc-check .oc-dest rect{animation:4.8s infinite}
.oc-ok .oc-dest rect{animation-name:oc-lit-late}
.oc-hold .oc-dest rect,.oc-check .oc-dest rect{animation-name:oc-lit-last}
.oc-stamp{animation:oc-stamp 4.8s infinite}
.oc-svg .oc-wait{animation:oc-show-mid 4.8s infinite}
.oc-svg .oc-yes{animation:oc-show-late 4.8s infinite}
.oc-lights .l1{animation:oc-l1 4.8s infinite}
.oc-lights .l2{animation:oc-l2 4.8s infinite}
@keyframes oc-go{0%{opacity:0;transform:none}6%{opacity:1}30%,40%{transform:translateX(48px)}68%{transform:translateX(156px);opacity:1}74%,100%{transform:translateX(156px);opacity:0}}
@keyframes oc-bounce{0%{opacity:0;transform:none}6%{opacity:1}30%,55%{transform:translateX(48px)}82%{transform:none;opacity:1}90%,100%{transform:none;opacity:0}}
@keyframes oc-wait{0%{opacity:0;transform:none}6%{opacity:1}28%,62%{transform:translateX(48px)}84%{transform:translateX(156px);opacity:1}90%,100%{transform:translateX(156px);opacity:0}}
@keyframes oc-lit-late{0%,66%{fill:var(--paper);stroke:var(--line)}70%,96%{fill:var(--lime);stroke:var(--lime-edge)}100%{fill:var(--paper);stroke:var(--line)}}
@keyframes oc-lit-last{0%,82%{fill:var(--paper);stroke:var(--line)}86%,97%{fill:var(--lime);stroke:var(--lime-edge)}100%{fill:var(--paper);stroke:var(--line)}}
@keyframes oc-stamp{0%,29%{opacity:0;transform:rotate(-12deg) scale(1.6)}33%{opacity:1;transform:rotate(-4deg) scale(1)}92%{opacity:1;transform:rotate(-4deg)}100%{opacity:0;transform:rotate(-4deg)}}
@keyframes oc-show-mid{0%,29%{opacity:0}32%,48%{opacity:1}52%,100%{opacity:0}}
@keyframes oc-show-late{0%,49%{opacity:0}53%,94%{opacity:1}100%{opacity:0}}
@keyframes oc-l1{0%,36%{fill:#e3e8dc;stroke:#cfd6c7}40%,95%{fill:#b8e05a;stroke:#8fb43f}100%{fill:#e3e8dc;stroke:#cfd6c7}}
@keyframes oc-l2{0%,48%{fill:#e3e8dc;stroke:#cfd6c7}52%,95%{fill:#b8e05a;stroke:#8fb43f}100%{fill:#e3e8dc;stroke:#cfd6c7}}

/* Responsive */
@media (max-width:1040px){
  .outcomes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wrap{width:calc(100% - 56px)}
  .hero{grid-template-columns:1fr;gap:44px}
  .hero-copy{max-width:640px}
  .statement-inner{grid-template-columns:1fr;gap:24px}
}
@media (max-width:760px){
  body{font-size:16px}
  .wrap{width:calc(100% - 36px)}
  .header-row{height:66px;position:relative}
  .brand{font-size:24px}
  .menu-button{display:block}
  .nav{display:none;position:absolute;z-index:10;left:-18px;right:-18px;top:65px;flex-direction:column;align-items:stretch;gap:4px;padding:12px 18px 20px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 16px 24px -16px #1a1d2230}
  .nav.open{display:flex}
  .nav>a:not(.btn){padding:12px 0}
  .nav .btn{margin-top:8px}
  .hero{padding-block:40px 56px}
  .lede{font-size:17px;margin-top:20px}
  .hero-actions{margin-top:28px}
  .runlog{border-radius:16px;margin-inline:-6px}
  .runlog-head{padding:16px 16px 12px}
  .row,.note{grid-template-columns:76px minmax(0,1fr);column-gap:10px;row-gap:6px;padding:10px 16px}
  .note{padding-block:10px 4px}
  .tool,.who{font-size:12px}
  .verdict{grid-column:2;justify-self:start;text-align:left}
  .verdict small{margin-left:0}
  .say{font-size:14.5px}
  .runlog-foot{padding:12px 16px}
  .step-list{grid-template-columns:1fr;gap:36px;margin-top:36px}
  .pair{grid-template-columns:1fr;gap:36px}
  .pair-item,.pair-item+.pair-item{padding:0;border:0}
  .pair-item+.pair-item{border-top:1px solid var(--line);padding-top:36px}
  .contact-inner{grid-template-columns:1fr;gap:36px}
  .footer-row{flex-wrap:wrap;gap:20px 28px}
  .footer-note{margin-left:0;width:100%}
  .svscene{border-radius:16px;margin-inline:-6px}
  .outcomes{grid-template-columns:1fr;gap:12px}
  .sv-caption{padding:12px 16px 0;font-size:15.5px;min-height:calc(4em + 12px)}
  .sv{padding:4px 4px 12px}
  .sv .sv-label{font-size:19px}
  .sv .sv-small{font-size:16px}
  .sv .sv-code{font-size:13px}
  .sv-token text{font-size:14px}
  .sv-tracefoot{padding:12px 16px 14px}
  .sv-trace li{flex-direction:column;gap:2px}
  .sv-trace b{align-self:flex-start}
  .page-intro{font-size:18px}
  .faq summary{font-size:17px}
}
@media (max-width:760px){.field{opacity:.75}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
