/* Match the homepage hero’s painted scenes, timer, and segmented selector. */
.feature-media--showcase {
    position: relative;
    isolation: isolate;
    --showcase-paint-light: #dda6bd;
    --showcase-paint-dark: #b87996;
    gap: 16px;
    padding: 0;
    background: transparent;
}
.feature-media--showcase .feature-detail__screens {
    position: relative;
    height: 460px;
    border: 0;
    border-radius: 30px;
    padding: 24px 20px;
    background: radial-gradient(ellipse at 28% 8%, rgba(255,255,255,.32) 0%, rgba(255,255,255,.12) 38%, transparent 72%), linear-gradient(145deg, var(--showcase-paint-light) 12%, var(--showcase-paint-dark) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.36), inset 0 -1px 0 rgba(33,24,52,.08);
}
.feature-media--showcase .feature-media__panel { order: 1; }
.preview-description.preview-description {
    color: #17131b;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    max-width: 44ch;
    min-height: max(4.5em, var(--preview-caption-height, 0px));
    margin: 16px auto 0;
    padding: 0 12px;
    text-wrap: pretty;
}
.feature-media--showcase .feature-media__tabs {
    order: 0;
    position: relative;
    width: fit-content;
    z-index: 6;
    max-width: 100%;
    margin: 0;
    flex-wrap: nowrap;
    gap: 0;
    padding: 4px;
    border-radius: 14px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.65);
}
.feature-media--showcase .feature-media__tabs[hidden] { display: none; }
.feature-media--showcase .feature-media__tabs button {
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 600;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #45414b;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    transition: color .2s;
}
.feature-media--showcase .feature-media__tabs button[aria-selected="true"] {
    background: transparent;
    color: #fff;
    box-shadow: none;
}
.feature-media--showcase .feature-media__tabs button:focus-visible { outline: 2px solid #7c2dc5; outline-offset: 2px; }
@media (max-width: 600px) {
    .preview-description.preview-description { min-height: max(6em, var(--preview-caption-height, 0px)); }
    .feature-media--showcase .feature-detail__screens { height: 390px; padding: 16px 8px; border-radius: 22px; }
    .feature-media--showcase .feature-media__tabs button { font-size: 12px; padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) { .feature-media--showcase .feature-media__tabs button { transition: none; } }

.feature-media--showcase[data-preview="ipad"] { --showcase-paint-light: #afc6ed; --showcase-paint-dark: #829fce; }
.feature-media--showcase[data-preview="iphone"] { --showcase-paint-light: #b9a8e5; --showcase-paint-dark: #907cc0; }
.feature-showcase-progress {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: conic-gradient(#242126 calc(var(--preview-progress,0) * 360deg), rgba(36,33,38,.12) 0deg);
    opacity: .6;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
    pointer-events: none;
}
@keyframes feature-showcase-fade { to { opacity: 0; } }
@media (max-width: 600px) { .feature-showcase-progress { top: 12px; right: 12px; width: 15px; height: 15px; } }
@media (prefers-reduced-motion: reduce) {
    .feature-showcase-progress { display: none; }
}

/* Keep the browser capture wide within the same card used by native previews. */
.feature-media--showcase .feature-detail__screens--browser {
    padding: 24px;
}
.feature-media--showcase .feature-detail__screens--browser > img {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
}
@media (max-width: 600px) {
    .feature-media--showcase .feature-detail__screens--browser { padding: 16px; }
    .feature-media--showcase .feature-detail__screens--browser > img { border-radius: 8px; }
}

/* Walkthrough choices use the same single selector and stable media card. */
.walkthrough-switcher { position: relative; isolation: isolate; display: grid; gap: 16px; --showcase-paint-light: #dda6bd; --showcase-paint-dark: #b87996; }
.walkthrough-switcher .walkthrough-switcher__tabs { margin: 0; }
.walkthrough-switcher .app-visual { margin: 0; }
.walkthrough-switcher .app-visual-stage {
    height: 460px;
    box-sizing: border-box;
    padding: 24px 20px;
    border: 0;
    border-radius: 30px;
    background: radial-gradient(ellipse at 28% 8%,rgba(255,255,255,.32),transparent 72%),linear-gradient(145deg,var(--showcase-paint-light),var(--showcase-paint-dark)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.36),inset 0 -1px 0 rgba(33,24,52,.08);
}
.walkthrough-switcher .feature-media--showcase { --showcase-paint-light: inherit; --showcase-paint-dark: inherit; }
.walkthrough-switcher .feature-media__tabs[hidden] { display: none !important; }
.walkthrough-switcher[data-preview="ipad"] { --showcase-paint-light: #afc6ed; --showcase-paint-dark: #829fce; }
.walkthrough-switcher[data-preview="iphone"] { --showcase-paint-light: #b9a8e5; --showcase-paint-dark: #907cc0; }
.walkthrough-switcher[data-preview="print"], .feature-media--showcase[data-preview="print"] { --showcase-paint-light: #e5b17c; --showcase-paint-dark: #c58e59; }
.walkthrough-switcher[data-preview="events"], .feature-media--showcase[data-preview="events"] { --showcase-paint-light: #a2cbb4; --showcase-paint-dark: #76a38d; }
.preview-description.preview-description { box-sizing: border-box; text-align: center; }
.preview-description.preview-measure { position: absolute; visibility: hidden; height: auto !important; min-height: 0 !important; margin-top: 0; pointer-events: none; }
.preview-snapshot { position: absolute !important; inset: 0; z-index: 5; width: 100%; box-sizing: border-box; pointer-events: none; animation: feature-showcase-fade .35s ease-out forwards; }
/* The homepage keeps its selector and scene copy inside one painted card. */
.booth-playground[data-companion="true"] { display: grid; gap: 16px; }
.booth-playground[data-companion="true"] .booth-showcase-panel > .booth-showcase-tabs { margin: 0 auto; }
body.landing-page .lp-hero--home .booth-showcase-panel { display: grid; grid-template-rows: minmax(0,1fr) auto auto; gap: 16px; height: 700px; padding: 24px; border: 0; border-radius: 30px; box-sizing: border-box; }
body.landing-page .lp-hero--home [data-companion="true"] .booth-playground__stage { width: 100%; max-width: 800px; height: 100%; min-height: 0; aspect-ratio: auto; margin: 0 auto; }
.booth-playground[data-companion="true"] .booth-showcase-panel > .booth-showcase-copy { margin: 0; width: 100%; max-width: none; min-height: 90px; box-sizing: border-box; }
.booth-playground[data-companion="true"] .booth-showcase-copy__detail { font-size: 15px; font-weight: 400; line-height: 1.5; }
/* The interactive demo keeps its device/style choices above a steady card. */
.booth-playground[data-companion="false"] { width: 100%; max-width: none; display: grid; gap: 16px; }
.booth-playground[data-companion="false"] > .booth-playground__devices,
.booth-playground[data-companion="false"] > .booth-playground__styles { margin: 0; }
.booth-playground[data-companion="false"] .booth-playground__stage { position: relative; isolation: isolate; height: 460px; padding: 24px; box-sizing: border-box; border: 0; border-radius: 30px; background: radial-gradient(ellipse at 28% 8%,rgba(255,255,255,.32),transparent 72%),linear-gradient(145deg,#dda6bd,#b87996); }
.booth-playground[data-companion="false"] .booth-device { height: 100%; width: auto; max-width: 100%; flex: 0 1 auto; }
.booth-playground[data-companion="false"] .booth-playground__interactive { min-height: 140px; }
.booth-playground[data-companion="false"] > figcaption { font-size: 15px; font-weight: 400; }
@media (max-width: 600px) {
    .walkthrough-switcher .app-visual-stage { height: 390px; padding: 16px 8px; border-radius: 22px; }
    body.landing-page .lp-hero--home .booth-showcase-panel { height: 600px; padding: 16px; border-radius: 22px; }
    .booth-playground[data-companion="true"] .booth-showcase-panel > .booth-showcase-copy { min-height: 110px; }
    .booth-playground[data-companion="false"] .booth-playground__stage { position: relative; isolation: isolate; height: 390px; padding: 16px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) { .preview-snapshot { animation: none; } }
/* Long selectors and device pairs stay within the viewport's grid track. */
.feature-media--showcase, .walkthrough-switcher, .booth-playground { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.walkthrough-switcher__panel, .feature-media__panel { min-width: 0; }
body.landing-page .lp-hero--home [data-companion="true"] .booth-device { top: 50%; bottom: auto; transform: translateY(-50%); }
body.landing-page .lp-hero--home .booth-showcase-panel::before { background: radial-gradient(ellipse at 28% 8%,rgba(255,255,255,.32),transparent 72%),linear-gradient(145deg,var(--showcase-paint-light),var(--showcase-paint-dark)); }

/* Enlarge the homepage scenes while keeping the pair's spacing and center. */
@media (max-width: 600px) {
    body.landing-page .lp-hero--home [data-companion="true"] [data-playground-device] { width: 29.808%; right: 2.804%; }
    body.landing-page .lp-hero--home .booth-companion:not(.booth-device--landscape) { width: 47.196%; left: 4.3565%; }
    body.landing-page .lp-hero--home .booth-companion.booth-device--landscape { width: 75.9%; left: .55%; }
    body.landing-page .lp-hero--home [data-companion="true"][data-showcase="events"] [data-playground-device] { right: 4.3565%; }
    body.landing-page .lp-hero--home [data-companion="true"][data-showcase="capture"] [data-playground-device] { left: 8.0825%; right: auto; }
    body.landing-page .lp-hero--home [data-companion="true"][data-showcase="capture"] .booth-companion.booth-device--landscape { left: auto; right: 8.0825%; }
    body.landing-page .lp-hero--home .booth-playground .booth-device.booth-device--photo { width: 39.744%; left: 8.0825%; right: auto; }
    body.landing-page .lp-hero--home [data-companion="true"][data-showcase="capture"] .booth-device--photo { left: auto; right: 8.0825%; }
}