/* ==========================================================================
   NODDIE NIGHT — pages.css
   Secondary-page layout: policies, contact, product facts, sleep guide,
   accessibility, 404. Loaded AFTER site.css (tokens, base type, buttons,
   header, footer, forms, .prose, .callout, .table and utilities live there).

   Order: page wrap · breadcrumb · page hero · layout + on-this-page nav ·
   long-form rhythm · steps · definition list · facts table · supplement
   facts panel · contact · article (sleep guide) · signup box · related links ·
   shop band · 404 · print.
   Mobile-first. Nothing here may cause horizontal scroll at 360px.
   ========================================================================== */


/* ==== PAGE WRAP =========================================================== */
.page-wrap {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}
.page-wrap-narrow { max-width: 820px; }


/* ==== BREADCRUMB ========================================================== */
.breadcrumb { margin-bottom: 1.75rem; }
.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.5rem;
    list-style: none;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--muted);
}
.breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.breadcrumb li + li::before {
    content: "/";
    color: var(--border-strong);
}
.breadcrumb a {
    display: inline-block;
    padding: 0.35rem 0;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.breadcrumb a:hover { color: var(--amber-ink); }
.breadcrumb [aria-current="page"] { color: var(--navy); }


/* ==== PAGE HERO BAND ====================================================== */
.page-hero {
    position: relative;
    overflow: hidden;                 /* the decorative asterisk never widens the page */
    background: var(--alt-bg);
    border-bottom: 1px solid var(--border);
    padding: 2rem 0 2.75rem;
}
/* ✳ motif, decoration only (text glyph, never a colour emoji) */
.page-hero::after {
    content: "\2733\FE0E";
    position: absolute;
    right: -0.12em;
    bottom: -0.34em;
    font-family: var(--font-serif);
    font-variant-emoji: text;
    font-size: clamp(9rem, 26vw, 20rem);
    line-height: 1;
    color: var(--amber);
    opacity: 0.2;
    pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero .eyebrow { margin-bottom: 0.75rem; }
.page-title {
    font-size: clamp(2.35rem, 6vw, 4rem);
    line-height: 1.05;
    max-width: 18ch;
    margin-bottom: 1rem;
}
.page-title em { opacity: 0.8; }
.page-lede {
    font-size: 1.125rem;
    line-height: 1.6;
    max-width: 60ch;
}
.page-updated {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.6rem;
    margin-top: 1.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.page-updated::before {
    content: "";
    width: 1.75rem;
    height: 1px;
    background: var(--amber-ink);
}
@media (min-width: 900px) {
    .page-hero { padding: 2.75rem 0 4.5rem; }
    .page-lede { font-size: 1.25rem; }
}


/* ==== LAYOUT + ON-THIS-PAGE NAV =========================================== */
.page-body { padding: 2.5rem 0 4rem; }
.page-layout { display: block; }

.toc {
    border: 1px solid var(--border);
    background: var(--white);
    padding: 1.1rem 1.25rem 0.85rem;
    margin-bottom: 2.5rem;
}
.toc-title {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--amber-ink);
    margin-bottom: 0.4rem;
}
.toc ol { list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc li + li { border-top: 1px solid var(--border); }
.toc a {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding: 0.6rem 0;
    font-size: 0.95rem;
    line-height: 1.4;
}
.toc a::before {
    content: counter(toc, decimal-leading-zero);
    flex: none;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.toc a:hover { color: var(--amber-ink); }
.toc a:hover,
.toc a:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

@media (min-width: 1000px) {
    .page-body { padding: 4.5rem 0 6rem; }
    .page-layout {
        display: grid;
        grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
        gap: 4.5rem;
        align-items: start;
    }
    .toc {
        position: sticky;
        top: calc(var(--header-h) + 2rem);
        max-height: calc(100vh - var(--header-h) - 4rem);
        overflow-y: auto;
        margin-bottom: 0;
        padding: 0 0 0 1.25rem;
        border: 0;
        border-left: 1px solid var(--border);
        background: transparent;
    }
    .toc li + li { border-top: 0; }
    .toc a { padding: 0.4rem 0; font-size: 0.9rem; }
}


/* ==== LONG-FORM RHYTHM (adds to .prose in site.css) ======================= */
.page-prose { max-width: 70ch; min-width: 0; }
.page-prose > :first-child { margin-top: 0; }
.page-prose p,
.page-prose li,
.page-prose dd { overflow-wrap: break-word; }
.page-prose h2 {
    font-size: clamp(1.65rem, 3.4vw, 2.25rem);
    line-height: 1.15;
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border);
}
.page-prose > h2:first-child,
.page-prose > .callout:first-child + h2 { margin-top: 2.25rem; }
.page-prose > h2:first-child { padding-top: 0; border-top: 0; margin-top: 0; }
.page-prose h3 {
    font-size: 1.35rem;
    line-height: 1.2;
    margin-top: 2.25rem;
}
.page-prose h2 + *, .page-prose h3 + * { margin-top: 1rem; }
.page-prose .lede { font-size: 1.125rem; }
@media (min-width: 700px) {
    .page-prose .lede { font-size: 1.25rem; }
}
.page-prose ul { list-style: none; padding-left: 0; }
.page-prose ul > li {
    position: relative;
    padding-left: 1.5rem;
}
.page-prose ul > li::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.72em;
    width: 0.45rem;
    height: 1px;
    background: var(--amber-ink);
}
.page-prose ol { padding-left: 1.5rem; }
.page-prose ol > li::marker {
    color: var(--amber-ink);
    font-weight: 500;
}
.page-prose li + li { margin-top: 0.55rem; }
.page-prose b, .page-prose strong { font-weight: 500; }
/* a.link-amber already carries a hairline rule; do not underline it twice */
.page-prose a.link-amber { text-decoration: none; }
.page-prose .callout { margin-top: 1.75rem; margin-bottom: 1.75rem; }
.page-prose > .callout:first-child { margin-top: 0; }
.page-prose .table-wrap { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.page-prose .fine-print,
.fine-print {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--muted);
}
.page-prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }
.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
    background: rgba(220, 230, 243, 0.7);
    padding: 0.05em 0.35em;
}
.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
@media (max-width: 480px) {
    .btn-row .btn { width: 100%; }
}


