/* ============================================================
   RESPONSIVE PASS (home page, 24 Oct 2026). Loaded last; touches
   only phones and tablets.
   ============================================================ */

/* ---- tablets: the big section titles scale with the screen instead of
   holding 72px from 640px up (four- and five-line titles at 768) ---- */
@media (min-width: 640px) and (max-width: 1023px) {
    .sec-title, .origin-title, .price-title, .grow-cta-title { font-size: clamp(2.75rem, 6.4vw, 4rem); }
}

/* ---- the tab rails: below the width where a row stops fitting, each row
   is an edge-to-edge rail again (css/tabs.css had rounded their ends);
   a group with one tab stays a small rounded tray, not an empty rail ---- */
@media (max-width: 979px) {
    .wfs.wfp .wfp-tabs { border-radius: 0; border-left: 0; border-right: 0; padding: 5px 16px; }
}
/* "Already use Claude or ChatGPT?": its tabs, wide and narrow, are in css/setup-split.css */

/* ---- "Already use [Claude] or [ChatGPT]?": keeps its break on a phone, so
   the question is one line and the logos never sit alone ---- */
@media (max-width: 640px) {
    .ct--setup .sec-title br { display: inline; }
}

/* ---- Why Askpilot: the built-in panel's values one size down while the
   boxes sit side by side on a tablet ---- */
@media (min-width: 768px) and (max-width: 1023px) {
    .ff-kit-list li { font-size: .75rem; gap: 6px; }
    .ff-kit-v { font-size: .6875rem; padding-left: 6px; }
}
@media (min-width: 768px) and (max-width: 899px) {
    .ff-vis { padding: 12px 10px; }
    .ff-kit { padding: 10px; }
}

/* ---- How Askpilot executes: one column until the cards are wide enough
   for their pictures (they spilled out at 768) ---- */
@media (max-width: 899px) {
    .ex-grid { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
}

/* ---- Everything you've automated, on a phone: the run that opens from the
   list takes the list's place and size (the session only), instead of the
   section growing to the run's height and leaving the list half empty ---- */
@media (max-width: 767px) {
    .wm-stage--x { position: relative; }
    .wm-stage--x > .wm-app { min-height: 0; height: 600px; }
    .wm-stage--x > .he-stage { position: absolute; inset: 0; margin: 0; }
    .wm-stage--x .he-app { height: 100%; }
    .wm-stage--x .he-app .xu-prog { display: none; }
    .wm-stage--x .he-app .xu-sess { flex: 1 1 auto; height: auto; min-height: 0; }
}

/* ---- the round black arrows between cards: no pale halo around the disc
   (it showed as a lighter ring wherever the ground was not the exact
   colour it was painted in, Dom). The dashed line runs into the disc. ---- */
.ho-arrow-dot, .ho--bare .ho-arrow-dot, .rpl-arrow-dot { box-shadow: none; }