/* ===== about.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: clamp(34px, 2vw + 26px, 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; }
    /* V225: .quiet is overridden to #0f1115 inline on this page, so the
       light hairlines were drawing a near-white line on near-black. */
    .quiet { background: var(--text-on-dark); border-top: 1px solid var(--rule-on-dark); border-bottom: 1px solid var(--rule-on-dark); }
    .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) { .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); }

    /* 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; }
  
    .who-k { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: .18em; color: var(--accent-on-light); margin: 30px 0 4px; }
  
    /* ---------- 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; }

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


    /* bio: body copy left, name labels centered */
    .who-k ~ p:not(.who-k) { text-align: left; }
    .who-k { text-align: center; }

    /* consistency: header units centered, body copy left */
    section .wrap p:not(.who-k):not(.def):not(.mzn-link) { 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; }


/* V147 — name section as a self-contained premium component.
   Scoped to the first section only; the rest of the site is untouched.
   Progressive throughout: container queries, cqi units, and view()
   scroll reveal are all additive — unsupported browsers get the same
   clean static layout they had yesterday. */
section:first-of-type .wrap { container-type: inline-size; container-name: mznname; }
section:first-of-type h1 { font-size: clamp(30px, 4.4cqi + 15px, 52px); letter-spacing: -0.015em; }
section:first-of-type .wrap > .ar { font-size: clamp(30px, 3.4cqi + 18px, 46px); }
section:first-of-type .wrap > .def { font-size: clamp(15px, 0.7cqi + 12.5px, 18px); overflow-wrap: anywhere; }
section:first-of-type .wrap > p:not(.h1-quip):not(.def) {
  max-inline-size: min(100%, 66ch);
  font-size: clamp(15.5px, 0.4cqi + 14.4px, 17.5px);
  line-height: 1.62;
}
@container mznname (min-width: 680px) {
  section:first-of-type .wrap > .def { letter-spacing: 0.015em; }
  section:first-of-type .wrap > p:not(.h1-quip):not(.def) { line-height: 1.7; }
}
.mzn-link a {
  display: inline-block; text-decoration: none; color: var(--accent-on-light); font-weight: 600;
  transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1), opacity .45s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mzn-link a:hover { transform: translateX(6px); }
}
@media (pointer: coarse) {
  .mzn-link a { padding-block: 14px; margin-block: -14px; }
  .mzn-link a:active { transform: translateX(4px); opacity: .75; transition-duration: .12s; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    section:first-of-type .wrap > p:not(.h1-quip):not(.def), .mzn-link {
      animation: mznRise both cubic-bezier(0.16, 1, 0.3, 1);
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
    @keyframes mznRise { from { opacity: 0; transform: translateY(14px); } }
  }
}

.quiet h2{color:var(--text-on-dark)}.quiet p{color:var(--text-on-dark-muted)}.quiet .k{color:var(--text-subtle)}
    /* 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; }
    /* centered name block, body copy stays left */
    section:first-of-type .wrap > .eyebrow, section:first-of-type .wrap > h1,
    section:first-of-type .wrap > .h1-quip, section:first-of-type .wrap > .ar,
    section:first-of-type .wrap > .def { display: block; text-align: center; }
    /* V148: out-specify "section .wrap p:not(.who-k):not(.def)" (0,3,2 left) which beat the quip centering (0,3,1) */
    section:first-of-type .wrap > p.h1-quip { text-align: center; margin-top: 14px; }


/* V188 */
.who-k { color: var(--accent-on-dark); }
.wn .k { font-weight: 700; }

/* V189 green-token normalization — SCOPED (was global; see V225 note).
   This page is not a dark page: sections 1 and 3 sit on #faf9f5. The light
   green only belongs on the dark surfaces. Same pattern index.css already
   uses with .thD / .thL. */
.quiet .eyebrow { color: var(--accent-on-dark); }
.who-k { color: var(--accent-on-dark); }
.quiet .verify { color: var(--accent-on-dark); }

/* V190 belt — scoped to match */
.who-k { color: var(--accent-on-dark) !important; }
.quiet .eyebrow, .quiet .verify { color: var(--accent-on-dark) !important; }

/* V225: light-surface eyebrows return to the deep green. #54c98a on #faf9f5
   measured 1.97:1 — below the 4.5:1 floor for 13px text. #1a7f53 is 4.74:1. */
.eyebrow { color: var(--accent-on-light); }

/* V201: the four thumbs-on-the-scale, as a list */
.scale-list { margin: 16px 0 18px; padding-left: 1.35em; text-align: left; }
.scale-list li { margin: 7px 0; }
.scale-list li::marker { color: var(--accent-on-light); }

/* V207: LinkedIn verify as a proper centered button */
.verify-btn { display: inline-block; background: var(--btn-fill); color: var(--btn-label) !important; font-weight: 700; font-size: 15px; padding: 12px 22px; border-radius: 10px; text-decoration: none; }
.verify-btn:hover { background: var(--btn-fill-hover); }


/* 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 audit layer ===== */

/* the load-bearing word, styled where style belongs (was inline on <b>) */
.word-no { color: var(--text-strong); font-weight: 700; }
.quiet .word-no { color: var(--text-on-dark); }

/* keyboard skip link: invisible until focused */
.skip {
  position: fixed; left: -9999px; top: 0; z-index: 300;
  background: var(--btn-fill); color: var(--btn-label); font-weight: 700;
  padding: 12px 18px; border-radius: 0 0 10px 0; text-decoration: none;
}
.skip:focus-visible { left: 0; }

/* V225 REVERTED: content-visibility on <section>.
   The orphaned V97 comment probably describes something the author already
   tried and pulled. On a three-section page it saves nothing measurable, and
   contain-intrinsic-size is a guess — every wrong guess resizes the scrollbar
   mid-scroll. Not worth the jank on a page this short. Comment stays orphaned
   on purpose. */


/* ===== V226: the balance, as the page's one signature ===== */
/* Derived from the logo's own vocabulary: level centre line, red above,
   green below. Beam tips, fulcrum stays put — the only physically honest
   way to draw a scale coming to rest. Default state is LEVEL, so the
   no-motion fallback is the finished drawing, not a broken one. */
.beam {
  inline-size: 140px;                        /* fallback if cqi is unsupported */
  inline-size: clamp(104px, 34cqi, 172px);   /* 24cqi pinned to the floor on every phone */
  margin: 6px auto 32px;
  display: block;
}
.beam-bar {
  display: block; block-size: 1px; inline-size: 100%;
  background: linear-gradient(90deg, var(--warn) 0%, #cfcdc4 46% 54%, var(--accent-on-light) 100%);
  transform-origin: 50% 50%;
}
.beam-pivot {
  display: block; inline-size: 0; block-size: 0; margin: 0 auto;
  border-inline: 5px solid transparent;
  border-block-end: 7px solid #cfcdc4;
}
@media (prefers-reduced-motion: no-preference) {
  .beam-bar { animation: mznBeamSettle 1.15s cubic-bezier(.16,1,.3,1) both; }
  @keyframes mznBeamSettle {
    0%   { transform: rotate(-3.4deg); }
    62%  { transform: rotate(0.9deg);  }
    100% { transform: rotate(0deg);    }
  }
}

/* V226: the four failure modes are the thumb on the scale, not virtues.
   Green markers read as approval. #c23b2e is the logo's own thumb-line red. */
.scale-list li::marker { color: var(--warn); }

/* V226: verify button was ~44px on touch while .btn had a 48px floor */
@media (pointer: coarse) { .verify-btn { min-block-size: 48px; display: inline-flex; align-items: center; } }

/* V226: "where next" cards were #fff slabs with a #e6e4dc border sitting on
   the #0f1115 footer — the border is invisible on white, which is the tell
   that this component predates the V54 dark footer and never got revisited.
   Re-skinned with the dark tokens already in use elsewhere. No new colours. */
.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; }
}


