/**
 * ZDS v1 — main stylesheet.
 *
 * Every selector is scoped under .zds-v1 (the body class added when this
 * version is active). No raw hex/px values — tokens from tokens.css only.
 * Depends on tokens.css being enqueued first (see inc/zds/enqueue.php).
 *
 * Escalation log (per Phase 1 brief — doubled scope class or !important):
 * - Headings h1-h6 (font-size + line-height, desktop and mobile):
 *   `.zds-v1 h1`..`h6` + `!important`, forced by Elementor's Kit global
 *   typography (an inline <style> targeting bare h1-h6 on every page).
 *   See section 2 for detail.
 * - Hero Split BTA title h1 (section 8): `!important`, beats section 2's own escalated `.zds-v1 h1` rule.
 */

@import './footer.css';

/* -----------------------------------------------------------------------
 * 1. Scoped reset — neutralizes bare-element bleed from Bootstrap/parent
 *    theme. Specificity 0,1,1 beats bare-element legacy rules (0,0,1).
 *    Kept conservative: only what's known to bleed from Bootstrap/hello-
 *    elementor. Extend during Phase 2 as bleed is actually observed.
 * --------------------------------------------------------------------- */

.zds-v1 {
    color: var(--zds-color-text);
    font-family: var(--zds-font-family-base);
    font-weight: var(--zds-font-weight-light);
    font-size: var(--zds-font-size-base);
    line-height: var(--zds-line-height-base);
    background-color: var(--zds-color-bg);
}

.zds-v1 h1,
.zds-v1 h2,
.zds-v1 h3,
.zds-v1 h4,
.zds-v1 h5,
.zds-v1 h6 {
    font-family: var(--zds-font-family-heading);
    font-weight: var(--zds-font-weight-bold);
    margin: 0 0 var(--zds-space-4);
}

.zds-v1 p {
    margin: 0;
}

.zds-v1 a {
    color: var(--zds-color-primary);
    text-decoration: none;
}

.zds-v1 a:hover {
    color: var(--zds-color-primary-hover);
}

.zds-v1 ul,
.zds-v1 ol {
    margin: 0 0 var(--zds-space-4);
    padding-left: var(--zds-space-5);
}

.zds-v1 button,
.zds-v1 input,
.zds-v1 select,
.zds-v1 textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.zds-v1 img,
.zds-v1 svg {
    max-width: 100%;
    height: auto;
}

.zds-v1 *,
.zds-v1 *::before,
.zds-v1 *::after {
    box-sizing: border-box;
}

/* -----------------------------------------------------------------------
 * 2. Headings — Figma "02 — Typography" defines a 6-step scale
 *    (heading/extra small … heading/display) but no component maps those
 *    steps to semantic <h1>–<h6> tags — that mapping is an ENGINEERING
 *    DECISION made here, not specified by Figma:
 *
 *      h1 = display (140px)   h4 = default (56px)
 *      h2 = lg (100px)        h5 = sm (42px)
 *      h3 = md (75px)         h6 = xs (32px)
 *
 *    md/lg/display sizes matched the documented Figma label but not the
 *    file's own rendered "Aa" sample (pinned to 72px) — confirmed by design
 *    as an authoring bug in the Figma file; 75/100/140px are correct as
 *    used here. See TOKENS.md ("Heading md/lg/display size mismatch").
 *
 *    Mobile sizes are real Figma values (heading/mobile/*), switched at the
 *    Bootstrap `md` breakpoint (768px) — see tokens.css --zds-bp-md. Custom
 *    properties can't be read in @media conditions, so the raw px is
 *    repeated here.
 *
 *    Gap: Figma defines only 5 mobile heading sizes (xs/sm/default/lg/
 *    display) vs. 6 desktop sizes — there is no "mobile/medium" step. h3
 *    (desktop md=75px) has no distinct mobile value, so it falls back to
 *    the same mobile/default size as h4 below 768px — h3 and h4 render
 *    identically on mobile. Not invented; simply not covered by the file.
 *
 *    ESCALATION (documented last resort — see log at top of file), applied
 *    to every rule below rather than kept as a separate unescalated set:
 *    Elementor's Kit global typography — a large inline <style> block
 *    Elementor injects on every page, targeting bare `h1`-`h6` with
 *    `!important` on font-size and line-height at Elementor's own
 *    breakpoints (max-width:766px / 768-1167px / min-width:1168px) — forces
 *    `!important` here too, found by inspecting actual computed styles
 *    (matched CSS rules), not by reading source alone. `.zds-v1 h1`
 *    (specificity 0,1,1) already beats the Kit's bare `h1` (0,0,1), so a
 *    single scope class is enough; no doubling needed. (`.design-v2
 *    h1/h2/h3` in assets/css/main.css was a second !important source at one
 *    point, but `design-v2` and `zds-v1` are now mutually exclusive body
 *    classes — see functions.php body_class filter — so it can no longer
 *    apply on a ZDS v1 page.)
 * --------------------------------------------------------------------- */

.zds-v1 h1 { font-size: var(--zds-heading-size-display) !important; line-height: var(--zds-heading-line-height-display) !important; }
.zds-v1 h2 { font-size: var(--zds-heading-size-lg) !important; line-height: var(--zds-heading-line-height-default) !important; }
.zds-v1 h3 { font-size: var(--zds-heading-size-md) !important; line-height: var(--zds-heading-line-height-default) !important; }
.zds-v1 h4 { font-size: var(--zds-heading-size-default) !important; line-height: var(--zds-heading-line-height-default) !important; }
.zds-v1 h5 { font-size: var(--zds-heading-size-sm) !important; line-height: var(--zds-heading-line-height) !important; }
.zds-v1 h6 { font-size: var(--zds-heading-size-xs) !important; line-height: var(--zds-heading-line-height) !important; }

@media (max-width: 767.98px) {
    .zds-v1 h1 { font-size: var(--zds-heading-size-mobile-display) !important; line-height: var(--zds-heading-line-height-display) !important; }
    .zds-v1 h2 { font-size: var(--zds-heading-size-mobile-lg) !important; line-height: var(--zds-heading-line-height) !important; }
    .zds-v1 h3 { font-size: var(--zds-heading-size-mobile-default) !important; line-height: var(--zds-heading-line-height) !important; }
    .zds-v1 h4 { font-size: var(--zds-heading-size-mobile-default) !important; line-height: var(--zds-heading-line-height) !important; }
    .zds-v1 h5 { font-size: var(--zds-heading-size-mobile-sm) !important; line-height: var(--zds-heading-line-height) !important; }
    .zds-v1 h6 { font-size: var(--zds-heading-size-mobile-xs) !important; line-height: var(--zds-heading-line-height) !important; }
}

/* Utility classes matching Figma's own scale names 1:1 — for content that
   needs a specific visual heading size independent of its semantic tag
   (e.g. a large-looking lead-in that must stay an <h3> for a11y order). */

/* ESCALATION (documented last resort — see log at top of file): same
 * `.block-title-text .block-text p` collision as section 2b below (0,2,1
 * vs. this rule's 0,2,0) — these utility classes are meant to be usable on
 * a `<p>` tag (see the note above), which is exactly what that legacy
 * selector targets, so they need the same doubled scope + explicit color. */

.zds-v1.zds-v1 .zds-heading-display { font-size: var(--zds-heading-size-display); line-height: var(--zds-heading-line-height-display); color: var(--zds-color-text); }
.zds-v1.zds-v1 .zds-heading-lg { font-size: var(--zds-heading-size-lg); line-height: var(--zds-heading-line-height-default); color: var(--zds-color-text); }
.zds-v1.zds-v1 .zds-heading-md { font-size: var(--zds-heading-size-md); line-height: var(--zds-heading-line-height-default); color: var(--zds-color-text); }
.zds-v1.zds-v1 .zds-heading-default { font-size: var(--zds-heading-size-default); line-height: var(--zds-heading-line-height-default); color: var(--zds-color-text); }
.zds-v1.zds-v1 .zds-heading-sm { font-size: var(--zds-heading-size-sm); line-height: var(--zds-heading-line-height); color: var(--zds-color-text); }
.zds-v1.zds-v1 .zds-heading-xs { font-size: var(--zds-heading-size-xs); line-height: var(--zds-heading-line-height); color: var(--zds-color-text); }

@media (max-width: 767.98px) {
    .zds-v1.zds-v1 .zds-heading-display { font-size: var(--zds-heading-size-mobile-display); }
    .zds-v1.zds-v1 .zds-heading-lg { font-size: var(--zds-heading-size-mobile-lg); }
    .zds-v1.zds-v1 .zds-heading-md,
    .zds-v1.zds-v1 .zds-heading-default { font-size: var(--zds-heading-size-mobile-default); }
    .zds-v1.zds-v1 .zds-heading-sm { font-size: var(--zds-heading-size-mobile-sm); }
    .zds-v1.zds-v1 .zds-heading-xs { font-size: var(--zds-heading-size-mobile-xs); }
}

.zds-v1.zds-v1 .zds-text-muted {
    color: var(--zds-color-text-tertiary);
}

.zds-v1 .no-wrap {
    /* Prevents line breaks inside this span */
    white-space: nowrap;
}

@media screen and (min-width: 1024px) {
    .zds-v1 .wrap-desktop-only {
        /* Desktop only: forces this element onto its own new line */
        display: block;
    }
}

@media screen and (max-width: 767px) {
    .zds-v1 .wrap-mobile-only {
        /* Mobile only: forces this element onto its own new line */
        display: block;
    }
}

.zds-v1 br.wrap-break-mobile,
.zds-v1 br.wrap-break-desktop {
    display: none;
}

