/* ===========================================
   SITE TEMPLATE - Main Stylesheet
   Everything brand-specific is a CSS variable in the two token blocks
   below (light + dark). Change the tokens, leave the components alone.
   =========================================== */

/* --- CSS VARIABLES (LIGHT THEME) ---
   Retheme: ADR-001 "North Woods Field Office" (see _warroom/DECISIONS).
   Token NAMES are unchanged from the template on purpose — pages already
   reference them — only values change. New tokens (--color-primary-strong,
   --color-btn-ink, --color-secondary, --font-family-heading) are additive. */
:root {
    /* Brand colors (light theme) */
    --color-primary: #24513F;          /* evergreen: headings, links, outlines */
    --color-primary-strong: #17382D;   /* deep pine: hero/button/footer backgrounds */
    --color-accent: #D4933F;           /* campfire gold: CTA fill, small highlights */
    --color-accent-hover: #E3AA60;     /* brighter gold hover/glow */
    --color-btn-ink: #17231E;          /* dark ink for text on gold — never white on gold */
    --color-secondary: #4A7180;        /* prairie blue: map/UI accents, used sparingly */
    --color-hover: #193D30;            /* hover pine */
    --focus-ring: rgba(36, 81, 63, 0.15); /* translucent version of --color-primary */

    /* Neutrals — warm paper canvas, tinted toward the brand */
    --color-bg: #F3F0E6;               /* warm paper background */
    --color-surface: #FFFDF7;          /* cards/surfaces */
    --color-surface-2: #E6E7DC;        /* quiet section bands */
    --color-text: #17231E;             /* body text */
    --color-muted: #56635C;            /* secondary text — must pass AA on --color-bg */
    --color-border: #C8CBBE;           /* card/rule edges */
    --color-success: #2f8a4e;
    --color-error: #c0392b;

    /* Gradient endpoints for hero and footer. These are fixed brand pine
       tones, not theme-relative shades of --color-primary, so they do not
       change between light/dark mode (dark ink text rules do not apply in
       either section — hero/footer text is always light on deep pine). */
    --color-hero-start: #214C3B;
    --color-hero-end: #102E2A;
    --color-footer-start: #17382D;
    --color-footer-end: #0D2823;

    /* Fixed "map status" trio (T-202): the same paid/due/open swatches as
       the homepage atlas markers (.atlas-site--paid/--due/--open), reused
       as decorative status marks on inner-page ledger/plat components.
       Fixed brand tones, not theme-relative, so a status reads the same in
       light/dark — white ink on all three was AA-checked with the T-201
       atlas markers (lowest pair 4.73:1) and that pairing is reused as-is. */
    --status-paid: #24513F;
    --status-due: #A5641E;
    --status-open: #4A7180;
    --status-ink: #ffffff;

    /* Typography: slab serif for display/headings, system sans for body/UI,
       monospace reserved for site numbers/status chips only. */
    --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    --font-family-heading: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', Georgia, serif;
    --font-family-mono: SFMono-Regular, Consolas, 'Liberation Mono', monospace;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-xxl: 4rem;

    /* Layout — property-sheet cards run 10-12px radius per ADR-001 */
    --container-width: 1140px;
    --border-radius: 10px;
    --border-radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(23, 35, 30, 0.07), 0 2px 6px rgba(23, 35, 30, 0.06);
    --shadow: 0 6px 18px rgba(23, 35, 30, 0.10);
    --shadow-lg: 0 16px 40px rgba(23, 35, 30, 0.16);
}

/* --- CSS VARIABLES (DARK THEME) --- */
[data-theme="dark"] {
    /* Brand colors (dark theme) — ADR-001 dark palette. --color-btn-ink stays
       dark ink in both themes: the gold CTA fill never gets white text. */
    --color-primary: #91C7A8;
    --color-primary-strong: #214C3B;
    --color-accent: #E3AA60;
    --color-accent-hover: #F0BC74;
    --color-btn-ink: #17231E;
    --color-secondary: #7FA8B4;
    --color-hover: #A8D6BB;
    --focus-ring: rgba(145, 199, 168, 0.22);

    --color-bg: #101915;               /* deep pine canvas, not flat black */
    --color-surface: #18251F;
    --color-surface-2: #1E3028;
    --color-text: #EEF1E9;
    --color-muted: #B0BDB5;            /* must pass AA on dark surfaces */
    --color-border: #354B40;
    --color-success: #4cbf78;
    --color-error: #e0685b;

    /* Hero/footer gradients are fixed brand pine tones (see :root) and are
       intentionally NOT overridden here — same gradient, both themes, no
       layout shift, no color shift. */

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
}

/* Dark mode specific adjustments */
[data-theme="dark"] .section-dark {
    background: var(--color-hero-end);
}

[data-theme="dark"] .feature {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .btn-secondary {
    background: var(--color-surface);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Code blocks need a visible edge against the dark background */
[data-theme="dark"] .blog-content pre {
    border: 1px solid #3a464e;
}

/* --- GLOBAL RESET & BASE STYLES --- */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    line-height: 1.65;
    color: var(--color-text);
    background-color: var(--color-bg);
    margin: 0;
    padding: 0;
    font-size: 18px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* --- TYPOGRAPHY --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    color: var(--color-primary);
    line-height: 1.15;
    font-weight: 700;
    margin-top: 0;
}

h1 { font-size: clamp(2.4rem, 5vw, 4.6rem); margin-bottom: var(--space-lg); }
h2 { font-size: clamp(1.8rem, 3vw, 3rem); margin-bottom: var(--space-md); }
h3 { font-size: 1.35rem; margin-bottom: var(--space-sm); }
h4 { font-size: 1.25rem; margin-bottom: var(--space-sm); }

h1, h2 {
    letter-spacing: -0.01em;
}

p {
    margin: 0 0 var(--space-md) 0;
    line-height: 1.7;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover {
    /* Not --color-accent: gold text fails AA on the light-theme paper
       background. --color-hover stays a dark-ink/light-mint pair that
       passes AA in both themes (see requirement 9 / AA contrast pass). */
    color: var(--color-hover);
}

ul, ol {
    margin: 0 0 var(--space-md) 0;
    padding-left: var(--space-lg);
}

li {
    margin-bottom: var(--space-xs);
    line-height: 1.6;
}

/* --- HEADER --- */
header {
    background: var(--color-surface);
    border-bottom: 2px solid var(--color-border);
    padding: var(--space-md) 0;
    box-shadow: var(--shadow-sm);
    transition: padding 0.3s ease;
    position: sticky;
    top: 0;
    z-index: 1001;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
}

.header-controls {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo {
    font-family: var(--font-family-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0;
    display: block;
    /* Bug fix: at wide-but-not-quite-desktop widths (the 7-item nav gets
       tight well before the mobile breakpoint), flexbox would let this
       item's automatic min-width collapse toward 0 rather than let the
       nav overflow/wrap, making the wordmark disappear. Pin it. */
    flex-shrink: 0;
    min-width: max-content;
}

/* Site Logo - image based with dark mode support.
   Bug fix (see .logo above): height is a DEFINITE value with width:auto,
   not max-height+height:auto+width:auto. The logo SVGs only carry a
   viewBox (no root width/height), and the triple-auto/max-height pattern
   fails to resolve a used size for that case in some engines, collapsing
   the logo to 0x0 — reproduced and confirmed via direct measurement before
   this fix, independent of any flex-shrink/nav-squeeze behavior. A
   definite height reliably derives width from the image's own ratio. */
.site-logo {
    height: 85px;
    width: auto;
    display: block;
    transition: height 0.3s ease, opacity 0.3s ease;
}

.site-logo--dark {
    display: none;
}

:root[data-theme="light"] .site-logo--light {
    display: block;
}

:root[data-theme="light"] .site-logo--dark {
    display: none;
}

:root[data-theme="dark"] .site-logo--light {
    display: none;
}

:root[data-theme="dark"] .site-logo--dark {
    display: block;
}

header nav {
    min-width: 0;
}

header nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: var(--space-xs);
    column-gap: var(--space-lg);
}

header nav li {
    margin: 0;
}

header nav a {
    font-weight: 500;
    color: var(--color-text);
    padding: var(--space-xs) 0;
    position: relative;
    transition: color 0.2s ease;
}

header nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: width 0.3s ease;
}

header nav a:hover,
header nav a.active {
    color: var(--color-primary);
}

header nav a:hover::after,
header nav a.active::after {
    width: 100%;
}

/* --- BREADCRUMBS --- */
.breadcrumbs {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-sm) 0;
    font-size: 0.875rem;
}

.breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.breadcrumbs li {
    display: flex;
    align-items: center;
    margin: 0;
}

.breadcrumbs li:not(:last-child)::after {
    content: '›';
    margin-left: 0.5rem;
    color: var(--color-muted);
    font-size: 1.1rem;
}

.breadcrumbs a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumbs a:hover {
    color: var(--color-hover);
    text-decoration: underline;
}

.breadcrumbs li:last-child span {
    color: var(--color-muted);
}

.mobile-nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.75rem;
    color: var(--color-primary);
    cursor: pointer;
    padding: 0.5rem;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Dark Mode Toggle */
.theme-toggle {
    background: none;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--color-text);
    font-size: 1.25rem;
    margin-left: var(--space-md);
    -webkit-tap-highlight-color: transparent;
}

.theme-toggle:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-surface);
    transform: rotate(180deg);
}

.theme-toggle-icon {
    line-height: 1;
    pointer-events: none;
}

/* --- FOOTER --- */
footer {
    background: linear-gradient(135deg, var(--color-footer-start) 0%, var(--color-footer-end) 100%);
    color: rgba(255, 255, 255, 0.85);
    padding: var(--space-xxl) 0 var(--space-xl);
    margin-top: var(--space-xxl);
    position: relative;
}

/* Subtle grid texture on the footer */
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
    opacity: 0.5;
}

footer .container {
    position: relative;
    z-index: 1;
}

.footer-grid {
    display: grid;
    /* footer.php has 4 direct .footer-col children (brand, Product, Company,
       Accounts) — 4 tracks, not 3, or the 4th wraps under the brand block. */
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-xl);
    text-align: left;
}

.footer-col p {
    margin: 0 0 var(--space-sm);
    opacity: 0.9;
}

.footer-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: var(--space-xs);
}

.footer-heading {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--space-sm);
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-col li {
    margin-bottom: var(--space-xs);
}

footer a {
    color: #ffffff;
    font-weight: 500;
    text-decoration: none;
    text-underline-offset: 3px;
}

footer a:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.footer-bottom {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
    font-size: 0.9rem;
}

.footer-bottom p {
    margin: var(--space-xs) 0;
    opacity: 0.8;
}

.footer-note {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.72;
}

.footer-legal a {
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.35);
}

/* Footer Social Links */
.footer-social {
    display: flex;
    gap: 0.75rem;
    margin-top: var(--space-sm);
    justify-content: flex-start;
}

.footer-social .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: all 0.3s ease;
}

.footer-social .social-link:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

.footer-social .social-icon {
    width: 18px;
    height: 18px;
    display: block;
    color: rgba(255, 255, 255, 0.9);
}

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

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        text-align: center;
    }
    .footer-social {
        justify-content: center;
    }
}

/* --- HERO SECTION --- */
.hero {
    background: linear-gradient(135deg, var(--color-hero-start) 0%, var(--color-hero-end) 100%);
    color: white;
    padding: calc(var(--space-xxl) + var(--space-md)) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Subtle grid pattern overlay */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
}

.hero .container {
    position: relative;
    z-index: 1;
}

.hero h1 {
    color: white;
    margin-bottom: var(--space-md);
    font-weight: 700;
}

.hero .tagline {
    font-size: 1.25rem;
    max-width: 750px;
    margin: 0 auto var(--space-xl);
    opacity: 0.95;
    line-height: 1.6;
}

/* Hero/dark-section eyebrow text needs to stay light against the deep pine
   background — see .eyebrow below for the default (light-surface) color. */
.hero .eyebrow,
.section-dark .eyebrow {
    color: rgba(255, 255, 255, 0.82);
}

/* --- PineRoster hero: 55/45 split, copy left / product art+screenshot
   right on desktop, copy-first stack on mobile (see RESPONSIVE). --- */
.hero--pineroster {
    text-align: left;
    padding: clamp(3rem, 6vw, 5.5rem) 0;
}

.hero--pineroster .tagline {
    margin: 0 0 var(--space-lg);
}

.hero-split {
    display: grid;
    grid-template-columns: 1.22fr 1fr; /* ~55/45 */
    align-items: center;
    gap: var(--space-xl);
    text-align: left;
}

.hero-copy {
    min-width: 0;
}

.hero-visual {
    min-width: 0;
}

/* Restrained custom background art behind the framed product screenshot */
.hero-art {
    border-radius: var(--border-radius-lg);
    background-size: cover;
    background-position: center;
    padding: var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sturdy off-white frame around the real product screenshot — no
   glassmorphism, just a clean property-sheet-style border and a restrained
   shadow so the map/UI proof reads as trustworthy, not decorative. */
.product-frame {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 10px;
    width: 100%;
}

.product-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--border-radius-lg) - 6px);
}

/* Compact muted trust row under the hero CTAs. Hero background is always
   the fixed dark-pine gradient (see :root), so this stays a light-on-dark
   treatment in both site themes. */
.trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-md);
    margin-top: var(--space-lg);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.78);
}

.trust-strip span {
    position: relative;
    padding-left: var(--space-md);
}

.trust-strip span:first-child {
    padding-left: 0;
}

.trust-strip span:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 4px;
    height: 4px;
    background: var(--color-accent);
}

/* Squared "map notch" signature detail: offset corner brackets in campfire
   gold, evoking a surveyed property corner. Offset-border technique (not
   clip-path) so it never clips a card's shadow. */
.map-notch {
    position: relative;
}

.map-notch::before,
.map-notch::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
}

.map-notch::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--color-accent);
    border-left: 2px solid var(--color-accent);
}

.map-notch::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 2px solid var(--color-accent);
    border-right: 2px solid var(--color-accent);
}

.cta-buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

.hero--pineroster .cta-buttons {
    justify-content: flex-start;
}

/* --- BUTTONS --- */
.btn {
    display: inline-block;
    padding: 0.875rem 2rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    line-height: 1.5;
}

/* Hard brand rule: gold fill always gets dark ink text — never white on
   gold. Hover brightens to --color-accent-hover with a small lift. */
.btn-primary {
    background: var(--color-accent);
    color: var(--color-btn-ink);
    border-color: var(--color-accent);
}

.btn-primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    color: var(--color-btn-ink);
}

.btn-primary:active {
    transform: translateY(0);
}

/* Secondary buttons: evergreen outline style, not a gray box. */
.btn-secondary {
    background: var(--color-surface);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-secondary:hover {
    background: var(--color-primary);
    color: var(--color-surface);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.btn-secondary:active {
    transform: translateY(0);
}

.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline:hover {
    background: var(--color-primary);
    color: var(--color-surface);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.btn-outline:active {
    transform: translateY(0);
}

/* Secondary buttons sitting on the hero or any dark section read as a clean
   ghost button instead of a washed-out gray box. */
.hero .btn-secondary,
.section-dark .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.6);
}

.hero .btn-secondary:hover,
.section-dark .btn-secondary:hover {
    background: #ffffff;
    color: var(--color-btn-ink);
    border-color: #ffffff;
}

/* Outline buttons on dark sections also need light borders/text */
.hero .btn-outline,
.section-dark .btn-outline {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.7);
}

.hero .btn-outline:hover,
.section-dark .btn-outline:hover {
    background: #ffffff;
    color: var(--color-btn-ink);
    border-color: #ffffff;
}

/* Subtle pixel corner detail on buttons. Tinted with dark ink on the gold
   primary button (never a white mark on gold) and light on the evergreen
   secondary button's fill. */
.btn-primary,
.btn-secondary {
    position: relative;
    overflow: hidden;
}

.btn-primary::before,
.btn-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.btn-primary::before {
    background: rgba(23, 35, 30, 0.2);
}

.btn-secondary::before {
    background: rgba(255, 255, 255, 0.35);
}

.btn-primary:hover::before,
.btn-secondary:hover::before {
    opacity: 1;
}

/* --- SECTIONS --- */
.section {
    padding: calc(var(--space-xxl) + var(--space-lg)) 0;
}

.section-title {
    text-align: center;
    margin-bottom: var(--space-md);
    color: var(--color-primary);
}

/* Accent rule under centered section titles */
.section-title::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    background: var(--color-accent);
    border-radius: 2px;
    margin: var(--space-sm) auto 0;
}

.section-subtitle {
    text-align: center;
    font-size: 1.15rem;
    color: var(--color-muted);
    max-width: 700px;
    margin: 0 auto var(--space-xl);
    line-height: 1.6;
}

.section-dark {
    background: var(--color-primary);
    color: white;
}

.section-dark h2,
.section-dark h3,
.section-dark h4 {
    color: white;
}

.section-dark p,
.section-dark li {
    color: rgba(255, 255, 255, 0.9);
}

.section-alt {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

/* --- SECTION ICONS --- */
.section-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: var(--space-sm);
    display: inline-block;
}

/* Short all-caps "eyebrow" label above section titles. Body sans, not
   monospace — the mono stack is reserved for site numbers/status chips.
   Text color is the AA-safe evergreen/light pair (see .hero .eyebrow /
   .section-dark .eyebrow above); the gold only appears as a small
   decorative marker, never as the text color on a light background. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    font-family: var(--font-family);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.eyebrow::before {
    content: '';
    flex-shrink: 0;
    width: 0.5em;
    height: 0.5em;
    background: var(--color-accent);
}

/* ========================================
   NORTH WOODS FIELD OFFICE COMPONENTS
   ADR-001 property-sheet card language: 10-12px radius, one-pixel border,
   restrained shadow. No glassmorphism, no gradient blobs. Placed ahead of
   the GRID SYSTEM block on purpose so utility classes like .grid-3 (used
   alongside .proof-grid on the homepage) win the column-count cascade.
   ======================================== */

/* The property-sheet card: the base "clean field-ledger card" used
   directly, and the visual language comparison-table/pricing-card/
   proof-grid build on. Sets its own text color explicitly (not inherited)
   because it is sometimes nested inside a permanently-dark .hero (see
   demo/index.php, about.php) — it must stay a light card with dark text
   there too, never picking up the hero's white-on-dark default. */
.property-sheet {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.property-sheet:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.property-sheet > :last-child {
    margin-bottom: 0;
}

.property-sheet summary {
    cursor: pointer;
    color: var(--color-primary);
    font-family: var(--font-family-heading);
}

.property-sheet summary::marker {
    color: var(--color-primary);
}

.property-sheet[open] summary {
    margin-bottom: var(--space-sm);
}

/* Grid of property-sheet cards used for proof points/features. Auto-fits
   on its own; pages that also apply the .grid-3 utility (index.php) get an
   exact 3-column layout on desktop from that utility instead. */
.proof-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-lg);
}

/* Product boundary comparison — either wraps a real <table> (features.php)
   or short status-chip lines inside a .card (index.php). Card look is
   built in here directly so the bare-div usage still reads as a
   property sheet. */
.comparison-table {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
    overflow-x: auto;
}

.comparison-table table {
    width: 100%;
    min-width: 420px;
    border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
    text-align: left;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.comparison-table thead th {
    font-family: var(--font-family-heading);
    color: var(--color-primary);
    background: var(--color-surface-2);
}

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

/* Single focal pricing card — same property-sheet language, more room to
   breathe since it usually carries the whole pricing section. */
.pricing-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    padding: var(--space-xl);
}

/* Monospace status pill (YES/NO-style) and site-number label. Monospace is
   reserved for exactly these two components per ADR-001 type rules. */
.status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6rem;
    padding: 0.15rem 0.55rem;
    margin-right: 0.5rem;
    border-radius: 999px;
    font-family: var(--font-family-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: var(--color-primary);
    color: var(--color-surface);
}

.status-chip--muted {
    background: var(--color-surface-2);
    color: var(--color-muted);
    border: 1px solid var(--color-border);
}

.site-number {
    display: block;
    font-family: var(--font-family-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    margin-bottom: 0.35rem;
}

/* Footer brand lockup: logo mark + short accounts-column copy + the demo
   CTA link. Footer background is the fixed deep-pine gradient (see
   :root), so these stay light-on-dark regardless of site theme. */
.footer-logo {
    max-height: 64px;
    width: auto;
    height: auto;
    display: block;
    margin-bottom: var(--space-sm);
}

.footer-small {
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: var(--space-sm);
}

.footer-demo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: var(--color-accent);
    transition: color 0.2s ease, transform 0.2s ease;
}

.footer-demo-link:hover {
    color: var(--color-accent-hover);
    transform: translateX(2px);
    text-decoration: underline;
}

@media (max-width: 640px) {
    .comparison-table table {
        min-width: 360px;
    }

    .pricing-card {
        padding: var(--space-lg);
    }
}

/* --- GRID SYSTEM --- */
.grid {
    display: grid;
    gap: var(--space-lg);
}

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

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

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* --- CARDS --- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: var(--space-lg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Quiet top accent on hover */
.card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-accent);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.card:hover::after {
    transform: scaleX(1);
}

.card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-md);
    color: var(--color-primary);
}

.card-icon svg {
    width: 100%;
    height: 100%;
}

.card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.card h3 {
    margin-bottom: var(--space-sm);
    color: var(--color-primary);
}

.card p {
    color: var(--color-muted);
    margin-bottom: var(--space-md);
}

.card ul {
    margin-bottom: 0;
}

.card-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-top: auto;
    margin-bottom: var(--space-xs);
}

.card-price small {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--color-muted);
}

/* --- FEATURES (TRUST BLOCKS ON DARK SECTIONS) --- */
.feature {
    background: rgba(255, 255, 255, 0.08);
    padding: var(--space-lg);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--color-accent);
}

.feature h3 {
    margin-bottom: var(--space-sm);
    color: white;
}

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-md);
}

.feature-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- FORMS --- */
.form-group {
    margin-bottom: var(--space-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: 500;
    color: var(--color-text);
    font-size: 0.95rem;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.75rem var(--space-sm);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    font-family: var(--font-family);
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-group input:focus-visible,
.form-group textarea:focus-visible,
.form-group select:focus-visible,
button:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--color-muted);
    opacity: 0.7;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Form microcopy */
.form-helper {
    font-size: 0.875rem;
    color: var(--color-muted);
    margin-top: var(--space-xs);
    font-style: italic;
    opacity: 0.8;
}

/* --- FAQ ITEMS --- */
.faq-item {
    margin-bottom: var(--space-lg);
}

.faq-item h3,
.faq-item h4 {
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

.faq-item p {
    color: var(--color-muted);
    margin-bottom: 0;
}

/* --- CONTACT INFO --- */
.contact-info {
    background: var(--color-surface);
    padding: var(--space-lg);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
}

.contact-info h3 {
    margin-top: 0;
    margin-bottom: var(--space-md);
}

.contact-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-info li {
    margin-bottom: var(--space-sm);
}

/* --- PROCESS STEPS --- */
.process-steps {
    max-width: 900px;
    margin: 0 auto;
}

.process-step {
    display: flex;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    align-items: flex-start;
}

.process-step:last-child {
    margin-bottom: 0;
}

.process-number {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    color: var(--color-btn-ink);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-family-heading);
    letter-spacing: 0;
}

.process-content h3 {
    margin-top: 0;
    margin-bottom: var(--space-xs);
}

.process-content p {
    margin: 0;
    color: var(--color-muted);
}

/* --- ALERTS (theme-aware) --- */
.alert {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--color-border);
    background: var(--color-surface-2);
    color: var(--color-text);
    margin-bottom: var(--space-lg);
}

.alert h3,
.alert h4 {
    margin: 0 0 var(--space-xs);
    color: inherit;
}

.alert p {
    margin: 0;
    color: inherit;
}

.alert-success { border-left-color: var(--color-success); }
.alert-error,
.alert-danger { border-left-color: var(--color-error); }
.alert-warning { border-left-color: var(--color-accent); }
.alert-note { border-left-color: var(--color-primary); }

/* --- UTILITY CLASSES --- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }

.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }

/* --- BACK TO TOP BUTTON --- */
.back-to-top {
    position: fixed;
    bottom: var(--space-lg);
    right: var(--space-lg);
    width: 50px;
    height: 50px;
    background: var(--color-primary);
    color: var(--color-surface);
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: var(--color-hover);
    transform: translateY(-4px);
}

.back-to-top:active {
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .back-to-top {
        bottom: var(--space-md);
        right: var(--space-md);
        width: 45px;
        height: 45px;
        font-size: 1.25rem;
    }
}

/* ========================================
   BLOG STYLES
   ======================================== */

/* Blog Post Page */
.blog-post {
    padding: var(--space-xxl) 0;
}

.blog-header {
    background: transparent;
    box-shadow: none;
    text-align: center;
    margin-bottom: var(--space-xxl);
    padding: 0 0 var(--space-lg);
    border-bottom: 2px solid var(--color-border);
}

.blog-meta {
    font-size: 0.9rem;
    color: var(--color-muted);
    margin-bottom: var(--space-sm);
}

.blog-intro {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--color-muted);
    margin-top: var(--space-md);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.blog-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text);
}

.blog-content > :first-child {
    margin-top: 0;
}

.blog-content h2 {
    margin-top: var(--space-xxl);
    margin-bottom: var(--space-md);
    color: var(--color-primary);
}

.blog-content h3 {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}

.blog-content p {
    margin-bottom: var(--space-md);
}

.blog-content ul,
.blog-content ol {
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
}

.blog-content li {
    margin-bottom: var(--space-xs);
}

.blog-content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: var(--focus-ring);
    text-underline-offset: 3px;
    transition: all 0.2s ease;
}

.blog-content a:hover {
    color: var(--color-hover);
    text-decoration-color: var(--color-hover);
}

.blog-content code {
    font-family: var(--font-family-mono);
    font-size: 0.92em;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.12rem 0.3rem;
    overflow-wrap: anywhere;
}

.blog-content pre {
    background: #18242b;
    color: #f5f7f8;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--space-md);
    margin: var(--space-lg) 0;
    overflow-x: auto;
    line-height: 1.55;
    box-shadow: var(--shadow-sm);
}

.blog-content pre code {
    display: block;
    color: inherit;
    background: transparent;
    border: 0;
    padding: 0;
    overflow-wrap: normal;
}

.blog-content blockquote {
    margin: var(--space-lg) 0;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--border-radius);
    color: var(--color-text);
}

.blog-content blockquote p:last-child {
    margin-bottom: 0;
}

.blog-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: var(--space-lg) 0;
    overflow-x: auto;
    border-collapse: collapse;
}

.blog-content th,
.blog-content td {
    border: 1px solid var(--color-border);
    padding: var(--space-xs) var(--space-sm);
    text-align: left;
    vertical-align: top;
}

.blog-content th {
    background: var(--color-surface);
    color: var(--color-primary);
}

.blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
}

/* Override link styles for buttons inside blog content */
.blog-content .btn,
.blog-content .btn-primary,
.blog-content .btn-secondary,
.blog-content .btn-outline {
    text-decoration: none;
    text-decoration-color: transparent;
}

.blog-content .btn-primary {
    color: var(--color-btn-ink);
}

.blog-content .btn-primary:hover {
    color: var(--color-btn-ink);
}

.blog-content .btn-secondary:hover {
    color: var(--color-surface);
}

.blog-content .btn-outline {
    color: var(--color-primary);
}

.blog-content .btn-outline:hover {
    color: var(--color-surface);
}

