/* ==========================================================================
   nx-system.css — NeoShield semantic design system (X33)
   --------------------------------------------------------------------------
   ADDITIVE LAYER. Loads LAST so it can consolidate the four competing :root
   blocks (style.css, theme-quantum.css, pro-polish.css, quantum-defense-os.css)
   WITHOUT editing them. Nothing here renames an existing class or token — the
   legacy variables keep working exactly as before; this file adds semantic
   aliases on top and applies targeted accessibility + calm-aesthetic fixes.

   Contents
     1. Semantic tokens (§8)
     2. Accessibility corrections (§10) — contrast, focus, touch targets
     3. Typography + measure (§9)
     4. Calm pass (§7) — tames neon/glow, keeps a subtle technical feel
     5. Component primitives (nx-*) used by the redesigned pages
     6. Responsive + reduced-motion (§11)
   ========================================================================== */

/* ------------------------------ 1. TOKENS -------------------------------- */
:root{
  /* Surfaces — mapped onto the existing palette, not replacing it. */
  --color-bg-primary:      var(--bg,      #0b0f17);
  --color-bg-secondary:    var(--panel-2, #0e1420);
  --color-surface:         var(--panel,   #111826);
  --color-surface-elevated:#151d2e;
  --color-border:          var(--line,    #1e2940);
  --color-border-strong:   #2b3a5c;

  /* Text — --color-text-muted is INTENTIONALLY lighter than the legacy
     --faint (#5a6680 ≈ 3.9:1 on --bg, below the 4.5:1 body-text minimum).
     #9aa8c4 measures ≈ 7.0:1. Legacy --faint is left untouched for decorative
     use; see §2 where body-level uses are corrected. */
  --color-text-primary:    var(--ink, #e6edf6);
  --color-text-secondary:  #b6c2d9;
  --color-text-muted:      #9aa8c4;

  /* Brand + action */
  --color-brand:           var(--accent,   #16D9FF);
  --color-brand-2:         var(--accent-2, #9D74FF);
  --color-action-primary:  var(--accent,   #16D9FF);
  --color-action-fg:       #04121b;

  /* Status (semantic, not page-specific) */
  --color-success:         var(--ok,   #53F28D);
  --color-warning:         var(--warn, #FFBD4A);
  --color-critical:        var(--crit, #FF657A);
  --color-info:            #6cb6ff;

  /* Risk scale — used by findings, scores, and severity chips */
  --color-risk-low:        #53F28D;
  --color-risk-medium:     #FFBD4A;
  --color-risk-high:       #FF9147;
  --color-risk-critical:   #FF657A;

  /* Focus */
  --focus-ring:            2px solid #7fdcff;
  --focus-ring-offset:     2px;

  /* Spacing scale */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --spacing-section:56px;

  /* Radii + shadow */
  --radius-sm:8px; --radius-card:14px; --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(0,0,0,.28), 0 8px 24px rgba(0,0,0,.22);
  --shadow-raised:0 2px 4px rgba(0,0,0,.32), 0 16px 40px rgba(0,0,0,.28);

  /* Typography */
  --font-sans: var(--sans, system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,
               "Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif);
  --font-mono: var(--mono, ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  --text-xs:.8rem; --text-sm:.9rem; --text-base:1rem;
  --text-lg:1.125rem; --text-xl:1.375rem;
  --text-display:clamp(1.9rem,4.2vw,3rem);
  --leading-body:1.65;

  /* Containers + measure */
  --container-wide:1180px;
  --container-text:72ch;   /* §9: 65–75 characters for long-form reading */

  /* Motion */
  --motion-fast:120ms; --motion-base:200ms; --motion-slow:320ms;
  --motion-ease:cubic-bezier(.4,0,.2,1);
}

/* -------------------- 2. ACCESSIBILITY CORRECTIONS ----------------------- */

/* Body-level muted text lifted to a WCAG-AA contrast ratio. Decorative uses of
   .faint (icons, separators) are unaffected because they inherit size/opacity
   from their own rules; this only sets colour. */
.muted{ color:var(--color-text-muted); }
p.faint, span.faint, li.faint, td.faint, div.faint{ color:var(--color-text-muted); opacity:1; }

/* Visible, consistent focus everywhere (§10). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
.nd-label:focus-visible, .chip:focus-visible{
  outline:var(--focus-ring);
  outline-offset:var(--focus-ring-offset);
  border-radius:var(--radius-sm);
}

/* WCAG 2.2 §2.5.8 target size — nav links, chips and buttons reach 24px+,
   and 44px on touch pointers where there is room. */
.nav a, .nav .nd-label{ min-height:36px; display:inline-flex; align-items:center; }
.chip{ min-height:32px; display:inline-flex; align-items:center; }
.btn{ min-height:40px; display:inline-flex; align-items:center; justify-content:center; }
@media (pointer:coarse){
  .nav a, .nav .nd-label, .nd-menu a{ min-height:44px; }
  .btn{ min-height:44px; }
}

/* Skip link: make it unmistakable when focused. */
.skip:focus{ outline:var(--focus-ring); outline-offset:var(--focus-ring-offset); z-index:50; }

/* Status must never be colour-alone (§10). Any element carrying a risk level
   can opt in to a text marker via data-risk without extra markup. */
[data-risk]::before{ font-family:var(--font-mono); font-size:var(--text-xs); margin-right:6px; }
[data-risk="low"]::before     { content:"LOW";      color:var(--color-risk-low); }
[data-risk="medium"]::before  { content:"MEDIUM";   color:var(--color-risk-medium); }
[data-risk="high"]::before    { content:"HIGH";     color:var(--color-risk-high); }
[data-risk="critical"]::before{ content:"CRITICAL"; color:var(--color-risk-critical); }

/* ------------------------- 3. TYPOGRAPHY --------------------------------- */
body{ font-family:var(--font-sans); line-height:var(--leading-body); }
.nx-measure{ max-width:var(--container-text); }
.nx-eyebrow{
  font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.08em;
  text-transform:uppercase; color:var(--color-brand); margin:0 0 var(--space-2);
}
/* Monospace stays for labels/codes only (§9) — never long paragraphs. */
.nx-mono{ font-family:var(--font-mono); font-size:var(--text-sm); }

/* --------------------------- 4. CALM PASS -------------------------------- */
/* §7: keep a subtle technical aesthetic, drop the glow excess. Scoped to the
   redesigned surfaces so existing tool pages are untouched. */
.nx-section{ margin-top:var(--spacing-section); }
.nx-section > h2{
  font-size:clamp(1.3rem,2.6vw,1.75rem); letter-spacing:-.01em;
  margin:0 0 var(--space-2);
}
.nx-section > .nx-sub{ color:var(--color-text-muted); margin:0 0 var(--space-5); max-width:var(--container-text); }

.nx-card{
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-card); padding:var(--space-5);
  box-shadow:var(--shadow-card);
  transition:border-color var(--motion-base) var(--motion-ease),
             transform var(--motion-base) var(--motion-ease);
}
a.nx-card{ display:block; color:inherit; text-decoration:none; }
a.nx-card:hover{ border-color:var(--color-border-strong); transform:translateY(-2px); text-decoration:none; }
a.nx-card:hover .nx-card-cta{ text-decoration:underline; }
.nx-card h3{ margin:0 0 var(--space-2); font-size:var(--text-lg); color:var(--color-text-primary); }
.nx-card p{ margin:0; color:var(--color-text-secondary); font-size:var(--text-sm); }
.nx-card-cta{ display:inline-block; margin-top:var(--space-3); color:var(--color-brand); font-size:var(--text-sm); font-weight:600; }

/* Grid utilities that never cause horizontal scroll (§11). */
.nx-grid{ display:grid; gap:var(--space-4); }
@media(min-width:640px){ .nx-grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:900px){
  .nx-grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .nx-grid.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(min-width:640px) and (max-width:899px){
  .nx-grid.cols-3, .nx-grid.cols-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* --------------------- 5. COMPONENT PRIMITIVES --------------------------- */

/* Hero — two prominent actions maximum (§13). */
.nx-hero-v2{
  padding:var(--space-7) var(--space-5);
  border:1px solid var(--color-border); border-radius:var(--radius-card);
  background:
    radial-gradient(720px 320px at 15% -20%, rgba(22,217,255,.07), transparent 60%),
    var(--color-bg-secondary);
}
.nx-hero-v2 h1{
  font-size:var(--text-display); line-height:1.12; letter-spacing:-.02em;
  margin:0 0 var(--space-3); max-width:20ch; color:var(--color-text-primary);
}
.nx-hero-v2 .nx-lede-v2{
  font-size:var(--text-lg); color:var(--color-text-secondary);
  max-width:var(--container-text); margin:0 0 var(--space-5);
}
.nx-actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.nx-actions .nx-tertiary{
  align-self:center; color:var(--color-text-muted); font-size:var(--text-sm);
  text-decoration:underline; text-underline-offset:3px;
}

/* Verifiable proof strip — facts only, no invented metrics (§13). */
.nx-proof{ display:grid; gap:var(--space-3); margin-top:var(--space-5); padding:0; list-style:none; }
@media(min-width:720px){ .nx-proof{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.nx-proof li{
  border-left:2px solid var(--color-success); padding:var(--space-2) 0 var(--space-2) var(--space-3);
  color:var(--color-text-secondary); font-size:var(--text-sm);
}

/* Intent router — "What do you need to check?" (§13). */
.nx-router{ display:grid; gap:var(--space-3); }
@media(min-width:640px){ .nx-router{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:960px){ .nx-router{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.nx-router a{
  display:flex; align-items:flex-start; gap:var(--space-3);
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-card); padding:var(--space-4);
  color:var(--color-text-primary); text-decoration:none;
  transition:border-color var(--motion-base) var(--motion-ease);
}
.nx-router a:hover{ border-color:var(--color-brand); text-decoration:none; }
.nx-router .nx-router-k{
  font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-brand);
  border:1px solid var(--color-border-strong); border-radius:var(--radius-sm);
  padding:2px 7px; flex:none; margin-top:2px;
}
.nx-router b{ display:block; font-size:var(--text-base); }
.nx-router span.nx-router-d{ display:block; color:var(--color-text-muted); font-size:var(--text-sm); margin-top:2px; }

/* Numbered workflow — Check → Understand → Respond → Improve (§13). */
.nx-flow{ display:grid; gap:var(--space-4); counter-reset:nxflow; }
@media(min-width:900px){ .nx-flow{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.nx-flow > li{ counter-increment:nxflow; list-style:none; padding-top:var(--space-4); border-top:2px solid var(--color-border-strong); }
.nx-flow > li::before{
  content:"0" counter(nxflow); font-family:var(--font-mono); font-size:var(--text-xs);
  color:var(--color-brand); display:block; margin-bottom:var(--space-2); letter-spacing:.08em;
}
.nx-flow h3{ margin:0 0 var(--space-2); font-size:var(--text-base); }
.nx-flow p{ margin:0; color:var(--color-text-muted); font-size:var(--text-sm); }

/* Tool cards with plan / input / privacy metadata (§14). */
.nx-tool-meta{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3); }
.nx-tag{
  font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.04em;
  border:1px solid var(--color-border-strong); border-radius:var(--radius-pill);
  padding:2px 9px; color:var(--color-text-muted); white-space:nowrap;
}
.nx-tag.plan-free{ color:var(--color-success); border-color:rgba(83,242,141,.4); }
.nx-tag.plan-pro{ color:var(--color-brand); border-color:rgba(22,217,255,.4); }
.nx-tag.plan-team{ color:var(--color-brand-2); border-color:rgba(157,116,255,.45); }
.nx-tag.privacy{ color:var(--color-text-secondary); }

/* Mobile-safe table alternative (§11). */
@media(max-width:640px){
  .nx-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .nx-table-scroll table{ min-width:520px; }
  .nx-table-scroll::after{
    content:"Scroll horizontally to see all columns";
    display:block; font-size:var(--text-xs); color:var(--color-text-muted); padding-top:var(--space-2);
  }
}

/* Long security terms must never break the layout (§11). */
.nx-card h3, .nx-router b, .nx-tag{ overflow-wrap:anywhere; }

/* ------------------- 6. NAVIGATION + RESPONSIVE -------------------------- */
/* Mobile menu becomes a readable vertical panel instead of a horizontally
   scrolling strip. Uses ONLY the existing #nav-toggle / .nav / .nd hooks, so
   the pure-CSS burger and main.js dropdown logic keep working unchanged. */
@media(max-width:720px){
  .nav{
    flex-direction:column; align-items:stretch; gap:var(--space-1);
    overflow-y:auto; overflow-x:hidden;      /* was: overflow:auto (horizontal strip) */
    padding-bottom:var(--space-4);
  }
  .nav > a, .nav .nd{ width:100%; }
  .nav .nd-label{ width:100%; justify-content:space-between; padding:10px 12px; }
  .nav .nd-menu{ position:static; width:100%; box-shadow:none; border-radius:var(--radius-sm); }
  .nav .nd-menu a{ padding:10px 14px; }
  .nav .ghost{ text-align:center; justify-content:center; margin-top:var(--space-2); }
  .nav-lang{ justify-content:center; padding:var(--space-2) 0; }
}

/* Very small screens (320px): keep the brand from crowding the burger. */
@media(max-width:360px){
  .brand span{ font-size:.86rem; }
  .nx-hero-v2{ padding:var(--space-5) var(--space-4); }
}

/* Reduced motion (§10). The global rule in style.css already disables
   animation; this also neutralises the hover lift. */
@media (prefers-reduced-motion:reduce){
  a.nx-card:hover{ transform:none; }
  .nx-card, .nx-router a{ transition:none; }
}

/* ==========================================================================
   X37 — Homepage redesign layer.
   Widens the desktop shell, raises the type scale, and adds the components the
   redesign needs. Additive: no existing class is renamed, and every legacy
   token keeps working. No JavaScript is required by anything below, so the
   CSP (script-src 'self') is untouched.
   ========================================================================== */

:root{
  /* The shell was 1180px with 20px padding, which left wide desktops mostly
     empty. Marketing content now uses a fluid container that tops out at
     1240px, with reading-width and wide variants for specific content types. */
  --container-marketing: 77.5rem;   /* 1240px */
  --container-reading:   50rem;     /* 800px, for long-form prose */
  --gutter:              1.25rem;   /* 20px on mobile */
}
@media (min-width:768px){ :root{ --gutter:2rem; } }

/* Fluid container. Safe-area aware for notched devices. */
.nx-container{
  width:min(100% - (var(--gutter) * 2), var(--container-marketing));
  margin-inline:auto;
  padding-left:max(0px, env(safe-area-inset-left));
  padding-right:max(0px, env(safe-area-inset-right));
}
.nx-reading{ max-width:var(--container-reading); }

/* Widen the existing shell so the homepage uses the desktop viewport. This
   only raises the ceiling; narrower content still centres normally. */
@media (min-width:1024px){
  :root{ --maxw:1240px; }
  .wrap{ padding-left:var(--gutter); padding-right:var(--gutter); }
}

/* ---- Type scale (§6). Raised across the board; nav was .94rem. ---- */
body{ font-size:1.0625rem; }                /* 17px base */
.nav{ font-size:.95rem; }
@media (min-width:1024px){ .nav{ font-size:1rem; gap:14px; } }
.nx-h1{ font-size:clamp(2.25rem, 4.6vw, 4rem); line-height:1.08; letter-spacing:-.025em; }
.nx-h2{ font-size:clamp(1.6rem, 2.8vw, 2.5rem); line-height:1.15; letter-spacing:-.02em; }
.nx-lede-lg{ font-size:clamp(1.0625rem, 1.35vw, 1.25rem); line-height:1.65; color:var(--color-text-secondary); }

/* ---- Hero: two columns on desktop, one on mobile, headline first (§9). ---- */
.nx-hero-grid{ display:grid; gap:var(--space-6); align-items:start; }
@media (min-width:1024px){
  .nx-hero-grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:var(--space-7); align-items:center; }
}
.nx-hero-actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; }
@media (max-width:520px){
  .nx-hero-actions{ flex-direction:column; align-items:stretch; }
  .nx-hero-actions .btn{ width:100%; }
}

/* Trust row: a readable grid, never four items crushed into one row (§9). */
.nx-trust-row{ display:grid; gap:var(--space-3); list-style:none; padding:0; margin:var(--space-5) 0 0; }
@media (min-width:560px){ .nx-trust-row{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1280px){ .nx-trust-row{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
/* Consolidated in 2.4.0: this rule was declared twice (here and ~line 789).
   Both applied, with the later one overriding font-size and padding, so the
   effective style was a blend of the two that neither block showed on its own.
   Merged to the values that were actually computing.

   The `border-left:2px solid var(--color-success)` is gone deliberately: green
   is severity green in this palette and means a check PASSED. These are
   marketing claims with no status, so nx-pro.css was overriding it back to 0 on
   every page. Removed at source rather than fought downstream. */
.nx-trust-row li{
  padding:4px 0 4px var(--space-3);
  font-size:.9375rem;
  color:var(--color-text-secondary);
  line-height:1.5;
}
.nx-trust-row a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }

/* ---- Product output preview. Real sanitized content, stacked on mobile. ---- */
.nx-preview{
  border:1px solid var(--color-border); border-radius:var(--radius-card);
  background:var(--color-bg-secondary); overflow:hidden; box-shadow:var(--shadow-raised);
}
.nx-preview-bar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  flex-wrap:wrap; padding:10px 14px;
  border-bottom:1px solid var(--color-border); background:var(--color-surface);
}
.nx-preview-title{ font-size:.9rem; font-weight:600; color:var(--color-text-primary); }
.nx-preview-tag{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--color-text-muted); border:1px solid var(--color-border-strong);
  border-radius:var(--radius-pill); padding:2px 8px;
}
.nx-preview-body{ padding:var(--space-4); display:grid; gap:var(--space-4); }
.nx-finding{ display:grid; gap:6px; }
.nx-finding-head{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.nx-finding-id{ font-family:var(--font-mono); font-size:.78rem; color:var(--color-text-muted); }
.nx-finding-title{ font-weight:600; font-size:1rem; color:var(--color-text-primary); }
/* Severity carries a text label AND a colour, never colour alone (§5, §24). */
.nx-sev{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  border-radius:var(--radius-pill); padding:2px 9px; border:1px solid currentColor; white-space:nowrap;
}
.nx-sev.low{ color:var(--color-risk-low); }
.nx-sev.medium{ color:var(--color-risk-medium); }
.nx-sev.high{ color:var(--color-risk-high); }
.nx-sev.critical{ color:var(--color-risk-critical); }
.nx-kv{ display:grid; gap:3px; }
.nx-kv dt{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--color-text-muted);
}
.nx-kv dd{ margin:0; font-size:.92rem; color:var(--color-text-secondary); line-height:1.55; }
.nx-preview-foot{
  padding:10px 14px; border-top:1px solid var(--color-border);
  font-size:.82rem; color:var(--color-text-muted); background:var(--color-surface);
}

/* ---- Task tiles (§11). Spacious, never six cramped cards. ---- */
.nx-tiles{ display:grid; gap:var(--space-4); }
@media (min-width:640px){ .nx-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.nx-tile{
  display:flex; flex-direction:column; gap:6px;
  padding:var(--space-5); min-height:100%;
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-card); color:inherit; text-decoration:none;
  transition:border-color var(--motion-base) var(--motion-ease),
             transform var(--motion-base) var(--motion-ease);
}
.nx-tile:hover{ border-color:var(--color-border-strong); transform:translateY(-2px); text-decoration:none; }
.nx-tile-k{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-brand); margin-bottom:2px;
}
.nx-tile-t{ font-size:1.15rem; font-weight:600; line-height:1.3; }
.nx-tile-d{ font-size:.95rem; color:var(--color-text-secondary); line-height:1.55; margin:0; }
.nx-tile-go{ margin-top:auto; padding-top:var(--space-3); color:var(--color-brand); font-size:.9rem; font-weight:600; }
.nx-tile-secondary{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-4); }

/* ---- Split section: explanation left, evidence right (§12). ---- */
.nx-split{ display:grid; gap:var(--space-5); align-items:start; }
@media (min-width:1024px){ .nx-split{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--space-7); } }

/* ---- Process (§13): horizontal desktop, vertical mobile, with connectors. -- */
.nx-steps{ display:grid; gap:var(--space-5); counter-reset:nxs; list-style:none; padding:0; margin:0; }
@media (min-width:900px){ .nx-steps{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-4); } }
.nx-steps > li{ counter-increment:nxs; position:relative; padding-top:var(--space-4); border-top:2px solid var(--color-border-strong); }
.nx-steps > li::before{
  content:"0" counter(nxs); font-family:var(--font-mono); font-size:.75rem; letter-spacing:.1em;
  color:var(--color-brand); display:block; margin-bottom:6px;
}
/* Connector between steps, desktop only, decorative. */
@media (min-width:900px){
  .nx-steps > li:not(:last-child)::after{
    content:""; position:absolute; top:-2px; right:calc(var(--space-4) * -1); width:var(--space-4);
    border-top:2px solid var(--color-border);
  }
}
.nx-steps h3{ margin:0 0 4px; font-size:1.1rem; }
.nx-steps p{ margin:0; font-size:.95rem; color:var(--color-text-muted); line-height:1.6; }

/* ---- Audience panels (§14): spacious, no long tool lists. ---- */
.nx-aud{ display:grid; gap:var(--space-4); }
@media (min-width:900px){ .nx-aud{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.nx-aud-card{
  display:flex; flex-direction:column; gap:var(--space-3);
  padding:var(--space-5); background:var(--color-surface);
  border:1px solid var(--color-border); border-radius:var(--radius-card);
}
.nx-aud-card h3{ margin:0; font-size:1.2rem; }
.nx-aud-problem{ font-size:.88rem; color:var(--color-text-muted); font-style:italic; margin:0; }
.nx-aud-card p{ margin:0; font-size:.96rem; color:var(--color-text-secondary); line-height:1.6; }
.nx-aud-card ul{ margin:0; padding-left:1.1rem; font-size:.92rem; color:var(--color-text-secondary); }
.nx-aud-card ul li{ margin:3px 0; }
.nx-aud-card .btn{ margin-top:auto; align-self:flex-start; }

/* ---- Capability rows (§15): compact, outcome-grouped, not a tool dump. ---- */
.nx-cap{ display:grid; gap:var(--space-4); }
@media (min-width:768px){ .nx-cap{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1280px){ .nx-cap{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.nx-cap-card{
  padding:var(--space-5); background:var(--color-surface);
  border:1px solid var(--color-border); border-radius:var(--radius-card);
}
.nx-cap-card h3{ margin:0 0 6px; font-size:1.08rem; }
.nx-cap-card p{ margin:0 0 var(--space-3); font-size:.93rem; color:var(--color-text-secondary); line-height:1.55; }

/* ---- Pricing cards on the homepage (§17). ---- */
.nx-plans{ display:grid; gap:var(--space-4); }
@media (min-width:768px){ .nx-plans{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1180px){ .nx-plans{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.nx-plan{
  display:flex; flex-direction:column; gap:6px; padding:var(--space-5);
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-card);
}
.nx-plan.is-recommended{ border-color:var(--color-brand); }
.nx-plan .nx-price{ font-size:1.9rem; font-weight:700; letter-spacing:-.02em; color:var(--color-text-primary); }
.nx-plan .nx-price-sub{ font-size:.88rem; color:var(--color-text-muted); line-height:1.5; }
.nx-plan ul{ margin:var(--space-3) 0 0; padding-left:1.1rem; font-size:.92rem; color:var(--color-text-secondary); }
.nx-plan .btn{ margin-top:var(--space-4); }
@media (max-width:520px){ .nx-plan .btn{ width:100%; } }

/* ---- FAQ (§18). Native <details> keeps it keyboard-accessible with zero JS. */
.nx-faq details{
  border:1px solid var(--color-border); border-radius:var(--radius-card);
  background:var(--color-surface); margin-bottom:var(--space-3);
}
.nx-faq summary{
  cursor:pointer; list-style:none; padding:16px var(--space-4);
  font-weight:600; font-size:1rem; line-height:1.5; min-height:44px;
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
}
.nx-faq summary::-webkit-details-marker{ display:none; }
.nx-faq summary::after{
  content:"+"; font-family:var(--font-mono); font-size:1.2rem; color:var(--color-brand); flex:none;
}
.nx-faq details[open] summary::after{ content:"\2212"; }
.nx-faq summary:focus-visible{ outline:var(--focus-ring); outline-offset:-2px; }
.nx-faq details > p{
  margin:0; padding:0 var(--space-4) var(--space-4);
  color:var(--color-text-secondary); font-size:.96rem; line-height:1.7; max-width:70ch;
}

/* ---- Footer groups (§20): stacked on mobile, five columns on desktop. ---- */
.nx-foot-grid{ display:grid; gap:var(--space-5); }
@media (min-width:640px){ .nx-foot-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .nx-foot-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--space-4); } }

/* ---- Global safety rails (§36). ---- */
html{ overflow-x:hidden; }
img, svg, video, canvas, table{ max-width:100%; }
.nx-container, .nx-tile, .nx-card, .nx-preview, .nx-plan{ min-width:0; }
/* Long, unbroken security terms must never force a horizontal scrollbar. */
.nx-tile-t, .nx-finding-title, .nx-cap-card h3, .nx-plan h3{ overflow-wrap:anywhere; }

@media (prefers-reduced-motion:reduce){
  .nx-tile:hover{ transform:none; }
  .nx-tile{ transition:none; }
}

/* ==========================================================================
   X38 — mobile drawer presentation (spec §8) and footer groups (§20).
   ========================================================================== */

@media (max-width:720px){
  /* Drawer must sit above page content, never behind it. */
  .nav{
    position:relative; z-index:60;
    max-height:0; overflow:hidden;
    background:var(--color-bg-secondary);
    border-radius:var(--radius-card);
    padding-left:max(0px, env(safe-area-inset-left));
    padding-right:max(0px, env(safe-area-inset-right));
    padding-bottom:max(var(--space-4), env(safe-area-inset-bottom));
  }
  .nav-toggle:checked ~ .nav{
    max-height:calc(100dvh - 96px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    border:1px solid var(--color-border);
    box-shadow:var(--shadow-raised);
    padding-top:var(--space-3);
  }
  /* Mobile landscape: the drawer must stay usable in a short viewport. */
  @media (orientation:landscape){
    .nav-toggle:checked ~ .nav{ max-height:calc(100dvh - 72px); }
  }
  .nav-burger{ min-width:44px; min-height:44px; align-items:center; }
}

/* Footer: five logical groups, stacked on mobile (§20). */
.nx-foot-cols{ display:grid; gap:var(--space-5); margin-top:var(--space-5); }
@media (min-width:600px){ .nx-foot-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .nx-foot-cols{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--space-4); } }
.nx-foot-col .foot-h{
  font-size:.78rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--color-text-muted); margin:0 0 var(--space-3); font-weight:600;
}
.nx-foot-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.nx-foot-col a{
  display:block; padding:7px 0; font-size:.92rem;
  color:var(--color-text-secondary); text-decoration:none; min-height:32px;
}
.nx-foot-col a:hover{ color:var(--color-text-primary); text-decoration:underline; }
@media (pointer:coarse){ .nx-foot-col a{ min-height:44px; display:flex; align-items:center; } }

/* One compact legal bar. */
.nx-legal-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-4);
  margin-top:var(--space-6); padding-top:var(--space-4);
  border-top:1px solid var(--color-border);
  font-size:.85rem; color:var(--color-text-muted);
}
.nx-legal-bar a{ color:var(--color-text-muted); text-decoration:none; padding:4px 0; }
.nx-legal-bar a:hover{ color:var(--color-text-primary); text-decoration:underline; }
@media (pointer:coarse){ .nx-legal-bar a{ min-height:44px; display:inline-flex; align-items:center; } }

/* ==========================================================================
   X40 — footer typography and the de-duplicated bottom row.
   Fixes three real problems found in the rendered footer:
     1. the review note was a full SENTENCE set in 11.5px monospace at
        --faint (#5a6680), which measures 3.89:1 and fails WCAG AA;
     2. the status pill and legal links were below comfortable reading size;
     3. the copyright and legal links were duplicated across two rows.
   ========================================================================== */

/* The note is prose, not a technical label, so it uses the body face at a
   readable size and an AA-passing colour. */
.site-foot .foot-note{
  font-family:var(--font-sans) !important;
  font-size:.875rem !important;
  line-height:1.6 !important;
  letter-spacing:0 !important;
  color:var(--color-text-muted) !important;   /* 7.30:1 on the page background */
  max-width:var(--container-reading);
}

/* Status pill: monospace is appropriate for a system-status label, but it was
   too small to read comfortably. */
.site-foot .foot-status{
  font-size:.8rem !important;
  color:var(--color-text-secondary) !important;
  padding:6px 12px !important;
  min-height:32px;
}
@media (pointer:coarse){ .site-foot .foot-status{ min-height:44px; } }

/* Legal bar: raised from the old .78rem, and each link is a comfortable target. */
.nx-legal-bar{ font-size:.875rem; }
.nx-legal-bar .nx-legal-copy{ color:var(--color-text-secondary); }
.nx-legal-bar a{ color:var(--color-text-muted); }
.nx-legal-bar a:hover,
.nx-legal-bar a:focus-visible{ color:var(--color-text-primary); }

/* Bottom row: status, install control, and note only. */
.nx-foot-bottom{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3) var(--space-4);
  margin-top:var(--space-4); padding-top:var(--space-4);
  border-top:1px solid var(--color-border);
}
.nx-foot-bottom .foot-note{ flex:1 1 100%; margin:0; }
.nx-foot-install{
  font-size:.875rem; color:var(--color-brand); text-decoration:none;
  padding:6px 12px; border:1px solid var(--color-border-strong); border-radius:var(--radius-pill);
  min-height:32px; display:inline-flex; align-items:center;
}
.nx-foot-install:hover{ border-color:var(--color-brand); text-decoration:none; }
@media (pointer:coarse){ .nx-foot-install{ min-height:44px; } }

/* Column headings were small caps at .78rem; nudge up for legibility. */
.nx-foot-col .foot-h{
  font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-text-muted); margin:0 0 var(--space-3); font-weight:600;
}
.nx-foot-col a{ font-size:.9375rem; }

/* Assurance strip above the columns: prose, so never monospace. */
.site-foot .foot-assure span{
  font-family:var(--font-sans); font-size:.875rem; line-height:1.6;
  color:var(--color-text-secondary);
}

@media (max-width:600px){
  .nx-legal-bar{ gap:var(--space-2) var(--space-3); }
  .nx-foot-bottom{ align-items:flex-start; }
}

/* ==========================================================================
   X41 — final polish: Quantum X definition, semantic trust links, capability
   hierarchy, and the alignment/typography corrections.
   ========================================================================== */

/* One-sentence Quantum X definition, sitting between the eyebrow and the H1. */
.nx-qx-def{
  margin:0 0 var(--space-4);
  max-width:56ch;
  font-size:1rem;
  line-height:1.6;
  color:var(--color-text-muted);
}

/* §10: trust resources as a real list. Spacing comes from CSS gap, never from
   markup whitespace or non-breaking spaces, and each link is its own <li> so
   screen readers announce them separately. Visible separators are drawn with
   a pseudo-element so they are not read aloud. */
.nx-trust-links{ margin-top:var(--space-5); }
.nx-trust-links ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--space-2) var(--space-4);
}
.nx-trust-links li{ display:flex; align-items:center; }
.nx-trust-links li + li::before{
  content:""; width:1px; height:1em;
  background:var(--color-border-strong);
  margin-right:var(--space-4);
  flex:none;
}
.nx-trust-links a{
  font-size:.9375rem; line-height:1.5;
  color:var(--color-text-secondary); text-decoration:none;
  padding:6px 0; min-height:32px; display:inline-flex; align-items:center;
}
.nx-trust-links a:hover,
.nx-trust-links a:focus-visible{ color:var(--color-brand); text-decoration:underline; text-underline-offset:3px; }
@media (pointer:coarse){ .nx-trust-links a{ min-height:44px; } }
@media (max-width:520px){
  /* Stack on very narrow screens so long Japanese labels never clip. */
  .nx-trust-links ul{ flex-direction:column; align-items:flex-start; gap:0; }
  .nx-trust-links li + li::before{ display:none; }
  .nx-trust-links a{ min-height:44px; }
}

/* §11: primary capabilities keep full weight; secondary ones are quieter. */
.nx-cap-secondary{ margin-top:var(--space-4); }
.nx-cap-secondary .nx-cap-card{
  background:transparent;
  border-style:dashed;
  padding:var(--space-4);
}
.nx-cap-secondary .nx-cap-card h3{ font-size:1rem; color:var(--color-text-secondary); }
.nx-cap-secondary .nx-cap-card p{ font-size:.9rem; }
@media (min-width:768px){ .nx-cap-secondary{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1280px){ .nx-cap-secondary{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Sample-output disclosure must read as information, not fine print. */
.nx-preview-foot{
  font-size:.85rem !important;
  line-height:1.55;
  color:var(--color-text-muted) !important;
}
.nx-preview-tag{ font-size:.7rem; }

/* --- Alignment and rhythm corrections --------------------------------------
   Card grids used mixed alignment, which left ragged baselines when adjacent
   cards had different text lengths. Stretch keeps their top edges aligned and
   lets each card fill its track. */
.nx-grid, .nx-cap, .nx-aud, .nx-tiles, .nx-plans{ align-items:stretch; }
.nx-card, .nx-cap-card, .nx-aud-card, .nx-plan, .nx-tile{ height:100%; }

/* Consistent vertical rhythm between sections. */
.nx-section + .nx-section{ margin-top:var(--spacing-section); }
.nx-section > .nx-h2 + .nx-sub{ margin-top:var(--space-2); }

/* Trailing punctuation and long labels must not push a chip out of its row. */
.nx-tag{ line-height:1.5; }

/* Section intros share one measure so headings and body align on the left. */
.nx-sub{ max-width:var(--container-reading); }

/* ==========================================================================
   X42 — navigation consolidation, hero balance, trust readability.
   ========================================================================== */

/* --- Nav: five marketing categories + account + CTA + language ------------ */
.nd-menu-wide{ min-width:min(300px, calc(100vw - 32px)); max-height:70vh; overflow-y:auto; }
.nd-search{ padding:6px 8px; border-bottom:1px solid var(--color-border); margin-bottom:4px; }
.nd-search input{
  width:100%; padding:8px 10px; font-size:.875rem; border-radius:7px;
  border:1px solid var(--color-border); background:var(--color-bg-secondary); color:inherit;
}
/* Group label inside a dropdown. Not a link, so it must not look like one. */
.nd-group{
  margin:10px 0 4px; padding:0 12px;
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-text-muted); font-weight:600;
}
.nd-group:first-child{ margin-top:2px; }
/* Tier chip after a tool name: a word, never colour alone. */
.nd-tier{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.06em;
  border:1px solid currentColor; border-radius:var(--radius-pill);
  padding:1px 6px; margin-left:6px; white-space:nowrap;
}
.nd-tier.free{ color:var(--color-success); }
.nd-tier.pro{ color:var(--color-brand); }
.nd-tier.team{ color:var(--color-brand-2); }

/* Sign out is destructive, so it is separated from the rest of the menu. */
.nd-signout{
  margin-top:6px; padding-top:10px !important;
  border-top:1px solid var(--color-border);
  color:var(--color-critical) !important;
}

/* Header CTA must stay visually dominant. */
.nav-cta{ margin-left:4px; white-space:nowrap; }

/* Compact language control. */
.nd-lang .nd-label{ font-size:.9rem; min-width:44px; justify-content:center; }
.nd-menu-lang{ min-width:140px; }
.nd-menu-lang .lang-active{ display:block; padding:8px 12px; opacity:.65; }

/* Dropdowns must not open off-screen on the right edge. */
.nd.right .nd-menu, .nd-account .nd-menu, .nd-lang .nd-menu{ right:0; left:auto; }
@media (min-width:721px){
  .nd-menu{ max-width:min(360px, calc(100vw - 24px)); }
}

/* --- §7: headline balance. A narrower measure at large sizes keeps the
   composition to two to four lines instead of one word per line. --------- */
.nx-hero-v2 .nx-h1, .nx-hero-grid .nx-h1{
  max-width:15ch;
  text-wrap:balance;          /* avoids widows where supported */
}
@media (min-width:1024px){ .nx-hero-grid .nx-h1{ max-width:13ch; font-size:clamp(2.5rem,3.6vw,3.5rem); } }
@media (min-width:1600px){ .nx-hero-grid .nx-h1{ max-width:14ch; font-size:3.6rem; } }
/* Japanese has no spaces, so a character-count measure would over-constrain it. */
html[lang="ja"] .nx-hero-grid .nx-h1{ max-width:22ch; text-wrap:auto; }

/* --- §9: trust indicators, two by two, never four narrow columns -------- */
.nx-trust-row{ gap:var(--space-3) var(--space-5); }
@media (min-width:560px){ .nx-trust-row{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1280px){ .nx-trust-row{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* .nx-trust-row li — merged into the single declaration above (2.4.0). */

/* --- §8: hero report readability --------------------------------------- */
.nx-preview-body{ gap:var(--space-3); padding:var(--space-4) var(--space-4) var(--space-3); }
.nx-kv{ gap:2px; }
.nx-kv dt{ font-size:.66rem; color:var(--color-text-secondary); margin-top:8px; }
.nx-kv dt:first-of-type{ margin-top:0; }
.nx-kv dd{ font-size:.9375rem; line-height:1.55; }
.nx-finding-title{ font-size:1.02rem; line-height:1.35; }

/* Compact secondary finding: a single readable row that links to full detail. */
.nx-finding-compact{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:12px var(--space-3); margin-top:2px;
  border:1px solid var(--color-border); border-radius:var(--radius-sm);
  background:var(--color-surface); text-decoration:none; color:inherit;
  min-height:44px;
}
.nx-finding-compact:hover{ border-color:var(--color-border-strong); text-decoration:none; }
.nx-finding-compact .nx-finding-title{ font-size:.9375rem; flex:1 1 auto; min-width:0; }
.nx-finding-more{ font-size:.85rem; color:var(--color-brand); white-space:nowrap; }

/* --- §10: the technical code and the tile title are separate blocks ----- */
.nx-tile-k{ display:block; }
.nx-tile-t{ display:block; }

@media (max-width:720px){
  .nav-cta{ width:100%; justify-content:center; margin:var(--space-2) 0 0; }
  .nd-lang .nd-label{ width:100%; }
  .nd-menu-wide{ max-height:none; }
}

/* ==========================================================================
   X43 — defects found in the deployed render.
   ========================================================================== */

/* D4: the Install control stayed VISIBLE when unavailable, because a later
   `display:inline-flex` rule outranked the [hidden] attribute (which only sets
   display:none at user-agent level). Restore the attribute's authority. */
.nx-foot-install[hidden]{ display:none !important; }
/* It is now a <button>, so reset the UA button chrome. */
button.nx-foot-install{
  font-family:inherit; background:transparent; cursor:pointer;
  color:var(--color-brand); font-size:.875rem;
  padding:6px 12px; border:1px solid var(--color-border-strong);
  border-radius:var(--radius-pill); min-height:32px;
  display:inline-flex; align-items:center;
}
button.nx-foot-install:hover{ border-color:var(--color-brand); }
button.nx-foot-install:focus-visible{ outline:var(--focus-ring); outline-offset:2px; }
@media (pointer:coarse){ button.nx-foot-install{ min-height:44px; } }

/* D5: the headline still broke to four lines with "Practical" stranded.
   13ch was too tight: "cybersecurity" alone is 13 characters, so the measure
   could never fit "Practical cybersecurity" on one line. Widened so the
   composition lands on two or three balanced lines. */
@media (min-width:1024px){
  .nx-hero-grid .nx-h1{ max-width:19ch; font-size:clamp(2.4rem,3.3vw,3.3rem); }
}
@media (min-width:1600px){
  .nx-hero-grid .nx-h1{ max-width:20ch; font-size:3.4rem; }
}
html[lang="ja"] .nx-hero-grid .nx-h1{ max-width:24ch; }

/* ==========================================================================
   X44 — navigation menu behaviour.
   Two problems found by measuring the built menus:
     - Tools held 25 links in ONE column, producing a 70vh scrolling dropdown
       on desktop, which is slow to scan and clips on short viewports;
     - on mobile that scrollable dropdown sat inside the already-scrollable
       drawer, so the two scroll containers fought each other.
   ========================================================================== */

/* Desktop: Tools becomes a two-column mega-menu that fits without scrolling. */
.nd-menu-mega{
  min-width:min(520px, calc(100vw - 32px));
  max-height:min(76vh, 620px);
  overflow-y:auto;
  overscroll-behavior:contain;     /* scroll stays inside the menu */
}
@media (min-width:900px){
  .nd-menu-mega{
    columns:2;
    column-gap:var(--space-4);
    padding-bottom:var(--space-3);
  }
  /* Keep a tier group and its links together in one column. */
  .nd-menu-mega .nd-group{ break-after:avoid; break-inside:avoid; }
  .nd-menu-mega a{ break-inside:avoid; }
  /* The search field must span both columns. */
  .nd-menu-mega .nd-search{ column-span:all; }
  .nd-menu-mega > a:first-of-type{ column-span:all; }
}

/* Centre dropdowns must not run off either edge on narrow desktops. */
@media (min-width:721px){
  .nd{ position:relative; }
  .nd-menu{
    max-width:min(560px, calc(100vw - 32px));
    /* Nudge back on-screen if the menu would overflow the right edge. */
    right:auto; left:0;
  }
  .nd:nth-last-child(-n+3) .nd-menu{ left:auto; right:0; }
}

/* Mobile: one scroll container only. The drawer scrolls; menus expand inline. */
@media (max-width:720px){
  .nd-menu-mega{
    columns:1;
    max-height:none;
    overflow:visible;
    min-width:0;
  }
  .nd-menu{ max-height:none; overflow:visible; }
  /* Group labels stay legible as section dividers in the drawer. */
  .nd-menu-mega .nd-group{
    margin-top:var(--space-3);
    padding-top:var(--space-2);
    border-top:1px solid var(--color-border);
  }
}

/* Long tool names must wrap rather than force the menu wider. */
.nd-menu a{ overflow-wrap:anywhere; }
.nd-menu-mega a{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

/* ==========================================================================
   X45 — TYPOGRAPHY NORMALIZATION (site-wide)
   --------------------------------------------------------------------------
   AUDIT: 71 distinct font-size values across the nine stylesheets, with 35
   declarations rendering text at 10 to 11.5px (0.62rem to 0.72rem). Almost all
   of those were monospace labels carrying wide letter-spacing, which is the
   least legible combination available: small, fixed-width, and stretched.

   This layer does two things and nothing else:
     1. defines ONE modular scale, so future work has a vocabulary;
     2. raises the floor, so no text renders below 12px and no monospace label
        below 12.8px.
   It sets size, line-height and letter-spacing only. No colour, spacing,
   layout or component rule is touched, so nothing can reflow structurally.
   ========================================================================== */

:root{
  /* Modular scale, 1.125 ratio from a 16px base. Every step is a real pixel
     value at the default root size, so nothing lands on a fractional pixel. */
  --fs-2xs: 0.75rem;    /* 12px  smallest permitted, technical labels only */
  --fs-xs:  0.8125rem;  /* 13px  metadata, chips, tier badges              */
  --fs-sm:  0.875rem;   /* 14px  secondary prose, captions, legal          */
  --fs-md:  1rem;       /* 16px  UI text, nav, buttons                     */
  --fs-lg:  1.0625rem;  /* 17px  body copy                                 */
  --fs-xl:  1.25rem;    /* 20px  lede                                      */
  --fs-2xl: 1.5rem;     /* 24px  card and sub-section headings             */
  --fs-3xl: 2rem;       /* 32px  section headings                          */

  --lh-tight:  1.25;    /* headings            */
  --lh-snug:   1.45;    /* dense UI, cards     */
  --lh-normal: 1.6;     /* body copy           */
  --lh-loose:  1.7;     /* long-form reading   */

  --ls-label: 0.06em;   /* was up to 0.34em on some kickers, which at 11px
                           made words genuinely hard to parse */
}

/* ---- 1. Raise the floor on every selector measured below 12px ---------- */
.eyebrow, .badge, .tag, .pill, .nx-chip, .nx-src, .nx-kv dt, .nx-gauge small,
.chat-who,
.acad .a-hero .kick, .acad .crumb, .acad .mod .foot, .acad .mod .lvl,
.acad .path .seq, .acad .pt-h, .acad .pt-lab > summary, .acad .sectitle .ov,
.cmd .ai-tag, .cmd .brief-chip, .cmd .brief-label, .cmd .clirow .note,
.cmd .cm-k, .cmd .feedhead .hint, .cmd .kicker, .cmd .pill, .cmd .src,
.cmd .stat .l, .cmd-dialog .cmd-mitre .chip, .cmd-dialog .pill,
.cmd-dialog .src, .cmd-toast .cmd-tcmk, .cmd-toast .cmd-tsrc{
  font-size:var(--fs-2xs);
  line-height:var(--lh-snug);
}

/* Wide tracking is legible at 20px, not at 11px. Cap it for small labels. */
.eyebrow, .acad .a-hero .kick, .cmd .kicker, .acad .pt-h, .acad .mod .lvl,
.cmd .brief-label, .cmd .stat .l{
  letter-spacing:var(--ls-label);
}

/* ---- 2. Normalize the arbitrary mid-range values ----------------------- */
/* The stack contained .82 / .85 / .86 / .88 / .9 / .92 / .93 / .95 / .96rem,
   nine sizes covering a 2.2px span, which reads as inconsistency rather than
   hierarchy. These collapse onto two scale steps. */
.muted, .faint, figcaption, small,
.foot-note, .nx-sub, .nx-preview-foot, .nx-tile-d, .nx-card p{
  font-size:var(--fs-sm);
  line-height:var(--lh-normal);
}

/* ---- 3. Body and reading rhythm ---------------------------------------- */
body{ font-size:var(--fs-lg); line-height:var(--lh-normal); }
p{ line-height:var(--lh-normal); }
.nx-reading p, article p, .prose p{ line-height:var(--lh-loose); max-width:var(--container-reading); }

/* ---- 4. Heading rhythm. Sizes stay fluid; only spacing is regularised. -- */
h1, h2, h3, h4{ line-height:var(--lh-tight); text-wrap:balance; }
h2{ margin-top:0; }
h3{ font-size:var(--fs-2xl); }
h4{ font-size:var(--fs-xl); }
/* h1 and h2 keep their existing clamp() sizes; only line-height is unified. */

/* ---- 5. Monospace is for identifiers, never for prose ------------------ */
.mono, .nx-mono, code, kbd, samp{
  font-size:var(--fs-sm);
  letter-spacing:0;
  line-height:var(--lh-snug);
}
/* Codeblocks may be smaller, but never below the 12px floor. */
pre, pre code{ font-size:var(--fs-2xs); line-height:1.5; }

/* ---- 6. Controls sized for touch and reading --------------------------- */
.btn, button, input, select, textarea{ font-size:var(--fs-md); }
input, textarea, select{ line-height:var(--lh-snug); }
/* 16px on inputs prevents iOS Safari from zooming the viewport on focus. */
@media (max-width:720px){ input, select, textarea{ font-size:16px; } }

/* ---- 7. Japanese needs slightly more leading at the same size ---------- */
html[lang="ja"] body{ line-height:1.75; }
html[lang="ja"] .nx-tile-d,
html[lang="ja"] .nx-card p,
html[lang="ja"] .nx-kv dd{ line-height:1.8; }
/* Japanese has no word spaces, so balanced wrapping is counterproductive. */
html[lang="ja"] h1, html[lang="ja"] h2{ text-wrap:auto; }

/* ---- 8. Respect user text scaling -------------------------------------- */
@media (min-width:1024px){ :root{ --fs-lg:1.0625rem; } }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* ==========================================================================
   X46 — completing the 12px floor.
   A specificity audit after X45 found 22 selectors still rendering below 12px.
   X45 only listed the selectors matched by one grep pattern; these were either
   more specific than the rules it wrote, or were introduced by my own earlier
   work in this same file. Smallest offender was 9.6px.
   Grouped by origin so each is traceable.
   ========================================================================== */

/* --- from this stylesheet (introduced in X33 to X44) --------------------- */
.nx-preview-tag,          /* "ILLUSTRATIVE EXAMPLE" badge, was 11.5px */
.nx-sev,                  /* severity label: this carries meaning, 11.2px */
.nx-tile-k,               /* WEB / MSG / SRC / ORG tile codes, 11.2px */
.nd-group,                /* dropdown group headings, 11.2px */
.nd-tier{                 /* Free / Pro / Team chips, 9.9px */
  font-size:var(--fs-2xs);
  line-height:var(--lh-snug);
}
/* Severity is meaningful, not decorative, so it gets the next step up. */
.nx-sev{ font-size:var(--fs-xs); }

/* --- academy.css --------------------------------------------------------- */
.acad .lesson .ltag,
.acad .rb b{ font-size:var(--fs-2xs); line-height:var(--lh-snug); }

/* --- command.css (SOC console) ------------------------------------------ */
.cmd .p1 .flag,
.cmd .ticker .tag,
.cmd .tcard .foot,
.cmd .cmd-pausebtn,
.cmd .brief-eyebrow,
.cmd-toast .pill,
.cmd-dialog .cmd-dh4{ font-size:var(--fs-2xs); line-height:var(--lh-snug); }
/* A control, so it also needs a usable target. */
.cmd .cmd-pausebtn{ min-height:32px; }
@media (pointer:coarse){ .cmd .cmd-pausebtn{ min-height:44px; } }

/* --- pro-polish.css (footer) -------------------------------------------- */
.site-foot .foot-chips li,
.site-foot .foot-grid h4,
.site-foot .foot-grid h2.foot-h{ font-size:var(--fs-2xs); line-height:var(--lh-snug); }

/* --- seo-responsive.css -------------------------------------------------- */
/* Nav labels are primary navigation, so they get body-adjacent sizing. */
.nd-label{ font-size:var(--fs-md); }
@media (max-width:720px){ .nd-label{ font-size:var(--fs-md); } }

/* --- style.css ----------------------------------------------------------- */
.module-code,
.attack-node span{ font-size:var(--fs-2xs); line-height:var(--lh-snug); }