/* ==========================================================================
   CAPITAL CITY COMPUTING — ENGINEERED TRUST
   Tallahassee, Florida · 30°26'N 84°16'W
   Hand-coded HTML, CSS, and vanilla JS. No build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 · TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Surfaces — the page is bone (drafting paper) by default */
    --ink:        #0C0C0A;
    --ink-2:      #1A1A17;
    --ink-3:      #25251F;
    --bone:       #EFE7D6;
    --bone-2:     #E5DCC7;
    --paper:      #F7F1E2;
    --line:       rgba(12, 12, 10, 0.18);
    --line-soft:  rgba(12, 12, 10, 0.10);
    --line-bone:  rgba(239, 231, 214, 0.18);

    /* The single chromatic accent — safety/highway orange.
       --hi is tuned so dark-ink text on orange fills clears AA (4.5:1).
       --hi-text is darker for small orange text on cream to also clear AA. */
    --hi:         #DC4810;
    --hi-text:    #BA3D0D;
    --hi-2:       #B83C0C;
    --hi-ink:     #2A1306;

    /* Typography */
    --f-display:  'Big Shoulders Display', 'Arial Narrow', sans-serif;
    --f-body:     'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --f-mono:     'JetBrains Mono', 'SF Mono', Consolas, monospace;

    /* Fluid type ramp */
    --t-mono:     0.78rem;
    --t-eyebrow:  0.72rem;
    --t-body:     1.0625rem;
    --t-lead:     clamp(1.125rem, 1vw + 0.95rem, 1.375rem);
    --t-h3:       clamp(1.5rem, 1.8vw + 1rem, 2rem);
    --t-h2:       clamp(2.25rem, 4vw + 1rem, 4rem);
    --t-display:  clamp(3.25rem, 9vw + 0.5rem, 9rem);
    --t-mega:     clamp(4rem, 14vw, 14rem);

    /* Spacing — 8px base */
    --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
    --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
    --s-9: 6rem;     --s-10: 8rem;    --s-11: 12rem;

    /* Layout */
    --w-page:     1360px;
    --gutter:     1.25rem;

    /* Motion */
    --ease:       cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-snap:  cubic-bezier(0.7, 0, 0.2, 1);
    --t-fast:     180ms;
    --t-med:      280ms;

    --bg:         var(--bone);
    --fg:         var(--ink);
    --fg-mute:    rgba(12, 12, 10, 0.62);
    --surface:    var(--paper);
    --hover:      rgba(18, 16, 10, 0.06);
}

[data-theme="dark"] {
    --bg:         var(--ink);
    --fg:         var(--bone);
    --fg-mute:    rgba(239, 231, 214, 0.62);
    --surface:    var(--ink-2);
    --hi-text:    var(--hi);
    /* the "paper" alternate surface must darken in dark mode, otherwise
       every .section--paper renders light-cream with invisible light text */
    --paper:      #17150F;
    --bone-2:     #211F16;
    --line:       rgba(239, 231, 214, 0.18);
    --line-soft:  rgba(239, 231, 214, 0.08);
    --hover:      rgba(239, 231, 214, 0.07);
}

@media (min-width: 48em) { :root { --gutter: 2rem; } }
@media (min-width: 64em) { :root { --gutter: 3rem; } }

/* 4K / ultra-wide — scale up container, type, and spacing so content
   doesn't swim in a sea of whitespace on 2560px+ displays. */
@media (min-width: 120em) {
    :root {
        --w-page:    1680px;
        --gutter:    4rem;
        --t-mono:    0.9rem;
        --t-eyebrow: 0.82rem;
        --t-body:    1.1875rem;
        --t-lead:    1.5rem;
        --t-h3:      2.25rem;
        --t-h2:      4.5rem;
        --t-display: 10rem;
        --t-mega:    15rem;
        --s-5: 2rem;   --s-6: 2.75rem; --s-7: 4rem;
        --s-8: 5.5rem; --s-9: 8rem;    --s-10: 10rem;
    }
    .foot { font-size: 1.0625rem; }
    .foot__bottom { font-size: 0.8rem; }
    .btn { font-size: 0.875rem; }
    .btn--lg { font-size: 0.9375rem; }
    .board__cell::before { font-size: 0.75rem; }
    .compare { font-size: 1rem; }
    .compare thead th { font-size: 0.85rem; }
    .arg__sub { font-size: 1.0625rem; }
    .guarantee__sig { font-size: 0.9375rem; }
    .guarantee__sig strong { font-size: 1.0625rem; }
    .guarantee__sig small { font-size: 0.8rem; }
    .faq summary { font-size: 1.125rem; }
    .faq__a { font-size: 1.0625rem; }
    .hero__code { font-size: 0.95rem; }
    .section__head { grid-template-columns: 18rem 1fr; }
}
@media (min-width: 160em) {
    :root {
        --w-page:    2000px;
        --gutter:    5rem;
        --t-mono:    1rem;
        --t-eyebrow: 0.9rem;
        --t-body:    1.3125rem;
        --t-lead:    1.625rem;
        --t-h3:      2.5rem;
        --t-h2:      5rem;
        --t-display: 11rem;
        --s-5: 2.25rem; --s-6: 3rem; --s-7: 4.5rem;
        --s-8: 6rem;    --s-9: 9rem;
    }
    .foot { font-size: 1.125rem; }
    .foot__bottom { font-size: 0.85rem; }
    .btn { font-size: 0.9375rem; }
    .btn--lg { font-size: 1rem; }
    .board__cell::before { font-size: 0.8rem; }
    .arg__sub { font-size: 1.125rem; }
    .hero__code { font-size: 1.05rem; }
    .section__head { grid-template-columns: 22rem 1fr; }
}

