/* =============================================================================
   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;
}

/* .grove-eyebrow has its own explicit color (var(--grove-accent-ink), a dark
   ink in light theme) which otherwise wins over the band's inherited white -
   a directly-targeted rule beats an inherited one regardless of theme. */
.grove-skin .grove-band-deep .grove-eyebrow {
    color: #d4e8d1;
}

/* 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 .grove-band-link {
    color: #d4e8d1;
    text-decoration: none;
    border-bottom: 1px solid rgba(212, 232, 209, 0.4);
    padding-bottom: 1px;
}

.grove-skin .grove-band-deep .grove-band-link:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

.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;
}

/* White-translucent pill for a .grove-chip sitting on a .grove-band-deep
   surface (hero nav pills, a stat chip inside a dark aside) - the mockup's
   .creator-nav-pills a / .free-plan-grid span idiom, generalized so any
   future deep band gets it for free. */
.grove-skin .grove-band-deep .grove-chip {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

.grove-skin .grove-band-deep .grove-chip:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Ghost card for a .grove-band-deep surface - the mockup's .principle-card:
   a faint outlined panel that reads as a card without fighting the band's
   own dark background. */
.grove-skin .grove-card-ghost {
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.13);
}

/* =============================================================================
   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;
}

/* Bootstrap .nav-pills bakes its active fill as a literal #0d6efd
   (--bs-nav-pills-link-active-bg), it does NOT chain from --bs-primary,
   so tab pills (mcp-connector.php client tabs) need the brand restated. */
.grove-skin .nav-pills {
    --bs-nav-pills-border-radius: var(--radius-full);
    --bs-nav-pills-link-active-bg: var(--color-primary-600);
    --bs-nav-pills-link-active-color: #ffffff;
    --bs-nav-link-color: var(--grove-accent-ink);
    --bs-nav-link-hover-color: var(--color-primary-700);
    gap: 0.35rem;
}

.grove-skin .nav-pills .nav-link {
    font-weight: var(--font-weight-bold);
    padding-inline: 1.1rem;
}

.grove-skin .nav-pills .nav-link:not(.active) {
    background: rgba(var(--color-primary-500-rgb), 0.08);
    color: var(--grove-accent-ink) !important;
}

/* !important: theme.css forces `.nav-link { color: var(--text-primary)
   !important }` platform-wide, which paints dark ink on the green active
   pill in light theme. */
.grove-skin .nav-pills .nav-link.active,
.grove-skin .nav-pills .nav-link.active:hover {
    color: #ffffff !important;
}

/* =============================================================================
   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;
}

/* --- /for-creators (views/site/for-creators.php) --- */

/* The hero is a full-bleed band, so the layout's main > .container
   top padding shows as an empty strip between the navbar and the hero. */
main > .container:has(> .site-for-creators) {
    padding-top: 0;
}

/* Issue #92: calm olive text band, then the wide artwork shown whole
   (never cropped, no overlay) so the tree, offerings and creators stay
   visible on every screen. The band colour matches the artwork's sky. */
.grove-skin .creator-hero {
    --creator-hero-bg: #bac296;
    position: relative;
    overflow: hidden;
    background: var(--creator-hero-bg);
}

.grove-skin .creator-hero .grove-section {
    padding-bottom: 24px;
}

.grove-skin .creator-hero h1 {
    font-size: clamp(2.75rem, 6vw, 5.25rem);
    max-width: 830px;
    color: #1f2e24;
}

.grove-skin .creator-hero .grove-eyebrow {
    color: #3d5a43;
}

.grove-skin .creator-hero p {
    max-width: 650px;
    color: #2f4234;
}

/* The artwork is a light painting, so the band stays light in the dark theme too. */
.grove-skin .creator-hero .btn-outline-primary {
    color: #2f5d3a;
    border-color: #2f5d3a;
}

.grove-skin .creator-hero .btn-outline-primary:hover {
    background: #2f5d3a;
    color: #fff;
}