/* ==== STEPS (numbered, editorial) ========================================= */
/* <ol class="steps"><li>…</li></ol>: big serif numerals with hairline rows */
.page-prose ol.steps,
ol.steps {
    list-style: none;
    padding-left: 0;
    counter-reset: step;
    border-top: 1px solid var(--border);
}
ol.steps > li {
    counter-increment: step;
    position: relative;
    margin-top: 0;
    padding: 1.1rem 0 1.1rem 3.25rem;
    border-bottom: 1px solid var(--border);
}
ol.steps > li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.95rem;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--amber-ink);
}


/* ==== DEFINITION LIST ===================================================== */
.def-list {
    border-top: 1px solid var(--border);
}
.def-list > div {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border);
}
.def-list dt {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.15rem;
}
.def-list dd { overflow-wrap: anywhere; }
@media (min-width: 640px) {
    .def-list > div {
        display: grid;
        grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
        gap: 1.5rem;
        align-items: baseline;
    }
    .def-list dt { margin-bottom: 0; }
}


/* A wide table's wrapper can be given tabindex="0" role="region" aria-label="…"
   so keyboard users can scroll it; show the focus ring inside the box. */
.table-wrap[tabindex]:focus-visible { outline-offset: -2px; }


/* ==== FACTS TABLE (.facts-table → accessible definition table) ============ */
/* Markup: <div class="table-wrap"><table class="table facts-table">
           <caption>…</caption><tbody><tr><th scope="row">…</th><td>…</td></tr> */
.facts-table caption {
    caption-side: top;
    text-align: left;
    padding: 0.8rem 1.1rem;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--ivory);
    border-bottom: 1px solid var(--border);
}
.facts-table th[scope="row"] {
    width: 38%;
    font-weight: 500;
    color: var(--navy);
}
.facts-table td { color: var(--navy); }
.facts-table td .muted { display: block; font-size: 0.85rem; }
@media (max-width: 480px) {
    .page-prose .table { font-size: 0.9rem; }
    .page-prose .table th, .page-prose .table td { padding: 0.75rem 0.7rem; }
    .facts-table { font-size: 0.9rem; }
    .facts-table th, .facts-table td { padding: 0.75rem 0.85rem; }
    .facts-table th[scope="row"] { width: 42%; }
    .facts-table caption { padding: 0.7rem 0.85rem; }
}


