/*
 * Vorian Theme — mobile.css
 * Mobile-first responsive overrides. Layered on top of main.css.
 * Breakpoints: < 1024 tablet, < 768 mobile, < 480 small mobile.
 */

/* ============================================================
   TABLET — < 1024px
   ============================================================ */
@media (max-width: 1024px) {
	.container, .container-wide, .container-narrow { padding: 0 28px; }
	.section-pad { padding: 110px 0; }
	.problem { padding: 110px 0; }
	.cci { padding: 110px 0; }
	.close { padding: 110px 0; }

	/* dashboard showcase: hide right calendar column, narrow sidebar */
	.db-grid { grid-template-columns: 200px 1fr; }
	.db-cal { display: none; }
	.kpi4 { grid-template-columns: repeat(2, 1fr); }

	/* hero card: hide right calendar column on tablet for breathing room */
	.hc-grid { grid-template-columns: 200px 1fr; }
	.hc-right { display: none; }

	/* fs-grid relaxes earlier */
	.fs-grid { gap: 56px; }

	/* footer 2-column */
	.foot-grid { grid-template-columns: 1fr 1fr; }
	.foot-right { grid-column: 1 / -1; justify-content: flex-start; }
	.foot-right ul { justify-content: flex-start; }
}

/* ============================================================
   MOBILE — < 768px
   ============================================================ */
@media (max-width: 767px) {
	.container, .container-wide, .container-narrow { padding: 0 20px; }
	.section-pad { padding: 88px 0; }
	.problem { padding: 88px 0; }
	.cci { padding: 88px 0; }
	.close { padding: 88px 0; min-height: auto; }

	/* nav: hide desktop links, show hamburger */
	.nav { padding: 14px 0; }
	.nav.scrolled { padding: 10px 0; }
	.nav-links { display: none; }
	.ham { display: grid; }

	/* CTA row stacks */
	.cta-row { flex-direction: column; gap: 10px; align-items: stretch; margin-bottom: 56px; }
	.cta-row .pill-cta, .cta-row .ghost-btn { justify-content: center; padding: 16px 24px; font-size: 15px; min-height: 52px; }

	/* hero */
	.hero { padding: 110px 0 60px; min-height: auto; }
	h1.hero-h { max-width: 100%; }
	.hero-sub { padding: 0 4px; }

	/* hero card: collapse to main only */
	.hero-card-wrap { padding: 0 4px; }
	.hc-grid { grid-template-columns: 1fr; min-height: auto; }
	.hc-side { display: none; }
	.hc-right { display: none; }
	.hc-bar .url { font-size: 11px; padding: 5px 10px; }
	.hc-main { padding: 18px 18px 22px; gap: 14px; }
	.hc-greet h3 { font-size: 18px; }
	.hc-greet .search { display: none; }
	.kpi-row { grid-template-columns: 1fr; gap: 8px; }
	.kpi { padding: 10px 12px; }

	/* problem stats: 1-column on mobile */
	.problem-head { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 48px; }
	.stat-grid { grid-template-columns: 1fr; }
	.stat { padding: 28px 24px; }

	/* solution cards */
	.sol-cards { grid-template-columns: 1fr; gap: 16px; }
	.sol-card { padding: 32px 28px 36px; min-height: auto; }
	.sol-card h3 { font-size: 28px; }
	.sol-card p { font-size: 15px; }
	.sol-card li { font-size: 14px; }

	/* CCI */
	.cci-cols { grid-template-columns: 1fr; gap: 40px; max-width: 420px; }
	.cci-line { display: none; }
	.cci .section-sub { margin-bottom: 48px; }
	.cci-formula { margin-top: 56px; }

	/* product showcase: hide all sidebars */
	.show-head { margin-bottom: 36px; }
	.dashboard-stage { padding: 14px; border-radius: 20px; }
	.db-chrome { border-radius: 14px; }
	.db-bar { padding: 10px 12px; gap: 8px; }
	.db-bar .tabs { display: none; }
	.db-bar .url { font-size: 10.5px; padding: 4px 8px; }
	.db-grid { grid-template-columns: 1fr; min-height: auto; }
	.db-side { display: none; }
	.db-cal { display: none; }
	.db-main { padding: 20px 18px; gap: 16px; }
	.db-greet { gap: 12px; }
	.db-greet h3 { font-size: 22px; }
	.db-greet .search { display: none; }
	.db-greet .av { width: 32px; height: 32px; font-size: 11px; }
	.kpi4 { grid-template-columns: repeat(2, 1fr); }
	.db-panels { grid-template-columns: 1fr; }
	.db-msgs { grid-template-columns: 1fr 1fr; }
	.ticker { font-size: 12px; padding: 10px 14px; }
	.ticker .pill { display: none; }

	/* for-startups: stack */
	.fs-grid { grid-template-columns: 1fr; gap: 36px; }
	.fs-left p { font-size: 16px; }
	.fs-card { padding: 22px 24px; }

	/* enterprise */
	.ent-cards { grid-template-columns: 1fr; }
	.ent-card { padding: 28px 26px; }

	/* video */
	.video-stage { padding: 4px; border-radius: 18px; }
	.video-frame { border-radius: 14px; }
	.play-btn { width: 72px; height: 72px; }
	.play-btn::after { border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; }

	/* trusted globally */
	.trust-stats { grid-template-columns: 1fr; gap: 32px; margin-top: 48px; }

	/* news */
	.news-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
	.news-grid { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
	.news-card { padding: 22px 24px 26px; }
	.news-card h4 { font-size: 18px; }

	/* pricing */
	.price-grid { grid-template-columns: 1fr; gap: 16px; }
	.price-card { padding: 32px 28px 34px; }
	.price-card.free, .price-card.pro { min-height: auto; }
	.price-card .price .n { font-size: 56px; }

	/* close */
	.close h2 { font-size: clamp(40px, 9vw, 72px); }

	/* footer */
	.foot-grid { grid-template-columns: 1fr; gap: 28px; }
	.foot-mid { justify-content: flex-start; }
	.foot-mid ul { justify-content: flex-start; gap: 18px 24px; }
	.foot-right { justify-content: flex-start; gap: 18px; }
	.foot-bot { flex-direction: column; gap: 8px; }

	/* archive / single padding shifts */
	.archive-hero, .single-hero { padding-top: 110px; }
	.single-body .prose { font-size: 16px; }

	/* venn shrinks */
	.venn { transform: scale(.85); transform-origin: top center; }

	/* disable cursor glow on mobile */
	.cursor-glow { display: none; }

	/* ensure tap targets */
	.nav-links a, .foot-mid a, .foot-right a, .news-card .news-card-link {
		min-height: 44px; display: inline-flex; align-items: center;
	}
	.news-card .news-card-link { min-height: auto; }

	.hero-eyebrow .dot {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
    }

	.cmp-scroll-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		border-radius: 20px;
	}

	.cmp-scroll-wrap .cmp-table {
		min-width: 600px;
		font-size: 13px;
	}

	.cmp-scroll-wrap .cmp-row {
		grid-template-columns: 1.6fr 1fr 1fr 1fr;
		gap: 0;
	}

	 .hero-card-wrap {
        overflow: visible; /* remove side scroll */
        padding: 0;
    }

    .hero-card {
        border-radius: 14px;
    }

    .hero-card img {
        border-radius: 0 0 14px 14px;
        height: auto;
        width: 100%;
    }
}

