/* ==========================================================================
   THE LEDGER — A design system for Missing Information
   ========================================================================== */

:root {
    /* Paper & ink */
    --paper: #f5f1e8;
    --paper-warm: #efe8d8;
    --paper-line: #e4dcc6;
    --paper-dark: #d9cfb7;
    --ink: #141210;
    --ink-2: #2a2622;
    --ink-3: #56504a;
    --ink-4: #8a8278;

    /* Ledger signals */
    --red-ink: #b3341a;            /* outstanding / overdue */
    --red-ink-soft: #d9907f;
    --red-wash: #f3e2d9;
    --green-ink: #2d5a3d;          /* resolved / ready */
    --green-wash: #d7e3d6;
    --blue-ink: #2c4f78;           /* agent / info */
    --amber: #b88720;              /* due soon */
    --amber-wash: #f0e5c9;

    /* Service colours (from existing app) */
    --svc-accounts: #8b5a2b;
    --svc-vat:      #7a5687;
    --svc-paye:     #3a6d82;
    --svc-sa:       #9e4a47;
    --svc-mtd:      #4c7a54;

    /* Typography */
    --serif: 'Fraunces', 'Times New Roman', serif;
    --sans:  'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --mono:  'IBM Plex Mono', 'SF Mono', monospace;

    /* Layout */
    --wrap: 1240px;
    --rule: 1px solid var(--paper-line);
    --rule-strong: 1px solid var(--ink);
    --rule-dashed: 1px dashed var(--ink-4);
    --shadow-soft: 0 1px 0 rgba(20,18,16,0.04), 0 12px 40px -12px rgba(20,18,16,0.12);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--paper);
    background-image:
        radial-gradient(ellipse 1200px 800px at 20% -200px, rgba(179,52,26,0.04), transparent 60%),
        radial-gradient(ellipse 900px 600px at 95% 10%, rgba(45,90,61,0.04), transparent 55%);
    overflow-x: hidden;
    font-feature-settings: "ss01", "cv11", "kern";
}
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ---------- Typography ---------- */
.serif { font-family: var(--serif); }
.mono  { font-family: var(--mono); font-feature-settings: "tnum"; }
.italic { font-style: italic; }

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.05;
    font-variation-settings: "SOFT" 20, "opsz" 144;
}
h1 { font-size: clamp(2.8rem, 6.2vw, 5.8rem); font-weight: 350; }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); font-weight: 400; }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 500; letter-spacing: -0.015em; }
h4 { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }

.eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red-ink);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--red-ink);
    display: inline-block;
}

.lede {
    font-family: var(--serif);
    font-weight: 350;
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    line-height: 1.45;
    color: var(--ink-2);
    max-width: 62ch;
    font-variation-settings: "SOFT" 30, "opsz" 48;
}

/* ---------- Layout primitives ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 960px; margin: 0 auto; padding: 0 32px; }
section { padding: 110px 0; position: relative; }
.section-label {
    display: flex; align-items: center; gap: 14px;
    font-family: var(--mono); font-size: 11px; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 32px;
    padding-bottom: 14px;
    border-bottom: var(--rule);
}
.section-label .sec-num {
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    color: var(--red-ink);
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
}

/* Perforated divider */
.perf {
    border: 0;
    border-top: 1px dashed var(--paper-dark);
    margin: 0;
    position: relative;
}
.perf::before, .perf::after {
    content: "";
    position: absolute;
    top: -6px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--paper);
    border: 1px solid var(--paper-dark);
}
.perf::before { left: -6px; }
.perf::after  { right: -6px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.005em;
    border-radius: 2px;
    border: 1px solid transparent;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    white-space: nowrap;
    line-height: 1;
}
.btn-primary {
    background: var(--ink);
    color: var(--paper);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(20,18,16,0.35); }
.btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-link {
    background: transparent;
    color: var(--ink);
    padding: 8px 0;
    border-bottom: 1px solid var(--ink);
    border-radius: 0;
}
.btn-link:hover { color: var(--red-ink); border-color: var(--red-ink); }
.btn .arrow { transition: transform .2s ease; font-family: var(--mono); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Tags / chips ---------- */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 2px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag-red    { background: var(--red-wash); color: var(--red-ink); }
.tag-green  { background: var(--green-wash); color: var(--green-ink); }
.tag-amber  { background: var(--amber-wash); color: var(--amber); }
.tag-ink    { background: var(--ink); color: var(--paper); }
.tag-paper  { background: transparent; color: var(--ink-3); border: 1px solid var(--paper-dark); }

/* ---------- Stamp ---------- */
.stamp {
    display: inline-block;
    padding: 6px 14px;
    border: 2px solid var(--red-ink);
    color: var(--red-ink);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transform: rotate(-4deg);
    border-radius: 3px;
    opacity: 0.88;
    background: rgba(179,52,26,0.04);
}
.stamp.green { border-color: var(--green-ink); color: var(--green-ink); background: rgba(45,90,61,0.05); transform: rotate(2deg); }


/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.top-bar {
    background: var(--ink);
    color: var(--paper);
    padding: 9px 0;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    overflow: hidden;
}
.top-bar .ticker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 32px;
    max-width: var(--wrap);
    margin: 0 auto;
}
.top-bar .ticker span { display: flex; align-items: center; gap: 8px; }
.top-bar .ticker .dot-live {
    width: 7px; height: 7px; border-radius: 50%;
    background: #82c286;
    box-shadow: 0 0 0 3px rgba(130,194,134,0.25);
    animation: pulse 2s infinite;
}
.top-bar .ticker-right { display: flex; gap: 20px; opacity: 0.75; }
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

nav.masthead {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(245, 241, 232, 0.92);
    border-bottom: var(--rule);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
}
.masthead .bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    max-width: var(--wrap);
    margin: 0 auto;
    gap: 40px;
}
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.02em;
    font-variation-settings: "SOFT" 40, "opsz" 48;
}
.logo .logo-mark {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--red-ink);
    font-weight: 600;
    letter-spacing: 0.08em;
    border: 1px solid var(--red-ink);
    padding: 3px 6px;
    border-radius: 2px;
    line-height: 1;
}
.logo .brand { display: flex; align-items: baseline; gap: 2px; }
.logo .brand .red { color: var(--red-ink); font-style: italic; font-variation-settings: "SOFT" 80; }
.logo .tld { font-family: var(--mono); font-size: 11px; color: var(--ink-3); font-weight: 400; margin-left: 2px; align-self: center; }

.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
    list-style: none;
}
.nav-links a {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2);
    position: relative;
    padding: 4px 0;
    transition: color .2s ease;
}
.nav-links a:hover { color: var(--red-ink); }
.nav-links a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 0; height: 1px;
    background: var(--red-ink);
    transition: width .25s ease;
}
.nav-links a:hover::after { width: 100%; }
.nav-links a .num {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-4);
    margin-right: 4px;
    letter-spacing: 0.05em;
}

.nav-actions { display: flex; align-items: center; gap: 14px; }
.menu-btn {
    display: none;
    background: transparent;
    border: 1px solid var(--ink);
    padding: 10px 14px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--ink);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
    padding: 60px 0 140px;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--paper-line) 1px, transparent 1px);
    background-size: 100% 32px;
    opacity: 0.4;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, black 0%, transparent 85%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 85%);
}
.hero .wrap { position: relative; z-index: 1; }

.hero-meta {
    display: flex;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: var(--rule);
    margin-bottom: 56px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    flex-wrap: wrap;
    gap: 20px;
}
.hero-meta .issue { color: var(--red-ink); }
.hero-meta .sep { color: var(--paper-dark); margin: 0 4px; }

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 70px;
    align-items: start;
}

.hero h1 {
    margin-bottom: 28px;
    font-variation-settings: "SOFT" 30, "opsz" 144;
    font-weight: 300;
}
.hero h1 em {
    font-style: italic;
    color: var(--red-ink);
    font-variation-settings: "SOFT" 80, "opsz" 144;
    font-weight: 400;
}
.hero h1 .marker {
    position: relative;
    display: inline-block;
}
.hero h1 .marker::after {
    content: "";
    position: absolute;
    left: -4px; right: -4px; bottom: 6px;
    height: 14px;
    background: rgba(179,52,26,0.18);
    z-index: -1;
    transform: rotate(-1deg);
}
.hero-lede { margin-bottom: 40px; }

.hero-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 56px; }
.hero-cta .note {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
    padding-left: 6px;
}

.hero-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: var(--rule);
    padding-top: 24px;
}
.hero-trust .item { padding-right: 20px; }
.hero-trust .item:not(:last-child) { border-right: var(--rule); }
.hero-trust .item:not(:first-child) { padding-left: 20px; }
.hero-trust .big {
    font-family: var(--serif);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 6px;
    font-variation-settings: "SOFT" 20, "opsz" 96;
}
.hero-trust .big em { font-style: italic; color: var(--red-ink); font-variation-settings: "SOFT" 80; }
.hero-trust .desc {
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.4;
    font-family: var(--mono);
    letter-spacing: 0.02em;
}

/* Hero visual — ledger page + floating chase card */
.hero-visual {
    position: relative;
    padding: 20px 40px 80px 30px;
}
.ledger-page {
    background: #fbf7ec;
    border: 1px solid var(--paper-dark);
    border-radius: 3px;
    padding: 22px 22px 10px;
    box-shadow: var(--shadow-soft);
    position: relative;
    transform: rotate(-1.2deg);
}
.ledger-page::after {
    content: "";
    position: absolute;
    inset: 8px 8px 8px 8px;
    border: 1px solid rgba(217,207,183,0.5);
    pointer-events: none;
    border-radius: 2px;
}
.ledger-page .spine {
    position: absolute;
    left: 42px;
    top: 22px; bottom: 22px;
    width: 1px;
    background: var(--red-ink-soft);
    opacity: 0.5;
    pointer-events: none;
}
.ledger-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--ink);
    margin-bottom: 0;
}
.ledger-head .title {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.ledger-head .sub {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: 4px;
}
.ledger-head .badge {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--red-ink);
    text-transform: uppercase;
    border: 1px solid var(--red-ink);
    padding: 4px 8px;
    border-radius: 2px;
    background: rgba(179,52,26,0.04);
}
.ledger-columns {
    display: grid;
    grid-template-columns: 0.5fr 1.7fr 0.6fr 0.9fr;
    gap: 10px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-4);
    padding: 10px 0 8px 34px;
    border-bottom: 1px solid var(--paper-dark);
}
.ledger-row {
    display: grid;
    grid-template-columns: 0.5fr 1.7fr 0.6fr 0.9fr;
    gap: 10px;
    padding: 13px 0 13px 34px;
    font-size: 13px;
    border-bottom: 1px solid var(--paper-dark);
    align-items: center;
    position: relative;
}
.ledger-row:last-child { border-bottom: 0; }
.ledger-row .ref { font-family: var(--mono); color: var(--ink-4); font-size: 11px; }
.ledger-row .title-cell { font-weight: 500; }
.ledger-row .title-cell small { display: block; color: var(--ink-4); font-weight: 400; font-size: 11px; margin-top: 2px; font-family: var(--sans); }
.ledger-row .days { font-family: var(--mono); font-size: 12px; text-align: center; }
.ledger-row .days.red { color: var(--red-ink); font-weight: 600; }
.ledger-row .days.green { color: var(--green-ink); font-weight: 600; }
.ledger-row .days.amber { color: var(--amber); font-weight: 600; }
.ledger-row .status { text-align: right; }

/* Chase note floating card */
.chase-note {
    position: absolute;
    right: 10px;
    bottom: -10px;
    width: 260px;
    background: var(--paper);
    border: 1px solid var(--ink);
    padding: 18px;
    box-shadow: 6px 6px 0 var(--ink);
    transform: rotate(3.5deg);
    z-index: 3;
}
.chase-note .head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--paper-dark);
    margin-bottom: 10px;
    gap: 8px;
}
.chase-note .head strong { font-family: var(--serif); font-weight: 500; font-size: 14px; line-height: 1.2; }
.chase-note .head small { font-family: var(--mono); font-size: 9px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }
.chase-note .body p { font-size: 12px; line-height: 1.5; color: var(--ink-2); margin-bottom: 6px; }
.chase-note .body .sig { font-family: var(--serif); font-style: italic; color: var(--red-ink); font-size: 13px; margin-top: 10px; font-variation-settings: "SOFT" 80; }

/* Post-it provided sticker */
.provided-tag {
    position: absolute;
    top: 20px;
    left: -8px;
    background: var(--green-wash);
    border: 1px solid var(--green-ink);
    padding: 10px 16px;
    transform: rotate(-7deg);
    box-shadow: 4px 4px 0 rgba(45,90,61,0.15);
    z-index: 2;
}
.provided-tag .label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--green-ink);
    text-transform: uppercase;
    margin-bottom: 2px;
}
.provided-tag .number {
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 500;
    color: var(--green-ink);
    line-height: 1;
    font-variation-settings: "SOFT" 30, "opsz" 96;
}

/* ==========================================================================
   LOGO BAR / SOCIAL PROOF
   ========================================================================== */
.logobar {
    padding: 50px 0;
    border-top: var(--rule);
    border-bottom: var(--rule);
    background: rgba(239,232,216,0.35);
}
.logobar .label {
    text-align: center;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 28px;
}
.logobar .label em { font-family: var(--serif); font-style: italic; color: var(--red-ink); text-transform: none; letter-spacing: 0; font-size: 14px; font-variation-settings: "SOFT" 60; }
.logo-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 40px;
    align-items: center;
}
.logo-row .firm {
    text-align: center;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--ink-3);
    opacity: 0.8;
    transition: opacity .2s;
}
.logo-row .firm:hover { opacity: 1; color: var(--ink); }
.logo-row .firm small {
    display: block;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--ink-4);
    text-transform: uppercase;
    margin-top: 2px;
    font-weight: 400;
}

/* ==========================================================================
   THE PROBLEM
   ========================================================================== */
.problem {
    padding: 140px 0 120px;
    position: relative;
}
.problem-head {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 80px;
    padding-bottom: 40px;
    border-bottom: var(--rule-strong);
}
.problem-head h2 {
    max-width: 14ch;
}
.problem-head h2 em { font-style: italic; color: var(--red-ink); font-variation-settings: "SOFT" 80; }

.problem-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--paper-line);
    border: 1px solid var(--paper-line);
}
.pcard {
    background: var(--paper);
    padding: 40px 36px 44px;
    position: relative;
}
.pcard .num {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--red-ink);
    display: block;
    margin-bottom: 22px;
    font-variation-settings: "SOFT" 80;
}
.pcard h3 { margin-bottom: 14px; font-size: 1.35rem; }
.pcard p { color: var(--ink-3); font-size: 14.5px; line-height: 1.55; }
.pcard .stat {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--red-ink);
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px dashed var(--paper-dark);
}

.pullquote {
    margin-top: 100px;
    padding: 40px 60px;
    border-left: 3px solid var(--red-ink);
    background: rgba(179,52,26,0.04);
}
.pullquote q {
    font-family: var(--serif);
    font-weight: 350;
    font-style: italic;
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    line-height: 1.3;
    color: var(--ink);
    font-variation-settings: "SOFT" 60, "opsz" 96;
    display: block;
    margin-bottom: 22px;
}
.pullquote q::before { content: open-quote; color: var(--red-ink); }
.pullquote q::after { content: close-quote; color: var(--red-ink); }
.pullquote .attr {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--ink-3);
}
.pullquote .attr strong { color: var(--ink); }

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */
.how {
    padding: 120px 0;
    background: var(--paper-warm);
    border-top: var(--rule);
    border-bottom: var(--rule);
    position: relative;
    overflow: hidden;
}
.how::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 18px, rgba(179,52,26,0.02) 18px, rgba(179,52,26,0.02) 20px);
    pointer-events: none;
}
.how .wrap { position: relative; z-index: 1; }
.how-head {
    max-width: 720px;
    margin-bottom: 70px;
}
.how-head h2 em { font-style: italic; color: var(--red-ink); font-variation-settings: "SOFT" 80; }

.how-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    position: relative;
}
.how-steps::before {
    content: "";
    position: absolute;
    top: 42px;
    left: 7%; right: 7%;
    height: 1px;
    border-top: 1px dashed var(--ink-4);
    z-index: 0;
}
.hstep { position: relative; z-index: 1; }
.hstep-num {
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--paper);
    border: 1px solid var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 2rem;
    font-weight: 400;
    font-style: italic;
    color: var(--red-ink);
    margin-bottom: 28px;
    font-variation-settings: "SOFT" 60, "opsz" 96;
    box-shadow: 4px 4px 0 rgba(20,18,16,0.08);
}
.hstep h3 { margin-bottom: 12px; font-size: 1.45rem; }
.hstep p { color: var(--ink-3); font-size: 15px; line-height: 1.6; margin-bottom: 18px; }
.hstep .detail {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-2);
    background: var(--paper);
    padding: 12px 14px;
    border: 1px solid var(--paper-dark);
    border-left: 3px solid var(--red-ink);
    line-height: 1.6;
}
.hstep .detail b { color: var(--red-ink); }

/* ==========================================================================
   DASHBOARD TOUR
   ========================================================================== */
.dashboard-tour {
    padding: 140px 0;
}
.tour-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 60px;
}
.tour-head h2 { max-width: 14ch; }
.tour-head h2 em { font-style: italic; color: var(--red-ink); font-variation-settings: "SOFT" 80; }
.tour-head .lede { font-size: 1.15rem; }

