/* ============================================================================
   MINT CHROME, shared brand-wall, footer & page-shell for THE MINT
   Loaded by index.html (brand-wall + footer) and the sibling leaf pages
   (team.html / privacy.html / terms.html). Security-printing aesthetic:
   ink on paper, engraved hairlines, banknote green, misprint red.
   ============================================================================ */

:root {
  --paper: #f2ede1;
  --paper-2: #e9e3d3;
  --ink: #0f0e0c;
  --plate: #12110f;
  --plate-line: #f2ede1;
  --security: #0b6b4f;
  --void: #a8231c;
  --micro: #4a4234;
  --font-display: 'Archivo', Helvetica, Arial, sans-serif;
  --font-mono: 'Archivo', ui-sans-serif, system-ui, sans-serif;

  /* Depth pass (Tier 1), mirrors index.html tokens so the leaf pages carry the
     same relief/lift/tint. Shadow & texture only; no palette change.
     r45: every cast is halved and then held to a 4px ceiling (1mm at 96dpi).
     The sheet used to throw an 80px pool; it now sits on the desk. */
  --shadow-sheet: 0 4px 4px -2px rgba(0,0,0,0.28), 0 1px 3px rgba(0,0,0,0.18);
  --press-inset: inset 0 1px 2px rgba(0,0,0,0.16);
  --relief-paper: 0 1px 0 rgba(242,237,225,0.75), 0 2px 1px rgba(15,14,12,0.10);
  --relief-plate: 0 1px 0 rgba(0,0,0,0.55), 0 -1px 0 rgba(242,237,225,0.06);
  --underprint: radial-gradient(120% 80% at 12% 0%, rgba(11,107,79,0.05), transparent 58%),
                radial-gradient(100% 90% at 100% 100%, rgba(154,106,22,0.035), transparent 55%);
}

/* IBM Plex Mono retired, the technical/label role now uses a clean sans.
   Keep serials, live hashes and ledger amounts column-aligned. */
body { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Tier 1 depth, leaf pages (team / method / pricing / trust / legal …).
   Same grammar as index.html: lift the sheet, tint it, raise the ink. */
.mint-page { padding: clamp(1rem, 3.5vw, 4rem) 1.5rem; }
.mint-page .mint-doc {
  box-shadow: var(--shadow-sheet);
  background-image: var(--underprint);
}
.mint-page .mint-doc::after {
  content: "";
  position: fixed;        /* viewport-sized, not full-document */
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.05;          /* no mix-blend-mode: avoids per-frame blend buffer */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
/* keep content above the grain veil (z-index:1) */
.mint-page .leaf-masthead, .mint-page .leaf-hero, .mint-page .leaf-body,
.mint-page .roster-band,
.mint-page .bw-grid, .mint-page .plate, .mint-page .leaf-cta { position: relative; z-index: 2; }

/* Move B relief, raised ink on paper, struck-in on the dark plate */
.leaf-hero h1, .plate-head h2, .mech-name,
.legal-h { text-shadow: var(--relief-paper); }
.leaf-cta h2 { text-shadow: var(--relief-plate); }

/* Move E press: the .leaf-btn presses as a KEYCAP now (see the keycap block
   below). The footer verifier chip that used to keep the coin-die press was
   removed in r43 (the open verifier is linked from the body of every page). */

/* ---------------------------------------------------------------------------
   r37 ASSET RESILIENCE (paired with mint-assets.js)

   .mark-fallback  the typeset stand-in that a wordmark <img> is swapped for
                   when its request will not come. It takes the size and colour
                   of the mark it replaces, so a dropped PNG costs the page a
                   little letterspacing and never a broken-image glyph.
   .lite           a metered or 2g-class link. Every animation stops; nothing
                   is hidden and no content is lost. The canvases read this
                   through window.mintStill(), which folds it in with
                   prefers-reduced-motion.
--------------------------------------------------------------------------- */
.mark-fallback {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  color: currentColor;
}
.mark-fallback i { font-style: normal; color: var(--security); }
.mark-fallback.foot-wordmark-img { font-size: 13px; }
.mark-fallback.leaf-mark-img { font-size: clamp(13px, 1.5vw, 17px); }
.mark-fallback.veriker-mark { font-size: 15px; letter-spacing: 0.06em; }

.lite .bw-track { animation: none; }
.lite .bw-marquee {
  -webkit-mask-image: none;
          mask-image: none;
  overflow-x: auto;
}

/* ---------------------------------------------------------------------------
   BRAND WALL, "the bench behind it"
   variant marquee  → dual opposed scroll (front page, under the hero)
   variant grid     → every mark visible at once (team page)
   Every logo is rendered as a single-ink intaglio silhouette via mask.
--------------------------------------------------------------------------- */
.brandwall {
  background: var(--paper);
  color: var(--ink);
  padding: 3.9rem 0 5.4rem;
  position: relative;
  overflow: hidden;
}

.bw-caption {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--micro);
  text-align: center;
  margin: 0 auto 3.6rem;
  padding: 1.2rem 1.5rem 0;
  max-width: 1100px;
}
.bw-caption b { color: var(--security); font-weight: 600; }

/* one ink silhouette */
.bw-logo {
  display: inline-block;
  /* r40: the marks drop ~27% (Jared: these are former employers, not the
     headline) and the cells, gaps and bench come in with them so the wall
     reads tighter, not emptier. Height is the binding box: the masks are
     mask-size contain. */
  width: clamp(76px, 6.9vw, 102px);
  height: 32px;
  /* r37: no ink until the stencil is known good. A masked logo whose mask has
     not arrived is a solid black slab; mint-brandwall.js adds .bw-inked once
     the file has loaded. The box still reserves its space, so nothing shifts. */
  background-color: transparent;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
  opacity: 0.6;
  flex: 0 0 auto;
  transition: opacity 0.35s ease, background-color 0.35s ease, transform 0.35s ease;
}
.bw-logo.bw-inked { background-color: var(--ink); }
.bw-logo.bw-inked:hover {
  opacity: 1;
  background-color: var(--security);
  transform: translateY(-2px);
}

/* marquee */
.bw-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.bw-marquee + .bw-marquee { margin-top: 1.15rem; }
.bw-track {
  display: flex;
  align-items: center;
  gap: clamp(1.8rem, 3vw, 3rem);
  width: max-content;
  animation: bw-scroll 64s linear infinite;
}
.bw-track--rev { animation-direction: reverse; animation-duration: 78s; }
@keyframes bw-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.brandwall:hover .bw-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .bw-track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 2rem; }
  .bw-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* grid (team page) */
.bw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  max-width: 1180px;
  margin: 0 auto;
}
.bw-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.35rem 0.85rem;
  min-height: 70px;
}
.bw-cell .bw-logo { opacity: 0.62; }

/* ---------------------------------------------------------------------------
   SITE FOOTER, the colophon plate
--------------------------------------------------------------------------- */
.site-footer {
  background: var(--plate);
  color: var(--plate-line);
  font-family: var(--font-display);
  padding: clamp(1.8rem, 3.2vw, 2.6rem) 6vw 0.8rem;
}
.foot-top {
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) 2fr;
  gap: clamp(1.6rem, 3vw, 2.8rem);
  max-width: 1440px;
  margin: 0 auto;
  align-items: start;
}
.foot-wordmark {
  text-decoration: none;
  display: inline-block;
}
.foot-wordmark-img { height: 13px; width: auto; display: block; }
.foot-blurb {
  margin: 0.7rem 0 1rem;
  max-width: 34ch;
  font-size: 0.96rem;
  line-height: 1.5;
  color: rgba(242,237,225,0.8);
}
.foot-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem 1rem;
}
.foot-col h4 {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242,237,225,0.62);
  margin-bottom: 0.7rem;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin-bottom: 0.5rem; }
