/* ==========================================================================
   GrowLeafy Design System v3 · Crisp / Premium / Readable
   White + charcoal + strong GrowLeafy green + controlled accents.
   No green-tinted backgrounds. WCAG-contrast throughout.
   ========================================================================== */

/* ---- Type: one consistent family (Inter), sharp fintech hierarchy ------ */
:root {
    --gl-font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --gl-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* greens — identity + primary action only */
    --gl-green-50:  #f2f7f4;
    --gl-green-100: #dcefe5;
    --gl-green-200: #b5dfc9;
    --gl-green-500: #12a374;
    --gl-green-600: #0f8d64;
    --gl-green-700: #0c7351;
    --gl-green-900: #0a4026;

    /* neutral architecture — warm white, pure surfaces, charcoal ink */
    --gl-ink-strong: #111213;
    --gl-ink: #1c1d1f;
    --gl-ink-soft: #55575b;
    --gl-bg: #fafaf8;
    --gl-surface: #ffffff;
    --gl-line: rgba(17, 18, 19, .09);
    --gl-line-strong: rgba(17, 18, 19, .16);

    /* semantics */
    --gl-success: #0f8d64;
    --gl-warning: #b45309;
    --gl-error: #b42318;
    --gl-info: #1d4ed8;
    --gl-accent: #f5c400; /* yellow = highlight only */

    --gl-r-sm: 10px; --gl-r-md: 14px; --gl-r-lg: 18px; --gl-r-xl: 24px;
    --gl-shadow-sm: 0 1px 2px rgba(17, 18, 19, .06);
    --gl-shadow-md: 0 10px 30px -14px rgba(17, 18, 19, .18);
    --gl-shadow-lg: 0 22px 54px -22px rgba(17, 18, 19, .24);

    --gl-display-size: clamp(34px, 5.2vw, 58px);
    --gl-h2-size: clamp(26px, 3.2vw, 38px);
}