/* --------------------------------------------------------------------------
   02 · RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--f-body);
    font-size: var(--t-body);
    line-height: 1.55;
    color: var(--fg);
    background: var(--bg);
    overflow-x: hidden;
    font-feature-settings: "ss01" on, "cv11" on;
}

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

a { color: inherit; text-decoration: none; }

button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }

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

::selection { background: var(--hi); color: var(--hi-ink); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--ink); color: var(--bone); padding: var(--s-3) var(--s-5);
    font-family: var(--f-mono); font-size: var(--t-mono); z-index: 999;
}
.skip-link:focus { left: var(--s-4); top: var(--s-4); }

:focus-visible {
    outline: 2px solid var(--hi);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   03 · LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap {
    width: 100%;
    max-width: var(--w-page);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.rule        { border: 0; border-top: 1px solid var(--line); width: 100%; }
.rule--bone  { border-color: var(--line-bone); }
.rule--hi    { border-top: 2px solid var(--hi); }

.eye {
    font-family: var(--f-mono);
    font-size: var(--t-eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fg-mute);
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
}
.eye::before {
    content: "";
    width: 12px; height: 1px;
    background: currentColor;
}
.eye--hi { color: var(--hi-text); }
.eye--hi::before { background: var(--hi-text); }

/* Universal section frame */
.section {
    padding-block: clamp(4rem, 9vw, 8rem);
    position: relative;
}
.section--ink {
    background: var(--ink);
    color: var(--bone);
    --fg: var(--bone);
    --bg: var(--ink);
    --line: var(--line-bone);
    --fg-mute: rgba(239, 231, 214, 0.62);
    --hover: rgba(239, 231, 214, 0.08);
}
.section--paper { background: var(--paper); }

.section__head {
    display: grid;
    gap: var(--s-5);
    margin-bottom: var(--s-8);
    grid-template-columns: 1fr;
}
@media (min-width: 64em) {
    .section__head { grid-template-columns: 14rem 1fr; gap: var(--s-9); }
}
.section__index {
    font-family: var(--f-mono);
    font-size: var(--t-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-mute);
    border-top: 2px solid var(--hi);
    padding-top: var(--s-3);
    align-self: start;
}
.section__index strong { color: var(--fg); display: block; margin-top: var(--s-1); }
.section__title {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: var(--t-h2);
    line-height: 0.9;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    max-width: 22ch;
}
.section__title em {
    font-style: normal;
    color: var(--hi);
    font-family: var(--f-display);
}
.section__lede {
    font-size: var(--t-lead);
    color: var(--fg-mute);
    max-width: 50ch;
    margin-top: var(--s-5);
    line-height: 1.45;
}

/* --------------------------------------------------------------------------
   04 · TICKER / TOP BAR
   -------------------------------------------------------------------------- */
.ticker {
    background: var(--ink);
    color: var(--bone);
    font-family: var(--f-mono);
    font-size: var(--t-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-block: var(--s-2);
    border-bottom: 1px solid var(--line-bone);
    overflow: hidden;
    position: relative;
}
.ticker__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    flex-wrap: wrap;
}
.ticker__pulse {
    width: 8px; height: 8px;
    background: var(--hi);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 90, 31, 0.7);
    animation: pulse 2s var(--ease) infinite;
    flex-shrink: 0;
}
.ticker__line {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
}
.ticker__line a { color: var(--hi); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.ticker__line a:hover { color: var(--bone); }
.ticker__sep { opacity: 0.4; }
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 90, 31, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(255, 90, 31, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 90, 31, 0); }
}

@media (max-width: 47.99em) {
    .ticker__line--hide-mobile { display: none; }
}

/* --------------------------------------------------------------------------
   05 · HEADER / NAV
   -------------------------------------------------------------------------- */
.head {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}
.head__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    padding-block: var(--s-4);
}
.brand {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 1.375rem;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    line-height: 1;
}
.brand__mark {
    width: 32px; height: 32px;
    flex-shrink: 0;
}
.brand__mark rect { fill: var(--ink); }
[data-theme="dark"] .brand__mark rect { fill: var(--bone); }
.brand__mark .hi { fill: var(--hi); }
[data-theme="dark"] .brand__mark .hi { fill: var(--hi); }
.brand__txt { display: flex; flex-direction: column; line-height: 0.95; }
.brand__txt span:first-child { font-size: 0.85em; }
.brand__txt span:last-child { font-size: 0.85em; color: var(--hi-text); }

.nav {
    display: none;
}
.nav__list {
    display: flex; gap: var(--s-6); list-style: none;
}
.nav__link {
    font-family: var(--f-mono);
    font-size: var(--t-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fg-mute);
    padding: var(--s-2) 0;
    position: relative;
    transition: color var(--t-fast) var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--fg); }
