/* ==========================================================================
   antonis5980 — unified site stylesheet (Harmony Model palette)
   ========================================================================== */

:root {
    /* Harmony palette */
    --ink: #0c1222;
    --ink-soft: #1e293b;
    --ink-muted: #475569;
    --ink-faint: #64748b;
    --paper: #ffffff;
    --paper-warm: #faf9f7;
    --paper-tint: #f1f5f9;
    --brand: #0f766e;
    --brand-dark: #0d5c56;
    --brand-light: #ccfbf1;
    --brand-glow: rgba(15, 118, 110, 0.12);
    --accent: #b45309;
    --accent-light: #fef3c7;
    --hero-from: #0c1222;
    --hero-to: #1a2744;
    --hero-text: #f8fafc;
    --hero-muted: #cbd5e1;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 3px rgba(12, 18, 34, 0.06);
    --shadow: 0 8px 30px rgba(12, 18, 34, 0.08);
    --shadow-lg: 0 20px 50px rgba(12, 18, 34, 0.12);
    --font-body: "DM Sans", system-ui, -apple-system, sans-serif;
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --max-width: 1120px;
    /* Site aliases */
    --text-main: var(--ink);
    --text-muted: var(--ink-muted);
    --card-bg: var(--paper);
    --border-soft: var(--border);
    --primary: var(--brand);
    --primary-soft: var(--brand-light);
}

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

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

