/* ==========================================================================
   Command Force - 2026 marketing homepage
   Standalone stylesheet. Deliberately does NOT depend on bootstrap.css or
   agency.css so the rest of the app keeps its old theme untouched.
   Every selector is namespaced under .cf-home to avoid collisions.
   ========================================================================== */

:root {
    --cf-navy-900: #050d19;
    --cf-navy-800: #0a1628;
    --cf-navy-700: #0d1e35;
    --cf-navy-600: #12283f;
    --cf-blue: #1a6cf5;
    --cf-blue-dark: #0d55d0;
    --cf-blue-light: #4d92ff;
    --cf-ink: #0f172a;
    --cf-body: #475569;
    --cf-muted: #64748b;
    --cf-line: #e2e8f0;
    --cf-tint: #eef4fb;
    --cf-white: #ffffff;
    --cf-green: #16a34a;
    --cf-amber: #f59e0b;
    --cf-red: #dc2626;
    --cf-container: 1280px;
    --cf-radius: 10px;
}

.cf-home * { box-sizing: border-box; }

.cf-home {
    margin: 0;
    font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--cf-body);
    background: var(--cf-white);
    -webkit-font-smoothing: antialiased;
}

/* These element resets are wrapped in :where() so they carry (0,0,1)
   specificity. Plain `.cf-home p` would be (0,1,1) and would silently beat
   every single-class component rule below it - which is exactly how the
   button labels and the paragraph spacing broke on the first pass. */
:where(.cf-home) h1,
:where(.cf-home) h2,
:where(.cf-home) h3,
:where(.cf-home) h4 {
    margin: 0;
    color: var(--cf-ink);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

:where(.cf-home) p { margin: 0; }
:where(.cf-home) a { color: var(--cf-blue); text-decoration: none; }
:where(.cf-home) a:hover { color: var(--cf-blue-dark); }
:where(.cf-home) img { max-width: 100%; height: auto; display: block; }
:where(.cf-home) ul { margin: 0; padding: 0; list-style: none; }

.cf-container {
    width: 100%;
    max-width: var(--cf-container);
    margin: 0 auto;
    padding: 0 32px;
}

/* Skip link — keyboard users shouldn't have to tab the whole nav */
.cf-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--cf-blue);
    color: #fff;
    padding: 12px 20px;
    z-index: 200;
}
.cf-skip:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.cf-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
    white-space: nowrap;
}

/* Scoped with .cf-home so these beat the generic `.cf-home a` link colour
   (0,1,1) - without the prefix the labels inherit blue and vanish on the
   blue fill. */
.cf-home .cf-btn-primary { background: var(--cf-blue); color: #fff; }
.cf-home .cf-btn-primary:hover { background: var(--cf-blue-dark); color: #fff; }

.cf-home .cf-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.cf-home .cf-btn-ghost:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.6); }

.cf-btn-lg { padding: 16px 30px; font-size: 16px; }

.cf-btn svg { flex: none; }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.cf-nav {
    background: var(--cf-navy-900);
    position: sticky;
    top: 0;
    z-index: 100;
}

.cf-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 68px;
}

.cf-home .cf-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}
.cf-home .cf-brand:hover { color: #fff; }
.cf-brand-mark { flex: none; }
.cf-brand-accent { color: var(--cf-blue-light); }

.cf-nav-links {
    display: flex;
    align-items: center;
    gap: 34px;
}
.cf-nav-links a {
    color: rgba(255,255,255,.86);
    font-size: 15px;
    font-weight: 500;
}
.cf-nav-links a:hover { color: #fff; }

.cf-nav-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}
.cf-nav-login { color: rgba(255,255,255,.9); font-size: 15px; font-weight: 600; }
.cf-nav-login:hover { color: #fff; }
.cf-nav-menu-login { display: none; } /* the hamburger menu's Log In - shown in the <=860px block */
/* Just above the hamburger breakpoint the full nav - five links, Log In, Start Free - is wider than
   the window (861px measured 898px wide, 2026-10-09). Close the link spacing in that band only. */
@media (min-width: 861px) and (max-width: 960px) {
    .cf-nav-links { gap: 20px; }
    .cf-nav-inner { gap: 18px; }
}

.cf-nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 6px;
    padding: 8px 10px;
    color: #fff;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.cf-hero {
    background:
        radial-gradient(1100px 520px at 78% 18%, rgba(26,108,245,.22), transparent 62%),
        linear-gradient(180deg, var(--cf-navy-800) 0%, var(--cf-navy-700) 100%);
    padding: 76px 0 0;
    overflow: hidden;
}

.cf-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
    gap: 56px;
    align-items: start;
}
/* Grid children default to min-width:auto, which lets the wide mockup push
   the whole track - and the page - past the viewport. */
.cf-hero-grid > * { min-width: 0; }

.cf-eyebrow {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid rgba(77,146,255,.45);
    border-radius: 999px;
    background: rgba(26,108,245,.12);
    color: #9dc2ff;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 26px;
}

