/* =============================================================================
   MARKETING GROVE SKIN
   =============================================================================

   Scoped reskin for six public marketing pages (philosophy, pricing, about,
   developers, how-it-works, faq) - forest green / clay / cream palette,
   Calistoga (display serif) + Karla (body sans) type, pill buttons, soft
   organic cards, generous section rhythm. NOT a platform-wide token change:
   every rule here is prefixed .grove-skin, applied only to the root wrapper
   div of those six views (see MarketingGroveAsset::register() call sites).

   Mechanism: redefine the SAME design-system token names already consumed
   everywhere (--color-primary-*, --font-family-heading, --bg-secondary, ...)
   locally under .grove-skin, so every existing component (buttons, badges,
   BenefitsGridWidget, StepsWidget, PricingWidget, ShareSectionLinkWidget)
   re-themes automatically via the var() chains already in variables.css /
   site.css / theme.css. Only genuinely hardcoded-hex CSS gets an explicit
   override below (see section D).

   Loaded via assets/MarketingGroveAsset.php, which depends on AppAsset +
   DesignSystemAsset - this guarantees this file loads AFTER site.css /
   theme.css, so equal-specificity selectors here win the cascade tie
   without needing !important (except where Bootstrap utilities force it,
   noted inline).

   Sections: A tokens, B typography, C idiom utilities, D component
   overrides, E page-specific promoted blocks, F dark companion, G motion
   and mobile.
   ============================================================================= */

/* =============================================================================
   A. TOKEN OVERRIDES
   ============================================================================= */

