/*
Theme Name: Adamiro
Theme URI: https://adamiro.com
Author: Hojt Fredrik
Description: Official Adamiro Marketing Intelligence Platform theme. Swiss precision — Navy dominance, Electric Teal as surgical accent.
Version: 4.0.7
Text Domain: adamiro
*/

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

/* =============================================
   1. DESIGN TOKENS — V4 Swiss Navy + Electric Teal
   See: docs/BRAND_GUIDE.md & docs/COLOR_SYSTEM_V4_MIGRATION.md
   ============================================= */
:root {
    /* ── V4 Core Surfaces (v3-tight hues, dominant 90%) ── */
    --navy: #0B1426;
    --navy-deep: #050B17;
    --navy-surface: #1E293B;
    --navy-lift: #141F38;

    /* ── V4 Accent — surgical 10% (v3 hues) ───────────── */
    --teal: #2FB8A0;
    --teal-deep: #1E7A6B;

    /* ── V3 mood-palette accents (restored for section rhythm) ──
       Used in combination with the Swiss navy ground for:
       Hero = orange · Problem = coral+blue-deep · Approach = sage
       Statement = teal+orange · Capabilities = mixed per-cell.
       ────────────────────────────────────────────────── */
    --orange: #EC8B4C;
    --orange-warm: #F4A368;
    --coral-deep: #B85A35;
    --blue-deep: #2B4A7A;
    --blue-steel: #4A6B9A;
    --sage: #8AA686;
    --sage-deep: #5E7A5B;
    --cream: #F5F1E8;
    --cream-warm: #EDE6D3;
    --bone: #E8E2D4;
    --ice: #E8EEF7;

    /* Mood rgba / glow tokens (for radial gradients + tint overlays) */
    --orange-08: rgba(236, 139, 76, 0.08);
    --orange-12: rgba(236, 139, 76, 0.12);
    --orange-18: rgba(236, 139, 76, 0.18);
    --orange-30: rgba(236, 139, 76, 0.30);
    --sage-12: rgba(138, 166, 134, 0.12);
    --sage-18: rgba(138, 166, 134, 0.18);
    --blue-deep-18: rgba(43, 74, 122, 0.18);
    --coral-18: rgba(184, 90, 53, 0.18);

    /* ── V4 Hairlines (v3 teal hue) ──────────────────── */
    --hairline: rgba(47, 184, 160, 0.18);
    --hairline-strong: rgba(47, 184, 160, 0.35);
    --hairline-faint: rgba(47, 184, 160, 0.08);

    /* ── V4 Ink (text on dark) ───────────────────────── */
    --ink: #F1F5F9;
    --ink-body: rgba(241, 245, 249, 0.72);
    --ink-muted: rgba(241, 245, 249, 0.48);
    --ink-faint: rgba(241, 245, 249, 0.24);

    /* ── Ink on light (v3 approach section) ──────────── */
    --ink-dark: #1A2540;
    /* body text on cream */
    --ink-soft: #4A5570;
    /* muted text on cream */

    /* ── V4 Surface aliases ──────────────────────────── */
    --surface-base: var(--navy);
    --surface-card: var(--navy-surface);
    --surface-row: var(--navy-lift);
    --surface-sunken: var(--navy-deep);

    /* ── Dark mode defaults (brand DNA = dark) ───────── */
    --bg: var(--navy);
    --bg-alt: var(--navy-lift);
    --fg: var(--ink);
    --fg-muted: var(--ink-body);
    --fg-subtle: var(--ink-muted);
    --border-v3: var(--hairline);
    --card-bg: var(--surface-card);
    --glass-v3: var(--surface-card);
    /* V4: glass retired, maps to matte */

    /* ── Typography ──────────────────────────────────── */
    --font-body: 'Outfit', sans-serif;
    --font-heading: 'Outfit', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* ── Legacy aliases — retained for backwards-compat ─
       Old blocks / DB content that still reference these
       slugs will auto-adopt the V4 palette. Do not use
       these for new work.
       ──────────────────────────────────────────────── */
    --off-white: var(--ink);
    --petrol: var(--teal-deep);
    --teal-dark: var(--teal-deep);
    --light-blue: #E2E8F0;
    --pale-green: #E2E8F0;
    --gray: #64748B;
    --light-gray: #94A3B8;

    /* ── Legacy HSL tokens — remapped to V4 slate ───── */
    --h-primary: 174;
    --s-primary: 64%;
    --l-primary: 51%;
    --primary: var(--teal);
    --primary-light: rgba(47, 184, 160, 0.12);
    --primary-lighter: rgba(47, 184, 160, 0.06);
    --primary-hover: var(--teal-deep);
    --primary-10: rgba(47, 184, 160, 0.10);
    --primary-20: rgba(47, 184, 160, 0.20);

    --h-secondary: 174;
    --s-secondary: 68%;
    --l-secondary: 22%;
    --secondary: var(--teal-deep);

    --h-accent: 174;
    --s-accent: 64%;
    --l-accent: 51%;
    --accent: var(--teal);
    --accent-light: rgba(47, 184, 160, 0.12);

    --dark: var(--navy-deep);
    --light: var(--ink);
    --white: #ffffff;
    --text: var(--ink-body);
    --text-dark: var(--ink);
    --text-light: var(--ink-muted);
    --border: var(--hairline);
    --border-light: var(--hairline-faint);
    --success: #86EFAC;
    --warning: #FBBF24;

    /* Surfaces (legacy names, V4 values) */
    --surface: var(--navy-surface);
    --surface-raised: var(--navy-surface);
    /* --surface-sunken already defined above as V4 alias */

    /* Layout */
    --max-width: 1200px;
    --header-height: 120px;
    --section-spacing: clamp(60px, 8vw, 120px);

    /* Radii — Swiss restraint */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-xl: 8px;
    /* legacy token, capped */
    --radius-full: 9999px;

    /* Pillar card tokens (V4) */
    --pillar-bg: var(--navy-surface);
    --pillar-text: var(--ink);
    --pillar-subtext: var(--ink-body);

    /* Teal opacity scale — V4 electric teal (#2FB8A0) */
    --teal-5: rgba(47, 184, 160, 0.05);
    --teal-7: rgba(47, 184, 160, 0.07);
    --teal-8: rgba(47, 184, 160, 0.08);
    --teal-10: rgba(47, 184, 160, 0.10);
    --teal-12: rgba(47, 184, 160, 0.12);
    --teal-14: rgba(47, 184, 160, 0.14);
    --teal-15: rgba(47, 184, 160, 0.15);
    --teal-20: rgba(47, 184, 160, 0.20);
    --teal-25: rgba(47, 184, 160, 0.25);
    --teal-30: rgba(47, 184, 160, 0.30);
    --teal-35: rgba(47, 184, 160, 0.35);
    --teal-40: rgba(47, 184, 160, 0.40);

    /* Neutral opacity scale */
    --black-20: rgba(0, 0, 0, 0.20);
    --black-35: rgba(0, 0, 0, 0.35);
    --black-50: rgba(0, 0, 0, 0.50);
    --white-3: rgba(255, 255, 255, 0.03);
    --white-4: rgba(255, 255, 255, 0.04);
    --white-5: rgba(255, 255, 255, 0.05);
    --white-6: rgba(255, 255, 255, 0.06);
    --white-7: rgba(255, 255, 255, 0.07);
    --white-8: rgba(255, 255, 255, 0.08);
    --white-20: rgba(255, 255, 255, 0.20);

    /* Extended legacy opacity tokens — remapped to V4 */
    --petrol-35: rgba(30, 122, 107, 0.35);
    --navy-15: rgba(11, 20, 38, 0.15);
    --navy-55: rgba(11, 20, 38, 0.55);
    --navy-80: rgba(11, 20, 38, 0.80);
    --gray-35: rgba(100, 116, 139, 0.35);
    --gray-50: rgba(100, 116, 139, 0.50);
    --light-gray-30: rgba(148, 163, 184, 0.30);
    --light-blue-30: rgba(226, 232, 240, 0.30);

    /* Glassmorphism — V4 retired, kept as matte fallback */
    --glass-bg: var(--navy-surface);
    --glass-border: var(--hairline);
    --glass-blur: none;

    /* Shadows — V4 drops drop-shadows for hierarchy.
       Only modal tier retains a subtle lift. */
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.45);
    --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.35);

    /* Grid overlay (marketing hero only) */
    --grid-size: 8px;
    --grid-color: rgba(47, 184, 160, 0.02);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* Plugin bridge aliases — plugin blocks inherit V4 automatically */
    --adamiro-primary: var(--teal);
    --adamiro-primary-light: var(--teal-12);
    --adamiro-secondary: var(--teal-deep);
    --adamiro-text: var(--ink-body);
    --adamiro-text-dark: var(--ink);
    --adamiro-border: var(--hairline);
    --adamiro-shadow: none;
    --adamiro-bg: var(--surface-card);
}

/* ─── V4 Utilities ──────────────────────────────────── */

/* Grid overlay — opt-in for marketing hero blocks */
.is-style-grid-overlay {
    position: relative;
}

.is-style-grid-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
    z-index: 0;
}

.is-style-grid-overlay>* {
    position: relative;
    z-index: 1;
}

.hero-content-block {
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
}

/* Matte card — hairline border, no shadow */
.is-style-matte-card {
    background: var(--surface-card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    padding: 32px;
    transition: border-color var(--transition-fast);
}

.is-style-matte-card:hover {
    border-color: var(--hairline-strong);
}

/* Hairline — thin divider panel */
.is-style-hairline {
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    padding: 48px 0;
}

/* Data panel — sunken, monospace feel */
.is-style-data-panel {
    background: var(--surface-row);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    padding: 24px;
    font-feature-settings: 'tnum' 1;
}

/* Bento grid — 1px gap on hairline background */
.is-style-bento {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.is-style-bento>* {
    background: var(--surface-card);
    padding: 28px 24px;
    margin: 0 !important;
}

/* Eyebrow — monospace meta label */
.eyebrow,
.is-style-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--teal);
    line-height: 1.2;
}

/* Numeric display — JetBrains Mono for statistics */
.is-style-stat-display {
    font-family: var(--font-mono);
    font-feature-settings: 'tnum' 1;
    font-weight: 500;
    letter-spacing: -0.02em;
}

/* Button · hairline (secondary) — overrides V4 group hairline for buttons */
.wp-block-button.is-style-hairline .wp-block-button__link,
.wp-block-button.is-style-hairline a {
    background: transparent !important;
    border: 1px solid var(--hairline) !important;
    color: var(--ink) !important;
    border-radius: var(--radius-full) !important;
    padding: 12px 22px !important;
    font-weight: 500;
    transition: border-color var(--transition-fast), color var(--transition-fast);
    box-shadow: none !important;
}

.wp-block-button.is-style-hairline .wp-block-button__link:hover,
.wp-block-button.is-style-hairline a:hover {
    border-color: var(--hairline-strong) !important;
    color: var(--teal) !important;
}

/* Group · hairline band — reset padding when applied to buttons by mistake */
.wp-block-group.is-style-hairline {
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    padding: 48px 0;
    border-radius: 0;
}

.wp-block-button.is-style-hairline {
    border-top: none;
    border-bottom: none;
    padding: 0;
    border-radius: 0;
}

.full-width {
    width: 100%;
}

.darker-20 {
    background-color: var(--black-20);
}

/* ─── LIGHT MODE OVERRIDES ──────────────────────────── */
[data-theme="light"] {
    --bg: var(--ink);
    --bg-alt: #E2E8F0;
    --fg: var(--navy);
    --fg-muted: #334155;
    --fg-subtle: #64748B;
    --border-v3: rgba(11, 20, 38, 0.10);
    --card-bg: #ffffff;
    --glass-v3: #ffffff;
    --hairline: rgba(30, 122, 107, 0.18);
    --hairline-strong: rgba(30, 122, 107, 0.35);
    --surface-base: var(--ink);
    --surface-card: #ffffff;
    --surface-row: #F8FAFC;
    --surface-sunken: #E2E8F0;
    color-scheme: light;
}

/* =============================================
   2. RESET & BASE
   ============================================= */

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

/* Smooth dark/light mode color transitions */
/* --- LIGHT MODE OVERRIDES --- */

/* Header, Sidebar, Footer — ALWAYS dark: reset all CSS custom properties */
[data-theme="light"] .site-header,
[data-theme="light"] .site-header *,
[data-theme="light"] .app-sidebar,
[data-theme="light"] .app-sidebar *,
[data-theme="light"] .site-footer,
[data-theme="light"] .site-footer * {
    --bg: #0B1426;
    --bg-alt: #141F38;
    --fg: #F1F5F9;
    --fg-muted: rgba(241, 245, 249, 0.72);
    --fg-subtle: rgba(241, 245, 249, 0.48);
    --border-v3: rgba(47, 184, 160, 0.18);
    --card-bg: #1E293B;
    --glass-v3: #1E293B;
    --hairline: rgba(47, 184, 160, 0.18);
    --hairline-strong: rgba(47, 184, 160, 0.35);
    --white: #ffffff;
    --surface: #1E293B;
    --surface-raised: #1E293B;
    --surface-sunken: #050B17;
    --text: rgba(241, 245, 249, 0.72);
    --text-dark: #F1F5F9;
    --text-light: rgba(241, 245, 249, 0.48);
    --border: rgba(47, 184, 160, 0.18);
    --border-light: rgba(47, 184, 160, 0.08);
    /* Override WP preset color vars so utility classes stay dark-themed */
    --wp--preset--color--navy: #0B1426;
    --wp--preset--color--navy-deep: #050B17;
    --wp--preset--color--navy-surface: #1E293B;
    --wp--preset--color--navy-lift: #141F38;
    --wp--preset--color--ink: #F1F5F9;
    --wp--preset--color--off-white: #F1F5F9;
    --wp--preset--color--petrol: #1E7A6B;
    --wp--preset--color--teal: #2FB8A0;
    --wp--preset--color--teal-deep: #1E7A6B;
    --wp--preset--color--dark: #F1F5F9;
    color-scheme: dark;
}

/* Explicit color overrides — beats WP global element styles that inherit from body */
[data-theme="light"] .site-header {
    background: #0B1426 !important;
    color: #F1F5F9 !important;
    border-bottom-color: rgba(47, 184, 160, 0.18) !important;
}

[data-theme="light"] .app-sidebar {
    background: #0B1426 !important;
    color: #F1F5F9 !important;
}

[data-theme="light"] .site-footer {
    background: #0B1426 !important;
    color: rgba(241, 245, 249, 0.72) !important;
}

/* Force dark text on ALL descendant elements in always-dark regions */
[data-theme="light"] .site-header h1,
[data-theme="light"] .site-header h2,
[data-theme="light"] .site-header h3,
[data-theme="light"] .site-header h4,
[data-theme="light"] .site-header h5,
[data-theme="light"] .site-header h6,
[data-theme="light"] .site-header p,
[data-theme="light"] .site-header span,
[data-theme="light"] .site-header li,
[data-theme="light"] .site-header div {
    color: #F1F5F9 !important;
}

[data-theme="light"] .site-header a:not(.adamiro-header-btn) {
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="light"] .site-header a:not(.adamiro-header-btn):hover {
    color: #2FB8A0 !important;
}

/* Header buttons — preserve their inline styles */
[data-theme="light"] .site-header .adamiro-header-btn {
    color: #F1F5F9 !important;
}

/* Sidebar — force light text on ALL descendant elements */
[data-theme="light"] .app-sidebar span,
[data-theme="light"] .app-sidebar li,
[data-theme="light"] .app-sidebar div,
[data-theme="light"] .app-sidebar p {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="light"] .app-sidebar a {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="light"] .app-sidebar a:hover,
[data-theme="light"] .app-sidebar a.active {
    color: #ffffff !important;
}

[data-theme="light"] .app-sidebar .user-name {
    color: #ffffff !important;
}

[data-theme="light"] .app-sidebar .user-email {
    color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="light"] .app-sidebar .submenu-upgrade {
    color: #f59e0b !important;
}

[data-theme="light"] .app-sidebar .submenu-item.is-active>a {
    color: #2FB8A0 !important;
}

[data-theme="light"] .site-footer h1,
[data-theme="light"] .site-footer h2,
[data-theme="light"] .site-footer h3,
[data-theme="light"] .site-footer h4,
[data-theme="light"] .site-footer h5,
[data-theme="light"] .site-footer h6 {
    color: #F1F5F9 !important;
}

[data-theme="light"] .site-footer p,
[data-theme="light"] .site-footer span,
[data-theme="light"] .site-footer li,
[data-theme="light"] .site-footer div {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="light"] .site-footer a {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="light"] .site-footer a:hover {
    color: #2FB8A0 !important;
}

/* Override any WP has-*-color utility classes within always-dark regions */
[data-theme="light"] .site-header .has-navy-color,
[data-theme="light"] .site-header .has-off-white-color,
[data-theme="light"] .site-footer .has-navy-color,
[data-theme="light"] .site-footer .has-off-white-color,
[data-theme="light"] .app-sidebar .has-navy-color,
[data-theme="light"] .app-sidebar .has-off-white-color {
    color: inherit !important;
}

[data-theme="light"] .site-header .has-navy-background-color,
[data-theme="light"] .site-footer .has-navy-background-color,
[data-theme="light"] .app-sidebar .has-navy-background-color {
    background-color: #0B1426 !important;
}

/* Neutralize WP per-block element link colors inside always-dark regions */
[data-theme="light"] .site-footer a:where(:not(.wp-element-button)),
[data-theme="light"] .site-header a:where(:not(.wp-element-button)) {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="light"] .site-footer a:where(:not(.wp-element-button)):hover,
[data-theme="light"] .site-header a:where(:not(.wp-element-button)):hover {
    color: #2FB8A0 !important;
}

/* Header search — always dark */
[data-theme="light"] .site-header .header-search {
    background: hsl(194, 50%, 10%) !important;
    border-color: hsl(194, 30%, 20%) !important;
}

[data-theme="light"] .site-header .header-search.is-open {
    background: hsl(194, 50%, 8%) !important;
    border-color: #2FB8A0 !important;
}

[data-theme="light"] .site-header .header-search-toggle {
    color: hsl(194, 12%, 80%) !important;
}

[data-theme="light"] .site-header .header-search-input {
    color: hsl(194, 12%, 92%) !important;
    background: transparent !important;
}

[data-theme="light"] .site-header .header-search-input::placeholder {
    color: hsl(194, 12%, 55%) !important;
}

/* Header nav links (not buttons with inline styles) */
[data-theme="light"] .site-header .main-navigation a {
    color: hsl(194, 12%, 80%) !important;
}

[data-theme="light"] .site-header .main-navigation a:hover {
    color: #2FB8A0 !important;
}

/* Dashboard Content Area switch to light */
html[data-theme="light"] body,
html[data-theme="light"] body.has-sidebar {
    background-color: #F1F5F9 !important;
    color: #1a202c !important;
}

html[data-theme="light"] .app-main,
html[data-theme="light"] .site-main.app-main {
    background-color: #F1F5F9 !important;
    color: #1a202c;
}

/* Content area headings — dark text in light mode (theme.json sets off-white for dark-first) */
html[data-theme="light"] .app-main h1,
html[data-theme="light"] .app-main h2,
html[data-theme="light"] .app-main h3,
html[data-theme="light"] .app-main h4,
html[data-theme="light"] .app-main h5,
html[data-theme="light"] .app-main h6 {
    color: #1a202c !important;
}

html[data-theme="light"] .app-main a:where(:not(.wp-element-button)) {
    color: #1E7A6B;
}

html[data-theme="light"] .app-main p,
html[data-theme="light"] .app-main li,
html[data-theme="light"] .app-main span {
    color: #4A5568;
}

/* Marketing content area — dark headings/text in light mode */
html[data-theme="light"] .site-main:not(.app-main) h1,
html[data-theme="light"] .site-main:not(.app-main) h2,
html[data-theme="light"] .site-main:not(.app-main) h3,
html[data-theme="light"] .site-main:not(.app-main) h4,
html[data-theme="light"] .site-main:not(.app-main) h5,
html[data-theme="light"] .site-main:not(.app-main) h6,
html[data-theme="light"] .entry-content h1,
html[data-theme="light"] .entry-content h2,
html[data-theme="light"] .entry-content h3,
html[data-theme="light"] .entry-content h4,
html[data-theme="light"] .entry-content h5,
html[data-theme="light"] .entry-content h6 {
    color: #1a202c;
}

/* --- THEME ROOT --- */
html {
    transition:
        background-color var(--transition-base),
        color var(--transition-base);
}

body {
    font-family: var(--wp--preset--font-family--poppins, var(--font-body));
    color: var(--text);
    background-color: var(--white);
    margin: 0;
    line-height: 1.6;
    font-size: 1rem;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition:
        background-color var(--transition-base),
        color var(--transition-base);
}

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

figure.wp-block-media-text__media img::before {
    background-color: var(--wp--preset--color--primary) !important;
    opacity: 0.3;
}

figure.wp-block-media-text__media img {
    border-radius: 20px;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-hover);
}

/* =============================================
   3. TYPOGRAPHY — MAJOR THIRD SCALE (×1.25)
   ============================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-dark);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-top: 0;
    font-family: var(--wp--preset--font-family--outfit);
}

h1 {
    font-size: clamp(1.75rem, 0.9rem + 3.65vw, 3.8125rem);
    font-weight: 800;
    line-height: 1.1;
}

h2 {
    font-size: clamp(1.5rem, 0.85rem + 2.75vw, 3.0625rem);
    font-weight: 800;
    line-height: 1.15;
}

h3 {
    font-size: clamp(1.375rem, 0.9rem + 1.875vw, 2.4375rem);
    font-weight: 700;
    line-height: 1.2;
}

h4 {
    font-size: clamp(1.25rem, 0.975rem + 1.2vw, 1.9375rem);
    font-weight: 700;
    line-height: 1.3;
}

h5 {
    font-size: 1.25rem;
    font-weight: 700;
}

h6 {
    font-size: 1rem;
    font-weight: 700;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

.lead {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--text);
    font-weight: 400;
}

.accent {
    color: var(--primary);
}

.text-center {
    text-align: center;
}

.text-light {
    color: var(--text-light);
}

/* Section label — Adamiro uppercase underlined */
.section-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
    background: var(--primary-10);
    padding: 6px 16px;
    border-bottom: none;
    border-radius: var(--radius-full);
    margin-bottom: 1.25rem;
}

/* =============================================
   4. LAYOUT
   ============================================= */

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

.container-narrow {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: var(--section-spacing) 0;
}

.section-sm {
    padding: clamp(24px, 4vw, 60px) 0;
}

.section-dark {
    background: var(--dark);
    color: rgba(255, 255, 255, 0.8);
}

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

.section-primary {
    background: var(--primary);
    color: rgba(255, 255, 255, 0.85);
}

.section-primary h1,
.section-primary h2,
.section-primary h3,
.section-primary h4 {
    color: #ffffff;
}

.section-light {
    background: var(--light);
}

.section-gradient {
    background: linear-gradient(180deg, #ffffff 0%, var(--light) 100%);
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2vw, 2rem);
}

.grid-3-pricing {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2vw, 2rem);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 1.5vw, 1.5rem);
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =============================================
   5. HEADER — Adamiro SOLID WHITE
   ============================================= */

.site-header {
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 1001;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.site-header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow-sm);
    border-bottom-color: transparent;
}

.header-container {
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.site-branding {
    display: flex;
    align-items: center;
    flex-shrink: 1;
    min-width: 0;
}

.logo-text {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.03em;
    text-decoration: none;
}

.logo-text:hover {
    color: var(--primary-hover);
}

.header-logo img {
    width: 300px;
    max-width: 100%;
    height: auto;
}

/* Main Nav — Adamiro uppercase condensed */
.main-navigation ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0;
}

.main-navigation li a {
    display: block;
    padding: 8px 14px;
    color: var(--text-dark);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: color var(--transition-fast), border-bottom var(--transition-fast);
    border-bottom: 2px solid transparent;
    line-height: var(--header-height);
    padding-top: 0;
    padding-bottom: 0;
}

.main-navigation li a:hover,
.main-navigation li.current-menu-item a {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: transparent;
}

.header-cta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* Mobile toggle */
.mobile-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: var(--text-dark);
    font-size: 1.5rem;
}

/* Stats Bar */
.stats-bar {
    display: flex;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 4rem);
    padding: clamp(1.5rem, 3vw, 3rem) 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.03em;
    line-height: 1;
}

.stat-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-light);
    margin-top: 0.35rem;
}

/* =============================================
   6. BUTTONS — Adamiro UPPERCASE, NO LIFT
   ============================================= */

.btn:not(.wp-block-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
    padding: 14px 32px;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    line-height: 1;
}

.btn-primary:not(.wp-block-button) {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

.btn-primary:not(.wp-block-button):hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary:not(.wp-block-button) {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.btn-secondary:not(.wp-block-button):hover {
    background: var(--primary);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-ghost:not(.wp-block-button) {
    background: transparent;
    color: var(--text-dark);
    border-color: var(--border);
}

.btn-ghost:not(.wp-block-button):hover {
    border-color: var(--primary);
    color: var(--primary);
    background: transparent;
}

.btn-sm:not(.wp-block-button) {
    padding: 10px 22px;
    font-size: 0.8rem;
}

.btn-lg:not(.wp-block-button) {
    padding: 18px clamp(20px, 3vw, 40px);
    font-size: 0.9375rem;
}

/* WP Block Button: apply btn visual styles to the inner <a> link.
   html[data-theme="dark"] prefix gives specificity (0,3,1) — beats WP's
   global-styles-inline-css (.wp-block-button .wp-block-button__link = 0,2,0)
   but WP editor inline styles (1,0,0,0) and !important utility classes still win. */
html[data-theme="dark"] .btn-primary>.wp-block-button__link {
    background: var(--primary);
    color: #ffffff;
    border: 2px solid var(--primary);
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 32px;
    border-radius: var(--radius-full);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

html[data-theme="dark"] .btn-primary>.wp-block-button__link:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #ffffff;
}

html[data-theme="dark"] .btn-ghost>.wp-block-button__link {
    background: transparent;
    color: var(--text-dark);
    border: 2px solid var(--border);
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 32px;
    border-radius: var(--radius-full);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

html[data-theme="dark"] .btn-ghost>.wp-block-button__link:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: transparent;
}

html[data-theme="dark"] .btn-sm>.wp-block-button__link {
    padding: 10px 22px;
    font-size: 0.8rem;
}

/* Hero button variants — inverted on dark bg */
.btn-hero-primary {
    background: #ffffff;
    color: var(--primary);
    border-color: #ffffff;
}

.btn-hero-primary:hover {
    background: var(--primary-light);
    border-color: var(--primary-light);
    color: var(--primary);
}

.btn-hero-outline {
    background: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.6);
}

.hero-hero-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.9);
    color: #ffffff;
}

.cky-btn-revisit-wrapper {
    background: var(--primary) !important;
}

/* =============================================
   3. HEADER (Glassmorphism Applied)
   ============================================= */
.site-header {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
    position: sticky !important;
    top: 0 !important;
    margin-top: 0 !important;
    z-index: 1000;
    transition: background var(--transition-base), border-color var(--transition-base);
}

/* Offset for WordPress Admin Bar */
body.admin-bar .site-header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px !important;
    }
}

/* =============================================
   7. HERO — PHOTO-FORWARD, Adamiro FULL-WIDTH
   ============================================= */

.hero {
    min-height: 85vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg,
            hsla(194, 69%, 22%, 0.88),
            hsla(194, 50%, 15%, 0.92)),
        var(--hero-bg-image, none);
    background-size: cover;
    background-position: center;
    background-color: hsl(194, 69%, 22%);
    position: relative;
    overflow: hidden;
}

.hero-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: clamp(48px, 8vw, 120px) 24px;
    position: relative;
    z-index: 1;
    width: 100%;
}

.hero-content {
    max-width: 700px;
}

.hero-eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.5rem;
}

.hero-content h1 {
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.hero-content .lead {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2rem;
    max-width: 580px;
    margin-bottom: 2.5rem;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Page hero — legacy class, now delegated to the mood-hero system.
   See the "Legacy hero aliases" block at the bottom of the mood palette. */

/* =============================================
   8. VALUE PROPS STRIP
   ============================================= */

.value-props {
    background: #ffffff;
    padding: clamp(24px, 4vw, 60px) 0;
    border-bottom: 1px solid var(--border-light);
}

.value-props-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--border-light);
}

.value-prop {
    padding: 2.5rem 2rem;
    text-align: center;
    border-right: 1px solid var(--border-light);
}

.value-prop:last-child {
    border-right: none;
}

.value-prop-number {
    font-size: clamp(2rem, 3.5vw, 3.5rem);
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: 0.5rem;
}

.value-prop-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}

.value-prop-desc {
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.6;
    margin: 0;
}

/* =============================================
   9. PILLARS GRID — Adamiro 2×2 DARK TEAL
   ============================================= */

.pillars-section {
    padding: var(--section-spacing) 0;
}

.pillars-section .section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
}

.pillar-card {
    background: #ffffff;
    color: var(--text);
    padding: clamp(1.5rem, 3vw, 3rem) clamp(1.25rem, 2.5vw, 2.5rem);
    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);
    transition: all var(--transition-base);
}

.pillar-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.pillar-card-number {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.pillar-card-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.pillar-card-modules {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 1rem;
}

.pillar-card-desc {
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.6;
    margin: 0;
}

/* =============================================
   10. TASK ECONOMY SECTION
   ============================================= */

.task-economy {
    padding: var(--section-spacing) 0;
}

.task-economy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
}

.task-economy-copy h2 {
    margin-bottom: 1.5rem;
}

.task-economy-copy p {
    margin-bottom: 2rem;
}

.task-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.task-step {
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--primary);
    background: var(--light);
}

.task-step-title {
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
}

.task-step-desc {
    font-size: 0.9rem;
    color: var(--text);
    margin: 0;
}

/* =============================================
   11. MODULES PAGE
   ============================================= */

.modules-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    margin-top: 4rem;
}

.module-pillar-card {
    background: #ffffff;
    padding: clamp(1.5rem, 3vw, 3rem) clamp(1.25rem, 2.5vw, 2.5rem);
    color: var(--text);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
}

.module-pillar-card:nth-child(2),
.module-pillar-card:nth-child(4) {
    background: var(--light);
}

.module-pillar-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-light);
}

.module-pillar-number {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.module-pillar-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.module-pillar-desc {
    font-size: 0.9rem;
    color: var(--text);
    margin: 0;
}

.module-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.module-list-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--border-light);
    gap: 1.5rem;
}

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

.module-list-name {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.module-list-desc {
    font-size: 0.8rem;
    color: var(--text);
    font-style: italic;
    text-align: right;
    line-height: 1.4;
}

/* =============================================
   12. PLATFORM PRICING TIERS
   ============================================= */

.platform-tiers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin: 3rem 0;
}

.platform-tier-card {
    padding: 3rem 2rem;
    border: 1px solid var(--border);
    background: #ffffff;
}

.platform-tier-card.featured {
    background: #ffffff;
    border-color: var(--primary);
    border-top: 4px solid var(--primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    position: relative;
}

.platform-tier-name {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 1rem;
}

.platform-tier-card.featured .platform-tier-name {
    color: var(--primary);
}

.platform-tier-price {
    font-size: 3rem;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: 0.25rem;
}

.platform-tier-card.featured .platform-tier-price {
    color: var(--text-dark);
}

.platform-tier-period {
    font-size: 0.85rem;
    color: var(--text);
    margin-bottom: 0.75rem;
}

.platform-tier-card.featured .platform-tier-period {
    color: var(--text);
}

.platform-tier-tasks {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary);
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-light);
}

.platform-tier-card.featured .platform-tier-tasks {
    color: var(--primary);
    border-bottom-color: var(--border-light);
}

.platform-tier-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.platform-tier-features li {
    font-size: 0.9rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-light);
    color: var(--text);
    padding-left: 1.25rem;
    position: relative;
}

.platform-tier-card.featured .platform-tier-features li {
    color: var(--text);
    border-bottom-color: var(--border-light);
}

.platform-tier-features li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 700;
}

.platform-tier-card.featured .platform-tier-features li::before {
    color: var(--primary);
}

/* =============================================
   13. TASK ECONOMY — EDUCATION CARDS
   ============================================= */

.task-edu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin: 3rem 0;
}

.task-edu-card {
    padding: 2rem 1.75rem;
    border-left: 3px solid var(--primary);
    background: #ffffff;
    border-top: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.task-edu-card h3 {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
    color: var(--text-dark);
}

.task-edu-card p {
    font-size: 0.9rem;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.task-edu-caveat {
    font-size: 0.775rem;
    color: var(--text-light);
    font-style: italic;
}

/* =============================================
   14. TASK PACK SECTION
   ============================================= */

.task-packs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin: 2rem 0;
}

.task-pack-card {
    padding: 2rem;
    background: #ffffff;
    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);
    text-align: center;
}

.task-pack-tasks {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 0.35rem;
}

.task-pack-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1.25rem;
}

/* =============================================
   15. FEATURE CARDS
   ============================================= */

.feature-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 2rem;
    transition: all var(--transition-base);
}

.feature-card:hover {
    border-color: var(--primary-20);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.feature-card-icon {
    width: 48px;
    height: 48px;
    background: var(--primary-10);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    font-size: 1.4rem;
    color: var(--primary);
}

.feature-card h3 {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
    color: var(--text-dark);
}

.feature-card p {
    font-size: 0.9rem;
    color: var(--text);
    margin: 0;
}

/* =============================================
   16. PRODUCT SECTIONS
   ============================================= */

.product-section {
    padding: clamp(32px, 5vw, 80px) 0;
}

.product-section:nth-child(even) {
    background: var(--light);
}

.product-section:nth-child(even) .grid-2 {
    direction: rtl;
}

.product-section:nth-child(even) .grid-2>* {
    direction: ltr;
}

.product-copy h2 {
    margin-bottom: 1.25rem;
}

.product-copy p {
    margin-bottom: 1.5rem;
}

.product-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.product-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--border-light);
    color: var(--text);
}

.product-feature-list li:last-child {
    border-bottom: none;
}

.product-feature-list li strong {
    color: var(--text-dark);
    min-width: 120px;
    flex-shrink: 0;
}

.product-visual {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.product-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--primary-10) 0%, transparent 50%);
    pointer-events: none;
}

/* Product Tabs */
.product-tabs-section {
    padding: var(--section-spacing) 0;
}

.product-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
    border-bottom: 2px solid var(--border-light);
    padding-bottom: 0;
}

.product-tab {
    padding: 10px 20px;
    border: none;
    background: none;
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    color: var(--text);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    text-transform: uppercase;
}

.product-tab:hover {
    color: var(--primary);
}

.product-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.tab-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.tab-copy h3 {
    margin-bottom: 1rem;
}

.tab-copy p {
    margin-bottom: 1.5rem;
}

.tab-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.tab-feature-list li {
    padding: 0.5rem 0 0.5rem 1.5rem;
    position: relative;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--border-light);
}

.tab-feature-list li:last-child {
    border-bottom: none;
}

.tab-feature-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2311424b'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.tab-visual {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.tab-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--primary-10) 0%, transparent 60%);
    pointer-events: none;
}

/* =============================================
   17. PRICING CARDS (existing .pricing-card system)
   ============================================= */

.pricing-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 2rem;
    position: relative;
    transition: all var(--transition-base);
}

.pricing-card:hover {
    border-color: var(--primary-20);
    box-shadow: var(--shadow-lg);
    transform: translateY(-6px);
}

.pricing-card.featured {
    border-color: var(--primary);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: var(--radius-full);
}

