/* ==========================================================================
   AOS — Automated Operating System
   Marketing site stylesheet
   Identity: "Construction blueprint" — schematic grids, registration marks,
   sheet-number tags, condensed display type, monospace technical labels.
   Core palette: Graphite + Cyan (concrete & cyan) on blueprint navy.
   ========================================================================== */

:root {
    /* ----- Brand: graphite + cyan core ----- */
    --aos-graphite:        #1F2937;
    --aos-graphite-hi:     #111827;
    --aos-graphite-lo:     #374151;
    --aos-cyan:            #22D3EE;
    --aos-cyan-ink:        #67E8F9;       /* brighter cyan — line work on dark */
    --aos-cyan-hover:      #075975;       /* WCAG AA: white on this = 6.86:1 */
    --aos-cyan-deep:       #0E7490;       /* WCAG AA: 5.36:1 as text on white */

    /* ----- Blueprint surfaces (NEW) ----- */
    --aos-blueprint:       #0A1A2F;       /* darker than graphite, faint blue */
    --aos-blueprint-hi:    #061222;       /* deepest — for footer */
    --aos-blueprint-lo:    #142844;       /* card surface on blueprint */
    --aos-blueprint-line:  #1E3A5F;       /* hairlines on blueprint */

    /* ----- Accents ----- */
    --aos-amber:           #F59E0B;       /* safety / hi-vis amber */
    --aos-amber-soft:      #FCD34D;
    --aos-caution:         #FACC15;       /* legacy alias */
    --aos-alert:           #DC2626;       /* "REVISE" red */

    /* ----- Neutrals ----- */
    --aos-concrete:        #FAF8F2;       /* warm trace-paper background */
    --aos-concrete-warm:   #F3EFE3;       /* slightly creamier */
    --aos-line:            #E5E1D5;       /* hairline on light */
    --aos-line-dark:       #1F2937;
    --aos-ink:             #0B0F14;
    --aos-muted:           #4B5563;       /* WCAG AA: 7.34:1 on white */
    --aos-muted-soft:      #6B7280;       /* WCAG AA: 4.83:1 on white */

    /* ----- Grid backgrounds (blueprint motif) ----- */
    --grid-dark-major:     rgba(103, 232, 249, 0.10);
    --grid-dark-minor:     rgba(103, 232, 249, 0.045);
    --grid-light-major:    rgba(14, 116, 144, 0.075);
    --grid-light-minor:    rgba(14, 116, 144, 0.035);

    /* ----- Type ----- */
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Barlow Condensed', 'Inter', sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

    /* ----- Spacing ----- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* ----- Radius (tighter, more architectural) ----- */
    --radius-sm: 4px;
    --radius:    6px;
    --radius-lg: 10px;

    /* ----- Shadows ----- */
    --shadow-sm:    0 1px 2px rgba(10, 26, 47, 0.05);
    --shadow:       0 4px 14px rgba(10, 26, 47, 0.08);
    --shadow-lg:    0 18px 44px rgba(10, 26, 47, 0.14);
    --shadow-cyan:  0 12px 32px rgba(34, 211, 238, 0.20);
    --shadow-stamp: 0 0 0 1px var(--aos-blueprint-line), 0 16px 48px rgba(0,0,0,0.45);

    /* ----- Layout ----- */
    --container: 1200px;
    --header-h:  76px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--aos-ink);
    background-color: var(--aos-concrete);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

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

a {
    color: var(--aos-cyan-deep);
    text-decoration: none;
    transition: color 120ms ease;
}

a:hover { color: var(--aos-cyan-hover); }

p { margin: 0 0 1rem 0; }
p:last-child { margin-bottom: 0; }

ul, ol {
    margin: 0 0 1rem 0;
    padding-left: 1.25rem;
}

li { margin-bottom: 0.35rem; }

hr {
    border: 0;
    border-top: 1px solid var(--aos-line);
    margin: var(--space-12) 0;
}

::selection {
    background: var(--aos-cyan);
    color: var(--aos-graphite);
}

/* ==========================================================================
   Blueprint motif primitives (NEW)
   These are the reusable identity bits: sheet tags, registration marks,
   dimension lines, schematic grids. Used throughout the rest of the file.
   ========================================================================== */

/* --- Blueprint grid backgrounds (used on .hero, .cta-band, .section--blueprint) --- */
.bp-grid,
.hero,
.cta-band,
.section--blueprint {
    background-image:
        linear-gradient(var(--grid-dark-major) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-dark-major) 1px, transparent 1px),
        linear-gradient(var(--grid-dark-minor) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-dark-minor) 1px, transparent 1px);
    background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
    background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}

.bp-grid--light {
    background-image:
        linear-gradient(var(--grid-light-major) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-light-major) 1px, transparent 1px),
        linear-gradient(var(--grid-light-minor) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-light-minor) 1px, transparent 1px);
    background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
    background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}

/* --- Sheet tag: monospace technical label like "§ 01.10 — HERO" --- */
.sheet-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--aos-cyan-deep);
    line-height: 1;
}

.sheet-tag::before {
    content: '';
    width: 14px;
    height: 1px;
    background: currentColor;
    opacity: 0.65;
}

.sheet-tag--on-dark { color: var(--aos-cyan-ink); }
.sheet-tag--amber { color: var(--aos-amber); }

/* --- Sheet header strip: full-width thin bar with sheet number + revision --- */
.sheet-strip {
    border-top: 1px solid var(--aos-blueprint-line);
    border-bottom: 1px solid var(--aos-blueprint-line);
    background: rgba(255, 255, 255, 0.025);
    position: relative;
    z-index: 3;        /* sit above hero::before glow and hero::after corner mark */
}

.sheet-strip__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: 0.6rem 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--aos-cyan-ink);
}

.sheet-strip__inner span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(199, 208, 221, 0.72);
}

.sheet-strip__inner span strong {
    color: var(--aos-cyan-ink);
    font-weight: 500;
}

/* On small screens, drop the lower-priority columns so it stays one line */
@media (max-width: 720px) {
    .sheet-strip__inner span:nth-child(3),
    .sheet-strip__inner span:nth-child(4) { display: none; }
}

/* --- Dimension line: hairline rule with tick marks at each end --- */
.dim-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: var(--space-6) 0;
    color: var(--aos-cyan-deep);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dim-line::before,
.dim-line::after {
    content: '';
    height: 1px;
    flex: 1;
    background: currentColor;
    opacity: 0.4;
    position: relative;
}

.dim-line::before { box-shadow: 0 -4px 0 -3.5px currentColor inset, 0 4px 0 -3.5px currentColor inset; }

/* Simpler dimension line (just rule, no label) */
.dim-rule {
    display: block;
    height: 1px;
    background: var(--aos-cyan-deep);
    opacity: 0.4;
    border: 0;
    margin: var(--space-12) auto;
    width: 100%;
    max-width: 880px;
    position: relative;
}

.dim-rule::before,
.dim-rule::after {
    content: '';
    position: absolute;
    top: -4px;
    width: 1px;
    height: 9px;
    background: currentColor;
    color: var(--aos-cyan-deep);
    opacity: 1;
}

.dim-rule::before { left: 0; }
.dim-rule::after { right: 0; }

.dim-rule--on-dark { background: var(--aos-cyan-ink); opacity: 0.35; }

/* --- Stamp: small boxed monospace label, e.g. "REV 01" / "ISSUED FOR PREVIEW" --- */
.stamp {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--aos-cyan-deep);
    border: 1px solid currentColor;
    border-radius: 2px;
    line-height: 1;
}

.stamp--filled {
    background: var(--aos-cyan-deep);
    color: white;
    border-color: var(--aos-cyan-deep);
}

.stamp--alert { color: var(--aos-alert); }
.stamp--amber { color: #B45309; }
.stamp--on-dark { color: var(--aos-cyan-ink); }

/* --- Registration corner marks (the "+" you see on architectural drawings) ---
   Applied automatically to .pillar, .tier, .callout-card, .mockup, etc.
   via their own rules below. Reusable helper class .has-reg-marks. */
.has-reg-marks { position: relative; }

.has-reg-marks::before,
.has-reg-marks::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background-image:
        linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor);
    background-size: 100% 1px, 1px 100%;
    background-position: 50% 50%, 50% 50%;
    background-repeat: no-repeat;
    color: var(--aos-cyan-deep);
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 160ms ease;
}

.has-reg-marks::before { top: 8px; left: 8px; }
.has-reg-marks::after  { bottom: 8px; right: 8px; }

.has-reg-marks:hover::before,
.has-reg-marks:hover::after { opacity: 1; }

/* --- North arrow / scale-bar decoration for hero corners (optional) --- */
.north-arrow {
    position: absolute;
    top: 64px;                       /* clears the sheet-strip above it */
    right: var(--space-6);
    width: 54px;
    height: 54px;
    border: 1px solid var(--aos-blueprint-line);
    border-radius: 50%;
    color: var(--aos-cyan-ink);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 26, 47, 0.65);
    z-index: 3;
    user-select: none;
    pointer-events: none;
}

.north-arrow::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 9px solid var(--aos-cyan);
}

/* hide on small screens to avoid overlapping the hero h1 */
@media (max-width: 1023px) {
    .north-arrow { display: none; }
}

/* ==========================================================================
   Type scale
   Display headings now lean on Barlow Condensed — that's where the
   construction-tech personality lives.
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.6em 0;
    font-family: var(--font-sans);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.018em;
    color: var(--aos-ink);
}

h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5.2vw + 0.5rem, 4.75rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    line-height: 0.95;
}

h2 {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 2.8vw + 0.75rem, 2.9rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.02;
}

h3 {
    font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
    font-weight: 700;
}

h4 { font-size: 1.125rem; font-weight: 700; }

/* Eyebrow — used as the small label above h1/h2. Now monospaced for spec-sheet feel. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--aos-cyan-deep);
    margin-bottom: var(--space-3);
    line-height: 1;
}

.eyebrow::before {
    content: '';
    width: 18px;
    height: 1px;
    background: currentColor;
    opacity: 0.75;
}

.eyebrow--on-dark { color: var(--aos-cyan-ink); }

.lede {
    font-size: 1.18rem;
    line-height: 1.55;
    color: var(--aos-graphite-lo);
    max-width: 60ch;
}

.lede--on-dark { color: #C7D0DD; }

.muted     { color: var(--aos-muted); }
.text-cyan { color: var(--aos-cyan-deep); }

/* Tabular numerals utility — used on stats, KPIs, prices */
.tnum {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ==========================================================================
   Layout — container, sections
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.section { padding: var(--space-20) 0; }
.section--tight { padding: var(--space-12) 0; }

.section--dark {
    background-color: var(--aos-blueprint);
    color: #C7D0DD;
    position: relative;
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h3 { color: #FFFFFF; }

.section--warm   { background-color: var(--aos-concrete-warm); }
.section--paper  { background-color: var(--aos-concrete); }

/* Section head — centered or left-aligned wrapper above section content */
.section-head {
    max-width: 760px;
    margin: 0 auto var(--space-12) auto;
    text-align: center;
}

.section-head--left {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
    max-width: 760px;
}

.section-head .eyebrow { justify-content: center; }
.section-head--left .eyebrow { justify-content: flex-start; }

@media (min-width: 768px) {
    .container { padding: 0 var(--space-8); }
    .section { padding: var(--space-24) 0; }
}

/* ==========================================================================
   Header / nav
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 248, 242, 0.94);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--aos-line);
}

.site-header__inner {
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--aos-graphite);
    text-decoration: none;
    line-height: 1;
}

.brand:hover { color: var(--aos-graphite); }

.brand__mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--aos-graphite);
    border-radius: 4px;
    color: var(--aos-cyan-ink);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    box-shadow: inset 0 0 0 1px rgba(103, 232, 249, 0.25);
}

/* Crosshair tick on brand mark — subtle registration mark */
.brand__mark::before,
.brand__mark::after {
    content: '';
    position: absolute;
    background: var(--aos-cyan-ink);
    opacity: 0.4;
}
.brand__mark::before { top: 3px; left: 3px; width: 6px; height: 1px; box-shadow: 0 3px 0 0 var(--aos-cyan-ink); }
.brand__mark::after  { bottom: 3px; right: 3px; width: 1px; height: 6px; box-shadow: -3px 0 0 0 var(--aos-cyan-ink); }

.nav {
    display: none;
    align-items: center;
    gap: var(--space-6);
}

.nav a {
    color: var(--aos-graphite-lo);
    font-weight: 500;
    font-size: 0.93rem;
    position: relative;
    padding: 0.25rem 0;
}

.nav a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--aos-cyan);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 160ms ease;
}

.nav a:hover { color: var(--aos-graphite); }
.nav a:hover::after { transform: scaleX(1); }

.nav a.is-active {
    color: var(--aos-graphite);
    font-weight: 600;
}
.nav a.is-active::after { transform: scaleX(1); }

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

/* On mobile, the in-header CTAs are duplicated in the drawer footer; hide
   them in the header so we only show logo + hamburger. */
@media (max-width: 879px) {
    .nav-cta > .btn { display: none; }
}

@media (min-width: 880px) {
    .nav { display: inline-flex; }
}

/* ============================================================
   MOBILE NAVIGATION — hamburger + slide-in drawer
   Visible below 880px (where the desktop .nav hides itself).
   Desktop dropdown nav is untouched.
   ============================================================ */

.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--aos-line);
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    color: var(--aos-graphite);
    margin-left: var(--space-3);
}
.nav-toggle:hover {
    background: var(--aos-concrete-warm);
    border-color: var(--aos-graphite);
}
.nav-toggle:focus-visible {
    outline: 2px solid var(--aos-cyan);
    outline-offset: 2px;
}
.nav-toggle__bars {
    position: relative;
    width: 20px;
    height: 14px;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after,
.nav-toggle__bars span {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 200ms ease, opacity 150ms ease, top 200ms ease, bottom 200ms ease;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span    { top: 50%; transform: translateY(-50%); }
.nav-toggle__bars::after  { bottom: 0; }

/* Hamburger morphs into X when drawer is open */
body.nav-mobile-open .nav-toggle__bars::before { top: 6px; transform: rotate(45deg); }
body.nav-mobile-open .nav-toggle__bars::after  { bottom: 6px; transform: rotate(-45deg); }
body.nav-mobile-open .nav-toggle__bars span    { opacity: 0; }

/* Lock body scroll when drawer is open */
body.nav-mobile-open { overflow: hidden; }

/* Hamburger only shows on mobile */
@media (min-width: 880px) {
    .nav-toggle { display: none; }
}

/* Drawer + backdrop */
.nav-mobile-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 25, 41, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms ease;
    z-index: 90;
}
.nav-mobile {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 88vw);
    background: var(--aos-blueprint);
    color: #C7D0DD;
    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
}

body.nav-mobile-open .nav-mobile-backdrop { opacity: 1; visibility: visible; }
body.nav-mobile-open .nav-mobile { transform: translateX(0); }

/* Hide drawer entirely on desktop just to be safe */
@media (min-width: 880px) {
    .nav-mobile, .nav-mobile-backdrop { display: none; }
}

.nav-mobile__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-mobile__brand {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    color: white;
    text-decoration: none;
}

.nav-mobile__close {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #C7D0DD;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.nav-mobile__close:hover { background: rgba(255, 255, 255, 0.06); color: white; border-color: var(--aos-cyan); }
.nav-mobile__close:focus-visible { outline: 2px solid var(--aos-cyan); outline-offset: 2px; }

.nav-mobile__body {
    flex: 1 1 auto;
    padding: var(--space-4) 0;
}

.nav-mobile__group {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nav-mobile__group-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-4) var(--space-6);
    background: transparent;
    border: none;
    color: white;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    letter-spacing: 0.02em;
}
.nav-mobile__group-trigger:hover { background: rgba(255, 255, 255, 0.04); }
.nav-mobile__group-trigger:focus-visible { outline: 2px solid var(--aos-cyan); outline-offset: -2px; }

.nav-mobile__group-caret {
    color: var(--aos-cyan);
    font-size: 0.85rem;
    transition: transform 200ms ease;
}
.nav-mobile__group.is-open .nav-mobile__group-caret { transform: rotate(180deg); }

.nav-mobile__sublist {
    display: none;
    padding: 0 var(--space-6) var(--space-4) var(--space-6);
}
.nav-mobile__group.is-open .nav-mobile__sublist { display: block; }

.nav-mobile__sublist a {
    display: block;
    padding: 0.55rem 0;
    color: #B7BFCB;
    text-decoration: none;
    font-size: 0.95rem;
    border-left: 2px solid transparent;
    padding-left: var(--space-3);
    margin-left: -2px;
}
.nav-mobile__sublist a:hover,
.nav-mobile__sublist a:focus-visible {
    color: white;
    border-left-color: var(--aos-cyan);
    outline: none;
}
.nav-mobile__sublist a.is-overview {
    color: white;
    font-weight: 600;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-left-color: transparent;
}

.nav-mobile__direct {
    display: block;
    padding: var(--space-4) var(--space-6);
    color: white;
    font-family: var(--font-display);
    font-weight: 700;
    text-decoration: none;
    font-size: 1rem;
    letter-spacing: 0.02em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-mobile__direct:hover { background: rgba(255, 255, 255, 0.04); }

.nav-mobile__footer {
    padding: var(--space-5) var(--space-6) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-mobile__footer .btn { width: 100%; justify-content: center; text-align: center; }

/* Dropdown nav (tenant-type menus) */
.nav-group {
    position: relative;
}

.nav-trigger {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0.25rem 0;
    color: var(--aos-graphite-lo);
    font-family: inherit;
    font-weight: 500;
    font-size: 0.93rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    position: relative;
}

.nav-trigger::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--aos-cyan);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 160ms ease;
}

.nav-trigger .nav-caret {
    font-size: 0.7rem;
    line-height: 1;
    color: var(--aos-graphite-lo);
    transition: transform 160ms ease;
}

.nav-group:hover .nav-trigger,
.nav-group:focus-within .nav-trigger { color: var(--aos-graphite); }
.nav-group:hover .nav-trigger::after,
.nav-group:focus-within .nav-trigger::after { transform: scaleX(1); }
.nav-group:hover .nav-trigger .nav-caret,
.nav-group:focus-within .nav-trigger .nav-caret { transform: rotate(180deg); color: var(--aos-graphite); }

.nav-trigger.is-active {
    color: var(--aos-graphite);
    font-weight: 600;
}
.nav-trigger.is-active::after { transform: scaleX(1); }

.nav-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: -14px;
    min-width: 240px;
    background: #fff;
    border: 1px solid var(--aos-line);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px -10px rgba(20, 30, 40, 0.18), 0 2px 4px rgba(20, 30, 40, 0.04);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
    z-index: 60;
    display: flex;
    flex-direction: column;
}

.nav-group:hover .nav-menu,
.nav-group:focus-within .nav-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 140ms ease, transform 140ms ease;
}

/* Invisible hover-bridge so the menu doesn't disappear when crossing the 10px gap */
.nav-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

.nav-menu a {
    color: var(--aos-graphite-lo);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.55rem 0.8rem;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.25;
}

.nav-menu a:hover,
.nav-menu a:focus {
    background: rgba(15, 25, 35, 0.05);
    color: var(--aos-graphite);
    outline: none;
}

.nav-menu a.is-active {
    background: var(--aos-cyan);
    color: var(--aos-graphite);
    font-weight: 600;
}

.nav-menu__overview {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--aos-cyan-deep) !important;
}

.nav-menu__overview:hover,
.nav-menu__overview:focus {
    color: var(--aos-graphite) !important;
}

.nav-menu__divider {
    height: 1px;
    background: var(--aos-line);
    margin: 4px 4px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.72rem 1.2rem;
    border-radius: var(--radius);
    border: 1.5px solid transparent;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 100ms ease, box-shadow 140ms ease;
    white-space: nowrap;
    position: relative;
}

.btn:active { transform: translateY(1px); }

.btn--primary {
    background: var(--aos-graphite);
    border-color: var(--aos-graphite);
    color: white;
    box-shadow: inset 0 -2px 0 0 var(--aos-cyan);
}

.btn--primary:hover {
    background: var(--aos-graphite-hi);
    border-color: var(--aos-graphite-hi);
    color: white;
    box-shadow: inset 0 -2px 0 0 var(--aos-cyan-ink), 0 6px 16px rgba(10, 26, 47, 0.20);
}

.btn--cyan {
    background: var(--aos-cyan);
    border-color: var(--aos-cyan);
    color: var(--aos-graphite);
}

.btn--cyan:hover {
    background: var(--aos-cyan-hover);
    border-color: var(--aos-cyan-hover);
    color: white;
}

.btn--ghost {
    background: transparent;
    color: var(--aos-graphite);
    border-color: var(--aos-line);
}

.btn--ghost:hover {
    color: var(--aos-graphite);
    border-color: var(--aos-graphite);
    background: var(--aos-concrete-warm);
}

.btn--ghost-on-dark {
    background: transparent;
    color: white;
    border-color: rgba(255,255,255,0.28);
}

.btn--ghost-on-dark:hover {
    color: white;
    border-color: var(--aos-cyan);
    background: rgba(34, 211, 238, 0.08);
}

.btn--lg { padding: 0.98rem 1.6rem; font-size: 1rem; }
.btn--sm { padding: 0.45rem 0.9rem; font-size: 0.875rem; }
.btn--block { display: flex; width: 100%; }

/* ==========================================================================
   Hero — the big stage. Blueprint navy + grid + registration corners.
   ========================================================================== */

.hero {
    background-color: var(--aos-blueprint);
    color: white;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--aos-blueprint-line);
}

/* The cyan ambient glow — keeps some depth on top of the grid. */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 82% 12%, rgba(34, 211, 238, 0.18), transparent 42%),
        radial-gradient(circle at 8% 88%, rgba(34, 211, 238, 0.10), transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Hero corner registration marks (page-corner). Two of four corners shown. */
.hero::after {
    content: '';
    position: absolute;
    top: 18px; left: 18px;
    width: 18px; height: 18px;
    background-image:
        linear-gradient(var(--aos-cyan-ink), var(--aos-cyan-ink)),
        linear-gradient(var(--aos-cyan-ink), var(--aos-cyan-ink));
    background-size: 100% 1px, 1px 100%;
    background-position: 50% 50%, 50% 50%;
    background-repeat: no-repeat;
    opacity: 0.55;
    pointer-events: none;
    z-index: 1;
}

.hero__inner {
    position: relative;
    z-index: 2;
    padding: var(--space-20) 0 var(--space-24) 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-16);
    align-items: center;
}

.hero h1 {
    color: white;
    margin-bottom: var(--space-6);
}

.hero h1 .accent {
    color: var(--aos-cyan-ink);
    position: relative;
    white-space: nowrap;
}

/* Soft underline rule below the accented words */
.hero h1 .accent::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.08em;
    height: 3px;
    background: var(--aos-cyan);
    opacity: 0.45;
}

.hero p.lede {
    color: #D5DCE6;
    font-size: 1.18rem;
    margin-bottom: var(--space-8);
    max-width: 56ch;
}

.hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-12);
}

.hero__signal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-8);
    color: #94A3B8;
    font-size: 0.88rem;
    padding-top: var(--space-6);
    border-top: 1px solid var(--aos-blueprint-line);
}

.hero__signal-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    color: #A6B0BF;
}

.hero__signal-item::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--aos-cyan);
    transform: rotate(45deg);
}

@media (min-width: 1024px) {
    .hero__inner {
        grid-template-columns: 1.05fr 0.95fr;
    }
}

/* ==========================================================================
   Hero mockup (illustrative dashboard) — schematic frame
   ========================================================================== */

.mockup {
    background: #0B1A30;
    border: 1px solid var(--aos-blueprint-line);
    border-radius: 6px;
    box-shadow: var(--shadow-stamp);
    overflow: hidden;
    color: #C7D0DD;
    position: relative;
}

/* Registration crosshair at top-left and bottom-right of mockup */
.mockup::before,
.mockup::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background-image:
        linear-gradient(var(--aos-cyan-ink), var(--aos-cyan-ink)),
        linear-gradient(var(--aos-cyan-ink), var(--aos-cyan-ink));
    background-size: 100% 1px, 1px 100%;
    background-position: 50% 50%, 50% 50%;
    background-repeat: no-repeat;
    opacity: 0.7;
    pointer-events: none;
    z-index: 3;
}

.mockup::before { top: -7px; left: -7px; }
.mockup::after  { bottom: -7px; right: -7px; }

.mockup__bar {
    background: #0E1F3A;
    border-bottom: 1px solid var(--aos-blueprint-line);
    padding: 0.65rem 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: #9CA3AF;
}

.mockup__dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #374151;
}

.mockup__bar .url {
    margin-left: auto;
    font-family: var(--font-mono);
    color: var(--aos-cyan-ink);
    font-size: 0.74rem;
    letter-spacing: 0.02em;
}

.mockup__body { padding: 1.1rem 1.1rem 1.4rem 1.1rem; }

.mock-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0;
    border-bottom: 1px dashed var(--aos-blueprint-line);
    font-size: 0.85rem;
}

.mock-row:last-child { border-bottom: none; }

.mock-pill {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: var(--font-mono);
}

.mock-pill--ok      { background: rgba(34, 211, 238, 0.16); color: var(--aos-cyan-ink); }
.mock-pill--warn    { background: rgba(245, 158, 11, 0.18); color: var(--aos-amber-soft); }
.mock-pill--alert   { background: rgba(239, 68, 68, 0.20);  color: #FCA5A5; }
.mock-pill--neutral { background: rgba(148, 163, 184, 0.16); color: #B7BFCB; }

.mock-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.mock-kpis--2 { grid-template-columns: repeat(2, 1fr); }
.mock-kpis--4 { grid-template-columns: repeat(4, 1fr); }

.mock-kpi {
    background: #0E1F3A;
    border: 1px solid var(--aos-blueprint-line);
    border-radius: 6px;
    padding: 0.7rem 0.8rem;
    position: relative;
}

.mock-kpi::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 22px;
    height: 2px;
    background: var(--aos-cyan);
}

.mock-kpi__label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.2rem;
}

.mock-kpi__value {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 800;
    color: white;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.mock-kpi__delta {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--aos-cyan-ink);
    margin-top: 0.25rem;
    letter-spacing: 0.04em;
}

.mock-section-title {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #9CA3AF;
    margin-bottom: 0.5rem;
    margin-top: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mock-section-title::before {
    content: '';
    flex: 0 0 14px;
    height: 1px;
    background: var(--aos-cyan-ink);
    opacity: 0.6;
}

/* ==========================================================================
   Pillars / feature grid
   Cards now have a thin cyan top-border accent, a sheet-number on the
   top-right (via ::after), and corner registration marks on hover.
   ========================================================================== */

.pillar-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 720px)  { .pillar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .pillar-grid { grid-template-columns: repeat(4, 1fr); } }

.pillar {
    background: white;
    border: 1px solid var(--aos-line);
    border-radius: var(--radius);
    padding: var(--space-8) var(--space-6);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    position: relative;
    overflow: hidden;
}

/* Cyan accent stripe at the top of each pillar */
.pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--aos-cyan);
    transform-origin: left center;
    transform: scaleX(0.18);
    transition: transform 220ms ease;
}

.pillar:hover {
    border-color: var(--aos-graphite);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.pillar:hover::before { transform: scaleX(1); }

.pillar__icon {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    background: var(--aos-graphite);
    color: var(--aos-cyan-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-4);
    box-shadow: inset 0 0 0 1px rgba(103, 232, 249, 0.2);
}

.pillar h3 {
    margin-bottom: var(--space-2);
    font-size: 1.15rem;
}

.pillar p {
    color: var(--aos-muted);
    font-size: 0.95rem;
    margin: 0;
}

.pillar__link,
.mini-feature__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: var(--space-4);
    font-family: var(--font-mono);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    color: var(--aos-cyan-deep);
}

.pillar__link::after,
.mini-feature__link::after {
    content: '→';
    transition: transform 160ms ease;
}

.pillar__link:hover::after,
.mini-feature__link:hover::after { transform: translateX(3px); }

/* On-dark variants for sections that use blueprint background */
.section--dark .mini-feature__link,
.feature-section--dark .mini-feature__link,
.section--dark .pillar__link,
.feature-section--dark .pillar__link {
    color: var(--aos-cyan-ink);
}

/* Pillar grid variants */
.pillar-grid--5 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 720px)  { .pillar-grid--5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .pillar-grid--5 { grid-template-columns: repeat(5, 1fr); } }

/* 6-pillar variant — used on the homepage. Lays out as 1 col mobile,
   2 cols tablet, 3 cols desktop (so the grid is always a clean 6/3/2
   without orphan rows). */
.pillar-grid--six {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 720px)  { .pillar-grid--six { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .pillar-grid--six { grid-template-columns: repeat(3, 1fr); } }

.pillar--compact { padding: var(--space-6) var(--space-5); }

.pillar--compact .pillar__icon {
    width: 38px;
    height: 38px;
    font-size: 0.7rem;
    margin-bottom: var(--space-3);
}

.pillar--compact h3 { font-size: 1.02rem; }
.pillar--compact p  { font-size: 0.88rem; line-height: 1.5; }

/* Pillar anchor nav (mini in-section nav above pillars on some pages) */
.pillar-anchor-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
    margin-bottom: var(--space-12);
}

.pillar-anchor-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: white;
    border: 1px solid var(--aos-line);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--aos-graphite-lo);
}

.pillar-anchor-nav a:hover {
    color: white;
    background: var(--aos-graphite);
    border-color: var(--aos-graphite);
}

/* ==========================================================================
   Pillar header (used on features pillar pages)
   ========================================================================== */

.pillar-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-12);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--aos-line);
}

.pillar-header__title { margin: 0; }

.pillar-header__pitch {
    color: var(--aos-graphite-lo);
    font-size: 1.1rem;
    line-height: 1.55;
    max-width: 60ch;
    margin: 0;
}

@media (min-width: 1024px) {
    .pillar-header { grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: end; }
}

/* ==========================================================================
   Features deep grid (features.html)
   ========================================================================== */

.feature-section { padding: var(--space-20) 0; }
.feature-section--warm { background-color: var(--aos-concrete-warm); }
.feature-section--dark { background-color: var(--aos-blueprint); color: #C7D0DD; }

.feature-section--dark h1,
.feature-section--dark h2,
.feature-section--dark h3,
.feature-section--dark h3 { color: white; }

.feature-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: start;
    padding: var(--space-16) 0;
    border-bottom: 1px solid var(--aos-line);
}

.feature-block:last-child { border-bottom: none; }

@media (min-width: 1024px) {
    .feature-block { grid-template-columns: 1fr 1fr; gap: var(--space-20); }
    .feature-block--reverse > .feature-block__copy { order: 2; }
}

.feature-block__copy h2 { margin-bottom: var(--space-3); }
.feature-block__copy p.lede { margin-bottom: var(--space-6); }

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-3);
}

.feature-list li {
    padding-left: 1.6rem;
    position: relative;
    color: var(--aos-graphite-lo);
    margin-bottom: 0;
}

.feature-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    background: var(--aos-cyan-deep);
    transform: rotate(45deg);
}

.feature-block__visual {
    background: white;
    border: 1px solid var(--aos-line);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow);
    min-height: 280px;
    position: relative;
}

/* Reg corners on every visual block */
.feature-block__visual::before,
.feature-block__visual::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background-image:
        linear-gradient(var(--aos-cyan-deep), var(--aos-cyan-deep)),
        linear-gradient(var(--aos-cyan-deep), var(--aos-cyan-deep));
    background-size: 100% 1px, 1px 100%;
    background-position: 50% 50%, 50% 50%;
    background-repeat: no-repeat;
    opacity: 0.45;
}

.feature-block__visual::before { top: 8px; left: 8px; }
.feature-block__visual::after  { bottom: 8px; right: 8px; }

/* Dark variant of feature-section needs slightly different visual treatment */
.feature-section--dark .feature-block { border-bottom-color: var(--aos-blueprint-line); }
.feature-section--dark .feature-list li { color: #C7D0DD; }
.feature-section--dark .feature-list li::before { background: var(--aos-cyan); }

/* ==========================================================================
   Pricing tiers
   ========================================================================== */

.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: stretch;
}

@media (min-width: 900px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }

.tier {
    background: white;
    border: 1px solid var(--aos-line);
    border-radius: var(--radius);
    padding: var(--space-8) var(--space-6);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.tier::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background:
        repeating-linear-gradient(90deg,
            var(--aos-cyan) 0 6px,
            transparent 6px 12px);
    opacity: 0.35;
}

.tier--featured {
    border-color: var(--aos-graphite);
    box-shadow: var(--shadow-lg);
}

.tier--featured::before {
    background: var(--aos-cyan);
    opacity: 1;
    height: 4px;
}

.tier--featured::after {
    content: 'MOST POPULAR';
    position: absolute;
    top: -1px;
    right: var(--space-6);
    background: var(--aos-cyan);
    color: var(--aos-graphite);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    padding: 0.35rem 0.7rem;
    border-radius: 0 0 4px 4px;
    line-height: 1;
}

.tier__name {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 800;
    color: var(--aos-graphite);
    font-size: 1.15rem;
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.tier__name::before {
    content: '';
    width: 16px;
    height: 1px;
    background: var(--aos-cyan-deep);
}

.tier__pitch {
    color: var(--aos-muted);
    font-size: 0.92rem;
    margin-bottom: var(--space-6);
    min-height: 2.6em;
}

.tier__price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: var(--space-2);
    font-variant-numeric: tabular-nums;
}

.tier__price-amount {
    font-family: var(--font-display);
    font-size: 2.85rem;
    font-weight: 800;
    color: var(--aos-graphite);
    letter-spacing: -0.015em;
    line-height: 0.95;
}

.tier__price-period {
    color: var(--aos-muted);
    font-size: 0.95rem;
}

.tier__price-note {
    color: var(--aos-muted-soft);
    font-size: 0.78rem;
    margin-bottom: var(--space-6);
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}

.tier__price-tba {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--aos-graphite-lo);
    letter-spacing: 0.05em;
    margin-bottom: var(--space-3);
    text-transform: uppercase;
}

.tier__soon-pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: var(--aos-concrete-warm);
    color: var(--aos-graphite-lo);
    padding: 0.22rem 0.55rem;
    border-radius: 2px;
    margin-left: 0.4rem;
    vertical-align: middle;
    border: 1px solid var(--aos-line);
}

.tier__features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-8) 0;
    flex: 1;
}

.tier__features li {
    padding: 0.55rem 0 0.55rem 1.6rem;
    position: relative;
    border-bottom: 1px solid var(--aos-line);
    font-size: 0.92rem;
    color: var(--aos-graphite-lo);
    margin: 0;
}

.tier__features li:last-child { border-bottom: none; }

.tier__features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 12px;
    height: 8px;
    border-left: 2px solid var(--aos-cyan-deep);
    border-bottom: 2px solid var(--aos-cyan-deep);
    transform: rotate(-45deg);
}

.tier__features li.is-not::before {
    border-color: var(--aos-muted-soft);
    transform: rotate(0deg);
    border-bottom: none;
    border-left: none;
    background: var(--aos-muted-soft);
    width: 9px;
    height: 2px;
    top: 1.05em;
    left: 1px;
}

.tier__features li.is-not { color: var(--aos-muted-soft); }

.tier__audience-row,
.tier__model-line {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--aos-muted);
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--aos-line);
    margin-bottom: var(--space-3);
}

.tier__cta { margin-top: auto; }

/* ==========================================================================
   Comparison table
   ========================================================================== */

.compare {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border: 1px solid var(--aos-line);
    border-radius: var(--radius);
    overflow: hidden;
}

.compare th, .compare td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--aos-line);
    text-align: left;
    font-size: 0.92rem;
}

.compare thead th {
    background: var(--aos-graphite);
    color: white;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    font-weight: 500;
}

.compare tbody th {
    background: var(--aos-concrete-warm);
    font-weight: 600;
    color: var(--aos-graphite);
    width: 38%;
}

.compare td {
    text-align: center;
    color: var(--aos-graphite-lo);
}

.compare td:first-of-type,
.compare th:first-of-type { text-align: left; }

.compare .check { color: var(--aos-cyan-deep); font-weight: 700; }
.compare .dash  { color: var(--aos-muted-soft); }

.compare-section-row th {
    background: var(--aos-graphite);
    color: var(--aos-cyan-ink);
    font-family: var(--font-mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.74rem;
}

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

.faq {
    display: grid;
    gap: var(--space-3);
    max-width: 820px;
    margin: 0 auto;
    counter-reset: faq;
}

.faq details {
    background: white;
    border: 1px solid var(--aos-line);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-6);
    position: relative;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.faq details[open] {
    border-color: var(--aos-graphite);
    box-shadow: var(--shadow);
}

.faq summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--aos-graphite);
    font-size: 1rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
}

.faq summary::before {
    counter-increment: faq;
    content: 'FAQ.' counter(faq, decimal-leading-zero);
    font-family: var(--font-mono);
    color: var(--aos-cyan-deep);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    margin-right: 0.85rem;
    flex-shrink: 0;
}

.faq summary::after {
    content: '+';
    color: var(--aos-cyan-deep);
    font-size: 1.5rem;
    line-height: 1;
    margin-left: auto;
    transition: transform 200ms ease;
}

.faq details[open] summary::after { content: '–'; }
.faq summary::-webkit-details-marker { display: none; }

.faq details > p {
    margin-top: var(--space-4);
    color: var(--aos-graphite-lo);
}

/* ==========================================================================
   About / story
   ========================================================================== */

.story-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: start;
}

@media (min-width: 1024px) {
    .story-grid { grid-template-columns: 1fr 1fr; gap: var(--space-20); }
}

.story-card {
    background: white;
    border: 1px solid var(--aos-line);
    border-radius: var(--radius);
    padding: var(--space-8);
    position: relative;
}

.story-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--space-8);
    width: 36px;
    height: 3px;
    background: var(--aos-cyan);
}

.values {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 720px) { .values { grid-template-columns: repeat(3, 1fr); } }

.value {
    border-left: 2px solid var(--aos-cyan-deep);
    padding-left: var(--space-4);
    position: relative;
}

.value::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 0;
    width: 8px;
    height: 8px;
    background: var(--aos-cyan);
    transform: rotate(45deg);
}

.value h3 {
    margin-bottom: var(--space-2);
    color: var(--aos-graphite);
}

.value p {
    color: var(--aos-muted);
    font-size: 0.95rem;
}

/* ==========================================================================
   Stats / numbers band
   ========================================================================== */

.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat {
    position: relative;
    padding-top: var(--space-3);
    border-top: 1px solid var(--aos-blueprint-line);
}

.stat__num {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4vw, 3.2rem);
    font-weight: 800;
    color: var(--aos-cyan-ink);
    line-height: 0.95;
    margin-bottom: var(--space-2);
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
}

.stat__num small {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--aos-cyan);
    font-weight: 500;
    letter-spacing: 0;
}

.stat__label {
    color: #B7BFCB;
    font-size: 0.88rem;
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
}

/* ==========================================================================
   CTA band — blueprint background + condensed type
   ========================================================================== */

.cta-band {
    background-color: var(--aos-blueprint);
    color: white;
    border-radius: var(--radius-lg);
    padding: var(--space-16) var(--space-8);
    text-align: center;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--aos-blueprint-line);
}

.cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.22), transparent 62%);
    pointer-events: none;
}

.cta-band > * { position: relative; z-index: 1; }

.cta-band h2 {
    color: white;
    margin-bottom: var(--space-3);
    font-size: clamp(2rem, 3.5vw + 1rem, 3rem);
}

.cta-band p {
    color: #C7D0DD;
    max-width: 56ch;
    margin: 0 auto var(--space-6) auto;
    font-size: 1.1rem;
}

.cta-band__buttons {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
}

/* Optional stamp underneath the CTA band — "READY FOR REVIEW" */
.cta-band__stamp {
    display: inline-block;
    margin-top: var(--space-8);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--aos-cyan-ink);
    opacity: 0.7;
    padding: 0.4rem 0.85rem;
    border: 1px dashed rgba(103, 232, 249, 0.4);
    border-radius: 2px;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form {
    background: white;
    border: 1px solid var(--aos-line);
    border-radius: var(--radius);
    padding: var(--space-8);
    box-shadow: var(--shadow);
    display: grid;
    gap: var(--space-4);
    position: relative;
}

.form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--aos-cyan);
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.field--row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }

@media (min-width: 720px) {
    .field--row { grid-template-columns: 1fr 1fr; }
}

.field label {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--aos-graphite);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    border: 1.5px solid var(--aos-line);
    border-radius: var(--radius);
    padding: 0.72rem 0.92rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--aos-ink);
    background: white;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--aos-cyan-deep);
    box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.30);
}

.field textarea {
    min-height: 130px;
    resize: vertical;
}

.field__hint {
    color: var(--aos-muted);
    font-size: 0.8rem;
}

/* ==========================================================================
   Footer — blueprint dark with sheet-strip motif
   ========================================================================== */

.site-footer {
    background: var(--aos-blueprint-hi);
    color: #B7BFCB;
    padding: var(--space-16) 0 var(--space-8) 0;
    margin-top: var(--space-24);
    border-top: 1px solid var(--aos-blueprint-line);
    position: relative;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0,
        var(--aos-cyan-ink) 12%,
        var(--aos-cyan-ink) 88%,
        transparent 100%);
    opacity: 0.4;
}

.site-footer__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--aos-blueprint-line);
}

@media (min-width: 720px) {
    .site-footer__top { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
}

@media (min-width: 1080px) {
    .site-footer__top { grid-template-columns: 1.3fr 0.9fr 0.9fr 0.9fr 0.9fr; }
}

.site-footer h2 {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--aos-cyan-ink);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.site-footer h5::before {
    content: '';
    width: 12px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}

.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--space-2); }
.site-footer a  { color: #C7D0DD; font-size: 0.92rem; }
.site-footer a:hover { color: var(--aos-cyan-ink); }

.site-footer__bottom {
    padding-top: var(--space-6);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    color: #94A3B8;
    font-size: 0.82rem;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}

.site-footer .brand {
    color: white;
    margin-bottom: var(--space-4);
}

.site-footer__tagline {
    color: #B7BFCB;
    max-width: 36ch;
    font-size: 0.92rem;
}

/* ==========================================================================
   Utility
   ========================================================================== */

.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.divider {
    height: 1px;
    background: var(--aos-line);
    border: none;
    margin: var(--space-12) 0;
}

/* ==========================================================================
   Legal pages (privacy, terms, security) — sheet-style sticky TOC + prose
   ========================================================================== */

.legal-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: start;
}

@media (min-width: 1024px) {
    .legal-layout { grid-template-columns: 260px 1fr; gap: var(--space-16); }
}

.legal-toc {
    background: white;
    border: 1px solid var(--aos-line);
    border-radius: var(--radius);
    padding: var(--space-6);
    position: relative;
}

.legal-toc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 3px;
    background: var(--aos-cyan);
}

@media (min-width: 1024px) {
    .legal-toc { position: sticky; top: 96px; }
}

.legal-toc__title,
.legal-toc h3 {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--aos-cyan-deep);
    margin-bottom: var(--space-4);
    /* Override the global h2 size for this small TOC heading */
    margin-top: 0;
}
.legal-toc__title { font-size: 0.74rem; }

.legal-toc ol {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: toc;
}

.legal-toc li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--aos-line);
}

.legal-toc li:last-child { border-bottom: none; }

.legal-toc a {
    display: block;
    padding: 0.55rem 0;
    color: var(--aos-graphite-lo);
    font-size: 0.92rem;
    line-height: 1.4;
}

.legal-toc a::before {
    counter-increment: toc;
    content: counter(toc, decimal-leading-zero) ' ';
    color: var(--aos-cyan-deep);
    font-family: var(--font-mono);
    font-weight: 500;
    margin-right: 0.5rem;
    font-size: 0.85em;
}

.legal-toc a:hover { color: var(--aos-graphite); }

.legal-prose { max-width: 760px; }

.legal-prose h2 {
    font-size: 1.55rem;
    margin-top: var(--space-12);
    margin-bottom: var(--space-4);
    scroll-margin-top: 96px;
    text-transform: none;
    letter-spacing: -0.01em;
    font-family: var(--font-sans);
}

.legal-prose h2:first-child { margin-top: 0; }

.legal-prose h3 {
    font-size: 1.1rem;
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}

.legal-prose p,
.legal-prose ul,
.legal-prose ol {
    color: var(--aos-graphite-lo);
    font-size: 1rem;
    line-height: 1.7;
}

.legal-prose ul,
.legal-prose ol { padding-left: 1.4rem; }

.legal-prose li { margin-bottom: 0.4rem; }
.legal-prose strong { color: var(--aos-graphite); }

.legal-prose .callout {
    background: rgba(34, 211, 238, 0.06);
    border-left: 4px solid var(--aos-cyan);
    padding: var(--space-5) var(--space-6);
    border-radius: 0 var(--radius) var(--radius) 0;
    margin: var(--space-6) 0;
}

.legal-prose .callout p:last-child { margin-bottom: 0; }
.legal-prose .callout strong { color: var(--aos-graphite); }

.legal-prose .callout--warn {
    background: rgba(245, 158, 11, 0.10);
    border-left-color: var(--aos-amber);
}

.legal-meta {
    background: var(--aos-concrete-warm);
    border: 1px solid var(--aos-line);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-6);
    font-size: 0.92rem;
    color: var(--aos-graphite-lo);
    margin-bottom: var(--space-12);
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}

.legal-meta strong { color: var(--aos-graphite); font-weight: 600; }

.legal-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-4) 0 var(--space-6) 0;
    font-size: 0.93rem;
}

.legal-prose th,
.legal-prose td {
    text-align: left;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--aos-line);
    vertical-align: top;
}

.legal-prose th {
    background: var(--aos-concrete-warm);
    font-weight: 600;
    color: var(--aos-graphite);
}

/* ==========================================================================
   Security page extras (control category cards)
   ========================================================================== */

.control-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin: var(--space-4) 0 var(--space-6) 0;
}

@media (min-width: 720px) { .control-grid { grid-template-columns: repeat(2, 1fr); } }

.control {
    background: white;
    border: 1px solid var(--aos-line);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    position: relative;
}

.control::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 22px;
    height: 2px;
    background: var(--aos-cyan);
}

.control h3 {
    font-size: 0.92rem;
    margin-bottom: var(--space-2);
    color: var(--aos-graphite);
}

.control p {
    color: var(--aos-muted);
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0;
}

/* ==========================================================================
   Module deep-dive (screenshot + copy side by side)
   ========================================================================== */

.module-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: stretch;
    padding: var(--space-16) 0;
    border-bottom: 1px solid var(--aos-line);
}

.module-block:last-child { border-bottom: none; }

@media (min-width: 1024px) {
    .module-block { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-16); }
    .module-block--reverse > .module-block__copy { order: 2; }
}

.module-block__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.module-block__copy h2 { margin-bottom: var(--space-3); }
.module-block__copy p.lede { margin-bottom: var(--space-5); }

.module-block__visual {
    background: var(--aos-blueprint);
    border-radius: var(--radius);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
    color: #C7D0DD;
    border: 1px solid var(--aos-blueprint-line);
    min-height: 360px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.module-block__visual::before,
.module-block__visual::after {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    background-image:
        linear-gradient(var(--aos-cyan-ink), var(--aos-cyan-ink)),
        linear-gradient(var(--aos-cyan-ink), var(--aos-cyan-ink));
    background-size: 100% 1px, 1px 100%;
    background-position: 50% 50%, 50% 50%;
    background-repeat: no-repeat;
    opacity: 0.5;
}

.module-block__visual::before { top: 6px;    left: 6px; }
.module-block__visual::after  { bottom: 6px; right: 6px; }

.module-block__visual--light {
    background: white;
    color: var(--aos-graphite-lo);
    border-color: var(--aos-line);
    box-shadow: var(--shadow);
}

.module-block__visual--light::before,
.module-block__visual--light::after {
    background-image:
        linear-gradient(var(--aos-cyan-deep), var(--aos-cyan-deep)),
        linear-gradient(var(--aos-cyan-deep), var(--aos-cyan-deep));
}

.feature-section--dark .module-block { border-bottom-color: var(--aos-blueprint-line); }

/* ==========================================================================
   Mock visuals: enhanced patterns
   ========================================================================== */

.mock-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.mock-table th, .mock-table td {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--aos-blueprint-line);
    text-align: left;
}

.mock-table th {
    color: #9CA3AF;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.mock-table td       { color: #C7D0DD; }
.mock-table td.right { text-align: right; font-variant-numeric: tabular-nums; }
.right               { text-align: right; }
.mock-table tr:last-child td { border-bottom: none; }

.mock-bar {
    display: flex;
    height: 10px;
    border-radius: 2px;
    overflow: hidden;
    background: var(--aos-blueprint-line);
    margin: 0.35rem 0;
}

.mock-bar__seg { height: 100%; }
.mock-bar__seg--cyan  { background: var(--aos-cyan); }
.mock-bar__seg--amber { background: var(--aos-amber); }
.mock-bar__seg--red   { background: #F87171; }
.mock-bar__seg--muted { background: #374151; }

.mock-legend {
    display: flex;
    gap: var(--space-3);
    font-size: 0.7rem;
    color: #94A3B8;
    margin-top: 0.2rem;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}

.mock-legend span::before {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    margin-right: 0.35rem;
    vertical-align: middle;
}

.mock-legend .lg-cyan::before  { background: var(--aos-cyan); }
.mock-legend .lg-amber::before { background: var(--aos-amber); }
.mock-legend .lg-red::before   { background: #F87171; }
.mock-legend .lg-muted::before { background: #6B7280; }

.mock-step {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--aos-blueprint-line);
    font-size: 0.82rem;
    color: #C7D0DD;
}

.mock-step__num {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: rgba(34, 211, 238, 0.16);
    color: var(--aos-cyan-ink);
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   Stat row (light-bg companion to .stats)
   ========================================================================== */

.statline {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    background: white;
    border: 1px solid var(--aos-line);
    border-radius: var(--radius);
    padding: var(--space-8);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.statline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background:
        repeating-linear-gradient(90deg,
            var(--aos-cyan) 0 12px,
            transparent 12px 24px);
    opacity: 0.6;
}

@media (min-width: 720px) {
    .statline { grid-template-columns: repeat(4, 1fr); }
}

.statline__num {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4vw, 2.85rem);
    font-weight: 800;
    color: var(--aos-graphite);
    line-height: 0.95;
    margin-bottom: var(--space-2);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.statline__label {
    color: var(--aos-muted);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.statline__num small {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--aos-cyan-deep);
    font-weight: 500;
    margin-left: 0.35rem;
    letter-spacing: 0.04em;
}

/* ==========================================================================
   Tag list (state-registry / monospace label style)
   ========================================================================== */

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: var(--space-4) 0;
}

.tag {
    display: inline-block;
    padding: 0.3rem 0.65rem;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--aos-graphite-lo);
    background: white;
    border: 1px solid var(--aos-line);
    border-radius: 2px;
    letter-spacing: 0.03em;
}

.tag--cyan {
    background: rgba(34, 211, 238, 0.10);
    color: var(--aos-cyan-deep);
    border-color: rgba(14, 116, 144, 0.35);
}

.tag--amber {
    background: rgba(245, 158, 11, 0.12);
    color: #B45309;
    border-color: rgba(245, 158, 11, 0.4);
}

.tag--graphite {
    background: var(--aos-graphite);
    color: var(--aos-cyan-ink);
    border-color: var(--aos-graphite);
}

/* ==========================================================================
   Callout strip / split
   ========================================================================== */

.callout-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin: var(--space-8) 0;
}

@media (min-width: 720px) { .callout-strip { grid-template-columns: repeat(3, 1fr); } }

.callout-card {
    background: white;
    border: 1px solid var(--aos-line);
    border-radius: var(--radius);
    padding: var(--space-5);
    position: relative;
    overflow: hidden;
}

.callout-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: var(--aos-cyan);
}

.callout-card__tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.7rem;
    background: var(--aos-graphite);
    color: var(--aos-cyan-ink);
    padding: 0.22rem 0.55rem;
    border-radius: 2px;
    margin-bottom: var(--space-3);
}

.callout-card h3 {
    margin-bottom: var(--space-2);
    color: var(--aos-graphite);
}

.callout-card p {
    color: var(--aos-muted);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

/* dark variant */
.section--dark .callout-card,
.feature-section--dark .callout-card {
    background: var(--aos-blueprint-lo);
    border-color: var(--aos-blueprint-line);
}

.section--dark .callout-card h3,
.feature-section--dark .callout-card h3 { color: white; }

.section--dark .callout-card p,
.feature-section--dark .callout-card p { color: #B7BFCB; }

/* ==========================================================================
   Two-column "what changed" / spec list
   ========================================================================== */

.spec-list {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-6) 0;
}

.spec-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-4) 0;
    border-bottom: 1px dashed var(--aos-line);
}

@media (min-width: 720px) {
    .spec-row { grid-template-columns: 220px 1fr; gap: var(--space-6); }
}

.spec-row:last-child { border-bottom: none; }

.spec-row__key {
    font-family: var(--font-mono);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.74rem;
    color: var(--aos-cyan-deep);
    padding-top: 0.2rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.spec-row__key::before {
    content: '';
    width: 12px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
    transform: translateY(-3px);
}

.spec-row__val {
    color: var(--aos-graphite-lo);
    font-size: 0.98rem;
    line-height: 1.55;
}

.spec-row__val strong { color: var(--aos-graphite); }

/* dark variant */
.section--dark .spec-row,
.feature-section--dark .spec-row {
    border-bottom-color: var(--aos-blueprint-line);
}
.section--dark .spec-row__key,
.feature-section--dark .spec-row__key { color: var(--aos-cyan-ink); }
.section--dark .spec-row__val,
.feature-section--dark .spec-row__val { color: #C7D0DD; }
.section--dark .spec-row__val strong,
.feature-section--dark .spec-row__val strong { color: white; }

/* ==========================================================================
   In-page sticky TOC nav (feature pages)
   ========================================================================== */

.page-toc-bar {
    background: white;
    border-bottom: 1px solid var(--aos-line);
    position: sticky;
    top: var(--header-h);
    z-index: 40;
    overflow-x: auto;
}

.page-toc-bar__inner {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) 0;
    white-space: nowrap;
}

.page-toc-bar a {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    border-radius: 2px;
    background: var(--aos-concrete-warm);
    color: var(--aos-graphite-lo);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}

.page-toc-bar a:hover {
    background: var(--aos-graphite);
    color: var(--aos-cyan-ink);
}

/* ==========================================================================
   Process strip (numbered steps in a row)
   ========================================================================== */

.process-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    counter-reset: step;
}

@media (min-width: 720px)  { .process-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .process-strip { grid-template-columns: repeat(4, 1fr); } }

.process-step {
    background: white;
    border: 1px solid var(--aos-line);
    border-radius: var(--radius);
    padding: var(--space-6);
    position: relative;
    overflow: hidden;
}

.process-step::before {
    counter-increment: step;
    content: 'STEP ' counter(step, decimal-leading-zero);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    color: var(--aos-cyan-deep);
    margin-bottom: var(--space-3);
    display: block;
}

.process-step h3 { margin-bottom: var(--space-2); font-size: 1.05rem; }
.process-step p  { color: var(--aos-muted); font-size: 0.9rem; margin: 0; }

