/**
 * home.php — public marketing sections.
 * Section rhythm via background tints only (no section rules). Tokens in design-system.css.
 */

body.home-smileway-landing {
    background-color: var(--color-bg-canvas);
}

/* —— Full-bleed sections + rhythm —— */
body.home-smileway-landing .home-section {
    width: 100%;
}

body.home-smileway-landing .home-section__inner {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--space-5);
}

body.home-smileway-landing .home-section--hero {
    background-color: var(--color-primary-50);
    padding-bottom: clamp(var(--space-10), 6vw, var(--space-14));
}

body.home-smileway-landing .home-section--utility {
    background-color: var(--color-bg-section-utility);
    padding-block: clamp(var(--space-8), 5vw, var(--space-12));
}

body.home-smileway-landing .home-section--capabilities {
    background-color: var(--color-bg-section-capabilities);
    padding-block: clamp(var(--space-12), 8vw, var(--space-16));
}

body.home-smileway-landing .home-section--pricing {
    background-color: var(--color-bg-section-pricing);
    padding-block: clamp(var(--space-14), 9vw, 7rem);
}

body.home-smileway-landing .home-section--network {
    background-color: var(--color-bg-section-network);
    padding-block: clamp(var(--space-10), 6vw, var(--space-12));
}

body.home-smileway-landing .home-section--footer {
    background-color: var(--color-bg-canvas);
}

/* —— Hero atmosphere —— */
body.home-smileway-landing .home-hero {
    position: relative;
    isolation: isolate;
    background-color: transparent;
    overflow: hidden;
}

body.home-smileway-landing .home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse 90% 75% at 92% 8%,
            color-mix(in oklch, var(--color-primary-400) 18%, transparent),
            transparent 55%
        ),
        radial-gradient(
            ellipse 65% 50% at 8% 92%,
            color-mix(in oklch, var(--color-primary-300) 25%, transparent),
            transparent 58%
        ),
        linear-gradient(180deg, var(--color-primary-50) 0%, var(--color-primary-100) 88%);
}

body.home-smileway-landing .home-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.28;
    background-image: radial-gradient(
        circle at center,
        oklch(0.45 0.04 264 / 0.12) 1px,
        transparent 1px
    );
    background-size: 24px 24px;
    mask-image: linear-gradient(180deg, black 0%, transparent 92%);
}

body.home-smileway-landing .home-hero__inner {
    position: relative;
    z-index: 1;
}

body.home-smileway-landing .home-hero-subtitle {
    max-width: 36rem;
}

body.home-smileway-landing .home-hero-slideshow-frame {
    border-color: var(--color-primary-300) !important;
    box-shadow: var(--shadow-md);
}

body.home-smileway-landing .hero-dot.is-active {
    background-color: var(--color-primary-600) !important;
}

/* —— Capabilities header (left-aligned) —— */
body.home-smileway-landing .home-section-head {
    margin-bottom: var(--space-8);
    max-width: 40rem;
}

body.home-smileway-landing .home-section-head--center {
    margin-inline: auto;
    max-width: 42rem;
    text-align: center;
}

body.home-smileway-landing .home-section-head--center .home-section-subtitle {
    margin-inline: auto;
}

body.home-smileway-landing .home-feature-card {
    background-color: var(--color-bg-white) !important;
    border: none !important;
    box-shadow: none;
}

body.home-smileway-landing .home-feature-interactive {
    transition: background-color var(--transition-base);
}

body.home-smileway-landing .home-feature-interactive:hover {
    background-color: color-mix(in oklch, var(--color-bg-white) 88%, var(--color-primary-100)) !important;
}

body.home-smileway-landing .home-feature-chip-interactive {
    transition: opacity var(--transition-base);
}

body.home-smileway-landing .home-feature-chip-interactive:hover {
    opacity: 0.88;
}

/* —— Pricing: flat tiles, equal column height, no card borders —— */
body.home-smileway-landing .home-plans-grid {
    align-items: stretch;
}

body.home-smileway-landing .home-plans-grid > .home-plan-card {
    height: 100%;
}

body.home-smileway-landing .home-plan-card--standard {
    background-color: var(--color-bg-white) !important;
    border: none !important;
    box-shadow: none;
}

body.home-smileway-landing .home-plan-card--featured {
    border: none !important;
    box-shadow: none;
}

body.home-smileway-landing .home-plan-card .plan-features {
    flex: 1 1 auto;
}

body.home-smileway-landing .home-plan-btn {
    transition:
        background-color var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base);
}

/* —— Network full-bleed panel —— */
body.home-smileway-landing .home-network-panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--color-primary-900);
    padding: var(--space-6);
    color: var(--color-text-on-primary);
}

@media (min-width: 768px) {
    body.home-smileway-landing .home-network-panel {
        padding: var(--space-7);
    }
}

body.home-smileway-landing .home-network-copy {
    position: relative;
    z-index: 1;
}

body.home-smileway-landing .home-network-nodes {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 140px;
    height: 100px;
    opacity: 0.35;
    pointer-events: none;
    color: var(--color-primary-500);
}

@media (min-width: 768px) {
    body.home-smileway-landing .home-network-nodes {
        top: var(--space-6);
        right: 42%;
        width: 180px;
        height: 120px;
    }
}

body.home-smileway-landing .home-network-card-shell {
    border: 1px solid var(--color-primary-700);
    border-radius: var(--radius-lg);
    background: var(--color-primary-800);
    padding: var(--space-4);
}

@media (min-width: 768px) {
    body.home-smileway-landing .home-network-card-shell {
        padding: var(--space-5);
    }
}

body.home-smileway-landing .home-network-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-primary-700);
    border-radius: var(--radius-md);
    background: var(--color-primary-900);
}

body.home-smileway-landing .home-network-footer-copy {
    margin: var(--space-6) 0 0;
    padding-top: var(--space-5);
    border-top: 1px solid color-mix(in oklch, var(--color-primary-700) 60%, transparent);
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-primary-200);
}

body.home-smileway-landing .home-network-footer-copy a {
    color: var(--color-primary-300);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.home-smileway-landing .home-network-footer-copy a:hover {
    color: var(--color-text-on-primary);
}

/* Install utility */
body.home-smileway-landing .home-install-panel {
    border: none !important;
    background-color: var(--color-bg-white) !important;
    box-shadow: none;
}

body.home-smileway-landing .home-install-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

body.home-smileway-landing .home-install-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-primary-300);
    background: var(--color-primary-50);
    color: var(--color-primary-600);
}

body.home-smileway-landing .home-install-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* —— Hero entrance —— */
body.home-smileway-landing .home-hero-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

body.home-smileway-landing .home-hero.is-ready .home-hero-reveal {
    opacity: 1;
    transform: translateY(0);
}

body.home-smileway-landing .home-hero.is-ready .home-hero-reveal[data-reveal-delay="1"] {
    transition-delay: 0.08s;
}

body.home-smileway-landing .home-hero.is-ready .home-hero-reveal[data-reveal-delay="2"] {
    transition-delay: 0.16s;
}

body.home-smileway-landing .home-hero.is-ready .home-hero-reveal[data-reveal-delay="3"] {
    transition-delay: 0.24s;
}

@media (prefers-reduced-motion: reduce) {
    body.home-smileway-landing .home-hero-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}