.grove-skin {
    /* --- Primary: forest green (mockup --green / --deep) --- */
    --color-primary-50:  #f2f8f2;
    --color-primary-100: #e9f3e8;
    --color-primary-200: #d2e5d2;
    --color-primary-300: #b0cfb4;
    --color-primary-400: #84ad8c;
    --color-primary-500: #527a5d;
    --color-primary-600: #456a4e;
    --color-primary-700: #385742;
    --color-primary-800: #294c38;
    --color-primary-900: #22402f;
    --color-primary-950: #14261c;
    --color-primary-400-rgb: 132, 173, 140;
    --color-primary-500-rgb: 82, 122, 93;
    --color-primary-600-rgb: 69, 106, 78;

    /* --- Secondary: clay (mockup --clay / --clay-soft) --- */
    --color-secondary-50:  #faf5f0;
    --color-secondary-100: #f3e9e1;
    --color-secondary-200: #e7d6c8;
    --color-secondary-300: #d6bda6;
    --color-secondary-400: #c5ab93;
    --color-secondary-500: #b69e88;
    --color-secondary-600: #9e8670;
    --color-secondary-700: #816c59;
    --color-secondary-800: #675748;
    --color-secondary-900: #54473c;
    --color-secondary-950: #2e2720;
    --color-secondary-400-rgb: 197, 171, 147;
    --color-secondary-500-rgb: 182, 158, 136;
    --color-secondary-600-rgb: 158, 134, 112;

    /* Bootstrap bakes --bs-primary-rgb as a literal triple (site.css:1218),
       it does NOT chain from --color-primary-*-rgb, so .text-bg-primary /
       .btn-check + .btn-outline-primary / etc need this restated here. */
    --bs-primary: var(--color-primary-600);
    --bs-primary-rgb: 69, 106, 78;

    /* --- Surfaces (mockup --paper / --cream / --ink / --line) --- */
    --bg-primary:    #fffefb;
    --bg-secondary:  #f8f7f1;
    --bg-tertiary:   #f1efe4;
    --bg-primary-rgb:   255, 254, 251;
    --bg-secondary-rgb: 248, 247, 241;
    --bg-tertiary-rgb:  241, 239, 228;

    --text-primary:   #293b2e;
    --text-secondary: #5a6b5e;
    --text-tertiary:  #7a8a7d;
    --text-muted:     #7a8a7d;
    --text-inverse:   #fffefb;

    --border-default:     #dbe7da;
    --border-default-rgb: 219, 231, 218;
    --border-muted:  #e9f0e8;
    --border-strong: #c2d3c0;

    /* --- Type: point the existing role vars at the already-loaded,
       already-self-hosted Calistoga / Karla families (web/css/fonts.css) --- */
    --font-family-heading: var(--font-family-calistoga);
    --font-family-brand:   var(--font-family-calistoga);
    --font-family-body:    var(--font-family-karla);

    /* --- Organic rounding. Deliberately leaves --radius-sm/-full alone. --- */
    --radius-base: 6px;
    --radius-md:   8px;
    --radius-lg:   14px;
    --radius-xl:   18px;
    --radius-2xl:  22px;
    --radius-3xl:  28px;

    /* --shadow-sm/md/lg/xl already derive from --shadow-color via hsl() in
       variables.css - retinting the hue alone warms every existing
       var(--shadow-*) consumer in scope for free. */
    --shadow-color: 146 25% 22%;

    /* Text/icon color used on tinted-primary surfaces (chips, code, table
       headers, accordion active state, badges) that stay a light tint in
       BOTH themes (rgba(var(--color-primary-500-rgb), a) over --bg-*) - a
       dark ramp step (700/800) reads fine on the light-mode cream tint but
       goes near-invisible once --bg-* flips near-black in dark mode. Flip
       this one token in section F instead of patching every call site. */
    --grove-accent-ink: var(--color-primary-800);

    /* The wrapper paints its own cream field - <body> stays platform-default
       since it is an ANCESTOR of this div, not a descendant, and is shared
       with every other page. */
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* =============================================================================
   B. TYPOGRAPHY NORMALIZATION
   ============================================================================= */

/* Calistoga ships weight 400 only (web/css/fonts.css). Bootstrap's
   .fw-bold / .display-* utilities carry !important and would otherwise
   force a synthesized-bold render on a display serif that has no bold
   face. Never lift this from headings; do not strip fw-bold from markup
   instead (too much churn, one miss looks broken). */
.grove-skin h1,
.grove-skin h2,
.grove-skin h3,
.grove-skin h4,
.grove-skin h5,
.grove-skin h6 {
    font-weight: var(--font-weight-normal) !important;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.grove-skin .lead {
    font-family: var(--font-family-body);
    color: var(--text-secondary);
}

/* =============================================================================
   C. IDIOM UTILITIES (adopt by changing class="" strings, no new PHP)
   ============================================================================= */

.grove-skin .grove-section {
    padding-block: 80px;
}

.grove-skin .grove-section-tight {
    padding-block: 56px;
}

.grove-skin .grove-eyebrow {
    display: inline-block;
    font-family: var(--font-family-body); /* Karla has real bold weights, Calistoga does not */
    font-size: 0.72rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--grove-accent-ink);
    margin-bottom: 0.75rem;
}

.grove-skin .grove-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.grove-skin .grove-heading-row > p {
    max-width: 400px;
    color: var(--text-secondary);
    margin: 0;
}

.grove-skin .grove-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-full);
    background: rgba(var(--color-primary-500-rgb), 0.12);
    border: 1px solid var(--color-primary-200);
    color: var(--grove-accent-ink);
    font-size: 0.82rem;
    font-weight: var(--font-weight-bold);
}

.grove-skin .grove-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md);
    padding: 1.75rem;
}

.grove-skin .grove-card-featured {
    border: 2px solid var(--color-primary-500);
    box-shadow: var(--shadow-lg);
}

.grove-skin .grove-band {
    border-radius: var(--radius-2xl);
    padding: 2.5rem;
    background: var(--bg-secondary);
}

.grove-skin .grove-band-deep {
    --grove-band-bg: var(--color-primary-800);
    background: var(--grove-band-bg);
    color: #f2f7f1;
}

.grove-skin .grove-band-deep .text-muted,
.grove-skin .grove-band-deep p {
    color: rgba(255, 255, 255, 0.82) !important;
}

.grove-skin .grove-band-deep h1,
.grove-skin .grove-band-deep h2,
.grove-skin .grove-band-deep h3 {
    color: #ffffff;
}

