/* ============================================================================
   Trust Letter Service — site.css
   Hand-written. No build step. No Tailwind. No reset library.
   Aesthetic targets per PID §4: editorial, serif-led, restrained palette,
   dense information layout, hairline rules over filled cards. NO purple
   gradients, NO bento card stacks, NO Inter, NO emoji.
   ========================================================================== */

/* ---- 1. Tokens (PID §4.3 / §4.2) ---- */

:root {
    --ink:        #1F2A44;
    --ink-soft:   #2A3550;
    --paper:      #F8F6F2;
    --paper-2:    #F1ECE0;
    --paper-3:    #EAE3D2;
    --rule:       #C9C3B4;
    --rule-soft:  #DCD6C7;
    --mute:       #6B6F77;
    --accent:     #8B2C2C;
    --accent-2:   #B47B3A;

    --ok:         #2D6A4F;
    --warn:       #B45309;
    --err:        #991B1B;
    --code-bg:    #F0EBE0;

    --console-bg:    #FAFAF7;
    --console-panel: #FFFFFF;
    --console-rule:  #E5E2D8;

    /* Type scale: 14, 16, 18, 22, 28, 36, 48 */
    --t-14: 0.875rem;
    --t-16: 1rem;
    --t-18: 1.125rem;
    --t-22: 1.375rem;
    --t-28: 1.75rem;
    --t-36: 2.25rem;
    --t-48: 3rem;

    /* Stack — heading uses serif, body uses sans, numerals use mono with tabular-nums.
       System fallbacks chosen to avoid Inter and Helvetica at any cost. */
    --font-display: "Source Serif 4", "Source Serif Pro", "Newsreader", Georgia, "Times New Roman", serif;
    --font-body:    "IBM Plex Sans", "Source Sans 3", "Source Sans Pro", system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-mono:    "IBM Plex Mono", "JetBrains Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;

    --container: 1180px;
    --container-console: 1320px;

    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 56px;
    --space-10: 80px;
    --space-11: 112px;
    --space-12: 160px;

    --radius-soft: 2px;
    --radius-min:  1px;

    --motion: 150ms ease-out;
}

/* ---- 2. Element resets — minimal, intentional ---- */

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

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: opacity var(--motion);
}
a:hover { opacity: 0.7; }
a.link-quiet {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1px;
}
a.link-quiet:hover { opacity: 1; border-bottom-color: var(--ink); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 500;
    margin: 0 0 var(--space-4);
    line-height: 1.18;
    letter-spacing: -0.005em;
}
h1 { font-size: var(--t-48); font-weight: 400; letter-spacing: -0.012em; }
h2 { font-size: var(--t-36); }
h3 { font-size: var(--t-28); }
h4 { font-size: var(--t-22); font-weight: 500; }
h5 { font-size: var(--t-18); font-weight: 500; }
h6 { font-size: var(--t-16); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

p { margin: 0 0 var(--space-4); }
strong { font-weight: 600; }

ul, ol { margin: 0 0 var(--space-4); padding: 0 0 0 1.4em; }
li + li { margin-top: var(--space-2); }

hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: var(--space-8) 0;
}

code, pre, .mono {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1;
}
code { background: var(--code-bg); padding: 0.05em 0.3em; border-radius: var(--radius-soft); font-size: 0.92em; }
pre  { background: var(--code-bg); padding: var(--space-4); overflow-x: auto; border-radius: var(--radius-soft); }

/* ---- 3. Layout primitives ---- */

.wrap {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--space-6);
}
.wrap-narrow { max-width: 760px; }
.wrap-wide   { max-width: var(--container-console); }

.section {
    padding: var(--space-10) 0;
}
.section + .section {
    padding-top: var(--space-9);
}
.section--tight { padding: var(--space-8) 0; }
.section--air   { padding: var(--space-11) 0; }
.section--alt   { background: var(--paper-2); }
.section--ink   {
    background: var(--ink);
    color: var(--paper);
}
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: var(--paper); }
.section--ink .eyebrow { color: rgba(248, 246, 242, 0.62); }
.section--ink a { color: var(--paper); }
.section--ink .lede { color: rgba(248, 246, 242, 0.86); }
.section--ink .btn-primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.section--ink .btn-secondary { color: var(--paper); border-color: var(--paper); }
.section--ink .btn-secondary:hover { background: var(--paper); color: var(--ink); }
@media (max-width: 760px) {
    .section { padding: var(--space-9) 0; }
    .section + .section { padding-top: var(--space-9); }
    .section--air { padding: var(--space-9) 0; }
}