.foot-col a {
  color: rgba(242,237,225,0.9);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 0.2s ease;
}
.foot-col a:hover { color: var(--plate-line); text-decoration: underline; text-underline-offset: 3px; }

.foot-bottom {
  max-width: 1440px;
  margin: clamp(1.4rem, 2.6vw, 2rem) auto 0;
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  /* ROUND 10 (2026-07-08): sentence case, the shouty all-caps strings at the
     foot of the note were ordered out along with the long legal line. */
  text-transform: none;
  color: rgba(242,237,225,0.64);
}
.foot-tag { color: var(--security); }

@media (max-width: 880px) {
  .foot-top { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------------
   LEAF PAGE SHELL, team.html / privacy.html / terms.html
   Scoped under .mint-page so it never touches index.html's own .mint-doc.
--------------------------------------------------------------------------- */
.mint-page {
  background-color: var(--plate);
  color: var(--ink);
  font-family: var(--font-display);
  line-height: 1.5;
  padding: 1.5rem;
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.mint-page .mint-doc {
  background-color: var(--paper);
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* page masthead, the note's headband */
.leaf-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem clamp(1.4rem, 4vw, 3.2rem);
  gap: 1rem;
  flex-wrap: wrap;
}
.leaf-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}
.leaf-mark-img { height: 14px; width: auto; display: block; }

/* masthead seal: a live strike of the home-hero paintSeal (mounted by
   mint-seal.js on the .hs-wheel canvas), turning at the same hero-slow rate
   on every leaf page. Sized so the colour and the slow rotation actually
   read; masthead padding stays tight so the header holds a slim bar. */
/* r47c: the masthead wheel is a HOME LINK on all 9 leaf pages (Jared), so it can
   no longer be pointer-events:none — that rule is what made the canvas unclickable.
   It stays out of the tab order and hidden from assistive tech (aria-hidden +
   tabindex=-1 in the markup): the wordmark immediately to its left already links
   home with that name, so exposing the wheel too would just be a second tab stop
   announcing "NEXIVERIFY home" again. This is a mouse affordance, not a new route.
   mint-seal.js finds the canvas by class (.mast-seal .hs-wheel), never by tag, so
   swapping the wrapping div for an anchor does not touch the seal engine. */
.mast-seal { width: clamp(72px, 8vw, 104px); flex: 0 0 auto; }
a.mast-seal { display: block; cursor: pointer; transition: opacity 0.18s ease; }
a.mast-seal:hover { opacity: 0.82; }
.mast-seal svg, .mast-seal canvas { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
@media (max-width: 600px) { .mast-seal { width: 72px; } }

/* page hero */
.leaf-hero {
  padding: clamp(3rem, 7vw, 6rem) clamp(1.4rem, 4vw, 3.2rem) clamp(2rem, 4vw, 3rem);
}
.leaf-tag {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--security);
  display: block;
  margin-bottom: 1.1rem;
}
.leaf-hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.leaf-lede {
  margin-top: 1.1rem;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--micro);
  max-width: 52ch;
}

/* legal copy */
.leaf-body { padding: clamp(2.5rem, 5vw, 4rem) clamp(1.4rem, 4vw, 3.2rem) clamp(3rem, 6vw, 5rem); }
.legal-block {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 3fr;
  gap: 1.5rem 2.5rem;
  padding: 1.8rem 0;
  border-bottom: 1px solid rgba(15,14,12,0.14);
}
.legal-block:first-child { border-top: 1px solid rgba(15,14,12,0.14); }
.legal-h {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  padding-top: 0.2rem;
}
.legal-block p { font-size: 1.02rem; line-height: 1.6; color: #2b2820; margin: 0; }
.legal-block a, .inline-link {
  color: var(--security);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.leaf-colophon {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--micro);
  margin-top: 2.2rem;
}
@media (max-width: 720px) {
  .legal-block { grid-template-columns: 1fr; gap: 0.6rem; }
}

/* team roster */
.roster-band {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--micro);
  padding: 0 clamp(1.4rem, 4vw, 3.2rem) 1.4rem;
}

/* ============================================================================
   MULTI-PAGE CHROME, the interior "plate" grammar
   Shared by the content notes: method / research / regulations /
   pricing / trust. Same security-printing language as index.html's
   process plates, lifted into reusable classes so every note reads as one
   issued series.
   ============================================================================ */

/* the interior plate, clean whitespace separation, no rules or counterfoil */
.plate { position: relative; }
.plate-grid {
  display: block;
}
.plate-body { padding: clamp(2rem, 4vw, 3.2rem) clamp(1.4rem, 4vw, 3.2rem); }
.plate-head { margin-bottom: 1.9rem; }
.plate-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--ink);
  margin: 0.55rem 0 0;
}