/* Mockup convention: on a dark green band, buttons flip to a light pill
   (mockup .light-button) rather than staying primary-green-on-primary-green. */
.grove-skin .grove-band-deep .btn-brand-primary,
.grove-skin .grove-band-deep .btn-primary {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--color-primary-800);
}

.grove-skin .grove-band-deep .btn-brand-primary:hover,
.grove-skin .grove-band-deep .btn-primary:hover {
    background-color: var(--bg-primary);
    color: var(--color-primary-900);
}

.grove-skin .grove-band-deep .btn-outline-secondary {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
}

.grove-skin .grove-band-deep .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #ffffff;
    color: #ffffff;
}

.grove-skin .grove-bleed {
    margin-inline: calc(50% - 50vw);
    /* Safe: body { overflow-x: clip } already set in site.css, so this
       breakout never produces a horizontal scrollbar. */
}

.grove-skin .grove-band.grove-bleed,
.grove-skin .grove-band-deep.grove-bleed {
    border-radius: 0;
}

.grove-skin .grove-wide {
    max-width: 1230px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

/* =============================================================================
   D. SCOPED OVERRIDES OF EXISTING COMPONENTS (zero markup changes required)
   ============================================================================= */

/* Every existing button on these pages - Bootstrap .btn-primary, our own
   .btn-brand-primary, .btn-outline-secondary, and every widget-rendered
   button (PricingWidget, BenefitsGridWidget, StepsWidget) - becomes a pill,
   for free, because they all resolve their radius/colors through tokens. */
.grove-skin .btn {
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-bold);
}

@media (prefers-reduced-motion: no-preference) {
    .grove-skin .btn {
        transition: transform 0.2s ease;
    }
    .grove-skin .btn:hover {
        transform: translateY(-2px);
    }
}

/* Copy-field groups (MCP endpoint, Claude Code CLI, REST examples on
   developers.php): the group itself becomes one cohesive soft-edged surface
   (rounded corners + border + shadow on the group, overflow:hidden to clip
   the children) instead of two separately-bordered boxes glued together -
   also opts the whole group out of the blanket .btn pill rule above, which
   would otherwise look broken next to a flush-joined input. */
.grove-skin .input-group {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-default);
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.grove-skin .input-group .form-control {
    border: none;
    background: transparent;
    color: var(--grove-accent-ink);
    font-weight: var(--font-weight-bold);
}

.grove-skin .input-group .form-control:focus {
    box-shadow: none;
    background: rgba(var(--color-primary-500-rgb), 0.05);
}

.grove-skin .input-group .btn {
    border: none;
    border-radius: 0;
    background: var(--color-primary-500);
    color: #fff;
}

.grove-skin .input-group .btn:hover {
    background: var(--color-primary-600);
}

.grove-skin .card {
    background: var(--card-bg, var(--bg-primary));
    border-color: var(--border-default);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md);
}

/* [data-theme="light"] .card in site.css hardcodes a white background and a
   fixed black shadow at equal specificity - restate explicitly so the warm
   card always wins regardless of theme attribute. */
[data-theme="light"] .grove-skin .card {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
}

.grove-skin .card-header,
.grove-skin .card-footer {
    background-color: var(--bg-tertiary);
    border-color: var(--border-default);
}

.grove-skin .badge {
    border-radius: var(--radius-full);
}

.grove-skin code,
.grove-skin .font-monospace {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--grove-accent-ink);
}

.grove-skin .alert-info {
    --bs-alert-bg: rgba(var(--color-primary-500-rgb), 0.08);
    --bs-alert-border-color: var(--color-primary-200);
    --bs-alert-color: var(--grove-accent-ink);
    border-radius: var(--radius-xl);
}

/* Billing cycle toggle (PricingWidget::renderBillingToggle(), CSS shared
   platform-wide in site.css:4840-4927) - root cause of the dark-mode
   illegibility: the sliding indicator's background is var(--link-default),
   which the dark block below intentionally re-points to a PALE sage
   (--color-primary-300) since --link-default is meant for text-on-dark, not
   a filled surface - site.css then hardcodes color:#fff on the active
   label, giving white-on-pale-sage. Fix: pin the indicator to the fixed mid
   ramp step --color-primary-500 (never re-pointed per theme, same pairing
   the reference mockup itself uses for its .green-button), so white text
   stays reliably legible in both themes with no dark-mode override needed. */
