/**
 * Healing Paths — pillar/practice templates + header v2.
 * Mobile-first (390 design base; 768/1024 collapse points; 1440 desktop base).
 * All colors/type via tokens (healing-tokens.css). Radius 0 throughout.
 * Rails are CSS scroll-snap plus one ~30-line arrow script (js/hp-rail.js, Phase 4 / R7) —
 * no carousel library, no jQuery.
 */

/* ---------- base ---------- */

body.hp-page {
    font-family: var(--gg-font-body);
    font-size: var(--gg-body-size);
    line-height: var(--gg-line-height);
    color: var(--gg-text);
    background: var(--gg-white);
    margin: 0;
}

.hp-main { display: block; }

.hp-container {
    max-width: var(--gg-max-width);
    margin: 0 auto;
    padding-left: var(--gg-gutter);
    padding-right: var(--gg-gutter);
}

.hp-module { padding: var(--gg-section-pad-phone) 0; }

/* Backgrounds — the fixed tint set */
.hp-bg-white { background: var(--gg-white); }
.hp-bg-petal-mist { background: var(--gg-petal-mist); }
.hp-bg-rose-mist { background: var(--gg-rose-mist); }
.hp-bg-dawn-pink { background: var(--gg-dawn-pink); }
/* .hp-bg-soft-cream was removed 2026-09-17: Soft Cream is retired as a surface and
 * left GG_HP_TINTS, so nothing can emit the class. scripts/hp/retired-colour-check.py. */
.hp-bg-mulberry-haze { background: var(--gg-mulberry-haze); }
.hp-bg-clay-veil { background: var(--gg-clay-veil); }
.hp-bg-berry { background: var(--gg-berry); color: var(--gg-text-on-dark); }
.hp-bg-femme-rose { background: var(--gg-femme-rose); } /* M1 band only — never body text on it except Berry */

/* Type */
.hp-page h1, .hp-page h2, .hp-page h3 {
    font-family: var(--gg-font-heading);
    font-weight: 400;
    margin: 0 0 0.5em;
    text-transform: none; /* H1 title case, never all-caps */
}
.hp-page h1 { color: var(--gg-berry); }
.hp-h2, .hp-h3 { color: var(--gg-title-secondary); }
.hp-bg-berry .hp-h2, .hp-bg-berry .hp-h3, .hp-bg-berry p { color: var(--gg-text-on-dark); }
.hp-h2 { font-size: 1.625rem; line-height: 1.25; }
.hp-h3 { font-size: 1.125rem; line-height: 1.3; }

.hp-eyebrow {
    font-family: var(--gg-font-heading);
    font-size: var(--gg-eyebrow-size);
    letter-spacing: var(--gg-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--gg-title-secondary);
    margin: 0 0 10px;
}

.hp-page a { color: var(--gg-berry); text-decoration: none; }
.hp-page a:hover, .hp-page a:focus-visible { text-decoration: underline; }
.hp-page :focus-visible { outline: var(--gg-focus-ring); outline-offset: 2px; }

/* Quotes are UPRIGHT (round 8, B4; Diego, 2 Oct). The parent theme sets
 * `q, blockquote { font-style: italic; font-weight: 300 }` (buddyboss-theme
 * theme.css:682-688), and Tenor Sans ships no italic and no 300, so the browser
 * slanted it synthetically. One rule for every quote on the hp documents —
 * home v4 H10/H12, hub HPB3/HPB8/HPB10, and any blockquote an editor types into
 * a prose field. Not video pages: they wear body.hp-page too (page-open) and
 * video-watch.css styles their quotes on purpose. (0,2,2) beats the parent's
 * (0,0,1) in any RUCSS order. */
body.hp-page:not(.gg-video) blockquote,
body.hp-page:not(.gg-video) q { font-style: normal; font-weight: 400; }

.hp-prose p { margin: 0 0 1em; }
.hp-prose p:last-child { margin-bottom: 0; }
.hp-lede { max-width: 46em; }
.hp-empty { color: var(--gg-title-secondary); }

/* Buttons — GAIA BERRY fill, no radius; hover = Mulberry. Round 8 made them Mauve
 * (21 Sep review); Adiba reverted that on 5 Oct (round 9): the main CTAs are
 * Berry again. White label: 11.1:1 on Berry, 7.1:1 on the hover. The on-dark
 * variants (hero, member band, .hp-btn--on-berry, the hub's --light) keep
 * their own fills. The path-card hover surface stays Mauve: that was a card
 * state, not a CTA, and the Berry icon discs need a non-Berry card under them. */
