/* Landing narrative: hero, product stage, roles, exports, section rules and the inspect mode. Tokens only. */



@media(max-width:1000px){
        }
@media(max-width:600px){
        }
.inline-link{color:var(--text-accent);text-decoration:underline;text-underline-offset:3px}
.inline-link:hover{color:var(--text-primary)}

/* Product stage: one sticky browser frame, five chapters scroll past it. */
.stage{padding-block:var(--space-16) var(--space-10)}
.stage-head{max-width:none;margin-bottom:var(--space-10)}
.stage-head h2{font-size:clamp(28px,18px + 1.8vw,40px);font-weight:500;line-height:1.12;letter-spacing:-.04em;text-wrap:balance}
.stage-head h2 span{color:var(--accent)}
.stage-track{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.45fr);gap:clamp(32px,5vw,76px);align-items:start}
.stage-chapters{list-style:none;margin:0;padding:0}
.chapter{scroll-margin-top:96px;min-height:min(72vh,680px);display:flex;flex-direction:column;justify-content:center;gap:var(--space-4);padding-block:var(--space-8);opacity:.28;transition:opacity 420ms var(--ease-fluid)}
.chapter.is-active{opacity:1}
.chapter .eyebrow{position:relative;margin:0;gap:var(--space-3);font:500 var(--text-md)/1.3 var(--font-sans);letter-spacing:0;color:var(--text-secondary)}
.ch-num{font:500 var(--text-md) var(--font-mono);color:var(--accent)}
.chapter .eyebrow em{font-style:normal;padding:1px 7px;border:1px solid var(--border-selected);border-radius:var(--radius-full);font-size:var(--text-xs);color:var(--text-accent)}
.chapter.is-active h3{color:var(--text-primary)}
.chapter.is-active h3 span{color:var(--accent)}
.chapter h3{font-size:clamp(28px,18px + 1.8vw,42px);font-weight:500;line-height:1.1;letter-spacing:-.045em}
.chapter h3 span{color:var(--accent)}
.chapter>p:not(.eyebrow){color:var(--text-secondary);line-height:1.75;max-width:42ch}
.chapter code{align-self:flex-start;padding:var(--space-2) var(--space-3);border:1px solid var(--border-standard);border-radius:var(--radius-sm);background:var(--surface-input);font:var(--text-sm) var(--font-mono);color:var(--text-accent)}
.stage-sticky{position:sticky;top:128px}
.stage-frame{min-width:0;width:min(100%,max(640px,calc((100svh - 300px) * 1.3)));margin-inline:auto}
.stage-rail{position:relative;display:flex;gap:var(--space-1);margin-bottom:var(--space-4);border-bottom:1px solid var(--border-standard);overflow-x:auto;scrollbar-width:none}
.stage-rail a{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;padding-inline:var(--space-3);font-size:var(--text-sm);color:var(--text-muted);text-decoration:none;white-space:nowrap;transition:color var(--transition-fast)}
.stage-rail a span{font:11px var(--font-mono);letter-spacing:.08em;opacity:.8} /* .7 measured 4.27:1; .8 keeps the numbers quieter than the labels and above 4.5:1 */
.stage-rail a:hover,.stage-rail a[aria-current]{color:var(--text-primary)}
.stage-rail a[aria-current] span{color:var(--accent);opacity:1}
.stage-rail a:focus-visible{outline:2px solid var(--border-focus);outline-offset:-2px;border-radius:var(--radius-sm)}
/* Rail indicator: slides under the current chapter, the horizontal twin of the reading spine. */
.stage-progress{position:absolute;left:0;bottom:-1px;width:var(--ind-w,0);height:2px;border-radius:2px;background:var(--accent);transform:translateX(var(--ind-x,0));transition:transform 420ms var(--ease-fluid),width 420ms var(--ease-fluid)}
.stage-demos{display:grid}
/* Layer switch: the incoming demo is scanned in over the outgoing one (stage.mjs adds the classes). */
.stage-demos{position:relative}
.stage-demos>.demo-mount{grid-area:1/1;min-width:0;opacity:0;visibility:hidden}
.stage-demos>.demo-mount.is-active{opacity:1;visibility:visible;z-index:1}
.stage-demos>.demo-mount.is-leaving{opacity:1;visibility:visible;z-index:0}
.stage-demos>.demo-mount.is-entering{animation:scan-in-down 720ms cubic-bezier(.65,0,.35,1) both}
.stage[data-dir=up] .stage-demos>.demo-mount.is-entering{animation-name:scan-in-up}
@keyframes scan-in-down{from{clip-path:inset(0 0 100% 0 round 18px)}to{clip-path:inset(0 0 0 0 round 18px)}}
@keyframes scan-in-up{from{clip-path:inset(100% 0 0 0 round 18px)}to{clip-path:inset(0 0 0 0 round 18px)}}

/* The frame reads as a selected layer in a design tool: outline, four handles and its live size. */
.stage-select{grid-area:1/1;position:relative;z-index:2;pointer-events:none;border-radius:18px;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 70%,transparent)}
.stage-select>i{position:absolute;width:9px;height:9px;border:1.5px solid var(--accent);border-radius:2px;background:var(--surface-base)}
.stage-select>i:nth-child(1){left:-4.5px;top:-4.5px}.stage-select>i:nth-child(2){right:-4.5px;top:-4.5px}
.stage-select>i:nth-child(3){left:-4.5px;bottom:-4.5px}.stage-select>i:nth-child(4){right:-4.5px;bottom:-4.5px}
.stage-size{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);padding:3px 8px;border-radius:var(--radius-sm);background:var(--accent);color:var(--text-inverse);font:600 11px/1.3 var(--font-mono);white-space:nowrap}
.stage-scan-wrap{position:absolute;inset:0;overflow:hidden;border-radius:18px}
.stage-scan{position:absolute;inset:0;opacity:0;transform:translateY(-100%)}
.stage-scan::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);box-shadow:0 0 18px 2px color-mix(in srgb,var(--accent) 60%,transparent)}
.stage-scan::before{content:'';position:absolute;left:0;right:0;bottom:0;height:72px;background:linear-gradient(to top,color-mix(in srgb,var(--accent) 16%,transparent),transparent)}
.stage-scan b{position:absolute;left:16px;bottom:8px;padding:3px 8px;border-radius:var(--radius-sm);background:var(--accent);color:var(--text-inverse);font:600 11px/1.3 var(--font-mono)}
.stage.is-scanning .stage-scan{animation:scan-line-down 720ms cubic-bezier(.65,0,.35,1) both}
.stage[data-dir=up] .stage-scan{transform:translateY(100%)}
.stage[data-dir=up] .stage-scan::after{top:0;bottom:auto}
.stage[data-dir=up] .stage-scan::before{top:0;bottom:auto;background:linear-gradient(to bottom,color-mix(in srgb,var(--accent) 16%,transparent),transparent)}
.stage[data-dir=up] .stage-scan b{top:8px;bottom:auto}
.stage.is-scanning[data-dir=up] .stage-scan{animation-name:scan-line-up}
@keyframes scan-line-down{0%{opacity:1;transform:translateY(-100%)}92%{opacity:1}100%{opacity:0;transform:translateY(0)}}
@keyframes scan-line-up{0%{opacity:1;transform:translateY(100%)}92%{opacity:1}100%{opacity:0;transform:translateY(0)}}
.stage .browser-chrome,.stage .demo-status{display:none}

@media(max-width:1000px){
  .stage-track{grid-template-columns:1fr}
  .stage-sticky{display:none}
  .chapter{min-height:0;opacity:1;padding-block:var(--space-8) var(--space-4)}
  .chapter>.demo-mount{margin-top:var(--space-4)}
}
@media(prefers-reduced-motion:no-preference) and (min-width:1001px) and (pointer:fine){ /* scroll-driven transforms stay off touch screens: they re-composite the demo on every scroll frame */
  @supports(animation-timeline:view()){
    .hero-product{animation:hero-recede linear both;animation-timeline:view();animation-range:exit 5% exit 85%}
    .stage-frame{animation:stage-rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    @keyframes hero-recede{to{opacity:.3;transform:translateY(-48px) scale(.95)}}
    @keyframes stage-rise{from{opacity:.65;transform:translateY(64px) scale(.95)}}
  }
}
@media(prefers-reduced-motion:reduce){.stage-demos>.demo-mount.is-entering,.stage.is-scanning .stage-scan{animation:none}.chapter,.stage-demos>.demo-mount,.spine-node,.stage-progress{transition:none}}

/* Hero: tighter copy block so the product scene starts higher on laptop-height screens. */
@media(min-width:1001px){
  .hero{padding-top:80px;padding-bottom:64px;gap:40px}
  .hero h1{font-size:clamp(44px,3.9vw,58px)}
  .hero-summary{margin-top:20px}
  .hero-product{margin-top:0}
}

/* Roles: tabbed outputs per audience. Without JS every panel shows. */
.roles-tabs{position:relative;display:inline-flex;gap:var(--space-1);padding:4px;margin-bottom:var(--space-10);border:1px solid var(--border-standard);border-radius:var(--radius-control);background:var(--surface-input)}
.roles-ind{position:absolute;left:0;top:4px;bottom:4px;width:0;border-radius:var(--radius-sm);background:var(--surface-selected);box-shadow:inset 0 0 0 1px var(--border-selected);transition:transform 360ms var(--ease-fluid),width 360ms var(--ease-fluid)}
.roles-fill{position:absolute;inset-inline:var(--space-4);bottom:3px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left center}
.roles-tabs button{position:relative;min-height:44px;padding-inline:var(--space-5);border:0;border-radius:var(--radius-sm);background:none;color:var(--text-secondary);font:inherit;cursor:pointer;transition:color var(--transition-fast)}
.roles-tabs button:hover,.roles-tabs button[aria-selected=true]{color:var(--text-primary)}
.roles-tabs button:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
.role-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,72px);align-items:center;min-height:340px}
.role-panel+.role-panel{margin-top:var(--space-12)}
.role-panel[hidden]{display:none}
.role-panel h3{font-size:clamp(26px,16px + 1.6vw,38px);font-weight:500;line-height:1.12;letter-spacing:-.04em;margin-bottom:var(--space-6)}
.role-panel>div>ul{margin:0 0 var(--space-6);padding:0;list-style:none;display:grid;gap:var(--space-4)}
.role-panel>div>ul>li{position:relative;padding-left:var(--space-6);color:var(--text-secondary);line-height:1.65}
.role-panel>div>ul>li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:7px;border:1.5px solid var(--accent);border-radius:2px}
.role-output{margin:0;border:1px solid var(--border-standard);border-radius:var(--radius-card);background:var(--surface-elevated);overflow:hidden;box-shadow:var(--shadow-floating);transition:border-color var(--transition-fast),transform 300ms var(--ease-fluid)}
.role-output:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.role-output figcaption,.x-code figcaption{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:44px;padding:0 var(--space-3) 0 var(--space-5);border-bottom:1px solid var(--border-standard);background:var(--surface-input)}
.x-file{display:inline-flex;align-items:center;gap:var(--space-2);font:var(--text-sm) var(--font-mono);color:var(--text-secondary)}
.x-file::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent)}
.x-copy{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-width:88px;min-height:32px;padding:0 var(--space-3);border:1px solid var(--border-standard);border-radius:var(--radius-sm);background:var(--surface-elevated);color:var(--text-primary);font:500 var(--text-sm) var(--font-sans);cursor:pointer;transition:border-color var(--transition-fast),background var(--transition-fast)}
.x-copy:hover{border-color:var(--border-strong);background:var(--surface-hover)}
.x-copy:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
.role-output pre,.x-code pre{margin:0;padding:var(--space-5);font:var(--text-base)/1.75 var(--font-mono);color:var(--text-secondary);white-space:pre;overflow:auto;tab-size:2}
.tk-c{color:var(--text-muted)}.tk-k{color:var(--text-primary)}.tk-v{color:var(--text-accent)}
.ro-finding b{display:block;font-weight:500;color:var(--text-primary)}
.ro-finding small{display:block;font:var(--text-sm)/1.5 var(--font-sans);color:var(--text-secondary)}
.ro-aa{display:grid;place-items:center;height:56px;border-radius:var(--radius-sm);background:#F4EFE7;color:#221D18;font:28px "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
.ro-pair{display:flex;height:56px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border-standard)}
.ro-pair i{flex:1}
.ro-btn{display:grid;place-items:center;height:40px;border-radius:999px;background:#23465C;color:#FBF8F3;font:600 11px/1 "Avenir Next",Avenir,var(--font-sans);white-space:nowrap}
.ro-pass,.ro-sev{padding:2px 8px;border-radius:var(--radius-full);font:600 11px/1.5 var(--font-mono);font-style:normal}
.ro-pass{background:color-mix(in srgb,var(--text-success) 16%,transparent);color:var(--text-success)}
.ro-sev{background:color-mix(in srgb,var(--text-warning) 16%,transparent);color:var(--text-warning)}
.ro-finding{display:grid;gap:var(--space-2);padding:var(--space-4);border-radius:var(--radius-control);border-left:2px solid var(--text-warning);background:var(--surface-input)}
.ro-meta{display:flex;align-items:center;gap:var(--space-2)}
.ro-meta code{font:var(--text-sm) var(--font-mono);color:var(--text-secondary)}
.ro-prompt{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-2);padding:var(--space-3) var(--space-4);border:1px solid var(--border-standard);border-radius:var(--radius-control);font-size:var(--text-sm);color:var(--text-secondary)}
.ro-prompt b{font-weight:500;color:var(--text-primary)}
/* Role scenes (roles-visual.mjs): each output is a short scene on a miniature Halden page, told in the extension's own marks: a
   selection with handles and a spec tag (Designers), crop marks and values lifting into code (Developers), a scan, a pin and a
   dotted preview outline (Product teams). Flat and close-up, unlike the hero's 3D page and extraction node. The markup is the
   last frame, so without JS or with reduced motion the result simply shows; while a scene plays (.is-playing) anything not yet
   reached (.is-in) waits in its "before" state. */
