/* === contact-split === */
.cs-hero{width:100%;text-align:center}
.cs-hero-inner{max-width:700px;margin:0 auto;padding:120px 48px 80px}
.cs-hero-eyebrow{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--shell-accent,currentColor);margin:0 0 16px}
.cs-hero h1{font-size:42px;font-weight:800;color:#fff;letter-spacing:-1.5px;margin:0 0 20px}
.cs-hero-body{font-size:16px;color:rgba(255,255,255,.6);line-height:1.7}
.cs-hero-body p{margin:0}

/* ─── v3.12.15 — Hero paint contract (closes Glenn 2026-05-21 finding #1).
 *
 * Pre-v3.12.15 the hero paint was a one-shot inline style="background:{{hero_bg}}"
 * with no overlay editor surface and white-only text. The cog modal's
 * Colors tab now exposes hero_bg as a paint zone; the picker writes
 * --ssla-hero-bg on the section root via live preview.
 *
 * Three-tier paint resolution:
 *   1. --ssla-hero-bg set by picker → wins (admin override, live)
 *   2. --shell-bg-dark-cool → preset dark surface
 *   3. #1F2937 literal → fallback for unpainted state
 *
 * The .cs-hero element carries `style="--ssla-hero-bg:{{hero_bg}}"`
 * at server-render time (the registry default `#1F2937` is the
 * initial value). The picker's setProperty overwrites the inline var
 * on each input event; section CSS reads the var with fallback chain.
 */
.cs-hero {
    background: var(--ssla-hero-bg, var(--shell-bg-dark-cool, #1F2937));
}

/* ─── v3.12.15 — Tone-aware hero text.
 *
 * When admin picks a light hero_bg, white text becomes unreadable.
 * Overlay JS writes data-ssla-hero-tone="light|dark" on .cs-hero
 * based on the picked color's luminance (computed on commit). Section
 * CSS branches text colors on the attribute so light hero gets dark
 * text and vice versa.
 *
 * Default (no attr) = dark hero / white text — preserves pre-v3.12.15
 * visual contract for sites that don't open the cog modal.
 */
.cs-hero[data-ssla-hero-tone="light"] h1 {
    color: var(--shell-h, #1a1a1a);
}
.cs-hero[data-ssla-hero-tone="light"] .cs-hero-body {
    color: var(--shell-m, rgba(0,0,0,0.6));
}
.cs-hero[data-ssla-hero-tone="light"] .cs-hero-eyebrow {
    color: var(--shell-accent, currentColor);
}

.cs-content{width:100%}
.cs-content-inner{max-width:1000px;margin:0 auto;padding:80px 48px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.cs-eyebrow{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--shell-m,#6b7280);margin:0 0 12px}
.cs-content h2{font-size:32px;font-weight:800;color:var(--shell-h,currentColor);letter-spacing:-1px;margin:0 0 16px}
.cs-body{font-size:15px;color:var(--shell-t,#1a1a1a);line-height:1.7;margin:0 0 32px}
.cs-body p{margin:0}
.cs-reasons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.cs-reason{border:1px solid var(--shell-line,rgba(0,0,0,0.1));padding:20px 16px}
.cs-reason h4{font-size:14px;font-weight:700;color:var(--shell-h,currentColor);margin:0 0 6px}
.cs-reason p{font-size:12px;color:var(--shell-m,#6b7280);margin:0;line-height:1.5}
.cs-email{font-size:14px;color:var(--shell-accent,currentColor);font-weight:600;text-decoration:none;display:inline-block}
.cs-email:hover{text-decoration:underline}
.cs-email:empty{display:none}
@media(max-width:768px){.cs-content-inner{grid-template-columns:1fr}.cs-reasons{grid-template-columns:1fr}}

/* ─── v3.7.06 / Pass 4 Band 4a — manifest selector resolution ──────────
   The .cs-left and .cs-right divs are placed by the parent grid
   (.cs-content-inner: grid-template-columns: 1fr 1fr). These rules give
   each side a defined CSS presence so manifest selectors resolve to a
   real CSS rule. .cs-right hosts the form_picker field. */

.cs-left {
    min-width: 0;
}

.cs-right {
    min-width: 0;
}

/* ─── v3.12.13 — Symmetric paint (D-1/A) + empty-zone placeholder (S-4) ─
   When the form_picker has no value, .cs-right renders empty. Pre-v3.12.13
   that meant a zero-height column with no click target — the parent
   bg_color bled through and the picker was effectively unreachable.

   Two coordinated fixes here:

   (1) min-height on .cs-right so the column has presence even when empty.
       Matches the visual rhythm of the left column on the typical
       intro+form pairing. 200px chosen empirically — enough to anchor
       the column without being so tall it dwarfs short left content.

   (2) Edit-mode-only placeholder when the zone is empty. CSS-only via
       :empty + body.ssla-ov-editing scope. No JS, no FE pollution —
       the placeholder is purely an editor affordance and disappears
       the moment a form is chosen OR the user views the page outside
       edit mode. Pseudo-element content is selectable and acts as
       click target for the form_picker popover. */

.cs-right {
    min-height: 200px;
}

body.ssla-ov-editing .cs-right:empty {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--shell-line, rgba(0,0,0,0.15));
    background: var(--shell-bg-warm, rgba(0,0,0,0.02));
}

body.ssla-ov-editing .cs-right:empty::before {
    content: "Click to choose form";
    font-size: 13px;
    font-weight: 500;
    color: var(--shell-m, #6b7280);
    letter-spacing: 0.5px;
    pointer-events: none;
}