.pricing-tier {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.pricing-price {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.pricing-price sub {
    font-size: 1rem;
    font-weight: 600;
    vertical-align: baseline;
    color: var(--text);
}

.pricing-period {
    font-size: 0.85rem;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.pricing-tasks {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary);
    padding: 0.5rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-light);
}

.pricing-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.pricing-card-features li {
    padding: 0.45rem 0 0.45rem 1.5rem;
    position: relative;
    font-size: 0.9rem;
    color: var(--text);
    border-bottom: 1px solid var(--border-light);
}

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

.pricing-card-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2311424b'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* =============================================
   18. BUNDLE CARDS
   ============================================= */

.bundle-card {
    background: linear-gradient(135deg, var(--primary-lighter) 0%, var(--white) 100%);
    border: 1px solid var(--primary-20);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    text-align: center;
    transition: all var(--transition-base);
}

.bundle-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.bundle-card h3 {
    font-size: 1.35rem;
    margin-bottom: 0.75rem;
}

.bundle-card p {
    font-size: 0.95rem;
    color: var(--text);
    margin-bottom: 1.5rem;
}

.bundle-includes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.bundle-includes span {
    background: var(--white);
    border: 1px solid var(--border);
    padding: 4px 14px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-dark);
}

/* =============================================
   19. TASK FLOW
   ============================================= */

.task-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.task-flow-step {
    text-align: center;
    padding: 1.5rem;
}

.task-flow-step .icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--primary-10);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
    color: var(--primary);
}

.task-flow-step h4 {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.task-flow-step p {
    font-size: 0.9rem;
    max-width: 200px;
    margin: 0 auto;
}

.task-flow-arrow {
    font-size: 1.5rem;
    color: var(--primary);
}

/* =============================================
   20. CTA STRIP
   ============================================= */

.cta-section {
    text-align: center;
    padding: clamp(32px, 5vw, 80px) 0;
}

.cta-section h2 {
    margin-bottom: 1rem;
}

.cta-section p {
    font-size: 1.1rem;
    color: var(--text);
    max-width: 550px;
    margin: 0 auto 2rem;
}

.cta-section.dark {
    background: hsl(194, 69%, 22%);
}

.cta-section.dark h2,
.cta-section.dark h3 {
    color: #ffffff;
}

.cta-section.dark p {
    color: rgba(255, 255, 255, 0.75);
}

.cta-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* =============================================
   21. FORMS
   ============================================= */

.adamiro-form {
    background: var(--white);
    padding: 2.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    max-width: 600px;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-dark);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-family: var(--wp--preset--font-family--outfit);
    color: var(--text-dark);
    transition: border-color var(--transition-fast);
    background: var(--white);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-10);
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

/* =============================================
   22. FAQ
   ============================================= */

.rank-math-list .rank-math-question {
    color: var(--navy-deep) !important;
    margin-bottom: .5rem;
}

.faq-item {
    border-bottom: 1px solid var(--border-light);
    padding: 1.25rem 0;
}

.faq-question {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: var(--wp--preset--font-family--outfit);
    padding: 0;
}

.faq-question::after {
    content: "+";
    font-size: 1.25rem;
    color: var(--primary);
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.faq-item.open .faq-question::after {
    content: "\2212";
}

.faq-answer {
    display: none;
    padding-top: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text);
}

.faq-item.open .faq-answer {
    display: block;
    animation: fadeUp 0.3s ease;
}

/* =============================================
   23. ABOUT PAGE
   ============================================= */

.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.value-card {
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    background: var(--white);
    transition: all var(--transition-base);
}

.value-card:hover {
    border-color: var(--primary-20);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.value-card h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
}

.value-icon {
    font-size: 1.5rem;
}

/* =============================================
   24. CONTACT PAGE
   ============================================= */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.contact-info-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border-light);
}

.contact-info-card:last-child {
    border-bottom: none;
}

.contact-info-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--primary-10);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.contact-info-card h4 {
    margin-bottom: 0.25rem;
    font-size: 1.1rem;
}

.contact-info-card p {
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* =============================================
   25. FOOTER — DARK TEAL
   ============================================= */

.site-footer {
    background: hsl(194, 69%, 22%);
    color: rgba(255, 255, 255, 0.7);
    padding: clamp(32px, 5vw, 80px) 0 clamp(20px, 3vw, 40px);
    margin-top: 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-brand .logo-text {
    color: var(--white);
    font-size: 1.25rem;
}

.footer-brand p {
    margin-top: 1rem;
    font-size: 0.9rem;
    max-width: 280px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.6);
}

.footer-col h4 {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col li {
    margin-bottom: 0.75rem;
}

.footer-col a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-col a:hover {
    color: var(--white);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.footer-bottom a {
    color: rgba(255, 255, 255, 0.5);
}

.footer-bottom a:hover {
    color: var(--white);
}

/* =============================================
   26. PAGE DEFAULTS
   ============================================= */

.site-main {
    min-height: calc(100vh - 400px);
}

.page-content {
    padding: clamp(24px, 4vw, 60px) 0;
}

.page-content>.container>*:first-child {
    margin-top: 0;
}

/* Plugin UI compatibility */
.adamiro-dashboard {
    background: none;
    padding: clamp(20px, 3vw, 40px);
    border-radius: var(--radius-sm);
    box-shadow: none;
    border: none;
}

/* Logo bar */
.logo-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    opacity: 0.5;
}

.logo-bar span {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: -0.02em;
}

/* =============================================
   27. MEGA MENU
   ============================================= */

/*
 * Mega menu styles are loaded from the Adamiro plugin
 * See: wordpress-plugin/adamiro/includes/ui/css/mega-menu.css
 */

/* =============================================
   28. SCROLL ANIMATIONS
   ============================================= */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================
   29. RESPONSIVE
   ============================================= */

@media (max-width: 1024px) {
    .grid-2 {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .grid-3 {
        grid-template-columns: 1fr 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .product-section:nth-child(even) .grid-2 {
        direction: ltr;
    }

    .tab-content-grid {
        grid-template-columns: 1fr;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .stats-bar {
        gap: 2rem;
    }

    .platform-tiers-grid {
        grid-template-columns: 1fr;
    }

    .task-edu-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    :root {
        --section-spacing: clamp(40px, 8vw, 60px);
    }

    .hero {
        min-height: auto;
    }

    .hero-container {
        padding: clamp(32px, 5vw, 80px) 20px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .grid-3 {
        grid-template-columns: 1fr;
    }

    .grid-3-pricing {
        grid-template-columns: 1fr;
    }

    .pillars-grid {
        grid-template-columns: 1fr;
    }

    .modules-grid {
        grid-template-columns: 1fr;
    }

    .platform-tiers-grid {
        grid-template-columns: 1fr;
    }

    .task-edu-grid {
        grid-template-columns: 1fr;
    }

    .task-packs-grid {
        grid-template-columns: 1fr;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .stats-bar {
        gap: 1.5rem;
    }

    .value-props-grid {
        grid-template-columns: 1fr;
    }

    .value-prop {
        border-right: none;
        border-bottom: 1px solid var(--border-light);
    }

    .value-prop:last-child {
        border-bottom: none;
    }

    .task-flow {
        flex-direction: column;
    }

    .task-flow-arrow {
        transform: rotate(90deg);
    }

    .task-economy-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    /* Mobile nav */
    .main-navigation {
        display: none;
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--white);
        flex-direction: column;
        padding: 2rem;
        gap: 1rem;
        z-index: 999;
    }

    .main-navigation.open {
        display: flex;
    }

    .main-navigation ul {
        flex-direction: column;
        gap: 0;
    }

    .main-navigation li a {
        display: block;
        padding: 12px 0;
        font-size: 1.1rem;
        border-bottom: 1px solid var(--border-light);
        line-height: 1.5;
    }

    .header-cta {
        flex-direction: column;
        width: 100%;
    }

    .header-cta .btn {
        width: 100%;
    }

    .mobile-toggle {
        display: block;
    }
}

/* =============================================
   30. DARK MODE
   ============================================= */

@media (prefers-color-scheme: dark) {
    :root {
        --white: hsl(194, 50%, 6%);
        --surface: hsl(194, 50%, 6%);
        --surface-raised: hsl(194, 50%, 9%);
        --surface-sunken: hsl(194, 50%, 4%);
        --text: hsl(194, 12%, 70%);
        --text-dark: hsl(194, 12%, 92%);
        --text-light: hsl(194, 12%, 55%);
        --border: hsl(194, 30%, 18%);
        --border-light: hsl(194, 30%, 14%);
        --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.35);
        --shadow-lg: 0 25px 50px rgba(0, 0, 0, 0.4);
        --shadow-xl: 0 35px 60px rgba(0, 0, 0, 0.5);
        --primary: #1B9292;
        --primary-hover: #1faaaa;
        --primary-10: rgba(27, 146, 146, 0.15);
        --primary-20: rgba(27, 146, 146, 0.25);
        --glass-bg: rgba(10, 30, 35, 0.85);
        --glass-border: rgba(255, 255, 255, 0.08);
        --wp--preset--color--primary: #1B9292;
        --wp--preset--color--secondary: #22aaaa;
        --wp--preset--color--accent: #1B9292;
    }

    body {
        background-color: hsl(194, 50%, 5%);
    }

    .site-header {
        background: rgba(10, 30, 35, 0.9);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }

    .site-header.scrolled {
        background: rgba(10, 30, 35, 0.97);
    }

    .logo-text {
        color: hsl(194, 12%, 92%);
    }

    .feature-card,
    .pricing-card,
    .value-card,
    .adamiro-form {
        background: hsl(194, 50%, 8%);
        border-color: hsl(194, 30%, 16%);
    }

    .bundle-card {
        background: hsl(194, 50%, 10%);
        border-color: hsl(194, 30%, 18%);
    }

    .product-visual,
    .tab-visual {
        background: hsl(194, 50%, 10%);
        border-color: hsl(194, 30%, 16%);
    }

    .main-navigation li a {
        color: hsl(194, 12%, 80%);
    }

    .main-navigation li a:hover,
    .main-navigation li.current-menu-item a {
        color: var(--primary);
        background: var(--primary-10);
    }

    .section-light {
        background: hsl(194, 50%, 8%);
    }

    .section-gradient {
        background: linear-gradient(180deg, hsl(194, 50%, 5%) 0%, hsl(194, 50%, 8%) 100%);
    }

    .product-section:nth-child(even) {
        background: hsl(194, 50%, 8%);
    }

    .task-step {
        background: hsl(194, 50%, 8%);
    }

    .platform-tier-card {
        background: hsl(194, 50%, 8%);
        border-color: hsl(194, 30%, 16%);
    }

    .task-edu-card {
        background: hsl(194, 50%, 8%);
        border-color: hsl(194, 30%, 16%);
    }
}

/* =============================================
   31. DARK MODE — FORCED (JS toggle via data-theme)
   ============================================= */

html[data-theme="dark"] {
    --white: hsl(194, 50%, 6%);
    --surface: hsl(194, 50%, 6%);
    --surface-raised: hsl(194, 50%, 9%);
    --surface-sunken: hsl(194, 50%, 4%);
    --text: hsl(194, 12%, 70%);
    --text-dark: hsl(194, 12%, 92%);
    --text-light: hsl(194, 12%, 55%);
    --border: hsl(194, 30%, 18%);
    --border-light: hsl(194, 30%, 14%);
    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 25px 50px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 35px 60px rgba(0, 0, 0, 0.5);
    --primary: #1B9292;
    --primary-hover: #1faaaa;
    --primary-10: rgba(27, 146, 146, 0.15);
    --primary-20: rgba(27, 146, 146, 0.25);
    --glass-bg: rgba(10, 30, 35, 0.85);
    --glass-border: rgba(255, 255, 255, 0.08);
    --wp--preset--color--primary: #1B9292;
    --wp--preset--color--secondary: #22aaaa;
    --wp--preset--color--accent: #1B9292;
    color-scheme: dark;
}

html[data-theme="dark"] body {
    background-color: hsl(194, 50%, 5%);
}

html[data-theme="dark"] .site-header {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}



html[data-theme="dark"] .logo-text {
    color: hsl(194, 12%, 92%);
}

html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .value-card,
html[data-theme="dark"] .adamiro-form {
    background: hsl(194, 50%, 8%);
    border-color: hsl(194, 30%, 16%);
}

html[data-theme="dark"] .bundle-card {
    background: hsl(194, 50%, 10%);
    border-color: hsl(194, 30%, 18%);
}

html[data-theme="dark"] .product-visual,
html[data-theme="dark"] .tab-visual {
    background: hsl(194, 50%, 10%);
    border-color: hsl(194, 30%, 16%);
}

html[data-theme="dark"] .main-navigation li a {
    color: hsl(194, 12%, 80%);
}

html[data-theme="dark"] .main-navigation li a:hover,
html[data-theme="dark"] .main-navigation li.current-menu-item a {
    color: var(--primary);
    background: var(--primary-10);
}

html[data-theme="dark"] .section-light {
    background: hsl(194, 50%, 8%);
}

html[data-theme="dark"] .section-gradient {
    background: linear-gradient(180deg, hsl(194, 50%, 5%) 0%, hsl(194, 50%, 8%) 100%);
}

html[data-theme="dark"] .product-section:nth-child(even) {
    background: hsl(194, 50%, 8%);
}

html[data-theme="dark"] .task-step {
    background: hsl(194, 50%, 8%);
}

html[data-theme="dark"] .platform-tier-card {
    background: hsl(194, 50%, 8%);
    border-color: hsl(194, 30%, 16%);
}

html[data-theme="dark"] .task-edu-card {
    background: hsl(194, 50%, 8%);
    border-color: hsl(194, 30%, 16%);
}

/* Force LIGHT when OS is dark (user toggled back) */
@media (prefers-color-scheme: dark) {
    html[data-theme="light"] {
        --white: #ffffff;
        --surface: #ffffff;
        --surface-raised: hsl(0, 0%, 98%);
        --surface-sunken: hsl(0, 0%, 96%);
        --text: hsl(218, 12%, 52%);
        --text-dark: hsl(218, 30%, 15%);
        --text-light: hsl(218, 12%, 70%);
        --border: hsl(210, 20%, 88%);
        --border-light: hsl(210, 20%, 94%);
        --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
        --shadow-md: 0 10px 25px -5px rgba(11, 48, 82, 0.08), 0 4px 10px -2px rgba(11, 48, 82, 0.04);
        --shadow-lg: 0 25px 50px -12px rgba(11, 48, 82, 0.12);
        --shadow-xl: 0 35px 60px -15px rgba(11, 48, 82, 0.18);
        --primary-10: hsla(var(--h-primary), var(--s-primary), var(--l-primary), 0.10);
        --primary-20: hsla(var(--h-primary), var(--s-primary), var(--l-primary), 0.20);
        --glass-bg: rgba(255, 255, 255, 0.95);
        --glass-border: rgba(255, 255, 255, 0.5);
        color-scheme: light;
    }

    html[data-theme="light"] body {
        background-color: var(--white);
    }

    html[data-theme="light"] body:not(.has-sidebar) .site-header {
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border-bottom-color: var(--border-light);
    }

    html[data-theme="light"] body:not(.has-sidebar) .site-header.scrolled {
        background: rgba(255, 255, 255, 0.98);
    }

    html[data-theme="light"] .logo-text {
        color: var(--primary);
    }

    html[data-theme="light"] .section-light {
        background: var(--light);
    }

    html[data-theme="light"] .section-gradient {
        background: linear-gradient(180deg, #ffffff 0%, var(--light) 100%);
    }

    html[data-theme="light"] .product-section:nth-child(even) {
        background: var(--light);
    }
}

/* =============================================
   32. THEME TOGGLE BUTTON
   ============================================= */

.adamiro-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface-raised);
    color: var(--text-dark);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
    flex-shrink: 0;
    padding: 0;
    vertical-align: middle;
}

.adamiro-theme-toggle:hover {
    background: var(--primary-10);
    border-color: var(--primary);
    color: var(--primary);
    transform: scale(1.08);
}

.adamiro-theme-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.adamiro-theme-toggle .icon-sun {
    display: block;
}

.adamiro-theme-toggle .icon-moon {
    display: none;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .adamiro-theme-toggle .icon-sun {
        display: none;
    }

    html:not([data-theme="light"]) .adamiro-theme-toggle .icon-moon {
        display: block;
    }
}

html[data-theme="dark"] .adamiro-theme-toggle {
    background: hsl(194, 45%, 12%);
    border-color: rgba(255, 255, 255, 0.12);
    color: hsl(194, 12%, 85%);
}

html[data-theme="dark"] .adamiro-theme-toggle .icon-sun {
    display: none;
}

html[data-theme="dark"] .adamiro-theme-toggle .icon-moon {
    display: block;
}

/* =============================================
   33. HEADER SEARCH WIDGET
   ============================================= */

.header-search {
    display: flex;
    align-items: center;
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.3s ease,
        border-color 0.3s ease;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

.header-search.is-open {
    width: 320px;
    background: var(--white);
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.header-search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-dark);
    padding: 0;
    transition: color var(--transition-fast);
    flex-shrink: 0;
}

.header-search-toggle:hover {
    color: var(--primary);
}

.header-search.is-open .header-search-toggle {
    color: var(--primary);
}

.header-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-dark);
    padding: 0 16px 0 0;
    height: 42px;
    width: 0;
    opacity: 0;
    transition: opacity 0.25s ease 0.1s;
}

.header-search.is-open .header-search-input {
    width: auto;
    opacity: 1;
}

.header-search-input::placeholder {
    color: var(--text-light);
    font-weight: 400;
}

/* Remove browser default search input styling */
.header-search-input::-webkit-search-cancel-button,
.header-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .header-search {
        background: hsl(194, 50%, 10%);
        border-color: hsl(194, 30%, 20%);
    }

    .header-search.is-open {
        background: hsl(194, 50%, 8%);
        border-color: var(--primary);
    }

    .header-search-toggle {
        color: hsl(194, 12%, 80%);
    }

    .header-search-input {
        color: hsl(194, 12%, 92%);
    }
}

html[data-theme="dark"] .header-search {
    background: hsl(194, 50%, 10%);
    border-color: hsl(194, 30%, 20%);
}

html[data-theme="dark"] .header-search.is-open {
    background: hsl(194, 50%, 8%);
    border-color: var(--primary);
}

html[data-theme="dark"] .header-search-toggle {
    color: hsl(194, 12%, 80%);
}

html[data-theme="dark"] .header-search-input {
    color: hsl(194, 12%, 92%);
}

/* Mobile */
@media (max-width: 768px) {
    .header-search {
        width: 38px;
        height: 38px;
    }

    .header-search-toggle {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }

    .header-search-input {
        height: 36px;
        font-size: 0.85rem;
    }

    .header-search.is-open {
        position: absolute;
        right: 24px;
        width: calc(100vw - 48px);
        z-index: 1002;
    }
}

/* =============================================
   15. PREMIUM ARTICLE TEMPLATES
   ============================================= */

/* Pinned Hero Setup */
.premium-pinned-hero {
    position: sticky;
    top: var(--header-height);
    z-index: 1;
    background: var(--surface-deep, var(--surface));
    padding-top: 60px;
    padding-bottom: 120px;
    min-height: 50vh;
}

/* Main Content Layer (Scrolls over the hero) */
.premium-main-content {
    position: relative;
    z-index: 2;
    background: var(--surface);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.05);
    /* Slight shadow to elevate it */
}

/* Main layout grid (approx 1026px + 300px sidebar) */
.premium-layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

@media (min-width: 1024px) {
    .premium-layout-grid {
        grid-template-columns: 1fr 280px;
        gap: 4rem;
        padding-top: 60px;
    }
}

/* Article Hero Typography */
.premium-hero-title {
    font-size: clamp(32px, 5vw + 1rem, 76px);
    font-weight: 300;
    line-height: 1;
    margin-bottom: 40px;
    color: var(--text-dark);
    transform-origin: left center;
    transition: none;
    /* Managed by JS scroll event */
    will-change: transform, opacity;
}

.premium-hero-title.wp-block-post-title {
    margin-bottom: 40px;
}

.premium-hero-meta {
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color: var(--text-light);
    margin-bottom: 2rem;
    display: flex;
    gap: 0.5rem;
    text-transform: uppercase;
}

/* Body and Lead paragraph */
.premium-lead-text {
    font-size: clamp(1.125rem, 1.5vw + 0.7rem, 1.5rem);
    font-weight: 300;
    line-height: 1.4;
    color: var(--text-dark);
    margin-bottom: 24px;
}

.premium-post-content {
    padding-bottom: 80px;
}

.premium-post-content p {
    font-size: clamp(1.125rem, 1.5vw + 0.7rem, 1.5rem);
    font-weight: 300;
    line-height: 1.4;
    color: var(--text-dark);
    margin-bottom: 24px;
}

.premium-post-content h2 {
    font-size: clamp(1.375rem, 2vw + 0.75rem, 2rem);
    font-weight: 700;
    line-height: 1.2;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

.premium-post-content h3 {
    font-size: clamp(20px, 1.5vw + 0.75rem, 28px);
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-dark);
    margin: 2.5rem 0 1rem;
}

.premium-pull-quote {
    font-size: clamp(32px, 3vw + 1rem, 52px);
    font-weight: 300;
    line-height: 1;
    color: var(--text-dark);
    margin: 3rem 0 2rem;
}

/* Appering Key Takeaways */
.premium-key-takeaways {
    background: var(--surface-sunken);
    border-left: 4px solid var(--primary);
    padding: 2rem 2.5rem;
    margin: 2rem 0;
    border-radius: var(--radius-sm);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.premium-key-takeaways.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.premium-key-takeaways h3 {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--primary);
}

/* Image Animations */
img.premium-img-anim {
    transform: scale(0.96);
    opacity: 0.5;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease;
}

img.premium-img-anim.is-visible {
    transform: scale(1);
    opacity: 1;
}

/* Sidebar styling */
.premium-sidebar {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
    align-self: start;
    padding-top: 10px;
}

/* Dark Mode overrides */
html[data-theme="dark"] .premium-main-content {
    box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .premium-key-takeaways {
    background: var(--surface-sunken);
    border-left-color: var(--primary-light);
}

html[data-theme="dark"] .premium-pull-quote {
    color: var(--text-light);
}

/* Responsive: hide sidebar below 1024px */
@media (max-width: 1023px) {
    .premium-sidebar {
        display: none;
    }
}

/* Responsive: mobile (<= 768px) */
@media (max-width: 768px) {
    .premium-pinned-hero {
        min-height: 35vh;
        padding-top: 32px;
        padding-bottom: 48px;
    }

    .premium-hero-title {
        will-change: auto;
    }

    .premium-main-content {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .premium-post-content p,
    .premium-lead-text {
        font-size: 18px;
    }

    .premium-post-content h2 {
        font-size: 22px;
    }

    .premium-pull-quote {
        font-size: clamp(24px, 5vw, 36px);
    }

    .premium-layout-grid {
        padding: 0 16px;
        gap: 1.5rem;
    }
}

/* Accessibility: respect user motion preference */
@media (prefers-reduced-motion: reduce) {
    .premium-hero-title {
        will-change: auto;
        transition: none;
    }

    .premium-key-takeaways {
        opacity: 1;
        transform: none;
        transition: none;
    }

    img.premium-img-anim {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =============================================
   34. INTERACTIVE FILTER BAR
   ============================================= */

.filter-bar-section {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    position: sticky;
    top: var(--header-height);
    z-index: 900;
}

.filter-bar {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.filter-dropdown {
    position: relative;
}

.filter-toggle {
    background: none;
    border: none;
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    transition: color var(--transition-fast);
}

.filter-toggle:hover,
.filter-toggle[aria-expanded="true"] {
    color: var(--primary);
}

.filter-toggle svg {
    transition: transform var(--transition-fast);
}

.filter-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.filter-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-fast);
    z-index: 10;
}

.filter-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.filter-menu ul {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
}

.filter-menu li a {
    display: block;
    padding: 0.75rem 1.5rem;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.filter-menu li a:hover {
    background: var(--primary-10);
    color: var(--primary);
}

.filter-search {
    margin-left: auto;
}

.filter-search form {
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--border);
    transition: border-color var(--transition-fast);
}

.filter-search form:focus-within {
    border-color: var(--primary);
}

.filter-search input {
    border: none;
    background: transparent;
    padding: 0.5rem;
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 0.9rem;
    color: var(--text-dark);
    outline: none;
    width: 200px;
}

.filter-search button {
    background: none;
    border: none;
    color: var(--text-dark);
    cursor: pointer;
    padding: 0.5rem;
}

/* =============================================
   35. CASE STUDY CARDS
   ============================================= */

.case-studies-section {
    padding: 5rem 0;
}

.case-studies-grid {
    gap: 20px;
}

.case-study-card {
    position: relative;
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    height: 480px;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.case-study-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.case-study-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.case-study-card:hover .case-study-image {
    transform: scale(1.05);
}

.case-study-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 30, 35, 0.95) 0%, rgba(10, 30, 35, 0.4) 40%, rgba(10, 30, 35, 0) 100%);
}

.case-study-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    z-index: 2;
    transform: translateY(10px);
    transition: transform var(--transition-base);
}

.case-study-card:hover .case-study-content {
    transform: translateY(0);
}

.case-study-category {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--primary-light);
    margin-bottom: 0.75rem;
}

.case-study-title {
    color: #ffffff;
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 0;
}

/* =============================================
   36. MEDIA PLAYLIST
   ============================================= */

.media-playlist-section {
    padding: 6rem 0;
    background: var(--surface-sunken);
}

.playlist-section-title {
    font-size: clamp(1.75rem, 2.5vw + 1rem, 3.5rem);
    margin-bottom: 1.5rem;
    max-width: 800px;
}

.playlist-section-desc {
    font-size: 1.15rem;
    color: var(--text);
    margin-bottom: 4rem;
    max-width: 800px;
}

.media-playlist-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    min-height: 600px;
}

.media-main-video {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
}

.media-main-video::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    transition: background var(--transition-base);
}

.media-main-video:hover::after {
    background: rgba(0, 0, 0, 0.4);
}

.play-btn-large {
    position: relative;
    z-index: 2;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary);
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.play-btn-large svg {
    width: 32px;
    height: 32px;
    margin-left: 4px;
}

.media-main-video:hover .play-btn-large {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(var(--primary), 0.5);
}

.media-main-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3rem;
    z-index: 2;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
}

.media-main-overlay h2 {
    color: #ffffff;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.media-main-overlay p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    margin: 0;
}

.media-playlist-sidebar {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.media-sidebar-header h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.media-sidebar-header p {
    font-size: 0.95rem;
    color: var(--text);
    margin-bottom: 2rem;
}

.media-playlist-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.playlist-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    text-decoration: none;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.playlist-item:hover {
    background: var(--surface-raised);
    transform: translateX(4px);
}

.playlist-item.active {
    background: var(--primary-10);
    border: 1px solid var(--primary-20);
}

.playlist-thumb {
    width: 100px;
    height: 60px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    position: relative;
}

.playlist-item.active .playlist-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.playlist-item.active .playlist-thumb::before {
    content: '▶';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 14px;
    z-index: 2;
}

.playlist-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.3;
}

/* =============================================
   37. ASYMMETRIC FOOTER
   ============================================= */

.footer-asymmetric {
    background: var(--surface-sunken);
    padding: 6rem 0 3rem;
    border-top: 1px solid var(--border);
}

.footer-asymmetric-grid {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr;
    gap: 4rem;
    margin-bottom: 6rem;
}

.footer-tagline {
    font-size: clamp(1.5rem, 2vw + 0.75rem, 2.75rem);
    font-weight: 300;
    line-height: 1.2;
    color: var(--text-dark);
    max-width: 500px;
}

.footer-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.footer-links-grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-links-grid a {
    color: var(--text-dark);
    font-size: 1.1rem;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-links-grid a:hover {
    color: var(--primary);
}

.footer-cta-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.footer-cta-col p {
    font-size: 0.9rem;
    color: var(--text);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.btn-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 24px;
    background: var(--success);
    color: #fff;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-filter:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: #fff;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 2rem;
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.footer-logo strong {
    font-size: 1.5rem;
    letter-spacing: -0.05em;
    color: var(--text-dark);
}

.footer-legal-links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-legal-links a {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: 0.05em;
}

.footer-legal-links a:hover {
    color: var(--primary);
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.footer-social span {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.footer-social a {
    color: var(--text-dark);
    font-weight: 600;
}

.footer-social a:hover {
    color: var(--primary);
}

.footer-disclaimer p {
    font-size: 0.75rem;
    color: var(--text-light);
    line-height: 1.6;
}

/* Dark mode overrides for new components */
html[data-theme="dark"] .filter-bar-section {
    background: var(--surface);
}

html[data-theme="dark"] .filter-menu {
    background: var(--surface-raised);
}

html[data-theme="dark"] .playlist-item.active {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 1024px) {
    .media-playlist-layout {
        grid-template-columns: 1fr;
    }

    .footer-asymmetric-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

/* =============================================
   38. INSIGHTS GRID
   ============================================= */

.insights-section {
    padding: clamp(3rem, 5vw, 5rem) 0;
    background: var(--surface);
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.insight-card {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-decoration: none;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    box-shadow: var(--shadow-sm);
}

.insight-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-xl);
}

.insight-card-bg {
    position: absolute;
    inset: -5%;
    /* Negative inset to prevent gaps during rotation/scaling */
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.insight-card:hover .insight-card-bg {
    transform: scale(1.08) rotate(2deg);
}

.insight-card-data {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.95);
    margin: 1rem;
    padding: 1.5rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transform: translateY(10px);
    transition: transform var(--transition-base);
}

.insight-card:hover .insight-card-data {
    transform: translateY(0);
}

.insight-badge {
    display: inline-block;
    padding: 4px 8px;
    background: var(--surface-sunken);
    color: var(--text-dark);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    border-radius: 4px;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border);
}

.insight-meta {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.insight-meta strong {
    color: var(--text-dark);
    margin-right: 0.5rem;
}

.insight-title {
    font-size: 1.2rem;
    line-height: 1.4;
    color: var(--text-dark);
    margin: 0;
}

/* =============================================
   39. POLAROID SPLIT
   ============================================= */

.polaroid-split-section {
    background: var(--surface-raised);
    overflow: hidden;
}

.polaroid-split-container {
    display: flex;
    flex-wrap: wrap;
    min-height: 70vh;
}

.polaroid-text-col {
    flex: 1 1 500px;
    padding: 6rem 5% 6rem 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.polaroid-image-col {
    flex: 1 1 500px;
    position: relative;
    min-height: 500px;
}

.polaroid-bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.polaroid-subtitle {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.polaroid-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 300;
    line-height: 1.1;
    color: var(--text-dark);
    margin-bottom: 2rem;
}

.polaroid-desc {
    font-size: 1.25rem;
    color: var(--text);
    margin-bottom: 3rem;
    max-width: 500px;
}

.polaroid-cta {
    align-self: flex-start;
}

.polaroid-frame-wrapper {
    padding: 1rem;
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    transform: rotate(3deg);
    transition: transform 0.4s ease;
    max-width: 80%;
}

.polaroid-split-section:hover .polaroid-frame-wrapper {
    transform: rotate(0deg) scale(1.02);
}

.polaroid-photo-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
}

/* =============================================
   40. EXPERT CARDS
   ============================================= */

.expert-cards-section {
    padding: 6rem 0;
    background: var(--surface-sunken);
}

.expert-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 3rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1rem;
}

.expert-header h2 {
    font-size: clamp(1.75rem, 2vw + 1rem, 3rem);
    font-weight: 300;
    margin: 0;
}

.expert-all-link {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-dark);
    text-decoration: none;
    text-transform: uppercase;
    transition: color var(--transition-fast);
}

.expert-all-link:hover {
    color: var(--primary);
}

.expert-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.expert-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.expert-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-sm);
    border-color: var(--primary-20);
}

.expert-avatar {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.expert-details {
    flex-grow: 1;
}

.expert-name {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--text-dark);
    margin: 0 0 0.25rem 0;
}

.expert-role {
    font-size: 0.75rem;
    color: var(--text);
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}

.expert-office {
    font-size: 0.75rem;
    color: var(--text-light);
    margin: 0 0 0.75rem 0;
}

.expert-contact {
    display: inline-flex;
    color: var(--text-light);
    transition: color var(--transition-fast);
}

.expert-contact:hover {
    color: var(--primary);
}

/* Dark mode overwrites for Nordics components */
html[data-theme="dark"] .insight-card-data {
    background: rgba(20, 30, 35, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .polaroid-frame-wrapper {
    background: var(--surface);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* =============================================
   41. CAROUSEL CARDS
   ============================================= */

.carousel-cards-section {
    padding: 6rem 0;
    background: var(--surface-sunken);
    overflow: hidden;
}

.carousel-container {
    position: relative;
    padding-left: max(5%, calc((100vw - 1200px) / 2));
    padding-bottom: 3rem;
}

.carousel-track {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
    padding-right: 5%;
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

.carousel-slide {
    flex: 0 0 85%;
    max-width: 900px;
    height: 500px;
    scroll-snap-align: start;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    display: flex;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

@media (min-width: 1024px) {
    .carousel-slide {
        flex: 0 0 70%;
    }
}

.carousel-slide:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.carousel-card-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.carousel-slide:hover .carousel-card-img {
    transform: scale(1.05);
}

.carousel-card-content {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.95);
    margin: auto 2rem 2rem max(40%, 300px);
    padding: 3rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateY(10px);
    transition: transform var(--transition-base);
}

.carousel-slide:hover .carousel-card-content {
    transform: translateY(0);
}

.carousel-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-light);
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.carousel-title {
    font-size: 2rem;
    font-weight: 300;
    color: var(--text-dark);
    line-height: 1.2;
    margin-bottom: 1rem;
}

.carousel-desc {
    font-size: 1.1rem;
    color: var(--text);
    margin-bottom: 2rem;
    line-height: 1.5;
}

.carousel-btn {
    align-self: flex-start;
}

.carousel-controls {
    display: flex;
    gap: 1rem;
    position: absolute;
    bottom: 0;
    right: 5%;
}

.carousel-control {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.carousel-control:hover {
    background: var(--text-dark);
    color: var(--surface);
    border-color: var(--text-dark);
}

/* =============================================
   42. FEATURED INSIGHT ROW
   ============================================= */

.featured-insight-section {
    padding: 6rem 0;
    background: var(--surface);
}

.featured-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 3rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1rem;
}

.featured-header h2 {
    font-size: clamp(1.75rem, 2vw + 1rem, 3rem);
    font-weight: 300;
    margin: 0;
}

.featured-all-link {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-dark);
    text-decoration: none;
    text-transform: uppercase;
    transition: color var(--transition-fast);
}

.featured-all-link:hover {
    color: var(--primary);
}

.featured-insight-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

@media (max-width: 1024px) {
    .featured-insight-grid {
        grid-template-columns: 1fr;
    }
}

.featured-insight-main,
.featured-insight-secondary {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-decoration: none;
}

.featured-insight-img {
    position: relative;
    border-radius: var(--radius-md);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.featured-insight-main .featured-insight-img {
    aspect-ratio: 16/9;
}

.featured-insight-secondary .featured-insight-img {
    aspect-ratio: 4/3;
}

.featured-insight-main .play-btn-large {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: #fff;
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.featured-insight-main:hover .play-btn-large {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: var(--shadow-lg);
}

.featured-insight-logo {
    position: absolute;
    top: 2rem;
    left: 2rem;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.05em;
}

.featured-tag {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-light);
    letter-spacing: 0.1em;
}

.featured-title {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 300;
    line-height: 1.2;
    color: var(--text-dark);
    margin: 0;
    transition: color var(--transition-fast);
}

.featured-insight-main:hover .featured-title,
.featured-insight-secondary:hover .featured-title {
    color: var(--primary);
}

/* =============================================
   43. TOPICS GRID SPLIT
   ============================================= */

.topics-grid-section {
    padding: clamp(3rem, 6vw, 6rem) 0;
    background: var(--surface-sunken);
}

.topics-split-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 2rem;
}

@media (max-width: 1024px) {
    .topics-split-layout {
        grid-template-columns: 1fr;
    }
}

.topic-card-primary {
    background: var(--primary);
    color: #ffffff;
    border-radius: var(--radius-lg);
    padding: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 480px;
}

.topic-card-primary h2 {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 300;
    line-height: 1.1;
    margin: 0;
    max-width: 400px;
}

.topic-cards-secondary {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.topic-card-minor {
    background: var(--surface);
    border-radius: var(--radius-lg);
    display: flex;
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    flex: 1;
}

.topic-card-minor:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.topic-minor-text {
    padding: 3rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.topic-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-light);
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

.topic-title {
    font-size: 2rem;
    font-weight: 300;
    color: var(--text-dark);
    margin: 0;
}

.topic-minor-img {
    width: 40%;
    background-size: cover;
    background-position: center;
    position: relative;
}

.topic-icon-plus {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dark);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast);
}

.topic-card-minor:hover .topic-icon-plus {
    transform: scale(1.1);
}

/* =============================================
   45. SUBSCRIPTION BANNER
   ============================================= */

.subscription-section {
    padding: 2rem 0 6rem 0;
    background: var(--surface);
}

.subscription-banner {
    background: var(--surface-sunken);
    border-radius: var(--radius-lg);
    padding: 4rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
    box-shadow: var(--shadow-sm);
}

.subscription-banner-text {
    flex: 1;
}

.subscription-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.subscription-title {
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 300;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.2;
}

.subscription-banner-form {
    flex: 0 0 clamp(300px, 40%, 500px);
}

.subscription-form {
    display: flex;
    background: var(--surface);
    border-radius: 50px;
    padding: 0.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.subscription-form:focus-within {
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}

.subscription-form input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
    color: var(--text-dark);
    outline: none;
}

.subscription-form input::placeholder {
    color: var(--text-light);
}

.subscription-form .btn-icon-only {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* =============================================
   46. ARTICLE GRID
   ============================================= */

.article-grid-section {
    padding: 4rem 0 8rem 0;
    background: var(--surface);
}

.article-grid-header {
    margin-bottom: 3rem;
}

.article-grid-header h2 {
    font-size: clamp(2.5rem, 4vw, 4rem);
    font-weight: 300;
    color: var(--text-dark);
    margin: 0;
}

.article-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2vw, 24px);
}

