/**
 * Nightmind — base styles and components.
 *
 * Mobile-first: the unprefixed rules describe the phone layout (the primary
 * target — a tired user in bed at 2:47am), and every media query is min-width.
 * Depends on assets/css/tokens.css for all values; no hard-coded colours.
 *
 * Contents
 *   1. Reset & document
 *   2. Typography
 *   3. Layout
 *   4. Links & buttons
 *   5. Cards
 *   6. YMYL blocks (disclaimer, seek help)
 *   7. Site header & footer
 *   8. Bottom Navigation + "More" sheet
 *   9. Sticky CTA
 *  10. Blocks & utilities
 *  11. Breakpoints
 */

/* ─────────────────────────────────────────────────────────────────────────
   1. Reset & document
   ───────────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
        box-sizing: border-box;
}

* {
        margin: 0;
}

html {
        -webkit-text-size-adjust: 100%;
        scroll-behavior: smooth;
        /* Anchor targets clear the fixed header. */
        scroll-padding-top: var(--space-10);
}

body {
        min-height: 100vh;
        min-height: 100dvh;
        background-color: var(--bg-primary);
        color: var(--text-primary);
        font-family: var(--font-body);
        font-size: var(--text-body);
        font-weight: var(--weight-body);
        line-height: var(--leading-body);
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
        /* Fixed chrome never covers the last line of content. */
        padding-bottom: calc(var(--bottom-nav-space) + var(--sticky-cta-space) + var(--safe-bottom));
        transition: padding-bottom var(--duration-base) var(--ease-out);
}

body.has-bottom-nav {
        --bottom-nav-space: var(--bottom-nav-height);
}

body.sticky-cta-visible {
        --sticky-cta-space: var(--sticky-cta-height);
}

/* The "More" sheet locks the page behind it. */
body.is-menu-open {
        overflow: hidden;
}

/* Class-based display rules must not defeat the hidden attribute. */
[hidden] {
        display: none !important;
}

img,
picture,
svg,
video,
canvas {
        display: block;
        max-width: 100%;
        height: auto;
}

svg.nm-icon {
        flex: none;
        width: var(--icon-md);
        height: var(--icon-md);
}

input,
button,
textarea,
select {
        font: inherit;
        color: inherit;
}

button {
        background: none;
        border: 0;
        cursor: pointer;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
        outline: 2px solid var(--accent-hover);
        outline-offset: 2px;
        border-radius: var(--radius-sm);
}

::selection {
        background: var(--accent-muted);
        color: var(--text-primary);
}

hr,
.wp-block-separator {
        height: 1px;
        margin-block: var(--section-gap);
        border: 0;
        background: var(--border);
}

/* ─────────────────────────────────────────────────────────────────────────
   2. Typography
   ───────────────────────────────────────────────────────────────────────── */

h1,
h2,
h3,
h4,
h5,
h6 {
        font-family: var(--font-heading);
        font-weight: var(--weight-semibold);
        line-height: var(--leading-heading);
        letter-spacing: var(--tracking-heading);
        color: var(--text-primary);
        text-wrap: balance;
}

h1 {
        font-size: var(--text-h1);
        font-weight: var(--weight-bold);
}

/*
 * Stage 5: size alone was not separating H2 from H3 on a phone, so the
 * weight carries part of the hierarchy — H1/H2 bold, H3 semibold.
 */
h2 {
        font-size: var(--text-h2);
        font-weight: var(--weight-bold);
}

h3 {
        font-size: var(--text-h3);
        font-weight: var(--weight-semibold);
}

h4,
h5,
h6 {
        font-size: var(--text-body);
}

p,
li,
dd,
blockquote,
figcaption {
        max-width: var(--measure);
        text-wrap: pretty;
}

.nm-prose > * + * {
        margin-top: var(--space-5);
}

/* A new H2 opens a section; an H3 only opens a sub-point inside one. */
.nm-prose > * + h2 {
        margin-top: var(--space-10);
}

.nm-prose > * + h3 {
        margin-top: var(--space-7);
}

.nm-prose :is(ul, ol) {
        padding-left: var(--space-5);
        display: grid;
        gap: var(--space-2);
}

.nm-prose li::marker {
        color: var(--accent);
}

.nm-prose blockquote {
        padding-left: var(--space-4);
        border-left: 2px solid var(--accent-muted);
        color: var(--text-secondary);
}

.nm-lead {
        font-size: calc(var(--text-body) + 1px);
        color: var(--text-secondary);
}

.nm-small,
small,
figcaption {
        font-size: var(--text-small);
        color: var(--text-secondary);
        line-height: var(--leading-tight);
}

.nm-eyebrow {
        font-size: var(--text-small);
        font-weight: var(--weight-medium);
        letter-spacing: var(--tracking-label);
        color: var(--text-secondary);
        text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────────────────
   3. Layout
   ───────────────────────────────────────────────────────────────────────── */

.nm-container {
        width: 100%;
        max-width: calc(var(--content-width) + var(--screen-padding) * 2);
        margin-inline: auto;
        padding-inline: var(--screen-padding);
}

.nm-container--wide {
        max-width: calc(var(--wide-width) + var(--screen-padding) * 2);
}

.site-main {
        /* Anchor for the Sticky CTA scroll sentinel. */
        position: relative;
        display: block;
        padding-block: var(--space-6) var(--section-gap);
}

.nm-section + .nm-section {
        margin-top: var(--section-gap);
}

.nm-section__title {
        margin-bottom: var(--space-4);
}

.nm-stack {
        display: grid;
        gap: var(--card-gap);
}

/* Horizontal card rail — the familiar mobile pattern for recommendations. */
.nm-rail {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(15rem, 78%);
        gap: var(--card-gap);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: var(--space-2);
        margin-inline: calc(var(--screen-padding) * -1);
        padding-inline: var(--screen-padding);
}

.nm-rail::-webkit-scrollbar {
        display: none;
}

.nm-rail > * {
        scroll-snap-align: start;
}

.nm-skip-link {
        position: absolute;
        left: -9999px;
        z-index: var(--z-modal);
        padding: var(--space-3) var(--space-4);
        background: var(--bg-elevated);
        color: var(--text-primary);
        border-radius: var(--radius-button);
}

.nm-skip-link:focus {
        left: var(--space-4);
        top: var(--space-4);
}

.screen-reader-text {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   4. Links & buttons
   ───────────────────────────────────────────────────────────────────────── */

a {
        color: var(--accent-hover);
        text-decoration-thickness: 1px;
        text-underline-offset: 0.2em;
        transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
        color: var(--text-primary);
}

.nm-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        min-height: var(--button-height);
        padding: var(--space-3) var(--space-6);
        border-radius: var(--radius-button);
        font-family: var(--font-heading);
        font-size: var(--text-body);
        font-weight: var(--weight-semibold);
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        transition:
                background-color var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}

.nm-button--primary {
        background-color: var(--accent);
        color: var(--text-on-accent);
}

.nm-button--primary:hover,
.nm-button--primary:focus-visible {
        background-color: var(--accent-hover);
        color: var(--text-on-accent);
}

.nm-button--secondary {
        background-color: var(--bg-elevated);
        color: var(--text-primary);
        border: 1px solid var(--border);
}

.nm-button--secondary:hover {
        background-color: var(--bg-secondary);
        color: var(--text-primary);
        border-color: var(--border-strong);
}

.nm-button--quiet {
        min-height: var(--tap-target);
        padding-inline: var(--space-4);
        color: var(--text-secondary);
}

.nm-button--full {
        display: flex;
        width: 100%;
}

.nm-button[aria-disabled="true"] {
        opacity: 0.5;
        pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   5. Cards
   ───────────────────────────────────────────────────────────────────────── */

.nm-card {
        position: relative;
        display: flex;
        gap: var(--space-4);
        align-items: center;
        min-height: var(--card-min-height);
        padding: var(--space-4);
        background-color: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-card);
        box-shadow: var(--shadow-card);
        transition:
                background-color var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}

.nm-card:hover,
.nm-card:focus-within {
        background-color: var(--bg-elevated);
        border-color: var(--border-strong);
}

/* Whole card is one tap target: the link is stretched over it. */
.nm-card__link::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
}

