/* ==========================================================================
   cspify-site.css — structural + brand CSS for the cspify.com theme
   (365.OrchardCore.Theme.CspifyCom). Convention mirrors tenant-site.css:
   committed static CSS in the host wwwroot, no npm/Tailwind pipeline.

   MERGED "Pacific sunrise" design system from the two CSPify v7 design
   exports (operator hand-off 2026-07-23, export 88c4fba 2026-07-22):
   light = cspify-light-theme-export/src/index.css (v8-light tokens),
   dark = cspify-dark-theme-export/src/index.css (v6-rebrand tokens). The
   light values live on :root; the dark values override under
   :root[data-theme="dark"]. js/theme/cspify-site.js sets data-theme
   pre-paint (localStorage ?? system).

   Palette law (EXPORT-README v7): one element, one color. Sky #35BEEE =
   action · Gold #EFC012 = emphasis · pillars per-purpose · NO multi-hue
   gradients (the old --gradient* tokens are gone; --accent* solids replace
   them). --green is GOLD (brand accent) — success/matched lives in
   --green-ink only. Fonts: Sora / Manrope / IBM Plex Mono.
   ========================================================================== */

/* ---- CSPify "Pacific sunrise" tokens — light (v8-light.md, default) ---- */
:root {
    /* Base field */
    --paper: #fdfefe;
    --paper-2: #f5fafc;
    --paper-3: #edf6fa;
    --card: #ffffff;
    --frame: #e3f0f6; /* light tray: evidence frames hold dark mocks */

    /* Ink & text (pacific ink on light) */
    --ink: #0a1f2d;
    --text-1: #0a1f2d;
    --text-2: #3d5a6b;
    --text-3: #587586;
    --text-on-gradient: #03222b;

    /* Footer floor zone (dark band — dark in BOTH themes) */
    --navy-950: #02080c;
    --navy-900: #06131a;
    --text-d1: #eaf6fc;
    --text-d2: #a9c3d4;
    --text-d3: #8aa6b7;
    --line-dark: rgba(140, 214, 246, 0.14);

    /* Hairlines & borders (light field) */
    --line: rgba(10, 61, 85, 0.12);
    --line-strong: rgba(10, 61, 85, 0.2);

    /* Brand solids — fills bright, text inks deepened for AA on light.
       --green stays GOLD (brand accent), never success. */
    --blue: #35beee;
    --green: #efc012;
    --blue-ink: #0288b8;
    --green-ink: #12994f;
    --amber-ink: #c25e10;
    --red-ink: #c94040;
    --blue-tint: rgba(2, 136, 184, 0.1);
    --green-tint: rgba(18, 153, 79, 0.1);
    --amber-tint: rgba(194, 94, 16, 0.1);
    --red-tint: rgba(201, 64, 64, 0.1);

    /* Accent solids (replace the retired multi-hue gradient tokens):
       --accent = node squares / eyebrow markers / card borders;
       --accent-text = the signature highlighted headline words;
       --accent-text-navy = the same on the navy floor zones;
       --gold-text = gold emphasis words (hero, stat highlights). */
    --accent: #0288b8;
    --accent-text: #0288b8;
    --accent-text-navy: #0288b8;
    --gold-text: #a67c00;

    /* Pillar accent / ink / tint triples — light-safe inks */
    --quote: #0288b8;
    --quote-ink: #0288b8;
    --quote-tint: rgba(2, 136, 184, 0.1);
    --provision: #0e9c8a;
    --provision-ink: #0e9c8a;
    --provision-tint: rgba(14, 156, 138, 0.1);
    --bill: #12994f;
    --bill-ink: #12994f;
    --bill-tint: rgba(18, 153, 79, 0.1);
    --reconcile: #5e8f00;
    --reconcile-ink: #5e8f00;
    --reconcile-tint: rgba(94, 143, 0, 0.12);
    --renew: #a67c00;
    --renew-ink: #a67c00;
    --renew-tint: rgba(166, 124, 0, 0.1);

    /* Elevation (light: soft cool shadows) */
    --shadow-card:
        0 1px 2px rgba(10, 45, 65, 0.06),
        0 12px 32px -12px rgba(10, 45, 65, 0.12);
    --shadow-lift:
        0 2px 4px rgba(10, 45, 65, 0.08),
        0 24px 56px -16px rgba(10, 45, 65, 0.18);
    --shadow-frame:
        0 1px 2px rgba(10, 45, 65, 0.08),
        0 36px 80px -28px rgba(10, 45, 65, 0.22);
    --glow-cta:
        0 0 0 1px rgba(2, 136, 184, 0.22),
        0 12px 40px -8px rgba(2, 136, 184, 0.28);

    /* Font stacks (v6-rebrand.md §2.2) — Sora / Manrope / IBM Plex Mono */
    --font-display: "Sora", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
    --font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    /* Chrome (theme-varying pieces of nav/footer) */
    --nav-bg-scrolled: rgba(253, 254, 254, 0.8);
    --scrollbar-thumb: #1e4559;
    --scrollbar-thumb-hover: #28627c;
    --card-top-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    --evidence-border: rgba(140, 214, 246, 0.18);
    --evidence-img-border: rgba(140, 214, 246, 0.1);
    --selection-bg: rgba(53, 190, 238, 0.3);
}