.cf-hero h1 {
    color: #fff;
    font-size: 58px;
    font-weight: 800;
    letter-spacing: -0.035em;
    margin-bottom: 24px;
}
.cf-hero h1 span { display: block; }
.cf-hero h1 .cf-hl { color: var(--cf-blue); }

.cf-hero-lede {
    color: rgba(226,236,250,.82);
    font-size: 17.5px;
    line-height: 1.62;
    max-width: 30em;
    margin-bottom: 30px;
}

/* Sized to keep all four points on a single row at desktop widths, matching
   the comp. */
.cf-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-bottom: 34px;
}
.cf-hero-points li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.cf-hero-points svg { color: var(--cf-blue-light); flex: none; }

.cf-hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; padding-bottom: 70px; }

/* --------------------------------------------------------------------------
   Hero image: a screenshot of the real Dash Stats page (/statistics/), 2026-09-27.
   Replaced a hand-built HTML mockup (.cf-shot*, .cf-kpi*, .cf-aging*, ...) of a
   dashboard the product never had; those rules went with it.
   -------------------------------------------------------------------------- */

.cf-hero-shot { min-width: 0; transform: translateY(6px); }
.cf-hero-shot img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 34px 70px rgba(0,0,0,.5);
}
/* Two-column hero only: let the shot run into the right-hand margin so its charts
   stay readable. The extra width is whatever margin the viewport has beyond the
   1280px container (never past the window edge - .cf-hero is overflow:hidden),
   capped at 120px. */
@media (min-width: 1025px) {
    .cf-hero-shot img { width: calc(100% + clamp(0px, (100vw - var(--cf-container)) / 2 + 20px, 120px)); max-width: none; }
}

/* Hero slideshow, 2026-10-12: the screenshots stacked in .cf-hero-slides crossfade
   (js/cf-hero-slides.js). The first slide stays in the flow and sets the height; the
   others lie exactly over it. All slides share the 1440:1334 shape, so nothing moves.
   Until the script marks the stack .is-live, only the first slide shows. */
.cf-hero-slides { position: relative; }
.cf-hero-slide { display: block; transition: opacity 1.2s ease; }
.cf-hero-slide + .cf-hero-slide { position: absolute; top: 0; left: 0; right: 0; opacity: 0; }
.cf-hero-slides.is-live .cf-hero-slide { opacity: 0; }
.cf-hero-slides.is-live .cf-hero-slide.is-active { opacity: 1; }

/* --------------------------------------------------------------------------
   Trust bar
   -------------------------------------------------------------------------- */

.cf-trust {
    background: var(--cf-navy-600);
    border-top: 1px solid rgba(255,255,255,.07);
    padding: 26px 0;
}
.cf-trust-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 28px 40px;
}
.cf-trust-label {
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.45;
    text-transform: uppercase;
    letter-spacing: .02em;
    max-width: 15em;
}
.cf-trust-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 26px 46px;
}
.cf-stat { display: flex; align-items: center; gap: 12px; }
.cf-stat svg { color: var(--cf-blue-light); flex: none; }
.cf-stat-value { color: #fff; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.cf-stat-label { color: rgba(226,236,250,.62); font-size: 12px; font-weight: 500; }

/* --------------------------------------------------------------------------
   Platform / features
   -------------------------------------------------------------------------- */

.cf-platform { background: #fff; padding: 78px 0; }

.cf-platform-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 2fr);
    gap: 48px;
    align-items: start;
}

.cf-kicker {
    color: var(--cf-blue);
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    margin-bottom: 16px;
}

.cf-platform h2 { font-size: 30px; font-weight: 800; margin-bottom: 18px; }
.cf-platform h2 .cf-hl { color: var(--cf-blue); display: block; }
.cf-platform-lede { font-size: 15.5px; line-height: 1.65; margin-bottom: 22px; }

.cf-textlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 700;
}

.cf-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.cf-feature {
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    padding: 24px 22px 20px;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.cf-feature:hover {
    border-color: #c7dcff;
    box-shadow: 0 10px 26px rgba(15,23,42,.07);
    transform: translateY(-2px);
}
.cf-feature-icon { color: var(--cf-blue); margin-bottom: 16px; }
.cf-feature h3 { font-size: 16px; font-weight: 700; margin-bottom: 9px; }
.cf-feature p { font-size: 13.5px; line-height: 1.6; color: var(--cf-muted); margin-bottom: 16px; }
.cf-feature .cf-textlink { font-size: 13px; margin-top: auto; }

/* --------------------------------------------------------------------------
   Benefits band
   -------------------------------------------------------------------------- */

.cf-benefits { background: var(--cf-tint); padding: 46px 0; }
.cf-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px;
}
.cf-benefit { display: flex; align-items: flex-start; gap: 18px; }
.cf-benefit-icon { color: var(--cf-blue); flex: none; }
.cf-benefit h3 { font-size: 19px; font-weight: 700; margin-bottom: 5px; }
.cf-benefit p { font-size: 14px; line-height: 1.5; color: var(--cf-body); }

/* --------------------------------------------------------------------------
   Mission statement + third-party verification badges
   -------------------------------------------------------------------------- */

