/* ========================================================= 50-pages/home.css Home page only Page-specific overrides and home-only sections ========================================================= */ /* ========================= HOME PAGE WRAPPER Optional: use on or main wrapper Example: ========================= */ .page-home main { padding-bottom: var(--space-10); } /* ========================= HOME HEADER TWEAKS ========================= */ .page-home header h1, .page-home .site-header h1 { margin-bottom: var(--space-1); } .page-home .subtitle { max-width: 900px; margin-inline: auto; } /* ========================= HERO - HOME-SPECIFIC ========================= */ .page-home .hero { margin-top: var(--space-8); } .page-home .hero-content > *:last-child { margin-bottom: 0; } .page-home .hero p:last-of-type { margin-bottom: 0; } /* Optional home hero emphasis */ .page-home .hero-quote { max-width: 760px; } /* ========================= HOME INTRO / NARRATIVE ========================= */ .page-home .narrative-block { max-width: 950px; } .profile-img { max-width: var(--profile-image-max); width: 100%; height: auto; margin: 0 auto 30px; display: block; border: var(--border-width-base) solid var(--color-brand); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); } /* ========================= FEATURE SECTION - HOME ONLY ========================= */ .page-home .feature-grid { align-items: stretch; } .page-home .feature-item { min-height: 100%; } .page-home .feature-item h3 { color: var(--color-text); margin-top: var(--space-3); margin-bottom: var(--space-2); border: 0; padding-left: 0; } .page-home .feature-item p:last-child { margin-bottom: 0; } /* ========================= PRICING SECTION - HOME ONLY ========================= */ .page-home .pricing-grid { align-items: stretch; } .page-home .pricing-card { display: flex; flex-direction: column; justify-content: flex-start; min-height: 100%; } .page-home .pricing-card > *:last-child { margin-bottom: 0; } .page-home .pricing-card .description { flex-grow: 1; } .page-home .price { line-height: 1.1; } .page-home .currency-links { margin-top: auto; padding-top: var(--space-3); } /* ========================= SECTION TITLE TWEAKS ========================= */ .page-home .section-title { max-width: 800px; margin-left: auto; margin-right: auto; } /* ========================= OTHER COUNTRIES NOTE ========================= */ .page-home .other-countries-note p:last-child { margin-bottom: 0; } /* ========================= STORY INVITE ========================= */ .page-home .story-invite .btn-group, .page-home .story-invite .cluster-center { margin-top: var(--space-5); } .page-home .story-invite p:last-of-type { margin-bottom: 0; } /* ========================= FAQ - HOME ONLY ========================= */ .page-home .faq { max-width: 950px; margin-left: auto; margin-right: auto; } .page-home .faq-item:last-child { margin-bottom: 0; } .page-home .faq-answer p:last-child { margin-bottom: 0; } /* ========================= WAITLIST / SIGNUP ========================= */ .page-home .waitlist-form { max-width: 760px; } .page-home .waitlist-form .btn, .page-home .waitlist-form .btn-small { flex: 0 0 auto; } .page-home .waitlist-input { min-height: 48px; } .page-home .btn-small { min-height: 48px; } /* ========================= HOME SIGNATURE BLOCK ========================= */ .page-home .signature { max-width: 850px; margin-left: auto; margin-right: auto; } /* ========================= HOME SECTION SPACING REFINEMENTS ========================= */ .page-home .hero + .narrative-block { margin-top: 0; } .page-home .section-divider + .section-title { margin-top: 0; } /* ========================= TABLET ========================= */ @media (max-width: 1024px) { .page-home .hero-quote { max-width: 100%; } .page-home .pricing-card { padding: var(--card-padding); } } /* ========================= MOBILE ========================= */ @media (max-width: 768px) { .page-home main { padding-bottom: var(--space-8); } .page-home .hero { margin-top: var(--space-6); } .page-home .feature-item h3 { font-size: 1.15rem; } .page-home .pricing-card h2 { font-size: 1.5rem; } .page-home .price { font-size: 1.75rem; } .page-home .waitlist-form { max-width: 100%; } .page-home .waitlist-form .btn, .page-home .waitlist-form .btn-small { width: 100%; } .page-home .currency-links { width: 100%; } .page-home .currency-link { min-width: 170px; } } /* ========================= SMALL MOBILE ========================= */ @media (max-width: 480px) { .page-home .hero { padding: 20px 16px; } .page-home .narrative-block, .page-home .story-invite, .page-home .signature, .page-home .other-countries-note { padding: 20px 16px; } .page-home .pricing-card, .page-home .feature-item, .page-home .faq-item { padding: 18px 16px; } .page-home .price { font-size: 1.6rem; } }