/* ---- CSPify "Pacific sunrise" tokens — dark (v6-rebrand.md §1) ---- */
:root[data-theme="dark"] {
    /* Base field — deep Pacific family (cyan-leaning navy-black) */
    --paper: #040e15;
    --paper-2: #07151d;
    --paper-3: #0a1922;
    --card: #0d1f29;
    --frame: #132934; /* raised "light-box" surface: evidence frames */

    --ink: #eaf6fc;
    --text-1: #eaf6fc;
    --text-2: #a9c3d4;
    --text-3: #8aa6b7;
    --text-on-gradient: #03222b;

    --navy-950: #02080c;
    --navy-900: #06131a;
    --text-d1: #eaf6fc;
    --text-d2: #a9c3d4;
    --text-d3: #8aa6b7;
    --line-dark: rgba(140, 214, 246, 0.14);

    --line: rgba(140, 214, 246, 0.12);
    --line-strong: rgba(140, 214, 246, 0.22);

    /* Brand solids — re-lit inks on dark. Gold is brand, never a state. */
    --blue-ink: #4fc9f2;
    --green-ink: #4ade80;
    --amber-ink: #f69c48; /* sunset orange — warnings/anomalies */
    --red-ink: #f08080;
    --blue-tint: rgba(53, 190, 238, 0.12);
    --green-tint: rgba(74, 222, 128, 0.1);
    --amber-tint: rgba(246, 156, 72, 0.1);
    --red-tint: rgba(240, 128, 128, 0.1);

    --accent: #35beee;
    --accent-text: #35beee;
    --accent-text-navy: #35beee;
    --gold-text: #efc012;

    /* Pillar triples (§1.12) — the pipeline IS the sunrise: sky → gold */
    --quote: #35beee;
    --quote-ink: #4fc9f2;
    --quote-tint: rgba(53, 190, 238, 0.12);
    --provision: #3bd8c3;
    --provision-ink: #3bd8c3;
    --provision-tint: rgba(59, 216, 195, 0.1);
    --bill: #4ade80;
    --bill-ink: #4ade80;
    --bill-tint: rgba(74, 222, 128, 0.1);
    --reconcile: #a4dd3c;
    --reconcile-ink: #a4dd3c;
    --reconcile-tint: rgba(164, 221, 60, 0.1);
    --renew: #efc012;
    --renew-ink: #efc012;
    --renew-tint: rgba(239, 192, 18, 0.1);

    /* Elevation (dark: fill step + hairline first; teal-black shadows) */
    --shadow-card:
        0 1px 2px rgba(2, 10, 14, 0.45),
        0 12px 32px -12px rgba(2, 10, 14, 0.55);
    --shadow-lift:
        0 2px 4px rgba(2, 10, 14, 0.5),
        0 24px 56px -16px rgba(2, 10, 14, 0.65);
    --shadow-frame:
        0 1px 2px rgba(2, 10, 14, 0.5),
        0 36px 80px -28px rgba(2, 10, 14, 0.7);
    --glow-cta:
        0 0 0 1px rgba(53, 190, 238, 0.28),
        0 12px 40px -8px rgba(53, 190, 238, 0.32);

    --nav-bg-scrolled: rgba(4, 14, 21, 0.8);
    --card-top-highlight: inset 0 1px 0 rgba(234, 246, 252, 0.04);
    --selection-bg: rgba(53, 190, 238, 0.3);
}

/* ==========================================================================
   Base
   ========================================================================== */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Clears both the 68px and 58px (scrolled) fixed-nav heights so in-page anchor targets
       (#security, the pillar links) don't land hidden under the fixed bar. */
    scroll-padding-top: 84px;
    -webkit-text-size-adjust: 100%;
}

body.cs-body {
    margin: 0;
    background-color: var(--paper);
    color: var(--text-2);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    /* matches the fixed nav height */
    padding-top: 68px;
}

.cs-body h1,
.cs-body h2,
.cs-body h3,
.cs-body h4,
.cs-body h5,
.cs-body h6 {
    font-family: var(--font-display);
    color: var(--text-1);
    font-weight: 600;
    text-wrap: balance;
    margin: 0;
}

.cs-body ::selection {
    background: var(--selection-bg);
    color: var(--text-1);
}

.cs-body :focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: 4px;
}

.cs-body ::-webkit-scrollbar {
    width: 10px;
}

.cs-body ::-webkit-scrollbar-track {
    background: var(--paper-2);
}

.cs-body ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 999px;
}

.cs-body ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

.cs-body a {
    color: var(--blue-ink);
    text-decoration: none;
}