.nav__link[aria-current="page"]::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
    height: 2px; background: var(--hi);
}
@media (min-width: 64em) {
    .nav { display: flex; }
}

.head__cta {
    display: flex; align-items: center; gap: var(--s-3);
}

.btn-tog {
    width: 40px; height: 40px;
    border: 1px solid var(--line);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn-tog:hover { background: var(--ink); color: var(--bone); }
[data-theme="dark"] .btn-tog:hover { background: var(--bone); color: var(--ink); }
.btn-tog .ic-sun { display: none; }
[data-theme="dark"] .btn-tog .ic-sun { display: block; }
[data-theme="dark"] .btn-tog .ic-moon { display: none; }

.menu-tog {
    width: 40px; height: 40px;
    border: 1px solid var(--line);
    display: inline-flex; align-items: center; justify-content: center;
}
.menu-tog span {
    width: 16px; height: 1.5px; background: currentColor;
    position: relative;
}
.menu-tog span::before, .menu-tog span::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
}
.menu-tog span::before { top: -5px; }
.menu-tog span::after  { top: 5px; }
@media (min-width: 64em) { .menu-tog { display: none; } }

/* Mobile drawer */
.nav-overlay {
    position: fixed; inset: 0;
    background: rgba(12, 12, 10, 0.6);
    backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-med) var(--ease);
    z-index: 90;
}
.nav-overlay.is-open { opacity: 1; pointer-events: auto; }

.nav-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(88vw, 380px);
    background: var(--ink);
    color: var(--bone);
    --fg: var(--bone);
    --bg: var(--ink);
    padding: var(--s-7) var(--s-6) var(--s-6);
    transform: translateX(100%);
    transition: transform var(--t-med) var(--ease-snap);
    z-index: 95;
    display: flex; flex-direction: column;
    border-left: 2px solid var(--hi);
}
.nav-drawer.is-open { transform: translateX(0); }
.nav-drawer__head {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: var(--s-5); margin-bottom: var(--s-5);
    border-bottom: 1px solid var(--line-bone);
    font-family: var(--f-mono); font-size: var(--t-mono);
    text-transform: uppercase; letter-spacing: 0.1em;
    color: rgba(239, 231, 214, 0.62);
}
.nav-drawer__close {
    width: 36px; height: 36px;
    border: 1px solid var(--line-bone);
    display: inline-flex; align-items: center; justify-content: center;
}
.nav-drawer__list { list-style: none; display: flex; flex-direction: column; gap: var(--s-1); }
.nav-drawer__link {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--f-display); font-size: 2rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: -0.01em;
    padding: var(--s-3) 0; border-bottom: 1px solid var(--line-bone);
}
.nav-drawer__link span:last-child {
    font-family: var(--f-mono); font-size: 0.65rem; opacity: 0.5; letter-spacing: 0.1em;
}
.nav-drawer__link:hover, .nav-drawer__link:focus { color: var(--hi); }
.nav-drawer__cta {
    margin-top: auto; padding-top: var(--s-6);
    display: flex; flex-direction: column; gap: var(--s-3);
}

@media (min-width: 64em) {
    .nav-drawer, .nav-overlay { display: none; }
}

/* --------------------------------------------------------------------------
   06 · BUTTONS
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-5);
    font-family: var(--f-mono);
    font-size: var(--t-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1.5px solid currentColor;
    background: transparent;
    color: var(--fg);
    transition: all var(--t-fast) var(--ease);
    position: relative;
    overflow: hidden;
    line-height: 1;
    white-space: nowrap;
}
.btn::before {
    content: ""; position: absolute; inset: 0;
    background: currentColor; transform: translateY(101%);
    transition: transform var(--t-med) var(--ease-snap);
    z-index: 0;
}
.btn:hover::before { transform: translateY(0); }
.btn span, .btn svg { position: relative; z-index: 1; transition: color var(--t-med) var(--ease-snap); }
.btn:hover span, .btn:hover svg { color: var(--bg); }

.btn--hi {
    background: var(--hi);
    border-color: var(--hi);
    color: var(--ink);
}
.btn--hi::before { background: var(--ink); }
.btn--hi:hover span, .btn--hi:hover svg { color: var(--hi); }

.btn--ghost-bone {
    color: var(--bone);
    border-color: var(--bone);
}
.btn--ghost-bone:hover span, .btn--ghost-bone:hover svg { color: var(--ink); }
.btn--ghost-bone::before { background: var(--bone); }

.btn--full { display: flex; justify-content: center; width: 100%; }
.btn--lg { padding: var(--s-4) var(--s-6); font-size: 0.8125rem; }

.btn .arr {
    display: inline-block;
    transition: transform var(--t-med) var(--ease-snap);
}
.btn:hover .arr { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   07 · HERO
   -------------------------------------------------------------------------- */
.hero {
    background: var(--ink);
    color: var(--bone);
    --fg: var(--bone);
    --bg: var(--ink);
    position: relative;
    overflow: hidden;
    padding-block: var(--s-7) var(--s-8);
    border-bottom: 2px solid var(--hi);
    --line: var(--line-bone);
    --fg-mute: rgba(239, 231, 214, 0.62);
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--line-bone) 1px, transparent 1px),
        linear-gradient(90deg, var(--line-bone) 1px, transparent 1px);
    background-size: 64px 64px;
    background-position: -1px -1px;
    pointer-events: none;
    opacity: 0.5;
    mask-image: radial-gradient(ellipse at top right, transparent 0%, #000 70%);
}

.hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-7);
    position: relative;
    z-index: 1;
}
@media (min-width: 64em) {
    .hero__grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: var(--s-8);
        align-items: center;
    }
}

.hero__meta {
    display: flex; flex-wrap: wrap; gap: var(--s-5);
    font-family: var(--f-mono); font-size: var(--t-mono);
    text-transform: uppercase; letter-spacing: 0.1em;
    color: rgba(239, 231, 214, 0.62);
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--line-bone);
    margin-bottom: var(--s-6);
}
.hero__meta strong { color: var(--bone); font-weight: 500; }
.hero__meta-item { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero__meta-dot { width: 6px; height: 6px; background: var(--hi); border-radius: 50%; }

.hero__title {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: var(--t-display);
    line-height: 0.86;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    margin-bottom: var(--s-5);
}
.hero__title .lh-1 { display: block; }
.hero__title .lh-2 { display: block; color: var(--hi); }
.hero__title .lh-3 { display: block; }
.hero__title em {
    font-style: normal;
    color: var(--hi);
    font-family: var(--f-display);
    position: relative;
}

.hero__lede {
    font-size: var(--t-lead);
    line-height: 1.45;
    color: rgba(239, 231, 214, 0.78);
    max-width: 48ch;
    margin-bottom: var(--s-6);
}
.hero__lede strong { color: var(--bone); font-weight: 500; }

.hero__cta {
    display: flex; flex-wrap: wrap; gap: var(--s-3);
    margin-bottom: var(--s-7);
}

.hero__trust {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-4) var(--s-5);
    border-top: 1px solid var(--line-bone);
    padding-top: var(--s-5);
}
@media (min-width: 30em) {
    .hero__trust { grid-template-columns: repeat(4, 1fr); }
}
.hero__trust-item {
    font-family: var(--f-mono);
    font-size: var(--t-mono);
    line-height: 1.4;
}
.hero__trust-num {
    display: block;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.75rem;
    color: var(--bone);
    letter-spacing: -0.01em;
    margin-bottom: 2px;
}
.hero__trust-label {
    color: rgba(239, 231, 214, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.65rem;
}

/* Hero console / globe panel */
.hero__panel {
    position: relative;
    border: 1px solid var(--line-bone);
    background: rgba(255, 255, 255, 0.015);
    aspect-ratio: 1;
    overflow: hidden;
}
.hero__panel-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--line-bone);
    font-family: var(--f-mono); font-size: 0.65rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(239, 231, 214, 0.55);
    background: rgba(0, 0, 0, 0.2);
}
.hero__panel-dots { display: inline-flex; gap: 4px; }
.hero__panel-dots i { width: 6px; height: 6px; background: var(--hi); border-radius: 50%; opacity: 0.4; }
.hero__panel-dots i:first-child { opacity: 1; }
.hero__panel-dots i:nth-child(2) { background: var(--bone); opacity: 0.5; }

.hero__code {
    padding: var(--s-4) var(--s-5);
    margin: 0;
    font-family: var(--f-mono);
    font-size: clamp(0.72rem, 0.9vw, 0.85rem);
    line-height: 1.65;
    color: rgba(239, 231, 214, 0.8);
    white-space: pre;
    overflow: hidden;
    height: calc(100% - 36px);
}
.hero__code::after {
    content: '▋';
    color: var(--hi);
    animation: blink 0.9s steps(2) infinite;
}
@keyframes blink {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* --------------------------------------------------------------------------
   08 · MARQUEE BAND
   -------------------------------------------------------------------------- */
.band {
    background: var(--hi);
    color: var(--ink);
    border-block: 2px solid var(--ink);
    padding-block: var(--s-4);
    overflow: hidden;
    font-family: var(--f-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: 1;
}
.band__track {
    display: flex;
    gap: var(--s-7);
    white-space: nowrap;
    animation: marquee 32s linear infinite;
    will-change: transform;
}
.band__item {
    display: inline-flex; align-items: center; gap: var(--s-7);
}
.band__item::after {
    content: "✦";
    color: var(--ink);
    opacity: 0.6;
}
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .band__track { animation: none; }
}

/* --------------------------------------------------------------------------
   09 · ARGUMENT — what's wrong with templates
   -------------------------------------------------------------------------- */
.arg__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: var(--s-5);
    border-top: 1px solid var(--line);
}
@media (min-width: 48em) {
    .arg__grid { grid-template-columns: repeat(2, 1fr); }
}
.arg__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-bottom: 1px solid var(--line);
    padding: var(--s-5) var(--s-5);
    gap: var(--s-3);
}
@media (min-width: 48em) {
    .arg__row {
        padding: var(--s-6);
    }
    .arg__row:nth-child(odd) { border-right: 1px solid var(--line); }
}
.arg__row--bad { background: var(--bone-2); }
.arg__row--good { background: var(--ink); color: var(--bone); --fg: var(--bone); --bg: var(--ink); }
.arg__row--good .arg__num { color: var(--hi); border-color: var(--line-bone); }
.arg__row--good .arg__sub { color: rgba(239, 231, 214, 0.65); }