body, html {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: var(--font-body);
    background: var(--paper-warm);
    color: var(--ink-soft);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a, button { font-family: inherit; }

/* ── Minimal layout utilities (replaces tailwind.min.css on index) ── */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.shrink-0 { flex-shrink: 0; }
.self-start { align-self: flex-start; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-y-2 { row-gap: 0.5rem; }
.grid { display: grid; }
.min-w-0 { min-width: 0; }
.w-full { width: 100%; }
.max-w-none { max-width: none; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.h-12 { height: 3rem; }
.w-12 { width: 3rem; }
.m-0 { margin: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.pt-6 { padding-top: 1.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-\[0\.65rem\] { font-size: 0.65rem; }
.text-\[0\.7rem\] { font-size: 0.7rem; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.tracking-wider { letter-spacing: 0.05em; }
.text-center { text-align: center; }
.leading-relaxed { line-height: 1.625; }
.leading-snug { line-height: 1.375; }
.text-slate-400 { color: var(--ink-faint); }
.text-slate-500 { color: var(--ink-faint); }
.text-slate-600 { color: var(--ink-muted); }
.text-slate-800 { color: var(--ink-soft); }
.text-emerald-700 { color: var(--brand-dark); }
.text-sky-800 { color: #075985; }
.text-sky-900\/65 { color: rgba(12, 74, 110, 0.65); }
.text-amber-600 { color: var(--accent); }
.text-amber-700 { color: #b45309; }
.text-blue-600 { color: var(--brand); }
.hover\:text-blue-600:hover { color: var(--brand); }
.hover\:text-blue-700:hover { color: var(--brand-dark); }
.hover\:underline:hover { text-decoration: underline; }
.bg-white { background-color: var(--paper); }
.border { border-width: 1px; border-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-slate-200 { border-color: var(--border); }
.border-slate-200\/70 { border-color: rgba(226, 232, 240, 0.7); }
.border-slate-300 { border-color: var(--border-strong); }
.border-sky-200\/80 { border-color: rgba(186, 230, 253, 0.8); }
.border-sky-900\/10 { border-color: rgba(12, 74, 110, 0.1); }
.rounded-full { border-radius: 9999px; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow); }
.drop-shadow-md { filter: drop-shadow(0 4px 3px rgba(0,0,0,.07)); }
.drop-shadow-sm { filter: drop-shadow(0 1px 1px rgba(0,0,0,.05)); }
.transition-colors { transition: color 0.15s, background-color 0.15s, border-color 0.15s; }
.relative { position: relative; }
.fixed { position: fixed; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.w-full { width: 100%; }
.bg-white\/95 { background-color: rgba(255,255,255,0.95); }
.bg-blue-600 { background-color: var(--brand); }
.hover\:bg-blue-700:hover { background-color: var(--brand-dark); }
.hover\:bg-blue-50\/40:hover { background-color: rgba(204, 251, 241, 0.4); }
.hover\:border-blue-400:hover { border-color: var(--brand); }
.hover\:border-slate-400:hover { border-color: var(--ink-faint); }
.text-white { color: #fff; }
.text-slate-700 { color: var(--ink-muted); }
.text-slate-800 { color: var(--ink-soft); }
.shadow-blue-500\/30 { box-shadow: 0 1px 2px rgba(15, 118, 110, 0.3); }
.space-y-1 > * + * { margin-top: 0.25rem; }
.ml-4 { margin-left: 1rem; }
.list-decimal { list-style-type: decimal; }
.backdrop-blur { backdrop-filter: blur(8px); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-from, #fff), var(--tw-gradient-via, #f0fdfa), var(--tw-gradient-to, #ccfbf1)); }
.from-white { --tw-gradient-from: #fff; }
.via-sky-50 { --tw-gradient-via: #f0fdfa; }
.to-sky-100\/90 { --tw-gradient-to: rgba(204, 251, 241, 0.9); }
.ring-1 { box-shadow: 0 0 0 1px var(--ring-color, var(--border)); }
.ring-sky-200\/40 { --ring-color: rgba(153, 246, 228, 0.4); }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.max-w-full { max-width: 100%; }
.shadow-\[0_-8px_30px_rgba\(15\,23\,42\,0\.12\)\] {
    box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.12);
}

/* Site footer */
body > footer {
    background: var(--paper);
    border-top: 1px solid var(--border);
    color: var(--ink-faint);
    font-size: 0.75rem;
}

@media (min-width: 640px) {
    .sm\:flex-row { flex-direction: row; }
    .sm\:flex { display: flex; }
    .sm\:items-center { align-items: center; }
    .sm\:gap-3 { gap: 0.75rem; }
}
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:flex-row { flex-direction: row; }
    .md\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
    .md\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
    .md\:text-base { font-size: 1rem; line-height: 1.5rem; }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Site layout ── */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1.5rem;
}

/* Product cards (Lynx, C.G.A) — distinct from portal-leaflet .card */
.product-section .card {
    background: var(--paper);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--brand-glow);
    color: var(--brand-dark);
}

.pricing-highlight {
    border: 2px solid var(--brand);
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--brand-glow);
    position: relative;
    overflow: hidden;
}
.pricing-highlight::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at 0 0, var(--brand-glow), transparent 55%);
    opacity: 0.8;
    pointer-events: none;
}

.soft-chip {
    background: var(--paper-tint);
    border-radius: 999px;
    border: 1px solid var(--border);
    padding: 0.25rem 0.8rem;
    font-size: 0.75rem;
    color: var(--ink-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.soft-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--brand);
}

.nav-pill {
    background: var(--brand-light);
    color: var(--ink-soft);
    border: 1px solid rgba(15, 118, 110, 0.25);
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.nav-pill:hover {
    background: var(--brand-dark);
    color: var(--hero-text);
    border-color: var(--brand-dark);
}

.lynx-download-btn,
.cga-download-btn {
    background: var(--brand-dark);
    color: var(--hero-text);
    border: 1px solid var(--brand-dark);
    text-decoration: none;
    transition: background 0.2s;
}
.lynx-download-btn:hover,
.cga-download-btn:hover {
    background: var(--ink-soft);
    color: var(--hero-text);
}

.section-spacing {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.product-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
    border-top: 1px solid var(--border);
}
.product-section:first-of-type { border-top: none; }

.lynx-section-bg,
.cga-section-bg {
    background: var(--paper);
}
.lynx-section-bg { background: linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 100%); }
.cga-section-bg { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-tint) 100%); }

.product-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}
.product-section-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
}
@media (min-width: 768px) {
    .product-section-title { font-size: 2rem; }
}

/* Intro carousel */
.intro-wrap { position: relative; min-height: 6rem; }
.intro-carousel {
    position: relative;
    min-height: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.intro-carousel .slides-wrap {
    position: relative;
    width: 100%;
    min-height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.intro-carousel .slide {
    position: absolute;
    left: 0; right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.intro-carousel .slide.active { opacity: 1; visibility: visible; }
.intro-carousel .slide-inner {
    text-align: center;
    max-width: 32rem;
    margin: 0 auto;
    padding: 0 1rem;
}
.intro-carousel .carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}
.intro-carousel .carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-strong);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}
.intro-carousel .carousel-dot:hover { background: var(--ink-faint); }
.intro-carousel .carousel-dot.active {
    background: var(--brand);
    transform: scale(1.2);
}

#particles-js {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 360px;
    z-index: 0;
    pointer-events: none;
}

.top-bar {
    background: linear-gradient(to bottom, rgba(255,255,255,0.97), rgba(250,249,247,0.98));
    box-shadow: var(--shadow);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
}
.top-bar::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -4px;
    height: 8px;
    background: radial-gradient(circle at 50% 0, rgba(12,18,34,0.08), transparent 70%);
    pointer-events: none;
}

.ecosystem-bridge {
    padding: 3rem 0;
    background: linear-gradient(180deg, var(--brand-light) 0%, var(--paper-warm) 55%, var(--paper) 100%);
    border-top: 1px solid var(--border);
    border-bottom: 2px solid var(--brand);
}
.ecosystem-bridge-inner { text-align: center; max-width: 40rem; margin: 0 auto; }
.ecosystem-bridge-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 0.75rem;
}
.ecosystem-bridge-title {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 0.75rem;
}
.ecosystem-bridge-text {
    font-size: 0.95rem;
    color: var(--ink-muted);
    line-height: 1.65;
    margin-bottom: 1.5rem;
}
.ecosystem-thread {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.75rem;
}
.ecosystem-thread a {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    background: var(--paper);
    border: 1px solid var(--border);
    color: var(--ink-muted);
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.ecosystem-thread a:hover {
    border-color: var(--brand);
    color: var(--brand-dark);
    transform: translateY(-1px);
}
.ecosystem-thread .thread-arrow { color: var(--ink-faint); font-size: 0.85rem; user-select: none; }

.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem 0.45rem;
    flex: 1;
    min-width: 0;
}
.nav-pill-sub { font-size: 0.68rem; padding: 0.25rem 0.6rem; opacity: 0.92; }

