/* ===================================================
   NORDIC BREAD MASTERY — Landing Page Styles
   Design: Modern Nordic, warm & professional
   =================================================== */

/* --- CSS Custom Properties --- */
:root {
    /* Colors */
    --color-primary: #b8860b;
    --color-primary-light: #d4a84b;
    --color-primary-dark: #8b6508;
    --color-primary-rgb: 184, 134, 11;

    --color-dark: #050505;
    --color-dark-soft: #1a2030;
    --color-dark-medium: #2a3040;

    /* Instructor section top fade */
    --color-cream-top: #f5f3ef;
    --color-cream: #f6f4f0; /* #faf6f0 */
    --color-cream-dark: #f0e8d8;
    --color-warm-white: #fdfcfa;

    --color-text: #2c2c2c;
    --color-text-light: #5a5a5a;
    --color-text-muted: #8a8a8a;
    --color-text-on-dark: #e8e0d4;
    --color-text-on-dark-muted: #9a9a9a;

    --color-success: #4a7c59;
    --color-error: #c0392b;
    --color-border: #e5ddd0; /* #e5ddd0 */
    --color-border-dark: #DDD5C7; /* darker variant — used by curriculum "What's Inside" cards */

    /* Typography */
    --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Spacing */
    --section-padding: 128.1px;
    --container-width: 1278px;
    --container-narrow: 854.2px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Shadows */
    --shadow-sm: 0 2px 8.5px rgba(0,0,0,0.06);
    --shadow-md: 0 4.3px 21.4px rgba(0,0,0,0.08);
    --shadow-lg: 0 8.5px 42.7px rgba(0,0,0,0.12);
    --shadow-xl: 0 17.1px 64.1px rgba(0,0,0,0.16);

    /* Border Radius */
    --radius-sm: 6.4px;
    --radius-md: 12.8px;
    --radius-lg: 21.4px;
    --radius-xl: 29.9px;

    /* Full-screen popups: consistent horizontal gutter (+ safe area on notched devices) */
    --nbm-popup-pad-left: max(15px, env(safe-area-inset-left, 0px));
    --nbm-popup-pad-right: max(15px, env(safe-area-inset-right, 0px));
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: 18.2px;
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-warm-white);
    overflow-x: hidden;
}

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

/* Duplicate text blocks: show one on desktop, the other on mobile (breakpoint matches site nav) */
.text-view-mobile {
    display: none;
}
@media (max-width: 739px) {
    .text-view-desktop {
        display: none !important;
    }
    .text-view-mobile {
        display: block !important;
    }
}

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

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

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

/* --- Section Base --- */
.section {
    padding: var(--section-padding) 0;
    position: relative;
}

.section-header {
    text-align: center;
    max-width: 832.8px;
    margin: 0 auto 76.9px;
}

.section-label {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 13.9px;
    font-weight: 600;
    letter-spacing: 2.7px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 17.1px;
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(34.2px, 4vw, 51.2px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
    margin-bottom: 21.4px;
}

.section-title em {
    color: var(--color-primary);
    font-style: italic;
}

.section-subtitle {
    font-size: 19.2px;
    line-height: 1.7;
    color: var(--color-text-light);
    max-width: 683.3px;
    margin: 0 auto;
}

.lead-text {
    font-size: 20.3px;
    line-height: 1.75;
    color: var(--color-text-light);
    margin-bottom: 21.4px;
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10.7px;
    font-family: var(--font-body);
    font-size: 17.1px;
    font-weight: 600;
    padding: 14.9px 34.2px;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
    text-align: center;
}

.btn-primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6.4px 25.6px rgba(var(--color-primary-rgb), 0.35);
}

.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline:hover {
    background: var(--color-primary);
    color: #fff;
    transform: translateY(-2px);
}

.btn-ghost {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-color: rgba(255,255,255,0.25);
}

.btn-ghost:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
    color: #fff;
    transform: translateY(-2px);
}

.btn-lg {
    padding: 14px 20px;
    font-size: 18.2px;
}

.btn-block {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 19.2px 34.2px;
    font-size: 18.2px;
}

/* --- Scroll Animations --- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile: disable "fade/appear" scroll animations */
@media (max-width: 739px) {
    .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ===========================================================
   NAVIGATION
   =========================================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 17.1px 0;
    transition: all var(--transition-base);
}

.navbar.scrolled {
    background: rgba(2, 2, 2, 0.95);
    backdrop-filter: blur(12.8px);
    -webkit-backdrop-filter: blur(12.8px);
    padding: 10.7px 0;
    box-shadow: 0 2px 21.4px rgba(0,0,0,0.3);
}

.nav-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10.7px;
    text-decoration: none;
}

.logo-text {
    font-family: var(--font-heading);
    font-size: 21.4px;
    font-weight: 700;
    color: #fff;
}

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

.logo-tm {
    font-size: 0.65em;
    vertical-align: super;
    letter-spacing: 0;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 34.2px;
}

.nav-links a {
    font-size: 14.9px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color var(--transition-fast);
    letter-spacing: 0.3px;
}

.nav-links a:hover {
    color: #fff;
}

.nav-cta {
    font-family: var(--font-body);
    font-size: 14.9px;
    font-weight: 600;
    color: #fff;
    background: var(--color-primary);
    padding: 10.7px 25.6px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.nav-cta:hover {
    background: var(--color-primary-dark);
    color: #fff;
    transform: translateY(-1px);
}

.mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5.3px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4.3px;
}

.mobile-toggle span {
    display: block;
    width: 25.6px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: all var(--transition-base);
}

.nav-cta-mobile {
    display: none;
    font-family: var(--font-body);
    font-size: 14.9px;
    font-weight: 600;
    color: #fff;
    background: var(--color-primary);
    padding: 10.7px 25.6px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.nav-cta-mobile:hover {
    background: var(--color-primary-dark);
    color: #fff;
}


/* ===========================================================
   HERO
   =========================================================== */
.hero {
    position: relative;
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 128.1px 25.6px 53.4px;
    background: var(--color-dark);
}

/* Hero gradient layers — DISABLED.
   Only the solid `--color-dark` base on `.hero` is active.
   To re-enable: uncomment one or both blocks below. */

/* Layer 1: warm radial glows (brand-tinted ambient lighting) */
/*
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(var(--color-primary-rgb), 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(var(--color-primary-rgb), 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(100, 60, 20, 0.05) 0%, transparent 50%);
}
*/

/* Layer 2: vertical darkening overlay (top + bottom vignette) */
/*
.hero-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, 
        rgba(15,20,25, 0.3) 0%, 
        rgba(15,20,25, 0.1) 40%,
        rgba(15,20,25, 0.4) 100%);
}
*/

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 918.2px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8.5px;
    font-size: 13.9px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-primary-light);
    background: rgba(var(--color-primary-rgb), 0.1);
    border: 1px solid rgba(var(--color-primary-rgb), 0.2);
    padding: 8.5px 21.4px;
    border-radius: 106.8px;
    margin-bottom: 34.2px;
}

.badge-dot {
    width: 8.5px;
    height: 8.5px;
    background: var(--color-primary);
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(42.7px, 5.5vw, 76.9px);
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 29.9px;
    letter-spacing: -0.5px;
}

.hero-title em {
    color: var(--color-primary-light);
    font-style: italic;
}

.hero-subtitle {
    font-size: clamp(17.1px, 1.8vw, 20.3px);
    line-height: 1.75;
    color: rgba(255,255,255,0.7);
    margin-bottom: 47px;
    max-width: 768.7px;
    margin-left: auto;
    margin-right: auto;
}

.hero-cta-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17.1px;
    margin-bottom: 0;
    flex-wrap: wrap;
}

@media (min-width: 740px) {
    .hero-cta-group .btn-primary {
        min-width: 280px;
    }
}

.hero-trust-bar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: var(--color-dark);
    border-top: 0px solid rgba(255,255,255,0.06);
    padding: 17.1px 25.6px;
    margin-top: 42.7px;
}

.hero-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34.2px;
    flex-wrap: wrap;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8.5px;
    font-size: 14.9px;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
}

.trust-item svg {
    color: var(--color-primary-light);
    flex-shrink: 0;
}



/* ===========================================================
   HERO IMAGE SCROLLER
   =========================================================== */
.hero-scroller {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container-width);
    margin: 51.2px auto 0;
    overflow: hidden;
    padding: 0 24px;
    /* Tell the browser: vertical drags pan the page, horizontal drags
       are handled by JS (swipe-to-scroll with momentum). */
    touch-action: pan-y;
}

.hero-scroller-track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.hero-scroller-item {
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Fade overlays on left and right edges */
.hero-scroller-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 85.4px;
    z-index: 3;
    pointer-events: none;
}

.hero-scroller-fade--left {
    left: 0;
    background: linear-gradient(to right, var(--color-dark) 0%, transparent 100%);
}

.hero-scroller-fade--right {
    right: 0;
    background: linear-gradient(to left, var(--color-dark) 0%, transparent 100%);
}

@media (max-width: 739px) {
    /* Hero uses align-items:center; stretch + negative margins match .hero horizontal
       padding (20px) so full-bleed width never uses 100vw (avoids horizontal scroll). */
    .hero-scroller {
        align-self: stretch;
        margin-top: 32px;
        max-width: none;
        padding: 0;
        width: auto;
        margin-left: -20px;
        margin-right: -20px;
    }

    .hero-scroller-fade {
        width: 40px;
    }

    .hero-trust-bar {
        align-self: stretch;
        width: auto;
        max-width: none;
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 28px;
        padding: 14px 20px;
    }
}


/* ===========================================================
   PROBLEM SECTION
   =========================================================== */
.section-problem {
    background: var(--color-warm-white);
}

.problem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 68.3px;
    row-gap: 0;
    align-items: center;
}

/* Desktop placement: title top-left, body bottom-left, image spans both rows on the right. */
.problem-text-head { grid-column: 1; grid-row: 1; }
.problem-text-body { grid-column: 1; grid-row: 2; }
.problem-visual    { grid-column: 2; grid-row: 1 / span 2; }

.problem-text .section-label { display: block; }
.problem-text .section-title { text-align: left; }

.problem-text p {
    margin-bottom: 17.1px;
    color: var(--color-text-light);
}

/* Avoid double spacing between the title block and the body block —
   match the original single-column flow gap. */
.problem-text-body > p:first-child {
    margin-top: 0;
}

.comparison-card {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
    /* The card's max-width and aspect-ratio are set inline by JS based on
       the image file's natural dimensions, so it shows at full file size by
       default and scales down proportionally when the column is narrower.
       This 4/3 is just a fallback used briefly until the image loads. */
    aspect-ratio: 4 / 3;
    min-height: 0;
    /* Center the card in its grid cell when capped at the natural image width. */
    margin-left: auto;
    margin-right: auto;
}

/* Pre-aspect-ratio fallback for browsers without `aspect-ratio` support
   (notably Safari < 15 / iPadOS 14). Without this, the card collapses to
   0 height because `.card-underlay-content` is absolutely positioned and
   contributes nothing to in-flow height — leaving only a thin border line.
   `--aspect-padding-bottom` is set inline by JS in script.js (section
   "SECTION REPLACEMENT IMAGES") from the natural image dimensions, so the
   box matches the real photo aspect on these legacy UAs. The 75% fallback
   is the value used briefly until the probe image loads. */
@supports not (aspect-ratio: 1 / 1) {
    .comparison-card {
        height: 0;
        padding-bottom: var(--aspect-padding-bottom, 75%);
    }
}

/* Take the (visibility: hidden) underlay content out of layout flow,
   so only the aspect-ratio above governs the card's height. */
.comparison-card .card-underlay-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.comparison-side {
    padding: 34.2px;
}

.comparison-side h4 {
    font-family: var(--font-heading);
    font-size: 21.4px;
    font-weight: 700;
    margin-bottom: 17.1px;
}

.comparison-known h4 { color: var(--color-text-muted); }
.comparison-new h4 { color: var(--color-primary); }

.comparison-side ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10.7px;
}

.comparison-side ul li {
    font-size: 16px;
    padding-left: 25.6px;
    position: relative;
}

.comparison-known ul li {
    color: var(--color-text-muted);
}

.comparison-known ul li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--color-text-muted);
}

.comparison-new ul li {
    color: var(--color-text);
    font-weight: 500;
}

.comparison-new ul li::before {
    content: '✦';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-size: 12.8px;
    top: 3.2px;
}

/* Inline "Untold Story" image is mobile-only (hidden on desktop) */
.problem-visual--inline {
    display: none;
}

.comparison-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12.8px;
    background: linear-gradient(90deg, var(--color-cream) 0%, rgba(var(--color-primary-rgb), 0.1) 100%);
}

.comparison-divider span {
    font-size: 21.4px;
    color: var(--color-primary);
    font-weight: 700;
}

/* ===========================================================
   SECTION REPLACEMENT IMAGES (preserve original sizing)
   =========================================================== */
.card-has-fill-image {
    position: relative;
    overflow: hidden;
}

.card-fill-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    border-radius: inherit !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #bbb;
}

/* Explicit corner inheritance (more robust than shorthand in some edge cases) */
.card-has-fill-image > .card-fill-image {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
    border-bottom-left-radius: inherit;
}

.card-fill-image--dark {
    background-color: #0f1419;
}

.card-underlay-content {
    visibility: hidden; /* keeps layout identical, hides old content */
}


/* ===========================================================
   INSTRUCTOR SECTION
   =========================================================== */
.section-instructor {
    background-color: var(--color-cream);
    background-image:
        /* Top fade: cream-top -> cream (800px) */
        linear-gradient(to bottom, var(--color-cream-top) 0, var(--color-cream) 854.2px),
        /* Bottom fade: cream -> cream-top (200px) */
        linear-gradient(to bottom, var(--color-cream) 0, var(--color-cream-top) 213.5px);
    background-repeat: no-repeat;
    background-size: 100% 854.2px, 100% 213.5px;
    background-position: top left, bottom left;
}

.instructor-grid {
    display: grid;
    grid-template-columns: 405.7px 1fr;
    gap: 76.9px;
    align-items: center;
}

.instructor-photo-wrap {
    position: relative;
}

/* Inline instructor photo is mobile-only (hidden on desktop) */
.instructor-photo-wrap--inline {
    display: none;
}

.instructor-photo-placeholder {
    width: 100%;
    aspect-ratio: 3/4;
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, var(--color-dark-soft), var(--color-dark));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12.8px;
    color: rgba(255,255,255,0.3);
}

/* Pre-aspect-ratio fallback (Safari < 15 / iPadOS 14): give the placeholder
   a 3:4 height via padding-bottom, and take the (visibility: hidden)
   underlay content out of flow so it doesn't dictate the height. The
   parent provides position: relative via `.card-has-fill-image`. */
@supports not (aspect-ratio: 1 / 1) {
    .instructor-photo-placeholder {
        height: 0;
        padding-bottom: 133.333%; /* 4 / 3 ≈ 1.3333 → 3:4 box */
    }
    .instructor-photo-placeholder > .card-underlay-content {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
}

/* Cover crop: keep the top of the image (e.g. face) when the box is wide / short on mobile */
.section-instructor .instructor-photo-placeholder.card-has-fill-image > .card-fill-image {
    background-position: center top;
}

.placeholder-icon svg { stroke: rgba(255,255,255,0.2); }
.placeholder-text { font-size: 14.9px; letter-spacing: 1px; text-transform: uppercase; }

.instructor-badge-card {
    position: absolute;
    bottom: -21.4px;
    right: -21.4px;
    background: var(--color-primary);
    color: #fff;
    padding: 21.4px 29.9px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.badge-number {
    display: block;
    font-family: var(--font-heading);
    font-size: 51.2px;
    font-weight: 700;
    line-height: 1;
}

.badge-label {
    font-size: 12.8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1.4;
    opacity: 0.9;
}

.instructor-info .section-label { display: block; }
.instructor-info .section-title { text-align: left; margin-bottom: 25.6px; }

.instructor-info p {
    margin-bottom: 17.1px;
    color: var(--color-text-light);
}

.instructor-signature {
    margin-top: 27.8px;
    margin-bottom: 25.6px;
}

.instructor-signature-name {
    line-height: 0;
}

.instructor-signature-image {
    display: block;
    width: auto;
    height: 38.4px;
}

.instructor-signature-printed-name {
    margin-top: 14.9px;
    font-size: 14.9px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}

.instructor-signature-title {
    margin-top: 4.3px;
    font-size: 13.9px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-light);
}

.instructor-credentials {
    display: flex;
    flex-direction: column;
    gap: 21.4px;
    margin-top: 34.2px;
}

/* Instructor USP badges (index_1c.html only when class applied) */
.instructor-credentials.instructor-credentials--badges {
    margin-top: 32px;
}

.instructor-badges-panel {
    padding: 21.4px 12.8px;
    background: rgba(var(--color-primary-rgb), 0.03);
    border: 1px solid rgba(var(--color-primary-rgb), 0.32);
    border-radius: var(--radius-lg);
}

@media (min-width: 740px) {
    .instructor-badges-panel {
        max-width: 811.5px;
        margin-left: 0;
        margin-right: auto;
        padding: 21.4px 12.8px;
    }
}

.instructor-credentials.instructor-credentials--full {
    width: 100%;
    display: flex;
    justify-content: center;
}

.instructor-badges {
    display: flex;
    flex-direction: column;
    gap: 12.8px;
}

.instructor-badge {
    display: flex;
    align-items: center;
    gap: 12.8px;
    padding: 4.3px 10.7px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
}

.instructor-badge-icon {
    width: 34.2px;
    height: 34.2px;
    border-radius: 1066.6px;
    background: rgba(var(--color-primary-rgb), 0.12);
    color: var(--color-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0;
}

.instructor-badge-text strong {
    display: block;
    font-size: 14.9px;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.2;
    white-space: nowrap;
}

.instructor-badge-text span {
    display: block;
    margin-top: 4.3px;
    font-size: 13.9px;
    color: var(--color-text-light);
    line-height: 1.5;
}

@media (min-width: 740px) {
    .instructor-badges.instructor-badges--row {
        flex-direction: row;
        gap: 19.2px;
        align-items: center;
        justify-content: center;
    }

    .instructor-badges.instructor-badges--row .instructor-badge {
        flex: 0 0 auto;
        padding: 4.3px 10.7px;
    }
}

@media (max-width: 739px) {
    .instructor-badge {
        padding: 4px 10px;
    }
    .instructor-badge-icon {
        width: 30px;
        height: 30px;
        border-radius: 999px;
    }

    .instructor-badges-panel {
        border: 1px solid rgba(var(--color-primary-rgb), 0.32);
        background: rgba(var(--color-primary-rgb), 0.03);
    }
}

.credential {
    display: flex;
    align-items: flex-start;
    gap: 17.1px;
}

.credential-icon {
    font-size: 29.9px;
    flex-shrink: 0;
    width: 51.2px;
    height: 51.2px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-primary-rgb), 0.1);
    border-radius: var(--radius-sm);
}