.cs-body img {
    max-width: 100%;
    height: auto;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .cs-body *,
    .cs-body *::before,
    .cs-body *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Containers (design.md §4)
   ========================================================================== */
.cs-container,
.container-site {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 24px;
}

.cs-container-wide,
.container-wide {
    width: 100%;
    max-width: 1360px;
    margin-inline: auto;
    padding-inline: 24px;
}

.cs-container-narrow,
.container-narrow {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
    padding-inline: 24px;
}

@media (min-width: 768px) {
    .cs-container,
    .container-site,
    .cs-container-wide,
    .container-wide,
    .cs-container-narrow,
    .container-narrow {
        padding-inline: 40px;
    }
}

/* ==========================================================================
   Signature components (ported from the export index.css, both variants)
   ========================================================================== */
/* Signature highlighted words — v7 palette law retired the multi-hue text
   gradients; the classes stay (recipe HTML + CsHtml emit them) but now render
   the per-theme accent solid. */
.text-gradient {
    color: var(--accent-text);
}

.text-gradient-navy {
    color: var(--accent-text-navy);
}

.text-gold {
    color: var(--gold-text);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--text-3);
    margin: 0;
}

.eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--accent);
    flex: none;
}

.card-surface {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-card), var(--card-top-highlight);
    transition:
        transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.card-surface:hover {
    transform: translateY(-3px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-lift), var(--card-top-highlight);
}

.card-gradient-border {
    position: relative;
    background: var(--card);
    border-radius: 16px;
    box-shadow: var(--shadow-card), var(--card-top-highlight);
    isolation: isolate;
}

.card-gradient-border::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--accent);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

.well {
    background: var(--paper-3);
    border-radius: 12px;
}

.evidence-frame {
    background: var(--frame);
    border: 1px solid var(--evidence-border);
    border-radius: 20px;
    padding: 10px;
    margin: 0;
    box-shadow: var(--shadow-frame);
    transition:
        transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.18s ease;
}

.evidence-frame img {
    display: block;
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--evidence-img-border);
}

.evidence-frame:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
}

.section-divider {
    position: relative;
    height: 1px;
    background: var(--line);
}

.section-divider::before {
    content: "";
    position: absolute;
    left: max(24px, calc((100% - 1200px) / 2 + 40px));
    top: -4px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--accent);
}

@media (max-width: 767px) {
    .section-divider::before {
        left: 24px;
    }
}

.tnum {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.font-display {
    font-family: var(--font-display);
}

.font-mono-brand {
    font-family: var(--font-mono);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.cs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    padding: 10px 18px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease,
        border-color 0.18s ease;
}

/* export Buttons.tsx: disabled buttons dim and ignore pointer events. */
.cs-btn:disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* a.cs-btn-* must outrank the `.cs-body a` link color (equal-specificity trap seen live). */
.cs-btn-primary,
.cs-body a.cs-btn-primary {
    background: var(--blue);
    color: var(--text-on-gradient);
    border: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.cs-btn-primary:hover,
.cs-body a.cs-btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: var(--glow-cta);
    color: var(--text-on-gradient);
}

.cs-btn-primary:active {
    transform: translateY(0) scale(0.98);
}

.cs-btn-ghost,
.cs-body a.cs-btn-ghost {
    background: transparent;
    color: var(--text-1);
    border: 1px solid var(--line-strong);
}

.cs-btn-ghost:hover,
.cs-body a.cs-btn-ghost:hover {
    border-color: var(--blue);
    color: var(--text-1);
}

.cs-btn-lg {
    padding: 13px 26px;
    font-size: 1rem;
}

/* ==========================================================================
   Nav (design.md §7.1) — fixed top, 68px → 58px on scroll
   ========================================================================== */
.cs-nav {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 50;
    height: 68px;
    border-bottom: 1px solid transparent;
    background: transparent;
    transition:
        height 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        backdrop-filter 0.3s ease;
}

.cs-nav.is-scrolled {
    height: 58px;
    border-bottom-color: var(--line);
    background: var(--nav-bg-scrolled);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.cs-nav-inner {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cs-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cs-logo img {
    width: 28px;
    height: 28px;
}

.cs-logo-text {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-1);
}

.cs-nav-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: none;
}

.cs-nav-links ul,
.cs-nav-overlay ul,
.cs-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cs-nav-links ul {
    display: flex;
    align-items: center;
    gap: 32px;
}

.cs-nav-links a {
    display: inline-block;
    padding: 8px 0;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-2);
    transition: color 0.15s ease;
}

.cs-nav-links a:hover {
    color: var(--text-1);
}

/* OC menu marks the current item's li — underline in the brand gradient. */
.cs-nav-links li a.active,
.cs-nav-links li.active > a,
.cs-nav-links li[class*="current"] > a {
    color: var(--text-1);
    background-image: linear-gradient(var(--blue), var(--blue));
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-position: 0 100%;
}

.cs-nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cs-nav-tag {
    display: none;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-3);
}

.cs-nav-cta {
    display: none;
}

.cs-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.cs-theme-toggle:hover {
    border-color: var(--line-strong);
    color: var(--text-1);
}

/* toggle shows the theme you would SWITCH TO */
.cs-icon-sun {
    display: none;
}

:root[data-theme="dark"] .cs-icon-sun {
    display: block;
}

:root[data-theme="dark"] .cs-icon-moon {
    display: none;
}

.cs-nav-burger {
    position: relative;
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
}

.cs-nav-burger span {
    position: absolute;
    height: 2px;
    width: 20px;
    border-radius: 2px;
    background: var(--text-1);
    transition: transform 0.3s ease;
}

.cs-nav-burger span:first-child {
    transform: translateY(-4px);
}