.nm-card__link {
        color: var(--text-primary);
        text-decoration: none;
}

.nm-card__icon {
        display: grid;
        place-items: center;
        width: var(--icon-card);
        height: var(--icon-card);
        border-radius: var(--radius-sm);
        background-color: var(--accent-muted);
        color: var(--accent-hover);
}

.nm-card__body {
        flex: 1 1 auto;
        min-width: 0;
        display: grid;
        gap: var(--space-1);
}

.nm-card__title {
        font-family: var(--font-heading);
        font-size: var(--text-h3);
        font-weight: var(--weight-semibold);
        line-height: var(--leading-tight);
}

.nm-card__excerpt {
        font-size: var(--text-small);
        color: var(--text-secondary);
        line-height: var(--leading-tight);
        /* Keep every card the same height in a scanning list. */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
}

.nm-card__chevron {
        color: var(--text-muted);
        transition: transform var(--duration-base) var(--ease-out);
}

.nm-card:hover .nm-card__chevron {
        transform: translateX(2px);
        color: var(--accent-hover);
}

/* Stacked variant for tool/product rails. */
.nm-card--stacked {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
}

/* ─────────────────────────────────────────────────────────────────────────
   6. YMYL blocks
   ───────────────────────────────────────────────────────────────────────── */

.nm-disclaimer {
        display: flex;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        background-color: var(--bg-disclaimer);
        border-left: 3px solid var(--warning);
        border-radius: var(--radius-sm);
        color: var(--text-secondary);
        font-size: var(--text-small);
        line-height: var(--leading-tight);
}

.nm-disclaimer__icon {
        color: var(--warning);
        width: var(--icon-sm);
        height: var(--icon-sm);
}

.nm-disclaimer p {
        max-width: none;
}

.nm-disclaimer a {
        color: var(--text-primary);
}

.nm-disclaimer--full {
        font-size: var(--text-body);
        line-height: var(--leading-body);
        padding: var(--space-5);
}

.nm-seek-help {
        display: grid;
        gap: var(--space-3);
        padding: var(--space-5);
        background-color: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-card);
}

.nm-seek-help__head {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        color: var(--success);
}

.nm-seek-help__title {
        font-size: var(--text-h3);
        color: var(--text-primary);
}

.nm-seek-help p {
        color: var(--text-secondary);
        font-size: var(--text-small);
}

/* ─────────────────────────────────────────────────────────────────────────
   7. Site header & footer
   ───────────────────────────────────────────────────────────────────────── */

.site-header {
        border-bottom: 1px solid var(--border);
        background-color: var(--bg-primary);
}

/* Inner row: branding left, burger right (see header.php). */
.site-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        padding-block: var(--space-3);
        padding-top: calc(var(--space-3) + var(--safe-top));
}

.site-branding {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        min-height: var(--tap-target);
}

.site-title {
        font-family: var(--font-heading);
        font-size: var(--text-h3);
        font-weight: var(--weight-bold);
        letter-spacing: var(--tracking-heading);
}

.site-title a {
        color: var(--text-primary);
        text-decoration: none;
}

.custom-logo {
        max-height: var(--space-8);
        width: auto;
}

/* Primary menu is desktop-only: phones use the Bottom Navigation. */
.nm-primary-nav {
        display: none;
}

.nm-primary-nav ul {
        display: flex;
        gap: var(--space-5);
        list-style: none;
        margin: 0;
        padding: 0;
}

.nm-primary-nav a {
        color: var(--text-secondary);
        text-decoration: none;
        font-size: var(--text-small);
        font-weight: var(--weight-medium);
}

.nm-primary-nav .current-menu-item > a,
.nm-primary-nav a:hover {
        color: var(--text-primary);
}

.site-footer {
        margin-top: var(--section-gap);
        padding-block: var(--space-8);
        border-top: 1px solid var(--border);
        background-color: var(--bg-secondary);
        color: var(--text-secondary);
        font-size: var(--text-small);
}

.site-footer__inner {
        display: grid;
        gap: var(--space-5);
}

.nm-footer-nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3) var(--space-5);
        list-style: none;
        margin: 0;
        padding: 0;
}

.nm-footer-nav a {
        display: inline-flex;
        align-items: center;
        min-height: var(--space-8);
        color: var(--text-secondary);
        text-decoration: none;
}

.nm-footer-nav a:hover {
        color: var(--text-primary);
}

/* ─────────────────────────────────────────────────────────────────────────
   8. Bottom Navigation + "More" sheet
   ───────────────────────────────────────────────────────────────────────── */

.nm-bottom-nav {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: var(--z-bottom-nav);
        background-color: var(--bg-secondary);
        border-top: 1px solid var(--border);
        padding-bottom: var(--safe-bottom);
        /* No shadow: nothing should glow in a dark room. */
}

.nm-bottom-nav__list {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: stretch;
        list-style: none;
        margin: 0;
        padding: 0;
        max-width: var(--wide-width);
        margin-inline: auto;
}

.nm-bottom-nav__item {
        display: flex;
}

.nm-bottom-nav__link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        flex: 1;
        /*
         * Stage 5: the whole cell is the tap target, not just the icon.
         * 64px per cell (the top of the 56–64px range in the design system);
         * the bar itself is 64px plus the 1px hairline above it.
         */
        min-height: var(--bottom-nav-height);
        padding: var(--space-1);
        color: var(--text-secondary);
        text-decoration: none;
        font-size: var(--text-nav-label);
        font-weight: var(--weight-semibold);
        letter-spacing: var(--tracking-label);
        line-height: 1.2;
        text-align: center;
        transition: color var(--duration-fast) var(--ease-out);
        -webkit-tap-highlight-color: transparent;
}

.nm-bottom-nav__link:hover {
        color: var(--text-primary);
}

.nm-bottom-nav__link.is-active,
.nm-bottom-nav__link[aria-current="page"] {
        color: var(--accent-hover);
}

.nm-bottom-nav__label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}

/* Centre item (Journal): slightly larger, gently tinted — never shouting. */
.nm-bottom-nav__item--center .nm-bottom-nav__link {
        color: var(--text-primary);
}

/*
 * Stage 5: the centre item was only a tinted icon and read as "just another
 * tab". It keeps the same accent colour, but the chip is larger, the label
 * picks up the accent and the whole cell sits a little higher so the eye
 * lands on it first. No new colours — accent-muted/accent-hover as before.
 */
.nm-bottom-nav__item--center .nm-bottom-nav__label {
        color: var(--accent-hover);
}

.nm-bottom-nav__item--center .nm-icon {
        width: var(--icon-lg);
        height: var(--icon-lg);
        /* content-box: the chip is 28px + 3px on each side = 34px, which keeps
           the whole bar inside the 56–64px range from the design system. */
        padding: 3px;
        border-radius: var(--radius-pill);
        background-color: var(--accent-muted);
        color: var(--accent-hover);
        box-sizing: content-box;
}