.credential strong {
    display: block;
    font-size: 16px;
    margin-bottom: 2px;
}

.credential span {
    font-size: 14.9px;
    color: var(--color-text-light);
}


/* ===========================================================
   WHAT YOU'LL LEARN (FEATURES)
   =========================================================== */
.section-learn {
    background: var(--color-warm-white);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34.2px;
}

.feature-card {
    position: relative;
    background: #fff;
    padding: 42.7px 34.2px;
    padding-top: 192.2px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
    overflow: hidden;
}

.feature-card:hover {
    transform: translateY(-4.3px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(var(--color-primary-rgb), 0.2);
}

/* ── Feature card background image ── */
.feature-card-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 170.8px;
    background-size: cover;
    background-position: center;
    /* clip-path set dynamically by JS from config clipAngle */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26.7px), 0 100%);
}

.feature-card-image-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* gradient set dynamically via JS from scroller-config.js */
}

/* ── Icon: positioned right, overlapping image bottom edge ── */
.feature-icon-wrap {
    position: absolute;
    right: 25.6px;
    top: 134.5px;
    z-index: 2;
    margin-bottom: 0;
}

.feature-icon {
    width: 59.8px;
    height: 59.8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 29.9px;
    background: #fff;
    border-radius: 50%;
}

.feature-card h3 {
    font-family: var(--font-heading);
    font-size: 23.5px;
    font-weight: 700;
    margin-bottom: 12.8px;
    color: var(--color-text);
}

/* Desktop-only: card title line-height tweaks (Course Highlights + What's Inside) */
@media (min-width: 740px) {
    .feature-card h3,
    .included-card h3 {
        line-height: 1.57;
    }
}

.feature-card p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-light);
}

/* Home Kitchen Callout (Course Highlights V2) */
.highlights-home-kitchen {
    margin-top: 51.2px;
}

.home-kitchen-inner {
    display: flex;
    align-items: center;
    gap: 25.6px;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 34.2px 38.4px;
    border: 1px solid rgba(0,0,0,0.06);
    border-left: 4.3px solid var(--color-primary);
    box-shadow: 0 2px 12.8px rgba(0,0,0,0.04);
}

.home-kitchen-icon {
    flex-shrink: 0;
    width: 55.5px;
    height: 55.5px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4.3px 12.8px rgba(199, 155, 64, 0.3);
}

.home-kitchen-text strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 20.3px;
    color: var(--color-dark);
    margin-bottom: 6.4px;
}

.home-kitchen-text p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-light);
    margin: 0;
}


/* ===========================================================
   7 BREAD FAMILIES
   =========================================================== */
.section-families {
    background: var(--color-dark);
    color: var(--color-text-on-dark);
}

.section-families .section-label { color: var(--color-primary-light); }
.section-families .section-title { color: #fff; }
.section-families .section-title em { color: var(--color-primary-light); }
.section-families .section-subtitle { color: var(--color-text-on-dark-muted); }

.families-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 21.4px;
    margin-bottom: 59.8px;
}

.family-card {
    position: relative;
    display: flex;
    gap: 25.6px;
    padding: 34.2px;
    padding-top: 85.4px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    overflow: hidden;
}

.family-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(var(--color-primary-rgb), 0.3);
    transform: translateY(-2px);
}

.family-card:last-child {
    grid-column: 1 / -1;
    max-width: calc(50% - 10.7px);
    justify-self: center;
}

.family-card-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 128.1px;
    background-size: cover;
    background-position: center;
    background-color: rgba(255,255,255,0.06);
}

.family-card-image-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* gradient set dynamically via JS from scroller-config.js */
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.1) 100%);
}

.family-card-image-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255,255,255, 0);
    transition: background var(--transition-base);
}

.family-card:hover .family-card-image-overlay::after {
    /* lighten by same amount as card bg: 0.07 - 0.04 = 0.03 */
    background: rgba(255,255,255, 0.03);
}

.family-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 4.3px;
}

.family-number {
    font-family: var(--font-heading);
    font-size: 44.8px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    opacity: 0.6;
    flex-shrink: 0;
    width: 59.8px;
    position: relative;
    z-index: 1;
}

.family-content h3,
.family-content p {
    width: 100%;
    flex-shrink: 0;
}

.family-content h3 {
    font-family: var(--font-heading);
    font-size: 21.4px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8.5px;
}

.family-content p {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255,255,255,0.6);
    margin-bottom: 12.8px;
}

.family-tag {
    display: inline-block;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11.7px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--color-primary-light);
    background: rgba(var(--color-primary-rgb), 0.15);
    padding: 4.3px 12.8px;
    border-radius: 106.8px;
}

.families-cta {
    text-align: center;
    padding-top: 21.4px;
}

.families-cta p {
    font-size: 18.2px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 29.9px;
    max-width: 640.6px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Highlights section closing CTA (light background) ── */
.highlights-closing {
    text-align: center;
    margin-top: 0;
    padding-top: 51.2px;
    border-top: 0px solid var(--color-border);
}

.highlights-closing p {
    font-size: 18.2px;
    color: var(--color-text-light);
    margin-bottom: 29.9px;
    max-width: 640.6px;
    margin-left: auto;
    margin-right: auto;
}


/* ===========================================================
   THE SYSTEM SECTION
   =========================================================== */
.section-system {
    background: var(--color-cream);
}

.system-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 76.9px;
    align-items: center;
}

/* Inline system visual is mobile-only (hidden on desktop) */
.system-visual--inline {
    display: none;
}

.system-text .section-label { display: block; }
.system-text .section-title { text-align: left; margin-bottom: 25.6px; }

.system-steps {
    display: flex;
    flex-direction: column;
    gap: 29.9px;
    margin-top: 38.4px;
}

.system-step {
    display: flex;
    gap: 21.4px;
}

.step-number {
    width: 47px;
    height: 47px;
    min-width: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 21.4px;
    font-weight: 700;
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.1);
    border-radius: 50%;
}

.system-step h4 {
    font-family: var(--font-heading);
    font-size: 20.3px;
    font-weight: 700;
    margin-bottom: 6.4px;
}

.system-step p {
    font-size: 16px;
    color: var(--color-text-light);
    line-height: 1.65;
}

.journey-card {
    background: var(--color-dark);
    border-radius: var(--radius-lg);
    padding: 42.7px;
    color: #fff;
}

/* Cover crop: center the image vertically within the fixed-height strip */
.section-system .journey-card.card-has-fill-image > .card-fill-image {
    background-position: center;
}

.journey-card h4 {
    font-family: var(--font-heading);
    font-size: 23.5px;
    font-weight: 700;
    margin-bottom: 34.2px;
    color: var(--color-primary-light);
}

.journey-path {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.journey-node {
    display: flex;
    align-items: center;
    gap: 17.1px;
    padding: 14.9px 0;
    position: relative;
    padding-left: 34.2px;
}

.journey-node::before {
    content: '';
    position: absolute;
    left: 8.5px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255,255,255,0.1);
}

.journey-node:first-child::before { top: 50%; }
.journey-node:last-child::before { bottom: 50%; }

.node-dot {
    position: absolute;
    left: 2px;
    width: 14.9px;
    height: 14.9px;
    background: var(--color-dark);
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    z-index: 1;
}

.journey-node.active .node-dot {
    background: var(--color-primary);
}

.journey-node.final .node-dot {
    width: 19.2px;
    height: 19.2px;
    left: 0;
    background: var(--color-primary);
    box-shadow: 0 0 0 4.3px rgba(var(--color-primary-rgb), 0.3);
}

.journey-node span {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
}

.journey-node.final span {
    color: var(--color-primary-light);
    font-weight: 600;
}


/* ===========================================================
   HEALTH BENEFITS
   =========================================================== */
.section-health {
    background: var(--color-cream);
}

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

.health-card {
    background: #fff;
    padding: 38.4px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
}

.health-card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(var(--color-primary-rgb), 0.2);
}

.health-icon {
    color: var(--color-success);
    margin-bottom: 17.1px;
}

.health-card h3 {
    font-family: var(--font-heading);
    font-size: 21.4px;
    font-weight: 700;
    margin-bottom: 10.7px;
}

.health-card p {
    font-size: 16px;
    color: var(--color-text-light);
    line-height: 1.7;
}

.health-cta {
    text-align: center;
    margin-top: 51.2px;
    padding-top: 42.7px;
    border-top: 1px solid var(--color-border);
}

.health-cta p {
    font-size: 18.2px;
    color: var(--color-text-light);
    margin-bottom: 29.9px;
    max-width: 640.6px;
    margin-left: auto;
    margin-right: auto;
}


/* ===========================================================
   VERSION REVIEW ELEMENTS (temporary — remove after selection)
   =========================================================== */
.version-label {
    text-align: center;
    margin-bottom: 59.8px;
    padding: 14.9px 29.9px;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 700;
    letter-spacing: 3.2px;
    text-transform: uppercase;
    font-size: 14.9px;
    font-family: var(--font-body);
}

.version-separator {
    height: 6.4px;
    background: repeating-linear-gradient(
        90deg,
        var(--color-primary) 0,
        var(--color-primary) 25.6px,
        transparent 25.6px,
        transparent 51.2px
    );
}


/* ===========================================================
   WHY IT MATTERS — VERSION A: THREE PILLARS
   =========================================================== */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 29.9px;
}

.pillar-card {
    background: #fff;
    padding: 47px 34.2px 42.7px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    border-top: 4.3px solid var(--color-primary);
    transition: all var(--transition-base);
}

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

.pillar-number {
    font-family: var(--font-heading);
    font-size: 59.8px;
    font-weight: 700;
    color: var(--color-primary);
    opacity: 0.2;
    line-height: 1;
    margin-bottom: 21.4px;
}

.pillar-icon {
    width: 68.3px;
    height: 68.3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-primary-rgb), 0.1);
    border-radius: 50%;
    color: var(--color-primary);
    margin-bottom: 21.4px;
}

.pillar-card h3 {
    font-family: var(--font-heading);
    font-size: 23.5px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 17.1px;
}

.pillar-card p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-text-light);
    margin-bottom: 12.8px;
}

.pillar-card p:last-child {
    margin-bottom: 0;
}

.pillars-closing {
    text-align: center;
    margin-top: 59.8px;
    padding-top: 47px;
    border-top: 1px solid var(--color-border);
}

.pillars-closing .closing-statement {
    font-family: var(--font-heading);
    font-size: 23.5px;
    color: var(--color-text);
    margin-bottom: 29.9px;
    line-height: 1.4;
}


/* ===========================================================
   WHY IT MATTERS — VERSION B: NARRATIVE ROWS
   =========================================================== */
.benefits-list-vb {
    display: flex;
    flex-direction: column;
    max-width: 918.2px;
    margin: 0 auto;
}

.benefit-row {
    display: flex;
    gap: 29.9px;
    padding: 42.7px 0;
    border-bottom: 1px solid var(--color-border);
    align-items: flex-start;
}

.benefit-row:first-child {
    padding-top: 0;
}

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

.benefit-row-icon {
    flex-shrink: 0;
    width: 68.3px;
    height: 68.3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-primary-rgb), 0.1);
    border-radius: 50%;
    color: var(--color-primary);
    margin-top: 4.3px;
}

.benefit-row-content h3 {
    font-family: var(--font-heading);
    font-size: 23.5px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 12.8px;
}

.benefit-row-content p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-text-light);
}

.benefits-bottom-statement {
    text-align: center;
    margin-top: 51.2px;
    padding: 42.7px;
    background: rgba(var(--color-primary-rgb), 0.06);
    border-radius: var(--radius-md);
    border: 1px solid rgba(var(--color-primary-rgb), 0.15);
}

.benefits-bottom-statement p {
    font-family: var(--font-heading);
    font-size: 22.4px;
    line-height: 1.5;
    color: var(--color-text);
    margin-bottom: 25.6px;
}


/* ===========================================================
   WHY IT MATTERS — VERSION C: IMPACT GRID
   =========================================================== */
.impact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25.6px;
}

.impact-card--hero {
    grid-column: 1 / -1;
    background: var(--color-dark);
    color: var(--color-text-on-dark);
    border-radius: var(--radius-lg);
    padding: 59.8px 51.2px;
}

.impact-card--hero h3 {
    font-family: var(--font-heading);
    font-size: 29.9px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 17.1px;
}

.impact-card--hero p {
    font-size: 17.1px;
    line-height: 1.75;
    color: rgba(255,255,255,0.7);
    max-width: 811.5px;
}

.impact-eyebrow {
    display: flex;
    align-items: center;
    gap: 17.1px;
    margin-bottom: 29.9px;
}

.impact-stat {
    font-family: var(--font-heading);
    font-size: 76.9px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.impact-stat-label {
    font-size: 14.9px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    line-height: 1.4;
    letter-spacing: 0.5px;
}

.impact-card:not(.impact-card--hero) {
    background: #fff;
    padding: 42.7px 34.2px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
}

.impact-card:not(.impact-card--hero):hover {
    transform: translateY(-4.3px);
    box-shadow: var(--shadow-lg);
}

.impact-card-accent {
    width: 51.2px;
    height: 4.3px;
    background: var(--color-primary);
    border-radius: 2px;
    margin-bottom: 25.6px;
}

.impact-card:not(.impact-card--hero) h3 {
    font-family: var(--font-heading);
    font-size: 23.5px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 14.9px;
}

.impact-card:not(.impact-card--hero) p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-text-light);
}

.impact-closing {
    text-align: center;
    margin-top: 51.2px;
    padding-top: 42.7px;
    border-top: 1px solid var(--color-border);
}

.impact-closing p {
    font-family: var(--font-heading);
    font-size: 23.5px;
    color: var(--color-text);
    margin-bottom: 25.6px;
    line-height: 1.4;
}


/* ===========================================================
   WHY IT MATTERS — VERSION D: SPLIT LAYOUT
   =========================================================== */
.benefits-split-grid {
    display: grid;
    grid-template-columns: 405.7px 1fr;
    gap: 76.9px;
    align-items: center;
}

.benefits-visual-wrap {
    position: relative;
}

.benefits-visual-card {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, var(--color-dark-soft), var(--color-dark));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 51.2px 47px;
    gap: 0;
}

.benefits-visual-item {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.benefits-visual-keyword {
    font-family: var(--font-heading);
    font-size: 51.2px;
    font-weight: 700;
    color: var(--color-primary-light);
    line-height: 1.2;
    letter-spacing: -0.5px;
    padding: 21.4px 0;
}

.benefits-visual-line {
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.1);
}

.benefits-visual-badge {
    position: absolute;
    bottom: -21.4px;
    right: -21.4px;
    background: var(--color-primary);
    color: #fff;
    padding: 21.4px 29.9px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.benefits-visual-badge .badge-number {
    display: block;
    font-family: var(--font-heading);
    font-size: 51.2px;
    font-weight: 700;
    line-height: 1;
}

.benefits-visual-badge .badge-label {
    font-size: 12.8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1.4;
    opacity: 0.9;
}

.benefits-split-content .section-label {
    display: block;
}

.benefits-split-list {
    margin-top: 34.2px;
}

.benefits-split-list .benefit-row {
    padding: 25.6px 0;
}

.benefits-split-list .benefit-row:first-child {
    padding-top: 0;
}


/* ===========================================================
   CURRICULUM / WHAT'S INCLUDED
   =========================================================== */
.section-curriculum {
    background-color: var(--color-cream);
    background-image:
        /* Top fade: cream-top -> cream (800px) */
        linear-gradient(to bottom, var(--color-cream-top) 0, var(--color-cream) 854.2px),
        /* Bottom fade: cream -> cream-top (200px) */
        linear-gradient(to bottom, var(--color-cream) 0, var(--color-cream-top) 213.5px);
    background-repeat: no-repeat;
    background-size: 100% 854.2px, 100% 213.5px;
    background-position: top left, bottom left;
}

.curriculum-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 25.6px;
    justify-content: center;
}