/* banknote ledger, mono rows, faint separators for readability, void in misprint red */
.ledger { border-top: none; }
.ledger-row {
  display: grid;
  gap: 0.9rem 1.8rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(15, 14, 12, 0.14);
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  line-height: 1.45;
}
.ledger-row.r-time { grid-template-columns: 128px 1fr 120px; }
.ledger .ln { color: var(--ink); }
.ledger .lt { color: var(--micro); }
.ledger .lc { color: var(--ink); }
.ledger-row.tl-next .ln,
.ledger-row.tl-next .lt { color: var(--security); font-weight: 600; }
.ledger-row.tl-future { opacity: 0.62; }

/* engraving stages, Method mechanisms / Trust posture commitments */
.mech-list { list-style: none; margin: 0; padding: 0; }
.mech-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2.5fr auto;
  gap: 0.8rem 2rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(15, 14, 12, 0.14);
}
.mech-row:first-child { border-top: 1px solid rgba(15, 14, 12, 0.14); }
.mech-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}
.mech-desc { font-size: 1rem; line-height: 1.55; color: #322f27; }
.mech-status {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  border: 1px solid var(--micro);
  padding: 0.3rem 0.6rem;
  white-space: nowrap;
  align-self: start;
  justify-self: start;
}

/* annex cell grid */
.annex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  border-top: 1px solid rgba(15, 14, 12, 0.18);
  border-left: 1px solid rgba(15, 14, 12, 0.18);
}
.annex-cell {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.3rem 1.2rem;
  border-right: 1px solid rgba(15, 14, 12, 0.18);
  border-bottom: 1px solid rgba(15, 14, 12, 0.18);
  font-family: var(--font-display);
  font-size: 1.04rem;
  color: var(--ink);
  min-height: 78px;
}
.annex-id {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  color: var(--security);
  flex: 0 0 auto;
}

/* penalty figures */
.penalty-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.penalty {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.8rem 0;
}
.penalty b {
  font-family: var(--font-mono);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--void);
}
.penalty span { font-size: 0.94rem; color: var(--micro); }

/* honest-limit note shared by every content plate */
.honesty {
  margin-top: 1.9rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--micro);
  max-width: 66ch;
}
.honesty.mono {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

/* a closing call-to-issue plate, dark like the colophon */
.leaf-cta {
  background: var(--plate);
  color: var(--plate-line);
  padding: clamp(3.1rem, 6vw, 4.8rem) clamp(1.6rem, 4.5vw, 3.6rem);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.6rem 3rem;
  align-items: center;
}
.leaf-cta h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  color: var(--plate-line);
}
.leaf-cta p { margin: 0.9rem 0 0; color: rgba(242, 237, 225, 0.82); max-width: 42ch; font-size: 1rem; }
.leaf-cta .cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-self: end; }
.leaf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--plate-line);
  color: var(--plate-line);
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.leaf-btn:hover { border-color: var(--security); color: var(--security); }
.leaf-btn--solid { background: var(--plate-line); color: var(--plate); border-color: var(--plate-line); }
.leaf-btn--solid:hover { background: var(--security); border-color: var(--security); color: var(--paper); }