@media screen and (max-width: 767px) {
    .zds-v1 br.wrap-break-mobile {
        display: inline;
    }
}

@media screen and (min-width: 768px) {
    .zds-v1 br.wrap-break-desktop {
        display: inline;
    }
}

/* -----------------------------------------------------------------------
 * 2b. Body text — Figma "02 — Typography" body/* scale (Outfit, Light by
 *     default via the `.zds-v1` base rule). `.zds-body-caption`/`-xs` have
 *     no documented mobile step in TOKENS.md, so they stay constant across
 *     viewports — only `sm`/`base`/`lg` switch at the mobile breakpoint.
 *
 *     ESCALATION (documented last resort — see log at top of file):
 *     `.block-title-text .block-text p` in section-profile-split.css
 *     (specificity 0,2,1) reuses the exact same `.block-title-text`/
 *     `.block-text` class names as the `title_and_text` ACF layout
 *     (template-parts/flexible/title_and_text.php) — an unrelated naming
 *     collision between two different page-builder layouts, not a ZDS
 *     concern to fix here. A single scope class (0,2,0) loses to it, so
 *     every rule below doubles `.zds-v1` and also restates `color` (the
 *     legacy rule hardcodes `#E3DECE`, not `--zds-color-text`).
 * --------------------------------------------------------------------- */

.zds-v1.zds-v1 .zds-body-caption { font-size: var(--zds-body-size-caption); line-height: var(--zds-body-line-height); color: var(--zds-color-text); }
.zds-v1.zds-v1 .zds-body-xs { font-size: var(--zds-body-size-xs); line-height: var(--zds-body-line-height); color: var(--zds-color-text); }
.zds-v1.zds-v1 .zds-body-sm { font-size: var(--zds-body-size-small); line-height: var(--zds-body-line-height); color: var(--zds-color-text); }
.zds-v1.zds-v1 .zds-body-base { font-size: var(--zds-body-size-base); line-height: var(--zds-body-line-height); color: var(--zds-color-text); }
.zds-v1.zds-v1 .zds-body-lg { font-size: var(--zds-body-size-large); line-height: var(--zds-body-line-height); color: var(--zds-color-text); }

.zds-v1.zds-v1 .zds-body-bold {
    font-weight: var(--zds-font-weight-semibold);
}

@media (max-width: 767.98px) {
    .zds-v1.zds-v1 .zds-body-sm { font-size: var(--zds-body-size-mobile-small); line-height: var(--zds-body-line-height-mobile); }
    .zds-v1.zds-v1 .zds-body-base { font-size: var(--zds-body-size-mobile-base); line-height: var(--zds-body-line-height-mobile); }
    .zds-v1.zds-v1 .zds-body-lg { font-size: var(--zds-body-size-mobile-large); line-height: var(--zds-body-line-height-mobile); }
}

/* -----------------------------------------------------------------------
 * 2c. Labels — Figma "02 — Typography" label/* scale (Axiforma Medium).
 *     No mobile step or bold pairing documented in TOKENS.md — sizes apply
 *     at all viewports. Same escalation as section 2b (see note there).
 * --------------------------------------------------------------------- */

.zds-v1.zds-v1 .zds-label-sm,
.zds-v1.zds-v1 .zds-label-md,
.zds-v1.zds-v1 .zds-label-lg {
    font-family: var(--zds-font-family-heading);
    font-weight: var(--zds-font-weight-medium);
    line-height: var(--zds-label-line-height);
    color: var(--zds-color-text);
}

.zds-v1.zds-v1 .zds-label-sm { font-size: var(--zds-label-size-sm); }
.zds-v1.zds-v1 .zds-label-md { font-size: var(--zds-label-size-md); }
.zds-v1.zds-v1 .zds-label-lg { font-size: var(--zds-label-size-lg); }

/* -----------------------------------------------------------------------
 * 2d. Overline — Figma "02 — Typography" overline/* scale (Axiforma
 *     Medium). TOKENS.md documents size and letter-spacing only — no
 *     text-transform is specified, so uppercase is NOT applied here;
 *     confirm with design before adding it. Same escalation as 2b/2c.
 * --------------------------------------------------------------------- */

.zds-v1.zds-v1 .zds-overline,
.zds-v1.zds-v1 .zds-overline-lg {
    font-family: var(--zds-font-family-heading);
    font-weight: var(--zds-font-weight-medium);
    line-height: var(--zds-overline-line-height);
    color: var(--zds-color-text);
}

.zds-v1.zds-v1 .zds-overline { font-size: var(--zds-overline-size-default); letter-spacing: var(--zds-overline-tracking-default); }
.zds-v1.zds-v1 .zds-overline-lg { font-size: var(--zds-overline-size-large); letter-spacing: var(--zds-overline-tracking-large); }

@media (max-width: 767.98px) {
    .zds-v1.zds-v1 .zds-overline,
    .zds-v1.zds-v1 .zds-overline-lg {
        font-size: var(--zds-overline-size-mobile);
        letter-spacing: var(--zds-overline-tracking-mobile);
    }
}

/* -----------------------------------------------------------------------
 * 3. Layout primitive — zds-container.
 * --------------------------------------------------------------------- */

.zds-v1 .zds-container {
    width: 100%;
    max-width: var(--zds-container-max-width);
    margin-inline: auto;
    padding-inline: var(--zds-container-padding-inline);
}

@media screen and (max-width: 767px) {
    .zds-v1 .zds-container {
        padding-inline: var(--zds-space-4);
    }
}

/* -----------------------------------------------------------------------
 * 3a. Glass card — reusable "frosted glass" surface (blurred bg + inner
 *     shadow + soft gradient rim border). Seen on cta-banner-v2-left-glass
 *     and comparison-teams-cell--head; consolidated here so any future
 *     glass-style surface can reuse it instead of re-deriving the same
 *     three effects per component.
 *
 *     `.zds-glass-card` sets the background/blur/inner-shadow on the
 *     element itself. The border needs a separate `::after` (or `::before`)
 *     pseudo-element per component, since `border-radius` differs and a
 *     gradient border requires a masked pseudo-element — apply
 *     `.zds-glass-card-border` to that pseudo-element's selector and set
 *     `border-radius` to match the parent.
 * --------------------------------------------------------------------- */

.zds-v1 .zds-glass-card {
    position: relative;
    background: var(--zds-glass-card-bg-neutral);
    backdrop-filter: blur(var(--zds-glass-blur));
    -webkit-backdrop-filter: blur(var(--zds-glass-blur));
    box-shadow: var(--zds-glass-inner-shadow);
}