.rv{container-type:inline-size}
.rv-chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:2px var(--space-3);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:var(--radius-full);color:var(--text-accent);font:500 var(--text-base)/1.5 var(--font-mono);transition:opacity 320ms var(--ease-fluid),transform 320ms var(--ease-fluid)}
.rv-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--text-success)}
.rv-stage{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--space-4);align-items:center;padding:var(--space-4)}
.rv-dev .rv-stage{grid-template-columns:minmax(0,1fr)}
@container (max-width:540px){.rv-stage{grid-template-columns:minmax(0,1fr)}}
/* The canvas: the page sits on a dotted artboard, the way a design tool shows a frame. */
.rv-board{position:relative;padding:30px 18px 38px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:radial-gradient(circle,rgba(255,255,255,.08) 1px,transparent 1.5px) 0 0/12px 12px,var(--surface-input)}
.rv-page{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:14px 16px 16px;border-radius:8px;background:#F4EFE7;color:#221D18;font-family:"Avenir Next",Avenir,"Segoe UI","Helvetica Neue",Arial,sans-serif;box-shadow:0 1px 2px rgba(0,0,0,.3),0 16px 32px -20px rgba(0,0,0,.8)}
.rv-mark{display:block;font:italic 500 12px/1 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
.rv-h{display:block;font:400 22px/1.06 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;letter-spacing:-.022em;text-wrap:balance}
.rv-h em{color:#23465C}
.rv-p{display:block;max-width:34ch;color:#463F37;font-size:12px;line-height:1.5}
/* 15px is half the button's height: the same pill as 999px, but a radius the morph can travel smoothly. */
.rv-btn{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:15px;background:#23465C;color:#FBF8F3;font-size:10.5px;font-weight:600;white-space:nowrap;transition:border-radius 900ms var(--ease-fluid)}
.rv-design.is-playing .rv-btn:not(.is-in){border-radius:4px}
/* Designers: room between the parts for the spec tag above and the measured value below, so neither covers the copy. */
.rv-design .rv-page{gap:24px;padding-block:12px 16px}
@container (min-width:541px){.rv-product .rv-stage{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
.rv-cut,.rv-cut *{transition:none!important}
.x-copy.is-demo{border-color:var(--accent);color:var(--text-accent)}
@media(min-width:1001px){.role-panel{min-height:500px}}

/* Selection: outline, four handles, a spec tag above and a measured value below. */
.rv-sel{position:absolute;left:0;top:0;z-index:2;width:var(--w,0);height:var(--h,0);transform:translate(var(--x,0),var(--y,0));border:1px solid var(--accent);border-radius:2px;background:color-mix(in srgb,var(--accent) 7%,transparent);opacity:0;pointer-events:none;
  transition:transform 560ms var(--ease-fluid),width 560ms var(--ease-fluid),height 560ms var(--ease-fluid),opacity 220ms ease}
.rv[data-sel] .rv-sel{opacity:1}
.rv-sel>i{position:absolute;width:7px;height:7px;border:1.5px solid var(--accent);border-radius:1px;background:var(--surface-base)}
.rv-sel>i:nth-child(1){left:-4px;top:-4px}.rv-sel>i:nth-child(2){right:-4px;top:-4px}.rv-sel>i:nth-child(3){left:-4px;bottom:-4px}.rv-sel>i:nth-child(4){right:-4px;bottom:-4px}
.rv-tag,.rv-metric{position:absolute;left:-1px;padding:2px 7px;border-radius:5px;font:600 var(--text-xs)/1.4 var(--font-mono);white-space:nowrap}
.rv-tag{bottom:calc(100% + 4px);background:var(--accent);color:var(--text-inverse)}
.rv-metric{top:calc(100% + 4px);border:1px solid var(--border-standard);background:var(--surface-elevated);color:var(--text-accent)}
.rv-metric:empty,.rv-tag:empty{display:none}
/* Crop marks (an asset or a value being picked) and the dotted outline of a previewed change. */
.rv-crop{border-color:transparent;background:color-mix(in srgb,var(--accent) 6%,transparent)}
.rv-crop>i{width:10px;height:10px;border:0;border-radius:0;background:none}
.rv-crop>i:nth-child(1){left:-6px;top:-6px;border-top:1.5px solid var(--accent);border-left:1.5px solid var(--accent)}
.rv-crop>i:nth-child(2){right:-6px;top:-6px;border-top:1.5px solid var(--accent);border-right:1.5px solid var(--accent)}
.rv-crop>i:nth-child(3){left:-6px;bottom:-6px;border-bottom:1.5px solid var(--accent);border-left:1.5px solid var(--accent)}
.rv-crop>i:nth-child(4){right:-6px;bottom:-6px;border-bottom:1.5px solid var(--accent);border-right:1.5px solid var(--accent)}
.rv-dots{--dot:radial-gradient(circle,var(--accent) 1px,transparent 1.35px);border-color:transparent;border-radius:6px;background-color:color-mix(in srgb,var(--accent) 9%,transparent);
  background-image:var(--dot),var(--dot),var(--dot),var(--dot);background-size:6px 2px,6px 2px,2px 6px,2px 6px;background-position:0 0,0 100%,0 0,100% 0;background-repeat:round no-repeat,round no-repeat,no-repeat round,no-repeat round}
.rv-dots .rv-tag{top:calc(100% + 4px);bottom:auto}

/* Designers: the spec collects beside the page, one row per measured element. */
.rv-spec{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.rv-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--space-3);align-items:center;padding:var(--space-2);border-radius:var(--radius-control);transition:opacity 420ms var(--ease-fluid),transform 420ms var(--ease-fluid),background 900ms ease}
.rv-row b{display:block;font-weight:500;color:var(--text-primary)}
.rv-row small{display:block;color:var(--text-secondary);font:var(--text-base)/1.45 var(--font-mono)}
.rv-row .ro-pass{display:inline-block;margin-top:var(--space-1)}
.rv-row .ro-aa,.rv-row .ro-pair{height:44px}
.rv-row .ro-aa{font-size:22px}
.rv-row .ro-btn{height:28px}
.rv-row.is-new{background:var(--surface-hover)}

/* Developers: values lift off the page into the file, then the same tokens change syntax. */
.rv-dev .rv-board{padding:26px 18px 18px}
.rv-dev .rv-page{flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px;transition:box-shadow 300ms ease}
.rv-dev .rv-mark{flex-basis:100%}
.rv-dev .rv-h{max-width:16ch;font-size:20px}
.rv-code{min-width:0;border:1px solid var(--border-standard);border-radius:var(--radius-control);background:var(--surface-base)}
.rv-tabs{display:flex;gap:2px;padding:4px;border-bottom:1px solid var(--border-standard)}
.rv-tabs [role=tab]{padding:4px 10px;border:0;border-radius:5px;background:none;color:var(--text-muted);font:500 var(--text-md)/1.4 var(--font-sans);cursor:pointer;transition:background 260ms ease,color 260ms ease,box-shadow 260ms ease}.rv-tabs [role=tab]:hover{color:var(--text-primary)}
.rv-tabs [role=tab][aria-selected=true]{background:var(--surface-selected);color:var(--text-primary);box-shadow:inset 0 -2px 0 var(--accent)}
.rv-dev[data-fmt=tailwind4] .rv-css,.rv-dev:not([data-fmt=tailwind4]) .rv-v4{display:none}
.rv-code pre{min-height:calc(7lh + 2 * var(--space-4));padding:var(--space-4) var(--space-5)}
@container (max-width:420px){.rv-code pre{padding-inline:var(--space-4);white-space:pre-wrap;overflow-wrap:anywhere}}
.rv-l{display:block;margin-inline:calc(var(--space-2) * -1);padding-inline:var(--space-2);border-radius:3px;transition:clip-path 480ms steps(18,end),background 900ms ease}
.rv-l.is-new{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.rv.is-playing .rv-l:not(.is-in){clip-path:inset(0 100% 0 0)}
.rv-fly{position:absolute;left:0;top:0;z-index:5;display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 4px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:var(--radius-full);background:var(--surface-elevated);box-shadow:0 10px 24px -10px rgba(0,0,0,.7);color:var(--text-primary);font:600 var(--text-xs)/1.4 var(--font-mono);white-space:nowrap;pointer-events:none}
.rv-fly i{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.3)}
.rv-fly .rv-fly-pill{width:18px;height:10px;border-radius:5px;background:none;box-shadow:inset 0 0 0 1.5px var(--accent)}

/* Product teams: a scan passes, a pin marks the finding, the fix shows on the page in a dotted preview outline. */
.rv-cta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.rv-fix{display:inline-flex;align-items:center;padding:3px 4px;color:#355E40;font-size:10.5px;font-weight:600;white-space:nowrap;transition:opacity 360ms var(--ease-fluid),transform 360ms var(--ease-fluid)}
.rv-rooms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;margin-top:4px}
.rv-rooms i{display:flex;align-items:flex-end;height:46px;padding:5px 6px;border-radius:4px;background:linear-gradient(#C9B293 0 58%,#ECE5DA 58%);color:#221D18;font:normal 600 9px/1 "Avenir Next",Avenir,sans-serif}
.rv-scan{position:absolute;left:10px;right:10px;top:16px;z-index:3;height:2px;border-radius:2px;background:var(--accent);box-shadow:0 0 14px 2px color-mix(in srgb,var(--accent) 55%,transparent);opacity:0;pointer-events:none}
.rv-scan::before{content:'';position:absolute;left:0;right:0;bottom:2px;height:48px;background:linear-gradient(to top,color-mix(in srgb,var(--accent) 16%,transparent),transparent)}
.rv.is-scanning .rv-scan{animation:rv-scan 1300ms cubic-bezier(.65,0,.35,1) both}
@keyframes rv-scan{0%{opacity:1;top:16px}88%{opacity:1}100%{opacity:0;top:calc(100% - 18px)}}
.rv-pin{position:absolute;left:0;top:0;z-index:4;display:grid;place-items:center;width:22px;height:22px;border:2px solid var(--surface-base);border-radius:50%;background:var(--accent);color:var(--text-inverse);font:700 11px/1 var(--font-mono);box-shadow:0 6px 14px -4px rgba(0,0,0,.6);opacity:0;transform:translate(var(--px,0),var(--py,0));pointer-events:none;transition:opacity 200ms ease}
.rv[data-pin] .rv-pin{opacity:1}
.rv-pin.is-drop{animation:rv-drop 520ms cubic-bezier(.34,1.56,.64,1)}
@keyframes rv-drop{from{opacity:0;transform:translate(var(--px,0),calc(var(--py,0) - 18px)) scale(.6)}}
.rv-side{display:grid;gap:var(--space-2);min-width:0}
.rv-side .ro-prompt{margin:0}
.rv-action{justify-self:start;margin-top:var(--space-1);padding:4px var(--space-3);border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:var(--radius-sm);color:var(--text-accent);font:500 var(--text-md)/1.4 var(--font-sans);transition:background 160ms ease,color 160ms ease,transform 160ms ease}
.rv-action.is-press,.ro-prompt.is-press{transform:scale(.97)}
.rv-action.is-press{background:var(--accent);color:var(--text-inverse)}
.rv-copied{margin-left:auto;padding:1px var(--space-2);border-radius:var(--radius-full);background:color-mix(in srgb,var(--text-success) 16%,transparent);color:var(--text-success);font:600 var(--text-sm)/1.5 var(--font-mono);transition:opacity 260ms ease}
.ro-prompt{transition:transform 160ms ease,border-color 260ms ease}
.ro-prompt.is-press{border-color:var(--accent)}
.rv .ro-finding,.rv .ro-prompt{transition:opacity 480ms var(--ease-enter),transform 480ms var(--ease-enter),border-color 260ms ease}

/* Before-states while a scene plays. */
.rv.is-playing :is(.rv-chip,.rv-fix,.rv-copied):not(.is-in){opacity:0}
.rv.is-playing .rv-chip:not(.is-in){transform:scale(.92)}
.rv.is-playing .rv-fix:not(.is-in){transform:translateX(-6px)}
.rv.is-playing .rv-row:not(.is-in){opacity:0;transform:translateX(12px)}
.rv.is-playing .ro-finding:not(.is-in){opacity:0;transform:translateX(18px)}
.rv.is-playing .ro-prompt:not(.is-in){opacity:0;transform:translateY(8px)}
@media(prefers-reduced-motion:reduce){.rv *{transition:none!important;animation:none!important}}
@media(prefers-reduced-motion:no-preference){.role-panel:not([hidden])>*{animation:role-in 420ms var(--ease-fluid) both}.role-panel:not([hidden])>figure{animation-delay:70ms}}
@keyframes role-in{from{opacity:0;transform:translateY(10px)}}

/* What you take away: Export leads with real exporter output; Read mirrors the panel's tab bar; Hand off groups the tools. */
.x-export{grid-column:1/-1}
.x-export-body{display:grid;grid-template-columns:minmax(220px,.42fr) minmax(0,1fr);gap:var(--space-4);align-items:start;margin-top:var(--space-2)}
.x-formats{display:grid;gap:4px;align-content:start}
.x-formats button{display:grid;gap:2px;min-height:44px;padding:var(--space-2) var(--space-4);border:1px solid transparent;border-radius:var(--radius-control);background:none;text-align:left;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast)}
.x-formats button b{font-weight:500;color:var(--text-primary)}
.x-formats button span{font:var(--text-xs) var(--font-mono);color:var(--text-muted)}
.x-formats button:hover{background:var(--surface-hover)}
.x-formats button[aria-pressed=true]{background:var(--surface-selected);border-color:var(--border-selected)}
.x-formats button[aria-pressed=true] span{color:var(--text-accent)}
.x-formats button:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
.x-code{margin:0;min-width:0;border:1px solid var(--border-standard);border-radius:var(--radius-control);background:var(--surface-base);overflow:hidden}
/* Code panes are sized in whole lines (lh) and stage.mjs fitCode() keeps it so when the pane is flexible: the bottom padding takes
   the remainder, so no line is ever cut in half. While more follows below, the last line fades and a thin scrollbar shows. */
.x-export .x-code pre{height:calc(15lh + 2 * var(--space-5))}
.x-code pre{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--text-muted) 50%,transparent) transparent}
.x-code pre.is-clipped:not(.is-end){-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--pb,20px) - 1lh),transparent calc(100% - var(--pb,20px)));mask-image:linear-gradient(to bottom,#000 calc(100% - var(--pb,20px) - 1lh),transparent calc(100% - var(--pb,20px)))}
.x-code.is-swap code{animation:code-in 320ms var(--ease-fluid)}
@keyframes code-in{from{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){.x-code.is-swap code,.role-panel:not([hidden])>*{animation:none}.roles-ind,.role-output{transition:none}}

@media(max-width:1000px){.role-panel{min-height:0}.x-export-body{grid-template-columns:1fr}.x-formats{grid-template-columns:repeat(2,1fr)}.role-panel{grid-template-columns:1fr}.x-export .x-code pre{height:calc(11lh + 2 * var(--space-5))}}
@media(max-width:600px){.roles-tabs{display:flex;width:100%}.roles-tabs button{flex:1;padding-inline:var(--space-2);font-size:var(--text-sm)}}
@media(min-width:361px) and (max-width:600px){.roles-tabs button{flex:1 1 auto}} /* sized to their names: "Product teams" fits one line from about 390px, and can still wrap under larger text spacing (WCAG 1.4.12) */

.role-panel .text-link{min-height:44px}
@media(min-width:1001px){.site-header nav .nav-links a{padding-inline:var(--space-2)}}

/* Reading spine: one line down the chapters, filled to the middle of the viewport, a node per stop. */
.stage-story{position:relative;min-width:0;--gutter:48px;--spine-x:15px;padding-left:var(--gutter)}
.stage-spine{position:absolute;left:var(--spine-x);top:var(--spine-top,0);width:1px;height:var(--spine-h,0);background:var(--border-standard)}
.spine-fill{position:absolute;top:0;bottom:0;left:-.5px;width:2px;background:var(--accent);transform:scaleY(var(--spine-k,0));transform-origin:top}
.spine-tip{position:absolute;left:.5px;top:0;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 60%,transparent);transform:translateY(var(--spine-y,0))}
.spine-node{position:absolute;left:calc(var(--spine-x) - var(--gutter) - 6px);top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;border:1.5px solid var(--border-strong);background:var(--surface-base);transition:background var(--transition-smooth),border-color var(--transition-smooth),box-shadow var(--transition-smooth)}
.spine-node.is-passed{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 55%,var(--surface-base))}
.spine-node.is-current{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 5px var(--accent-glow)}
.stage-next{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2) var(--space-3);min-height:44px;margin-block:var(--space-4) var(--space-8);color:var(--text-primary);font-size:var(--text-lg);font-weight:500;text-decoration:none}
.stage-next>span:nth-child(2){font-size:var(--text-md);color:var(--accent)}
.stage-next .button-icon{color:var(--accent);transition:transform var(--transition-fast)}
.stage-next:hover .button-icon{transform:translateY(3px)}
.stage-next:focus-visible{outline:2px solid var(--border-focus);outline-offset:4px;border-radius:var(--radius-sm)}


@media(max-width:1000px){
  .stage-story{--gutter:32px;--spine-x:9px}
  .stage-next{margin-block:var(--space-6) 0}
}

/* Hero chips: what you need to know before you install. */
.hero-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);margin:var(--space-5) 0 0;padding:0;list-style:none}
.hero-chips li{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--space-4);border:1px solid var(--border-standard);border-radius:var(--radius-full);background:var(--surface-elevated);font-size:var(--text-sm);color:var(--text-secondary)}