/* Mock dashboard window */
.dashboard-mock {
    background: var(--paper);
    border: 1px solid var(--ink);
    border-radius: 4px;
    box-shadow: 0 20px 60px -20px rgba(20,18,16,0.25), 0 4px 0 var(--ink);
    overflow: hidden;
    margin-bottom: 40px;
}
.mock-chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.05em;
}
.mock-chrome .dots { display: flex; gap: 6px; }
.mock-chrome .dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.25); display: block; }
.mock-chrome .dots i:first-child { background: #f07067; }
.mock-chrome .dots i:nth-child(2) { background: #f5bf4f; }
.mock-chrome .dots i:last-child { background: #63c257; }
.mock-chrome .url { opacity: 0.7; }

.mock-body {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: 540px;
}
.mock-sidebar {
    background: #11100e;
    color: var(--paper);
    padding: 24px 0;
    border-right: 1px solid var(--ink);
}
.mock-sidebar .brand {
    padding: 0 20px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 18px;
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 500;
}
.mock-sidebar .brand em { color: var(--red-ink-soft); font-style: italic; font-variation-settings: "SOFT" 80; }
.mock-sidebar .grp-label {
    padding: 8px 20px;
    font-family: var(--mono);
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 12px;
}
.mock-sidebar .nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 20px;
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    border-left: 2px solid transparent;
}
.mock-sidebar .nav-item.active {
    background: rgba(179,52,26,0.12);
    border-left-color: var(--red-ink);
    color: var(--paper);
}
.mock-sidebar .nav-item .count {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--red-ink-soft);
    padding: 1px 6px;
    background: rgba(179,52,26,0.15);
    border-radius: 2px;
}
.mock-sidebar .nav-item:hover { background: rgba(255,255,255,0.04); color: var(--paper); }

.mock-content { padding: 28px 32px; background: var(--paper); overflow: hidden; }
.mock-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: var(--rule);
    margin-bottom: 24px;
}
.mock-bar .crumb {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.mock-bar .crumb strong { color: var(--ink); }

.mock-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    background: var(--paper-line);
    border: 1px solid var(--paper-line);
    margin-bottom: 24px;
}
.mock-stat {
    background: var(--paper);
    padding: 16px 18px;
}
.mock-stat .lbl {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ink-3);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.mock-stat .val {
    font-family: var(--serif);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
    font-variation-settings: "SOFT" 20;
    font-feature-settings: "tnum";
}
.mock-stat .val.red { color: var(--red-ink); }
.mock-stat .val.green { color: var(--green-ink); }
.mock-stat .val.amber { color: var(--amber); }
.mock-stat .delta {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-4);
    margin-top: 6px;
    letter-spacing: 0.04em;
}

.mock-table {
    border: 1px solid var(--paper-dark);
    border-radius: 2px;
    overflow: hidden;
}
.mock-thead {
    display: grid;
    grid-template-columns: 1fr 100px 90px 110px 90px 80px;
    gap: 0;
    background: var(--paper-warm);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 10px 14px;
    border-bottom: 1px solid var(--paper-dark);
}
.mock-trow {
    display: grid;
    grid-template-columns: 1fr 100px 90px 110px 90px 80px;
    gap: 0;
    padding: 12px 14px;
    font-size: 13px;
    border-bottom: 1px solid var(--paper-line);
    align-items: center;
}
.mock-trow:last-child { border-bottom: 0; }
.mock-trow:hover { background: var(--paper-warm); }
.mock-trow .client { font-weight: 500; }
.mock-trow .client small { display: block; color: var(--ink-4); font-size: 11px; font-weight: 400; margin-top: 2px; }
.mock-trow .svc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.mock-trow .svc-chip .dot { width: 6px; height: 6px; border-radius: 50%; }
.mock-trow .missing {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
}
.mock-trow .missing.zero { color: var(--green-ink); }
.mock-trow .missing.low { color: var(--amber); }
.mock-trow .missing.high { color: var(--red-ink); }
.mock-trow .due { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.mock-trow .due.overdue { color: var(--red-ink); font-weight: 600; }
.mock-trow .progress-mini {
    height: 6px;
    background: var(--paper-line);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.mock-trow .progress-mini span {
    display: block;
    height: 100%;
    background: var(--green-ink);
    border-radius: 10px;
}
.mock-trow .progress-mini.pending span { background: var(--amber); }
.mock-trow .progress-mini.critical span { background: var(--red-ink); }
.mock-trow .action {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--red-ink);
    text-transform: uppercase;
    font-weight: 600;
    text-align: right;
    cursor: pointer;
}

/* Annotated callouts */
.annotations {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 40px;
}
.ann {
    padding: 20px 0 0;
    border-top: var(--rule);
    position: relative;
}
.ann .ann-num {
    position: absolute;
    top: -12px;
    left: 0;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--red-ink);
    background: var(--paper);
    padding-right: 10px;
}
.ann h4 { margin-bottom: 8px; font-size: 1rem; }
.ann p { font-size: 13px; color: var(--ink-3); line-height: 1.55; }

/* ==========================================================================
   SERVICE TILES (Accounts, VAT, PAYE, SA, MTD ITSA)
   ========================================================================== */
.services {
    padding: 140px 0;
    background: var(--paper);
    border-top: var(--rule);
}
.services-head {
    margin-bottom: 70px;
    max-width: 820px;
}
.services-head h2 em { font-style: italic; color: var(--red-ink); font-variation-settings: "SOFT" 80; }

.svc-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.svc-tile {
    background: var(--paper);
    border: 1px solid var(--paper-dark);
    border-top: 4px solid;
    padding: 28px 24px 28px;
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease;
}
.svc-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 40px -20px rgba(20,18,16,0.2); }
.svc-tile.accounts { border-top-color: var(--svc-accounts); }
.svc-tile.vat      { border-top-color: var(--svc-vat); }
.svc-tile.paye     { border-top-color: var(--svc-paye); }
.svc-tile.sa       { border-top-color: var(--svc-sa); }
.svc-tile.mtd      { border-top-color: var(--svc-mtd); }

.svc-tile .code {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ink-4);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.svc-tile h3 {
    font-size: 1.35rem;
    margin-bottom: 4px;
}
.svc-tile .schedule {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px dashed var(--paper-dark);
    letter-spacing: 0.02em;
}
.svc-tile ul {
    list-style: none;
}
.svc-tile ul li {
    font-size: 13px;
    color: var(--ink-2);
    padding: 5px 0;
    padding-left: 20px;
    position: relative;
    line-height: 1.45;
}
.svc-tile ul li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--ink-4);
    font-family: var(--mono);
}
.svc-tile .tile-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--paper-dark);
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    display: flex;
    justify-content: space-between;
}
.svc-tile .tile-footer .count {
    color: var(--ink);
    font-weight: 500;
}

/* ==========================================================================
   BIG FEATURES GRID — all 30+ admin capabilities
   ========================================================================== */
.features-big {
    padding: 140px 0;
    background: var(--ink);
    color: var(--paper);
    position: relative;
    overflow: hidden;
}
.features-big::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 0%, rgba(179,52,26,0.12), transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(45,90,61,0.1), transparent 50%);
    pointer-events: none;
}
.features-big .wrap { position: relative; z-index: 1; }
.features-big .section-label { border-bottom: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.65); }
.features-big .section-label .sec-num { color: var(--red-ink-soft); }
.features-big h2 { color: var(--paper); font-variation-settings: "SOFT" 30, "opsz" 144; }
.features-big h2 em { font-style: italic; color: var(--red-ink-soft); font-variation-settings: "SOFT" 80; }
.features-big .lede { color: rgba(245,241,232,0.75); }

.f-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.12);
    margin-top: 70px;
}
.f-card {
    background: var(--ink);
    padding: 30px 26px 34px;
    position: relative;
    transition: background .2s ease;
}
.f-card:hover { background: #1c1915; }
.f-card .ico {
    width: 44px; height: 44px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    color: var(--red-ink-soft);
}
.f-card .ico svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.f-card .f-num {
    position: absolute;
    top: 18px;
    right: 20px;
    font-family: var(--mono);
    font-size: 10px;
    color: rgba(255,255,255,0.25);
    letter-spacing: 0.08em;
}
.f-card h4 {
    color: var(--paper);
    margin-bottom: 10px;
    font-family: var(--serif);
    font-weight: 500;
    font-variation-settings: "SOFT" 30;
    font-size: 1.1rem;
}
.f-card p {
    font-size: 13px;
    color: rgba(245,241,232,0.65);
    line-height: 1.55;
}
.f-card .f-tag {
    display: inline-block;
    margin-top: 16px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--red-ink-soft);
    padding: 3px 8px;
    border: 1px solid rgba(179,52,26,0.3);
    border-radius: 2px;
}

/* ==========================================================================
   CLIENT PORTAL SECTION
   ========================================================================== */
.portal-section {
    padding: 140px 0;
    background: var(--paper);
}
.portal-grid {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 80px;
    align-items: center;
}
.portal-copy h2 em { font-style: italic; color: var(--red-ink); font-variation-settings: "SOFT" 80; }
.portal-copy h2 { margin-bottom: 22px; }
.portal-copy .lede { margin-bottom: 36px; }

.portal-features { display: grid; gap: 24px; }
.pf-item {
    padding: 24px 0;
    border-top: var(--rule);
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 24px;
    align-items: start;
}
.pf-item:last-child { border-bottom: var(--rule); }
.pf-item .pf-num {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--red-ink);
    font-variation-settings: "SOFT" 80;
    line-height: 1;
    padding-top: 4px;
}
.pf-item h4 { margin-bottom: 6px; font-size: 1.1rem; }
.pf-item p { font-size: 14px; color: var(--ink-3); line-height: 1.55; }

/* Mobile phone mockup */
.phone-mock {
    position: relative;
    max-width: 360px;
    margin: 0 auto;
    padding: 12px 10px 18px;
    background: #11100e;
    border-radius: 42px;
    box-shadow: 0 40px 80px -30px rgba(20,18,16,0.5), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.phone-mock::before {
    content: "";
    position: absolute;
    top: 24px; left: 50%;
    transform: translateX(-50%);
    width: 100px; height: 22px;
    background: #050403;
    border-radius: 12px;
    z-index: 2;
}
.phone-screen {
    background: var(--paper);
    border-radius: 32px;
    overflow: hidden;
    padding: 50px 18px 20px;
    min-height: 600px;
    position: relative;
}
.phone-bar {
    background: var(--ink);
    color: var(--paper);
    padding: 10px 14px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.phone-bar .mark {
    width: 28px; height: 28px;
    background: var(--paper);
    color: var(--ink);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 13px;
}
.phone-bar .firm-name {
    font-family: var(--serif);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
}
.phone-bar .firm-name small { display: block; font-family: var(--mono); font-size: 9px; opacity: 0.7; font-weight: 400; }

.phone-welcome h4 {
    font-family: var(--serif);
    font-size: 1.5rem;
    margin-bottom: 4px;
    font-weight: 400;
    font-variation-settings: "SOFT" 40;
}
.phone-welcome p { font-size: 12px; color: var(--ink-3); margin-bottom: 20px; line-height: 1.5; }

.phone-svc-card {
    background: var(--paper);
    border: 1px solid var(--paper-dark);
    border-left: 3px solid var(--svc-vat);
    border-radius: 3px;
    padding: 14px;
    margin-bottom: 12px;
}
.phone-svc-card.accounts { border-left-color: var(--svc-accounts); }
.phone-svc-card.sa { border-left-color: var(--svc-sa); }
.phone-svc-card .svc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.phone-svc-card .svc-name {
    font-family: var(--serif);
    font-size: 14px;
    font-weight: 500;
}
.phone-svc-card .outstand {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--red-ink);
    background: var(--red-wash);
    padding: 2px 6px;
    border-radius: 2px;
}
.phone-svc-card .outstand.ready {
    color: var(--green-ink);
    background: var(--green-wash);
}
.phone-svc-card .phone-due { font-size: 11px; color: var(--ink-3); font-family: var(--mono); margin-bottom: 8px; }
.phone-svc-card .phone-prog {
    height: 5px;
    background: var(--paper-line);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}
.phone-svc-card .phone-prog span { display: block; height: 100%; background: var(--amber); border-radius: 10px; }
.phone-svc-card.accounts .phone-prog span { background: var(--red-ink); width: 20%; }
.phone-svc-card.sa .phone-prog span { background: var(--green-ink); width: 100%; }
.phone-svc-card .phone-btn {
    display: block;
    text-align: center;
    padding: 8px 10px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 2px;
}
.phone-svc-card.sa .phone-btn { background: var(--green-ink); }


/* ==========================================================================
   CHASE AUTOMATION SECTION
   ========================================================================== */
.chase-section {
    padding: 140px 0;
    background: var(--paper-warm);
    border-top: var(--rule);
    border-bottom: var(--rule);
    position: relative;
    overflow: hidden;
}
.chase-section::before {
    content: "";
    position: absolute;
    top: -100px; right: -100px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(179,52,26,0.08), transparent 70%);
    pointer-events: none;
}
.chase-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 70px;
    align-items: center;
}
.chase-copy h2 em { font-style: italic; color: var(--red-ink); font-variation-settings: "SOFT" 80; }
.chase-copy .big-num {
    font-family: var(--serif);
    font-size: clamp(5rem, 9vw, 8rem);
    font-weight: 300;
    line-height: 1;
    color: var(--red-ink);
    font-variation-settings: "SOFT" 30, "opsz" 144;
    margin: 30px 0 12px;
    letter-spacing: -0.04em;
}
.chase-copy .big-num em {
    font-style: italic;
    font-size: 0.4em;
    color: var(--ink-3);
    margin-left: 6px;
    font-variation-settings: "SOFT" 60;
}
.chase-copy .big-sub {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--ink-3);
    text-transform: uppercase;
    margin-bottom: 30px;
}
.chase-copy .chase-points { list-style: none; padding: 0; margin-top: 30px; }
.chase-copy .chase-points li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--paper-dark);
    font-size: 15px;
    line-height: 1.5;
}
.chase-copy .chase-points li:last-child { border-bottom: 0; }
.chase-copy .chase-points li::before {
    content: "→";
    font-family: var(--mono);
    color: var(--red-ink);
    font-weight: 600;
    flex-shrink: 0;
}

/* Email preview mockup */
.email-mock {
    background: var(--paper);
    border: 1px solid var(--ink);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 20px 50px -20px rgba(20,18,16,0.25);
    transform: rotate(0.5deg);
}
.email-head {
    padding: 16px 20px;
    border-bottom: var(--rule);
    background: var(--paper-warm);
}
.email-meta { display: grid; grid-template-columns: 70px 1fr; gap: 4px 16px; font-size: 13px; }
.email-meta .lbl { font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; padding-top: 4px; }
.email-meta .val { color: var(--ink); }
.email-meta .val.subject { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; margin-top: 2px; }
.email-body { padding: 26px 28px 30px; background: var(--paper); font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.email-body p { margin-bottom: 14px; }
.email-body .outstand-box {
    background: var(--paper-warm);
    border: 1px solid var(--paper-dark);
    border-left: 3px solid var(--red-ink);
    padding: 14px 16px;
    margin: 16px 0;
    font-family: var(--mono);
    font-size: 13px;
}
.email-body .outstand-box div {
    padding: 4px 0;
    display: flex;
    justify-content: space-between;
}
.email-body .outstand-box div::before { content: "◦ "; color: var(--red-ink); margin-right: 8px; }
.email-body .outstand-box div span:first-child { flex: 1; }
.email-body .outstand-box div span:last-child::before { content: " · "; }
.email-body .outstand-box div small { color: var(--ink-3); font-size: 11px; }
.email-body .portal-link {
    display: inline-block;
    padding: 10px 18px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 2px;
    margin: 8px 0 16px;
}
.email-body .sig {
    font-family: var(--serif);
    font-style: italic;
    color: var(--ink-2);
    font-size: 15px;
    padding-top: 10px;
    border-top: 1px dashed var(--paper-dark);
    margin-top: 20px;
    font-variation-settings: "SOFT" 60;
}

.chase-trigger-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding-top: 28px;
    border-top: var(--rule);
}
.trigger-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--ink);
    border-radius: 30px;
    font-family: var(--mono);
    font-size: 11px;
    background: var(--paper);
}
.trigger-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red-ink); }

/* ==========================================================================
   DEADLINES / COMPLIANCE SECTION
   ========================================================================== */
.deadlines-section {
    padding: 140px 0;
    background: var(--paper);
}
.deadlines-head { max-width: 720px; margin-bottom: 60px; }
.deadlines-head h2 em { font-style: italic; color: var(--red-ink); font-variation-settings: "SOFT" 80; }

.calendar-strip {
    background: var(--paper);
    border: 1px solid var(--ink);
    border-radius: 3px;
    box-shadow: 0 10px 30px -15px rgba(20,18,16,0.2);
    overflow: hidden;
}
.cal-months {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    border-bottom: var(--rule-strong);
}
.cal-months .m {
    padding: 12px 8px;
    text-align: center;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    text-transform: uppercase;
    border-right: var(--rule);
    position: relative;
}
.cal-months .m:last-child { border-right: 0; }
.cal-months .m strong { color: var(--ink); font-weight: 600; display: block; font-size: 13px; letter-spacing: 0.02em; }
.cal-months .m.current { background: var(--red-wash); color: var(--red-ink); }
.cal-months .m.current strong { color: var(--red-ink); }

