/* =====================================================================
   The Galway Group — v2 design system ("Operating Layer")
   A coherent visual language. Light-default, strategic dark moments.
   One brand blue, one warm amber accent. Inter for everything,
   JetBrains Mono for the technical accents that say "we ship software."
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

/* =====================================================================
   1 — DESIGN TOKENS
   ===================================================================== */
:root {
    /* Color */
    --ink:           #0A0E1A;
    --ink-2:         #1B2230;
    --muted:         #525C6E;
    --faint:         #9AA3B2;
    --hairline:      #EAECEF;
    --hairline-2:    #D7DBE0;
    --surface:       #FFFFFF;
    --surface-2:     #F6F7F9;
    --surface-3:     #F0F2F5;
    --brand:         #1E5AFF;
    --brand-2:       #0E3FCC;
    --brand-soft:    #EBF1FF;
    --brand-faint:   #F3F6FF;
    --accent:        #C77400;
    --accent-2:      #9B5A00;
    --accent-soft:   #FFF3DA;
    --ok:            #0F8A5F;
    --ok-soft:       #E0F4EB;

    /* Spacing */
    --space-section:    120px;
    --space-section-sm: 80px;
    --space-card:       32px;
    --space-card-sm:    22px;
    --gap:              24px;
    --gap-sm:           16px;
    --gap-lg:           48px;

    /* Radius */
    --r:    10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-pill: 999px;

    /* Shadow — restrained, mostly used on hover */
    --shadow-sm:     0 1px 2px rgba(10,14,26,0.04);
    --shadow:        0 1px 2px rgba(10,14,26,0.04), 0 8px 24px rgba(10,14,26,0.06);
    --shadow-lg:     0 4px 12px rgba(10,14,26,0.06), 0 24px 56px rgba(10,14,26,0.10);
    --shadow-modal:  0 16px 40px rgba(10,14,26,0.20), 0 48px 96px rgba(10,14,26,0.16);

    /* Type */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 150ms;
    --dur: 240ms;
    --dur-slow: 400ms;
}

@media (max-width: 768px) {
    :root {
        --space-section: 80px;
        --space-section-sm: 56px;
        --space-card: 22px;
        --gap: 16px;
        --gap-lg: 32px;
    }
}

/* =====================================================================
   2 — RESET + BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ink-2);
    background: var(--surface);
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--dur-fast) ease; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
ul, ol { list-style: none; }
hr { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

::selection { background: var(--brand); color: white; }

/* Default focus ring — let elements keep their own radius; outline-offset gives breathing room */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
/* Clean focus on form inputs (uses internal box-shadow ring elsewhere) */
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
}
/* Buttons get their own crisp focus ring matching their corner radius */
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
/* Strip the default browser button outline + the sticky :focus halo on click */
button:focus, a:focus { outline: none; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* =====================================================================
   3 — TYPOGRAPHY
   ===================================================================== */
.h1, h1.h1 {
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.022em;
    color: var(--ink);
    margin: 0;
}

.h2, h2.h2 {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.018em;
    color: var(--ink);
    margin: 0;
}

.h3, h3.h3 {
    font-size: clamp(1.125rem, 1.5vw, 1.375rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand);
    margin: 0;
}
.eyebrow::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--brand);
}

.eyebrow--accent { color: var(--accent); }
.eyebrow--accent::before { background: var(--accent); }
.eyebrow--white { color: rgba(255,255,255,0.7); }
.eyebrow--white::before { background: #60A5FA; }

.lead {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.55;
    color: var(--muted);
    letter-spacing: -0.005em;
    margin: 0;
    max-width: 60ch;
}

.mono {
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0;
}

.fine {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--muted);
    margin: 0;
}

.text-ink     { color: var(--ink) !important; }
.text-muted   { color: var(--muted) !important; }
.text-brand   { color: var(--brand) !important; }
.text-accent  { color: var(--accent) !important; }
.text-ok      { color: var(--ok) !important; }
.text-white   { color: white !important; }
.text-center  { text-align: center; }

/* =====================================================================
   4 — LAYOUT
   ===================================================================== */
.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
}
@media (max-width: 768px) {
    .container { padding: 0 20px; }
}

.section {
    padding: var(--space-section) 0;
    position: relative;
}
.section--sm  { padding: var(--space-section-sm) 0; }
.section--soft { background: var(--surface-2); }
.section--ink {
    background: var(--ink);
    color: rgba(255,255,255,0.82);
}
.section--ink .h1, .section--ink .h2, .section--ink .h3 { color: white; }
.section--ink .lead { color: rgba(255,255,255,0.72); }
.section--ink hr { border-top-color: rgba(255,255,255,0.1); }

.section-head {
    max-width: 720px;
    margin-bottom: 64px;
}
.section-head .eyebrow { margin-bottom: 20px; }
.section-head .h2 { margin-bottom: 16px; }
.section-head .lead { margin: 0; }
@media (max-width: 768px) {
    .section-head { margin-bottom: 44px; }
}

/* Grids */
.grid { display: grid; gap: var(--gap); }
.grid-2  { grid-template-columns: repeat(2, 1fr); }
.grid-3  { grid-template-columns: repeat(3, 1fr); }
.grid-4  { grid-template-columns: repeat(4, 1fr); }
.grid-6  { grid-template-columns: repeat(6, 1fr); }
.grid-gap-lg { gap: var(--gap-lg); }
.grid-gap-sm { gap: var(--gap-sm); }

.grid-split  { grid-template-columns: 1fr 1fr; }
.grid-7-5    { grid-template-columns: 7fr 5fr; }
.grid-5-7    { grid-template-columns: 5fr 7fr; }
.grid-6-6    { grid-template-columns: 1fr 1fr; }

@media (max-width: 991px) {
    .grid-3, .grid-4, .grid-6 { grid-template-columns: repeat(2, 1fr); }
    .grid-split, .grid-7-5, .grid-5-7, .grid-6-6 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; }
}

.stack { display: flex; flex-direction: column; gap: var(--gap); }
.stack-sm { display: flex; flex-direction: column; gap: var(--gap-sm); }
.stack-lg { display: flex; flex-direction: column; gap: var(--gap-lg); }

.row { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.row-tight { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); }

.align-start { align-items: flex-start; }
.align-center { align-items: center; }

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mt-5 { margin-top: 48px; }
.mt-6 { margin-top: 64px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }

.hidden { display: none !important; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =====================================================================
   5 — BUTTONS
   ===================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    padding: 13px 22px;
    border-radius: var(--r);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
    white-space: nowrap;
    text-decoration: none;
}
.btn--lg { padding: 16px 28px; font-size: 1rem; }
.btn--sm { padding: 10px 16px; font-size: 0.85rem; }
.btn--block { width: 100%; }

.btn--primary {
    background: var(--brand);
    color: white;
    border-color: var(--brand);
}
.btn--primary:hover {
    background: var(--brand-2);
    border-color: var(--brand-2);
    box-shadow: 0 4px 12px rgba(30,90,255,0.22);
}

.btn--secondary {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--hairline-2);
}
.btn--secondary:hover {
    border-color: var(--ink);
    background: var(--surface);
}

.btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: transparent;
    padding-left: 12px; padding-right: 12px;
}
.btn--ghost:hover { background: var(--surface-2); }

.btn--dark {
    background: var(--ink);
    color: white;
    border-color: var(--ink);
}
.btn--dark:hover {
    background: var(--brand);
    border-color: var(--brand);
}

/* Inside .section--ink, invert secondary */
.section--ink .btn--secondary {
    background: transparent;
    color: white;
    border-color: rgba(255,255,255,0.3);
}
.section--ink .btn--secondary:hover {
    border-color: white;
    background: rgba(255,255,255,0.05);
}

/* Inline arrow link */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand);
    font-weight: 600;
    font-size: 0.95rem;
    transition: gap var(--dur-fast) var(--ease-out);
}
.link-arrow:hover {
    color: var(--brand-2);
    gap: 10px;
}

