/* ============================================================ Renter's Vault — Landing Page Styles Design: Evidence Dossier — Navy + Gold, EB Garamond / Lato. Authority from structure and proof; warmth from voice. ============================================================ */ /* Google Fonts loaded via in HTML for performance */ /* --- Design Tokens --- */ :root { --color-primary: #1E3A8A; --color-primary-light: #2B4FA8; --color-primary-dark: #152C6B; --color-on-primary: #FFFFFF; --color-accent: #B45309; --color-accent-light: #D97706; --color-accent-hover: #92400E; --color-background: #F8FAFC; --color-foreground: #0F172A; --color-muted: #64748B; --color-muted-light: #94A3B8; --color-surface: #FFFFFF; --color-surface-alt: #F1F5F9; --color-border: #CBD5E1; --color-border-light: #E2E8F0; --color-destructive: #DC2626; --color-success: #059669; --font-display: 'EB Garamond', Georgia, 'Times New Roman', serif; --font-body: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 40px; --spacing-3xl: 48px; --spacing-4xl: 56px; --spacing-5xl: 80px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.1); --shadow-xl: 0 20px 48px rgba(15, 23, 42, 0.12); --max-width: 1140px; --transition: 200ms ease; /* Decimal-aligned figures across prices and metadata */ font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* --- Reset --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--color-foreground); background: var(--color-background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--color-accent); } a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; } /* --- Accessibility helpers --- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 50%; top: -48px; transform: translateX(-50%); z-index: 200; background: var(--color-primary); color: var(--color-on-primary); font-family: var(--font-body); font-size: 0.875rem; font-weight: 700; padding: 10px 18px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); transition: top var(--transition); } .skip-link:focus { top: 0; color: var(--color-on-primary); } /* --- Scroll offset for sticky header --- */ [id] { scroll-margin-top: 88px; } /* --- Layout --- */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing-lg); } /* --- Header --- */ header { position: sticky; top: 0; z-index: 100; background: rgba(248, 250, 252, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border-light); } .header-inner { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md) 0; } .logo { display: flex; align-items: center; gap: var(--spacing-sm); font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--color-primary); text-decoration: none; letter-spacing: -0.01em; } .logo:hover { color: var(--color-primary-light); } .logo-icon { width: 36px; height: 36px; border-radius: 8px; } nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--spacing-md); } nav a { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; color: var(--color-muted); text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 2px; position: relative; transition: color var(--transition); } nav a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--color-accent); transition: width var(--transition); } nav a:hover { color: var(--color-primary); } nav a:hover::after { width: 100%; } /* ============================================================ HERO ============================================================ */ .hero { padding: var(--spacing-3xl) 0 var(--spacing-4xl); background: var(--color-background); } .hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-3xl); align-items: center; } .hero-eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--spacing-md); padding-left: 14px; border-left: 3px solid var(--color-accent); line-height: 1.2; } .hero h1 { font-family: var(--font-display); font-size: 2.5rem; font-weight: 600; color: var(--color-primary); line-height: 1.12; letter-spacing: -0.02em; margin-bottom: var(--spacing-md); } .hero-tagline { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 400; font-style: italic; color: var(--color-foreground); line-height: 1.5; max-width: 60ch; margin-bottom: var(--spacing-lg); } .hero-proof { list-style: none; display: flex; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-lg); padding: var(--spacing-md) 0; margin-bottom: var(--spacing-xl); border-top: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border-light); } .hero-proof li { position: relative; padding-left: 22px; font-size: 0.875rem; font-weight: 700; color: var(--color-foreground); } .hero-proof li::before { content: ''; position: absolute; left: 0; top: 3px; width: 15px; height: 15px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B45309' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } .hero-cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); } .play-badge-link { display: inline-flex; min-height: 56px; align-items: center; } .play-badge { height: 56px; width: auto; display: inline-block; cursor: pointer; transition: transform var(--transition), opacity var(--transition); } .play-badge-link:hover .play-badge { transform: scale(1.03); opacity: 0.92; } .play-badge-link:active .play-badge { transform: scale(0.98); } .hero-price { font-size: 0.875rem; font-weight: 700; color: var(--color-accent); letter-spacing: 0.01em; } /* --- Hero evidence card (pure CSS/SVG) --- */ .evidence-card { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); max-width: 420px; width: 100%; margin: 0 auto; transform: rotate(-1.1deg); transition: transform var(--transition), box-shadow var(--transition); } .evidence-tab { display: flex; align-items: baseline; gap: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--color-border-light); } .evidence-tab-id { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent); } .evidence-tab-sub { font-family: var(--font-display); font-style: italic; font-size: 0.9375rem; color: var(--color-muted); } .evidence-body { padding: var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-md); } .evidence-thumb { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md); background: var(--color-surface-alt); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); } .evidence-thumb svg { width: 22px; height: 22px; stroke: var(--color-primary); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .evidence-meta { display: flex; flex-direction: column; } .evidence-meta > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-md); padding: 9px 0; border-bottom: 1px solid var(--color-border-light); } .evidence-meta dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); flex-shrink: 0; } .evidence-meta dd { font-size: 0.8125rem; color: var(--color-foreground); text-align: right; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .evidence-meta div:first-child dd { color: var(--color-accent); } .evidence-seal { display: flex; align-items: center; gap: var(--spacing-sm); margin-top: var(--spacing-xs); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-success); } .evidence-seal svg { width: 20px; height: 20px; stroke: var(--color-success); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .evidence-caption { padding: 0 var(--spacing-lg) var(--spacing-md); font-family: var(--font-display); font-style: italic; font-size: 0.8125rem; color: var(--color-muted); } .evidence-caption a { color: var(--color-primary); text-decoration: underline; text-decoration-color: var(--color-border); text-underline-offset: 2px; } .evidence-caption a:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); } /* ============================================================ SECTION HEADINGS ============================================================ */ .section-header { text-align: center; max-width: 640px; margin: 0 auto var(--spacing-2xl); } .section-label { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--spacing-sm); } .section-title { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--color-foreground); line-height: 1.2; letter-spacing: -0.015em; } .section-subtitle { font-size: 1.0625rem; color: var(--color-muted); line-height: 1.6; max-width: 56ch; margin: var(--spacing-sm) auto 0; } /* --- Hairline section rhythm: one continuous document --- */ .features, .how-it-works, .pricing, .state-packs { padding: var(--spacing-5xl) 0; background: var(--color-background); border-top: 1px solid var(--color-border-light); } /* ============================================================ FEATURES — exhibit definition list ============================================================ */ .exhibit-list { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--color-border); } .exhibit { display: grid; grid-template-columns: 1fr; gap: var(--spacing-xs) var(--spacing-xl); padding: var(--spacing-xl) 0; border-bottom: 1px solid var(--color-border); } .exhibit-num { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent); padding-top: 6px; } .exhibit dt { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; color: var(--color-foreground); line-height: 1.25; margin-bottom: var(--spacing-xs); } .exhibit dd { font-size: 1rem; color: var(--color-muted); line-height: 1.7; max-width: 60ch; } /* ============================================================ HOW IT WORKS ============================================================ */ .steps { list-style: none; display: grid; grid-template-columns: 1fr; gap: var(--spacing-xl); max-width: 760px; margin: 0 auto; } .step { position: relative; padding-left: 68px; } .step-number { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--color-surface); border: 1.5px solid var(--color-primary); color: var(--color-primary); font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; } .step h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--color-foreground); margin-bottom: var(--spacing-xs); padding-top: 10px; } .step p { font-size: 1rem; color: var(--color-muted); line-height: 1.7; max-width: 56ch; } /* ============================================================ PRICING — comparison table (the ledger) ============================================================ */ .pricing-table-wrap { max-width: 920px; margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; } .pricing-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.9375rem; } .pricing-table .pt-col-feature { width: 34%; } .pricing-table thead th, .pricing-table thead td { vertical-align: bottom; padding: var(--spacing-lg) var(--spacing-md); text-align: center; border-bottom: 1.5px solid var(--color-border); } .pricing-table .pt-corner { border-bottom: 1.5px solid var(--color-border); } .pt-recommend { display: inline-block; background: var(--color-accent); color: var(--color-on-primary); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 12px; border-radius: 100px; margin-bottom: var(--spacing-sm); } .pt-tier { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--color-foreground); } .pt-price { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--color-primary); line-height: 1.1; margin-top: var(--spacing-xs); font-variant-numeric: tabular-nums; } .pt-per { font-size: 0.875rem; font-weight: 400; color: var(--color-muted); } .pt-note { display: block; font-size: 0.75rem; color: var(--color-muted); margin-top: var(--spacing-xs); min-height: 2.4em; } .pricing-table tbody th { text-align: left; font-weight: 400; font-size: 0.9375rem; color: var(--color-foreground); padding: 12px var(--spacing-md) 12px 0; border-bottom: 1px solid var(--color-border-light); } .pricing-table tbody td { text-align: center; padding: 12px var(--spacing-md); border-bottom: 1px solid var(--color-border-light); color: var(--color-muted); } .pricing-table tbody td.pt-value { font-weight: 700; color: var(--color-foreground); } /* Included / not-included cell markers */ .pricing-table .yes, .pricing-table .no { display: inline-block; font-size: 0; line-height: 1; } .pricing-table .yes::before { content: ''; display: inline-block; width: 20px; height: 20px; vertical-align: middle; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } .pricing-table .no::before { content: '—'; font-size: 1rem; color: var(--color-muted-light); vertical-align: middle; } /* Featured (Lease Pass) column emphasis */ .pricing-table th.pt-featured, .pricing-table td.pt-featured { border-left: 2px solid var(--color-accent); border-right: 2px solid var(--color-accent); background: rgba(180, 83, 9, 0.04); } .pricing-table thead th.pt-featured { border-top: 2px solid var(--color-accent); border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .pricing-table tbody tr:last-child td.pt-featured { border-bottom: 2px solid var(--color-accent); border-radius: 0 0 var(--radius-sm) var(--radius-sm); } .pricing-tagline { text-align: center; margin-top: var(--spacing-2xl); font-family: var(--font-display); font-style: italic; font-size: 1.0625rem; color: var(--color-muted); } /* ============================================================ STATE LAW PACKS ============================================================ */ .state-packs-card { max-width: 720px; margin: 0 auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--spacing-xl) var(--spacing-lg); box-shadow: var(--shadow-sm); } .state-packs-included { text-align: center; font-family: var(--font-display); font-style: italic; font-size: 1.0625rem; color: var(--color-foreground); padding-bottom: var(--spacing-lg); margin-bottom: var(--spacing-lg); border-bottom: 1px solid var(--color-border-light); } .state-packs-available { margin-bottom: var(--spacing-lg); } .state-packs-available-label { display: block; text-align: center; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--spacing-md); } .state-chip-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-sm); } .state-chip { display: inline-flex; align-items: center; padding: 6px 16px; background: var(--color-primary); color: var(--color-on-primary); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 100px; white-space: nowrap; text-decoration: none; border: none; } .state-packs-inside h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--color-foreground); margin-bottom: var(--spacing-md); text-align: center; } .checklist { list-style: none; max-width: 560px; margin: 0 auto; padding: 0; } .checklist li { position: relative; padding-left: 28px; padding-top: 6px; padding-bottom: 6px; font-size: 0.9375rem; color: var(--color-foreground); line-height: 1.5; } .checklist li::before { content: ''; position: absolute; left: 0; top: 12px; width: 18px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } /* ============================================================ DOWNLOAD CTA — the quietest moment ============================================================ */ .download { padding: var(--spacing-5xl) 0; text-align: center; background: var(--color-background); border-top: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border-light); } .download .container { max-width: 640px; } .download h2 { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--color-primary); line-height: 1.2; margin-bottom: var(--spacing-md); } .download p { font-size: 1.0625rem; color: var(--color-muted); max-width: 52ch; margin: 0 auto var(--spacing-xl); line-height: 1.6; } .download .play-badge-link { justify-content: center; } .download .play-badge { height: 60px; } .download-sub { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted) !important; margin-top: var(--spacing-md); margin-bottom: 0 !important; } /* --- Footer --- */ footer { padding: var(--spacing-xl) 0; background: var(--color-foreground); color: rgba(255, 255, 255, 0.5); } .footer-inner { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-md); text-align: center; } .footer-copy { font-size: 0.8125rem; order: 2; } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-md); order: 1; } .footer-links a { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color var(--transition); } .footer-links a:hover { color: rgba(255, 255, 255, 0.95); } /* ============================================================ DELETE DATA PAGE ============================================================ */ .delete-hero { padding: var(--spacing-3xl) 0 var(--spacing-2xl); text-align: center; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(30, 58, 138, 0.06) 0%, transparent 70%), linear-gradient(180deg, var(--color-background) 0%, var(--color-surface) 100%); } .delete-hero h1 { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--color-primary); margin-bottom: var(--spacing-md); } .delete-hero p { font-size: 1.0625rem; color: var(--color-muted); line-height: 1.6; max-width: 580px; margin: 0 auto; } .delete-content { padding: var(--spacing-2xl) 0 var(--spacing-4xl); } .delete-container { max-width: 760px; } .delete-section { background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: var(--spacing-xl) var(--spacing-lg); margin-bottom: var(--spacing-lg); } .delete-section h2 { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; color: var(--color-foreground); display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); } .delete-section h2 .icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-on-primary); flex-shrink: 0; } .delete-section h2 .icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .delete-section p, .delete-section li { font-size: 0.9375rem; color: var(--color-muted); line-height: 1.7; } .delete-section ul, .delete-section ol { margin: var(--spacing-md) 0; padding-left: var(--spacing-lg); } .delete-section li { margin-bottom: var(--spacing-sm); } .delete-section a { color: var(--color-primary); font-weight: 500; } .delete-section .note { background: var(--color-surface-alt); border-left: 3px solid var(--color-accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: var(--spacing-md); margin-top: var(--spacing-md); font-size: 0.875rem; color: var(--color-muted); line-height: 1.6; } .delete-section .mt-sm { margin-top: 12px; } .delete-section .mt-xs { margin-top: 10px; } .delete-section .contact-link { font-size: 1rem; } .delete-section code { font-family: var(--font-mono); font-size: 0.8125rem; background: var(--color-surface-alt); padding: 2px 6px; border-radius: 3px; color: var(--color-foreground); } .delete-section pre { margin: 12px 0 0; padding: 16px 18px; background: var(--color-surface-alt); border-radius: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .delete-section pre code { display: block; padding: 0; background: transparent; border-radius: 0; font-size: 0.8125rem; line-height: 1.55; white-space: pre; color: var(--color-foreground); } /* ============================================================ ANIMATIONS ============================================================ */ @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .hero-copy { animation: fadeSlideUp 0.6s ease both; } .evidence-card { animation: fadeSlideUp 0.6s ease 0.15s both; } @media (hover: hover) { .evidence-card:hover { transform: rotate(0deg) translateY(-4px); box-shadow: var(--shadow-xl); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } .evidence-card { transform: none; } } /* ============================================================ RESPONSIVE ============================================================ */ /* Tablet (768px+) */ @media (min-width: 768px) { .header-inner { flex-direction: row; justify-content: space-between; } .logo { font-size: 1.375rem; } nav { gap: var(--spacing-lg); } .hero { padding: var(--spacing-4xl) 0 var(--spacing-5xl); } .hero h1 { font-size: 3.25rem; } .hero-tagline { font-size: 1.3125rem; } .exhibit { grid-template-columns: 132px 1fr; } .exhibit-num { grid-column: 1; grid-row: 1; text-align: right; padding-top: 8px; } .exhibit dt { grid-column: 2; grid-row: 1; } .exhibit dd { grid-column: 2; grid-row: 2; } .steps { gap: var(--spacing-2xl); } .footer-inner { flex-direction: row; justify-content: space-between; } .footer-copy { order: 0; } .footer-links { order: 0; gap: var(--spacing-lg); } .delete-section { padding: var(--spacing-xl); } .delete-hero { padding: var(--spacing-4xl) 0 var(--spacing-2xl); } .delete-hero h1 { font-size: 2.5rem; } } /* Desktop (1024px+) */ @media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--spacing-4xl); } .hero h1 { font-size: 3.5rem; } .hero-tagline { font-size: 1.375rem; } .section-title { font-size: 2.5rem; } .download h2 { font-size: 2.5rem; } }