.portal-leaflet { scroll-margin-top: 5.5rem; }
.portal-leaflet .wrap { max-width: var(--max-width); padding: 0 1.5rem; }
.portal-leaflet .leaflet-crosslink { color: var(--brand-dark); font-weight: 600; text-decoration: none; }
.portal-leaflet .leaflet-crosslink:hover { text-decoration: underline; }

#intro, #lynx, #cga, #portal,
#harmony, #families, #modules, #problem, #solution,
#differentiators, #customers, #offering, #pitch, #objections {
    scroll-margin-top: 5.5rem;
}

/* C.G.A preview grid */
.cga-preview-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
    .cga-preview-row { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 2rem 2.5rem; }
    .cga-figures-col { justify-self: stretch; min-width: 0; }
    .cga-preview-row .cga-shot-wrap { width: 100%; max-width: 100%; margin: 0; }
    .cga-preview-row .cga-shot-wrap img { width: 100%; height: auto; }
}
.cga-shot-wrap { width: fit-content; max-width: 100%; margin: 0 auto; }
.cga-shot-wrap img { display: block; width: 30%; height: auto; }

/* Cookie banner */
#cookie-banner {
    box-shadow: var(--shadow-lg);
}

@media (max-width: 767px) {
    .site-nav { justify-content: center; }
    #intro, #lynx, #cga, #portal,
    #harmony, #families, #modules, #problem, #solution,
    #differentiators, #customers, #offering, #pitch, #objections {
        scroll-margin-top: 7rem;
    }
}

/* ── Harmony Model (portal-leaflet) ── */

/* ==========================================================================
   Enterprise Software Ecosystem — Commercial Presentation
   Screen: high-contrast editorial layout · Print/PDF: A4-ready
   ========================================================================== */





.portal-leaflet {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper-warm);
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
}
.portal-leaflet *, .portal-leaflet *::before, .portal-leaflet *::after { box-sizing: border-box; }

.portal-leaflet .wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

/* ── Hero (dark band — always light text on dark bg) ── */
.portal-leaflet .hero {
    background: linear-gradient(145deg, var(--hero-from) 0%, var(--hero-to) 55%, #0f766e 140%);
    color: var(--hero-text);
    padding: 4rem 0 4.5rem;
    position: relative;
    overflow: hidden;
}

.portal-leaflet .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 90% 10%, rgba(15, 118, 110, 0.35), transparent 55%),
        radial-gradient(ellipse 50% 40% at 5% 90%, rgba(180, 83, 9, 0.15), transparent 50%);
    pointer-events: none;
}

