/**
 * Horizon Pulse — Mini Link / creator operating surface (presentation only).
 * Mobile-first, dark-premium baseline. Pairs with [hp_creator_hero], [hp_creator_visual], [hp_creator_commerce], [hp_creator_links], [hp_creator_event], [hp_creator_subscribe], [hp_pulse_feed].
 */

/* -------------------------------------------------------------------------
   Canvas & shared tokens
------------------------------------------------------------------------- */

.hp-mini-link-canvas {
    /* P4a–P4e — enclosure + cohesion richness (deterministic; presentation only) */
    --hp-surface-bg: #070709;
    --hp-surface-text: rgba(255, 255, 255, 0.882);
    --hp-surface-muted: rgba(255, 255, 255, 0.442);
    --hp-surface-edge: rgba(255, 255, 255, 0.0434);
    /* Brand tokens: set on .hp-mini-link-surface-shell (inline + fallbacks). Do not re-pin here or shell values won't inherit. */
    --hp-surface-accent: var(--hp-mini-link-accent, #5b8cff);
    --hp-surface-accent-soft: color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 22.8%, transparent);
    --hp-surface-radius-lg: 1.32rem;
    --hp-surface-radius-md: 1rem;
    /* Mobile: use full parent column — immersive, less “card in a card” */
    --hp-surface-safe-width: 100%;
    /* P3h–P4e — vertical cadence as one cohesive column */
    --hp-creator-feed-row-gap: 1.378rem;
    --hp-atmosphere-ceiling-glow: rgba(91, 140, 255, 0.029);
    --hp-atmosphere-floor-glow: rgba(91, 140, 255, 0.0208);
    --hp-bridge-edge-soft: rgba(255, 255, 255, 0.0208);
    --hp-section-gap-major: clamp(0.952rem, 2.52vw, 1.274rem);
    --hp-section-gap-secondary: clamp(0.874rem, 2.26vw, 1.138rem);
    --hp-motion-fast: 0.15s;
    --hp-motion-base: 0.28s;
    --hp-ease-soft: cubic-bezier(0.33, 1, 0.32, 1);
    --hp-ease-press: cubic-bezier(0.2, 0, 0, 1);
    /* P3c–P4e — emphasis tuned to coexistence cohesion (ambient only) */
    --hp-creator-emphasis-current: rgba(91, 140, 255, 0.218);
    --hp-creator-emphasis-current-fill: rgba(91, 140, 255, 0.041);
    --hp-creator-emphasis-rhythm: rgba(255, 255, 255, 0.068);
    --hp-creator-emphasis-rhythm-fill: rgba(255, 255, 255, 0.0196);
    /* P4.4.0B — supporting card surface (Creator Space baseline) */
    --hp-supporting-card-radius: clamp(0.98rem, 3vw, 1.22rem);
    --hp-supporting-card-border: rgba(255, 255, 255, 0.072);
    --hp-supporting-card-bg: linear-gradient(
        172deg,
        rgba(255, 255, 255, 0.052) 0%,
        rgba(255, 255, 255, 0.022) 46%,
        rgba(6, 6, 10, 0.26) 100%
    );
    --hp-supporting-card-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.052),
        0 10px 32px rgba(0, 0, 0, 0.16),
        0 0 48px color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 5%, transparent);
    --hp-supporting-card-hover-border: color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 28%, rgba(255, 255, 255, 0.12));
    --hp-supporting-card-hover-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.058),
        0 14px 38px rgba(0, 0, 0, 0.2),
        0 0 56px color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 10%, transparent);
    --hp-supporting-card-hover-lift: -2px;
    --hp-event-cta-radius: clamp(0.88rem, 2.5vw, 0.96rem);
    /* P4.4.0B-R3 — header-to-body transition divider (footer-adjacent language) */
    --hp-header-body-divider-width: min(100%, 14.75rem);
    --hp-header-body-divider-core: var(--hp-surface-edge, rgba(255, 255, 255, 0.0434));
    --hp-header-body-divider-accent: color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 14%, var(--hp-header-body-divider-core));
    --hp-header-body-divider-opacity: 0.72;
    --hp-header-body-divider-gap-above: clamp(0.48rem, 1.85vw, 0.74rem);
    --hp-header-body-divider-gap-below: clamp(0.42rem, 1.55vw, 0.68rem);

    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--hp-surface-safe-width);
    min-width: 0;
    margin-inline: auto;
    margin-block-start: 0;
    padding-inline: clamp(0.62rem, 3.35vw, 0.9rem);
    /* hidden+visible can resolve y as auto (nested scroll); clip contains x without that. */
    overflow-x: clip;
    overflow-y: visible;
    padding-block: clamp(1.05rem, 3.55vw, 1.58rem) 2.1rem;
    color: var(--hp-surface-text);
    background:
        radial-gradient(
            ellipse 118% 88% at 50% 18%,
            rgba(91, 140, 255, 0.028) 0%,
            transparent 52%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.02) 0%,
            transparent 40%,
            rgba(0, 0, 0, 0.12) 100%
        ),
        var(--hp-surface-bg);
    border-radius: 0;
    border: none;
    box-shadow: none;
}

@media (min-width: 680px) {
    .hp-mini-link-canvas {
        width: 100%;
        margin-inline: auto;
        margin-block-start: clamp(0.62rem, 1.35vh, 1.35rem);
        --hp-surface-safe-width: min(100%, 28rem);
        padding-inline: clamp(0.968rem, 4.92vw, 1.342rem);
        padding-block: clamp(1.38rem, 4.42vw, 2.068rem) 2.812rem;
        background:
            radial-gradient(
                ellipse 118% 100% at 50% 50%,
                transparent 68%,
                rgba(0, 0, 0, 0.06) 100%
            ),
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.018) 0%,
                transparent 36%,
                transparent 72%,
                rgba(0, 0, 0, 0.14) 100%
            ),
            var(--hp-surface-bg);
        border-radius: var(--hp-surface-radius-lg);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow:
            0 22px 64px rgba(0, 0, 0, 0.4),
            0 0 0 1px rgba(255, 255, 255, 0.084),
            inset 0 1px 0 rgba(255, 255, 255, 0.064);
    }
}

@media (min-width: 820px) {
    .hp-mini-link-canvas {
        --hp-surface-safe-width: min(100%, 30.5rem);
    }
}

@media (min-width: 1024px) {
    .hp-mini-link-canvas {
        --hp-surface-safe-width: min(100%, 33rem);
    }
}

/* -------------------------------------------------------------------------
   Mini Link surface shell — outer wrapper for viewport ambient (desktop)
------------------------------------------------------------------------- */

.hp-mini-link-surface-shell {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: clip;
    --hp-mini-link-accent: #5b8cff;
    --hp-mini-link-accent-hover: #4d6ef0;
    --hp-mini-link-standard-hover: #ffffff;
    --hp-mini-link-feed-button: #5b8cff;
}

.hp-mini-link-surface-shell + .hp-mini-link-surface-shell {
    margin-top: clamp(0.836rem, 2.06vw, 1.068rem);
}

@media (max-width: 679px) {
    .hp-mini-link-surface-shell {
        overflow-x: clip;
    }
}

@media (min-width: 680px) {
    .hp-mini-link-surface-shell {
        isolation: isolate;
        padding: clamp(0.28rem, 0.9vw, 0.58rem);
        border-radius: calc(var(--hp-surface-radius-lg, 1.32rem) + 0.42rem);
        background: radial-gradient(
            ellipse 118% 98% at 50% 40%,
            rgba(255, 255, 255, 0.034) 0%,
            rgba(255, 255, 255, 0.012) 44%,
            transparent 70%
        );
    }

    .hp-mini-link-surface-shell::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient(
            ellipse 120% 104% at 50% 42%,
            rgba(255, 255, 255, 0.022) 0%,
            rgba(255, 255, 255, 0.008) 38%,
            transparent 66%
        );
        pointer-events: none;
        z-index: 0;
    }

    .hp-mini-link-surface-shell .hp-mini-link-canvas {
        position: relative;
        z-index: 1;
    }
}

.hp-mini-link-canvas::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        ellipse 125% 70% at 50% -12%,
        var(--hp-atmosphere-ceiling-glow, rgba(91, 140, 255, 0.075)) 0%,
        transparent 62%
    );
    opacity: 0.548;
}

.hp-mini-link-canvas::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    height: min(40%, 18rem);
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        ellipse 80% 70% at 50% 100%,
        var(--hp-atmosphere-floor-glow, rgba(91, 140, 255, 0.048)) 0%,
        transparent 64%
    );
    opacity: 0.504;
}

/* Mobile: keep floor glow inside canvas; image-led disables ::after (glow can still ghost scroll height). */
@media (max-width: 679px) {
    .hp-mini-link-canvas::after {
        height: min(24%, 10rem);
        opacity: 0.36;
    }

    .hp-mini-link-canvas:has(.hp-creator-hero.hp-creator-hero--image-led)::after {
        content: none;
    }
}

.hp-mini-link-canvas > * {
    position: relative;
    z-index: 1;
    min-width: 0;
    max-width: 100%;
}

.hp-mini-link-canvas + .hp-mini-link-canvas {
    margin-top: clamp(0.836rem, 2.06vw, 1.068rem);
}

.hp-mini-link-canvas *,
.hp-mini-link-canvas *::before,
.hp-mini-link-canvas *::after {
    box-sizing: border-box;
}

/* Horizontal containment: flex row children + long domains/titles (mobile pan drift) */
.hp-mini-link-canvas .hp-creator-hero__inner {
    min-width: 0;
    max-width: 100%;
}

.hp-mini-link-canvas .hp-creator-hero__name,
.hp-mini-link-canvas .hp-creator-hero__tagline,
.hp-mini-link-canvas .hp-creator-hero__arrival-trust,
.hp-mini-link-canvas .hp-creator-visual__name,
.hp-mini-link-canvas .hp-creator-visual__copy,
.hp-mini-link-canvas .hp-creator-event__headline,
.hp-mini-link-canvas .hp-creator-event__meta {
    overflow-wrap: anywhere;
    word-break: normal;
    max-width: 100%;
}

.hp-mini-link-canvas .hp-feed-title,
.hp-mini-link-canvas .hp-feed-desc,
.hp-mini-link-canvas .hp-feed-time {
    overflow-wrap: anywhere;
    word-break: normal;
    max-width: 100%;
}

.hp-mini-link-canvas .hp-feed-header__row {
    min-width: 0;
}

.hp-mini-link-canvas .hp-creator-visual__card {
    max-width: 100%;
}

.hp-creator-surface-theme-light.hp-mini-link-canvas,
.hp-creator-hero.hp-creator-surface-theme-light,
.hp-creator-link-stack.hp-creator-surface-theme-light {
    --hp-surface-bg: #f1f3f9;
    --hp-surface-text: #0f1014;
    --hp-surface-muted: rgba(15, 16, 20, 0.568);
    --hp-surface-edge: rgba(15, 16, 20, 0.078);
    --hp-surface-accent-soft: rgba(47, 111, 232, 0.158);
}

/* P4d–P4e — light canvas: mobile immersive (demoted frame) */
.hp-creator-surface-theme-light.hp-mini-link-canvas {
    --hp-atmosphere-ceiling-glow: rgba(47, 111, 232, 0.0264);
    --hp-atmosphere-floor-glow: rgba(47, 111, 232, 0.0178);
    --hp-bridge-edge-soft: rgba(15, 16, 20, 0.041);
    --hp-supporting-card-border: rgba(15, 16, 20, 0.078);
    --hp-supporting-card-bg: linear-gradient(
        172deg,
        rgba(255, 255, 255, 0.99) 0%,
        rgba(247, 248, 252, 0.94) 54%,
        rgba(241, 243, 249, 0.88) 100%
    );
    --hp-supporting-card-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 8px 28px rgba(15, 16, 20, 0.062),
        0 0 42px color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 4%, transparent);
    --hp-supporting-card-hover-border: color-mix(in srgb, var(--hp-mini-link-accent, #2f6fe8) 24%, rgba(15, 16, 20, 0.1));
    --hp-supporting-card-hover-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 12px 32px rgba(15, 16, 20, 0.08),
        0 0 48px color-mix(in srgb, var(--hp-mini-link-accent, #2f6fe8) 8%, transparent);
    --hp-header-body-divider-core: rgba(15, 16, 20, 0.078);
    --hp-header-body-divider-accent: color-mix(in srgb, var(--hp-mini-link-accent, #2f6fe8) 10%, var(--hp-header-body-divider-core));
    --hp-header-body-divider-opacity: 0.64;
    background:
        radial-gradient(
            ellipse 122% 92% at 50% 12%,
            rgba(47, 111, 232, 0.05) 0%,
            transparent 55%
        ),
        linear-gradient(
            188deg,
            rgba(255, 255, 255, 0.992) 0%,
            rgba(245, 246, 252, 0.99) 55%,
            var(--hp-surface-bg) 100%
        );
    box-shadow: none;
    border: none;
    border-radius: 0;
}

@media (min-width: 680px) {
    /* P4d–P4e — cohesive light canvas (framed / desktop-tablet) */
    .hp-creator-surface-theme-light.hp-mini-link-canvas {
        background:
            radial-gradient(
                ellipse 122% 100% at 51% 50%,
                transparent 66%,
                rgba(229, 231, 241, 0.72) 100%
            ),
            radial-gradient(ellipse 142% 98% at 53% 50%, rgba(47, 111, 232, 0.05) 0%, transparent 57%),
            radial-gradient(ellipse 134% 90% at 52% 60%, rgba(47, 111, 232, 0.048) 0%, transparent 56%),
            radial-gradient(ellipse 130% 84% at 52% 42%, rgba(47, 111, 232, 0.064) 0%, transparent 58%),
            linear-gradient(
                188deg,
                rgba(255, 255, 255, 0.997) 0%,
                rgba(245, 246, 252, 0.99) 50%,
                rgba(236, 237, 244, 0.996) 100%
            ),
            var(--hp-surface-bg);
        box-shadow:
            0 6px 30px rgba(15, 16, 20, 0.034),
            inset 0 1px 0 rgba(255, 255, 255, 0.97),
            inset 1px 0 18px rgba(15, 16, 20, 0.028),
            inset -1px 0 18px rgba(15, 16, 20, 0.028),
            inset 0 -40% 100px -56px rgba(47, 111, 232, 0.058),
            inset 0 64% 118px -28px rgba(15, 16, 20, 0.038);
        /* border-radius + border inherited from .hp-mini-link-canvas @680 */
    }
}

/* Desktop: blurred hero-derived atmosphere fills viewport behind centered card (shell-level; not card-bound). */
@media (min-width: 680px) {
    .hp-mini-link-surface-shell[data-hp-hero-ambient="1"]::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image:
            linear-gradient(
                180deg,
                rgba(11, 11, 15, 0.32) 0%,
                rgba(11, 11, 15, 0.52) 38%,
                rgba(11, 11, 15, 0.68) 100%
            ),
            var(--hp-hero-ambient-url);
        background-size: cover, cover;
        background-position: center 18%, center center;
        background-repeat: no-repeat;
        opacity: 0.92;
        filter: blur(46px) brightness(0.52) saturate(1.06);
        transform: scale(1.04);
        transform-origin: center center;
    }

    .hp-mini-link-surface-shell--theme-light.hp-mini-link-surface-shell[data-hp-hero-ambient="1"]::before {
        background-image:
            linear-gradient(
                188deg,
                rgba(255, 255, 255, 0.5) 0%,
                rgba(241, 243, 249, 0.72) 45%,
                rgba(230, 232, 242, 0.88) 100%
            ),
            var(--hp-hero-ambient-url);
        filter: blur(44px) brightness(0.78) saturate(1.04);
        opacity: 0.88;
    }

    .hp-mini-link-surface-shell[data-hp-hero-ambient="1"] .hp-mini-link-canvas.hp-creator-surface-theme-dark {
        background: rgba(11, 11, 15, 0.42);
    }

    .hp-mini-link-surface-shell[data-hp-hero-ambient="1"] .hp-mini-link-canvas.hp-creator-surface-theme-light {
        background: rgba(241, 243, 249, 0.5);
    }

    .hp-mini-link-surface-shell[data-hp-hero-ambient="1"] .hp-mini-link-canvas {
        position: relative;
        z-index: 1;
    }
}

/*
 * Mobile (image-led only): shell carries --hp-hero-ambient-url + data-hp-hero-ambient.
 * Desktop ambient lived only in @media (min-width: 680px), so mobile never painted hero tint.
 * Here: absolute layer inside shell (no document scroll extension), weaker blur/veil than desktop.
 */
@media (max-width: 679px) {
    .hp-mini-link-surface-shell[data-hp-hero-ambient="1"]::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        /*
         * Veil must stay light enough that the hero layer reads as environmental hue.
         * Previous 0.84–0.93 rgba killed colour on the image stack (read as black UI).
         */
        background-image:
            linear-gradient(
                180deg,
                rgba(11, 11, 15, 0.28) 0%,
                rgba(11, 11, 15, 0.42) 45%,
                rgba(11, 11, 15, 0.54) 100%
            ),
            var(--hp-hero-ambient-url);
        background-size: cover, cover;
        background-position: center 10%, center center;
        background-repeat: no-repeat;
        opacity: 0.72;
        filter: blur(44px) brightness(0.58) saturate(1.12);
        transform: scale(1.05);
        transform-origin: center center;
    }

    .hp-mini-link-surface-shell--theme-light.hp-mini-link-surface-shell[data-hp-hero-ambient="1"]::before {
        background-image:
            linear-gradient(
                188deg,
                rgba(241, 243, 249, 0.65) 0%,
                rgba(241, 243, 249, 0.76) 48%,
                rgba(230, 232, 242, 0.86) 100%
            ),
            var(--hp-hero-ambient-url);
        filter: blur(40px) brightness(0.8) saturate(1.08);
        opacity: 0.62;
    }

    .hp-mini-link-surface-shell[data-hp-hero-ambient="1"] .hp-mini-link-canvas {
        position: relative;
        z-index: 1;
    }

    /* Let shell ambient read through — cards/panels keep their own opaque surfaces. */
    .hp-mini-link-surface-shell[data-hp-hero-ambient="1"] .hp-mini-link-canvas.hp-creator-surface-theme-dark {
        background:
            radial-gradient(
                ellipse 118% 88% at 50% 18%,
                rgba(91, 140, 255, 0.028) 0%,
                transparent 52%
            ),
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.02) 0%,
                transparent 42%,
                rgba(0, 0, 0, 0.05) 100%
            ),
            rgba(11, 11, 15, 0.38);
    }

    .hp-mini-link-surface-shell[data-hp-hero-ambient="1"] .hp-mini-link-canvas.hp-creator-surface-theme-light {
        background:
            radial-gradient(
                ellipse 122% 92% at 50% 12%,
                rgba(47, 111, 232, 0.045) 0%,
                transparent 55%
            ),
            linear-gradient(
                188deg,
                rgba(255, 255, 255, 0.72) 0%,
                rgba(245, 246, 252, 0.62) 55%,
                rgba(241, 243, 249, 0.52) 100%
            );
    }
}

/* -------------------------------------------------------------------------
   Creator hero / identity shell
------------------------------------------------------------------------- */

.hp-creator-hero {
    position: relative;
    margin-block-end: clamp(1.5rem, 5vw, 2.25rem);
    padding-block: clamp(1.5rem, 5vw, 2.5rem) 0.25rem;
    padding-inline: clamp(1rem, 5vw, 1.35rem);
    text-align: center;
    color: var(--hp-surface-text, rgba(255, 255, 255, 0.92));
}

.hp-mini-link-canvas .hp-creator-hero {
    padding-inline: 0;
}

/* P3m — identity resting descent */
.hp-mini-link-canvas > .hp-creator-hero.hp-creator-section--identity {
    margin-block-end: clamp(1.02rem, 3.72vw, 1.74rem);
    padding-block: clamp(1.22rem, 4.2vw, 1.92rem) clamp(0.42rem, 2.1vw, 0.92rem);
}

/* P3h — identity settling veil (deterministic grounding; bounded canvas-first hero only) */
.hp-mini-link-canvas > .hp-creator-hero.hp-creator-section--identity::before {
    content: "";
    position: absolute;
    top: clamp(16%, 4.5vw, 26%);
    left: 0;
    right: 0;
    bottom: auto;
    height: clamp(9.35rem, 49vw, 12.35rem);
    width: min(100%, 17.75rem);
    margin-inline: auto;
    max-width: 17.75rem;
    border-radius: 50%;
    background:
        radial-gradient(
            ellipse 70% 62% at 50% 34%,
            rgba(91, 140, 255, 0.0088) 0%,
            transparent 52%
        ),
        radial-gradient(
            ellipse 70% 62% at 50% 34%,
            rgba(255, 255, 255, 0.0132) 0%,
            transparent 76%
        );
    pointer-events: none;
    z-index: 0;
}

.hp-mini-link-canvas > .hp-creator-hero.hp-creator-section--identity .hp-creator-hero__glow {
    z-index: 1;
}

.hp-mini-link-canvas > .hp-creator-hero.hp-creator-section--identity .hp-creator-hero__inner {
    z-index: 2;
}

.hp-creator-surface-theme-light.hp-mini-link-canvas > .hp-creator-hero.hp-creator-section--identity::before {
    background:
        radial-gradient(
            ellipse 70% 62% at 50% 34%,
            rgba(47, 111, 232, 0.0168) 0%,
            transparent 52%
        ),
        radial-gradient(
            ellipse 70% 62% at 50% 34%,
            rgba(47, 111, 232, 0.0288) 0%,
            transparent 76%
        );
    opacity: 0.612;
}
/* P4d — passive axial mooring (slightly narrower glow within enclosure width) */
.hp-mini-link-canvas .hp-creator-hero__glow {
    opacity: 0.368;
    max-width: 14.72rem;
    height: 7.06rem;
    background: radial-gradient(
        ellipse at 50% 34%,
        rgba(91, 140, 255, 0.118) 0%,
        rgba(91, 140, 255, 0.0288) 51%,
        transparent 73%
    );
}

.hp-mini-link-canvas .hp-creator-hero__inner {
    gap: clamp(0.42rem, 2.1vw, 0.62rem);
}

.hp-mini-link-canvas .hp-creator-hero__name {
    font-weight: 720;
    letter-spacing: -0.032em;
    margin-block-start: 0.28rem;
}

.hp-mini-link-canvas .hp-creator-hero__tagline {
    font-size: 0.9625rem;
    line-height: 1.584;
    color: rgba(255, 255, 255, 0.482);
}

.hp-mini-link-canvas .hp-creator-hero__arrival-trust {
    margin: clamp(0.38rem, 2.2vw, 0.78rem) 0 0;
    padding-inline: clamp(0.25rem, 3vw, 0.92rem);
    max-width: 34ch;
    font-size: 0.7825rem;
    font-weight: 540;
    letter-spacing: 0.014em;
    line-height: 1.548;
    text-align: center;
    text-wrap: balance;
    color: rgba(255, 255, 255, 0.502);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-hero__tagline {
    color: rgba(15, 16, 20, 0.596);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-hero__arrival-trust {
    color: rgba(15, 16, 20, 0.528);
}

/* -------------------------------------------------------------------------
   Creator hero — image-led mode (governed attachment only; Mini Link canvas)
------------------------------------------------------------------------- */

.hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led {
    margin-block-end: clamp(0.72rem, 2.6vw, 1.28rem);
    padding-block: clamp(0.35rem, 1.5vw, 0.62rem) 0;
    text-align: center;
}

.hp-mini-link-canvas > .hp-creator-hero.hp-creator-hero--image-led.hp-creator-section--identity::before {
    content: none;
}

.hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__avatar {
    display: none;
}

.hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__media {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
    aspect-ratio: 4 / 5;
    max-height: min(52vh, 24rem);
    overflow: hidden;
    border-radius: clamp(0.62rem, 2.2vw, 0.95rem);
    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.06);
    mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 80%,
        transparent 100%
    );
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 80%,
        transparent 100%
    );
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
}