@media(max-width:600px){.hero{padding-top:64px}}

/* Section rules replace the all-caps eyebrows: a handle, the section's name, a line that draws in as the section
   arrives, and one fact about what follows. The handle repeats the stage's selection handles. */
#playground:before{content:none}
.section-rule{grid-column:1/-1;display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-12);font-size:var(--text-md);color:var(--text-primary)}
.section-rule span{display:inline-flex;align-items:center;gap:var(--space-3);font-weight:500;white-space:nowrap}
.section-rule span::before{content:'';width:9px;height:9px;border:1.5px solid var(--accent);border-radius:2px;background:var(--surface-base)}
.section-rule i{flex:1;height:1px;background:linear-gradient(color-mix(in srgb,var(--accent) 70%,transparent),color-mix(in srgb,var(--accent) 70%,transparent)) no-repeat left/100% 100%,var(--border-standard)}
.section-rule small{font:var(--text-sm) var(--font-mono);color:var(--text-muted);white-space:nowrap}
.stage-head .section-rule{margin-bottom:var(--space-8)}
#playground>.section-rule{margin-bottom:var(--space-10)}
@media(prefers-reduced-motion:no-preference){@supports(animation-timeline:view()){
  .section-rule i{background-size:0% 100%,auto;animation:rule-draw linear both;animation-timeline:view();animation-range:entry 20% cover 40%}
  .section-rule span::before{animation:rule-handle linear both;animation-timeline:view();animation-range:entry 20% cover 30%}
  @keyframes rule-draw{to{background-size:100% 100%,auto}}
  @keyframes rule-handle{from{background:var(--surface-base)}to{background:var(--accent)}}
}}
@media(max-width:600px){.section-rule small{display:none}.section-rule{margin-bottom:var(--space-8)}}