.portal-leaflet .hero .wrap { position: relative; z-index: 1; }

.portal-leaflet .hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--hero-text);
    border-radius: 999px;
    padding: 0.35rem 1rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.portal-leaflet .hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--hero-text);
    margin-bottom: 1.25rem;
    max-width: 14em;
}

.portal-leaflet .hero .tagline {
    font-size: clamp(1.05rem, 2.2vw, 1.2rem);
    color: var(--hero-muted);
    max-width: 42rem;
    margin-bottom: 2.5rem;
    line-height: 1.6;
    font-weight: 400;
}

.portal-leaflet .hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1rem;
    max-width: 36rem;
}

.portal-leaflet .hero-stat {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    backdrop-filter: blur(8px);
}

.portal-leaflet .hero-stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    color: #5eead4;
    line-height: 1.1;
    margin-bottom: 0.25rem;
}

.portal-leaflet .hero-stat span {
    font-size: 0.8rem;
    color: var(--hero-muted);
    line-height: 1.35;
}

/* ── Content sections ── */
.portal-leaflet section {
    padding: 3.75rem 0;
}

.portal-leaflet section:nth-of-type(even) {
    background: var(--paper);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.portal-leaflet section:nth-of-type(odd):not(.hero):not(.cta-section) {
    background: var(--paper-warm);
}

.portal-leaflet .section-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 0.6rem;
}

.portal-leaflet h2 {
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 3.5vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.portal-leaflet h3 {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink-soft);
    margin: 2rem 0 0.75rem;
}

p { margin-bottom: 0.9rem; color: var(--ink-soft); }

code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.9em;
    background: var(--paper-tint);
    padding: 0.1em 0.35em;
    border-radius: 4px;
}

/* Dark bands — light text on hero/CTA inside portal-leaflet */
.portal-leaflet .hero p,
.portal-leaflet .cta-section p,
.portal-leaflet footer p {
    color: inherit;
}

.portal-leaflet .hero h2,
.portal-leaflet .hero h3,
.portal-leaflet .cta-section h2,
.portal-leaflet .cta-section h3,
.portal-leaflet footer h2,
.portal-leaflet footer h3 {
    color: inherit;
}

.portal-leaflet .lead {
    font-size: 1.1rem;
    color: var(--ink-muted);
    max-width: 40rem;
    line-height: 1.7;
}

/* ── Grids & cards ── */
.portal-leaflet .grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 1.75rem;
}

.portal-leaflet .grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.125rem;
    margin-top: 1.75rem;
}

.portal-leaflet .card {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 1.5rem 1.5rem 1.65rem;
    box-shadow: var(--shadow-sm);
    position: relative;
}

.portal-leaflet .card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1rem;
    bottom: 1rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--border-strong);
}

.portal-leaflet .card.featured::before {
    background: linear-gradient(180deg, var(--brand), var(--accent));
}

.portal-leaflet .card-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--brand-light);
    color: var(--brand-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 0.85rem;
}

.portal-leaflet .card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 0.5rem;
}

.portal-leaflet .card p {
    font-size: 0.92rem;
    color: var(--ink-muted);
    margin: 0;
}

.portal-leaflet .card ul {
    margin: 0.75rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.88rem;
    color: var(--ink-muted);
}

.card ul li { margin-bottom: 0.35rem; }

.portal-leaflet .card.featured {
    border-color: var(--brand);
    box-shadow: var(--shadow), 0 0 0 1px var(--brand-glow);
}

.portal-leaflet .module-tag {
    display: inline-block;
    background: var(--paper-tint);
    color: var(--brand-dark);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    margin-bottom: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── Pitch / quote ── */
.portal-leaflet .pitch-box {
    background: var(--paper);
    border: 1px solid var(--border);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius);
    padding: 1.75rem 2rem;
    margin: 1.75rem 0;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--ink-soft);
    box-shadow: var(--shadow-sm);
}

.portal-leaflet .pitch-box cite {
    display: block;
    margin-top: 1rem;
    font-style: normal;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-faint);
    letter-spacing: 0.04em;
}

/* ── Tables ── */
.portal-leaflet .compare-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    background: var(--paper);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.compare-table th,
.portal-leaflet .compare-table td {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    color: var(--ink-soft);
}

.portal-leaflet .compare-table th {
    background: var(--ink);
    color: var(--hero-text);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
}