.cf-mission { background: var(--cf-tint); padding: 58px 0; text-align: center; }
.cf-mission h2 {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.4;
    max-width: 24em;
    margin: 0 auto 22px;
}
.cf-mission h2 .cf-hl { color: var(--cf-blue); }

.cf-badges {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px 34px;
    margin-top: 30px;
}
/* The seals are served by security-guaranteed.com at their own intrinsic
   size; cap them so one oversized seal can't blow out the row. */
.cf-badges a { display: block; }
.cf-badges img { max-height: 62px; width: auto; }

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.cf-pricing { background: #fff; padding: 78px 0; border-top: 1px solid var(--cf-line); }
.cf-pricing-head { text-align: center; margin-bottom: 40px; }
.cf-pricing-head h2 { font-size: 34px; font-weight: 800; margin-bottom: 12px; }
.cf-pricing-head p { font-size: 15.5px; color: var(--cf-muted); }

.cf-plan-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.cf-plan {
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: #fff;
    padding: 26px 22px 24px;
    display: flex;
    flex-direction: column;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.cf-plan:hover {
    border-color: #c7dcff;
    box-shadow: 0 10px 26px rgba(15,23,42,.07);
    transform: translateY(-2px);
}
/* The highlighted plan keeps the blue border at rest so it reads as the
   recommended option without needing the hover state. */
.cf-plan.is-popular { border-color: var(--cf-blue); box-shadow: 0 12px 30px rgba(26,108,245,.12); }

.cf-plan-name {
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--cf-blue);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.cf-plan-tag {
    background: var(--cf-blue);
    color: #fff;
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 10px;
    letter-spacing: .04em;
}
.cf-plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.cf-plan-amount { font-size: 40px; font-weight: 800; color: var(--cf-ink); letter-spacing: -0.035em; }
.cf-plan-per { font-size: 14px; font-weight: 600; color: var(--cf-muted); }
.cf-plan-users { font-size: 14px; font-weight: 700; color: var(--cf-ink); margin-bottom: 18px; }

.cf-plan-features { margin-bottom: 22px; }
.cf-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--cf-muted);
    padding: 5px 0;
}
.cf-plan-features svg { color: var(--cf-green); flex: none; margin-top: 3px; }

.cf-plan .cf-btn { margin-top: auto; justify-content: center; }
/* Non-highlighted plans get the outlined treatment. .cf-btn-ghost is white-on-
   dark, so light bands need their own variant. */
.cf-home .cf-btn-outline {
    background: #fff;
    color: var(--cf-blue);
    border-color: #c7dcff;
}
.cf-home .cf-btn-outline:hover { background: var(--cf-tint); color: var(--cf-blue-dark); border-color: var(--cf-blue); }