/* Very small phones (iPhone SE): icons only. */
@media (max-width: 20.5em) {
        .nm-bottom-nav__label {
                position: absolute;
                width: 1px;
                height: 1px;
                overflow: hidden;
                clip-path: inset(50%);
        }
}

.nm-more-sheet {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: var(--z-sheet);
        max-height: 70vh;
        overflow-y: auto;
        padding: var(--space-5) var(--screen-padding);
        padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--space-5));
        background-color: var(--bg-elevated);
        border-top: 1px solid var(--border);
        border-radius: var(--radius-card) var(--radius-card) 0 0;
        box-shadow: var(--shadow-sheet);
        transform: translateY(100%);
        visibility: hidden;
        transition:
                transform var(--duration-slow) var(--ease-out),
                visibility 0s linear var(--duration-slow);
}

.nm-more-sheet.is-open {
        transform: translateY(0);
        visibility: visible;
        transition-delay: 0s;
}

.nm-more-sheet ul {
        display: grid;
        gap: var(--space-1);
        list-style: none;
        margin: 0;
        padding: 0;
}

.nm-more-sheet a {
        display: flex;
        align-items: center;
        min-height: var(--tap-target);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-sm);
        color: var(--text-primary);
        text-decoration: none;
}

.nm-more-sheet a:hover {
        background-color: var(--bg-secondary);
}

.nm-more-sheet__backdrop {
        position: fixed;
        inset: 0;
        z-index: calc(var(--z-sheet) - 1);
        background-color: var(--overlay);
        opacity: 0;
        visibility: hidden;
        transition:
                opacity var(--duration-base) var(--ease-out),
                visibility 0s linear var(--duration-base);
}

.nm-more-sheet__backdrop.is-open {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
}

/* ─────────────────────────────────────────────────────────────────────────
   9. Sticky CTA
   ───────────────────────────────────────────────────────────────────────── */

.nm-sticky-cta {
        position: fixed;
        inset-inline: 0;
        /* Sits directly on top of the Bottom Navigation. */
        bottom: calc(var(--bottom-nav-space) + var(--safe-bottom));
        z-index: var(--z-sticky-cta);
        display: flex;
        align-items: stretch;
        min-height: var(--sticky-cta-height);
        background-color: var(--accent);
        color: var(--text-on-accent);
        /* Hidden until the scroll threshold is crossed. */
        transform: translateY(100%);
        opacity: 0;
        visibility: hidden;
        transition:
                transform var(--duration-slow) var(--ease-out),
                opacity var(--duration-slow) var(--ease-out),
                visibility 0s linear var(--duration-slow);
}

.nm-sticky-cta.is-visible {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
}

/* Suppressed (but not dismissed) while the "More" sheet is open. */
.nm-sticky-cta.is-suppressed {
        transform: translateY(100%);
        opacity: 0;
        visibility: hidden;
}

.nm-sticky-cta__link {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 auto;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-4);
        font-family: var(--font-heading);
        font-size: var(--text-body);
        font-weight: var(--weight-semibold);
        color: var(--text-on-accent);
        text-decoration: none;
        text-align: center;
}

.nm-sticky-cta__link:hover {
        background-color: var(--accent-hover);
        color: var(--text-on-accent);
}

.nm-sticky-cta__close {
        display: grid;
        place-items: center;
        flex: none;
        width: var(--tap-target);
        color: var(--text-on-accent);
        opacity: 0.85;
        transition: opacity var(--duration-fast) var(--ease-out);
}

.nm-sticky-cta__close:hover {
        opacity: 1;
}

/* Invisible scroll marker injected by sticky-cta.js at the reveal threshold. */
.nm-cta-sentinel {
        position: absolute;
        left: 0;
        width: 1px;
        height: 1px;
        pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   10. Blocks & utilities
   ───────────────────────────────────────────────────────────────────────── */

.entry-content > * {
        margin-block: var(--space-5);
}

.entry-content > .alignwide {
        max-width: var(--wide-width);
        margin-inline: auto;
}

.entry-content > .alignfull {
        max-width: none;
        margin-inline: calc(var(--screen-padding) * -1);
}

.wp-block-image img {
        border-radius: var(--radius-card);
}

.wp-block-button__link {
        min-height: var(--button-height);
        display: inline-flex;
        align-items: center;
        border-radius: var(--radius-button);
}

.entry-meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-4);
        color: var(--text-secondary);
        font-size: var(--text-small);
}

.nm-visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────
   11. Breakpoints
   ───────────────────────────────────────────────────────────────────────── */

/* Tablet — 768px */
@media (min-width: 48em) {
        .site-main {
                padding-block: var(--space-8) var(--section-gap);
        }

        .nm-stack--2col {
                grid-template-columns: repeat(2, 1fr);
        }

        .nm-rail {
                grid-auto-columns: minmax(16rem, 42%);
        }

        .nm-sticky-cta {
                inset-inline: auto;
                right: var(--space-5);
                left: auto;
                bottom: calc(var(--bottom-nav-space) + var(--safe-bottom) + var(--space-4));
                max-width: 26rem;
                border-radius: var(--radius-button);
                box-shadow: var(--shadow-card);
                overflow: hidden;
        }
}

/* Desktop — 1024px: the header menu replaces the Bottom Navigation. */
@media (min-width: 64em) {
        body.has-bottom-nav {
                --bottom-nav-space: 0px;
        }

        .nm-bottom-nav,
        .nm-more-sheet,
        .nm-more-sheet__backdrop {
                display: none;
        }

        .nm-primary-nav {
                display: block;
        }

        .nm-stack--3col {
                grid-template-columns: repeat(3, 1fr);
        }

        .site-footer__inner {
                grid-template-columns: 1fr auto;
                align-items: center;
        }

        .nm-has-sidebar .nm-container--wide {
                display: grid;
                grid-template-columns: minmax(0, 1fr) 17rem;
                gap: var(--space-10);
                align-items: start;
        }
}

@media (prefers-reduced-motion: reduce) {
        html {
                scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
        }
}


/* ─────────────────────────────────────────────────────────────────────────
   12. Page shell (wrapper, header drawer, footer legal)
   ───────────────────────────────────────────────────────────────────────── */

/* Sticky footer: content grows, footer stays at the bottom on short pages. */
.site-wrapper {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
}

.site-wrapper > .site-footer {
        margin-top: auto;
}

.site-wrapper > .site-main {
        flex: 1 0 auto;
}

/* Burger: the only header control on phones, full 48px tap target. */
.site-header__burger,
.nm-drawer__close {
        display: inline-grid;
        place-items: center;
        width: var(--tap-target);
        height: var(--tap-target);
        margin-right: calc(var(--space-2) * -1);
        border: 0;
        border-radius: var(--radius-button);
        background: transparent;
        color: var(--text-primary);
        cursor: pointer;
        transition: background-color var(--duration-fast) var(--ease-out);
}

.site-header__burger:hover,
.nm-drawer__close:hover {
        background-color: var(--bg-elevated);
}

.nm-drawer__backdrop {
        position: fixed;
        inset: 0;
        z-index: calc(var(--z-sheet) - 1);
        background-color: var(--overlay);
        opacity: 0;
        transition: opacity var(--duration-base) var(--ease-out);
}

.nm-drawer__backdrop.is-open {
        opacity: 1;
}

