/* Public Case Studies page (/casestudies).

   Visual conventions track the rest of the public chrome:
     • #1E2240 → #3B3F7A diagonal hero band (same gradient legal.css uses
       for the privacy / terms hero) so the marketing pages read as one
       product.
     • #f7f8fb page surface, white panel cards on top, soft navy shadow
       (same tokens as .legal-page).
     • Inter font stack inherited from site.css.

   All selectors are scoped to .case-studies-page so loading this stylesheet
   on every page (per the eager-load strategy in App.razor) cannot collide
   with anything elsewhere. */

.case-studies-page {
    background: #f7f8fb;
    /* The public top app bar is 64px tall (matches MainLayout's MudAppBar
       Dense=true). Subtract that here so the page surface still fills the
       viewport even when content is short, mirroring .legal-page. */
    min-height: calc(100vh - 64px);
    padding-bottom: 80px;
}

/* ── Hero band ───────────────────────────────────────────────────────── */

.case-studies-page__hero {
    background: linear-gradient(135deg, #1E2240 0%, #3B3F7A 100%);
    color: #ffffff;
    /* Tighter top padding so the public app bar (64px) and the
       hero heading don't sit with an awkward chasm between them.
       Bottom padding keeps the negative overlap with the panel
       below (see .__body's margin-top: -28px). */
    padding: 24px 24px 56px;
    text-align: center;
}

.case-studies-page__hero h1 {
    margin: 0 0 16px;
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.case-studies-page__hero-lead {
    /* Hero copy widens to the same 1600px the unified panel below
       uses, so the lead paragraph and the panel share one visual
       rail down the page. At 1600px on a wide viewport the
       paragraph collapses from 4-5 lines to ~3, pulling the panel
       (and the rest of the page) up by ~40-60px. */
    max-width: 1600px;
    margin: 0 auto;
    font-size: 1.02rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
}

/* ── Body container ─────────────────────────────────────────────────── */

.case-studies-page__body {
    /* Pull the body up under the hero by the same -28px overlap legal.css
       uses, so the white panel reads as a card sitting on the gradient
       band rather than a plain content block below it. */
    margin-top: -28px !important;
    padding: 0 16px !important;
}

.case-studies-page__loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 24px;
}

.case-studies-page__empty {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(15, 22, 50, 0.08);
    padding: 48px 24px;
    text-align: center;
    margin-top: 32px;
}

/* ── Unified panel (selector + narrative + chart) ──────────────────── */

/* Single panel holding everything below the hero: the case selector
   row across the top, then a 38/62 two-column split with the
   narrative on the left and the chart on the right. Replaces the
   previous two-card stack (selector+narrative card on top of a
   separate chart card) so the story and its evidence read together
   in one glance and the user no longer scrolls between two cards
   that semantically belong together. */
.case-studies-page__unifiedpanel {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 24px rgba(15, 22, 50, 0.08) !important;
    /* Widened from 1400 to 1600 so the panel uses more of the wide-
       monitor real estate the parent ExtraLarge MudContainer affords
       (~2160px max). The chart benefits the most: 40+ months on the
       x-axis now have noticeably more room to breathe per bar. */
    max-width: 1600px;
    margin: 0 auto;
    /* Tighter bottom padding, the content (narrative col + chart col)
       runs almost to the panel's edge so there is no dead space at
       the panel's foot. */
    padding: 18px clamp(16px, 3vw, 28px) 16px;
}

/* The 38/62 split. flex-direction:row on desktop, drops to column
   below 960px (see media query below) so on tablet / phone the
   narrative sits above the chart in the same reading order. */
.case-studies-page__split {
    display: flex;
    flex-direction: row;
    gap: clamp(18px, 2vw, 28px);
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid #EEF0F7;
    /* Both columns stretch to the taller of the two. Because the
       chart column is locked to the EChart's 540px height (the
       walkthrough strip overlays absolutely inside the chart wrap,
       it doesn't push the column taller), this stretch makes the
       narrative grid grow to match that 540px and the four arc
       cards distribute evenly. The unified panel's height is
       therefore identical whether a walkthrough is active or not. */
    align-items: stretch;
}

.case-studies-page__narrative-col {
    flex: 0 0 38%;
    min-width: 0; /* let flex children shrink past content min-width */
    /* Flex column so the narrative-grid below can grow to match the
       chart's height on the right, four arc cards stretched evenly
       instead of clumping at the top with dead space underneath. */
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.case-studies-page__chart-col {
    flex: 1 1 62%;
    min-width: 0;
}

/* ── Selector row (inside the combined card) ───────────────────────── */

.case-studies-page__selector {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    /* Stretch so every cell takes the height of the tallest, when
       one descriptor wraps to two lines (e.g. "The Pattern That
       Triggered Review") the other four cards grow with it instead
       of leaving a ragged bottom edge across the row. */
    align-items: stretch;
    /* No background / shadow / border-radius any more, those are
       owned by .case-studies-page__topcard now. The selector row is
       just an inner flex strip. */
}

/* Per-case cell wraps the main selector button + its play affordance
   so the play button can sit beside (and slightly overlapping) the
   button without nesting interactive elements (HTML-invalid). The
   flex sizing that used to live on the button now lives here, so
   each cell stretches evenly across the row. */
.case-studies-page__selector-cell {
    position: relative;
    display: flex;
    flex: 1 1 0;
    /* Wider cells now that the descriptor sits next to the CASE/N
       stack inside each button. 280px upper bound keeps the
       descriptor on one line for short titles ("The Exemplary
       Biller") and limits it to two lines for the longest authored
       case ("The Pattern That Triggered Review"), see the 2-line
       clamp on __selector-btn-sub. */
    min-width: 200px;
    max-width: 300px;
}

.case-studies-page__selector-btn {
    /* Plain <button> reset, kill the UA chrome so the visual is fully
       owned by these rules. */
    appearance: none;
    border: 1px solid #d8dbe4;
    background: #ffffff;
    color: #2A2E55;
    font-family: inherit;
    cursor: pointer;
    padding: 8px 16px;
    /* Soft rounded-rectangle instead of full pill (999px). The pill
       shape was reading as too playful for what is essentially a
       segmented selector, 8px lines up with the chart panel's inner
       chart-wrap radius and the home page's CTA button. */
    border-radius: 8px;
    line-height: 1.2;
    font-weight: 500;
    transition: background-color 0.15s ease,
                color 0.15s ease,
                border-color 0.15s ease,
                box-shadow 0.15s ease,
                transform 0.15s ease;
    /* Horizontal layout, [Case/N stack] | [descriptor]. */
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    /* Button fills the cell width; the cell handles row-level flex
       sizing so all five cells span the row evenly. */
    width: 100%;
    text-align: left;
}

/* Left-side CASE/N stack, keeps the prior vertical eyebrow-over-number
   shape so the case number reads as a tidy tile that the descriptor
   sits beside, not a flat in-line "Case 1 The Exemplary Biller" run. */
.case-studies-page__selector-btn-num {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

/* Pipe separator between the CASE/N stack and the descriptor. Sized
   off the number for a clean vertical line and muted so it reads as
   a soft divider, not a punctuation glyph. */
.case-studies-page__selector-btn-sep {
    flex: 0 0 auto;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
    color: currentColor;
    opacity: 0.32;
}

.case-studies-page__selector-btn.has-tour {
    /* Extra right padding so the absolutely-positioned play affordance
       can sit over the corner without overlapping the "Case X" label. */
    padding-right: 36px;
}

.case-studies-page__selector-btn:hover {
    border-color: #3B3F7A;
    color: #1E2240;
    /* Soft lift on hover — same effect the home-page module-tile uses. */
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 34, 64, 0.10);
}

.case-studies-page__selector-btn:focus-visible {
    outline: none;
    border-color: #3B3F7A;
    box-shadow: 0 0 0 3px rgba(59, 63, 122, 0.25);
}

.case-studies-page__selector-btn.is-active {
    background: linear-gradient(135deg, #1E2240 0%, #3B3F7A 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(30, 34, 64, 0.22);
    transform: translateY(-1px);
}

.case-studies-page__selector-btn.is-active:hover {
    /* Already lifted — keep the same gradient on hover so the active pill
       doesn't appear to "click off" when the cursor passes over. */
    color: #ffffff;
    border-color: transparent;
}

.case-studies-page__selector-btn-eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.78;
}

.case-studies-page__selector-btn-label {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}

/* Descriptor that sits to the right of the pipe, e.g.
   "The Exemplary Biller". Wraps to two lines if needed, the row's
   align-items:stretch keeps all five cells the same height when
   one wraps. flex:1 1 0 + min-width:0 lets it shrink in narrow
   columns without bleeding outside the button. */
.case-studies-page__selector-btn-sub {
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    opacity: 0.82;
    /* Soft two-line cap so a runaway descriptor (e.g. case 2's longer
       "Pattern That Triggered Review") doesn't push the row taller
       than two lines worth, but the line-clamp stays loose enough
       that short descriptors render on one line and keep the card
       short. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.case-studies-page__selector-btn.is-active .case-studies-page__selector-btn-sub {
    /* On the active gradient card the descriptor needs full strength
       against the navy fill. */
    opacity: 0.95;
}

/* Play affordance, the small circular button that triggers a
   walkthrough for the case. Vertically centred on the right edge of
   each selector cell so the cell reads as a balanced "Case N + play"
   pairing rather than a button with a corner sticker. The fill is a
   muted slate (vs the prior near-black navy gradient) so the
   affordance reads as a quiet secondary action next to the bolder
   active-case pill, not as competition for it. */
.case-studies-page__playbtn {
    appearance: none;
    border: none;
    background: linear-gradient(135deg, #6E7397 0%, #8B91A6 100%);
    color: #ffffff;
    cursor: pointer;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    padding: 0;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(30, 34, 64, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease,
                background 0.15s ease;
    z-index: 1;
}

.case-studies-page__playbtn svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
    /* Optical centring: the play triangle's visual centre sits slightly
       left of geometric centre, nudge right 1px so it looks centred. */
    margin-left: 1px;
}

.case-studies-page__playbtn:hover {
    transform: translateY(-50%) scale(1.08);
    background: linear-gradient(135deg, #3B3F7A 0%, #565C82 100%);
    box-shadow: 0 4px 10px rgba(30, 34, 64, 0.30);
}

.case-studies-page__playbtn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 63, 122, 0.30),
                0 2px 5px rgba(30, 34, 64, 0.18);
}

/* When the row's main button is the active case, the play affordance
   inverts: white circle on the active pill so it stays visible against
   the dark gradient. */
.case-studies-page__selector-btn.is-active + .case-studies-page__playbtn,
.case-studies-page__selector-cell:has(.is-active) .case-studies-page__playbtn {
    background: #ffffff;
    color: #1E2240;
}

.case-studies-page__selector-btn.is-active + .case-studies-page__playbtn:hover,
.case-studies-page__selector-cell:has(.is-active) .case-studies-page__playbtn:hover {
    background: #ffffff;
    color: #1E2240;
}

/* ── Narrative column ──────────────────────────────────────────────── */

/* The per-case story now sits in the left column of the unified
   panel, with title + intro at the top and the four arc cards
   stacked vertically beneath. Flex-column so the arc grid below can
   flex-grow into the chart-matching column height set by .__split's
   align-items: stretch. */
.case-studies-page__narrative {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Hidden on tablet+ because the descriptor lives on the selector
   card; phones (≤480px, see media query) flip this back to display
   so the heading is visible there (the descriptor is hidden on
   phones because the selector cells get too narrow to carry it). */
.case-studies-page__narrative-title {
    display: none;
    margin: 0 0 8px;
    font-size: 1.2rem;
    font-weight: 600;
    color: #1E2240;
    line-height: 1.3;
    letter-spacing: -0.005em;
    text-align: center;
}

.case-studies-page__narrative-intro {
    margin: 0 0 14px;
    color: #2A2E55;
    font-size: 0.9rem;
    line-height: 1.5;
    /* Centred now that the heading above is gone, the intro reads
       as a balanced scene-setter at the top of the narrative
       column instead of a stray left-aligned paragraph. Clamped to
       three lines so it can grow into the heading's freed space
       without crowding the four arc cards below. The full sentence
       stays in the DOM for screen readers regardless of where the
       ellipsis lands. */
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Four arc cards stack vertically inside the narrative column.
   Each card becomes a wider-than-tall bar; the coloured stripe
   rotates from top-border to left-border to suit the new aspect
   ratio. The grid flex-grows to fill the column height the chart
   sets on the right, and each card flex-grows equally so the four
   bars share the available height evenly (no dead space at the
   foot of the column). */
.case-studies-page__narrative-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
}

.case-studies-page__narrative-card {
    background: #f7f8fb;
    border: 1px solid #EEF0F7;
    border-radius: 10px;
    padding: 12px 14px 14px 16px;
    /* Coloured LEFT stripe, set per variant below, calls out which
       arc step each card represents at a glance. The stripe rotated
       from top to left when the cards switched from horizontal tiles
       to vertical bars; a 4px left border at the new aspect ratio
       reads as a coloured "spine" running down the card. */
    border-left: 4px solid #d8dbe4;
    color: #2A2E55;
    /* Flex column with eyebrow at top and body centred in the
       remaining space; cards flex-grow inside their parent grid so
       the four bars together fill the column height matched to the
       chart on the right (no dead space at the foot of the column).
       align-items / justify-content keeps short copy from clinging
       to the eyebrow when the card grows taller than its content
       needs. */
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    /* position:relative so the walkthrough hand-cursor inside the
       focused card positions correctly. Also the relative-positioned
       transition target for the focus / dim states. */
    position: relative;
    transition: opacity 0.30s ease,
                transform 0.30s ease,
                box-shadow 0.30s ease,
                filter 0.30s ease;
}

/* Walkthrough card states. is-focused lifts the active arc card above
   the dim backdrop so it reads as the foreground while the other
   three drop back via is-dimmed. */
.case-studies-page__narrative-card.is-focused {
    opacity: 1;
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 14px 38px rgba(15, 22, 50, 0.22);
    z-index: 1002;
    background: #ffffff;
}

.case-studies-page__narrative-card.is-dimmed {
    opacity: 0.18;
    pointer-events: none;
    filter: saturate(0.6);
}

/* Per-arc accent colours, pulled from the GP Clarity palette so the
   stripe reads as part of the same visual system as the compliance-
   overview tiles and the home-page module cards. */
.case-studies-page__narrative-card--problem      { border-left-color: #E04D4D; }
.case-studies-page__narrative-card--intervention { border-left-color: #E0A53A; }
.case-studies-page__narrative-card--solution     { border-left-color: #3B7FD9; }
.case-studies-page__narrative-card--outcome      { border-left-color: #2BA86E; }

.case-studies-page__narrative-card-eyebrow {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #565C82;
    margin-bottom: 4px;
}

.case-studies-page__narrative-card-body {
    font-size: 0.86rem;
    line-height: 1.45;
    color: #2A2E55;
    /* Body fills the card height below the eyebrow, vertically
       centred inside that space. With the cards now flex-growing to
       match the chart height, shorter copy in one card otherwise
       hugs the eyebrow while a longer one in the next card fills its
       bar; centring keeps the bodies visually aligned across the
       four cards. */
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}

/* The chart wrap is the EChart's positioning context. EChart.razor
   renders its container with width:100%; height:560px (we pass those
   props on the page), so the wrap just needs to be the right outer box.
   overflow:hidden clips any in-flight render artefacts during option
   swaps when the user clicks between cases. */
.case-studies-page__chart-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

/* Walkthrough mode: the unified panel lifts above the dim backdrop
   and grows a stronger shadow so it reads as the foreground stage
   for the walkthrough story. */
.case-studies-page__unifiedpanel.is-spotlighted {
    position: relative;
    z-index: 1002;
    box-shadow: 0 18px 52px rgba(15, 22, 50, 0.30) !important;
}

/* ── Walkthrough chrome (dim backdrop + control bar) ────────────────
   Rendered only when a tour is active. Both elements sit at very
   high z-index so they layer over the rest of the page (including
   the public top app bar at z-index 1100 from Mud's default theme,
   we deliberately stay just below that so the brand chrome remains
   reachable). */

.case-studies-page__spotlight-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 22, 50, 0.55);
    z-index: 1000;
    cursor: pointer;
    animation: case-studies-backdrop-in 0.25s ease-out;
}

@keyframes case-studies-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* While the walkthrough is active the unified panel sits above the
   scrim via z-index, but the rest of the page (hero, page background)
   sits under it. */
.case-studies-page.is-walkthrough .case-studies-page__unifiedpanel {
    position: relative;
    z-index: 1001;
}

/* ── Walkthrough hand cursor ───────────────────────────────────────
   Pure CSS positioning, three variants for the three HandTarget
   values. Each variant's selector/parent has position:relative so
   the absolute coords here land predictably without JS measurement. */

.walkthrough-hand {
    display: block;
    width: 56px;
    height: 56px;
    pointer-events: none;
    position: absolute;
    z-index: 5;
    transform-origin: 30% 30%;
    animation: walkthrough-hand-tap 1.6s ease-in-out infinite;
}

.walkthrough-hand svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Card target, lands inside the focused arc card. Bottom-right
   corner so the hand reads as "click here" without covering the
   card body copy. */
.walkthrough-hand--card {
    right: 8px;
    bottom: 8px;
}

/* Legend target, lands near the top of the chart wrap, just below
   the legend strip, so the user's eye lifts up to the legend pills
   the chart filter is calling out. */
.walkthrough-hand--legend {
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    animation-name: walkthrough-hand-tap-centered;
}

/* ChartBand target, lands roughly over the middle of the data area
   so the user's eye drops down to the markArea band. */
.walkthrough-hand--chartband {
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-name: walkthrough-hand-tap-centered;
}

/* Idle "tapping" pulse, mimics a finger tapping on the target. The
   --centered variant preserves the translate-based centring of the
   legend / chart-band positions while still scaling the hand. */
@keyframes walkthrough-hand-tap {
    0%, 100% { transform: scale(1)    rotate(-8deg); }
    50%      { transform: scale(0.88) rotate(-8deg); }
}

@keyframes walkthrough-hand-tap-centered {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(0.88); }
}

/* Legend variant uses translateX only (top is already set, no
   centring on the vertical axis), so its keyframes need to keep that
   single-axis translate intact. Override here so the rule above's
   transform doesn't fight the per-variant transform-origin. */
.walkthrough-hand--legend {
    animation-name: walkthrough-hand-tap-legend;
}

@keyframes walkthrough-hand-tap-legend {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50%      { transform: translateX(-50%) scale(0.88); }
}

/* ── Walkthrough control strip ─────────────────────────────────────
   Sits inline at the top of the unified panel between the case
   selector and the narrative/chart split. Horizontal layout:
   progress (left) | caption (centre, flex-grow) | buttons (right).

   Replaces the previous fixed-bottom floating pill, which was
   visually convenient but covered the chart's last few months
   right when the walkthrough was telling the user to look there.
   Inline at the top keeps the entire chart visible, and the user's
   eye stays in the panel for the whole story. */

/* Absolutely-anchored overlay strip. Sits inside .__chart-wrap
   (position:relative parent) and lays out across the dead-space
   band the chart canvas reserves below the x-axis labels via
   grid.bottom=130 (see CaseStudiesProvider.BuildOption). Because
   it's absolute, the chart column's height is exactly the chart
   canvas height (540px) whether the walkthrough is on or off,
   the unified panel never grows taller when a tour starts. */
.case-studies-page__walkthrough-strip {
    position: absolute;
    /* Centred horizontally under the graph (translateX(-50%)) and
       sized to a comfortable middle width so the strip reads as a
       distinct floating control pill rather than another full-width
       row inside the panel. */
    left: 50%;
    transform: translateX(-50%);
    bottom: 4px;
    width: min(70%, 560px);
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 16px;
    background: #f7f8fb;
    border: 1px solid #E5E8F0;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(15, 22, 50, 0.10);
    z-index: 2;
    animation: walkthrough-strip-in 0.25s ease-out;
}

@keyframes walkthrough-strip-in {
    /* Strip is centred via translateX(-50%) on the base rule, so the
       animation has to keep the X half-pull while sliding Y, otherwise
       it would yank the strip back to the left edge during the
       0.25s entrance. */
    from { opacity: 0; transform: translate(-50%, 4px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Auto-advance countdown gauge, a thin track at the very bottom
   of the strip (inset 1px from the strip's rounded border so it
   doesn't poke past the corners). The fill drains from 0 -> 100%
   width over the beat interval (--beat-ms is set inline from the
   Razor via BEAT_INTERVAL_MS), then resets on each new beat
   because the inner span has @key="_beatIndex" and is recreated.
   Pausing the walkthrough freezes the fill mid-stride via
   animation-play-state. */
.case-studies-page__walkthrough-timer {
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;
    height: 3px;
    overflow: hidden;
    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
    background: rgba(30, 34, 64, 0.06);
    pointer-events: none;
}

.case-studies-page__walkthrough-timer-fill {
    display: block;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #3B3F7A 0%, #1E2240 100%);
    transform-origin: left center;
    animation: walkthrough-timer-drain var(--beat-ms, 5000ms) linear forwards;
}

.case-studies-page__walkthrough-timer-fill.is-paused {
    animation-play-state: paused;
}

@keyframes walkthrough-timer-drain {
    from { width: 0%; }
    to   { width: 100%; }
}

.case-studies-page__walkthrough-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #565C82;
    flex: 0 0 auto;
    white-space: nowrap;
}

.case-studies-page__walkthrough-progress-bar {
    display: inline-flex;
    gap: 6px;
}

.case-studies-page__walkthrough-progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d8dbe4;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.case-studies-page__walkthrough-progress-dot.is-on {
    background: linear-gradient(135deg, #1E2240 0%, #3B3F7A 100%);
    transform: scale(1.15);
}

.case-studies-page__walkthrough-caption {
    margin: 0;
    color: #1E2240;
    font-size: 0.92rem;
    line-height: 1.4;
    text-align: center;
    flex: 1 1 auto;
    min-width: 0;
}

.case-studies-page__walkthrough-buttons {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.case-studies-page__walkthrough-btn {
    appearance: none;
    border: 1px solid #d8dbe4;
    background: #ffffff;
    color: #1E2240;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease,
                border-color 0.15s ease,
                transform 0.15s ease,
                box-shadow 0.15s ease,
                color 0.15s ease;
}

.case-studies-page__walkthrough-btn:hover:not(:disabled) {
    border-color: #3B3F7A;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(30, 34, 64, 0.18);
}

.case-studies-page__walkthrough-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 63, 122, 0.30);
    border-color: #3B3F7A;
}

.case-studies-page__walkthrough-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.case-studies-page__walkthrough-btn--primary {
    background: linear-gradient(135deg, #1E2240 0%, #3B3F7A 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(30, 34, 64, 0.22);
}

.case-studies-page__walkthrough-btn--primary:hover {
    border-color: transparent;
    color: #ffffff;
}

.case-studies-page__walkthrough-btn--exit:hover:not(:disabled) {
    border-color: #E04D4D;
    color: #E04D4D;
}

/* ── Mobile / narrow-viewport tweaks ────────────────────────────────── */

/* Below 960px the 38/62 split collapses to a single column so the
   narrative sits above the chart at the natural reading order. We
   give the chart a touch more breathing room than the narrative
   gets, but otherwise both consume the full panel width. */
@media (max-width: 960px) {
    .case-studies-page__split {
        flex-direction: column;
        gap: 18px;
    }

    .case-studies-page__narrative-col,
    .case-studies-page__chart-col {
        flex: 1 1 auto;
        width: 100%;
    }

    /* On a single-column layout the cards can fan out 2-up again
       (per-row at this width is still tighter than the 4-up
       horizontal we had on desktop pre-redesign, but it stops the
       column from going gratuitously tall). */
    .case-studies-page__narrative-grid {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .case-studies-page__narrative-card {
        flex: 1 1 calc(50% - 10px);
    }
}

@media (max-width: 768px) {
    .case-studies-page__hero {
        padding: 40px 18px 52px;
    }

    .case-studies-page__hero h1 {
        font-size: 1.7rem;
    }

    .case-studies-page__hero-lead {
        font-size: 0.92rem;
    }

    .case-studies-page__unifiedpanel {
        padding: 14px 14px 18px;
    }

    .case-studies-page__selector {
        gap: 8px;
    }

    .case-studies-page__selector-cell {
        /* Below 768px we drop the desktop 200px floor so five cells
           still fit on a narrow viewport without wrapping into two
           rows. Stays a flex item so they share width evenly. */
        min-width: 72px;
        max-width: none;
    }

    .case-studies-page__selector-btn {
        padding: 8px 14px;
        /* Revert to the original stacked layout, CASE eyebrow above
           the number. Tablet/phone cells are too narrow for the
           horizontal CASE/N | descriptor pattern, so we hide the
           descriptor + pipe (rules below) and let the button sit
           as a tight vertical stack like the pre-descriptor design. */
        flex-direction: column;
        align-items: center;
        gap: 2px;
        text-align: center;
    }

    /* Hide the horizontal descriptor + pipe on tablet/phone, the
       narrative title heading below the chart picks up the missing
       descriptor on these viewports (display flipped back on in
       the narrative-title rule for this tier). */
    .case-studies-page__selector-btn-sep,
    .case-studies-page__selector-btn-sub {
        display: none;
    }

    .case-studies-page__narrative-title {
        display: block;
    }

    .case-studies-page__selector-btn.has-tour {
        /* Tighter on mobile so the right-side play affordance still
           clears the case-label text. */
        padding-right: 28px;
    }

    .case-studies-page__playbtn {
        width: 22px;
        height: 22px;
        top: 4px;
        right: 4px;
    }

    .case-studies-page__playbtn svg {
        width: 10px;
        height: 10px;
    }

    .case-studies-page__selector-btn-label {
        font-size: 1rem;
    }

    .case-studies-page__split {
        margin-top: 16px;
        padding-top: 16px;
    }

    .case-studies-page__narrative-title {
        font-size: 1.1rem;
    }

    .case-studies-page__narrative-intro {
        font-size: 0.88rem;
        margin-bottom: 12px;
    }

    .case-studies-page__narrative-grid {
        gap: 8px;
    }

    /* At <=768px the 2-up wrap from the 960px tier still applies,
       but cards are quite narrow, drop them to a single column for
       readability. */
    .case-studies-page__narrative-card {
        flex: 1 1 100%;
    }
}

/* Phone — at <=480px the 5-button case selector wraps to two rows even
   with the 72px floor from the 768px tier. We drop it to 60px so all
   five fit on a single row at 360px viewport (5 × 60 + 4 × 8 gap = 332).
   Eyebrows shrink so labels stay readable; per-arc cards switch to a
   single column (auto-fit minmax already handles the wider tiers). */
@media (max-width: 480px) {
    .case-studies-page__hero {
        padding: 32px 14px 44px;
    }

    .case-studies-page__hero h1 {
        font-size: 1.45rem;
    }

    .case-studies-page__selector {
        gap: 6px;
    }

    .case-studies-page__selector-cell {
        min-width: 60px;
    }

    .case-studies-page__selector-btn {
        padding: 6px 8px;
    }

    .case-studies-page__selector-btn.has-tour {
        padding-right: 22px;
    }

    .case-studies-page__selector-btn-eyebrow {
        font-size: 0.6rem;
        letter-spacing: 0.04em;
    }

    .case-studies-page__selector-btn-label {
        font-size: 0.88rem;
    }

    /* The narrative descriptor doesn't fit on a 60px-wide cell
       without forcing the row to wrap, hide it on phones, the
       narrative title below the chart is unhidden here instead so
       the user still sees "Case Study N, The XYZ". */
    .case-studies-page__selector-btn-sub {
        display: none;
    }

    .case-studies-page__narrative-title {
        display: block;
        font-size: 1rem;
        margin-bottom: 6px;
    }

    .case-studies-page__playbtn {
        width: 18px;
        height: 18px;
        top: 3px;
        right: 3px;
    }

    .case-studies-page__playbtn svg {
        width: 8px;
        height: 8px;
    }

    .case-studies-page__narrative-card {
        padding: 9px 11px 11px 13px;
    }

    .case-studies-page__narrative-card-eyebrow {
        font-size: 0.62rem;
    }

    /* Walkthrough strip on tiny screens, widen the centred pill so
       progress + buttons get enough room to lay out horizontally
       even on narrow viewports. Still centred via the base rule's
       translateX(-50%). */
    .case-studies-page__walkthrough-strip {
        width: calc(100% - 16px);
        padding: 0 12px;
        gap: 10px;
    }

    .case-studies-page__walkthrough-buttons {
        margin-left: auto;
    }

    .walkthrough-hand {
        width: 42px;
        height: 42px;
    }
}