.cs-nav-burger span:last-child {
    transform: translateY(4px);
}

.cs-nav.is-open .cs-nav-burger span:first-child {
    transform: rotate(45deg);
}

.cs-nav.is-open .cs-nav-burger span:last-child {
    transform: rotate(-45deg);
}

.cs-nav-overlay {
    display: none;
    position: fixed;
    inset: 58px 0 0 0;
    z-index: 40;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding: 32px;
    background: var(--nav-bg-scrolled);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* The overlay is a body-level sibling of the nav (NOT a descendant): the nav's backdrop-filter
   makes it a containing block, which would collapse a fixed descendant's inset to the nav box.
   So it toggles its own is-open class rather than inheriting .cs-nav.is-open. */
.cs-nav-overlay.is-open {
    display: flex;
}

/* Scroll-lock while the mobile overlay is open — scoped to mobile via a class, so crossing the
   1024px breakpoint (e.g. a tablet rotate) can never leave the body permanently unscrollable
   even though the burger/overlay controls disappear at desktop widths. */
@media (max-width: 1023.98px) {
    body.cs-nav-locked {
        overflow: hidden;
    }
}

.cs-nav-overlay ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cs-nav-overlay a {
    display: block;
    padding: 12px 0;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-1);
}

.cs-nav-overlay-cta {
    width: 100%;
}

.cs-nav-overlay-tag {
    margin: 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-3);
}

@media (min-width: 1024px) {
    .cs-nav-links {
        display: block;
    }

    .cs-nav-burger,
    .cs-nav-overlay {
        display: none;
    }

    .cs-nav-overlay.is-open {
        display: none;
    }

    .cs-nav-cta {
        display: inline-flex;
    }
}

@media (min-width: 1360px) {
    /* Decorative tagline — only shown once there's room past the centered nav links + CTA cluster,
       so the "Security" link never overlaps it in the 1100-1280px band. */
    .cs-nav-tag {
        display: inline;
    }
}

/* ==========================================================================
   Page scaffolding
   ========================================================================== */
.cs-main {
    min-height: 55vh;
}

.cs-pagehead {
    padding: 64px 0 24px;
}

.cs-pagehead h1 {
    font-size: clamp(2.2rem, 4.4vw, 3.4rem);
    letter-spacing: -0.03em;
    line-height: 1.06;
}

.cs-notfound .cs-pagehead {
    padding: 96px 0;
    text-align: center;
}

.cs-notfound p {
    margin: 16px 0 24px;
}

.cs-sectionhead {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 760px;
}

.cs-sectionhead h2 {
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.cs-sectionhead-lede {
    max-width: 62ch;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--text-2);
    margin: 0;
}

.is-center.cs-sectionhead,
.cs-sectionhead.is-center {
    align-items: center;
    text-align: center;
    margin-inline: auto;
}

.cs-note {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--text-3);
}

/* ==========================================================================
   Widgets
   ========================================================================== */

/* --- SiteHero --- */
.cs-hero {
    padding: 56px 0 64px;
}

.cs-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 900px;
    margin-inline: auto;
}

.cs-hero h1 {
    margin-top: 24px;
    font-size: clamp(2.75rem, 5.6vw, 4.5rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
}

.cs-hero-lede {
    margin: 24px 0 0;
    max-width: 60ch;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--text-2);
}

.cs-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
}

.cs-hero-micro {
    margin: 20px 0 0;
    max-width: 64ch;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--text-3);
}

.cs-hero-frame {
    max-width: 1120px;
    margin: 56px auto 0;
}

@media (max-width: 767px) {
    .cs-hero {
        padding: 40px 0 48px;
    }

    .cs-hero-lede {
        font-size: 1rem;
    }
}

/* --- SiteStatStrip --- */
.cs-statstrip {
    padding: 40px 0;
}

.cs-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.cs-stat {
    padding: 24px 28px;
}

.cs-stat-value {
    margin: 0;
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-1);
}

.cs-stat-label {
    margin: 4px 0 0;
    font-weight: 600;
    color: var(--text-2);
}

.cs-stat-caption {
    margin: 2px 0 0;
    font-size: 0.875rem;
    color: var(--text-3);
}

/* --- SiteCardBand --- */
.cs-cardband {
    padding: 72px 0;
}

.cs-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.cs-card {
    padding: 28px;
}

.cs-card h3 {
    font-size: 1.25rem;
    letter-spacing: -0.015em;
}

.cs-card p {
    margin: 10px 0 0;
    color: var(--text-2);
}

.cs-card-link {
    display: inline-block;
    margin-top: 14px;
    font-weight: 600;
    color: var(--blue-ink);
}

.cs-card-link:hover {
    text-decoration: underline;
}

.cs-cardband .cs-note {
    margin: 28px 0 0;
}

/* --- SiteRichText / prose (the class vocabulary content HTML uses) --- */
.cs-richtext {
    padding: 48px 0;
}

.cs-prose h2 {
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 16px;
}

.cs-prose h3 {
    font-size: 1.35rem;
    letter-spacing: -0.015em;
    margin: 32px 0 8px;
}

.cs-prose p {
    max-width: 72ch;
}

