/* CleanAim Website Styles - Single Source of Truth */

:root {
    /* ============================================================
       COVER PALETTE — sampled directly from
       silent-wiring-cover-FINAL-1800x2700.png. The site and the book
       are one object; these are the book's own colours, not an
       approximation of them.
       ============================================================ */

    /* Surfaces. The cover is 84.2% #05070a — that IS the page. */
    --bg: #05070a;
    --bg-raised: #0c1014;
    --bg-panel: #11161c;

    /* Type. #f4f6f8 is the cover's title white (18.6:1 on bg, AAA). */
    --text-primary: #f4f6f8;
    --text-secondary: #9aa5ad;   /* 7.9:1 — added for long-form body */
    --text-tertiary: #78828a;    /* 5.1:1 — the cover's author grey */

    /* Green, split by job exactly as the cover splits it:
       --brand-primary  #2e8c4d  the mark   -> structure: rules, borders, marks
       --brand-bright   #4cbb74  subtitle   -> read/click: links, CTAs, labels */
    --brand-primary: #2e8c4d;
    --brand-bright: #4cbb74;
    --brand-primary-rgb: 46, 140, 77;
    --brand-dark: #216838;
    --brand-light: #4cbb74;
    --brand-deep: #17472a;
    --brand-tint: #0e1a13;
    --brand-border: #1e3d29;
    --brand-pale: #8fd6a8;

    /* Lines. --border-strong is the book-cover outline: the cover is the
       same near-black as the page, so without it the book has no edge. */
    --border-light: #1c2229;
    --border-strong: #2f3740;

    /* Status colours, re-tuned for a dark surface. The inherited values were
       chosen against white and are unreadable here. */
    --status-error: #f87171;   --status-error-bg: #2a1416;
    --status-warn:  #fbbf24;   --status-warn-bg:  #2a2110;
    --status-ok:    #4ade80;   --status-ok-bg:    #10261a;
    --status-info:  #60a5fa;   --status-info-bg:  #131e33;

    /* Legacy surface aliases — inherited rules still reference these. */
    --bg-white: #05070a;
    --bg-light: #0c1014;
    --bg-accent: #11161c;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text-primary);
    line-height: 1.6;
    background: var(--bg-white);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 500;
    line-height: 1.2;
}

/* Registered trademark symbol - smaller in headings */
h1 sup,
h2 sup,
h3 sup,
.section-title sup {
    font-size: 0.5em;
    vertical-align: super;
    font-weight: 400;
}

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Header */
/* SCOPED TO #header ON PURPOSE — do not loosen this back to a bare `header`
   element selector. Page templates use semantic <header> elements for their
   own page headers (.about-header, .article-header). A bare rule pins every
   one of them to the top of the viewport, full-width and opaque, on top of
   the real site header — which is exactly what happened to /about/. */
#header {
    padding: 24px 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(244, 246, 248, 0.95);
    backdrop-filter: blur(8px);
    z-index: 100;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

#header.scrolled {
    border-bottom-color: var(--border-light);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: block;
}

.logo img {
    height: 44px;
    width: auto;
}

/* ============================================
   NAVIGATION - Dropdowns & Mobile Menu
   ============================================ */

/* Main Navigation */
.main-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-item {
    position: relative;
}