.cal-deadlines {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    position: relative;
    min-height: 180px;
    padding: 16px 8px;
}
.cal-deadlines .pin {
    position: absolute;
    font-family: var(--mono);
    font-size: 10px;
    padding: 5px 8px;
    border: 1px solid;
    border-radius: 2px;
    white-space: nowrap;
    line-height: 1.3;
    background: var(--paper);
}
.cal-deadlines .pin::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -6px;
    transform: translateX(-50%);
    width: 1px;
    height: 6px;
    background: currentColor;
}
.cal-deadlines .pin strong { display: block; font-weight: 600; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.cal-deadlines .pin small { display: block; color: var(--ink-4); font-family: var(--sans); font-size: 10px; font-weight: 400; text-transform: none; letter-spacing: 0; margin-top: 1px; }

.pin-accounts { color: var(--svc-accounts); border-color: var(--svc-accounts); }
.pin-vat { color: var(--svc-vat); border-color: var(--svc-vat); }
.pin-paye { color: var(--svc-paye); border-color: var(--svc-paye); }
.pin-sa { color: var(--svc-sa); border-color: var(--svc-sa); }
.pin-mtd { color: var(--svc-mtd); border-color: var(--svc-mtd); }

.deadline-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 60px;
    padding-top: 40px;
    border-top: var(--rule);
}
.db-item { }
.db-item .db-num {
    font-family: var(--serif);
    font-size: 2.4rem;
    font-weight: 400;
    color: var(--red-ink);
    font-variation-settings: "SOFT" 30, "opsz" 96;
    line-height: 1;
    margin-bottom: 10px;
}
.db-item h4 { margin-bottom: 8px; font-size: 1.05rem; }
.db-item p { font-size: 13.5px; color: var(--ink-3); line-height: 1.55; }

/* ==========================================================================
   PRICING SECTION
   ========================================================================== */
.pricing {
    padding: 140px 0;
    background: var(--paper-warm);
    border-top: var(--rule);
    border-bottom: var(--rule);
    position: relative;
}
.pricing::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--paper-line) 1px, transparent 1px);
    background-size: 100% 40px;
    opacity: 0.4;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}
.pricing .wrap { position: relative; z-index: 1; }
.pricing-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 80px;
}
.pricing-head .section-label { justify-content: center; }
.pricing-head h2 em { font-style: italic; color: var(--red-ink); font-variation-settings: "SOFT" 80; }
.pricing-head .lede { margin: 24px auto 0; }
.pricing-head .annual-toggle {
    display: inline-flex;
    margin-top: 30px;
    padding: 4px;
    background: var(--paper);
    border: 1px solid var(--ink);
    border-radius: 30px;
}
.pricing-head .annual-toggle button {
    padding: 8px 20px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 0;
    background: transparent;
    border-radius: 30px;
    color: var(--ink-2);
}
.pricing-head .annual-toggle button.active {
    background: var(--ink);
    color: var(--paper);
}
.pricing-head .annual-toggle .save-pill {
    font-family: var(--serif);
    font-style: italic;
    color: var(--red-ink);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 6px;
    font-size: 12px;
    font-variation-settings: "SOFT" 80;
}

.price-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--ink);
    border: 1px solid var(--ink);
    border-radius: 4px;
    overflow: hidden;
}
.price-card {
    background: var(--paper);
    padding: 38px 28px 38px;
    border-right: 1px solid var(--paper-line);
    position: relative;
    display: flex;
    flex-direction: column;
}
.price-card:last-child { border-right: 0; }
.price-card.featured {
    background: var(--ink);
    color: var(--paper);
}
.price-card.featured::before {
    content: "MOST POPULAR";
    position: absolute;
    top: 14px; right: 14px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--red-ink-soft);
    background: rgba(179,52,26,0.15);
    padding: 3px 8px;
    border: 1px solid rgba(179,52,26,0.3);
    border-radius: 2px;
}
.price-card .tier {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red-ink);
    margin-bottom: 8px;
}
.price-card.featured .tier { color: var(--red-ink-soft); }
.price-card h3 {
    font-size: 1.6rem;
    margin-bottom: 14px;
    font-variation-settings: "SOFT" 40;
}
.price-card.featured h3 { color: var(--paper); }
.price-card .clients-cap {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--ink-3);
    padding: 8px 0 18px;
    border-bottom: 1px dashed var(--paper-dark);
    margin-bottom: 22px;
    letter-spacing: 0.02em;
}
.price-card.featured .clients-cap { color: rgba(245,241,232,0.6); border-bottom-color: rgba(255,255,255,0.15); }
.price-card .amount {
    font-family: var(--serif);
    font-weight: 400;
    line-height: 1;
    margin-bottom: 4px;
    font-variation-settings: "SOFT" 20, "opsz" 144;
}
.price-card .amount .currency { font-size: 1.4rem; vertical-align: top; position: relative; top: 12px; margin-right: 2px; color: var(--ink-3); }
.price-card.featured .amount .currency { color: rgba(245,241,232,0.6); }
.price-card .amount .num { font-size: clamp(3rem, 4vw, 3.6rem); font-weight: 350; }
.price-card .amount .cycle { font-size: 0.95rem; color: var(--ink-3); font-family: var(--sans); font-weight: 400; margin-left: 2px; }
.price-card.featured .amount .cycle { color: rgba(245,241,232,0.6); }
.price-card .vat-note {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--ink-4);
    margin-bottom: 26px;
}
.price-card.featured .vat-note { color: rgba(245,241,232,0.45); }

.price-card .pbtn {
    display: block;
    text-align: center;
    padding: 13px 16px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 28px;
    border-radius: 2px;
    border: 1px solid var(--ink);
    background: var(--paper);
    color: var(--ink);
}
.price-card.featured .pbtn {
    background: var(--red-ink);
    color: var(--paper);
    border-color: var(--red-ink);
}
.price-card .pbtn:hover { background: var(--ink); color: var(--paper); }
.price-card.featured .pbtn:hover { background: #d44528; }

.price-card ul {
    list-style: none;
    margin-top: 10px;
    padding-top: 22px;
    border-top: var(--rule);
}
.price-card.featured ul { border-top-color: rgba(255,255,255,0.15); }
.price-card ul li {
    padding: 8px 0;
    padding-left: 22px;
    font-size: 13.5px;
    color: var(--ink-2);
    line-height: 1.45;
    position: relative;
}
.price-card.featured ul li { color: rgba(245,241,232,0.85); }
.price-card ul li::before {
    content: "";
    position: absolute;
    left: 0; top: 14px;
    width: 10px; height: 1px;
    background: var(--red-ink);
}
.price-card.featured ul li::before { background: var(--red-ink-soft); }
.price-card ul li.extra { color: var(--ink); font-weight: 500; }
.price-card.featured ul li.extra { color: var(--paper); }

.pricing-note {
    text-align: center;
    margin-top: 40px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
}
.pricing-note em { font-family: var(--serif); font-style: italic; color: var(--red-ink); font-variation-settings: "SOFT" 80; font-size: 14px; }


/* ==========================================================================
   INTEGRATIONS & SECURITY
   ========================================================================== */
.integrations {
    padding: 140px 0;
    background: var(--paper);
}
.int-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}
.int-col h2 { margin-bottom: 22px; }
.int-col h2 em { font-style: italic; color: var(--red-ink); font-variation-settings: "SOFT" 80; }
.int-col .lede { margin-bottom: 36px; font-size: 1.1rem; }

.int-list {
    list-style: none;
    padding: 0;
}
.int-list li {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px dashed var(--paper-dark);
}
.int-list li:first-child { padding-top: 0; border-top: var(--rule); padding-top: 18px; }
.int-list .tick {
    width: 22px; height: 22px;
    border: 1px solid var(--ink);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--red-ink);
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 600;
}
.int-list .item-title { font-weight: 500; font-size: 15px; }
.int-list .item-title small { display: block; color: var(--ink-3); font-weight: 400; font-size: 12.5px; margin-top: 2px; }
.int-list .item-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials {
    padding: 140px 0;
    background: var(--ink);
    color: var(--paper);
    position: relative;
    overflow: hidden;
}
.testimonials::before {
    content: "";
    position: absolute;
    top: -200px; left: -150px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(179,52,26,0.1), transparent 70%);
}
.testimonials .wrap { position: relative; z-index: 1; }
.testimonials .section-label { border-bottom-color: rgba(255,255,255,0.15); color: rgba(245,241,232,0.65); }
.testimonials .section-label .sec-num { color: var(--red-ink-soft); }
.testimonials h2 { color: var(--paper); margin-bottom: 70px; }
.testimonials h2 em { font-style: italic; color: var(--red-ink-soft); font-variation-settings: "SOFT" 80; }

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.12);
}
.tcard {
    background: var(--ink);
    padding: 36px 30px 32px;
}
.tcard .rating {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--red-ink-soft);
    letter-spacing: 0.08em;
    margin-bottom: 20px;
}
.tcard .rating .stars { color: #f5bf4f; margin-right: 8px; }
.tcard .quote {
    font-family: var(--serif);
    font-weight: 350;
    font-size: 1.1rem;
    line-height: 1.45;
    color: var(--paper);
    margin-bottom: 30px;
    font-variation-settings: "SOFT" 50;
}
.tcard .attrib {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    align-items: center;
    padding-top: 22px;
    border-top: 1px dashed rgba(255,255,255,0.15);
}
.tcard .avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--red-ink);
    color: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-weight: 500;
    font-variation-settings: "SOFT" 40;
}
.tcard .attrib .name { color: var(--paper); font-weight: 500; font-size: 14px; }
.tcard .attrib .role { font-family: var(--mono); font-size: 11px; color: rgba(245,241,232,0.6); letter-spacing: 0.04em; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq {
    padding: 140px 0 140px;
    background: var(--paper);
}
.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 80px;
    align-items: start;
}
.faq-head { position: sticky; top: 90px; }
.faq-head h2 { margin-bottom: 22px; }
.faq-head h2 em { font-style: italic; color: var(--red-ink); font-variation-settings: "SOFT" 80; }
.faq-head p { font-size: 15px; line-height: 1.6; color: var(--ink-3); margin-bottom: 20px; }
.faq-head .contact-card {
    margin-top: 24px;
    padding: 20px;
    background: var(--paper-warm);
    border: 1px solid var(--paper-dark);
    border-left: 3px solid var(--red-ink);
}
.faq-head .contact-card strong { display: block; font-family: var(--serif); font-size: 1.1rem; margin-bottom: 4px; font-variation-settings: "SOFT" 40; }
.faq-head .contact-card small { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; }

.faq-list details {
    border-top: var(--rule);
    padding: 20px 0;
    position: relative;
}
.faq-list details:last-child { border-bottom: var(--rule); }
.faq-list summary {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    padding-right: 40px;
    position: relative;
    transition: color .2s;
    font-variation-settings: "SOFT" 40;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
    content: "+";
    position: absolute;
    right: 0; top: -4px;
    font-family: var(--mono);
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--red-ink);
    transition: transform .25s ease;
}
.faq-list details[open] summary::after { content: "−"; }
.faq-list summary:hover { color: var(--red-ink); }
.faq-list details p {
    padding-top: 16px;
    font-size: 15px;
    color: var(--ink-3);
    line-height: 1.65;
    max-width: 72ch;
}
.faq-list details p strong { color: var(--ink); }
.faq-list .q-num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--red-ink);
    letter-spacing: 0.08em;
    margin-right: 10px;
    font-weight: 400;
}

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final-cta {
    padding: 140px 0;
    background: var(--paper-warm);
    border-top: var(--rule-strong);
    position: relative;
    overflow: hidden;
}
.final-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        -45deg, transparent, transparent 20px,
        rgba(179,52,26,0.03) 20px, rgba(179,52,26,0.03) 22px
    );
    pointer-events: none;
}
.final-cta .wrap { position: relative; z-index: 1; text-align: center; }
.final-cta h2 {
    font-size: clamp(2.8rem, 5.6vw, 5rem);
    font-weight: 300;
    line-height: 1.05;
    max-width: 18ch;
    margin: 0 auto 30px;
    font-variation-settings: "SOFT" 30, "opsz" 144;
}
.final-cta h2 em { font-style: italic; color: var(--red-ink); font-variation-settings: "SOFT" 80; }
.final-cta .lede {
    max-width: 56ch;
    margin: 0 auto 40px;
}
.final-cta .cta-group { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.final-cta .trust-row {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 30px;
    flex-wrap: wrap;
}
.final-cta .trust-row .item {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.final-cta .trust-row .item::before { content: "◦"; color: var(--red-ink); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer {
    background: var(--ink);
    color: var(--paper);
    padding: 80px 0 0;
}
.foot-top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.foot-brand .logo { color: var(--paper); margin-bottom: 14px; }
.foot-brand .logo .tld { color: rgba(245,241,232,0.5); }
.foot-brand .logo .red { color: var(--red-ink-soft); }
.foot-brand .logo-mark { color: var(--red-ink-soft); border-color: var(--red-ink-soft); }
.foot-brand p {
    font-size: 13.5px;
    color: rgba(245,241,232,0.65);
    line-height: 1.6;
    max-width: 34ch;
    margin-bottom: 20px;
}
.foot-brand .addr {
    font-family: var(--mono);
    font-size: 11px;
    color: rgba(245,241,232,0.5);
    line-height: 1.6;
    letter-spacing: 0.04em;
}
.foot-col h5 {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red-ink-soft);
    margin-bottom: 20px;
    font-weight: 500;
}
.foot-col ul { list-style: none; }
.foot-col ul li { margin-bottom: 10px; }
.foot-col ul li a {
    color: rgba(245,241,232,0.75);
    font-size: 14px;
    transition: color .2s;
}
.foot-col ul li a:hover { color: var(--paper); }
.foot-col ul li .new {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    background: var(--red-ink);
    color: var(--paper);
    padding: 2px 5px;
    border-radius: 2px;
    margin-left: 6px;
    vertical-align: middle;
    text-transform: uppercase;
}

.foot-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 0 36px;
    font-family: var(--mono);
    font-size: 11px;
    color: rgba(245,241,232,0.5);
    letter-spacing: 0.04em;
    flex-wrap: wrap;
    gap: 20px;
}
.foot-bottom .legal { display: flex; gap: 20px; }
.foot-bottom .legal a { color: rgba(245,241,232,0.5); }
.foot-bottom .legal a:hover { color: var(--paper); }
.foot-colophon {
    padding: 40px 0 60px;
    font-family: var(--serif);
    font-size: 0.9rem;
    color: rgba(245,241,232,0.35);
    font-style: italic;
    border-top: 1px dashed rgba(255,255,255,0.12);
    max-width: 60ch;
    line-height: 1.55;
    font-variation-settings: "SOFT" 60;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
    .hero-grid, .portal-grid, .chase-grid, .int-grid, .tour-head, .problem-head { grid-template-columns: 1fr; gap: 60px; }
    .svc-grid { grid-template-columns: repeat(2, 1fr); }
    .f-grid, .problem-cards { grid-template-columns: repeat(2, 1fr); }
    .price-cards { grid-template-columns: repeat(2, 1fr); }
    .price-card { border-right: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); }
    .testimonial-grid { grid-template-columns: 1fr; }
    .annotations { grid-template-columns: repeat(2, 1fr); }
    .deadline-benefits { grid-template-columns: repeat(2, 1fr); }
    .how-steps { grid-template-columns: 1fr; }
    .how-steps::before { display: none; }
    .foot-top { grid-template-columns: 1fr 1fr; }
    .cal-months .m, .cal-deadlines { font-size: 9px; }
    .faq-grid { grid-template-columns: 1fr; }
    .faq-head { position: static; }
}
@media (max-width: 720px) {
    section { padding: 80px 0; }
    .wrap, .wrap-narrow { padding: 0 20px; }
    .nav-links { display: none; }
    .menu-btn { display: block; }
    .hero-cta, .final-cta .cta-group { flex-direction: column; align-items: stretch; }
    .hero-trust, .mock-stats { grid-template-columns: repeat(2, 1fr); }
    .hero-trust .item { border-right: 0 !important; padding: 16px 0 !important; border-bottom: var(--rule); }
    .svc-grid, .f-grid, .problem-cards { grid-template-columns: 1fr; }
    .price-cards { grid-template-columns: 1fr; }
    .deadline-benefits, .annotations { grid-template-columns: 1fr; }
    .mock-body { grid-template-columns: 1fr; }
    .mock-sidebar { display: none; }
    .mock-table, .mock-thead, .mock-trow { font-size: 11px; }
    .mock-thead, .mock-trow { grid-template-columns: 1fr 80px 70px; }
    .mock-thead > *:nth-child(n+4), .mock-trow > *:nth-child(n+4) { display: none; }
    .foot-top { grid-template-columns: 1fr; }
    .chase-note, .provided-tag { display: none; }
    .ledger-page { transform: none; }
    .pullquote { padding: 24px 20px; }
    .top-bar .ticker-right { display: none; }
    .cal-months, .cal-deadlines { grid-template-columns: repeat(6, 1fr); }
    .cal-months .m:nth-child(n+7) { display: none; }
}

/* Keep animations subtle */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* Optional enhanced reveal — only applied via .reveal-in from IO.
   Default state is fully visible (so content is never hidden from crawlers or
   when JS is off). The animation runs once on intersect. */
@keyframes revealUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.reveal-in {
    animation: revealUp .55s ease-out both;
    animation-delay: calc(var(--i, 0) * 60ms);
}

/* ==========================================================================
   ADDITIONAL STYLES FOR MULTI-PAGE SITE
   ========================================================================== */

/* ---------- Page header / intro for inner pages ---------- */
.page-intro {
    padding: 80px 0 60px;
    border-bottom: var(--rule);
    background: var(--paper);
    position: relative;
    overflow: hidden;
}
.page-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--paper-line) 1px, transparent 1px);
    background-size: 100% 32px;
    opacity: 0.35;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}
