/* ==========================================================================
   Homie marketing shell
   --------------------------------------------------------------------------
   This is intentionally separate from the legacy stylesheet. All rules are
   scoped to marketing-* hooks and only alter visual presentation; layout and
   responsive navigation mechanics remain owned by style.css.
   ========================================================================== */

:root {
    --marketing-navy: #1A3263;
    --marketing-navy-deep: #122544;
    --marketing-slate: #547792;
    --marketing-amber: #FAB95B;
    --marketing-paper: #E8E2DB;
    --marketing-ink: #111827;
    --marketing-muted: #596476;
    --marketing-border: #D1C9C0;
    --marketing-card-amber: #FFF1D6;
    --marketing-card-amber-border: #EBC66D;
    --marketing-card-amber-strong: #F7DC9A;
    --marketing-dark-surface: #16222F;
    --marketing-dark-border: #26354A;
}

/* ---------- Fixed navigation: visual treatment only ---------- */
.marketing-header {
    border-bottom-color: color-mix(in srgb, var(--marketing-border) 82%, transparent);
    background: color-mix(in srgb, #FFFFFF 78%, transparent);
    box-shadow: 0 5px 22px rgba(26, 50, 99, .06);
    backdrop-filter: blur(12px) saturate(115%);
    -webkit-backdrop-filter: blur(12px) saturate(115%);
}

.marketing-header .site-header__logo {
    color: var(--marketing-navy);
    font-weight: 900;
    letter-spacing: -.04em;
}

.marketing-header .site-header__logo-icon {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--marketing-navy) 14%, var(--marketing-border));
    background: #FFFFFF;
    box-shadow: 0 5px 15px rgba(26, 50, 99, .08);
}

.marketing-header .main-nav__item > a {
    color: var(--marketing-muted);
    font-weight: 750;
}

.marketing-header .main-nav__item > a:hover,
.marketing-header .main-nav__item.is-active > a {
    color: var(--marketing-navy);
}

.marketing-header .main-nav__item.is-active > a {
    text-decoration: underline;
    text-decoration-color: var(--marketing-amber);
    text-decoration-thickness: 2px;
    text-underline-offset: .45rem;
}

.marketing-header .lang-switch {
    border-color: color-mix(in srgb, var(--marketing-border) 90%, transparent);
    background: #FFFFFF;
}

.marketing-header .lang-switch a.is-active,
.marketing-header .site-header__actions > .btn-primary {
    border-color: var(--marketing-navy);
    background: var(--marketing-navy);
    color: #FFFFFF;
}

.marketing-header .theme-toggle,
.marketing-header .nav-toggle {
    border-color: color-mix(in srgb, var(--marketing-border) 90%, transparent);
    color: var(--marketing-navy);
}

.marketing-header .theme-toggle {
    display: grid;
    width: 2.65rem;
    height: 2.65rem;
    place-items: center;
    padding: 0;
    border-radius: 999px;
    background: color-mix(in srgb, #FFFFFF 74%, var(--marketing-paper));
    box-shadow: 0 5px 15px rgba(26, 50, 99, .07);
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.marketing-header .theme-toggle:hover {
    border-color: color-mix(in srgb, var(--marketing-amber) 70%, var(--marketing-border));
    background: #FFFFFF;
    color: var(--marketing-navy-deep);
    transform: translateY(-1px);
}

.marketing-header .theme-toggle:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--marketing-amber) 52%, transparent);
    outline-offset: 3px;
}

.marketing-header .theme-toggle__sun,
.marketing-header .theme-toggle__moon {
    display: grid;
    width: 1.08rem;
    height: 1.08rem;
    grid-area: 1 / 1;
    place-items: center;
    transition: opacity 180ms ease, transform 180ms ease;
}

.marketing-header .theme-toggle svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

/* The icon communicates the action: moon enters dark mode, sun returns to light. */
.marketing-header .theme-toggle__sun {
    opacity: 0;
    transform: rotate(-30deg) scale(.72);
}