.curriculum-grid .included-card {
    flex: 0 1 calc((100% - 51.2px) / 3);
    min-width: 0;
}

.included-card {
    background: #fff;
    padding: 38.4px 29.9px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    text-align: center;
    transition: all var(--transition-base);
}

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

.included-icon {
    color: var(--color-primary);
    margin-bottom: 21.4px;
    display: flex;
    justify-content: center;
}

.included-card h3 {
    font-family: var(--font-heading);
    font-size: 20.3px;
    font-weight: 700;
    margin-bottom: 12.8px;
}

.included-card p {
    font-size: 16px;
    color: var(--color-text-light);
    line-height: 1.65;
}

/* ── Curriculum closing callout ── */
.curriculum-closing {
    margin-top: 51.2px;
    display: flex;
    justify-content: center;
}

.curriculum-closing-card {
    text-align: center;
    max-width: 597.9px;
    padding: 0;
}

.curriculum-closing-icon {
    color: var(--color-primary);
    margin-bottom: 17.1px;
    display: flex;
    justify-content: center;
}

.curriculum-closing-card h3 {
    font-family: var(--font-heading);
    font-size: 23.5px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 12.8px;
}

.curriculum-closing-card p {
    font-size: 17.1px;
    color: var(--color-text-light);
    line-height: 1.7;
    margin-bottom: 25.6px;
}

.curriculum-trust {
    display: flex;
    justify-content: center;
    gap: 34.2px;
    margin-top: 21.4px;
    flex-wrap: wrap;
}

.curriculum-trust-item {
    display: flex;
    align-items: center;
    gap: 6.4px;
    font-size: 14.9px;
    color: var(--color-text-light);
}

.curriculum-trust-item svg {
    color: var(--color-primary);
    flex-shrink: 0;
}


/* ===========================================================
   VARIETY SHOWCASE
   =========================================================== */
.section-variety {
    background: var(--color-warm-white);
    padding: 106.8px 0;
}

.variety-content {
    text-align: center;
    max-width: 854.2px;
    margin: 0 auto;
}

.variety-content .section-label { display: block; }

.variety-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12.8px;
    justify-content: center;
    margin-top: 42.7px;
}

.variety-tag {
    display: inline-block;
    font-size: 14.9px;
    font-weight: 500;
    padding: 10.7px 21.4px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 106.8px;
    color: var(--color-text);
    transition: all var(--transition-base);
}

.variety-tag:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.highlight-tag {
    background: rgba(var(--color-primary-rgb), 0.1);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
    font-weight: 600;
}


/* ===========================================================
   SOCIAL PROOF BANNER
   =========================================================== */
.section-proof {
    background: var(--color-cream);
    padding: 85.4px 0;
}

.proof-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 51.2px;
    flex-wrap: wrap;
}

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

.stat-number {
    display: block;
    font-family: var(--font-heading);
    font-size: 59.8px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 8.5px;
}

.stat-label {
    font-size: 14.9px;
    font-weight: 500;
    color: var(--color-text-light);
    line-height: 1.4;
}

.proof-divider {
    width: 1px;
    height: 64.1px;
    background: var(--color-border);
}


/* ===========================================================
   PRICING
   =========================================================== */
.section-pricing {
    background: var(--color-warm-white);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 34.2px;
    max-width: 960.9px;
    margin: 0 auto;
}

.pricing-card {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    overflow: hidden;
    position: relative;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    box-shadow: var(--shadow-lg);
}

.pricing-featured {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg);
    transform: scale(1.03);
}

.pricing-featured:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-xl);
}

.pricing-badge {
    position: absolute;
    top: 0;
    right: 34.2px;
    background: var(--color-primary);
    color: #fff;
    font-size: 12.8px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8.5px 17.1px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.pricing-header {
    padding: 42.7px 38.4px 34.2px;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}

.pricing-name {
    font-family: var(--font-heading);
    font-size: 27.8px;
    font-weight: 700;
    margin-bottom: 4.3px;
}

.pricing-plus {
    color: var(--color-primary);
}

.pricing-tagline {
    font-size: 14.9px;
    color: var(--color-text-muted);
    margin-bottom: 21.4px;
}

.pricing-price {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 4.3px;
}

.price-currency {
    font-family: var(--font-heading);
    font-size: 29.9px;
    font-weight: 600;
    color: var(--color-text);
    margin-top: 8.5px;
}

.price-amount {
    font-family: var(--font-heading);
    font-size: 68.3px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
}

.price-period {
    font-size: 14.9px;
    color: var(--color-text-muted);
    align-self: flex-end;
    margin-bottom: 8.5px;
    margin-left: 4.3px;
}

.pricing-body {
    padding: 34.2px 38.4px 42.7px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.pricing-body .btn-block {
    margin-top: auto;
}

.pricing-includes-note {
    font-size: 16px;
    color: var(--color-text-light);
    margin-bottom: 29.9px;
    font-style: italic;
    font-weight: 600;
}

.pricing-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14.9px;
    margin-bottom: 34.2px;
}

.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 12.8px;
    font-size: 16px;
    line-height: 1.5;
}

.pricing-features li svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.feature-included svg {
    color: var(--color-success);
}

.feature-excluded {
    color: var(--color-text-muted);
}

.feature-excluded svg {
    color: var(--color-text-muted);
    opacity: 0.4;
}

.feature-highlight {
    color: var(--color-primary-dark);
}


/* ===========================================================
   PRICING — SINGLE TIER ALTERNATIVE
   =========================================================== */

.pricing-single-wrapper {
    max-width: 832.8px;
    margin: 0 auto;
}

.pricing-single-card {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-primary);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.pricing-single-top {
    padding: 51.2px 51.2px 42.7px;
}

.pricing-single-header {
    text-align: center;
    margin-bottom: 42.7px;
    padding-bottom: 38.4px;
    border-bottom: 1px solid var(--color-border);
}

.pricing-single-name {
    font-family: var(--font-heading);
    font-size: 38.4px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 17.1px;
}

.pricing-single-tagline {
    font-size: 17.1px;
    color: var(--color-text-light);
    font-style: italic;
    margin-bottom: 0;
    padding-left: 50px;
    padding-right: 50px;
}

.pricing-single-price-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 21.4px;
    margin-bottom: 8.5px;
}

.pricing-single-price-line {
    flex: 1;
    max-width: 106.8px;
    height: 1px;
    background: var(--color-border);
}

.pricing-single-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0;
}

.pricing-single-price .price-currency,
.pricing-single-price .price-amount {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 82.2px;
    font-weight: 400;
    line-height: 1;
    color: var(--color-primary);
}

.pricing-single-otp {
    display: block;
    font-size: 11.7px;
    font-weight: 600;
    letter-spacing: 2.7px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 21.4px;
}

.pricing-single-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17.1px;
    margin-top: 25.6px;
}

.pricing-single-separator-line {
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.pricing-single-grain-icon {
    color: var(--color-primary);
    flex-shrink: 0;
}

.pricing-single-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34.2px;
}

.pricing-single-col-title {
    font-family: var(--font-heading);
    font-size: 14.9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--color-primary);
    margin-bottom: 17.1px;
}

.pricing-single-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14.9px;
}

.pricing-single-col li {
    display: flex;
    align-items: flex-start;
    gap: 12.8px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
}

.pricing-single-col li svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-success);
}

.pricing-single-bottom {
    background: var(--color-bg-alt);
    padding: 38.4px 51.2px;
    text-align: center;
    border-top: 1px solid var(--color-border);
}

.pricing-single-bottom .btn-lg {
    font-size: 19.2px;
    padding: 19.2px 102.5px;
    justify-content: center;
}

.pricing-single-col-title--hidden {
    display: none;
}

.pricing-trust-bar {
    display: flex;
    justify-content: center;
    gap: 34.2px;
    margin-top: 42.7px;
    flex-wrap: wrap;
}

.pricing-trust-item {
    display: flex;
    align-items: center;
    gap: 6.4px;
    font-size: 14.9px;
    color: var(--color-text-light);
}

.pricing-trust-item svg {
    color: var(--color-primary);
    flex-shrink: 0;
}

.pricing-trust-inline {
    display: none;
}

.pricing-single-trust {
    display: flex;
    justify-content: center;
    gap: 29.9px;
    margin-top: 21.4px;
    flex-wrap: wrap;
}

.pricing-single-trust-item {
    display: flex;
    align-items: center;
    gap: 6.4px;
    font-size: 13.5px;
    font-weight: 400;
    color: #8A8A8A;
}

/* index_1e.html: proof badges font-weight */
.section-pricing--proof500 .pricing-single-trust-item {
    font-weight: 500;
}

.pricing-single-trust-item svg {
    color: var(--color-primary);
    flex-shrink: 0;
}

.pricing-single-reassurance {
    text-align: center;
    margin-top: 29.9px;
}

.pricing-single-reassurance p {
    font-size: 16px;
    color: var(--color-text-light);
    max-width: 597.9px;
    margin: 0 auto;
    line-height: 1.7;
    font-style: italic;
}