/* Slide-in panel from the right; never full-screen, so the page stays visible. */
.nm-drawer {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-sheet);
        display: grid;
        align-content: start;
        gap: var(--space-4);
        width: min(20rem, 86vw);
        padding: var(--space-4) var(--space-5);
        padding-top: calc(var(--space-4) + var(--safe-top));
        padding-bottom: calc(var(--space-6) + var(--safe-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        background-color: var(--bg-secondary);
        border-left: 1px solid var(--border);
        transform: translateX(100%);
        transition: transform var(--duration-base) var(--ease-out);
}

.nm-drawer.is-open {
        transform: translateX(0);
}

.nm-drawer__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
}

.nm-drawer__list {
        display: grid;
        gap: var(--space-1);
        margin: 0;
        padding: 0;
        list-style: none;
}

.nm-drawer__list a {
        display: flex;
        align-items: center;
        min-height: var(--tap-target);
        padding-inline: var(--space-3);
        border-radius: var(--radius-button);
        color: var(--text-primary);
        text-decoration: none;
        font-size: var(--text-body);
}

.nm-drawer__list a:hover,
.nm-drawer__list .current-menu-item > a {
        background-color: var(--bg-elevated);
}

/* Footer legal column. */
.site-footer__legal {
        display: grid;
        gap: var(--space-3);
}

.site-footer__disclaimer {
        max-width: var(--measure);
        color: var(--text-secondary);
}

.site-footer__copy {
        margin: 0;
        color: var(--text-secondary);
}

/* ─────────────────────────────────────────────────────────────────────────
   13. Forms (search form in the drawer / More sheet)
   ───────────────────────────────────────────────────────────────────────── */

.search-form {
        display: flex;
        gap: var(--space-2);
}

.search-field,
input[type="search"],
input[type="text"],
input[type="email"],
textarea {
        flex: 1 1 auto;
        min-width: 0;
        min-height: var(--tap-target);
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-button);
        background-color: var(--bg-primary);
        color: var(--text-primary);
        font-family: var(--font-body);
        font-size: var(--text-body);
}

.search-form .search-submit,
input[type="submit"] {
        min-height: var(--tap-target);
        padding-inline: var(--space-4);
        border: 0;
        border-radius: var(--radius-button);
        background-color: var(--bg-elevated);
        color: var(--text-primary);
        font-weight: var(--weight-medium);
        cursor: pointer;
}

/* ─────────────────────────────────────────────────────────────────────────
   14. YMYL block details
   ───────────────────────────────────────────────────────────────────────── */

.nm-disclaimer__text {
        margin: 0;
}

.nm-disclaimer__link {
        display: inline-flex;
        align-items: center;
        min-height: var(--space-8);
        color: var(--text-primary);
        font-weight: var(--weight-medium);
}

.nm-seek-help__text {
        margin: 0;
}

.nm-seek-help__actions {
        display: grid;
        gap: var(--space-2);
}

/* ─────────────────────────────────────────────────────────────────────────
   15. Hero, page heads, media
   ───────────────────────────────────────────────────────────────────────── */

.nm-hero {
        display: grid;
        gap: var(--space-4);
        padding-block: var(--space-6) var(--section-gap);
}

.nm-hero__title {
        font-family: var(--font-heading);
        font-size: var(--text-h1);
        font-weight: var(--weight-bold);
        line-height: var(--leading-heading);
        letter-spacing: var(--tracking-heading);
        text-wrap: balance;
}

.nm-hero__subtitle {
        max-width: var(--measure);
        margin: 0;
        color: var(--text-secondary);
        font-size: var(--text-body);
        line-height: var(--leading-body);
}

.nm-page-head {
        display: grid;
        gap: var(--space-3);
        margin-bottom: var(--section-gap);
}

.nm-page-head__title {
        font-family: var(--font-heading);
        font-size: var(--text-h1);
        font-weight: var(--weight-bold);
        line-height: var(--leading-heading);
        letter-spacing: var(--tracking-heading);
        text-wrap: balance;
}

.nm-page-head__media {
        margin: var(--space-2) 0 0;
}

.nm-media,
.nm-page-head__media img,
.nm-product__cover img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: var(--radius-card);
}

.nm-page-links {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        margin-top: var(--section-gap);
        color: var(--text-secondary);
        font-size: var(--text-small);
}

.nm-page-links a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--tap-target-sm);
        min-height: var(--tap-target-sm);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   16. Card variants (compact problem cards, tool cards)
   ───────────────────────────────────────────────────────────────────────── */

.nm-card--compact {
        /* Stage 5: compact cards still need a comfortable thumb target. */
        min-height: calc(var(--tap-target) + var(--space-3));
        padding: var(--space-3) var(--space-4);
}

.nm-card--compact .nm-card__title {
        font-size: var(--text-body);
}

/* Tool cards own their action button, so they are columns, not link rows. */
.nm-card--tool {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        height: 100%;
        min-height: 0;
}

.nm-card__media {
        overflow: hidden;
        aspect-ratio: 3 / 2;
        border-radius: var(--radius-sm);
        background-color: var(--bg-elevated);
}

.nm-card__media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
}

.nm-card__price {
        margin: var(--space-1) 0 0;
        color: var(--text-primary);
        font-weight: var(--weight-semibold);
}

.nm-card--tool .nm-button {
        margin-top: auto;
}

/* ─────────────────────────────────────────────────────────────────────────
   17. Problem card content (feels like, techniques)
   ───────────────────────────────────────────────────────────────────────── */

.nm-feels,
.nm-feature-list,
.nm-proscons__list,
.nm-toc__list,
.nm-steps {
        margin: 0;
        padding: 0;
        list-style: none;
}

.nm-feels {
        display: grid;
        gap: var(--card-gap);
}

.nm-feels__item {
        display: grid;
        gap: var(--space-1);
        padding: var(--space-4);
        border: 1px solid var(--border);
        border-radius: var(--radius-card);
        background-color: var(--bg-secondary);
}

.nm-feels__title {
        font-size: var(--text-body);
        font-weight: var(--weight-semibold);
        color: var(--text-primary);
}

.nm-feels__text {
        margin: 0;
        color: var(--text-secondary);
}

/* Numbered techniques — the number comes from a CSS counter, so the markup
   stays a plain ordered list for screen readers. */
.nm-steps {
        display: grid;
        gap: var(--card-gap);
        counter-reset: nm-step;
}

.nm-steps__item {
        position: relative;
        counter-increment: nm-step;
        padding: var(--space-4);
        padding-left: calc(var(--space-10) + var(--space-3));
        border: 1px solid var(--border);
        border-radius: var(--radius-card);
        background-color: var(--bg-secondary);
}

.nm-steps__item::before {
        content: counter(nm-step);
        position: absolute;
        top: var(--space-4);
        left: var(--space-4);
        display: grid;
        place-items: center;
        width: var(--icon-lg);
        height: var(--icon-lg);
        border-radius: var(--radius-pill);
        background-color: var(--accent-muted);
        color: var(--accent-hover);
        font-size: var(--text-small);
        font-weight: var(--weight-semibold);
}

.nm-steps__title {
        margin-bottom: var(--space-1);
        font-size: var(--text-body);
        font-weight: var(--weight-semibold);
        color: var(--text-primary);
}

.nm-steps__text {
        margin: 0;
        color: var(--text-secondary);
}

/* ─────────────────────────────────────────────────────────────────────────
   18. Pillar table of contents & hub CTA
   ───────────────────────────────────────────────────────────────────────── */

.nm-toc {
        margin-bottom: var(--section-gap);
        padding: var(--space-4) var(--space-5);
        border: 1px solid var(--border);
        border-radius: var(--radius-card);
        background-color: var(--bg-secondary);
}