.article-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface-sunken);
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    height: 100%;
}

.article-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-xl);
}

.article-card-media {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.article-card-bg {
    position: absolute;
    inset: -5%;
    /* Prevent edge gaps on rotation */
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.article-card:hover .article-card-bg {
    transform: scale(1.08) rotate(2deg);
}

.article-media-badge {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    padding: 4px 10px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 4px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
}

.article-card-content {
    padding: 2rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

.article-meta {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.article-meta strong {
    color: var(--text-dark);
    margin-right: 0.5rem;
}

.article-title {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--text-dark);
    line-height: 1.3;
    margin: 0;
    transition: color var(--transition-fast);
}

.article-card:hover .article-title {
    color: var(--primary);
}

/* Dark mode overwrites for Energy components */
html[data-theme="dark"] .subscription-banner {
    background: var(--surface-raised);
}

html[data-theme="dark"] .subscription-form {
    background: var(--surface);
    border-color: var(--border-light);
}

html[data-theme="dark"] .article-card {
    background: var(--surface-raised);
}

html[data-theme="dark"] .carousel-card-content {
    background: rgba(20, 30, 35, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* =============================================
   44. RESPONSIVE PATTERN REFINEMENTS
   ============================================= */

/* Tablet & Mobile (max-width: 1024px) */
@media (max-width: 1024px) {

    /* Filter Bar */
    .filter-bar {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .filter-search {
        margin-left: 0;
        width: 100%;
    }

    .filter-search form,
    .filter-search input {
        width: 100%;
    }

    /* Polaroid Split */
    .polaroid-text-col {
        flex: 1 1 100%;
        padding: 4rem 5% 3rem;
    }

    .polaroid-image-col {
        flex: 1 1 100%;
        min-height: 400px;
    }

    .polaroid-frame-wrapper {
        transform: rotate(0deg);
        max-width: 90%;
    }

    /* Asymmetric Footer Footer-Bottom */
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .footer-legal {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
}

/* Mobile Devices (max-width: 768px) */
@media (max-width: 768px) {

    /* General spacing */
    .case-studies-section,
    .media-playlist-section,
    .footer-asymmetric,
    .insights-section,
    .polaroid-split-section,
    .expert-cards-section,
    .carousel-cards-section,
    .featured-insight-section,
    .topics-grid-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    /* Filter Bar Defaults */
    .filter-menu {
        width: 100%;
        min-width: unset;
    }

    /* Case Study Cards */
    .case-studies-grid {
        grid-template-columns: 1fr;
    }

    .case-study-card {
        height: 380px;
    }

    .case-study-content {
        padding: 1.5rem;
    }

    /* Media Playlist */
    .media-main-video {
        min-height: 250px;
    }

    .media-main-overlay {
        padding: 1.5rem;
    }

    .media-main-overlay h2 {
        font-size: 1.5rem;
    }

    .media-playlist-sidebar {
        padding: 1.5rem;
    }

    /* Asymmetric Footer */
    .footer-links-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Insights Grid */
    .insight-card {
        height: 400px;
    }

    /* Expert Cards */
    .expert-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    /* Carousel Cards */
    .carousel-container {
        padding-left: 5%;
    }

    .carousel-slide {
        flex: 0 0 90%;
        height: auto;
        min-height: 450px;
    }

    .carousel-card-content {
        margin: 50% 1rem 1rem 1rem;
        padding: 1.5rem;
    }

    .carousel-title {
        font-size: 1.5rem;
    }

    .carousel-controls {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 2rem;
        justify-content: center;
    }

    /* Featured Insight Row */
    .featured-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    /* Topics Grid Split */
    .topic-card-primary {
        padding: 2.5rem;
        min-height: 380px;
    }

    .topic-card-primary h2 {
        font-size: 2rem;
    }

    .topic-card-minor {
        flex-direction: column;
    }

    .topic-minor-text {
        padding: 1.5rem;
    }

    .topic-minor-img {
        width: 100%;
        height: 200px;
    }

    .topic-icon-plus {
        bottom: 1rem;
        right: 1rem;
    }

    /* Article Grid */
    .article-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Subscription Banner */
    .subscription-banner {
        flex-direction: column;
        gap: 2rem;
        padding: clamp(2rem, 4vw, 2.5rem);
    }

    .subscription-banner-form {
        flex: 1 1 100%;
    }
}

/* =============================================
   48. SMALL PHONES (max-width: 480px)
   ============================================= */

@media (max-width: 480px) {

    .container,
    .container-narrow {
        padding: 0 16px;
    }

    .hero-container {
        padding: 28px 16px;
    }

    .section-header {
        margin-bottom: 2rem;
    }

    .stats-bar {
        flex-direction: column;
        align-items: center;
    }

    .article-grid {
        grid-template-columns: 1fr;
    }

    .btn-lg {
        padding: 14px 24px;
    }

    .value-prop {
        padding: 1.5rem 1rem;
    }

    .pillar-card,
    .module-pillar-card {
        padding: 1.25rem 1rem;
    }

    .premium-layout-grid {
        padding: 0 12px;
    }

    .topic-card-primary {
        padding: 1.75rem;
        min-height: 300px;
    }

    .subscription-banner {
        padding: 1.5rem;
    }
}

/* =============================================
   34. DARK MODE — FORM INPUTS & PLUGIN UI
   ============================================= */

@media (prefers-color-scheme: dark) {

    input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]),
    textarea,
    select {
        background: hsl(194, 50%, 8%);
        color: hsl(194, 12%, 88%);
        border-color: hsl(194, 30%, 18%);
    }

    input::placeholder,
    textarea::placeholder {
        color: hsl(194, 12%, 45%);
    }

    /* Plugin UI blocks */
    .adamiro-checkout-wrap,
    .adamiro-dashboard-wrap,
    .adamiro-group-wrap {
        background: hsl(194, 50%, 7%);
        border-color: hsl(194, 30%, 16%);
    }

    .adamiro-card,
    .adamiro-panel {
        background: hsl(194, 50%, 9%);
        border-color: hsl(194, 30%, 16%);
    }
}

html[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: var(--navy);
    color: hsl(194, 12%, 88%);
    border-color: var(--navy);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: hsl(194, 12%, 45%);
}

html[data-theme="dark"] .adamiro-checkout-wrap,
html[data-theme="dark"] .adamiro-dashboard-wrap,
html[data-theme="dark"] .adamiro-group-wrap,
html[data-theme="dark"] .adamiro-card,
html[data-theme="dark"] .adamiro-panel {
    background: hsl(194, 50%, 9%);
    border-color: hsl(194, 30%, 16%);
}

@media (prefers-color-scheme: dark) {

    html[data-theme="light"] input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]),
    html[data-theme="light"] textarea,
    html[data-theme="light"] select {
        background: #ffffff;
        color: hsl(218, 30%, 15%);
        border-color: hsl(210, 20%, 88%);
    }

    html[data-theme="light"] input::placeholder,
    html[data-theme="light"] textarea::placeholder {
        color: hsl(218, 12%, 70%);
    }
}

/* =============================================
   STANDARD PAGE HERO — delegated to mood-hero
   ============================================= */

/* Featured-image slot inside std-page-hero keeps a rounded corner —
   the section chrome (padding, background, heading scale) is inherited
   from the mood-hero alias at the bottom of the mood palette. */
.std-page-hero__image,
.std-page-hero__image img,
.std-page-hero .wp-block-image,
.std-page-hero .wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    border-radius: var(--radius-lg, 20px);
}

/* =============================================
   BUTTONS: Always use --teal
   ============================================= */

.btn-primary:not(.wp-block-button) {
    background: var(--teal);
    border-color: var(--teal);
    color: #ffffff;
}

.btn-primary:not(.wp-block-button):hover {
    background: var(--teal-dark);
    border-color: var(--teal-dark);
    color: #ffffff;
}

.btn-secondary:not(.wp-block-button) {
    color: var(--teal);
    border-color: var(--teal);
}

.btn-secondary:not(.wp-block-button):hover {
    background: var(--teal);
    color: #ffffff;
}

.btn-primary>.wp-block-button__link {
    background: var(--teal) !important;
    border-color: var(--teal) !important;
    color: #ffffff !important;
}

.btn-primary>.wp-block-button__link:hover {
    background: var(--teal-dark) !important;
    border-color: var(--teal-dark) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .btn-primary>.wp-block-button__link {
    background: var(--teal) !important;
    border-color: var(--teal) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .btn-primary>.wp-block-button__link:hover {
    background: var(--teal-dark) !important;
    border-color: var(--teal-dark) !important;
}

/* =============================================
   DARK MODE: Dashboard/App pages use --navy background
   ============================================= */

html[data-theme="dark"] body.has-sidebar,
html[data-theme="dark"] .app-main,
html[data-theme="dark"] .site-main.app-main {
    background-color: var(--navy-deep);
}

/* Sidebar theme toggle alignment */
.sidebar-theme-toggle {
    display: block;
}

html[data-theme="dark"] .sidebar-theme-toggle .adamiro-theme-toggle .icon-sun {
    display: block;
}

html[data-theme="dark"] .sidebar-theme-toggle .adamiro-theme-toggle .icon-moon {
    display: none;
}

/* =============================================
   ADM PATTERN SYSTEM — Front Page Sections
   Used by adm-*.php modular block patterns
   ============================================= */

/* ── WP BLOCK DEFAULTS RESET ── */
/*
   Neutralises WordPress block library default margins/padding
   within all adm-* section patterns.
   Uses :where() to keep specificity at (0,0,1) so any
   adm-* class rule (specificity ≥ 10) can freely override.
*/

/* Paragraph margins */
:where(section[class*="adm-"]) p,
:where(section[class*="adm-"]) .wp-block-paragraph {
    margin-top: 0;
    margin-bottom: 0;
    margin-block-start: 0;
    margin-block-end: 0;
}

/* Heading margins */
:where(section[class*="adm-"]) h1,
:where(section[class*="adm-"]) h2,
:where(section[class*="adm-"]) h3,
:where(section[class*="adm-"]) h4,
:where(section[class*="adm-"]) h5,
:where(section[class*="adm-"]) h6,
:where(section[class*="adm-"]) .wp-block-heading {
    margin-top: 0;
    margin-bottom: 0;
    margin-block-start: 0;
    margin-block-end: 0;
}

/* WP block group structural wrappers: remove default padding/margin */
:where(section[class*="adm-"]) .wp-block-group:not([class*="adm-"]) {
    padding: 0;
    margin: 0;
}

/* WP lists: remove default indent (adm-* lists use absolute-positioned bullets) */
.adm-tier-modules.wp-block-list,
.adm-the-tank-list.wp-block-list,
.adm-prod-features.wp-block-list {
    padding-inline-start: 0;
    padding-left: 0;
    list-style: none;
}

/* WP blockquote: remove default left-border + padding */
section[class*="adm-"] .wp-block-quote {
    border-left: none !important;
    border-inline-start: none !important;
    padding-left: 0 !important;
    padding-inline-start: 0 !important;
    margin: 0;
}

/* WP buttons container: honour adm-* gap/alignment values */
.adm-hero-ctas.wp-block-buttons {
    gap: 16px !important;
    flex-wrap: wrap;
    align-items: center;
}

.adm-final-cta-buttons.wp-block-buttons {
    gap: 20px !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* ── SHARED UTILITIES ── */
.adm-s-label {
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 40px;
}

.adm-s-label.light {
    color: var(--teal);
}

.adm-s-label.dark {
    color: var(--petrol);
}

.adm-s-h2 {
    font-family: var(--font-body);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.1;
    margin-bottom: 24px;
}

.adm-s-intro {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.75;
    max-width: 640px;
    margin-bottom: 64px;
}

/* ── BUTTONS (adm-*) ── */
.adm-btn-primary>.wp-block-button__link {
    background: var(--teal) !important;
    color: var(--navy) !important;
    border-color: var(--teal) !important;
    padding: 16px 36px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-family: var(--font-body) !important;
    letter-spacing: 0.5px !important;
    border-radius: 0 !important;
    transition: opacity 0.2s, transform 0.2s !important;
}

.adm-btn-primary>.wp-block-button__link:hover {
    background: var(--teal-dark) !important;
    border-color: var(--teal-dark) !important;
    color: var(--navy) !important;
    transform: translateY(-1px) !important;
}

.adm-btn-secondary>.wp-block-button__link {
    background: transparent !important;
    color: var(--light-gray) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--light-gray-30) !important;
    border-radius: 0 !important;
    padding: 0 0 2px 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-family: var(--font-body) !important;
    box-shadow: none !important;
    transition: color 0.2s, border-color 0.2s !important;
}

.adm-btn-secondary>.wp-block-button__link:hover {
    color: var(--off-white) !important;
    border-color: var(--off-white) !important;
    background: transparent !important;
}

/* ── HERO (adm-hero) ── */
.adm-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 160px 80px 100px;
    background: var(--navy);
    background: linear-gradient(90deg, rgba(11, 20, 38, 0.95), rgba(11, 20, 38, 0.65)), url('/wp-content/uploads/2026/04/Adamiro-hero-orange.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.adm-hero::before {
    content: '';
    position: absolute;
    top: -300px;
    right: -200px;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--teal-14) 0%, transparent 65%);
    pointer-events: none;
}

.adm-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--petrol-35) 0%, transparent 70%);
    pointer-events: none;
}

.adm-hero-eyebrow {
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--teal);
    font-weight: 600;
    margin-bottom: 32px;
}

.adm-hero h1,
.adm-con-hero h1,
.adm-hero .wp-block-heading {
    font-family: var(--font-body);
    font-size: clamp(52px, 8vw, 104px);
    font-weight: 800;
    line-height: 1.0;
    letter-spacing: -3px;
    color: var(--off-white);
    margin-bottom: 40px;
    max-width: 900px;
}

.adm-hero h1 .line2,
.adm-hero .wp-block-heading .line2 {
    color: var(--teal);
    display: block;
}

.adm-hero-sub {
    font-size: clamp(17px, 2vw, 21px);
    font-weight: 300;
    color: var(--light-gray);
    max-width: 640px;
    margin-bottom: 16px;
    line-height: 1.65;
}

.adm-hero-support {
    font-size: 14px;
    color: var(--gray);
    margin-bottom: 56px;
    font-style: italic;
}

.adm-hero-ctas {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── REALITY CHECK (adm-reality) ── */
.adm-reality {
    background: var(--off-white);
    color: var(--navy);
    padding: 120px 80px;
}

.adm-reality .adm-s-h2 {
    color: var(--navy);
}

.adm-reality-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2px;
}

.adm-reality-card {
    background: var(--navy);
    color: var(--off-white);
    padding: 44px 40px;
    position: relative;
}

.adm-reality-card::before {
    content: '"';
    position: absolute;
    top: 16px;
    left: 32px;
    font-size: 80px;
    color: var(--teal-15);
    font-family: Georgia, serif;
    line-height: 1;
}

.adm-reality-card p {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.65;
    color: var(--light-gray);
    padding-top: 32px;
    font-style: italic;
}

.adm-reality-footer {
    margin-top: 2px;
    background: var(--petrol);
    padding: 36px 40px;
}

.adm-reality-footer p {
    font-size: 16px;
    color: var(--off-white);
    font-weight: 300;
    line-height: 1.7;
    max-width: 800px;
}

.adm-reality-footer strong {
    font-weight: 600;
    color: var(--teal);
}

/* ── INSIGHT (adm-insight) ── */
.adm-insight {
    background: var(--navy);
    padding: 120px 80px;
    overflow: hidden;
}

.adm-insight-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.adm-insight-text .adm-s-h2 {
    color: var(--off-white);
}

.adm-insight-text p {
    font-size: 16px;
    color: var(--light-gray);
    line-height: 1.8;
    margin-bottom: 20px;
    font-weight: 300;
}

.adm-insight-text .adm-anchor {
    font-size: 20px;
    font-weight: 700;
    color: var(--off-white);
    margin-top: 40px;
    line-height: 1.3;
    font-style: italic;
}

.adm-insight-visual {
    display: flex;
    flex-direction: row;
    gap: 4px;
    width: 100%;
}

.adm-bar-block {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 1rem;
}

.adm-bar-block.bar1 {
    width: 83%;
}

.adm-bar-block.bar2 {
    width: 17%;
}

.adm-bar-block.dark-bar {
    background: var(--white-4);
    border: 1px solid var(--white-7);
}

.adm-bar-block.teal-bar {
    background: var(--teal);
}

.adm-bar-pct {
    font-size: 64px;
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1;
}

.adm-bar-block.dark-bar .adm-bar-pct {
    color: var(--white-20);
}

.adm-bar-block.teal-bar .adm-bar-pct {
    color: var(--navy);
}

.adm-bar-label {
    font-size: 14px;
    line-height: 1.5;
}

.adm-bar-block.dark-bar .adm-bar-label {
    color: var(--gray);
}

.adm-bar-block.teal-bar .adm-bar-label {
    color: var(--navy);
    font-weight: 600;
}

.adm-insight-caption {
    margin-top: 24px;
    font-size: 12px;
    color: var(--gray);
    font-style: italic;
    text-align: right;
}

/* ── APPROACH STEPS (adm-approach) ── */
.adm-approach {
    background: var(--petrol);
    background: linear-gradient(90deg, rgba(11, 20, 38, 1), rgba(11, 20, 38, 0.40)), url('/wp-content/uploads/2026/03/adamiro_leader.crop_.jpg');
    background-size: cover;
    background-position: left;
    padding: 120px 80px;
}

.adm-approach .adm-s-h2 {
    color: var(--off-white);
}

.adm-approach .adm-s-intro {
    color: var(--light-gray);
}

.adm-approach-steps {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 860px;
}

.adm-approach-step {
    display: grid;
    grid-template-columns: 200px 1fr;
    background: var(--black-35);
    transition: background 0.2s;
}

.adm-approach-step:hover {
    background: var(--navy-55);
}

.adm-step-product {
    background: var(--black-20);
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid var(--white-5);
}

.adm-step-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--teal);
    margin-bottom: 4px;
}

.adm-step-type {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gray);
}

.adm-step-content {
    padding: 28px 36px;
}

.adm-step-verb {
    font-size: 16px;
    font-weight: 600;
    color: var(--off-white);
    margin-bottom: 6px;
}

.adm-step-desc {
    font-size: 13px;
    color: var(--light-gray);
    line-height: 1.6;
}

.adm-approach-footer {
    margin-top: 40px;
    font-size: 20px;
    font-weight: 300;
    color: var(--off-white);
    font-style: italic;
}

.adm-approach-footer strong {
    font-weight: 700;
    color: var(--teal);
}

/* ── SYSTEM FLOW (adm-system) ── */
.adm-system {
    background: var(--off-white);
    color: var(--navy);
    padding: 120px 80px;
}

.adm-system .adm-s-h2 {
    color: var(--navy);
}

.adm-system .adm-s-intro {
    color: #555;
}

.adm-flow-row {
    display: flex;
    align-items: stretch;
    gap: 2px;
    margin-bottom: 2px;
}

.adm-flow-block {
    flex: 1;
    padding: 32px 28px;
    background: var(--navy);
    color: var(--off-white);
}

.adm-flow-block.accent {
    background: var(--teal);
    color: var(--navy);
}

.adm-flow-block.mid {
    background: var(--petrol);
}

.adm-flow-arrow {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light-blue);
    color: var(--petrol);
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.adm-flow-block h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.adm-flow-block.accent h4 {
    color: var(--navy);
}

.adm-flow-block p {
    font-size: 13px;
    line-height: 1.6;
    opacity: 0.75;
}

.adm-system-summary {
    margin-top: 56px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2px;
}

.adm-summary-block {
    background: var(--navy);
    color: var(--off-white);
    padding: 32px 28px;
}

.adm-summary-block p {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--light-gray);
}

.adm-summary-block strong {
    font-weight: 700;
    color: var(--off-white);
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
}

/* ── PRODUCTS GRID (adm-products) ── */
.adm-products {
    background: var(--navy);
    padding: 120px 80px;
}

.adm-products .adm-s-h2 {
    color: var(--off-white);
}

.adm-products .adm-s-intro {
    color: var(--light-gray);
}

.adm-product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.adm-product-card {
    background: var(--white-3);
    border: 1px solid var(--white-6);
    padding: 52px 48px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s;
}

.adm-product-card:hover {
    border-color: var(--teal-30);
}

.adm-product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--teal), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.adm-product-card:hover::before {
    opacity: 1;
}

.adm-product-card.featured {
    grid-column: span 2;
}

.adm-product-num {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--teal);
    font-weight: 600;
    margin-bottom: 20px;
}

.adm-product-name {
    font-size: 28px;
    font-weight: 700;
    color: var(--off-white);
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.adm-product-tagline {
    font-size: 15px;
    font-weight: 300;
    color: var(--teal);
    font-style: italic;
    margin-bottom: 28px;
    line-height: 1.5;
}

.adm-product-body {
    font-size: 14px;
    color: var(--light-gray);
    line-height: 1.8;
    margin-bottom: 28px;
    font-weight: 300;
}

.adm-product-cta {
    font-size: 13px;
    font-weight: 700;
    color: var(--teal);
    text-decoration: none;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--teal-30);
    padding-bottom: 2px;
    transition: border-color 0.2s;
}

.adm-product-cta:hover {
    border-color: var(--teal);
    color: var(--teal);
}

.adm-the-tank-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.adm-the-tank-list li {
    font-size: 14px;
    color: var(--light-gray);
    line-height: 1.6;
    padding-left: 20px;
    position: relative;
    font-weight: 300;
}

.adm-the-tank-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--teal);
    font-size: 12px;
}

/* ── TARGET AUDIENCE (adm-who) ── */
.adm-who {
    background: var(--petrol);
    padding: 120px 80px;
}

.adm-who .adm-s-h2 {
    color: var(--off-white);
}

.adm-who-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    margin-top: 64px;
}

.adm-who-left {
    background: var(--black-20);
    padding: 52px 48px;
}

.adm-who-left p {
    font-size: 16px;
    font-weight: 300;
    color: var(--light-gray);
    line-height: 1.8;
}

.adm-who-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 32px;
}

.adm-who-role {
    background: var(--teal-12);
    border: 1px solid var(--teal-25);
    color: var(--teal);
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.adm-who-right {
    background: var(--navy);
    padding: 52px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.adm-who-challenge {
    font-size: 22px;
    font-weight: 300;
    color: var(--off-white);
    line-height: 1.5;
    margin-bottom: 32px;
    font-style: italic;
}

.adm-who-challenge strong {
    font-weight: 700;
    font-style: normal;
    display: block;
    color: var(--teal);
    font-size: 18px;
    margin-bottom: 8px;
}

.adm-who-answer {
    font-size: 20px;
    font-weight: 700;
    color: var(--teal);
    letter-spacing: -0.3px;
}

/* ── FOUNDERS (adm-founders) ── */
.adm-founders {
    background: var(--off-white);
    color: var(--navy);
    padding: 120px 80px;
}

.adm-founders .adm-s-h2 {
    color: var(--navy);
}

.adm-founders-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    margin-top: 64px;
}

.adm-founders-quote {
    background: var(--navy);
    color: var(--off-white);
    padding: 60px 56px;
    position: relative;
    overflow: hidden;
}

.adm-founders-quote::before {
    content: '"';
    position: absolute;
    top: -20px;
    left: 40px;
    font-size: 220px;
    color: var(--teal-8);
    font-family: Georgia, serif;
    line-height: 1;
    pointer-events: none;
}

.adm-founders-quote .wp-block-quote {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.65;
    color: var(--light-gray);
    font-style: italic;
    position: relative;
    z-index: 1;
    margin-bottom: 40px;
    border: none;
    padding: 0;
}

.adm-founders-quote .wp-block-quote p {
    font-size: 20px;
    font-weight: 300;
    color: var(--light-gray);
    line-height: 1.65;
    font-style: italic;
}

.adm-founders-quote .wp-block-quote strong {
    font-weight: 600;
    color: var(--off-white);
    font-style: normal;
}

.adm-founders-attr {
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--teal);
    font-weight: 600;
    font-style: normal;
    display: block;
}

.adm-founders-facts {
    background: var(--petrol);
    padding: 60px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.adm-fact-row {
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--black-20);
    padding: 24px 28px;
}

.adm-fact-icon {
    font-size: 24px;
    min-width: 40px;
    text-align: center;
}

.adm-fact-text {
    font-size: 15px;
    color: var(--off-white);
    font-weight: 400;
    line-height: 1.4;
}

.adm-fact-text span {
    display: block;
    font-size: 12px;
    color: var(--gray);
    margin-top: 2px;
    font-weight: 300;
}

/* ── PRICING SIGNAL / TEASER (adm-pricing-signal) ── */
.adm-pricing-signal {
    background: var(--navy);
    padding: 120px 80px;
    position: relative;
    overflow: hidden;
}

.adm-pricing-signal::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--teal-10) 0%, transparent 70%);
    pointer-events: none;
}

.adm-pricing-signal .adm-s-h2 {
    color: var(--off-white);
}

.adm-pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2px;
    margin-top: 64px;
}

.adm-pricing-card {
    background: var(--white-3);
    border: 1px solid var(--white-6);
    padding: 44px 40px;
}

.adm-product-card.highlighted,
.adm-pricing-card.highlighted {
    background: var(--teal-8);
    border-color: var(--teal-30);
}

.adm-pricing-tier {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--teal);
    font-weight: 600;
    margin-bottom: 16px;
}

.adm-pricing-card .wp-block-heading,
.adm-pricing-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--off-white);
    margin-bottom: 20px;
    font-family: var(--font-body);
}

.adm-pricing-card p {
    font-size: 13px;
    color: var(--light-gray);
    line-height: 1.7;
    margin-bottom: 24px;
    font-weight: 300;
}

.adm-pricing-arrow {
    font-size: 13px;
    color: var(--teal);
    font-weight: 600;
}

.adm-pricing-footer {
    margin-top: 60px;
    text-align: center;
}

.adm-pricing-footer p {
    font-size: 15px;
    color: var(--gray);
    font-style: italic;
    margin-bottom: 32px;
    font-weight: 300;
}

/* ── PRICING PAGE HERO (adm-pricing-hero) ──────────────────
   Section chrome (background, glows, heading scale) now lives
   in the mood-hero alias block at the bottom of the mood palette.
   Only the eyebrow helper stays here so legacy DB content keeps
   its mono uppercase label. */
.adm-pr-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 28px;
}

/* ── PRICING TIERS (adm-pricing-tiers) ── */
.adm-tiers-section {
    background: var(--off-white);
    padding: 100px 80px;
}

.adm-tiers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2px;
    align-items: start;
}

.adm-tier-card {
    background: #fff;
    border: 1px solid var(--border);
    padding: 52px 44px;
    position: relative;
}

.adm-tier-card.featured {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--off-white);
}

.adm-tier-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--teal);
    color: var(--navy);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 16px;
    white-space: nowrap;
}

.adm-tier-name {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--gray);
    margin-bottom: 24px;
}

.adm-tier-card.featured .adm-tier-name {
    color: var(--teal);
}

.adm-tier-price {
    font-size: 52px;
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1;
    color: var(--navy);
    margin-bottom: 8px;
}

.adm-tier-price span {
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0;
    color: var(--gray);
}

.adm-tier-card.featured .adm-tier-price {
    color: var(--off-white);
}

.adm-tier-price-yearly {
    font-size: 13px;
    color: var(--teal);
    font-weight: 500;
    margin-bottom: 24px;
}

.adm-tier-tasks {
    font-size: 13px;
    color: var(--gray);
    font-weight: 400;
    margin-bottom: 24px;
}

.adm-tier-card.featured .adm-tier-tasks {
    color: var(--light-gray);
}

.adm-tier-divider {
    height: 1px;
    background: var(--border);
    margin-bottom: 28px;
}

.adm-tier-card.featured .adm-tier-divider {
    background: var(--white-8);
}

.adm-tier-modules {
    list-style: none;
    padding: 0;
    margin: 0 0 36px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.adm-tier-modules li {
    font-size: 14px;
    color: var(--navy);
    line-height: 1.5;
    padding-left: 20px;
    position: relative;
    font-weight: 400;
}

.adm-tier-modules li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--teal);
    font-size: 12px;
    font-weight: 700;
}

.adm-tier-card.featured .adm-tier-modules li {
    color: var(--light-gray);
}

.adm-tier-cta>.wp-block-button__link {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    border-radius: 0 !important;
    transition: all 0.2s !important;
}

.adm-tier-cta.outline>.wp-block-button__link {
    background: transparent !important;
    color: var(--navy) !important;
    border: 1px solid var(--navy) !important;
}

.adm-tier-cta.outline>.wp-block-button__link:hover {
    background: var(--navy) !important;
    color: var(--off-white) !important;
}

.adm-tier-cta.filled>.wp-block-button__link {
    background: var(--teal) !important;
    color: var(--navy) !important;
    border: 1px solid var(--teal) !important;
}

.adm-tier-cta.filled>.wp-block-button__link:hover {
    background: var(--teal-dark) !important;
    border-color: var(--teal-dark) !important;
}

/* ── PRODUCT SHOWCASE (adm-product-showcase) ── */
.adm-prod-section {
    background: var(--off-white);
    padding: 100px 80px;
}

.adm-prod-section.dark {
    background: var(--navy);
}

.adm-prod-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.adm-prod-num {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--teal);
    font-weight: 600;
    margin-bottom: 16px;
}

.adm-prod-name {
    font-family: var(--font-body);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.1;
    color: var(--navy);
    margin-bottom: 16px;
}

.adm-prod-section.dark .adm-prod-name {
    color: var(--off-white);
}

.adm-prod-tagline {
    font-size: 18px;
    font-weight: 300;
    color: var(--teal);
    font-style: italic;
    line-height: 1.5;
    margin-bottom: 24px;
}

.adm-prod-body {
    font-size: 16px;
    font-weight: 300;
    color: var(--gray);
    line-height: 1.8;
    margin-bottom: 28px;
}

.adm-prod-section.dark .adm-prod-body {
    color: var(--light-gray);
}

.adm-prod-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.adm-prod-features li {
    font-size: 14px;
    color: var(--navy);
    line-height: 1.5;
    padding-left: 20px;
    position: relative;
    font-weight: 400;
}

.adm-prod-section.dark .adm-prod-features li {
    color: var(--light-gray);
}

.adm-prod-features li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--teal);
    font-size: 12px;
}

.adm-prod-visual {
    aspect-ratio: 4 / 3;
    background: var(--teal-8);
    border: 1px solid var(--teal-20);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.adm-prod-section.dark .adm-prod-visual {
    background: var(--white-3);
    border-color: var(--white-7);
}

.adm-prod-visual-label {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gray);
    font-weight: 500;
}

/* ── FINAL CTA (adm-final-cta) ── */
.adm-final-cta {
    background: var(--petrol);
    padding: 160px 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.adm-final-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--teal-12) 0%, transparent 65%);
    pointer-events: none;
}

.adm-final-cta h2,
.adm-final-cta .wp-block-heading {
    font-family: var(--font-body);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 700;
    letter-spacing: -1.5px;
    color: var(--off-white);
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
    line-height: 1.1;
}

.adm-final-cta p {
    font-size: 20px;
    font-weight: 300;
    color: var(--light-gray);
    margin-bottom: 56px;
    position: relative;
    z-index: 1;
}

.adm-final-cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}


/* ── CONTACT HERO (adm-contact-hero) ────────────────────────
   Section chrome moved to the mood-hero alias block at the
   bottom of the mood palette. Only the eyebrow + small helpers
   stay here so legacy DB content keeps its typography. */
.adm-con-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 28px;
}

.adm-con-hero h1 .accent {
    color: var(--teal);
    display: block;
}

.adm-con-hero-note {
    font-size: 13px;
    color: var(--ink-muted);
    font-style: italic;
}

/* ── CONTACT LAYOUT (adm-contact-layout) ── */
.adm-con-main {
    background: var(--off-white);
    padding: 100px 80px;
    font-family: var(--font-body);
}

.adm-con-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 2px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

.adm-con-form-col {
    background: var(--white-4);
    min-width: 0;
}

.adm-con-right {
    min-width: 0;
}

.adm-con-form-header {
    padding: 52px 52px 40px;
    background: var(--navy);
    border-bottom: 1px solid var(--white-7);
}

.adm-con-form-label {
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--teal);
    font-weight: 600;
    margin-bottom: 20px;
}

.adm-con-form-header h2,
.adm-con-form-header .wp-block-heading {
    font-family: var(--font-body);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 700;
    color: var(--off-white);
    letter-spacing: -1px;
    line-height: 1.1;
    margin-bottom: 12px;
}

.adm-con-form-header p {
    font-size: 15px;
    font-weight: 300;
    color: var(--gray);
    line-height: 1.7;
}

.adm-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.adm-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    margin-bottom: 2px;
}

.adm-form-group {
    display: flex;
    flex-direction: column;
}

.adm-form-group.full {
    grid-column: span 2;
}

.adm-form-group label {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--teal);
    padding: 16px 20px 0;
    background: var(--navy);
    display: block;
}

.adm-form-group input,
.adm-form-group select,
.adm-form-group textarea {
    background: var(--navy);
    border: none;
    border-bottom: 1px solid var(--white-7);
    padding: 10px 20px 18px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 300;
    color: var(--off-white);
    outline: none;
    transition: background 0.2s, border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.adm-form-group input::placeholder,
.adm-form-group textarea::placeholder {
    color: var(--gray);
}

.adm-form-group input:focus,
.adm-form-group select:focus,
.adm-form-group textarea:focus {
    background: var(--petrol);
    border-color: var(--teal-30);
}

.adm-form-group textarea {
    min-height: 140px;
    resize: vertical;
}

.adm-form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238898AA' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    cursor: pointer;
}

.adm-form-group select option {
    background: var(--navy);
}

.adm-form-submit {
    margin-top: 2px;
    background: var(--teal);
    color: var(--navy);
    padding: 22px 40px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border: none;
    cursor: pointer;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: opacity 0.2s, transform 0.2s;
}

.adm-form-submit:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

.adm-form-submit .arrow {
    font-size: 20px;
}