@media (max-width: 679px) {
    .hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__media {
        width: calc(100% + 2 * clamp(0.62rem, 3.35vw, 0.9rem));
        max-width: none;
        margin-inline: calc(-1 * clamp(0.62rem, 3.35vw, 0.9rem));
        border-radius: clamp(0.26rem, 1.2vw, 0.46rem);
    }
}

.hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__scrim {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 62%;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(11, 11, 15, 0.3) 0%,
        rgba(11, 11, 15, 0.17) 30%,
        rgba(11, 11, 15, 0.05) 55%,
        transparent 84%
    );
}

.hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.28rem, 1.8vw, 0.5rem);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    position: relative;
    z-index: 1;
    margin-block-start: clamp(-1.25rem, -3.9vw, -0.52rem);
    padding-block-start: clamp(0.18rem, 1.35vw, 0.46rem);
    padding-inline: clamp(0.2rem, 2vw, 0.5rem);
    background: linear-gradient(
        180deg,
        rgba(11, 11, 15, 0) 0%,
        rgba(11, 11, 15, 0.15) 42%,
        rgba(11, 11, 15, 0.3) 100%
    );
    border-radius: 0 0 clamp(0.75rem, 2.2vw, 1rem) clamp(0.75rem, 2.2vw, 1rem);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__scrim {
    background: linear-gradient(
        to top,
        rgba(241, 243, 249, 0.34) 0%,
        rgba(241, 243, 249, 0.18) 32%,
        rgba(241, 243, 249, 0.04) 56%,
        transparent 84%
    );
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__copy {
    background: linear-gradient(
        180deg,
        rgba(241, 243, 249, 0) 0%,
        rgba(241, 243, 249, 0.22) 44%,
        rgba(241, 243, 249, 0.36) 100%
    );
}

@media (min-width: 680px) {
    /* Image-led: pull identity flush to card inner top; bleed media to side padding edges (arrival, not inset card). */
    .hp-mini-link-canvas > .hp-creator-hero.hp-creator-section--identity.hp-creator-hero--image-led {
        margin-block-start: calc(-1 * clamp(1.38rem, 4.42vw, 2.068rem));
        padding-block: 0 clamp(0.38rem, 1.35vw, 0.68rem);
    }

    .hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__media {
        width: calc(100% + 2 * clamp(0.968rem, 4.92vw, 1.342rem));
        max-width: none;
        margin-inline: calc(-1 * clamp(0.968rem, 4.92vw, 1.342rem));
        max-height: min(48vh, 26rem);
        border-radius:
            var(--hp-surface-radius-lg, 1.32rem) var(--hp-surface-radius-lg, 1.32rem)
            var(--hp-surface-radius-md, 1rem) var(--hp-surface-radius-md, 1rem);
        box-shadow:
            0 14px 36px rgba(0, 0, 0, 0.14),
            0 0 0 1px rgba(255, 255, 255, 0.038);
        mask-image: linear-gradient(
            to bottom,
            #000 0%,
            #000 80%,
            transparent 100%
        );
        mask-size: 100% 100%;
        mask-repeat: no-repeat;
        -webkit-mask-image: linear-gradient(
            to bottom,
            #000 0%,
            #000 80%,
            transparent 100%
        );
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
    }

    .hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__scrim {
        height: 58%;
        background: linear-gradient(
            to top,
            rgba(11, 11, 15, 0.26) 0%,
            rgba(11, 11, 15, 0.14) 30%,
            rgba(11, 11, 15, 0.04) 54%,
            transparent 86%
        );
    }

    .hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__scrim {
        background: linear-gradient(
            to top,
            rgba(241, 243, 249, 0.48) 0%,
            rgba(241, 243, 249, 0.24) 32%,
            rgba(241, 243, 249, 0.05) 56%,
            transparent 86%
        );
    }

    .hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__copy {
        margin-block-start: clamp(-1.05rem, -2.85vw, -0.48rem);
        padding-block-start: clamp(0.28rem, 1.35vw, 0.48rem);
        padding-block-end: clamp(0.12rem, 0.8vw, 0.28rem);
        padding-inline: clamp(0.28rem, 2.2vw, 0.55rem);
        background: transparent;
        border-radius: 0;
    }

    .hp-creator-surface-theme-dark.hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__copy {
        text-shadow:
            0 1px 2px rgba(0, 0, 0, 0.65),
            0 10px 28px rgba(0, 0, 0, 0.38);
    }

    .hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__copy {
        text-shadow:
            0 1px 0 rgba(255, 255, 255, 0.55),
            0 8px 22px rgba(241, 243, 249, 0.72);
    }
}

.hp-creator-hero__glow {
    position: absolute;
    inset: 0 10% auto;
    height: 7.5rem;
    margin: auto;
    max-width: 16rem;
    border-radius: 999px;
    background: radial-gradient(
        ellipse at 50% 30%,
        rgba(91, 140, 255, 0.35) 0%,
        rgba(91, 140, 255, 0.08) 45%,
        transparent 70%
    );
    filter: blur(2px);
    pointer-events: none;
    opacity: 0.85;
}

.hp-creator-hero__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
}

.hp-creator-hero__avatar {
    width: 5.75rem;
    height: 5.75rem;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35),
        0 18px 40px rgba(0, 0, 0, 0.45);
    display: grid;
    place-items: center;
}

.hp-creator-surface-theme-light .hp-creator-hero__avatar {
    border-color: rgba(15, 16, 20, 0.08);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.9),
        0 14px 32px rgba(15, 16, 20, 0.12);
}

/* P3c / P3t — identity presence (dormant air only) */
.hp-mini-link-canvas .hp-creator-hero__avatar {
    width: 6.05rem;
    height: 6.05rem;
    border-color: rgba(255, 255, 255, 0.128);
    box-shadow:
        0 0 0 1px rgba(91, 140, 255, 0.088),
        0 0 0 1px rgba(0, 0, 0, 0.252),
        0 12px 34px rgba(0, 0, 0, 0.312);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-hero__avatar {
    width: 6.05rem;
    height: 6.05rem;
    border-color: rgba(15, 16, 20, 0.094);
    box-shadow:
        0 0 0 1px rgba(47, 111, 232, 0.148),
        0 0 0 1px rgba(255, 255, 255, 0.94),
        0 12px 34px rgba(15, 16, 20, 0.108);
}

.hp-creator-hero__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hp-creator-hero__avatar-fallback {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.88);
}

.hp-creator-surface-theme-light .hp-creator-hero__avatar-fallback {
    color: #0f1014;
}

.hp-creator-hero__name {
    margin: 0.35rem 0 0;
    font-size: clamp(1.45rem, 4.8vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    max-width: 22ch;
    word-wrap: break-word;
}

.hp-creator-hero__tagline {
    margin: 0;
    max-width: 36ch;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--hp-surface-muted, rgba(255, 255, 255, 0.56));
    word-wrap: break-word;
}

/* P3e — passive creator-presence whispers (decorative; aria-hidden in markup) */
.hp-creator-hero__continuity-whisper {
    margin: 0.28rem auto 0;
    padding-inline: 0.75rem;
    text-align: center;
    text-wrap: balance;
}

.hp-mini-link-canvas .hp-creator-hero__continuity-whisper {
    opacity: 0.692;
}

/* -------------------------------------------------------------------------
   Creator visual presence card (site identity only)
------------------------------------------------------------------------- */

.hp-creator-visual {
    margin-block-end: clamp(1rem, 3.2vw, 1.45rem);
    color: var(--hp-surface-text, rgba(255, 255, 255, 0.92));
}

.hp-mini-link-canvas > .hp-creator-visual.hp-creator-section--visual {
    margin-block-end: var(--hp-section-gap-secondary, clamp(0.94rem, 2.72vw, 1.34rem));
    padding-inline: 0;
    max-width: 100%;
    min-width: 0;
}