.hp-btn {
    display: inline-block;
    background: var(--gg-berry);
    color: var(--gg-text-on-dark) !important;
    font-family: var(--gg-font-body);
    font-weight: 500;
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    padding: 14px 28px;
    border: 1px solid var(--gg-berry);
    border-radius: var(--gg-radius);
    min-height: var(--gg-tap-min);
    cursor: pointer;
    text-decoration: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.hp-btn:hover, .hp-btn:focus-visible { background: var(--gg-mulberry); border-color: var(--gg-mulberry); }
.hp-btn--on-berry {
    background: transparent;
    border-color: var(--gg-white);
}
.hp-btn--on-berry:hover, .hp-btn--on-berry:focus-visible { background: var(--gg-petal-mist); color: var(--gg-berry) !important; border-color: var(--gg-petal-mist); }

.hp-textlink { font-weight: 500; }
.hp-textlink--on-berry { color: var(--gg-text-on-dark) !important; text-decoration: underline; }

/* Icon roundel — base + size variants MOVED to site-chrome.css (review
 * 2026-08-31: the header prints roundels in the HP mega + phone sheet on
 * every page). The tint/hero-B variants below are page-module styling and
 * stay here.
 *
 * ROUND 9: every tile colour below is for an EMPTY roundel only
 * (:not(.hp-roundel--glyph)). A roundel with a pillar icon in it is a Berry
 * disc with a white glyph everywhere (site-chrome.css, under .hp-roundel--icon). */
/* Tinted/berry sections: white tile keeps the tile visible off the tint. */
[class*="hp-bg-"]:not(.hp-bg-white) .hp-roundel--icon:not(.hp-roundel--glyph) { background: var(--gg-white); }
/* …but cards are WHITE surfaces even inside tinted sections: the tile stays
 * Petal Mist there or it vanishes white-on-white (round 3 §2.2 — the P9
 * related-path cards rendered disc-less). Same specificity, later wins. */
[class*="hp-bg-"] .hp-card .hp-roundel--icon:not(.hp-roundel--glyph) { background: var(--gg-petal-mist); }
/* WHITE sections (R4, 2026-09-03): the background select now reaches P4/P6/P9/T4b/T5,
 * so white cards can land on a white section and would read as loose text. Same move
 * as P5's locked white module (theme-bleed block below): Petal Mist card tiles, and the
 * roundel tile flips to white so it stays visible on the tinted card. Same specificity
 * as the rule above; later wins. */
.hp-bg-white .hp-card, .hp-bg-white .hp-vcard { background: var(--gg-petal-mist); }
.hp-bg-white .hp-card .hp-roundel--icon:not(.hp-roundel--glyph) { background: var(--gg-white); }
/* Hero B over photo, EMPTY roundel — frosted tile (dark scheme). Round 3 §2.1:
 * inner stroke keeps the disc from vanishing on dusk photos (NSR). With a
 * pillar icon in it the hero roundel is the Berry disc like everywhere else
 * (round 9: "healing path shows the icon in the hero but it's not gaia berry"). */
body.hp-page .hp-hero-b .hp-roundel--icon:not(.hp-roundel--glyph) {
    background: rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
/* The Berry disc keeps that same inner stroke over the dark-scheme photo, so it
 * still has an edge on a dusk image; the light scheme keeps its plain disc. */
body.hp-page .hp-hero-b:not(.hp-hero-b--light) .hp-roundel--icon.hp-roundel--glyph { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
/* …and berry disc + light icon on the light scheme (max contrast over pale photo).
 * Solid disc: the frosted rule's inner stroke doesn't apply here. */
body.hp-page .hp-hero-b--light .hp-roundel--icon { background: var(--gg-berry); color: var(--gg-text-on-dark); box-shadow: none; }

/* Generic card on tinted sections */
.hp-card {
    background: var(--gg-white);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}
/* Card CTAs pinned to the bottom (R10 of the 2026-09-03 request; RULINGS §D polish):
 * the trailing action takes margin-top:auto, so a row of cards with different text
 * lengths shows its actions on one baseline. Rows already stretch (grid items and the
 * P5 flex-wrap default align-items: stretch). Same for the video cards' CTA. */
.hp-card > a:last-child { margin-top: auto; }
.hp-vcard__body { flex: 1; }
.hp-vcard__cta { margin-top: auto; }

/* Breadcrumb */
.hp-breadcrumb {
    font-size: 0.8125rem;
    padding: 12px 0 0;
    color: var(--gg-title-secondary);
}
.hp-breadcrumb a { color: var(--gg-title-secondary); }

/* ---------- header v2 ----------
 * MOVED to site-chrome.css (ADR 0016 D3): the header/footer chrome loads
 * site-wide now; this sheet keeps only the page-module styles. The chrome
 * theme-bleed counter-rules moved with it, rescoped body.hp-page ->
 * body.gg-chrome (hp pages carry both classes). */

/* ---------- modules ---------- */

/* Hero */
.hp-hero { padding-top: 24px; }
.hp-hero__grid { display: flex; flex-direction: column; gap: 28px; }
.hp-hero__title { font-size: 1.875rem; line-height: 1.2; margin: 0 0 14px; }       /* 30px pillar/390 */
.hp-hero__title--practice { font-size: 1.6875rem; }                                 /* 27px practice/390 */
.hp-hero__sub { font-size: 1.125rem; margin: 0 0 12px; }
.hp-hero__support { margin: 0 0 20px; max-width: 40em; }
.hp-hero__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hp-hero__media img { width: 100%; height: auto; display: block; }
/* Hero A photo panel — designer ruling 2026-09-03 §A, frames 3b/1c: a TRUE SQUARE
 * shown whole. 1:1 box the width of the image column (≈474² at 1440, 350² at 390)
 * with object-fit: cover — the property was unset before, computed to `fill`, and
 * the 2.4:1 strip stretched the source (fix-01). Applies to EVERY Hero A instance:
 * the practice template (option 2) and the pillar's no-suitable-photo fallback
 * ("with a square panel Hero A now shows the entire file", §A1) — never to Hero B.
 * Text column untouched; both columns are vertically centred by the ≥1024
 * .hp-hero__grid rule (C1-2). */
.hp-hero:not(.hp-hero-b) .hp-hero__media { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
.hp-hero:not(.hp-hero-b) .hp-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Stacked (phone/tablet): the square sits 24px under the CTA row (1c). Scoped to
 * <1024 on purpose — an unscoped version out-specified the ≥1024 48px column gap and
 * grew the desktop panel to 498² (caught in review). Tablet: cap the square at the
 * desktop panel size instead of the full 728–983px container. */
@media (max-width: 1023px) {
    .hp-hero:not(.hp-hero-b) .hp-hero__grid { gap: 24px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .hp-hero:not(.hp-hero-b) .hp-hero__media { max-width: 474px; }
}
/* Practice intro, round 8 B5 (21 Sep review): image LEFT, text right from 768
 * up; the phone keeps text then image. Only the VISUAL order flips — the DOM
 * still opens on the H1 for screen readers and Yoast, and the media column has
 * nothing focusable, so the tab order cannot disagree with what is seen. At
 * 1024+ the existing 55% / rest split and 48px gap apply unchanged. */
@media (min-width: 768px) {
    body.hp-page .hp-hero--practice .hp-hero__grid:not(.hp-hero__grid--solo) { flex-direction: row-reverse; align-items: center; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    body.hp-page .hp-hero--practice .hp-hero__grid:not(.hp-hero__grid--solo) { gap: 32px; }
    body.hp-page .hp-hero--practice .hp-hero__text { flex: 1 1 0; min-width: 0; }
    body.hp-page .hp-hero--practice .hp-hero__media { flex: 0 0 42%; max-width: none; }
}
/* Hidden hero (R1, 2026-09-03): gg_hp_render_title_strip() prints the breadcrumb
 * (pillar only) + the one H1 in a slim strip, so the page keeps a visible H1 for
 * Yoast/schema and the first visible heading is never an H2. Not an .hp-module —
 * it carries its own padding (no double gap, §1.5). */
body.hp-page .hp-titlestrip { padding: 24px 0 8px; }
body.hp-page .hp-titlestrip__h1 { margin: 12px 0 0; }
.hp-parentmarker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-family: var(--gg-font-heading);
    color: var(--gg-text) !important;
}

/* Splits (stack text-first on phone) */
.hp-split-55-45, .hp-split-40-60 { display: flex; flex-direction: column; gap: 24px; }

/* Recognition / when-useful rows */
.hp-recognition__list { list-style: none; margin: 0; padding: 0; }
.hp-recognition__list li {
    padding: 14px 0;
    border-bottom: 1px solid rgba(138, 90, 116, 0.18);
    font-size: 1.0625rem;
}
.hp-recognition__list li:last-child { border-bottom: 0; }

/* Framework steps — P3b. A real <ol>/<li> since R9 (2026-09-03); the arrow marker rules are
 * shared with the T4 expect steps ("Sequence markers" below). */
.hp-framework__steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.hp-framework__note { margin-top: 24px; color: var(--gg-title-secondary); }
/* R21 / ADR 0022: optional intro between the h2 and the columns. Adjacent-sibling spacing so a page
 * without an intro keeps the steps' own margin-top above, untouched; 46em = the .hp-lede measure. */
.hp-framework__intro { margin: 8px 0 0; max-width: 46em; }
.hp-framework__intro + .hp-framework__steps { margin-top: 24px; }

/* Needs grid — P4 v2 (round 2 §6): real-person 4:3 thumb + content-type eyebrow */
.hp-needs__grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 8px; }
.hp-needs__thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--gg-dawn-pink);
}
.hp-needs__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-needs__type { margin: 2px 0 0; }
.hp-needs__card .hp-h3 { margin: 0; }

/* P5 "View all N classes" link under the cards — R15 (Phase 5): one text link to the
 * pillar-filtered video index; keeps the section at one button + one link (R10). */
.hp-practices__all { margin: 16px 0 0; }

/* Practices list — P5 (round 2 §5): flex-wrap at the 3-col measure, second row
 * always centered — 3 = one row, 4 = 3+1, 5 = 3+2. Fixed card basis so both
 * rows align to the same measure. Phone stays a vertical list. */
.hp-practices__list { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 8px; }
/* P5 thumb — R12 (2026-09-03): the practice's hero image as the card's first child, 1:1 with
 * cover (the practice hero is a composed square shown whole, so a 1:1 thumb previews exactly
 * the T1 panel and never cuts a head). Mirrors .hp-needs__thumb; printed only when a URL
 * resolves (gg_hp_practice_thumb()), alt="", lazy. R10's margin-top:auto still pins the link. */
.hp-practices__thumb { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--gg-dawn-pink); }
.hp-practices__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* ---------- Rail — the one scroll-snap list component (Phase 4 / R7 + R11, 2026-09-03) ----------
 * Markup: template-parts/healing/rail.php; arrows: js/hp-rail.js (~30 lines, no library).
 * Below 1024 this is the swipe rail (82% peek at 390, snap) for P6/T5 videos AND P8/T6
 * practitioners (R11: one component, two content types). The prev/next buttons sit in the
 * head row beside the H2, never over the cards. The head is a two-column grid (H2 | arrows):
 * the H2 shrinks instead of pushing the arrows onto a second line (the real titles are
 * 373-490px max-content at 390, wider than the 350px container), and below 1024 the arrow
 * column is a FIXED track (2 x 44px + 4px) that exists whether or not the buttons are shown
 * — overflow is guaranteed there with >= 2 items — so revealing them moves nothing (zero
 * CLS). At >= 1024 the track is auto (overflow needs > 8 items); hidden controls take no width.
 * The controls ship with the `hidden` ATTRIBUTE in the server HTML and hp-rail.js clears it
 * once the list overflows — the CSS gate is `[hidden]`, a selector that matches the initial
 * DOM. Never gate on a data-* the script sets: WP Rocket RUCSS strips selectors that only
 * match after JS runs (lessons 2026-07-30) and the cached page would keep the arrows hidden
 * forever. A fully visible desktop grid shows no idle arrows; no-JS visitors keep the plain
 * swipe rail. Ends use aria-disabled (focus never drops) at 35% opacity, never removed. Real
 * <ul>/<li> + role="list". The live status is visually hidden INSIDE the controls, so while
 * nothing scrolls (desktop grid/row fits) it is not exposed either — recorded decision on
 * R7.2's "whether or not the arrows end up visible": there is nothing to announce then.
 * The button's colours and states are REPEATED body-scoped in the theme-bleed block below:
 * the Elementor kit styles bare <button> at (0,1,1) and cascade order does not survive RUCSS. */
.hp-rail__head {
    --hp-rail-h2-mb: 0.8125rem; /* = .hp-h2's 0.5em (1.625rem here, 2rem at >= 1024). H2 and controls carry the SAME bottom margin, so align-items:center puts the glyphs on the buttons' centre line and the H2 -> list rhythm is unchanged */
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(var(--gg-tap-min) * 2 + 4px);
    grid-template-rows: minmax(calc(var(--gg-tap-min) + var(--hp-rail-h2-mb)), auto); /* row 1 is never shorter than the buttons' margin box, shown or hidden: a one-line H2 (33 + 13 = 46px) would otherwise grow the head by 11px on reveal (probed at 768) */
    column-gap: 16px; row-gap: 8px;
    align-items: center;
}
.hp-rail__head .hp-h2 { grid-row: 1; grid-column: 1; min-width: 0; margin-bottom: var(--hp-rail-h2-mb); }
.hp-rail__head .hp-lede { grid-row: 2; grid-column: 1 / -1; } /* P8/T6 intro: full width under the H2 row. Explicit placement — the DOM order is H2, lede, controls, and sparse auto-placement would push the controls to a third row */
.hp-rail__controls { grid-row: 1; grid-column: 2; display: flex; align-items: center; gap: 4px; margin-bottom: var(--hp-rail-h2-mb); }
.hp-rail__controls[hidden] { display: none; } /* author rule required: the display:flex above would beat the UA [hidden] rule */
.hp-rail__btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--gg-tap-min); height: var(--gg-tap-min);
    padding: 0; margin: 0;
    background: none;
    border: 1px solid rgba(108, 29, 69, 0.35); /* Berry ring at 35% */
    border-radius: 50%;
    color: var(--gg-berry);                    /* chevron = currentColor */
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.hp-rail__btn svg { display: block; }
.hp-rail__btn:hover, .hp-rail__btn:focus-visible { background: var(--gg-berry); color: var(--gg-text-on-dark); border-color: var(--gg-berry); }
.hp-rail__btn[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.hp-rail__btn[aria-disabled="true"]:hover { background: none; color: var(--gg-berry); border-color: rgba(108, 29, 69, 0.35); }
.hp-rail__list {
    list-style: none;
    /* overflow-x:auto makes the list a scroll container that clips at its padding box, so the
     * 2px focus ring + 2px offset of the edge cards needs 4px of padding on the top and sides;
     * the -4px side margins keep the content box at the container width (the 82% items and the
     * calc((100% - 16px) / 2) desktop columns are unchanged) and scroll-padding keeps the snap
     * start aligned with that padding. 4px margin + 4px padding = the previous 8px head gap. */
    margin: 4px -4px 0; padding: 4px 4px 8px; scroll-padding-inline: 4px;
    display: flex; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
.hp-rail__item { flex: 0 0 82%; scroll-snap-align: start; min-width: 0; } /* obvious peek at 390, unchanged */
.hp-rail--row .hp-rail__item { flex-basis: 82%; }                          /* practitioners swipe the same way (R11) */
.hp-rail__item > * { height: 100%; }                                       /* the <li> is the stretched flex/grid item; the card must fill it so R10's margin-top:auto still pins every CTA to one baseline */
/* Trailing spacer (Diego 2026-09-04): without it the LAST card can never sit at the left edge —
 * its start-aligned snap position lies beyond the scroll range, so mandatory snapping clamps to
 * the end and the card lands ~60px in with the previous card's tail showing. 18% (= 100% - the
 * 82% card) minus the 16px gap ends the scroll range exactly at the last card's snap start. A
 * pseudo-element, not padding-inline-end: WebKit does not add end padding to a flex scroller's
 * overflow. Not a real <li>: AT would count a phantom item. Off at >= 1024 (grid/row cells). */
.hp-rail__list::after { content: ""; flex: 0 0 calc(18% - 16px); }
.hp-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Video card */
.hp-vcard { background: var(--gg-white); }
.hp-vcard__link { display: flex; flex-direction: column; color: var(--gg-text) !important; text-decoration: none !important; height: 100%; }
.hp-vcard__thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--gg-dawn-pink); overflow: hidden; }
.hp-vcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-vcard__duration {
    position: absolute;
    right: 8px;
    bottom: 8px;
    background: rgba(42, 42, 42, 0.75);
    color: var(--gg-text-on-dark);
    font-size: 0.75rem;
    padding: 3px 8px;
}
.hp-vcard__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.hp-vcard__title { font-family: var(--gg-font-heading); font-size: 1.0625rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hp-vcard__meta { font-size: 0.875rem; color: var(--gg-title-secondary); }
/* The minutes print twice (thumb badge + meta line); one shows per breakpoint/variant so the
 * number never disappears: badge below 1024, meta line inside --rail at >= 1024. */
.hp-vcard__mins { display: none; }
.hp-vcard__meta--mins-only { display: none; } /* minutes but no practitioner: the meta line exists only where the minutes print (--rail at >= 1024), so the body's 6px gap is not spent on an empty line below 1024 */
.hp-vcard__cta { color: var(--gg-berry); font-weight: 500; font-size: 0.9375rem; }

/* Sequence markers — R9 (2026-09-03): T4 expect steps and P3b framework steps trade the
 * numerals for a right-pointing arrow. SVG via CSS mask (data URI), not "→" text: generated
 * TEXT is exposed to AT (announced), content:"" + mask is silent; U+2192 font coverage is not
 * guaranteed; the glyph matches the header's icon family; no HTTP request. Order still comes
 * from the <ol> ("list, 4 items", positions). Same marker at both breakpoints; the desktop /
 * tablet row layouts further down are unchanged. (The pre-Phase-4 T5 "--compact" rows are
 * gone: T5 renders through the rail, and the item variant lives in the >= 1024 block.) */
.hp-page { --hp-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>"); }
.hp-expect__steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.hp-expect__step h3, .hp-framework__step h3 { display: flex; align-items: center; gap: 10px; }
.hp-expect__step h3::before, .hp-framework__step h3::before {
    content: ""; flex: none; width: 1.1em; height: 1.1em;
    background-color: var(--gg-berry);
    -webkit-mask: var(--hp-arrow) center / contain no-repeat;
    mask: var(--hp-arrow) center / contain no-repeat;
}

/* Practitioners — P8 / T6. The section renders through the rail component since R11
 * (.hp-rail--row above / in the >= 1024 block); only the card lives here. */
/* Centred on every page (Maria via Adiba, 27 Oct): avatar, name, role, blurb and link, as on home v4. */
.hp-pcard { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
/* EWWW wraps a converted PNG/JPEG headshot in <picture>. Without this the wrapper, not the <img>, is the
 * flex item: it stretches to the card width and the round avatar sits at its left edge (Judith on home v4,
 * 27 Oct; ten family pages carry at least one). display: contents hands the <img> back to the card. */
.hp-pcard > picture { display: contents; }
/* Avatar — designer ruling 2026-09-03 §B: one token (--gg-avatar-size = 120px) at every
 * breakpoint, round; avatar → name gap 16px (card gap 8 + margin 8). display:block so
 * the --empty <span> fallback takes the same box. Nothing else on the card moves. */
.hp-pcard__avatar {
    display: block;
    width: var(--gg-avatar-size);
    height: var(--gg-avatar-size);
    border-radius: 50%;
    object-fit: cover;
    background: var(--gg-dawn-pink);
    margin-bottom: 8px;
}
.hp-pcard__name { margin: 0; }
.hp-pcard__role { margin: 0; font-size: 0.875rem; color: var(--gg-title-secondary); }
.hp-pcard__blurb { margin: 0; font-size: 0.9375rem; }
.hp-pcard__link { font-weight: 500; margin-top: auto; } /* pinned to the card bottom (R10) */

/* Learn-first — T5b */
.hp-learnfirst__list { list-style: none; margin: 8px 0 0; padding: 0; }
.hp-learnfirst__list li { padding: 10px 0; }
.hp-learnfirst__verb { color: var(--gg-title-secondary); font-size: 0.875rem; }

/* Related paths — P9 */
.hp-related__grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 8px; }

/* Fits into GG — T7 */
.hp-fits__inner { display: flex; flex-direction: column; gap: 24px; }
.hp-fits__actions { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.hp-fits__related { font-size: 0.9375rem; }

/* Safety — T8: calm aside, no border, no icon */
.hp-safety .hp-prose { max-width: 46em; }
/* T8 background comes from the R4 select since Phase 3 (hp_bg_safety, default white —
 * D8: Clay Veil was a third tint on the practice page). The Phase 2 stop-gap override
 * (hp-bg-clay-veil → white on .hp-safety) is retired with it; no override lives here. */

/* Final CTA — the one berry band; the only centered module */
.hp-finalcta__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hp-finalcta__inner p { max-width: 36em; margin: 0; }

/* Footer shim — wrappers opened only to keep footer.php's closers balanced */
.hp-footer-shim { display: contents; }

/* ---------- desktop (1024+) ---------- */

@media (min-width: 1024px) {
    .hp-module { padding: var(--gg-section-pad-desktop) 0; }

    .hp-hero { padding-top: 40px; }
    .hp-hero__grid { flex-direction: row; align-items: center; gap: 48px; }
    .hp-hero__text { flex: 0 0 55%; }
    .hp-hero__media { flex: 1; }
    /* R18: no photo (or a photo below spec) — the text column takes the row, capped for measure. */
    .hp-hero__grid--solo .hp-hero__text { flex: 1 1 auto; max-width: 46em; }
    .hp-hero__title { font-size: 2.875rem; }              /* 46px pillar/1440 */
    .hp-hero__title--practice { font-size: 2.5rem; }      /* 40px practice/1440 */
    .hp-roundel--hero { width: var(--gg-roundel-hero-desktop); height: var(--gg-roundel-hero-desktop); }

    .hp-h2 { font-size: 2rem; }

    .hp-split-55-45 { flex-direction: row; gap: 48px; align-items: center; }
    .hp-split-55-45 > *:first-child { flex: 0 0 55%; }
    .hp-split-55-45 > *:last-child { flex: 1; }
    .hp-mirrored .hp-split-55-45 { flex-direction: row-reverse; }
    .hp-mirrored .hp-split-55-45 > *:first-child { flex: 0 0 50%; }

    .hp-split-40-60 { flex-direction: row; gap: 48px; align-items: flex-start; }
    .hp-split-40-60 > h2 { flex: 0 0 38%; }
    .hp-split-40-60 > *:last-child { flex: 1; }

    .hp-framework__steps { flex-direction: row; gap: 32px; }
    .hp-framework__step { flex: 1; }

    .hp-needs__grid { grid-template-columns: repeat(4, 1fr); }
    .hp-practices__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .hp-practices__list > * { flex: 0 0 calc((100% - 32px) / 3); }
    .hp-related__grid { grid-template-columns: repeat(2, 1fr); }

    /* Rail at desktop (R7, 2026-09-03; corrected 2026-09-04 evening): ONE column of up to 4
     * stacked rows, each row image-left at half the width, copy right in larger type — Adiba
     * [00:24] "a two column page with four rows… copy on the right hand column, image on the
     * left… in a bigger font… so that I can keep the image size", [00:50] "a big image to the
     * left and the text to the right with a larger font". The 2 x 4 grid of 200px thumbs that
     * shipped on 09-04 morning read "two columns" as two columns of cards and shrank the image;
     * the two columns are the image and the copy. Column-flow grid, rows = --hp-rail-rows =
     * min(4, N) from rail.php, columns 100% wide: today's caps (P6/T5 <= 6) put 4 in view and a
     * 5th/6th in a second 100%-wide column the arrows page to (scroll-snap-align: start, same
     * mechanism as the phone). P6 with 4 videos is ~1.45k px tall at 1440 — the price of the
     * image size she asked to keep. */
    .hp-rail__head { --hp-rail-h2-mb: 1rem; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; } /* no reserved arrow column or row here: overflow needs > 4 items, and hidden controls take no space */
    .hp-rail--grid .hp-rail__list {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: repeat(var(--hp-rail-rows, 4), auto);
        grid-auto-columns: 100%;
        gap: 16px;
    }
    .hp-rail--grid .hp-rail__list::after, .hp-rail--row .hp-rail__list::after { content: none; } /* the phone spacer would be a grid cell here */
    /* Practitioners through the same component (R11): one row of N on desktop — 2-up / 3-up /
     * 4-up, never wrap (round 2 §4; RULINGS §D no-action). Equal-width columns; the avatar
     * keeps the 120px token here (ruling 2026-09-03 §B). */
    .hp-rail--row .hp-rail__list {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 20px;
    }
    /* One or two practitioners (27 Oct, Diego): each card keeps the 4-up width and the row centres,
     * instead of one card stretching across the container. Three and four are unchanged.
     * rail.php adds --few for a row of 1-2; 60px = the three 20px gaps of a 4-up row. */
    .hp-rail--row.hp-rail--few .hp-rail__list { grid-auto-columns: calc((100% - 60px) / 4); justify-content: center; }
    .hp-rail--grid .hp-rail__item, .hp-rail--row .hp-rail__item { flex: none; }
    /* Rail item variant (>= 1024): image LEFT at half the row (~564px on the 1160 container,
     * 16:9), title + meta + CTA RIGHT, vertically centred on the image, one size up; the minutes
     * leave the thumb badge for the meta line. Was the former T5 "--compact" row at 200px. */
    .hp-vcard--rail .hp-vcard__link { flex-direction: row; align-items: center; gap: 24px; padding: 16px; }
    .hp-vcard--rail .hp-vcard__thumb { flex: 0 0 50%; aspect-ratio: 16 / 9; }
    .hp-vcard--rail .hp-vcard__body { padding: 0; flex: 1; min-width: 0; gap: 10px; }
    .hp-vcard--rail .hp-vcard__title { font-size: 1.375rem; -webkit-line-clamp: 3; }
    .hp-vcard--rail .hp-vcard__meta { font-size: 1rem; }
    .hp-vcard--rail .hp-vcard__cta { font-size: 1.0625rem; }
    .hp-vcard--rail .hp-vcard__duration { display: none; }
    .hp-vcard--rail .hp-vcard__mins { display: inline; }
    .hp-vcard--rail .hp-vcard__meta--mins-only { display: block; }

    .hp-expect__steps { flex-direction: row; gap: 32px; }
    .hp-expect__step { flex: 1; }

    .hp-fits__inner { flex-direction: row; justify-content: space-between; align-items: center; }
    .hp-fits__text { max-width: 60%; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hp-needs__grid { grid-template-columns: repeat(2, 1fr); }
    /* 2-col measure, odd card centered (same centered-second-row rule) */
    .hp-practices__list { display: flex; flex-wrap: wrap; justify-content: center; }
    .hp-practices__list > * { flex: 0 0 calc((100% - 16px) / 2); }
    .hp-expect__steps { flex-direction: row; flex-wrap: wrap; }
    .hp-expect__step { flex: 1 1 40%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hp-header, .hp-header__bar, .hp-btn { transition: none; }
    .hp-rail__list { scroll-behavior: auto; } /* hp-rail.js also picks behavior:auto from the same query */
}

/* ---------- theme-bleed overrides ----------
 * The Elementor kit + BuddyBoss sheets style bare button/input/heading
 * selectors with body-level specificity (.elementor-kit-7 button …). This
 * sheet loads last; these body-scoped rules out-rank the kit for every
 * control the healing-paths chrome owns. */

body.hp-page .hp-main h1 { color: var(--gg-berry); }
body.hp-page .hp-main .hp-h2, body.hp-page .hp-main .hp-h3 { color: var(--gg-title-secondary); }
body.hp-page .hp-main .hp-bg-berry .hp-h2, body.hp-page .hp-main .hp-bg-berry .hp-h3 { color: var(--gg-text-on-dark); }
body.hp-page .hp-hero__title { font-size: 1.875rem; line-height: 1.2; }
body.hp-page .hp-hero__title--practice { font-size: 1.6875rem; }
@media (min-width: 1024px) {
    body.hp-page .hp-hero__title { font-size: 2.875rem; }
    body.hp-page .hp-hero__title--practice { font-size: 2.5rem; }
}
body.hp-page .hp-btn { border-radius: 0; }

/* P5 practice cards sit on the locked white module — tint the cards so they
 * read as cards (the design's card anatomy) */
body.hp-page .hp-practices__card { background: var(--gg-petal-mist); }

/* Prose-only variant of P3/P7 when the instance has no image */
body.hp-page .hp-prose-narrow { max-width: calc(var(--gg-max-width) * 0.75); margin-left: auto; margin-right: auto; }

/* Rail arrows (Phase 4 / R7): the Elementor kit landmine site-chrome.css documents
 * (`.elementor-kit-7 button { min-width:227px; padding:10px !important }` — min-width beats
 * max-width, the padding carries !important) — counter both explicitly, then pin the visual
 * and its states at body scope so neither the kit nor BuddyBoss's bare-button styles out-rank
 * them (cascade-order ties do not survive RUCSS inlining — lessons 2026-08-31). Focus ring:
 * .hp-page :focus-visible. */
body.hp-page .hp-rail__btn {
    min-width: var(--gg-tap-min) !important;
    width: var(--gg-tap-min) !important;
    max-width: var(--gg-tap-min) !important;
    height: var(--gg-tap-min) !important;
    padding: 0 !important;
    display: inline-flex;
    background: none;
    border: 1px solid rgba(108, 29, 69, 0.35);
    border-radius: 50%;
    color: var(--gg-berry);
    box-shadow: none;
}
body.hp-page .hp-rail__btn:hover, body.hp-page .hp-rail__btn:focus-visible { background: var(--gg-berry); color: var(--gg-text-on-dark); border-color: var(--gg-berry); }
body.hp-page .hp-rail__btn[aria-disabled="true"] { opacity: 0.35; cursor: default; }
body.hp-page .hp-rail__btn[aria-disabled="true"]:hover { background: none; color: var(--gg-berry); border-color: rgba(108, 29, 69, 0.35); }

/* Rail item variant carries the minutes in the meta line at >= 1024 — drop the thumb badge
 * THERE ONLY: below 1024 the rail card is the stacked card and the badge is the one place the
 * number shows (.hp-vcard__mins is display:none at base). */
@media (min-width: 1024px) {
    body.hp-page .hp-vcard--rail .hp-vcard__duration { display: none; }
}

/* ---------- Hero variant B — full-bleed image, frames 1b/2b ---------- */

/* Image sits flush under the solid white bar: the breadcrumb strip moves below
 * the image (into the support strip) and the section loses its top padding. */
body.hp-page .hp-hero.hp-hero-b { padding-top: 0; }
body.hp-page .hp-hero-b__stage {
    position: relative;
    height: clamp(420px, 68vh, 560px);            /* phone */
    overflow: hidden;
}
body.hp-page .hp-hero-b__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    /* Default focal = the ruling's "50% 40%" (RULINGS §A3/A4, 2026-09-03): on a SQUARE
     * master, cover overflows only vertically in the desktop band (V acts) and only
     * horizontally in the phone frame (H acts) — one value serves both breakpoints, no
     * media query. The template always prints the page's pick inline
     * (gg_hp_hero_focal(), H from hp_hero_focal_h / V from hp_hero_focal_v); this is
     * the no-inline fallback. Heads sit above centre. */
    object-position: 50% 40%;
}
/* Veil system — R8 (2026-09-03, frames 2b / 1b): a full-bleed GRADIENT SCRIM and nothing else.
 * The round-3 "square blur" (desktop frosted plate + phone blurred band, both backdrop-filter)
 * is gone on both schemes: it did not match the site's aesthetic, and the minimal 0.45 -> 0 @ 52%
 * wash it came with was imperceptible on mid/bright photos — the "tint failed on 4 of 5"
 * (hypothesis H1 in the Phase 4 record). Stops are the measured, client-approved ones: dark
 * scheme from gg-wpe f0b1764 (08-22, 5.8–7.5:1 on NSR), light scheme from cd36543 (08-27,
 * 6.48–8.96:1). Desktop = side gradient under a bottom-LEFT text block (<= 620px) so the R5
 * subject zone (x 55–84%) stays clear; phone = bottom gradient under the same block. No
 * backdrop-filter anywhere, so no @supports fallback. Alphas are custom properties so a
 * per-page walk-up is one inline override on the section (template-pillar.php maps
 * hp_hero_scrim_a -> --gg-ov-a and hp_hero_scrim_phone_a -> --gg-ov-phone-a since round 10; +0.04 per
 * step until worst-pixel AA >= 4.5:1 passes, HARD CAP 0.90 — a photo that still fails there
 * fails art direction: swap the photo, never deepen further). */
/* Round 10 (R10-4): the gradient is the shared HERO OVERLAY rule (end of this
 * sheet); the pillar states its defaults as numbers. Phone (< 1024), frame 1b,
 * as a wash rising from the bottom: full α at the bottom edge, .90α at 28%,
 * .78α at 60%, clear from 86% (= the old "clear over the top 14%"). */
body.hp-page .hp-hero-b {
    --gg-ov-rgb: var(--gg-scrim);
    --gg-ov-a: 0.75;
    --gg-ov-phone-a: 0.80;
    --gg-ov-is-phone: 1;
    --gg-ov-angle: to top;
    --gg-ov-f1: .28;  --gg-ov-k1: .90;
    --gg-ov-f2: .60;  --gg-ov-k2: .78;
    --gg-ov-f3: .86;  --gg-ov-k3: 0;
}
body.hp-page .hp-hero-b--light { --gg-ov-a: 0.85; --gg-ov-phone-a: 0.88; }

/* Phone (< 1024) — the bottom scrim, frame 1b: clear over the top 14%, rising to the full
 * phone alpha at the hero's bottom edge, under the text block. The scrim div paints between
 * the image and the content (DOM order); no blurred band, no padding-top on the content. */
body.hp-page .hp-hero-b__scrim {
    display: block;
    position: absolute; inset: 0;
    /* the gradient: HERO OVERLAY (round 10) */
}
body.hp-page .hp-hero-b__content {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding-bottom: 28px;
    color: var(--gg-text-on-dark);
}
body.hp-page .hp-hero-b__content .hp-hero__title,
body.hp-page .hp-hero-b__content .hp-eyebrow,
body.hp-page .hp-hero-b__content .hp-hero__sub { color: var(--gg-text-on-dark); }
body.hp-page .hp-hero-b__support { padding: 24px var(--gg-gutter) 0; }
/* L2 (26 Oct): space between the breadcrumb and the Supporting copy. The paragraph prints
 * only when Supporting is filled, so an empty band does not grow. */
body.hp-page .hp-hero-b__support .hp-hero__support { margin-top: 20px; }

@media (min-width: 1024px) {
    body.hp-page .hp-hero-b__stage { height: clamp(480px, 60vh, 640px); }
    /* Desktop — the side scrim, frame 2b: full alpha at the left edge, ≈0.67α at x 53% where
     * the <= 620px text block ends (RULINGS A3 "text covers x 10–53%"), <= 0.30α over the
     * subject zone (x 55–84%), clear from 84%. */
    body.hp-page .hp-hero-b {
        --gg-ov-is-phone: 0;
        --gg-ov-angle: 90deg;
        --gg-ov-f1: .56;  --gg-ov-k1: .88;
        --gg-ov-f2: .70;  --gg-ov-k2: .40;
        --gg-ov-f3: .84;  --gg-ov-k3: 0;
    }
    /* Bottom-left anchor (RULINGS §D decide 12): the text block sits 48px off the hero's bottom
     * edge — no top:0, no flex centring (that was the centred plate). */
    body.hp-page .hp-hero-b__content { bottom: 48px; padding-bottom: 0; display: block; }
    body.hp-page .hp-hero-b__text { max-width: 620px; } /* <= 620 kept; no padding, no background */
}

/* Light scheme text colours (QA 08-27, unchanged by round 3): text prints as
 * it would on white — H1/eyebrow Berry, support Soft Black, links Berry. */
body.hp-page .hp-hero-b--light .hp-hero-b__content { color: var(--gg-text); }
body.hp-page .hp-hero-b--light .hp-hero-b__content .hp-hero__title { color: var(--gg-berry); }
body.hp-page .hp-hero-b--light .hp-hero-b__content .hp-eyebrow { color: var(--gg-berry); } /* not title-secondary: fails worst-pixel AA over a photo */
body.hp-page .hp-hero-b--light .hp-hero-b__content .hp-hero__sub { color: var(--gg-text); }
body.hp-page .hp-hero-b--light .hp-hero-b__content .hp-textlink--on-berry { color: var(--gg-berry) !important; }
body.hp-page .hp-hero-b--light .hp-roundel--hero { background: var(--gg-berry); } /* explicit wiring point for the SVG icon set (C4) */

/* Repeat trial CTA below the hero (QA 08-27) — global M1 content, per-page
 * toggle, logged-out only (rendered server-side). */
body.hp-page .hp-hero__cta-repeat { padding-top: 20px; }

/* QA 08-27: the gap under the hero support copy measured ~2 section pads
 * (P1 bottom + P2 top). Tighten B's own bottom padding; P2's top pad remains. */
body.hp-page .hp-hero.hp-hero-b { padding-bottom: 24px; }
@media (min-width: 1024px) {
    body.hp-page .hp-hero.hp-hero-b { padding-bottom: 32px; }
}

/* ---------- M1 Membership CTA — round 2 §7 ---------- */

/* Femme Rose band directly below the berry band (P10/T9) — visually distinct,
 * preserving the one-berry-band rule. All text GAIA BERRY, never white
 * (5.2:1 measured); the H2 uses Berry here, not the secondary plum (contrast
 * on this surface). Modest height — an invitation, not a second hero. */
body.hp-page .hp-m1 { padding: 40px 0; color: var(--gg-berry); }
body.hp-page .hp-m1__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
body.hp-page .hp-main .hp-m1 .hp-eyebrow { color: var(--gg-berry); }
body.hp-page .hp-main .hp-m1 .hp-h2 { color: var(--gg-berry); margin-bottom: 6px; }
body.hp-page .hp-m1__line { margin: 0 0 18px; max-width: 46em; }
body.hp-page .hp-m1__action { flex: none; }
@media (min-width: 1024px) {
    body.hp-page .hp-m1 { padding: 48px 0; }
    body.hp-page .hp-m1__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; }
    body.hp-page .hp-m1__line { margin-bottom: 0; }
}

/* ==========================================================================
 * Templates v3 — ADR 0026 (pillar) / ADR 0027 (practice), 2026-09-11.
 *
 * New modules from Adiba's 09-11 content mockups, built out of the component
 * vocabulary that is already here: the card, the eyebrow, the tint set, the
 * 0-radius edge, the two type families. No new colour, no third tint, no new
 * card anatomy — the content is hers, the visual system stays ours (ADR 0025).
 * ========================================================================== */

/* ---------- icon mask ----------
 * Moved to site-chrome.css (after .hp-roundel--icon svg), 20 Oct: header v4
 * renders the path icons on every page, and this file loads only on Healing
 * Paths templates (ADR 0016 D3), so the rule has to live with the chrome. */

/* ---------- in-page anchors ----------
 * Every module that the jump nav or a hero CTA targets carries an id. The
 * scroll-margin keeps the heading clear of the sticky header instead of
 * landing under it. .hp-anchor-alias is a zero-height target that keeps an
 * OLD slug working after the canonical one changed (#what-is, #what-to-expect):
 * it occupies no space and is invisible to AT. */
body.hp-page:is(:not(.gg-video-page), .gg-video-extras) [id] { scroll-margin-top: calc(var(--gg-header-h-phone) + 12px); }
.hp-anchor-alias { display: block; height: 0; overflow: hidden; }

/* ---------- shared: optional lead-in under a module heading ---------- */
.hp-module__lede { margin: 10px 0 0; max-width: 46em; }

/* ---------- P1b intro band ----------
 * One paragraph, no heading, set larger than body copy in the heading face —
 * the "read this first" beat between the hero and the first real section.
 * Tighter vertical rhythm than a full module: it is a bridge, not a section. */
.hp-introband { padding-top: 32px; padding-bottom: 32px; }
.hp-introband__body {
    margin: 0;
    max-width: 44em;
    font-family: var(--gg-font-heading);
    font-size: 1.25rem;
    line-height: 1.45;
    color: var(--gg-text);
}

/* ---------- P3c how-to grid ----------
 * Prose cards: heading + paragraph, no image, no link. Deliberately flatter
 * than the P4 need card directly below it, which is the routing module —
 * two card treatments in a row would read as one long grid. */
.hp-howto__grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
.hp-howto__card { gap: 8px; }
.hp-howto__card .hp-h3 { margin: 0; }
.hp-howto__card p { margin: 0; }

/* ---------- T1b jump nav ----------
 * A single scrollable row under the practice hero. Below 1024 it scrolls
 * horizontally rather than wrapping to three lines; the scrollbar is hidden
 * but the row stays keyboard- and swipe-reachable. */
.hp-jumpnav {
    border-top: 1px solid rgba(108, 29, 69, 0.14);
    border-bottom: 1px solid rgba(108, 29, 69, 0.14);
    background: var(--gg-white);
}
.hp-jumpnav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.hp-jumpnav__list::-webkit-scrollbar { display: none; }
.hp-jumpnav__list li { flex: none; }
.hp-jumpnav__list a {
    display: inline-flex;
    align-items: center;
    min-height: var(--gg-tap-min);
    font-size: 0.9375rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--gg-title-secondary);
}
.hp-jumpnav__list a:hover, .hp-jumpnav__list a:focus-visible { color: var(--gg-berry); }

/* ---------- P9b / T8b FAQ ----------
 * Native <details>/<summary>: works with no JavaScript, is findable by the
 * browser's own in-page search, and needs no ARIA of our own. The marker is
 * a CSS +/− built from a border pair, so nothing depends on the UA triangle
 * (which Safari and Firefox draw differently and Chrome cannot restyle). */
.hp-faq__inner { max-width: 52em; }
.hp-faq__list { margin-top: 20px; border-top: 1px solid rgba(108, 29, 69, 0.16); }
.hp-faq__item { border-bottom: 1px solid rgba(108, 29, 69, 0.16); }
.hp-faq__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 0;
    min-height: var(--gg-tap-min);
    cursor: pointer;
    list-style: none;
    font-family: var(--gg-font-heading);
    font-size: 1.0625rem;
    line-height: 1.35;
    color: var(--gg-berry);
}
.hp-faq__q::-webkit-details-marker { display: none; }
.hp-faq__q::after {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 4px;
    background:
        linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat,
        linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat;
    transition: transform 0.15s ease;
}
.hp-faq__item[open] .hp-faq__q::after {
    background: linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat;
}
.hp-faq__q:hover, .hp-faq__q:focus-visible { color: var(--gg-mulberry); }
.hp-faq__a { padding: 0 0 20px; max-width: 46em; }
.hp-faq__a p { margin: 0 0 1em; }
.hp-faq__a p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
    .hp-faq__q::after { transition: none; }
}

