/* ============================================================
   CONTROLLED EXECUTION (home page, 24 Oct 2026): "Gets the work
   done end to end, by your rules." The home hero's step-by-step execution
   screen (css/exec-ui.css + css/hero-exec.css, js/hero-exec.js) as its
   own section under Why Askpilot, with the PROCESS.md pill (.xu-format,
   css/exec-ui.css) under the title.
   ============================================================ */
.xc { padding: 112px 0; border-top: 1px solid var(--line); }
.xc .xu-format { margin-top: 26px; }
.xc .he-stage { margin: 48px auto 0; }
@media (max-width: 767px) {
    .xc { padding: 80px 0; }
    .xc .he-stage { margin-top: 32px; }
}

/* the title in two rows from 640px up, one sentence each: it scales with
   the content width (Dom), as the home page's Controlled execution title did */
@media (min-width: 640px) {
    .xc .sec-title { font-size: calc(min(100vw - 64px, 1136px) / 16.6); }
}

/* phones: no white card for the PROCESS.md line (it became a big box, Dom):
   the words centred under the title and "Learn more" as a blue link */
@media (max-width: 480px) {
    .xc .xu-format {
        display: block; width: auto; margin: 18px auto 0; padding: 0;
        background: none; border: 0; border-radius: 0; box-shadow: none;
        text-align: center; font-size: .9375rem; line-height: 1.55; text-wrap: balance;
    }
    .xc .xu-format-ico { display: none; }
    .xc .xu-format-t { display: inline; }
    .xc .xu-format-btn {
        display: inline-flex; gap: 4px; margin: 0 0 0 6px; padding: 0; vertical-align: baseline;
        background: none; box-shadow: none; color: var(--brand-blue, #4C6BEE); font-size: inherit;   /* blue on phones (Dom) */
    }
    .xc .xu-format-btn:hover { background: none; color: #3A55D0; }
    .xc .xu-format-btn svg { width: 13px; height: 13px; align-self: center; }
}

/* the title's break holds at every width: one sentence per row (or, on the
   narrowest phones, the first sentence over two) */
.xc .sec-title br { display: inline; }