/* Closing headline, shown selected the way the extension selects an element. */
.final-cta h2{color:var(--text-primary)}
.selected-text{position:relative;display:inline-block;padding:4px 14px;outline:1px solid color-mix(in srgb,var(--accent) 70%,transparent)}
.sel-handles>i{position:absolute;width:9px;height:9px;border:1.5px solid var(--accent);border-radius:2px;background:var(--surface-base)}
.sel-handles>i:nth-child(1){left:-5px;top:-5px}.sel-handles>i:nth-child(2){right:-5px;top:-5px}
.sel-handles>i:nth-child(3){left:-5px;bottom:-5px}.sel-handles>i:nth-child(4){right:-5px;bottom:-5px}
.sel-spec{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);padding:3px 8px;border-radius:var(--radius-sm);background:var(--accent);color:var(--text-inverse);font:600 11px/1.3 var(--font-mono);letter-spacing:0;white-space:nowrap}
.sel-spec:empty{display:none}
.final-cta>h2+p:not(.eyebrow){margin-top:56px}

/* "Inspect this page": a toggle (button or I) turns the page into a canvas. A dot grid on the 8px rhythm sits
   behind the content like a design-tool canvas, with accent dots under the pointer; guides cross at the
   pointer with its page coordinates; the selection box glides between elements with handles, a spec label
   and a size badge. Fine pointers only. */
.inspect-toggle{position:fixed;z-index:70;right:20px;bottom:20px;display:none;align-items:center;gap:var(--space-2);min-height:44px;padding:6px 8px 6px 6px;border:1px solid var(--border-glass);border-radius:var(--radius-full);background:color-mix(in srgb,var(--surface-elevated) 88%,transparent);backdrop-filter:blur(14px);box-shadow:var(--shadow-floating);color:var(--text-secondary);font:500 var(--text-sm) var(--font-sans);cursor:pointer;transition:color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast)}
.inspect-toggle:hover{color:var(--text-primary);border-color:var(--border-strong)}
.inspect-toggle:active{transform:scale(.97)}
.inspect-toggle:focus-visible{outline:2px solid var(--border-focus);outline-offset:3px}
.inspect-toggle-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--surface-selected);color:var(--text-secondary);transition:background var(--transition-smooth),color var(--transition-smooth)}
.inspect-toggle-icon svg{width:15px;height:15px}
.inspect-toggle kbd{min-width:20px;padding:1px 6px;border:1px solid var(--border-standard);border-radius:5px;font:500 11px/1.4 var(--font-mono);color:var(--text-muted);text-align:center}
.inspect-toggle[aria-pressed=true]{color:var(--text-primary);border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.inspect-toggle[aria-pressed=true] .inspect-toggle-icon{background:var(--accent);color:var(--text-inverse)}
.site-footer{margin-bottom:56px}

.inspect-canvas,.inspect-layer{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity 260ms var(--ease-fluid)}
@property --r{syntax:'<length>';inherits:true;initial-value:0px}
.inspect-canvas{z-index:-1;--r:0px;transition:opacity 260ms var(--ease-fluid),--r 700ms var(--ease-fluid)}
html.is-inspecting .inspect-canvas{--r:340px}
.inspect-layer{z-index:60}
html.is-inspecting :is(.inspect-canvas,.inspect-layer){opacity:1}
html.is-inspecting main{cursor:crosshair}
html.is-inspecting main :is(a,button,summary,[role=tab],textarea,input,select){cursor:pointer}

.dot-field{position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.3) 1px,transparent 1.5px) 0 0/16px 16px;
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx,-999px) var(--my,-999px),#000 0%,rgba(0,0,0,.35) 45%,transparent 72%);mask-image:radial-gradient(circle var(--r) at var(--mx,-999px) var(--my,-999px),#000 0%,rgba(0,0,0,.35) 45%,transparent 72%)}
.dot-field--hot{background-image:radial-gradient(circle,var(--accent) 1.3px,transparent 1.9px);
  -webkit-mask-image:radial-gradient(circle calc(var(--r) * .28) at var(--mx,-999px) var(--my,-999px),#000,transparent 75%);mask-image:radial-gradient(circle calc(var(--r) * .28) at var(--mx,-999px) var(--my,-999px),#000,transparent 75%)}

/* Guides sit in the canvas, behind every section and panel, so they never cross text; they fade out from the pointer. */
.guide{position:absolute;left:0;top:0;--guide:color-mix(in srgb,var(--accent) 22%,transparent)}
.guide-x{width:100%;height:1px;transform:translateY(-999px);background:linear-gradient(90deg,transparent calc(var(--mx,0px) - 420px),var(--guide) var(--mx,0px),transparent calc(var(--mx,0px) + 420px))}
.guide-y{width:1px;height:100%;transform:translateX(-999px);background:linear-gradient(180deg,transparent calc(var(--my,0px) - 320px),var(--guide) var(--my,0px),transparent calc(var(--my,0px) + 320px))}
.guide-xy{position:absolute;left:0;top:0;padding:2px 6px;border-radius:4px;background:color-mix(in srgb,var(--surface-base) 85%,transparent);border:1px solid var(--border-standard);font:500 10px/1.4 var(--font-mono);color:var(--text-secondary);white-space:nowrap;transform:translate(-999px,-999px)}

.spec-outline{position:absolute;left:0;top:0;width:0;height:0;border:1px solid var(--accent);border-radius:3px;background:color-mix(in srgb,var(--accent) 6%,transparent);opacity:0;
  transition:opacity 180ms ease,transform 260ms var(--ease-fluid),width 260ms var(--ease-fluid),height 260ms var(--ease-fluid),border-color 200ms ease,background-color 200ms ease,border-radius 200ms ease}
.spec-outline.is-instant{transition:opacity 180ms ease}
.spec-outline.is-on{opacity:1}
.spec-outline>i{position:absolute;width:7px;height:7px;border:1.5px solid var(--accent);border-radius:1px;background:var(--surface-base);transition:opacity 160ms ease}
.spec-outline>i:nth-of-type(1){left:-4px;top:-4px}.spec-outline>i:nth-of-type(2){right:-4px;top:-4px}
.spec-outline>i:nth-of-type(3){left:-4px;bottom:-4px}.spec-outline>i:nth-of-type(4){right:-4px;bottom:-4px}
.spec-tag,.spec-size{position:absolute;display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:var(--radius-sm);font:600 11px/1.3 var(--font-mono);white-space:nowrap;transition:top 200ms var(--ease-fluid),bottom 200ms var(--ease-fluid)}
.spec-tag{left:-1px;bottom:calc(100% + 8px);background:var(--accent);color:var(--text-inverse)}
.spec-tag i{width:10px;height:10px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.spec-size{left:50%;top:calc(100% + 8px);transform:translateX(-50%);background:var(--surface-elevated);border:1px solid var(--border-standard);color:var(--text-accent)}
/* Placement (stage.mjs place()): above by default; below, right or left when that spot would cover text. */
.spec-outline.at-below .spec-tag{bottom:auto;top:calc(100% + 8px)}
.spec-outline.at-below .spec-size{left:-1px;top:calc(100% + 36px);transform:none}
.spec-outline:is(.at-side,.at-left) .spec-tag{bottom:auto;top:50%;transform:translateY(-100%)}
.spec-outline:is(.at-side,.at-left) .spec-size{top:calc(50% + 4px);transform:none}
.spec-outline.at-side :is(.spec-tag,.spec-size){left:calc(100% + 12px)}
.spec-outline.at-left :is(.spec-tag,.spec-size){left:auto;right:calc(100% + 12px)}
.guide-xy{transition:opacity 140ms ease}
.inspect-layer:has(.spec-outline.is-on) .guide-xy{opacity:0}
.spec-pad{position:absolute;inset:4px;opacity:0;transition:opacity 200ms ease;
  background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--accent) 34%,transparent) 0 1px,transparent 1px 6px);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}

/* Actions: a dotted outline (a prototype hotspot), no handles. Round 2px dots on a 6px rhythm; background-repeat:round
   fits a whole number of dots to each edge so the spacing stays even and the corners line up. Static, never animated. */
.spec-outline{--dot:radial-gradient(circle,var(--accent) 1px,transparent 1.35px)}
.spec-outline[data-kind=action]{border-color:transparent;border-radius:6px;background-color:color-mix(in srgb,var(--accent) 8%,transparent);
  background-image:var(--dot),var(--dot),var(--dot),var(--dot);background-size:6px 2px,6px 2px,2px 6px,2px 6px;
  background-position:0 0,0 100%,0 0,100% 0;background-repeat:round no-repeat,round no-repeat,no-repeat round,no-repeat round;box-shadow:0 0 22px -6px color-mix(in srgb,var(--accent) 55%,transparent)}
.spec-outline[data-kind=action]>i,.spec-outline[data-kind=token]>i{opacity:0}
/* Containers: padding hatched, outline softer. */
.spec-outline[data-kind=box]{border-color:color-mix(in srgb,var(--accent) 65%,transparent);background-color:transparent}
.spec-outline[data-kind=box] .spec-pad{opacity:1}
/* Media: crop marks outside the corners instead of a box. */
.spec-outline[data-kind=media]{border-color:transparent;background-color:color-mix(in srgb,var(--accent) 5%,transparent)}
.spec-outline[data-kind=media]>i{width:12px;height:12px;border:0;border-radius:0;background:none}
.spec-outline[data-kind=media]>i:nth-of-type(1){left:-8px;top:-8px;border-top:1.5px solid var(--accent);border-left:1.5px solid var(--accent)}
.spec-outline[data-kind=media]>i:nth-of-type(2){right:-8px;top:-8px;border-top:1.5px solid var(--accent);border-right:1.5px solid var(--accent)}
.spec-outline[data-kind=media]>i:nth-of-type(3){left:-8px;bottom:-8px;border-bottom:1.5px solid var(--accent);border-left:1.5px solid var(--accent)}
.spec-outline[data-kind=media]>i:nth-of-type(4){right:-8px;bottom:-8px;border-bottom:1.5px solid var(--accent);border-right:1.5px solid var(--accent)}
/* Code tokens: a dotted underline and a tint, nothing heavier inside a code block. */
.spec-outline[data-kind=token]{border-color:transparent;border-radius:2px;background-color:color-mix(in srgb,var(--accent) 12%,transparent);background-image:var(--dot);background-size:6px 2px;background-position:0 100%;background-repeat:round no-repeat}
.spec-outline[data-kind=token] .spec-size{display:none}
.x-code code,.role-output code{font:inherit}