/* =====================================================================
   6 — PILLS + STATUS
   ===================================================================== */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 11px;
    background: var(--surface-2);
    color: var(--muted);
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    white-space: nowrap;
}
.pill--brand {
    background: var(--brand-soft);
    color: var(--brand-2);
    border-color: #C9DAFF;
}
.pill--accent {
    background: var(--accent-soft);
    color: var(--accent-2);
    border-color: #FFDF99;
}
.pill--ok {
    background: var(--ok-soft);
    color: var(--ok);
    border-color: #B7E4CF;
}
.pill--ink {
    background: var(--ink);
    color: white;
    border-color: var(--ink);
}

.status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ok);
    flex-shrink: 0;
}
.status-dot--brand { background: var(--brand); }
.status-dot--accent { background: var(--accent); }
.status-dot--muted { background: var(--faint); }

/* Pulsing status dot for "live" / "in progress" */
.status-dot--live {
    background: var(--ok);
    position: relative;
    box-shadow: 0 0 0 0 rgba(15,138,95,0.6);
    animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
    0% { box-shadow: 0 0 0 0 rgba(15,138,95,0.5); }
    70% { box-shadow: 0 0 0 8px rgba(15,138,95,0); }
    100% { box-shadow: 0 0 0 0 rgba(15,138,95,0); }
}

/* =====================================================================
   7 — CARDS
   ===================================================================== */
.card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: var(--space-card);
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.card--hover { cursor: pointer; }
.card--hover:hover {
    border-color: var(--hairline-2);
    box-shadow: var(--shadow);
}
.card--feature {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand);
}
.card--ink {
    background: var(--ink);
    color: rgba(255,255,255,0.82);
    border-color: rgba(255,255,255,0.08);
}
.card--ink .h2, .card--ink .h3, .card--ink h2, .card--ink h3 { color: white; }
.card--sm { padding: var(--space-card-sm); }
.card--bare { padding: 0; border: 0; }

/* =====================================================================
   8 — NAV
   ===================================================================== */
.nav-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,0.85);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--hairline);
}
.nav-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--ink);
    font-size: 0.98rem;
    letter-spacing: -0.01em;
}
.nav-brand img { width: 28px; height: 28px; }
.nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
}
.nav-link {
    padding: 8px 14px;
    font-size: 0.93rem;
    font-weight: 500;
    color: var(--ink-2);
    border-radius: 8px;
    transition: all var(--dur-fast) ease;
}
.nav-link:hover { color: var(--brand); background: var(--surface-2); }
.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.nav-toggle {
    display: none;
    padding: 8px 12px;
    border: 1px solid var(--hairline-2);
    border-radius: 8px;
    color: var(--ink);
}
@media (max-width: 991px) {
    .nav-toggle { display: inline-flex; align-items: center; }
    .nav-inner { padding: 12px 20px; }

    /* Default closed state: top bar is just brand + toggle; menu hidden */
    .nav-links, .nav-actions { display: none; }

    /* Open state: the bar grows downward; both panels join the same column.
       The hamburger and brand stay at the top, the drawer fills below. */
    .nav-bar.nav-open .nav-inner {
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
    }
    .nav-bar.nav-open .nav-links,
    .nav-bar.nav-open .nav-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        width: 100%;
        padding: 0;
        background: var(--surface);
    }
    .nav-bar.nav-open .nav-links {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--hairline);
    }
    .nav-bar.nav-open .nav-actions {
        margin-top: 12px;
        padding-top: 12px;
        padding-bottom: 4px;
        gap: 8px;
        border-top: 1px solid var(--hairline);
    }
    .nav-bar.nav-open .nav-link {
        padding: 12px 14px;
        font-size: 0.98rem;
    }
    .nav-bar.nav-open .btn { justify-content: center; width: 100%; }
}

/* =====================================================================
   9 — HERO
   ===================================================================== */
.hero {
    position: relative;
    padding-top: 96px;
    padding-bottom: 96px;
    overflow: hidden;
}
@media (max-width: 768px) {
    .hero { padding-top: 64px; padding-bottom: 64px; }
}

.hero--split {
    /* split layout: text + visual */
}
.hero-text {
    display: flex;
    flex-direction: column;
    align-self: center;
}
.hero-text > .eyebrow { margin-bottom: 20px; }
.hero-text > .h1, .hero-text > h1 { margin-bottom: 20px; }
.hero-text > .lead { margin-bottom: 32px; }
.hero-text > .compliance-pill { margin-bottom: 20px; }
.hero-h1 { max-width: 17ch; }
.hero-h1 .accent { color: var(--brand); }
.hero-lead { max-width: 56ch; font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-text > .trust-strip { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hairline); border-bottom: 0; padding-bottom: 0; }
.hero-text > .row-tight { margin-top: 20px; }

/* Dot grid background — Stripe-style */
.dotted-bg {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(10,14,26,0.06) 1px, transparent 1px);
    background-size: 22px 22px;
    background-position: 0 0;
    pointer-events: none;
    z-index: 0;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

/* Subtle radial glow — used once or twice */
.glow-bg {
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30,90,255,0.10), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.glow-bg--top-right { top: -120px; right: -180px; }
.glow-bg--bottom-left { bottom: -180px; left: -180px; }
.glow-bg--accent {
    background: radial-gradient(circle, rgba(199,116,0,0.12), transparent 60%);
}

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

/* Hero "operating layer" mockup — light app-UI panel showing what we manage */
.mockup {
    background: var(--surface);
    border-radius: var(--r-xl);
    padding: 24px;
    box-shadow: var(--shadow-lg);
    color: var(--ink-2);
    border: 1px solid var(--hairline);
    position: relative;
    overflow: hidden;
}
.mockup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hairline);
}
.mockup-title {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.mockup-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--muted);
}
.mockup-traffic {
    display: inline-flex;
    gap: 6px;
}
.mockup-traffic span {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--surface-3);
}
.mockup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.mockup-panel {
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: var(--r);
    padding: 14px 16px;
}
.mockup-panel-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 8px;
}
.mockup-panel-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.02em;
    font-family: var(--font-mono);
}
.mockup-panel-delta {
    font-size: 0.78rem;
    color: var(--ok);
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Queue item rows inside the mockup — light theme */
.mockup-queue {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}
.queue-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: var(--surface-2);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--ink-2);
    border-left: 2px solid transparent;
}
.queue-row--active {
    border-left-color: var(--brand);
    background: var(--brand-soft);
}
.queue-row--done { color: var(--muted); }
.queue-row .icon { font-size: 0.78rem; }

/* Vendor SVG container inside hero mockup */
.mockup-svg-wrap {
    padding: 8px 0 0 0;
}

/* =====================================================================
   10 — TRUST STRIP
   ===================================================================== */
.trust-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 40px;
    padding: 28px 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    background: var(--surface);
}
.trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0;
}
.trust-item i { color: var(--brand); font-size: 0.92rem; }

/* Hero-trust: a compact single-row reassurance strip under hero CTAs.
   Designed to never wrap on desktop — labels must be short (3-4 words). */
.hero-trust {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: nowrap;
}
.hero-trust li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
    line-height: 1.2;
}
.hero-trust li i { color: var(--brand); font-size: 0.92rem; flex-shrink: 0; }
/* Tablet: tighten gap so 3 items still hold a single row */
@media (max-width: 1100px) {
    .hero-trust { gap: 14px; }
    .hero-trust li { font-size: 0.78rem; gap: 6px; }
}
/* Mobile: stack vertically with tight gap — solid look, no wrapping ugliness */
@media (max-width: 640px) {
    .hero-trust { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 18px; }
    .hero-trust li { font-size: 0.85rem; }
}

/* =====================================================================
   11 — NUMBERED LIST (DES-CPA style services lineup)
   ===================================================================== */