.grove-skin .billing-cycle-toggle {
    background: rgba(var(--color-primary-500-rgb), 0.10);
    border: 1px solid var(--color-primary-200);
    box-shadow: var(--shadow-sm);
}

.grove-skin .billing-cycle-toggle__indicator {
    background: var(--color-primary-500);
    box-shadow: 0 4px 14px rgba(var(--color-primary-500-rgb), 0.45);
}

.grove-skin .billing-cycle-toggle__option {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-bold);
}

/* The savings badge uses Bootstrap's semantic .bg-success-subtle/.text-success
   utilities (site.css markup via PricingWidget), which aren't grove-themed
   and go low-contrast on the custom near-black dark surface - retint to the
   clay secondary accent instead, with a gentle pulse so it visually sells
   the savings (matches the pricing-ai-features-pulse treatment already used
   elsewhere on this page). !important because Bootstrap's own subtle-color
   utility classes are being overridden, same pattern as the .text-primary /
   .bg-primary overrides already in site.css. */
.grove-skin .billing-cycle-toggle__badge {
    background: rgba(var(--color-secondary-500-rgb), 0.18) !important;
    color: var(--color-secondary-700) !important;
    border: 1px solid rgba(var(--color-secondary-500-rgb), 0.4);
    animation: grove-badge-pulse 2.8s ease-in-out infinite;
}

[data-theme="dark"] .grove-skin .billing-cycle-toggle__badge {
    color: var(--color-secondary-200) !important;
    background: rgba(var(--color-secondary-500-rgb), 0.24) !important;
}

@keyframes grove-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-secondary-500-rgb), 0.35); }
    50%      { box-shadow: 0 0 0 6px rgba(var(--color-secondary-500-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
    .grove-skin .billing-cycle-toggle__badge {
        animation: none;
    }
}

.grove-skin .accordion {
    --bs-accordion-bg: var(--bg-primary);
    --bs-accordion-border-color: var(--border-default);
    --bs-accordion-border-radius: var(--radius-xl);
    --bs-accordion-inner-border-radius: calc(var(--radius-xl) - 1px);
    --bs-accordion-btn-color: var(--text-primary);
    --bs-accordion-btn-bg: var(--bg-primary);
    --bs-accordion-active-color: var(--grove-accent-ink);
    --bs-accordion-active-bg: rgba(var(--color-primary-500-rgb), 0.08);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-500-rgb), 0.2);
}

.grove-skin .accordion-item {
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow-sm);
}

.grove-skin .accordion-item:last-child {
    margin-bottom: 0;
}

.grove-skin .table {
    --bs-table-bg: var(--bg-primary);
    --bs-table-border-color: var(--border-default);
    --bs-table-striped-bg: var(--bg-secondary);
    --bs-table-hover-bg: rgba(var(--color-primary-500-rgb), 0.06);
    border-radius: var(--radius-xl);
}

.grove-skin .table thead th {
    /* rgba() over --bg-primary rather than a static ramp step (--color-primary-50
       is always near-white and would sit oddly on a dark-mode table) - this
       composites correctly whichever theme --bg-primary resolves to. */
    background: rgba(var(--color-primary-500-rgb), 0.08);
    color: var(--grove-accent-ink);
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-bold);
    border-bottom-color: var(--border-default);
}

/* .hiw-mothership-banner / .hiw-social-banner (site.css:2703 / 2831) bypass
   tokens entirely with hardcoded indigo/violet/emerald RGBs - explicit
   retint required. Two extra class levels beats site.css's single-class
   selectors regardless of load order. */
.grove-skin .hiw-mothership-banner {
    background: linear-gradient(135deg,
        rgba(var(--color-primary-500-rgb), 0.10) 0%,
        rgba(var(--color-secondary-500-rgb), 0.07) 50%,
        rgba(var(--color-primary-500-rgb), 0.10) 100%);
    border-color: var(--border-default);
    border-radius: var(--radius-2xl);
}