/* 12-col grid used asymmetrically per PID §4.4 */
.grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-7);
}
@media (max-width: 760px) {
    .grid-12 { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* Skip link (a11y) */
.skip {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip:focus {
    left: var(--space-4);
    top: var(--space-4);
    width: auto; height: auto;
    padding: var(--space-2) var(--space-4);
    background: var(--ink);
    color: var(--paper);
    z-index: 100;
}

/* ---- 4. Site chrome — header + footer ---- */

.site-header {
    border-bottom: 1px solid var(--rule);
    padding: var(--space-6) 0;
}
.header-row {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: nowrap;
}
.brand {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--ink);
}
.brand:hover { opacity: 1; }
.brand-mark {
    color: var(--accent);
    font-family: var(--font-display);
    font-size: var(--t-22);
    line-height: 1;
}
.brand-name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--t-18);
    letter-spacing: -0.005em;
}

.primary-nav {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex: 1 1 auto;
    flex-wrap: nowrap;
}
.primary-nav a {
    color: var(--ink);
    text-decoration: none;
    font-size: var(--t-16);
    white-space: nowrap;
}
.primary-nav a:hover { color: var(--accent); opacity: 1; }

.header-cta {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Hamburger — visible only at <= 1080px. Keeps the editorial feel:
   2 hairline bars, no rounded box, no shadow, no animation gimmick. */
.hamburger {
    display: none;
    appearance: none;
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink);
    width: 40px;
    height: 40px;
    padding: 0;
    cursor: pointer;
    position: relative;
    flex: 0 0 auto;
}
.hamburger:hover { border-color: var(--ink); }
.hamburger span {
    display: block;
    position: absolute;
    left: 9px;
    right: 9px;
    height: 1px;
    background: var(--ink);
    transition: transform var(--motion), opacity var(--motion), top var(--motion);
}
.hamburger span:nth-child(1) { top: 13px; }
.hamburger span:nth-child(2) { top: 20px; }
.hamburger span:nth-child(3) { top: 27px; }
.hamburger[aria-expanded="true"] span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { top: 20px; transform: rotate(-45deg); }

/* Mobile drawer panel — slides down from below the header. */
.mobile-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: var(--space-6) 0 var(--space-7);
    z-index: 50;
    box-shadow: 0 8px 24px -16px rgba(31, 42, 68, 0.18);
}
.mobile-nav .wrap > * + * { margin-top: var(--space-3); }
.mobile-nav a {
    display: block;
    padding: var(--space-3) 0;
    color: var(--ink);
    text-decoration: none;
    font-size: var(--t-18);
    border-bottom: 1px solid var(--rule);
}
.mobile-nav a:last-of-type { border-bottom: 0; }
.mobile-nav a:hover { color: var(--accent); opacity: 1; }
.mobile-nav .mobile-cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--rule);
}
.mobile-nav .mobile-cta .btn { width: 100%; justify-content: center; text-align: center; }

.site-header { position: relative; }
body.menu-open { overflow: hidden; }

@media (max-width: 1080px) {
    .primary-nav { display: none; }
    .header-cta { display: none; }
    .hamburger { display: block; }
    .header-row { justify-content: space-between; }
    .mobile-nav.is-open { display: block; }
}

.site-footer {
    margin-top: var(--space-10);
    border-top: 1px solid var(--rule);
    padding: var(--space-9) 0 var(--space-7);
    background: transparent;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--space-9);
}
.footer-grid h4 {
    font-family: var(--font-body);
    font-size: var(--t-14);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mute);
    margin-bottom: var(--space-3);
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin: 0 0 var(--space-2); }
.footer-grid a {
    color: var(--ink);
    text-decoration: none;
    font-size: var(--t-16);
}
.footer-grid a:hover { color: var(--accent); opacity: 1; }

