/* ============================================================
 VELLEM, MOBILE-FIRST SITE-WIDE LAYER
 Loaded on every page after that page's own styles. Targets
 viewports <= 720px (with a tighter pass at <= 480px). Adds:
 - 100dvh fixes for iOS Safari address-bar collapse
 - 44px minimum tap targets (Apple HIG + Material)
 - safe-area-inset honoring for notched/cutout displays
 - Touch-friendly scroll/snap behavior on chip rows
 - Bottom-sticky primary CTAs where applicable
 - Fluid type for hero headlines
 - Single-column collapse for grid layouts that don't fit
 ============================================================ */

/* === iOS Safari address-bar dvh fix ============================ */
@supports (height: 100dvh) {
 body[data-stage]:not([data-stage="hero"]).full-height-mobile {
 min-height: 100dvh;
 }
}

/* === Universal tap-target floor =============================== */
@media (max-width: 720px) {
 a.button,
 button,
 [role="button"], .pt-cta, .nav-cta, .lp-cta-primary, .lp-cta-secondary, .article-cta-btn, .hero-v2-cta-primary, .hero-v2-cta-secondary, .upgrade-cta, .pricing-tier-cta, .pricing-final-cta-primary, .pricing-final-cta-secondary, .checkout-pay-btn, .filter-chip, .accent-swap, .choice-card, .stage-next-btn, .lost-btn-primary, .lost-btn-secondary, .vcb-btn-primary, .vcb-btn-secondary, .su-share-btn, .pf-question {
 min-height: 44px;
 min-width: 44px;
 touch-action: manipulation;
 }

 /* Form inputs need slightly more vertical generosity on mobile */
 input[type="text"],
 input[type="email"],
 input[type="password"],
 input[type="search"],
 input[type="tel"],
 input[type="number"],
 textarea,
 select {
 min-height: 48px;
 font-size: 16px !important; /* prevents iOS auto-zoom on focus */
 }
}

/* === Safe-area honoring (notch / dynamic island / home indicator) === */
@media (max-width: 720px) {
 body {
 /* Push bottom-fixed content above the home indicator on iOS */
 padding-bottom: env(safe-area-inset-bottom);
 }
 /* When something IS bottom-fixed, it should respect safe area inside */
 .checkout-pay-btn, .stage-next-btn, .lost-btn-primary, .hero-v2-cta-primary {
 margin-bottom: max(0px, env(safe-area-inset-bottom));
 }
}