.adm-con-right {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.adm-con-quote {
    background: var(--navy);
    padding: 52px 48px;
    position: relative;
    overflow: hidden;
    border: none !important;
    border-left: none !important;
    margin: 0 !important;
    padding-left: 48px !important;
}

.adm-con-quote::before {
    content: '\201C';
    position: absolute;
    top: -10px;
    left: 36px;
    font-size: 180px;
    color: var(--teal-8);
    font-family: Georgia, serif;
    line-height: 1;
    pointer-events: none;
}

.adm-con-quote p {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--light-gray);
    font-style: italic;
    position: relative;
    z-index: 1;
    margin-bottom: 24px;
}

.adm-con-quote p strong {
    font-style: normal;
    color: var(--off-white);
    font-weight: 600;
}

.adm-con-quote cite {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--teal);
    font-weight: 600;
    font-style: normal;
    display: block;
    position: relative;
    z-index: 1;
}

.adm-con-info {
    background: var(--petrol);
    padding: 44px 48px;
}

.adm-con-info-label {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--teal);
    font-weight: 600;
    margin-bottom: 28px;
}

.adm-con-info-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid var(--white-7);
}

.adm-con-info-item:last-child,
.adm-con-info-item.last {
    border-bottom: none;
    padding-bottom: 0;
}

.adm-con-info-icon {
    width: 40px;
    height: 40px;
    background: var(--teal-12);
    border: 1px solid var(--teal-25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--teal);
}

.adm-con-info-text {
    font-size: 14px;
    color: var(--off-white);
}

.adm-con-info-text a {
    color: var(--teal);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s;
}

.adm-con-info-text a:hover {
    opacity: 0.8;
}

.adm-con-info-text span,
.adm-con-info-sub {
    display: block;
    font-size: 12px;
    color: var(--gray);
    margin-top: 2px;
    font-weight: 300;
    margin-bottom: 0;
}

.adm-con-book {
    background: var(--teal);
    padding: 44px 48px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.adm-con-book-heading {
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.3;
    letter-spacing: -0.3px;
}

.adm-con-book-sub {
    font-size: 13px;
    color: var(--navy);
    font-weight: 300;
    opacity: 0.75;
    line-height: 1.6;
}

.adm-con-book-btn .wp-block-button__link {
    background: var(--navy) !important;
    color: var(--off-white) !important;
    padding: 14px 28px !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    border: none !important;
    transition: opacity 0.2s !important;
    width: fit-content !important;
}

.adm-con-book-btn .wp-block-button__link:hover {
    opacity: 0.85 !important;
    color: var(--off-white) !important;
}

.adm-con-customer {
    background: var(--black-20);
    border: 1px solid var(--white-7);
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.adm-con-customer-label {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gray);
    font-weight: 600;
}

.adm-con-customer-text {
    font-size: 14px;
    font-weight: 300;
    color: var(--light-gray);
    line-height: 1.6;
}

.adm-con-customer-btn {
    font-size: 13px;
    font-weight: 700;
    color: var(--teal);
    text-decoration: none;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--teal-30);
    padding-bottom: 2px;
    transition: border-color 0.2s;
    width: fit-content;
}

.adm-con-customer-btn:hover {
    border-color: var(--teal);
}

.adm-con-cta {
    background: var(--navy);
    padding: 80px 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
    font-family: var(--font-body);
}

.adm-con-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--teal-10) 0%, transparent 65%);
    pointer-events: none;
}

.adm-con-cta h2,
.adm-con-cta .wp-block-heading {
    font-family: var(--font-body);
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 300;
    color: var(--off-white);
    letter-spacing: -0.5px;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    line-height: 1.2;
}

.adm-con-cta h2 strong,
.adm-con-cta .wp-block-heading strong {
    font-weight: 700;
    color: var(--teal);
}

.adm-con-cta p {
    font-size: 15px;
    color: var(--gray);
    font-style: italic;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

.adm-con-cta-btn .wp-block-button__link {
    position: relative;
    z-index: 1;
    background: var(--teal) !important;
    color: var(--navy) !important;
    padding: 16px 36px !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    border: none !important;
    transition: opacity 0.2s, transform 0.2s !important;
}

.adm-con-cta-btn .wp-block-button__link:hover {
    opacity: 0.88 !important;
    transform: translateY(-1px) !important;
    color: var(--navy) !important;
}

/* ── RESPONSIVE: ADM PATTERNS ── */
@media (max-width: 1024px) {
    .adm-tiers-grid {
        grid-template-columns: 1fr 1fr;
    }

    .adm-product-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {

    .adm-hero,
    .adm-pr-hero {
        padding: 120px 24px 80px;
    }

    .adm-hero h1,
    .adm-con-hero h1,
    .adm-hero .wp-block-heading,
    .adm-pr-hero h1,
    .adm-pr-hero .wp-block-heading {
        letter-spacing: -1px;
    }

    .adm-reality,
    .adm-insight,
    .adm-approach,
    .adm-system,
    .adm-products,
    .adm-who,
    .adm-founders,
    .adm-pricing-signal,
    .adm-tiers-section,
    .adm-prod-section,
    .adm-final-cta {
        padding: 80px 24px;
    }

    .adm-reality-cards,
    .adm-insight-grid,
    .adm-system-summary,
    .adm-product-grid,
    .adm-who-grid,
    .adm-founders-block,
    .adm-pricing-grid,
    .adm-tiers-grid,
    .adm-prod-grid-2 {
        grid-template-columns: 1fr;
    }

    .adm-flow-row {
        flex-direction: column;
    }

    .adm-flow-arrow {
        width: 100%;
        height: 40px;
    }

    .adm-approach-step {
        grid-template-columns: 1fr;
    }

    .adm-bar-pct {
        font-size: 48px;
        min-width: 80px;
    }

    .adm-product-card {
        grid-column: span 2;
    }

    .adm-product-card.featured {
        grid-column: span 1;
    }

    .is-layout-grid {
        grid-template-columns: 1fr;
    }

    .adm-con-hero {
        padding: 120px 32px 80px;
    }

    .adm-con-hero h1,
    .adm-con-hero .wp-block-heading {
        letter-spacing: -1.5px;
    }

    .adm-con-main {
        padding: 60px 24px;
    }

    .adm-con-grid {
        grid-template-columns: 1fr;
    }

    .adm-form-row {
        grid-template-columns: 1fr;
    }

    .adm-form-group.full {
        grid-column: span 1;
    }

    .adm-con-cta {
        padding: 60px 24px;
    }
}

@media (max-width: 480px) {

    .adm-hero-ctas,
    .adm-final-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .adm-tiers-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================
   V4 SWISS OVERRIDES
   -------------------------------------------------------------
   Applied on top of the legacy .adm-* rules so existing marketing
   pages (home, pricing, products, about, contact + product pages)
   adopt the Swiss navy+teal aesthetic without rewriting block
   markup. Order matters — these must come after the original
   .adm-* definitions to win the cascade.
   See: docs/COLOR_SYSTEM_V4_MIGRATION.md
   ============================================================= */

/* ── Shared eyebrow / section label — mono + restraint ─────── */
.adm-s-label,
.adm-hero-eyebrow,
.adm-con-eyebrow,
.adm-contact-eyebrow,
.adm-pricing-tier {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase;
    color: var(--teal) !important;
    margin-bottom: 28px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.adm-s-label::before,
.adm-hero-eyebrow::before {
    content: '—';
    color: var(--teal);
    opacity: 0.8;
}

.adm-s-label.light {
    color: var(--teal) !important;
}

.adm-s-label.dark {
    color: var(--ink-muted) !important;
}

/* ── Section H2 — quieter Swiss hierarchy ──────────────────── */
.adm-s-h2 {
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
    color: var(--ink);
}

.adm-s-intro {
    font-weight: 400 !important;
    color: var(--ink-body);
    line-height: 1.6;
}

/* ── Buttons — V4 Swiss: 4px radius, 500 weight, hairline ──── */
.adm-btn-primary>.wp-block-button__link {
    background: var(--teal) !important;
    color: var(--navy-deep) !important;
    border: 1px solid var(--teal) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 22px !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em !important;
    transform: none !important;
    box-shadow: none !important;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast) !important;
}

.adm-btn-primary>.wp-block-button__link:hover {
    background: transparent !important;
    color: var(--teal) !important;
    border-color: var(--teal) !important;
    transform: none !important;
}

.adm-btn-secondary>.wp-block-button__link {
    background: transparent !important;
    border: 1px solid var(--hairline) !important;
    border-bottom-color: var(--hairline) !important;
    color: var(--ink) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 22px !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em !important;
}

.adm-btn-secondary>.wp-block-button__link:hover {
    background: transparent !important;
    border-color: var(--hairline-strong) !important;
    color: var(--teal) !important;
}

/* ── Hero — strip glows, add optional mm-grid overlay ──────── */
.adm-hero {
    padding: clamp(120px, 18vw, 200px) 80px clamp(80px, 12vw, 140px);
    /* background: var(--navy);
    background-image:
        linear-gradient(to right, rgba(47, 184, 160, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(47, 184, 160, 0.02) 1px, transparent 1px);
     background-size: 8px 8px;
    background-position: 0 0; 
    background-repeat: repeat;*/
}

.adm-hero::before,
.adm-hero::after {
    /* content: none !important;
    display: none !important; */
    background: radial-gradient(ellipse 50% 50% at top left, var(--blue-deep-18), transparent 60%),
        radial-gradient(ellipse 40% 40% at bottom right, var(--coral-18), transparent 70%);
}

.adm-hero h1,
.adm-con-hero h1,
.adm-hero .wp-block-heading {
    font-weight: 400 !important;
    letter-spacing: -0.025em !important;
    font-size: clamp(48px, 7vw, 92px) !important;
    line-height: 1.02 !important;
    color: var(--ink) !important;
}

.adm-hero h1 .line2,
.adm-hero .wp-block-heading .line2 {
    color: var(--teal) !important;
    font-weight: 500;
}

.adm-hero-sub {
    font-weight: 400 !important;
    color: var(--ink-body) !important;
    max-width: 640px;
}

.adm-hero-support {
    font-style: normal !important;
    color: var(--ink-muted) !important;
    font-family: var(--font-mono);
    font-size: 12px !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.adm-hero-ctas {
    margin-top: 48px;
}

/* ── Reality section — matte cards, hairlines ──────────────── */
.adm-reality {
    background: var(--navy);
    color: var(--ink);
    padding: clamp(80px, 10vw, 140px) 80px;
}

.adm-reality .adm-s-h2 {
    color: var(--ink);
}

.adm-reality-cards {
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.adm-reality-card {
    background: var(--surface-card) !important;
    color: var(--ink-body) !important;
    padding: 40px !important;
    border-radius: 0 !important;
}

.adm-reality-card::before {
    content: none !important;
}

.adm-reality-card p {
    font-style: normal !important;
    padding-top: 0 !important;
    color: var(--ink-body) !important;
}

/* ── Insight section — Swiss stat display, mono numerics ───── */
.adm-insight {
    background: var(--navy);
    padding: clamp(80px, 10vw, 120px) 80px;
}

.adm-insight-text .adm-s-h2 {
    color: var(--ink);
}

.adm-insight-text p {
    color: var(--ink-body);
}

.adm-insight-text .adm-anchor {
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.02em;
    color: var(--teal);
    font-style: normal;
    border-left: 1px solid var(--hairline);
    padding-left: 18px;
    margin-top: 32px;
}

.adm-insight-caption {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* Stat bars — matte panels with hairline, mono numerics */
.adm-bar-block {
    border-radius: var(--radius-md) !important;
    background: var(--surface-card) !important;
    border: 1px solid var(--hairline) !important;
    padding: 0 !important;
}

.adm-bar-block.dark-bar {
    background: var(--surface-card) !important;
}

.adm-bar-block.bar2,
.adm-bar-block.teal-bar {
    background: var(--teal) !important;
    border-color: var(--teal) !important;
}

.adm-bar-block.dark-bar .adm-bar-pct,
.adm-bar-block.bar1 .adm-bar-pct {
    font-family: var(--font-mono) !important;
    color: var(--teal) !important;
    font-size: clamp(64px, 10vw, 120px) !important;
    font-weight: 500 !important;
    letter-spacing: -0.04em !important;
    font-feature-settings: "tnum" 1 !important;
}

.adm-bar-block.bar2 .adm-bar-pct,
.adm-bar-block.teal-bar .adm-bar-pct {
    font-family: var(--font-mono) !important;
    color: var(--navy-deep) !important;
    font-size: clamp(64px, 10vw, 120px) !important;
    font-weight: 500 !important;
    letter-spacing: -0.04em !important;
}

.adm-bar-label {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    color: var(--ink-body) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.adm-bar-block.bar2 .adm-bar-label {
    color: var(--navy-deep) !important;
}

/* ── Who section — matte panels, kill "darker-20" overlays ── */
.adm-who {
    background: var(--navy) !important;
    padding: clamp(80px, 10vw, 140px) 80px;
}

.adm-who-right {
    background: var(--surface-card) !important;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    padding: 40px !important;
}

.adm-who-challenge {
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 28px;
    margin-bottom: 28px;
}

.adm-who-challenge p strong,
.adm-who-challenge p:first-child strong {
    font-family: var(--font-mono) !important;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--teal) !important;
    font-weight: 500 !important;
}

.adm-who-roles {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.adm-who-role {
    background: var(--surface-card) !important;
    color: var(--ink) !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 14px 20px !important;
    flex: 1 1 auto;
    margin: 0 !important;
    text-align: center;
}

.adm-who-answer {
    font-family: var(--font-body);
    font-size: clamp(24px, 3vw, 32px) !important;
    font-weight: 300 !important;
    color: var(--ink) !important;
    letter-spacing: -0.02em;
}

/* ── Founders section — matte quote card, bento facts ─────── */
.adm-founders {
    background: var(--navy);
    padding: clamp(80px, 10vw, 140px) 80px;
}

.adm-founders .adm-s-h2 {
    color: var(--ink);
}

.adm-founders-quote {
    background: var(--surface-card) !important;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    padding: 40px !important;
}

.adm-founders-quote blockquote {
    border-left: 1px solid var(--teal);
    padding-left: 24px;
    font-style: normal;
    color: var(--ink) !important;
}

.adm-founders-quote blockquote p {
    color: var(--ink) !important;
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.7;
}

.adm-founders-quote blockquote cite {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--teal);
    font-style: normal;
    display: block;
    margin-top: 20px;
}

/* Bento grid of facts — replace "darker-20" treatment */
.adm-founders-facts {
    background: transparent !important;
    padding: 0 !important;
}

.adm-founders-facts>div {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 1px !important;
    background: var(--hairline) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
}

.adm-founders-facts .full-width.darker-20 {
    background: var(--surface-card) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 32px 28px !important;
}

.adm-founders-facts .full-width.darker-20:hover {
    background: var(--navy-lift) !important;
}

.adm-founders-facts .full-width.darker-20 strong {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--ink) !important;
    font-size: 16px !important;
    letter-spacing: 0 !important;
}

.adm-founders-facts .full-width.darker-20 p.has-sm-font-size {
    color: var(--ink-muted) !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    margin-top: 6px;
}

.adm-founders-facts .wp-block-outermost-icon-block .icon-container {
    color: var(--teal) !important;
    width: 22px !important;
}

/* ── Pricing signal — matte cards, bento grid ──────────────── */
.adm-pricing-signal {
    background: var(--navy) !important;
    padding: clamp(80px, 10vw, 140px) 80px;
}

.adm-pricing-signal .adm-s-h2 {
    color: var(--ink) !important;
}

.adm-pricing-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 1px !important;
    background: var(--hairline) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    margin: 48px 0;
}

.adm-pricing-card {
    background: var(--surface-card) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 40px 32px !important;
    transition: background var(--transition-fast) !important;
}

.adm-pricing-card:hover {
    background: var(--navy-lift) !important;
}

.adm-pricing-card.highlighted {
    background: var(--navy-lift) !important;
    outline: 1px solid var(--teal);
    outline-offset: -1px;
    position: relative;
}

.adm-pricing-card.highlighted::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 1px;
    background: var(--teal);
}

.adm-pricing-card h3 {
    font-weight: 500 !important;
    letter-spacing: -0.015em !important;
    color: var(--ink) !important;
    margin: 6px 0 16px !important;
}

.adm-pricing-card p {
    color: var(--ink-body) !important;
}

.adm-pricing-arrow {
    margin-top: 28px !important;
}

.adm-pricing-arrow a,
.adm-product-cta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--teal) !important;
    text-decoration: none;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 4px;
    transition: border-color var(--transition-fast);
}

.adm-pricing-arrow a:hover,
.adm-product-cta:hover {
    border-bottom-color: var(--teal);
}

/* ── Final CTA — matte instead of teal-dark band ──────────── */
.adm-final-cta {
    background: var(--navy-deep) !important;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    padding: clamp(80px, 10vw, 140px) 80px !important;
    text-align: center;
}

.adm-final-cta h2 {
    color: var(--ink) !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em !important;
    max-width: 780px;
    margin: 0 auto 16px;
}

.adm-final-cta p {
    color: var(--ink-body) !important;
    font-size: clamp(16px, 1.4vw, 19px);
    max-width: 620px;
    margin: 0 auto 40px;
}

.adm-final-cta-buttons {
    justify-content: center;
    gap: 16px;
}

/* ── Approach section — Swiss steps ────────────────────────── */
.adm-approach {
    background: var(--navy);
    padding: clamp(80px, 10vw, 140px) 80px;
}

.adm-approach-steps {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 1px !important;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.adm-approach-step {
    background: var(--surface-card) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 32px 28px !important;
    transition: background var(--transition-fast) !important;
}

.adm-approach-step:hover {
    background: var(--navy-lift) !important;
    transform: none !important;
}

.adm-step-product {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 18px;
}

.adm-step-name {
    font-weight: 500 !important;
    color: var(--ink) !important;
    font-size: 18px !important;
}

.adm-step-type,
.adm-step-verb,
.adm-step-desc {
    color: var(--ink-body) !important;
    font-weight: 400 !important;
}

.adm-step-type {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted) !important;
    margin-top: 14px;
}

/* ── System flow blocks — matte, hairline ─────────────────── */
.adm-flow-block {
    background: var(--surface-card) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    padding: 28px 24px !important;
}

.adm-flow-block.accent {
    background: var(--navy-lift) !important;
    border-color: var(--teal-deep) !important;
}

.adm-flow-block h4 {
    font-weight: 500 !important;
    color: var(--ink) !important;
}

.adm-flow-block.accent h4 {
    color: var(--teal) !important;
}

.adm-flow-arrow {
    color: var(--ink-muted) !important;
    font-family: var(--font-mono);
}

/* ── Insight visual wrapper ─────────────────────────────────── */
.adm-insight-visual {
    background: transparent !important;
}

.adm-insight-visual .wp-block-group {
    background: transparent !important;
}

/* ── Contact hero (adm-con-hero) ────────────────────────────
   Hardcoded section chrome removed — see the mood-hero legacy
   alias block at the bottom of the mood palette. */

/* ── Reality footer CTA band ──────────────────────────────── */
.adm-reality-footer {
    text-align: center;
    padding: 48px 0 0;
    border-top: 1px solid var(--hairline);
    margin-top: 48px;
}

.adm-reality-footer p {
    color: var(--ink-body) !important;
    font-size: clamp(17px, 1.5vw, 20px);
}

.adm-reality-footer strong {
    color: var(--teal) !important;
    font-weight: 500 !important;
}

/* ── Tier modules / feature lists ─────────────────────────── */
.adm-tier-modules.wp-block-list,
.adm-the-tank-list.wp-block-list,
.adm-prod-features.wp-block-list {
    color: var(--ink-body) !important;
}

/* ── Pricing page hero sections ───────────────────────────── */
/* .adamiro-pricing-page-hero — chrome delegated to mood-hero alias. */

/* ── Kill the old "petrol" background on who-section ──────── */
.adm-who.has-petrol-background-color,
.has-petrol-background-color.adm-who {
    background: var(--navy) !important;
}

/* ── Pricing footer ────────────────────────────────────────── */
.adm-pricing-footer {
    border-top: 1px solid var(--hairline);
    padding-top: 48px;
    margin-top: 40px;
    text-align: center;
}

.adm-pricing-footer p {
    color: var(--ink-muted) !important;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

/* ── Override the inline hex colors on roles (#59a3bc, #2489c8) ── */
.adm-who-role[style*="59a3bc"],
.adm-who-role[style*="#59A3BC"] {
    color: var(--ink) !important;
}

.adm-who-challenge p[style*="2489c8"],
.adm-who-challenge p[style*="#2489C8"],
.adm-who-challenge p[style*="2489c8"] strong {
    color: var(--teal) !important;
}

/* ── Responsive Swiss tightening ───────────────────────────── */
@media (max-width: 900px) {
    .adm-hero {
        padding: 120px 24px 80px;
    }

    .adm-reality,
    .adm-insight,
    .adm-who,
    .adm-founders,
    .adm-pricing-signal,
    .adm-final-cta,
    .adm-approach {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .adm-pricing-grid,
    .adm-founders-facts>div,
    .adm-approach-steps,
    .adm-reality-cards {
        grid-template-columns: 1fr !important;
    }

    .adm-who-roles {
        flex-direction: column;
    }
}

/* V4 SWISS OVERRIDES — end */

/* =============================================================
   V4 SWISS OVERRIDES — product pages (adm-pp-*) + legacy hub
   -------------------------------------------------------------
   Applies to individual /products/{slug}/ pages and the /products
   hub page (raw HTML blocks with .page-hero / .product-section).
   ============================================================= */

/* ── adm-pp-* hero ──────────────────────────────────────────
   Hardcoded background / padding / heading-size overrides have
   been removed — section chrome is delegated to the mood-hero
   legacy alias block at the bottom of the mood palette. Only
   the overline helper remains here for legacy DB content. */
.adm-pp-overline {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 24px;
}

/* Stat row — mono, tabular numerics, matte cells */
.adm-pp-stat-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 1px !important;
    background: var(--hairline) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    margin-top: 48px;
}

.adm-pp-stat-row>div,
.adm-pp-stat-row>* {
    background: var(--surface-card) !important;
    padding: 28px 24px !important;
    margin: 0 !important;
}

.adm-pp-stat-num {
    font-family: var(--font-mono) !important;
    font-weight: 500 !important;
    color: var(--teal) !important;
    font-size: clamp(32px, 4vw, 48px) !important;
    letter-spacing: -0.03em !important;
    font-feature-settings: "tnum" 1 !important;
    line-height: 1.05 !important;
}

.adm-pp-stat-label {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase;
    color: var(--ink-muted) !important;
    margin-top: 10px !important;
}

/* CTA groups — Swiss buttons */
.adm-pp-hero-ctas .wp-block-button__link,
.adm-pp-cta-group .wp-block-button__link {
    background: var(--teal) !important;
    color: var(--navy-deep) !important;
    border: 1px solid var(--teal) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 22px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition: background var(--transition-fast), color var(--transition-fast) !important;
}

.adm-pp-hero-ctas .wp-block-button__link:hover,
.adm-pp-cta-group .wp-block-button__link:hover {
    background: transparent !important;
    color: var(--teal) !important;
}

.adm-pp-hero-ctas .is-style-outline .wp-block-button__link,
.adm-pp-cta-group .is-style-outline .wp-block-button__link {
    background: transparent !important;
    border: 1px solid var(--hairline) !important;
    color: var(--ink) !important;
}

.adm-pp-hero-ctas .is-style-outline .wp-block-button__link:hover,
.adm-pp-cta-group .is-style-outline .wp-block-button__link:hover {
    border-color: var(--teal) !important;
    color: var(--teal) !important;
}

/* Loss grid — bento, matte */
.adm-pp-loss-grid {
    gap: 1px !important;
    background: var(--hairline) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
}

.adm-pp-loss-card {
    background: var(--surface-card) !important;
    padding: 32px 28px !important;
    border: none !important;
    border-radius: 0 !important;
    transition: background var(--transition-fast);
}

.adm-pp-loss-card:hover {
    background: var(--navy-lift) !important;
}

.adm-pp-loss-stat {
    font-family: var(--font-mono) !important;
    color: var(--teal) !important;
    font-weight: 500 !important;
    font-size: clamp(32px, 4vw, 48px) !important;
    letter-spacing: -0.03em !important;
}

.adm-pp-loss-source {
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase;
    color: var(--ink-faint) !important;
    opacity: 1 !important;
}

/* Grid cards (adm-pp-grid-2, adm-pp-grid-3) — bento */
.adm-pp-grid-2,
.adm-pp-grid-3 {
    gap: 1px !important;
    background: var(--hairline) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
}

.adm-pp-grid-2>*,
.adm-pp-grid-3>* {
    background: var(--surface-card) !important;
    padding: 32px 28px !important;
    border: none !important;
    border-radius: 0 !important;
    transition: background var(--transition-fast);
}

.adm-pp-grid-2>*:hover,
.adm-pp-grid-3>*:hover {
    background: var(--navy-lift) !important;
}

/* Any generic large H2 on product pages — restraint */
.adm-pp-hero~section h2,
.adm-pp-hero~div h2,
.wp-block-post-content .wp-block-group h2 {
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
}

/* =============================================================
   V4 SWISS OVERRIDES — products hub (legacy raw HTML classes)
   ============================================================= */

/* .page-hero — legacy class from raw-HTML products hub. Section
   chrome delegated to the mood-hero alias block at the bottom
   of the mood palette. Only the inner layout helper remains. */
.page-hero .container {
    max-width: 900px;
    margin: 0 auto;
}

.page-hero .section-label,
.page-hero span.section-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--teal);
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 24px;
}

.product-section {
    background: var(--navy);
    padding: clamp(80px, 10vw, 120px) 24px;
    border-top: 1px solid var(--hairline);
}

.product-section:first-of-type {
    border-top: none;
}

.product-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

.product-section .grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

@media (max-width: 900px) {
    .product-section .grid-2 {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.product-section .section-label,
.product-section span.section-label {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2em !important;
    color: var(--teal) !important;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 18px;
}

.product-section h2 {
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
    color: var(--ink) !important;
    font-size: clamp(32px, 4vw, 52px) !important;
    margin-bottom: 16px;
}

.product-section .product-tagline {
    font-family: var(--font-body);
    font-size: clamp(16px, 1.5vw, 20px);
    color: var(--teal) !important;
    font-weight: 500;
    margin-bottom: 20px;
}

.product-section p:not(.product-tagline) {
    color: var(--ink-body) !important;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 24px;
}

.product-section .product-features {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.product-section .product-features li {
    padding: 16px 20px;
    border-bottom: 1px solid var(--hairline);
    color: var(--ink-body);
    font-size: 14px;
    position: relative;
    padding-left: 48px;
}

.product-section .product-features li:last-child {
    border-bottom: none;
}

.product-section .product-features li::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 24px;
    width: 12px;
    height: 1px;
    background: var(--teal);
}

.product-section .btn,
.product-section .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--teal) !important;
    color: var(--navy-deep) !important;
    border: 1px solid var(--teal) !important;
    border-radius: var(--radius-md);
    padding: 12px 22px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.product-section .btn:hover,
.product-section .btn-primary:hover {
    background: transparent !important;
    color: var(--teal) !important;
}

.product-section .btn-arrow::after {
    content: '→';
    font-family: var(--font-mono);
}

.product-section .product-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-section .product-visual-image {
    padding: 40px;
    background: var(--surface-card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    max-width: 420px;
    width: 100%;
}

.product-section .product-visual-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: none;
}

/* =============================================================
   V4 SWISS OVERRIDES — adm-product-* (home products showcase)
   ============================================================= */

.adm-product-num {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    color: var(--teal) !important;
    text-transform: uppercase;
    font-weight: 500 !important;
    margin-bottom: 14px !important;
}

.adm-product-name {
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    letter-spacing: -0.015em !important;
    color: var(--ink) !important;
    font-size: clamp(22px, 2.5vw, 30px) !important;
    margin-bottom: 6px !important;
}

.adm-product-tagline {
    color: var(--ink-body) !important;
    font-weight: 400 !important;
    font-size: 15px !important;
    margin-bottom: 24px !important;
}

.adm-product-body {
    color: var(--ink-body) !important;
    font-weight: 400 !important;
}

.adm-product-body.highlighted {
    color: var(--teal) !important;
    font-weight: 500 !important;
}

.adm-approach-footer {
    color: var(--ink-body) !important;
    border-top: 1px solid var(--hairline);
    padding-top: 32px;
    margin-top: 48px;
    font-size: 14px;
    letter-spacing: 0.02em;
}

.adm-approach-footer strong {
    color: var(--teal) !important;
    font-weight: 500 !important;
}

/* =============================================================
   V4 SWISS OVERRIDES — aggressive heading calm-down
   -------------------------------------------------------------
   Legacy pages (signals, voice, mentor legacy ids 25/27/33) have
   inline font-weight:700 on headings. Override with attribute
   selector where we can; otherwise the V3 headline feel persists.
   ============================================================= */

.wp-block-post-content h2[style*="font-weight:700"],
.wp-block-post-content h1[style*="font-weight:700"] {
    font-weight: 500 !important;
}

/* Legacy .section-label on raw HTML page sections */
span.section-label,
.section-label {
    color: var(--teal) !important;
}

/* V4 SWISS OVERRIDES (product pages + legacy) — end */

/* =============================================================
   V4 SWISS OVERRIDES — /products page extras
   ============================================================= */

.page-hero-ctas {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 40px;
    flex-wrap: wrap;
}

.page-hero .btn,
.page-hero-ctas .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.page-hero .btn-primary,
.page-hero-ctas .btn-primary {
    background: var(--teal) !important;
    color: var(--navy-deep) !important;
    border: 1px solid var(--teal) !important;
}

.page-hero .btn-primary:hover,
.page-hero-ctas .btn-primary:hover {
    background: transparent !important;
    color: var(--teal) !important;
}

.page-hero .btn-ghost,
.page-hero-ctas .btn-ghost,
.btn-ghost {
    background: transparent !important;
    color: var(--ink) !important;
    border: 1px solid var(--hairline) !important;
}

.page-hero .btn-ghost:hover,
.page-hero-ctas .btn-ghost:hover,
.btn-ghost:hover {
    border-color: var(--hairline-strong) !important;
    color: var(--teal) !important;
}

.btn-arrow::after {
    content: "→";
    font-family: var(--font-mono);
    font-size: 14px;
}

/* Product number — Swiss mono display in visual column */
.product-visual .product-num {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: clamp(96px, 14vw, 200px);
    line-height: 0.85;
    letter-spacing: -0.05em;
    color: var(--teal);
    font-feature-settings: "tnum" 1;
    padding: 48px;
    background: var(--surface-card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 380px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.product-visual .product-num:hover {
    background: var(--navy-lift);
    border-color: var(--hairline-strong);
}

/* Closing section — centered, restrained */
.product-section--closing {
    border-top: 1px solid var(--hairline);
    background: var(--navy-deep) !important;
    padding-top: clamp(80px, 10vw, 140px) !important;
    padding-bottom: clamp(80px, 10vw, 140px) !important;
}

.product-section--closing .closing-band {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.product-section--closing .section-label {
    margin-bottom: 20px;
}

.product-section--closing h2 {
    margin-bottom: 20px !important;
}

.product-section--closing p {
    color: var(--ink-body) !important;
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.7;
    margin-bottom: 40px !important;
}

.product-section--closing .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Hero container: tighten for Swiss look */
.page-hero .container {
    text-align: center;
}

.page-hero .container>*+* {
    margin-top: 0;
}

.page-hero p {
    margin-top: 24px;
}

/* V4 /products extras — end */

/* =============================================================
   V4 MOOD PALETTE — section-signature accents
   -------------------------------------------------------------
   Section-level mood classes. Each rule ships the signature
   background, eyebrow colour, accent hue, and CTA treatment.
   Works with two class conventions:
     - .is-mood-*          (applied directly via className)
     - .is-style-mood-*    (generated by register_block_style)
   ============================================================= */

/* ── HERO MOOD · orange ────────────────────────────────────── */
.is-mood-hero,
.is-style-mood-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--navy);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.is-mood-hero::before,
.is-style-mood-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 60% at top right, var(--orange-18), transparent 55%),
        radial-gradient(ellipse 40% 40% at bottom left, rgba(11, 20, 38, 0.85), transparent 70%);
}

.is-mood-hero>*,
.is-style-mood-hero>* {
    position: relative;
    z-index: 1;
}

.is-mood-hero .adm-hero-eyebrow,
.is-mood-hero .adm-s-label,
.is-mood-hero .eyebrow,
.is-mood-hero .is-style-eyebrow,
.is-style-mood-hero .adm-hero-eyebrow,
.is-style-mood-hero .adm-s-label,
.is-style-mood-hero .eyebrow,
.is-style-mood-hero .is-style-eyebrow {
    color: var(--orange) !important;
}

.is-mood-hero .adm-hero-eyebrow::before,
.is-mood-hero .adm-s-label::before,
.is-style-mood-hero .adm-hero-eyebrow::before,
.is-style-mood-hero .adm-s-label::before {
    color: var(--orange) !important;
}

.is-mood-hero .wp-block-heading .line2,
.is-mood-hero .wp-block-heading mark,
.is-mood-hero .wp-block-heading em,
.is-mood-hero h1 .line2,
.is-mood-hero h1 mark,
.is-mood-hero h1 em,
.is-style-mood-hero .wp-block-heading .line2,
.is-style-mood-hero .wp-block-heading mark,
.is-style-mood-hero .wp-block-heading em,
.is-style-mood-hero h1 .line2,
.is-style-mood-hero h1 mark,
.is-style-mood-hero h1 em {
    color: var(--orange) !important;
    background: transparent !important;
    font-style: normal !important;
    font-weight: 500 !important;
}

.is-mood-hero .adm-btn-primary>.wp-block-button__link,
.is-mood-hero .wp-block-button.is-mood-cta .wp-block-button__link,
.is-mood-hero .wp-block-button.is-style-mood-cta .wp-block-button__link,
.is-style-mood-hero .adm-btn-primary>.wp-block-button__link,
.is-style-mood-hero .wp-block-button.is-mood-cta .wp-block-button__link,
.is-style-mood-hero .wp-block-button.is-style-mood-cta .wp-block-button__link {
    background: var(--orange) !important;
    color: var(--navy-deep) !important;
    border: 1px solid var(--orange) !important;
}

.is-mood-hero .adm-btn-primary>.wp-block-button__link:hover,
.is-mood-hero .wp-block-button.is-mood-cta .wp-block-button__link:hover,
.is-style-mood-hero .adm-btn-primary>.wp-block-button__link:hover,
.is-style-mood-hero .wp-block-button.is-mood-cta .wp-block-button__link:hover {
    background: transparent !important;
    color: var(--orange) !important;
    border-color: var(--orange) !important;
}

/* ── STATEMENT MOOD · midnight-deep + teal + orange ──────── */
.is-mood-statement,
.is-style-mood-statement {
    background-color: var(--navy-deep) !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.is-mood-statement::before,
.is-style-mood-statement::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse 60% 50% at center center, rgba(47, 184, 160, 0.14), transparent 65%);
}

.is-mood-statement>*,
.is-style-mood-statement>* {
    position: relative;
    z-index: 1;
}

.is-mood-statement .adm-s-label,
.is-mood-statement .eyebrow,
.is-mood-statement .is-style-eyebrow,
.is-style-mood-statement .adm-s-label,
.is-style-mood-statement .eyebrow,
.is-style-mood-statement .is-style-eyebrow {
    color: var(--teal) !important;
}

.is-mood-statement .adm-s-label::before,
.is-style-mood-statement .adm-s-label::before {
    color: var(--teal) !important;
}

.is-mood-statement .adm-bar-pct,
.is-mood-statement .is-style-stat-display,
.is-mood-statement .mood-stat,
.is-mood-statement h2.mood-stat,
.is-style-mood-statement .adm-bar-pct,
.is-style-mood-statement .is-style-stat-display,
.is-style-mood-statement .mood-stat,
.is-style-mood-statement h2.mood-stat {
    color: var(--orange) !important;
    font-family: var(--font-mono) !important;
    font-feature-settings: "tnum" 1 !important;
}