.cs-prose ul {
    padding-left: 22px;
}

.cs-prose hr {
    border: none;
    height: 1px;
    background: var(--line);
    margin: 40px 0;
}

/* grids for hand-authored section HTML */
.cs-grid-2,
.cs-grid-3,
.cs-grid-4 {
    display: grid;
    gap: 20px;
    margin: 32px 0;
}

.cs-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.cs-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.cs-grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Wide variant for heavy cards (persona before/with tables): caps the desktop layout at two
   columns so four cards read as a balanced 2×2 instead of an auto-fit 3+1 orphan row. */
.cs-grid-wide {
    grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
}

.cs-prose .card-surface,
.cs-prose .card-gradient-border,
.cs-prose .well {
    padding: 24px 26px;
}

.cs-prose .card-surface > :first-child,
.cs-prose .card-gradient-border > :first-child,
.cs-prose .well > :first-child {
    margin-top: 0;
}

/* pills / chips */
.cs-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 3px 12px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.cs-tint-quote { background: var(--quote-tint); color: var(--quote-ink); }
.cs-tint-provision { background: var(--provision-tint); color: var(--provision-ink); }
.cs-tint-bill { background: var(--bill-tint); color: var(--bill-ink); }
.cs-tint-reconcile { background: var(--reconcile-tint); color: var(--reconcile-ink); }
.cs-tint-renew { background: var(--renew-tint); color: var(--renew-ink); }
.cs-tint-amber { background: var(--amber-tint); color: var(--amber-ink); }
.cs-tint-red { background: var(--red-tint); color: var(--red-ink); }

/* check / cross lists */
.cs-check-list,
.cs-x-list {
    list-style: none;
    padding: 0;
    margin: 16px 0;
}

.cs-check-list li,
.cs-x-list li {
    position: relative;
    padding-left: 28px;
    margin: 8px 0;
}

.cs-check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--green-ink);
}

.cs-x-list li::before {
    content: "✕";
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--text-3);
}

/* FAQ — native details/summary */
.cs-faq {
    margin: 32px 0;
    border-top: 1px solid var(--line);
}

.cs-faq details {
    border-bottom: 1px solid var(--line);
}

.cs-faq summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 32px 18px 0;
    position: relative;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-1);
}

.cs-faq summary::-webkit-details-marker {
    display: none;
}

.cs-faq summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-3);
    transition: transform 0.2s ease;
}

.cs-faq details[open] summary::after {
    content: "–";
}

.cs-faq details > *:not(summary) {
    padding: 0 0 18px;
    max-width: 72ch;
}

/* tables (comparison / plan matrix) */
.cs-table-wrap {
    overflow-x: auto;
    margin: 32px 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card);
}

.cs-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    min-width: 640px;
}

/* Tables nested inside cards/wells (persona before/with, get-started connect list) size to their
   container instead of forcing the 640px matrix minimum — no phantom horizontal scrollbars. */
.card-surface .cs-table-wrap table,
.card-gradient-border .cs-table-wrap table,
.well .cs-table-wrap table {
    min-width: 0;
}

.card-surface .cs-table-wrap td,
.card-surface .cs-table-wrap th,
.card-gradient-border .cs-table-wrap td,
.card-gradient-border .cs-table-wrap th,
.well .cs-table-wrap td,
.well .cs-table-wrap th {
    padding: 10px 12px;
}

.cs-table-wrap th {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-3);
    text-align: left;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-strong);
}

.cs-table-wrap td {
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
    color: var(--text-2);
    vertical-align: top;
}

.cs-table-wrap tr:last-child td {
    border-bottom: none;
}

.cs-table-wrap td:first-child {
    color: var(--text-1);
    font-weight: 500;
}

/* pricing plan cards */
.cs-plan {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px;
}

.cs-plan-name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-1);
}

.cs-plan-price {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-1);
}

.cs-plan-price small {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-3);
}

.cs-plan .cs-btn {
    margin-top: auto;
}

/* logo strip (integration wordmarks) */
.cs-logo-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 32px 48px;
    margin: 32px 0;
    opacity: 0.75;
}

.cs-logo-strip img {
    height: 28px;
    width: auto;
}

:root[data-theme="dark"] .cs-logo-strip img {
    filter: invert(1) hue-rotate(180deg);
    opacity: 0.85;
}

/* persona cards */
.cs-persona img {
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
}

/* --- SiteCtaBand — the navy zone (dark in both themes) --- */
.cs-ctaband {
    background: var(--navy-900);
    border-top: 1px solid var(--line-dark);
    padding: 88px 0;
}

