/* Hero illustration — one continuous product story:
   inspect → extract → connect → process with AI → build the report → complete → link back → preview fixes.
   The Browser Extractor cursor inspects a page (glass slab, left); each element it picks lifts a signal that
   travels into the AI core (center); the core fills a single AI Audit report (right) section by section; when
   the report completes, every insight sends a filament back to its element and the fixes are previewed there.
   js/hero-visual.mjs owns the clock, the wires and the particles and sets state attributes; this file styles
   the states. Without the script (or with reduced motion) the markup shows the finished, connected state. */
.hero-visual{--hv-w:1120;--hv-h:560;--hv-ease:cubic-bezier(.2,.7,.2,1);
  --hv-neon:var(--accent);--hv-neon-hot:#ffd2a6;--hv-fix:var(--text-success);--hv-risk:var(--text-warning);
  --hv-glass:linear-gradient(155deg,rgba(255,255,255,.085),rgba(255,255,255,.02) 42%,rgba(255,255,255,.04));
  --hv-glass-edge:rgba(255,255,255,.15);
  position:relative;width:100%;aspect-ratio:1120/560;margin:0;overflow:hidden;contain:layout paint}
.hv-stage{position:absolute;left:0;top:0;width:1120px;height:560px;transform:scale(var(--hv-scale,1));transform-origin:0 0;perspective:1500px;perspective-origin:50% 46%;font-family:var(--font-sans);color:var(--text-primary)}
/* Each act may zoom the whole stage about its centre (--hv-zoom, per act and layout) so what is on it fills the frame without leaving it.
   Wires are measured from the rendered stage, so they follow. At the end of a pass the stage fades out a little smaller
   (data-restart, hero-visual.mjs) and comes back in at full size: the next pass reads as a new start. */
.hv-stage{--hv-z:calc(var(--hv-zoom,1)*var(--hv-arrive,1));scale:var(--hv-z);
  /* Restart in: opacity, a little growth and a blur that clears (enter ease-out, exit ease-in). */
  translate:calc((1 - var(--hv-z))*var(--hv-scale,1)*var(--hv-w)*.5px) calc((1 - var(--hv-z))*var(--hv-scale,1)*var(--hv-h)*.5px);
  transition:opacity 700ms var(--ease-enter),filter 700ms var(--ease-enter),scale 1.2s var(--ease-fluid),translate 1.2s var(--ease-fluid)}
.hero-visual[data-restart]{--hv-arrive:.96}
/* Stacked (the wide 1120 × 560 stage): apart in depth, the layers reach past the left edge and the report the right; beside the page, the report touches the right edge. The stage steps back a little in both. */
@media (min-width:761px){.hero-visual[data-form="3d"]{--hv-zoom:.92}.hero-visual[data-act=note]{--hv-zoom:.96}}
.hero-visual[data-restart] .hv-stage{opacity:0;filter:blur(6px);transition:opacity 400ms var(--ease-exit),filter 400ms var(--ease-exit),scale 450ms var(--ease-exit),translate 450ms var(--ease-exit)}
.hv-stage *,.hv-stage *::before,.hv-stage *::after{box-sizing:border-box}
.hv-stage p,.hv-stage h4{margin:0}
.hero-visual[data-paused] *,.hero-visual[data-paused] *::before,.hero-visual[data-paused] *::after,
.hero-visual[data-focus] *,.hero-visual[data-focus] *::before,.hero-visual[data-focus] *::after{animation-play-state:paused!important}

/* ── Environment: a faint floor lit by the core ── */
.hv-floor{position:absolute;left:-80px;right:-80px;top:300px;height:420px;transform-origin:50% 0;transform:rotateX(76deg);pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(0deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 46% 60% at 50% 18%,#000,transparent 72%);mask-image:radial-gradient(ellipse 46% 60% at 50% 18%,#000,transparent 72%)}
.hv-floor::after{content:'';position:absolute;left:30%;right:30%;top:-6%;height:60%;background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 65%);opacity:.55;transition:opacity 1.2s ease}
.hero-visual:is([data-phase=process],:not([data-live])) .hv-floor::after{opacity:1}

/* ── The page: a real storefront on a glass slab, turned toward the core ── */
.hv-page-rig{position:absolute;left:34px;top:122px;width:440px;height:300px;transform-style:preserve-3d;transform:rotateY(20deg) rotateX(4deg)}
.hv-page{position:absolute;inset:0;transform-style:preserve-3d}
.hv-plate{position:absolute;inset:0;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.015);transform:translateZ(var(--z));transition:transform 1.2s var(--hv-ease)}
.hv-plate--near{--z:-36px}.hv-plate--far{--z:-72px;border-style:dashed;border-color:rgba(255,255,255,.06)}
.hero-visual[data-phase=scan] .hv-plate--near{transform:translateZ(-58px)}.hero-visual[data-phase=scan] .hv-plate--far{transform:translateZ(-118px)}
.hv-frame{position:absolute;inset:-7px;padding:7px;border-radius:21px;border:1px solid var(--hv-glass-edge);background:var(--hv-glass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 40px 70px -20px rgba(0,0,0,.7),24px 0 60px -24px color-mix(in srgb,var(--accent) 30%,transparent)}
.hv-site{position:relative;width:100%;height:100%;border-radius:14px;overflow:hidden;background:#F4EFE7;color:#221D18;font-family:"Avenir Next",Avenir,"Segoe UI",system-ui,sans-serif}
.hv-site>*{position:absolute;margin:0}
.hv-bar{left:0;right:0;top:0;height:24px;background:#EFEBE4;border-bottom:1px solid #1F1F1F12}
.hv-dots{position:absolute;left:10px;top:9px;display:flex;gap:4px}.hv-dots i{width:6px;height:6px;border-radius:50%;background:#E4776C}.hv-dots i+i{background:#E6BB5C}.hv-dots i+i+i{background:#79B96A}
.hv-url{position:absolute;left:140px;top:5px;width:160px;height:14px;display:flex;align-items:center;justify-content:center;gap:4px;border-radius:7px;background:#FAF8F4;font:500 7.5px/1 var(--font-mono);color:#6d675e}
.hv-url svg{width:7px;height:7px}
.hv-site [data-link]{transition:box-shadow var(--transition-fast),color .8s ease}
.hv-sheen{inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 38%,color-mix(in srgb,var(--accent) 16%,transparent) 47%,rgba(255,255,255,.5) 50%,color-mix(in srgb,var(--accent) 16%,transparent) 53%,transparent 62%);mix-blend-mode:soft-light;transform:translateX(-110%)}
.hv-sheen.is-on{animation:hv-sheen 1.6s cubic-bezier(.45,0,.55,1) both}
@keyframes hv-sheen{from{transform:translateX(-110%)}to{transform:translateX(110%)}}

/* anchors: where a signal leaves the page and where its insight lands again */
.hv-anchor{position:absolute;width:0;height:0;transform:translateZ(1px);pointer-events:none}
.hv-anchor::before{content:'';position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--hv-neon-hot);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent),0 0 12px 2px color-mix(in srgb,var(--accent) 70%,transparent);transition:opacity .3s,transform .4s var(--hv-ease)}
.hv-anchor::after{content:'';position:absolute;left:-10px;top:-10px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--hv-neon);transition:opacity .4s,transform .5s var(--hv-ease)}
.hv-anchor--source::before{background:rgba(255,210,166,.8)}
.hv-anchor--source::after{display:none}
.hero-visual[data-live] .hv-anchor:not(.is-on)::before{opacity:0;transform:scale(.3)}
.hero-visual[data-live] .hv-anchor:not(.is-locked)::after{opacity:0;transform:scale(2.2)}

/* inspector outline and the branded cursor, both in the page's plane */
.hv-inspect{position:absolute;left:0;top:0;width:0;height:0;border:1.5px solid var(--hv-neon);border-radius:6px;background:color-mix(in srgb,var(--accent) 6%,transparent);opacity:0;pointer-events:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent),0 0 18px color-mix(in srgb,var(--accent) 35%,transparent);transform:translateZ(3px);
  transition:left .38s var(--hv-ease),top .38s var(--hv-ease),width .38s var(--hv-ease),height .38s var(--hv-ease),opacity .25s ease}