.marketing-header .theme-toggle__moon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

html[data-theme="dark"] .marketing-header .theme-toggle__sun {
    opacity: 1;
    transform: rotate(0) scale(1);
}

html[data-theme="dark"] .marketing-header .theme-toggle__moon {
    opacity: 0;
    transform: rotate(30deg) scale(.72);
}

.marketing-header .site-header__actions > .btn-primary:hover {
    border-color: var(--marketing-navy-deep);
    background: var(--marketing-navy-deep);
}

/* ---------- Home and waitlist: retained imagery, cleaner framing ---------- */
.marketing-home-hero {
    margin-top: calc(-1 * var(--homie-header-height, 76px));
    padding-top: calc(var(--homie-header-height, 76px) + clamp(2.1rem, 4.2vw, 4.4rem));
    background: var(--marketing-paper);
}

.marketing-home-hero .hero-v21__title .accent {
    color: var(--marketing-navy);
}

.marketing-home-hero .hero-video-card {
    border-color: rgba(255, 255, 255, .78);
    border-radius: 28px;
    box-shadow: 0 28px 66px rgba(26, 50, 99, .17);
    transform: none;
}

.marketing-home-hero .hero-v21__floating {
    border-color: color-mix(in srgb, var(--marketing-border) 78%, #FFFFFF);
    background: color-mix(in srgb, #FFFFFF 92%, transparent);
}

.marketing-home-hero .btn-primary,
.marketing-waitlist-hero .btn-primary {
    border-color: var(--marketing-navy);
    background: var(--marketing-navy);
}

.marketing-home-hero .btn-primary:hover,
.marketing-waitlist-hero .btn-primary:hover {
    border-color: var(--marketing-navy-deep);
    background: var(--marketing-navy-deep);
}

.marketing-waitlist-hero .wl-form-shell {
    border-top: 4px solid var(--marketing-amber);
    box-shadow: 0 20px 54px rgba(26, 50, 99, .11);
}

/* ---------- Contact: clear routing, one focused conversion surface ---------- */
.subpage-hero.marketing-contact-page {
    background:
        radial-gradient(circle at 88% 0, rgba(250, 185, 91, .18), transparent 28rem),
        var(--marketing-navy);
}

.marketing-contact-renderer {
    position: relative;
    z-index: 2;
    margin-top: clamp(-3.1rem, -5vw, -1.6rem);
    padding-bottom: clamp(4rem, 8vw, 7rem);
}

.marketing-contact {
    display: grid;
    max-width: 1120px;
    gap: 1rem;
}

.marketing-contact .homie-contact__intro {
    margin-bottom: 0;
}

.marketing-contact .homie-contact__intro > div:first-child,
.marketing-contact .homie-contact__routes article,
.marketing-contact .homie-contact__form-card {
    border-color: color-mix(in srgb, var(--marketing-border) 90%, transparent);
    background: #FFFFFF;
    box-shadow: 0 16px 42px rgba(26, 50, 99, .08);
}

.marketing-contact .homie-contact__intro > div:first-child {
    border-radius: 24px;
}

.marketing-contact .homie-contact__intro h2,
.marketing-contact .homie-contact__form-head h3 {
    color: var(--marketing-navy-deep);
}

.marketing-contact .homie-contact__intro p,
.marketing-contact .homie-contact__form-head p {
    color: #4B5563;
}

.marketing-contact .homie-contact__early-access {
    border-color: var(--marketing-navy);
    background: var(--marketing-navy);
    box-shadow: 0 18px 44px rgba(26, 50, 99, .17);
}

.marketing-contact .homie-contact__early-access span {
    color: var(--marketing-amber);
}

.marketing-contact .homie-contact__early-access strong {
    color: #FFFFFF;
}

.marketing-contact .homie-contact__early-access a {
    color: #FFFFFF;
    text-decoration: underline;
    text-decoration-color: var(--marketing-amber);
    text-underline-offset: .3rem;
}

.marketing-contact .homie-contact__routes {
    gap: .85rem;
    margin: 0;
}

.marketing-contact .homie-contact__routes article {
    position: relative;
    overflow: hidden;
    min-height: 10.5rem;
    padding: 1.2rem;
    border-radius: 20px;
}

.marketing-contact .homie-contact__routes article::before {
    position: absolute;
    top: 0;
    right: 1.1rem;
    left: 1.1rem;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: var(--marketing-amber);
    content: "";
}

.marketing-contact .homie-contact__routes article > span {
    margin-top: .45rem;
    color: var(--marketing-navy);
}

.marketing-contact .homie-contact__routes strong {
    color: var(--marketing-navy-deep);
}

.marketing-contact .homie-contact__routes p {
    color: #4B5563;
}

.marketing-contact .homie-contact__form-card {
    padding: clamp(1.35rem, 3.5vw, 2.5rem);
    border-radius: 26px;
}

.marketing-contact .homie-contact__form-head {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--marketing-border) 80%, transparent);
}

