/* /Components/Pages/Home.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   AppHomepage - scene-based storefront (Marketing Motion Design handbook)

   Motion contract:
   - Base styles (no .has-motion) render the composed FINAL pose, so the
     page is complete with JavaScript disabled and during prerender. The
     engine adds .has-motion before arming any scene; only then do
     pre-entry poses hide anything.
   - JS flips state classes (.active / .pose2 / .past / .has-rail /
     .is-scrolled / .cw-N / .is-center...) and publishes custom properties
     (--p, --exit, --oi, --fp); every visual transition lives HERE.
   - Continuous motion uses transform, opacity, brightness, and
     background-position only.
   - Every entrance has a reverse pose so scenes replay cleanly.
   - Reduced motion: final poses, no pinning, no animation.
   - Pin and pose geometry is desktop-only (min-width 961px) AND
     .has-motion-only; the base document is normal static flow.

   Design language: brand-locked to the Alectrone iris identity (hue 268),
   mirroring the Calendar.Web landing (LandingPage.razor.css lp-* spec):
   same palette values, 64px landing header, 1200px content container,
   button and card vocabulary, motion tokens.

   Alectrone accent grammar (standing rule): category color is a tinted
   wash plus color-mixed text, selection is a full-surface tint with a 1px
   ring, emphasis is luminance (brightness/glow). No thick left accent
   borders, no multi-hue gradients, no literal arrow characters.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Root and palette ── */
.hp[b-obwmgg7avr] {
    /* Marketing surface is brand-locked to iris (hue 268), immune to any
       persisted app theme. Values mirror LandingPage.razor.css exactly. */
    --lp-primary: hsl(268, 62%, 58%);
    --lp-primary-strong: hsl(268, 70%, 48%);
    --lp-primary-soft: hsl(268, 62%, 68%);
    --lp-primary-muted: hsl(268, 40%, 24%);
    --lp-green: #10b981;
    /* Clean near-black ground (hue 240, low saturation): content floats on a
       neutral field, not a purple wash. Purple stays an accent only (primary,
       chips, signal), never the page background. */
    --lp-bg-deep: hsl(240, 9%, 5%);
    /* Second ground level (scene fields): neutral, matching --lp-bg-deep's hue
       so no scene reads as a purple field. */
    --lp-bg: hsl(240, 8%, 9%);
    --lp-bg-card: hsl(268, 16%, 13%);
    --lp-bg-card-hover: hsl(268, 18%, 16%);
    --lp-border: hsl(268, 16%, 18%);
    --lp-text: hsl(268, 10%, 92%);
    --lp-text-muted: hsl(268, 10%, 60%);
    --lp-radius: 12px;
    --lp-radius-lg: 16px;
    --lp-transition: 200ms ease;
    --lp-max-width: 1200px;
    --hp-header-h: 64px;
    /* Motion tokens (handbook 11.2 scale). */
    --lp-motion-fast: 150ms;
    --lp-motion-base: 300ms;
    --lp-motion-scene: 500ms;
    --lp-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
    --lp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    /* The page body itself never scrolls horizontally (a safety net for any
       scene whose decorative props sit near the edges on small screens). */
    overflow-x: hidden;
    /* This element carries the page scroll. Its scrollbar is HIDDEN (user
       direction 2026-07-28): the stage runs clean to the right edge, and
       scrolling stays fully available via wheel, keyboard, and touch. The
       chapter rail and scroll cue carry position orientation instead. */
    color-scheme: dark;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    /* Hold/stop at each section: scrolling settles on one section at a time.
       Proximity (not mandatory) so the tall pinned scenes and the wheel-
       captured shelf/carousel still scrub freely; snap only bites near a
       section boundary. Stood down under reduced motion (see that block). */
    scroll-snap-type: y proximity;
    background: var(--lp-bg-deep);
    color: var(--lp-text);
    font-family: var(--ux-font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* WebKit: hide the page scrollbar (the shelf keeps its own; that one is a
   deliberate scroll affordance). */
.hp[b-obwmgg7avr]::-webkit-scrollbar {
    display: none;
}

/* Visible keyboard focus on the dark stage, for interactive elements only
   (FocusOnNavigate programmatically focuses the h1; that must not draw a
   focus ring around the hero headline). */
.hp :is(a, button, [tabindex="0"]):focus-visible[b-obwmgg7avr] {
    outline: 2px solid var(--lp-primary-soft);
    outline-offset: 2px;
}

.hp h1:focus[b-obwmgg7avr],
.hp h1:focus-visible[b-obwmgg7avr] {
    outline: none;
}

/* Each top-level section is a scroll-snap stop, so scrolling holds on one
   section at a time. scroll-margin-top keeps the snapped section (and in-page
   anchors) clear of the sticky header. */
.hp > section[b-obwmgg7avr],
.hp > footer[b-obwmgg7avr] {
    scroll-snap-align: start;
    /* Firm stop: the scroll must land on each section before it can advance to
       the next (it can't glide past on one flick, the way soft proximity lets
       it). Only bites at section boundaries, so the pinned scenes still scrub
       through internally. This is what makes each section "stop" when scrolling. */
    scroll-snap-stop: always;
    scroll-margin-top: calc(var(--hp-header-h) + 8px);
}

/* Scenes that scrub the whole viewport or own the wheel opt OUT of snapping:
   - the hero scrubs the statement over its single viewport, so a snap tug to
     its start would freeze the grow and title recede;
   - the component showcase (focus carousel) and the shelf capture the wheel,
     so a snap tug cancels their boundary release (you could not scroll past).
   The tall pinned runways keep snapping: they are taller than the proximity
   range, so it only bites at their entry, never mid-scrub.
   Selectors are child-combined so they outrank the `.hp > section` rule
   above (which would otherwise win on specificity and re-enable snapping).
   The advanced-components slideshow does NOT capture the wheel, so it snaps
   like a normal section (not listed here). */
.hp > .hp-hero[b-obwmgg7avr],
.hp > #showcase[b-obwmgg7avr] {
    scroll-snap-align: none;
}

/* ── Shared vocabulary ── */

.hp-shell[b-obwmgg7avr] {
    width: 100%;
    max-width: var(--lp-max-width);
    margin: 0 auto;
    padding: 0 24px;
}

.hp-eyebrow[b-obwmgg7avr] {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lp-primary-soft);
}

/* The accent is a word, not a rainbow: one iris highlight inside otherwise
   quiet type. */
.hp-accent[b-obwmgg7avr] {
    color: var(--lp-primary-soft);
}

/* The Playground's category color: the bright green the section has always
   carried (#22c55e = hsl(142, 71%, 45%)). Scoped to this one scene; the
   rest of the page stays iris. */
.hp-eyebrow--green[b-obwmgg7avr] {
    color: #22c55e;
}

/* Compound selector: this class must win over the base .hp-link color
   regardless of declaration order. */
.hp-link.hp-link--green[b-obwmgg7avr] {
    color: #22c55e;
}

/* Inline link with a CSS-drawn chevron affordance (no literal arrow
   characters; the chevron slides on hover via the fast motion token). */
.hp-link[b-obwmgg7avr] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--lp-primary-soft);
    text-decoration: none;
}

.hp-link[b-obwmgg7avr]::after {
    content: "";
    width: 0.42em;
    height: 0.42em;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    transition: margin-left var(--lp-motion-fast) ease;
}

.hp-link--down[b-obwmgg7avr]::after {
    transform: rotate(135deg);
    transition: margin-top var(--lp-motion-fast) ease;
}

.hp-card:hover .hp-link[b-obwmgg7avr]::after,
.hp-play:hover .hp-link[b-obwmgg7avr]::after,
.hp-link:hover[b-obwmgg7avr]::after {
    margin-left: 0.35rem;
}

.hp-card:hover .hp-link--down[b-obwmgg7avr]::after {
    margin-left: 0;
    margin-top: 0.35rem;
}

/* ── Buttons (landing spec: ghost / primary / outline, radius 8) ── */

.hp-btn[b-obwmgg7avr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 8px 20px;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.5;
    text-decoration: none;
    /* Explicit list, never `all`: the focus outline must snap into place,
       not morph in from the UA's initial ring. */
    transition: color var(--lp-transition), background-color var(--lp-transition),
                border-color var(--lp-transition), box-shadow var(--lp-transition),
                transform var(--lp-transition);
    cursor: pointer;
    border: none;
    white-space: nowrap;
}

.hp-btn--ghost[b-obwmgg7avr] {
    background: transparent;
    color: var(--lp-text-muted);
    border: 1px solid transparent;
}
.hp-btn--ghost:hover[b-obwmgg7avr] {
    color: var(--lp-text);
    background: hsla(268, 20%, 100%, 0.06);
}

.hp-btn--primary[b-obwmgg7avr] {
    background: var(--lp-primary);
    color: #fff;
    box-shadow: 0 4px 18px hsla(268, 62%, 58%, 0.25);
}
.hp-btn--primary:hover[b-obwmgg7avr] {
    background: var(--lp-primary-strong);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px hsla(268, 62%, 58%, 0.4);
}

.hp-btn--outline[b-obwmgg7avr] {
    background: transparent;
    color: var(--lp-text);
    border: 1px solid var(--lp-border);
}
.hp-btn--outline:hover[b-obwmgg7avr] {
    border-color: var(--lp-primary-soft);
    color: var(--lp-primary-soft);
    background: hsla(268, 62%, 58%, 0.06);
    transform: translateY(-2px);
}

.hp-btn--lg[b-obwmgg7avr] {
    padding: 12px 28px;
    font-size: 1rem;
    border-radius: 10px;
}

/* ── Landing header (T11: quiet chrome; elevation flips with hysteresis) ── */

.hp-header[b-obwmgg7avr] {
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    background: hsla(268, 20%, 9%, 0.6);
    border-bottom: 1px solid transparent;
    transition: background var(--lp-motion-base) ease, border-color var(--lp-motion-base) ease;
}

/* .is-scrolled is flipped by the engine at >24px down / <4px up. */
.hp-header.is-scrolled[b-obwmgg7avr] {
    background: hsla(268, 20%, 9%, 0.85);
    border-bottom-color: var(--lp-border);
}

.hp-header__inner[b-obwmgg7avr] {
    padding: 0 32px;
    height: var(--hp-header-h);
    display: flex;
    align-items: center;
    gap: 32px;
}

.hp-header__brand[b-obwmgg7avr] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--lp-text);
    font-weight: 600;
    font-size: 1.1rem;
    white-space: nowrap;
}

.hp-header__nav[b-obwmgg7avr] {
    display: flex;
    gap: 24px;
}

.hp-header__nav a[b-obwmgg7avr] {
    color: var(--lp-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color var(--lp-transition);
}
.hp-header__nav a:hover[b-obwmgg7avr] {
    color: var(--lp-text);
}

.hp-header__actions[b-obwmgg7avr] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Chapter spine (T18) ── */

.hp-rail[b-obwmgg7avr] {
    position: sticky;
    top: 0;
    height: 0;
    z-index: 90;
    overflow: visible;
    flex-shrink: 0;
}

.hp-rail__inner[b-obwmgg7avr] {
    position: absolute;
    left: 20px;
    top: 34vh;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    transform: translateX(-0.75rem);
    pointer-events: none;
    transition: opacity var(--lp-motion-scene) ease, transform var(--lp-motion-scene) var(--lp-ease-enter);
}

.hp.has-rail .hp-rail__inner[b-obwmgg7avr] {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.hp-rail__link[b-obwmgg7avr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.4rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: var(--lp-text-muted);
}

.hp-rail__dot[b-obwmgg7avr] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lp-border);
    transition: background var(--lp-motion-base) ease, box-shadow var(--lp-motion-base) ease, transform var(--lp-motion-base) ease;
    flex-shrink: 0;
}

/* Labels run vertically along the rail (top to bottom), so the spine
   stays slim and never collides with full-bleed stages (consistent with
   the Calendar landing). */
.hp-rail__label[b-obwmgg7avr] {
    writing-mode: vertical-rl;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-0.3rem);
    transition: opacity var(--lp-motion-base) ease, transform var(--lp-motion-base) ease,
                color var(--lp-motion-base) ease, max-height var(--lp-motion-scene) ease;
    white-space: nowrap;
}

.hp-rail__link:hover .hp-rail__label[b-obwmgg7avr] {
    opacity: 1;
    transform: translateY(0);
    max-height: 8rem;
}

.hp-rail__link.active .hp-rail__dot[b-obwmgg7avr] {
    background: var(--lp-primary-soft);
    box-shadow: 0 0 10px hsla(268, 62%, 68%, 0.8);
    transform: scale(1.25);
}

.hp-rail__link.active .hp-rail__label[b-obwmgg7avr] {
    opacity: 1;
    transform: translateY(0);
    max-height: 8rem;
    color: var(--lp-text);
}

/* ═══ Scene 1 · Hero (T1 entrance + parallax, T14 multi-speed exit) ═══ */

.hp-hero[b-obwmgg7avr] {
    --exit: 0;
    /* Base pose (no motion / reduced): the in-hero chapter statement is
       filled and full size (--sg/--st = 1), readable without JS. Under
       .has-motion the engine's --exit scrub drives these (see below). */
    --sg: 1;
    --st: 1;
    position: relative;
    flex-shrink: 0;
}

/* The stage holds the composed hero and fills one screen. On desktop with
   motion it pins (see the min-width block) so the overture scrubs in place and
   the hero stops as a full screen before advancing, like the Calendar landing's
   hero. At base / mobile it is simply the single-viewport hero. */
.hp-hero__stage[b-obwmgg7avr] {
    position: relative;
    min-height: calc(100vh - var(--hp-header-h));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 24px 5rem;
    overflow: hidden;
}

/* T14: the hero holds, then departs (content faster than the backdrop), so
   the in-hero statement can grow and fill before the stage empties. */
.hp-hero__backdrop[b-obwmgg7avr] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform: translateY(calc(max(var(--exit) - 0.55, 0) * -6rem));
}

.hp-hero__inner[b-obwmgg7avr] {
    position: relative;
    max-width: 800px;
    transform: translateY(calc(max(var(--exit) - 0.55, 0) * -12rem));
    opacity: calc(1 - max(var(--exit) - 0.55, 0) * 3);
}

/* .has-motion: the statement's size (--sg) and two-beat gradient fill (--st)
   become pure functions of the hero's --exit scrub (published by the engine),
   matching the Calendar landing's overture beats: grow over 0..0.32, fill
   over 0.06..0.48, hold, then depart. Without .has-motion the base 1/1
   defaults stand (statement filled and readable). */
.hp.has-motion .hp-hero[b-obwmgg7avr] {
    --sg: clamp(0, calc(var(--exit) / 0.32), 1);
    --st: clamp(0, calc((var(--exit) - 0.06) / 0.42), 1);
}

/* Aurora layers: geometry + JS parallax transform on the element; the
   visual lives on ::before so idle drift never fights parallax (T1). */
.hp-aurora[b-obwmgg7avr] {
    position: absolute;
    width: 44rem;
    height: 44rem;
    transition: transform 0.5s var(--lp-ease-enter);
    will-change: transform;
}

.hp-aurora[b-obwmgg7avr]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0;
    animation:
        hp-fade-in-b-obwmgg7avr 1.6s ease 0.2s forwards,
        hp-drift-b-obwmgg7avr 28s ease-in-out 2s infinite alternate;
}

/* One identity, three temperatures of it: iris, its indigo neighbor, and a
   deep orchid. No rainbow drift. */
.hp-aurora--violet[b-obwmgg7avr] { top: -18rem; left: 6%; }
.hp-aurora--violet[b-obwmgg7avr]::before {
    background: radial-gradient(closest-side, hsla(268, 70%, 58%, 0.32), transparent 70%);
}

.hp-aurora--indigo[b-obwmgg7avr] { top: -9rem; right: 0; }
.hp-aurora--indigo[b-obwmgg7avr]::before {
    background: radial-gradient(closest-side, hsla(243, 65%, 60%, 0.17), transparent 70%);
    animation-delay: 0.45s, 3s;
    animation-duration: 1.6s, 36s;
}

.hp-aurora--orchid[b-obwmgg7avr] { bottom: -24rem; left: 30%; }
.hp-aurora--orchid[b-obwmgg7avr]::before {
    background: radial-gradient(closest-side, hsla(288, 55%, 52%, 0.15), transparent 70%);
    animation-delay: 0.7s, 4s;
    animation-duration: 1.6s, 42s;
}

.hp-hero__gridsheet[b-obwmgg7avr] {
    position: absolute;
    inset: -2rem;
    background-image:
        linear-gradient(hsla(268, 10%, 92%, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, hsla(268, 10%, 92%, 0.05) 1px, transparent 1px);
    background-size: 3.5rem 3.5rem;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%);
    opacity: 0;
    animation: hp-fade-in-b-obwmgg7avr 1.4s ease 0.1s forwards;
    transition: transform 0.5s var(--lp-ease-enter);
}

/* Floating product atoms: component fragments as depth-graded props. */
.hp-hero__props[b-obwmgg7avr] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* The outer prop owns placement, the entrance fade, and the JS parallax
   transform. The __body layer owns the card visual and the idle float, so
   ambient drift never fights the parallax transform (T1 discipline,
   consistent with the Calendar landing). Float periods and phases differ
   per prop: four cards must never bob in sync. */
.hp-prop[b-obwmgg7avr] {
    position: absolute;
    opacity: 0;
    animation: hp-fade-in-b-obwmgg7avr 1s ease both;
    transition: transform 0.5s var(--lp-ease-enter);
    will-change: transform;
}

.hp-prop__body[b-obwmgg7avr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid hsla(268, 30%, 60%, 0.18);
    background: hsla(268, 20%, 12%, 0.72);
    /* No backdrop-filter: this chip floats (transform animation), and a
       backdrop-filter under a transform leaks a square past the rounded
       corners in Chromium. Fill is opaque enough that the blur wasn't visible. */
    box-shadow: 0 8px 32px hsla(268, 40%, 4%, 0.5);
    font-size: 0.75rem;
    color: var(--lp-text-muted);
    animation: hp-prop-float-b-obwmgg7avr 9s ease-in-out -3s infinite alternate;
}

.hp-prop--tl[b-obwmgg7avr] { top: 22%; left: 9%; animation-delay: 1.1s; }
.hp-prop--tr[b-obwmgg7avr] { top: 17%; right: 10%; animation-delay: 1.3s; }
.hp-prop--bl[b-obwmgg7avr] { bottom: 24%; left: 13%; animation-delay: 1.5s; }
.hp-prop--br[b-obwmgg7avr] { bottom: 20%; right: 14%; animation-delay: 1.7s; }

.hp-prop--tr .hp-prop__body[b-obwmgg7avr] {
    animation: hp-prop-drift-b-obwmgg7avr 12s ease-in-out -5s infinite alternate;
}

.hp-prop--bl .hp-prop__body[b-obwmgg7avr] {
    animation-duration: 11s;
    animation-delay: -7s;
    animation-direction: alternate-reverse;
}

.hp-prop--br .hp-prop__body[b-obwmgg7avr] {
    animation: hp-prop-drift-b-obwmgg7avr 10s ease-in-out -2s infinite alternate-reverse;
}

