@font-face{font-family:"HN Display";src:url("assets/fonts/HelveticaNowDisplay-Light.woff2") format("woff2");font-weight:300;font-display:block}
@font-face{font-family:"HN Display";src:url("assets/fonts/HelveticaNowDisplay-Regular.woff2") format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"HN Display";src:url("assets/fonts/HelveticaNowDisplay-Medium.woff2") format("woff2");font-weight:500;font-display:block}
@font-face{font-family:"HN Text";src:url("assets/fonts/HelveticaNowText-Regular.woff2") format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"HN Text";src:url("assets/fonts/HelveticaNowText-Medium.woff2") format("woff2");font-weight:500;font-display:block}
@font-face{font-family:"HN Micro";src:url("assets/fonts/HelveticaNowMicro-Medium.woff2") format("woff2");font-weight:500;font-display:block}

:root{
  --ink:#000; --paper:#fff; --mute:#666; --hair:#000; --divider:#E5E5E5;
  --accent:#1F2EFF;                 /* electric. The ONLY accent. Never add a second. */
  --font-d:"HN Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-t:"HN Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-m:"HN Micro","HN Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gutter:clamp(20px,4vw,64px); --max:1280px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-t);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}            /* belt-and-braces; V-6 asserts the real fix */
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:99}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.hd{border-bottom:1px solid var(--hair)}
/* Body-level bar (NOT nested in .hd): sticky containing block = the document,
   so it holds top:0 for the entire scroll. Full-bleed, opaque --paper ground
   occludes frames scrolling under it, own bottom hairline. */
.hd__bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:12px var(--gutter);background:var(--paper);border-bottom:1px solid var(--divider)}
.hd__mark{display:block;height:24px;width:auto}
.hd__toggle{display:flex;border:1px solid var(--hair);border-radius:9999px;overflow:hidden}
.hd__toggle button{appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:var(--font-m);font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  padding:8px 16px;color:var(--ink)}
.hd__toggle button[aria-pressed="true"]{background:var(--accent);color:var(--paper)}
.hd__intro{max-width:var(--max);margin:0 auto;padding:56px var(--gutter) 40px}
.eyebrow{font-family:var(--font-m);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);margin:0 0 12px}
h1{font-family:var(--font-d);font-weight:400;font-size:clamp(32px,4.4vw,56px);line-height:1.05;letter-spacing:-.02em;margin:0 0 20px}
.hd__note{max-width:62ch;color:var(--mute);margin:0}

.grp{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.grp__hd{font-family:var(--font-m);font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--mute);border-bottom:1px solid var(--hair);padding:56px 0 12px;margin:0 0 32px}
.ft{border-top:1px solid var(--hair);margin-top:80px;padding:32px var(--gutter)}

.scr{padding-bottom:72px;border-bottom:1px solid var(--divider);margin-bottom:56px}
.scr__hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 16px}
.scr__t{font-family:var(--font-d);font-weight:500;font-size:22px;margin:0}
.scr__link{font-family:var(--font-m);font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:2px}
.scr__intent{max-width:62ch;color:var(--mute);margin:0 0 20px}
.scr__demo{max-width:62ch;margin:0 0 20px;padding:12px 14px;border:1px solid var(--hair);
  font-size:14px}
.scr__demo b{font-family:var(--font-m);font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  display:block;margin-bottom:4px}

.scr__body{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:900px){ .scr__body{grid-template-columns:minmax(0,1fr) 300px;gap:32px} }

/* The frame: fixed height, internal scroll. Image at width:100% so the
   percentage-anchored markers scale with it. */
.frame{position:relative;height:70vh;overflow:auto;border:1px solid var(--hair);background:#fff;
  -webkit-overflow-scrolling:touch}
@media (max-width:899px){ .frame{height:60vh} }
.frame__inner{position:relative;width:100%}
.frame__img{display:block;width:100%;height:auto}
/* Phone-width frame in MOBILE mode only: the 343px capture renders at ~1:1
   inside a phone-sized column instead of stretching to the full grid cell, so
   the reviewer scrolls a whole mobile screen within a phone-sized viewport
   rather than a blown-up one. Pins are % of the image, so they stay welded to
   their targets in the narrower frame. Desktop frames are untouched. */
.frame[data-mode="mobile"]{max-width:343px;margin-inline:0}

.pin{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:9999px;
  background:var(--accent);color:#fff;border:2px solid #fff;cursor:pointer;
  font-family:var(--font-m);font-size:11px;line-height:1;display:grid;place-items:center;padding:0}
.pin[aria-expanded="true"]{outline:2px solid var(--ink);outline-offset:2px}

.notes{margin:0;padding:0;list-style:none}
.notes li{border-top:1px solid var(--divider);padding:12px 0}
.notes li:first-child{border-top:0;padding-top:0}
.notes .n{font-family:var(--font-m);font-size:11px;color:var(--accent);margin-right:8px}
.notes .lbl{font-family:var(--font-t);font-weight:500}
.notes .txt{display:block;color:var(--mute);font-size:14px;margin-top:2px}
.notes li.is-active{background:rgba(31,46,255,.04)}