/* ---------- T7 related-practice cards ----------
 * Replaces the "Related: a · b · c" run-in line. Cards, because every other
 * route off this page is a card. */
.hp-fits__grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
.hp-fits__card { gap: 10px; }
.hp-fits__card .hp-h3 { margin: 0; }

/* ---------- P10 / T9 CTA row ----------
 * The button and the secondary link sit on one centred row, wrapping to two
 * on a phone. Adiba's pillar close carries both (Explore Practices + Start
 * Your Free Trial) rather than a separate band below. */
.hp-finalcta__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px; }

/* ---------- pinned rail cards ----------
 * A pinned row may add a category eyebrow above the title and a blurb under
 * the meta line. Auto rows set neither, so nothing here applies to them. */
.hp-vcard__eyebrow { color: var(--gg-title-secondary); }
.hp-vcard__blurb { font-size: 0.9375rem; color: var(--gg-text); }

/* ---------- 40/60 split with an eyebrow ----------
 * T2 / T3 wrap their heading in a head block now that an eyebrow and a lead-in
 * can sit with it; the base rule targeted a bare <h2>. */
.hp-split-40-60 > .hp-definition__head,
.hp-split-40-60 > .hp-recognition__head { display: block; }
.hp-definition__head .hp-h2, .hp-recognition__head .hp-h2 { margin-top: 0; }