.cf-pricing-note { text-align: center; margin-top: 30px; font-size: 14.5px; color: var(--cf-muted); }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.cf-cta {
    background: linear-gradient(120deg, var(--cf-navy-800), var(--cf-navy-600));
    padding: 62px 0;
    text-align: center;
}
.cf-cta h2 { color: #fff; font-size: 32px; font-weight: 800; margin-bottom: 14px; }
.cf-cta p { color: rgba(226,236,250,.78); font-size: 16.5px; max-width: 38em; margin: 0 auto 28px; }
.cf-cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.cf-contact { background: #fff; padding: 76px 0; }
.cf-contact-head { text-align: center; margin-bottom: 38px; }
.cf-contact-head h2 { font-size: 34px; font-weight: 800; margin-bottom: 12px; }
.cf-contact-meta { font-size: 15px; color: var(--cf-muted); }
.cf-contact-meta a { font-weight: 600; }

.cf-form { max-width: 900px; margin: 0 auto; }
.cf-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cf-field { margin-bottom: 16px; }
.cf-form input, .cf-form textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--cf-line);
    border-radius: 6px;
    font-family: inherit;
    font-size: 15px;
    color: var(--cf-ink);
    background: #fff;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.cf-form textarea { min-height: 178px; resize: vertical; }
/* The left column carries more fields than the right, so let the last field in
   each column absorb the difference instead of leaving a ragged gap. */
.cf-form-grid > div { display: flex; flex-direction: column; }
.cf-form-grid > div > .cf-field:last-child { flex: 1; margin-bottom: 0; }
.cf-form-grid > div > .cf-field:last-child textarea { height: 100%; }
.cf-form input:focus, .cf-form textarea:focus {
    outline: none;
    border-color: var(--cf-blue);
    box-shadow: 0 0 0 3px rgba(26,108,245,.14);
}
/* jqBootstrapValidation writes its messages into .help-block */
.cf-form .help-block { margin: 6px 0 0; font-size: 13px; color: var(--cf-red); }
.cf-form-submit { text-align: center; margin-top: 22px; }
.cf-form-status { margin-bottom: 14px; }
.cf-form-status .alert { padding: 12px 16px; border-radius: 6px; font-size: 14.5px; }
.cf-form-status .alert-success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.cf-form-status .alert-danger { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.cf-form-status .close { float: right; background: none; border: 0; font-size: 18px; line-height: 1; cursor: pointer; opacity: .5; }

/* --------------------------------------------------------------------------
   Interior pages: dark banner + long-form prose (privacy, terms, etc.)
   -------------------------------------------------------------------------- */

.cf-pagehead {
    background:
        radial-gradient(900px 400px at 78% 10%, rgba(26,108,245,.20), transparent 62%),
        linear-gradient(180deg, var(--cf-navy-800) 0%, var(--cf-navy-700) 100%);
    padding: 58px 0;
}
.cf-pagehead h1 {
    color: #fff;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.03em;
}
.cf-pagehead p {
    color: rgba(226,236,250,.78);
    font-size: 17px;
    max-width: 46em;
    margin-top: 12px;
}

.cf-page { background: #fff; padding: 62px 0 78px; }

/* Long-form legal/marketing copy. Constrained measure for readability. */
.cf-prose { max-width: 78ch; }
.cf-prose > :first-child { margin-top: 0; }

.cf-prose h2 {
    font-size: 25px;
    font-weight: 800;
    margin: 44px 0 14px;
    padding-top: 22px;
    border-top: 1px solid var(--cf-line);
}
.cf-prose h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 34px; }

.cf-prose h3 {
    font-size: 17.5px;
    font-weight: 700;
    margin: 28px 0 10px;
}

.cf-prose p {
    font-size: 16px;
    line-height: 1.72;
    margin: 0 0 17px;
}

.cf-prose ul {
    list-style: disc;
    padding-left: 22px;
    margin: 0 0 18px;
}
.cf-prose ul li {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 11px;
    padding-left: 4px;
}
.cf-prose ul li::marker { color: var(--cf-blue); }

/* Some legal copy wraps each bullet in its own <p>; keep those tight */
.cf-prose li > p { margin: 0 0 9px; }
.cf-prose li > p:last-child { margin-bottom: 0; }

.cf-prose a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.cf-prose strong { color: var(--cf-ink); }

/* "Last updated" / meta line under the banner */
.cf-prose-meta {
    display: inline-block;
    background: var(--cf-tint);
    border: 1px solid #dbe7f6;
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--cf-body);
    margin-bottom: 8px;
}

@media (max-width: 860px) {
    .cf-pagehead { padding: 40px 0; }
    .cf-pagehead h1 { font-size: 29px; }
    .cf-pagehead p { font-size: 15.5px; }
    .cf-page { padding: 42px 0 56px; }
    .cf-prose h2 { font-size: 21px; margin-top: 34px; }
    .cf-prose p, .cf-prose ul li { font-size: 15.5px; }
}

/* --------------------------------------------------------------------------
   Bootstrap 5 bridge

   Pages that opt into $page_use_bootstrap get Bootstrap's grid and components.
   Rather than restyle those components, re-point Bootstrap's own CSS variables
   at the 2026 palette - so .btn, .card and .list-group come out on-brand and
   stay upgradeable. Only loaded-on-demand, so these rules are inert elsewhere.
   -------------------------------------------------------------------------- */

.cf-home {
    --bs-body-font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --bs-body-color: var(--cf-body);
    --bs-body-bg: var(--cf-white);
    --bs-emphasis-color: var(--cf-ink);
    --bs-secondary-color: var(--cf-muted);
    --bs-border-color: var(--cf-line);
    --bs-border-radius: 8px;
    --bs-border-radius-lg: var(--cf-radius);
    --bs-primary: var(--cf-blue);
    --bs-primary-rgb: 26, 108, 245;
    --bs-link-color: var(--cf-blue);
    --bs-link-color-rgb: 26, 108, 245;
    --bs-link-hover-color: var(--cf-blue-dark);
}

/* Bootstrap sets button colours per-variant, so the variants need their own
   token overrides - the global --bs-primary does not reach them. */
.cf-home .btn { --bs-btn-font-weight: 700; --bs-btn-font-size: 14.5px; --bs-btn-padding-x: 20px; --bs-btn-padding-y: 10px; }
.cf-home .btn-primary {
    --bs-btn-bg: var(--cf-blue);
    --bs-btn-border-color: var(--cf-blue);
    --bs-btn-hover-bg: var(--cf-blue-dark);
    --bs-btn-hover-border-color: var(--cf-blue-dark);
    --bs-btn-active-bg: var(--cf-blue-dark);
    --bs-btn-active-border-color: var(--cf-blue-dark);
}
.cf-home .btn-outline-primary {
    --bs-btn-color: var(--cf-blue);
    --bs-btn-border-color: #c7dcff;
    --bs-btn-hover-bg: var(--cf-tint);
    --bs-btn-hover-color: var(--cf-blue-dark);
    --bs-btn-hover-border-color: var(--cf-blue);
    --bs-btn-active-bg: var(--cf-blue);
    --bs-btn-active-border-color: var(--cf-blue);
}
.cf-home .card { --bs-card-border-color: var(--cf-line); --bs-card-border-radius: var(--cf-radius); --bs-card-spacer-x: 26px; --bs-card-spacer-y: 24px; }
.cf-home .list-group {
    --bs-list-group-border-color: var(--cf-line);
    --bs-list-group-border-radius: 8px;
    --bs-list-group-color: var(--cf-ink);
    --bs-list-group-action-hover-bg: var(--cf-tint);
    --bs-list-group-action-hover-color: var(--cf-blue-dark);
    --bs-list-group-active-bg: var(--cf-blue);
    --bs-list-group-active-border-color: var(--cf-blue);
}
.cf-home .alert-primary {
    --bs-alert-bg: var(--cf-tint);
    --bs-alert-border-color: #c7dcff;
    --bs-alert-color: var(--cf-body);
}

/* --------------------------------------------------------------------------
   /pages/ system

   The page body is author-written HTML stored in `fe_pages`, so this section
   also has to keep the old Bootstrap 3 markup in that content rendering
   sensibly - see the compatibility shims at the end.
   -------------------------------------------------------------------------- */

/* The section nav sits below the 68px sticky masthead */
.cf-sidenav { position: sticky; top: 88px; }
.cf-sidenav-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--cf-muted);
    margin-bottom: 14px;
}
.cf-home .cf-sidenav .list-group-item {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    padding: 11px 15px;
}
.cf-sidenav .list-group-item small {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--cf-muted);
    margin-top: 2px;
}
.cf-home .cf-sidenav .list-group-item.active { color: #fff; }
.cf-home .cf-sidenav .list-group-item.active small { color: rgba(255,255,255,.78); }

.cf-panel-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 19px;
    font-weight: 700;
    color: var(--cf-ink);
    margin-bottom: 12px;
}
.cf-panel-title-row .bi { color: var(--cf-blue); }

