/* ===== free.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; }
    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%; }
    .wrap { max-width: 720px; margin: 0 auto; padding: 0 22px; }
    nav { border-bottom: 1px solid var(--rule-on-light); }
    .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; color: var(--text-strong); }
    .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: 70px 0 84px; }
    .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: clamp(32px, 2vw + 24px, 40px); line-height: 1.12; margin: 14px 0 14px; }
    .sub { color: var(--text-body); font-size: 17.5px; max-width: 620px; margin-inline: auto; }
    .wrap-wide { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
    .tools { margin-top: 12px; display: grid; gap: 16px; }
    @media (min-width: 820px) {
      .tools { grid-template-columns: 1fr 1fr; gap: 18px; }
      .tools > .tool:last-child { grid-column: 1 / -1; }
    }
    .tool { border: 1px solid var(--rule-on-light); background: #efeee9; border-radius: 12px; padding: 22px; }
    .tool { display: flex; flex-direction: column; }
    .tool > p:last-child { margin-top: 14px; }
    @media (hover: hover) and (prefers-reduced-motion: no-preference) {
      .tool { transition: transform .18s ease, box-shadow .18s ease; }
      .tool:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(24,24,26,.07); }
      .btn { transition: transform .15s ease, background-color .15s ease; }
      .btn:hover { transform: translateY(-1px); }
      .btn:active { transform: translateY(0); }
    }
    .tool h2 { font-weight: 800; font-size: 20px; margin-bottom: 8px; line-height: 1.25; }
    .tool p { color: var(--text-body); font-size: 15.5px; margin-bottom: 10px; }
    .tag { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); line-height: 1.6; }
    .tag .tsb { display: inline; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 400; font-size: 1em; letter-spacing: 0.12em; text-transform: lowercase; color: inherit; vertical-align: baseline; opacity: 1; view-transition-name: none; }
    .tool > .tag:first-child { display: block; margin-bottom: 10px; }
    .tool a.get { 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; }
    .shots3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 16px 0 10px; }
    .shots3 a { display: block; }
    .shots3 img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: contain; background: #0b0d10; display: block; border-radius: 8px; border: 1px solid #14161a; }
    .shots3 a { cursor: zoom-in; }
    .cat { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-body); padding: 30px 2px 6px; border-bottom: 1px solid var(--rule-on-light); }
    .cat:first-child { padding-top: 2px; }
    .cat { scroll-margin-top: 24px; }
    .tools > .cat:first-child { padding-top: 4px; }
    .jump { display: flex; gap: 10px; margin-top: 18px; }
    .jump a { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.08em; color: var(--text-body); text-decoration: none; border: 1px solid var(--rule-on-light); background: #efeee9; border-radius: 999px; padding: 7px 14px; }
    .jump a:hover { color: var(--text-strong); border-color: #c9c7bd; }
    .cat span { color: var(--text-subtle); letter-spacing: 0.1em; text-transform: none; font-size: 11.5px; }
    .proof-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0 6px; }
    .proof-strip .ps { border: 1px solid var(--rule-on-light); background: #efeee9; border-radius: 12px; padding: 16px 18px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; }
    .ps-num { display: block; font-weight: 800; font-size: 30px; letter-spacing: -0.02em; color: var(--accent-on-light); }
    .ps-lbl { display: block; font-size: 13.5px; color: var(--text-body); margin-top: 2px; }
    .ps a, .ps-sub { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; color: var(--text-muted); }
    @media (max-width: 680px) { .proof-strip { grid-template-columns: 1fr; } }
    .bridge { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--rule-on-light); }
    .bridge h2 { font-size: 24px; letter-spacing: -0.02em; margin: 0 0 10px; }
    .bridge p { margin-bottom: 14px; }
    input, button, select, textarea { font: inherit; letter-spacing: inherit; }
    .link { color: var(--accent-on-light); text-decoration: underline; text-underline-offset: 3px; }
    .cat-note { grid-column: 1 / -1; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--text-subtle); margin: -14px 0 6px; }
    .page-eyebrow { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-on-light); margin-bottom: 10px; }
    .shelf-cap { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: var(--text-muted); margin: 6px 0 2px; }
    /* centered page header */
    .page-eyebrow, section:first-of-type .wrap > .eyebrow, section:first-of-type .wrap > h1,
    section:first-of-type .wrap > .h1-quip, .shelf-cap { text-align: center; }
    section:first-of-type .wrap > .sub { text-align: left; max-width: 640px; margin-left: auto; margin-right: auto; }
    .shelf { justify-content: center; }
    .asks { font-size: 15px; color: var(--text-body); margin: -4px 0 12px; }
    .asks b { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-on-light); font-weight: 500; margin-right: 8px; }
    .skip { position: absolute; left: -9999px; top: 0; background: var(--btn-fill); color: var(--btn-label); padding: 10px 16px; z-index: 100; font-family: 'Archivo','Archivo Fallback', system-ui, sans-serif; border-radius: 0 0 8px 0; }
    .skip:focus { left: 0; }
    :focus-visible { outline: 2px solid var(--accent-on-light); outline-offset: 2px; }
    .shelf { display: flex; flex-wrap: wrap; gap: 12px 8px; align-items: center; margin: 14px 0 4px; }
    .shelf-h { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-on-dark); flex-basis: 100%; margin-top: 8px; text-align: center; }
    .tm { text-transform: none; }
    .tool .shots3 { margin-top: auto; }
    .shelf a { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: #e8e6df; text-decoration: none; border: 1px solid var(--rule-on-dark); border-radius: 999px; padding: 10px 14px; background: #171a20; transition: border-color .15s ease, color .15s ease, transform .15s ease; }
    .shelf a:hover { border-color: rgba(84,201,138,.6); color: var(--accent-on-dark); transform: translateY(-1px); }
    .eg { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); margin: -2px 0 12px; }
    .eg b { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; font-size: 10px; letter-spacing: 0.12em; color: var(--accent-on-light); text-transform: uppercase; margin-right: 7px; }
    .why { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--rule-on-light); color: var(--text-body); font-size: 15.5px; max-width: 620px; }
    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) { section { padding: 56px 0 64px; } }
  ::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; }

    /* V58 mobile nav + wit component */
    .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; }
    .h1-quip { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; letter-spacing: 0.08em; color: var(--accent-on-light); margin: -8px 0 24px; }

    /* V59 duotone for the Workbench */
    .freehero { background: var(--surface-night); color: var(--text-on-dark); padding: 44px 0 68px; }
    .freehero h1 { color: var(--text-on-dark); }
    .freehero .sub, .freehero p { color: #bfbeb8; }
    .freehero .sub { max-width: 60ch; margin-left: auto; margin-right: auto; line-height: 1.7; }
    .freehero .h1-quip { color: var(--accent-on-dark); }
    .freehero .shelf-cap { color: var(--text-subtle); }
    .freehero .shelf-h { color: var(--accent-on-dark); }
    .freehero .eg { color: var(--text-on-dark-muted); }
    .freehero .eg b { color: var(--accent-on-dark); }
    .freehero .shelf { background: var(--surface-night-2); border: 1px solid var(--rule-on-dark); box-shadow: 0 18px 50px rgba(0,0,0,0.45); padding: 22px 22px 26px; }
    .freehero .shelf a { background: #171a20; border-color: var(--rule-on-dark-strong); color: var(--text-on-dark-soft); }
    .freehero .shelf a:hover { border-color: var(--accent-on-light); color: var(--accent-on-dark); }
    .freetools { background: #fbfbf9; border-top: 1px solid rgba(84,201,138,0.14); padding-top: 36px; }
    @media (max-width: 640px) { .freehero { padding: 28px 0 52px; } .freetools { padding-top: 32px; } }
    @media (max-width: 760px) {
      .tool { padding: 20px 18px; }
      .tool h2 { font-size: 19px; line-height: 1.15; margin-bottom: 6px; }
      .tool > .tag:first-child { margin-bottom: 8px; }
      .tool .tag { font-size: 10px; letter-spacing: 0.1em; }
      .asks { margin: -2px 0 10px; }
    }

    /* 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 > .eyebrow, section .wrap > .page-eyebrow, section .wrap > h1,
    section .wrap > h2, section .wrap > .sub, section .wrap > .h1-quip { text-align: center; }
    section .wrap > .sub { margin-left: auto; margin-right: auto; }
    section:first-of-type .wrap > .sub { text-align: center; }
    .proof-strip .ps { text-align: center; }
    .tool { text-align: center; }
    .cat { justify-content: center; text-align: center; }
    .cat-note { text-align: center; }
    .why { margin-left: auto; margin-right: auto; text-align: center; }
    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; }


    .bridge { text-align: center; }
    .bridge p { margin-left: auto; margin-right: auto; }

    /* body copy readable: descriptions left inside centered cards */
    .tool p { text-align: left; }
    .tool p.asks { text-align: center; }
    .tool p:has(a.get) { text-align: center; }
    .why p, .sell p { text-align: left; }
    .why .eyebrow, .sell .eyebrow, .why h2, .sell h2, .why h3, .sell h3 { text-align: center; }


/* ===== 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 */
.cat { color: var(--accent-on-dark); }
.wn .k { font-weight: 700; }

/* V189 */
.cat { text-align: center; }

/* V190 belt: kill the .cat span sub-shade */
.cat, .cat span { color: var(--accent-on-dark) !important; }

/* 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; }
}


/* 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; }
}


/* V225: the 3-up screenshot grid collapses correctly on its own (auto-fit
   minmax 170px), but seven blocks in free.html carry an INLINE
   grid-template-columns:1fr 1fr with nothing to undo it. Inline wins over
   every stylesheet rule, so on a 390px phone those charts rendered at roughly
   146x82px — unreadable for dense chart screenshots, and the sizes attribute
   ("calc(100vw - 88px)") was lying to the browser about it too.
   !important is the only thing that beats an inline style. */
@media (max-width: 560px) {
  .shots3 { grid-template-columns: 1fr !important; gap: 12px; }
}


/* 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; }
}


/* V243: tool names carry the accent. They are the scannable index of the
   whole page — seventeen of them — and in white they read as body copy. */
.tool h2 { color: var(--accent-pressed); }   /* accent-on-light is 4.30 on the
                                               light card: under the floor */
[data-theme="dark"] .tool h2 { color: var(--accent-on-dark); }


/* V254: .tool p forces left for the card body, which is correct for the
   description and the PLAIN ENGLISH note. The author already carved out
   .asks and p:has(a.get). Four more classes were missed, and three of them
   already had their own centring rule that .tool p (0,1,1) silently beat:

     p.tag        the "not open code" caption. Every other .tag on the page
                  is a <span> and inherits centre, so this one read as the
                  odd one out.
     p.cat-note   .cat-note { text-align: center } exists and was losing.
     p.sub        same.
     p.why        same.

   Body prose in the card stays left. Captions and labels centre. */
.tool p.tag,
.tool p.cat-note,
.tool p.sub,
.tool p.why { text-align: center; }


/* V254: the tools section closed with 84px and the newsletter opened with
   56px, so 140px of dead black sat between two content blocks. Now that the
   newsletter reads as a raised band again it needs less air, not more. */
section.freetools { padding-bottom: 56px; }


/* V263: the tape stat was a card with a link in it; now the card is the link,
   matching the card behaviour on every other page. */
a.ps-link { text-decoration: none; color: inherit; display: block; }
a.ps-link .ps-cta {
  display: block; margin-top: 6px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.08em; color: var(--accent-on-light);
}
@media (hover: hover) {
  a.ps-link:hover { border-color: var(--accent-on-light); }
}
[data-theme="dark"] a.ps-link .ps-cta { color: var(--accent-on-dark); }
[data-theme="dark"] a.ps-link:hover { border-color: var(--accent-on-dark); }

/* 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;
}

/* MIZAN v329 stylesheet boundary */
/* ==========================================================================
   MIZAN shared dark theme                                            V242
   --------------------------------------------------------------------------
   The homepage already had a complete, visually-proven dark section theme
   (the V54 "duotone layer" in index.css, ~40 rules). It was trapped in one
   stylesheet, which is why index alternated dark and light while every
   interior page stayed cream.

   This file lifts that layer out so all nine pages can use it, then adds
   the handful of components that only exist on interior pages and therefore
   never got a dark counterpart: the tool cards, the proof strip, the
   restraint panel, the week headings, and the beam.

   Loaded AFTER each page's own stylesheet so it wins without !important,
   except where it has to beat an inline style attribute.
   ========================================================================== */

/* ---- surfaces ---------------------------------------------------------- */
[data-theme="dark"] { background: var(--surface-page); color: var(--text-on-dark-soft); }
/* Blanket section fill, but it must not clobber sections that carry their
   own surface. At (0,2,1) it outranked [data-theme="dark"] .freehero at
   (0,2,0) and flattened the newsletter band into the page, losing the raised
   treatment entirely. Any section with its own surface goes in this list. */
[data-theme="dark"] section:not(.thL):not(.freehero):not(.quiet):not(.thD) {
  background: var(--surface-page); color: var(--text-on-dark-soft);
}
[data-theme="dark"] section.freehero,
[data-theme="dark"] section.quiet,
[data-theme="dark"] section.thD { color: var(--text-on-dark-soft); }

/* ---- type -------------------------------------------------------------- */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: var(--text-on-dark); }
[data-theme="dark"] p, [data-theme="dark"] li { color: var(--text-body); }
[data-theme="dark"] b, [data-theme="dark"] strong { color: var(--text-on-dark); }
[data-theme="dark"] .eyebrow { color: var(--accent-on-dark); }
[data-theme="dark"] .k, [data-theme="dark"] .kicker { color: var(--accent-on-dark); }
/* These were one group and should be three. Sorted by what they actually
   contain, measured rather than assumed:

     .sub          20 uses, median 29 words  -> lead paragraphs, not captions
     .disclaimer    5 uses, median 60 words  -> legal prose, long enough to
                                                need reading, secondary in tone
     .tbl-note      2 uses, median 20 words  -> same
     .gal-note      1 use,  median  7 words  -> genuine caption
     .foot-attrib   5 uses, median  6 words  -> genuine caption

   Painting a 29-word lead paragraph at caption grey is what made the free
   page intro read dim while everything around it was white. */
[data-theme="dark"] .sub { color: var(--text-body); }
[data-theme="dark"] .disclaimer,
[data-theme="dark"] .tbl-note { color: var(--text-on-dark-muted); }
[data-theme="dark"] .gal-note,
[data-theme="dark"] .foot-attrib { color: var(--text-subtle); }
[data-theme="dark"] .h1-quip { color: var(--text-on-dark-muted); }
/* Text links go green on dark. Buttons must be excluded by class or they
   inherit the link colour on top of their own fill -- which is exactly
   what happened to .verify-btn: light green label on green fill, 2.40:1.
   Any future filled button needs adding here, or better, needs the .btn
   class so it is covered automatically. */
[data-theme="dark"] a:not(.btn):not(.wn):not(.verify-btn):not(.skip):not(.btn-ghost) {
  color: var(--accent-on-dark);
}

/* ---- panels and cards -------------------------------------------------- */
[data-theme="dark"] .card, [data-theme="dark"] .band-card, [data-theme="dark"] .price-card, [data-theme="dark"] .tier,
[data-theme="dark"] .read-box, [data-theme="dark"] .never, [data-theme="dark"] .faq details, [data-theme="dark"] blockquote,
[data-theme="dark"] .restraint, [data-theme="dark"] .ob-steps div, [data-theme="dark"] .score-widget, [data-theme="dark"] .step {
  background: var(--surface-night); border-color: var(--rule-on-dark); box-shadow: none;
}
[data-theme="dark"] .tool, [data-theme="dark"] .proof-strip .ps, [data-theme="dark"] .jump a {
  background: var(--surface-night-2); border-color: var(--rule-on-dark);
}
[data-theme="dark"] .freetools, [data-theme="dark"] section.freetools { background: var(--surface-page); }
[data-theme="dark"] table.cmp, [data-theme="dark"] .tbl-wrap table,
[data-theme="dark"] .tbl-wrap th, [data-theme="dark"] .tbl-wrap td {
  background: var(--surface-night); border-color: var(--rule-on-dark); color: var(--text-on-dark-muted);
}
[data-theme="dark"] table.cmp td.mz, [data-theme="dark"] table.cmp th.mz { background: rgba(84,201,138,.10); }

/* ---- rules and edges --------------------------------------------------- */
[data-theme="dark"] hr, [data-theme="dark"] .read-box, [data-theme="dark"] .figures + .wk-h { border-color: var(--rule-on-dark); }
[data-theme="dark"] .shots3 img, [data-theme="dark"] .shotwrap img, [data-theme="dark"] figure img { border-color: var(--rule-on-night); }
[data-theme="dark"] input[type=email], [data-theme="dark"] input[type=text], [data-theme="dark"] textarea {
  background: var(--surface-night-2); border-color: var(--rule-on-dark-strong); color: var(--text-on-dark);
}

/* ---- components added this session ------------------------------------- */
[data-theme="dark"] .wk-h { color: var(--text-on-dark); }
[data-theme="dark"] .wk-sub { color: var(--text-on-dark-muted); }        /* was #6b6b66: 3.53:1 on dark */
[data-theme="dark"] .beam-pivot { border-block-end-color: var(--rule-on-dark-strong); }
[data-theme="dark"] .where-next a.wn { background: transparent; border-color: var(--rule-on-dark-strong); }
[data-theme="dark"] .where-next a.wn:hover { border-color: var(--accent-on-light); background: rgba(84,201,138,.07); }
[data-theme="dark"] .where-next .k { color: var(--accent-on-dark); }
[data-theme="dark"] .where-next p { color: var(--text-on-dark-muted); }
[data-theme="dark"] .scale-list li::marker { color: var(--warn); }
[data-theme="dark"] .word-no { color: var(--text-on-dark); }

/* ---- ghost buttons ----------------------------------------------------- */
[data-theme="dark"] .btn-ghost, [data-theme="dark"] .btn.ghost {
  border-color: var(--rule-on-dark-strong); color: var(--text-on-dark-soft);
}
[data-theme="dark"] .btn-ghost:hover, [data-theme="dark"] .btn.ghost:hover {
  border-color: var(--accent-on-light); color: var(--accent-on-dark);
}



/* ---- inline-style rescues ----------------------------------------------
   These three colours are written directly into style attributes in the
   markup, so nothing in a stylesheet can reach them without !important.
   Measured against #0f1115 they fail: #1a7f53 = 3.78:1, #6b6b66 = 3.53:1,
   #c23b2e = 3.56:1. Matched by attribute so only the failing values move. */
[data-theme="dark"] [style*="#1a7f53"] { color: var(--accent-on-dark) !important; }
[data-theme="dark"] [style*="#6b6b66"] { color: var(--text-on-dark-muted) !important; }
[data-theme="dark"] [style*="#c23b2e"] { color: #e0705f !important; }

/* ---- bands that were dark-on-light must not vanish dark-on-dark ---------
   .quiet carries an inline background:#0f1115 written into the markup, which
   now equals the page. Lift it to the raised surface so it still reads as a
   separate band. Same for the free-page hero. */
[data-theme="dark"] .quiet,
[data-theme="dark"] .quiet[style] { background: var(--surface-night) !important; }
[data-theme="dark"] .freehero { background: var(--surface-night); }
[data-theme="dark"] section.thD { background: var(--surface-night); }

/* ---- keep the light sections light where a page deliberately alternates - */
[data-theme="dark"] section.thL { background: #fbfbf9; color: #16181c; }
[data-theme="dark"] section.thL h1, [data-theme="dark"] section.thL h2, [data-theme="dark"] section.thL h3,
[data-theme="dark"] section.thL b, [data-theme="dark"] section.thL strong { color: var(--text-strong); }
[data-theme="dark"] section.thL p, [data-theme="dark"] section.thL li { color: var(--text-body); }
[data-theme="dark"] section.thL .eyebrow { color: var(--accent-on-light); }


/* ==========================================================================
   V252 · the parts of a dark site nobody looks at until they bite
   ========================================================================== */

/* Tells the browser this surface is dark, so it renders scrollbars, form
   controls and any UA default in the matching palette instead of light. */
[data-theme="dark"] { color-scheme: dark; }

/* Firefox and Windows otherwise paint a bright scrollbar down the edge of a
   black page. Chromium honours color-scheme; Firefox wants this explicitly. */
[data-theme="dark"] { scrollbar-color: var(--rule-on-dark-strong) var(--surface-page); }

/* Windows High Contrast replaces the palette wholesale. Buttons and rules
   must keep a visible edge once brand colour is stripped out. */
@media (forced-colors: active) {
  .btn, .verify-btn, .btn-ghost, .where-next a.wn, .card, .tool { border: 1px solid; }
  .beam-bar, .beam-pivot { forced-color-adjust: none; }
  .yt-play { border: 1px solid; }
}

/* Print. Every page is dark now, so without this a print or save-as-PDF
   either dumps a solid black page or drops the text entirely. Force paper
   back to black-on-white, drop anything that costs ink and says nothing,
   and expand link targets so a printed page is still usable. */
@media print {
  [data-theme="dark"] { color-scheme: light; }
  html, body, section, .quiet, .card, .tool, .where-next a.wn, footer {
    background: #fff !important; color: #000 !important;
  }
  h1, h2, h3, h4, p, li, figcaption, .eyebrow, .k, .sub { color: #000 !important; }
  nav, .mz-burger, .skip, .yt-play, .foot-soc, .where-next, .beam { display: none !important; }
  a { color: #000 !important; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; word-break: break-all; }
  figure, .tool, .card { break-inside: avoid; }
  img { max-width: 100% !important; }
}


/* ==========================================================================
   V263 · iOS form controls
   Safari applies its own inner shadow, rounding and background to text
   inputs regardless of what the stylesheet says. Without an appearance
   reset the newsletter field renders as a native iOS control sitting in
   the middle of a custom dark layout. The 16px floor is already set
   elsewhere and stays — below it iOS zooms the whole page on focus.
   ========================================================================== */
input[type="email"], input[type="text"], textarea, select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 10px;
}
input[type="email"], input[type="text"], textarea {
  /* Safari ignores background-color on inputs unless this is also cleared */
  background-clip: padding-box;
}
/* iOS renders autofilled fields with a hard yellow-white that ignores the
   theme. This is the only way to override it. */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-strong);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-night-2) inset;
  caret-color: var(--text-strong);
}


/* ==========================================================================
   V264 · the canonical card-link
   Loaded on every dark page after its own stylesheet, so it settles the
   argument between the older per-page hover rules. One border, one wash,
   one lift, one arrow. Motion respects the reduced-motion setting.
   ========================================================================== */
a.sh-card, a.wn, a.ps-link, a.step, a.card, a.band-card {
  transition: border-color .18s ease,
              background-color .18s ease,
              transform .18s cubic-bezier(.2,.7,.3,1);
}
@media (hover: hover) {
  a.sh-card:hover, a.wn:hover, a.ps-link:hover,
  a.step:hover, a.card:hover, a.band-card:hover {
    border-color: var(--cardlink-border);
    background-color: var(--cardlink-wash);
  }
  @media (prefers-reduced-motion: no-preference) {
    a.sh-card:hover, a.wn:hover, a.ps-link:hover,
    a.step:hover, a.card:hover, a.band-card:hover {
      transform: translateY(var(--cardlink-lift));
    }
    a.sh-card:hover::after, a.step:hover::after { transform: translateX(4px); }
  }
}
a.sh-card:focus-visible, a.wn:focus-visible, a.ps-link:focus-visible,
a.step:focus-visible, a.card:focus-visible {
  border-color: var(--cardlink-border);
  background-color: var(--cardlink-wash);
}


/* ==========================================================================
   V265 · card-links on touch
   The canonical hover sits inside @media (hover: hover), which is correct —
   it stops phones latching a hover state. But it meant a tap on a card did
   nothing, while the footer cards DID shade green on iOS purely because
   their older rule was never gated. One worked by accident, the other was
   dead by design.

   :active is the touch equivalent of :hover. Same three tokens, so a tap on
   a phone now produces exactly what a hover produces on a desktop.
   ========================================================================== */
@media (hover: none), (pointer: coarse) {
  a.sh-card:active, a.wn:active, a.ps-link:active,
  a.step:active, a.card:active, a.band-card:active {
    border-color: var(--cardlink-border) !important;
    background-color: var(--cardlink-wash) !important;
    opacity: 1 !important;
  }
  @media (prefers-reduced-motion: no-preference) {
    a.sh-card:active, a.wn:active, a.ps-link:active,
    a.step:active, a.card:active, a.band-card:active {
      transform: translateY(var(--cardlink-lift));
    }
    a.sh-card:active::after, a.step:active::after { transform: translateX(4px); }
  }
}


/* ==========================================================================
   V267 · where the accent goes, and why
   --------------------------------------------------------------------------
   The green had drifted into a per-page decision. The same element was
   accented on one page and not another:

     figcaption b   green on index, but only inside #proof; white on chart
     .k             accented on about/chart/free/methodology, not on index
     .kicker        accented on chart, not on index
     .link          accented on free, not on about

   The rule, applied everywhere from here:

     The accent marks ORIENTATION — the text that tells you what a thing is
     and where it goes. Section eyebrows, card labels, caption metadata, and
     inline links. It never marks a heading or body copy, because if the
     accent lands on everything it stops meaning anything.

     .h1-quip is deliberately NOT accented. "One builder. One word. Zero
     adjustable optimism." is voice, not a label.
   ========================================================================== */
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .page-eyebrow,
[data-theme="dark"] .k,
[data-theme="dark"] .kicker,
[data-theme="dark"] figcaption b,
[data-theme="dark"] .gal-note b,
[data-theme="dark"] a.link,
[data-theme="dark"] .who-k { color: var(--accent-on-dark); }

/* the label inside a card-link follows the same rule */
[data-theme="dark"] a.sh-card .k,
[data-theme="dark"] a.wn .k,
[data-theme="dark"] a.step .n { color: var(--accent-on-dark); }


/* ==========================================================================
   V268 · declarations that were being swallowed
   The cascade check found classes carrying a deliberate colour that never
   reached the page, because a generic rule outranked them:

     .tag .cat-note .shelf-cap .stamp .def   lost to [data-theme="dark"] p
     .link inside the footer                 lost to footer a !important
     .foot-attrib text-align: center         lost to the section left-align

   Each was written on purpose and each was dead. Restated here at a
   specificity that actually wins.
   ========================================================================== */
[data-theme="dark"] p.tag,
[data-theme="dark"] p.cat-note,
[data-theme="dark"] p.shelf-cap,
[data-theme="dark"] p.stamp { color: var(--text-subtle); }

[data-theme="dark"] p.def { color: var(--text-on-dark-muted); }

/* an inline link keeps the accent even inside the footer, where a blanket
   footer a !important was flattening it to muted grey */
[data-theme="dark"] footer a.link,
[data-theme="dark"] footer a.link:visited { color: var(--accent-on-dark) !important; }

/* .foot-attrib is a centred credit line, not body prose */
[data-theme="dark"] p.foot-attrib { text-align: center; }


/* ==========================================================================
   V269 · the line under the h1 carries the accent
   .h1-quip is the page thesis — the one sentence directly beneath the
   headline. "Nothing cherry-picked. Nothing cropped out." on the chart page,
   "One builder. One word. Zero adjustable optimism." on about. It was
   previously classed as voice and left white; it is the most quotable line
   on each page and it earns the accent.

   Deliberately NOT extended to methodology's .sub or index's .hero-sub:
   those are 13 and 24 word intro paragraphs, not a thesis line. Accenting a
   24-word paragraph would spend the colour on body copy.
   ========================================================================== */
[data-theme="dark"] p.h1-quip { color: var(--accent-on-dark); }