@media (min-width: 1024px) {
    .hp-introband { padding-top: 44px; padding-bottom: 44px; }
    .hp-introband__body { font-size: 1.5rem; max-width: 42em; }

    .hp-howto__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }

    .hp-split-40-60 > .hp-definition__head,
    .hp-split-40-60 > .hp-recognition__head { flex: 0 0 38%; }

    .hp-faq__q { font-size: 1.1875rem; }

    /* P9 renders all four siblings since v3 — two columns of two, not a four-across
     * strip that would shrink each card below its copy measure. */
    .hp-related__grid--four { grid-template-columns: repeat(2, 1fr); }

    .hp-fits__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }

    body.hp-page:is(:not(.gg-video-page), .gg-video-extras) [id] { scroll-margin-top: calc(var(--gg-header-h-desktop) + 16px); }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hp-howto__grid { grid-template-columns: repeat(2, 1fr); }
    .hp-fits__grid { grid-template-columns: repeat(3, 1fr); }
    .hp-related__grid--four { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- theme-bleed overrides (same reason as the block above) ----------
 * The Elementor kit and BuddyBoss style bare element selectors at body-level
 * specificity; anything the kit also targets has to be pinned at body scope
 * here or RUCSS inlining can reorder it away. */
body.hp-page .hp-howto__card, body.hp-page .hp-fits__card { background: var(--gg-petal-mist); }
body.hp-page .hp-bg-white .hp-howto__card, body.hp-page .hp-bg-white .hp-fits__card { background: var(--gg-petal-mist); }
body.hp-page .hp-faq summary { list-style: none; }
body.hp-page .hp-jumpnav a { text-decoration: none; }
body.hp-page .hp-jumpnav a:hover, body.hp-page .hp-jumpnav a:focus-visible { text-decoration: underline; }

/* ==========================================================================
 * ROUND 5 — 2026-09-17. Diego's list for the pillar, practice and home v4
 * templates. Each block names the ask it answers. Specificity, not source
 * order, for every rule that has to beat an earlier one: RUCSS re-orders
 * concatenated CSS (the 76px header-gap lesson, 2026-08-31).
 * ========================================================================== */

/* ---------- balanced card rows (.hp-balance) ----------
 * "when there are 5 cards, we should show 3 in a row and 2 in another … We
 * can't have 4 and 1." The COLUMN COUNT is decided in PHP from the number of
 * cards that actually render (gg_hp_balance_style() → --hp-cols / --hp-cols-md
 * inline on the grid); this sheet only turns that number into a centred,
 * wrapping row, so a short last row sits in the middle exactly like home v4's
 * H6. (0,3,0) on purpose: it has to beat each module's own `display: grid` /
 * `repeat(4, 1fr)` and home v4's per-card `flex` rules, all (0,1,0)–(0,2,0).
 * One column below 768. */
.hp-module .hp-container .hp-balance {
    --hp-balance-gap: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--hp-balance-gap);
}
.hp-module .hp-container .hp-balance > * {
    flex: 0 0 100%;
    min-width: 0;
    box-sizing: border-box;
}
@media (min-width: 768px) and (max-width: 1023px) {
    .hp-module .hp-container .hp-balance > * {
        flex-basis: calc((100% - (var(--hp-cols-md, 3) - 1) * var(--hp-balance-gap)) / var(--hp-cols-md, 3));
    }
}
@media (min-width: 1024px) {
    .hp-module .hp-container .hp-balance { --hp-balance-gap: 20px; }
    .hp-module .hp-container .hp-balance > * {
        flex-basis: calc((100% - (var(--hp-cols, 4) - 1) * var(--hp-balance-gap)) / var(--hp-cols, 4));
    }
}

