/* =====================
   Root + Stage Reserves
   ===================== */
:root {
    /* spacing */
    --SHG-gap: 12px;
    --SHG-pad: 14px;
    /* reserve space for the placeholder nav (restored) */
    --SHG-nav-h: var(--s0-navbar-height);
    /* sticky chrome reserves (adjust as needed) */
    /* e.g. 64px if you have a sticky header */
    --SHG-consent-h: 0px;
    /* e.g. cookie/consent bar height */
    --SHG-ad-anchor-h: 0px;
    /* e.g. AdSense Anchor */
    --SHG-vh-fudge: 1px;
    /* small safety to avoid rounding cuts */
    /* colors */
    --SHG-bg: #0b1020;
    --SHG-tile: #121832;
    --SHG-tile-2: #0f142a;
    --SHG-ink: #edf1ff;
    --SHG-muted: #b9c2e3;
    --SHG-outline: color-mix(in srgb, #fff 14%, transparent);
    --SHG-cta-1: #5ca9ff;
    --SHG-cta-2: #2a76ff;
    --SHG-cta-3: #1d52d6;
    --SHG-ring: #8cc2ff;
    --SHG-shadow: 0 6px 18px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .18);
    /* type */
    --SHG-logo-tracking: .5px;
    /* centralized font-size variables for three layouts / responsive control */
    /* Mobile-first: default maps to tall (2x6). Media queries remap for 3x4 and 4x3. */
    --SHG-font-title: var(--SHG-2-6-font-size-title);
    --SHG-font-lead: var(--SHG-2-6-font-size-subtitle);
    --SHG-font-cta: var(--SHG-2-6-font-size-cta);
    --SHG-font-card-h3: var(--SHG-2-6-font-size-card-h3);
    --SHG-font-card-p: var(--SHG-2-6-font-size-card-p);
    --SHG-font-dev-label: 10px;
    --SHG-font-carousel-icon: 1rem;
    --SHG-font-v-overlay: clamp(12px, 1.6vw, 14px);
    --SHG-font-social-link: 13.8cqmin;
    --SHG-font-site-nav: 14px;
    /* per-layout named variables (SHG = surface hero) */
    /* 2x6 tall layout - Default */
    --SHG-2-6-font-size-title: clamp(32px, 10vw, 60px);
    --SHG-2-6-font-size-subtitle: clamp(13px, 4vw, 22px);
    --SHG-2-6-font-size-cta: clamp(19px, 2.0vw, 28px);
    --SHG-2-6-font-size-card-h3: clamp(15px, 2.0vw + 3px, 22px);
    --SHG-2-6-font-size-card-p: clamp(11px, .8vw + 3px, 13px);
    /* 3x4 base layout */
    --SHG-3-4-font-size-title: clamp(4.6rem, 6vw, 7rem);
    --SHG-3-4-font-size-subtitle: clamp(1.3rem, 1.1vw + 6px, 18px);
    --SHG-3-4-font-size-cta: clamp(2rem, 2vw, 3rem);
    --SHG-3-4-font-size-card-h3: clamp(1.2rem, 1.2vw + 4px, 18px);
    --SHG-3-4-font-size-card-p: clamp(1rem, 2vw, 2rem);

    /* 4x3 mid-wide layout */
    --SHG-4-3-font-size-title: clamp(67px, 8vw, 70px);
    --SHG-4-3-font-size-subtitle: clamp(15px, 1.2vw, 20px);
    --SHG-4-3-font-size-cta: clamp(22px, 4vw, 33px);
    --SHG-4-3-font-size-card-h3: clamp(15px, 1.4vw + 4px, 20px);
    --SHG-4-3-font-size-card-p: clamp(13px, 1.0vw + 4px, 15px);
}

/* in new_hero_grid.css */
#S1-Hero {
    min-height: 100svh;
    /* not 100dvh */
    height: 100svh;
    /* not 100vh */
    padding-top: var(--s0-navbar-height);
    /* add breathing room below hero across layouts */
    margin-bottom: clamp(16px, 5vh, 56px);
    overflow: hidden;
    width: 100%;
}