/* ── APPROACH MOOD · cream ground + sage accents ─────────── */
.is-mood-approach,
.is-style-mood-approach {
    background-color: var(--cream) !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: var(--navy-deep) !important;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.is-mood-approach::before,
.is-style-mood-approach::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(135deg, transparent 0%, var(--sage-12) 100%);
}

.is-mood-approach>*,
.is-style-mood-approach>* {
    position: relative;
    z-index: 1;
}

.is-mood-approach h1,
.is-mood-approach h2,
.is-mood-approach h3,
.is-mood-approach .wp-block-heading,
.is-style-mood-approach h1,
.is-style-mood-approach h2,
.is-style-mood-approach h3,
.is-style-mood-approach .wp-block-heading {
    color: var(--navy-deep) !important;
}

.is-mood-approach p,
.is-style-mood-approach p {
    color: #3A4A6A !important;
}

.is-mood-approach .adm-s-label,
.is-mood-approach .eyebrow,
.is-mood-approach .is-style-eyebrow,
.is-style-mood-approach .adm-s-label,
.is-style-mood-approach .eyebrow,
.is-style-mood-approach .is-style-eyebrow {
    color: var(--sage-deep) !important;
}

.is-mood-approach .adm-s-label::before,
.is-style-mood-approach .adm-s-label::before {
    color: var(--sage-deep) !important;
}

.is-mood-approach .wp-block-heading em,
.is-mood-approach h1 em,
.is-mood-approach h2 em,
.is-style-mood-approach .wp-block-heading em,
.is-style-mood-approach h1 em,
.is-style-mood-approach h2 em {
    color: var(--coral-deep) !important;
    background: transparent !important;
    font-style: normal !important;
    font-weight: 500 !important;
}

.is-mood-approach .adm-btn-primary>.wp-block-button__link,
.is-mood-approach .wp-block-button.is-mood-cta .wp-block-button__link,
.is-mood-approach .wp-block-button.is-style-mood-cta .wp-block-button__link,
.is-style-mood-approach .adm-btn-primary>.wp-block-button__link,
.is-style-mood-approach .wp-block-button.is-mood-cta .wp-block-button__link,
.is-style-mood-approach .wp-block-button.is-style-mood-cta .wp-block-button__link {
    background: var(--navy-deep) !important;
    color: var(--cream) !important;
    border: 1px solid var(--navy-deep) !important;
}

.is-mood-approach .adm-btn-primary>.wp-block-button__link:hover,
.is-style-mood-approach .adm-btn-primary>.wp-block-button__link:hover {
    background: transparent !important;
    color: var(--navy-deep) !important;
}

.is-mood-approach .is-style-matte-card,
.is-mood-approach .wp-block-group.is-style-matte-card,
.is-style-mood-approach .is-style-matte-card,
.is-style-mood-approach .wp-block-group.is-style-matte-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(11, 20, 38, 0.12) !important;
    color: var(--navy-deep) !important;
}

/* ── PROBLEM MOOD · midnight-deep + blue-deep + coral ───── */
.is-mood-problem,
.is-style-mood-problem {
    background-color: var(--navy-deep) !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.is-mood-problem::before,
.is-style-mood-problem::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 50% 50% at top left, var(--blue-deep-18), transparent 60%),
        radial-gradient(ellipse 40% 40% at bottom right, var(--coral-18), transparent 70%);
}

.is-mood-problem>*,
.is-style-mood-problem>* {
    position: relative;
    z-index: 1;
}

.is-mood-problem .adm-s-label,
.is-mood-problem .eyebrow,
.is-mood-problem .is-style-eyebrow,
.is-style-mood-problem .adm-s-label,
.is-style-mood-problem .eyebrow,
.is-style-mood-problem .is-style-eyebrow {
    color: var(--coral-deep) !important;
}

.is-mood-problem .adm-s-label::before,
.is-style-mood-problem .adm-s-label::before {
    color: var(--coral-deep) !important;
}

.is-mood-problem .wp-block-heading em,
.is-mood-problem h2 em,
.is-mood-problem h3 em,
.is-style-mood-problem .wp-block-heading em,
.is-style-mood-problem h2 em,
.is-style-mood-problem h3 em {
    color: var(--coral-deep) !important;
    background: transparent !important;
    font-style: normal !important;
    font-weight: 500 !important;
}

/* ── CAPABILITIES MOOD · midnight-lift + per-cell accents ── */
.is-mood-capabilities,
.is-style-mood-capabilities {
    background-color: var(--navy-lift) !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    isolation: isolate;
    padding: clamp(40px, 6vw, 64px) clamp(16px, 3vw, 32px);
}

.is-mood-capabilities .caps-grid,
.is-style-mood-capabilities .caps-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 1px !important;
    background: var(--hairline) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
}

.is-mood-capabilities .caps-grid>*,
.is-style-mood-capabilities .caps-grid>* {
    background: var(--navy-lift) !important;
    padding: 28px 24px !important;
    border: none !important;
    border-radius: 0 !important;
    transition: background var(--transition-fast);
    margin: 0 !important;
}

.is-mood-capabilities .caps-grid>*:hover,
.is-style-mood-capabilities .caps-grid>*:hover {
    background: var(--navy-deep) !important;
}

/* Per-cell accent cycling — orange, teal, orange-warm, sage, blue-steel, coral, blue-deep */
.is-mood-capabilities .caps-grid>*:nth-child(7n+1) .is-style-eyebrow,
.is-mood-capabilities .caps-grid>*:nth-child(7n+1) .eyebrow,
.is-style-mood-capabilities .caps-grid>*:nth-child(7n+1) .is-style-eyebrow,
.is-style-mood-capabilities .caps-grid>*:nth-child(7n+1) .eyebrow {
    color: var(--orange) !important;
}

.is-mood-capabilities .caps-grid>*:nth-child(7n+2) .is-style-eyebrow,
.is-mood-capabilities .caps-grid>*:nth-child(7n+2) .eyebrow,
.is-style-mood-capabilities .caps-grid>*:nth-child(7n+2) .is-style-eyebrow,
.is-style-mood-capabilities .caps-grid>*:nth-child(7n+2) .eyebrow {
    color: var(--teal) !important;
}

.is-mood-capabilities .caps-grid>*:nth-child(7n+3) .is-style-eyebrow,
.is-mood-capabilities .caps-grid>*:nth-child(7n+3) .eyebrow,
.is-style-mood-capabilities .caps-grid>*:nth-child(7n+3) .is-style-eyebrow,
.is-style-mood-capabilities .caps-grid>*:nth-child(7n+3) .eyebrow {
    color: var(--orange-warm) !important;
}

.is-mood-capabilities .caps-grid>*:nth-child(7n+4) .is-style-eyebrow,
.is-mood-capabilities .caps-grid>*:nth-child(7n+4) .eyebrow,
.is-style-mood-capabilities .caps-grid>*:nth-child(7n+4) .is-style-eyebrow,
.is-style-mood-capabilities .caps-grid>*:nth-child(7n+4) .eyebrow {
    color: var(--sage) !important;
}

.is-mood-capabilities .caps-grid>*:nth-child(7n+5) .is-style-eyebrow,
.is-mood-capabilities .caps-grid>*:nth-child(7n+5) .eyebrow,
.is-style-mood-capabilities .caps-grid>*:nth-child(7n+5) .is-style-eyebrow,
.is-style-mood-capabilities .caps-grid>*:nth-child(7n+5) .eyebrow {
    color: var(--blue-steel) !important;
}

.is-mood-capabilities .caps-grid>*:nth-child(7n+6) .is-style-eyebrow,
.is-mood-capabilities .caps-grid>*:nth-child(7n+6) .eyebrow,
.is-style-mood-capabilities .caps-grid>*:nth-child(7n+6) .is-style-eyebrow,
.is-style-mood-capabilities .caps-grid>*:nth-child(7n+6) .eyebrow {
    color: var(--coral-deep) !important;
}

.is-mood-capabilities .caps-grid>*:nth-child(7n) .is-style-eyebrow,
.is-mood-capabilities .caps-grid>*:nth-child(7n) .eyebrow,
.is-style-mood-capabilities .caps-grid>*:nth-child(7n) .is-style-eyebrow,
.is-style-mood-capabilities .caps-grid>*:nth-child(7n) .eyebrow {
    color: var(--blue-deep) !important;
}

.is-mood-capabilities .cap-name,
.is-style-mood-capabilities .cap-name {
    font-weight: 500 !important;
    color: var(--ink) !important;
    font-size: 16px !important;
    margin: 18px 0 4px !important;
}

.is-mood-capabilities .cap-tag,
.is-style-mood-capabilities .cap-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint) !important;
}

/* ── IMAGE TINTING · mood overlays on <figure>/<img> ─────── */
.wp-block-image.is-style-tint-orange,
.wp-block-image.is-style-tint-teal,
.wp-block-image.is-style-tint-blue,
.wp-block-image.is-style-tint-sage,
.wp-block-image.is-style-tint-coral {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.wp-block-image.is-style-tint-orange::after,
.wp-block-image.is-style-tint-teal::after,
.wp-block-image.is-style-tint-blue::after,
.wp-block-image.is-style-tint-sage::after,
.wp-block-image.is-style-tint-coral::after {
    content: "";
    position: absolute;
    inset: 0;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.wp-block-image.is-style-tint-orange::after {
    background: linear-gradient(135deg, rgba(236, 139, 76, 0.60), rgba(11, 20, 38, 0.30));
}

.wp-block-image.is-style-tint-teal::after {
    background: linear-gradient(135deg, rgba(47, 184, 160, 0.55), rgba(11, 20, 38, 0.40));
}

.wp-block-image.is-style-tint-blue::after {
    background: linear-gradient(135deg, rgba(43, 74, 122, 0.70), rgba(11, 20, 38, 0.30));
}

.wp-block-image.is-style-tint-sage::after {
    background: linear-gradient(135deg, rgba(138, 166, 134, 0.50), rgba(11, 20, 38, 0.50));
}

.wp-block-image.is-style-tint-coral::after {
    background: linear-gradient(135deg, rgba(184, 90, 53, 0.55), rgba(11, 20, 38, 0.40));
}

/* =============================================================
   V4 MOOD PALETTE — extended section designs
   -------------------------------------------------------------
   Four additional moods layered on the same v3 token system.
   Each ships a distinct background + eyebrow accent + layout
   helper, so /page-composition has room beyond the original
   hero/statement/approach/problem/capabilities set.
     · spotlight    — navy + teal asymmetric split w/ image tile
     · testimonial  — cream-warm + blue-steel oversized quote
     · metrics      — navy-deep multi-accent 4-stat strip
     · ladder       — navy-lift vertical numbered flow
   ============================================================= */

/* ── SPOTLIGHT MOOD · navy + teal split with image tile ───── */
.is-mood-spotlight,
.is-style-mood-spotlight {
    background-color: var(--navy) !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.is-mood-spotlight::before,
.is-style-mood-spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 60% 55% at top left, rgba(47, 184, 160, 0.14), transparent 60%),
        radial-gradient(ellipse 40% 40% at bottom right, rgba(5, 11, 23, 0.85), transparent 70%);
}

.is-mood-spotlight>*,
.is-style-mood-spotlight>* {
    position: relative;
    z-index: 1;
}

.is-mood-spotlight .adm-s-label,
.is-mood-spotlight .eyebrow,
.is-mood-spotlight .is-style-eyebrow,
.is-style-mood-spotlight .adm-s-label,
.is-style-mood-spotlight .eyebrow,
.is-style-mood-spotlight .is-style-eyebrow {
    color: var(--teal) !important;
}

.is-mood-spotlight .adm-s-label::before,
.is-mood-spotlight .is-style-eyebrow::before,
.is-style-mood-spotlight .adm-s-label::before,
.is-style-mood-spotlight .is-style-eyebrow::before {
    color: var(--teal) !important;
}

.is-mood-spotlight .wp-block-heading em,
.is-mood-spotlight h2 em,
.is-mood-spotlight h3 em,
.is-style-mood-spotlight .wp-block-heading em,
.is-style-mood-spotlight h2 em,
.is-style-mood-spotlight h3 em {
    color: var(--teal) !important;
    background: transparent !important;
    font-style: normal !important;
    font-weight: 500 !important;
}

.is-mood-spotlight .spot-grid,
.is-style-mood-spotlight .spot-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.is-mood-spotlight .spot-tile,
.is-style-mood-spotlight .spot-tile {
    position: relative;
    aspect-ratio: 5 / 4;
    background:
        linear-gradient(135deg, rgba(47, 184, 160, 0.45), rgba(11, 20, 38, 0.40)),
        linear-gradient(135deg, #2A3A52 0%, #1A2540 100%);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: clamp(20px, 3vw, 32px);
}

.is-mood-spotlight .spot-tile-caption,
.is-style-mood-spotlight .spot-tile-caption {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0;
    position: relative;
    z-index: 1;
}

.is-mood-spotlight .wp-block-button.is-mood-cta .wp-block-button__link,
.is-mood-spotlight .wp-block-button.is-style-mood-cta .wp-block-button__link,
.is-style-mood-spotlight .wp-block-button.is-mood-cta .wp-block-button__link,
.is-style-mood-spotlight .wp-block-button.is-style-mood-cta .wp-block-button__link {
    background: var(--teal) !important;
    color: var(--navy-deep) !important;
    border: 1px solid var(--teal) !important;
}

.is-mood-spotlight .wp-block-button.is-mood-cta .wp-block-button__link:hover,
.is-style-mood-spotlight .wp-block-button.is-mood-cta .wp-block-button__link:hover {
    background: transparent !important;
    color: var(--teal) !important;
    border-color: var(--teal) !important;
}

/* ── TESTIMONIAL MOOD · cream-warm + blue-steel quote ─────── */
.is-mood-testimonial,
.is-style-mood-testimonial {
    background-color: var(--cream-warm) !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: var(--navy-deep) !important;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.is-mood-testimonial::before,
.is-style-mood-testimonial::before {
    content: "\201C";
    position: absolute;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1;
    color: rgba(43, 74, 122, 0.10);
    pointer-events: none;
    z-index: 0;
    user-select: none;
}

.is-mood-testimonial>*,
.is-style-mood-testimonial>* {
    position: relative;
    z-index: 1;
}

.is-mood-testimonial h1,
.is-mood-testimonial h2,
.is-mood-testimonial h3,
.is-mood-testimonial .wp-block-heading,
.is-style-mood-testimonial h1,
.is-style-mood-testimonial h2,
.is-style-mood-testimonial h3,
.is-style-mood-testimonial .wp-block-heading {
    color: var(--navy-deep) !important;
}

.is-mood-testimonial p,
.is-style-mood-testimonial p {
    color: #3A4A6A !important;
}

.is-mood-testimonial .adm-s-label,
.is-mood-testimonial .eyebrow,
.is-mood-testimonial .is-style-eyebrow,
.is-style-mood-testimonial .adm-s-label,
.is-style-mood-testimonial .eyebrow,
.is-style-mood-testimonial .is-style-eyebrow {
    color: var(--blue-deep) !important;
}

.is-mood-testimonial .adm-s-label::before,
.is-mood-testimonial .is-style-eyebrow::before,
.is-style-mood-testimonial .adm-s-label::before,
.is-style-mood-testimonial .is-style-eyebrow::before {
    color: var(--blue-deep) !important;
}

.is-mood-testimonial .wp-block-heading em,
.is-mood-testimonial h2 em,
.is-mood-testimonial h3 em,
.is-style-mood-testimonial .wp-block-heading em,
.is-style-mood-testimonial h2 em,
.is-style-mood-testimonial h3 em {
    color: var(--coral-deep) !important;
    background: transparent !important;
    font-style: normal !important;
    font-weight: 500 !important;
}

.is-mood-testimonial .testimonial-attr,
.is-style-mood-testimonial .testimonial-attr {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--blue-deep) !important;
    margin-top: 32px;
}

/* ── METRICS MOOD · navy-deep multi-stat strip ────────────── */
.is-mood-metrics,
.is-style-mood-metrics {
    background-color: var(--navy-deep) !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.is-mood-metrics::before,
.is-style-mood-metrics::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 50% 40% at top right, rgba(236, 139, 76, 0.10), transparent 65%),
        radial-gradient(ellipse 50% 40% at bottom left, rgba(47, 184, 160, 0.08), transparent 65%);
}

.is-mood-metrics>*,
.is-style-mood-metrics>* {
    position: relative;
    z-index: 1;
}

.is-mood-metrics .adm-s-label,
.is-mood-metrics .eyebrow,
.is-mood-metrics .is-style-eyebrow,
.is-style-mood-metrics .adm-s-label,
.is-style-mood-metrics .eyebrow,
.is-style-mood-metrics .is-style-eyebrow {
    color: var(--orange-warm) !important;
}

.is-mood-metrics .adm-s-label::before,
.is-mood-metrics .is-style-eyebrow::before,
.is-style-mood-metrics .adm-s-label::before,
.is-style-mood-metrics .is-style-eyebrow::before {
    color: var(--orange-warm) !important;
}

.is-mood-metrics .metrics-strip,
.is-style-mood-metrics .metrics-strip {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 1px !important;
    background: var(--hairline) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
}

.is-mood-metrics .metrics-strip>*,
.is-style-mood-metrics .metrics-strip>* {
    background: var(--navy-deep) !important;
    padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 32px) !important;
    margin: 0 !important;
    transition: background var(--transition-fast);
}

.is-mood-metrics .metrics-strip>*:hover,
.is-style-mood-metrics .metrics-strip>*:hover {
    background: var(--navy) !important;
}

.is-mood-metrics .metric-stat,
.is-style-mood-metrics .metric-stat {
    font-family: var(--font-mono) !important;
    font-size: clamp(44px, 6vw, 72px) !important;
    font-weight: 500 !important;
    letter-spacing: -0.03em !important;
    line-height: 1 !important;
    font-feature-settings: "tnum" 1;
    margin: 0 0 12px !important;
}

.is-mood-metrics .metric-label,
.is-style-mood-metrics .metric-label {
    font-size: 14px !important;
    color: var(--ink-body) !important;
    line-height: 1.45 !important;
    margin: 0 0 8px !important;
}

.is-mood-metrics .metric-tag,
.is-style-mood-metrics .metric-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint) !important;
    margin: 0 !important;
}

/* Per-cell stat accent cycling (4 cells) */
.is-mood-metrics .metrics-strip>*:nth-child(4n+1) .metric-stat,
.is-style-mood-metrics .metrics-strip>*:nth-child(4n+1) .metric-stat {
    color: var(--orange) !important;
}

.is-mood-metrics .metrics-strip>*:nth-child(4n+2) .metric-stat,
.is-style-mood-metrics .metrics-strip>*:nth-child(4n+2) .metric-stat {
    color: var(--teal) !important;
}

.is-mood-metrics .metrics-strip>*:nth-child(4n+3) .metric-stat,
.is-style-mood-metrics .metrics-strip>*:nth-child(4n+3) .metric-stat {
    color: var(--sage) !important;
}

.is-mood-metrics .metrics-strip>*:nth-child(4n) .metric-stat,
.is-style-mood-metrics .metrics-strip>*:nth-child(4n) .metric-stat {
    color: var(--blue-steel) !important;
}

/* ── LADDER MOOD · navy-lift vertical numbered flow ───────── */
.is-mood-ladder,
.is-style-mood-ladder {
    background-color: var(--navy-lift) !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.is-mood-ladder .adm-s-label,
.is-mood-ladder .eyebrow,
.is-mood-ladder .is-style-eyebrow,
.is-style-mood-ladder .adm-s-label,
.is-style-mood-ladder .eyebrow,
.is-style-mood-ladder .is-style-eyebrow {
    color: var(--sage) !important;
}

.is-mood-ladder .adm-s-label::before,
.is-mood-ladder .is-style-eyebrow::before,
.is-style-mood-ladder .adm-s-label::before,
.is-style-mood-ladder .is-style-eyebrow::before {
    color: var(--sage) !important;
}

.is-mood-ladder .ladder-steps,
.is-style-mood-ladder .ladder-steps {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--hairline);
}

.is-mood-ladder .ladder-step,
.is-style-mood-ladder .ladder-step {
    display: grid;
    grid-template-columns: clamp(100px, 14vw, 160px) 1fr;
    gap: clamp(20px, 4vw, 56px);
    padding: clamp(28px, 4vw, 44px) 0;
    border-bottom: 1px solid var(--hairline);
    align-items: baseline;
}

.is-mood-ladder .ladder-num,
.is-style-mood-ladder .ladder-num {
    font-family: var(--font-mono) !important;
    font-size: clamp(44px, 6vw, 72px) !important;
    font-weight: 400 !important;
    letter-spacing: -0.03em !important;
    line-height: 1 !important;
    font-feature-settings: "tnum" 1;
    margin: 0 !important;
}

.is-mood-ladder .ladder-title,
.is-style-mood-ladder .ladder-title {
    font-size: clamp(20px, 2.2vw, 28px) !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    color: var(--ink) !important;
    margin: 0 0 8px !important;
    line-height: 1.2 !important;
}

.is-mood-ladder .ladder-desc,
.is-style-mood-ladder .ladder-desc {
    font-size: 15px !important;
    color: var(--ink-body) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    max-width: 56ch;
}

/* Per-row number accent cycling */
.is-mood-ladder .ladder-steps>*:nth-child(5n+1) .ladder-num,
.is-style-mood-ladder .ladder-steps>*:nth-child(5n+1) .ladder-num {
    color: var(--orange) !important;
}

.is-mood-ladder .ladder-steps>*:nth-child(5n+2) .ladder-num,
.is-style-mood-ladder .ladder-steps>*:nth-child(5n+2) .ladder-num {
    color: var(--teal) !important;
}

.is-mood-ladder .ladder-steps>*:nth-child(5n+3) .ladder-num,
.is-style-mood-ladder .ladder-steps>*:nth-child(5n+3) .ladder-num {
    color: var(--sage) !important;
}

.is-mood-ladder .ladder-steps>*:nth-child(5n+4) .ladder-num,
.is-style-mood-ladder .ladder-steps>*:nth-child(5n+4) .ladder-num {
    color: var(--blue-steel) !important;
}

.is-mood-ladder .ladder-steps>*:nth-child(5n) .ladder-num,
.is-style-mood-ladder .ladder-steps>*:nth-child(5n) .ladder-num {
    color: var(--coral-deep) !important;
}

/* Responsive — stack on narrow viewports */
@media (max-width: 720px) {

    .is-mood-spotlight .spot-grid,
    .is-style-mood-spotlight .spot-grid {
        grid-template-columns: 1fr;
    }

    .is-mood-ladder .ladder-step,
    .is-style-mood-ladder .ladder-step {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ── IMAGE BACKGROUND SUPPORT · mood + image modifiers ─────
   Every mood section now accepts a background image via the
   Gutenberg editor (Group block → Styles → Background image).
   The image sits BELOW the ::before/::after tinted clouds, so
   you get "image + mood glow" automatically.

   Two opt-in modifier classes shape the overlay behaviour:

     .has-mood-tint  — multiply-blend the mood's colour base
                       with the image, producing the v3-style
                       fully-tinted photo (navy × photo, cream
                       × photo, etc.). Adds a darken scrim for
                       dark moods so text stays readable.

     .has-clean-bg   — drop the colour tint entirely. The image
                       shows at full fidelity; clouds stay on
                       top as subtle accents.

   The mood's own colour base stays as the fallback when no
   image is set.
   ──────────────────────────────────────────────────────────── */
.wp-block-group.has-mood-tint[class*="is-mood-"],
.wp-block-group.has-mood-tint[class*="is-style-mood-"] {
    background-blend-mode: multiply;
}

.wp-block-group.has-clean-bg[class*="is-mood-"],
.wp-block-group.has-clean-bg[class*="is-style-mood-"] {
    background-color: transparent !important;
    background-blend-mode: normal;
}

/* =============================================================
   TINT OVERLAY · arbitrary colour wash on any mood section
   -------------------------------------------------------------
   A full-coverage ::after overlay painted between the section's
   background-image and its ::before tinted clouds. Driven by
   three CSS custom properties:

     --mood-tint-color     any CSS colour (default: transparent)
     --mood-tint-opacity   0.00–1.00 (default: 0.5)
     --mood-tint-blend     multiply · overlay · soft-light · ...
                           (default: multiply — matches the v3
                           image-tint look in design_proposals/
                           adamiro-color-system-v3.html)

   USAGE — preset classes (stack any combination):
     Tint colour:  .has-tint-orange  .has-tint-teal
                   .has-tint-blue-deep  .has-tint-sage
                   .has-tint-coral  .has-tint-navy
                   .has-tint-cream  .has-tint-black ...
     Opacity:      .tint-10 .tint-20 ... .tint-90 .tint-100
     Blend mode:   .tint-multiply (default) .tint-overlay
                   .tint-soft-light .tint-screen .tint-normal
     Stacking:     .tint-above-clouds (paint tint on top of the
                   mood's ::before clouds — v3-style tinted photo)

   USAGE — arbitrary colour:
     Add custom CSS classes in the Advanced panel and an inline
     style on the group block:

       style="--mood-tint-color:#FF00AA;--mood-tint-opacity:0.4;"

   The overlay defaults to z-index: -1 so the mood's decorative
   ::before clouds stay on top at full colour — matching the
   v3 mood look. Add .tint-above-clouds to flip the stack.
   ============================================================= */
[class*="is-mood-"]::after,
[class*="is-style-mood-"]::after,
.adm-con-hero::after,
.adm-pr-hero::after,
.adm-pp-hero::after,
.adm-sp-hero::after,
.page-hero::after,
.std-page-hero::after,
.adamiro-pricing-page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--mood-tint-color, transparent);
    opacity: var(--mood-tint-opacity, 0.5);
    mix-blend-mode: var(--mood-tint-blend, multiply);
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

/* Paint the tint on TOP of the ::before clouds (v3-style tinted
   photo look — use when you want the image + tint to be the
   whole visual and the mood's corner glows muted). */
[class*="is-mood-"].tint-above-clouds::after,
[class*="is-style-mood-"].tint-above-clouds::after,
.adm-con-hero.tint-above-clouds::after,
.adm-pr-hero.tint-above-clouds::after,
.adm-pp-hero.tint-above-clouds::after,
.adm-sp-hero.tint-above-clouds::after,
.page-hero.tint-above-clouds::after,
.std-page-hero.tint-above-clouds::after,
.adamiro-pricing-page-hero.tint-above-clouds::after {
    z-index: 0;
}

/* NOTE on .adm-hero — the home hero already uses both ::before
   and ::after for its teal + petrol radial glows, so it is
   intentionally excluded from the tint overlay system. If you
   want tint on the home hero too, add the is-mood-hero class to
   it — tint will apply and the teal/petrol glows will be
   replaced by the mood-hero orange cloud. */

/* ── TINT COLOUR PRESETS ─────────────────────────────────── */
.has-tint-orange {
    --mood-tint-color: #EC8B4C;
}

.has-tint-orange-warm {
    --mood-tint-color: #F4A368;
}

.has-tint-coral {
    --mood-tint-color: #B85A35;
}

.has-tint-coral-deep {
    --mood-tint-color: #B85A35;
}

.has-tint-teal {
    --mood-tint-color: #2FB8A0;
}

.has-tint-teal-deep {
    --mood-tint-color: #1E7A6B;
}

.has-tint-blue-deep {
    --mood-tint-color: #2B4A7A;
}

.has-tint-blue-steel {
    --mood-tint-color: #4A6B9A;
}

.has-tint-sage {
    --mood-tint-color: #8AA686;
}

.has-tint-sage-deep {
    --mood-tint-color: #5E7A5B;
}

.has-tint-navy {
    --mood-tint-color: #0B1426;
}

.has-tint-navy-deep {
    --mood-tint-color: #050B17;
}

.has-tint-navy-lift {
    --mood-tint-color: #141F38;
}

.has-tint-cream {
    --mood-tint-color: #F5F1E8;
}

.has-tint-cream-warm {
    --mood-tint-color: #EDE6D3;
}

.has-tint-bone {
    --mood-tint-color: #E8E2D4;
}

.has-tint-ice {
    --mood-tint-color: #E8EEF7;
}

.has-tint-ink {
    --mood-tint-color: #F1F5F9;
}

.has-tint-black {
    --mood-tint-color: #000000;
}

.has-tint-white {
    --mood-tint-color: #FFFFFF;
}

/* ── TINT OPACITY PRESETS ────────────────────────────────── */
.tint-0 {
    --mood-tint-opacity: 0;
}

.tint-5 {
    --mood-tint-opacity: 0.05;
}

.tint-10 {
    --mood-tint-opacity: 0.10;
}

.tint-15 {
    --mood-tint-opacity: 0.15;
}

.tint-20 {
    --mood-tint-opacity: 0.20;
}

.tint-25 {
    --mood-tint-opacity: 0.25;
}

.tint-30 {
    --mood-tint-opacity: 0.30;
}

.tint-40 {
    --mood-tint-opacity: 0.40;
}

.tint-50 {
    --mood-tint-opacity: 0.50;
}

.tint-60 {
    --mood-tint-opacity: 0.60;
}

.tint-70 {
    --mood-tint-opacity: 0.70;
}

.tint-75 {
    --mood-tint-opacity: 0.75;
}

.tint-80 {
    --mood-tint-opacity: 0.80;
}

.tint-85 {
    --mood-tint-opacity: 0.85;
}

.tint-90 {
    --mood-tint-opacity: 0.90;
}

.tint-95 {
    --mood-tint-opacity: 0.95;
}

.tint-100 {
    --mood-tint-opacity: 1;
}

/* ── TINT BLEND-MODE PRESETS ─────────────────────────────── */
.tint-multiply {
    --mood-tint-blend: multiply;
}

.tint-overlay {
    --mood-tint-blend: overlay;
}

.tint-soft-light {
    --mood-tint-blend: soft-light;
}

.tint-hard-light {
    --mood-tint-blend: hard-light;
}

.tint-screen {
    --mood-tint-blend: screen;
}

.tint-darken {
    --mood-tint-blend: darken;
}

.tint-lighten {
    --mood-tint-blend: lighten;
}

.tint-color {
    --mood-tint-blend: color;
}

.tint-hue {
    --mood-tint-blend: hue;
}

.tint-normal {
    --mood-tint-blend: normal;
}

/* ── BUNDLED TINT PRESETS · one-click block styles ────────
   Named colour + opacity + blend combinations registered as
   core/group block styles (see functions.php). They show up
   in the Group block's Styles panel as "Tint · X" and bundle
   a complete look in one click. Each preset sets the three
   --mood-tint-* variables; the shared ::after rule renders
   the overlay. */
.is-style-mood-tint-dim {
    --mood-tint-color: var(--navy-deep);
    --mood-tint-opacity: 0.55;
    --mood-tint-blend: multiply;
}

.is-style-mood-tint-warm {
    --mood-tint-color: var(--orange);
    --mood-tint-opacity: 0.35;
    --mood-tint-blend: multiply;
}

.is-style-mood-tint-trust {
    --mood-tint-color: var(--teal);
    --mood-tint-opacity: 0.40;
    --mood-tint-blend: multiply;
}

.is-style-mood-tint-serious {
    --mood-tint-color: var(--blue-deep);
    --mood-tint-opacity: 0.45;
    --mood-tint-blend: multiply;
}

.is-style-mood-tint-drama {
    --mood-tint-color: var(--coral-deep);
    --mood-tint-opacity: 0.40;
    --mood-tint-blend: multiply;
}

.is-style-mood-tint-calm {
    --mood-tint-color: var(--sage);
    --mood-tint-opacity: 0.50;
    --mood-tint-blend: soft-light;
}

.is-style-mood-tint-editorial {
    --mood-tint-color: var(--cream);
    --mood-tint-opacity: 0.25;
    --mood-tint-blend: multiply;
}

.is-style-mood-tint-duotone {
    --mood-tint-color: var(--navy-deep);
    --mood-tint-opacity: 0.80;
    --mood-tint-blend: multiply;
}

/* Duotone paints on TOP of the mood's ::before clouds for the
   full-coverage cinematic look (like the v3 image-tint demos). */
.is-style-mood-tint-duotone::after {
    z-index: 0;
}

/* TINT OVERLAY — end */

/* =============================================================
   LEGACY HERO ALIASES — delegated to is-mood-hero
   -------------------------------------------------------------
   Older pages (contact, pricing, product detail, products hub,
   generic page hero) originally shipped with per-page hard-coded
   backgrounds, radial glows, and !important heading overrides
   that blocked the WP editor. Those blocks have been removed —
   here we reuse the mood-hero treatment as a drop-in alias so:

     · live DB content with .adm-con-hero / .adm-pr-hero / etc.
       keeps its hero look (same navy + orange glow).
     · any legacy hero can be restyled in the block editor by
       toggling to another "Mood · X" style on the wrapping
       group, because nothing below the section class uses
       !important any more.
     · the home-page hero (.adm-hero) is intentionally NOT part
       of this alias — it keeps its own background image and
       custom typography scale.
   ============================================================= */
.adm-con-hero,
.adm-pr-hero,
.adm-pp-hero,
.adm-sp-hero,
.page-hero,
.std-page-hero,
.adamiro-pricing-page-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(120px, 18vw, 200px) clamp(24px, 5vw, 80px) clamp(60px, 10vw, 100px);
    background-color: var(--navy);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.adm-con-hero::before,
.adm-pr-hero::before,
.adm-pp-hero::before,
.adm-sp-hero::before,
.page-hero::before,
.std-page-hero::before,
.adamiro-pricing-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 60% at top right, var(--orange-18), transparent 55%),
        radial-gradient(ellipse 40% 40% at bottom left, rgba(11, 20, 38, 0.85), transparent 70%);
}

.adm-con-hero>*,
.adm-pr-hero>*,
.adm-pp-hero>*,
.adm-sp-hero>*,
.page-hero>*,
.std-page-hero>*,
.adamiro-pricing-page-hero>* {
    position: relative;
    z-index: 1;
}

/* Legacy heading defaults — match is-mood-hero scale without
   !important, so editor-set font-size/weight still wins. */
.adm-con-hero h1,
.adm-con-hero .wp-block-heading,
.adm-pr-hero h1,
.adm-pr-hero .wp-block-heading,
.adm-pp-hero h1,
.adm-pp-hero .wp-block-heading,
.adm-sp-hero h1,
.adm-sp-hero .wp-block-heading,
.adm-sp-hero .wp-block-post-title,
.page-hero h1,
.std-page-hero h1,
.std-page-hero .wp-block-heading {
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--ink);
    font-size: clamp(38px, 5vw, 72px);
}

/* Orange emphasis matches the mood-hero signature — again
   without !important so editors can pick a different colour
   per heading span. */
.adm-con-hero h1 em,
.adm-con-hero .wp-block-heading em,
.adm-pr-hero h1 em,
.adm-pr-hero .wp-block-heading em,
.adm-pp-hero h1 em,
.adm-pp-hero .wp-block-heading em,
.page-hero h1 em,
.std-page-hero h1 em,
.adm-pp-hero h1 strong {
    color: var(--orange);
    font-style: normal;
    font-weight: 500;
}

.adm-con-hero-sub,
.adm-pp-hero-sub,
.adm-sp-hero .wp-block-post-excerpt,
.adm-sp-hero .wp-block-post-excerpt p,
.page-hero p,
.adm-pr-hero p {
    color: var(--ink-body);
    font-weight: 400;
    font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.65;
}

.adm-sp-hero .wp-block-post-excerpt__more-link {
    display: none;
}

/* LEGACY HERO ALIASES — end */

/* V4 MOOD PALETTE — end */

/* =============================================================
   V4 BUTTON COLOR STYLES — per-accent one-click variants
   -------------------------------------------------------------
   Pick from the Button block's Style panel. Each variant ships
   a fill version (coloured bg + contrast text) and a ghost
   version (transparent bg + coloured border/text). Hover inverts
   fill ↔ ghost. All at 4px radius, 500 weight.
   ============================================================= */

/* ── ORANGE ───────────────────────────────────────────── */
.wp-block-button.is-style-orange .wp-block-button__link,
.wp-block-button.is-style-orange a {
    background: var(--orange) !important;
    color: var(--navy-deep) !important;
    border: 1px solid var(--orange) !important;
    border-radius: var(--radius-full) !important;
    padding: 12px 22px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast) !important;
}