.foot-base {
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--rule);
    display: flex;
    justify-content: space-between;
    gap: var(--space-7);
    flex-wrap: wrap;
}
.small { font-size: var(--t-14); }
.muted { color: var(--mute); }

@media (max-width: 760px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
    .foot-base { flex-direction: column; gap: var(--space-3); }
}

/* ---- 5. Buttons ---- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 12px 22px;
    font-family: var(--font-body);
    font-size: var(--t-16);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--radius-soft);
    transition: opacity var(--motion), background-color var(--motion), color var(--motion), border-color var(--motion);
    line-height: 1;
}
.btn-primary {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}
.btn-primary:hover { opacity: 0.85; }
.btn-secondary {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}
.btn-secondary:hover { background: var(--ink); color: var(--paper); opacity: 1; }
.btn-ghost {
    background: transparent;
    color: var(--accent);
    border-color: transparent;
    padding-left: 0; padding-right: 0;
}
.btn-ghost::after { content: " →"; }

/* ---- 6. Forms ---- */

label {
    display: block;
    font-size: var(--t-14);
    font-weight: 500;
    margin-bottom: var(--space-2);
}
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], textarea, select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--rule);
    background: #FFFFFF;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--t-16);
    line-height: 1.4;
    border-radius: var(--radius-soft);
    transition: border-color var(--motion);
}
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}
textarea { min-height: 140px; resize: vertical; }

fieldset {
    border: 0;
    border-top: 1px solid var(--rule);
    padding: var(--space-6) 0 0;
    margin: var(--space-7) 0 0;
}
fieldset legend {
    font-size: var(--t-14);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mute);
    padding: 0 var(--space-3) 0 0;
}

.field { margin-bottom: var(--space-5); }
.field .help { font-size: var(--t-14); color: var(--mute); margin-top: var(--space-2); }
.field .err  { font-size: var(--t-14); color: var(--err);  margin-top: var(--space-2); }
.required::after { content: " *"; color: var(--accent); }

/* ---- 7. Tables (real <table>, tabular-nums) ---- */

table.data {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-6) 0 var(--space-8);
}
table.data th, table.data td {
    text-align: left;
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}
table.data th {
    font-family: var(--font-body);
    font-size: var(--t-14);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mute);
    font-weight: 500;
    background: transparent;
    border-bottom: 1px solid var(--ink);
}
table.data tbody tr:nth-child(odd) { background: rgba(201, 195, 180, 0.10); }
table.data .num {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1;
    text-align: right;
    white-space: nowrap;
}

/* ---- 8. Hero / page intros ---- */

.hero {
    padding: var(--space-9) 0 var(--space-9);
}
.hero h1 {
    max-width: 32ch;
    margin-bottom: var(--space-5);
    font-size: var(--t-48);
    line-height: 1.1;
    letter-spacing: -0.015em;
}
.hero .lede {
    font-size: var(--t-22);
    line-height: 1.45;
    color: var(--ink);
    max-width: 60ch;
    margin-bottom: var(--space-7);
    font-family: var(--font-display);
    font-weight: 400;
}
.hero .actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }

@media (max-width: 960px) {
    .hero h1 { font-size: var(--t-36); }
}
@media (max-width: 760px) {
    .hero h1   { font-size: var(--t-28); }
    .hero .lede { font-size: var(--t-18); }
}

.eyebrow {
    font-family: var(--font-body);
    font-size: var(--t-14);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mute);
    margin-bottom: var(--space-3);
}

/* ---- 9. Editorial blocks ---- */

.lede-block {
    border-left: 1px solid var(--rule);
    padding-left: var(--space-6);
    margin: var(--space-9) 0;
    max-width: 60ch;
}
.lede-block p { font-size: var(--t-18); }

/* Numbered methodology list. The step number is a quiet eyebrow above
   the heading, not a heavy left-column number. Heading + prose lead. */