.numbered-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.numbered-item {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    gap: 28px;
    align-items: center;
    padding: 28px 0;
    border-top: 1px solid var(--hairline);
    transition: all var(--dur) var(--ease-out);
    cursor: pointer;
}
.numbered-item:first-child { border-top: 0; padding-top: 8px; }
.numbered-item:last-child { border-bottom: 1px solid var(--hairline); }
.numbered-num {
    font-family: var(--font-mono);
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--faint);
    letter-spacing: -0.02em;
    line-height: 1;
    transition: color var(--dur-fast) ease;
    font-variant-numeric: tabular-nums;
}
.numbered-body { min-width: 0; }
.numbered-title {
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 6px 0;
    letter-spacing: -0.01em;
    transition: color var(--dur-fast) ease;
}
.numbered-desc {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}
.numbered-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 1.15rem;
    transition: all var(--dur) var(--ease-out);
}
a.numbered-item:hover .numbered-num { color: var(--brand); }
a.numbered-item:hover .numbered-title { color: var(--brand); }
a.numbered-item:hover .numbered-cta {
    background: var(--brand);
    color: white;
    transform: translateX(4px);
}
@media (max-width: 640px) {
    .numbered-item { grid-template-columns: 56px 1fr auto; gap: 16px; padding: 22px 0; }
    .numbered-num { font-size: 1.35rem; }
    .numbered-title { font-size: 1.05rem; }
    .numbered-cta { width: 36px; height: 36px; font-size: 0.95rem; }
}

/* =====================================================================
   12 — UNEXPECTED VALUE GRID
   ===================================================================== */
.value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}
@media (max-width: 991px) { .value-grid { grid-template-columns: 1fr; } }

.value-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: var(--space-card);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur) var(--ease-out);
}
.value-card:hover {
    border-color: var(--hairline-2);
    box-shadow: var(--shadow);
}
.value-svg-wrap {
    height: 120px;
    border-radius: var(--r);
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--hairline);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.value-svg { width: 100%; height: 100%; display: block; }

.value-tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: -8px;
}
.value-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.01em;
}
.value-desc {
    color: var(--muted);
    font-size: 0.93rem;
    line-height: 1.55;
    margin: 0;
}

/* =====================================================================
   13 — PROCESS STEPPER
   ===================================================================== */
.process {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    counter-reset: process;
}
.process-step {
    position: relative;
    z-index: 1;
    padding-top: 56px;
}
/* The connector line */
.process::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: var(--hairline);
    z-index: 0;
}
/* The fill that grows on scroll-reveal */
.process::after {
    content: "";
    position: absolute;
    top: 24px;
    left: 12.5%;
    height: 2px;
    width: 0;
    background: var(--brand);
    z-index: 0;
    transition: width 1.6s var(--ease-out);
}
.process.process--in::after { width: 75%; }

.process-num {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--hairline);
    color: var(--muted);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur) var(--ease-out);
    box-shadow: 0 0 0 6px var(--surface);
    z-index: 2;
}
.process.process--in .process-num {
    background: var(--brand);
    border-color: var(--brand);
    color: white;
}
.section--soft .process-num { box-shadow: 0 0 0 6px var(--surface-2); }

.process-when {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
    text-align: center;
}
.process-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    margin: 6px 0 8px 0;
    text-align: center;
    letter-spacing: -0.01em;
}
.process-desc {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
    text-align: center;
}
@media (max-width: 991px) {
    .process { grid-template-columns: 1fr; gap: 12px; }
    .process::before, .process::after { display: none; }
    .process-step {
        padding: 22px 22px 22px 80px;
        background: var(--surface);
        border: 1px solid var(--hairline);
        border-radius: var(--r-lg);
        position: relative;
    }
    .process-num {
        top: 22px;
        left: 22px;
        transform: none;
        box-shadow: none;
    }
    .process-when, .process-title, .process-desc { text-align: left; }
}

/* =====================================================================
   14 — PROOF GRID (artifacts)
   ===================================================================== */
.proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}
@media (max-width: 991px) { .proof-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .proof-grid { grid-template-columns: 1fr; } }

.proof-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 24px;
    transition: all var(--dur) var(--ease-out);
    text-decoration: none;
    color: inherit;
}
.proof-card:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow);
}
.proof-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.proof-card-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin: 0;
}
.proof-card-kind {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--brand);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.proof-card-desc {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
}
.proof-card-foot {
    margin-top: auto;
    padding-top: 12px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Rich proof card with preview band */
.proof-grid--2x2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .proof-grid--2x2 { grid-template-columns: 1fr; } }

.proof-card--rich {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.proof-card-preview {
    height: 132px;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--hairline);
}
.proof-card-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.0), rgba(255,255,255,0.0) 60%, rgba(255,255,255,0.4)),
        radial-gradient(circle at 25% 25%, rgba(255,255,255,0.15), transparent 50%);
}
/* Subtle "screen frame" mini-mockup baked in via gradient + grid pattern */
.proof-card-preview--baselines {
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 16px),
        linear-gradient(135deg, #1E5AFF, #0E3FCC);
}
.proof-card-preview--des {
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 14px),
        linear-gradient(135deg, #0F8A5F, #064E36);
}
.proof-card-preview--nucash {
    background:
        radial-gradient(circle at 80% 30%, rgba(255,255,255,0.16), transparent 40%),
        linear-gradient(135deg, #C77400, #8E5400);
}
.proof-card-preview--coinpurse {
    background:
        radial-gradient(circle at 20% 70%, rgba(255,255,255,0.18), transparent 40%),
        linear-gradient(135deg, #B4830A, #6E4D00);
}
.proof-card-body {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

/* =====================================================================
   "What you get" — radial hub-and-spokes SVG
   ===================================================================== */
.covered-wrap {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    padding: 8px;
}
.covered-svg { width: 100%; height: auto; display: block; }

.covered-chip {
    opacity: 0;
    animation: coveredChipIn 0.55s var(--ease-out) forwards;
    transform-origin: center;
    transform-box: fill-box;
}
.covered-chip-1 { animation-delay: 0.20s; }
.covered-chip-2 { animation-delay: 0.35s; }
.covered-chip-3 { animation-delay: 0.50s; }
.covered-chip-4 { animation-delay: 0.65s; }
.covered-chip-5 { animation-delay: 0.80s; }
.covered-chip-6 { animation-delay: 0.95s; }
@keyframes coveredChipIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

.covered-spoke {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: coveredSpokeIn 0.55s ease forwards;
}
.covered-spoke-1 { animation-delay: 0.10s; }
.covered-spoke-2 { animation-delay: 0.25s; }
.covered-spoke-3 { animation-delay: 0.40s; }
.covered-spoke-4 { animation-delay: 0.55s; }
.covered-spoke-5 { animation-delay: 0.70s; }
.covered-spoke-6 { animation-delay: 0.85s; }
@keyframes coveredSpokeIn {
    to { stroke-dashoffset: 0; }
}

.covered-halo {
    transform-origin: 240px 160px;
    transform-box: fill-box;
    animation: coveredHubPulse 3.2s ease-in-out infinite;
}
@keyframes coveredHubPulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 0.25; transform: scale(1.12); }
}

/* Orbiting dot — circles the hub at the chips' radius, signals "always working" */
.covered-orbit {
    transform-origin: 240px 160px;
    animation: coveredOrbitRotate 18s linear infinite;
}
@keyframes coveredOrbitRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .covered-chip, .covered-halo { opacity: 1; animation: none; transform: none; }
    .covered-spoke { animation: none; stroke-dashoffset: 0; }
    .covered-orbit { animation: none; }
}

/* =====================================================================
   Proof strip — compact "shipped products" row inside testimony section
   ===================================================================== */
.proof-strip {
    border-top: 1px solid var(--hairline);
    padding-top: 28px;
}
.proof-strip-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 14px 0;
}
.proof-strip-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.proof-strip-row--3 { grid-template-columns: repeat(3, 1fr); }
.proof-strip-row--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 768px) {
    .proof-strip-row, .proof-strip-row--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
    .proof-strip-row, .proof-strip-row--3, .proof-strip-row--2 { grid-template-columns: 1fr; }
}

