/* ===========================
   MortonApps — Main Stylesheet
   =========================== */

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

:root {
    --color-bg: #0a0a0c;
    --color-surface: #111115;
    --color-surface-hover: #1a1a20;
    --color-border: #222228;
    --color-text: #e8e8ec;
    --color-text-muted: #8a8a96;
    --color-accent: #e30000;
    --color-accent-glow: rgba(227, 0, 0, 0.35);
    --color-accent-hover: #ff1a1a;
    --color-support: #72a4f2;
    --color-support-hover: #8db6ff;
    --color-support-glow: rgba(114, 164, 242, 0.35);
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
    --radius: 12px;
    --radius-sm: 8px;
    --max-width: 960px;
    --transition: 0.25s ease;
}

/* Screen-reader only — hides text visually but keeps it for SEO & accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

body {
    font-family: var(--font-family);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

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

/* ===========================
   Navigation
   =========================== */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 1rem 0;
    transition: background var(--transition), box-shadow var(--transition);
}

.navbar.scrolled {
    background: rgba(10, 10, 12, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 var(--color-border);
}

.nav-container {
    max-width: 100%;
    margin: 0;
    padding: 0 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.nav-logo-img {
    width: 32px;
    height: 32px;
    border-radius: 6px;
}

.nav-logo:hover {
    color: var(--color-accent);
    transition: color var(--transition);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
}

.nav-links a {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-muted);
    transition: color var(--transition);
}

.nav-links a:hover {
    color: var(--color-text);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.nav-toggle span {
    width: 22px;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

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

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Super-light touch: show the artwork in full, only blend the bottom edge
       into the page so the hero meets the next section cleanly. */
    background: linear-gradient(to bottom, transparent 62%, rgba(10, 10, 12, 0.38) 90%, var(--color-bg) 100%);
    z-index: 1;
}

.hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 1;
}

.hero-grid {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, black 20%, transparent 70%);
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 0 2rem;
    max-width: 1000px;
    width: 100%;
}

.hero-logo {
    display: block;
    margin: 0 auto 1.5rem;
    width: 120px;
    height: 120px;
    border-radius: 24px;
    box-shadow: 0 0 60px rgba(227, 0, 0, 0.25), 0 0 60px rgba(114, 164, 242, 0.2);
    animation: logoFloat 4s ease-in-out infinite;
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.hero-title {
    margin-bottom: 1.25rem;
    line-height: 1;
}

.hero-title-img {
    display: block;
    margin: 0 auto;
    max-width: 480px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.4));
}

.hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.15rem);
    color: var(--color-text-muted);
    max-width: 640px;
    margin: 0 auto 2rem;
    font-weight: 400;
    line-height: 1.7;
}

.hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    margin-bottom: 2.25rem;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.hero-stat-value {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
}

.hero-stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.hero-stat-divider {
    width: 1px;
    height: 28px;
    background: var(--color-border);
}

.hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-accent);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 2rem;
    border-radius: var(--radius-sm);
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.hero-cta:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--color-accent-glow);
}

.hero-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    transition: color var(--transition), border-color var(--transition), transform var(--transition);
}

.hero-cta-secondary svg {
    width: 18px;
    height: 18px;
}

.hero-cta-secondary:hover {
    color: var(--color-text);
    border-color: var(--color-text-muted);
    transform: translateY(-2px);
}

/* Hero Secondary Actions (Ko-fi + X card row) */
.hero-secondary-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-kofi-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-support);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-sm);
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.hero-kofi-btn:hover {
    background: var(--color-support-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--color-support-glow);
}

.hero-kofi-btn .kofi-cup {
    width: 22px;
    height: auto;
}

.hero-kofi-btn:hover .kofi-cup {
    animation: kofiShake 0.4s ease-in-out;
}

/* X Profile Card */
.hero-x-card {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 1.25rem 0.6rem 0.6rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: 100px;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.hero-x-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--color-text-muted);
    transform: translateY(-1px);
}

.hero-x-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.hero-x-info {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.3;
}

.hero-x-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
}

.hero-x-handle {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.hero-x-follow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.08);
    padding: 0.35rem 0.85rem;
    border-radius: 100px;
    margin-left: 0.25rem;
}

.hero-x-icon {
    width: 14px;
    height: 14px;
}

.hero-scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.scroll-arrow {
    width: 24px;
    height: 24px;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(45deg);
    animation: scrollBounce 2s ease infinite;
    opacity: 0.5;
}

@keyframes scrollBounce {
    0%, 100% { transform: rotate(45deg) translateY(0); opacity: 0.5; }
    50% { transform: rotate(45deg) translateY(6px); opacity: 0.8; }
}

/* ===========================
   Section Shared
   =========================== */

.section-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
}

.section-subtitle {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    margin-bottom: 3rem;
}

/* ===========================
   Apps Section
   =========================== */

.apps-section {
    padding: 6rem 0;
}

/* ===========================
   App Card
   =========================== */

.app-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--color-border);
    margin-bottom: 3rem;
    transition: border-color var(--transition), box-shadow var(--transition), transform 0.3s ease;
}

.app-card:hover {
    border-color: rgba(227, 0, 0, 0.4);
    box-shadow: 0 8px 48px rgba(227, 0, 0, 0.15), 0 0 0 1px rgba(227, 0, 0, 0.1);
    transform: translateY(-4px);
}

.app-card-bg {
    position: absolute;
    inset: 0;
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.app-card-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.app-card:hover .app-card-bg {
    opacity: 0.6;
}

.app-card-inner {
    position: relative;
    padding: 2.5rem;
    background: linear-gradient(to bottom, rgba(10, 10, 12, 0.4) 0%, rgba(10, 10, 12, 0.82) 40%, rgba(10, 10, 12, 0.95) 70%);
}

.app-card-header {
    margin-bottom: 1.5rem;
    padding-top: 3rem;
}

.app-name {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.app-tagline {
    display: block;
    color: var(--color-accent);
    font-size: 0.95rem;
    font-weight: 500;
    margin-top: 0.25rem;
}

.app-description {
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 680px;
    margin-bottom: 1.75rem;
}

/* ===========================
   Feature List
   =========================== */

.app-features {
    list-style: none;
    display: grid;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.app-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.92rem;
    color: var(--color-text);
}

.feature-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-accent);
}

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

.app-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.4rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--font-family);
    cursor: pointer;
    border: none;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

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

.btn-primary:hover {
    background: var(--color-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 24px var(--color-accent-glow);
}

.btn-secondary {
    background: var(--color-surface-hover);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.btn-secondary:hover {
    background: #242430;
    border-color: var(--color-text-muted);
    transform: translateY(-1px);
}

.btn-ghost {
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.btn-ghost:hover {
    color: var(--color-text);
    border-color: var(--color-text-muted);
    transform: translateY(-1px);
}

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

.btn-support:hover {
    background: var(--color-support-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 24px var(--color-support-glow);
}

.btn-support .kofi-cup {
    width: 20px;
    height: auto;
}

.btn-support:hover .kofi-cup {
    animation: kofiShake 0.4s ease-in-out;
}

@keyframes kofiShake {
    0% { transform: rotate(0deg); }
    15% { transform: rotate(12deg); }
    30% { transform: rotate(-10deg); }
    45% { transform: rotate(8deg); }
    60% { transform: rotate(-6deg); }
    75% { transform: rotate(3deg); }
    100% { transform: rotate(0deg); }
}

.btn svg {
    width: 18px;
    height: 18px;
}

/* ===========================
   Meta Badges
   =========================== */

.app-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.meta-badge {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    padding: 0.3rem 0.75rem;
    border-radius: 100px;
}

/* ===========================
   About Section
   =========================== */

.about-section {
    padding: 5rem 0;
    border-top: 1px solid var(--color-border);
}

.about-content {
    max-width: none;
}

.about-content p {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.25rem;
}

.about-inline-link {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-color: var(--color-text-muted);
    text-underline-offset: 3px;
    transition: color var(--transition), text-decoration-color var(--transition);
}

.about-inline-link:hover {
    color: var(--color-accent);
    text-decoration-color: var(--color-accent);
}

/* About X Profile Card */
.about-x-card {
    margin: 2rem 0;
    text-align: center;
}

.about-x-link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.5rem 0.85rem 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: 100px;
    transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.about-x-link:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--color-text-muted);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.about-x-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.about-x-details {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.3;
}

.about-x-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

.about-x-handle {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.about-x-follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    background: #1d9bf0;
    padding: 0.5rem 1.1rem;
    border-radius: 100px;
    margin-left: 0.5rem;
    transition: background var(--transition);
}

.about-x-link:hover .about-x-follow-btn {
    background: #1a8cd8;
}

.about-x-icon {
    width: 16px;
    height: 16px;
}

.about-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0;
}

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

.footer {
    border-top: 1px solid var(--color-border);
    padding: 2rem 0;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 1rem;
}

.footer-logo-img {
    width: 24px;
    height: 24px;
    border-radius: 4px;
}

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

/* ===========================
   Animations
   =========================== */

.app-card {
    opacity: 0;
    transform: translateY(30px);
}

.app-card.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ===========================
   Responsive
   =========================== */

@media (max-width: 768px) {
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: rgba(10, 10, 12, 0.97);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 1.5rem;
        gap: 1rem;
        border-bottom: 1px solid var(--color-border);
    }

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

    .nav-toggle {
        display: flex;
    }

    .app-card-inner {
        padding: 1.5rem;
    }

    .app-card-header {
        padding-top: 2rem;
    }

    .app-name {
        font-size: 1.5rem;
    }

    .app-card-actions {
        flex-direction: column;
    }

    .btn {
        justify-content: center;
    }

    .about-links {
        flex-direction: column;
    }

    .about-x-follow-btn {
        margin-left: 0;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero-title-img {
        max-width: 280px;
    }

    .hero-stats {
        gap: 1rem;
    }

    .hero-stat-value {
        font-size: 0.95rem;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero-cta,
    .hero-cta-secondary {
        width: 100%;
        justify-content: center;
    }

    .hero-secondary-actions {
        flex-direction: column;
        width: 100%;
    }

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

    .hero-x-card {
        width: 100%;
        justify-content: center;
    }

    .section-title {
        font-size: 1.75rem;
    }
}

/* ===========================
   Rebrand additions (v2)
   =========================== */

/* Two-tone brand color — hero + headings only (never body copy) */
.ma-blue { color: var(--color-support); }
.ma-red  { color: var(--color-accent); }

/* Balance multi-line headings to avoid one-word orphan lines */
.hero-subtitle,
.section-title,
.cc-card-title,
.cc-card-lede,
.contact-title,
.contact-subtitle { text-wrap: balance; }

/* Nav CTA button */
.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--color-accent);
    color: #fff !important;
    font-weight: 600;
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-sm);
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.nav-cta:hover {
    background: var(--color-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 24px var(--color-accent-glow);
}

/* ===========================
   Command Center Section
   =========================== */

.command-section {
    padding: 6rem 0 4rem;
}

.cc-card {
    background: var(--color-surface);
    padding: 0;
}

.cc-card:hover {
    border-color: rgba(114, 164, 242, 0.45);
    box-shadow: 0 8px 48px rgba(114, 164, 242, 0.15), 0 0 0 1px rgba(114, 164, 242, 0.12);
    transform: translateY(-4px);
}

.cc-card-inner {
    position: relative;
    padding: 2.75rem;
    background:
        radial-gradient(ellipse 60% 80% at 100% 0%, rgba(114, 164, 242, 0.10), transparent 60%),
        radial-gradient(ellipse 60% 80% at 0% 100%, rgba(227, 0, 0, 0.08), transparent 60%);
}

.cc-card-header { margin-bottom: 2rem; }

.cc-card-title {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin-bottom: 1rem;
}

.cc-card-lede {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    line-height: 1.75;
    max-width: 720px;
}

.cc-feature-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    grid-auto-rows: 1fr;
    gap: 1rem;
    margin: 2.5rem 0 2rem;
}

/* "What's included" — cards with a red/blue left accent + an emphasized icon
   badge (a deliberately different style from the capability chips above). */
.cc-feature {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-support);
    border-radius: 12px;
    padding: 1.2rem 1.3rem;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.cc-feature:nth-child(even) { border-left-color: var(--color-accent); }
.cc-feature:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.045); }

.cc-feature .feature-icon {
    box-sizing: content-box;
    width: 22px; height: 22px; padding: 9px; flex-shrink: 0; margin-top: 0;
    color: var(--color-support);
    background: rgba(114, 164, 242, 0.12);
    border-radius: 10px;
}
.cc-feature:nth-child(even) .feature-icon { color: var(--color-accent); background: rgba(227, 0, 0, 0.12); }

.cc-feature div { display: flex; flex-direction: column; gap: 0.2rem; }

.cc-feature strong {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--color-text);
}

.cc-feature span {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.cc-neutral-note {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-support);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
}

.cc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.cc-pricing-note {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.cc-pricing-note a {
    color: var(--color-support);
    font-weight: 600;
    text-underline-offset: 3px;
}

.cc-pricing-note a:hover {
    text-decoration: underline;
    color: var(--color-support-hover);
}

/* ===========================
   Founder Card
   =========================== */

.founder-card {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 0.85rem 1.5rem 0.85rem 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: 100px;
}

.founder-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}

.founder-details {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.founder-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

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

/* ===========================
   Contact / CTA Band
   =========================== */

.contact-band {
    padding: 5rem 0;
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.contact-title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 0.75rem;
}

.contact-subtitle {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    max-width: 540px;
    margin: 0 auto 2rem;
}

.contact-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ===========================
   Footer links (corporate)
   =========================== */

.footer-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--color-text-muted);
}

.footer-links a {
    color: var(--color-text-muted);
    transition: color var(--transition);
}

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

.footer-dot { opacity: 0.5; }

/* ===========================
   Rebrand — responsive
   =========================== */

@media (max-width: 768px) {
    .cc-card-inner { padding: 1.75rem; }

    .cc-feature-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .cc-actions { flex-direction: column; }

    .founder-card {
        display: flex;
        width: 100%;
    }
}

/* ===========================
   Ambient flow (v4) — diversify the page below the hero so it's
   never flat black; carry the red/blue brand glow down the page.
   =========================== */

/* Base canvas gets a faint vertical journey instead of dead-flat black */
body {
    background:
        linear-gradient(180deg, #0a0a0c 0%, #0c0d14 38%, #0b0c12 62%, #0a0b10 100%);
}

/* Sections become glow stages; content sits above the glow layer */
.command-section,
.about-section,
.contact-band,
.footer {
    position: relative;
    overflow: hidden;
}

.command-section > .section-container,
.about-section > .section-container,
.contact-band > .section-container,
.footer > .section-container {
    position: relative;
    z-index: 1;
}

.command-section::before,
.about-section::before,
.contact-band::before,
.footer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Just under the hero: blue glow sweeping in from the top-right,
   red answering from the bottom-left — echoes the hero artwork */
.command-section::before {
    background:
        radial-gradient(62% 60% at 90% -8%, rgba(114, 164, 242, 0.14), transparent 70%),
        radial-gradient(58% 55% at 2% 108%, rgba(227, 0, 0, 0.09), transparent 72%);
}

/* About: warm red pool on the right, cool hint top-left */
.about-section::before {
    background:
        radial-gradient(55% 65% at 102% 45%, rgba(227, 0, 0, 0.11), transparent 70%),
        radial-gradient(45% 50% at -5% 0%, rgba(114, 164, 242, 0.07), transparent 72%);
}

/* Contact finale: both glows bookend the page like the hero */
.contact-band::before {
    background:
        radial-gradient(46% 95% at 16% 50%, rgba(227, 0, 0, 0.13), transparent 70%),
        radial-gradient(46% 95% at 84% 50%, rgba(114, 164, 242, 0.13), transparent 70%);
}

/* Footer keeps a whisper of blue at its top edge */
.footer::before {
    background: radial-gradient(85% 130% at 50% -10%, rgba(114, 164, 242, 0.06), transparent 70%);
}

/* Intentional section seams — one clean 1px divider at every boundary, the
   same treatment Command Center's site uses, so each block reads as a
   deliberate section rather than images bleeding together. Covers
   hero→command, command→faq, faq→about, about→contact, and contact→footer. */
.command-section,
.faq-section,
.about-section,
.contact-band,
.footer {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/* FAQ section — same relative/overflow + ambient glow treatment as the rest */
.faq-section {
    position: relative;
    overflow: hidden;
    padding: 5rem 0;
}

.faq-section > .section-container { position: relative; z-index: 1; }

.faq-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(50% 60% at 0% 25%, rgba(114, 164, 242, 0.08), transparent 72%),
        radial-gradient(50% 60% at 100% 95%, rgba(227, 0, 0, 0.07), transparent 72%);
}

.faq-list {
    display: grid;
    gap: 1rem;
    /* fill the section container so it's centered on screen (was 760px, which
       left-aligned it and looked off-center with a right-side gap) */
    max-width: none;
}

.faq-item {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
}

.faq-q {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.faq-a {
    color: var(--color-text-muted);
    font-size: 0.97rem;
    line-height: 1.7;
}

.faq-a a,
.cc-card-lede a {
    color: var(--color-support);
    font-weight: 600;
    text-underline-offset: 3px;
}

.faq-a a:hover,
.cc-card-lede a:hover {
    color: var(--color-support-hover);
    text-decoration: underline;
}

/* =====================================================================
   ANIMATIONS (v7) — each effect is its own labeled block so it can be
   tuned or removed independently. Reduced-motion safety at the bottom.
   ===================================================================== */

/* (#2 cursor-reactive hero aurora removed per Greg 2026-06-04) */

/* ---- #3 Logo / wordmark power-on (on load) ---- */
@keyframes bootLogo {
    0%   { opacity: 0; filter: brightness(2.2) drop-shadow(0 0 26px rgba(114, 164, 242, 0.65)); }
    100% { opacity: 1; filter: none; }
}
@keyframes bootWord {
    0%   { opacity: 0; clip-path: inset(0 100% 0 0); filter: brightness(1.9) drop-shadow(0 4px 24px rgba(0, 0, 0, 0.4)); }
    100% { opacity: 1; clip-path: inset(0 0 0 0); filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.4)); }
}
@keyframes heroRise {
    0%   { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: none; }
}
/* bootLogo touches only opacity/filter so the existing logoFloat (transform)
   can run after it without fighting over the transform property. */