.method-list {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: var(--space-7) 0 0;
}
.method-list li {
    counter-increment: step;
    padding: var(--space-7) 0;
    border-bottom: 1px solid var(--rule);
}
.method-list li:first-child { border-top: 1px solid var(--rule); }
.method-list li::before {
    content: "Stage " counter(step, decimal-leading-zero);
    display: block;
    font-family: var(--font-body);
    font-size: var(--t-14);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mute);
    margin-bottom: var(--space-3);
}
.method-list h3 {
    margin: 0 0 var(--space-3);
    font-size: var(--t-28);
    max-width: 36ch;
}
.method-list p  {
    margin: 0;
    max-width: 64ch;
    color: var(--ink);
}

/* Pricing rows. Two columns: name + note on the left, price right-aligned
   in tabular numerals. Cleaner than the historical 3-column layout. */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--ink);
    margin: var(--space-5) 0 var(--space-7);
}
.pricing-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-7);
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--rule);
    align-items: baseline;
}
.pricing-row .name-block { min-width: 0; }
.pricing-row .name {
    font-family: var(--font-display);
    font-size: var(--t-22);
    line-height: 1.25;
    margin-bottom: var(--space-2);
}
.pricing-row .note {
    color: var(--mute);
    font-size: var(--t-16);
    max-width: 56ch;
}
.pricing-row .price {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1;
    font-size: var(--t-22);
    color: var(--ink);
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .pricing-row {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    .pricing-row .price { text-align: left; }
    .pricing-row .note { font-size: var(--t-14); }
}

/* Jurisdiction list */
.jur-block { margin: var(--space-8) 0; }
.jur-block h3 { font-size: var(--t-22); margin-bottom: var(--space-5); }
.jur-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0;
    border-top: 1px solid var(--rule);
}
.jur-list li {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--rule);
}
.jur-list a {
    text-decoration: none;
    color: var(--ink);
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    align-items: baseline;
}
.jur-list a:hover { color: var(--accent); opacity: 1; }
.jur-list .cc {
    font-family: var(--font-mono);
    font-size: var(--t-14);
    color: var(--mute);
}

/* Sample-letter callout — letter-shaped */
.letter-frame {
    background: #FFFFFF;
    border: 1px solid var(--rule);
    padding: var(--space-9);
    max-width: 720px;
    margin: var(--space-7) auto;
    font-family: var(--font-display);
    font-size: var(--t-16);
    line-height: 1.7;
}
.letter-frame .head {
    text-align: center;
    border-bottom: 1px solid var(--ink);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-7);
}
.letter-frame .sig-block {
    margin-top: var(--space-9);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
    border-top: 1px solid var(--rule);
    padding-top: var(--space-6);
}

/* ---- 10. Status pills ---- */

.pill {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--t-14);
    padding: 2px 10px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    color: var(--ink);
    background: transparent;
}
.pill-ok    { color: var(--ok);   border-color: var(--ok); }
.pill-warn  { color: var(--warn); border-color: var(--warn); }
.pill-err   { color: var(--err);  border-color: var(--err); }

/* ---- 11. Motion (PID §4.5) ---- */

.reveal { opacity: 0; transform: translateY(4px); transition: opacity 600ms ease-out, transform 600ms ease-out; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    .reveal { opacity: 1; transform: none; }
}

