/* components.css
   Standalone UI components consolidated from style.css, index.html, app.js
   Caselet aside panel, lead capture, continuation/approach/diagnosis blocks,
   session indicator, domain cards, intent prompts */

/* --- Caselet aside panel (from style.css) --- */
/* ─── CASELET PANEL (right column) ─── */

.response-aside {
    position: sticky;
    top: 90px;
}

/* "Below the waterline" proof card — whitish glass, the same overlay as the
   About drawer's CTA band (.about-cta-band): flat translucent white + light
   blur, no saturation boost, so it stays clean over the gradient. Keeps the
   brand top-edge, dotted waterline, and green motion. */
.caselet-panel-inner {
    position: relative;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius);
    overflow: hidden;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow:
        0 16px 42px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    animation: slideInRight 0.4s ease forwards;
}

/* Bright brand top-edge — same accent language as the contact card strip. */
.caselet-panel-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--purple-light), var(--teal-light));
    z-index: 2;
}

/* The waterline — a refined dotted luminous divider (rail-style) between the
   surface (domain + engagement count) and the depth (the surfaced proof). */
.caselet-waterline {
    height: 0;
    margin: 0 22px 11px;
    border-top: 1px dotted rgba(255, 255, 255, 0.34);
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(16px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Header band — the domain identity. Sits as its own row with the dotted
   waterline directly beneath it, so the firm reads as a clear header (see the
   reference: firm → divider → engagement subtitle → proof). */
/* Eyebrow — names what the card is (echoes the mobile proof button), so the
   firm name reads as the subject rather than the headline. Kept a quiet muted
   grey so it labels without competing; only the small dot carries a live tint. */
.caselet-panel-eyebrow {
    margin: 14px 22px 4px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: white;
}

.caselet-panel-eyebrow-dot {
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal-light);
    box-shadow: 0 0 6px rgba(20, 184, 166, 0.9);
    animation: dotBlink 2s ease infinite;
}

.caselet-panel-header {
    padding: 7px 22px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.caselet-panel-tag {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: none;
    color: #f2ecff;
    text-shadow: 0 1px 2px rgba(15, 10, 30, 0.35);
}

.caselet-panel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal-light);
    margin-left: auto;
    animation: dotBlink 2s ease infinite;
}

@keyframes dotBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.caselet-panel-body {
    padding: 12px 22px 22px;
}

/* Surfaced numbers carry the emphasis through colour alone (bright neon --iws
   purple on the dark teal/blue panel) — no glow/shadow, no reveal pulse. */

.caselet-panel-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 10px;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.caselet-panel-pain {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
    margin-bottom: 14px;
    line-height: 1.5;
}

.caselet-panel-summary {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    margin-bottom: 16px;
}

.caselet-panel-signals {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.caselet-panel-signals li {
    font-size: 12px;
    color: var(--pux);
    padding-left: 16px;
    position: relative;
    line-height: 1.5;
}

.caselet-panel-signals li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--teal);
    font-size: 11px;
}


/* --- Caselet aside panel — V2 credible rendering (from index.html inline <style>) --- */
/* The surfaced proof: crisp white prose, with highlight() spans supplying the
   colour pops (green motion, purple stats, teal vocabulary). */
.caselet-panel-number {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.5;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}
.caselet-panel-pain {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
    font-style: italic;
    line-height: 1.5;
    margin-bottom: 8px;
}
.caselet-panel-contribution {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.74);
    line-height: 1.72;
    margin-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.14);
    padding-top: 16px;
}
.caselet-panel-domain {
    font-size: 0.72rem;
    color: #e0d3ff;
    margin-top: 8px;
    font-style: italic;
}
/* Deeper-cut caselet — the progressive-disclosure layers (1 = how it moved,
   2 = why it fits) carry a prose paragraph, not a crisp stat. Rendering that
   paragraph in the bold proof-number style produced an unstructured wall of
   text. Instead give it the same header hierarchy as a stat card: a teal
   eyebrow label + readable supporting prose, so every caselet reads structured. */
.caselet-panel-deepcut .caselet-panel-cut-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7ff2dc;
    text-shadow: 0 1px 2px rgba(10, 25, 22, 0.4);
    margin-bottom: 10px;
}
.caselet-panel-deepcut .caselet-panel-cut-prose {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.72;
}
/* engagement count — a muted subtitle just under the header divider: the
   evidence surfaced from the depths, secondary to the firm name above it. */