.arg__num {
    font-family: var(--f-mono);
    font-size: var(--t-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fg-mute);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--line);
    display: flex; justify-content: space-between;
}
.arg__row--good .arg__num { color: rgba(239, 231, 214, 0.65); }
.arg__title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: var(--t-h3);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}
.arg__title em { font-style: normal; color: var(--hi); }
.arg__sub {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--fg-mute);
}

/* --------------------------------------------------------------------------
   10 · DELIVERABLES (was "services")
   -------------------------------------------------------------------------- */
.deliv {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border: 1px solid var(--line);
}
@media (min-width: 64em) {
    .deliv { grid-template-columns: repeat(3, 1fr); }
}
.deliv__card {
    padding: var(--s-6);
    border-bottom: 1px solid var(--line);
    position: relative;
    transition: background var(--t-med) var(--ease);
}
.deliv__card:last-child { border-bottom: 0; }
@media (min-width: 64em) {
    .deliv__card { border-bottom: 0; border-right: 1px solid var(--line); }
    .deliv__card:last-child { border-right: 0; }
}
.deliv__card:hover { background: var(--hover); }
.deliv__num {
    font-family: var(--f-mono);
    font-size: var(--t-mono);
    color: var(--hi-text);
    letter-spacing: 0.1em;
    margin-bottom: var(--s-5);
    display: flex; justify-content: space-between; align-items: baseline;
}
.deliv__num strong { color: var(--fg-mute); font-weight: 400; }
.deliv__h {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.875rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: var(--s-3);
}
.deliv__p {
    color: var(--fg-mute);
    line-height: 1.55;
    margin-bottom: var(--s-5);
}
.deliv__list {
    list-style: none;
    border-top: 1px solid var(--line);
    font-family: var(--f-mono);
    font-size: 0.8125rem;
}
.deliv__list li {
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--line-soft);
    display: flex; align-items: baseline; gap: var(--s-3);
}
.deliv__list li:last-child { border-bottom: 0; }
.deliv__list li::before {
    content: "+";
    color: var(--hi-text);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   11 · STAT BOARD
   -------------------------------------------------------------------------- */
.board {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}
@media (min-width: 48em) {
    .board { grid-template-columns: repeat(4, 1fr); }
}
.board__cell {
    padding: var(--s-6) var(--s-5);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}
.board__cell::before {
    content: attr(data-tag);
    position: absolute;
    top: var(--s-3); right: var(--s-4);
    font-family: var(--f-mono);
    font-size: 0.625rem;
    color: var(--fg-mute);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.board__num {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 0.9;
    letter-spacing: -0.02em;
    margin-bottom: var(--s-3);
}
.board__num em { font-style: normal; color: var(--hi); }
.board__lbl {
    font-family: var(--f-mono);
    font-size: var(--t-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fg-mute);
}

/* --------------------------------------------------------------------------
   12 · COMPARE TABLE
   -------------------------------------------------------------------------- */
.compare {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--f-mono);
    font-size: 0.875rem;
}
.compare th, .compare td {
    padding: var(--s-4) var(--s-3);
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
.compare thead th {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fg-mute);
    border-bottom: 2px solid var(--ink);
    padding-bottom: var(--s-3);
    font-weight: 500;
}
.compare th:first-child { color: transparent; }
.compare td:first-child {
    font-family: var(--f-body);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--fg);
}
.compare__us {
    background: var(--ink);
    color: var(--bone);
    --fg: var(--bone);
}
.compare__us strong { color: var(--hi); font-weight: 600; }
.compare th.compare__us {
    color: var(--hi);
    border-bottom-color: var(--hi);
}
.compare .yes { color: var(--hi-text); }
.compare .no { color: var(--fg-mute); text-decoration: line-through; }

/* On phones the multi-column matrix can't fit without a horizontal scroll, so
   each row collapses into a self-labeled card (no scroll, fully legible). The
   data-label attributes on each <td> supply the column name. */
@media (max-width: 47.99em) {
    .compare-wrap { margin-inline: 0; overflow: visible; }
    .compare,
    .compare tbody,
    .compare tr,
    .compare td { display: block; width: auto; }
    .compare { min-width: 0; border-top: 0; }
    .compare thead {
        position: absolute; width: 1px; height: 1px;
        padding: 0; margin: -1px; overflow: hidden;
        clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    .compare tbody tr {
        border: 1px solid var(--line);
        margin-bottom: var(--s-4);
        padding: var(--s-4) var(--s-5) var(--s-3);
        background: var(--bg);
    }
    .compare tbody tr:last-child { margin-bottom: 0; }
    .compare td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--s-5);
        padding: var(--s-3) 0;
        border: 0;
        border-bottom: 1px solid var(--line-soft);
        text-align: right;
        font-size: 0.9375rem;
    }
    .compare td:last-child { border-bottom: 0; padding-bottom: 0; }
    .compare td::before {
        content: attr(data-label);
        font-family: var(--f-mono);
        font-size: 0.7rem;
        line-height: 1.4;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--fg-mute);
        text-align: left;
    }
    /* the first cell of each row is the feature name → promote to a heading */
    .compare td:first-child {
        display: block;
        text-align: left;
        font-family: var(--f-display);
        font-weight: 700;
        font-size: 1.25rem;
        line-height: 1.05;
        letter-spacing: -0.005em;
        text-transform: uppercase;
        color: var(--fg);
        padding: 0 0 var(--s-3);
        margin-bottom: var(--s-2);
        border-bottom: 1px solid var(--line);
    }
    .compare td:first-child::before { content: none; }
    /* neutralize the desktop dark "us" column fill and keep the winner highlighted */
    .compare td.compare__us {
        background: transparent;
        color: inherit;
    }
    .compare td.compare__us::before { color: var(--hi-text); }
    .compare td.compare__us strong { color: var(--hi-text); }
}

/* --------------------------------------------------------------------------
   13 · PRICING
   -------------------------------------------------------------------------- */
.price {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-4);
    align-items: stretch;
}
@media (min-width: 56em) {
    .price { grid-template-columns: 1fr 1.15fr; gap: var(--s-5); }
}

.price-card {
    border: 1px solid var(--line);
    background: var(--paper);
    padding: var(--s-6);
    display: flex;
    flex-direction: column;
    position: relative;
}
.price-card__head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: var(--s-4);
    margin-bottom: var(--s-5);
    border-bottom: 1px solid var(--line);
}
.price-card__name {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.625rem;
    line-height: 1;
    text-transform: uppercase;
}
.price-card__tag {
    font-family: var(--f-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fg-mute);
}
.price-card__amt {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: clamp(3.5rem, 8vw, 5.5rem);
    line-height: 0.9;
    letter-spacing: -0.025em;
    margin-bottom: var(--s-2);
}
.price-card__amt sup {
    font-size: 0.4em;
    font-weight: 600;
    vertical-align: top;
    margin-right: 4px;
    top: 0.15em;
    position: relative;
}
.price-card__amt em { font-style: normal; color: var(--fg-mute); }
.price-card__per {
    font-family: var(--f-mono);
    font-size: var(--t-mono);
    color: var(--fg-mute);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--s-5);
}
.price-card__list {
    list-style: none;
    flex-grow: 1;
    margin-bottom: var(--s-6);
}
.price-card__list li {
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--line-soft);
    display: flex; align-items: baseline; gap: var(--s-3);
    font-size: 0.95rem;
}
.price-card__list li::before {
    content: "✓";
    color: var(--hi-text);
    font-weight: 600;
    flex-shrink: 0;
}
.price-card__list li.-no { color: var(--fg-mute); }
.price-card__list li.-no::before { content: "—"; color: var(--fg-mute); }

.price-card--feature {
    background: var(--ink);
    color: var(--bone);
    border-color: var(--ink);
    --fg: var(--bone);
    --bg: var(--ink);
    --line: var(--line-bone);
    --line-soft: rgba(239, 231, 214, 0.06);
    --fg-mute: rgba(239, 231, 214, 0.6);
    position: relative;
}
.price-card--feature::before {
    content: "RECOMMENDED";
    position: absolute;
    top: -1px; right: var(--s-5);
    background: var(--hi);
    color: var(--ink);
    padding: var(--s-2) var(--s-4);
    font-family: var(--f-mono);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    font-weight: 600;
}
.price-card--feature .price-card__amt em { color: var(--hi); }

/* --------------------------------------------------------------------------
   14 · PROCESS
   -------------------------------------------------------------------------- */
.process {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--line);
}
@media (min-width: 64em) {
    .process { grid-template-columns: repeat(4, 1fr); }
}
.proc {
    padding: var(--s-7) var(--s-5);
    border-bottom: 1px solid var(--line);
    position: relative;
}
@media (min-width: 64em) {
    .proc {
        border-bottom: 0;
        border-right: 1px solid var(--line);
    }
    .proc:last-child { border-right: 0; }
}
.proc__num {
    font-family: var(--f-mono);
    font-size: var(--t-mono);
    color: var(--hi-text);
    letter-spacing: 0.14em;
    margin-bottom: var(--s-5);
}
.proc__h {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 2.25rem;
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: var(--s-4);
}
.proc__p {
    color: var(--fg-mute);
    line-height: 1.55;
    font-size: 0.95rem;
    margin-bottom: var(--s-4);
}
.proc__time {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    color: var(--hi-text);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-top: 1px solid var(--line);
    padding-top: var(--s-3);
}

/* --------------------------------------------------------------------------
   15 · GUARANTEE / RISK REVERSAL
   -------------------------------------------------------------------------- */
.guarantee {
    background: var(--ink);
    color: var(--bone);
    border: 2px solid var(--hi);
    padding: clamp(2rem, 5vw, 4rem);
    position: relative;
    --fg: var(--bone);
    --bg: var(--ink);
    --fg-mute: rgba(239, 231, 214, 0.65);
    --line: var(--line-bone);
}
.guarantee__stamp {
    position: absolute;
    top: var(--s-5); right: var(--s-5);
    font-family: var(--f-mono);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hi);
    border: 1px solid var(--hi);
    padding: var(--s-2) var(--s-3);
}
.guarantee__h {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin-bottom: var(--s-5);
    max-width: 22ch;
}
.guarantee__h em {
    font-style: normal;
    color: var(--hi);
    font-family: var(--f-display);
}
.guarantee__p {
    font-size: var(--t-lead);
    color: var(--fg-mute);
    max-width: 60ch;
    margin-bottom: var(--s-6);
    line-height: 1.5;
}
.guarantee__sig {
    display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-7);
    align-items: baseline;
    border-top: 1px solid var(--line-bone);
    padding-top: var(--s-5);
    font-family: var(--f-mono);
    font-size: 0.8125rem;
}
.guarantee__sig strong { color: var(--bone); display: block; font-weight: 500; font-size: 0.95rem; margin-bottom: 2px; }
.guarantee__sig small { color: var(--fg-mute); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; }
@media (max-width: 47.99em) {
    .guarantee { padding: var(--s-7) var(--s-5); }
    .guarantee__stamp { top: var(--s-2); right: var(--s-3); }
}

/* --------------------------------------------------------------------------
   16 · FAQ
   -------------------------------------------------------------------------- */
.faq__list {
    border-top: 1px solid var(--line);
}
.faq details {
    border-bottom: 1px solid var(--line);
}
.faq summary {
    list-style: none;
    cursor: pointer;
    padding: var(--s-5) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-5);
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    transition: color var(--t-fast) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--hi); }
.faq__icon {
    width: 32px; height: 32px;
    flex-shrink: 0;
    border: 1.5px solid currentColor;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-med) var(--ease);
    font-family: var(--f-mono);
    font-weight: 700;
    font-size: 1rem;
}
.faq details[open] .faq__icon { background: var(--hi); border-color: var(--hi); color: var(--ink); transform: rotate(45deg); }
.faq__a {
    padding: 0 0 var(--s-6) 0;
    color: var(--fg-mute);
    line-height: 1.6;
    max-width: 70ch;
    font-size: 1.0625rem;
}
.faq__a code {
    font-family: var(--f-mono);
    background: var(--paper);
    padding: 2px 6px;
    font-size: 0.85em;
    border: 1px solid var(--line);
}
.faq__a a { color: var(--hi-text); border-bottom: 1px solid currentColor; }

/* --------------------------------------------------------------------------
   17 · CONTACT / FORM
   -------------------------------------------------------------------------- */
.contact__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-7);
}
@media (min-width: 64em) {
    .contact__grid { grid-template-columns: 1fr 1.1fr; gap: var(--s-9); }
}

.contact__channels {
    display: flex; flex-direction: column;
    border-top: 1px solid var(--line);
}
.channel {
    display: grid;
    grid-template-columns: 5rem 1fr auto;
    align-items: center;
    gap: var(--s-4);
    padding-block: var(--s-5);
    border-bottom: 1px solid var(--line);
    transition: background var(--t-fast) var(--ease);
}
.channel:hover { background: var(--hover); }
.channel__tag {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--hi-text);
}
.channel__val {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    text-transform: uppercase;
    letter-spacing: -0.005em;
    line-height: 1;
}
.channel__sub {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    color: var(--fg-mute);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
@media (max-width: 47.99em) {
    .channel { grid-template-columns: 1fr; gap: var(--s-1); padding-block: var(--s-4); }
    .channel__sub { display: none; }
}

.form {
    background: var(--ink);
    color: var(--bone);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    --fg: var(--bone);
    --bg: var(--ink);
    --line: var(--line-bone);
    --fg-mute: rgba(239, 231, 214, 0.6);
    border: 1px solid var(--ink);
    position: relative;
}
.form__head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--line-bone);
    margin-bottom: var(--s-5);
}
.form__h {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.625rem;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    line-height: 1;
}
.form__id {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fg-mute);
}
.field { margin-bottom: var(--s-4); }
.field__label {
    display: block;
    font-family: var(--f-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(239, 231, 214, 0.7);
    margin-bottom: var(--s-2);
}
.field__label .req { color: var(--hi); }
.field__input,
.field__select,
.field__textarea {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1.5px solid var(--line-bone);
    padding: var(--s-3) 0;
    font-size: 1rem;
    color: var(--bone);
    font-family: var(--f-body);
    transition: border-color var(--t-fast) var(--ease);
}
.field__input:focus,
.field__select:focus,
.field__textarea:focus {
    outline: none;
    border-bottom-color: var(--hi);
}
.field__input::placeholder, .field__textarea::placeholder { color: rgba(239, 231, 214, 0.35); }
.field__select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23FF5A1F' stroke-width='1.5' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--s-2) center;
    padding-right: var(--s-6);
}
.field__select option { background: var(--ink); color: var(--bone); }
.field__textarea { resize: vertical; min-height: 7rem; }
.form__note {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    color: var(--fg-mute);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    margin-top: var(--s-4);
}

.field__radios {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2);
    margin-top: var(--s-2);
}
.radio-pill {
    display: flex; align-items: center; justify-content: center;
    padding: var(--s-3);
    border: 1px solid var(--line-bone);
    cursor: pointer;
    font-family: var(--f-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: all var(--t-fast) var(--ease);
    text-align: center;
}
.radio-pill input { position: absolute; opacity: 0; }
.radio-pill:has(input:checked) { background: var(--hi); border-color: var(--hi); color: var(--ink); }
.radio-pill:hover { border-color: var(--hi); }

/* --------------------------------------------------------------------------
   18 · CTA STRIP
   -------------------------------------------------------------------------- */
.strip {
    background: var(--ink);
    color: var(--bone);
    padding-block: clamp(3rem, 8vw, 6rem);
    border-top: 2px solid var(--hi);
    text-align: center;
    --fg: var(--bone);
    --bg: var(--ink);
    --fg-mute: rgba(239, 231, 214, 0.6);
}
.strip__h {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    line-height: 0.9;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    margin-bottom: var(--s-5);
    max-width: 18ch;
    margin-inline: auto;
}
.strip__h em { font-style: normal; color: var(--hi); }
.strip__p {
    font-size: var(--t-lead);
    color: var(--fg-mute);
    max-width: 50ch;
    margin: 0 auto var(--s-6);
    line-height: 1.5;
}
.strip__cta {
    display: inline-flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center;
}

/* --------------------------------------------------------------------------
   19 · FOOTER
   -------------------------------------------------------------------------- */
.foot {
    background: var(--ink);
    color: var(--bone);
    padding-block: var(--s-7);
    --fg: var(--bone);
    --bg: var(--ink);
    --line: var(--line-bone);
    --fg-mute: rgba(239, 231, 214, 0.55);
    font-size: 0.9375rem;
}
.foot__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-7);
    padding-bottom: var(--s-7);
    border-bottom: 1px solid var(--line-bone);
}
@media (min-width: 56em) {
    .foot__top { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}
.foot__brand-mark {
    display: flex; align-items: center; gap: var(--s-3);
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: var(--s-4);
}
.foot__brand-mark .brand__mark rect { fill: var(--bone); }
.foot__brand-mark .brand__mark .hi { fill: var(--hi); }
.foot__tagline {
    color: var(--fg-mute);
    line-height: 1.55;
    max-width: 32ch;
    margin-bottom: var(--s-5);
}
.foot__addr {
    font-family: var(--f-mono);
    font-size: 0.75rem;
    color: var(--fg-mute);
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-style: normal;
}
.foot__addr a { color: var(--bone); border-bottom: 1px solid var(--line-bone); }
.foot__addr a:hover { color: var(--hi); border-color: var(--hi); }
.foot__h {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fg-mute);
    margin-bottom: var(--s-4);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--line-bone);
}
.foot__list { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
.foot__list a {
    color: var(--bone);
    font-size: 1rem;
    transition: color var(--t-fast) var(--ease);
}
.foot__list a:hover { color: var(--hi); }
.foot__bottom {
    padding-top: var(--s-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    justify-content: space-between;
    align-items: center;
    font-family: var(--f-mono);
    font-size: 0.7rem;
    color: var(--fg-mute);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.foot__bottom .hi { color: var(--hi); }

/* --------------------------------------------------------------------------
   20 · ABOUT-PAGE BLOCKS
   -------------------------------------------------------------------------- */
.colophon {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border: 1px solid var(--line);
}
@media (min-width: 48em) { .colophon { grid-template-columns: repeat(2, 1fr); } }
.colophon__row {
    padding: var(--s-5) var(--s-6);
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    align-items: baseline;
    gap: var(--s-4);
    font-family: var(--f-mono);
    font-size: 0.875rem;
}
/* On small phones the fixed key column starves the value column and forces
   horizontal overflow — stack key over value instead. */
@media (max-width: 26em) {
    .colophon__row {
        grid-template-columns: 1fr;
        gap: var(--s-1);
        padding: var(--s-4) var(--s-5);
    }
}
@media (min-width: 48em) {
    .colophon__row:nth-child(odd) { border-right: 1px solid var(--line); }
    .colophon__row:nth-last-child(2) { border-bottom: 0; }
    .colophon__row:last-child { border-bottom: 0; }
}
.colophon__row:last-child { border-bottom: 0; }
.colophon__k {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fg-mute);
}
.colophon__v { color: var(--fg); }

.principles {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-1);
    counter-reset: prin;
}
@media (min-width: 56em) { .principles { grid-template-columns: 1fr 1fr; gap: 0; } }
.prin {
    padding: var(--s-6);
    border-bottom: 1px solid var(--line);
    counter-increment: prin;
    position: relative;
    transition: background var(--t-fast) var(--ease);
}
@media (min-width: 56em) {
    .prin:nth-child(odd) { border-right: 1px solid var(--line); }
}
.prin:hover { background: var(--hover); }
.prin::before {
    content: counter(prin, decimal-leading-zero);
    font-family: var(--f-mono);
    font-size: 0.75rem;
    color: var(--hi-text);
    letter-spacing: 0.12em;
    display: block;
    margin-bottom: var(--s-3);
}
.prin__h {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.625rem;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    line-height: 1.05;
    margin-bottom: var(--s-3);
}
.prin__p { color: var(--fg-mute); line-height: 1.55; }

/* --------------------------------------------------------------------------
   21 · UTILITIES
   -------------------------------------------------------------------------- */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.no-mob { display: none; }
@media (min-width: 48em) { .no-mob { display: initial; } }

.body-locked { overflow: hidden; }

[data-theme="dark"] .arg__row--bad { background: var(--ink-2); }
[data-theme="dark"] .price-card { background: var(--ink-2); border-color: var(--line-bone); }
/* hover states (.deliv__card, .channel, .prin) and code backgrounds now use the
   theme-aware --hover / --paper tokens, so no per-theme overrides are needed. */