/* Blog CTA */
.blog-cta {
    background: var(--color-surface);
    border: 2px solid var(--color-primary);
    border-radius: var(--border-radius);
    padding: var(--space-xl);
    margin: var(--space-xxl) 0;
    text-align: center;
}

.blog-cta h2,
.blog-cta h3 {
    margin-top: 0;
    color: var(--color-primary);
    font-size: 1.5rem;
}

.blog-cta p {
    max-width: 600px;
    margin: 0 auto var(--space-lg);
}

/* Related Posts */
.related-posts {
    margin-top: var(--space-xxl);
    padding-top: var(--space-xl);
    border-top: 2px solid var(--color-border);
}

.related-posts h3 {
    margin-bottom: var(--space-md);
    color: var(--color-primary);
}

.related-post-card {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--space-lg);
    text-decoration: none;
    transition: all 0.2s ease;
}

.related-post-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.related-post-card h4 {
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.related-post-card p {
    color: var(--color-muted);
    margin: 0;
    font-size: 0.95rem;
}

/* Author Bio */
.author-bio {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    padding: var(--space-lg);
    border-radius: var(--border-radius);
    margin-top: var(--space-xxl);
}

.author-bio h4 {
    margin-top: 0;
    color: var(--color-primary);
}

.author-bio p {
    margin-bottom: var(--space-sm);
}

.author-bio p:last-child {
    margin-bottom: 0;
}

/* Blog Index Page */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

.blog-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: all 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.blog-card-content {
    padding: var(--space-lg);
}

.blog-card-meta {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin-bottom: var(--space-sm);
}

.blog-badge {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-btn-ink);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-right: var(--space-xs);
}

.blog-card h3 {
    margin: 0 0 var(--space-sm);
    font-size: 1.3rem;
}

.blog-card h3 a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-card h3 a:hover {
    color: var(--color-hover);
}

.blog-card p {
    color: var(--color-muted);
    margin-bottom: var(--space-md);
    line-height: 1.6;
}

.blog-read-more {
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-read-more:hover {
    color: var(--color-hover);
}

/* ========================================
   HOMEPAGE / FIELD ATLAS
   T-201 deliberately breaks the template's split-hero + equal-card rhythm.
   Everything is scoped to home-only classes so the established page system
   remains intact until the sitewide language is approved.
   ======================================== */

.home-atlas {
    background: var(--color-footer-end);
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.atlas-stage {
    position: relative;
    isolation: isolate;
    min-height: clamp(700px, 64vw, 890px);
    max-width: 1680px;
    margin: 0 auto;
    overflow: hidden;
    background-color: #e9dfc8;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-inline: 1px solid rgba(212, 147, 63, 0.35);
}

.atlas-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(13, 40, 35, 0.3) 0%, rgba(13, 40, 35, 0) 48%),
        linear-gradient(0deg, rgba(13, 40, 35, 0.2) 0%, rgba(13, 40, 35, 0) 32%);
    pointer-events: none;
}

.atlas-stage::after {
    content: '';
    position: absolute;
    inset: 16px;
    z-index: 0;
    border: 1px solid rgba(23, 56, 45, 0.45);
    border-radius: 2px;
    pointer-events: none;
}

.atlas-coordinate {
    position: absolute;
    top: 1.7rem;
    left: 2rem;
    z-index: 4;
    margin: 0;
    padding: 0.4rem 0.65rem;
    background: #F3F0E6;
    color: #17382D;
    border: 1px solid rgba(23, 56, 45, 0.55);
    font-family: var(--font-family-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    box-shadow: 3px 3px 0 rgba(23, 56, 45, 0.16);
}

.atlas-copy-sheet {
    position: absolute;
    top: clamp(4.5rem, 7vw, 7rem);
    left: clamp(2rem, 5vw, 5rem);
    z-index: 5;
    width: min(48%, 690px);
    padding: clamp(2rem, 4vw, 4.25rem);
    background: rgba(16, 46, 42, 0.97);
    color: #ffffff;
    border: 1px solid rgba(243, 240, 230, 0.5);
    border-radius: 2px;
    box-shadow: 18px 22px 0 rgba(13, 40, 35, 0.2), var(--shadow-lg);
    transform: rotate(-0.35deg);
}

.atlas-copy-sheet .eyebrow {
    color: rgba(255, 255, 255, 0.85);
}

.atlas-copy-sheet h1 {
    max-width: 15ch;
    margin-bottom: var(--space-md);
    color: #ffffff;
    font-size: clamp(2.85rem, 4vw, 5.2rem);
    line-height: 0.98;
    text-wrap: balance;
}

.atlas-copy-sheet .tagline {
    max-width: 52ch;
    margin: 0 0 var(--space-lg);
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(1rem, 1.35vw, 1.2rem);
}

.atlas-copy-sheet .cta-buttons {
    justify-content: flex-start;
}

.atlas-copy-sheet .btn-secondary {
    background: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.72);
}

.atlas-copy-sheet .btn-secondary:hover {
    background: #ffffff;
    color: #17231E;
    border-color: #ffffff;
}

.atlas-sites {
    position: absolute;
    inset: 0;
    z-index: 3;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
}