.cs-ctaband-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.cs-ctaband h2 {
    color: var(--text-d1);
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.cs-ctaband h2 .text-gradient {
    color: var(--accent-text-navy);
}

.cs-ctaband-sub {
    margin: 0;
    max-width: 62ch;
    font-size: 1.0625rem;
    color: var(--text-d2);
}

/* ==========================================================================
   Footer — the site's navy floor (design.md §7.2)
   ========================================================================== */
.cs-footer {
    position: relative;
    background: var(--navy-950);
    border-top: 1px solid var(--line-dark);
    margin-top: 64px;
}

.cs-footer-motif {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    background: var(--navy-950);
    padding: 0 24px;
}

.cs-dot {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 999px;
}

.cs-dot-line {
    display: block;
    height: 1px;
    width: 32px;
    background: var(--line-dark);
}

.cs-dot-quote { background: var(--quote); }
.cs-dot-provision { background: var(--provision); }
.cs-dot-bill { background: var(--bill); }
.cs-dot-reconcile { background: var(--reconcile); }
.cs-dot-renew { background: var(--renew); }

.cs-footer .cs-container {
    padding-top: 80px;
    padding-bottom: 40px;
}

.cs-footer-cols {
    display: grid;
    gap: 48px;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .cs-footer-cols {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
    }
}

.cs-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cs-footer .cs-logo-text {
    color: var(--text-d1);
}

.cs-footer-phrase {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-d1);
}

.cs-footer-mono {
    margin: 0;
    max-width: 34ch;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--text-d3);
}

.cs-footer-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cs-footer-col h4 {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-d3);
}

.cs-footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cs-footer-col a {
    font-size: 0.9375rem;
    color: var(--text-d2);
    transition: color 0.15s ease;
}

.cs-footer-col a:hover {
    color: var(--text-d1);
}

.cs-footer-disclaimer {
    margin: 56px 0 0;
    max-width: 72ch;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--text-d3);
}

.cs-footer-legal {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--line-dark);
}

.cs-footer-legal p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-d3);
}