.proof-strip-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r);
    color: var(--ink) !important;
    transition: all var(--dur-fast) ease;
}
.proof-strip-item:hover {
    border-color: var(--brand);
    background: var(--brand-faint);
}
.proof-strip-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.proof-strip-name {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--ink);
    flex: 1;
}
.proof-strip-kind {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* "We build" stylized product preview — looks like a real app frame */
.ship-mock {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}
.ship-mock-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--hairline);
}
.ship-mock-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--hairline-2);
}
.ship-mock-dot:nth-child(1) { background: #FCA5A5; }
.ship-mock-dot:nth-child(2) { background: #FCD34D; }
.ship-mock-dot:nth-child(3) { background: #6EE7B7; }
.ship-mock-url {
    margin-left: 12px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--muted);
    letter-spacing: 0;
}
.ship-mock-body {
    display: grid;
    grid-template-columns: 140px 1fr;
    min-height: 240px;
}
.ship-mock-side {
    background: var(--surface-2);
    border-right: 1px solid var(--hairline);
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ship-mock-side-row {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--muted);
    padding: 8px 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ship-mock-side-row--active {
    background: var(--brand-soft);
    color: var(--brand-2);
    font-weight: 600;
}
.ship-mock-side-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--faint);
    flex-shrink: 0;
}
.ship-mock-side-row--active .ship-mock-side-dot { background: var(--brand); }
.ship-mock-main {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ship-mock-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.ship-mock-stat {
    padding: 10px 12px;
    background: var(--surface-2);
    border-radius: 8px;
    border: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ship-mock-stat-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.ship-mock-stat-val {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.ship-mock-stat-unit {
    font-size: 0.7rem;
    color: var(--muted);
    margin-left: 1px;
}
.ship-mock-spark {
    width: 100%;
    height: 60px;
    display: block;
}
.ship-mock-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ship-mock-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: 6px;
    font-size: 0.78rem;
    color: var(--ink-2);
}
.ship-mock-row-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}
.ship-mock-row-dot--ok { background: var(--ok); }
.ship-mock-row-name { flex: 1; font-weight: 500; }
.ship-mock-row-tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 2px 8px;
    border-radius: var(--r-pill);
}
.ship-mock-row-tag--ok {
    color: var(--ok);
    background: var(--ok-soft);
}

@media (max-width: 480px) {
    .ship-mock-body { grid-template-columns: 1fr; }
    .ship-mock-side { flex-direction: row; flex-wrap: wrap; padding: 10px; border-right: 0; border-bottom: 1px solid var(--hairline); }
}

/* Pricing comparison cards (replaces compacting anchor pills) */
.compare-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 768px) { .compare-grid { grid-template-columns: 1fr; } }

.compare-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}
.compare-card-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
.compare-card-price {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.compare-card-desc {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.45;
    margin: 0;
}
.compare-card--us {
    background: var(--brand-soft);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-faint);
}
.compare-card--us .compare-card-label { color: var(--brand-2); }
.compare-card--us .compare-card-price { color: var(--brand-2); }
.compare-card-tick {
    position: absolute;
    top: 10px; right: 12px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--brand);
    background: var(--surface);
    border: 1px solid var(--brand);
    border-radius: var(--r-pill);
    padding: 3px 8px;
}

/* =====================================================================
   15 — TESTIMONIAL (dark moment)
   ===================================================================== */
.testimonial-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 32px;
    box-shadow: var(--shadow);
}
.testimonial-card--center {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: 44px 40px;
}
.testimonial-card--center .testimonial-stars { display: inline-block; }
.testimonial-author--center {
    justify-content: center;
    border-top: 1px solid var(--hairline);
    padding-top: 20px;
    margin-top: 8px;
}
.testimonial-author--center > div { text-align: left; }
@media (max-width: 540px) {
    .testimonial-card--center { padding: 32px 26px; }
}
.testimonial-stars {
    color: #F59E0B;
    font-size: 0.95rem;
    letter-spacing: 2px;
    margin-bottom: 16px;
}
.testimonial-quote {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 0 20px 0;
}
.testimonial-quote--small {
    font-size: 0.95rem;
    color: var(--muted);
}
.testimonial-quote--big {
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    line-height: 1.45;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: -0.01em;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--hairline);
}
.testimonial-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
}
.testimonial-name { font-weight: 700; color: var(--ink); margin: 0; font-size: 0.95rem; }
.testimonial-role {
    color: var(--muted);
    font-size: 0.82rem;
    margin: 0;
    font-family: var(--font-mono);
}
.testimonial-role a { color: var(--brand); }

/* =====================================================================
   16 — FAQ ACCORDION
   ===================================================================== */
.faq-list {
    list-style: none;
    margin: 0; padding: 0;
    max-width: 880px;
}
.faq-item {
    border-bottom: 1px solid var(--hairline);
}
.faq-item:first-child { border-top: 1px solid var(--hairline); }
.faq-question {
    width: 100%;
    text-align: left;
    padding: 22px 0;
    background: none; border: 0;
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    letter-spacing: -0.01em;
    transition: color var(--dur-fast) ease;
}
.faq-question:hover { color: var(--brand); }
.faq-question .faq-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid var(--hairline-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--muted);
    transition: all var(--dur) var(--ease-out);
}
.faq-item.is-open .faq-icon {
    background: var(--brand);
    color: white;
    border-color: var(--brand);
    transform: rotate(45deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur) var(--ease-in-out);
}
.faq-item.is-open .faq-answer { max-height: 400px; }
.faq-answer-inner {
    padding: 0 0 22px 0;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 720px;
}

/* =====================================================================
   17 — PRICING (calculator, plan cards, matrix, anchor pills)
   ===================================================================== */
.anchor-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.anchor-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r);
    font-size: 0.92rem;
    color: var(--muted);
}
.anchor-pill .price {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--ink);
}
.anchor-pill.is-us {
    background: var(--brand-soft);
    border-color: #BFD3FF;
    color: var(--ink);
}
.anchor-pill.is-us .price { color: var(--brand-2); }
.anchor-divider {
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 0.78rem;
}

/* Size slider toolbar */
.size-toolbar {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 24px 28px;
    margin-bottom: 32px;
}
.size-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 14px;
}
.size-count {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.size-unit {
    font-size: 0.95rem;
    color: var(--muted);
}
.size-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--hairline);
    border-radius: var(--r-pill);
    outline: none;
}
.size-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--brand);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(30,90,255,0.4), 0 0 0 4px var(--surface);
    border: 2px solid var(--brand);
    transition: transform var(--dur-fast) ease;
}
.size-slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
.size-slider::-moz-range-thumb {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--brand);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(30,90,255,0.4);
}
.size-ticks {
    position: relative;
    height: 1em;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--faint);
    margin-top: 10px;
}
.size-ticks span {
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
}
.size-ticks span:first-child { transform: none; }
.size-ticks span:last-child { transform: translateX(-100%); }

/* Plan cards */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 991px) { .plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .plan-grid { grid-template-columns: 1fr; } }

.plan-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 28px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all var(--dur) var(--ease-out);
    position: relative;
}
.plan-card.recommendation {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.plan-best {
    display: none;
    position: absolute;
    top: -1px; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--brand);
    color: white;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    white-space: nowrap;
}
.plan-card.recommendation .plan-best { display: inline-block; animation: pillIn var(--dur) var(--ease-out); }
@keyframes pillIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.plan-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
}
.plan-range {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--muted);
    margin: 0 0 12px 0;
}
.plan-price {
    font-family: var(--font-mono);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin: 0;
}
.plan-price-unit {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--muted);
    margin-left: 4px;
    font-weight: 500;
}
.plan-includes {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 12px 0 18px 0;
    flex: 1;
}

/* New plan-card rate block: two hourly rates above, included hours below */
.plan-rates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 14px 0 12px;
    padding: 14px 0 12px;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}