.atlas-site {
    position: absolute;
    top: var(--site-y);
    left: var(--site-x);
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

.atlas-site a {
    display: grid;
    grid-template-columns: auto auto;
    overflow: hidden;
    background: #F3F0E6;
    color: #17382D;
    border: 2px solid #17382D;
    border-radius: 999px;
    box-shadow: 5px 6px 0 rgba(23, 56, 45, 0.24);
    font-family: var(--font-family-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    animation: atlas-map-signal 7s ease-in-out infinite;
}

.atlas-site:nth-child(2) a { animation-delay: 2.2s; }
.atlas-site:nth-child(3) a { animation-delay: 4.4s; }

@keyframes atlas-map-signal {
    0%, 72%, 100% {
        box-shadow: 5px 6px 0 rgba(23, 56, 45, 0.24), 0 0 0 0 rgba(212, 147, 63, 0);
    }
    82% {
        box-shadow: 5px 6px 0 rgba(23, 56, 45, 0.24), 0 0 0 9px rgba(212, 147, 63, 0.28);
    }
}

.atlas-site a::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    height: 38px;
    border-left: 2px dashed rgba(23, 56, 45, 0.62);
}

.atlas-site a:hover,
.atlas-site a:focus-visible {
    animation: none;
    transform: translateY(-4px) rotate(-1deg);
    box-shadow: 8px 10px 0 rgba(23, 56, 45, 0.25);
}

.atlas-site span,
.atlas-site strong {
    padding: 0.55rem 0.7rem;
}

.atlas-site strong {
    color: #ffffff;
}

.atlas-site--paid strong {
    background: #24513F;
}

.atlas-site--due strong {
    background: #A5641E;
}

.atlas-site--open strong {
    background: #4A7180;
}

.atlas-product-ticket {
    position: absolute;
    right: clamp(2rem, 4vw, 4rem);
    bottom: clamp(2.2rem, 5vw, 4rem);
    z-index: 6;
    display: block;
    width: min(42%, 610px);
    padding: 0.7rem;
    background: #FFFDF7;
    color: #17382D;
    border: 1px solid #8b8f83;
    border-radius: 2px;
    box-shadow: 13px 15px 0 rgba(23, 56, 45, 0.25), var(--shadow-lg);
    text-decoration: none;
    transform: rotate(1.1deg);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.atlas-product-ticket:hover,
.atlas-product-ticket:focus-visible {
    color: #17382D;
    transform: rotate(0.25deg) translateY(-5px);
    box-shadow: 17px 20px 0 rgba(23, 56, 45, 0.25), var(--shadow-lg);
}

.atlas-product-ticket img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #C8CBBE;
    border-radius: 0;
}

.atlas-ticket-label,
.atlas-ticket-link {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 0.28rem 0.15rem;
    font-family: var(--font-family-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.atlas-ticket-link {
    padding-top: 0.55rem;
    font-family: var(--font-family);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

.atlas-key {
    position: absolute;
    left: clamp(2rem, 5vw, 5rem);
    bottom: 2rem;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1rem;
    padding: 0.7rem 0.9rem;
    background: rgba(243, 240, 230, 0.94);
    color: #17382D;
    border: 1px solid rgba(23, 56, 45, 0.5);
    font-family: var(--font-family-mono);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.atlas-key span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.atlas-key-dot {
    width: 0.75rem;
    height: 0.75rem;
    border: 1px solid #17382D;
    border-radius: 50%;
}

.atlas-key-dot--paid { background: #24513F; }
.atlas-key-dot--due { background: #D4933F; }
.atlas-key-dot--open { background: #4A7180; }

.atlas-trust-rail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1680px;
    margin: 0 auto;
    border-inline: 1px solid rgba(255, 255, 255, 0.14);
}

.atlas-trust-rail span {
    padding: 1.15rem clamp(1rem, 4vw, 3rem);
    border-right: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--font-family-mono);
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.atlas-trust-rail span:last-child {
    border-right: 0;
}

.atlas-trust-rail b {
    margin-right: 0.65rem;
    color: #D4933F;
}

.home-walk {
    position: relative;
    overflow: hidden;
    padding: clamp(5rem, 10vw, 9rem) 0;
    background: var(--color-bg);
}

.home-walk::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background-image:
        linear-gradient(var(--color-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
    background-size: 42px 42px;
    pointer-events: none;
}

.walk-intro,
.walk-route {
    position: relative;
    z-index: 1;
}

.walk-intro {
    display: grid;
    grid-template-columns: minmax(260px, 0.85fr) minmax(360px, 1.15fr);
    gap: var(--space-md) clamp(3rem, 8vw, 8rem);
    align-items: start;
}

.walk-intro .eyebrow,
.walk-intro h2 {
    grid-column: 1;
}

.walk-intro h2 {
    max-width: 16ch;
    margin: 0;
    font-size: clamp(2.4rem, 4.5vw, 4.7rem);
}

.walk-intro > p:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
    max-width: 43ch;
    margin: 2.4rem 0 0;
    padding-left: var(--space-lg);
    border-left: 4px solid var(--color-accent);
    color: var(--color-muted);
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
}

.walk-route {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
    margin-top: clamp(5rem, 9vw, 8rem);
}

.walk-route::before {
    content: '';
    position: absolute;
    top: 4.4rem;
    left: 7%;
    right: 7%;
    border-top: 3px dashed var(--color-primary);
    transform: rotate(-4deg);
    transform-origin: center;
    opacity: 0.65;
}

.walk-stop {
    position: relative;
    max-width: 330px;
    padding: 5.8rem 0 0;
}

.walk-stop:nth-child(2) {
    margin-top: 5.5rem;
}

.walk-stop:nth-child(3) {
    margin-top: -1.5rem;
}

.walk-stop::before {
    content: '';
    position: absolute;
    top: 2.75rem;
    left: 0;
    width: 1.4rem;
    height: 1.4rem;
    background: var(--color-accent);
    border: 5px solid var(--color-bg);
    outline: 2px solid var(--color-primary);
    border-radius: 50%;
    box-shadow: 0 0 0 8px rgba(36, 81, 63, 0.1);
}

.walk-stop h3 {
    max-width: 15ch;
    font-size: clamp(1.5rem, 2.4vw, 2.15rem);
}

.walk-stop p:last-child {
    color: var(--color-muted);
}

.home-ledger {
    position: relative;
    overflow: hidden;
    padding: clamp(5rem, 10vw, 9rem) 0;
    background: #17382D;
    color: #ffffff;
}

.home-ledger::before {
    content: '';
    position: absolute;
    inset: -20%;
    opacity: 0.16;
    background: repeating-radial-gradient(ellipse at 10% 60%, transparent 0 28px, #91C7A8 29px 30px, transparent 31px 48px);
    transform: rotate(-8deg);
    pointer-events: none;
}

.ledger-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: center;
}

.ledger-intro .eyebrow,
.ledger-intro h2 {
    color: #ffffff;
}

.ledger-intro h2 {
    max-width: 11ch;
    font-size: clamp(2.8rem, 5vw, 5rem);
}

.ledger-intro > p:not(.eyebrow) {
    max-width: 48ch;
    color: rgba(255, 255, 255, 0.84);
}

.ledger-questions {
    display: grid;
    gap: 0;
    margin: var(--space-xl) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.ledger-questions li {
    position: relative;
    padding: 0.85rem 2.2rem 0.85rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
}

.ledger-questions li::after {
    content: '→';
    position: absolute;
    right: 0;
    color: #D4933F;
}

.ledger-sheet {
    position: relative;
    padding: clamp(2.2rem, 5vw, 4rem);
    background-color: #F3F0E6;
    background-image: repeating-linear-gradient(0deg, transparent 0 38px, rgba(74, 113, 128, 0.23) 39px, transparent 40px);
    color: #17231E;
    border: 1px solid #C8CBBE;
    box-shadow: 18px 22px 0 rgba(13, 40, 35, 0.45), var(--shadow-lg);
    transform: rotate(1.1deg);
}

.ledger-sheet::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4.2rem;
    border-left: 2px solid rgba(192, 57, 43, 0.26);
}

.ledger-clip {
    position: absolute;
    top: -1.4rem;
    left: 50%;
    width: 5.8rem;
    height: 2.2rem;
    background: rgba(212, 147, 63, 0.9);
    box-shadow: 0 3px 8px rgba(23, 35, 30, 0.22);
    transform: translateX(-50%) rotate(-2deg);
}

.ledger-reference {
    margin: 0 0 var(--space-md);
    font-family: var(--font-family-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #56635C;
}

.ledger-sheet h3 {
    margin: var(--space-lg) 0 var(--space-sm);
    color: #17382D;
    font-size: clamp(1.45rem, 2.2vw, 2rem);
}

.ledger-sheet p:not(.ledger-reference):not(.ledger-signoff) {
    display: grid;
    grid-template-columns: 3.3rem 1fr;
    gap: var(--space-sm);
    align-items: baseline;
    margin: 0;
    padding: 0.65rem 0;
}

.ledger-stamp {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    color: #17382D;
    border: 2px solid #24513F;
    font-family: var(--font-family-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    transform: rotate(-4deg);
}

.ledger-stamp--no {
    color: #56635C;
    border-color: #56635C;
    transform: rotate(3deg);
}

.ledger-signoff {
    width: fit-content;
    margin: var(--space-xl) 0 0 auto;
    padding: 0.35rem 0.55rem;
    color: #17382D;
    border: 2px solid #D4933F;
    font-family: var(--font-family-heading);
    font-weight: 700;
    transform: rotate(-2deg);
}

.home-package {
    padding: clamp(5rem, 10vw, 9rem) 0 0;
    background: var(--color-bg);
}

.package-heading {
    display: grid;
    grid-template-columns: 160px minmax(320px, 1.2fr) minmax(280px, 0.8fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
    margin-bottom: clamp(3rem, 6vw, 6rem);
}

.package-index {
    margin: 0;
    padding-top: 0.45rem;
    color: var(--color-primary);
    border-top: 3px solid var(--color-accent);
    font-family: var(--font-family-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.package-heading h2 {
    margin: 0;
    font-size: clamp(2.25rem, 4.2vw, 4.2rem);
}

.package-heading > p:last-child {
    margin: 0;
    color: var(--color-muted);
    font-size: 1.1rem;
}

.package-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.package-panel {
    min-height: 460px;
    padding: clamp(3rem, 7vw, 7rem);
}

.package-panel-inner {
    max-width: 560px;
}

.package-panel--public {
    display: flex;
    justify-content: flex-end;
    background: var(--color-surface-2);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.package-panel--admin {
    background: #17382D;
    color: #ffffff;
    border-top: 1px solid #17382D;
    border-bottom: 1px solid #17382D;
}

.package-panel--admin .eyebrow,
.package-panel--admin h3,
.package-panel--admin li {
    color: #ffffff;
}

.package-panel h3 {
    max-width: 13ch;
    font-size: clamp(2rem, 3.5vw, 3.5rem);
}

.package-panel ul {
    margin-top: var(--space-xl);
    padding: 0;
    list-style: none;
    border-top: 1px solid currentColor;
}

.package-panel li {
    padding: 0.85rem 0;
    border-bottom: 1px solid currentColor;
}

.package-panel--public li {
    border-color: var(--color-border);
}

.package-panel--admin li {
    border-color: rgba(255, 255, 255, 0.28);
}

.package-action {
    padding: var(--space-xl) var(--space-md);
    background: var(--color-bg);
    text-align: center;
}

.home-range {
    position: relative;
    overflow: hidden;
    padding: clamp(5rem, 10vw, 9rem) 0;
    background: #102E2A;
    color: #ffffff;
}

.home-range::after {
    content: '47° N  /  97° W';
    position: absolute;
    right: -0.25em;
    bottom: -0.3em;
    color: rgba(255, 255, 255, 0.035);
    font-family: var(--font-family-mono);
    font-size: clamp(5rem, 16vw, 14rem);
    font-weight: 700;
    white-space: nowrap;
}

.range-heading {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-md) clamp(3rem, 8vw, 8rem);
}

.range-heading .eyebrow,
.range-heading h2 {
    grid-column: 1;
    color: #ffffff;
}

.range-heading h2 {
    margin: 0;
    font-size: clamp(2.5rem, 4.8vw, 4.8rem);
}

.range-heading > p:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    max-width: 45ch;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.1rem;
}

.range-track {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
    margin-top: clamp(4rem, 8vw, 7rem);
    padding-top: var(--space-xl);
    border-top: 2px dashed rgba(255, 255, 255, 0.38);
}

.range-track article {
    position: relative;
}

.range-track article::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--space-xl) - 0.65rem);
    left: 0;
    width: 1.15rem;
    height: 1.15rem;
    background: #D4933F;
    border: 3px solid #102E2A;
    outline: 1px solid #D4933F;
    transform: rotate(45deg);
}

.range-abbr {
    margin: 0 0 -0.15em;
    color: rgba(255, 255, 255, 0.12);
    font-family: var(--font-family-heading);
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 700;
    line-height: 1;
}

.range-track h3 {
    color: #ffffff;
}

.range-track article > p:last-child {
    color: rgba(255, 255, 255, 0.76);
}

.home-process {
    padding: clamp(5rem, 10vw, 9rem) 0;
    background: var(--color-surface);
}

.process-kicker {
    margin: 0 0 var(--space-sm);
    color: var(--color-primary);
    font-family: var(--font-family-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.home-process h2 {
    margin-bottom: clamp(4rem, 7vw, 7rem);
    font-size: clamp(2.6rem, 5vw, 5rem);
}

.process-route {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 7vw, 7rem);
}

.process-route::before {
    content: '';
    position: absolute;
    top: 1.45rem;
    left: 2%;
    right: 2%;
    border-top: 2px solid var(--color-border);
}

.process-route article {
    position: relative;
    padding-top: 4rem;
}

.process-route article > span {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    background: var(--color-primary);
    color: var(--color-surface);
    border: 6px solid var(--color-surface);
    outline: 2px solid var(--color-primary);
    border-radius: 50%;
    font-family: var(--font-family-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.process-route h3 {
    max-width: 14ch;
    font-size: clamp(1.5rem, 2.4vw, 2.15rem);
}

.process-route p {
    color: var(--color-muted);
}

.home-invite {
    padding: clamp(4rem, 8vw, 8rem) 0;
    background-color: #17382D;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 48px 48px;
}

.invite-note {
    display: grid;
    grid-template-columns: 100px minmax(320px, 1fr) auto;
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
    padding: clamp(2rem, 5vw, 4rem);
    background: #F3F0E6;
    color: #17231E;
    border: 1px solid #C8CBBE;
    border-radius: 2px;
    box-shadow: 14px 16px 0 rgba(13, 40, 35, 0.55);
    transform: rotate(-0.4deg);
}

.invite-mark {
    margin: 0;
    color: #D4933F;
    font-family: var(--font-family-heading);
    font-size: clamp(4rem, 8vw, 7rem);
    line-height: 1;
}

.invite-note .eyebrow {
    margin-bottom: 0.4rem;
    color: #24513F;
}

.invite-note h2 {
    margin-bottom: var(--space-xs);
    color: #17382D;
    font-size: clamp(2rem, 3.8vw, 3.7rem);
}

/* T-203: .invite-note is a fixed cream card like .atlas-copy-sheet and
   .ledger-sheet are fixed dark cards — same reasoning applies in reverse.
   Without a hardcoded override, .eyebrow/h2 fall through to the global
   token-based rules (color: var(--color-primary)), which resolve to a
   light mint in dark mode and were measured at 1.68:1 against this card's
   permanently-cream background — hardcoding the ink here keeps it AA. */
.invite-note .btn-secondary {
    background: transparent;
    color: #24513F;
    border-color: #24513F;
}

.invite-note .btn-secondary:hover {
    background: #24513F;
    color: #F3F0E6;
    border-color: #24513F;
}

.invite-note p:last-child {
    max-width: 55ch;
    margin-bottom: 0;
}

.invite-note .cta-buttons {
    flex-direction: column;
    min-width: 210px;
}

@media (max-width: 1100px) {
    .atlas-copy-sheet {
        width: 52%;
    }

    .atlas-product-ticket {
        width: 43%;
    }

    .package-heading {
        grid-template-columns: 120px 1fr;
    }

    .package-heading > p:last-child {
        grid-column: 2;
    }

    .invite-note {
        grid-template-columns: 70px 1fr;
    }

    .invite-note .cta-buttons {
        grid-column: 2;
        flex-direction: row;
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    .atlas-stage {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 5.5rem var(--space-md) var(--space-lg);
        background-position: center top;
        /* T-203: below 900px the stage becomes a tall stacked flex column
           (content-driven height, not the desktop aspect-locked min-height),
           so background-size:cover — inherited from the desktop rule — was
           scaling the wide 1672x941 art to match the container's height and
           cropping all but a narrow center slice of its width (measured
           ~31% visible at 768px, ~14% at 360px: an unrecognizable color
           field, not a map). Locking to the image's own width/aspect ratio
           shows the full composition as a letterboxed band at the top of
           the stage instead of cropping it. */
        background-size: 100% auto;
    }

    .atlas-stage::before {
        background: rgba(13, 40, 35, 0.22);
    }

    .atlas-copy-sheet,
    .atlas-product-ticket,
    .atlas-key {
        position: relative;
        inset: auto;
    }

    .atlas-copy-sheet {
        width: min(100%, 680px);
        margin: 0 auto;
        transform: none;
    }

    .atlas-copy-sheet h1 {
        max-width: 13ch;
    }

    .atlas-sites {
        position: relative;
        inset: auto;
        display: grid;
        grid-template-columns: repeat(3, auto);
        justify-content: center;
        gap: var(--space-sm);
        margin: var(--space-xl) 0;
    }

    .atlas-site {
        position: static;
        transform: none;
    }

    .atlas-site a::after {
        display: none;
    }

    .atlas-product-ticket {
        width: min(100%, 650px);
        margin: 0 auto;
        transform: rotate(0.6deg);
    }

    .atlas-key {
        align-self: center;
        margin-top: var(--space-lg);
    }

    .walk-intro,
    .range-heading {
        grid-template-columns: 1fr;
    }

    .walk-intro .eyebrow,
    .walk-intro h2,
    .walk-intro > p:last-child,
    .range-heading .eyebrow,
    .range-heading h2,
    .range-heading > p:last-child {
        grid-column: 1;
        grid-row: auto;
    }

    .walk-intro > p:last-child {
        margin-top: var(--space-lg);
    }

    .walk-route,
    .ledger-layout,
    .range-track,
    .process-route {
        grid-template-columns: 1fr;
    }

    .walk-route {
        gap: var(--space-xl);
        padding-left: 2.5rem;
    }

    .walk-route::before {
        top: 2rem;
        bottom: 2rem;
        left: 0.7rem;
        right: auto;
        border-top: 0;
        border-left: 3px dashed var(--color-primary);
        transform: none;
    }

    .walk-stop,
    .walk-stop:nth-child(2),
    .walk-stop:nth-child(3) {
        max-width: 540px;
        margin-top: 0;
        padding: 0;
    }

    .walk-stop::before {
        top: 0.35rem;
        left: -2.55rem;
    }

    .ledger-layout {
        gap: var(--space-xxl);
    }

    .ledger-sheet {
        max-width: 680px;
        transform: none;
    }

    .package-heading {
        grid-template-columns: 1fr;
    }

    .package-heading > p:last-child {
        grid-column: 1;
    }

    .package-panels {
        grid-template-columns: 1fr;
    }

    .package-panel {
        min-height: 0;
    }

    .package-panel--public {
        justify-content: flex-start;
    }

    .range-heading > p:last-child {
        margin-top: var(--space-lg);
    }

    .range-track {
        gap: var(--space-xxl);
        padding-top: 0;
        padding-left: var(--space-xl);
        border-top: 0;
        border-left: 2px dashed rgba(255, 255, 255, 0.38);
    }

    .range-track article::before {
        top: 0.5rem;
        left: calc(-1 * var(--space-xl) - 0.6rem);
    }

    .process-route {
        gap: var(--space-xl);
        padding-left: 4.5rem;
    }

    .process-route::before {
        top: 1rem;
        bottom: 1rem;
        left: 1.45rem;
        right: auto;
        border-top: 0;
        border-left: 2px solid var(--color-border);
    }

    .process-route article {
        padding-top: 0;
    }

    .process-route article > span {
        left: -4.5rem;
    }
}

@media (max-width: 620px) {
    .atlas-stage {
        padding-inline: var(--space-sm);
    }

    .atlas-coordinate {
        left: var(--space-sm);
    }

    .atlas-copy-sheet {
        padding: var(--space-lg);
        box-shadow: 8px 10px 0 rgba(13, 40, 35, 0.24), var(--shadow);
    }

    .atlas-copy-sheet h1 {
        font-size: clamp(2.4rem, 12vw, 3.7rem);
    }

    .atlas-sites {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .atlas-site a {
        min-width: 170px;
    }

    .atlas-site span,
    .atlas-site strong {
        text-align: center;
    }

    .atlas-key {
        justify-content: center;
    }

    .atlas-trust-rail {
        grid-template-columns: 1fr;
    }

    .atlas-trust-rail span {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .atlas-trust-rail span:last-child {
        border-bottom: 0;
    }

    .ledger-sheet {
        padding: var(--space-lg);
    }

    .ledger-sheet::before {
        left: 2.8rem;
    }

    .ledger-sheet p:not(.ledger-reference):not(.ledger-signoff) {
        grid-template-columns: 2.8rem 1fr;
        font-size: 0.92rem;
    }

    .package-panel {
        padding: var(--space-xl) var(--space-md);
    }

    .invite-note {
        grid-template-columns: 1fr;
        transform: none;
    }

    .invite-mark {
        display: none;
    }

    .invite-note .cta-buttons {
        grid-column: 1;
        flex-direction: column;
    }
}

/* ========================================
   ROUTE MOTIFS (T-202)
   One restrained, page-scoped motif per inner route, extending the North
   Woods Field Office / field-atlas language the homepage established in
   T-201 without turning every page into a map. Classes are namespaced per
   route on purpose — see ADR-002 for the full rationale and the motif-per-
   route map.
   ======================================== */

/* --- Shared left-aligned masthead: replaces the centered `.hero` survey-
   grid band on inner pages (pricing/faq/contact). Each page still supplies
   its own distinct accent (masthead tag / field-index numeral / intake
   note) so the three don't read as one repeated pattern. --- */
.field-masthead {
    text-align: left;
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4.5rem);
}

.field-masthead .cta-buttons {
    justify-content: flex-start;
}

.field-masthead-tag {
    display: inline-flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: var(--space-lg);
    padding: 0.65rem 0.95rem;
    background: rgba(243, 240, 230, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.4);
    font-family: var(--font-family-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.86);
}

.field-masthead-tag span:last-child {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.02em;
}

.intake-note {
    display: block;
    margin-top: var(--space-lg);
    font-family: var(--font-family-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

/* --- FEATURES: plat index — a route/plat sequence keyed to the atlas's
   paid/due/open status marks, replacing the six-up property-card grid that
   split 4+2 on desktop. Always one column, so there is no half-empty row
   at any count or width. --- */
.plat-index {
    margin-top: var(--space-xl);
    border-top: 2px solid var(--color-border);
}

.plat-index-heading {
    margin: var(--space-lg) 0 0;
    font-family: var(--font-family-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    text-transform: uppercase;
}

.plat-row {
    display: grid;
    grid-template-columns: 3.4rem 1fr;
    gap: var(--space-lg);
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--color-border);
}

.plat-row-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    color: var(--status-ink);
    font-family: var(--font-family-mono);
    font-size: 1rem;
    font-weight: 700;
    border-radius: 4px;
}

.plat-row-mark--paid { background: var(--status-paid); }
.plat-row-mark--due { background: var(--status-due); }
.plat-row-mark--open { background: var(--status-open); }

.plat-row-body .site-number {
    margin-bottom: 0.25rem;
}

.plat-row-body h3 {
    margin-bottom: 0.35rem;
}

.plat-row-body p:last-child {
    margin-bottom: 0;
    color: var(--color-muted);
}

/* --- PRICING: estimate ledger — a ruled scope ledger with a pinned paper-
   clip accent, replacing the single oversized rounded pricing card. --- */
.estimate-ledger {
    position: relative;
    padding: clamp(2rem, 5vw, 3.5rem);
    background-color: var(--color-surface);
    background-image: repeating-linear-gradient(0deg, transparent 0 38px, var(--color-border) 39px, transparent 40px);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
}

.estimate-clip {
    position: absolute;
    top: -1.1rem;
    left: clamp(2rem, 6vw, 4rem);
    width: 4.6rem;
    height: 1.8rem;
    background: var(--color-accent);
    box-shadow: 0 3px 8px rgba(23, 35, 30, 0.22);
    transform: rotate(-2deg);
}

.estimate-reference {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-family-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-muted);
    text-transform: uppercase;
}

.estimate-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-lg);
}

.estimate-rows {
    margin: var(--space-sm) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--color-border);
}

.estimate-rows li {
    position: relative;
    margin: 0;
    padding: 0.65rem 0 0.65rem 1.6rem;
    border-bottom: 1px solid var(--color-border);
    line-height: 1.5;
}

.estimate-rows li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0.65rem;
    font-weight: 700;
    color: var(--color-primary);
}

.estimate-rows--out li::before {
    content: '\2013';
    color: var(--color-muted);
}

.estimate-ledger .cta-buttons {
    margin-top: var(--space-xl);
}

/* --- FAQ: field-index masthead numeral + ledger-divider rows, replacing
   identical rounded accordion cards. --- */
.faq-masthead {
    position: relative;
    overflow: hidden;
}

.faq-masthead::after {
    content: attr(data-count);
    position: absolute;
    right: clamp(1rem, 4vw, 3rem);
    bottom: -0.35em;
    z-index: 0;
    color: rgba(255, 255, 255, 0.06);
    font-family: var(--font-family-heading);
    font-size: clamp(6rem, 16vw, 12rem);
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.faq-masthead .container {
    position: relative;
    z-index: 1;
}

.field-index-list {
    margin-top: var(--space-xl);
    border-top: 2px solid var(--color-border);
}

.field-index-item {
    border-bottom: 1px solid var(--color-border);
}

.field-index-item summary {
    position: relative;
    padding: 1rem 2.2rem 1rem 3.1rem;
    cursor: pointer;
    color: var(--color-text);
    font-family: var(--font-family-heading);
    list-style: none;
}

.field-index-item summary::-webkit-details-marker {
    display: none;
}

.field-index-item summary::marker {
    content: '';
}

.field-index-num {
    position: absolute;
    left: 0;
    top: 1.05rem;
    font-family: var(--font-family-mono);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-primary);
}

.field-index-item summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 0.7rem;
    font-size: 1.4rem;
    font-weight: 400;
    /* Not --color-accent: gold on the light-theme paper background measures
       2.29:1, well under AA even at large-text size (see the .a:hover
       comment above for the same rule). --color-primary passes 7.9-9.3:1
       in both themes. */
    color: var(--color-primary);
    pointer-events: none;
}

.field-index-item[open] summary::after {
    content: '\2212';
}

.field-index-item p {
    margin: 0 0 var(--space-md);
    padding-left: 3.1rem;
    color: var(--color-muted);
}

/* --- CONTACT: property-intake sheet + pinned field-office card. --- */
.intake-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-xl);
    align-items: start;
}

.intake-sheet {
    padding: var(--space-lg);
    background-color: var(--color-surface);
    background-image: repeating-linear-gradient(0deg, transparent 0 36px, var(--color-border) 37px, transparent 38px);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
}

.intake-reference {
    margin: 0 0 var(--space-md);
    font-family: var(--font-family-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-muted);
    text-transform: uppercase;
}

.field-office-card {
    position: relative;
    transform: rotate(0.6deg);
}

.field-office-clip {
    position: absolute;
    top: -0.9rem;
    left: 50%;
    width: 4.6rem;
    height: 1.6rem;
    background: var(--color-accent);
    box-shadow: 0 3px 8px rgba(23, 35, 30, 0.22);
    transform: translateX(-50%) rotate(-1.5deg);
}

/* --- ABOUT: origin coordinates / provenance, replacing the legacy 55/45
   hero split and the centered CTA band. --- */
.origin-masthead {
    text-align: left;
}

.origin-masthead .container {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-xl);
    align-items: center;
}

.origin-marker {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-accent);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-lg);
    transform: rotate(-0.6deg);
}

.origin-coordinate {
    margin: 0 0 0.2rem;
    font-family: var(--font-family-mono);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-primary);
}

.origin-place {
    margin: 0 0 var(--space-md);
    font-family: var(--font-family-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-muted);
    text-transform: uppercase;
}

.provenance-band {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-xl);
    align-items: center;
}

.provenance-card {
    position: relative;
    padding: var(--space-lg);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    transform: rotate(0.7deg);
}

.provenance-stamp {
    display: inline-block;
    margin-bottom: var(--space-md);
    padding: 0.15rem 0.5rem;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    font-family: var(--font-family-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    transform: rotate(-2deg);
}

.provenance-card .cta-buttons {
    flex-direction: column;
    justify-content: flex-start;
}

/* --- DEMO: full-bleed atlas stage + stamped access ticket, replacing the
   framed screenshot hero. Reuses the same field-atlas asset as the
   homepage (no new raster). --- */
.demo-atlas {
    background: var(--color-footer-end);
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.demo-atlas-stage {
    position: relative;
    isolation: isolate;
    min-height: clamp(560px, 52vw, 760px);
    max-width: 1680px;
    margin: 0 auto;
    overflow: hidden;
    background-color: #e9dfc8;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-inline: 1px solid rgba(212, 147, 63, 0.35);
}

.demo-atlas-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(13, 40, 35, 0.34) 0%, rgba(13, 40, 35, 0) 55%),
        linear-gradient(0deg, rgba(13, 40, 35, 0.22) 0%, rgba(13, 40, 35, 0) 34%);
    pointer-events: none;
}

.demo-atlas-copy {
    position: absolute;
    top: clamp(2.5rem, 6vw, 4.5rem);
    left: clamp(2rem, 5vw, 5rem);
    z-index: 5;
    width: min(50%, 620px);
    padding: clamp(1.75rem, 3.5vw, 3rem);
    background: rgba(16, 46, 42, 0.97);
    color: #ffffff;
    border: 1px solid rgba(243, 240, 230, 0.5);
    border-radius: 2px;
    box-shadow: 14px 16px 0 rgba(13, 40, 35, 0.2), var(--shadow-lg);
}

.demo-atlas-copy .eyebrow {
    color: rgba(255, 255, 255, 0.85);
}

.demo-atlas-copy h1 {
    max-width: 15ch;
    margin-bottom: var(--space-sm);
    color: #ffffff;
    font-size: clamp(2.2rem, 3.4vw, 3.4rem);
    line-height: 1.05;
}

.demo-atlas-copy .tagline {
    max-width: 42ch;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
}

.access-ticket {
    position: absolute;
    right: clamp(2rem, 4vw, 4rem);
    bottom: clamp(2rem, 5vw, 3.5rem);
    z-index: 6;
    width: min(38%, 340px);
    padding: 1.4rem 1.5rem;
    background: #F3F0E6;
    color: #17231E;
    border: 2px dashed #17382D;
    border-radius: 2px;
    box-shadow: 12px 14px 0 rgba(23, 56, 45, 0.25), var(--shadow-lg);
    transform: rotate(1.4deg);
}

.access-ticket-label {
    margin: 0 0 0.9rem;
    font-family: var(--font-family-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #56635C;
    text-transform: uppercase;
}

.access-ticket-stamp {
    margin: 0 0 0.15rem;
    font-family: var(--font-family-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #17382D;
    text-transform: uppercase;
}

.access-ticket-code {
    margin: 0 0 1.1rem;
    padding: 0.5rem 0.65rem;
    background: #ffffff;
    border: 1px solid #C8CBBE;
    font-family: var(--font-family-mono);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #17382D;
    text-align: center;
}

.access-ticket .btn-primary {
    width: 100%;
}

/* --- 404: missing-site marker / route sign, replacing the centered band
   and equal three-card grid. --- */
.route-sign {
    background: linear-gradient(135deg, var(--color-hero-start) 0%, var(--color-hero-end) 100%);
    padding: clamp(3.5rem, 7vw, 6rem) 0;
}

.route-sign .container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-xl);
    align-items: center;
}

.route-sign-post {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-lg);
    transform: rotate(-0.8deg);
}