/* ---------------------------------------------------------------------------
   THE KEYCAP, small cut (r43 re-cut). Two keys standing on the same plate under
   the same light have the SAME side. r35 derived each wall from the button's
   own face instead, which gave the solid key a wall you could see and the ghost
   key a 7% wall you could not, so the pair read as two objects at two depths
   and the solid one looked bigger. Both keys now take one shared wall, and the
   whole key is cut to half its old depth: 2px of wall at rest, 4px raised,
   flush when pressed, contact and cast halved in offset AND in alpha.

   On this DARK plate the wall must be LIGHTER than the plate or it is invisible
   on near-black. (The hero runs the same key on paper, where the sign flips;
   its tokens live in index.html.) Every state carries the same 9 shadows
   (1 inset bevel + 6 wall + contact + cast), surplus wall slots parked at the
   current depth, so the list interpolates instead of padding out of order.
   Zero layout shift: depth is all box-shadow, travel is all transform.
   ------------------------------------------------------------------------ */
.leaf-btn {
  --kb-wall: color-mix(in srgb, var(--plate-line) 44%, var(--ink));
  --kb-bevel: rgba(242, 237, 225, 0.26);
  --kb-contact: rgba(0, 0, 0, 0.10);
  --kb-cast: rgba(0, 0, 0, 0.07);

  /* r45: halved. Slot count is untouched (6 wall + contact + cast in every
     state) — only the numbers shrink, so the lists still interpolate in order. */
  --kb-rest:
    0 1px 0 var(--kb-wall), 0 1px 0 var(--kb-wall), 0 1px 0 var(--kb-wall),
    0 1px 0 var(--kb-wall), 0 1px 0 var(--kb-wall), 0 1px 0 var(--kb-wall),
    0 2px 1px -1px var(--kb-contact),
    0 2px 3px -2px var(--kb-cast);
  --kb-lift:
    0 1px 0 var(--kb-wall), 0 1px 0 var(--kb-wall), 0 2px 0 var(--kb-wall),
    0 2px 0 var(--kb-wall), 0 2px 0 var(--kb-wall), 0 2px 0 var(--kb-wall),
    0 3px 2px -2px var(--kb-contact),
    0 3px 4px -2px var(--kb-cast);
  --kb-press:
    0 0 0 var(--kb-wall), 0 0 0 var(--kb-wall), 0 0 0 var(--kb-wall),
    0 0 0 var(--kb-wall), 0 0 0 var(--kb-wall), 0 0 0 var(--kb-wall),
    0 1px 1px -1px var(--kb-contact),
    0 1px 1px -1px var(--kb-cast);

  border-radius: 4px;
  box-shadow: inset 0 1px 0 var(--kb-bevel), var(--kb-rest);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
              transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.leaf-btn--solid { --kb-bevel: rgba(255, 255, 255, 0.8); }
/* the ghost key's face sits a step ABOVE the plate, or its top plane and the
   sheet it stands on are the same tone. Scoped OFF the solid button, whose face
   is already the plate-line. */
.leaf-btn:not(.leaf-btn--solid) { background: rgba(242, 237, 225, 0.14); }
.leaf-btn:not(.leaf-btn--solid):hover { background: rgba(11, 107, 79, 0.16); }
/* both keys turn the same green wall the moment either face turns green */
.leaf-btn:hover { --kb-wall: color-mix(in srgb, var(--security) 62%, var(--ink)); }
.leaf-btn--solid:hover { --kb-bevel: color-mix(in srgb, var(--security) 50%, #fff); }
@media (hover: hover) {
  .leaf-btn:hover { box-shadow: inset 0 1px 0 var(--kb-bevel), var(--kb-lift); }
  /* pressing on a desktop means hovering AND pressing, and :hover is written
     after :active, so at equal specificity the raised wall was winning: the key
     travelled DOWN while its shadow said UP. The press has the last word. */
  .leaf-btn:hover:active { box-shadow: inset 0 1px 0 var(--kb-bevel), var(--kb-press); }
}
.leaf-btn:active {
  box-shadow: inset 0 1px 0 var(--kb-bevel), var(--kb-press);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
              transform 90ms ease-out, box-shadow 90ms ease-out;
}
/* travel == the wall it loses or gains: rest 1px, raised 2px, pressed flush */
@media (prefers-reduced-motion: no-preference) {
  .leaf-btn:focus-visible { transform: translateY(-1px); }
  .leaf-btn:active { transform: translateY(1px); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .leaf-btn:hover { transform: translateY(-1px); }
  .leaf-btn:hover:active { transform: translateY(1px); }
}
.leaf-btn:focus-visible { box-shadow: inset 0 1px 0 var(--kb-bevel), var(--kb-lift); }

@media (max-width: 900px) {
  .plate-grid { grid-template-columns: 48px 1fr; }
  .leaf-cta { grid-template-columns: 1fr; }
  .leaf-cta .cta-actions { justify-self: start; }
}
@media (max-width: 720px) {
  .ledger-row.r-time {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
  .mech-row { grid-template-columns: 1fr; gap: 0.45rem; }
}

/* Tier 2c, engraved type for the shared chrome / leaf pages. opsz tracks the
   display size; small heads carry more weight, large heads go lighter so the
   high-contrast strokes do the work. */
.leaf-hero h1   { font-variation-settings: 'opsz' 144, 'wght' 400; }
.plate-head h2  { font-variation-settings: 'opsz' 110, 'wght' 400; }
.leaf-cta h2    { font-variation-settings: 'opsz' 110, 'wght' 420; }
.mech-name      { font-variation-settings: 'opsz' 36, 'wght' 560; }
.foot-wordmark  { font-variation-settings: 'opsz' 24, 'wght' 600; }

/* Tier 2d (polish), keyboard focus reads as a green verification highlight
   (the chrome had no :focus states at all). */
.leaf-btn:focus-visible, .foot-col a:focus-visible,
.foot-wordmark:focus-visible, .leaf-mark:focus-visible {
  outline: 2px solid var(--security);
  outline-offset: 2px;
  border-radius: 1px;
}

/* Cross-document view-transitions and the wordmark morph were removed per the
   "no fluff effects" direction, page navigations are now plain/instant. */

/* ── consistency polish, line-free / box-free clean pass ──────────────────
   Match the sibling candidate: no functional hairlines, no little tag boxes,
   no boxed cell grids. Rely on whitespace + column alignment; high contrast. */
.ledger-row, .mech-row, .mech-row:first-child { border: none; }
.mech-row { padding: 1.15rem 0; }
.ledger-row { padding: 0.7rem 0; }
/* status/level tags → flat security-green labels, not boxes */
.mech-status {
  border: none; padding: 0; background: none;
  color: var(--security); letter-spacing: 0.12em;
}
/* annex cells → de-boxed, spaced */
.annex-grid { border: none; gap: 0.5rem 1rem; }
.annex-cell { border: none; padding: 1.1rem 0; min-height: 0; }

/* ── ROUND 10, mobile-first recut (≤720px) ────────────────────────────────
   The note re-set for a phone: smaller type, tighter leading, compact chrome.
   Additive layer only, nothing above this block changes, so desktop keeps
   its exact geometry. One left axis per section still holds. */
@media (max-width: 720px) {
  /* page shell, thinner bench around the sheet */
  .mint-page { padding: 0.6rem; }
  /* r31 D3: slimmer masthead so it never eats the phone frame; the live seal
     is decorative, so it steps down and the header holds a low bar. */
  .leaf-masthead { padding: 0.6rem 1.25rem; }
  .leaf-mark-img { height: 12px; }
  .mast-seal { width: 60px; }

  /* r31 D3: leaf hero on a phone budget. masthead + tag + h1 + lede land in one
     390x844 frame with the first content edge showing; gaps stay deliberate. */
  .leaf-hero { padding: 1.9rem 1.25rem 1.4rem; }
  .leaf-tag { font-size: 0.72rem; letter-spacing: 0.22em; margin-bottom: 0.75rem; }
  .leaf-hero h1 { font-size: clamp(1.9rem, 7.8vw, 2.4rem); line-height: 1.05; }
  .leaf-lede { font-size: 0.98rem; line-height: 1.5; margin-top: 0.85rem; }

  /* interior plates, tighter press */
  .leaf-body { padding: 1.6rem 1.25rem 2.2rem; }
  .plate-body { padding: 1.5rem 1.25rem; }
  .plate-head { margin-bottom: 1.2rem; }
  .plate-head h2 { font-size: clamp(1.4rem, 6.2vw, 1.8rem); }
  .mech-row { padding: 0.85rem 0; gap: 0.35rem; }
  .mech-name { font-size: 1.12rem; }
  .mech-desc, .legal-block p { font-size: 0.92rem; line-height: 1.5; }
  .ledger-row { font-size: 0.8rem; padding: 0.6rem 0; }
  .honesty { font-size: 0.9rem; line-height: 1.55; margin-top: 1.2rem; }
  .honesty.mono { font-size: 0.74rem; }
  .legal-block { padding: 1.2rem 0; }
  .leaf-colophon { font-size: 0.58rem; margin-top: 1.5rem; }
  .penalty-row { grid-template-columns: 1fr; gap: 0; }
  .penalty { padding: 0.9rem 0; }
  .penalty b { font-size: 1.35rem; }

  /* roster, tighter cards */
  .roster-band { padding: 0 1.25rem 1rem; }

  /* closing plate, r29: centered on phones, like the home hero */
  .leaf-cta { padding: 2.9rem 1.3rem; gap: 1.3rem; text-align: center; }
  .leaf-cta h2 { font-size: clamp(1.45rem, 6.4vw, 1.9rem); }
  .leaf-cta p { font-size: 0.92rem; margin-top: 0.7rem; }
  .leaf-cta .cta-actions { justify-content: center; }
  .leaf-btn { padding: 0.75rem 1.2rem; font-size: 0.64rem; }

  /* brand wall, half the bench */
  .brandwall { padding: 2rem 0 2.7rem; }
  /* one line, always: nowrap here, and mint-brandwall.js shrinks the type
     until the phrase fits its box on any page */
  .bw-caption { font-size: 0.8rem; letter-spacing: 0.1em; margin-bottom: 1.9rem; padding: 0.6rem 0.75rem 0; white-space: nowrap; }
  .bw-logo { width: clamp(60px, 15.5vw, 82px); height: 26px; }
  .bw-track { gap: 1.45rem; }
  .bw-marquee + .bw-marquee { margin-top: 0.8rem; }
  .bw-cell { padding: 0.9rem 0.55rem; min-height: 54px; }

  /* footer, the colophon plate, compacted hard, r29: centered on phones */
  .site-footer { padding: 2.2rem 1.25rem 0.7rem; text-align: center; }
  .foot-top { gap: 1.6rem; }
  .foot-blurb { margin: 0.7rem auto 1rem; font-size: 0.86rem; max-width: 40ch; }
  .foot-cols { grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1rem; }
  .foot-col h4 { margin-bottom: 0.5rem; font-size: 0.58rem; }
  .foot-col li { margin-bottom: 0.35rem; }
  .foot-col a { font-size: 0.84rem; }
  .foot-bottom { margin: 1.5rem auto 0; padding-top: 0.9rem; font-size: 0.56rem; letter-spacing: 0.1em; gap: 4px 12px; justify-content: center; }
}


/* ── sitewide typography orders (2026-07-09, Jared) ─────────────────────────
   1) Prose never ends on a one- or two-word last line: text-wrap pretty asks
      the engine to avoid short last lines wherever it wraps.
   2) Any see-more arrow link sits on its own line: give it .link-line. */
p, li, dd { text-wrap: pretty; }
a.link-line { display: block; width: fit-content; margin-top: 1rem; }

/* ── ROUND 11, mobile QA pass (2026-07-10) ──────────────────────────────────
   Tap targets to a 44px floor, stacked full-width closing CTAs, and a book
   measure on wide legal plates. Additive layer; desktop geometry above is
   untouched except where a rule is scoped ≤720px. */

/* legal prose keeps a reading measure inside the wide 3fr column */
.legal-block p { max-width: 60ch; }

/* if the logo-wall script cannot populate, the band vanishes rather than
   holding a blank bench */
.brandwall:empty { display: none; }

@media (max-width: 720px) {
  /* 44px floor: masthead wordmark keeps its visual size, grows its hit box */
  .leaf-mark { padding: 1rem 0.5rem; margin: -1rem -0.5rem; }
  /* 44px floor: standalone arrow links and rail links */
  a.link-line { padding-top: 0.7rem; padding-bottom: 0.7rem; }
  /* 44px floor: footer column links + wordmark hit box */
  .foot-wordmark { display: inline-block; padding: 1rem 0.4rem; margin: -1rem -0.4rem; }
  .foot-col a { display: inline-block; padding: 0.72rem 0; }
  .foot-col li { margin-bottom: 0; }
  /* r31 D1: the actions sit SIDE BY SIDE on mobile. Two-button plates hold one
     row; the single three-button plate (trust) wraps to two + one so nothing is
     clipped. Each button label stays one line (nowrap + tight tracking). */
  .leaf-cta .cta-actions {
    width: 100%; flex-direction: row; flex-wrap: wrap;
    align-items: stretch; gap: 0.6rem; justify-content: center;
  }
  .leaf-cta .cta-actions .leaf-btn {
    flex: 1 1 40%; min-width: 40%; justify-content: center; text-align: center;
    min-height: 44px; box-sizing: border-box; line-height: 1;
    white-space: nowrap; gap: 0.3rem;
    padding: 0.75rem 0.5rem; font-size: 0.72rem; letter-spacing: 0.04em;
  }
}

/* ============================================================================
   MOBILE COPY SWAP (r23 mobile overhaul). Dual-DOM copy: an element marked
   .m-only renders only on phones (≤720px); .d-only renders only above it.
   Desktop paints the identical tree it always did (the .m-only nodes are
   display:none there), so the ≥720.02px render is untouched by construction.
   ============================================================================ */
@media (min-width: 720.02px) { .m-only { display: none !important; } }
@media (max-width: 720px) { .d-only { display: none !important; } }

/* ---------------------------------------------------------------------------
   SKIP LINK. Every masthead sits inside <main>, so a keyboard user had to tab
   the whole masthead (and, on regulations, 2 filter groups + 6 region chips +
   5 sort buttons) before reaching content, on every load. Clipped until focus,
   so it costs the design nothing until it is needed.
   ------------------------------------------------------------------------ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.1rem;
  background: var(--ink, #0f0e0c);
  color: var(--paper, #f2ede1);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
  outline: 2px solid var(--security, #0b6b4f);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   SCALABLE TRADEMARK SUPERSCRIPT (sup.tm)
   Optically aligned to the wordmark's cap height, non-disruptive to leading.
   ------------------------------------------------------------------------ */
sup.tm {
  display: inline-block;
  line-height: 0;
  font-size: 0.55em;
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
  margin-left: 0.08em;
}