.wp-block-button.is-style-orange .wp-block-button__link:hover,
.wp-block-button.is-style-orange a:hover {
    background: transparent !important;
    color: var(--orange) !important;
    border: 1px solid var(--orange) !important;
}

.wp-block-button.is-style-orange-ghost .wp-block-button__link,
.wp-block-button.is-style-orange-ghost a {
    background: transparent !important;
    color: var(--orange) !important;
    border: 1px solid var(--orange) !important;
    border-radius: var(--radius-full) !important;
    padding: 12px 22px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.wp-block-button.is-style-orange-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-orange-ghost a:hover {
    background: var(--orange) !important;
    color: var(--navy-deep) !important;
    border: 1px solid var(--orange) !important;
}

/* ── SAGE ──────────────────────────────────────────────── */
.wp-block-button.is-style-sage .wp-block-button__link,
.wp-block-button.is-style-sage a {
    background: var(--sage) !important;
    color: var(--navy-deep) !important;
    border: 1px solid var(--sage) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 22px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast) !important;
}

.wp-block-button.is-style-sage .wp-block-button__link:hover,
.wp-block-button.is-style-sage a:hover {
    background: transparent !important;
    color: var(--sage) !important;
}

.wp-block-button.is-style-sage-ghost .wp-block-button__link,
.wp-block-button.is-style-sage-ghost a {
    background: transparent !important;
    color: var(--sage) !important;
    border: 1px solid var(--sage) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 22px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.wp-block-button.is-style-sage-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-sage-ghost a:hover {
    background: var(--sage) !important;
    color: var(--navy-deep) !important;
}

/* ── CORAL DEEP ────────────────────────────────────────── */
.wp-block-button.is-style-coral .wp-block-button__link,
.wp-block-button.is-style-coral a {
    background: var(--coral-deep) !important;
    color: var(--cream) !important;
    border: 1px solid var(--coral-deep) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 22px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast) !important;
}

.wp-block-button.is-style-coral .wp-block-button__link:hover,
.wp-block-button.is-style-coral a:hover {
    background: transparent !important;
    color: var(--coral-deep) !important;
}

.wp-block-button.is-style-coral-ghost .wp-block-button__link,
.wp-block-button.is-style-coral-ghost a {
    background: transparent !important;
    color: var(--coral-deep) !important;
    border: 1px solid var(--coral-deep) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 22px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.wp-block-button.is-style-coral-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-coral-ghost a:hover {
    background: var(--coral-deep) !important;
    color: var(--cream) !important;
}

/* ── BLUE DEEP ─────────────────────────────────────────── */
.wp-block-button.is-style-blue-deep .wp-block-button__link,
.wp-block-button.is-style-blue-deep a {
    background: var(--blue-deep) !important;
    color: var(--ink) !important;
    border: 1px solid var(--blue-deep) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 22px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast) !important;
}

.wp-block-button.is-style-blue-deep .wp-block-button__link:hover,
.wp-block-button.is-style-blue-deep a:hover {
    background: transparent !important;
    color: var(--blue-steel) !important;
}

.wp-block-button.is-style-blue-deep-ghost .wp-block-button__link,
.wp-block-button.is-style-blue-deep-ghost a {
    background: transparent !important;
    color: var(--blue-steel) !important;
    border: 1px solid var(--blue-steel) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 22px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.wp-block-button.is-style-blue-deep-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-blue-deep-ghost a:hover {
    background: var(--blue-deep) !important;
    color: var(--ink) !important;
}

/* ── CREAM (light-mode invert — use on dark bg) ───────── */
.wp-block-button.is-style-cream .wp-block-button__link,
.wp-block-button.is-style-cream a {
    background: var(--cream) !important;
    color: var(--navy-deep) !important;
    border: 1px solid var(--cream) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 22px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast) !important;
}

.wp-block-button.is-style-cream .wp-block-button__link:hover,
.wp-block-button.is-style-cream a:hover {
    background: transparent !important;
    color: var(--cream) !important;
}

/* ── TEAL (explicit — default primary is also teal, but
       this is a named, style-picker-accessible variant) ── */
.wp-block-button.is-style-teal .wp-block-button__link,
.wp-block-button.is-style-teal a {
    background: var(--teal) !important;
    color: var(--navy-deep) !important;
    border: 1px solid var(--teal) !important;
    border-radius: var(--radius-full) !important;
    padding: 12px 22px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast) !important;
}

.wp-block-button.is-style-teal .wp-block-button__link:hover,
.wp-block-button.is-style-teal a:hover {
    background: transparent !important;
    color: var(--teal) !important;
}

.wp-block-button.is-style-teal-ghost .wp-block-button__link,
.wp-block-button.is-style-teal-ghost a {
    background: transparent !important;
    color: var(--teal) !important;
    border: 1px solid var(--teal) !important;
    border-radius: var(--radius-full) !important;
    padding: 12px 22px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.wp-block-button.is-style-teal-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-teal-ghost a:hover {
    background: var(--teal) !important;
    color: var(--navy-deep) !important;
}

/* ── Ink-on-light utility (cream mood content) ───────── */
.is-mood-approach .has-ink-dark-color,
.has-ink-dark-color {
    color: var(--ink-dark) !important;
}

.has-ink-soft-color {
    color: var(--ink-soft) !important;
}

.has-cream-warm-background-color {
    background-color: var(--cream-warm) !important;
}

.has-cream-warm-color {
    color: var(--cream-warm) !important;
}

/* V4 BUTTON COLORS — end */


/* =========================================================
   V4 SHELL OVERRIDES — header, footer, sidebar (Swiss)
   Supersedes sections 5 (header), 25 (footer), app-sidebar.css
   Site is dark-mode-only. These rules apply regardless of
   [data-theme] to kill V3 light-mode leaks.
   ========================================================= */

/* ── Header ───────────────────────────────────────────── */
.site-header,
[data-theme="light"] .site-header,
[data-theme="dark"] .site-header {
    height: auto !important;
    min-height: var(--header-height) !important;
    background: var(--navy) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--hairline) !important;
    box-shadow: none !important;
    color: var(--ink) !important;
}

.site-header.scrolled,
[data-theme="light"] .site-header.scrolled {
    background: var(--navy) !important;
    border-bottom-color: var(--hairline-strong) !important;
    box-shadow: none !important;
}

.site-header .header-container,
.site-header .container.header-container {
    max-width: 1400px;
    padding: 0 clamp(20px, 3vw, 40px);
    min-height: var(--header-height);
    align-items: center;
    gap: clamp(16px, 3vw, 40px);
}

/* Logo — original size (300px wide, auto height) */
.site-header .header-logo img,
.site-header img[src*="adamiro-logo"] {
    width: 300px !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Text-based logo fallback */
.site-header .logo-text,
[data-theme="light"] .site-header .logo-text {
    color: var(--ink) !important;
    font-family: var(--font-body) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
}

/* Nav links — Swiss mono uppercase eyebrow style */
.site-header .main-navigation a,
.site-header .wp-block-navigation a,
[data-theme="light"] .site-header .main-navigation a,
[data-theme="light"] .site-header .wp-block-navigation a {
    color: var(--ink-body) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding: 10px 14px !important;
    border-bottom: none !important;
    line-height: 1.4 !important;
    transition: color var(--transition-fast) ease !important;
}

.site-header .main-navigation a:hover,
.site-header .wp-block-navigation a:hover,
.site-header .main-navigation li.current-menu-item a,
[data-theme="light"] .site-header .main-navigation a:hover,
[data-theme="light"] .site-header .wp-block-navigation a:hover {
    color: var(--teal) !important;
    background: transparent !important;
    border-bottom: none !important;
}

/* Header buttons row — keep tight */
.site-header .wp-block-group[class*="flex"] {
    gap: 12px;
}

/* Search toggle — tidy */
.site-header .header-search-toggle {
    background: transparent;
    border: 1px solid var(--hairline);
    color: var(--ink-body);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color var(--transition-fast) ease, color var(--transition-fast) ease;
}

.site-header .header-search-toggle:hover {
    border-color: var(--hairline-strong);
    color: var(--teal);
}

/* Kill V3 navy palette background coming from markup */
.site-header.has-navy-background-color {
    background: var(--navy) !important;
}

/* ── Footer ───────────────────────────────────────────── */
.site-footer,
[data-theme="light"] .site-footer,
[data-theme="dark"] .site-footer {
    background: var(--navy-deep) !important;
    color: var(--ink-body) !important;
    padding: 0 !important;
    margin-top: 0 !important;
    border-top: 1px solid var(--hairline) !important;
}

.site-footer .container {
    max-width: 1400px !important;
    padding: clamp(48px, 6vw, 96px) clamp(20px, 3vw, 40px) clamp(24px, 3vw, 40px) !important;
}

.site-footer .footer-grid {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr 1fr !important;
    gap: clamp(32px, 4vw, 64px) !important;
    margin-bottom: clamp(40px, 5vw, 64px) !important;
    padding-bottom: clamp(32px, 4vw, 48px) !important;
    border-bottom: 1px solid var(--hairline-faint) !important;
}

.site-footer .footer-brand img {
    width: auto !important;
    max-width: 140px !important;
    height: 100px !important;
    margin-bottom: 20px !important;
}

.site-footer .footer-tagline,
[data-theme="light"] .site-footer .footer-tagline {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--ink-muted) !important;
    max-width: 320px !important;
    margin: 0 !important;
}

.site-footer .footer-col h4,
[data-theme="light"] .site-footer .footer-col h4,
[data-theme="dark"] .site-footer .footer-col h4 {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--teal) !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
}

.site-footer .footer-col h4::before {
    content: "— ";
    color: var(--teal);
}

.site-footer .footer-col ul,
.site-footer .footer-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.site-footer .footer-col li {
    margin: 0 !important;
    font-size: 14px !important;
}

.site-footer .footer-col a,
.site-footer .footer-links a,
.site-footer a,
[data-theme="light"] .site-footer a,
[data-theme="dark"] .site-footer a {
    color: var(--ink-body) !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    transition: color var(--transition-fast) ease !important;
}

.site-footer .footer-col a:hover,
.site-footer .footer-links a:hover,
.site-footer a:hover {
    color: var(--teal) !important;
}

.site-footer .footer-bottom {
    border-top: none !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.site-footer .footer-bottom p,
[data-theme="light"] .site-footer .footer-bottom p {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.08em !important;
    color: var(--ink-muted) !important;
    margin: 0 !important;
}

.site-footer .footer-bottom a {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    color: var(--ink-body) !important;
}

@media (max-width: 900px) {
    .site-footer .footer-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 600px) {
    .site-footer .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .site-footer .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── App Sidebar (dashboard) ──────────────────────────── */
.app-sidebar,
html[data-theme="light"] .app-sidebar,
html[data-theme="dark"] .app-sidebar {
    top: var(--header-height) !important;
    background: var(--navy) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-right: none !important;
    color: var(--ink) !important;
}

.app-sidebar .sidebar-header {
    padding: 20px 16px !important;
    border-bottom: 1px solid var(--hairline-faint) !important;
    min-height: 72px;
}

.app-sidebar .sidebar-title {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    color: var(--ink) !important;
}

.app-sidebar .sidebar-nav {
    padding: 20px 10px !important;
}

.app-sidebar .sidebar-menu a,
html[data-theme="light"] .app-sidebar .sidebar-menu a,
html[data-theme="dark"] .app-sidebar .sidebar-menu a {
    color: var(--ink-body) !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    border-left: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 10px 12px !important;
    transition: color var(--transition-fast) ease, border-color var(--transition-fast) ease, background var(--transition-fast) ease !important;
}

.app-sidebar .sidebar-menu a:hover,
.app-sidebar .sidebar-menu a.active,
html[data-theme="light"] .app-sidebar .sidebar-menu a:hover,
html[data-theme="light"] .app-sidebar .sidebar-menu a.active {
    color: var(--ink) !important;
    background: rgba(47, 184, 160, 0.06) !important;
    border-left-color: var(--teal) !important;
    padding-left: 10px !important;
}

.app-sidebar .sidebar-menu .lucide-icon,
.app-sidebar .sidebar-menu .lucide,
html[data-theme="light"] .app-sidebar .sidebar-menu .lucide-icon {
    color: var(--ink-muted) !important;
    width: 18px !important;
    height: 18px !important;
    margin-right: 12px !important;
}

.app-sidebar .sidebar-menu a:hover .lucide-icon,
.app-sidebar .sidebar-menu a.active .lucide-icon,
.app-sidebar .sidebar-menu a:hover .lucide,
.app-sidebar .sidebar-menu a.active .lucide {
    color: var(--teal) !important;
}

.app-sidebar .sidebar-footer,
html[data-theme="light"] .app-sidebar .sidebar-footer,
html[data-theme="dark"] .app-sidebar .sidebar-footer {
    border-top: 1px solid var(--hairline-faint) !important;
    padding: 16px 16px 20px !important;
}

.app-sidebar .user-badge-inner,
html[data-theme="light"] .app-sidebar .user-badge-inner {
    background: var(--navy-surface) !important;
    border: 1px solid var(--hairline-faint) !important;
    border-radius: var(--radius-md) !important;
}

.app-sidebar .user-badge-inner:hover {
    background: var(--navy-lift) !important;
    border-color: var(--hairline) !important;
}

.app-sidebar .user-name,
html[data-theme="light"] .app-sidebar .user-name {
    color: var(--ink) !important;
    font-size: 13px !important;
}

.app-sidebar .user-email,
html[data-theme="light"] .app-sidebar .user-email {
    color: var(--ink-muted) !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
}

/* Mobile sidebar trigger — Swiss
   Visually a continuation of the sidebar: same navy, no border, no
   rounded corners, no shadow. Aligned to the actual header bottom. */
.mobile-sidebar-trigger,
html[data-theme="light"] .mobile-sidebar-trigger,
html[data-theme="dark"] .mobile-sidebar-trigger {
    top: var(--header-height) !important;
    background: var(--navy) !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--ink-body) !important;
    box-shadow: none !important;
}

.mobile-sidebar-trigger:hover {
    background: var(--navy-lift) !important;
    color: var(--teal) !important;
}

/* V4 SHELL OVERRIDES — end */


/* =========================================================
   V4 PAGE-WIDE OVERRIDES — Swiss discipline on all content
   Supersedes legacy .section-*, .hero, .article-card, typography
   and all [data-theme="light"] main-content rules. Site is
   dark-only regardless of data-theme.
   ========================================================= */

/* ── Root: body always navy ───────────────────────────── */
html,
html[data-theme="light"],
html[data-theme="dark"] {
    background: var(--navy) !important;
}

body,
html[data-theme="light"] body,
html[data-theme="light"] body.has-sidebar,
html[data-theme="dark"] body {
    background: var(--navy) !important;
    color: var(--ink-body) !important;
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    -webkit-font-smoothing: antialiased;
}

/* Dashboard main area — kill light-mode cream bg */
html[data-theme="light"] .app-main,
html[data-theme="light"] .site-main.app-main,
html[data-theme="dark"] .app-main,
.app-main {
    background: var(--navy-deep) !important;
    color: var(--ink-body) !important;
}

/* ── V4 Typography on every content area ──────────────── */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
html[data-theme="light"] .app-main h1,
html[data-theme="light"] .app-main h2,
html[data-theme="light"] .app-main h3,
html[data-theme="light"] .app-main h4,
html[data-theme="light"] .app-main h5,
html[data-theme="light"] .app-main h6,
html[data-theme="light"] .site-main:not(.app-main) h1,
html[data-theme="light"] .site-main:not(.app-main) h2,
html[data-theme="light"] .site-main:not(.app-main) h3,
html[data-theme="light"] .site-main:not(.app-main) h4,
html[data-theme="light"] .site-main:not(.app-main) h5,
html[data-theme="light"] .site-main:not(.app-main) h6,
html[data-theme="light"] .entry-content h1,
html[data-theme="light"] .entry-content h2,
html[data-theme="light"] .entry-content h3,
html[data-theme="light"] .entry-content h4,
html[data-theme="light"] .entry-content h5,
html[data-theme="light"] .entry-content h6 {
    font-family: var(--font-heading) !important;
    color: var(--ink) !important;
    line-height: 1.15 !important;
    margin-top: 0 !important;
}

body h1,
body .wp-block-heading.h1,
body h1.wp-block-heading {
    font-size: clamp(38px, 5vw, 68px);
    font-weight: 400;
    letter-spacing: -0.02em;
}

body h2 {
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 500;
    letter-spacing: -0.02em;
}

body h3 {
    font-size: clamp(22px, 2.5vw, 36px);
    font-weight: 500;
    letter-spacing: -0.015em;
}

body h4 {
    font-size: clamp(18px, 1.8vw, 26px);
    font-weight: 600;
    letter-spacing: -0.01em;
}

body h5 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

body h6 {
    font-size: 11px;
    font-weight: 500;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--teal);
}

/* Paragraphs / lists on dark surfaces */
body .site-main p,
body .site-main li,
body .site-main span,
body .app-main p,
body .app-main li,
body .app-main span,
html[data-theme="light"] .app-main p,
html[data-theme="light"] .app-main li,
html[data-theme="light"] .app-main span {
    color: var(--ink-body);
}

/* Cream / light mood overrides — text flips ink-dark */
.has-cream-background-color,
.has-cream-warm-background-color,
.has-bone-background-color,
.has-ice-background-color,
.is-mood-approach,
.section-light {
    color: var(--ink-dark) !important;
}

.has-cream-background-color h1,
.has-cream-background-color h2,
.has-cream-background-color h3,
.has-cream-background-color h4,
.has-cream-background-color h5,
.has-cream-warm-background-color h1,
.has-cream-warm-background-color h2,
.has-cream-warm-background-color h3,
.has-cream-warm-background-color h4,
.has-cream-warm-background-color h5,
.has-ice-background-color h1,
.has-ice-background-color h2,
.has-ice-background-color h3,
.is-mood-approach h1,
.is-mood-approach h2,
.is-mood-approach h3,
.is-mood-approach h4,
.is-mood-approach h5,
.section-light h1,
.section-light h2,
.section-light h3,
.section-light h4,
.section-light h5,
.section-light h6 {
    color: var(--ink-dark) !important;
}

.has-cream-background-color p,
.has-cream-background-color li,
.has-cream-background-color span,
.has-cream-warm-background-color p,
.has-cream-warm-background-color li,
.has-cream-warm-background-color span,
.is-mood-approach p,
.is-mood-approach li,
.is-mood-approach span,
.section-light p,
.section-light li,
.section-light span {
    color: var(--ink-soft) !important;
}

/* ── Legacy section classes → V4 ──────────────────────── */
.section-dark {
    background: var(--navy) !important;
    color: var(--ink-body) !important;
}

.section-light {
    background: var(--cream) !important;
}

.section-gray,
.section-offwhite {
    background: var(--navy-surface) !important;
    color: var(--ink-body) !important;
}

.section-light-blue {
    background: var(--ice) !important;
    color: var(--ink-dark) !important;
}

/* ── Section label / legacy eyebrow → V4 mono ─────────── */
.section-label,
.eyebrow,
.adm-eyebrow {
    display: inline-block !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--teal) !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 18px !important;
}

.section-label::before {
    content: "— ";
    color: var(--teal);
}

/* ── Legacy hero classes → V4 hero ────────────────────── */
.blog-hero,
.blog-hero.section-light {
    background: var(--navy) !important;
    color: var(--ink) !important;
    padding: clamp(60px, 10vw, 140px) 0 !important;
    border-bottom: 1px solid var(--hairline) !important;
}

.blog-hero h1,
.blog-hero .s-h2,
.s-h1,
.s-h2 {
    color: var(--ink) !important;
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
    font-size: clamp(38px, 5vw, 68px) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
    margin: 0 0 20px !important;
}

.blog-hero .s-intro,
.blog-hero p,
.s-intro {
    color: var(--ink-body) !important;
    font-size: clamp(16px, 1.3vw, 18px) !important;
    max-width: 620px !important;
    line-height: 1.6 !important;
}

.hero {
    background: var(--navy) !important;
    min-height: auto !important;
}

.hero-container {
    padding: clamp(60px, 10vw, 140px) 20px !important;
}

/* ── Article cards → V4 matte ────────────────────────── */
.article-card,
.article-grid .article-card {
    background: var(--navy-surface) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    transition: border-color var(--transition-fast) ease !important;
    overflow: hidden;
}

.article-card:hover {
    border-color: var(--hairline-strong) !important;
    transform: none !important;
    box-shadow: none !important;
    background: var(--navy-lift) !important;
}

.article-card .article-title,
.article-card h2,
.article-card h3 {
    color: var(--ink) !important;
    font-family: var(--font-heading) !important;
    font-weight: 500 !important;
    font-size: 20px !important;
    letter-spacing: -0.01em !important;
}

.article-card:hover .article-title {
    color: var(--ink) !important;
}

.article-card a {
    color: inherit !important;
    text-decoration: none !important;
}

.article-card-content {
    color: var(--ink-body) !important;
    padding: 24px !important;
}

.article-meta,
.article-card .wp-block-post-date,
.article-card time {
    color: var(--ink-muted) !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

.article-card .wp-block-post-excerpt,
.article-card .wp-block-post-excerpt p {
    color: var(--ink-body) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

/* ── Links in main content ──────────────────────────────
 * Exclusions cover canonical UI links that ship with their own color:
 * WP buttons, site buttons, ACP canonical buttons (.acp-btn*), filled
 * pill-badges like .asr-idea-generated, toc pills, and voice-format
 * buttons. Without the exclusion these teal-!important rules overrode
 * the filled-pill text color (white) making them unreadable. */
body .site-main a:where(:not(.wp-element-button):not(.btn):not([class*="btn-"]):not([class*="wp-block-button"]):not([class*="acp-btn"]):not(.asr-idea-generated):not(.asr-toc__link):not(.asr-voice-btn):not(.adamiro-currency-switcher__link):not(.adamiro-pricing-table__cycle-link):not(.voice-used-chip)):not(.article-card a),
body .app-main a:where(:not(.wp-element-button):not(.btn):not([class*="btn-"]):not([class*="wp-block-button"]):not([class*="acp-btn"]):not(.asr-idea-generated):not(.asr-toc__link):not(.asr-voice-btn):not(.adamiro-currency-switcher__link):not(.adamiro-pricing-table__cycle-link):not(.voice-used-chip)),
html[data-theme="light"] .app-main a:where(:not(.wp-element-button):not(.btn):not([class*="btn-"]):not([class*="acp-btn"]):not(.asr-idea-generated):not(.asr-toc__link):not(.asr-voice-btn):not(.adamiro-currency-switcher__link):not(.adamiro-pricing-table__cycle-link):not(.voice-used-chip)) {
    color: var(--teal) !important;
}

body .site-main a:where(:not(.wp-element-button):not(.btn):not([class*="acp-btn"]):not(.asr-idea-generated):not(.asr-toc__link):not(.asr-voice-btn):not(.adamiro-currency-switcher__link):not(.adamiro-pricing-table__cycle-link):not(.voice-used-chip)):hover,
body .app-main a:where(:not(.wp-element-button):not(.btn):not([class*="acp-btn"]):not(.asr-idea-generated):not(.asr-toc__link):not(.asr-voice-btn):not(.adamiro-currency-switcher__link):not(.adamiro-pricing-table__cycle-link):not(.voice-used-chip)):hover {
    color: var(--teal-deep) !important;
}

.section-light a,
.has-cream-background-color a,
.has-cream-warm-background-color a,
.is-mood-approach a {
    color: var(--coral-deep) !important;
}

/* ── Generic buttons without is-style-* → V4 teal ─────── */
.wp-element-button:not([class*="is-style-"]),
.wp-block-button__link:not([class*="is-style-"]),
.btn:not([class*="is-style-"]):not(.btn-hairline):not(.btn-primary):not(.btn-secondary) {
    background: var(--teal) !important;
    color: var(--navy-deep) !important;
    border: 1px solid var(--teal) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 22px !important;
    font-weight: 500 !important;
    font-family: var(--font-body) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    transition: background var(--transition-fast) ease, color var(--transition-fast) ease, border-color var(--transition-fast) ease !important;
}

.wp-element-button:not([class*="is-style-"]):hover,
.wp-block-button__link:not([class*="is-style-"]):hover,
.btn:not([class*="is-style-"]):not(.btn-hairline):not(.btn-primary):not(.btn-secondary):hover {
    background: transparent !important;
    color: var(--teal) !important;
    border-color: var(--teal) !important;
}

/* ── Pagination & query-nav ───────────────────────────── */
.wp-block-query-pagination,
.wp-block-query-pagination a,
.wp-block-query-pagination span {
    color: var(--ink-body) !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    letter-spacing: 0.1em !important;
}

.wp-block-query-pagination a:hover {
    color: var(--teal) !important;
}

/* ── Forms on dark bg ─────────────────────────────────── */
body:not(.is-light-bg) input[type="text"],
body:not(.is-light-bg) input[type="email"],
body:not(.is-light-bg) input[type="password"],
body:not(.is-light-bg) input[type="number"],
body:not(.is-light-bg) input[type="tel"],
body:not(.is-light-bg) input[type="url"],
body:not(.is-light-bg) input[type="search"],
body:not(.is-light-bg) textarea,
body:not(.is-light-bg) select {
    background: var(--navy-surface) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--ink) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 14px !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    transition: border-color var(--transition-fast) ease !important;
}

body:not(.is-light-bg) input:focus,
body:not(.is-light-bg) textarea:focus,
body:not(.is-light-bg) select:focus {
    border-color: var(--teal) !important;
    outline: none !important;
    box-shadow: 0 0 0 1px var(--teal) !important;
}

body:not(.is-light-bg) input::placeholder,
body:not(.is-light-bg) textarea::placeholder {
    color: var(--ink-muted) !important;
}

body:not(.is-light-bg) label {
    color: var(--ink-body) !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
}

/* V4 PAGE-WIDE OVERRIDES — end */


/* =========================================================
   V4 SHELL FIXES — round 2 (2026-04-19)
   Mega-menu dark, search form restore, button readability,
   user-badge ink, header vertical centering.
   ========================================================= */

/* ── Mega-menu → dark navy surface (was bright teal) ───── */
.mega-menu,
.mega-menu.is-visible,
.mega-menu-full-width,
.mega-menu-grid-content,
.mega-menu-block-source {
    background: var(--navy-surface) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
    color: var(--ink) !important;
}

.mega-menu a,
.mega-menu li,
.mega-menu span,
.mega-menu p {
    color: var(--ink-body) !important;
}

.mega-menu a {
    transition: color var(--transition-fast) ease, background var(--transition-fast) ease !important;
    border-radius: var(--radius-md) !important;
}

.mega-menu a:hover {
    color: var(--ink) !important;
    background: rgba(47, 184, 160, 0.08) !important;
}

.mega-menu .mega-menu-section-heading,
.mega-menu [class*="section-heading"],
.mega-menu [class*="section-label"],
.mega-menu h2,
.mega-menu h3,
.mega-menu h4,
.mega-menu h5 {
    color: var(--teal) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    margin: 0 0 12px !important;
    border: none !important;
    background: transparent !important;
}

.mega-menu hr,
.mega-menu [class*="divider"] {
    border: none !important;
    border-top: 1px solid var(--hairline-faint) !important;
    background: transparent !important;
}

/* Active-state / chevron cue used on Pricing item */
.mega-menu [class*="active"],
.mega-menu .is-active {
    background: rgba(47, 184, 160, 0.08) !important;
    border-left: 2px solid var(--teal) !important;
}

/* ── Header — vertical centering on all flex children ─── */
.site-header,
.site-header.wp-block-group,
.site-header.is-layout-flex,
.site-header>.wp-block-group,
.site-header>div {
    align-items: center !important;
}

.site-header .header-container {
    align-self: stretch;
    display: flex !important;
    align-items: center !important;
}

/* The right-side button cluster group */
.site-header>div:last-child,
.site-header .wp-block-group.is-layout-flex:last-child {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* ── .btn-primary everywhere (outside page-hero too) ──── */
.btn.btn-primary:not(.adamiro-header-btn):not(.wp-block-button),
.btn-primary:not(.wp-block-button):not(.adamiro-header-btn):not(.wp-element-button) {
    background: var(--teal) !important;
    color: var(--navy-deep) !important;
    border: 1px solid var(--teal) !important;
    border-radius: var(--radius-full) !important;
    padding: 12px 22px !important;
    font-weight: 500 !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background var(--transition-fast) ease, color var(--transition-fast) ease, border-color var(--transition-fast) ease !important;
}

.btn.btn-primary:not(.adamiro-header-btn):not(.wp-block-button):hover,
.btn-primary:not(.wp-block-button):not(.adamiro-header-btn):not(.wp-element-button):hover {
    background: transparent !important;
    color: var(--teal) !important;
    border-color: var(--teal) !important;
}

.btn.btn-secondary:not(.adamiro-header-btn),
.btn-secondary:not(.wp-block-button):not(.adamiro-header-btn) {
    background: transparent !important;
    color: var(--ink) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 22px !important;
    font-weight: 500 !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    text-transform: none !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: border-color var(--transition-fast) ease, color var(--transition-fast) ease !important;
}

.btn.btn-secondary:not(.adamiro-header-btn):hover,
.btn-secondary:not(.wp-block-button):not(.adamiro-header-btn):hover {
    border-color: var(--teal) !important;
    color: var(--teal) !important;
}

/* ── User badge ink + vertical centering ──────────────── */
.adamiro-user-badge {
    align-self: center;
}

.adamiro-user-badge .user-badge-trigger {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--ink) !important;
    border-radius: 999px !important;
}

.adamiro-user-badge .user-badge-trigger:hover {
    background: rgba(47, 184, 160, 0.08) !important;
    border-color: var(--hairline-strong) !important;
}

.adamiro-user-badge .user-name {
    color: var(--ink) !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.adamiro-user-badge .user-tasks {
    color: var(--ink-muted) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
}

.adamiro-user-badge .user-tasks strong {
    color: var(--teal) !important;
    font-weight: 500 !important;
}

.adamiro-user-badge .user-tasks.is-zero,
.adamiro-user-badge .user-tasks.is-zero strong {
    color: var(--coral-deep) !important;
}

.adamiro-user-badge .user-badge-caret {
    color: var(--ink-muted) !important;
}

/* Dropdown panel */
.adamiro-user-badge .user-badge-dropdown {
    background: var(--navy-surface) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
}

.adamiro-user-badge .user-badge-dropdown a {
    color: var(--ink-body) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
}

.adamiro-user-badge .user-badge-dropdown a:hover {
    background: rgba(47, 184, 160, 0.08) !important;
    color: var(--ink) !important;
}

/* ── Header search — restore V4 pill form ─────────────── */
.site-header .header-search {
    display: flex !important;
    align-items: center;
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--hairline) !important;
    overflow: hidden;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        background var(--transition-fast),
        border-color var(--transition-fast) !important;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

.site-header .header-search.is-open {
    width: 320px !important;
    background: var(--navy-surface) !important;
    border-color: var(--teal) !important;
    box-shadow: 0 0 0 1px rgba(47, 184, 160, 0.2) !important;
}

.site-header .header-search-toggle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    background: transparent !important;
    border: none !important;
    color: var(--ink-body) !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color var(--transition-fast) ease !important;
}

.site-header .header-search-toggle:hover,
.site-header .header-search.is-open .header-search-toggle {
    color: var(--teal) !important;
    background: transparent !important;
    border: none !important;
}

.site-header .header-search-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--ink) !important;
    padding: 0 16px 0 0 !important;
    height: 42px !important;
    width: 0 !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease 0.1s !important;
}

.site-header .header-search.is-open .header-search-input {
    width: auto !important;
    opacity: 1 !important;
}

.site-header .header-search-input::placeholder {
    color: var(--ink-muted) !important;
}

/* V4 SHELL FIXES round 2 — end */


/* =========================================================
   V4 SHELL FIXES — round 3 (2026-04-19)
   nav-drawer (hamburger mega-menu) to navy surface, btn-primary
   to orange CTA, header vertical centering final enforcement.
   ========================================================= */

/* ── Hamburger nav-drawer → navy V4 ──────────────────── */
.nav-drawer,
html[data-theme="light"] .nav-drawer,
html[data-theme="dark"] .nav-drawer {
    background: var(--navy-deep) !important;
    color: var(--ink) !important;
}

.nav-drawer::before {
    background: rgba(5, 11, 23, 0.85) !important;
}

.nav-drawer-inner,
html[data-theme="light"] .nav-drawer-inner,
html[data-theme="dark"] .nav-drawer-inner {
    background: var(--navy-deep) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
}

.nav-drawer-left,
html[data-theme="light"] .nav-drawer-left,
html[data-theme="dark"] .nav-drawer-left,
html:not([data-theme="light"]) .nav-drawer-left {
    background: var(--navy) !important;
    border-right: 1px solid var(--hairline) !important;
    color: var(--ink) !important;
}

.nav-drawer-right,
html[data-theme="light"] .nav-drawer-right,
html[data-theme="dark"] .nav-drawer-right {
    background: var(--navy-deep) !important;
    color: var(--ink-body) !important;
}

.nav-drawer-item,
html[data-theme="light"] .nav-drawer-item,
html[data-theme="dark"] .nav-drawer-item,
html:not([data-theme="light"]) .nav-drawer-item {
    background: transparent !important;
    color: var(--ink-body) !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    border: none !important;
    border-left: 2px solid transparent !important;
    border-radius: 0 !important;
    transition: background var(--transition-fast) ease, color var(--transition-fast) ease, border-color var(--transition-fast) ease !important;
}

/* Match base-rule specificity (html[data-theme] .nav-drawer-item = 0,2,1).
 * Without these prefixes the plain `.nav-drawer-item:hover` (0,2,0) lost to
 * the base rule's !important — killing the hover effect entirely. */
.nav-drawer-item:hover,
.nav-drawer-item.active,
html[data-theme="light"] .nav-drawer-item:hover,
html[data-theme="light"] .nav-drawer-item.active,
html[data-theme="dark"] .nav-drawer-item:hover,
html[data-theme="dark"] .nav-drawer-item.active,
html:not([data-theme="light"]) .nav-drawer-item:hover,
html:not([data-theme="light"]) .nav-drawer-item.active {
    background: rgba(47, 184, 160, 0.12) !important;
    color: var(--teal) !important;
    border-left-color: var(--teal) !important;
}

.nav-drawer-item .drawer-arrow,
.nav-drawer-item:hover .drawer-arrow,
.nav-drawer-item.active .drawer-arrow {
    color: var(--teal) !important;
}

.nav-drawer-link,
.nav-drawer-item.nav-drawer-link {
    color: var(--ink-body) !important;
}

.nav-drawer-pane {
    background: transparent !important;
    color: var(--ink-body) !important;
}

