/* ============================================================
   Clean Incentive — Brand Layer  (v1.0 — grounded in real logos)
   Forked from Source. Light, enterprise-credible shell with
   dark green-gradient "brand moment" bands (hero / footer).

   COLOR SYSTEM (locked, Rose + Isabella signed off):
   - CI green  = the SHARED CTA / action color across ALL zones.
   - SSS charcoal + Granular navy = STRUCTURAL / section accents
     only (bands, rules, eyebrows, zone lockups) — never button fills.
   Green = "go / clean" everywhere; buttons stay consistent.

   Colors sampled from the REAL logo files (not the old guesses).
   Loaded last, so it overrides Source defaults.
   ============================================================ */

/* ---- 1. Brand tokens ---------------------------------------- */
:root {
    /* Parent brand — Clean Incentive (green looped-ribbon mark) */
    --ci-green: #71db77;            /* brand green (bright) */
    --ci-green-deep: #4fb856;       /* AA-safe green for text/links on white */
    --ci-green-teal: #1bc99c;       /* gradient start */
    --ci-green-mid: #3fc841;        /* gradient mid */
    --ci-green-contrast: #06340a;   /* ink for text ON green buttons */

    /* Dark brand-moment band background (green-tinted ink, not pure black) */
    --ci-ink: #0c1f14;
    --ci-ink-2: #0a1a11;

    /* Product STRUCTURAL accents (sampled from real marks) */
    --sss-charcoal: #393536;        /* SSS Resource Registry — sphere of hexagons */
    --sss-charcoal-soft: #5a5457;
    --granular-navy: #1e3a5f;       /* Granular Registry — sphere of dots */
    --granular-navy-soft: #34567f;

    /* Light shell surfaces */
    --ci-surface: #ffffff;
    --ci-surface-alt: #f6f8f6;
    --ci-text: #14201a;
    --ci-text-muted: #4a544e;
    --ci-border: rgb(20 32 26 / 0.10);

    /* Fonts (bundled: Space Grotesk headings, Inter body) */
    --font-brand: "Space Grotesk", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Section accent — defaults to CI green, per-zone overrides below.
       NOTE: this drives STRUCTURE (eyebrows, rules), NOT button color. */
    --section-accent: var(--ci-green-deep);

    /* Ghost admin accent — hard-anchor green so cards/links read green */
    --ghost-accent-color: var(--ci-green-deep);
}

/* ---- 2. Typography ------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.is-title, .gh-article-title, .gh-card-title,
.gh-navigation .gh-navigation-brand,
.ci-hero h1, .ci-band h2, .ci-cta-final h2,
.ci-product-card h3, .ci-solution h3 {
    font-family: var(--font-brand);
    letter-spacing: -0.01em;
}
body { color: var(--ci-text); background-color: var(--ci-surface); font-family: var(--font-body); }

/* ---- 3. Light shell + nav ----------------------------------- */
.gh-navigation:not(.has-accent-color) {
    background: var(--ci-surface);
    border-bottom: 1px solid var(--ci-border);
}
.gh-navigation .gh-navigation-menu a:hover { color: var(--ci-green-deep); }

a { color: var(--ci-green-deep); }
a:hover { color: var(--ci-green-teal); }

/* ---- 4. Buttons — GREEN is the shared action color everywhere -- */
.ci-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-brand); font-weight: 600; font-size: 1.6rem;
    padding: 14px 28px; border-radius: 8px; text-decoration: none;
    transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid transparent;
}
.ci-btn:hover { transform: translateY(-1px); }
.ci-btn-primary { background: var(--ci-green); color: var(--ci-green-contrast); }
.ci-btn-primary:hover {
    background: var(--ci-green-deep); color: #fff;
    box-shadow: 0 8px 24px rgba(113,219,119,0.35);
}
/* Ghost button used on light sections */
.ci-btn-ghost { background: transparent; color: var(--ci-green-deep); border-color: var(--ci-green-deep); }
.ci-btn-ghost:hover { background: var(--ci-green-deep); color: #fff; }
/* Ghost button used inside a DARK band (hero/footer/final CTA) */
.ci-band-dark .ci-btn-ghost, .ci-cta-final .ci-btn-ghost { color: #fff; border-color: rgb(255 255 255 / 0.4); }
.ci-band-dark .ci-btn-ghost:hover, .ci-cta-final .ci-btn-ghost:hover { background: #fff; color: var(--ci-ink); }
.ci-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- 5. Hero (dark green-gradient brand moment) ------------- */
.ci-hero {
    background: var(--ci-ink); color: #fff;
    padding: clamp(64px, 8vw, 132px) 24px;
    text-align: center; position: relative; overflow: hidden;
}
.ci-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(60% 80% at 78% 18%, rgba(113,219,119,0.30), transparent 60%),
        radial-gradient(52% 70% at 12% 92%, rgba(27,201,156,0.24), transparent 60%);
}
.ci-hero > * { position: relative; z-index: 1; max-width: 860px; margin-left: auto; margin-right: auto; }
.ci-hero h1 { font-size: clamp(3.4rem, 6vw, 6rem); line-height: 1.06; font-weight: 700; margin: 0 0 22px; color: #fff; }
.ci-hero .ci-lede { font-size: clamp(1.7rem, 2.2vw, 2.1rem); line-height: 1.5; color: rgb(255 255 255 / 0.78); max-width: 700px; margin: 0 auto 32px; }
.ci-hero .ci-cta-row { justify-content: center; }
.ci-eyebrow {
    display: inline-block; font-family: var(--font-brand); font-size: 1.25rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--ci-green); margin-bottom: 16px;
}

/* ---- 6. Light content bands --------------------------------- */
.ci-band { padding: clamp(56px, 7vw, 100px) 24px; max-width: 1160px; margin: 0 auto; }
.ci-band h2 { font-size: clamp(2.6rem, 4vw, 3.8rem); line-height: 1.14; font-weight: 700; margin: 0 0 14px; }
.ci-section-lede { font-size: 1.8rem; color: var(--ci-text-muted); line-height: 1.6; max-width: 760px; }
.ci-note { font-size: 1.45rem; color: var(--ci-text-muted); margin-top: 18px; }
.ci-list { font-size: 1.65rem; line-height: 1.6; padding-left: 0; list-style: none; }
.ci-list li { position: relative; padding-left: 26px; margin-bottom: 14px; }
.ci-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--ci-green-deep); }
.ci-steps, .ci-ladder { font-size: 1.65rem; line-height: 1.6; }
.ci-steps li, .ci-ladder li { margin-bottom: 14px; }
.ci-steps li strong, .ci-ladder li strong { color: var(--ci-text); }