.nm-toc__title {
        color: var(--text-secondary);
        font-size: var(--text-small);
        font-weight: var(--weight-semibold);
        letter-spacing: var(--tracking-label);
        text-transform: uppercase;
}

.nm-toc__list {
        display: grid;
        gap: var(--space-1);
        margin-top: var(--space-3);
}

.nm-toc__list a {
        display: flex;
        align-items: center;
        /* Comfortable target inside a dense list, without the full 48px button. */
        min-height: var(--tap-target-sm);
        color: var(--text-secondary);
        text-decoration: none;
        transition: color var(--duration-fast) var(--ease-out);
}

.nm-toc__list a:hover,
.nm-toc__list a:focus-visible {
        color: var(--accent-hover);
}

.nm-hub-cta {
        display: grid;
        gap: var(--space-3);
        padding: var(--space-5);
        border: 1px solid var(--border);
        border-radius: var(--radius-card);
        background-color: var(--bg-secondary);
}

.nm-hub-cta__text {
        margin: 0;
        color: var(--text-secondary);
}

/* ─────────────────────────────────────────────────────────────────────────
   19. Product page
   ───────────────────────────────────────────────────────────────────────── */

.nm-badge {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        min-height: var(--icon-lg);
        margin: 0;
        padding-inline: var(--space-3);
        border-radius: var(--radius-pill);
        background-color: var(--accent-muted);
        color: var(--accent-hover);
        font-size: var(--text-small);
        font-weight: var(--weight-semibold);
        letter-spacing: var(--tracking-label);
        text-transform: uppercase;
}

.nm-product__cover {
        margin: 0 0 var(--section-gap);
}

.nm-feature-list {
        display: grid;
        gap: var(--space-3);
}

.nm-feature-list__item {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
}

.nm-feature-list__item p {
        margin: 0;
        color: var(--text-secondary);
}

.nm-feature-list__icon {
        flex: none;
        margin-top: 3px;
        width: var(--icon-sm);
        height: var(--icon-sm);
        color: var(--success);
}

.nm-feature-list__title {
        font-size: var(--text-body);
        font-weight: var(--weight-semibold);
        color: var(--text-primary);
}

/* Buy block: the page's single action, always visible in the flow (this
   template intentionally has no Sticky CTA). */
.nm-buy {
        display: grid;
        gap: var(--space-3);
        padding: var(--space-5);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-card);
        background-color: var(--bg-secondary);
}

.nm-buy__price {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin: 0;
        font-family: var(--font-heading);
        font-size: var(--text-h2);
        font-weight: var(--weight-bold);
        color: var(--text-primary);
}

.nm-buy__promise {
        display: flex;
        align-items: flex-start;
        gap: var(--space-2);
        margin: 0;
        color: var(--text-secondary);
        font-size: var(--text-small);
}

.nm-buy__icon {
        flex: none;
        width: var(--icon-sm);
        height: var(--icon-sm);
        color: var(--accent-hover);
}

/* ─────────────────────────────────────────────────────────────────────────
   20. Tool review
   ───────────────────────────────────────────────────────────────────────── */

.nm-verdict {
        margin: 0;
        padding-left: var(--space-4);
        border-left: 3px solid var(--accent);
        font-size: var(--text-h3);
        line-height: var(--leading-tight);
        color: var(--text-primary);
}

.nm-rating {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin: 0;
}

.nm-rating__stars {
        display: inline-flex;
        gap: 2px;
        color: var(--text-tertiary);
}

.nm-rating__star {
        width: var(--icon-xs);
        height: var(--icon-xs);
}

.nm-rating__star.is-filled {
        color: var(--warning);
}

.nm-rating__value {
        color: var(--text-secondary);
        font-size: var(--text-small);
}

.nm-proscons {
        display: grid;
        gap: var(--card-gap);
}

.nm-proscons__col {
        padding: var(--space-4);
        border: 1px solid var(--border);
        border-radius: var(--radius-card);
        background-color: var(--bg-secondary);
}

.nm-proscons__title {
        margin-bottom: var(--space-3);
        font-size: var(--text-body);
        font-weight: var(--weight-semibold);
        color: var(--text-primary);
}

.nm-proscons__list {
        display: grid;
        gap: var(--space-2);
}

.nm-proscons__item {
        display: flex;
        align-items: flex-start;
        gap: var(--space-2);
        color: var(--text-secondary);
}

.nm-proscons__icon {
        flex: none;
        margin-top: 3px;
        width: var(--icon-xs);
        height: var(--icon-xs);
}

.nm-proscons__col--pros {
        border-color: var(--success-muted);
}

.nm-proscons__col--cons {
        border-color: var(--negative-muted);
}

.nm-proscons__col--pros .nm-proscons__icon {
        color: var(--success);
}

.nm-proscons__col--cons .nm-proscons__icon {
        /* Muted rose, not alarm red — see --negative in tokens.css. */
        color: var(--negative);
}

.nm-spec-list__items {
        display: grid;
        gap: 0;
        margin: 0;
}

.nm-spec-list__row {
        display: grid;
        gap: var(--space-1);
        padding-block: var(--space-3);
        border-top: 1px solid var(--border);
}

.nm-spec-list__term {
        color: var(--text-secondary);
        font-size: var(--text-small);
        font-weight: var(--weight-semibold);
        letter-spacing: var(--tracking-label);
        text-transform: uppercase;
}

.nm-spec-list__value {
        margin: 0;
        color: var(--text-primary);
}

/* Affiliate disclosure sits directly above the button — never in the footer. */
.nm-affiliate {
        display: grid;
        gap: var(--space-3);
}

/*
 * FTC asks for "clear and conspicuous". Grey 12px type is neither, so the
 * disclosure gets the same boxed treatment as the medical disclaimer — warm,
 * quiet, impossible to miss — and sits immediately above the buy button.
 */
.nm-affiliate-disclosure {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        max-width: var(--measure);
        margin: 0;
        padding: var(--space-3) var(--space-4);
        border: 1px solid var(--warning-muted);
        border-radius: var(--radius-card);
        background-color: var(--bg-disclaimer);
        color: var(--text-secondary);
        font-size: var(--text-small);
        line-height: 1.55;
}

.nm-affiliate-disclosure__icon {
        flex: none;
        margin-top: 2px;
        width: var(--icon-xs);
        height: var(--icon-xs);
        color: var(--warning);
}

.nm-affiliate-disclosure__label {
        color: var(--text-primary);
        font-weight: var(--weight-semibold);
}

.nm-button__icon {
        flex: none;
        width: var(--icon-xs);
        height: var(--icon-xs);
}

/* ─────────────────────────────────────────────────────────────────────────
   21. Remaining chrome details & sidebar
   ───────────────────────────────────────────────────────────────────────── */

.nm-more-sheet__grabber {
        display: block;
        width: var(--space-10);
        height: var(--space-1);
        margin: 0 auto var(--space-4);
        border-radius: var(--radius-pill);
        background-color: var(--border-strong);
}

.nm-more-sheet__list {
        display: grid;
        gap: var(--space-1);
        margin: 0;
        padding: 0;
        list-style: none;
}

.nm-sticky-cta__arrow {
        flex: none;
        width: var(--icon-xs);
        height: var(--icon-xs);
}

.nm-sidebar {
        display: grid;
        gap: var(--section-gap);
}

.nm-widget {
        padding: var(--space-5);
        border: 1px solid var(--border);
        border-radius: var(--radius-card);
        background-color: var(--bg-secondary);
}