/* ---------- section CTA row (P5 "View all N classes", P9 "View All Five Healing Paths") ----------
 * "should be a primary CTA" — both are .hp-btn now, centred under the cards the
 * way home v4 centres "Explore All Five Healing Paths". */
.hp-module .hp-container .hp-section-cta {
    display: flex;
    justify-content: center;
    margin: 28px 0 0;
}

/* ---------- P9 roundels: berry disc, white glyph ----------
 * "we should use primary color as background (same treatment as in 'Explore
 * the Gaia Goddess Healing Paths' section in home v4)". Home v4 H6 draws a
 * 52px disc at 390 and 64px at 1440 with the glyph at ~42% — the same numbers
 * here. Since round 9 the tile rules near the top of this sheet that repaint
 * card roundels Petal Mist / White carry :not(.hp-roundel--glyph), which makes
 * them (0,4,0) like this rule: for a roundel WITH a glyph they do not match at
 * all; for an EMPTY one this rule wins only because it comes later in the file,
 * so keep it below them. */
.hp-related .hp-card .hp-roundel--icon.hp-roundel--solid {
    width: var(--gg-roundel-hero-phone);
    height: var(--gg-roundel-hero-phone);
    background: var(--gg-berry);
    color: var(--gg-text-on-dark);
}
.hp-related .hp-card .hp-roundel--solid .hp-icon-mask,
.hp-related .hp-card .hp-roundel--solid svg { width: 42%; height: 42%; }
@media (min-width: 1024px) {
    .hp-related .hp-card .hp-roundel--icon.hp-roundel--solid {
        width: var(--gg-roundel-hero-desktop);
        height: var(--gg-roundel-hero-desktop);
    }
}

