:root {
    --c-terracotta: #CB734B;
    --c-ink: #2E2A27;
    --ff-sans: 'Beltram Test', sans-serif;
    --ff-mono: 'PP Right Serif Mono', serif;
    --ff-dm: 'DM Sans', sans-serif;
    --ff-serif: 'EB Garamond', Georgia, serif;
}

    .font-garamond { font-family: 'EB Garamond', Georgia, 'Times New Roman', serif; }
    .font-pp-mono { font-family: 'PP Right Serif Mono', 'Times New Roman', Georgia, serif; }
    .font-jost { font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif; }

    .home-eyebrow {
        color: var(--c-terracotta);
        font-family: var(--ff-mono);
        font-size: 18px;
        font-weight: 400;
        line-height: 18.571px;
        letter-spacing: 0.325px;
    }

    .home-hero-title {
        color: var(--c-ink);
        font-family: var(--ff-sans);
        font-size: 40px;
        font-weight: 400;
        line-height: 1;
    }

    .home-hero-title-italic {
        color: var(--c-terracotta);
        font-family: var(--ff-serif);
        font-size: 50px;
        font-style: italic;
        font-weight: 500;
        line-height: 1;
    }

    .home-body {
        color: rgba(26, 20, 16, 0.55);
        font-family: var(--ff-sans);
        font-size: 15px;
        font-weight: 400;
        line-height: 22px;
    }

    .ai-card {
        width: 290px;
        height: 67px;
        border: 1px solid #F2EAD8;
        border-radius: 0;
        background: #FFF;
        padding: 12px 18px;
        font-family: inherit;
        text-align: left;
    }
    .ai-icon-circle {
        width: 40px;
        height: 40px;
        border-radius: 9999px;
        border: 1px solid rgba(201, 169, 122, 0.30);
        background: rgba(201, 169, 122, 0.12);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .ai-title {
        color: #7A6B50;
        font-family: var(--ff-sans);
        font-size: 15px;
        font-weight: 400;
        line-height: 19.5px;
        letter-spacing: 0.65px;
    }
    .ai-subtitle {
        color: #C9A97A;
        font-family: 'Jost', sans-serif;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        letter-spacing: 0.96px;
        margin-top: 8px;
    }

    .btn-intake {
        width: 208px;
        background: var(--c-ink);
        color: #FFF;
        font-family: var(--ff-sans);
        font-size: 13px;
        font-weight: 400;
        letter-spacing: 0.2px;
        border-radius: 9999px;
        padding: 8px 0;
        display: inline-block;
        text-align: center;
        transition: opacity 0.15s ease;
    }
    .btn-intake:hover { opacity: 0.9; }

    .btn-sample {
        width: 208px;
        color: #B8754D;
        font-family: var(--ff-sans);
        font-size: 13px;
        font-weight: 400;
        letter-spacing: 0.2px;
        border-radius: 32px;
        border: 1px solid #C4A87A;
        background: #F2EAD8;
        padding: 8px 0;
        display: inline-block;
        text-align: center;
        transition: opacity 0.15s ease;
    }
    .btn-sample:hover { opacity: 0.9; }

    .hero-wrap {
        position: relative;
        width: 100%;
        overflow: hidden;
        aspect-ratio: 83 / 42;
    }
    .hero-wrap img.hero-photo {
        width: 140%;
        max-width: none;
        height: 100%;
        object-fit: cover;
        object-position: 0 30%;
        display: block;
    }
    .hero-overlay {
        position: absolute;
        top: 28px;
        left: 0;
        right: 24px;
    }
    .hero-overlay .home-hero-title {
        padding-left: 2px;
    }
    .guided-row {
        display: flex;
        align-items: center;
        padding-left: 0;
    }
    .hero-overlay .guided-row {
        gap: 2px;
        margin-top: 8px;
    }
    .guided-line {
        height: 1px;
        background: #7A6B50;
    }
    .hero-overlay .guided-line {
        flex: 1 1 auto;
        max-width: 112px;
    }

    .home-header {
        height: 64px;
        padding-left: 20px;
        padding-right: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #9B8F7D;
        background: #FFF;
    }
    .home-header img.logo {
        height: 24px;
        width: auto;
    }
    .home-header .menu-btn {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--c-ink);
    }
    .home-header .nav-desktop { display: none; }
    .home-header .nav-right { display: none; }

    .home-hero-photo-desktop { display: none; }
    .home-hero-title-desktop { display: none; }

    .ai-modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(20, 14, 8, 0.70);
        z-index: 200;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 12px;
    }
    body.ai-modal-open .ai-modal-backdrop { display: flex; }
    body.ai-modal-open { overflow: hidden; }
    .ai-modal {
        position: relative;
        width: 100%;
        max-width: 100%;
        background: #FAF4EB;
        border-radius: 16px;
        padding: 24px 24px 28px 24px;
        box-shadow: 0 24px 60px rgba(80, 50, 20, 0.25);
    }
    .ai-modal-close {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 32px;
        height: 32px;
        border-radius: 9999px;
        background: rgba(201, 169, 122, 0.18);
        border: 0;
        color: #6B5E4E;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .ai-modal-head {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 18px;
    }
    .ai-modal-head .ai-icon-circle {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
    }
    .ai-modal-head h2 {
        color: #7A6B50;
        font-family: var(--ff-sans);
        font-size: 20px;
        font-weight: 400;
        line-height: 30px;
        letter-spacing: 0.24px;
        margin: 0;
    }
    .ai-modal-body {
        color: #6B5E4E;
        font-family: 'Jost', sans-serif;
        font-size: 14px;
        font-weight: 300;
        line-height: 24.5px;
        margin: 0 0 24px 0;
    }
    .ai-modal-features {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .ai-modal-feature {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }
    .ai-modal-feature .feature-icon {
        width: 56px;
        height: 56px;
        border-radius: 9999px;
        border: 1px solid rgba(201, 169, 122, 0.30);
        background: rgba(201, 169, 122, 0.12);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .ai-modal-feature .feature-label {
        color: #2C2318;
        font-family: 'Jost', sans-serif;
        font-size: 12px;
        font-weight: 500;
        line-height: 16px;
        letter-spacing: 0.48px;
        margin: 0;
    }
    .ai-modal-feature .feature-desc {
        color: #8A7D6B;
        font-family: 'Jost', sans-serif;
        font-size: 12px;
        font-weight: 300;
        line-height: 18px;
        text-align: center;
        margin: 0;
    }

    .mobile-drawer {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        max-height: 460px;
        background: #F5EDE3;
        z-index: 100;
        display: none;
        flex-direction: column;
        padding: 0 20px 24px 20px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }
    body.mobile-menu-open .mobile-drawer { display: flex; }
    .mobile-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 64px;
        margin-bottom: 0;
    }
    .mobile-drawer-head img.logo { height: 24px; }
    .mobile-drawer-head .close-btn {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #1C1208;
        background: transparent;
        border: 0;
        cursor: pointer;
    }
    .mobile-drawer-divider {
        height: 1px;
        background: rgba(28, 18, 8, 0.10);
        margin: 0 -20px 16px -20px;
    }
    .mobile-drawer-links {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-bottom: 16px;
    }
    .mobile-drawer-links a {
        color: #1C1208;
        font-family: var(--ff-sans);
        font-size: 17px;
        font-weight: 400;
        line-height: 25.5px;
        letter-spacing: 0.325px;
        text-decoration: none;
    }
    .mobile-drawer-bottom { margin-top: 4px; }
    .mobile-drawer-bottom .sign-in {
        display: block;
        color: #1C1208;
        font-family: var(--ff-dm);
        font-size: 15px;
        font-weight: 400;
        line-height: 22.5px;
        text-decoration: none;
        margin: 0 0 14px 0;
    }
    .mobile-drawer-bottom .start-strategy {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: var(--c-ink);
        color: #F2EAD8;
        text-align: center;
        font-family: var(--ff-dm);
        font-size: 15px;
        font-weight: 500;
        line-height: 22.5px;
        letter-spacing: 0.13px;
        padding: 12px 22px;
        border-radius: 9999px;
        text-decoration: none;
        width: 100%;
    }
    .mobile-drawer-bottom .start-strategy svg { flex-shrink: 0; }

    .section-inner {
        max-width: 480px;
        margin: 0 auto;
        width: 100%;
    }

    .compare-section {
        background: #CBC1ED;
        padding-top: 4px;
        padding-bottom: 0;
    }
    .compare-track {
        overflow: hidden;
        scrollbar-width: none;
    }
    .compare-track::-webkit-scrollbar { display: none; }
    .compare-track-inner {
        display: flex;
        width: max-content;
        animation: compare-scroll 60s linear infinite;
    }
    .compare-track-inner:hover { animation-play-state: paused; }
    @keyframes compare-scroll {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
    }
    .compare-card {
        flex: 0 0 auto;
        width: 360px;
        display: flex;
        gap: 16px;
        padding-right: 24px;
        height: 282px;
        align-items: stretch;
    }
    .compare-card .card-image {
        height: 282px;
        width: 105px;
        flex-shrink: 0;
        align-self: stretch;
        object-fit: cover;
        object-position: center top;
        display: block;
    }
    .compare-card .card-text {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-top: 1px solid #FFF;
        padding-top: 12px;
        padding-bottom: 24px;
        min-width: 0;
    }
    .compare-eyebrow {
        color: #000;
        font-family: var(--ff-sans);
        font-size: 13px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        margin-top: 4px;
    }
    .compare-headline {
        color: #000;
        font-family: var(--ff-sans);
        font-size: 36px;
        font-weight: 400;
        line-height: 94%;
        margin: 0;
    }

    .strategy-intro {
        background: #F5EDE3;
        padding: 56px 24px 26px 24px;
        text-align: center;
    }
    .strategy-eyebrow {
        color: var(--c-terracotta);
        font-family: var(--ff-mono);
        font-size: 20px;
        font-weight: 400;
        line-height: 18.571px;
        letter-spacing: 0.325px;
        margin: 0 0 16px 0;
    }
    .strategy-headline {
        color: var(--c-ink);
        font-family: var(--ff-sans);
        font-size: 20px;
        font-weight: 400;
        line-height: 25px;
        margin: 0 0 18px 0;
    }
    .strategy-body {
        color: rgba(26, 20, 16, 0.55);
        font-family: var(--ff-sans);
        font-size: 15px;
        font-weight: 400;
        line-height: 22px;
        margin: 0;
    }

    .chapter-section {
        background: #F5EDE3;
        padding: 0 0 60px 0;
    }
    .chapter-track {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 24px;
    }
    .chapter-track::-webkit-scrollbar { display: none; }
    .chapter-card {
        flex: 0 0 328px;
        width: 328px;
        height: 480px;
        scroll-snap-align: start;
        border-radius: 16px;
        background: #FCF5F2;
        box-shadow: 0 2px 18px 0 rgba(120, 80, 40, 0.07);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .chapter-image {
        width: 100%;
        height: 215px;
        object-fit: cover;
        display: block;
        flex-shrink: 0;
    }
    .chapter-body {
        padding: 22px 24px 22px 24px;
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }
    .chapter-eyebrow {
        color: var(--c-terracotta);
        font-family: var(--ff-mono);
        font-size: 12px;
        font-weight: 400;
        line-height: 15px;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin: 0;
    }
    .chapter-number {
        color: #C4A48A;
        font-family: var(--ff-mono);
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 1.68px;
        margin: 2px 0 0 0;
    }
    .chapter-title {
        color: #5C5449;
        font-family: var(--ff-sans);
        font-size: 22.4px;
        font-weight: 400;
        line-height: 28.672px;
        margin: 18px 0 0 0;
    }
    .chapter-desc {
        color: #7A6A60;
        font-family: var(--ff-sans);
        font-size: 13.12px;
        font-weight: 400;
        line-height: 20.3px;
        margin: 12px 0 0 0;
    }
    .chapter-tag {
        margin-top: auto;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .chapter-tag-dot {
        width: 7px;
        height: 7px;
        border-radius: 9999px;
        background: var(--c-terracotta);
        flex-shrink: 0;
    }
    .chapter-tag-label {
        color: var(--c-terracotta);
        font-family: var(--ff-sans);
        font-size: 12px;
        font-weight: 400;
        line-height: 15px;
        letter-spacing: 1.6px;
        text-transform: uppercase;
    }

    .editorial-section {
        background: #3F3C34;
        text-align: center;
        padding-top: 16px;
        overflow: hidden;
    }
    .editorial-image {
        width: 100%;
        max-width: 200px;
        aspect-ratio: 1 / 1;
        height: auto;
        border-radius: 9999px;
        background: #FFF;
        box-shadow: 0 6px 4px 0 rgba(0, 0, 0, 0.25);
        object-fit: cover;
        display: block;
        margin: 0 auto 40px auto;
    }
    .editorial-quote {
        color: #FFF;
        font-family: var(--ff-serif);
        font-size: 50px;
        font-style: italic;
        font-weight: 400;
        line-height: 60px;
        text-align: center;
        margin: 0 0 40px 0;
    }
    .editorial-quote .schedule { color: #CBC1ED; }
    .editorial-footer {
        color: #E8D5C4;
        font-family: var(--ff-sans);
        font-size: 15px;
        font-weight: 400;
        line-height: 25px;
        text-align: center;
        margin: 0;
    }

    /* -------------------------------------------------------------------
       Pricing section — static mock. Refining welcome.
       ------------------------------------------------------------------- */
    .pricing-section {
        background: #FFF;
        padding: 48px 24px 56px 24px;
    }
    .pricing-eyebrow {
        color: var(--c-terracotta);
        font-family: var(--ff-mono);
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin: 0 0 8px 0;
    }
    .pricing-headline {
        color: var(--c-ink);
        font-family: var(--ff-sans);
        font-size: 32px;
        font-weight: 400;
        line-height: 38px;
        margin: 0 0 12px 0;
    }
    .pricing-sub {
        color: rgba(26, 20, 16, 0.55);
        font-family: var(--ff-sans);
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        margin: 0 0 24px 0;
    }

    .pricing-selectors {
        background: #FAF6EE;
        border-radius: 16px;
        border: 1px solid rgba(30, 25, 10, 0.09);
        padding: 20px 16px;
        margin-bottom: 24px;
    }
    .pricing-selector-group + .pricing-selector-group {
        margin-top: 18px;
    }
    .pricing-selector-label {
        color: #7A6B50;
        font-family: var(--ff-mono);
        font-size: 11px;
        font-weight: 400;
        line-height: 14px;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        text-align: left;
        margin: 0 0 10px 0;
    }
    .pricing-selector-options {
        display: flex;
        justify-content: center;
        gap: 8px;
    }
    .pricing-pill {
        display: flex;
        width: 151px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        background: #FFF;
        border-radius: 14px;
        border: 1px solid rgba(30, 25, 10, 0.12);
        padding: 11px 13px;
        text-align: left;
        cursor: pointer;
        font-family: var(--ff-sans);
    }
    .pricing-pill .pill-title {
        color: var(--c-ink);
        font-size: 13px;
        font-weight: 500;
        line-height: 16px;
    }
    .pricing-pill .pill-sub {
        color: rgba(26, 20, 16, 0.5);
        font-size: 11px;
        font-weight: 400;
        line-height: 14px;
    }
    .pricing-pill.is-active {
        width: 149px;
        background: #9B8F7D;
        border: 0;
        padding: 10px 12px;
        border-radius: 14px;
    }
    .pricing-pill.is-active .pill-title { color: #FFF; }
    .pricing-pill.is-active .pill-sub { color: rgba(255, 255, 255, 0.48); }

    /* Mobile (<600px): pills flex to fill the row, capped at 200px each.
       Unselected pills center their content. Beige-box content (labels +
       pill rows) is centered horizontally. The dark feature card breaks
       out to viewport-width with its inner content kept at the same
       350px-ish max. */
    @media (max-width: 599px) {
        .pricing-pill,
        .pricing-pill.is-active {
            width: auto;
            flex: 1 1 0;
            max-width: 200px;
        }
        .pricing-pill:not(.is-active) {
            align-items: center;
            text-align: center;
        }
        .pricing-feature {
            width: 100vw;
            max-width: 100vw;
            margin-left: calc(50% - 50vw);
            margin-right: calc(50% - 50vw);
            border-radius: 0;
            padding: 0;
        }
        .pricing-feature-inner {
            max-width: 350px;
            margin: 0 auto;
            padding: 20px 22px 22px 22px;
        }
    }

    .pricing-feature {
        background: #3F3C34;
        border-radius: 16px;
        width: 350px;
        max-width: 100%;
        padding: 20px 22px 22px 22px;
        margin: 0 auto 36px auto;
        color: #FFF;
        position: relative;
    }
    .feature-row-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 6px;
    }
    .feature-your-plan {
        background: transparent;
        color: var(--c-terracotta);
        font-family: var(--ff-dm);
        font-size: 10px;
        font-weight: 700;
        line-height: 15px;
        letter-spacing: 1.6px;
        text-transform: uppercase;
        padding: 0;
        display: inline-block;
    }
    .feature-onetime {
        color: var(--c-terracotta);
        font-family: var(--ff-dm);
        font-size: 10px;
        font-weight: 700;
        line-height: 16px;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-align: right;
    }
    .feature-price {
        color: #FFF;
        font-family: var(--ff-serif);
        font-size: 56px;
        font-weight: 700;
        line-height: 56px;
        margin: 12px 0 0 0;
    }
    .feature-title {
        color: #FFF;
        font-family: var(--ff-serif);
        font-size: 24px;
        font-weight: 400;
        line-height: 28px;
        margin: 16px 0 14px 0;
    }
    .feature-desc {
        color: rgba(255, 255, 255, 0.7);
        font-family: var(--ff-dm);
        font-size: 13px;
        font-weight: 400;
        line-height: 20px;
        margin: 0 0 24px 0;
    }
    .feature-list {
        list-style: none;
        padding: 0;
        margin: 0 0 18px 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .feature-list li {
        color: rgba(255, 255, 255, 0.85);
        font-family: var(--ff-dm);
        font-size: 13px;
        font-weight: 400;
        line-height: 18px;
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }
    .feature-list li::before {
        content: "";
        width: 13px;
        height: 13px;
        background-image: url("/static/images/icons/generic/check-orange.svg");
        background-repeat: no-repeat;
        background-position: center;
        margin-top: 3px;
        flex-shrink: 0;
    }
    .feature-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        background: #2A2723;
        color: #FFF;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 9999px;
        padding: 13px 18px;
        font-family: var(--ff-sans);
        font-size: 13px;
        font-weight: 400;
        letter-spacing: 0.2px;
        cursor: pointer;
        text-decoration: none;
    }
    .feature-cta:hover { opacity: 0.95; }
    .feature-footnote {
        color: var(--c-terracotta);
        font-family: var(--ff-sans);
        font-size: 11px;
        font-weight: 400;
        line-height: 16px;
        text-align: center;
        margin: 14px 0 0 0;
    }

    .pricing-all-label {
        color: var(--c-terracotta);
        font-family: var(--ff-mono);
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin: 0 0 14px 0;
    }
    .plan-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 24px;
    }
    .plan-card {
        background: #FFF;
        border: 1px solid rgba(30, 25, 10, 0.10);
        border-radius: 16px;
        padding: 14px 14px 14px 14px;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .plan-card.is-dark {
        background: #3F3C34;
        border-color: #3F3C34;
        color: #FFF;
    }
    .plan-card .plan-tag {
        color: #9B8F7D;
        font-family: var(--ff-sans);
        font-size: 11px;
        font-weight: 400;
        line-height: 15.95px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }
    .plan-card .plan-tag .expert {
        color: var(--c-terracotta);
        font-family: var(--ff-sans);
        font-size: 10px;
        font-weight: 400;
        line-height: 15px;
    }
    .plan-card.is-dark .plan-tag { color: #FFF; }
    .plan-card .plan-name {
        color: var(--c-ink);
        font-family: var(--ff-sans);
        font-size: 17px;
        font-weight: 400;
        line-height: 22px;
        margin: 4px 0 0 0;
    }
    .plan-card.is-dark .plan-name { color: #FFF; }
    .plan-card .plan-price {
        color: #1E1912;
        font-family: var(--ff-serif);
        font-size: 30px;
        font-weight: 700;
        line-height: 30px;
        margin: 6px 0 0 0;
    }
    .plan-card.is-dark .plan-price { color: #FFF; }
    .plan-card .plan-cadence {
        color: #9B8F7D;
        font-family: var(--ff-sans);
        font-size: 11px;
        font-weight: 400;
        line-height: 15.95px;
    }
    .plan-card.is-dark .plan-cadence { color: var(--c-terracotta); }
    .plan-card .plan-includes {
        color: #9B8F7D;
        font-family: var(--ff-sans);
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
        margin-top: 2px;
    }
    .plan-card.is-dark .plan-includes { color: var(--c-terracotta); }
    .plan-choose {
        /* margin-top: auto pins the button to the bottom of the card,
           so cards of different content heights still line up. */
        margin-top: auto;
        background: #2A2723;
        color: #FFF;
        border: none;
        border-radius: 9999px;
        padding: 9px 14px;
        font-family: var(--ff-sans);
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0.2px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        text-decoration: none;
    }
    .plan-card.is-dark .plan-choose {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .plan-card .plan-badge {
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--c-terracotta);
        color: #FFF;
        font-family: var(--ff-sans);
        font-size: 9.5px;
        font-weight: 400;
        line-height: 14.25px;
        letter-spacing: 0.95px;
        text-transform: uppercase;
        padding: 4px 12px;
        border-radius: 9999px;
        white-space: nowrap;
    }
    .pricing-fineprint {
        color: #9B8F7D;
        font-family: var(--ff-dm);
        font-size: 13px;
        font-weight: 400;
        line-height: 21.125px;
        margin: 0 0 12px 0;
    }
    .pricing-fineprint + .pricing-fineprint { margin-bottom: 0; }
    .pricing-bottom-row { margin-top: 16px; }
    /* Image lives inside the second paragraph and floats right within it,
       so only the second paragraph wraps. The first paragraph reads full
       width above. */
    .pricing-bottom-img {
        float: right;
        width: auto;
        height: auto;
        max-width: 130px;
        max-height: 120px;
        margin: 0 0 8px 16px;
        mix-blend-mode: multiply;
        shape-outside: margin-box;
    }
    /* Clearfix so the float doesn't bleed into the section below. */
    .pricing-bottom-row::after {
        content: "";
        display: block;
        clear: both;
    }

    /* -------------------------------------------------------------------
       "How we stay independent" section.
       ------------------------------------------------------------------- */
    .independence-section {
        background: #F5EDE3;
        padding: 56px 24px 56px 24px;
    }
    .independence-eyebrow {
        color: var(--c-terracotta);
        font-family: var(--ff-mono);
        font-size: 14px;
        font-weight: 400;
        line-height: 12px;
        letter-spacing: 1.8px;
        text-transform: uppercase;
        margin: 0 0 16px 0;
    }
    .independence-headline {
        color: var(--c-ink);
        font-family: var(--ff-sans);
        font-size: 30px;
        font-weight: 400;
        line-height: 32px;
        margin: 0 0 12px 0;
    }
    .independence-italic {
        color: var(--c-terracotta);
        font-family: var(--ff-serif);
        font-size: 32px;
        font-style: italic;
        font-weight: 400;
        line-height: 38px;
        margin: 0 0 18px 0;
    }
    /* Wrap "you" — the squiggly hand-drawn line sits just under it. */
    .underline-you {
        position: relative;
        display: inline-block;
    }
    .underline-you .underline-doodle {
        position: absolute;
        left: 50%;
        bottom: -10px;
        transform: translateX(-50%);
        width: 64px;
        height: 12px;
        pointer-events: none;
    }
    .independence-body {
        color: rgba(26, 20, 16, 0.55);
        font-family: var(--ff-sans);
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        margin: 0 0 24px 0;
    }
    .independence-card {
        background: #FDF9F4;
        border-radius: 14px;
        border: 1px solid rgba(26, 25, 21, 0.10);
        padding: 20px 22px 22px 22px;
        margin-bottom: 12px;
    }
    .independence-card-icon {
        width: 34px;
        height: 34px;
        border-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        background: transparent;
        border: 1px solid rgba(26, 20, 16, 0.15);
        color: rgba(26, 20, 16, 0.55);
    }
    .independence-card-icon.is-plus {
        background: var(--c-terracotta);
        border-color: var(--c-terracotta);
        color: #FFF;
    }
    .independence-card-title {
        color: #1A1915;
        font-family: var(--ff-serif);
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        margin: 0 0 16px 0;
    }
    .independence-card-body {
        color: #7A6E65;
        font-family: var(--ff-dm);
        font-size: 11.5px;
        font-weight: 400;
        line-height: 18px;
        margin: 0;
    }

    /* Concierge band — sits under the three independence cards. */
    .independence-concierge {
        background: #EDE4D8;
        border-radius: 14px;
        padding: 20px 22px;
        display: flex;
        align-items: flex-start;
        gap: 16px;
        margin-top: 16px;
    }
    .independence-concierge-icon {
        flex-shrink: 0;
        width: 38px;
        height: 38px;
        border-radius: 9999px;
        background: rgba(196, 112, 74, 0.12);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .independence-concierge-body-wrap {
        flex: 1;
        min-width: 0;
    }
    .independence-concierge-title {
        color: var(--c-terracotta);
        font-family: var(--ff-mono);
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        letter-spacing: 2.2px;
        text-transform: uppercase;
        margin: 0 0 8px 0;
    }
    .independence-concierge-body {
        color: #7A6E65;
        font-family: var(--ff-sans);
        font-size: 13px;
        font-weight: 400;
        line-height: 21.45px;
        margin: 0;
    }

    .independence-partners {
        margin-top: 24px;
        border-top: 1px solid rgba(26, 25, 21, 0.15);
        border-bottom: 1px solid rgba(26, 25, 21, 0.15);
    }
    .independence-partners-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        padding: 14px 0;
    }
    .independence-partners-row span {
        color: #1A1915;
        font-family: var(--ff-sans);
        font-size: 11px;
        font-weight: 400;
        line-height: 16px;
        letter-spacing: 0.12px;
    }
    .independence-partners-row .sep {
        color: rgba(26, 20, 16, 0.25);
    }
    .independence-partners-row .more {
        color: #7A6E65;
        font-family: var(--ff-sans);
        font-size: 9px;
        font-weight: 400;
        line-height: 14px;
        letter-spacing: 1.4px;
        text-transform: uppercase;
    }

    /* -------------------------------------------------------------------
       "A note on why" — Tara letter.
       ------------------------------------------------------------------- */
    .note-section {
        background: #fff;
        padding: 56px 24px 56px 24px;
        position: relative;
    }
    .note-video {
        position: relative;
        max-width: 100%;
        border-radius: 14px;
        background: #E4DCD4;
        overflow: hidden;
        margin-bottom: 32px;
    }
    .note-video img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .note-eyebrow {
        color: var(--c-terracotta);
        font-family: var(--ff-mono);
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        margin: 0 0 14px 0;
    }
    .note-headline {
        color: var(--c-ink);
        font-family: var(--ff-serif);
        font-size: 30px;
        font-weight: 400;
        line-height: 33px;
        letter-spacing: -0.451px;
        margin: 0 0 22px 0;
    }
    .note-body {
        color: #5A4035;
        font-family: var(--ff-dm);
        font-size: 14px;
        font-weight: 300;
        line-height: 24.5px;
        margin: 0 0 18px 0;
    }
    .note-signoff {
        color: #5A4035;
        font-family: var(--ff-dm);
        font-size: 14px;
        font-weight: 300;
        line-height: 24.5px;
        margin: 0;
    }
    .note-signature {
        display: block;
        width: 100%;
        max-width: 80px;
        height: auto;
        margin: 8px 0 0 0;
        max-width: 90px !important;
    }
    .note-chair {
        float: right;
        width: auto;
        height: auto;
        max-width: 85px;
        max-height: 130px;
        display: block;
        pointer-events: none;
        mix-blend-mode: multiply;
        /* Margins around the float so the body text doesn't bump right up
           against the illustration. */
        margin: 0 0 8px 16px;
        shape-outside: margin-box;
    }

    /* -------------------------------------------------------------------
       "What clients say" — testimonials.
       ------------------------------------------------------------------- */
    .clients-section {
        background: #CBC1ED;
        padding: 48px 24px 56px 24px;
    }
    .clients-eyebrow {
        color: var(--c-ink);
        font-family: var(--ff-mono);
        font-size: 20px;
        font-weight: 400;
        line-height: 14px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 16px 0;
    }
    .clients-eyebrow::before {
        content: "";
        width: 28px;
        height: 1px;
        background: var(--c-ink);
        display: inline-block;
    }
    .clients-headline {
        color: #FFF;
        font-family: var(--ff-mono);
        font-size: 48px;
        font-weight: 400;
        line-height: 48px;
        letter-spacing: -0.4px;
        text-transform: uppercase;
        margin: 0 0 14px 0;
    }
    .clients-sub {
        color: var(--c-ink);
        font-family: var(--ff-sans);
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        margin: 0 0 24px 0;
    }
    .testimonial-card {
        /* Reset <button> defaults so the card behaves like the div it
           replaced; the click flips between the quote and a photo. */
        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;
        font: inherit;
        color: inherit;
        text-align: left;
        width: 100%;
        margin-bottom: 14px;
        perspective: 1000px;
        border-radius: 16px;
    }
    .testimonial-card:focus-visible {
        outline: 2px solid var(--c-terracotta);
        outline-offset: 4px;
    }
    .testimonial-card-inner {
        display: grid;
        grid-template: 1fr / 1fr;
        transition: transform 0.6s;
        transform-style: preserve-3d;
        border-radius: 16px;
        /* height: 200px; */
        max-height: 400px;
    }
    .testimonial-card.is-flipped .testimonial-card-inner {
        transform: rotateY(180deg);
    }
    .testimonial-front,
    .testimonial-back {
        grid-area: 1 / 1;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        border-radius: 16px;
        overflow: hidden;
    }
    .testimonial-front {
        background: #FAF6F0;
        padding: 18px 22px;
        box-shadow: 0 2px 20px 0 rgba(42, 31, 23, 0.06);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .testimonial-back {
        position: relative;
        transform: rotateY(180deg);
        background: var(--c-ink);
    }
    .testimonial-back img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .testimonial-back::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(46, 42, 39, 0.40);
    }
    .testimonial-quote-mark {
        color: #C8B09A;
        font-family: 'Cormorant Garamond', Georgia, serif;
        font-size: 72px;
        font-style: normal;
        font-weight: 400;
        line-height: 57.6px;
        margin: 0 0 4px 0;
    }
    .testimonial-quote {
        color: #2A1F17;
        font-family: var(--ff-serif);
        font-size: 22px;
        font-style: italic;
        font-weight: 400;
        line-height: 28px;
        margin: 0 0 18px 0;
    }
    .testimonial-author {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .testimonial-avatar {
        width: 36px;
        height: 36px;
        border-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #4A3C30;
        font-family: var(--ff-dm);
        font-size: 13.6px;
        font-weight: 500;
        line-height: 20.4px;
        background: #D4C4B0;
        flex-shrink: 0;
    }
    .testimonial-avatar.avatar-r { background: #C2CEBF; }
    .testimonial-avatar.avatar-h { background: #C8CAD4; }
    .testimonial-name {
        color: #2A1F17;
        font-family: var(--ff-sans);
        font-size: 14px;
        font-weight: 400;
        line-height: 16.8px;
        margin: 0;
    }
    .testimonial-meta {
        color: #8B7B6E;
        font-family: var(--ff-sans);
        font-size: 12.8px;
        font-weight: 400;
        line-height: 16.64px;
        margin: 0;
    }

    /* -------------------------------------------------------------------
       Closing CTA — "Four minutes…"
       ------------------------------------------------------------------- */
    .closing-section {
        background: #3F3C34;
        padding: 48px 24px 50px 24px;
    }
    .closing-image {
        width: 241px;
        height: 222px;
        border-radius: 20px;
        object-fit: cover;
        display: block;
        margin: 0 auto 24px auto;
    }
    /* Brow + laser collage images are desktop-only. */
    .closing-image-brow,
    .closing-image-laser { display: none; }
    .closing-headline {
        color: #CBC1ED;
        font-family: var(--ff-sans);
        font-size: 48px;
        font-weight: 400;
        line-height: 52px;
        margin: 0 0 28px 0;
    }
    .closing-ctas {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .closing-cta-dark {
        width: 208px;
        background: var(--c-ink);
        color: #FFF;
        border: 1px solid #000;
        border-radius: 32px;
        padding: 12px 0;
        font-family: var(--ff-sans);
        font-size: 13px;
        font-weight: 400;
        letter-spacing: 0.2px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .closing-cta-cream {
        width: 208px;
        background: #F2EAD8;
        color: var(--c-terracotta);
        border: 1px solid #C4A87A;
        border-radius: 32px;
        padding: 12px 0;
        font-family: var(--ff-sans);
        font-size: 13px;
        font-weight: 400;
        letter-spacing: 0.2px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    /* -------------------------------------------------------------------
       FAQ section.
       ------------------------------------------------------------------- */
    .faq-section {
        background: #F5EDE3;
        padding: 56px 24px 0 24px;
    }
    .faq-eyebrow {
        color: var(--c-terracotta);
        font-family: var(--ff-mono);
        font-size: 20px;
        font-weight: 400;
        line-height: 16.8px;
        letter-spacing: 2.24px;
        text-transform: uppercase;
        margin: 0 0 22px 0;
    }
    .faq-headline {
        color: var(--c-ink);
        font-family: var(--ff-sans);
        font-size: 56px;
        font-weight: 400;
        line-height: 59.36px;
        letter-spacing: -1.12px;
        margin: 0 0 22px 0;
    }
    .faq-item {
        border-top: 1px solid rgba(30, 24, 18, 0.15);
        padding: 0;
    }
    .faq-item:last-of-type {
        border-bottom: 1px solid rgba(30, 24, 18, 0.15);
    }
    .faq-item summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 20px 0;
        color: var(--c-ink);
        font-family: var(--ff-sans);
        font-size: 16.8px;
        font-weight: 400;
        line-height: 23.1px;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item .faq-toggle {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        color: #1A1410;
    }
    .faq-item[open] .faq-toggle .icon-plus { display: none; }
    .faq-item:not([open]) .faq-toggle .icon-minus { display: none; }
    .faq-item .faq-answer {
        color: #5C554E;
        font-family: var(--ff-sans);
        font-size: 14.8px;
        font-weight: 400;
        line-height: 24.05px;
        margin: 0 0 22px 0;
    }

    /* -------------------------------------------------------------------
       Footer.
       ------------------------------------------------------------------- */
    .footer-section {
        background: #FAF6F0;
        padding: 0 24px 40px 24px;
    }
    /* Single hero image replaces the collage + wordmark on >=600px (see
       media query below). Hidden on mobile. */
    .footer-hero-image { display: none; }
    .footer-collage {
        position: relative;
        height: 240px;
        margin: 0 -24px 24px -24px; /* break out to viewport edges so tile-1 sits flush left */
    }
    .footer-collage .tile {
        position: absolute;
        border-radius: 0;
        overflow: hidden;
    }
    .footer-collage .tile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* Mobile dimensions per the spec:
       tile-1: 106 × 176 (phone screenshot, flush to left edge)
       tile-2: 138 × 149.2 (woman with phone, top-center)
       tile-3: 108 × 86 (close-up injection, bottom-right) */
    .footer-collage .tile-1 {
        left: 0;
        bottom: 0;
        width: 106px;
        height: 176px;
    }
    .footer-collage .tile-2 {
        left: 116px;
        top: 16px;
        width: 138px;
        height: 149.2px;
    }
    .footer-collage .tile-3 {
        right: 6px;
        bottom: 0;
        width: 108px;
        height: 86px;
    }
    /* Tile-4 (leaf) — desktop-only image; hidden on mobile per spec. */
    .footer-collage .tile-4 { display: none; }

    .footer-logo {
        width: 100%;
        max-width: 100%;
        margin: 24px 0 40px 0;
        line-height: 1;
    }
    .footer-logo img {
        display: block;
        width: 100%;
        height: auto;
    }
    .footer-links {
        display: flex;
        flex-direction: column;
        gap: 36px;
        margin: 0 0 44px 0;
    }
    .footer-links a {
        color: #000;
        font-family: var(--ff-sans);
        font-size: 18px;
        font-weight: 300;
        line-height: 130%;
        letter-spacing: 0.36px;
        text-decoration: none;
    }
    .footer-copyright {
        color: #000;
        font-family: var(--ff-sans);
        font-size: 18px;
        font-weight: 300;
        line-height: 130%;
        letter-spacing: 0.36px;
        margin: 0 0 24px 0;
    }
    /* Hidden for now — markup retained for later use. To re-enable,
       remove this `display: none !important;` override below. */
    .footer-social {
        display: none !important;
        align-items: center;
        gap: 8px;
        justify-content: center;
    }
    .footer-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
    }
    .footer-social a img {
        width: 18px;
        height: 18px;
        display: block;
    }

    /* -------------------------------------------------------------------
       SMALL TABLET (>= 450px). Hero CTAs go side-by-side and the AI card
       aligns left instead of centering.
       ------------------------------------------------------------------- */
    @media (min-width: 450px) {
        .home-hero-section .home-cta-wrap {
            flex-direction: row !important;
            justify-content: flex-start !important;
            align-items: center !important;
            padding-left: 20px !important;
            padding-top: 15px !important;
            padding-bottom: 15px !important;

        }
        .home-hero-section .flex.justify-center {
            justify-content: flex-start !important;
            padding-left: 20px !important;
        }
    }

    /* -------------------------------------------------------------------
       INTERMEDIATE LAYOUT (600–1023px). When the viewport is wide enough
       to fit the 350px Your Plan card alongside the fineprint, slot them
       side by side. The card stays at its 350px width and the fineprint
       fills the remaining column. Uses display:contents on the cols so
       .pricing-grid-wrap can govern all children directly.
       ------------------------------------------------------------------- */
    @media (min-width: 600px) and (max-width: 1023px) {
        .hero-overlay .home-hero-title { font-size: 70px; }
        .hero-overlay .home-hero-title-italic { font-size: 90px; }
    }

    /* -------------------------------------------------------------------
       Non-mobile footer: swap the 4-tile collage + wordmark for a single
       hero image. Bottom links / copyright / social row is untouched.
       ------------------------------------------------------------------- */
    @media (min-width: 600px) {
        .footer-collage,
        .footer-logo { display: none; }
        .footer-hero-image {
            display: block;
            width: 100%;
            height: auto;
        }
    }

    @media (min-width: 600px) and (max-width: 799px) {
        .pricing-grid-wrap {
            display: grid;
            grid-template-columns: 350px minmax(0, 1fr);
            column-gap: 24px;
            max-width: 1200px;
            margin: 0 auto;
            align-items: start;
        }
        .pricing-left-col,
        .pricing-right-col { display: contents; }
        .pricing-selectors {
            grid-column: 1 / -1;
            margin-bottom: 24px;
        }
        .pricing-feature {
            grid-column: 1;
            width: 350px;
            margin: 0;
        }
        .pricing-bottom-row {
            grid-column: 2;
            margin: 0;
        }
        .pricing-all-label {
            grid-column: 1 / -1;
            margin: 24px 0 14px 0;
        }
        .plan-grid { grid-column: 1 / -1; }
    }

    /* -------------------------------------------------------------------
       TABLET PRICING (800–1023px). Mirror the full desktop layout (left
       col: selectors + feature; right col: all-label + plans + fineprint)
       but stack plans 2x2 instead of 4 across.
       ------------------------------------------------------------------- */
    @media (min-width: 800px) and (max-width: 1023px) {
        .pricing-eyebrow,
        .pricing-headline,
        .pricing-sub {
            max-width: 1100px;
            margin-left: auto;
            margin-right: auto;
        }
        .pricing-eyebrow { text-align: center; }
        .pricing-headline {
            text-align: center;
            font-size: 40px;
            line-height: 46px;
            margin-bottom: 14px;
        }
        .pricing-sub { text-align: center; max-width: 720px; margin-bottom: 32px; }
        .pricing-grid-wrap {
            display: grid;
            grid-template-columns: minmax(0, .7fr) minmax(0, 1.15fr);
            gap: 36px;
            max-width: 1000px;
            margin: 0 auto;
            align-items: stretch;
        }
        .pricing-right-col { position: relative; }
        .pricing-selectors { margin-bottom: 24px; }
        .pricing-feature {
            width: 100%;
            max-width: none;
            margin: 0;
        }
        .pricing-all-label { margin: 0 0 14px 0; }
        .plan-grid {
            grid-template-columns: repeat(2, 1fr);
            margin-bottom: 16px;
        }
        .pricing-bottom-row {
            margin-top: 12px;
            position: static;
        }
    }

    /* -------------------------------------------------------------------
       DESKTOP OVERRIDES — kick in at >= 1024px. Placed at the end of the
       stylesheet so they win over the mobile rules above.
       ------------------------------------------------------------------- */
    @media (min-width: 1024px) {
        .section-inner { max-width: 1200px; }
        .ai-modal-backdrop { padding: 24px; }
        .ai-modal { max-width: 480px; }

        /* Header: show desktop nav, hide hamburger. */
        .home-header {
            height: 88px;
            padding-left: 56px;
            padding-right: 56px;
            position: relative;
        }
        .home-header img.logo { height: 32px; }
        .home-header .menu-btn { display: none; }
        .home-header .nav-desktop {
            display: flex;
            gap: 36px;
            margin-left: auto;
            margin-right: 30px;
        }
        .home-header .nav-desktop a {
            color: var(--c-ink);
            font-family: var(--ff-sans);
            font-size: 15px;
            text-decoration: none;
        }
        .home-header .nav-right {
            display: flex;
            align-items: center;
            gap: 18px;
        }
        .home-header .nav-right .sign-in {
            color: var(--c-ink);
            font-family: var(--ff-sans);
            font-size: 15px;
            text-decoration: none;
        }
        .home-header .nav-right .start-strategy {
            background: var(--c-ink);
            color: #FFF;
            font-family: var(--ff-sans);
            font-size: 14px;
            padding: 11px 22px;
            border-radius: 9999px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        /* Hero: full-bleed background image with text overlaid on the left.
           The img element below is absolutely positioned to fill the
           section; .home-hero-text sits above it via relative + z-index.
           The ::before pseudo paints a peachy band that extends past the
           1400px max-width to fill the viewport sides. */
        .home-hero-section {
            /* Section spans the full viewport so the hero image is
               edge-to-edge. The text inside is shifted right via calc()
               so it aligns with the centered 1200px content container
               used by all the sections below. */
            position: relative;
            overflow: hidden;
            height: 750px;
            background-color: #FFFDF8;
            padding: 0;
        }
        .home-hero-text {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            gap: 28px;
            max-width: 600px;
            padding: 80px 56px 64px 56px;
            /* Shift the text right so it aligns with the centered 1200px
               content container shared by the chapter/editorial sections.
               On viewports wider than 1200, max() pushes the text right
               by half the excess; otherwise it stays at 0. */
            margin-left: max(0px, calc((100vw - 1200px) / 2));
        }
        .home-hero-text .home-eyebrow-wrap {
            padding-top: 0 !important;
            text-align: left !important;
        }
        .home-hero-text .home-eyebrow { text-align: left; }
        .home-hero-photo-mobile { display: none !important; }
        .home-hero-title-desktop {
            display: block;
        }
        .home-hero-title-desktop .home-hero-title { font-size: 100px; line-height: 87.171px; font-weight: 400; }
        .home-hero-title-desktop .home-hero-title-italic { font-size: 100px; line-height: 87.171px; font-weight: 500; }
        .home-hero-title-desktop .guided-row {
            margin-top: 0;
            padding-left: 0;
            gap: 0px;
        }
        .home-hero-title-desktop .guided-line { flex: 0 0 240px; }

        .home-hero-photo-desktop {
            display: block;
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            max-width: none;
            max-height: none;
            border-radius: 0;
            z-index: 0;
            overflow: hidden;
        }
        /* Image's top-right corner pinned to the section's top-right.
           object-fit: cover fills the wrapper; object-position: right top
           anchors the source's top-right corner to the container's
           top-right, cropping from the left/bottom as needed. */
        .home-hero-photo-desktop img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: right top;
            display: block;
        }

        .home-hero-section .home-body-wrap { padding: 0 !important; }
        .home-hero-section .home-body { font-size: 17px; line-height: 26px; max-width: 540px; }
        .home-hero-section .home-cta-wrap {
            flex-direction: row !important;
            justify-content: flex-start !important;
            align-items: center !important;
            padding: 0 !important;
        }
        .home-hero-section .flex.justify-center {
            justify-content: flex-start !important;
            padding-top: 0 !important;
            padding-left: 0 !important;
        }
        /* AI card overlay treatment on desktop — semi-transparent cream
           pill that sits over the hero image. */
        .home-hero-section .ai-card {
            margin: 0;
            width: 290px;
            height: 67px;
            border: 1px solid #A09080;
            background: rgba(250, 246, 240, 0.48);
        }
        .home-hero-section .ai-card .ai-title {
            color: #7A6E65;
            font-family: var(--ff-sans);
            font-size: 15px;
            font-weight: 400;
            line-height: 19.5px;
            letter-spacing: 0.65px;
        }
        .home-hero-section .ai-card .ai-subtitle {
            color: #2A1F17;
            font-family: 'Jost', sans-serif;
            font-size: 12px;
            font-weight: 400;
            line-height: 16px;
            letter-spacing: 0.96px;
        }
        /* Tint the sparkle SVG to the #A09080 warm grey-brown via filter. */
        .home-hero-section .ai-card .ai-icon-circle {
            border-color: rgba(160, 144, 128, 0.4);
            background: rgba(160, 144, 128, 0.12);
        }
        .home-hero-section .ai-card .ai-icon-circle img {
            filter: brightness(0) saturate(100%) invert(57%) sepia(8%) saturate(615%) hue-rotate(0deg) brightness(96%) contrast(86%);
        }

        /* Compare section: auto-scrolling loop carousel. */
        .compare-section { padding-top: 4px; padding-bottom: 0; }
        .compare-track {
            overflow: hidden !important;
            scroll-snap-type: none !important;
        }
        .compare-track-inner {
            display: flex;
            gap: 0;
            animation: compare-scroll 60s linear infinite;
            width: max-content;
        }
        .compare-track-inner:hover { animation-play-state: paused; }
        @keyframes compare-scroll {
            from { transform: translateX(0); }
            to   { transform: translateX(-50%); }
        }
        .compare-card {
            flex: 0 0 auto !important;
            width: 360px !important;
            height: 282px;
            padding-right: 24px;
            scroll-snap-align: none !important;
        }
        .compare-card:nth-child(n+6) { display: flex !important; }
        .compare-card .card-image { width: 110px; }

        /* Strategy intro: centered with smaller width. */
        .strategy-intro { padding: 80px 56px 30px 56px; }
        .strategy-intro .strategy-eyebrow,
        .strategy-intro .strategy-headline,
        .strategy-intro .strategy-body {
            max-width: 720px;
            margin-left: auto;
            margin-right: auto;
        }
        .strategy-eyebrow { font-size: 20px; }
        .strategy-headline { font-size: 32px; line-height: 38px; }
        .strategy-body { font-size: 16px; line-height: 24px; max-width: 736px; }

        /* Chapter section: 3-up grid on desktop. */
        .chapter-section { padding-bottom: 96px; }
        .chapter-track {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            overflow: visible !important;
            max-width: 1200px;
            margin: 0 auto;
            padding: 4px 56px 0 56px;
            scroll-snap-type: none !important;
        }
        .chapter-card {
            flex: initial !important;
            width: 100% !important;
            height: auto !important;
            min-height: 480px;
            scroll-snap-align: none !important;
        }
        /* Show only first 3 chapter cards on desktop (the others would
           wrap to a second row). */
        .chapter-track .chapter-card:nth-child(n+4) { display: none; }

        /* ------------------ Editorial section ------------------ */
        .editorial-section {
            padding: 0px 56px 20px 56px;
            text-align: left;
        }
        .editorial-section .section-inner {
            min-height: 550px;
            display: grid;
            grid-template-columns: auto 1fr;
            grid-template-rows: 1fr auto;
            grid-template-areas:
                "image quote"
                "footer footer";
            column-gap: 56px;
            align-items: center;
        }
        .editorial-image {
            grid-area: image;
            width: 400px;
            max-width: none;
            border-radius: 9999px;
            margin: 0;
        }
        .editorial-quote {
            grid-area: quote;
            color: #FFF;
            font-family: var(--ff-serif);
            font-size: 70px;
            font-style: italic;
            font-weight: 400;
            line-height: 100px;
            text-align: left;
            margin: 0;
        }
        .editorial-quote .schedule {
            color: #CBC1ED;
            font-family: var(--ff-serif);
            font-size: 70px;
            font-style: italic;
            font-weight: 400;
            line-height: 100px;
        }
        .editorial-footer {
            grid-area: footer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 24px;
            color: #E8D5C4;
            font-family: var(--ff-sans);
            font-size: 20px;
            font-style: normal;
            font-weight: 400;

            margin: 0;
        }
        .editorial-footer::before,
        .editorial-footer::after {
            content: "";
            flex: 1;
            max-width: 300px;
            height: 1px;
            background: #fff;
        }

        /* ------------------ Pricing section ------------------ */
        .pricing-section {
            padding: 80px 56px 80px 56px;
        }
        /* Align the left edge of the headings with the left edge of the
           centered 1200px .pricing-grid-wrap below. On viewports wider
           than 1200px the max() pushes the heading right by the same
           amount the grid is offset; otherwise it sits flush at 0. */
        .pricing-eyebrow,
        .pricing-headline,
        .pricing-sub {
            max-width: 500px;
            margin-left: max(0px, calc((100% - 1200px) / 2));
            margin-right: auto;
            text-align: left;
        }
        .pricing-headline {
            font-size: 40px;
            line-height: 46px;
            margin-bottom: 14px;
        }
        .pricing-sub { margin-bottom: 32px; }
        /* Two-column layout under the heading: selectors+feature on left,
           all-four-plans + fine print on right. */
        .pricing-grid-wrap {
            display: grid;
            grid-template-columns: minmax(0, .7fr) minmax(0, 1.15fr);
            gap: 64px;
            max-width: 1200px;
            margin: 0 auto;
            align-items: stretch;
        }
        /* Right column stretches to the height of the left column so the
           product still-life can anchor to the bottom of the entire row
           (in line with the bottom of the "Your Plan" card on the left). */
        .pricing-right-col { position: relative; }
        .pricing-selectors { margin-bottom: 24px; max-width: 420px; }
        .pricing-pill,
        .pricing-pill.is-active {
            width: auto;
            flex: 1 1 0;
            max-width: 180px;
        }
        .pricing-feature {
            width: 100%;
            max-width: 420px;
            margin: 0;
        }
        .pricing-all-label { margin: 0 0 14px 0; }
        .plan-grid {
            grid-template-columns: repeat(4, 1fr);
            margin-bottom: 16px;
        }
        .pricing-bottom-row {
            margin-top: 12px;
            position: static;
        }
        .pricing-bottom-img {
            float: none;
            margin: 0;
            width: auto;
            height: auto;
            max-width: 160px;
            max-height: 120px;
            position: absolute;
            right: 0;
            bottom: 0;
            shape-outside: none;
        }

        /* ------------------ Independence section ------------------ */
        .independence-section {
            padding: 80px 56px 80px 56px;
        }
        .independence-grid {
            display: grid;
            grid-template-columns: 345px minmax(0, 500px);
            column-gap: 164px;
            max-width: 1200px;
            margin: 0 auto;
            align-items: start;
        }
        .independence-text { max-width: 345px; }
        .independence-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }
        .independence-eyebrow { font-size: 20px; line-height: 15px; letter-spacing: 2.8px; }
        .independence-headline { font-size: 36px; line-height: 40px; }
        .independence-partners { grid-column: 1; grid-row: 2; margin-top: 8px; align-self: center; max-width: 345px; }
        .independence-concierge { grid-column: 2; grid-row: 2; margin-top: 16px; align-self: center; }

        /* ------------------ Note (Tara letter) ------------------ */
        .note-section {
            padding: 50px 56px 35px;
        }
        .note-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto;
            align-items: start;
        }
        .note-video {
            margin-bottom: 12px;
            max-width: 554px;
            height: 584px;
        }
        .note-headline { font-size: 36px; line-height: 42px; }
        .note-signature { max-width: 110px; }
        /* Chair illustration moves out of the text wrap and into the
           bottom-right corner of the right column on desktop. The text
           (eyebrow, headline, body, signature) is constrained to a
           narrow 258px column on the left of .note-right while the chair
           sits in the remaining right-hand space via its absolute
           positioning below. */
        .note-right { position: relative; padding-bottom: 210px; }
        .note-right > .note-eyebrow,
        .note-right > .note-headline,
        .note-right > .note-body,
        .note-right > .note-signature {
            max-width: 425px;
        }
        .note-chair {
            float: none;
            position: absolute;
            right: 0;
            bottom: 0;
            width: auto;
            height: auto;
            max-width: 150px;
            max-height: 130px;
            margin: 0;
        }

        /* ------------------ Clients section ------------------ */
        .clients-section {
            padding: 80px 56px 80px 56px;
        }
        .clients-eyebrow {
            font-size: 30px;
            line-height: 16.8px;
            letter-spacing: 2.016px;
            margin: 0 0 36px 0;
        }
        .clients-headline {
            font-size: 100px;
            line-height: 62.265px;
            letter-spacing: -0.593px;
            margin: 0 0 24px 0;
        }
        .clients-headline br { display: none; }
        .clients-sub {
            font-size: 18px;
            line-height: 27.2px;
            max-width: 300px;
        }
        .clients-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
        }
        .testimonial-card { margin: 0; height: 325px; }
        .testimonial-card-inner { height: 100%; max-height: none; }

        /* ------------------ Closing CTA ------------------ */
        .closing-section {
            
        height: 750px

        }
        .closing-grid {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 56px;
            max-width: 1200px;
            margin: 0 auto;
            align-items: start;
        }
        .closing-grid .closing-text {
            order: 1;
            padding-top: 211px;
        }
        .closing-grid .closing-media {
            order: 2;
            position: relative;
            min-height: 780px;
            max-height: 800px;
        }

        .closing-image-brow {
            display: block;
            position: absolute;
            top: 0;
            right: 44px;
            width: 260px;
            height: 260px;
            object-fit: cover;
            border-radius: 20px;
            margin: 0;
        }
        .closing-image-laser {
            display: block;
            position: absolute;
            top: 273px;
            width: 260px;
            height: 260px;
            object-fit: cover;
            border-radius: 20px;
            margin: 0;
        }
        .closing-grid .closing-media > video.closing-image {
            position: absolute;
            top: 329px;
            left: 266px;
            width: 260px;
            height: 260px;
            max-width: none;
            aspect-ratio: 1;
            margin: 0;
        }
        .closing-headline { font-size: 64px; line-height: 68px; }
        .closing-ctas { flex-direction: row !important; justify-content: flex-start; }

        /* ------------------ FAQ ------------------ */
        .faq-section {
            padding: 80px 56px 80px 56px;
        }
        .faq-grid {
            display: grid;
            grid-template-columns: 1fr 1.6fr;
            gap: 64px;
            max-width: 1200px;
            margin: 0 auto;
            align-items: start;
        }
        .faq-headline { font-size: 56px; line-height: 60px; }

        /* ------------------ Footer ------------------ */
        .footer-section {
            padding: 56px 56px 40px 56px;
        }
        .footer-section > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
        /* Hero wrapper layers the wordmark on top and 4 tile images below.
           Section is ~600px tall, capped at 850px per the design. */
        .footer-hero {
            position: relative;
            margin-bottom: 40px;
            height: 600px;
            max-height: 850px;
        }
        /* Wordmark sits at the top, full width, brought to the front.
           Capped so it doesn't dominate the band on wide viewports. */
        .footer-logo {
            margin: 0;
            position: relative;
            z-index: 2;
            max-height: 260px;
        }
        .footer-logo img { max-height: 260px; width: 100%; height: auto; object-fit: contain; }
        .footer-collage {
            position: absolute;
            inset: 0;
            height: auto;
            margin: 0;
            z-index: 1;
            pointer-events: none;
        }
        /* Reset and re-position each tile against the hero wrapper. */
        .footer-collage .tile {
            position: absolute;
            background: transparent;
            border-radius: 0;
            overflow: visible;
        }
        .footer-collage .tile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        /* Phone screenshot (PNG already includes the lilac backdrop).
           Left edge flush with the footer-bottom content (info@glowguide.com). */
        .footer-collage .tile-1 {
            left: 0;
            top: 240px;
            width: auto;
            height: 240px;
            background: transparent;
            padding: 0;
        }
        .footer-collage .tile-1 img {
            width: auto;
            height: 100%;
            object-fit: contain;
        }
        /* Selfie portrait, center-left, overlaps bottom of the wordmark. */
        .footer-collage .tile-2 {
            left: 27%;
            top: 180px;
            width: auto;
            height: 270px;
        }
        .footer-collage .tile-2 img { width: auto; height: 100%; }
        /* Botox close-up, center-right, sits lower in the band. */
        .footer-collage .tile-3 {
            left: 52%;
            top: 330px;
            width: auto;
            height: 220px;
        }
        .footer-collage .tile-3 img { width: auto; height: 100%; }
        /* Leaf, right edge, overlaps upper band. */
        .footer-collage .tile-4 {
            display: block;
            right: 0;
            top: 165px;
            width: 135px;
            height: 206px;
            max-width: 135px;
            max-height: 206px;
        }
        .footer-collage .tile-4 img { width: 100%; height: 100%; object-fit: cover; }

        /* Bottom row — all 5 chunks live on a single line. */
        .footer-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            flex-wrap: nowrap;
        }
        .footer-links {
            display: flex;
            flex-direction: row !important;
            gap: 28px;
            margin: 0;
        }
        /* DOM order is left, right, copyright, social (mobile-friendly).
           Use flex order on desktop to weave copyright between the link
           groups: left → copyright → right → social. */
        .footer-links-left { order: 1; }
        .footer-copyright { order: 2; margin: 0; }
        .footer-links-right { order: 3; }
        .footer-social { order: 4; gap: 16px; flex-shrink: 0; }
    }

    /* -------------------------------------------------------------------
       Mid-desktop tuning (1024–1188px): give the hero text column more
       room and shrink the headline ~10% so "Your glow," stays on one line.
       ------------------------------------------------------------------- */
    @media (min-width: 1024px) and (max-width: 1188px) {
        .home-hero-title-desktop .home-hero-title { font-size: 90px; line-height: 78.45px; }
        .home-hero-title-desktop .home-hero-title-italic { font-size: 90px; line-height: 78.45px; }
    }