.route-sign-code {
    display: inline-block;
    margin-bottom: var(--space-md);
    padding: 0.2rem 0.6rem;
    background: var(--color-primary);
    /* --color-primary flips light-green/dark-mint between themes (see
       :root / [data-theme="dark"]) — pairing it with --color-surface
       (also theme-relative) keeps this a dark-on-light or light-on-dark
       pair in both modes instead of hardcoding a color that only works in
       one. Same technique as .process-route article > span above. */
    color: var(--color-surface);
    font-family: var(--font-family-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.route-sign-arrows {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-md);
}

.route-sign-arrows a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-left: 4px solid var(--color-accent);
    color: #ffffff;
    font-family: var(--font-family-heading);
    font-weight: 700;
    transition: transform 0.15s ease, background 0.15s ease;
}

.route-sign-arrows a:hover,
.route-sign-arrows a:focus-visible {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    transform: translateX(4px);
}

.route-sign-arrows span {
    color: var(--color-accent);
}

/* --- BLOG INDEX: field-notes folio — a full-width list with survey tags
   and dates, replacing the two-column card grid that left one lonely post
   in a half-empty row. --- */
.folio-list {
    margin-top: var(--space-xl);
    border-top: 2px solid var(--color-border);
}

.folio-entry {
    display: grid;
    grid-template-columns: 9.5rem 1fr;
    gap: var(--space-lg);
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--color-border);
}