.page-intro .wrap { position: relative; z-index: 1; }
.page-intro .breadcrumbs {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.page-intro .breadcrumbs a { color: var(--ink-3); }
.page-intro .breadcrumbs a:hover { color: var(--red-ink); }
.page-intro .breadcrumbs .sep { color: var(--paper-dark); }
.page-intro .breadcrumbs .current { color: var(--red-ink); }

.page-intro h1 {
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    font-weight: 320;
    letter-spacing: -0.02em;
    font-variation-settings: "SOFT" 30, "opsz" 144;
    margin-bottom: 20px;
    max-width: 22ch;
}
.page-intro h1 em {
    font-style: italic;
    color: var(--red-ink);
    font-variation-settings: "SOFT" 80, "opsz" 144;
}
.page-intro .lede {
    max-width: 62ch;
    margin-bottom: 28px;
}

.page-intro .intro-meta {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    padding-top: 24px;
    border-top: var(--rule);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    text-transform: uppercase;
}
.page-intro .intro-meta strong { color: var(--ink); font-weight: 500; margin-right: 6px; }

/* Feature page sub-nav */
.sub-nav {
    background: var(--paper-warm);
    border-bottom: var(--rule);
    padding: 16px 0;
    position: sticky;
    top: 70px;
    z-index: 50;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.sub-nav .wrap {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scrollbar-width: none;
}
.sub-nav .wrap::-webkit-scrollbar { display: none; }
.sub-nav a {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
}
.sub-nav a:hover { color: var(--ink); }
.sub-nav a.active { color: var(--red-ink); border-bottom-color: var(--red-ink); }
.sub-nav a .num {
    display: inline-block;
    font-size: 10px;
    color: var(--ink-4);
    margin-right: 4px;
}

/* ---------- Feature showcase (large mockup + points) ---------- */
.feature-showcase {
    padding: 100px 0;
    border-bottom: var(--rule);
}
.feature-showcase:nth-child(even) { background: var(--paper-warm); }
.showcase-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 70px;
    align-items: center;
}
.showcase-grid.reverse { grid-template-columns: 1.2fr 1fr; }
.showcase-grid.reverse .showcase-visual { order: -1; }

.showcase-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red-ink);
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.showcase-label::before {
    content: "";
    width: 24px; height: 1px;
    background: var(--red-ink);
    display: inline-block;
}
.showcase-copy h2 {
    font-size: clamp(1.8rem, 3.6vw, 2.8rem);
    margin-bottom: 20px;
    font-variation-settings: "SOFT" 30;
}
.showcase-copy h2 em { font-style: italic; color: var(--red-ink); font-variation-settings: "SOFT" 80; }
.showcase-copy .lede { font-size: 1.1rem; margin-bottom: 28px; }
.showcase-copy .key-points {
    list-style: none;
    padding: 0;
    margin: 0;
}
.showcase-copy .key-points li {
    padding: 14px 0;
    padding-left: 26px;
    position: relative;
    border-bottom: 1px dashed var(--paper-dark);
    font-size: 14.5px;
    line-height: 1.5;
}
.showcase-copy .key-points li:last-child { border-bottom: 0; }
.showcase-copy .key-points li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--red-ink);
    font-family: var(--mono);
    font-weight: 600;
}
.showcase-copy .key-points li strong { font-weight: 600; color: var(--ink); }

/* ---------- Small feature tiles (3-up or 4-up) ---------- */
.small-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--paper-line);
    border: 1px solid var(--paper-line);
    margin: 60px 0;
}
.small-tile {
    background: var(--paper);
    padding: 30px 28px;
    position: relative;
    transition: background .2s;
}
.small-tile:hover { background: var(--paper-warm); }
.small-tile .st-num {
    font-family: var(--serif);
    font-style: italic;
    color: var(--red-ink);
    font-size: 1.3rem;
    font-variation-settings: "SOFT" 80;
    margin-bottom: 14px;
    display: inline-block;
}
.small-tile h4 {
    font-size: 1.15rem;
    margin-bottom: 10px;
    font-weight: 500;
    font-variation-settings: "SOFT" 40;
}
.small-tile p {
    font-size: 13.5px;
    color: var(--ink-3);
    line-height: 1.55;
}
.small-tile .sub-link {
    display: inline-block;
    margin-top: 18px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 2px;
}
.small-tile .sub-link:hover { color: var(--red-ink); border-color: var(--red-ink); }

/* ---------- Generic mockup card ---------- */
.ui-mock {
    background: var(--paper);
    border: 1px solid var(--ink);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 20px 60px -25px rgba(20,18,16,0.3);
    position: relative;
}
.ui-mock-head {
    padding: 12px 18px;
    background: var(--ink);
    color: var(--paper);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
}
.ui-mock-head .dots { display: flex; gap: 6px; }
.ui-mock-head .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.3); }
.ui-mock-head .dots i:nth-child(1) { background: #f07067; }
.ui-mock-head .dots i:nth-child(2) { background: #f5bf4f; }
.ui-mock-head .dots i:nth-child(3) { background: #63c257; }
.ui-mock-head .title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0;
}
.ui-mock-body {
    padding: 28px 26px 30px;
    background: var(--paper);
    min-height: 360px;
}
.ui-mock-body.compact { padding: 20px 22px; min-height: auto; }

/* ---------- Data viz bars (SVG-free) ---------- */
.bar-chart {
    display: grid;
    gap: 8px;
    margin: 20px 0;
}
.bar-chart .row {
    display: grid;
    grid-template-columns: 160px 1fr 50px;
    gap: 14px;
    align-items: center;
    font-size: 13px;
}
.bar-chart .row .lbl {
    font-family: var(--sans);
    color: var(--ink-2);
    font-weight: 500;
}
.bar-chart .row .bar {
    height: 22px;
    background: var(--paper-line);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.bar-chart .row .bar span {
    display: block;
    height: 100%;
    background: var(--red-ink);
    border-radius: 2px;
    transition: width .6s ease;
}
.bar-chart .row .bar.green span { background: var(--green-ink); }
.bar-chart .row .bar.amber span { background: var(--amber); }
.bar-chart .row .bar.accounts span { background: var(--svc-accounts); }
.bar-chart .row .bar.vat span      { background: var(--svc-vat); }
.bar-chart .row .bar.paye span     { background: var(--svc-paye); }
.bar-chart .row .bar.sa span       { background: var(--svc-sa); }
.bar-chart .row .bar.mtd span      { background: var(--svc-mtd); }
.bar-chart .row .val {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-2);
    text-align: right;
    font-weight: 600;
}

/* Ring chart using conic-gradient */
.ring {
    width: 140px; height: 140px;
    border-radius: 50%;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.ring::before {
    content: "";
    position: absolute;
    inset: 12px;
    background: var(--paper);
    border-radius: 50%;
}
.ring .inner {
    position: relative;
    text-align: center;
    font-family: var(--serif);
    z-index: 1;
}
.ring .inner .big { font-size: 2rem; font-weight: 500; line-height: 1; font-variation-settings: "SOFT" 30; }
.ring .inner .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }

/* ---------- Comparison table ---------- */
.compare-table {
    border: 1px solid var(--paper-dark);
    background: var(--paper);
    border-radius: 3px;
    overflow: hidden;
    margin: 40px 0;
}
.compare-table .head-row {
    display: grid;
    grid-template-columns: 1.3fr repeat(3, 1fr);
    background: var(--ink);
    color: var(--paper);
}
.compare-table .head-row > div {
    padding: 18px 20px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-right: 1px solid rgba(255,255,255,0.08);
}
.compare-table .head-row > div:last-child { border-right: 0; }
.compare-table .head-row .col-title {
    font-family: var(--serif);
    font-size: 1rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 500;
    font-variation-settings: "SOFT" 40;
}
.compare-table .head-row .col-title.mi { color: var(--red-ink-soft); }
.compare-table .row {
    display: grid;
    grid-template-columns: 1.3fr repeat(3, 1fr);
    border-bottom: 1px solid var(--paper-line);
}
.compare-table .row:last-child { border-bottom: 0; }
.compare-table .row > div {
    padding: 16px 20px;
    font-size: 14px;
    border-right: 1px solid var(--paper-line);
    display: flex;
    align-items: center;
}
.compare-table .row > div:last-child { border-right: 0; }
.compare-table .row .feat { font-weight: 500; font-size: 13.5px; }
.compare-table .row .feat small { display: block; color: var(--ink-4); font-weight: 400; font-size: 12px; margin-top: 2px; }
.compare-table .row .yes { color: var(--green-ink); font-family: var(--mono); font-weight: 600; font-size: 14px; }
.compare-table .row .no  { color: var(--ink-4); font-family: var(--mono); font-size: 14px; }
.compare-table .row .partial { color: var(--amber); font-family: var(--mono); font-weight: 600; font-size: 12px; }

/* ---------- Forms ---------- */
.form-block {
    background: var(--paper);
    border: 1px solid var(--ink);
    border-radius: 4px;
    padding: 40px 44px;
    box-shadow: 8px 8px 0 var(--paper-dark);
}
.form-block h3 {
    font-size: 1.5rem;
    margin-bottom: 8px;
    font-variation-settings: "SOFT" 40;
}
.form-block .sub {
    color: var(--ink-3);
    font-size: 14px;
    margin-bottom: 28px;
}

.field {
    margin-bottom: 20px;
}
.field label {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: 6px;
}
.field label .req { color: var(--red-ink); margin-left: 3px; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="password"],
.field input[type="date"],
.field input[type="time"],
.field select,
.field textarea {
    width: 100%;
    padding: 12px 14px;
    font-family: var(--sans);
    font-size: 15px;
    background: var(--paper);
    border: 1px solid var(--paper-dark);
    border-radius: 2px;
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(20,18,16,0.08);
}
.field textarea { resize: vertical; min-height: 100px; }
.field .help {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 6px;
    letter-spacing: 0.02em;
}
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.field .error {
    color: var(--red-ink);
    font-size: 12px;
    font-family: var(--mono);
    margin-top: 6px;
    letter-spacing: 0.02em;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
    border-color: var(--red-ink);
    background: rgba(179,52,26,0.03);
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--paper-dark);
    margin-top: 14px;
}
.form-actions .small-print {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}

/* Alerts / flashes */
.alert {
    padding: 16px 20px;
    border-radius: 3px;
    margin-bottom: 24px;
    border-left: 3px solid;
    font-size: 14px;
    line-height: 1.5;
}
.alert.success { background: var(--green-wash); border-color: var(--green-ink); color: var(--green-ink); }
.alert.error   { background: var(--red-wash); border-color: var(--red-ink); color: var(--red-ink); }
.alert.info    { background: var(--paper-warm); border-color: var(--ink); color: var(--ink); }
.alert strong { display: block; margin-bottom: 4px; }

/* ---------- Timeline ---------- */
.timeline {
    position: relative;
    padding-left: 44px;
    margin: 40px 0;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 14px;
    bottom: 14px;
    width: 1px;
    background: var(--paper-dark);
    border-left: 1px dashed var(--ink-4);
}
.tl-item {
    padding: 14px 0 30px;
    position: relative;
}
.tl-item::before {
    content: "";
    position: absolute;
    left: -36px;
    top: 18px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid var(--red-ink);
}
.tl-item.done::before { background: var(--red-ink); }
.tl-item.green::before { border-color: var(--green-ink); background: var(--green-ink); }
.tl-item .tl-time {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 4px;
}
.tl-item h4 { margin-bottom: 6px; font-size: 1.05rem; font-weight: 500; font-variation-settings: "SOFT" 40; }
.tl-item p { color: var(--ink-3); font-size: 13.5px; line-height: 1.55; }

/* ---------- Workflow diagram (horizontal boxes + arrows) ---------- */
.workflow {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 40px 0;
    overflow-x: auto;
    padding-bottom: 10px;
}
.wf-step {
    flex: 1;
    min-width: 200px;
    background: var(--paper);
    border: 1px solid var(--ink);
    padding: 24px 22px;
    position: relative;
    margin-right: 28px;
}
.wf-step:last-child { margin-right: 0; }
.wf-step::after {
    content: "→";
    position: absolute;
    right: -22px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--mono);
    color: var(--red-ink);
    font-size: 20px;
    font-weight: 600;
}
.wf-step:last-child::after { display: none; }
.wf-step .wf-icon {
    width: 36px; height: 36px;
    border: 1px solid var(--red-ink);
    color: var(--red-ink);
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: 50%;
}
.wf-step h5 { font-size: 14px; margin-bottom: 6px; font-weight: 500; font-family: var(--serif); font-variation-settings: "SOFT" 40; }
.wf-step p { font-size: 12px; color: var(--ink-3); line-height: 1.5; }

/* ---------- Breakout quote / stat strip ---------- */
.stat-strip {
    padding: 80px 0;
    background: var(--ink);
    color: var(--paper);
    text-align: center;
}
.stat-strip .items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.12);
}
.stat-strip .items > div {
    background: var(--ink);
    padding: 36px 24px;
}
.stat-strip .big {
    font-family: var(--serif);
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 350;
    line-height: 1;
    font-variation-settings: "SOFT" 30, "opsz" 144;
    color: var(--red-ink-soft);
    margin-bottom: 10px;
}
.stat-strip .big em { font-style: italic; color: var(--paper); font-variation-settings: "SOFT" 80; }
.stat-strip .lbl {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: rgba(245,241,232,0.7);
    text-transform: uppercase;
    line-height: 1.4;
}

/* ---------- Admin panel styles ---------- */
.admin-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
    background: var(--paper);
}
.admin-sidebar {
    background: var(--ink);
    color: var(--paper);
    padding: 28px 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.admin-sidebar .brand {
    padding: 0 24px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 20px;
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 500;
    font-variation-settings: "SOFT" 40;
}
.admin-sidebar .brand em { color: var(--red-ink-soft); font-style: italic; font-variation-settings: "SOFT" 80; }
.admin-sidebar .brand small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); font-weight: 400; margin-top: 4px; text-transform: uppercase; }
.admin-sidebar .grp-label { padding: 10px 24px 4px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-top: 12px; }
.admin-sidebar .side-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    border-left: 2px solid transparent;
    transition: background .15s, color .15s;
}
.admin-sidebar .side-link:hover { background: rgba(255,255,255,0.04); color: var(--paper); }
.admin-sidebar .side-link.active {
    background: rgba(179,52,26,0.12);
    border-left-color: var(--red-ink);
    color: var(--paper);
}
.admin-sidebar .side-link .count {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--red-ink-soft);
    padding: 2px 6px;
    background: rgba(179,52,26,0.15);
    border-radius: 2px;
}

.admin-main {
    padding: 32px 40px 80px;
    max-width: 1500px;
}
.admin-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: var(--rule);
    margin-bottom: 30px;
}
.admin-top h1 {
    font-size: 1.8rem;
    font-weight: 400;
    font-variation-settings: "SOFT" 30;
}
.admin-top h1 em { font-style: italic; color: var(--red-ink); font-variation-settings: "SOFT" 80; }
.admin-top .admin-user {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    display: flex;
    gap: 14px;
    align-items: center;
}
.admin-top .admin-user strong { color: var(--ink); }

.admin-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--paper-line);
    border: 1px solid var(--paper-line);
    margin-bottom: 40px;
}
.admin-stat {
    background: var(--paper);
    padding: 22px 24px;
}
.admin-stat .lbl {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ink-3);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.admin-stat .val {
    font-family: var(--serif);
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1;
    font-variation-settings: "SOFT" 20;
}
.admin-stat .val.red { color: var(--red-ink); }
.admin-stat .val.green { color: var(--green-ink); }
.admin-stat .val.amber { color: var(--amber); }
.admin-stat .delta {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 6px;
}

.data-table {
    background: var(--paper);
    border: 1px solid var(--paper-dark);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 30px;
}
.data-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.data-table thead th {
    background: var(--paper-warm);
    padding: 12px 14px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    text-align: left;
    border-bottom: 1px solid var(--paper-dark);
    font-weight: 500;
}
.data-table tbody td {
    padding: 14px;
    border-bottom: 1px solid var(--paper-line);
    vertical-align: top;
}
.data-table tbody tr:hover { background: var(--paper-warm); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td.primary { font-weight: 500; }
.data-table td.primary small { display: block; color: var(--ink-4); font-weight: 400; margin-top: 3px; font-size: 12px; }
.data-table .status-pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 2px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
}
.status-pill.new       { background: var(--red-wash); color: var(--red-ink); }
.status-pill.contacted { background: var(--amber-wash); color: var(--amber); }
.status-pill.qualified { background: var(--paper-warm); color: var(--ink); border: 1px solid var(--paper-dark); }
.status-pill.converted { background: var(--green-wash); color: var(--green-ink); }
.status-pill.lost      { background: #eee; color: var(--ink-4); }
.status-pill.trial     { background: var(--amber-wash); color: var(--amber); }
.status-pill.active    { background: var(--green-wash); color: var(--green-ink); }
.status-pill.cancelled { background: var(--red-wash); color: var(--red-ink); }
.status-pill.requested { background: var(--red-wash); color: var(--red-ink); }
.status-pill.scheduled { background: var(--paper-warm); color: var(--ink); border: 1px solid var(--paper-dark); }
.status-pill.completed { background: var(--green-wash); color: var(--green-ink); }

.pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-3);
}
.pager a {
    padding: 6px 10px;
    border: 1px solid var(--paper-dark);
    border-radius: 2px;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pager a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- Tab pills ---------- */
.tab-pills {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: var(--rule);
    padding-bottom: 2px;
}
.tab-pills a {
    padding: 9px 16px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-2);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}
.tab-pills a.active {
    color: var(--red-ink);
    border-bottom-color: var(--red-ink);
    font-weight: 600;
}