.hero-logo { animation: bootLogo 0.8s ease-out both, logoFloat 4s ease-in-out 0.8s infinite; }
.hero-title-img { animation: bootWord 0.95s 0.3s cubic-bezier(.2, .8, .2, 1) both; }
.hero-subtitle { animation: heroRise 0.7s 0.55s ease-out both; }
.hero-stats { animation: heroRise 0.7s 0.7s ease-out both; }
.hero-actions { animation: heroRise 0.7s 0.85s ease-out both; }

/* ---- #7 Living heading shimmer (two-tone CC title) ---- */
.section-title.shimmer { position: relative; }
.section-title.shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.20) 50%, transparent 62%);
    background-size: 250% 100%;
    mix-blend-mode: screen;
    animation: shimmerSweep 6s ease-in-out 1.4s infinite;
}
@keyframes shimmerSweep {
    0%        { background-position: 150% 0; }
    30%, 100% { background-position: -60% 0; }
}

/* ---- #4 Spotlight that follows the cursor on the Command Center card ---- */
.cc-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.35s ease;
    background: radial-gradient(240px circle at var(--x, 50%) var(--y, 50%), rgba(160, 190, 255, 0.16), transparent 62%);
    mix-blend-mode: screen;
}
.cc-card.spot::after { opacity: 1; }

/* (#5 magnetic buttons removed per Greg 2026-06-05 — kept the standard hover
   lift/glow on the CTAs, dropped the cursor-tracking) */

/* ---- #6 Blur-to-focus scroll reveals ---- */
.reveal {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
    filter: blur(9px);
    transition: opacity 0.7s ease, transform 0.75s cubic-bezier(.2, .8, .2, 1), filter 0.7s ease;
    transition-delay: calc(var(--i, 0) * 0.07s);
}
.reveal.in-view {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

/* ---- #1 "Unify into one pane" — chips converge into a dashboard frame ---- */
.unify-viz {
    position: relative;
    --ss: 1;
    /* Tracks the responsive pane height (5/3 of its width) so the big final
       dashboard always has room and never collides with the heading/card. */
    height: clamp(360px, 66vw, 860px);
    max-width: 960px;
    margin: 1.5rem auto 5rem;
}
.unify-chip {
    position: absolute;
    left: 50%;
    top: 50%;
    /* --ss = scatter scale (reduced at narrow widths so chips never overflow) */
    transform: translate(-50%, -50%) translate(calc(var(--sx, 0) * var(--ss, 1)), calc(var(--sy, 0) * var(--ss, 1))) rotate(var(--r, 0deg));
    /* 10% faster overall: ~1.35s hold, 0.252s gap between chips, 1.62s fly-in. */
    transition: transform 1.62s cubic-bezier(.5, 0, .1, 1), opacity 1.17s ease;
    transition-delay: calc(1.35s + var(--i, 0) * 0.252s);
}
/* The visible pill — appearance lives here so it can bob independently of the
   wrapper's scatter/fly-in transform. */
.unify-pill {
    display: inline-block;
    padding: 0.62rem 1.25rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--color-border);
    font-size: 1.03rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
    /* Subtle bob while they wait, before flying in; phase-offset per chip so
       they don't float in unison (Greg 2026-06-05). */
    animation: chipFloat 2.88s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * -0.45s);
}
@keyframes chipFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}
.unify-viz.unified .unify-chip {
    transform: translate(-50%, -50%) scale(0.35);
    opacity: 0;
}
.unify-pane {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(1266px, 88vw);
    aspect-ratio: 5 / 3;
    border-radius: 18px;
    overflow: hidden;
    background: #0a1428;
    border: 1px solid rgba(114, 164, 242, 0.22);
    box-shadow: 0 16px 56px rgba(0, 0, 0, 0.55);
    opacity: 0.22;
    /* Starts small + dim; grows to full size and brightens as the tools get
       pulled in. Growth waits out the readable hold (delay 2.55s) and stretches
       so it keeps expanding while the chips float in (Greg). Start size held
       (base*0.4 = ~506) while the final size is 50% bigger (~1266). */
    transform: translate(-50%, -50%) scale(0.4);
    transition: opacity 2.52s ease 2.295s, transform 2.7s cubic-bezier(.2, .8, .2, 1) 2.295s, box-shadow 2.52s ease 2.295s;
}
.unify-pane-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* "Command Your Stack" tagline that reveals over the dashboard once it's full
   size (~5.6s in). Hidden until then via the container's opacity. */
.unify-caption {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    background: radial-gradient(ellipse 78% 70% at 50% 50%, rgba(8, 12, 24, 0.80), rgba(8, 12, 24, 0.42) 62%, transparent 85%);
    opacity: 0;
    transition: opacity 0.63s ease;
    pointer-events: none;
}
.unify-viz.unified .unify-caption { opacity: 1; transition-delay: 4.79s; }
.cap-text {
    position: relative;
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 4.6vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #fff;
    text-wrap: balance;
    text-shadow: 0 0 34px rgba(114, 164, 242, 0.45), 0 4px 26px rgba(0, 0, 0, 0.7);
}
.cap-text::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -0.7rem;
    transform: translateX(-50%);
    width: 130px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-support));
}
.unify-viz.unified .cap-text { animation: captionIn 0.99s cubic-bezier(.2, .8, .2, 1) 4.88s both; }
.unify-viz.unified .cap-text::after { animation: capLine 0.63s ease 5.51s both; }
@keyframes captionIn {
    0%   { opacity: 0; transform: translateY(22px) scale(0.95); filter: blur(10px); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes capLine {
    0%   { width: 0; opacity: 0; }
    100% { width: 130px; opacity: 1; }
}
.unify-viz.unified .unify-pane {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 14px 52px rgba(114, 164, 242, 0.18), 0 0 0 1px rgba(114, 164, 242, 0.25);
}
@media (max-width: 1040px) { .unify-viz { --ss: 0.85; } }
@media (max-width: 860px)  { .unify-viz { --ss: 0.72; } }
@media (max-width: 680px)  { .unify-viz { --ss: 0.56; } .unify-pill { font-size: 0.9rem; padding: 0.5rem 1rem; } }
@media (max-width: 520px)  { .unify-viz { --ss: 0.42; } }
@media (max-width: 430px)  { .unify-viz { --ss: 0.32; } }

/* ---- Reduced-motion: hold everything in its resolved/visible state ---- */
@media (prefers-reduced-motion: reduce) {
    .hero-logo, .hero-title-img, .hero-subtitle, .hero-stats, .hero-actions,
    .section-title.shimmer::after, .unify-chip, .unify-pill, .unify-pane,
    .unify-caption, .cap-text, .cap-text::after {
        animation: none !important;
        transition: none !important;
    }
    .unify-viz.unified .unify-caption { opacity: 1 !important; }
    .hero-logo, .hero-title-img, .hero-subtitle, .hero-stats, .hero-actions {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
    .unify-chip { opacity: 0 !important; }
    .unify-pane { opacity: 1 !important; transform: translate(-50%, -50%) scale(1) !important; }
}

/* FAQ reveal stagger (cascade the cards in) */
.faq-list .faq-item.reveal:nth-child(1) { --i: 0; }
.faq-list .faq-item.reveal:nth-child(2) { --i: 1; }
.faq-list .faq-item.reveal:nth-child(3) { --i: 2; }
.faq-list .faq-item.reveal:nth-child(4) { --i: 3; }

/* =====================================================================
   Morton Growth landing page (/growth) — reuses the site design system,
   adds pricing tiers, guarantee box, steps, and a proof strip.
   ===================================================================== */
.growth-section {
    position: relative;
    overflow: hidden;
    padding: 5.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.growth-section > .section-container { position: relative; z-index: 1; }
/* faint dot-grid texture for depth (masked so it fades at the edges) */
.growth-section::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 78% 78% at 50% 32%, #000, transparent 78%);
    mask-image: radial-gradient(ellipse 78% 78% at 50% 32%, #000, transparent 78%);
}
/* brand-colored ambient glows — both hues per section, dominant set by class */
.growth-section::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.growth-section.glow-blue::after {
    background:
        radial-gradient(48% 55% at 88% -10%, rgba(114, 164, 242, 0.20), transparent 66%),
        radial-gradient(42% 50% at 6% 112%, rgba(227, 0, 0, 0.10), transparent 70%);
}
.growth-section.glow-red::after {
    background:
        radial-gradient(48% 55% at 8% -10%, rgba(227, 0, 0, 0.17), transparent 66%),
        radial-gradient(42% 50% at 94% 112%, rgba(114, 164, 242, 0.13), transparent 70%);
}

/* Section kicker — small brand-colored label above each heading */
.section-kicker {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--color-support); margin-bottom: 0.85rem;
}
.glow-red .section-kicker { color: var(--color-accent); }

/* Proof stat strip (the ITPS result) */
.proof-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem 2.5rem;
    margin: 2.5rem auto 0;
    max-width: 860px;
}
.proof-stat { text-align: center; }
.proof-stat .pnum {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3.6vw, 2.3rem);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.1;
}
.proof-stat .plabel { font-size: 0.82rem; color: var(--color-text-muted); margin-top: 0.3rem; }
.proof-arrow { color: var(--color-accent); font-size: 1.6rem; }

/* The guarantee box */
.guarantee-box {
    max-width: 760px;
    margin: 0 auto;
    background: linear-gradient(160deg, rgba(227, 0, 0, 0.07), rgba(114, 164, 242, 0.07));
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: var(--radius);
    padding: 2.75rem 2.5rem;
    text-align: center;
}
.guarantee-badge {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-support);
    background: rgba(114, 164, 242, 0.1);
    border: 1px solid rgba(114, 164, 242, 0.3);
    padding: 0.35rem 0.95rem;
    border-radius: 100px;
    margin-bottom: 1.25rem;
}
.guarantee-box h3 { font-family: var(--font-heading); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; margin-bottom: 1rem; }
.guarantee-box p { color: var(--color-text-muted); line-height: 1.75; max-width: 640px; margin: 0 auto; }

/* How it works — numbered step cards (no connector line; it read awkwardly on hover) */
.steps-timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3.75rem; }
.step {
    position: relative; z-index: 1; text-align: center;
    background: rgba(255, 255, 255, 0.03); border: 1px solid var(--color-border); border-radius: 14px;
    padding: 2.9rem 1.4rem 1.7rem;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.step:hover { transform: translateY(-4px); border-color: rgba(114, 164, 242, 0.45); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32); }
.step-num {
    position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: #fff;
    background: linear-gradient(140deg, var(--color-accent), #ff5a5a);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(227, 0, 0, 0.4); border: 3px solid var(--color-bg);
}
.step:nth-child(even) .step-num {
    background: linear-gradient(140deg, var(--color-support), #9cc2ff);
    box-shadow: 0 6px 20px rgba(114, 164, 242, 0.4);
}
.step h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; }
.step p { color: var(--color-text-muted); font-size: 0.92rem; line-height: 1.6; }
@media (max-width: 900px) {
    .steps-timeline { grid-template-columns: repeat(2, 1fr); gap: 2.75rem 1.5rem; }
    .steps-timeline::before { display: none; }
}
@media (max-width: 560px) { .steps-timeline { grid-template-columns: 1fr; } }

/* Pricing tiers */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1.5rem; margin: 2.5rem auto 0; max-width: 980px; }
.pricing-card { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 2rem 1.75rem; display: flex; flex-direction: column; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.pricing-card:hover { transform: translateY(-4px); border-color: rgba(114, 164, 242, 0.4); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.3); }
.pricing-card.featured { border-color: rgba(227, 0, 0, 0.45); box-shadow: 0 8px 40px rgba(227, 0, 0, 0.12); background: linear-gradient(180deg, rgba(227, 0, 0, 0.06), var(--color-surface) 42%); }
.pricing-card.featured:hover { transform: translateY(-4px); border-color: rgba(227, 0, 0, 0.6); box-shadow: 0 18px 50px rgba(227, 0, 0, 0.2); }
.pricing-tag { position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; background: var(--color-accent); padding: 0.3rem 0.85rem; border-radius: 100px; white-space: nowrap; }
.pricing-name { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; }
.pricing-price { font-family: var(--font-heading); font-size: 2.1rem; font-weight: 700; margin-top: 0.4rem; }
.pricing-price span { font-size: 0.95rem; font-weight: 500; color: var(--color-text-muted); }
/* Price anchor — a banner attached to the top of each card (not crossed out inside) */
.pricing-anchor {
    margin: -2rem -1.75rem 1.5rem;
    padding: 0.6rem 1rem;
    background: linear-gradient(135deg, rgba(227, 0, 0, 0.18), rgba(114, 164, 242, 0.18));
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius) var(--radius) 0 0;
    text-align: center;
    display: flex; flex-direction: column; gap: 0.12rem;
}
.pricing-anchor span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.pricing-anchor strong { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--color-text); }
/* featured card: extra top room so the "Most popular" tag clears the banner label */
.pricing-card.featured .pricing-anchor { padding-top: 1.5rem; }
.pricing-desc { color: var(--color-text-muted); font-size: 0.88rem; margin: 0.5rem 0 1.25rem; line-height: 1.5; }
.pricing-list { list-style: none; display: grid; gap: 0.6rem; margin-bottom: 1.5rem; }
.pricing-list li { font-size: 0.89rem; color: var(--color-text); display: flex; gap: 0.5rem; align-items: flex-start; }
.pricing-list li svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-support); margin-top: 0.12rem; }
.pricing-card .btn { margin-top: auto; justify-content: center; }
.pricing-note { text-align: center; color: var(--color-text-muted); font-size: 0.88rem; margin-top: 1.75rem; line-height: 1.6; }

/* Morton Growth — website capabilities grid */
.cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-auto-rows: 1fr; gap: 0.85rem; max-width: 920px; margin: 2.5rem auto 0; }
.cap {
    display: flex; gap: 0.7rem; align-items: center;
    font-size: 0.95rem; line-height: 1.45; color: var(--color-text);
    background: rgba(255, 255, 255, 0.022); border: 1px solid var(--color-border); border-radius: 11px;
    padding: 0.85rem 1.05rem;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.cap:hover { transform: translateY(-2px); border-color: rgba(114, 164, 242, 0.4); background: rgba(114, 164, 242, 0.05); }
.cap svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-support); }
.cap:nth-child(even) svg { color: var(--color-accent); }
.cap span { color: var(--color-text-muted); }

/* ===========================
   Forms (post to the central /api/email)
   =========================== */
.mg-form { max-width: 560px; margin: 0 auto; text-align: left; display: grid; gap: 0.75rem; }
.mg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.mg-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: 0.95rem;
    transition: border-color var(--transition), background var(--transition);
}
.mg-input::placeholder { color: var(--color-text-muted); }
.mg-input:focus { outline: none; border-color: var(--color-support); background: rgba(255, 255, 255, 0.06); }
textarea.mg-input { resize: vertical; min-height: 84px; }
.mg-form .btn { justify-content: center; margin-top: 0.25rem; }
.mg-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; }
.mg-result { text-align: center; font-size: 0.95rem; margin-top: 0.5rem; min-height: 1.2em; }
.mg-result-ok { color: var(--color-support); font-weight: 500; }
.mg-result-err { color: var(--color-accent); }
@media (max-width: 560px) { .mg-row { grid-template-columns: 1fr; } }

/* =====================================================================
   Morton Growth — "wow" hero (/growth). Two-column showcase with one
   cohesive staged entrance + an animated "you rank #1 / leads coming in"
   visual that demonstrates the product. Scoped under .mg-hero so it never
   touches the homepage hero. (Greg 2026-06-05 — this page IS the portfolio.)
   ===================================================================== */
.mg-hero { min-height: 100vh; padding: 7rem 1.25rem 3.5rem; }
.mg-hero-inner {
    display: grid;
    /* minmax(0, …) so a non-wrapping child (eyebrow, search query) can't blow
       the column past the viewport — that was clipping the right edge on mobile. */
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
    max-width: 1180px;
    text-align: left;
}
.mg-hero-copy, .mg-hero-visual { min-width: 0; }
.mg-hero-copy { min-width: 0; }

/* Eyebrow pill with a live pulsing dot */
.mg-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.95rem; border-radius: 100px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--color-border);
    font-size: 0.74rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--color-support); margin-bottom: 1.4rem;
}
.mg-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); animation: mgPulse 2.4s ease-out infinite; }
@keyframes mgPulse {
    0%   { box-shadow: 0 0 0 0 rgba(227, 0, 0, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(227, 0, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(227, 0, 0, 0); }
}

.mg-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 5.2vw, 4rem);
    font-weight: 700; letter-spacing: -0.022em; line-height: 1.04;
    text-wrap: balance; margin-bottom: 1.35rem;
}
.mg-grad {
    background: linear-gradient(100deg, var(--color-accent) 0%, #ff5a5a 32%, var(--color-support) 78%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: mgGrad 7s ease-in-out infinite;
}
@keyframes mgGrad { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.mg-hero-sub {
    font-size: clamp(1.02rem, 1.55vw, 1.18rem);
    color: var(--color-text-muted); line-height: 1.7;
    max-width: 560px; margin-bottom: 2rem;
}
.mg-hero-sub em { color: var(--color-text); font-style: italic; }

.mg-hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 2.4rem; }
.mg-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-weight: 600; font-size: 0.98rem; padding: 0.85rem 1.7rem; border-radius: 10px;
    transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.mg-btn svg { width: 18px; height: 18px; transition: transform 0.25s ease; }
.mg-btn-primary { background: var(--color-accent); color: #fff; box-shadow: 0 10px 30px rgba(227, 0, 0, 0.28); }
.mg-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 42px rgba(227, 0, 0, 0.42); }
.mg-btn-primary:hover svg { transform: translateX(4px); }
.mg-btn-ghost { color: var(--color-text); border: 1px solid var(--color-border); background: rgba(255, 255, 255, 0.025); }
.mg-btn-ghost:hover { border-color: var(--color-support); color: #fff; transform: translateY(-2px); }

/* Before -> after proof row */
.mg-proof { display: flex; align-items: center; gap: 1rem 1.4rem; flex-wrap: wrap; }
.mg-proof-stat { display: flex; flex-direction: column; }
.mg-pnum { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700; line-height: 1; color: var(--color-text); white-space: nowrap; }
.mg-pnum.mg-up { color: var(--color-support); }
.mg-plabel { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-top: 0.4rem; }
.mg-proof-arrow { color: var(--color-accent); display: inline-flex; }
.mg-proof-arrow svg { width: 22px; height: 22px; }
.mg-proof-div { width: 1px; height: 34px; background: var(--color-border); }

/* ---- The animated SERP visual (~10% larger; JS cycles the query) ---- */
.mg-hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 374px; }
.mg-serp {
    position: relative; z-index: 3; width: min(462px, 100%);
    background: rgba(13, 14, 20, 0.95);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 1.25rem;
}
.mg-serp-bar {
    display: flex; align-items: center; gap: 0.6rem;
    background: rgba(255, 255, 255, 0.045); border: 1px solid var(--color-border);
    border-radius: 100px; padding: 0.66rem 1.1rem;
}
.mg-serp-ico { width: 19px; height: 19px; flex: none; color: var(--color-support); }
.mg-serp-q {
    /* flex:0 1 auto + min-width:0 + overflow:hidden so a long query can never
       force the search bar wider than the card (was pushing mobile off-center).
       JS keeps the tail + caret in view by scrolling to the end. */
    flex: 0 1 auto; min-width: 0; max-width: 100%;
    overflow: hidden; white-space: nowrap; min-height: 1.15em;
    border-right: 2px solid var(--color-support);
    font-size: 1.05rem; color: var(--color-text); vertical-align: bottom;
    animation: mgCaret 0.85s steps(1, end) infinite;
}
@keyframes mgCaret { 50% { border-color: transparent; } }

.mg-serp-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.55rem; }
.mg-serp-row {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.66rem 0.72rem; border-radius: 12px;
    background: rgba(255, 255, 255, 0.025); border: 1px solid transparent;
}
.mg-serp-fav { width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); flex: none; }
.mg-serp-lines { display: flex; flex-direction: column; gap: 0.34rem; flex: 1; min-width: 0; }
.mg-serp-lines .l1 { height: 8px; width: 60%; border-radius: 4px; background: rgba(255, 255, 255, 0.13); }
.mg-serp-lines .l2 { height: 7px; width: 82%; border-radius: 4px; background: rgba(255, 255, 255, 0.06); }