/* safe-area padding and stage height */
#SHG-Hero-Grid {
    margin: 0;
    padding: 8px;
    color: var(--SHG-ink);
    background: radial-gradient(1200px 800px at 10% -10%, #1a2246 0%, transparent 60%), var(--SHG-bg);
    font: 400 14px/1.4 Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* replace the whole .SHG-stage height calc with: */
.SHG-stage {
    block-size: 100%;
    overflow: hidden;
    place-items: center;
}

/* Prevent flash of content before JS sets initial animation states */
.SHG-hero .SHG-tile {
    opacity: 0;
}


/* Slightly increase safety margin for very-wide aspect ratios often seen in mobile emulators */
@media (min-aspect-ratio: 160/100) {
    :root {
        --SHG-vh-fudge: 2px;
    }
}

@media (min-aspect-ratio: 200/100) {
    :root {
        --SHG-vh-fudge: 3px;
    }
}

/* Clamp to the smaller of svh/dvh when both are available */
@supports (height: 100svh) and (height: 100dvh) {
    .SHG-stage {
        block-size: calc(min(100svh, 100dvh) - var(--SHG-nav-h) - var(--SHG-consent-h) - var(--SHG-ad-anchor-h) - var(--SHG-vh-fudge));
    }
}

/* If only svh is available, use it (iOS stability) */
@supports ((height: 100svh) and (not (height: 100dvh))) {
    .SHG-stage {
        block-size: calc(100svh - var(--SHG-nav-h) - var(--SHG-consent-h) - var(--SHG-ad-anchor-h) - var(--SHG-vh-fudge));
    }
}

/* If only dvh is available, use it */
@supports ((height: 100dvh) and (not (height: 100svh))) {
    .SHG-stage {
        block-size: calc(100dvh - var(--SHG-nav-h) - var(--SHG-consent-h) - var(--SHG-ad-anchor-h) - var(--SHG-vh-fudge));
    }
}

/* =====================   Grid Engine (Mobile-first 2x6)   ===================== */
.SHG-hero {
    display: grid;
    gap: var(--SHG-gap);
    inline-size: 100%;
    block-size: 100%;
    /* prevent viewport-scrollbar induced reflow during hovers */
    overflow: clip;
    /* base surface: 26 (tall portrait) */
    --SHG-cols: 2;
    --SHG-rows: 6;
    /* Scale the first two rows slightly smaller for better balance */
    --SHG-title-row-scale: 0.7;
    /* Total height available for cells (excluding gaps) */
    --SHG-available-h: calc(100% - (var(--SHG-rows) - 1) * var(--SHG-gap));
    /* Default height of a single row if all were equal */
    --SHG-default-row-h: calc(var(--SHG-available-h) / var(--SHG-rows));
    /* Scaled height for each of the first two rows */
    --SHG-title-row-h: calc(var(--SHG-default-row-h) * var(--SHG-title-row-scale));
    /* Total height taken by the two title rows */
    --SHG-title-rows-total-h: calc(var(--SHG-title-row-h) * 2);
    /* Remaining height for the other 4 rows */
    --SHG-other-rows-total-h: calc(var(--SHG-available-h) - var(--SHG-title-rows-total-h));
    /* Height for each of the other 4 rows */
    --SHG-other-row-h: calc(var(--SHG-other-rows-total-h) / 4);
    /* Explicitly define row heights instead of using grid-auto-rows */
    grid-template-columns: repeat(var(--SHG-cols), 1fr);
    grid-template-rows: var(--SHG-title-row-h) var(--SHG-title-row-h) var(--SHG-other-row-h) var(--SHG-other-row-h) var(--SHG-other-row-h) var(--SHG-other-row-h);
    grid-auto-rows: 0;
}

.SHG-tile,
.SHG-tile__content,
.SHG-card {
    min-inline-size: 0;
    min-block-size: 0;
}

/* Make every tile content a container so it can adapt to its own size */
.SHG-tile__content {
    container: tile / inline-size;
}

/* Self-adaptive cards (P/E/R): scale internals based on tile width */
@container tile (max-width: 320px) {
    .SHG-card--feature {
        gap: 8px;
        padding: 12px;
    }

    .SHG-card--feature .SHG-card__heading {
        gap: 8px;
    }

    .SHG-card--feature .SHG-card__icon i {
        font-size: clamp(14px, 3.2cqw, 20px);
    }

    .SHG-card--feature .SHG-card__title {
        font-size: clamp(12px, 4cqw, 16px);
    }

    .SHG-card--feature .SHG-card__description {
        font-size: clamp(11px, 3.2cqw, 14px);
    }

    .SHG-card__bullets {
        font-size: clamp(11px, 3cqw, var(--SHG-font-card-p));
        line-height: 1.3;
    }


}

@container tile (min-width: 480px) {
    .SHG-card--feature {
        gap: 14px;
        padding: 18px;
    }

    .SHG-card--feature .SHG-card__icon i {
        font-size: clamp(18px, 2.4cqw, 26px);
    }
}

/* Self-adaptive CTA (C tile): stack when narrow, side-by-side when wide */
.SHG-tile__content--co {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "cta"
        "opa";
    align-content: stretch;
    /* gap: clamp(8px, 2cqw, 16px); */
}

.SHG-cta-btn-container {
    grid-area: cta;
}

.SHG-tile--C .SHG-opa {
    grid-area: opa;
}

@container tile (min-width: 420px) {
    .SHG-tile__content--co {
        grid-template-columns: 1fr min(45%, 280px);
        grid-template-rows: 1fr;
        grid-template-areas: "cta opa";
        align-items: center;
    }
}

/* Self-adaptive L tile */
@container tile (max-width: 260px) {
    .SHG-L-question h3 {
        font-size: clamp(12px, 5cqw, 16px);
    }

    .SHG-L-arrow-svg {
        width: 1.6rem;
        height: 1.6rem;
    }
}

/* tile base style */
.SHG-tile {
    position: relative;
    background: var(--SHG-tile);
    border-radius: 18px;
    box-shadow: var(--SHG-shadow);
    outline: 1px solid var(--SHG-outline);
    display: grid;
    align-content: stretch;
    justify-items: stretch;
    /* padding: clamp(10px, 1.6vw, 18px); */
    min-inline-size: 0;
    min-block-size: 0;
    box-sizing: border-box;
    contain: layout paint;
}

.SHG-tile__content {
    padding: clamp(13px, 1.6vw, 18px);
}

.SHG-tile--P {
    /* On tall/mobile layout, place P under L on the right column (swap with V) */
    grid-column: 2;
    grid-row: 4;
}

.SHG-tile--S .SHG-tile__content {
    display: grid;
    box-sizing: border-box;

    justify-content: center;
}

.SHG-tile--accent {
    background: linear-gradient(180deg, var(--SHG-tile) 0%, var(--SHG-tile-2) 100%);
}

/* Tile inner wrapper (decoupled content) */
.SHG-tile__content {
    display: grid;
    align-content: stretch;
    justify-items: stretch;
    inline-size: 100%;
    block-size: 100%;
    padding: 5px;
}

/* =====================   Component Content   ===================== */
/* T  Title + Subtitle (22 always) */
.SHG-title-wrap h1 {
    margin: 0 0 6px;
    font-weight: 800;
    width: 70%;
    font-size: var(--SHG-font-title);
    line-height: 1.02;
}

.SHG-title-wrap p {
    margin: 0;
    font-size: var(--SHG-font-lead);
    color: var(--SHG-muted);
}

/* C  CTA tile (12 always) */
.SHG-tile--C>.SHG-tile__content {
    align-content: stretch;
    justify-items: stretch;
}

/* center CTA and allow the button to size to tile area like the GPT preview */
.SHG-tile--C .SHG-tile__content {
    display: flex;
    /* padding: 0; */
    align-items: center;
}

/* In RTL, keep CTA on the left and Opa image on the right */
body.rtl .SHG-tile--C .SHG-tile__content {
    flex-direction: row-reverse;
}

.SHG-cta-btn {
    position: relative;
    /* controls ::after glow opacity; JS can animate this custom property */
    --SHG-cta-glow: 0;
    justify-self: stretch;
    align-self: stretch;
    /* center inside CTA tile */
    inline-size: 100%;
    block-size: 100%;
    /* fill most of the tile while keeping a comfortable touch area */
    border: 0;
    border-radius: 18px;
    padding: 5px 10;
    color: #fff;
    font-weight: 900;
    letter-spacing: .2px;
    cursor: pointer;
    font-size: var(--SHG-font-cta);
    text-transform: uppercase;
    /* use theme step colors for a multistop gradient */
    background: linear-gradient(45deg, var(--step-1) 0%, var(--step-2) 45%, var(--step-3) 100%);
    /* main shadow tailored for black background and theme hues */
    box-shadow: 0 12px 30px rgba(6, 8, 20, .76), 0 8px 28px color-mix(in srgb, var(--step-2) 20%, transparent), inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -3px 10px rgba(0, 0, 0, .55);
    /* subtle border to separate from pure black stage */
    border: 1px solid color-mix(in srgb, var(--step-3) 10%, rgba(255, 255, 255, 0.02));
    display: grid;
    place-items: center;
    text-align: center;
    /* stabilize GPU layer to avoid subpixel shrink on hover */
    will-change: transform, box-shadow, filter;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.SHG-cta-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 46%);
    mix-blend-mode: screen;
}