/* Utility */
.text-muted { color: var(--ink-3); }
.text-red { color: var(--red-ink); }
.text-green { color: var(--green-ink); }
.text-amber { color: var(--amber); }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 40px; }
.mt-6 { margin-top: 60px; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 40px; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-2 { gap: 16px; }
.gap-3 { gap: 24px; }

/* Responsive admin */
@media (max-width: 900px) {
    .admin-shell { grid-template-columns: 1fr; }
    .admin-sidebar { position: static; height: auto; }
    .admin-stats { grid-template-columns: repeat(2, 1fr); }
    .showcase-grid, .showcase-grid.reverse { grid-template-columns: 1fr; gap: 40px; }
    .showcase-grid.reverse .showcase-visual { order: 0; }
    .small-tiles { grid-template-columns: 1fr; }
    .field-row { grid-template-columns: 1fr; }
    .stat-strip .items { grid-template-columns: repeat(2, 1fr); }
    .compare-table .head-row, .compare-table .row { grid-template-columns: 1.3fr 1fr; }
    .compare-table .head-row > div:nth-child(n+3),
    .compare-table .row > div:nth-child(n+3) { display: none; }
    .workflow { flex-direction: column; }
    .wf-step { margin-right: 0; margin-bottom: 28px; }
    .wf-step::after { right: 50%; transform: translateX(50%) rotate(90deg); top: auto; bottom: -22px; }
    .wf-step:last-child { margin-bottom: 0; }
    .sub-nav { top: 0; }
}


/* ============================================================
   NEW MARKETING PAGE COMPONENTS
   ============================================================ */

/* Page intro (shared across subpages) */
.page-intro {
    padding: 60px 0 40px;
    background: var(--paper);
    border-bottom: 1px dashed var(--ink-4);
}
.page-intro .breadcrumbs {
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    margin-bottom: 32px;
}
.page-intro .breadcrumbs a { color: var(--ink-2); text-decoration: none; }
.page-intro .breadcrumbs a:hover { color: var(--accent); }
.page-intro .breadcrumbs span { margin: 0 8px; color: var(--ink-4); }
.page-intro h1 {
    font-family: var(--font-serif);
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin: 12px 0 20px;
    color: var(--ink);
    font-variation-settings: 'SOFT' 30, 'opsz' 144, 'wght' 500;
}
.page-intro h1 em {
    font-style: italic;
    color: var(--accent);
    font-variation-settings: 'SOFT' 80, 'opsz' 144, 'wght' 400;
}
.page-intro .lede {
    font-size: 19px;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 760px;
    margin: 0;
}

/* Section label */
.section-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.section-label .sec-num { color: var(--accent); font-weight: 600; }

/* Svc chip */
.svc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-2);
}
.svc-chip .dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ink-3);
}

/* Stat strip */
.stat-strip {
    padding: 40px 0;
    background: var(--paper-2);
    border-top: 1px solid var(--ink-5);
    border-bottom: 1px solid var(--ink-5);
}
.strip-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
.strip-item .big {
    font-family: var(--font-serif);
    font-size: 44px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-weight: 500;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.strip-item .big em {
    font-style: italic;
    color: var(--accent);
    font-size: 18px;
    font-weight: 400;
}
.strip-item .lbl {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--ink-3);
    margin-top: 8px;
    line-height: 1.4;
}

/* Feature showcase */
.feature-showcase {
    padding: 80px 0;
    background: var(--paper);
}
.feature-showcase .fs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 80px;
}
.feature-showcase .fs-row:last-child { margin-bottom: 0; }
.feature-showcase .fs-row.reverse .fs-visual { order: -1; }
.feature-showcase .fs-copy .kicker {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
    padding: 4px 10px;
    background: var(--paper-2);
    border: 1px solid var(--accent-tint);
    border-radius: 3px;
}
.feature-showcase .fs-copy h2 {
    font-family: var(--font-serif);
    font-size: 38px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
    color: var(--ink);
    font-variation-settings: 'SOFT' 40, 'opsz' 96, 'wght' 500;
}
.feature-showcase .fs-copy h2 em {
    font-style: italic;
    color: var(--accent);
    font-variation-settings: 'SOFT' 80, 'opsz' 96, 'wght' 400;
}
.feature-showcase .fs-copy p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0 0 20px;
}
.feature-points {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
}
.feature-points li {
    padding: 8px 0;
    border-bottom: 1px dashed var(--ink-5);
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.45;
}
.feature-points li:last-child { border-bottom: none; }
.feature-points li strong { color: var(--ink); font-weight: 600; }

/* UI mock frames */
.ui-mock {
    background: var(--paper-2);
    border: 1px solid var(--ink-4);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.ui-mock .mock-bar {
    background: var(--paper);
    border-bottom: 1px solid var(--ink-5);
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-2);
}
.ui-mock .mock-bar .crumb { display: flex; align-items: center; gap: 8px; }
.ui-mock .mock-chrome {
    background: var(--ink);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.ui-mock .mock-chrome .dots { display: flex; gap: 6px; }
.ui-mock .mock-chrome .dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
}
.ui-mock .mock-chrome .url {
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.08);
    padding: 4px 10px;
    border-radius: 3px;
    flex: 1;
}
.ui-mock .mock-body-simple { padding: 16px; }

/* Tags */
.tag {
    display: inline-block;
    padding: 3px 10px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 3px;
    border: 1px solid transparent;
}
.tag-green { background: rgba(45,90,61,0.1); color: var(--green); border-color: rgba(45,90,61,0.2); }
.tag-amber { background: rgba(184,135,32,0.12); color: var(--amber); border-color: rgba(184,135,32,0.25); }
.tag-red { background: rgba(179,52,26,0.1); color: var(--accent); border-color: rgba(179,52,26,0.2); }
.tag-paper { background: var(--paper-2); color: var(--ink-3); border-color: var(--ink-5); }

/* Period detail mini */
.period-detail-mini { padding: 4px 0; }
.pd-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px dashed var(--ink-5);
    font-size: 13px;
}
.pd-row:last-child { border-bottom: none; }
.pd-label { color: var(--ink-3); }
.pd-label small { font-size: 11px; opacity: 0.75; }
.pd-value { color: var(--ink); font-family: var(--font-mono); font-size: 13px; }
.pd-value.red { color: var(--accent); }
.inline-link {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px dashed var(--accent);
    font-size: 12px;
}
.inline-link:hover { border-bottom-style: solid; }

/* Workflow visual */
.workflow {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    padding: 20px;
    background: var(--paper-2);
    border: 1px dashed var(--ink-4);
    border-radius: 6px;
}
.wf-step {
    flex: 1;
    min-width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 8px;
    background: var(--paper);
    border: 1px solid var(--ink-5);
    border-radius: 4px;
}
.wf-step.filed { background: rgba(45,90,61,0.06); border-color: var(--green); }
.wf-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-serif);
    font-size: 16px;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}
.wf-step.filed .wf-num { background: var(--green); }
.wf-label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.3;
}
.wf-label small {
    display: block;
    font-size: 10px;
    color: var(--ink-3);
    text-transform: none;
    margin-top: 2px;
    letter-spacing: 0.02em;
}
.wf-arrow {
    display: flex;
    align-items: center;
    color: var(--ink-4);
    font-family: var(--font-serif);
    font-size: 22px;
    font-style: italic;
}

/* Template list */
.template-list { padding: 12px 16px; }
.tl-item {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed var(--ink-5);
    font-size: 13px;
    color: var(--ink);
}
.tl-item:last-child { border-bottom: none; }
.tl-item small { font-size: 10.5px; color: var(--green); font-family: var(--font-mono); }
.tl-item small.red { color: var(--accent); }
.template-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px dashed var(--ink-4);
    background: var(--paper-2);
}

/* Timeline showcase */
.timeline-showcase {
    padding: 80px 0;
    background: var(--paper-2);
}
.section-h2 {
    font-family: var(--font-serif);
    font-size: 38px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    text-align: center;
    font-variation-settings: 'SOFT' 40, 'opsz' 96, 'wght' 500;
}
.section-h2 em { font-style: italic; color: var(--accent); }
.sub-lede {
    text-align: center;
    color: var(--ink-3);
    font-size: 16px;
    max-width: 660px;
    margin: 0 auto 48px;
}
.timeline {
    max-width: 780px;
    margin: 0 auto;
    position: relative;
    padding-left: 120px;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 100px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--ink-5);
    border-left: 1px dashed var(--ink-4);
}
.tl-item {
    position: relative;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 40px;
    margin-bottom: 32px;
    margin-left: -120px;
    padding-left: 120px;
}
.tl-marker {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
    text-align: right;
    padding-top: 2px;
    position: absolute;
    left: 0;
    width: 80px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.tl-body {
    background: var(--paper);
    border: 1px solid var(--ink-5);
    border-left: 3px solid var(--ink-3);
    padding: 16px 20px;
    border-radius: 4px;
    position: relative;
}
.tl-body::before {
    content: '';
    position: absolute;
    left: -29px;
    top: 18px;
    width: 10px;
    height: 10px;
    background: var(--ink);
    border: 2px solid var(--paper-2);
    border-radius: 50%;
}
.tl-item.ready .tl-body { border-left-color: var(--amber); }
.tl-item.ready .tl-body::before { background: var(--amber); }
.tl-item.filed .tl-body { border-left-color: var(--green); }
.tl-item.filed .tl-body::before { background: var(--green); }
.tl-body h4 {
    font-family: var(--font-serif);
    font-size: 18px;
    margin: 0 0 4px;
    color: var(--ink);
    font-variation-settings: 'wght' 500;
}
.tl-body p { font-size: 14px; color: var(--ink-2); margin: 0; line-height: 1.5; }

/* CTA mini */
.cta-mini {
    padding: 64px 0;
    background: var(--ink);
    color: var(--paper);
    text-align: center;
}
.cta-mini h2 {
    font-family: var(--font-serif);
    font-size: 38px;
    line-height: 1.1;
    margin: 0 0 12px;
    color: var(--paper);
    font-variation-settings: 'SOFT' 40, 'opsz' 96, 'wght' 500;
}
.cta-mini h2 em { font-style: italic; color: var(--amber); }
.cta-mini p { color: rgba(245,241,232,0.75); font-size: 16px; margin: 0 0 28px; }
.cta-mini .cta-group {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Quarter grid */
.quarter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 16px;
}
.q-tile {
    background: var(--paper);
    border: 1px solid var(--ink-5);
    padding: 12px;
    border-radius: 4px;
    text-align: center;
}
.q-tile.done { background: rgba(45,90,61,0.06); border-color: rgba(45,90,61,0.3); }
.q-tile.current { background: rgba(184,135,32,0.08); border-color: rgba(184,135,32,0.35); box-shadow: 0 0 0 2px rgba(184,135,32,0.12); }
.q-tile.future { background: var(--paper-2); opacity: 0.65; }
.q-name { font-family: var(--font-serif); font-size: 18px; font-style: italic; color: var(--ink); }
.q-range { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; margin: 4px 0 6px; }
.q-due { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.q-due.red { color: var(--accent); font-weight: 600; }

/* Mock table */
.mock-table { padding: 0; font-size: 13px; }
.mock-thead, .mock-trow {
    display: grid;
    grid-template-columns: 2fr 0.6fr 1fr 1fr 0.7fr;
    gap: 12px;
    padding: 12px 16px;
    align-items: center;
}
.mock-thead {
    background: var(--paper);
    border-bottom: 1px solid var(--ink-5);
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
}
.mock-trow { border-bottom: 1px dashed var(--ink-5); }
.mock-trow:last-child { border-bottom: none; }
.mock-trow .client { display: flex; flex-direction: column; }
.mock-trow .client small { font-size: 11px; color: var(--ink-3); }

/* Employee list */
.emp-list { padding: 8px 16px; }
.emp-row {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed var(--ink-5);
    font-size: 13px;
}
.emp-row:last-child { border-bottom: none; }
.emp-row.complete { opacity: 0.65; }
.emp-name { font-weight: 500; color: var(--ink); }
.emp-role { font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); text-transform: uppercase; }
.emp-items { font-size: 12px; color: var(--ink-2); }

/* Escalation */
.escalation {
    display: flex;
    gap: 6px;
    margin: 20px 0 0;
    padding: 16px;
    background: var(--paper-2);
    border: 1px dashed var(--ink-4);
    border-radius: 6px;
}
.esc-step {
    flex: 1;
    text-align: center;
    padding: 8px 4px;
    background: var(--paper);
    border: 1px solid var(--ink-5);
    border-radius: 4px;
}
.esc-step.urgent { background: rgba(184,135,32,0.1); border-color: var(--amber); }
.esc-step.critical { background: rgba(179,52,26,0.08); border-color: var(--accent); }
.esc-step.deadline { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.esc-step .month {
    font-family: var(--font-serif);
    font-size: 15px;
    font-style: italic;
    color: var(--ink);
}
.esc-step.deadline .month { color: var(--paper); }
.esc-step .action {
    font-family: var(--font-mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    margin-top: 4px;
}
.esc-step.deadline .action { color: var(--amber); }

/* Mock stats */
.mock-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--ink-5);
    border-top: 1px solid var(--ink-5);
}
.mock-stat {
    background: var(--paper);
    padding: 16px;
}
.mock-stat .lbl { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--ink-3); letter-spacing: 0.08em; }
.mock-stat .val { font-family: var(--font-serif); font-size: 32px; color: var(--ink); margin: 4px 0 2px; line-height: 1; }
.mock-stat .val.green { color: var(--green); }
.mock-stat .val.red { color: var(--accent); }
.mock-stat .delta { font-size: 11px; color: var(--ink-3); }

/* SA schedule */
.sa-schedule { padding: 12px 16px; }
.sch-group { margin-bottom: 12px; }
.sch-group:last-child { margin-bottom: 0; }
.sch-head {
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-3);
    padding: 6px 0;
    border-bottom: 1px dashed var(--ink-4);
}
.sch-item {
    padding: 6px 0 6px 20px;
    font-size: 13px;
    color: var(--ink);
    border-bottom: 1px dashed var(--ink-5);
}
.sch-item:last-child { border-bottom: none; }
.sch-item.done { color: var(--green); opacity: 0.85; }

/* MTD timeline */
.mtd-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 16px; }
.mtd-q {
    background: var(--paper);
    border: 1px solid var(--ink-5);
    border-radius: 4px;
    padding: 10px 8px;
    text-align: center;
}
.mtd-q.current { background: rgba(184,135,32,0.08); border-color: var(--amber); box-shadow: 0 0 0 2px rgba(184,135,32,0.12); }
.mtd-q.final { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mtd-q .q-label { font-family: var(--font-serif); font-size: 15px; font-style: italic; }
.mtd-q.final .q-label { color: var(--paper); }
.mtd-q .q-dates { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3); text-transform: uppercase; margin: 2px 0; }
.mtd-q.final .q-dates { color: rgba(245,241,232,0.7); }
.mtd-q .q-due { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); margin-bottom: 4px; }
.mtd-q.final .q-due { color: var(--amber); }

/* MTD tracks */
.mtd-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
.track { background: var(--paper); border: 1px solid var(--ink-5); border-radius: 4px; padding: 10px 12px; }
.track-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px dashed var(--ink-5); }
.track-badge {
    font-family: var(--font-mono);
    font-size: 9.5px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.06em;
}
.track-badge.se { background: rgba(78,122,84,0.12); color: #4e7a54; }
.track-badge.pr { background: rgba(58,109,130,0.12); color: #3a6d82; }
.track-item { padding: 5px 0; font-size: 12.5px; color: var(--ink); }
.track-item.done { color: var(--green); opacity: 0.8; }

/* Small tiles (bulk-import feature) */
.small-tiles { padding: 80px 0; background: var(--paper-2); }
.st-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.st-tile {
    background: var(--paper);
    border: 1px solid var(--ink-5);
    border-radius: 6px;
    padding: 24px;
}
.st-tile .ico { font-size: 28px; margin-bottom: 12px; }
.st-tile h4 { font-family: var(--font-serif); font-size: 18px; margin: 0 0 8px; color: var(--ink); font-variation-settings: 'wght' 500; }
.st-tile p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin: 0; }

/* Import paste mock extras */
.import-tabs { display: flex; border-bottom: 1px solid var(--ink-5); margin: -16px -16px 14px; }
.imp-tab { padding: 10px 14px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); border-right: 1px solid var(--ink-5); }
.imp-tab.active { color: var(--ink); background: var(--paper); border-bottom: 2px solid var(--accent); margin-bottom: -1px; }
.import-textarea {
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 12px;
    border-radius: 4px;
    max-height: 260px;
    overflow: hidden;
}
.import-textarea .line { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 2px 0; color: rgba(245,241,232,0.85); }
.import-textarea .line .ln { color: rgba(245,241,232,0.4); text-align: right; }
.import-textarea .line.cursor .txt::after { content: ''; display: inline-block; width: 6px; height: 11px; background: var(--amber); animation: blink 1s step-end infinite; margin-left: 1px; }
@keyframes blink { 50% { opacity: 0; } }
.import-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0 0;
    border-top: 1px dashed var(--ink-4);
    margin-top: 10px;
}
.parse-status { font-family: var(--font-mono); font-size: 11px; color: var(--green); display: flex; align-items: center; gap: 6px; }
.parse-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }

/* Preview table */
.preview-table { padding: 0; }
.pv-head, .pv-row {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1.4fr 0.6fr 0.4fr;
    gap: 10px;
    padding: 10px 14px;
    font-size: 12px;
    align-items: center;
}
.pv-head {
    background: var(--paper);
    border-bottom: 1px solid var(--ink-5);
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    color: var(--ink-3);
    letter-spacing: 0.08em;
}
.pv-row { border-bottom: 1px dashed var(--ink-5); }
.pv-row.warn { background: rgba(184,135,32,0.06); }
.client-ref { font-family: var(--font-mono); font-size: 11px; color: var(--accent); font-weight: 600; display: block; }
.pv-row small { font-size: 11px; color: var(--ink-3); }
.pv-row small.new { color: var(--amber); font-weight: 600; }
.tick { color: var(--green); font-weight: 700; }
.warn-ico { color: var(--amber); font-weight: 700; font-size: 16px; }
.preview-footer {
    padding: 12px 16px;
    background: var(--paper);
    border-top: 1px solid var(--ink-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--ink-2);
}