.plan-rate-label {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin: 0 0 4px;
}
.plan-rate-num {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1;
}
.plan-rate-unit {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0;
    margin-left: 1px;
}
.plan-rate--partner .plan-rate-num { color: var(--brand); }
.plan-included {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.4;
    margin: 0 0 18px 0;
    flex: 1;
}
.plan-cta {
    background: var(--ink);
    color: white;
    border: 1px solid var(--ink);
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--r);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all var(--dur-fast) ease;
}
.plan-cta:hover { background: var(--brand); border-color: var(--brand); }
.plan-card.recommendation .plan-cta { background: var(--brand); border-color: var(--brand); }
.plan-card.recommendation .plan-cta:hover { background: var(--brand-2); border-color: var(--brand-2); }

/* Disabled plan card (e.g. Startup when employees > 5) */
.plan-card.is-disabled {
    opacity: 0.45;
    filter: saturate(0.6);
    pointer-events: none;
}
.plan-card.is-disabled .plan-cta {
    background: var(--faint);
    border-color: var(--faint);
    color: white;
    cursor: not-allowed;
}

/* Service matrix table */
.matrix-wrap {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    overflow-x: auto;
}
.matrix {
    width: 100%;
    border-collapse: collapse;
}
.matrix thead th {
    background: var(--surface-2);
    color: var(--ink);
    font-weight: 700;
    font-size: 0.82rem;
    padding: 14px 16px;
    border-bottom: 1px solid var(--hairline);
    text-align: center;
    white-space: nowrap;
    font-family: var(--font-sans);
    letter-spacing: -0.01em;
}
.matrix thead th:first-child { text-align: left; }
.matrix tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--hairline);
    color: var(--ink-2);
    font-size: 0.88rem;
    text-align: center;
    font-family: var(--font-mono);
}
.matrix tbody td:first-child {
    text-align: left;
    color: var(--muted);
    font-family: var(--font-sans);
}
.matrix tbody tr:last-child td { border-bottom: 0; }
.matrix .partner { color: var(--brand); font-weight: 600; }
.matrix .check { color: var(--brand); }
.matrix-cat td {
    background: var(--surface-2);
    font-weight: 700;
    color: var(--ink) !important;
    text-align: left !important;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 10px 16px !important;
    font-family: var(--font-mono);
}
.matrix-cat td i { color: var(--brand); margin-right: 6px; }

.scroll-hint {
    display: none;
    color: var(--muted);
    font-size: 0.82rem;
    text-align: center;
    margin-bottom: 8px;
    font-family: var(--font-mono);
}
@media (max-width: 768px) {
    .scroll-hint { display: block; }
    .matrix-hide-mobile { display: none; }
}

/* =====================================================================
   17b — SERVICES PAGE (jump nav + step number + checklist)
   ===================================================================== */
.services-jump {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 8px;
    box-shadow: var(--shadow-sm);
}
.services-jump-item {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--ink) !important;
    font-size: 0.92rem;
    font-weight: 500;
    transition: all var(--dur-fast) ease;
}
.services-jump-item:hover {
    background: var(--brand-soft);
    color: var(--brand-2) !important;
}
.services-jump-item:hover .services-jump-num {
    color: var(--brand-2);
}
.services-jump-item i {
    color: var(--faint);
    transition: transform var(--dur-fast) ease, color var(--dur-fast) ease;
}
.services-jump-item:hover i {
    color: var(--brand);
    transform: translateX(2px);
}
.services-jump-num {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--faint);
    text-align: center;
}

.services-step-num {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 -4px 0;
}

/* Services hero animated SVG — "service catalog" with cycling highlight */
.svc-svg {
    width: 100%;
    max-width: 520px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Highlight rectangle that cycles down the 5 service rows.
   Each row is 58px tall with 0 gap between (rows at y=74, 132, 190, 248, 306).
   The highlight moves through them over 12s and loops. */
.svc-highlight {
    animation: svcHighlightCycle 12s ease-in-out infinite;
}
@keyframes svcHighlightCycle {
    0%, 16%   { transform: translateY(0); }
    20%, 36%  { transform: translateY(58px); }
    40%, 56%  { transform: translateY(116px); }
    60%, 76%  { transform: translateY(174px); }
    80%, 96%  { transform: translateY(232px); }
    100%      { transform: translateY(0); }
}

/* Pulsing green status dot in the header */
.svc-status-pulse {
    transform-origin: 38px 40px;
    transform-box: fill-box;
    animation: svcStatusDotPulse 2s ease-in-out infinite;
}
@keyframes svcStatusDotPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
    .svc-highlight, .svc-status-pulse { animation: none; }
}

/* Compact services grid (services page main layout) */
.services-compact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
@media (max-width: 768px) { .services-compact-grid { grid-template-columns: 1fr; } }

.services-compact-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 26px 26px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur) var(--ease-out);
}
.services-compact-card:hover {
    border-color: var(--hairline-2);
    box-shadow: var(--shadow);
}
.services-compact-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.services-compact-num {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-soft);
    padding: 4px 9px;
    border-radius: var(--r-pill);
    letter-spacing: 0.04em;
}
.services-compact-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.01em;
}
.services-compact-desc {
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
}
.services-compact-card .checklist li {
    font-size: 0.88rem;
}
.services-compact-card .link-arrow {
    margin-top: auto;
    font-size: 0.88rem;
}

.checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--ink-2);
    font-size: 0.92rem;
    line-height: 1.5;
}
.checklist li::before {
    content: "";
    flex-shrink: 0;
    margin-top: 7px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--brand);
}
.checklist li strong { color: var(--ink); font-weight: 600; }
.checklist--ok li::before { background: var(--ok); }
.checklist .fine { display: block; margin-top: 4px; }

/* Layer cards on pricing — colored top accent + clean term/def list */
.layer-card { padding: 36px 32px; }
.layer-card--base { border-top: 3px solid var(--brand); }
.layer-card--hourly { border-top: 3px solid var(--ok); }

.layer-tag {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand);
    margin: 0 0 16px 0;
}
.layer-tag--ok { color: var(--ok); }

.layer-h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 10px 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.layer-sub {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 28px 0;
}

.layer-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.layer-item {
    padding-top: 16px;
    border-top: 1px solid var(--hairline);
}
.layer-item:first-child {
    padding-top: 0;
    border-top: 0;
}
.layer-term {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px 0;
    letter-spacing: -0.01em;
}
.layer-def {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
}

/* =====================================================================
   18 — CPA-SPECIFIC
   ===================================================================== */
.compliance-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-soft);
    color: var(--accent-2);
    border: 1px solid #FFDF99;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    letter-spacing: 0.03em;
}
.compliance-pill i { font-size: 0.92rem; color: var(--accent); }

.amber-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Req → control map */
.req-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.req-row {
    display: grid;
    grid-template-columns: 1fr 32px 1.3fr;
    gap: 12px;
    align-items: stretch;
}
.req-cell, .control-cell {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r);
    padding: 18px 20px;
}
.req-cell {
    border-left: 3px solid var(--accent);
}
.control-cell {
    border-left: 3px solid var(--brand);
}
.req-tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
}
.req-text {
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.45;
}
.control-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.01em;
}
.control-title i { color: var(--brand); }
.control-text {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0;
}
.req-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--faint);
    font-size: 1.1rem;
}
@media (max-width: 768px) {
    .req-row { grid-template-columns: 1fr; gap: 8px; }
    .req-arrow { transform: rotate(90deg); padding: 4px 0; }
}

.guardrail-callout {
    background: var(--brand-soft);
    border: 1px solid #BFD3FF;
    border-left: 4px solid var(--brand);
    border-radius: var(--r);
    padding: 20px 24px;
    color: var(--ink-2);
    font-size: 0.93rem;
    line-height: 1.65;
}
.guardrail-callout strong { color: var(--ink); }
.guardrail-callout em { font-style: italic; color: var(--brand-2); font-weight: 600; }