.caselet-eng-wrap {
    padding: 0 22px 2px;
}
.caselet-eng-count {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.6);
    text-shadow: 0 1px 2px rgba(15, 10, 30, 0.3);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Caselet highlight system: bright amber. Numbers and before→after movement
   read in a vivid orange-amber that pops off the purple panel — no yellow.
   A soft same-hue glow lifts the digits so the proof numbers own the eye. */
.caselet-panel-inner .tm-stat,
.block-caselet .tm-stat,
.caselet-story-content .tm-stat,
.block-proof-wall .tm-stat,
.caselet-panel-inner .tm-move,
.block-caselet .tm-move,
.caselet-story-content .tm-move,
.block-proof-wall .tm-move {
    color: #ffa023;
    font-weight: 800;
    text-shadow: 0 0 14px rgba(255, 145, 20, 0.45);
}

/* Vocabulary carries no accent inside the caselet — proof numbers only, so the
   prose stays plain white and the green numbers own the eye. */
.caselet-panel-inner .tm-term,
.block-caselet .tm-term,
.caselet-story-content .tm-term,
.block-proof-wall .tm-term {
    color: #fff;
    font-weight: 600;
    text-shadow: none;
}

/* --- Caselet "See the full story" trigger --- */
.caselet-panel-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--white);
    cursor: pointer;
    transition: color var(--transition), gap var(--transition),
        background var(--transition), border-color var(--transition);
}
.caselet-panel-more:hover {
    color: var(--white);
    background: rgba(20, 184, 166, 0.18);
    border-color: rgba(45, 212, 191, 0.6);
    gap: 11px;
}

