/**
 * Component primitives (component-library.md §A–F). Tokens only.
 * Class names match what engine/core/runtime.js already emits — this file
 * makes the existing DOM structure look production-ready without any
 * runtime/engine changes (frozen per this sprint's rules).
 */
@layer components {

  /* ---- Button (component-library §A) ---- */
  .nn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nn-space-2);
    height: 2.5rem;
    padding-inline: var(--nn-space-4);
    border-radius: var(--nn-radius-button);
    border: 1px solid transparent;
    background: var(--nn-primary);
    color: var(--nn-on-primary);
    font-weight: var(--nn-weight-semibold);
    font-size: var(--nn-text-button);
    cursor: pointer;
  }
  .nn-btn:hover { background: var(--nn-primary-hover); }
  .nn-btn:active { background: var(--nn-primary-active); }
  .nn-btn:disabled { opacity: .5; cursor: not-allowed; }
  .nn-btn--ghost {
    background: transparent;
    color: var(--nn-text);
    border-color: var(--nn-border);
  }
  .nn-btn--ghost:hover { background: var(--nn-bg-subtle); }
  .nn-btn--danger-ghost {
    background: transparent;
    color: var(--nn-error-text);
    border-color: var(--nn-border);
  }
  .nn-btn--danger-ghost:hover { background: var(--nn-error-subtle); }
  .nn-btn--sm { height: 2rem; padding-inline: var(--nn-space-3); }
  .nn-btn--icon { width: 2.5rem; height: 2.5rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

  /* Must be declared after .nn-btn: same element carries both classes,
     and cascade-LAYER precedence (components > base) means a base-layer
     display override can never win here regardless of file/import order
     — this is why the rule lives in this file and not layout.css. */
  .nn-shell-header__menu-toggle { display: none; }
  @media (max-width: 767px) {
    .nn-shell-header__menu-toggle { display: inline-flex; }
  }

  /* ---- Icon (v0.3 M2 minimal inline SVGs — consolidated into the shared
     Lucide sprite when the Icon System milestone lands; sizing contract
     matches that spec now so nothing here changes later: 24px grid,
     stroke-width 2, currentColor) ---- */
  .nn-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

  @media (prefers-reduced-motion: no-preference) {
    .nn-btn { transition: background var(--nn-motion-fast) var(--nn-motion-ease); }
  }

  /* ---- Badge (component-library §A) ---- */
  .nn-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--nn-space-1);
    flex-shrink: 0;
    white-space: nowrap;
    font-size: var(--nn-text-xs);
    line-height: 1;
    padding: 0.35rem 0.6rem;
    border-radius: var(--nn-radius-full);
    border: 1px solid var(--nn-border-strong);
    color: var(--nn-text-muted);
    text-decoration: none;
  }
  .nn-badge--privacy {
    color: var(--nn-success-text);
    border-color: var(--nn-success);
    background: var(--nn-success-subtle);
  }
  .nn-badge--privacy:visited { color: var(--nn-success-text); }
  /* component-library §A specifies neutral/success(privacy)/warning/info/
     premium variants; only privacy existed in CSS until now (RC-2 Design
     Showcase needs to demonstrate real, already-spec'd variants — not
     invent new ones). Same pattern as .nn-badge--privacy, different
     semantic token. */
  .nn-badge--warning { color: var(--nn-warning-text); border-color: var(--nn-warning); background: var(--nn-warning-subtle); }
  .nn-badge--info { color: var(--nn-primary-strong); border-color: var(--nn-primary); background: var(--nn-primary-subtle); }
  .nn-badge--premium { color: var(--nn-text-muted); border-color: var(--nn-border-strong); background: var(--nn-bg-subtle); } /* dormant until S3 */
  /* RC-6: honest "not live yet" indicator for planned categories in
     navigation — quiet/neutral, never alarming (it's a roadmap fact,
     not a warning). No fabricated count sits next to it. */
  .nn-badge--soon { color: var(--nn-text-muted); border-color: var(--nn-border-strong); background: var(--nn-bg-subtle); font-weight: var(--nn-weight-medium); }

  /* ---- Field / Input Group (component-library §B) ---- */
  .nn-field { display: flex; flex-direction: column; gap: var(--nn-space-1); }
  .nn-field__label { font-size: var(--nn-text-sm); font-weight: 600; }
  .nn-field__control {
    min-height: 2.5rem;
    padding: var(--nn-space-2) var(--nn-space-3);
    border: 1px solid var(--nn-border-strong);
    border-radius: var(--nn-radius-sm);
    background: var(--nn-bg);
    color: var(--nn-text);
  }
  textarea.nn-field__control {
    min-height: 10rem;
    resize: vertical;
    font-family: var(--nn-font-mono);
    line-height: var(--nn-leading-mono);
  }
  .nn-field__control:focus-visible {
    border-color: var(--nn-focus);
  }
  .nn-field__control[aria-invalid="true"] {
    border-color: var(--nn-error);
  }
  .nn-field__error {
    min-height: 1.25rem; /* reserved slot: zero CLS on error (frozen rule) */
    color: var(--nn-error-text);
    font-size: var(--nn-text-sm);
  }

  .nn-tool__options { display: flex; flex-wrap: wrap; gap: var(--nn-space-4); }
  .nn-option { display: flex; align-items: center; gap: var(--nn-space-2); font-size: var(--nn-text-sm); }
  .nn-option select {
    height: 2.25rem;
    border: 1px solid var(--nn-border-strong);
    border-radius: var(--nn-radius-sm);
    background: var(--nn-bg);
    padding-inline: var(--nn-space-2);
  }

  /* ---- Toggle group (segmented control): case-converter spec §4/§5's
     "transform buttons = the primary action row" — generic, any tool with
     a small fixed set of live-applied transforms can reuse this. ---- */
  .nn-toggle-group { display: flex; flex-wrap: wrap; gap: var(--nn-space-2); }
  .nn-toggle-group__item {
    background: transparent;
    color: var(--nn-text);
    border: 1px solid var(--nn-border-strong);
  }
  .nn-toggle-group__item:hover { background: var(--nn-bg-subtle); }
  .nn-toggle-group__item[aria-pressed="true"] {
    background: var(--nn-primary);
    border-color: var(--nn-primary);
    color: var(--nn-on-primary);
  }

  /* Independent checkbox option (remove-extra-spaces spec §4/§5) — generic,
     reused by any tool with independent on/off flags. */
  .nn-option--checkbox { display: flex; align-items: center; gap: var(--nn-space-2); }
  .nn-option--checkbox input { accent-color: var(--nn-primary); }

  /* ---- Result Panel / stats grid (component-library §D) ---- */
  .nn-tool__output {
    min-height: 4rem; /* reserved so results don't cause layout shift */
  }
  .nn-stats {
    display: grid;
    /* 9rem (144px) packed 4-5 narrow columns per row, which is exactly what
       forced any value longer than a couple of words into a tall vertical
       stack of single-word lines instead of a normal horizontal card — real
       bug found live 2026-08-11 (SERP Preview: "160 of 155 characters —
       will be truncated" wrapped into 8 lines). 13rem gives each cell
       roughly double the room before wrapping, so 2-3 stats per row read
       as compact horizontal cards on desktop, matching the shape every
       short-answer stat (BMI, tip amount) already had. */
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--nn-space-5) var(--nn-space-4);
  }
  .nn-stats__cell {
    display: flex;
    flex-direction: column;
    gap: var(--nn-space-1);
    padding: var(--nn-space-4);
    background: var(--nn-bg-subtle);
    border: 1px solid var(--nn-border);
    border-radius: var(--nn-radius-md);
    /* Grid/flex items default to min-width: auto, which refuses to shrink
       below the content's natural (unwrapped) width — the actual cause of
       long stat values (IP addresses, host ranges, hex strings — anything
       introduced from category 12 onward that isn't a short number) getting
       clipped by the cell's own overflow instead of wrapping. min-width: 0
       lets the cell shrink to the grid track's width so wrapping below can
       take effect. Real bug found live 2026-08-11 (Subnet Calculator). */
    min-width: 0;
  }
  /* Icon is optional (runtime only inserts it when a tool declares one,
     core/icons.js) — quiet, muted, never competing with the value it labels */
  .nn-stats__icon { color: var(--nn-text-muted); margin-bottom: var(--nn-space-1); }
  .nn-stats__cell--primary { background: var(--nn-primary-subtle); border-color: var(--nn-primary); }
  .nn-stats__cell--primary .nn-stats__icon { color: var(--nn-primary); }
  /* Generic opt-in for a value that's naturally a multi-line block (a
     compound preview, not a short answer) — see runtime.js's `stat.wide`.
     Real bug found live 2026-08-11: SERP Preview's 3-line URL/title/
     description value, squeezed into one ~250px auto-fit column at
     primary-stat font size, rendered as a giant wall of word-wrapped bold
     text. Spanning the full row gives it the room a paragraph needs. */
  .nn-stats__cell--wide { grid-column: 1 / -1; }
  .nn-stats__value {
    /* Rule for every stats-output tool going forward (not just the ones
       that hit this live): font-size is sized for values UP TO roughly a
       short sentence, not a single word — 2xl (28px) was tuned only for
       $10.00/22.9-length answers and forced anything longer into a tall
       stack of oversized wrapped lines. lg (20px) fits far more text per
       line while still reading clearly as an emphasized result. */
    font-size: var(--nn-text-lg);
    font-weight: var(--nn-weight-heading);
    font-variant-numeric: tabular-nums;
    overflow-wrap: break-word; /* long unbroken strings (IPs, hex, ranges) wrap instead of clipping */
    /* A stat value normally has no \n in it (a single number/short string),
       so this is a no-op everywhere except a value that's deliberately
       multi-line (e.g. SERP Preview's URL/title/description block) — for
       those, real line breaks instead of one continuously word-wrapped run. */
    white-space: pre-line;
  }
  .nn-stats__cell--primary .nn-stats__value {
    /* Same rule, one step up so the primary stat still reads as clearly
       emphasized: 2xl (28px, was 4xl/48px then 3xl/36px) is the ceiling
       that keeps a short answer ($10.00, 22.9) looking like a headline
       while a longer one (an IP address, a host range) wraps to 1-2 lines
       instead of 3+. */
    font-size: var(--nn-text-2xl);
    color: var(--nn-primary);
  }
  .nn-stats__label { font-size: var(--nn-text-sm); color: var(--nn-text-muted); }
  @media (max-width: 767px) {
    /* One more step down on narrow viewports, where the grid collapses to
       a single column and every stat cell is exactly as wide as the
       screen — the desktop sizes above still wrap acceptably-long values
       into more lines than a phone-width card should need. */
    .nn-stats__value { font-size: var(--nn-text-base); }
    .nn-stats__cell--primary .nn-stats__value { font-size: var(--nn-text-xl); }
  }
  @media (prefers-reduced-motion: no-preference) {
    /* Value-change micro-interaction (Product Design Bible §10: motion
       explains, never entertains) — a brief, quiet highlight so a visitor's
       eye can track that THIS number just updated, nothing more. */
    .nn-stats__cell { transition: background-color var(--nn-motion-fast) var(--nn-motion-ease); }
  }
  /* Shared empty-state family (Product Design Bible §3 — a consistent
     "diagram-language empty state" signature used EVERYWHERE the platform
     has nothing yet to show, not a one-off per surface). One rule serves
     the tool output empty state, Related Tools' empty state, and the
     Homepage's Featured Guides empty state — grouped by selector so none
     of the three needed a markup change to join the family. */
  .nn-output__empty,
  .nn-related-tools__empty,
  .nn-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--nn-space-2);
    text-align: center;
    color: var(--nn-text-muted);
    background: var(--nn-bg-subtle);
    border: 1px dashed var(--nn-border-strong);
    border-radius: var(--nn-radius-md);
    padding: var(--nn-space-6);
  }
  .nn-output__empty-icon,
  .nn-empty-state svg { color: var(--nn-text-muted); }
  .nn-output__loading { color: var(--nn-text-muted); }
  .nn-output__error {
    display: flex;
    align-items: flex-start;
    gap: var(--nn-space-3);
    color: var(--nn-error-text);
    background: var(--nn-error-subtle);
    border: 1px solid var(--nn-error);
    border-radius: var(--nn-radius-sm);
    padding: var(--nn-space-3);
  }
  .nn-output__error-icon { color: var(--nn-error); flex-shrink: 0; margin-top: 2px; }
  .nn-output__error p { margin: 0; }
  .nn-output__text {
    background: var(--nn-bg-subtle);
    border: 1px solid var(--nn-border);
    border-radius: var(--nn-radius-sm);
    padding: var(--nn-space-3);
    overflow-x: auto;
  }
  /* Optional transparency report line under transformed text (remove-
     extra-spaces spec §4) — quiet, muted, never competing with the result. */
  .nn-output__report { color: var(--nn-text-muted); font-size: var(--nn-text-sm); margin-top: var(--nn-space-2); }

  /* Image-output tools (resizer, converter, etc.) — same card treatment as
     .nn-output__text, sized to fit without ever overflowing the column. */
  .nn-output__image {
    display: block;
    max-width: 100%;
    height: auto;
    background: var(--nn-bg-subtle);
    border: 1px solid var(--nn-border);
    border-radius: var(--nn-radius-sm);
    padding: var(--nn-space-2);
  }

  /* Non-image file-output tools (PDF Tools: merge/split/rotate) — a small
     document card (icon + filename) since a PDF can't be inline-previewed
     the way an image can. */
  .nn-output__file {
    display: flex;
    align-items: center;
    gap: var(--nn-space-2);
    background: var(--nn-bg-subtle);
    border: 1px solid var(--nn-border);
    border-radius: var(--nn-radius-sm);
    padding: var(--nn-space-3);
  }
  .nn-output__file-icon { color: var(--nn-text-muted); flex-shrink: 0; }
  .nn-output__file-name { margin: 0; font-weight: var(--nn-weight-medium); word-break: break-all; }

  /* ---- Diff view (text-diff spec §4) — generic "compare two things"
     renderer; unified (inline) view only this milestone. Side-by-side ≥lg
     and keyboard n/p navigation between changes are named follow-ups, not
     silently dropped (see engineering-changelog). ---- */
  .nn-diff__summary { color: var(--nn-text-muted); font-size: var(--nn-text-sm); margin-bottom: var(--nn-space-3); }
  .nn-diff__list {
    font-family: var(--nn-font-mono);
    font-size: var(--nn-text-sm);
    line-height: var(--nn-leading-mono);
    background: var(--nn-bg-subtle);
    border: 1px solid var(--nn-border);
    border-radius: var(--nn-radius-sm);
    padding: var(--nn-space-3);
    overflow-x: auto;
  }
  .nn-diff__line {
    display: flex;
    gap: var(--nn-space-2);
    white-space: pre-wrap;
    word-break: break-word;
  }
  .nn-diff__line--equal { color: var(--nn-text-muted); }
  .nn-diff__line--delete { background: var(--nn-error-subtle); color: var(--nn-error-text); }
  .nn-diff__line--insert { background: var(--nn-success-subtle); color: var(--nn-success-text); }
  .nn-diff__symbol { flex-shrink: 0; font-weight: 700; }
  /* Word-level marks within a changed line pair — the line's own bg already
     signals delete/insert; the word mark adds weight + a delete-only
     strikethrough so the SPECIFIC changed words are legible at a glance,
     without inventing a new color value for a second contrast level. */
  .nn-diff__word--delete { font-weight: 700; text-decoration: line-through; }
  .nn-diff__word--insert { font-weight: 700; }

  /* ---- Utility row / History (component-library §D) ---- */
  .nn-tool__utils {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nn-space-3);
    padding-top: var(--nn-space-4);
    border-top: 1px solid var(--nn-border);
  }
  .nn-history { font-size: var(--nn-text-sm); }
  .nn-history summary { cursor: pointer; color: var(--nn-text-muted); }
  .nn-history__body { display: flex; flex-direction: column; gap: var(--nn-space-2); margin-top: var(--nn-space-3); }
  .nn-history__note { color: var(--nn-text-muted); font-size: var(--nn-text-xs); margin: 0; }
  .nn-history__entry {
    text-align: left;
    background: var(--nn-bg-subtle);
    border: 1px solid var(--nn-border);
  }

  @media (prefers-reduced-motion: no-preference) {
    .nn-history[open] .nn-history__body { transition: opacity var(--nn-motion-accordion) var(--nn-motion-ease); }
  }

  /* ---- Toast (component-library §A) ---- */
  .nn-toast {
    position: fixed;
    left: 50%;
    bottom: var(--nn-space-5);
    transform: translate(-50%, 0.5rem);
    display: flex;
    align-items: center;
    gap: var(--nn-space-3);
    background: var(--nn-gray-900);
    color: var(--nn-gray-0);
    padding: var(--nn-space-3) var(--nn-space-4);
    border-radius: var(--nn-radius-md);
    box-shadow: var(--nn-shadow-2);
    opacity: var(--nn-opacity-0);
    pointer-events: none;
    z-index: var(--nn-z-toast);
  }
  .nn-toast[data-visible="1"] {
    opacity: var(--nn-opacity-100);
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
  .nn-toast .nn-btn { background: transparent; color: var(--nn-blue-400); height: auto; padding: 0; }

  @media (prefers-reduced-motion: no-preference) {
    .nn-toast { transition: opacity var(--nn-motion-fast) var(--nn-motion-ease), transform var(--nn-motion-fast) var(--nn-motion-ease); }
  }

  @media (min-width: 768px) {
    .nn-toast { left: auto; right: var(--nn-space-5); transform: translate(0, 0.5rem); }
    .nn-toast[data-visible="1"] { transform: translate(0, 0); }
  }

  /* ---- Card (component-library §A) ---- */
  .nn-card {
    display: block;
    background: var(--nn-bg-raised);
    border: 1px solid var(--nn-border);
    border-radius: var(--nn-radius-card);
    box-shadow: var(--nn-shadow-card);
    padding: var(--nn-space-5); /* was space-4 — premium cards need more internal air */
    text-decoration: none;
    color: inherit;
  }
  @media (prefers-reduced-motion: no-preference) {
    .nn-card { transition: border-color var(--nn-motion-hover) var(--nn-motion-ease), box-shadow var(--nn-motion-hover) var(--nn-motion-ease), transform var(--nn-motion-hover) var(--nn-motion-ease); }
  }
  .nn-card:hover {
    border-color: var(--nn-border-strong);
    box-shadow: var(--nn-shadow-hover);
    transform: translateY(-2px); /* the "lift" micro-interaction the mockups imply on every card */
  }

  /* ---- Alert (component-library §A) ---- */
  .nn-alert {
    display: flex;
    gap: var(--nn-space-3);
    padding: var(--nn-space-3) var(--nn-space-4);
    border-radius: var(--nn-radius-sm);
    border-left: 3px solid var(--nn-border-strong);
    background: var(--nn-bg-subtle);
  }
  .nn-alert--info { border-left-color: var(--nn-primary); background: var(--nn-primary-subtle); }
  .nn-alert--success { border-left-color: var(--nn-success); background: var(--nn-success-subtle); color: var(--nn-success-text); }
  .nn-alert--warning { border-left-color: var(--nn-warning); background: var(--nn-warning-subtle); color: var(--nn-warning-text); }
  .nn-alert--error { border-left-color: var(--nn-error); background: var(--nn-error-subtle); color: var(--nn-error-text); }

  /* ---- Breadcrumb (component-library §C) ---- */
  .nn-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nn-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--nn-text-sm);
    color: var(--nn-text-muted);
  }
  .nn-breadcrumb li + li::before { content: "/"; margin-right: var(--nn-space-2); color: var(--nn-border-strong); }
  .nn-breadcrumb a { color: var(--nn-text-muted); text-decoration: none; }
  .nn-breadcrumb a:hover { color: var(--nn-link); text-decoration: underline; }
  .nn-breadcrumb [aria-current="page"] { color: var(--nn-text); }
  /* Mobile: show parent only (frozen rule) — scoped to the mobile query so
     no override/!important is needed at the desktop breakpoint */
  @media (max-width: 767px) {
    .nn-breadcrumb li:not(:last-child):not(:nth-last-child(2)) { display: none; }
  }

  /* ---- Primary navigation (v0.3 M2) ---- */
  .nn-shell-nav__list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--nn-space-4); /* was space-6 — 32px per item made 8 categories + Soon badges overflow the header at real desktop widths, causing internal text-wrap and overlap with the actions cluster; found via live verification, not visible in the dev harness's narrower fixture */
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none; /* real edge-case safety net only — with 16 categories (2026-08-12) this DID become the primary, broken behavior (content silently clipped, no visible scrollbar, and focus-on-open auto-scrolled this strip sideways when a mega-item panel opened). Fixed properly via shell.js's wireNavOverflow(), which moves whichever items don't fit into a "More" dropdown before the row can ever overflow — this overflow-x stays only as a fallback for windows too narrow even for that. */
  }
  .nn-shell-nav__list::-webkit-scrollbar { display: none; }
  .nn-shell-nav__list li { flex-shrink: 0; }
  .nn-shell-nav__list a {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    color: var(--nn-text-muted);
    text-decoration: none;
    font-size: var(--nn-text-nav);
    font-weight: var(--nn-weight-medium);
    letter-spacing: -0.005em;
    padding-block: var(--nn-space-2);
    border-bottom: 2px solid transparent;
  }
  @media (prefers-reduced-motion: no-preference) {
    .nn-shell-nav__list a { transition: color var(--nn-motion-hover) var(--nn-motion-ease), border-color var(--nn-motion-hover) var(--nn-motion-ease); }
  }
  .nn-shell-nav__list a:hover { color: var(--nn-text); }
  .nn-shell-nav__list a[aria-current="page"] {
    color: var(--nn-primary);
    font-weight: var(--nn-weight-semibold);
    border-bottom-color: var(--nn-primary);
  }

  .nn-shell-mobile-panel__list {
    display: grid;
    gap: var(--nn-space-3);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nn-shell-mobile-panel__list a { color: var(--nn-text); text-decoration: none; font-weight: 600; }
  .nn-shell-mobile-panel__list a[aria-current="page"] { color: var(--nn-primary); }

  /* ---- Mega menu (v0.3 M3 — dormant until >=4 categories, component-
     library §C: "no mega menu at MVP"; styles ship now so activation
     needs no template/CSS work later, only Theme\Navigation's threshold
     flipping true) ---- */
  .nn-mega-item { position: relative; }
  .nn-mega-item__trigger {
    background: none;
    border: none;
    color: var(--nn-text-muted);
    font-size: var(--nn-text-nav);
    font-weight: var(--nn-weight-medium);
    white-space: nowrap;
    cursor: pointer;
    padding-block: var(--nn-space-2);
    border-bottom: 2px solid transparent;
  }
  .nn-mega-item__trigger:hover,
  .nn-mega-item__trigger[aria-expanded="true"] { color: var(--nn-text); }
  .nn-mega-item__trigger[aria-current="page"] {
    color: var(--nn-primary);
    border-bottom-color: var(--nn-primary);
  }
  .nn-mega-panel {
    position: absolute;
    top: calc(100% + var(--nn-space-2));
    left: 0;
    min-width: 15rem;
    background: var(--nn-bg-raised);
    border: 1px solid var(--nn-border);
    border-radius: var(--nn-radius-md);
    box-shadow: var(--nn-shadow-hover);
    padding: var(--nn-space-4);
    z-index: var(--nn-z-dropdown);
  }
  .nn-mega-panel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nn-space-2); }
  .nn-mega-panel__list a {
    display: block;
    color: var(--nn-text);
    text-decoration: none;
    font-size: var(--nn-text-sm);
    padding: var(--nn-space-2) var(--nn-space-3);
    border-radius: var(--nn-radius-sm);
  }
  @media (prefers-reduced-motion: no-preference) {
    .nn-mega-panel__list a { transition: background var(--nn-motion-hover) var(--nn-motion-ease); }
  }
  .nn-mega-panel__list a:hover { background: var(--nn-bg-subtle); }

  /* Search trigger keyboard hint — hidden on touch/narrow (no real keyboard) */
  .nn-shell-header__search-hint { display: none; }
  @media (min-width: 1024px) {
    .nn-shell-header__search-hint {
      display: inline-flex;
      gap: 2px;
      margin-left: var(--nn-space-2);
    }
    .nn-shell-header__search-hint kbd {
      font-size: var(--nn-text-xs);
      border: 1px solid var(--nn-border-strong);
      border-radius: var(--nn-radius-sm);
      padding: 0 0.3rem;
      color: var(--nn-text-muted);
    }
  }

  /* ---- Article content: Meta Line, Answer Box, FAQ (component-library
     §E "Article Template"; Reference UI Blueprint §4/§7). Applied by
     selector to the existing the_content() markup — no template change
     needed, so every tool/guide page inherits this automatically. ---- */
  .nn-meta-line {
    font-size: var(--nn-text-sm);
    color: var(--nn-text-muted);
  }
  /* Answer Box: the first paragraph of every article-template page is the
     GEO/AEO-citable direct answer (content-system.md's Article Template) —
     visually set apart so both visitors and AI extraction can identify it
     as THE answer, not just the first sentence of prose (audit R-3). The
     meta line above is a <div>, not a <p>, specifically so it never
     collides with this :first-of-type selector. */
  .nn-shell-content > p:first-of-type {
    background: var(--nn-bg-subtle);
    border-left: 3px solid var(--nn-primary);
    border-radius: var(--nn-radius-sm);
    padding: var(--nn-space-4) var(--nn-space-5);
    font-size: var(--nn-text-lg);
    max-width: none;
  }
  /* FAQ accordion (component-library §C, native <details>/<summary>) —
     styled by selector on the rendered content, no new markup */
  .nn-shell-content details {
    border-bottom: 1px solid var(--nn-border);
    padding-block: var(--nn-space-4);
  }
  /* .nn-shell-content also carries .nn-flow (design-foundations §3's
     sibling-margin utility), which adds margin-top between EVERY direct
     child — stacking on top of each <details>'s own padding-block and
     producing a visibly oversized, disconnected-looking gap between
     consecutive FAQ questions (found via live verification against the
     approved mockup, not visible in the isolated dev-harness fixture).
     Consecutive <details> already have their own border+padding rhythm
     and don't need the flow margin added on top. */
  .nn-shell-content details + details { margin-top: 0; }
  .nn-shell-content details:first-of-type { border-top: 1px solid var(--nn-border); }
  .nn-shell-content details summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
  }
  .nn-shell-content details summary::-webkit-details-marker { display: none; }
  .nn-shell-content details summary::before {
    content: "+";
    display: inline-block;
    width: 1.25rem;
    color: var(--nn-primary);
    font-weight: 700;
  }
  .nn-shell-content details[open] summary::before { content: "\2212"; } /* minus sign */
  .nn-shell-content details p { margin-top: var(--nn-space-2); color: var(--nn-text-muted); }

  /* ---- Related tools (component-library §D) ---- */
  .nn-related-tools { display: grid; gap: var(--nn-space-3); }
  .nn-related-tools__title { font-size: var(--nn-text-sm); font-weight: 600; color: var(--nn-text-muted); }
  .nn-related-tools__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nn-space-2); }
  .nn-related-tools__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nn-space-2);
    padding: var(--nn-space-3);
    background: var(--nn-bg-subtle);
    border: 1px solid var(--nn-border);
    border-radius: var(--nn-radius-md);
    color: var(--nn-text);
    text-decoration: none;
    font-size: var(--nn-text-sm);
    font-weight: 600;
  }
  .nn-related-tools__list a:hover { border-color: var(--nn-border-strong); background: var(--nn-bg); }
  /* Affordance arrow (Product Design Bible §9: "tool cards feel like doors,
     not posters") — functional, not decorative: signals "this goes
     somewhere," quiet, muted so it never competes with the tool name. */
  .nn-related-tools__list a::after {
    content: "\2192"; /* rightwards arrow */
    color: var(--nn-text-muted);
    flex-shrink: 0;
  }
  .nn-related-tools__list a:hover::after { color: var(--nn-primary); }
  /* Honest, non-broken empty state — never a bare box (product audit).
     Base treatment now shared via .nn-output__empty/.nn-related-tools__empty/
     .nn-empty-state above; this is the one delta this context needs
     (smaller text + tighter padding fit the sidebar rail better than the
     roomier tool-output version). */
  .nn-related-tools__empty {
    font-size: var(--nn-text-sm);
    padding: var(--nn-space-4);
  }

  /* ---- Back to top (v0.3 M1) ---- */
  .nn-back-to-top {
    background: var(--nn-bg-raised);
    border: 1px solid var(--nn-border-strong);
    color: var(--nn-text);
    box-shadow: var(--nn-shadow-2);
    cursor: pointer;
  }
  .nn-back-to-top:hover { background: var(--nn-bg-subtle); }

  /* ---- Sticky mobile nav item (v0.3 M1; full nav content in Milestone 3) ---- */
  .nn-shell-mobile-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--nn-space-1);
    font-size: var(--nn-text-xs);
    color: var(--nn-text-muted);
    text-decoration: none;
    padding-inline: var(--nn-space-3);
  }
  .nn-shell-mobile-nav a[aria-current="page"] { color: var(--nn-primary); }

  /* ---- Page-level compositions: Hero, Feature Grid (component-library
     §E; Reference UI Blueprint §3 — homepage/about only) ---- */
  .nn-hero {
    display: grid;
    gap: var(--nn-space-4);
    padding-block: var(--nn-space-7);
    text-align: center;
    justify-items: center;
  }
  .nn-hero p { max-width: 44ch; }
  .nn-hero__actions { display: flex; flex-wrap: wrap; gap: var(--nn-space-3); justify-content: center; }
  .nn-hero__hint { color: var(--nn-text-muted); }
  .nn-hero__hint kbd {
    font-size: var(--nn-text-xs);
    border: 1px solid var(--nn-border-strong);
    border-radius: var(--nn-radius-sm);
    padding: 0 0.3rem;
  }

  .nn-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--nn-space-5);
  }
  .nn-feature-grid__item { display: flex; flex-direction: column; align-items: center; gap: var(--nn-space-2); text-align: center; }
  .nn-feature-grid__item svg { color: var(--nn-primary); }
  .nn-feature-grid__item strong { font-size: var(--nn-text-base); }
  .nn-feature-grid__item p { color: var(--nn-text-muted); font-size: var(--nn-text-sm); max-width: 22ch; }

  /* Homepage section rhythm: generous, consistent gaps between the major
     zones (hero, trust strip, tools, categories, guides, benefits,
     newsletter) — Reference UI Blueprint §2's "section rhythm alternates
     dense/spacious" applied at the page-composition level. */
  .nn-home-section { padding-block: var(--nn-space-8); } /* wider section rhythm — visual-refinement pass, was space-6 (too compressed against the mockup) */
  .nn-home-section__title { margin-bottom: var(--nn-space-5); }

  /* ---- Search Overlay (RC-4; Reference UI Blueprint §6, §8) — full-screen
     on mobile, centered modal on desktop; the combobox+listbox pattern
     component-library §B already specifies for a "searchable select",
     applied here for the second time, not a new interaction model. ---- */
  .nn-search-overlay { position: fixed; inset: 0; z-index: var(--nn-z-search-overlay); }
  .nn-search-overlay[hidden] { display: none; }
  .nn-search-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: var(--nn-backdrop);
  }
  .nn-search-overlay__panel {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100%;
    background: var(--nn-bg);
  }
  @media (min-width: 768px) {
    .nn-search-overlay__panel {
      position: absolute;
      top: var(--nn-space-7);
      left: 50%;
      transform: translateX(-50%);
      width: min(36rem, calc(100vw - var(--nn-space-6)));
      max-height: min(32rem, calc(100vh - var(--nn-space-8)));
      border-radius: var(--nn-radius-lg);
      border: 1px solid var(--nn-border);
      box-shadow: var(--nn-shadow-2);
    }
  }
  .nn-search-overlay__input {
    height: 3rem;
    padding-inline: var(--nn-space-4);
    border: none;
    border-bottom: 1px solid var(--nn-border);
    background: transparent;
    color: var(--nn-text);
    font-size: var(--nn-text-lg);
  }
  .nn-search-overlay__input:focus-visible { outline: none; } /* the panel border is the focus signal here */
  .nn-search-overlay__results { overflow-y: auto; padding: var(--nn-space-2); }
  .nn-search-overlay__group-label {
    font-size: var(--nn-text-xs);
    font-weight: 600;
    color: var(--nn-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: var(--nn-space-3) var(--nn-space-3) var(--nn-space-1);
    margin: 0;
  }
  .nn-search-overlay__option {
    display: block;
    padding: var(--nn-space-2) var(--nn-space-3);
    border-radius: var(--nn-radius-sm);
    color: var(--nn-text);
    text-decoration: none;
  }
  .nn-search-overlay__option-title { display: block; font-weight: 600; }
  .nn-search-overlay__option-desc { display: block; font-size: var(--nn-text-sm); color: var(--nn-text-muted); }
  .nn-search-overlay__option[aria-selected="true"] { background: var(--nn-primary-subtle); }
  .nn-search-overlay__hint-text { color: var(--nn-text-muted); padding: var(--nn-space-3); }
  .nn-search-overlay__hints {
    display: flex;
    gap: var(--nn-space-4);
    padding: var(--nn-space-2) var(--nn-space-3);
    border-top: 1px solid var(--nn-border);
    font-size: var(--nn-text-xs);
    color: var(--nn-text-muted);
  }
  .nn-search-overlay__hints kbd {
    border: 1px solid var(--nn-border-strong);
    border-radius: var(--nn-radius-sm);
    padding: 0 0.3rem;
    margin-right: 2px;
  }

  /* ---- Homepage v2 (UI Implementation Directive — approved mockup) ----
     Hero, search bar, category pill row, tool/category cards, metrics
     strip, guide cards, newsletter. Layout/spacing/proportions follow the
     approved screenshot exactly; every piece is a reusable component, not
     homepage-only markup (design-system rule: "nothing exists only for
     one page"). */
  .nn-hero-v2 {
    display: grid;
    justify-items: center;
    gap: var(--nn-space-4);
    text-align: center;
    padding-block: var(--nn-space-8) var(--nn-space-6);
  }
  .nn-hero-v2__eyebrow-hint { color: var(--nn-text-muted); font-size: var(--nn-text-sm); margin: 0; }
  .nn-hero-v2__title {
    margin: 0;
    font-size: var(--nn-text-hero);
    line-height: var(--nn-leading-heading);
    letter-spacing: var(--nn-tracking-heading);
  }
  .nn-hero-v2__title em { color: var(--nn-primary); font-style: normal; }
  .nn-hero-v2__subtitle { max-width: 52ch; color: var(--nn-text-muted); font-size: var(--nn-text-body-lg); }

  /* Search bar: a button styled as a search field (real input lives in the
     search overlay it opens — component-library §B's combobox pattern
     already owns text entry, this is the trigger surface). */
  .nn-search-bar {
    display: flex;
    align-items: center;
    gap: var(--nn-space-3);
    width: 100%;
    max-width: 40rem;
    height: 3.25rem;
    padding-inline: var(--nn-space-4);
    background: var(--nn-bg-raised);
    border: 1px solid var(--nn-border-strong);
    border-radius: var(--nn-radius-input);
    box-shadow: var(--nn-shadow-card);
    color: var(--nn-text-muted);
    font-size: var(--nn-text-base);
    cursor: pointer;
    text-align: left;
  }
  .nn-search-bar:hover { border-color: var(--nn-primary); box-shadow: var(--nn-shadow-hover); }
  .nn-search-bar:focus-visible { outline: none; border-color: var(--nn-primary); box-shadow: 0 0 0 var(--nn-focus-ring-width) var(--nn-primary-subtle); }
  @media (prefers-reduced-motion: no-preference) {
    .nn-search-bar { transition: border-color var(--nn-motion-hover) var(--nn-motion-ease), box-shadow var(--nn-motion-hover) var(--nn-motion-ease); }
  }
  .nn-search-bar__text { flex: 1; }
  .nn-search-bar__hint {
    display: inline-flex;
    gap: 2px;
    flex-shrink: 0;
  }
  .nn-search-bar__hint kbd {
    font-size: var(--nn-text-xs);
    border: 1px solid var(--nn-border-strong);
    border-radius: var(--nn-radius-sm);
    padding: 0 0.3rem;
  }

  .nn-pill-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--nn-space-3); /* more breathing room between chips */
  }
  .nn-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--nn-space-1);
    height: 2.25rem;
    padding-inline: var(--nn-space-3);
    border-radius: var(--nn-radius-full);
    border: 1px solid var(--nn-border-strong);
    background: var(--nn-bg-raised);
    color: var(--nn-text-muted);
    font-size: var(--nn-text-sm);
    font-weight: var(--nn-weight-medium);
    text-decoration: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .nn-pill { transition: border-color var(--nn-motion-hover) var(--nn-motion-ease), color var(--nn-motion-hover) var(--nn-motion-ease), transform var(--nn-motion-hover) var(--nn-motion-ease); }
  }
  .nn-pill:hover { border-color: var(--nn-primary); color: var(--nn-text); transform: translateY(-1px); }
  .nn-pill[aria-current="true"] {
    background: var(--nn-primary-subtle);
    border-color: var(--nn-primary);
    color: var(--nn-primary-strong);
  }

  /* Trust strip: icon + label + description, generic truthful claims. */
  .nn-trust-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--nn-space-5);
    padding: var(--nn-space-5);
    background: var(--nn-bg-raised);
    border: 1px solid var(--nn-border);
    border-radius: var(--nn-radius-panel);
  }
  .nn-trust-strip__item { display: flex; gap: var(--nn-space-3); align-items: flex-start; }
  .nn-trust-strip__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--nn-radius-md);
    background: var(--nn-primary-subtle);
    color: var(--nn-primary);
  }
  .nn-trust-strip__item strong { display: block; font-size: var(--nn-text-sm); }
  .nn-trust-strip__item p { margin: 0; color: var(--nn-text-muted); font-size: var(--nn-text-xs); }

  /* Tool card: icon glyph + title + description (Popular Tools). Reuses
     .nn-card as its base (border/radius/shadow/hover already correct);
     this only adds the icon-glyph header row. */
  .nn-tool-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--nn-space-4);
    border-radius: var(--nn-radius-md);
    background: var(--nn-primary-subtle);
    color: var(--nn-primary);
    font-weight: var(--nn-weight-bold);
    font-size: var(--nn-text-lg);
  }
  .nn-tool-card__title { display: block; margin-bottom: var(--nn-space-2); font-size: var(--nn-text-lg); }
  .nn-tool-card__desc { margin: 0; color: var(--nn-text-muted); font-size: var(--nn-text-sm); line-height: var(--nn-leading-body); }

  /* Category card: icon + label + status (real count, or "Coming Soon" —
     never a fabricated number). */
  .nn-category-card {
    display: flex;
    align-items: center;
    gap: var(--nn-space-4);
    min-height: 5.5rem; /* more visual weight — was reading small next to Popular Tools cards */
  }
  .nn-category-card__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--nn-radius-md);
    background: var(--nn-primary-subtle);
    color: var(--nn-primary);
    font-weight: var(--nn-weight-bold);
    font-size: var(--nn-text-lg);
  }
  .nn-category-card__body { flex: 1; min-width: 0; }
  .nn-category-card__label { display: block; margin-bottom: 2px; font-weight: var(--nn-weight-semibold); font-size: var(--nn-text-base); }
  .nn-category-card__status { margin: 0; color: var(--nn-text-muted); font-size: var(--nn-text-sm); }
  .nn-category-card__status--soon { color: var(--nn-text-muted); }
  .nn-category-card__arrow { flex-shrink: 0; color: var(--nn-text-muted); }
  @media (prefers-reduced-motion: no-preference) {
    .nn-category-card__arrow { transition: color var(--nn-motion-hover) var(--nn-motion-ease), transform var(--nn-motion-hover) var(--nn-motion-ease); }
  }
  .nn-category-card:hover .nn-category-card__arrow { color: var(--nn-primary); transform: translateX(2px); }

  /* Metrics strip: homepage marketing figures matching the approved
     mockup verbatim (FINAL content rule, 2026-07-18 — "Homepage =
     marketing, Tool pages = live truth"; these numbers represent
     platform vision/roadmap, not current inventory, and are not wired
     to live data by design). */
  .nn-metrics-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--nn-space-6);
    padding: var(--nn-space-7);
    background: var(--nn-primary-subtle);
    border-radius: var(--nn-radius-panel);
    text-align: center;
  }
  .nn-metrics-strip__item { display: flex; flex-direction: column; align-items: center; gap: var(--nn-space-2); }
  .nn-metrics-strip__icon { color: var(--nn-primary); }
  .nn-metrics-strip__value { font-size: var(--nn-text-2xl); font-weight: var(--nn-weight-bold); color: var(--nn-primary-strong); letter-spacing: var(--nn-tracking-heading); }
  .nn-metrics-strip__label { color: var(--nn-text-muted); font-size: var(--nn-text-sm); }

  /* Guide card: colored image-area placeholder + date meta + title +
     excerpt + read time. The mockup gives each card a distinct pastel
     illustration header — approximated here with the existing
     semantic-subtle tokens (no new colors invented) cycled per card via
     :nth-of-type, since no illustration assets exist yet. */
  .nn-guide-card__meta { color: var(--nn-text-muted); font-size: var(--nn-text-xs); }
  .nn-guide-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4.5rem;
    margin: calc(var(--nn-space-5) * -1) calc(var(--nn-space-5) * -1) var(--nn-space-4);
    width: calc(100% + var(--nn-space-5) * 2);
    border-radius: var(--nn-radius-card) var(--nn-radius-card) 0 0;
    background: var(--nn-primary-subtle);
    color: var(--nn-primary);
  }
  .nn-guide-card__icon .nn-icon { width: 1.75rem; height: 1.75rem; }
  .nn-grid > .nn-guide-card--placeholder:nth-of-type(2) .nn-guide-card__icon,
  .nn-grid > a.nn-card:has(.nn-guide-card__icon):nth-of-type(2) .nn-guide-card__icon { background: var(--nn-success-subtle); color: var(--nn-success); }
  .nn-grid > .nn-guide-card--placeholder:nth-of-type(3) .nn-guide-card__icon,
  .nn-grid > a.nn-card:has(.nn-guide-card__icon):nth-of-type(3) .nn-guide-card__icon { background: var(--nn-warning-subtle); color: var(--nn-warning); }
  .nn-grid > .nn-guide-card--placeholder:nth-of-type(4) .nn-guide-card__icon,
  .nn-grid > a.nn-card:has(.nn-guide-card__icon):nth-of-type(4) .nn-guide-card__icon { background: var(--nn-primary-subtle); color: var(--nn-primary-strong); }
  .nn-guide-card__title { display: block; margin: var(--nn-space-1) 0; font-size: var(--nn-text-base); }
  .nn-guide-card__excerpt { margin: 0 0 var(--nn-space-3); color: var(--nn-text-muted); font-size: var(--nn-text-sm); line-height: var(--nn-leading-body); }
  .nn-guide-card__readtime { color: var(--nn-text-muted); font-size: var(--nn-text-xs); }
  /* Placeholder guide cards (approved mockup, no real guide URL yet —
     FINAL content rule: acceptable during development). Same visual
     card as a real one; not a clickable link since there's nowhere real
     to send a visitor yet. */
  .nn-guide-card--placeholder { cursor: default; }
  .nn-guide-card--placeholder:hover { border-color: var(--nn-border); box-shadow: var(--nn-shadow-card); transform: none; }

  /* Newsletter panel */
  .nn-newsletter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--nn-space-5);
    padding: var(--nn-space-7);
    background: var(--nn-primary-subtle);
    border-radius: var(--nn-radius-panel);
  }
  .nn-newsletter__copy { display: flex; align-items: center; gap: var(--nn-space-4); }
  .nn-newsletter__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--nn-radius-md);
    background: var(--nn-bg-raised);
    color: var(--nn-primary);
  }
  .nn-newsletter__title { display: block; font-size: var(--nn-text-lg); }
  .nn-newsletter__subtitle { margin: var(--nn-space-1) 0 0; color: var(--nn-text-muted); font-size: var(--nn-text-sm); }
  .nn-newsletter__form { display: flex; gap: var(--nn-space-3); flex-wrap: wrap; }
  .nn-newsletter__note { width: 100%; margin: var(--nn-space-2) 0 0; }
  .nn-newsletter__form input[type="email"] {
    height: 3rem;
    min-width: 16rem;
    padding-inline: var(--nn-space-4);
    border: 1px solid var(--nn-border-strong);
    border-radius: var(--nn-radius-input);
    background: var(--nn-bg);
    color: var(--nn-text);
  }
  .nn-newsletter__form input[type="email"]:focus-visible { outline: none; border-color: var(--nn-primary); box-shadow: 0 0 0 var(--nn-focus-ring-width) var(--nn-primary-subtle); }
  .nn-newsletter__form .nn-btn { height: 3rem; padding-inline: var(--nn-space-6); }

  /* Home section header row: title + "View all" link, side by side */
  .nn-home-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nn-space-4);
    margin-bottom: var(--nn-space-5);
  }
  .nn-home-section__head .nn-home-section__title { margin-bottom: 0; }
  .nn-home-section__viewall { color: var(--nn-link); font-size: var(--nn-text-sm); font-weight: var(--nn-weight-semibold); text-decoration: none; white-space: nowrap; }
  .nn-home-section__viewall:hover { text-decoration: underline; }
  .nn-home-section__viewall--placeholder { color: var(--nn-text-muted); cursor: default; }

  @media (max-width: 767px) {
    .nn-newsletter { flex-direction: column; align-items: stretch; text-align: center; }
    .nn-newsletter__copy { flex-direction: column; }
    .nn-newsletter__form { justify-content: center; }
  }

  /* ---- Tool Page header (UI Implementation Directive — approved tool-
     page mockup, Word Counter as the reference/master template every
     future tool page reuses without a redesign). ---- */
  .nn-tool-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--nn-space-5);
  }
  .nn-tool-header__identity { display: flex; gap: var(--nn-space-4); align-items: flex-start; }
  .nn-tool-header__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--nn-radius-md);
    background: var(--nn-primary-subtle);
    color: var(--nn-primary);
    font-weight: var(--nn-weight-bold);
    font-size: var(--nn-text-h3);
  }
  .nn-tool-header__title { margin: 0 0 var(--nn-space-1); }
  .nn-tool-header__subtitle { margin: 0 0 var(--nn-space-3); color: var(--nn-text-muted); }
  .nn-tool-header__badges { display: flex; flex-wrap: wrap; gap: var(--nn-space-2); }
  .nn-tool-header__trust-card {
    flex-shrink: 0;
    display: flex;
    gap: var(--nn-space-3);
    max-width: 20rem;
    padding: var(--nn-space-4);
    background: var(--nn-primary-subtle);
    border: 1px solid var(--nn-primary);
    border-radius: var(--nn-radius-panel);
  }
  .nn-tool-header__trust-icon { flex-shrink: 0; color: var(--nn-primary); }
  .nn-tool-header__trust-card strong { display: block; font-size: var(--nn-text-sm); }
  .nn-tool-header__trust-card p { margin: 0; color: var(--nn-text-muted); font-size: var(--nn-text-xs); }

  @media (max-width: 767px) {
    .nn-tool-header { flex-direction: column; }
    .nn-tool-header__trust-card { max-width: none; }
  }
  .nn-tool-header__updated { border: none; padding: 0; background: none; color: var(--nn-text-muted); }

  /* ---- Tool page sidebar cards (approved /Mockups/Tool Page.png) ---- */
  .nn-sidebar-card {
    background: var(--nn-bg-raised);
    border: 1px solid var(--nn-border);
    border-radius: var(--nn-radius-panel);
    padding: var(--nn-space-4);
  }
  .nn-sidebar-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nn-space-2); margin-bottom: var(--nn-space-3); }
  .nn-sidebar-card__head .nn-sidebar-card__title { margin: 0; }
  .nn-sidebar-card__title { margin: 0 0 var(--nn-space-3); font-size: var(--nn-text-sm); font-weight: var(--nn-weight-semibold); }
  .nn-sidebar-card__viewall { font-size: var(--nn-text-xs); color: var(--nn-link); text-decoration: none; font-weight: var(--nn-weight-semibold); }
  .nn-sidebar-card__viewall:hover { text-decoration: underline; }

  .nn-related-tools__list--cards a {
    display: flex;
    align-items: flex-start;
    gap: var(--nn-space-3);
    background: transparent;
    border: none;
    padding: var(--nn-space-2) 0;
  }
  .nn-related-tools__list--cards a:hover { background: var(--nn-bg-subtle); border-radius: var(--nn-radius-sm); }
  .nn-related-tools__list--cards a::after { content: none; }
  .nn-related-tools__list--cards strong { display: block; font-size: var(--nn-text-sm); }
  .nn-related-tools__list--cards .nn-text-muted { display: block; font-size: var(--nn-text-xs); }
  .nn-tool-card__icon--sm { width: 2rem; height: 2rem; margin-bottom: 0; flex-shrink: 0; font-size: var(--nn-text-sm); }

  .nn-sidebar-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nn-space-3); }
  .nn-sidebar-checklist li { display: flex; gap: var(--nn-space-2); align-items: flex-start; }
  .nn-sidebar-checklist__icon { flex-shrink: 0; color: var(--nn-success); margin-top: 2px; }

  .nn-shortcut-list { margin: 0; display: grid; gap: var(--nn-space-2); }
  .nn-shortcut-list__row { display: flex; align-items: center; justify-content: space-between; gap: var(--nn-space-2); }
  .nn-shortcut-list__row dt { display: flex; align-items: center; gap: 2px; font-size: var(--nn-text-xs); }
  .nn-shortcut-list__row dt kbd {
    border: 1px solid var(--nn-border-strong);
    border-radius: var(--nn-radius-sm);
    padding: 1px 5px;
    font-size: var(--nn-text-xs);
    background: var(--nn-bg-subtle);
  }
  .nn-shortcut-list__row dd { margin: 0; color: var(--nn-text-muted); font-size: var(--nn-text-xs); }

  /* ---- Footer 4-column grid (UI Implementation Directive — approved
     mockup: brand column + Tools/Resources/Company link columns). ---- */
  .nn-footer-grid {
    display: grid;
    grid-template-columns: 1.3fr repeat(4, 1fr);
    gap: var(--nn-space-7);
    padding-top: var(--nn-space-9); /* was space-7 — footer felt cramped against the mockup's generous whitespace */
    padding-bottom: var(--nn-space-7);
  }
  .nn-footer-grid__privacy { display: grid; gap: var(--nn-space-3); align-content: start; }
  .nn-footer-grid__brand { display: grid; gap: var(--nn-space-4); }
  .nn-footer-grid__brand p { margin: 0; max-width: 26ch; line-height: var(--nn-leading-body); }
  .nn-footer-grid__heading { margin: 0 0 var(--nn-space-4); font-size: var(--nn-text-sm); font-weight: var(--nn-weight-semibold); }
  .nn-footer-grid__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nn-space-3); }
  .nn-footer-grid__col a {
    color: var(--nn-text-muted);
    text-decoration: none;
    font-size: var(--nn-text-sm);
  }
  @media (prefers-reduced-motion: no-preference) {
    .nn-footer-grid__col a { transition: color var(--nn-motion-hover) var(--nn-motion-ease); }
  }
  .nn-footer-grid__col a:hover { color: var(--nn-primary); text-decoration: none; }
  .nn-footer-grid__soon {
    display: inline-flex;
    align-items: center;
    gap: var(--nn-space-2);
    color: var(--nn-text-muted);
    font-size: var(--nn-text-sm);
  }
  .nn-footer-grid__legal {
    padding-top: var(--nn-space-6);
    border-top: 1px solid var(--nn-border);
  }

  @media (max-width: 767px) {
    .nn-footer-grid { grid-template-columns: 1fr 1fr; }
    .nn-footer-grid__brand { grid-column: 1 / -1; }
  }

  /* ---- Homepage v3 hero (approved /Mockups/Home Page.png — supersedes
     the earlier centered hero: two-column, gradient accent, a live
     preview card on the right showing the tool shell's real stat-cell
     design). Primary visual source of truth per the founder's latest
     directive. ---- */
  .nn-hero-v3 {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--nn-space-7);
    align-items: center;
    padding-block: var(--nn-space-9) var(--nn-space-8); /* deeper hero air — visual-refinement pass */
    isolation: isolate; /* keeps the glow pseudo-element behind content without affecting stacking elsewhere */
  }
  /* Soft radial glow behind the hero (mockup's "premium lighting" —
     CSS-only, no image asset). Two overlapping radial gradients, kept
     subtle (low opacity, large soft-edged spread) rather than a heavy
     blob. Sits behind everything via z-index; -1 is safe because
     .nn-hero-v3 creates its own stacking context (isolation: isolate). */
  .nn-hero-v3::before {
    content: "";
    position: absolute;
    inset: -10% -5% -20%;
    z-index: -1;
    background:
      radial-gradient(45rem 28rem at 15% 20%, rgb(37 99 255 / 0.10), transparent 65%),
      radial-gradient(38rem 26rem at 85% 60%, rgb(99 102 241 / 0.08), transparent 65%);
    pointer-events: none;
  }
  /* Decorative dot-grid texture, top-right of the hero (approved mockup
     detail) — a tiled radial-gradient dot pattern, no image asset. Kept
     very faint and hidden below the breakpoint where the preview card
     itself is hidden, so it never competes with hero copy on mobile. */
  .nn-hero-v3::after {
    content: "";
    position: absolute;
    top: -2%;
    right: -2%;
    z-index: -1;
    width: 14rem;
    height: 14rem;
    background-image: radial-gradient(var(--nn-border-strong) 1.5px, transparent 1.5px);
    background-size: 1.25rem 1.25rem;
    opacity: var(--nn-opacity-40);
    mask-image: radial-gradient(circle at 70% 30%, black 0%, transparent 70%);
    pointer-events: none;
    display: none;
  }
  @media (min-width: 1024px) {
    .nn-hero-v3::after { display: block; }
  }
  @media (min-width: 1024px) {
    .nn-hero-v3 { grid-template-columns: 1.05fr 0.95fr; gap: var(--nn-space-8); }
  }
  .nn-hero-v3__copy { display: grid; gap: var(--nn-space-5); }
  .nn-hero-v3__title {
    margin: 0;
    font-size: var(--nn-text-hero);
    line-height: 1.08; /* tighter than the generic heading leading — a display-scale headline reads better tight */
    letter-spacing: var(--nn-tracking-heading);
  }
  @media (min-width: 1024px) {
    .nn-hero-v3__title { font-size: 4.75rem; } /* scaled past the base hero token at desktop widths, matching the mockup's larger headline */
  }
  .nn-hero-v3__title em {
    font-style: normal;
    background: var(--nn-gradient-signature);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .nn-hero-v3__subtitle { max-width: 46ch; color: var(--nn-text-muted); font-size: var(--nn-text-body-lg); line-height: var(--nn-leading-body); }
  .nn-hero-v3__search { display: flex; gap: var(--nn-space-3); max-width: 34rem; }
  .nn-hero-v3__search .nn-search-bar { max-width: none; height: 3.5rem; }
  .nn-hero-v3__search .nn-btn { height: 3.5rem; padding-inline: var(--nn-space-6); flex-shrink: 0; }
  .nn-hero-v3__popular { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nn-space-2) var(--nn-space-3); margin-top: var(--nn-space-1); }
  .nn-hero-v3__popular-label { color: var(--nn-text-muted); font-size: var(--nn-text-sm); }

  /* Preview card: a decorative mock of the tool shell's own stat cells
     (browser-chrome dots + Aa icon + real stat-cell design reused, not
     reinvented) plus a floating privacy badge — visual only, not an
     interactive tool instance. Given more scale, a stronger shadow, and
     a slight rotation to read as "floating" rather than flat-docked. */
  .nn-hero-preview {
    position: relative;
    max-width: 26rem;
    margin-inline: auto;
    background: var(--nn-bg-raised);
    border: 1px solid var(--nn-border);
    border-radius: var(--nn-radius-panel);
    box-shadow: var(--nn-shadow-hero), 0 2px 8px rgb(15 23 42 / 0.06);
    padding: var(--nn-space-6);
  }
  @media (min-width: 1024px) {
    .nn-hero-preview { transform: rotate(1.5deg); }
    .nn-hero-preview:hover { transform: rotate(0deg) translateY(-2px); }
  }
  @media (prefers-reduced-motion: no-preference) {
    .nn-hero-preview { transition: transform var(--nn-motion-standard) var(--nn-motion-ease); }
  }
  .nn-hero-preview__chrome { display: flex; gap: var(--nn-space-2); margin-bottom: var(--nn-space-5); }
  .nn-hero-preview__dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--nn-border-strong); }
  .nn-hero-preview__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: var(--nn-space-5);
    border-radius: var(--nn-radius-md);
    background: var(--nn-primary-subtle);
    color: var(--nn-primary);
    font-weight: var(--nn-weight-bold);
    font-size: var(--nn-text-lg);
  }
  .nn-hero-preview__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
    gap: var(--nn-space-4);
  }
  .nn-hero-preview__stat { display: grid; gap: 4px; }
  .nn-hero-preview__stat-value { font-size: var(--nn-text-2xl); font-weight: var(--nn-weight-bold); font-variant-numeric: tabular-nums; letter-spacing: var(--nn-tracking-heading); }
  .nn-hero-preview__stat-label { color: var(--nn-text-muted); font-size: var(--nn-text-xs); }
  .nn-hero-preview__badge {
    position: absolute;
    top: -1.25rem;
    right: -1rem;
    display: flex;
    align-items: center;
    gap: var(--nn-space-2);
    background: var(--nn-bg-raised);
    border: 1px solid var(--nn-success);
    border-radius: var(--nn-radius-full);
    padding: var(--nn-space-2) var(--nn-space-4);
    box-shadow: var(--nn-shadow-hover);
  }
  .nn-hero-preview__badge-icon { color: var(--nn-success); }
  .nn-hero-preview__badge strong { display: block; font-size: var(--nn-text-xs); }
  .nn-hero-preview__badge span { color: var(--nn-text-muted); font-size: var(--nn-text-xs); }
}