.cf-stat-num {
    display: block;
    font-size: 32px;
    font-weight: 800;
    color: var(--cf-blue);
    letter-spacing: -0.03em;
    line-height: 1.1;
}
.cf-stat-cap { font-size: 13px; font-weight: 600; color: var(--cf-muted); }

/* Callout band, e.g. the hiring pitch under the page body */
.cf-callout {
    background: linear-gradient(120deg, var(--cf-navy-800), var(--cf-navy-600));
    padding: 52px 0;
    text-align: center;
}
.cf-callout h2 { color: #fff; font-size: 27px; font-weight: 800; margin-bottom: 18px; }

.cf-doc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--cf-line);
    font-size: 13.5px;
    color: var(--cf-muted);
}
.cf-doc-foot .bi { color: var(--cf-blue); }

/* Author-written bodies can contain anything - wide images, tables, an image
   that 404s and falls back to long alt text. Keep all of it inside the column
   instead of letting it widen the page. */
.cf-page .row > [class*="col-"] { min-width: 0; }
.cf-prose img { max-width: 100%; height: auto; }
.cf-prose table { display: block; max-width: 100%; overflow-x: auto; }
.cf-prose pre { max-width: 100%; overflow-x: auto; }

/* -- Legacy content shims --------------------------------------------------
   `fe_pages` bodies were authored against Bootstrap 3 + the flexor theme.
   Rather than rewrite every row, translate the handful of classes they use.  */