/* --- Caselet "full story" modal --- */
.caselet-story-overlay {
    position: fixed;
    inset: 0;
    z-index: 260;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: rgba(5, 7, 18, 0.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: opacity 0.28s ease, visibility 0.28s ease;
}
.caselet-story-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.caselet-story-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(560px, calc(100vw - 34px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    /* Branded surface — matches the page's purple→teal gradient (slightly
       deeper for white-text contrast) instead of the old dark-navy modal. */
    background:
        radial-gradient(circle at 12% 0%, rgba(159, 103, 245, 0.50), transparent 46%),
        radial-gradient(circle at 100% 100%, rgba(20, 184, 166, 0.40), transparent 46%),
        linear-gradient(150deg, #6d28d9 0%, #0f766e 100%);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transform: translate(-50%, -50%) scale(0.94);
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.32) transparent;
}
.caselet-story-overlay.open .caselet-story-panel {
    transform: translate(-50%, -50%) scale(1);
}
.caselet-story-panel::-webkit-scrollbar {
    width: 10px;
}
.caselet-story-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.caselet-story-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 99px;
    font-size: 22px;
    line-height: 1;
    color: var(--white);
    background: rgba(255, 255, 255, 0.14);
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}
.caselet-story-close:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: rotate(90deg);
}
.caselet-story-header {
    padding: 18px 22px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.caselet-story-header .caselet-panel-tag {
    font-size: 11px;
    padding-right: 44px;
}
.caselet-story-eng {
    padding: 10px 22px 0;
    font-size: 0.7rem;
    color: rgba(236, 220, 255, 0.92);
    text-shadow: 0 1px 2px rgba(15, 10, 30, 0.4);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.caselet-story-body {
    padding: 18px 22px 24px;
}
.caselet-story-section {
    margin-top: 22px;
}
.caselet-story-section:first-child {
    margin-top: 6px;
}
.caselet-story-section + .caselet-story-section {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.caselet-story-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7ff2dc;
    text-shadow: 0 1px 2px rgba(10, 25, 22, 0.4);
    margin-bottom: 10px;
}
.caselet-story-numbers {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 0;
}
.caselet-story-numbers li {
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
    font-size: 0.82rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.90);
}
.caselet-story-prose {
    font-size: 0.82rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
}
.caselet-story-prose p {
    margin: 0 0 12px;
}
.caselet-story-prose p:last-child {
    margin-bottom: 0;
}
.caselet-story-points {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
    padding: 0;
}
.caselet-story-points:last-child {
    margin-bottom: 0;
}
.caselet-story-points li {
    position: relative;
    padding-left: 18px;
    line-height: 1.6;
}
.caselet-story-points li::before {
    content: '▸';
    position: absolute;
    left: 2px;
    top: 0;
    color: var(--iws);
}

/* --- Closing invitation --- */
/* The offer card from the response flow (.block-cta.leads-close in blocks.css)
   spoken at modal scale: brand wash, hairline, teal spine down the left edge.
   Same job in both places — the canvas offering the next step rather than
   continuing the answer — so it is that card, not a second invention. Mirrored
   rather than shared because .leads-close means something specific over there
   (mountClose sets it only when a follow-up trails the offer).

   The spine is also what earns the small footprint: the fill only has to tint,
   not fence, so the card can be the ask plus the button over the tightest
   padding that still reads as a surface. Here the two share a ROW and the ask
   is uncapped, so the whole close costs about the height of the ask — the
   response-flow card stacks them because its column is narrower than this
   panel. Below ~210px of ask the row wraps back to that stack on its own. */
.caselet-story-invite {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin-top: 20px;
    padding: 14px 16px;
    background: linear-gradient(135deg,
            rgba(124, 58, 237, 0.18) 0%,
            rgba(13, 148, 136, 0.20) 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-left: 3px solid var(--teal-light);
    border-radius: var(--radius-sm);
}

.caselet-story-invite-line {
    flex: 1 1 210px;
    margin: 0;
    font-size: 0.84rem;
    /* Tightened from 1.55: the generous body-prose leading read as loose on a
       one-or-two-line prompt; 1.4 sets it as a deliberate ask, not spillover. */
    line-height: 1.4;
    /* Medium, not bold. The lit CTA beside it is the row's one hot element;
       500 gives the ask quiet presence without a second focal point competing
       with the button — restraint is what reads as premium here. */
    font-weight: 500;
    color: rgba(255, 255, 255, 0.96);
}

/* Seated in the card rather than dropped on it: the card's own radius, since a
   child rounder than the thing containing it reads as unseated. Sizing is
   scoped through the card to outrank buttons.css's own block, which loads
   later; the lit-up skin itself still comes from .btn-primary. */
.caselet-story-invite .caselet-story-cta {
    flex: 0 0 auto;
    padding: 12px 24px;
    font-size: 13.5px;
    line-height: 1.15;
    letter-spacing: 0.015em;
    border-radius: var(--radius-sm);
}

/* Held at hover too: buttons.css's shadows are tuned to lift a page-scale
   button off the background, and at this size inside a tint they bloom into a
   halo instead of a lift. Hover keeps its brightness and rise from there. */
.caselet-story-invite .caselet-story-cta,
.caselet-story-invite .caselet-story-cta:hover {
    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.2),
        0 2px 8px rgba(124, 58, 237, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

/* ── Phones: proof button + caselet-card popup ──
   ≤768px the aside card is hidden entirely (home.css); app.js renders this
   button directly after the visitor's submitted response. Tapping
   it opens the full story modal directly (z 260) — one tap, no detour
   through the compact popup. The popup/backdrop pieces stay as a fallback
   for caselets with no full story (see mountMobileProofBtn). All pieces
   are desktop-invisible. */
.caselet-proof-btn,
.caselet-popup-backdrop,
.caselet-popup-close {
    display: none;
}

@media (max-width: 768px) {
    .caselet-proof-btn {
        display: flex;
        align-items: center;
        gap: 15px;
        width: 100%;
        margin: 4px 0 26px;
        padding: 16px 16px 16px 20px;
        position: relative;
        overflow: hidden;
        /* Layered brand glass — a faint diagonal wash off the accent gradient
           over the white sheen, so the card reads as lit rather than a flat
           translucent panel. */
        background:
            linear-gradient(135deg, rgba(159, 103, 245, 0.16), rgba(20, 184, 166, 0.10) 60%, rgba(255, 255, 255, 0.02)),
            rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 16px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow:
            0 14px 34px rgba(10, 6, 30, 0.24),
            0 2px 8px rgba(124, 58, 237, 0.14),
            inset 0 1px 0 rgba(255, 255, 255, 0.22),
            inset 0 -1px 0 rgba(0, 0, 0, 0.10);
        font-family: inherit;
        text-align: left;
        color: var(--white);
        cursor: pointer;
        transition: transform 0.18s ease, border-color var(--transition), box-shadow var(--transition);
    }

    .caselet-proof-btn:active {
        transform: scale(0.985);
        box-shadow:
            0 8px 20px rgba(10, 6, 30, 0.22),
            0 1px 5px rgba(124, 58, 237, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }

    /* Same brand top-edge as the card it opens — the button reads as that
       card in compressed form. Feathered at the ends so it sits inside the
       rounded corners instead of butting flat against them. */
    .caselet-proof-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: 10%;
        right: 10%;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--purple-light) 20%, var(--teal-light) 80%, transparent);
        opacity: 0.9;
    }

    /* Soft diagonal sheen sweeping across the glass — the top-left catch of
       light that reads as a real, physical surface. */
    .caselet-proof-btn::after {
        content: '';
        position: absolute;
        top: -60%;
        left: -20%;
        width: 55%;
        height: 220%;
        background: linear-gradient(100deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
        transform: rotate(8deg);
        pointer-events: none;
    }

    /* Structured two-line text stack — eyebrow (what this is) over the
       domain name (which one), so the label reads instead of blaring as a
       single uppercase blob. */
    .caselet-proof-btn-text {
        display: flex;
        flex-direction: column;
        gap: 5px;
        min-width: 0;
        flex: 1;
    }

    .caselet-proof-btn-eyebrow {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 0.95rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: white;
    }

    .caselet-proof-btn-dot {
        flex: none;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--teal-light);
        box-shadow: 0 0 6px rgba(20, 184, 166, 0.9);
        animation: dotBlink 2s ease infinite;
    }

    .caselet-proof-btn-domain {
        font-size: 0.95rem;
        font-weight: 700;
        letter-spacing: 0.005em;
        line-height: 1.35;
        color: var(--white);
    }

    /* Premium arrow badge — a transparent frosted-glass orb, not a solid disc:
       a whisper of white fill over the card's own tint, a bright hairline rim
       and a crisp inset top-light, so it reads as a polished glass pearl. A
       thin outer halo ring (::before) floats it off the card; a slim specular
       crescent (::after) is the catch of light on the dome. The bold SVG chevron
       glides gently right-and-back forever, inviting the tap. */
    .caselet-proof-btn-arrow {
        flex: none;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        color: #fff;
        background:
            radial-gradient(130% 130% at 30% 22%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.05) 55%),
            rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.38);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        box-shadow:
            0 8px 20px rgba(10, 6, 30, 0.22),
            0 0 16px rgba(159, 103, 245, 0.22),
            inset 0 1.5px 1px rgba(255, 255, 255, 0.55),
            inset 0 -4px 8px rgba(0, 0, 0, 0.12);
        transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    }

    .caselet-proof-btn-arrow svg {
        width: 19px;
        height: 19px;
        display: block;
        filter: drop-shadow(0 1px 2px rgba(20, 8, 50, 0.45));
        animation: proofArrowGlide 2.2s ease-in-out infinite;
    }

    /* Gentle forward invitation — the chevron drifts right, eases back, forever.
       Small travel + slow tempo keeps it premium, never fidgety. */
    @keyframes proofArrowGlide {
        0%, 100% { transform: translateX(-1px); }
        50% { transform: translateX(3px); }
    }

    /* Faint outer halo ring — a hairline of brand light around the orb that
       lifts it off the glass. */
    .caselet-proof-btn-arrow::before {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.16);
        box-shadow: 0 0 18px rgba(159, 103, 245, 0.35);
        pointer-events: none;
    }

    /* Glossy top sheen — a slim crescent of light across the upper dome, the
       specular catch that reads as polished glass. */
    .caselet-proof-btn-arrow::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 9px;
        right: 9px;
        height: 38%;
        border-radius: 50%;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
        opacity: 0.75;
        pointer-events: none;
    }

    .caselet-proof-btn:active .caselet-proof-btn-arrow {
        transform: scale(0.92);
        border-color: rgba(255, 255, 255, 0.5);
        box-shadow:
            0 4px 12px rgba(10, 6, 30, 0.2),
            inset 0 1.5px 1px rgba(255, 255, 255, 0.5),
            inset 0 -3px 6px rgba(0, 0, 0, 0.12);
    }

    /* Respect reduced-motion — hold the chevron still for users who ask. */
    @media (prefers-reduced-motion: reduce) {
        .caselet-proof-btn-arrow svg {
            animation: none;
            transform: translateX(1px);
        }
    }

    body.caselet-popup-open {
        overflow: hidden;
    }

    body.caselet-popup-open .caselet-popup-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 240;
        background: rgba(10, 8, 24, 0.55);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    /* The aside card itself, relocated: fixed and centered. display needs
       !important because app.js shows the panel with an inline style and
       home.css hides it on phones with one. Scrolls inside when taller than
       the viewport. */
    body.caselet-popup-open .response-aside {
        display: block !important;
        position: fixed;
        z-index: 245;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(460px, calc(100vw - 26px));
        max-height: min(84vh, 660px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius);
    }

    /* Close chip — top-right inside the card; the header clears it. */
    body.caselet-popup-open .caselet-popup-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 3;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.28);
        color: var(--white);
        font-size: 1.05rem;
        line-height: 1;
        cursor: pointer;
    }

    body.caselet-popup-open .caselet-panel-eyebrow,
    body.caselet-popup-open .caselet-panel-header {
        padding-right: 52px;
    }
}