/* ==========================================================================
   ConflictsPro — Elevation pass (2026-08-19)
   Loaded AFTER cyan-premium.css; scoped to body.elevated (index.html only).

   The redesign in one sentence: keep the dark hero + map as the page's single
   full-glow brand moment, then alternate light/tint/navy surfaces below it so
   the page reads as chapters, with ONE working accent (teal) on light ground
   and electric cyan reserved for primary CTAs.

   No copy changes anywhere — translations keyed on data-i18n remain intact.
   Surfaces are applied via classes added in index.html:
     .sfc-light  white chapter          .sfc-tint  ice-tint chapter
     .sfc-navy   full-bleed proof band  (dark = untouched existing styling)
   ========================================================================== */

body.elevated {
    --e-ink: #0B1626;          /* text on light */
    --e-slate: #44586C;        /* secondary text on light */
    --e-teal: #0C93AE;         /* working accent on light */
    --e-teal-deep: #0A7A91;
    --e-paper: #FFFFFF;
    --e-tint: #EFF6F9;
    --e-hairline: #D9E4EC;
    --e-navy: #10293D;         /* proof band */
    --e-card-shadow: 0 1px 2px rgba(11, 22, 38, 0.05), 0 10px 28px -14px rgba(11, 22, 38, 0.16);
    --e-card-shadow-hover: 0 2px 4px rgba(11, 22, 38, 0.06), 0 18px 44px -16px rgba(11, 22, 38, 0.22);
}

/* --------------------------------------------------------------------------
   Surfaces: full-bleed bands that escape the 1280px .content container.
   Solid backgrounds + stacking context so the fixed neural canvas / grid
   never bleeds through a light chapter.
   -------------------------------------------------------------------------- */
body.elevated .sfc-light,
body.elevated .sfc-tint,
body.elevated .sfc-navy {
    position: relative;
    z-index: 1;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(60px, calc(50vw - 590px));
    padding-right: max(60px, calc(50vw - 590px));
    padding-top: 96px;
    padding-bottom: 96px;
    margin-bottom: 0;
}

body.elevated .sfc-light { background: var(--e-paper); }
body.elevated .sfc-tint  { background: var(--e-tint); }
body.elevated .sfc-navy  { background: var(--e-navy); }

@media (max-width: 900px) {
    body.elevated .sfc-light,
    body.elevated .sfc-tint,
    body.elevated .sfc-navy {
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 64px;
        padding-bottom: 64px;
    }
}

/* Chapters sit flush against each other; the old inter-section void goes. */
body.elevated .section { margin-bottom: 0; }
body.elevated .capabilities-split.sfc-light { margin-top: 0; }

/* --------------------------------------------------------------------------
   Typography discipline (all surfaces)
   Section headings move from the rounded display face to the body grotesk;
   the hero keeps Outfit and remains the page's display moment.
   -------------------------------------------------------------------------- */
body.elevated .section-title,
body.elevated .capabilities-heading {
    font-family: var(--font-body);
    font-weight: 650;
    letter-spacing: -0.018em;
}

/* Numbered chips become quiet mono eyebrows: no glow, no gradient, no bar. */
body.elevated .section-number,
body.elevated .capabilities-split .section-number {
    background: none;
    border: 1px solid rgba(0, 229, 255, 0.35);
    box-shadow: none;
    backdrop-filter: none;
    padding: 8px 14px;
    border-radius: 6px;
}
body.elevated .section-number::before { display: none; }

/* Measurement line quiets down to a hairline. */
body.elevated .measurement-line {
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.45), transparent 85%);
    opacity: 1;
}
body.elevated .measurement-line::after { display: none; }

/* Chapter lead headings (former inline cyan h3s). */
body.elevated .chapter-lead {
    color: var(--color-cyan-primary);
    margin-bottom: 20px;
    font-weight: 500;
    font-family: var(--font-body);
    font-size: 1.35rem;
    letter-spacing: -0.01em;
}