@media (hover:hover) and (pointer:fine){.inspect-toggle{display:inline-flex}}
@media not ((hover:hover) and (pointer:fine)){.inspect-canvas,.inspect-layer{display:none}}
@media(prefers-reduced-motion:reduce){.spec-outline,.inspect-canvas,.inspect-layer{transition:none}}

@media(max-width:360px){.x-formats{grid-template-columns:1fr}}

/* Touch: a demo never captures the scroll. A swipe over a frame moves the page, not the example site inside it, and a panel that
   reaches its end hands the swipe on. The tours animate themselves, so they lose nothing; the playground says why it is a preview. */
.touch-note{display:none}
@media(pointer:coarse),(max-width:768px){
 .demo-mount iframe,.demo-mount .site-frame{pointer-events:none!important}
 .demo-mount,.demo-mount *{overscroll-behavior:auto!important}
 /* The example site and the comparison inside the frame take no finger at all: no taps, no scroll of their own. The tabs, address bar and toolbar around them still work. */
 .demo-mount .reference,.demo-mount .reference *,.demo-mount .responsive-comparison,.demo-mount .responsive-comparison *{pointer-events:none!important}
 .demo-mount{touch-action:pan-y pinch-zoom}
 /* No playground on phones and tablets: nothing in it takes a finger, so the section and every link to it are left out. */
 #playground,a[href="#playground"]{display:none!important}
 .touch-note{display:flex;gap:var(--space-3);align-items:flex-start;max-width:56ch;margin:var(--space-4) auto 0;padding:var(--space-3) var(--space-4);border:1px solid var(--border-standard);border-radius:var(--radius-md);background:var(--surface-elevated);color:var(--text-secondary);font:var(--text-sm)/1.55 var(--font-sans)}
 .touch-note [data-icon]{flex:none;color:var(--accent);margin-top:2px}
}

@media(prefers-reduced-motion:reduce){.walkthrough-progress,.feature-actions .button-secondary svg{transition:none}.feature-actions .button-secondary:hover svg{transform:none}}
.walkthrough-controls{pointer-events:auto;user-select:text}

/* Section headings: every standalone heading is centred and its second line takes the brand orange, as the hero's does. Chapter
   headings that sit beside a demo keep their column but share the orange. */
.section-heading h2 span,.stage-head h2 span{color:var(--accent)}
/* Every section heading is centred: a new section needs no id in a list to match the others. */
.stage-head h2,.section-heading{text-align:center;text-wrap:balance}
.section-heading{max-width:760px;margin-inline:auto}
.section-heading>p:not(.eyebrow){max-width:60ch;margin-inline:auto}
#faq.faq-layout{display:block}
#faq .faq-list{max-width:860px;margin-inline:auto}

/* Hero calls to action grow with the screen: 56px on phones, 64px from 1024px, 72px from 1440px (a bigger target and a clearer next step). */
@media(min-width:1024px){.button-large{min-height:64px;padding-inline:var(--space-8);font-size:20px;gap:var(--space-3)}.button-large .button-icon,.button-large .button-icon .be-icon{width:24px;height:24px;min-width:24px;min-height:24px}}
@media(min-width:1440px){.button-large{min-height:72px;padding-inline:var(--space-10);font-size:var(--text-2xl);gap:var(--space-4)}}
#roles .roles-tabs{display:flex;width:fit-content;max-width:100%;margin-inline:auto}

/* Hero type scales with the calls to action, so the headline stays the loudest thing and the buttons its answer:
   headline 46-60px on tablets, 60px at 1024, about 80px at 1440 and 88px from 1570; lead 18/20/22px; buttons keep their 56/64/72px
   height with a compact width. */
.hero h1{text-wrap:balance} /* a headline breaks into even lines, never a long one and a stray word */
@media(min-width:601px){.hero h1{font-size:clamp(46px,7vw,60px)}.hero-description{font-size:18px}}
@media(min-width:1001px){.hero h1{font-size:clamp(60px,5.6vw,88px)}.hero-description{font-size:20px;line-height:1.65}.hero-summary{max-width:60ch;margin-top:var(--space-6)}}
/* Lead: 18px on tablets, 20px from 1024, 24px (--text-2xl) from 1280, 28px from 1920 (a hero-only step; the scale has no token above 24).
   Against the headline that keeps the lead at about a third of its size at every width. */
@media(min-width:1280px){.hero-description{font-size:var(--text-2xl);line-height:1.6}.hero-summary{max-width:60ch;margin-top:var(--space-8)}.hero-chips{gap:var(--space-3);margin-top:var(--space-6)}.hero-chips li{min-height:40px;padding-inline:var(--space-5);font-size:var(--text-md)}}
@media(min-width:1920px){.hero-description{font-size:28px}.hero-summary{max-width:64ch}}
.hero-description{text-wrap:balance}

/* ─── Hero headline: "Every website is your [design] playground." The audience word is a text layer under edit, drawn the way the
   extension draws a selection: an outline with corner handles, an inspector tag above with the word's real type, a caret while it
   retypes, and the change as a code diff below. The word sits in a box as wide as the longest variant, so nothing reflows. */
.hero-head{position:relative}
.hero-title .ht-line{display:block}
.hero-title .ht-accent{color:var(--accent)}
.ht-edit{position:relative;display:inline-block;padding:0 var(--space-3);margin-inline:calc(var(--space-3) * -1) 0;outline:1px solid color-mix(in srgb,var(--accent) 70%,transparent);outline-offset:0;border-radius:2px;vertical-align:baseline}
.ht-stack{display:inline-grid;text-align:left}
.ht-stack>*{grid-area:1/1}
.ht-size{visibility:hidden}
.ht-word{white-space:nowrap;justify-self:start} /* as wide as its text, so the caret follows the last letter, not the box */
/* The caret: the text-cursor I-beam (serifs top and bottom, a slim stem that flares into them), steady while typing and blinking at rest.
   It sits on the baseline right after the last letter and takes no width, so the word's box keeps the width of its longest variant. */
.ht-word::after{content:"";display:inline-block;width:.2em;height:.74em;margin-inline:.02em -.22em;vertical-align:-.03em;background:var(--text-primary);animation:ht-blink 1.1s steps(1) infinite;
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H58V7H35.5C33 7 32.5 8.5 32.5 11V89C32.5 91.5 33 93 35.5 93H58V100H0V93H22.5C25 93 25.5 91.5 25.5 89V11C25.5 8.5 25 7 22.5 7H0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H58V7H35.5C33 7 32.5 8.5 32.5 11V89C32.5 91.5 33 93 35.5 93H58V100H0V93H22.5C25 93 25.5 91.5 25.5 89V11C25.5 8.5 25 7 22.5 7H0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.ht-edit.is-typing .ht-word::after{animation:none}
@keyframes ht-blink{50%{opacity:0}}
.ht-edit .sel-handles>i{width:8px;height:8px}
.ht-edit .sel-handles>i:nth-child(1),.ht-edit .sel-handles>i:nth-child(3){left:-4px}
.ht-edit .sel-handles>i:nth-child(2),.ht-edit .sel-handles>i:nth-child(4){right:-4px}
.ht-edit .sel-handles>i:nth-child(1),.ht-edit .sel-handles>i:nth-child(2){top:-4px}
.ht-edit .sel-handles>i:nth-child(3),.ht-edit .sel-handles>i:nth-child(4){bottom:-4px}
/* Inspector tag, top left, and diff chip, bottom right: mono 12px on the panel surface, like the extension's own labels. */
.ht-meta{position:absolute;left:-1px;top:calc(100% + var(--space-2));display:flex;gap:var(--space-2);pointer-events:none}
.ht-tag,.ht-diff{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);min-height:24px;padding:0 var(--space-2);border:1px solid var(--border-standard);border-radius:var(--radius-sm);background:var(--surface-elevated);color:var(--text-secondary);font:500 12px/1 var(--font-mono);letter-spacing:0;white-space:nowrap;text-align:left}
.ht-tag{padding-left:var(--space-8)}
.ht-tag::before{content:"";position:absolute;left:var(--space-2);top:50%;width:12px;height:12px;margin-top:-6px;border:1.5px solid var(--accent);border-radius:2px}
.ht-diff del{color:var(--text-destructive);text-decoration:line-through;text-decoration-thickness:1px}
.ht-diff ins{color:var(--text-success);text-decoration:none}
.ht-diff-arrow{color:var(--text-muted)}
.ht-diff-for{color:var(--text-muted)}
.ht-diff>del+.ht-diff-arrow+ins+.ht-diff-for::before{content:"· ";color:var(--text-muted)}
/* Pause / play: a 32px control beside the tag (outside the heading, so the headline reads as one sentence). */
@media(prefers-reduced-motion:reduce){.ht-word::after{animation:none}}
/* Small screens: the selection stays, the labels go (they would cover the copy). */
@media(max-width:600px){.ht-meta{display:none}.ht-edit{padding:0 calc(var(--space-2) + .2em) 0 var(--space-2)}}

/* ─── The page canvas: a quiet measuring grid behind every section (8px dots, a 64px grid), fading towards the edges, so the page
   reads as a design canvas. Static: no motion, no scroll cost. The "Inspect this page" mode lights it up under the pointer. */