/* dark variant */
.section--dark .process-step,
.feature-section--dark .process-step {
    background: var(--aos-blueprint-lo);
    border-color: var(--aos-blueprint-line);
}
.section--dark .process-step::before,
.feature-section--dark .process-step::before { color: var(--aos-cyan-ink); }
.section--dark .process-step h3,
.feature-section--dark .process-step h3 { color: white; }
.section--dark .process-step p,
.feature-section--dark .process-step p { color: #B7BFCB; }

/* ==========================================================================
   Quote-style customer band
   ========================================================================== */

.quote-band {
    background: var(--aos-concrete-warm);
    border: 1px solid var(--aos-line);
    border-radius: var(--radius);
    padding: var(--space-12) var(--space-8);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.quote-band::before {
    content: '"';
    font-family: 'Barlow Condensed', serif;
    font-size: 6rem;
    line-height: 1;
    color: var(--aos-cyan);
    position: absolute;
    top: var(--space-4);
    left: var(--space-6);
    opacity: 0.6;
}

.quote-band p {
    font-size: 1.35rem;
    color: var(--aos-graphite);
    line-height: 1.45;
    max-width: 720px;
    margin: 0 auto var(--space-4) auto;
    font-weight: 500;
}

.quote-band__attr {
    color: var(--aos-muted);
    font-size: 0.92rem;
    font-style: normal;
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
}

/* ==========================================================================
   Pull quote (inline blockquote on long-form pages)
   ========================================================================== */

.pull-quote {
    margin: var(--space-12) 0;
    padding: var(--space-8) var(--space-8);
    border-left: 3px solid var(--aos-cyan);
    background: var(--aos-concrete-warm);
    font-size: 1.18rem;
    line-height: 1.55;
    color: var(--aos-graphite);
    border-radius: 0 var(--radius) var(--radius) 0;
    position: relative;
}

.pull-quote::before {
    content: '"';
    position: absolute;
    top: var(--space-2);
    right: var(--space-6);
    font-family: 'Barlow Condensed', serif;
    font-size: 4rem;
    color: var(--aos-cyan);
    opacity: 0.45;
    line-height: 1;
}

/* ==========================================================================
   Accessibility helpers / focus
   ========================================================================== */

:focus-visible {
    outline: 2px solid var(--aos-cyan-deep);
    outline-offset: 2px;
}

/* Skip-to-content link — visually hidden until focused, then anchored to the
   top-left corner. Lets keyboard users jump past the header / nav into the
   page's main landmark. Required for WCAG 2.1 AA + ADA digital compliance.
   Uses the canonical sr-only pattern: clip-path + 1×1 + overflow hidden.
   The !important flags lock the hidden state against any future cascading
   rule that might otherwise leak the link into visible layout. */
.skip-link {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link:focus,
.skip-link:focus-visible {
    position: fixed !important;
    left: 1rem !important;
    top: 1rem !important;
    width: auto !important;
    height: auto !important;
    padding: 0.75rem 1.1rem !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    background: var(--aos-graphite);
    color: var(--aos-cyan-ink);
    z-index: 1000;
    border: 2px solid var(--aos-cyan) !important;
    border-radius: var(--radius);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

@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;
    }
}

/* ============================================================
   BLOG — listing cards, post header, prose body, tag pills
   ============================================================ */

/* Tag pills (used on cards + post header + footer) */
.post-tag-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.post-tag {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 4px;
    background: rgba(34, 211, 238, 0.12);
    color: var(--aos-cyan-deep);
    border: 1px solid rgba(34, 211, 238, 0.24);
}
.section--dark .post-tag,
.hero .post-tag {
    background: rgba(34, 211, 238, 0.16);
    color: var(--aos-cyan);
    border-color: rgba(34, 211, 238, 0.32);
}

/* Listing grid */
.post-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}
@media (min-width: 720px)  { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid var(--aos-line);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-decoration: none;
    color: inherit;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.post-card:hover {
    border-color: var(--aos-graphite);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.post-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    color: var(--aos-muted);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}
.post-card__date { white-space: nowrap; }
.post-card__readtime { white-space: nowrap; }
.post-card h3 {
    font-size: 1.15rem;
    line-height: 1.3;
    margin-bottom: var(--space-3);
    color: var(--aos-graphite);
}
.post-card__lede {
    color: var(--aos-graphite-lo);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 var(--space-4) 0;
    flex: 1 1 auto;
}
.post-card__tags { margin-top: auto; }

/* Featured card (first / most recent post) — wider */
.post-card--featured {
    grid-column: 1 / -1;
    background: var(--aos-blueprint);
    color: #C7D0DD;
    border-color: var(--aos-blueprint-line, #2D405F);
}
.post-card--featured h3 { color: white; font-size: 1.6rem; }
.post-card--featured .post-card__lede { color: #B7BFCB; font-size: 1.05rem; }
.post-card--featured .post-card__meta { color: rgba(199, 208, 221, 0.7); }
.post-card--featured .post-tag {
    background: rgba(34, 211, 238, 0.16);
    color: var(--aos-cyan);
    border-color: rgba(34, 211, 238, 0.32);
}
@media (min-width: 900px) {
    .post-card--featured {
        flex-direction: row;
        gap: var(--space-8);
        align-items: center;
        padding: var(--space-8);
    }
    .post-card--featured .post-card__copy { flex: 1 1 60%; }
    .post-card--featured .post-card__visual {
        flex: 1 1 40%;
        align-self: stretch;
        min-height: 200px;
        background: var(--aos-blueprint-lo, #16243A);
        border: 1px solid rgba(34, 211, 238, 0.18);
        border-radius: var(--radius);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 4rem;
        color: var(--aos-cyan);
        letter-spacing: 0.08em;
    }
}

/* Empty state on the listing */
.post-empty {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    color: var(--aos-muted);
    background: var(--aos-concrete-warm);
    border: 1px dashed var(--aos-line);
    border-radius: var(--radius-lg);
}

/* ============================================================
   POST PAGE — single article layout
   ============================================================ */

/* Post hero (dark blueprint band at the top of every post) */
.post-hero { padding-bottom: 0; }
.post-hero h1 {
    color: white;
    font-size: clamp(1.85rem, 4vw, 2.7rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.post-hero__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-5) 0 var(--space-6) 0;
    color: rgba(199, 208, 221, 0.7);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}
.post-hero__meta time { color: var(--aos-cyan); font-weight: 500; }
.post-hero__meta .post-tag-list { margin-left: auto; }
@media (max-width: 600px) {
    .post-hero__meta .post-tag-list {
        margin-left: 0;
        margin-top: var(--space-2);
        flex-basis: 100%;
    }
}

.post-shell {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-12) var(--space-4) var(--space-20) var(--space-4);
}

.post-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--aos-graphite-lo);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: var(--space-5);
}
.post-back:hover { color: var(--aos-cyan-deep); }

.post-back--on-dark {
    color: rgba(199, 208, 221, 0.75);
    margin-bottom: var(--space-2);
}
.post-back--on-dark:hover { color: var(--aos-cyan); }

/* Larger, slightly more confident first paragraph in the body */
.post-body__lead {
    font-size: 1.18rem;
    line-height: 1.65;
    color: var(--aos-graphite);
}

/* Prose body */
.post-body {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--aos-graphite);
}
.post-body p,
.post-body ul,
.post-body ol,
.post-body blockquote {
    margin-bottom: var(--space-6);
}
.post-body h2 {
    font-size: 1.55rem;
    margin-top: var(--space-12);
    margin-bottom: var(--space-5);
    line-height: 1.2;
    letter-spacing: -0.005em;
    position: relative;
}
/* Cyan accent bar before each h2 — picks up the blueprint motif */
.post-body h2::before {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background: var(--aos-cyan-deep);
    margin-bottom: var(--space-3);
    border-radius: 2px;
}
.post-body h3 {
    font-size: 1.2rem;
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
    line-height: 1.3;
}
.post-body ul,
.post-body ol {
    padding-left: 0;
    list-style: none;
}
.post-body li {
    margin-bottom: var(--space-3);
    padding-left: var(--space-5);
    position: relative;
}
/* Cyan square bullet, blueprint-style */
.post-body ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 6px;
    height: 6px;
    background: var(--aos-cyan-deep);
    transform: rotate(45deg);
}
.post-body ol {
    counter-reset: post-counter;
}
.post-body ol li {
    counter-increment: post-counter;
}
.post-body ol li::before {
    content: counter(post-counter) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--aos-cyan-deep);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.9em;
}
.post-body a {
    color: var(--aos-cyan-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 140ms ease, text-decoration-thickness 140ms ease;
}
.post-body a:hover {
    color: var(--aos-graphite);
    text-decoration-thickness: 2px;
}
.post-body code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    background: var(--aos-concrete-warm);
    border: 1px solid var(--aos-line);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    color: var(--aos-graphite);
}
.post-body blockquote {
    border-left: 3px solid var(--aos-cyan-deep);
    padding: var(--space-2) 0 var(--space-2) var(--space-5);
    color: var(--aos-graphite-lo);
    font-style: italic;
    margin-left: 0;
}
.post-body strong { font-weight: 700; color: var(--aos-graphite); }
.post-body em { font-style: italic; }
.post-body hr {
    border: 0;
    border-top: 1px solid var(--aos-line);
    margin: var(--space-10) 0;
}

/* Post footer (next-up + share) */
.post-footer {
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--aos-line);
}
.post-footer__cta {
    background: var(--aos-concrete-warm);
    border: 1px solid var(--aos-line);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
}
.post-footer__cta h3 { margin-bottom: var(--space-3); }
.post-footer__cta p { color: var(--aos-graphite-lo); margin-bottom: var(--space-5); }

/* ============================================================
   FLOATING TOC — auto-built from page h2s, sticky on the right,
   highlights the active section via IntersectionObserver.
   Hidden below 1200px (where the screen is too narrow).
   ============================================================ */
.floating-toc {
    display: none;
}
@media (min-width: 1200px) {
    .floating-toc {
        display: block;
        position: fixed;
        top: 50%;
        right: var(--space-6);
        transform: translateY(-50%);
        z-index: 50;
        max-width: 220px;
        max-height: 70vh;
        overflow-y: auto;
        padding: var(--space-3) 0;
    }
}
.floating-toc__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--aos-muted);
    margin-bottom: var(--space-3);
    padding-left: var(--space-3);
}
.floating-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--aos-line);
}
.floating-toc__list li { margin: 0; padding: 0; }
.floating-toc__link {
    display: block;
    padding: 0.4rem var(--space-3);
    color: var(--aos-muted);
    text-decoration: none;
    font-size: 0.85rem;
    line-height: 1.35;
    border-left: 2px solid transparent;
    margin-left: -1px;
    transition: color 140ms ease, border-color 140ms ease;
}
.floating-toc__link:hover { color: var(--aos-graphite); border-left-color: var(--aos-cyan); }
.floating-toc__link.is-active {
    color: var(--aos-graphite);
    border-left-color: var(--aos-cyan);
    font-weight: 600;
}
/* On dark feature sections, the TOC sits over content — make it readable on both */
.floating-toc__link { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(4px); }

/* Identification / trademark disclaimer — competitor-comparison pages */
.legal-disclaimer {
    border-top: 1px solid var(--aos-line);
    background: var(--aos-concrete-warm);
}
.legal-disclaimer .container {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}
.legal-disclaimer p {
    margin: 0;
    max-width: 920px;
    color: var(--aos-muted);
    font-size: 0.8rem;
    line-height: 1.6;
}