/* CPA hero proof card (Brian quote in white card on light hero) */
.proof-quote-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 28px;
    box-shadow: var(--shadow);
}
.proof-quote-stars {
    color: #FBBF24;
    font-size: 0.95rem;
    letter-spacing: 2px;
    margin-bottom: 14px;
}
.proof-quote-text {
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 0 18px 0;
    font-style: italic;
}
.proof-quote-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
}
.proof-quote-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
}
.proof-quote-name {
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    font-size: 0.95rem;
}
.proof-quote-role {
    color: var(--muted);
    font-size: 0.82rem;
    margin: 0;
    font-family: var(--font-mono);
}

/* =====================================================================
   19 — ABOUT-SPECIFIC
   ===================================================================== */
.about-avatar-wrap {
    display: inline-block;
    padding: 6px;
    background: linear-gradient(135deg, var(--brand-soft), var(--surface-2));
    border-radius: 50%;
    box-shadow: var(--shadow);
}
.about-avatar {
    width: 260px; height: 260px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--surface);
}
@media (max-width: 768px) {
    .about-avatar { width: 200px; height: 200px; }
}

/* Story icon (card head) */
.story-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: var(--brand-soft);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

/* Stat row */
.stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.stat-cell {
    padding: 28px 22px;
    text-align: center;
    border-right: 1px solid var(--hairline);
}
.stat-cell:last-child { border-right: 0; }
.stat-num {
    font-family: var(--font-mono);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0 0 6px 0;
    font-variant-numeric: tabular-nums;
}
.stat-label {
    font-size: 0.82rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.4;
}
@media (max-width: 768px) {
    .stat-row { grid-template-columns: repeat(2, 1fr); }
    .stat-cell { border-right: 0; border-bottom: 1px solid var(--hairline); }
    .stat-cell:nth-child(odd) { border-right: 1px solid var(--hairline); }
    .stat-cell:nth-last-child(-n+2) { border-bottom: 0; }
}

/* Cert grid — generous breathing room. 2-col fits 4 certs cleanly. */
.cert-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
@media (max-width: 480px) { .cert-grid { grid-template-columns: 1fr; } }

.cert-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 26px 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: all var(--dur-fast) ease;
}
.cert-card:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-sm);
}
.cert-badge {
    width: 68px; height: 68px;
    object-fit: contain;
    margin-bottom: 10px;
}
.cert-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.2;
}
.cert-level {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--muted);
    margin: 4px 0 0 0;
    line-height: 1.3;
}

/* Stack SVG container */
.stack-svg-wrap {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    padding: 12px;
}
.stack-svg { width: 100%; height: auto; display: block; }

/* =====================================================================
   20 — VENDOR SVG ANIMATIONS (preserved verbatim)
   ===================================================================== */
.vendor-svg-wrap { width: 100%; padding: 8px; }
.vendor-svg { width: 100%; height: auto; display: block; }

.tgg-vendor-node {
    opacity: 0;
    animation: tggVendorIn 0.6s ease forwards;
}
.tgg-vendor-node-1 { animation-delay: 0.10s; }
.tgg-vendor-node-2 { animation-delay: 0.25s; }
.tgg-vendor-node-3 { animation-delay: 0.40s; }
.tgg-vendor-node-4 { animation-delay: 0.55s; }
@keyframes tggVendorIn {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}

.tgg-vendor-flow {
    stroke-dashoffset: 0;
    animation: tggFlowMove 2.4s linear infinite;
}
.tgg-vendor-flow-1 { animation-delay: 0s; }
.tgg-vendor-flow-2 { animation-delay: 0.6s; }
.tgg-vendor-flow-3 { animation-delay: 1.2s; }
.tgg-vendor-flow-4 { animation-delay: 1.8s; }
@keyframes tggFlowMove {
    from { stroke-dashoffset: 374; }
    to   { stroke-dashoffset: 0; }
}

.tgg-vendor-pulse {
    transform-origin: 500px 180px;
    transform-box: fill-box;
    animation: tggPulse 2.8s ease-in-out infinite;
}
@keyframes tggPulse {
    0%, 100% { opacity: 0.6;  transform: scale(1); }
    50%      { opacity: 0.25; transform: scale(1.12); }
}

.tgg-vendor-one-svg {
    opacity: 0;
    animation: tggOneIn 0.8s ease 0.7s forwards;
}
@keyframes tggOneIn {
    from { opacity: 0; transform: scale(0.85); transform-origin: 500px 180px; transform-box: fill-box; }
    to   { opacity: 1; transform: scale(1); }
}

/* =====================================================================
   21 — COST CHART SVG ANIMATIONS (preserved)
   ===================================================================== */
.cost-chart-wrap { width: 100%; padding: 8px; }
.cost-chart { width: 100%; height: auto; display: block; }

.tgg-cost-col {
    transform-origin: center 220px;
    transform-box: fill-box;
    animation: tggColGrow 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
    animation-delay: calc(var(--i) * 0.12s);
    opacity: 0;
}
@keyframes tggColGrow {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tgg-cost-hour {
    transform-origin: bottom;
    transform-box: fill-box;
    animation: tggHourBob 4.5s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.3s);
}
@keyframes tggHourBob {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(0.94); }
}

/* =====================================================================
   22 — STACK SVG ANIMATIONS (preserved)
   ===================================================================== */
.stack-layer {
    opacity: 0;
    animation: stackLayerIn 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
    transform-origin: center bottom;
    transform-box: fill-box;
}
.stack-layer-1 { animation-delay: 0.05s; }
.stack-layer-2 { animation-delay: 0.20s; }
.stack-layer-3 { animation-delay: 0.35s; }
.stack-layer-4 { animation-delay: 0.50s; }
.stack-layer-5 { animation-delay: 0.65s; }
@keyframes stackLayerIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.stack-layer-5 {
    animation: stackLayerIn 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) 0.65s forwards,
               stackTopPulse 3.6s ease-in-out 1.5s infinite;
}
@keyframes stackTopPulse {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.10); }
}

/* =====================================================================
   23 — VALUE-CARD MICRO SVG ANIMATIONS (new)
   ===================================================================== */
/* Savings counter ticking */
.svg-savings-digit { font-family: var(--font-mono); font-weight: 700; }
.svg-savings-arrow {
    animation: svgSavingsArrow 2.2s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}
@keyframes svgSavingsArrow {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50%      { transform: translateY(-4px); opacity: 0.7; }
}

/* Direct vendor invoice arrows */
.svg-invoice-arrow {
    stroke-dasharray: 6 6;
    animation: svgInvoiceFlow 1.8s linear infinite;
}
@keyframes svgInvoiceFlow {
    from { stroke-dashoffset: 12; }
    to   { stroke-dashoffset: 0; }
}
.svg-invoice-bypass {
    animation: svgBypassFade 3s ease-in-out infinite;
}
@keyframes svgBypassFade {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 0.8; }
}