.hp-prop__btn[b-obwmgg7avr] {
    padding: 5px 12px;
    border-radius: 6px;
    background: var(--lp-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    box-shadow: 0 3px 12px hsla(268, 62%, 58%, 0.35);
}

.hp-prop__switch[b-obwmgg7avr] {
    width: 1.9rem;
    height: 1.05rem;
    border-radius: 999px;
    background: hsla(268, 62%, 58%, 0.6);
    display: inline-flex;
    align-items: center;
    padding: 0.12rem;
}

.hp-prop__knob[b-obwmgg7avr] {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: #fff;
    margin-left: auto;
}

.hp-prop__label[b-obwmgg7avr] {
    font-weight: 600;
}

.hp-prop__cell[b-obwmgg7avr] {
    font-weight: 600;
    color: var(--lp-text);
}

.hp-prop__cell--ok[b-obwmgg7avr] {
    color: var(--lp-green);
    font-size: 0.68rem;
}

.hp-prop__event[b-obwmgg7avr] {
    padding: 4px 9px;
    border-radius: 6px;
    background: hsla(268, 62%, 58%, 0.22);
    color: hsl(268, 62%, 82%);
    font-weight: 600;
    white-space: nowrap;
}

/* Entrance choreography: eyebrow, headline, lede, controls, cue last. */
/* Fill mode is BACKWARDS, never both: a forwards fill would freeze the
   final keyframe onto these elements forever and override every
   scroll-driven declaration (the cue's exit fade was silently dead under
   the old `both`). */
.hp-hero__e1[b-obwmgg7avr] { animation: hp-rise-b-obwmgg7avr 0.7s var(--lp-ease-enter) 0.25s backwards; }
.hp-hero__e2[b-obwmgg7avr] { animation: hp-rise-b-obwmgg7avr 0.8s var(--lp-ease-enter) 0.4s backwards; }
/* The statement carries a scrubbed transform (--sg scale), so its entrance
   fades opacity only (hp-fade-in), never a transform that would fight it. */
.hp-hero__e2b[b-obwmgg7avr] { animation: hp-fade-in-b-obwmgg7avr 0.8s var(--lp-ease-enter) 0.5s backwards; }
.hp-hero__e3[b-obwmgg7avr] { animation: hp-rise-b-obwmgg7avr 0.8s var(--lp-ease-enter) 0.6s backwards; }
.hp-hero__e4[b-obwmgg7avr] { animation: hp-rise-b-obwmgg7avr 0.8s var(--lp-ease-enter) 0.8s backwards; }
.hp-hero__e5[b-obwmgg7avr] { animation: hp-cue-fade-b-obwmgg7avr 1s ease 1.6s backwards; }

.hp-hero__title[b-obwmgg7avr] {
    margin: 0 auto 20px;
    font-size: clamp(2.8rem, 7vw, 5.4rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--lp-text);
}

/* The title yields the frame: as the statement grows into the display line
   the title shrinks, rises, and dims to scenery (--sg is the growth scrub),
   exactly as the Calendar landing's hero title does. Gated on .has-motion
   because the base / reduced pose parks --sg at 1 (the composed final pose);
   the scrub starts --sg at 0 (full-size title) and grows it with scroll. The
   .hp-accent on the closing word stays a single static iris highlight. */
.hp.has-motion .hp-hero .hp-hero__title[b-obwmgg7avr] {
    transform: translateY(calc(var(--sg) * -2.2rem)) scale(calc(1 - var(--sg) * 0.24));
    opacity: calc(1 - var(--sg) * 0.5);
}

/* The supporting copy recedes early (over 0..0.22 of the runway), clearing
   the stage for the statement to take over (matches the Calendar landing).
   Driven by --exit (0 at rest), so base and reduced poses stay fully lit. */
.hp-hero .hp-eyebrow[b-obwmgg7avr],
.hp-hero .hp-hero__lede[b-obwmgg7avr],
.hp-hero .hp-hero__cta-row[b-obwmgg7avr] {
    opacity: calc(1 - min(var(--exit) / 0.22, 1) * 0.92);
}

.hp-hero__lede[b-obwmgg7avr] {
    font-size: 1.2rem;
    color: var(--lp-text-muted);
    max-width: 600px;
    margin: 0 auto 36px;
    line-height: 1.7;
}

.hp-hero__cta-row[b-obwmgg7avr] {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Scroll cue: the explicit invitation that the page continues (T11). */
.hp-hero__cue[b-obwmgg7avr] {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    margin-left: -13px;
    width: 26px;
    height: 42px;
    border: 2px solid hsla(268, 30%, 60%, 0.4);
    border-radius: 14px;
    opacity: calc(0.9 - var(--exit) * 3);
}

.hp-hero__cue-dot[b-obwmgg7avr] {
    position: absolute;
    left: 50%;
    top: 7px;
    width: 4px;
    height: 8px;
    margin-left: -2px;
    border-radius: 3px;
    background: var(--lp-primary-soft);
    animation: hp-cue-b-obwmgg7avr 1.8s ease-in-out 0.4s infinite;
}

/* ═══ In-hero chapter statement (folded in to match the Calendar landing) ═══
   A subtitle at rest under the "Play. Build. Scale." headline, it grows into
   the display line as the hero's --exit scrub advances while the title recedes
   above it, so it takes tight negative margins and the full display size at
   growth, exactly as the Calendar landing's hero statement does. Size derives
   from --sg; the two-beat gradient fill and line handoff derive from --st. */
.hp-hero__statement[b-obwmgg7avr] {
    margin: -0.9rem auto -1.1rem;
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    transform: translateY(calc(var(--sg) * -1rem)) scale(calc(0.42 + var(--sg) * 0.58));
}

.hp-hero__statement-line[b-obwmgg7avr] {
    display: block;
    background-image: linear-gradient(100deg,
        hsl(268, 30%, 96%) 0%, hsl(268, 65%, 80%) 30%, var(--lp-primary) 48%,
        hsla(268, 10%, 92%, 0.22) 52%, hsla(268, 10%, 92%, 0.22) 100%);
    background-size: 210% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Line 1 fills first (0..0.5 of --st); line 2 follows (0.3..0.8). Past 0.75
   the focus hands over: the setup line recedes a breath, the payoff line
   lights up and leans in. Matches the Calendar landing's hero statement. */
.hp-hero__statement-line--1[b-obwmgg7avr] {
    --l1: clamp(0, calc(var(--st) / 0.5), 1);
    --hand: clamp(0, calc((var(--st) - 0.75) / 0.25), 1);
    background-position-x: calc(100% * (1 - var(--l1)));
    opacity: calc(1 - var(--hand) * 0.45);
    transform: scale(calc(1 - var(--hand) * 0.03));
}

.hp-hero__statement-line--2[b-obwmgg7avr] {
    --l2: clamp(0, calc((var(--st) - 0.3) / 0.5), 1);
    --hand: clamp(0, calc((var(--st) - 0.75) / 0.25), 1);
    background-position-x: calc(100% * (1 - var(--l2)));
    transform: scale(calc(1 + var(--hand) * 0.04));
    filter: brightness(calc(1 + var(--hand) * 0.15));
}

/* ═══ Scene shells ═══ */

.hp-scene[b-obwmgg7avr] {
    padding: 6rem 0;
}

.hp-scene__header[b-obwmgg7avr] {
    margin: 0 auto 3rem;
    max-width: 640px;
    text-align: center;
}

.hp-scene__title[b-obwmgg7avr] {
    margin: 0 0 12px;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--lp-text);
}

.hp-scene__subtitle[b-obwmgg7avr] {
    margin: 0 auto;
    font-size: 1.1rem;
    color: var(--lp-text-muted);
    line-height: 1.7;
    max-width: 560px;
}

.hp-scene__ctarow[b-obwmgg7avr] {
    margin-top: 2.5rem;
    text-align: center;
}

/* ═══ Scene 3 · Playground ═══ */

.hp-scene--play[b-obwmgg7avr] {
    background:
        radial-gradient(ellipse 60% 80% at 15% 20%,
            hsla(142, 71%, 45%, 0.07), transparent),
        var(--lp-bg);
    border-block: 1px solid var(--lp-border);
}

.hp-play[b-obwmgg7avr] {
    display: flex;
    align-items: center;
    gap: 3rem;
    padding: 48px 40px;
    background: var(--lp-bg-card);
    /* The green accent lives on the border: a visible 1px hairline tint at
       rest, brighter under the hover light. */
    border: 1px solid color-mix(in srgb, #22c55e 32%, var(--lp-border));
    border-radius: var(--lp-radius-lg);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--lp-motion-base) ease, background var(--lp-motion-base) ease,
                filter var(--lp-motion-base) ease, box-shadow var(--lp-motion-base) ease;
}

/* Hover reads as lit, not repositioned (T17: light over alpha). */
.hp-play:hover[b-obwmgg7avr] {
    border-color: color-mix(in srgb, #22c55e 55%, var(--lp-border));
    background: var(--lp-bg-card-hover);
    filter: brightness(1.05);
    box-shadow: 0 10px 36px hsla(142, 71%, 45%, 0.14);
    text-decoration: none;
    color: inherit;
}

.hp-play__content[b-obwmgg7avr] {
    flex: 1;
}

.hp-play__title[b-obwmgg7avr] {
    margin: 0 0 0.625rem;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--lp-text);
}

.hp-play__desc[b-obwmgg7avr] {
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--lp-text-muted);
    max-width: 30rem;
}

.hp-play__steps[b-obwmgg7avr] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp-play__step[b-obwmgg7avr] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--lp-text-muted);
}

.hp-play__num[b-obwmgg7avr] {
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: hsla(142, 71%, 45%, 0.16);
    color: #22c55e;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ═══ Scene 4b · The studio, live (T3 trip-wire performance) ═══ */

.hp-scene--studio[b-obwmgg7avr] {
    background: var(--lp-bg-deep);
}

.hp-studio[b-obwmgg7avr] {
    max-width: 56rem;
    margin: 0 auto;
    border-radius: var(--lp-radius-lg);
    border: 1px solid var(--lp-border);
    background: var(--lp-bg-card);
    box-shadow: 0 30px 80px hsla(268, 40%, 4%, 0.6), 0 0 90px hsla(268, 62%, 58%, 0.08);
    overflow: hidden;
}

.hp-studio__bar[b-obwmgg7avr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--lp-border);
}

.hp-studio__dot[b-obwmgg7avr] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.hp-studio__dot--r[b-obwmgg7avr] { background: #ff5f57; }
.hp-studio__dot--y[b-obwmgg7avr] { background: #febc2e; }
.hp-studio__dot--g[b-obwmgg7avr] { background: #28c840; }

.hp-studio__title[b-obwmgg7avr] {
    flex: 1;
    text-align: center;
    /* Recenter across the traffic lights' width. */
    margin-left: -48px;
    font-size: 0.9rem;
    color: var(--lp-text-muted);
}

.hp-studio__body[b-obwmgg7avr] {
    display: grid;
    grid-template-columns: 15rem 1fr;
}

.hp-studio__side[b-obwmgg7avr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 18px 26px;
    border-right: 1px solid var(--lp-border);
}

.hp-studio__sidehead[b-obwmgg7avr] {
    margin: 0 0 8px;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lp-text-muted);
}

.hp-studio__item[b-obwmgg7avr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.92rem;
    color: var(--lp-text);
}

/* Selection = full-surface tint + ring (the Alectrone accent grammar). */
.hp-studio__item--hot[b-obwmgg7avr] {
    background: hsla(268, 62%, 58%, 0.14);
    box-shadow: inset 0 0 0 1px hsla(268, 62%, 58%, 0.35);
    font-weight: 600;
}

.hp-studio__itemdot[b-obwmgg7avr] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c, var(--lp-primary-soft));
    flex-shrink: 0;
}

.hp-studio__main[b-obwmgg7avr] {
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 24px 26px 26px;
}

.hp-studio__chips[b-obwmgg7avr] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hp-studio__chip[b-obwmgg7avr] {
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--c, var(--lp-primary-soft)) 55%, #fff);
    background: color-mix(in srgb, var(--c, var(--lp-primary)) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--c, var(--lp-primary)) 38%, transparent);
}

/* The code box centers itself; the lines stay left-anchored inside it so
   the typing reveal grows from a stable left edge. */
.hp-studio__code[b-obwmgg7avr] {
    width: fit-content;
    min-width: 24rem;
    margin-top: auto;
    margin-inline: auto;
    padding: 22px 30px;
    border-radius: var(--lp-radius);
    border: 1px solid hsla(268, 16%, 18%, 0.8);
    /* Neutral near-black terminal surface (was purple-tinted). */
    background: hsl(240, 10%, 6%);
}

.hp-studio__line[b-obwmgg7avr] {
    display: block;
    font-family: var(--font-mono, ui-monospace, 'Cascadia Mono', Consolas, monospace);
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--lp-text);
    white-space: pre;
}

.hp-code-tag[b-obwmgg7avr] { color: #c4b5fd; }
.hp-code-attr[b-obwmgg7avr] { color: #fde68a; }
.hp-code-str[b-obwmgg7avr] { color: #fdba74; }

.hp-studio__caret[b-obwmgg7avr] {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 3px;
    vertical-align: text-bottom;
    background: var(--lp-primary-soft);
    animation: hp-caret-b-obwmgg7avr 1.1s steps(1) infinite;
}

/* ═══ Scenes 4 + 5 + 9 · Cards (landing card language) ═══ */

.hp-scene--build[b-obwmgg7avr] {
    background: var(--lp-bg-deep);
}

.hp-scene--scale[b-obwmgg7avr] {
    background: var(--lp-bg);
    border-block: 1px solid var(--lp-border);
}

.hp-cards[b-obwmgg7avr] {
    display: grid;
    gap: 24px;
}

.hp-cards--three[b-obwmgg7avr] {
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.hp-cards--four[b-obwmgg7avr] {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.hp-card[b-obwmgg7avr] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 32px 28px;
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    font-family: inherit;
    transition: border-color var(--lp-motion-base) ease, background var(--lp-motion-base) ease,
                filter var(--lp-motion-base) ease, box-shadow var(--lp-motion-base) ease,
                opacity var(--lp-motion-scene) ease, transform var(--lp-motion-scene) var(--lp-ease-enter);
}

.hp-card:hover[b-obwmgg7avr] {
    border-color: hsla(268, 50%, 50%, 0.3);
    background: var(--lp-bg-card-hover);
    filter: brightness(1.05);
    box-shadow: 0 10px 36px hsla(268, 40%, 10%, 0.35);
    text-decoration: none;
    color: inherit;
}

.hp-card--quiet[b-obwmgg7avr] {
    cursor: default;
}

.hp-card__icon[b-obwmgg7avr] {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--lp-radius);
    margin-bottom: 20px;
    color: var(--lp-primary-soft);
    background: hsla(268, 62%, 58%, 0.12);
    border: 1px solid hsla(268, 62%, 58%, 0.22);
}

.hp-card__name[b-obwmgg7avr] {
    display: block;
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--lp-text);
}

.hp-card__desc[b-obwmgg7avr] {
    display: block;
    margin: 0 0 18px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--lp-text-muted);
    flex: 1;
}

/* ═══ Scene 6 · Advanced components in orbit ═══
   The same sticky-dial orbit as the modules scene: this section is
   `.hp-orbit` too, so it inherits the dial geometry, panel layout, and the
   T19 scroll engine wholesale (advancing is scroll-driven only, no arrows or
   autoplay). The one addition is a live-looking mock of each control, which
   leads its panel in place of the modules' icon. */

.hp-show__mock[b-obwmgg7avr] {
    width: 100%;
    max-width: 30rem;
    height: 15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    border-radius: var(--lp-radius);
    background:
        radial-gradient(ellipse 90% 100% at 50% 0%,
            hsla(268, 62%, 58%, 0.08), transparent),
        hsl(268, 22%, 8%);
    border: 1px solid hsla(268, 16%, 18%, 0.8);
    overflow: hidden;
}

/* ═══ Guided-tour panels (UxSelect, UxGrid): the mock grows within the column
   and carries feature callouts revealed one at a time by scroll-while-hovering
   (engine: mock owns the wheel while pointed at, steps a tooltip per notch,
   releases at the ends). Meaning-first: each callout names ONE real capability
   and pins it to the exact spot in the mock that demonstrates it. ═══ */

.hp-orbit__panel.hp-tour[b-obwmgg7avr] {
    /* Wider than the plain panels so the enlarged mock has room and the pinned
       cards can sit in the margin beside the feature they name. */
    max-width: 46rem;
}

/* The stage is the hover/wheel target and the positioning context for the
   pinned cards; overflow stays visible so a card can breathe past the mock
   edge, while the mock keeps its own clip. */
.hp-show__stage[b-obwmgg7avr] {
    position: relative;
    width: 100%;
    max-width: 42rem;
    margin-bottom: 1.75rem;
}

.hp-tour .hp-show__mock[b-obwmgg7avr] {
    max-width: none;
    height: 23rem;
    margin-bottom: 0;
    /* Grid to the left, callout cards in the right gutter beside it. */
    justify-content: flex-start;
    align-items: center;
    padding: 1.5rem 1.7rem;
}
.hp-tour .hp-demo-pick[b-obwmgg7avr],
.hp-tour .hp-demo-table[b-obwmgg7avr],
.hp-tour .hp-demo-book[b-obwmgg7avr],
.hp-tour .hp-demo-chart[b-obwmgg7avr],
.hp-tour .hp-demo-cal[b-obwmgg7avr],
.hp-tour .hp-demo-tree[b-obwmgg7avr],
.hp-tour .hp-demo-fb[b-obwmgg7avr],
.hp-tour .hp-demo-range[b-obwmgg7avr],
.hp-tour .hp-demo-upload[b-obwmgg7avr] {
    width: 21rem;
    margin: 0;
    flex-shrink: 0;
}
/* Roomier rows on the tour grids: pins land two rows apart, so the extra
   height opens a comfortable gap between stacked callout cards (no reliance on
   sub-rem font metrics matching between build and ship). */
.hp-tour .hp-demo-table__head[b-obwmgg7avr],
.hp-tour .hp-demo-table__row[b-obwmgg7avr] {
    padding-top: 0.72rem;
    padding-bottom: 0.72rem;
}
.hp-tour .hp-demo-pick__head[b-obwmgg7avr],
.hp-tour .hp-demo-pick__row[b-obwmgg7avr] {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.hp-tour .hp-demo-pick__sortbar[b-obwmgg7avr] { margin-top: 0.7rem; }

/* Grouping: a collapsible group header inside the option grid. */
.hp-demo-pick__group[b-obwmgg7avr] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.34rem 0.55rem;
    margin-top: 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: hsla(268, 14%, 82%, 0.9);
    background: hsla(268, 30%, 60%, 0.1);
    border-radius: 0.35rem;
}
.hp-demo-pick__chev[b-obwmgg7avr] {
    width: 0.5rem;
    height: 0.5rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.7;
}
.hp-demo-pick__count[b-obwmgg7avr] {
    margin-left: auto;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.6rem;
    color: var(--lp-text-muted);
}
/* Multi-sort readout: the active sort order, ranked, along the grid foot. */
.hp-demo-pick__sortbar[b-obwmgg7avr] {
    margin-top: 0.4rem;
    padding: 0.36rem 0.55rem;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    color: hsla(268, 14%, 76%, 0.85);
    border-top: 1px solid hsla(268, 16%, 22%, 0.7);
}

/* Column-resize grip on a header cell border (UxGrid). */
.hp-demo-grip[b-obwmgg7avr] {
    display: inline-block;
    width: 2px;
    height: 0.8rem;
    margin-left: 0.35rem;
    vertical-align: -0.12rem;
    border-radius: 1px;
    background:
        linear-gradient(hsla(268, 30%, 82%, 0.7), hsla(268, 30%, 82%, 0.7)) 0 0 / 2px 100% no-repeat;
    box-shadow: 3px 0 0 hsla(268, 30%, 82%, 0.35);
}

/* Scroll cue: a quiet mono prompt that this mock rewards a scroll while
   hovered. Present only before the first callout, gone once exploration
   starts (JS writes data-ts on the panel). */
.hp-show__cue[b-obwmgg7avr] {
    /* Only meaningful while the callouts are armed and hidden (has-motion).
       With JS off / reduced motion every callout is already composed, so the
       cue would be a lie: it stays hidden there. */
    display: none;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.1rem;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: hsla(268, 14%, 72%, 0.72);
}
.hp-show__cue[b-obwmgg7avr]::before {
    content: "";
    width: 0.95rem;
    height: 1.35rem;
    border-radius: 0.55rem;
    border: 1px solid hsla(268, 20%, 66%, 0.5);
    /* a scroll-wheel glyph: the "notch" dot rides down and resets */
    background:
        radial-gradient(circle 1.6px at 50% 30%, hsla(268, 30%, 88%, 0.95) 60%, transparent 62%);
}
.hp.has-motion .hp-show__cue[b-obwmgg7avr] {
    display: inline-flex;
}
.hp.has-motion .hp-show__cue[b-obwmgg7avr]::before {
    animation: hp-cue-notch-b-obwmgg7avr 1.8s var(--lp-ease-enter) infinite;
}
@keyframes hp-cue-notch-b-obwmgg7avr {
    0%, 12%   { background-position: 50% 30%; opacity: 1; }
    55%       { background-position: 50% 62%; opacity: 0.15; }
    56%, 100% { background-position: 50% 30%; opacity: 1; }
}
/* Once the first feature is revealed, retire the cue. */
.hp-orbit__panel.hp-tour:not([data-ts="0"]) .hp-show__cue[b-obwmgg7avr],
.hp-orbit__panel.hp-tour:not(.active) .hp-show__cue[b-obwmgg7avr] {
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* ── Feature callout: a pin on the demonstrating spot + a spec card in the
   right gutter. Anchor point is (--tx,--ty) inside the stage; the card sits at
   (--cdx,--cdy) from the pin and the stem is a single hairline that rotates to
   join them. The engine (placeTips) measures the feature, drops the card into
   the gutter at the feature's height, then nudges cards apart where two would
   collide, angling the leader line just enough to reach each one. ── */
.hp-tip[b-obwmgg7avr] {
    position: absolute;
    left: var(--tx);
    top: var(--ty);
    z-index: 4;
    pointer-events: none;
}

.hp-tip__pin[b-obwmgg7avr] {
    position: absolute;
    left: 0;
    top: 0;
    width: 0.62rem;
    height: 0.62rem;
    margin: -0.31rem 0 0 -0.31rem;
    border-radius: 50%;
    /* the one warm dawn accent on the surface, a single lit point per feature */
    background: hsl(32, 88%, 64%);
    box-shadow: 0 0 0 4px hsla(32, 86%, 62%, 0.16),
                0 0 10px hsla(32, 90%, 60%, 0.6);
}

/* Hairline connector: one line rotated from the pin toward the card. Stays a
   clean horizontal when the card sits at the feature's height; tilts only as
   much as a de-overlap nudge needs. */
.hp-tip__stem[b-obwmgg7avr] {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--stem-len, 1.8rem);
    height: 1px;
    transform-origin: left center;
    transform: rotate(var(--stem-ang, 0deg));
    background: linear-gradient(90deg,
        hsla(32, 80%, 66%, 0.7), hsla(268, 30%, 74%, 0.28));
}

.hp-tip__card[b-obwmgg7avr] {
    position: absolute;
    left: var(--cdx, 1.8rem);
    top: var(--cdy, 0rem);
    transform: translateY(-50%);
    width: max-content;
    max-width: 12.5rem;
    padding: 0.45rem 0.7rem;
    border-radius: 0.6rem;
    background: hsla(268, 26%, 11%, 0.94);
    border: 1px solid hsla(268, 30%, 70%, 0.2);
    box-shadow: 0 10px 30px hsla(268, 60%, 4%, 0.5),
                inset 0 1px 0 hsla(268, 40%, 82%, 0.06);
}

.hp-tip__label[b-obwmgg7avr] {
    display: block;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lp-primary-soft);
}
.hp-tip__text[b-obwmgg7avr] {
    display: block;
    margin-top: 0.18rem;
    font-size: 0.8rem;
    line-height: 1.34;
    color: var(--lp-text);
}

/* Reveal states. BASE (no JS / reduced motion) = composed: every callout shown,
   no motion. .has-motion arms them hidden; .is-shown reveals with a short
   settle. The pin scales in so the eye lands on the spot first, then the card. */
.hp.has-motion .hp-tip[b-obwmgg7avr] {
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.45s var(--lp-ease-enter),
                transform 0.45s var(--lp-ease-enter);
}
.hp.has-motion .hp-tip .hp-tip__pin[b-obwmgg7avr] { transform: scale(0.3); transition: transform 0.45s var(--lp-ease-enter); }
.hp.has-motion .hp-tip .hp-tip__stem[b-obwmgg7avr],
.hp.has-motion .hp-tip .hp-tip__card[b-obwmgg7avr] { opacity: 0; transition: opacity 0.4s ease 0.08s; }
.hp.has-motion .hp-tip.is-shown[b-obwmgg7avr] { opacity: 1; transform: translateX(0); }
.hp.has-motion .hp-tip.is-shown .hp-tip__pin[b-obwmgg7avr] { transform: scale(1); }
.hp.has-motion .hp-tip.is-shown .hp-tip__stem[b-obwmgg7avr],
.hp.has-motion .hp-tip.is-shown .hp-tip__card[b-obwmgg7avr] { opacity: 1; }

/* ── Control mocks (shared by the orbit panels) ── */

.hp-demo-table[b-obwmgg7avr] {
    width: min(18rem, 92%);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    overflow: hidden;
    font-size: 0.72rem;
    background: var(--lp-bg-card);
}

.hp-demo-table__head[b-obwmgg7avr],
.hp-demo-table__row[b-obwmgg7avr] {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.9fr;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
}

.hp-demo-table__head[b-obwmgg7avr] {
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lp-text-muted);
    border-bottom: 1px solid var(--lp-border);
    background: hsla(268, 62%, 58%, 0.07);
}

.hp-demo-sort[b-obwmgg7avr] {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid var(--lp-primary-soft);
    margin-left: 0.2rem;
}

.hp-demo-table__row[b-obwmgg7avr] {
    border-bottom: 1px solid hsla(268, 16%, 18%, 0.55);
    color: var(--lp-text);
}

.hp-demo-table__row:last-child[b-obwmgg7avr] {
    border-bottom: none;
}

