/* DESIGN.md → Restored original phone video (2026-10-25).
   The approved original's hero-reference.css owns video width/crop/spacing.
   No synthetic device rotations or separate phone mockups are layered on it.
   DO3/4/6: Carbon1, pill1600, Aeonik700/.030, caption12, spacing12/24.
   DON'T3/4/5/7: black/white controls, no shadows, semantic green or gradients. */
.showcase-toggle,.showcase-topic{border:var(--border-standard);border-radius:var(--radius-pills);padding:var(--spacing-12) var(--spacing-24);font:var(--font-weight-bold) var(--text-caption)/var(--leading-caption) var(--font-aeonik-pro);letter-spacing:var(--tracking-button);color:var(--color-carbon);background:var(--color-paper-white);text-decoration:none}
.showcase-toggle{white-space:nowrap;cursor:pointer}
.showcase-toggle:hover,.showcase-topic:hover{background:var(--color-carbon);color:var(--color-paper-white)}
/* DESIGN.md → Persistent video control (2026-10-25).
   DO3/4/6: keep Carbon1 / pill1600 / Aeonik700 controls visible in both states.
   Override reference hover hiding; geometry and existing tokens are unchanged. */
.slot-showcase .device-caption{opacity:1;pointer-events:auto}
.slot-showcase .video-message{text-align:center;font-size:var(--text-caption);line-height:var(--leading-caption)} /* caption12 / existing caption leading. */
.showcase-reading{position:relative;z-index:2;max-width:var(--page-max-width);margin-inline:auto;padding:var(--spacing-40);text-align:center} /* Page1440; spacing40. */
.showcase-reading>.consumer-kicker{margin-bottom:var(--spacing-20)}
.showcase-reading>div{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--spacing-8)} /* spacing20/8. */
@media(max-width:767px){.showcase-reading{padding:var(--spacing-24) 0}.showcase-topic{padding:var(--spacing-12) var(--spacing-16)}} /* Existing reference breakpoint; spacing24/12/16. */