/* ===== chart.css — byte-exact relocation of the page's inline cascade
   (V185 lineage). Order preserved; layer comments intact. ===== */

    @font-face { font-family: 'Archivo'; src: url('/fonts/archivo-var-latin.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
    @font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/plexmono-400-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
    @font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/plexmono-500-latin.woff2') format('woff2'); font-weight: 500; font-display: swap; }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
    body { background: var(--surface-page); color: var(--text-strong); font-family: 'Archivo','Archivo Fallback', ui-sans-serif, system-ui, sans-serif; font-size: clamp(16px, 15.1px + 0.26vw, 18.6px); line-height: 1.6; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    a { color: inherit; }
    .wrap { max-width: 720px; margin: 0 auto; padding: 0 22px; }
    nav { border-bottom: 1px solid var(--rule-on-light); background: var(--surface-page); }
    .nav-inner { max-width: 1080px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; justify-content: space-between; }
    .brand { display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: 0.18em; text-decoration: none; font-size: 17px; }
    .brand svg { width: 28px; height: 28px; border-radius: 6px; }
    .nav-links { display: flex; align-items: center; gap: 26px; font-size: 14.5px; }
    .nav-links a { text-decoration: none; color: var(--text-body); }
    .nav-links a:hover { color: var(--text-strong); }
    .nav-links a[aria-current="page"] { color: var(--text-strong); }
    .btn { display: inline-block; text-decoration: none; background: var(--btn-fill); color: var(--btn-label) !important; font-weight: 700; padding: 9px 16px; border-radius: 8px; font-size: 14px; }
    .nav-inner { position: relative; }
    .mz-burger { display: none; background: none; border: 1px solid var(--rule-soft); border-radius: 8px; padding: 9px 13px; font-size: 18px; line-height: 1.3; color: var(--text-strong); cursor: pointer; }
    @media (max-width: 760px) {
      .nav-links a:not(.btn) { display: none; }
      .nav-links { display: flex; }
      .mz-burger { display: inline-block; }
      .nav-links.open { flex-direction: column; align-items: stretch; text-align: center; position: absolute; top: 100%; left: 0; right: 0; background: var(--surface-page); border-bottom: 1px solid var(--rule-on-light); padding: 6px 22px 16px; gap: 0; z-index: 150; box-shadow: 0 14px 30px rgba(24,24,26,.08); }
      .nav-links.open a { display: block !important; padding: 13px 0; border-bottom: 1px solid #efeee9; font-size: 16px; }
      .nav-links.open a.btn { border: 0; margin-top: 10px; text-align: center; }
    }
    section { padding: 74px 0; }
    section:first-of-type { padding-top: 44px; }
    .eyebrow { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-on-light); font-weight: 500; }
    h1 { font-weight: 800; letter-spacing: -0.02em; font-size: 42px; line-height: 1.1; margin: 14px 0 8px; }
    h2 { font-weight: 800; letter-spacing: -0.015em; font-size: 27px; margin: 0 0 14px; line-height: 1.15; }
    p { color: var(--text-body); margin-bottom: 21px; }
    .ar { display: block; font-size: 72px; line-height: 1.25; color: var(--text-strong); margin: 34px 0 4px; }
    .def { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 26px; }
    .def b { color: var(--text-strong); font-weight: 500; }
    .rule { border: 0; border-top: 1px solid var(--rule-on-light); margin: 58px 0; }
    .quiet { background: var(--text-on-dark); border-top: 1px solid var(--rule-on-light); border-bottom: 1px solid var(--rule-on-light); }
    .verify { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; color: var(--accent-on-light); text-decoration: none; border-bottom: 1px solid var(--accent-on-light); padding-bottom: 2px; }
    .back { display: inline-block; margin-top: 34px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; color: var(--accent-on-light); text-decoration: none; }
    .back:hover { color: var(--accent-pressed); }
    footer { border-top: 1px solid var(--rule-on-light); padding: 34px 0 44px; }
    .foot { max-width: 1100px; margin: 0 auto; padding: 0 22px; font-size: 13.5px; color: var(--text-muted); }
    .foot a { color: var(--text-muted); }
    .disclaimer { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; line-height: 1.7; color: var(--text-subtle); max-width: 640px; margin-top: 14px; }
    :focus-visible { outline: 3px solid var(--accent-on-light); outline-offset: 2px; }
    @media (max-width: 640px) { h1 { font-size: 34px; } .ar { font-size: 58px; } section { padding: 56px 0; } section:first-of-type { padding-top: 28px; } }
  ::selection { background: var(--accent-on-light); color: var(--surface-page); }
  
    /* V54 duotone chrome */
    nav { background: rgba(15,17,21,0.92) !important; border-bottom: 1px solid var(--rule-on-dark) !important; }
    nav a { color: var(--text-on-dark-muted) !important; } nav a:hover { color: var(--accent-on-dark) !important; }
    nav .brand, nav .brand a { color: var(--text-on-dark) !important; }
    footer { background: var(--surface-night) !important; border-top: 1px solid var(--rule-on-dark) !important; color: var(--text-on-dark-muted) !important; }
    footer a { color: var(--text-on-dark-muted) !important; } footer a:hover { color: var(--accent-on-dark) !important; }
    footer .foot-brand { color: var(--text-on-dark) !important; }
    footer p { color: var(--text-on-dark-muted); }

    /* chart gallery */
    .figures { display: flex; flex-direction: column; gap: 34px; margin-top: 40px; }
    figure { background: var(--surface-night); border-radius: 16px; padding: 14px; }
    figure img { border-radius: 10px; width: 100%; height: auto; display: block; }
    figure a { cursor: zoom-in; }
    figcaption { font-family: 'Archivo','Archivo Fallback', system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 1.6; letter-spacing: .01em; color: #b7b6b0; padding: 14px 12px 8px; text-align: center; max-width: 62ch; margin: 0 auto; }
    figcaption b { display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: .09em; color: var(--text-on-dark); font-weight: 500; margin-bottom: 6px; }
    .restraint { margin-top: 44px; background: #fff; border: 1px solid var(--rule-on-light); border-left: 5px solid var(--accent-on-light); border-radius: 14px; padding: 28px; }
    .restraint h2 { font-size: 20px; font-weight: 800; margin-bottom: 10px; }
    .restraint p { color: var(--text-body); font-size: 16px; max-width: 700px; margin-inline: auto; }
    .restraint .kicker { font-weight: 700; color: var(--text-strong); margin-top: 14px; }
    .yt-lite { position: relative; padding-bottom: 56.25%; height: 0; background: var(--surface-night); border-radius: 10px; overflow: hidden; cursor: pointer; display: block; }
    .yt-lite img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
    .yt-lite iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
    .yt-play { position: absolute; top: 50%; left: 50%; margin: -26px 0 0 -37px; width: 74px; height: 52px; background: var(--btn-fill); border-radius: 12px; color: var(--text-on-dark); font-size: 20px; text-align: center; line-height: 52px; transition: transform .15s ease, background .15s ease; }
    .yt-lite:hover .yt-play { background: var(--accent-pressed); transform: scale(1.06); }
    .gal-cta { margin-top: 40px; text-align: center; }
    .gal-cta .btn { font-size: 15px; padding: 12px 22px; }
    .gal-note { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: var(--text-muted); margin-top: 12px; text-align: center; }
    section:first-of-type .wrap > .eyebrow, section:first-of-type .wrap > h1,
    section:first-of-type .wrap > .h1-quip { display: block; text-align: center; }
    section:first-of-type .wrap > .h1-quip + p { text-align: center; max-width: 660px; margin-left: auto; margin-right: auto; }

    /* dark chrome: mobile burger + open menu (matches about page) */
    .mz-burger { color: var(--text-on-dark) !important; background: transparent !important; border: 1px solid var(--rule-on-dark-strong) !important; border-radius: 8px; padding: 7px 12px !important; font-size: 20px !important; line-height: 1 !important; }
    .mz-burger:hover, .mz-burger:focus-visible { color: var(--accent-on-dark) !important; border-color: var(--accent-on-light) !important; }
    .nav-links.open { background: var(--surface-night-2) !important; border-bottom: 1px solid var(--rule-on-dark) !important; box-shadow: 0 22px 48px rgba(0,0,0,0.55); }
    .nav-links.open a { color: var(--text-on-dark-soft) !important; border-bottom: 1px solid var(--rule-on-night) !important; }
    .nav-links.open a:hover { color: var(--accent-on-dark) !important; }
    .nav-links.open a.btn { color: #fff !important; border-bottom: 0 !important; }

    /* Soft cross-page fade in supporting browsers, motion-safe only */
    @media not (prefers-reduced-motion: reduce) { @view-transition { navigation: auto; } }
  
    .where-next { margin: 34px 0 26px; }
    .where-next .wn-grid { display: flex; flex-wrap: wrap; gap: 14px; }
    .where-next a.wn { flex: 1 1 220px; display: flex; flex-direction: column; justify-content: center; background: #fff; border: 1px solid var(--rule-on-light); border-radius: 12px; padding: 18px 20px; text-decoration: none; color: inherit; text-align: center; transition: border-color .15s ease; }
    .where-next a.wn:hover { border-color: var(--accent-on-light); }
    .where-next .k { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .24em; color: #2f5a44; display: block; margin-bottom: 8px; }
    .where-next p { font-size: 14px; color: var(--text-body); margin: 0; line-height: 1.5; }
  
    /* ---------- centering layer ---------- */
    section .wrap { text-align: center; }
    section .wrap p { margin-left: auto; margin-right: auto; }
    section .wrap h1, section .wrap h2 { margin-left: auto; margin-right: auto; }
    .gal-note { text-align: center; }
    figcaption { text-align: center; margin-left: auto; margin-right: auto; }

    footer, .foot { text-align: center; }
    .foot .disclaimer, .disclaimer { margin-left: auto; margin-right: auto; }
    .where-next .wn-grid { justify-content: center; }
    .where-next a.wn { text-align: center; }


    /* consistency: header units centered, body copy left */
    section .wrap p:not(.sub):not(.gal-note):not(.wk-sub) { text-align: left; max-width: 720px; margin-left: auto; margin-right: auto; }


/* ===== V95 UPSCALE LAYER — precision micro-interactions, motion only on affordances ===== */
h1, h2, h3 { text-wrap: balance; }
p, .sub, figcaption { text-wrap: pretty; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
:where(a, button, summary, [role="button"], input, .btn):focus-visible { outline: 2px solid var(--accent-on-light); outline-offset: 3px; border-radius: 4px; }
.price-num, .ts-price, .score-num, .ps-num, .bd-row .v { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation-duration: .20s; }
  ::view-transition-new(root) { animation-duration: .24s; }

  /* buttons: lift, glow, press */
  .btn { transition: transform .18s cubic-bezier(.2,.7,.3,1.2), box-shadow .22s ease, background-color .18s ease, color .18s ease, border-color .18s ease; }
  .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(26,127,83,.30), 0 2px 6px rgba(0,0,0,.16); }
  .btn:active { transform: translateY(0) scale(.98); box-shadow: 0 2px 8px rgba(26,127,83,.22); transition-duration: .06s; }

  /* nav links: hairline underline that draws itself */
  nav a:not(.btn) { position: relative; }
  nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; opacity: .65; transform: scaleX(0); transform-origin: left center; will-change: transform; transition: transform .22s cubic-bezier(.2,.7,.3,1); }
  nav a:not(.btn):hover::after, nav a:not(.btn):focus-visible::after { transform: scaleX(1); }

  /* arrow links nudge forward */
  .get, .back, .wb-all { transition: transform .18s cubic-bezier(.2,.7,.3,1), color .16s ease; display: inline-block; }
  .get:hover, .back:hover, .wb-all:hover { transform: translateX(2px); }

  /* clickable cards + proof figures: quiet elevation */
  .wn, .wb-grid a { transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .22s ease; }
  .wn:hover, .wb-grid a:hover { transform: translateY(-2px); }
  figure { transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease; }
  figure:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(15,17,21,.26); }
  figure a img { transition: filter .25s ease; }
  figure a:hover img { filter: brightness(1.05); }

  /* FAQ: answers rise into place, marker eases */
  details summary { transition: color .16s ease; }
  details[open] > p { animation: mzFaqIn .32s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes mzFaqIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

  /* form inputs: focus breathes */
  input[type="email"], input[type="text"] { transition: border-color .18s ease, box-shadow .18s ease; }
  input[type="email"]:focus, input[type="text"]:focus { box-shadow: 0 0 0 3px rgba(26,127,83,.18); }
}

/* ---- touch devices: press feedback replaces hover; luxury is response ---- */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (hover: none) and (pointer: coarse) {
  input[type="email"], input[type="text"] { font-size: 16px; } /* prevents iOS focus zoom */
}
@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  a:active, summary:active { opacity: .62; transition: opacity .06s ease; }
  .btn:active { transform: scale(.97); opacity: 1; }
  .wn:active, .wb-grid a:active, .tool:active, figure:active { transform: scale(.985); transition: transform .1s ease; }
  .get:active, .back:active, .wb-all:active { transform: translateX(2px); opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  #mzNav.open { animation: mzMenuIn .22s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes mzMenuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

/* ---- V97 platform layer: 2025-era CSS, all progressive ---- */
:root { interpolate-size: allow-keywords; accent-color: var(--accent-on-light); }
html { scrollbar-gutter: stable; }
h1, h2 { text-box: trim-both cap alphabetic; }
p, figcaption { hanging-punctuation: first; }
#mzNav.open, .lightbox { overscroll-behavior: contain; }
#mzNav { view-transition-name: mizan-nav; }
.brand { view-transition-name: mizan-brand; }
#mzNav .btn { view-transition-name: mizan-nav-cta; }

@media (prefers-reduced-motion: no-preference) {
  /* details finally animates its height: the FAQ opens like a drawer, not a trapdoor */
  details::details-content { block-size: 0; overflow-y: clip; transition: block-size .34s cubic-bezier(.2,.7,.3,1), content-visibility .34s allow-discrete; }
  details[open]::details-content { block-size: auto; }

  /* reading progress hairline, scroll-driven, zero JS */
  @supports (animation-timeline: scroll()) {
    body::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--accent-on-light); transform-origin: 0 50%; transform: scaleX(0); animation: mzProgress linear both; animation-timeline: scroll(root); z-index: 9999; pointer-events: none; }
    @keyframes mzProgress { to { transform: scaleX(1); } }
  }
}

/* render-on-demand for long pages: off-screen sections cost nothing */

/* ---- V98: 48px touch floor on coarse pointers — hit areas grow, layout does not ---- */
@media (pointer: coarse) {
  .mz-burger { min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
  .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
  .brand { display: inline-flex; align-items: center; min-height: 48px; }
  #mzNav.open a:not(.btn) { display: flex; align-items: center; min-height: 48px; }
  .mz-reseed, .get { min-height: 44px; display: inline-flex; align-items: center; }
  .shelf a { display: inline-block; }
  .foot > p a, .foot-links a, .disclaimer a, a[href^="mailto:"] { padding-block: 15px; padding-inline: 8px; margin-block: -15px; margin-inline: -8px; display: inline-block; }
  .namelink a, .wb-all, .wb-line a, .back, .verify, .founder a, .gal-note a, .price-trial a, .read-note a, .ts-buy a, .mz-realtape, .sim-note a, .demo-note a, .hero-proof a { padding-block: 14px; margin-block: -14px; display: inline-block; }
  input[type="range"] { min-height: 44px; }
  summary { min-height: 48px; display: flex; align-items: center; }
}




/* V151 armor: invisible unless needed. clip kills any future 320px spill
   without creating a scroll container (sticky-safe); focus ring appears
   for keyboard users only. */
@supports (overflow: clip) { html { overflow-x: clip; } }
:focus-visible { outline: 2px solid var(--accent-on-light); outline-offset: 2px; border-radius: 2px; }


/* V152 rhythm: section labels get presence + guaranteed air, every page.
   Later in cascade at equal (0,1,0) specificity, so these declarations win
   for exactly the properties set; per-theme colors (.dark/.thD/.thL at
   (0,2,0)) still own color. display:block makes margin-bottom real on the
   span-based labels; gaps only grow, never shrink. */
.eyebrow { display: block; font-size: 13px; font-weight: 500; letter-spacing: 0.26em; margin-bottom: 18px; }
.who-k { font-size: 12.5px; letter-spacing: .22em; margin: 30px 0 14px; }
/* V153: heading rhythm, by default, everywhere.
   (a) .h1-quip carried margin: -8px ... — a negative top margin that shoved
   it into any large headline. Neutralized globally: +14px, same (0,1,0)
   specificity, later in cascade wins.
   (b) Every bold header gets a guaranteed floor of air before the next
   paragraph. Adjacent-sibling margins COLLAPSE (larger wins), so gaps
   only rise to 12px where they were tighter — nothing shrinks. */
.h1-quip { margin-top: 14px; }
h1 + p, h2 + p, h3 + p { margin-top: 12px; }
/* V157: trademark superscript — small, quiet, no line-box inflation */
.tm { font-size: .42em; vertical-align: .6em; letter-spacing: 0; opacity: .78; font-weight: 500; margin-left: 1px; }
.brand .tm { margin-left: -10px; }


/* V162 (rebased on V157 per owner): nav consistency, ZERO mechanics changed.
   The V158-V161 overlay/scroll-lock/armor system is deliberately NOT here —
   it misbehaved on real iPhones. The menu stays V157's simple absolute
   dropdown; this block only unifies its skin across all pages:
   - dark dropdown everywhere (index's own proven recipe, ported)
   - link text LEFT-aligned everywhere (chart alone was centered; majority wins)
   - burger identical everywhere (methodology shipped invisible: light glyph
     on the dark bar), green on hover/focus/open
   - burger breakpoint 760 -> 860 so seven links never wrap on small tablets */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .mz-burger { display: inline-flex; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface-night-2) !important; border-bottom: 1px solid var(--rule-on-dark) !important;
    box-shadow: 0 22px 48px rgba(0,0,0,.55);
    padding: 6px 22px 16px; gap: 0; z-index: 150;
  }
  .nav-links.open a {
    display: block; padding: 13px 0 !important;
    border-bottom: 1px solid var(--rule-on-night) !important;
    font-size: 16px; text-align: center !important;
    color: var(--text-on-dark-soft) !important; text-decoration: none;
  }
  .nav-links.open a:hover, .nav-links.open a:active { color: var(--accent-on-dark) !important; }
  .nav-links.open a.btn {
    border-bottom: 0 !important; margin-top: 10px; text-align: center !important;
    background: var(--btn-fill) !important; color: var(--text-on-dark) !important; border-radius: 10px;
  }
}
.mz-burger {
  color: var(--text-on-dark) !important; background: transparent !important;
  border: 1px solid var(--rule-on-dark-strong) !important; border-radius: 8px !important;
  padding: 7px 12px !important; font-size: 20px !important; line-height: 1 !important;
  cursor: pointer; touch-action: manipulation;
}
.mz-burger:hover, .mz-burger:focus-visible,
.mz-burger[aria-expanded="true"] { color: var(--accent-on-dark) !important; border-color: var(--accent-on-light) !important; }


/* V173: footer restructure — links row, icon row, attribution pushed down.
   Icons inline SVG (currentColor), green on hover, 44px tap targets. */
.foot-soc { margin: 14px 0 0; display: flex; justify-content: center; gap: 26px; }
.foot-soc a { color: var(--text-subtle); display: inline-flex; padding: 12px; margin: -12px; }
.foot-soc a:hover, .foot-soc a:focus-visible { color: var(--accent-on-dark); }
.foot-soc svg { width: 19px; height: 19px; fill: currentColor; display: block; }
.foot-attrib { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.08em; color: var(--text-subtle); margin: 16px 0 0; text-align: center; }


/* V181: scroll progress bar — single deterministic driver. The native
   scroll-driven animation (body::after + animation-timeline) glitched on
   real WebKit: a tap triggers a style recompute and the animation
   momentarily resolves against a stale timeline snapshot (the ~half
   jump), re-linking on the next scroll. Native path removed; the JS
   rAF driver now runs for everyone. Same lesson as the nav rollback:
   mechanisms this toolchain cannot test on real WebKit stay boring. */
body::after { content: none !important; animation: none !important; }


.lb{position:fixed;inset:0;z-index:1000;background:rgba(8,10,14,.93);display:flex;align-items:center;justify-content:center;cursor:zoom-out;opacity:0;transition:opacity .18s ease}
.lb.on{opacity:1}
.lb img{max-width:94vw;max-height:92vh;max-height:88dvh;border-radius:10px;box-shadow:0 24px 80px rgba(0,0,0,.55);cursor:zoom-in;display:block}
.lb.zoom{display:block;overflow:auto;-webkit-overflow-scrolling:touch}
.lb.zoom img{max-width:none;max-height:none;width:auto;margin:4vh auto;padding:0 4vw;cursor:zoom-out;border-radius:0;box-shadow:none}
.lb-x{position:fixed;top:14px;right:18px;z-index:1001;font:400 30px/1 system-ui;color:#e8e6df;background:none;border:0;cursor:pointer;opacity:.75}
.lb-x:hover{opacity:1}
@media (prefers-reduced-motion: reduce){.lb{transition:none}}


/* V188 */
.wn .k { font-weight: 700; }

/* V190: free's proven lightbox, ported verbatim */
.lb{position:fixed;inset:0;z-index:1000;background:rgba(8,10,14,.93);display:flex;align-items:center;justify-content:center;cursor:zoom-out;opacity:0;transition:opacity .18s ease}
.lb.on{opacity:1}
.lb img{max-width:94vw;max-height:92vh;max-height:88dvh;border-radius:10px;box-shadow:0 24px 80px rgba(0,0,0,.55);cursor:zoom-in;display:block}
.lb.zoom{display:block;overflow:auto;-webkit-overflow-scrolling:touch}
.lb.zoom img{max-width:none;max-height:none;width:auto;margin:4vh auto;padding:0 4vw;cursor:zoom-out;border-radius:0;box-shadow:none}
.lb-x{position:fixed;top:14px;right:18px;z-index:1001;font:400 30px/1 system-ui;color:#e8e6df;background:none;border:0;cursor:pointer;opacity:.75}
.lb-x:hover{opacity:1}
@media (prefers-reduced-motion: reduce){.lb{transition:none}}

/* V205: desktop lightbox zoom actually magnifies (same rule as index.css V204) */
@media (min-width: 1000px) and (hover: hover) {
  .lb.zoom img { width: min(170vw, 2800px); height: auto; }
}

/* V211: a unit never breaks mid-phrase — wraps happen between items */
.nb { white-space: nowrap; }


/* V216: mobile menu text centered — final word, every page, every entry point */
@media (max-width: 900px) {
  .nav-links.open { text-align: center !important; }
  .nav-links.open a,
  .nav-links.open a.btn { text-align: center !important; }
}


/* V226: "where next" cards were #fff slabs with an invisible #e6e4dc border
   sitting on the #0f1115 footer — that border is the tell that this component
   predates the V54 dark footer. Outlined instead of filled; border defines the
   card, which is what the light version always did. #2e333b is the existing
   .mz-burger border token, so no new colour enters the system. */
.where-next a.wn {
  background: transparent; border-color: var(--rule-on-dark-strong);
  transition: border-color .18s ease, background-color .18s ease, transform .22s cubic-bezier(.2,.7,.3,1);
}
.where-next a.wn:hover, .where-next a.wn:focus-visible {
  border-color: var(--accent-on-light); background: rgba(26,127,83,.07);
}
.where-next .k { color: var(--accent-on-dark); }
.where-next p { color: var(--text-on-dark-muted); }


/* ===== V230: touch feedback =====
   Every interactive element on the site had :hover styling and no :active.
   On a phone there is no hover, so a tap produced no visual response at all
   until the next paint — the main thing that makes a good site feel slow on
   mobile. Gated to (hover: none) and (pointer: coarse) so desktop behaviour
   is byte-for-byte unchanged. Small controls get a press-in; large cards get
   opacity only, because scaling a big card reads as cheap. */
@media (hover: none) and (pointer: coarse) {
  .btn, .btn-ghost, .verify-btn, .mz-burger, .lb-x, .foot-soc a,
  .jump a, .shelf a, .yt-lite, .yt-play, summary, [role="button"] {
    transition: transform .12s cubic-bezier(.2,.7,.3,1), opacity .12s ease, background-color .12s ease;
  }
  .btn:active, .btn-ghost:active, .verify-btn:active, .mz-burger:active,
  .lb-x:active, .foot-soc a:active, .jump a:active, .shelf a:active,
  summary:active, [role="button"]:active {
    transform: scale(.97);
    opacity: .92;
  }
  /* the most-tapped element on the site: press the play button, not the frame */
  .yt-lite:active .yt-play { transform: scale(.94); background: var(--accent-pressed); }

  /* large surfaces: no scale, just a settle */
  .card, .band-card, .tool, .where-next a.wn, .wn {
    transition: opacity .12s ease, border-color .18s ease, background-color .18s ease;
  }
  /* card-links are handled by the canonical :active treatment below;
     only non-link surfaces keep the opacity press. */
  .tool:active { opacity: .88; }
}
/* reduced motion: keep the feedback, drop the movement */
@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
  .btn:active, .btn-ghost:active, .verify-btn:active, .mz-burger:active,
  .lb-x:active, .foot-soc a:active, .jump a:active, .shelf a:active,
  summary:active, [role="button"]:active,
  .yt-lite:active .yt-play { transform: none; opacity: .85; }
}


/* V237: the week block. Two headings now split the gallery, so they need to
   read as section breaks rather than page titles. */
.wk-h {
  font-size: clamp(19px, 2.2cqi + 12px, 26px);
  letter-spacing: -0.01em; text-align: center;
  margin: 54px auto 10px; max-width: 760px;
  text-wrap: balance;                /* short heading: even the line lengths */
}
.wk-h + .wk-sub {
  font-size: 15px; line-height: 1.6; color: var(--text-muted);
  text-align: center; margin: 0 auto 26px; max-width: 620px;
  text-wrap: balance;                /* centred copy reads badly with a ragged
                                        last line; balance evens the measure */
}
.figures + .wk-h { margin-top: 54px; padding-top: 34px; border-top: 1px solid var(--rule-on-light); }
@media (max-width: 760px) {
  .wk-h { margin-top: 34px; }
  .figures + .wk-h { margin-top: 38px; padding-top: 26px; }
}


/* V248: chart page reads as one centred column.
   Its only long-form element is the intro paragraph; everything below it
   (figcaptions, week headings, gallery notes) was already centred, so the
   left-aligned intro was the odd one out. Measure narrowed because centred
   text needs a shorter line than left-aligned text to stay readable. */
section .wrap p:not(.sub):not(.gal-note):not(.wk-sub) {
  text-align: center;
  max-width: 660px;
  margin-inline: auto;
}

/* V289 — the green frame around a clicked chart, back on desktop.
   The lightbox restores focus to the opener anchor when it closes. That ring
   was coming from the global :focus-visible rule, but browsers only match
   :focus-visible on programmatic focus when the last input was a keyboard —
   so closing the box with a mouse (desktop) silently dropped it, while touch
   kept it. These image links take a plain :focus ring, so the frame lights
   green however the box was closed. */
a[href$=".png"]:focus, a[href$=".webp"]:focus,
a[href$=".jpg"]:focus, a[href$=".jpeg"]:focus {
  outline: 2px solid var(--accent-on-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* V290 — the green frame, made deterministic.
   :focus-visible never fired for a mouse-closed lightbox; plain :focus was at
   the mercy of how each engine reassigns focus on mousedown. So the lightbox
   now sets this class on the image it came from and clears it on the next
   click, tap or keypress. Same result on every device, no heuristics. */
.lb-lit {
  outline: 2px solid var(--accent-on-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* V291 — why the green frame drew on /free and not here.
   free.css has `.shots3 a { display: block }`. On this page the image anchor
   was left inline, and an inline box wrapping a block-level <img> has almost
   no box of its own — Blink draws the outline around the empty inline
   fragments (invisible), WebKit around the whole bounding box (the frame you
   saw on the phone). Same rule as /free; the anchor now owns the image box. */
figure > a[href$=".png"], figure > a[href$=".webp"],
figure > a[href$=".jpg"], figure > a[href$=".jpeg"] { display: block; border-radius: 10px; }

/* v292 — mobile sticky trial bar, ported from index.css (v151 lineage).
   Fully self-contained: every selector here is new to this file (verified:
   zero prior hits for .sticky-cta / .sc-txt in chart.css), so nothing in the
   existing cascade is touched. Desktop never sees it; the footer gets bottom
   clearance inside the same query so the bar can't sit on the last links.
   The doubled-class .sticky-cta .btn override follows the site convention
   for safe specificity. */
.sticky-cta { display: none; }
@media (max-width: 760px) {
  .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: rgba(15,17,21,0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 12px calc(18px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left)); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; gap: 12px; transform: translateY(110%); transition: transform .25s ease; }
  .sticky-cta.on { transform: translateY(0); }
  .sticky-cta .sc-txt { color: var(--text-on-dark); font-size: 13px; font-family: 'IBM Plex Mono', ui-monospace, monospace; }
  .sticky-cta .btn { padding: 9px 18px; font-size: 14px; white-space: nowrap; }
  footer { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }