/* ==========================================================================
   Vornin — Public Site
   Abyssal Intelligence palette · Plus Jakarta Sans + Inter
   Source of truth: vornin_brand_system.md (April 2026 working draft)
   ========================================================================== */

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

@property --glow-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes glow-spin { to { --glow-angle: 360deg; } }
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
@keyframes reveal-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

:root {
    /* === Depth === */
    --bg:        #0A0F24;
    --surface:   #151B33;
    --card:      #212B45;
    --card-hi:   #2A3554;
    --border:    rgba(46,58,89,0.70);
    --border-soft: rgba(46,58,89,0.40);

    /* === Accent === */
    --teal:       #00BFFF;
    --teal-hover: #33CCFF;
    --teal-dim:   rgba(0,191,255,0.07);
    --teal-tint:  rgba(0,191,255,0.12);
    --ice:        #4D94FF;

    /* === Ink === */
    --ink:   #FFFFFF;
    --ink-2: #B0B8C4;
    --ink-3: rgba(176,184,196,0.75);

    /* === Status (UI semantics — never marketing copy) === */
    --red:    #DB7884;
    --orange: #C98B3F;
    --yellow: #C2A13A;
    --green:  #4CAD7E;
    --red-dim:    rgba(219,120,132,0.15);
    --orange-dim: rgba(201,139,63,0.15);
    --yellow-dim: rgba(194,161,58,0.15);
    --green-dim:  rgba(76,173,126,0.15);
    --red-border: rgba(219,120,132,0.30);

    /* === Teal opacity tier (canonical opacities for hover-glow, focus rings,
       background tints, hairline borders). Edit here, the whole site picks up. === */
    --teal-05: rgba(0,191,255,0.05);
    --teal-10: rgba(0,191,255,0.10);
    --teal-20: rgba(0,191,255,0.20);
    --teal-25: rgba(0,191,255,0.25);
    --teal-30: rgba(0,191,255,0.30);
    --teal-35: rgba(0,191,255,0.35);
    --teal-40: rgba(0,191,255,0.40);

    /* === Background-color opacity tier (translucent overlays on hero, drawer,
       sticky surfaces). --bg solid stays #0A0F24. === */
    --bg-50: rgba(10,15,36,0.50);
    --bg-92: rgba(10,15,36,0.92);

    /* === Deep shadow primitive — repeated card-lift / drawer-shadow base. === */
    --shadow-deep: rgba(0,0,0,0.70);

    /* === Radius === */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 20px;

    /* === Type === */
    --font-display: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono:    ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, monospace;
}

/* =========================================================================
   Base
   ========================================================================= */

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink-2);
    line-height: 1.6;
    font-size: 1rem;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-image:
        radial-gradient(ellipse 70% 50% at 18% 0%, var(--teal-05) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 92% 100%, rgba(77,148,255,0.04) 0%, transparent 60%);
    background-attachment: fixed;
}

::selection { background: var(--teal); color: var(--bg); }

a {
    color: var(--teal);
    text-decoration: none;
    transition: color 150ms ease;
}
a:hover { color: var(--teal-hover); }

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

.skip-link {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden; z-index: 9999;
}
.skip-link:focus {
    position: fixed; left: 12px; top: 12px;
    width: auto; height: auto; padding: 10px 14px;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--teal);
    border-radius: var(--r-xs);
    font-weight: 600; text-decoration: none;
}

.container { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: 880px; margin: 0 auto; padding: 0 28px; }

/* =========================================================================
   Typography
   ========================================================================= */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

h1 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.03em;
}
h1 em { font-style: normal; color: var(--teal); }

h2 {
    font-size: clamp(2rem, 4.5vw, 2.75rem);
    line-height: 1.1;
}
h2 em { font-style: normal; color: var(--teal); }
h2 em.em-underline {
    font-style: normal;
    color: var(--ink);
    background-image: linear-gradient(to right, var(--teal) 0%, var(--teal-35) 100%);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 2px;
    padding-bottom: 4px;
}

h3 {
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
h3 em { font-style: normal; color: var(--teal); }

h4 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0;
}

.h1-dark { color: var(--bg); }
.h2-dark { color: var(--bg); }
.h3-dark { color: var(--bg); }

.h2-gradient {
    background: linear-gradient(to right, #00BFFF 0%, #7DDDFF 30%, #B0E6FF 50%, #7DDDFF 70%, #4D94FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.h2-gradient-right {
    background: linear-gradient(to right, #00BFFF 0%, #7DDDFF 35%, #B0E6FF 60%, #7DDDFF 80%, #4D94FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.eyebrow {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--teal);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.eyebrow::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 0 4px rgba(0,191,255,0.15);
    animation: pulse 2s infinite;
}
.eyebrow.no-rule::before { display: none; }

.lede {
    font-size: 1.125rem;
    color: var(--ink-2);
    line-height: 1.55;
    max-width: 640px;
}

.mono { font-family: var(--font-mono); letter-spacing: -0.005em; }
.dim { color: var(--ink-3); }

p { color: var(--ink-2); margin: 0; }

strong { color: var(--ink); font-weight: 600; }
em { font-style: normal; color: var(--teal); }

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--surface);
    color: var(--teal);
    padding: 1px 6px;
    border-radius: var(--r-xs);
    border: 1px solid var(--border-soft);
}
pre {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 16px 18px;
    overflow-x: auto;
    font-size: 0.85rem;
    color: var(--ink-2);
    font-family: var(--font-mono);
}
pre code { background: transparent; border: none; padding: 0; color: inherit; }

/* =========================================================================
   Brand lockup (logo + wordmark)
   Per brand_system §8 — symbol 40px, top-aligned, text margin-top 8px.
   We use a single small symbol (existing logo file) at 26px in nav for compact pill.
   ========================================================================= */

.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}
.nav-brand img {
    height: 26px;
    width: auto;
    filter: drop-shadow(0 0 8px var(--teal-35));
}
.nav-brand .dot { color: var(--teal); }
.nav-brand:hover { color: var(--ink); }

/* Lockup logo (full word + glyph SVG) */
.nav-brand img.brand-lockup { height: 24px; transition: height 0.22s ease; }
.nav-brand img.brand-lockup-footer { height: 30px; }

.brand-tagline {
    display: block;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: 4px;
}

/* =========================================================================
   Navigation — floating pill
   ========================================================================= */

.nav {
    position: sticky;
    top: 16px;
    z-index: 100;
    padding: 0 16px;
    margin-top: 16px;
}
.nav-inner {
    max-width: 1180px;
    margin: 0 auto;
    background: var(--bg-92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 8px 14px 8px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 12px 40px -16px var(--shadow-deep);
}
.nav-links {
    display: flex;
    gap: 4px;
    margin-left: 14px;
    margin-right: auto;
    flex-wrap: nowrap;
}
.nav-links a {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink-2);
    padding: 7px 11px;
    border-radius: var(--r-xs);
    transition: color 150ms ease, background 150ms ease;
    white-space: nowrap;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active {
    color: var(--ink);
    background: var(--teal-dim);
}
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-actions .btn-text {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink);
    padding: 7px 10px;
    border-radius: var(--r-xs);
    transition: color 150ms ease;
}
.nav-actions .btn-text:hover { color: var(--teal); }

.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--ink);
    border-radius: var(--r-xs);
    padding: 6px 8px;
    cursor: pointer;
}
.nav-mobile {
    display: none;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin: 8px 16px 0;
    padding: 6px;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
    color: var(--ink);
    padding: 11px 14px;
    border-radius: var(--r-xs);
    font-size: 0.95rem;
    font-weight: 500;
}
.nav-mobile a:hover { background: var(--teal-dim); color: var(--teal); }

@media (max-width: 1080px) {
    .nav-links a { padding: 6px 8px; font-size: 0.75rem; }
}
@media (max-width: 980px) {
    .nav-links, .nav-actions { display: none; }
    .nav-toggle { display: inline-flex; margin-left: auto; }
}

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

.btn {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    background: transparent;
    padding: 12px 22px;
    border-radius: var(--r-xs);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    line-height: 1;
    transition: transform 0.15s ease, color 0.15s ease, background 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    isolation: isolate;
    white-space: nowrap;
}

.btn-arrow::after {
    content: '→';
    margin-left: 2px;
    transition: transform 0.2s ease;
}
.btn-arrow:hover::after { transform: translateX(3px); }

.btn-sm { font-size: 0.8125rem; padding: 8px 14px; }
.btn-lg { font-size: 1.0625rem; padding: 14px 26px; }

/* Primary — solid teal + conic glow ring */
.btn-primary {
    color: var(--bg);
    background: transparent;
}
.btn-primary::before {
    content: '';
    position: absolute;
    inset: -1.5px;
    border-radius: 5px;
    z-index: -1;
    background: conic-gradient(from var(--glow-angle),
        rgba(0,0,0,0) 70%,
        rgba(255,255,255,0.95) 85%,
        rgba(255,255,255,0.4) 92%,
        rgba(0,0,0,0) 96%);
    animation: glow-spin 3s linear infinite;
}
.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--r-xs);
    z-index: -1;
    background: var(--teal);
    transition: background 0.15s ease;
}
.btn-primary:hover {
    transform: translateY(-1px);
    color: var(--bg);
    filter: drop-shadow(0 0 12px rgba(0,191,255,0.5));
}
.btn-primary:hover::after { background: var(--teal-hover); }

/* Ghost — teal-tinted, teal text + border */
.btn-ghost {
    color: var(--teal);
    background: var(--teal-dim);
    border: 1px solid var(--teal-35);
    padding: 11px 21px;
    font-weight: 500;
}
.btn-ghost.btn-sm { padding: 7px 13px; }
.btn-ghost.btn-lg { padding: 13px 25px; }
.btn-ghost:hover {
    color: var(--teal-hover);
    border-color: rgba(0,191,255,0.80);
    box-shadow: 0 0 16px var(--teal-25), 0 0 4px rgba(0,191,255,0.15);
    transform: translateY(-1px);
}

/* Outline — neutral border, used as alt ghost on tier cards */
.btn-outline {
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--border);
    padding: 11px 21px;
    font-weight: 500;
}
.btn-outline:hover {
    color: var(--teal);
    border-color: var(--teal);
    transform: translateY(-1px);
}

/* Navbar small CTA */
.btn-cta {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bg);
    padding: 7px 15px;
    border-radius: 5px;
    background: transparent;
    isolation: isolate;
    position: relative;
}
.btn-cta::before {
    content: '';
    position: absolute;
    inset: -1.5px;
    border-radius: 6px;
    z-index: -1;
    background: conic-gradient(from var(--glow-angle),
        rgba(0,0,0,0) 70%,
        rgba(255,255,255,0.85) 85%,
        rgba(255,255,255,0.3) 92%,
        rgba(0,0,0,0) 96%);
    animation: glow-spin 3.5s linear infinite;
}
.btn-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 5px;
    z-index: -1;
    background: var(--teal);
    transition: background 0.15s ease;
}
.btn-cta:hover { transform: translateY(-1px); color: var(--bg); filter: drop-shadow(0 0 8px var(--teal-40)); }
.btn-cta:hover::after { background: var(--teal-hover); }

/* =========================================================================
   Hero
   ========================================================================= */

.hero {
    position: relative;
    padding: 96px 0 80px;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 70% 30%, var(--teal-10) 0%, transparent 60%),
        radial-gradient(ellipse 80% 60% at 20% 80%, rgba(77,148,255,0.06) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.hero-grid-bg {
    position: absolute;
    inset: 0;
    background-image: url("/img/blacktrianglegrid20.svg");
    background-repeat: repeat;
    background-size: 1200px 1200px;
    filter: invert(1);
    opacity: 0.08;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, #000 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, #000 0%, transparent 80%);
    pointer-events: none;
    z-index: 0;
}

.hero-inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
}
@media (max-width: 980px) {
    .hero-inner { grid-template-columns: 1fr; gap: 40px; }
    .hero { padding: 56px 0 64px; }
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin: 0 0 24px;
}
.hero-title em { color: var(--teal); font-style: normal; }

.hero-tagline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 22px;
}
.hero-tagline::before {
    content: '';
    width: 28px; height: 1px;
    background: var(--teal);
}

.hero-sub {
    font-size: 1.125rem;
    color: var(--ink-2);
    line-height: 1.55;
    max-width: 600px;
    margin-bottom: 32px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.hero-assurances {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    color: var(--ink-3);
    font-size: 0.85rem;
}
@media (max-width: 520px) {
    .hero-assurances { gap: 8px 14px; }
}
.hero-assurances .check {
    color: var(--teal);
    font-weight: 700;
    margin-right: 6px;
}

/* Hero panel — used on Index for live scan-feed widget */
.hero-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: 0 30px 60px -30px var(--shadow-deep);
}
.hero-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-50);
}
.hero-panel-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 0 3px var(--teal-25);
    animation: pulse 1.5s infinite;
}
.hero-panel-label {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--teal);
}
.hero-panel-meta {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-3);
}
.hero-panel-rows { padding: 4px 0; }
.hero-panel-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 14px;
    padding: 11px 18px;
    align-items: center;
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.85rem;
}
.hero-panel-row:last-child { border-bottom: none; }
.hero-panel-row .t {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-3);
}
.hero-panel-row .msg { color: var(--ink); }
.hero-panel-row .msg code {
    font-size: 0.78rem;
    background: var(--card);
    color: var(--teal);
}
.sev {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--r-xs);
    white-space: nowrap;
}
.sev.ok { background: var(--green-dim); color: var(--green); }
.sev.crit { background: var(--red-dim); color: var(--red); }
.sev.med { background: var(--orange-dim); color: var(--orange); }
.sev.info { background: var(--teal-dim); color: var(--teal); }
.hero-panel-foot {
    padding: 11px 18px;
    border-top: 1px solid var(--border);
    background: var(--bg-50);
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-3);
}
.hero-panel-foot .pulse {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--teal);
}

/* =========================================================================
   Sections
   ========================================================================= */

.section { padding: 100px 0; position: relative; }
.section-sm { padding: 56px 0; }
.section-light {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.section-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 56px;
    align-items: end;
}
.section-head.centered {
    display: block;
    text-align: left;
    max-width: 720px;
}
.section-head.centered .eyebrow { justify-content: flex-start; }
.section-head.centered .lede { margin: 16px 0 0; }
@media (max-width: 820px) {
    .section { padding: 64px 0; }
    .section-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 36px; }
}

/* =========================================================================
   Cards / Specimens (reusable card grid)
   ========================================================================= */

.specimens {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.specimen {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 24px;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.specimen:hover {
    border-color: var(--teal-40);
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -20px var(--teal-20);
}
.specimen-num {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 4px;
}
.specimen-num .n { color: var(--teal); }
.specimen-num .tag {
    background: var(--teal-dim);
    color: var(--teal);
    padding: 3px 8px;
    border-radius: var(--r-lg);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
}
.specimen h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.01em;
}
.specimen p {
    font-size: 0.95rem;
    color: var(--ink-2);
    line-height: 1.55;
    margin: 0;
}
.specimen-detects {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
    font-size: 0.8rem;
    color: var(--ink-3);
}
.specimen-detects strong {
    display: block;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 6px;
}

/* =========================================================================
   Rundown — 4-up KPI strip
   ========================================================================= */

.rundown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.rundown-cell {
    padding: 28px 24px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rundown-cell:last-child { border-right: none; }
.rundown-index {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.rundown-index .ord { color: var(--teal); }
.rundown-value {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.03em;
}
.rundown-value em { font-style: normal; color: var(--teal); }
.rundown-label {
    font-size: 0.85rem;
    color: var(--ink-2);
    line-height: 1.5;
}
@media (max-width: 820px) {
    .rundown { grid-template-columns: repeat(2, 1fr); }
    .rundown-cell { border-right: none; border-bottom: 1px solid var(--border); }
    .rundown-cell:nth-child(odd) { border-right: 1px solid var(--border); }
}
@media (max-width: 520px) {
    .rundown { grid-template-columns: 1fr; }
    .rundown-cell:nth-child(odd) { border-right: none; }
}

/* =========================================================================
   Field report (comparison table)
   ========================================================================= */

.field-report {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--card);
}
.field-report-head, .field-report-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 12px;
    padding: 14px 20px;
    align-items: center;
}
.field-report.field-report-4col .field-report-head,
.field-report.field-report-4col .field-report-row {
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
}
.field-report-head {
    background: var(--bg-50);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.field-report-head .us { color: var(--teal); }
.field-report-row {
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.92rem;
    color: var(--ink-2);
}
.field-report-row:last-child { border-bottom: none; }
.field-report-row .us { color: var(--ink); font-weight: 600; }
.mark-yes { color: var(--green); }
.mark-no { color: var(--red); }
.mark-partial { color: var(--orange); }
@media (max-width: 720px) {
    .field-report-head, .field-report-row {
        grid-template-columns: 1fr 1fr;
        font-size: 0.85rem;
    }
    .field-report-head > div:nth-child(n+3),
    .field-report-row > div:nth-child(n+3) { display: none; }
}

/* =========================================================================
   Seals — compliance framework grid
   ========================================================================= */

.seals {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
}
.seal {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 22px 14px;
    text-align: center;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.seal:hover { border-color: var(--teal-40); transform: translateY(-2px); }
.seal-ring {
    width: 56px; height: 56px;
    border: 1px solid var(--teal);
    border-radius: 50%;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--teal);
    letter-spacing: 0.04em;
    background: var(--teal-dim);
}
.seal-name {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
}
.seal-sub {
    font-size: 0.72rem;
    color: var(--ink-3);
    letter-spacing: 0.04em;
}

/* =========================================================================
   Pull quote
   ========================================================================= */

.pullquote {
    text-align: center;
    padding: 56px 0;
}
.pullquote-body {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 22px;
}
.pullquote-body em { color: var(--teal); font-style: normal; }
.pullquote-attrib {
    font-size: 0.85rem;
    color: var(--ink-3);
    letter-spacing: 0.04em;
}
.pullquote-attrib strong { color: var(--ink); }

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

.tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.tiers-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) {
    .tiers, .tiers-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .tiers, .tiers-4 { grid-template-columns: 1fr; }
}

.tier {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.tier:hover { border-color: var(--teal-30); transform: translateY(-2px); }
.tier.featured {
    border-color: var(--teal);
    background: linear-gradient(180deg, var(--card) 0%, rgba(0,191,255,0.04) 100%);
    box-shadow: 0 30px 60px -30px var(--teal-20);
}
.tier-num {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.tier-num .n { color: var(--teal); }
.tier.featured .tier-num span:last-child { color: var(--teal); }
.tier-name {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
}
.tier-desc { color: var(--ink-2); font-size: 0.92rem; }
.tier-price {
    margin: 8px 0 4px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.tier-price .amt {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
}
.tier-price .per {
    font-size: 0.85rem;
    color: var(--ink-3);
}
.tier-features {
    list-style: none;
    padding: 0;
    margin: 12px 0 16px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex-grow: 1;
}
.tier-features li {
    font-size: 0.92rem;
    color: var(--ink-2);
    padding-left: 22px;
    position: relative;
}
.tier-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--teal);
    font-weight: 700;
}
.tier-features li.out {
    color: var(--ink-3);
    text-decoration: line-through;
}
.tier-features li.out::before { content: '–'; color: var(--ink-3); }
.tier-features li strong { color: var(--ink); }

/* =========================================================================
   Dispatch CTA (full-bleed bottom CTA section)
   ========================================================================= */

.dispatch {
    padding: 68px 0;
    text-align: center;
    background:
        radial-gradient(ellipse 60% 80% at 50% 50%, var(--teal-10) 0%, transparent 70%),
        var(--bg);
    border-top: 1px solid var(--border);
}
@media (max-width: 820px) {
    .dispatch { padding: 40px 0; }
}
.dispatch-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 28px;
}
.dispatch h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    margin: 0 0 18px;
    letter-spacing: -0.02em;
}
.dispatch p {
    font-size: 1.0625rem;
    color: var(--ink-2);
    margin-bottom: 28px;
}
.dispatch .hero-actions { justify-content: center; }
.dispatch .hero-assurances { justify-content: center; }

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

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.faq-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}
.faq-q {
    width: 100%;
    background: transparent;
    color: var(--ink);
    border: none;
    padding: 18px 22px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.faq-q:hover { color: var(--teal); }
.faq-q::after {
    content: '+';
    font-size: 1.25rem;
    color: var(--teal);
    transition: transform 0.2s ease;
}
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a {
    padding: 0 22px 18px;
    color: var(--ink-2);
    font-size: 0.95rem;
    line-height: 1.65;
    display: none;
}
.faq-item.open .faq-a { display: block; }
.faq-a a { color: var(--teal); border-bottom: 1px solid var(--teal-30); }
.faq-cat {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--teal);
    margin: 32px 0 12px;
}
.faq-cat:first-child { margin-top: 0; }

/* <details>/<summary> variant — drop-in for native disclosure */
details.faq-item { padding: 0; }
details.faq-item summary {
    list-style: none;
    cursor: pointer;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
    content: '+';
    font-size: 1.25rem;
    color: var(--teal);
    transition: transform 0.2s ease;
}
details.faq-item[open] summary::after { transform: rotate(45deg); }
details.faq-item summary:hover { color: var(--teal); }
details.faq-item p,
details.faq-item > div {
    padding: 0 22px 18px;
    color: var(--ink-2);
    font-size: 0.95rem;
    line-height: 1.65;
}
details.faq-item a { color: var(--teal); border-bottom: 1px solid var(--teal-30); }

.faq-block { margin-bottom: 36px; }
.faq-block:last-child { margin-bottom: 0; }
.faq-block details.faq-item { margin-bottom: 10px; }
.faq-block details.faq-item:last-child { margin-bottom: 0; }
.faq-category {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.faq-category .count { color: var(--ink-3); font-weight: 500; }

/* =========================================================================
   Control-map table — regulation measure → scan coverage → evidence artifact.
   Generic primitive; used on /solutions/{nis2,dora,iso-27001}. Scrolls
   horizontally on narrow viewports rather than reflowing.
   ========================================================================= */

.control-map-wrap {
    margin: 48px 0 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
}
.control-map {
    width: 100%;
    min-width: 660px;
    border-collapse: collapse;
    font-size: 0.9375rem;
}
.control-map thead th {
    text-align: left;
    font-family: var(--font-display);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--teal);
    font-weight: 700;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--teal-25);
    white-space: nowrap;
}
.control-map tbody td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    color: var(--ink-2);
    line-height: 1.55;
    vertical-align: top;
}
.control-map tbody tr:last-child td { border-bottom: 0; }
.control-map tbody tr:hover td { background: var(--teal-05); }
.control-map td:first-child { color: var(--ink); font-weight: 600; }
.control-map .cm-ref {
    display: block;
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    color: var(--teal);
    font-weight: 600;
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}
.control-map code {
    font-size: 0.8125rem;
    color: var(--ink);
    background: var(--teal-tint);
    border: 1px solid var(--teal-25);
    border-radius: 5px;
    padding: 1px 6px;
    white-space: nowrap;
}
@media (max-width: 768px) {
    .control-map { font-size: 0.875rem; }
    .control-map thead th { padding: 12px 14px 10px; }
    .control-map tbody td { padding: 13px 14px; }
}

/* =========================================================================
   Forms (Contact, etc.)
   ========================================================================= */

.form-group { margin-bottom: 18px; }
.form-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.form-input, .form-textarea, .form-select {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 11px 14px;
    border-radius: var(--r-xs);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px var(--teal-tint);
}
.form-textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.form-help { font-size: 0.8rem; color: var(--ink-3); margin-top: 6px; }

/* =========================================================================
   Articles — listing + reader
   ========================================================================= */

.article-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}
.article-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.article-card:hover { border-color: var(--teal-40); transform: translateY(-2px); }
.article-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    line-height: 1.3;
}
.article-card a { color: inherit; }
.article-card a:hover h3 { color: var(--teal); }
.article-card p {
    font-size: 0.92rem;
    color: var(--ink-2);
    margin: 0;
    line-height: 1.55;
}
.article-meta {
    display: flex;
    gap: 16px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: auto;
}
.article-meta .cat { color: var(--teal); }

/* Articles — listing controls + cards (dedicated, mobile-first) */
.articles-controls {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}
.articles-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: border-color 0.2s ease;
}
.articles-search:focus-within {
    border-color: var(--teal-40);
}
.articles-search-icon {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    color: var(--ink-3);
    pointer-events: none;
}
.articles-search input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    padding: 14px 14px 14px 44px;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.4;
    width: 100%;
    min-height: 48px;
}
.articles-search input::placeholder {
    color: var(--ink-3);
}
.articles-tags {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
.articles-tags::-webkit-scrollbar { height: 6px; }
.articles-tags::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 3px; }
.articles-tags .chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    color: var(--ink-2);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
    white-space: nowrap;
}
.articles-tags .chip:hover {
    color: var(--ink);
    border-color: var(--teal-40);
}
.articles-tags .chip.is-active {
    color: var(--teal);
    border-color: var(--teal-40);
    background: var(--teal-tint);
}
@media (min-width: 820px) {
    .articles-controls {
        flex-direction: row;
        align-items: center;
        gap: 20px;
        margin-bottom: 40px;
    }
    .articles-search {
        flex: 0 0 360px;
    }
    .articles-tags {
        flex: 1 1 auto;
        flex-wrap: wrap;
        overflow-x: visible;
        padding-bottom: 0;
    }
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}
@media (max-width: 600px) {
    .articles-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
.articles-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 24px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.articles-card-banner {
    position: relative;
    margin: -24px -24px 6px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--surface);
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}
.articles-card-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.articles-card:hover .articles-card-banner img {
    transform: scale(1.03);
}
.articles-card-initial {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 9vw, 5.5rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1;
    letter-spacing: -0.04em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    user-select: none;
}
.articles-card-banner-0 { background: linear-gradient(135deg, #00BFFF 0%, #4D94FF 100%); }
.articles-card-banner-1 { background: linear-gradient(135deg, #4D94FF 0%, #2A3554 100%); }
.articles-card-banner-2 { background: linear-gradient(135deg, #33CCFF 0%, #00BFFF 60%, #2A3554 100%); }
.articles-card-banner-3 { background: linear-gradient(135deg, #2A3554 0%, #00BFFF 100%); }
.articles-card-banner-4 { background: linear-gradient(135deg, #151B33 0%, #4D94FF 100%); }
.articles-card-banner-5 { background: linear-gradient(135deg, #00BFFF 0%, #151B33 100%); }
.articles-card:hover {
    border-color: var(--teal-40);
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -20px var(--teal-20);
}
.articles-card-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
}
.articles-card-category {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--teal-tint);
    border: 1px solid var(--teal-40);
    color: var(--teal);
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1.3;
}
.articles-card-tag {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--teal-dim);
    color: var(--ink-2);
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1.3;
}
.articles-card-title {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    transition: color 0.15s ease;
}
.articles-card:hover .articles-card-title {
    color: var(--teal);
}
.articles-card-desc {
    margin: 0;
    color: var(--ink-2);
    font-size: 0.95rem;
    line-height: 1.55;
}
.articles-card-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
    color: var(--ink-3);
    font-family: var(--font-body);
    font-size: 0.78rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
}
.articles-card-author {
    color: var(--ink-2);
    font-weight: 500;
}
.articles-card-stamp {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.articles-card-dot {
    color: var(--ink-3);
}
@media (min-width: 600px) {
    .articles-card-title { font-size: 1.5rem; }
}

.articles-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--ink-2);
    background: var(--card);
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
}
.articles-empty p {
    margin: 0;
    font-size: 0.95rem;
}
.articles-empty-results {
    margin-top: 24px;
}

/* Long-form article body */
.article-body {
    max-width: 760px;
    margin: 0 auto;
    color: var(--ink-2);
    font-size: 1.0625rem;
    line-height: 1.75;
    /* As a grid item, default min-width:auto lets any wide child (the 540px
       comparison table, a long code line, an unbroken URL) stretch the column
       past its track and overflow the whole .article-layout — clipping the
       hero H1/breadcrumb and giving the page a horizontal scroll on mobile.
       min-width:0 confines that overflow to the child's own scroll container. */
    min-width: 0;
    overflow-wrap: break-word;
}
.article-body h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0 0 16px;
    color: var(--ink);
    font-weight: 600;
}
.article-body h2 {
    font-size: 1.65rem;
    margin: 56px 0 16px;
    color: var(--ink);
    font-weight: 600;
}
.article-body h3 {
    font-size: 1.25rem;
    margin: 36px 0 12px;
    color: var(--ink);
    font-weight: 600;
}
.article-body p { margin: 0 0 18px; color: var(--ink-2); }
.article-body strong { color: var(--ink); }
.article-body a { color: var(--teal); border-bottom: 1px solid var(--teal-30); }
.article-body a:hover { border-bottom-color: var(--teal); }
.article-body ul, .article-body ol { margin: 0 0 22px 22px; color: var(--ink-2); }
.article-body li { margin-bottom: 8px; }
.article-body blockquote {
    margin: 28px 0;
    padding: 18px 22px;
    border-left: 3px solid var(--teal);
    background: var(--surface);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    color: var(--ink);
    font-style: normal;
}
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    background: var(--surface);
    color: var(--teal);
}
.article-body pre {
    margin: 22px 0;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 0.85rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.article-body pre code { background: transparent; color: var(--ink); }
.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    margin: 22px 0;
}
.article-body hr {
    border: none;
    height: 1px;
    background: var(--border);
    margin: 40px 0;
}
.article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 0.95rem;
}
/* Horizontal-only dividers — lighter than a full grid, matches the card
   primitives. Vertical rules dropped; the scroll wrapper supplies the frame. */
.article-body th, .article-body td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.article-body thead th {
    background: var(--bg-50);
    color: var(--ink);
    font-weight: 600;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.article-body td { color: var(--ink-2); vertical-align: top; }
/* Row-header cell (first column, scope="row") — label weight, no header tint. */
.article-body tbody th {
    color: var(--ink);
    font-weight: 600;
    vertical-align: top;
}
.article-body tbody tr:last-child td,
.article-body tbody tr:last-child th { border-bottom: none; }

.article-header {
    text-align: center;
    margin-bottom: 48px;
}
.article-header .article-meta {
    justify-content: center;
    margin-bottom: 14px;
}

/* =========================================================================
   Article reader — modern long-form layout
   3-col on desktop (gutter ToC | body | side col), single col on mobile
   ========================================================================= */

.article-byline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    font-size: 0.85rem;
    color: var(--ink-3);
}
.article-byline a { color: var(--teal); }
.byline-text { color: var(--ink-2); font-size: 0.95rem; }
.article-byline .byline-title { color: var(--ink-3); font-weight: 400; }
/* Byline publish-date is mobile-only; desktop keeps the date in the body meta-row. */
.byline-date { display: none; }

/* Article hero — H1 + breadcrumb + byline anchored to the body column,
   using the same .article-layout grid as the body so columns align. */
.hero-article .article-hero-body { min-width: 0; }
.hero-article .hero-title { font-size: clamp(2rem, 4.4vw, 3.25rem); margin-bottom: 18px; }
.hero-article .hero-sub { max-width: none; margin-bottom: 20px; }

/* Desktop: hero text + image left-align to the brand wordmark / ToC edge and span
   the full ToC+body width — one wide hero with the image sitting on top. */
@media (min-width: 1101px) {
    .hero-article .article-hero-body { grid-column: 1 / 3; }
    .hero-article .hero-sub { max-width: 760px; }
    .hero-article .article-hero-image { margin: 24px 0 0; }
    /* Bottom padding lets the masked image fade complete into the dark hero
       before the lighter body panel begins. */
    .hero-article.u-hero-pad-tight { padding-bottom: 32px; }
}

.article-breadcrumb {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
}
.article-breadcrumb > a,
.article-breadcrumb .crumb-sep { flex: 0 0 auto; }
.article-breadcrumb a {
    color: var(--ink-3);
    border: none;
    transition: color 120ms ease;
}
.article-breadcrumb a:hover { color: var(--teal); }
.article-breadcrumb .crumb-sep { color: var(--ink-3); opacity: 0.6; }
.article-breadcrumb .crumb-current {
    color: var(--ink-2);
    flex: 0 1 auto;
    min-width: 0;
    max-width: 60ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Meta row at top of article body: reading-time eyebrow ←→ published date + share. */
.article-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.article-published { font-size: 0.78rem; color: var(--ink-3); }
.article-reading-eyebrow {
    color: var(--ice);
    gap: 7px;
    margin: 0;
}
.article-reading-eyebrow .reading-icon { color: var(--ice); flex-shrink: 0; }

/* Sticky reading-progress bar — sits at top of viewport when article scrolls. */
.article-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px; width: 0%;
    background: linear-gradient(90deg, var(--teal), var(--ice));
    z-index: 60;
    transition: width 80ms linear;
    pointer-events: none;
}

.article-section { position: relative; }
.article-layout {
    display: grid;
    /* Right gutter is flexible (1fr) not a fixed 220px: the toc-col stays
       edge-aligned to .container (nav alignment) while the body holds its
       ~760px reading width down to the 1100px breakpoint instead of being
       squeezed by a symmetric fixed gutter the container is too narrow for. */
    grid-template-columns: 220px minmax(0, 760px) 1fr;
    gap: 56px;
    justify-content: start;
}

/* Override the global .article-body centering — the grid column handles it now. */
.article-section .article-body { max-width: none; margin: 0; }
.article-section .article-body h2,
.article-section .article-body h3 { scroll-margin-top: 96px; }

/* Deep-linked sections + tiles on Features etc. clear the floating nav pill. */
.section[id],
.specimen[id] { scroll-margin-top: 96px; }
@media (max-width: 768px) {
    .section[id],
    .specimen[id] { scroll-margin-top: 72px; }
}

/* First paragraph after the H1/hero — slightly larger lead line. */
.article-body > p:first-of-type { font-size: 1.125rem; color: var(--ink); }


/* Hero image */
.article-hero-image {
    margin: 0 0 36px;
    border-radius: var(--r-md);
    overflow: hidden;
    /* Crop to a viewport-bounded band so the article content (ToC headline + first
       body lines) stays above the fold on a standard desktop, and so heroes that
       weren't pre-cropped at source still render as a clean banner. Height scales
       with the window (vh) and is capped, guaranteeing the fold on any screen.
       object-fit: cover (on the img) center-crops top+bottom of the 1.91:1 master. */
    height: clamp(200px, 34vh, 340px);
    /* Soft-fade the bottom edge so the image dissolves into the page instead of
       butting against the body section panel with a hard framed edge. The mask
       fades to transparent (no background-colour assumption) — universal across
       every article hero. Tune the 80% stop to change how much fades. */
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}
.article-hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; border: none; border-radius: 0; margin: 0; }

/* Sticky ToC */
.article-toc-col { position: relative; }
.article-toc {
    position: sticky;
    top: 96px;
    border-left: 1px solid var(--border);
    padding-left: 18px;
    font-size: 0.85rem;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
/* Non-heading label: keeping it a <p> avoids an h1 -> h4 heading-order skip
   (the nav already carries aria-label="On this page" for AT). */
.article-toc .article-toc-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    /* Ice = brand secondary/decorative accent; Teal stays reserved for the
       interactive ToC links. Subtle on a small uppercase label. */
    color: var(--ice);
    margin: 0 0 12px;
}
.article-toc ol { list-style: none; margin: 0; padding: 0; }
.article-toc li { margin: 0; }
.article-toc li.toc-l3 { padding-left: 14px; font-size: 0.8rem; }
.article-toc a {
    display: block;
    padding: 6px 10px 6px 12px;
    margin-left: -19px;
    color: var(--ink-2);
    border: none; border-bottom: none;
    border-left: 2px solid transparent;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
    line-height: 1.35;
}
.article-toc a:hover { color: var(--teal); }
.article-toc a.active {
    color: var(--ink);
    border-left-color: var(--teal);
    background: rgba(0,191,255,0.08);
}
.article-toc a.active:hover { color: var(--ink); }

/* Mobile-only ToC variant rendered inside hero; flipped on at <=1100px below. */
.article-toc-mobile { display: none; }

/* "Show all" toggle for the truncated mobile ToC (only visible when CSS caps the list). */
.article-toc-show-all {
    display: none;
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    min-height: 44px;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: var(--r-sm);
    color: var(--teal);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.article-toc-show-all:hover {
    color: var(--teal-hover);
    border-color: var(--teal-30);
    background: var(--teal-05);
}

/* Right gutter — empty placeholder, just preserves grid centering of body. */
.article-side-col { position: relative; }

/* Sidebar sticky column — ToC + share scroll-follow the page together. The
   wrapper carries the stickiness; the inner ToC is static inside it (its own
   max-height/overflow handles long lists, trimmed to leave room for share). */
.article-side-sticky { position: sticky; top: 96px; }
.article-side-sticky .article-toc-sidebar {
    position: static;
    top: auto;
    max-height: calc(100vh - 220px);
}
.article-side-share {
    margin-top: 18px;
    padding-left: 18px;
    border-left: 1px solid var(--border);
}
.article-side-share-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    /* Ice = brand decorative accent, matching the ToC "On this page" label. */
    color: var(--ice);
    margin: 0 0 10px;
}

/* Inline horizontal share strip — icon row under the sidebar ToC (and after the
   ToC in the mobile stacked column). */
.article-share-inline {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}
.article-share-inline .share-btn-sm {
    width: 24px; height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
    padding: 0;
}
.article-share-inline .share-btn-sm:hover {
    color: var(--teal);
    border-color: var(--teal-40);
    background: var(--teal-dim);
}
.article-share-inline .share-toast {
    font-size: 0.65rem;
    color: var(--teal);
    background: var(--teal-dim);
    border: 1px solid var(--teal-30);
    padding: 3px 8px;
    border-radius: var(--r-xs);
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 180ms ease, transform 180ms ease;
    pointer-events: none;
    margin-left: 4px;
}
.article-share-inline .share-toast.is-visible { opacity: 1; transform: translateY(0); }

/* Bottom author card — sits at end of article body, before "All articles" link. */
.article-author-bottom {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 56px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
}
/* When the author card follows the "Filed under" row, tighten the gap so it
   echoes the filed-under block's own top inset (separator→label) instead of the
   full 56px standalone margin. */
.article-filed + .article-author-bottom { margin-top: 28px; }
.article-author-bottom .author-meta { display: flex; flex-direction: column; gap: 2px; }
.article-author-bottom .author-name { color: var(--ink); font-weight: 600; font-size: 0.95rem; }
.article-author-bottom .author-name a { color: var(--ink); border: none; }
.article-author-bottom .author-name a:hover { color: var(--teal); }
.article-author-bottom .author-role { color: var(--ink-3); font-size: 0.78rem; }
.article-author-bottom .author-bio { color: var(--ink-2); font-size: 0.85rem; line-height: 1.5; margin: 6px 0 0; }

.article-freshness {
    margin-top: 24px;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 0.85rem;
}
.article-freshness .freshness-line { color: var(--ink-2); }
.article-freshness .freshness-changelog { margin-top: 10px; }
.article-freshness .freshness-changelog summary {
    cursor: pointer;
    color: var(--teal);
    font-weight: 500;
    font-size: 0.82rem;
    user-select: none;
}
.article-freshness .freshness-changelog summary:hover { color: var(--teal-hover); }
.article-freshness .freshness-changelog ul {
    margin: 8px 0 0;
    padding-left: 18px;
    color: var(--ink-3);
    font-size: 0.82rem;
    line-height: 1.55;
}
.article-freshness .freshness-changelog li { margin: 4px 0; }
.article-freshness .freshness-changelog strong { color: var(--ink-2); font-weight: 600; }

/* Key Takeaways + generic callouts */
.article-callout {
    margin: 32px 0;
    padding: 22px 26px;
    border: 1px solid var(--teal-30);
    background: var(--teal-dim);
    border-radius: var(--r-md);
    border-left: 3px solid var(--teal);
}
.article-callout h3 {
    margin: 0 0 14px;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--teal);
    font-weight: 700;
}
.article-callout ul { margin: 0 0 0 20px; color: var(--ink); }
.article-callout li { margin-bottom: 8px; }
.article-callout li:last-child { margin-bottom: 0; }
.callout-info { border-color: var(--teal-30); background: var(--teal-dim); border-left-color: var(--teal); }
.callout-warn { border-color: var(--orange); background: var(--orange-dim); border-left-color: var(--orange); }
.callout-warn h3 { color: var(--orange); }
.callout-tip  { border-color: var(--green); background: var(--green-dim); border-left-color: var(--green); }
.callout-tip  h3 { color: var(--green); }

/* CTA panel — emitted from `:::cta` custom container. Headline + button.
   Anchor, not <button> — crawlable for SEO + counts in internal link graph. */
.article-cta {
    margin: 48px 0;
    padding: 40px 32px;
    border-radius: var(--r-md);
    background: linear-gradient(135deg, var(--surface), var(--card));
    border: 1px solid var(--teal-25);
    box-shadow: 0 16px 40px var(--shadow-deep);
    text-align: center;
}
.article-cta-headline {
    margin: 0 0 24px;
    font-size: 1.35rem;
    line-height: 1.4;
    color: var(--ink);
    font-weight: 600;
}
.article-cta-headline:last-child { margin-bottom: 0; }
/* Scoped under .article-cta so we outrun `.article-body a { color: var(--teal) }`
   which would otherwise paint the button text teal on the teal pill — invisible. */
.article-cta .article-cta-btn {
    /* min tap target meets Apple HIG 44 / Material 48 */
    min-height: 48px;
    padding: 14px 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--bg);
    border-bottom: none;
}
.article-cta .article-cta-btn:hover {
    color: var(--bg);
    border-bottom: none;
}
@media (max-width: 640px) {
    .article-cta { padding: 28px 20px; margin: 36px 0; }
    .article-cta-headline { font-size: 1.1rem; margin-bottom: 20px; }
    .article-cta-btn { width: 100%; }
}

/* Trust microcopy line that follows a closing CTA (e.g. "Read-only access · …
   · EU-hosted."). Ice + a step smaller than body so it reads as a quiet
   reassurance caption under the CTA. Harmless where no such line exists. The
   `em` selector is required: the line is markdown italic, and the global
   `em { color: var(--teal) }` would otherwise paint the text teal. */
.article-body .article-cta + p,
.article-body .article-cta + p em {
    color: var(--ice);
}
.article-body .article-cta + p { font-size: 0.85rem; }

/* "Filed under" tag row — subtle neutral chips that wrap cleanly on any width,
   replacing the old uppercase-teal eyebrow + " · "-joined string that broke on
   mobile. Label muted; chips are quiet ink-3 pills on the surface tone. */
.article-filed {
    /* Own the separator + spacing locally (no shared u-mt-60-sep) so the block
       sits ~56px below the FAQ/body above and ~56px above the author card below
       — harmonized both ways. Label stacks over the chips, flush-left, so the
       chips align to the body-column edge on every width. */
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
.article-filed-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.article-filed-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.article-filed-tag {
    font-size: 0.72rem;
    color: var(--ink-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 11px;
    line-height: 1.4;
    white-space: nowrap;
}

/* Pull-quote — emitted from `:::quote` (experience) and `:::cite` (data source).
   Semantic <blockquote> + <footer> + <cite> for native quotation microformat. */
.article-pullquote {
    margin: 36px 0;
    padding: 6px 0 6px 24px;
    border-left: 3px solid var(--teal);
    background: none;
    color: var(--ink);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.55;
}
.article-pullquote p {
    margin: 0 0 10px;
    color: var(--ink);
}
.article-pullquote p:last-of-type { margin-bottom: 12px; }
.article-pullquote footer {
    font-style: normal;
    font-size: 0.9rem;
    color: var(--ink-3);
    margin-top: 6px;
}
.article-pullquote cite {
    font-style: normal;
    font-weight: 600;
    color: var(--ink-2);
}
.article-pullquote a {
    color: var(--ink-3);
    border-bottom: 1px solid var(--border);
}
.article-pullquote a:hover {
    color: var(--teal);
    border-bottom-color: var(--teal);
}
@media (max-width: 640px) {
    .article-pullquote { font-size: 1.02rem; padding-left: 18px; margin: 28px 0; }
}

/* Figures (standalone images promoted to <figure> with caption) */
.article-figure {
    margin: 28px 0;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface);
}
.article-figure img {
    width: 100%;
    display: block;
    border: none;
    border-radius: 0;
    margin: 0;
}
.article-figure figcaption {
    padding: 12px 16px;
    font-size: 0.85rem;
    color: var(--ink-3);
    background: var(--surface);
    border-top: 1px solid var(--border);
    text-align: center;
}

/* Tables — contained card wrap that scrolls horizontally only when the table
   is genuinely wide (comparison, 3+ cols). Simple 2-col tables fit and never
   force a side-scroll. CSS-only edge shadows cue scrollability without JS:
   the `local`-attached cover gradients sit flush at the ends and reveal the
   `scroll`-attached shadow gradients only when there's content off-screen. */
.article-table-scroll {
    overflow-x: auto;
    margin: 24px 0;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background:
        linear-gradient(to right, var(--surface) 30%, transparent) left center / 32px 100% no-repeat local,
        linear-gradient(to left, var(--surface) 30%, transparent) right center / 32px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.45), transparent) left center / 16px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.45), transparent) right center / 16px 100% no-repeat scroll;
    background-color: var(--surface);
    -webkit-overflow-scrolling: touch;
}
.article-table-scroll table { margin: 0; min-width: 0; background: transparent; }
.article-table-scroll table.comparison-table { min-width: 560px; }

.comparison-table { width: 100%; }
/* Let long column titles wrap onto multiple lines instead of forcing the
   column wide (which skewed widths + forced a horizontal scroll on the
   narrow article-body tables). vertical-align keeps wrapped headers flush
   with single-line ones; line-height tightens the multi-line title block. */
.comparison-table thead th { white-space: normal; vertical-align: top; line-height: 1.3; }
.comparison-table td { vertical-align: top; }
.comparison-table tr:nth-child(even) td,
.comparison-table tr:nth-child(even) th { background: var(--bg-50); }
.comparison-table thead th:first-child { background: transparent; color: var(--ink-3); }
/* Tint last column teal ONLY when it actually represents Vornin
   (enhancer adds .has-vornin-col on those tables). Otherwise neutral —
   we don't want to visually endorse a competing offering. */
.comparison-table.has-vornin-col th:last-child {
    background: var(--teal-tint);
    color: var(--teal);
    border-bottom-color: var(--teal-30);
}
.comparison-table.has-vornin-col td:last-child {
    background: var(--teal-05);
    border-left: 1px solid var(--teal-30);
    color: var(--ink);
}
/* /compare — vendor-archetype matrix.
   Reuses the pricing.css compare system wholesale (panel, marks, row hover,
   mobile chip-list) so it matches the pricing table exactly; only the bits
   that genuinely differ are overridden here: six vendor columns instead of
   four, a half-disc "partial" mark, price-level cells, and teal emphasis on
   the final Vornin column. Teal = brand attention, never a health signal.
   Requires pricing.css to be loaded on the page. */
.compare-matrix .pricing-bar,
.compare-matrix .pricing-compare-header,
.compare-matrix .pricing-compare-row {
    grid-template-columns: minmax(0, 2.4fr) repeat(6, minmax(0, 1fr));
}
@media (max-width: 1024px) {
    .compare-matrix .pricing-bar,
    .compare-matrix .pricing-compare-header,
    .compare-matrix .pricing-compare-row {
        grid-template-columns: minmax(0, 2fr) repeat(6, minmax(0, 1fr));
    }
}
/* Partial / add-on / varies: half-filled disc. Deliberately NOT a .pricing-mark,
   so it stays visible inside the mobile chip (reads "Vendor · half-disc"). */
.compare-matrix .pricing-mark-partial,
.compare-legend .pricing-mark-partial {
    display: inline-block; width: 13px; height: 13px; border-radius: 50%;
    border: 1.5px solid var(--ink-2);
    background: linear-gradient(90deg, var(--ink-2) 0 50%, transparent 50% 100%);
    vertical-align: middle;
}
/* Sub-category headers in ice, the second brand accent (teal carries the
   Vornin column and the included marks; ice gives the group dividers their
   own identity without competing for "action" attention). */
.compare-matrix .pricing-compare-group-title { color: var(--ice); }
/* Price level reads as data, not an include/exclude mark. */
.compare-matrix .pricing-price-level {
    color: var(--ink-2); font-weight: 600; font-size: 0.9375rem;
    font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}
/* Final column is Vornin: brand-emphasis tint, desktop grid only.
   Scoped above the 768px breakpoint so it never overrides the mobile chips. */
@media (min-width: 769px) {
    .compare-matrix .pricing-compare-header > :last-child,
    .compare-matrix .pricing-compare-row > :last-child {
        background: var(--teal-05);
        border-radius: 8px;
    }
    .compare-matrix .pricing-compare-header > :last-child .pricing-bar-name { color: var(--teal); }
    .compare-matrix .pricing-compare-row > :last-child .pricing-price-level { color: var(--ink); }
}
/* Legend + methodology note under the matrix. */
.compare-legend {
    display: flex; flex-wrap: wrap; gap: 12px 24px;
    margin: 0 0 20px; padding: 0; list-style: none;
    font-size: 0.8125rem; color: var(--ink-2);
}
.compare-legend li { display: flex; align-items: center; gap: 8px; }
.compare-note { margin-top: 20px; font-size: 0.8125rem; color: var(--ink-3); max-width: 72ch; line-height: 1.6; }
/* Dispatch fine print: smaller + dimmer so it reads as a footnote under the CTA,
   not a second line competing with the lead paragraph. Scoped to /compare. */
.compare-dispatch .data-trust { font-size: 0.6875rem; letter-spacing: 0.01em; opacity: 0.85; }

/* FAQ accordion (server-rendered <details>) */
.article-faq { margin-top: 24px; }
.article-faq-item {
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    margin-bottom: 12px;
    background: var(--surface);
    transition: border-color 150ms ease;
}
.article-faq-item[open] { border-color: var(--teal-30); }
.article-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.article-faq-item summary::-webkit-details-marker { display: none; }
.article-faq-item summary::after {
    content: "+";
    font-size: 1.4rem;
    line-height: 1;
    color: var(--teal);
    flex-shrink: 0;
    transition: transform 200ms ease;
}
.article-faq-item[open] summary::after { content: "−"; }
.article-faq-item summary h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--ink);
    font-weight: 600;
}
.article-faq-item > div { padding: 0 20px 18px; color: var(--ink-2); }
.article-faq-item > div p:last-child { margin-bottom: 0; }
.article-faq-item { scroll-margin-top: 96px; }

/* Related articles strip */
.article-related {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, 1fr);
}
/* Keep-reading cards reuse .articles-card; meta is a single author · date line
   (no reading time, no author title, no category chip). */
.article-related-meta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.article-related-tags { margin-top: 4px; }
.article-related .articles-card-desc { font-size: 0.85rem; }

/* Tablet/mobile — collapse 3-col into single, swap sidebar ToC for hero-embedded one,
   show byline avatar. */
@media (max-width: 1100px) {
    .article-layout {
        grid-template-columns: 1fr;
        gap: 0;
        max-width: 760px;
        margin: 0 auto;
    }
    .article-toc-sidebar { display: none; }
    .article-toc-mobile {
        display: block;
        position: static;
        max-height: none;
        margin: 18px 0 24px;
        /* Flush-left with the body column; full column width. */
        padding-left: 0;
        border-left: none;
    }
    .article-side-col { display: none; }
    /* Stacked: ToC + share sit in the aside above the body content; the sticky
       wrapper goes inline, share aligns flush-left with the body text under the
       mobile ToC (hairline separator), with breathing room before the content. */
    .article-side-sticky { position: static; }
    .article-side-share {
        margin-top: 18px;
        margin-bottom: 28px;
        padding: 16px 0 0 0;
        border-left: none;
        border-top: 1px solid var(--border);
    }
    .article-author-bottom { flex-wrap: wrap; }
    .article-related { grid-template-columns: 1fr; }
}

/* Phone — web.dev-style hero reshuffle, tighter rhythm, larger tap targets,
   truncated ToC with show-all toggle, anchor scroll offset for floating nav. */
@media (max-width: 768px) {
    /* Hero density + paint cost */
    .hero.u-hero-pad-tight { padding: 48px 0 20px; }
    /* Article hero starts lower so the breadcrumb clears the floating nav pill
       instead of hugging the wordmark. */
    .hero-article.u-hero-pad-tight { padding-top: 76px; }
    .article-section.u-pt-40 { padding-top: 20px; }
    .hero-article .hero-grid-bg { display: none; }
    .hero-article .hero-title { overflow-wrap: break-word; }

    /* Mobile header order is DOM-driven: the hero block holds breadcrumb → read-time
       → H1 → sub → byline → image; the stacked aside then holds ToC → share; content
       comes last. No flex reorder needed. */
    /* Top gap separates the image from the byline above (the kicker that used to
       supply this spacing is now hidden on mobile); bottom gap before content.
       Negative side margins let the image break ~14px past the text column into
       the container's 28px padding — slightly wider than the rest, still inset
       from the screen edge (not full-bleed), corners kept. */
    .article-hero-image { margin: 18px -14px 24px; }

    /* Byline becomes "Author · date" — drop the author title; name + date share one
       size, a step smaller, so they read as a single meta line. */
    .article-byline .byline-title { display: none; }
    .article-byline .byline-text { font-size: 0.85rem; }
    .byline-date { display: inline; }

    /* Meta-row is empty on mobile (read-time → kicker, date → byline,
       share → ToC column), so hide it entirely. */
    .article-meta-row { display: none; }

    /* Anchor offset for the floating nav pill. */
    .article-section .article-body h2,
    .article-section .article-body h3,
    .article-faq-item { scroll-margin-top: 72px; }

    /* Typography rhythm */
    .article-body h2 { font-size: 1.45rem; margin: 36px 0 12px; }
    .article-body h3 { font-size: 1.15rem; margin: 28px 0 10px; }
    .article-body table { font-size: 0.88rem; }
    .article-body th, .article-body td { padding: 10px 12px; }
    .article-body hr { margin: 28px 0; }
    .article-body blockquote { padding: 14px 18px; margin: 22px 0; }

    /* Callouts (Key Takeaways etc.) — on narrow screens the default list indent
       (card padding + ul margin + UA padding-inline-start) pushed bullet text
       ~86px in, collapsing it into a tall thin column. Trim the card padding and
       pull the bullets left so text reclaims the left side. */
    .article-callout { padding: 18px 16px; }
    .article-callout ul { margin-left: 0; padding-left: 18px; }

    /* Tap targets — share buttons */
    .article-share-inline { gap: 8px; }
    .article-share-inline .share-btn-sm { width: 40px; height: 40px; }
    .article-share-inline .share-btn-sm svg { width: 16px; height: 16px; }

    /* Tap targets — TOC + first-6 cap with show-all reveal. Zero left padding so
       link text aligns flush with the body column edge; full-width tap row. */
    .article-toc-mobile a {
        min-height: 40px;
        /* Reset the desktop sidebar's negative pull (base .article-toc a uses
           margin-left:-19px to overlap the bordered rail) — without this the
           flush-left mobile links sit ~19px off-screen and clip the first letters. */
        margin-left: 0;
        padding: 10px 0;
        display: flex;
        align-items: center;
    }
    .article-toc-mobile li:nth-child(n+7) { display: none; }
    .article-toc-mobile.is-expanded li:nth-child(n+7) { display: list-item; }
    .article-toc-show-all { display: block; }

    /* Hit areas via negative margin so visual position is unchanged. */
    .article-breadcrumb a {
        display: inline-block;
        padding: 6px 8px;
        margin: -6px -8px;
        border-radius: 4px;
    }
    .article-byline a {
        padding: 4px 6px;
        margin: -4px -6px;
        border-radius: 4px;
    }

    /* Footer density */
    .u-mt-60-sep { margin-top: 40px; padding-top: 20px; }
    .article-filed { margin-top: 32px; padding-top: 22px; }
    .article-author-bottom { margin-top: 32px; padding: 16px; }
    .article-filed + .article-author-bottom { margin-top: 24px; }
    .article-freshness { margin-top: 24px; }
    .u-mt-40 { margin-top: 28px; }
}

/* =========================================================================
   Docs page (long-form documentation)
   ========================================================================= */

.docs-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 56px;
}
.docs-toc {
    position: sticky;
    top: 96px;
    align-self: start;
    border-left: 1px solid var(--border);
    padding-left: 18px;
    font-size: 0.85rem;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
.docs-toc a {
    display: block;
    color: var(--ink-2);
    padding: 6px 0;
    border-bottom: none;
}
.docs-toc a:hover, .docs-toc a.active { color: var(--teal); }
.docs-toc h4 {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--teal);
    margin: 18px 0 6px;
}
.docs-toc h4:first-child { margin-top: 0; }

.docs-body {
    max-width: 820px;
    color: var(--ink-2);
    font-size: 1rem;
    line-height: 1.7;
}
.docs-body h1, .docs-body h2, .docs-body h3, .docs-body h4 { color: var(--ink); }
.docs-body h1 { font-size: 2.5rem; margin: 0 0 18px; font-weight: 600; }
.docs-body h2 { font-size: 1.6rem; margin: 56px 0 14px; font-weight: 600; }
.docs-body h3 { font-size: 1.2rem; margin: 32px 0 10px; font-weight: 600; }
.docs-body h4 { font-size: 1rem; margin: 24px 0 8px; font-weight: 600; }
.docs-body p { margin: 0 0 16px; }
.docs-body ul, .docs-body ol { margin: 0 0 18px 22px; }
.docs-body li { margin-bottom: 6px; }
.docs-body strong { color: var(--ink); }
.docs-body a { color: var(--teal); }
.docs-body code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--surface);
    color: var(--teal);
}
.docs-body pre {
    margin: 18px 0;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--ink-2);
    font-size: 0.85rem;
}
.docs-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    font-size: 0.92rem;
}
.docs-body th, .docs-body td {
    border: 1px solid var(--border);
    padding: 9px 12px;
    text-align: left;
}
.docs-body th { background: var(--bg-50); color: var(--ink); font-weight: 600; }
.docs-body td { color: var(--ink-2); }

@media (max-width: 980px) {
    .docs-layout { grid-template-columns: 1fr; gap: 24px; }
    .docs-toc { position: static; max-height: none; border-left: none; padding-left: 0; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
}

/* =========================================================================
   Legal pages — long-form text container
   ========================================================================= */

.legal {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 28px 80px;
    color: var(--ink-2);
    font-size: 1rem;
    line-height: 1.7;
}
.legal .eyebrow { margin-bottom: 12px; }
.legal h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 12px;
}
.legal h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ink);
    margin: 40px 0 12px;
    letter-spacing: -0.01em;
}
.legal h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
    margin: 28px 0 10px;
}
.legal p { margin: 0 0 14px; color: var(--ink-2); }
.legal strong { color: var(--ink); }
.legal a { color: var(--teal); }
.legal a:hover { color: var(--teal-hover); }
.legal ul, .legal ol { margin: 0 0 16px 22px; }
.legal li { margin-bottom: 8px; color: var(--ink-2); }
.legal code {
    background: var(--card);
    color: var(--teal);
    padding: 1px 6px;
    border-radius: var(--r-xs);
    border: 1px solid var(--border-soft);
    font-family: var(--font-mono);
    font-size: 0.9em;
}
.legal table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 0.95rem; }
.legal th, .legal td { padding: 10px 12px; border: 1px solid var(--border); text-align: left; color: var(--ink-2); }
.legal th { background: var(--bg-50); color: var(--ink); font-weight: 600; }
.legal .updated {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 32px;
}

/* =========================================================================
   Trust / compliance badge grid
   ========================================================================= */

.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.trust-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.trust-item h4 { color: var(--ink); font-size: 1.05rem; font-weight: 600; }
.trust-item p { font-size: 0.92rem; color: var(--ink-2); }
.trust-status {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--r-lg);
    align-self: flex-start;
}
.trust-status.live { background: var(--green-dim); color: var(--green); }
.trust-status.scheduled { background: var(--orange-dim); color: var(--orange); }
.trust-status.roadmap { background: var(--teal-dim); color: var(--teal); }

/* =========================================================================
   Use-case page modules
   ========================================================================= */

.usecase-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 56px;
    align-items: center;
}
@media (max-width: 980px) { .usecase-grid { grid-template-columns: 1fr; gap: 40px; } }

.kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin: 28px 0;
}
.kpi {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 18px 20px;
}
.kpi-value {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    color: var(--teal);
    line-height: 1;
    letter-spacing: -0.02em;
}
.kpi-label {
    font-size: 0.8rem;
    color: var(--ink-3);
    margin-top: 6px;
    letter-spacing: 0.04em;
}

/* =========================================================================
   Footer
   ========================================================================= */

.footer {
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: 64px 0 28px;
    color: var(--ink-2);
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; margin-bottom: 28px; } }
@media (max-width: 520px) {
    .footer { padding: 40px 0 20px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px 18px; margin-bottom: 24px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-desc { font-size: 0.8rem; max-width: none; }
    .footer h3 { margin-bottom: 8px; font-size: 0.65rem; }
    .footer a { font-size: 0.85rem; padding: 3px 0; }
    .footer-bottom { padding-top: 16px; gap: 6px 14px; font-size: 0.72rem; justify-content: flex-start; }
}

.footer-brand .nav-brand { margin-bottom: 12px; }
.footer-desc {
    font-size: 0.85rem;
    color: var(--ink-3);
    line-height: 1.6;
    max-width: 360px;
}
.footer-tagline {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--teal);
    margin: 12px 0;
}
.footer h3 {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 16px;
}
.footer a {
    display: block;
    color: var(--ink-2);
    font-size: 0.92rem;
    padding: 5px 0;
    transition: color 0.15s ease;
}
.footer a:hover { color: var(--teal); }
.footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--ink-3);
}
.footer-bottom .colophon { color: var(--ink-3); }

/* =========================================================================
   Reveal-on-scroll
   ========================================================================= */

.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================================
   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;
    }
    .btn-primary::before, .btn-cta::before { animation: none; background: rgba(255,255,255,0.4); }
    .hero-panel-dot, .eyebrow::before { animation: none; }
}

/* =========================================================================
   Scrollbar (webkit)
   ========================================================================= */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
    background: var(--card);
    border-radius: 10px;
    border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--card-hi); }

/* =========================================================================
   Utilities
   ========================================================================= */

.text-center { text-align: center; }
.text-teal { color: var(--teal); }
.text-ink { color: var(--ink); }
.text-ink2 { color: var(--ink-2); }
.text-ink3 { color: var(--ink-3); }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mt-8 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-8 { margin-bottom: 32px; }
.hide-mobile { }
@media (max-width: 820px) { .hide-mobile { display: none !important; } }

/* =========================================================================
   Utility classes (`u-*`) — extracted from inline `style=` attrs to satisfy
   nonce-strict CSP. CSP nonces only cover `<script>` / `<style>` blocks, not
   `style="..."` attributes; with no `'unsafe-inline'` in style-src, every
   inline style attr is blocked. Keep this section as the dumping ground for
   one-off layout tweaks so we don't bloat semantic classes.
   ========================================================================= */
.u-hero-pad         { padding: 80px 0 60px; }
.u-hero-pad-tight   { padding: 80px 0 40px; }
.u-hero-pad-wide    { padding: 120px 0 100px; }
.u-pt-40            { padding-top: 40px; }
.u-pt-60            { padding-top: 60px; }
.u-pad-24           { padding: 24px; }
.u-pad-center-60    { text-align: center; padding: 60px 0; }
.u-pad-center-tight { text-align: center; padding: 40px 12px; }
.u-mt-24            { margin-top: 24px; }
.u-mt-40            { margin-top: 40px; }
.u-mt-60            { margin-top: 60px; }
.u-mt-80            { margin-top: 80px; }
.u-mt-24-sm         { margin-top: 24px; font-size: 0.85rem; }
.u-mt-24-eyebrow    { margin-top: 24px; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.u-mt-28-sm         { margin-top: 28px; font-size: 0.85rem; }
.u-mt-60-sep        { margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--border); }
.u-m-24-0           { margin: 24px 0; }
.u-mx-auto-mb-24    { margin: 0 auto 24px; }
.u-mx-auto-mb-36    { margin: 0 auto 36px; }
.u-mb-20            { margin-bottom: 20px; }
.u-eyebrow-block    { display: inline-flex; margin-bottom: 20px; }
.u-eyebrow-center   { display: inline-flex; justify-content: center; margin-bottom: 20px; }
.u-inline-flex-center { display: inline-flex; justify-content: center; }
.u-inline-block-meta  { display: inline-block; margin-left: 16px; opacity: 0.7; font-size: 14px; }
.u-justify-center   { justify-content: center; }
.u-grid-full        { grid-column: 1 / -1; }
.u-w-full           { width: 100%; }
.u-mw-640           { max-width: 640px; }
.u-mw-800           { max-width: 800px; }
.u-mw-880           { max-width: 880px; }
.u-mw-900           { max-width: 900px; }
.u-mw-960           { max-width: 960px; }
.u-min-h-screen     { min-height: 100vh; }
.u-section-min      { min-height: 100vh; padding-top: 60px; }
.u-text-center      { text-align: center; }
.u-cta-teal         { color: var(--teal); font-weight: 600; }
.u-card-link        { display: block; text-decoration: none; color: inherit; }
.u-bullet-dot       { width: 6px; height: 6px; }
.u-print-h1         { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; letter-spacing: -0.02em; margin-bottom: 8px; color: var(--ink); }
.u-print-meta       { font-size: 0.85rem; color: var(--ink-3); margin-bottom: 36px; }

/* =========================================================================
   Mega-menu nav — floating pill + fold-out panels
   2026-05-08 · homepage rebuild — appended, no existing tokens modified
   ========================================================================= */

/* ── Float bar ── */
.float-bar {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    /* Edge-aligned to the .container grid (max-width 1240, 28px gutter):
       brand left edge == content left edge, auth right edge == content right
       edge. .float-brand + .float-auth carry flex:1 so the pill stays centred
       with equal slack on both sides. */
    width: min(1240px, 100%);
    padding-left: 28px;
    padding-right: 28px;
    display: flex;
    align-items: center;
    z-index: 200;
    pointer-events: none;
    gap: 0;
    transition: background 0.25s ease, top 0.25s ease, border-radius 0.25s ease, padding 0.25s ease, border-color 0.25s ease;
}
.float-bar > * { pointer-events: auto; }

.float-brand {
    flex: 1;
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* ── Nav pill wrapper (the glassy pill container) ── */
.nav-pill-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: var(--bg-92);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    height: 42px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Nav pill list ── */
ul.nav-pill {
    display: flex;
    align-items: center;
    list-style: none;
    height: 42px;
    padding: 0 4px;
    margin: 0;
}
ul.nav-pill li { position: relative; }

.nav-trigger, .nav-pill-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 42px;
    padding: 0 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink-2);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    transition: color 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0.1px;
}
.nav-trigger:hover, .nav-pill-link:hover { color: var(--ink); }
.nav-trigger[aria-expanded="true"] { color: var(--ink); }

.nav-trigger .chevron { transition: transform 0.18s ease; flex-shrink: 0; }
.nav-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }

/* ── Nav expand (auth slides into pill when scrolled) ── */
.nav-expand {
    display: flex;
    align-items: center;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    transition: max-width 0.32s ease, opacity 0.22s ease;
}
.nav-expand-inner {
    display: flex;
    align-items: center;
    padding-right: 6px;
}
.nav-sep {
    width: 1px;
    height: 18px;
    background: var(--border);
    margin: 0 4px;
    flex-shrink: 0;
}
.nav-expand-signin {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    padding: 0 12px;
    height: 42px;
    display: flex;
    align-items: center;
    transition: color 0.15s ease;
    white-space: nowrap;
}
.nav-expand-signin:hover { color: var(--ink); }

/* ── Float auth (outside pill, fades on scroll) ── */
.float-auth {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.nav-signin {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    transition: color 0.15s ease;
    white-space: nowrap;
}
.nav-signin:hover { color: var(--teal); }

/* Scrolled state — outside brand + auth fade, both slide into pill */
.float-brand {
    transition: opacity 0.22s ease, transform 0.22s ease;
}
body.scrolled .float-brand {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
}
body.scrolled .float-auth {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
}
body.scrolled .nav-expand,
body.scrolled .nav-expand-brand {
    opacity: 1;
}
body.scrolled .nav-expand { max-width: 280px; }
body.scrolled .nav-expand-brand { max-width: 120px; }

/* Brand slot inside pill (mirror of .nav-expand on the left) */
.nav-expand-brand {
    display: flex;
    align-items: center;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    padding-left: 0;
    text-decoration: none;
    transition: max-width 0.32s ease, opacity 0.22s ease;
}
body.scrolled .nav-expand-brand { padding-left: 12px; padding-right: 14px; }
.brand-lockup-pill { height: 18px; display: block; }

/* ── Fold panels ── */
.fold-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 280px;
    background: rgba(10,15,36,0.97);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 24px 64px -16px var(--shadow-deep), 0 0 0 1px rgba(0,191,255,0.06);
    z-index: 201;
    padding: 10px;
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
/* Override the [hidden] attribute so CSS transitions can run */
.fold-panel[hidden] { display: block; }
/* Open state — driven by .is-open class on the parent <li>, OR pure :hover/:focus-within fallback */
ul.nav-pill > li.is-open > .fold-panel,
ul.nav-pill > li:hover > .fold-panel,
ul.nav-pill > li:focus-within > .fold-panel {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
ul.nav-pill > li:hover > .nav-trigger,
ul.nav-pill > li:focus-within > .nav-trigger { color: var(--ink); }
ul.nav-pill > li:hover > .nav-trigger .chevron,
ul.nav-pill > li:focus-within > .nav-trigger .chevron { transform: rotate(180deg); }

#fold-platform  { min-width: 320px; }
#fold-solutions { min-width: 540px; }
#fold-resources { min-width: 300px; }
#fold-company   { min-width: 280px; }

.fold-group-label {
    font-family: var(--font-body);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 8px 12px 3px;
}
.fold-group-label:first-child { padding-top: 4px; }

.fold-row {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    gap: 10px;
    align-items: start;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.1s ease;
    color: inherit;
}
.fold-row:hover { background: var(--teal-dim); }
.fold-icon {
    display: flex;
    align-items: flex-start;
    padding-top: 1px;
    color: var(--ink-3);
    font-size: 0.75rem;
    width: 20px;
    justify-content: center;
}
.fold-text { display: flex; flex-direction: column; gap: 2px; }
.fold-title { color: var(--ink); font-weight: 500; font-size: 0.875rem; line-height: 1.3; }
.fold-desc  { color: var(--ink-2); font-size: 0.75rem; line-height: 1.5; }

.fold-tag {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    margin-top: 4px;
    align-self: flex-start;
}
.fold-tag.new  { background: var(--teal-dim); color: var(--teal); }
.fold-tag.beta { background: var(--yellow-dim); color: var(--yellow); }
.fold-tag.soon { background: rgba(176,184,196,0.12); color: var(--ink-3); }

/* Two-column solutions fold-out */
.fold-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4px; }
.fold-col-label {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 4px 10px 3px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 2px;
}
.fold-divider {
    height: 1px;
    background: var(--border-soft);
    margin: 6px 10px;
}

/* ── Mobile burger ── */
.nav-burger {
    display: none;
    pointer-events: auto;
    background: var(--bg-92);
    border: 1px solid var(--border);
    border-radius: var(--r-xs);
    color: var(--ink);
    padding: 10px 11px;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin-left: auto;
    align-items: center;
    justify-content: center;
}
.burger-close { display: none; }
.nav-burger[aria-expanded="true"] .burger-open  { display: none; }
.nav-burger[aria-expanded="true"] .burger-close { display: block; }

/* ── Mobile drawer ── */
.mobile-drawer {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 198;
    overflow-y: auto;
    padding: 80px 16px 48px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mobile-drawer[hidden] { display: none !important; }
body.drawer-open { overflow: hidden; }

.drawer-trigger {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 13px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
    margin-bottom: 3px;
}
.drawer-trigger .chevron { color: var(--ink-3); transition: transform 0.18s ease; }
.drawer-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.drawer-links {
    background: rgba(21,27,51,0.6);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    margin-bottom: 3px;
    padding: 6px 4px;
}
.drawer-links[hidden] { display: none !important; }

.drawer-divider {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 8px 12px 3px;
}

.drawer-link {
    display: block;
    color: var(--ink-2);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 9px 12px;
    text-decoration: none;
    transition: color 0.1s ease, background 0.1s ease;
    border-radius: var(--r-xs);
}
.drawer-link:hover { color: var(--ink); background: var(--teal-dim); }

.drawer-link-direct {
    display: block;
    color: var(--ink-2);
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 13px 16px;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    margin-bottom: 3px;
    transition: color 0.12s ease;
}
.drawer-link-direct:hover { color: var(--teal); }

.drawer-actions {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 2px;
}
.drawer-actions .btn-primary,
.drawer-actions .btn-ghost { justify-content: center; }
.drawer-signin {
    display: block;
    text-align: center;
    padding: 13px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink-2);
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    transition: color 0.12s ease;
}
.drawer-signin:hover { color: var(--ink); }

/* Responsive breakpoints */
@media (min-width: 1025px) {
    .nav-burger { display: none !important; }
}
@media (max-width: 1024px) {
    .nav-pill-wrap, .float-auth { display: none; }
    .nav-burger { display: inline-flex; }
    .float-brand { flex: 0 0 auto; }

    /* Scrolled: snap full-width solid abyssal bar to top */
    body.scrolled .float-bar {
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        top: 0;
        left: 0;
        width: 100%;
        transform: none;
        border-radius: 0;
        padding: 0 20px;
    }
    /* Cancel desktop logo fade — keep it visible on mobile */
    body.scrolled .float-brand {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }
    /* Slightly smaller logo when bar compacts */
    body.scrolled .float-brand img.brand-lockup {
        height: 19px;
    }
    /* Burger dissolves into the solid bar — drop the pill styling */
    body.scrolled .nav-burger {
        background: transparent;
        border: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* =========================================================================
   Hero — Centred layout (new Index.cshtml)
   ========================================================================= */

.hero-centred {
    padding: 120px 0 0;
    text-align: center;
}
.hero-centred::before {
    background:
        radial-gradient(ellipse 70% 80% at 50% 10%, var(--teal-10) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 50% 0%, rgba(77,148,255,0.07) 0%, transparent 60%);
}
.hero-centred h1 {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
    font-weight: 700;
}
.hero-centred .hero-sub {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}
.hero-centred .hero-actions  { justify-content: center; }
.hero-centred .hero-assurances { justify-content: center; }

.data-trust {
    font-size: 0.75rem;
    color: var(--ink-3);
    line-height: 1.6;
    margin-top: 20px;
    letter-spacing: 0.1px;
}

/* =========================================================================
   Dashboard section — interactive mock
   ========================================================================= */

.dash-section {
    padding: 72px 20px 80px;
    margin-top: -1px;
    background: linear-gradient(to bottom,
        var(--bg) 0%,
        var(--bg) 30%,
        rgba(0,191,255,0.18) 75%,
        rgba(77,148,255,0.35) 100%
    );
}
.dash-eyebrow-wrap {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto 14px;
}
@media (max-width: 820px) {
    .dash-eyebrow-wrap { text-align: left; padding: 0 28px; }
}

.glow-wrap {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}
.glow-wrap::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 50%;
    background: radial-gradient(ellipse, var(--teal-tint) 0%, rgba(0,191,255,0.04) 55%, transparent 75%);
    filter: blur(56px);
    z-index: 0;
    pointer-events: none;
}
.glow-wrap::after {
    content: '';
    position: absolute;
    top: 20%;
    left: 65%;
    transform: translateX(-50%);
    width: 40%;
    height: 40%;
    background: radial-gradient(ellipse, rgba(77,148,255,0.10) 0%, transparent 70%);
    filter: blur(36px);
    z-index: 0;
    pointer-events: none;
}
.dash-frame {
    position: relative;
    z-index: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(0,191,255,0.08),
        0 32px 80px rgba(0,0,0,0.40),
        0 8px 24px rgba(0,0,0,0.25);
}
.dash-topbar {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    gap: 8px;
}
.dash-dot { width: 10px; height: 10px; border-radius: 50%; }
.dash-dot-red    { background: #E05252; }
.dash-dot-yellow { background: #D4B84A; }
.dash-dot-green  { background: #3DB88A; }
.dash-chrome-title {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--ink-3);
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0.3px;
}
.dash-body {
    display: grid;
    grid-template-columns: 180px 1fr;
    height: 530px;
}
.dash-sidebar {
    background: var(--card);
    border-right: 1px solid var(--border);
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}
.sidebar-group {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 8px 10px 3px;
    margin-top: 4px;
}
.sidebar-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    border-radius: var(--r-xs);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    transition: background 0.1s ease, color 0.1s ease;
}
.sidebar-item:hover { color: var(--ink); background: var(--teal-05); }
.sidebar-item.active { background: rgba(0,191,255,0.08); color: var(--ink); }
.sidebar-item.active .si-icon { color: var(--teal); }
.si-icon { font-size: 0.8125rem; width: 14px; text-align: center; flex-shrink: 0; color: var(--ink-3); }
.si-badge {
    margin-left: auto;
    background: var(--red-dim);
    color: var(--red);
    font-size: 0.5625rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
}
.sidebar-more-btn {
    font-size: 0.6875rem;
    color: var(--teal);
    background: transparent;
    border: 1px solid var(--teal-25);
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    margin: 6px 10px 0;
    font-family: var(--font-body);
    font-weight: 500;
    text-align: left;
    display: none;
}
.dash-main {
    padding: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--surface);
}
.dash-main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dash-mock-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0.1px;
}
.dash-meta { font-size: 0.6875rem; color: var(--ink-3); }
.dash-panel-lede {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ink-2);
    margin: 0;
}
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 14px;
}
.stat-label { font-size: 0.6875rem; color: var(--ink-3); font-weight: 500; margin-bottom: 6px; letter-spacing: 0.2px; }
.stat-value { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; color: var(--ink); line-height: 1; margin-bottom: 4px; }
.stat-value-critical { color: var(--red); }
.stat-delta { font-size: 0.6875rem; font-weight: 500; color: var(--ink-3); }
.stat-delta-up   { color: var(--red); }
.stat-delta-down { color: var(--green); }
.scan-table-wrap { background: var(--card); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; flex: 1; }
.scan-table-head {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    padding: 8px 14px;
    background: var(--bg-50);
    border-bottom: 1px solid var(--border);
}
.scan-table-head span { font-size: 0.6875rem; font-weight: 600; color: var(--ink-3); letter-spacing: 0.5px; text-transform: uppercase; }
.scan-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    padding: 9px 14px;
    border-bottom: 1px solid rgba(46,58,89,0.5);
    align-items: center;
}
.scan-row:last-child { border-bottom: none; }
.scan-name { font-size: 0.75rem; font-weight: 500; color: var(--ink); }
.scan-meta { font-size: 0.6875rem; color: var(--ink-3); }
.badge { display: inline-block; font-size: 0.6875rem; font-weight: 600; padding: 2px 7px; border-radius: 3px; }
.badge-critical { background: var(--red-dim);    color: var(--red); }
.badge-medium   { background: var(--orange-dim); color: var(--orange); }
.badge-low      { background: var(--green-dim);  color: var(--green); }
.scan-status { display: flex; align-items: center; gap: 5px; font-size: 0.6875rem; font-weight: 500; color: var(--green); }
.scan-status.scanning { color: var(--teal); }
.scan-status .status-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.dash-teal-line { height: 1px; background: linear-gradient(to right, transparent, var(--teal), transparent); opacity: 0.25; }

/* Tab panels inside .dash-main — one visible at a time */
.dash-panel { display: none; flex: 1; min-height: 0; flex-direction: column; gap: 14px; }
.dash-panel.is-active { display: flex; }
.sidebar-item { cursor: pointer; }

/* Teaser panels (non-Dashboard) — feature preview content */
.teaser-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    flex: 1;
    min-height: 0;
    align-items: stretch;
}
.teaser {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    min-height: 0;
}
.teaser-eyebrow {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--teal);
}
.teaser-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
    margin: 0;
}
.teaser-text {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0;
}
.teaser-cta {
    align-self: flex-start;
    margin-top: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--teal);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}
.teaser-cta:hover { border-bottom-color: var(--teal); }

/* Teaser visual — per-panel mini mock of the feature */
.teaser-visual {
    background: var(--bg-50);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}
.tv-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 4px;
    background: var(--card);
    border: 1px solid var(--border);
    font-size: 0.6875rem;
}
.tv-row-name { color: var(--ink); font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-row-meta { color: var(--ink-3); font-size: 0.6875rem; }
.tv-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    background: var(--teal-10);
    color: var(--teal);
    text-transform: uppercase;
    white-space: nowrap;
}
.tv-pill-green  { background: var(--green-dim);  color: var(--green); }
.tv-pill-red    { background: var(--red-dim);    color: var(--red); }
.tv-pill-orange { background: var(--orange-dim); color: var(--orange); }
.tv-pill-yellow { background: rgba(212,184,74,0.15); color: var(--yellow); }
.tv-pill-mute   { background: transparent;       color: var(--ink-3); border: 1px solid var(--border); }
.tv-bar-row {
    display: grid;
    grid-template-columns: 70px 1fr 28px;
    align-items: center;
    gap: 8px;
    font-size: 0.6875rem;
    color: var(--ink-2);
    padding: 2px 2px;
}
.tv-bar {
    height: 6px;
    background: rgba(46,58,89,0.5);
    border-radius: 3px;
    overflow: hidden;
}
.tv-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--teal);
}
.tv-bar-fill.is-red    { background: var(--red); }
.tv-bar-fill.is-orange { background: var(--orange); }
.tv-bar-fill.is-yellow { background: var(--yellow); }
.tv-bar-fill.is-green  { background: var(--green); }
.tv-bar-fill.w-18 { width: 18%; }
.tv-bar-fill.w-32 { width: 32%; }
.tv-bar-fill.w-45 { width: 45%; }
.tv-bar-fill.w-55 { width: 55%; }
.tv-bar-fill.w-62 { width: 62%; }
.tv-bar-fill.w-72 { width: 72%; }
.tv-bar-fill.w-78 { width: 78%; }
.tv-bar-fill.w-82 { width: 82%; }
.tv-bar-fill.w-87 { width: 87%; }
.tv-bar-fill.w-91 { width: 91%; }
.tv-bar-fill.w-95 { width: 95%; }
.tv-bar-count { font-weight: 600; color: var(--ink); text-align: right; font-size: 0.6875rem; }
.tv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.tv-tile {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 9px 11px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tv-tile-label { color: var(--ink-3); font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.tv-tile-value { color: var(--ink); font-weight: 700; font-size: 0.9375rem; font-family: var(--font-display); line-height: 1; }
.tv-tile-value-suffix { color: var(--ink-3); font-size: 0.625rem; font-weight: 500; font-family: var(--font-body); }
.tv-tile-value.is-red    { color: var(--red); }
.tv-tile-value.is-orange { color: var(--orange); }
.tv-tile-value.is-green  { color: var(--green); }
.tv-tile-value.is-teal   { color: var(--teal); }
.tv-status-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0;
}
.tv-status-dot.is-teal   { background: var(--teal); }
.tv-status-dot.is-orange { background: var(--orange); }
.tv-pdf {
    background: linear-gradient(135deg, rgba(0,191,255,0.10) 0%, rgba(77,148,255,0.10) 100%);
    border: 1px solid var(--teal-25);
    border-radius: 6px;
    padding: 18px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between;
    min-height: 0;
}
.tv-pdf-eyebrow { font-size: 0.5625rem; font-weight: 700; letter-spacing: 1.5px; color: var(--teal); text-transform: uppercase; }
.tv-pdf-title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; color: var(--ink); line-height: 1.25; margin: 0; }
.tv-pdf-meta-row { display: flex; flex-direction: column; gap: 3px; font-size: 0.625rem; color: var(--ink-3); }
.tv-pdf-meta-row strong { color: var(--ink-2); font-weight: 600; }
.tv-pdf-chain {
    margin-top: 4px;
    padding: 6px 8px;
    background: rgba(61,184,138,0.10);
    border: 1px solid rgba(61,184,138,0.20);
    border-radius: 4px;
    font-size: 0.5625rem;
    font-weight: 700;
    color: var(--green);
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.tv-plan {
    background: var(--card);
    border: 1px solid var(--teal-25);
    border-radius: 6px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tv-plan-name  { font-size: 0.6875rem; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.tv-plan-price { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; color: var(--ink); line-height: 1; }
.tv-plan-price-suffix { font-size: 0.625rem; color: var(--ink-3); font-weight: 500; font-family: var(--font-body); }
.tv-plan-tag   { align-self: flex-start; margin-top: 4px; }

@media (max-width: 1023px) {
    .dash-body { grid-template-columns: 160px 1fr; }
    .dash-section { padding: 56px 20px 60px; }
}
@media (max-width: 767px) {
    /* Mobile: sidebar becomes a horizontal scrolling chip strip above the panel */
    .dash-body {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 460px;
    }
    .dash-sidebar {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 10px 12px;
        gap: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .dash-sidebar::-webkit-scrollbar { display: none; }
    .sidebar-group { display: none; }
    .sidebar-rest { display: contents; }
    .sidebar-more-btn { display: none; }
    .sidebar-item {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 6px 12px;
        font-size: 0.75rem;
    }
    .si-badge { display: none; }
    .dash-main {
        -webkit-mask-image: none;
        mask-image: none;
        pointer-events: auto;
        padding: 18px;
    }
    .teaser-layout { grid-template-columns: 1fr; gap: 12px; }
    .teaser { padding: 20px 18px; }
    .teaser-title { font-size: 1.0625rem; }
    .teaser-visual { padding: 12px; }
    .tv-pdf { padding: 14px; }
    .tv-pdf-title { font-size: 0.9375rem; }
    .stat-row { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
    .stat-card { padding: 10px; }
    .stat-value { font-size: 1.125rem; }
    .scan-table-head, .scan-row { grid-template-columns: 2fr 1fr 1fr; }
    .scan-table-head span:nth-child(3), .scan-row .scan-meta { display: none; }
    .dash-section { padding: 44px 16px 48px; }
}

/* =========================================================================
   Section — Problem statement
   ========================================================================= */

.section-problem {
    padding: 60px 28px 100px;
    background: linear-gradient(to bottom,
        rgba(77,148,255,0.35) 0%,
        rgba(77,148,255,0.28) 18%,
        rgba(0,191,255,0.16) 42%,
        var(--teal-05) 68%,
        var(--bg) 100%
    );
}
.section-problem .container {
    background: rgba(12,17,35,0.55);
    border: 1px solid rgba(77,148,255,0.18);
    border-radius: 20px;
    padding: 64px 56px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.section-problem .section-head.centered { margin-bottom: 0; }

/* Section 2 — problem stat cards */
.problem-stats-label {
    margin-top: 48px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.problem-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 16px;
}
.problem-stat {
    background: rgba(33,43,69,0.55);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.problem-stat:hover {
    border-color: rgba(0,191,255,0.35);
    transform: translateY(-2px);
}
.problem-stat-num {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
    background: linear-gradient(180deg, var(--red) 0%, #B85A66 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.problem-stat-body {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0 0 16px;
    flex: 1 1 auto;
}
.problem-stat-source {
    font-size: 0.75rem;
    color: var(--ink-3);
    border-top: 1px solid var(--border);
    padding-top: 12px;
    letter-spacing: 0.01em;
}
.problem-stat-source a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--ink-3);
}
.problem-stat-source a:hover { color: var(--ink-2); border-bottom-color: var(--ink-2); }
@media (max-width: 1024px) {
    .problem-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .problem-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .problem-stat { padding: 14px 12px; }
    .problem-stat-num { font-size: 1.5rem; margin-bottom: 8px; }
    .problem-stat-body { font-size: 0.8125rem; line-height: 1.45; margin: 0 0 10px; }
    .problem-stat-source { font-size: 0.6875rem; padding-top: 8px; }
}

.problem-pivot {
    font-size: 1.0625rem;
    color: var(--ink-2);
    text-align: left;
    max-width: 720px;
    margin: 36px 0 0;
    line-height: 1.55;
}
.problem-pivot em {
    font-style: normal;
    color: var(--teal);
    font-weight: 600;
}
.problem-pivot a {
    color: var(--green);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(76,173,126,0.35);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.problem-pivot a:hover {
    color: #5FC091;
    text-decoration-color: var(--green);
}

@media (max-width: 820px) {
    .section-problem { padding: 40px 16px 72px; }
    .section-problem .container { padding: 40px 24px; border-radius: 14px; }
    .problem-pivot { margin-top: 28px; font-size: 1rem; }
}
@media (max-width: 560px) {
    .section-problem { padding: 28px 12px 48px; }
    .section-problem .container { padding: 28px 16px; }
    .problem-stats-label { margin-top: 28px; }
    .problem-pivot { margin-top: 20px; font-size: 0.9375rem; }
}

/* =========================================================================
   Section — Outcome Chain (4-beat workflow, column layout w/ timeline)
   ========================================================================= */

.section-outcome { padding: 100px 0 80px; }
.section-outcome .section-head { margin-bottom: 0; }
.section-outcome .lede { max-width: 720px; margin-left: auto; margin-right: auto; }

.outcome-chain {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    list-style: none;
    padding: 0;
    margin: 64px 0 0;
}
/* Timeline connector behind the dots */
.outcome-chain::before {
    content: '';
    position: absolute;
    top: 22px;
    left: 12.5%;
    right: 12.5%;
    height: 1px;
    background: linear-gradient(to right, var(--teal-35) 0%, var(--teal-25) 50%, var(--teal-35) 100%);
    z-index: 0;
}
.chain-beat { display: flex; position: relative; z-index: 1; }
.chain-beat-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
}
/* Connector dot, sits on top of the timeline line */
.chain-beat-link::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg);
    border: 1.5px solid var(--teal);
    box-shadow: 0 0 0 6px var(--bg);
    margin-top: 16px;
    transition: background 0.2s ease, transform 0.2s ease;
}
.chain-beat-link:hover { transform: translateY(-2px); }
.chain-beat-link:hover::before { background: var(--teal); }

.chain-beat-num {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-2);
    letter-spacing: 0.12em;
    margin-top: 2px;
}
.chain-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--teal-10);
    border: 1px solid var(--teal-25);
    border-radius: 12px;
    color: var(--teal);
    margin-top: 2px;
    flex-shrink: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.chain-beat-link:hover .chain-icon {
    background: var(--teal-20);
    border-color: var(--teal);
}
.chain-beat-name {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.3;
    text-align: center;
}
.chain-beat-body {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0;
    text-align: center;
    flex: 1 1 auto;
    max-width: 240px;
}
.chain-beat-cta {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--teal);
    letter-spacing: -0.005em;
    margin-top: 4px;
    text-align: center;
    transition: color 0.2s ease;
}
.chain-beat-link:hover .chain-beat-cta { color: var(--teal-hover); }

/* Reveal choreography — the ol carries .reveal so layout.js's existing IO adds
   .in once; base reveal visuals are neutralised on the ol itself and the
   children animate instead (line draws, beats stagger, connector dots pop).
   Keyframe animations (not transitions) so the stagger delays never leak into
   the hover transitions on the same elements. opacity-0 pre-states live inside
   no-preference so reduced-motion users see static content even without JS. */
.outcome-chain.reveal { opacity: 1; transform: none; transition: none; }
.outcome-chain::before { transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
    .outcome-chain.reveal .chain-beat { opacity: 0; }
    .outcome-chain.reveal:not(.in)::before { transform: scaleX(0); }
    .outcome-chain.in::before { animation: chain-line-draw 0.7s ease 0.1s backwards; }
    .outcome-chain.in .chain-beat { opacity: 1; animation: chain-beat-in 0.5s ease backwards; }
    .outcome-chain.in .chain-beat:nth-child(2) { animation-delay: 0.12s; }
    .outcome-chain.in .chain-beat:nth-child(3) { animation-delay: 0.24s; }
    .outcome-chain.in .chain-beat:nth-child(4) { animation-delay: 0.36s; }
    .outcome-chain.in .chain-beat-link::before { animation: chain-dot-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s backwards; }
    .outcome-chain.in .chain-beat:nth-child(2) .chain-beat-link::before { animation-delay: 0.33s; }
    .outcome-chain.in .chain-beat:nth-child(3) .chain-beat-link::before { animation-delay: 0.56s; }
    .outcome-chain.in .chain-beat:nth-child(4) .chain-beat-link::before { animation-delay: 0.8s; }
}
@keyframes chain-line-draw { from { transform: scaleX(0); } }
@keyframes chain-beat-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes chain-dot-pop { from { transform: scale(0); } }

@media (max-width: 1024px) {
    .outcome-chain { gap: 20px; }
    .outcome-chain::before { left: 12%; right: 12%; }
    .section-outcome { padding: 72px 0 56px; }
}

/* Outcome dots — visible only on mobile (carousel affordance) */
.outcome-dots { display: none; }

/* Mobile: horizontal scroll-snap strip (mirrors dashboard sidebar pattern).
   Beats become cards on mobile to give the snap targets visual edges.   */
@media (max-width: 720px) {
    .outcome-chain {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;
        gap: 12px;
        margin: 40px -16px 0;
        padding: 4px 16px 14px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .outcome-chain::-webkit-scrollbar { display: none; }
    .outcome-chain::before { display: none; }
    .chain-beat {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }
    .chain-beat-link {
        align-items: flex-start;
        gap: 10px;
        padding: 20px 18px 18px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        transition: background 0.3s ease, border-color 0.3s ease;
    }
    .chain-beat-link::before { display: none; }
    .chain-beat-num { order: -1; margin-top: 0; }
    .chain-beat.is-active .chain-beat-link { border-color: var(--teal-25); }
    /* Snapped card keeps full strength; neighbours recede one depth step
       (card → surface) with muted content. :has() guard: no dimming at all
       unless JS has actually marked an active card. */
    .chain-beat-link > * { transition: opacity 0.3s ease; }
    .outcome-chain:has(.chain-beat.is-active) .chain-beat:not(.is-active) .chain-beat-link {
        background: var(--surface);
    }
    .outcome-chain:has(.chain-beat.is-active) .chain-beat:not(.is-active) .chain-beat-link > * {
        opacity: 0.55;
    }
    .chain-icon { margin-top: 0; }
    .chain-beat-name,
    .chain-beat-body,
    .chain-beat-cta { text-align: left; }
    .chain-beat-body { max-width: none; }
    .section-outcome { padding: 56px 0 40px; }

    .outcome-dots {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin: 12px 0 0;
        padding: 0;
    }
    /* Button is a visible 24×24 ring (border) so axe-core target-size sees the
       full hit area, not just the inner pseudo. Inner 8px circle = active mark. */
    .outcome-dot {
        position: relative;
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: transparent;
        cursor: pointer;
        flex-shrink: 0;
        box-sizing: border-box;
        transition: border-color 0.2s ease;
    }
    .outcome-dot::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--border);
        transform: translate(-50%, -50%);
        transition: background 0.2s ease, transform 0.2s ease;
    }
    .outcome-dot.is-active {
        border-color: var(--teal);
    }
    .outcome-dot.is-active::before {
        background: var(--teal);
        transform: translate(-50%, -50%) scale(1.35);
    }
}

/* =========================================================================
   Section — Capability Grid (Coverage: 4 clusters × 3 tiles)
   ========================================================================= */

.section-coverage { padding: 80px 0 100px; }
.section-coverage .section-head { margin-bottom: 0; }

.coverage-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 56px 0 0;
}

.coverage-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.coverage-cluster {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cluster-header {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--teal);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--teal-25);
    margin-bottom: 4px;
}

.cluster-tiles {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.coverage-tile {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.coverage-tile:hover {
    border-color: var(--teal-35);
    transform: translateY(-1px);
}

.tile-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--teal-10);
    border-radius: 8px;
    color: var(--teal);
}

.tile-name {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
    margin: 4px 0 0;
    letter-spacing: -0.005em;
}

.tile-outcome {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ink-2);
    margin: 0;
}

.coverage-pivot {
    font-size: 1rem;
    color: var(--ink-2);
    text-align: center;
    margin: 48px 0 0;
}
.coverage-pivot a {
    color: var(--teal);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--teal-25);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s ease;
}
.coverage-pivot a:hover { text-decoration-color: var(--teal); }

/* Cluster pills — visible only on mobile (tab-pill switcher pattern, mirrors .dash-sidebar) */
.cluster-tabs { display: none; }

@media (max-width: 1024px) {
    .coverage-track { grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .section-coverage { padding: 56px 0 72px; }
}

/* Mobile: pill-tab nav + horizontal snap carousel of clusters. */
@media (max-width: 720px) {
    .cluster-tabs {
        display: flex;
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        margin: 0 -16px 4px;
        padding: 4px 16px 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .cluster-tabs::-webkit-scrollbar { display: none; }

    .cluster-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 44px;
        padding: 10px 16px;
        font-family: var(--font-display);
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--ink-2);
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 999px;
        cursor: pointer;
        transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    }
    .cluster-tab.is-active {
        color: var(--teal);
        border-color: var(--teal-35);
        background: var(--teal-10);
    }

    /* Carousel track — static in HTML, CSS-driven on mobile */
    .coverage-track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .coverage-track::-webkit-scrollbar { display: none; }
    .coverage-track .coverage-cluster {
        min-width: 100%;
        flex-shrink: 0;
        scroll-snap-align: start;
        display: flex;
    }

    .cluster-header { display: none; }

    .cluster-tiles {
        flex-direction: column;
        overflow: visible;
        gap: 10px;
        margin: 0;
        padding: 0;
    }
    .coverage-tile {
        flex: 1 1 auto;
        padding: 16px 16px;
    }

    .section-coverage { padding: 40px 0 56px; }
}

/* =========================================================================
   Section — Compliance evidence
   ========================================================================= */

.section-compliance { padding: 100px 0; }

/* Artifact-led split: proof bullets + auditor-pack specimen */
.compliance-split {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 56px;
    align-items: start;
    margin: 56px 0 40px;
}
.compliance-proof-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.compliance-proof-list li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 14px;
    align-items: start;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink-2);
}
.compliance-proof-list strong {
    display: block;
    color: var(--ink);
    font-weight: 600;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}
.proof-check {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--teal-dim);
    border: 1px solid var(--teal-20);
    color: var(--teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.compliance-specimen {
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(0,191,255,0.06),
        0 18px 48px rgba(0,0,0,0.32);
}
.specimen-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
}
.specimen-title {
    margin-left: 10px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-3);
    letter-spacing: 0.2px;
}
.specimen-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.specimen-tree,
.specimen-json {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.7;
    color: var(--ink-2);
    white-space: pre;
    overflow-x: auto;
}
.specimen-json {
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.specimen-tree .t-dir,
.specimen-json .t-key  { color: var(--teal); }
.specimen-tree .t-file { color: var(--ink); }
.specimen-json .t-str  { color: var(--ink); }
.specimen-json .t-hash { color: var(--teal); }
.specimen-json .t-bool { color: #3DB88A; }

/* Seal strip — homepage variant: scrolling marquee */
.seals-marquee-wrap {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    margin: 8px 0 36px;
}
@keyframes seals-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.seals-strip {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px 28px;
    width: max-content;
    animation: seals-marquee 32s linear infinite;
}
.seals-strip:hover,
.seals-strip:focus-within { animation-play-state: paused; }
.seals-strip .seal {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--card);
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    padding: 10px 8px;
    min-height: 44px;
    min-width: 96px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
    transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.seals-strip .seal:hover,
.seals-strip .seal:focus-visible {
    background: var(--card-hi);
    border-color: rgba(255,255,255,0.13);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    transform: translateY(-2px);
    outline: none;
}
.seals-strip .seal:hover .seal-name,
.seals-strip .seal:focus-visible .seal-name { color: var(--teal); }
.seals-strip .seal-name {
    font-size: 0.85rem;
    margin-bottom: 2px;
    transition: color 0.18s ease;
}
.seals-strip .seal-sub  { font-size: 0.66rem; opacity: 0.72; }
@media (prefers-reduced-motion: reduce) {
    .seals-marquee-wrap {
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .seals-strip {
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
        animation: none;
    }
    .seals-strip .seal[aria-hidden="true"] { display: none; }
}
@media (hover: none) and (pointer: coarse) {
    .seals-marquee-wrap {
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .seals-strip {
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
        animation: none;
    }
    .seals-strip .seal[aria-hidden="true"] { display: none; }
}

.cta-block { margin-top: 8px; }
.section-compliance .cta-block { text-align: center; }

@media (max-width: 820px) {
    .section-compliance { padding: 64px 0; }
    .compliance-split { grid-template-columns: 1fr; gap: 36px; margin: 40px 0 32px; }
    .specimen-body { padding: 16px; gap: 14px; }
    .specimen-tree,
    .specimen-json { font-size: 0.72rem; }
    .seals-strip { gap: 10px 20px; }
}

/* =========================================================================
   Section — Why Vornin
   ========================================================================= */

.section-why { padding: 70px 0 44px; }

.why-frame {
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    padding: 56px 56px 36px;
}
.why-frame .section-head { margin-bottom: 8px; }

.why-list { margin: 32px 0 20px; }

.why-item {
    border-top: 1px solid var(--border);
    transition: background 200ms ease;
}
.why-item:last-of-type { border-bottom: 1px solid var(--border); }
.why-item[open] {
    background: radial-gradient(
        ellipse 90% 120% at 100% 50%,
        var(--teal-20) 0%,
        var(--teal-10) 28%,
        var(--teal-05) 55%,
        transparent 82%
    );
}

.why-summary {
    list-style: none;
    display: grid;
    grid-template-columns: 36px 1fr 32px;
    gap: 18px;
    align-items: center;
    padding: 22px 18px;
    cursor: pointer;
    transition: background 150ms ease;
}
.why-summary::-webkit-details-marker { display: none; }
.why-summary:hover .why-title { color: var(--teal); }
.why-summary:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: -2px;
    border-radius: var(--r-sm);
}

.why-check {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--teal-tint);
    border: 1px solid var(--teal-30);
    color: var(--teal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    transition: background 200ms ease, border-color 200ms ease;
}
.why-item[open] .why-check {
    background: var(--green);
    color: var(--bg);
    border-color: var(--green);
}

.why-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    transition: color 150ms ease;
}

.why-chevron {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    position: relative;
    transition: transform 220ms ease, background 220ms ease, border-color 220ms ease;
    justify-self: end;
}
.why-chevron::before,
.why-chevron::after {
    content: "";
    position: absolute;
    background: var(--ink-2);
    transition: background 220ms ease;
    border-radius: 1px;
}
.why-chevron::before {
    top: 50%;
    left: 28%;
    right: 28%;
    height: 1.5px;
    transform: translateY(-50%);
}
.why-chevron::after {
    left: 50%;
    top: 28%;
    bottom: 28%;
    width: 1.5px;
    transform: translateX(-50%);
}
.why-item[open] .why-chevron {
    transform: rotate(45deg);
    background: var(--teal-tint);
    border-color: var(--teal-30);
    box-shadow: 0 0 18px 2px var(--teal-25);
}
.why-item[open] .why-chevron::before,
.why-item[open] .why-chevron::after {
    background: var(--teal);
}

.why-body {
    padding: 0 18px 22px 72px;
    animation: reveal-up 220ms ease;
}

.why-text {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--ink-2);
}

.why-pivot {
    text-align: center;
    margin-top: 24px;
}
.why-pivot-label {
    font-size: 0.875rem;
    color: var(--ink-3);
    margin: 0 0 12px;
    letter-spacing: 0.02em;
}
.why-pivot-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 560px;
    margin: 0 auto;
}
.why-pivot-links a {
    font-size: 0.9375rem;
    text-align: center;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    transition: background 150ms ease, color 150ms ease;
}
.why-pivot-links a:hover {
    background: var(--teal-tint);
}

@media (max-width: 820px) {
    .section-why { padding: 34px 0 22px; }
    .why-frame { padding: 32px 16px 20px; border-radius: var(--r-md); }
    .why-list { margin: 24px 0 16px; }
    .why-summary {
        grid-template-columns: 28px 1fr 24px;
        gap: 12px;
        padding: 16px 14px;
    }
    .why-check { width: 28px; height: 28px; font-size: 0.85rem; }
    .why-title { font-size: 1rem; }
    .why-chevron { width: 24px; height: 24px; font-size: 1rem; }
    .why-body { padding: 0 14px 16px 54px; }
    .why-text { font-size: 0.875rem; line-height: 1.55; }
    .why-pivot { margin-top: 20px; text-align: left; }
    .why-pivot-label { margin-bottom: 8px; }
    .why-pivot-links {
        grid-template-columns: auto auto auto;
        justify-content: start;
        gap: 4px;
        max-width: none;
        margin: 0;
    }
    .why-pivot-links a {
        font-size: 0.8125rem;
        padding: 4px 6px;
        text-align: left;
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .why-chevron,
    .why-check,
    .why-title { transition: none; }
    .why-body { animation: none; }
}

/* =========================================================================
   Reduced-motion guards for new animations
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
    .fold-panel { transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s; }
    .fold-panel:not([hidden]) { transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s; }
    .nav-expand { transition: max-width 0.32s ease, opacity 0.22s ease; }
    .float-auth { transition: opacity 0.22s ease, transform 0.22s ease; }
    .nav-trigger .chevron { transition: transform 0.18s ease; }
    .drawer-trigger .chevron { transition: transform 0.18s ease; }
}

/* =========================================================================
   Homepage background motif
   `.bg-bands` wraps the page; `.bg-motif` wraps the outcome→differentiators
   stack with a fixed triangle-grid layer + compliance seam treatment.
   ========================================================================= */

/* --- BG motif: triangle grid only, wrapped around outcome→dispatch so
       hero/dashboard/problem stay untouched. Fades in at top of wrap,
       runs continuously to bottom. Fixed-attachment so grid feels stable
       as content scrolls past. --- */
.bg-bands { position: relative; isolation: isolate; }
.bg-bands .bg-motif {
    position: relative;
    overflow: hidden;
    /* Buffer for the grid's vertical fade-out — lets the mask reach full
       transparency in empty space before dispatch begins, so no seam. */
    padding-bottom: 96px;
}
.bg-bands .bg-motif-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: url('/img/blacktrianglegrid20.svg');
    background-size: 640px 640px;
    background-repeat: repeat;
    /* No fixed-attachment — combo with mask-image crosses coordinate spaces. */
    filter: invert(1);
    opacity: 0.11;
    mix-blend-mode: lighten;
    /* Two masks composed via intersect: vertical (fade-in at outcome lede,
       fade-out before dispatch buffer) + horizontal spotlight (centered
       ellipse so grid pools behind content, dimming at viewport edges). */
    -webkit-mask-image:
        linear-gradient(to bottom, transparent 0%, transparent 9%, black 18%, black 62%, transparent 92%),
        radial-gradient(ellipse 55% 100% at 50% 50%, black 0%, black 38%, transparent 92%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to bottom, transparent 0%, transparent 9%, black 18%, black 62%, transparent 92%),
        radial-gradient(ellipse 55% 100% at 50% 50%, black 0%, black 38%, transparent 92%);
    mask-composite: intersect;
}
.bg-bands > section,
.bg-bands .bg-motif > section {
    position: relative;
    z-index: 1;
}

/* --- Seam: capability → compliance.
   Kills the main grid's center spotlight in the last ~220px of the
   capability section so the visible pattern (center) fades out into
   compliance's sides-only pattern. Bg-color radial wash anchored
   bottom-center. --- */
.bg-bands .section-coverage {
    position: relative;
}
.bg-bands .section-coverage > .container {
    position: relative;
    z-index: 2;
}
.bg-bands .section-coverage::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 260px;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse 48% 100% at 50% 100%,
        var(--bg) 0%,
        var(--bg) 38%,
        transparent 88%
    );
}

/* --- Compliance section: inverse spotlight.
   Section bg is solid at top (preserves the sides-only effect by hiding
   main grid center at compliance top), but fades to transparent at the
   bottom — that fade-out reveals the main grid's center spotlight again
   so it returns by differentiators top. ::before paints the sides-only
   grid pattern flanking the content column. --- */
.bg-bands .section-compliance {
    position: relative;
    background: linear-gradient(
        to bottom,
        var(--bg) 0%,
        var(--bg) 90%,
        transparent 100%
    );
}
.bg-bands .section-compliance > .container {
    position: relative;
    z-index: 2;
}
.bg-bands .section-compliance::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: url('/img/blacktrianglegrid20.svg');
    background-size: 640px 640px;
    background-repeat: repeat;
    filter: invert(1);
    opacity: 0.11;
    mix-blend-mode: lighten;
    /* Inverse horizontal: transparent through the center, opaque at the
       sides. Vertical fade: sides die earlier (88% stop) than the bg
       fade-out (90% stop) so the center reveals without the sides still
       being visible — no doubling. */
    -webkit-mask-image:
        radial-gradient(ellipse 50% 100% at 50% 50%, transparent 0%, transparent 32%, black 78%),
        linear-gradient(to bottom, transparent 0%, black 14%, black 78%, transparent 88%);
    -webkit-mask-composite: source-in;
    mask-image:
        radial-gradient(ellipse 50% 100% at 50% 50%, transparent 0%, transparent 32%, black 78%),
        linear-gradient(to bottom, transparent 0%, black 14%, black 78%, transparent 88%);
    mask-composite: intersect;
}

/* --- Compliance section: wide ambient teal glow.
   Sits at z -1 inside section's stacking context — above the section bg
   but below in-flow content. Big enough to spill behind the audit pack
   specimen AND the seals strip. --- */
.bg-bands .section-compliance::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 4%;
    transform: translateX(-50%);
    width: 84%;
    height: 70%;
    max-width: 1200px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
        ellipse 62% 55% at 50% 60%,
        var(--teal-10) 0%,
        var(--teal-05) 48%,
        transparent 82%
    );
    filter: blur(24px);
}

/* --- Dispatch CTA: soften top edge when sitting under the motif wrap.
   The base .dispatch rule paints a centred radial + border-top; under the
   bands wrapper we widen the bloom and drop the hairline so the conversion
   moment reads as continuous with the motif fade-out, not a new section. --- */
.bg-bands .dispatch {
    border-top: 0;
    /* Rebalance: .bg-motif's 96px fade buffer already pads the top of this
       section, so top padding shrinks and bottom grows to keep the CTA from
       sitting on the footer. */
    padding: 52px 0 112px;
    background:
        radial-gradient(ellipse 80% 70% at 50% 42%, var(--teal-10) 0%, transparent 75%),
        var(--bg);
}
@media (max-width: 820px) {
    .bg-bands .dispatch { padding: 32px 0 76px; }
}

/* =========================================================================
   FEATURES PAGE — scoped classes: .features-*
   Mobile-first; desktop breakpoint at 1100px to match site convention.
   ========================================================================= */

/* Hero microcopy under CTA row */
.features-hero-microcopy {
    margin-top: 14px;
    font-size: 0.85rem;
    color: var(--ink-3);
    text-align: center;
}

/* Section spacing reset for preview sections */
.features-section { position: relative; }

.features-section-microline {
    margin-top: 28px;
    text-align: center;
    color: var(--ink-3);
    font-size: 0.92rem;
}

.features-import-note {
    margin-top: 16px;
}

/* -----------------------------------------------------------
   Section 1 — Engines grouped sub-rows
   ----------------------------------------------------------- */

.features-engine-grid {
    display: flex;
    flex-direction: column;
    gap: 36px;
    margin-top: 24px;
}

.features-engine-bucket {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.features-engine-bucket-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--teal);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--teal-20);
    margin: 0;
}

.features-engine-bucket-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.features-engine-chip {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    padding: 16px 18px 14px;
    transition: border-color 180ms ease, transform 180ms ease;
}

.features-engine-chip:hover {
    border-color: var(--teal-30);
    transform: translateY(-1px);
}

.features-engine-num {
    position: absolute;
    top: 12px;
    right: 14px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
    letter-spacing: 0.06em;
}

.features-engine-chip h4 {
    font-size: 1rem;
    margin-bottom: 6px;
    padding-right: 36px;
    color: var(--ink);
}

.features-engine-chip p {
    font-size: 0.88rem;
    color: var(--ink-2);
    line-height: 1.5;
    margin: 0;
}

@media (min-width: 768px) {
    .features-engine-bucket-cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
    .features-engine-bucket-cards { grid-template-columns: repeat(4, 1fr); }
    .features-engine-bucket { gap: 18px; }
}

/* -----------------------------------------------------------
   Split layouts (Sections 2, 5)
   ----------------------------------------------------------- */

.features-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: start;
}

.features-split-copy .eyebrow { margin-bottom: 12px; }

.features-split-copy h2 {
    margin-bottom: 18px;
}

.features-split-copy .lede {
    margin-bottom: 22px;
    color: var(--ink-2);
    font-size: 1.05rem;
    max-width: 56ch;
}

.features-split-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.features-split-bullets li {
    padding-left: 22px;
    position: relative;
    color: var(--ink-2);
    font-size: 0.96rem;
    line-height: 1.55;
}

.features-split-bullets li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--teal);
    font-weight: 600;
}

.features-split-bullets li strong {
    color: var(--ink);
    font-weight: 600;
}

.features-shot-frame {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 24px 64px -16px var(--shadow-deep);
    background: var(--card);
}

.features-shot-frame img {
    width: 100%;
    height: auto;
    display: block;
}

.features-shot-frame figcaption {
    padding: 10px 14px;
    font-size: 0.78rem;
    color: var(--ink-3);
    border-top: 1px solid var(--border-soft);
    text-align: center;
    font-family: var(--font-mono);
}

@media (min-width: 1100px) {
    .features-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        gap: 56px;
        align-items: center;
    }
    .features-split-flip {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    }
    .features-split-flip .features-split-copy { order: 2; }
    .features-split-flip .features-split-shot { order: 1; }
}

/* Mobile: full-bleed screenshot to reclaim container padding (~56 px total) */
@media (max-width: 768px) {
    .features-split-shot {
        margin-left: -28px;
        margin-right: -28px;
    }
    .features-shot-frame {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
}

/* Very small viewports: caption dominates the shrunken card; alt covers a11y */
@media (max-width: 480px) {
    .features-shot-frame figcaption {
        display: none;
    }
}

/* -----------------------------------------------------------
   Section 3 — ASM (KPI strip + host list)
   ----------------------------------------------------------- */

.features-eyebrow-chip {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 10px;
    background: var(--teal-tint);
    color: var(--teal);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    vertical-align: middle;
}

.features-asm-kpis {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 28px 0 32px;
}

.features-asm-kpi {
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    padding: 18px 18px 16px;
}

.features-asm-kpi-label {
    font-size: 0.74rem;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.features-asm-kpi-value {
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.02em;
}

.features-asm-kpi-delta {
    margin-top: 8px;
    font-size: 0.82rem;
    color: var(--ink-3);
}

.features-asm-kpi-delta.accent { color: var(--teal); }
.features-asm-kpi-delta.high   { color: var(--orange); }

.features-asm-list {
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    overflow: hidden;
}

.features-asm-list-head {
    display: none;
}

.features-asm-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-soft);
}

.features-asm-row:last-child { border-bottom: 0; }

.features-asm-host {
    font-family: var(--font-mono);
    font-size: 0.92rem;
    color: var(--ink);
    word-break: break-all;
}

.features-asm-svc {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--ink-3);
}

.features-asm-chip {
    display: inline-block;
    padding: 2px 9px;
    font-size: 0.74rem;
    font-weight: 600;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    color: var(--ink-2);
    border: 1px solid var(--border-soft);
    white-space: nowrap;
    width: max-content;
}

/* contrast-passing chip text vs tinted/dark backgrounds (a11y: <0.8rem needs >=4.5:1 and weight >=600) */
.features-asm-chip.dim     { color: var(--ink-2); }
.features-asm-chip.accent  { color: var(--teal); border-color: var(--teal-30); background: var(--teal-tint); }
.features-asm-chip.red     { color: #EF98A2; border-color: var(--red-border); background: var(--red-dim); }
.features-asm-chip.orange  { color: #E0A95C; border-color: rgba(201,139,63,0.30); background: var(--orange-dim); }

@media (min-width: 768px) {
    .features-asm-kpis { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1100px) {
    .features-asm-list-head {
        display: grid;
        grid-template-columns: 2fr 1.2fr 1fr 1fr;
        gap: 12px;
        padding: 10px 16px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--ink-3);
    }
    .features-asm-row {
        grid-template-columns: 2fr 1.2fr 1fr 1fr;
        align-items: center;
        gap: 12px;
    }
}

/* -----------------------------------------------------------
   Mid-page CTA
   ----------------------------------------------------------- */

.features-mid-cta {
    background:
        radial-gradient(ellipse 60% 80% at 50% 50%, var(--teal-10) 0%, transparent 70%),
        var(--bg);
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    padding: 48px 0;
}

.features-mid-cta-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}

.features-mid-cta-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--ink);
    margin: 0 0 6px;
    line-height: 1.2;
}

.features-mid-cta-sub {
    color: var(--ink-2);
    margin: 0;
    font-size: 1rem;
}

.features-mid-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.features-mid-cta-microcopy {
    font-size: 0.84rem;
    color: var(--ink-3);
}

@media (min-width: 768px) {
    .features-mid-cta-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 32px;
    }
    .features-mid-cta-actions {
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }
}

/* -----------------------------------------------------------
   Section 4 — Lifecycle bar + Resolve cards
   ----------------------------------------------------------- */

.features-lifecycle {
    list-style: none;
    padding: 0;
    margin: 28px 0 32px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    counter-reset: lifecycle;
}

.features-lifecycle-beat {
    position: relative;
    padding: 18px 18px 16px;
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    border-left: 3px solid var(--teal);
}

.features-lifecycle-num {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--teal);
    letter-spacing: 0.08em;
    display: block;
    margin-bottom: 6px;
}

.features-lifecycle-beat h3 {
    font-size: 1.05rem;
    margin: 0 0 4px;
    color: var(--ink);
}

.features-lifecycle-beat p {
    color: var(--ink-2);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.features-resolve-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.features-card {
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    padding: 20px;
    transition: border-color 180ms ease;
}

.features-card:hover { border-color: var(--teal-25); }

.features-card-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--teal);
    margin-bottom: 8px;
}

.features-card h3 {
    font-size: 1.05rem;
    color: var(--ink);
    margin: 0 0 8px;
}

.features-card p {
    color: var(--ink-2);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
}

@media (min-width: 768px) {
    .features-lifecycle {
        grid-template-columns: repeat(4, 1fr);
        align-items: stretch;
    }
    .features-lifecycle-beat {
        border-left: none;
        border-top: 3px solid var(--teal);
    }
    .features-resolve-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .features-resolve-cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* -----------------------------------------------------------
   Section 5 — Stat tiles (SLA + AI)
   ----------------------------------------------------------- */

.features-stat-tiles {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.features-stat-tile {
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    border-left: 3px solid var(--teal);
}

.features-stat-tile h3 {
    font-size: 0.98rem;
    color: var(--ink);
    margin: 0 0 4px;
}

.features-stat-tile p {
    color: var(--ink-2);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0;
}

.features-stat-tile code {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--teal);
    background: var(--teal-tint);
    padding: 1px 6px;
    border-radius: var(--r-xs);
}

/* -----------------------------------------------------------
   Section 6a — Evidence chain diagram
   ----------------------------------------------------------- */

.features-chain {
    list-style: none;
    padding: 0;
    margin: 28px 0 12px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.features-chain-node {
    position: relative;
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    background: var(--card-hi);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    overflow: visible;
}

.features-chain-node + .features-chain-node::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 24px;
    width: 2px;
    height: 10px;
    background: var(--teal-30);
}

.features-chain-verb {
    font-weight: 600;
    color: var(--ink);
    font-size: 0.95rem;
}

.features-chain-hash {
    display: inline-flex;
    align-self: flex-start;
    padding: 3px 8px;
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-xs);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--teal);
}

.features-chain-date {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--ink-2);
}

.features-chain-caption {
    text-align: center;
    color: var(--ink-3);
    font-size: 0.86rem;
    margin: 0 0 32px;
    max-width: 64ch;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1100px) {
    .features-chain {
        grid-template-columns: repeat(5, 1fr);
        gap: 16px;
        align-items: stretch;
        position: relative;
    }
    .features-chain-node {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 4px;
        padding: 16px 14px;
    }
    .features-chain-node + .features-chain-node::before {
        top: 50%;
        left: -17px;
        width: 16px;
        height: 2px;
        transform: translateY(-50%);
    }
}

/* -----------------------------------------------------------
   Section 6 — Prove artefacts (ZIP + PDF cards)
   ----------------------------------------------------------- */

.features-prove-artefacts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 8px 0 48px;
}

@media (min-width: 768px) {
    .features-prove-artefacts {
        grid-template-columns: 1fr 1fr;
    }
}

/* -----------------------------------------------------------
   Section 6b — Nine frameworks (details list)
   ----------------------------------------------------------- */

.features-frameworks-block {
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid var(--border-soft);
}

.features-frameworks-h3 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    color: var(--ink);
    margin: 0 0 8px;
    line-height: 1.2;
}

.features-frameworks-h3 em {
    font-style: normal;
    color: var(--teal);
}

.features-frameworks-lede {
    color: var(--ink-2);
    margin: 0 0 24px;
    font-size: 0.98rem;
    max-width: 56ch;
}

.features-frameworks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.features-framework-item {
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    overflow: hidden;
}

.features-framework-item summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    transition: background 150ms ease;
}

.features-framework-item summary::-webkit-details-marker { display: none; }

.features-framework-item summary::after {
    content: "▸";
    color: var(--teal);
    font-size: 0.85rem;
    transition: transform 200ms ease;
    margin-left: 12px;
}

.features-framework-item[open] > summary::after {
    transform: rotate(90deg);
}

.features-framework-item summary:hover { background: var(--card-hi); }

.features-framework-name {
    font-weight: 600;
    color: var(--ink);
    font-size: 1rem;
}

.features-framework-detail {
    padding: 0 18px 16px;
    border-top: 1px solid var(--border-soft);
    padding-top: 12px;
}

.features-framework-meta {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--teal);
    margin: 0 0 8px;
}

.features-framework-detail p:last-child {
    color: var(--ink-2);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
}

@media (min-width: 768px) {
    .features-frameworks { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
    .features-frameworks { grid-template-columns: repeat(3, 1fr); }
}

/* -----------------------------------------------------------
   Section 7 — Operate matrix table
   ----------------------------------------------------------- */

.features-operate-table {
    margin-top: 24px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--card);
}

.features-operate-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-soft);
}

.features-operate-row:last-child { border-bottom: 0; }

.features-operate-head {
    display: none;
}

.features-operate-feature {
    font-weight: 600;
    color: var(--ink);
    font-size: 0.98rem;
}

.features-operate-desc {
    color: var(--ink-2);
    font-size: 0.92rem;
    line-height: 1.55;
}

.features-operate-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.features-operate-link {
    margin-top: 20px;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--ink-3);
}

.features-operate-link a {
    color: var(--teal);
}

@media (min-width: 1100px) {
    .features-operate-row {
        grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr);
        align-items: start;
        gap: 28px;
    }
    .features-operate-head {
        display: grid;
        padding: 10px 20px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        font-family: var(--font-mono);
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--ink-3);
    }
}

/* -----------------------------------------------------------
   Revision pass — 2026-05-27
   ----------------------------------------------------------- */

/* Rule: when the H2 is full teal or gradient teal, supporting
   eyebrow renders in ink so the heading carries the accent.
   Apply via .eyebrow--ink modifier on the eyebrow itself. */
.eyebrow.eyebrow--ink {
    color: var(--ink);
}
.eyebrow.eyebrow--ink::before {
    background: var(--ink-3);
}

/* H2 with the entire phrase teal — semantic alias for sections
   where the <em> wraps every visible word. No paint change
   today; reserved for future tint adjustments. */
.h2-allteal em {
    color: var(--teal);
}

/* Numbered chain nodes — numeral sits as a watermark in the
   bottom-right of each lifted card. Hash chip remains the only
   filled accent surface inside the body. */
.features-chain-node {
    min-height: 96px;
    padding-right: 56px;
}
.features-chain-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.features-chain-num {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 3rem;
    line-height: 1;
    color: var(--teal);
    opacity: 0.18;
    letter-spacing: -0.02em;
    pointer-events: none;
    user-select: none;
}
@media (min-width: 1100px) {
    .features-chain-node {
        min-height: 128px;
        padding-right: 16px;
    }
    .features-chain-num {
        bottom: 10px;
        right: 12px;
        font-size: 4.4rem;
        opacity: 0.14;
    }
}

/* Inline plc-icon used inside operate-row description text */
.features-inline-logo {
    display: inline-block;
    vertical-align: -4px;
    margin: 0 4px 0 0;
}

/* Logo-only chip tile for the Integrations row */
.features-operate-chips--logos {
    gap: 10px;
    margin-top: 14px;
}
.features-logo-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--card);
    transition: border-color 160ms ease, transform 160ms ease;
}
.features-logo-tile:hover {
    border-color: var(--teal-30);
    transform: translateY(-1px);
}
.features-logo-tile img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}
/* White pill on dark/monochrome marks so they don't disappear
   on the dark tile background. Mirrors pricing.css logic. */
.features-logo-tile img[src$="/github.svg"],
.features-logo-tile img[src$="/aws.svg"],
.features-logo-tile img[src$="/okta.svg"],
.features-logo-tile img[src$="/pingfederate.svg"] {
    background: #fff;
    border-radius: 3px;
    padding: 1px;
    box-sizing: border-box;
}

/* End FEATURES PAGE
   ========================================================================= */

/* ─────────────────────────────────────────────────────────────────────
   Dash sidebar scroll hint — mobile only (animated chevron via ::after)
   ───────────────────────────────────────────────────────────────────── */
@keyframes dash-hint-pulse {
    0%, 100% { opacity: 0.45; transform: translateY(-50%) translateX(0); }
    50%       { opacity: 1;    transform: translateY(-50%) translateX(3px); }
}

@media (max-width: 767px) {
    .dash-sidebar {
        position: relative;
    }
    .dash-sidebar::after {
        content: '›';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 36px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        color: var(--teal);
        font-size: 1.5rem;
        line-height: 1;
        background: linear-gradient(to right, transparent, var(--card) 50%);
        animation: dash-hint-pulse 1.8s ease-in-out infinite;
        transition: opacity 0.35s ease;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .dash-sidebar.hint-done::after {
        opacity: 0;
        animation: none;
    }
    @media (prefers-reduced-motion: reduce) {
        .dash-sidebar::after { animation: none; opacity: 0.7; }
    }
}