/* =============================================================
   cfo-command.css - CFO Command page (cfo.html)
   Loads AFTER main.css, components.css and nexus.css and reuses
   their system: Source Sans Pro, .nx-section / .nx-wrap / .nx-head
   / .nx-title / .nx-lede / .nx-mod / .nx-list / .nx-pipe / .nx-faq,
   .btn / .cta-section. Only components nexus.css lacks live here.
   Tokens: --nx-navy, --nx-slate, --nx-muted, --nx-line, --nx-cyan*,
   --nx-emerald*, --nx-amber* (gold), --nx-red*.
   ============================================================= */

#wheel, #stage, #rollout, #model, #join, #faq { scroll-margin-top: calc(var(--navbar-h) + 12px); }

/* ---- Status chip (live vs cohort) --------------------------- */
.cfo-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}
.cfo-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cfo-status.is-live { color: var(--nx-emerald-ink); background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.3); }
.cfo-status.is-cohort { color: var(--nx-amber-ink); background: rgba(245, 166, 35, 0.12); border: 1px solid rgba(245, 166, 35, 0.35); }
.is-dark .cfo-status.is-cohort { color: var(--nx-amber); }

/* ---- Hero brief panel (built on .nx-viz) -------------------- */
.cfo-brief { min-height: 0; gap: 7px; }
.cfo-brief-group {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    margin-top: 6px;
}
.cfo-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 62px;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.18);
}
.cfo-row-name { font-size: 0.84rem; color: #e2e8f0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfo-row-meta { font-size: 0.72rem; color: #94a3b8; margin-top: 1px; }
.cfo-row-amt { font-size: 0.84rem; font-weight: 700; color: #f1f5f9; font-variant-numeric: tabular-nums; }
.cfo-row-state { font-size: 0.68rem; font-weight: 700; padding: 3px 0; border-radius: 999px; text-align: center; }
.cfo-row.is-break { border-color: rgba(239, 68, 68, 0.45); background: rgba(127, 29, 29, 0.22); }
.cfo-row.is-break .cfo-row-state { color: #fca5a5; background: rgba(239, 68, 68, 0.18); }
.cfo-row.is-hold .cfo-row-state { color: #fcd34d; background: rgba(245, 166, 35, 0.16); }
.cfo-row.is-fix { border-color: rgba(16, 185, 129, 0.38); }
.cfo-row.is-fix .cfo-row-state { color: #6ee7b7; background: rgba(16, 185, 129, 0.16); }
.cfo-brief-foot {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    padding-top: 12px;
}
.cfo-brief-foot strong { display: block; font-size: 1.25rem; font-weight: 800; color: var(--nx-amber); line-height: 1.1; }
.cfo-brief-foot span { font-size: 0.72rem; color: #94a3b8; }

/* ---- Lists with bold lead-ins; lists sit under the heading ----- */
.nx-mod .nx-list { margin-top: 0; }
.nx-list li strong { color: #1e293b; font-weight: 700; }

/* ---- 90-day plan (reuses .nx-pipe; 4 steps) ----------------- */
.cfo-plan { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* ---- Leakage model ------------------------------------------ */
.cfo-calc { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 24px; align-items: start; }
.cfo-calc-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cfo-calc-in fieldset { margin: 0; min-width: 0; display: block; }
.cfo-calc-in legend { float: left; width: 100%; padding: 0; font-size: 1.1rem; }
.cfo-calc-in legend + * { clear: both; }
.cfo-calc label,
.cfo-form label { display: block; font-size: 0.86rem; font-weight: 600; color: #1e293b; margin-bottom: 14px; }
.cfo-calc input,
.cfo-form input:not([type="checkbox"]),
.cfo-form select,
.cfo-form textarea {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 10px 12px;
    border: 1px solid var(--nx-line);
    border-radius: 10px;
    font-family: inherit;
    font-size: 16px;
    color: var(--nx-navy);
    background: #fff;
}
.cfo-calc input { font-weight: 700; font-variant-numeric: tabular-nums; }
.cfo-calc input:focus,
.cfo-form input:focus,
.cfo-form select:focus,
.cfo-form textarea:focus { outline: none; border-color: var(--nx-cyan); box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.18); }
.cfo-calc small { display: block; margin-top: 5px; font-size: 0.76rem; font-weight: 400; line-height: 1.45; color: var(--nx-muted); }

.cfo-calc-out {
    position: sticky;
    top: calc(var(--navbar-h) + 16px);
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #e2e8f0;
    border-radius: 18px;
    padding: 26px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.2);
}
.cfo-calc-total span { display: block; font-size: 0.82rem; font-weight: 700; color: #94a3b8; }
.cfo-calc-total strong {
    display: block;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: clamp(2.1rem, 3.6vw, 2.8rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--nx-amber);
    margin: 4px 0 14px;
    font-variant-numeric: tabular-nums;
}
.cfo-calc-out dl { margin: 0; }
.cfo-calc-out dl > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid rgba(148, 163, 184, 0.18); }
.cfo-calc-out dt { font-size: 0.88rem; color: #cbd5e1; }
.cfo-calc-out dd { margin: 0; font-size: 0.95rem; font-weight: 700; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cfo-calc-out .nx-note { margin: 14px 0 18px; }
.cfo-btn-block { width: 100%; justify-content: center; }

/* ---- Join form ---------------------------------------------- */
.cfo-join { align-items: start; }
.cfo-gets { margin: 22px 0 18px; }
.cfo-gets li { margin-bottom: 12px; }
.cfo-join .nx-note a { color: var(--nx-navy); font-weight: 700; }
.cfo-form { border-top: 4px solid var(--nx-amber); }
.cfo-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cfo-checks { border: 0; padding: 0; margin: 2px 0 14px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.cfo-checks legend { font-size: 0.86rem; font-weight: 600; color: #1e293b; padding: 0; margin-bottom: 6px; }
.cfo-form .cfo-checks label { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--nx-slate); margin: 0; padding: 4px 0; cursor: pointer; }
.cfo-checks input { width: 16px; height: 16px; flex: none; accent-color: var(--nx-navy); }
.cfo-opt { font-weight: 400; color: #94a3b8; }
.cfo-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.cfo-form [aria-invalid="true"] { border-color: var(--nx-red) !important; }
.cfo-form-model { font-size: 0.86rem; color: var(--nx-navy); background: rgba(245, 166, 35, 0.12); border-radius: 10px; padding: 10px 12px; margin: 0 0 14px; }
.cfo-form-msg { margin: 12px 0 0; font-weight: 700; font-size: 0.92rem; min-height: 1.2em; }
.cfo-form-msg.is-ok { color: var(--nx-emerald-ink); }
.cfo-form-msg.is-err { color: var(--nx-red-ink); }
.cfo-form-msg a { color: inherit; }

/* ---- CTA quote ---------------------------------------------- */
.cfo-quote { max-width: 760px; margin: 0 auto 2.5rem; }
.cfo-quote p { font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.5; font-style: italic; opacity: 0.95; margin: 0; }
.cfo-quote cite { display: block; margin-top: 12px; font-style: normal; font-size: 0.9rem; color: var(--nx-amber); font-weight: 600; }
.cfo-quote cite em { color: #94a3b8; font-weight: 400; }

/* ---- Sticky CTA --------------------------------------------- */
.cfo-sticky {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translate(-50%, 160%);
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 8px 8px 20px;
    background: var(--nx-navy);
    color: #fff;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92rem;
    box-shadow: 0 14px 40px rgba(2, 6, 23, 0.4);
    transition: transform 0.3s ease;
    max-width: calc(100% - 24px);
}
.cfo-sticky.is-on { transform: translate(-50%, 0); }
.cfo-sticky .btn { white-space: nowrap; }

/* =============================================================
   ORBIT HERO - elliptical orbit seen at an angle
   ============================================================= */
.hero.cfo-orbit-hero { padding-top: calc(var(--navbar-h) + 1.5rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); text-align: center; }
.cfo-orbit-inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.cfo-orbit-head { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cfo-orbit-head .hero-badge { margin: 0; }
.hero .cfo-orbit-title { font-size: clamp(1.55rem, 2.9vw, 2.35rem); line-height: 1.18; max-width: 980px; margin: 0; }
.cfo-orbit-lede { margin: 0; max-width: 680px; font-size: clamp(0.95rem, 1.2vw, 1.05rem); line-height: 1.6; color: #cbd5e1; }

/* group colours */
.g-in    { --g: #34d399; }
.g-out   { --g: #22d3ee; }
.g-legal { --g: #a78bfa; }
.g-close { --g: #60a5fa; }
.g-plan  { --g: #f472b6; }

.cfo-wheel {
    position: relative;
    width: 100%;
    height: clamp(330px, 38vw, 470px);
    margin: 4px auto 0;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}
.cfo-wheel.is-dragging { cursor: grabbing; }
/* While the orbit moves, cards ignore the pointer: no hover repaints, no
   transitions, no halo. They come back the moment the card lands. */
.cfo-wheel.is-spinning .cfo-wcard,
.cfo-wheel.is-dragging .cfo-wcard { pointer-events: none; transition: none; }
.cfo-wheel.is-spinning .cfo-wcard::after,
.cfo-wheel.is-dragging .cfo-wcard::after { animation: none; opacity: 0; }
.cfo-orbit { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.cfo-orbit-ring { fill: none; stroke: rgba(148, 163, 184, 0.28); stroke-width: 1.5; stroke-dasharray: 4 8; }
.cfo-orbit-ring.is-outer { stroke: rgba(245, 166, 35, 0.12); stroke-width: 36; stroke-dasharray: none; }
/* The road: drawn by cfo-command.js as a band wide in front and thin behind.
   Same faint gold as the old ring; the divider is the dashed ring above it. */
.cfo-orbit-road { fill: rgba(245, 166, 35, 0.12); stroke: none; }

.cfo-wcard {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 148px;
    min-height: 80px;
    margin: -40px 0 0 -74px;
    padding: 10px 8px 9px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-top: 3px solid var(--g);
    background: #fff;
    color: var(--nx-navy);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    box-shadow: 0 10px 26px rgba(2, 6, 23, 0.4);
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-origin: 50% 50%;
}
.cfo-wcard .cfo-ico { width: 22px; height: 22px; color: #334155; }
.cfo-wcard:hover { box-shadow: 0 12px 28px rgba(2, 6, 23, 0.5), 0 0 0 2px rgba(245, 166, 35, 0.55); }
.cfo-wcard:focus-visible { outline: 3px solid var(--nx-amber); outline-offset: 3px; }
.cfo-wcard[aria-selected="true"] {
    background: linear-gradient(135deg, #FFD27A 0%, #F5A623 60%, #E08F0B 100%);
    border-color: #FFE2A8;
    color: #061C39;
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.35), 0 0 30px rgba(245, 166, 35, 0.7), 0 14px 30px rgba(2, 6, 23, 0.45);
}
.cfo-wcard[aria-selected="true"] .cfo-ico { color: #061C39; }
/* breathing halo: opacity-only, so the compositor animates it without repaints */
.cfo-wcard::after {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: 22px;
    background: radial-gradient(closest-side, rgba(245, 166, 35, 0.55), rgba(245, 166, 35, 0));
    opacity: 0;
    z-index: -1;
    pointer-events: none;
}
.cfo-wcard[aria-selected="true"]::after { animation: cfoHalo 2.4s ease-in-out infinite; }
@keyframes cfoHalo { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

/* the sun: command center hub */
.cfo-hub {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 236px;
    height: 236px;
    margin: -118px 0 0 -118px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 32%, #23324d 0%, #0f172a 72%);
    border: 2px solid rgba(245, 166, 35, 0.6);
    box-shadow: 0 0 0 12px rgba(245, 166, 35, 0.05), 0 0 80px rgba(245, 166, 35, 0.28), inset 0 0 40px rgba(2, 6, 23, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 22px 26px;
    z-index: 50;
}
.cfo-hub-eyebrow { font-size: 0.66rem; font-weight: 800; color: var(--nx-amber); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
.cfo-hub-item[hidden] { display: none; }
.cfo-hub-grp { font-size: 0.74rem; color: #94a3b8; }
.cfo-hub-title { font-family: 'Source Sans Pro', sans-serif; font-size: 1.15rem; font-weight: 800; color: #fff; line-height: 1.15; margin: 2px 0 8px; }
.cfo-hub-stat { font-family: 'Source Sans Pro', sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--nx-amber); line-height: 1; }
.cfo-hub-lab { font-size: 0.72rem; line-height: 1.35; color: #cbd5e1; margin-top: 5px; }
.cfo-hub-open {
    margin-top: 10px; padding: 7px 16px; border-radius: 999px;
    border: 1.5px solid var(--nx-amber); background: transparent; color: var(--nx-amber);
    font-family: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.cfo-hub-open:hover { background: var(--nx-amber); color: #061C39; }
.cfo-hub-open:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.cfo-orbit-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.cfo-legend-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cfo-legend-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(255, 255, 255, 0.04);
    color: #e2e8f0; font-family: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.cfo-legend-btn::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--g); }
.cfo-legend-btn:hover, .cfo-legend-btn.is-on { background: rgba(255, 255, 255, 0.1); border-color: var(--g); }
.cfo-legend-btn:focus-visible { outline: 2px solid var(--nx-amber); outline-offset: 2px; }
.cfo-wheel-ctrls { display: flex; align-items: center; gap: 12px; }
.cfo-spin {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(255, 255, 255, 0.04);
    color: #fff; font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.cfo-spin:hover { border-color: var(--nx-amber); color: var(--nx-amber); }
.cfo-spin:focus-visible { outline: 2px solid var(--nx-amber); outline-offset: 2px; }
.cfo-count { font-size: 0.86rem; font-weight: 700; color: #cbd5e1; font-variant-numeric: tabular-nums; min-width: 52px; text-align: center; }
.cfo-orbit-ctas { display: flex; gap: 10px; flex-wrap: wrap; }

/* overnight brief component (former hero) */
.cfo-brief-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.cfo-brief-sec .cfo-brief { max-width: 460px; justify-self: end; width: 100%; }

/* =============================================================
   STAGE - one topic at a time
   ============================================================= */
.cfo-stage { background: linear-gradient(180deg, #f1f5f9 0%, #fff 220px); padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 5vw, 4.5rem); }
.cfo-topic[hidden] { display: none; }
.cfo-topic { animation: cfoIn 0.4s ease both; }
@keyframes cfoIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.cfo-topic-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.cfo-topic-tags .cfo-status { margin: 0; }
.cfo-grp { font-size: 0.78rem; font-weight: 700; color: #1e293b; padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--nx-line); border-left: 4px solid var(--g); }
.cfo-topic-title {
    display: flex; align-items: center; gap: 12px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: clamp(1.45rem, 2.6vw, 2.1rem);
    font-weight: 800; line-height: 1.15; letter-spacing: -0.015em;
    color: var(--nx-navy); margin: 0 0 10px;
}
.cfo-topic-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--nx-navy); color: var(--nx-amber); }
.cfo-topic-ico .cfo-ico { width: 22px; height: 22px; }
.cfo-topic-pain { font-size: 1.05rem; line-height: 1.7; color: var(--nx-slate); max-width: 820px; margin: 0; }

.cfo-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.cfo-stat { background: var(--nx-navy); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; }
.cfo-stat-v { font-family: 'Source Sans Pro', sans-serif; font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 800; line-height: 1.05; color: var(--nx-amber); }
.cfo-stat-l { font-size: 0.92rem; line-height: 1.45; color: #e2e8f0; margin: 6px 0 10px; }
.cfo-src { margin-top: auto; font-size: 0.7rem; line-height: 1.4; color: #94a3b8; }
.cfo-stat.is-cap { background: #fff; border: 1px solid var(--nx-line); }
.cfo-stat.is-cap .cfo-stat-v { color: var(--nx-cyan-ink); font-size: clamp(1.25rem, 2vw, 1.55rem); }
.cfo-stat.is-cap .cfo-stat-l { color: var(--nx-slate); }
.cfo-src.is-cap { color: var(--nx-emerald-ink); font-weight: 700; }

.cfo-topic-visuals { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 18px; align-items: stretch; }
.cfo-fig { margin: 0; display: flex; flex-direction: column; }
.cfo-fig figcaption { font-size: 0.74rem; color: var(--nx-muted); margin-top: 8px; line-height: 1.45; }
.cfo-fig-chart { justify-content: center; background: #fff; border: 1px solid var(--nx-line); border-radius: 14px; padding: 18px 20px 14px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); }
.cfo-chart-title { font-weight: 700; font-size: 0.95rem; color: var(--nx-navy); margin-bottom: 12px; }
.cfo-svg { width: 100%; height: auto; display: block; overflow: visible; }
.cfo-svg .t-lab   { fill: #475569; font-size: 13px; font-family: 'Source Sans Pro', sans-serif; }
.cfo-svg .t-lab-b { fill: #0f172a; font-size: 14px; font-weight: 700; font-family: 'Source Sans Pro', sans-serif; }
.cfo-svg .t-val   { fill: #0f172a; font-size: 13px; font-weight: 700; font-family: 'Source Sans Pro', sans-serif; }
.cfo-svg .b-track { fill: #f1f5f9; }
.cfo-svg .b       { fill: #94a3b8; }
.cfo-svg .b-hi    { fill: var(--nx-amber); }
.cfo-svg .b-good  { fill: var(--nx-emerald); }
.cfo-svg .g-axis  { stroke: #cbd5e1; stroke-width: 1; }
.cfo-svg .g-grid  { stroke: #e2e8f0; stroke-width: 1; stroke-dasharray: 3 4; }
.cfo-svg .l-fc    { fill: none; stroke: #94a3b8; stroke-width: 2.5; stroke-dasharray: 6 5; }
.cfo-svg .l-act   { fill: none; stroke: var(--nx-amber); stroke-width: 3; }
.cfo-svg .d-act   { fill: var(--nx-amber); }
.cfo-svg .f-box   { fill: #f8fafc; stroke: #cbd5e1; }
.cfo-svg .f-bad   { fill: #fef2f2; stroke: #f87171; stroke-width: 1.5; }
.cfo-svg .f-arrow { stroke: #94a3b8; stroke-width: 2; marker-end: none; }
.cfo-legend { display: flex; gap: 16px; margin-top: 6px; font-size: 0.78rem; color: var(--nx-slate); }
.cfo-leg::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.cfo-leg.is-a::before { background: #94a3b8; }
.cfo-leg.is-b::before { background: var(--nx-amber); }

/* product view */
.cfo-app { flex: 1; background: #0b1324; border-radius: 14px; overflow: hidden; border: 1px solid #1e293b; box-shadow: 0 18px 44px rgba(15, 23, 42, 0.22); }
.cfo-app-bar { display: flex; align-items: center; gap: 6px; padding: 9px 14px; background: #111c33; border-bottom: 1px solid #1e293b; }
.cfo-app-bar i { width: 9px; height: 9px; border-radius: 50%; background: #334155; }
.cfo-app-bar span { margin-left: 8px; font-size: 0.72rem; font-weight: 700; color: #94a3b8; }
.cfo-app-body { padding: 16px 18px 18px; }
.cfo-app-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.cfo-app-title { font-weight: 700; font-size: 1rem; color: #f1f5f9; }
.cfo-app-sub { font-size: 0.76rem; color: #94a3b8; margin-top: 2px; }
.cfo-app-table { overflow-x: auto; }
.cfo-app table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.cfo-app th { text-align: left; font-size: 0.7rem; font-weight: 700; color: #64748b; padding: 0 10px 8px 0; border-bottom: 1px solid #1e293b; white-space: nowrap; }
.cfo-app td { padding: 9px 10px 9px 0; color: #e2e8f0; border-bottom: 1px solid rgba(30, 41, 59, 0.7); vertical-align: middle; }
.cfo-app tr.r-break td:first-child { box-shadow: inset 3px 0 0 #ef4444; padding-left: 9px; }
.cfo-app tr.r-hold td:first-child  { box-shadow: inset 3px 0 0 var(--nx-amber); padding-left: 9px; }
.cfo-app tr.r-ok td:first-child    { box-shadow: inset 3px 0 0 #10b981; padding-left: 9px; }
.cfo-chip { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.cfo-chip.is-ok    { color: #6ee7b7; background: rgba(16, 185, 129, 0.16); }
.cfo-chip.is-hold  { color: #fcd34d; background: rgba(245, 166, 35, 0.16); }
.cfo-chip.is-break { color: #fca5a5; background: rgba(239, 68, 68, 0.18); }
.cfo-chip.is-live-dot { color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.35); background: rgba(16, 185, 129, 0.1); }
.cfo-app-verdict { margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 0.8rem; font-weight: 600; color: #fde68a; background: rgba(245, 166, 35, 0.1); border: 1px solid rgba(245, 166, 35, 0.3); }

/* text row */
.cfo-topic-text { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.cfo-topic-text h4 { font-size: 0.85rem; font-weight: 800; margin: 0 0 10px; }
.cfo-col-leak, .cfo-col-fix { background: #fff; border: 1px solid var(--nx-line); border-radius: 14px; padding: 18px 20px; }
.cfo-col-leak { border-top: 3px solid var(--nx-red); }
.cfo-col-leak h4 { color: var(--nx-red-ink); }
.cfo-col-fix { border-top: 3px solid var(--nx-emerald); }
.cfo-col-fix h4 { color: var(--nx-emerald-ink); }
.cfo-topic-text ul, .cfo-topic-text ol { margin: 0; padding: 0; list-style: none; }
.cfo-topic-text li { position: relative; padding-left: 22px; font-size: 0.92rem; line-height: 1.55; color: var(--nx-slate); margin-bottom: 8px; }
.cfo-col-leak li::before { content: '×'; position: absolute; left: 0; top: -1px; font-weight: 800; color: var(--nx-red); }
.cfo-col-fix ol { counter-reset: fx; }
.cfo-col-fix li { counter-increment: fx; }
.cfo-col-fix li::before { content: counter(fx); position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--nx-emerald); color: #fff; font-size: 0.66rem; font-weight: 800; display: grid; place-items: center; }
.cfo-pull { margin: 0; padding: 20px 22px; border-radius: 14px; background: var(--nx-navy); color: #fff; display: flex; flex-direction: column; justify-content: center; }
.cfo-pull p { font-size: 1.08rem; line-height: 1.5; font-style: italic; margin: 0; }
.cfo-pull cite { display: block; margin-top: 10px; font-size: 0.8rem; font-style: normal; font-weight: 700; color: var(--nx-amber); }
.cfo-topic-text:not(:has(.cfo-pull)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.cfo-topic-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--nx-line); }
.cfo-step { border: 1px solid var(--nx-line); background: #fff; color: var(--nx-navy); font-family: inherit; font-weight: 700; font-size: 0.86rem; padding: 10px 16px; border-radius: 999px; cursor: pointer; }
.cfo-step:hover { border-color: var(--nx-amber); color: var(--nx-amber-ink); }
.cfo-step:focus-visible { outline: 2px solid var(--nx-amber); outline-offset: 2px; }

/* rollout spacing (compact section) */
.cfo-rollout .nx-note { margin-top: 18px; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1100px) {
    .cfo-orbit-foot { justify-content: center; }
}
@media (max-width: 1024px) {
    .cfo-calc { grid-template-columns: minmax(0, 1fr); }
    .cfo-calc-out { position: static; }
    .cfo-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cfo-topic-visuals { grid-template-columns: minmax(0, 1fr); }
    .cfo-topic-text, .cfo-topic-text:not(:has(.cfo-pull)) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
    .cfo-orbit-inner { padding: 0 1rem; }
    .cfo-orbit-lede { display: none; }
    .cfo-orbit-head .hero-badge { white-space: normal; font-size: 0.78rem; padding: 0.5rem 1rem; }
    .hero .cfo-orbit-title { font-size: 1.45rem; }
    .cfo-wheel { height: 340px; }
    .cfo-wcard { width: 58px; min-height: 58px; margin: -29px 0 0 -29px; padding: 0; border-radius: 50%; justify-content: center; }
    .cfo-wcard span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .cfo-hub { width: 150px; height: 150px; margin: -75px 0 0 -75px; padding: 12px; }
    .cfo-hub-eyebrow { font-size: 0.56rem; margin-bottom: 2px; }
    .cfo-hub-grp { display: none; }
    .cfo-hub-title { font-size: 0.92rem; margin-bottom: 4px; }
    .cfo-hub-stat { font-size: 1.15rem; }
    .cfo-hub-lab { display: none; }
    .cfo-hub-open { margin-top: 6px; padding: 5px 10px; font-size: 0.68rem; }
    .cfo-legend-btn { padding: 6px 10px; font-size: 0.74rem; }
    .cfo-orbit-ctas { width: 100%; justify-content: center; }
    .cfo-stats { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .cfo-stat { padding: 14px 16px; }
    .cfo-calc-in, .cfo-form-row, .cfo-checks, .cfo-plan { grid-template-columns: minmax(0, 1fr); }
    .cfo-row { grid-template-columns: minmax(0, 1fr) auto; }
    .cfo-row-state { grid-column: 2; padding: 3px 8px; }
    .cfo-brief { text-align: left; }
    .cfo-topic-foot .btn { display: none; }
    .cfo-sticky span { display: none; }
    .cfo-sticky { padding: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .cfo-wcard[aria-selected="true"]::after { animation: none; opacity: 0.7; }
    .cfo-topic { animation: none; }
    .cfo-sticky { transition: none; }
}

/* =============================================================
   FLOATING MINI ORBIT - top-left once the hero scrolls away
   ============================================================= */
.cfo-mini {
    position: fixed;
    top: calc(var(--navbar-h) + 14px);
    left: 16px;
    z-index: 990;
    width: 256px;
    padding: 10px 10px 10px;
    border-radius: 18px;
    background: radial-gradient(120% 90% at 50% 40%, #12223d 0%, #0b1324 75%);
    border: 1px solid rgba(245, 166, 35, 0.4);
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.45), 0 0 0 4px rgba(245, 166, 35, 0.06);
    opacity: 0;
    transform: translate3d(-16px, -8px, 0) scale(0.92);
    transform-origin: top left;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.cfo-mini.is-on { opacity: 1; transform: none; visibility: visible; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s; }
.cfo-mini-orbit { position: relative; height: 150px; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.cfo-mini-orbit.is-dragging { cursor: grabbing; }
.cfo-mini-orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cfo-mini-orbit .cfo-orbit-ring { stroke: rgba(148, 163, 184, 0.35); stroke-width: 1; }
.cfo-mcard {
    position: absolute; left: 50%; top: 50%;
    width: 32px; height: 32px; margin: -16px 0 0 -16px; padding: 0;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.85); border-top: 2px solid var(--g);
    background: #fff; color: #334155;
    display: grid; place-items: center; cursor: pointer;
    will-change: transform, opacity;
    box-shadow: 0 4px 10px rgba(2, 6, 23, 0.4);
}
.cfo-mcard .cfo-ico { width: 15px; height: 15px; }
.cfo-mcard[aria-selected="true"] { background: linear-gradient(135deg, #FFD27A, #F5A623); color: #061C39; border-color: #FFE2A8; box-shadow: 0 0 14px rgba(245, 166, 35, 0.8); }
.cfo-mcard:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cfo-mini-orbit.is-spinning .cfo-mcard, .cfo-mini-orbit.is-dragging .cfo-mcard { pointer-events: none; }
.cfo-mini-hub {
    position: absolute; left: 50%; top: 50%;
    width: 128px; height: 62px; margin: -31px 0 0 -64px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #23324d 0%, #0f172a 75%);
    border: 1.5px solid rgba(245, 166, 35, 0.7);
    box-shadow: 0 0 20px rgba(245, 166, 35, 0.25);
    color: #fff; font-family: inherit; cursor: pointer; z-index: 50;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0 6px;
}
.cfo-mini-hub:hover { border-color: var(--nx-amber); box-shadow: 0 0 26px rgba(245, 166, 35, 0.5); }
.cfo-mini-hub:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cfo-mini-hub-e { font-size: 0.52rem; white-space: nowrap; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nx-amber); }
.cfo-mini-hub-t { font-size: 0.74rem; font-weight: 700; line-height: 1.1; text-align: center; white-space: nowrap; max-width: 112px; overflow: hidden; text-overflow: ellipsis; }
.cfo-mini-back {
    display: block; width: 100%; margin-top: 6px; padding: 6px 8px;
    border: 0; border-radius: 10px; background: rgba(245, 166, 35, 0.12);
    color: var(--nx-amber); font-family: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer;
}
.cfo-mini-back:hover { background: var(--nx-amber); color: #061C39; }
.cfo-mini-back:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* keep the details clear of the floating mini on wide screens */
@media (min-width: 1025px) and (max-width: 1780px) { .cfo-stage .nx-wrap { padding-left: 296px; } }
@media (max-width: 768px) {
    .cfo-mini { top: calc(var(--navbar-h) + 8px); left: 8px; width: 118px; padding: 4px; border-radius: 14px; }
    .cfo-mini-orbit { height: 70px; }
    .cfo-mcard { width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 6px; border-top-width: 1px; }
    .cfo-mcard .cfo-ico { width: 10px; height: 10px; }
    .cfo-mini-hub { width: 58px; height: 30px; margin: -15px 0 0 -29px; }
    .cfo-mini-hub-e { display: none; }
    .cfo-mini-hub-t { font-size: 0.5rem; max-width: 52px; }
    .cfo-mini-back { display: none; }
    .cfo-stage { padding-top: 96px; }
}
@media (prefers-reduced-motion: reduce) { .cfo-mini, .cfo-mini.is-on { transition: none; } }
#stage { scroll-margin-top: calc(var(--navbar-h) + 16px); }

/* =============================================================
   HERO SPLIT - orbit left, live product view right  (v8)
   ============================================================= */
.hero .cfo-orbit-title { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.cfo-hero-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: center;
    margin-top: clamp(0.75rem, 2vw, 1.5rem);
}
.cfo-hero-left { min-width: 0; }
.cfo-hero-left .cfo-wheel { height: clamp(320px, 28vw, 400px); margin: 0; }
.cfo-hero-left .cfo-wcard { width: 116px; min-height: 66px; margin: -33px 0 0 -58px; font-size: 0.76rem; padding: 8px 6px 7px; gap: 4px; }
.cfo-hero-left .cfo-wcard .cfo-ico { width: 19px; height: 19px; }
.cfo-hero-left .cfo-hub { width: 190px; height: 112px; margin: -56px 0 0 -95px; padding: 10px 14px; border-radius: 50%; }
.cfo-hero-left .cfo-hub-title { font-size: 0.92rem; margin: 0 0 3px; }
.cfo-hero-left .cfo-hub-eyebrow { font-size: 0.58rem; margin-bottom: 3px; }
.cfo-hero-left .cfo-hub-stat { font-size: 1.2rem; }
.cfo-hero-left .cfo-wheel-ctrls { justify-content: center; margin-top: 6px; }
.cfo-hint { font-size: 0.78rem; color: #94a3b8; margin-left: 6px; }

.cfo-hero-right { min-width: 0; text-align: left; }
.cfo-view[hidden] { display: none; }
.cfo-view { animation: cfoViewIn 0.45s ease both; }
@keyframes cfoViewIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.cfo-view-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cfo-view-tags .cfo-status { margin: 0; }
.cfo-grp.is-dark { background: rgba(255, 255, 255, 0.06); color: #e2e8f0; border-color: rgba(148, 163, 184, 0.3); border-left-color: var(--g); }
.cfo-hero-right .cfo-app { box-shadow: 0 24px 60px rgba(2, 6, 23, 0.55); }
.cfo-view-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.cfo-view-cap { font-size: 0.74rem; color: #94a3b8; }
.cfo-view-details {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px; border-radius: 999px;
    border: 1.5px solid var(--nx-amber); background: var(--nx-amber); color: #061C39;
    font-family: inherit; font-size: 0.86rem; font-weight: 400; cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.cfo-view-details:hover { background: transparent; color: var(--nx-amber); }
.cfo-view-details:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cfo-view-details span { display: inline-block; animation: cfoNudge 1.6s ease-in-out infinite; }
@keyframes cfoNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* =============================================================
   DETAILS - flowchart with animated connectors
   ============================================================= */
.cfo-stage { padding-top: clamp(2.5rem, 4vw, 3.5rem); }
.cfo-topic-title { font-size: clamp(1.45rem, 2.4vw, 2rem); }
.cfo-detail-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 24px; align-items: start; }
.cfo-sub { font-size: 0.85rem; font-weight: 600; color: var(--nx-slate); margin: 0 0 14px; }
.cfo-detail-flow { background: #fff; border: 1px solid #edf1f5; border-radius: 16px; padding: 22px 24px; }
.cfo-detail-side { display: grid; gap: 16px; }

.cfo-flow { list-style: none; margin: 0; padding: 0; }
.cfo-flow-step {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    position: relative;
    padding-bottom: 26px;
}
.cfo-flow-step:last-child { padding-bottom: 0; }
.cfo-flow-block {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    border-radius: 10px;
    background: var(--fb, #f1f5f9);
    border: 1px solid var(--fl, #e2e8f0);
    color: #1e293b;
    font-weight: 400; font-size: 0.92rem; line-height: 1.3;
}
/* soft, muted palette - one tone per step */
.cfo-flow-step:nth-child(7n+1) { --fb: #eef3f9; --fl: #d9e3ef; --fn: #5b7aa0; }
.cfo-flow-step:nth-child(7n+2) { --fb: #eef6f2; --fl: #d6e8de; --fn: #4f8a6c; }
.cfo-flow-step:nth-child(7n+3) { --fb: #f4f1f8; --fl: #e3dcec; --fn: #7b6a9a; }
.cfo-flow-step:nth-child(7n+4) { --fb: #f8f4ec; --fl: #ebe1cf; --fn: #9a7b45; }
.cfo-flow-step:nth-child(7n+5) { --fb: #edf5f6; --fl: #d5e6e9; --fn: #4f8590; }
.cfo-flow-step:nth-child(7n+6) { --fb: #f7f0f2; --fl: #eadbe0; --fn: #96637a; }
.cfo-flow-step:nth-child(7n+7) { --fb: #f1f3f5; --fl: #dde2e8; --fn: #5f6b7a; }
.cfo-flow-n {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center;
    background: #fff; border: 1px solid var(--fl, #e2e8f0); color: var(--fn, #64748b);
    font-size: 0.72rem; font-weight: 600;
}
.cfo-flow-text { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--nx-muted); }

/* animated connector: dashes flow downward between blocks, arrowhead on arrival */
.cfo-flow-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 114px;
    bottom: 2px;
    width: 3px;
    height: 22px;
    background-image: linear-gradient(to bottom, #b8c2cf 50%, transparent 50%);
    background-size: 3px 8px;
    animation: cfoFlowDash 0.7s linear infinite;
}
.cfo-flow-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 109px;
    bottom: -4px;
    border-left: 6.5px solid transparent;
    border-right: 6.5px solid transparent;
    border-top: 8px solid #b8c2cf;
}
@keyframes cfoFlowDash { from { background-position: 0 0; } to { background-position: 0 8px; } }

/* steps cascade in each time a topic opens */
.cfo-topic:not([hidden]) .cfo-flow-step { animation: cfoStepIn 0.45s ease both; animation-delay: calc(var(--k) * 110ms); }
@keyframes cfoStepIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }

.cfo-foot-ctas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 1024px) {
    .cfo-hero-split { grid-template-columns: minmax(0, 1fr); }
    .cfo-detail-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
    .cfo-hero-left .cfo-wheel { height: 320px; }
    .cfo-hero-left .cfo-wcard { width: 56px; min-height: 56px; margin: -28px 0 0 -28px; padding: 0; }
    .cfo-hero-left .cfo-hub { width: 140px; height: 86px; margin: -43px 0 0 -70px; padding: 6px 10px; }
    .cfo-hero-left .cfo-hub-eyebrow { display: none; }
    .cfo-hero-left .cfo-hub-title { font-size: 0.86rem; }
    .cfo-hero-left .cfo-hub-stat { font-size: 1.1rem; }
    .cfo-hint { display: none; }
    .cfo-flow-step { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-bottom: 30px; }
    .cfo-flow-step:not(:last-child)::after { left: 24px; }
    .cfo-flow-step:not(:last-child)::before { left: 19px; }
    .cfo-flow-text { padding-left: 4px; }
    .cfo-detail-flow { padding: 18px 16px; }
    .cfo-view-foot { flex-direction: column; align-items: stretch; }
    .cfo-app-body { padding: 12px; }
    .cfo-app table { font-size: 0.72rem; }
    .cfo-app td, .cfo-app th { padding-right: 6px; }
    .cfo-chip { padding: 2px 6px; font-size: 0.64rem; }
    .cfo-view-details { justify-content: center; }
    .cfo-topic-foot { flex-wrap: wrap; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .cfo-flow-step:not(:last-child)::after, .cfo-view-details span { animation: none; }
    .cfo-topic:not([hidden]) .cfo-flow-step, .cfo-view { animation: none; }
}

/* =============================================================
   COMPACT HERO (v12): heading top-left over the orbit, product
   view top-aligned on the right; the hero takes part of the screen.
   ============================================================= */
.hero.cfo-orbit-hero { padding-top: calc(var(--navbar-h) + 1.1rem); padding-bottom: 1.4rem; text-align: left; }
.cfo-hero-split { align-items: start; margin-top: 0; gap: clamp(1.25rem, 3vw, 2.75rem); }
.cfo-hero-left .cfo-orbit-head { align-items: flex-start; text-align: left; gap: 8px; }
.cfo-orbit-head .hero-badge { padding: 0.4rem 0.95rem; font-size: 0.8rem; }
.hero .cfo-orbit-title { font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.15; margin: 0; }
.cfo-hero-left .cfo-wheel { height: 360px; margin-top: -6px; }
.cfo-hero-left .cfo-wcard { width: 108px; min-height: 60px; margin: -30px 0 0 -54px; font-size: 0.72rem; padding: 7px 6px 6px; }
.cfo-hero-left .cfo-wcard .cfo-ico { width: 17px; height: 17px; }
.cfo-hero-left .cfo-hub { width: 168px; height: 92px; margin: -46px 0 0 -84px; padding: 6px 12px; }
.cfo-hero-left .cfo-hub-title { font-size: 0.86rem; }
.cfo-hero-left .cfo-hub-stat { font-size: 1.08rem; }
.cfo-hero-left .cfo-wheel-ctrls { margin-top: 0; }
.cfo-hero-left .cfo-spin { width: 34px; height: 34px; font-size: 1.15rem; }

/* product view, tightened */
.cfo-view-tags { margin-bottom: 8px; }
.cfo-view-tags .cfo-grp, .cfo-view-tags .cfo-status { padding: 3px 10px; font-size: 0.72rem; }
.cfo-hero-right .cfo-app-bar { padding: 7px 12px; }
.cfo-hero-right .cfo-app-body { padding: 12px 16px 14px; }
.cfo-hero-right .cfo-app-head { margin-bottom: 8px; }
.cfo-hero-right .cfo-app td { padding-top: 7px; padding-bottom: 7px; }
.cfo-hero-right .cfo-app-verdict { margin-top: 10px; padding: 8px 12px; }
.cfo-view-foot { margin-top: 10px; }
.cfo-view-details { padding: 8px 16px; font-size: 0.82rem; }

@media (max-width: 1024px) {
    .hero.cfo-orbit-hero { text-align: center; }
    .cfo-hero-left .cfo-orbit-head { align-items: center; text-align: center; }
}
@media (max-width: 768px) {
    .cfo-hero-left .cfo-wheel { height: 320px; }
    .cfo-hero-left .cfo-wcard { width: 50px; min-height: 50px; margin: -25px 0 0 -25px; padding: 0; }
    .cfo-hero-left .cfo-hub { width: 130px; height: 74px; margin: -37px 0 0 -65px; }
}

/* two-way spin cue: hooked arrows either side of the front seat,
   light blue, comet tail and a soft glow (replaces the ‹ 1/8 › controls) */
.cfo-spin-hint { position: absolute; left: 50%; top: calc(50% + 102px); width: min(360px, 70%); height: 58px; transform: translateX(-50%); pointer-events: none; z-index: 70; }
.cfo-arc { position: absolute; bottom: 0; width: 84px; height: 58px; }
.cfo-arc.is-left { left: 0; }
.cfo-arc.is-right { right: 0; transform: scaleX(-1); }
.cfo-arc svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 1.5px rgba(186, 230, 253, 0.95)) drop-shadow(0 0 5px rgba(56, 189, 248, 0.55)); }
.cfo-arc-comet { stroke-dasharray: 18 100; stroke-dashoffset: 18; animation: cfoComet 2.6s cubic-bezier(.45, 0, .25, 1) infinite; }
.cfo-arc.is-right .cfo-arc-comet { animation-delay: 1.3s; }
@keyframes cfoComet { 0% { stroke-dashoffset: 18; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
@media (max-width: 768px) { .cfo-spin-hint { top: calc(50% + 84px); width: 80%; height: 44px; } .cfo-arc { width: 64px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .cfo-arc-comet { animation: none; opacity: 0; } }

/* =============================================================
   TALK TO US - modal
   ============================================================= */
.cfo-talk { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; }
.cfo-talk[hidden] { display: none; }
html.cfo-talk-open { overflow: hidden; }
.cfo-talk-backdrop { position: absolute; inset: 0; background: rgba(2, 6, 23, 0.62); backdrop-filter: blur(3px); animation: cfoFade 0.2s ease both; }
.cfo-talk-dialog {
    position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto;
    background: #fff; border-radius: 16px; box-shadow: 0 30px 80px rgba(2, 6, 23, 0.45);
    animation: cfoPop 0.25s ease both; text-align: left;
}
@keyframes cfoFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cfoPop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.cfo-talk-head { background: #061C39; border-bottom: 4px solid #F5A623; padding: 16px 22px; }
.cfo-talk-logo { height: 28px; width: auto; display: block; }
.cfo-talk-x {
    position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border-radius: 50%;
    border: 0; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.cfo-talk-x:hover { background: rgba(255, 255, 255, 0.2); }
.cfo-talk-x:focus-visible { outline: 2px solid #F5A623; outline-offset: 2px; }
.cfo-talk-body, .cfo-talk-done { padding: 22px 24px 24px; }
.cfo-talk-title { font-family: 'Source Sans Pro', sans-serif; font-size: 1.45rem; font-weight: 800; color: #061C39; margin: 0 0 4px; }
.cfo-talk-sub { font-size: 0.92rem; line-height: 1.5; color: var(--nx-slate, #475569); margin: 0 0 16px; }
.cfo-talk label { display: block; font-size: 0.85rem; font-weight: 600; color: #1e293b; margin-bottom: 12px; }
.cfo-talk input:not(.cfo-hp), .cfo-talk textarea {
    display: block; width: 100%; margin-top: 5px; padding: 10px 12px;
    border: 1px solid #e2e8f0; border-radius: 10px; font-family: inherit; font-size: 16px; color: #0f172a; background: #fff;
}
.cfo-talk input:focus, .cfo-talk textarea:focus { outline: none; border-color: #F5A623; box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.2); }
.cfo-talk [aria-invalid="true"] { border-color: #ef4444 !important; }
.cfo-talk textarea { resize: vertical; min-height: 72px; }
.cfo-talk-msg { min-height: 1.2em; margin: 10px 0 0; font-size: 0.86rem; font-weight: 600; }
.cfo-talk-msg.is-err { color: #b91c1c; }
.cfo-talk-msg a { color: inherit; }
.cfo-talk-done { text-align: center; }
.cfo-talk-check { width: 54px; height: 54px; margin: 6px auto 12px; border-radius: 50%; display: grid; place-items: center; background: rgba(16, 185, 129, 0.12); color: #059669; font-size: 1.6rem; font-weight: 800; }
.cfo-talk-done .btn { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .cfo-talk-backdrop, .cfo-talk-dialog { animation: none; } }

/* =============================================================
   PHONES (v18): a compact orbit so the whole thing, and the top of
   the product view, fit on one screen. Small regular-weight labels
   on two lines; far cards miniaturised; a prominent nucleus.
   Desktop and tablet are unchanged.
   ============================================================= */
.cfo-mbr { display: none; }
@media (max-width: 600px) {
    .hero.cfo-orbit-hero { padding-top: calc(var(--navbar-h) + 0.6rem); padding-bottom: 0.9rem; }
    .cfo-orbit-head { gap: 6px; }
    .cfo-orbit-head .hero-badge { font-size: 0.7rem; padding: 0.3rem 0.8rem; }
    .hero .cfo-orbit-title { font-size: 1.5rem; line-height: 1.15; }

    .cfo-hero-left .cfo-wheel { height: 290px; margin-top: 0; }
    .cfo-mbr { display: inline; }
    .cfo-hero-left .cfo-wcard {
        width: 92px; min-height: 46px; margin: -23px 0 0 -46px;
        padding: 6px 6px 5px; border-radius: 11px; gap: 2px;
        font-size: 0.68rem; font-weight: 400; line-height: 1.15; justify-content: center;
        border-top-width: 2px;
    }
    .cfo-hero-left .cfo-wcard span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
    .cfo-hero-left .cfo-wcard .cfo-ico { width: 14px; height: 14px; }
    .cfo-hero-left .cfo-wcard[aria-selected="true"] { font-weight: 600; }

    /* the nucleus */
    .cfo-hero-left .cfo-hub {
        width: 150px; height: 86px; margin: -43px 0 0 -75px; padding: 6px 12px;
        border-width: 2px; border-color: rgba(245, 166, 35, 0.9);
        box-shadow: 0 0 0 6px rgba(245, 166, 35, 0.08), 0 0 34px rgba(245, 166, 35, 0.45), inset 0 0 24px rgba(2, 6, 23, 0.6);
    }
    .cfo-hero-left .cfo-hub-eyebrow { display: block; font-size: 0.55rem; margin-bottom: 2px; letter-spacing: 0.08em; }
    .cfo-hero-left .cfo-hub-title { font-size: 0.8rem; margin: 0 0 2px; }
    .cfo-hero-left .cfo-hub-stat { font-size: 1.05rem; }

    .cfo-spin-hint { top: auto; bottom: -2px; width: 74%; height: 30px; }
    .cfo-arc { width: 44px; height: 30px; }
    .cfo-hero-right { margin-top: -4px; }
}

/* The two curved spin arrows are retired: the wheel turns by itself now.
   Hidden here too, so a page still carrying their markup never shows them. */
.cfo-spin-hint { display: none !important; }

/* =============================================================
   LEFT RAIL - integrations panel, mini orbit beneath it
   Wide screens: one fixed column in the left margin. cfo-command.js
   sets its top: just under the hero, then pinned under the navbar.
   The mini orbit sits in the column, so it drops in BELOW the panel
   and the two can never overlap. Narrower: the panel is a strip under
   the hero and the mini orbit floats top-left as before.
   Tile and panel look come from nx-intake.css (the Nexus strip).
   ============================================================= */
.cfo-rail { position: relative; z-index: 990; max-width: 1200px; margin: 1.25rem auto 0; padding: 0 2rem; }
.cfo-intake { gap: 16px; }
.cfo-intake .nx-intake-title { color: var(--white); }

@media (min-width: 1025px) {
    .cfo-rail {
        position: fixed; left: 16px; top: calc(var(--navbar-h) + 14px);
        /* the margin's width, never under the mini orbit's 256px nor over 440px */
        width: clamp(256px, calc((100vw - 1200px) / 2), 440px); max-width: none; margin: 0; padding: 0;
        display: flex; flex-direction: column; gap: 12px;
    }
    .cfo-rail .cfo-mini { position: static; top: auto; left: auto; width: auto; }
    /* opaque here: the stage behind is light, and a see-through panel greys out.
       Same ground as the mini orbit beneath it, so the column reads as one. */
    .cfo-rail .cfo-intake { background: radial-gradient(120% 90% at 50% 40%, #12223d 0%, #0b1324 75%); }
    .cfo-intake { padding: 14px 12px 16px; gap: 12px; border-radius: 18px; }
    .cfo-intake .nx-intake-title { font-size: 0.86rem; line-height: 1.35; }
    .cfo-intake .nx-intake-tile { width: 104px; height: 46px; margin-right: 10px; border-radius: 10px; --nx-logo-h: 28px; padding: 0 8px; }
    .cfo-intake .nx-intake-track { animation-duration: 34s; }      /* 13 tiles x 114px, same pace as the Nexus strip */
}
@media (max-width: 1024px) {
    .cfo-rail .cfo-mini { position: fixed; }
}

/* =============================================================
   DISSOLVE - product view (hero, right) and topic text (below)
   Out 0.35s, in 0.6s; cfo-command.js waits for the out before the in.
   !important and the doubled class beat animations.css, which cuts
   every transition to 0.01ms under "reduce motion": a gentle opacity
   fade is what was asked for here, and it never moves anything.
   ============================================================= */
/* the old pop-in keyframes (cfoIn, cfoViewIn) were the jump: off */
.cfo-hero-right .cfo-view, .cfo-stage .cfo-topic { animation: none !important; opacity: 1; transition: opacity 0.6s ease !important; }
.cfo-hero-right .cfo-view.is-fading, .cfo-stage .cfo-topic.is-fading { opacity: 0; transition: opacity 0.35s ease !important; }
.cfo-hero-right .cfo-view.is-entering, .cfo-stage .cfo-topic.is-entering { opacity: 0; transition: none !important; }


/* ── CFO 360 logo in the orbit centre (Oct 2026) ───────────────────────
   assets/images/products/cfo360-on-navy.png: the stacked product logo with
   white "CFO" for the navy centre (cfo360.png is the light-background one).
   The centre grows a little so the logo, topic and number all fit. */
.cfo-hero-left .cfo-hub { width: 196px !important; height: 128px !important; margin: -64px 0 0 -98px !important; padding: 6px 12px !important; }
.cfo-hub img.cfo-360-logo { display: block !important; height: 58px !important; width: auto !important; max-width: none !important; margin: 0 auto 2px !important; }
.cfo-mini-hub img.cfo-360-logo-mini { display: block !important; height: 30px !important; width: auto !important; max-width: none !important; margin: 0 auto 1px !important; }
@media (max-width: 600px) {
    .cfo-hero-left .cfo-hub { width: 156px !important; height: 104px !important; margin: -52px 0 0 -78px !important; }
    .cfo-hub img.cfo-360-logo { height: 44px !important; }
    .cfo-mini-hub img.cfo-360-logo-mini { height: 22px !important; }
}

/* ── Orbit centre: no border, no ring (Oct 2026) ────────────────────────
   The centre dissolves into the panel like a soft galaxy core: a light
   radial glow that fades to transparent, no oval edge, no gold outline. */
.cfo-wheel .cfo-hub {
    border: 0 !important;
    box-shadow: none !important;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(52, 72, 110, 0.55) 0%,
        rgba(24, 40, 70, 0.38) 38%,
        rgba(245, 166, 35, 0.06) 58%,
        rgba(6, 28, 57, 0) 74%) !important;
}
.cfo-mini-orbit .cfo-mini-hub {
    border: 0 !important;
    box-shadow: none !important;
    background: radial-gradient(ellipse at 50% 50%, rgba(52, 72, 110, 0.6) 0%, rgba(6, 28, 57, 0) 72%) !important;
}