.nm-widget__title {
        margin-bottom: var(--space-3);
        font-size: var(--text-h3);
}

/* ─────────────────────────────────────────────────────────────────────────
   22. Stage 2 breakpoints
   ───────────────────────────────────────────────────────────────────────── */

/* Tablet — 768px */
@media (min-width: 48em) {
        .nm-proscons {
                grid-template-columns: repeat(2, 1fr);
        }

        .nm-spec-list__row {
                grid-template-columns: 11rem minmax(0, 1fr);
                gap: var(--space-4);
                align-items: baseline;
        }

        .nm-seek-help__actions {
                display: flex;
                flex-wrap: wrap;
        }

        .nm-seek-help__actions .nm-button {
                flex: 1 1 14rem;
        }

        .nm-hero {
                padding-block: var(--space-10) var(--section-gap);
        }
}

/* Desktop — 1024px: the inline menu replaces the burger and its drawer. */
@media (min-width: 64em) {
        .site-header__burger,
        .nm-drawer,
        .nm-drawer__backdrop {
                display: none;
        }
}

/* ─────────────────────────────────────────────────────────────────────────
   23. Stage 3 — component polish
   Every value comes from tokens.css; no literal colours or sizes.
   ───────────────────────────────────────────────────────────────────────── */

/* ── E-E-A-T byline (author + published / updated) ───────────────────────── */

.nm-entry-meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-1) var(--space-3);
        margin-top: var(--space-3);
        margin-bottom: 0;
        color: var(--text-secondary);
        font-size: var(--text-label);
        letter-spacing: var(--tracking-label);
        line-height: var(--leading-tight);
}

.nm-entry-meta__author {
        color: var(--text-secondary);
}

/* ── Disclaimer: compact variant + route to support ──────────────────────── */

.nm-disclaimer--compact {
        padding: var(--space-2) var(--space-3);
        gap: var(--space-2);
}

.nm-disclaimer--compact .nm-disclaimer__icon {
        width: var(--icon-xs);
        height: var(--icon-xs);
}

.nm-disclaimer__text > :last-child {
        margin-bottom: 0;
}

.nm-disclaimer__link {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        /* Keeps a 48px hit area without inflating the box visually. */
        min-height: var(--tap-target);
        margin-top: var(--space-1);
        color: var(--accent-hover);
        font-weight: var(--weight-medium);
        text-decoration: none;
}

.nm-disclaimer__link:hover {
        text-decoration: underline;
}

.nm-disclaimer__chevron {
        /* Same small-glyph size as every other inline icon in the theme. */
        width: var(--icon-xs);
        height: var(--icon-xs);
}

/* ── Problem cards in grids ──────────────────────────────────────────────── */

.nm-card--problem {
        /* 72–88px per the wireframe: a thumb-sized row that cannot be missed. */
        min-height: var(--card-min-height);
}

.nm-card--problem .nm-card__chevron {
        flex: none;
}

/* Horizontal rails are focusable regions so they can be scrolled by keyboard. */
.nm-rail:focus-visible {
        outline: 2px solid var(--accent-hover);
        outline-offset: var(--space-1);
        border-radius: var(--radius-sm);
}

/* "See all …" link under a grid. */
.nm-section__more {
        margin-top: var(--card-gap);
}

/* ── Disclaimer in the content flow ─────────────────────────── */

/*
 * The disclaimer is deliberately not a `.nm-section`, so it breaks the
 * `.nm-section + .nm-section` rhythm on every template that prints it between
 * the page head and the first section. Restore the gap on both sides.
 */
.nm-disclaimer + .nm-section,
.nm-disclaimer + .nm-toc,
.nm-disclaimer + .nm-disclaimer,
.nm-disclaimer + .nm-page-head__media,
.nm-section + .nm-disclaimer,
.nm-toc + .nm-disclaimer {
        margin-top: var(--section-gap);
}

/* ── "More" sheet header ─────────────────────────────────────────────────── */

.nm-more-sheet__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        margin-bottom: var(--space-3);
}

.nm-more-sheet__title {
        margin: 0;
        font-family: var(--font-heading);
        font-size: var(--text-h3);
        font-weight: var(--weight-semibold);
        color: var(--text-primary);
}

.nm-more-sheet__close {
        display: grid;
        place-items: center;
        flex: none;
        width: var(--tap-target);
        height: var(--tap-target);
        margin-right: calc(var(--space-2) * -1);
        border-radius: var(--radius-pill);
        color: var(--text-secondary);
        transition: color var(--duration-fast) var(--ease-out);
}

.nm-more-sheet__close:hover {
        color: var(--text-primary);
}

/* ── Sticky CTA ──────────────────────────────────────────────────────────── */

.nm-sticky-cta__text {
        /* One line, never wrapping the bar into two rows on small phones. */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}

.nm-sticky-cta__close {
        min-height: var(--tap-target);
}

/* ── Home hero ───────────────────────────────────────────────────────────── */

.nm-hero__cta {
        margin-top: var(--space-5);
}


/* ─────────────────────────────────────────────────────────────────────────
   24. Stage 4 — final polish
   Templates finished in this stage (Pillar, Tool Review) plus the shared
   details that had to wait until every component existed. Values come from
   tokens.css only; no literal colours, sizes or durations below.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Reading measure ─────────────────────────────────────────────────────
   The container caps the page at --content-width (42rem ≈ 672px) and prose
   blocks additionally cap at --measure (66ch), so a line never runs past the
   65–68 characters the design system asks for — on any viewport. */

.nm-prose > :is(p, ul, ol, blockquote, dl),
.nm-lead,
.nm-verdict {
        max-width: var(--measure);
}

/* ── Pillar hero ─────────────────────────────────────────────────────────
   Reserved aspect ratio: the LCP image can load late without shifting the
   article underneath it. */

.nm-pillar__hero {
        margin: 0 0 var(--section-gap);
}

.nm-pillar__hero img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: var(--radius-card);
        background-color: var(--bg-secondary);
}

/* ── Pillar clusters ─────────────────────────────────────────────────────
   Cluster cards are the same component as a problem card, so the hub and the
   pillar page read as one system. Only the rhythm needs a nudge. */

.nm-pillar .nm-stack--2col {
        gap: var(--card-gap);
}

/* ── Tool review ─────────────────────────────────────────────────────────── */

.nm-verdict {
        margin-top: var(--space-3);
        font-family: var(--font-heading);
        font-size: calc(var(--text-body) + 1px);
        font-weight: var(--weight-medium);
        line-height: var(--leading-body);
        color: var(--text-primary);
}

.nm-proscons__item {
        line-height: var(--leading-body);
}

/* Screen-reader-only label stays readable when the disclosure wraps. */
.nm-affiliate-disclosure__label {
        margin-right: var(--space-1);
}

/* ── Calm empty state (search, archives) ─────────────────────────────────
   No red, no "error", always one obvious next action — the UX rules of the
   project forbid alarm colours anywhere on the site. */

.nm-archive .nm-section__title + .nm-lead {
        margin-top: var(--space-3);
}

.nm-archive .nm-button {
        margin-top: var(--space-5);
}

/* ── Breakpoints for the components added in this stage ──────────────────── */

/* Tablet — 768px */
@media (min-width: 48em) {
        .nm-pillar__hero img {
                aspect-ratio: 21 / 9;
        }

        .nm-affiliate-disclosure {
                padding: var(--space-4) var(--space-5);
        }

        .nm-archive .nm-button--full {
                display: inline-flex;
                width: auto;
                min-width: 16rem;
        }
}