.nav-item > a {
    display: block;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.nav-item > a:hover {
    color: var(--brand-primary);
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    gap: 5px;
    z-index: 101;
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    transition: all 0.3s ease;
}

.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ============================================
   MOBILE NAVIGATION (max-width: 1024px)
   ============================================ */

@media (max-width: 1024px) {.menu-toggle {
        display: flex;
    }

.main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid var(--border-light);
        padding: 8px 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

.main-nav.mobile-open {
        display: flex;
    }

.nav-item {
        border-bottom: 1px solid var(--border-light);
    }

.nav-item:last-of-type {
        border-bottom: none;
    }

.nav-item > a {
        display: block;
        padding: 12px 20px;
        text-align: left;
        position: relative;
    }

/* Plus/minus indicator for mobile dropdowns */
    .nav-item > a::after {
        content: '+';
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 400;
        font-size: 18px;
        color: var(--text-tertiary);
    }

.nav-item.dropdown-open > a::after {
        content: '−';
    }
}

/* Hero */
.hero {
    padding: 180px 0 80px;
    min-height: auto;
    background: var(--bg);
    text-align: left;
}

/* Light blue hero variant */
.hero--light-blue {
    background: var(--bg-accent);
}

.hero h1 {
    font-size: clamp(30px, 4.5vw, 46px);
    color: var(--brand-primary);
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.hero-subtitle {
    font-size: 20px;
    color: var(--text-secondary);
    margin-bottom: 40px;
    max-width: 600px;
}

/* Sections */
section {
    padding: 100px 0;
}

.section-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

.section-title {
    font-size: clamp(28px, 3.5vw, 36px);
    color: var(--text-primary);
    margin-bottom: 24px;
}

/* Contact Section */
.contact {
    text-align: center;
    padding: 120px 0;
}

.contact .section-title {
    margin-bottom: 16px;
}

.contact-text {
    font-size: 17px;
    color: var(--text-secondary);
    margin-bottom: 40px;
}

.contact-email {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 500;
    color: var(--brand-primary);
    text-decoration: none;
    padding: 16px 32px;
    background: var(--bg-accent);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.contact-email:hover {
    background: var(--brand-primary);
    color: var(--text-primary);
}

/* Footer */
/* Scoped for the same reason as #header above: article.html uses a semantic
   <footer class="article-footer"> inside <main>, and a bare `footer` selector
   silently restyles it. */
body > footer {
    padding: 48px 0 32px;
    border-top: 1px solid var(--border-light);
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    padding-bottom: 32px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-light);
}

.footer-column-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.footer-column-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column-links li {
    margin-bottom: 6px;
}

.footer-column-links a {
    font-size: 13px;
    color: var(--text-tertiary);
    text-decoration: none;
}

.footer-column-links a:hover {
    color: var(--brand-primary);
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-text {
    font-size: 13px;
    color: var(--text-tertiary);
}

.footer-legal {
    font-size: 13px;
    color: var(--text-tertiary);
}

@media (max-width: 768px) {.footer-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 640px) {.container {
        padding: 0 20px;
    }

.hero {
        padding: 140px 0 80px;
    }

section {
        padding: 64px 0;
    }
}

/* Single Article Page */
.article-page {
    padding: 160px 0 100px;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

.article-header {
    max-width: 720px;
    margin: 0 auto 24px;
    position: relative;
}

.article-meta-top {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
    font-size: 14px;
}

.article-category {
    color: var(--brand-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.article-date {
    color: var(--text-tertiary);
}

/* Article page title - use h1 selector to override card styles */
h1.article-title,
.article-header .article-title {
    font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(32px, 5vw, 42px);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 24px;
    line-height: 1.2;
}

.article-excerpt {
    font-size: 1.15rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0;
}

/* Article Content */
.article-content {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
}

.article-content p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.article-content h2 {
    font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 48px;
    margin-bottom: 20px;
}

.article-content h3 {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(18px, 2.5vw, 22px);
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 36px;
    margin-bottom: 16px;
}

/* Remove extra top margin on first paragraph after excerpt */
.article-content > p:first-of-type {
    margin-top: 0;
}

.article-content ul,
.article-content ol {
    margin: 0 0 24px 24px;
    color: var(--text-secondary);
}

.article-content li {
    margin-bottom: 8px;
    line-height: 1.7;
}

.article-content blockquote {
    margin: 32px 0;
    padding: 24px 32px;
    background: var(--bg-accent);
    border-left: 3px solid var(--brand-primary);
    border-radius: 0 8px 8px 0;
}

.article-content blockquote p {
    font-size: 18px;
    font-style: italic;
    color: var(--brand-dark);
    margin-bottom: 8px;
}

.article-content blockquote cite {
    font-size: 14px;
    color: var(--text-tertiary);
    font-style: normal;
}

/* Article Footer */
.article-footer {
    max-width: 720px;
    margin: 64px auto 0;
    padding-top: 48px;
    border-top: 1px solid var(--border-light);
}

.article-nav {
    text-align: center;
}

.back-link {
    font-size: 15px;
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: 500;
}

.back-link:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {.article-page {
        padding: 140px 0 64px;
    }

.article-content h2 {
        font-size: 24px;
    }
}

/* ============================================
   404 ERROR PAGE
   ============================================ */

.error-page {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 140px 0 100px;
    text-align: center;
}

.error-content {
    max-width: 480px;
}

.error-code {
    display: block;
    font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: 120px;
    font-weight: 500;
    color: var(--bg-accent);
    line-height: 1;
    margin-bottom: 16px;
}

.error-headline {
    font-size: 36px;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.error-message {
    font-size: 17px;
    color: var(--text-secondary);
    margin-bottom: 40px;
    line-height: 1.6;
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.btn-primary,
.btn-secondary {
    display: inline-block;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.btn-primary {
    background: var(--brand-primary);
    color: var(--text-primary);
}

.btn-primary:hover {
    background: var(--brand-dark);
}

.btn-secondary {
    background: transparent;
    color: var(--brand-primary);
    border: 1px solid var(--border-light);
}

.btn-secondary:hover {
    border-color: var(--brand-primary);
    background: var(--bg-light);
}

@media (max-width: 640px) {.error-code {
        font-size: 80px;
    }

.error-headline {
        font-size: 28px;
    }

.error-actions {
        flex-direction: column;
    }

.error-actions a {
        width: 100%;
        text-align: center;
    }
}

/* ============================================
   STANDARD CONTENT PAGES
   ============================================ */

/* Standard Page Layout */
.page-content {
    /* Top clears the fixed #header (~98px: 50px of logo block + 24px x2).
       Was 160px, which left more air than the page needed once the hero's
       own inherited padding was removed. 132px keeps ~34px of breathing
       room under the header without the dead band. */
    padding: 132px 0 80px;
    position: relative;
    z-index: 1;
}

.page-hero {
    margin-bottom: 48px;
}

/* Content Grid - Two Column */
.content-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 64px;
    align-items: start;
}

.content-grid.single-column {
    grid-template-columns: 1fr;
    max-width: 720px;
}

.content-main h2 {
    font-size: 28px;
    margin-top: 48px;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.content-main h2:first-child {
    margin-top: 0;
}

.content-main h3 {
    font-size: 20px;
    margin-top: 32px;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.content-main p {
    margin-bottom: 20px;
    color: var(--text-secondary);
    line-height: 1.8;
}

.content-main ul {
    margin-bottom: 24px;
    padding-left: 24px;
}

.content-main li {
    margin-bottom: 12px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.content-main blockquote {
    margin: 32px 0;
    padding: 24px 32px;
    background: var(--bg-accent);
    border-left: 3px solid var(--brand-primary);
    border-radius: 0 8px 8px 0;
}

.content-main blockquote p {
    font-size: 18px;
    font-style: italic;
    color: var(--brand-dark);
    margin-bottom: 8px;
}

.content-main blockquote cite {
    font-size: 14px;
    color: var(--text-tertiary);
    font-style: normal;
}

/* Stats Row */
.stats-row {
    display: flex;
    gap: 48px;
    margin: 40px 0;
    padding: 32px 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: 36px;
    font-weight: 500;
    color: var(--brand-primary);
    margin-bottom: 4px;
}

.stat-label {
    font-size: 14px;
    color: var(--text-tertiary);
}

/* CTA Box */
.cta-box {
    background: var(--bg-accent);
    padding: 32px;
    border-radius: 8px;
    margin: 40px 0;
    text-align: center;
}

.cta-box h3 {
    margin-top: 0;
    margin-bottom: 12px;
}

.cta-box p {
    margin-bottom: 20px;
}

/* Content Image */
.content-image {
    margin: 32px 0;
}

.content-image img {
    width: 100%;
    border-radius: 8px;
}

.content-image figcaption {
    margin-top: 12px;
    font-size: 14px;
    color: var(--text-tertiary);
    text-align: center;
}

/* Sidebar */
.sidebar {
    position: sticky;
    top: 120px;
}

.sidebar-widget {
    background: var(--bg-light);
    padding: 24px;
    border-radius: 8px;
    margin-bottom: 24px;
}

.sidebar-widget h4 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

.sidebar-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-widget li {
    margin-bottom: 12px;
}

.sidebar-widget a {
    color: var(--brand-primary);
    text-decoration: none;
}

.sidebar-widget a:hover {
    text-decoration: underline;
}

.sidebar-cta {
    background: var(--bg-accent);
    border-left: 3px solid var(--brand-primary);
}

.sidebar-cta p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

/* Page Footer CTA */
.page-footer-cta {
    text-align: center;
    padding: 80px 0;
    margin-top: 64px;
    border-top: 1px solid var(--border-light);
}

.page-footer-cta h2 {
    margin-bottom: 16px;
}

.page-footer-cta p {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 4px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-primary {
    background: var(--brand-primary);
    color: var(--text-primary);
}

.btn-primary:hover {
    background: var(--brand-dark);
    text-decoration: none;
}

.btn-secondary {
    background: white;
    color: var(--brand-primary);
    border: 1px solid var(--brand-primary);
}

.btn-secondary:hover {
    background: var(--brand-primary);
    color: var(--text-primary);
    text-decoration: none;
}

/* Responsive */
@media (max-width: 1024px) {.content-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

.sidebar {
        position: static;
    }
}

@media (max-width: 640px) {.page-content {
        padding: 120px 0 64px;
    }

.stats-row {
        flex-direction: column;
        gap: 24px;
    }

.content-main h2 {
        font-size: 24px;
    }
}

.fact-label {
    font-size: 0.95rem;
    color: var(--text-tertiary);
}

.fact-value {
    font-weight: 600;
    color: var(--text-primary);
}

.btn-large {
    padding: 16px 32px;
    font-size: 18px;
}

/* FAQ Section */
.faq-section {
    padding: 100px 0;
    border-bottom: 1px solid var(--border-light);
}

.faq-list {
    max-width: 800px;
    margin: 48px auto 0;
}

.faq-item {
    padding: 24px 0;
    border-bottom: 1px solid var(--border-light);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-item h3 {
    font-size: 18px;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.faq-item p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

.faq-item a {
    color: var(--brand-primary);
}

/* Contact Info Section */
.contact-info-section {
    padding: 80px 0 100px;
    border-bottom: 1px solid var(--border-light);
}

.contact-grid {
    display: block;
}

.contact-primary .section-title {
    margin-bottom: 16px;
}

.contact-intro {
    font-size: 17px;
    color: var(--text-secondary);
    margin-bottom: 40px;
    line-height: 1.7;
}

.contact-methods {
    margin-bottom: 0;
}

.contact-method {
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    border-bottom: 1px solid var(--border-light);
}

.contact-method:first-child {
    border-top: 1px solid var(--border-light);
}

.contact-primary > .contact-method {
    border-top: 1px solid var(--border-light);
    border-bottom: none;
}

.method-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin-bottom: 8px;
}

.method-value {
    font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: 24px;
    color: var(--brand-primary);
    text-decoration: none;
}

.method-value:hover {
    text-decoration: underline;
}

/* Quick Links Section */
.quicklinks-section {
    background: var(--bg-light);
    padding: 100px 0;
    border-bottom: 1px solid var(--border-light);
}

.quicklinks-section .section-intro {
    margin-bottom: 48px;
}

.quicklinks-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.quicklink-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: white;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    text-decoration: none;
    transition: all 0.2s ease;
}

.quicklink-card:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb), 0.08);
}

.quicklink-looking {
    font-size: 15px;
    color: var(--text-secondary);
}

.quicklink-destination {
    font-size: 15px;
    font-weight: 500;
    color: var(--brand-primary);
}

/* Expectations Section */
.expectations-section {
    padding: 100px 0;
    border-bottom: 1px solid var(--border-light);
}

.expectations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.expectation-card {
    padding: 32px;
    background: var(--bg-light);
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.expectation-card h3 {
    font-size: 18px;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.expectation-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.expectation-card li {
    padding: 10px 0;
    font-size: 14px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-light);
}

.expectation-card li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Contact CTA */
.contact-cta {
    padding: 100px 0;
    text-align: center;
}

.cta-simple {
    font-size: 18px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.contact-cta .contact-email {
    font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: 24px;
}

/* Responsive - Contact Page */
@media (max-width: 1024px) {.contact-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

.quicklinks-grid {
        grid-template-columns: 1fr;
    }

.expectations-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {.method-value {
        font-size: 20px;
    }

.contact-cta .contact-email {
        font-size: 20px;
    }
}

/* ============================================
   HOMEPAGE STYLES (CodeArch-led)
   ============================================ */

/* Hero Section */
.home-hero {
    padding: 200px 0 100px;
    text-align: center;
    background: var(--bg-white);
}

.home-hero .section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 24px;
}

.home-hero h1 {
    font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(36px, 5vw, 52px);
    font-weight: 500;
    color: var(--brand-primary);
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 640px) {.home-hero {
        padding: 160px 0 80px;
    }
}

/* ============================================
   ARTICLES LISTING PAGE (Redesigned)
   ============================================ */

/* Articles Hero */
.articles-hero {
    padding: 180px 0 60px;
    background: var(--bg-light);
}

.articles-hero .section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

.articles-hero h1 {
    font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(36px, 5vw, 48px);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.articles-hero .subtitle {
    font-size: 18px;
    color: var(--text-secondary);
    max-width: 600px;
    line-height: 1.6;
    margin: 0;
}

.category-tag {
    display: inline-block;
    padding: 6px 12px;
    background: var(--brand-primary);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 4px;
}

.read-link {
    font-size: 15px;
    font-weight: 500;
    color: var(--brand-primary);
    text-decoration: none;
}

.read-link:hover {
    text-decoration: underline;
}

/* Articles CTA Section */
.articles-cta {
    padding: 100px 0;
    background: var(--bg-white);
    text-align: center;
}

.articles-cta h2 {
    font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(26px, 3vw, 32px);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.articles-cta p {
    font-size: 17px;
    color: var(--text-secondary);
    margin-bottom: 32px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.articles-cta .cta-button {
    display: inline-block;
    padding: 14px 32px;
    background: var(--brand-primary);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 500;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.articles-cta .cta-button:hover {
    background: var(--brand-dark);
}

@media (max-width: 768px) {.articles-hero {
        padding: 160px 0 48px;
    }
}

/* ==========================================
   PROBLEMS PAGES
   ========================================== */

/* Problems Grid */
.problems-grid-section {
  padding: var(--section-padding) 0;
  background: var(--bg);
}

.problems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  align-items: stretch; /* Equal height cards */
}

/* Ensure grid items stretch to fill cell */
.problems-grid > * {
  height: 100%;
}

/* ==============================================
   PROBLEM CARDS - FLEXBOX LAYOUT
   Issue: "Learn more" button overlaps description text
   Fix: Proper flexbox with button always at bottom
   ============================================== */

.problem-card {
  display: flex !important;
  flex-direction: column !important;
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 32px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
  min-height: 300px;
  height: 100%;
}

.problem-card:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* Problem number */
.problem-card .problem-number {
  font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--brand-primary);
  margin-bottom: 12px;
  flex-shrink: 0;
}

/* Problem name */
.problem-card h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  line-height: 1.3;
  flex-shrink: 0;
}

/* Description - grows to fill space, pushes button down */
.problem-card p,
.problem-card .problem-tagline {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.5;
  flex-grow: 1;
  margin-bottom: 0;
  /* Limit to 3 lines with ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.problem-card .problem-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--bg-panel);
  flex-shrink: 0;
}

.problem-card .problem-link:hover {
  color: var(--brand-dark);
}

.problems-cta {
  background: var(--brand-primary);
}

.problem-section {
  padding: 80px 0;
}

.problem-section h2 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  margin-bottom: 24px;
  color: var(--brand-primary, var(--brand-primary));
}

.problem-section p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 20px;
  color: var(--text-secondary, var(--text-secondary));
}

.problem-section--alt {
  background: var(--bg-light);
}

/* Developer Quotes - Better spacing */
.quotes-section {
  background: white;
}

.quotes-grid {
  display: grid;
  gap: 20px;
}

.developer-quote {
  background: var(--bg-raised);
  border-left: 4px solid var(--brand-primary, var(--brand-primary));
  padding: 24px 32px;
  margin: 0;
  border-radius: 0 8px 8px 0;
}

.developer-quote p {
  font-style: italic;
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.developer-quote cite {
  font-size: 0.9rem;
  color: var(--text-tertiary, var(--text-tertiary));
  font-style: normal;
}

/* Solution Section - Subtle highlight */
.solution-section {
  background: var(--bg-raised);
  padding: 48px;
  border-radius: 12px;
  border-top: none;
}

.solution-section .section-label {
  color: var(--brand-primary, var(--brand-primary));
}

.solution-section h2 {
  margin-bottom: 8px;
}

.solution-section h3 {
  font-size: 1.5rem;
  color: var(--brand-primary, var(--brand-primary));
  margin-bottom: 24px;
}

/* Evidence Grid - Better cards */
.evidence-section {
  background: var(--bg-light);
}

.evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.evidence-card {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
}

.evidence-value {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--brand-primary, var(--brand-primary));
  margin-bottom: 8px;
}

.evidence-label {
  font-size: 0.95rem;
  color: var(--text-tertiary, var(--text-tertiary));
}

/* Page CTA - Lighter treatment */
.problem-cta {
  background: linear-gradient(135deg, var(--brand-tint) 0%, var(--brand-border) 100%);
  padding: 100px 0;
  text-align: center;
}

.problem-cta h2,
.problem-cta .section-title {
  color: var(--brand-primary, var(--brand-primary));
  font-size: 2rem;
  margin-bottom: 16px;
}

.problem-cta p,
.problem-cta .contact-text {
  color: var(--text-secondary, var(--text-secondary));
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto 32px;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-label {
  font-size: 0.9rem;
  color: var(--text-tertiary);
}

.faq-section {
  padding: 80px 0;
  background: var(--bg-raised);
}

.faq-list {
  max-width: 900px;
  margin-top: 2rem;
}

.faq-item {
  background: var(--bg);
  border-radius: 8px;
  padding: 28px 32px;
  margin-bottom: 16px;
  border: 1px solid var(--border-light);
}

.faq-item:last-child {
  margin-bottom: 0;
}

.faq-item h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.faq-item p {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Problems Mini Grid */
.problems-grid-section {
  padding: 80px 0;
  text-align: center;
}

.problems-grid-section .section-label {
  margin-bottom: 12px;
}

.problem-link {
  font-size: 1.1rem;
  padding: 24px;
  background: var(--bg-light, var(--bg-raised));
  border-radius: 8px;
}

.problem-link a {
  font-weight: 600;
  color: var(--brand-primary, var(--brand-primary));
}

/* -----------------------------------------
   MOBILE RESPONSIVE
   ----------------------------------------- */
@media (max-width: 768px) {.evidence-grid {
    grid-template-columns: 1fr;
  }

.solution-section {
    margin-left: -16px;
    margin-right: -16px;
    padding: 32px 24px;
  }
}

.problems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
  align-items: stretch; /* Equal height cards */
}

@media (max-width: 768px) {.problems-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   FRAMING BANNERS & CROSS-LINK CTAs
   (Problem → Wiring Failures, Solution → Silent Wiring)
   ============================================ */

.framing-banner {
  padding: 20px 0;
  background: var(--bg-accent, var(--bg-accent));
  border-left: 4px solid var(--accent-color, var(--status-info));
}

.framing-banner p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.framing-banner a {
  color: var(--accent-color, var(--status-info));
  font-weight: 600;
  text-decoration: none;
}

.framing-banner a:hover {
  text-decoration: underline;
}

/* ============================================
   PROBLEM DETAIL - EXPANDED SECTIONS
   (Failure types, research callout, tool comparison)
   ============================================ */

.problem-section-intro {
  font-size: 1.1rem;
  color: var(--text-secondary, var(--text-secondary));
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 800px;
}

/* Failure Types Grid */
.failure-types-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 24px;
}

.failure-type-card {
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 32px;
}

.failure-type-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-primary, var(--brand-primary));
  background: var(--bg-accent, var(--bg-accent));
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.failure-type-card h3 {
  font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.failure-type-description {
  font-size: 0.95rem;
  color: var(--text-secondary, var(--text-secondary));
  line-height: 1.6;
  margin-bottom: 16px;
}

.failure-type-example {
  padding: 16px 20px;
  background: var(--bg-accent);
  border-radius: 8px;
  border-left: 3px solid var(--brand-primary, var(--brand-primary));
}

.failure-type-example p {
  font-size: 0.9rem;
  color: var(--text-secondary, var(--text-secondary));
  line-height: 1.6;
  margin: 0;
}

/* Research Callout */
.research-callout {
  background: var(--bg-accent, var(--bg-accent));
  border-radius: 12px;
  padding: 40px;
  margin-top: 24px;
}

.research-stat {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-light, var(--border-light));
}

.research-stat-value {
  display: block;
  font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--brand-primary, var(--brand-primary));
  line-height: 1;
  margin-bottom: 8px;
}

.research-stat-context {
  display: block;
  font-size: 0.95rem;
  color: var(--text-tertiary, var(--text-tertiary));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.research-description {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-secondary, var(--text-secondary));
  margin-bottom: 16px;
}

.research-conclusion {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-primary);
  margin: 0;
}

/* Tool Comparison Grid */
.tool-comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}

.tool-comparison-card {
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 28px;
}

.tool-comparison-card h3 {
  font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.tool-does,
.tool-misses {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary, var(--text-secondary));
  margin-bottom: 12px;
}

.tool-misses {
  color: var(--brand-bright);
}

.tool-analogy {
  font-size: 0.875rem;
  color: var(--text-tertiary, var(--text-tertiary));
  line-height: 1.5;
  margin: 0;
}

.tool-comparison-conclusion {
  margin-top: 32px;
  padding: 24px 32px;
  background: var(--bg-accent, var(--bg-accent));
  border-radius: 8px;
}

.tool-comparison-conclusion p {
  font-size: 1.05rem;
  color: var(--text-primary);
  line-height: 1.7;
  margin: 0;
}

/* Responsive: Problem detail expanded sections */
@media (max-width: 768px) {.failure-types-grid {
    grid-template-columns: 1fr;
  }

.tool-comparison-grid {
    grid-template-columns: 1fr;
  }

.failure-type-card,
.tool-comparison-card {
    padding: 24px;
  }

.research-callout {
    padding: 28px;
  }

.research-stat-value {
    font-size: 2.5rem;
  }
}

.article-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* ==============================================
   UNIFIED HERO STYLES

   Goal: Match homepage hero across ALL pages
   - White background
   - Brand green (var(--brand-primary)) Archivo Black headline
   - Clean spacing (180px top, 120px bottom)
   - Consistent section-label styling
   ============================================== */

/* ==============================================
   BASE HERO (applies to all pages)
   ============================================== */

/* Reset all hero backgrounds to white */
.hero,
.page-hero,
[class*="page-hero"] {
    background: var(--bg);
    padding: 180px 0 120px;
    text-align: left;
}

/* ==============================================
   SECTION LABEL (small caps above headline)
   ============================================== */

.hero .section-label,
.page-hero .section-label,
[class*="page-hero"] .section-label,
[class*="-hero"] .section-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 16px;
    display: block;
}

/* ==============================================
   HEADLINE (H1)
   Large Archivo Black in brand green
   ============================================== */

.hero h1,
.hero-headline,
.page-hero h1,
[class*="page-hero"] h1,
[class*="-hero"] h1 {
    font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(30px, 4.5vw, 46px);
    font-weight: 500;
    color: var(--brand-primary);
    margin-bottom: 24px;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* Slightly smaller for sub-pages if needed */
.page-hero h1,
[class*="page-hero"] h1 {
    font-size: clamp(36px, 4.5vw, 48px);
}

/* ==============================================
   SUBTITLE / SUBHEAD
   ============================================== */

.hero-subtitle,
.page-hero .hero-subtitle,
[class*="page-hero"] .hero-subtitle,
[class*="-hero"] .hero-subtitle {
    font-family: 'DM Sans', -apple-system, sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 16px;
    max-width: 700px;
}

/* ==============================================
   DESCRIPTION (body text in hero)
   ============================================== */

.hero-description,
.page-hero p:not(.section-label):not(.hero-subtitle) {
    font-family: 'DM Sans', -apple-system, sans-serif;
    font-size: 18px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 700px;
    margin-bottom: 32px;
}

.hero .btn-primary,
.page-hero .btn-primary {
    background: var(--brand-primary);
    color: var(--text-primary);
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s ease;
}

.hero .btn-primary:hover,
.page-hero .btn-primary:hover {
    background: var(--brand-dark);
    text-decoration: none;
}

.hero .btn-secondary,
.page-hero .btn-secondary {
    background: transparent;
    color: var(--brand-primary);
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid var(--brand-primary);
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
}

.hero .btn-secondary:hover,
.page-hero .btn-secondary:hover {
    background: var(--brand-primary);
    color: var(--text-primary);
    text-decoration: none;
}

/* ==============================================
   CONTAINER WITHIN HERO
   ============================================== */

.hero .container,
.page-hero .container,
[class*="page-hero"] .container,
[class*="-hero"] .container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ==============================================
   MOBILE RESPONSIVE
   ============================================== */

@media (max-width: 768px) {.hero,
.page-hero,
[class*="page-hero"],
[class*="-hero"] {
        padding: 140px 0 80px;
    }

.hero h1,
.page-hero h1,
[class*="page-hero"] h1,
[class*="-hero"] h1 {
        font-size: clamp(32px, 8vw, 40px);
    }

.hero-subtitle {
        font-size: 18px;
    }

.hero-description {
        font-size: 16px;
    }

.hero .btn-primary,
.hero .btn-secondary {
        width: 100%;
        text-align: center;
    }
}

/* ==============================================
   ALL HERO ELEMENTS - UNIFIED LEFT ALIGNMENT
   ============================================== */

/* Every text element in any hero - same left edge */
.hero .section-label,
.hero h1,
.page-hero .section-label,
.page-hero h1,
[class*="-hero"] .section-label,
[class*="-hero"] h1 {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
}

/* ==============================================
   SPACING: REDUCE WHITESPACE BELOW HERO
   ============================================== */

/* Tighter bottom padding on all heroes */
.hero,
.page-hero,
[class*="-hero"]:not(.final-cta):not(.industry-cta):not(.solutions-cta) {
    padding-bottom: 80px;
}

/* First section after hero */
.hero + section,
.page-hero + section {
    padding-top: 60px;
}

/* All hero sections - consistent base styling (override text-align: center) */
.hero:not(.hero--light-blue) {
    background: var(--bg);
    padding: 180px 0 80px !important;
    text-align: left !important;
}

/* All hero h1 - match homepage exactly */
.hero h1,
.hero .hero-headline {
    font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: clamp(30px, 4.5vw, 46px) !important;
    font-weight: 500 !important;
    color: var(--brand-primary);
    margin-bottom: 24px !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
    max-width: 100% !important;
}

/* Section labels - consistent gray */
.hero .section-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--text-tertiary);
    margin-bottom: 16px !important;
    display: block !important;
}

/* Subtitle/subhead/tagline - all variations */
.hero-subtitle,
.hero .hero-subtitle {
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    color: var(--text-primary);
    margin: 0 0 16px 0 !important;  /* Override margin: 0 auto */
    max-width: 700px !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

/* Description text */
.hero-description,
.hero .hero-description {
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-size: 18px !important;
    color: var(--text-secondary);
    line-height: 1.6 !important;
    max-width: 700px !important;
    margin: 0 0 32px 0 !important;  /* Override any centering */
    text-align: left !important;
}

/* Primary button */
.hero .btn-primary {
    background: var(--brand-primary);
    color: var(--text-primary);
    padding: 16px 32px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border: none;
    border-radius: 6px !important;
    text-decoration: none !important;
    display: inline-block !important;
}

.hero .btn-primary:hover {
    background: var(--brand-dark);
}

/* Secondary button */
.hero .btn-secondary {
    background: transparent;
    color: var(--brand-primary);
    padding: 16px 32px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border: 1px solid var(--brand-primary);
    border-radius: 6px !important;
    text-decoration: none !important;
    display: inline-block !important;
}

.hero .btn-secondary:hover {
    background: var(--brand-primary);
    color: var(--text-primary);
}

/* ==============================================
   MASTER HERO FIX - MOBILE
   ============================================== */

@media (max-width: 768px) {.hero {
        padding: 140px 0 60px !important;
    }

.hero h1 {
        font-size: clamp(32px, 8vw, 40px) !important;
    }

.hero-subtitle {
        font-size: 18px !important;
    }

.hero-description {
        font-size: 16px !important;
    }

.hero .btn-primary,
.hero .btn-secondary {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ==============================================
   FINAL OVERRIDE - FORCE LEFT ALIGNMENT
   This MUST be at the very end of the file
   ============================================== */

/* Force all hero sections to left-align text */
section.hero {
    text-align: left !important;
}

/* Force all hero text elements to left-align */
section.hero h1,
section.hero p,
section.hero .section-label,
section.hero .hero-subtitle,
section.hero .hero-description {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ==============================================
   PROBLEM PAGE - SOLUTION CTA SECTION
   ============================================== */

.solution-cta-section {
    background: var(--bg-raised);
    padding: 60px 0;
    margin-top: 60px;
    border-top: 1px solid var(--border-light);
}

.solution-cta-section .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 32px;
}

.solution-cta-card {
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.solution-cta-content {
    flex: 1;
}

.solution-cta-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-primary);
    margin-bottom: 12px;
    display: block;
}

.solution-cta-title {
    font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 12px;
    line-height: 1.3;
}

.solution-cta-description {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.solution-cta-button {
    flex-shrink: 0;
}

.solution-cta-button .btn {
    background: var(--brand-primary);
    color: var(--text-primary);
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.solution-cta-button .btn:hover {
    background: var(--brand-dark);
    transform: translateX(4px);
}

.solution-cta-button .btn::after {
    content: '→';
    font-size: 18px;
}

@media (max-width: 768px) {.solution-cta-card {
        flex-direction: column;
        text-align: center;
        padding: 32px 24px;
    }

.solution-cta-button {
        width: 100%;
    }

.solution-cta-button .btn {
        width: 100%;
        justify-content: center;
    }
}

.problems-cta,
.problem-cta,
.contact {
    background: var(--brand-primary);
    padding: 80px 0;
    text-align: center;
}

.problem-cta h2,
.problem-cta .section-title,
.contact h2,
.contact .section-title {
    color: var(--text-primary);
    margin-bottom: 16px;
}

.problem-cta p,
.problem-cta .contact-text,
.contact p,
.contact .contact-text {
    color: rgba(244, 246, 248, 0.85);
    font-size: 18px;
    margin-bottom: 32px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.problem-cta .btn,
.problem-cta .btn-primary,
.contact .btn,
.contact .btn-primary {
    background: var(--bg);
    color: var(--brand-primary);
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
}

.problem-cta .btn:hover,
.contact .btn:hover {
    background: var(--bg-accent);
    transform: translateY(-2px);
}

/* ==============================================
   PREV/NEXT NAVIGATION
   For problem and solution detail pages
   ============================================== */

.prev-next-nav {
    background: var(--bg-raised);
    padding: 40px 0;
    border-top: 1px solid var(--border-light);
}

.prev-next-nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 32px;
}

.prev-next-link {
    font-family: 'DM Sans', -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--brand-primary);
    text-decoration: none;
    padding: 12px 20px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    transition: all 0.2s ease;
    background: var(--bg);
}

.prev-next-link:hover {
    background: var(--brand-primary);
    color: var(--text-primary);
    border-color: var(--brand-primary);
}

.prev-next-placeholder {
    width: 150px;
}

.prev-link {
    margin-right: auto;
}

.next-link {
    margin-left: auto;
}

@media (max-width: 768px) {.prev-next-nav .container {
        flex-direction: column;
        gap: 16px;
    }

.prev-next-link {
        width: 100%;
        text-align: center;
    }

.prev-next-placeholder {
        display: none;
    }
}

/* ============================================================================
   SILENTWIRING.COM — COVER THEME
   ----------------------------------------------------------------------------
   Everything below is new to this fork. Two jobs:
     (A) carry the book cover's design onto the site, and
     (B) correct the inherited components, which were written for a light page
         and go wrong on a dark one in specific, listed ways.
   No colour literal appears here. Tokens only, per CLAUDE.md §1.
   ============================================================================ */

/* ---------- A1. Typography ------------------------------------------------ */
/* The cover pairs a heavy grotesque with a monospace. The inherited serif
   display face was the wrong voice for this cover and has been removed. */

h1,
h2,
h3,
.home-hero h1,
.home-category h2,
.home-types h2,
.home-essays h2 {
    font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;               /* Archivo Black ships one weight */
    letter-spacing: -0.02em;
    color: var(--text-primary);     /* NOT --brand-primary: on a dark page a
                                       green headline reads as a link */
}

/* Mono is the cover's subtitle language, and the reader's own. */
.section-label,
.logo-subtitle,
.type-number,
.error-code {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.section-label {
    color: var(--brand-bright);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 14px;
    font-weight: 500;
}

body { background: var(--bg); color: var(--text-secondary); }

/* ---------- A2. The mark -------------------------------------------------- */
/* The cover's glyph: a 2x2 grid, three quadrants filled, the fourth an empty
   outline. Three wires carrying, one silent — the book's thesis as one shape.
   Pure CSS: no image request, exact at any size, recoloured by the tokens.
   This is the answer to blocker B-5. */

.sw-mark {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--mark-gap, 2px);
    width: var(--mark-size, 34px);
    height: var(--mark-size, 34px);
    padding: var(--mark-gap, 2px);
    border: 1px solid var(--brand-primary);
    flex: none;
}

.sw-mark i { background: var(--brand-primary); display: block; }

/* The silent one. Never filled — not on hover, not anywhere. */
.sw-mark i:last-child {
    background: transparent;
    border: 1px solid var(--brand-primary);
}

/* ---------- A3. The book cover ------------------------------------------- */
/* The cover's background is the same near-black as this page, so without an
   explicit edge the book has no outline at all — it bleeds into the page and
   reads as floating type. A thin dark-grey rule gives it its object-ness. */

.book-cover {
    display: block;
    max-width: 300px;
    width: 100%;
    height: auto;
    border: 1px solid var(--border-strong);
    border-radius: 2px;
}

.book-figure { margin: 0; }

.book-panel {
    display: grid;
    grid-template-columns: minmax(200px, 300px) 1fr;
    gap: 56px;
    align-items: center;
}

/* ---------- B1. Header ---------------------------------------------------- */
/* Inherited rule sets rgba(244, 246, 248,0.95) — a white bar on a black page. */
/* #header, not `header` — see the note on the inherited rule. */

#header {
    background: rgba(5, 7, 10, 0.92);
    border-bottom: 1px solid transparent;
}

#header.scrolled { border-bottom-color: var(--brand-border); }

.logo-lockup {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.logo-lockup .sw-mark { --mark-size: 34px; }

.logo-text { display: flex; flex-direction: column; gap: 7px; line-height: 1; }

.logo-wordmark {
    font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: 25px;
    font-weight: 400;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: var(--text-primary);
    line-height: 1.05;
}

.logo-subtitle {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.09em;
    color: var(--brand-bright);
    line-height: 1.3;
}

.main-nav a { color: var(--text-secondary); }

.main-nav a:hover { color: var(--brand-bright); }

.menu-toggle span { background: var(--text-primary); }

@media (max-width: 720px) {.logo-wordmark { font-size: 20px; }

.logo-subtitle { display: none; }

.logo-lockup .sw-mark { --mark-size: 28px; }
}

/* ---------- B2. Buttons --------------------------------------------------- */
/* Inherited .btn-primary is --brand-primary with white text: 4.3:1, under AA
   for a 15px label. The cover's own logic fixes it — bright green is the
   read/click colour, so invert to dark text on bright green (8.1:1). */

.btn-primary {
    background: var(--brand-bright);
    color: var(--bg);
    font-weight: 600;
}

.btn-primary:hover { background: var(--brand-pale); color: var(--bg); }

.btn-secondary {
    background: transparent;
    color: var(--brand-bright);
    border: 1px solid var(--brand-border);
}

.btn-secondary:hover { border-color: var(--brand-bright); }

/* ---------- B3. Hero ------------------------------------------------------ */

.home-hero { background: var(--bg); padding: 190px 0 96px; }

.home-hero h1 { font-size: clamp(38px, 5.4vw, 62px); line-height: 1.04; }

.home-hero .hero-subtitle {
    font-size: 19px;
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 680px;
    margin: 0 auto 36px;
}

.hero-actions { margin-top: 9px; }

/* ---------- B4. Category -------------------------------------------------- */

.home-category { padding: 88px 0; background: var(--bg-raised); }

.home-category h2 {
    font-size: clamp(28px, 3.4vw, 40px);
    margin-bottom: 28px;
    max-width: 760px;
    line-height: 1.15;
}

.home-category p {
    font-size: 18px;
    line-height: 1.75;
    color: var(--text-secondary);
    max-width: 760px;
    margin-bottom: 20px;
}

.home-category strong { color: var(--text-primary); font-weight: 600; }

/* ---------- B5. The four shapes ------------------------------------------- */
/* Laid out 2x2 to echo the mark. The fourth card carries the mark's empty
   quadrant: Type 4 is the one no per-row check catches, so the layout makes
   the argument the copy is making. */

.home-types { padding: 88px 0; background: var(--bg); }

.home-types h2 {
    font-size: clamp(28px, 3.4vw, 40px);
    margin-bottom: 48px;
    max-width: 820px;
    line-height: 1.15;
}

.type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--brand-primary);   /* the gap becomes the mark's rule */
    border: 1px solid var(--brand-primary);
}

.type-card { padding: 36px 32px; background: var(--bg-panel); border: 0; }

.type-card:last-child { background: var(--bg); }

.type-number {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--brand-bright);
    margin-bottom: 16px;
    line-height: 1;
}

.type-card h3 {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-bottom: 12px;
    line-height: 1.35;
}

.type-card p { font-size: 15px; line-height: 1.7; color: var(--text-secondary); }

.type-footnote {
    margin-top: 36px;
    font-size: 17px;
    line-height: 1.75;
    color: var(--text-secondary);
    max-width: 780px;
}

.type-footnote a { color: var(--brand-bright); }

/* ---------- B6. Essays ---------------------------------------------------- */

.home-essays { padding: 88px 0; background: var(--bg-raised); }

.home-essays h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 28px; }

.essay-list { list-style: none; padding: 0; max-width: 780px; }

.essay-list li { padding: 20px 0; border-bottom: 1px solid var(--border-light); }

.essay-list a {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 18px;
    line-height: 1.5;
    color: var(--text-primary);
    text-decoration: none;
}

.essay-list a:hover { color: var(--brand-bright); }

/* Marker sits in --brand-primary (structure) and rides currentColor up to the
   bright green with the title on hover, so the row reads as one object. */
.essay-icon {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 4px;
    color: var(--brand-primary);
}

.essay-list a:hover .essay-icon { color: inherit; }

/* ---------- B7. Footer ---------------------------------------------------- */

body > footer { background: var(--bg); border-top: 1px solid var(--brand-border); padding: 56px 0 40px; }

.footer-column-title {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--brand-bright);
}

.footer-column-links a { color: var(--text-secondary); }

.footer-column-links a:hover { color: var(--text-primary); }

.footer-text,
.footer-legal { color: var(--text-tertiary); font-size: 13px; }

/* ---------- B8. 404 ------------------------------------------------------- */

.error-page { background: var(--bg); }

.error-code { color: var(--brand-bright); }

.error-headline { color: var(--text-primary); }

.error-message { color: var(--text-secondary); }

/* ---------- Responsive ---------------------------------------------------- */

@media (max-width: 768px) {.home-hero { padding: 140px 0 64px; }

.home-category,
.home-types,
.home-essays { padding: 56px 0; }

.type-grid { grid-template-columns: 1fr; }

.book-panel { grid-template-columns: 1fr; gap: 32px; }

.book-cover { max-width: 220px; }
}

/* ---------- B3b. Hero leads with the object ------------------------------- */
/* The inherited .home-hero centres its text. With the cover beside it that is
   wrong — the panel is a two-column lockup, so the text left-aligns to it. */

.home-hero { text-align: left; }

.home-hero .book-panel { align-items: center; }

.home-hero h1 { max-width: none; margin-left: 0; margin-right: 0; }

.home-hero .hero-subtitle { margin-left: 0; margin-right: 0; }

@media (max-width: 768px) {.home-hero { text-align: center; }

.home-hero .book-figure { justify-self: center; }

.home-hero .hero-subtitle { margin-left: auto; margin-right: auto; }
}

/* ---------- B2b. Button sizing ------------------------------------------- */
/* Upstream .hero-cta is a BUTTON class, not a wrapper — a div using it picks up
   the fill and stretches. The wrapper here is .hero-actions, which carries no
   appearance of its own; the button is a normal inline-block .btn-primary. */

.hero-actions { display: block; }

.btn-primary,
.btn-secondary {
    display: inline-block;
    width: auto;
    padding: 13px 26px;
    font-size: 15px;
    border-radius: 4px;
}

/* ---------- C. Article pages ---------------------------------------------- */
/* Long-form reading on a dark page: a narrow measure, generous leading, and
   secondary grey for body copy — --text-primary at full weight over 2,000
   words is fatiguing on near-black. */

.article-page { padding: 170px 0 96px; background: var(--bg); }

.article-page .container { max-width: 760px; }

.article-meta-top {
    display: flex;
    gap: 16px;
    align-items: baseline;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 26px;
}

.article-category { color: var(--brand-bright); }

.article-date { color: var(--text-tertiary); }

.article-title {
    font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(32px, 4.4vw, 46px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: 24px;
}

.article-excerpt {
    font-size: 20px;
    line-height: 1.6;
    color: var(--text-secondary);
    padding-bottom: 36px;
    border-bottom: 1px solid var(--brand-border);
}

.article-content { padding-top: 36px; }

.article-content p {
    font-size: 18px;
    line-height: 1.78;
    color: var(--text-secondary);
    margin-bottom: 26px;
}

.article-content strong { color: var(--text-primary); font-weight: 600; }

.article-content em { color: var(--text-secondary); }

.article-content a {
    color: var(--brand-bright);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.article-content code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.87em;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    color: var(--brand-pale);
}

.article-content h2 {
    font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(24px, 3vw, 30px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 52px 0 22px;
}

.article-content h3 {
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 40px 0 16px;
}

/* Lists keep the framework's 16px body size while the paragraphs either side of
   them are 18px, so a list reads as fine print next to the copy it belongs to.
   No page used a list until /what-is-silent-wiring/, which is why this never
   surfaced: the inherited defaults are only wrong once something reaches them. */

.article-content ul,
.article-content ol { margin: 0 0 26px 22px; }

.article-content li {
    font-size: 18px;
    line-height: 1.78;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.article-content li::marker { color: var(--brand-primary); }

.article-content li strong { color: var(--text-primary); font-weight: 600; }

/* Section rules echo the mark's rule weight rather than a generic grey line. */
.article-rule {
    border: 0;
    height: 1px;
    background: var(--brand-border);
    margin: 44px 0;
}

/* The author's italic pull-lines — a question left hanging at a section end.
   Set apart with a green edge so they read as an aside, not as body copy. */
.article-callout {
    margin: 32px 0;
    padding: 4px 0 4px 20px;
    border-left: 2px solid var(--brand-primary);
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-primary);
    font-style: italic;
}

.article-footer { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--border-light); }

.back-link {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    color: var(--brand-bright);
    text-decoration: none;
}

.back-link:hover { text-decoration: underline; }

/* ---------- C2. Field Notes listing --------------------------------------- */

.articles-hero { padding: 170px 0 40px; background: var(--bg); }

.articles-hero h1 {
    font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(34px, 4.4vw, 50px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.articles-hero .subtitle {
    font-size: 19px;
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 640px;
    margin-top: 18px;
}

.note-list-section { padding: 48px 0 88px; background: var(--bg); }

/* An ordered list, not a grid. The previous grid painted --brand-primary as its
   own background so the 2px gaps read as rules — which works only when every
   cell is filled. With an odd number of notes the empty cell became a green
   slab. Borders on the cards give the same rule weight and cannot leave one. */
.note-list { list-style: none; margin: 0; padding: 0; max-width: 860px; }

.note-card { margin-bottom: 20px; }

.note-link {
    display: block;
    padding: 38px 36px;
    background: var(--bg-panel);
    border: 1px solid var(--brand-border);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.note-link:hover { border-color: var(--brand-primary); background: var(--bg-raised); }

.note-meta {
    display: flex;
    gap: 16px;
    align-items: baseline;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* A quiet mono label, not a filled pill — the inherited .category-tag rendered
   as a green button, which read as the primary action on the page. */
.category-tag {
    background: none;
    padding: 0;
    border-radius: 0;
    color: var(--brand-bright);
    font-weight: 500;
}

.date { color: var(--text-tertiary); }

.note-title {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(21px, 2.4vw, 26px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    margin-bottom: 14px;
}

.note-link .excerpt {
    display: block;
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 68ch;
    margin-bottom: 20px;
}

.note-link .read-link {
    display: inline-block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    color: var(--brand-bright);
}

.articles-cta { padding: 72px 0 96px; background: var(--bg-raised); text-align: center; }

.articles-cta h2 {
    font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.15;
    color: var(--text-primary);
    margin-bottom: 14px;
}

.articles-cta p {
    font-size: 17px;
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto 28px;
}

.cta-button {
    display: inline-block;
    padding: 13px 26px;
    border-radius: 4px;
    background: var(--brand-bright);
    color: var(--bg);
    font-weight: 600;
    text-decoration: none;
}

.cta-button:hover { background: var(--brand-pale); }

@media (max-width: 768px) {.article-page { padding: 130px 0 64px; }

.articles-hero { padding: 130px 0 28px; }

.article-content p,
.article-callout { font-size: 17px; }

.note-link { padding: 26px 22px; }

.articles-cta { padding: 56px 0 72px; }
}

/* ---------- D. The Book --------------------------------------------------- */

.book-hero { padding: 170px 0 88px; background: var(--bg); }

.book-hero .book-panel { grid-template-columns: minmax(220px, 330px) 1fr; gap: 64px; align-items: start; }

.book-intro h1 {
    font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(40px, 5.4vw, 64px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.book-subtitle {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--brand-bright);
    margin-bottom: 32px;
}

.book-lede {
    font-size: 18px;
    line-height: 1.75;
    color: var(--text-secondary);
    margin-bottom: 20px;
    max-width: 62ch;
}

/* Product facts, not performance claims — length, shape, how much code. */
.book-facts {
    list-style: none;
    padding: 24px 0 0;
    margin: 12px 0 0;
    border-top: 1px solid var(--brand-border);
    display: flex;
    flex-wrap: wrap;
    gap: 36px;
}

.book-facts li { display: flex; flex-direction: column; gap: 4px; }

.fact-value {
    font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: 26px;
    line-height: 1;
    color: var(--text-primary);
}

.fact-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.book-availability { padding: 80px 0; background: var(--bg-raised); }

.book-availability h2,
.book-contents h2,
.book-audience h2 {
    font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: 24px;
    max-width: 780px;
}

.book-availability p,
.book-audience p {
    font-size: 18px;
    line-height: 1.75;
    color: var(--text-secondary);
    max-width: 72ch;
    margin-bottom: 18px;
}

.book-availability strong,
.book-audience strong { color: var(--text-primary); font-weight: 600; }

.book-availability .btn-primary { margin-top: 16px; }

.book-contents { padding: 80px 0; background: var(--bg); }

.contents-intro {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    color: var(--text-tertiary);
    margin-bottom: 40px;
}

.toc { display: grid; gap: 2px; background: var(--brand-primary); border: 1px solid var(--brand-primary); }

.toc-part { background: var(--bg-panel); padding: 32px; }

.toc-part-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--brand-bright);
    margin-bottom: 12px;
}

.toc-part-note { font-size: 15px; line-height: 1.65; color: var(--text-tertiary); margin-bottom: 16px; max-width: 72ch; }

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

.toc-list li {
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    padding: 9px 0;
    border-bottom: 1px solid var(--border-light);
    max-width: 78ch;
}

.toc-list li:last-child { border-bottom: 0; }

.toc-list code { color: var(--brand-pale); }

.book-audience { padding: 80px 0 96px; background: var(--bg-raised); }

@media (max-width: 768px) {.book-hero { padding: 130px 0 56px; }

.book-hero .book-panel { grid-template-columns: 1fr; gap: 32px; }

.book-availability,
.book-contents,
.book-audience { padding: 56px 0; }

.book-facts { gap: 24px; }

.toc-part { padding: 24px 20px; }
}

/* ---------- E. About ------------------------------------------------------ */

.about-page { padding: 170px 0 96px; background: var(--bg); }

.about-page .container { max-width: 760px; }

.about-header { padding-bottom: 36px; border-bottom: 1px solid var(--brand-border); margin-bottom: 36px; }

.about-header h1 {
    font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(34px, 4.4vw, 48px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

@media (max-width: 768px) {.about-page { padding: 130px 0 64px; }
}

/* ---------- E2. Launch-notify capture ------------------------------------- */
/* The only form on the site. It sits inside .book-availability, directly after
   the admission that the book is not out, because that is the one moment the
   reader has the question it answers.

   Styled DELIBERATELY QUIET: a panel and a rule, no accent fill, no shadow, no
   attention-seeking. The site's job is credibility, and a capture box that
   shouts is the exact thing that makes a reader reclassify the book as
   marketing collateral. It should read as a utility the page offers, not as a
   conversion device the page wants. */

.notify {
    margin-top: 48px;
    padding: 32px;
    background: var(--bg);
    border: 1px solid var(--brand-border);
    max-width: 620px;
}

.notify-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.notify-text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.notify-row { display: flex; gap: 12px; flex-wrap: wrap; }

.notify-input {
    flex: 1 1 240px;
    min-width: 0;
    padding: 12px 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    color: var(--text-primary);
    background: var(--bg-panel);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
}

.notify-input::placeholder { color: var(--text-tertiary); }

.notify-input:focus {
    outline: 2px solid var(--brand-bright);
    outline-offset: 1px;
    border-color: var(--brand-bright);
}

.notify-button { flex: 0 0 auto; }

.notify-fine {
    margin-top: 16px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-tertiary);
}

/* The label is real and stays in the accessibility tree. A placeholder is not
   a label: it vanishes on the first keystroke and screen readers treat it as a
   hint, not a name. */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 560px) {.notify { padding: 24px 20px; }

.notify-button { flex: 1 1 100%; }
}

/* ---------- F. Canonical explainer ---------------------------------------- */
/* /what-is-silent-wiring/. Reuses the field-note reading treatment wholesale,
   so the only new component here is the definition panel. It carries the one
   sentence a search result should lift, which is also the one sentence a
   reader must not be able to scroll past. Green edge, panel surface, and the
   body's --text-primary rather than the secondary grey used for long copy. */

.sw-definition {
    margin: 0 0 32px;
    padding: 28px 32px;
    background: var(--bg-panel);
    border: 1px solid var(--brand-primary);
}

.sw-definition-term {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-bright);
    margin-bottom: 14px;
}

.article-content .sw-definition-text {
    font-size: 19px;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 0;
}

/* ---------- F2. The verification matrix ----------------------------------- */
/* The 2x2 on /what-is-silent-wiring/. Three quadrants occupied, the fourth
   empty, which is the argument the surrounding paragraph makes in prose.

   It deliberately does NOT reuse .sw-mark. The cover glyph is committed to one
   meaning (three wires carrying, one silent) and its quadrants are wires; these
   quadrants are verification categories. Same shape, different referents, so
   putting the mark here would invite a reader to map one onto the other and
   find no answer. The geometry rhymes; the mark stays out of it. */

.sw-matrix-figure { margin: 0 0 30px; }

.sw-matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.sw-matrix {
    width: 100%;
    min-width: 480px;
    border-collapse: separate;
    border-spacing: 2px;          /* the gutter becomes the mark's rule */
    background: var(--brand-primary);
    text-align: left;
}

/* Axis labels sit on the page colour so they read as labels around the field
   rather than as a fifth and sixth cell inside it. */
.sw-matrix th {
    background: var(--bg);
    padding: 12px 14px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    vertical-align: bottom;
    white-space: nowrap;
}

.sw-matrix th[scope="row"] { vertical-align: middle; width: 1%; }

.sw-matrix-corner { background: var(--bg); }

.sw-matrix-cell {
    background: var(--bg-panel);
    padding: 20px 18px;
    vertical-align: top;
}

/* The empty quadrant, and it is genuinely empty. No label, no "nothing here",
   no placeholder. The absence is the content, which is the same move the cover
   glyph makes and the same move .type-card:last-child makes on the homepage.
   Anything written in it would be an explanation standing where the argument
   should be. The paragraph underneath does the explaining.

   min-height keeps it from collapsing if it is ever the only cell in its row. */
.sw-matrix-cell.is-empty { background: var(--bg); min-height: 84px; }

.sw-matrix-name {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
}

.sw-matrix-note {
    display: block;
    margin-top: 7px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.sw-matrix-figure figcaption {
    padding-top: 14px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-tertiary);
}

@media (max-width: 560px) {.sw-matrix-cell { padding: 16px 14px; }

.sw-matrix th { font-size: 10.5px; padding: 10px; }
}

/* Reference table. Fresh namespace on purpose: the inherited stylesheet carries
   twenty-odd .*-table classes from CleanAim pages, all tuned for a white
   background. None of them are reused here. The gap between rows is the mark's
   green rule, the same device the homepage type-grid uses. */

.sw-table-scroll {
    overflow-x: auto;
    margin: 0 0 30px;
    -webkit-overflow-scrolling: touch;
}

.sw-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    border: 1px solid var(--brand-border);
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
}

.sw-table caption {
    caption-side: bottom;
    padding-top: 14px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-tertiary);
    text-align: left;
}

.sw-table th {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-bright);
    background: var(--bg-panel);
    padding: 14px 18px;
    border-bottom: 1px solid var(--brand-primary);
    vertical-align: bottom;
}

.sw-table td {
    padding: 16px 18px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-light);
    vertical-align: top;
}

.sw-table tr:last-child td { border-bottom: 0; }

.sw-table td:first-child { color: var(--text-primary); font-weight: 600; }

/* Auto layout hands the first column whatever its longest cell wants, which on
   a 700px measure starves the other three and wraps their headers mid-phrase.
   Fixed layout plus declared widths keeps the label column narrow and gives the
   reading columns room. Widths are on the header row only; cells inherit. */
.sw-table { table-layout: fixed; }

.sw-table th:nth-child(1) { width: 26%; }

.sw-table th:nth-child(2) { width: 20%; }

.sw-table th:nth-child(3) { width: 27%; }

.sw-table th:nth-child(4) { width: 27%; }

.sw-table code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.87em;
    color: var(--brand-pale);
}

.explainer-cta {
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid var(--brand-border);
}

.explainer-cta h2 {
    font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(24px, 3vw, 30px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.explainer-cta p {
    font-size: 18px;
    line-height: 1.75;
    color: var(--text-secondary);
    margin-bottom: 26px;
}

.explainer-cta em { color: var(--text-primary); }

@media (max-width: 768px) {.sw-definition { padding: 22px 20px; }
}

/* ---------- G. Contact block (/privacy/, later /terms/) ------------------- */
/* Rendered from page.contact, which is the same object build.js checks before
   it will build the page at all. One source, so the named controller on the
   page can never drift from the one the guard verified. */

.page-contact {
    margin-top: 56px;
    padding-top: 36px;
    border-top: 1px solid var(--brand-border);
}

.page-contact h2 {
    font-family: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(22px, 2.6vw, 27px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.page-contact p {
    font-size: 18px;
    line-height: 1.78;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.contact-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 28px;
    padding: 24px 28px;
    background: var(--bg-panel);
    border-left: 2px solid var(--brand-primary);
    font-style: normal;          /* <address> italicises by default */
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.contact-entity { color: var(--text-primary); font-weight: 600; }

.contact-block a {
    color: var(--brand-bright);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==============================================================
   SCOPED OVERRIDES  —  .sw
   The last block in this file. Nothing may be appended after it.

   WHY THIS EXISTS. This stylesheet is inherited from the CleanAim
   fork and roughly 292 of its rules style pages that never existed
   here: problems-hero, solutions-hero, proof-hero, diagnostic-hero,
   pillar-*, verifiable-ai-*, compliance-hero, industry-hero,
   codearch. Most match nothing. The dangerous ones are the grouped
   and wildcard selectors that sweep up classes this site DOES
   render: `.page-hero`, `[class*="page-hero"]`, `[class*="-hero"]`.

   In one afternoon those rules produced four separate visible
   defects on four pages, none of which any gate could see, because
   the gates read what a page SAYS and whether its links resolve.
   Nothing checks whether a page renders with a quarter of a screen
   of nothing in it, or whether a headline is painted a colour §1
   forbids for text.

   THE PATTERN. `.sw` is on <body> in base.html. Prefixing with it
   buys one class of specificity over any bare-class inherited rule,
   and this block sits last, so ties resolve here too. That is the
   whole mechanism: assert the site's real values in ONE place, at
   the end, scoped, instead of patching wherever the last screenshot
   pointed.

   TWO THINGS THIS IS NOT. It is not a deletion: the dead rules are
   still in the file and still cost bytes. And it is not automatic —
   a NEW page type that adopts an inherited class name will be
   reached again, and its values belong here, not in a patch further
   up. If you find yourself adding a fix above this block, you are
   about to repeat the afternoon this block was written to end.
   ============================================================== */

/* --- The standard template's page shell --- */

.sw .page-content {
    /* Clears the fixed #header (~98px: a 50px logo block plus 24px
       top and bottom). Enough air to breathe, not the 160px + the
       hero's own inherited 180px that used to stack here. */
    padding: 132px 0 80px;
}

.sw .page-content .page-hero {
    /* Inherited L~10365 makes every *-hero a full-bleed section at
       `padding: 180px 0 120px`. Here .page-hero is a heading BLOCK
       inside an already-padded container, so it carries none of its
       own. */
    padding: 0;
    margin-bottom: 32px;
    background: none;
    text-align: left;
}

/* --- The eyebrow. Match the site, not the fork. --- */

.sw .page-content .page-hero .section-label {
    /* The fork paints this 12px/600/0.1em in --text-tertiary. Every
       other section-label on this site is 14px/500/0.14em in
       --brand-bright. Four pages were quietly the odd ones out. */
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-bright);
    margin-bottom: 16px;
}

/* --- The headline. This one breaks a stated rule. --- */

.sw .page-content .page-hero h1 {
    /* Inherited L~10425 paints h1 --brand-primary, which §1 reserves
       for STRUCTURE ONLY and forbids for text at 4.7:1. L11558 had
       already ruled on it in as many words: "NOT --brand-primary: on
       a dark page a green headline reads as a link." The fork was
       overriding that ruling on exactly the pages using .page-hero.

       Note that the §6 colour grep cannot catch this. It looks for
       hex literals outside :root, and no literal is involved — the
       WRONG TOKEN is. A token used against its stated job is the
       same defect shape as two true facts with the wrong one
       attached, and nothing checks for it. */
    color: var(--text-primary);
    font-size: clamp(32px, 4vw, 48px);
    margin-bottom: 16px;
}

/* --- The subtitle. Read the selector before changing it. --- */

.sw .page-content .page-hero p.page-subtitle {
    /* The inherited rule is
         .page-hero p:not(.section-label):not(.hero-subtitle)
       and :not() counts its ARGUMENT toward specificity, so that is
       (0,3,1), not the (0,1,1) it looks like. A first attempt at
       `.page-content .page-hero .page-subtitle` is (0,3,0) and lost
       silently: the CSS shipped, the source read correctly, and the
       32px gap stayed on the page.

       `.sw ... p.page-subtitle` is (0,4,1) and wins outright. If you
       weaken this selector, measure the gap afterwards rather than
       trusting that it reads right. */
    font-size: 20px;
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* --- The two closing blocks, made one object --- */

.sw .page-content .page-footer-cta {
    /* .cta-box is a card inside .content-main, capped at 720px.
       .page-footer-cta sat outside the grid and spanned the full
       1120px container as a bordered band with no background. Same
       page, two widths, two treatments, stacked directly on top of
       each other. Now the same object. */
    max-width: 720px;
    margin: 48px 0 0;
    padding: 32px;
    background: var(--bg-accent);
    border-radius: 8px;
    border-top: none;
    text-align: center;
}

.sw .page-content .page-footer-cta h2 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 24px;
}