/* ==== SUPPLEMENT FACTS PANEL ============================================== */
.supp-facts {
    max-width: 30rem;
    margin-top: 1.5rem;
    background: var(--white);
    border: 2px solid var(--navy);
    padding: 1rem 1.1rem 1.1rem;
}
.supp-facts table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.95rem;
    line-height: 1.45;
}
.supp-facts caption {
    caption-side: top;
    text-align: left;
    padding-bottom: 0.5rem;
    border-bottom: 6px solid var(--navy);
}
.supp-facts-title {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 6vw, 2.25rem);
    line-height: 1.05;
    margin-bottom: 0.35rem;
}
.supp-facts-serving { display: block; font-size: 0.95rem; }
.supp-facts th, .supp-facts td {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--navy);
    vertical-align: top;
}
.supp-facts thead th {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    border-bottom: 3px solid var(--navy);
}
.supp-facts tbody th { font-weight: 500; padding-right: 0.75rem; }
.supp-facts tbody tr.supp-facts-group th,
.supp-facts tbody tr.supp-facts-group td { border-bottom: 0; padding-bottom: 0.1rem; }
.supp-facts tbody td.supp-facts-sub {
    padding-top: 0;
    padding-left: 0.9rem;
    font-size: 0.9rem;
    color: var(--muted);
}
.supp-facts .num { text-align: right; padding-left: 0.5rem; }
.supp-facts tbody .num { white-space: nowrap; }
.supp-facts thead .num { width: 5.75rem; vertical-align: bottom; }
.supp-facts tbody tr:last-child th,
.supp-facts tbody tr:last-child td { border-bottom: 3px solid var(--navy); }
@media (max-width: 420px) {
    .supp-facts { padding: 0.85rem 0.8rem 0.95rem; }
    .supp-facts table { font-size: 0.9rem; }
    .supp-facts thead th { font-size: 0.72rem; letter-spacing: 0; }
    .supp-facts thead .num { width: 4.9rem; }
}
.supp-facts-notes {
    margin-top: 0.7rem;
    font-size: 0.82rem;
    line-height: 1.55;
}
.supp-facts-notes p + p { margin-top: 0.4rem; }


/* ==== CONTACT ============================================================= */
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
}
@media (min-width: 900px) {
    .contact-grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 4.5rem;
        align-items: start;
    }
}
.contact-form-head { margin-bottom: 1.75rem; }
.contact-form-head h2 { font-size: clamp(1.65rem, 3.4vw, 2.25rem); margin-bottom: 0.5rem; }
.contact-form .btn { min-width: 12rem; }
.contact-form .label .optional,
.label .optional {
    font-weight: 400;
    letter-spacing: 0;
    color: var(--muted);
}
.req-mark { color: var(--danger); }
/* Per-field error line. Empty means hidden. */
.field-error {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--danger);
    margin-top: 0.4rem;
}
.field-error:empty { display: none; }
/* Form-level status: a boxed message so it cannot be missed */
.form-status {
    margin-top: 1.25rem;
    font-size: 0.95rem;
    line-height: 1.55;
}
.form-status.ok, .form-status.bad {
    padding: 0.9rem 1.1rem;
    border-left: 3px solid currentColor;
    background: var(--white);
}
.form-status a { text-decoration: underline; text-underline-offset: 3px; color: inherit; }
/* Honeypot: off-screen for people, present for bots. Never display:none. */
.hp-field {
    position: absolute !important;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
@media (max-width: 480px) {
    .contact-form .btn { width: 100%; }
}

.identity {
    background: var(--alt-bg);
    padding: 1.75rem 1.5rem;
}
.identity h2 { font-size: 1.6rem; margin-bottom: 1rem; }
.identity .def-list { border-top-color: rgba(23, 43, 80, 0.18); }
.identity .def-list > div {
    display: block;
    border-bottom-color: rgba(23, 43, 80, 0.18);
}
.identity .def-list dt { margin-bottom: 0.15rem; }
.identity address { font-style: normal; }
.identity a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.identity a:hover { color: var(--amber-ink); }
@media (min-width: 900px) {
    .identity { padding: 2.25rem 2rem; }
}
.help-links {
    list-style: none;
    margin-top: 2rem;
    border-top: 1px solid var(--border);
}
.help-links li { border-bottom: 1px solid var(--border); }
.help-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 56px;
    padding: 0.6rem 0;
    font-family: var(--font-serif);
    font-size: 1.25rem;
    line-height: 1.25;
}
.help-links a span[aria-hidden] {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--amber-ink);
    transition: transform 0.3s;
}
.help-links a:hover span[aria-hidden] { transform: translate(2px, -2px); }