/* Desktop — 1024px */
@media (min-width: 64em) {
        /*
         * Two columns of links instead of one long list. Deliberately not sticky:
         * an in-flow block with a background would let the article scroll behind
         * it, and a floating panel is exactly the kind of movement this design
         * system avoids.
         */
        .nm-toc__list {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                column-gap: var(--space-6);
        }
}

/* Small phones — 360px and below: keep the two-column lists stacked. */
@media (max-width: 22.5em) {
        .nm-proscons__col {
                padding: var(--space-3);
        }

        .nm-affiliate-disclosure {
                padding: var(--space-3);
        }
}

/* ─────────────────────────────────────────────────────────────────────────
   25. Stage 5 — density, scanning and thumb-zone corrections
   Only spacing, sizing and existing tokens below: no new colours, no new
   fonts, no changes to the design-system palette.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Problem Hub: a scanning surface, not a page to read ─────────────────── */

/*
 * The hub opened with a full-size title, a lead paragraph and a disclaimer
 * before the first card — too much to process before the list starts.
 * The supporting copy is tightened; the list itself gets more air.
 */
.nm-hub__article .nm-page-head {
        gap: var(--space-2);
        margin-bottom: var(--space-5);
}

.nm-hub__article .nm-lead {
        font-size: var(--text-body);
        /* Shorter measure: the intro reads as a caption, not as an article. */
        max-width: 48ch;
}

.nm-hub__article .nm-disclaimer {
        padding: var(--space-2) var(--space-3);
}

/* More space between cards and between sections than a generic stack. */
.nm-hub__article .nm-stack {
        gap: var(--space-4);
}

.nm-hub__article .nm-section {
        padding-block: var(--space-7) var(--space-8);
}

/* ── Hero: the H1 is smaller now, so the space around it is smaller too ──── */

.nm-hero {
        gap: var(--space-3);
        padding-block: var(--space-4) var(--space-8);
}

/* ── Thumb zone: primary actions stay 52–56px and reachable ──────────────── */

/*
 * --button-height is 54px. These are the two places that used to opt out of
 * it: the search submit in the "More" sheet and inline icon buttons.
 */
.nm-button--full {
        min-height: var(--button-height);
}

/* The "More" sheet search: field and submit match the primary button height. */
.nm-more-sheet .search-field,
.nm-more-sheet input[type="search"],
.nm-more-sheet .search-submit,
.nm-more-sheet input[type="submit"] {
        min-height: var(--button-height);
}

/* A full-width CTA sits in the lower third: never let it be the last thing
   crammed against the fixed chrome. */
.nm-hub-cta {
        padding-bottom: var(--space-6);
}



/* =====================================================================
   26. 2026 Pillar & Tool-Review enhancements
   ===================================================================== */

/* ── Hero soft CTA (pillar pages) ──────────────────────────────────── */

.nm-hero-cta {
        margin-top: var(--space-3);
        text-align: center;
}

/* ── Badge (tool type label on cards) ──────────────────────────────── */

.nm-badge {
        display: inline-block;
        padding: 2px var(--space-2);
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        line-height: 1.4;
        text-transform: uppercase;
        color: var(--text-muted);
        background: var(--bg-elevated);
        border-radius: 4px;
}

/* ── Nighttime-context block (moon-accented callout) ───────────────── */

.nm-context-block {
        padding: var(--space-5) var(--space-4);
        background: var(--bg-elevated);
        border-left: 3px solid var(--accent);
        border-radius: 6px;
}

.nm-context-block .nm-section__title {
        display: flex;
        align-items: center;
        gap: var(--space-2);
}

/* Icon next to a section title (generic utility) */
.nm-section__icon {
        flex-shrink: 0;
        width: 1.25em;
        height: 1.25em;
        color: var(--accent);
}

/* ── Practical scenarios ───────────────────────────────────────────── */

.nm-scenarios {
        padding: var(--space-5) var(--space-4);
        background: var(--bg-secondary);
        border-radius: 6px;
}

/* ── Comparison note ───────────────────────────────────────────────── */

.nm-comparison {
        padding: var(--space-5) var(--space-4);
        background: var(--bg-secondary);
        border-radius: 6px;
}

/* Inline tables inside comparison get night-friendly styling */
.nm-comparison table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--text-small);
}

.nm-comparison th,
.nm-comparison td {
        padding: var(--space-2) var(--space-3);
        border-bottom: 1px solid var(--border);
        text-align: left;
}

.nm-comparison th {
        color: var(--text-muted);
        font-weight: 600;
}

/* Horizontal scroll for wide tables on mobile */
.nm-comparison .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
}

/* ── "Not for" section (gentle negative) ───────────────────────────── */

.nm-not-for {
        padding: var(--space-5) var(--space-4);
        background: var(--negative-muted);
        border-radius: 6px;
        color: var(--text-primary);
}

.nm-not-for .nm-section__title {
        color: var(--negative);
}

/* ── FAQ accordion ─────────────────────────────────────────────────── */

.nm-faq {
        margin-top: var(--space-6);
}

.nm-faq__list {
        list-style: none;
        padding: 0;
        margin: 0;
}

.nm-faq__item {
        border-bottom: 1px solid var(--border);
}

.nm-faq__item:last-child {
        border-bottom: none;
}

.nm-faq__question {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        width: 100%;
        padding: var(--space-4) 0;
        font-size: var(--text-body);
        font-weight: 600;
        color: var(--text-primary);
        cursor: pointer;
        list-style: none;           /* remove default marker */
        min-height: 48px;           /* tap-target */
}

/* Remove default <details> marker in WebKit */
.nm-faq__question::-webkit-details-marker {
        display: none;
}

.nm-faq__chevron {
        flex-shrink: 0;
        width: 1em;
        height: 1em;
        color: var(--text-muted);
        transition: transform 0.2s ease;
}

.nm-faq__item[open] .nm-faq__chevron {
        transform: rotate(90deg);
}

.nm-faq__answer {
        padding: 0 0 var(--space-4);
        color: var(--text-secondary);
        line-height: 1.65;
        max-width: var(--measure);
}

.nm-faq__answer p:last-child {
        margin-bottom: 0;
}



/* =====================================================================
   27. P0/P1 audit fixes — sticky CTA, conversion blocks, night scanning

   Answers the six findings of the UX audit:
     1. Sticky CTA did not behave as a bar pinned above the Bottom Nav.
     2. H1 was 32px on hand-held widths (fixed in tokens.css, not here).
     3. Recommended Tools did not read as a separate conversion module.
     4. Similar Problems had no visual weight of its own.
     5. Problem Card sections ran into each other.
     6. Problem Hub was heavy to scan at night.
   Tokens only — no literal colours, sizes or durations.
   ===================================================================== */

/* ── 1. Sticky CTA: make "fixed above the Bottom Nav" non-negotiable ──── */

/*
 * Specificity insurance. The element is `position: fixed` in section 9, but
 * a single `aside { position: static }` from a plugin or a page-builder
 * reset drops the bar back into the flow, where it reads as a stray button
 * at the end of the article. Element + class + attribute (0,2,1) outranks
 * anything a reset is realistically going to ship.
 */
aside.nm-sticky-cta[data-nm-sticky-cta] {
        position: fixed;
        /* Explicit physical sides: `inset-inline` alone leaves older WebKit
           without a left/right anchor, which collapses the bar to content width. */
        left: 0;
        right: 0;
        /* Fallback first: if --bottom-nav-space is ever missing the calc() below
           is invalid and gets dropped, and this keeps the bar off the nav. */
        bottom: var(--bottom-nav-height);
        bottom: calc(var(--bottom-nav-space, var(--bottom-nav-height)) + var(--safe-bottom));
        z-index: var(--z-sticky-cta);
        /* Promote once, so the reveal transition cannot repaint the nav under it. */
        will-change: transform, opacity;
}