/* ---- 11.5 Proof strip — small repeating fact callouts under the hero ---- */
.proof {
    padding: 0 0 var(--space-9);
}
.proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-7);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: var(--space-6) 0;
}
.proof-grid > div { min-width: 0; }
.proof-label {
    font-family: var(--font-body);
    font-size: var(--t-14);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mute);
    margin: 0 0 var(--space-3);
}
.proof-value {
    font-family: var(--font-display);
    font-size: var(--t-22);
    line-height: 1.2;
    color: var(--ink);
    margin: 0 0 var(--space-2);
}
.proof-meta {
    color: var(--mute);
    font-size: var(--t-14);
    margin: 0;
}
@media (max-width: 960px) {
    .proof-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .proof-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ---- 12. Editorial components (added in design refresh) ---- */

/* Hero with a right-side credentials rail. Asymmetric — copy on the left
   (8 cols), credentials on the right (4 cols). Stacks on tablet. */
.hero--split {
    padding: var(--space-9) 0 var(--space-9);
}
.hero--split .grid-12 { align-items: end; }
.hero--split .hero-copy { grid-column: span 8; }
.hero--split .hero-rail { grid-column: span 4; }
@media (max-width: 960px) {
    .hero--split .hero-copy,
    .hero--split .hero-rail { grid-column: 1 / -1; }
}

/* The credentials rail itself. Stacked rule-separated facts, never a card.
   Used on the home hero and the about page. */
.cred-rail {
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    padding: var(--space-5) 0;
}
.cred-rail dl { margin: 0; }
.cred-rail dt {
    font-family: var(--font-body);
    font-size: var(--t-14);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mute);
    margin-top: var(--space-4);
}
.cred-rail dt:first-child { margin-top: 0; }
.cred-rail dd {
    margin: 2px 0 0;
    font-family: var(--font-display);
    font-size: var(--t-18);
    color: var(--ink);
    line-height: 1.35;
}
.cred-rail dd .sub {
    display: block;
    font-family: var(--font-body);
    font-size: var(--t-14);
    color: var(--mute);
    margin-top: 2px;
}

/* Numbered step cards — the methodology display upgrade.
   Hairline frame, monospace step number, no rounded corners, no shadow. */
.steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: 1px solid var(--ink);
    border-left: 1px solid var(--rule);
}
.steps .step {
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: var(--space-7) var(--space-6);
    background: transparent;
    position: relative;
}
.steps .step .step-num {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1;
    font-size: var(--t-14);
    letter-spacing: 0.08em;
    color: var(--accent-2);
    margin-bottom: var(--space-4);
    display: block;
}
.steps .step h3 {
    font-size: var(--t-22);
    margin: 0 0 var(--space-3);
    max-width: 24ch;
}
.steps .step p {
    margin: 0;
    color: var(--ink);
    max-width: 44ch;
}
.steps--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) {
    .steps--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .steps, .steps--four { grid-template-columns: 1fr; }
}

/* Stat band — oversized credibility numbers. Larger than .proof-grid;
   used once per page maximum, on home or about. */
.stat-band {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
}
.stat-band > div {
    padding: var(--space-7) var(--space-6);
    border-right: 1px solid var(--rule);
}
.stat-band > div:last-child { border-right: 0; }
.stat-band .stat-num {
    font-family: var(--font-display);
    font-size: var(--t-48);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 var(--space-3);
    font-feature-settings: "lnum" 1;
}
.stat-band .stat-num .unit {
    font-size: var(--t-22);
    color: var(--mute);
    margin-left: 2px;
    letter-spacing: 0;
}
.stat-band .stat-label {
    font-family: var(--font-body);
    font-size: var(--t-14);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mute);
    margin: 0 0 var(--space-3);
}
.stat-band .stat-meta {
    color: var(--mute);
    font-size: var(--t-14);
    margin: 0;
    max-width: 28ch;
}
@media (max-width: 760px) {
    .stat-band { grid-template-columns: 1fr; }
    .stat-band > div { border-right: 0; border-bottom: 1px solid var(--rule); }
    .stat-band > div:last-child { border-bottom: 0; }
    .stat-band .stat-num { font-size: var(--t-36); }
}

/* Compare grid — pricing tier comparison. Hairline-bordered columns,
   never rounded card stack. The featured column uses a top accent rule. */