.grove-skin .creator-hero-art {
    margin: 0;
    width: 100%;
    line-height: 0;
}

.grove-skin .creator-hero-art img {
    display: block;
    width: 100%;
    height: auto;
}

.grove-skin .creator-hero-pills {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.grove-skin .creator-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-primary-100);
    color: var(--color-primary-800);
    font-family: var(--font-family-heading);
}

.grove-skin .creator-free-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
}

.grove-skin .creator-free-grid span {
    padding: 0.6rem 0.7rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.84rem;
    display: block;
}

.grove-skin .creator-free-fee {
    padding: 0.75rem 0.85rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.92);
}

/* Alternating icon tint on the #creator-tools BenefitsGridWidget grid -
   mockup's .creator-value:nth-child(2n) .creator-value-icon. */
.grove-skin .creator-toolkit .wb-grid > [data-web-item-index]:nth-child(even) .benefit-icon {
    background: var(--color-secondary-100);
    color: var(--color-secondary-700);
}

/* ---- Theme-aware screenshots (ShotHelper::themed) + /insight tour ---- */

/* html[data-theme] is always resolved by the layout, so no
   prefers-color-scheme fallback is needed here. */
.shot-themed img {
    display: block;
    width: 100%;
    height: auto;
}

.shot-themed .shot-dark,
[data-theme="dark"] .shot-themed .shot-light {
    display: none;
}

[data-theme="dark"] .shot-themed .shot-dark {
    display: block;
}

.grove-skin .insight-shots {
    position: relative;
}

.grove-skin .insight-shots.has-inset {
    /* Room below the main shot so the inset overlaps only its lower edge. */
    padding-bottom: 24%;
}

.grove-skin .insight-shot {
    position: relative;
    margin: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background: var(--bg-primary);
    box-shadow: var(--shadow-lg);
}

.grove-skin .insight-shots.has-inset .insight-shot-main {
    width: 86%;
}

.grove-skin .insight-shot-inset {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 56%;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    transition: transform var(--duration-300) var(--ease-in-out),
                box-shadow var(--duration-300) var(--ease-in-out);
}

.grove-skin .insight-shot-inset:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--shadow-2xl);
}

.grove-skin .insight-slide.is-reversed .insight-shots.has-inset .insight-shot-main {
    margin-left: auto;
}

.grove-skin .insight-slide.is-reversed .insight-shot-inset {
    right: auto;
    left: 0;
}