/* "Your Business" toggles between a gray/inactive slot and the active #1
   result. JS adds .is-active once the query finishes typing, then removes it
   after the lead toast pops — so it flashes in, the lead lands, it resets. */
.mg-serp-row.mg-you {
    background: rgba(255, 255, 255, 0.025);
    border-color: transparent;
    box-shadow: none;
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.mg-serp-row.mg-you.is-active {
    background: linear-gradient(95deg, rgba(227, 0, 0, 0.16), rgba(114, 164, 242, 0.14));
    border-color: rgba(227, 0, 0, 0.45);
    box-shadow: 0 8px 30px rgba(227, 0, 0, 0.2);
    animation: mgYouPop 0.55s cubic-bezier(.2, .8, .2, 1);
}
@keyframes mgYouPop {
    0%   { transform: scale(0.97); }
    55%  { transform: scale(1.025); }
    100% { transform: scale(1); }
}
.mg-you-rank {
    font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem;
    color: transparent; background: rgba(255, 255, 255, 0.07);
    border-radius: 8px; padding: 0.3rem 0.55rem; flex: none; box-shadow: none;
    transition: background 0.4s ease, color 0.25s ease, box-shadow 0.4s ease;
}
.mg-serp-row.mg-you.is-active .mg-you-rank {
    color: #fff; background: var(--color-accent); box-shadow: 0 4px 14px rgba(227, 0, 0, 0.4);
}
/* The label "loads in": skeleton placeholder until the row becomes #1, then
   the real text fades/slides in over it. */
.mg-you-body { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.mg-you-skeleton {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.34rem;
    opacity: 1; transition: opacity 0.3s ease;
}
.mg-you-skeleton .l1 { height: 8px; width: 52%; border-radius: 4px; background: rgba(255, 255, 255, 0.13); }
.mg-you-skeleton .l2 { height: 7px; width: 76%; border-radius: 4px; background: rgba(255, 255, 255, 0.06); }
.mg-you-text {
    display: flex; flex-direction: column; gap: 0.16rem; min-width: 0;
    opacity: 0; transform: translateY(7px);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(.2, .8, .2, 1);
}
.mg-serp-row.mg-you.is-active .mg-you-skeleton { opacity: 0; }
.mg-serp-row.mg-you.is-active .mg-you-text { opacity: 1; transform: none; transition-delay: 0.14s; }
.mg-you strong { font-size: 1.08rem; color: var(--color-text); }
.mg-you-sub { font-size: 0.86rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-you-check {
    width: 22px; height: 22px; flex: none; color: #46d68a;
    opacity: 0; transform: scale(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.mg-serp-row.mg-you.is-active .mg-you-check { animation: mgCheck 0.5s 0.2s both; }
@keyframes mgCheck {
    0%   { opacity: 0; transform: scale(0); }
    60%  { transform: scale(1.25); }
    100% { opacity: 1; transform: scale(1); }
}

.mg-lead-toast {
    position: absolute; right: -8px; bottom: -16px; z-index: 4;
    display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
    background: rgba(20, 22, 30, 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(70, 214, 138, 0.4); border-radius: 100px;
    padding: 0.55rem 1rem; font-size: 0.9rem; font-weight: 600; color: var(--color-text);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
    opacity: 0; transform: translateY(12px) scale(0.94); pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.2, .8, .2, 1);
}
.mg-lead-toast.show { opacity: 1; transform: none; }
.mg-lead-dot { width: 8px; height: 8px; border-radius: 50%; background: #46d68a; animation: mgDot 1.6s ease-out infinite; }
@keyframes mgDot {
    0%   { box-shadow: 0 0 0 0 rgba(70, 214, 138, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(70, 214, 138, 0); }
    100% { box-shadow: 0 0 0 0 rgba(70, 214, 138, 0); }
}

/* Faint floating cards behind the SERP for depth */
.mg-card { position: absolute; border-radius: 16px; z-index: 1; opacity: 0.55; }
.mg-card-a { width: 140px; height: 174px; left: -4%; top: 4%; background: linear-gradient(160deg, rgba(227, 0, 0, 0.13), rgba(227, 0, 0, 0)); border: 1px solid rgba(227, 0, 0, 0.2); animation: mgFloatA 7s ease-in-out infinite; }
.mg-card-b { width: 165px; height: 130px; right: -6%; bottom: 2%; background: linear-gradient(160deg, rgba(114, 164, 242, 0.13), rgba(114, 164, 242, 0)); border: 1px solid rgba(114, 164, 242, 0.22); animation: mgFloatB 8s ease-in-out infinite; }
@keyframes mgFloatA { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(-4deg); } }
@keyframes mgFloatB { 0%, 100% { transform: translateY(0) rotate(5deg); } 50% { transform: translateY(12px) rotate(5deg); } }

/* Scroll cue */
.mg-scroll {
    position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 3;
    width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, 0.25); border-radius: 14px;
    display: flex; justify-content: center; padding-top: 7px;
}
.mg-scroll span { width: 4px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.6); animation: mgScroll 1.8s ease-in-out infinite; }
@keyframes mgScroll { 0% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }

/* ---- One cohesive staged entrance (fixes the old title-static-while-text-rises bug) ---- */
.mg-eyebrow      { animation: mgUp 0.6s 0.05s both; }
.mg-hero-title   { animation: mgUp 0.7s 0.16s both; }
.mg-hero-sub     { animation: mgUp 0.7s 0.30s both; }
.mg-hero-actions { animation: mgUp 0.7s 0.44s both; }
.mg-proof        { animation: mgUp 0.7s 0.56s both; }
.mg-hero-visual  { animation: mgVisualIn 0.9s 0.35s both; }
.mg-scroll       { animation: mgUp 0.7s 0.9s both; }
@keyframes mgUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes mgVisualIn { from { opacity: 0; transform: translateY(26px) scale(0.96); } to { opacity: 1; transform: none; } }

/* Responsive */
@media (max-width: 920px) {
    .mg-hero { min-height: auto; padding: 7.5rem 1.25rem 4rem; }
    .mg-hero-inner { grid-template-columns: minmax(0, 1fr); text-align: center; gap: 2.75rem; }
    .mg-hero-copy { max-width: 640px; margin: 0 auto; min-width: 0; }
    .mg-eyebrow { max-width: 100%; flex-wrap: wrap; justify-content: center; }
    .mg-hero-sub { margin-left: auto; margin-right: auto; }
    .mg-hero-actions, .mg-proof { justify-content: center; }
    .mg-scroll { display: none; }
    .mg-hero-visual { width: 100%; max-width: 420px; margin: 0 auto; min-height: 300px; min-width: 0; }
    .mg-serp { width: 100%; }
}
@media (max-width: 760px) { .mg-card { display: none; } }
@media (max-width: 480px) {
    .mg-proof { gap: 0.75rem 1rem; }
    .mg-proof-div { display: none; }
    .mg-pnum { font-size: 1.25rem; }
    .mg-serp { padding: 1rem; }
    .mg-serp-q { font-size: 0.95rem; }
    .mg-you strong { font-size: 1rem; }
    .mg-you-sub { font-size: 0.8rem; }
    .mg-lead-toast { right: 4px; bottom: -14px; font-size: 0.82rem; padding: 0.5rem 0.85rem; }
}
@media (max-width: 360px) {
    /* Pin the toast to both edges + center it so the longest message can't poke
       off the side on very narrow phones. */
    .mg-lead-toast { left: 4px; right: 4px; justify-content: center; font-size: 0.74rem; padding: 0.45rem 0.6rem; }
}

/* Reduced motion: hold the hero in its resolved, visible state */
@media (prefers-reduced-motion: reduce) {
    .mg-eyebrow, .mg-hero-title, .mg-hero-sub, .mg-hero-actions, .mg-proof, .mg-hero-visual,
    .mg-scroll, .mg-scroll span, .mg-grad, .mg-eyebrow-dot, .mg-serp-q, .mg-serp-row.mg-you,
    .mg-you-check, .mg-lead-toast, .mg-lead-dot, .mg-card {
        animation: none !important;
    }
    .mg-eyebrow, .mg-hero-title, .mg-hero-sub, .mg-hero-actions, .mg-proof, .mg-hero-visual {
        opacity: 1 !important; transform: none !important;
    }
    .mg-serp-q { border-right-color: transparent !important; }
    .mg-serp-row.mg-you, .mg-you-check, .mg-lead-toast { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* =====================================================================
   Morton Growth — full-page brand aurora background (scoped to .mg-growth).
   The dark base moves to <html>; the body goes transparent so this fixed
   layer shows behind all content (the hero artwork sits on top of it).
   ===================================================================== */
html { background: var(--color-bg); }
body.mg-growth { background: transparent; }
.mg-page-bg {
    position: fixed; inset: -12%; z-index: -1; pointer-events: none;
    background:
        radial-gradient(34% 32% at 12% 18%, rgba(227, 0, 0, 0.12), transparent 60%),
        radial-gradient(40% 40% at 88% 60%, rgba(114, 164, 242, 0.13), transparent 62%),
        radial-gradient(34% 34% at 65% 108%, rgba(227, 0, 0, 0.08), transparent 60%);
    animation: mgAurora 26s ease-in-out infinite alternate;
}
@keyframes mgAurora {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(2.5%, -2.5%, 0) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) { .mg-page-bg { animation: none; } }

/* =====================================================================
   Morton Growth (Greg 2026-06-06 v2): ONE continuous premium page
   environment instead of stacked coloured slabs. The whole page shares a
   deep-navy gradient with subtle red/blue radial glows + a faint fixed grid
   and noise; sections are transparent and carry only a soft tonal GLOW
   (no slab colours, no hard dividers) so it reads as a single environment.
   (Adapted from Greg's PageShell/Section spec to our static HTML/CSS.)
   ===================================================================== */
html { background: #050814; }
/* Smooth cinematic canvas (Greg 2026-06-06 v3): NO page-wide grid, only two
   large corner glows near the top (hero area) over one smooth multi-stop linear.
   Grid/data detail lives in the hero only; the lower page stays clean. No fixed
   overlay, so full-page screenshots still capture cleanly. */
body.mg-growth {
    background:
        radial-gradient(circle at 14% 6%, rgba(239, 29, 29, 0.13), transparent 26rem),
        radial-gradient(circle at 86% 9%, rgba(37, 99, 235, 0.17), transparent 30rem),
        linear-gradient(180deg,
            #050814 0%,
            #071225 18%,
            #080f1f 34%,
            #0f0712 52%,
            #071426 70%,
            #080918 86%,
            #050814 100%);
}
body.mg-growth .growth-section { padding: 7.25rem 0; }
body.mg-growth .mg-page-bg { display: none !important; }

/* hero artwork stays as the static showpiece, blending into the environment */
body.mg-growth .mg-hero { overflow: hidden; }
body.mg-growth .mg-hero .hero-bg { position: absolute; inset: 0; z-index: 0; }
body.mg-growth .mg-hero .hero-bg::after {
    display: block;
    background: linear-gradient(to bottom, transparent 72%, rgba(5,8,20,0.55) 92%, #050814 100%);
}

/* sections: transparent over the shared environment, no slabs, no hard borders */
body.mg-growth .growth-section,
body.mg-growth .faq-section,
body.mg-growth .contact-band {
    position: relative;
    background: transparent !important;
    border-top: none !important;
    box-shadow: none !important;
}

/* CONTENT-ANCHORED AURA (Greg): a contained, blurred glow blob centred BEHIND
   each section's content — not a full-section field. Because it never reaches
   the section edges (its radials fade to 0 first), there is no mask and no edge
   line at all. This is what makes each section feel lit + intentional. */
body.mg-growth .growth-section::before,
body.mg-growth .faq-section::before,
body.mg-growth .contact-band::before {
    content: '' !important;
    position: absolute; z-index: 0; pointer-events: none;
    inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(1060px, 86vw); height: 480px; border-radius: 999px;
    background-image: none;
    /* radial mask: the aura fades to 0 at its own (elliptical) edges in every
       direction, so it can NEVER show a hard edge — even if clipped. */
    -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 30%, transparent);
    mask-image: radial-gradient(closest-side at 50% 50%, #000 30%, transparent);
    filter: blur(46px); opacity: 0.7;
}
body.mg-growth .growth-section::after,
body.mg-growth .growth-section.glow-blue::after,
body.mg-growth .growth-section.glow-red::after { display: none !important; }

/* aura tone: blue = proof/process/FAQ, red = guarantee/CTA/pricing/contact,
   mixed = custom website/showcase/services */
body.mg-growth #proof::before,
body.mg-growth #how::before,
body.mg-growth #faq::before {
    background:
        radial-gradient(circle at 70% 45%, rgba(59, 130, 246, 0.18), transparent 58%),
        radial-gradient(circle at 35% 60%, rgba(96, 165, 250, 0.08), transparent 60%);
}
body.mg-growth #guarantee::before,
body.mg-growth #cta::before,
body.mg-growth #pricing::before,
body.mg-growth #growth-contact::before {
    background:
        radial-gradient(circle at 35% 45%, rgba(239, 29, 29, 0.15), transparent 58%),
        radial-gradient(circle at 70% 60%, rgba(239, 68, 68, 0.07), transparent 62%);
}
body.mg-growth #capabilities::before,
body.mg-growth #showcase::before,
body.mg-growth #included::before {
    background:
        radial-gradient(circle at 25% 45%, rgba(239, 29, 29, 0.12), transparent 56%),
        radial-gradient(circle at 75% 50%, rgba(59, 130, 246, 0.14), transparent 58%);
}

/* =====================================================================
   Morton Growth — scroll motion: soft brand shapes that drift in the
   background (parallax, JS-driven) so the page changes as you scroll.
   Sit on top of the band, behind content; clipped by section overflow.
   ===================================================================== */
.mg-drift {
    position: absolute; z-index: 0; pointer-events: none;
    border-radius: 50%; filter: blur(70px); opacity: 0.5;
    will-change: transform;
}
.mg-drift-red  { background: radial-gradient(circle, rgba(227, 0, 0, 0.55), transparent 70%); }
.mg-drift-blue { background: radial-gradient(circle, rgba(114, 164, 242, 0.55), transparent 70%); }
@media (prefers-reduced-motion: reduce) { .mg-drift { opacity: 0.32; } }

/* Reveal direction variants (used alongside .reveal / .in-view) */
.reveal-l { transform: translateX(-34px); }
.reveal-r { transform: translateX(34px); }
.reveal-scale { transform: scale(0.92); }
.reveal-l.in-view, .reveal-r.in-view, .reveal-scale.in-view { transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal-l, .reveal-r, .reveal-scale { transform: none !important; }
}

/* =====================================================================
   Morton Growth — premium pass 1: case-study panel + glassy cards
   (ChatGPT design direction, adapted to the red/blue brand). Scoped to
   .mg-growth so the rest of the site is untouched.
   ===================================================================== */
/* Shared glass surface */
.cs-metric, .cs-card {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
        rgba(10, 14, 30, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 70px rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-radius: 18px;
}

/* Two-column case study */
.case-study {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 1.5rem;
    align-items: stretch;
    max-width: 980px;
    margin: 2.75rem auto 0;
    text-align: left;
}
.cs-metrics { display: grid; gap: 1rem; }
.cs-metric { padding: 1.3rem 1.4rem; display: flex; flex-direction: column; justify-content: center; }
.cs-metric-num { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; line-height: 1; color: var(--color-text); white-space: nowrap; }
.cs-metric-num small { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); }
.cs-metric-up { border-color: rgba(114, 164, 242, 0.32); }
.cs-metric-up .cs-metric-num { color: var(--color-support); }
.cs-metric-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-top: 0.5rem; }

.cs-card { padding: 1.9rem 1.95rem; display: flex; flex-direction: column; }
.cs-badge {
    align-self: flex-start; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--color-support); background: rgba(114, 164, 242, 0.12); border: 1px solid rgba(114, 164, 242, 0.3);
    padding: 0.3rem 0.8rem; border-radius: 100px; margin-bottom: 1.1rem;
}
.cs-card p { color: var(--color-text-muted); line-height: 1.75; font-size: 1.02rem; margin: 0 0 1.5rem; }
.cs-card p strong { color: var(--color-text); }
.cs-card p strong.ma-red { color: var(--color-accent); }

/* Mini leads-growth chart (bars grow on reveal; blue -> red = visibility -> conversion) */
.cs-chart { display: flex; align-items: flex-end; gap: 0.5rem; height: 92px; margin-top: auto; }
.cs-chart span {
    flex: 1; height: var(--h, 50%); border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--color-accent), var(--color-support));
    transform: scaleY(0); transform-origin: bottom;
    transition: transform 0.85s cubic-bezier(.2, .8, .2, 1);
}
.case-study.in-view .cs-chart span { transform: scaleY(1); }
.cs-chart span:nth-child(1) { transition-delay: 0.06s; }
.cs-chart span:nth-child(2) { transition-delay: 0.12s; }
.cs-chart span:nth-child(3) { transition-delay: 0.18s; }
.cs-chart span:nth-child(4) { transition-delay: 0.24s; }
.cs-chart span:nth-child(5) { transition-delay: 0.30s; }
.cs-chart span:nth-child(6) { transition-delay: 0.36s; }
.cs-chart span:nth-child(7) { transition-delay: 0.42s; }
.cs-chart span:nth-child(8) { transition-delay: 0.48s; }
.cs-chart-label { font-size: 0.74rem; color: var(--color-text-muted); margin-top: 0.7rem; text-align: center; }
@media (prefers-reduced-motion: reduce) { .cs-chart span { transform: scaleY(1) !important; } }

@media (max-width: 800px) {
    .case-study { grid-template-columns: 1fr; }
    .cs-metrics { grid-template-columns: repeat(3, 1fr); }
    .cs-metric { text-align: center; align-items: center; }
}
@media (max-width: 520px) { .cs-metrics { grid-template-columns: 1fr; } .cs-metric { text-align: left; align-items: flex-start; } }

/* Premium glass upgrade for the existing card types (growth page only) */
body.mg-growth .cc-feature,
body.mg-growth .step,
body.mg-growth .pricing-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
        rgba(8, 13, 28, 0.82) !important;       /* more contrast vs the cleaner canvas */
    border-color: rgba(255, 255, 255, 0.105);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075), 0 28px 90px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
body.mg-growth .cc-feature:hover { border-color: rgba(96, 165, 250, 0.32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 28px 80px rgba(37, 99, 235, 0.18); }
body.mg-growth .pricing-card:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 28px 80px rgba(37, 99, 235, 0.18); }
body.mg-growth .pricing-card.featured { background: linear-gradient(180deg, rgba(227, 0, 0, 0.10), rgba(10, 14, 30, 0.6) 45%) !important; border-color: rgba(227, 0, 0, 0.45); }

/* =====================================================================
   Morton Growth — premium pass 2: "Your Website" two-column + glass
   browser mockup (traffic particles in, "New lead" out).
   ===================================================================== */
.cap-layout { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; text-align: left; }
.cap-copy { min-width: 0; }
.cap-layout .cap-grid { grid-template-columns: repeat(2, 1fr); max-width: none; margin: 1.75rem 0 0; }
.cap-visual { position: relative; min-width: 0; }

.mock-browser {
    position: relative; z-index: 2; border-radius: 16px; overflow: hidden;
    background: rgba(8, 12, 28, 0.85); border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.mock-bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.6rem 0.85rem; background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.mock-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.mock-url { flex: 1; height: 16px; border-radius: 100px; background: rgba(255, 255, 255, 0.06); margin-left: 0.4rem; }
.mock-body { padding: 1.15rem 1.2rem 1.35rem; display: flex; flex-direction: column; gap: 1rem; }
.mock-hero { display: flex; flex-direction: column; gap: 0.55rem; }
.mock-line { height: 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.14); }
.mock-line.dim { height: 9px; background: rgba(255, 255, 255, 0.07); }
.mock-line.w65 { width: 65%; } .mock-line.w45 { width: 45%; }
.mock-cta { width: 116px; height: 30px; border-radius: 8px; margin-top: 0.45rem; background: linear-gradient(135deg, var(--color-accent), #ff5a5a); box-shadow: 0 6px 18px rgba(227, 0, 0, 0.4); }
.mock-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.mock-tile { height: 56px; border-radius: 9px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.06); }
.mock-form { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.85rem 0.9rem; border-radius: 11px; background: rgba(114, 164, 242, 0.07); border: 1px solid rgba(114, 164, 242, 0.2); }
.mock-flabel { width: 40%; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.13); }
.mock-input { height: 22px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
.mock-submit { width: 100px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, var(--color-support), #9cc2ff); }

/* review / testimonial strip inside the mockup */
.mock-reviews { display: flex; flex-direction: column; gap: 0.42rem; padding: 0.7rem 0.85rem; border-radius: 10px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.06); }
.mock-stars { display: flex; gap: 4px; }
.mock-stars span { width: 13px; height: 13px; background: #f5b53d; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; box-shadow: 0 0 8px rgba(245, 181, 61, 0.35); }
.mock-rev-line { height: 8px; border-radius: 5px; background: rgba(255, 255, 255, 0.1); }
.mock-rev-line.w70 { width: 70%; }
.mock-rev-line.w50 { width: 50%; }
:root { --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.9 5.9 21.4l1.4-6.8L2.2 9.9l6.9-.8z'/%3E%3C/svg%3E"); }

/* blue traffic particles falling into the site */
.mock-particle { position: absolute; top: -6px; width: 7px; height: 7px; border-radius: 50%; z-index: 1; pointer-events: none; }
.mp-in { background: radial-gradient(circle, var(--color-support), transparent 70%); box-shadow: 0 0 9px rgba(114, 164, 242, 0.85); animation: mpFall 3.4s linear var(--d, 0s) infinite; }
@keyframes mpFall { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { transform: translateY(210px); opacity: 0; } }

/* the lead that comes out */
.mock-lead {
    position: absolute; right: -10px; bottom: -14px; z-index: 4;
    display: inline-flex; align-items: center; gap: 0.45rem;
    background: rgba(20, 22, 30, 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(70, 214, 138, 0.4); border-radius: 100px;
    padding: 0.5rem 0.9rem; font-size: 0.85rem; font-weight: 600; color: var(--color-text);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    animation: mockLead 5s ease-in-out infinite;
}
.mock-lead-dot { width: 8px; height: 8px; border-radius: 50%; background: #46d68a; box-shadow: 0 0 0 0 rgba(70, 214, 138, 0.5); animation: mgDot 1.6s ease-out infinite; }
@keyframes mockLead { 0%, 8% { opacity: 0; transform: translateY(10px) scale(0.95); } 16%, 60% { opacity: 1; transform: none; } 70%, 100% { opacity: 0; transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) { .mp-in { animation: none; opacity: 0; } .mock-lead { animation: none; opacity: 1; transform: none; } }
@media (max-width: 900px) {
    .cap-layout { grid-template-columns: 1fr; gap: 2.5rem; }
    .cap-visual { max-width: 460px; margin: 0 auto; width: 100%; }
}
@media (max-width: 430px) { .cap-layout .cap-grid { grid-template-columns: 1fr; } }

/* pass 2 tuning — bigger mockup + lead pill contained (was clipped); + CTA band */
body.mg-growth #capabilities > .section-container { max-width: 1060px; }
.cap-layout { grid-template-columns: 0.78fr 1.22fr; }
.mock-body { padding: 1.4rem 1.5rem 1.65rem; gap: 1.2rem; }
.mock-url { height: 18px; }
.mock-dot { width: 11px; height: 11px; }
.mock-line { height: 14px; }
.mock-line.dim { height: 10px; }
.mock-cta { width: 134px; height: 36px; }
.mock-tile { height: 70px; }
.mock-input { height: 26px; }
.mock-submit { width: 114px; height: 30px; }
.mock-flabel { height: 10px; }
/* the lead pill now lives in .cap-visual (not the clipping browser) and sits on the corner */
.mock-lead { right: 12px; bottom: 14px; }

/* ---- CTA band (dark breakout section with a red->blue glow-border glass panel) ---- */
.mg-cta {
    position: relative;
    max-width: 840px; margin: 0 auto; text-align: center;
    padding: clamp(2.25rem, 5vw, 3.25rem) clamp(1.5rem, 4vw, 2.75rem);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)), rgba(10, 14, 30, 0.62);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
}
.mg-cta::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
    background: linear-gradient(135deg, rgba(227, 0, 0, 0.7), rgba(114, 164, 242, 0.7));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
.mg-cta::after {
    content: ''; position: absolute; left: -30%; right: -30%; top: -80%; height: 150%; pointer-events: none;
    /* very soft, edgeless glow — the tight version cut a visible arc behind the headline */
    background: radial-gradient(60% 70% at 50% 100%, rgba(114, 164, 242, 0.10), transparent 80%);
    filter: blur(30px);
}
.mg-cta-title { position: relative; font-family: var(--font-heading); font-size: clamp(1.6rem, 3.6vw, 2.45rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 0.9rem; text-wrap: balance; }
.mg-cta-sub { position: relative; color: var(--color-text-muted); font-size: 1.05rem; line-height: 1.6; max-width: 560px; margin: 0 auto 1.9rem; }
.mg-cta-actions { position: relative; display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }

/* =====================================================================
   Morton Growth — premium pass 3: trust panel, service "system" grid,
   wider Your-Website headline. (ChatGPT direction.)
   ===================================================================== */
/* Guarantee -> trust panel */
.trust-panel { position: relative; overflow: hidden; }
.trust-panel::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 0;
    background: linear-gradient(135deg, rgba(227, 0, 0, 0.7), rgba(114, 164, 242, 0.7));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
.trust-panel > * { position: relative; z-index: 1; }
.trust-seal {
    width: 58px; height: 58px; margin: 0 auto 1.25rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(227, 0, 0, 0.2), rgba(114, 164, 242, 0.2));
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 0 34px rgba(114, 164, 242, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.trust-seal svg { width: 28px; height: 28px; color: #46d68a; }
.trust-points {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem 1.75rem;
    margin-top: 1.7rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.trust-point { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; font-weight: 500; color: var(--color-text); }
.trust-point svg { width: 17px; height: 17px; color: var(--color-support); flex: none; }

/* Service grid -> Build / Optimize / Convert system */
.system { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.75rem; text-align: left; }
.system-col { display: flex; flex-direction: column; }
.system-head {
    font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--color-text-muted); display: flex; align-items: center; gap: 0.65rem; margin: 0 0 1rem;
}
.system-head::before { content: ''; width: 26px; height: 3px; border-radius: 2px; background: var(--color-support); }
.system-col[data-cat="optimize"] .system-head::before { background: linear-gradient(90deg, var(--color-support), var(--color-accent)); }
.system-col[data-cat="convert"] .system-head::before { background: var(--color-accent); }
.system-col[data-cat="optimize"] .system-head { color: #b9c9e8; }
.system-cards { display: flex; flex-direction: column; gap: 0.85rem; flex: 1; }
.system-cards .cc-feature { flex: 1; }
.system-col[data-cat="convert"] .cc-feature { border-left-color: var(--color-accent); }
.system-col[data-cat="convert"] .cc-feature .feature-icon { color: var(--color-accent); background: rgba(227, 0, 0, 0.12); }
.system-col[data-cat="build"] .cc-feature, .system-col[data-cat="optimize"] .cc-feature { border-left-color: var(--color-support); }
.system-col[data-cat="build"] .cc-feature .feature-icon, .system-col[data-cat="optimize"] .cc-feature .feature-icon { color: var(--color-support); background: rgba(114, 164, 242, 0.12); }
@media (max-width: 820px) { .system { grid-template-columns: 1fr; gap: 2rem; } }

/* Your Website — wider headline column so it breaks naturally */
.cap-layout { grid-template-columns: 1.02fr 1.05fr; }

/* =====================================================================
   Morton Growth — premium pass 4: proof-metric tags/emphasis, timeline path
   ===================================================================== */
.cs-metric { position: relative; }
.cs-tag { display: inline-block; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--color-text-muted); margin-bottom: 0.5rem; }
.cs-metric-up .cs-tag { color: var(--color-support); }
.cs-metric-up {
    transform: scale(1.04);
    border-color: rgba(114, 164, 242, 0.5) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 40px rgba(114, 164, 242, 0.24), 0 24px 70px rgba(0, 0, 0, 0.3) !important;
    z-index: 1;
}
.cs-metric:not(:last-child)::after {
    content: ''; position: absolute; left: 50%; bottom: -0.85rem; transform: translateX(-50%) rotate(45deg);
    width: 8px; height: 8px; border-right: 2px solid rgba(114, 164, 242, 0.55); border-bottom: 2px solid rgba(114, 164, 242, 0.55);
}
@media (max-width: 800px) { .cs-metric:not(:last-child)::after { display: none; } .cs-metric-up { transform: none; } }

/* How it works — faint timeline path + a travelling dot */
/* No connector line across the cards (it read as an ugly red->blue streak).
   Instead the numbered badges light up 1 -> 4 in sequence, on a loop. */
.steps-timeline::before, .steps-timeline::after { display: none !important; }
.step-num { animation: stepGlow 4s ease-in-out infinite; }
.step:nth-child(1) .step-num { animation-delay: 0s; }
.step:nth-child(2) .step-num { animation-delay: 1s; }
.step:nth-child(3) .step-num { animation-delay: 2s; }
.step:nth-child(4) .step-num { animation-delay: 3s; }
@keyframes stepGlow {
    0%   { transform: translateX(-50%) scale(1);    filter: none; }
    5%   { transform: translateX(-50%) scale(1.18); filter: brightness(1.3) drop-shadow(0 0 10px rgba(255, 255, 255, 0.6)); }
    13%  { transform: translateX(-50%) scale(1);    filter: none; }
    100% { transform: translateX(-50%) scale(1);    filter: none; }
}
@media (prefers-reduced-motion: reduce) { .step-num { animation: none; } }

/* pass 4 — pricing polish (#9): lighter anchor labels, dominant Growth card */
.pricing-anchor { padding: 0.42rem 0.9rem; gap: 0.05rem; }
.pricing-anchor span { font-size: 0.62rem; letter-spacing: 0.05em; }
.pricing-anchor strong { font-size: 0.86rem; }
.pricing-card.featured .pricing-anchor { padding-top: 1.4rem; }
body.mg-growth .pricing-card.featured {
    transform: scale(1.045);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 0 52px rgba(227, 0, 0, 0.22), 0 30px 84px rgba(0, 0, 0, 0.42) !important;
    z-index: 1;
}
body.mg-growth .pricing-card.featured:hover { transform: scale(1.045) translateY(-4px); }
@media (max-width: 980px) { body.mg-growth .pricing-card.featured, body.mg-growth .pricing-card.featured:hover { transform: none; } }
.pricing-included {
    text-align: center; font-size: 0.9rem; color: var(--color-text-muted);
    margin: -0.75rem auto 2.25rem; max-width: 760px; line-height: 1.6;
}
.pricing-included strong { color: var(--color-text); font-weight: 700; }

/* pass 4 — FAQ premium accordions (#10) */
.faq-list { display: flex; flex-direction: column; gap: 0.85rem; max-width: 860px; margin: 0 auto; }
.faq-item {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)), rgba(10, 14, 30, 0.5);
    border: 1px solid var(--color-border);
    border-left: 3px solid rgba(114, 164, 242, 0.5);
    border-radius: 12px; overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq-item:hover { border-color: rgba(114, 164, 242, 0.35); }
.faq-item[open] { border-left-color: var(--color-accent); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28); }
.faq-q {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.15rem 1.4rem;
    font-family: var(--font-heading); font-size: 1.02rem; font-weight: 600; color: var(--color-text);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ''; }
.faq-chev { width: 13px; height: 13px; flex: none; position: relative; }
.faq-chev::before, .faq-chev::after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--color-support); transition: transform 0.3s ease, background 0.3s ease; }
.faq-chev::before { transform: translate(-50%, -50%); }
.faq-chev::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-chev::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-item[open] .faq-chev::before, .faq-item[open] .faq-chev::after { background: var(--color-accent); }
.faq-a {
    /* NO padding on the animated box — padding lives on the inner <p>. Animating
       height with bottom padding here caused a hitch near height 0 (start of
       expand / end of collapse) because padding can't compress linearly. */
    padding: 0; color: var(--color-text-muted); font-size: 0.97rem; line-height: 1.7;
    overflow: hidden;                                   /* clip while height animates */
    transition: height 0.3s cubic-bezier(.4, 0, .2, 1); /* JS drives the px height */
    will-change: height;
}
.faq-a p { margin: 0; padding: 0 1.4rem 1.3rem; }
.faq-a a { color: var(--color-support); font-weight: 600; }
/* opacity-only fade for the text — no transform, which previously fought the
   height animation and caused a stutter at the start/end of open & close. */
.faq-item[open] .faq-a { animation: faqFade 0.3s ease; }
@keyframes faqFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .faq-a { transition: none; }
    .faq-item[open] .faq-a { animation: none; }
}

/* =====================================================================
   Morton Growth — premium pass 5: custom-design showcase (#11) + button shine
   ===================================================================== */
.showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.75rem; text-align: left; }
.showcase-card { perspective: 900px; }
.sc-mock {
    border-radius: 14px; overflow: hidden;
    background: rgba(8, 12, 28, 0.85); border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    transform-style: preserve-3d;
}
.showcase-card:hover .sc-mock { transform: rotateX(4deg) rotateY(-5deg) translateY(-4px); box-shadow: 0 32px 84px rgba(37, 99, 235, 0.22); border-color: rgba(114, 164, 242, 0.4); }
.sc-bar { display: flex; gap: 5px; padding: 0.5rem 0.7rem; background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.sc-bar span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.sc-body { padding: 0.95rem 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; min-height: 190px; }
.sc-line { height: 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.13); }
.sc-line.dim { background: rgba(255, 255, 255, 0.06); height: 7px; }
.sc-line.w70 { width: 70%; } .sc-line.w55 { width: 55%; } .sc-line.w40 { width: 40%; }
.sc-cta { width: 86px; height: 24px; border-radius: 6px; margin: 0.15rem 0; }
.sc-cta-sm { width: 64px; height: 18px; }
.sc-cta-red { background: linear-gradient(135deg, var(--color-accent), #ff5a5a); box-shadow: 0 4px 14px rgba(227, 0, 0, 0.4); }
.sc-cta-blue { background: linear-gradient(135deg, var(--color-support), #9cc2ff); box-shadow: 0 4px 14px rgba(114, 164, 242, 0.4); }
.sc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: auto; }
.sc-tiles span { height: 40px; border-radius: 7px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.05); }
.sc-grid4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-top: auto; }
.sc-grid4 span { height: 42px; border-radius: 7px; background: rgba(114, 164, 242, 0.08); border: 1px solid rgba(114, 164, 242, 0.14); }
.sc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.sc-cols > div { display: flex; flex-direction: column; gap: 0.42rem; }
.sc-form { display: flex; flex-direction: column; gap: 0.42rem; padding: 0.6rem; border-radius: 8px; background: rgba(114, 164, 242, 0.06); border: 1px solid rgba(114, 164, 242, 0.16); margin-top: auto; }
.sc-input { height: 16px; border-radius: 4px; background: rgba(255, 255, 255, 0.05); }
.sc-label { margin-top: 1rem; }
.sc-label strong { display: block; font-size: 1.02rem; color: var(--color-text); margin-bottom: 0.15rem; }
.sc-label span { font-size: 0.85rem; color: var(--color-text-muted); }
@media (prefers-reduced-motion: reduce) { .showcase-card:hover .sc-mock { transform: translateY(-4px); } }
@media (max-width: 820px) { .showcase-grid { grid-template-columns: 1fr; max-width: 420px; margin: 2.5rem auto 0; } }

/* Button shine (#12) — soft sweep on hover for the primary CTAs */
.mg-btn-primary, .pricing-card .btn-primary { position: relative; overflow: hidden; }
.mg-btn-primary::after, .pricing-card .btn-primary::after {
    content: ''; position: absolute; top: 0; left: -65%; width: 42%; height: 100%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-18deg); transition: left 0.6s ease;
}
.mg-btn-primary:hover::after, .pricing-card .btn-primary:hover::after { left: 125%; }
@media (prefers-reduced-motion: reduce) { .mg-btn-primary::after, .pricing-card .btn-primary::after { display: none; } }

/* =====================================================================
   Morton Growth — premium pass 6: section-header pills (#5), bigger showcase (#3)
   ===================================================================== */
body.mg-growth .section-kicker {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.9rem; border-radius: 100px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1);
}
body.mg-growth .section-kicker::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none;
    background: var(--color-support); box-shadow: 0 0 8px rgba(114, 164, 242, 0.7);
}
body.mg-growth .glow-red .section-kicker::before { background: var(--color-accent); box-shadow: 0 0 8px rgba(227, 0, 0, 0.7); }