.compare-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--rule);
    background: var(--paper);
    margin: var(--space-7) 0 var(--space-8);
}
.compare-col {
    padding: var(--space-7) var(--space-6);
    border-right: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
}
.compare-col:last-child { border-right: 0; }
.compare-col--featured {
    background: var(--paper-2);
    box-shadow: inset 0 3px 0 var(--accent-2);
}
.compare-col .col-head { margin-bottom: var(--space-5); }
.compare-col .col-name {
    font-family: var(--font-display);
    font-size: var(--t-22);
    line-height: 1.2;
    margin: 0 0 var(--space-2);
}
.compare-col .col-tag {
    font-family: var(--font-body);
    font-size: var(--t-14);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-2);
    margin-bottom: var(--space-3);
    display: block;
}
.compare-col .col-price {
    font-family: var(--font-display);
    font-size: var(--t-36);
    line-height: 1;
    margin: 0 0 var(--space-2);
    font-feature-settings: "lnum" 1;
}
.compare-col .col-price .unit {
    font-family: var(--font-body);
    font-size: var(--t-14);
    color: var(--mute);
    margin-left: var(--space-2);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.compare-col .col-summary {
    color: var(--mute);
    font-size: var(--t-16);
    margin: 0 0 var(--space-5);
    max-width: 28ch;
}
.compare-col ul.feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6);
    flex: 1;
}
.compare-col ul.feature-list li {
    padding: var(--space-3) 0;
    border-top: 1px solid var(--rule-soft);
    font-size: var(--t-16);
    line-height: 1.5;
}
.compare-col ul.feature-list li:first-child { border-top: 0; }
.compare-col .col-cta { margin-top: auto; }
@media (max-width: 1080px) {
    .compare-grid { grid-template-columns: 1fr; }
    .compare-col { border-right: 0; border-bottom: 1px solid var(--rule); }
    .compare-col:last-child { border-bottom: 0; }
    .compare-col--featured { box-shadow: inset 3px 0 0 var(--accent-2); }
}

/* Pulled attestation quote — used sparingly on home and about. */
.quote-block {
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    padding: var(--space-7) 0;
    margin: var(--space-8) 0;
}
.quote-block blockquote {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--t-28);
    line-height: 1.35;
    color: var(--ink);
    max-width: 36ch;
    letter-spacing: -0.005em;
}
.quote-block blockquote::before {
    content: "“";
    font-family: var(--font-display);
    font-size: 1em;
    color: var(--accent-2);
    margin-right: 0.05em;
}
.quote-block blockquote::after {
    content: "”";
    color: var(--accent-2);
}
.quote-block cite {
    display: block;
    font-style: normal;
    font-family: var(--font-body);
    font-size: var(--t-14);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mute);
    margin-top: var(--space-4);
}

/* Badges */
.badge {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--t-14);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border: 1px solid var(--rule);
    color: var(--mute);
    background: transparent;
    border-radius: var(--radius-soft);
}
.badge--accent { color: var(--accent-2); border-color: var(--accent-2); }
.badge--ink    { color: var(--paper); background: var(--ink); border-color: var(--ink); }

/* Region band — section header for jurisdiction grouping. */
.region-band {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-5);
    border-bottom: 1px solid var(--ink);
    padding-bottom: var(--space-3);
    margin-top: var(--space-8);
    margin-bottom: var(--space-5);
}
.region-band h3 {
    margin: 0;
    font-size: var(--t-22);
}
.region-band .region-meta {
    font-family: var(--font-body);
    font-size: var(--t-14);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mute);
}

/* Premium / tier marker on a jur-list item. Adds a 2px accent-2 left rule
   without disrupting the row layout. */
.jur-list li.tier-premium {
    border-left: 2px solid var(--accent-2);
    padding-left: var(--space-4);
}
.jur-list li.tier-premium .cc { color: var(--accent-2); }

/* Letter frame upgrade — paper texture with a subtle inset shadow,
   slightly tinted body so the document is visually distinct from page bg. */
.letter-frame {
    background: #FBFAF6;
    box-shadow: 0 1px 0 var(--rule), 0 24px 48px -32px rgba(31, 42, 68, 0.12);
}
.letter-frame .letter-meta {
    font-family: var(--font-body);
    font-size: var(--t-14);
    color: var(--mute);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-3);
}

/* Sample-letter annotation rail. Two columns: letter on the left,
   margin notes on the right. Stacks on narrow viewports. */