.grove-skin .hiw-space-scene {
    background: radial-gradient(circle, rgba(var(--color-primary-500-rgb), 0.12) 0%, transparent 70%);
}

.grove-skin .hiw-star {
    background: rgba(var(--color-primary-500-rgb), 0.5);
}

.grove-skin .hiw-mothership-title,
.grove-skin .hiw-mothership-link {
    /* --link-default is already re-pointed for dark mode (section F) -
       reuse it rather than a static ramp step that would go low-contrast
       once the banner's tint sits on a near-black page background. */
    color: var(--link-default);
}

.grove-skin .hiw-mothership-link {
    border-bottom-color: rgba(var(--color-primary-500-rgb), 0.4);
}

.grove-skin .hiw-social-banner {
    background: linear-gradient(135deg,
        rgba(var(--color-secondary-500-rgb), 0.10) 0%,
        rgba(var(--color-primary-500-rgb), 0.06) 50%,
        rgba(var(--color-secondary-500-rgb), 0.10) 100%);
    border-color: var(--border-default);
    border-radius: var(--radius-2xl);
}

.grove-skin .hiw-nature-scene {
    background: radial-gradient(circle, rgba(var(--color-secondary-500-rgb), 0.14) 0%, transparent 70%);
}

.grove-skin .hiw-nature-icon {
    color: rgba(var(--color-primary-500-rgb), 0.7);
}

.grove-skin .hiw-social-title {
    color: var(--link-default);
}

/* ShareSectionLinkWidget hardcodes a stale #3b82f6 hover color and a blue
   keyframe box-shadow (widgets/ShareSectionLinkWidget.php) - the widget is
   shared platform-wide, so override here rather than edit it. */
.grove-skin .share-section-link-btn:hover,
.grove-skin .share-section-link-btn:focus-visible {
    background-color: rgba(var(--color-primary-500-rgb), 0.10);
    border-color: rgba(var(--color-primary-500-rgb), 0.55);
    color: var(--link-default);
}

@keyframes grove-share-arrival-pulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--color-primary-500-rgb), 0.45); }
    100% { box-shadow: 0 0 0 14px rgba(var(--color-primary-500-rgb), 0); }
}

.grove-skin .share-section-arrival-target {
    animation-name: grove-share-arrival-pulse;
}

/* about.php's .org-description / .about-body are currently undefined dead
   hooks (org description output via ContentHelper::renderDescription()).
   Kept strictly under .grove-skin - .org-description is also emitted,
   unscoped, on other (non-reskinned) org pages. */
.grove-skin .org-description,
.grove-skin .about-body {
    max-width: 68ch;
    margin-inline: auto;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--text-primary);
}

.grove-skin .org-description h1,
.grove-skin .org-description h2,
.grove-skin .org-description h3,
.grove-skin .about-body h1,
.grove-skin .about-body h2,
.grove-skin .about-body h3 {
    font-family: var(--font-family-heading);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.grove-skin .org-description blockquote,
.grove-skin .about-body blockquote {
    border-left: 3px solid var(--color-secondary-500);
    padding-left: 1.25rem;
    margin-inline: 0;
    font-style: italic;
    color: var(--text-secondary);
}

.grove-skin .org-description a,
.grove-skin .about-body a {
    color: var(--link-default);
    text-decoration: underline;
    text-decoration-color: var(--color-primary-300);
    text-underline-offset: 3px;
}

.grove-skin .org-description ul li::marker,
.grove-skin .about-body ul li::marker {
    color: var(--color-primary-500);
}

.grove-skin .org-description img,
.grove-skin .about-body img {
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md);
}

.grove-skin .org-description hr,
.grove-skin .about-body hr {
    border-color: var(--border-default);
    opacity: 1;
}

/* =============================================================================
   E. PAGE-SPECIFIC PROMOTED BLOCKS (shared idiom lifted out of view-local CSS)
   ============================================================================= */

.grove-skin .about-hero {
    overflow: hidden;
    border-radius: 0 0 var(--radius-3xl) var(--radius-3xl);
}

