/**
 * AZ Marketing — MK design system (black + metallic silver/gold)
 * ===============================================================
 * The shared surface for every marketing_website page: the tokens and
 * component primitives that the landing page and the seven platform
 * solution pages all build on. Page-specific visuals stay inline in
 * their templates; anything used by two or more pages lives here.
 *
 * Companion behaviors: static/safety-az/marketing/mk-marketing.js
 * (counters, scroll progress, rail scrollspy, sequence player, feed
 * cycler). The reveal-on-scroll observer for .mk-reveal ships in
 * marketing_website/layout.html.
 */

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
    /* TUNET-inspired — true black with metallic silver + gold */
    --primary-bg: #000000;
    --accent-gold: #d8b14a;
    --accent-gold-bright: #f8e9ad;
    --accent-silver: #cbd1de;
    /* Legacy accent names repointed to the metallic palette so existing
       green/sky usages inherit the new theme automatically */
    --accent-blue: #cbd1de;
    --accent-green: #d8b14a;
    --accent-sky: #cbd1de;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.75);
    --text-tertiary: rgba(255, 255, 255, 0.55);
    --glass-bg: rgba(8, 8, 10, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
    --card-bg: rgba(18, 18, 20, 0.55);
    --glow-color: rgba(216, 177, 74, 0.4);
    --zinc-400: #a1a1aa;
    --zinc-500: #71717a;
    --zinc-600: #52525b;
    --zinc-700: #3f3f46;
    --zinc-800: #27272a;
    --zinc-900: #121214;
}

body.az-marketing-page {
    background-color: var(--primary-bg) !important;
    color: var(--text-primary);
    font-family: 'Inter', system-ui, sans-serif;
}

/* Ambient Noise Texture Overlay */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.03;
    pointer-events: none;
    z-index: 9999;
    background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22/%3E%3C/svg%3E');
}

/* ==========================================================================
   Metallic text helpers
   ========================================================================== */
.branded-text {
    background: linear-gradient(135deg, #ffffff 0%, #cbd1de 50%, #8b93a4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

.green-text {
    color: var(--accent-gold) !important;
    text-shadow: 0 0 22px rgba(216, 177, 74, 0.35);
}

.sky-text {
    color: var(--accent-silver) !important;
    text-shadow: 0 0 22px rgba(203, 209, 222, 0.28);
}

.gradient-text {
    background: linear-gradient(135deg, #f8e9ad 0%, #d8b14a 45%, #b8902a 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: mk-text-shimmer 7s linear infinite;
}

@keyframes mk-text-shimmer {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* ==========================================================================
   Hero scaffold — split layout: copy left, live app window right
   ========================================================================== */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: 52px;
    padding-bottom: 52px;
    background-color: var(--primary-bg);
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 0;
    pointer-events: none;
}

/* Void Light Glows — soft radial gradients instead of filter:blur on
   ~1000px layers: identical look over pure black, no per-frame filter cost */
.void-light-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
    height: 1000px;
    background: radial-gradient(circle, rgba(216, 177, 74, 0.09) 0%, rgba(216, 177, 74, 0.03) 35%, transparent 68%);
    border-radius: 50%;
    animation: pulse-slow 8s ease-in-out infinite;
    pointer-events: none;
}

.void-light-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(203, 209, 222, 0.07) 0%, rgba(203, 209, 222, 0.02) 40%, transparent 68%);
    border-radius: 50%;
    pointer-events: none;
}

.void-light-right {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(216, 177, 74, 0.08) 0%, rgba(216, 177, 74, 0.02) 40%, transparent 68%);
    border-radius: 50%;
    pointer-events: none;
}

@keyframes pulse-slow {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.05); }
}

/* Animated Grid Background - Perspective Floor */
.hero-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 100px 100px;
    z-index: 0;
    opacity: 0.2;
    transform: rotateX(60deg) scale(2);
    transform-origin: bottom;
    perspective: 1000px;
}

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

.hero2-inner {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1.04fr 0.96fr;
    align-items: center;
    gap: 3rem;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

.hero2-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    max-width: 640px;
}
.hero2-copy .status-pill { margin-bottom: 1.4rem; }

.hero2-title {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.05em;
    font-size: clamp(2.9rem, 5.2vw, 5.2rem);
    line-height: 0.96;
    margin-bottom: 1.5rem;
}
.hero2-title span { display: block; text-wrap: balance; }
.hero2-title .gradient-text { padding-bottom: 0.08em; }

.hero2-sub {
    max-width: 540px;
    margin: 0 0 1.9rem;
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 1.65;
    color: var(--zinc-400);
    font-weight: 300;
}

.hero2-visual {
    position: relative;
    min-width: 0;
    max-width: 100%;
    perspective: 1800px;
}

@media (max-width: 991px) {
    .hero2-inner { grid-template-columns: 1fr; gap: 3rem; }
    .hero2-copy { max-width: 680px; }
}

.lead {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: var(--zinc-400);
    font-weight: 300;
    max-width: 600px;
    line-height: 1.7;
    margin-bottom: 2.5rem;
}
.lead strong {
    color: #fff;
    font-weight: 500;
}
.lead .mono-label { display: block; }