/* ---- 7. Product row (home) ---------------------------------- */
.ci-product-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
@media (max-width: 900px) { .ci-product-row { grid-template-columns: 1fr; } }
.ci-product-card {
    background: var(--ci-surface); border: 1px solid var(--ci-border); border-radius: 16px;
    padding: 32px 28px; overflow: hidden; position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ci-product-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--card-accent, var(--ci-green)); }
.ci-product-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(20,32,26,0.10); }
.ci-product-card h3 { font-size: 2.4rem; margin: 4px 0 12px; }
.ci-product-card p { font-size: 1.55rem; color: var(--ci-text-muted); line-height: 1.6; }
.ci-product-card .ci-eyebrow { font-size: 1.1rem; }
/* zone structural accents on the card top-rule */
.ci-zone-sss.ci-product-card::before { background: var(--sss-charcoal); }
.ci-zone-granular.ci-product-card::before { background: var(--granular-navy); }
.ci-zone-advisory.ci-product-card::before { background: var(--ci-green-deep); }

/* ---- 8. Solutions cards ------------------------------------- */
.ci-solution { padding: 28px 0; border-top: 1px solid var(--ci-border); }
.ci-solution h3 { font-size: 2.2rem; margin: 0 0 10px; }
.ci-solution p { font-size: 1.6rem; color: var(--ci-text-muted); line-height: 1.6; }