/* bigger, more impressive design-showcase cards + soft brand glow behind each */
.showcase-card { position: relative; }
.showcase-card .sc-mock { position: relative; z-index: 1; }
.showcase-card::before {
    content: ''; position: absolute; inset: -8% -6% 16% -6%; z-index: 0; pointer-events: none; border-radius: 26px;
    opacity: 0.55; transition: opacity 0.35s ease;
    background: radial-gradient(55% 55% at 50% 35%, rgba(114, 164, 242, 0.16), transparent 72%);
}
.showcase-card:nth-child(1)::before { background: radial-gradient(55% 55% at 50% 35%, rgba(227, 0, 0, 0.18), transparent 72%); }
.showcase-card:hover::before { opacity: 1; }
.sc-body { min-height: 232px; gap: 0.7rem; padding: 1.1rem 1.15rem 1.25rem; }
.sc-line { height: 10px; }
.sc-cta { height: 28px; width: 98px; }
.sc-tiles span, .sc-grid4 span { height: 48px; }

/* =====================================================================
   Morton Growth — premium pass 6: contact conversion panel (#10), FAQ 2-col (#9)
   ===================================================================== */
.contact-panel {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.75rem, 4vw, 3rem);
    max-width: 1000px; margin: 0 auto; text-align: left;
    padding: clamp(2rem, 4vw, 3rem);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)), rgba(10, 14, 30, 0.6);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.contact-panel::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 0;
    background: linear-gradient(135deg, rgba(227, 0, 0, 0.7), rgba(114, 164, 242, 0.7));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.contact-panel > * { position: relative; z-index: 1; }
