/* workflow-fx.css: the workflow group on the redesign layer (27 Oct 2026).
   Pages: /workflows, the five /workflow-* pages, /phone-setup, /first-30-days, /integrations, /ai.
   Load after page-fx.css. Every rule is scoped by the page's body class (fx-wfg is on all of them).
   Solid surfaces only, fx tokens only, 16px body minimum, 13px label minimum. */

/* ---------- Other workflows, a quiet link row in the closing section ---------- */
.fx-wfg .wfg-others{list-style:none;margin:28px 0 0;padding:22px 0 0;border-top:1px solid var(--fx-line);display:flex;flex-wrap:wrap;gap:6px 26px;width:100%}
.fx-wfg .wfg-others a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;color:var(--fx-muted);text-decoration:none}
.fx-wfg .wfg-others a:hover{color:var(--fx-ink);text-decoration:underline;text-underline-offset:4px}
.fx-wfg .wfg-others a[aria-current="page"]{color:var(--fx-ink);font-weight:600}

/* ---------- FAQ answers that carry a list ---------- */
.fx-wfg .fx-faq details ul,.fx-wfg .fx-faq details ol{margin:0 0 18px;padding-left:22px;max-width:70ch}
.fx-wfg .fx-faq details li{margin:0 0 8px;font-size:16.5px;line-height:1.6;color:var(--fx-muted)}
.fx-wfg .fx-faq details li b{color:var(--fx-ink)}

/* ---------- A price line under the plans ---------- */
.fx-wfg .wfg-plan-note{margin:18px 0 0;max-width:80ch;font-size:16.5px;line-height:1.6;color:var(--fx-muted)}
.fx-wfg .wfg-plan-note+.wfg-plan-note{margin-top:8px}
.fx-wfg .pg-amount small{font-size:16px;font-weight:500;color:var(--fx-muted);letter-spacing:0}

/* ---------- Window: a booking request beside the call (front desk, growth) ---------- */
.fx-wfg .wfg-app-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.fx-wfg .pg-app .fx-say-list{margin:6px 0 0}
.fx-wfg .pg-app .fx-say{font-size:15px;line-height:1.45}
.fx-wfg .pg-app .pg-rows{margin-top:10px}
@media (max-width:600px){.fx-wfg .wfg-app-grid{grid-template-columns:1fr}}

/* A rule list with its trace (workflows window) */
.fx-wfg .wfg-rule{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;padding:10px 0;border-bottom:1px solid var(--fx-line)}
.fx-wfg .wfg-rule:last-child{border-bottom:0}
.fx-wfg .wfg-rule .pg-k{margin:2px 0 0}
.fx-wfg .wfg-rule p{margin:0;font-size:15px;line-height:1.45;color:var(--fx-ink)}
.fx-wfg .wfg-rule small{grid-column:2;font-size:13px;color:var(--fx-muted)}
.fx-wfg .wfg-rule.is-hit p{font-weight:600}
.fx-wfg .wfg-rule.is-hit .pg-k{color:var(--fx-accent)}

/* ---------- Template tiles (workflows) ---------- */
.fx-workflows .fx-tile p b{color:var(--fx-ink)}
.fx-workflows .fx-tile details{margin-top:2px;font-size:16px;color:var(--fx-muted)}
.fx-workflows .fx-tile summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--fx-ink)}
.fx-workflows .fx-tile details p{margin:0 0 6px}

/* ---------- Front desk: the live call and Ask your calls on the fx tokens ---------- */
.fx-wf-front .lc,.fx-wf-front .ac{--panel:var(--fx-surface);--line:var(--fx-line);--navy-deep:var(--fx-ground);
  --ivory:var(--fx-ink);--muted:var(--fx-muted);--gold:var(--fx-accent);--gold-soft:var(--fx-accent)}
.fx-wf-front .lc-stage,.fx-wf-front .ac-shell,.fx-wf-front .lc-summary{box-shadow:var(--fx-shadow-soft)}
.fx-wf-front .lc-call{background:var(--fx-surface)}
.fx-wf-front .lc-actions .fx-btn[disabled]{opacity:.6;cursor:not-allowed}
.fx-wf-front .ac-chip{min-height:44px;font-size:15px}
.fx-wf-front .ac-foot,.fx-wf-front .lc-disclose{font-size:15px}
.fx-wf-front .mc-band{background:var(--fx-ground-2)}
@media (min-width:1100px){.fx-wf-front .mc-band .mc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:641px) and (max-width:1099px){.fx-wf-front .mc-band .mc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Integrations: status chips and rows ---------- */
.fx-integrations .wfg-st{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:999px;
  font:500 13px/1 var(--fx-mono);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:var(--fx-ink);
  background:color-mix(in srgb,var(--fx-accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--fx-accent) 32%,transparent)}
.fx-integrations .wfg-st::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--fx-accent)}
.fx-integrations .wfg-st--part::before{background:var(--fx-gold)}
.fx-integrations .wfg-st--part{background:color-mix(in srgb,var(--fx-gold) 14%,transparent);border-color:color-mix(in srgb,var(--fx-gold) 40%,transparent)}
.fx-integrations .wfg-st--off{background:transparent;border-color:var(--fx-line-strong);color:var(--fx-muted)}
.fx-integrations .wfg-st--off::before{background:transparent;border:1.5px solid var(--fx-muted)}
.fx-integrations .wfg-int{list-style:none;margin:0;padding:0;border-top:1px solid var(--fx-line-strong)}
.fx-integrations .wfg-int>li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:10px 32px;padding:22px 0;border-bottom:1px solid var(--fx-line)}
.fx-integrations .wfg-int h3{margin:0 0 10px;font-size:19px;line-height:1.3;font-weight:600;color:var(--fx-ink)}
.fx-integrations .wfg-int p{margin:0;font-size:16.5px;line-height:1.6;color:var(--fx-muted);max-width:70ch}
.fx-integrations .wfg-int details{margin-top:8px}
.fx-integrations .wfg-int summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;font-weight:600;color:var(--fx-ink);text-decoration:underline;text-decoration-color:var(--fx-line-strong);text-underline-offset:4px}
.fx-integrations .wfg-int details p{margin-top:4px}
@media (max-width:760px){.fx-integrations .wfg-int>li{grid-template-columns:1fr}}

/* ---------- /ai: the reading page keeps its machine-readable tables tidy ---------- */
.fx-ai .pg-prose code{overflow-wrap:anywhere}
.fx-ai .wfg-ask{display:flex;flex-wrap:wrap;gap:6px 24px;margin:0;padding:0;list-style:none}
.fx-ai .wfg-ask a{display:inline-flex;align-items:center;min-height:44px}

/* Phone numbers never break across lines */
.fx-wfg main a[href^="tel:"]{white-space:nowrap}