/* Homepage composition; shared styles continue to own navigation and form behavior. */
.home-page {
    --product-accent-rgb: 98, 216, 189;
    --product-surface: #151e2c;
    --product-shadow: 0 24px 58px -24px rgba(0, 0, 0, .65);
    --home-violet: #c0a4ff;
    --home-tint: rgba(98, 216, 189, .03);
}
.ps-light .home-page {
    --product-accent-rgb: 8, 119, 101;
    --product-surface: #fff;
    --product-shadow: 0 22px 50px -28px rgba(35, 53, 76, .38);
    --home-violet: #6d3ab5;
    --home-tint: rgba(8, 119, 101, .035);
}
.home-page .story-container,
.home-page .story-section { width: min(1320px, calc(100% - 80px)); }
.home-page .story-hero { position: relative; isolation: isolate; padding-block: 132px 72px; }
.home-page .story-hero::before {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    inset: 60px -120px 25%;
    background: radial-gradient(ellipse at 80% 28%, rgba(98, 216, 189, .045), transparent 52%),
                radial-gradient(ellipse at 50% 48%, rgba(164, 130, 240, .075), transparent 58%);
}
.home-page .home-hero-grid {
    grid-template-columns: .88fr 1.12fr;
    align-items: center; gap: clamp(28px, 3.5vw, 52px);
}
.home-page .home-hero-grid > *,
.home-page .story-split > *,
.home-page .story-hero-signup > * { min-width: 0; }
.home-page h1 {
    font-size: clamp(2.65rem, 4.15vw, 3.9rem);
    max-width: 18ch; margin-block: 8px 24px;
}
.home-page .story-hero .story-lead { font-size: 1.125rem; line-height: 1.8; }
.home-page .story-actions { margin-block: 28px 0; gap: 12px 24px; }
.home-page .story-mobile-cta { display: inline-flex; }
.home-page .story-actions a { min-height: 44px; align-items: center; }
.home-page .story-actions .story-text-link { display: inline-flex; gap: 6px; margin: 0; }
.home-page .home-hero-media { margin: 0; }
.home-page .home-hero-media .product-image-link {
    padding: 12px; border-radius: 22px;
    background: linear-gradient(145deg, rgba(98, 216, 189, .045), rgba(164, 130, 240, .06));
}
.home-page .home-hero-media img { border: 0; }
.home-page .home-hero-media figcaption { margin: 0; padding: 16px 4px 0; font-size: .8125rem; }
.home-page .story-hero-signup {
    display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: center;
    margin-top: 52px; padding: 32px 36px;
    border: 1px solid var(--story-line); border-radius: 22px;
    background: var(--product-surface); box-shadow: var(--product-shadow);
}
.home-page .home-signup-copy { max-width: 40ch; }
.home-page .home-signup-copy .story-kicker { margin-bottom: 12px; }
.home-page .home-signup-copy h2 { font-size: 1.9rem; }
.home-page .home-signup-copy p { margin-bottom: 0; font-size: 1rem; }
.home-page .home-signup-copy .story-note { margin-top: 14px; font-size: .875rem; }
.home-page .story-hero-signup .newsletter-form-row { flex-direction: row; align-items: end; }
.home-page .story-hero-signup .newsletter-field { flex: 1 1 200px; }
.home-page .newsletter-form { margin: 0; max-width: none; }
.home-page .newsletter-submit { padding-inline: 22px; }
.home-page .newsletter-provider { margin-bottom: 0; }
.home-page .story-section { padding-block: 80px; }
.home-page .story-split { grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 7vw, 104px); }
.home-page .story-section h2 { max-width: 20ch; }
.home-page .story-section .story-kicker { margin-bottom: 18px; }
.home-page .home-local .story-split > :first-child::after {
    content: ''; display: block; width: 88px; height: 3px; margin-top: 32px;
    background: linear-gradient(90deg, var(--story-accent), var(--home-violet)); border-radius: 3px;
}
.home-page .story-prose > p:last-of-type { margin-bottom: 20px; }
.home-page .story-prose > .story-text-link,
.home-page .story-chapters article > a { display: inline-flex; align-items: center; min-height: 44px; }
.home-page .home-understand {
    padding: clamp(28px, 4.5vw, 60px); border: 1px solid var(--story-line); border-radius: 24px;
    background: linear-gradient(120deg, rgba(164, 130, 240, .055), var(--home-tint));
    margin-bottom: 40px;
}
.home-page .home-understand .story-split { gap: clamp(36px, 5vw, 72px); align-items: center; }
.home-page .home-understand .story-kicker { color: var(--home-violet); }
.home-page .home-roadmap { border-top: 0; padding-top: 48px; }
.home-page .home-roadmap .story-split { grid-template-columns: .75fr 1.25fr; gap: 64px; }
.home-page .story-chapters { display: grid; gap: 20px; }
.home-page .story-chapters article {
    position: relative; padding: 30px 32px; margin: 0;
    border: 1px solid var(--story-line); border-radius: 18px;
    background: var(--product-surface);
}
.home-page .story-chapters article::before {
    content: ''; position: absolute; inset: 30px auto 30px 0; width: 3px;
    border-radius: 3px; background: var(--home-violet); opacity: .65;
}
.home-page .story-chapters article + article { margin: 0; padding: 30px 32px; border: 1px solid var(--story-line); }
.home-page .story-chapters article + article::before { background: var(--story-accent); }
.home-page .story-chapters article p { font-size: 1rem; }
.home-page .home-founder { padding-block: 76px; }
.home-page .home-founder .story-prose { border-left: 2px solid var(--story-line); padding-left: 32px; }
.home-page .story-signup {
    border: 1px solid var(--story-line); border-radius: 24px;
    padding: clamp(28px, 4.5vw, 60px); margin-bottom: 80px;
    background: radial-gradient(ellipse at top left, rgba(98, 216, 189, .04), transparent 70%), var(--product-surface);
}
.home-page .story-signup .story-split { align-items: center; gap: 48px; }
.home-page .story-signup h2 { max-width: 18ch; }
.home-page .story-signup .newsletter-form-row { flex-direction: column; align-items: stretch; }
.home-page .story-signup .newsletter-field,
.home-page .story-signup .newsletter-submit { flex: none; }
.home-page :focus-visible { outline: 2px solid var(--story-accent); outline-offset: 5px; }
@media (max-width: 1100px) {
    .home-page .story-container, .home-page .story-section { width: calc(100% - 56px); }
    .home-page .story-hero { padding-top: 120px; }
    .home-page h1 { font-size: 2.7rem; }
    .home-page .story-hero-signup { gap: 32px; padding: 28px; }
    .home-page .story-hero-signup .newsletter-form-row { flex-direction: column; align-items: stretch; }
    .home-page .story-hero-signup .newsletter-field { flex: none; }
    .home-page .home-roadmap .story-split { gap: 40px; }
}
@media (max-width: 800px) {
    .home-page .home-hero-grid, .home-page .story-hero-signup,
    .home-page .story-split, .home-page .home-roadmap .story-split { grid-template-columns: 1fr; gap: 32px; }
    .home-page .home-hero-copy { max-width: 640px; }
    .home-page h1 { max-width: 21ch; font-size: clamp(2.5rem, 6.5vw, 3.3rem); }
    .home-page .story-hero-signup { margin-top: 36px; }
    .home-page .home-signup-copy { max-width: none; }
    .home-page .story-section { padding-block: 52px; }
    .home-page .home-understand, .home-page .story-signup { padding: 32px; }
    .home-page .home-understand { margin-bottom: 0; }
    .home-page .home-founder .story-prose { padding-left: 24px; }
    .home-page .story-signup { margin-bottom: 52px; }
}
@media (max-width: 480px) {
    .home-page .story-container, .home-page .story-section { width: calc(100% - 40px); }
    .home-page .story-hero { padding-block: 104px 44px; }
    .home-page h1 { font-size: 2.3rem; }
    .home-page .story-hero .story-lead { font-size: 1rem; }
    .home-page .story-hero > .story-kicker { font-size: .8125rem; }
    .home-page .story-actions { gap: 14px; margin-top: 22px; }
    .home-page .story-actions .btn { width: 100%; justify-content: center; }
    .home-page .home-hero-media .product-image-link { padding: 8px; border-radius: 16px; }
    .home-page .story-hero-signup, .home-page .home-understand,
    .home-page .story-signup { padding: 24px; }
    .home-page .story-chapters article, .home-page .story-chapters article + article { padding: 26px; }
    .home-page .story-section h2 { font-size: 2rem; }
    .home-page .home-founder .story-prose { padding-left: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-page *, .home-page *::before, .home-page *::after {
        scroll-behavior: auto; animation: none; transition: none;
    }
    .home-page .btn:hover { transform: none; }
}