.page-grid{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(to right,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(to bottom,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/64px 64px,
    radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1.5px) 0 0/16px 16px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 40%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 90% 80% at 50% 40%,#000 30%,transparent 100%)}
@media print{.page-grid{display:none}}
/* The playground card keeps its warm tint but lets the page grid show through (showcase.css paints it opaque, which hid the grid here). */
#playground{background:linear-gradient(135deg,rgb(41 34 28 / .5),rgb(21 21 21 / .25) 70%)}
.ht-size::after{content:"";display:inline-block;width:.06em;margin-left:.04em}
/* The first line stays white: an older rule colours every span in the hero h1 orange. */
.hero-title .ht-line:first-child{color:var(--text-primary)}
/* Room under the headline for the label row; the lead keeps its measure, and the buttons get the full row so the longer
   primary label does not push them onto two lines. */
@media(min-width:601px){.hero .hero-summary{max-width:none;width:100%;margin-top:var(--space-16)}.hero .hero-description{max-width:60ch;margin-inline:auto}.hero .action-row{justify-content:center}}
@media(min-width:1001px){.hero .action-row{flex-wrap:nowrap}}
@media(min-width:1920px){.hero .hero-description{max-width:64ch}}
.hero-title .ht-line:first-child{text-wrap:balance}

/* ─── What leaves the browser: Export, then Read as a strip, then Hand off as a full-width pipeline diagram. ─── */
.x-read,.x-handoff{grid-column:1/-1}

/* Hand off: three nodes left to right (live page, Prompt from edits, your tool), joined by wires drawn behind them. */
.hf{position:relative;display:grid;grid-template-columns:minmax(232px,.85fr) minmax(0,1.5fr) minmax(280px,1.1fr);gap:var(--space-12);align-items:start;margin-top:var(--space-4)}
.hf-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.hf-wires path{fill:none;stroke:var(--border-strong);stroke-width:1.5}
.hf-wires :is(.w0,.wg.is-active):not(.hf-comet){stroke:var(--accent);stroke-dasharray:6 8;animation:hf-signal 1.2s linear infinite}
@keyframes hf-signal{to{stroke-dashoffset:-28}}
.hf-node,.hf-targets{position:relative;z-index:1;min-width:0}
.hf-node{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5);border:1px solid var(--border-standard);border-radius:var(--radius-card);background:var(--surface-base)}
.hf-node h4,.hf-group h5{margin:0;color:var(--text-primary);font-weight:500}
.hf-node h4{font-size:var(--text-xl);letter-spacing:-.02em}
.hf-kicker{display:flex;align-items:center;gap:var(--space-2);margin:0;color:var(--text-muted);font:500 var(--text-sm)/1 var(--font-mono)}
.hf-kicker span{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 var(--space-1);border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);border-radius:var(--radius-sm);color:var(--accent)}
.hf-edits{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}
.hf-edits li{display:grid;gap:var(--space-1);padding:var(--space-2) var(--space-3);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--surface-elevated)}
.hf-prop{color:var(--text-secondary);font:var(--text-sm)/1.4 var(--font-sans)}
.hf-prop code{color:var(--text-primary);font:500 var(--text-sm)/1.4 var(--font-mono)}
.hf-change{display:flex;align-items:center;gap:var(--space-2);font:500 var(--text-sm)/1.4 var(--font-mono)}
.hf-change del{color:var(--text-destructive);text-decoration:line-through;text-decoration-thickness:1px}
.hf-change ins{color:var(--text-success);text-decoration:none}
.hf-change del::after{content:"→";display:inline-block;margin-left:var(--space-2);color:var(--text-muted);text-decoration:none}
.edits-rail{max-width:var(--demo-max,none);margin-top:var(--space-4)}
.edits-rail .hf-kicker b{margin-inline-start:auto;color:var(--accent);font-weight:500}
.edits-rail .hf-edits li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:var(--space-3)}
.edits-rail .hf-change del,.edits-rail .hf-change ins{overflow-wrap:anywhere}
.edits-rail .edits-more{color:var(--text-muted);border-style:dashed;font:var(--text-sm)/1.4 var(--font-mono)}
.edits-rail[data-state=ready] .edits-empty,.edits-rail[data-state=empty] .hf-edits{display:none}
.hf-note{margin:0;color:var(--text-muted);font-size:var(--text-sm)}
.hf-code pre{height:calc(12lh + 2 * var(--space-5));font-size:var(--text-sm);line-height:1.7;white-space:pre-wrap;word-break:break-word}
.hf-code pre:focus-visible{outline:2px solid var(--border-focus);outline-offset:-2px}
.hf-targets{display:flex;flex-direction:column;gap:var(--space-4)}
.hf-groups{display:flex;flex-direction:column;gap:var(--space-4)}
.hf-group{padding:var(--space-4);border:1px solid var(--border-standard);border-radius:var(--radius-card);background:var(--surface-base);transition:border-color var(--transition-fast)}
.hf[data-active="0"] .hf-group[data-group="0"],.hf[data-active="1"] .hf-group[data-group="1"],.hf[data-active="2"] .hf-group[data-group="2"]{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.hf-group h5{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3);font-size:var(--text-md)}
.hf-group h5 small{color:var(--text-muted);font:500 var(--text-sm)/1 var(--font-mono)}
.hf-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.hf-chip{display:inline-flex;align-items:center;gap:var(--space-2);min-height:40px;padding:0 var(--space-3);border:1px solid var(--border-standard);border-radius:var(--radius-sm);background:var(--surface-elevated);color:var(--text-secondary);font:500 var(--text-md)/1 var(--font-sans);cursor:pointer;transition:color var(--transition-fast),border-color var(--transition-fast),background var(--transition-fast)}
.hf-chip:hover{color:var(--text-primary);border-color:var(--border-strong)}
.hf-chip:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
.hf-chip[aria-pressed=true]{color:var(--text-primary);border-color:var(--accent);background:var(--surface-selected-subtle)}
.hf-logo{flex:none;width:16px;height:16px;fill:currentColor}
.hf-mono{display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid var(--border-strong);border-radius:4px;font:600 9px/1 var(--font-mono);letter-spacing:0;color:var(--text-secondary)}
.hf-chip[aria-pressed=true] .hf-mono{border-color:var(--accent);color:var(--accent)}
@media(prefers-reduced-motion:reduce){.hf-wires :is(.w0,.wg.is-active){animation:none;stroke-dasharray:none}}
/* Narrower: the nodes stack, joined by a short vertical wire, and the prompt keeps a shorter preview. */
@media(max-width:1000px){
 .hf{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
 .hf-wires{display:none}
 .hf-prompt::before,.hf-targets::before{content:"";position:absolute;left:50%;top:calc(var(--space-8) * -1);width:1px;height:var(--space-8);background:var(--accent)}
 .hf-code pre{height:calc(9lh + 2 * var(--space-5))}
}

/* ─── Hero, revision: the audience word sits in its own text block (a soft orange fill, like text selected in an editor) that
   grows and shrinks with the word as it is typed. Only the word is orange; "playground." matches the first line. Each line stays
   whole from tablet width up. The diff chip under the block shows the edit. */
.hero-title .ht-accent{color:var(--text-primary)}
.ht-edit{display:inline-block;padding:0 var(--space-2);margin:0;outline:0;border-radius:var(--radius-md);background:color-mix(in srgb,var(--accent) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent);transition:background var(--transition-fast)}
.ht-word{color:var(--accent)}
.ht-edit.is-typing{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.ht-diff{position:absolute;left:0;top:calc(100% + var(--space-3));display:inline-flex;align-items:center;gap:var(--space-2);min-height:32px;padding:0 var(--space-3);border:1px solid var(--border-standard);border-radius:var(--radius-sm);background:var(--surface-elevated);color:var(--text-secondary);font:500 var(--text-md)/1 var(--font-mono);letter-spacing:0;white-space:nowrap;pointer-events:none}
@media(min-width:601px){.hero-title .ht-line{white-space:nowrap}.ht-edit{padding:0 calc(var(--space-3) + .2em) 0 var(--space-3)}}
@media(max-width:600px){.ht-diff{display:none}}
@media(max-width:600px){.ht-edit{display:block;width:fit-content;margin-inline:auto}}
/* Hero, round 10: the word is a selected text layer (thin accent frame, four handles, a faint fill), as the inspector draws one.
   Under it the edit reads as a changed variable (`audience "design" → "code"`) in the spec-tag orange, then what that audience
   does with the extension. */
.ht-edit{background:color-mix(in srgb,var(--accent) 8%,transparent);box-shadow:none;outline:1px solid color-mix(in srgb,var(--accent) 75%,transparent);outline-offset:0;border-radius:2px}
.ht-edit.is-typing{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.ht-edit .sel-handles{position:absolute;inset:0;pointer-events:none}
.ht-diff{gap:var(--space-3);min-height:0;padding:0;border:0;background:none;font:400 var(--text-md)/1.4 var(--font-sans);letter-spacing:0;color:var(--text-secondary)}
.ht-chip{--kw:#bb9af7;--name:#7dcfff;display:inline-block;padding:5px 12px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--surface-elevated) 85%,transparent);font:500 13px/1.3 var(--font-mono);white-space:pre}
.ht-kw{color:var(--kw)}.ht-var{color:var(--name)}.ht-op,.ht-p{color:var(--text-muted)}
.ht-chip ins{color:var(--text-success);text-decoration:none;font-weight:600}
.ht-cmt{color:var(--text-muted);font-style:italic}
/* What that audience does with it: short tags in a code theme's hues instead of a sentence. */
.ht-diff{width:max-content;max-width:none;white-space:nowrap}
.ht-tags{display:inline-flex;flex-wrap:nowrap;gap:6px}
.ht-t{--c:#7aa2f7;display:inline-flex;align-items:center;padding:4px 9px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:var(--radius-full);background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--c);font:500 12px/1.2 var(--font-mono);white-space:nowrap}
.ht-t:nth-child(1){--c:var(--accent)}.ht-t:nth-child(3){--c:#bb9af7}.ht-t:nth-child(4){--c:#7dcfff}
@media(max-width:900px){.ht-tags{display:none}}

/* ─── Landing type floor (WCAG-informed audit, 2026-10-10). The extension's panel scale is compact (12-13px) because it lives in a
   narrow side panel; a marketing page is read at a distance and on phones, so it takes a larger floor:
     body copy 16px · supporting copy and notes 14-16px · UI labels (nav, buttons, tabs, chips) 14px · code blocks 14px
     · mono metadata (file names, counts, step numbers) 13px · text inside illustrations 12px at the least.
   Contrast already passes AA everywhere (measured); this is about size. */
.site-header .nav-text,.site-header .nav-free,.site-header .button-small,.site-header .menu-button{font-size:var(--text-md)}
.hero-chips li{font-size:var(--text-md)}
.stage-rail a{font-size:var(--text-md)}
.stage-rail a span,.ch-num{font-size:var(--text-base)}
.stage em,.ch-num+em{font-size:var(--text-sm)}
.stage code{font-size:var(--text-base)}
.demo-caption,.demo-note,.touch-note{font-size:var(--text-md);line-height:1.6}
.roles-tabs button{font-size:var(--text-lg)}
.x-file,.hf-kicker,.hf-group h5 small,.role-output small{font-size:var(--text-base)}
.ro-pass,.ro-btn{font-size:var(--text-sm)}
.x-copy{font-size:var(--text-md)}
.role-output pre,.x-code pre,.hf-code pre{font-size:var(--text-md)}
.hf-prop,.hf-prop code,.hf-change,.hf-note{font-size:var(--text-md)}
.faq-list details>p,.faq-list details>div{font-size:var(--text-lg);line-height:1.7}
.site-footer p,.site-footer nav a{font-size:var(--text-md)}
.site-footer>span{font-size:var(--text-base)}

/* ─── Take the design out of the browser: three steps (Read, Export, Hand off), each numbered and titled by its outcome, joined
   by a short wire so they read as one flow. */
.hf-kicker i{width:8px;height:8px;border-radius:2px;background:var(--accent)}
.x-formats button span{font-size:var(--text-base)}
/* Hand off prompt: how it is tuned for the chosen tool, then the prompt with the tool-specific lines marked. */
.hf-tuned{display:grid;gap:var(--space-2);margin:0;padding:var(--space-3) var(--space-4);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:var(--radius-md);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.hf-tuned>div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--space-3);align-items:baseline}
.hf-tuned dt{color:var(--text-muted);font:500 var(--text-base)/1.5 var(--font-mono)}
.hf-tuned dd{margin:0;color:var(--text-secondary);font-size:var(--text-md);line-height:1.5}
.hf-code code{display:block}
.hf-line{display:block;padding-left:var(--space-2);margin-left:calc(var(--space-2) * -1 - 2px);border-left:2px solid transparent}
.hf-line.is-tuned{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--text-primary)}
.hf-line.tk-tag{color:var(--text-accent)}
.hf-line.tk-head{color:var(--text-primary);font-weight:600}
@media(max-width:600px){.hf-tuned>div{grid-template-columns:minmax(0,1fr);gap:0}}

/* Chapter claim lists: one line per claim, each one has a beat in the demo. */
.chapter-points{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none;max-width:48ch}
.chapter-points li{position:relative;padding-left:var(--space-5);color:var(--text-secondary);font-size:var(--text-lg);line-height:1.5}
.chapter-points li::before{content:'';position:absolute;left:0;top:.6em;width:var(--space-2);height:var(--space-2);border-radius:var(--radius-full);background:var(--accent)}
.chapter-points kbd,.chapter-keys kbd,.chapter-next kbd{padding:0 var(--space-1);border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:var(--radius-sm);background:var(--surface-input);color:var(--text-primary);font:600 var(--text-md)/1.4 var(--font-mono)}
.chapter>.chapter-next{margin:0;color:var(--text-primary)}

/* AI mode in the playground is the extension's own panel in a frame (demo-ai.html): it fills the panel and scrolls inside. */
.demo-mount iframe.analysis-frame[data-view=ai]{display:block;width:100%;height:100%;min-height:var(--space-12);border:0}
.demo-mount[data-tool=ai] .property-panel .panel-body{padding:0;overflow:hidden}

/* P5: hero tag, also-in-the-box line, trust section */
.trust-list{display:grid;gap:var(--space-4);margin:var(--space-8) 0 0;padding:0;list-style:none}
.trust-list li{padding:var(--space-6);border:1px solid var(--border-standard);border-radius:var(--radius-lg);background:var(--surface-raised,var(--bg-surface))}
.trust-list h3{margin:0 0 var(--space-2);font-size:var(--text-lg)}
.trust-list p{margin:0;color:var(--text-secondary)}
.trust-more{margin:var(--space-6) 0 0}
@media(min-width:768px){.trust-list{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* P6: the address bar shows a real focus ring, not only a border color change */
.demo-mount form.browser-url:focus-within{outline:2px solid var(--border-focus);outline-offset:2px}
.chapter-anchor{display:block;height:0;overflow:hidden;scroll-margin-top:var(--space-16)}
/* Chapter 05: prompts people write with it, each with where it starts in the extension. */
.chapter-uses{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;list-style:none;max-width:56ch}
.chapter-uses li{display:inline-flex;align-items:baseline;gap:var(--space-2);padding:var(--space-1) var(--space-3);border:1px solid var(--border-standard);border-radius:var(--radius-full);background:var(--surface-elevated);font-size:var(--text-sm);color:var(--text-primary)}
.chapter-uses b{font-weight:500}
.chapter-uses span{font:var(--text-xs)/1.2 var(--font-mono);color:var(--text-muted)}
.chapter-keys{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:var(--space-2) var(--space-4);margin:0;padding:0;list-style:none}
.chapter-keys li{display:flex;align-items:center;gap:var(--space-2);min-width:0;color:var(--text-secondary);font-size:var(--text-md)}
.chapter-keys li>span{min-width:0}
.chapter-keys kbd{margin-inline-end:0}
.chapter-keys kbd+kbd{margin-inline-start:calc(var(--space-1) * -1)}
/* The shortcut caps show the platform's own key names: the page sets data-os=mac on <html> on a Mac. */
kbd>[data-os=mac]{display:none}
html[data-os=mac] kbd>[data-os=mac]{display:inline}
html[data-os=mac] kbd>[data-os=other]{display:none}

/* Room for the longest outcome line, so the card fits whichever tool is shown. */

/* ─── Hand-off sequence (handoff.mjs): the edits light one by one, a signal runs the wire into Prompt from edits, the prompt writes
   in with its tuned lines marked, then the tool's wire lights, its chip pulses and the outcome line says what that tool does next.
   data-phase is set only while the sequence plays; without it (no JS, reduced motion, after an interaction) everything shows. */
.hf-source .hf-edits li{transition:border-color 300ms ease,background-color 300ms ease,opacity 300ms ease}
.hf[data-phase] .hf-source .hf-edits li:not(.is-lit){opacity:.4}
.hf[data-phase] .hf-source .hf-edits li.is-lit{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 8%,var(--surface-elevated))}
.hf:is([data-phase=edits],[data-phase=signal]) :is(.hf-tuned,.hf-code code){opacity:.14}
.hf[data-phase=prompt] .hf-tuned{animation:hf-fade 420ms var(--ease-enter) both}
.hf[data-phase=prompt] .hf-line{animation:hf-line-in 320ms var(--ease-enter) both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes hf-fade{from{opacity:0}}
@keyframes hf-line-in{from{opacity:0;transform:translateX(-8px)}}
.hf-wires .hf-comet{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:.12 2;stroke-dashoffset:.12;opacity:0;filter:drop-shadow(0 0 4px var(--accent))}
.hf[data-phase=signal] .hf-wires .hf-comet.w0,.hf[data-phase=tool] .hf-wires .hf-comet.wg.is-active{opacity:1;animation:hf-comet 760ms cubic-bezier(.65,0,.35,1) both}
@keyframes hf-comet{to{stroke-dashoffset:-1}}
.hf:is([data-phase=edits],[data-phase=signal]) .hf-wires .w0:not(.hf-comet),.hf:is([data-phase=edits],[data-phase=signal],[data-phase=prompt]) .hf-wires .wg.is-active:not(.hf-comet){stroke:var(--border-strong);stroke-dasharray:none;animation:none}
.hf.hf:is([data-phase=edits],[data-phase=signal],[data-phase=prompt]) .hf-group.hf-group{border-color:var(--border-standard)}
.hf:is([data-phase=edits],[data-phase=signal],[data-phase=prompt]) .hf-chip[aria-pressed=true]{border-color:var(--border-standard);background:var(--surface-elevated)}
.hf[data-phase=tool] .hf-chip[aria-pressed=true]{animation:hf-pulse 1s var(--ease-fluid) 420ms both}
@keyframes hf-pulse{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}to{box-shadow:0 0 0 12px transparent}}
/* The outcome: what the chosen tool does with the prompt, drawn as a dotted action outline (the extension's mark for an action). */
.hf-outcome{--dot:radial-gradient(circle,color-mix(in srgb,var(--accent) 80%,transparent) 1px,transparent 1.35px);display:flex;align-items:baseline;gap:var(--space-3);margin:0;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);
  background:var(--dot),var(--dot),var(--dot),var(--dot),color-mix(in srgb,var(--accent) 6%,transparent);background-size:6px 2px,6px 2px,2px 6px,2px 6px,auto;background-position:0 0,0 100%,0 0,100% 0,0 0;background-repeat:round no-repeat,round no-repeat,no-repeat round,no-repeat round,no-repeat;
  color:var(--text-secondary);font-size:var(--text-md);line-height:1.5;transition:opacity 420ms var(--ease-enter),transform 420ms var(--ease-enter)}
.hf-outcome b{color:var(--text-primary);font-weight:500}
.hf-outcome-k{flex:none;color:var(--text-accent);font:500 var(--text-base)/1.5 var(--font-mono)}
.hf:is([data-phase=edits],[data-phase=signal],[data-phase=prompt],[data-phase=tool]) .hf-outcome{opacity:0;transform:translateY(6px)}
@media(prefers-reduced-motion:reduce){.hf-source .hf-edits li,.hf-outcome{transition:none}}

/* ─── Take-aways, round 10 ───────────────────────────────────────────────────────────────────────────────────────────────────
   The card across the reading line is lit (.is-active) and the cards above it are reached (.is-reached), both set by flowCards. */


/* Your data, round 10: each card opens with its icon and a one-line picture of where the data goes. */
.trust-list li{display:flex;flex-direction:column}
/* .trust-list p{margin:0} above is more specific than .trust-top: scope it so the icon row keeps its gap to the title. */
.trust-list .trust-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin:0 0 var(--space-3)}
.trust-icon{display:grid;place-items:center;width:44px;height:44px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:var(--radius-md);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.trust-icon svg{width:22px;height:22px}
.trust-flow{display:flex;align-items:center;gap:6px;font:var(--text-sm)/1 var(--font-mono);color:var(--text-muted)}
.trust-flow b{padding:4px 8px;border:1px solid var(--border-standard);border-radius:var(--radius-full);font-weight:500;color:var(--text-secondary)}
.trust-flow i{width:22px;height:1px;background:linear-gradient(90deg,var(--border-strong) 50%,transparent 0) 0 0/4px 1px}
.trust-flow s{text-decoration:line-through;text-decoration-color:var(--text-destructive);opacity:.8}
/* The closing call to action: large buttons, a step under the hero's. */
.final-cta .button-large{min-height:64px;padding-inline:32px;font-size:20px}
/* Read tiles: the preview takes the free height and grows with it; the count sits at the right of the tab name. */

/* Read tiles, round 11: each tile is a specimen of its tab. The panel uses the page's dotted grid; one real Halden value in it is
   selected the way the extension selects (accent frame, four handles, the orange spec tag), so the six tiles read as one
   inspection. The tag settles in when the card is the one in view. */
/* Colors: the backgrounds as a share bar, text colours beside the legend */
/* Fonts: the specimen and its scale */
/* Assets: real files from the page */
/* Tech: what was found, and how */
/* Audit: the score and the findings by severity */
/* Tokens: the formats and a few real lines */

/* Phones: the two hero buttons are the same width, and the audit tile's severity labels get the full row instead of overlapping. */
@media(max-width:600px){.hero .action-row{flex-direction:column;align-items:stretch}.hero .action-row .button{width:100%;justify-content:center}}

/* Section rhythm: Who it's for, What you take away, Your data and Questions each had 112px above and below, 224px of nothing between two of them. */
.section.roles,.section.extras,.section.trust,.section.faq-layout{--section-space:72px}
@media(max-width:1000px){.section.roles,.section.extras,.section.trust,.section.faq-layout{--section-space:48px}}

/* The AI analysis readout under the core: larger, so the four values and the step line can be read at a glance. */
.hv-core-label{gap:9px}
.hv-core-label small{font-size:12px;letter-spacing:.14em;color:var(--text-secondary)}
.hv-step{font-size:16px;font-weight:600}
.hv-ledger{top:calc(100% + 64px);left:50%;right:auto;transform:translateX(-50%);width:max-content;min-width:230px;padding:14px 18px;gap:9px;font-size:15px;white-space:nowrap;border-radius:14px;background:rgba(20,19,18,.9)}
.hv-ledger li{gap:14px}
.hv-ledger li:not(.is-on){opacity:.4}
.hv-ledger b{color:var(--text-secondary)}

/* The audience line and its tags animate with the word: the old ones fade out, the string types in, the tags arrive one after another. */
/* One stream, written and deleted like the word: slots of the word's own pace, in order. In: the string, tag 1, tag 2, tag 3, the caption (each
   typed from the left, one after another). Out: the same pieces deleted from the right, last first (caption, tag 3, tag 2, tag 1, the string).
   stage.mjs gives each piece --in-delay/--in-dur or --out-delay/--out-dur: the word's typing / deleting time shared by characters. */
.ht-chip ins{display:inline-block;overflow:hidden;vertical-align:bottom;white-space:pre;animation:ht-type var(--in-dur,200ms) steps(var(--n,8)) var(--in-delay,0ms) both}
.ht-t{animation:ht-tag-in var(--in-dur,200ms) linear var(--in-delay,0ms) both}
.hero-product.is-switching .hv-focus{animation:ht-tag-in var(--in-dur,200ms) linear var(--in-delay,0ms) both}
.ht-diff.is-out .ht-chip ins{animation:ht-untype var(--out-dur,200ms) steps(var(--n,8)) var(--out-delay,0ms) both}
.ht-diff.is-out .ht-t{animation:ht-tag-out var(--out-dur,200ms) linear var(--out-delay,0ms) both}
.hero-product.is-leaving .hv-focus{animation:ht-tag-out var(--out-dur,200ms) linear var(--out-delay,0ms) both}
@keyframes ht-type{from{max-width:0}to{max-width:var(--w,12ch)}}
@keyframes ht-untype{from{max-width:var(--w,12ch)}to{max-width:0}}
@keyframes ht-tag-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ht-tag-out{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 100% 0 0)}}
@media(prefers-reduced-motion:reduce){.ht-chip ins,.ht-t,.hero-product.is-switching .hv-focus,.hero-product.is-leaving .hv-focus,.ht-diff.is-out .ht-t,.ht-diff.is-out .ht-chip ins{animation:none}}

/* ─── Take the design out of the browser: one section, three phases. A rail of Read, Export and Hand off sits over one stage; the
   phase in use fills its bar, the value (#23465C) travels the link to the next node, and that phase opens below. Read ends when its
   scan does, Export when its formats have cycled, Hand off runs its own tour. Choosing a node ends the sequence. Same rail, bar and
   rhythm as the role tabs. */
.flow{display:grid;gap:var(--space-6);padding:var(--space-6);border:1px solid var(--border-standard);border-radius:var(--radius-card);background:var(--surface-elevated)}
.flow-rail{display:grid;grid-template-columns:minmax(0,1fr) minmax(var(--space-6),var(--space-12)) minmax(0,1fr) minmax(var(--space-6),var(--space-12)) minmax(0,1fr);align-items:center}
.flow-node{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;align-content:center;gap:var(--space-2) var(--space-3);min-width:0;min-height:72px;padding:var(--space-3) var(--space-4);border:1px solid var(--border-standard);border-radius:var(--radius-md);background:var(--surface-base);color:var(--text-secondary);font:inherit;text-align:start;cursor:pointer;overflow:hidden;transition:border-color var(--motion-panel) var(--ease-fluid),background var(--motion-panel) var(--ease-fluid),opacity var(--motion-panel) var(--ease-fluid)}
.flow-node:hover{border-color:var(--border-strong)}
.flow-node:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
.flow-node[aria-selected=true]{border-color:color-mix(in srgb,var(--accent) 55%,var(--border-standard));background:var(--surface-selected);color:var(--text-primary)}
.flow:not(.is-reached-1) .flow-node:nth-of-type(n+2),.flow.is-reached-1:not(.is-reached-2) .flow-node:nth-of-type(3){opacity:.78} /* steps not reached yet: dimmed, but their text stays above 4.5:1 (.6 measured 3.66:1) */
.flow-node[aria-selected=true]{opacity:1}
.x-step{display:flex;align-items:center;gap:var(--space-2);margin:0;color:inherit;font:500 var(--text-md)/1 var(--font-mono)}
.x-step span{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 var(--space-1);border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);border-radius:var(--radius-sm);color:var(--accent);font-size:var(--text-base);transition:background var(--motion-panel) var(--ease-fluid),color var(--motion-panel) var(--ease-fluid),border-color var(--motion-panel) var(--ease-fluid)}
.flow-node[aria-selected=true] .x-step span,.flow-node.is-done .x-step span{background:var(--accent);border-color:var(--accent);color:var(--text-inverse)}
.flow-node small{grid-row:1;grid-column:2;font:var(--text-sm) var(--font-mono);color:var(--text-accent)}
.x-thread{display:inline-flex;align-items:center;gap:var(--space-2);grid-column:1/-1;grid-row:2;min-width:0;padding:0;border:0;background:none;color:var(--text-secondary);font:var(--text-sm)/1.6 var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.x-thread i{flex:none;width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.x-thread del{color:var(--text-muted)}
.x-thread ins{color:var(--text-accent);text-decoration:none}
.flow-fill{position:absolute;inset-inline:var(--space-4);bottom:0;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left center}
/* The link between two nodes: a line with an arrowhead that fills once the next phase is reached; the value runs along it. */
.flow-link{position:relative;display:block;height:2px;margin-inline:var(--space-2);border-radius:2px;background:var(--border-strong)}
.flow-link::after{content:"";position:absolute;inset-inline-end:-1px;top:-3px;width:6px;height:6px;border-top:2px solid var(--border-strong);border-right:2px solid var(--border-strong);transform:rotate(45deg);transition:border-color var(--motion-panel) var(--ease-fluid)}
.flow-link i{position:absolute;inset:0;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform 520ms var(--ease-fluid)}
.flow-link.is-reached i{transform:scaleX(1)}
.flow-link.is-reached::after{border-color:var(--accent)}
.flow-link.is-run::before{content:"";position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px 2px color-mix(in srgb,var(--accent) 55%,transparent);animation:flow-run 640ms var(--ease-fluid) both}
@keyframes flow-run{from{left:0;opacity:0}15%{opacity:1}85%{opacity:1}to{left:calc(100% - 10px);opacity:0}}
.flow-stage{position:relative;overflow:clip;transition:height 360ms var(--ease-fluid)}
.flow-pane{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.flow-pane[hidden]{display:none}
.flow-pane>h3{margin:0;font-size:var(--text-2xl);font-weight:500;letter-spacing:-.03em;color:var(--text-primary)}
.flow-pane>p{margin:0;color:var(--text-secondary);line-height:1.6;max-width:56ch}
@media(prefers-reduced-motion:no-preference){.flow-pane:not([hidden]){animation:flow-in 420ms var(--ease-fluid) both}}
@keyframes flow-in{from{opacity:0;transform:translateX(16px)}}
@media(prefers-reduced-motion:reduce){.flow-stage,.flow-link i{transition:none}}
@media(max-width:800px){.flow{padding:var(--space-4)}.flow-rail{grid-template-columns:auto var(--space-4) auto var(--space-4) auto;justify-content:space-between}.flow-node{min-height:48px;padding:var(--space-2)}.x-step{gap:var(--space-1);font-size:var(--text-sm);white-space:nowrap}.flow-node .x-thread,.flow-node small{display:none}.flow-link{margin-inline:var(--space-1)}}

/* ─── Read, round 12: one scan scene. The scan passes over the miniature Halden page, each picked part lifts its value into the row
   of its tab (the six tabs of the Scan panel) and the audit counts up. The rows are the last frame; while the scene plays the ones
   not reached wait dimmed. Same engine, marks and motion as the role scenes above. */
.rv-read{margin:var(--space-2) 0 0}
.rv-read .rv-board{padding:30px 18px 34px}
.rv-read .rv-page{gap:22px;padding:14px 14px 16px}
.rv-read .rv-h{font-size:19px}
.rv-img{display:block;width:100%;height:58px;object-fit:cover;border-radius:6px}
.rd-ledger{display:grid;gap:2px;margin:0;padding:0;list-style:none;min-width:0}
.rd-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:var(--space-3);align-items:center;min-height:48px;padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);transition:opacity 420ms var(--ease-fluid),background 900ms ease}
.rd-row>[data-icon]{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.rd-row>[data-icon] svg{width:17px;height:17px}
.rd-text b{display:block;font-weight:500;font-size:var(--text-lg);color:var(--text-primary)}
.rd-text small{display:block;font:var(--text-sm)/1.4 var(--font-mono);color:var(--text-accent)}
.rd-val{display:inline-flex;align-items:center;gap:var(--space-2);min-width:40px;justify-content:flex-end;transition:opacity 320ms var(--ease-fluid)}
.rd-dots{display:inline-flex;gap:4px}
.rd-dots i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.rd-aa{font:400 24px/1 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;color:var(--text-primary)}
.rd-thumb{width:26px;height:32px;object-fit:cover;border-radius:4px;box-shadow:0 0 0 1px var(--border-standard)}
.rd-chip{padding:2px var(--space-2);border:1px solid var(--border-standard);border-radius:var(--radius-full);font:500 var(--text-sm)/1.5 var(--font-mono);color:var(--text-secondary)}
.rd-ring{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:radial-gradient(closest-side,var(--surface-base) 72%,transparent 75% 100%),conic-gradient(var(--text-success) calc(var(--v) * 1turn),var(--border-standard) 0);font:600 var(--text-sm)/1 var(--font-mono);color:var(--text-primary)}
.rd-row.is-new{background:var(--surface-hover)}
.rv-read.is-playing .rd-row:not(.is-in){opacity:.4}
.rv-read.is-playing .rd-row:not(.is-in) .rd-val{opacity:0}
/* Phones: FAQ rows sized to their content (a 44px tap target, not 70px+ of padding), and no double gap before the closing call to action */
@media(max-width:600px){
  #faq .faq-list details{padding-block:var(--space-1)}
  #faq .faq-list summary{min-height:44px;padding-block:var(--space-2)}
  #faq .faq-list details>p{padding-top:var(--space-1);padding-bottom:var(--space-3)}
  .section.faq-layout{padding-bottom:var(--space-6)}
  .final-cta{padding-top:var(--space-6)}
}