/* Selection = full-surface tint + 1px ring (no left accent bar). */
.hp-demo-table__row--selected[b-obwmgg7avr] {
    background: hsla(268, 62%, 58%, 0.14);
    box-shadow: inset 0 0 0 1px hsla(268, 62%, 58%, 0.45);
}

.hp-demo-cell-ok[b-obwmgg7avr] { color: var(--lp-green); font-weight: 600; }
.hp-demo-cell-warn[b-obwmgg7avr] { color: hsl(38, 80%, 60%); font-weight: 600; }

.hp-demo-week[b-obwmgg7avr] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.4rem;
    width: min(18rem, 92%);
    height: 10rem;
}

.hp-demo-week__col[b-obwmgg7avr] {
    position: relative;
    border: 1px solid hsla(268, 16%, 18%, 0.8);
    border-radius: 0.4rem;
    background: var(--lp-bg-card);
    padding-top: 1.5rem;
}

.hp-demo-week__day[b-obwmgg7avr] {
    position: absolute;
    top: 0.35rem;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lp-text-muted);
}

/* Category color = wash only; no spine bars. */
.hp-demo-ev[b-obwmgg7avr] {
    position: absolute;
    left: 0.3rem;
    right: 0.3rem;
    top: calc(1.5rem + (100% - 1.5rem) * var(--t) / 100);
    height: calc((100% - 1.5rem) * var(--h) / 100);
    border-radius: 0.3rem;
}

.hp-demo-ev--a[b-obwmgg7avr] { background: hsla(268, 62%, 58%, 0.5); }
.hp-demo-ev--b[b-obwmgg7avr] { background: hsla(220, 70%, 58%, 0.42); }
.hp-demo-ev--c[b-obwmgg7avr] { background: hsla(160, 60%, 45%, 0.4); }

/* Chart mock is a column: type chips, the bar plot, then the server-SVG tag. */
.hp-demo-chart[b-obwmgg7avr] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    width: min(15rem, 86%);
}
.hp-demo-chart__bars[b-obwmgg7avr] {
    display: flex;
    align-items: flex-end;
    gap: 0.7rem;
    height: 9.5rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--lp-border);
}
.hp-demo-chart__types[b-obwmgg7avr] {
    display: flex;
    gap: 0.3rem;
}
.hp-demo-chart__type[b-obwmgg7avr] {
    padding: 0.16rem 0.5rem;
    font-size: 0.62rem;
    font-weight: 600;
    border-radius: 0.35rem;
    color: var(--lp-text-muted);
    border: 1px solid hsla(268, 16%, 24%, 0.9);
}
.hp-demo-chart__type--on[b-obwmgg7avr] {
    color: #fff;
    background: hsla(268, 62%, 55%, 0.9);
    border-color: transparent;
}

/* ── Tour spacing: fill the mock height and spread each mock's own sections so
   the three pinned features land in distinct vertical bands and their cards
   stack without crowding. ── */
.hp-tour .hp-demo-book[b-obwmgg7avr],
.hp-tour .hp-demo-upload[b-obwmgg7avr],
.hp-tour .hp-demo-chart[b-obwmgg7avr],
.hp-tour .hp-demo-fb[b-obwmgg7avr] {
    align-self: stretch;
    justify-content: space-between;
}
.hp-tour .hp-demo-tree[b-obwmgg7avr] { gap: 1.3rem; }
.hp-tour .hp-demo-cal__side[b-obwmgg7avr] { gap: 2.6rem; }
.hp-tour .hp-demo-presets[b-obwmgg7avr] { gap: 0.7rem; }

/* Backend badge (UxFilterBuilder) + time footer (UxDateTime), tour-only bits. */
.hp-demo-preview__backend[b-obwmgg7avr] {
    margin-top: 0.2rem;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    color: hsla(268, 20%, 66%, 0.85);
}
.hp-demo-range__time[b-obwmgg7avr] {
    grid-column: 1 / -1;
    margin-top: 0.3rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--lp-border);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.66rem;
    color: hsla(268, 20%, 72%, 0.9);
    text-align: center;
}

.hp-demo-bar[b-obwmgg7avr] {
    flex: 1;
    height: calc(var(--v) * 1%);
    border-radius: 0.3rem 0.3rem 0 0;
    background: hsla(268, 62%, 58%, 0.35);
}

.hp-demo-bar--hot[b-obwmgg7avr] {
    background: var(--lp-primary);
    box-shadow: 0 0 18px hsla(268, 62%, 58%, 0.4);
}

.hp-demo-month[b-obwmgg7avr] {
    width: min(14rem, 86%);
}

.hp-demo-month__head[b-obwmgg7avr] {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--lp-text);
    text-align: center;
}

.hp-demo-month__grid[b-obwmgg7avr] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.22rem;
}

.hp-demo-month__d[b-obwmgg7avr] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1.15;
    font-size: 0.56rem;
    border-radius: 0.3rem;
    color: var(--lp-text-muted);
    background: hsla(268, 16%, 13%, 0.7);
}

.hp-demo-month__d--busy[b-obwmgg7avr]::after {
    content: "";
    position: absolute;
    bottom: 0.14rem;
    left: 50%;
    width: 0.24rem;
    height: 0.24rem;
    margin-left: -0.12rem;
    border-radius: 50%;
    background: var(--lp-primary-soft);
}

.hp-demo-month__d--today[b-obwmgg7avr] {
    background: var(--lp-primary);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 12px hsla(268, 62%, 58%, 0.45);
}

.hp-demo-tree[b-obwmgg7avr] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: min(14rem, 86%);
    font-size: 0.78rem;
    color: var(--lp-text);
}

.hp-demo-tree__row[b-obwmgg7avr] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.6rem;
    border-radius: 0.4rem;
}

.hp-demo-tree__row--1[b-obwmgg7avr] { margin-left: 1.1rem; }
.hp-demo-tree__row--2[b-obwmgg7avr] { margin-left: 2.2rem; color: var(--lp-text-muted); }

.hp-demo-tree__row--hot[b-obwmgg7avr] {
    background: hsla(268, 62%, 58%, 0.16);
    box-shadow: inset 0 0 0 1px hsla(268, 62%, 58%, 0.4);
    color: var(--lp-text);
}

.hp-demo-tree__chev[b-obwmgg7avr] {
    width: 0.34rem;
    height: 0.34rem;
    border-right: 2px solid var(--lp-text-muted);
    border-top: 2px solid var(--lp-text-muted);
    transform: rotate(45deg);
    flex-shrink: 0;
}

.hp-demo-tree__chev--open[b-obwmgg7avr] {
    transform: rotate(135deg);
}

.hp-demo-filter[b-obwmgg7avr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: min(16rem, 90%);
}

.hp-demo-chip[b-obwmgg7avr] {
    padding: 0.4rem 0.8rem;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
    color: var(--lp-text);
    background: hsla(268, 62%, 58%, 0.14);
    border: 1px solid hsla(268, 62%, 58%, 0.3);
}

.hp-demo-chip--op[b-obwmgg7avr] {
    background: transparent;
    border-color: transparent;
    color: var(--lp-text-muted);
    text-transform: uppercase;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
}

.hp-demo-chip--add[b-obwmgg7avr] {
    background: transparent;
    border-style: dashed;
    border-color: hsla(268, 30%, 60%, 0.4);
    color: var(--lp-primary-soft);
}

/* ── UxGrid: a cell that spans two columns (spreadsheet-style merge) ── */
.hp-demo-table__span[b-obwmgg7avr] {
    grid-column: 1 / 3;
    position: relative;
    color: var(--lp-text);
    font-weight: 600;
}
.hp-demo-table__span[b-obwmgg7avr]::after {
    content: "";
    position: absolute;
    right: -0.42rem;
    top: -0.5rem;
    bottom: -0.5rem;
    width: 1px;
    background: hsla(268, 62%, 62%, 0.35);
}

/* ── UxScheduler: booking slots with capacity ── */
.hp-demo-book[b-obwmgg7avr] { width: min(18rem, 92%); display: flex; flex-direction: column; gap: 0.7rem; }
.hp-demo-book__head[b-obwmgg7avr] {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 0.82rem; font-weight: 700; color: var(--lp-text);
}
.hp-demo-book__head span:last-child[b-obwmgg7avr] { font-size: 0.68rem; font-weight: 600; color: var(--lp-text-muted); }
.hp-demo-book__slots[b-obwmgg7avr] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
.hp-demo-book__slot[b-obwmgg7avr] {
    padding: 0.4rem 0; text-align: center; font-size: 0.72rem; font-weight: 600;
    border-radius: 0.45rem; color: var(--lp-text);
    background: hsla(268, 20%, 15%, 0.8); border: 1px solid hsla(268, 16%, 24%, 0.9);
}
.hp-demo-book__slot--hot[b-obwmgg7avr] {
    color: #fff; background: hsla(268, 62%, 55%, 0.9);
    border-color: transparent; box-shadow: 0 4px 14px hsla(268, 62%, 55%, 0.35);
}
.hp-demo-book__slot--full[b-obwmgg7avr] {
    color: hsla(268, 10%, 60%, 0.6); text-decoration: line-through;
    background: hsla(268, 16%, 12%, 0.6); border-style: dashed;
}
.hp-demo-book__note[b-obwmgg7avr] { font-size: 0.66rem; color: var(--lp-text-muted); }

/* ── UxChart: server-rendered tag ── */
.hp-demo-chart__tag[b-obwmgg7avr] {
    display: block; margin-top: 0.7rem; text-align: center;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.62rem; letter-spacing: 0.06em; color: hsla(268, 20%, 62%, 0.75);
}

/* ── UxCalendar: multi-calendar sidebar with permission chips ── */
.hp-demo-cal[b-obwmgg7avr] { display: grid; grid-template-columns: auto 1fr; gap: 1rem; width: min(20rem, 94%); align-items: start; }
.hp-demo-cal__side[b-obwmgg7avr] { display: flex; flex-direction: column; gap: 0.5rem; }
.hp-demo-cal__cal[b-obwmgg7avr] {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.72rem; font-weight: 600; color: var(--lp-text); white-space: nowrap;
}
.hp-demo-cal__cal i[b-obwmgg7avr] { width: 0.6rem; height: 0.6rem; border-radius: 0.15rem; background: var(--c); flex-shrink: 0; }
.hp-demo-cal__cal em[b-obwmgg7avr] {
    margin-left: auto; padding: 0.05rem 0.4rem; font-style: normal; font-size: 0.58rem; font-weight: 600;
    letter-spacing: 0.04em; color: var(--lp-text-muted);
    border: 1px solid hsla(268, 16%, 30%, 0.8); border-radius: 0.35rem;
}
.hp-demo-cal__grid[b-obwmgg7avr] { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.28rem; }
.hp-demo-cal__d[b-obwmgg7avr] { aspect-ratio: 1.25; border-radius: 0.3rem; background: hsla(268, 16%, 13%, 0.7); position: relative; }
.hp-demo-cal__d--busy[b-obwmgg7avr]::after {
    content: ""; position: absolute; bottom: 0.16rem; left: 50%; width: 0.22rem; height: 0.22rem;
    margin-left: -0.11rem; border-radius: 50%; background: var(--lp-primary-soft);
}
.hp-demo-cal__d--today[b-obwmgg7avr] { background: var(--lp-primary); box-shadow: 0 3px 10px hsla(268, 62%, 58%, 0.4); }

/* ── UxFilterBuilder: live match count + record preview ── */
.hp-demo-fb[b-obwmgg7avr] { width: min(19rem, 94%); display: flex; flex-direction: column; gap: 0.75rem; }
.hp-demo-preview[b-obwmgg7avr] { display: flex; flex-direction: column; gap: 0.3rem; padding-top: 0.65rem; border-top: 1px solid var(--lp-border); }
.hp-demo-preview__count[b-obwmgg7avr] { font-size: 0.9rem; font-weight: 700; color: var(--lp-primary-soft); }
.hp-demo-preview__row[b-obwmgg7avr] {
    font-size: 0.72rem; color: var(--lp-text); padding: 0.28rem 0.5rem;
    border-radius: 0.35rem; background: hsla(268, 16%, 13%, 0.55);
}

/* ── UxSelect: a dropdown that opens into a sortable data grid.
   The reused .hp-fc-select header + .hp-fc-list panel gain a column grid and
   CSS-drawn sort marks carrying a priority index (additive multi-column sort). ── */
.hp-demo-pick[b-obwmgg7avr] { width: min(20rem, 94%); display: flex; flex-direction: column; gap: 0.55rem; }

.hp-fc-list[b-obwmgg7avr] {
    display: flex;
    flex-direction: column;
    border-radius: 0.55rem;
    overflow: hidden;
    border: 1px solid var(--lp-border);
    background: hsla(268, 16%, 13%, 0.94);
}

.hp-demo-pick__head[b-obwmgg7avr],
.hp-demo-pick__row[b-obwmgg7avr] {
    display: grid;
    grid-template-columns: 1.5fr 1fr 0.7fr;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0.8rem;
    font-size: 0.74rem;
}

.hp-demo-pick__head[b-obwmgg7avr] {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lp-text-muted);
    border-bottom: 1px solid var(--lp-border);
}

.hp-demo-pick__head span[b-obwmgg7avr] { display: inline-flex; align-items: center; gap: 0.28rem; }

.hp-demo-pick__row[b-obwmgg7avr] { color: var(--lp-text); }
.hp-demo-pick__row + .hp-demo-pick__row[b-obwmgg7avr] { border-top: 1px solid hsla(268, 16%, 18%, 0.5); }

/* Hot row: full-surface tint + ring (shared with the option list). */
.hp-fc-list__opt--hot[b-obwmgg7avr] {
    background: hsla(268, 62%, 58%, 0.18);
    box-shadow: inset 0 0 0 1px hsla(268, 62%, 58%, 0.4);
    color: var(--lp-text);
}

/* Sort mark: a CSS-drawn caret plus the column's sort priority (1, 2, ...). */
.hp-demo-sortmark[b-obwmgg7avr] { display: inline-flex; align-items: center; gap: 0.18rem; }

.hp-demo-sortmark[b-obwmgg7avr]::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid var(--lp-primary-soft);
}

.hp-demo-sortmark--up[b-obwmgg7avr]::before {
    border-top: 0;
    border-bottom: 4px solid var(--lp-primary-soft);
}

.hp-demo-sortmark[b-obwmgg7avr]::after {
    content: attr(data-p);
    font-size: 0.5rem;
    font-weight: 700;
    color: var(--lp-primary-soft);
}

/* ── UxDateTime: developer-defined range presets beside the range calendar.
   The reused .hp-fc-cal shows a highlighted range; the presets are the
   code-supplied one-click shortcuts. ── */
.hp-demo-range[b-obwmgg7avr] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    width: min(22rem, 94%);
    align-items: start;
}

.hp-demo-presets[b-obwmgg7avr] { display: flex; flex-direction: column; gap: 0.4rem; }

.hp-demo-preset[b-obwmgg7avr] {
    padding: 0.35rem 0.7rem;
    border-radius: 0.4rem;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--lp-text-muted);
    border: 1px solid var(--lp-border);
    background: hsla(268, 20%, 9%, 0.6);
}

.hp-demo-preset--on[b-obwmgg7avr] {
    color: var(--lp-text);
    background: hsla(268, 62%, 58%, 0.18);
    box-shadow: inset 0 0 0 1px hsla(268, 62%, 58%, 0.4);
}

.hp-fc-cal__head[b-obwmgg7avr] {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--lp-text);
    text-align: center;
}

.hp-fc-cal__grid[b-obwmgg7avr] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.2rem;
}

.hp-fc-cal__d[b-obwmgg7avr] {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1.1;
    font-size: 0.62rem;
    border-radius: 0.3rem;
    color: var(--lp-text-muted);
}

.hp-fc-cal__d--in[b-obwmgg7avr] {
    background: hsla(268, 62%, 58%, 0.22);
    color: var(--lp-text);
}

.hp-fc-cal__d--start[b-obwmgg7avr],
.hp-fc-cal__d--end[b-obwmgg7avr] {
    background: var(--lp-primary);
    color: #fff;
    font-weight: 700;
}

/* ── UxFileUploader: chunked upload to a cloud target with per-chunk progress.
   The reused .hp-fc-drop + .hp-fc-file mocks gain a mono chunk readout. ── */
.hp-demo-upload[b-obwmgg7avr] { width: min(20rem, 94%); display: flex; flex-direction: column; gap: 0.6rem; }

.hp-fc-drop[b-obwmgg7avr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.1rem 0.8rem;
    border-radius: 0.65rem;
    border: 1px dashed hsla(268, 30%, 60%, 0.45);
    background: hsla(268, 62%, 58%, 0.06);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--lp-text-muted);
}

/* Upward chevron glyph for the dropzone, CSS-drawn. */
.hp-fc-drop__glyph[b-obwmgg7avr] {
    width: 0.6rem;
    height: 0.6rem;
    border-top: 2px solid var(--lp-primary-soft);
    border-left: 2px solid var(--lp-primary-soft);
    transform: rotate(45deg) translate(0.1rem, 0.1rem);
}

.hp-fc-file[b-obwmgg7avr] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.3rem 0.6rem;
    padding: 0.6rem 0.8rem;
    border-radius: 0.55rem;
    border: 1px solid var(--lp-border);
    background: hsla(268, 16%, 13%, 0.94);
}

.hp-fc-file__name[b-obwmgg7avr] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--lp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hp-fc-file__pct[b-obwmgg7avr] {
    grid-row: span 2;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--lp-primary-soft);
    font-variant-numeric: tabular-nums;
}

.hp-fc-file__bar[b-obwmgg7avr] {
    position: relative;
    height: 0.3rem;
    border-radius: 999px;
    background: hsla(268, 10%, 92%, 0.14);
    overflow: hidden;
}

/* Mid-upload: chunk 5 of 8 lands the fill at ~62%. */
.hp-fc-file__fill[b-obwmgg7avr] {
    position: absolute;
    inset: 0 38% 0 0;
    border-radius: inherit;
    background: var(--lp-primary);
}

.hp-demo-chunk[b-obwmgg7avr] {
    align-self: flex-start;
    font-family: var(--font-mono, ui-monospace, "Cascadia Mono", Consolas, monospace);
    font-size: 0.66rem;
    color: var(--lp-primary-soft);
}

/* ═══ Scene · Modules in orbit (T19 orbital dial index) ═══ */

.hp-orbit[b-obwmgg7avr] {
    --oi: 0;
    /* Dial geometry, shared by both orbit scenes. The ring system centres at
       --dial-cx from the dial column's left edge; the spokes (labels) ride at
       --dial-r and are spaced by an even vertical pitch around it, while the decorative
       glow disc sizes independently at --dial-outer so the field can read
       large without the labels fanning wide enough to hit the panel column.
       The centre is pushed right of the sticky chapter rail so no spoke
       or label ever lands under it. The dial only shows at widths where this
       geometry clears both the rail and the panels (see the collapse below);
       narrower, the panels stack. */
    --dial-cx: 4.5rem;
    /* Labels grow with the viewport but stay capped so all six read and none
       reaches the panel column. The graduated instrument bezel fills nearly
       the whole section height (min 90vh) yet is clamped by 80vw so its right
       edge never crosses into the (now 60%-wide) panel column: it is the
       "instrument" the eye reads as large, while the labels ride a calmer
       inner read-line. */
    --dial-r: clamp(8rem, calc(40vw - 20rem), 15rem);
    /* Vertical pitch as a fraction of --dial-r: every spoke sits exactly this
       far below the one above it, so the names keep an even vertical rhythm as
       the wheel turns instead of bunching. Placement is arcsin-based (see
       .hp-orbit__item): equal angular steps on a circle give UNEQUAL vertical
       gaps (R * sin(theta) compresses toward the poles, which is what read as
       "irregular"), so instead each spoke takes the angle whose sine lands it
       on its even vertical slot. */
    --dial-pitch: 0.32;
    --dial-outer: min(90vh, calc(80vw - 18rem));
    position: relative;
    overflow: clip;
    background:
        radial-gradient(ellipse 50% 60% at 0% 50%,
            hsla(268, 62%, 58%, 0.08), transparent),
        var(--lp-bg-deep);
    border-block: 1px solid var(--lp-border);
}

.hp-orbit__header[b-obwmgg7avr] {
    margin: 0 auto;
    padding: 6rem 24px 1rem;
    max-width: 640px;
    text-align: center;
}

.hp-orbit__grid[b-obwmgg7avr] {
    display: grid;
    /* The instrument sits in the left 40%; the specimen panel takes the wider
       60% so each control gets room to show its one standout feature. */
    grid-template-columns: minmax(20rem, 40%) 1fr;
}

.hp-orbit__dial-col[b-obwmgg7avr] {
    position: relative;
}

.hp-orbit__dial[b-obwmgg7avr] {
    position: sticky;
    top: var(--hp-header-h);
    height: calc(100vh - var(--hp-header-h));
}

/* Ring geometry: the centre sits at --dial-cx (right of the chapter rail);
   spokes orbit at --dial-r. */
.hp-orbit__ring[b-obwmgg7avr],
.hp-orbit__core[b-obwmgg7avr],
.hp-orbit__wheel[b-obwmgg7avr] {
    position: absolute;
    top: 50%;
    left: var(--dial-cx);
}

.hp-orbit__ring[b-obwmgg7avr] {
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
}

/* The graduated bezel: the instrument scale that fills the section height.
   Minor ticks (every 3deg) plus emphasized ticks (every 30deg) are cut from
   repeating conic gradients masked to a thin outer band, so richness comes
   from engineered linework, not glow. A hairline circle closes the rim. */
.hp-orbit__ring--outer[b-obwmgg7avr] {
    width: var(--dial-outer);
    height: var(--dial-outer);
    background: repeating-conic-gradient(from 0deg,
        hsla(268, 24%, 74%, 0.30) 0deg 0.32deg, transparent 0.32deg 3deg);
    -webkit-mask: radial-gradient(farthest-side,
        transparent calc(100% - 11px), #000 calc(100% - 11px));
    mask: radial-gradient(farthest-side,
        transparent calc(100% - 11px), #000 calc(100% - 11px));
}

.hp-orbit__ring--outer[b-obwmgg7avr]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg,
        hsla(268, 30%, 86%, 0.48) 0deg 0.55deg, transparent 0.55deg 30deg);
    -webkit-mask: radial-gradient(farthest-side,
        transparent calc(100% - 24px), #000 calc(100% - 24px));
    mask: radial-gradient(farthest-side,
        transparent calc(100% - 24px), #000 calc(100% - 24px));
}

.hp-orbit__ring--outer[b-obwmgg7avr]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid hsla(268, 22%, 64%, 0.12);
}

/* The read-line carries the focal read-mark but draws no ring of its own
   (the tick bezel and the spokes already state the geometry; a second circle
   only clutters). Kept sized so the read-mark lands on the spoke radius. */
.hp-orbit__ring--track[b-obwmgg7avr] {
    width: calc(var(--dial-r) * 2 - 3rem);
    height: calc(var(--dial-r) * 2 - 3rem);
    border: none;
}

/* The read-mark: a fixed index at the focal (3 o'clock) where the active
   spoke settles. A single warm dawn point (the one warm accent on the whole
   surface), with two hairline brackets framing the read position. */
.hp-orbit__ring--track[b-obwmgg7avr]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    width: 0.9rem;
    height: 2px;
    margin: -1px 0 0 -0.45rem;
    border-radius: 1px;
    background: hsl(32, 88%, 64%);
    box-shadow: 0 0 9px hsla(32, 90%, 60%, 0.7);
}

