/* Shared phone layout (coralhub.dev): one type scale, one gutter, one button and footer treatment for every page.
   Linked after each page's own <style>. Layout only. The phone block (max-width 640px) comes first; a smaller desktop block follows.
   Deliberately does not style .demo-*, .carousel-* or .try-cta* (owned by the demo embed, carousel and blog post). */
@media (max-width: 640px) {
    :root {
        --m-gutter: 20px;
        --m-h1: 28px;
        --m-h1-hero: 34px;
        --m-h2: 22px;
        --m-h2-section: 26px;
        --m-body: 16px;
        --m-small: 13px;
        --m-tap: 44px;
        --m-btn: 48px;
    }

    /* gutters: one 20px edge on marketing sections and on prose pages */
    html body main > section:not(.hero) { padding-left: var(--m-gutter); padding-right: var(--m-gutter); }
    html body .hero { padding-left: var(--m-gutter); padding-right: var(--m-gutter); }
    html body article,
    html body main > .container { padding-left: var(--m-gutter); padding-right: var(--m-gutter); }

    /* type scale: two h1 sizes (hero, page), one h2, one body size, one line-height rhythm */
    html body h1 { font-size: var(--m-h1); line-height: 1.2; letter-spacing: -0.02em; }
    html body .hero h1 { font-size: var(--m-h1-hero); line-height: 1.15; }
    html body article h2,
    html body main > .container h2 { font-size: var(--m-h2); line-height: 1.25; }
    html body .section-title { font-size: var(--m-h2-section); line-height: 1.2; }
    html body article p,
    html body article li,
    html body main > .container p,
    html body main > .container li { font-size: var(--m-body); line-height: 1.7; }

    /* readable minimum for small labels and badges */
    html body .section-label,
    html body .hero-badge,
    html body .doc-badge,
    html body .badge-beta,
    html body .product-tag,
    html body .step-badge,
    html body .nav-dir,
    html body .price-annual,
    html body .chat-tab,
    html body .dl-btn { font-size: var(--m-small); }

    /* buttons: a single full-width stack, one height, 44px+ everywhere */
    html body .hero-buttons { flex-direction: column; align-items: center; gap: 12px; }
    html body main a.btn { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 360px; min-height: var(--m-btn); margin-left: auto; margin-right: auto; text-align: center; }
    html body main a.btn + a.btn { margin-top: 12px; }
    html body .hero-buttons a.btn + a.btn { margin-top: 0; }

    /* footer: one centered alignment, tap-sized links, contents unchanged */
    html body footer { text-align: center; }
    html body footer a { display: inline-block; padding: 12px 6px; }
    html body .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
    html body .footer-links { flex-wrap: wrap; justify-content: center; gap: 0 8px; }

    /* beta form: 44px rows, bigger controls, full-width submit */
    html body .beta-form .beta-choice { display: flex; align-items: center; gap: 10px; min-height: var(--m-tap); margin-right: 0; }
    html body .beta-form .beta-check { align-items: center; min-height: var(--m-tap); }
    html body .beta-form input[type=radio],
    html body .beta-form input[type=checkbox] { flex: none; width: 22px; height: 22px; margin: 0; }
    html body .beta-form input[type=email],
    html body .beta-form textarea { font-size: 16px; min-height: var(--m-tap); }
    html body .beta-form button[type=submit] { width: 100%; min-height: var(--m-btn); }

    /* comparison table: shadows on the scrolling edges signal more columns, text stays readable */
    html body .comparison-table {
        font-size: var(--m-small);
        background:
            linear-gradient(to right, var(--bg-surface, #0d1117) 30%, rgba(13, 17, 23, 0)) left center / 32px 100% no-repeat local,
            linear-gradient(to left, var(--bg-surface, #0d1117) 30%, rgba(13, 17, 23, 0)) right center / 32px 100% no-repeat local,
            linear-gradient(to right, rgba(88, 166, 255, .28), rgba(88, 166, 255, 0)) left center / 14px 100% no-repeat scroll,
            linear-gradient(to left, rgba(88, 166, 255, .28), rgba(88, 166, 255, 0)) right center / 14px 100% no-repeat scroll;
    }
    html body .comparison-table td { font-size: var(--m-small); }

    /* long code lines scroll inside their own box */
    html body article :not(pre) > code { overflow-wrap: anywhere; }
    html body article pre { overflow-x: auto; }

    /* hub and coral hero badge wraps inside its pill; the in-page link row fits one line at 320 */
    html body .hero-badge { flex-wrap: wrap; justify-content: center; border-radius: 16px; gap: 4px 8px; text-align: center; }
    html body .page-head { padding-left: var(--m-gutter); padding-right: var(--m-gutter); }
    html body .page-links { gap: 0; }
    html body .page-links a { padding: 0 5px; font-size: 13px; }
}

/* Desktop and tablet (641px up): the shared prose scale for article and container pages, and the hub hero spacing. */
@media (min-width: 641px) {
    html body article h1,
    html body main > .container h1 { font-size: 40px; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 12px; }
    html body article h2,
    html body main > .container h2 { font-size: 24px; line-height: 1.3; }
    html body article p,
    html body article li,
    html body main > .container p,
    html body main > .container li { font-size: 16px; line-height: 1.75; }
}

/* hub hero: about 60px tighter so the sign-up buttons stay above the fold on a 1440x800 window */
@media (min-width: 769px) {
    html body.hub-page .hero:has(.hero-diagram) { padding-top: 72px; }
    html body.hub-page .hero:has(.hero-diagram) .hero-badge { margin-bottom: 20px; }
    html body.hub-page .hero:has(.hero-diagram) .hero-sub { margin-bottom: 28px; }
}

/* Small labels never go under 13px, at any width (selectors match the page rules they override). */
html body :is(.section-label, .hero-badge, .doc-badge, .badge-beta, .product-tag, .step-badge, .role-badge, .post-date,
    .timeline-item .timeline-time, .pipeline-num, .doc-nav-card .nav-dir, .post-card .post-date,
    .price-annual, .price-annual a) { font-size: 13px; }

/* the text link under a feature card gets a 44px tap row */
html body .feature-card > a { display: inline-flex; align-items: center; min-height: 44px; }