/* ---------- P2 "This Path May Support You If…" — heading over the rows, image left ----------
 * With an image: two columns at >= 1024, text right / image left (the DOM is
 * text first; the row is reversed here). The image fills its column's HEIGHT
 * rather than holding a fixed ratio, so four rows or eight, the photo and the
 * list end on the same line. Below 1024 it stacks text-first like every other
 * split, the photo at 4:3 under the list. Without an image the template prints
 * .hp-prose-narrow instead and none of this applies. */
.hp-recognition__split { display: flex; flex-direction: column; gap: 24px; }
.hp-recognition__body { min-width: 0; }
.hp-recognition__body .hp-h2 { margin-top: 0; }
.hp-recognition__media {
    position: relative;
    aspect-ratio: 4 / 5;              /* the field asks for a 4:5 portrait; never crop it landscape */
    max-height: 560px;
    overflow: hidden;
    background: var(--gg-dawn-pink);
}
.hp-recognition__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (min-width: 1024px) {
    .hp-recognition .hp-recognition__split {
        flex-direction: row-reverse;
        align-items: stretch;
        gap: 48px;
    }
    .hp-recognition .hp-recognition__media {
        flex: 0 0 40%;
        aspect-ratio: auto;
        max-height: none;
        min-height: 420px;
    }
    .hp-recognition .hp-recognition__body {
        flex: 1;
        align-self: center;
    }
}