.hp-orbit__ring--track[b-obwmgg7avr]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    width: 0.6rem;
    height: 0.7rem;
    margin: -0.35rem 0 0 0.1rem;
    border-right: 1px solid hsla(268, 26%, 78%, 0.30);
}

/* The machined hub disc is hidden per design direction: the dial reads as an
   open instrument face (tick bezel + progress arc + labels) with no central
   orb. The element stays in the DOM, unpainted, keeping its size and centre so
   the progress-arc ::after it carries still anchors on the dial centre; the
   lit-centre ::before is switched off below. */
.hp-orbit__core[b-obwmgg7avr] {
    width: clamp(6.5rem, calc(var(--dial-r) - 4rem), 9rem);
    height: clamp(6.5rem, calc(var(--dial-r) - 4rem), 9rem);
    transform: translate(-50%, -50%);
    background: none;
    box-shadow: none;
}

/* The wheel is only the pivot point now: each spoke works out its own angle
   from the active index (.hp-orbit__item), and every label counter-rotates to
   stay upright. */
.hp-orbit__wheel[b-obwmgg7avr] {
    width: 0;
    height: 0;
}

.hp-orbit__item[b-obwmgg7avr] {
    position: absolute;
    top: 0;
    left: 0;
    /* Even vertical rhythm on the ring: the spoke's vertical offset from the
       focus is (a - oi) * --dial-pitch * --dial-r, so it rides the angle whose
       sine is that fraction (clamped to +/-1 so far spokes park at the poles,
       where the fade has already retired them). Each spoke transitions its own
       angle, so they slide along the ring one step at a time. */
    transform: rotate(asin(clamp(-1, (var(--a) - var(--oi)) * var(--dial-pitch), 1)))
               translateX(var(--dial-r));
    /* Pivot at the spoke's left edge (the dot), not the row centre: otherwise
       every label's differing width would rotate it around a different point
       and the even vertical pitch would drift back to irregular. height:0 with
       align-items:center collapses the row onto a single line so the pivot's
       vertical position is the same for every spoke, including the taller
       active one, which keeps the gap on both sides of the focus identical. */
    transform-origin: 0 50%;
    height: 0;
    display: flex;
    align-items: center;
    transition: transform 0.7s var(--lp-ease-enter);
}

.hp-orbit__dot[b-obwmgg7avr] {
    width: 0.42rem;
    height: 0.42rem;
    margin-left: -0.21rem;
    border-radius: 50%;
    background: hsla(268, 16%, 80%, 0.40);
    flex-shrink: 0;
    transition: background 0.5s ease, box-shadow 0.5s ease;
}

/* Active spoke: a precisely indexed point (a rim halo), not a bloom. */
.hp-orbit__item.active .hp-orbit__dot[b-obwmgg7avr] {
    background: #fff;
    box-shadow: 0 0 0 3px hsla(268, 40%, 20%, 0.9),
                0 0 12px hsla(268, 60%, 70%, 0.7);
}

.hp-orbit__label[b-obwmgg7avr] {
    margin-left: 1.05rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: hsla(268, 10%, 92%, 0.55);
    /* Focus hierarchy: each spoke fades with its index distance from the
       active spoke, so the eye holds the active name and the arc's far ends,
       the labels that swing up toward 12 o'clock and down toward 6 o'clock
       where they would otherwise pile on top of each other, recede to nothing
       instead of crowding. The distance is |oi - a|, computed as
       max(oi - a, a - oi): CSS abs() is not yet supported in stable browsers
       (the old abs() form silently fell back to full opacity, which is why
       every label showed at once and overlapped), but max() is universal, and
       --oi / --a are already both in scope here (they drive the counter-
       rotation above), so this works pre-circuit and with JS off too. At 0.28
       per step the third spoke is a whisper and the fourth and beyond clamp to
       fully hidden. */
    opacity: calc(1 - max(var(--oi) - var(--a), var(--a) - var(--oi)) * 0.28);
    /* Decorative dial text: never selectable, and its ::selection is forced
       transparent so the global themed `:where(*)::selection { background:
       --color-primary }` (ux-theme) can never paint an iris plate behind the
       active name. A class beats the zero-specificity :where() selector. */
    user-select: none;
    -webkit-user-select: none;
    transform: rotate(calc(-1 * asin(clamp(-1, (var(--a) - var(--oi)) * var(--dial-pitch), 1))));
    transform-origin: left center;
    transition: transform 0.7s var(--lp-ease-enter),
                color 0.5s ease, font-size 0.5s ease, opacity 0.5s ease;
}

/* Mono index numeral (01-06), inline before the name: typographic rigor and
   an instrument-scale reference, on a single line so labels never stack tall
   enough to collide. */
.hp-orbit__label[b-obwmgg7avr]::before {
    content: attr(data-num);
    margin-right: 0.5rem;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    vertical-align: 0.32em;
    color: hsla(268, 12%, 62%, 0.7);
    transition: color 0.5s ease;
}

.hp-orbit__item.active .hp-orbit__label[b-obwmgg7avr] {
    font-size: 1.7rem;
    color: var(--lp-text);
}

.hp-orbit__item.active .hp-orbit__label[b-obwmgg7avr]::before {
    color: hsla(268, 55%, 74%, 0.9);
}

/* Kill the global iris ::selection plate on the decorative dial text. */
.hp-orbit__label[b-obwmgg7avr]::selection { background: transparent; }
.hp-orbit__label[b-obwmgg7avr]::-moz-selection { background: transparent; }

/* Right column: native flow panels; focus follows the dial. */
.hp-orbit__panels[b-obwmgg7avr] {
    display: flex;
    flex-direction: column;
    padding: 6vh 3rem 10vh 1rem;
    gap: 4vh;
}

.hp-orbit__panel[b-obwmgg7avr] {
    min-height: 72vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    max-width: 34rem;
    background: transparent;
    border: none;
    padding: 0;
    /* Per-component stop: each control settles at the viewport centre before the
       scroll can advance to the next. The dial's probe lines (42%/58%) already
       index the centred panel; this makes the scroll physically hold there, the
       same firm stop the top-level sections use, one level deeper. */
    scroll-snap-align: center;
    scroll-snap-stop: always;
    scroll-margin-top: calc(var(--hp-header-h) + 8px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.hp-orbit__panel-icon[b-obwmgg7avr] {
    width: 3.25rem;
    height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--lp-radius);
    color: var(--lp-primary-soft);
    background: hsla(268, 62%, 58%, 0.12);
    border: 1px solid hsla(268, 62%, 58%, 0.28);
    margin-bottom: 1.25rem;
}

.hp-orbit__panel-title[b-obwmgg7avr] {
    margin: 0 0 0.625rem;
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--lp-text);
}

.hp-orbit__panel-desc[b-obwmgg7avr] {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--lp-text-muted);
}

/* One-line standout feature per control: larger and lit (it is the point of
   the panel), a step up from a muted description. */
.hp-orbit__panel-feature[b-obwmgg7avr] {
    margin: 0 0 1.5rem;
    max-width: 30rem;
    font-size: 1.12rem;
    line-height: 1.55;
    color: var(--lp-text);
}

.hp-orbit__features[b-obwmgg7avr] {
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.hp-orbit__features li[b-obwmgg7avr] {
    position: relative;
    padding-left: 1.2rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--lp-text);
}

.hp-orbit__features li[b-obwmgg7avr]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.52em;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--lp-primary-soft);
}

/* ═══ Scene · Modules, exploded (the swappable seam) ═══
   A deliberately different instrument from the orbit above. Each module is a
   machined core-interface plate with its real providers fanned behind it; the
   linear selector reads position-in-set; scroll indexes the five panels. This
   block is the COMPOSED FINAL POSE (no .has-motion): benches fanned open, every
   panel legible, so the section is complete pre-circuit, with JS off, and under
   reduced motion. The 3D read + pointer tilt are desktop-only (>=1121px, the
   same width where the chapter rail and orbit dial live); narrower, the stack
   flattens to a readable 2D cluster and the panels stack into flow. */

.hp-bench[b-obwmgg7avr] {
    --bi: 0;
    position: relative;
    /* Neutral near-black ground: the purple hue is dropped almost entirely
       (barely-there cool tint), so the background reads as clean black, not a
       purple field. The card and detail float on it. */
    background: hsl(240, 9%, 5%);
}

.hp-bench__header[b-obwmgg7avr] {
    margin: 0 auto;
    padding: 6rem 24px 1.5rem;
    max-width: 680px;
    text-align: center;
}

/* Linear selector: sticks under the landing header and reads which module is
   on the bench. A hairline underline states the set; the active tab lights and
   carries a 1px index mark (luminance + linework, never a thick accent bar). */
.hp-bench__selector[b-obwmgg7avr] {
    position: sticky;
    top: var(--hp-header-h);
    z-index: 5;
    padding: 0.75rem 24px;
    background:
        linear-gradient(hsla(240, 9%, 5%, 0.94), hsla(240, 9%, 5%, 0.78));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: none;
    /* Breathing room between the sticky menu and the module content below it. */
    margin-bottom: 2rem;
}

/* The tabs live in a floating, rounded segmented control (a machined switch),
   not a full-width bar: the rounded housing is the artistic counterpart to the
   rounded instrument bay below. */
.hp-bench__selector-inner[b-obwmgg7avr] {
    display: flex;
    justify-content: flex-start;
    gap: 0.25rem;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 0.3rem;
    border: 1px solid var(--lp-border);
    border-radius: 999px;
    background: hsla(268, 20%, 10%, 0.55);
    box-shadow: inset 0 1px 0 hsla(268, 45%, 84%, 0.05);
    overflow-x: auto;
    scrollbar-width: none;
}
.hp-bench__selector-inner[b-obwmgg7avr]::-webkit-scrollbar { display: none; }

.hp-bench__tab[b-obwmgg7avr] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--lp-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.35s ease, background 0.35s ease;
}

.hp-bench__tab-num[b-obwmgg7avr] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: hsla(268, 12%, 62%, 0.75);
    transition: color 0.35s ease;
}

.hp-bench__tab-name[b-obwmgg7avr] {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.hp-bench__tab.active[b-obwmgg7avr] {
    color: var(--lp-text);
    background: hsla(268, 62%, 58%, 0.12);
}
.hp-bench__tab.active .hp-bench__tab-num[b-obwmgg7avr] { color: var(--lp-primary-soft); }

.hp-bench__track[b-obwmgg7avr] {
    max-width: var(--lp-max-width);
    margin: 0 auto;
    padding: 0 24px;
}

.hp-bench__panel[b-obwmgg7avr] {
    padding: 3rem 0;
    /* `active` here is a structural focus STATE, not a highlight. The shared
       theme (ux-theme.css) has a global `.active { background: color-mix(...) }`
       for nav items that otherwise bleeds a 12% overlay onto this panel and
       paints a muddy rectangle behind each module. Neutralize it (this scoped
       selector outranks the unscoped global `.active`). */
    background: transparent;
}

.hp-bench__panel-inner[b-obwmgg7avr] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* ── The stage: a rounded instrument bay holding a WIRED SCHEMATIC ──
   The provider seam is drawn as a wiring diagram on an engineered near-black
   ground (a fine blueprint grid + one focused iris pool + a vignette, never a
   flat purple wash): the core interface is a hub, a lit spine carries a routing
   signal, and the real providers rack off it. Legibility is layout-driven
   (flex), so nothing overlaps or muddies; depth, the pointer tilt, and the
   routing pulse do the immersion. */
.hp-bench__stage[b-obwmgg7avr] {
    position: relative;
    height: 22rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 32px;
    background:
        linear-gradient(hsla(240, 8%, 66%, 0.04) 1px, transparent 1px) 0 0 / 100% 2rem,
        linear-gradient(90deg, hsla(240, 8%, 66%, 0.04) 1px, transparent 1px) 0 0 / 2rem 100%,
        radial-gradient(ellipse 92% 94% at 50% 46%, transparent 50%, hsla(240, 20%, 1%, 0.85)),
        linear-gradient(hsl(240, 8%, 8%), hsl(240, 10%, 4%));
    border: 1px solid hsla(240, 10%, 26%, 0.5);
    /* Floating elevation: layered dark shadows lift the bay off the page, with a
       faint iris ambient so it reads alive, not pasted onto a flat field. */
    box-shadow:
        inset 0 1px 0 hsla(268, 45%, 84%, 0.06),
        inset 0 -30px 60px hsla(260, 30%, 2%, 0.6),
        0 6px 14px hsla(240, 40%, 1%, 0.5),
        0 26px 50px hsla(240, 40%, 1%, 0.55),
        0 60px 110px hsla(240, 40%, 1%, 0.55);
    overflow: hidden;
}

/* Atmosphere: a focused iris pool behind the hub (the single glow seasoning),
   parallaxed against the pointer so the light drifts under the schematic. Rests
   at 0 (static pre-circuit, on touch, and under reduced motion). */
.hp-bench__stage[b-obwmgg7avr]::before {
    content: "";
    position: absolute;
    inset: -16%;
    background: radial-gradient(ellipse 36% 44% at 40% 48%,
        hsla(250, 18%, 46%, 0.10), transparent 66%);
    transform: translate(calc(var(--tx, 0) * -18px), calc(var(--ty, 0) * -18px));
    transition: transform 0.4s ease;
    pointer-events: none;
}

/* The schematic group. Base = flat (mobile / no-JS / reduced motion); desktop
   lifts it onto a subtle 3D plane that tilts to the pointer. */
.hp-bench__stack[b-obwmgg7avr] {
    position: relative;
    width: 100%;
    max-width: 27rem;
    height: 15rem;
}

.hp-bench__diagram[b-obwmgg7avr] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Hub: the core interface, lit with one restrained iris rim, its name in the
   technical/mono cut. The warm dawn accent is its port. ── */
.hp-bench__hub[b-obwmgg7avr] {
    position: relative;
    flex: 0 0 auto;
    width: 13.5rem;
    padding: 0.95rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    border-radius: 15px;
    background: radial-gradient(ellipse 130% 100% at 28% 0%,
        hsla(240, 12%, 17%, 0.96), hsla(240, 14%, 9%, 0.98));
    border: 1px solid hsla(245, 14%, 52%, 0.4);
    box-shadow:
        inset 0 1px 0 hsla(240, 30%, 88%, 0.1),
        0 0 0 1px hsla(245, 14%, 60%, 0.08),
        0 18px 44px hsla(240, 40%, 2%, 0.6);
}

.hp-bench__hub-eyebrow[b-obwmgg7avr] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: hsla(268, 30%, 74%, 0.72);
}

.hp-bench__hub-name[b-obwmgg7avr] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--lp-text);
    white-space: nowrap;
}

/* The single warm dawn accent: the port where providers snap onto the interface. */
.hp-bench__hub-port[b-obwmgg7avr] {
    position: absolute;
    top: 50%;
    right: -0.34rem;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: -0.25rem;
    border-radius: 50%;
    background: hsl(32, 88%, 64%);
    box-shadow: 0 0 10px hsla(32, 90%, 60%, 0.8);
}

/* ── Bus: the lit spine, with a hub link and the routing signal ── */
.hp-bench__bus[b-obwmgg7avr] {
    position: relative;
    flex: 0 0 auto;
    align-self: stretch;
    width: 3.4rem;
}
.hp-bench__bus[b-obwmgg7avr]::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 16%;
    bottom: 16%;
    width: 1px;
    background: linear-gradient(hsla(268, 55%, 72%, 0),
        hsla(268, 55%, 72%, 0.5) 22%, hsla(268, 55%, 72%, 0.5) 78%,
        hsla(268, 55%, 72%, 0));
}
.hp-bench__bus[b-obwmgg7avr]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 50%;
    height: 1px;
    margin-top: -0.5px;
    background: linear-gradient(90deg,
        hsla(268, 55%, 72%, 0.6), hsla(268, 55%, 72%, 0.35));
}

/* The routing signal: a pulse that leaves the hub link and travels the spine to
   the live provider, then repeats. Meaning, not decoration: it shows a request
   routing through the one interface. Static until armed (.has-motion + active). */
.hp-bench__signal[b-obwmgg7avr] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: radial-gradient(hsl(268, 85%, 90%),
        hsla(268, 70%, 62%, 0.25) 55%, transparent 70%);
    box-shadow: 0 0 8px 2px hsla(268, 72%, 70%, 0.6);
    opacity: 0;
    pointer-events: none;
}

/* ── Rack: the real providers, each legible and wired to the spine ── */
.hp-bench__rack[b-obwmgg7avr] {
    flex: 0 0 auto;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.hp-bench__slot[b-obwmgg7avr] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 8rem;
    padding: 0.5rem 0.85rem;
    border-radius: 12px;
    background: linear-gradient(hsla(268, 20%, 19%, 0.97), hsla(266, 20%, 13%, 0.98));
    border: 1px solid hsla(268, 20%, 38%, 0.7);
    box-shadow:
        inset 0 1px 0 hsla(268, 40%, 80%, 0.06),
        0 8px 20px hsla(260, 50%, 3%, 0.45);
}
.hp-bench__slot[b-obwmgg7avr]::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    width: 1.9rem;
    height: 1px;
    background: hsla(268, 45%, 66%, 0.42);
}

.hp-bench__slot-dot[b-obwmgg7avr] {
    flex: 0 0 auto;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: hsla(268, 45%, 72%, 0.5);
}

/* The live (primary) route: a lit rim + white dot the signal arrives at. */
.hp-bench__slot--live[b-obwmgg7avr] {
    border-color: hsla(268, 55%, 66%, 0.7);
    box-shadow:
        inset 0 1px 0 hsla(268, 40%, 80%, 0.08),
        0 8px 20px hsla(260, 50%, 3%, 0.45),
        0 0 20px hsla(268, 62%, 55%, 0.16);
}
.hp-bench__slot--live .hp-bench__slot-dot[b-obwmgg7avr] {
    background: #fff;
    box-shadow: 0 0 8px hsla(268, 60%, 76%, 0.85);
}

.hp-bench__slot-name[b-obwmgg7avr] {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: hsla(268, 10%, 94%, 0.92);
    white-space: nowrap;
}

/* The open seam: a dashed slot naming the next provider that can snap in. */
.hp-bench__slot--ghost[b-obwmgg7avr] {
    background: transparent;
    border-style: dashed;
    border-color: hsla(268, 30%, 58%, 0.42);
    box-shadow: none;
}
.hp-bench__slot--ghost .hp-bench__slot-name[b-obwmgg7avr] {
    color: var(--lp-primary-soft);
    font-weight: 600;
}

/* ── The detail column ── */
.hp-bench__index[b-obwmgg7avr] {
    margin: 0 0 0.35rem;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: hsla(268, 30%, 70%, 0.8);
}

.hp-bench__name[b-obwmgg7avr] {
    margin: 0 0 0.6rem;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--lp-text);
}

.hp-bench__thesis[b-obwmgg7avr] {
    margin: 0 0 1.4rem;
    max-width: 32rem;
    font-size: 1.12rem;
    line-height: 1.55;
    color: var(--lp-text);
}

/* Spec readout: the measurable facts, in the technical/mono cut, on a graduated
   two-column grid. This is the "instrument scale" of the panel. */
.hp-bench__spec[b-obwmgg7avr] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0 0 1.5rem;
    max-width: 30rem;
    border: 1px solid var(--lp-border);
    border-radius: 16px;
    background: var(--lp-border);
    overflow: hidden;
}

.hp-bench__spec-row[b-obwmgg7avr] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0.9rem;
    background: hsla(268, 20%, 10%, 0.85);
}

.hp-bench__spec-row dt[b-obwmgg7avr] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lp-text-muted);
}

.hp-bench__spec-row dd[b-obwmgg7avr] {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--lp-text);
}

.hp-bench__features[b-obwmgg7avr] {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.hp-bench__features li[b-obwmgg7avr] {
    position: relative;
    padding-left: 1.2rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--lp-text);
}

.hp-bench__features li[b-obwmgg7avr]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--lp-primary-soft);
}

.hp-bench__chips[b-obwmgg7avr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 0 1.6rem;
}

.hp-bench__chip[b-obwmgg7avr] {
    padding: 0.32rem 0.7rem;
    font-size: 0.74rem;
    font-weight: 600;
    border-radius: 999px;
    color: var(--lp-text);
    background: hsla(268, 62%, 58%, 0.1);
    border: 1px solid hsla(268, 62%, 58%, 0.26);
}

/* ── Desktop: lift the bench into true perspective, two-column panels, and a
   full-screen scroll rhythm so scroll can index each module (>=1121px). ── */
@media (min-width: 1121px) {
    .hp-bench__panel[b-obwmgg7avr] {
        min-height: calc(100vh - var(--hp-header-h));
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 4rem 0;
    }

    .hp-bench__panel-inner[b-obwmgg7avr] {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: 3.5rem;
        align-items: center;
    }

    .hp-bench__stage[b-obwmgg7avr] {
        height: 28rem;
        perspective: 1300px;
        perspective-origin: 50% 46%;
    }

    /* The schematic rides a subtle 3D plane that tilts to the pointer; the hub
       pops forward and the provider slots sit back by rank, so the wiring reads
       dimensional without a single label ever being obscured. */
    .hp-bench__stack[b-obwmgg7avr] {
        transform-style: preserve-3d;
        transform: rotateX(6deg) rotateY(-15deg);
    }

    .hp-bench__diagram[b-obwmgg7avr] { transform-style: preserve-3d; }

    .hp-bench__hub[b-obwmgg7avr] { transform: translateZ(1.4rem); }

    .hp-bench__slot[b-obwmgg7avr] { transform: translateZ(calc(var(--d) * -3px)); }
}

/* ═══ Scene · Calendar pose morph (T12 + T16), BASE = static composed ═══ */

.hp-cal[b-obwmgg7avr] {
    --p: 1;
    position: relative;
    flex-shrink: 0;
    /* Neutral near-black ground (was a purple field). */
    background: hsl(240, 10%, 5%);
    border-top: 1px solid var(--lp-border);
}

