/* Layout: navy "plus-grid" hero holding a live product window, then alternating white / mist bands on a 1200px Bootstrap grid. */
:root {
  --cp-bg: #ffffff;
  --cp-band: #f1f5f9;
  --cp-surface: #ffffff;
  --cp-ink: #14213a;
  --cp-muted: #52627a;
  --cp-line: #d9e1eb;
  --cp-navy: #17335f;
  --cp-deep: #0c1f3d;
  --cp-plus: #5b9a17;
  --cp-green: #3e7310;
  --cp-btn: #3e7310;
  --cp-btn-hover: #325f0c;
  --cp-btn-ink: #ffffff;
  --cp-new: #9a5b00;
  --cp-new-bg: #fff1d6;
  --cp-chip: #e8eef6;
  --cp-logo-plate: transparent;
  --cp-hero-ink: #f2f6fb;
  --cp-cta: #17335f;
  --cp-hero-muted: #b8c6da;
  --cp-shadow: 0 1px 2px rgba(12, 31, 61, .06), 0 12px 32px -12px rgba(12, 31, 61, .22);
  --font-display: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-hero: clamp(2.15rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-h2: clamp(1.65rem, 1.2rem + 1.5vw, 2.35rem);
  --fs-h3: 1.22rem;
  --fs-body: 1.0625rem;
  --fs-small: .92rem;
  --radius: .6rem;

  --bs-body-bg: var(--cp-bg);
  --bs-body-color: var(--cp-ink);
  --bs-emphasis-color: var(--cp-ink);
  --bs-secondary-color: var(--cp-muted);
  --bs-border-color: var(--cp-line);
  --bs-link-color: var(--cp-green);
  --bs-link-hover-color: var(--cp-btn-hover);
  --bs-link-color-rgb: 62, 115, 16;
  --bs-link-hover-color-rgb: 50, 95, 12;
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: var(--fs-body);
  --bs-body-line-height: 1.6;
  --bs-tertiary-bg: var(--cp-band);
  --bs-focus-ring-color: rgba(91, 154, 23, .45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cp-bg: #0a1426;
    --cp-band: #0e1b31;
    --cp-surface: #12213b;
    --cp-ink: #e6edf7;
    --cp-muted: #a2b1c7;
    --cp-line: #24375a;
    --cp-navy: #b9ccee;
    --cp-deep: #07101f;
    --cp-plus: #7cc03e;
    --cp-green: #8fd150;
    --cp-btn: #7cc03e;
    --cp-btn-hover: #92d25a;
    --cp-btn-ink: #07101f;
    --cp-new: #ffc56b;
    --cp-new-bg: #3a2a0c;
    --cp-chip: #1b2c4a;
  --cp-logo-plate: #f2f6fb;
    --cp-logo-plate: #f2f6fb;
    --cp-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 36px -14px rgba(0, 0, 0, .7);
    --bs-link-color-rgb: 143, 209, 80;
    --bs-link-hover-color-rgb: 146, 210, 90;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --cp-bg: #0a1426;
  --cp-band: #0e1b31;
  --cp-surface: #12213b;
  --cp-ink: #e6edf7;
  --cp-muted: #a2b1c7;
  --cp-line: #24375a;
  --cp-navy: #b9ccee;
  --cp-deep: #07101f;
  --cp-plus: #7cc03e;
  --cp-green: #8fd150;
  --cp-btn: #7cc03e;
  --cp-btn-hover: #92d25a;
  --cp-btn-ink: #07101f;
  --cp-new: #ffc56b;
  --cp-new-bg: #3a2a0c;
  --cp-chip: #1b2c4a;
  --cp-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 36px -14px rgba(0, 0, 0, .7);
  --bs-link-color-rgb: 143, 209, 80;
  --bs-link-hover-color-rgb: 146, 210, 90;
  color-scheme: dark;
}

body { background: var(--cp-bg); color: var(--cp-ink); font-family: var(--font-body); font-size: var(--fs-body); }
h1, h2, h3, .display-face { font-family: var(--font-display); color: var(--cp-navy); text-wrap: balance; letter-spacing: -.01em; }
h2 { font-size: var(--fs-h2); font-weight: 800; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
p { text-wrap: pretty; }
.lead-copy { color: var(--cp-muted); font-size: 1.15rem; max-width: 62ch; }
.eyebrow { font-family: var(--font-display); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-green); }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--cp-plus); outline-offset: 2px; }
.skip-link { position: absolute; left: 1rem; top: -3rem; z-index: 2000; background: var(--cp-btn); color: var(--cp-btn-ink); padding: .5rem .9rem; border-radius: .4rem; }
.skip-link:focus { top: 1rem; }
.ic { width: 1.35em; height: 1.35em; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.band { background: var(--cp-band); }
section { padding-block: clamp(3.5rem, 2.5rem + 3vw, 6rem); }

/* Prototype notice */
.proto-note { background: var(--cp-new-bg); color: var(--cp-new); font-size: .85rem; border-bottom: 1px dashed currentColor; }
.proto-note strong { font-weight: 700; }

/* Buttons */
.btn-cp { --bs-btn-bg: var(--cp-btn); --bs-btn-border-color: var(--cp-btn); --bs-btn-color: var(--cp-btn-ink);
  --bs-btn-hover-bg: var(--cp-btn-hover); --bs-btn-hover-border-color: var(--cp-btn-hover); --bs-btn-hover-color: var(--cp-btn-ink);
  --bs-btn-active-bg: var(--cp-btn-hover); --bs-btn-active-color: var(--cp-btn-ink); --bs-btn-font-weight: 700; --bs-btn-padding-x: 1.25rem; --bs-btn-padding-y: .7rem; font-family: var(--font-display); }
.btn-ghost { --bs-btn-color: var(--cp-navy); --bs-btn-border-color: var(--cp-line); --bs-btn-hover-bg: var(--cp-band); --bs-btn-hover-color: var(--cp-navy); --bs-btn-hover-border-color: var(--cp-line); --bs-btn-font-weight: 700; --bs-btn-padding-x: 1.1rem; --bs-btn-padding-y: .7rem; font-family: var(--font-display); }
.btn-on-dark { --bs-btn-color: var(--cp-hero-ink); --bs-btn-border-color: rgba(242, 246, 251, .35); --bs-btn-hover-bg: rgba(242, 246, 251, .1); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: rgba(242, 246, 251, .6); --bs-btn-font-weight: 700; --bs-btn-padding-x: 1.1rem; --bs-btn-padding-y: .7rem; font-family: var(--font-display); }

/* Navbar */
.site-header { top: env(safe-area-inset-top, 0px); }
.site-nav { background: var(--cp-bg); border-bottom: 1px solid var(--cp-line); }
.site-nav .navbar-brand img { height: 42px; width: auto; }
/* The current logo is a PNG with navy lettering; until an SVG reversed version exists it sits on a light plate in dark mode. */
.site-nav .navbar-brand { border-radius: .45rem; padding: .15rem .35rem; margin-left: -.35rem; background: var(--cp-logo-plate); }
.site-nav .nav-link { font-family: var(--font-display); font-weight: 600; color: var(--cp-ink); font-size: .98rem; }
.site-nav .nav-link:hover, .site-nav .nav-link:focus { color: var(--cp-green); }
.site-nav .navbar-toggler { border-color: var(--cp-line); color: var(--cp-ink); }
.navbar-toggler-icon { background-image: none; display: grid; place-items: center; }
.mega { --bs-dropdown-bg: var(--cp-surface); --bs-dropdown-border-color: var(--cp-line); --bs-dropdown-link-color: var(--cp-ink); --bs-dropdown-link-hover-bg: var(--cp-band); --bs-dropdown-link-hover-color: var(--cp-ink); box-shadow: var(--cp-shadow); padding: .75rem; }
@media (min-width: 992px) { .mega { width: min(640px, 92vw); } .mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; } }
.mega-item { display: flex; gap: .75rem; align-items: flex-start; padding: .6rem .7rem; border-radius: .45rem; text-decoration: none; color: var(--cp-ink); }
.mega-item:hover, .mega-item:focus { background: var(--cp-band); color: var(--cp-ink); }
.mega-item .ic { color: var(--cp-plus); margin-top: .15rem; }
.mega-item strong { display: block; font-family: var(--font-display); font-size: .95rem; }
.mega-item span { display: block; color: var(--cp-muted); font-size: .85rem; line-height: 1.35; }
.theme-btn { border: 1px solid var(--cp-line); background: transparent; color: var(--cp-ink); border-radius: 2rem; padding: .35rem .7rem; font-size: .85rem; display: inline-flex; gap: .35rem; align-items: center; }