.hv-inspect.is-on{opacity:1}
.hv-inspect b{position:absolute;left:-1.5px;bottom:calc(100% + 5px);padding:3px 6px;border-radius:5px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:#1b1b1b;color:#fafafa;font:500 7.5px/1.2 var(--font-mono);white-space:nowrap;box-shadow:0 6px 14px rgba(0,0,0,.35)}
.hv-cursor{position:absolute;left:330px;top:250px;width:0;height:0;transform:translateZ(22px);pointer-events:none;opacity:0;
  transition:left .9s cubic-bezier(.45,.05,.25,1),top .9s cubic-bezier(.3,.65,.3,1),opacity .4s ease}
.hero-visual[data-live] .hv-cursor.is-on{opacity:1}
.hv-cursor>svg{position:absolute;left:-2px;top:-2px;width:17px;height:17px;max-width:none;fill:#fafafa;stroke:#141414;stroke-width:1.4;stroke-linejoin:round;filter:drop-shadow(0 3px 5px rgba(0,0,0,.4));transform-origin:2px 2px;transition:transform .14s ease}
.hv-cursor.is-press>svg{transform:scale(.82)}
.hv-cursor::after{content:'';position:absolute;left:-12px;top:-12px;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--hv-neon);opacity:0}
.hv-cursor.is-press::after{animation:hv-click .6s ease-out}
@keyframes hv-click{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(1.4)}}
.hv-cursor-tag{position:absolute;left:12px;top:15px;display:flex;align-items:center;gap:4px;padding:3px 7px 3px 4px;border-radius:7px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);background:#1c1c1c;color:#fafafa;font:600 7.5px/1 var(--font-sans);white-space:nowrap;box-shadow:0 6px 14px rgba(0,0,0,.35)}
.hv-cursor-tag svg{width:11px;height:11px}

/* ── Wires (SVG, drawn by script) ── */
.hv-wires{position:absolute;left:0;top:0;width:1120px;height:560px;overflow:visible;pointer-events:none}
.hv-wires path{fill:none;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .8s var(--hv-ease),opacity .5s ease,stroke .5s ease,stroke-width .5s ease}
.hv-wires path.is-drawn{stroke-dashoffset:0}
.hv-in{stroke:color-mix(in srgb,var(--accent) 30%,transparent);stroke-width:1.2}
.hero-visual[data-phase=process] .hv-in.is-drawn{stroke:color-mix(in srgb,var(--accent) 55%,transparent)}
.hv-out{stroke:color-mix(in srgb,var(--accent) 38%,transparent);stroke-width:1.2}
.hv-back{stroke:rgba(255,236,220,.34);stroke-width:1}
.hv-back.is-live{stroke:rgba(255,210,166,.8);stroke-width:1.4;filter:url(#hv-glow)}

/* narrow layout: where a filament enters its element from the left margin */
.hv-back-end{fill:none;stroke:var(--hv-neon);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(1.8);transition:opacity .4s ease .5s,transform .5s var(--hv-ease) .5s}
.hv-back-end.is-drawn{opacity:1;transform:none}

/* ── Particles (positioned on the wires with offset-path by script) ── */
.hv-particles{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.hv-frag,.hv-dot{position:absolute;left:0;top:0;offset-anchor:50% 50%;offset-rotate:0deg;offset-distance:0%;opacity:0;will-change:offset-distance,opacity,transform}
.hv-frag{display:flex;align-items:center;gap:5px;padding:4px 8px;border-radius:8px;border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);background:rgba(22,18,15,.86);color:#fbe7d3;font:500 9px/1 var(--font-mono);white-space:nowrap;box-shadow:0 0 18px color-mix(in srgb,var(--accent) 45%,transparent),0 10px 20px rgba(0,0,0,.4)}
.hv-frag i{width:7px;height:7px;border-radius:2px}
.hv-dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#ffd2a6;box-shadow:0 0 10px 2px color-mix(in srgb,var(--accent) 80%,transparent)}
.hv-dot--cool{background:#fff4ea;box-shadow:0 0 10px 2px rgba(255,236,220,.75)}

/* ── The AI core ── */
.hv-core{position:absolute;left:492px;top:168px;width:216px;height:216px;perspective:560px}
.hv-halo{position:absolute;inset:-84px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),color-mix(in srgb,var(--accent) 5%,transparent) 38%,transparent 62%);opacity:.55;transition:opacity 1s ease,transform 1s var(--hv-ease)}
.hero-visual:is([data-phase=process],:not([data-live])) .hv-halo{opacity:1;transform:scale(1.08)}
.hv-ring-text{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:.3;transition:opacity 1s ease;animation:hv-rot 48s linear infinite}
.hv-ring-text text{fill:rgba(255,200,150,.8);font:500 8px var(--font-mono);letter-spacing:.14em}
.hv-dial{fill:none;stroke:color-mix(in srgb,var(--accent) 25%,transparent);stroke-width:1;stroke-dasharray:1 5}
.hero-visual[data-phase=process] .hv-ring-text{opacity:1}
.hv-orbit{position:absolute;inset:36px;transform-style:preserve-3d}
.hv-orbit i{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(var(--ry)) rotateX(var(--rx))}
.hv-orbit i::before{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);border-top-color:rgba(255,210,166,.95);border-right-color:color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 18%,transparent);animation:hv-rot 7s linear infinite}
.hv-orbit i:nth-child(2)::before{animation-direction:reverse;animation-duration:9s}
.hv-orbit i:nth-child(3)::before{inset:12px;animation-duration:5s}
.hv-ripple{position:absolute;inset:50px;border-radius:50%;border:1.5px solid var(--hv-neon);opacity:0;pointer-events:none}
.hv-lens{position:absolute;inset:50px;display:grid;place-items:center;border-radius:50%;color:#ffd9b3;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.24),rgba(255,255,255,.05) 36%,color-mix(in srgb,var(--accent) 8%,transparent) 66%,rgba(255,150,70,.24));
  border:1px solid rgba(255,255,255,.24);-webkit-backdrop-filter:blur(7px) saturate(160%);backdrop-filter:blur(7px) saturate(160%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4),inset 0 -12px 26px rgba(255,120,40,.2),0 0 40px color-mix(in srgb,var(--accent) 28%,transparent),0 26px 40px -10px rgba(0,0,0,.6);transition:box-shadow 1s ease}