.marketing-contact .homie-contact__form label {
    color: var(--marketing-navy-deep);
    font-weight: 750;
}

.marketing-contact .homie-contact__form .input {
    border-color: var(--marketing-border);
    background: #FFFFFF;
    color: var(--marketing-ink);
}

.marketing-contact .homie-contact__form .input:focus {
    border-color: var(--marketing-slate);
    box-shadow: 0 0 0 3px rgba(84, 119, 146, .16);
}

.marketing-contact .homie-contact__submit {
    min-width: min(100%, 13rem);
    border-color: var(--marketing-navy);
    background: var(--marketing-navy);
}

.marketing-contact--sent {
    display: block;
}

.marketing-contact--sent .homie-contact__sent-card {
    margin: 0 auto;
    border-color: color-mix(in srgb, var(--marketing-border) 90%, transparent);
    background: #FFFFFF;
    box-shadow: 0 18px 46px rgba(26, 50, 99, .09);
}

.marketing-contact--sent .homie-contact__sent-icon {
    background: var(--marketing-amber);
    color: var(--marketing-navy-deep);
}

.marketing-contact--sent .homie-contact__sent-card h2 {
    color: var(--marketing-navy-deep);
}

.marketing-contact--sent .homie-contact__sent-card p {
    color: #4B5563;
}

/* Amber is the approachable surface for product benefits. Navy is reserved
   for structure and decisive actions, never used as a blanket card colour. */
.marketing-home-hero ~ .section .step-card,
.marketing-home-hero ~ .section .feature-card,
.waitlist-landing .wl-after__grid article,
.waitlist-landing .wl-role-card,
.waitlist-landing .wl-final,
.waitlist-landing .home-waitlist-teaser {
    border-color: var(--marketing-card-amber-border);
    background: var(--marketing-card-amber);
    box-shadow: 0 14px 36px rgba(26, 50, 99, .08);
}

.marketing-home-hero ~ .section .step-card h3,
.marketing-home-hero ~ .section .feature-card h3,
.waitlist-landing .wl-after__grid strong,
.waitlist-landing .wl-role-card h3,
.waitlist-landing .wl-final h2,
.waitlist-landing .home-waitlist-teaser h2 {
    color: var(--marketing-navy-deep);
}

.marketing-home-hero ~ .section .step-card .muted,
.marketing-home-hero ~ .section .feature-card .muted,
.waitlist-landing .wl-after__grid p,
.waitlist-landing .wl-role-card p,
.waitlist-landing .wl-final p,
.waitlist-landing .home-waitlist-teaser p {
    color: #4B5563;
}

.marketing-home-hero ~ .section .step-card__number,
.marketing-home-hero ~ .section .feature-card__icon {
    background: var(--marketing-amber);
    color: var(--marketing-navy-deep);
}

.marketing-home-hero ~ .section .feature-card__metric,
.waitlist-landing .wl-after__grid article > span,
.waitlist-landing .wl-role-card > span {
    color: var(--marketing-navy);
}