/* Apps materializing */
.svg-app-brick {
    opacity: 0;
    animation: svgAppIn 0.5s ease forwards;
    transform-origin: center;
    transform-box: fill-box;
}
.svg-app-brick-1 { animation-delay: 0.10s; }
.svg-app-brick-2 { animation-delay: 0.30s; }
.svg-app-brick-3 { animation-delay: 0.50s; }
.svg-app-brick-4 { animation-delay: 0.70s; }
@keyframes svgAppIn {
    from { opacity: 0; transform: translateY(8px) scale(0.85); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Number counter (used in unexpected value + mockup) — JS animates via attribute */
.num-counter {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* =====================================================================
   24 — SCROLL REVEAL UTILITY
   ===================================================================== */
/* Scroll-reveal: use animation (one-shot) instead of transition so the
   reveal doesn't leave a long-lived transform-transition on the element
   that would slow down hover state changes. After animation completes,
   the element has no transition-on-transform, so hovers feel snappy. */
.reveal {
    opacity: 0;
}
.reveal.is-in {
    animation: revealIn 0.65s var(--ease-out) forwards;
}
@keyframes revealIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Staggered children — same animation, individual delays */
.reveal-stagger > * { opacity: 0; }
.reveal-stagger.is-in > * {
    animation: revealStaggerIn 0.55s var(--ease-out) forwards;
}
.reveal-stagger.is-in > *:nth-child(1) { animation-delay: 0.05s; }
.reveal-stagger.is-in > *:nth-child(2) { animation-delay: 0.15s; }
.reveal-stagger.is-in > *:nth-child(3) { animation-delay: 0.25s; }
.reveal-stagger.is-in > *:nth-child(4) { animation-delay: 0.35s; }
.reveal-stagger.is-in > *:nth-child(5) { animation-delay: 0.45s; }
.reveal-stagger.is-in > *:nth-child(6) { animation-delay: 0.55s; }
@keyframes revealStaggerIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   25 — CONTACT MODAL
   ===================================================================== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10,14,26,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
.modal-shell {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    /* Critical: shell + children must NOT catch clicks when closed.
       Without this, the invisible modal-window (560px × 92vh) sits at
       z-index 1001 over the page center, intercepting hovers and clicks
       on cards behind it. visibility: hidden takes the modal out of the
       hit-testing layer entirely until body.modal-open is set. */
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear var(--dur);
}
@media (min-width: 769px) {
    .modal-shell {
        align-items: center;
        padding: 40px 20px;
    }
}
.modal-window {
    background: var(--surface);
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    overflow-y: auto;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: var(--shadow-modal);
    transform: translateY(40px);
    opacity: 0;
    pointer-events: none; /* only active when body.modal-open */
    transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
    position: relative;
    overflow-x: hidden;
}
@media (min-width: 769px) {
    .modal-window {
        border-radius: var(--r-xl);
        transform: translateY(24px) scale(0.98);
    }
}
body.modal-open .modal-backdrop {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity var(--dur) var(--ease-out);
}
body.modal-open .modal-shell {
    pointer-events: auto;
    visibility: visible;
    transition: none;
}
body.modal-open .modal-window {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.modal-header {
    padding: 28px 32px 16px;
    border-bottom: 1px solid var(--hairline);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.modal-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px 0;
    letter-spacing: -0.01em;
}
.modal-sub {
    font-size: 0.9rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.5;
    max-width: 38ch;
}
.modal-close {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    transition: all var(--dur-fast) ease;
    flex-shrink: 0;
}
.modal-close:hover {
    background: var(--ink);
    color: white;
}
.modal-body {
    padding: 24px 32px 32px;
}
@media (max-width: 480px) {
    .modal-header { padding: 22px 22px 14px; }
    .modal-body { padding: 20px 22px 28px; }
    .modal-window { max-height: 100vh; border-radius: 0; }
}

body.modal-open { overflow: hidden; }

/* Modal success state */
.modal-success {
    text-align: center;
    padding: 32px 16px 16px;
}
.modal-success-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--ok-soft);
    color: var(--ok);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 18px;
}

/* =====================================================================
   26 — FORM (contact)
   ===================================================================== */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 12px;
}
.form-row--single { grid-template-columns: 1fr; }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

.form-label, form label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
    font-family: var(--font-sans) !important;
}

.form-control {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--hairline-2);
    border-radius: var(--r);
    padding: 11px 14px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--ink);
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
    appearance: none;
}
.form-control:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.form-control.is-invalid {
    border-color: #DC2626;
    background-image: none;
    padding-right: 14px;
}
.form-control.is-valid {
    border-color: var(--ok);
    background-image: none;
    padding-right: 14px;
}
.invalid-feedback {
    display: none;
    color: #DC2626;
    font-size: 0.82rem;
    margin-top: 4px;
}
.form-control.is-invalid ~ .invalid-feedback { display: block; }

/* intl-tel-input blend */
.iti { width: 100%; display: block; }
.iti__tel-input.form-control { padding-left: 92px !important; }
.iti--separate-dial-code .iti__selected-dial-code { font-weight: 500; font-family: var(--font-mono); }

/* Turnstile widget */
.tgg-turnstile-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}
.tgg-turnstile-wrap .cf-turnstile { width: 100%; }
.tgg-turnstile-wrap iframe { border-radius: var(--r) !important; }

/* Submit button styling — override the contact.html include's Bootstrap classes */
form [name=submit] {
    background: var(--brand);
    color: white;
    border: 1px solid var(--brand);
    width: 100%;
    padding: 13px 22px;
    border-radius: var(--r);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.98rem;
    cursor: pointer;
    transition: all var(--dur-fast) ease;
    margin-top: 8px;
}
form [name=submit]:hover:not(:disabled) {
    background: var(--brand-2);
    border-color: var(--brand-2);
}
form [name=submit]:disabled {
    background: var(--surface-3);
    color: var(--faint);
    border-color: var(--hairline-2);
    cursor: not-allowed;
}

/* Bootstrap-grid escape hatch — form was originally Bootstrap. We make
   the .row + .col classes inside the contact form work without Bootstrap. */
form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
form .row > .col-12 { grid-column: 1 / -1; }
form .row > .col-sm-6 { grid-column: span 1; }
@media (max-width: 540px) {
    form .row { grid-template-columns: 1fr; }
    form .row > .col-sm-6 { grid-column: 1 / -1; }
}
form .g-3 { gap: 14px; }
form h3 { display: none; } /* Hide the inline "Contact Us" heading since modal has its own */

/* =====================================================================
   27 — FOOTER
   ===================================================================== */
.footer {
    background: var(--surface-2);
    border-top: 1px solid var(--hairline);
    padding: 56px 0 24px 0;
}
.footer-cols {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}
@media (max-width: 991px) { .footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 540px) { .footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; } }

.footer-brand-row { display: flex; align-items: center; gap: 10px; }
.footer-brand-row img { width: 28px; height: 28px; }
.footer-brand-name {
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.footer-tagline {
    color: var(--muted);
    font-size: 0.88rem;
    margin: 10px 0 6px;
    max-width: 28ch;
}
.footer-social {
    display: flex;
    gap: 14px;
    margin-top: 14px;
}
.footer-social a {
    color: var(--muted);
    font-size: 1.15rem;
    transition: color var(--dur-fast) ease;
}
.footer-social a:hover { color: var(--brand); }
.footer-col-title {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 14px 0;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { padding: 4px 0; }
.footer-links a {
    color: var(--muted);
    font-size: 0.9rem;
    transition: color var(--dur-fast) ease;
}
.footer-links a:hover { color: var(--brand); }
.footer-bottom {
    border-top: 1px solid var(--hairline);
    padding-top: 22px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 0.82rem;
    color: var(--muted);
}
.footer-bottom-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom-links a { color: var(--muted); }
.footer-bottom-links a:hover { color: var(--brand); }

/* =====================================================================
   28 — TEAMS FAB (floating action button)
   ===================================================================== */
.teams-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 90;
}
.teams-fab-button {
    background: var(--ink);
    color: white;
    border-radius: var(--r-pill);
    padding: 12px 18px;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: var(--shadow);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--dur-fast) ease;
    cursor: pointer;
}
.teams-fab-button:hover {
    background: var(--brand);
    box-shadow: var(--shadow-lg);
}
.teams-fab-button i { font-size: 1rem; }

/* =====================================================================
   29 — FINAL CTA STRIP
   ===================================================================== */
.cta-strip {
    background: var(--brand-soft);
    color: var(--ink);
    padding: 72px 0;
    position: relative;
    overflow: hidden;
    border-top: 1px solid #DFE7FF;
    border-bottom: 1px solid #DFE7FF;
}
.cta-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 85% 50%, rgba(30,90,255,0.12), transparent 55%);
    pointer-events: none;
}
.cta-strip-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.cta-strip h2 {
    color: var(--ink);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    margin: 0;
    letter-spacing: -0.02em;
    max-width: 30ch;
}
.cta-strip .lead { color: var(--muted); max-width: 38ch; margin-top: 8px; }
.cta-strip .btn--primary {
    background: var(--brand);
    color: white;
    border-color: var(--brand);
}
.cta-strip .btn--primary:hover {
    background: var(--brand-2);
    border-color: var(--brand-2);
}
.cta-strip .btn--secondary {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--hairline-2);
}
.cta-strip .btn--secondary:hover {
    border-color: var(--ink);
}