.cf-prose h1 { font-size: 28px; font-weight: 800; margin: 0 0 16px; }
.cf-prose h2 > small,
.cf-prose h3 > small { display: block; font-size: 15px; font-weight: 500; color: var(--cf-muted); margin-top: 6px; }
.cf-prose .block-title { border-top: 0; padding-top: 0; }
.cf-prose .img-responsive { max-width: 100%; height: auto; }
.cf-prose .img-thumbnail { padding: 5px; border: 1px solid var(--cf-line); border-radius: var(--cf-radius); background: #fff; }
.cf-prose .pull-right { float: right; margin: 0 0 18px 24px; }
.cf-prose .pull-left { float: left; margin: 0 24px 18px 0; }
.cf-prose .m-l { margin-left: 18px; }
.cf-prose .m-b { margin-bottom: 18px; }
/* Floated figures must not escape the article box */
.cf-prose::after { content: ""; display: table; clear: both; }

/* The sidebar collapses behind a toggle below Bootstrap's lg breakpoint */
@media (max-width: 991.98px) {
    .cf-sidenav { position: static; }
}

/* --------------------------------------------------------------------------
   Member access (/login/)

   Login, signup, forgot-password and the admin pane share one card behind a
   pill tab strip. Bootstrap supplies the tabs, form controls, spinners and the
   dialog; these rules only re-point the handful of Bootstrap colours that are
   baked in as literals (nav-pills active fill, input focus ring) and size the
   card. Everything else comes from the bridge section above.
   -------------------------------------------------------------------------- */

/* Matches the width the Bootstrap 3 page ran at - the tab content there was
   capped at 600px inside a col-md-6, and the card reads badly stretched wide. */
.cf-auth { max-width: 600px; margin: 0 auto; }

.cf-home .cf-auth-tabs {
    --bs-nav-link-color: var(--cf-muted);
    --bs-nav-link-hover-color: var(--cf-blue-dark);
    --bs-nav-link-font-size: 14px;
    --bs-nav-link-font-weight: 700;
    --bs-nav-link-padding-x: 18px;
    --bs-nav-link-padding-y: 9px;
    --bs-nav-pills-link-active-bg: var(--cf-blue);
    --bs-nav-pills-border-radius: 8px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}
.cf-home .cf-auth-tabs .nav-link { border: 1px solid var(--cf-line); }

/* Bootstrap fills the active pill from `.nav-pills .nav-link.active`, which is
   only (0,2,0) - a three-class rule here outranks it and strips the fill while
   its `color: #fff` survives, leaving a white label and a white icon on white.
   So the resting state is scoped away from .active, and .active states its own
   fill rather than relying on Bootstrap's. */
.cf-home .cf-auth-tabs .nav-link:not(.active) { background: #fff; }
.cf-home .cf-auth-tabs .nav-link:not(.active):hover {
    background: var(--cf-tint);
    border-color: #c7dcff;
    color: var(--cf-blue-dark);
}
.cf-home .cf-auth-tabs .nav-link.active {
    background: var(--cf-blue);
    border-color: var(--cf-blue);
    color: #fff;
}

.cf-auth-title { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.cf-auth-note { font-size: 13.5px; color: var(--cf-muted); margin-bottom: 22px; }

.cf-home .cf-auth .form-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--cf-ink);
    margin-bottom: 6px;
}
.cf-home .cf-auth .form-control,
.cf-home .cf-auth .form-select {
    padding: 11px 14px;
    font-size: 15px;
    border-radius: 8px;
}
/* Bootstrap's focus ring is a literal #0d6efd. Skip invalid fields so the red
   state stays visible while the user is fixing it. */
.cf-home .cf-auth .form-control:focus:not(.is-invalid),
.cf-home .cf-auth .form-select:focus:not(.is-invalid) {
    border-color: var(--cf-blue-light);
    box-shadow: 0 0 0 3px rgba(26,108,245,.15);
}
.cf-home .cf-auth .form-check-input:checked { background-color: var(--cf-blue); border-color: var(--cf-blue); }
.cf-home .cf-auth .form-check-input:focus {
    border-color: var(--cf-blue-light);
    box-shadow: 0 0 0 3px rgba(26,108,245,.15);
}
.cf-home .cf-auth .form-check-label { font-size: 14px; }
/* Flex so the spinner, label and trailing icon share a gap instead of the
   stray whitespace the old glyphicon markup relied on */
.cf-home .cf-auth .btn {
    --bs-btn-font-size: 15px;
    --bs-btn-padding-y: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.cf-home .cf-auth .btn-sm { --bs-btn-font-size: 12.5px; --bs-btn-padding-y: 6px; --bs-btn-padding-x: 14px; }

/* The asterisk that used to be an input-group addon on every required row */
.cf-req { color: var(--cf-red); font-weight: 700; }

.cf-captcha { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.cf-captcha img {
    border: 1px solid var(--cf-line);
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
}
.cf-captcha input { max-width: 190px; text-align: center; letter-spacing: .12em; text-transform: uppercase; }
.cf-captcha-hint { font-size: 12px; color: var(--cf-muted); text-align: center; margin-top: 8px; }

.cf-busy { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; font-weight: 600; }

.cf-auth-foot {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: var(--cf-muted);
}
.cf-auth-foot a { font-weight: 600; }

/* ── Technical Support ────────────────────────────────────────────────────
   A help page, not an auth screen: every answer is on the page at once and
   the phone number leads, because most people arriving here want to call. */

.cf-support-call {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 22px;
    margin-bottom: 34px;
    padding: 20px 24px;
    border: 1px solid var(--cf-line);
    border-left: 4px solid var(--cf-blue);
    border-radius: 10px;
    background: #f8fafc;
}
.cf-support-call-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cf-muted);
    margin-bottom: 2px;
}
.cf-support-call-hours { font-size: 13px; color: var(--cf-muted); }
.cf-support-call a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 25px;
    font-weight: 800;
    color: var(--cf-blue-dark);
    text-decoration: none;
    white-space: nowrap;
}
.cf-support-call a:hover { text-decoration: underline; }

/* Wraps rather than scrolls - it is a character set, not a command to copy. */
.cf-home .cf-support-chars code {
    display: block;
    margin: 14px 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: #f1f5f9;
    color: var(--cf-ink);
    font-size: 13.5px;
    text-align: center;
    word-break: break-word;
}