.waitlist-landing .wl-role-card--student,
.waitlist-landing .wl-role-card--landlord,
.waitlist-landing .wl-role-card--partner {
    border-top-color: var(--marketing-amber);
}

.waitlist-landing .wl-role-card > span {
    background: var(--marketing-card-amber-strong);
}

/* ---------- Shared page header ---------- */
.subpage-hero.marketing-page-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 0;
    background: var(--marketing-navy);
}

.subpage-hero.marketing-page-hero::after {
    position: absolute;
    right: clamp(-1rem, 6vw, 6rem);
    bottom: clamp(-5rem, -2vw, -2rem);
    color: rgba(255, 255, 255, .075);
    content: "H";
    font-size: clamp(14rem, 30vw, 30rem);
    font-weight: 900;
    letter-spacing: -.16em;
    line-height: .7;
    pointer-events: none;
}

.marketing-page-hero__inner {
    position: relative;
    z-index: 1;
}

.marketing-page-hero .breadcrumbs,
.marketing-page-hero .breadcrumbs a,
.marketing-page-hero .breadcrumbs span,
.marketing-page-hero .display {
    color: #FFFFFF;
}

.marketing-page-hero .breadcrumbs a {
    color: rgba(255, 255, 255, .7);
}

.marketing-page-hero .breadcrumbs a:hover {
    color: var(--marketing-amber);
}

.marketing-page-hero .eyebrow {
    display: inline-block;
    padding: .32rem .68rem;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #FFFFFF;
    font-size: .7rem;
    letter-spacing: .12em;
}

.marketing-page-hero .subpage-hero__lead {
    color: rgba(255, 255, 255, .78);
}

.marketing-page-hero + .inner-visual-wrap .story-visual,
.marketing-page-hero + .inner-visual-wrap .story-visual__media {
    border-radius: 22px;
}

/* ---------- Footer: a deliberate product signature ---------- */
.marketing-footer-cta {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 26px 26px 0 0;
    background: var(--marketing-navy);
    box-shadow: 0 22px 58px rgba(26, 50, 99, .18);
}

.marketing-footer-cta h2 {
    color: #FFFFFF;
}

.marketing-footer-cta .muted {
    color: rgba(255, 255, 255, .76);
}

.marketing-footer-cta .site-footer__waitlist-cta {
    border-color: var(--marketing-amber);
    background: var(--marketing-amber);
    color: var(--marketing-navy-deep);
    box-shadow: none;
}

.marketing-footer {
    border-top: 0;
    background: #FFFFFF;
    color: var(--marketing-muted);
}

.marketing-footer__inner {
    position: relative;
}

.marketing-footer__signature {
    margin: 0 -.02em clamp(2.4rem, 5vw, 4rem);
    padding-bottom: .12em;
    overflow: hidden;
    border-bottom: 1px solid var(--marketing-border);
    color: color-mix(in srgb, var(--marketing-navy) 9%, transparent);
    font-size: clamp(5rem, 16vw, 12.5rem);
    font-weight: 900;
    letter-spacing: -.1em;
    line-height: .68;
    text-align: center;
    user-select: none;
}

.marketing-footer .site-header__logo,
.marketing-footer .site-header__logo-text,
.marketing-footer .site-footer__group h4 {
    color: var(--marketing-navy);
}

.marketing-footer .site-footer__group h4 {
    font-size: .69rem;
    font-weight: 900;
    letter-spacing: .14em;
}

.marketing-footer .site-footer__group a {
    color: var(--marketing-muted);
    font-weight: 650;
}

.marketing-footer .site-footer__group a:hover {
    color: var(--marketing-navy);
}

.marketing-footer .site-footer__brand .muted {
    color: var(--marketing-muted);
}

.marketing-footer .site-footer__bottom {
    border-color: var(--marketing-border);
}

html[data-theme="dark"] .marketing-header {
    border-bottom-color: rgba(255, 255, 255, .1);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
}