/* Hero */
.hero { background-color: var(--cp-deep);
  background-image:
    radial-gradient(60rem 30rem at 85% -10%, rgba(91, 154, 23, .28), transparent 60%),
    radial-gradient(40rem 26rem at -10% 110%, rgba(47, 94, 170, .35), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 16v12M16 22h12' stroke='white' stroke-opacity='.07' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  color: var(--cp-hero-ink); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(3.5rem, 2.5rem + 4vw, 6rem); overflow: hidden; }
.hero h1 { color: #fff; font-size: var(--fs-hero); font-weight: 800; line-height: 1.05; letter-spacing: -.025em; }
.hero h1 .plus { color: var(--cp-plus); }
.hero .eyebrow { color: #9fd26a; }
.hero p.sub { color: var(--cp-hero-muted); font-size: 1.2rem; max-width: 36rem; }
.hero-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; color: var(--cp-hero-muted); font-size: .95rem; padding: 0; list-style: none; }
.hero-facts li { display: inline-flex; gap: .4rem; align-items: center; }
.hero-facts .ic { color: #9fd26a; width: 1.1em; height: 1.1em; }

/* Product window (illustrative UI) */
.app-window { background: #f7f9fc; color: #14213a; border-radius: .8rem; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); overflow: hidden; font-size: .82rem; position: relative; }
.app-chrome { display: flex; align-items: center; gap: .4rem; background: #e6ebf2; padding: .5rem .75rem; }
.app-chrome i { width: .6rem; height: .6rem; border-radius: 50%; background: #c3ccd9; display: inline-block; }
.app-chrome .url { margin-left: .5rem; background: #fff; border-radius: 1rem; padding: .1rem .75rem; color: #5a6a82; font-size: .75rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-body { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) minmax(0, 13.5rem); min-height: 19rem; }
.app-rail { background: #17335f; display: flex; flex-direction: column; align-items: center; gap: .9rem; padding-top: .9rem; color: #9db3d6; }
.app-rail .ic { width: 1.1rem; height: 1.1rem; }
.app-rail .on { color: #fff; }
.app-main { padding: .8rem .9rem; min-width: 0; }
.app-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.app-h strong { font-family: var(--font-display); font-size: .92rem; color: #17335f; }
.app-pill { background: #e3ebf6; color: #17335f; border-radius: 1rem; padding: .05rem .55rem; font-size: .72rem; font-weight: 600; }
.app-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.app-table th { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: #6a7a92; font-weight: 600; padding: .3rem .35rem; border-bottom: 1px solid #dbe2ec; text-align: left; }
.app-table td { padding: .42rem .35rem; border-bottom: 1px solid #e7ecf3; white-space: nowrap; }
.app-table tr.sel td { background: #e9eff8; }
.age { border-radius: .3rem; padding: .02rem .4rem; font-size: .7rem; font-weight: 700; }
.age-a { background: #e3f0d3; color: #33600c; }
.age-b { background: #fdf0cf; color: #7a5200; }
.age-c { background: #fde2d6; color: #8e3310; }
.age-d { background: #f3d6de; color: #7d1d38; }
.step { color: #3e5170; }
.app-card { border-left: 1px solid #dbe2ec; padding: .8rem .8rem; background: #fff; display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.app-card .who { font-family: var(--font-display); font-weight: 700; color: #17335f; font-size: .9rem; }
.app-card .meta { color: #6a7a92; font-size: .72rem; }
.app-card .bal { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: #14213a; }
.app-btn { background: #17335f; color: #fff; border-radius: .35rem; padding: .3rem .5rem; font-weight: 700; font-size: .74rem; text-align: center; }
.app-ai { background: #f1f4fb; border: 1px solid #d6def0; border-radius: .45rem; padding: .45rem .5rem; font-size: .72rem; color: #2c3d5c; }
.app-ai b { color: #3b4fa0; display: flex; align-items: center; gap: .3rem; }
.app-ai .ic { width: .95rem; height: .95rem; }
.app-toast { position: absolute; right: 1rem; bottom: 1rem; background: #fff; color: #14213a; border-radius: .6rem; padding: .55rem .8rem; box-shadow: 0 12px 30px -8px rgba(12, 31, 61, .45); display: flex; gap: .55rem; align-items: center; font-size: .8rem; max-width: 17rem; animation: toast-in .7s ease-out .6s both; }
.app-toast .ok { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #3e7310; color: #fff; display: grid; place-items: center; flex: none; }
.app-toast .ok .ic { width: 1rem; height: 1rem; }
@keyframes toast-in { from { transform: translateY(12px); } to { transform: none; } }
.app-caption { color: var(--cp-hero-muted); font-size: .78rem; margin-top: .6rem; text-align: right; }
@media (max-width: 991.98px) { .app-body { grid-template-columns: minmax(0, 1fr); } .app-rail, .app-card { display: none; } .app-toast { position: static; margin: 0 .9rem .9rem; } }
@media (max-width: 575.98px) { .app-table .hide-sm { display: none; } }

/* Audience strip */
.who-strip { border-bottom: 1px solid var(--cp-line); padding-block: 1.25rem; }
.who-strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; justify-content: center; color: var(--cp-muted); font-family: var(--font-display); font-weight: 600; font-size: .95rem; }
.who-strip li { display: inline-flex; gap: .45rem; align-items: center; }
.who-strip .ic { color: var(--cp-plus); }

/* Solution cards */
.sol { display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1.4rem; border: 1px solid var(--cp-line); border-radius: var(--radius); background: var(--cp-surface); text-decoration: none; color: var(--cp-ink); transition: border-color .15s, transform .15s; }
.sol:hover, .sol:focus { border-color: var(--cp-plus); transform: translateY(-2px); color: var(--cp-ink); }
.sol .ic-wrap { width: 2.6rem; height: 2.6rem; border-radius: .55rem; background: var(--cp-chip); display: grid; place-items: center; color: var(--cp-green); }
.sol h3 { margin: .35rem 0 0; font-size: 1.1rem; }
.sol p { color: var(--cp-muted); margin: 0; font-size: .98rem; }
.sol .go { margin-top: auto; font-family: var(--font-display); font-weight: 700; color: var(--cp-green); font-size: .92rem; }

/* Product tour tabs */
.tour-tabs { gap: .4rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: .25rem; }
.tour-tabs .nav-link { white-space: nowrap; border: 1px solid var(--cp-line); color: var(--cp-ink); font-family: var(--font-display); font-weight: 600; border-radius: 2rem; padding: .45rem 1rem; display: inline-flex; gap: .4rem; align-items: center; background: var(--cp-surface); }
.tour-tabs .nav-link .ic { width: 1.1em; height: 1.1em; color: var(--cp-plus); }
.tour-tabs .nav-link.active { background: var(--cp-navy); border-color: var(--cp-navy); color: var(--cp-bg); }
.tour-tabs .nav-link.active .ic { color: var(--cp-bg); }
.tour-panel { border: 1px solid var(--cp-line); border-radius: .9rem; background: var(--cp-surface); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.checks { list-style: none; padding: 0; margin: 1rem 0 1.25rem; display: grid; gap: .55rem; }
.checks li { display: flex; gap: .55rem; align-items: flex-start; }
.checks .ic { color: var(--cp-plus); width: 1.15em; height: 1.15em; margin-top: .25rem; }
.stage { background: var(--cp-band); border-radius: .8rem; padding: 1.25rem; height: 100%; display: grid; place-items: center; }
.mini { background: var(--cp-surface); border: 1px solid var(--cp-line); border-radius: .7rem; box-shadow: var(--cp-shadow); width: 100%; max-width: 25rem; padding: 1rem; font-size: .9rem; }
.mini h4 { font-family: var(--font-display); font-size: .95rem; color: var(--cp-navy); margin: 0 0 .6rem; }
.mini .row-line { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--cp-line); }
.mini .row-line:last-child { border-bottom: 0; }
.mini .muted { color: var(--cp-muted); }
.mini .total { font-weight: 700; color: var(--cp-ink); }
.chip { display: inline-flex; align-items: center; gap: .3rem; background: var(--cp-chip); color: var(--cp-ink); border-radius: 1rem; padding: .08rem .6rem; font-size: .78rem; font-weight: 600; }
.chip.ok { color: var(--cp-green); }
.phone { width: 15.5rem; max-width: 100%; border-radius: 1.6rem; border: 8px solid var(--cp-ink); background: var(--cp-surface); padding: 1rem .85rem 1.2rem; box-shadow: var(--cp-shadow); }
.bubble { background: var(--cp-chip); border-radius: 1rem 1rem 1rem .25rem; padding: .6rem .75rem; font-size: .85rem; }
.bubble a { font-weight: 700; }
.qr { width: 5.5rem; height: 5.5rem; fill: var(--cp-ink); background: var(--cp-surface); }
.rule { border: 1px dashed var(--cp-line); border-radius: .55rem; padding: .7rem .8rem; font-size: .88rem; }
.rule b { font-family: var(--font-display); font-size: .75rem; letter-spacing: .08em; color: var(--cp-green); display: block; }
.bars { display: grid; gap: .5rem; }
.bar { display: grid; grid-template-columns: 4rem minmax(0, 1fr) 4.2rem; gap: .5rem; align-items: center; font-size: .82rem; }
.bar span.track { height: .7rem; background: var(--cp-chip); border-radius: .35rem; overflow: hidden; }
.bar span.fill { display: block; height: 100%; background: var(--cp-navy); border-radius: .35rem; }
.bar .v { text-align: right; font-variant-numeric: tabular-nums; }

/* New in 12 */
.new-card { height: 100%; padding: 1.35rem; border-radius: var(--radius); background: var(--cp-surface); border: 1px solid var(--cp-line); display: flex; flex-direction: column; gap: .5rem; }
.new-card .badge-new { align-self: flex-start; background: var(--cp-new-bg); color: var(--cp-new); font-weight: 700; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; border-radius: .3rem; padding: .12rem .45rem; }
.new-card h3 { font-size: 1.08rem; margin: 0; }
.new-card p { color: var(--cp-muted); margin: 0; font-size: .98rem; }

/* Two audiences */
.aud { border-radius: .9rem; padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); height: 100%; }
.aud-exec { background: var(--cp-surface); border: 1px solid var(--cp-line); }
.aud-it { background: var(--cp-deep); color: var(--cp-hero-ink); }
.aud-it h3, .aud-it .eyebrow { color: #fff; }
.aud-it .eyebrow { color: #9fd26a; }
.spec { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: .55rem 1rem; margin: 1rem 0 1.25rem; font-size: .95rem; }
.spec dt { color: #9fb2cf; font-weight: 600; }
.spec dd { margin: 0; color: var(--cp-hero-ink); }
.aud-it a { color: #9fd26a; font-weight: 700; }
@media (max-width: 575.98px) { .spec { grid-template-columns: minmax(0, 1fr); gap: .15rem; } .spec dd { margin-bottom: .6rem; } }

/* Customer quotes */
.tst { height: 100%; margin: 0; padding: 1.5rem; border-radius: var(--radius); background: var(--cp-band); display: flex; flex-direction: column; gap: 1rem; }
.tst blockquote { margin: 0; }
.tst blockquote p { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; color: var(--cp-navy); line-height: 1.45; margin: 0; }
.tst figcaption { margin-top: auto; border-top: 1px solid var(--cp-line); padding-top: .8rem; font-size: .95rem; }
.tst figcaption strong { display: block; color: var(--cp-ink); }
.tst figcaption span { color: var(--cp-muted); }

/* Demo + form */
.way { display: flex; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--cp-line); border-radius: var(--radius); background: var(--cp-surface); text-decoration: none; color: var(--cp-ink); align-items: flex-start; }
.way:hover, .way:focus { border-color: var(--cp-plus); color: var(--cp-ink); }
.way .ic-wrap { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--cp-chip); color: var(--cp-green); display: grid; place-items: center; flex: none; }
.way strong { font-family: var(--font-display); display: block; }
.way span { color: var(--cp-muted); font-size: .95rem; }
.form-card { background: var(--cp-surface); border: 1px solid var(--cp-line); border-radius: .9rem; padding: clamp(1.25rem, 1rem + 1vw, 2rem); box-shadow: var(--cp-shadow); }
.form-card .form-label { font-weight: 600; font-size: .92rem; margin-bottom: .25rem; }
.form-control, .form-select { background-color: var(--cp-bg); color: var(--cp-ink); border-color: var(--cp-line); }
.form-control:focus, .form-select:focus { background-color: var(--cp-bg); color: var(--cp-ink); border-color: var(--cp-plus); box-shadow: 0 0 0 .2rem rgba(91, 154, 23, .25); }
.form-text { color: var(--cp-muted); }
.proto-result { background: var(--cp-new-bg); color: var(--cp-new); border-radius: .5rem; padding: .6rem .8rem; font-size: .92rem; }

/* Resources + FAQ */
.res { height: 100%; border-top: 3px solid var(--cp-plus); background: var(--cp-surface); padding: 1.2rem 1.25rem; border-radius: 0 0 var(--radius) var(--radius); border-inline: 1px solid var(--cp-line); border-bottom: 1px solid var(--cp-line); }
.res .tag { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted); }
.res h3 { font-size: 1.05rem; margin: .4rem 0 .4rem; }
.res p { color: var(--cp-muted); font-size: .95rem; margin: 0; }
.accordion { --bs-accordion-bg: var(--cp-surface); --bs-accordion-color: var(--cp-ink); --bs-accordion-border-color: var(--cp-line); --bs-accordion-btn-color: var(--cp-ink); --bs-accordion-active-bg: var(--cp-band); --bs-accordion-active-color: var(--cp-ink); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(91, 154, 23, .3); }
.accordion-button { font-family: var(--font-display); font-weight: 600; }
.accordion-button::after { filter: grayscale(1); }

/* CTA + footer */
.cta-band { background: var(--cp-cta); color: var(--cp-hero-ink); }
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--cp-hero-ink); opacity: .85; }
.site-footer { background: var(--cp-deep); color: #b7c4d8; font-size: .95rem; padding-block: 3.5rem 2rem; }
.site-footer h3 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.site-footer a { color: #d6e0ee; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus { color: #9fd26a; text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.site-footer .legal { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 2.5rem; padding-top: 1.25rem; font-size: .85rem; }
.site-footer address { font-style: normal; }
.select-all { user-select: all; }

/* Mobile sticky CTA */
.m-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: var(--cp-surface); border-top: 1px solid var(--cp-line); padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px)); display: flex; gap: .6rem; box-shadow: 0 -8px 24px -12px rgba(12, 31, 61, .35); }
.m-cta .btn { flex: 1; }
@media (min-width: 768px) { .m-cta { display: none; } }
@media (max-width: 767.98px) { body { padding-bottom: 4.5rem; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ===== Multi-page additions (2026-09-30) ===== */

/* Product menu: the "What's new" row spans the whole mega menu. */
.mega-new { border-top: 1px solid var(--cp-line); margin-top: .35rem; padding-top: .8rem; }
.mega-new strong { color: var(--cp-green); }

/* Inner-page header: the hero's navy plus-grid, shorter. */
.page-hero { background-color: var(--cp-deep);
  background-image:
    radial-gradient(50rem 24rem at 90% -20%, rgba(91, 154, 23, .24), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 16v12M16 22h12' stroke='white' stroke-opacity='.07' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  color: var(--cp-hero-ink); padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.25rem); }
.page-hero h1 { color: #fff; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.page-hero .eyebrow { color: #9fd26a; }
.page-hero p.sub { color: var(--cp-hero-muted); font-size: 1.15rem; max-width: 44rem; }
.page-hero .hero-facts { margin-top: 1.25rem; }
.crumbs { font-size: .85rem; margin-bottom: 1rem; color: var(--cp-hero-muted); }
.crumbs a { color: var(--cp-hero-muted); text-decoration: none; }
.crumbs a:hover, .crumbs a:focus { color: #fff; text-decoration: underline; }
.crumbs .sep { opacity: .6; margin-inline: .35rem; }

/* Coming-soon media. Each slot has the final image's aspect ratio, so the real screenshot or video drops in without moving the layout. */
figure.media { margin: 0; min-width: 0; }
figure.media figcaption { color: var(--cp-muted); font-size: .9rem; margin-top: .6rem; }
.soon { position: relative; width: 100%; max-width: 100%; border: 1.5px dashed var(--cp-line); border-radius: .8rem; overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--cp-band) 0 14px, var(--cp-surface) 14px 28px);
  display: grid; place-items: center; text-align: center; color: var(--cp-muted); }
.soon-shot { aspect-ratio: 16 / 10; }
.soon-shot::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1.9rem; background: var(--cp-chip); border-bottom: 1px solid var(--cp-line); }
.soon-shot::after { content: ""; position: absolute; top: .7rem; left: .8rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--cp-line); box-shadow: .85rem 0 0 var(--cp-line), 1.7rem 0 0 var(--cp-line); }
/* A video frame reads as one on the navy hero and on light sections alike. */
.soon-video { aspect-ratio: 16 / 9; background: radial-gradient(28rem 16rem at 70% 20%, rgba(91, 154, 23, .22), transparent 60%), #10264a; border: 1px solid rgba(159, 210, 106, .3); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55); }
.soon-video .soon-body .ic { width: 3.4rem; height: 3.4rem; color: #9fd26a; }
.soon-video .soon-body { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .15); color: var(--cp-hero-muted); box-shadow: none; }
.soon-video .soon-body strong { color: #fff; }
.soon-phone { aspect-ratio: 9 / 17; max-width: 16rem; margin-inline: auto; border-radius: 1.8rem; border: 8px solid var(--cp-ink); }
.soon-body { position: relative; z-index: 1; display: grid; justify-items: center; gap: .3rem; padding: .9rem 1.2rem; margin: 2.2rem 1rem 1rem;
  background: var(--cp-surface); border: 1px solid var(--cp-line); border-radius: .6rem; box-shadow: var(--cp-shadow); max-width: 22rem; }
.soon-body .ic { width: 1.9rem; height: 1.9rem; color: var(--cp-plus); }
.soon-body strong { font-family: var(--font-display); color: var(--cp-navy); font-size: 1rem; }
.soon-body span { font-size: .88rem; line-height: 1.35; }

/* Feature rows: text beside a media slot, alternating sides on wide screens. */
.feature-row + .feature-row { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.feature-row h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.feature-row .col-text, .feature-row .col-media { min-width: 0; }
.fine { font-size: .88rem; color: var(--cp-muted); }
.pill-list { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.pill-list li { background: var(--cp-chip); border-radius: 1rem; padding: .15rem .7rem; font-size: .88rem; font-weight: 600; }
.cards-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.card-lite { background: var(--cp-surface); border: 1px solid var(--cp-line); border-radius: var(--radius); padding: 1.3rem; min-width: 0; }
.card-lite h3 { font-size: 1.06rem; margin: 0 0 .4rem; }
.card-lite p { color: var(--cp-muted); margin: 0; font-size: .98rem; }
.card-lite .ic { color: var(--cp-plus); width: 1.6rem; height: 1.6rem; margin-bottom: .5rem; }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.steps li { counter-increment: step; position: relative; padding-left: 3rem; min-height: 2.2rem; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--cp-navy); color: var(--cp-bg); font-family: var(--font-display); font-weight: 800; display: grid; place-items: center; }
.steps strong { display: block; font-family: var(--font-display); color: var(--cp-navy); }

/* What's new: grouped release list */
.release-group + .release-group { margin-top: 2.5rem; }
.release-group h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); display: flex; gap: .6rem; align-items: center; }
.release-group h2 .ic { color: var(--cp-plus); }
.release-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .9rem; }
.release-list li { background: var(--cp-surface); border: 1px solid var(--cp-line); border-radius: var(--radius); padding: 1rem 1.1rem; min-width: 0; }
.release-list strong { display: block; font-family: var(--font-display); color: var(--cp-navy); margin-bottom: .2rem; }
.release-list span { color: var(--cp-muted); font-size: .96rem; }
.tag-win { display: inline-block; margin-left: .35rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cp-muted); border: 1px solid var(--cp-line); border-radius: .3rem; padding: 0 .35rem; vertical-align: .15em; }

/* Pricing */
.price-card { background: var(--cp-surface); border: 1px solid var(--cp-line); border-radius: 1rem; box-shadow: var(--cp-shadow); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); height: 100%; }
.price-card .amount { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); color: var(--cp-navy); line-height: 1; font-variant-numeric: tabular-nums; }
.price-card .amount sup { font-size: .45em; vertical-align: .9em; margin-right: .1em; }
.price-card .per { color: var(--cp-muted); font-size: 1rem; }
.price-card hr { border-color: var(--cp-line); opacity: 1; }
.free-banner { background: var(--cp-new-bg); color: var(--cp-new); border-radius: var(--radius); padding: .9rem 1.1rem; display: flex; gap: .7rem; align-items: flex-start; }
.free-banner .ic { flex: none; margin-top: .15rem; }
.free-banner strong { font-family: var(--font-display); }
.soon-wide { aspect-ratio: 16 / 9; }

/* ===== Eleventy build additions (2026-09-30) ===== */

/* Real screenshots and videos. The build swaps them in for the coming-soon slots when the files exist; each keeps its slot's shape. */
.shot-img { display: block; width: 100%; height: auto; object-fit: cover; object-position: top; background: var(--cp-surface); border: 1px solid var(--cp-line); border-radius: .8rem; box-shadow: var(--cp-shadow); }
.shot-shot { aspect-ratio: 16 / 10; }
.shot-wide { aspect-ratio: 16 / 9; }
.shot-phone { aspect-ratio: 9 / 17; max-width: 16rem; margin-inline: auto; border: 8px solid var(--cp-ink); border-radius: 1.8rem; }
.video-frame { display: block; width: 100%; aspect-ratio: 16 / 9; background: #10264a; border-radius: .8rem; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55); }

/* "For IT" panel that closes a product page */
.aud-it h2 { color: #fff; font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem); }
.it-links { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.spec-light dt { color: var(--cp-muted); }
.spec-light dd { color: var(--cp-ink); }

/* Cards that are not links (an area whose own page is not written yet) */
.sol.is-static:hover { border-color: var(--cp-line); transform: none; }
.sol ul { margin: 0; padding-left: 1.1rem; color: var(--cp-muted); font-size: .95rem; }
.sol ul li + li { margin-top: .15rem; }

/* Architecture diagram: tiers of boxes, top to bottom */
.arch { display: grid; gap: .6rem; }
.arch-label { font-family: var(--font-display); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-muted); margin: .5rem 0 0; }
.arch-tier { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .6rem; }
.arch-box { min-width: 0; padding: .8rem .95rem; border: 1px solid var(--cp-line); border-radius: var(--radius); background: var(--cp-surface); }
.arch-box strong { display: block; font-family: var(--font-display); font-size: .98rem; color: var(--cp-navy); }
.arch-box span { display: block; color: var(--cp-muted); font-size: .88rem; line-height: 1.4; }
.arch-box.core { background: var(--cp-navy); border-color: var(--cp-navy); }
.arch-box.core strong, .arch-box.core span { color: var(--cp-bg); }
.arch-box.core span { opacity: .85; }
.arch-flow { display: grid; place-items: center; color: var(--cp-plus); }
.arch-flow .ic { transform: rotate(90deg); }

/* A plain note: wording that needs care (compliance, what a page does not claim) */
.note-box { border: 1px solid var(--cp-line); border-radius: var(--radius); background: var(--cp-surface); padding: 1.1rem 1.25rem; }
.note-box > :last-child { margin-bottom: 0; }
.note-box h3 { font-size: 1.06rem; margin: 0 0 .4rem; }

/* Contact details */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.contact-list li { display: flex; gap: .8rem; align-items: flex-start; }
.contact-list .ic { color: var(--cp-plus); width: 1.5rem; height: 1.5rem; margin-top: .15rem; }
.contact-list strong { display: block; font-family: var(--font-display); color: var(--cp-navy); }
.contact-list span, .contact-list address { color: var(--cp-muted); font-style: normal; margin: 0; }

/* A customer quote placed on a grey band */
.tst.on-band { background: var(--cp-surface); border: 1px solid var(--cp-line); }

/* Phones: Bootstrap's widest gutter (g-5 = 3rem) is wider than the container's side padding, which made every page
   scroll sideways by 12px. Below lg the columns stack, so the row only needs the standard gutter. The container also
   gets a 20px side gutter instead of 12px. */
@media (max-width: 991.98px) { .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; } }
@media (max-width: 575.98px) { .container { padding-inline: 1.25rem; } }

/* Sticky header: anchors stop below it, and a long phone menu scrolls inside the header instead of running off screen. */
[id] { scroll-margin-top: 5.5rem; }
@media (max-width: 991.98px) { .site-nav .navbar-collapse { max-height: calc(100vh - 5rem); max-height: calc(100dvh - 5rem); overflow-y: auto; } }

/* Bootstrap's .h3 utility on another heading level keeps the site's heading look. */
.h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; }

/* Six cards read better as 3 x 2 than as 4 + 2. */
@media (min-width: 992px) { .cards-3.by-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* A clip that takes over a screenshot slot keeps the slot's shape (a phone keeps the screenshot's rounder corners). */
.video-frame.shot-shot { aspect-ratio: 16 / 10; }
.video-frame.shot-phone { aspect-ratio: 9 / 17; max-width: 16rem; margin-inline: auto; border-radius: 1.8rem; }
.video-frame { object-fit: cover; }

/* Drawings of the product: the app is navy with no green accent (owner, 2026-10-01: green means go or valid), so a
   button inside a product mock is navy. The site's own buttons stay .btn-cp. */
.btn-app { --bs-btn-bg: var(--cp-navy); --bs-btn-border-color: var(--cp-navy); --bs-btn-color: var(--cp-bg);
  --bs-btn-hover-bg: var(--cp-navy); --bs-btn-hover-border-color: var(--cp-navy); --bs-btn-hover-color: var(--cp-bg);
  --bs-btn-font-weight: 700; font-family: var(--font-display); }

/* Company: a vertical timeline of years */
.timeline { list-style: none; margin: 0; padding: 0 0 0 .1rem; border-left: 2px solid var(--cp-line); display: grid; gap: 1.1rem; }
.timeline li { position: relative; padding-left: 1.4rem; }
.timeline li::before { content: ""; position: absolute; left: -.5rem; top: .35rem; width: .85rem; height: .85rem; border-radius: 50%; background: var(--cp-plus); border: 2px solid var(--cp-bg); }
.timeline .yr { display: block; font-family: var(--font-display); font-weight: 800; color: var(--cp-navy); }
.timeline span + span { color: var(--cp-muted); }

/* News: the archive by year, and a post */
.news-card h3 a { color: var(--cp-ink); text-decoration: none; }
.news-card h3 a:hover, .news-card h3 a:focus { text-decoration: underline; }
.news-year + .news-year { margin-top: 2rem; }
.news-list { list-style: none; padding: 0; margin: .5rem 0 0; }
.news-list li { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: .2rem 1.25rem; padding: .8rem 0; border-top: 1px solid var(--cp-line); }
.news-list time { color: var(--cp-muted); font-size: .92rem; font-weight: 600; }
.news-list strong { display: block; font-family: var(--font-display); color: var(--cp-navy); }
.news-list span { color: var(--cp-ink); }
@media (max-width: 575.98px) { .news-list li { grid-template-columns: minmax(0, 1fr); } }
.post-body h2 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); margin-top: 2.25rem; }