/* Import done */
.done-banner {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 20px;
    background: rgba(45,90,61,0.08);
    border-bottom: 1px solid rgba(45,90,61,0.2);
}
.done-icon { width: 44px; height: 44px; background: var(--green); color: var(--paper); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; }
.done-banner h4 { font-family: var(--font-serif); font-size: 18px; margin: 0; color: var(--green); }
.done-banner p { font-size: 12px; color: var(--ink-2); margin: 0; }
.done-time { font-family: var(--font-mono); font-size: 14px; color: var(--ink-3); }
.done-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ink-5); }
.ds-stat { background: var(--paper); padding: 16px; text-align: center; }
.ds-stat .num { font-family: var(--font-serif); font-size: 30px; color: var(--ink); line-height: 1; }
.ds-stat .lbl { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.done-next { padding: 16px 20px; background: var(--paper); }
.done-next h5 { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; letter-spacing: 0.08em; }
.next-actions { display: grid; gap: 6px; }
.next-actions .na { color: var(--accent); text-decoration: none; font-size: 13px; padding: 6px 0; border-bottom: 1px dashed var(--ink-5); }
.next-actions .na:hover { color: var(--ink); }

/* Responsive */
@media (max-width: 900px) {
    .strip-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .feature-showcase .fs-row, .feature-showcase .fs-row.reverse { grid-template-columns: 1fr; gap: 40px; }
    .feature-showcase .fs-row.reverse .fs-visual { order: 0; }
    .st-grid { grid-template-columns: 1fr; }
    .mtd-timeline { grid-template-columns: repeat(2, 1fr); }
    .mtd-tracks { grid-template-columns: 1fr; }
    .quarter-grid { grid-template-columns: repeat(2, 1fr); }
    .mock-thead, .mock-trow { grid-template-columns: 1fr; gap: 4px; }
    .mock-thead { display: none; }
    .emp-row { grid-template-columns: 1fr 1fr; }
    .mock-stats { grid-template-columns: repeat(2, 1fr); }
    .done-summary { grid-template-columns: repeat(2, 1fr); }
    .pv-head, .pv-row { grid-template-columns: 1fr; gap: 4px; }
    .pv-head { display: none; }
    .escalation { flex-wrap: wrap; }
    .esc-step { min-width: calc(33% - 6px); }
    .timeline { padding-left: 50px; }
    .timeline::before { left: 32px; }
    .tl-item { grid-template-columns: 1fr; gap: 8px; margin-left: -50px; padding-left: 50px; }
    .tl-marker { position: static; width: auto; text-align: left; }
    .tl-body::before { left: -23px; }
}

/* ============================================================
   Additional classes for service and feature detail pages
   ============================================================ */

/* Service badge in page intro */
.svc-badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; background: var(--paper-2); border: 1px solid var(--paper-3); border-radius: 100px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); margin-bottom: 24px; }
.svc-badge .dot { width: 8px; height: 8px; border-radius: 50%; }
.svc-accounts-badge .dot { background: var(--svc-accounts, #8b5a2b); }
.svc-vat-badge .dot { background: var(--svc-vat, #7a5687); }
.svc-paye-badge .dot { background: var(--svc-paye, #3a6d82); }
.svc-sa-badge .dot { background: var(--svc-sa, #9e4a47); }
.svc-mtd-badge .dot { background: var(--svc-mtd, #4c7a54); }

/* Period detail block */
.period-detail-mini { display: flex; flex-direction: column; }
.pd-row { display: grid; grid-template-columns: 1fr 1fr; padding: 10px 0; border-bottom: 1px dashed var(--paper-3); font-size: 13px; }
.pd-row:last-child { border-bottom: none; }
.pd-label { color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.pd-label small { text-transform: none; letter-spacing: 0; font-size: 10px; color: var(--ink-4); }
.pd-value { color: var(--ink); font-variant-numeric: tabular-nums; }
.pd-value.red { color: var(--red-ink); }
.pd-value em { font-style: italic; color: var(--ink-4); }
.inline-link { color: var(--accent); text-decoration: none; font-size: 12px; }
.inline-link:hover { color: var(--ink); }

/* Standard checklist list style */
.template-list { list-style: none; margin: 0; padding: 0; }
.template-list li { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--paper-3); font-size: 13px; }
.template-list li:last-child { border-bottom: none; }
.t-check { display: inline-flex; width: 20px; height: 20px; border: 1.5px solid var(--green-ink); border-radius: 4px; color: var(--green-ink); font-weight: bold; align-items: center; justify-content: center; font-size: 12px; }
.t-check.empty { border-color: var(--paper-3); color: transparent; }
.t-name { color: var(--ink-2); }
.t-meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.06em; }

/* Workflow step row */
.workflow { display: flex; align-items: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.wf-step { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: var(--paper-2); border: 1px solid var(--paper-3); border-radius: 8px; min-width: 0; }
.wf-step.filed { background: var(--green-ink); border-color: var(--green-ink); color: var(--paper); }
.wf-num { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 13px; }
.wf-step.filed .wf-num { background: var(--paper); color: var(--green-ink); }
.wf-label { font-size: 13px; }
.wf-label small { display: block; font-size: 10px; font-family: var(--font-mono); color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
.wf-step.filed .wf-label small { color: rgba(255,255,255,0.7); }
.wf-arrow { color: var(--ink-4); font-size: 18px; }

/* Stat strip */
.stat-strip { background: var(--paper-2); padding: 48px 0; border-top: 1px solid var(--paper-3); border-bottom: 1px solid var(--paper-3); }
.stat-strip .strip-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.strip-item { text-align: left; }
.strip-item .big { font-family: var(--font-serif); font-weight: 400; font-size: 2.8rem; line-height: 1; color: var(--ink); }
.strip-item .big em { font-style: italic; font-size: 1.4rem; color: var(--accent); margin-left: 6px; }
.strip-item .lbl { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin-top: 8px; }

/* Timeline */
.timeline-showcase { padding: 100px 0; background: var(--paper); }
.timeline { max-width: 760px; margin: 40px auto 0; padding-left: 80px; position: relative; }
.timeline::before { content: ''; position: absolute; top: 8px; bottom: 8px; left: 60px; width: 1px; background: var(--paper-3); }
.tl-item { display: grid; grid-template-columns: 60px 1fr; gap: 30px; align-items: start; padding: 18px 0; }
.tl-marker { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); text-align: right; padding-top: 4px; }
.tl-body { padding-left: 12px; position: relative; }
.tl-body::before { content: ''; position: absolute; left: -23px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); border: 2px solid var(--paper); }
.tl-item.ready .tl-body::before { background: var(--amber-ink); }
.tl-item.filed .tl-body::before { background: var(--green-ink); }
.tl-body h4 { font-family: var(--font-serif); font-weight: 500; font-size: 1.3rem; margin: 0 0 4px; color: var(--ink); }
.tl-body p { font-size: 14px; color: var(--ink-2); margin: 0; line-height: 1.55; }

/* Escalation ladder */
.escalation { display: flex; align-items: stretch; gap: 4px; margin-top: 20px; }
.esc-step { flex: 1; padding: 14px 10px; background: var(--paper-2); border: 1px solid var(--paper-3); text-align: center; border-radius: 4px; }
.esc-step .month { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 6px; }
.esc-step .action { font-size: 13px; color: var(--ink); }
.esc-step.urgent { background: var(--amber-wash, #fff5e5); border-color: var(--amber-ink); }
.esc-step.critical { background: var(--red-wash, #fbe7e3); border-color: var(--red-ink); }
.esc-step.deadline { background: var(--green-ink); color: var(--paper); border-color: var(--green-ink); }
.esc-step.deadline .month, .esc-step.deadline .action { color: var(--paper); }

/* SA KPIs */
.sa-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sa-kpi { padding: 14px; background: var(--paper); border: 1px solid var(--paper-3); border-radius: 4px; }
.sa-kpi .lbl { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.sa-kpi .val { font-family: var(--font-serif); font-size: 2rem; line-height: 1; color: var(--ink); margin: 6px 0; }
.sa-kpi .val.green { color: var(--green-ink); }
.sa-kpi .val.red { color: var(--red-ink); }
.sa-kpi .delta { font-size: 11px; color: var(--ink-3); }

/* SA schedule */
.sa-schedule { display: flex; flex-direction: column; gap: 10px; }
.sch-group { padding: 10px 12px; background: var(--paper); border: 1px solid var(--paper-3); border-radius: 4px; }
.sch-head { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 6px; }
.sch-item { font-size: 13px; padding: 3px 0; color: var(--ink-2); }
.sch-item.done { color: var(--green-ink); }

/* MTD-specific */
.mtd-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.mtd-q { padding: 12px 10px; background: var(--paper); border: 1px solid var(--paper-3); border-radius: 4px; text-align: center; }
.mtd-q.current { background: var(--paper-2); border-color: var(--amber-ink); }
.mtd-q.final { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mtd-q .q-label { font-family: var(--font-serif); font-size: 1.4rem; color: var(--ink); }
.mtd-q.final .q-label { color: var(--paper); }
.mtd-q .q-dates { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin: 4px 0; }
.mtd-q.final .q-dates { color: rgba(255,255,255,0.7); }
.mtd-q .q-due { font-size: 11px; color: var(--ink-2); margin-bottom: 6px; }
.mtd-q.final .q-due { color: rgba(255,255,255,0.9); }
.mtd-q .q-due.red { color: var(--red-ink); font-weight: 600; }

.mtd-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.track { padding: 12px; background: var(--paper); border: 1px solid var(--paper-3); border-radius: 4px; }
.track-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--paper-3); margin-bottom: 8px; font-size: 13px; font-weight: 500; }
.track-badge { display: inline-block; padding: 2px 8px; border-radius: 3px; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; }
.track-badge.se { background: var(--svc-sa, #9e4a47); color: var(--paper); }
.track-badge.pr { background: var(--svc-mtd, #4c7a54); color: var(--paper); }
.track-item { font-size: 12px; padding: 3px 0; color: var(--ink-2); }
.track-item.done { color: var(--green-ink); }

/* Quarter grid */
.quarter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.q-tile { padding: 12px; border: 1px solid var(--paper-3); border-radius: 4px; background: var(--paper); }
.q-tile.done { background: var(--paper-2); }
.q-tile.current { border-color: var(--amber-ink); background: #fff5e5; }
.q-tile.future { opacity: 0.5; }
.q-tile .q-name { font-family: var(--font-serif); font-size: 1.3rem; color: var(--ink); }
.q-tile .q-range { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin: 4px 0; }
.q-tile .q-due { font-size: 11px; color: var(--ink-2); }
.q-tile .q-due.red { color: var(--red-ink); font-weight: 600; }

/* Employee list */
.emp-list { display: flex; flex-direction: column; gap: 4px; }
.emp-row { display: grid; grid-template-columns: 1.6fr 1fr 1.3fr auto; gap: 10px; align-items: center; padding: 10px 12px; background: var(--paper); border: 1px solid var(--paper-3); border-radius: 4px; font-size: 13px; }
.emp-row.complete { background: var(--paper-2); }
.emp-name { font-weight: 500; color: var(--ink); }
.emp-role { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.emp-items { font-size: 12px; color: var(--ink-2); }

/* Mock table for PAYE dashboard */
.mock-table { display: flex; flex-direction: column; gap: 1px; }
.mock-thead, .mock-trow { display: grid; grid-template-columns: 2.5fr 0.5fr 1.2fr 1.2fr 0.7fr; gap: 12px; padding: 10px 12px; font-size: 12px; }
.mock-thead { background: var(--paper-2); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.mock-trow { background: var(--paper); border: 1px solid var(--paper-3); border-radius: 3px; align-items: center; }
.mock-trow.ready { background: #f4fdf6; }
.mock-trow .client { font-weight: 500; color: var(--ink); }
.mock-trow .client small { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
.mock-trow .ddl { font-family: var(--font-mono); font-size: 11px; }
.mock-trow .ddl strong { display: block; color: var(--ink); }
.mock-trow .ddl small { color: var(--ink-3); }

/* Tag system */
.tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }
.tag-green { background: #d8f0df; color: var(--green-ink); }
.tag-amber { background: #fbecd2; color: #7a5c1f; }
.tag-red { background: #fbe2dc; color: var(--red-ink); }
.tag-paper { background: var(--paper-2); color: var(--ink-3); border: 1px solid var(--paper-3); }

/* Audit log */
.audit-log { display: flex; flex-direction: column; }
.log-row { display: grid; grid-template-columns: 60px 40px 1fr; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed var(--paper-3); font-size: 12px; }
.log-row:last-child { border-bottom: none; }
.log-time { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-4); padding-top: 1px; }
.log-user { font-family: var(--font-mono); font-size: 10px; font-weight: 600; background: var(--ink); color: var(--paper); width: 28px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; }
.log-action { color: var(--ink-2); line-height: 1.5; }
.log-action strong { color: var(--ink); }

/* Communication timeline */
.comm-timeline { display: flex; flex-direction: column; gap: 2px; }
.ct-row { display: grid; grid-template-columns: 16px 1fr; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed var(--paper-3); font-size: 12px; }
.ct-row:last-child { border-bottom: none; }
.ct-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green-ink); margin-top: 4px; }
.ct-dot.red { background: var(--red-ink); }
.ct-body { color: var(--ink-2); line-height: 1.6; }
.ct-body .tag { margin-left: 6px; }

/* Upload list */
.upload-list { display: flex; flex-direction: column; gap: 6px; }
.ul-item { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 12px; background: var(--paper); border: 1px solid var(--paper-3); border-radius: 4px; font-size: 12px; }
.ul-item.done { background: var(--paper-2); }
.ul-item.dropping { border-style: dashed; background: #f4fdf6; border-color: var(--green-ink); }
.ul-icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: var(--paper-2); border-radius: 4px; color: var(--ink-3); font-size: 16px; }
.ul-item.done .ul-icon { background: var(--green-ink); color: var(--paper); }
.ul-item.dropping .ul-icon { background: var(--green-ink); color: var(--paper); }
.ul-body strong { display: block; color: var(--ink); font-size: 13px; font-weight: 500; }
.ul-files, .ul-drop { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.ul-drop { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--green-ink); }

/* Security panel */
.security-panel { display: flex; flex-direction: column; }
.sec-row { display: grid; grid-template-columns: 1.2fr 2fr; padding: 8px 0; border-bottom: 1px dashed var(--paper-3); font-size: 12px; }
.sec-row:last-child { border-bottom: none; }
.sec-lbl { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.sec-val { color: var(--ink); }

/* Query list / review queue */
.query-list { display: flex; flex-direction: column; gap: 10px; }
.qr-item { padding: 12px; background: var(--paper); border: 1px solid var(--paper-3); border-radius: 4px; }
.qr-item.resolved { background: var(--paper-2); }
.qr-q { font-size: 12px; color: var(--ink); line-height: 1.5; margin-bottom: 6px; }
.qr-q strong { color: var(--ink-3); }
.qr-a { font-size: 12px; color: var(--ink-2); margin-bottom: 6px; line-height: 1.5; }
.qr-a strong { color: var(--ink-3); }
.qr-a em { color: var(--ink-4); font-style: italic; }
.qr-meta { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-4); }

.review-queue { display: flex; flex-direction: column; gap: 4px; }
.rv-row { display: grid; grid-template-columns: 1.4fr 2.2fr auto; gap: 12px; align-items: center; padding: 10px 12px; background: var(--paper); border: 1px solid var(--paper-3); border-radius: 4px; font-size: 12px; }
.rv-client { font-weight: 500; color: var(--ink); }
.rv-q { color: var(--ink-2); line-height: 1.4; }
.rv-actions { display: flex; gap: 4px; }
.btn-chip { padding: 4px 10px; background: var(--paper-2); border: 1px solid var(--paper-3); border-radius: 3px; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; color: var(--ink-2); }
.btn-chip.green { background: #d8f0df; border-color: var(--green-ink); color: var(--green-ink); }
.btn-chip.amber { background: #fbecd2; border-color: var(--amber-ink); color: #7a5c1f; }

/* New period */
.new-period { padding: 4px; }
.np-header { display: flex; gap: 14px; align-items: center; padding-bottom: 16px; border-bottom: 1px dashed var(--paper-3); margin-bottom: 12px; }
.np-icon { font-size: 28px; }
.np-title { font-family: var(--font-serif); font-size: 1.4rem; color: var(--ink); }
.np-sub { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin-top: 2px; }
.np-details { display: flex; flex-direction: column; margin-bottom: 14px; }
.np-row { display: grid; grid-template-columns: 1fr 1.4fr; padding: 6px 0; border-bottom: 1px dashed var(--paper-3); font-size: 12px; }
.np-row:last-child { border-bottom: none; }
.np-k { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.np-v { color: var(--ink); }
.np-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Notes panel */
.notes-panel { display: flex; flex-direction: column; gap: 10px; }
.note-sticky { padding: 12px; background: #fff9e6; border-left: 4px solid #dcb43f; border-radius: 2px; font-size: 13px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.note-sticky.yellow { background: #fff1c4; border-left-color: #c89a20; }
.note-sticky.red { background: #fbe2dc; border-left-color: var(--red-ink); }
.note-kicker { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin-bottom: 4px; }
.note-body { color: var(--ink); line-height: 1.5; }
.note-meta { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-4); margin-top: 6px; }

/* Item status grid */
.item-status-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.isi { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--paper); border: 1px solid var(--paper-3); border-radius: 3px; font-size: 12px; }
.isi-name { color: var(--ink); }
.isi-stat { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 10px; }
.isi.outstanding .isi-stat { background: #fbe2dc; color: var(--red-ink); }
.isi.pending .isi-stat { background: #fbecd2; color: #7a5c1f; }
.isi.reviewing .isi-stat { background: #dce9f2; color: #2d5478; }
.isi.resolved .isi-stat { background: #d8f0df; color: var(--green-ink); }
.isi.na .isi-stat { background: var(--paper-2); color: var(--ink-4); }

.status-list { list-style: none; margin: 20px 0 0; padding: 0; }
.status-list li { padding: 8px 0; border-bottom: 1px dashed var(--paper-3); font-size: 14px; color: var(--ink-2); }
.status-list li strong { color: var(--ink); margin-right: 6px; }
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; }
.status-dot.status-outstanding { background: var(--red-ink); }
.status-dot.status-pending { background: var(--amber-ink); }
.status-dot.status-reviewing { background: #3a6d82; }
.status-dot.status-resolved { background: var(--green-ink); }
.status-dot.status-na { background: var(--ink-4); }

/* Item detail */
.item-detail { }
.id-hdr { padding-bottom: 12px; border-bottom: 1px dashed var(--paper-3); margin-bottom: 12px; }
.id-title { font-family: var(--font-serif); font-size: 1.3rem; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.id-sub { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin-top: 4px; }
.id-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.id-meta > div { padding: 8px 10px; background: var(--paper); border: 1px solid var(--paper-3); border-radius: 3px; }
.id-lbl { display: block; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.id-val { display: block; font-size: 12px; color: var(--ink); margin-top: 2px; }
.id-timeline { display: flex; flex-direction: column; }
.idt-row { display: grid; grid-template-columns: 60px 1fr; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--paper-3); font-size: 12px; }
.idt-row:last-child { border-bottom: none; }
.idt-time { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-4); }
.idt-act { color: var(--ink-2); line-height: 1.5; }

/* Capacity grid */
.capacity-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cap-col { padding: 10px; background: var(--paper); border: 1px solid var(--paper-3); border-radius: 4px; }
.cap-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.cap-head span { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); font-weight: 400; }
.cap-head .over { color: var(--red-ink); font-size: 9px; }
.cap-bar { height: 4px; background: var(--paper-2); border-radius: 2px; overflow: hidden; margin-bottom: 8px; }
.cap-bar span { display: block; height: 100%; background: var(--green-ink); }
.cap-bar.over span { background: var(--red-ink); }
.cap-job { font-size: 11px; color: var(--ink-2); padding: 3px 0; }

/* Roles list */
.roles-list { display: flex; flex-direction: column; gap: 4px; }
.role-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; background: var(--paper); border: 1px solid var(--paper-3); border-radius: 4px; }
.role-avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; font-size: 12px; color: var(--paper); }
.role-avatar.partner { background: var(--ink); }
.role-avatar.manager { background: var(--accent); }
.role-avatar.accountant { background: var(--svc-vat, #7a5687); }
.role-avatar.admin { background: var(--svc-paye, #3a6d82); }
.role-avatar.readonly { background: var(--ink-4); }
.role-info strong { display: block; color: var(--ink); font-size: 13px; font-weight: 500; }
.role-info small { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.role-tag { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 10px; background: var(--paper-2); border: 1px solid var(--paper-3); border-radius: 100px; color: var(--ink-3); }

/* Permissions matrix */
.perm-matrix { display: flex; flex-direction: column; }
.pm-head, .pm-row { display: grid; grid-template-columns: 2fr repeat(5, 1fr); gap: 8px; padding: 8px 12px; font-size: 12px; align-items: center; }
.pm-head { background: var(--paper-2); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.pm-row { border-bottom: 1px dashed var(--paper-3); color: var(--ink); }
.pm-row:last-child { border-bottom: none; }
.pm-y { color: var(--green-ink); text-align: center; font-weight: 600; }
.pm-n { color: var(--ink-4); text-align: center; }

/* Service summary */
.svc-summary { display: flex; flex-direction: column; }
.svc-sm-row { display: grid; grid-template-columns: 14px 1.5fr 1.3fr 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px dashed var(--paper-3); font-size: 13px; }
.svc-sm-row:last-child { border-bottom: none; }
.svc-sm-row.muted { opacity: 0.6; }
.sm-dot { width: 10px; height: 10px; border-radius: 50%; }
.sm-name { font-weight: 500; color: var(--ink); }
.sm-cad { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.sm-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.sm-link { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); text-decoration: none; }

/* Custom service editor */
.custom-svc { display: flex; flex-direction: column; }
.cs-row { display: grid; grid-template-columns: 1fr 2fr; padding: 8px 0; border-bottom: 1px dashed var(--paper-3); font-size: 12px; }
.cs-row:last-child { border-bottom: none; }
.cs-lbl { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.cs-val { color: var(--ink); }
.cs-val .svc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* CTA mini (service-page bottom) */
.cta-mini { padding: 80px 0; text-align: center; background: var(--paper-2); border-top: 1px solid var(--paper-3); }
.cta-mini h2 { font-family: var(--font-serif); font-size: 2.4rem; font-weight: 400; margin: 0 0 12px; }
.cta-mini h2 em { font-style: italic; color: var(--accent); }
.cta-mini .sub-lede { font-size: 16px; color: var(--ink-2); max-width: 560px; margin: 0 auto 28px; }
.cta-mini .cta-group { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* Section intro h2 */
.section-h2 { font-family: var(--font-serif); font-size: 2.6rem; font-weight: 400; margin: 0 0 12px; }
.section-h2 em { font-style: italic; color: var(--accent); }
.sub-lede { font-size: 17px; color: var(--ink-2); max-width: 680px; margin: 0 auto 30px; text-align: center; }

/* Small tiles grid */
.small-tiles { padding: 80px 0; background: var(--paper); }
.small-tiles .section-h2 { text-align: center; }
.small-tiles .st-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 50px; }
.st-tile { padding: 20px; background: var(--paper-2); border: 1px solid var(--paper-3); border-radius: 4px; }
.st-tile .ico { font-size: 22px; margin-bottom: 8px; }
.st-tile h4 { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 500; margin: 0 0 6px; color: var(--ink); }
.st-tile p { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin: 0; }

@media (max-width: 900px) {
    .stat-strip .strip-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .sa-kpis { grid-template-columns: repeat(2, 1fr); }
    .id-meta { grid-template-columns: repeat(2, 1fr); }
    .capacity-grid { grid-template-columns: repeat(2, 1fr); }
    .perm-matrix .pm-head, .perm-matrix .pm-row { grid-template-columns: 2fr repeat(5, 1fr); font-size: 10px; gap: 4px; }
    .small-tiles .st-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   FIX BLOCK — overrides for layout regressions discovered in production.
   These rules are intentionally at the end of the file so they win the
   cascade against the older duplicate definitions earlier in this file.
   Do not delete or move above earlier .tl-item / .plan rules.
   ===================================================================== */

/* ---- Pricing page: .plan-grid + .plan markup ---- */
.pricing-grid { padding: 60px 0 100px; }

.billing-toggle { display: flex; justify-content: center; margin-bottom: 48px; }
.toggle-group {
    display: inline-flex;
    background: var(--paper-2, #ebe5d4);
    border: 1px solid var(--paper-line, #ddd5c0);
    border-radius: 100px;
    padding: 4px;
    gap: 2px;
}
.btn-toggle {
    padding: 9px 22px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: transparent;
    border: 0;
    border-radius: 100px;
    color: var(--ink-2);
    cursor: pointer;
    transition: all 0.15s;
}
.btn-toggle.active {
    background: var(--ink);
    color: var(--paper);
}
.btn-toggle .save {
    font-family: var(--serif);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    color: var(--red-ink);
    margin-left: 4px;
    font-size: 12px;
}
.btn-toggle.active .save { color: var(--red-ink-soft, #f8a890); }

.plan-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--ink);
    border: 1px solid var(--ink);
    border-radius: 6px;
    overflow: hidden;
}

.plan {
    background: var(--paper);
    padding: 36px 26px 32px;
    border-right: 1px solid var(--paper-line, #ddd5c0);
    position: relative;
    display: flex;
    flex-direction: column;
}
.plan:last-child { border-right: 0; }

.plan.featured {
    background: var(--ink);
    color: var(--paper);
}
.plan.featured .plan-head h3,
.plan.featured .plan-tagline,
.plan.featured .plan-meta,
.plan.featured .plan-features li,
.plan.featured .plan-small,
.plan.featured .plan-price { color: var(--paper); }
.plan.featured .plan-meta strong { color: var(--paper); }
.plan.featured .plan-tagline { color: rgba(245,241,232,0.7); }
.plan.featured .plan-small { color: rgba(245,241,232,0.55); }
.plan.featured .plan-price .currency,
.plan.featured .plan-price .per { color: rgba(245,241,232,0.6); }
.plan.featured .plan-features { border-top-color: rgba(255,255,255,0.18); }
.plan.featured .plan-features li { color: rgba(245,241,232,0.85); }
.plan.featured .plan-features li::before { color: var(--red-ink-soft, #f8a890); }

.featured-ribbon {
    position: absolute;
    top: 14px;
    right: 14px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--red-ink-soft, #f8a890);
    background: rgba(179,52,26,0.18);
    padding: 4px 9px;
    border: 1px solid rgba(179,52,26,0.35);
    border-radius: 2px;
    text-transform: uppercase;
}

.plan-head { margin-bottom: 18px; }
.plan-head h3 {
    font-family: var(--serif);
    font-size: 1.65rem;
    font-weight: 400;
    margin: 0 0 4px;
    color: var(--ink);
    font-variation-settings: "SOFT" 30;
}
.plan-tagline {
    font-size: 12.5px;
    color: var(--ink-3);
    margin: 0;
    line-height: 1.4;
}

.plan-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 14px;
    color: var(--ink);
}
.plan-price .currency { font-family: var(--serif); font-size: 1.4rem; color: var(--ink-3); }
.plan-price .amount   { font-family: var(--serif); font-size: 3.2rem; line-height: 1; font-variation-settings: "wght" 400, "SOFT" 0; }
.plan-price .per      { font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-left: 4px; }

.plan-meta {
    font-size: 13px;
    color: var(--ink-2);
    padding: 12px 0;
    border-top: 1px dashed var(--paper-line, #ddd5c0);
    border-bottom: 1px dashed var(--paper-line, #ddd5c0);
    margin-bottom: 18px;
}
.plan-meta strong { font-weight: 600; color: var(--ink); }

.plan-features {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    flex: 1;
}
.plan-features li {
    position: relative;
    padding: 7px 0 7px 22px;
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.45;
}
.plan-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 7px;
    color: var(--red-ink, #b3341a);
    font-weight: 600;
}

.plan .btn { margin-top: auto; }
.plan-small {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    margin: 12px 0 0;
    text-align: center;
    line-height: 1.5;
}

@media (max-width: 1100px) {
    .plan-grid { grid-template-columns: repeat(2, 1fr); }
    .plan:nth-child(2n) { border-right: 0; }
    .plan:nth-child(-n+2) { border-bottom: 1px solid var(--paper-line, #ddd5c0); }
}
@media (max-width: 640px) {
    .plan-grid { grid-template-columns: 1fr; }
    .plan { border-right: 0; border-bottom: 1px solid var(--paper-line, #ddd5c0); }
    .plan:last-child { border-bottom: 0; }
}

/* ---- Timeline (services pages): RESET to working layout ---- */
/* Override the broken duplicate definitions added in earlier patches */
.timeline-showcase {
    padding: 80px 0 60px;
    background: var(--paper);
}
.timeline-showcase .section-h2 { text-align: center; }
.timeline-showcase .sub-lede { text-align: center; }

.timeline {
    max-width: 720px;
    margin: 48px auto 0;
    padding-left: 0;
    position: relative;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 70px;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background: var(--paper-line, #ddd5c0);
}

.tl-item {
    /* Reset any broken grid/margin from prior definitions */
    display: grid !important;
    grid-template-columns: 70px 1fr !important;
    gap: 28px !important;
    align-items: start !important;
    margin: 0 0 4px !important;
    margin-left: 0 !important;
    padding: 16px 0 !important;
    padding-left: 0 !important;
    position: relative !important;
}

.tl-item::before {
    content: "";
    position: absolute;
    left: 64px;
    top: 24px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid var(--ink);
    z-index: 1;
}
.tl-item.ready::before { border-color: var(--amber-ink, #b88720); background: var(--amber-ink, #b88720); }
.tl-item.filed::before { border-color: var(--green-ink, #2d5a3d); background: var(--green-ink, #2d5a3d); }

.tl-marker {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    text-align: right;
    padding-top: 6px;
    position: static !important;
    width: auto !important;
    background: transparent;
}

.tl-body {
    background: transparent !important;
    border: 0 !important;
    border-left: 0 !important;
    padding: 0 !important;
    padding-left: 16px !important;
    border-radius: 0 !important;
}
.tl-body::before { display: none !important; content: none !important; }

.tl-body h4 {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0 0 4px;
    color: var(--ink);
    font-variation-settings: "SOFT" 30;
}
.tl-body p {
    font-size: 14px;
    color: var(--ink-2);
    margin: 0;
    line-height: 1.6;
    max-width: 500px;
}

@media (max-width: 720px) {
    .timeline { padding-left: 0; }
    .timeline::before { left: 50px; }
    .tl-item { grid-template-columns: 50px 1fr !important; gap: 18px !important; }
    .tl-item::before { left: 44px; width: 11px; height: 11px; }
    .tl-marker { font-size: 9.5px; padding-top: 5px; }
    .tl-body p { max-width: 100%; font-size: 13.5px; }
}

/* ---- Make sure CTA mini (used at end of service pages) renders ---- */
.cta-mini { padding: 60px 0; text-align: center; background: var(--paper-2, #ebe5d4); border-top: 1px solid var(--paper-line, #ddd5c0); }
.cta-mini h2 { font-family: var(--serif); font-weight: 400; font-size: 2.2rem; margin: 0 0 10px; color: var(--ink); }
.cta-mini h2 em { font-style: italic; color: var(--red-ink); font-variation-settings: "SOFT" 80; }
.cta-mini .sub-lede { font-size: 16px; color: var(--ink-2); max-width: 540px; margin: 0 auto 24px; text-align: center; }
.cta-mini .cta-group { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* =====================================================================
   FIX BLOCK 2 — fills in the rest of the missing class definitions:
   admin shell, page-specific sections (about, pricing comparison),
   funnel charts, login screen, plus small utility classes used inline.
   ===================================================================== */

/* ---- Generic utilities ---- */
.subtle { color: var(--ink-3); font-size: 13px; margin-top: 2px; }
.mono-sm { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.btn-sm { padding: 7px 14px; font-size: 11px; }
.inline-select {
    background: var(--paper-2, #ebe5d4);
    border: 1px solid var(--paper-line, #ddd5c0);
    color: var(--ink);
    padding: 5px 10px;
    font-family: var(--mono);
    font-size: 11px;
    border-radius: 3px;
    cursor: pointer;
}
.form-group { margin-bottom: 16px; }
.form-group label {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    margin-bottom: 5px;
}
.form-group label small { font-size: 9.5px; text-transform: none; letter-spacing: 0.02em; opacity: 0.75; }

.kv {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    padding: 7px 0;
    border-bottom: 1px dashed var(--paper-line, #ddd5c0);
    font-size: 13px;
    align-items: baseline;
}
.kv:last-child { border-bottom: 0; }
.kv .k { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); }
.kv .v { color: var(--ink); word-break: break-word; }

/* ---- About page sections ---- */
.about-story { padding: 80px 0; background: var(--paper); }
.story-cols {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 80px;
    align-items: start;
}
.story-cols h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 2rem;
    margin: 0 0 18px;
    color: var(--ink);
    font-variation-settings: "SOFT" 30;
}
.story-cols h2 em { font-style: italic; color: var(--red-ink); }
.story-cols p { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); margin-bottom: 18px; }

.values-band { padding: 80px 0; background: var(--paper-2, #ebe5d4); border-top: 1px solid var(--paper-line, #ddd5c0); border-bottom: 1px solid var(--paper-line, #ddd5c0); }
.values-band .section-h2 { text-align: center; }
.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-top: 48px;
}
.values-grid .value {
    background: var(--paper);
    border: 1px solid var(--paper-line, #ddd5c0);
    padding: 28px 28px 24px;
    border-radius: 4px;
    position: relative;
}
.values-grid .value .v-num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--red-ink);
    letter-spacing: 0.12em;
    margin-bottom: 12px;
}
.values-grid .value h4 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.3rem;
    margin: 0 0 8px;
    color: var(--ink);
    font-variation-settings: "SOFT" 30;
}
.values-grid .value p { font-size: 14px; color: var(--ink-2); line-height: 1.6; margin: 0; }

@media (max-width: 800px) {
    .story-cols { grid-template-columns: 1fr; gap: 32px; }
    .values-grid { grid-template-columns: 1fr; }
}

/* ---- Pricing compare section ---- */
.compare-section { padding: 80px 0; background: var(--paper-2, #ebe5d4); }
.compare-section .section-h2 { text-align: center; }
.compare-section .sub-lede { text-align: center; }
.feature-compare {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.cmp-group {
    background: var(--paper);
    border: 1px solid var(--paper-line, #ddd5c0);
    padding: 22px 24px 20px;
    border-radius: 4px;
}
.cmp-group h4 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.1rem;
    margin: 0 0 12px;
    color: var(--ink);
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--paper-line, #ddd5c0);
}
.cmp-group ul { list-style: none; margin: 0; padding: 0; }
.cmp-group li {
    position: relative;
    padding: 6px 0 6px 18px;
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.45;
}
.cmp-group li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--green-ink, #2d5a3d);
    font-weight: 600;
}

@media (max-width: 1000px) { .feature-compare { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .feature-compare { grid-template-columns: 1fr; } }

/* ---- ADMIN SHELL ---- */
body.admin-body {
    background: #1c1a17;
    color: #e8e3d7;
    font-family: var(--sans, "IBM Plex Sans", system-ui, sans-serif);
    margin: 0;
    min-height: 100vh;
}
.admin-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}

.admin-sidebar {
    background: #14110e;
    border-right: 1px solid #2a2622;
    padding: 24px 0 16px;
    display: flex;
    flex-direction: column;
}
.admin-brand { padding: 0 24px 24px; border-bottom: 1px solid #2a2622; margin-bottom: 8px; }
.admin-brand a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--paper);
    text-decoration: none;
}
.admin-brand .logo-mark {
    display: inline-flex;
    width: 32px;
    height: 32px;
    background: var(--red-ink, #b3341a);
    color: var(--paper);
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 14px;
}
.admin-brand .logo-name {
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--paper);
    line-height: 1.1;
    font-variation-settings: "SOFT" 20;
}
.admin-brand .logo-sub {
    font-family: var(--mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #8a7e6c;
    margin-top: 2px;
}

.admin-nav { flex: 1; padding: 8px 0; }
.nav-section { padding: 8px 0; border-bottom: 1px solid #2a2622; margin-bottom: 4px; }
.nav-section:last-child { border-bottom: 0; }
.nav-label {
    font-family: var(--mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #6a604f;
    padding: 4px 24px 8px;
}
.admin-nav a {
    display: flex;
    align-items: center;
    padding: 9px 24px;
    color: #bdb39f;
    text-decoration: none;
    font-size: 13px;
    border-left: 3px solid transparent;
    transition: all 0.1s;
}
.admin-nav a:hover { background: #1c1915; color: var(--paper); }
.admin-nav a.active {
    background: #1c1915;
    color: var(--paper);
    border-left-color: var(--red-ink, #b3341a);
    font-weight: 500;
}

.admin-user {
    padding: 14px 24px;
    border-top: 1px solid #2a2622;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--paper);
    font-size: 12px;
}
.admin-user .avatar {
    width: 34px;
    height: 34px;
    background: var(--red-ink, #b3341a);
    color: var(--paper);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-weight: 600;
    font-size: 11px;
}

.admin-main {
    padding: 32px 36px;
    background: #1c1a17;
    color: #e8e3d7;
    overflow-x: auto;
}
.admin-main h1, .admin-main h2, .admin-main h3 { color: var(--paper); }
.admin-main a { color: #dcb43f; }
.admin-main a:hover { color: #e8c875; }

/* Topbar inside admin-main */
.admin-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #2a2622;
}
.admin-topbar h1 {
    font-family: var(--serif);
    font-size: 1.7rem;
    font-weight: 400;
    margin: 0 0 4px;
    color: var(--paper);
    font-variation-settings: "SOFT" 30;
}
.admin-topbar .subtle { color: #8a7e6c; font-size: 12.5px; }
.topbar-actions { display: flex; gap: 8px; align-items: center; }

/* Tabs */
.admin-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 16px;
    border-bottom: 1px solid #2a2622;
}
.admin-tabs a {
    padding: 9px 16px;
    color: #8a7e6c;
    text-decoration: none;
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.admin-tabs a:hover { color: var(--paper); }
.admin-tabs a.active { color: var(--paper); border-bottom-color: var(--red-ink, #b3341a); }
.admin-tabs a .count {
    font-family: var(--mono);
    font-size: 9.5px;
    background: #2a2622;
    color: #8a7e6c;
    padding: 1px 6px;
    border-radius: 8px;
}
.admin-tabs a.active .count { background: var(--red-ink, #b3341a); color: var(--paper); }

/* Filter bar */
.admin-filter-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px 14px;
    background: #211d19;
    border: 1px solid #2a2622;
    border-radius: 4px;
    flex-wrap: wrap;
}
.admin-filter-bar label {
    font-family: var(--mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8a7e6c;
}
.admin-filter-bar select,
.admin-filter-bar input[type=text],
.admin-filter-bar input[type=search],
.admin-filter-bar input[type=email] {
    background: #14110e;
    border: 1px solid #2a2622;
    color: var(--paper);
    padding: 7px 10px;
    font-family: var(--mono);
    font-size: 12px;
    border-radius: 3px;
}
.admin-filter-bar select:focus,
.admin-filter-bar input:focus { outline: none; border-color: var(--red-ink, #b3341a); }
.admin-filter-bar .filter-count { margin-left: auto; font-family: var(--mono); font-size: 10px; color: #6a604f; text-transform: uppercase; letter-spacing: 0.06em; }

/* Tables */
.admin-table-wrap {
    background: #211d19;
    border: 1px solid #2a2622;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 24px;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: #211d19;
}
.admin-table thead { background: #14110e; }
.admin-table th {
    text-align: left;
    padding: 11px 14px;
    font-family: var(--mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8a7e6c;
    font-weight: 500;
    border-bottom: 1px solid #2a2622;
}
.admin-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #2a2622;
    color: #d4ccb8;
    font-size: 13px;
    vertical-align: top;
    line-height: 1.45;
}
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr:hover td { background: #1c1915; }
.admin-table tr.is-highlight td { background: #2a1f15; }
.admin-table td strong { color: var(--paper); font-weight: 500; }
.admin-table td small {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    color: #6a604f;
    margin-top: 2px;
}
.admin-table td a { color: #dcb43f; text-decoration: none; }
.admin-table td a:hover { text-decoration: underline; color: #e8c875; }

/* Detail card */
.admin-card {
    background: #211d19;
    border: 1px solid #2a2622;
    border-radius: 4px;
    padding: 20px 24px;
    margin-bottom: 16px;
}
.admin-card h3 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.15rem;
    color: var(--paper);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #2a2622;
}
.admin-card .kv { border-bottom-color: #2a2622; }
.admin-card .kv .k { color: #8a7e6c; }
.admin-card .kv .v { color: #d4ccb8; }
.admin-card code { background: #14110e; padding: 1px 6px; border-radius: 3px; font-family: var(--mono); font-size: 11px; color: #dcb43f; border: 1px solid #2a2622; }

/* Two-column layout */
.admin-detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; }
.admin-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* Empty state */
.admin-empty {
    text-align: center;
    padding: 64px 24px;
    color: #6a604f;
    background: #211d19;
    border: 1px dashed #2a2622;
    border-radius: 4px;
    margin: 16px 0;
}
.admin-empty .em-title {
    font-family: var(--serif);
    font-size: 1.4rem;
    color: var(--paper);
    margin-bottom: 8px;
    font-variation-settings: "SOFT" 30;
}
.admin-empty .em-sub { font-size: 13px; color: #8a7e6c; max-width: 460px; margin: 0 auto; line-height: 1.55; }
.admin-empty code { background: #14110e; padding: 2px 6px; border-radius: 3px; font-family: var(--mono); font-size: 11px; color: #dcb43f; }

/* Pagination */
.admin-pagination {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-top: 24px;
}
.admin-pagination a {
    padding: 6px 12px;
    background: #211d19;
    border: 1px solid #2a2622;
    color: #bdb39f;
    text-decoration: none;
    font-family: var(--mono);
    font-size: 12px;
    border-radius: 3px;
}
.admin-pagination a:hover { background: #2a2622; color: var(--paper); }
.admin-pagination a.active { background: var(--red-ink, #b3341a); border-color: var(--red-ink, #b3341a); color: var(--paper); }

/* Admin form */
.admin-form { color: #d4ccb8; }
.admin-form label { color: #8a7e6c; }
.admin-form input[type=text],
.admin-form input[type=email],
.admin-form input[type=password],
.admin-form input[type=number],
.admin-form input[type=date],
.admin-form input[type=search],
.admin-form textarea,
.admin-form select {
    width: 100%;
    background: #14110e;
    border: 1px solid #2a2622;
    color: var(--paper);
    padding: 10px 12px;
    font-family: var(--sans, system-ui, sans-serif);
    font-size: 13px;
    border-radius: 3px;
    box-sizing: border-box;
}
.admin-form textarea { min-height: 96px; resize: vertical; }
.admin-form input:focus, .admin-form textarea:focus, .admin-form select:focus {
    outline: none;
    border-color: var(--red-ink, #b3341a);
}

/* Stats */
.admin-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
.admin-stat {
    background: #211d19;
    border: 1px solid #2a2622;
    padding: 16px 18px;
    border-radius: 4px;
}
.stat-lbl, .admin-stat .stat-lbl {
    font-family: var(--mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8a7e6c;
    margin-bottom: 6px;
}
.stat-val, .admin-stat .stat-val {
    font-family: var(--serif);
    font-size: 2rem;
    line-height: 1;
    color: var(--paper);
    font-weight: 400;
    font-variation-settings: "SOFT" 0;
}
.stat-val.red, .admin-stat .stat-val.red { color: #e86e50; }
.stat-val.green, .admin-stat .stat-val.green { color: #6fb981; }
.stat-val.amber, .admin-stat .stat-val.amber { color: #dcb43f; }
.stat-detail, .admin-stat .stat-detail {
    font-family: var(--mono);
    font-size: 10.5px;
    color: #8a7e6c;
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Funnel chart */
.mini-funnel { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
.funnel-row {
    display: grid;
    grid-template-columns: 110px 1fr 50px;
    gap: 12px;
    align-items: center;
    padding: 4px 0;
}
.funnel-lbl { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: #bdb39f; }
.funnel-bar {
    height: 18px;
    background: #14110e;
    border-radius: 2px;
    overflow: hidden;
}
.funnel-bar span { display: block; height: 100%; background: var(--red-ink, #b3341a); transition: width 0.3s ease; min-width: 4px; }
.funnel-count { font-family: var(--mono); font-size: 13px; color: var(--paper); text-align: right; font-weight: 500; }

/* Atag — admin-area pill tags. Distinct from .tag (light theme). */
.atag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-family: var(--mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}
.atag-default   { background: #2a2622; color: #8a7e6c; }
.atag-new       { background: #3a2a18; color: #dcb43f; }
.atag-active    { background: #1e3320; color: #6fb981; }
.atag-trial     { background: #24303e; color: #7db5d8; }
.atag-contacted { background: #2a2a36; color: #a8a4cc; }
.atag-lost      { background: #3a1f1f; color: #c8a297; }
.atag-qualified { background: #2d2a18; color: #d4c267; }
.atag-converted { background: #1e3320; color: #6fb981; }
.atag-unread    { background: #3a2218; color: #e86e50; }
.atag-replied   { background: #1e3320; color: #6fb981; }
.atag-resolved  { background: #1e3320; color: #6fb981; }
.atag-archived  { background: #2a2622; color: #6a604f; }
.atag-scheduled { background: #24303e; color: #7db5d8; }
.atag-completed { background: #1e3320; color: #6fb981; }
.atag-cancelled { background: #3a1f1f; color: #c8a297; }
.atag-past_due  { background: #3a1f1f; color: #c8a297; }
.atag-expired   { background: #2a2622; color: #6a604f; }

/* Admin alert/flash */
.admin-alert {
    padding: 10px 14px;
    border-radius: 3px;
    font-size: 13px;
    margin-bottom: 16px;
}
.admin-alert.success { background: #1e3320; border: 1px solid #2e5a3d; color: #6fb981; }
.admin-alert.error   { background: #3a1f1f; border: 1px solid #5a2e2e; color: #e86e50; }
.admin-alert.info    { background: #24303e; border: 1px solid #2d4a62; color: #7db5d8; }

/* Plans-admin grid (admin/plans.php) */
.plans-admin-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 12px;
}
.plan-admin-card {
    background: #211d19;
    border: 1px solid #2a2622;
    border-radius: 6px;
    padding: 20px 22px;
}
.plan-admin-card.is-featured { border-color: #dcb43f; border-width: 2px; }
.plan-admin-card.is-inactive { opacity: 0.55; }
.pa-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #2a2622;
    margin-bottom: 14px;
}
.pa-slug { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; color: #6a604f; margin-bottom: 4px; }
.pa-name { font-family: var(--serif); font-size: 1.4rem; color: var(--paper); font-weight: 500; font-variation-settings: "SOFT" 30; }
.pa-tagline { font-size: 12.5px; color: #8a7e6c; margin-top: 2px; }
.pa-prices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.pa-price { padding: 8px 10px; background: #14110e; border: 1px solid #2a2622; border-radius: 3px; }
.pa-price-lbl { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: #6a604f; }
.pa-price-val { font-family: var(--serif); font-size: 1.05rem; color: var(--paper); margin-top: 2px; }
.pa-features ul { margin: 0; padding-left: 18px; font-size: 12px; color: #bdb39f; line-height: 1.6; }
.pa-features li { padding: 1px 0; }
.pa-features p { color: #6a604f; font-size: 12px; margin: 0; }

@media (max-width: 1100px) { .plans-admin-grid { grid-template-columns: 1fr; } .pa-prices { grid-template-columns: repeat(2, 1fr); } }

/* Mobile admin */
@media (max-width: 900px) {
    .admin-shell { grid-template-columns: 1fr; }
    .admin-sidebar { border-right: 0; border-bottom: 1px solid #2a2622; }
    .admin-stats { grid-template-columns: repeat(2, 1fr); }
    .admin-detail-grid, .admin-two-col { grid-template-columns: 1fr; }
}

/* ---- LOGIN PAGE (/admin/login.php) ---- */
.login-box {
    max-width: 420px;
    margin: 0 auto;
    padding: 32px 36px;
    background: #211d19;
    border: 1px solid #2a2622;
    border-radius: 6px;
    color: #d4ccb8;
}
body.admin-body .login-box { margin-top: 8vh; }
.login-brand {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px dashed #2a2622;
}
.login-brand .logo-mark {
    display: inline-flex;
    width: 48px;
    height: 48px;
    background: var(--red-ink, #b3341a);
    color: var(--paper);
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 12px;
}
.login-brand h1 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.4rem;
    margin: 0 0 4px;
    color: var(--paper);
    font-variation-settings: "SOFT" 30;
}
.login-brand h1 em { font-style: italic; color: var(--red-ink, #b3341a); }
.login-brand p {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6a604f;
    margin: 0;
}

.login-foot {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px dashed #2a2622;
    font-family: var(--mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6a604f;
    text-align: center;
}

/* ---- Misc remaining used-but-undefined classes ---- */
.card-head {
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--paper-line, #ddd5c0);
    margin-bottom: 12px;
}
.card-action { margin-top: auto; padding-top: 12px; }
.detail-table, .data-table-full {
    width: 100%;
    border-collapse: collapse;
}
.detail-table th, .data-table-full th {
    text-align: left;
    padding: 8px 10px;
    background: var(--paper-2, #ebe5d4);
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-3);
    border-bottom: 1px solid var(--paper-line, #ddd5c0);
    font-weight: 500;
}
.detail-table td, .data-table-full td {
    padding: 9px 10px;
    border-bottom: 1px dashed var(--paper-line, #ddd5c0);
    font-size: 13px;
    color: var(--ink-2);
    vertical-align: top;
}

.faq-list-narrow { max-width: 760px; margin: 0 auto; }
.faq-short { padding: 12px 0; font-size: 14px; color: var(--ink-2); }
.faq-short summary { cursor: pointer; font-weight: 500; color: var(--ink); padding: 4px 0; font-family: var(--serif); font-size: 1.05rem; }

.notes-row { padding: 10px 0; border-bottom: 1px dashed var(--paper-line, #ddd5c0); font-size: 13px; color: var(--ink-2); }
.notes-row:last-child { border-bottom: 0; }

.emp-status { text-align: right; }
.q-stat { margin-top: 8px; }
.ul-status { margin-top: 8px; text-align: right; }

/* alt class — used as toggle on .feature-showcase. Just lighter background. */
.feature-showcase.alt { background: var(--paper-2, #ebe5d4); }

/* value/v-num used inside .values-grid (defined above) */

/* =====================================================================
   GLOBAL FAQ BLOCK — appears above the final CTA on every public page.
   Pages can suppress with $suppress_faq = true; before the footer.
   ===================================================================== */
.global-faq {
    padding: 90px 0;
    background: var(--paper);
    border-top: 1px solid var(--paper-line, #ddd5c0);
}
.global-faq .faq-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 56px;
}
.global-faq .faq-head h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 2.4rem;
    margin: 12px 0 14px;
    color: var(--ink);
    font-variation-settings: "SOFT" 30;
    line-height: 1.15;
}
.global-faq .faq-head h2 em { font-style: italic; color: var(--red-ink); }
.global-faq .faq-head .sub-lede {
    font-size: 16px;
    color: var(--ink-2);
    line-height: 1.6;
    margin: 0;
    text-align: center;
}
.global-faq .faq-head .sub-lede a { color: var(--red-ink); }
.global-faq .faq-head .eyebrow {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--red-ink);
}

.global-faq .faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 32px;
    max-width: 980px;
    margin: 0 auto;
}
.global-faq .faq-item {
    border-bottom: 1px solid var(--paper-line, #ddd5c0);
    padding: 18px 0;
}
.global-faq .faq-item summary {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.15rem;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 32px;
    line-height: 1.4;
    font-variation-settings: "SOFT" 30;
}
.global-faq .faq-item summary::-webkit-details-marker { display: none; }
.global-faq .faq-item summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: -2px;
    font-family: var(--serif);
    font-size: 1.7rem;
    font-weight: 300;
    color: var(--red-ink);
    transition: transform 0.2s;
    line-height: 1;
}
.global-faq .faq-item[open] summary::after {
    content: "−";
}
.global-faq .faq-item p {
    margin: 14px 0 0;
    font-size: 14.5px;
    color: var(--ink-2);
    line-height: 1.7;
}
.global-faq .faq-item p a { color: var(--red-ink); }

@media (max-width: 800px) {
    .global-faq { padding: 60px 0; }
    .global-faq .faq-grid { grid-template-columns: 1fr; gap: 0; }
    .global-faq .faq-head h2 { font-size: 1.9rem; }
}