/* ==== ARTICLE (sleep guide) =============================================== */
.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
    margin-top: 1.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.article-meta span + span::before {
    content: "\2733\FE0E";
    font-variant-emoji: text;
    color: var(--amber-ink);
    margin-right: 0.6rem;
}
.article-figure { margin: 0 0 2.5rem; }
.article-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--navy);
}
.article-figure figcaption {
    margin-top: 0.6rem;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    color: var(--muted);
}
.article-summary {
    font-family: var(--font-serif);
    font-size: clamp(1.3rem, 3vw, 1.6rem);
    line-height: 1.35;
}
/* Drop the top rule on article h2s that directly follow a figure or box */
.page-prose .signup-box + h2,
.page-prose .article-figure + h2 { border-top: 0; padding-top: 0; }


/* ==== SIGNUP BOX (guide by email) ========================================= */
.signup-box {
    background: var(--navy);
    color: var(--on-navy);
    padding: 1.75rem 1.5rem;
    margin: 2.5rem 0;
}
.signup-box .eyebrow { color: var(--amber); margin-bottom: 0.5rem; }
.signup-box h2,
.page-prose .signup-box h2 {
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    line-height: 1.15;
    margin: 0 0 0.5rem;
    padding: 0;
    border: 0;
}
.signup-box p { color: var(--on-navy-muted); }
.signup-box .label { color: var(--on-navy); margin-top: 1.1rem; }
.signup-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.signup-row .input {
    flex: 1 1 14rem;
    min-width: 0;
    border-color: transparent;
}
.signup-row .btn { flex: 0 0 auto; }
.signup-box .signup-consent {
    font-size: 0.8rem;
    line-height: 1.55;
    margin-top: 0.85rem;
}
.signup-box a:not(.btn),
.page-prose .signup-box a:not(.btn) {
    color: var(--on-navy);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.signup-box a:not(.btn):hover,
.page-prose .signup-box a:not(.btn):hover { color: var(--amber); }
.signup-box .field-msg { color: var(--on-navy-muted); margin-top: 0.85rem; }
.signup-box .field-msg.ok { color: var(--success-on-navy); }
.signup-box .field-msg.bad { color: var(--danger-on-navy); }
.signup-box :where(a, button, input):focus-visible { outline-color: var(--amber); }
@media (max-width: 480px) {
    .signup-row .btn { width: 100%; }
}
@media (min-width: 700px) {
    .signup-box { padding: 2.25rem 2.25rem; }
}

/* Product note at the end of an article */
.product-note {
    border: 1px solid var(--border);
    background: var(--white);
    padding: 1.75rem 1.5rem;
    margin-top: 3rem;
}
.page-prose .product-note h2 {
    font-size: 1.6rem;
    margin: 0 0 0.5rem;
    padding: 0;
    border: 0;
}
@media (min-width: 700px) {
    .product-note { padding: 2.25rem; }
}


/* ==== RELATED LINKS (end of a policy) ===================================== */
.related {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
    max-width: 70ch;
}
.related-title {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--amber-ink);
    margin-bottom: 0.75rem;
}
.related ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    list-style: none;
}
.related a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
    box-shadow: inset 0 0 0 1px var(--border-strong);
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.related a:hover {
    background: var(--navy);
    color: var(--ivory);
    box-shadow: inset 0 0 0 1px var(--navy);
}


/* ==== "BACK TO SHOP" BAND (last thing in <main>) ========================== */
.shop-band {
    border-top: 1px solid var(--border);
    background: var(--ivory);
    padding: 3.5rem 0;
}
.shop-band-inner {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}
.shop-band .eyebrow { margin-bottom: 0.6rem; }
.shop-band-title {
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.05;
    margin-bottom: 0.75rem;
}
.shop-band-title span[aria-hidden] { color: var(--amber); font-variant-emoji: text; }
.shop-band-copy { color: var(--muted); max-width: 46ch; }
.shop-band-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
@media (max-width: 480px) {
    .shop-band-actions .btn { width: 100%; }
}
@media (min-width: 900px) {
    .shop-band { padding: 5rem 0; }
    .shop-band-inner {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 3rem;
    }
    .shop-band-actions { flex: none; }
}


