/* How it works — page-only styles. Prefix hw-. Every loop pauses off screen; reduced motion shows finished states. */

/* ───── Hero journey map ───── */
.hw-map{margin-top:clamp(48px,6vw,72px);padding:22px 26px 18px;text-align:left}
.hw-map-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hw-map-track{position:relative;margin-top:26px}
.hw-map-line{position:absolute;left:calc(100% / 14);right:calc(100% / 14);top:27px;height:2px;border-radius:2px;background:#ffffff14;overflow:hidden}
.hw-map-line i{display:block;height:100%;background:linear-gradient(90deg,#9fd24f,var(--lime));box-shadow:0 0 12px #d7fb8b88;transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform .7s var(--ease-out)}
.hw-map-rail{position:relative;display:grid;grid-template-columns:repeat(7,1fr)}
.hw-map-rail a{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 2px 4px;border-radius:14px;text-align:center}
.hw-node{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#131413;border:1px solid var(--line-2);
  transition:background var(--t) var(--ease),border-color var(--t),box-shadow var(--t) var(--ease),transform var(--t) var(--ease-out)}
.hw-node svg{width:19px;height:19px;fill:none;stroke:var(--soft);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--t)}
.hw-node img{filter:invert(1);opacity:.85;transition:filter var(--t)}
.hw-map-rail b{font:600 10.5px/1.2 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color var(--t)}
.hw-map-rail a:hover .hw-node{border-color:#d7fb8b66;transform:translateY(-2px)}
.hw-map-rail a.is-done .hw-node{border-color:#d7fb8b55;background:#d7fb8b0f}
.hw-map-rail a.is-done svg{stroke:var(--lime)}
.hw-map-rail a.is-on .hw-node{background:var(--lime);border-color:var(--lime);box-shadow:0 0 0 6px #d7fb8b1f,0 0 26px #d7fb8b55;transform:scale(1.08)}
.hw-map-rail a.is-on svg{stroke:var(--lime-ink)}
.hw-map-rail a.is-on img{filter:none;opacity:1}
.hw-map-rail a.is-on b,.hw-map-rail a.is-done b{color:var(--text)}
.hw-map-status{display:flex;align-items:baseline;gap:16px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);min-height:62px}
.hw-map-step{flex:none;font:600 11px ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.12em;color:var(--lime);text-transform:uppercase}
.hw-map-status p{font-size:15.5px;line-height:1.55}
.hw-map-status p b{color:var(--text);font-weight:600}
.hw-map-status p.is-swap{animation:hw-swap .4s var(--ease-out)}
@keyframes hw-swap{from{opacity:0;transform:translateY(5px)}}

/* ───── Timeline ───── */
.hw-timeline{position:relative;max-width:1100px;margin-inline:auto}
.hw-rail{position:absolute;left:15px;top:0;width:2px;height:calc(100% - 40px);border-radius:2px;background:#ffffff12}
.hw-rail i{display:block;height:100%;border-radius:inherit;background:linear-gradient(180deg,#9fd24f,var(--lime));box-shadow:0 0 14px #d7fb8b88;transform-origin:50% 0;transform:scaleY(0)}
.hw-phase{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding-left:56px;margin-bottom:32px}
.hw-phase::before{content:"";position:absolute;left:10px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:3px;transform:rotate(45deg);background:var(--bg-2);border:2px solid #ffffff38}
.hw-phase-note{font-size:14px;color:var(--muted)}
.hw-steps{display:grid;gap:clamp(44px,6vw,76px);margin-bottom:clamp(64px,8vw,96px)}
.hw-steps:last-of-type{margin-bottom:56px}
.section-head .eyebrow{margin-top:0;font-size:11.5px;line-height:1.4}
.hw-step{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center;padding-left:56px;scroll-margin-top:120px}
.hw-dot{position:absolute;left:7px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--bg-2);border:2px solid #ffffff30;
  transition:background var(--t) var(--ease),border-color var(--t),box-shadow var(--t) var(--ease),transform var(--t) var(--ease-out)}
.hw-step.is-reached .hw-dot{background:var(--lime);border-color:var(--lime);box-shadow:0 0 0 6px #d7fb8b1f,0 0 18px #d7fb8b77;transform:scale(1.05)}
.hw-copy .step-n{margin-top:0}
.hw-copy h3{margin-top:8px;font-size:clamp(23px,2.5vw,30px);letter-spacing:-.035em;line-height:1.12}
.hw-copy p{margin-top:12px;font-size:16px;line-height:1.65;color:var(--muted);max-width:44ch}
.hw-copy strong{color:var(--text);font-weight:600}
.hw-copy .link{display:inline-block;margin-top:14px;font-size:15px}
.hw-fig-note{margin-top:0;text-align:center;font-size:12.5px;color:#6c7269}

/* Demo frame: same family as the homepage step demos */
.hw-demo{position:relative;height:244px;border-radius:18px;border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:22px 24px;
  background:radial-gradient(80% 90% at 50% 100%,#d7fb8b12,transparent 70%),#0c0d0c;box-shadow:0 30px 70px -45px #000}
.hw-demo:not(.is-playing) *,.hw-demo:not(.is-playing) *::before,.hw-demo:not(.is-playing) *::after{animation-play-state:paused!important}

/* 01 connect: permissions arrive one by one, then Install is pressed */
.d1-card{width:min(330px,100%);margin-inline:auto;border:1px solid var(--line-2);border-radius:14px;background:#ffffff06;padding:14px 16px}
.d1-head{display:flex;align-items:center;gap:9px;font-size:14px}.d1-head img{filter:invert(1);opacity:.8}.d1-head b{font-weight:600}
.d1-perms{margin-top:10px}
.d1-perms li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line);font:12.5px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--soft);animation:d1row 7s var(--ease-out) var(--d) infinite both}
.d1-perms em{font:600 11px Jakarta,system-ui,sans-serif;font-style:normal;color:var(--lime);background:#d7fb8b14;border-radius:999px;padding:4px 9px}
.d1-perms .is-none em{color:var(--soft);background:#ffffff0d}
@keyframes d1row{0%{opacity:0;transform:translateY(6px)}7%,86%{opacity:1;transform:none}95%,100%{opacity:0}}
.d1-btn{display:inline-flex;margin-top:12px;padding:8px 16px;border-radius:999px;background:var(--lime);color:var(--lime-ink);font-size:13px;font-weight:600;animation:d1press 7s var(--ease) infinite}
@keyframes d1press{0%,30%{transform:none;box-shadow:0 0 0 0 #d7fb8b00}33%{transform:scale(.92)}37%,86%{transform:none;box-shadow:0 0 0 5px #d7fb8b2e}95%,100%{box-shadow:0 0 0 0 #d7fb8b00}}

/* 02 repositories: a tap selects one repository; the read-only chip follows */
.hw-d-repos{justify-content:flex-start;padding-top:30px}
.d2-list{display:grid;width:min(330px,100%);border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#ffffff04}
.d2-list li{display:flex;align-items:center;gap:12px;padding:12px 14px;font:13px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--soft)}
.d2-list li+li{border-top:1px solid var(--line)}
.d2-box{flex:none;width:16px;height:16px;border-radius:5px;border:1.5px solid #ffffff40}
.d2-list .is-pick .d2-box{background:var(--lime);border-color:var(--lime);box-shadow:inset 0 0 0 3px #0c0d0c;animation:d2box 7s var(--ease) infinite}
@keyframes d2box{0%,29%{background:transparent;border-color:#ffffff40}32%,88%{background:var(--lime);border-color:var(--lime)}96%,100%{background:transparent;border-color:#ffffff40}}
.d2-list em{margin-left:auto;font:600 11px Jakarta,system-ui,sans-serif;font-style:normal;color:var(--lime);background:#d7fb8b14;border-radius:999px;padding:4px 9px;animation:d2chip 7s var(--ease-out) infinite}
@keyframes d2chip{0%,32%{opacity:0;transform:scale(.85)}38%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
.d2-cursor{position:absolute;left:34px;top:42px;width:22px;height:22px;border-radius:50%;border:2px solid #f2f3efcc;background:#f2f3ef1f;opacity:0;animation:d2cursor 7s var(--ease) infinite}
@keyframes d2cursor{0%{opacity:0;transform:translate(190px,120px)}8%{opacity:1;transform:translate(190px,120px)}26%{opacity:1;transform:none}30%{transform:scale(.75)}34%{transform:none;opacity:1}48%,100%{opacity:0;transform:none}}

/* 03 snapshot: two budgets fill toward their caps; skipped files are struck through */
.d3-commit{align-self:flex-start;font:600 11.5px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--lime);border:1px solid #d7fb8b4d;border-radius:999px;padding:5px 10px;margin-bottom:14px}
.d3-meter{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;margin:6px 0;font:12px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--muted)}
.d3-meter div{position:relative;height:8px;border-radius:9px;background:#ffffff10}
.d3-meter i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#9fd24f,var(--lime));transform-origin:0 50%;transform:scaleX(var(--to));animation:d3fill 7s var(--ease-out) var(--d,0s) infinite both}
.d3-meter s{position:absolute;right:0;top:-5px;bottom:-5px;width:2px;border-radius:2px;background:#ffffff55}
.d3-meter b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;min-width:86px;text-align:right}
@keyframes d3fill{0%{transform:scaleX(0)}30%,86%{transform:scaleX(var(--to))}95%,100%{transform:scaleX(0)}}
.d3-skip{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.d3-skip span{font:11.5px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--muted);border:1px dashed var(--line-2);border-radius:7px;padding:4px 8px;text-decoration:line-through;text-decoration-color:#ff8e78aa;animation:d3skip 7s var(--ease-out) var(--d) infinite both}
.d3-skip em{align-self:center;margin-right:2px;font:600 10.5px ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:#6c7269;animation:d3skip 7s var(--ease-out) var(--d) infinite both}
@keyframes d3skip{0%{opacity:0;transform:translateY(5px)}5%,56%{opacity:1;transform:none}64%,100%{opacity:0}}

/* 04 checks: the shared .check-list, driven by the page script */
.d4-list{max-width:none;width:min(360px,100%);margin-inline:auto;gap:8px}
.d4-list li{padding:10px 13px;font-size:13.5px}

/* 05 findings: arrive sorted by severity, the first one asks for attention */
.d5-list{display:grid;gap:8px}
.d5-list li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#ffffff05;animation:d5in 7s var(--ease-out) var(--d) infinite both}
.d5-list li:first-child{animation-name:d5in,d5hot;animation-duration:7s,7s;animation-delay:var(--d),0s;animation-iteration-count:infinite,infinite}
.d5-list b{display:block;font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d5-list div{min-width:0}
.d5-list small{font:11.5px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--muted)}
.d5-list .sev{min-width:60px;padding:5px 6px;font-size:9.5px}
@keyframes d5in{0%{opacity:0;transform:translateX(14px)}8%,86%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes d5hot{0%,30%{border-color:var(--line);box-shadow:none}38%,82%{border-color:#ff8e7866;box-shadow:0 0 0 4px #ff8e7812}92%,100%{border-color:var(--line)}}

/* 06 model: the selection moves between providers; the maximum cost moves with it */
/* Step 06: every provider from the live catalog glides under the frame (js/providers.js picker); the cost bar follows the pick. */
.d6-logos.prov-picker{width:min(420px,100%);margin-inline:auto}
.d6-cost{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;width:min(320px,100%);margin:16px auto 0;font-size:12.5px;color:var(--muted)}
.d6-cost div{height:8px;border-radius:9px;background:#ffffff10;overflow:hidden}
.d6-cost i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#9fd24f,var(--lime));transform-origin:0 50%;transform:scaleX(var(--cost,.34));transition:transform .6s var(--ease-out)}
.d6-note{margin-top:12px;text-align:center;font-size:12px;color:var(--muted)}

/* 07 diff: removed line, added line, validation, then the confirm press */
.d7-diff{display:grid;gap:4px;font:12px/1.6 ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.d7-diff span{padding:3px 8px;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:d7wipe 7s var(--ease) infinite both}
.d7-diff .del{background:#ff8e7814;color:#ffb3a3}.d7-diff .add{background:#d7fb8b12;color:#d6f3a2;animation-delay:.45s}
@keyframes d7wipe{0%{clip-path:inset(0 100% 0 0)}14%,86%{clip-path:inset(0)}95%,100%{clip-path:inset(0 100% 0 0)}}
.d7-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:18px}
.d7-ok{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--lime);animation:d7ok 7s var(--ease-out) infinite both}
.d7-ok::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8 3 3 5-6' fill='none' stroke='%23172113' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/11px no-repeat}
@keyframes d7ok{0%,26%{opacity:0;transform:translateY(4px)}32%,86%{opacity:1;transform:none}95%,100%{opacity:0}}
.d7-btn{display:inline-flex;padding:8px 14px;border-radius:999px;background:var(--lime);color:var(--lime-ink);font-size:12.5px;font-weight:600;animation:d7btn 7s var(--ease) infinite}
@keyframes d7btn{0%,26%{opacity:.35}32%,52%{opacity:1;transform:none}56%{transform:scale(.93)}60%,86%{opacity:1;transform:none;box-shadow:0 0 0 5px #d7fb8b2e}95%,100%{opacity:.35;box-shadow:none}}

/* 08 PR: a branch leaves main, the draft appears, merge stays with you */
.d8-graph{width:min(100%,320px);height:auto;overflow:visible}
.d8-graph path{fill:none;stroke-width:2.5;stroke-linecap:round}
.d8-main{stroke:#ffffff30}
.d8-branch{stroke:var(--lime);stroke-dasharray:240;stroke-dashoffset:0;filter:drop-shadow(0 0 5px #d7fb8b77);animation:d8draw 7s var(--ease) infinite}
@keyframes d8draw{0%,6%{stroke-dashoffset:240}34%,86%{stroke-dashoffset:0}95%,100%{stroke-dashoffset:240}}
.d8-c0{fill:#0c0d0c;stroke:#ffffff70;stroke-width:2}
.d8-c1{fill:var(--lime);transform-box:fill-box;transform-origin:center;animation:d8dot 7s var(--ease-out) infinite}
@keyframes d8dot{0%,30%{transform:scale(0)}38%,86%{transform:none}95%,100%{transform:scale(0)}}
.d8-graph text{font:600 10px ui-monospace,"SF Mono",Menlo,Consolas,monospace;fill:var(--muted)}
.d8-graph .d8-t-branch{fill:var(--lime);animation:d8dot 7s var(--ease-out) infinite;transform-box:fill-box;transform-origin:left center}
.d8-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.d8-card{display:inline-flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid #d7fb8b40;background:#d7fb8b0a;font-size:13px;animation:d8card 7s var(--ease-out) infinite both}
.d8-card b{font-weight:600}
@keyframes d8card{0%,38%{opacity:0;transform:scale(.94)}46%,86%{opacity:1;transform:none}95%,100%{opacity:0}}
.d8-merge{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);border:1px dashed var(--line-2);border-radius:999px;padding:6px 11px;animation:d8card 7s var(--ease-out) .35s infinite both}
.d8-merge svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}

/* 09 re-audit: a new pass over the merged code; the fixed finding is no longer detected */
.d9-list{display:grid;gap:8px}
.d9-list li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#ffffff05;min-width:0}
.d9-list b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.d9-list .sev{min-width:60px;padding:5px 6px;font-size:9.5px}
.d9-list em{margin-left:auto;flex:none;font:600 11px Jakarta,system-ui,sans-serif;font-style:normal;color:var(--lime);background:#d7fb8b14;border-radius:999px;padding:4px 9px;animation:d9tag 7s var(--ease-out) infinite both}
.d9-gone{border-color:#d7fb8b40!important;animation:d9row 7s var(--ease) infinite both}
.d9-gone b{color:var(--muted);text-decoration:line-through;text-decoration-color:#d7fb8b;animation:d9strike 7s var(--ease) infinite both}
.d9-gone .sev{animation:d9sev 7s var(--ease) infinite both}
@keyframes d9row{0%,44%{border-color:var(--line);background:#ffffff05}50%,86%{border-color:#d7fb8b40;background:#d7fb8b08}95%,100%{border-color:var(--line);background:#ffffff05}}
@keyframes d9strike{0%,44%{color:var(--text);text-decoration-color:transparent}50%,86%{color:var(--muted);text-decoration-color:var(--lime)}95%,100%{color:var(--text);text-decoration-color:transparent}}
@keyframes d9sev{0%,44%{opacity:1;filter:none}50%,86%{opacity:.45;filter:grayscale(1)}95%,100%{opacity:1;filter:none}}
.d9-gone .sev{opacity:.45;filter:grayscale(1)}
@keyframes d9tag{0%,48%{opacity:0;transform:scale(.85)}54%,86%{opacity:1;transform:none}95%,100%{opacity:0}}
.d9-scan{position:absolute;left:0;right:0;top:0;height:46px;background:linear-gradient(180deg,transparent,#d7fb8b1c 70%,#d7fb8b66);border-bottom:1px solid #d7fb8b88;opacity:0;pointer-events:none;animation:d9scan 7s var(--ease) infinite}
@keyframes d9scan{0%{opacity:0;transform:translateY(-50px)}6%{opacity:1}40%{opacity:1;transform:translateY(220px)}44%,100%{opacity:0;transform:translateY(220px)}}

/* ───── Anatomy of a finding ───── */
.hw-anatomy{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,64px);align-items:center}
.hw-finding{position:relative;border-radius:var(--r-lg);background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);padding:clamp(22px,3vw,32px);box-shadow:0 40px 90px -50px #000,0 0 80px -40px #ff8e7833}
.hw-finding figcaption{margin-top:18px;font-size:12.5px;color:#6c7269}
.hw-f-top{display:flex}
.hw-part{position:relative;border-radius:12px;outline:1.5px solid transparent;outline-offset:6px;transition:opacity var(--t) var(--ease),outline-color var(--t),background-color var(--t)}
.hw-part::after{content:attr(data-n);position:absolute;right:-11px;top:50%;margin-top:-11px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;font:700 11px/1 Jakarta,system-ui,sans-serif;color:var(--soft);background:#232623;border:1px solid var(--line-2);transition:background var(--t),color var(--t),transform var(--t) var(--ease-out)}
.hw-anatomy.has-active .hw-part{opacity:.52}
.hw-anatomy.has-active .hw-part.is-on{opacity:1;outline-color:#d7fb8b99;background-color:#d7fb8b08}
.hw-part.is-on::after{background:var(--lime);color:var(--lime-ink);border-color:var(--lime);transform:scale(1.12)}
.hw-f-top .hw-part,.hw-f-loc{padding-right:24px}
.hw-f-top .hw-part{display:flex;flex:1;align-items:center;gap:12px}
.hw-f-top small{font-size:13px;color:var(--muted)}
.hw-f-title{margin-top:18px;font-size:clamp(22px,2.4vw,28px);letter-spacing:-.035em}
.hw-f-loc{display:flex;align-items:center;gap:8px;margin-top:14px;font:13px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--soft)}
.hw-f-loc b{color:var(--lime);font-weight:600}
.hw-f-loc img{filter:invert(1);opacity:.7}
.hw-f-code{margin-top:18px}
.hw-f-code pre{border:1px solid var(--line);border-radius:12px;background:#080908;padding:12px 0;font:13px/1.8 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:#d4dbcf;overflow-x:auto}
.hw-f-code span{display:block;padding:0 14px;white-space:pre;width:max-content;min-width:100%}
.hw-f-code span.hl{background:#ff8e7812;box-shadow:inset 2px 0 var(--coral)}
.hw-f-code i{display:inline-block;width:18px;margin-right:6px;font-style:normal;color:#5f665c;text-align:right}
.hw-f-block{margin-top:16px;padding:14px 16px;border:1px solid var(--line);background:#ffffff04}
.hw-f-block p{margin-top:6px;font-size:15px;color:var(--soft)}
.hw-parts{display:grid;gap:6px}
.hw-parts button{display:flex;align-items:center;gap:14px;width:100%;min-height:54px;padding:12px 16px;border:1px solid transparent;border-radius:14px;background:none;text-align:left;font-size:17px;font-weight:600;color:var(--soft);cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.hw-parts button:hover{background:#ffffff08;color:var(--text)}
.hw-parts button[aria-expanded="true"]{background:var(--panel);border-color:var(--line-2);color:var(--text)}
.hw-num{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;font-size:12px;font-weight:700;background:#ffffff0d;border:1px solid var(--line-2);transition:background var(--t),color var(--t),border-color var(--t)}
.hw-parts button[aria-expanded="true"] .hw-num{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.hw-parts p{padding:2px 16px 12px 56px;font-size:15.5px;line-height:1.65;color:var(--muted);animation:hw-swap .4s var(--ease-out)}

/* ───── Does / does not ───── */
.hw-versus{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1000px;margin-inline:auto}
.hw-vs{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel);padding:clamp(24px,3vw,34px)}
.hw-vs-do{background:linear-gradient(180deg,#d7fb8b0e,var(--panel) 55%);border-color:#d7fb8b38}
.hw-vs h3{display:flex;align-items:center;gap:12px;font-size:22px}
.hw-vs-mark{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%}
.hw-vs-mark svg{width:17px;height:17px;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:0}
.hw-vs-do .hw-vs-mark{background:var(--lime)}.hw-vs-do .hw-vs-mark svg{stroke:var(--lime-ink)}
.hw-vs-dont .hw-vs-mark{background:#ff8e781f}.hw-vs-dont .hw-vs-mark svg{stroke:var(--coral)}
.hw-vs ul{margin-top:20px}
.hw-vs li{display:flex;align-items:baseline;gap:12px;padding:13px 0;border-top:1px solid var(--line);font-size:16px;color:var(--soft);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.hw-vs li::before{flex:none;width:16px;font-weight:700;text-align:center}
.hw-vs-do li::before{content:"✓";color:var(--lime)}
.hw-vs-dont li::before{content:"✕";color:var(--coral)}
.js .hw-vs[data-draw]:not(.is-drawn) li{opacity:0;transform:translateX(-8px)}
.js .hw-vs[data-draw]:not(.is-drawn) .hw-vs-mark svg{stroke-dashoffset:30}
.hw-vs.is-drawn .hw-vs-mark svg{transition:stroke-dashoffset .6s var(--ease) .1s}
.hw-vs li:nth-child(2){transition-delay:.07s}.hw-vs li:nth-child(3){transition-delay:.14s}.hw-vs li:nth-child(4){transition-delay:.21s}.hw-vs li:nth-child(5){transition-delay:.28s}
.hw-vs-dont li{transition-delay:.25s}.hw-vs-dont li:nth-child(2){transition-delay:.32s}.hw-vs-dont li:nth-child(3){transition-delay:.39s}.hw-vs-dont li:nth-child(4){transition-delay:.46s}.hw-vs-dont li:nth-child(5){transition-delay:.53s}
.hw-more{margin-top:28px;text-align:center;font-size:15px;color:var(--muted)}

/* ───── Responsive ───── */
@media(max-width:1020px){
  .hw-anatomy{grid-template-columns:minmax(0,1fr)}
  .hw-step{grid-template-columns:minmax(0,1fr);align-items:start;gap:22px}
  .hw-dot{top:2px;margin-top:0}
  .hw-copy p{max-width:60ch}
}
@media(max-width:680px){
  .hw-map{padding:18px 14px 14px}
  .hw-map-rail b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .hw-node{width:36px;height:36px}.hw-node svg{width:16px;height:16px}.hw-node img{width:14px;height:14px}
  .hw-map-line{top:23px}
  .hw-map-status{flex-direction:column;gap:6px;min-height:104px}
  .hw-rail{left:9px}
  .hw-phase{padding-left:38px}.hw-phase::before{left:4px}
  .hw-step{padding-left:38px}
  .hw-dot{left:1px}
  .hw-demo{height:auto;min-height:210px;padding:20px 16px}
  .d2-cursor{display:none}
  .d3-meter b{min-width:0}
  .hw-versus{grid-template-columns:1fr}
  .d9-list em{position:absolute;right:10px;top:-10px;box-shadow:0 0 0 3px #0c0d0c}
  .d9-list li{position:relative}
  .hw-parts p{padding-left:16px}
}

/* Reduced motion: every demo shows its finished frame; nothing loops */
@media(prefers-reduced-motion:reduce){
  .hw-demo *,.hw-demo *::before,.hw-demo *::after{animation:none!important}
  .d2-cursor,.d9-scan{display:none}
  .hw-map-line i{transition:none}
  .js .hw-vs[data-draw] li{opacity:1;transform:none}
  .js .hw-vs[data-draw] .hw-vs-mark svg{stroke-dashoffset:0}
}