.hp-cal__stage[b-obwmgg7avr] {
    position: relative;
    overflow: hidden;
    padding: 3rem 0 3.5rem;
}

.hp-cal__dawn[b-obwmgg7avr] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 95% 60% at 50% 112%,
        hsla(268, 62%, 58%, 0.26),
        hsla(243, 65%, 60%, 0.08) 55%,
        transparent 80%);
    /* The scene light follows the calendar's colorway cycle. */
    animation: hp-cal-rainbow-b-obwmgg7avr 8s linear infinite;
    transform: translateY(calc((1 - var(--p)) * 24%));
    opacity: calc(0.2 + var(--p) * 0.8);
}

.hp-cal__media[b-obwmgg7avr] {
    position: relative;
    height: 22rem;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
    margin: 0 0 1.5rem;
}

.hp-cal__app[b-obwmgg7avr] {
    width: min(58rem, 94%);
    height: 100%;
    border-radius: 1.1rem;
    border: 1px solid hsla(268, 62%, 58%, 0.22);
    box-shadow: 0 24px 70px hsla(268, 40%, 4%, 0.55), 0 0 70px hsla(268, 62%, 58%, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--lp-bg);
    transition: width 0.9s var(--lp-ease-enter),
                height 0.9s var(--lp-ease-enter),
                margin-top 0.9s var(--lp-ease-enter),
                border-radius 0.9s var(--lp-ease-enter),
                box-shadow 0.9s ease;
    /* Ambient colorway cycle (consistent with the Calendar landing): the
       demo re-themes itself continuously through the full hue wheel.
       Time-based on purpose, so it runs in both poses; the reduce sheet
       stills it at the iris pose. */
    animation: hp-cal-rainbow-b-obwmgg7avr 8s linear infinite;
}

.hp-cal__appbar[b-obwmgg7avr] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.9rem 1.4rem;
    background: var(--lp-bg-card);
    border-bottom: 1px solid var(--lp-border);
}

/* The brand mark anchors the appbar (identity rule: the concentric mark,
   never chrome dots). */
.hp-cal__mark[b-obwmgg7avr] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.hp-cal__month[b-obwmgg7avr] {
    margin-left: 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--lp-text);
}

.hp-cal__appnav[b-obwmgg7avr] {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lp-primary-soft);
}

.hp-cal__week[b-obwmgg7avr] {
    position: relative;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
    padding: 1.25rem 1.4rem 1.5rem;
}

.hp-cal__col[b-obwmgg7avr] {
    position: relative;
    border: 1px solid hsla(268, 16%, 18%, 0.8);
    border-radius: 0.55rem;
    background-color: hsla(268, 16%, 13%, 0.55);
    padding-top: 2rem;
    /* Faint hour rules give the canvas its texture. */
    background-image: repeating-linear-gradient(180deg,
        hsla(268, 10%, 92%, 0.035) 0, hsla(268, 10%, 92%, 0.035) 1px,
        transparent 1px, transparent 2.4rem);
    background-position: 0 2rem;
    background-size: 100% calc(100% - 2rem);
    background-repeat: no-repeat;
}

/* The now line: the one live element in the mock, a lit iris rule with
   its dot at the left rail. */
.hp-cal__now[b-obwmgg7avr] {
    position: absolute;
    left: 1.4rem;
    right: 1.4rem;
    z-index: 2;
    top: calc(1.25rem + 2rem + (100% - 4.75rem) * var(--t) / 100);
    height: 2px;
    border-radius: 1px;
    pointer-events: none;
    /* Softened to read as light, not a drawn rule: fades at both ends and
       carries a wide bloom (handbook T23 now-line footlight). */
    background: linear-gradient(90deg, transparent, var(--lp-primary) 14%,
        color-mix(in srgb, var(--lp-primary) 30%, transparent) 78%, transparent);
    box-shadow: 0 0 16px hsla(268, 62%, 58%, 0.35);
}

/* Footlight: a soft wide band of light around the live line, so the present
   moment is the brightest place on the stage (T17 one-hero, T23). */
.hp-cal__now[b-obwmgg7avr]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 150px;
    transform: translateY(-50%);
    background: radial-gradient(ellipse 62% 100% at 46% 50%, hsla(268, 72%, 62%, 0.2), transparent 74%);
    filter: blur(7px);
    mix-blend-mode: screen;
    pointer-events: none;
}

.hp-cal__now[b-obwmgg7avr]::before {
    content: "";
    position: absolute;
    left: -2px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lp-primary);
    box-shadow: 0 0 8px hsla(268, 62%, 58%, 0.8);
}

/* ═══ T23 lit stage: theater light for the full-bleed pose ══════════════════
   The calendar canvas (pose 2 full bleed) is lit like a stage rather than run
   flat to the frame: two overhead beams, a theater vignette, the existing
   __dawn floor pool, the now-line footlight, and pose-2 chips that catch the
   light. Beams and vignette are decorative overlays scoped to the media box
   and clipped by the stage overflow (no body overflow). All light is
   screen-blended luminance (T17). Base CSS renders the fully-lit final pose;
   the .has-motion block ramps every layer on --p so the pose morph doubles as
   a lighting cue; reduced motion keeps the lit pose, static. */
.hp-cal__rig[b-obwmgg7avr] {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
}

.hp-cal__beam[b-obwmgg7avr] {
    position: absolute;
    top: -8%;
    width: 26%;
    height: 108%;
    background-color: hsl(268, 64%, 60%);
    clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
    /* Static blur is the reduced-motion fallback; the animation folds the same
       blur in so cycling the hue never drops it. */
    filter: blur(34px);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 88%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 88%);
    opacity: 0.42;
    animation: hp-cal-beam-b-obwmgg7avr 8s linear infinite;
}
.hp-cal__beam--l[b-obwmgg7avr] { left: 10%; transform: rotate(15deg); transform-origin: top center; }
.hp-cal__beam--r[b-obwmgg7avr] { right: 10%; transform: rotate(-15deg); transform-origin: top center; }

.hp-cal__vignette[b-obwmgg7avr] {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 86% at 50% 44%, transparent 55%, hsla(268, 40%, 3%, 0.5) 100%),
        linear-gradient(180deg, hsla(268, 40%, 3%, 0.32), transparent 16%);
}

.hp-cal__day[b-obwmgg7avr] {
    position: absolute;
    top: 0.5rem;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lp-text-muted);
}

/* Category chips with real calendar anatomy (consistent with the Calendar
   landing): an inner-lit gradient wash, a 1px tinted border, the orb dot
   on the title, a time range, and a meta line on the tall blocks. Detail
   follows height, the way a real week looks. No spine bars. */
.hp-cal__ev[b-obwmgg7avr] {
    position: absolute;
    left: 0.45rem;
    right: 0.45rem;
    top: calc(2rem + (100% - 2rem) * var(--t) / 100);
    height: calc((100% - 2rem) * var(--h) / 100);
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-radius: 0.4rem;
    padding: 0.32rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--c, var(--lp-primary)) 42%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--c, var(--lp-primary)) 34%, transparent),
        color-mix(in srgb, var(--c, var(--lp-primary)) 20%, transparent));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c, var(--lp-primary)) 28%, transparent),
                0 2px 12px hsla(268, 40%, 4%, 0.3);
    line-height: 1.3;
    overflow: hidden;
}

.hp-cal__ev--a[b-obwmgg7avr] { --c: hsl(268, 62%, 58%); }
.hp-cal__ev--b[b-obwmgg7avr] { --c: hsl(220, 70%, 58%); }
.hp-cal__ev--c[b-obwmgg7avr] { --c: hsl(160, 60%, 45%); }

.hp-cal__ev-title[b-obwmgg7avr] {
    display: flex;
    align-items: center;
    min-width: 0;
    font-size: 0.66rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--c, var(--lp-primary)) 42%, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hp-cal__ev-title[b-obwmgg7avr]::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 5px;
    background: var(--c, var(--lp-primary));
    box-shadow: 0 0 6px color-mix(in srgb, var(--c, var(--lp-primary)) 55%, transparent);
}

.hp-cal__ev-time[b-obwmgg7avr] {
    font-size: 0.58rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--c, var(--lp-primary)) 35%, hsl(268, 10%, 78%));
    white-space: nowrap;
}

.hp-cal__ev-meta[b-obwmgg7avr] {
    font-size: 0.56rem;
    color: var(--lp-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* T16: the booking panel; base pose = landed (visible). */
.hp-cal__booking[b-obwmgg7avr] {
    position: relative;
    width: min(20rem, 88%);
    margin: 1rem auto 0;
    padding: 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    border-radius: 0.9rem;
    border: 1px solid hsla(268, 62%, 58%, 0.32);
    background: hsla(268, 20%, 9%, 0.88);
    box-shadow: 0 18px 50px hsla(268, 62%, 58%, 0.18);
    /* No backdrop-filter: this panel animates its transform on entrance, and a
       backdrop-filter under a transform leaks a square past the rounded corners
       in Chromium. Fill is near-opaque, so the blur was not doing visible work. */
    transition: transform 0.8s var(--lp-ease-enter) 0.12s, opacity 0.6s ease 0.12s;
}

.hp-cal__booking-title[b-obwmgg7avr] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--lp-text);
}

.hp-cal__booking-sub[b-obwmgg7avr] {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    color: var(--lp-text-muted);
}

.hp-cal__slot[b-obwmgg7avr] {
    padding: 0.55rem 0.9rem;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 0.55rem;
    border: 1px solid hsla(268, 30%, 60%, 0.32);
    color: var(--lp-primary-soft);
}

.hp-cal__slot--hot[b-obwmgg7avr] {
    background: var(--lp-primary);
    border-color: var(--lp-primary);
    color: #fff;
    box-shadow: 0 0 22px hsla(268, 62%, 58%, 0.5);
}

.hp-cal__booking-note[b-obwmgg7avr] {
    margin-top: 0.3rem;
    font-size: 0.68rem;
    text-align: center;
    color: var(--lp-text-muted);
}

.hp-cal__band[b-obwmgg7avr] {
    position: relative;
    padding: 1rem 24px 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
}

.hp-cal__captions[b-obwmgg7avr] {
    position: relative;
    width: min(44rem, 100%);
    text-align: center;
    pointer-events: none;
}

.hp-cal__cap--1[b-obwmgg7avr] { display: none; }

.hp-cal__cap[b-obwmgg7avr] {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.hp-cal__title[b-obwmgg7avr] {
    margin: 0 0 0.5rem;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--lp-text);
}

.hp-cal__desc[b-obwmgg7avr] {
    margin: 0 auto;
    max-width: 36rem;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--lp-text-muted);
}

.hp-cal__ctarow[b-obwmgg7avr] {
    flex-shrink: 0;
    pointer-events: auto;
}

/* ═══ Scene · Calendar on stage (T20 + T21), BASE = static composed ═══ */

.hp-stage[b-obwmgg7avr] {
    --p: 1;
    --stage-accent: hsl(268, 62%, 58%);
    --stage-ink: hsl(268, 62%, 80%);
    position: relative;
    flex-shrink: 0;
}

/* The complete rainbow, signature first: iris (default), then ruby, ember,
   solar, meadow, aurora, cobalt. All pairs sit at the same vivid
   brightness band (consistent with the Calendar landing). */
.hp-stage.cw-1[b-obwmgg7avr] { --stage-accent: #ef4444; --stage-ink: #fca5a5; }
.hp-stage.cw-2[b-obwmgg7avr] { --stage-accent: #f97316; --stage-ink: #fdba74; }
.hp-stage.cw-3[b-obwmgg7avr] { --stage-accent: #f59e0b; --stage-ink: #fde68a; }
.hp-stage.cw-4[b-obwmgg7avr] { --stage-accent: #22c55e; --stage-ink: #86efac; }
.hp-stage.cw-5[b-obwmgg7avr] { --stage-accent: #22d3ee; --stage-ink: #a5f3fc; }
.hp-stage.cw-6[b-obwmgg7avr] { --stage-accent: #3b82f6; --stage-ink: #93c5fd; }

.hp-stage__scene[b-obwmgg7avr] {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 2.5rem;
    background:
        radial-gradient(ellipse 90% 65% at 50% 118%,
            color-mix(in srgb, var(--stage-accent) 14%, transparent), transparent 72%),
        hsl(240, 10%, 5%);
}

/* The rig: three spotlight cones, blurred and screen-blended, raised by --p. */
.hp-stage__rig[b-obwmgg7avr] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hp-stage__beam[b-obwmgg7avr] {
    position: absolute;
    top: -12%;
    width: 30rem;
    height: 118%;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--stage-accent) 36%, transparent),
        color-mix(in srgb, var(--stage-accent) 10%, transparent) 45%,
        transparent 78%);
    clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
    filter: blur(26px);
    mix-blend-mode: screen;
    transform-origin: 50% 0;
    opacity: calc(0.10 + var(--p) * 0.5);
}

.hp-stage__beam--l[b-obwmgg7avr] { left: 3%; transform: rotate(calc(13deg - var(--p) * 5deg)); }
.hp-stage__beam--r[b-obwmgg7avr] { right: 3%; transform: rotate(calc(-13deg + var(--p) * 5deg)); }

.hp-stage__beam--c[b-obwmgg7avr] {
    left: 50%;
    margin-left: -15rem;
    transform: rotate(calc((var(--p) - 0.5) * 3deg));
    opacity: calc(0.14 + var(--p) * 0.55);
}

.hp-stage__floor[b-obwmgg7avr] {
    position: absolute;
    left: 50%;
    bottom: 15%;
    width: 62rem;
    height: 7rem;
    transform: translateX(-50%);
    background: radial-gradient(ellipse closest-side,
        color-mix(in srgb, var(--stage-accent) 30%, transparent), transparent 75%);
    filter: blur(18px);
    opacity: calc(0.2 + var(--p) * 0.8);
    pointer-events: none;
}

.hp-stage__header[b-obwmgg7avr] {
    position: relative;
    margin: 0 auto;
    padding: 3rem 24px 0;
    max-width: 640px;
    text-align: center;
    opacity: clamp(0.3, calc(0.3 + var(--p) * 2.4), 1);
}

.hp-stage__eyebrow[b-obwmgg7avr] {
    color: var(--stage-ink);
    transition: color 0.6s ease;
}

.hp-stage__title[b-obwmgg7avr] {
    margin: 0 0 12px;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--lp-text);
}

.hp-stage__sub[b-obwmgg7avr] {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--lp-text-muted);
}

/* The performer arrives dim and plays lit (T20 brightness ramp). */
.hp-stage__performer[b-obwmgg7avr] {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 24px 0;
    filter: brightness(calc(0.62 + var(--p) * 0.38));
}

.hp-stage__app[b-obwmgg7avr] {
    position: relative;
    width: min(44rem, 92%);
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--stage-accent) 28%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--stage-accent) 10%, hsl(268, 20%, 8%)),
        hsl(268, 22%, 7%) 70%);
    box-shadow: 0 30px 80px color-mix(in srgb, var(--stage-accent) 22%, transparent);
    transition: border-color 0.7s ease, box-shadow 0.7s ease;
}

/* Colorway sweep: a light band crosses the performer on every colorway
   flip; three aliases of one keyframe restart it per class change (T21). */
.hp-stage__app[b-obwmgg7avr]::after {
    content: "";
    position: absolute;
    inset: -20%;
    background: linear-gradient(115deg,
        transparent 32%,
        color-mix(in srgb, var(--stage-accent) 24%, transparent) 48%,
        hsla(0, 0%, 100%, 0.16) 52%,
        transparent 68%);
    transform: translateX(-130%);
    pointer-events: none;
}

.hp-stage.cw-0 .hp-stage__app[b-obwmgg7avr]::after { animation: hp-stage-sweep-0-b-obwmgg7avr 0.9s var(--lp-ease-enter); }
.hp-stage.cw-1 .hp-stage__app[b-obwmgg7avr]::after { animation: hp-stage-sweep-1-b-obwmgg7avr 0.9s var(--lp-ease-enter); }
.hp-stage.cw-2 .hp-stage__app[b-obwmgg7avr]::after { animation: hp-stage-sweep-2-b-obwmgg7avr 0.9s var(--lp-ease-enter); }
.hp-stage.cw-3 .hp-stage__app[b-obwmgg7avr]::after { animation: hp-stage-sweep-3-b-obwmgg7avr 0.9s var(--lp-ease-enter); }
.hp-stage.cw-4 .hp-stage__app[b-obwmgg7avr]::after { animation: hp-stage-sweep-4-b-obwmgg7avr 0.9s var(--lp-ease-enter); }
.hp-stage.cw-5 .hp-stage__app[b-obwmgg7avr]::after { animation: hp-stage-sweep-5-b-obwmgg7avr 0.9s var(--lp-ease-enter); }
.hp-stage.cw-6 .hp-stage__app[b-obwmgg7avr]::after { animation: hp-stage-sweep-6-b-obwmgg7avr 0.9s var(--lp-ease-enter); }

@keyframes hp-stage-sweep-0-b-obwmgg7avr { to { transform: translateX(130%); } }
@keyframes hp-stage-sweep-1-b-obwmgg7avr { to { transform: translateX(130%); } }
@keyframes hp-stage-sweep-2-b-obwmgg7avr { to { transform: translateX(130%); } }
@keyframes hp-stage-sweep-3-b-obwmgg7avr { to { transform: translateX(130%); } }
@keyframes hp-stage-sweep-4-b-obwmgg7avr { to { transform: translateX(130%); } }
@keyframes hp-stage-sweep-5-b-obwmgg7avr { to { transform: translateX(130%); } }
@keyframes hp-stage-sweep-6-b-obwmgg7avr { to { transform: translateX(130%); } }

.hp-stage__appbar[b-obwmgg7avr] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.8rem 1.4rem;
    border-bottom: 1px solid color-mix(in srgb, var(--stage-accent) 16%, transparent);
    transition: border-color 0.6s ease;
}

/* The brand mark anchors the stage appbar and follows the colorway. */
.hp-stage__mark[b-obwmgg7avr] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--stage-accent);
    transition: color 0.6s ease;
}

.hp-stage__appname[b-obwmgg7avr] {
    margin-left: 0.8rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--lp-text);
}

.hp-stage__appchip[b-obwmgg7avr] {
    margin-left: auto;
    padding: 0.18rem 0.65rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    color: var(--stage-ink);
    background: color-mix(in srgb, var(--stage-accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--stage-accent) 32%, transparent);
    transition: color 0.6s ease, background-color 0.6s ease, border-color 0.6s ease;
}

.hp-stage__appbody[b-obwmgg7avr] {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 1.25rem;
    padding: 1.1rem 1.4rem 1.4rem;
}

.hp-stage__monthlabel[b-obwmgg7avr] {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--lp-text);
}

.hp-stage__dow[b-obwmgg7avr] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.3rem;
    margin-bottom: 0.3rem;
}

.hp-stage__dow span[b-obwmgg7avr] {
    text-align: center;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--lp-text-muted);
}

.hp-stage__grid[b-obwmgg7avr] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.3rem;
}

.hp-stage__cell[b-obwmgg7avr] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1.25;
    font-size: 0.68rem;
    font-weight: 500;
    border-radius: 0.4rem;
    color: var(--lp-text-muted);
    background: hsla(268, 16%, 13%, 0.72);
}

.hp-stage__cell--busy[b-obwmgg7avr]::after {
    content: "";
    position: absolute;
    bottom: 0.18rem;
    left: 50%;
    width: 0.28rem;
    height: 0.28rem;
    margin-left: -0.14rem;
    border-radius: 50%;
    background: var(--stage-accent);
    transition: background-color 0.6s ease;
}

.hp-stage__cell--today[b-obwmgg7avr] {
    background: var(--stage-accent);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--stage-accent) 45%, transparent);
    transition: background-color 0.6s ease, box-shadow 0.6s ease;
}

.hp-stage__agenda[b-obwmgg7avr] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hp-stage__agendatitle[b-obwmgg7avr] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--lp-text);
}

/* Agenda rows: accent lives in the wash, not an edge bar. */
.hp-stage__item[b-obwmgg7avr] {
    padding: 0.5rem 0.7rem;
    font-size: 0.75rem;
    border-radius: 0.45rem;
    background: color-mix(in srgb, var(--stage-accent) 10%, hsl(268, 18%, 11%));
    color: var(--lp-text);
    transition: background-color 0.6s ease;
}

.hp-stage__item--solid[b-obwmgg7avr] {
    background: color-mix(in srgb, var(--stage-accent) 30%, transparent);
    color: #f4f2ff;
}

.hp-stage__book[b-obwmgg7avr] {
    margin-top: 0.35rem;
    padding: 0.6rem;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 8px;
    background: var(--stage-accent);
    color: #fff;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--stage-accent) 40%, transparent);
    transition: background-color 0.6s ease, box-shadow 0.6s ease;
}

/* The swatch bar: swatches left, the display-scale color name middle,
   CTA right. */
.hp-stage__bar[b-obwmgg7avr] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 1.5rem auto 0;
    padding: 0.8rem 1.4rem;
    border-radius: 999px;
    border: 1px solid hsla(268, 10%, 92%, 0.1);
    background: hsla(268, 22%, 7%, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* clip-path keeps the blur clipped to the pill even if a scene transform
       promotes this to a compositing layer (backdrop-filter otherwise leaks a
       square past rounded corners under a transform). Safe here: no drop shadow
       to clip away. */
    clip-path: inset(0 round 999px);
}

.hp-stage__swatches[b-obwmgg7avr] {
    display: flex;
    gap: 0.6rem;
}