@media (min-width: 640px) {
    .cs-footer-legal {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* ==========================================================================
   Motion (design.md §5 — ported from the exports' GSAP system to CSS + the
   theme JS's IntersectionObservers; both index.css files carry no @keyframes,
   all export motion was JS-driven, hence this layer).
   Gating: `html.cs-motion` is set pre-paint by cspify-site.js ONLY when JS is
   running AND prefers-reduced-motion is off — no-JS visitors and reduced-motion
   users always get final-state content. Classes cs-rv/cs-hl/cs-motif-armed are
   JS-added, so they can never pre-hide content without JS.
   Eases: power3.out ≈ cubic-bezier(.215,.61,.355,1); power4.out ≈ (.19,1,.22,1);
   back.out ≈ (.34,1.56,.64,1).
   ========================================================================== */

@keyframes cs-rise {
    from {
        opacity: 0;
        transform: translateY(var(--cs-rise, 16px));
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes cs-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* §1 hero CTA glow settle: 0 → signature glow → resting (1.4s–2.2s). */
@keyframes cs-glow {
    0%, 100% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.25),
            var(--glow-cta);
    }
}

/* --- §5.2 word masks (JS splits text into .cs-wm > .cs-w, reverts on complete) --- */
.cs-wm {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.cs-w {
    display: inline-block;
    transform: translateY(112%);
    transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: transform;
}

.cs-hero .cs-w {
    transition-duration: 0.75s; /* home.md §1 hero words ride slightly longer */
}

.cs-w.is-in {
    transform: none;
}

/* Scroll-section h2s hold still until their words are split and armed. */
.cs-hl:not(.cs-hl-ready) {
    opacity: 0;
}

/* --- home.md §1 hero load timeline (fixed delays, CSS-owned; JS owns only the H1) --- */
html.cs-motion .cs-hero .eyebrow {
    --cs-rise: 10px;
    animation: cs-rise 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.15s both;
}

html.cs-motion .cs-hero h1:not(.cs-h1-ready) {
    opacity: 0; /* JS split + word-rise takes over at DOMContentLoaded (fail-open in JS) */
}

html.cs-motion .cs-hero-lede {
    --cs-rise: 16px;
    animation: cs-rise 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.65s both;
}

html.cs-motion .cs-hero-ctas .cs-btn {
    --cs-rise: 14px;
    animation: cs-rise 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s both;
}

html.cs-motion .cs-hero-ctas .cs-btn:nth-child(2) {
    animation-delay: 0.88s; /* §1 CTA stagger 0.08s */
}

html.cs-motion .cs-hero-ctas .cs-btn-primary {
    animation:
        cs-rise 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s both,
        cs-glow 0.8s ease-out 1.4s; /* glow settle after landing */
}

html.cs-motion .cs-hero-micro {
    animation: cs-fade 0.5s ease 1.05s both;
}

html.cs-motion .cs-hero-frame {
    --cs-rise: 32px;
    animation: cs-rise 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s both;
}

/* --- §5.1 reveal (classes + delays applied by JS; artifacts stripped after landing) --- */
.cs-rv {
    opacity: 0;
    transform: translateY(24px);
}

.cs-rv.is-in {
    opacity: 1;
    transform: none;
    transition:
        opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1),
        transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* --- nav scroll-progress hairline (design.md §7.1 — appears past 200px) --- */
.cs-nav-progress {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.cs-nav-progress.is-visible {
    opacity: 1;
}

/* --- mobile overlay: fade + staggered link rise (Navbar §7.1: 0.45s, 0.06s·i) --- */
.cs-nav-overlay.is-open {
    animation: cs-fade 0.25s ease both;
}

.cs-nav-overlay.is-open nav li {
    --cs-rise: 20px;
    animation: cs-rise 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cs-nav-overlay.is-open nav li:nth-child(2) { animation-delay: 0.06s; }
.cs-nav-overlay.is-open nav li:nth-child(3) { animation-delay: 0.12s; }
.cs-nav-overlay.is-open nav li:nth-child(4) { animation-delay: 0.18s; }
.cs-nav-overlay.is-open nav li:nth-child(5) { animation-delay: 0.24s; }
.cs-nav-overlay.is-open nav li:nth-child(n+6) { animation-delay: 0.3s; }

.cs-nav-overlay.is-open .cs-nav-overlay-cta,
.cs-nav-overlay.is-open .cs-nav-overlay-tag {
    --cs-rise: 20px;
    animation: cs-rise 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.36s both;
}

/* --- footer pipeline motif: dots pop with back-overshoot, stagger 0.15s --- */
.cs-motif-armed .cs-dot {
    transform: scale(0);
    opacity: 0;
}

.cs-footer-motif.is-in .cs-dot {
    transform: scale(1);
    opacity: 1;
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.2s ease;
}

.cs-footer-motif.is-in .cs-dot:nth-child(3) { transition-delay: 0.15s; }
.cs-footer-motif.is-in .cs-dot:nth-child(5) { transition-delay: 0.3s; }
.cs-footer-motif.is-in .cs-dot:nth-child(7) { transition-delay: 0.45s; }
.cs-footer-motif.is-in .cs-dot:nth-child(9) { transition-delay: 0.6s; }

/* Reduced-motion belt-and-suspenders: the JS never sets cs-motion under reduced motion, and
   the global reduce block flattens all durations — but never allow a hidden headline even if
   a UA lies about one and not the other. */
@media (prefers-reduced-motion: reduce) {
    .cs-hero h1,
    .cs-hl:not(.cs-hl-ready) {
        opacity: 1 !important;
    }
}

/* ==========================================================================
   Forms (export design.md §7.12 — ported 2026-07-23 for the /signup page)
   Inputs: recessed --paper-3 fill, 10px radius, 12/14 padding, body 1rem
   --text-1; focus: --blue border + 3px sky ring + --card fill. Labels 500
   0.875rem --text-2; helper/footnote mono 0.75rem --text-3.
   ========================================================================== */
.cs-form-page {
    max-width: 560px;
    margin-inline: auto;
    padding: 48px 24px 96px;
}

.cs-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 20px;
}

.cs-form-field label {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-2);
}

.cs-input {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--paper-3);
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-1);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

.cs-input::placeholder {
    color: var(--text-3);
}

.cs-input:focus {
    border-color: var(--blue);
    background: var(--card);
    box-shadow: 0 0 0 3px rgba(53, 190, 238, 0.25);
    outline: none;
}

select.cs-input {
    appearance: auto;
}

.cs-form-helper {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-3);
}

.cs-btn-block {
    width: 100%;
}

/* Inline alerts (state-chip palette: success = green-ink, danger = red-ink) */
.cs-alert {
    border-radius: 12px;
    padding: 12px 16px;
    margin: 0 0 20px;
    font-size: 0.9375rem;
}

.cs-alert ul {
    margin: 0;
    padding-left: 18px;
}

.cs-alert-success {
    background: var(--green-tint);
    border: 1px solid var(--green-ink);
    color: var(--green-ink);
}

.cs-alert-danger {
    background: var(--red-tint);
    border: 1px solid var(--red-ink);
    color: var(--red-ink);
}

.cs-alert-warning {
    background: var(--amber-tint);
    border: 1px solid var(--amber-ink);
    color: var(--amber-ink);
}

/* ==========================================================================
   Auth card inside the marketing layout (Login override)
   ========================================================================== */
.cs-auth-wrap {
    padding: 64px 24px 96px;
}

/* ==========================================================================
   Structural enhancements (JS-built; no-JS visitors keep the stacked flow)
   — product.md §4 pillar tabs + home.md §3 pinned "Five jobs" split.
   ========================================================================== */

/* ---- Pinned split: sticky section head left, job cards scrolling right ---- */
@media (min-width: 1024px) {
    .cs-scrolly {
        display: grid;
        grid-template-columns: 5fr 6fr;
        gap: 56px;
        align-items: start;
    }

    .cs-scrolly-left {
        position: sticky;
        top: 108px; /* clears the fixed nav (68px) with breathing room */
    }

    /* Inside the split the head spans its own column — cancel any max-width cap. */
    .cs-scrolly-left .cs-sectionhead {
        margin-bottom: 0;
        max-width: none;
    }
}

.cs-scrolly-right > .card-surface {
    padding: 28px;
}

.cs-scrolly-right > .card-surface + .card-surface {
    margin-top: 20px;
}

.cs-scrolly-cta {
    margin-top: 24px;
}

/* ---- Pillar tabs ---- */
.cs-ptabs-list {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    margin-bottom: 28px;
    scrollbar-width: none;
}

.cs-ptabs-list::-webkit-scrollbar {
    display: none;
}

.cs-ptabs-tab {
    appearance: none;
    background: none;
    border: 0;
    padding: 10px 2px 12px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-3);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px; /* underline sits ON the list hairline */
    transition: color 0.18s ease, border-color 0.18s ease;
}

