/**
 * Launch — Shared typography & utilities
 *
 * Typography (.ssla-h1, .ssla-h2, .ssla-h2-large, .ssla-lede), buttons
 * (.ssla-btn, .ssla-btn-primary, .ssla-btn-secondary, .ssla-btn-white,
 * .ssla-btn-ghost), stats treatment (.ssla-stat, .ssla-stat-value,
 * .ssla-stat-label, .ssla-stats-row), inline link (.ssla-text-link),
 * accessibility utility (.ssla-hidden), brand emphasis (.ssla-emph-brand).
 *
 * Token defaults (--shell-*) and shared section frame rules.
 *
 * Tokens fall back to sensible defaults via `var(--shell-X, default)` so
 * sections render before the painting class wires preset palette into
 * shell tokens.
 *
 * @since 3.5.70 (originally _rsd-shared.css; renamed and namespace-
 *               retired in v3.7.08 / Pass 4 Band 4b agnostic-keys
 *               retirement)
 */
:root{
    /* §6.1 Surface tokens */
    --shell-surface-cream:  #F5F0E8;
    --shell-surface-warm:   #FAF6EE;
    --shell-surface-light:  #FFFFFF;
    --shell-surface-dark:   #1F2A37;
    --shell-surface-darker: #182230;
    --shell-surface-brand:  #8B1A1A;

    /* §6.2 Text tokens */
    --shell-text-dark:           #2D2A26;
    --shell-text-body:           #4A453F;
    --shell-text-muted:          #8A847C;
    --shell-text-on-dark:        #F5F0E8;
    --shell-text-on-dark-muted:  rgba(245, 240, 232, 0.75);

    /* §6.3 Accent tokens */
    --shell-accent:        #C89B3F;
    --shell-accent-hover:  #A88128;
    --shell-accent-soft:   rgba(200, 155, 63, 0.10);
    --shell-accent-strong: #8B1A1A;

    /* §6.4 Border / divider tokens */
    --shell-hairline:          rgba(45, 42, 38, 0.10);
    --shell-hairline-strong:   rgba(45, 42, 38, 0.18);
    --shell-hairline-on-dark:  rgba(245, 240, 232, 0.10);

    /* §6.5 Shadow tokens */
    --shell-shadow-lift-1:   0 1px 3px rgba(45, 42, 38, 0.04);
    --shell-shadow-lift-2:   0 8px 32px rgba(45, 42, 38, 0.10);
    --shell-shadow-lift-3:   0 32px 64px rgba(45, 42, 38, 0.04);
    --shell-shadow-card:     0 1px 2px rgba(45, 42, 38, 0.04);
    --shell-shadow-featured: 0 8px 24px rgba(200, 155, 63, 0.15);

    /* §6.6 Spacing / rhythm */
    --shell-section-padding-y-compact:  64px;
    --shell-section-padding-y-standard: 96px;
    --shell-section-padding-y-generous: 140px;
    --shell-content-max-width:          1200px;
    --shell-text-max-width:             760px;
    --shell-grid-gap-standard:          24px;

    /* §6.7 Typography */
    /* v3.12.27 (#23 — cross-product walk follow-up) — Body and heading
     * font tokens redefined as aliases that consume --shell-hf (the
     * SimpleSuite design-token contract emitted by SIM v1.22.01+).
     *
     * Pre-v3.12.27 these were hardcoded literals (Inter for body,
     * Source Serif 4 for heading) at :root. The literals competed
     * with --shell-hf in the cascade — both at :root, same
     * specificity, only enqueue order separated them. Glenn 2026-
     * 05-22 walk: "Picker object selects however the live sections
     * of this version do not surface updated fonts." Sections still
     * referencing --shell-font-family-body / --shell-font-family-
     * heading kept getting the literal Inter/Source Serif instead of
     * the Hub-set choice that SIM emits.
     *
     * Now: aliases. They resolve through --shell-hf, which SIM emits
     * with the Hub-chosen font_family stack. Hub picks one stack for
     * the whole site (heading + body share); if a future schema
     * distinguishes them, the var fallback chain can expand.
     *
     * Literal fallback retained so SSLA sections continue to render
     * something readable on sites without SimpleSuite Hub installed.
     */
    --shell-font-family-body:    var(--shell-hf, 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
    --shell-font-family-heading: var(--shell-hf, 'Source Serif 4', Georgia, 'Times New Roman', serif);
    --shell-h1-size:             clamp(56px, 7vw, 96px);
    --shell-h1-letter-spacing:   -2px;
    --shell-h2-size:             clamp(36px, 4vw, 56px);
    --shell-h2-size-large:       clamp(44px, 5vw, 72px);
    --shell-h2-letter-spacing:   -1px;
    --shell-h3-size:             clamp(20px, 2vw, 24px);
    --shell-h4-size:             clamp(18px, 1.5vw, 22px);
    --shell-h4-letter-spacing:   -0.3px;
    --shell-eyebrow-size:        13px;
    --shell-eyebrow-letter-spacing: 0.18em;

    /* Wave 5 additions */
    --shell-quote-glyph-size:        clamp(56px, 8vw, 96px);
    --shell-card-padding:            32px;
    --shell-logo-monochrome-light:   rgba(45, 42, 38, 0.45);
    --shell-logo-monochrome-dark:    rgba(245, 240, 232, 0.55);
    --shell-logo-height-compact:     32px;
    --shell-logo-height-standard:    40px;
    --shell-logo-height-generous:    56px;
    --shell-logo-gap:                64px;
    --shell-metric-value-size:           clamp(48px, 7vw, 96px);
    --shell-metric-value-letter-spacing: -3px;
    --shell-metric-label-size:           14px;

    /* Wave 6 additions */
    --shell-pricing-tier-price-size:           clamp(40px, 5vw, 56px);
    --shell-pricing-tier-price-letter-spacing: -1.5px;
    --shell-table-row-padding:                 16px;
    --shell-table-category-bg:                 rgba(45, 42, 38, 0.03);
}

/* ============================================
 * Shared section frame
 * ============================================ */

[data-ssla-type]{
    box-sizing: border-box;
    font-family: var(--shell-font-family-body);
    color: var(--shell-text-body);
    line-height: 1.6;
}

[data-ssla-type] *,
[data-ssla-type] *::before,
[data-ssla-type] *::after{
    box-sizing: border-box;
}

[data-ssla-type] a{
    text-decoration: none;
}

/* §6.8 Gold period treatment — signature */
[data-ssla-type] h1 .period,
[data-ssla-type] h2 .period,
[data-ssla-type] h3 .period{
    color: var(--shell-accent-strong);
}

/* Brand-red emphasis word inside headings */
[data-ssla-type] .ssla-emph-brand{
    color: var(--shell-accent-strong);
    font-style: normal;
}

/* ============================================
 * Shared typography
 * ============================================ */

.ssla-eyebrow.is-plain{
    display: inline-block;
    font-family: var(--shell-font-family-body);
    font-size: var(--shell-eyebrow-size);
    font-weight: 600;
    letter-spacing: var(--shell-eyebrow-letter-spacing);
    text-transform: uppercase;
    color: var(--shell-accent);
    line-height: 1.2;
}

.ssla-h1{
    font-family: var(--shell-font-family-heading);
    font-size: var(--shell-h1-size);
    line-height: 1.0;
    letter-spacing: var(--shell-h1-letter-spacing);
    font-weight: 700;
    color: var(--shell-text-dark);
    margin: 0;
}

.ssla-h2{
    font-family: var(--shell-font-family-heading);
    font-size: var(--shell-h2-size);
    line-height: 1.1;
    letter-spacing: var(--shell-h2-letter-spacing);
    font-weight: 700;
    color: var(--shell-text-dark);
    margin: 0;
}

.ssla-h2-large{
    font-family: var(--shell-font-family-heading);
    font-size: var(--shell-h2-size-large);
    line-height: 1.05;
    letter-spacing: var(--shell-h2-letter-spacing);
    font-weight: 700;
    color: var(--shell-text-dark);
    margin: 0;
}

.ssla-lede{
    font-size: 17px;
    line-height: 1.55;
    color: var(--shell-text-body);
}

.ssla-lede p{
    margin: 0 0 16px;
}

.ssla-lede p:last-child{
    margin-bottom: 0;
}

/* Dark-tone overrides */
[data-ssla-variant-tone="dark"] .ssla-h1,
[data-ssla-variant-tone="dark"] .ssla-h2,
[data-ssla-variant-tone="dark"] .ssla-h2-large{
    color: var(--shell-text-on-dark);
}

[data-ssla-variant-tone="dark"] .ssla-lede{
    color: var(--shell-text-on-dark-muted);
}

[data-ssla-variant-tone="dark"] .ssla-emph-brand{
    color: var(--shell-accent);
}

/* ============================================
 * Shared buttons
 * ============================================ */

.ssla-btn{
    display: inline-block;
    padding: 14px 28px;
    font-family: var(--shell-font-family-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

/* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk).
 * Unified hover treatment now ships from 0-shared.css (lift only,
 * no paint shift). Original rule preserved here for reference.
 * Original:
 * .ssla-btn:hover{
 *     transform: translateY(-1px);
 * }
 */
.ssla-btn:hover{

    transform: translateY(-1px);
}

.ssla-btn-primary{
    background: var(--shell-accent-strong);
    color: #FFFFFF;
}

/* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk).
 * Unified hover treatment now ships from 0-shared.css (lift only,
 * no paint shift). Original rule preserved here for reference.
 * Original:
 * .ssla-btn-primary:hover{
 *     background: #5C0F0F;
 * }
 */
.ssla-btn-primary:hover{/* paint retired; global rule provides lift */}

.ssla-btn-secondary{
    background: transparent;
    color: var(--shell-text-dark);
    border: 2px solid var(--shell-text-dark);
    margin-left: 8px;
}

/* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk).
 * Unified hover treatment now ships from 0-shared.css (lift only,
 * no paint shift). Original rule preserved here for reference.
 * Original:
 * .ssla-btn-secondary:hover{
 *     background: var(--shell-text-dark);
 *     color: #FFFFFF;
 * }
 */
.ssla-btn-secondary:hover{/* paint retired; global rule provides lift */}

.ssla-btn-white{
    background: #FFFFFF;
    color: var(--shell-text-dark);
}

/* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk).
 * Unified hover treatment now ships from 0-shared.css (lift only,
 * no paint shift). Original rule preserved here for reference.
 * Original:
 * .ssla-btn-white:hover{
 *     background: var(--shell-accent-strong);
 *     color: #FFFFFF;
 * }
 */
.ssla-btn-white:hover{/* paint retired; global rule provides lift */}

.ssla-btn-ghost{
    background: transparent;
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    margin-left: 8px;
}

/* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk).
 * Unified hover treatment now ships from 0-shared.css (lift only,
 * no paint shift). Original rule preserved here for reference.
 * Original:
 * .ssla-btn-ghost:hover{
 *     background: #FFFFFF;
 *     color: var(--shell-text-dark);
 * }
 */
.ssla-btn-ghost:hover{/* paint retired; global rule provides lift */}

/* Dark-tone button context overrides */
[data-ssla-variant-tone="dark"] .ssla-btn-secondary{
    color: #FFFFFF;
    border-color: #FFFFFF;
}

/* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk).
 * Unified hover treatment now ships from 0-shared.css (lift only,
 * no paint shift). Original rule preserved here for reference.
 * Original:
 * [data-ssla-variant-tone="dark"] .ssla-btn-secondary:hover{
 *     background: #FFFFFF;
 *     color: var(--shell-text-dark);
 * }
 */
[data-ssla-variant-tone="dark"] .ssla-btn-secondary:hover{/* paint retired; global rule provides lift */}

/* ============================================
 * Shared stats-row treatment (used by hero-fullbleed,
 * hero-split-2, feature-split-2)
 * ============================================ */

.ssla-stats-row{
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--shell-hairline);
}

[data-ssla-variant-tone="dark"] .ssla-stats-row{
    border-top-color: var(--shell-hairline-on-dark);
}

[data-ssla-variant-stats-row="on"] .ssla-stats-row{
    display: grid;
}

.ssla-stat{
    padding: 0 16px;
    border-right: 1px solid var(--shell-hairline);
}

.ssla-stat:last-child{
    border-right: 0;
}

[data-ssla-variant-tone="dark"] .ssla-stat{
    border-right-color: var(--shell-hairline-on-dark);
}

.ssla-stat-value{
    font-family: var(--shell-font-family-heading);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--shell-text-dark);
    line-height: 1.1;
}

[data-ssla-variant-tone="dark"] .ssla-stat-value{
    color: var(--shell-accent);
}

.ssla-stat-label{
    font-size: 13px;
    color: var(--shell-text-muted);
    margin-top: 6px;
    line-height: 1.3;
}

[data-ssla-variant-tone="dark"] .ssla-stat-label{
    color: var(--shell-text-on-dark-muted);
}

.ssla-hidden{
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
 * Mobile defaults
 * ============================================ */

@media (max-width: 767px) {
    .ssla-stats-row{
        grid-template-columns: 1fr;
    }

    .ssla-stat{
        border-right: 0;
        border-bottom: 1px solid var(--shell-hairline);
        padding: 16px 0;
    }

    .ssla-btn-secondary,
.ssla-btn-ghost{
        margin-left: 0;
        margin-top: 8px;
    }
}

/* ─── v3.5.85 — Empty heading collapse ───────────────────────────────────────
   Pre-v3.5.85: when an authored heading was empty (rich-text field with no
   content), the rendered <h1>/<h2>/<h3> still allocated vertical space equal
   to its line-height × font-size, producing a giant white gap between the
   eyebrow and whatever followed. Real-world example: RSD home hero authored
   eyebrow + cta_1 + cta_2 but no heading; result was eyebrow → 200px void →
   image. This collapses empty headings cleanly.

   Targets the heading's :empty state OR a state where it contains only
   whitespace + br tags (rich-text "empty" produces <br> or <p></p> from
   most editors). The :has() check is broadly supported in modern browsers.
   ──────────────────────────────────────────────────────────────────────── */

.ssla-h1:empty,
.ssla-h2:empty,
.ssla-h2-large:empty{
    display: none;
}

/* Catch rich-text "empty" that isn't strictly :empty — e.g. <h1><br></h1>
   or <h1><p></p></h1>. Browsers that support :has() collapse these too. */
.ssla-h1:has(> br:only-child:empty:first-child),
.ssla-h2:has(> br:only-child:empty:first-child),
.ssla-h2-large:has(> br:only-child:empty:first-child){
    display: none;
}

/* Same treatment for descriptions / lede / body when empty */
.ssla-lede:empty{
    display: none;
}

/* ─── v3.5.85 — Empty image collapse ─────────────────────────────────────────
   Images with empty src render as broken-image glyphs in most browsers.
   Block_Bridge::substitute_tokens trims whitespace-only image values to
   empty string in v3.5.85; this CSS hides the resulting <img src="">
   elements so they don't take up layout space.

   Applies to images authored with data-ssla-field-type="image" — the
   selector is specific enough to not catch legitimate <img> elements
   that happen to have empty src during loading.
   ──────────────────────────────────────────────────────────────────────── */

img[data-ssla-field-type="image"][src=""],
img[data-ssla-field-type="image"]:not([src]){
    display: none;
}

/* For showcase-large specifically: when the image is empty, the placeholder
   slot still needs to be visible to the AUTHOR in overlay edit mode (so they
   can click to add an image). The overlay editor JS already handles
   empty-state affordances via the v3.5.83 image pill. On the FE (no overlay
   class), images are simply hidden as above. */
body.ssla-ov-active img[data-ssla-field-type="image"][src=""],
body.ssla-ov-active img[data-ssla-field-type="image"]:not([src]){
    display: block;
    min-height: 240px;
    background:
        repeating-linear-gradient(
            45deg,
            rgba(45,42,38,0.04),
            rgba(45,42,38,0.04) 8px,
            rgba(45,42,38,0.07) 8px,
            rgba(45,42,38,0.07) 16px
        );
    border: 1px dashed var(--shell-hairline-strong, rgba(45,42,38,0.20));
}

/* ─── v3.7.06 / Pass 4 Band 4a — manifest selector resolution ──────────
   .ssla-text-link is a shared inline-link treatment used as the
   secondary-CTA pattern across feature-split-2 and pricing-simple.
   Templates emit it; manifests declare it; no rule existed until now. */

.ssla-text-link{
    display: inline-block;
    color: var(--shell-accent);
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.ssla-text-link:hover{
    color: var(--shell-accent-strong);
}

[data-ssla-variant-tone="dark"] .ssla-text-link{
    color: var(--shell-accent);
}

[data-ssla-variant-tone="dark"] .ssla-text-link:hover{
    color: var(--shell-accent-hover);
}