.hp-stage__swatch[b-obwmgg7avr] {
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.hp-stage__swatch--iris[b-obwmgg7avr]   { background: radial-gradient(circle at 32% 30%, hsl(268, 62%, 72%), hsl(268, 62%, 52%) 72%); }
.hp-stage__swatch--ruby[b-obwmgg7avr]   { background: radial-gradient(circle at 32% 30%, #fca5a5, #ef4444 72%); }
.hp-stage__swatch--ember[b-obwmgg7avr]  { background: radial-gradient(circle at 32% 30%, #fdba74, #f97316 72%); }
.hp-stage__swatch--solar[b-obwmgg7avr]  { background: radial-gradient(circle at 32% 30%, #fcd34d, #f59e0b 72%); }
.hp-stage__swatch--meadow[b-obwmgg7avr] { background: radial-gradient(circle at 32% 30%, #86efac, #22c55e 72%); }
.hp-stage__swatch--aurora[b-obwmgg7avr] { background: radial-gradient(circle at 32% 30%, #67e8f9, #22d3ee 72%); }
.hp-stage__swatch--cobalt[b-obwmgg7avr] { background: radial-gradient(circle at 32% 30%, #93c5fd, #3b82f6 72%); }

/* Active keyed off aria-pressed so the server-rendered default (first
   swatch pressed) is styled even before the engine loads. */
.hp-stage__swatch[aria-pressed="true"][b-obwmgg7avr] {
    border-color: #fff;
    transform: scale(1.12);
    box-shadow: 0 0 16px color-mix(in srgb, var(--stage-accent) 55%, transparent);
}

.hp-stage__names[b-obwmgg7avr] {
    position: relative;
    flex: 1;
    min-width: 16rem;
    height: 3.4rem;
}

.hp-stage__name[b-obwmgg7avr] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--lp-text);
    opacity: 0;
    transform: translateY(0.55rem);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.hp-stage__name em[b-obwmgg7avr] {
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--lp-text-muted);
}

/* :not() default keeps the signature name legible with no engine at all. */
.hp-stage:not(.cw-1):not(.cw-2):not(.cw-3):not(.cw-4):not(.cw-5):not(.cw-6) .hp-stage__name--0[b-obwmgg7avr],
.hp-stage.cw-1 .hp-stage__name--1[b-obwmgg7avr],
.hp-stage.cw-2 .hp-stage__name--2[b-obwmgg7avr],
.hp-stage.cw-3 .hp-stage__name--3[b-obwmgg7avr],
.hp-stage.cw-4 .hp-stage__name--4[b-obwmgg7avr],
.hp-stage.cw-5 .hp-stage__name--5[b-obwmgg7avr],
.hp-stage.cw-6 .hp-stage__name--6[b-obwmgg7avr] {
    opacity: 1;
    transform: translateY(0);
}

.hp-stage__cta[b-obwmgg7avr] {
    flex-shrink: 0;
}

/* ═══ Scene · Proof pin (T2/T15/T17), BASE = static composed ═══ */

.hp-pin[b-obwmgg7avr] {
    --p: 1;
    position: relative;
    flex-shrink: 0;
    background: hsl(240, 10%, 5%);
    border-block: 1px solid var(--lp-border);
}

.hp-pin__stage[b-obwmgg7avr] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    padding: 6rem 24px;
    overflow: hidden;
    text-align: center;
}

/* Light is a material (T17): the dawn rises as the visitor commits. */
.hp-pin__dawn[b-obwmgg7avr] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 85% 60% at 50% 108%,
        hsla(268, 62%, 58%, 0.26), hsla(243, 65%, 60%, 0.08) 55%, transparent 78%);
    transform: translateY(calc((1 - var(--p)) * 26%));
    opacity: calc(0.15 + var(--p) * 0.85);
}

/* Billboard type (T17): one giant numeral anchors the whole stage. */
.hp-pin__billboard[b-obwmgg7avr] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -54%) scale(calc(0.94 + var(--p) * 0.06));
    font-size: clamp(14rem, 36vh, 28rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    pointer-events: none;
    background-image: linear-gradient(120deg, hsl(268, 70%, 72%), hsl(268, 55%, 42%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    opacity: calc(0.05 + var(--p) * 0.07);
}

/* The statement fills with brand light and holds (aligned with the Calendar
   landing's proof frame): it stays lit under the note while the stats rise
   below it, rather than receding to hand off. */
.hp-pin__statement[b-obwmgg7avr] {
    position: relative;
    margin: 0;
    font-size: clamp(2rem, 4.6vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    background-image: linear-gradient(100deg,
        hsl(268, 30%, 96%) 0%, hsl(268, 65%, 80%) 28%, var(--lp-primary) 48%,
        hsla(268, 10%, 92%, 0.2) 52%, hsla(268, 10%, 92%, 0.2) 100%);
    background-size: 215% 100%;
    background-position-x: calc(100% * (1 - min(var(--p) * 1.8, 1)));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* A quiet note under the statement, matching the Calendar landing's proof:
   sits close beneath the headline, above the counters. */
.hp-pin__note[b-obwmgg7avr] {
    position: relative;
    margin: -2rem 0 0;
    font-size: 0.95rem;
    color: var(--lp-text-muted);
}

.hp-stats[b-obwmgg7avr] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(9rem, 1fr));
    gap: 2.5rem;
    margin: 0;
    max-width: 60rem;
    opacity: clamp(0, (var(--p) - 0.3) * 3.5, 1);
    transform: translateY(calc(max(0.35 - var(--p), 0) * 6rem));
}

.hp-stat[b-obwmgg7avr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hp-stat__num[b-obwmgg7avr] {
    margin: 0;
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--lp-primary-soft), var(--lp-text));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-variant-numeric: tabular-nums;
}

.hp-stat__label[b-obwmgg7avr] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--lp-text-muted);
}

/* ═══ Scene · Workspace tiles ═══ */

.hp-scene--workspace[b-obwmgg7avr] {
    background: var(--lp-bg);
    border-block: 1px solid var(--lp-border);
}

.hp-tiles[b-obwmgg7avr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 16px;
}

.hp-tile[b-obwmgg7avr] {
    display: flex;
    align-items: flex-start;
    text-align: left;
    gap: 0.875rem;
    padding: 20px;
    background: var(--lp-bg-card);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    transition: border-color var(--lp-motion-base) ease, background var(--lp-motion-base) ease,
                filter var(--lp-motion-base) ease, box-shadow var(--lp-motion-base) ease,
                opacity var(--lp-motion-scene) ease, transform var(--lp-motion-scene) var(--lp-ease-enter);
}

.hp-tile:hover[b-obwmgg7avr] {
    border-color: hsla(268, 50%, 50%, 0.3);
    background: var(--lp-bg-card-hover);
    filter: brightness(1.05);
    box-shadow: 0 6px 24px hsla(268, 40%, 10%, 0.3);
}

[b-obwmgg7avr] .hp-tile__icon {
    color: var(--lp-primary-soft);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.hp-tile__body[b-obwmgg7avr] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.hp-tile__title[b-obwmgg7avr] {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--lp-text);
}

.hp-tile__text[b-obwmgg7avr] {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--lp-text-muted);
}

/* ═══ Scene · Security ═══ */

.hp-scene--security[b-obwmgg7avr] {
    background: var(--lp-bg-deep);
}

.hp-security__note[b-obwmgg7avr] {
    margin: 2.5rem auto 0;
    max-width: 560px;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--lp-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* ═══ Scene · Close ═══ */

.hp-close[b-obwmgg7avr] {
    position: relative;
    padding: 8rem 0;
    text-align: center;
    background: var(--lp-bg-deep);
    border-top: 1px solid var(--lp-border);
    overflow: hidden;
    flex-shrink: 0;
}

.hp-close__glow[b-obwmgg7avr] {
    position: absolute;
    left: 50%;
    bottom: -14rem;
    transform: translateX(-50%);
    width: 60rem;
    height: 26rem;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
        hsla(268, 70%, 50%, 0.2) 0%, hsla(268, 60%, 40%, 0.06) 50%, transparent 72%);
}

.hp-close__title[b-obwmgg7avr] {
    position: relative;
    font-size: clamp(1.8rem, 3.6vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    color: var(--lp-text);
}

.hp-close__subtitle[b-obwmgg7avr] {
    position: relative;
    font-size: 1.1rem;
    color: var(--lp-text-muted);
    margin: 0 0 36px;
}

/* ── Footer (landing structure) ── */

.hp-footer[b-obwmgg7avr] {
    border-top: 1px solid var(--lp-border);
    background: var(--lp-bg-deep);
    padding: 56px 24px 32px;
    flex-shrink: 0;
}

.hp-footer__inner[b-obwmgg7avr] {
    max-width: var(--lp-max-width);
    margin: 0 auto;
}

.hp-footer__brand[b-obwmgg7avr] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 32px;
    color: var(--lp-text-muted);
}

.hp-footer__links[b-obwmgg7avr] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

.hp-footer__col h4[b-obwmgg7avr] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lp-text);
    margin: 0 0 12px;
    font-weight: 600;
}

.hp-footer__col a[b-obwmgg7avr] {
    display: block;
    color: var(--lp-text-muted);
    text-decoration: none;
    font-size: 0.88rem;
    padding: 4px 0;
    transition: color var(--lp-transition);
}
.hp-footer__col a:hover[b-obwmgg7avr] {
    color: var(--lp-text);
}

.hp-footer__bottom[b-obwmgg7avr] {
    padding-top: 24px;
    border-top: 1px solid var(--lp-border);
    font-size: 0.82rem;
    color: var(--lp-text-muted);
}

/* ═══ Scene · Essentials in focus (T22 focus carousel) ═══ */
/* State-machine styling, not entrance choreography: base CSS composes the
   first card until the engine marks the scene live. Card 1 is a compact
   free-basics profile form; cards 2-7 each showcase one more-complex control
   smaller, with a feature tooltip. The data-heavy compound controls live
   bigger in the orbit below. */

.hp-focus[b-obwmgg7avr] {
    --fp: 0.14;
    padding: 6rem 24px;
    background:
        radial-gradient(ellipse 60% 80% at 85% 15%,
            hsla(268, 62%, 58%, 0.06), transparent),
        var(--lp-bg-deep);
}

.hp-fc__stage[b-obwmgg7avr] {
    position: relative;
    height: 24rem;
    /* Explicit width so the stage keeps its size when .hp-focus becomes a flex
       column at full-screen: its cards are absolutely positioned (no in-flow
       width) and margin:0 auto would otherwise collapse it to zero in flex. */
    width: 100%;
    max-width: 62rem;
    margin: 0 auto;
    perspective: 1400px;
}

.hp-fc__card[b-obwmgg7avr] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18rem;
    height: 21.5rem;
    margin: -10.75rem 0 0 -9rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Rounder corners and an almost-transparent surface: a faint iris wash over
       a low-alpha fill so the scene shows through softly while the mock content
       stays legible. (See below for why there is no backdrop-filter.) */
    border-radius: 1.5rem;
    border: 1px solid hsla(268, 30%, 66%, 0.18);
    background:
        radial-gradient(ellipse 100% 80% at 50% 0%,
            hsla(268, 62%, 58%, 0.10), transparent),
        hsla(268, 22%, 13%, 0.32);
    /* No backdrop-filter: these coverflow cards are transformed (is-left/right/
       center), and a backdrop-filter under a transform leaks a square past the
       rounded corners in Chromium. The blur is invisible over the near-black
       scene, so dropping it costs nothing and keeps the card's glow shadow. */
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.7s var(--lp-ease-enter),
                opacity 0.7s ease, filter 0.7s ease, box-shadow 0.7s ease,
                border-color 0.7s ease;
}

/* No-engine fallback: until the engine marks the scene live, the first card
   holds the stage composed. */
.hp-focus:not(.is-live) .hp-fc__card:first-child[b-obwmgg7avr] {
    opacity: 1;
    pointer-events: auto;
}

.hp-fc__card.is-center[b-obwmgg7avr] {
    opacity: 1;
    pointer-events: auto;
    z-index: 3;
    transform: translateZ(0);
    border-color: hsla(268, 62%, 58%, 0.4);
    box-shadow: 0 24px 60px hsla(268, 62%, 58%, 0.18);
}

.hp-fc__card.is-left[b-obwmgg7avr],
.hp-fc__card.is-right[b-obwmgg7avr] {
    opacity: 0.5;
    pointer-events: auto;
    z-index: 2;
    filter: blur(7px) brightness(0.8);
}

.hp-fc__card.is-left[b-obwmgg7avr]  { transform: translateX(-13.5rem) rotateY(9deg) scale(0.82); }
.hp-fc__card.is-right[b-obwmgg7avr] { transform: translateX(13.5rem) rotateY(-9deg) scale(0.82); }

/* Far wings: the second shadow slide on each side, set deeper into the stack. */
.hp-fc__card.is-left2[b-obwmgg7avr],
.hp-fc__card.is-right2[b-obwmgg7avr] {
    opacity: 0.25;
    pointer-events: auto;
    z-index: 1;
    filter: blur(11px) brightness(0.65);
}

.hp-fc__card.is-left2[b-obwmgg7avr]  { transform: translateX(-22rem) rotateY(14deg) scale(0.68); }
.hp-fc__card.is-right2[b-obwmgg7avr] { transform: translateX(22rem) rotateY(-14deg) scale(0.68); }

.hp-fc__card.is-off[b-obwmgg7avr] {
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transform: scale(0.6);
}

.hp-fc__mock[b-obwmgg7avr] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 84%;
}

/* Free/Paid tier badge, top-right of each card mock. */
.hp-fc__badge[b-obwmgg7avr] {
    position: absolute;
    top: -0.5rem;
    right: 0;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.hp-fc__badge--free[b-obwmgg7avr] {
    color: hsl(150, 60%, 72%);
    background: hsla(150, 60%, 45%, 0.16);
    box-shadow: inset 0 0 0 1px hsla(150, 60%, 50%, 0.4);
}

.hp-fc__badge--paid[b-obwmgg7avr] {
    color: var(--lp-primary-soft);
    background: hsla(268, 62%, 58%, 0.16);
    box-shadow: inset 0 0 0 1px hsla(268, 62%, 58%, 0.4);
}

/* One small feature tooltip per card, a stem pointing up into the mock. */
.hp-fc-tip[b-obwmgg7avr] {
    position: relative;
    align-self: center;
    margin-top: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 0.45rem;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--lp-text);
    background: hsla(268, 24%, 16%, 0.98);
    border: 1px solid hsla(268, 62%, 58%, 0.35);
    box-shadow: 0 6px 18px hsla(268, 40%, 4%, 0.5);
}

.hp-fc-tip__stem[b-obwmgg7avr] {
    position: absolute;
    top: -0.3rem;
    left: 1.1rem;
    width: 0.5rem;
    height: 0.5rem;
    transform: rotate(45deg);
    background: hsla(268, 24%, 16%, 0.98);
    border-left: 1px solid hsla(268, 62%, 58%, 0.35);
    border-top: 1px solid hsla(268, 62%, 58%, 0.35);
}

/* Caption stack: title at display scale, spec line, behavior line, crossfading
   with the focus index. width:100% keeps it from shrink-collapsing when the
   scene becomes a centered flex column at full-screen. */
.hp-fc__captions[b-obwmgg7avr] {
    position: relative;
    width: 100%;
    height: 8rem;
    max-width: 34rem;
    margin: 1.5rem auto 0;
    text-align: center;
    /* A single soft rounded plaque under the card. Generous corner radius so it
       reads as clearly rounded (not a hard rectangle), a translucent fill, and
       only a whisper of a border so it does not stack a second hard frame under
       the card's bordered surface. No backdrop-filter here on purpose: this
       element carries a transform from its entrance animation, and Chromium
       fails to clip a backdrop-filter to border-radius inside a transform
       context, leaking a square frosted region past the rounded corners. */
    border-radius: 1.5rem;
    border: 1px solid hsla(268, 30%, 66%, 0.10);
    background: hsla(268, 22%, 13%, 0.4);
}

.hp-fc__cap[b-obwmgg7avr] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    opacity: 0;
    transform: translateY(-0.6rem);
    transition: opacity 0.45s ease, transform 0.45s ease;
    pointer-events: none;
}

.hp-focus:not(.is-live) .hp-fc__cap:first-child[b-obwmgg7avr],
.hp-fc__cap.active[b-obwmgg7avr] {
    opacity: 1;
    transform: translateY(0);
}

/* Tier pill above a caption title (rounded chip). */
.hp-fc__cap-pill[b-obwmgg7avr] {
    display: inline-block;
    margin: 0 0 0.5rem;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: hsl(150, 60%, 72%);
    background: hsla(150, 60%, 45%, 0.16);
    box-shadow: inset 0 0 0 1px hsla(150, 60%, 50%, 0.4);
}

.hp-fc__cap-title[b-obwmgg7avr] {
    margin: 0 0 0.25rem;
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--lp-text);
}

.hp-fc__cap-spec[b-obwmgg7avr] {
    margin: 0 0 0.2rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--lp-primary-soft);
}

.hp-fc__cap-style[b-obwmgg7avr] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--lp-text-muted);
}

/* The tick-ring dial: conic progress arc under a repeating-conic tick-gap
   overlay, ring-masked. */
.hp-fc__dial[b-obwmgg7avr] {
    position: relative;
    width: 15rem;
    height: 3rem;
    margin: 1rem auto 0;
}

.hp-fc__ring[b-obwmgg7avr] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        repeating-conic-gradient(from -90deg,
            transparent 0deg 4.5deg,
            var(--lp-bg-deep) 4.5deg 7.5deg),
        conic-gradient(from -90deg,
            var(--lp-primary) calc(var(--fp) * 360deg),
            hsla(268, 10%, 92%, 0.18) 0);
    -webkit-mask: radial-gradient(closest-side, transparent 72%, #000 73%);
    mask: radial-gradient(closest-side, transparent 72%, #000 73%);
}

/* ── Card 1: the compact free-basics profile form ── */
.hp-fc__mock--form[b-obwmgg7avr] { gap: 0.55rem; width: 86%; }

.hp-fc-form__title[b-obwmgg7avr] {
    margin-bottom: 0.1rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--lp-text);
}

.hp-fc-field[b-obwmgg7avr] { display: flex; flex-direction: column; gap: 0.3rem; }

.hp-fc-field--row[b-obwmgg7avr] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.hp-fc-field__label[b-obwmgg7avr] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--lp-text);
}

.hp-fc-field__label em[b-obwmgg7avr] {
    font-family: var(--font-mono, ui-monospace, "Cascadia Mono", Consolas, monospace);
    font-style: normal;
    font-size: 0.58rem;
    color: var(--lp-primary-soft);
}

.hp-fc-form__val[b-obwmgg7avr] { color: var(--lp-text); }

/* ── Card 2: UxColorPicker ── */
.hp-fc-color[b-obwmgg7avr] { display: flex; flex-direction: column; gap: 0.5rem; }

.hp-fc-color__field[b-obwmgg7avr] {
    position: relative;
    height: 5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--lp-border);
    background:
        linear-gradient(to top, #000, transparent),
        linear-gradient(to right, #fff, #7c4de0);
}

.hp-fc-color__thumb[b-obwmgg7avr] {
    position: absolute;
    top: 30%;
    left: 64%;
    width: 0.8rem;
    height: 0.8rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.45);
}

.hp-fc-color__hue[b-obwmgg7avr] {
    height: 0.55rem;
    border-radius: 999px;
    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

.hp-fc-color__row[b-obwmgg7avr] { display: flex; align-items: center; gap: 0.35rem; }

.hp-fc-color__swatch[b-obwmgg7avr] {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    background: var(--c);
    border: 1px solid hsla(0, 0%, 100%, 0.15);
}

.hp-fc-color__hex[b-obwmgg7avr] {
    margin-left: auto;
    font-family: var(--font-mono, ui-monospace, "Cascadia Mono", Consolas, monospace);
    font-size: 0.68rem;
    color: var(--lp-text);
}

/* ── Card 3: UxCarousel ── */
.hp-fc-carousel[b-obwmgg7avr] { display: flex; flex-direction: column; gap: 0.6rem; }

.hp-fc-carousel__view[b-obwmgg7avr] {
    position: relative;
    height: 5.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-fc-carousel__slide[b-obwmgg7avr] {
    position: absolute;
    width: 70%;
    height: 100%;
    border-radius: 0.55rem;
    border: 1px solid var(--lp-border);
    background: linear-gradient(135deg, hsl(268, 50%, 30%), hsl(268, 62%, 46%));
}

.hp-fc-carousel__slide--on[b-obwmgg7avr] { z-index: 2; box-shadow: 0 12px 30px hsla(268, 62%, 58%, 0.3); }

.hp-fc-carousel__slide--prev[b-obwmgg7avr] {
    transform: translateX(-58%) scale(0.85);
    opacity: 0.5;
    filter: brightness(0.7);
}

.hp-fc-carousel__slide--next[b-obwmgg7avr] {
    transform: translateX(58%) scale(0.85);
    opacity: 0.5;
    filter: brightness(0.7);
    background: linear-gradient(135deg, hsl(220, 50%, 30%), hsl(220, 62%, 46%));
}

.hp-fc-carousel__dots[b-obwmgg7avr] { display: flex; gap: 0.35rem; justify-content: center; }

.hp-fc-carousel__dots b[b-obwmgg7avr] {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: hsla(268, 10%, 92%, 0.25);
}

.hp-fc-carousel__dots b.is-on[b-obwmgg7avr] { width: 1.1rem; border-radius: 999px; background: var(--lp-primary); }

/* ── Card 4: UxDragDrop ── */
.hp-fc-drag[b-obwmgg7avr] { display: flex; flex-direction: column; gap: 0.4rem; }

.hp-fc-drag__item[b-obwmgg7avr] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0.45rem;
    font-size: 0.72rem;
    color: var(--lp-text);
    border: 1px solid var(--lp-border);
    background: hsla(268, 20%, 9%, 0.9);
}

.hp-fc-drag__item--lift[b-obwmgg7avr] {
    border-color: hsla(268, 62%, 58%, 0.5);
    background: hsla(268, 24%, 16%, 0.98);
    box-shadow: 0 12px 26px hsla(268, 40%, 4%, 0.6);
    transform: translateX(0.5rem) rotate(-1.5deg);
}

.hp-fc-drag__grip[b-obwmgg7avr] {
    width: 0.5rem;
    height: 0.7rem;
    flex-shrink: 0;
    background: radial-gradient(circle, var(--lp-primary-soft) 42%, transparent 44%) 0 0 / 0.25rem 0.25rem;
    opacity: 0.8;
}

.hp-fc-drag__slot[b-obwmgg7avr] {
    height: 2rem;
    border-radius: 0.45rem;
    border: 1px dashed hsla(268, 62%, 58%, 0.4);
    background: hsla(268, 62%, 58%, 0.06);
}

/* ── Card 5: UxPhotoGallery ── */
.hp-fc-gallery[b-obwmgg7avr] { display: flex; flex-direction: column; gap: 0.45rem; }

.hp-fc-gallery__main[b-obwmgg7avr] {
    height: 5.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--lp-border);
    background: linear-gradient(135deg, hsl(268, 45%, 28%), hsl(300, 45%, 38%), hsl(220, 50%, 40%));
}

.hp-fc-gallery__thumbs[b-obwmgg7avr] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; }

.hp-fc-gallery__thumb[b-obwmgg7avr] {
    aspect-ratio: 1;
    border-radius: 0.3rem;
    border: 1px solid var(--lp-border);
    background: linear-gradient(135deg, hsl(268, 40%, 30%), hsl(268, 48%, 44%));
}

.hp-fc-gallery__thumb.is-on[b-obwmgg7avr] { box-shadow: 0 0 0 2px var(--lp-primary); }

/* ── Card 6: UxTable ── */
.hp-fc-table[b-obwmgg7avr] {
    display: flex;
    flex-direction: column;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--lp-border);
    background: hsla(268, 16%, 13%, 0.9);
    font-size: 0.72rem;
}