/* ==== 404 ================================================================= */
.notfound {
    padding: 3.5rem 0 4.5rem;
    text-align: center;
}
.notfound-code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.08em;
    font-family: var(--font-serif);
    font-size: clamp(5.5rem, 26vw, 13rem);
    line-height: 0.95;
    color: var(--navy);
    margin-bottom: 1.25rem;
}
.notfound-code .star {
    color: var(--amber);
    font-variant-emoji: text;
    font-size: 0.78em;
    transform: translateY(0.06em);
}
.notfound .page-title { max-width: 16ch; margin-left: auto; margin-right: auto; }
.notfound .page-lede { margin: 0 auto; max-width: 48ch; }
.notfound .btn-row { justify-content: center; margin-top: 2rem; }
.notfound-links {
    margin-top: 3.5rem;
    text-align: left;
}
.notfound-links ul { list-style: none; }
.notfound-links li { display: flex; }
.notfound-links .card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    height: 100%;
    transition: border-color 0.3s, transform 0.3s;
}
.notfound-links .card:hover { border-color: var(--navy); transform: translateY(-3px); }
.notfound-links .card-title { margin-bottom: 0; display: flex; justify-content: space-between; gap: 1rem; }
.notfound-links .card-title span[aria-hidden] {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--amber-ink);
}
.notfound-links .card p { color: var(--muted); font-size: 0.95rem; }
@media (min-width: 900px) {
    .notfound { padding: 5rem 0 7rem; }
}


/* ==== SHELL PATCH ========================================================= */
/* Open accordion marker: a real minus sign (the shared rule's escape is unreliable). */
details[open] > summary::after { content: "\2212"; }


/* ==== PRINT (policies, facts, guide) ====================================== */
@media print {
    @page { margin: 18mm 16mm; }

    html, body {
        background: #fff !important;
        color: #000 !important;
        font-size: 11pt;
        line-height: 1.5;
        overflow: visible !important;
    }
    .skip-link, .announcement, .site-header, .site-footer, .cookie,
    .toc, .breadcrumb, .shop-band, .related, .signup-box, .btn-row,
    .contact-form, .contact-form-head, .help-links,
    .nnc-btn, .nnc-panel, .nnc-badge { display: none !important; }

    .page-hero {
        background: none !important;
        border-bottom: 1pt solid #000;
        padding: 0 0 10pt;
    }
    .page-hero::after { display: none; }
    .page-hero .eyebrow, .page-updated, .article-meta, .toc-title { color: #000 !important; }
    .page-title { font-size: 24pt; max-width: none; }
    .page-lede { font-size: 12pt; max-width: none; }
    .page-body { padding: 12pt 0 0; }
    .page-wrap, .page-wrap-narrow { max-width: none; padding: 0; }
    .page-layout, .contact-grid { display: block; }
    .page-prose, .prose { max-width: none; }

    .page-prose h2 {
        font-size: 15pt;
        margin-top: 16pt;
        padding-top: 10pt;
        border-top: 0.5pt solid #999;
    }
    .page-prose h3 { font-size: 12.5pt; }
    h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
    p, li, tr, .callout, .supp-facts, .def-list > div { break-inside: avoid; page-break-inside: avoid; }
    p, li { orphans: 3; widows: 3; }

    a, a:visited { color: #000 !important; text-decoration: underline; }
    /* Show where links go, but only real web addresses */
    .page-prose a[href^="http"]::after,
    .page-prose a[href^="/"]:not([href^="/#"])::after {
        font-size: 9pt;
        word-break: break-all;
    }
    .page-prose a[href^="http"]::after { content: " (" attr(href) ")"; }
    .page-prose a[href^="/"]:not([href^="/#"])::after { content: " (noddienight.com" attr(href) ")"; }

    .callout, .identity, .product-note, .table-wrap, .supp-facts {
        background: none !important;
        border: 0.5pt solid #000;
        color: #000;
    }
    .callout { border-left: 2pt solid #000; }
    .table-wrap { overflow: visible; }
    .table thead th, .facts-table caption { background: none !important; color: #000; }
    .table th, .table td { border-bottom: 0.5pt solid #999; }
    .muted, .fine-print, .def-list dt, .supp-facts td.supp-facts-sub { color: #333 !important; }
    ol.steps > li::before, .page-prose ol > li::marker { color: #000; }
    .page-prose ul > li::before { background: #000; }
    .article-figure img { max-height: 70mm; }

    /* Company line on every printed policy */
    main::after {
        content: "Noddie Night is a trading name of Advanced Community Living Corporation \B7  3570 Route 27, Suite 121 #312, Kendall Park, NJ 08824, USA \B7  hello@noddienight.com \B7  noddienight.com";
        display: block;
        margin-top: 18pt;
        padding-top: 8pt;
        border-top: 0.5pt solid #000;
        font-size: 9pt;
    }
}