body.elevated .footnote {
    text-align: center;
    margin-top: 40px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* --------------------------------------------------------------------------
   LIGHT + TINT chapters — ink on paper
   -------------------------------------------------------------------------- */
body.elevated :is(.sfc-light, .sfc-tint) { color: var(--e-slate); }

body.elevated :is(.sfc-light, .sfc-tint) :is(h2, h3, h4, .section-title, .capabilities-heading,
    .feature-title, .cap-card-title, .stat-number, .roi-value, .stats-band-value) {
    color: var(--e-ink);
    text-shadow: none;
}

body.elevated :is(.sfc-light, .sfc-tint) :is(p, li, .feature-description, .cap-card-desc,
    .capabilities-blurb, .stat-label, .roi-label, .about-text p) {
    color: var(--e-slate);
}

body.elevated :is(.sfc-light, .sfc-tint) .chapter-lead { color: var(--e-teal-deep); }
body.elevated :is(.sfc-light, .sfc-tint) .footnote { color: #7A8CA0; }

body.elevated :is(.sfc-light, .sfc-tint) .section-number {
    color: var(--e-teal-deep);
    border-color: var(--e-hairline);
    background: var(--e-paper);
}
body.elevated :is(.sfc-light, .sfc-tint) .measurement-line {
    background: var(--e-hairline);
}

/* Cards: white, hairline, soft shadow. Glow layers off. */
body.elevated :is(.sfc-light, .sfc-tint) :is(.feature-card, .cap-card, .roi-calculator, .stat-item) {
    background: var(--e-paper);
    border: 1px solid var(--e-hairline);
    border-radius: 10px;
    box-shadow: var(--e-card-shadow);
    backdrop-filter: none;
}
body.elevated :is(.sfc-light, .sfc-tint) :is(.feature-card, .cap-card)::before,
body.elevated :is(.sfc-light, .sfc-tint) :is(.feature-card, .cap-card)::after {
    display: none;
}
body.elevated :is(.sfc-light, .sfc-tint) :is(.feature-card, .cap-card, .stat-item):hover {
    transform: translateY(-4px);
    background: var(--e-paper);
    border-color: #C4D4DF;
    box-shadow: var(--e-card-shadow-hover);
}

body.elevated :is(.sfc-light, .sfc-tint) :is(.feature-icon, .cap-card-icon) {
    background: var(--e-tint);
    border: 1px solid var(--e-hairline);
    border-radius: 10px;
    box-shadow: none;
    color: var(--e-teal-deep);
}
body.elevated :is(.sfc-light, .sfc-tint) :is(.feature-icon, .cap-card-icon) svg { color: var(--e-teal-deep); }
body.elevated :is(.sfc-light, .sfc-tint) :is(.feature-card:hover .feature-icon) {
    background: var(--e-tint);
    box-shadow: none;
}

body.elevated :is(.sfc-light, .sfc-tint) :is(.feature-metric, .cap-card-link, .capabilities-link, .trust-link) {
    color: var(--e-teal-deep);
    border-color: var(--e-hairline);
}
body.elevated :is(.sfc-light, .sfc-tint) .feature-metric {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    border-top: 1px solid var(--e-hairline);
}

/* ROI list rows */
body.elevated :is(.sfc-light, .sfc-tint) .roi-item {
    background: var(--e-paper);
    border: 1px solid var(--e-hairline);
    border-radius: 8px;
    box-shadow: none;
}
body.elevated :is(.sfc-light, .sfc-tint) .roi-item:hover {
    background: var(--e-tint);
    border-color: #C4D4DF;
    box-shadow: none;
    transform: none;
}
body.elevated :is(.sfc-light, .sfc-tint) .roi-value {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    color: var(--e-teal-deep);
    text-shadow: none;
    font-family: var(--font-body);
    font-weight: 650;
    letter-spacing: -0.01em;
}
body.elevated :is(.sfc-light, .sfc-tint) .roi-label { color: #7A8CA0; }

/* The ROI wrapper was a dark glass slab; on a light chapter it becomes invisible
   and the inner calculator carries the card. */
body.elevated :is(.sfc-light, .sfc-tint) .roi-container {
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    padding: 0;
}

/* Projected-impact panel: generous internal padding, an even 3×2 tile grid
   (auto-fit left an orphaned sixth tile beside a void), left-aligned stat
   blocks with equal heights, and a footnote separated by a hairline. */
body.elevated :is(.sfc-light, .sfc-tint) .roi-calculator {
    padding: 44px 48px 32px;
    border-radius: 12px;
}
body.elevated :is(.sfc-light, .sfc-tint) .roi-calculator .chapter-lead {
    text-align: left;
    margin-bottom: 28px;
    font-size: 1.25rem;
}
body.elevated :is(.sfc-light, .sfc-tint) .roi-metrics {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 0;
}
body.elevated :is(.sfc-light, .sfc-tint) .roi-item {
    text-align: left;
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    min-height: 104px;
    background: #FBFDFE;
}
body.elevated :is(.sfc-light, .sfc-tint) .roi-item .roi-label {
    order: 0;
    margin: 0;
}
body.elevated :is(.sfc-light, .sfc-tint) .roi-item .roi-value {
    font-size: 1.5rem;
    line-height: 1.15;
    margin: 0;
}
body.elevated :is(.sfc-light, .sfc-tint) .roi-calculator .footnote {
    border-top: 1px solid var(--e-hairline);
    margin-top: 28px;
    padding-top: 16px;
    line-height: 1.7;
}
@media (max-width: 1000px) {
    body.elevated :is(.sfc-light, .sfc-tint) .roi-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    body.elevated :is(.sfc-light, .sfc-tint) .roi-metrics { grid-template-columns: 1fr; }
    body.elevated :is(.sfc-light, .sfc-tint) .roi-calculator { padding: 28px 22px 22px; }
}

/* Stat tiles inside light chapters */
body.elevated :is(.sfc-light, .sfc-tint) .stat-number {
    background: none;
    -webkit-text-fill-color: initial;
    color: var(--e-teal-deep);
    text-shadow: none;
}

/* Trust strip as a quiet tint row */
body.elevated .trust-strip {
    border: none;
    border-top: 1px solid var(--e-hairline);
    border-bottom: 1px solid var(--e-hairline);
    background: var(--e-tint);
    box-shadow: none;
}
body.elevated .trust-strip .trust-kicker {
    color: var(--e-teal-deep);
    border-color: var(--e-hairline);
    background: var(--e-paper);
}
body.elevated .trust-strip .trust-item { color: var(--e-slate); }
body.elevated .trust-strip .trust-item svg { color: var(--e-teal-deep); }
body.elevated .trust-strip .trust-item strong { color: var(--e-ink); }
body.elevated .trust-strip .trust-item small { color: var(--e-slate); }

/* --------------------------------------------------------------------------
   NAVY proof band (the former stats band)
   -------------------------------------------------------------------------- */
body.elevated .stats-band {
    background: var(--e-navy);
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin-top: 0;
}
body.elevated .stats-band-item { border-color: rgba(255, 255, 255, 0.12); }
body.elevated .stats-band-icon { color: #6FD4E8; box-shadow: none; background: rgba(255,255,255,0.06); }
body.elevated .stats-band-value { color: #FFFFFF; text-shadow: none; }
body.elevated .stats-band-label { color: #B9CCDC; }
body.elevated .stats-band-sub { color: #7E97AC; }

/* --------------------------------------------------------------------------
   Forms on tint surface
   -------------------------------------------------------------------------- */
body.elevated .sfc-tint .contact-form,
body.elevated .sfc-tint .contact-form-container {
    background: var(--e-paper);
    border: 1px solid var(--e-hairline);
    border-radius: 12px;
    box-shadow: var(--e-card-shadow);
    backdrop-filter: none;
}
/* The inner form box wrapped the fields with zero padding — its border sat
   flush against the inputs. Give the fields room on every side. */
body.elevated .sfc-tint .contact-form { padding: 36px 40px; }
@media (max-width: 640px) {
    body.elevated .sfc-tint .contact-form { padding: 20px 16px; }
    body.elevated .sfc-tint .contact-form-container { padding: 20px; }
}
body.elevated .sfc-tint .form-group label {
    color: var(--e-ink);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
body.elevated .sfc-tint :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
    background: var(--e-paper);
    border: 1px solid var(--e-hairline);
    color: var(--e-ink);
    border-radius: 8px;
    box-shadow: none;
}
body.elevated .sfc-tint :is(input, select, textarea)::placeholder { color: #93A6B8; }
body.elevated .sfc-tint :is(input, select, textarea):focus {
    border-color: var(--e-teal);
    box-shadow: 0 0 0 3px rgba(12, 147, 174, 0.15);
    outline: none;
}
body.elevated .sfc-tint select option { background: var(--e-paper); color: var(--e-ink); }
body.elevated .sfc-tint .checkbox-label,
body.elevated .sfc-tint .checkbox-label span {
    font-family: var(--font-body);
    letter-spacing: 0;
    text-transform: none;
    color: var(--e-slate);
    font-size: 0.9rem;
}
/* The .checkmark span is empty decoration in this markup — the native input is
   the real control. Kill the span (it rendered as a stray dot) and theme the
   native box instead. */
body.elevated .sfc-tint .checkmark { display: none; }
body.elevated .sfc-tint .checkbox-label {
    align-items: flex-start;
    gap: 10px;
}
body.elevated .sfc-tint .checkbox-label input[type="checkbox"] {
    width: 17px;
    height: 17px;
    flex: none;
    margin-top: 2px;
    accent-color: var(--e-teal);
}

/* "Label *" on one line, control on the next: the required-marker is a bare
   text node between label and input, so the label must flow inline and the
   control must break the line itself. */
/* Base .form-group is flex, which turns the bare " *" text node into its own
   flex row. Block flow lets "Label *" share a line. */
body.elevated .sfc-tint .form-group { display: block; }
body.elevated .sfc-tint .form-group label:not(.checkbox-label) {
    display: inline;
    margin-bottom: 0;
}
body.elevated .sfc-tint .form-group :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
    display: block;
    width: 100%;
    margin-top: 8px;
}
body.elevated .sfc-tint .form-grid { gap: 24px 26px; }
body.elevated .sfc-tint .submit-button { margin-top: 10px; }
body.elevated .sfc-tint .oauth-info {
    background: var(--e-tint);
    border: 1px solid var(--e-hairline);
    border-radius: 8px;
    box-shadow: none;
}
body.elevated .sfc-tint .oauth-info p { color: var(--e-slate); }
body.elevated .sfc-tint .oauth-badge { color: var(--e-teal-deep); }
body.elevated .sfc-tint .contact-intro h3 { color: var(--e-ink); }

/* Primary submit keeps the electric brand moment, loses the halo. */
body.elevated .submit-button { box-shadow: 0 6px 18px -8px rgba(0, 180, 220, 0.5); }

/* --------------------------------------------------------------------------
   Final CTA (dark chapter): quieter, no urgency pill
   -------------------------------------------------------------------------- */
body.elevated .final-cta .urgency-badge { display: none; }
body.elevated .cta-section { box-shadow: none; }
body.elevated .cta-section::before { opacity: 0.35; }

/* --------------------------------------------------------------------------
   Hero refinements: it keeps the page's only glow, but only one strip of
   mini-stats needs to sit under the CTAs — the band below carries the rest.
   -------------------------------------------------------------------------- */
body.elevated .hero-split { margin-bottom: 0; padding-bottom: 72px; }

/* Focus visibility on light ground */
body.elevated :is(.sfc-light, .sfc-tint) a:focus-visible,
body.elevated :is(.sfc-light, .sfc-tint) button:focus-visible {
    outline: 2px solid var(--e-teal);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    body.elevated * { transition-duration: 0.01ms !important; }
}