.hp-fc-table__head[b-obwmgg7avr],
.hp-fc-table__row[b-obwmgg7avr] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0.5rem;
    align-items: center;
    padding: 0.45rem 0.7rem;
}

.hp-fc-table__head[b-obwmgg7avr] {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lp-text-muted);
    border-bottom: 1px solid var(--lp-border);
}

.hp-fc-table__head span[b-obwmgg7avr] { display: inline-flex; align-items: center; gap: 0.3rem; }

.hp-fc-table__sort[b-obwmgg7avr] {
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid var(--lp-primary-soft);
}

.hp-fc-table__row[b-obwmgg7avr] { color: var(--lp-text); }
.hp-fc-table__row + .hp-fc-table__row[b-obwmgg7avr] { border-top: 1px solid hsla(268, 16%, 18%, 0.5); }

.hp-fc-table__row--on[b-obwmgg7avr] {
    background: hsla(268, 62%, 58%, 0.14);
    box-shadow: inset 0 0 0 1px hsla(268, 62%, 58%, 0.3);
}

.hp-fc-table__foot[b-obwmgg7avr] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.7rem;
    border-top: 1px solid var(--lp-border);
    font-size: 0.6rem;
    color: var(--lp-text-muted);
}

.hp-fc-table__foot b[b-obwmgg7avr] {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 0.2rem;
    background: hsla(268, 10%, 92%, 0.12);
}

.hp-fc-table__foot b.is-on[b-obwmgg7avr] { background: var(--lp-primary); }
.hp-fc-table__foot span[b-obwmgg7avr] { margin-left: auto; }

/* ── Card 7: UxDialog ── */
.hp-fc-dialog[b-obwmgg7avr] {
    position: relative;
    height: 9rem;
    width: 100%;
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-fc-dialog__scrim[b-obwmgg7avr] { position: absolute; inset: 0; background: hsla(268, 40%, 4%, 0.6); }

.hp-fc-dialog__box[b-obwmgg7avr] {
    position: relative;
    z-index: 1;
    width: 88%;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.8rem;
    border-radius: 0.55rem;
    border: 1px solid var(--lp-border);
    background: var(--lp-bg-card);
    box-shadow: 0 20px 40px hsla(268, 40%, 4%, 0.7);
}

.hp-fc-dialog__title[b-obwmgg7avr] { font-size: 0.8rem; font-weight: 700; color: var(--lp-text); }
.hp-fc-dialog__text[b-obwmgg7avr] { font-size: 0.68rem; color: var(--lp-text-muted); }

.hp-fc-dialog__actions[b-obwmgg7avr] {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
    margin-top: 0.2rem;
}

.hp-fc-dialog__btn[b-obwmgg7avr] {
    padding: 0.3rem 0.7rem;
    border-radius: 0.4rem;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--lp-text-muted);
    border: 1px solid var(--lp-border);
}

.hp-fc-dialog__btn--danger[b-obwmgg7avr] { color: #fff; background: hsl(0, 60%, 50%); border-color: transparent; }

/* ── Short viewports: the center card is nearly as tall as a laptop's usable
   height, so on a short screen it can overlap its own header above and caption
   below. Compact the coverflow and hide the smaller text (the header subtitle
   on top, the caption behaviour line on bottom) so the card always clears
   both. The eyebrow, title, card, caption name/spec, and dial all stay. ── */
@media (max-height: 820px) {
    .hp-focus[b-obwmgg7avr] { padding-top: 3rem; padding-bottom: 3rem; }
    .hp-focus .hp-scene__header[b-obwmgg7avr] { margin-bottom: 0; }
    .hp-focus .hp-scene__subtitle[b-obwmgg7avr] { display: none; }
    .hp-fc__stage[b-obwmgg7avr] { height: 18.5rem; }
    .hp-fc__card[b-obwmgg7avr] { width: 16rem; height: 17rem; margin: -8.5rem 0 0 -8rem; }
    .hp-fc__captions[b-obwmgg7avr] { height: 5.25rem; margin-top: 1rem; }
    .hp-fc__cap-style[b-obwmgg7avr] { display: none; }
    /* The tick-ring dial is decorative; drop it on short screens so the
       caption never collides with it. */
    .hp-fc__dial[b-obwmgg7avr] { display: none; }
}

/* ── Field vignettes (shared by the form fields) ── */

.hp-fc-input[b-obwmgg7avr] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.6rem 0.8rem;
    font-size: 0.75rem;
    border-radius: 0.55rem;
    border: 1px solid hsla(268, 62%, 58%, 0.45);
    background: hsla(268, 20%, 9%, 0.9);
    color: var(--lp-text-muted);
}

.hp-fc-input--filled[b-obwmgg7avr] {
    border-color: var(--lp-border);
    color: var(--lp-text);
}

.hp-fc-input__label[b-obwmgg7avr] {
    font-size: 0.75rem;
}

.hp-fc-input__caret[b-obwmgg7avr] {
    width: 1px;
    height: 0.9rem;
    background: var(--lp-primary-soft);
    animation: hp-caret-b-obwmgg7avr 1.1s steps(1) infinite;
}

.hp-fc-stepper[b-obwmgg7avr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--lp-border);
}

.hp-fc-stepper__btn[b-obwmgg7avr] {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    color: var(--lp-primary-soft);
    background: hsla(268, 62%, 58%, 0.14);
}

.hp-fc-stepper__val[b-obwmgg7avr] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--lp-text);
    font-variant-numeric: tabular-nums;
}

.hp-fc-row[b-obwmgg7avr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hp-fc-row__label[b-obwmgg7avr] {
    font-size: 0.75rem;
    color: var(--lp-text-muted);
    margin-right: 0.4rem;
}

.hp-fc-check[b-obwmgg7avr] {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border: 1.5px solid hsla(268, 10%, 92%, 0.4);
    flex-shrink: 0;
    position: relative;
}

.hp-fc-check--on[b-obwmgg7avr] {
    border-color: var(--lp-primary);
    background: var(--lp-primary);
}

.hp-fc-check--on[b-obwmgg7avr]::after {
    content: "";
    position: absolute;
    left: 0.28rem;
    top: 0.08rem;
    width: 0.3rem;
    height: 0.55rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(42deg);
}

.hp-fc-radio[b-obwmgg7avr] {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1.5px solid hsla(268, 10%, 92%, 0.4);
    flex-shrink: 0;
    position: relative;
}

.hp-fc-radio--on[b-obwmgg7avr] {
    border-color: var(--lp-primary);
}

.hp-fc-radio--on[b-obwmgg7avr]::after {
    content: "";
    position: absolute;
    inset: 0.16rem;
    border-radius: 50%;
    background: var(--lp-primary);
}

.hp-fc-switch[b-obwmgg7avr] {
    width: 1.9rem;
    height: 1.05rem;
    border-radius: 999px;
    background: hsla(268, 62%, 58%, 0.6);
    display: inline-flex;
    align-items: center;
    padding: 0.12rem;
    flex-shrink: 0;
}

.hp-fc-switch__knob[b-obwmgg7avr] {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: #fff;
    margin-left: auto;
}

.hp-fc-slider[b-obwmgg7avr] {
    position: relative;
    height: 0.35rem;
    border-radius: 999px;
    background: hsla(268, 10%, 92%, 0.18);
    margin: 0.5rem 0;
}

.hp-fc-slider__fill[b-obwmgg7avr] {
    position: absolute;
    inset: 0 38% 0 0;
    border-radius: inherit;
    background: var(--lp-primary);
}

.hp-fc-slider__knob[b-obwmgg7avr] {
    position: absolute;
    left: 62%;
    top: 50%;
    width: 0.95rem;
    height: 0.95rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--lp-primary);
    box-shadow: 0 2px 8px hsla(268, 62%, 58%, 0.45);
}

.hp-fc-stars[b-obwmgg7avr] {
    font-size: 1.05rem;
    letter-spacing: 0.15em;
    color: hsl(38, 80%, 62%);
    text-align: center;
}

.hp-fc-stars__dim[b-obwmgg7avr] {
    opacity: 0.28;
}

.hp-fc-search[b-obwmgg7avr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    font-size: 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--lp-border);
    color: var(--lp-text-muted);
    background: hsla(268, 20%, 9%, 0.9);
}

.hp-fc-search__dot[b-obwmgg7avr] {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    border: 2px solid var(--lp-primary-soft);
    flex-shrink: 0;
}

.hp-fc-select[b-obwmgg7avr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.8rem;
    font-size: 0.75rem;
    border-radius: 0.55rem;
    border: 1px solid hsla(268, 62%, 58%, 0.45);
    background: hsla(268, 20%, 9%, 0.9);
    color: var(--lp-text);
}

.hp-fc-select__chev[b-obwmgg7avr] {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--lp-primary-soft);
}

.hp-fc-time[b-obwmgg7avr] {
    display: block;
    padding: 0.4rem;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    border-radius: 999px;
    color: var(--lp-primary-soft);
    background: hsla(268, 62%, 58%, 0.12);
}

.hp-fc-otp[b-obwmgg7avr] {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
}

.hp-fc-otp__cell[b-obwmgg7avr] {
    width: 1.7rem;
    height: 2.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.45rem;
    border: 1px solid var(--lp-border);
    background: hsla(268, 20%, 9%, 0.9);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--lp-text);
}

.hp-fc-otp__cell--filled[b-obwmgg7avr] {
    border-color: hsla(268, 62%, 58%, 0.45);
    background: hsla(268, 62%, 58%, 0.12);
}

.hp-fc-otp__cell--caret[b-obwmgg7avr] {
    border-color: var(--lp-primary);
    position: relative;
}

.hp-fc-otp__cell--caret[b-obwmgg7avr]::after {
    content: "";
    width: 1px;
    height: 1.1rem;
    background: var(--lp-primary-soft);
    animation: hp-caret-b-obwmgg7avr 1.1s steps(1) infinite;
}


/* ═══════════════════════════════════════════════════════════════════════
   CHOREOGRAPHY - everything below only applies once the engine has added
   .has-motion (JS present, no reduced-motion preference). Without it the
   page renders every scene in its composed final pose.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── T3 pre-entry poses: rise 2rem + fade, one grammar everywhere ── */
.hp.has-motion .hp-scene .hp-scene__header[b-obwmgg7avr],
.hp.has-motion .hp-scene .hp-card[b-obwmgg7avr],
.hp.has-motion .hp-scene .hp-tile[b-obwmgg7avr],
.hp.has-motion .hp-scene .hp-play[b-obwmgg7avr],
.hp.has-motion .hp-scene .hp-studio[b-obwmgg7avr],
.hp.has-motion .hp-scene .hp-scene__ctarow[b-obwmgg7avr],
.hp.has-motion .hp-scene .hp-security__note[b-obwmgg7avr],
.hp.has-motion .hp-close .hp-shell[b-obwmgg7avr] {
    opacity: 0;
    transform: translateY(2rem);
    /* Entrance clocks plus the hover-light clocks, so pointer feedback
       stays smooth once a scene is at rest. */
    transition: opacity 0.7s var(--lp-ease-enter), transform 0.7s var(--lp-ease-enter),
                border-color var(--lp-motion-base) ease, background var(--lp-motion-base) ease,
                filter var(--lp-motion-base) ease, box-shadow var(--lp-motion-base) ease;
}