html[data-theme="dark"] .marketing-header .site-header__logo,
html[data-theme="dark"] .marketing-header .main-nav__item > a:hover,
html[data-theme="dark"] .marketing-header .main-nav__item.is-active > a {
    color: #FFFFFF;
}

html[data-theme="dark"] .marketing-header .main-nav__item > a {
    color: #CBD5E1;
}

html[data-theme="dark"] .marketing-header .site-header__logo-icon,
html[data-theme="dark"] .marketing-header .lang-switch {
    border-color: var(--marketing-dark-border);
    background: var(--marketing-dark-surface);
}

html[data-theme="dark"] .marketing-header .theme-toggle {
    border-color: var(--marketing-dark-border);
    background: color-mix(in srgb, var(--marketing-dark-surface) 88%, transparent);
    color: var(--marketing-amber);
    box-shadow: none;
}

html[data-theme="dark"] .marketing-header .theme-toggle:hover {
    border-color: color-mix(in srgb, var(--marketing-amber) 58%, var(--marketing-dark-border));
    background: var(--marketing-dark-surface);
    color: #FFFFFF;
}

html[data-theme="dark"] .marketing-home-hero {
    background: var(--bg);
}

html[data-theme="dark"] .marketing-home-hero .hero-v21__title .accent {
    color: #8FB3FF;
}

html[data-theme="dark"] .marketing-home-hero .hero-v21__floating {
    border-color: var(--marketing-dark-border);
    background: var(--marketing-dark-surface);
}

html[data-theme="dark"] .marketing-home-hero .hero-v21__floating small {
    color: #CBD5E1;
}

html[data-theme="dark"] .subpage-hero.marketing-page-hero,
html[data-theme="dark"] .marketing-footer-cta {
    background: #122544;
}

html[data-theme="dark"] .marketing-footer {
    background: #0B1220;
}

html[data-theme="dark"] .marketing-home-hero ~ .section .step-card,
html[data-theme="dark"] .marketing-home-hero ~ .section .feature-card,
html[data-theme="dark"] .waitlist-landing .wl-after__grid article,
html[data-theme="dark"] .waitlist-landing .wl-role-card,
html[data-theme="dark"] .waitlist-landing .wl-final,
html[data-theme="dark"] .waitlist-landing .home-waitlist-teaser {
    border-color: var(--marketing-dark-border);
    background: var(--marketing-dark-surface);
    box-shadow: none;
}

html[data-theme="dark"] .marketing-home-hero ~ .section .step-card h3,
html[data-theme="dark"] .marketing-home-hero ~ .section .feature-card h3,
html[data-theme="dark"] .waitlist-landing .wl-after__grid strong,
html[data-theme="dark"] .waitlist-landing .wl-role-card h3,
html[data-theme="dark"] .waitlist-landing .wl-final h2,
html[data-theme="dark"] .waitlist-landing .home-waitlist-teaser h2 {
    color: #F8FAFC;
}

html[data-theme="dark"] .marketing-home-hero ~ .section .step-card .muted,
html[data-theme="dark"] .marketing-home-hero ~ .section .feature-card .muted,
html[data-theme="dark"] .waitlist-landing .wl-after__grid p,
html[data-theme="dark"] .waitlist-landing .wl-role-card p,
html[data-theme="dark"] .waitlist-landing .wl-final p,
html[data-theme="dark"] .waitlist-landing .home-waitlist-teaser p {
    color: #CBD5E1;
}

html[data-theme="dark"] .marketing-home-hero ~ .section .step-card__number,
html[data-theme="dark"] .marketing-home-hero ~ .section .feature-card__icon {
    background: var(--marketing-amber);
    color: var(--marketing-navy-deep);
}

html[data-theme="dark"] .marketing-contact .homie-contact__intro > div:first-child,
html[data-theme="dark"] .marketing-contact .homie-contact__routes article,
html[data-theme="dark"] .marketing-contact .homie-contact__form-card {
    border-color: var(--marketing-dark-border);
    background: var(--marketing-dark-surface);
    box-shadow: none;
}