.zds-v1 .zds-glass-card-border {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    background: var(--zds-glass-card-border-neutral);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* -----------------------------------------------------------------------
 * 3b. Shadows / Elevation — Figma "05 — Effects" scale. Card/popover/modal/
 *     tooltip are surface elevation; the `zds-ring-focus-*` set is a
 *     focus-ring treatment for non-button interactive elements (inputs,
 *     cards, etc. — buttons get their own focus shadow via section 4).
 * --------------------------------------------------------------------- */

.zds-v1 .zds-shadow-card-xs { box-shadow: var(--zds-shadow-card-xs); }
.zds-v1 .zds-shadow-card-sm { box-shadow: var(--zds-shadow-card-sm); }
.zds-v1 .zds-shadow-card-md { box-shadow: var(--zds-shadow-card-md); }
.zds-v1 .zds-shadow-card-lg { box-shadow: var(--zds-shadow-card-lg); }
.zds-v1 .zds-shadow-card-xl { box-shadow: var(--zds-shadow-card-xl); }
.zds-v1 .zds-shadow-popover { box-shadow: var(--zds-shadow-popover); }
.zds-v1 .zds-shadow-modal { box-shadow: var(--zds-shadow-modal); }
.zds-v1 .zds-shadow-tooltip { box-shadow: var(--zds-shadow-tooltip); }

.zds-v1 .zds-ring-focus-green { box-shadow: var(--zds-ring-focus-green); }
.zds-v1 .zds-ring-focus-lime { box-shadow: var(--zds-ring-focus-lime); }
.zds-v1 .zds-ring-focus-neutral { box-shadow: var(--zds-ring-focus-neutral); }
.zds-v1 .zds-ring-focus-error { box-shadow: var(--zds-ring-focus-error); }

/* Ambient glow (05 — Effects, glow/*) — a soft ambient halo, distinct from
 * the hard-edged `zds-ring-focus-*` rings above (those are keyline focus
 * indicators; these are decorative background glow). */

.zds-v1 .zds-glow-green { box-shadow: var(--zds-glow-green); }
.zds-v1 .zds-glow-lime { box-shadow: var(--zds-glow-lime); }
.zds-v1 .zds-glow-hero { box-shadow: var(--zds-glow-hero); }

/* Glass effect (05 — Effects, Frame/Glass/*) — split into two composable
 * pieces (`-blur`/`-inner-shadow`) plus `.zds-glass` applying both, matching
 * the Figma "Elevation" swatch which is the two combined, not a third
 * distinct value. `backdrop-filter` needs a `-webkit-` prefix for Safari. */

.zds-v1 .zds-glass-blur {
    backdrop-filter: blur(var(--zds-glass-blur));
    -webkit-backdrop-filter: blur(var(--zds-glass-blur));
}

.zds-v1 .zds-glass-inner-shadow {
    box-shadow: var(--zds-glass-inner-shadow);
}

.zds-v1 .zds-glass {
    backdrop-filter: blur(var(--zds-glass-blur));
    -webkit-backdrop-filter: blur(var(--zds-glass-blur));
    box-shadow: var(--zds-glass-inner-shadow);
}

/* "07 — Frame Cards" component — narrower blur than `.zds-glass` above (own
   `--zds-glass-card-blur` token; two readouts of the same Figma node
   disagreed 17.5px vs 35px, the CSS-export half is trusted). In-flow content
   card (`position: relative`, own size), not the absolutely-positioned
   inset:0 layer the Copy-as-CSS export implied — that came from Figma's
   position-in-frame metadata, same artifact every button paste also had to
   be stripped of.
   The defining feature is a 3px gradient rim border, added via a masked
   `::before` (same technique as `.btn-white-dark-bg.btn-primary:active`
   above) rather than `border-image` (incompatible with `border-radius`) or
   the background-clip trick Yellow's button border uses (breaks on these
   semi-transparent 0.03–0.1 alpha fills — the gradient would show through
   the card interior, not just the ring). */
.zds-v1 .zds-glass-card {
    position: relative;
    box-sizing: border-box;
    border-radius: var(--zds-radius-lg);
    backdrop-filter: blur(var(--zds-glass-card-blur));
    -webkit-backdrop-filter: blur(var(--zds-glass-card-blur));
    box-shadow: var(--zds-glass-inner-shadow);
}

.zds-v1 .zds-glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 3px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.zds-v1 .zds-glass-card-neutral { background: var(--zds-glass-card-bg-neutral); }
.zds-v1 .zds-glass-card-neutral::before { background: var(--zds-glass-card-border-neutral); }

.zds-v1 .zds-glass-card-lime { background: var(--zds-glass-card-bg-lime); }
.zds-v1 .zds-glass-card-lime::before { background: var(--zds-glass-card-border-lime); }

.zds-v1 .zds-glass-card-mint-light { background: var(--zds-glass-card-bg-mint-light); }
.zds-v1 .zds-glass-card-mint-light::before,
.zds-v1 .zds-glass-card-mint::before { background: var(--zds-glass-card-border-neutral); }

.zds-v1 .zds-glass-card-mint { background: var(--zds-glass-card-bg-mint); }

/* Square view: only the radius changes (0 vs the default `--zds-radius-lg`
   pill-adjacent 12px) — background, border gradient, blur, and shadow are
   all identical to rounded, confirmed for neutral and lime. */
.zds-v1 .zds-glass-card-square { border-radius: 0; }

/* -----------------------------------------------------------------------
 * 4. Buttons — DOCUMENTED EXCEPTION to the zds- prefix rule.
 *
 *    Content already authored via the theme's TinyMCE "Insert Button" tool
 *    (assets/js/admin/tinymce-custom-button.js, inc/acf/editor-custom-button.php)
 *    outputs `<a class="btn btn-{size} btn-{variant} btn-{color} [btn-{view}]
 *    [btn-disabled]">`. Styling a new `zds-btn` instead would silently not
 *    apply to any existing content, so `.btn…` is styled directly here.
 *
 *    Specificity: `.zds-v1 .btn-primary` is (0,2,0), which beats bare
 *    Bootstrap `.btn-primary` (0,1,0) without !important or doubled scope.
 *
 *    State semantics (per explicit clarification, not guessed):
 *      default  = no interaction
 *      hover    = mouse hovering the button
 *      active   = while clicking/pressing (`:active`)
 *      focus    = keyboard navigation only, via `:focus-visible` (not plain
 *                 `:focus`). Plain `:focus` was used originally so the same
 *                 style also covered mouse clicks, but that left `target=
 *                 "_blank"` links visibly "stuck" in the focus style after
 *                 the click opened a new tab, since focus doesn't clear when
 *                 focus moves to a different tab. `:focus-visible` doesn't
 *                 match on mouse click in Chrome for `<a>` elements, which is
 *                 now the wanted behavior — mouse clicks get their momentary
 *                 feedback from `:active` above instead.
 *      disabled = `[disabled]` / `[aria-disabled="true"]` / `.btn-disabled`
 *
 *    Source: full Size(sm/lg/xl) × Type(primary/secondary/text) ×
 *    State(default/hover/pressed/focus/disabled) matrices, read directly from
 *    FOUR Figma master component sets — all four colors are now fully
 *    confirmed, no remaining color gaps:
 *      - node 1243:863 "Button/dark BG/yellow/square"  (Yellow)
 *      - node 1243:659 "Button/dark BG/white/square"   (White)
 *      - node 1243:761 "Button/dark BG/green/square"   (Green)
 *      - node 1292:533 "Button/light BG/bw/square"     (White-Light)
 *    Every custom property below is deliberately per-TYPE
 *    (primary/secondary/text) AND per-state (including separate `-focus` and
 *    `-pressed` variants, not reused from hover), because the four colors
 *    each diverge in non-obvious ways:
 *      - Which shade FOCUS reuses for background differs per color: White's
 *        focus bg = its hover shade; Yellow's = its pressed shade; Green's =
 *        its OWN DEFAULT shade (reverts, doesn't advance). Naively reusing
 *        one shared "-hover" property for focus (the first pass's approach)
 *        was wrong for most colors.
 *      - Green's secondary/text FOCUS TEXT color (#55eda6,
 *        --zds-color-mint-focus-text) does NOT match its focus BORDER color
 *        (mint) — the other three colors keep border/text identical at
 *        focus, so this asymmetry is Green-specific, confirmed real (and
 *        verified live in-browser after the CSS transition settles).
 *      - Primary/secondary get a real box/drop-shadow on pressed for Green,
 *        White, and White-Light (reusing their own "hover shadow" token) but
 *        NOT for Yellow (no shadow documented on Yellow's large pressed
 *        variants).
 *      - White-Light's `text` variant gets a real background + border on
 *        hover/pressed (`--btn-text-bg-*`, `--btn-text-border-pressed`,
 *        `--btn-text-shadow-pressed`) — the other three colors' `text`
 *        variant stays background-free at every state (those properties are
 *        `transparent`/`none` for them).
 *      - White-Light's primary FOCUS ring uses the WHITE/cream shadow token,
 *        not the black one every other state on this color uses — a light
 *        ring reads better against this button's own light-bg context.
 *
 *    Corrections vs. the Phase 2 first pass (see TOKENS.md for detail):
 *    - `xl` IS a real Figma size (56px), not extrapolated as first assumed —
 *      but it uses different typography (Axiforma Regular 18px/1.5, not
 *      Medium 16px/1.3) and the SAME horizontal padding as sm/lg (32px, not
 *      the enlarged 40px guessed earlier).
 *    - White's primary is NOT a solid cream button with dark text (my first
 *      pass's "fix" for the broken Figma variable was wrong). The real
 *      design is a translucent glass button: bg is cream at 10%/20% opacity
 *      (default/hover), fully transparent + a solid cream border on pressed/
 *      focus, with solid cream TEXT throughout — the original Figma variable
 *      bug was in the variable binding, not the visual design.
 *    - Primary gets a visible 2px border on pressed/focus (both Yellow and
 *      White show this) — missing from the first pass entirely.
 *    - Disabled is a translucent color overlay (bg/text opacity), not a flat
 *      opacity filter on the whole button.
 *    - `text` variant's focus state is a 2px bottom border under the label,
 *      not an outline; hover/pressed are pure color/opacity changes, no
 *      underline.
 *    - `.design-v2 .btn-dark-bg` in assets/css/main.css is a DIFFERENT,
 *      pre-existing legacy button class (different name) — no collision
 *      with `.btn` here, left untouched.
 *
 *    All four colors have a complete, Figma-confirmed state matrix — no
 *    remaining color gaps (see TOKENS.md for the full findings log).
 * --------------------------------------------------------------------- */

.zds-v1 .btn {
    --zds-btn-gap: var(--zds-btn-gap-lg);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--zds-btn-gap);
    font-family: var(--zds-font-family-button);
    font-weight: var(--zds-font-weight-button);
    font-size: var(--zds-font-size-button);
    line-height: var(--zds-line-height-button);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    /* Vertical sizing comes entirely from `height` on .btn-sm/-lg/-xl plus
       this flex centering — padding-block is owned here (not left to
       Bootstrap's `--bs-btn-padding-y`, which would otherwise silently
       apply 4/8/6px depending on which Bootstrap class name we happen to
       collide with, since `.btn`/`.btn-sm`/`.btn-lg` are also Bootstrap's
       own class names).
       The 4px/0 split (not 2px/2px) is a deliberate +2px visual nudge: with
       align-items:center, an asymmetric top/bottom padding shifts centered
       content by half the difference — confirmed by eye against the Figma
       reference, not derived from a Figma value. */
    padding-top: 4px;
    padding-bottom: 0;
    /* Native <button> reset — irrelevant for <a>, but a real `<button>`
       (see the TinyMCE tool) otherwise ships UA-default margin/appearance
       that the explicit background/border rules below don't fully strip
       in every browser. */
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

/* border-radius is split into its own doubled-scope rule: at (0,2,0) it
   ties on class-count with Elementor Kit's `.elementor-kit-6 button:hover`
   (0,2,1), which then wins the tie via its extra `button` element selector
   and flattens ALL buttons (not just `.btn-rounded`) to square corners on
   hover — confirmed live on a real `<button>`. Same root cause as the
   `.btn.btn-rounded` and `.btn.btn-text[disabled]` fixes above/below. */
.zds-v1.zds-v1 .btn {
    border-radius: var(--zds-radius-sm);
}

/* ---- Sizes (all three are real Figma values) ---- */

.zds-v1 .btn-sm {
    --zds-btn-gap: var(--zds-btn-gap-sm);
    height: 40px;
    padding-inline: var(--zds-space-8);
}

.zds-v1 .btn-lg {
    --zds-btn-gap: var(--zds-btn-gap-lg);
    height: 48px;
    padding-inline: var(--zds-space-8);
}

.zds-v1 .btn-xl {
    --zds-btn-gap: var(--zds-btn-gap-xl);
    height: 56px;
    padding-inline: var(--zds-space-8);
    font-size: var(--zds-font-size-button-xl);
    font-weight: var(--zds-font-weight-button-xl);
    line-height: var(--zds-line-height-button-xl);
}

/* text variant: inline padding only — block padding left to base `.btn`'s nudge, see TOKENS.md */
.zds-v1 .btn-text {
    padding-inline: var(--zds-space-8);
}

/* ---- Views ---- */

/* Doubled scope (`.btn.btn-rounded`, not just `.btn-rounded`) is required:
   at (0,2,0) it ties on class-count with Elementor Kit's
   `.elementor-kit-6 button:hover` (0,2,1), which then wins the tie via its
   extra `button` element selector and flattens the corners to 0 on hover —
   confirmed live on a real `<button>`. (0,3,0) here settles it outright. */
.zds-v1 .btn.btn-rounded {
    border-radius: var(--zds-radius-full);
}

.zds-v1 .btn-deprecated {
    opacity: 0.85;
    filter: grayscale(15%);
}

/* ---- Colors — each sets local custom properties consumed by the variant
   rules below. Every property is per-type (primary/secondary/text). ---- */

.zds-v1 .btn-yellow {
    --btn-primary-bg: var(--zds-color-lime);
    --btn-primary-bg-hover: var(--zds-color-lime-hover);
    --btn-primary-bg-pressed: var(--zds-color-lime-pressed);
    --btn-primary-bg-focus: var(--zds-color-lime-pressed);
    --btn-primary-bg-disabled: rgba(218, 252, 133, 0.1);
    --btn-primary-text: var(--zds-color-dark-green);
    --btn-primary-text-hover: var(--zds-color-deep-green);
    --btn-primary-text-disabled: rgba(218, 252, 133, 0.3);
    --btn-primary-border-pressed: var(--zds-color-lime-border-focus);
    --btn-primary-border-focus: var(--zds-color-lime-border-focus);
    --btn-primary-shadow-pressed: var(--zds-shadow-button-hover-yellow);
    --btn-primary-shadow-focus: var(--zds-shadow-button-focus-yellow);

    --btn-secondary-border: var(--zds-color-lime);
    --btn-secondary-border-hover: var(--zds-color-lime-hover);
    --btn-secondary-border-pressed: var(--zds-color-lime-pressed);
    --btn-secondary-border-focus: var(--zds-color-lime);
    --btn-secondary-border-disabled: rgba(218, 252, 133, 0.3);
    --btn-secondary-text-focus: var(--zds-color-lime);
    --btn-secondary-bg-hover: rgba(200, 249, 79, 0.2);
    --btn-secondary-bg-pressed: rgba(218, 252, 133, 0.1);
    --btn-secondary-bg-focus: rgba(218, 252, 133, 0.1);
    --btn-secondary-bg-disabled: rgba(218, 252, 133, 0.1);
    --btn-secondary-shadow-pressed: var(--zds-shadow-button-hover-yellow);
    --btn-secondary-shadow-focus: var(--zds-shadow-button-focus-yellow);

    --btn-text-color: var(--zds-color-lime);
    --btn-text-color-hover: var(--zds-color-lime-hover);
    --btn-text-color-pressed: var(--zds-color-lime-pressed);
    --btn-text-color-focus: var(--zds-color-lime);
    --btn-text-color-disabled: rgba(218, 252, 133, 0.3);
    --btn-text-bg-hover: transparent;
    --btn-text-bg-pressed: transparent;
    --btn-text-border-pressed: transparent;
    --btn-text-shadow-pressed: none;
}

/* White — full matrix from node 1243:659. Every state is the SAME base
   color (--zds-color-cream) at different opacities, not distinct hues. */
.zds-v1 .btn-white-dark-bg {
    --btn-primary-bg: rgba(255, 251, 237, 0.1);
    --btn-primary-bg-hover: rgba(255, 251, 237, 0.2);
    --btn-primary-bg-pressed: rgba(255, 251, 237, 0);
    --btn-primary-bg-focus: rgba(255, 251, 237, 0.2);
    --btn-primary-bg-disabled: rgba(255, 251, 237, 0.1);
    --btn-primary-text: var(--zds-color-cream);
    --btn-primary-text-hover: var(--zds-color-cream);
    --btn-primary-text-disabled: rgba(255, 251, 237, 0.4);
    --btn-primary-border-pressed: var(--zds-color-cream);
    --btn-primary-border-focus: var(--zds-color-cream);
    --btn-primary-shadow-pressed: var(--zds-shadow-button-hover-white);
    --btn-primary-shadow-focus: var(--zds-shadow-button-focus-white);

    --btn-secondary-border: var(--zds-color-cream);
    --btn-secondary-border-hover: rgba(255, 251, 237, 0.7);
    --btn-secondary-border-pressed: rgba(255, 251, 237, 0.5);
    --btn-secondary-border-focus: var(--zds-color-cream);
    --btn-secondary-border-disabled: rgba(255, 251, 237, 0.3);
    --btn-secondary-text-focus: var(--zds-color-cream);
    --btn-secondary-bg-hover: rgba(255, 251, 237, 0.36);
    --btn-secondary-bg-pressed: rgba(255, 251, 237, 0.2);
    --btn-secondary-bg-focus: rgba(255, 251, 237, 0.2);
    --btn-secondary-bg-disabled: rgba(255, 251, 237, 0.1);
    --btn-secondary-shadow-pressed: var(--zds-shadow-button-hover-white);
    --btn-secondary-shadow-focus: var(--zds-shadow-button-focus-white);

    --btn-text-color: var(--zds-color-cream);
    --btn-text-color-hover: rgba(255, 251, 237, 0.7);
    --btn-text-color-pressed: rgba(255, 251, 237, 0.5);
    --btn-text-color-focus: var(--zds-color-cream);
    --btn-text-color-disabled: rgba(255, 251, 237, 0.4);
    /* Unlike Yellow/Green, White's `text` variant gets a real background on
       hover/pressed (matching White-Light's own text treatment below) —
       Figma-confirmed on square, not just `.btn-rounded` (see the removed
       rounded-only override this replaces). */
    --btn-text-bg-hover: rgba(255, 251, 237, 0.2);
    --btn-text-bg-pressed: rgba(255, 251, 237, 0.2);
    --btn-text-border-pressed: var(--zds-color-cream);
    --btn-text-shadow-pressed: var(--zds-shadow-button-hover-white);
}

/* Green — full matrix from node 1243:761. Unique among the three confirmed
   colors: focus BACKGROUND reverts to the default shade (not hover/pressed
   like Yellow/White each do differently), and secondary/text FOCUS TEXT uses
   a third, distinct shade (--zds-color-mint-focus-text, #55eda6) that does
   NOT match the focus border color — confirmed real, not a mistake. */
.zds-v1 .btn-green {
    --btn-primary-bg: var(--zds-color-mint);
    --btn-primary-bg-hover: var(--zds-color-mint-bright);
    --btn-primary-bg-pressed: var(--zds-color-mint-bright);
    --btn-primary-bg-focus: var(--zds-color-mint);
    --btn-primary-bg-disabled: rgba(92, 207, 154, 0.1);
    --btn-primary-text: var(--zds-color-deep-green);
    --btn-primary-text-hover: var(--zds-color-deep-green);
    --btn-primary-text-disabled: rgba(92, 207, 154, 0.3);
    --btn-primary-border-pressed: var(--zds-color-mint-border-pressed);
    --btn-primary-border-focus: var(--zds-color-mint-bright);
    --btn-primary-shadow-pressed: var(--zds-shadow-button-hover-green);
    --btn-primary-shadow-focus: var(--zds-shadow-button-focus-green);

    --btn-secondary-border: var(--zds-color-mint);
    --btn-secondary-border-hover: var(--zds-color-mint-bright);
    --btn-secondary-border-pressed: var(--zds-color-mint-bright);
    --btn-secondary-border-focus: var(--zds-color-mint);
    --btn-secondary-border-disabled: rgba(92, 207, 154, 0.3);
    --btn-secondary-text-focus: var(--zds-color-mint-focus-text);
    --btn-secondary-bg-hover: rgba(85, 237, 166, 0.36);
    --btn-secondary-bg-pressed: rgba(85, 237, 166, 0.2);
    --btn-secondary-bg-focus: rgba(85, 237, 166, 0.2);
    --btn-secondary-bg-disabled: rgba(92, 207, 154, 0.1);
    --btn-secondary-shadow-pressed: var(--zds-shadow-button-hover-green);
    --btn-secondary-shadow-focus: var(--zds-shadow-button-focus-green);

    --btn-text-color: var(--zds-color-mint);
    --btn-text-color-hover: var(--zds-color-mint-bright);
    --btn-text-color-pressed: var(--zds-color-mint-bright);
    --btn-text-color-focus: var(--zds-color-mint-focus-text);
    --btn-text-color-disabled: rgba(92, 207, 154, 0.3);
    --btn-text-bg-hover: transparent;
    --btn-text-bg-pressed: transparent;
    --btn-text-border-pressed: transparent;
    --btn-text-shadow-pressed: none;
}

/* White-Light (BW, light-bg variant) — full matrix from node 1292:533. Same
   "one hue, opacity progression" pattern as White (deep-green throughout,
   solid text at every state). Two things unique to this color:
   - Primary FOCUS ring is the WHITE/cream shadow token, not black — a light
     ring reads better against this button's own light-bg context, unlike
     every other state on this color which uses the black/dark shadow token.
   - The `text` variant gets a real background + border on hover/pressed
     (bg .1/.2 tint, pressed adds a solid border) — every other color's text
     variant stays background-free at every state. Needs its own
     `--btn-text-bg-*`/`--btn-text-border-pressed` properties (transparent/
     none for Yellow/White/Green). */
.zds-v1 .btn-white-light-bg {
    --btn-primary-bg: var(--zds-overlay-deep-green-10);
    --btn-primary-bg-hover: var(--zds-overlay-deep-green-20);
    --btn-primary-bg-pressed: rgba(17, 34, 30, 0);
    --btn-primary-bg-focus: var(--zds-overlay-deep-green-20);
    --btn-primary-bg-disabled: rgba(17, 34, 30, 0.1);
    --btn-primary-text: var(--zds-color-deep-green);
    --btn-primary-text-hover: var(--zds-color-deep-green);
    --btn-primary-text-disabled: rgba(17, 34, 30, 0.4);
    --btn-primary-border-pressed: var(--zds-color-deep-green);
    --btn-primary-border-focus: var(--zds-color-deep-green);
    --btn-primary-shadow-pressed: var(--zds-shadow-button-hover-black);
    --btn-primary-shadow-focus: var(--zds-shadow-button-focus-white);

    --btn-secondary-border: var(--zds-color-deep-green);
    --btn-secondary-border-hover: rgba(17, 34, 30, 0.7);
    --btn-secondary-border-pressed: rgba(17, 34, 30, 0.5);
    --btn-secondary-border-focus: var(--zds-color-deep-green);
    --btn-secondary-border-disabled: rgba(17, 34, 30, 0.3);
    --btn-secondary-text-focus: var(--zds-color-deep-green);
    --btn-secondary-bg-hover: rgba(17, 34, 30, 0.36);
    --btn-secondary-bg-pressed: var(--zds-overlay-deep-green-20);
    --btn-secondary-bg-focus: var(--zds-overlay-deep-green-20);
    --btn-secondary-bg-disabled: rgba(17, 34, 30, 0.1);
    --btn-secondary-shadow-pressed: var(--zds-shadow-button-hover-black);
    --btn-secondary-shadow-focus: var(--zds-shadow-button-focus-black);

    --btn-text-color: var(--zds-color-deep-green);
    --btn-text-color-hover: rgba(17, 34, 30, 0.7);
    --btn-text-color-pressed: rgba(17, 34, 30, 0.5);
    --btn-text-color-focus: var(--zds-color-deep-green);
    --btn-text-color-disabled: rgba(17, 34, 30, 0.4);
    --btn-text-bg-hover: var(--zds-overlay-deep-green-10);
    --btn-text-bg-pressed: var(--zds-overlay-deep-green-20);
    --btn-text-border-pressed: var(--zds-color-deep-green);
    --btn-text-shadow-pressed: var(--zds-shadow-button-hover-white);
}

/* ---- Variants (consume the color custom properties above) ---- */

.zds-v1 .btn-primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.zds-v1 .btn-primary:hover:not([disabled]):not([aria-disabled="true"]) {
    background-color: var(--btn-primary-bg-hover);
    color: var(--btn-primary-text-hover);
    /* Bootstrap's own `.btn:hover` sets a border-color (its default blue);
       primary's border stays transparent until :active/:focus, so this must
       be declared explicitly or Bootstrap's rule wins that property. */
    border-color: transparent;
}

.zds-v1 .btn-primary:active:not([disabled]):not([aria-disabled="true"]) {
    background-color: var(--btn-primary-bg-pressed);
    border-color: var(--btn-primary-border-pressed);
    color: var(--btn-primary-text-hover);
    box-shadow: var(--btn-primary-shadow-pressed);
}

.zds-v1 .btn-primary:focus-visible:not([disabled]):not([aria-disabled="true"]) {
    background-color: var(--btn-primary-bg-focus);
    border-color: var(--btn-primary-border-focus);
    color: var(--btn-primary-text-hover);
    box-shadow: var(--btn-primary-shadow-focus);
    outline: none;
}

/* Yellow primary's pressed/focus border is a gradient (--zds-color-lime-
   border-gradient), confirmed via Figma inspect panel — not the flat color
   every other state/color uses. border-image can't be combined with
   border-radius, so this uses the background-clip two-layer trick instead:
   a solid layer clipped to padding-box (the button's own fill) sits under
   a gradient layer clipped to border-box, with the real border set to
   transparent so only the gradient shows through the 2px ring. */
.zds-v1 .btn-yellow.btn-primary:active:not([disabled]):not([aria-disabled="true"]) {
    border-color: transparent;
    background-image: linear-gradient(var(--btn-primary-bg-pressed), var(--btn-primary-bg-pressed)), var(--zds-color-lime-border-gradient);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.zds-v1 .btn-yellow.btn-primary:focus-visible:not([disabled]):not([aria-disabled="true"]) {
    border-color: transparent;
    background-image: linear-gradient(var(--btn-primary-bg-focus), var(--btn-primary-bg-focus)), var(--zds-color-lime-border-gradient);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* White primary pressed border is a gradient too, only on :active (focus
   stays flat). Uses a mask ::before instead of Yellow's background-clip
   trick because White's pressed fill is transparent. */
.zds-v1 .btn-white-dark-bg.btn-primary:active:not([disabled]):not([aria-disabled="true"]) {
    border-color: transparent;
}

.zds-v1 .btn-white-dark-bg.btn-primary:active:not([disabled]):not([aria-disabled="true"])::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: var(--zds-color-cream-border-gradient);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Green primary pressed border is a gradient too (--zds-color-mint-border-
   gradient). Fill is opaque, so Yellow's background-clip trick applies. */
.zds-v1 .btn-green.btn-primary:active:not([disabled]):not([aria-disabled="true"]) {
    border-color: transparent;
    background-image: linear-gradient(var(--btn-primary-bg-pressed), var(--btn-primary-bg-pressed)), var(--zds-color-mint-border-gradient);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.zds-v1 .btn-secondary {
    background-color: transparent;
    border-color: var(--btn-secondary-border);
    color: var(--btn-secondary-border);
}

.zds-v1 .btn-secondary:hover:not([disabled]):not([aria-disabled="true"]) {
    background-color: var(--btn-secondary-bg-hover);
    border-color: var(--btn-secondary-border-hover);
    color: var(--btn-secondary-border-hover);
}

.zds-v1 .btn-secondary:active:not([disabled]):not([aria-disabled="true"]) {
    background-color: var(--btn-secondary-bg-pressed);
    border-color: var(--btn-secondary-border-pressed);
    color: var(--btn-secondary-border-pressed);
    box-shadow: var(--btn-secondary-shadow-pressed);
}

.zds-v1 .btn-secondary:focus-visible:not([disabled]):not([aria-disabled="true"]) {
    background-color: var(--btn-secondary-bg-focus);
    border-color: var(--btn-secondary-border-focus);
    color: var(--btn-secondary-text-focus);
    box-shadow: var(--btn-secondary-shadow-focus);
    outline: none;
}

.zds-v1 .btn-text {
    background-color: transparent;
    color: var(--btn-text-color);
}

.zds-v1 .btn-text:hover:not([disabled]):not([aria-disabled="true"]) {
    background-color: var(--btn-text-bg-hover);
    color: var(--btn-text-color-hover);
    /* Same Bootstrap `.btn:hover` border-color leak as .btn-primary above. */
    border-color: transparent;
}

.zds-v1 .btn-text:active:not([disabled]):not([aria-disabled="true"]) {
    background-color: var(--btn-text-bg-pressed);
    border-color: var(--btn-text-border-pressed);
    color: var(--btn-text-color-pressed);
    box-shadow: var(--btn-text-shadow-pressed);
}

/* border-radius: 0 keeps the focus underline flat even when `.btn-rounded`
   is present — Figma-confirmed at every size/color the focus box has no
   radius (a plain rectangle), unlike `.btn-rounded`'s pill radius, which
   would otherwise bleed into `border-bottom` and curve it at the ends.
   Doesn't touch White's hover/pressed background (--btn-text-bg-* above)
   since :focus is a distinct state. */
.zds-v1 .btn-text:focus-visible:not([disabled]):not([aria-disabled="true"]) {
    background-color: transparent;
    color: var(--btn-text-color-focus);
    border-bottom: 2px solid var(--btn-text-color-focus);
    border-radius: 0;
    outline: none;
}

/* ---- Disabled — real Figma treatment: translucent bg/text, not opacity.
 *
 *    `[disabled]` targets real `<button disabled>` — the browser already
 *    blocks clicks/focus/keyboard natively, so `pointer-events` is left at
 *    its default `auto` here, which is what makes `cursor: not-allowed`
 *    actually render on hover. (`pointer-events: none` would remove the
 *    element from hit-testing entirely — confirmed live via
 *    `elementFromPoint()` — and the cursor would silently never show,
 *    even though the CSSOM would still report the value.)
 *
 *    `[aria-disabled="true"]` / `.btn-disabled` cover the legacy `<a>`
 *    case (anchors have no real `disabled`), where `pointer-events: none`
 *    is still the only way to block clicks — accepting that the cursor
 *    won't render correctly there, same trade-off as before. New buttons
 *    authored via the TinyMCE tool are real `<button>`s and hit the first
 *    rule instead.
 *
 *    `.btn`/`.btn-primary`/`.btn-secondary` are also real Bootstrap class
 *    names, and Bootstrap 5 ships its own `.btn:disabled` rule setting
 *    `pointer-events: none` and `opacity: 0.65` — confirmed live (computed
 *    style showed exactly those values) because our `[disabled]` rules
 *    below didn't declare either property, so nothing here competed with
 *    Bootstrap's for them; higher specificity elsewhere doesn't help when
 *    the property itself is only ever set by one side. Both are declared
 *    explicitly now to win outright. ---- */

.zds-v1 .btn.btn-primary[disabled] {
    background-color: var(--btn-primary-bg-disabled);
    color: var(--btn-primary-text-disabled);
    /* Same Bootstrap `.btn-primary` border-color leak as :hover/:active/
       :focus above — must be declared explicitly or Bootstrap's blue wins. */
    border-color: transparent;
    pointer-events: auto;
    opacity: 1;
    cursor: not-allowed;
}

.zds-v1 .btn.btn-primary[aria-disabled="true"],
.zds-v1 .btn.btn-primary.btn-disabled {
    background-color: var(--btn-primary-bg-disabled);
    color: var(--btn-primary-text-disabled);
    border-color: transparent;
    pointer-events: none;
    cursor: not-allowed;
}

.zds-v1 .btn.btn-secondary[disabled] {
    background-color: var(--btn-secondary-bg-disabled);
    border-color: var(--btn-secondary-border-disabled);
    color: var(--btn-secondary-border-disabled);
    pointer-events: auto;
    opacity: 1;
    cursor: not-allowed;
}

.zds-v1 .btn.btn-secondary[aria-disabled="true"],
.zds-v1 .btn.btn-secondary.btn-disabled {
    background-color: var(--btn-secondary-bg-disabled);
    border-color: var(--btn-secondary-border-disabled);
    color: var(--btn-secondary-border-disabled);
    pointer-events: none;
    cursor: not-allowed;
}

/* `background-color: transparent` is explicit here (not left to the base
   `.btn-text` rule) because `.btn-text` alone is only (0,2,0) — tied on
   class count with Elementor Kit's `.elementor-kit-6 button:hover` (0,2,1),
   which then wins the tie via its extra `button` element selector. Primary/
   secondary don't have this problem since their disabled rules already set
   background-color explicitly. Confirmed live: without this, a real
   `<button disabled>` text-variant button shows Elementor's accent teal on
   hover despite `:not([disabled])` correctly excluding it from our own
   hover rule. */
.zds-v1 .btn.btn-text[disabled] {
    background-color: transparent;
    color: var(--btn-text-color-disabled);
    pointer-events: auto;
    opacity: 1;
    cursor: not-allowed;
}

.zds-v1 .btn.btn-text[aria-disabled="true"],
.zds-v1 .btn.btn-text.btn-disabled {
    background-color: transparent;
    color: var(--btn-text-color-disabled);
    pointer-events: none;
    cursor: not-allowed;
}

/* -----------------------------------------------------------------------
 * 5. Media button — circular play/pause control.
 *
 *    A genuinely NEW component, unrelated to the .btn text-button system —
 *    no existing theme convention uses a "play-btn"/"pause-btn" class
 *    (confirmed via grep across the theme's PHP/JS/CSS), so this follows
 *    the normal zds- prefix rule with no exception needed.
 *
 *    Originally built from Figma's "Play" component (node 3017:2374 "Play
 *    Yellow", node 3017:2399 "Play Green") and RENAMED from `.zds-play-btn`
 *    to `.zds-media-btn` after reading node 3406:2571 "Pause Green": the
 *    Pause component is visually and interactively IDENTICAL (same circle/
 *    border/bg/shadow tokens, same hover/active behavior) — only the icon
 *    differs. One shared shell avoids duplicating this CSS for a second
 *    component.
 *
 *    MARKUP — one child span, no icon markup at all:
 *      <button type="button" class="zds-media-btn zds-media-btn-play zds-media-btn-yellow" aria-label="Play video">
 *        <span class="zds-media-btn-clip"></span>
 *      </button>
 *    Swap `zds-media-btn-play` for `zds-media-btn-pause` for the other icon;
 *    everything else is identical.
 *
 *    REWRITTEN from an earlier version that nested a `<span>`-wrapped
 *    inline `<svg>` icon inside the button — that markup rendered
 *    correctly, but got silently destroyed on every save through the real
 *    WordPress editor: `wp_kses_post()` (which ACF's WYSIWYG field runs
 *    submitted HTML through on save, same as core `the_content`) strips
 *    `<svg>` unconditionally — confirmed directly (`wp_kses_post($html)`
 *    on the old markup came back with the `<svg>` and its `<path>`
 *    removed, `<span>`s untouched). This wasn't a TinyMCE Visual/Code
 *    toggle quirk; it's the standard save path, so it would have broken
 *    for every editor every time. The icon now lives entirely in this
 *    stylesheet as a `mask-image` — the same technique
 *    `inc/zds/icon-registry-generate.php` already uses for the site's
 *    other icons (mask-image pointing at a generated CSS file, nothing in
 *    post content for kses to touch). The `<span>` wrapper that remains
 *    was ALSO tested directly through `wp_kses_post()` and confirmed to
 *    survive untouched (only `<svg>`/`<path>` were ever actually at risk —
 *    a bare `<span>` with no attributes to speak of was never the
 *    problem), so there is nothing left in this markup for the editor to
 *    lose on save.
 *
 *    Icon fill colors were read directly from the exported SVG assets, not
 *    estimated from a screenshot:
 *      - Yellow PLAY icon brightens: #DAFC85 default → #C8F94F hover/click.
 *      - Yellow PAUSE icon does NOT change color (#DAFC85 throughout) —
 *        confirmed via `.zds-media-btn-static-icon` modifier below; a real,
 *        icon-specific difference within the SAME color family, not a
 *        color-family rule.
 *      - Green's icon (#5CCF9A) does NOT change color at any state for
 *        either play or pause.
 *      - Green's hover/click glow shadow is lime-colored (reused from
 *        Yellow's tokens) on both play and pause — a likely-unintentional
 *        Figma artifact, kept faithful rather than "fixed" (see TOKENS.md).
 *
 *    "Click" in Figma = the `active` state per the clarified semantics
 *    (while clicking/pressing) — mapped to `:active`, matching the same
 *    correction already applied to the .btn system's `focus` state
 *    elsewhere in this file (state semantics are shared, not re-derived).
 *
 *    RING GEOMETRY — the real Figma layers (exact dev-mode values, not
 *    rounded) put a genuine ~3.2px GAP between the outer ring's 3.2px band
 *    and the inner ring's own 3.2px band, fully transparent in the source
 *    SVG — not more ring color. Both rings keep their true top-to-bottom
 *    fade (a `linear-gradient` background masked down to exactly
 *    --zds-media-btn-border-width via `radial-gradient(farthest-side, ...)`
 *    — see `.zds-media-btn-clip::before`/`.zds-media-btn::before` below).
 *    Each mask's two stops are 1px apart (not a single instantaneous
 *    point) — a hard cutoff at a `calc()` percentage against a curved path
 *    was a confirmed source of jagged/notched edges on this button
 *    (client-reported); the 1px ramp gives the GPU a band to anti-alias
 *    across instead.
 *
 *    SLOT MAP — four masked/positioned pieces, four available slots
 *    (button's own ::before/::after, plus the wrapper span's own
 *    background + its own ::before/::after — see the `.zds-media-btn-clip`
 *    comment below for why the wrapper exists at all):
 *      button::before      → outer ring (top-faded)
 *      button::after        → icon (mask-image shape + solid color)
 *      .zds-media-btn-clip   → fill (its own flat background-color)
 *      .zds-media-btn-clip::before → inner ring (top-faded)
 *      .zds-media-btn-clip::after  → hover/active glow (clipped + top-faded)
 * --------------------------------------------------------------------- */

.zds-v1 .zds-media-btn {
    display: inline-block;
    position: relative;
    width: var(--zds-media-btn-size);
    height: var(--zds-media-btn-size);
    padding: 0;
    border: none;
    border-radius: 50%;
    /* Elementor's Kit global button style (`.elementor-kit-6 button`, see
       the escalation note below for the :hover/:focus half of this same
       collision) sets an accent `background-color` on the BARE button
       element too, not just on :hover/:focus — confirmed live. Explicit
       here so it always wins regardless of what's layered on top. */
    background-color: transparent;
    cursor: pointer;
    --zds-media-btn-ring: rgba(255, 255, 255, 0.06);
}

/* Outer bezel ring — found only in the raw Figma SVG export, never in
 * get_design_context's Tailwind output (which omits it entirely): a thin
 * --zds-media-btn-border-width ring at the button's outer edge, white 0%
 * (top) to --zds-media-btn-ring (bottom). Two DIFFERENT gradients are
 * layered at this exact position in the source SVG: a neutral
 * white-0%-to-6% ring identical in every state (what this renders by
 * default), plus — on hover/active only — a SECOND, brighter color-tinted
 * ring (white-0%-to-lime/mint-40%) sitting underneath it, which is what
 * actually reads as "the ring got brighter". Approximated by swapping
 * --zds-media-btn-ring itself on hover/active (below) rather than stacking
 * two literal ring elements — the neutral 6% ring is faint enough that
 * layering it on top of the 40%-tinted one is visually negligible. */
.zds-v1 .zds-media-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(to bottom, transparent 0%, var(--zds-media-btn-ring) 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--zds-media-btn-border-width) - 1px), #000 calc(100% - var(--zds-media-btn-border-width)));
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--zds-media-btn-border-width) - 1px), #000 calc(100% - var(--zds-media-btn-border-width)));
    pointer-events: none;
    transition: background 0.15s ease;
}