/* Refined eyebrow label — always its own line above the copy */
.mono-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--accent-gold);
    margin-bottom: 0.8rem;
    letter-spacing: 0.18em;
}
.mono-label::before {
    content: '';
    width: 18px;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-gold), transparent);
}
/* Silver variant for provider-accented sections */
.mono-label--silver { color: var(--accent-silver); }
.mono-label--silver::before { background: linear-gradient(90deg, var(--accent-silver), transparent); }
/* Platinum variant for authority-accented sections */
.mono-label--plat { color: #f5f7fc; }
.mono-label--plat::before { background: linear-gradient(90deg, #f5f7fc, transparent); }

/* Section sub-header copy: calmer measure next to the display titles */
.az-align-end p[style*="border-left"],
.mk-side-note {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--zinc-400);
    max-width: 34ch;
}
.mk-side-note {
    border-left: 1px solid var(--zinc-800);
    padding-left: 1.5rem;
    margin-bottom: 0;
}

/* Space Grotesk display headline used by every TUNET-style section header */
.mk-display {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.06em;
    line-height: 0.9;
}

/* Numbered monospace pill above card titles (01 // CORE …) */
.mk-badge-pill {
    font-family: monospace;
    font-size: 0.75rem;
    color: rgba(216, 177, 74, 0.85);
    letter-spacing: 0.1em;
    border: 1px solid rgba(216, 177, 74, 0.25);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    display: inline-block;
}
.mk-badge-pill--silver {
    color: rgba(203, 209, 222, 0.85);
    border-color: rgba(203, 209, 222, 0.25);
}
.mk-badge-pill--plat {
    color: rgba(245, 247, 252, 0.85);
    border-color: rgba(245, 247, 252, 0.25);
}

/* Card title + copy used inside glass cards on platform rows */
.mk-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}
.mk-card-copy {
    color: var(--zinc-400);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.mk-feat-ico { color: var(--accent-green); }
.mk-feat-ico--silver { color: var(--accent-silver); }
.mk-feat-ico--plat { color: #f5f7fc; }
.mk-feat-lab {
    font-size: 0.875rem;
    color: var(--zinc-400);
}
.mk-card-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-gold);
    text-decoration: none;
}
.mk-card-link--silver { color: var(--accent-silver); }
.mk-card-link--plat { color: #f5f7fc; }

/* ==========================================================================
   Status pill
   ========================================================================== */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(24, 24, 27, 0.3);
    backdrop-filter: blur(12px);
    margin-bottom: 2rem;
}

.status-pill .ping {
    position: relative;
    width: 0.5rem;
    height: 0.5rem;
}

.status-pill .ping::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent-green);
    border-radius: 50%;
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.status-pill .ping::after {
    content: '';
    position: relative;
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--accent-green);
    border-radius: 50%;
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

.status-pill span {
    font-family: monospace;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--zinc-400);
}

/* ==========================================================================
   Glass card (+ pointer-reactive gold spotlight via .mk-spotlight)
   ========================================================================== */