/* ============================================================
   SMALL MOBILE — < 480px
   ============================================================ */
@media (max-width: 479px) {
	.container, .container-wide, .container-narrow { padding: 0 16px; }
	.section-pad { padding: 72px 0; }
	.problem { padding: 72px 0; }
	.cci { padding: 72px 0; }

	/* hero text balance */
	h1.hero-h { font-size: clamp(38px, 11vw, 56px); }
	.hero { padding: 96px 0 48px !important; }

	/* solution cards */
	.sol-card { padding: 28px 24px 32px; }

	/* product showcase even tighter */
	.dashboard-stage { padding: 10px; }
	.db-main { padding: 16px 14px; }
	.kpi4 { grid-template-columns: 1fr; }

	/* problem stats padding */
	.stat { padding: 24px 22px; }

	/* fs-card stacks ic above */
	.fs-card { flex-direction: column; gap: 14px; padding: 22px; }

	/* news/pricing tighter */
	.news-card { padding: 20px 22px 24px; }
	.price-card { padding: 28px 24px 30px; }
	.price-card .price .n { font-size: 48px; }

	/* CCI icon sizes */
	.cci-ic { width: 64px; height: 64px; }
	.cci-ic svg { width: 28px; height: 28px; }

	.hero-eyebrow .dot {
        width: 10px;
        height: 10px;
    }

    .hero-eyebrow {
        font-size: 11px;
        padding: 5px 12px 5px 5px;
        gap: 8px;
    }

	.feat-text .meta {
		font-size: 11px !important;
	}
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
	.nav, .ham, .drawer, .drawer-shade, .cursor-glow,
	.hero-bloom, .close-bloom, .ent-bg, .cci-bloom { display: none !important; }
	body { background: #fff; color: #000; }
	.dark { background: #fff !important; color: #000 !important; }
	.dark * { color: #000 !important; }
	a { color: #000 !important; text-decoration: underline; }
	.section-pad, .problem, .cci, .close { padding: 24px 0 !important; }
}