.letter-with-notes {
    display: grid;
    grid-template-columns: minmax(0, 720px) minmax(220px, 1fr);
    gap: var(--space-8);
    align-items: start;
    margin: var(--space-7) 0;
}
.letter-with-notes .notes {
    position: sticky;
    top: var(--space-7);
}
.letter-with-notes .notes h4 {
    font-size: var(--t-14);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mute);
    font-family: var(--font-body);
    font-weight: 600;
    margin: 0 0 var(--space-3);
    border-top: 1px solid var(--ink);
    padding-top: var(--space-3);
}
.letter-with-notes .notes p {
    color: var(--ink);
    font-size: var(--t-16);
    line-height: 1.5;
    margin: 0 0 var(--space-5);
    max-width: 32ch;
}
@media (max-width: 1080px) {
    .letter-with-notes { grid-template-columns: 1fr; }
    .letter-with-notes .notes { position: static; }
}

/* CTA band — used on home as closing hook. Dark inset variant pairs with
   .section--ink. Hairline-rule variant pairs with default section bg. */
.cta-band {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-9);
    align-items: center;
}
.cta-band h2 { margin: 0; max-width: 22ch; }
.cta-band .cta-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: stretch;
}
@media (max-width: 760px) {
    .cta-band { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* Hero credibility marquee — the top accent strip with two short proof
   points, sits between header and hero. Kept very small. */
.marquee {
    border-bottom: 1px solid var(--rule);
    background: var(--paper-2);
    font-family: var(--font-body);
    font-size: var(--t-14);
    color: var(--mute);
}
.marquee .wrap {
    display: flex;
    align-items: center;
    gap: var(--space-7);
    padding: var(--space-3) var(--space-6);
    flex-wrap: wrap;
}
.marquee .marquee-item {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
}
.marquee strong {
    color: var(--ink);
    font-weight: 500;
    font-family: var(--font-display);
    font-size: var(--t-16);
}
.marquee .sep {
    width: 1px;
    height: 12px;
    background: var(--rule);
    display: inline-block;
}
@media (max-width: 760px) {
    .marquee .sep { display: none; }
    .marquee .wrap { gap: var(--space-4); }
}

/* Methodology check-list grouping (how-it-works). Subtle background tint
   per group, hairline rules between rows. */
.check-group {
    border-top: 1px solid var(--ink);
    margin: 0 0 var(--space-7);
}
.check-group .group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: var(--space-4) 0 var(--space-3);
    border-bottom: 1px solid var(--rule);
}
.check-group .group-head h4 {
    font-size: var(--t-18);
    margin: 0;
}
.check-group .group-head .group-tag {
    font-family: var(--font-body);
    font-size: var(--t-14);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-2);
}
.check-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.check-group ul li {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-5);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--rule-soft);
    align-items: baseline;
}
.check-group ul li:last-child { border-bottom: 0; }
.check-group ul li .label {
    font-family: var(--font-body);
    font-size: var(--t-14);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mute);
}
.check-group ul li .what {
    color: var(--ink);
    font-size: var(--t-16);
    margin: 0;
}
@media (max-width: 760px) {
    .check-group ul li { grid-template-columns: 1fr; gap: var(--space-2); }
    .check-group ul li .label { letter-spacing: 0.04em; }
}

/* Sidebar fact box (about page credentials). */
.fact-box {
    border-top: 1px solid var(--ink);
    padding: var(--space-5) 0 0;
}
.fact-box h4 {
    font-family: var(--font-body);
    font-size: var(--t-14);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mute);
    margin: 0 0 var(--space-4);
}
.fact-box dl { margin: 0; }
.fact-box dt {
    font-family: var(--font-body);
    font-size: var(--t-14);
    color: var(--mute);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: var(--space-4);
}
.fact-box dt:first-child { margin-top: 0; }
.fact-box dd {
    margin: 2px 0 0;
    font-family: var(--font-display);
    font-size: var(--t-18);
    color: var(--ink);
}

/* Inline metric — "$750 / record" style readout. */
.inline-metric {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--t-22);
}
.inline-metric .unit {
    font-family: var(--font-body);
    font-size: var(--t-14);
    color: var(--mute);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ---- 13. Print (the marketing site is occasionally printed for partners) ---- */

@media print {
    .site-header, .site-footer, .header-cta { display: none; }
    body { background: #FFFFFF; color: #000; }
    a { color: #000; text-decoration: underline; }
    .hero { padding: 0; }
}