@media (max-width: 739px) {
    .pricing-single-card {
        border: 2px solid var(--color-primary);
    }

    .pricing-single-top {
        padding: 32px 24px 28px;
    }

    .pricing-single-header {
        margin-bottom: 28px;
        padding-bottom: 24px;
    }

    .pricing-single-name {
        font-size: 26px;
    }

    .pricing-single-tagline {
        font-size: 15px;
    }

    .pricing-single-price .price-currency,
    .pricing-single-price .price-amount {
        font-size: 68px;
    }

    .pricing-single-price-line {
        max-width: 60px;
    }

    .pricing-single-features {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .pricing-single-col-title--hidden {
        display: none;
    }

    .pricing-single-bottom {
        padding: 28px 24px;
    }

    .pricing-single-bottom .btn-lg {
        font-size: 16px;
        padding: 14px 32px;
        width: 100%;
    }

    /* "Get Instant Access" — fixed tap target height on small screens */
    .pricing-single-bottom .js-nbm-open-waitlist.btn-lg {
        height: 60px;
        min-height: 60px;
        padding-top: 0;
        padding-bottom: 0;
        box-sizing: border-box;
    }

    .pricing-single-trust {
        gap: 16px;
    }
}

@media (max-width: 739px) {
    .pricing-trust-bar {
        display: none;
    }

    .pricing-trust-inline {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin-top: 16px;
    }

    .pricing-trust-inline .pricing-trust-item {
        font-size: 12px;
    }
}


/* ===========================================================
   GUARANTEE
   =========================================================== */
.section-guarantee {
    background-color: var(--color-cream);
    background-image:
        /* Top fade: cream-top -> cream (800px) */
        linear-gradient(to bottom, var(--color-cream-top) 0, var(--color-cream) 854.2px),
        /* Bottom fade: cream -> cream-top (200px) */
        linear-gradient(to bottom, var(--color-cream) 0, var(--color-cream-top) 213.5px);
    background-repeat: no-repeat;
    background-size: 100% 854.2px, 100% 213.5px;
    background-position: top left, bottom left;
    padding: 106.8px 0;
}

.guarantee-card {
    display: flex;
    align-items: flex-start;
    gap: 42.7px;
    max-width: 918.2px;
    margin: 0 auto;
    background: #fff;
    padding: 59.8px;
    border-radius: var(--radius-lg);
    border: 2px solid rgba(var(--color-primary-rgb), 0.2);
    box-shadow: var(--shadow-md);
}

.guarantee-icon {
    flex-shrink: 0;
    color: var(--color-primary);
}

.guarantee-content h2 {
    font-family: var(--font-heading);
    font-size: 29.9px;
    font-weight: 700;
    margin-bottom: 17.1px;
    color: var(--color-text);
}

.guarantee-content p {
    font-size: 17.1px;
    color: var(--color-text-light);
    margin-bottom: 12.8px;
    line-height: 1.7;
}

.guarantee-badges {
    display: flex;
    gap: 25.6px;
    margin-top: 25.6px;
    flex-wrap: wrap;
}

.g-badge {
    display: flex;
    align-items: center;
    gap: 8.5px;
    font-size: 13.9px;
    font-weight: 600;
    color: var(--color-text-light);
}

.g-badge svg {
    color: var(--color-primary);
}


/* ===========================================================
   FAQ
   =========================================================== */
.section-faq {
    background: var(--color-warm-white);
}

.faq-list {
    max-width: 832.8px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8.5px;
}

.faq-item {
    background: #fff;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: all var(--transition-base);
}

.faq-item.open {
    border-color: rgba(var(--color-primary-rgb), 0.3);
    box-shadow: var(--shadow-sm);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 17.1px;
    padding: 23.5px 29.9px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 17.1px;
    font-weight: 600;
    color: var(--color-text);
    text-align: left;
    transition: color var(--transition-fast);
}

.faq-question:hover {
    color: var(--color-primary);
}

.faq-chevron {
    flex-shrink: 0;
    transition: transform var(--transition-base);
    color: var(--color-text-muted);
}

.faq-item.open .faq-chevron {
    transform: rotate(180deg);
    color: var(--color-primary);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 29.9px;
}

.faq-item.open .faq-answer {
    max-height: 427.1px;
    padding: 0 29.9px 25.6px;
}

.faq-answer p {
    font-size: 16px;
    color: var(--color-text-light);
    line-height: 1.7;
}


/* ===========================================================
   FINAL CTA
   =========================================================== */
.section-final-cta {
    background: var(--color-dark);
    padding: var(--section-padding) 0;
    text-align: center;
}

.final-cta-content {
    max-width: 726px;
    margin: 0 auto;
}

.final-cta-content .section-title {
    color: #fff;
    margin-bottom: 25.6px;
}

.final-cta-content .lead-text {
    color: rgba(255,255,255,0.6);
    margin-bottom: 42.7px;
}

.final-cta-buttons {
    margin-bottom: 25.6px;
}

.final-cta-guarantee {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8.5px;
    font-size: 14.9px;
    color: rgba(255,255,255,0.4);
}

.final-cta-guarantee svg {
    color: var(--color-primary-light);
}


/* ===========================================================
   FOOTER
   =========================================================== */
.footer {
    background: var(--color-dark);
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 51.2px 0;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25.6px;
    text-align: center;
}

.footer-brand p {
    font-size: 14.9px;
    color: rgba(255,255,255,0.4);
    margin-top: 12.8px;
}

.footer-links {
    display: flex;
    gap: 25.6px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-links a {
    font-size: 14.9px;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-links a:hover { color: #fff; }

.footer-legal {
    padding-top: 25.6px;
    border-top: 1px solid rgba(255,255,255,0.06);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12.8px;
}

.footer-legal p {
    font-size: 13.9px;
    color: rgba(255,255,255,0.4);
}

.footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 21.4px;
}

.footer-legal-links a {
    font-size: 13.9px;
    line-height: 1.44;
    color: rgba(255,255,255,0.4);
    text-decoration: none;
    transition: color var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

.footer-legal-links a:hover { color: rgba(255,255,255,0.6); }

/* The "Your Privacy Choices" footer link carries the standard CCPA
   opt-out icon (blue toggle + white circle with an X). We keep the
   link inline-flex so the icon never wraps onto its own line, and we
   gently dim/un-dim it together with the rest of the link colour. */
.footer-legal-links a:has(.nbm-ccpa-optout-icon) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nbm-ccpa-optout-icon {
    width: 30px;
    height: 14px;
    flex: 0 0 auto;
    opacity: 0.85;
    transition: opacity var(--transition-fast);
    vertical-align: middle;
}
.footer-legal-links a:hover .nbm-ccpa-optout-icon { opacity: 1; }


/* ===========================================================
   RESPONSIVE DESIGN
   =========================================================== */

/* Narrow tight zone just above the mobile breakpoint —
   keep the desktop nav links visible but compress them. */
@media (min-width: 728px) and (max-width: 740px) {
    .nav-links {
        gap: 21.4px;
    }
}

/* Wider tight zone — keep the nav links comfortably padded. */
@media (min-width: 740px) and (max-width: 997px) {
    .nav-links {
        gap: 21.4px;
        padding-left: 14.9px;
        padding-right: 21.4px;
    }
}

/* Tighter desktop band just above the mobile breakpoint — compress
   the nav links and logo further so the top bar stays on one line
   before the layout drops to mobile mode. Placed after the wider
   tight zone so `gap` overrides cleanly within 740–823px. */
@media (min-width: 740px) and (max-width: 823px) {
    .nav-links {
        gap: 20px;
    }
    .nav-links a {
        font-size: 14px;
        line-height: 1.3;
    }
    .nav-logo {
        max-width: 140px;
    }
}

/* Flex `gap` fallback for legacy WebKit (Safari < 14.1 / iPadOS < 14.5).
   Those versions ignore `gap` on flex containers, which makes the desktop
   nav links touch each other. Detection: `inset` shorthand shipped in the
   exact same Safari version as flex `gap`, so `@supports not (inset: 0)`
   targets precisely the set of UAs that need this fallback (and crucially
   does NOT fire on Safari 14.5–14.6 which have flex gap but lack
   aspect-ratio, avoiding double-spacing there).
   Each margin value below mirrors the `gap` value of the corresponding
   band so the layout is byte-identical between modern and legacy UAs.
   Gated on min-width: 740px so the mobile column layout (which uses its
   own `gap: 0`) is untouched. */
@supports not (inset: 0) {
    /* --- Nav links (row, desktop only — mobile sets gap:0 of its own) --- */
    @media (min-width: 740px) {
        .nav-links li + li { margin-left: 34.2px; }
    }
    @media (min-width: 740px) and (max-width: 997px) {
        .nav-links li + li { margin-left: 21.4px; }
    }
    @media (min-width: 740px) and (max-width: 823px) {
        .nav-links li + li { margin-left: 20px; }
    }

    /* --- Hero CTA buttons (row on desktop, column on mobile) ---
       Modern UAs use `gap: 17.1px` (desktop) / `gap: 12px` (mobile column).
       Mirror those values via sibling margins. */
    .hero-cta-group > * + * { margin-left: 17.1px; }
    @media (max-width: 739px) {
        .hero-cta-group > * + * {
            margin-left: 0;
            margin-top: 12px;
        }
    }

    /* --- Hero trust badges (row on desktop, column on mobile) ---
       Modern UAs use `gap: 34.2px` (desktop) / `gap: 12px` (mobile column). */
    .hero-trust > * + * { margin-left: 34.2px; }
    @media (max-width: 739px) {
        .hero-trust > * + * {
            margin-left: 0;
            margin-top: 12px;
        }
    }

    /* --- Pricing-single trust badges (waitlist-mode "Join the Waitlist"
       section, also regular-mode pricing). The container uses
       `flex-wrap: wrap` + `justify-content: center`, so we only need a
       horizontal sibling margin; wrapped rows get implicit spacing from
       the wrap break. Modern UAs use `gap: 29.9px` (desktop) /
       `gap: 16px` (≤739px). Inside each badge, the SVG icon and label
       use `gap: 6.4px`. Mirror both via sibling margins on legacy
       WebKit (Safari < 14.1 / iPadOS < 14.5, e.g. an iPad Air 4 stuck
       on iPadOS 14) so badges don't end up touching their neighbours
       and icons don't stick to their labels. */
    .pricing-single-trust > * + * { margin-left: 29.9px; }
    .pricing-single-trust-item > * + * { margin-left: 6.4px; }
    @media (max-width: 739px) {
        .pricing-single-trust > * + * { margin-left: 16px; }
    }

    /* --- Footer (column stack + the two link rows) ---
       The footer is a vertical flex stack whose spacing comes entirely from
       `gap`, so on legacy WebKit the brand / link / legal blocks collapse
       together — most visibly the missing gap between the footer menu and
       the legal links. Mirror each `gap` with sibling margins:
         .footer-content  gap: 25.6px (column)
         .footer-legal    gap: 12.8px (column, copyright ↔ legal links)
         .footer-links    gap: 25.6px (row, wraps + centred)
         .footer-legal-links gap: 21.4px (row, wraps + centred) */
    .footer-content > * + * { margin-top: 25.6px; }
    .footer-legal > * + * { margin-top: 12.8px; }
    .footer-links > * + * { margin-left: 25.6px; }
    .footer-legal-links > * + * { margin-left: 21.4px; }

    /* --- Complete Purchase popup (regular mode only) ---
       Same flex-`gap` blind spot as above. Mirror each checkout `gap`
       with sibling margins so iPad Air 4 / iPadOS 14 does not collapse:
         .nbm-pay-method           gap: 12px  (radio ↔ method name/body)
         .payment-icons--inline    gap: 8px   (card brand icons)
         .nbm-checkout-trust-items li  gap: 8px (icon ↔ copy — the label
           is a bare text node, so we use margin-right on the SVG instead
           of a `> * + *` sibling rule). */
    body.nbm-mode-regular .nbm-checkout-modal .nbm-pay-method > input + .nbm-pay-method-body {
        margin-left: 12px;
    }
    body.nbm-mode-regular .nbm-checkout-modal .payment-icons--inline > .payment-icon + .payment-icon {
        margin-left: 8px;
    }
    body.nbm-mode-regular .nbm-checkout-trust-items li svg {
        margin-right: 8px;
    }
}

/* Note: the 728–740 gap band intentionally has no margin equivalent — its
   gap value is already overridden by the mobile column layout (`gap: 0`)
   via source order on modern UAs, and a margin equivalent would leak
   into the mobile column layout on legacy UAs since mobile rules don't
   reset `margin-left` on `li + li`. */

/* Tablet */
@media (max-width: 1024px) {
    :root {
        --section-padding: 85.4px;
    }

    .instructor-grid {
        grid-template-columns: 320.3px 1fr;
        gap: 51.2px;
    }

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

    .curriculum-grid .included-card {
        flex: 0 1 calc((100% - 25.6px) / 2);
    }

    /* Version A tablet */
    .pillars-grid {
        grid-template-columns: 1fr;
        max-width: 683.3px;
        margin: 0 auto;
    }

    /* Version C tablet */
    .impact-grid {
        grid-template-columns: 1fr;
    }

    .impact-card--hero {
        padding: 47px 38.4px;
    }

    /* Version D tablet */
    .benefits-split-grid {
        grid-template-columns: 320.3px 1fr;
        gap: 51.2px;
    }
}

/* Narrow desktop band — keep the 2-column layout, but anchor the image
   to the top of its row (instead of vertically centered) with 80px of
   extra top padding. */
@media (min-width: 740px) and (max-width: 957px) {
    .problem-visual,
    .instructor-photo-wrap,
    .system-visual {
        align-self: start;
        padding-top: 85.4px;
    }
}

/* Mobile */
@media (max-width: 739px) {
    .btn {
        padding: 8px 20px;
        font-size: 16px;
    }

    :root {
        --section-padding: 64px;
    }

    body {
        font-size: 16px;
    }

    .container {
        padding: 0 15px;
    }

    .section-header {
        margin-bottom: 38px;
    }

    .section-subtitle {
        font-size: 19px;
        line-height: 1.55;
    }

    /* Closing CTA copy in Highlights / Families / Curriculum sections */
    .highlights-closing p,
    .families-cta p,
    .curriculum-closing-card p {
        font-size: 17px;
        line-height: 1.55;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: rgba(15, 20, 25, 0.98);
        backdrop-filter: blur(12px);
        padding: 20px 24px;
        gap: 0;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li a {
        display: block;
        padding: 12px 0;
        font-size: 16px;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    .nav-cta {
        display: none;
    }

    .nav-cta-mobile {
        display: inline-block;
        padding: 7px 16px;
    }

    .logo-text {
        font-size: 17px;
    }

    .hero {
        padding: 100px 20px 42px;
        min-height: auto;
        justify-content: flex-start;
    }

    .hero-badge {
        display: none;
    }

    .hero-title {
        font-size: clamp(44px, 5.5vw, 72px);
        line-height: 1.11;
        margin-bottom: 26px;
    }

    .hero-title-secondary {
        font-size: calc(clamp(44px, 8vw, 48px) * 1);
    }

    .hero-subtitle {
        font-size: clamp(17px, 1.8vw, 19px);
        line-height: 1.55;
        margin-bottom: 29px;
    }

    .hero-cta-group {
        flex-direction: column;
        gap: 12px;
    }

    .hero-cta-group .btn {
        width: 100%;
        justify-content: center;
    }

    .btn-lg {
        padding: 14px 20px;
        font-size: 16px;
    }

    .btn-block {
        padding: 18px 20px;
        font-size: 16px;
    }

    .hero-cta-group .btn-primary svg {
        display: none;
    }

    .hero-trust {
        flex-direction: column;
        gap: 12px;
    }

    .hero-trust-bar {
        position: relative;
        bottom: auto;
    }

    .instructor-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Grid default min-width:auto lets wide children inflate the column past the viewport */
    .section-instructor .instructor-grid,
    .section-instructor .instructor-info {
        min-width: 0;
    }

    /* Mobile: place photo inside the text flow (mockup style) */
    .section-instructor .instructor-grid > .instructor-photo-wrap {
        display: none;
    }

    /* Full-bleed: cancel .container horizontal padding (15px). width:auto + negative
       side margins yields used width = parent + 30px (CSS 2.1 block width equation). */
    .section-instructor .instructor-photo-wrap--inline {
        display: block;
        width: auto;
        max-width: none;
        margin: 25px 0 23px;
        height: var(--instructor-photo-mobile-height, 200px);
        float: none;
    }

    .section-instructor .instructor-photo-wrap--inline .instructor-photo-placeholder {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        border-radius: var(--hero-scroller-radius, 8px);
    }

    /* Prevent floating elements from affecting following sections */
    .section-instructor .instructor-info::after {
        content: "";
        display: block;
        clear: both;
    }

    .section-title {
        font-size: clamp(30px, 6vw, 36px);
    }

    .instructor-info .section-title,
    .problem-text .section-title,
    .system-text .section-title {
        text-align: center;
    }

    /* Global mobile text gutters (exclude Hero + anything inside cards) */
    .section:not(.hero) .section-title {
        font-size: clamp(32px, 6vw, 36px);
        padding-left: 10px;
        padding-right: 10px;
    }

    .section:not(.hero) p {
        padding-left: 0;
        padding-right: 15px;
    }

    /* Undo gutters inside card components */
    .section:not(.hero) .comparison-card p,
    .section:not(.hero) .feature-card p,
    .section:not(.hero) .family-card p,
    .section:not(.hero) .journey-card p,
    .section:not(.hero) .health-card p,
    .section:not(.hero) .pillar-card p,
    .section:not(.hero) .impact-card p,
    .section:not(.hero) .benefits-visual-card p,
    .section:not(.hero) .included-card p,
    .section:not(.hero) .curriculum-closing-card p,
    .section:not(.hero) .pricing-card p,
    .section:not(.hero) .pricing-single-card p,
    .section:not(.hero) .guarantee-card p,
    .section:not(.hero) .instructor-badge-card p {
        padding-left: 0;
        padding-right: 0;
    }

    /* FAQ answer copy already has its own container padding */
    .section:not(.hero) .faq-answer p {
        padding-left: 0;
        padding-right: 0;
    }

    /* "More Than Recipes" step copy should align with its icon */
    .section:not(.hero) .system-step p {
        padding-left: 0;
        padding-right: 0;
    }

    /* Instructor signature block isn't a <p>, but should align with paragraph gutters */
    .section-instructor .instructor-signature {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Curriculum closing copy: keep the 15px gutters even though it's in a card */
    .section:not(.hero) .curriculum-closing-card > p {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Untold Story (Problem section) — mobile typography tweaks */
    .section-problem .problem-text-head .section-title {
        font-size: clamp(32px, 6vw, 36px);
        padding-left: 10px;
        padding-right: 10px;
    }

    .section-problem .problem-text-body p {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* First paragraph style */
    .section-problem .problem-text-body .lead-text {
        font-size: 19px;
        line-height: 1.55;
        font-weight: 400;
    }

    /* Remaining paragraphs style */
    .section-problem .problem-text-body p:not(.lead-text) {
        font-size: 16px;
        line-height: 1.55;
    }

    /* Last paragraph: no extra space below (mobile only) */
    .section-problem .problem-text-body p:last-of-type {
        margin-bottom: 0;
    }

    /* Instructor section: same 2-paragraph typography as Untold Story */
    .section-instructor .instructor-info .lead-text {
        font-size: 19px;
        line-height: 1.55;
        font-weight: 400;
    }

    /* Mobile-only typography for the System section lead paragraph
       (matches Untold Story / Instructor so the drop cap aligns the same way) */
    .section-system .system-text .lead-text {
        font-size: 19px;
        line-height: 1.55;
        font-weight: 400;
    }

    /* Mobile-only drop cap (shared base) — Instructor + Untold Story + System */
    .section-instructor .instructor-info .lead-text::first-letter,
    .section-problem .problem-text-body .lead-text::first-letter,
    .section-system .system-text .lead-text::first-letter {
        float: left;
        font-family: var(--font-heading);
        font-style: italic;
        font-size: 3.06em; /* ~2px larger at 19px base font */
        line-height: 1;
        padding-right: 7px;
        padding-top: 8px;
        color: var(--color-text);
    }

    /* Instructor: M is bold (as it used to be) */
    .section-instructor .instructor-info .lead-text::first-letter {
        font-weight: 700;
    }

    /* Untold Story: M matches Instructor (bold) */
    .section-problem .problem-text-body .lead-text::first-letter {
        font-weight: 700;
    }

    /* Problem + Instructor: Chromium / Safari paint floated ::first-letter ~11px low; Firefox/Gecko does not
       (html.ua-chromium / html.ua-safari set in script.js) */
    html.ua-chromium .section-instructor .instructor-info .lead-text::first-letter,
    html.ua-chromium .section-problem .problem-text-body .lead-text::first-letter,
    html.ua-safari .section-instructor .instructor-info .lead-text::first-letter,
    html.ua-safari .section-problem .problem-text-body .lead-text::first-letter {
        margin-top: -11px;
    }

    /* System: T is bold, with positional tweaks */
    .section-system .system-text .lead-text::first-letter {
        font-weight: 700;
        margin-left: -7px;
        margin-top: -7px;
        padding-right: 14px; /* 7px shared + 7px extra gap */
    }

    /* Mobile-only emphasis (used right after the drop cap, e.g. "ost of us") */
    .bold-mobile {
        font-weight: 700;
    }

    .section-instructor .instructor-info p:not(.lead-text) {
        font-size: 16px;
        line-height: 1.55;
    }

    .instructor-info .section-label,
    .problem-text .section-label,
    .system-text .section-label {
        text-align: center;
    }

    .instructor-signature-image {
        height: 30px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .feature-card {
        padding: 26px 32px;
        padding-top: 180px; /* preserve space for the absolutely-positioned image */
    }

    .feature-card h3 {
        line-height: 1.45;
    }

    .feature-card p {
        line-height: 1.6;
    }

    .families-grid {
        grid-template-columns: 1fr;
        margin-bottom: 26px;
    }

    .family-card:last-child {
        grid-column: auto;
        max-width: none;
        justify-self: stretch;
    }

    .highlights-closing {
        padding-top: 36px;
    }

    .curriculum-closing {
        margin-top: 36px;
    }

    .feature-icon-wrap {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .home-kitchen-inner {
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: 24px 20px;
        gap: 16px;
        border-left: 1px solid rgba(0,0,0,0.06);
        border-top: 4px solid var(--color-primary);
    }

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

    /* Version A responsive */
    .pillars-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: 0 auto;
    }

    .pillar-card {
        padding: 36px 28px 32px;
    }

    .pillar-number {
        font-size: 44px;
    }

    /* Version B responsive */
    .benefit-row {
        flex-direction: column;
        gap: 16px;
        padding: 28px 0;
    }

    .benefit-row-icon {
        width: 56px;
        height: 56px;
    }

    .benefits-bottom-statement {
        padding: 28px 24px;
    }

    .benefits-bottom-statement p {
        font-size: 19px;
    }

    /* Version C responsive */
    .impact-grid {
        grid-template-columns: 1fr;
    }

    .impact-card--hero {
        padding: 36px 24px;
    }

    .impact-card--hero h3 {
        font-size: 24px;
    }

    .impact-stat {
        font-size: 56px;
    }

    .impact-card:not(.impact-card--hero) {
        padding: 32px 24px;
    }

    /* Version D mobile */
    .benefits-split-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .benefits-visual-wrap {
        max-width: 300px;
        margin: 0 auto;
    }

    .benefits-visual-keyword {
        font-size: 36px;
    }

    .benefits-visual-card {
        padding: 36px 32px;
    }

    .benefits-split-content .section-title {
        text-align: center !important;
    }

    .benefits-split-content .section-label {
        text-align: center;
    }

    .curriculum-grid {
        gap: 12px;
    }

    .curriculum-grid .included-card {
        flex: 0 1 100%;
        border-color: var(--color-border-dark);
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
    }

    .pricing-featured {
        transform: none;
    }

    .pricing-featured:hover {
        transform: none;
    }

    .proof-banner {
        gap: 32px;
    }

    .proof-divider {
        display: none;
    }

    .proof-banner {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .guarantee-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 40px 28px;
    }

    .guarantee-badges {
        justify-content: center;
    }

    /* On mobile the grid is single-column; flow the items by HTML order
       (head → visual → body) and let the image span the full viewport. */
    .problem-grid {
        grid-template-columns: 1fr;
        gap: 8px; /* reduced by 24px */
    }

    /* Reset the desktop placement so items auto-flow by source order. */
    .problem-text-head,
    .problem-text-body,
    .problem-visual {
        grid-column: auto;
        grid-row: auto;
    }

    .system-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    /* Mobile: "More Than Recipes" image becomes full-width strip */
    .section-system .system-grid > .system-visual:not(.system-visual--inline) {
        display: none;
    }

    .section-system .system-visual--inline {
        display: block;
        float: none;
        width: auto;
        max-width: none;
        height: var(--journey-card-mobile-height, 200px);
        margin: 25px 0 23px;
    }

    .section-system .system-visual--inline .journey-card {
        width: 100%;
        height: 100%;
        padding: 0;
        border-radius: var(--hero-scroller-radius, 8px);
    }

    /* Keep the "badges"/steps aligned with paragraph gutters */
    .section-system .system-steps {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Clear the float for content below in this section */
    .section-system .system-text::after {
        content: "";
        display: block;
        clear: both;
    }

    .problem-visual {
        margin-left: -15px;   /* cancel .container side padding (mobile = 15px) */
        margin-right: -15px;
        margin-top: -18px;    /* trim 18px off the gap above the image only */
    }

    /* Mobile: move "Untold Story" image into first paragraph flow (float left) */
    .section-problem .problem-grid > .problem-visual:not(.problem-visual--inline) {
        display: none;
    }

    .section-problem .problem-visual--inline-right,
    .section-problem .problem-visual--inline-left {
        display: block;
        height: 220px;
    }

    .section-problem .problem-visual--inline-right {
        width: 137px;
        float: right;
        margin: 6px -20px 16px 22px;
    }

    .section-problem .problem-visual--inline-left {
        display: none;
        width: 140px;
        float: left;
        margin: 6px 20px 16px -20px;
    }

    .section-problem .problem-visual--inline-right .comparison-card,
    .section-problem .problem-visual--inline-left .comparison-card {
        width: 100%;
        height: 100%;
        max-width: none;
        aspect-ratio: auto;
        margin: 0;
        border-radius: 14px 0 0 14px;
        border: 0;
        box-shadow: none;
    }

    .section-problem .problem-visual--inline-left .comparison-card {
        border-radius: 0 14px 14px 0;
    }

    /* Control which side of the photo is visible */
    .section-problem .problem-visual--inline-right .card-fill-image {
        background-position: center;
        background-size: cover;
    }

    .section-problem .problem-visual--inline-left .card-fill-image {
        background-position: right center;
    }

    /* Clear float so following content lays out normally */
    .section-problem .problem-text-body::after {
        content: "";
        display: block;
        clear: both;
    }

    .comparison-card {
        margin-top: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        border-top: 0;
        box-shadow: none;
        /* aspect-ratio is set inline by JS from the natural image dimensions. */
    }

    .family-card {
        gap: 16px;
        padding: 24px;
        padding-top: 80px;
    }

    .family-number {
        font-size: 32px;
        width: 44px;
    }

    .stat-number {
        font-size: 44px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .hero-badge {
        font-size: 11px;
        padding: 6px 14px;
    }

    .pricing-header {
        padding: 32px 24px 24px;
    }

    .pricing-body {
        padding: 24px;
    }

    .price-amount {
        font-size: 52px;
    }

    .section-header {
        margin-bottom: 38px;
    }

    .section-title {
        font-size: clamp(30px, 6vw, 36px);
    }

    .guarantee-card {
        padding: 32px 20px;
    }
}


/* =================================================================
   MOBILE RESET (auto-generated by generate-mobile-reset.js)
   --------------------------------------------------------
   The desktop ×1.0677 rescale unavoidably scaled px values
   in BASE CSS rules that did not have a mobile @media
   override. This block restores those values to their
   ORIGINAL (pre-scale) numbers for ≤739px viewports only,
   so mobile is pixel-identical to the pre-scale build.
   Properties already overridden in any mobile @media (incl.
   shorthand/longhand) are skipped.
   ================================================================= */
@media (max-width: 739px) {
    :root {
        --container-width: 1200px;
        --container-narrow: 800px;
        --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
        --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
        --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
        --shadow-xl: 0 16px 60px rgba(0,0,0,0.16);
        --radius-sm: 6px;
        --radius-md: 12px;
        --radius-lg: 20px;
        --radius-xl: 28px;
    }
    .section-header {
        max-width: 780px;
    }
    .section-label {
        font-size: 13px;
        letter-spacing: 2.5px;
        margin-bottom: 16px;
    }
    .section-title {
        margin-bottom: 20px;
    }
    .section-subtitle {
        max-width: 640px;
    }
    .lead-text {
        font-size: 19px;
        margin-bottom: 20px;
    }
    .btn {
        gap: 10px;
    }
    .btn-primary:hover {
        box-shadow: 0 6px 24px rgba(var(--color-primary-rgb), 0.35);
    }
    .navbar {
        padding: 16px 0;
    }
    .navbar.scrolled {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 10px 0;
        box-shadow: 0 2px 20px rgba(0,0,0,0.3);
    }
    .nav-container {
        padding: 0 24px;
    }
    .nav-logo {
        gap: 10px;
    }
    .nav-links a {
        font-size: 14px;
        letter-spacing: 0.3px;
    }
    .nav-cta {
        font-size: 14px;
        padding: 10px 24px;
    }
    .mobile-toggle {
        gap: 5px;
        padding: 4px;
    }
    .mobile-toggle span {
        width: 24px;
    }
    .nav-cta-mobile {
        font-size: 14px;
    }
    .hero-content {
        max-width: 860px;
    }
    .hero-badge {
        gap: 8px;
        border-radius: 100px;
        margin-bottom: 32px;
    }
    .badge-dot {
        width: 8px;
        height: 8px;
    }
    .hero-title {
        margin-bottom: 26px;
        letter-spacing: -0.5px;
    }
    .hero-subtitle {
        max-width: 720px;
    }
    .trust-item {
        gap: 8px;
        font-size: 14px;
    }
    .problem-text p {
        margin-bottom: 16px;
    }
    .comparison-side {
        padding: 32px;
    }
    .comparison-side h4 {
        font-size: 20px;
        margin-bottom: 16px;
    }
    .comparison-side ul {
        gap: 10px;
    }
    .comparison-side ul li {
        font-size: 15px;
        padding-left: 24px;
    }
    .comparison-new ul li::before {
        font-size: 12px;
        top: 3px;
    }
    .comparison-divider {
        padding: 12px;
    }
    .comparison-divider span {
        font-size: 20px;
    }
    .section-instructor {
        background-image: linear-gradient(to bottom, var(--color-cream-top) 0, var(--color-cream) 800px),
        
        linear-gradient(to bottom, var(--color-cream) 0, var(--color-cream-top) 200px);
        background-size: 100% 800px, 100% 200px;
    }
    .instructor-photo-placeholder {
        gap: 12px;
    }
    .placeholder-text {
        font-size: 14px;
    }
    .instructor-badge-card {
        bottom: -20px;
        right: -20px;
        padding: 20px 28px;
    }
    .badge-number {
        font-size: 48px;
    }
    .badge-label {
        font-size: 12px;
        letter-spacing: 0.5px;
    }
    .instructor-info .section-title {
        margin-bottom: 24px;
    }
    .instructor-info p {
        margin-bottom: 16px;
    }
    .instructor-signature {
        margin-top: 26px;
        margin-bottom: 24px;
    }
    .instructor-signature-printed-name {
        margin-top: 14px;
        font-size: 14px;
    }
    .instructor-signature-title {
        margin-top: 4px;
        font-size: 13px;
    }
    .instructor-credentials {
        gap: 20px;
        margin-top: 32px;
    }
    .instructor-credentials.instructor-credentials--badges {
        margin-top: 30px;
    }
    .instructor-badges-panel {
        padding: 20px 12px;
    }
    .instructor-badges {
        gap: 12px;
    }
    .instructor-badge {
        gap: 12px;
    }
    .instructor-badge-text strong {
        font-size: 14px;
    }
    .instructor-badge-text span {
        margin-top: 4px;
        font-size: 13px;
    }
    .credential {
        gap: 16px;
    }
    .credential-icon {
        font-size: 28px;
        width: 48px;
        height: 48px;
    }
    .credential strong {
        font-size: 15px;
    }
    .credential span {
        font-size: 14px;
    }
    .feature-card:hover {
        transform: translateY(-4px);
    }
    .feature-card-image {
        height: 160px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 25px), 0 100%);
    }
    .feature-icon-wrap {
        top: 126px;
    }
    .feature-icon {
        width: 56px;
        height: 56px;
        font-size: 28px;
    }
    .feature-card h3 {
        font-size: 22px;
        margin-bottom: 12px;
    }
    .feature-card p {
        font-size: 15px;
    }
    .highlights-home-kitchen {
        margin-top: 48px;
    }
    .home-kitchen-inner {
        box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    }
    .home-kitchen-icon {
        width: 52px;
        height: 52px;
        box-shadow: 0 4px 12px rgba(199, 155, 64, 0.3);
    }
    .home-kitchen-text strong {
        font-size: 19px;
        margin-bottom: 6px;
    }
    .home-kitchen-text p {
        font-size: 15px;
    }
    .families-grid {
        gap: 20px;
    }
    .family-card-image {
        height: 120px;
    }
    .family-content {
        gap: 4px;
    }
    .family-content h3 {
        font-size: 20px;
        margin-bottom: 8px;
    }
    .family-content p {
        font-size: 15px;
        margin-bottom: 12px;
    }
    .family-tag {
        font-size: 11px;
        letter-spacing: 1.5px;
        padding: 4px 12px;
        border-radius: 100px;
    }
    .families-cta {
        padding-top: 20px;
    }
    .families-cta p {
        margin-bottom: 28px;
        max-width: 600px;
    }
    .highlights-closing p {
        margin-bottom: 28px;
        max-width: 600px;
    }
    .system-text .section-title {
        margin-bottom: 24px;
    }
    .system-steps {
        gap: 28px;
        margin-top: 36px;
    }
    .system-step {
        gap: 20px;
    }
    .step-number {
        width: 44px;
        height: 44px;
        min-width: 44px;
        font-size: 20px;
    }
    .system-step h4 {
        font-size: 19px;
        margin-bottom: 6px;
    }
    .system-step p {
        font-size: 15px;
    }
    .journey-card {
        padding: 40px;
    }
    .journey-card h4 {
        font-size: 22px;
        margin-bottom: 32px;
    }
    .journey-node {
        gap: 16px;
        padding: 14px 0;
        padding-left: 32px;
    }
    .journey-node::before {
        left: 8px;
    }
    .node-dot {
        width: 14px;
        height: 14px;
    }
    .journey-node.final .node-dot {
        width: 18px;
        height: 18px;
        box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.3);
    }
    .journey-node span {
        font-size: 15px;
    }
    .health-grid {
        gap: 24px;
    }
    .health-card {
        padding: 36px;
    }
    .health-icon {
        margin-bottom: 16px;
    }
    .health-card h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }
    .health-card p {
        font-size: 15px;
    }
    .health-cta {
        margin-top: 48px;
        padding-top: 40px;
    }
    .health-cta p {
        font-size: 17px;
        margin-bottom: 28px;
        max-width: 600px;
    }
    .version-label {
        margin-bottom: 56px;
        padding: 14px 28px;
        letter-spacing: 3px;
        font-size: 14px;
    }
    .version-separator {
        height: 6px;
        background: repeating-linear-gradient(
        90deg,
        var(--color-primary) 0,
        var(--color-primary) 24px,
        transparent 24px,
        transparent 48px
    );
    }
    .pillars-grid {
        gap: 28px;
    }
    .pillar-card {
        border-top: 4px solid var(--color-primary);
    }
    .pillar-card:hover {
        transform: translateY(-4px);
    }
    .pillar-number {
        margin-bottom: 20px;
    }
    .pillar-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 20px;
    }
    .pillar-card h3 {
        font-size: 22px;
        margin-bottom: 16px;
    }
    .pillar-card p {
        font-size: 15px;
        margin-bottom: 12px;
    }
    .pillars-closing {
        margin-top: 56px;
        padding-top: 44px;
    }
    .pillars-closing .closing-statement {
        font-size: 22px;
        margin-bottom: 28px;
    }
    .benefits-list-vb {
        max-width: 860px;
    }
    .benefit-row-icon {
        margin-top: 4px;
    }
    .benefit-row-content h3 {
        font-size: 22px;
        margin-bottom: 12px;
    }
    .benefit-row-content p {
        font-size: 15px;
    }
    .benefits-bottom-statement {
        margin-top: 48px;
    }
    .benefits-bottom-statement p {
        margin-bottom: 24px;
    }
    .impact-grid {
        gap: 24px;
    }
    .impact-card--hero h3 {
        margin-bottom: 16px;
    }
    .impact-card--hero p {
        font-size: 16px;
        max-width: 760px;
    }
    .impact-eyebrow {
        gap: 16px;
        margin-bottom: 28px;
    }
    .impact-stat-label {
        font-size: 14px;
        letter-spacing: 0.5px;
    }
    .impact-card:not(.impact-card--hero):hover {
        transform: translateY(-4px);
    }
    .impact-card-accent {
        width: 48px;
        height: 4px;
        margin-bottom: 24px;
    }
    .impact-card:not(.impact-card--hero) h3 {
        font-size: 22px;
        margin-bottom: 14px;
    }
    .impact-card:not(.impact-card--hero) p {
        font-size: 15px;
    }
    .impact-closing {
        margin-top: 48px;
        padding-top: 40px;
    }
    .impact-closing p {
        font-size: 22px;
        margin-bottom: 24px;
    }
    .benefits-visual-keyword {
        letter-spacing: -0.5px;
        padding: 20px 0;
    }
    .benefits-visual-badge {
        bottom: -20px;
        right: -20px;
        padding: 20px 28px;
    }
    .benefits-visual-badge .badge-number {
        font-size: 48px;
    }
    .benefits-visual-badge .badge-label {
        font-size: 12px;
        letter-spacing: 0.5px;
    }
    .benefits-split-list {
        margin-top: 32px;
    }
    .benefits-split-list .benefit-row {
        padding: 24px 0;
    }
    .section-curriculum {
        background-image: linear-gradient(to bottom, var(--color-cream-top) 0, var(--color-cream) 800px),
        
        linear-gradient(to bottom, var(--color-cream) 0, var(--color-cream-top) 200px);
        background-size: 100% 800px, 100% 200px;
    }
    .included-card {
        padding: 36px 28px;
    }
    .included-card:hover {
        transform: translateY(-4px);
    }
    .included-icon {
        margin-bottom: 20px;
    }
    .included-card h3 {
        font-size: 20px;
        margin-bottom: 12px;
    }
    .included-card p {
        font-size: 15px;
    }
    .curriculum-closing-card {
        max-width: 560px;
    }
    .curriculum-closing-icon {
        margin-bottom: 16px;
    }
    .curriculum-closing-card h3 {
        font-size: 22px;
        margin-bottom: 12px;
    }
    .curriculum-closing-card p {
        margin-bottom: 24px;
    }
    .curriculum-trust {
        gap: 32px;
        margin-top: 20px;
    }
    .curriculum-trust-item {
        gap: 6px;
        font-size: 14px;
    }
    .section-variety {
        padding: 100px 0;
    }
    .variety-content {
        max-width: 800px;
    }
    .variety-tags {
        gap: 12px;
        margin-top: 40px;
    }
    .variety-tag {
        font-size: 14px;
        padding: 10px 20px;
        border-radius: 100px;
    }
    .section-proof {
        padding: 80px 0;
    }
    .stat-number {
        margin-bottom: 8px;
    }
    .stat-label {
        font-size: 14px;
    }
    .proof-divider {
        height: 60px;
    }
    .pricing-grid {
        gap: 32px;
    }
    .pricing-badge {
        right: 32px;
        font-size: 12px;
        padding: 8px 16px;
    }
    .pricing-name {
        font-size: 26px;
        margin-bottom: 4px;
    }
    .pricing-tagline {
        font-size: 14px;
        margin-bottom: 20px;
    }
    .pricing-price {
        gap: 4px;
    }
    .price-currency {
        font-size: 28px;
        margin-top: 8px;
    }
    .price-period {
        font-size: 14px;
        margin-bottom: 8px;
        margin-left: 4px;
    }
    .pricing-includes-note {
        font-size: 15px;
        margin-bottom: 28px;
    }
    .pricing-features {
        gap: 14px;
        margin-bottom: 32px;
    }
    .pricing-features li {
        gap: 12px;
        font-size: 15px;
    }
    .pricing-single-wrapper {
        max-width: 780px;
    }
    .pricing-single-name {
        margin-bottom: 16px;
    }
    .pricing-single-price-row {
        gap: 20px;
        margin-bottom: 8px;
    }
    .pricing-single-otp {
        font-size: 11px;
        letter-spacing: 2.5px;
        margin-bottom: 20px;
    }
    .pricing-single-separator {
        gap: 16px;
        margin-top: 24px;
    }
    .pricing-single-col-title {
        font-size: 14px;
        letter-spacing: 1.5px;
        margin-bottom: 16px;
    }
    .pricing-single-col ul {
        gap: 14px;
    }
    .pricing-single-col li {
        gap: 12px;
        font-size: 15px;
    }
    .pricing-trust-bar {
        gap: 32px;
        margin-top: 40px;
    }
    .pricing-trust-item {
        gap: 6px;
        font-size: 14px;
    }
    .pricing-single-trust {
        margin-top: 20px;
    }
    .pricing-single-trust-item {
        gap: 6px;
        font-size: 13.5px;
    }
    .pricing-single-reassurance {
        margin-top: 28px;
    }
    .pricing-single-reassurance p {
        font-size: 15px;
        max-width: 560px;
    }
    .section-guarantee {
        background-image: linear-gradient(to bottom, var(--color-cream-top) 0, var(--color-cream) 800px),
        
        linear-gradient(to bottom, var(--color-cream) 0, var(--color-cream-top) 200px);
        background-size: 100% 800px, 100% 200px;
        padding: 100px 0;
    }
    .guarantee-card {
        gap: 40px;
        max-width: 860px;
    }
    .guarantee-content h2 {
        font-size: 28px;
        margin-bottom: 16px;
    }
    .guarantee-content p {
        font-size: 16px;
        margin-bottom: 12px;
    }
    .guarantee-badges {
        gap: 24px;
        margin-top: 24px;
    }
    .g-badge {
        gap: 8px;
        font-size: 13px;
    }
    .faq-list {
        max-width: 780px;
        gap: 8px;
    }
    .faq-question {
        gap: 16px;
        padding: 22px 28px;
        font-size: 16px;
    }
    .faq-answer {
        padding: 0 28px;
    }
    .faq-item.open .faq-answer {
        max-height: 400px;
        padding: 0 28px 24px;
    }
    .faq-answer p {
        font-size: 15px;
    }
    .final-cta-content {
        max-width: 680px;
    }
    .final-cta-content .section-title {
        margin-bottom: 24px;
    }
    .final-cta-content .lead-text {
        margin-bottom: 40px;
    }
    .final-cta-buttons {
        margin-bottom: 24px;
    }
    .final-cta-guarantee {
        gap: 8px;
        font-size: 14px;
    }
    .footer {
        padding: 48px 0;
    }
    .footer-content {
        gap: 24px;
    }
    .footer-brand p {
        font-size: 14px;
        margin-top: 12px;
    }
    .footer-links {
        gap: 24px;
    }
    .footer-links a {
        font-size: 14px;
    }
    .footer-legal {
        padding-top: 24px;
        gap: 12px;
    }
    .footer-legal p {
        font-size: 13px;
    }
    .footer-legal-links {
        gap: 20px;
    }
    .footer-legal-links a {
        font-size: 13px;
    }

    /* SVG icon sizes — revert to pre-scale dimensions on mobile.
       Their width/height are baked into the HTML attributes (which
       have no media-query mechanism), so we override them here
       using attribute selectors. */
    svg[width="17.1"] { width: 16px;  height: 16px;  }
    svg[width="19.2"] { width: 18px;  height: 18px;  }
    svg[width="21.4"] { width: 20px;  height: 20px;  }
    svg[width="25.6"] { width: 24px;  height: 24px;  }
    svg[width="29.9"] { width: 28px;  height: 28px;  }
    svg[width="34.2"] { width: 32px;  height: 32px;  }
    svg[width="68.3"] { width: 64px;  height: 64px;  }
    svg[width="76.9"] { width: 72px;  height: 72px;  }
}

/* =========================================================
   Cookie banner, cookie settings dialog, legal modals
   ========================================================= */

.nbm-cookie-banner {
    position: fixed;
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    left: auto;
    max-width: 26.5rem;
    z-index: 9998;
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text);
    background: linear-gradient(165deg, #fffefb 0%, var(--color-warm-white) 45%, var(--color-cream-top) 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 1rem 1.125rem;
}

.nbm-cookie-banner-inner {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.nbm-cookie-banner-text {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

.nbm-cookie-banner-text a {
    color: var(--color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.nbm-cookie-banner-text a:hover {
    color: var(--color-primary);
}

.nbm-cookie-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.nbm-cookie-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 166px;
    height: 40px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 0.95rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
}

/* Match .btn-outline / .btn-primary (site CTAs) */
.nbm-cookie-btn--outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.nbm-cookie-btn--outline:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.nbm-cookie-btn--primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.nbm-cookie-btn--primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6.4px 25.6px rgba(var(--color-primary-rgb), 0.35);
}

@media (max-width: 520px) {
    .nbm-cookie-banner {
        right: max(12px, env(safe-area-inset-right, 0px));
        left: max(12px, env(safe-area-inset-left, 0px));
        max-width: none;
    }

    .nbm-cookie-banner-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .nbm-cookie-btn {
        width: 100%;
        text-align: center;
    }
}

/* Cookie settings dialog — Nordic palette (matches landing tokens) */
.cookie-consent {
    --bg-color: var(--color-warm-white);
    --text-color: var(--color-text);
    --text-light: var(--color-text-light);
    --border-color: var(--color-border);
    --bg-light: var(--color-cream);
    --primary-color: var(--color-primary);
    --primary-dark: var(--color-primary-dark);
    --success-color: var(--color-success);
    --error-color: var(--color-error);
}

.cookie-consent {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px var(--nbm-popup-pad-right) 20px var(--nbm-popup-pad-left);
    box-sizing: border-box;
}

/* Cookie dialog + legal (modal & pages): headings use body type like copy */
.cookie-consent-content h1,
.cookie-consent-content h2,
.cookie-consent-content h3,
.cookie-consent-content h4,
.cookie-consent-content h5,
.cookie-consent-content h6,
.nbm-legal-panel-title,
.legal-doc-content h1,
.legal-doc-content h2,
.legal-doc-content h3,
.legal-doc-content h4,
.legal-doc-content h5,
.legal-doc-content h6,
.nbm-legal-standalone__header h1 {
    font-family: var(--font-body);
}

.cookie-consent-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 22, 18, 0.58);
    backdrop-filter: blur(5px);
}

.cookie-consent-content {
    position: relative;
    background: linear-gradient(180deg, #fffefb 0%, var(--bg-color) 35%, var(--color-cream-top) 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cookie-consent-scrollable {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    padding-bottom: 1rem;
}

.cookie-consent-header {
    margin-bottom: 1.5rem;
}

.cookie-consent-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.75rem;
}

.cookie-consent-description {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
}

.cookie-consent-categories {
    margin-bottom: 1.5rem;
}

.cookie-category {
    padding: 1rem;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.cookie-category:last-child {
    margin-bottom: 0;
}

.cookie-category-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.cookie-category-label {
    display: flex;
    flex-direction: column;
    flex: 1;
    cursor: pointer;
}

.cookie-category-name {
    font-weight: 600;
    color: var(--text-color);
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.cookie-category-desc {
    font-size: 0.875rem;
    color: var(--text-light);
}

.cookie-category-details {
    font-size: 0.875rem;
    color: var(--text-light);
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 0;
    display: none;
}

.cookie-category-details.visible {
    display: block;
    margin-top: 0.5rem;
}

.cookie-category-gpc-note {
    margin: 0.6rem 0 0 0;
    padding: 0.6rem 0.8rem;
    background: #fff8f0;
    border: 1px solid #d4a84b;
    border-radius: 6px;
    color: #6e4a05;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.cookie-read-more {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.813rem;
    white-space: nowrap;
    display: block;
    text-align: center;
    margin-top: 1.2rem;
    position: relative;
    top: 6px;
}

.cookie-read-more:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.cookie-toggle-container {
    flex-shrink: 0;
    margin-left: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cookie-toggle {
    display: none;
}

.cookie-toggle-label {
    display: inline-block;
    width: 50px;
    height: 28px;
    margin-right: -10px;
    background-color: var(--color-border-dark);
    border-radius: 14px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
}

.cookie-toggle-label::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: white;
    top: 3px;
    left: 3px;
    transition: transform 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cookie-toggle:checked + .cookie-toggle-label {
    background-color: var(--color-primary);
}

.cookie-toggle:checked + .cookie-toggle-label::after {
    transform: translateX(22px);
}

.cookie-toggle:disabled + .cookie-toggle-label {
    opacity: 0.6;
    cursor: not-allowed;
}

.cookie-consent-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.cookie-consent-links a {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s;
}

.cookie-consent-links a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.cookie-consent-page-view {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.cookie-consent-page-header {
    padding: 1.5rem 2rem 1rem 2rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.cookie-consent-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.25rem 0;
    margin-bottom: 0.75rem;
    transition: color 0.2s;
}

.cookie-consent-back-btn:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.cookie-consent-page-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.cookie-consent-page-body {
    padding: 1.5rem 2rem;
    overflow-y: auto;
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.7;
}

.cookie-consent-page-body h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.cookie-consent-page-body h2:first-child {
    margin-top: 0;
}

.cookie-consent-page-body h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.cookie-consent-page-body p {
    margin-bottom: 0.75rem;
    color: var(--text-color);
}

.cookie-consent-page-body ul,
.legal-doc-content ul {
    margin-bottom: 0.75rem;
    padding-left: 1.25rem;
}

.cookie-consent-page-body li,
.legal-doc-content li {
    margin-bottom: 0.4rem;
}

.cookie-consent-page-body a {
    color: var(--primary-color);
}

.cookie-consent-page-body a:hover {
    color: var(--primary-dark);
}

.legal-doc-content a {
    color: var(--color-primary);
}

.legal-doc-content a:hover {
    color: var(--color-primary-dark);
}

.cookie-consent-page-body table {
    font-size: 0.85rem;
}

.cookie-consent-page-body code {
    background: var(--bg-light);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-size: 0.85em;
}

.cookie-consent-loading {
    text-align: center;
    padding: 2rem 0;
    color: var(--text-light);
}

.cookie-consent-error {
    margin: 1rem 1.25rem;
    padding: 0.55rem 0.65rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text);
    border: 1px solid var(--color-error);
    background: linear-gradient(180deg, #fce8e8 0%, #efd6d6 100%);
    text-align: left;
}

.cookie-consent-actions {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    background: var(--bg-color);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.cookie-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.1rem 1.5rem;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    flex: 1;
    min-width: 0;
    font-family: var(--font-body);
    text-decoration: none;
}

/* Match .btn-outline — secondary action in modal footer */
.cookie-btn-essential {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.cookie-btn-essential:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

/* Match .btn-primary */
.cookie-btn-accept {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.cookie-btn-accept:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6.4px 25.6px rgba(var(--color-primary-rgb), 0.35);
}

/* Legal document modal (footer) */
.nbm-legal-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px var(--nbm-popup-pad-right) 20px var(--nbm-popup-pad-left);
    box-sizing: border-box;
}

.nbm-legal-modal[hidden] {
    display: none !important;
}

.nbm-legal-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(26, 22, 18, 0.55);
    backdrop-filter: blur(5px);
}

.nbm-legal-panel {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    background: linear-gradient(180deg, #fffefb 0%, var(--color-warm-white) 40%, var(--color-cream-top) 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1;
}

.nbm-legal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.nbm-legal-panel-title {
    margin: 0;
    font-size: 1.5rem;
    color: var(--color-text);
}

.nbm-legal-close {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: transparent;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.nbm-legal-close:hover {
    background: var(--color-cream);
    color: var(--color-text);
}

.nbm-legal-body {
    overflow-y: auto;
    padding: 1.5rem 1.5rem 2rem;
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--color-text);
}

.legal-doc-content section {
    margin-bottom: 1.5rem;
}

.legal-doc-content h2 {
    font-size: 1.1rem;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}

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

.legal-doc-content h3 {
    font-size: 1rem;
    margin-top: 1rem;
    margin-bottom: 0.4rem;
}

.legal-doc-content p {
    margin-bottom: 0.75rem;
}

.legal-doc-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.85rem;
}

.legal-doc-content th,
.legal-doc-content td {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--color-border);
    text-align: left;
}

.legal-doc-content thead tr {
    background: var(--color-cream);
}

.legal-doc-content code {
    background: var(--color-cream);
    padding: 0.12rem 0.35rem;
    border-radius: 3px;
    font-size: 0.88em;
}

@media (max-width: 638px) {
    .cookie-consent {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: var(--nbm-popup-pad-left);
        padding-right: var(--nbm-popup-pad-right);
    }

    .cookie-consent-scrollable {
        padding: 1.5rem;
        padding-bottom: 1rem;
    }

    .cookie-consent-header h2 {
        font-size: 1.25rem;
    }

    .cookie-category-header {
        flex-direction: row;
        align-items: flex-start;
    }

    .cookie-toggle-container {
        margin-left: 0.75rem;
    }

    .cookie-read-more {
        top: 9px;
    }

    .cookie-consent-actions {
        flex-direction: column;
        padding: 1rem 1.5rem;
        gap: 0.75rem;
    }

    .cookie-btn {
        width: 100%;
        min-width: auto;
    }

    .cookie-consent-links {
        flex-direction: column;
        gap: 0.5rem;
    }

    .cookie-consent-page-header {
        padding: 1rem 1.5rem 0.75rem 1.5rem;
    }

    .cookie-consent-page-body {
        padding: 1rem 1.5rem;
    }
}

/* Standalone legal pages (footer links) */
.nbm-legal-standalone {
    margin: 0;
    padding: 2rem max(1.25rem, env(safe-area-inset-left, 0px)) 3rem
        max(1.25rem, env(safe-area-inset-right, 0px));
    min-height: 100vh;
    background: var(--color-warm-white);
    color: var(--color-text);
}

.nbm-legal-standalone__header {
    max-width: 42rem;
    margin: 0 auto 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.nbm-legal-standalone__header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text);
}

.nbm-legal-standalone__back {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--color-primary);
}

.nbm-legal-standalone__back:hover {
    color: var(--color-primary-dark);
}

.nbm-legal-standalone .legal-doc-content {
    max-width: 42rem;
    margin: 0 auto;
    font-size: 0.9375rem;
    line-height: 1.75;
}

/* =========================================================
   Waiting list modal (CTA — purchase intent MVP)
   Body font only for headings; Nordic palette
   ========================================================= */
.nbm-waitlist-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: max(16px, env(safe-area-inset-top, 0px));
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    padding-left: var(--nbm-popup-pad-left);
    padding-right: var(--nbm-popup-pad-right);
    box-sizing: border-box;
}

.nbm-waitlist-modal[hidden] {
    display: none !important;
}

.nbm-waitlist-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(26, 22, 18, 0.55);
    backdrop-filter: blur(5px);
}

.nbm-waitlist-dialog {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: min(92vh, 900px);
    overflow-y: auto;
    z-index: 1;
    padding: 1.75rem 1.5rem 1.5rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: linear-gradient(180deg, #fffefb 0%, var(--color-warm-white) 45%, var(--color-cream-top) 100%);
    box-shadow: var(--shadow-xl);
}

.nbm-waitlist-close {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: transparent;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.nbm-waitlist-close:hover {
    background: var(--color-cream);
    color: var(--color-text);
}

.nbm-waitlist-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.nbm-waitlist-msg-card,
.nbm-waitlist-form-card {
    padding: 1.35rem 1.25rem;
    border-radius: var(--radius-sm);
    background: #fffefb;
}

.nbm-waitlist-form-card {
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.nbm-waitlist-msg-card {
    text-align: center;
}

.nbm-waitlist-msg-card--left {
    text-align: left;
}

.nbm-waitlist-heading-accent {
    font-family: var(--font-body);
    font-size: 23px;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin: 0 0 0.75rem;
    line-height: 1.35;
}

.nbm-waitlist-msg-card p {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--color-text-light);
    margin: 0 0 0.65rem;
}

.nbm-waitlist-msg-card p:last-child {
    margin-bottom: 0;
}

.nbm-waitlist-form-title {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.nbm-waitlist-survey-heading {
    font-family: var(--font-body);
    font-size: 23px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin: 0;
}

.nbm-waitlist-survey-lede {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--color-text-light);
    margin: 0.5rem 0 0;
}

.nbm-waitlist-field {
    margin-bottom: 1rem;
}

.nbm-waitlist-field label {
    display: block;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.35rem;
}

.nbm-waitlist-input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-text);
    background: #fff;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.nbm-waitlist-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.18);
}

.nbm-waitlist-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-text-light);
    cursor: pointer;
}

.nbm-waitlist-checkbox-label span {
    font-weight: 400;
}

.nbm-waitlist-checkbox-label small {
    display: block;
    margin-top: 0.5rem;
    font-size: 13px;
    color: #777;
}

.nbm-waitlist-checkbox-label input[type="checkbox"] {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.15rem;
    cursor: pointer;
}

.nbm-waitlist-checkbox-label a {
    color: var(--color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 400;
}

.nbm-waitlist-checkbox-label a:hover {
    color: var(--color-primary);
}

.nbm-waitlist-privacy-note {
    margin: 0.7rem 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: #777;
    text-align: center;
}

.nbm-waitlist-privacy-note a {
    color: var(--color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 400;
}

.nbm-waitlist-privacy-note a:hover {
    color: var(--color-primary);
}

.nbm-waitlist-req {
    color: var(--color-error);
}

.nbm-waitlist-submit {
    width: 100%;
    margin-top: 0;
    justify-content: center;
    text-align: center;
}

.nbm-waitlist-form-msg {
    margin-top: 0;
    margin-bottom: 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    line-height: 1.45;
    box-sizing: border-box;
}

.nbm-quiz-inline-notice,
.nbm-waitlist-form-msg--error,
.nbm-waitlist-form-msg--notice {
    padding: 0.55rem 0.65rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text);
    border: 1px solid var(--color-error);
    background: linear-gradient(180deg, #fce8e8 0%, #efd6d6 100%);
}

.nbm-waitlist-form-msg--success {
    padding: 0.55rem 0.65rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text);
    border: 1px solid var(--color-success);
    background: linear-gradient(180deg, #e8f3ea 0%, #d6e8da 100%);
}

.nbm-waitlist-form-msg--info {
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    line-height: 1.45;
    background: var(--color-cream);
    color: var(--color-text-light);
    border: 1px solid var(--color-border);
}

.nbm-quiz-actions .nbm-waitlist-form-msg {
    margin-bottom: 0;
}

/* Survey dropdowns (mirrors 8bitfun behaviour; Nordic tokens) */
.nbm-waitlist-thanks-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.nbm-waitlist-thanks-body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-text-light);
}

.nbm-waitlist-thanks-done {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.nbm-quiz-question {
    margin-bottom: 1.25rem;
}

.nbm-quiz-question-label {
    display: block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.nbm-quiz-select-hint {
    font-weight: 400;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.nbm-quiz-dropdown {
    position: relative;
}

.nbm-quiz-dropdown-toggle {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-sm);
    background: #fff;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    text-align: left;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.nbm-quiz-dropdown-toggle:hover {
    border-color: var(--color-primary-light);
}

.nbm-quiz-dropdown-toggle.active,
.nbm-quiz-dropdown-toggle.has-selection {
    border-color: var(--color-primary);
}

.nbm-quiz-dropdown-toggle.active {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.18);
}

.nbm-quiz-dropdown-toggle.active + .nbm-quiz-dropdown-menu {
    border-color: var(--color-primary);
}

.nbm-quiz-dropdown-placeholder {
    color: var(--color-text-muted);
}

.nbm-quiz-dropdown-selected {
    font-weight: 600;
    color: var(--color-text);
}

.nbm-quiz-dropdown-arrow {
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.nbm-quiz-dropdown-toggle.active .nbm-quiz-dropdown-arrow {
    transform: rotate(180deg);
}

.nbm-quiz-dropdown[data-nbm-opens-up='true'] .nbm-quiz-dropdown-toggle:not(.active) .nbm-quiz-dropdown-arrow {
    transform: rotate(180deg);
}

.nbm-quiz-dropdown[data-nbm-opens-up='true'] .nbm-quiz-dropdown-toggle.active .nbm-quiz-dropdown-arrow {
    transform: rotate(0deg);
}

.nbm-quiz-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 50;
    max-height: 240px;
    overflow-y: auto;
}

.nbm-quiz-dropdown[data-nbm-opens-up='true'] .nbm-quiz-dropdown-menu {
    top: auto;
    bottom: calc(100% + 4px);
}

.nbm-quiz-dropdown-menu.nbm-quiz-dropdown-menu--fit {
    max-height: none;
    overflow-y: visible;
}

.nbm-quiz-inline-notice {
    margin-top: 0.5rem;
}

/* Variant used when the notice is rendered ABOVE its associated control
   (e.g. the "select up to 3" cap message on Q2). Flips the existing
   top margin so the notice gets breathing room from the label/hint
   above it, and adds bottom spacing so it doesn't visually fuse with
   the dropdown's toggle button below it. */
.nbm-quiz-inline-notice.nbm-quiz-inline-notice--above {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* Regular-mode quiz: Q2 "select up to 3" cap notice sits below the
   dropdown (menu opens upward). */
.nbm-quiz-inline-notice.nbm-quiz-inline-notice--below {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

/* Regular-mode quiz popup only — extra spacing on the intro copy. */
body.nbm-mode-regular #nbm-wl-step-survey .nbm-waitlist-msg-card p:last-child {
    margin-top: 10px;
}

.nbm-quiz-open-field {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-sm);
    background: #fff;
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--color-text);
    min-height: 2.75rem;
    box-sizing: border-box;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.nbm-quiz-open-field::placeholder {
    color: var(--color-text-muted);
}

.nbm-quiz-open-field:hover {
    border-color: var(--color-primary-light);
}

.nbm-quiz-open-field:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.18);
}

.nbm-quiz-dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.875rem;
    transition: background var(--transition-fast);
}

.nbm-quiz-dropdown-item:last-child {
    border-bottom: none;
}

.nbm-quiz-dropdown-item:hover {
    background: var(--color-cream);
}

.nbm-quiz-dropdown-item input {
    margin-right: 0.65rem;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}

.nbm-quiz-dropdown-item input:checked + span {
    font-weight: 600;
    color: var(--color-primary-dark);
}

.nbm-quiz-skip-link {
    align-self: center;
    margin: 0;
    padding: 0.15rem 0.25rem;
    border: none;
    background: none;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-light);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.nbm-quiz-skip-link:hover {
    color: var(--color-text);
}

.nbm-quiz-skip-link:focus-visible {
    outline: none;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.18);
}