.contact-aside .contact-title { font-size: clamp(1.5rem, 3vw, 2.1rem); text-align: left; margin: 0.9rem 0 0.7rem; }
.contact-aside .contact-subtitle { text-align: left; margin: 0 0 1.6rem; }
.contact-trust { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.contact-trust li { display: flex; align-items: flex-start; gap: 0.7rem; }
.contact-trust svg { width: 20px; height: 20px; color: #46d68a; flex: none; margin-top: 0.1rem; }
.contact-trust strong { display: block; color: var(--color-text); font-size: 0.98rem; }
.contact-trust span { font-size: 0.85rem; color: var(--color-text-muted); }
.contact-formwrap .mg-form { margin: 0; max-width: none; }
@media (max-width: 820px) { .contact-panel { grid-template-columns: 1fr; } }

/* better input focus (#10) */
.mg-input { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.mg-input:focus { outline: none; border-color: var(--color-support); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(114, 164, 242, 0.18); background: rgba(114, 164, 242, 0.04); }

/* FAQ two-column (#9) */
.faq-layout { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.faq-aside { text-align: left; position: sticky; top: 90px; }
.faq-aside .section-title { text-align: left; margin-bottom: 0.9rem; }
.faq-aside-copy { color: var(--color-text-muted); font-size: 1rem; line-height: 1.7; margin: 0 0 1.5rem; }
.faq-layout .faq-list { max-width: none; margin: 0; }
@media (max-width: 860px) { .faq-layout { grid-template-columns: 1fr; } .faq-aside { position: static; } }

/* FAQ — smooth height animation on open/close (JS-driven) */
.faq-a { overflow: hidden; transition: height 0.32s cubic-bezier(.4, 0, .2, 1); }
@keyframes faqIn { from { opacity: 0; } to { opacity: 1; } }

/* =====================================================================
   Morton Growth — premium pass 3 (Greg's full spec): showcase showpiece,
   connected service lanes, proof metric timeline, guarantee certificate
   chips. Adapted to the existing static markup.
   ===================================================================== */

/* (5) Design showcase = the showpiece: each mockup lives in a large glass
   card; the middle "Professional firm" card is featured + raised. */
body.mg-growth .showcase-grid { gap: 1.75rem; margin-top: 3.25rem; align-items: stretch; }
body.mg-growth .showcase-card {
    position: relative; perspective: none; display: flex; flex-direction: column;
    padding: 16px; border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)), rgba(8, 13, 28, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 30px 90px rgba(0, 0, 0, 0.34);
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
body.mg-growth .showcase-card:hover {
    transform: translateY(-8px); border-color: rgba(96, 165, 250, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 38px 110px rgba(37, 99, 235, 0.20);
}
body.mg-growth .showcase-card.featured { transform: translateY(-16px); border-color: rgba(239, 29, 29, 0.30); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 40px 120px rgba(239, 29, 29, 0.16); }
body.mg-growth .showcase-card.featured:hover { transform: translateY(-22px); }
body.mg-growth .showcase-card.featured::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 0;
    background: linear-gradient(135deg, rgba(239, 29, 29, 0.55), rgba(96, 165, 250, 0.45));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.55;
}
body.mg-growth .showcase-card > * { position: relative; z-index: 1; }
body.mg-growth .sc-mock { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42); transform: none !important; }
body.mg-growth .showcase-card:hover .sc-mock { border-color: rgba(255, 255, 255, 0.09); }
body.mg-growth .sc-body { min-height: 248px; }
body.mg-growth .sc-label { margin-top: 1.15rem; padding: 0 0.35rem 0.25rem; }

/* (6) Service lanes: connector line lives in a LEFT GUTTER (empty space beside
   the cards) with a glowing node per card — so the line never streaks through
   the translucent cards the way the old behind-the-card spine did. */
body.mg-growth .system-cards { position: relative; padding-left: 32px; }
body.mg-growth .system-cards::before {
    content: ''; display: block; position: absolute; left: 14px; top: 4px; bottom: 16px; width: 2px; z-index: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(96, 165, 250, 0.6), rgba(96, 165, 250, 0.12), transparent);
}
body.mg-growth .system-col[data-cat="optimize"] .system-cards::before { background: linear-gradient(to bottom, rgba(96, 165, 250, 0.55), rgba(239, 29, 29, 0.4), transparent); }
body.mg-growth .system-col[data-cat="convert"] .system-cards::before { background: linear-gradient(to bottom, rgba(239, 29, 29, 0.6), rgba(239, 29, 29, 0.14), transparent); }
body.mg-growth .system-cards .cc-feature { position: relative; }
body.mg-growth .system-cards .cc-feature::after {
    content: ''; position: absolute; left: -23px; top: 26px; width: 12px; height: 12px; border-radius: 50%; z-index: 2; pointer-events: none;
    background: #60a5fa; box-shadow: 0 0 16px rgba(96, 165, 250, 0.75); border: 2px solid rgba(5, 8, 20, 0.9);
}
body.mg-growth .system-col[data-cat="convert"] .cc-feature::after { background: #ef1d1d; box-shadow: 0 0 16px rgba(239, 29, 29, 0.75); }

/* (8) Proof: "After" is the highlighted hero metric; the pre-existing chevrons
   carry the flow. No vertical connector line (it streaked through the cards). */
body.mg-growth .cs-metrics::before { display: none !important; }

/* (9) Guarantee: render the proof points as certificate chips. */
body.mg-growth .trust-points { border-top: none; padding-top: 0.4rem; margin-top: 1.7rem; gap: 0.65rem; }
body.mg-growth .trust-point { padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.10); font-size: 0.85rem; font-weight: 500; }

/* (12) Mobile: collapse the premium grids cleanly */
@media (max-width: 900px) {
    body.mg-growth .system { grid-template-columns: 1fr; gap: 1.25rem; }
    body.mg-growth .cap-layout { grid-template-columns: 1fr; }
    body.mg-growth .showcase-card.featured { transform: none; }
    body.mg-growth .showcase-card.featured:hover { transform: translateY(-8px); }
    body.mg-growth .system-cards { padding-left: 0; }
    body.mg-growth .system-cards::before, body.mg-growth .system-cards .cc-feature::after { display: none; }
}

/* =====================================================================
   Morton Growth — premium pass 4 (Greg's lower-page round): wider scale,
   softer bands, showcase + service-system + pricing + faq + contact polish.
   ===================================================================== */

/* (1) Wider, more substantial layout; visual-heavy sections go wider still */
body.mg-growth .section-container { max-width: none; width: min(1180px, calc(100vw - 48px)); }
body.mg-growth #showcase .section-container,
body.mg-growth #included .section-container { width: min(1280px, calc(100vw - 48px)); }

/* (5) Larger, more deliberate section headings */
body.mg-growth .section-title { font-size: clamp(2.125rem, 4vw, 3.5rem); letter-spacing: -0.035em; line-height: 1.06; }

/* (3) Design showcase = the showpiece: taller, more substantial preview cards */
body.mg-growth .sc-body { min-height: 300px; }
body.mg-growth .sc-label strong { font-size: 1.1rem; }

/* (6) Pricing: includes-pill, featured plan scaled up, lighter top bands */
body.mg-growth .pricing-included {
    width: fit-content; max-width: calc(100vw - 48px);
    margin: 0.25rem auto 2.6rem; padding: 0.62rem 1.15rem;
    border-radius: 999px; background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.10);
    font-size: 0.85rem; color: rgba(226, 232, 240, 0.8);
}
body.mg-growth .pricing-anchor { background: linear-gradient(135deg, rgba(227, 0, 0, 0.09), rgba(114, 164, 242, 0.09)); }
body.mg-growth .pricing-card.featured { transform: scale(1.045); z-index: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 36px 110px rgba(239, 29, 29, 0.20); }
body.mg-growth .pricing-card.featured:hover { transform: scale(1.045) translateY(-4px); }

/* (7) FAQ left column — a "Still unsure?" help card so it feels designed */
body.mg-growth .faq-help-card {
    margin-top: 1.75rem; padding: 1.4rem 1.5rem; border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.022)), rgba(8, 13, 28, 0.72);
    border: 1px solid rgba(96, 165, 250, 0.2);
}
body.mg-growth .faq-help-card h3 { font-size: 1.06rem; margin: 0 0 0.4rem; }
body.mg-growth .faq-help-card p { font-size: 0.92rem; color: var(--color-text-muted); line-height: 1.6; margin: 0 0 0.85rem; }
body.mg-growth .faq-help-card a { color: var(--color-support); font-weight: 600; }

/* (8) Contact — a stronger closing panel with a soft brand shine */
body.mg-growth .contact-panel { max-width: 1020px; padding: clamp(2rem, 4vw, 3.25rem); }
body.mg-growth .contact-panel::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
    background:
        radial-gradient(circle at 18% 0%, rgba(239, 29, 29, 0.13), transparent 30%),
        radial-gradient(circle at 86% 100%, rgba(96, 165, 250, 0.12), transparent 34%);
}

/* (1/3) mobile: keep wide sections from overflowing */
@media (max-width: 900px) {
    body.mg-growth #showcase .section-container,
    body.mg-growth #included .section-container,
    body.mg-growth .section-container { width: min(100%, calc(100vw - 36px)); }
    body.mg-growth .pricing-card.featured { transform: none; }
    body.mg-growth .pricing-card.featured:hover { transform: translateY(-4px); }
}

/* =====================================================================
   Morton Growth — premium pass 5: richer/distinct showcase mockups (#3)
   + deliberate section-header treatment & alignment variation (#5).
   ===================================================================== */

/* (3) each showcase mockup now reads as a different kind of website */
.sc-bar-url { flex: 1; height: 8px; border-radius: 100px; background: rgba(255, 255, 255, 0.07); margin-left: 6px; }
.sc-actionrow { display: flex; align-items: center; gap: 0.5rem; margin: 0.1rem 0; }
.sc-chip { width: 48px; height: 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); }
.sc-trust { display: flex; align-items: center; gap: 0.5rem; margin-top: auto; }
.sc-stars { display: flex; gap: 3px; }
.sc-stars i { width: 11px; height: 11px; background: #f5b53d; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }
/* professional firm */
.sc-topnav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.15rem; }
.sc-logo { width: 36px; height: 12px; border-radius: 4px; background: linear-gradient(135deg, rgba(114, 164, 242, 0.7), rgba(156, 194, 255, 0.5)); }
.sc-nav { display: flex; gap: 6px; }
.sc-nav i { width: 16px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.13); }
.sc-body-pro .sc-form { margin-top: 0; }
.sc-badges { display: flex; gap: 0.45rem; margin-top: auto; }
.sc-badges span { flex: 1; height: 18px; border-radius: 6px; background: rgba(114, 164, 242, 0.10); border: 1px solid rgba(114, 164, 242, 0.2); }
/* booking & ecommerce */
.sc-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin: 0.1rem 0; }
.sc-prod { position: relative; height: 48px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.06); }
.sc-tag { position: absolute; right: 6px; bottom: 6px; width: 24px; height: 8px; border-radius: 3px; background: var(--color-accent); opacity: 0.82; }
.sc-bookbar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: auto; padding: 0.55rem 0.65rem; border-radius: 9px; background: rgba(114, 164, 242, 0.07); border: 1px solid rgba(114, 164, 242, 0.18); }
.sc-bookbar .sc-cta { margin: 0; }

/* (5) eyebrow dot is consistently the brand red across every section */
body.mg-growth .section-kicker::before,
body.mg-growth .glow-red .section-kicker::before {
    background: var(--color-accent); box-shadow: 0 0 9px rgba(239, 29, 29, 0.8);
}
/* (5) deliberate alignment variation: center two "moment" sections so the page
   alternates left/centre instead of every header being left-aligned. */
body.mg-growth #showcase > .section-container,
body.mg-growth #how > .section-container { text-align: center; }
body.mg-growth #showcase > .section-container .section-kicker,
body.mg-growth #how > .section-container .section-kicker { justify-content: center; }
body.mg-growth #showcase .section-subtitle,
body.mg-growth #how .section-subtitle { max-width: 680px; margin-left: auto; margin-right: auto; }
/* keep the card content inside centred sections left-aligned */
body.mg-growth #showcase .sc-label { text-align: left; }
body.mg-growth #how .step { text-align: center; }

/* =====================================================================
   Morton Growth — premium pass 6: richer, more distinct showcase mockups.
   Each preview now reads as a different real website type (not bigger, just
   more detailed). Fixed body height keeps the three cards aligned; overflow
   clips like a real site preview.
   ===================================================================== */
body.mg-growth .sc-body { height: 326px; min-height: 326px; overflow: hidden; gap: 0.62rem; }
.sc-line.w75 { width: 75%; } .sc-line.w50 { width: 50%; } .sc-line.w35 { width: 35%; } .sc-line.w60 { width: 60%; }