.compare-table tr:last-child td { border-bottom: none; }

.portal-leaflet .compare-table tbody tr:nth-child(even) td {
    background: var(--paper-tint);
}

.portal-leaflet .compare-table tbody tr:nth-child(odd) td {
    background: var(--paper);
}

.check { color: var(--brand-dark); font-weight: 700; }
.cross { color: #b91c1c; font-weight: 700; }

/* ── Personas ── */
.portal-leaflet .persona {
    border-left: 4px solid var(--accent);
    padding: 0 0 0 1.25rem;
    margin-bottom: 1.75rem;
}

.portal-leaflet .persona h4 {
    color: var(--ink);
    margin-bottom: 0.5rem;
    font-size: 1.02rem;
    font-weight: 700;
}

.portal-leaflet .persona .pain {
    color: #991b1b;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}

.portal-leaflet .persona .gain {
    color: var(--brand-dark);
    font-size: 0.9rem;
}

/* ── Q&A blocks ── */
.portal-leaflet .qa-block {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 0.85rem;
    overflow: hidden;
}

.portal-leaflet .qa-block .q {
    background: var(--paper-tint);
    padding: 0.9rem 1.25rem;
    font-weight: 700;
    color: var(--ink);
    font-size: 0.93rem;
    border-bottom: 1px solid var(--border);
}

.portal-leaflet .qa-block .a {
    padding: 0.9rem 1.25rem;
    font-size: 0.9rem;
    color: var(--ink-muted);
}

/* ── Pricing ── */
.portal-leaflet .pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: 1.75rem;
}

.portal-leaflet .pricing-card {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.portal-leaflet .pricing-card.recommended {
    border: 2px solid var(--brand);
    box-shadow: var(--shadow-lg);
    background: linear-gradient(180deg, var(--paper) 0%, #f0fdfa 100%);
}

.portal-leaflet .pricing-card .tier-name {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 0.5rem;
}

.portal-leaflet .pricing-card h4 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.75rem;
}

.portal-leaflet .pricing-card ul {
    list-style: none;
    text-align: left;
    font-size: 0.86rem;
    color: var(--ink-muted);
    margin: 1rem 0;
}

.portal-leaflet .pricing-card ul li {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
    padding-left: 1.4rem;
    position: relative;
}

.pricing-card ul li:last-child { border-bottom: none; }

.portal-leaflet .pricing-card ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--brand);
    font-weight: 700;
}

.portal-leaflet .pricing-card .tier-note {
    font-size: 0.82rem;
    color: var(--ink-faint);
    margin-top: 0.5rem;
}

/* ── Timeline ── */
.timeline { margin-top: 1.75rem; }

.portal-leaflet .timeline-item {
    display: flex;
    gap: 1.15rem;
    margin-bottom: 1.35rem;
}

.portal-leaflet .timeline-marker {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--hero-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.82rem;
}

.portal-leaflet .timeline-content h4 {
    margin: 0 0 0.3rem;
    color: var(--ink);
    font-size: 0.98rem;
    font-weight: 700;
}

.portal-leaflet .timeline-content p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ink-muted);
}

/* ── CTA (dark band — light text) ── */
.portal-leaflet .cta-section {
    background: linear-gradient(145deg, var(--hero-from), var(--hero-to));
    color: var(--hero-text);
    text-align: center;
    padding: 4rem 2rem;
}

.portal-leaflet .cta-section h2 {
    color: var(--hero-text);
    margin-bottom: 0.75rem;
}

.portal-leaflet .cta-section p {
    color: var(--hero-muted);
    max-width: 32rem;
    margin: 0 auto 1.75rem;
}

.portal-leaflet .cta-note {
    margin-top: 2rem !important;
    font-size: 0.8rem !important;
    color: rgba(203, 213, 225, 0.85) !important;
}

.portal-leaflet .cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.portal-leaflet .btn {
    display: inline-block;
    padding: 0.8rem 1.75rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.portal-leaflet .btn-primary {
    background: var(--hero-text);
    color: var(--ink);
    border: 2px solid var(--hero-text);
}

.portal-leaflet .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.portal-leaflet .btn-secondary {
    background: transparent;
    color: var(--hero-text);
    border: 2px solid rgba(248, 250, 252, 0.45);
}

.portal-leaflet .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--hero-text);
}

