/* ═══════════════════════════════════════════ CONSERVI.US — MOBILE FIRST OVERRIDES Applies to all pages via in ═══════════════════════════════════════════ */ /* ── BASE RESETS ── */ *, *::before, *::after { box-sizing: border-box; } img, video { max-width: 100%; } /* ── NAV ── */ @media (max-width: 860px) { .nav { padding: 0 20px; height: 60px; } .nav-links { display: none; } .nav-cta { font-size: 9px; padding: 7px 14px; letter-spacing: 2px; } .nav-wordmark { font-size: 14px; } } /* ── TYPOGRAPHY SCALE DOWN ── */ @media (max-width: 600px) { .h1, .h1-light { font-size: 32px !important; } .h2 { font-size: 26px !important; } .h3 { font-size: 20px !important; } .lead, .lead-light { font-size: 15px !important; } } /* ── SECTION PADDING ── */ @media (max-width: 768px) { .section, .section-navy, .section-off { padding: 48px 20px !important; } .section-sm { padding: 36px 20px !important; } .page-hero { padding: 56px 20px !important; } .cta-section { padding: 56px 20px !important; } .footer { padding: 28px 20px; flex-direction: column; gap: 20px; text-align: center; } .footer-links { flex-wrap: wrap; justify-content: center; gap: 16px; } } /* ── GRIDS → SINGLE COLUMN ── */ @media (max-width: 768px) { .two-col, .two-col-center, .three-col, .four-col, .contact-grid, .closing-grid, .faq-grid, .deliv-row, .wyr-hero-grid, .about-hero-grid, .tiers-wrap, .pricing-grid, .included-grid, .persp-grid, .resource-grid, .next-grid, .cover-meta { display: block !important; } .two-col > *, .two-col-center > *, .three-col > *, .four-col > *, .tiers-wrap > *, .next-grid > *, .persp-grid > *, .resource-grid > * { margin-bottom: 20px; } .deliv-left, .deliv-right { padding: 28px 0 !important; border-right: none !important; border-bottom: 0.5px solid #F0F0F0; } .deliv-right { border-bottom: none; } } /* ── STEP BLOCKS ── */ @media (max-width: 768px) { .step-block { display: block !important; padding: 32px 0 !important; } .step-num { font-size: 40px !important; margin-bottom: 8px; } .step-body { padding: 0 !important; margin: 12px 0; } .step-callout { margin-top: 12px; } } /* ── HERO SECTIONS ── */ @media (max-width: 768px) { .hero { padding: 56px 20px !important; display: block !important; } .report-card { margin-top: 32px; } .cover-h1 { font-size: 32px !important; } .cover-top { flex-direction: column; gap: 16px; } .cover-meta-item { padding: 12px 0 !important; border-right: none !important; border-bottom: 0.5px solid rgba(255,255,255,0.1); text-align: left !important; } .cover-meta-item:last-child { border-bottom: none; } } /* ── GOLD STRIP ── */ @media (max-width: 768px) { .gold-strip { gap: 16px; padding: 16px 20px; flex-wrap: wrap; justify-content: center; } .gold-strip-item { font-size: 9px; } } /* ── SCORECARD ── */ @media (max-width: 600px) { .score-header { display: none; } .scorecard-row { grid-template-columns: 1fr auto !important; gap: 10px !important; } .sc-track-wrap { display: none; } .score-label { font-size: 14px; } } /* ── FRICTION TABLE ── */ @media (max-width: 600px) { .friction-thead { grid-template-columns: 32px 1fr 80px !important; } .friction-row { grid-template-columns: 32px 1fr 80px !important; } .friction-thead > *:last-child, .friction-row > *:last-child { display: none; } .friction-cell { font-size: 13px !important; padding: 10px 10px !important; } } /* ── TIMELINE ── */ @media (max-width: 768px) { .timeline { grid-template-columns: 1fr !important; } .tl-era { border-right: none !important; border-bottom: none !important; text-align: left !important; padding: 24px 0 0 !important; } .tl-content { padding: 8px 0 24px !important; border-bottom: 0.5px solid #F0F0F0; } } /* ── REPORT PAGES ── */ @media (max-width: 768px) { .report-page { padding: 24px 16px 60px !important; } .report-cover { padding: 32px 24px 28px !important; border-radius: 8px; } .report-section { padding: 28px 20px !important; } .report-signature { flex-direction: column !important; gap: 16px; padding: 28px 20px !important; } .sig-right { text-align: left !important; } .report-cta { flex-direction: column !important; gap: 20px; padding: 28px 20px !important; } .cta-actions { width: 100%; } .cta-actions .btn { width: 100%; text-align: center; display: block; } } /* ── PRICING ── */ @media (max-width: 768px) { .pricing-hero { padding: 56px 20px !important; } .honest-strip { padding: 18px 20px; flex-direction: column; gap: 10px; } .tiers-wrap { padding: 40px 16px !important; } .tier-card.featured::before { display: none; } .compare-wrap { overflow-x: auto; padding: 0 16px 24px; } .compare-table { min-width: 560px; } .guarantee-band { flex-direction: column; text-align: center; padding: 40px 20px; gap: 16px; } .final-cta { padding: 56px 20px !important; } .included-grid { grid-template-columns: 1fr 1fr !important; } } /* ── THANK YOU PAGE ── */ @media (max-width: 768px) { .confirm-hero { padding: 48px 20px !important; } .reg-card { margin: 24px 0 0 !important; } .next-steps, .info-wrap { padding: 0 16px !important; } .info-header { padding: 18px 16px; } .info-body { padding: 20px 16px; } } /* ── CONTACT PAGE (new single col) ── */ @media (max-width: 560px) { .contact-page { padding: 32px 16px 60px !important; } .trust-bar { grid-template-columns: 1fr !important; } .form-card { padding: 24px 16px !important; } .form-row { grid-template-columns: 1fr !important; } } /* ── BUTTONS FULL WIDTH ON MOBILE ── */ @media (max-width: 480px) { .cta-form { flex-direction: column; } .cta-form .btn { width: 100%; text-align: center; } .hero .btn, .hero .btn-ghost-light { display: block; text-align: center; margin-bottom: 12px; } } /* ── FAQ GRIDS ── */ @media (max-width: 768px) { .faq-grid { grid-template-columns: 1fr !important; gap: 24px !important; } .pricing-faq { padding: 48px 16px !important; } } /* ── ABOUT PAGE ── */ @media (max-width: 768px) { .stat-pills { gap: 8px; } .pill { font-size: 9px; padding: 6px 12px; } .about-hero { padding: 48px 20px !important; } .about-hero-grid { display: block !important; } .about-hero-grid > *:first-child { margin-bottom: 28px; } } /* ── HOW IT WORKS ── */ @media (max-width: 768px) { .hiw-hero { padding: 56px 20px 0 !important; } .hiw-hero-inner { padding-bottom: 36px; } .hiw-steps { padding: 0 20px !important; } .hiw-faq { padding: 48px 20px !important; } } /* ── SAMPLE REPORT HERO ── */ @media (max-width: 768px) { .sr-hero { padding: 48px 16px !important; } .sr-doc { margin: 0 16px !important; } .sr-doc-header { flex-direction: column; gap: 12px; padding: 24px 20px !important; } .sr-doc-meta { text-align: left !important; } .sr-body { padding: 24px 20px !important; } .sr-cta { padding: 28px 20px !important; flex-direction: column; gap: 12px; } .sr-cta-btn, .sr-cta-btn-ghost { display: block; width: 100%; text-align: center; } .closing-grid { grid-template-columns: 1fr !important; } } /* ── PROCESS GRID ON HOME ── */ @media (max-width: 768px) { .section > div[style*="grid-template-columns:repeat(5"] { display: block !important; } .section > div[style*="grid-template-columns:repeat(5"] > div { border-left: none !important; border-top: 0.5px solid #E5E7EB; padding: 20px 0 !important; } } /* ── GENERAL UTILITY ── */ @media (max-width: 768px) { .pull-quote { padding: 16px 18px; } .pull-quote p { font-size: 16px !important; } .card, .card-gold-left { padding: 20px !important; } .report-callout p { font-size: 17px !important; } .phase-items { padding-left: 8px; } .roadmap-phase { margin-bottom: 24px; } .trust-bar .trust-pill { padding: 14px 16px; } }