.cf-home .cf-support-warn {
    display: flex;
    gap: 10px;
    margin: 18px 0 0;
    padding: 13px 15px;
    border-left: 3px solid #f59e0b;
    border-radius: 0 8px 8px 0;
    background: #fffbeb;
    font-size: 13.5px;
}
.cf-support-warn .bi { color: #b45309; flex-shrink: 0; }

/* Jump list mirrors the h2 anchors below it. */
.cf-support-jump { list-style: none; margin: 0; padding: 0; }
.cf-support-jump li + li { margin-top: 2px; }
.cf-support-jump a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cf-muted);
    text-decoration: none;
}
.cf-support-jump a:hover { background: #f1f5f9; color: var(--cf-blue-dark); }
.cf-support-jump .bi { color: var(--cf-blue); }

/* Offset so a jumped-to heading clears the fixed nav. */
.cf-home .cf-prose h2[id] { scroll-margin-top: 96px; }

/* The four verification badges are 120x79 apiece. They stay on one centred row
   at every width - nowrap plus a shrinkable basis, so on a phone they scale
   down together instead of breaking into a ragged second line. */
.cf-auth-seals {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 12px;
    margin-top: 28px;
}
.cf-auth-seals a { flex: 0 1 auto; min-width: 0; }
.cf-auth-seals img { width: 100%; max-width: 108px; height: auto; }

@media (max-width: 560px) {
    .cf-home .cf-auth-tabs { --bs-nav-link-padding-x: 13px; --bs-nav-link-font-size: 13px; gap: 6px; }
    .cf-home .cf-auth .card { --bs-card-spacer-x: 18px; --bs-card-spacer-y: 20px; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.cf-footer { background: var(--cf-navy-900); padding: 44px 0 28px; }

/* Master runs a wider footer than the slaves: the app/report page lists are
   pulled from `fe_pages`, so the column count is content-driven. */
.cf-footer-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr));
    gap: 34px 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255,255,255,.09);
}
.cf-footer-col h4 {
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    margin-bottom: 14px;
}
.cf-footer-col li { margin-bottom: 9px; }
.cf-footer-col a { color: rgba(226,236,250,.72); font-size: 13.5px; font-weight: 500; }
.cf-footer-col a:hover { color: #fff; }

.cf-footer-about { color: rgba(226,236,250,.62); font-size: 13.5px; line-height: 1.65; }
.cf-footer-about .cf-brand { margin-bottom: 14px; }
.cf-footer-contact li { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 8px; }
.cf-footer-contact svg { color: var(--cf-blue-light); flex: none; margin-top: 3px; }

.cf-footer-social { display: flex; gap: 10px; margin-top: 16px; }
.cf-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 8px;
    color: rgba(226,236,250,.75);
    transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.cf-footer-social a:hover { background: var(--cf-blue); border-color: var(--cf-blue); color: #fff; }

.cf-footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,.09);
}
.cf-footer-links { display: flex; flex-wrap: wrap; gap: 26px; }
.cf-footer-links a { color: rgba(226,236,250,.72); font-size: 14px; font-weight: 500; }
.cf-footer-links a:hover { color: #fff; }
.cf-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 22px;
    color: rgba(226,236,250,.5);
    font-size: 13px;
}
.cf-footer-bottom a { color: rgba(226,236,250,.66); }
.cf-footer-bottom a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
    .cf-hero h1 { font-size: 50px; }
    .cf-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cf-platform-grid { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 1024px) {
    .cf-hero-grid { grid-template-columns: 1fr; gap: 44px; }
    .cf-hero-ctas { padding-bottom: 0; }
    .cf-hero-shot { margin-bottom: -6px; }
    .cf-benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
    .cf-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cf-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .cf-container { padding: 0 20px; }
    .cf-nav-links, .cf-nav-login { display: none; }
    .cf-nav-toggle { display: inline-flex; }
    .cf-nav-actions { gap: 10px; }
    .cf-nav-actions .cf-btn { padding: 10px 15px; font-size: 13.5px; }
    .cf-brand { font-size: 18px; gap: 9px; }

    /* Mobile menu revealed by the toggle */
    .cf-nav.is-open .cf-nav-links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        position: absolute;
        left: 0;
        right: 0;
        top: 68px;
        background: var(--cf-navy-900);
        padding: 14px 20px 20px;
        border-top: 1px solid rgba(255,255,255,.08);
    }
    /* Thumb-sized rows (2026-10-09): each section link is a full-width row ~52px tall, so a tap anywhere
       across it lands - they were the word alone, 39px tall and 50-71px wide, overlapping by 9px.
       44-48px is the usual minimum for a thumb. Log In below keeps its own button styling. */
    .cf-nav.is-open .cf-nav-links { gap: 0; }
    .cf-nav.is-open .cf-nav-links li { align-self: stretch; }
    .cf-nav.is-open .cf-nav-links li:not(.cf-nav-menu-login) a { display: block; padding: 14px 4px; font-size: 17px; line-height: 1.4; border-radius: 6px; }
    .cf-nav.is-open .cf-nav-links li:not(.cf-nav-menu-login) a:active { background: rgba(255,255,255,.08); }
    /* Rules between the rows (2026-10-09): a light 1px line under each section link, and a double-thick
       (2px) one under the last, closing the menu off from the page beneath. */
    .cf-nav.is-open .cf-nav-links li:not(.cf-nav-menu-login) { border-bottom: 1px solid rgba(255,255,255,.10); }
    .cf-nav.is-open .cf-nav-links li:not(.cf-nav-menu-login):last-child { border-bottom: 2px solid rgba(255,255,255,.22); }
    /* Log In at the TOP of the open menu (2026-10-09; it was at the foot): a full-width white button with
       a divider below it, so it reads as an action, not another section link. Navy on white 18:1. */
    .cf-nav.is-open .cf-nav-links .cf-nav-menu-login {
        display: block;
        align-self: stretch;
        margin-bottom: 8px;
        padding-bottom: 14px;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }
    .cf-nav.is-open .cf-nav-menu-login a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 16px;
        border-radius: 6px;
        background: #fff;
        color: var(--cf-navy-800);
        font-size: 16px; /* was inherited from the general menu-link rule, now scoped to the section links */
        font-weight: 700;
    }
    .cf-nav.is-open .cf-nav-menu-login a:hover { background: var(--cf-tint); color: var(--cf-navy-800); }
    .cf-nav-inner { position: relative; }

    .cf-hero { padding-top: 52px; }
    .cf-hero h1 { font-size: 38px; }
    .cf-hero-lede { font-size: 16px; }
    .cf-platform { padding: 56px 0; }
    .cf-platform h2, .cf-contact-head h2, .cf-pricing-head h2 { font-size: 29px; }
    .cf-pricing { padding: 56px 0; }
    .cf-mission { padding: 44px 0; }
    .cf-mission h2 { font-size: 21px; }
    .cf-badges img { max-height: 52px; }
    .cf-cta h2 { font-size: 26px; }
    .cf-form-grid { grid-template-columns: 1fr; }
    .cf-form textarea { min-height: 140px; }
    .cf-trust-inner { gap: 22px; }
    .cf-trust-stats { gap: 20px 32px; }

}