body { font-family: var(--gl-font-body); font-size: 16px; line-height: 1.65; color: #1c1d1f; background: var(--gl-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, .brand, .wm, .home-hero h1, .page-hero h1 { font-family: var(--gl-font-display); }
h1 { font-weight: 800; letter-spacing: -.03em; font-size: clamp(34px, 4.6vw, 52px); line-height: 1.12; color: #0a0a0a; }
h2 { font-weight: 800; letter-spacing: -.02em; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.2; color: #0a0a0a; }
h3 { font-weight: 700; letter-spacing: -.01em; font-size: 21px; line-height: 1.3; color: #111213; }
h4 { font-weight: 700; font-size: 17px; color: #111213; }
p, li { font-weight: 450; font-size: 16px; line-height: 1.7; color: #232426; }
strong, b { font-weight: 700; color: #111213; }
small, .small, .muted, .meta { font-size: 13.5px; color: #5d5f63; line-height: 1.6; }
label, .gl-field label, .gh-card label, .gl-row-s label { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: #3d3f43; }
a { color: #0f8d64; }
a:visited { color: #0c7351; }
button, input, select, textarea, .btn, .gl-btn, .pill-link { font-family: var(--gl-font-body); font-size: 15px; }
.btn, .gl-btn, .pill-link, .gl-cta, .gh-cta { font-weight: 700; letter-spacing: 0; }

/* Readability guards: never light text on light surfaces */
.text-white-on-dark, .band-dark, .preview-band.dark, .dark-band { color: rgba(255,255,255,.95); }
.band-dark p, .preview-band.dark p, .dark-band p { color: rgba(255,255,255,.9); }
.hero-band, .super-band, footer.site { color: rgba(255,255,255,.9); }

/* CTA panels: always deep-green identity block + WHITE text (never dark on dark) */
.cta-panel { background: #0a4026 !important; background-image: none !important; }
.cta-panel h2 { color: #ffffff !important; }
.cta-panel p { color: rgba(255, 255, 255, .9) !important; }
.cta-panel .btn.ghost { background: transparent; color: #ffffff; border-color: rgba(255,255,255,.5); }

/* LIGHT bands → dark text ALWAYS (white-on-white ghosts died here).
   Dark bands (.dark / .dark-band / band-dark) keep white via rules above. */
.preview-band:not(.dark) h2,
.preview-band:not(.dark) h3,
.preview-band:not(.dark) h4,
.preview-band:not(.dark) p,
.preview-band:not(.dark) .lead,
.preview-band:not(.dark) strong,
.preview-band:not(.dark) span:not(.badge):not(.btn):not([class*="ico"]) { color: #1c1d1f !important; }
.preview-band .kicker, .preview-band .badge, .journey-band .badge { color: #0c7351 !important; background: #dcefe5 !important; }
.journey-band:not(.dark) h2, .journey-band:not(.dark) h3, .journey-band:not(.dark) p, .journey-band:not(.dark) strong { color: #1c1d1f !important; }
.journey-band .card h3, .steps-grid .card h3 { color: #111213 !important; }
.journey-steps .js strong, .journey-steps .js span, .journey-steps .js { color: #1c1d1f !important; }
.journey-steps .js .ico { background: #dcefe5 !important; border-color: transparent !important; }
.journey-arrow { color: #0c7351 !important; }

/* Product/mock rows inside cards: LEGIBLE charcoal text, gray support */
.phone-mock .p-row, .dash-mock .d-asset, .net-rows .n-row { color: #232426; }
.phone-mock .p-row .ico, .dash-mock .d-asset .ico, .net-rows .n-row .ico { color: #0c7351; }
.phone-mock .p-note, .dash-mock .d-feed, .dash-mock .d-kpi .l, .net-rows .n-row small { color: #5d5f63; }
.dash-mock .d-kpi .v { color: #0f8d64; }
.mock-row, [class*="mock-"] p, [class*="mock-"] span { color: #3d3f43; }

/* Legacy vars → new neutral system (no green tint anywhere) */
:root, [data-theme="light"] {
    --gl-text: #111213;
    --gl-text-2: #404246;
    --gl-muted: #5d5f63;
    --card: #ffffff;
    --card-alt: #f6f6f4;
    --border: rgba(17, 18, 19, .10);
    --border-strong: rgba(17, 18, 19, .18);
    --text: #111213;
    --muted: #5d5f63;
    --gl-surface-2: #f6f6f4;
    --gl-border: rgba(17, 18, 19, .10);
    --gl-border-strong: rgba(17, 18, 19, .18);
    --gl-muted: #5d5f63;
    --gl-primary: #12a374;
    --gl-primary-strong: #0f8d64;
    --gl-primary-soft: #f2f7f4;
    --gl-primary-wash: #f4f7f5;
    --gl-primary-wash-2: rgba(17, 18, 19, .07);
}

/* ---- Header ------------------------------------------------------------ */
header.site { backdrop-filter: blur(14px); background: rgba(255, 255, 255, .92); border-bottom: 1px solid var(--gl-line); position: sticky; top: 0; z-index: 60; }
header.site .wrap { min-height: 66px; }
.brand .wm { font-family: var(--gl-font-display); font-weight: 800; letter-spacing: -.02em; }
.logo-tag { letter-spacing: .12em; font-size: 9.5px; color: #7a7c80; }
nav.main a { font-weight: 600; font-size: 14px; color: #43454a; }
nav.main a:hover { color: #0f8d64; }
nav.main a.active { color: #0c7351; }
.pill-link { font-weight: 700; }
.pill-link.primary { background: #12a374; color: #ffffff; box-shadow: 0 6px 16px -10px rgba(15, 141, 100, .6); }
.pill-link.primary:hover { background: #0f8d64; color: #ffffff; }
.icon-btn { border-radius: var(--gl-r-sm); }
.icon-btn:hover { background: #f2f4f3; }

/* ---- Buttons: GREEN primary, yellow only for highlights ----------------- */
.btn { font-weight: 700; border-radius: var(--gl-r-sm); letter-spacing: -.01em; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.99); }
.btn:focus-visible, .gl-btn:focus-visible, .pill-link:focus-visible, .icon-btn:focus-visible, nav.main a:focus-visible { outline: 3px solid rgba(18, 163, 116, .35); outline-offset: 2px; }
.btn, .btn.primary, .btn[type="submit"], .gl-btn {
    background: #12a374; color: #ffffff; box-shadow: 0 8px 20px -11px rgba(15, 141, 100, .65);
}
.btn:hover, .btn.primary:hover, .btn[type="submit"]:hover, .gl-btn:hover { background: #0f8d64; color: #ffffff; }
.btn.ghost, .btn.btn-ghost, .btn.outline, .btn.linklike {
    background: #ffffff; color: #161719; border: 1.5px solid var(--gl-line-strong); box-shadow: none;
}
.btn.ghost:hover, .btn.btn-ghost:hover { background: #f4f5f4; color: #000; }
.btn.highlight, .gh-cta, .gl-partner-cta { background: #f5c400; color: #111213; box-shadow: 0 6px 16px -10px rgba(180, 140, 0, .5); }
.btn.highlight:hover, .gh-cta:hover, .gl-partner-cta:hover { background: #e2b400; color: #111213; }
.btn.invert, .btn.on-dark { background: #12a374; color: #ffffff; }

/* ---- Cards ------------------------------------------------------------- */
.card { background: #ffffff; border: 1px solid var(--gl-line); border-radius: var(--gl-r-lg); box-shadow: var(--gl-shadow-sm); transition: box-shadow .18s ease, border-color .18s ease; }
.card:hover { border-color: var(--gl-line-strong); box-shadow: var(--gl-shadow-md); }
.card.clickable:hover { transform: translateY(-2px); }

/* ---- Badges / status --------------------------------------------------- */
.badge { font-weight: 700; letter-spacing: .02em; color: #0c7351; background: #dcefe5; border: 0; }
.badge.ok { background: #dcefe5; color: #0c7351; border-color: transparent; }
.badge.warn { background: #fdf1e3; color: #b45309; border-color: transparent; }
.badge.err { background: #fdecea; color: #b42318; border-color: transparent; }
.badge.info { background: #e8effc; color: #1d4ed8; border-color: transparent; }

/* ---- Inputs: pure white, charcoal text --------------------------------- */
input, select, textarea { background: #ffffff; color: #111213; border-color: var(--gl-line-strong); }
input::placeholder, textarea::placeholder { color: #8b8d90; }
input:focus, select:focus, textarea:focus { background: #ffffff; color: #111213; border-color: #12a374; }

/* ---- Dark sections: genuine charcoal, white text ---------------------- */
[class*="-band"] h1, [class*="-band"] h2, [class*="-band"] h3, .band-dark h1, .band-dark h2, .band-dark h3,
.preview-band.dark h1, .preview-band.dark h2, .preview-band.dark h3 { color: #ffffff !important; }
[class*="-band"] p, .band-dark p, .preview-band.dark p { color: rgba(255, 255, 255, .92) !important; }
.band, .preview-band, .journey-band, .super-band, [class*="-band"] { background-image: none !important; }
.preview-band, .journey-band { background: #ffffff !important; border: 1px solid var(--gl-line) !important; }
.preview-band.dark, .dark-band, [class*="-band"].dark { background: #111418 !important; border-color: #111418 !important; }
.band-dark, [class*="-band"][class*="dark"]:not(.preview-band) { background: #111418 !important; }

/* ---- Footer: brand identity block (deep green) ------------------------- */
footer.site, .site-footer, footer, [class*="footer"] {
    background: #0a4026 !important; background-image: none !important; color: rgba(255, 255, 255, .9);
}
footer.site a, [class*="footer"] a { color: rgba(255, 255, 255, .85); }
footer.site h4, [class*="footer"] h4, footer.site h3, [class*="footer"] h3 { color: #ffffff !important; }

/* ---- Helpers ------------------------------------------------------------ */
.gl-skeleton { background: linear-gradient(90deg, #f1f2f1 25%, #e7e9e7 37%, #f1f2f1 63%); background-size: 400% 100%; animation: gl-shimmer 1.3s ease infinite; border-radius: var(--gl-r-sm); }
@keyframes gl-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
table th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #6b6d70; }
table td { color: #1c1d1f; }
.gl-empty { text-align: center; padding: 42px 18px; color: #5d5f63; }
.gl-empty .gl-empty-ico { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 18px; background: #f4f5f4; border: 1px solid var(--gl-line); display: grid; place-items: center; font-size: 26px; }
.gl-empty h3 { margin: 0 0 4px; font-size: 16px; color: #111213; }
.gl-empty p { font-size: 13.5px; margin: 0 0 14px; max-width: 380px; margin-left: auto; margin-right: auto; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 760px) {
    .home-hero, .page-hero { border-radius: var(--gl-r-lg); }
    .home-hero .actions .btn { width: 100%; }
}