/* V248: the failure-mode list sat outside the reading column.
   Paragraphs are max-width 720 with auto margins; .scale-list had neither,
   so it spanned the full wrap and its left edge landed further out than
   every paragraph around it. That mismatch is what made the centred
   headings over left-aligned prose read as accidental rather than
   deliberate. Same column, same edge.

   The prose itself stays left-aligned on purpose: 695 words across 20
   paragraphs is an essay, and centred essays are unreadable. Centred
   display type over a left-aligned reading column is the editorial
   pattern, not a compromise. */
.scale-list {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}


/* V258: the portrait.
   Placed at the line where the copy stops describing a company and starts
   describing a person. The reader has just been told MIZAN is built by one
   person named Qasim Chowdhry; the next thing they see is him.

   White background kept deliberately. The first attempt cut him out onto
   transparency, which on a black page made a muddy silhouette with no edge
   to it. A white disc on near-black is the opposite problem solved: maximum
   separation, a hard clean edge, and it reads as a struck coin rather than
   a photo someone pasted in.

   Crop is head-at-46%-of-frame with 11% headroom, which is standard portrait
   framing. The earlier version had him at roughly 20% and swimming in space. */
.portrait {
  margin: 36px auto 14px;
  inline-size: 148px;
  block-size: 148px;
}
.portrait picture { display: block; }
.portrait img {
  display: block;
  inline-size: 148px;
  block-size: 148px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;                     /* seamless with the photo's own ground */
  /* hairline, then a dark gap, then the accent. Three rings at 1px each read
     as precision; one thick ring reads as a border. */
  box-shadow:
    0 0 0 1px rgba(0,0,0,.28),
    0 0 0 5px var(--surface-page),
    0 0 0 6px rgba(84,201,138,.55),
    0 10px 30px -12px rgba(0,0,0,.9);
}
@media (max-width: 640px) {
  .portrait, .portrait img { inline-size: 124px; block-size: 124px; }
  .portrait { margin-top: 28px; }
}
@media (prefers-reduced-motion: no-preference) {
  .portrait img { transition: box-shadow .25s cubic-bezier(.2,.7,.3,1); }
}