.nav-drawer-pane .mega-menu-section-heading {
    color: var(--teal) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.nav-drawer-pane .mega-menu-items>li>a,
.nav-drawer-pane a {
    color: var(--ink-body) !important;
    border-radius: var(--radius-md) !important;
    transition: background var(--transition-fast) ease, color var(--transition-fast) ease !important;
}

.nav-drawer-pane .mega-menu-items>li>a:hover,
.nav-drawer-pane a:hover {
    background: rgba(47, 184, 160, 0.08) !important;
    color: var(--ink) !important;
}

.nav-drawer-pane>.mega-menu-promo,
.nav-drawer-pane>.mega-menu-column.mega-menu-promo,
html[data-theme="light"] .nav-drawer-pane>.mega-menu-promo,
html[data-theme="dark"] .nav-drawer-pane>.mega-menu-promo {
    background: var(--navy-lift) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    color: var(--ink) !important;
}

body.nav-drawer-open .wp-site-blocks>.wp-block-template-part:first-child {
    filter: none !important;
}

/* Hamburger icon */
.nav-hamburger,
html[data-theme="light"] .nav-hamburger {
    background: transparent !important;
    border: 1px solid var(--hairline) !important;
    color: var(--ink-body) !important;
    border-radius: var(--radius-md) !important;
    transition: border-color var(--transition-fast) ease, color var(--transition-fast) ease !important;
}

.nav-hamburger:hover {
    border-color: var(--hairline-strong) !important;
    color: var(--teal) !important;
}

.nav-hamburger .hamburger-label,
html[data-theme="light"] .nav-hamburger .hamburger-label {
    color: currentColor !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
}

/* ── .btn-primary → ORANGE CTA (V4 hero primary) ──────── */
/* Supersedes round-2 teal teal. Header Get Started button
   uses inline bg color so is unaffected. */
.btn.btn-primary:not(.adamiro-header-btn):not(.wp-block-button),
.btn-primary:not(.wp-block-button):not(.adamiro-header-btn):not(.wp-element-button) {
    background: var(--orange) !important;
    color: var(--navy-deep) !important;
    border: 1px solid var(--orange) !important;
    text-shadow: none !important;
}

.btn.btn-primary:not(.adamiro-header-btn):not(.wp-block-button):hover,
.btn-primary:not(.wp-block-button):not(.adamiro-header-btn):not(.wp-element-button):hover {
    background: transparent !important;
    color: var(--orange) !important;
    border-color: var(--orange) !important;
}

/* V4 SHELL FIXES round 3 — end */


/* =========================================================
   V4 SHELL FIXES — round 4 (2026-04-19)
   Sidebar narrower, user-badge padding reset, search frame
   polished, belt-and-suspenders orange CTA.
   ========================================================= */

/* ── Sidebar expanded width 260 → 200 ─────────────────── */
body.sidebar-expanded .app-sidebar,
html.sidebar-early-expanded .app-sidebar {
    width: 200px !important;
}

body.has-sidebar.sidebar-expanded .app-main,
html.sidebar-early-expanded .app-main {
    margin-left: 200px !important;
}

body.sidebar-expanded .mobile-sidebar-trigger,
html.sidebar-early-expanded .mobile-sidebar-trigger {
    left: 200px !important;
}

body.sidebar-expanded .sidebar-title,
html.sidebar-early-expanded .sidebar-title {
    max-width: 120px !important;
}

body.sidebar-expanded .user-details,
html.sidebar-early-expanded .user-details {
    width: 110px !important;
}

@media (max-width: 768px) {
    .app-sidebar {
        width: 200px !important;
    }

    body.sidebar-mobile-open .mobile-sidebar-trigger {
        left: 200px !important;
    }
}

/* ── User badge wrapper: reset the 0 12px 16px padding ── */
.adamiro-user-badge,
.site-header .adamiro-user-badge {
    padding: 0 !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* ── Search form — clean single-border frame ──────────── */
.site-header .header-search {
    box-shadow: none !important;
}

.site-header .header-search.is-open {
    background: var(--navy-surface) !important;
    border: 1px solid var(--teal) !important;
    box-shadow: none !important;
}

.site-header .header-search-input:focus,
.site-header .header-search-input:active {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}

/* Kill the inner input from picking up its own frame in some browsers */
.site-header .header-search-input {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ── Orange CTA — belt-and-suspenders (higher specificity) */
html body .btn.btn-primary:not(.adamiro-header-btn):not(.wp-block-button),
html body a.btn.btn-primary,
html body button.btn.btn-primary:not(.adamiro-header-btn) {
    background: var(--orange) !important;
    color: var(--navy-deep) !important;
    border-color: var(--orange) !important;
    text-shadow: none !important;
}

html body .btn.btn-primary:not(.adamiro-header-btn):not(.wp-block-button):hover,
html body a.btn.btn-primary:hover,
html body button.btn.btn-primary:not(.adamiro-header-btn):hover {
    background: transparent !important;
    color: var(--orange) !important;
    border-color: var(--orange) !important;
}

/* V4 SHELL FIXES round 4 — end */


/* =========================================================
   V4 CARD SURFACE — shaded background on all cards so they
   lift off the navy ground. (2026-04-19)
   ========================================================= */

/* Signals dashboard */
.asd-idea-card,
.asd-report-card,
.asd-source-card,
.asd-card,
/* Content library & voice dashboard */
.acl-card,
.avd-card,
/* Marketing / legacy */
.article-card,
.feature-card,
.matte-card,
.expert-card,
.case-card,
.product-card,
.insight-card,
.pricing-card,
/* Pricing page blocks */
.adamiro-pricing-table__card,
.adamiro-task-pack-grid__card,
/* Dashboard plugin UI */
.acp-card,
.ac-card,
.acp-panel,
.acp-module-card,
/* Generic */
.wp-block-group.is-style-matte-card,
.wp-block-group.is-style-data-panel {
    background: rgba(30, 41, 59, 0.36) !important;
    /* #1E293B @ 36% — subtle lift */
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    transition: border-color var(--transition-fast) ease, background var(--transition-fast) ease !important;
}

.asd-idea-card:hover,
.asd-report-card:hover,
.asd-source-card:hover,
.asd-card:hover,
.acl-card:hover,
.avd-card:hover,
.article-card:hover,
.feature-card:hover,
.matte-card:hover,
.expert-card:hover,
.case-card:hover,
.product-card:hover,
.insight-card:hover,
.pricing-card:hover,
.adamiro-pricing-table__card:hover,
.adamiro-task-pack-grid__card:hover,
.acp-card:hover,
.ac-card:hover,
.wp-block-group.is-style-matte-card:hover {
    background: rgba(30, 41, 59, 0.55) !important;
    /* hover: stronger lift */
    border-color: var(--hairline-strong) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Featured / highlighted variant — deeper lift */
.asd-idea-card.is-featured,
.adamiro-pricing-table__card.is-featured,
.pricing-card.is-featured,
.feature-card.is-featured {
    background: rgba(30, 41, 59, 0.65) !important;
    border-color: var(--hairline-strong) !important;
}

/* On cream/approach mood, cards flip light */
.is-mood-approach .asd-idea-card,
.is-mood-approach .article-card,
.is-mood-approach .feature-card,
.is-mood-approach .matte-card,
.is-mood-approach [class*="-card"],
.has-cream-background-color .asd-idea-card,
.has-cream-background-color .article-card,
.has-cream-background-color .feature-card,
.has-cream-background-color .matte-card,
.has-cream-background-color [class*="-card"] {
    background: #FFFFFF !important;
    border: 1px solid rgba(11, 20, 38, 0.12) !important;
    color: var(--ink-dark) !important;
}

/* V4 CARD SURFACE — end */


/* =========================================================
   V4 FIX — Voice edit preview pane (white-bg island inside
   dark dashboard). Our `color: var(--ink-body) !important`
   rules were trumping the inline dark-text styles on
   #draft-editor-preview. Reassert dark text here.
   ========================================================= */

#draft-editor-preview,
#draft-editor-preview * {
    color: #0f172a !important;
}

#draft-editor-preview h1,
#draft-editor-preview h2,
#draft-editor-preview h3,
#draft-editor-preview h4,
#draft-editor-preview h5,
#draft-editor-preview h6,
#draft-editor-preview .draft-title {
    color: #0B1426 !important;
}

#draft-editor-preview a {
    color: var(--teal) !important;
}

#draft-editor-preview blockquote {
    color: #334155 !important;
    background: #f1f5f9 !important;
    border-left: 3px solid var(--teal) !important;
}

#draft-editor-preview code {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

#draft-editor-preview pre {
    background: #0f172a !important;
    color: #f8fafc !important;
}

#draft-editor-preview pre code,
#draft-editor-preview pre * {
    background: transparent !important;
    color: inherit !important;
}

/* V4 voice-preview fix — end */


/* =========================================================
   V4 DASHBOARD — tighter heading scale (~20% smaller)
   Marketing pages keep the bold V4 clamp scale; dashboard
   dials it back since data-dense layouts need less drama.
   ========================================================= */

body .app-main h1,
html[data-theme="light"] .app-main h1,
html[data-theme="dark"] .app-main h1 {
    font-size: clamp(30px, 4vw, 54px) !important;
}

body .app-main h2,
html[data-theme="light"] .app-main h2,
html[data-theme="dark"] .app-main h2 {
    font-size: clamp(22px, 2.8vw, 38px) !important;
}

body .app-main h3,
html[data-theme="light"] .app-main h3,
html[data-theme="dark"] .app-main h3 {
    font-size: clamp(18px, 2vw, 29px) !important;
}

body .app-main h4,
html[data-theme="light"] .app-main h4,
html[data-theme="dark"] .app-main h4 {
    font-size: clamp(15px, 1.4vw, 21px) !important;
}

/* V4 dashboard heading scale — end */


/* =========================================================
   V4 DASHBOARD — time/date inputs match text inputs
   Native input[type="time"] and the calendar-picker-indicator
   were falling back to browser chrome. Align with V4 fields.
   ========================================================= */

body:not(.is-light-bg) input[type="time"],
body:not(.is-light-bg) input[type="date"],
body:not(.is-light-bg) input[type="datetime-local"],
body:not(.is-light-bg) input[type="month"],
body:not(.is-light-bg) input[type="week"],
.acp-input[type="time"],
.acp-input[type="date"],
.adamiro-form-group input[type="time"],
.adamiro-form-group input[type="date"],
#sig-time,
#signals-time {
    background: var(--navy-surface) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--ink) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 14px !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color-scheme: dark !important;
    transition: border-color var(--transition-fast) ease !important;
}

body:not(.is-light-bg) input[type="time"]:focus,
body:not(.is-light-bg) input[type="date"]:focus,
body:not(.is-light-bg) input[type="datetime-local"]:focus,
.acp-input[type="time"]:focus,
.adamiro-form-group input[type="time"]:focus,
#sig-time:focus,
#signals-time:focus {
    border-color: var(--teal) !important;
    outline: none !important;
    box-shadow: 0 0 0 1px var(--teal) !important;
}

/* Replace native clock/calendar icon with a custom white SVG.
   Step 1: hide native indicator (keep it click-hit so picker
   still opens). Step 2: paint our own icon via background-image. */
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    opacity: 0 !important;
    position: absolute;
    right: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

input[type="time"],
.acp-input[type="time"],
#sig-time,
#signals-time {
    position: relative;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23F1F5F9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-color: var(--navy-surface) !important;
    background-size: 18px 18px !important;
    padding-right: 40px !important;
}

input[type="date"],
input[type="datetime-local"],
.acp-input[type="date"],
.acp-input[type="datetime-local"] {
    position: relative;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23F1F5F9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-color: var(--navy-surface) !important;
    background-size: 18px 18px !important;
    padding-right: 40px !important;
}

input[type="time"]:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover {
    filter: brightness(1.15);
}

/* Firefox time input inherits from input rules above; no extra. */

/* V4 time/date input fix — end */


/* =========================================================
   V4 DROPDOWN OPTIONS — globally navy (was V3 teal/green)
   Native <option> elements accept background/color in most
   desktop browsers. This kills the green tint coming from
   the V3 --white fallback and theme-auto.css light-mode
   override.
   ========================================================= */

select option,
.acp-input option,
.adamiro-form-group select option,
.adm-form-group select option,
.asd-settings-editor select.acp-input option,
html[data-theme="light"] select.acp-input option,
html[data-theme="dark"] select.acp-input option,
html[data-theme="light"] select option,
html[data-theme="dark"] select option {
    background: var(--navy-surface) !important;
    color: var(--ink) !important;
    font-family: var(--font-body) !important;
}

select option:checked,
select option:hover,
.acp-input option:checked,
.acp-input option:hover {
    background: var(--navy-lift) !important;
    color: var(--ink) !important;
}

select:disabled option {
    color: var(--ink-muted) !important;
}

/* Force dark browser chrome on all selects so popup matches */
select,
.acp-input,
.adamiro-form-group select,
.adm-form-group select {
    color-scheme: dark !important;
}

/* V4 dropdown options — end */


/* =========================================================
   V4 TIME PICKER — custom dropdown replacing OS popup
   ========================================================= */

.adam-timepicker-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.adam-timepicker-wrap input[type="time"] {
    cursor: pointer;
    width: 100%;
}

.adam-timepicker-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1000;
    display: flex;
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
    min-width: 180px;
    animation: adam-timepicker-in 160ms ease-out;
}

.adam-timepicker-panel[hidden] {
    display: none !important;
}

@keyframes adam-timepicker-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.adam-timepicker-col {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    background: var(--navy-surface);
    max-height: 220px;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(47, 184, 160, 0.3) transparent;
}

.adam-timepicker-col::-webkit-scrollbar {
    width: 5px;
}

.adam-timepicker-col::-webkit-scrollbar-track {
    background: transparent;
}

.adam-timepicker-col::-webkit-scrollbar-thumb {
    background: rgba(47, 184, 160, 0.3);
    border-radius: 2px;
}

.adam-timepicker-col::-webkit-scrollbar-thumb:hover {
    background: rgba(47, 184, 160, 0.55);
}

.adam-timepicker-col li {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-body);
    padding: 8px 16px;
    text-align: center;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    font-feature-settings: "tnum" 1;
    letter-spacing: 0.04em;
    user-select: none;
}

.adam-timepicker-col li:hover {
    background: rgba(47, 184, 160, 0.08);
    color: var(--ink);
}

.adam-timepicker-col li.is-selected {
    background: var(--teal);
    color: var(--navy-deep);
    font-weight: 500;
}

.adam-timepicker-col li.is-selected:hover {
    background: var(--teal);
    color: var(--navy-deep);
}

/* Right-align panel if near viewport edge — handled by wrap width
   but keep a fallback breakpoint. */
@media (max-width: 520px) {
    .adam-timepicker-panel {
        left: auto;
        right: 0;
    }
}

/* V4 time picker — end */


/* =========================================================
   V4 DATE PICKER — custom calendar replacing OS popup
   ========================================================= */

.adam-datepicker-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.adam-datepicker-wrap input[type="date"] {
    cursor: pointer;
    width: 100%;
}

.adam-datepicker-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1000;
    background: var(--navy-surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
    width: 280px;
    padding: 10px;
    animation: adam-datepicker-in 160ms ease-out;
}

.adam-datepicker-panel[hidden] {
    display: none !important;
}

@keyframes adam-datepicker-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.adam-datepicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 2px 8px;
}

.adam-datepicker-label {
    font-family: var(--font-display, inherit);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: 0.02em;
    text-transform: capitalize;
}

.adam-datepicker-nav {
    background: transparent;
    border: 1px solid var(--hairline);
    color: var(--ink-body);
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.adam-datepicker-nav:hover {
    background: rgba(47, 184, 160, 0.08);
    border-color: var(--teal);
    color: var(--ink);
}

.adam-datepicker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 0 0 4px;
}

.adam-datepicker-weekdays span {
    font-family: var(--font-mono);
    font-size: 10px;
    text-align: center;
    color: rgba(241, 245, 249, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 0;
    user-select: none;
}

.adam-datepicker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.adam-datepicker-day {
    background: transparent;
    border: 1px solid transparent;
    color: var(--ink-body);
    font-family: var(--font-mono);
    font-size: 12px;
    font-feature-settings: "tnum" 1;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.adam-datepicker-day:hover {
    background: rgba(47, 184, 160, 0.08);
    color: var(--ink);
}

.adam-datepicker-day.is-outside {
    color: rgba(241, 245, 249, 0.25);
}

.adam-datepicker-day.is-today {
    border-color: rgba(47, 184, 160, 0.5);
    color: var(--ink);
}

.adam-datepicker-day.is-selected {
    background: var(--teal);
    color: var(--navy-deep);
    font-weight: 500;
    border-color: var(--teal);
}

.adam-datepicker-day.is-selected:hover {
    background: var(--teal);
    color: var(--navy-deep);
}

.adam-datepicker-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    margin-top: 6px;
    border-top: 1px solid var(--hairline);
}

.adam-datepicker-action {
    background: transparent;
    border: none;
    color: var(--teal);
    font-size: 12px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 4px;
    transition: background 120ms ease;
}

.adam-datepicker-action:hover {
    background: rgba(47, 184, 160, 0.08);
}

@media (max-width: 520px) {
    .adam-datepicker-panel {
        left: auto;
        right: 0;
        width: 260px;
    }
}

/* V4 date picker — end */


/* =========================================================
   V4 SELECT — custom dropdown replacing OS popup
   ========================================================= */

.adam-select-wrap {
    position: relative;
    display: block;
}

/* Hide the real <select> visually but keep it in the DOM for
   form submission + keyboard accessibility fallback. */
.adam-select-native {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

.adam-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    background: var(--navy-surface) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 14px !important;
    color: var(--ink) !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast) ease, background var(--transition-fast) ease;
    min-height: 44px;
}

.adam-select-trigger:hover {
    border-color: var(--hairline-strong) !important;
}

.adam-select-wrap.is-open .adam-select-trigger,
.adam-select-trigger:focus-visible {
    border-color: var(--teal) !important;
    outline: none !important;
    box-shadow: 0 0 0 1px var(--teal) !important;
}

.adam-select-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adam-select-caret {
    flex-shrink: 0;
    color: var(--ink-muted);
    display: inline-flex;
    align-items: center;
    transition: transform var(--transition-fast) ease, color var(--transition-fast) ease;
}

.adam-select-wrap.is-open .adam-select-caret {
    transform: rotate(180deg);
    color: var(--teal);
}

.adam-select-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1000;
    list-style: none;
    margin: 0;
    padding: 4px;
    background: var(--navy-surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
    animation: adam-select-in 160ms ease-out;
    scrollbar-width: thin;
    scrollbar-color: rgba(47, 184, 160, 0.3) transparent;
}

.adam-select-panel[hidden] {
    display: none !important;
}

.adam-select-panel::-webkit-scrollbar {
    width: 5px;
}

.adam-select-panel::-webkit-scrollbar-track {
    background: transparent;
}

.adam-select-panel::-webkit-scrollbar-thumb {
    background: rgba(47, 184, 160, 0.3);
    border-radius: 2px;
}

@keyframes adam-select-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.adam-select-panel li {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--ink-body);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    user-select: none;
}

.adam-select-panel li:hover {
    background: rgba(47, 184, 160, 0.08);
    color: var(--ink);
}

.adam-select-panel li.is-selected {
    background: var(--teal);
    color: var(--navy-deep);
    font-weight: 500;
}

.adam-select-panel li.is-selected:hover {
    background: var(--teal);
    color: var(--navy-deep);
}

.adam-select-panel li.is-disabled {
    color: var(--ink-faint);
    cursor: not-allowed;
}

.adam-select-panel li.is-disabled:hover {
    background: transparent;
    color: var(--ink-faint);
}

/* V4 select — end */


/* =========================================================
   V4 HOME — adm-* legacy sections restyled to Swiss + mood
   ========================================================= */

/* Shared section typography */
.adm-hero .adm-s-label,
.adm-s-label {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--teal) !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 0 24px !important;
    display: inline-block;
}

.adm-s-h2 {
    font-family: var(--font-heading) !important;
    font-size: clamp(32px, 4vw, 56px) !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
    color: var(--ink) !important;
    margin: 0 0 20px !important;
}

.adm-s-intro {
    font-size: clamp(17px, 1.4vw, 20px) !important;
    line-height: 1.5 !important;
    color: var(--ink-body) !important;
    max-width: 720px;
    margin: 0 0 32px !important;
}

/* ── HERO ──────────────────────────────────────────────── */
.adm-hero .adm-hero-eyebrow {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--orange) !important;
    margin: 0 0 32px !important;
}

.adm-hero .adm-hero-sub,
.adm-con-hero .adm-con-hero-sub {
    max-width: 720px;
}

.adm-hero .adm-hero-support,
.adm-con-hero .adm-con-hero-support {
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    color: var(--ink-muted) !important;
}

/* ── REALITY (problem mood) ───────────────────────────── */
.adm-reality .adm-reality-cards {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 1px !important;
    background: var(--hairline) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
}

.adm-reality-card {
    background: rgba(30, 41, 59, 0.36) !important;
    padding: 32px !important;
    border: none !important;
    border-radius: 0 !important;
}

.adm-reality-card p {
    color: var(--ink) !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.adm-reality-footer {
    margin-top: 48px !important;
    font-size: clamp(16px, 1.4vw, 19px) !important;
    line-height: 1.6 !important;
    color: var(--ink-body) !important;
    max-width: 780px;
}

.adm-reality-footer strong {
    color: var(--coral-deep) !important;
    font-weight: 500 !important;
}

/* ── INSIGHT with 83/17 bars (statement mood) ─────────── */
.adm-insight .adm-insight-grid {
    display: grid !important;
    grid-template-columns: 1.1fr 1fr !important;
    gap: clamp(40px, 5vw, 80px) !important;
    align-items: start;
}

@media (max-width: 900px) {
    .adm-insight .adm-insight-grid {
        grid-template-columns: 1fr !important;
    }
}

.adm-insight .adm-insight-text p {
    color: var(--ink-body) !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    margin-bottom: 16px !important;
}

.adm-anchor {
    margin-top: 32px !important;
    padding: 20px 24px !important;
    border-left: 2px solid var(--teal) !important;
    background: rgba(47, 184, 160, 0.06) !important;
    color: var(--ink) !important;
    font-style: italic !important;
    font-size: 18px !important;
}

.adm-insight-visual {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    background: var(--hairline);
}

.adm-bar-block {
    padding: 28px 32px !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 24px !important;
}

.adm-bar-block.dark-bar {
    background: var(--navy-surface) !important;
    flex: 83;
    min-height: 220px;
    align-items: center !important;
}

.adm-bar-block.teal-bar {
    background: var(--teal) !important;
    flex: 17;
    min-height: 80px;
}

.adm-bar-pct {
    font-family: var(--font-mono) !important;
    font-weight: 500 !important;
    font-feature-settings: "tnum" 1;
    letter-spacing: -0.04em !important;
    line-height: 0.9 !important;
    margin: 0 !important;
    flex-shrink: 0;
}

.dark-bar .adm-bar-pct {
    font-size: clamp(80px, 10vw, 140px) !important;
    color: var(--orange) !important;
}

.dark-bar .adm-bar-pct::after {
    content: "%";
    font-size: 0.45em;
    color: var(--ink-muted);
    margin-left: 4px;
    vertical-align: super;
}

.teal-bar .adm-bar-pct {
    font-size: clamp(36px, 5vw, 56px) !important;
    color: var(--navy-deep) !important;
}

.teal-bar .adm-bar-pct::after {
    content: "%";
    font-size: 0.5em;
    color: var(--navy-deep);
    opacity: 0.6;
    margin-left: 2px;
    vertical-align: super;
}

.adm-bar-label {
    color: var(--ink-body) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    flex: 1;
}

.teal-bar .adm-bar-label {
    color: var(--navy-deep) !important;
    font-weight: 500 !important;
}

.adm-insight-caption {
    margin-top: 16px !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    color: var(--ink-muted) !important;
    text-transform: uppercase;
}

/* ── APPROACH (cream + sage mood) ──────────────────────── */
.adm-approach .adm-approach-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    background: rgba(11, 20, 38, 0.12) !important;
    border: 1px solid rgba(11, 20, 38, 0.12) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
}

.adm-approach-step {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 0 !important;
    padding: 32px clamp(24px, 3vw, 40px) !important;
    background: rgba(255, 255, 255, 0.6) !important;
}

@media (max-width: 760px) {
    .adm-approach-step {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

.adm-step-product .adm-step-name {
    font-family: var(--font-heading) !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    color: var(--ink-dark) !important;
    margin: 0 !important;
}

.adm-step-product .adm-step-type {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--sage-deep) !important;
    margin: 4px 0 0 !important;
}

.adm-step-content .adm-step-verb {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--coral-deep) !important;
    margin: 0 0 8px !important;
}

.adm-step-content .adm-step-desc {
    color: var(--ink-soft) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.adm-approach-footer {
    margin-top: 40px !important;
    font-size: clamp(18px, 1.6vw, 24px) !important;
    color: var(--ink-dark) !important;
    font-weight: 400 !important;
}

.adm-approach-footer strong {
    color: var(--coral-deep) !important;
    font-weight: 500 !important;
}

/* ── SYSTEM (flow diagram) ─────────────────────────────── */
.adm-system .adm-flow-row {
    display: flex !important;
    align-items: stretch !important;
    gap: 16px !important;
    flex-wrap: wrap;
}

.adm-flow-block {
    flex: 1;
    min-width: 240px;
    padding: 32px !important;
    background: rgba(30, 41, 59, 0.36) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
}

.adm-flow-block.accent {
    border-color: var(--teal-deep) !important;
    background: rgba(47, 184, 160, 0.06) !important;
}

.adm-flow-block.mid {
    border-color: var(--hairline-strong) !important;
}

.adm-flow-block h4 {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--teal) !important;
    margin: 0 0 12px !important;
}

.adm-flow-block p {
    color: var(--ink-body) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.adm-flow-arrow {
    font-family: var(--font-mono) !important;
    font-size: 24px !important;
    color: var(--teal) !important;
    align-self: center;
    margin: 0 !important;
    flex-shrink: 0;
}

@media (max-width: 760px) {
    .adm-flow-arrow {
        transform: rotate(90deg);
    }
}

.adm-system .adm-system-summary {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
}

@media (max-width: 900px) {
    .adm-system .adm-system-summary {
        grid-template-columns: 1fr !important;
    }
}

.adm-summary-block p {
    color: var(--ink-body) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.adm-summary-block strong {
    color: var(--teal) !important;
    font-weight: 500 !important;
}

/* ── PRODUCTS (capabilities mood bento) ────────────────── */
.adm-products .adm-product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1px !important;
    background: var(--hairline) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
}

@media (max-width: 760px) {
    .adm-products .adm-product-grid {
        grid-template-columns: 1fr !important;
    }
}

.adm-product-card {
    background: rgba(30, 41, 59, 0.36) !important;
    padding: 40px 36px !important;
    border: none !important;
    border-radius: 0 !important;
    transition: background var(--transition-fast) ease !important;
}

.adm-product-card:hover {
    background: rgba(30, 41, 59, 0.55) !important;
}

.adm-product-card--wide {
    grid-column: span 2;
    background: rgba(47, 184, 160, 0.05) !important;
}

@media (max-width: 760px) {
    .adm-product-card--wide {
        grid-column: span 1;
    }
}

.adm-product-card--wide .adm-product-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 48px !important;
    align-items: start;
}

@media (max-width: 760px) {
    .adm-product-card--wide .adm-product-inner {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

.adm-product-num {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--teal) !important;
    margin: 0 0 12px !important;
}

.adm-product-card:nth-child(7n+1) .adm-product-num {
    color: var(--orange) !important;
}

.adm-product-card:nth-child(7n+2) .adm-product-num {
    color: var(--teal) !important;
}

.adm-product-card:nth-child(7n+3) .adm-product-num {
    color: var(--orange-warm) !important;
}

.adm-product-card:nth-child(7n+4) .adm-product-num {
    color: var(--sage) !important;
}

.adm-product-card:nth-child(7n+5) .adm-product-num {
    color: var(--blue-steel) !important;
}

.adm-product-name {
    font-family: var(--font-heading) !important;
    font-size: clamp(26px, 3vw, 38px) !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em !important;
    color: var(--ink) !important;
    margin: 0 0 12px !important;
}

.adm-product-tagline {
    color: var(--ink) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin: 0 0 16px !important;
}

.adm-product-body {
    color: var(--ink-body) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 0 20px !important;
}

.adm-product-cta {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--teal) !important;
    border-bottom: 1px solid var(--hairline) !important;
    padding-bottom: 4px !important;
    transition: color var(--transition-fast) ease, border-color var(--transition-fast) ease !important;
}

.adm-product-cta:hover {
    color: var(--ink) !important;
    border-bottom-color: var(--teal) !important;
}

.adm-the-tank-list {
    list-style: none !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
}

.adm-the-tank-list li {
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--hairline-faint) !important;
    color: var(--ink-body) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.adm-the-tank-list li:last-child {
    border-bottom: none !important;
}

.adm-the-tank-quote {
    padding: 20px 24px !important;
    border-left: 2px solid var(--teal) !important;
    background: rgba(47, 184, 160, 0.06) !important;
    color: var(--ink) !important;
    font-style: italic !important;
    font-size: 15px !important;
    margin: 24px 0 0 !important;
}

/* ── WHO (target audience) ─────────────────────────────── */
.adm-who .adm-who-grid {
    display: grid !important;
    grid-template-columns: 1.3fr 1fr !important;
    gap: clamp(32px, 4vw, 64px) !important;
    align-items: start;
}

@media (max-width: 900px) {
    .adm-who .adm-who-grid {
        grid-template-columns: 1fr !important;
    }
}

.adm-who-left p {
    color: var(--ink-body) !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    margin-bottom: 16px !important;
}

.adm-who-roles {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.adm-who-role {
    display: inline-block !important;
    padding: 10px 18px !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-full) !important;
    color: var(--ink) !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    background: rgba(30, 41, 59, 0.36) !important;
}

.adm-who-challenge {
    padding: 32px !important;
    background: rgba(30, 41, 59, 0.36) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
}

.adm-who-challenge p {
    color: var(--ink) !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    margin: 0 !important;
}

.adm-who-challenge strong {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--teal) !important;
    display: block;
    margin-bottom: 12px;
}

.adm-who-answer {
    margin-top: 24px !important;
    font-family: var(--font-heading) !important;
    font-size: clamp(22px, 2.4vw, 32px) !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em !important;
    color: var(--teal) !important;
}

/* ── FOUNDERS ─────────────────────────────────────────── */
.adm-founders .adm-founders-block {
    display: grid !important;
    grid-template-columns: 1.3fr 1fr !important;
    gap: clamp(32px, 4vw, 64px) !important;
    align-items: start;
}

@media (max-width: 900px) {
    .adm-founders .adm-founders-block {
        grid-template-columns: 1fr !important;
    }
}

.adm-founders-quote {
    padding: 32px !important;
    border-left: 2px solid var(--teal) !important;
    background: rgba(47, 184, 160, 0.04) !important;
}

.adm-founders-quote p {
    color: var(--ink) !important;
    font-size: clamp(16px, 1.5vw, 19px) !important;
    line-height: 1.7 !important;
    font-style: italic !important;
    margin-bottom: 14px !important;
}

.adm-founders-quote strong {
    color: var(--orange) !important;
    font-weight: 500 !important;
    font-style: normal;
}

.adm-founders-attr {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--ink-muted) !important;
    font-style: normal !important;
    margin-top: 24px !important;
}

.adm-founders-facts {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    background: rgba(30, 41, 59, 0.36) !important;
}

.adm-fact-row {
    padding: 20px 24px !important;
    border-bottom: 1px solid var(--hairline-faint) !important;
}

.adm-fact-row:last-child {
    border-bottom: none !important;
}

.adm-fact-row .adm-fact-label {
    color: var(--ink) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin: 0 0 4px !important;
}

.adm-fact-row .adm-fact-sub {
    color: var(--ink-muted) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* ── FINAL CTA ────────────────────────────────────────── */
.adm-final-cta .adm-final-cta-buttons {
    gap: 12px !important;
}

/* V4 HOME adm-* — end */


/* =========================================================
   V4 UNIVERSAL BUTTON SHAPE — Swiss discipline, 4px radius,
   no pills, no shadows, no transforms. Applies to every
   button class site-wide. Header buttons (inline custom
   colors on .adamiro-header-btn) keep their own treatment.
   ========================================================= */

button:not(.adamiro-header-btn):not(.user-badge-trigger):not(.adam-select-trigger):not(.sidebar-close):not(.header-search-toggle):not(.nav-hamburger):not(.mobile-sidebar-trigger):not(.nav-drawer-item):not([class*="acp-"]):not([class*="asd-"]):not([class*="cky-"]):not([class*="adm-mp-"]):not([class*="adm-media-picker"]),
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-outline,
.btn-hairline,
.btn-sm,
.btn-lg,
.btn-arrow,
.btn-hero-primary,
.btn-hero-outline,
.adm-btn-primary,
.adm-btn-secondary,
.adm-btn-primary>.wp-block-button__link,
.adm-btn-secondary>.wp-block-button__link,
.wp-block-button__link,
.wp-element-button,
a.button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.ac-btn,
.adamiro-plan-gate__cta,
.cta-actions a,
.cta-actions button,
.page-hero-ctas .btn,
.page-hero-ctas a {
    border-radius: var(--radius-full) !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
    transition: background var(--transition-fast) ease, color var(--transition-fast) ease, border-color var(--transition-fast) ease !important;
}

/* Size floor for everything but sm variants */
.btn:not(.btn-sm),
.wp-block-button__link:not(.btn-sm),
.wp-element-button:not(.btn-sm),
a.button:not(.btn-sm),
input[type="submit"]:not(.btn-sm),
.ac-btn,
.adm-btn-primary>.wp-block-button__link,
.adm-btn-secondary>.wp-block-button__link {
    padding: 12px 22px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

/* Primary intent — default to teal; orange-CTA override stays
   for .btn-primary outside .page-hero (rule earlier in file). */
.wp-block-button:not([class*="is-style-"]) .wp-block-button__link,
.wp-block-button.is-style-fill .wp-block-button__link,
.adm-btn-primary .wp-block-button__link,
.btn-hero-primary,
a.button:not(.ac-btn-text):not(.btn-ghost):not(.btn-hairline):not(.btn-outline) {
    background: var(--teal) !important;
    color: var(--navy-deep) !important;
    border: 1px solid var(--teal) !important;
}

.wp-block-button:not([class*="is-style-"]) .wp-block-button__link:hover,
.wp-block-button.is-style-fill .wp-block-button__link:hover,
.adm-btn-primary .wp-block-button__link:hover,
.btn-hero-primary:hover,
a.button:not(.ac-btn-text):not(.btn-ghost):not(.btn-hairline):not(.btn-outline):hover {
    background: transparent !important;
    color: var(--teal) !important;
    border-color: var(--teal) !important;
}

/* Ghost / outline / hairline — shared treatment */
.btn-ghost,
.btn-outline,
.btn-hairline,
.btn-hero-outline,
.wp-block-button.is-style-outline .wp-block-button__link,
.adm-btn-secondary .wp-block-button__link {
    background: transparent !important;
    color: var(--ink) !important;
    border: 1px solid var(--hairline) !important;
}

.btn-ghost:hover,
.btn-outline:hover,
.btn-hairline:hover,
.btn-hero-outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.adm-btn-secondary .wp-block-button__link:hover {
    border-color: var(--teal) !important;
    color: var(--teal) !important;
    background: transparent !important;
}

/* Size floor for buttons inside .page-hero-ctas / cta-actions */
.page-hero-ctas .btn,
.page-hero-ctas a,
.cta-actions .btn,
.cta-actions a,
.cta-actions button,
.adm-final-cta-buttons a,
.adm-final-cta-buttons button {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 12px 22px !important;
    font-size: 14px !important;
}

/* Native <button> inside forms — disciplined default */
form button[type="submit"],
form input[type="submit"] {
    background: var(--teal) !important;
    color: var(--navy-deep) !important;
    border: 1px solid var(--teal) !important;
    padding: 12px 22px !important;
    cursor: pointer !important;
}

form button[type="submit"]:hover,
form input[type="submit"]:hover {
    background: transparent !important;
    color: var(--teal) !important;
}


/* =========================================================
   V4 MARKETING PAGES — /products, /about, /contact
   Keep all copy; restyle containers, cards, forms.
   ========================================================= */

/* ── /products generic sections ───────────────────────── */
.product-section {
    padding: clamp(64px, 8vw, 120px) clamp(20px, 5vw, 40px) !important;
    background: var(--navy) !important;
    color: var(--ink-body) !important;
}

.product-section+.product-section {
    border-top: 1px solid var(--hairline) !important;
}

.product-section--closing {
    background: var(--navy-deep) !important;
    border-top: 1px solid var(--hairline) !important;
    text-align: center;
}

.product-section h1,
.product-section h2 {
    color: var(--ink) !important;
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em !important;
}

.product-section h3 {
    color: var(--ink) !important;
    font-family: var(--font-heading) !important;
    font-weight: 500 !important;
}

.product-section p {
    color: var(--ink-body) !important;
    line-height: 1.6 !important;
}

.product-features {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 1px !important;
    background: var(--hairline) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
}

.product-features>* {
    background: rgba(30, 41, 59, 0.36) !important;
    padding: 32px !important;
}


/* ── /about sections ──────────────────────────────────── */
body .site-main .section,
body .site-main .section.section-dark {
    background: var(--navy) !important;
    padding: clamp(64px, 8vw, 120px) clamp(20px, 5vw, 40px) !important;
    color: var(--ink-body) !important;
}

body .site-main .section.section-light {
    background: var(--cream) !important;
    color: var(--ink-dark) !important;
}

body .site-main .section.section-light h1,
body .site-main .section.section-light h2,
body .site-main .section.section-light h3 {
    color: var(--ink-dark) !important;
}

body .site-main .section.section-light p,
body .site-main .section.section-light li {
    color: var(--ink-soft) !important;
}

.section-header {
    max-width: 860px;
    margin: 0 auto 48px !important;
    text-align: center;
}

.section-header h2 {
    font-family: var(--font-heading) !important;
    font-size: clamp(32px, 4vw, 56px) !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
    margin: 0 0 16px !important;
}

.section-header p {
    font-size: clamp(16px, 1.3vw, 19px) !important;
    line-height: 1.6 !important;
}

/* .feature-card, .value-card — matte V4 card */
.feature-card,
.value-card {
    background: rgba(30, 41, 59, 0.36) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    padding: 32px !important;
    box-shadow: none !important;
    transition: border-color var(--transition-fast) ease !important;
}

.feature-card:hover,
.value-card:hover {
    border-color: var(--hairline-strong) !important;
}

.section-light .feature-card,
.section-light .value-card {
    background: #FFFFFF !important;
    border-color: rgba(11, 20, 38, 0.12) !important;
}

.feature-card-icon {
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md) !important;
    background: rgba(47, 184, 160, 0.1) !important;
    color: var(--teal) !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
}

.feature-card h3,
.value-card h3 {
    font-family: var(--font-heading) !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    color: var(--ink) !important;
    margin: 0 0 12px !important;
}

.section-light .feature-card h3,
.section-light .value-card h3 {
    color: var(--ink-dark) !important;
}

.feature-card p,
.value-card p {
    color: var(--ink-body) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

.section-light .feature-card p,
.section-light .value-card p {
    color: var(--ink-soft) !important;
}

/* .cta-section / .cta-actions — page-end CTA band */
.cta-section {
    background: var(--navy-deep) !important;
    padding: clamp(64px, 8vw, 120px) clamp(20px, 5vw, 40px) !important;
    text-align: center;
    border-top: 1px solid var(--hairline) !important;
}

.cta-section h2 {
    font-family: var(--font-heading) !important;
    font-size: clamp(28px, 3.5vw, 48px) !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em !important;
    color: var(--ink) !important;
    max-width: 720px;
    margin: 0 auto 20px !important;
}

.cta-section p {
    color: var(--ink-body) !important;
    font-size: clamp(16px, 1.4vw, 19px) !important;
    max-width: 640px;
    margin: 0 auto 32px !important;
}

.cta-actions {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}


/* ── /contact form (.ac-* classes) ────────────────────── */
/* .adm-con-hero-note/.sub — typography now lives in the legacy
   hero alias block alongside .page-hero p, without !important. */

.ac-card {
    background: rgba(30, 41, 59, 0.36) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    padding: clamp(28px, 3vw, 48px) !important;
    box-shadow: none !important;
}

.ac-header {
    margin-bottom: 32px !important;
}

.ac-header h2,
.ac-header h3 {
    font-family: var(--font-heading) !important;
    font-size: clamp(22px, 2.4vw, 30px) !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    color: var(--ink) !important;
    margin: 0 0 8px !important;
}

.ac-subtitle {
    color: var(--ink-body) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.ac-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.ac-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 20px !important;
}

.ac-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.ac-label {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--ink-body) !important;
}

.ac-optional {
    color: var(--ink-muted) !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-left: 6px;
}

.ac-req {
    color: var(--coral-deep) !important;
    margin-left: 2px;
}

.ac-input,
.ac-textarea,
.ac-select,
input.ac-input,
textarea.ac-input,
select.ac-input {
    background: var(--navy-surface) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--ink) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 14px !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    transition: border-color var(--transition-fast) ease !important;
}