.folio-tag {
    margin: 0;
    font-family: var(--font-family-mono);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-muted);
    line-height: 1.6;
}

.folio-entry h2 {
    margin: 0 0 var(--space-sm);
    font-size: 1.5rem;
}

.folio-entry p {
    margin: 0 0 var(--space-sm);
}

/* --- BLOG POST: field-note masthead + metadata rail, replacing the huge
   centered title; narrower reading measure. --- */
.fieldnote-layout {
    display: grid;
    grid-template-columns: 10.5rem 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.fieldnote-rail {
    position: sticky;
    top: calc(var(--space-xl) + 70px);
    padding-top: 0.3rem;
    border-top: 3px solid var(--color-accent);
}

.fieldnote-rail-label {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-family-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    text-transform: uppercase;
}

.fieldnote-rail p {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: var(--color-muted);
}

.fieldnote-rail .fieldnote-tags {
    margin-top: var(--space-sm);
    line-height: 1.5;
}

.fieldnote-main {
    max-width: 62ch;
}

.fieldnote-main .blog-header {
    text-align: left;
    padding-bottom: var(--space-md);
}

.fieldnote-main .blog-intro {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
}

/* --- ROUTE MOTIFS — RESPONSIVE --- */
@media (max-width: 900px) {
    .origin-masthead .container,
    .provenance-band,
    .route-sign .container {
        grid-template-columns: 1fr;
    }

    .origin-marker {
        transform: none;
    }

    .provenance-card {
        transform: none;
    }

    .route-sign-post {
        transform: none;
    }

    .fieldnote-layout {
        grid-template-columns: 1fr;
    }

    .fieldnote-rail {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 0 var(--space-lg);
        padding-top: 0.6rem;
    }

    .fieldnote-rail-label {
        width: 100%;
        margin-bottom: var(--space-xs);
    }

    .fieldnote-rail .fieldnote-tags {
        width: 100%;
    }

    .fieldnote-main {
        max-width: none;
    }

    .demo-atlas-stage {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: var(--space-lg) var(--space-md);
        background-position: center top;
        background-size: 100% auto;
    }

    .demo-atlas-stage::before {
        background: rgba(13, 40, 35, 0.22);
    }

    .demo-atlas-copy,
    .access-ticket {
        position: relative;
        inset: auto;
        width: min(100%, 620px);
        margin: 0 auto;
        transform: none;
    }

    .access-ticket {
        margin-top: var(--space-lg);
    }
}

@media (max-width: 850px) {
    .intake-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .plat-row {
        grid-template-columns: 2.6rem 1fr;
        gap: var(--space-md);
    }

    .plat-row-mark {
        width: 2.6rem;
        height: 2.6rem;
        font-size: 0.85rem;
    }

    .estimate-columns {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .folio-entry {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }
}

@media (max-width: 400px) {
    .field-index-item summary {
        padding-top: 1.75rem;
        padding-bottom: 1.75rem;
    }

    .field-index-num {
        top: 1.8rem;
    }

    .field-index-item summary::after {
        top: 1.45rem;
    }
}

/* --- RESPONSIVE --- */
/* Bumped from 1100px: the 7-item primary nav (Features / Live Demo /
   Pricing / About / FAQ / Field Notes / Contact) plus the wordmark and
   header controls gets tight well above the old breakpoint — QA reported
   the .logo collapse bug at 1265px. Collapsing into the mobile-nav toggle
   earlier keeps the wordmark and nav both fully visible at all widths. */
@media (max-width: 1310px) {
    header {
        position: relative;
    }

    header .container {
        gap: var(--space-md);
    }

    header nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        background: var(--color-surface);
        box-shadow: var(--shadow-lg);
        padding: var(--space-md) 0;
        z-index: 1000;
        border-top: 2px solid var(--color-border);
    }

    header nav.active {
        display: block;
    }

    header nav ul {
        flex-direction: column;
        gap: 0;
    }

    header nav a {
        display: block;
        padding: var(--space-md);
        border-bottom: 1px solid var(--color-border);
    }

    header nav a::after {
        display: none;
    }

    .mobile-nav-toggle {
        display: block;
        margin-left: var(--space-md);
    }

    .theme-toggle {
        margin-left: 0;
        margin-right: var(--space-xs);
    }
}

@media (max-width: 992px) {
    /* h1/h2 are already fluid via clamp(); these overrides stay identical
       to the base rule on purpose so the selectors remain in place without
       fighting the fluid scale at this breakpoint. */
    h1 { font-size: clamp(2.4rem, 5vw, 4.6rem); }
    h2 { font-size: clamp(1.8rem, 3vw, 3rem); }

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

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

    .hero h1 {
        font-size: clamp(2.4rem, 5vw, 4.6rem);
    }

    .hero-split {
        gap: var(--space-lg);
    }
}

@media (max-width: 768px) {
    h1 { font-size: clamp(2.4rem, 5vw, 4.6rem); }
    h2 { font-size: clamp(1.8rem, 3vw, 3rem); }

    .hero h1 {
        font-size: clamp(2.4rem, 5vw, 4.6rem);
    }

    .hero .tagline {
        font-size: 1.1rem;
    }

    /* Hero: copy and primary CTA first, product screenshot after, per
       ADR-001. Same markup order already puts copy first in the DOM; this
       just collapses the 55/45 grid to a single column. */
    .hero-split {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .hero-visual {
        margin-top: var(--space-lg);
    }

    .trust-strip {
        gap: var(--space-xs) var(--space-md);
    }

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

    .pricing-card {
        padding: var(--space-lg);
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    /* Mobile logo sizing. The PineRoster wordmark SVG is a wide ~5.4:1
       lockup (pine mark + "PINE ROSTER" text); measured against a 375px
       phone with the header controls (theme toggle + hamburger) already
       occupying ~113px, a taller logo forces the header row to overflow
       horizontally. 32px keeps the full lockup readable while leaving
       enough room for the controls with no overflow. */
    .site-logo {
        height: 32px;
    }

    /* A little extra breathing room reclaimed from the controls so the
       header keeps fitting down to very small (~320px) phones too. */
    header .container {
        gap: var(--space-sm);
    }

    .mobile-nav-toggle {
        margin-left: var(--space-sm);
    }

    /* Shrink logo on scroll (mobile only) */
    header.scrolled {
        padding: var(--space-xs) 0;
    }

    header.scrolled .site-logo {
        height: 0;
        opacity: 0;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }

    .process-step {
        flex-direction: column;
        gap: var(--space-md);
    }

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

    .blog-header h1 {
        font-size: 1.8rem;
    }

    .blog-intro {
        font-size: 1.05rem;
    }

    .blog-content {
        font-size: 1rem;
    }

    .blog-content pre {
        padding: var(--space-sm);
    }
}

/* --- REDUCED MOTION --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .card:hover,
    .related-post-card:hover,
    .blog-card:hover,
    .property-sheet:hover,
    .btn:hover,
    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-outline:hover,
    .hero .btn-secondary:hover,
    .hero .btn-outline:hover,
    .section-dark .btn-secondary:hover,
    .section-dark .btn-outline:hover,
    .footer-demo-link:hover,
    .footer-social .social-link:hover,
    .back-to-top:hover,
    .back-to-top:active,
    .theme-toggle:hover {
        transform: none;
    }
}