/* SonoXR SHOWCASE page (platform.html, 31 Oct 2026): the hero and the lighter How it works; the ported sections style themselves
   (sxr-port.css). Same column, chrome type and card edge line as sonoxr.media. */
.sxr-port { background:#0a0a0a; color:#fff;
  /* the home chapter grid the ported sections are laid out on (sonoxr.media home-chapters.css + home-story.css) */
  --chapter-width:1320px; --chapter-gutter:max(var(--sxr-gutter, 24px), calc((100% - 1320px) / 2)); --chapter-space:clamp(48px,5vw,72px);
  --chapter-heading-size:clamp(40px,3.6vw,56px); --chapter-heading-gap:42px; --chapter-surface:linear-gradient(140deg,rgba(169,178,188,.1),transparent 70%),#0b1014; }
.sxr-port h1, .sxr-port h2, .sxr-port h3 { text-transform:none; }
/* the old site's global header rule (its fixed site bar) must not reach the ported section and card headers */
.sxr-port :where(header) { position:static; top:auto; left:auto; width:auto; z-index:auto; background-color:transparent; border-bottom:0; transition:none; }
.sxp-wrap { width:min(1320px, calc(100% - 2 * var(--sxr-gutter, 24px))); margin-inline:auto; }

/* the hero is sonoxr.media's home hero (sxr-hero.css); its two faces, self-hosted as on sonoxr.media — Anton for the story
   headline, Doto for the LED billboard (both SIL Open Font License) */
@font-face { font-family:"Anton"; src:url("fonts/anton-latin.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:"Doto"; src:url("fonts/doto-latin-variable.woff2") format("woff2"); font-style:normal; font-weight:700 900; font-display:swap; }

/* how it works: four steps that advance on their own while on screen, a progress line under the current one */
.sxp-how { padding:clamp(72px,8vw,112px) 0; border-top:1px solid rgba(232,237,244,.14); }
.sxp-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:clamp(28px,3vw,40px); }
.sxp-step { position:relative; display:flex; align-items:center; gap:12px; min-height:56px; padding:0 18px; overflow:hidden; border:1px solid rgba(232,237,244,.14); border-radius:14px; background:#0b0e12; color:#a9b2bc; font:500 14px/1.2 'SXR Space Grotesk',sans-serif; text-align:left; transition:border-color .3s, color .3s; }
.sxp-step b { color:#cbd2d9; font-weight:600; font-size:12px; letter-spacing:.12em; }
.sxp-step[aria-selected="true"] { border-color:rgba(232,237,244,.4); color:#fff; }
.sxp-step i { position:absolute; left:0; bottom:0; height:2px; width:0; background:#cbd2d9; }
.sxp-step.is-done i { width:100%; opacity:.35; }
.sxp-how.is-playing .sxp-step[aria-selected="true"] i { animation:sxp-fill 4.5s linear both; }
.sxp-step:focus-visible { outline:2px solid #cbd2d9; outline-offset:3px; }
@keyframes sxp-fill { from { width:0; } to { width:100%; } }
.sxp-stage { position:relative; margin-top:14px; }
.sxp-panel { position:relative; margin:0; overflow:hidden; border:1px solid rgba(232,237,244,.14); border-radius:20px; background:#05070a; aspect-ratio:16/8; }
.sxp-panel img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sxp-panel::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(5,7,10,.92),rgba(5,7,10,.25) 55%,transparent); }
.sxp-panel figcaption { position:absolute; left:0; bottom:0; z-index:1; display:grid; gap:8px; max-width:560px; padding:clamp(22px,3vw,40px); }
.sxp-panel figcaption span { color:#cbd2d9; font:500 12px/1 'SXR Space Grotesk',sans-serif; letter-spacing:.16em; }
.sxp-panel figcaption strong { color:#fff; font:600 clamp(26px,2.6vw,40px)/1.05 'SXR Space Grotesk',sans-serif; letter-spacing:-.02em; }
.sxp-panel figcaption p { margin:0; color:rgba(238,242,246,.82); font-size:16px; line-height:1.55; }
@media (prefers-reduced-motion: no-preference) { .sxp-panel.is-on img { animation:sxp-zoom 6s ease-out both; } }
@keyframes sxp-zoom { from { transform:scale(1.06); } to { transform:scale(1); } }

@media (max-width:900px) {
  .sxp-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sxp-panel { aspect-ratio:4/5; }
}