.cs-ptabs-tab:hover {
    color: var(--text-1);
}

.cs-ptabs-tab.is-active {
    color: var(--blue-ink);
    border-bottom-color: var(--blue);
}

.cs-ptabs-tab:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: 4px;
}

.cs-ptabs-panels {
    position: relative;
    padding-top: 6px;
}

/* Auto-advance progress hairline above the active panel (screenshot's blue line). */
.cs-ptabs-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    border-radius: 999px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
}

.cs-ptabs-progress.is-timing {
    opacity: 1;
    animation: cs-ptabs-progress 6s linear forwards;
}

@keyframes cs-ptabs-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* Panels: only the active one renders; the tab + status bar carry its name. */
.cs-ptabs-panel {
    display: none;
}

.cs-ptabs-panel.is-active {
    display: block;
}

.cs-ptabs-panel > p:first-child {
    display: none; /* the source pill is represented by the tab + status bar */
}

.cs-motion .cs-ptabs-panel.is-active {
    animation: cs-ptabs-panel-in 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cs-ptabs-panel-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Panel layout: mockup left, copy right (stacks below 1024px). */
@media (min-width: 1024px) {
    .cs-ptabs-panel.is-active {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: 48px;
        align-items: center;
    }

    .cs-ptabs-panel > figure.evidence-frame {
        grid-column: 1;
        grid-row: 1 / span 4;
        margin: 0;
    }

    .cs-ptabs-panel > h3,
    .cs-ptabs-panel > ul,
    .cs-ptabs-panel > p {
        grid-column: 2;
    }
}

/* Status bar: PILL · caption · 0N / 0N. */
.cs-ptabs-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding: 12px 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper-2);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
}

.cs-ptabs-caption {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-ptabs-count {
    color: var(--text-2);
}

@media (prefers-reduced-motion: reduce) {
    .cs-ptabs-progress {
        display: none; /* no auto-advance under reduced motion — no timer to show */
    }
}

/* ---- CTA-band labeled pipeline strip (design page-end treatment; navy zone) ---- */
.cs-ctaband-pipeline {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    max-width: 720px;
    margin: 0 auto 40px;
}

.cs-cp-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
    padding: 4px 6px;
    text-decoration: none;
    cursor: pointer;
    border-radius: 8px;
    transition: transform 0.18s ease;
}

/* Interactive stage links: label brightens + dot grows on hover/focus; keyboard focus ring. */
.cs-cp-step:hover,
.cs-cp-step:focus-visible {
    transform: translateY(-2px);
}

.cs-cp-step:hover .cs-cp-label,
.cs-cp-step:focus-visible .cs-cp-label {
    color: var(--text-d1);
}

.cs-cp-step:hover .cs-cp-dot,
.cs-cp-step:focus-visible .cs-cp-dot {
    transform: scale(1.35);
}

.cs-cp-dot {
    transition: transform 0.18s ease;
}

/* Hover/focus help tip (data-tip content via ::after). A pure-CSS affordance — NOT gated on the
   JS/motion class, because reduced-motion drops html.cs-js (see cspify-site.js pre-paint) yet those
   visitors still hover and still want the tip. Positioned above the label so it never overlaps the
   dot line. On touch, :hover is transient and :focus-visible excludes touch, so it never sticks. */
.cs-cp-step[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    z-index: 20;
    width: max-content;
    max-width: 220px;
    border: 1px solid var(--line-dark);
    background: var(--frame);
    border-radius: 10px;
    padding: 8px 12px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-d1);
    text-align: center;
    box-shadow: var(--shadow-lift);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.cs-cp-step[data-tip]:hover::after,
.cs-cp-step[data-tip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Edge tips stay on-screen: nudge the first/last step's tip toward the centre. */
.cs-cp-step[data-pillar="quote"][data-tip]::after {
    left: 0;
    transform: translateY(4px);
}

.cs-cp-step[data-pillar="quote"][data-tip]:hover::after,
.cs-cp-step[data-pillar="quote"][data-tip]:focus-visible::after {
    transform: translateY(0);
}

.cs-cp-step[data-pillar="renew"][data-tip]::after {
    left: auto;
    right: 0;
    transform: translateY(4px);
}

.cs-cp-step[data-pillar="renew"][data-tip]:hover::after,
.cs-cp-step[data-pillar="renew"][data-tip]:focus-visible::after {
    transform: translateY(0);
}

.cs-cp-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-d3);
}

.cs-cp-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.cs-cp-quote { background: var(--quote); }
.cs-cp-provision { background: var(--provision); }
.cs-cp-bill { background: var(--bill); }
.cs-cp-reconcile { background: var(--reconcile); }
.cs-cp-renew { background: var(--renew); }

.cs-cp-line {
    flex: 1;
    height: 1px;
    background: var(--line-dark);
    margin: 0 10px 4px;
    min-width: 24px;
}

@media (max-width: 639.98px) {
    .cs-ctaband-pipeline {
        margin-bottom: 28px;
    }

    .cs-cp-label {
        font-size: 0.5625rem;
        letter-spacing: 0.12em;
    }

    .cs-cp-line {
        min-width: 8px;
        margin: 0 6px 4px;
    }
}