/* V266: the creed. Three separate assertions were running together on one
   line with middots, which reads as a single long string rather than three
   claims. One per line, each with room to land. */
[data-theme="dark"] .creed,
.creed {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12.5px;
  letter-spacing: .16em;
  line-height: 2;
  color: var(--accent-on-dark);
  text-align: center;
  margin-top: 30px;
}


/* V269: page thesis line takes the accent. */
[data-theme="dark"] p.h1-quip { color: var(--accent-on-dark); }


/* V271: .creed and .foot-attrib are centred display lines, not body prose.
   Written at the end of the file with enough specificity to beat both
   section .wrap p:not(.who-k):not(.def)   (0,3,2)  and
   .who-k ~ p:not(.who-k)                  (0,2,1)
   WITHOUT editing either. Adding :not() to those rules raised THEIR
   specificity and knocked .h1-quip out of the tie it depended on. */
section .wrap p.creed.creed,
section .wrap p.foot-attrib.foot-attrib {
  text-align: center;
  max-width: none;
}
[data-theme="dark"] p.creed.creed { color: var(--accent-on-dark); }


/* v293 — the creed and the thesis line, re-centred after a silent specificity
   loss that shipped inside v291's own file. What happened, with the math:
   the prose rule "section .wrap p:not(.who-k):not(.def):not(.mzn-link)"
   gained its third :not() when .mzn-link was excluded, which raised it from
   (0,3,2) to (0,4,2). Both centring fixes were tie-and-source-order wins at
   (0,3,2) — V148 for .h1-quip, V271 for .creed — and a tie no longer exists,
   so both fell to text-align:left. This is the exact failure the V271
   comment warned about, triggered by the rule it warned about. Full victim
   scan: these two lines were the ONLY casualties (.def / .who-k / .mzn-link
   are excluded by the :not()s, the LinkedIn button is inline-styled, and
   .foot-attrib lives outside section .wrap).
   The fix quadruples the class per the doubled-class convention: (0,5,2)
   OUTGUNS (0,4,2) outright instead of tying it, so these survive source-order
   moves and even a fourth :not() being added to the prose rule later.
   Only text-align (+ V271's max-width reset) is declared here, so nothing
   else about either element changes. */
section .wrap p.h1-quip.h1-quip.h1-quip.h1-quip { text-align: center; }
section .wrap p.creed.creed.creed.creed { text-align: center; max-width: none; }