.hero-visual[data-phase=process] .hv-lens{box-shadow:inset 0 1px 1px rgba(255,255,255,.4),inset 0 -12px 30px rgba(255,120,40,.34),0 0 70px color-mix(in srgb,var(--accent) 50%,transparent),0 26px 40px -10px rgba(0,0,0,.6)}
.hv-lens::before{content:'';position:absolute;inset:20%;border-radius:50%;background:radial-gradient(circle,rgba(255,196,140,.6),color-mix(in srgb,var(--accent) 12%,transparent) 55%,transparent 72%);animation:hv-breathe 2.4s ease-in-out infinite}
.hv-lens::after{content:'';position:absolute;left:20%;top:8%;width:40%;height:20%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.2),transparent);transform:rotate(-22deg)}
.hv-glyph{position:absolute;inset:0;z-index:1;display:grid;place-items:center;opacity:0;transform:scale(.6) rotate(-14deg);transition:opacity var(--motion-state) var(--ease-fluid),transform var(--motion-panel) var(--ease-fluid)}
.hv-glyph.is-on{opacity:1;transform:none}
.hv-lens svg{position:relative;z-index:1;width:34px;height:34px;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 90%,transparent))}
.hv-core-label{position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%);display:grid;justify-items:center;gap:6px;white-space:nowrap;text-align:center}
.hv-core-label small{font:600 9px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
.hv-step{font:500 12px/1 var(--font-sans);color:var(--text-accent);transition:opacity .25s ease,transform .25s ease}
.hv-step.is-swap{opacity:0;transform:translateY(4px)}
@keyframes hv-rot{to{transform:rotate(360deg)}}
@keyframes hv-breathe{0%,100%{opacity:.7;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}

/* ── The report: one AI Audit panel that fills as the core works ── */
.hv-report{position:absolute;left:754px;top:62px;width:332px;transform-origin:0 50%;transform:rotateY(-10deg);border-radius:18px;overflow:hidden;
  border:1px solid var(--hv-glass-edge);background:var(--hv-glass),rgba(20,20,20,.64);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 40px 70px -24px rgba(0,0,0,.8),-24px 0 60px -34px color-mix(in srgb,var(--accent) 35%,transparent)}
.hv-report::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(169,201,174,.12) 48%,rgba(255,255,255,.1) 50%,transparent 62%);transform:translateX(-110%)}
.hv-report.is-sweep::after{animation:hv-sheen 1.2s cubic-bezier(.45,0,.55,1) both}
.hv-rh{padding:14px 16px 12px;border-bottom:1px solid rgba(255,255,255,.07)}
.hv-rh-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hv-rh-title{display:flex;align-items:center;gap:7px;font:600 13px/1 var(--font-sans)}
.hv-rh-title svg{width:15px;height:15px;color:var(--hv-neon);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 60%,transparent))}
.hv-status{display:grid}
.hv-status>span{grid-area:1/1;justify-self:end;display:flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;border:1px solid var(--border-standard);font:500 9px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);opacity:0;transform:translateY(3px);transition:opacity .35s ease,transform .35s ease}
.hv-status [data-s=analyzing]{color:var(--hv-neon);border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.hv-status [data-s=complete]{color:var(--hv-fix);border-color:rgba(169,201,174,.4);background:rgba(169,201,174,.08)}
.hv-status svg{width:10px;height:10px}
.hv-report[data-status=ready] [data-s=ready],.hv-report[data-status=analyzing] [data-s=analyzing],.hv-report[data-status=complete] [data-s=complete]{opacity:1;transform:none}
.hv-spin{width:9px;height:9px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--accent) 30%,transparent);border-top-color:var(--hv-neon);animation:hv-rot .8s linear infinite}
.hv-rh-meta{display:flex;justify-content:space-between;margin-top:9px;font:500 9.5px/1 var(--font-mono);color:var(--text-muted)}
.hv-count{transition:opacity .4s ease}.hv-count b{color:var(--text-primary);font-weight:500}
.hv-report:not([data-status=complete]) .hv-count{opacity:0}
.hv-progress{height:3px;margin-top:11px;border-radius:2px;background:rgba(255,255,255,.07);overflow:hidden}
.hv-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--hv-neon),var(--hv-neon-hot));box-shadow:0 0 10px color-mix(in srgb,var(--accent) 70%,transparent);transform-origin:0 50%;transform:scaleX(var(--p,1));transition:transform var(--pd,.6s) linear,background .6s ease}
.hv-report[data-status=complete] .hv-progress i{background:linear-gradient(90deg,var(--hv-neon),var(--hv-fix))}