.glass-card {
    position: relative;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 4px 20px rgba(0,0,0,0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.5s ease;
}

.glass-card.mk-spotlight::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(220px circle at var(--mk-mx, 50%) var(--mk-my, 0%), rgba(216, 177, 74, 0.12), transparent 60%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.glass-card.mk-spotlight:hover::after { opacity: 1; }

.glass-card:hover {
    background: rgba(10, 10, 12, 0.9);
    border-color: var(--mk-gold-line, rgba(216, 177, 74, 0.22));
    transform: translateY(-4px);
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.9), 0 0 40px -18px rgba(216, 177, 74, 0.4);
}

/* ==========================================================================
   CTA buttons
   ========================================================================== */
/* Element-qualified selectors so this wins over the legacy
   .green-cta-button pill in platform_layout_elements.css (loaded after) */
a.green-cta-button,
button.green-cta-button {
    background: linear-gradient(135deg, var(--accent-gold-bright) 0%, var(--accent-gold) 100%);
    color: #1a1407;
    border: none;
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: -0.02em;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px -14px rgba(216, 177, 74, 0.5);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-transform: none;
    text-decoration: none;
}

a.green-cta-button:hover,
button.green-cta-button:hover {
    transform: translateY(-2px) scale(1.02);
    background: linear-gradient(135deg, #ffffff 0%, var(--accent-gold-bright) 100%);
    box-shadow: 0 14px 40px -10px rgba(216, 177, 74, 0.55);
    color: #1a1407;
}

a.green-cta-button:focus-visible,
button.green-cta-button:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 4px;
}

.secondary-cta-button {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    cursor: pointer;
    backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.secondary-cta-button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* ==========================================================================
   Mobile drawer skin (marketing pages)
   Below the drawer breakpoint the floating pill is replaced by the kit's
   drawer navbar + slide-out panel, whose default navy theme clashes with
   the black/gold marketing surface. Also restores the nav footer (Sign In)
   that the kit hides in drawer mode.
   ========================================================================== */
.az-marketing-page .az-drawer-navbar {
    background: rgba(9, 9, 11, 0.82);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.az-marketing-page .az-drawer-navbar-brand img { height: 30px !important; width: auto !important; }

/* Keep the mobile navigation affordance visible even when the Material
   Symbols webfont is late or unavailable. The three bars are CSS-rendered,
   so the control never degrades into an invisible 48px tap target. */
.az-marketing-page .az-drawer-navbar-toggle {
    position: relative;
    flex: 0 0 48px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.055);
    box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.9);
}
.az-marketing-page .az-drawer-navbar-toggle::before {
    content: '';
    width: 20px;
    height: 14px;
    background: linear-gradient(
        to bottom,
        currentColor 0 2px,
        transparent 2px 6px,
        currentColor 6px 8px,
        transparent 8px 12px,
        currentColor 12px 14px
    );
    border-radius: 1px;
}
.az-marketing-page .az-drawer-navbar-toggle .material-symbols-outlined {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.az-marketing-page nav.az-drawer-nav {
    background: radial-gradient(circle at 15% 20%, rgba(216, 177, 74, 0.07), transparent 70%), rgba(9, 9, 11, 0.97);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* Kit hides .az-navigation-footer in drawer mode (display:none !important);
   on marketing pages that footer holds the only Sign In entry point, so it
   must win it back with higher specificity. */
.az-marketing-page nav.az-drawer-nav .az-navigation-footer {
    display: block !important;
    margin-top: auto;
    padding: 1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.az-marketing-page nav.az-drawer-nav .az-navigation-signin-trigger {
    width: 100%;
    justify-content: center;
}
.az-marketing-page nav.az-drawer-nav .az-navigation-signin-dropdown {
    background: rgba(18, 18, 22, 0.98);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   Hero trust / capability strip + ecosystem icon stack
   ========================================================================== */
.hero-trust-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.hero2-copy .hero-trust-strip {
    justify-content: flex-start;
    width: 100%;
}
.hero-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--zinc-400);
    transition: color 0.3s ease;
}
.hero-trust-item i {
    font-size: 0.85rem;
    color: var(--accent-gold);
}
.hero-trust-item:hover { color: var(--accent-silver); }
.hero-trust-divider {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--zinc-600);
}

.hero-eco-strip {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.7rem;
}
.hero-eco-stack { display: flex; }
.hero-eco-stack a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    background: #101014;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--accent-gold);
    margin-left: -9px;
    position: relative;
    z-index: 1;
    text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}
.hero-eco-stack a:first-child { margin-left: 0; }
.hero-eco-stack a:hover {
    transform: translateY(-5px) scale(1.14);
    z-index: 5;
    border-color: currentColor;
}
.hero-eco-stack a.pro { color: var(--accent-silver); }
.hero-eco-stack a.gov { color: #f5f7fc; }
.hero-eco-text { font-size: 0.8rem; color: var(--zinc-400); line-height: 1.5; }
.hero-eco-text b { color: #fff; font-weight: 600; }
@media (max-width: 600px) {
    .hero-eco-text { font-size: 0.74rem; }
}

/* ==========================================================================
   Stat band
   ========================================================================== */
.stat-band {
    position: relative;
    padding: 4.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background:
        radial-gradient(80% 120% at 50% 0%, rgba(216, 177, 74, 0.06), transparent 60%),
        var(--primary-bg);
}
.stat-band-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.stat-cell {
    text-align: center;
    padding: 0 1rem;
    position: relative;
}
.stat-cell:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 12%;
    height: 76%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.10), transparent);
}
.stat-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, #f8e9ad 0%, #d8b14a 55%, #b8902a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.stat-num-text {
    background: linear-gradient(135deg, #ffffff 0%, #cbd1de 50%, #8b93a4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stat-cap {
    margin-top: 0.75rem;
    font-size: 0.82rem;
    color: var(--zinc-400);
    line-height: 1.4;
}
@media (max-width: 768px) {
    .stat-band-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
    .stat-cell:nth-child(2)::after { display: none; }
}

/* Ticker dot (final CTA footer note et al.) */
.ticker-dot {
    width: 0.375rem;
    height: 0.375rem;
    background: var(--zinc-700);
    border-radius: 50%;
}
.ticker-dot.active {
    background: var(--accent-green);
    box-shadow: 0 0 8px var(--accent-green);
}

/* Scroll progress indicator (thin gold line, top of viewport) */
.mk-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, #b8902a, #f8e9ad, #cbd1de);
    z-index: 1200;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(216, 177, 74, 0.5);
}

/* ==========================================================================
   UNIFIED PLATFORM PREVIEW FRAME (.mk-app-window)
   Product-style window chrome — title bar, traffic dots and a live badge —
   so each platform visual reads like the real app. Gold accent default,
   silver for providers.
   ========================================================================== */