.grove-skin .insight-shot figcaption {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    padding: 0.25rem 0.7rem;
    font-size: 0.72rem;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

/* The dark .grove-chip tint is translucent - over a screenshot it needs a
   solid surface to stay readable. */
[data-theme="dark"] .grove-skin .insight-shot figcaption {
    background: var(--bg-primary);
}

.grove-skin .insight-shots.has-inset .insight-shot-main figcaption {
    top: 0.75rem;
    bottom: auto;
}

/* "How you manage it" is the point of each slide: a solid brand pill,
   larger than the quiet "What visitors see" chip. Placed after the dark
   override above so it wins in both themes at equal specificity. */
.grove-skin .insight-shots .insight-shot-inset figcaption {
    left: 1rem;
    bottom: 1rem;
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    background: var(--color-primary-500);
    border: 2px solid rgba(255, 255, 255, 0.85);
    color: #ffffff;
    box-shadow: var(--shadow-lg);
}

.grove-skin .insight-shots .insight-shot-inset figcaption i {
    opacity: 0.9;
}

/* ---- Click-to-enlarge screenshots (web/js/shot-zoom.js) ---- */

.shot-themed[data-zoom] {
    cursor: zoom-in;
}

.shot-themed[data-zoom]:focus-visible {
    outline: 3px solid var(--color-primary-400);
    outline-offset: 3px;
}

/* The caption chip sits over the image - let clicks fall through to it. */
.grove-skin .insight-shot-inset figcaption {
    pointer-events: none;
}

.shot-zoom {
    position: fixed;
    inset: 0;
    /* Above the section nav (scroll-navigation.css, ~9997). */
    z-index: 10050;
    overscroll-behavior: contain;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1.25rem 1.25rem;
    cursor: zoom-out;
}

.shot-zoom-bg {
    position: absolute;
    inset: 0;
    background: rgba(12, 14, 18, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.shot-zoom.is-open .shot-zoom-bg {
    opacity: 1;
}

/* max-width is also set inline to the capture's 1x width: never past 100%. */
.shot-zoom img {
    position: relative;
    max-width: 100%;
    max-height: calc(100vh - 7.5rem);
    width: auto;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
    transform-origin: 0 0;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}

.shot-zoom-cap {
    position: relative;
    max-width: 48rem;
    margin: 0.9rem 0 0;
    text-align: center;
    font-size: 0.85rem;
    color: #d7dae0;
    opacity: 0;
    transition: opacity 0.2s ease 0.12s;
}

.shot-zoom.is-open .shot-zoom-cap {
    opacity: 1;
}

.shot-zoom-x,
.shot-zoom-nav {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(20, 22, 28, 0.6);
    color: #ffffff;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease 0.1s, background 0.15s;
}

.shot-zoom.is-open .shot-zoom-x,
.shot-zoom.is-open .shot-zoom-nav {
    opacity: 1;
}

.shot-zoom-x:hover,
.shot-zoom-nav:hover {
    background: rgba(60, 64, 74, 0.85);
}

.shot-zoom-x {
    top: 1rem;
    right: 1rem;
}

.shot-zoom-nav {
    top: 50%;
    margin-top: -1.3rem;
}

.shot-zoom-nav.prev {
    left: 1rem;
}

.shot-zoom-nav.next {
    right: 1rem;
}

.shot-zoom-nav[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .shot-zoom img,
    .shot-zoom-bg,
    .shot-zoom-cap {
        transition: none;
    }
}

/* =============================================================================
   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;
       border + soft primary glow keep it from melting into the page. */
    --grove-band-bg: var(--color-primary-900);
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(var(--color-primary-500-rgb), 0.22) 0%, transparent 60%),
        var(--grove-band-bg);
    border: 1px solid var(--border-strong);
}

/* A white pill glares on near-black - keep the brand green instead. */
[data-theme="dark"] .grove-skin .grove-band-deep .btn-brand-primary,
[data-theme="dark"] .grove-skin .grove-band-deep .btn-primary {
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500);
    color: #ffffff;
}

[data-theme="dark"] .grove-skin .grove-band-deep .btn-brand-primary:hover,
[data-theme="dark"] .grove-skin .grove-band-deep .btn-primary:hover {
    background-color: var(--color-primary-400);
    border-color: var(--color-primary-400);
    color: #ffffff;
}

/* .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%);
}

[data-theme="dark"] .grove-skin .creator-step-num {
    background: rgba(var(--color-primary-500-rgb), 0.22);
    color: var(--color-primary-200);
}

[data-theme="dark"] .grove-skin .creator-toolkit .wb-grid > [data-web-item-index]:nth-child(even) .benefit-icon {
    /* color-secondary-* is one fixed ramp (section A) - the light clay tint
       reads too pale on a near-black surface, so re-tint with primary alpha
       instead of introducing a second clay ramp for dark mode only. */
    background: rgba(var(--color-primary-500-rgb), 0.22);
    color: var(--color-primary-200);
}

/* =============================================================================
   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;
    }
    .grove-skin .creator-free-grid {
        grid-template-columns: 1fr;
    }
    .grove-skin .insight-shots.has-inset {
        padding-bottom: 0;
    }
    .grove-skin .insight-shots.has-inset .insight-shot-main {
        width: 100%;
    }
    .grove-skin .insight-shot-inset {
        position: relative;
        width: 82%;
        margin: -12% 0 0 auto;
    }
    .grove-skin .insight-slide.is-reversed .insight-shot-inset {
        margin: -12% 0 0 auto;
    }
}