.nbm-quiz-actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.5rem;
}

.nbm-quiz-submit {
    width: 100%;
    justify-content: center;
    text-align: center;
}

@media (min-width: 521px) {
    .nbm-waitlist-heading-accent {
        font-size: 30px;
    }

    .nbm-waitlist-survey-heading {
        font-size: 30px;
    }

    .nbm-quiz-question-label {
        font-size: 16px;
    }
}

@media (max-width: 520px) {
    .nbm-waitlist-dialog {
        padding: 1.5rem 1.15rem 1.25rem;
    }

    .nbm-waitlist-msg-card,
    .nbm-waitlist-form-card {
        padding: 1.1rem 1rem;
    }

    .nbm-waitlist-msg-card {
        padding: 1.1rem 0rem;
    }

    .nbm-waitlist-form-card {
        padding: 1.1rem 1rem;
    }

    .nbm-waitlist-msg-card p {
        font-size: 15.5px;
    }

    .nbm-waitlist-submit {
        min-height: 60px;
        height: 60px;
    }

    .nbm-quiz-submit {
        min-height: 60px;
        height: 60px;
        justify-content: center;
        text-align: center;
    }

    .nbm-waitlist-thanks-done {
        min-height: 60px;
        height: 60px;
    }
}

/* ===== Contact form (rendered inside legal modal) =====================
   Visual language matches the waitlist form fields, but lives in the
   legal-doc-content typography so headings/paragraphs already look right. */