/* Fill + inner ring + glow — one wrapper `<span class="zds-media-btn-clip">`,
 * the button's only child. A plain `<span>` (no `<svg>` inside) survives
 * `wp_kses_post()` untouched — confirmed directly — so this doesn't bring
 * back the editor-breaking problem the single-element rewrite above was
 * for; only the icon's `<svg>` was ever the actual risk. This one wrapper
 * buys back what a single element structurally can't do with only two
 * pseudo-elements: BOTH rings need their own top-to-bottom fade (a
 * `radial-gradient` can't vary by angle, only by radius, so combining fill
 * + inner ring into the button's own background — an earlier pass here —
 * made the inner ring a flat color, client-reported as wrong), AND the
 * glow needs to be BOTH clipped to the circle and top-faded, which needs
 * its own masked element (mask fully suppresses box-shadow on the same
 * element it's set on — confirmed empirically — so ring-mask and glow-mask
 * can't share a layer either). Two pseudo-elements per node, two nodes now
 * (button + this span) = four slots: button´s ::before/::after (outer
 * ring / icon) + this span's own background (fill) + its ::before/::after
 * (inner ring / glow) — covers everything. */
.zds-v1 .zds-media-btn-clip {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--zds-media-btn-inner-size);
    height: var(--zds-media-btn-inner-size);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--zds-media-btn-bg);
    transition: background-color 0.15s ease;
}