/* ---------- P6 video cards with the favourites heart (.hp-vcard--fav) ----------
 * The markup and the reasoning are in template-parts/healing/video-card.php.
 * The wrapper is a <div> here, the title is the link, and the title's ::after
 * is stretched over the whole card so a click anywhere still opens the video.
 * The heart sits one layer above it. Its filled/.active state is toggled by the
 * gg-favorites plugin script at runtime, and the <button> only exists for
 * signed-in visitors, so those rules live in site-chrome.css (on the RUCSS
 * safelist in every environment) and never here. */
.hp-vcard--fav { position: relative; }
.hp-vcard--fav .hp-vcard__link { cursor: pointer; }
.hp-vcard--fav .hp-vcard__title-link {
    color: var(--gg-text) !important;
    text-decoration: none !important;
}
.hp-vcard--fav .hp-vcard__title-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.hp-vcard--fav .hp-vcard__fav {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--gg-tap-min);
    margin-top: -6px;                 /* "Watch" keeps margin-top:auto; the heart follows it */
    padding: 0;
    background: none;
    border: 0;
    font-family: var(--gg-font-body);
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--gg-berry);
    text-decoration: none;
    cursor: pointer;
}
.hp-vcard--fav .gg-favorites-icon {
    display: inline-block;
    flex: none;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.hp-page .hp-vcard--fav .hp-vcard__fav:hover .gg-favorites-label,
body.hp-page .hp-vcard--fav .hp-vcard__fav:focus-visible .gg-favorites-label { text-decoration: underline; }
/* The signed-out variant is an <a>: pin its colour against the kit's link
 * colour. The <button> variant's counter-rules (the kit's 227px min-width) live
 * in site-chrome.css, because that element only exists in logged-in HTML and
 * this sheet is not on the RUCSS safelist. */
body.hp-page .hp-vcard--fav a.hp-vcard__fav { color: var(--gg-berry) !important; text-decoration: none !important; }
@media (min-width: 1024px) {
    .hp-vcard--rail.hp-vcard--fav .hp-vcard__fav { font-size: 1rem; }
}

/* ---------- floating section navigator (.hp-secnav) ----------
 * Moved to css/site-chrome.css on 2026-10-13 (round 10 feedback F5): the Top
 * button now also shows on pages that do not load this sheet (video index). */

/* ---------- Round 8, C2 — icon colours (2 Oct weekly) ----------
 * A HEALING PATH's icon is Gaia Berry. On the practice page the "Part of <path>"
 * marker (T1) and the T7 roundel were the pale tile, which Adiba read as grey
 * ("it's in gray right now") — they take the Berry disc + white glyph that H6,
 * P9 and the hub already use. Only when a glyph is actually there: an empty
 * tile stays a pale tile, never a solid disc (R12/R20.3). Round 9 made that
 * the rule for every pillar roundel, so the two selectors that lived here are
 * now the general `.hp-roundel--icon.hp-roundel--glyph` in site-chrome.css. */
/* A PRACTICE's icon is Mauve: a Mauve disc, white glyph (5.5:1), on the top
 * left of the practice hero image. Printed by template-practice.php only when
 * images/healing/icons/practices/<slug>.svg exists; the SVG is inline and
 * strokes/fills currentColor. */
body.hp-page .hp-hero--practice .hp-hero__media { position: relative; }
body.hp-page .hp-practice-icon {
    position: absolute;
    top: 16px;
    left: 16px;
    width: var(--gg-roundel-hero-phone);
    height: var(--gg-roundel-hero-phone);
    border-radius: 50%;
    background: var(--gg-title-secondary);
    color: var(--gg-text-on-dark);
    display: grid;
    place-items: center;
    box-shadow: 0 4px 14px rgb(var(--gg-scrim) / .25);
}
body.hp-page .hp-practice-icon svg { width: 46%; height: 46%; display: block; }
@media (min-width: 1024px) {
    body.hp-page .hp-practice-icon {
        top: 20px;
        left: 20px;
        width: var(--gg-roundel-hero-desktop);
        height: var(--gg-roundel-hero-desktop);
    }
}

/* ---------- Round 8, C4 — Hero B horizontal shift (desktop) ----------
 * On desktop the square master fills the band's WIDTH and is cropped top and
 * bottom only, so object-position cannot move it sideways (it can on phones,
 * where the H focal acts). hp_hero_shift_x (0-25 %, printed by
 * template-pillar.php as --hp-shift-x plus .hp-hero-b--shift) slides the
 * image itself right. The strip it uncovers is the STAGE, painted the tint
 * colour, and the image's left edge fades into it, so under the side scrim
 * (0.66-0.75 alpha over the left 56 %) the join reads as more tint, not as an
 * edge. Phones keep the plain cover crop. */
@media (min-width: 1024px) {
    body.hp-page .hp-hero-b--shift .hp-hero-b__stage { background: rgb(var(--gg-ov-rgb)); } /* round 10: the overlay colour */
    body.hp-page .hp-hero-b--shift .hp-hero-b__img {
        transform: translateX(var(--hp-shift-x, 0%));
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%);
        mask-image: linear-gradient(90deg, transparent 0, #000 14%);
    }
}

/* ---------- Round 8, D — tap targets of at least 24px (WCAG 2.5.8) ----------
 * The mobile pass measured the breadcrumb links at 16px tall and the hero's
 * secondary text link at 20px on every healing path and practice page. Padding
 * grows the hit area; the equal negative margin gives the line its height
 * back, so nothing on the page moves. */
body.hp-page .hp-breadcrumb a {
    display: inline-block;
    padding-block: 4px;
    margin-block: -4px;
}
body.hp-page .hp-textlink {
    display: inline-block;
    padding-block: 2px;
    margin-block: -2px;
}

/* ==========================================================================
 * HERO OVERLAY — round 10 (R10-4, 2026-10-12). ONE rule draws the gradient
 * over every photo hero (home v4 + library slides, pillar, hub); the markup
 * comes from gg_hero_overlay_attrs() (inc/hero-overlay.php).
 *
 * A hero's own sheet only states numbers on the hero element:
 *   --gg-ov-rgb              the fade colour (dark default; white below)
 *   --gg-ov-a / -phone-a     maximum opacity, desktop / phone
 *   --gg-ov-is-phone         1 below the template's breakpoint, 0 above
 *   --gg-ov-angle            gradient direction at that width
 *   --gg-ov-f1..f3, k1..k3   three stops: at fraction f of the faded span the
 *                            alpha is k × the maximum. These reproduce each
 *                            template's pre-round-10 gradient exactly.
 * The editor's values arrive as inline custom properties on the hero (or the
 * slide): --gg-ov-start (where the solid colour starts fading; the stops are
 * remapped over what is left), --gg-ov-end + --gg-ov-endset (F3, 13 Oct: where
 * it is fully clear), --gg-ov-a, --gg-ov-phone-a. Empty = template.
 *
 * The alpha is resolved HERE, on the scrim, because a custom property that
 * references another is computed where it is declared: resolving it on the
 * hero would freeze the hero's defaults and ignore a slide's inline value.
 * ========================================================================== */
/* "Gradient ends at" (round 10 feedback F3, 13 Oct): --gg-ov-end + --gg-ov-endset:1
 * arrive together from the helper. With them, the faded span runs start -> end,
 * the stops are stretched so the last one lands ON the end (f / f3), and the
 * last one is fully clear. Without them (endset 0) end = 100%, the stretch is 1
 * and k3 is the template's: the exact pre-F3 gradient, stop for stop. */
body.hp-page .gg-ov__scrim {
    --gg-ov-alpha: calc(var(--gg-ov-phone-a) * var(--gg-ov-is-phone) + var(--gg-ov-a) * (1 - var(--gg-ov-is-phone)));
    --gg-ov-s: var(--gg-ov-start, 0%);
    --gg-ov-span: calc((var(--gg-ov-end, 100%) - var(--gg-ov-s)) / (1 + var(--gg-ov-endset, 0) * (var(--gg-ov-f3) - 1)));
    background: linear-gradient(var(--gg-ov-angle),
        rgb(var(--gg-ov-rgb) / var(--gg-ov-alpha)) 0%,
        rgb(var(--gg-ov-rgb) / var(--gg-ov-alpha)) var(--gg-ov-s),
        rgb(var(--gg-ov-rgb) / calc(var(--gg-ov-alpha) * var(--gg-ov-k1))) calc(var(--gg-ov-s) + var(--gg-ov-span) * var(--gg-ov-f1)),
        rgb(var(--gg-ov-rgb) / calc(var(--gg-ov-alpha) * var(--gg-ov-k2))) calc(var(--gg-ov-s) + var(--gg-ov-span) * var(--gg-ov-f2)),
        rgb(var(--gg-ov-rgb) / calc(var(--gg-ov-alpha) * var(--gg-ov-k3) * (1 - var(--gg-ov-endset, 0)))) calc(var(--gg-ov-s) + var(--gg-ov-span) * var(--gg-ov-f3)));
}
/* Fade to white: the colour flips here, once, for every hero. (0,3,1) beats
 * the templates' own default declarations on the same element. */
body.hp-page .gg-ov.is-overlay-dark { --gg-ov-rgb: 255 255 255; }

/* ==========================================================================
 * NO GRADIENT, pillar hero (30 Oct, Diego): with "No gradient" ticked,
 * template-pillar.php prints the secondary CTA as an outlined button instead of
 * the underlined text link, and it takes the homepage hero's tinted, blurred
 * fill (healing-home-v4.css "NO GRADIENT"), so it reads on any photo. Berry at
 * .72 under white text (5.1:1 or better even on a white photo); a white-fade
 * hero (dark text) gets petal mist at .82 under berry text. .gg-ov--off comes
 * from gg_hero_overlay_attrs(), in the server HTML, so used CSS keeps the rule.
 * The pair follows the homepage hero (Diego, 30 Oct): on a dark fade the
 * primary is white with berry text, so it never sits as a second berry button
 * beside the berry-filled secondary; a white fade keeps the berry primary.
 * ========================================================================== */
body.hp-page .hp-hero-b.gg-ov--off:not(.is-overlay-dark) .hp-hero__actions .hp-btn:not(.hp-btn--ghost) {
    background: var(--gg-white);
    color: var(--gg-berry) !important;
    border-color: var(--gg-white);
}
body.hp-page .hp-hero-b.gg-ov--off:not(.is-overlay-dark) .hp-hero__actions .hp-btn:not(.hp-btn--ghost):hover,
body.hp-page .hp-hero-b.gg-ov--off:not(.is-overlay-dark) .hp-hero__actions .hp-btn:not(.hp-btn--ghost):focus-visible {
    background: var(--gg-dawn-pink);
    border-color: var(--gg-dawn-pink);
}
body.hp-page .hp-hero-b.gg-ov--off .hp-btn.hp-btn--ghost {
    background: rgb(108 29 69 / 0.72);   /* --gg-berry */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--gg-text-on-dark) !important;
    border-color: var(--gg-white);
}
body.hp-page .hp-hero-b.gg-ov--off .hp-btn.hp-btn--ghost:hover,
body.hp-page .hp-hero-b.gg-ov--off .hp-btn.hp-btn--ghost:focus-visible {
    background: var(--gg-petal-mist);
    color: var(--gg-berry) !important;
    border-color: var(--gg-petal-mist);
}
body.hp-page .hp-hero-b.gg-ov--off.is-overlay-dark .hp-btn.hp-btn--ghost {
    background: rgb(248 242 244 / 0.82);   /* --gg-petal-mist */
    color: var(--gg-berry) !important;
    border-color: var(--gg-berry);
}
body.hp-page .hp-hero-b.gg-ov--off.is-overlay-dark .hp-btn.hp-btn--ghost:hover,
body.hp-page .hp-hero-b.gg-ov--off.is-overlay-dark .hp-btn.hp-btn--ghost:focus-visible {
    background: var(--gg-berry);
    color: var(--gg-text-on-dark) !important;
    border-color: var(--gg-berry);
}