.nbm-contact-intro p {
    font-size: 1.05rem;
    line-height: 1.55;
}

.nbm-contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
}

.nbm-contact-list li {
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    line-height: 1.55;
}

.nbm-contact-list li:last-child {
    border-bottom: 0;
}

.nbm-contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.75rem;
}

.nbm-contact-form > button[type="submit"] {
    justify-content: center;
}

.nbm-contact-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.nbm-contact-field label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text, #2c2c2c);
}

.nbm-contact-req {
    color: var(--color-primary, #b8860b);
    margin-left: 0.15rem;
}

.nbm-contact-field input,
.nbm-contact-field textarea {
    font-family: inherit;
    font-size: 1rem;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    background: #fff;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
}

.nbm-contact-field textarea {
    resize: vertical;
    min-height: 140px;
}

.nbm-contact-field input:focus,
.nbm-contact-field textarea:focus {
    outline: none;
    border-color: var(--color-primary, #b8860b);
    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.15);
}

/* Honeypot — invisible to humans, present in DOM for bots. */
.nbm-contact-honey {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.nbm-contact-msg {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.95rem;
}

.nbm-contact-msg--success {
    background: #e8f5ec;
    color: #2d5a3d;
    border: 1px solid #4a7c59;
}

.nbm-contact-msg--error {
    background: #fdeaea;
    color: #8b2e26;
    border: 1px solid #c0392b;
}

.nbm-contact-msg--info {
    background: #f6f4f0;
    color: #5a5a5a;
    border: 1px solid #e5ddd0;
}

.nbm-contact-form-section {
    margin-top: 1.5rem;
}

.nbm-contact-privacy-note {
    font-size: 0.85rem;
    color: var(--color-text-light, #5a5a5a);
    line-height: 1.55;
    margin: 0 0 1rem 0;
}

.nbm-contact-privacy-note a {
    color: inherit;
    text-decoration: underline;
}

/* ===========================================================
   "What's Inside" (Curriculum) — MOBILE-ONLY accordion
   ===========================================================
   Below 740px each .included-card collapses to a compact
   "header row" (icon · title · chevron). The <p> description
   reveals when the user taps the card, mirroring the FAQ
   accordion pattern. The desktop layout is untouched — the
   chevron is display:none above the breakpoint and the layout
   overrides only kick in inside (max-width: 739px). */

/* Default (desktop): chevron is hidden entirely so the desktop
   card layout looks exactly as it did before this feature. */
.included-chevron {
    display: none;
}

@media (max-width: 739px) {
    /* Grid layout per card: [icon] [title]                [chevron]
       and on the second row the description spans full width. */
       .nbm-waitlist-field label {
             font-size: 14px;
         }

       .curriculum-grid .included-card {
        display: grid;
        grid-template-columns: auto 1fr auto;
        column-gap: 14px;
        align-items: center;
        text-align: left;
        padding: 16px 18px;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        /* Override the desktop hover translate — sticky on touch and
           feels jittery in this compact layout. */
        transform: none !important;
    }
    .curriculum-grid .included-card:hover {
        transform: none;
    }

    /* Icon — left column. Wrap it in a soft circle so it visually
       balances the chevron on the right. */
    .curriculum-grid .included-card .included-icon {
        grid-column: 1;
        grid-row: 1;
        width: 52px;
        height: 52px;
        margin-bottom: 0;
        background: rgba(var(--color-primary-rgb), 0.10);
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    /* The star icon on the "Nordic Bread Community" card uses the
       same circle treatment for visual consistency. */
    .curriculum-grid .included-card .included-icon.included-icon--star {
        background: rgba(var(--color-primary-rgb), 0.10);
    }

    /* Title — middle column. */
    .curriculum-grid .included-card h3 {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        font-size: 16px;
        line-height: 1.35;
    }

    /* Chevron — right column. */
    .curriculum-grid .included-card .included-chevron {
        grid-column: 3;
        grid-row: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--color-text-light);
        transition: transform 0.3s ease;
        flex-shrink: 0;
    }
    .curriculum-grid .included-card.open .included-chevron {
        transform: rotate(180deg);
    }

    /* Description — collapsed by default, expands on .open. We
       animate max-height + margin so the reveal feels like the FAQ.
       Using a generous max-height upper bound (600px) keeps the
       transition smooth regardless of how long the copy is, while
       overflow:hidden on the closed state keeps the chevron-only
       header tidy. */
    .curriculum-grid .included-card p {
        grid-column: 1 / -1;
        grid-row: 2;
        margin: 0;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.35s ease;
    }
    .curriculum-grid .included-card.open p {
        max-height: 600px;
        margin-top: 12px;
        opacity: 1;
    }

    /* The horizontal-variant card wraps h3+p in an extra <div>.
       display: contents promotes those children to be direct grid
       items so the grid placement rules above (h3 → col 2, p → full
       width row 2) just work — no separate ruleset needed. */
    .curriculum-grid .included-card--horizontal .included-card--horizontal-content {
        display: contents;
    }
}

/* =================================================================
   US "Notice at Collection" — shown only when geo-detection says
   the visitor is in the United States and we've auto-granted
   marketing consent. Slim, non-blocking, fits the site palette.
   ================================================================= */
.nbm-us-notice {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    background: rgba(28, 22, 14, 0.95);
    color: #f6efe0;
    font-family: var(--font-body);
    font-size: 14.4px;
    line-height: 1.5;
    padding: 10.7px max(15px, env(safe-area-inset-left, 0px)) calc(10.7px + env(safe-area-inset-bottom, 0px)) max(15px, env(safe-area-inset-right, 0px));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
    transform: translateY(0);
    transition: transform 0.32s ease, opacity 0.32s ease;
    opacity: 1;
    pointer-events: auto;
}
.nbm-us-notice[hidden] { display: none !important; }
.nbm-us-notice.is-dismissing {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
}
.nbm-us-notice-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
}
.nbm-us-notice-text {
    flex: 1 1 auto;
    margin: 0;
}
.nbm-us-notice-text a {
    color: var(--color-primary-light);
    font-weight: 600;
    text-decoration: underline;
}
.nbm-us-notice-text a:hover {
    color: #fff;
}
.nbm-us-notice-close {
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 6px 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.nbm-us-notice-close:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
}
@media (max-width: 599px) {
    .nbm-us-notice {
        font-size: 13.2px;
        padding: 9px max(12px, env(safe-area-inset-left, 0px)) calc(9px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-right, 0px));
    }
    .nbm-us-notice-inner {
        gap: 10px;
        flex-wrap: wrap;
    }
}

/* =================================================================
   Waitlist-mode tweaks. Active only when <body class="nbm-mode-waitlist">.
   Keeps the pricing-section card layout intact but hides the price
   block + payment icons, and gives the hero CTA the required 300px
   min-width on desktop.
   ================================================================= */
body.nbm-mode-waitlist .pricing-single-header .pricing-single-price,
body.nbm-mode-waitlist .pricing-single-header .pricing-single-otp,
body.nbm-mode-waitlist .pricing-single-bottom .payment-icons,
body.nbm-mode-waitlist .nbm-waitlist-only-hide {
    display: none !important;
}
body.nbm-mode-waitlist .pricing-single-bottom .nbm-inline-waitlist-form {
    display: block;
}
@media (min-width: 740px) {
    .nbm-waitlist-input {
        padding: 0.85rem 0.95rem;
    }
}

/* Inline waitlist form (waitlist mode pricing section). Reuses the
   same field styles as the popup form but is rendered directly in
   the pricing card. */
.nbm-inline-waitlist-form {
    display: none;
    max-width: 480px;
    margin: 0 auto;
    text-align: left;
}
.nbm-inline-waitlist-form .nbm-waitlist-field {
    margin-bottom: 14px;
}
.nbm-inline-waitlist-form .nbm-waitlist-input {
    width: 100%;
}
.nbm-inline-waitlist-form .nbm-waitlist-submit {
    width: 100%;
    margin-top: 8px;
}
.nbm-inline-waitlist-form .nbm-waitlist-consent {
    font-size: 12.5px;
    color: var(--color-text-light);
    line-height: 1.5;
    margin: 4px 0 12px;
}
.nbm-inline-waitlist-form .nbm-waitlist-consent a {
    color: var(--color-primary-dark);
    text-decoration: underline;
}
.nbm-inline-waitlist-form-msg {
    margin: 10px 0;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.45;
}
.nbm-inline-waitlist-form-msg--error {
    background: #fdeaea;
    color: #8b2e26;
    border: 1px solid #e6b4ae;
}
.nbm-inline-waitlist-form-msg--success {
    background: #e8f5ec;
    color: #2d5a3d;
    border: 1px solid #b6d3bd;
}

/* Waitlist-mode "incentives" section — reuses the guarantee section's
   spacing and palette but lists 3 small badges instead of one big
   guarantee badge. */
.section-waitlist-incentives {
    background: var(--color-cream);
    padding: 72px 0;
}
.waitlist-incentives-inner {
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
    padding: 0 24px;
}
.waitlist-incentives-title {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 22px;
    line-height: 1.25;
}
.waitlist-incentives-sub {
    color: var(--color-text-light);
    font-size: 17.1px;
    line-height: 1.6;
    margin-bottom: 26px;
}
.waitlist-incentives-grid {
    /* Flex + center: when the third incentive wraps onto its own
       row (2+1 layout), justify-content centers that lone item
       horizontally. Grid auto-fit would stretch it to the left. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}
.waitlist-incentive {
    flex: 0 1 290px;
    max-width: 100%;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    padding: 10px 16px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.waitlist-incentive-icon {
    color: var(--color-primary);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.waitlist-incentive h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    color: var(--color-text);
    margin: 0;
}
.waitlist-incentive p {
    color: var(--color-text-light);
    font-size: 16px;
    line-height: 1.55;
    margin: 0;
}
@media (max-width: 739px) {
    .section-waitlist-incentives {
        padding: 60px 0;
    }
    .waitlist-incentives-title {
        font-size: 26px;
    }
    .waitlist-incentives-sub {
        font-size: 18px;
        margin-bottom: 28px;
    }
    .waitlist-incentive {
        padding: 0px 0px;
    }
}

/* =====================================================================
   REGULAR MODE — two-tier pricing, Slack-style feature lists + tooltips,
   and the checkout popup. Everything here is scoped to
   body.nbm-mode-regular (or to markup that only renders in regular mode)
   so WAITLIST MODE is completely unaffected.
   ===================================================================== */

/* ---- Payment icons (no base style existed; used by the new layouts) -- */
body.nbm-mode-regular .payment-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 21px;
}
body.nbm-mode-regular .payment-icon {
    display: inline-flex;
    padding: 0;
    border: none;
}
body.nbm-mode-regular .payment-icon img { height: 24px; width: auto; display: block; }
body.nbm-mode-regular .payment-icons--inline { gap: 8px; }
body.nbm-mode-regular .payment-icons--inline .payment-icon img { height: 19px; }

/* Tighter gap between pricing intro copy and the two-tier cards. */
body.nbm-mode-regular .section-pricing .section-header {
    margin-bottom: 56.9px; /* default 76.9px − 20px */
}

/* ---- Two-tier grid -------------------------------------------------- */
body.nbm-mode-regular .pricing-grid-wrapper {
    max-width: 980px;
    margin: 0 auto;
}
body.nbm-mode-regular .nbm-pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    /* Stretch so the shorter (Basic) card matches the taller
       (Mastery) card height; its families panel then ends in a straight
       cut with white space below, while Mastery's panel reaches the
       rounded card bottom. */
    align-items: stretch;
    padding-top: 40px;
}