/* Inner ring — top-to-bottom gradient per the Figma SVG export, not a flat
 * color: --zds-media-btn-border (set per color/state below) is the
 * gradient's TOP stop, fading to fully transparent at the bottom. Same
 * masked-ring technique (and same 1px soft transition, for the same
 * anti-aliasing reason) as the outer bezel ring on the button itself. */
.zds-v1 .zds-media-btn-clip::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(to bottom, var(--zds-media-btn-border), transparent);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--zds-media-btn-border-width) - 1px), #000 calc(100% - var(--zds-media-btn-border-width)));
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--zds-media-btn-border-width) - 1px), #000 calc(100% - var(--zds-media-btn-border-width)));
    pointer-events: none;
    transition: background 0.15s ease;
}

/* Glow — hover/active only. Clipped to the circle by the parent's own
 * `overflow: hidden` (an element's OWN overflow never clips its OWN
 * box-shadow — confirmed empirically — so this box-shadow has to live on
 * a descendant of `.zds-media-btn-clip`, not on that element itself).
 * Top-faded via `mask-image` to match the source SVG: its drop-shadow
 * filter follows the silhouette it's applied to, which is nearly
 * transparent at the top (same gradient as the rings), so the shadow is
 * weaker there too — a CSS `box-shadow` has no per-pixel alpha awareness
 * of its own, so this mask reproduces that directional falloff by hand. */