/* subtle outer glow that appears on hover to emphasize clickability */
.SHG-cta-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 12px 42px color-mix(in srgb, var(--step-2) 24%, transparent);
    opacity: var(--SHG-cta-glow, 0);
    transition: opacity .28s ease, box-shadow .28s ease;
}

.SHG-cta-btn:hover {
    filter: brightness(1.06);
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 20px 48px color-mix(in srgb, var(--step-2) 22%, transparent), 0 12px 30px rgba(6, 8, 20, .72), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.SHG-cta-btn:active {
    transform: translateY(1px) scale(.997);
    box-shadow: 0 6px 12px rgba(6, 8, 20, .78), 0 4px 10px color-mix(in srgb, var(--step-2) 12%, transparent), inset 0 3px 10px rgba(0, 0, 0, .6);
}

.SHG-cta-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--SHG-ring) 22%, transparent), 0 12px 30px rgba(6, 8, 20, .72);
    outline-offset: 3px;
}

/* Apply subtle pulse and smoother transitions */
.SHG-cta-btn {
    transition: transform .12s cubic-bezier(.2, .9, .2, 1), filter .2s ease, box-shadow 450ms cubic-bezier(.2, .9, .2, 1);
}

.SHG-tile__content--co .SHG-cta-btn-container {
    display: grid;
    /* Make button fill the container */
    flex: 3 1 60%;
    /* Give it a 60% basis and allow it to grow/shrink */
    height: 90%;
}

.SHG-tile__content--co .SHG-opa {
    flex: 2 1 40%;
    align-self: start;
}

/* Align hero tile Opa image to the right within the CTA tile */
.SHG-tile--C .SHG-opa {
    place-items: start end;
    justify-content: start;
}

.SHG-tile--C .SHG-opa img {
    object-position: top right;
    transform: translateX(0);
}

.SHG-tile__content--co .SHG-opa img {
    /* Let the image size itself but limit excessive overflow; we'll keep its visual top aligned */
    height: auto;
    max-height: 70%;
    /* Allow image to overflow its container */
}

/* O  Opa image (11)   Standalone O tile is intentionally hidden; Opa lives inside the merged CTA tile (.tile--C).   Placement-level rules below control visibility and layout. */
.SHG-opa {
    display: grid;
    /* Align internal content to the top center so the image sits at the top of the tile */
    place-items: start center;
    overflow: visible;
    /* allow small overlap */
}

.SHG-opa img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    object-position: top center;
    transform: translateX(-4px);
    /* nudge toward CTA */
    /* nudge toward CTA - animation handled by GSAPManager */
    transition: none;
}

/* P/E/R  Cards (11 each) */
.SHG-tile--P,
.SHG-tile--E,
.SHG-tile--R {
    padding: 0;
}

.SHG-L-question h3 {
    text-align: center;

}

.SHG-card {
    border: 1px solid var(--SHG-outline);
    background: linear-gradient(180deg, #121832, #0e1530);
    height: 100%;
    box-sizing: border-box;
    opacity: 0.7;
    ;
}

.SHG-card--feature {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    /* gap: clamp(8px, 1vw, 14px); */
    padding: 4px;
    border-radius: 20px;
    background: linear-gradient(180deg, color-mix(in srgb, rgba(32, 44, 88, 0.85) 70%, transparent), rgba(6, 10, 26, 0.88));
    box-shadow: 0 14px 30px rgba(5, 12, 34, 0.3), 0 6px 14px rgba(9, 16, 36, 0.32);
    overflow: hidden;
}

.SHG-card--feature .SHG-card__heading {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1vw, 12px);
    width: 100%;
}

.SHG-card--feature .SHG-card__icon {
    /* Unified circular icon container */
    --shg-icon-size: clamp(20px, 2.5vw, 50px);
    width: var(--shg-icon-size);
    height: var(--shg-icon-size);
    min-width: var(--shg-icon-size);
    min-height: var(--shg-icon-size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--SHG-card-accent, var(--SHG-ink)) 22%, transparent);
    color: var(--SHG-card-accent, var(--SHG-ink));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--SHG-card-accent, var(--SHG-ink)) 35%, transparent);
    flex: 0 0 auto;
}

.SHG-card--feature .SHG-card__icon i {
    /* Center and normalize FontAwesome glyphs */
    font-size: calc(var(--shg-icon-size) * 0.5);
    line-height: 1;
    transform: translateZ(0);
    display: inline-block;
}

/* Focus outline for keyboard users when the card icon itself is focusable */
.SHG-card--feature .SHG-card__icon:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--SHG-ring) 28%, transparent);
    outline-offset: 3px;
}

.SHG-card--feature .SHG-card__title {
    margin: 0;
    font-size: var(--SHG-font-card-h3);
    letter-spacing: -0.01em;
    color: var(--SHG-ink);
}