/* On pages without the Bottom Nav the bar sits on the safe area alone. */
body:not(.has-bottom-nav) aside.nm-sticky-cta[data-nm-sticky-cta] {
        bottom: var(--safe-bottom);
}

/*
 * From 48em the bar stops being a full-width strip and becomes a floating
 * card anchored bottom-right (section 9's media query). That rule is a plain
 * `.nm-sticky-cta`, so the high-specificity `left: 0` above would otherwise
 * win and pin the card to the left edge — re-assert the placement here at
 * matching specificity.
 */
@media (min-width: 48em) {
        aside.nm-sticky-cta[data-nm-sticky-cta] {
                left: auto;
                right: var(--space-5);
                bottom: calc(var(--bottom-nav-space, var(--bottom-nav-height)) + var(--safe-bottom) + var(--space-4));
        }

        body:not(.has-bottom-nav) aside.nm-sticky-cta[data-nm-sticky-cta] {
                bottom: calc(var(--safe-bottom) + var(--space-4));
        }
}

/* ── 3. Recommended Tools as a self-contained conversion module ───────── */

/*
 * Until now this was a plain `.nm-section`: same background, same rhythm as
 * the prose above it, so it read as "more article". It is the commercial
 * moment of the page and has to look like a distinct surface.
 */
.nm-tools {
        padding: var(--space-6) var(--screen-padding) var(--space-7);
        /* Bleed to the screen edges on phones — a full-width panel, not a box. */
        margin-inline: calc(var(--screen-padding) * -1);
        background-color: var(--bg-secondary);
        border-block: 1px solid var(--border);
}

.nm-tools__head {
        display: grid;
        gap: var(--space-2);
        margin-bottom: var(--space-5);
}

.nm-tools__title {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        /* The head owns the spacing now. */
        margin-bottom: 0;
}

.nm-tools__title .nm-section__icon {
        color: var(--accent);
}

.nm-tools__note {
        margin: 0;
        max-width: var(--measure);
        font-size: var(--text-small);
        line-height: 1.5;
        color: var(--text-muted);
}

/*
 * The rail already bleeds by --screen-padding. Inside the module that bleed
 * would punch through the panel's own padding, so it is neutralised and the
 * rail simply starts at the panel's inner edge.
 */
.nm-tools .nm-rail {
        margin-inline: calc(var(--screen-padding) * -1);
        padding-inline: var(--screen-padding);
}

/* Cards sit on the elevated surface so they lift off the panel. */
.nm-tools .nm-card--tool {
        background-color: var(--bg-elevated);
}

/*
 * The lead card is our own product and is the one action we actually want
 * taken. A hairline accent ring is enough — no glow, no shadow bloom.
 */
.nm-tools .nm-card--tool-lead {
        border: 1px solid var(--accent-muted);
}

/* ── 4. Similar Problems as its own block ─────────────────────────────── */

.nm-similar__title {
        margin-bottom: var(--space-4);
}

.nm-similar__list {
        display: grid;
        gap: var(--space-2);
        margin: 0;
        padding: 0;
        list-style: none;
}

.nm-similar__item {
        margin: 0;
}

/*
 * A full-width row, not a card: 3–4 of these scan in one pass, which a grid
 * of boxes does not at 3 a.m. The arrow is the affordance that says "there
 * is more of this site".
 */
.nm-similar__link {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        min-height: var(--tap-target);
        padding: var(--space-4);
        background-color: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-card);
        color: var(--text-primary);
        text-decoration: none;
        transition:
                background-color var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}

.nm-similar__link:hover,
.nm-similar__link:focus-visible {
        background-color: var(--bg-elevated);
        border-color: var(--border-strong);
        color: var(--text-primary);
}

.nm-similar__body {
        display: grid;
        gap: var(--space-1);
        flex: 1 1 auto;
        min-width: 0;
}

.nm-similar__name {
        font-family: var(--font-heading);
        font-size: var(--text-body);
        font-weight: var(--weight-semibold);
        line-height: 1.35;
}

.nm-similar__line {
        font-size: var(--text-small);
        line-height: 1.5;
        color: var(--text-muted);
}

.nm-similar__arrow {
        flex: none;
        width: var(--icon-sm);
        height: var(--icon-sm);
        color: var(--text-muted);
        transition: transform var(--duration-fast) var(--ease-out);
}

.nm-similar__link:hover .nm-similar__arrow,
.nm-similar__link:focus-visible .nm-similar__arrow {
        transform: translateX(var(--space-1));
        color: var(--accent);
}

/* ── 5. Problem Card: air and a visible hierarchy ─────────────────────── */

/*
 * Sections were separated by --section-gap alone, which on a phone reads as
 * "one long page". The Problem Card is the screen where a reader has to find
 * one block and skip the rest, so the separation is made explicit.
 */
.nm-problem .nm-section + .nm-section {
        margin-top: var(--space-9);
        padding-top: var(--space-7);
        border-top: 1px solid var(--border);
}

/*
 * The two blocks that already carry their own surface (tools panel, seek-help
 * block) do not need a rule on top of a background edge.
 */
.nm-problem .nm-section + .nm-tools,
.nm-problem .nm-section + .nm-seek-help {
        border-top: none;
}

/* …and the panel keeps the inner padding it sets for itself. */
.nm-problem .nm-section + .nm-tools {
        padding-top: var(--space-6);
}

/* H2 gets weight and a short accent rule, so scanning finds the headings. */
.nm-problem .nm-section__title {
        position: relative;
        padding-top: var(--space-3);
        font-size: var(--text-h2);
        line-height: 1.25;
        margin-bottom: var(--space-5);
}

.nm-problem .nm-section__title::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: var(--space-8);
        height: 2px;
        background-color: var(--accent);
        border-radius: var(--radius-pill);
}

/* The tools panel supplies its own framing; no accent rule inside it. */
.nm-problem .nm-tools .nm-section__title {
        padding-top: 0;
}

.nm-problem .nm-tools .nm-section__title::before {
        display: none;
}

/* A visually-hidden heading must not leave its accent rule behind. */
.nm-problem .nm-section__title.nm-visually-hidden::before {
        display: none;
}

/* ── 6. Problem Hub: lighter to scan ──────────────────────────────────── */

/* Tighter rows: 12-word blurbs (set in the template) plus a denser stack. */
.nm-hub__article .nm-stack--2col {
        gap: var(--space-3);
}

.nm-hub__article .nm-card__excerpt {
        font-size: var(--text-small);
        line-height: 1.5;
}

/* ── Wider screens ────────────────────────────────────────────────────── */

@media (min-width: 48em) {
        /* The tools panel becomes a rounded card once there are real margins. */
        .nm-tools {
                margin-inline: 0;
                padding-inline: var(--space-6);
                border: 1px solid var(--border);
                border-radius: var(--radius-card);
        }

        .nm-tools .nm-rail {
                margin-inline: calc(var(--space-6) * -1);
                padding-inline: var(--space-6);
        }

	/*
	 * Two short rows side by side read faster than one tall column — but
	 * only when each row is genuinely wide enough for the empathic line.
	 * auto-fit keeps a single column inside narrow containers instead of
	 * squeezing the text into two towers.
	 */
        .nm-similar__list {
                grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
                gap: var(--space-3);
        }
}