/* Local service — phone-forward, trust badges, service list, review */
.sc-head { display: flex; align-items: center; justify-content: space-between; }
.sc-brand { width: 42px; height: 13px; border-radius: 4px; background: rgba(255, 255, 255, 0.18); }
.sc-phone { width: 60px; height: 19px; border-radius: 999px; background: linear-gradient(135deg, var(--color-accent), #ff5a5a); box-shadow: 0 3px 12px rgba(239, 29, 29, 0.4); }
.sc-badgestrip { display: flex; gap: 6px; }
.sc-badgestrip span { flex: 1; height: 15px; border-radius: 5px; background: rgba(96, 165, 250, 0.12); border: 1px solid rgba(96, 165, 250, 0.2); }
.sc-services { display: flex; flex-direction: column; gap: 7px; }
.sc-srv { display: flex; align-items: center; gap: 9px; }
.sc-srv i { width: 20px; height: 20px; border-radius: 6px; background: rgba(239, 29, 29, 0.16); border: 1px solid rgba(239, 29, 29, 0.24); flex: none; }
.sc-srv b { flex: 1; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); }
.sc-review { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }

/* Professional firm — top nav + blue CTA, stat row, two-column with form */
.sc-navcta { width: 42px; height: 17px; border-radius: 6px; background: linear-gradient(135deg, var(--color-support), #9cc2ff); }
.sc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sc-stats span { height: 36px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.07); }
.sc-flabel { width: 52%; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.13); }
.sc-body-pro .sc-cols { margin-top: auto; }

/* Booking & ecommerce — shop bar with cart + tabs, product grid w/ thumbs */
.sc-shopbar { display: flex; align-items: center; gap: 10px; }
.sc-tabs { display: flex; gap: 7px; flex: 1; }
.sc-tabs i { width: 28px; height: 7px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); }
.sc-cart { width: 19px; height: 19px; border-radius: 6px; background: linear-gradient(135deg, var(--color-support), #9cc2ff); flex: none; }
.sc-body-book .sc-prod { height: 58px; }
.sc-thumb { position: absolute; left: 6px; top: 6px; right: 6px; height: 26px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); }
.sc-body-book .sc-products { margin: 0.1rem 0 auto; }

/* =====================================================================
   Morton Growth — premium pass 7: bigger, more confident layouts.
   Larger sections, a real case-study proof, a cinematic mid CTA, premium
   pricing packages, a wider closing panel, a stronger service system, and
   a taller showcase. Background untouched.
   ===================================================================== */

/* (2) more vertical scale + wider pricing column */
body.mg-growth .growth-section { padding: clamp(6rem, 11vw, 9.5rem) 0; }
body.mg-growth #pricing .section-container { width: min(1280px, calc(100vw - 48px)); }

/* (5) proof reads like a major case study; "3–5 / wk" is the visual winner */
body.mg-growth .case-study { max-width: 1120px; grid-template-columns: 380px 1fr; gap: 2.25rem; margin-top: 3.5rem; }
body.mg-growth .cs-metric { min-height: 132px; padding: 1.7rem 1.9rem; }
body.mg-growth .cs-metric-num { font-size: 2.3rem; }
body.mg-growth .cs-metric-up { transform: scale(1.05); }
body.mg-growth .cs-metric-up .cs-metric-num { font-size: 3rem; }
body.mg-growth .cs-card { padding: 2.4rem 2.6rem; }
body.mg-growth .cs-chart { height: 122px; }

/* (6) mid-page CTA = a cinematic pause, not a small card */
body.mg-growth .mg-cta { max-width: 900px; padding: clamp(3rem, 6vw, 4.25rem) clamp(2rem, 5vw, 4rem); border-radius: 28px; }
body.mg-growth .mg-cta-title { font-size: clamp(1.9rem, 4vw, 2.9rem); }
body.mg-growth .mg-cta-sub { font-size: 1.12rem; max-width: 600px; }

/* (7) pricing = premium service packages */
body.mg-growth .pricing-card { padding: 2.6rem 2.1rem; border-radius: 22px; }
body.mg-growth .pricing-card.featured { transform: scale(1.055); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 40px 130px rgba(239, 29, 29, 0.22); }
body.mg-growth .pricing-card.featured:hover { transform: scale(1.055) translateY(-4px); }

/* (8) contact = wider, premium closing destination */
body.mg-growth .contact-panel { max-width: 980px; padding: clamp(2.25rem, 4vw, 3.25rem); border-radius: 28px; }

/* (3) showcase = taller showpiece + new per-type module */
body.mg-growth .showcase-card { padding: 20px; border-radius: 28px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 36px 120px rgba(0, 0, 0, 0.42); }
body.mg-growth .showcase-card:hover { transform: translateY(-10px); }
body.mg-growth .showcase-card.featured:hover { transform: translateY(-16px); }
body.mg-growth .sc-body { height: 360px; min-height: 360px; }
.sc-locrow { display: flex; align-items: center; gap: 10px; }
.sc-map { position: relative; width: 50px; height: 32px; border-radius: 6px; background: rgba(96, 165, 250, 0.12); border: 1px solid rgba(96, 165, 250, 0.22); flex: none; }
.sc-map::after { content: ''; position: absolute; left: 50%; top: 44%; width: 8px; height: 8px; border-radius: 50% 50% 50% 0; transform: translate(-50%, -50%) rotate(-45deg); background: var(--color-accent); }
.sc-loclines { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sc-quote { display: flex; flex-direction: column; gap: 6px; padding: 0.6rem 0.75rem; border-radius: 8px; background: rgba(255, 255, 255, 0.03); border-left: 2px solid rgba(96, 165, 250, 0.5); }
.sc-order { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sc-total { width: 56px; height: 13px; border-radius: 4px; background: rgba(255, 255, 255, 0.15); }
.sc-cocta { width: 70px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, var(--color-accent), #ff5a5a); box-shadow: 0 3px 12px rgba(239, 29, 29, 0.35); }

/* (4) service system — stronger connector + nodes so it reads as a system */
body.mg-growth .system-cards::before { width: 2.5px; left: 13px; }
body.mg-growth .system-cards .cc-feature::after { width: 14px; height: 14px; left: -24px; }

/* (9) belt-and-braces line audit: no section borders, decoration behind content */
body.mg-growth .growth-section,
body.mg-growth .faq-section,
body.mg-growth .contact-band { border: 0 !important; }
body.mg-growth .growth-section > .section-container,
body.mg-growth .faq-section > .section-container,
body.mg-growth .contact-band > .section-container { position: relative; z-index: 2; }

/* mobile: don't let scaled featured cards or wide columns overflow */
@media (max-width: 900px) {
    body.mg-growth #pricing .section-container { width: min(100%, calc(100vw - 36px)); }
    body.mg-growth .case-study { grid-template-columns: 1fr; max-width: 560px; }
}

/* Refined hairline dividing the hero (artwork header) from the smooth gradient
   page below it — a centre-bright gradient line, not a hard full-width slab. */
body.mg-growth .mg-hero::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 4; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24) 50%, transparent);
}

/* =====================================================================
   Morton Growth — premium pass 8: more confident scale + a real portfolio
   feel for the showcase (colour, not grayscale wireframes). Background
   untouched. Bigger headings, bigger sections, dominant Growth plan.
   ===================================================================== */

/* (1) bolder headings + a touch more vertical scale */
body.mg-growth .section-title { font-size: clamp(2.4rem, 4.6vw, 3.8rem); line-height: 1.04; letter-spacing: -0.04em; }
body.mg-growth .section-subtitle { font-size: 1.12rem; }
body.mg-growth .growth-section { padding: clamp(6.5rem, 11vw, 9.75rem) 0; }

/* (2) showcase = a portfolio preview: taller cards with COLOUR. Each mockup
   gets a tinted canvas + a coloured hero banner so it reads as a real design. */
body.mg-growth .showcase-card { padding: 22px; border-radius: 30px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 38px 120px rgba(0, 0, 0, 0.42); }
body.mg-growth .showcase-card.featured { transform: translateY(-18px); }
body.mg-growth .showcase-card.featured:hover { transform: translateY(-24px); }
body.mg-growth .sc-body { height: 396px; min-height: 396px; }
body.mg-growth .sc-label strong { font-size: 1.18rem; }
.sc-body-local { background: radial-gradient(120% 70% at 18% 0%, rgba(239, 29, 29, 0.07), transparent 60%); }
.sc-body-pro { background: radial-gradient(120% 70% at 82% 0%, rgba(59, 130, 246, 0.08), transparent 60%); }
.sc-body-book { background: radial-gradient(130% 70% at 50% 0%, rgba(96, 165, 250, 0.06), transparent 58%); }
/* coloured hero banner inside each mockup */
.sc-hero { position: relative; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.95rem 1rem 1.05rem; border-radius: 10px; overflow: hidden; }
.sc-hero-red { background: linear-gradient(135deg, rgba(239, 29, 29, 0.36), rgba(110, 12, 22, 0.55)); border: 1px solid rgba(239, 29, 29, 0.3); }
.sc-hero-blue { background: linear-gradient(135deg, rgba(59, 130, 246, 0.34), rgba(18, 38, 86, 0.55)); border: 1px solid rgba(96, 165, 250, 0.3); }
.sc-hero-mix { background: linear-gradient(135deg, rgba(239, 29, 29, 0.26), rgba(59, 130, 246, 0.3)); border: 1px solid rgba(255, 255, 255, 0.14); }
.sc-hl { height: 11px; border-radius: 5px; background: rgba(255, 255, 255, 0.72); }
.sc-hl.dim { height: 8px; background: rgba(255, 255, 255, 0.42); }
.sc-hl.w60 { width: 60%; } .sc-hl.w55 { width: 55%; } .sc-hl.w40 { width: 40%; } .sc-hl.w35 { width: 35%; }
.sc-cta-white { width: 86px; height: 23px; border-radius: 6px; background: rgba(255, 255, 255, 0.92); margin-top: 0.15rem; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
/* product thumbs alternate colour so the storefront looks designed */
.sc-body-book .sc-prod:nth-child(odd) .sc-thumb { background: rgba(59, 130, 246, 0.2); }
.sc-body-book .sc-prod:nth-child(even) .sc-thumb { background: rgba(239, 29, 29, 0.16); }

/* (3) service system — stronger lanes so it reads as a system, not a grid */
body.mg-growth .system { gap: 2.1rem; }
body.mg-growth .system-head { font-size: 0.98rem; letter-spacing: 0.14em; color: #cdd9f0; }
body.mg-growth .system-head::before { width: 30px; height: 3px; }
body.mg-growth .system-cards::before { width: 3px; left: 12px; }
body.mg-growth .system-cards .cc-feature::after { width: 15px; height: 15px; left: -25px; }

/* (4) proof — bigger case study; After is the clear winner */
body.mg-growth .cs-metric { min-height: 138px; padding: 1.8rem 2rem; }
body.mg-growth .cs-card { padding: 2.6rem 2.8rem; }

/* (5) mid CTA a touch wider */
body.mg-growth .mg-cta { max-width: 920px; }

/* (6) pricing — Growth clearly dominant, roomier cards */
body.mg-growth .pricing-card { padding: 2.75rem 2.3rem; border-radius: 26px; }
body.mg-growth .pricing-card.featured { transform: scale(1.06); border-color: rgba(239, 29, 29, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 42px 135px rgba(239, 29, 29, 0.24); }
body.mg-growth .pricing-card.featured:hover { transform: scale(1.06) translateY(-4px); }

@media (max-width: 900px) {
    body.mg-growth .pricing-card.featured { transform: none; }
    body.mg-growth .pricing-card.featured:hover { transform: translateY(-4px); }
}

/* The gutter connector line + nodes read as confusing floating lines next to
   each card's own coloured edge (Greg: "what are the vertical lines for?").
   Remove them; lane identity comes from the coloured headers + card edges. */
body.mg-growth .system-cards { padding-left: 0; }
body.mg-growth .system-cards::before,
body.mg-growth .system-cards .cc-feature::after { display: none !important; }

/* Optimize lane = green (Greg) so Build / Optimize / Convert read as three
   distinct tracks (blue / green / red). Uses the site's established green. */
body.mg-growth .system-col[data-cat="optimize"] .system-head { color: #a9e6c6; }
body.mg-growth .system-col[data-cat="optimize"] .system-head::before { background: #46d68a; box-shadow: 0 0 8px rgba(70, 214, 138, 0.5); }
body.mg-growth .system-col[data-cat="optimize"] .cc-feature { border-left-color: #46d68a; }
body.mg-growth .system-col[data-cat="optimize"] .cc-feature .feature-icon { color: #46d68a; background: rgba(70, 214, 138, 0.13); }
body.mg-growth .system-col[data-cat="optimize"] .cc-feature:hover { border-color: rgba(70, 214, 138, 0.4); }

/* =====================================================================
   Pricing highlights (Greg): Growth = blue "Most popular"; Complete = red
   "Maximum Effect". Starter stays neutral. Overrides the earlier red featured.
   ===================================================================== */
/* Growth -> blue */
body.mg-growth .pricing-card.featured {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.12), rgba(10, 14, 30, 0.62) 45%) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 42px 135px rgba(37, 99, 235, 0.26) !important;
}
body.mg-growth .pricing-card.featured:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 46px 145px rgba(37, 99, 235, 0.3) !important; }
body.mg-growth .pricing-card.featured .pricing-tag { background: linear-gradient(135deg, #2563eb, #60a5fa); box-shadow: 0 6px 18px rgba(37, 99, 235, 0.4); }
body.mg-growth .pricing-card.featured .btn-primary { background: linear-gradient(135deg, #2563eb, #3b82f6); box-shadow: 0 10px 30px rgba(37, 99, 235, 0.35); }

/* Complete -> red "Maximum Effect" (highlighted, but Growth stays the dominant size) */
body.mg-growth .pricing-card.pricing-card-max {
    background: linear-gradient(180deg, rgba(239, 29, 29, 0.10), rgba(10, 14, 30, 0.62) 45%) !important;
    border-color: rgba(239, 29, 29, 0.45) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 40px 130px rgba(239, 29, 29, 0.22) !important;
    z-index: 1;
}
body.mg-growth .pricing-card.pricing-card-max:hover { transform: translateY(-4px); border-color: rgba(239, 29, 29, 0.6) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 44px 140px rgba(239, 29, 29, 0.28) !important; }
body.mg-growth .pricing-card-max .pricing-anchor { padding-top: 1.5rem; }
.pricing-tag-max {
    position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%);
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #fff;
    background: linear-gradient(135deg, var(--color-accent), #ff5a5a);
    padding: 0.3rem 0.85rem; border-radius: 100px; white-space: nowrap; box-shadow: 0 6px 18px rgba(239, 29, 29, 0.4);
}

/* =====================================================================
   Morton Growth — premium pass 9: more confident scale + a featured-center
   portfolio showcase + a heavier custom-website mockup. Background untouched.
   (Service-lane connectors intentionally NOT re-added — Greg found them
   confusing; lane identity is the blue/green/red colour coding.)
   ===================================================================== */

/* (1) wider showcase container + a touch bigger headings */
body.mg-growth #showcase .section-container { width: min(1320px, calc(100vw - 48px)); }
body.mg-growth .section-title { font-size: clamp(2.4rem, 4.6vw, 3.85rem); }

/* (2) showcase = portfolio wall: the centre "wow" card is wider AND taller */
body.mg-growth .showcase-grid { grid-template-columns: 0.96fr 1.18fr 0.96fr; align-items: center; gap: 2rem; }
body.mg-growth .showcase-card.featured .sc-body { height: 444px; min-height: 444px; }
body.mg-growth .showcase-card.featured .sc-label strong { font-size: 1.26rem; }

/* (3) custom-website section: give the browser mockup more weight + size */
body.mg-growth .cap-layout { grid-template-columns: 0.82fr 1.18fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
body.mg-growth .mock-browser { box-shadow: 0 36px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
body.mg-growth .mock-body { padding: 1.5rem 1.6rem 1.7rem; gap: 1.15rem; }

/* (5) proof = a larger case study */
body.mg-growth .case-study { grid-template-columns: 400px 1fr; gap: 2.5rem; }
body.mg-growth .cs-metric { min-height: 142px; padding: 1.9rem 2.1rem; }
body.mg-growth .cs-card { padding: 2.75rem 3rem; }

/* (6) mid CTA = a real moment */
body.mg-growth .mg-cta { max-width: 940px; padding: clamp(3.25rem, 6vw, 4.5rem) clamp(2.25rem, 5vw, 4.5rem); }

/* (7) Growth pricing card a touch more dominant (stays blue from last round) */
body.mg-growth .pricing-card { padding: 2.85rem 2.4rem; }
body.mg-growth .pricing-card.featured { transform: scale(1.065); }
body.mg-growth .pricing-card.featured:hover { transform: scale(1.065) translateY(-4px); }

@media (max-width: 900px) {
    body.mg-growth #showcase .section-container { width: min(100%, calc(100vw - 36px)); }
    body.mg-growth .showcase-grid { grid-template-columns: 1fr; align-items: stretch; }
    body.mg-growth .cap-layout { grid-template-columns: 1fr; }
    body.mg-growth .case-study { grid-template-columns: 1fr; }
    body.mg-growth .pricing-card.featured { transform: none; }
    body.mg-growth .pricing-card.featured:hover { transform: translateY(-4px); }
}

/* =====================================================================
   Chapter dividers (Greg): premium "light seam" between MAJOR chapters only
   (after hero, before guarantee, before pricing) — never between every
   section, which would bring back the stacked-block feel. Thin, centered,
   edge-faded, low-opacity light — atmosphere, not a border.
   ===================================================================== */
.section-divider-glow {
    position: relative; width: min(1180px, calc(100vw - 48px)); height: 1px; margin: 1.5rem auto;
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.18), transparent);
}
.section-divider-glow::before {
    content: ''; position: absolute; left: 15%; right: 15%; top: -18px; height: 36px; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(96, 165, 250, 0.11), rgba(239, 29, 29, 0.05), transparent 72%);
}

/* Greg: drop the sequential badge flashing in "How it works" — badges stay
   static (still colour-coded), no pulse/glow animation. */
body.mg-growth .step-num { animation: none !important; }

/* =====================================================================
   Pass 10 (Greg): remove green/teal from the Optimize lane — red/blue only.
   Green is reserved for tiny success indicators ("New lead"), not core
   section styling. Optimize reverts to blue (with a blue->red header accent).
   ===================================================================== */
body.mg-growth .system-col[data-cat="optimize"] .system-head { color: #b9c9e8; }
body.mg-growth .system-col[data-cat="optimize"] .system-head::before { background: linear-gradient(90deg, var(--color-support), var(--color-accent)); box-shadow: none; }
body.mg-growth .system-col[data-cat="optimize"] .cc-feature { border-left-color: var(--color-support); }
body.mg-growth .system-col[data-cat="optimize"] .cc-feature .feature-icon { color: var(--color-support); background: rgba(114, 164, 242, 0.12); }
body.mg-growth .system-col[data-cat="optimize"] .cc-feature:hover { border-color: rgba(96, 165, 250, 0.4); }

/* wider weight for the big selling sections */
body.mg-growth #included .section-container,
body.mg-growth #pricing .section-container { width: min(1320px, calc(100vw - 48px)); }

/* The .mg-drift parallax blobs sat partly OUTSIDE their sections (negative
   offsets) and were clipped by overflow:hidden into hard rectangular glow
   edges (Greg circled them). The content-anchored auras replace their job, so
   remove them entirely. */
body.mg-growth .mg-drift { display: none !important; }

/* Border only — keep the ORIGINAL glass interiors untouched (Greg: only fix the
   border, don't change the content). Re-enable the original mask-composite
   gradient border and just thicken it to 2px so it reads more evenly. */
body.mg-growth .mg-cta::before,
body.mg-growth .contact-panel::before,
body.mg-growth .trust-panel::before { padding: 2px !important; }

/* =====================================================================
   Showcase mockups v2 (Greg): each preview reads as a believable premium
   website for its conversion goal. Local = quote/call lead-gen; Professional
   = trust/consultation; Booking = select/book/pay. Text stays abstract.
   ===================================================================== */
/* shared nav */
.sc-nav2 { display: flex; align-items: center; gap: 8px; }
.sc-navlinks { display: flex; gap: 7px; flex: 1; }
.sc-navlinks i { width: 20px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.13); }
.sc-brand-blue { background: linear-gradient(135deg, var(--color-support), #9cc2ff) !important; }
.sc-navpill-blue { width: 42px; height: 17px; border-radius: 6px; background: linear-gradient(135deg, var(--color-support), #9cc2ff); flex: none; }
.sc-cartbtn { width: 19px; height: 19px; border-radius: 6px; background: linear-gradient(135deg, var(--color-support), #9cc2ff); flex: none; }

/* LOCAL: hero w/ photo, trust strip, service grid, quote bar */
.sc-herorow { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; align-items: stretch; }
.sc-herocopy { display: flex; flex-direction: column; gap: 7px; justify-content: center; }
.sc-ctapair { display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.sc-cta-ghost { width: 48px; height: 23px; border-radius: 6px; border: 1px solid rgba(96, 165, 250, 0.45); background: rgba(96, 165, 250, 0.08); }
.sc-photo { border-radius: 9px; min-height: 84px; background: linear-gradient(150deg, rgba(239, 29, 29, 0.28), rgba(96, 165, 250, 0.2)); border: 1px solid rgba(255, 255, 255, 0.08); }
.sc-trustrow { display: flex; align-items: center; gap: 8px; }
.sc-tpill { height: 16px; border-radius: 999px; flex: 1; }
.sc-tpill-blue { background: rgba(96, 165, 250, 0.14); border: 1px solid rgba(96, 165, 250, 0.24); }
.sc-tpill-red { background: rgba(239, 29, 29, 0.12); border: 1px solid rgba(239, 29, 29, 0.24); }
.sc-svc3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.sc-svc3 span { height: 42px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.06); }
.sc-quotebar { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 0.55rem 0.65rem; border-radius: 9px; background: rgba(96, 165, 250, 0.06); border: 1px solid rgba(96, 165, 250, 0.16); }
.sc-pin { width: 13px; height: 13px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--color-accent); flex: none; }
.sc-quotebar .sc-line { flex: 1; }

/* PROFESSIONAL: centered hero, credentials, split testimonial + consult */
.sc-herocenter { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; padding: 0.2rem 0; }
.sc-herocenter .sc-cta { margin-top: 4px; }
.sc-creds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sc-creds span { height: 32px; border-radius: 7px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.07); }
.sc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: auto; }
.sc-tcard, .sc-ccard { display: flex; flex-direction: column; gap: 6px; padding: 0.65rem 0.7rem; border-radius: 9px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.07); }
.sc-ccard { background: rgba(96, 165, 250, 0.06); border-color: rgba(96, 165, 250, 0.18); }
.sc-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, rgba(96, 165, 250, 0.65), rgba(255, 255, 255, 0.22)); }

/* BOOKING: search/filter, product grid w/ selected states, booking panel */
.sc-searchbar { display: flex; align-items: center; gap: 7px; }
.sc-searchline { flex: 1; height: 22px; border-radius: 7px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); }
.sc-filter { width: 34px; height: 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); flex: none; }
.sc-filter-blue { background: rgba(96, 165, 250, 0.18); border-color: rgba(96, 165, 250, 0.32); }
.sc-pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.sc-pcard { position: relative; height: 52px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.07); }
.sc-pcard-selblue { border-color: rgba(96, 165, 250, 0.55); box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.4), 0 0 16px rgba(96, 165, 250, 0.18); }
.sc-pcard-selred { border-color: rgba(239, 29, 29, 0.5); box-shadow: 0 0 0 1px rgba(239, 29, 29, 0.35), 0 0 16px rgba(239, 29, 29, 0.16); }
.sc-pcard .sc-thumb { position: absolute; left: 6px; top: 6px; right: 6px; height: 24px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); }
.sc-pcard .sc-tag { position: absolute; right: 6px; bottom: 6px; width: 24px; height: 8px; border-radius: 3px; background: var(--color-accent); opacity: 0.82; }
.sc-body-book .sc-pcard:nth-child(odd) .sc-thumb { background: rgba(96, 165, 250, 0.22); }
.sc-body-book .sc-pcard:nth-child(even) .sc-thumb { background: rgba(239, 29, 29, 0.18); }
.sc-bookpanel { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding: 0.6rem 0.65rem; border-radius: 10px; background: rgba(96, 165, 250, 0.06); border: 1px solid rgba(96, 165, 250, 0.16); }
.sc-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sc-cal i { height: 12px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); }
.sc-cal i:nth-child(4) { background: linear-gradient(135deg, var(--color-support), #9cc2ff); }
.sc-ordersum { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-ordersum .sc-line { flex: 1; }

/* (4) featured centre card — intentionally premium glow */
body.mg-growth .showcase-card.featured {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 42px 140px rgba(37, 99, 235, 0.16), 0 0 90px rgba(239, 29, 29, 0.07);
}

/* (7) subtle life: the local quote CTA breathes faintly */
.sc-body-local .sc-cta-red { animation: scPulseRed 3.8s ease-in-out infinite; }
@keyframes scPulseRed { 0%, 100% { box-shadow: 0 4px 14px rgba(227, 0, 0, 0.4); } 50% { box-shadow: 0 4px 14px rgba(227, 0, 0, 0.4), 0 0 22px rgba(239, 29, 29, 0.32); } }
@media (prefers-reduced-motion: reduce) { .sc-body-local .sc-cta-red { animation: none; } }

/* Professional card: client-logos credibility strip + even distribution so the
   taller featured card fills cleanly (no empty mid-gap). */
.sc-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.sc-logos i { height: 18px; border-radius: 5px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.06); }
body.mg-growth .sc-body-pro { justify-content: space-between; }
body.mg-growth .sc-body-pro .sc-split { margin-top: 0; }

/* =====================================================================
   Showcase mockups v3 (Greg): build each preview to read like a REAL site —
   real iconography, photo-style image areas, buttons/fields/cards — not
   abstract colour blocks. Text stays abstract (no readable copy).
   ===================================================================== */
body.mg-growth .sc-body.rs { justify-content: space-between; padding: 0.85rem 0.9rem 0.95rem; }
.rs { display: flex; flex-direction: column; }
.rs svg { width: 100%; height: 100%; display: block; }
.rs-local { background: radial-gradient(120% 70% at 16% 0%, rgba(239, 29, 29, 0.06), transparent 60%); }
.rs-pro { background: radial-gradient(120% 70% at 82% 0%, rgba(59, 130, 246, 0.07), transparent 60%); }
.rs-book { background: radial-gradient(130% 70% at 50% 0%, rgba(96, 165, 250, 0.06), transparent 58%); }

/* nav (shared) */
.rs-nav { display: flex; align-items: center; gap: 8px; }
.rs-logo { width: 19px; height: 19px; color: rgba(255, 255, 255, 0.55); flex: none; }
.rs-logo-blue { color: var(--color-support); }
.rs-links { display: flex; gap: 8px; flex: 1; }
.rs-links i { width: 17px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.15); }
.rs-cbtn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 7px; flex: none; }
.rs-cbtn svg { width: 10px; height: 10px; color: #fff; flex: none; }
.rs-cbtn i { width: 24px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.9); }
.rs-cbtn-red { background: linear-gradient(135deg, var(--color-accent), #ff5a5a); box-shadow: 0 3px 10px rgba(227, 0, 0, 0.35); }
.rs-pill { width: 52px; height: 20px; border-radius: 7px; flex: none; }
.rs-pill-blue { background: linear-gradient(135deg, #2563eb, #60a5fa); box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3); }
.rs-cart { position: relative; width: 21px; height: 21px; color: rgba(255, 255, 255, 0.6); flex: none; }
.rs-cart-dot { position: absolute; top: -2px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }

/* LOCAL hero / trust / services */
.rs-hero { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; align-items: center; }
.rs-hcopy { display: flex; flex-direction: column; gap: 6px; }
.rs-h1 { height: 9px; border-radius: 4px; background: rgba(255, 255, 255, 0.8); width: 92%; }
.rs-h1.rs-sm { width: 58%; }
.rs-p { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.3); width: 100%; }
.rs-btnrow { display: flex; gap: 6px; margin-top: 4px; }
.rs-btn { height: 21px; border-radius: 6px; }
.rs-btn-red { width: 64px; background: linear-gradient(135deg, var(--color-accent), #ff5a5a); box-shadow: 0 3px 12px rgba(227, 0, 0, 0.4); }
.rs-btn-out { width: 40px; border: 1px solid rgba(96, 165, 250, 0.45); background: rgba(96, 165, 250, 0.08); }
.rs-img { border-radius: 9px; align-self: stretch; min-height: 92px; }
.rs-img-local { background: radial-gradient(circle at 72% 24%, rgba(255, 214, 170, 0.35), transparent 42%), linear-gradient(160deg, #355a7e, #1a2f48 55%, #101d30); border: 1px solid rgba(255, 255, 255, 0.08); position: relative; overflow: hidden; }
.rs-img-local::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, transparent, rgba(10, 18, 30, 0.55)); }
.rs-trust { display: flex; align-items: center; gap: 7px; }
.rs-stars { display: flex; gap: 2px; }
.rs-stars i { width: 11px; height: 11px; background: #f5b53d; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }
.rs-stars.rs-mini i { width: 8px; height: 8px; }
.rs-rate { width: 34px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.3); }
.rs-vbadge { width: 15px; height: 15px; color: rgba(96, 165, 250, 0.75); flex: none; }
.rs-vbadge:first-of-type { margin-left: auto; }
.rs-svcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.rs-svc { display: flex; flex-direction: column; gap: 7px; padding: 9px 8px 11px; border-radius: 8px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.07); }
.rs-svc-ic { width: 17px; height: 17px; color: var(--color-support); }
.rs-ic-red { color: var(--color-accent); }
.rs-svc-t { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.28); width: 78%; }

/* PRO centered hero / credentials / split */
.rs-heroc { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; padding: 0.25rem 0; }
.rs-h1.rs-lg { height: 11px; width: 72%; }
.rs-heroc .rs-h1.rs-lg.rs-sm { width: 48%; }
.rs-p.rs-pc { width: 56%; }
.rs-btn-blue { background: linear-gradient(135deg, #2563eb, #60a5fa); box-shadow: 0 3px 12px rgba(37, 99, 235, 0.4); }
.rs-btn-c { width: 72px; height: 22px; margin-top: 4px; }
.rs-creds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rs-cred { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 6px; border-radius: 8px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.07); }
.rs-cred-ic { width: 17px; height: 17px; color: var(--color-support); }
.rs-cred-n { width: 62%; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.28); }
.rs-split { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.rs-tcard, .rs-ccard { display: flex; flex-direction: column; gap: 6px; padding: 0.65rem 0.7rem; border-radius: 9px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.07); }
.rs-ccard { background: rgba(96, 165, 250, 0.06); border-color: rgba(96, 165, 250, 0.18); }
.rs-avatar { width: 24px; height: 24px; border-radius: 50%; padding: 4px; color: rgba(96, 165, 250, 0.9); background: rgba(96, 165, 250, 0.16); border: 1px solid rgba(96, 165, 250, 0.3); }
.rs-q { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.25); width: 92%; }
.rs-q.rs-sm { width: 60%; }
.rs-cc-t { height: 6px; width: 55%; border-radius: 3px; background: rgba(255, 255, 255, 0.3); }
.rs-field { height: 16px; border-radius: 5px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); }
.rs-btn-full { width: 100%; height: 18px; margin-top: 1px; }

/* BOOK search / products / checkout */
.rs-search { display: flex; align-items: center; gap: 7px; }
.rs-search-in { display: flex; align-items: center; gap: 6px; flex: 1; padding: 5px 8px; border-radius: 7px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
.rs-search-in svg { width: 12px; height: 12px; color: rgba(255, 255, 255, 0.42); flex: none; }
.rs-search-in i { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.2); flex: 1; }
.rs-chip { width: 28px; height: 19px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); flex: none; }
.rs-chip-blue { background: rgba(96, 165, 250, 0.18); border-color: rgba(96, 165, 250, 0.32); }
.rs-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.rs-prod { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); }
.rs-prod-sel { border-color: rgba(96, 165, 250, 0.5); box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.35), 0 0 14px rgba(96, 165, 250, 0.15); }
.rs-prod-img { height: 28px; border-radius: 5px; background: linear-gradient(140deg, rgba(96, 165, 250, 0.32), rgba(239, 29, 29, 0.2)); }
.rs-prod:nth-child(2) .rs-prod-img { background: linear-gradient(140deg, rgba(239, 29, 29, 0.26), rgba(96, 165, 250, 0.18)); }
.rs-prod:nth-child(3) .rs-prod-img { background: linear-gradient(140deg, rgba(96, 165, 250, 0.28), rgba(255, 255, 255, 0.12)); }
.rs-prod-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.rs-prod-t { width: 48%; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.28); }
.rs-prod-pr { width: 20px; height: 7px; border-radius: 3px; background: var(--color-accent); opacity: 0.85; }
.rs-checkout { display: flex; flex-direction: column; gap: 8px; padding: 0.6rem 0.65rem; border-radius: 10px; background: rgba(96, 165, 250, 0.06); border: 1px solid rgba(96, 165, 250, 0.16); }
.rs-cal { display: flex; align-items: center; gap: 8px; }
.rs-cal-icon { width: 16px; height: 16px; color: rgba(96, 165, 250, 0.8); flex: none; }
.rs-cal-days { display: flex; gap: 5px; flex: 1; }
.rs-cal-days i { flex: 1; height: 15px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.07); }
.rs-cal-days i.on { background: linear-gradient(135deg, #2563eb, #60a5fa); border-color: transparent; }
.rs-order { display: flex; align-items: center; gap: 8px; }
.rs-order-l { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.25); }
.rs-btn-co { width: 72px; height: 19px; }

/* subtle life: local quote CTA breathes */
.rs-local .rs-btn-red { animation: scPulseRed 3.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .rs-local .rs-btn-red { animation: none; } }

/* =====================================================================
   Showcase mockups v4 (Greg): real (small) text + headers so they read like
   live premium sites; third card is BOOKING/appointments (no ecommerce/store).
   Overrides the bar-based placeholders with type.
   ===================================================================== */
/* nav text */
.rs-brand { font-size: 8.5px; font-weight: 800; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.88); white-space: nowrap; }
body.mg-growth .rs-links { display: flex; gap: 9px; flex: 1; }
.rs-links span { font-size: 7px; font-weight: 600; color: rgba(255, 255, 255, 0.5); white-space: nowrap; }
.rs-cbtn { font-size: 7.5px; font-weight: 700; color: #fff; }
.rs-cbtn svg { width: 9px; height: 9px; }

/* headings + body text (override the bar styles) */
.rs-h1 { height: auto !important; background: none !important; width: auto !important; font-size: 12.5px; font-weight: 800; line-height: 1.18; letter-spacing: -0.015em; color: rgba(255, 255, 255, 0.92); margin: 0; }
.rs-h1.rs-lg { font-size: 13.5px; }
.rs-p { height: auto !important; background: none !important; width: auto !important; font-size: 8px; line-height: 1.45; color: rgba(255, 255, 255, 0.52); margin: 0; }
.rs-p.rs-pc { max-width: 78%; }

/* buttons: auto width, real labels */
.rs-btn { width: auto !important; height: auto !important; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 10px; border-radius: 7px; font-size: 7.5px; font-weight: 700; color: #fff; white-space: nowrap; line-height: 1; }
.rs-btn-out { color: rgba(150, 185, 245, 0.95); }
.rs-btn-c { align-self: center; }
.rs-btn-full { width: 100% !important; }

/* trust row */
.rs-rate { height: auto !important; background: none !important; width: auto !important; font-size: 7.5px; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.rs-tag2 { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 3px 7px; border-radius: 999px; font-size: 7px; font-weight: 600; color: rgba(150, 185, 245, 0.95); background: rgba(96, 165, 250, 0.1); border: 1px solid rgba(96, 165, 250, 0.2); white-space: nowrap; }
.rs-tag2 svg { width: 9px; height: 9px; flex: none; }

/* service cards: icon + label text */
.rs-svc { align-items: flex-start; }
.rs-svc-t { height: auto !important; background: none !important; width: auto !important; font-size: 7.5px; font-weight: 600; color: rgba(255, 255, 255, 0.72); line-height: 1.2; }

/* credentials text */
.rs-cred-n { height: auto !important; background: none !important; width: auto !important; font-size: 7px; font-weight: 600; color: rgba(255, 255, 255, 0.7); white-space: nowrap; }

/* testimonial + consult text */
.rs-quote { font-size: 7.5px; font-style: italic; line-height: 1.4; color: rgba(255, 255, 255, 0.62); margin: 0; }
.rs-cc-t { height: auto !important; background: none !important; width: auto !important; font-size: 8px; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.rs-field { height: auto !important; display: flex; align-items: center; padding: 5px 7px; font-size: 7px; color: rgba(255, 255, 255, 0.4); }

/* BOOKING (appointments) */
.rs-bookhero { display: flex; flex-direction: column; gap: 4px; }
.rs-svclist { display: flex; flex-direction: column; gap: 6px; }
.rs-svcrow { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); }
.rs-svcrow-sel { border-color: rgba(96, 165, 250, 0.5); background: rgba(96, 165, 250, 0.08); box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.3); }
.rs-row-n { flex: 1; font-size: 8px; font-weight: 600; color: rgba(255, 255, 255, 0.82); white-space: nowrap; }
.rs-row-m { font-size: 7px; color: rgba(255, 255, 255, 0.45); white-space: nowrap; }
.rs-row-p { font-size: 8px; font-weight: 700; color: rgba(150, 185, 245, 0.95); white-space: nowrap; }
.rs-booking { display: flex; flex-direction: column; gap: 8px; }
.rs-slots { display: flex; gap: 6px; }
.rs-slot { flex: 1; text-align: center; padding: 5px 0; border-radius: 6px; font-size: 7.5px; font-weight: 600; color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
.rs-slot-on { color: #fff; background: linear-gradient(135deg, #2563eb, #60a5fa); border-color: transparent; }

/* nav pills now carry text — auto width so labels don't wrap */
.rs-pill { width: auto !important; height: auto !important; display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 7px; font-size: 7.5px; font-weight: 700; color: #fff; white-space: nowrap; flex: none; }

/* =====================================================================
   Morton Growth — premium pass 11 (Greg): more scale + substance.
   Background untouched. (Service-lane connectors intentionally NOT re-added;
   booking caption kept — no ecommerce.)
   ===================================================================== */
/* (1) wider containers, bigger headings + section padding */
body.mg-growth .section-container { width: min(1220px, calc(100vw - 48px)); }
body.mg-growth #showcase .section-container,
body.mg-growth #included .section-container,
body.mg-growth #pricing .section-container { width: min(1360px, calc(100vw - 48px)); }
body.mg-growth .section-title { font-size: clamp(2.5rem, 4.8vw, 4rem); }
body.mg-growth .growth-section { padding: clamp(7rem, 11vw, 10rem) 0; }

/* (2) proof = a larger case study; "After" stays the winner */
body.mg-growth .case-study { grid-template-columns: 420px 1fr; gap: 2.75rem; max-width: 1180px; }
body.mg-growth .cs-metric { min-height: 150px; padding: 2rem 2.2rem; }
body.mg-growth .cs-card { padding: 2.9rem 3.2rem; }
body.mg-growth .cs-chart { height: 150px; }

/* (3) custom-website mockup bigger / more weight */
body.mg-growth .cap-layout { grid-template-columns: 0.82fr 1.18fr; gap: clamp(2.5rem, 5.5vw, 5.5rem); }
body.mg-growth .mock-body { padding: 1.7rem 1.8rem 1.9rem; gap: 1.25rem; }
body.mg-growth .mock-tile { height: 76px; }

/* (4) showcase: wider cards, more dominant featured centre */
body.mg-growth .showcase-grid { grid-template-columns: 0.95fr 1.14fr 0.95fr; gap: 2.25rem; }
body.mg-growth .showcase-card { padding: 24px; border-radius: 32px; }
body.mg-growth .sc-body { height: 430px; min-height: 430px; }
body.mg-growth .showcase-card.featured .sc-body { height: 492px; min-height: 492px; }
body.mg-growth .showcase-card.featured { transform: translateY(-22px) scale(1.03); }
body.mg-growth .showcase-card.featured:hover { transform: translateY(-26px) scale(1.03); }

/* (6) guarantee certificate larger */
body.mg-growth .guarantee-box { max-width: 820px; padding: clamp(2.75rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4.5rem); }

/* (7) mid CTA more cinematic */
body.mg-growth .mg-cta { max-width: 960px; padding: clamp(3.5rem, 6vw, 4.75rem) clamp(2.5rem, 5vw, 4.75rem); }
body.mg-growth .mg-cta-title { font-size: clamp(2rem, 4.2vw, 3.2rem); }

/* (8) pricing: Growth the clear default */
body.mg-growth .pricing-card { padding: 3rem 2.6rem; border-radius: 26px; }
body.mg-growth .pricing-card.featured { transform: scale(1.075); }
body.mg-growth .pricing-card.featured:hover { transform: scale(1.075) translateY(-4px); }

@media (max-width: 900px) {
    body.mg-growth #showcase .section-container,
    body.mg-growth #included .section-container,
    body.mg-growth #pricing .section-container,
    body.mg-growth .section-container { width: min(100%, calc(100vw - 36px)); }
    body.mg-growth .case-study { grid-template-columns: 1fr; max-width: 560px; }
    body.mg-growth .cap-layout { grid-template-columns: 1fr; }
    body.mg-growth .showcase-grid { grid-template-columns: 1fr; }
    body.mg-growth .showcase-card.featured { transform: none; }
    body.mg-growth .showcase-card.featured:hover { transform: translateY(-8px); }
    body.mg-growth .pricing-card.featured { transform: none; }
    body.mg-growth .pricing-card.featured:hover { transform: translateY(-4px); }
}

/* =====================================================================
   Showcase/capabilities image treatment + capabilities mockup as a real,
   larger premium business site (Greg: no empty gray boxes; fill the space).
   ===================================================================== */
/* believable hero "photo": warm sunlit gradient + skyline silhouette + a
   floating customer-review chip (replaces the flat gray/blue box) */
.rs-img { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); }
.rs-img-local, .rs-img-cap {
    background:
        radial-gradient(circle at 70% 22%, rgba(255, 198, 150, 0.42), transparent 46%),
        linear-gradient(155deg, #3a5c80 0%, #213c5b 48%, #112236 100%) !important;
}
.rs-img-sky { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 60%; }
.rs-img-sky path { fill: rgba(8, 13, 24, 0.6); }
.rs-img-local::after, .rs-img-cap::after { content: ''; position: absolute; inset: 0; background: none !important; box-shadow: inset 0 -26px 34px rgba(8, 13, 24, 0.55); pointer-events: none; }
.rs-img-chip { position: absolute; left: 8px; bottom: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 8px; background: rgba(8, 12, 22, 0.82); border: 1px solid rgba(255, 255, 255, 0.14); }
.rs-img-av { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, #f5b53d, #ff5a5a); flex: none; }
.rs-img-stars { display: flex; gap: 2px; }
.rs-img-stars i { width: 6px; height: 6px; background: #f5b53d; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }

/* red nav pill */
.rs-pill-red { background: linear-gradient(135deg, var(--color-accent), #ff5a5a); box-shadow: 0 3px 10px rgba(227, 0, 0, 0.35); }

/* (Greg) make the "A custom website" mockup bigger + scale its content up */
body.mg-growth .cap-layout { grid-template-columns: 0.78fr 1.22fr; }
body.mg-growth .mock-body.rs-cap { padding: 1.3rem 1.4rem 1.45rem; gap: 1rem; }
.rs-cap .rs-brand { font-size: 11px; }
.rs-cap .rs-links span { font-size: 9px; }
.rs-cap .rs-logo { width: 23px; height: 23px; }
.rs-cap .rs-pill { font-size: 9.5px; padding: 7px 12px; }
.rs-cap .rs-h1 { font-size: 18px; }
.rs-cap .rs-p { font-size: 10.5px; }
.rs-cap .rs-btn { font-size: 9.5px; padding: 9px 14px; }
.rs-cap .rs-img { min-height: 132px; border-radius: 12px; }
.rs-cap .rs-svc { padding: 13px 12px 15px; }
.rs-cap .rs-svc-ic { width: 22px; height: 22px; }
.rs-cap .rs-svc-t { font-size: 10px; }
.rs-cap .rs-stars i { width: 14px; height: 14px; }
.rs-cap .rs-rate { font-size: 10px; }
.rs-cap .rs-img-av { width: 17px; height: 17px; }
.rs-cap .rs-img-stars i { width: 8px; height: 8px; }
.rs-cap .rs-cc-t { font-size: 11px; }
.rs-cap .rs-field { font-size: 9.5px; padding: 9px 11px; }
.rs-capform { display: flex; flex-direction: column; gap: 9px; padding: 14px; border-radius: 12px; background: rgba(96, 165, 250, 0.06); border: 1px solid rgba(96, 165, 250, 0.16); }
.rs-fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

/* =====================================================================
   Morton Growth — premium pass 12 (Greg): one more scale increment.
   Background untouched; service-lane connectors still omitted (removed earlier).
   ===================================================================== */
body.mg-growth #showcase .section-container,
body.mg-growth #included .section-container,
body.mg-growth #pricing .section-container,
body.mg-growth #growth-contact .section-container { width: min(1380px, calc(100vw - 48px)); }
body.mg-growth .section-title { font-size: clamp(2.6rem, 5vw, 4.25rem); }
body.mg-growth .growth-section { padding: clamp(7rem, 10vw, 10.25rem) 0; }

/* showcase a bit larger; centre clearly dominant (heights kept sane so the
   realistic mockups stay full, not empty) */
body.mg-growth .showcase-grid { grid-template-columns: 0.95fr 1.12fr 0.95fr; gap: 2.4rem; }
body.mg-growth .sc-body { height: 452px; min-height: 452px; }
body.mg-growth .showcase-card.featured .sc-body { height: 516px; min-height: 516px; }
body.mg-growth .showcase-card { padding: 26px; border-radius: 34px; }
body.mg-growth .showcase-card.featured { transform: translateY(-24px) scale(1.04); }
body.mg-growth .showcase-card.featured:hover { transform: translateY(-28px) scale(1.04); }

/* contact = larger closing panel */
body.mg-growth .contact-panel { max-width: 1040px; padding: clamp(2.5rem, 4vw, 3.5rem); border-radius: 30px; }

/* pricing: Growth clearly the default */
body.mg-growth .pricing-card { border-radius: 30px; }
body.mg-growth .pricing-card.featured { transform: scale(1.08); }
body.mg-growth .pricing-card.featured:hover { transform: scale(1.08) translateY(-4px); }

@media (max-width: 900px) {
    body.mg-growth #growth-contact .section-container { width: min(100%, calc(100vw - 36px)); }
    body.mg-growth .showcase-card.featured { transform: none; }
    body.mg-growth .showcase-card.featured:hover { transform: translateY(-8px); }
    body.mg-growth .pricing-card.featured { transform: none; }
    body.mg-growth .pricing-card.featured:hover { transform: translateY(-4px); }
}

/* =====================================================================
   Premium pass 13 (Greg: take the showcase farther than last round). Extra
   content module per mockup so taller cards stay FULL, + a slight content
   scale-up so the previews read bigger. (Cumulative on pass 12.)
   ===================================================================== */
body.mg-growth .sc-body { height: 492px; min-height: 492px; }
body.mg-growth .showcase-card.featured .sc-body { height: 560px; min-height: 560px; }
body.mg-growth .showcase-card.featured { transform: translateY(-26px) scale(1.04); }
body.mg-growth .showcase-card.featured:hover { transform: translateY(-30px) scale(1.04); }

/* extra fill modules */
.rs-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border-radius: 9px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); }
.rs-foot-t { font-size: 7.5px; color: rgba(255, 255, 255, 0.5); line-height: 1.3; }
.rs-logos2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rs-logos2 i { height: 20px; border-radius: 5px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.06); }
.rs-confirm { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border-radius: 8px; background: rgba(70, 214, 138, 0.08); border: 1px solid rgba(70, 214, 138, 0.22); }
.rs-confirm svg { width: 12px; height: 12px; color: #46d68a; flex: none; }
.rs-confirm span { font-size: 7.5px; font-weight: 600; color: rgba(180, 235, 205, 0.92); }

/* slightly larger preview content so bigger cards read bigger (not empty) */
.showcase-card .rs-h1 { font-size: 13.5px; }
.showcase-card .rs-h1.rs-lg { font-size: 14.5px; }
.showcase-card .rs-p { font-size: 8.5px; }
.showcase-card .rs-brand { font-size: 9px; }
.showcase-card .rs-svc { padding: 11px 9px 13px; }
.showcase-card .rs-svc-ic { width: 19px; height: 19px; }
.showcase-card .rs-cred { padding: 12px 6px; }
.showcase-card .rs-svcrow { padding: 9px 10px; }
.showcase-card .rs-img { min-height: 100px; }

/* =====================================================================
   AUTHORITATIVE mobile collapse (must stay LAST). Later non-media grid rules
   from the scale passes were overriding the earlier mobile collapses, leaving
   2-/3-column grids on phones (the custom-website mockup overflowed off-screen).
   This forces every growth grid to a single column on small screens.
   ===================================================================== */
@media (max-width: 900px) {
    body.mg-growth .cap-layout,
    body.mg-growth .case-study,
    body.mg-growth .showcase-grid,
    body.mg-growth .system,
    body.mg-growth .faq-layout,
    body.mg-growth .contact-panel,
    body.mg-growth .pricing-grid { grid-template-columns: 1fr !important; }
    body.mg-growth .showcase-card.featured { transform: none !important; }
    body.mg-growth .showcase-card.featured:hover { transform: translateY(-8px) !important; }
    body.mg-growth .pricing-card.featured { transform: none !important; }
    body.mg-growth .pricing-card.featured:hover { transform: translateY(-4px) !important; }
}
/* keep the (desktop-scaled) custom-website mockup content sane on phones */
@media (max-width: 600px) {
    body.mg-growth .rs-cap .rs-h1 { font-size: 13px; }
    body.mg-growth .rs-cap .rs-p { font-size: 8.5px; }
    body.mg-growth .rs-cap .rs-brand { font-size: 9px; }
    body.mg-growth .rs-cap .rs-btn { font-size: 8px; padding: 7px 10px; }
    body.mg-growth .rs-cap .rs-pill { font-size: 8px; padding: 5px 9px; }
}

/* The custom-website mockup is scaled up for desktop; on phones that overflowed
   the mockup (nav + "Get a Quote" clipped). Reset its content to small sizes so
   it fits the full-width mobile mockup. */
@media (max-width: 600px) {
    body.mg-growth .mock-body.rs-cap { padding: 0.95rem 0.95rem 1.05rem; gap: 0.7rem; }
    body.mg-growth .rs-cap .rs-nav { gap: 6px; }
    body.mg-growth .rs-cap .rs-brand { font-size: 8.5px; }
    body.mg-growth .rs-cap .rs-links { gap: 7px; }
    body.mg-growth .rs-cap .rs-links span { font-size: 7px; }
    body.mg-growth .rs-cap .rs-logo { width: 18px; height: 18px; }
    body.mg-growth .rs-cap .rs-pill { font-size: 7.5px; padding: 5px 9px; }
    body.mg-growth .rs-cap .rs-h1 { font-size: 13px; }
    body.mg-growth .rs-cap .rs-p { font-size: 8px; }
    body.mg-growth .rs-cap .rs-btn { font-size: 7.5px; padding: 6px 10px; }
    body.mg-growth .rs-cap .rs-svc { padding: 9px 8px 11px; }
    body.mg-growth .rs-cap .rs-svc-ic { width: 17px; height: 17px; }
    body.mg-growth .rs-cap .rs-svc-t { font-size: 7.5px; }
    body.mg-growth .rs-cap .rs-stars i { width: 11px; height: 11px; }
    body.mg-growth .rs-cap .rs-rate { font-size: 7.5px; }
    body.mg-growth .rs-cap .rs-cc-t { font-size: 8.5px; }
    body.mg-growth .rs-cap .rs-field { font-size: 7.5px; padding: 7px 9px; }
    body.mg-growth .rs-cap .rs-img { min-height: 96px; }
}

/* the floating "New lead" pill has no clean spot over the full-width mobile
   mockup (it covered the Send Request button) — desktop-only flourish */
@media (max-width: 600px) { body.mg-growth .cap-visual .mock-lead { display: none; } }

/* =====================================================================
   Home page — co-equal product family (v41)
   Presents Morton Command Center (MSPs) and Morton Growth (local business)
   as peers. Ports the Growth page's premium accents — kicker pills, a hero
   product chooser, confident scale — onto the home page's existing ambient
   environment (no separate mg-growth aurora needed; the home already has one).
   ===================================================================== */

/* Kicker pills — the base .section-kicker is plain uppercase text; on the home
   page each section leads with the Growth-style labeled chip instead. */
.kicker-pill {
    display: inline-flex; align-items: center; gap: 0.5rem;
    margin-bottom: 1.1rem;
    padding: 0.42rem 0.95rem; border-radius: 100px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.72rem; letter-spacing: 0.14em;
}
.kicker-pill::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none;
    background: var(--color-support); box-shadow: 0 0 8px rgba(114, 164, 242, 0.7);
}
.kicker-pill.kicker-red { color: var(--color-accent); }
.kicker-pill.kicker-red::before { background: var(--color-accent); box-shadow: 0 0 8px rgba(227, 0, 0, 0.7); }

/* Hero eyebrow chip (above the company subtitle) */
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    margin: 0 auto 1.25rem;
    padding: 0.42rem 0.95rem; border-radius: 100px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1);
    font-family: var(--font-heading);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--color-text-muted);
    animation: heroRise 0.7s 0.45s ease-out both;
}

/* Hero product chooser — two co-equal product cards */
.hero-products {
    display: flex; gap: 1.1rem; flex-wrap: wrap;
    justify-content: center; align-items: stretch;
    max-width: 780px; margin: 2.5rem auto 0;
    animation: heroRise 0.7s 0.85s ease-out both;
}
.hero-product {
    flex: 1 1 300px; max-width: 370px;
    display: flex; flex-direction: column; gap: 0.5rem;
    text-align: left;
    padding: 1.55rem 1.6rem;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--color-border);
    border-top: 2px solid var(--color-support);
    border-radius: var(--radius);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.hero-product-growth { border-top-color: var(--color-accent); }
.hero-product:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(114, 164, 242, 0.45);
    box-shadow: 0 18px 50px rgba(114, 164, 242, 0.16);
}
.hero-product-growth:hover {
    border-color: rgba(227, 0, 0, 0.45);
    box-shadow: 0 18px 50px rgba(227, 0, 0, 0.16);
}
.hero-product-tag {
    font-family: var(--font-heading);
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--color-support);
}
.hero-product-growth .hero-product-tag { color: var(--color-accent); }
.hero-product-name {
    font-family: var(--font-heading);
    font-size: 1.18rem; font-weight: 700; color: var(--color-text);
    letter-spacing: -0.01em;
}
.hero-product-desc {
    font-size: 0.9rem; line-height: 1.55; color: var(--color-text-muted);
    flex: 1;
}
.hero-product-cta {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.86rem; font-weight: 600; color: var(--color-text);
    margin-top: 0.4rem;
}
.hero-product-cc .hero-product-cta { color: var(--color-support); }
.hero-product-growth .hero-product-cta { color: var(--color-accent); }
.hero-product-cta svg { width: 15px; height: 15px; transition: transform 0.2s ease; }
.hero-product:hover .hero-product-cta svg { transform: translateX(4px); }

/* Morton Growth product section — mirror of the Command section, red-dominant.
   The section reuses .command-section (padding + border-top divider + ambient
   ::before via the v4 block), so we only override the glow + accent here. */
.command-section.growth-product::before {
    background:
        radial-gradient(62% 60% at 10% -8%, rgba(227, 0, 0, 0.13), transparent 70%),
        radial-gradient(58% 55% at 98% 108%, rgba(114, 164, 242, 0.08), transparent 72%);
}
.cc-card-growth .cc-card-inner {
    background:
        radial-gradient(ellipse 60% 80% at 100% 0%, rgba(227, 0, 0, 0.10), transparent 60%),
        radial-gradient(ellipse 60% 80% at 0% 100%, rgba(114, 164, 242, 0.08), transparent 60%);
}
.cc-card-growth:hover {
    border-color: rgba(227, 0, 0, 0.45);
    box-shadow: 0 8px 48px rgba(227, 0, 0, 0.15), 0 0 0 1px rgba(227, 0, 0, 0.12);
}
.cc-card-growth::after {
    background: radial-gradient(240px circle at var(--x, 50%) var(--y, 50%), rgba(255, 150, 150, 0.16), transparent 62%);
}
.cc-card-growth .cc-card-lede a,
.cc-card-growth .cc-pricing-note a { color: var(--color-accent); }
.cc-card-growth .cc-card-lede a:hover,
.cc-card-growth .cc-pricing-note a:hover { color: var(--color-accent-hover); }
/* Growth card: lead each feature with a red left-accent (Command leads blue) */
.cc-card-growth .cc-feature { border-left-color: var(--color-accent); }
.cc-card-growth .cc-feature:nth-child(even) { border-left-color: var(--color-support); }
.cc-card-growth .cc-feature .feature-icon { color: var(--color-accent); background: rgba(227, 0, 0, 0.12); }
.cc-card-growth .cc-feature:nth-child(even) .feature-icon { color: var(--color-support); background: rgba(114, 164, 242, 0.12); }
.cc-card-growth .cc-neutral-note { border-left-color: var(--color-accent); }

/* Mobile: stack the hero product cards full-width */
@media (max-width: 768px) {
    .hero-products { flex-direction: column; align-items: stretch; max-width: 420px; }
    .hero-product { max-width: none; }
}