@media (max-width: 560px) {
    .cf-hero h1 { font-size: 32px; }
    .cf-feature-grid, .cf-benefits-grid { grid-template-columns: 1fr; }
    .cf-plan-grid, .cf-footer-cols { grid-template-columns: 1fr; }
    /* Full-width only for the stacked CTA groups - NOT the compact nav button */
    .cf-hero-ctas .cf-btn,
    .cf-cta-actions .cf-btn,
    .cf-form-submit .cf-btn { width: 100%; justify-content: center; }
    .cf-hero-ctas, .cf-cta-actions { flex-direction: column; }
    /* The buttons have stacked: Log In goes to the TOP, white like the slaves' (2026-10-09) - the
       nav hides its own Log In below 860px, so on a phone this is the way in. Navy on white 18:1. */
    .cf-hero-ctas .cf-hero-login { order: -1; background: #fff; color: var(--cf-navy-800); border-color: #fff; }
    .cf-hero-ctas .cf-hero-login:hover { background: var(--cf-tint); color: var(--cf-navy-800); border-color: var(--cf-tint); }
}

/* Below ~460px the masthead row (brand + Start Free + toggle) measures wider than
   the viewport and puts the whole page into a horizontal scroll. Tighten the
   brand and the button rather than letting either wrap. (Was 420px while the
   button said "Sign Up"; "Start Free", 2026-10-09, overflowed 430px by 7px.) */
@media (max-width: 460px) {
    .cf-nav-inner { gap: 10px; }
    .cf-home .cf-brand { font-size: 15.5px; gap: 7px; }
    .cf-nav .cf-brand-mark { width: 24px; height: 24px; }
    .cf-nav-actions { gap: 8px; }
    .cf-nav-actions .cf-btn { padding: 9px 12px; font-size: 12.5px; }
    .cf-nav-toggle { padding: 7px 8px; }
}

/* iPhone SE class widths need one more notch of tightening */
@media (max-width: 360px) {
    .cf-container { padding: 0 14px; }
    .cf-home .cf-brand { font-size: 14px; }
    .cf-nav-actions .cf-btn { padding: 8px 10px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .cf-home * { transition: none !important; }
}

/* ---------------------------------------------------------------------------
   Membership Terms (2026 retheme)
   --------------------------------------------------------------------------- */

/* The jump list carries 26 sections, where the support page's carries four, so
   it scrolls inside the sticky sidenav instead of running past the fold and
   taking the "Questions?" card with it. max-height is viewport-relative so a
   short window gets a shorter list rather than a clipped one. */
.cf-terms-jump {
    list-style: none;
    margin: 0;
    padding: 0 6px 0 0;
    max-height: min(52vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.cf-terms-jump li + li { margin-top: 1px; }
.cf-terms-jump a {
    display: block;
    padding: 6px 10px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--cf-muted);
    text-decoration: none;
}
.cf-terms-jump a:hover { background: #f1f5f9; color: var(--cf-blue-dark); }

/* Replaces the old inline style="color:red;" on Data Ownership and the backup
   sentence. Red body text on white is ~3.9:1 and fails AA at this size, and it
   reads as an error rather than as emphasis. A left rule plus a tinted ground
   carries the same "read this one" weight while the text itself stays at full
   contrast. Works as a <p> and inline as a <span>. */
.cf-prose .cf-terms-flag {
    display: block;
    border-left: 3px solid var(--cf-amber);
    background: #fffbeb;
    padding: 12px 16px;
    border-radius: 0 var(--cf-radius) var(--cf-radius) 0;
    color: var(--cf-ink);
}
.cf-prose span.cf-terms-flag {
    display: inline;
    border-left: 0;
    background: #fef3c7;
    padding: 1px 4px;
    border-radius: 4px;
}

.cf-terms-contact {
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid var(--cf-line);
    font-size: 13.5px;
    color: var(--cf-muted);
}