/* ── Footer ── */
.portal-leaflet footer {
    background: var(--ink);
    color: #cbd5e1;
    text-align: center;
    padding: 2rem 1.5rem;
    font-size: 0.82rem;
}

.portal-leaflet footer p {
    margin-bottom: 0.5rem;
}

.portal-leaflet footer p:last-child {
    margin-bottom: 0;
}

footer strong { color: #f8fafc; }

.portal-leaflet footer .footer-sub {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: #94a3b8;
    opacity: 1;
}

.text-muted { color: var(--ink-faint); font-size: 0.85rem; }

.portal-leaflet .tier-note {
    font-size: 0.82rem;
    color: var(--ink-faint);
    margin-top: 0.5rem;
}

.pitch-box--long p:last-child { margin-bottom: 0; }

/* ── Harmony Model ── */
.portal-leaflet .harmony-band {
    background: linear-gradient(180deg, #f0fdfa 0%, var(--paper-warm) 40%, var(--paper-warm) 100%);
    border-top: 1px solid var(--border);
    border-bottom: 3px solid var(--brand);
}

.portal-leaflet .harmony-lead {
    max-width: 44rem;
}

.portal-leaflet .harmony-quote {
    border-left-color: var(--accent);
    background: var(--paper);
}

.portal-leaflet .harmony-principles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.125rem;
    margin: 2rem 0 2.5rem;
}

.portal-leaflet .harmony-principle {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.35rem 1.35rem 1.35rem 1.5rem;
    box-shadow: var(--shadow-sm);
    position: relative;
}

.portal-leaflet .harmony-principle::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85rem;
    bottom: 0.85rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--brand), var(--accent));
}

.portal-leaflet .principle-num {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand);
    opacity: 0.45;
    line-height: 1;
}

.portal-leaflet .principle-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

/* ── Glyphs (Harmony section — SVG masks, no external deps) ── */
.portal-leaflet .glyph {
    display: inline-block;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--brand-light);
    flex-shrink: 0;
    position: relative;
}

.portal-leaflet .glyph::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 22px;
    height: 22px;
    background-color: var(--brand-dark);
    mask: var(--glyph-icon) center / contain no-repeat;
    -webkit-mask: var(--glyph-icon) center / contain no-repeat;
}

.portal-leaflet .glyph-sm {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    margin: 0 auto 0.6rem;
}

.portal-leaflet .glyph-sm::before {
    width: 18px;
    height: 18px;
}

.portal-leaflet .glyph-on-dark {
    background: rgba(255, 255, 255, 0.12);
    margin: 0 auto 0.75rem;
}

.portal-leaflet .glyph-on-dark::before {
    background-color: #5eead4;
}