.zds-v1 .zds-media-btn-clip::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 50%;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 70%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 70%);
    transition: box-shadow 0.15s ease;
}

/* Icon — mask-image (shape) + background-color (theme-able fill), same
 * technique as inc/zds/icon-registry-generate.php. Centered via absolute
 * positioning + transform since this element has no flex-centered parent
 * of its own (the button has no children to center around anymore). */
.zds-v1 .zds-media-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--zds-media-btn-icon-size);
    height: var(--zds-media-btn-icon-size);
    transform: translate(-50%, -50%);
    background-color: var(--zds-media-btn-icon-color);
    -webkit-mask-image: var(--zds-media-btn-icon);
    mask-image: var(--zds-media-btn-icon);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    pointer-events: none;
    transition: background-color 0.15s ease;
}

/* Standard Heroicons v1 solid "play"/"pause" paths — match the Figma layer
 * names "heroicons-solid/play" / "heroicons-solid/pause" exactly. Same
 * path data as the removed inline <svg>, now embedded as a mask-image data
 * URI instead of markup. */
.zds-v1 .zds-media-btn-play {
    --zds-media-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348a1.875 1.875 0 010 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653z'/%3E%3C/svg%3E");
}

.zds-v1 .zds-media-btn-pause {
    --zds-media-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.75 5.25a.75.75 0 01.75-.75h1.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75h-1.5a.75.75 0 01-.75-.75V5.25zm7.5 0a.75.75 0 01.75-.75h1.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75h-1.5a.75.75 0 01-.75-.75V5.25z'/%3E%3C/svg%3E");
}