/* ---- Card ----------------------------------------------------------- */
body.nbm-mode-regular .nbm-pcard {
    position: relative;
    background: #fff;
    border: 1px solid #D8CDBA;
    border-radius: var(--radius-lg);
    padding: 0 30px 30px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
body.nbm-mode-regular .nbm-pcard--featured {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg);
    overflow: visible;
}
body.nbm-mode-regular .nbm-pcard-badge {
    position: absolute;
    top: 0;
    /* Bleed over the 1px card border so the badge fully covers the top edge. */
    left: -1px;
    right: -1px;
    transform: translateY(-100%);
    z-index: 1;
    margin: 0;
    padding: 7px 16px 6px;
    text-align: center;
    background: var(--color-primary);
    color: #fff;
    font-size: 12.8px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    white-space: nowrap;
}
/* Fill the white gaps between the flush badge and the card's rounded top
   corners with gold — WITHOUT covering the white card body. Each filler is an
   inverse (concave) corner: a radial-gradient transparent over the card's
   rounded quarter-circle, gold outside it. The card keeps its border-radius. */
body.nbm-mode-regular .nbm-pcard-badge::before,
body.nbm-mode-regular .nbm-pcard-badge::after {
    content: '';
    position: absolute;
    top: 100%;
    width: var(--radius-lg);
    height: var(--radius-lg);
}
body.nbm-mode-regular .nbm-pcard-badge::before {
    left: 0;
    background: radial-gradient(circle at bottom right,
        transparent var(--radius-lg), var(--color-primary) var(--radius-lg));
}
body.nbm-mode-regular .nbm-pcard-badge::after {
    right: 0;
    background: radial-gradient(circle at bottom left,
        transparent var(--radius-lg), var(--color-primary) var(--radius-lg));
}