.hp-creator-visual__card {
    position: relative;
    border-radius: var(--hp-surface-radius-md, 1rem);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(
        152deg,
        rgba(255, 255, 255, 0.062) 0%,
        rgba(255, 255, 255, 0.028) 38%,
        rgba(8, 8, 12, 0.42) 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 8px 26px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

.hp-mini-link-canvas .hp-creator-visual__card {
    border-radius: var(--hp-surface-radius-lg, 1.35rem);
    border-color: rgba(91, 140, 255, 0.038);
    background: linear-gradient(
        168deg,
        var(--hp-creator-emphasis-current-fill) 0%,
        rgba(255, 255, 255, 0.0165) 40%,
        rgba(255, 255, 255, 0.0076) 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.02),
        0 5px 21px rgba(0, 0, 0, 0.096);
}

.hp-creator-surface-theme-light .hp-creator-visual__card {
    border-color: rgba(15, 16, 20, 0.088);
    background: linear-gradient(
        158deg,
        rgba(255, 255, 255, 0.988) 0%,
        rgba(247, 248, 253, 0.98) 52%,
        rgba(238, 240, 248, 0.99) 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 8px 24px rgba(15, 16, 20, 0.06);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-visual__card {
    border-radius: var(--hp-surface-radius-lg, 1.35rem);
    border-color: color-mix(in srgb, var(--hp-mini-link-accent, #2f6fe8) 16%, rgba(15, 16, 20, 0.088));
    background: linear-gradient(
        168deg,
        color-mix(in srgb, var(--hp-mini-link-accent, #2f6fe8) 7%, transparent) 0%,
        #fff 52%,
        #fafbfe 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 5px 17px rgba(15, 16, 20, 0.032);
}

@media (min-width: 680px) {
    /* Site presence card: blend into canvas on desktop (less “stacked module” behind domain + strap). */
    .hp-mini-link-canvas .hp-creator-visual__card {
        border-radius: var(--hp-surface-radius-lg, 1.35rem);
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.03) 0%,
            rgba(255, 255, 255, 0.008) 48%,
            transparent 100%
        ),
            linear-gradient(
                168deg,
                var(--hp-creator-emphasis-current-fill) 0%,
                rgba(255, 255, 255, 0.012) 42%,
                rgba(255, 255, 255, 0.004) 100%
            );
        border-color: rgba(255, 255, 255, 0.034);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.03),
            0 4px 18px rgba(0, 0, 0, 0.084);
    }

    .hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-visual__card {
        background: linear-gradient(
            180deg,
            rgba(15, 16, 20, 0.012) 0%,
            rgba(255, 255, 255, 0.42) 50%,
            transparent 100%
        ),
            linear-gradient(
                168deg,
                color-mix(in srgb, var(--hp-mini-link-accent, #2f6fe8) 5.5%, transparent) 0%,
                #fff 52%,
                #fafbfe 100%
            );
        border-color: color-mix(in srgb, var(--hp-mini-link-accent, #2f6fe8) 12%, rgba(15, 16, 20, 0.06));
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.9),
            0 4px 16px rgba(15, 16, 20, 0.034);
    }
}

.hp-creator-visual__kicker {
    margin: 0;
    padding: clamp(0.72rem, 2.5vw, 0.92rem) clamp(0.9rem, 3.2vw, 1.1rem) 0;
}

.hp-mini-link-canvas .hp-creator-visual__kicker {
    padding-inline: clamp(0.88rem, 3vw, 1.05rem);
}

.hp-creator-visual__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.72rem, 3vw, 1rem);
    padding: clamp(0.55rem, 2.2vw, 0.78rem) clamp(0.9rem, 3.2vw, 1.12rem) clamp(0.88rem, 3vw, 1.1rem);
}

.hp-creator-visual__mark {
    flex-shrink: 0;
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 0.88rem;
    overflow: hidden;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.28),
        0 6px 18px rgba(0, 0, 0, 0.26);
}

.hp-mini-link-canvas .hp-creator-visual__mark {
    width: 3.55rem;
    height: 3.55rem;
    border-color: rgba(255, 255, 255, 0.11);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 14%, transparent),
        0 0 0 1px rgba(0, 0, 0, 0.2),
        0 5px 16px rgba(0, 0, 0, 0.2);
}

.hp-creator-surface-theme-light .hp-creator-visual__mark {
    border-color: rgba(15, 16, 20, 0.1);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 246, 252, 0.92));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.92),
        0 6px 16px rgba(15, 16, 20, 0.08);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-visual__mark {
    border-color: rgba(15, 16, 20, 0.086);
    box-shadow:
        0 0 0 1px rgba(47, 111, 232, 0.1),
        0 5px 14px rgba(15, 16, 20, 0.07);
}

.hp-creator-visual__mark-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hp-creator-visual__mark-fallback {
    font-size: 0.95rem;
    font-weight: 720;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.9);
}

.hp-creator-surface-theme-light .hp-creator-visual__mark-fallback {
    color: #0f1014;
}

.hp-creator-visual__body {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.hp-creator-visual__name {
    margin: 0 0 0.28rem;
    font-size: clamp(0.98rem, 2.9vw, 1.08rem);
    font-weight: 720;
    letter-spacing: -0.024em;
    line-height: 1.22;
    color: var(--hp-surface-text, rgba(255, 255, 255, 0.94));
    word-wrap: break-word;
}

.hp-creator-visual__copy {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 520;
    letter-spacing: -0.006em;
    line-height: 1.52;
    color: var(--hp-surface-muted, rgba(255, 255, 255, 0.52));
    max-width: 36ch;
    word-wrap: break-word;
}

.hp-creator-surface-theme-light .hp-creator-visual__copy {
    color: rgba(15, 16, 20, 0.54);
}

.hp-mini-link-canvas .hp-creator-visual__copy {
    max-width: 38ch;
}

/* -------------------------------------------------------------------------
   Featured commerce projection (P4.3.1 — editorial highlight; external routing)
   P4.2.5 — mobile card image fill + tappable card (presentation only)
------------------------------------------------------------------------- */

.hp-creator-commerce {
    margin-block-end: clamp(1rem, 3.2vw, 1.45rem);
    color: var(--hp-surface-text, rgba(255, 255, 255, 0.92));
}

.hp-mini-link-canvas > .hp-creator-commerce.hp-creator-section--commerce {
    margin-block-end: var(--hp-section-gap-secondary, clamp(0.94rem, 2.72vw, 1.34rem));
    padding-inline: 0;
    max-width: 100%;
    min-width: 0;
}

.hp-creator-commerce__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(0.62rem, 2.4vw, 0.82rem);
}

.hp-creator-commerce__grid--multi {
    gap: clamp(0.68rem, 2.6vw, 0.9rem);
}

@media (min-width: 680px) {
    .hp-creator-commerce__grid--multi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.hp-creator-commerce-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    width: 100%;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: var(--hp-surface-radius-lg, 1.35rem);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(
        158deg,
        rgba(255, 255, 255, 0.048) 0%,
        rgba(255, 255, 255, 0.018) 42%,
        rgba(8, 8, 12, 0.34) 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 6px 22px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transition:
        transform var(--hp-motion-fast) var(--hp-ease-press),
        border-color var(--hp-motion-base) var(--hp-ease-soft),
        box-shadow var(--hp-motion-base) var(--hp-ease-soft);
}

.hp-mini-link-canvas .hp-creator-commerce-card {
    border-color: rgba(91, 140, 255, 0.034);
    background: linear-gradient(
        168deg,
        var(--hp-creator-emphasis-current-fill) 0%,
        rgba(255, 255, 255, 0.014) 40%,
        rgba(255, 255, 255, 0.006) 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.018),
        0 5px 18px rgba(0, 0, 0, 0.092);
}

.hp-creator-commerce-card:hover {
    border-color: rgba(91, 140, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 8px 24px rgba(0, 0, 0, 0.24);
}

.hp-mini-link-canvas .hp-creator-commerce-card:hover {
    border-color: color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 18%, rgba(255, 255, 255, 0.04));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.028),
        0 7px 22px rgba(0, 0, 0, 0.11);
}

.hp-creator-commerce-card:focus-visible {
    outline: 2px solid var(--hp-surface-accent, #5b8cff);
    outline-offset: 3px;
}

.hp-creator-commerce-card:active {
    transform: scale(0.985);
}

.hp-creator-commerce-card__media {
    position: relative;
    width: 100%;
    min-width: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
}

.hp-creator-commerce-card__media .hp-creator-commerce-card__image,
.hp-creator-commerce-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.hp-creator-commerce-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.28rem;
    padding: clamp(0.78rem, 2.8vw, 0.95rem) clamp(0.88rem, 3vw, 1.05rem) clamp(0.92rem, 3vw, 1.08rem);
    text-align: left;
}

.hp-creator-commerce-card--no-media .hp-creator-commerce-card__body {
    padding-block: clamp(0.88rem, 3vw, 1.05rem);
}

.hp-creator-commerce-card__title {
    margin: 0;
    font-size: clamp(0.94rem, 2.8vw, 1.02rem);
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.24;
    color: var(--hp-surface-text, rgba(255, 255, 255, 0.94));
    word-wrap: break-word;
}

.hp-creator-commerce-card__descriptor {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 520;
    letter-spacing: -0.006em;
    line-height: 1.48;
    color: var(--hp-surface-muted, rgba(255, 255, 255, 0.52));
    max-width: 36ch;
    word-wrap: break-word;
}

.hp-creator-commerce-card__price {
    margin: 0.08rem 0 0;
    font-size: 0.8125rem;
    font-weight: 640;
    letter-spacing: -0.01em;
    line-height: 1.35;
    color: color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 72%, rgba(255, 255, 255, 0.88));
}

/* Card is the outbound link; visible CTA pills removed in P4.2.5 (aria-label carries action copy). */

.hp-creator-surface-theme-light .hp-creator-commerce-card {
    border-color: rgba(15, 16, 20, 0.08);
    background: linear-gradient(
        158deg,
        rgba(255, 255, 255, 0.988) 0%,
        rgba(247, 248, 253, 0.98) 52%,
        rgba(238, 240, 248, 0.99) 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 6px 20px rgba(15, 16, 20, 0.06);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-commerce-card {
    border-color: color-mix(in srgb, var(--hp-mini-link-accent, #2f6fe8) 14%, rgba(15, 16, 20, 0.08));
}

.hp-creator-surface-theme-light .hp-creator-commerce-card__descriptor {
    color: rgba(15, 16, 20, 0.54);
}

.hp-creator-surface-theme-light .hp-creator-commerce-card__price {
    color: color-mix(in srgb, var(--hp-mini-link-accent, #2f6fe8) 78%, #0f1014);
}

.hp-mini-link-canvas .hp-creator-section--commerce.hp-creator-section--commerce--populated::after {
    content: "";
    display: block;
    width: min(76%, 17rem);
    height: 1px;
    margin: clamp(0.208rem, 0.884vw, 0.394rem) auto 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.00372),
        transparent
    );
    opacity: 0.098;
    pointer-events: none;
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-section--commerce.hp-creator-section--commerce--populated::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(15, 16, 20, 0.011),
        transparent
    );
}

@media (prefers-reduced-motion: reduce) {
    .hp-creator-commerce-card {
        transition: none;
    }

    .hp-creator-commerce-card:active {
        transform: none;
    }
}

@media (max-width: 679px) {
    .hp-mini-link-canvas .hp-creator-commerce__grid {
        gap: clamp(0.72rem, 2.8vw, 0.92rem);
    }

    .hp-mini-link-canvas .hp-creator-commerce-card {
        width: 100%;
        min-width: 0;
        border-radius: clamp(0.88rem, 2.8vw, 1.12rem);
    }

    .hp-mini-link-canvas .hp-creator-commerce-card__media {
        aspect-ratio: 4 / 3;
        max-height: none;
    }

    .hp-mini-link-canvas .hp-creator-commerce-card__body {
        padding: clamp(0.82rem, 3vw, 0.98rem) clamp(0.92rem, 3.2vw, 1.08rem) clamp(0.88rem, 3vw, 1.02rem);
    }
}

/* -------------------------------------------------------------------------
   Link stack / CTA hierarchy
------------------------------------------------------------------------- */

.hp-creator-link-stack {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-block: 0;
    padding-inline: clamp(1rem, 5vw, 1.35rem);
    max-width: var(--hp-surface-safe-width);
    margin-inline: auto;
}

.hp-mini-link-canvas .hp-creator-link-stack {
    padding-inline: 0;
    max-width: 100%;
    width: 100%;
    min-width: 0;
    gap: 0.514rem;
}

/* Thumb-zone landing: breath before Featured after orientation stack (DOM order only; no flex order). */
.hp-mini-link-canvas .hp-creator-link-stack .hp-creator-link--featured:not(:first-child) {
    margin-block-start: clamp(0.764rem, 2.65vw, 1.184rem);
}

.hp-mini-link-canvas .hp-creator-link-stack .hp-creator-link--editorial:has(+ .hp-creator-link--featured) {
    margin-block-end: 0.062rem;
}

.hp-mini-link-canvas .hp-creator-link {
    max-width: 100%;
    min-width: 0;
}

.hp-creator-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding: 0.85rem 1.15rem;
    border-radius: 0.95rem;
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    text-align: center;
    line-height: 1.25;
    word-break: break-word;
    border: 1px solid transparent;
    transition:
        transform var(--hp-motion-fast) var(--hp-ease-press),
        box-shadow var(--hp-motion-base) var(--hp-ease-soft),
        background var(--hp-motion-base) var(--hp-ease-soft),
        border-color var(--hp-motion-base) var(--hp-ease-soft),
        color var(--hp-motion-base) var(--hp-ease-soft);
}

.hp-creator-link:focus-visible {
    outline: 2px solid var(--hp-surface-accent, #5b8cff);
    outline-offset: 3px;
}

.hp-creator-link:active {
    transform: scale(0.985);
}

.hp-creator-link--editorial {
    color: rgba(255, 255, 255, 0.94);
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--hp-surface-edge, rgba(255, 255, 255, 0.08));
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.hp-creator-link--editorial:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.14);
}

.hp-creator-surface-theme-light .hp-creator-link--editorial {
    color: #0f1014;
    background: #fff;
    border-color: rgba(15, 16, 20, 0.08);
    box-shadow: 0 10px 28px rgba(15, 16, 20, 0.08);
}

.hp-creator-surface-theme-light .hp-creator-link--editorial:hover {
    border-color: rgba(47, 111, 232, 0.45);
}

.hp-creator-link--featured {
    color: #fff;
    background: linear-gradient(135deg, #5b8cff 0%, #3d5ee6 100%);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow:
        0 10px 30px rgba(47, 88, 220, 0.38),
        0 1px 0 rgba(255, 255, 255, 0.2) inset;
    font-weight: 700;
}

.hp-creator-link--featured:hover {
    box-shadow:
        0 14px 36px rgba(47, 88, 220, 0.46),
        0 1px 0 rgba(255, 255, 255, 0.25) inset;
}

/* P3i / P3t — Featured as premium thumb-zone anchor (in-place; DOM = visual = focus) */
.hp-mini-link-canvas .hp-creator-link--featured {
    position: relative;
    min-height: 3.62rem;
    padding-block: 1.02rem;
    padding-inline: 1.22rem;
    border-radius: 1.1rem;
    font-size: 1.062rem;
    font-weight: 800;
    letter-spacing: -0.016em;
    line-height: 1.22;
    color: rgba(255, 255, 255, 0.97);
    border-width: max(2px, 0.07rem);
    border-color: rgba(255, 255, 255, 0.268);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(255, 255, 255, 0) 42%
        ),
        linear-gradient(
            142deg,
            color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 88%, #ffffff) 0%,
            var(--hp-mini-link-accent, #5b8cff) 42%,
            color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 52%, #0c1028) 100%
        );
    box-shadow:
        0 10px 24px color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 34%, transparent),
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 2px 0 rgba(255, 255, 255, 0.34) inset,
        0 -1px 0 color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 14%, transparent) inset;
}

.hp-mini-link-canvas .hp-creator-link--featured:hover {
    color: rgba(255, 255, 255, 0.98);
    border-color: rgba(255, 255, 255, 0.32);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0) 42%
        ),
        linear-gradient(
            142deg,
            color-mix(in srgb, var(--hp-mini-link-accent-hover, #4d6ef0) 86%, #ffffff) 0%,
            var(--hp-mini-link-accent-hover, #4d6ef0) 45%,
            color-mix(in srgb, var(--hp-mini-link-accent-hover, #4d6ef0) 48%, #0c1028) 100%
        );
    box-shadow:
        0 12px 28px color-mix(in srgb, var(--hp-mini-link-accent-hover, #4d6ef0) 42%, transparent),
        0 0 0 1px rgba(255, 255, 255, 0.14),
        0 2px 0 rgba(255, 255, 255, 0.38) inset,
        0 -1px 0 color-mix(in srgb, var(--hp-mini-link-accent-hover, #4d6ef0) 12%, transparent) inset;
}

.hp-mini-link-canvas .hp-creator-link--featured:focus-visible {
    color: rgba(255, 255, 255, 0.98);
    outline: 2px solid rgba(240, 246, 255, 0.992);
    outline-offset: 5px;
    box-shadow:
        0 10px 24px color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 34%, transparent),
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 2px 0 rgba(255, 255, 255, 0.34) inset,
        0 -1px 0 color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 14%, transparent) inset,
        0 0 0 4px color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 38%, transparent);
}

.hp-mini-link-canvas .hp-creator-link--featured:active {
    color: rgba(255, 255, 255, 0.98);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-link--featured {
    color: rgba(255, 255, 255, 0.98);
    border-color: rgba(255, 255, 255, 0.332);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0) 45%
        ),
        linear-gradient(
            142deg,
            color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 82%, #ffffff) 0%,
            var(--hp-mini-link-accent, #5b8cff) 52%,
            color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 55%, #2a4ab8) 100%
        );
    box-shadow:
        0 8px 22px rgba(15, 16, 20, 0.12),
        0 16px 40px color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 34%, transparent),
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 2px 0 rgba(255, 255, 255, 0.32) inset,
        0 -1px 0 color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 18%, #fff) inset;
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-link--featured:hover {
    color: rgba(255, 255, 255, 0.99);
    box-shadow:
        0 10px 26px rgba(15, 16, 20, 0.14),
        0 20px 48px color-mix(in srgb, var(--hp-mini-link-accent-hover, #4d6ef0) 40%, transparent),
        0 0 0 1px rgba(255, 255, 255, 0.128),
        0 2px 0 rgba(255, 255, 255, 0.36) inset,
        0 -1px 0 color-mix(in srgb, var(--hp-mini-link-accent-hover, #4d6ef0) 16%, #fff) inset;
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-link--featured:focus-visible {
    outline-color: #0f1014;
    box-shadow:
        0 8px 22px rgba(15, 16, 20, 0.12),
        0 16px 40px color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 34%, transparent),
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 2px 0 rgba(255, 255, 255, 0.32) inset,
        0 -1px 0 color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 18%, #fff) inset,
        0 0 0 4px color-mix(in srgb, var(--hp-mini-link-accent, #3d5ee6) 40%, transparent);
}

/* Secondary CTA spacing for mixed/non-priority stacks only; priority pair uses stack gap. */
.hp-mini-link-canvas .hp-creator-link-stack:not(.hp-creator-link-stack--priority-lead):not(.hp-creator-link-stack--priority):not(.hp-creator-link-stack--featured-offer-lead) .hp-creator-link--featured + .hp-creator-link--ghost {
    margin-block-start: clamp(0.52rem, 2.05vw, 0.912rem);
}

.hp-mini-link-canvas .hp-creator-link-stack .hp-creator-link--ghost {
    min-height: 3.06rem;
    padding-block: 0.74rem;
    font-size: 0.942rem;
    font-weight: 575;
    letter-spacing: -0.008em;
    border-radius: 0.92rem;
    color: rgba(255, 255, 255, 0.88);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.07) 0%,
        rgba(255, 255, 255, 0.028) 100%
    );
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 4px 14px rgba(0, 0, 0, 0.14);
}

@media (hover: hover) and (pointer: fine) {
    .hp-mini-link-canvas .hp-creator-link--ghost:hover {
        color: rgba(255, 255, 255, 0.94);
        border-color: color-mix(
            in srgb,
            var(--hp-mini-link-accent, #5b8cff) 28%,
            rgba(255, 255, 255, 0.18)
        );
        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.1) 0%,
                rgba(255, 255, 255, 0.04) 100%
            ),
            color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 8.5%, rgba(10, 10, 14, 0.92));
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.1) inset,
            0 6px 16px rgba(0, 0, 0, 0.16);
    }
}

.hp-mini-link-canvas .hp-creator-link--ghost:active {
    color: rgba(255, 255, 255, 0.9);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-link-stack .hp-creator-link--ghost {
    color: rgba(15, 16, 20, 0.782);
    background: rgba(255, 255, 255, 0.58);
    border-color: rgba(15, 16, 20, 0.12);
}

@media (hover: hover) and (pointer: fine) {
    .hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-link-stack .hp-creator-link--ghost:hover {
        background: color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 9%, rgba(255, 255, 255, 0.58));
        border-color: color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 28%, rgba(15, 16, 20, 0.12));
    }
}

/* P4b — editorial stack: calm routes; hover is faint tint only (never Featured-class fill). */
.hp-mini-link-canvas .hp-creator-link--editorial {
    color: rgba(255, 255, 255, 0.93);
    background:
        radial-gradient(
            ellipse 150% 120% at 50% -40%,
            color-mix(in srgb, var(--hp-mini-link-standard-hover, #ffffff) 4.5%, transparent) 0%,
            transparent 58%
        ),
        rgba(255, 255, 255, 0.032);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.028) inset,
        0 1px 5px rgba(0, 0, 0, 0.045);
}

@media (hover: hover) and (pointer: fine) {
    .hp-mini-link-canvas .hp-creator-link--editorial:hover {
        color: rgba(255, 255, 255, 0.97);
        background:
            radial-gradient(
                ellipse 150% 120% at 50% -38%,
                color-mix(in srgb, var(--hp-mini-link-standard-hover, #ffffff) 8%, transparent) 0%,
                transparent 60%
            ),
            linear-gradient(
                180deg,
                color-mix(in srgb, var(--hp-mini-link-standard-hover, #ffffff) 6%, rgba(255, 255, 255, 0)) 0%,
                rgba(255, 255, 255, 0.035) 100%
            ),
            rgba(255, 255, 255, 0.038);
        border-color: color-mix(
            in srgb,
            var(--hp-mini-link-standard-hover, #ffffff) 22%,
            rgba(255, 255, 255, 0.11)
        );
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.048) inset,
            0 2px 6px rgba(0, 0, 0, 0.055);
    }
}

.hp-mini-link-canvas .hp-creator-link--editorial:active {
    color: rgba(255, 255, 255, 0.96);
    background:
        radial-gradient(
            ellipse 150% 120% at 50% -38%,
            color-mix(in srgb, var(--hp-mini-link-standard-hover, #ffffff) 6%, transparent) 0%,
            transparent 60%
        ),
        rgba(255, 255, 255, 0.041);
    border-color: rgba(255, 255, 255, 0.11);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 1px 4px rgba(0, 0, 0, 0.05);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-link--editorial {
    color: rgba(15, 16, 20, 0.88);
    background:
        radial-gradient(
            ellipse 150% 118% at 48% -36%,
            color-mix(in srgb, var(--hp-mini-link-standard-hover, #8a7a6e) 5%, transparent) 0%,
            transparent 58%
        ),
        rgba(255, 255, 255, 0.972);
    border-color: rgba(15, 16, 20, 0.088);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 3px 11px rgba(15, 16, 20, 0.038);
}

@media (hover: hover) and (pointer: fine) {
    .hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-link--editorial:hover {
        color: rgba(15, 16, 20, 0.92);
        border-color: color-mix(
            in srgb,
            var(--hp-mini-link-standard-hover, #8a7a6e) 22%,
            rgba(15, 16, 20, 0.11)
        );
        background:
            radial-gradient(
                ellipse 150% 118% at 48% -36%,
                color-mix(in srgb, var(--hp-mini-link-standard-hover, #8a7a6e) 7%, transparent) 0%,
                transparent 58%
            ),
            linear-gradient(
                180deg,
                color-mix(in srgb, var(--hp-mini-link-standard-hover, #ffffff) 4%, rgba(255, 255, 255, 0)) 0%,
                rgba(255, 255, 255, 0.985) 100%
            );
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.98),
            0 3px 12px rgba(15, 16, 20, 0.042);
    }
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-link--editorial:active {
    color: rgba(15, 16, 20, 0.9);
    border-color: rgba(15, 16, 20, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 2px 8px rgba(15, 16, 20, 0.036);
}

.hp-creator-surface-theme-light .hp-creator-link--featured {
    color: #fff;
}

.hp-creator-link--ghost {
    color: rgba(255, 255, 255, 0.88);
    background: transparent;
    border-color: rgba(255, 255, 255, 0.22);
}

.hp-creator-link--ghost:hover {
    border-color: rgba(91, 140, 255, 0.85);
    background: var(--hp-surface-accent-soft, rgba(91, 140, 255, 0.22));
}

.hp-creator-surface-theme-light .hp-creator-link--ghost {
    color: #0f1014;
    border-color: rgba(15, 16, 20, 0.2);
}


/* -------------------------------------------------------------------------
   Bounded section rhythm (hierarchy — presentation only)
------------------------------------------------------------------------- */

.hp-mini-link-canvas .hp-creator-section--identity {
    position: relative;
    border-bottom: none;
    padding-block-end: clamp(0.1rem, 0.45vw, 0.24rem);
    margin-block-end: clamp(0.52rem, 1.75vw, 0.88rem);
}

.hp-mini-link-canvas .hp-creator-section--identity::after {
    content: "";
    display: block;
    width: var(--hp-header-body-divider-width);
    max-width: calc(100% - 1.5rem);
    height: 1px;
    margin-inline: auto;
    margin-block-start: var(--hp-header-body-divider-gap-above);
    margin-block-end: var(--hp-header-body-divider-gap-below);
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--hp-header-body-divider-accent) 55%, transparent) 14%,
        var(--hp-header-body-divider-core) 50%,
        color-mix(in srgb, var(--hp-header-body-divider-accent) 55%, transparent) 86%,
        transparent 100%
    );
    opacity: var(--hp-header-body-divider-opacity);
    pointer-events: none;
}

.hp-mini-link-canvas > .hp-creator-section--links {
    margin-block-end: var(--hp-section-gap-secondary, clamp(0.94rem, 2.72vw, 1.34rem));
    max-width: 100%;
    min-width: 0;
}

.hp-mini-link-canvas .hp-creator-link-stack--priority {
    --hp-priority-pair-gap: clamp(0.625rem, 2vw, 0.875rem);
    gap: var(--hp-priority-pair-gap);
    padding: 0;
}

a.hp-creator-visual__card--link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border-radius: inherit;
    transition:
        box-shadow var(--hp-motion-base) var(--hp-ease-soft),
        transform var(--hp-motion-fast) var(--hp-ease-press);
}

a.hp-creator-visual__card--link:hover {
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.14);
}

a.hp-creator-visual__card--link:focus-visible {
    outline: 2px solid var(--hp-mini-link-accent, #5b8cff);
    outline-offset: 3px;
}

.hp-mini-link-canvas a.hp-creator-visual__card--link:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.024),
        0 6px 22px rgba(0, 0, 0, 0.11);
}

.hp-creator-surface-theme-light a.hp-creator-visual__card--link:focus-visible {
    outline-color: var(--hp-mini-link-accent, #2f6fe8);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas a.hp-creator-visual__card--link:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 6px 20px rgba(15, 16, 20, 0.06);
}

.hp-creator-section__kicker {
    margin: 0 0 0.6rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hp-surface-muted, rgba(255, 255, 255, 0.45));
}

.hp-mini-link-canvas .hp-creator-section__kicker {
    margin: clamp(0.08rem, 0.82vw, 0.182rem) 0 clamp(0.412rem, 1.32vw, 0.564rem);
    letter-spacing: 0.124em;
}

/* P4e — sectional cohesion (labels nearly merge with continuum) */
.hp-mini-link-canvas .hp-creator-section__kicker,
.hp-mini-link-canvas .hp-region-kicker {
    font-weight: 608;
    letter-spacing: 0.108em;
    color: rgba(255, 255, 255, 0.196);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-section__kicker,
.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-region-kicker {
    color: rgba(15, 16, 20, 0.274);
}

.hp-creator-section--links {
    margin-block-end: clamp(1rem, 3.2vw, 1.45rem);
}

/* P3d — single Next Live panel (hp_streams_get_current; Mini Link only; calm presence) */
.hp-creator-section--event {
    margin-block-end: clamp(1rem, 3.2vw, 1.45rem);
}

.hp-mini-link-canvas .hp-creator-section--event {
    padding-inline: 0;
    margin-block-end: var(--hp-section-gap-secondary, clamp(0.94rem, 2.72vw, 1.34rem));
    max-width: 100%;
}

.hp-creator-event-panel {
    position: relative;
    text-align: center;
    border-radius: var(--hp-surface-radius-lg, 1.35rem);
    border: 1px solid rgba(91, 140, 255, 0.14);
    background: linear-gradient(
        165deg,
        var(--hp-creator-emphasis-current-fill, rgba(91, 140, 255, 0.09)) 0%,
        rgba(255, 255, 255, 0.03) 42%,
        rgba(255, 255, 255, 0.015) 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 14px 42px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

/* P4c–P4e — rhythm shell blended into axial continuum */
.hp-mini-link-canvas .hp-creator-event-panel {
    max-width: 100%;
    border-color: rgba(91, 140, 255, 0.038);
    background: linear-gradient(
        168deg,
        var(--hp-creator-emphasis-current-fill) 0%,
        rgba(255, 255, 255, 0.0165) 40%,
        rgba(255, 255, 255, 0.0076) 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.02),
        0 5px 21px rgba(0, 0, 0, 0.096);
}

.hp-creator-event-panel__halo {
    position: absolute;
    inset: -30% 15% auto;
    height: 9rem;
    margin: auto;
    max-width: 14rem;
    border-radius: 999px;
    background: radial-gradient(
        ellipse at 50% 40%,
        rgba(91, 140, 255, 0.22) 0%,
        rgba(91, 140, 255, 0.06) 45%,
        transparent 72%
    );
    filter: blur(3px);
    pointer-events: none;
    opacity: 0.75;
}

.hp-mini-link-canvas .hp-creator-event-panel__halo {
    opacity: 0.254;
    filter: blur(3.72px);
}

.hp-creator-event-panel__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: clamp(1.15rem, 4vw, 1.45rem) clamp(1rem, 4vw, 1.25rem) clamp(1.25rem, 4vw, 1.5rem);
    max-width: 22rem;
    margin-inline: auto;
}

.hp-creator-event__headline {
    margin: 0;
    font-size: clamp(1.05rem, 3.4vw, 1.2rem);
    font-weight: 680;
    letter-spacing: -0.03em;
    line-height: 1.28;
    color: var(--hp-surface-text, rgba(255, 255, 255, 0.94));
    max-width: 26ch;
    word-wrap: break-word;
}

.hp-creator-event__meta {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 520;
    letter-spacing: -0.01em;
    line-height: 1.45;
    color: var(--hp-surface-muted, rgba(255, 255, 255, 0.56));
    max-width: 32ch;
}

.hp-creator-event__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.15rem;
    margin-top: 0.35rem;
    padding: 0.82rem 1.2rem;
    border-radius: 0.95rem;
    font-size: 0.96rem;
    font-weight: 680;
    letter-spacing: -0.015em;
    text-decoration: none;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, #5b8cff 0%, #3f62e0 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        0 10px 28px rgba(47, 88, 220, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition:
        transform var(--hp-motion-fast) var(--hp-ease-press),
        box-shadow var(--hp-motion-base) var(--hp-ease-soft);
}

.hp-creator-event__cta:hover {
    box-shadow:
        0 14px 34px rgba(47, 88, 220, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    color: #fff;
}

.hp-creator-event__cta:focus-visible {
    outline: 2px solid var(--hp-surface-accent, #5b8cff);
    outline-offset: 3px;
}

.hp-mini-link-canvas .hp-creator-event__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.15rem;
    margin-top: 0.35rem;
    padding: 0.82rem 1.2rem;
    border-radius: 0.95rem;
    font-size: 0.96rem;
    font-weight: 680;
    letter-spacing: -0.015em;
    text-decoration: none;
    text-align: center;
    color: #fff;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.16) 0%,
            rgba(255, 255, 255, 0) 38%
        ),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 90%, #ffffff) 0%,
            var(--hp-mini-link-accent, #5b8cff) 52%,
            color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 72%, #1a2d7a) 100%
        );
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 10px 26px color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 32%, transparent);
    transition:
        transform var(--hp-motion-fast) var(--hp-ease-press),
        box-shadow var(--hp-motion-base) var(--hp-ease-soft);
}

.hp-mini-link-canvas .hp-creator-event__cta:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.24) inset,
        0 14px 30px color-mix(in srgb, var(--hp-mini-link-accent-hover, #4d6ef0) 38%, transparent);
    color: #fff;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0) 38%
        ),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--hp-mini-link-accent-hover, #4d6ef0) 92%, #ffffff) 0%,
            var(--hp-mini-link-accent-hover, #4d6ef0) 52%,
            color-mix(in srgb, var(--hp-mini-link-accent-hover, #4d6ef0) 68%, #1a2d7a) 100%
        );
}

.hp-mini-link-canvas .hp-creator-event__cta:focus-visible {
    outline: 2px solid var(--hp-mini-link-accent, #5b8cff);
    outline-offset: 3px;
}

.hp-creator-event__cta:active {
    transform: scale(0.985);
}

.hp-creator-event-quiet {
    margin-block: 0 0.25rem;
    padding: 1.1rem 1.15rem;
    border-radius: var(--hp-surface-radius-md, 1rem);
    border: 1px dashed var(--hp-surface-edge, rgba(255, 255, 255, 0.12));
    background: rgba(255, 255, 255, 0.025);
    text-align: center;
}

.hp-creator-event-quiet__title {
    margin: 0 0 0.35rem;
    font-size: 0.9375rem;
    font-weight: 640;
    letter-spacing: -0.02em;
    color: var(--hp-surface-text, rgba(255, 255, 255, 0.9));
}

.hp-creator-event-quiet__hint {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--hp-surface-muted, rgba(255, 255, 255, 0.55));
}

.hp-mini-link-canvas .hp-creator-event-quiet {
    margin-inline: 0;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.024);
    background: rgba(255, 255, 255, 0.0094);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-event-quiet {
    border-color: rgba(15, 16, 20, 0.046);
    background: rgba(255, 255, 255, 0.848);
}

.hp-creator-event-quiet.hp-creator-surface-theme-light {
    background: rgba(255, 255, 255, 0.92);
}

.hp-creator-surface-theme-light .hp-creator-event-panel {
    border-color: rgba(47, 111, 232, 0.16);
    background: linear-gradient(
        168deg,
        rgba(47, 111, 232, 0.07) 0%,
        #fff 52%,
        #fafbfe 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 14px 40px rgba(15, 16, 20, 0.08);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-event-panel {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 5px 17px rgba(15, 16, 20, 0.032);
}

.hp-creator-surface-theme-light .hp-creator-event-panel__halo {
    background: radial-gradient(
        ellipse at 50% 40%,
        rgba(47, 111, 232, 0.14) 0%,
        rgba(47, 111, 232, 0.04) 48%,
        transparent 74%
    );
}

.hp-creator-surface-theme-light .hp-creator-event__meta {
    color: rgba(15, 16, 20, 0.55);
}

/* P4c–P4e — coexistence threading (minimal partition cues across zones) */
.hp-mini-link-canvas .hp-creator-section--event.hp-creator-section--event--populated::after {
    content: "";
    display: block;
    width: min(76%, 17rem);
    height: 1px;
    margin: clamp(0.208rem, 0.884vw, 0.394rem) auto 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.00372),
        transparent
    );
    opacity: 0.098;
    pointer-events: none;
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-section--event.hp-creator-section--event--populated::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(15, 16, 20, 0.011),
        transparent
    );
}

@media (prefers-reduced-motion: reduce) {
    .hp-creator-event__cta {
        transition: none;
    }

    .hp-creator-event__cta:active {
        transform: none;
    }
}

.hp-mini-link-canvas .hp-creator-section--links.hp-creator-section--links--populated::after {
    content: "";
    display: block;
    width: min(76%, 17rem);
    height: 1px;
    margin: clamp(0.208rem, 0.884vw, 0.404rem) auto 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.00372),
        transparent
    );
    opacity: 0.098;
    pointer-events: none;
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-section--links.hp-creator-section--links--populated::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(15, 16, 20, 0.011),
        transparent
    );
}

.hp-creator-section--pulse {
    margin-block-start: 0;
}

.hp-mini-link-canvas .hp-feed-item.hp-feed-item--spotlight {
    border-color: rgba(91, 140, 255, 0.076);
    background: linear-gradient(
        145deg,
        var(--hp-creator-emphasis-current-fill) 0%,
        rgba(255, 255, 255, 0.0146) 40%,
        #121116 72%
    );
    box-shadow:
        inset 2px 0 0 0 var(--hp-creator-emphasis-current),
        0 2px 9px rgba(0, 0, 0, 0.096);
    margin-bottom: 0.266rem;
}

.hp-mini-link-canvas .hp-feed-item.hp-feed-item--spotlight:hover {
    border-color: rgba(91, 140, 255, 0.096);
}

.hp-mini-link-canvas .hp-feed-item.hp-feed-item--pacing-follow {
    border-color: rgba(255, 255, 255, 0.026);
    background: linear-gradient(
        180deg,
        var(--hp-creator-emphasis-rhythm-fill) 0%,
        #121116 62%
    );
    box-shadow:
        inset 2px 0 0 0 var(--hp-creator-emphasis-rhythm),
        0 2px 8px rgba(0, 0, 0, 0.088);
}

.hp-mini-link-canvas .hp-feed-item.hp-feed-item--pacing-follow:hover {
    border-color: rgba(255, 255, 255, 0.036);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-feed-item.hp-feed-item--spotlight {
    background: linear-gradient(
        152deg,
        rgba(47, 111, 232, 0.048) 0%,
        #ffffff 58%
    );
    border-color: rgba(15, 16, 20, 0.052);
    box-shadow:
        inset 2px 0 0 0 rgba(47, 111, 232, 0.138),
        0 3px 12px rgba(15, 16, 20, 0.028);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-feed-item.hp-feed-item--pacing-follow {
    background: linear-gradient(180deg, rgba(15, 16, 20, 0.016) 0%, #fafbfe 55%);
    border-color: rgba(15, 16, 20, 0.06);
    box-shadow:
        inset 2px 0 0 0 rgba(15, 16, 20, 0.062),
        0 3px 17px rgba(15, 16, 20, 0.038);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-feed-item.hp-feed-item--pacing-follow:hover {
    border-color: rgba(15, 16, 20, 0.084);
}

/* P4b–P4e — neutral cards share axial continuum */
.hp-mini-link-canvas .hp-feed-item:not(.hp-feed-item--spotlight):not(.hp-feed-item--pacing-follow) {
    background:
        radial-gradient(ellipse 118% 88% at 14% -12%, rgba(91, 140, 255, 0.046) 0%, transparent 52%),
        linear-gradient(185deg, rgba(255, 255, 255, 0.034) 0%, rgba(8, 8, 10, 0.876) 44%, #111115 100%);
    border-color: rgba(255, 255, 255, 0.042);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 4px 17px rgba(0, 0, 0, 0.272);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-feed-item:not(.hp-feed-item--spotlight):not(.hp-feed-item--pacing-follow) {
    background:
        radial-gradient(ellipse 118% 90% at 12% -10%, rgba(47, 111, 232, 0.076) 0%, transparent 54%),
        linear-gradient(188deg, rgba(255, 255, 255, 0.997) 0%, rgba(248, 249, 253, 0.993) 58%, #f4f5fa 100%);
    border-color: rgba(15, 16, 20, 0.076);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.972),
        0 4px 18px rgba(15, 16, 20, 0.044);
}

.hp-mini-link-canvas .hp-feed-item:not(.hp-feed-item--spotlight):not(.hp-feed-item--pacing-follow):hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.034),
        0 5px 18px rgba(0, 0, 0, 0.304);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-feed-item:not(.hp-feed-item--spotlight):not(.hp-feed-item--pacing-follow):hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.982),
        0 5px 22px rgba(15, 16, 20, 0.056);
}

/* P4b — in-column anchor: quieter than stock feed halo (deterministic persistence cue) */
.hp-mini-link-canvas .hp-feed-item:not(.hp-feed-item--spotlight):not(.hp-feed-item--pacing-follow):target {
    border-color: rgba(91, 140, 255, 0.352);
    background:
        radial-gradient(ellipse 118% 88% at 14% -12%, rgba(91, 140, 255, 0.076) 0%, transparent 52%),
        linear-gradient(185deg, rgba(255, 255, 255, 0.046) 0%, rgba(10, 10, 12, 0.932) 45%, #131318 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.038),
        0 0 0 1px rgba(91, 140, 255, 0.092),
        0 5px 23px rgba(0, 0, 0, 0.326);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-feed-item:not(.hp-feed-item--spotlight):not(.hp-feed-item--pacing-follow):target {
    border-color: rgba(47, 111, 232, 0.384);
    background:
        radial-gradient(ellipse 118% 90% at 12% -10%, rgba(47, 111, 232, 0.092) 0%, transparent 54%),
        linear-gradient(188deg, rgba(255, 255, 255, 0.998) 0%, rgba(252, 252, 255, 0.996) 52%, #f4f7fd 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.984),
        0 0 0 1px rgba(47, 111, 232, 0.098),
        0 6px 24px rgba(15, 16, 20, 0.06);
}

/* P3f — bounded media-well atmosphere (deterministic markup class; no embeds/uploads/autoplay) */
.hp-mini-link-canvas .hp-feed-item {
    border-radius: clamp(1.12rem, 4vw, 1.36rem);
    min-width: 0;
    max-width: 100%;
}

.hp-mini-link-canvas .hp-feed-item.hp-feed-item--has-media {
    gap: 0;
    overflow: hidden;
}

.hp-mini-link-canvas .hp-feed-item.hp-feed-item--has-media .hp-feed-item__media {
    position: relative;
    align-self: stretch;
    width: clamp(104px, 28vw, 142px);
    background: rgba(255, 255, 255, 0.019);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-feed-item.hp-feed-item--has-media .hp-feed-item__media {
    background: rgba(15, 16, 20, 0.019);
}

.hp-mini-link-canvas .hp-feed-item.hp-feed-item--has-media .hp-feed-item__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(106deg, rgba(255, 255, 255, 0.049) 0%, transparent 40%),
        linear-gradient(-92deg, rgba(0, 0, 0, 0.134) 0%, transparent 50%);
    opacity: 0.224;
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-feed-item.hp-feed-item--has-media .hp-feed-item__media::after {
    opacity: 0.22;
    background: linear-gradient(106deg, rgba(255, 255, 255, 0.492) 0%, transparent 36%),
        linear-gradient(-92deg, rgba(15, 16, 20, 0.069) 0%, transparent 51%);
}

.hp-mini-link-canvas .hp-feed-item__media img {
    filter: brightness(0.872) contrast(1.002);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-feed-item__media img {
    filter: brightness(0.948) contrast(1.001);
}

.hp-mini-link-canvas .hp-feed-item.hp-feed-item--has-media .hp-feed-main {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    padding-block: clamp(1rem, 3.65vw, 1.54rem);
    padding-inline-start: clamp(0.93rem, 3.15vw, 1.42rem);
    padding-inline-end: clamp(1.02rem, 3.4vw, 1.54rem);
}

.hp-mini-link-canvas .hp-feed-item:not(.hp-feed-item--has-media) .hp-feed-main {
    padding-block: clamp(1rem, 3.85vw, 1.62rem);
    padding-inline: clamp(1.02rem, 3.95vw, 1.62rem);
}

/* P3j / P3t — labels nearly recess into cards */
.hp-mini-link-canvas .hp-feed-spotlight-pill {
    padding: 0.178rem 0.418rem;
    border-radius: 999px;
    background: rgba(91, 140, 255, 0.036);
    border: 1px solid rgba(91, 140, 255, 0.082);
    color: rgba(214, 224, 255, 0.468);
    letter-spacing: 0.104em;
}

.hp-mini-link-canvas .hp-feed-pacing-pill {
    padding: 0.178rem 0.418rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.013);
    border: 1px solid rgba(255, 255, 255, 0.026);
    color: rgba(255, 255, 255, 0.268);
    letter-spacing: 0.102em;
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-feed-spotlight-pill {
    background: rgba(47, 111, 232, 0.034);
    border-color: rgba(47, 111, 232, 0.108);
    color: rgba(38, 62, 145, 0.578);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-feed-pacing-pill {
    background: rgba(15, 16, 20, 0.016);
    border-color: rgba(15, 16, 20, 0.054);
    color: rgba(15, 16, 20, 0.298);
}

.hp-mini-link-canvas .hp-feed-item--spotlight .hp-feed-time {
    color: rgba(200, 214, 255, 0.248);
}

.hp-mini-link-canvas .hp-feed-item--pacing-follow .hp-feed-time {
    color: rgba(255, 255, 255, 0.244);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-feed-item--spotlight .hp-feed-time {
    color: rgba(47, 75, 150, 0.342);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-feed-item--pacing-follow .hp-feed-time {
    color: rgba(15, 16, 20, 0.302);
}

/* P3e — continuity atmosphere: soft copy rhythm + environmental anchoring */
.hp-continuity-atmosphere {
    margin: 0;
    max-width: 38ch;
    font-size: 0.78125rem;
    font-weight: 500;
    letter-spacing: 0.036em;
    line-height: 1.565;
    color: rgba(255, 255, 255, 0.399);
}

.hp-creator-surface-theme-light .hp-continuity-atmosphere {
    color: rgba(15, 16, 20, 0.432);
}

/* P4d–P4e — whisper cadence (continuity cohesion; deterministic copy ribbon) */
.hp-mini-link-canvas .hp-continuity-atmosphere {
    max-width: 43ch;
    font-weight: 500;
    font-size: 0.76rem;
    letter-spacing: 0.025em;
    line-height: 1.734;
    color: rgba(255, 255, 255, 0.216);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-continuity-atmosphere {
    color: rgba(15, 16, 20, 0.296);
}

.hp-creator-section__kicker + .hp-creator-section__continuity-whisper {
    margin-top: -0.048rem;
    margin-bottom: 0.396rem;
}

.hp-mini-link-canvas .hp-creator-section--links .hp-creator-section__continuity-whisper {
    text-align: center;
}

.hp-mini-link-canvas .hp-creator-section--event .hp-creator-section__continuity-whisper {
    text-align: center;
}

.hp-mini-link-canvas .hp-pulse-region.hp-creator-section--pulse > .hp-pulse-region__continuity-whisper {
    margin-top: -0.128rem;
    margin-bottom: clamp(0.404rem, 1.36vw, 0.668rem);
    margin-inline-start: auto;
    margin-inline-end: auto;
    text-wrap: balance;
}

/* P3l — Pulse rests without framing; P4d inward settlement under enclosing lip */
.hp-mini-link-canvas .hp-pulse-region.hp-creator-section--pulse {
    padding-inline-start: 0;
    border-inline-start: none;
    margin-block-start: clamp(0.102rem, 0.82vw, 0.182rem);
    max-width: 100%;
    min-width: 0;
}

/* P3j — atmospheric steadiness: pulse-feed hover motion damped inside bounded canvas */
.hp-mini-link-canvas .hp-feed-item:hover:not(.hp-feed-item--spotlight):not(.hp-feed-item--pacing-follow) {
    transform: none;
}

.hp-mini-link-canvas .hp-feed-item.hp-feed-item--spotlight:hover,
.hp-mini-link-canvas .hp-feed-item.hp-feed-item--pacing-follow:hover {
    transform: none;
}

/* Mini Link canvas: Pulse feed primary CTA uses bounded brand feed colour (CSS-only). */
.hp-mini-link-canvas .hp-feed-btn {
    background: var(--hp-mini-link-feed-button, var(--hp-mini-link-accent, #2f6fe8));
    color: rgba(255, 255, 255, 0.96);
}

@media (hover: hover) and (pointer: fine) {
    .hp-mini-link-canvas .hp-feed-btn:hover {
        background: color-mix(
            in srgb,
            var(--hp-mini-link-feed-button, var(--hp-mini-link-accent)) 78%,
            #121214
        );
        color: rgba(255, 255, 255, 0.98);
    }
}

.hp-mini-link-canvas .hp-feed-btn:active {
    color: rgba(255, 255, 255, 0.96);
}

.hp-mini-link-canvas .hp-feed-btn:focus-visible {
    outline: 2px solid color-mix(
        in srgb,
        var(--hp-mini-link-feed-button, var(--hp-mini-link-accent)) 62%,
        #f8f8fc
    );
    outline-offset: 2px;
}

.hp-mini-link-canvas .hp-pulse-copy.hp-copied {
    background: var(--hp-mini-link-feed-button, var(--hp-mini-link-accent)) !important;
    color: #ffffff !important;
    border-color: var(--hp-mini-link-feed-button, var(--hp-mini-link-accent)) !important;
    box-shadow: 0 0 14px color-mix(in srgb, var(--hp-mini-link-feed-button, var(--hp-mini-link-accent)) 22%, transparent) !important;
}

.hp-mini-link-canvas .hp-feed-share:hover,
.hp-mini-link-canvas .hp-pulse-copy:hover {
    border-color: color-mix(in srgb, var(--hp-mini-link-feed-button, var(--hp-mini-link-accent)) 45%, rgba(255, 255, 255, 0.15));
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-feed-btn {
    color: #fff;
}

/* -------------------------------------------------------------------------
   Pulse region (section rhythm)
------------------------------------------------------------------------- */

.hp-pulse-region {
    margin-top: 0.25rem;
}

.hp-region-kicker {
    margin: 0 0 0.85rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hp-surface-muted, rgba(255, 255, 255, 0.45));
}

.hp-mini-link-canvas .hp-pulse-region.hp-creator-section--pulse > .hp-region-kicker {
    margin-bottom: clamp(0.612rem, 1.74vw, 0.764rem);
}

.hp-mini-link-canvas .hp-feed-wrap {
    max-width: 100%;
    min-width: 0;
    margin: 0;
    gap: var(--hp-creator-feed-row-gap, 1.28rem);
}

/* -------------------------------------------------------------------------
   Empty states (pulse quiet)
------------------------------------------------------------------------- */

.hp-no-pulses {
    margin: 0;
    text-align: center;
    padding: 2rem 1.25rem 2.25rem;
    border-radius: var(--hp-surface-radius-lg, 1.35rem);
    border: 1px dashed var(--hp-surface-edge, rgba(255, 255, 255, 0.12));
    background: rgba(255, 255, 255, 0.02);
    color: var(--hp-surface-muted, rgba(255, 255, 255, 0.55));
    font-size: 0.9375rem;
    line-height: 1.55;
    min-height: 5.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.hp-no-pulses__title {
    margin: 0;
    font-weight: 600;
    color: var(--hp-surface-text, rgba(255, 255, 255, 0.88));
    font-size: 1rem;
}

.hp-no-pulses__hint {
    margin: 0;
    font-size: 0.8125rem;
    opacity: 0.85;
    max-width: 28ch;
}

.hp-theme-light .hp-no-pulses {
    background: rgba(255, 255, 255, 0.65);
}

/* P3k / P3t — Pulse empty-well fades into dormant canvas */
.hp-mini-link-canvas .hp-no-pulses {
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.022);
    background: radial-gradient(
        ellipse 88% 70% at 50% 18%,
        rgba(91, 140, 255, 0.028) 0%,
        rgba(255, 255, 255, 0.0048) 48%,
        rgba(255, 255, 255, 0.0028) 100%
    );
    gap: 0.228rem;
    padding: 1.596rem 0.942rem 1.724rem;
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-no-pulses {
    border-color: rgba(15, 16, 20, 0.036);
    background: radial-gradient(
        ellipse 88% 70% at 50% 16%,
        rgba(47, 111, 232, 0.052) 0%,
        rgba(255, 255, 255, 0.542) 48%,
        rgba(255, 255, 255, 0.488) 100%
    );
}

/* -------------------------------------------------------------------------
   Stream CTA (shortcode hp_stream_cta_button)
------------------------------------------------------------------------- */

.hp-stream-surface {
    margin-block: 0 1.5rem;
}

.hp-stream-cta-wrapper {
    margin: 0;
}

.hp-stream-cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.15rem;
    padding: 0.85rem 1.15rem;
    border-radius: 0.95rem;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    text-align: center;
    color: #fff !important;
    background: linear-gradient(135deg, #7c5cff 0%, #5b8cff 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        0 12px 32px rgba(92, 72, 210, 0.36),
        0 1px 0 rgba(255, 255, 255, 0.15) inset;
    transition:
        transform var(--hp-motion-fast) var(--hp-ease-press),
        box-shadow var(--hp-motion-base) var(--hp-ease-soft);
}

.hp-stream-cta-button:hover {
    box-shadow:
        0 16px 40px rgba(92, 72, 210, 0.44),
        0 1px 0 rgba(255, 255, 255, 0.2) inset;
    color: #fff !important;
}

.hp-stream-cta-button:focus-visible {
    outline: 2px solid var(--hp-surface-accent, #5b8cff);
    outline-offset: 3px;
}

.hp-stream-cta-button:active {
    transform: scale(0.985);
}

/* Sparse link stack — calm empty state when no URLs configured */
.hp-creator-links-quiet {
    margin-block: 0 1.25rem;
    padding: 1.15rem 1.2rem;
    border-radius: var(--hp-surface-radius-md, 1rem);
    border: 1px dashed var(--hp-surface-edge, rgba(255, 255, 255, 0.12));
    background: rgba(255, 255, 255, 0.025);
    text-align: center;
}

.hp-creator-links-quiet__title {
    margin: 0 0 0.35rem;
    font-size: 0.9375rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--hp-surface-text, rgba(255, 255, 255, 0.9));
}

.hp-creator-links-quiet__hint {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--hp-surface-muted, rgba(255, 255, 255, 0.55));
}

.hp-mini-link-canvas .hp-creator-links-quiet {
    margin-inline: 0;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.024);
    background: radial-gradient(
        ellipse 92% 80% at 50% -8%,
        rgba(91, 140, 255, 0.022) 0%,
        rgba(255, 255, 255, 0.0056) 56%,
        rgba(255, 255, 255, 0.0038) 100%
    );
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-links-quiet {
    border-color: rgba(15, 16, 20, 0.044);
    background: radial-gradient(
        ellipse 92% 80% at 50% -6%,
        rgba(47, 111, 232, 0.042) 0%,
        rgba(255, 255, 255, 0.804) 58%,
        rgba(255, 255, 255, 0.772) 100%
    );
}

.hp-creator-links-quiet.hp-creator-surface-theme-light {
    background: rgba(255, 255, 255, 0.92);
}

/* -------------------------------------------------------------------------
   Mini Link — Automate Horizon platform footer ([hp_creator_surface] only)
   CTA → logo → legal row (luxury acquisition close / brand hierarchy).
------------------------------------------------------------------------- */

.hp-mini-link-canvas .hp-mini-link-footer {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin-block-start: clamp(1.62rem, 4.75vw, 2.42rem);
    margin-block-end: 0;
    margin-inline: 0;
    padding-block-start: clamp(1.12rem, 3.45vw, 1.48rem);
    padding-block-end: clamp(0.72rem, 2.45vw, 1.08rem);
    padding-inline: clamp(0.35rem, 2.4vw, 0.72rem);
    border-top: 1px solid var(--hp-surface-edge, rgba(255, 255, 255, 0.0434));
    text-align: center;
    --hp-footer-stack-gap: clamp(0.88rem, 2.65vw, 1.12rem);
    gap: var(--hp-footer-stack-gap);
}

.hp-mini-link-footer__join {
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: min(100%, 18.75rem);
    max-width: 100%;
    min-height: 3.08rem;
    margin: 0;
    padding-block: clamp(0.72rem, 2.15vw, 0.82rem);
    padding-inline: clamp(1rem, 4vw, 1.2rem);
    border-radius: var(--hp-event-cta-radius, clamp(0.88rem, 2.5vw, 0.96rem));
    border: 1px solid color-mix(in srgb, var(--hp-mini-link-accent, #c9a962) 38%, rgba(255, 255, 255, 0.12));
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--hp-mini-link-accent, #c9a962) 11%, rgba(255, 255, 255, 0.068)) 0%,
            rgba(255, 255, 255, 0.024) 100%
        );
    font-size: clamp(0.8125rem, 2.35vw, 0.9375rem);
    font-weight: 620;
    line-height: 1.22;
    letter-spacing: 0.018em;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    color: color-mix(in srgb, var(--hp-mini-link-accent, #c9a962) 78%, rgba(255, 255, 255, 0.9));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.078),
        0 5px 16px rgba(0, 0, 0, 0.2),
        0 0 22px color-mix(in srgb, var(--hp-mini-link-accent, #c9a962) 12%, transparent);
    opacity: 0.98;
}

.hp-mini-link-footer__join:hover {
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--hp-mini-link-accent, #c9a962) 16%, rgba(255, 255, 255, 0.082)) 0%,
            rgba(255, 255, 255, 0.038) 100%
        );
    color: color-mix(in srgb, var(--hp-mini-link-accent-hover, #b8924a) 72%, rgba(255, 255, 255, 0.96));
    border-color: color-mix(in srgb, var(--hp-mini-link-accent-hover, #b8924a) 44%, rgba(255, 255, 255, 0.16));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.092),
        0 7px 20px rgba(0, 0, 0, 0.24),
        0 0 26px color-mix(in srgb, var(--hp-mini-link-accent-hover, #b8924a) 16%, transparent);
    opacity: 1;
}

.hp-mini-link-footer__join:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--hp-mini-link-accent, #c9a962) 62%, #ffffff);
    outline-offset: 3px;
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-mini-link-footer__join {
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--hp-mini-link-accent, #c9a962) 8%, rgba(255, 255, 255, 0.98)) 0%,
            rgba(255, 255, 255, 0.94) 100%
        );
    border-color: color-mix(in srgb, var(--hp-mini-link-accent, #c9a962) 34%, rgba(15, 16, 20, 0.1));
    color: color-mix(in srgb, var(--hp-mini-link-accent-hover, #b8924a) 72%, #1a1408);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 5px 16px rgba(15, 16, 20, 0.08),
        0 0 18px color-mix(in srgb, var(--hp-mini-link-accent, #c9a962) 10%, transparent);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-mini-link-footer__join:hover {
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--hp-mini-link-accent, #c9a962) 12%, rgba(255, 255, 255, 0.99)) 0%,
            rgba(255, 255, 255, 0.97) 100%
        );
    border-color: color-mix(in srgb, var(--hp-mini-link-accent-hover, #b8924a) 38%, rgba(15, 16, 20, 0.12));
}

.hp-mini-link-footer__brand-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
    text-decoration: none;
    color: inherit;
    border-radius: 0.22rem;
}

.hp-mini-link-footer__brand-link:focus-visible {
    outline: 2px solid var(--hp-surface-accent, #5b8cff);
    outline-offset: 3px;
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-mini-link-footer__brand-link {
    padding: 0.32rem 0.48rem 0.28rem;
    background: rgba(11, 11, 15, 0.92);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-mini-link-footer__brand-link:focus-visible {
    outline-offset: 2px;
}

.hp-mini-link-footer__logo {
    display: block;
    width: auto;
    height: auto;
    max-width: clamp(8.25rem, 42vw, 10.75rem);
    max-height: clamp(1.34rem, 4.2vw, 1.58rem);
    margin: 0;
    object-fit: contain;
    opacity: 0.92;
}

.hp-mini-link-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0.28rem 0.72rem;
    row-gap: 0.42rem;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.hp-mini-link-footer__link {
    flex: 0 1 auto;
    max-width: 100%;
    min-height: 1.75rem;
    padding-block: 0.12rem;
    padding-inline: 0.08rem;
    font-size: 0.6016rem;
    font-weight: 440;
    line-height: 1.34;
    letter-spacing: 0.012em;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.368);
    overflow-wrap: anywhere;
    opacity: 0.88;
}

.hp-mini-link-footer__link:hover {
    color: rgba(255, 255, 255, 0.548);
    opacity: 1;
}

.hp-mini-link-footer__link:focus-visible {
    outline: 2px solid var(--hp-surface-accent, #5b8cff);
    outline-offset: 3px;
    border-radius: 0.12rem;
    color: rgba(255, 255, 255, 0.62);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-mini-link-footer__link {
    color: rgba(15, 16, 20, 0.368);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-mini-link-footer__link:hover {
    color: rgba(15, 16, 20, 0.548);
}

.hp-mini-link-footer__powered {
    display: none;
}

@media (min-width: 680px) {
    .hp-mini-link-footer__logo {
        max-width: clamp(9rem, 22vw, 11.25rem);
        max-height: 1.62rem;
        opacity: 0.94;
    }

    .hp-mini-link-footer__join {
        min-height: 2.92rem;
        font-size: clamp(0.8125rem, 2.2vw, 0.9219rem);
        padding-block: clamp(0.68rem, 2vw, 0.76rem);
        padding-inline: clamp(1rem, 3.8vw, 1.2rem);
        border-radius: var(--hp-event-cta-radius, clamp(0.88rem, 2.5vw, 0.96rem));
    }

    .hp-mini-link-footer__links {
        gap: 0.32rem 0.82rem;
    }

    .hp-mini-link-footer__link {
        font-size: 0.625rem;
    }
}

@media (max-width: 679px) {
    .hp-mini-link-canvas .hp-mini-link-footer {
        margin-block-start: clamp(1.35rem, 4.2vw, 1.88rem);
        padding-block-start: clamp(0.96rem, 3.05vw, 1.26rem);
        padding-block-end: max(0.56rem, calc(0.34rem + env(safe-area-inset-bottom, 0px)));
        padding-inline: clamp(0.42rem, 2.8vw, 0.72rem);
        --hp-footer-stack-gap: clamp(0.82rem, 2.45vw, 1.02rem);
    }

    .hp-mini-link-footer__join {
        width: min(100%, 17.25rem);
        min-height: 2.92rem;
        font-size: clamp(0.8125rem, 2.8vw, 0.875rem);
        padding-block: clamp(0.68rem, 2.15vw, 0.76rem);
        padding-inline: clamp(1rem, 4.2vw, 1.12rem);
        border-radius: var(--hp-event-cta-radius, clamp(0.88rem, 2.5vw, 0.96rem));
    }
}

/* Mobile: slightly tighter hero → visual → links rhythm so Featured feels less buried */
@media (max-width: 679px) {
    /* True viewport-width surface (break out of narrow theme / Elementor columns). */
    .hp-mini-link-canvas {
        width: 100vw;
        max-width: 100vw;
        margin-inline: calc(50% - 50vw);
        flex-shrink: 0;
        max-height: none;
        padding-block-start: max(0px, env(safe-area-inset-top, 0px));
        padding-block-end: 2.1rem;
    }

    .hp-mini-link-canvas:has(.hp-creator-hero.hp-creator-hero--image-led) {
        padding-block-end: clamp(0.78rem, 3.2vw, 1.18rem);
    }

    .hp-mini-link-canvas > .hp-creator-hero.hp-creator-section--identity {
        margin-block-end: clamp(0.78rem, 3.1vw, 1.22rem);
        padding-block: clamp(1.02rem, 3.6vw, 1.62rem) clamp(0.32rem, 1.65vw, 0.72rem);
    }

    .hp-mini-link-canvas > .hp-creator-hero.hp-creator-section--identity.hp-creator-hero--image-led {
        margin-block-end: clamp(0.6rem, 2.35vw, 1.02rem);
        padding-block: max(0.03rem, env(safe-area-inset-top, 0px)) clamp(0.16rem, 1.25vw, 0.42rem);
    }

    .hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led {
        padding-block: clamp(0.1rem, 0.95vw, 0.34rem) 0;
    }

    .hp-mini-link-canvas > .hp-creator-visual.hp-creator-section--visual {
        margin-block-end: clamp(0.68rem, 2.35vw, 1.02rem);
    }

    .hp-mini-link-canvas::before {
        opacity: 0.38;
    }

    .hp-mini-link-canvas::after {
        opacity: 0.32;
    }

    /* Mobile top gap: strip common Elementor top inset when shell is first widget. Desktop: @media (min-width: 680px) unchanged. */
    .elementor-section:has(
            > .elementor-container
                > .elementor-column:first-child
                > .elementor-widget-wrap
                > .elementor-element:first-child
                .elementor-widget-container
                > .hp-mini-link-surface-shell
                > .hp-mini-link-canvas
        ) {
        padding-block-start: 0;
        margin-block-start: 0;
    }

    .elementor-section:has(
            > .elementor-container
                > .elementor-column:first-child
                > .elementor-widget-wrap
                > .elementor-element:first-child
                .elementor-widget-container
                > .hp-mini-link-surface-shell
                > .hp-mini-link-canvas
        )
        > .elementor-container {
        padding-block-start: 0;
    }

    .elementor-section:has(
            > .elementor-container
                > .elementor-column:first-child
                > .elementor-widget-wrap
                > .elementor-element:first-child
                .elementor-widget-container
                > .hp-mini-link-surface-shell
                > .hp-mini-link-canvas
        )
        > .elementor-container
        > .elementor-column:first-child {
        padding-block-start: 0;
    }

    .elementor-section:has(
            > .elementor-container
                > .elementor-column:first-child
                > .elementor-widget-wrap
                > .elementor-element:first-child
                .elementor-widget-container
                > .hp-mini-link-surface-shell
                > .hp-mini-link-canvas
        )
        .elementor-widget-wrap
        > .elementor-element:first-child
        .elementor-widget-container:has(> .hp-mini-link-surface-shell > .hp-mini-link-canvas) {
        margin-block-start: 0;
        padding-block-start: 0;
    }
}

/* Where supported, dynamic viewport width avoids classic 100vw vs scrollbar overflow. */
@supports (width: 100dvw) {
    @media (max-width: 679px) {
        .hp-mini-link-canvas {
            width: 100dvw;
            max-width: 100dvw;
            margin-inline: calc(50% - 50dvw);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-creator-link,
    .hp-stream-cta-button {
        transition: none;
    }

    .hp-creator-link:active,
    .hp-stream-cta-button:active {
        transform: none;
    }

    .hp-mini-link-canvas .hp-feed-item {
        transition: none;
    }

    @media (min-width: 680px) {
        .hp-mini-link-surface-shell[data-hp-hero-ambient="1"]::before {
            filter: blur(14px) brightness(0.56) saturate(1.02);
            transform: none;
        }
    }

    @media (max-width: 679px) {
        .hp-mini-link-surface-shell[data-hp-hero-ambient="1"]::before {
            filter: blur(14px) brightness(0.46) saturate(1.02);
            transform: none;
        }
    }
}

/* -------------------------------------------------------------------------
   P4.4.3A-R6 — Global Mini Link canvas rhythm (all presentation templates)
   Hero-first flex ordering even when shortcode markup order drifts; suppress
   any legacy empty pulse placeholder inside the bounded canvas.
------------------------------------------------------------------------- */

.hp-mini-link-surface-shell .hp-mini-link-canvas {
    display: flex;
    flex-direction: column;
}

.hp-mini-link-surface-shell .hp-mini-link-canvas > .hp-creator-hero,
.hp-mini-link-surface-shell .hp-mini-link-canvas > .hp-creator-hero.hp-creator-section--identity {
    order: 10;
}

.hp-mini-link-surface-shell .hp-mini-link-canvas > .hp-creator-section--subscribe {
    order: 12;
}

.hp-mini-link-surface-shell .hp-mini-link-canvas > .hp-feed-wrap,
.hp-mini-link-surface-shell .hp-mini-link-canvas > .hp-creator-section--content-drop-pulse {
    order: 50;
}

.hp-mini-link-surface-shell .hp-mini-link-canvas > .hp-creator-section--media {
    order: 55;
}

.hp-mini-link-surface-shell .hp-mini-link-canvas > .hp-mini-link-footer {
    order: 60;
}

.hp-mini-link-surface-shell .hp-mini-link-canvas > .hp-no-pulses {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
}

/* -------------------------------------------------------------------------
   P4.1 — Featured Offer presentation template (bounded CTA emphasis only)
   Visual order: hero → commerce → primary CTAs → Creator Space → Next Up → More Links → Pulse.
   Flex order pins Pulse after creator sections; lead/editorial link blocks split in PHP.
------------------------------------------------------------------------- */

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas {
    display: flex;
    flex-direction: column;
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-hero {
    order: 10;
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-section--links--featured-offer-lead {
    order: 20;
    margin-block-start: clamp(0.22rem, 0.95vw, 0.48rem);
    margin-block-end: 0;
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-section--visual {
    order: 30;
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-section--links--featured-offer-editorial {
    order: 45;
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-section--links:not(.hp-creator-section--links--featured-offer-lead):not(.hp-creator-section--links--featured-offer-editorial) {
    order: 45;
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-section--event {
    order: 38;
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-section--commerce {
    order: 15;
    margin-block-start: clamp(0.1rem, 0.48vw, 0.28rem);
    margin-block-end: clamp(0.14rem, 0.62vw, 0.32rem);
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-feed-wrap {
    order: 50;
    margin-block-start: clamp(1.02rem, 3.2vw, 1.48rem);
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-mini-link-footer {
    order: 60;
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-section--links--featured-offer-editorial .hp-creator-section__kicker {
    font-weight: 650;
    letter-spacing: 0.06em;
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-link-stack--featured-offer-lead {
    --hp-priority-pair-gap: clamp(0.625rem, 2vw, 0.875rem);
    gap: var(--hp-priority-pair-gap);
    padding: 0;
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-link-stack--featured-offer-lead .hp-creator-link--featured:first-child {
    margin-block-end: 0;
    font-size: 1.082rem;
    box-shadow:
        0 10px 24px rgba(8, 12, 40, 0.24),
        0 18px 48px color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 44%, transparent),
        0 0 0 1px rgba(255, 255, 255, 0.11),
        0 2px 0 rgba(255, 255, 255, 0.32) inset;
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-link-stack--featured-offer-lead .hp-creator-link--ghost {
    opacity: 1;
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-link-stack--featured-offer-editorial {
    gap: clamp(0.5rem, 2.1vw, 0.65rem);
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-link-stack--featured-offer-editorial .hp-creator-link--editorial {
    font-size: 0.94rem;
    font-weight: 580;
    min-height: 3rem;
    opacity: 0.92;
}

/* If Pulse precedes the shell in page markup, de-emphasize so creator arrival reads first */
.hp-feed-wrap + .hp-mini-link-surface-shell.hp-mini-link-template--featured-offer {
    margin-block-start: clamp(0.72rem, 2.8vw, 1.12rem);
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer + .hp-feed-wrap {
    margin-block-start: clamp(1.02rem, 3.2vw, 1.48rem);
}

/* -------------------------------------------------------------------------
   P4.1 — Upcoming Event presentation template (event primary after identity)
   Visual order: hero → event → Creator Space → Start Here → Pulse.
   Empty event: shortcode emits nothing; natural P3 section flow applies.
------------------------------------------------------------------------- */

.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-mini-link-canvas {
    display: flex;
    flex-direction: column;
    --hp-upcoming-event-gap: clamp(0.88rem, 2.35vw, 1.12rem);
}

.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-mini-link-canvas > .hp-creator-hero {
    order: 10;
}

.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-mini-link-canvas > .hp-creator-section--event--upcoming-event-primary {
    order: 20;
    margin-block-start: clamp(0.18rem, 0.85vw, 0.42rem);
    margin-block-end: var(--hp-upcoming-event-gap, clamp(0.88rem, 2.35vw, 1.12rem));
    padding-block-end: 0;
}

.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-mini-link-canvas > .hp-creator-section--visual {
    order: 30;
    margin-block-start: 0;
    margin-block-end: var(--hp-upcoming-event-gap, clamp(0.88rem, 2.35vw, 1.12rem));
}

.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-mini-link-canvas > .hp-creator-section--links {
    order: 35;
    margin-block-start: 0;
    margin-block-end: var(--hp-upcoming-event-gap, clamp(0.88rem, 2.35vw, 1.12rem));
}

.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-mini-link-canvas > .hp-creator-section--event:not(.hp-creator-section--event--upcoming-event-primary) {
    order: 38;
}

.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-mini-link-canvas > .hp-creator-section--commerce {
    order: 37;
    margin-block-start: 0;
    margin-block-end: var(--hp-upcoming-event-gap, clamp(0.88rem, 2.35vw, 1.12rem));
}

.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-mini-link-canvas > .hp-feed-wrap {
    order: 50;
    margin-block-start: clamp(1.02rem, 3.2vw, 1.48rem);
}

.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-mini-link-canvas > .hp-mini-link-footer {
    order: 60;
}

.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-creator-section--event--upcoming-event-primary .hp-creator-section__kicker {
    font-weight: 650;
    letter-spacing: 0.06em;
    margin-block-end: clamp(0.42rem, 1.4vw, 0.56rem);
}

/* Warm dark-glass primary event card — no cool blue halo or outline */
.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-creator-section--event--upcoming-event-primary.hp-creator-section--event--populated::after {
    display: none;
}

.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-creator-section--event--upcoming-event-primary .hp-creator-event-panel__halo {
    display: none;
}

.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-creator-section--event--upcoming-event-primary .hp-creator-event-panel {
    border-color: rgba(255, 255, 255, 0.09);
    background: linear-gradient(
        168deg,
        rgba(255, 255, 255, 0.055) 0%,
        rgba(255, 255, 255, 0.02) 44%,
        rgba(8, 8, 12, 0.38) 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 8px 26px rgba(0, 0, 0, 0.24);
}

.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-creator-section--event--upcoming-event-primary .hp-creator-event-panel__inner {
    padding: clamp(1.22rem, 4vw, 1.52rem) clamp(1.05rem, 4vw, 1.28rem) clamp(1.28rem, 4vw, 1.55rem);
    gap: clamp(0.48rem, 1.9vw, 0.62rem);
}

.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-creator-section--event--upcoming-event-primary .hp-creator-event__headline {
    font-size: clamp(1.1rem, 3.5vw, 1.26rem);
    font-weight: 720;
}

.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-creator-section--event--upcoming-event-primary .hp-creator-event__cta {
    min-height: 3.45rem;
    margin-block-start: clamp(0.28rem, 1.2vw, 0.42rem);
    padding-block: 0.95rem;
    font-size: 1.02rem;
    font-weight: 750;
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-creator-section--event--upcoming-event-primary .hp-creator-event__cta:hover {
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-creator-section--links .hp-creator-section__kicker {
    margin-block-start: 0;
    margin-block-end: clamp(0.4rem, 1.28vw, 0.54rem);
}

.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-creator-section--links .hp-creator-link-stack {
    margin-block-start: 0;
}

.hp-creator-surface-theme-light.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-creator-section--event--upcoming-event-primary .hp-creator-event-panel {
    border-color: rgba(15, 16, 20, 0.08);
    background: linear-gradient(
        168deg,
        rgba(255, 255, 255, 0.94) 0%,
        rgba(250, 248, 246, 0.92) 55%,
        rgba(245, 243, 240, 0.88) 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 8px 24px rgba(15, 16, 20, 0.06);
}

.hp-creator-surface-theme-light.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-creator-section--event--upcoming-event-primary .hp-creator-event-panel__halo {
    display: none;
}

.hp-feed-wrap + .hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event {
    margin-block-start: clamp(0.72rem, 2.8vw, 1.12rem);
}

.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event + .hp-feed-wrap {
    margin-block-start: clamp(1.02rem, 3.2vw, 1.48rem);
}

/* -------------------------------------------------------------------------
   P4.1 — Content Drop presentation template (latest Pulse primary after identity)
   Shell prepends one latest card; full [hp_pulse_feed] inside canvas hidden to avoid dupes.
------------------------------------------------------------------------- */

.hp-mini-link-surface-shell.hp-mini-link-template--content-drop .hp-mini-link-canvas {
    display: flex;
    flex-direction: column;
    --hp-content-drop-gap: clamp(0.88rem, 2.35vw, 1.12rem);
}

.hp-mini-link-surface-shell.hp-mini-link-template--content-drop .hp-mini-link-canvas > .hp-creator-hero {
    order: 10;
}

.hp-mini-link-surface-shell.hp-mini-link-template--content-drop .hp-mini-link-canvas > .hp-creator-section--content-drop-pulse {
    order: 20;
    margin-block-start: clamp(0.52rem, 2.1vw, 0.88rem);
    margin-block-end: var(--hp-content-drop-gap, clamp(0.88rem, 2.35vw, 1.12rem));
}

.hp-mini-link-surface-shell.hp-mini-link-template--content-drop .hp-mini-link-canvas > .hp-creator-section--links {
    order: 25;
    margin-block-start: 0;
    margin-block-end: var(--hp-content-drop-gap, clamp(0.88rem, 2.35vw, 1.12rem));
}

.hp-mini-link-surface-shell.hp-mini-link-template--content-drop .hp-mini-link-canvas > .hp-creator-section--visual {
    order: 30;
    margin-block-start: 0;
    margin-block-end: var(--hp-content-drop-gap, clamp(0.88rem, 2.35vw, 1.12rem));
}

.hp-mini-link-surface-shell.hp-mini-link-template--content-drop .hp-mini-link-canvas > .hp-creator-section--event {
    order: 40;
    margin-block-start: 0;
    margin-block-end: var(--hp-content-drop-gap, clamp(0.88rem, 2.35vw, 1.12rem));
}

.hp-mini-link-surface-shell.hp-mini-link-template--content-drop .hp-mini-link-canvas > .hp-creator-section--commerce {
    order: 35;
    margin-block-start: 0;
    margin-block-end: var(--hp-content-drop-gap, clamp(0.88rem, 2.35vw, 1.12rem));
}

/* Hide embedded full feed inside canvas — primary card is prepended; continuity feed stays outside shell */
.hp-mini-link-surface-shell.hp-mini-link-template--content-drop .hp-mini-link-canvas > .hp-feed-wrap {
    display: none;
}

.hp-mini-link-surface-shell.hp-mini-link-template--content-drop .hp-mini-link-canvas > .hp-mini-link-footer {
    order: 60;
}

.hp-mini-link-surface-shell.hp-mini-link-template--content-drop .hp-creator-section--content-drop-pulse .hp-creator-section__kicker {
    font-weight: 650;
    letter-spacing: 0.06em;
    margin-block-end: clamp(0.4rem, 1.3vw, 0.54rem);
}

.hp-mini-link-surface-shell.hp-mini-link-template--content-drop .hp-feed-wrap--content-drop-primary .hp-feed-item {
    margin-block-end: 0;
}

.hp-mini-link-surface-shell.hp-mini-link-template--content-drop .hp-feed-wrap--content-drop-primary .hp-feed-item.hp-feed-item--spotlight {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 8px 26px rgba(0, 0, 0, 0.22);
}

.hp-mini-link-surface-shell.hp-mini-link-template--content-drop .hp-creator-link-stack:not(.hp-creator-link-stack--priority-lead):not(.hp-creator-link-stack--priority) .hp-creator-link--featured:first-child {
    margin-block-end: clamp(0.38rem, 1.4vw, 0.52rem);
}

.hp-feed-wrap + .hp-mini-link-surface-shell.hp-mini-link-template--content-drop {
    margin-block-start: clamp(0.72rem, 2.8vw, 1.12rem);
}

.hp-mini-link-surface-shell.hp-mini-link-template--content-drop + .hp-feed-wrap {
    margin-block-start: clamp(1.02rem, 3.2vw, 1.48rem);
}

/* -------------------------------------------------------------------------
   P4.2.1 — Hero immersion + primary CTA hierarchy (above-the-fold only)
   Bounded competitive surface upgrade: identity presence, scroll reward,
   priority action pair grouping across all presentation templates.
------------------------------------------------------------------------- */

/* Hero identity rhythm */
.hp-mini-link-canvas .hp-creator-hero__identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.04rem, 0.35vw, 0.12rem);
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.hp-mini-link-canvas > .hp-creator-hero.hp-creator-section--identity {
    margin-block-end: clamp(0.62rem, 2.4vw, 1.08rem);
    padding-block: clamp(1.22rem, 4.2vw, 1.92rem) clamp(0.28rem, 1.4vw, 0.52rem);
}

.hp-mini-link-canvas .hp-creator-hero__avatar {
    width: clamp(6.85rem, 22vw, 7.65rem);
    height: clamp(6.85rem, 22vw, 7.65rem);
    border-width: 2.5px;
    border-color: rgba(255, 255, 255, 0.168);
    box-shadow:
        0 0 0 1px rgba(91, 140, 255, 0.118),
        0 0 0 1px rgba(0, 0, 0, 0.28),
        0 16px 42px rgba(0, 0, 0, 0.36),
        0 0 48px color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 14%, transparent);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-hero__avatar {
    width: clamp(6.85rem, 22vw, 7.65rem);
    height: clamp(6.85rem, 22vw, 7.65rem);
    border-color: rgba(15, 16, 20, 0.108);
    box-shadow:
        0 0 0 1px rgba(47, 111, 232, 0.168),
        0 0 0 1px rgba(255, 255, 255, 0.96),
        0 16px 42px rgba(15, 16, 20, 0.12),
        0 0 42px color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 10%, transparent);
}

.hp-mini-link-canvas .hp-creator-hero__name {
    font-size: clamp(1.58rem, 5.4vw, 2.08rem);
    font-weight: 760;
    letter-spacing: -0.038em;
    line-height: 1.08;
    max-width: 18ch;
    text-wrap: balance;
}

.hp-mini-link-canvas .hp-creator-hero__tagline {
    font-size: clamp(0.9425rem, 2.65vw, 0.9925rem);
    line-height: 1.38;
    color: rgba(255, 255, 255, 0.588);
    max-width: 32ch;
    text-wrap: balance;
    margin-block-start: 0;
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-hero__tagline {
    color: rgba(15, 16, 20, 0.628);
}

.hp-mini-link-canvas .hp-creator-hero__arrival-trust {
    margin-block-start: clamp(0.48rem, 2.4vw, 0.82rem);
    font-size: clamp(0.7825rem, 2.2vw, 0.8125rem);
    color: rgba(255, 255, 255, 0.468);
}

/* Image-led hero: taller opening frame + stronger copy overlay */
.hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__media {
    aspect-ratio: 4 / 5;
    max-height: min(58vh, 27rem);
    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.078),
        0 0 72px color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 8%, transparent);
}

.hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__scrim {
    height: 68%;
    background: linear-gradient(
        to top,
        rgba(11, 11, 15, 0.34) 0%,
        rgba(11, 11, 15, 0.18) 32%,
        rgba(11, 11, 15, 0.04) 58%,
        transparent 86%
    );
}

.hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__copy {
    margin-block-start: clamp(-1.42rem, -4.2vw, -0.68rem);
    padding-block: clamp(0.28rem, 1.6vw, 0.58rem) clamp(0.38rem, 1.8vw, 0.72rem);
}

@media (min-width: 680px) {
    .hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__media {
        max-height: min(52vh, 28rem);
    }
}

/* Priority CTA pair — grouped above editorial stack on all templates */
.hp-mini-link-canvas > .hp-creator-section--links--priority-lead {
    margin-block-start: clamp(0.18rem, 1.1vw, 0.48rem);
    margin-block-end: 0;
}

.hp-mini-link-canvas > .hp-creator-section--links--priority-editorial {
    margin-block-start: clamp(0.88rem, 2.8vw, 1.22rem);
}

/* Open CTA stack — full-width premium buttons above the More Links card (not inset in a utility frame). */
.hp-mini-link-canvas .hp-creator-link-stack--priority-lead {
    --hp-priority-pair-gap: clamp(0.625rem, 2vw, 0.875rem);
    gap: var(--hp-priority-pair-gap);
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-link-stack--priority-lead {
    background: transparent;
    border: none;
    box-shadow: none;
}

.hp-mini-link-canvas .hp-creator-link-stack--priority-lead .hp-creator-link--featured:first-child {
    width: 100%;
}

.hp-mini-link-canvas .hp-creator-link-stack--priority-lead .hp-creator-link--ghost,
.hp-mini-link-canvas .hp-creator-link-stack--priority .hp-creator-link--ghost {
    width: 100%;
}

.hp-mini-link-canvas .hp-creator-link-stack--priority-editorial {
    gap: clamp(0.5rem, 2.05vw, 0.62rem);
}

/* Template flex order: split priority sections follow P4.1 emphasis paths */
.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-section--links--priority-editorial {
    order: 35;
}

.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-mini-link-canvas > .hp-creator-section--links--priority-lead {
    order: 35;
    margin-block-start: 0;
    margin-block-end: 0;
}

.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-mini-link-canvas > .hp-creator-section--links--priority-editorial {
    order: 36;
    margin-block-start: 0;
    margin-block-end: var(--hp-upcoming-event-gap, clamp(0.88rem, 2.35vw, 1.12rem));
}

.hp-mini-link-surface-shell.hp-mini-link-template--content-drop .hp-mini-link-canvas > .hp-creator-section--links--priority-lead {
    order: 25;
    margin-block-start: 0;
    margin-block-end: 0;
}

.hp-mini-link-surface-shell.hp-mini-link-template--content-drop .hp-mini-link-canvas > .hp-creator-section--links--priority-editorial {
    order: 26;
    margin-block-start: 0;
    margin-block-end: var(--hp-content-drop-gap, clamp(0.88rem, 2.35vw, 1.12rem));
}

/* -------------------------------------------------------------------------
   P4.2.2 — Editorial stack density + scroll reward polish (post-hero)
   Richer editorial rhythm, priority→editorial transition, denser cards.
------------------------------------------------------------------------- */

/* Bridge: priority lead hands off to editorial scroll territory */
.hp-mini-link-canvas > .hp-creator-section--links--priority-lead + .hp-creator-section--links--priority-editorial {
    position: relative;
    margin-block-start: clamp(1.08rem, 3.4vw, 1.52rem);
    padding-block-start: clamp(0.62rem, 2.2vw, 0.92rem);
}

.hp-mini-link-canvas > .hp-creator-section--links--priority-lead + .hp-creator-section--links--priority-editorial::before {
    content: "";
    display: block;
    width: min(68%, 14.5rem);
    height: 1px;
    margin: 0 auto clamp(0.72rem, 2.4vw, 1.02rem);
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 28%, rgba(255, 255, 255, 0.12)) 42%,
        color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 28%, rgba(255, 255, 255, 0.12)) 58%,
        transparent 100%
    );
    opacity: 0.72;
    pointer-events: none;
}

.hp-creator-surface-theme-light.hp-mini-link-canvas > .hp-creator-section--links--priority-lead + .hp-creator-section--links--priority-editorial::before {
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 22%, rgba(15, 16, 20, 0.12)) 42%,
        color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 22%, rgba(15, 16, 20, 0.12)) 58%,
        transparent 100%
    );
}

/* Editorial section header — clearer label + scroll whisper */
.hp-mini-link-canvas .hp-creator-section--links--editorial-surface .hp-creator-section__kicker {
    margin-block-end: clamp(0.28rem, 1.1vw, 0.42rem);
    font-size: clamp(0.6875rem, 2vw, 0.7125rem);
    font-weight: 680;
    letter-spacing: 0.132em;
    color: rgba(255, 255, 255, 0.328);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-section--links--editorial-surface .hp-creator-section__kicker {
    color: rgba(15, 16, 20, 0.368);
}

.hp-mini-link-canvas .hp-creator-section--links--editorial-surface .hp-creator-section__continuity-whisper {
    margin-block: 0 clamp(0.52rem, 1.8vw, 0.72rem);
    padding-inline: clamp(0.5rem, 3vw, 1rem);
    text-align: center;
    text-wrap: balance;
}

/* Editorial stack panel — denser card rhythm inside premium frame */
.hp-mini-link-canvas .hp-creator-link-stack--editorial-surface {
    gap: clamp(0.44rem, 1.85vw, 0.58rem);
    padding: clamp(0.62rem, 2.35vw, 0.88rem);
    border-radius: clamp(0.92rem, 2.8vw, 1.18rem);
    background:
        linear-gradient(
            175deg,
            rgba(255, 255, 255, 0.038) 0%,
            rgba(255, 255, 255, 0.014) 48%,
            rgba(6, 6, 10, 0.22) 100%
        );
    border: 1px solid rgba(255, 255, 255, 0.052);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.038),
        0 8px 28px rgba(0, 0, 0, 0.14);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-link-stack--editorial-surface {
    background:
        linear-gradient(
            175deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(247, 248, 252, 0.92) 55%,
            rgba(241, 243, 249, 0.86) 100%
        );
    border-color: rgba(15, 16, 20, 0.068);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 6px 24px rgba(15, 16, 20, 0.058);
}

/* Editorial cards — tighter density, richer touch targets */
.hp-mini-link-canvas .hp-creator-link-stack--editorial-surface .hp-creator-link--editorial {
    position: relative;
    min-height: 3.08rem;
    padding-block: 0.78rem;
    padding-inline: clamp(0.92rem, 3.2vw, 1.12rem);
    font-size: clamp(0.932rem, 2.65vw, 0.962rem);
    font-weight: 590;
    letter-spacing: -0.009em;
    line-height: 1.28;
    border-radius: clamp(0.82rem, 2.4vw, 0.92rem);
    overflow: hidden;
}

.hp-mini-link-canvas .hp-creator-link-stack--editorial-surface .hp-creator-link--editorial::before {
    content: "";
    position: absolute;
    inset-block: 18%;
    inset-inline-start: 0;
    width: 2px;
    border-radius: 0 2px 2px 0;
    background: color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 52%, transparent);
    opacity: 0;
    transition: opacity var(--hp-motion-base) var(--hp-ease-soft);
    pointer-events: none;
}

.hp-mini-link-canvas .hp-creator-link-stack--editorial-surface .hp-creator-link--editorial:first-child {
    background:
        radial-gradient(
            ellipse 130% 110% at 50% -42%,
            color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 7%, transparent) 0%,
            transparent 62%
        ),
        rgba(255, 255, 255, 0.042);
    border-color: rgba(255, 255, 255, 0.078);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-link-stack--editorial-surface .hp-creator-link--editorial:first-child {
    background:
        radial-gradient(
            ellipse 130% 108% at 50% -40%,
            color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 5%, transparent) 0%,
            transparent 60%
        ),
        rgba(255, 255, 255, 0.988);
    border-color: rgba(15, 16, 20, 0.102);
}

@media (hover: hover) and (pointer: fine) {
    .hp-mini-link-canvas .hp-creator-link-stack--editorial-surface .hp-creator-link--editorial:hover {
        transform: translateY(-1px);
    }

    .hp-mini-link-canvas .hp-creator-link-stack--editorial-surface .hp-creator-link--editorial:hover::before {
        opacity: 0.82;
    }
}

.hp-mini-link-canvas .hp-creator-link-stack--editorial-surface .hp-creator-link--editorial:focus-visible {
    outline-offset: 4px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.048) inset,
        0 2px 8px rgba(0, 0, 0, 0.08),
        0 0 0 3px color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 28%, transparent);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-link-stack--editorial-surface .hp-creator-link--editorial:focus-visible {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 2px 8px rgba(15, 16, 20, 0.05),
        0 0 0 3px color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 24%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .hp-mini-link-canvas .hp-creator-link-stack--editorial-surface .hp-creator-link--editorial:hover {
        transform: none;
    }
}

/* Split shortcode path: priority group stays open; editorial card reads as lower-priority utility */
.hp-mini-link-canvas > .hp-creator-section--links--priority-group {
    margin-block-end: 0;
}

.hp-mini-link-canvas > .hp-creator-section--links--priority-group + .hp-creator-section--links--editorial-only {
    margin-block-start: clamp(1.08rem, 3.4vw, 1.52rem);
    padding-block-start: clamp(0.62rem, 2.2vw, 0.92rem);
}

/* Editorial-only path (no priority lead): full-width opening panel */
.hp-mini-link-canvas > .hp-creator-section--links--editorial-only {
    margin-block-start: clamp(0.28rem, 1.2vw, 0.52rem);
}

.hp-mini-link-canvas > .hp-creator-section--links--editorial-only .hp-creator-section__kicker {
    margin-block-start: clamp(0.12rem, 0.8vw, 0.28rem);
}

/* Priority lead: subtle scroll handoff when editorial follows */
.hp-mini-link-canvas > .hp-creator-section--links--priority-lead:has(+ .hp-creator-section--links--priority-editorial) {
    margin-block-end: clamp(0.12rem, 0.6vw, 0.28rem);
}

.hp-mini-link-canvas > .hp-creator-section--links--priority-lead:has(+ .hp-creator-section--links--priority-editorial)::after {
    opacity: 0.048;
}

/* Featured Offer template: preserve P4.1 editorial kicker weight inside P4.2.2 frame */
.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-section--links--featured-offer-editorial.hp-creator-section--links--editorial-surface .hp-creator-section__kicker {
    font-weight: 680;
    letter-spacing: 0.132em;
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-link-stack--featured-offer-editorial.hp-creator-link-stack--editorial-surface .hp-creator-link--editorial {
    min-height: 3.02rem;
    font-size: clamp(0.928rem, 2.6vw, 0.952rem);
    font-weight: 590;
    opacity: 1;
}

/* Empty links — calmer premium placeholder */
.hp-mini-link-canvas .hp-creator-section--links:not(.hp-creator-section--links--populated) .hp-creator-links-quiet {
    padding: clamp(1.08rem, 3.2vw, 1.28rem) clamp(1rem, 3vw, 1.18rem);
    border-radius: clamp(0.92rem, 2.8vw, 1.12rem);
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.038);
}

.hp-mini-link-canvas .hp-creator-section--links:not(.hp-creator-section--links--populated) .hp-creator-links-quiet__title {
    font-size: clamp(0.9375rem, 2.8vw, 0.9625rem);
}

.hp-mini-link-canvas .hp-creator-section--links:not(.hp-creator-section--links--populated) .hp-creator-links-quiet__hint {
    max-width: 34ch;
    margin-inline: auto;
    text-wrap: balance;
}

/* -------------------------------------------------------------------------
   P4.2.3 — Creator Space / supporting section card polish
   Align supporting cards with P4.2.1 hero + P4.2.2 editorial surface rhythm.
------------------------------------------------------------------------- */

/* Supporting section spacing + editorial handoff */
.hp-mini-link-canvas > .hp-creator-section--supporting-surface.hp-creator-section--visual {
    margin-block-start: clamp(0.52rem, 2vw, 0.88rem);
    margin-block-end: var(--hp-section-gap-secondary, clamp(0.94rem, 2.72vw, 1.34rem));
}

.hp-mini-link-canvas > .hp-creator-section--links--priority-editorial + .hp-creator-section--supporting-surface.hp-creator-section--visual,
.hp-mini-link-canvas > .hp-creator-section--links--editorial-only + .hp-creator-section--supporting-surface.hp-creator-section--visual {
    margin-block-start: clamp(0.72rem, 2.6vw, 1.08rem);
}

.hp-mini-link-canvas > .hp-creator-section--supporting-surface.hp-creator-section--event {
    margin-block-start: clamp(0.42rem, 1.6vw, 0.72rem);
}

/* Creator Space — premium surface card aligned with editorial frame */
.hp-mini-link-canvas .hp-creator-visual__card--surface {
    padding-block-end: clamp(0.08rem, 0.5vw, 0.18rem);
    border-radius: clamp(0.98rem, 3vw, 1.22rem);
    border: 1px solid rgba(255, 255, 255, 0.072);
    background:
        linear-gradient(
            172deg,
            rgba(255, 255, 255, 0.052) 0%,
            rgba(255, 255, 255, 0.022) 46%,
            rgba(6, 6, 10, 0.26) 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.052),
        0 10px 32px rgba(0, 0, 0, 0.16),
        0 0 48px color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 5%, transparent);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-visual__card--surface {
    border-color: rgba(15, 16, 20, 0.078);
    background:
        linear-gradient(
            172deg,
            rgba(255, 255, 255, 0.99) 0%,
            rgba(247, 248, 252, 0.94) 54%,
            rgba(241, 243, 249, 0.88) 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 8px 28px rgba(15, 16, 20, 0.062),
        0 0 42px color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 4%, transparent);
}

.hp-mini-link-canvas .hp-creator-visual__card--surface::before {
    content: "";
    position: absolute;
    inset-inline: clamp(0.72rem, 3vw, 1rem);
    top: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 38%, rgba(255, 255, 255, 0.18)) 50%,
        transparent 100%
    );
    opacity: 0.68;
    pointer-events: none;
}

.hp-mini-link-canvas .hp-creator-visual__kicker {
    padding-block-start: clamp(0.82rem, 2.8vw, 1.02rem);
    padding-inline: clamp(0.92rem, 3.2vw, 1.12rem);
    margin-block-end: clamp(0.08rem, 0.5vw, 0.18rem);
    font-size: clamp(0.6875rem, 2vw, 0.7125rem);
    font-weight: 680;
    letter-spacing: 0.132em;
    color: rgba(255, 255, 255, 0.328);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-visual__kicker {
    color: rgba(15, 16, 20, 0.368);
}

.hp-mini-link-canvas .hp-creator-visual__row {
    gap: clamp(0.78rem, 3.1vw, 1.08rem);
    padding: clamp(0.42rem, 1.8vw, 0.62rem) clamp(0.92rem, 3.2vw, 1.12rem) clamp(0.92rem, 3vw, 1.12rem);
}

.hp-mini-link-canvas .hp-creator-visual__mark {
    width: clamp(3.72rem, 12vw, 4.08rem);
    height: clamp(3.72rem, 12vw, 4.08rem);
    border-radius: clamp(0.88rem, 2.6vw, 1rem);
    border-width: 1.5px;
    border-color: rgba(255, 255, 255, 0.142);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 16%, transparent),
        0 0 0 1px rgba(0, 0, 0, 0.22),
        0 8px 22px rgba(0, 0, 0, 0.24),
        0 0 32px color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 8%, transparent);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-visual__mark {
    border-color: rgba(15, 16, 20, 0.094);
    box-shadow:
        0 0 0 1px rgba(47, 111, 232, 0.12),
        0 6px 18px rgba(15, 16, 20, 0.078);
}

.hp-mini-link-canvas .hp-creator-visual__name {
    font-size: clamp(1.02rem, 3vw, 1.12rem);
    font-weight: 740;
    letter-spacing: -0.028em;
    line-height: 1.2;
    margin-block-end: clamp(0.22rem, 1vw, 0.32rem);
}

.hp-mini-link-canvas .hp-creator-visual__copy {
    font-size: clamp(0.8125rem, 2.4vw, 0.8425rem);
    font-weight: 540;
    line-height: 1.54;
    color: rgba(255, 255, 255, 0.568);
    max-width: 36ch;
    text-wrap: pretty;
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-visual__copy {
    color: rgba(15, 16, 20, 0.588);
}

/* Linkable Creator Space — visit affordance */
.hp-mini-link-canvas a.hp-creator-visual__card--link.hp-creator-visual__card--surface {
    transition:
        transform var(--hp-motion-fast) var(--hp-ease-press),
        box-shadow var(--hp-motion-base) var(--hp-ease-soft),
        border-color var(--hp-motion-base) var(--hp-ease-soft);
}

@media (hover: hover) and (pointer: fine) {
    .hp-mini-link-canvas a.hp-creator-visual__card--link.hp-creator-visual__card--surface:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 28%, rgba(255, 255, 255, 0.12));
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.058),
            0 14px 38px rgba(0, 0, 0, 0.2),
            0 0 56px color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 10%, transparent);
    }
}

.hp-mini-link-canvas a.hp-creator-visual__card--link.hp-creator-visual__card--surface:focus-visible {
    outline: 2px solid var(--hp-mini-link-accent, #5b8cff);
    outline-offset: 4px;
}

/* Next Live event panel — supporting surface cohesion */
.hp-mini-link-canvas .hp-creator-section--supporting-surface.hp-creator-section--event .hp-creator-section__kicker {
    margin-block-end: clamp(0.38rem, 1.2vw, 0.52rem);
    font-size: clamp(0.6875rem, 2vw, 0.7125rem);
    font-weight: 680;
    letter-spacing: 0.132em;
    color: rgba(255, 255, 255, 0.328);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-section--supporting-surface.hp-creator-section--event .hp-creator-section__kicker {
    color: rgba(15, 16, 20, 0.368);
}

.hp-mini-link-canvas .hp-creator-event-panel--surface {
    border-radius: clamp(0.98rem, 3vw, 1.22rem);
    border: 1px solid rgba(255, 255, 255, 0.068);
    background:
        linear-gradient(
            172deg,
            rgba(255, 255, 255, 0.048) 0%,
            rgba(255, 255, 255, 0.018) 44%,
            rgba(6, 6, 10, 0.24) 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.048),
        0 10px 32px rgba(0, 0, 0, 0.14);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-event-panel--surface {
    border-color: rgba(15, 16, 20, 0.072);
    background:
        linear-gradient(
            172deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(247, 248, 252, 0.92) 52%,
            rgba(241, 243, 249, 0.86) 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 8px 28px rgba(15, 16, 20, 0.058);
}

.hp-mini-link-canvas .hp-creator-event-panel--surface .hp-creator-event-panel__halo {
    opacity: 0.38;
}

.hp-mini-link-canvas .hp-creator-event-panel--surface .hp-creator-event-panel__inner {
    gap: clamp(0.38rem, 1.4vw, 0.52rem);
    padding: clamp(1.08rem, 3.6vw, 1.38rem) clamp(0.92rem, 3.2vw, 1.12rem) clamp(1.12rem, 3.8vw, 1.42rem);
}

.hp-mini-link-canvas .hp-creator-event-panel--surface .hp-creator-event__headline {
    font-size: clamp(1.08rem, 3.2vw, 1.18rem);
    font-weight: 720;
    letter-spacing: -0.032em;
}

.hp-mini-link-canvas .hp-creator-event-panel--surface .hp-creator-event__meta {
    font-size: clamp(0.8525rem, 2.4vw, 0.8825rem);
    color: rgba(255, 255, 255, 0.548);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-event-panel--surface .hp-creator-event__meta {
    color: rgba(15, 16, 20, 0.568);
}

.hp-mini-link-canvas .hp-creator-event-panel--surface .hp-creator-event__cta {
    margin-block-start: clamp(0.42rem, 1.4vw, 0.58rem);
    min-height: 3.08rem;
    border-radius: clamp(0.88rem, 2.5vw, 0.96rem);
}

@media (hover: hover) and (pointer: fine) {
    .hp-mini-link-canvas .hp-creator-event-panel--surface .hp-creator-event__cta:hover {
        transform: translateY(-1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-mini-link-canvas .hp-creator-event-panel--surface .hp-creator-event__cta:hover {
        transform: none;
    }
}

/* Event empty state — matches P4.2.2 quiet placeholder rhythm */
.hp-mini-link-canvas .hp-creator-section--supporting-surface.hp-creator-section--event:not(.hp-creator-section--event--populated) .hp-creator-event-quiet {
    padding: clamp(1.08rem, 3.2vw, 1.28rem) clamp(1rem, 3vw, 1.18rem);
    border-radius: clamp(0.92rem, 2.8vw, 1.12rem);
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.038);
}

.hp-mini-link-canvas .hp-creator-section--supporting-surface.hp-creator-section--event:not(.hp-creator-section--event--populated) .hp-creator-event-quiet__hint {
    max-width: 34ch;
    margin-inline: auto;
    text-wrap: balance;
}

/* Upcoming Event template: preserve primary event emphasis inside P4.2.3 frame */
.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-creator-section--event--upcoming-event-primary.hp-creator-section--supporting-surface .hp-creator-event-panel--surface {
    border-color: color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 22%, rgba(255, 255, 255, 0.1));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.058),
        0 12px 36px rgba(0, 0, 0, 0.18),
        0 0 52px color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 8%, transparent);
}

.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-creator-section--event--upcoming-event-primary .hp-creator-event-panel--surface .hp-creator-event-panel__halo {
    opacity: 0.52;
}

/* -------------------------------------------------------------------------
   P4.2.3R — Supporting surface visual QA corrections
   Edge definition, hero rhythm, template dead-space, Content Drop pill.
------------------------------------------------------------------------- */

/* Mobile: subtle surface lip so canvas does not dissolve into page background */
@media (max-width: 679px) {
    .hp-mini-link-canvas {
        border: 1px solid color-mix(in srgb, var(--hp-surface-edge) 185%, rgba(255, 255, 255, 0.048));
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.018),
            0 6px 28px rgba(0, 0, 0, 0.112),
            0 14px 42px rgba(0, 0, 0, 0.068);
    }

    .hp-creator-surface-theme-light.hp-mini-link-canvas {
        border-color: color-mix(in srgb, var(--hp-surface-edge) 168%, rgba(15, 16, 20, 0.052));
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.76),
            0 6px 26px rgba(15, 16, 20, 0.058),
            0 12px 36px rgba(15, 16, 20, 0.034);
    }
}

@media (min-width: 680px) {
    .hp-creator-surface-theme-light.hp-mini-link-canvas {
        border-color: color-mix(in srgb, var(--hp-surface-edge) 205%, rgba(15, 16, 20, 0.058));
        box-shadow:
            0 14px 46px rgba(15, 16, 20, 0.088),
            0 26px 68px rgba(15, 16, 20, 0.048),
            0 0 0 1px color-mix(in srgb, var(--hp-mini-link-accent, #2f6fe8) 7%, rgba(15, 16, 20, 0.038)),
            inset 0 1px 0 rgba(255, 255, 255, 0.98),
            inset 0 0 0 1px rgba(255, 255, 255, 0.46),
            inset 1px 0 20px rgba(15, 16, 20, 0.032),
            inset -1px 0 20px rgba(15, 16, 20, 0.032),
            inset 0 -40% 100px -56px color-mix(in srgb, var(--hp-mini-link-accent, #2f6fe8) 7%, transparent),
            inset 0 64% 118px -28px rgba(15, 16, 20, 0.042);
    }
}

/* Hero title + tagline read as one identity block */
.hp-mini-link-canvas .hp-creator-hero__name {
    margin-block-end: 0;
}

.hp-mini-link-canvas .hp-creator-hero__arrival-trust {
    margin-block-start: clamp(0.52rem, 2.1vw, 0.78rem);
}

/* Featured Offer + Upcoming Event: tighten hero-to-first-content gap */
.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-hero.hp-creator-section--identity,
.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-mini-link-canvas > .hp-creator-hero.hp-creator-section--identity {
    margin-block-end: clamp(0.32rem, 1.2vw, 0.58rem);
    padding-block-end: clamp(0.08rem, 0.45vw, 0.22rem);
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-section--links--priority-lead,
.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-section--links--featured-offer-lead {
    margin-block-start: clamp(0.12rem, 0.55vw, 0.32rem);
}

.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-mini-link-canvas > .hp-creator-section--event--upcoming-event-primary {
    margin-block-start: clamp(0.08rem, 0.42vw, 0.28rem);
}

/* Content Drop: tighten hero-to-latest-drop; hide internal Leading pill (Latest drop kicker remains) */
.hp-mini-link-surface-shell.hp-mini-link-template--content-drop .hp-mini-link-canvas > .hp-creator-hero.hp-creator-section--identity {
    margin-block-end: clamp(0.38rem, 1.35vw, 0.68rem);
    padding-block-end: clamp(0.1rem, 0.5vw, 0.24rem);
}

.hp-mini-link-surface-shell.hp-mini-link-template--content-drop .hp-mini-link-canvas > .hp-creator-section--content-drop-pulse {
    margin-block-start: clamp(0.12rem, 0.55vw, 0.32rem);
}

.hp-mini-link-canvas .hp-feed-wrap--content-drop-primary .hp-feed-spotlight-pill {
    display: none;
}

/* -------------------------------------------------------------------------
   P4.2.4 — Hero social / platform strip (existing link data only)
------------------------------------------------------------------------- */

.hp-creator-hero__social-strip {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-block: 0;
}

.hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__social-strip {
    margin-block: 0;
}

/* P4.4.0A-R2 — Global hero identity sequence: name → tagline → social strip
   DOM/markup order is canonical; identity wrapper groups name + tagline. */
.hp-mini-link-canvas .hp-creator-hero__inner:has(.hp-creator-hero__social-strip),
.hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__copy:has(.hp-creator-hero__social-strip) {
    --hp-hero-identity-stack-gap: clamp(0.38rem, 1.45vw, 0.56rem);
    gap: var(--hp-hero-identity-stack-gap);
}

.hp-mini-link-canvas .hp-creator-hero__inner:has(.hp-creator-hero__social-strip) .hp-creator-hero__identity,
.hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__copy:has(.hp-creator-hero__social-strip) .hp-creator-hero__identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.08rem, 0.42vw, 0.18rem);
}

.hp-mini-link-canvas .hp-creator-hero__inner:has(.hp-creator-hero__social-strip) .hp-creator-hero__name,
.hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__copy:has(.hp-creator-hero__social-strip) .hp-creator-hero__name,
.hp-mini-link-canvas .hp-creator-hero__inner:has(.hp-creator-hero__social-strip) .hp-creator-hero__tagline,
.hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__copy:has(.hp-creator-hero__social-strip) .hp-creator-hero__tagline,
.hp-mini-link-canvas .hp-creator-hero__inner:has(.hp-creator-hero__social-strip) .hp-creator-hero__social-strip,
.hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__copy:has(.hp-creator-hero__social-strip) .hp-creator-hero__social-strip {
    margin-block: 0;
}

.hp-mini-link-canvas .hp-creator-hero__inner:has(.hp-creator-hero__social-strip) .hp-creator-hero__social-strip,
.hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__copy:has(.hp-creator-hero__social-strip) .hp-creator-hero__social-strip {
    margin-block-start: clamp(0.06rem, 0.35vw, 0.14rem);
}

.hp-creator-hero__social-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(0.28rem, 1.05vw, 0.42rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp-creator-hero__social-item {
    margin: 0;
    padding: 0;
}

.hp-creator-hero__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.12rem;
    height: 2.12rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.118);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.078) 0%,
            rgba(255, 255, 255, 0.028) 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.068),
        0 2px 8px rgba(0, 0, 0, 0.12);
    text-decoration: none;
    color: rgba(255, 255, 255, 0.882);
    transition:
        transform var(--hp-motion-fast) var(--hp-ease-press),
        border-color var(--hp-motion-base) var(--hp-ease-soft),
        background var(--hp-motion-base) var(--hp-ease-soft),
        box-shadow var(--hp-motion-base) var(--hp-ease-soft),
        color var(--hp-motion-base) var(--hp-ease-soft);
}

.hp-creator-hero__social-icon {
    display: block;
    width: clamp(0.95rem, 2.35vw, 1.05rem);
    height: clamp(0.95rem, 2.35vw, 1.05rem);
    flex-shrink: 0;
}

/* P4.4.1A — text label fallback for registry platforms without bundled SVG */
.hp-creator-hero__social-link:has(.hp-creator-hero__social-label) {
    width: auto;
    min-width: 2.12rem;
    height: auto;
    min-height: 2.12rem;
    padding: 0.28rem 0.62rem;
}

.hp-creator-hero__social-label {
    display: block;
    font-size: clamp(0.62rem, 1.65vw, 0.72rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.1;
    white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
    .hp-creator-hero__social-link:hover {
        transform: translateY(-1px);
        border-color: color-mix(in srgb, var(--hp-mini-link-accent, #c9a962) 38%, rgba(255, 255, 255, 0.14));
        background:
            linear-gradient(
                180deg,
                color-mix(in srgb, var(--hp-mini-link-accent, #c9a962) 18%, rgba(255, 255, 255, 0.08)) 0%,
                color-mix(in srgb, var(--hp-mini-link-accent-hover, #b8924a) 8%, rgba(255, 255, 255, 0.038)) 100%
            );
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.088),
            0 4px 12px rgba(0, 0, 0, 0.14),
            0 0 20px color-mix(in srgb, var(--hp-mini-link-accent, #c9a962) 22%, transparent);
        color: color-mix(in srgb, var(--hp-mini-link-accent, #c9a962) 18%, rgba(255, 255, 255, 0.94));
    }
}

.hp-creator-hero__social-link:focus-visible {
    outline: 2px solid var(--hp-mini-link-accent, #c9a962);
    outline-offset: 3px;
}

.hp-creator-hero__social-link:active {
    transform: scale(0.96);
    border-color: color-mix(in srgb, var(--hp-mini-link-accent-hover, #b8924a) 36%, rgba(255, 255, 255, 0.12));
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-hero__social-link {
    color: rgba(15, 16, 20, 0.812);
    border-color: rgba(15, 16, 20, 0.108);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(245, 246, 252, 0.92) 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 2px 8px rgba(15, 16, 20, 0.048);
}

@media (hover: hover) and (pointer: fine) {
    .hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-hero__social-link:hover {
        border-color: color-mix(in srgb, var(--hp-mini-link-accent, #c9a962) 34%, rgba(15, 16, 20, 0.12));
        background:
            linear-gradient(
                180deg,
                color-mix(in srgb, var(--hp-mini-link-accent, #c9a962) 12%, rgba(255, 255, 255, 0.98)) 0%,
                color-mix(in srgb, var(--hp-mini-link-accent-hover, #b8924a) 6%, rgba(255, 255, 255, 0.96)) 100%
            );
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.98),
            0 4px 12px rgba(15, 16, 20, 0.058),
            0 0 18px color-mix(in srgb, var(--hp-mini-link-accent, #c9a962) 16%, transparent);
        color: color-mix(in srgb, var(--hp-mini-link-accent, #956c55) 42%, rgba(15, 16, 20, 0.88));
    }
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-hero__social-link:focus-visible {
    outline-color: var(--hp-mini-link-accent, #956c55);
}

@media (prefers-reduced-motion: reduce) {
    .hp-creator-hero__social-link:hover {
        transform: none;
    }

    .hp-creator-hero__social-link:active {
        transform: none;
    }
}

.hp-creator-hero__inner:has(.hp-creator-hero__social-strip) .hp-creator-hero__arrival-trust {
    margin-block-start: clamp(0.38rem, 1.45vw, 0.58rem);
}

/* -------------------------------------------------------------------------
   P4.3.1R — Featured commerce hierarchy + creator-first editorial stack
   Commerce uses flex order so it never visually precedes hero/identity,
   even when the shortcode appears earlier in page markup.
------------------------------------------------------------------------- */

.hp-mini-link-canvas:has(> .hp-creator-section--commerce) {
    display: flex;
    flex-direction: column;
}

.hp-mini-link-canvas:has(> .hp-creator-section--commerce) > .hp-creator-hero {
    order: 10;
}

.hp-mini-link-canvas:has(> .hp-creator-section--commerce) > .hp-creator-section--content-drop-pulse,
.hp-mini-link-canvas:has(> .hp-creator-section--commerce) > .hp-creator-section--event--upcoming-event-primary {
    order: 20;
}

.hp-mini-link-canvas:has(> .hp-creator-section--commerce) > .hp-creator-section--links--priority-lead,
.hp-mini-link-canvas:has(> .hp-creator-section--commerce) > .hp-creator-section--links--featured-offer-lead {
    order: 20;
}

.hp-mini-link-canvas:has(> .hp-creator-section--commerce) > .hp-creator-section--visual {
    order: 30;
}

.hp-mini-link-canvas:has(> .hp-creator-section--commerce) > .hp-creator-section--links--priority-editorial,
.hp-mini-link-canvas:has(> .hp-creator-section--commerce) > .hp-creator-section--links--featured-offer-editorial,
.hp-mini-link-canvas:has(> .hp-creator-section--commerce) > .hp-creator-section--links:not(.hp-creator-section--links--priority-lead):not(.hp-creator-section--links--priority-editorial):not(.hp-creator-section--links--featured-offer-lead):not(.hp-creator-section--links--featured-offer-editorial) {
    order: 32;
}

.hp-mini-link-canvas:has(> .hp-creator-section--commerce) > .hp-creator-section--commerce {
    order: 37;
    margin-block-start: 0;
    margin-block-end: var(--hp-section-gap-secondary, clamp(0.94rem, 2.72vw, 1.34rem));
}

.hp-mini-link-canvas:has(> .hp-creator-section--commerce) > .hp-creator-section--event {
    order: 40;
}

.hp-mini-link-canvas:has(> .hp-creator-section--commerce) > .hp-feed-wrap {
    order: 50;
}

.hp-mini-link-canvas:has(> .hp-creator-section--commerce) > .hp-mini-link-footer {
    order: 60;
}

/* -------------------------------------------------------------------------
   P4.3.1R2 — Sensitive outbound warning + loading transition
------------------------------------------------------------------------- */

html.hp-sensitive-outbound-open {
    overflow: hidden;
}

.hp-sensitive-outbound {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: block;
    padding: 0;
    background: rgba(6, 6, 10, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hp-sensitive-outbound[hidden] {
    display: none !important;
}

.hp-sensitive-outbound__modal,
.hp-sensitive-outbound__loading {
    width: min(100%, 22rem);
}

.hp-sensitive-outbound__modal {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: none;
    padding: clamp(1rem, 4vw, 1.5rem);
}

.hp-sensitive-outbound__loading {
    display: grid;
    place-items: center;
}

.hp-sensitive-outbound__modal[hidden],
.hp-sensitive-outbound__loading[hidden] {
    display: none !important;
}

.hp-sensitive-outbound__modal-card,
.hp-sensitive-outbound__loading-card {
    position: relative;
    width: min(100%, 22rem);
    border-radius: 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(
        168deg,
        rgba(255, 255, 255, 0.07) 0%,
        rgba(255, 255, 255, 0.028) 42%,
        rgba(8, 8, 12, 0.72) 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 18px 48px rgba(0, 0, 0, 0.42);
    padding: clamp(1.15rem, 4.2vw, 1.45rem) clamp(1.05rem, 4vw, 1.3rem);
    text-align: center;
    color: rgba(255, 255, 255, 0.92);
}

.hp-sensitive-outbound__dismiss {
    position: absolute;
    inset-block-start: 0.62rem;
    inset-inline-end: 0.62rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
    transition:
        background var(--hp-motion-fast, 0.15s) var(--hp-ease-soft, ease),
        border-color var(--hp-motion-fast, 0.15s) var(--hp-ease-soft, ease),
        color var(--hp-motion-fast, 0.15s) var(--hp-ease-soft, ease);
}

.hp-sensitive-outbound__dismiss-icon {
    font-size: 1.35rem;
    line-height: 1;
    transform: translateY(-0.04rem);
}

.hp-sensitive-outbound__dismiss:hover {
    color: rgba(255, 255, 255, 0.96);
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.1);
}

.hp-sensitive-outbound__dismiss:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.42);
    outline-offset: 2px;
}

.hp-sensitive-outbound__brand,
.hp-sensitive-outbound__loading-brand {
    margin: 0 0 0.65rem;
    display: flex;
    justify-content: center;
}

.hp-sensitive-outbound__brand-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0.92;
    transition: opacity var(--hp-motion-fast, 0.15s) var(--hp-ease-soft, ease);
}

.hp-sensitive-outbound__brand-link:hover {
    opacity: 1;
}

.hp-sensitive-outbound__brand-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.42);
    outline-offset: 3px;
    border-radius: 0.25rem;
}

.hp-sensitive-outbound__brand-logo {
    display: block;
    width: min(100%, 9.5rem);
    height: auto;
    max-height: 1.65rem;
    object-fit: contain;
}

.hp-sensitive-outbound__title,
.hp-sensitive-outbound__loading-title {
    margin: 0 0 0.55rem;
    font-size: clamp(1.08rem, 3.4vw, 1.22rem);
    font-weight: 720;
    letter-spacing: -0.024em;
    line-height: 1.24;
}

.hp-sensitive-outbound__body,
.hp-sensitive-outbound__loading-body {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
}

.hp-sensitive-outbound__secondary {
    margin: 0.72rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.48;
    color: rgba(255, 255, 255, 0.58);
}

.hp-sensitive-outbound__continue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3rem;
    margin-top: 1rem;
    padding: 0.82rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.85rem;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.012em;
    color: #fff;
    background: linear-gradient(
        135deg,
        var(--hp-mini-link-accent, #c9a962) 0%,
        color-mix(in srgb, var(--hp-mini-link-accent-hover, #b8924a) 78%, #3a2a12) 100%
    );
    box-shadow:
        0 10px 24px color-mix(in srgb, var(--hp-mini-link-accent, #c9a962) 28%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    cursor: pointer;
}

.hp-sensitive-outbound__continue:hover {
    background: linear-gradient(
        135deg,
        var(--hp-mini-link-accent-hover, #b8924a) 0%,
        color-mix(in srgb, var(--hp-mini-link-accent-hover, #b8924a) 72%, #3a2a12) 100%
    );
}

.hp-sensitive-outbound__continue:focus-visible {
    outline: 2px solid var(--hp-mini-link-accent, #c9a962);
    outline-offset: 3px;
}

.hp-sensitive-outbound__icon {
    display: block;
    margin: 0 auto 0.65rem;
    color: color-mix(in srgb, var(--hp-mini-link-accent, #c9a962) 78%, rgba(255, 255, 255, 0.88));
}

.hp-sensitive-outbound__dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.34rem;
    margin-top: 0.85rem;
}

.hp-sensitive-outbound__dots span {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--hp-mini-link-accent, #c9a962) 72%, rgba(255, 255, 255, 0.72));
    animation: hp-sensitive-outbound-dot 1.1s ease-in-out infinite;
}

.hp-sensitive-outbound__dots span:nth-child(2) {
    animation-delay: 0.16s;
}

.hp-sensitive-outbound__dots span:nth-child(3) {
    animation-delay: 0.32s;
}

@keyframes hp-sensitive-outbound-dot {
    0%,
    80%,
    100% {
        opacity: 0.28;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-sensitive-outbound__dots span {
        animation: none;
        opacity: 0.72;
    }
}

/* P4.3.1R2 — Hero copy legibility with lighter scrim */
.hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__name,
.hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__tagline,
.hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__arrival-trust {
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.42),
        0 6px 18px rgba(0, 0, 0, 0.28);
}

/* -------------------------------------------------------------------------
   P4.3.1R5 — Mobile identity hierarchy + CTA rhythm polish
   Presentation-only: equidistant priority CTA stack, earlier mobile identity,
   stronger name/tagline weighting. No routing, commerce, or flow changes.
------------------------------------------------------------------------- */

/* Priority CTA pair — open full-width stack; paired internal rhythm via gap only */
.hp-mini-link-canvas .hp-creator-link-stack--priority-lead,
.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-link-stack--featured-offer-lead {
    --hp-priority-lead-inset: 0;
    --hp-priority-pair-gap: clamp(0.625rem, 2vw, 0.875rem);
    gap: var(--hp-priority-pair-gap);
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.hp-mini-link-canvas .hp-creator-link-stack--priority-lead .hp-creator-link--featured:first-child,
.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-link-stack--featured-offer-lead .hp-creator-link--featured:first-child {
    margin-block-end: 0;
    width: 100%;
}

.hp-mini-link-canvas .hp-creator-link-stack--priority-lead .hp-creator-link--featured + .hp-creator-link--ghost,
.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-link-stack--featured-offer-lead .hp-creator-link--featured + .hp-creator-link--ghost {
    margin-block-start: 0;
}

/* Tagline — premium supporting copy (all viewports) */
.hp-mini-link-canvas .hp-creator-hero__tagline {
    font-size: clamp(1rem, 2.85vw, 1.0625rem);
    line-height: 1.46;
    color: rgba(255, 255, 255, 0.632);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-hero__tagline {
    color: rgba(15, 16, 20, 0.662);
}

@media (max-width: 679px) {
    /* Image-led hero: lower vertical occupancy so identity arrives earlier */
    .hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__media {
        aspect-ratio: 5 / 6;
        max-height: min(44vh, 19.5rem);
    }

    .hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__scrim {
        height: 62%;
    }

    .hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__copy {
        margin-block-start: clamp(-0.98rem, -2.85vw, -0.48rem);
        padding-block: clamp(0.24rem, 1.35vw, 0.48rem) clamp(0.32rem, 1.55vw, 0.62rem);
    }

    /* Creator name — confident mobile authority without headline overscale */
    .hp-mini-link-canvas .hp-creator-hero__name {
        font-size: clamp(1.72rem, 7.2vw, 2rem);
        line-height: 1.06;
    }

    .hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__name {
        font-size: clamp(1.78rem, 7.4vw, 2.02rem);
    }

    .hp-mini-link-canvas .hp-creator-hero__tagline {
        font-size: clamp(1.02rem, 3.05vw, 1.075rem);
        line-height: 1.48;
        color: rgba(255, 255, 255, 0.652);
    }

    .hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-hero__tagline {
        color: rgba(15, 16, 20, 0.682);
    }

    .hp-mini-link-canvas .hp-creator-hero__inner:has(.hp-creator-hero__social-strip),
    .hp-mini-link-canvas .hp-creator-hero.hp-creator-hero--image-led .hp-creator-hero__copy:has(.hp-creator-hero__social-strip) {
        --hp-hero-identity-stack-gap: clamp(0.38rem, 1.55vw, 0.54rem);
        gap: var(--hp-hero-identity-stack-gap);
    }
}

/* -------------------------------------------------------------------------
   P4.3.1R6 — Warning dismissal UX + template differentiation + route copy
------------------------------------------------------------------------- */

/* Creator Arrival: tighten identity → primary CTA flow */
.hp-mini-link-surface-shell.hp-mini-link-template--creator-arrival .hp-mini-link-canvas > .hp-creator-hero.hp-creator-section--identity {
    margin-block-end: clamp(0.22rem, 0.95vw, 0.42rem);
    padding-block-end: clamp(0.04rem, 0.35vw, 0.14rem);
}

.hp-mini-link-surface-shell.hp-mini-link-template--creator-arrival .hp-mini-link-canvas > .hp-creator-section--links--priority-lead {
    margin-block-start: clamp(0.06rem, 0.38vw, 0.22rem);
}

/* Featured Offer: commerce sits directly beneath identity (offer-led after arrival) */
.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-section--commerce.hp-creator-section--commerce--populated {
    order: 15;
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-section--links--featured-offer-lead {
    order: 20;
}

/* -------------------------------------------------------------------------
   P4.3.1R7 — Featured Offer editorial premium refinement
   Presentation hierarchy: identity → product → action → ecosystem → urgency → utility.
------------------------------------------------------------------------- */

/* §1 — Commerce card: curated editorial weight (below CTA stack authority) */
.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-commerce-card__body {
    gap: 0.2rem;
    padding: clamp(0.62rem, 2.15vw, 0.76rem) clamp(0.78rem, 2.55vw, 0.92rem) clamp(0.68rem, 2.25vw, 0.82rem);
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-section--commerce {
    margin-block-end: clamp(0.08rem, 0.38vw, 0.22rem);
}

/* §1 — CTA stack: open premium pair above editorial utility card */
.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-link-stack--featured-offer-lead {
    --hp-priority-lead-inset: 0;
    --hp-priority-pair-gap: clamp(0.625rem, 2vw, 0.875rem);
    gap: var(--hp-priority-pair-gap);
    padding: 0;
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-link-stack--featured-offer-lead .hp-creator-link--featured:first-child {
    margin-block-end: 0;
    width: 100%;
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-link-stack--featured-offer-lead .hp-creator-link--featured + .hp-creator-link--ghost {
    margin-block-start: 0;
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-section--links--featured-offer-lead {
    margin-block-start: clamp(0.16rem, 0.72vw, 0.36rem);
}

/* §2 — Event before More Links (template-scoped order reinforcement) */
.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-section--event {
    order: 38;
    margin-block-start: clamp(0.38rem, 1.35vw, 0.62rem);
    margin-block-end: clamp(0.22rem, 0.85vw, 0.42rem);
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-section--links--featured-offer-editorial,
.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-section--links:not(.hp-creator-section--links--featured-offer-lead):not(.hp-creator-section--links--featured-offer-editorial) {
    order: 45;
    margin-block-start: clamp(0.28rem, 1.05vw, 0.48rem);
    margin-block-end: 0;
}

/* §3 — More Links: secondary navigation rhythm */
.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-section--links--featured-offer-editorial .hp-creator-section__kicker {
    margin-block-end: clamp(0.3rem, 1.05vw, 0.44rem);
    font-weight: 640;
    letter-spacing: 0.118em;
    color: rgba(255, 255, 255, 0.312);
}

.hp-creator-surface-theme-light.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-section--links--featured-offer-editorial .hp-creator-section__kicker {
    color: rgba(15, 16, 20, 0.388);
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-link-stack--featured-offer-editorial {
    gap: clamp(0.38rem, 1.62vw, 0.5rem);
    padding: clamp(0.48rem, 1.75vw, 0.65rem);
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-link-stack--featured-offer-editorial .hp-creator-link--editorial {
    min-height: 2.92rem;
    padding-block: 0.68rem;
    font-size: clamp(0.918rem, 2.55vw, 0.942rem);
    font-weight: 575;
    opacity: 0.96;
}

/* §4 — Footer luminance recovery (luxury acquisition close) */
.hp-mini-link-canvas .hp-mini-link-footer {
    margin-block-start: clamp(1.28rem, 3.85vw, 2.05rem);
    padding-block-start: clamp(0.98rem, 3.05vw, 1.32rem);
    border-top-color: rgba(255, 255, 255, 0.058);
}

.hp-mini-link-canvas .hp-mini-link-footer__join {
    opacity: 1;
}

.hp-mini-link-canvas .hp-mini-link-footer__link {
    color: rgba(255, 255, 255, 0.352);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-mini-link-footer__link {
    color: rgba(15, 16, 20, 0.352);
}

.hp-mini-link-canvas .hp-mini-link-footer__logo {
    opacity: 0.94;
}

@media (max-width: 679px) {
    .hp-mini-link-canvas .hp-mini-link-footer {
        margin-block-start: clamp(1.12rem, 3.55vw, 1.62rem);
        padding-block-start: clamp(0.88rem, 2.75vw, 1.12rem);
    }
}

/* §5 — Commerce mobile image fill handled globally (P4.2.5). */

/* §6 — Creator Space premium balance (spacing only; surface frame is P4.4.0B) */
.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-visual__row {
    align-items: center;
    gap: clamp(0.72rem, 2.85vw, 0.98rem);
    padding: clamp(0.48rem, 1.65vw, 0.68rem) clamp(0.88rem, 3vw, 1.08rem) clamp(0.82rem, 2.75vw, 1.02rem);
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-visual__mark {
    width: clamp(3.92rem, 12.5vw, 4.28rem);
    height: clamp(3.92rem, 12.5vw, 4.28rem);
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-visual__name {
    margin-block-end: clamp(0.16rem, 0.75vw, 0.26rem);
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-visual__copy {
    line-height: 1.48;
    color: rgba(255, 255, 255, 0.598);
}

.hp-creator-surface-theme-light.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-visual__copy {
    color: rgba(15, 16, 20, 0.612);
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-section--visual {
    margin-block-end: clamp(0.28rem, 1.05vw, 0.48rem);
}

/* -------------------------------------------------------------------------
   P4.4.0A — No Links presentation template (bounded link omission)
   Visual order: hero → commerce → Creator Space → event → Pulse → footer.
   Priority and editorial link sections are suppressed in PHP; rhythm rebalanced here.
------------------------------------------------------------------------- */

.hp-mini-link-surface-shell.hp-mini-link-template--no-links .hp-mini-link-canvas {
    display: flex;
    flex-direction: column;
    --hp-no-links-gap: clamp(0.88rem, 2.35vw, 1.12rem);
}

.hp-mini-link-surface-shell.hp-mini-link-template--no-links .hp-mini-link-canvas > .hp-creator-hero {
    order: 10;
    margin-block-end: clamp(0.52rem, 1.65vw, 0.88rem);
    padding-block-end: clamp(0.18rem, 0.85vw, 0.38rem);
}

.hp-mini-link-surface-shell.hp-mini-link-template--no-links .hp-mini-link-canvas > .hp-creator-section--commerce {
    order: 20;
    margin-block-start: clamp(0.08rem, 0.42vw, 0.22rem);
    margin-block-end: var(--hp-no-links-gap, clamp(0.88rem, 2.35vw, 1.12rem));
}

.hp-mini-link-surface-shell.hp-mini-link-template--no-links .hp-mini-link-canvas > .hp-creator-section--visual {
    order: 30;
    margin-block-end: var(--hp-no-links-gap, clamp(0.88rem, 2.35vw, 1.12rem));
}

.hp-mini-link-surface-shell.hp-mini-link-template--no-links .hp-mini-link-canvas > .hp-creator-section--event {
    order: 40;
    margin-block-end: var(--hp-no-links-gap, clamp(0.88rem, 2.35vw, 1.12rem));
}

.hp-mini-link-surface-shell.hp-mini-link-template--no-links .hp-mini-link-canvas > .hp-feed-wrap,
.hp-mini-link-surface-shell.hp-mini-link-template--no-links .hp-mini-link-canvas > .hp-creator-section--content-drop-pulse {
    order: 50;
    margin-block-start: clamp(0.72rem, 2.2vw, 1.08rem);
    margin-block-end: var(--hp-no-links-gap, clamp(0.88rem, 2.35vw, 1.12rem));
}

.hp-mini-link-surface-shell.hp-mini-link-template--no-links .hp-mini-link-canvas > .hp-mini-link-footer {
    order: 60;
    margin-block-start: clamp(0.52rem, 1.55vw, 0.92rem);
}

.hp-feed-wrap + .hp-mini-link-surface-shell.hp-mini-link-template--no-links {
    margin-block-start: clamp(0.72rem, 2.8vw, 1.12rem);
}

.hp-mini-link-surface-shell.hp-mini-link-template--no-links + .hp-feed-wrap {
    margin-block-start: clamp(1.02rem, 3.2vw, 1.48rem);
}

/* -------------------------------------------------------------------------
   P4.4.0B — Supporting card visual unification (global; all templates)
   Creator Space surface card is the baseline for merch, Creator Space, and event.
------------------------------------------------------------------------- */

.hp-mini-link-canvas .hp-creator-visual__card--surface,
.hp-mini-link-canvas .hp-creator-commerce-card,
.hp-mini-link-canvas .hp-creator-event-panel--surface {
    border-radius: var(--hp-supporting-card-radius);
    border: 1px solid var(--hp-supporting-card-border);
    background: var(--hp-supporting-card-bg);
    box-shadow: var(--hp-supporting-card-shadow);
    transition:
        transform var(--hp-motion-fast) var(--hp-ease-press),
        border-color var(--hp-motion-base) var(--hp-ease-soft),
        box-shadow var(--hp-motion-base) var(--hp-ease-soft);
}

.hp-mini-link-canvas a.hp-creator-visual__card--link.hp-creator-visual__card--surface,
.hp-mini-link-canvas .hp-creator-commerce-card {
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .hp-mini-link-canvas .hp-creator-commerce-card:hover,
    .hp-mini-link-canvas a.hp-creator-visual__card--link.hp-creator-visual__card--surface:hover,
    .hp-mini-link-canvas .hp-creator-event-panel--surface:hover {
        transform: translateY(var(--hp-supporting-card-hover-lift));
        border-color: var(--hp-supporting-card-hover-border);
        box-shadow: var(--hp-supporting-card-hover-shadow);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-mini-link-canvas .hp-creator-commerce-card:hover,
    .hp-mini-link-canvas a.hp-creator-visual__card--link.hp-creator-visual__card--surface:hover,
    .hp-mini-link-canvas .hp-creator-event-panel--surface:hover {
        transform: none;
    }
}

.hp-mini-link-canvas .hp-creator-event-panel--surface .hp-creator-event__cta {
    border-radius: var(--hp-event-cta-radius);
}

.hp-mini-link-canvas .hp-mini-link-footer__join {
    border-radius: var(--hp-event-cta-radius);
    min-height: 3.08rem;
    padding-block: clamp(0.72rem, 2.15vw, 0.82rem);
    padding-inline: clamp(1rem, 4vw, 1.2rem);
    font-size: clamp(0.8525rem, 2.4vw, 0.9375rem);
    font-weight: 620;
    letter-spacing: -0.01em;
    white-space: normal;
    text-wrap: balance;
}

/* -------------------------------------------------------------------------
   P4.4.0B-R3 — Global header-to-body transition divider (all templates)
   Tuned identity ::after seam; footer-adjacent tonal language.
------------------------------------------------------------------------- */

.hp-mini-link-canvas > .hp-creator-hero.hp-creator-section--identity,
.hp-mini-link-surface-shell.hp-mini-link-template--creator-arrival .hp-mini-link-canvas > .hp-creator-hero.hp-creator-section--identity,
.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-hero.hp-creator-section--identity,
.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-mini-link-canvas > .hp-creator-hero.hp-creator-section--identity,
.hp-mini-link-surface-shell.hp-mini-link-template--content-drop .hp-mini-link-canvas > .hp-creator-hero.hp-creator-section--identity,
.hp-mini-link-surface-shell.hp-mini-link-template--no-links .hp-mini-link-canvas > .hp-creator-hero {
    padding-block-end: clamp(0.1rem, 0.45vw, 0.24rem);
    margin-block-end: clamp(0.52rem, 1.75vw, 0.88rem);
}

.hp-mini-link-canvas > .hp-creator-hero.hp-creator-section--identity + .hp-creator-section,
.hp-mini-link-canvas > .hp-creator-hero.hp-creator-section--identity + .hp-feed-wrap {
    margin-block-start: 0;
}

@media (max-width: 679px) {
    .hp-mini-link-canvas {
        --hp-header-body-divider-width: min(100%, 13.25rem);
        --hp-header-body-divider-gap-above: clamp(0.42rem, 1.65vw, 0.62rem);
        --hp-header-body-divider-gap-below: clamp(0.36rem, 1.35vw, 0.54rem);
    }
}

/* -------------------------------------------------------------------------
   P4.4.5 — Priority CTA pair spacing (paired stack rhythm)
   Small controlled gap between featured + ghost; larger handoff after the pair.
------------------------------------------------------------------------- */

.hp-mini-link-canvas .hp-creator-link-stack--priority-lead,
.hp-mini-link-canvas .hp-creator-link-stack--priority,
.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-link-stack--featured-offer-lead {
    --hp-priority-pair-gap: clamp(0.625rem, 2vw, 0.875rem);
    --hp-priority-cta-height: clamp(3rem, 9vw, 3.5rem);
    --hp-priority-cta-padding-block: clamp(0.875rem, 2.55vw, 1rem);
    gap: var(--hp-priority-pair-gap);
}

.hp-mini-link-canvas .hp-creator-link-stack--priority-lead .hp-creator-link--featured,
.hp-mini-link-canvas .hp-creator-link-stack--priority .hp-creator-link--featured,
.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-link-stack--featured-offer-lead .hp-creator-link--featured:first-child {
    margin-block-end: 0;
}

.hp-mini-link-canvas .hp-creator-link-stack--priority-lead .hp-creator-link--featured + .hp-creator-link--ghost,
.hp-mini-link-canvas .hp-creator-link-stack--priority .hp-creator-link--featured + .hp-creator-link--ghost,
.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-link-stack--featured-offer-lead .hp-creator-link--featured + .hp-creator-link--ghost {
    margin-block-start: 0;
}

/* Larger section break after the complete priority pair (not before More Links bridge). */
.hp-mini-link-canvas > .hp-creator-section--links--priority-group:not(:has(+ .hp-creator-section--links--editorial-only)),
.hp-mini-link-canvas > .hp-creator-section--links--priority-lead:not(:has(+ .hp-creator-section--links--priority-editorial)),
.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-section--links--featured-offer-lead:not(:has(+ .hp-creator-section--links--featured-offer-editorial)) {
    margin-block-end: clamp(1.375rem, 3.8vw, 2rem);
}

.hp-mini-link-canvas > .hp-creator-section--links--priority-group + .hp-creator-section--supporting-surface,
.hp-mini-link-canvas > .hp-creator-section--links--priority-group + .hp-creator-section--commerce,
.hp-mini-link-canvas > .hp-creator-section--links--priority-group + .hp-creator-section--event,
.hp-mini-link-canvas > .hp-creator-section--links--priority-group + .hp-creator-section--subscribe,
.hp-mini-link-canvas > .hp-creator-section--links--priority-lead + .hp-creator-section--supporting-surface,
.hp-mini-link-canvas > .hp-creator-section--links--priority-lead + .hp-creator-section--commerce,
.hp-mini-link-canvas > .hp-creator-section--links--priority-lead + .hp-creator-section--event,
.hp-mini-link-canvas > .hp-creator-section--links--priority-lead + .hp-creator-section--subscribe,
.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-section--links--featured-offer-lead + .hp-creator-section--supporting-surface,
.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-section--links--featured-offer-lead + .hp-creator-section--commerce,
.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-section--links--featured-offer-lead + .hp-creator-section--event,
.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-section--links--featured-offer-lead + .hp-creator-section--subscribe {
    margin-block-start: clamp(1.375rem, 3.8vw, 2rem);
}

.hp-mini-link-canvas > .hp-creator-section--subscribe + .hp-creator-section--supporting-surface.hp-creator-section--visual,
.hp-mini-link-canvas > .hp-creator-section--subscribe + .hp-creator-section--commerce,
.hp-mini-link-canvas > .hp-creator-section--subscribe + .hp-creator-section--event {
    margin-block-start: 0;
}

/* -------------------------------------------------------------------------
   P4.4.5-R2 — Priority CTA height parity + ghost secondary lift
   Shared structural height for featured/ghost pair; ghost premium above More Links.
------------------------------------------------------------------------- */

.hp-mini-link-canvas .hp-creator-link-stack--priority-lead .hp-creator-link--featured,
.hp-mini-link-canvas .hp-creator-link-stack--priority .hp-creator-link--featured,
.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-link-stack--featured-offer-lead .hp-creator-link--featured {
    min-height: var(--hp-priority-cta-height, clamp(3rem, 9vw, 3.5rem));
    padding-block: var(--hp-priority-cta-padding-block, clamp(0.875rem, 2.55vw, 1rem));
    width: 100%;
}

.hp-mini-link-canvas .hp-creator-link-stack--priority-lead .hp-creator-link--ghost,
.hp-mini-link-canvas .hp-creator-link-stack--priority .hp-creator-link--ghost,
.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-link-stack--featured-offer-lead .hp-creator-link--ghost {
    min-height: var(--hp-priority-cta-height, clamp(3rem, 9vw, 3.5rem));
    padding-block: var(--hp-priority-cta-padding-block, clamp(0.875rem, 2.55vw, 1rem));
    padding-inline: 1.18rem;
    width: 100%;
    font-size: clamp(0.962rem, 2.75vw, 0.998rem);
    font-weight: 680;
    letter-spacing: -0.01em;
    line-height: 1.24;
    border-radius: 1.05rem;
    border-width: max(1.5px, 0.055rem);
    color: rgba(255, 255, 255, 0.912);
    border-color: color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 38%, rgba(255, 255, 255, 0.22));
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.078) 0%,
            rgba(255, 255, 255, 0.018) 100%
        ),
        linear-gradient(
            142deg,
            rgba(255, 255, 255, 0.042) 0%,
            rgba(8, 10, 16, 0.72) 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),
        0 8px 22px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.06);
}

@media (hover: hover) and (pointer: fine) {
    .hp-mini-link-canvas .hp-creator-link-stack--priority-lead .hp-creator-link--ghost:hover,
    .hp-mini-link-canvas .hp-creator-link-stack--priority .hp-creator-link--ghost:hover,
    .hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-link-stack--featured-offer-lead .hp-creator-link--ghost:hover {
        color: rgba(255, 255, 255, 0.948);
        border-color: color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 48%, rgba(255, 255, 255, 0.24));
        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.1) 0%,
                rgba(255, 255, 255, 0.028) 100%
            ),
            linear-gradient(
                142deg,
                color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 10%, rgba(255, 255, 255, 0.05)) 0%,
                rgba(8, 10, 16, 0.78) 100%
            );
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            inset 0 -1px 0 rgba(255, 255, 255, 0.05),
            0 10px 26px rgba(0, 0, 0, 0.2),
            0 0 0 1px rgba(255, 255, 255, 0.08);
    }
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-link-stack--priority-lead .hp-creator-link--ghost,
.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-link-stack--priority .hp-creator-link--ghost,
.hp-creator-surface-theme-light.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-link-stack--featured-offer-lead .hp-creator-link--ghost {
    color: rgba(15, 16, 20, 0.848);
    border-color: color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 32%, rgba(15, 16, 20, 0.14));
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 255, 255, 0.78) 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 6px 18px rgba(15, 16, 20, 0.08),
        0 0 0 1px rgba(15, 16, 20, 0.05);
}

@media (hover: hover) and (pointer: fine) {
    .hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-link-stack--priority-lead .hp-creator-link--ghost:hover,
    .hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-link-stack--priority .hp-creator-link--ghost:hover,
    .hp-creator-surface-theme-light.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-creator-link-stack--featured-offer-lead .hp-creator-link--ghost:hover {
        color: rgba(15, 16, 20, 0.9);
        border-color: color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 42%, rgba(15, 16, 20, 0.16));
        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.99) 0%,
                color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 6%, rgba(255, 255, 255, 0.82)) 100%
            );
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.99),
            0 8px 22px rgba(15, 16, 20, 0.1),
            0 0 0 1px rgba(15, 16, 20, 0.06);
    }
}

/* -------------------------------------------------------------------------
   P4.4.2A / P4.4.2A-R6 — Mini Link email capture (hero-owned post-hero slot)
   Fixed compact acquisition row; no card shell; canonical position after hero.
------------------------------------------------------------------------- */

/*
 * Presentation templates use flex `order` on direct canvas children (hero = 10).
 * Subscribe defaults to order 0 and visually jumps above the hero unless pinned here.
 */
.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-section--subscribe,
.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-mini-link-canvas > .hp-creator-section--subscribe,
.hp-mini-link-surface-shell.hp-mini-link-template--content-drop .hp-mini-link-canvas > .hp-creator-section--subscribe,
.hp-mini-link-surface-shell.hp-mini-link-template--no-links .hp-mini-link-canvas > .hp-creator-section--subscribe {
    order: 12;
}

.hp-mini-link-canvas > .hp-creator-hero + .hp-creator-section--subscribe,
.hp-mini-link-canvas > .hp-creator-hero.hp-creator-section--identity + .hp-creator-section--subscribe {
    position: relative;
    z-index: 1;
    clear: both;
    margin-block-start: clamp(0.32rem, 1.1vw, 0.52rem);
    padding-block: 0;
}

.hp-mini-link-canvas > .hp-creator-hero.hp-creator-hero--image-led + .hp-creator-section--subscribe {
    margin-block-start: clamp(0.38rem, 1.25vw, 0.58rem);
}

.hp-mini-link-canvas > .hp-creator-section--subscribe {
    position: relative;
    z-index: auto;
    padding-block: 0;
    --hp-subscribe-handoff-gap: clamp(1rem, 3vw, 1.45rem);
    margin-block-end: var(--hp-subscribe-handoff-gap);
}

.hp-creator-subscribe__kicker {
    margin-block-start: 0;
    margin-block-end: clamp(0.18rem, 0.65vw, 0.28rem);
}

/*
 * Handoff spacing lives on subscribe margin-block-end (works in block flow and flex order).
 * Zero the DOM-adjacent sibling top margin to avoid double gaps in Creator Arrival.
 */
.hp-mini-link-canvas > .hp-creator-section--subscribe + .hp-creator-section--links,
.hp-mini-link-canvas > .hp-creator-section--subscribe + .hp-creator-section--supporting-surface.hp-creator-section--visual,
.hp-mini-link-canvas > .hp-creator-section--subscribe + .hp-creator-section--commerce,
.hp-mini-link-canvas > .hp-creator-section--subscribe + .hp-creator-section--event,
.hp-mini-link-canvas > .hp-creator-section--subscribe + .hp-feed-wrap,
.hp-mini-link-canvas > .hp-creator-section--subscribe + .hp-creator-section--content-drop-pulse {
    margin-block-start: 0;
}

.hp-creator-subscribe__intro {
    margin: 0 0 clamp(0.48rem, 1.6vw, 0.62rem);
    font-size: clamp(0.78rem, 2.2vw, 0.84rem);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.38);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-subscribe__intro {
    color: rgba(15, 16, 20, 0.48);
}

.hp-creator-subscribe__form {
    margin: 0;
}

.hp-creator-subscribe__row {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.42rem, 1.6vw, 0.5rem);
    align-items: stretch;
}

.hp-creator-subscribe__input {
    box-sizing: border-box;
    flex: 1 1 9rem;
    min-width: 0;
    margin: 0;
    padding: 0.68rem 0.82rem;
    border-radius: 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(8, 8, 12, 0.36);
    color: var(--hp-surface-text, rgba(255, 255, 255, 0.882));
    font-size: clamp(0.9rem, 2.6vw, 0.96rem);
    line-height: 1.35;
}

.hp-creator-subscribe__input::placeholder {
    color: rgba(255, 255, 255, 0.34);
}

.hp-creator-subscribe__input:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 72%, white);
    outline-offset: 2px;
    border-color: color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 48%, rgba(255, 255, 255, 0.14));
}

.hp-creator-subscribe__button {
    box-sizing: border-box;
    flex: 0 0 auto;
    min-width: 7.25rem;
    margin: 0;
    padding: 0.68rem 1rem;
    border: 1px solid color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 34%, rgba(255, 255, 255, 0.12));
    border-radius: 0.72rem;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 18%, rgba(255, 255, 255, 0.06)) 0%,
            rgba(255, 255, 255, 0.03) 100%
        );
    color: var(--hp-surface-text, rgba(255, 255, 255, 0.882));
    font-size: clamp(0.86rem, 2.4vw, 0.92rem);
    font-weight: 620;
    line-height: 1.25;
    cursor: pointer;
    transition:
        border-color var(--hp-motion-fast, 0.15s) var(--hp-ease-soft, ease),
        background var(--hp-motion-fast, 0.15s) var(--hp-ease-soft, ease);
}

@media (hover: hover) and (pointer: fine) {
    .hp-creator-subscribe__button:hover {
        border-color: color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 48%, rgba(255, 255, 255, 0.16));
        background:
            linear-gradient(
                180deg,
                color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 26%, rgba(255, 255, 255, 0.08)) 0%,
                rgba(255, 255, 255, 0.05) 100%
            );
    }
}

.hp-creator-subscribe__button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 72%, white);
    outline-offset: 2px;
}

.hp-creator-subscribe__consent {
    margin: clamp(0.36rem, 1.2vw, 0.42rem) 0 0;
    font-size: clamp(0.68rem, 1.9vw, 0.74rem);
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.34);
}

.hp-creator-subscribe__notice {
    margin: clamp(0.42rem, 1.4vw, 0.48rem) 0 0;
    padding: 0.42rem 0.58rem;
    border-radius: 0.58rem;
    font-size: clamp(0.78rem, 2.2vw, 0.84rem);
    line-height: 1.35;
}

.hp-creator-subscribe__notice--success {
    color: rgba(210, 248, 222, 0.96);
    background: rgba(48, 120, 78, 0.18);
    border: 1px solid rgba(120, 210, 150, 0.22);
}

.hp-creator-subscribe__notice--error {
    color: rgba(255, 220, 220, 0.96);
    background: rgba(120, 48, 48, 0.18);
    border: 1px solid rgba(220, 120, 120, 0.22);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-subscribe__input {
    border-color: rgba(15, 16, 20, 0.14);
    background: rgba(255, 255, 255, 0.92);
    color: rgba(15, 16, 20, 0.88);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-subscribe__input::placeholder {
    color: rgba(15, 16, 20, 0.38);
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-subscribe__button {
    color: rgba(15, 16, 20, 0.88);
    border-color: color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 32%, rgba(15, 16, 20, 0.12));
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.98) 0%,
            color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 7%, rgba(255, 255, 255, 0.9)) 100%
        );
}

.hp-creator-surface-theme-light.hp-mini-link-canvas .hp-creator-subscribe__consent {
    color: rgba(15, 16, 20, 0.44);
}

@media (max-width: 22.5rem) {
    .hp-creator-subscribe__button {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* -------------------------------------------------------------------------
   P4.4.3A / P4.4.3A-R4 — Mini Link media preview (bounded bottom proof module)
   Fixed slot above footer; 16:9 promo tiles with full-bleed cover fit.
------------------------------------------------------------------------- */

.hp-mini-link-canvas > .hp-creator-section--media {
    order: 55;
    margin-block-start: clamp(0.72rem, 2.5vw, 1.08rem);
    margin-block-end: clamp(0.42rem, 1.6vw, 0.72rem);
}

.hp-mini-link-surface-shell.hp-mini-link-template--featured-offer .hp-mini-link-canvas > .hp-creator-section--media,
.hp-mini-link-surface-shell.hp-mini-link-template--upcoming-event .hp-mini-link-canvas > .hp-creator-section--media,
.hp-mini-link-surface-shell.hp-mini-link-template--content-drop .hp-mini-link-canvas > .hp-creator-section--media,
.hp-mini-link-surface-shell.hp-mini-link-template--no-links .hp-mini-link-canvas > .hp-creator-section--media {
    order: 55;
}

.hp-mini-link-canvas:has(> .hp-creator-section--commerce) > .hp-creator-section--media {
    order: 55;
}

.hp-mini-link-canvas > .hp-feed-wrap + .hp-creator-section--media,
.hp-mini-link-canvas > .hp-creator-section--content-drop-pulse + .hp-creator-section--media {
    margin-block-start: clamp(0.52rem, 1.85vw, 0.82rem);
}

.hp-mini-link-canvas > .hp-creator-section--media + .hp-mini-link-footer {
    margin-block-start: clamp(0.28rem, 1vw, 0.52rem);
}

.hp-creator-media__kicker {
    margin-block-end: clamp(0.42rem, 1.5vw, 0.58rem);
}

.hp-creator-media__grid {
    display: grid;
    gap: clamp(0.52rem, 2vw, 0.72rem);
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}

.hp-creator-media__grid--count-1 {
    grid-template-columns: minmax(0, 1fr);
}

.hp-creator-media__grid--count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hp-creator-media__grid--count-3,
.hp-creator-media__grid--count-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 40rem) {
    .hp-creator-media__grid--count-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hp-creator-media__grid--count-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.hp-creator-media__item,
.hp-creator-media__item--tile {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
    border-radius: clamp(0.82rem, 2.4vw, 1rem);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(8, 8, 12, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.024),
        0 4px 16px rgba(0, 0, 0, 0.1);
}

.hp-creator-media--shape-landscape .hp-creator-media__item,
.hp-creator-media--shape-landscape .hp-creator-media__item--tile {
    aspect-ratio: 16 / 9;
}

.hp-creator-media--shape-square .hp-creator-media__item,
.hp-creator-media--shape-square .hp-creator-media__item--tile {
    aspect-ratio: 1 / 1;
}

.hp-creator-media--shape-portrait .hp-creator-media__item,
.hp-creator-media--shape-portrait .hp-creator-media__item--tile {
    aspect-ratio: 4 / 5;
}

.hp-creator-surface-theme-light .hp-creator-media__item,
.hp-creator-surface-theme-light .hp-creator-media__item--tile {
    border-color: rgba(15, 16, 20, 0.1);
    background: rgba(255, 255, 255, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 4px 14px rgba(15, 16, 20, 0.06);
}

.hp-creator-media__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hp-creator-media__video {
    margin-block-start: clamp(0.58rem, 2vw, 0.78rem);
}

.hp-creator-media__video-card {
    display: block;
    overflow: hidden;
    border-radius: clamp(0.82rem, 2.4vw, 1rem);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(8, 8, 12, 0.28);
    color: inherit;
    text-decoration: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.024),
        0 4px 16px rgba(0, 0, 0, 0.1);
    transition:
        transform var(--hp-motion-fast) var(--hp-ease-press),
        border-color var(--hp-motion-base) var(--hp-ease-soft),
        box-shadow var(--hp-motion-base) var(--hp-ease-soft);
}

.hp-creator-surface-theme-light .hp-creator-media__video-card {
    border-color: rgba(15, 16, 20, 0.1);
    background: rgba(255, 255, 255, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 4px 14px rgba(15, 16, 20, 0.06);
}

.hp-creator-media__video-media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    min-height: 0;
    background: rgba(8, 8, 12, 0.28);
}

.hp-creator-media__video-media--fallback {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(8, 8, 12, 0.52) 100%
        );
}

.hp-creator-surface-theme-light .hp-creator-media__video-media--fallback {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(245, 246, 252, 0.92) 100%
        );
}

.hp-creator-media__video-thumb {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hp-creator-media__video-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(8, 8, 12, 0.08) 0%,
            rgba(8, 8, 12, 0.24) 48%,
            rgba(8, 8, 12, 0.62) 100%
        );
    pointer-events: none;
}

.hp-creator-surface-theme-light .hp-creator-media__video-scrim {
    background:
        linear-gradient(
            180deg,
            rgba(15, 16, 20, 0.02) 0%,
            rgba(15, 16, 20, 0.12) 48%,
            rgba(15, 16, 20, 0.42) 100%
        );
}

.hp-creator-media__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(2.35rem, 8vw, 2.85rem);
    height: clamp(2.35rem, 8vw, 2.85rem);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.96);
    background: color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 78%, rgba(255, 255, 255, 0.12));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 10px 24px rgba(0, 0, 0, 0.22);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.hp-creator-media__play-icon {
    width: 0.95rem;
    height: 0.95rem;
    margin-inline-start: 0.08rem;
}

.hp-creator-media__video-copy {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 1;
    padding: clamp(0.62rem, 2.2vw, 0.82rem) clamp(0.78rem, 2.8vw, 0.98rem);
    font-size: clamp(0.84rem, 2.35vw, 0.92rem);
    font-weight: 640;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.96);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.34);
    pointer-events: none;
}

.hp-creator-surface-theme-light .hp-creator-media__video-copy {
    color: rgba(255, 255, 255, 0.98);
}

@media (hover: hover) and (pointer: fine) {
    .hp-creator-media__video-card:hover {
        transform: translateY(-1px);
        border-color: color-mix(in srgb, var(--hp-mini-link-accent, #5b8cff) 36%, rgba(255, 255, 255, 0.14));
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
    }

    .hp-creator-media__video-card:hover .hp-creator-media__play {
        transform: translate(-50%, -50%) scale(1.04);
    }
}

.hp-creator-media__video-card:focus-visible {
    outline: 2px solid var(--hp-mini-link-accent, #5b8cff);
    outline-offset: 3px;
}