:root {
    --navy: #14213D;
    --blue-line: #8EC5FF;
    --blue-band: #BEDBFF;
    --paper: #FEFCE8;
    --graphite: #22252B;
    --amber: #F2A007;
    --amber-band: #FEDB8B;
    --brass: #B5793B;
    --muted: #6B7078;
    --body-text: #3A4152;
}

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

body {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    color: var(--graphite);
    background: var(--paper);
    line-height: 1.5;
}

h1, h2, h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    line-height: 1.15;
    color: var(--navy);
}

.mono { font-family: 'IBM Plex Mono', monospace; }

/* ===== HEADER / NAV ===== */

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 2rem;
    background: var(--navy);
    border-bottom: 1px solid rgba(142, 197, 255, 0.25);
}

.site-header .logo-lockup { display: flex; align-items: baseline; gap: 0.65rem; text-decoration: none; }
.site-header .logo-wordmark { color: #fff; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.5rem; letter-spacing: -0.01em; }
.site-header .logo-tagline { color: var(--blue-line); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; }

.site-header nav { display: flex; align-items: center; }
.site-header nav a { color: var(--blue-line); text-decoration: none; margin-left: 1.5rem; font-size: 0.9rem; font-weight: 500; }
.site-header nav a:hover { color: #fff; }
.site-header nav a.btn { background: var(--amber); color: var(--navy); padding: 0.45rem 1rem; border-radius: 3px; font-weight: 600; }

main { max-width: 980px; margin: 0 auto; padding: 2rem; }

/* ===== SHEET HEAD (per-page technical banner) ===== */

.sheethead {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    border-bottom: 1.5px solid var(--navy);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.sheethead .code { font-size: 0.75rem; letter-spacing: 0.16em; color: var(--brass); }
.sheethead h1 { font-size: 1.6rem; }
.sheethead .kind { margin-left: auto; font-size: 0.72rem; letter-spacing: 0.12em; color: var(--muted); }

.eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    color: var(--brass);
    display: block;
    margin-bottom: 0.6rem;
}

/* ===== HERO (blueprint grid box) ===== */

.hero-box {
    border: 1px solid var(--navy);
    background: #fff;
    background-image: linear-gradient(rgba(20,33,61,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(20,33,61,.06) 1px, transparent 1px);
    background-size: 24px 24px;
    padding: 2rem;
}

.hero-box h1 { font-size: 2rem; line-height: 1.1; margin: 0.5rem 0 0.75rem; max-width: 18em; }
.hero-box .lede { font-size: 1rem; line-height: 1.55; color: var(--body-text); max-width: 38em; margin-bottom: 1rem; }

.stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 1.25rem;
    border-top: 1px solid var(--navy);
}

.stat { padding: 0.75rem 0; }
.stat .num { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.3rem; color: var(--navy); }
.stat .label { font-size: 0.7rem; letter-spacing: 0.1em; color: var(--muted); }

@media (max-width: 700px) {
    .stat-row { grid-template-columns: repeat(2, 1fr); }
}

/* ===== BUTTONS / PILLS ===== */

.btn {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.55rem 1rem;
    border: 1px solid var(--navy);
    text-decoration: none;
    background: #fff;
    color: var(--navy);
}

.btn.primary { background: var(--amber-band); }
.btn:hover { opacity: 0.85; }

.pill {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--navy);
    background: #fff;
    color: var(--navy);
    white-space: nowrap;
    display: inline-block;
}

.pill.refined { background: var(--blue-band); }
.pill.ready, .pill.paid { background: var(--amber-band); }
.pill.plain { border-color: rgba(20,33,61,.35); color: var(--muted); }

/* ===== GRID ===== */

.grid { display: grid; gap: 0.9rem; }
.g2 { grid-template-columns: 1fr 1fr; }
.g3 { grid-template-columns: 1fr 1fr 1fr; }
.g4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 700px) {
    .g2, .g3, .g4 { grid-template-columns: 1fr; }
}

.grid.align-start { align-items: start; }

/* ===== CARDS ===== */

.card {
    border: 1px solid var(--navy);
    background: #fff;
    padding: 1rem 1.1rem;
}

.card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.card p { margin: 0; font-size: 0.9rem; color: var(--body-text); line-height: 1.45; }

.card.dashed { border-style: dashed; background: transparent; }
.card.dashed h3 { color: var(--muted); }

.card .card-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    align-items: center;
}

.card .footline {
    font-size: 0.7rem;
    color: var(--muted);
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px dashed rgba(20,33,61,.28);
}