/* ESCALATION (documented last resort — see log at top of file): Elementor's
 * Kit global button styles inject a site-wide rule scoped to
 * `.elementor-kit-6 button:hover/:focus` (specificity 0,2,1 — a class plus
 * the bare `button` element) that sets a solid accent background-color and
 * resets border-radius to 0px. `.zds-v1 .zds-media-btn` on its own is only
 * 0,2,0 with no pseudo-class, so on :hover/:focus the Kit rule wins.
 * Doubled scope class (no !important, per this file's existing escalation
 * pattern) pushes past it. */
.zds-v1.zds-v1 .zds-media-btn:hover,
.zds-v1.zds-v1 .zds-media-btn:focus {
    background-color: transparent;
    border-radius: 50%;
}

.zds-v1 .zds-media-btn-yellow {
    --zds-media-btn-bg: var(--zds-media-btn-bg-yellow);
    --zds-media-btn-border: var(--zds-media-btn-border-yellow-default);
    --zds-media-btn-icon-color: var(--zds-media-btn-icon-color-yellow);
}

.zds-v1 .zds-media-btn-yellow:hover {
    --zds-media-btn-border: var(--zds-media-btn-border-yellow-active);
    --zds-media-btn-icon-color: var(--zds-media-btn-icon-color-yellow-active);
    --zds-media-btn-ring: var(--zds-media-btn-border-yellow-active);
}

.zds-v1 .zds-media-btn-yellow:hover .zds-media-btn-clip::after {
    box-shadow: var(--zds-media-btn-shadow-yellow-hover);
}

.zds-v1 .zds-media-btn-yellow:active {
    --zds-media-btn-bg: var(--zds-media-btn-bg-yellow-active);
    --zds-media-btn-border: var(--zds-media-btn-border-yellow-active);
    --zds-media-btn-icon-color: var(--zds-media-btn-icon-color-yellow-active);
    --zds-media-btn-ring: var(--zds-media-btn-border-yellow-active);
}

.zds-v1 .zds-media-btn-yellow:active .zds-media-btn-clip::after {
    box-shadow: var(--zds-media-btn-shadow-yellow-active);
}

/* Modifier: add alongside a color class (e.g. `zds-media-btn-yellow
   zds-media-btn-static-icon`) when the icon must NOT brighten on hover/
   active — confirmed real for Yellow's Pause icon (node 3406:2596 "Pause
   Yellow": stays #DAFC85 throughout, unlike Yellow's Play icon which
   brightens to #C8F94F) even though both icons share the same Yellow
   color family and circle/border/shadow behavior. Higher specificity than
   the plain `:hover`/`:active` rules above, so it wins and re-pins the icon
   color back to its default value. Not needed for Green (its hover/active
   rules never touch icon-color to begin with — see below). */
.zds-v1 .zds-media-btn-yellow.zds-media-btn-static-icon:hover,
.zds-v1 .zds-media-btn-yellow.zds-media-btn-static-icon:active {
    --zds-media-btn-icon-color: var(--zds-media-btn-icon-color-yellow);
}

/* Green — source: Figma node 3017:2399 "Play Green". Icon color is
   deliberately NOT overridden on hover/active (stays --zds-media-btn-icon-
   color-green throughout) — confirmed via both exported SVG assets having
   the identical fill, unlike Yellow's icon which brightens. The hover/click
   glow shadow reuses Yellow's lime-colored tokens as-is, matching the real
   (likely unintentional) Figma source rather than "fixing" it to green. */
.zds-v1 .zds-media-btn-green {
    --zds-media-btn-bg: var(--zds-media-btn-bg-green);
    --zds-media-btn-border: var(--zds-media-btn-border-green-default);
    --zds-media-btn-icon-color: var(--zds-media-btn-icon-color-green);
}

.zds-v1 .zds-media-btn-green:hover {
    --zds-media-btn-border: var(--zds-media-btn-border-green-active);
    --zds-media-btn-ring: var(--zds-media-btn-border-green-active);
}

.zds-v1 .zds-media-btn-green:hover .zds-media-btn-clip::after {
    box-shadow: var(--zds-media-btn-shadow-yellow-hover);
}

.zds-v1 .zds-media-btn-green:active {
    --zds-media-btn-bg: var(--zds-media-btn-bg-green-active);
    --zds-media-btn-border: var(--zds-media-btn-border-green-active);
    --zds-media-btn-ring: var(--zds-media-btn-border-green-active);
}

.zds-v1 .zds-media-btn-green:active .zds-media-btn-clip::after {
    box-shadow: var(--zds-media-btn-shadow-yellow-active);
}

/* -----------------------------------------------------------------------
 * 6. Icons — base mechanics.
 *
 *    Canonical markup:
 *      <i class="zds-icon zds-icon-24" aria-hidden="true"></i>
 *
 *    Size is set ONLY by the `.zds-icon-{n}` modifier — generated from the
 *    ZDS_ICON_SIZES PHP constant and injected as an inline style right
 *    after this stylesheet (see inc/zds/icon-registry.php + enqueue.php).
 *    The 16px fallback below is a safety net for markup missing a size
 *    class, not a size to design against — 14px (language switcher caret)
 *    is the smallest confirmed Figma value in the current scale.
 *
 *    Never set --zds-icon-size from a component. --zds-icon-color may be
 *    overridden by a component on its own container when the icon should
 *    differ from the surrounding text color.
 * --------------------------------------------------------------------- */