html[data-theme="dark"] .marketing-contact .homie-contact__intro h2,
html[data-theme="dark"] .marketing-contact .homie-contact__form-head h3,
html[data-theme="dark"] .marketing-contact .homie-contact__routes strong,
html[data-theme="dark"] .marketing-contact .homie-contact__form label {
    color: #F8FAFC;
}

html[data-theme="dark"] .marketing-contact .homie-contact__intro p,
html[data-theme="dark"] .marketing-contact .homie-contact__form-head p,
html[data-theme="dark"] .marketing-contact .homie-contact__routes p,
html[data-theme="dark"] .marketing-contact .homie-contact__form small {
    color: #CBD5E1;
}

html[data-theme="dark"] .marketing-contact .homie-contact__routes article > span {
    color: #8FB3FF;
}

html[data-theme="dark"] .marketing-contact .homie-contact__form-head {
    border-bottom-color: var(--marketing-dark-border);
}

html[data-theme="dark"] .marketing-contact .homie-contact__form .input {
    border-color: var(--marketing-dark-border);
    background: #101827;
    color: #F8FAFC;
}

html[data-theme="dark"] .marketing-contact .homie-contact__form .input:focus {
    border-color: #8FB3FF;
    box-shadow: 0 0 0 3px rgba(143, 179, 255, .2);
}

html[data-theme="dark"] .marketing-contact--sent .homie-contact__sent-card {
    border-color: var(--marketing-dark-border);
    background: var(--marketing-dark-surface);
    box-shadow: none;
}

html[data-theme="dark"] .marketing-contact--sent .homie-contact__sent-card h2 {
    color: #F8FAFC;
}

html[data-theme="dark"] .marketing-contact--sent .homie-contact__sent-card p {
    color: #CBD5E1;
}

html[data-theme="dark"] .waitlist-landing .wl-role-card > span {
    background: rgba(250, 185, 91, .14);
    color: var(--marketing-amber);
}

html[data-theme="dark"] .marketing-footer__signature {
    border-color: rgba(255, 255, 255, .12);
    color: rgba(143, 179, 255, .12);
}

html[data-theme="dark"] .marketing-footer .site-header__logo,
html[data-theme="dark"] .marketing-footer .site-header__logo-text,
html[data-theme="dark"] .marketing-footer .site-footer__group h4 {
    color: #FFFFFF;
}

html[data-theme="dark"] .marketing-footer .site-footer__group a,
html[data-theme="dark"] .marketing-footer .site-footer__bottom,
html[data-theme="dark"] .marketing-footer .site-footer__brand .muted {
    color: #B5C0D0;
}

@media (max-width: 760px) {
    .marketing-home-hero {
        padding-top: calc(var(--homie-header-height, 66px) + 1.75rem);
    }

    .marketing-contact-renderer {
        margin-top: -1.35rem;
    }

    .marketing-contact {
        gap: .8rem;
    }

    .marketing-contact .homie-contact__intro > div:first-child,
    .marketing-contact .homie-contact__early-access,
    .marketing-contact .homie-contact__form-card {
        padding: 1.2rem;
        border-radius: 20px;
    }

    .marketing-contact .homie-contact__routes {
        gap: .7rem;
    }

    .marketing-contact .homie-contact__routes article {
        min-height: 0;
        padding: 1rem;
        border-radius: 17px;
    }

    .marketing-contact .homie-contact__submit {
        width: 100%;
    }

    .marketing-page-hero::after {
        right: -.7rem;
        bottom: -3.4rem;
        font-size: 14rem;
    }

    .marketing-footer__signature {
        margin-bottom: 2.4rem;
        font-size: clamp(4.8rem, 21vw, 8rem);
    }

    .marketing-footer-cta {
        margin-left: 1rem;
        margin-right: 1rem;
        border-radius: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .marketing-header,
    .marketing-home-hero .hero-video-card {
        transition: none !important;
    }
}