.grove-skin .about-hero-cover {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.grove-skin .about-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(41, 76, 56, 0.15) 0%, rgba(41, 76, 56, 0.72) 100%);
}

.grove-skin .about-hero-logo {
    width: 96px;
    height: 96px;
    object-fit: contain;
    background: transparent;
    border-radius: var(--radius-lg);
}

.grove-skin .about-hero-cover ~ .container,
.grove-skin .about-hero-cover + .container {
    color: #fff;
}

.grove-skin .about-hero-cover ~ .container .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* =============================================================================
   F. DARK COMPANION
   =============================================================================

   Every tinted surface above is authored as rgba(var(--color-primary-500-rgb),
   a) or rgba(var(--color-secondary-500-rgb), a) layered over --bg-*, never a
   baked hex - so the dark block only needs to swap surface/text aliases and
   nudge a couple of alphas, not re-author a second palette.
   ============================================================================= */

[data-theme="dark"] .grove-skin {
    --bs-primary: var(--color-primary-500);
    --bs-primary-rgb: 82, 122, 93;

    --bg-primary:   #16201a;
    --bg-secondary: #101812;
    --bg-tertiary:  #1e2a21;
    --bg-primary-rgb:   22, 32, 26;
    --bg-secondary-rgb: 16, 24, 18;
    --bg-tertiary-rgb:  30, 42, 33;

    --text-primary:   #eef3ec;
    --text-secondary: #b3c2b5;
    --text-tertiary:  #8ea092;
    --text-muted:     #8ea092;

    --border-default:     #2c3b2f;
    --border-default-rgb: 44, 59, 47;
    --border-muted:  #223027;
    --border-strong: #3a4c3e;

    /* Re-point aliases rather than re-author ramps - links/secondary/accent-ink
       need to lift toward the light end of their ramp to stay legible on
       near-black (this is the fix for the "Kaj je Eventure?" / endpoint-path
       near-invisible-text bug: --grove-accent-ink was stuck at the dark
       primary-800 step regardless of theme). */
    --link-default: var(--color-primary-300);
    --link-hover:   var(--color-primary-200);
    --bs-secondary: var(--color-secondary-300);
    --grove-accent-ink: var(--color-primary-200);
}

[data-theme="dark"] .grove-skin .card,
[data-theme="dark"] .grove-skin .grove-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    box-shadow: none; /* shadows lose their glow on dark - lean on the border instead */
}

[data-theme="dark"] .grove-skin .grove-band {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .grove-skin .grove-band-deep {
    /* one step darker than --bg-primary so it still reads as a raised panel */
    --grove-band-bg: var(--color-primary-900);
}

/* .grove-eyebrow / .grove-chip / code / table thead th / alert-info /
   accordion active state all already read var(--grove-accent-ink), which
   the [data-theme="dark"] .grove-skin block above already re-points - no
   per-selector color override needed here. */
[data-theme="dark"] .grove-skin .grove-chip {
    background: rgba(var(--color-primary-500-rgb), 0.18);
    border-color: var(--color-primary-700);
}

[data-theme="dark"] .grove-skin .hiw-mothership-banner,
[data-theme="dark"] .grove-skin .hiw-social-banner {
    background: linear-gradient(135deg,
        rgba(var(--color-primary-500-rgb), 0.16) 0%,
        rgba(var(--color-secondary-500-rgb), 0.10) 50%,
        rgba(var(--color-primary-500-rgb), 0.16) 100%);
    border-color: var(--border-default);
}

[data-theme="dark"] .grove-skin .about-hero-overlay {
    background: linear-gradient(180deg, rgba(20, 38, 28, 0.3) 0%, rgba(20, 38, 28, 0.85) 100%);
}

/* =============================================================================
   G. MOTION AND MOBILE
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .grove-skin .btn:hover {
        transform: none;
    }
}

@media (max-width: 767.98px) {
    .grove-skin .grove-section {
        padding-block: 48px;
    }
    .grove-skin .grove-heading-row {
        flex-direction: column;
        align-items: flex-start;
    }
}