/* ---- Card head: name (34px) + tagline + price (DM Serif, dark) ------ */
body.nbm-mode-regular .nbm-pcard-head { text-align: center; }
body.nbm-mode-regular .nbm-pcard-topic {
    align-self: stretch;
    text-align: center;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 20px 0 28px;
}
body.nbm-mode-regular .nbm-pcard-topic .logo-tm {
    font-size: 0.78em;
    vertical-align: super;
    letter-spacing: 0;
}
body.nbm-mode-regular .nbm-pcard-name {
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 6px;
}
body.nbm-mode-regular .nbm-pcard-tagline {
    font-size: 16px;
    color: var(--color-text-muted);
    margin: 0 0 18px;
    min-height: 2.7em;
}
body.nbm-mode-regular .nbm-pcard-price {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 24px;
}
/* Same font family/style as the current single-card price (DM Serif
   Display), but dark instead of the gold accent (per spec). */
body.nbm-mode-regular .nbm-pcard-price .price-currency,
body.nbm-mode-regular .nbm-pcard-price .price-amount {
    font-family: 'DM Serif Display', Georgia, serif;
    font-weight: 400;
    line-height: 1;
    color: var(--color-text);
}
body.nbm-mode-regular .nbm-pcard-price .price-currency {
    grid-column: 1;
    justify-self: end;
    align-self: flex-start;
    font-size: 34px;
    margin-top: 9px;
    margin-right: 2px;
}
body.nbm-mode-regular .nbm-pcard-price .price-amount {
    grid-column: 2;
    justify-self: center;
    font-size: 76px;
}
body.nbm-mode-regular .nbm-pcard-price .nbm-pcard-otp {
    grid-column: 3;
    justify-self: start;
    align-self: center;
    margin-top: 6px;
    margin-left: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-primary);
    white-space: nowrap;
}

/* ---- CTA ------------------------------------------------------------ */
body.nbm-mode-regular .nbm-pcard .btn-block { width: 100%; }

/* ---- Feature lists (Slack-style) ----------------------------------- */
body.nbm-mode-regular .nbm-pcard-features { margin-top: 20px; }
body.nbm-mode-regular .nbm-feat-group {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 20px 0 8px;
}
body.nbm-mode-regular .nbm-pcard-features ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
body.nbm-mode-regular .nbm-feat {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--color-text);
}
body.nbm-mode-regular .nbm-feat-check {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--color-primary);
    margin-top: 1px;
}
/* Not-included rows: light grey text + grey line instead of a check. */
body.nbm-mode-regular .nbm-feat--off,
body.nbm-mode-regular .nbm-feat--off .nbm-feat-label { color: #bdb6a9; }
body.nbm-mode-regular .nbm-feat-dash {
    flex: 0 0 auto;
    width: 14px;
    height: 2px;
    background: #d7d0c4;
    border-radius: 2px;
    margin-top: 10px;
}
body.nbm-mode-regular .nbm-feat-label { flex: 1 1 auto; }

/* Info (i) button + dark bubble tooltip */
body.nbm-mode-regular .nbm-feat-info {
    flex: 0 0 auto;
    position: relative;
    margin-left: 6px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: #c3bcae;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
body.nbm-mode-regular .nbm-feat-info:hover,
body.nbm-mode-regular .nbm-feat-info:focus-visible { color: var(--color-primary); }
body.nbm-mode-regular .nbm-feat-tip {
    position: absolute;
    z-index: 6;
    width: 220px;
    /* Desktop default: above the icon, right-aligned, arrow pointing down */
    right: 0;
    bottom: calc(100% + 11px);
    background: #26211a;
    color: #f4efe6;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.14s ease;
}
body.nbm-mode-regular .nbm-feat-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 8px;
    border: 6px solid transparent;
    border-top-color: #26211a;
}
body.nbm-mode-regular .nbm-feat-info:hover .nbm-feat-tip,
body.nbm-mode-regular .nbm-feat-info:focus .nbm-feat-tip,
body.nbm-mode-regular .nbm-feat-info:focus-within .nbm-feat-tip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ---- Bread-families panel (soft-gold, full-bleed to card bottom) ---- */
body.nbm-mode-regular .nbm-pcard-fams {
    /* Full-bleed to the inner card edges (card padding is 0 30px 30px) and
       down into the bottom padding so the tint can reach the card bottom. */
    margin: 20px -30px -30px;
    padding: 20px 30px 24px;
    background: rgba(var(--color-primary-rgb), 0.05);
    border-top: 1px solid rgba(var(--color-primary-rgb), 0.10);
}
/* Mastery is always the tallest card, so its panel reaches the card
   bottom — round its corners to follow the card. (Basic stretches
   taller than its content, so its panel ends in a straight cut; the card's
   own overflow:hidden clips it if it ever did reach the bottom.) */
body.nbm-mode-regular .nbm-pcard--featured .nbm-pcard-fams {
    border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
}
body.nbm-mode-regular .nbm-fam-group { margin-top: 0; }
body.nbm-mode-regular .nbm-fam-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
body.nbm-mode-regular .nbm-fam {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    font-size: 15px;
    line-height: 1.3;
    color: var(--color-text);
}
body.nbm-mode-regular .nbm-fam-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--color-primary-rgb), 0.12);
    color: var(--color-primary);
}
body.nbm-mode-regular .nbm-fam-icon svg { width: 18px; height: 18px; }

/* ---- Guarantee badge (below CTA, inside each card) ----------------- */
body.nbm-mode-regular .nbm-pcard-guarantee {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

/* =====================================================================
   CHECKOUT POPUP (regular mode only)
   ===================================================================== */
body.nbm-mode-regular .nbm-checkout-modal {
    position: fixed;
    /* Longhands instead of `inset: 0`: legacy WebKit (Safari < 14.1 /
       iPadOS < 14.5, e.g. iPad Air 4 on iPadOS 14) does not support the
       `inset` shorthand, so the fixed modal got no box and never appeared —
       while openCheckout() still set body{overflow:hidden}, which made the
       page feel frozen (manual scroll disabled, nothing visible). The
       longhands are universally supported and identical on modern browsers. */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
body.nbm-mode-regular .nbm-checkout-modal[hidden] { display: none !important; }
body.nbm-mode-regular .nbm-checkout-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(26, 22, 18, 0.55);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
body.nbm-mode-regular .nbm-checkout-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 880px;
    max-height: min(94vh, 960px);
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
}
body.nbm-mode-regular .nbm-checkout-close {
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    width: 2.4rem;
    height: 2.4rem;
    border: none;
    background: none;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    z-index: 3;
}
body.nbm-mode-regular .nbm-checkout-grid {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    grid-template-areas:
        "header summary"
        "main   summary";
}
body.nbm-mode-regular .nbm-checkout-header {
    grid-area: header;
    padding: 34px 32px 0;
}
body.nbm-mode-regular .nbm-checkout-main {
    grid-area: main;
    padding: 22px 32px 34px;
}
body.nbm-mode-regular .nbm-checkout-summary {
    grid-area: summary;
    padding: 34px 28px;
    background: #F8F7F4;
    border-left: 1px solid var(--color-border);
}
body.nbm-mode-regular .nbm-checkout-title {
    font-family: var(--font-body);
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--color-text);
}
body.nbm-mode-regular .nbm-checkout-sub {
    color: var(--color-text-muted);
    font-size: 14.5px;
    margin: 0 0 22px;
}
body.nbm-mode-regular .nbm-checkout-fieldset { margin-bottom: 22px; }
body.nbm-mode-regular .nbm-checkout-legend {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 12px;
}
body.nbm-mode-regular .nbm-checkout-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}
body.nbm-mode-regular .nbm-checkout-field label {
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--color-text);
}
body.nbm-mode-regular .nbm-checkout-field input,
body.nbm-mode-regular .nbm-checkout-field select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-family: var(--font-body);
    background: #fff;
    color: var(--color-text);
    box-sizing: border-box;
}
/* Safari (incl. iOS/iPadOS) renders a native <select> at minimal height and
   ignores the vertical padding above, so the Country box looked far shorter
   than in Chrome/Firefox. Resetting the appearance makes WebKit honour the
   padding; we then supply our own chevron so it still reads as a dropdown. */
body.nbm-mode-regular .nbm-checkout-field select {
    -webkit-appearance: none;
    -moz-appearance: none;
    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' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23555555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    padding-right: 38px;
}
body.nbm-mode-regular .nbm-checkout-field input:focus,
body.nbm-mode-regular .nbm-checkout-field select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}
body.nbm-mode-regular .nbm-checkout-hint {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 5px;
}
body.nbm-mode-regular .nbm-pay-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body.nbm-mode-regular .nbm-pay-method {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.nbm-mode-regular .nbm-pay-method--card {
    position: relative;
    padding-top: 21px;
    padding-bottom: 21px;
}
body.nbm-mode-regular .nbm-pay-method-stripe-note,
body.nbm-mode-regular .nbm-pay-method-stripe-by {
    font-size: 13px;
    line-height: 1;
    color: #9a9590;
}
body.nbm-mode-regular .nbm-pay-method-stripe-note {
    position: absolute;
    right: 14px;
    bottom: 9px;
}
body.nbm-mode-regular .nbm-pay-method-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}
body.nbm-mode-regular .nbm-pay-method:hover { border-color: var(--color-primary); }
body.nbm-mode-regular .nbm-pay-method input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
}
body.nbm-mode-regular .nbm-pay-method:has(input:checked) {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.12);
}
body.nbm-mode-regular .nbm-pay-method-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 1;
}
body.nbm-mode-regular .nbm-checkout-modal .payment-icons--inline {
    display: flex;
    align-items: center;
    align-self: center;
    transform: translateY(-10px);
}
body.nbm-mode-regular .nbm-checkout-modal .payment-icon {
    display: flex;
    align-items: center;
}
body.nbm-mode-regular .nbm-checkout-modal .payment-icons--inline .payment-icon img {
    height: 20px;
}
body.nbm-mode-regular .nbm-checkout-modal .payment-icons--inline .payment-icon img[src*="paypal"] {
    height: 24px;
}
body.nbm-mode-regular .nbm-pay-method-title { font-size: 14.5px; font-weight: 600; line-height: 1; }
body.nbm-mode-regular .nbm-checkout-consent { margin-bottom: 18px; }
body.nbm-mode-regular .nbm-checkout-checkbox {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    color: var(--color-text-light);
    line-height: 1.5;
    cursor: pointer;
}
body.nbm-mode-regular .nbm-checkout-checkbox input {
    flex: 0 0 auto;
    margin-top: 3px;
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
}
body.nbm-mode-regular .nbm-checkout-checkbox a { color: var(--color-primary); text-decoration: underline; }
body.nbm-mode-regular .nbm-checkout-msg {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    margin-bottom: 14px;
    background: #fbeaea;
    color: #8a1f1f;
    border: 1px solid #e8b1b1;
}
body.nbm-mode-regular .nbm-checkout-msg[hidden] { display: none !important; }
body.nbm-mode-regular .nbm-checkout-cta { margin-top: 4px; width: 100%; }
body.nbm-mode-regular .nbm-checkout-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--color-text-muted);
    margin: 14px 0 0;
    text-align: center;
}
body.nbm-mode-regular .nbm-checkout-secure svg { flex: 0 0 auto; }

/* Order summary */
body.nbm-mode-regular .nbm-checkout-summary-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 16px;
}
body.nbm-mode-regular .nbm-checkout-line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    padding: 7px 0;
    min-width: 0;
}
body.nbm-mode-regular #nbm-co-product {
    flex: 1 1 auto;
    min-width: 0;
}
body.nbm-mode-regular .nbm-co-product-name {
    display: inline;
    font-size: 16px;
    font-weight: 600;
}
body.nbm-mode-regular .nbm-co-product-name::after {
    content: '';
    display: inline-block;
    width: 8px;
}
body.nbm-mode-regular .nbm-co-product-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    padding: 0 7px;
    box-sizing: border-box;
    vertical-align: 2px;
    border: 1px solid #B8860B;
    border-radius: 3.5px;
    background: transparent;
    color: #B8860B;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.35px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}
body.nbm-mode-regular #nbm-co-price {
    flex: 0 0 auto;
    white-space: nowrap;
}
body.nbm-mode-regular .nbm-checkout-line--muted { color: var(--color-text-muted); font-size: 13.5px; }
body.nbm-mode-regular .nbm-checkout-total {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 18px;
    border-top: 1px solid var(--color-border);
    margin-top: 8px;
    padding-top: 14px;
}
/* Trust block in the order summary — same copy + badges as the pricing
   section below the cards, but self-contained styling so it fits the
   narrow summary column (items stacked vertically). */
body.nbm-mode-regular .nbm-checkout-trust {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}
body.nbm-mode-regular .nbm-checkout-trust-riskfree {
    text-align: center;
    font-size: 13px;
    color: var(--color-text-light);
    margin: 0 0 12px;
}
body.nbm-mode-regular .nbm-checkout-trust-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 14px;
}
body.nbm-mode-regular .nbm-checkout-trust-icons img {
    height: 22px;
    width: auto;
    display: block;
}
body.nbm-mode-regular .nbm-checkout-trust-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
body.nbm-mode-regular .nbm-checkout-trust-items li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--color-text-light);
}
body.nbm-mode-regular .nbm-checkout-trust-items svg {
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Checkout-diversion notice inside the waitlist popup (shown only when the
   regular-mode checkout hands off). Harmless in waitlist mode (never shown). */
.nbm-wl-checkout-notice {
    background: #fff7e6;
    border: 1px solid #f0d9a8;
    color: #6e4e12;
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 14px;
}
.nbm-wl-checkout-notice[hidden] { display: none !important; }

/* ---- Responsive: stack cards + 64px mobile price + mobile tooltip --- */
/* Switch the two pricing cards to a single stacked column at the page's
   standard 740px breakpoint (kept in sync with the other mobile layout
   rules below and elsewhere on the page). */
@media (max-width: 739px) {
    body.nbm-mode-regular .nbm-pricing-grid {
        grid-template-columns: 1fr;
        gap: 38px;
        max-width: 460px;
        margin: 0 auto;
    }
}
@media (max-width: 739px) {
    body.nbm-mode-regular .section-pricing .section-header {
        margin-bottom: -8px; /* mobile default 38px − 46px */
    }
    body.nbm-mode-regular .nbm-pcard { margin-bottom: 20px; }
    body.nbm-mode-regular .nbm-pcard-badge {
        font-size: 12px;
        padding: 7px 16px;
    }
    body.nbm-mode-regular .nbm-pcard-name { font-size: 35px; }
    body.nbm-mode-regular .nbm-pcard-topic { margin: 28px 0 20px; }
    body.nbm-mode-regular .nbm-pcard-price .price-amount { font-size: 66px; }
    body.nbm-mode-regular .nbm-pcard-price .price-currency { font-size: 30px; margin-top: 7px; }

    /* Mobile tooltip: open to the LEFT of the icon (arrow points right),
       like the Slack mobile screenshot. */
    body.nbm-mode-regular .nbm-feat-tip {
        right: calc(100% + 12px);
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
        width: min(240px, 66vw);
    }
    body.nbm-mode-regular .nbm-feat-tip::after {
        top: 50%;
        right: -12px;
        transform: translateY(-50%);
        border: 6px solid transparent;
        border-left-color: #26211a;
    }

    body.nbm-mode-regular .nbm-checkout-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "summary"
            "main";
    }
    body.nbm-mode-regular .nbm-checkout-header {
        padding: 26px 20px 0;
    }
    body.nbm-mode-regular .nbm-checkout-summary {
        border-left: none;
        border-top: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
        padding: 20px 20px 24px;
    }
    body.nbm-mode-regular .nbm-checkout-main {
        padding: 22px 20px 26px;
    }

    /* Order summary: tighten product → one-time payment; add space before total line */
    body.nbm-mode-regular .nbm-checkout-summary .nbm-checkout-line:not(.nbm-checkout-line--muted) {
        padding-bottom: 1px;
    }
    body.nbm-mode-regular .nbm-checkout-summary .nbm-checkout-line--muted {
        padding-top: 1px;
        padding-bottom: 7px;
        font-size: 13.5px;
    }
    body.nbm-mode-regular .nbm-checkout-summary .nbm-checkout-total {
        margin-top: 12px;
    }
    body.nbm-mode-regular .nbm-checkout-sub {
        font-size: 15.5px;
    }
    body.nbm-mode-regular .nbm-checkout-title {
        font-size: 25px;
        line-height: 1.55;
    }
    body.nbm-mode-regular .nbm-checkout-line {
        font-size: 15.5px;
    }
    body.nbm-mode-regular .nbm-checkout-summary-title,
    body.nbm-mode-regular #nbm-checkout-form .nbm-checkout-fieldset:first-of-type .nbm-checkout-legend,
    body.nbm-mode-regular .nbm-checkout-legend {
        font-size: 13.5px;
    }
}