.step-card .step-num {
    font-size: 1.1rem;
    color: var(--brass);
    font-weight: 600;
    margin-bottom: 0.4rem;
}

/* ===== SPEC BOX (key/value table) ===== */

.spec { border: 1px solid var(--navy); background: #fff; }
.spec .hd { background: var(--blue-band); color: var(--navy); border-bottom: 1px solid var(--navy); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; padding: 0.5rem 0.75rem; }
.spec .hd.amber { background: var(--amber-band); }
.spec .row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid rgba(20,33,61,.14); }
.spec .row:last-child { border-bottom: none; }
.spec .k { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.spec .v { font-size: 0.9rem; font-weight: 600; text-align: right; color: var(--navy); }
.spec .v.wide { font-weight: 500; max-width: 20em; text-align: left; margin-left: auto; }

/* ===== BANNER (round/deadline callout) ===== */

.banner { background: var(--blue-band); border: 1px solid var(--navy); padding: 1rem 1.1rem; color: var(--graphite); }
.banner .stamp { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; color: var(--navy); background: var(--amber-band); border: 1px solid var(--navy); padding: 0.2rem 0.5rem; }
.banner .deadline-text { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1rem; color: var(--navy); }
.banner p { font-size: 0.9rem; margin: 0.5rem 0; }
.banner .expects-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; color: var(--navy); margin: 0.5rem 0 0.3rem; }

ul.ticks { list-style: none; padding: 0; margin: 0; }
ul.ticks li { display: grid; grid-template-columns: 14px 1fr; gap: 0.5rem; font-size: 0.9rem; padding: 0.15rem 0; }
ul.ticks li::before { content: "▸"; color: var(--brass); font-size: 0.8rem; }

/* ===== FIGURE (image + caption) ===== */

.figure {
    border: 1px solid var(--navy);
    background: #fff;
    background-image: linear-gradient(rgba(20,33,61,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(20,33,61,.07) 1px, transparent 1px);
    background-size: 20px 20px;
    padding: 0.75rem;
    text-align: center;
}

.figure img { max-width: 100%; height: auto; mix-blend-mode: multiply; display: block; margin: 0 auto; }
.figure .cap { font-size: 0.7rem; letter-spacing: 0.1em; color: var(--muted); margin-top: 0.5rem; }

/* ===== TABLE ===== */

table.tb { width: 100%; border-collapse: collapse; }
table.tb th { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); background: var(--blue-band); text-align: left; padding: 0.5rem 0.75rem; font-weight: 600; border: 1px solid var(--navy); }
table.tb td { border-bottom: 1px solid rgba(20,33,61,.14); padding: 0.65rem 0.75rem; font-size: 0.88rem; vertical-align: top; }

/* ===== FAQ ===== */

.faq-item { border-bottom: 1px solid rgba(20,33,61,.18); padding: 0.6rem 0; }
.faq-item summary { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.95rem; cursor: pointer; color: var(--navy); }
.faq-item p { font-size: 0.88rem; color: var(--body-text); margin-top: 0.4rem; }

/* ===== STAGE TABS ===== */

.stage-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 1rem; }
.stage-tabs .tab {
    text-align: center;
    padding: 0.5rem;
    border: 1px solid var(--navy);
    border-left: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
}
.stage-tabs .tab:first-child { border-left: 1px solid var(--navy); }
.stage-tabs .tab.active { background: var(--blue-band); color: var(--navy); }

/* ===== SUBMISSIONS / EMPTY STATE ===== */

.empty-state {
    border: 1px dashed rgba(20,33,61,.35);
    padding: 1.5rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
}

/* ===== EMAIL POPUP ===== */

.email-popup {
    position: fixed;
    inset: 0;
    background: rgba(20, 33, 61, 0.55);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.email-popup-box {
    background: var(--paper);
    border: 2px solid var(--navy);
    padding: 1.75rem;
    max-width: 380px;
    width: 90%;
    position: relative;
}

.email-popup-box h3 { margin-bottom: 0.5rem; }
.email-popup-box p { font-size: 0.9rem; color: var(--body-text); margin-bottom: 1rem; }
.email-popup-box form { display: flex; gap: 0.5rem; }
.email-popup-box input[type="email"] { flex: 1; padding: 0.55rem; border: 1px solid var(--navy); }

.email-popup-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--navy);
}

.email-popup-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background: var(--navy);
    color: #fff;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    z-index: 1000;
}

/* ===== FOOTER ===== */

.site-footer {
    text-align: left;
    padding: 1.5rem 2rem;
    color: var(--muted);
    font-size: 0.78rem;
    border-top: 1px solid rgba(20,33,61,.15);
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}