/* === Pricing page mobile polish =============================== */
@media (max-width: 720px) {
 .pricing-tiers-grid {
 grid-template-columns: 1fr !important;
 gap: 18px !important;
 }
 .pricing-tier.featured {
 transform: none !important;
 order: -1; /* surface the featured tier first on mobile */
 }
 .pricing-tier.featured:hover {
 transform: translateY(-2px) !important;
 }
 .pt-price-amount {
 font-size: clamp(48px, 12vw, 72px);
 }
 .pricing-tier {
 padding: 28px 22px !important;
 }
 /* Compare table, collapse to vertical cards instead of horizontal */
 .lp-compare {
 display: block;
 width: 100%;
 }
 .lp-compare thead { display: none; }
 .lp-compare tbody, .lp-compare tr { display: block; }
 .lp-compare tr {
 border-radius: 10px;
 background: rgba(10, 10, 11, 0.03);
 padding: 14px;
 margin-bottom: 10px;
 }
 .lp-compare td {
 display: block;
 border: 0 !important;
 padding: 4px 0 !important;
 text-align: left !important;
 }
 .lp-compare td:first-child {
 font-weight: 700;
 margin-bottom: 6px;
 }
 .lp-compare td.yes::before { content: "✓ "; color: #1F8A4C; font-weight: 700; }
 .lp-compare td.no::before { content: "✗ "; color: #999; }
}

/* === FAQ page mobile polish =================================== */
@media (max-width: 720px) {
 .pf-question {
 padding: 16px 14px !important;
 font-size: 15.5px !important;
 line-height: 1.4 !important;
 }
 .pf-answer {
 padding: 0 14px 18px !important;
 font-size: 14.5px !important;
 line-height: 1.55 !important;
 }
}

/* === Checkout page mobile polish ============================== */
@media (max-width: 720px) {
 .checkout-grid.checkout-layout {
 grid-template-columns: 1fr !important;
 gap: 20px !important;
 }
 .checkout-left.checkout-right {
 width: 100% !important;
 }
 /* Sticky pay button at bottom on mobile so it's always reachable */
 .checkout-pay-btn {
 position: sticky;
 bottom: 12px;
 z-index: 10;
 box-shadow: 0 8px 24px rgba(255, 91, 58, 0.18);
 }
 /* Form fields, stack the expiry/CVC row */
 .form-row {
 grid-template-columns: 1fr 1fr !important;
 gap: 10px !important;
 }
 /* Order summary card collapses to a sticky bottom-drawer pattern */
 .checkout-summary {
 padding: 18px !important;
 }
}

/* === Success page mobile polish =============================== */
@media (max-width: 720px) {
 .su-hero-title {
 font-size: clamp(28px, 8vw, 40px) !important;
 line-height: 1.05 !important;
 }
 .su-share-buttons {
 flex-direction: column !important;
 gap: 10px !important;
 }
 .su-share-btn {
 width: 100% !important;
 justify-content: center !important;
 }
 .su-founder-note.su-showcase-optin {
 margin-left: 16px !important;
 margin-right: 16px !important;
 padding: 22px 20px !important;
 }
 /* Stack the success-page cards on mobile */
 .su-card-row.su-kits-grid {
 grid-template-columns: 1fr !important;
 gap: 14px !important;
 }
}

/* === Account page mobile polish =============================== */
@media (max-width: 720px) {
 .account-grid.acc-sidebar-layout {
 grid-template-columns: 1fr !important;
 gap: 16px !important;
 }
 .acc-sidebar {
 position: static !important;
 margin-bottom: 16px;
 }
 .acc-tabs {
 display: flex;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 gap: 8px;
 padding: 0 0 6px;
 margin: 0 -16px 16px;
 padding-left: 16px;
 padding-right: 16px;
 }
 .acc-tab {
 flex: 0 0 auto;
 white-space: nowrap;
 }
}

/* === Kit showcase mobile polish =============================== */
@media (max-width: 720px) {
 .ks-hero-mark {
 width: clamp(120px, 30vw, 160px) !important;
 height: clamp(120px, 30vw, 160px) !important;
 }
 .ks-grid.ks-asset-grid {
 grid-template-columns: 1fr !important;
 gap: 14px !important;
 }
}

/* === Preview page mobile polish =============================== */
@media (max-width: 720px) {
 .vp-stage {
 padding: 20px 16px !important;
 }
 /* Make the brand-builder fields touch-friendly even outside the experience page */
 .bb-option {
 min-height: 56px;
 padding: 14px 16px !important;
 }
 .bb-options-grid {
 grid-template-columns: 1fr !important;
 gap: 8px !important;
 }
 /* Generated preview canvas adapts to viewport */
 .preview-canvas.preview-grid {
 grid-template-columns: 1fr !important;
 gap: 14px !important;
 }
}

/* === Landing pages (vellem-ai-logo-maker, vs-canva, etc.) ===== */
@media (max-width: 720px) {
 .lp-hero.lp-section {
 padding: 56px 18px !important;
 }
 .lp-h1.lp-hero h1 {
 font-size: clamp(34px, 8.5vw, 52px) !important;
 line-height: 1.05 !important;
 }
 .lp-h2 {
 font-size: clamp(28px, 6.5vw, 40px) !important;
 line-height: 1.1 !important;
 }
 .lp-grid-2, .lp-grid-3, .lp-grid-4 {
 grid-template-columns: 1fr !important;
 gap: 18px !important;
 }
 .lp-cta-row {
 flex-direction: column !important;
 gap: 10px !important;
 }
 .lp-cta-primary.lp-cta-secondary {
 width: 100% !important;
 text-align: center;
 padding: 16px 24px !important;
 }
}

/* === Blog mobile polish ====================================== */
@media (max-width: 720px) {
 .article-layout {
 grid-template-columns: 1fr !important;
 }
 .article-toc {
 position: static !important;
 margin-bottom: 24px;
 padding: 14px !important;
 background: rgba(10, 10, 11, 0.03);
 border-radius: 10px;
 }
 .article-toc nav {
 max-height: 200px;
 overflow-y: auto;
 }
 .article-content {
 padding: 0 4px;
 }
 .article-content h1 {
 font-size: clamp(32px, 8vw, 44px) !important;
 }
 .article-content h2 {
 font-size: clamp(24px, 6vw, 32px) !important;
 }
 .blog-grid.blog-featured-grid {
 grid-template-columns: 1fr !important;
 gap: 16px !important;
 }
 .filter-chips {
 display: flex;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 gap: 8px;
 padding: 4px 0 8px;
 margin: 0 -16px 16px;
 padding-left: 16px;
 padding-right: 16px;
 }
 .filter-chip {
 flex: 0 0 auto;
 white-space: nowrap;
 }
}

/* === Navigation mobile polish ================================ */
@media (max-width: 720px) {
 /* Collapse the text links on phones but KEEP the primary CTA visible.
 (Hiding the whole .nav-links container removed the "Start free" button
 from every page's header on mobile - the top revenue entry point.) */
 .nav-links:not(.open) > a:not(.nav-cta) {
 display: none;
 }
 .nav-links:not(.open) {
 display: flex;
 gap: 0;
 }
 .nav-links.open {
 position: fixed;
 inset: 64px 0 auto 0;
 background: var(--paper, #F4F2EC);
 border-top: 1px solid rgba(10, 10, 11, 0.08);
 flex-direction: column;
 gap: 0;
 padding: 16px;
 z-index: 100;
 box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
 }
 .nav-links.open a {
 padding: 16px 8px;
 border-bottom: 1px solid rgba(10, 10, 11, 0.06);
 width: 100%;
 }
 /* Nav-cta stays visible even when links collapse */
 header.site-header {
 padding: 12px 16px !important;
 }
}

/* === Tighter pass: <= 480px =================================== */
@media (max-width: 480px) {
 .lp-hero, .lp-section, .pricing-tiers, .checkout-section, .su-section {
 padding-left: 14px !important;
 padding-right: 14px !important;
 }
 .pt-name {
 font-size: 18px !important;
 }
 .pt-features li {
 font-size: 13.5px !important;
 }
 .pt-features li em {
 font-size: 12px !important;
 }
}

/* === Print styles, clean output if anyone prints any page ==== */
@media print {
 .nav, .nav-cta, .footer, .sale-banner, #vellem-consent-banner,
 #vellem-resume-prompt.exit-intent-modal { display: none !important; }
 body { background: white !important; }
}