.zds-v1 .zds-icon {
    display: inline-block;
    flex: none;
    width: var(--zds-icon-size, 16px);
    height: var(--zds-icon-size, 16px);
    background-color: var(--zds-icon-color, currentColor);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* -----------------------------------------------------------------------
 * 6.5. Badge — eyebrow label with a dot, used above section headings.
 *      Canonical markup: <span class="zds-badge">Label</span>
 *      Desktop dot 12px, mobile (<=768px) dot 10px. A previous 8px variant
 *      was a design mistake — always use this class, never redefine sizes
 *      per section.
 *      .profile-split-expert also carries .zds-badge (unrelated component,
 *      predates this rule) — isolated from these shared styles in
 *      section-profile-split.css, see the comment there.
 * --------------------------------------------------------------------- */

.zds-v1 .zds-badge {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--zds-space-2);
    font-family: var(--zds-font-family-base);
    font-style: normal;
    font-weight: var(--zds-font-weight-light);
    font-size: var(--zds-body-size-small);
    line-height: var(--zds-body-line-height);
    color: var(--zds-color-mint);
    text-transform: uppercase;
}

.zds-v1 .zds-badge::before {
    content: "";
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    background: var(--zds-color-mint);
    border-radius: var(--zds-radius-xs);
}

@media screen and (max-width: 768px) {
    .zds-v1 .zds-badge {
        font-size: var(--zds-body-size-mobile-base);
        line-height: var(--zds-body-line-height-mobile);
    }

    .zds-v1 .zds-badge::before {
        width: 10px;
        height: 10px;
    }
}

/* -----------------------------------------------------------------------
 * 7. Component stubs — placeholders for Phase 2 (headings, inputs).
 * --------------------------------------------------------------------- */

.zds-v1 .custom-header {
    z-index: 9;
    position: relative;
}

.zds-v1 header .header-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 38px 0;
    max-width: 1280px;
    margin: auto;
}

/* 8. Hero Split — "big_title_animation" design variant (mobile only) */

.zds-v1 .section-hero-split--bta {
    position: relative;
    z-index: 1;
    background-color: var(--zds-color-bg);
}

.zds-v1 .section-hero-split--bta::before,
.zds-v1 .section-hero-split--bta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.zds-v1 .section-hero-split--bta::before {
    top: 100px;
    left: -100px;
    width: 280px;
    height: 280px;
    background: var(--zds-color-mint);
    opacity: 0.15;
    filter: blur(50px);
    z-index: 0;
}

.zds-v1 .section-hero-split--bta::after {
    top: 300px;
    left: 200px;
    width: 200px;
    height: 200px;
    background: var(--zds-color-beige);
    opacity: 0.1;
    filter: blur(40px);
    z-index: 1;
}

.zds-v1 .section-hero-split--bta .zds-container {
    position: relative;
    z-index: 1;
}

.zds-v1 .hero-split-bta-content {
    display: flex;
    flex-direction: column;
    gap: var(--zds-space-8);
}

.zds-v1 .hero-split-bta-copy {
    display: flex;
    flex-direction: column;
    gap: var(--zds-space-6);
}

.zds-v1 .hero-split-bta-title,
.zds-v1 .hero-split-bta-title h1 {
    margin: 0;
    font-family: var(--zds-font-family-heading);
    font-weight: var(--zds-font-weight-bold);
    font-size: clamp(32px, 21.04px + 2.811vw, 75px) !important;
    line-height: clamp(38.4px, 23.33px + 3.863vw, 97.5px) !important;
    color: var(--zds-color-text);
}

.lang-en.zds-v1 .hero-split-bta-title,
.lang-en.zds-v1 .hero-split-bta-title h1 {
    font-size: clamp(32px, 14.67px + 4.445vw, 100px) !important;
    line-height: clamp(38.4px, 20.15px + 4.680vw, 110px) !important;
}

.zds-v1 .hero-split-bta-title .hero-split-bta-title-accent,
.zds-v1 .hero-split-bta-title strong,
.zds-v1 .hero-split-bta-title em {
    font-style: normal;
    color: var(--zds-color-on-light-text-brand);
}

.zds-v1 .hero-split-bta-text {
    margin: 0;
    font-family: var(--zds-font-family-base);
    font-weight: var(--zds-font-weight-light);
    color: var(--zds-color-icon-disabled);
}

.zds-v1 .hero-split-bta-btn.btn {
    width: 358px;
    max-width: 100%;
}

@media (max-width: 1023.98px) {
    .zds-v1 .section-hero-split--bta {
        padding-block: var(--zds-space-12);
    }

    .zds-v1 .hero-split-bta-text {
        font-size: var(--zds-body-size-mobile-large);
        line-height: var(--zds-body-line-height-mobile);
    }
}

@media (max-width: 768px) {
    .zds-v1 .hero-split-bta-btn.btn {
        width: 100%;
    }
}

.zds-v1 .hero-split-bta-video {
    display: none;
}

@media screen and (min-width: 1024px) {
    .zds-v1 .section-hero-split--bta {
        padding-top: var(--zds-space-10);
        padding-bottom: var(--zds-space-20);
        clip-path: inset(0 0 -100% 0);
    }

    .zds-v1 .section-hero-split--bta::before,
    .zds-v1 .section-hero-split--bta::after {
        display: none;
    }

    .zds-v1 .hero-split-bta-title {
        position: relative;
        z-index: 0;
    }

    .zds-v1 .hero-split-bta-title::before {
        content: "";
        position: absolute;
        top: -101px;
        left: -117px;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: var(--zds-color-mint);
        opacity: 0.15;
        filter: blur(75px);
        z-index: -1;
        pointer-events: none;
    }

    .zds-v1 .section-hero-split--bta .zds-container {
        position: relative;
        z-index: 1;
        height: 682px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .zds-v1 .hero-split-bta-content {
        z-index: 1;
    }

    .zds-v1 .hero-split-bta-text {
        position: absolute;
        right: 0;
        bottom: 95px;
        margin: 0;
        width: 715px;
        font-size: var(--zds-body-size-large);
        line-height: var(--zds-body-line-height);
        color: var(--zds-color-icon-disabled);
    }

    .lang-en.zds-v1 .hero-split-bta-text {
        width: 501px;
    }

    .zds-v1 .hero-split-bta-btn.btn {
        display: none;
    }

    .zds-v1 .hero-split-bta-video {
        display: flex;
        align-items: center;
        position: absolute;
        top: -50px;
        bottom: 0;
        left: calc(50% - 50vw);
        width: 100vw;
        z-index: 0;
        pointer-events: none;
    }

    .zds-v1 .hero-split-bta-video-el {
        display: block;
        width: 100%;
        height: auto;
        mix-blend-mode: screen;
    }
}

/* 9. Client Logos Marquee */

.zds-v1 .section-client-logos-marquee {
    position: relative;
    height: 55px;
}

.zds-v1 .section-client-logos-marquee .zds-container {
    display: flex;
    align-items: center;
    height: 100%;
}

.zds-v1 .client-logos-marquee-viewport {
    display: flex;
    align-items: center;
    width: 100%;
}

.zds-v1 .client-logos-track {
    display: flex;
    align-items: center;
    gap: var(--zds-space-5);
    padding-block: var(--zds-space-3);
    margin-inline: calc(-1 * var(--zds-container-padding-inline));
    padding-inline: var(--zds-container-padding-inline);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.zds-v1 .client-logos-track::-webkit-scrollbar {
    display: none;
}

.zds-v1 .client-logos-track--duplicate {
    display: none;
}

.zds-v1 .client-logos-repeat {
    display: flex;
    align-items: center;
    gap: var(--zds-space-5);
}

.zds-v1 .client-logos-repeat--desktop-only {
    display: none;
}

.zds-v1 .client-logos-item {
    flex-shrink: 0;
    white-space: nowrap;
    font-family: var(--zds-font-family-heading);
    font-weight: var(--zds-font-weight-bold);
    font-size: 14px;
    line-height: 1.2;
    color: var(--zds-color-cream);
    opacity: 0.3;
}

.zds-v1 .client-logos-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        var(--zds-color-bg) 0%,
        transparent 15%,
        transparent 85%,
        var(--zds-color-bg) 100%
    );
    pointer-events: none;
}

@media screen and (min-width: 1024px) {
    .zds-v1 .section-client-logos-marquee {
        height: 80px;
    }

    .zds-v1 .section-client-logos-marquee .zds-container {
        max-width: none;
        padding-inline: 0;
    }

    .zds-v1 .client-logos-marquee-viewport {
        gap: var(--zds-space-20);
        overflow: hidden;
    }

    .zds-v1 .client-logos-track {
        flex-shrink: 0;
        gap: var(--zds-space-20);
        margin-inline: 0;
        padding-inline: 0;
        overflow-x: visible;
        animation: client-logos-marquee-scroll 40s linear infinite;
    }

    .zds-v1 .client-logos-track--duplicate {
        display: flex;
    }

    .zds-v1 .client-logos-repeat {
        gap: var(--zds-space-20);
    }

    .zds-v1 .client-logos-repeat--desktop-only {
        display: flex;
    }

    .zds-v1 .client-logos-item {
        font-size: var(--zds-heading-size-mobile-sm);
        line-height: 1;
        font-weight: 800;
    }
}

@keyframes client-logos-marquee-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% - var(--zds-space-20)));
    }
}

.zds-v1 header .header-container a svg {
    display: block;
    max-width: 117px;
    width: 100%;
    min-height: 25px;
}