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

/* ---- Type and colour tokens: MOVED to gf-tokens.css -> PHASE 3 ----------
   This `:root` block declared `--gl-*` names that `growleafy.css` also
   declared with DIFFERENT values, including `--gl-primary` = `#12a374`
   against its `#16A34A`. Two design systems, one namespace, and this file
   loads last so it silently won. The block is removed; every name it held
   is now an alias in `gf-tokens.css`, resolving to a canonical `--gf-*`.
   Add new tokens there as `--gf-*`; do not reintroduce a `:root` here.
   ------------------------------------------------------------------------ */
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: var(--gf-primary); }
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: var(--gf-primary); }
.mock-row, [class*="mock-"] p, [class*="mock-"] span { color: #3d3f43; }

/* Legacy vars: MOVED to gf-tokens.css -> PHASE 3. This block was the one that
   actually decided the storefront's green (`--gl-primary: #12a374`). The
   unprefixed legacy names it carried (`--card`, `--border`, `--text`,
   `--muted`) are aliased there too, so the promise that they keep working
   still holds. *//* ---- 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: var(--gf-primary); }
nav.main a.active { color: var(--gf-primary-strong); }
.pill-link { font-weight: 700; }
.pill-link.primary { background: var(--gf-primary); color: var(--gf-on-primary); box-shadow: var(--gf-sh-sm); }
.pill-link.primary:hover { background: var(--gf-primary-hover); color: var(--gf-on-primary); }
.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: var(--gf-focus-outline); outline-offset: var(--gf-focus-offset); }
.btn, .btn.primary, .btn[type="submit"], .gl-btn {
    background: var(--gf-primary); color: var(--gf-on-primary); box-shadow: var(--gf-sh-sm);
}
.btn:hover, .btn.primary:hover, .btn[type="submit"]:hover, .gl-btn:hover { background: var(--gf-primary-hover); color: var(--gf-on-primary); }
.btn.ghost, .btn.btn-ghost, .btn.outline, .btn.linklike {
    background: var(--gf-surface); color: var(--gf-text); border: 1px solid var(--gf-border-2); 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: var(--gf-primary); color: var(--gf-on-primary); }

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

/* ---- Badges / status --------------------------------------------------- */
.badge { font-weight: 700; letter-spacing: .02em; color: var(--gf-success-ink); background: var(--gf-success-soft); border: 0; }
.badge.ok { background: var(--gf-success-soft); color: var(--gf-success-ink); border-color: transparent; }
.badge.warn { background: var(--gf-warning-soft); color: var(--gf-warning-ink); border-color: transparent; }
.badge.err { background: var(--gf-error-soft); color: var(--gf-error-ink); border-color: transparent; }
.badge.info { background: var(--gf-info-soft); color: var(--gf-info-ink); border-color: transparent; }

/* ---- Inputs: pure white, charcoal text --------------------------------- */
input, select, textarea { background: var(--gf-surface); color: var(--gf-text); border-color: var(--gf-border-2); }
input::placeholder, textarea::placeholder { color: #6b6d70; }
input:focus, select:focus, textarea:focus { background: var(--gf-surface); color: var(--gf-text); border-color: var(--gf-focus-color); box-shadow: var(--gf-focus-ring); }

/* ---- Dark sections: genuine charcoal, white text ---------------------- */
.band-dark h1, .band-dark h2, .band-dark h3,
.preview-band.dark h1, .preview-band.dark h2, .preview-band.dark h3 { color: #ffffff !important; }
.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 {
    background: #0a4026 !important; background-image: none !important; color: rgba(255, 255, 255, .9);
}
footer.site a, .site-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%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MATERIAL SYMBOLS — THE ESTATE'S ONE ICON VOCABULARY (adopted 2026-09-23)
   ══════════════════════════════════════════════════════════════════════════
   ⚠ A MIRROR, ON THE SAME REASONING AS THE COPY IN `ai.css`. The canonical base
   rule is in `gf-tokens.css`; the civic surface does not load that file (it
   loads `design-system.css` alone), so the primitive is repeated here rather
   than by adding a second stylesheet to a surface whose layout was not built
   against it. `IconVocabularyTest` asserts this copy exists.

   The glyph is a LIGATURE: the element's text IS the Material identifier, which
   is why every glyph carries `aria-hidden="true"` and why the family is
   requested with `display=block`.
   ══════════════════════════════════════════════════════════════════════════ */
.gl-mi {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -webkit-user-select: none;
    user-select: none;
}