/* =====================================================================
   30 — PROBLEM / SOLUTION SECTION
   ===================================================================== */
.tension {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}
@media (max-width: 991px) {
    .tension { grid-template-columns: 1fr; gap: 32px; }
}
.tension-side {
    padding: 32px;
    border-radius: var(--r-lg);
}
.tension-side--without {
    background: var(--surface-2);
    border: 1px solid var(--hairline);
}
.tension-side--with {
    background: var(--surface);
    color: var(--ink-2);
    border: 1px solid var(--brand);
    box-shadow: 0 0 0 4px var(--brand-soft), var(--shadow-sm);
    position: relative;
}
.tension-side--with::before {
    content: "";
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 3px;
    background: var(--brand);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.tension-side--with .h3 { color: var(--ink); }
.tension-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.tension-side--without .tension-label { color: var(--muted); }
.tension-side--with .tension-label { color: var(--brand); }

/* Tangle SVG container */
.tangle-svg { width: 100%; max-width: 320px; margin: 0 auto; display: block; }
.tangle-line {
    stroke-dasharray: 4 4;
    animation: tangleFlow 4s linear infinite;
    animation-delay: var(--d, 0s);
}
@keyframes tangleFlow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: 16; }
}

/* =====================================================================
   31 — REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .tgg-vendor-node, .tgg-vendor-one-svg,
    .stack-layer, .tgg-cost-col,
    .svg-app-brick, .reveal, .reveal-stagger > * {
        opacity: 1 !important;
        transform: none !important;
    }
    .tgg-vendor-flow, .tgg-vendor-pulse,
    .tgg-cost-hour, .stack-layer-5,
    .svg-savings-arrow, .svg-invoice-arrow, .svg-invoice-bypass,
    .status-dot--live, .tangle-line, .process::after,
    .scan-log-spinner, .scan-progress-bar {
        animation: none !important;
    }
    .process::after { width: 75% !important; }
}

/* =====================================================================
   36 — PROCESS 3-COLUMN VARIANT (used on /tenant)
   ===================================================================== */
.process--3 { grid-template-columns: repeat(3, 1fr); }
.process--3::before, .process--3::after { left: 16.67%; right: 16.67%; }
.process--3.process--in::after { width: 66.66%; }
@media (max-width: 991px) {
    .process--3 { grid-template-columns: 1fr; }
}

/* =====================================================================
   37 — TENANT / ASSESSMENT PAGES
   ===================================================================== */

/* --- Scanning page (tenant_processing.html) --- */
.scan-progress {
    height: 6px;
    background: var(--hairline);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 28px;
}
.scan-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
    border-radius: 999px;
    transition: width 0.4s var(--ease-out);
}
.scan-log {
    height: 140px;
    overflow: hidden;
    position: relative;
}
.scan-log-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    font-size: 0.92rem;
    color: var(--muted);
    transition: opacity 0.4s ease, height 0.3s ease, padding 0.3s ease;
}
.scan-log-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.scan-log-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--hairline);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: scan-spin 0.7s linear infinite;
}
@keyframes scan-spin { to { transform: rotate(360deg); } }
.scan-log-check { color: var(--ok); font-size: 1.05rem; }
.scan-log-item.active { color: var(--ink); font-weight: 500; opacity: 1; }
.scan-log-item.done { color: var(--muted); opacity: 1; }
.scan-log-item.faded { opacity: 0; height: 0; padding: 0; overflow: hidden; }

.scan-done-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--ok-soft);
    color: var(--ok);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin: 0 auto;
}
.scan-consent-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--muted);
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
}
.scan-consent-check {
    width: 16px;
    height: 16px;
    accent-color: var(--brand);
    cursor: pointer;
}

/* --- Report (tenant_assessment.html) --- */
.grade-hero { text-align: center; }
.grade-ring {
    width: 116px;
    height: 116px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    font-weight: 800;
    color: white;
    line-height: 1;
    margin-bottom: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.grade-of {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
}
.grade-1 { background: linear-gradient(135deg, #EF4444, #DC2626); }
.grade-2 { background: linear-gradient(135deg, #F97316, #EA580C); }
.grade-3 { background: linear-gradient(135deg, #EAB308, #CA8A04); }
.grade-4 { background: linear-gradient(135deg, #22C55E, #16A34A); }
.grade-5 { background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.grade-label {
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px;
    font-size: 0.95rem;
}
.grade-note {
    font-size: 0.82rem;
    color: var(--muted);
    margin: 0;
}

/* Stat tiles */
.stat-tile {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r);
    padding: 22px 18px;
    text-align: center;
}
.stat-tile-value {
    font-family: var(--font-mono);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1;
    letter-spacing: -0.02em;
}
.stat-tile-label {
    font-size: 0.72rem;
    color: var(--muted);
    margin: 8px 0 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
@media (max-width: 767px) {
    .stat-tile-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Findings */
.finding-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--hairline);
}
.finding-item:last-child { border-bottom: 0; }
.finding-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.05rem;
}
.finding-icon.is-pass { background: var(--ok-soft); color: var(--ok); }
.finding-icon.is-warn { background: var(--accent-soft); color: var(--accent); }
.finding-icon.is-fail { background: #FEE2E2; color: #DC2626; }
.finding-body { min-width: 0; }
.finding-title {
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 6px;
    font-size: 0.98rem;
}
.finding-desc {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0;
}
.finding-desc strong { color: var(--ink); font-weight: 600; }

/* Sidebar cards */
.sidebar-card { padding: 24px; }
.sidebar-card--brand { border-top: 3px solid var(--brand); }
.sidebar-card--ok { border-top: 3px solid var(--ok); }
.eyebrow--ok { color: var(--ok); }

/* --- Mobile tightening: high-density cards + hero CTAs --- */
@media (max-width: 768px) {
    /* Hide decorative hero SVGs on mobile — text-first on small screens */
    .hero-visual { display: none; }
}
@media (max-width: 640px) {
    /* Hero CTAs become full-width and stack — bigger tap targets */
    .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .hero-actions .btn { width: 100%; justify-content: center; }
    .hero-actions .btn--lg { padding: 14px 20px; }

    /* CTA strip stacks and CTAs go full-width */
    .cta-strip-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
    .cta-strip-inner .row-tight { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
    .cta-strip-inner .row-tight .btn { width: 100%; justify-content: center; }

    /* Tighten heavy card paddings */
    .layer-card { padding: 24px 20px; }
    .sidebar-card { padding: 20px; }
    .testimonial-card--center { padding: 24px 22px; }
    .modal-window { padding: 20px; }
}

/* 404 page */
.not-found-wrap { max-width: 640px; margin: 0 auto; }
.not-found-code {
    font-family: var(--font-mono);
    font-size: clamp(5rem, 12vw, 8rem);
    font-weight: 800;
    line-height: 1;
    margin: 0 0 8px;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* User directory table */
.user-table-scroll {
    width: 100%;
    overflow-x: auto;
}
.user-table-inner {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.user-table-inner thead th {
    background: var(--surface-2);
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    text-align: left;
    padding: 14px 20px;
    border-bottom: 1px solid var(--hairline);
}
.user-table-inner tbody td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--hairline);
    color: var(--ink-2);
}
.user-table-inner tbody tr:last-child td { border-bottom: 0; }
.user-table-inner tbody tr:hover { background: var(--surface-2); }
.user-table-mono {
    font-family: var(--font-mono);
    color: var(--muted);
    font-size: 0.85rem;
}