.hp.has-motion .hp-scene.active .hp-scene__header[b-obwmgg7avr],
.hp.has-motion .hp-scene.active .hp-card[b-obwmgg7avr],
.hp.has-motion .hp-scene.active .hp-tile[b-obwmgg7avr],
.hp.has-motion .hp-scene.active .hp-play[b-obwmgg7avr],
.hp.has-motion .hp-scene.active .hp-studio[b-obwmgg7avr],
.hp.has-motion .hp-scene.active .hp-scene__ctarow[b-obwmgg7avr],
.hp.has-motion .hp-scene.active .hp-security__note[b-obwmgg7avr],
.hp.has-motion .hp-close.active .hp-shell[b-obwmgg7avr] {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger: header first, then items left to right. */
.hp.has-motion .hp-scene.active .hp-card:nth-child(1)[b-obwmgg7avr],
.hp.has-motion .hp-scene.active .hp-tile:nth-child(1)[b-obwmgg7avr] { transition-delay: 0.12s; }
.hp.has-motion .hp-scene.active .hp-card:nth-child(2)[b-obwmgg7avr],
.hp.has-motion .hp-scene.active .hp-tile:nth-child(2)[b-obwmgg7avr] { transition-delay: 0.2s; }
.hp.has-motion .hp-scene.active .hp-card:nth-child(3)[b-obwmgg7avr],
.hp.has-motion .hp-scene.active .hp-tile:nth-child(3)[b-obwmgg7avr] { transition-delay: 0.28s; }
.hp.has-motion .hp-scene.active .hp-card:nth-child(4)[b-obwmgg7avr],
.hp.has-motion .hp-scene.active .hp-tile:nth-child(4)[b-obwmgg7avr] { transition-delay: 0.36s; }

/* Stagger delays must not lag pointer feedback once a scene is at rest. */
.hp.has-motion .hp-scene.active .hp-card:hover[b-obwmgg7avr],
.hp.has-motion .hp-scene.active .hp-tile:hover[b-obwmgg7avr],
.hp.has-motion .hp-scene.active .hp-play:hover[b-obwmgg7avr] {
    transition-delay: 0s;
}

/* Playground steps slide in from the right after the card lands. */
.hp.has-motion .hp-play__step[b-obwmgg7avr] {
    opacity: 0;
    transform: translateX(1.25rem);
    transition: opacity 0.5s var(--lp-ease-enter), transform 0.5s var(--lp-ease-enter);
}

.hp.has-motion .hp-scene.active .hp-play__step[b-obwmgg7avr] {
    opacity: 1;
    transform: translateX(0);
}

.hp.has-motion .hp-scene.active .hp-play__step:nth-child(1)[b-obwmgg7avr] { transition-delay: 0.3s; }
.hp.has-motion .hp-scene.active .hp-play__step:nth-child(2)[b-obwmgg7avr] { transition-delay: 0.42s; }
.hp.has-motion .hp-scene.active .hp-play__step:nth-child(3)[b-obwmgg7avr] { transition-delay: 0.54s; }
.hp.has-motion .hp-scene.active .hp-play__step:nth-child(4)[b-obwmgg7avr] { transition-delay: 0.66s; }

/* ── Studio performance timeline (T3: runs on .active, resets total on
   removal; every mutation below reverses when the scene leaves) ── */
.hp.has-motion .hp-studio__item[b-obwmgg7avr] {
    opacity: 0;
    transform: translateX(-0.6rem);
    transition: opacity 0.5s var(--lp-ease-enter), transform 0.5s var(--lp-ease-enter);
}

.hp.has-motion .hp-scene.active .hp-studio__item[b-obwmgg7avr] {
    opacity: 1;
    transform: translateX(0);
}

.hp.has-motion .hp-scene.active .hp-studio__item:nth-of-type(1)[b-obwmgg7avr] { transition-delay: 0.35s; }
.hp.has-motion .hp-scene.active .hp-studio__item:nth-of-type(2)[b-obwmgg7avr] { transition-delay: 0.45s; }
.hp.has-motion .hp-scene.active .hp-studio__item:nth-of-type(3)[b-obwmgg7avr] { transition-delay: 0.55s; }
.hp.has-motion .hp-scene.active .hp-studio__item:nth-of-type(4)[b-obwmgg7avr] { transition-delay: 0.65s; }

.hp.has-motion .hp-studio__chip[b-obwmgg7avr] {
    opacity: 0;
}

.hp.has-motion .hp-scene.active .hp-studio__chip[b-obwmgg7avr] {
    animation: hp-pop-b-obwmgg7avr 0.45s var(--lp-ease-spring) both;
}

.hp.has-motion .hp-scene.active .hp-studio__chip:nth-child(1)[b-obwmgg7avr] { animation-delay: 0.7s; }
.hp.has-motion .hp-scene.active .hp-studio__chip:nth-child(2)[b-obwmgg7avr] { animation-delay: 0.82s; }
.hp.has-motion .hp-scene.active .hp-studio__chip:nth-child(3)[b-obwmgg7avr] { animation-delay: 0.94s; }
.hp.has-motion .hp-scene.active .hp-studio__chip:nth-child(4)[b-obwmgg7avr] { animation-delay: 1.06s; }
.hp.has-motion .hp-scene.active .hp-studio__chip:nth-child(5)[b-obwmgg7avr] { animation-delay: 1.18s; }

/* The code types itself: line one under a steps() reveal, the rest land
   after it, and the caret blinks on the closing tag. */
.hp.has-motion .hp-studio__line--1[b-obwmgg7avr] {
    max-width: 0;
    overflow: hidden;
}

.hp.has-motion .hp-scene.active .hp-studio__line--1[b-obwmgg7avr] {
    animation: hp-type-b-obwmgg7avr 1.1s steps(28, end) 1.35s both;
}

.hp.has-motion .hp-studio__line--2[b-obwmgg7avr],
.hp.has-motion .hp-studio__line--3[b-obwmgg7avr] {
    opacity: 0;
    transform: translateY(0.4rem);
    transition: opacity 0.45s var(--lp-ease-enter), transform 0.45s var(--lp-ease-enter);
}

.hp.has-motion .hp-scene.active .hp-studio__line--2[b-obwmgg7avr] {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 2.55s;
}

.hp.has-motion .hp-scene.active .hp-studio__line--3[b-obwmgg7avr] {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 2.75s;
}

/* Focus scene entrance (its cards are state-machine styled; only the frame
   rises). */
.hp.has-motion .hp-focus .hp-scene__header[b-obwmgg7avr],
.hp.has-motion .hp-focus .hp-fc__stage[b-obwmgg7avr],
.hp.has-motion .hp-focus .hp-fc__captions[b-obwmgg7avr],
.hp.has-motion .hp-focus .hp-fc__dial[b-obwmgg7avr] {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.7s var(--lp-ease-enter), transform 0.7s var(--lp-ease-enter);
}

.hp.has-motion .hp-focus.active .hp-scene__header[b-obwmgg7avr],
.hp.has-motion .hp-focus.active .hp-fc__stage[b-obwmgg7avr],
.hp.has-motion .hp-focus.active .hp-fc__captions[b-obwmgg7avr],
.hp.has-motion .hp-focus.active .hp-fc__dial[b-obwmgg7avr] {
    opacity: 1;
    transform: translateY(0);
}

.hp.has-motion .hp-focus.active .hp-fc__stage[b-obwmgg7avr] { transition-delay: 0.12s; }
.hp.has-motion .hp-focus.active .hp-fc__captions[b-obwmgg7avr] { transition-delay: 0.22s; }
.hp.has-motion .hp-focus.active .hp-fc__dial[b-obwmgg7avr] { transition-delay: 0.3s; }

/* Orbit entrance. */
.hp.has-motion .hp-orbit__header[b-obwmgg7avr] {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.7s var(--lp-ease-enter), transform 0.7s var(--lp-ease-enter);
}

.hp.has-motion .hp-orbit.active .hp-orbit__header[b-obwmgg7avr] {
    opacity: 1;
    transform: translateY(0);
}

.hp.has-motion .hp-orbit__dial[b-obwmgg7avr] {
    opacity: 0;
    transition: opacity 0.9s ease 0.2s;
}

.hp.has-motion .hp-orbit.active .hp-orbit__dial[b-obwmgg7avr] {
    opacity: 1;
}

/* Orbit focus: out-of-focus panels sit back (0.4 opacity, 0.97 scale). */
.hp.has-motion .hp-orbit__panel[b-obwmgg7avr] {
    opacity: 0.4;
    transform: scale(0.97);
}

.hp.has-motion .hp-orbit__panel.active[b-obwmgg7avr] {
    opacity: 1;
    transform: scale(1);
}

/* The hub's lit centre: one restrained iris point with a soft inner glow,
   on both dials, static. Not a bloom. */
/* Lit-centre point removed along with the hub disc. */
.hp-orbit__core[b-obwmgg7avr]::before {
    content: "";
    display: none;
}

/* ══ Advanced-components dial: instrument index ══
   The dial geometry (bezel, read-line, hub, numerals, read-mark) is shared;
   the modules dial keeps the same static instrument. Per the Immersive Design
   Standard, motion here is meaning, not spin: a progress arc that states
   position-in-set, plus a near-imperceptible bezel drift (a material quality,
   a gyroscope settling, never a show). Gated on .has-motion so it stands down
   under reduced motion. */

/* Progress arc: fills from 12 o'clock to the active index, so the instrument
   states plainly how far through the six controls the reader is. A thin iris
   hairline masked to the rim; it steps as the dial indexes. */
.hp.has-motion .hp-show .hp-orbit__core[b-obwmgg7avr]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--dial-outer) - 2.5rem);
    height: calc(var(--dial-outer) - 2.5rem);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: conic-gradient(from -90deg,
        hsla(268, 55%, 74%, 0.92) 0deg,
        hsla(268, 55%, 74%, 0.92) calc(var(--oi) * 50deg + 14deg),
        transparent calc(var(--oi) * 50deg + 14deg) 360deg);
    -webkit-mask: radial-gradient(farthest-side,
        transparent calc(100% - 2px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side,
        transparent calc(100% - 2px), #000 calc(100% - 2px));
    filter: drop-shadow(0 0 3px hsla(268, 60%, 66%, 0.5));
    pointer-events: none;
}

/* Near-imperceptible bezel drift: one slow revolution every four minutes. */
@keyframes hp-orbit-drift-b-obwmgg7avr {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.hp.has-motion .hp-show .hp-orbit__ring--outer[b-obwmgg7avr] {
    animation: hp-orbit-drift-b-obwmgg7avr 240s linear infinite;
}

/* ══ Modules bench: focus choreography ══
   Meaning, not spin: the header and selector arrive; each module's providers
   FAN OPEN out of the interface when its panel takes focus, and collapse back
   into the seam when it leaves; the active stack tilts to the pointer (T1).
   All of it is gated on .has-motion, so reduced motion and JS-off keep the
   composed base pose. The fan + tilt are desktop-only (the 3D read lives at
   >=1121px); on narrower screens the panels are a plain, fully-lit stack. */

.hp.has-motion .hp-bench__header[b-obwmgg7avr] {
    opacity: 0;
    transform: translateY(1.75rem);
    transition: opacity 0.7s var(--lp-ease-enter), transform 0.7s var(--lp-ease-enter);
}
.hp.has-motion .hp-bench.active .hp-bench__header[b-obwmgg7avr] {
    opacity: 1;
    transform: translateY(0);
}

.hp.has-motion .hp-bench__selector-inner[b-obwmgg7avr] {
    opacity: 0;
    transition: opacity 0.7s ease 0.1s;
}
.hp.has-motion .hp-bench.active .hp-bench__selector-inner[b-obwmgg7avr] { opacity: 1; }

@media (min-width: 1121px) {
    /* Out-of-focus panels sit back: their detail dims, the provider slots slide
       back toward the spine and fade, and the routing signal is idle, so exactly
       one seam is ever "live." */
    .hp.has-motion .hp-bench__detail[b-obwmgg7avr] {
        transition: opacity 0.6s ease, transform 0.6s var(--lp-ease-enter);
    }
    .hp.has-motion .hp-bench__panel:not(.active) .hp-bench__detail[b-obwmgg7avr] {
        opacity: 0.35;
        transform: translateY(0.6rem);
    }

    .hp.has-motion .hp-bench__hub[b-obwmgg7avr] { transition: opacity 0.6s ease; }
    .hp.has-motion .hp-bench__panel:not(.active) .hp-bench__hub[b-obwmgg7avr] { opacity: 0.5; }

    /* Providers slot in from the spine on focus, staggered by rank; they slide
       back and fade when the panel is out of focus. The active pose is the
       composed base (translateZ by rank in the min-width block above), so no
       override is needed for the active panel. */
    .hp.has-motion .hp-bench__slot[b-obwmgg7avr] {
        transition: transform 0.6s var(--lp-ease-spring), opacity 0.5s ease;
        transition-delay: calc(var(--d) * 0.07s);
    }
    .hp.has-motion .hp-bench__panel:not(.active) .hp-bench__slot[b-obwmgg7avr] {
        transform: translateX(-2.4rem);
        opacity: 0;
    }

    .hp.has-motion .hp-bench__bus[b-obwmgg7avr]::before,
    .hp.has-motion .hp-bench__bus[b-obwmgg7avr]::after { transition: opacity 0.6s ease; }
    .hp.has-motion .hp-bench__panel:not(.active) .hp-bench__bus[b-obwmgg7avr]::before,
    .hp.has-motion .hp-bench__panel:not(.active) .hp-bench__bus[b-obwmgg7avr]::after { opacity: 0; }

    /* The routing pulse runs only on the focused panel: a request travelling the
       spine to the live provider. Tied to view, not a decorative loop. */
    .hp.has-motion .hp-bench__panel.active .hp-bench__signal[b-obwmgg7avr] {
        animation: hp-bench-route-b-obwmgg7avr 2.6s var(--lp-ease-enter) infinite;
    }

    /* Pointer tilt on the focused schematic only. --tx / --ty (-0.5..0.5) are
       published on .hp-bench by the engine and reset to 0 on pointer leave, so
       the plane settles back to its rest angle. */
    .hp.has-motion .hp-bench__panel.active .hp-bench__stack[b-obwmgg7avr] {
        transition: transform 0.3s ease;
        transform: rotateX(calc(6deg + var(--ty, 0) * -8deg))
                   rotateY(calc(-15deg + var(--tx, 0) * 16deg));
    }
}

/* ── T13 departure grammar: scenes that left through the top dim, so the
   stage is empty before the next act. ── */
.hp.has-motion section[data-scene][b-obwmgg7avr] {
    transition: opacity 0.6s ease, filter 0.6s ease;
}

.hp.has-motion section[data-scene].past[b-obwmgg7avr] {
    opacity: 0.3;
    filter: brightness(0.75);
}

/* ═══ Desktop-only pin and pose geometry (T2/T12/T20: pins and wheel-count
   assumptions make no sense under touch momentum scrolling) ═══ */
@media (min-width: 961px) {
    /* Each flat content scene fills one screen, so the page reads as full-page
       sections and each scroll-snap stop lands exactly one scene (matching the
       Calendar landing's scene rhythm). The pinned runways below already fill
       the screen via their sticky stages; these are the non-pinned scenes.
       min-height (not height) lets a scene grow if its content is taller. */
    .hp-scene[b-obwmgg7avr],
    .hp-close[b-obwmgg7avr] {
        min-height: calc(100vh - var(--hp-header-h));
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* The advanced-components section holds its content in a centered .hp-shell
       (max-width, margin: 0 auto), so the base scene centering above is correct;
       it needs no stretch override. */

    /* The focus carousel fills the screen too, but its stage is a fixed-size
       coverflow of absolutely-positioned cards with no in-flow width, so it
       keeps the default cross-axis stretch (align-items: center would collapse
       the stage to zero width). The stage centers itself via margin: 0 auto. */
    .hp-focus[b-obwmgg7avr] {
        min-height: calc(100vh - var(--hp-header-h));
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Hero runway: the stage pins while the overture (title recede, statement
       grow + fill, hold, departure) scrubs over the runway, then releases, so
       the hero holds as a full screen before advancing. --exit is
       scrollTop / hero.offsetHeight, so the beats auto-scale to this height. */
    .hp.has-motion .hp-hero[b-obwmgg7avr] {
        height: 220vh;
    }
    .hp.has-motion .hp-hero__stage[b-obwmgg7avr] {
        position: sticky;
        top: var(--hp-header-h);
        min-height: 0;
        height: calc(100vh - var(--hp-header-h));
    }

    /* ── Calendar runway: 300vh; pose morph from inset card to full bleed ── */
    .hp.has-motion .hp-cal[b-obwmgg7avr] {
        --p: 0;
        height: 300vh;
    }

    .hp.has-motion .hp-cal__stage[b-obwmgg7avr] {
        position: sticky;
        top: var(--hp-header-h);
        height: calc(100vh - var(--hp-header-h));
        padding: 0;
    }

    .hp.has-motion .hp-cal__media[b-obwmgg7avr] {
        position: absolute;
        inset: 0 0 30% 0;
        height: auto;
        margin: 0;
        align-items: flex-start;
        filter: brightness(calc(0.68 + var(--p) * 0.32));
    }

    /* The rig and vignette rise with the pose: as the frame widens to the
       full-bleed calendar, the house lights come up (T23 lighting cue). */
    .hp.has-motion .hp-cal__rig[b-obwmgg7avr] { opacity: calc(0.12 + var(--p) * 0.88); }
    .hp.has-motion .hp-cal__vignette[b-obwmgg7avr] { opacity: calc(0.35 + var(--p) * 0.65); }

    .hp.has-motion .hp-cal__app[b-obwmgg7avr] {
        width: min(58rem, 68%);
        height: min(30rem, 86%);
        margin-top: 3.5rem;
    }

    .hp.has-motion .hp-cal.pose2 .hp-cal__app[b-obwmgg7avr] {
        width: 100%;
        height: 100%;
        margin-top: 0;
        border-radius: 0;
        border-color: transparent;
        box-shadow: none;
    }

    /* Chips catch the overhead light in pose 2: a stronger top inner-highlight
       and a deeper drop, so events read as objects on a lit stage (T23). */
    .hp.has-motion .hp-cal.pose2 .hp-cal__ev[b-obwmgg7avr] {
        box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c, var(--lp-primary)) 46%, transparent),
                    0 8px 26px hsla(268, 55%, 3%, 0.5);
    }

    /* Booking panel swings in through depth when pose 2 arrives (T16). */
    .hp.has-motion .hp-cal__booking[b-obwmgg7avr] {
        position: absolute;
        top: 12%;
        right: 4%;
        width: 15.5rem;
        margin: 0;
        transform: translateX(130%) rotateY(58deg) translateZ(120px);
        opacity: 0;
    }

    .hp.has-motion .hp-cal.pose2 .hp-cal__booking[b-obwmgg7avr] {
        transform: translateX(0) rotateY(0) translateZ(0);
        opacity: 1;
    }

    /* Caption band: crossfade with counter-drift. */
    .hp.has-motion .hp-cal__band[b-obwmgg7avr] {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 30%;
        padding: 0 24px;
        justify-content: center;
        background: linear-gradient(180deg, transparent, hsl(240, 10%, 5%) 38%);
    }

    .hp.has-motion .hp-cal__captions[b-obwmgg7avr] {
        height: 8.25rem;
    }

    .hp.has-motion .hp-cal__cap[b-obwmgg7avr] {
        position: absolute;
        inset: 0;
    }

    .hp.has-motion .hp-cal__cap--1[b-obwmgg7avr] {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }

    .hp.has-motion .hp-cal.pose2 .hp-cal__cap--1[b-obwmgg7avr] {
        opacity: 0;
        transform: translateY(1rem);
    }

    .hp.has-motion .hp-cal__cap--2[b-obwmgg7avr] {
        opacity: 0;
        transform: translateY(-1rem);
    }

    .hp.has-motion .hp-cal.pose2 .hp-cal__cap--2[b-obwmgg7avr] {
        opacity: 1;
        transform: translateY(0);
    }

    /* ── Stage runway: 340vh; beams and colorway acts scrub with --p ── */
    /* Seven rainbow acts need a longer walk (equal commit bands with dead
       zones, generalized in the engine). */
    .hp.has-motion .hp-stage[b-obwmgg7avr] {
        --p: 0;
        height: 380vh;
    }

    .hp.has-motion .hp-stage__scene[b-obwmgg7avr] {
        position: sticky;
        top: var(--hp-header-h);
        height: calc(100vh - var(--hp-header-h));
        padding-bottom: 0;
    }

    .hp.has-motion .hp-stage__performer[b-obwmgg7avr] {
        flex: 1;
        min-height: 0;
        padding-top: 1.25rem;
    }

    .hp.has-motion .hp-stage__bar[b-obwmgg7avr] {
        margin-bottom: 2rem;
    }

    /* ── Proof runway: 230vh ── */
    .hp.has-motion .hp-pin[b-obwmgg7avr] {
        --p: 0;
        height: 230vh;
    }

    .hp.has-motion .hp-pin__stage[b-obwmgg7avr] {
        position: sticky;
        top: var(--hp-header-h);
        height: calc(100vh - var(--hp-header-h));
        padding: 2rem 24px;
    }
}

/* Rail is a desktop instrument. */
@media (max-width: 1120px) {
    .hp-rail[b-obwmgg7avr] { display: none; }
}

/* ── Responsive ── */

/* The orbit dial is a desktop instrument, like the chapter rail (both retire
   at the same 1120px). Above it the spoke labels have room to clear the rail
   and the panel; below, both orbit scenes collapse the same way: dial hidden,
   panels stack into readable flow. */
@media (max-width: 1120px) {
    .hp-orbit__grid[b-obwmgg7avr] { grid-template-columns: 1fr; }
    .hp-orbit__dial-col[b-obwmgg7avr] { display: none; }
    .hp-orbit__panels[b-obwmgg7avr] { padding: 2rem 24px 3rem; gap: 2.5rem; }
    .hp-orbit__panel[b-obwmgg7avr] { min-height: 0; }
    .hp.has-motion .hp-orbit__panel[b-obwmgg7avr] { opacity: 1; transform: none; }

    /* The control mock narrows with the panel so it never forces overflow. */
    .hp-show__mock[b-obwmgg7avr] { max-width: none; }
}

@media (max-width: 960px) {
    .hp-hero__props[b-obwmgg7avr] { display: none; }
}

@media (max-width: 768px) {
    .hp-header__nav[b-obwmgg7avr] { display: none; }
    .hp-header__inner[b-obwmgg7avr] { padding: 0 20px; gap: 16px; }

    .hp-scene[b-obwmgg7avr] { padding: 4rem 0; }
    .hp-hero[b-obwmgg7avr] { padding: 3rem 20px 4rem; }

    .hp-play[b-obwmgg7avr] { flex-direction: column; gap: 1.5rem; padding: 32px 24px; }
    .hp-play__steps[b-obwmgg7avr] { flex-direction: row; flex-wrap: wrap; gap: 0.75rem; }

    .hp-studio__body[b-obwmgg7avr] { grid-template-columns: 1fr; }
    .hp-studio__side[b-obwmgg7avr] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        border-right: none;
        border-bottom: 1px solid var(--lp-border);
        padding: 14px 16px;
    }
    .hp-studio__sidehead[b-obwmgg7avr] { width: 100%; text-align: left; margin: 0 0 2px; }
    .hp-studio__code[b-obwmgg7avr] { width: 100%; min-width: 0; }

    .hp-cards--three[b-obwmgg7avr], .hp-cards--four[b-obwmgg7avr], .hp-tiles[b-obwmgg7avr] { grid-template-columns: 1fr; }

    .hp-show__mock[b-obwmgg7avr] { height: 12.5rem; }

    .hp-stats[b-obwmgg7avr] { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .hp-pin__billboard[b-obwmgg7avr] { font-size: 9rem; }

    .hp-cal__media[b-obwmgg7avr] { height: 18rem; }
    .hp-cal__ev[b-obwmgg7avr] { font-size: 0.56rem; padding: 0.2rem 0.3rem; }

    .hp-stage__rig[b-obwmgg7avr] { display: none; }
    .hp-stage__floor[b-obwmgg7avr] { opacity: 0.6; }
    .hp-stage__appbody[b-obwmgg7avr] { grid-template-columns: 1fr; }
    .hp-stage__bar[b-obwmgg7avr] {
        flex-direction: column;
        gap: 0.9rem;
        margin: 1.5rem 20px 0;
        padding: 1rem;
        border-radius: var(--lp-radius-lg);
    }
    .hp-stage__names[b-obwmgg7avr] { min-width: 0; width: 100%; height: 3.9rem; text-align: center; }

    .hp-focus[b-obwmgg7avr] { padding: 4rem 20px; }
    .hp-fc__stage[b-obwmgg7avr] { height: 22rem; }
    .hp-fc__card[b-obwmgg7avr] { width: 15.5rem; height: 20rem; margin: -10rem 0 0 -7.75rem; }
    /* Only the center card on small screens; tapping it advances. The wings
       leave layout entirely: their translated boxes would otherwise extend
       the page's horizontal scrollable overflow. */
    .hp-fc__card.is-left[b-obwmgg7avr],
    .hp-fc__card.is-right[b-obwmgg7avr],
    .hp-fc__card.is-left2[b-obwmgg7avr],
    .hp-fc__card.is-right2[b-obwmgg7avr] { display: none; }
    .hp-fc__captions[b-obwmgg7avr] { height: 8.5rem; }

    .hp-footer__links[b-obwmgg7avr] { grid-template-columns: 1fr; gap: 24px; }

    /* Bench: tighter header + selector; the wired schematic reads flat (the 3D
       lives >=1121px) and scales down so the hub, spine, and provider rack all
       stay legible on a phone. */
    .hp-bench__header[b-obwmgg7avr] { padding: 3.5rem 20px 1rem; }
    .hp-bench__selector[b-obwmgg7avr] { padding: 0.6rem 16px; }
    .hp-bench__track[b-obwmgg7avr] { padding: 0 20px; }
    .hp-bench__panel[b-obwmgg7avr] { padding: 2.25rem 0; }
    .hp-bench__panel-inner[b-obwmgg7avr] { gap: 1.5rem; }
    .hp-bench__stage[b-obwmgg7avr] { height: 17rem; }
    .hp-bench__stack[b-obwmgg7avr] { transform: scale(0.82); }
    .hp-bench__hub[b-obwmgg7avr] { width: 12.5rem; }
    .hp-bench__hub-name[b-obwmgg7avr] { font-size: 0.72rem; white-space: normal; word-break: break-word; }
    .hp-bench__bus[b-obwmgg7avr] { width: 2.6rem; }
    .hp-bench__slot[b-obwmgg7avr] { min-width: 7rem; }
}

/* ── Keyframes (entrance only; scroll motion is class/property driven) ── */

@keyframes hp-rise-b-obwmgg7avr {
    from { opacity: 0; transform: translateY(1.5rem); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes hp-fade-in-b-obwmgg7avr {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes hp-drift-b-obwmgg7avr {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(2.5rem, -1.75rem, 0) scale(1.06); }
}

@keyframes hp-cue-b-obwmgg7avr {
    0%   { transform: translateY(0); opacity: 1; }
    60%  { transform: translateY(14px); opacity: 0; }
    61%  { transform: translateY(0); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes hp-caret-b-obwmgg7avr {
    50% { opacity: 0; }
}

@keyframes hp-pop-b-obwmgg7avr {
    from { opacity: 0; transform: translateY(0.5rem) scale(0.7); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Modules bench: the routing pulse leaves the hub link (spine centre) and
   travels up to the live provider, then repeats. A request routing through the
   one interface, not a decorative loop. */
@keyframes hp-bench-route-b-obwmgg7avr {
    0%   { top: 50%; opacity: 0; }
    18%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { top: 24%; opacity: 0; }
}

@keyframes hp-type-b-obwmgg7avr {
    from { max-width: 0; }
    to   { max-width: 28ch; }
}

/* Lands exactly on the cue's resting opacity (0.9 at exit 0), so the
   backwards fill hands off without a step. */
@keyframes hp-cue-fade-b-obwmgg7avr {
    from { opacity: 0; }
    to   { opacity: 0.9; }
}

/* Idle float for the hero props: two shapes, assigned with differing
   periods, phases, and directions per card. */
@keyframes hp-prop-float-b-obwmgg7avr {
    from { transform: translate3d(0, -0.3rem, 0); }
    to   { transform: translate3d(0, 0.4rem, 0); }
}

@keyframes hp-prop-drift-b-obwmgg7avr {
    from { transform: translate3d(-0.2rem, 0.3rem, 0); }
    to   { transform: translate3d(0.25rem, -0.35rem, 0); }
}

/* The calendar demo's ambient colorway cycle: one trip around the hue wheel,
   shared by the app mock and the dawn light. The cycle STARTS on and DWELLS
   on the Alectrone iris pose (hue 0): it holds hue 0 for the first 1/8 of the
   loop, then sweeps 0->360 over the remaining 7/8. Because the loop boundary
   (360deg) is visually iris again, that hold merges with the wheel crossing
   back through iris, so the iris pose reads for ~2x as long as any other
   colour before the trip resumes. */
@keyframes hp-cal-rainbow-b-obwmgg7avr {
    0%, 12.5% { filter: hue-rotate(0deg) saturate(1.55) brightness(1.12); }
    100%      { filter: hue-rotate(360deg) saturate(1.55) brightness(1.12); }
}

/* Overhead beams cycle hue in step with the calendar's colorway (same iris
   start + double dwell). Blur is folded into every keyframe so animating the
   filter never drops it; reduced motion stills the animation and the static
   blur on .hp-cal__beam holds the beam at its iris pose. */
@keyframes hp-cal-beam-b-obwmgg7avr {
    0%, 12.5% { filter: blur(34px) hue-rotate(0deg) saturate(1.4); }
    100%      { filter: blur(34px) hue-rotate(360deg) saturate(1.4); }
}

/* ═══ Reduced motion: final poses, no pinning, no animation (handbook §7).
   The engine also adds .is-reduced and never adds .has-motion, so the
   composed base styles above already apply; this block holds even if the
   engine misbehaves, and keeps the shelf a plain native scroller. ═══ */
@media (prefers-reduced-motion: reduce) {
    .hp[b-obwmgg7avr] { scroll-behavior: auto; scroll-snap-type: none; }

    .hp *[b-obwmgg7avr],
    .hp *[b-obwmgg7avr]::before,
    .hp *[b-obwmgg7avr]::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }

    .hp-hero__e1[b-obwmgg7avr], .hp-hero__e2[b-obwmgg7avr], .hp-hero__e3[b-obwmgg7avr], .hp-hero__e4[b-obwmgg7avr], .hp-hero__e5[b-obwmgg7avr],
    .hp-aurora[b-obwmgg7avr]::before,
    .hp-hero__gridsheet[b-obwmgg7avr],
    .hp-prop[b-obwmgg7avr] {
        opacity: 1;
    }

    .hp-hero[b-obwmgg7avr] { --exit: 0 !important; --sg: 1 !important; --st: 1 !important; }
    .hp-cal[b-obwmgg7avr] { --p: 1 !important; height: auto !important; }
    .hp-stage[b-obwmgg7avr] { --p: 1 !important; height: auto !important; }
    .hp-pin[b-obwmgg7avr] { --p: 1 !important; height: auto !important; }
}

/* Belt and braces for the JS-detected case (class set by the engine when
   the media query is bypassed): identical stand-down. */
.hp.is-reduced[b-obwmgg7avr] { scroll-snap-type: none; }
.hp.is-reduced .hp-hero[b-obwmgg7avr] { --exit: 0; --sg: 1; --st: 1; }
.hp.is-reduced .hp-cal[b-obwmgg7avr] { --p: 1; height: auto; }
.hp.is-reduced .hp-stage[b-obwmgg7avr] { --p: 1; height: auto; }
.hp.is-reduced .hp-pin[b-obwmgg7avr] { --p: 1; height: auto; }

/* ═══════════════════════════════════════════════════════════════════════
   DEMO-ONLY ADDITIONS

   Everything above this line is the production AppHomepage.razor.css,
   unchanged. These rules exist only because this standalone build drops the
   sign-in / sign-up chrome and the app-shell activity launchers, so a few
   elements change role: an anchor becomes a description card, a launcher
   button becomes an informational tile.
   ═══════════════════════════════════════════════════════════════════════ */

/* The nav takes the trailing slot the auth actions used to hold. Same
   margin-left:auto the .hp-header__actions rule carried, so the brand keeps
   the left edge and the chapter links keep the right. */
.hp-header__nav--end[b-obwmgg7avr] {
    margin-left: auto;
}

/* Non-interactive variants: no pointer affordance, no hover light. Written as
   compound selectors so they beat the base .hp-play / .hp-tile rules and the
   .has-motion hover rules regardless of declaration order. */
.hp-play.hp-play--static[b-obwmgg7avr],
.hp-tile.hp-tile--static[b-obwmgg7avr] {
    cursor: default;
}

.hp-play.hp-play--static:hover[b-obwmgg7avr] {
    border-color: color-mix(in srgb, #22c55e 32%, var(--lp-border));
    background: var(--lp-bg-card);
    filter: none;
    box-shadow: none;
}

.hp-tile.hp-tile--static:hover[b-obwmgg7avr] {
    border-color: var(--lp-border);
    background: var(--lp-bg-card);
    filter: none;
    box-shadow: none;
}

/* Scene reorder seam: the modules bench now runs directly into the Build
   scene, and the two grounds are the SAME colour (.hp-bench is hsl(240,9%,5%),
   .hp-scene--build is var(--lp-bg-deep), which resolves to hsl(240,9%,5%)).
   The bench carries no border of its own; in the original order its neighbour
   was .hp-cal, which supplied the hairline from its own border-top. Without
   this the two sections read as one continuous field. Every other ground
   change on the page is delineated the same way. */
.hp-bench[b-obwmgg7avr] {
    border-bottom: 1px solid var(--lp-border);
}

/* The third footer column states what this build is instead of linking to
   account pages that do not exist here. Same metrics as the anchors above so
   the three columns stay optically identical. */
.hp-footer__note[b-obwmgg7avr] {
    display: block;
    color: var(--lp-text-muted);
    font-size: 0.88rem;
    padding: 4px 0;
}