.ac-input:focus,
.ac-textarea:focus,
.ac-select:focus {
    border-color: var(--teal) !important;
    outline: none !important;
    box-shadow: 0 0 0 1px var(--teal) !important;
}

.ac-textarea {
    min-height: 140px !important;
    resize: vertical;
}

.ac-field--consent {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

.ac-checkbox {
    width: 18px !important;
    height: 18px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: var(--navy-surface) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-sm) !important;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
    transition: background var(--transition-fast) ease, border-color var(--transition-fast) ease;
    position: relative;
}

.ac-checkbox:checked {
    background: var(--teal) !important;
    border-color: var(--teal) !important;
}

.ac-checkbox:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid var(--navy-deep);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.ac-check-box {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ac-consent-label,
.ac-consent-text {
    color: var(--ink-body) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.ac-consent-text a {
    color: var(--teal) !important;
    text-decoration: none;
    border-bottom: 1px solid var(--hairline);
}

.ac-err {
    color: var(--coral-deep) !important;
    font-size: 12px !important;
    margin: 0 !important;
}

.ac-error-banner {
    background: rgba(184, 90, 53, 0.08) !important;
    border: 1px solid var(--coral-deep) !important;
    border-radius: var(--radius-md) !important;
    padding: 14px 18px !important;
    margin-bottom: 16px;
}

.ac-error-banner-msg {
    color: var(--coral-deep) !important;
    font-size: 14px !important;
    margin: 0 !important;
}

.ac-actions {
    display: flex !important;
    align-items: center;
    gap: 14px !important;
    margin-top: 8px;
    flex-wrap: wrap;
}

.ac-btn {
    background: var(--teal) !important;
    color: var(--navy-deep) !important;
    border: 1px solid var(--teal) !important;
    padding: 12px 24px !important;
    cursor: pointer !important;
    font-size: 14px !important;
}

.ac-btn:hover {
    background: transparent !important;
    color: var(--teal) !important;
}

.ac-captcha-notice {
    color: var(--ink-muted) !important;
    font-size: 11px !important;
    font-family: var(--font-mono) !important;
    letter-spacing: 0.05em;
    margin-top: 4px !important;
}

/* V4 marketing pages — end */


/* =========================================================
   V4 FIX — kill legacy dark hover on cream approach steps
   The V3 rule at ~5752 sets bg: var(--navy-55) on hover,
   flipping cream rows to dark navy and burning the dark
   step-name text. Override with a subtle cream lift.
   ========================================================= */

.is-mood-approach .adm-approach-step:hover,
.adm-approach .adm-approach-step:hover {
    background: rgba(255, 255, 255, 0.85) !important;
}

.is-mood-approach .adm-approach-step:hover .adm-step-name,
.adm-approach .adm-approach-step:hover .adm-step-name {
    color: var(--ink-dark) !important;
}

.is-mood-approach .adm-approach-step:hover .adm-step-type,
.adm-approach .adm-approach-step:hover .adm-step-type {
    color: var(--sage-deep) !important;
}

.is-mood-approach .adm-approach-step:hover .adm-step-verb,
.adm-approach .adm-approach-step:hover .adm-step-verb {
    color: var(--coral-deep) !important;
}

.is-mood-approach .adm-approach-step:hover .adm-step-desc,
.adm-approach .adm-approach-step:hover .adm-step-desc {
    color: var(--ink-soft) !important;
}

/* V4 approach-step hover fix — end */


/* =========================================================
   V4 PRODUCT PAGES — feature comparison table + modal
   .adm-pp-* classes are already V4-styled (see V4 SWISS
   OVERRIDES — product pages earlier in this file). Here
   we catch the two subsystems that weren't covered.
   ========================================================= */

/* ── .aft-* feature comparison table ──────────────────── */
.adamiro-plan-features-table {
    --aft-border: var(--hairline);
    --aft-muted: var(--ink-muted);
    --aft-yes: var(--teal);
    background: transparent !important;
    color: var(--ink-body) !important;
    padding: clamp(40px, 5vw, 80px) clamp(20px, 3vw, 40px) !important;
}

.adamiro-plan-features-table .aft-heading {
    font-family: var(--font-heading) !important;
    font-size: clamp(24px, 2.4vw, 32px) !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    color: var(--ink) !important;
    margin: 0 0 24px !important;
    text-align: center;
}

.adamiro-plan-features-table .aft-scroll {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    overflow-x: auto;
    background: rgba(30, 41, 59, 0.36);
}

.adamiro-plan-features-table .aft-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-family: var(--font-body) !important;
    color: var(--ink-body) !important;
}

.adamiro-plan-features-table .aft-table th,
.adamiro-plan-features-table .aft-table td {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--hairline-faint) !important;
    text-align: left;
    vertical-align: top;
}

.adamiro-plan-features-table .aft-table thead th {
    font-family: var(--font-mono) !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--teal) !important;
    border-bottom: 1px solid var(--hairline) !important;
    background: rgba(47, 184, 160, 0.04);
}

.adamiro-plan-features-table .aft-feature strong {
    display: block;
    font-weight: 500 !important;
    color: var(--ink) !important;
    margin-bottom: 4px;
}

.adamiro-plan-features-table .aft-feature small {
    color: var(--ink-muted) !important;
    font-size: 12px;
    line-height: 1.4;
}

.adamiro-plan-features-table .aft-desc {
    color: var(--ink-muted) !important;
    font-size: 13px !important;
    line-height: 1.5;
    max-width: 320px;
}

.adamiro-plan-features-table .aft-plan-col,
.adamiro-plan-features-table .aft-cell {
    text-align: center;
    color: var(--ink) !important;
}

.adamiro-plan-features-table .aft-yes {
    color: var(--teal) !important;
    font-weight: 500;
    font-size: 18px;
}

.adamiro-plan-features-table .aft-no {
    color: var(--ink-faint) !important;
}

.adamiro-plan-features-table .aft-row-cost td,
.adamiro-plan-features-table .aft-row-allowance td {
    background: rgba(47, 184, 160, 0.06) !important;
}

.adamiro-plan-features-table .aft-row-cost td:first-child,
.adamiro-plan-features-table .aft-row-allowance td:first-child {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--teal);
}

.adamiro-plan-features-table .aft-row-allowance td strong {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1;
    font-weight: 500;
    color: var(--ink) !important;
}


/* ── Adamiro modal (sign-in / checkout) ───────────────── */
.adamiro-modal-overlay {
    background: rgba(5, 11, 23, 0.82) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.adamiro-modal-content,
.adamiro-modal-content.glassmorphism {
    background: var(--navy-surface) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--ink) !important;
}

.adamiro-modal-body {
    color: var(--ink-body) !important;
    padding: clamp(24px, 3vw, 40px) !important;
}

.adamiro-modal-body h1,
.adamiro-modal-body h2,
.adamiro-modal-body h3 {
    color: var(--ink) !important;
    font-family: var(--font-heading) !important;
    font-weight: 500 !important;
}

.adamiro-modal-close {
    background: transparent !important;
    border: 1px solid var(--hairline) !important;
    color: var(--ink-body) !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--radius-md) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color var(--transition-fast) ease, color var(--transition-fast) ease !important;
}

.adamiro-modal-close:hover {
    border-color: var(--teal) !important;
    color: var(--teal) !important;
}


/* ── Extra polish: adm-pp-* gaps ──────────────────────── */
/* adm-pp-output-* (structured output cards on Signals) */
.adm-pp-output-header {
    background: rgba(47, 184, 160, 0.04) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    padding: 20px 24px !important;
    margin-bottom: 12px !important;
}

.adm-pp-output-item {
    background: rgba(30, 41, 59, 0.36) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-md) !important;
    padding: 20px 24px !important;
    gap: 16px !important;
}

.adm-pp-output-item+.adm-pp-output-item {
    margin-top: 8px;
}

/* adm-pp-steps (numbered step list) */
.adm-pp-steps {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.adm-pp-step {
    background: rgba(30, 41, 59, 0.36);
    padding: 28px 32px;
    gap: 24px;
    align-items: flex-start;
}

.adm-pp-step-body {
    flex: 1;
}

.adm-pp-step-body h3,
.adm-pp-step-body h4 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 8px;
}

.adm-pp-step-body p {
    color: var(--ink-body);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* adm-pp-card — generic product page card */
.adm-pp-card {
    background: rgba(30, 41, 59, 0.36);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    padding: clamp(24px, 3vw, 40px);
    box-shadow: none;
}

/* adm-pp-section — generic section wrapper (full-width band) */
.adm-pp-section {
    padding: clamp(64px, 8vw, 120px) clamp(20px, 5vw, 40px) !important;
}

.adm-pp-section+.adm-pp-section {
    border-top: 1px solid var(--hairline) !important;
}

.adm-pp-section-header {
    max-width: 860px;
    margin: 0 auto 48px !important;
    text-align: center;
}

/* adm-pp-cta — page-end CTA band */
.adm-pp-cta {
    background: var(--navy-deep) !important;
    border-top: 1px solid var(--hairline) !important;
    padding: clamp(64px, 8vw, 120px) clamp(20px, 5vw, 40px) !important;
    text-align: center;
}

.adm-pp-cta-sub {
    color: var(--ink-body) !important;
    font-size: clamp(16px, 1.4vw, 19px) !important;
    max-width: 640px;
    margin: 12px auto 32px !important;
}

.adm-pp-benchmark-support {
    color: var(--ink-muted) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* adm-pp-loss-intro (the "what you're losing" section) */
.adm-pp-loss-intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto !important;
}

/* V4 product pages — end */
/* ========================================================================
 * Home V5 (2026-04-20) — Wake-up-call redesign.
 * Sections: stakes / how / authority / boardroom / final-cta tweaks.
 * Uses existing is-mood-problem / is-mood-statement / is-mood-approach
 * / is-mood-hero rules for base palette; adds layout + component tuning.
 * ======================================================================== */

/* ---- Section 2 · The Stakes (two-column, problem mood) ---- */
.adm-stakes-grid {
    display: grid;
    grid-template-columns: minmax(280px, 420px) 1fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: stretch;
}

.adm-stakes-visual {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: clamp(32px, 5vw, 64px) !important;
    border: 1px solid rgba(241, 245, 249, 0.08);
    background: rgba(11, 20, 38, 0.4);
    aspect-ratio: 4 / 5;
    position: relative;
}

.adm-stakes-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    border-left: 2px solid var(--coral-deep, #B85A35);
    pointer-events: none;
}

.adm-stakes-pct {
    font-size: clamp(88px, 14vw, 180px) !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    margin: 0 !important;
    color: var(--coral-deep, #B85A35);
}

.adm-stakes-pct-label {
    font-size: clamp(14px, 1.2vw, 16px) !important;
    line-height: 1.4 !important;
    margin-top: 28px !important;
    max-width: 280px;
    opacity: 0.9;
}

.adm-stakes-source {
    font-family: "JetBrains Mono", ui-monospace, monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    margin-top: auto !important;
    padding-top: clamp(32px, 5vw, 64px) !important;
    opacity: 0.5;
}

.adm-stakes-text {
    align-self: center;
}

.adm-stakes-lede {
    font-size: clamp(18px, 1.5vw, 22px) !important;
    line-height: 1.5 !important;
    margin-top: 32px !important;
    opacity: 0.9;
    max-width: 580px;
}

.adm-stakes-list.wp-block-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 40px 0 0 !important;
    max-width: 580px;
}

.adm-stakes-list li {
    padding: 20px 0 !important;
    border-top: 1px solid rgba(241, 245, 249, 0.1);
    font-size: 16px;
    line-height: 1.55;
}

.adm-stakes-list li:last-child {
    border-bottom: 1px solid rgba(241, 245, 249, 0.1);
}

.adm-stakes-list strong {
    font-weight: 500;
    color: var(--coral-deep, #B85A35);
    margin-right: 6px;
}

@media (max-width: 820px) {
    .adm-stakes-grid {
        grid-template-columns: 1fr;
    }

    .adm-stakes-visual {
        aspect-ratio: auto;
        padding: 48px 32px !important;
    }
}

/* ---- Section 3 · The System ("how" — 3 cards, statement mood) ---- */
.adm-how-lede {
    max-width: 680px;
    font-size: clamp(18px, 1.5vw, 22px) !important;
    line-height: 1.5 !important;
    margin-top: 32px !important;
    opacity: 0.88;
}

.adm-how-cards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px !important;
}

.adm-how-card {
    padding: clamp(32px, 4vw, 56px) clamp(28px, 3vw, 48px) !important;
    border: 1px solid rgba(241, 245, 249, 0.1);
    background: rgba(5, 11, 23, 0.55);
    display: flex !important;
    flex-direction: column !important;
    min-height: 400px;
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.adm-how-card:hover {
    border-color: var(--teal, #2FB8A0);
    background: rgba(5, 11, 23, 0.8);
    transform: translateY(-2px);
}

.adm-how-num {
    font-family: "JetBrains Mono", ui-monospace, monospace !important;
    font-size: 12px !important;
    letter-spacing: 0.18em !important;
    color: var(--teal, #2FB8A0);
    margin: 0 0 32px !important;
    opacity: 0.9;
}

.adm-how-eyebrow {
    font-family: "JetBrains Mono", ui-monospace, monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    margin: 0 0 16px !important;
    opacity: 0.9;
}

.adm-how-card--signals .adm-how-eyebrow {
    color: var(--orange-warm, #EC8B4C);
}

.adm-how-card--voice .adm-how-eyebrow {
    color: var(--teal, #2FB8A0);
}

.adm-how-card--tank .adm-how-eyebrow {
    color: var(--sage, #8AA686);
}

.adm-how-h3 {
    font-size: clamp(24px, 2.1vw, 32px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 20px !important;
    color: var(--ink, #F1F5F9) !important;
}

.adm-how-h3 em {
    font-style: italic;
    font-weight: 400;
}

.adm-how-card--signals .adm-how-h3 em {
    color: var(--orange-warm, #EC8B4C);
}

.adm-how-card--voice .adm-how-h3 em {
    color: var(--teal, #2FB8A0);
}

.adm-how-card--tank .adm-how-h3 em {
    color: var(--sage, #8AA686);
}

.adm-how-body {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    opacity: 0.82;
    margin-top: auto !important;
}

@media (max-width: 960px) {
    .adm-how-cards {
        grid-template-columns: 1fr;
    }

    .adm-how-card {
        min-height: auto;
    }
}

/* ---- Section 4 · The Advantage (narrow statement bar) ---- */
.adm-authority {
    text-align: center;
    background: var(--navy-deep, #050B17) !important;
    border-top: 1px solid rgba(47, 184, 160, 0.18);
    border-bottom: 1px solid rgba(47, 184, 160, 0.18);
}

.adm-authority>.adm-s-label {
    display: block;
    text-align: center;
}

.adm-authority-equation {
    font-size: clamp(30px, 4.8vw, 60px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    font-weight: 300 !important;
    margin: 32px 0 24px !important;
}

.adm-authority-equation em {
    font-style: italic;
    font-weight: 400;
    margin-right: 0.25em;
}

.adm-authority-equation em:nth-of-type(1) {
    color: var(--orange-warm, #EC8B4C);
}

.adm-authority-equation em:nth-of-type(2) {
    color: var(--teal, #2FB8A0);
}

.adm-authority-equation em:nth-of-type(3) {
    color: var(--ink, #F1F5F9);
}

.adm-authority-sub {
    font-size: clamp(16px, 1.3vw, 18px) !important;
    line-height: 1.55 !important;
    max-width: 720px;
    margin: 0 auto !important;
    opacity: 0.7;
}

/* ---- Section 5 · The Boardroom (approach mood — sage/cream) ---- */
.adm-boardroom-lede {
    font-size: clamp(19px, 1.6vw, 23px) !important;
    line-height: 1.45 !important;
    margin-top: 28px !important;
    max-width: 760px;
    opacity: 0.85;
}

.adm-boardroom-blocks {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 48px) !important;
}

.adm-boardroom-block {
    padding: clamp(28px, 3vw, 40px) 0 0 !important;
    border-top: 1px solid rgba(11, 20, 38, 0.18);
}

.adm-boardroom-num {
    font-family: "JetBrains Mono", ui-monospace, monospace !important;
    font-size: 12px !important;
    letter-spacing: 0.18em !important;
    color: var(--coral-deep, #B85A35) !important;
    margin: 0 0 16px !important;
    opacity: 0.9;
}

.adm-boardroom-h3 {
    font-size: clamp(20px, 1.8vw, 26px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 14px !important;
}

.adm-boardroom-block p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

@media (max-width: 860px) {
    .adm-boardroom-blocks {
        grid-template-columns: 1fr;
        gap: 0 !important;
    }

    .adm-boardroom-block {
        padding: 24px 0 !important;
    }
}

/* ---- Section 6 · Final CTA tweaks (extends existing .adm-final-cta) ---- */
.adm-final-cta {
    text-align: center;
}

.adm-final-cta>.adm-s-label {
    display: block;
    text-align: center;
    margin-bottom: 24px;
}

.adm-final-cta-h em {
    font-style: italic;
    color: var(--ink, #F1F5F9);
    font-weight: 400;
}

.adm-final-cta-sub {
    font-size: clamp(17px, 1.4vw, 20px) !important;
    line-height: 1.55 !important;
    max-width: 640px;
    margin: 24px auto 0 !important;
    opacity: 0.8;
}

.adm-final-cta .wp-block-buttons.adm-final-cta-buttons {
    justify-content: center !important;
}

/* ---- /Home V5 ---- */

/* ========================================================================
 * Home V5 — mobile polish (2026-04-21)
 * Forces comfortable type sizes on <= 820px viewports. Many of the
 * V5 headings rely on clamp() whose lower bound is rounded to small
 * on narrow screens; these rules enforce a legible floor and collapse
 * multi-column grids into a readable stack.
 * ======================================================================== */

@media (max-width: 820px) {

    /* ---- Section 2 · Stakes — stack + tune sizes ---- */
    .adm-stakes .adm-stakes-grid {
        grid-template-columns: 1fr !important;
        gap: clamp(32px, 6vw, 56px) !important;
    }

    .adm-stakes .adm-stakes-visual {
        aspect-ratio: auto !important;
        padding: clamp(32px, 8vw, 56px) clamp(24px, 6vw, 40px) !important;
        min-height: 260px;
    }

    .adm-stakes .adm-stakes-pct {
        font-size: clamp(72px, 22vw, 128px) !important;
    }

    .adm-stakes .adm-stakes-pct-label {
        font-size: 15px !important;
        margin-top: 20px !important;
    }

    .adm-stakes .adm-stakes-lede {
        font-size: 17px !important;
        margin-top: 24px !important;
    }

    .adm-stakes .adm-stakes-list li {
        font-size: 15px !important;
        padding: 16px 0 !important;
    }

    /* ---- Section 3 · How — stack 3 cards ---- */
    .adm-how .adm-how-cards {
        grid-template-columns: 1fr !important;
        gap: 2px !important;
    }

    .adm-how .adm-how-card {
        min-height: auto !important;
        padding: 36px 28px !important;
    }

    .adm-how .adm-how-num {
        margin-bottom: 20px !important;
    }

    .adm-how .adm-how-h3,
    .adm-how .wp-block-heading.adm-how-h3 {
        font-size: 26px !important;
        line-height: 1.2 !important;
        margin-bottom: 14px !important;
    }

    .adm-how .adm-how-body {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    .adm-how .adm-how-lede {
        font-size: 17px !important;
        margin-top: 24px !important;
    }

    /* ---- Section 4 · Authority — scale equation down sanely ---- */
    .adm-authority .adm-authority-equation {
        font-size: clamp(26px, 7.5vw, 44px) !important;
        line-height: 1.2 !important;
        margin: 24px 0 20px !important;
    }

    .adm-authority .adm-authority-sub {
        font-size: 15px !important;
    }

    /* ---- Section 5 · Boardroom — stack + size ---- */
    .adm-boardroom .adm-boardroom-blocks {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .adm-boardroom .adm-boardroom-block {
        padding: 28px 0 !important;
    }

    .adm-boardroom .adm-boardroom-lede {
        font-size: 18px !important;
        margin-top: 20px !important;
    }

    .adm-boardroom .adm-boardroom-h3,
    .adm-boardroom .wp-block-heading.adm-boardroom-h3 {
        font-size: 22px !important;
        margin-bottom: 12px !important;
    }

    .adm-boardroom .adm-boardroom-block p {
        font-size: 15px !important;
    }

    /* ---- Section 6 · Final CTA — keep it punchy ---- */
    .adm-final-cta .adm-final-cta-h,
    .adm-final-cta .wp-block-heading.adm-final-cta-h {
        font-size: clamp(32px, 9vw, 48px) !important;
        line-height: 1.1 !important;
    }

    .adm-final-cta .adm-final-cta-sub {
        font-size: 16px !important;
    }

    /* ---- Shared · Section H2 (the stakes / system / boardroom) ---- */
    .adm-stakes .adm-s-h2,
    .adm-how .adm-s-h2,
    .adm-boardroom .adm-s-h2,
    .adm-stakes .wp-block-heading.adm-s-h2,
    .adm-how .wp-block-heading.adm-s-h2,
    .adm-boardroom .wp-block-heading.adm-s-h2 {
        font-size: clamp(30px, 8vw, 44px) !important;
        line-height: 1.12 !important;
        letter-spacing: -0.02em !important;
    }

    /* ---- Shared · Section paddings reduced ---- */
    .adm-stakes,
    .adm-how,
    .adm-authority,
    .adm-boardroom,
    .adm-final-cta {
        padding-top: clamp(64px, 12vw, 96px) !important;
        padding-bottom: clamp(64px, 12vw, 96px) !important;
        padding-left: clamp(20px, 6vw, 32px) !important;
        padding-right: clamp(20px, 6vw, 32px) !important;
    }
}

/* ---- Extra small phones (<=480px) — tighten further ---- */
@media (max-width: 480px) {
    .adm-stakes .adm-stakes-pct {
        font-size: clamp(64px, 20vw, 96px) !important;
    }

    .adm-how .adm-how-h3 {
        font-size: 24px !important;
    }

    .adm-authority .adm-authority-equation {
        font-size: clamp(24px, 7vw, 36px) !important;
    }

    .adm-final-cta .adm-final-cta-h {
        font-size: clamp(30px, 9vw, 40px) !important;
    }

    .adm-final-cta .adm-final-cta-buttons {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .adm-final-cta .adm-final-cta-buttons .wp-block-button {
        width: 100%;
    }
}

/* ============================================================
 * V4 page sections — used by patterns/page-about.php and
 * patterns/page-products.php. Each section wraps a wp:cover so
 * the editor can attach background images, switch overlay colours
 * (palette = navy / navy-deep / navy-lift / navy-surface / cream /
 * orange / sage / blue-deep …), and adjust dim ratio (tint).
 *
 * Default state with no image renders the overlay as solid colour.
 * ============================================================ */

/* About + Products page heroes use .adm-con-hero (NOT .adm-hero) — the
   home `.adm-hero` reserves ::before AND ::after for its teal+petrol
   radial glows, which means the [class*="is-style-mood-tint-"]::after
   overlay system can't paint there (.adm-hero is intentionally excluded;
   see line 9521 NOTE). `.adm-con-hero` keeps the same hero layout +
   ::before mood cloud, but leaves ::after free, so editor-applied tint
   presets (Tint · Dim / Warm / Trust / Serious / Drama / Calm /
   Editorial / Duotone) actually paint over the background image. */

/* Generic V4 section frame. Sections are core/group blocks (so the editor
   gets all the registered Style variations: Matte Card / Hairline Band /
   Data Panel / Grid Overlay / Bento + every Mood · X / Tint · Y). Padding
   and alignment live here; mood/tint classes own colour and accent. */
.adm-section {
    padding: clamp(72px, 9vw, 120px) clamp(20px, 5vw, 80px);
}

.adm-section--centered {
    text-align: center;
}

.adm-section--centered .wp-block-buttons {
    justify-content: center;
}

/* Eyebrow — already exists (is-style-eyebrow); keep .adm-eyebrow as a
   compatibility hook for non-style usages. */
.adm-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--teal);
    margin: 0 0 20px;
}

.adm-section-title {
    font-family: var(--font-body, 'Outfit'), sans-serif;
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 24px !important;
}

.adm-section-body {
    font-size: 17px;
    line-height: 1.65;
    margin: 0 0 16px !important;
}

.adm-section-body--narrow {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Grid wrappers — these are core/columns blocks. Spacing + responsive
   collapse live here; cards inside (the wp:group children) carry their
   own style variation (matte-card / hairline / data-panel) which the
   editor can swap. */
.adm-grid.wp-block-columns {
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 0;
}

.adm-grid--3.wp-block-columns,
.adm-grid--4.wp-block-columns {
    flex-wrap: wrap;
}

.adm-grid--3.wp-block-columns>.wp-block-column {
    flex-basis: calc(33.333% - 14px) !important;
    flex-grow: 1;
    min-width: 240px;
}

.adm-grid--4.wp-block-columns>.wp-block-column {
    flex-basis: calc(25% - 15px) !important;
    flex-grow: 1;
    min-width: 220px;
}

@media (max-width: 768px) {

    .adm-grid--3.wp-block-columns>.wp-block-column,
    .adm-grid--4.wp-block-columns>.wp-block-column {
        flex-basis: 100% !important;
    }
}

/* Card body — generic typography for any wp:group with .adm-card. The
   matte-card / hairline / data-panel chrome (bg + border + radius) comes
   from the registered block style — these rules only handle text. */
.adm-card.wp-block-group {
    height: 100%;
}

/* Per-card-type typography hooks */
.adm-principle-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--teal);
    margin: 0 0 14px;
}

.adm-principle-title,
.adm-founder-role,
.adm-value-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}

.adm-founder-role,
.adm-value-title {
    font-size: 18px;
}

.adm-principle-body,
.adm-founder-bio,
.adm-value-body {
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

.adm-founder-bio,
.adm-value-body {
    font-size: 14px;
    line-height: 1.55;
}

/* CTA section button row */
.adm-cta-buttons.wp-block-buttons {
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}

/* Per-product section overrides — wp:cover provides the bg, this
   strips the .adm-prod-section padding/colour assumptions from the
   legacy hero-band styling so the cover wraps evenly. */
.adm-prod-section.wp-block-cover {
    padding: clamp(72px, 9vw, 120px) clamp(20px, 5vw, 80px);
    align-items: stretch;
}

.adm-prod-section.wp-block-cover .wp-block-cover__inner-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
}

.adm-prod-section.wp-block-cover .adm-prod-grid-2.wp-block-columns {
    gap: clamp(32px, 5vw, 72px);
    margin: 0;
}

.adm-prod-section.wp-block-cover .adm-prod-name {
    color: var(--ink);
}

.adm-prod-section.wp-block-cover .adm-prod-tagline {
    color: var(--ink);
}

.adm-prod-section.wp-block-cover .adm-prod-body,
.adm-prod-section.wp-block-cover .adm-prod-features li {
    color: var(--ink-muted);
}

/* Per-product CTA button row inside a section */
.adm-prod-cta.wp-block-buttons {
    margin-top: 28px;
}

/* 1440×900 product screenshot frame */
.adm-prod-screenshot.wp-block-image {
    margin: 0;
    width: 100%;
}

.adm-prod-screenshot.wp-block-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border: 1px solid rgba(47, 184, 160, 0.18);
    border-radius: 12px;
    background: var(--navy-surface);
    display: block;
}

@media (max-width: 768px) {

    .adm-section,
    .adm-prod-section.wp-block-cover {
        padding: 64px 16px;
    }

    .adm-prod-section.wp-block-cover .adm-prod-grid-2.wp-block-columns {
        gap: 32px;
    }

    .adm-section-title {
        font-size: clamp(28px, 7vw, 36px);
    }
}

/* ============================================================
 * V4 stats strip — used by patterns/page-about.php for the
 * editorial stats row in the hero AND the mid-page stat insert.
 * Asymmetric weights, JetBrains Mono numerics, matte-card chrome
 * from the registered block style. NOT the hero-metric template
 * (no sparklines, no gradient accents, no symmetric 4-up grid).
 * ============================================================ */

.adm-stats-strip.wp-block-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(40px, 5vw, 64px);
    margin-bottom: 0;
    align-items: stretch;
}

.adm-stats-strip.wp-block-group>.adm-stat.wp-block-group {
    flex: 1 1 180px;
    min-width: 0;
}

.adm-stats-strip.wp-block-group>.adm-stat--wide.wp-block-group {
    flex: 1.5 1 280px;
}

.adm-stats-strip.wp-block-group>.adm-stat--narrow.wp-block-group {
    flex: 0.8 1 140px;
}

/* Inline insert — mid-page, no card chrome on the wrapper itself.
   Cells without is-style-matte-card render flat. Used between
   sections to "sprinkle" stats inside editorial flow. */
.adm-stats-strip--inline.wp-block-group {
    margin-top: 24px;
    gap: clamp(16px, 3vw, 40px);
}

.adm-stats-strip--inline.wp-block-group>.adm-stat.wp-block-group {
    background: transparent;
    border: 0;
    padding: 0;
    min-height: 0;
}

.adm-stat.wp-block-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(20px, 2vw, 28px);
    min-height: 140px;
    border-radius: 4px;
}

.adm-stat-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink, #F1F5F9);
    margin: 0 0 10px;
}

/* Non-numeric cells (e.g. "Sweden", "In stealth") — Outfit display weight
   to break the all-numeric grid feel and avoid the hero-metric template. */
.adm-stat-num--text {
    font-family: var(--font-body, 'Outfit'), sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.adm-stat-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--teal, #2FB8A0);
    margin: 0;
    line-height: 1.4;
}

.adm-stats-strip--inline .adm-stat-label {
    color: var(--ink-dim, #94A3B8);
}

@media (max-width: 768px) {

    .adm-stats-strip.wp-block-group>.adm-stat.wp-block-group,
    .adm-stats-strip.wp-block-group>.adm-stat--wide.wp-block-group,
    .adm-stats-strip.wp-block-group>.adm-stat--narrow.wp-block-group {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
    }

    .adm-stats-strip--inline.wp-block-group>.adm-stat.wp-block-group {
        flex: 1 1 calc(50% - 8px);
    }
}

@media (max-width: 480px) {

    .adm-stats-strip.wp-block-group>.adm-stat.wp-block-group,
    .adm-stats-strip.wp-block-group>.adm-stat--wide.wp-block-group,
    .adm-stats-strip.wp-block-group>.adm-stat--narrow.wp-block-group,
    .adm-stats-strip--inline.wp-block-group>.adm-stat.wp-block-group {
        flex: 1 1 100%;
    }
}

/* Editorial pull-quote inside Origin section. Display Outfit large,
   hairline rule above and below in teal alpha. */
.adm-pullquote {
    font-family: var(--font-body, 'Outfit'), sans-serif;
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin: clamp(28px, 4vw, 48px) 0;
    padding: clamp(24px, 3vw, 36px) 0;
    border-top: 1px solid rgba(47, 184, 160, 0.25);
    border-bottom: 1px solid rgba(47, 184, 160, 0.25);
    color: var(--ink, #F1F5F9);
}

/* Asymmetric 40/60 two-column for the Origin section. */
.adm-grid--asymmetric.wp-block-columns {
    gap: clamp(32px, 4vw, 72px);
    margin-top: 32px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.adm-grid--asymmetric.wp-block-columns>.wp-block-column:first-child {
    flex-basis: calc(40% - 36px) !important;
    flex-grow: 0;
    min-width: 240px;
}

.adm-grid--asymmetric.wp-block-columns>.wp-block-column:last-child {
    flex-basis: calc(60% - 36px) !important;
    flex-grow: 0;
    min-width: 280px;
}

@media (max-width: 768px) {

    .adm-grid--asymmetric.wp-block-columns>.wp-block-column:first-child,
    .adm-grid--asymmetric.wp-block-columns>.wp-block-column:last-child {
        flex-basis: 100% !important;
    }
}

/* ---- /Home V5 mobile polish ---- */