/* ---- 9. Final CTA (dark green-gradient moment) -------------- */
.ci-cta-final {
    background: var(--ci-ink); color: #fff; text-align: center;
    padding: clamp(56px, 7vw, 104px) 24px; position: relative; overflow: hidden;
}
.ci-cta-final::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(60% 90% at 50% 0%, rgba(63,200,65,0.26), transparent 62%);
}
.ci-cta-final > * { position: relative; z-index: 1; }
.ci-cta-final h2 { color: #fff; font-size: clamp(2.6rem, 4vw, 4rem); margin: 0 0 14px; }
.ci-cta-final p { color: rgb(255 255 255 / 0.76); font-size: 1.8rem; max-width: 620px; margin: 0 auto 28px; }
.ci-cta-final .ci-cta-row { justify-content: center; }

/* ---- 10. Zone STRUCTURAL accents (eyebrows/rules, NOT buttons) */
.ci-zone-sss .ci-eyebrow { color: var(--sss-charcoal); }
.ci-zone-granular .ci-eyebrow { color: var(--granular-navy); }
.ci-zone-advisory .ci-eyebrow { color: var(--ci-green-deep); }
/* zone heroes: keep the dark brand-moment bg; tint the gradient glow toward the zone */
.ci-hero.ci-zone-sss::before { background: radial-gradient(60% 80% at 78% 18%, rgba(113,219,119,0.26), transparent 60%), radial-gradient(46% 64% at 14% 90%, rgba(57,53,54,0.5), transparent 62%); }
.ci-hero.ci-zone-granular::before { background: radial-gradient(60% 80% at 78% 18%, rgba(113,219,119,0.26), transparent 60%), radial-gradient(48% 66% at 14% 90%, rgba(30,58,95,0.55), transparent 62%); }
.ci-hero.ci-zone-sss .ci-eyebrow,
.ci-hero.ci-zone-granular .ci-eyebrow,
.ci-hero.ci-zone-advisory .ci-eyebrow { color: var(--ci-green); }

/* ---- 11. Quote / proof ------------------------------------- */
.ci-quote { border-left: 3px solid var(--ci-green-deep); padding: 8px 0 8px 22px; margin: 24px 0 0; font-size: 1.9rem; line-height: 1.5; color: var(--ci-text); font-style: italic; }
.ci-band-proof .ci-section-lede { max-width: 820px; }

/* ---- 12. Footer as a dark brand moment ---------------------- */
.gh-footer { background: var(--ci-ink); color: rgb(255 255 255 / 0.8); }
.gh-footer a { color: rgb(255 255 255 / 0.8); }
.gh-footer a:hover { color: var(--ci-green); }

/* ---- 13. Reading surfaces stay light + legible -------------- */
.gh-article-title { letter-spacing: -0.015em; }
.gh-content.is-body { font-size: 1.8rem; line-height: 1.7; }

/* ---- 14. Hard overrides for managed Ghost defaults (settings API blocked) -- */
:root {
    --ghost-accent-color: #4fb856 !important;
}

.gh-button,
.gh-navigation .gh-button,
button.gh-button,
a.gh-button {
    background: var(--ci-green) !important;
    color: var(--ci-green-contrast) !important;
    border-color: transparent !important;
}
.gh-button:hover,
a.gh-button:hover {
    background: var(--ci-green-deep) !important;
    color: #fff !important;
}

.ci-logo-img {
    display: block;
    height: 36px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}
.ci-logo-img-footer {
    height: 32px;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}
.gh-navigation-logo img,
.gh-footer-logo img {
    height: 36px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
}
.gh-footer-logo img { height: 32px; filter: brightness(0) invert(1); }

.gh-navigation.ci-nav {
    background: #fff;
    border-bottom: 1px solid var(--ci-border);
    position: sticky;
    top: 0;
    z-index: 90;
}
.gh-navigation.ci-nav .gh-navigation-inner {
    min-height: 72px;
    align-items: center;
}
.gh-navigation.ci-nav .nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}
.gh-navigation.ci-nav .nav a {
    color: var(--ci-text);
    font-family: var(--font-brand);
    font-weight: 500;
    font-size: 1.45rem;
    text-decoration: none;
    letter-spacing: -0.01em;
}
.gh-navigation.ci-nav .nav a:hover { color: var(--ci-green-deep); }
.ci-nav-cta {
    padding: 10px 18px !important;
    font-size: 1.4rem !important;
    white-space: nowrap;
}
@media (max-width: 920px) {
    .ci-nav-cta { display: none; }
}

.ci-footer .gh-footer-bar {
    align-items: center;
    gap: 24px;
}
.ci-footer .gh-footer-menu .nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ci-footer .gh-footer-menu a {
    color: rgb(255 255 255 / 0.82);
    font-size: 1.4rem;
    text-decoration: none;
}
.ci-footer .gh-footer-menu a:hover { color: var(--ci-green); }
.ci-footer .gh-footer-copyright {
    color: rgb(255 255 255 / 0.55);
    font-size: 1.3rem;
}

body.home-template .gh-navigation-members,
body.page-template .gh-navigation-members { display: none; }

.ci-landing .gh-content,
.ci-landing {
    max-width: none;
    padding: 0;
}
.ci-landing .gh-content > * {
    margin-left: auto;
    margin-right: auto;
}

.gh-content .ci-hero,
.gh-content .ci-band,
.gh-content .ci-cta-final {
    max-width: none;
}
.gh-content .ci-hero { margin: 0 calc(50% - 50vw); width: 100vw; }
.gh-content .ci-cta-final { margin: 0 calc(50% - 50vw); width: 100vw; }
.gh-content .ci-band { max-width: 1160px; }

body.page-template .gh-article-header { display: none; }

.ci-insights-header {
    padding: clamp(48px, 6vw, 88px) 24px 24px;
    max-width: 1160px;
    margin: 0 auto;
}
.ci-insights-header h1 {
    font-family: var(--font-brand);
    font-size: clamp(3rem, 5vw, 4.4rem);
    margin: 0 0 12px;
}
.ci-insights-header p {
    font-size: 1.8rem;
    color: var(--ci-text-muted);
    max-width: 640px;
}

.ci-contact-card {
    background: var(--ci-surface-alt);
    border: 1px solid var(--ci-border);
    border-radius: 16px;
    padding: 28px;
    margin-top: 28px;
}

/* Product lockups on home cards */
.ci-product-mark {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
    margin: 0 0 14px;
}
.ci-zone-sss .ci-product-mark { filter: none; }
.ci-zone-granular .ci-product-mark { filter: none; }

/* Hide members subscribe CTA remnants if theme partials reintroduce */
.gh-navigation-members { display: none !important; }

/* Ensure hero buttons readable */
.ci-hero .ci-btn-primary { box-shadow: 0 10px 30px rgba(113,219,119,0.25); }

/* Slightly richer band alternating */
.ci-band-ladder, .ci-band-proof { background: transparent; }
.ci-home .ci-band:nth-of-type(even) {
    background: var(--ci-surface-alt);
    max-width: none;
    width: 100%;
    padding-left: max(24px, calc((100% - 1160px) / 2));
    padding-right: max(24px, calc((100% - 1160px) / 2));
}
.ci-home .ci-band:nth-of-type(even) > * { max-width: 1160px; margin-left: auto; margin-right: auto; }