.SHG-card--feature .SHG-card__subtitle {
    margin: 0;
    font-size: clamp(13px, 0.8vw + 9px, calc(var(--SHG-font-card-p) + 1px));
    color: color-mix(in srgb, var(--SHG-muted) 68%, var(--SHG-ink) 32%);
    font-weight: 500;
}

.SHG-card--feature .SHG-card__description {
    margin: 4px 0 0;
    font-size: clamp(13px, 0.85vw + 9px, var(--SHG-font-card-p));
    line-height: 1.5;
    color: color-mix(in srgb, var(--SHG-muted) 82%, var(--SHG-ink) 18%);
}


.SHG-card__btn {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 100%;
    flex-direction: column;
    height: 100%;
    padding: 5px;
    ;
}


/* Bulleted list inside feature cards (i18n-backed) */
.SHG-card__bullets {
    padding-top: 5px;
    margin: 0;
    padding-left: 1em;
    list-style: disc;
    font-size: clamp(6px, 0.85vw + 9px, var(--SHG-font-card-p));
    line-height: 1.5;
    color: color-mix(in srgb, var(--SHG-muted) 82%, var(--SHG-ink) 18%);
}



/* Make the whole card appear clickable when focusable */
.SHG-card--feature[tabindex],
.SHG-card--feature[tabindex]:hover {
    cursor: pointer;
}

.SHG-card h3 {
    margin: 0;
    font-size: var(--SHG-font-card-h3);
}

.SHG-card p {
    margin: 0;
    color: var(--SHG-muted);
    font-size: var(--SHG-font-card-p);
}

.SHG-card-bg-1 {
    border: 1px solid var(--step-1);
    --SHG-card-accent: var(--step-1);
}

.SHG-card-bg-2 {
    border: 1px solid var(--step-2);
    --SHG-card-accent: var(--step-2);
}

.SHG-card-bg-3 {
    border: 1px solid var(--step-3);
    --SHG-card-accent: var(--step-3);
}

/* =====================   Bottom Card Sheet (pop panel)   ===================== */
#SHG-card-sheet {
    position: fixed;
    inset: 0;
    z-index: 60;
    /* background-color: #000000d1; */
    pointer-events: none;
}

#SHG-card-sheet.is-open {
    pointer-events: auto;
}

.SHG-card-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.925);
    opacity: 0;
    transition: opacity .18s ease;
}

#SHG-card-sheet.is-open .SHG-card-sheet__backdrop {
    opacity: 1;
}

.SHG-card-sheet__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(10, 16, 36, 0.96), rgba(8, 12, 28, 0.96));
    border-top: 1px solid color-mix(in srgb, var(--SHG-outline) 22%, transparent);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    transform: translateY(100%);
    transition: transform .24s cubic-bezier(.2, .9, .2, 1);
    padding: 8px 14px calc(14px + env(safe-area-inset-bottom));
    max-width: 720px;
    margin-inline: auto;
    width: min(96vw, 720px);
    container-type: inline-size;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    row-gap: clamp(8px, 2cqw, 16px);
    height: 80vh;
}

#SHG-card-sheet.is-open .SHG-card-sheet__panel {
    transform: translateY(0%);
}

.SHG-card-sheet__accent {
    height: 6px;
    width: 100%;
    background: linear-gradient(90deg, var(--sheet-accent, #7aa3ff), transparent);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--sheet-accent, #7aa3ff) 35%, transparent);
    border-radius: 0 0 12px 12px;
}

#SHG-card-sheet.accent-1 {
    --sheet-accent: var(--step-1);
}

#SHG-card-sheet.accent-2 {
    --sheet-accent: var(--step-2);
}

#SHG-card-sheet.accent-3 {
    --sheet-accent: var(--step-3);
}

.SHG-card-sheet__title {
    margin: 0;
    padding-top: 2px;
    font-size: clamp(2rem, 5cqw, 3rem);
    font-weight: 800;
    color: var(--SHG-ink);
    text-align: left;
}

.SHG-card-sheet__bullets {
    height: 27vh;
    padding-top: 1em;
    margin: 0;
    padding-left: 1em;
    list-style: disc;
    color: color-mix(in srgb, var(--SHG-muted) 82%, var(--SHG-ink) 18%);
}

.SHG-card-sheet__bullets li {
    margin: 4px 0;
    font-size: clamp(13px, 3.4cqw, 16px);
}

/* Info row positions bubble relative to Opa's rendered size */
.SHG-card-sheet__info {
    position: relative;
    /* JS updates --opa-h and --opa-w when sheet opens */
    --opa-h: 140px;
    display: flex;
    gap: 12px;
    --opa-w: 120px;
    --opa-align: 0.56;
    /* 0=top, 1=bottom; anchor near mouth */
    min-height: var(--opa-h);
    justify-content: center;
    flex-direction: row-reverse;
}

.SHG-card-sheet__opa {
    position: relative;
    /* right: 0; */
    /* bottom: 0; */
    height: var(--opa-h);
    width: auto;
    max-width: clamp(90px, 20cqw, 200px);
    object-fit: contain;
}