.glyph-truth { --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6'/%3E%3C/svg%3E"); }
.glyph-access { --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3l7 4v5c0 4.4-3.1 8.4-7 9-3.9-.6-7-4.6-7-9V7l7-4z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.glyph-flow { --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 12h6l-2-2m2 2l-2 2M20 12h-6l2-2m-2 2l2 2M12 4v6m0 0l-2-2m2 2l2-2M12 20v-6m0 0l-2 2m2-2l2 2'/%3E%3C/svg%3E"); }
.glyph-boundary { --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 018 0v3'/%3E%3Ccircle cx='12' cy='16' r='1' fill='%23000'/%3E%3C/svg%3E"); }
.glyph-compose { --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='8' width='8' height='8' rx='1'/%3E%3Crect x='13' y='3' width='8' height='8' rx='1'/%3E%3Crect x='13' y='13' width='8' height='8' rx='1'/%3E%3Cpath d='M7 16v3M16 7h3'/%3E%3C/svg%3E"); }
.glyph-portal { --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E"); }
.glyph-ariadne { --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 4v8l5 3'/%3E%3C/svg%3E"); }
.glyph-ermis { --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='11' width='18' height='10' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0110 0v4'/%3E%3C/svg%3E"); }
.glyph-mobile { --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='7' y='2' width='10' height='20' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
.glyph-auto { --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M13 2L3 14h8l-1 8 10-12h-8l1-8z'/%3E%3C/svg%3E"); }
.glyph-scada { --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 18v-4M8 18V8M12 18V4M16 18v-6M20 18v-2'/%3E%3C/svg%3E"); }
.glyph-core { --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v4M12 18v4M2 12h4M18 12h4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M4.9 19.1l2.8-2.8M16.3 7.7l2.8-2.8'/%3E%3C/svg%3E"); }
.glyph-field { --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E"); }
.glyph-pmo { --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M8 17v-5M12 17V7M16 17v-3'/%3E%3C/svg%3E"); }
.glyph-client { --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 4h16v16H4zM4 8h16M8 4v4'/%3E%3Cpath d='M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
.glyph-compliance { --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11'/%3E%3C/svg%3E"); }
.glyph-people { --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='7' r='3'/%3E%3Cpath d='M2 21v-1a5 5 0 015-5h4a5 5 0 015 5v1'/%3E%3Ccircle cx='17' cy='8' r='2'/%3E%3Cpath d='M22 21v-1a3 3 0 00-2-2.8'/%3E%3C/svg%3E"); }

.portal-leaflet .harmony-principle h4 {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.45rem;
}

.portal-leaflet .harmony-principle p {
    font-size: 0.88rem;
    color: var(--ink-muted);
    margin: 0;
    line-height: 1.55;
}

.portal-leaflet .harmony-diagram {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 2.5rem;
}

.portal-leaflet .harmony-diagram-label {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 1.25rem;
}

.portal-leaflet .harmony-spokes {
    margin-top: 0;
}

.portal-leaflet .harmony-core {
    margin-top: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(145deg, var(--hero-from), var(--hero-to));
    border-radius: var(--radius);
    text-align: center;
    color: var(--hero-text);
}

.portal-leaflet .harmony-core strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--hero-text);
}

.portal-leaflet .harmony-core span {
    font-size: 0.82rem;
    color: var(--hero-muted);
    line-height: 1.5;
}

.portal-leaflet .harmony-subhead {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 0.35rem;
}

.portal-leaflet .harmony-journey {
    margin-top: 1.25rem;
    position: relative;
    padding-left: 0.25rem;
}

.portal-leaflet .harmony-journey::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 18px;
    bottom: 18px;
    width: 2px;
    background: linear-gradient(180deg, var(--brand), var(--accent));
    border-radius: 2px;
}

.portal-leaflet .journey-step {
    display: flex;
    gap: 1.15rem;
    margin-bottom: 1.35rem;
    position: relative;
}

.portal-leaflet .journey-step:last-child {
    margin-bottom: 0;
}

.portal-leaflet .journey-marker {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--brand);
    z-index: 1;
    box-shadow: 0 0 0 3px var(--paper-warm);
    position: relative;
}

.portal-leaflet .journey-marker::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    background-color: var(--hero-text);
    mask: var(--glyph-icon) center / contain no-repeat;
    -webkit-mask: var(--glyph-icon) center / contain no-repeat;
}

.portal-leaflet .harmony-band .journey-marker {
    box-shadow: 0 0 0 3px #f0fdfa;
}

.portal-leaflet .journey-content {
    flex: 1;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-sm);
}

.portal-leaflet .journey-content h4 {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
}

.portal-leaflet .journey-content p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--ink-muted);
    line-height: 1.55;
}

/* ── Ecosystem (legacy nodes) ── */
.portal-leaflet .ecosystem-intro {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-top: 1.75rem;
    box-shadow: var(--shadow-sm);
}

.portal-leaflet .ecosystem-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.portal-leaflet .flow-node {
    background: var(--paper-tint);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.15rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.portal-leaflet .flow-node strong {
    display: block;
    font-size: 0.92rem;
    color: var(--ink);
    margin-bottom: 0.35rem;
}

.portal-leaflet .flow-node span {
    font-size: 0.78rem;
    color: var(--ink-muted);
    line-height: 1.4;
}

.portal-leaflet .flow-arrow {
    display: none;
}

.portal-leaflet .product-family {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 2px solid var(--border);
}

.portal-leaflet .product-family:first-of-type {
    margin-top: 1.5rem;
    padding-top: 0;
    border-top: none;
}

.portal-leaflet .family-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    margin-bottom: 0.35rem;
}

.portal-leaflet .family-header h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--ink);
}

.portal-leaflet .family-tag {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-dark);
    background: var(--brand-light);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}

.portal-leaflet .family-desc {
    font-size: 0.95rem;
    color: var(--ink-muted);
    margin-bottom: 1.25rem;
    max-width: 42rem;
}

.portal-leaflet .h2-sub {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--ink-faint);
}

.grid-mt { margin-top: 1rem; }

.pitch-box--long { font-style: normal; font-size: 1rem; }
.pitch-box--long p { margin-bottom: 0.75rem; }
.pitch-box--long p:last-child { margin-bottom: 0; }

/* ── Utility ── */

/* ==========================================================================
   PRINT / PDF — optimized for email attachment
   ========================================================================== */
@page {
    size: A4;
    margin: 14mm 16mm;
}

@media print {
.portal-leaflet html { font-size: 11pt; }
.portal-leaflet body {
        background: #fff !important;
        color: #000 !important;
    }
.portal-leaflet .wrap { max-width: 100%; padding: 0; }

    /* Preserve intentional dark sections for cover impact */
    .hero,
    .cta-section,
    footer,
    .compare-table th {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
.portal-leaflet .hero {
        padding: 2.5rem 0 2.75rem;
        break-after: avoid;
    }
.portal-leaflet .hero::before { display: none; }
.portal-leaflet section {
        padding: 1.75rem 0;
        break-inside: avoid;
    }
.portal-leaflet section:nth-of-type(even), .portal-leaflet section:nth-of-type(odd):not(.hero):not(.cta-section) {
        background: #fff !important;
        border: none !important;
    }
.portal-leaflet .card, .portal-leaflet .qa-block, .portal-leaflet .pricing-card, .portal-leaflet .pitch-box {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
.portal-leaflet .card.featured {
        border: 1.5px solid #0f766e !important;
    }
.portal-leaflet .grid-2, .portal-leaflet .grid-3, .portal-leaflet .pricing-grid, .portal-leaflet .hero-stats {
        gap: 0.75rem;
    }
.portal-leaflet .compare-table {
        font-size: 9pt;
        break-inside: avoid;
    }
.portal-leaflet .compare-table th {
        background: #0c1222 !important;
        color: #fff !important;
    }
.portal-leaflet .compare-table td {
        color: #1e293b !important;
    }
.portal-leaflet .btn {
        border: 1px solid #333 !important;
        color: #000 !important;
        background: #eee !important;
        padding: 0.4rem 1rem;
        font-size: 9pt;
    }
.portal-leaflet .cta-section {
        padding: 2rem 0;
        break-inside: avoid;
    }
.portal-leaflet .cta-section h2, .portal-leaflet .cta-section p { color: #f8fafc !important; }
.portal-leaflet footer {
        background: #0c1222 !important;
        color: #cbd5e1 !important;
    }
.portal-leaflet footer p, .portal-leaflet footer .footer-sub {
        color: #cbd5e1 !important;
    }
.portal-leaflet footer strong {
        color: #f8fafc !important;
    }
.portal-leaflet .hero {
        padding: 2.5rem 0 2.75rem;
        break-after: avoid;
        color: #f8fafc !important;
    }
.portal-leaflet .hero-badge, .portal-leaflet .hero h1 {
        color: #f8fafc !important;
    }
.portal-leaflet .hero .tagline {
        color: #cbd5e1 !important;
    }
.portal-leaflet .hero-stat strong {
        color: #5eead4 !important;
    }
.portal-leaflet .hero-stat span {
        color: #cbd5e1 !important;
    }
.portal-leaflet .hero p {
        color: inherit !important;
    }
.portal-leaflet .harmony-core {
        background: #0c1222 !important;
        color: #f8fafc !important;
    }
.portal-leaflet .harmony-core strong {
        color: #f8fafc !important;
    }
.portal-leaflet .harmony-core span {
        color: #cbd5e1 !important;
    }
.portal-leaflet .harmony-band {
        background: #f0fdfa !important;
        break-inside: avoid;
    }
.portal-leaflet .journey-step, .portal-leaflet .harmony-principle {
        break-inside: avoid;
    }
.portal-leaflet a[href]::after {
        content: " (" attr(href) ")";
        font-size: 8pt;
        color: #555;
        word-break: break-all;
    }
.portal-leaflet a[href^="mailto:"]::after, .portal-leaflet a[href="Default.aspx"]::after { content: ""; }
.portal-leaflet h2 { break-after: avoid; }
.portal-leaflet .persona { break-inside: avoid; }
}

@media (max-width: 640px) {
.portal-leaflet .wrap { padding: 0 1.25rem; }
.portal-leaflet .hero { padding: 2.75rem 0 3rem; }
.portal-leaflet section { padding: 2.75rem 0; }
}