.mk-app-window {
    position: relative;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(8, 10, 16, 0.72);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 40px 90px -42px rgba(0, 0, 0, 0.92),
        0 0 0 1px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
    will-change: transform;
}
.mk-app-window::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 90px -26px rgba(216, 177, 74, 0.32) inset;
    pointer-events: none;
    transition: box-shadow 0.5s ease;
}
.mk-app-window--silver::after {
    box-shadow: 0 0 90px -26px rgba(203, 209, 222, 0.30) inset;
}
.mk-app-window:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 50px 110px -42px rgba(0, 0, 0, 0.95),
        0 0 50px -22px rgba(216, 177, 74, 0.45);
}
.mk-app-window--silver:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 50px 110px -42px rgba(0, 0, 0, 0.95),
        0 0 50px -22px rgba(203, 209, 222, 0.4);
}
.mk-app-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.02);
}
.mk-app-dots { display: flex; gap: 6px; }
.mk-app-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.mk-app-title {
    margin-left: 6px;
    font-size: 0.78rem;
    color: var(--zinc-400);
    font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk-app-title i { color: var(--accent-gold); margin-right: 0.45rem; }
.mk-app-window--silver .mk-app-title i { color: var(--accent-silver); }
.mk-app-live {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: #24c063; font-weight: 700;
}
.mk-app-live .dot { width: 6px; height: 6px; border-radius: 50%; background: #24c063; box-shadow: 0 0 8px #24c063; animation: pulse-slow 1.8s ease-in-out infinite; }
.mk-app-body {
    padding: 1.25rem;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Platform rows are plain blocks; the numbered badges (01 // CORE …)
   carry the sequencing. Generous shared vertical rhythm. */
.presentation-container {
    display: block;
    margin: 5.5rem 0;
}
.presentation_group { gap: 2.25rem; }
.presentation_group .glass-card { padding: 2.5rem; }
@media (max-width: 767px) {
    .presentation-container { margin: 3.25rem 0; }
    .presentation_group .glass-card { padding: 1.5rem; }
}

/* Equal-height rows: the window stretches to match its card, so the
   pair reads as one composed unit instead of a card + floating panel */
.presentation_group.az-align-center { align-items: stretch; }
.presentation_group > .az-col-6 > .mk-app-window {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.presentation_group .mk-app-body { flex: 1; }

/* Live KPI strip + activity feed */
.mk-kpi-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 0.9rem; }
.mk-kpi {
    padding: 0.6rem 0.7rem; border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.03);
}
.mk-kpi-val { font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; font-weight: 700; line-height: 1; color: var(--accent-gold-bright); }
.mk-kpi-val--warn { color: #ffb13d; }
.mk-kpi-val--silver { color: var(--accent-silver); }
.mk-kpi-lab { font-size: 0.66rem; color: var(--zinc-400); margin-top: 0.3rem; letter-spacing: 0.02em; }
.mk-feed {
    display: flex; align-items: center; gap: 0.5rem;
    margin-top: 0.85rem; padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.72rem; color: var(--zinc-400);
    min-height: 1.1rem;
}
.mk-feed > i { color: var(--accent-gold); font-size: 0.72rem; }
.mk-app-window--silver .mk-feed > i { color: var(--accent-silver); }
.mk-feed-text { transition: opacity 0.35s ease, transform 0.35s ease; }
.mk-feed-text.is-swap { opacity: 0; transform: translateY(4px); }
.mk-feed-text b { color: #e7e9ef; font-weight: 600; }

/* ==========================================================================
   Status chips
   ========================================================================== */
.mk-chip { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 999px; flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.3rem; transition: color .3s ease, background .3s ease; }
.mk-chip i { font-size: 0.6rem; }
.mk-chip--done { color: #24c063; background: rgba(36, 192, 99, 0.12); }
.mk-chip--prog { color: var(--accent-gold-bright); background: rgba(216, 177, 74, 0.14); }
.mk-chip--todo { color: var(--zinc-400); background: rgba(255, 255, 255, 0.06); }

/* ==========================================================================
   Register rows + sector bars (mk-reg / mk-sect) — the workhorse mocks
   ========================================================================== */
.mk-reg { display: flex; flex-direction: column; gap: 0.55rem; }
.mk-reg-row {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}
.mk-reg-ico {
    width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
    display: grid; place-items: center; font-size: 0.8rem;
    background: rgba(245, 247, 252, 0.08); color: var(--accent-silver);
}
.mk-reg-name {
    flex: 1; min-width: 0;
    font-size: 0.78rem; font-weight: 500; color: #e7e9ef;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk-reg-bar {
    width: 34%; min-width: 90px; max-width: 240px;
    height: 6px; border-radius: 999px; flex-shrink: 0;
    background: rgba(255, 255, 255, 0.08); overflow: hidden;
}
.mk-reg-fill {
    height: 100%; width: 0; border-radius: 999px;
    background: linear-gradient(90deg, #1c8f4c, #24c063);
    transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--d, 0s);
}
.mk-reg-fill--warn { background: linear-gradient(90deg, #b97a17, #ffb13d); }
.mk-reveal.is-in .mk-reg-fill { width: var(--w, 0%); }

.mk-sect { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.35rem; }
.mk-sect-row { display: flex; align-items: center; gap: 0.65rem; font-size: 0.72rem; color: var(--zinc-400); }
.mk-sect-lab { width: 100px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-sect-track { flex: 1; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.mk-sect-fill {
    height: 100%; width: 0; border-radius: 999px;
    background: linear-gradient(90deg, var(--mk-gold-3, #b8902a), var(--mk-gold-1, #f8e9ad));
    transition: width 1.3s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--d, 0s);
}
.mk-reveal.is-in .mk-sect-fill { width: var(--w, 0%); }
.mk-sect-val { width: 38px; text-align: right; color: #e7e9ef; font-weight: 600; font-family: 'Space Grotesk', sans-serif; }
.mk-sect-fill--ok { background: linear-gradient(90deg, #1c8f4c, #24c063); }
.mk-sect-fill--warn { background: linear-gradient(90deg, #b97a17, #ffb13d); }
.mk-sect--wide .mk-sect-lab { width: 160px; }
@media (prefers-reduced-motion: reduce) {
    .mk-reg-fill, .mk-sect-fill { transition: none; }
}

/* ==========================================================================
   SEQUENCE PLAYER (.mk-seq) — platform windows demo their job as a looping
   step sequence built from the register-row primitives. JS toggles
   .is-on / .is-done per step; the final .mk-seq-result row lights up green.
   ========================================================================== */
.mk-seq {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 100%;
}
.mk-seq-step { transition: border-color 0.35s ease, background 0.35s ease; }
/* High-specificity on purpose: the register reveal rule
   (.mk-reveal.is-in .mk-reg-fill) must not pre-fill sequence bars */
.mk-seq .mk-seq-step .mk-reg-bar .mk-reg-fill {
    width: 0;
    transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-seq .mk-seq-step.is-on .mk-reg-bar .mk-reg-fill,
.mk-seq .mk-seq-step.is-done .mk-reg-bar .mk-reg-fill { width: var(--w, 100%); }
.mk-seq-step.is-on {
    border-color: rgba(203, 209, 222, 0.4);
    background: rgba(203, 209, 222, 0.05);
}
/* Pending/Done chips swap via visibility, so labels stay translatable */
.mk-seq-step .mk-chip[data-done],
.mk-seq-result .mk-chip[data-done] { display: none; }
.mk-seq-step.is-done .mk-chip[data-done],
.mk-seq-result.is-done .mk-chip[data-done] { display: inline-flex; }
.mk-seq-step.is-done .mk-chip[data-wait],
.mk-seq-result.is-done .mk-chip[data-wait] { display: none; }
/* Measured values (bpm, scores…) fade in as each step completes */
.mk-seq-val {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: #e7e9ef;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.mk-seq-step.is-done .mk-seq-val { opacity: 1; }
/* Final outcome row */
.mk-seq-result {
    opacity: 0.45;
    transition: opacity 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.mk-seq-result.is-done {
    opacity: 1;
    border-color: rgba(36, 192, 99, 0.45);
    box-shadow: 0 0 24px -8px rgba(36, 192, 99, 0.5);
}
.mk-seq-ico--result { background: rgba(36, 192, 99, 0.12) !important; color: #24c063 !important; }
@media (prefers-reduced-motion: reduce) {
    .mk-seq-step .mk-reg-fill, .mk-seq-val, .mk-seq-result { transition: none; }
}

/* ==========================================================================
   PROVIDER VISUALS — Medicine vitals tile grid · Psychology aptitude gauge
   ========================================================================== */
.mk-vitals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}
.mk-vital {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}
.mk-vital > i { color: var(--accent-silver); font-size: 0.95rem; }
.mk-vital-lab { font-size: 0.66rem; color: var(--zinc-400); letter-spacing: 0.02em; }
.mk-vital-val { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; font-weight: 700; color: #fff; }
.mk-vital.is-done::after {
    content: '✓';
    position: absolute;
    top: 0.55rem;
    right: 0.7rem;
    color: #24c063;
    font-weight: 700;
    font-size: 0.8rem;
}

.mk-psy { display: flex; align-items: center; gap: 1.1rem; }
.mk-psy-ring {
    --p: 0;
    position: relative;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: conic-gradient(var(--accent-silver) calc(var(--p) * 1%), rgba(255, 255, 255, 0.08) 0);
    transition: --p 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-psy-ring::before {
    content: '';
    position: absolute;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #0c0e13;
}
.mk-psy-num {
    position: relative;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.4s ease 0.3s;
}
.mk-psy-cap {
    position: relative;
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--zinc-400);
    margin-top: 0.25rem;
}
.mk-seq.is-complete .mk-psy-ring { --p: 89; }
.mk-seq.is-complete .mk-psy-num { opacity: 1; }
.mk-psy-bars { flex: 1; display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.mk-psy-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0.45rem;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: border-color 0.35s ease, background 0.35s ease;
}
.mk-psy-lab {
    width: 104px;
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--zinc-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mk-psy-row .mk-reg-bar { width: auto; flex: 1; min-width: 50px; max-width: none; }
.mk-psy-row .mk-seq-val { width: 24px; text-align: right; }
@media (max-width: 767px) {
    .mk-psy { flex-direction: column; align-items: stretch; }
    .mk-psy-ring { margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
    .mk-psy-ring { transition: none; }
}

/* ==========================================================================
   EMPLOYEE PORTAL MOCK (.mk-portal / .mk-course) — courses complete live,
   the ring counts up and a certificate toast slides in (JS-driven loop)
   ========================================================================== */
@property --p { syntax: '<integer>'; inherits: false; initial-value: 0; }
.mk-portal { display: flex; flex-direction: column; gap: 0.7rem; width: 100%; position: relative; }
.mk-portal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; }
.mk-portal-greet { font-size: 0.95rem; font-weight: 600; color: #fff; font-family: 'Space Grotesk', sans-serif; }
.mk-portal-ring {
    --p: 78;
    position: relative;
    width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center;
    background: conic-gradient(var(--accent-gold) calc(var(--p) * 1%), rgba(255,255,255,0.08) 0);
    transition: --p 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}
.mk-portal-ring.is-bump { box-shadow: 0 0 0 4px rgba(216, 177, 74, 0.18); }
.mk-portal-ring::before {
    content: ''; position: absolute; width: 40px; height: 40px; border-radius: 50%;
    background: #0b0d12;
}
.mk-portal-ring span { position: relative; font-size: 0.72rem; font-weight: 700; color: var(--accent-gold-bright); font-family: 'Space Grotesk', sans-serif; }

.mk-course {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.03);
    opacity: 0;
    transform: translateY(8px);
    animation: mk-course-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}
.mk-course:nth-child(2) { animation-delay: 0.12s; }
.mk-course:nth-child(3) { animation-delay: 0.24s; }
.mk-course:nth-child(4) { animation-delay: 0.36s; }
.mk-course:nth-child(5) { animation-delay: 0.48s; }
@keyframes mk-course-in { to { opacity: 1; transform: translateY(0); } }
.mk-course[data-state="prog"] { border-color: rgba(216, 177, 74, 0.35); background: rgba(216, 177, 74, 0.05); }
.mk-course.is-justdone { border-color: rgba(36, 192, 99, 0.45); box-shadow: 0 0 24px -8px rgba(36, 192, 99, 0.5); }
.mk-course-ico {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    display: grid; place-items: center; font-size: 0.95rem;
    background: rgba(216, 177, 74, 0.12); color: var(--accent-gold);
}
.mk-course-main { flex: 1; min-width: 0; }
.mk-course-name { font-size: 0.82rem; color: #e7e9ef; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-course-track { height: 5px; border-radius: 999px; background: rgba(255,255,255,0.08); margin-top: 0.45rem; overflow: hidden; }
.mk-course-fill {
    height: 100%; border-radius: 999px; width: 0;
    background: linear-gradient(90deg, #b8902a, #f8e9ad);
    transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.5s ease;
}
.mk-course[data-state="done"] .mk-course-fill { width: 100%; }
.mk-course[data-state="prog"] .mk-course-fill { width: 64%; }
.mk-course[data-state="todo"] .mk-course-fill { width: 8%; }
.mk-course[data-state="done"] .mk-course-fill,
.mk-course.is-justdone .mk-course-fill { background: linear-gradient(90deg, #1c8f4c, #24c063); }

/* Certificate toast */
.mk-portal-toast {
    position: absolute;
    left: 50%; bottom: -4px;
    transform: translate(-50%, 16px);
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.55rem 0.9rem;
    border-radius: 12px;
    background: rgba(12, 14, 18, 0.96);
    border: 1px solid rgba(36, 192, 99, 0.4);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.9);
    font-size: 0.74rem; color: #e7e9ef; white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 3;
}
.mk-portal-toast i { color: #24c063; }
.mk-portal-toast b { color: #fff; font-weight: 600; }
.mk-portal-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
    .mk-portal-ring { transition: none; }
    .mk-course { opacity: 1; transform: none; animation: none; }
    .mk-course-fill { transition: none; }
    .mk-portal-toast { transition: opacity 0.3s ease; }
}

/* ==========================================================================
   CAPABILITY CARDS — feature grid used on every platform solution page
   ========================================================================== */
.mk-cap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 2.5rem;
}
.mk-cap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.6rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: var(--card-bg);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.mk-cap:hover {
    transform: translateY(-4px);
    border-color: var(--mk-cap-line, rgba(216, 177, 74, 0.3));
    box-shadow: 0 22px 54px -24px rgba(0, 0, 0, 0.9), 0 0 36px -18px var(--mk-cap-glow, rgba(216, 177, 74, 0.45));
}
.mk-cap-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    background: var(--mk-cap-ico-bg, rgba(216, 177, 74, 0.12));
    color: var(--mk-cap-accent, var(--accent-gold));
}
.mk-cap h3 {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
}
.mk-cap > p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--zinc-400);
}
.mk-cap-list {
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.mk-cap-list li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--zinc-400);
}
.mk-cap-list li::before {
    content: '✓';
    color: var(--mk-cap-accent, var(--accent-gold));
    font-weight: 700;
    font-size: 0.7rem;
    flex-shrink: 0;
}
/* Accent variants (set on the grid or an individual card) */
.mk-cap--silver,
.mk-cap-grid--silver .mk-cap {
    --mk-cap-accent: var(--accent-silver);
    --mk-cap-ico-bg: rgba(203, 209, 222, 0.10);
    --mk-cap-line: rgba(203, 209, 222, 0.35);
    --mk-cap-glow: rgba(203, 209, 222, 0.4);
}
.mk-cap--plat,
.mk-cap-grid--plat .mk-cap {
    --mk-cap-accent: #f5f7fc;
    --mk-cap-ico-bg: rgba(245, 247, 252, 0.10);
    --mk-cap-line: rgba(245, 247, 252, 0.35);
    --mk-cap-glow: rgba(245, 247, 252, 0.35);
}
@media (max-width: 991px) {
    .mk-cap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .mk-cap-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SCOPE INDEX — dense grid of domain tiles ("everything inside") used by
   the platform solution pages to surface the full schema-derived scope
   ========================================================================== */
.mk-scope-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9rem;
    margin-top: 2.5rem;
}
.mk-scope {
    padding: 1.1rem 1.2rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(14, 14, 18, 0.6);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.mk-scope:hover {
    transform: translateY(-3px);
    border-color: var(--mk-cap-line, rgba(216, 177, 74, 0.3));
    box-shadow: 0 16px 40px -20px rgba(0, 0, 0, 0.9);
}
.mk-scope i {
    font-size: 0.95rem;
    color: var(--mk-cap-accent, var(--accent-gold));
}
.mk-scope h4 {
    margin: 0.55rem 0 0.3rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
}
.mk-scope p {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--zinc-400);
}
.mk-scope-grid--silver .mk-scope {
    --mk-cap-accent: var(--accent-silver);
    --mk-cap-line: rgba(203, 209, 222, 0.35);
}
.mk-scope-grid--plat .mk-scope {
    --mk-cap-accent: #f5f7fc;
    --mk-cap-line: rgba(245, 247, 252, 0.35);
}
@media (max-width: 1199px) {
    .mk-scope-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .mk-scope-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .mk-scope-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ECO FLOW CARDS — "what flows through the network" info tiles
   ========================================================================== */
.eco2-flows {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-top: 2.75rem;
}
.eco2-flow {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 1.25rem 1.4rem;
    border-radius: 16px;
    background: rgba(14, 14, 18, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.eco2-flow i {
    margin-top: 0.15rem;
    font-size: 1rem;
    color: var(--accent-gold);
}
.eco2-flow h6 {
    margin: 0 0 0.35rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
}
.eco2-flow p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--zinc-400);
}
.eco2-flow .mk-flow-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--accent-gold);
    text-decoration: none;
}
.eco2-flow .mk-flow-link:hover { color: var(--accent-gold-bright); }
@media (max-width: 991px) {
    .eco2-flows { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SECTION RAIL — floating right-hand section navigation with scrollspy.
   Desktop only; mobile keeps natural scrolling.
   ========================================================================== */
/* Depending on nav mode this layout scrolls the document, the body or
   .az-content-container — smooth-scroll all three. */
html, body, .az-content-container { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html, body, .az-content-container { scroll-behavior: auto; } }
/* Clear the floating nav pill when jumping to anchored sections */
.mk-anchor { scroll-margin-top: 90px; }

.mk-rail {
    position: fixed;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 7px;
    border-radius: 999px;
    background: rgba(10, 10, 12, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.8);
}
.mk-rail a {
    position: relative;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    text-decoration: none;
}
.mk-rail .rdot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, box-shadow 0.3s ease;
}
.mk-rail a:hover .rdot { background: #fff; transform: scale(1.3); }
.mk-rail a.is-active .rdot {
    background: var(--accent-gold);
    box-shadow: 0 0 12px rgba(216, 177, 74, 0.85);
    transform: scale(1.45);
}
.mk-rail .rlab {
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    white-space: nowrap;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mk-silver-2, #cbd1de);
    background: rgba(10, 10, 12, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.32rem 0.7rem;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Labels appear on hover only — the active section is marked by the
   gold dot, not a permanently floating pill */
.mk-rail a:hover .rlab { opacity: 1; transform: translateY(-50%) translateX(0); }
.mk-rail a.is-active .rlab {
    color: var(--accent-gold-bright);
    border-color: rgba(216, 177, 74, 0.35);
}
@media (max-width: 1279px) { .mk-rail { display: none; } }

/* ==========================================================================
   FINAL CTA — gradient-border briefing card
   ========================================================================== */
.mk-cta-frame {
    padding: 2px;
    border-radius: 2rem;
    background: linear-gradient(135deg, rgba(216, 177, 74, 0.35), rgba(203, 209, 222, 0.25), rgba(216, 177, 74, 0.35));
}
.mk-cta-frame > .glass-card {
    border-radius: calc(2rem - 2px);
    padding: 3rem;
    /* Opaque surface so the frame gradient reads as a 2px rim — a
       translucent card lets it wash the whole panel gold */
    background:
        radial-gradient(120% 120% at 50% -10%, rgba(216, 177, 74, 0.08), transparent 55%),
        linear-gradient(180deg, rgba(17, 17, 21, 0.99), rgba(9, 9, 11, 0.995));
}
@media (max-width: 767px) {
    .mk-cta-frame > .glass-card { padding: 1.75rem; }
}

/* ==========================================================================
   PERFORMANCE — animations pause while their stage is off-screen
   (class toggled by IntersectionObserver in mk-marketing.js)
   ========================================================================== */
.mk-offstage,
.mk-offstage * {
    animation-play-state: paused !important;
}

/* ==========================================================================
   Shared responsive touch-ups
   ========================================================================== */
@media (max-width: 767px) {
    .hero-section {
        min-height: auto;
        align-items: flex-start;
        padding-top: clamp(7.5rem, 26vw, 8.75rem);
        padding-bottom: 4rem;
    }
    .hero-section > .az-container {
        padding-left: clamp(1.25rem, 6vw, 1.5rem) !important;
        padding-right: clamp(1.25rem, 6vw, 1.5rem) !important;
    }
    /* Most page sections already supply their mobile gutter with az-px-4.
       Avoid adding the container's 32px padding again inside those sections. */
    .az-marketing-page .az-px-4 > .az-container {
        padding-left: 0;
        padding-right: 0;
    }
    .hero2-inner { gap: 2.5rem; }
    .hero2-inner,
    .hero2-copy,
    .hero2-visual,
    .hero2-copy > * {
        min-width: 0;
        max-width: 100%;
    }
    .hero2-title {
        width: 100%;
        font-size: clamp(2.3rem, 10.5vw, 3rem);
        line-height: 1.01;
        letter-spacing: -0.045em;
        overflow-wrap: break-word;
    }
    .hero2-title span {
        text-wrap: wrap;
        overflow-wrap: break-word;
    }
    .hero2-sub {
        width: 100%;
        font-size: 1rem;
        line-height: 1.6;
        overflow-wrap: break-word;
    }
    .hero2-copy .status-pill {
        max-width: 100%;
        gap: 0.6rem;
        padding: 0.5rem 0.8rem;
        border-radius: 1rem;
    }
    .hero2-copy .status-pill .ping { flex: 0 0 0.5rem; }
    .hero2-copy .status-pill span {
        min-width: 0;
        font-size: 0.58rem;
        line-height: 1.45;
        letter-spacing: 0.15em;
        overflow-wrap: anywhere;
    }
    .hero2-copy > .az-d-flex.az-flex-wrap {
        width: 100%;
        flex-wrap: wrap !important;
    }
    .mk-app-window,
    .hero-dash-window {
        width: 100%;
        max-width: 100%;
    }
    .presentation-container {
        width: 100%;
        min-width: 0;
    }
    .presentation-container > .presentation_group {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        gap: 1rem;
    }
    .presentation-container > .presentation_group > [class*='az-col-'] {
        min-width: 0;
        max-width: 100%;
    }
    body.az-marketing-page .presentation_group .sftz-public-presentation-content {
        padding-left: 0 !important;
    }
    .presentation_group .sftz-public-presentation-content .az-row {
        gap: 0.75rem;
    }
    .mk-app-body { min-height: 0; padding: 1rem; }
    .glass-card { padding: 1.5rem; }
    .display-3 { font-size: 2.4rem; }
    .mk-vitals { grid-template-columns: 1fr 1fr; }
    .final-cta-section .az-col-8 { grid-column: 1 / -1; }
    .final-cta-section .az-d-flex.az-flex-wrap {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    .final-cta-section .green-cta-button,
    .final-cta-section .secondary-cta-button {
        width: 100%;
        justify-content: center;
    }
}
@media (max-width: 480px) {
    .hero2-copy > .az-d-flex.az-flex-wrap {
        flex-direction: column;
        align-items: stretch;
    }
    .hero2-copy > .az-d-flex.az-flex-wrap > .green-cta-button,
    .hero2-copy > .az-d-flex.az-flex-wrap > .secondary-cta-button {
        width: 100%;
        justify-content: center;
    }
    .hero-trust-divider { display: none; }
    .hero-trust-strip { gap: 0.65rem 1rem; }
    .hero-eco-strip { align-items: flex-start; }
}
@media (max-width: 1199px) {
    .presentation-container .presentation_group > .az-col-6 { grid-column: span 12; }
}
@media (prefers-reduced-motion: reduce) {
    .mk-app-window, .mk-app-window:hover { transform: none; }
    .mk-app-live .dot { animation: none; }
}

/* ==========================================================================
   POV STRIP (.mk-pov) — "Same scene, another camera" cross-links at the
   foot of In-practice story cards. Ties each vignette to the sibling
   platforms that witness the same moment (see components/mk_pov.html).
   ========================================================================== */
.mk-pov {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1.1rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.13);
}
.mk-pov-lab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: monospace;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--zinc-500, #8b93a4);
    white-space: nowrap;
}
.mk-pov-lab i {
    font-size: 0.72rem;
    color: var(--accent-gold, #d8b14a);
}
.mk-pov-links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
}
.mk-pov-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mk-silver-2, #cbd1de);
    text-decoration: none;
    transition: color 0.25s ease;
}
.mk-pov-links a:hover { color: #fff; }
.mk-pov-links a i { font-size: 0.7rem; }