.hv-sec{--tone:var(--hv-neon);position:relative;padding:12px 16px 13px;border-bottom:1px solid rgba(255,255,255,.06);transition:background .5s ease}
.hv-sec--fix{--tone:var(--hv-fix)}.hv-sec--risk{--tone:var(--hv-risk)}
.hv-sec::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--tone);box-shadow:0 0 12px var(--tone);opacity:.9;transition:opacity .5s ease}
.hv-sec[data-state=pending]::before{opacity:0}.hv-sec[data-state=active]::before{opacity:.5}
.hv-sec[data-state=active]{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 75%)}
.hv-sec-head{display:flex;align-items:center;gap:8px}
.hv-sec h4{font:600 12px/1 var(--font-sans);color:var(--text-primary)}
.hv-state{width:16px;height:16px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);color:#141414;transition:background .3s ease,border-color .3s ease}
.hv-state svg{width:10px;height:10px;opacity:0;transform:scale(.5);transition:opacity .3s ease,transform .3s var(--hv-ease)}
.hv-sec[data-state=active] .hv-state{border-color:color-mix(in srgb,var(--accent) 25%,transparent);border-top-color:var(--hv-neon);animation:hv-rot .8s linear infinite}
.hv-sec[data-state=done] .hv-state{background:var(--tone);border-color:var(--tone)}
.hv-sec[data-state=done] .hv-state svg{opacity:1;transform:none}
.hv-sev{padding:3px 5px;border-radius:5px;border:1px solid color-mix(in srgb,var(--tone) 45%,transparent);font:600 8.5px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tone);transition:opacity .4s ease}
.hv-sec:not([data-state=done]) .hv-sev{opacity:0}
.hv-target{margin-left:auto;display:flex;align-items:center;gap:4px;padding:3px 6px 3px 4px;border-radius:6px;border:1px solid var(--border-standard);background:rgba(255,255,255,.04);font:500 9.5px/1 var(--font-mono);color:var(--text-secondary);transition:border-color .4s ease,box-shadow .4s ease}
.hv-target svg{width:11px;height:11px;color:var(--hv-neon)}
.hv-sec.is-linked-back .hv-target{border-color:color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 35%,transparent)}
.hv-sec-body{display:grid;margin-top:10px}
.hv-sec-body>*{grid-area:1/1}
.hv-skel{display:grid;align-content:start;gap:8px;padding-top:3px;transition:opacity .4s ease}
.hv-skel i{display:block;height:7px;border-radius:4px;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.14),rgba(255,255,255,.06)) 0 0/200% 100%}
.hv-sec[data-state=active] .hv-skel i{background-image:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent),color-mix(in srgb,var(--accent) 30%,transparent),color-mix(in srgb,var(--accent) 8%,transparent));animation:hv-shimmer 1.1s linear infinite}
@keyframes hv-shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
.hv-sec-content{display:grid;gap:7px;transition:opacity .5s ease,clip-path .7s var(--hv-ease)}
.hv-sec[data-state=done] .hv-skel{opacity:0}
.hv-sec:not([data-state=done]) .hv-sec-content{opacity:0;clip-path:inset(0 100% 0 0)}
.hv-sec[data-state=done] .hv-sec-content{clip-path:inset(0 0 0 0)}
.hv-row{display:flex;align-items:center;gap:8px;font:500 10px/1.2 var(--font-mono);color:var(--text-muted)}
.hv-row b{margin-left:auto;font-weight:500;color:var(--text-primary)}
.hv-sws{display:flex;gap:3px;width:52px}.hv-sws i{width:10px;height:10px;border-radius:3px;border:1px solid #ffffff30}
.hv-aa{width:52px;font:400 13px/1 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;color:var(--text-primary)}
.hv-line{font:500 12.5px/1.35 var(--font-sans);color:var(--text-primary)}
.hv-sub{font:500 9.5px/1 var(--font-mono);color:var(--text-muted)}
.hv-ratio{display:flex;align-items:center;gap:7px;font:500 11px/1 var(--font-mono);color:var(--text-muted)}
.hv-ratio s{text-decoration-color:rgba(255,255,255,.4)}.hv-ratio b{font-weight:500;color:var(--hv-fix)}
.hv-ratio em{padding:3px 5px;border-radius:5px;border:1px solid rgba(169,201,174,.4);font-style:normal;font-size:9px;letter-spacing:.06em;color:var(--hv-fix)}
.hv-rf{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px 12px}
.hv-rf-note{display:flex;align-items:center;gap:6px;white-space:nowrap;font:500 9px/1.2 var(--font-mono);color:var(--text-muted);transition:opacity .4s ease}
.hv-rf-note i{width:5px;height:5px;border-radius:50%;background:var(--hv-neon);box-shadow:0 0 8px var(--hv-neon)}
.hv-report:not([data-status=complete]) .hv-rf-note{opacity:.35}
.hv-apply{display:grid;flex-shrink:0;transition:transform .15s ease,opacity .4s ease}
.hv-apply>span{grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 11px;border-radius:9px;font:600 10.5px/1 var(--font-sans);transition:opacity .35s ease}
.hv-apply [data-a=off]{background:var(--hv-neon);color:#1a1a1a;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 20px -4px color-mix(in srgb,var(--accent) 60%,transparent)}
.hv-apply [data-a=on]{border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--hv-neon);opacity:0}
.hv-apply [data-a=on] i{width:6px;height:6px;border-radius:50%;background:var(--hv-neon);box-shadow:0 0 8px var(--hv-neon);animation:hv-breathe 1.4s ease-in-out infinite}
.hv-report[data-apply=on] [data-a=on]{opacity:1}.hv-report[data-apply=on] [data-a=off]{opacity:0}
.hv-report:not([data-status=complete]) .hv-apply{opacity:.3}
.hv-apply.is-press{transform:scale(.94)}

/* ── Narrow screens: page on top, core in the middle, the report below ── */
@media (max-width:760px){
  .hero-visual{--hv-w:560;--hv-h:1080;aspect-ratio:560/1080}
  .hv-stage{width:560px;height:1080px;perspective-origin:50% 34%}
  .hv-wires{width:560px;height:1080px}
  .hv-floor{top:470px;left:-160px;right:-160px}
  .hv-page-rig{left:60px;top:34px;transform:rotateX(12deg)}
  .hv-frame{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 40px 70px -20px rgba(0,0,0,.7),0 24px 60px -24px color-mix(in srgb,var(--accent) 30%,transparent)}
  .hv-core{left:172px;top:370px}
  .hv-report{left:40px;top:630px;width:480px;transform:none}
  .hv-line{font-size:13px}
}

/* Linked focus (pointer): a report section, or its element on the page, lights the whole path between them. */
.hero-visual[data-focus] .hv-sec:not(.is-linked){opacity:.4}
.hero-visual[data-focus] .hv-sec{transition:opacity var(--transition-smooth),background .5s ease}
.hero-visual[data-focus] .hv-sec.is-linked{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent 80%)}
.hero-visual[data-focus] .hv-sec.is-linked .hv-skel{opacity:0}
.hero-visual[data-focus] .hv-sec.is-linked .hv-sec-content{opacity:1;clip-path:none}
.hero-visual[data-focus] .hv-back:not(.is-linked),.hero-visual[data-focus] .hv-out:not(.is-linked),.hero-visual[data-focus] .hv-in{opacity:.25}
.hero-visual[data-focus] .hv-back.is-linked{stroke-dashoffset:0;stroke:var(--hv-neon-hot);stroke-width:1.6;filter:url(#hv-glow)}
.hero-visual[data-focus] .hv-out.is-linked{stroke-dashoffset:0}
.hero-visual[data-focus] .hv-anchor.is-linked::before,.hero-visual[data-focus] .hv-anchor.is-linked::after{opacity:1;transform:none}
.hero-visual[data-focus] .hv-site [data-link].is-linked{box-shadow:0 0 0 1.5px var(--hv-neon),0 0 18px color-mix(in srgb,var(--accent) 50%,transparent);border-radius:6px}
.hv-sec,.hv-site [data-link]{pointer-events:auto}

@media (prefers-reduced-motion:reduce){
  .hv-stage *,.hv-stage *::before,.hv-stage *::after{animation:none!important;transition:none!important}
}

/* The core is a flat extraction node, not a sphere: the picked values collect in a readable ledger beneath it. */
.hv-halo,.hv-ring-text,.hv-orbit,.hv-ripple,.hv-lens::before,.hv-lens::after{display:none}
.hv-lens{border-radius:20px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:linear-gradient(180deg,#2a2622,#1b1917);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 30px -12px rgba(0,0,0,.7);transition:border-color .6s ease,box-shadow .6s ease}
.hero-visual[data-phase=process] .hv-lens{border-color:color-mix(in srgb,var(--accent) 95%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent),0 18px 30px -12px rgba(0,0,0,.7)}
.hv-lens svg{width:30px;height:30px;filter:none;color:var(--accent)}
.hv-ledger{position:absolute;left:8px;right:8px;top:calc(100% + 46px);margin:0;padding:10px 12px;list-style:none;display:grid;gap:5px;border:1px solid var(--border-standard);border-radius:12px;background:rgba(20,19,18,.82);font:500 11px/1.3 var(--font-mono);color:var(--text-muted)}
.hv-ledger li{display:flex;justify-content:space-between;gap:8px;opacity:.28;transition:opacity .4s ease,color .4s ease}
.hv-ledger li.is-on{opacity:1;color:var(--text-accent)}
.hv-ledger b{font-weight:500;color:var(--text-muted)}
@media(max-width:760px){.hv-ledger{display:none}}

/* The page under inspection is Halden, the landing demos' example site (public/examples/halden), at a small scale and in
   normal flow. hero-visual.mjs measures every position from these elements and scrolls .hv-scroll for the rooms row. */
.hv-scroll{left:0;right:0;top:24px;padding:0 18px 18px;transition:transform .7s var(--hv-ease)}
.hv-site{--hv-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--hv-ink:#221D18;--hv-sea:#23465C;--hv-line:#DDD3C5}
.hv-nav{display:flex;align-items:center;gap:10px;height:30px;margin:0 -18px;padding:0 18px;border-bottom:1px solid var(--hv-line)}
.hv-brand{display:flex;align-items:center;gap:4px;font:italic 500 12px/1 var(--hv-serif)}
.hv-brand svg{width:11px;height:11px}
.hv-menu{display:flex;gap:10px;margin-left:auto;font-size:7px;font-weight:500;color:#463F37}
.hv-book{padding:5px 8px;border-radius:99px;background:var(--hv-sea);color:#FBF8F3;font-size:6.5px;font-weight:600}
.hv-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;align-items:end;padding-top:14px}
.hv-eyebrow{margin:0 0 7px;font-size:7px;letter-spacing:.06em;font-variant-caps:all-small-caps;color:#6A6157}
.hv-h{margin:0;font:400 27px/1.02 var(--hv-serif);letter-spacing:-.02em;color:var(--hv-ink)}
.hv-h em{color:var(--hv-sea)}
.hv-p{margin:8px 0 0;font-size:7.5px;line-height:1.55;color:#463F37}
.hv-actions{display:flex;align-items:center;gap:9px;margin-top:11px}
.hv-cta{display:inline-grid;place-items:center;height:22px;padding:0 11px;border-radius:99px;background:var(--hv-sea);color:#FBF8F3;font-size:7px;font-weight:600;box-shadow:0 8px 14px -8px rgba(35,70,92,.7)}
.hv-link{font-size:7px;font-weight:600;color:var(--hv-sea)}
.hv-trust{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:3px 6px;border:1px dashed #d9894a;border-radius:5px;background:#FFF4E8;font-size:6.5px;font-weight:600;color:#355E40;transition:opacity .6s var(--hv-ease),transform .6s var(--hv-ease);transform-origin:left}
.hv-trust em{padding:2px 4px;border-radius:4px;background:#d9894a;color:#fff;font:600 5.5px/1 var(--font-mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase}
.hero-visual[data-fixes]:not([data-fixes~=cta]) .hv-trust{opacity:0;transform:translateY(3px) scaleX(.6)}
.hv-shot{height:168px;overflow:hidden;border-radius:2px;box-shadow:0 16px 30px -18px rgba(60,40,20,.55)}
.hv-shot img,.hv-room img{display:block;width:100%;height:100%;object-fit:cover}
.hv-rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}
.hv-room{display:grid;gap:5px;padding-bottom:7px;border:1px solid var(--hv-line);background:#FBF8F3}
.hv-room img{height:auto;aspect-ratio:4/3}
.hv-room b{padding:0 7px;font:400 9px/1.2 var(--hv-serif)}
.hv-reserve{justify-self:start;margin:0 7px;padding:4px 8px;border-radius:99px;background:var(--hv-sea);color:#FBF8F3;font-size:6px;font-weight:600}
.hv-anchor{transition:left .7s var(--hv-ease),top .7s var(--hv-ease)}
@media(prefers-reduced-motion:reduce){.hv-scroll,.hv-anchor{transition:none}}
.hv-bar{z-index:2}

/* Balance (2026-10-10, larger 2026-10-18): the page slab reads as large as the report card. It turns less (14° instead of 20°) and is scaled to the
   report's height; the core is scaled down slightly and moved right to keep the gaps even. Narrow screens keep their own layout. */
@media (min-width:761px){
  .hv-page-rig{left:80px;top:118px;transform:rotateY(12deg) rotateX(3deg) scale(1.27);transform-origin:50% 50%}
  .hv-core{left:560px;transform:scale(.76);transform-origin:50% 50%}
  .hv-report{left:766px}
}

@media(prefers-reduced-motion:reduce){.hv-glyph{transition:none}}

/* ─── Deconstruct, understand, reconstruct (2026-10-22) ──────────────────────────────────────────────────────────────────────
   The page is read flat and face on (data-form unset), then turns into depth and separates into four layers the extension reads:
   layout and surfaces, assets, type and components (data-form=3d). Values travel from the layers to the analysis, the two findings
   trace back, the layers settle, and the page is face on again with the two fixes previewed. hero-visual.mjs clones the page into
   the four .hv-layer planes and sets the attributes; the union of the planes is the page, so the flat page is always the planes. */
.hv-plate{display:none}
.hv-page-rig{height:340px;transition:transform 1.4s var(--ease-fluid)}
/* Where the page sits in each act: alone and large in the middle (page), aside and apart in depth (apart), and face on beside the
   report's side note (note, also the resting frame without the script). */
@media (min-width:761px){
  .hv-page-rig{left:96px;top:108px;transform:translate(130px,0) scale(1.2)}
  .hero-visual[data-act=page] .hv-page-rig{transform:translate(244px,0) scale(1.3)}
  .hero-visual[data-form="3d"] .hv-page-rig{transform:translate(-40px,34px) rotateX(52deg) rotateZ(-30deg) scale(.94)}
}
@media (max-width:760px){
  .hero-visual{--hv-h:1120;aspect-ratio:560/1120}
  .hv-stage,.hv-wires{height:1120px}
  .hv-page-rig{transform:none}
  /* Alone, the page sits where it sits beside the report (the top), a little larger: no empty band between the buttons and it. */
  .hero-visual[data-act=page] .hv-page-rig{transform:translate(0,26px) scale(1.15)}
  .hero-visual[data-form="3d"] .hv-page-rig{transform:translate(-40px,120px) rotateX(50deg) rotateZ(-22deg) scale(.74)}
  .hv-core{top:418px}
  .hv-report{top:676px}
}
.hv-page,.hv-frame{transform-style:preserve-3d}
.hv-frame{transition:background 1s var(--ease-fluid),border-color 1s var(--ease-fluid),box-shadow 1s var(--ease-fluid)}
.hero-visual[data-form="3d"] .hv-frame{border-color:color-mix(in srgb,var(--accent) 30%,transparent);background:none;box-shadow:none}

/* A smaller photo and wider room cards: the whole page fits the frame, so nothing scrolls. */
.hv-shot{height:108px}
.hv-room img{aspect-ratio:2/1}
.hv-copy{position:relative}
.hv-trust{position:absolute;left:0;top:calc(100% + 2px);margin:0;padding:2px 6px;white-space:nowrap} /* fits the 18px gap above the room cards */
.hv-trust em{padding:1px 4px}
.hv-fixed{display:none}
.hero-visual:is(:not([data-fixes]),[data-fixes~=reserve]) .hv-reserve .hv-was{display:none}
.hero-visual:is(:not([data-fixes]),[data-fixes~=reserve]) .hv-reserve .hv-fixed{display:inline-block;animation:hv-fix-in var(--motion-reveal) var(--ease-enter)}
/* The fix's ring fades in (opacity) rather than switching. */
.hv-reserve{position:relative}
.hv-reserve::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 1px #FBF8F3,0 0 0 2px #d9894a;opacity:0;transition:opacity var(--motion-reveal) var(--ease-enter)}
.hero-visual:is(:not([data-fixes]),[data-fixes~=reserve]) .hv-reserve::after{opacity:1}
.hv-reserve .hv-was{display:inline-block;animation:hv-fix-in var(--motion-reveal) var(--ease-enter)}
.hero-visual[data-fixes]:not([data-fixes~=cta]) .hv-trust{transition:opacity 300ms var(--ease-exit),transform 300ms var(--ease-exit)}
@keyframes hv-fix-in{from{opacity:0;transform:translateY(2px)}}
/* What a fix changed reads as changed (2026-10-23): green, the success colour, never the orange of inspecting. The changed
   element gets a green ring and a tag ("Fix 1 · …", placed by hero-visual.mjs) names the fix while it lands, one at a time. On the improved page at the end, one tag sums them up. */
.hv-reserve::after{box-shadow:0 0 0 1px #FBF8F3,0 0 0 2px #3E9A64}
.hv-trust{border:1px solid #3E9A64;background:#EDF7F0;color:#24563A}
.hv-trust em{background:#3E9A64}
.hv-change{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:5px;padding:3px 7px 3px 5px;border-radius:5px;border:1px solid rgba(95,191,134,.6);
  background:#162019;color:#f4faf6;font:500 7.5px/1.2 var(--font-mono);white-space:nowrap;box-shadow:0 6px 14px rgba(0,0,0,.35);pointer-events:none;
  opacity:0;translate:0 3px;transition:opacity var(--motion-reveal) var(--ease-enter),translate var(--motion-reveal) var(--ease-enter)}
.hv-change b{padding:2px 4px;border-radius:3px;background:#3E9A64;color:#fff;font-weight:600}
.hv-change.is-on{opacity:1;translate:none}
/* The hand-off: the report's action ends as "Prompt copied". */
.hv-apply [data-a=copied]{border:1px solid rgba(169,201,174,.5);background:rgba(169,201,174,.12);color:var(--hv-fix);opacity:0}
.hv-apply [data-a=copied] svg{width:11px;height:11px}
.hv-report[data-apply=copied] [data-a=copied]{opacity:1}.hv-report[data-apply=copied] :is([data-a=on],[data-a=off]){opacity:0}

/* The layers: one plane per kind of thing the extension reads, stacked on the page. */
.hero-visual.has-layers .hv-frame>.hv-site{visibility:hidden}
.hv-layers{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.hv-layer{position:absolute;inset:0;border-radius:14px;transform-style:preserve-3d;transform:translateZ(0);transition:transform 1.1s var(--ease-fluid) calc(var(--i) * 90ms),opacity .6s var(--ease-fluid),box-shadow 1s var(--ease-fluid)}
.hv-layer>.hv-site{background:transparent}
.hv-layer .hv-sheen{display:none}
.hero-visual[data-form="3d"] .hv-layer{transform:translateZ(var(--lz));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 34%,transparent)}
.hero-visual[data-form="3d"] .hv-layer:not(.hv-layer--layout){background:color-mix(in srgb,var(--surface-base) 18%,transparent)}
.hv-layer--layout{--i:0;--lz:0px}.hv-layer--assets{--i:1;--lz:52px}.hv-layer--type{--i:2;--lz:104px}.hv-layer--components{--i:3;--lz:156px}
/* Layout and surfaces: the page's backgrounds, borders and boxes, with the column grid it sits on. */
.hv-layer--layout>.hv-site{background:#F4EFE7}
.hv-layer--layout .hv-scroll *{color:transparent!important}
.hv-layer--layout :is(img,.hv-brand svg){visibility:hidden}
.hv-layer--layout :is(.hv-cta,.hv-book,.hv-reserve){background:transparent;box-shadow:inset 0 0 0 1px #23465C55}
.hv-layer--layout .hv-shot{box-shadow:inset 0 0 0 1px #6A615744}
.hv-layer--layout .hv-trust{visibility:hidden}
.hv-layer--layout>.hv-site::after{content:'';position:absolute;inset:24px 18px 0;opacity:0;transition:opacity .6s var(--ease-fluid) .5s;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--accent) 12%,transparent) 0 calc((100% - 66px) / 12),transparent 0 calc((100% - 66px) / 12 + 6px))}
.hero-visual[data-form="3d"] .hv-layer--layout>.hv-site::after{opacity:1}
/* Assets, type and components: only their own things show; the rest of the page keeps its place, unseen. */
.hv-layer:is(.hv-layer--assets,.hv-layer--type,.hv-layer--components)>.hv-site{visibility:hidden}
.hv-layer--assets :is(img,.hv-brand svg){visibility:visible}
.hv-layer--type :is(.hv-brand,.hv-menu,.hv-eyebrow,.hv-h,.hv-p,.hv-link,.hv-room b){visibility:visible}
.hv-layer--type .hv-brand svg{visibility:hidden}
.hv-layer--components :is(.hv-book,.hv-cta,.hv-reserve,.hv-trust){visibility:visible}
.hero-visual[data-fixes]:not([data-fixes~=cta]) .hv-layer--components .hv-trust{visibility:hidden}
/* The three Reserve buttons are recognized as one repeated component. */
.hero-visual[data-pattern] .hv-layer--components .hv-reserve{box-shadow:0 0 0 1.5px var(--accent),0 0 12px color-mix(in srgb,var(--accent) 45%,transparent)}
/* While the findings are weighed, the layers without one step back. */
.hero-visual[data-phase=process] .hv-layer:not(.hv-layer--components),.hero-visual[data-phase=complete] .hv-layer:not(.hv-layer--components){opacity:.45}
/* Each layer names itself, turned to face the viewer (the inverse of the rig's turn). */
.hv-layer-tag{position:absolute;right:-6px;top:50%;display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:7px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:#1b1b1b;color:var(--text-primary);font:500 11px/1.2 var(--font-mono);white-space:nowrap;
  transform-origin:0 50%;transform:translateX(100%) rotateZ(30deg) rotateX(-52deg);opacity:0;transition:opacity .5s var(--ease-fluid)}
.hv-layer-tag b{font-weight:600;color:var(--text-accent)}
.hero-visual[data-form="3d"][data-tags] .hv-layer-tag{opacity:1;transition-delay:calc(var(--i) * 120ms)}
@media (max-width:760px){.hv-layer-tag{transform:translateX(100%) rotateZ(22deg) rotateX(-50deg);font-size:15px}.hv-layer-tag span{display:none}}
/* Anchors ride on their layer. */
.hv-anchor{transition:left .7s var(--hv-ease),top .7s var(--hv-ease),transform 1.1s var(--ease-fluid)}
.hero-visual[data-form="3d"] .hv-anchor[data-anchor=img]{transform:translateZ(53px)}
.hero-visual[data-form="3d"] .hv-anchor[data-anchor=h1]{transform:translateZ(105px)}
.hero-visual[data-form="3d"] :is(.hv-anchor[data-anchor=cta],.hv-anchor[data-anchor=reserve]){transform:translateZ(157px)}
/* While the page turns, the wires step out of the way and are redrawn for where things now are. */
.hv-wires{transition:opacity .4s var(--ease-fluid)}
.hero-visual[data-moving] .hv-wires,.hero-visual[data-moving] .hv-particles{opacity:0}
@media (prefers-reduced-motion:reduce){.hv-page-rig,.hv-layer,.hv-layer-tag,.hv-anchor,.hv-wires{transition:none}}

/* ─── Three acts (2026-10-22, second staging) ─────────────────────────────────────────────────────────────────────────────────
   page: the page alone (no core, no report). apart: the page aside in depth; the report, then the core, come in (data-panel).
   note: the page face on and the report as a smaller side note beside it; the core has left. No data-act (no script) is note.
   Enter with --ease-enter over --motion-reveal; leave faster with --ease-exit; only transform (translate, scale) and opacity move. */
.hv-report{translate:75px 0;scale:.78;transition:opacity var(--motion-reveal) var(--ease-enter),translate .9s var(--ease-fluid) .5s,scale .9s var(--ease-fluid) .5s}
.hero-visual:is([data-act=page],[data-act=apart]) .hv-report{translate:none;scale:none;transition:opacity var(--motion-reveal) var(--ease-enter),translate var(--motion-reveal) var(--ease-enter)}
.hero-visual[data-panel=out] .hv-report{opacity:0;transition:opacity 240ms var(--ease-exit)}
.hero-visual[data-panel=out]:not([data-act=note]) .hv-report{translate:48px 0}
.hv-core{opacity:0;scale:.92;transition:opacity 200ms var(--ease-exit),scale 200ms var(--ease-exit)}
.hero-visual[data-act=apart]:not([data-panel=out]) .hv-core{opacity:1;scale:none;transition:opacity var(--motion-reveal) var(--ease-enter) 180ms,scale var(--motion-reveal) var(--ease-enter) 180ms}
@media (max-width:760px){
  .hv-report{transform-origin:50% 0;translate:0 -200px;scale:.92}
  .hero-visual[data-panel=out]:not([data-act=note]) .hv-report{translate:0 40px}
}
/* The wires into and out of the core belong to the analysis; outside it only the fixes' traces remain. */
.hero-visual:not([data-act=apart]) :is(.hv-in,.hv-out){opacity:0}
/* The page moves aside first, then its layers lift one after another; they settle top first. Anchors ride with their layer. */
.hv-layer{transition:transform 1s var(--ease-fluid) calc((3 - var(--i)) * 70ms),opacity .6s var(--ease-fluid),box-shadow 1s var(--ease-fluid)}
.hero-visual[data-form="3d"] .hv-layer{transition-delay:calc(450ms + var(--i) * 90ms),0s,0s}
.hv-anchor[data-anchor=img]{--i:1}.hv-anchor[data-anchor=h1]{--i:2}.hv-anchor:is([data-anchor=cta],[data-anchor=reserve]){--i:3}
.hv-anchor{transition:left .7s var(--hv-ease),top .7s var(--hv-ease),transform 1s var(--ease-fluid) calc((3 - var(--i,0)) * 70ms)}
.hero-visual[data-form="3d"] .hv-anchor{transition-delay:0s,0s,calc(450ms + var(--i,0) * 90ms)}
.hero-visual[data-instant] *,.hero-visual[data-instant] *::before,.hero-visual[data-instant] *::after{transition:none!important}
/* In the last act the outline names each fix, so the cursor carries no tag of its own. */
.hv-cursor-tag{transition:opacity var(--transition-fast)}.hero-visual[data-act=note] .hv-cursor-tag{opacity:0}

/* Side by side from 1200px (2026-10-23): text left, the stage right; stacked below, or wherever the reader picks the stacked view
   (data-layout=stack on .hero, set by the layout control). The view test sits in :where(…) so it adds no specificity:
   the copy's rules carry .hero .hero-copy to win over narrative.css (it loads after this file), the stage keeps its own state order. */
@media (min-width:1200px){
  .hero:where(:not([data-layout=stack])){grid-template-columns:minmax(0,1fr) minmax(0,1fr);justify-items:stretch;gap:64px;padding-top:72px}
  .hero:where(:not([data-layout=stack])) .hero-copy{text-align:left;max-width:none;container-type:inline-size}
  /* The headline's widest line ("product playground.") is about 9.5em: it is as large as the column allows and never runs under the stage. */
  .hero:where(:not([data-layout=stack])) .hero-copy .hero-title{font-size:min(10.4cqi,88px)}
  /* The code line under the headline: the assignment, then its tags on a row of their own, wrapping inside the column. */
  .hero:where(:not([data-layout=stack])) .hero-copy .ht-diff{flex-direction:column;align-items:flex-start;max-width:100cqi}
  .hero:where(:not([data-layout=stack])) .hero-copy .ht-tags{flex-wrap:wrap}
  .hero:where(:not([data-layout=stack])) .hero-copy .hero-summary{margin:101px 0 0;max-width:none}
  .hero:where(:not([data-layout=stack])) .hero-copy .hero-description{max-width:56ch;margin-inline:0;font-size:var(--text-lg);line-height:1.6}
  /* The two calls to action keep one row: the large button at its base size (narrative.css grows it for the centred hero). */
  .hero:where(:not([data-layout=stack])) .hero-copy .button-large{min-height:var(--control-xl);padding-inline:var(--space-5);font-size:var(--text-xl);gap:var(--space-2)}
  .hero:where(:not([data-layout=stack])) .hero-copy .button-large :is(.button-icon,.button-icon .be-icon){width:18px;height:18px;min-width:18px;min-height:18px}
  .hero:where(:not([data-layout=stack])) .hero-copy .action-row{justify-content:flex-start;flex-wrap:wrap}
  .hero:where(:not([data-layout=stack])) .hero-copy .hero-chips{justify-content:flex-start}
  :where(.hero:not([data-layout=stack])) .hero-product{max-width:none}

  /* The stage is 1.25:1 (880 × 704) on a 32px margin. Page: the page alone fills the middle. Apart: the page in depth at the top left,
     the analysis (core over its ledger) centred in the gap below it, the report flat at the right; ledger and report share a bottom
     edge. Note: the page face on at the left and the smaller report beside it, on one centre line. */
  /* Zoom: the page alone fills the column (its slab on the column's edges); apart and note, the 32px margin closes to the edges. */
  :where(.hero:not([data-layout=stack])) .hero-visual{--hv-w:880;--hv-h:704;--hv-zoom:1.07;aspect-ratio:880/704}
  :where(.hero:not([data-layout=stack])) .hero-visual[data-act=page]{--hv-zoom:1.2}
  :where(.hero:not([data-layout=stack])) .hero-visual:is([data-form="3d"],[data-act=note]){--hv-zoom:1.07}
  :where(.hero:not([data-layout=stack])) :is(.hv-stage,.hv-wires){width:880px;height:704px}
  :where(.hero:not([data-layout=stack])) .hv-floor{top:420px;left:-120px;right:-120px}
  :where(.hero:not([data-layout=stack])) .hv-page-rig{left:72px;top:182px;transform:scale(1.18)}
  :where(.hero:not([data-layout=stack])) .hero-visual[data-act=page] .hv-page-rig{transform:translate(148px,0) scale(1.6)}
  :where(.hero:not([data-layout=stack])) .hero-visual[data-form="3d"] .hv-page-rig{transform:translate(-8px,-84px) rotateX(52deg) rotateZ(-30deg) scale(.82)}
  :where(.hero:not([data-layout=stack])) .hv-core{left:264px;top:324px}
  :where(.hero:not([data-layout=stack])) .hv-report{left:516px;top:269px;transform:none;translate:73px -114px}
}

/* The layout control: the extension's presentation switch (popup.css .panel-presentation: a label and tonal choices on an input
   track), at the hero's top right on the shell edge, shown while the hero is pointed at or focused. The change itself is a view
   transition (landing.mjs). Only where the two views differ (1200px up). */
.hero-view{display:none}
@media (min-width:1200px){
  .hero-view{position:absolute;top:var(--space-6);right:0;z-index:2;display:flex;align-items:center;gap:var(--space-3);
    opacity:0;translate:0 calc(var(--nudge) * -1);pointer-events:none;
    transition:opacity var(--motion-panel) var(--ease-exit) 240ms,translate var(--motion-panel) var(--ease-exit) 240ms}
  .hero:is(:hover,:focus-within) .hero-view{opacity:1;translate:none;pointer-events:auto;transition-timing-function:var(--ease-enter);transition-delay:0s}
  .hero-view__track{display:flex;gap:var(--space-1);padding:var(--space-1);border-radius:var(--radius-control);background:var(--surface-input)}
  .hero-view__opt{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-md);padding:var(--space-1) var(--space-3);
    border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);font:500 var(--text-md)/1 var(--font-sans);cursor:pointer;
    transition:background var(--motion-state) var(--ease-fluid),color var(--motion-state) var(--ease-fluid)}
  .hero-view__opt .be-icon{width:var(--icon-md);height:var(--icon-md);flex:none}
  .hero-view__opt:hover{background:var(--surface-hover)}
  .hero-view__opt[aria-pressed=true]{color:var(--button-tonal-text);background:var(--button-tonal-bg);border-color:var(--button-tonal-border);cursor:default}
  .hero-view__opt[aria-pressed=true]:hover{background:var(--button-tonal-bg-hover)}
  .hero-view__opt:focus-visible{outline:2px solid var(--border-selected);outline-offset:2px}
  /* The switch: the copy and the stage each morph from where they were to where they land. */
  .hero .hero-copy{view-transition-name:hero-copy}
  .hero .hero-product{view-transition-name:hero-stage}
  ::view-transition-group(hero-copy),::view-transition-group(hero-stage){animation-duration:var(--motion-reveal);animation-timing-function:var(--ease-enter)}
  ::view-transition-old(hero-copy),::view-transition-new(hero-copy),::view-transition-old(hero-stage),::view-transition-new(hero-stage){animation-duration:calc(var(--motion-reveal) * .6);animation-timing-function:var(--ease-fluid)}
}
@media (prefers-reduced-motion:reduce){.hero-view,.hero-view__opt{transition:none}}