.SHG-card-sheet__bubble {
    position: relative;
    width: 200px;
    padding: 5px;
    border-radius: 12px;
    line-height: 1.3;
    color: var(--SHG-ink);
    background: linear-gradient(180deg, color-mix(in srgb, var(--sheet-accent, #7aa3ff) 20%, transparent) 0%, color-mix(in srgb, var(--sheet-accent, #7aa3ff) 12%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--sheet-accent, #7aa3ff) 45%, transparent);
    font-size: clamp(0.8rem, 3vw, 1.3rem);
    font-weight: 200;
    height: fit-content;
    margin: auto 0;
    max-height: var(--opa-h);
}

/* Speech bubble tail pointing toward Opa (right side) */
.SHG-card-sheet__bubble {
    --tail-w: 18px;
    --tail-h: 16px;
    --tail-border: 1.5px;
}

/* Outer border triangle */
.SHG-card-sheet__bubble::after {
    content: "";
    position: absolute;
    right: calc(-1 * var(--tail-w));
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: calc(var(--tail-h) / 2 + var(--tail-border)) solid transparent;
    border-bottom: calc(var(--tail-h) / 2 + var(--tail-border)) solid transparent;
    border-left: calc(var(--tail-w) + var(--tail-border)) solid color-mix(in srgb, var(--sheet-accent, #7aa3ff) 45%, transparent);
    filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--sheet-accent, #7aa3ff) 22%, transparent));
}

/* Inner fill triangle (slightly smaller so the border from ::after shows) */
.SHG-card-sheet__bubble::before {
    content: "";
    position: absolute;
    right: calc(-1 * (var(--tail-w) - 8px));
    top: 50%;
    transform: translateY(-50%);
    width: calc(var(--tail-w) - 8px);
    height: calc(var(--tail-h) - 2px);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--sheet-accent, #7aa3ff) 20%, transparent) 0%,
            color-mix(in srgb, var(--sheet-accent, #7aa3ff) 12%, transparent) 100%);
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

@container (min-width: 520px) {
    .SHG-card-sheet__body {
        grid-template-columns: 1fr auto;
        align-items: center;
    }
}

.SHG-card-sheet__actions {
    display: grid;
    /* Mobile-first: pills row above, CTA full-width bottom */
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "prev . next"
        "cta cta cta";
    align-items: center;
    row-gap: 8px;
    column-gap: 10px;
}

/* Spacer not needed with explicit grid areas */
.SHG-card-sheet__spacer {
    display: none;
}

.SHG-card-sheet__cta {
    margin-top: 2px;
    font-size: 1.5rem;
    padding: 7px;
    grid-area: cta;
    justify-self: stretch;
    align-self: stretch;
    width: 100%;
    min-height: 48px;
    display: grid;
    place-items: center;
}

/* Revert to single-row layout on larger screens */
@media (min-width: 768px) {
    .SHG-card-sheet__actions {
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: auto;
        grid-template-areas: "prev cta next";
        row-gap: 0;
    }

    .SHG-card-sheet__cta {
        justify-self: center;
        align-self: center;
        width: auto;
    }
}

/* Flatten nav wrapper so its children (prev/close/next) can be placed in grid areas */
.SHG-card-sheet__navs {
    display: contents;
}

.SHG-card-sheet__nav {
    background: transparent;
    color: var(--SHG-ink);
    border: 1px solid color-mix(in srgb, var(--nav-accent, var(--sheet-accent, #7aa3ff)) 45%, transparent);
    border-radius: 999px;
    padding: 3px 5px;
    font-size: 0.5rem;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--nav-accent, var(--sheet-accent, #7aa3ff)) 20%, transparent);
}

.SHG-card-sheet__nav .label {
    display: inline-block;
    max-width: 30ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.SHG-card-sheet__nav_to_card {
    width: 42%;
}

.SHG-card-sheet__nav_close {
    width: 10%
}

/* Let nav_to_card size naturally for pill layout */
.SHG-card-sheet__nav_to_card {
    width: auto;
    min-width: 110px;
}

/* Close button: plain white X at the top-right of the panel */
.SHG-card-sheet__close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    padding: 0;
    line-height: 1;
    color: #ffffff;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-size: 30px;
    font-weight: 700;
    text-shadow: none;
    outline: none;
    margin: 20px;
    cursor: pointer;
}

/* Prev/Next as arrow pills on left/right */
.SHG-card-sheet__prev,
.SHG-card-sheet__next {
    --nav-color: var(--nav-accent, var(--sheet-accent, #7aa3ff));
    color: var(--nav-color);
    border: 2px solid var(--nav-color);
    border-radius: 999px;
    padding: 4px 6px;
    font-size: 16px;
    line-height: 1;
    display: inline-grid;
    place-items: center;
    min-width: 80px;
    height: 44px;
    box-shadow: 0 0 8px color-mix(in srgb, var(--nav-color) 60%, transparent);
    position: relative;
}

/* Place them in grid areas and align to edges */
.SHG-card-sheet__prev {
    grid-area: prev;
    justify-self: start;
    align-self: center;
}

.SHG-card-sheet__next {
    grid-area: next;
    justify-self: end;
    align-self: center;
}

/* Make the labels visible inside the pills */
.SHG-card-sheet__prev .label,
.SHG-card-sheet__next .label {
    position: static;
    clip: auto;
    width: auto;
    height: auto;
    margin: 0;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 600;
    color: var(--nav-color);
}

/* Arrowheads: small triangles so they fit on mobile */
.SHG-card-sheet__next::after,
.SHG-card-sheet__prev::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
}

.SHG-card-sheet__next::after {
    right: -10px;
    border-left: 10px solid var(--nav-color);
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.SHG-card-sheet__prev::after {
    left: -10px;
    border-right: 10px solid var(--nav-color);
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

/* Inner cut to simulate outlined arrow (match panel background) */
.SHG-card-sheet__next::before,
.SHG-card-sheet__prev::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
}

.SHG-card-sheet__next::before {
    right: -8px;
    border-left: 8px solid rgba(10, 16, 36, 0.96);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.SHG-card-sheet__prev::before {
    left: -8px;
    border-right: 8px solid rgba(10, 16, 36, 0.96);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

/* Global section titles (L1/L2/L3) */
.level-title {
    margin: 0 0 0.6rem 0;
    color: var(--SHG-ink, #edf1ff);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.2px;
    text-align: center;
    /* Mobile-first base size */
    font-size: 6.6rem;
}

/* Min-width only media queries (grouped here) */
@media (min-width: 480px) {
    .level-title {
        font-size: 2rem;
    }
}

@media (min-width: 768px) {
    .level-title {
        font-size: 7rem;
    }
}

@media (min-width: 992px) {
    .level-title {
        font-size: 9rem;
    }
}

@media (min-width: 1200px) {
    .level-title {
        font-size: 3.2rem;
    }
}

/* Social stack (circular concentric rings + radial links) */
.SHG-social-stack {
    position: relative;
    container-type: size;
    /* Create a square that fits and centers within the tile */
    aspect-ratio: 1 / 1;
    height: 100%;
    max-width: 100%;
    --SHG-orbit: 0deg;
    --SHG-social-scale: 1;
    transform: scale(var(--SHG-social-scale));
    transform-origin: center;
    padding: 3px;
}

.SHG-opa-center-img {
    /* Use container query units for responsive sizing */
    width: 50cqmin;
    height: 50cqmin;
    top: 50%;
    left: 50%;
    object-fit: contain;
    position: absolute;
    z-index: 10;
    transform: translate(-50%, -50%);
}

.SHG-color-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    border-radius: 50%;
    box-sizing: border-box;
}

.SHG-color-circle.blue {
    width: 60%;
    height: 60%;
    border: 1px solid var(--step-1);
    z-index: 3;
}

.SHG-color-circle.purple {
    width: 79cqmin;
    height: 79cqmin;
    border: 1px solid var(--step-2);
    z-index: 2;
}

.SHG-color-circle.red {
    width: 95cqmin;
    height: 95cqmin;
    border: 1px solid var(--step-3);
    z-index: 1;
}

.SHG-social-link {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30.8cqmin;
    height: 30.8cqmin;
    margin: calc(30.8cqmin / -2);
    background-color: rgba(13, 13, 33, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--SHG-ink);
    text-decoration: none;
    font-size: var(--SHG-font-social-link);
    transition: all .3s ease;
    z-index: 11;
    transform: rotate(calc(var(--angle, 0deg) + var(--SHG-orbit, 0deg))) translateY(-40cqmin) rotate(calc(-1 * (var(--angle, 0deg) + var(--SHG-orbit, 0deg))));
}

.SHG-social-link:hover {
    background-color: rgba(255, 255, 255, 0.12);
    transform: rotate(calc(var(--angle, 0deg) + var(--SHG-orbit, 0deg))) translateY(-40cqmin) rotate(calc(-1 * (var(--angle, 0deg) + var(--SHG-orbit, 0deg)))) scale(1.15);
}

/* S  Social (11) */
/* L  Logo (11) */

/* Tile L: question card styling moved from inline styles */
.SHG-L-question {
    /* Use a safe, 3-row grid to avoid overlap between question, tip and arrow */
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 3px;
    align-items: center;
    justify-items: center;
    text-align: center;
    padding: 0;
    box-sizing: border-box;
    min-height: 100%;
    align-content: center;
}

.SHG-L-q {
    font-weight: 700;
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 1.1;
    width: 70%;
    width: 100%;
    max-width: 76%;
}

.SHG-L-tip {
    color: var(--SHG-muted);
    font-size: clamp(10px, 1.6vw, 14px);
    width: 100%;
    max-width: 80%;
}

.SHG-L-arrow-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.SHG-L-arrow-svg {
    width: 2.2rem;
    height: 2.2rem;
    color: var(--SHG-ink);
}

/* Prevent overlap on narrow tiles by ensuring question and tip break before arrow */
@container tile (max-width: 360px) {

    .SHG-L-q,
    .SHG-L-tip {
        max-width: 92%;
    }

    .SHG-L-arrow-svg {
        width: 1.6rem;
        height: 1.6rem;
    }
}

.SHG-L-arrow {
    font-size: 1.9rem;
    /* slightly larger */
    display: inline-block;
    /* allow transforms to behave predictably */
    line-height: 1;
}

/* SVG arrow element styling (replaces FA icon) */
.SHG-L-arrow-svg {
    width: 2.2rem;
    height: 2.2rem;
    display: inline-block;
    vertical-align: middle;
    color: var(--SHG-ink);
    transition: none;
    margin-top: 3px;
    filter: drop-shadow(0 6px 0 var(--step-1)) drop-shadow(0 4px 0 var(--step-2)) drop-shadow(0 2px 0 var(--step-3));
}

/* Thicken the SVG stroke for better visibility when scaled */
.SHG-L-arrow-svg path {
    stroke-width: 2.6;
}

/* Default - point arrow down */
.SHG-L-arrow {
    /* keep backward compatibility for any remaining FA icon usage */
    transform: rotate(90deg) scale(1.12, 1.06);
    transition: none;
}

/* Apply same transforms to the SVG arrow */
.SHG-L-arrow-svg {
    transform: rotate(90deg) scale(1.30, 1.06);
}

/* Dev labels (toggleable) */
/* =====================   Placement  Base (26, mobile-first)   ===================== */
/* coordinates per spec: 26 diagram   T:[1,1,2,2]  C:[1,3,1,1]  P:[1,5,1,1]  L:[1,4,1,1]  E:[2,5,1,1]  V:[2,4,1,1]  S:[1,6,1,1]  R:[2,6,1,1] */
.SHG-tile--T {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
}

.SHG-tile--C {
    grid-column: 1 / span 2;
    grid-row: 3;
}

/* Hide the separate O tile: Opa lives inside the merged CTA tile (.tile--C) */
.SHG-tile--O {
    display: none;
}

.SHG-tile--P {
    grid-column: 1;
    grid-row: 5;
    padding: 3px;
}

.SHG-tile--L {
    grid-column: 1;
    grid-row: 4;
}

.SHG-tile--E {
    grid-column: 2;
    grid-row: 5;
    padding: 3px;

}

.SHG-tile--V {
    display: block;
    grid-column: 2;
    grid-row: 4;
}

.SHG-tile--S {
    grid-column: 1;
    grid-row: 6;
}

.SHG-tile--R {
    grid-column: 2;
    grid-row: 6;
    padding: 3px;

}

.SHG-tile--V .SHG-tile__content {
    /* Make content fill the tile. Remove extra parent padding so the inner wrapper
       can occupy the full tile interior. */
    display: grid;
    align-content: stretch;
    align-items: start;
    justify-items: stretch;
    padding: 0;
    /* let the inner wrapper control spacing */
    box-sizing: border-box;
    min-height: 0;
    /* allow children to scroll properly */
}

/* V tile: dictionary-style content (keeps tile footprint unchanged). */
.SHG-V-inner {
    display: block;
    font-family: var(--SHG-ui-font, Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue');
    color: var(--SHG-ink, #edf1ff);
    width: 100%;
    box-sizing: border-box;
    padding: 0.35rem 0.4rem;
    /* let the inner wrapper size itself; concrete height is controlled by the tile container
       and a media-query override below so the inner scroller can fill the available space */
    max-height: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* smooth scrolling on iOS */
    touch-action: pan-y;
    /* allow vertical pan gestures */
    -ms-overflow-style: auto;
}

.SHG-V-heading {
    display: flex;
    gap: 0.2rem;
    align-items: baseline;
    white-space: nowrap;
    overflow-x: auto;
}

/* Hide visible scrollbar for the inline heading (still scrollable by touch/drag) */
.SHG-V-heading {
    -ms-overflow-style: none;
    /* IE/Edge */
    scrollbar-width: none;
    /* Firefox */
}

.SHG-V-heading::-webkit-scrollbar {
    display: none;
}

.SHG-V-inner {
    /* Fill the entire tile content area so dictionary uses all available space */
    display: block;
    font-family: var(--SHG-ui-font, Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue');
    color: var(--SHG-ink, #edf1ff);
    width: 100%;
    height: 100%;
    min-height: 0;
    /* required for children to be able to scroll inside grid/flex parents */
    box-sizing: border-box;
    padding: 0.6rem;
    /* small inner padding so content doesn't touch the edges */
    border-radius: inherit;
    /* match tile rounding */
    /* let this wrapper take full height and scroll internally when content exceeds */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.SHG-dict {
    margin: 0.4rem 0 0 0;
    padding: 0;
    display: grid;
    gap: 0.28rem;
}

.SHG-dict-row {
    display: grid;
    grid-template-columns: auto;
}

.SHG-dict-term {
    font-size: 0.62rem;
    font-weight: 600;
    margin: 0;
    color: #cfd6ef;
}

.SHG-dict-def {
    font-size: 0.4rem;
    margin: 0;
    color: #b7bfd8;
}

/* Single, subtle vertical scrollbar for the V tile inner wrapper */
.SHG-V-inner {
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: rgba(130, 150, 255, 0.95) rgba(12, 14, 22, 0.26);
}

.SHG-V-inner::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.SHG-V-inner::-webkit-scrollbar-track {
    background: rgba(12, 14, 22, 0.16);
    border-radius: 10px;
}

.SHG-V-inner::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(120, 140, 255, 0.95), rgba(80, 100, 230, 0.85));
    border-radius: 10px;
    border: 2px solid rgba(12, 14, 22, 0.20);
}

.SHG-V-inner::-webkit-scrollbar-thumb:hover {
    filter: brightness(1.06);
}

/* Prevent horizontal scrollbar on the V-inner while keeping heading scrollable */
.SHG-V-inner {
    overflow-x: hidden;
}



/* Base (2x6) CTA alignment */
.SHG-tile--C .SHG-cta-btn {
    align-self: center;
    justify-self: end;
    text-align: center;
}

/* Removed redundant 2x6 max-aspect-ratio block; base already covers it */

/* =====================    Surface: 34 (portrait)  ar ∈ [0.58, 1.0)    ===================== */
@media (min-aspect-ratio: 58 / 100) and (max-aspect-ratio: 99 / 100) {
    .SHG-hero {
        --SHG-cols: 3;
        --SHG-rows: 4;
        /* Recompute row height so the stage stays within the viewport */
        --SHG-available-h: calc(100% - (var(--SHG-rows) - 1) * var(--SHG-gap));
        --SHG-row-h: calc(var(--SHG-available-h) / var(--SHG-rows));
        grid-template-columns: repeat(var(--SHG-cols), 1fr);
        grid-template-rows: repeat(var(--SHG-rows), var(--SHG-row-h));
        grid-auto-rows: var(--SHG-row-h);
        /* Map fonts to 3x4 when in this range */
        --SHG-font-title: var(--SHG-3-4-font-size-title);
        --SHG-font-lead: var(--SHG-3-4-font-size-subtitle);
        --SHG-font-cta: var(--SHG-3-4-font-size-cta);
        --SHG-font-card-h3: var(--SHG-3-4-font-size-card-h3);
        --SHG-font-card-p: var(--SHG-3-4-font-size-card-p);
    }

    /* coordinates per spec: 34 diagram   T:[1,1,2,2]  P:[3,2,1,1]  E:[3,3,1,1]  C:[1,3,1,2]  R:[3,4,1,1]  L:[3,1,1,1]  S:[2,4,1,1] */
    .SHG-tile--T {
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
    }

    .SHG-tile--P {
        grid-column: 3;
        grid-row: 2;
    }

    .SHG-tile--E {
        grid-column: 3;
        grid-row: 3;
    }

    .SHG-tile--C {
        grid-column: 1 / span 2;
        grid-row: 3;
    }

    .SHG-tile--R {
        grid-column: 3;
        grid-row: 4;
    }

    .SHG-tile--L {
        grid-column: 3;
        grid-row: 1;
    }

    .SHG-tile--S {
        grid-column: 1;
        grid-row: 4;
    }

    .SHG-tile--S .SHG-social-stack {
        --SHG-social-scale: 1.18;
        padding: 12px;
    }

    .SHG-cta-btn-container {
        height: 95%
    }

    .SHG-card-sheet__bubble {
        position: relative;
        width: 250px;
    }

    .SHG-card-sheet__bullets {
        padding-top: 0.5em;
        margin: 0;
        padding-left: 0.4rem;
        list-style: disc;
        color: color-mix(in srgb, var(--SHG-muted) 82%, var(--SHG-ink) 18%);
    }

    .SHG-card-sheet__bullets li {
        margin: 3px 0;
        font-size: clamp(11px, 3.4cqw, 16px);
    }

    .SHG-L-q {
        font-weight: 500;
        font-size: clamp(2rem, 1.8vw, 18px);
    }

    .SHG-L-tip {
        max-width: 88%;
        font-size: clamp(1rem, 2vw, 2.5rem);
    }



}

/* =====================    Surface: 43 (mid-wide)  ar ? [1.0, 1.6]    ===================== */
@media (min-aspect-ratio: 100/100) {
    .SHG-stage {
        place-items: center;
        overflow: clip;
        /* stop vertical scroll */
        padding-inline: clamp(12px, 4vw, 48px);
        /* side gutters */
    }

    .SHG-hero {
        max-inline-size: 100%;
        inline-size: auto;
        /* stop forcing 100% width */
        block-size: 100%;
        /* keep full stage height */
        aspect-ratio: 4 / 3;
        /* width = height * 4/3 */
        margin-inline: auto;
        /* center horizontally */
        --SHG-cols: 4;
        --SHG-rows: 3;
        /* Recompute row height so the stage stays within the viewport */
        --SHG-available-h: calc(100% - (var(--SHG-rows) - 1) * var(--SHG-gap));
        --SHG-row-h: calc(var(--SHG-available-h) / var(--SHG-rows));
        /* Fractional columns + fixed rows prevent vertical overflow */
        grid-template-columns: repeat(var(--SHG-cols), 1fr);
        grid-template-rows: repeat(var(--SHG-rows), var(--SHG-row-h));
        grid-auto-rows: var(--SHG-row-h);
        padding-top: 5px;
        padding-bottom: 25px;
        /* remap generic font tokens to the 4x3 (mid-wide) layout values */
        --SHG-font-title: var(--SHG-4-3-font-size-title);
        --SHG-font-lead: var(--SHG-4-3-font-size-subtitle);
        --SHG-font-cta: var(--SHG-4-3-font-size-cta);
        --SHG-font-card-h3: var(--SHG-4-3-font-size-card-h3);
        --SHG-font-card-p: var(--SHG-4-3-font-size-card-p);
    }

    /* keep children from inflating block-size */
    .SHG-tile,
    .SHG-tile__content {
        min-block-size: 0;
        overflow: hidden;
    }

    /* T:[1,1,2,2]  P:[3,1,1,
        padding: 15px;
    }

    .SHG-tile--C {
        grid-column: 1 / span 2;
        grid-row: 3;1]  X:[4,1,1,1]       T:[1,1,2,2]  E:[3,2,1,1]  L:[4,2,1,1]       C:[1,3,2,1]  R:[3,3,1,1]  S:[4,3,1,1] */
    .SHG-tile--T {
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
        padding: 1rem;
    }

    /* Span 2 columns (O tile is hidden by placement-level rule) */
    /* Hide original Opa tile */
    /* original Opa tile is intentionally hidden; no positioning rules needed */
    .SHG-tile--L {
        grid-column: 4;
        grid-row: 1;
    }

    /* Show V in mid-wide layout as the missing tile (right of P column) */
    .SHG-tile--V {
        display: block;
        grid-column: 4;
        grid-row: 2;
    }

    .SHG-tile--P {
        grid-column: 3;
        grid-row: 1;
        padding: 5px;
    }

    .SHG-tile--E {
        grid-column: 3;
        grid-row: 2;
        padding: 5px;
    }

    .SHG-tile--R {
        grid-column: 3;
        grid-row: 3;
        padding: 5px;
    }

    .SHG-tile--S {
        grid-column: 4;
        grid-row: 3;

    }

    .SHG-tile--S .SHG-social-stack {
        --SHG-social-scale: 1.08;
        padding: 12px;

    }

    .SHG-L-q,
    .SHG-L-tip {
        max-width: 68%;
        /* font-size: clamp(19px, 2vw, 2px); */
    }


    .SHG-L-arrow-svg {
        width: 2.6rem;
        height: 2.6rem;
    }



    /* In mid-wide (4x3) layout: direction-aware arrow */
    /* LTR: point left toward the grid */
    body:not(.rtl) .SHG-L-arrow {
        transform: rotate(180deg) scale(1.12, 1.06);
    }

    body:not(.rtl) .SHG-L-arrow-svg {
        transform: rotate(180deg) scale(1.30, 1.06);
        filter: drop-shadow(0 6px 0 var(--step-1)) drop-shadow(0 4px 0 var(--step-2)) drop-shadow(0 2px 0 var(--step-3));
    }

    /* RTL: point right */
    body.rtl .SHG-L-arrow {
        transform: rotate(0deg) scale(1.12, 1.06);
    }

    body.rtl .SHG-L-arrow-svg {
        transform: rotate(0deg) scale(1.30, 1.06);
        filter: drop-shadow(0 6px 0 var(--step-1)) drop-shadow(0 4px 0 var(--step-2)) drop-shadow(0 2px 0 var(--step-3));
    }

    .SHG-card-sheet__bubble {
        position: relative;
        width: 250px;
    }

    /* In mid-wide / desktop layouts some generic rules set tile content to overflow:hidden
       which prevents inner scrollbars from being interactive. Re-enable scrolling for the V tile only. */
    .SHG-tile--V .SHG-tile__content {
        overflow: visible;
        /* allow the inner wrapper to show its scrollbar */
        align-items: start;
        /* keep content from being vertically centered */
    }

    /* ensure the inner wrapper still scrolls vertically and doesn't produce horizontal scroll */
    .SHG-tile--V .SHG-V-inner {
        /* allow the inner wrapper to fill the tile interior and scroll internally */
        max-height: none;
        height: 100%;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

}

/* Extra-wide: increase side gutters so tiles don’t over-stretch */
@media (min-aspect-ratio: 160 / 100) {
    .SHG-stage {
        padding-inline: clamp(24px, 8vw, 120px);
    }
}

/* =====================   Optional: micro-interaction (no JS)   ===================== */
@media (prefers-reduced-motion: no-preference) {
    .SHG-cta-btn {
        transition: transform .12s ease, filter .2s ease;
    }

    /* gentle poke toward CTA when hovering the merged tile (Opa follows) */
    .SHG-tile--C:hover .SHG-opa img {
        transform: translateX(-6px) scale(1.02);
    }
}

/* =====================   Utility: visually hidden (for accessibility text if needed)   ===================== */


@media (prefers-reduced-motion: no-preference) {

    /* CTA entrance handled by GSAP; disable the built-in infinite CSS pulse to avoid loops */
    .SHG-cta-btn {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .SHG-cta-btn {
        animation: none !important;
        transition: none;
    }
}