/* 2026-10-21 product pages for the redesigned SWSO apps (built by _work/build_newapps.py).
   Each page sets --a (accent), --b (second accent), --glow, --nink (page ink), --card on .na. Layouts: split, stage, editorial, campus. */
body.na{background:var(--nink)}
.na h1 em,.na h2 em{font-style:normal;background:linear-gradient(90deg,var(--a),var(--b));-webkit-background-clip:text;background-clip:text;color:transparent}
.na .btn{background:var(--a);border-color:var(--a);color:#07070c}
.na .btn:hover{filter:brightness(1.12);background:var(--a);border-color:var(--a)}
.na .btn.ghost{background:transparent;color:var(--paper);border-color:var(--a)}
.na .btn.ghost:hover{background:var(--a);color:#07070c}
.na :focus-visible{outline-color:var(--b)}
.na section{padding:72px 0}
.na-hero{position:relative;padding:130px 0 60px;background-size:cover;background-position:center;isolation:isolate;overflow:hidden}
.na-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 80% at 80% 30%,var(--glow),transparent 70%),linear-gradient(180deg,rgba(0,0,0,.25),var(--nink) 96%)}
.na-hero-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center}
.na-hero h1{font-size:clamp(2.2rem,4.6vw,4rem);max-width:15ch}
.na-icon{width:96px;height:96px;border-radius:22px;margin-bottom:18px;box-shadow:0 10px 40px var(--glow)}
.na-kicker{font:800 .8rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--a);margin:0 0 14px}
.na .by{margin:-6px 0 14px;color:#c9d2e0;font-weight:700}
.na-price{font:800 1.9rem/1.1 var(--display);margin:6px 0 18px}
.na-price strong{color:var(--paper)}
.na-price small{display:block;margin-top:6px;font:600 .9rem var(--body);color:var(--steel)}
.na-was,.na .price s{color:var(--steel);font-weight:600;font-size:.7em;margin-right:6px}
.na-shot{margin:0;border-radius:16px;overflow:hidden;background:#111;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04),0 0 70px var(--glow)}
.na-win{display:flex;gap:7px;padding:10px 12px;background:#1b1d24}
.na-win span{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.na-win span+span{background:#febc2e}.na-win span+span+span{background:#28c840}
.na-shot img{width:100%;height:auto}
.na-stats-sec{padding:0 0 10px!important}
.na-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.na-stat{padding:22px 24px;border-radius:18px;background:var(--card);border:1px solid rgba(255,255,255,.08)}
.na-stat b{display:block;font:800 clamp(1.7rem,3vw,2.4rem)/1 var(--display);color:var(--a);margin-bottom:8px}
.na-stat span{color:#c9d2e0}
.na-feat{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:20px}
.na-card{padding:26px;border-radius:20px;background:linear-gradient(160deg,var(--card),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08)}
.na-card h3{color:var(--paper)}
.na-card ul,.na-trial ul{margin:0;padding-left:1.1em;color:#c9d2e0}
.na-card li,.na-trial li{margin:.35em 0}
.na-card li::marker,.na-trial li::marker{color:var(--a)}
.na-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:44px;align-items:center}
.na-art{border-radius:18px;margin-top:18px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.na-trial{align-items:start;grid-template-columns:1fr 1fr}
.na-band{border-color:var(--a);background:linear-gradient(120deg,var(--card),var(--nink))}
.na-band .price{color:var(--paper)}

/* stage (DJ Mix Studio): centered hero, screenshot below */
.lay-stage .na-hero-in{grid-template-columns:1fr;text-align:center;justify-items:center}
.lay-stage .na-hero h1{max-width:20ch;margin-inline:auto}
.lay-stage .na-hero p{margin-inline:auto}
.lay-stage .na-hero .cta-row{justify-content:center}
.lay-stage .na-hero-shot{max-width:1040px;transform:perspective(1600px) rotateX(8deg);margin-top:12px}
.lay-stage .na-stat{text-align:center;border-color:var(--a)}
.lay-stage .na-feat{grid-template-columns:repeat(4,1fr)}

/* editorial (Style Editor): screenshot first, tall italic headline */
.lay-editorial .na-hero-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.lay-editorial .na-hero-shot{order:-1;transform:rotate(-1.5deg)}
.lay-editorial .na-hero h1{font-weight:800;letter-spacing:-.02em}
.lay-editorial .na-card{border-radius:4px 28px 4px 28px}
.lay-editorial .na-gallery .na-split{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.lay-editorial .na-gallery .na-shot{order:-1}

/* campus (Service Academy): gold rules, numbered cards */
.lay-campus .na-hero{text-align:left}
.lay-campus .na-stat{border-top:3px solid var(--b)}
.lay-campus .na-stat b{color:var(--b)}
.lay-campus .na-feat{counter-reset:m}
.lay-campus .na-card{position:relative;padding-top:56px}
.lay-campus .na-card::before{counter-increment:m;content:"0" counter(m);position:absolute;top:18px;left:26px;font:800 1rem var(--display);color:var(--b)}
.lay-campus .na-card li::marker{color:var(--b)}

@media (max-width:980px){.lay-stage .na-feat{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.na-hero-in,.na-split,.lay-editorial .na-hero-in,.lay-editorial .na-gallery .na-split,.na-trial{grid-template-columns:1fr}
  .lay-editorial .na-hero-shot,.lay-editorial .na-gallery .na-shot{order:0}.na-feat,.lay-stage .na-feat{grid-template-columns:1fr}.na-stats{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.lay-stage .na-hero-shot,.lay-editorial .na-hero-shot{transform:none}}

/* 2026-10-25: centered ("stage") pages also center the app icon and the small trial line */
.lay-stage .na-hero .na-icon{display:block;margin-left:auto;margin-right:auto}
.lay-stage .na-hero .dl-meta{text-align:center}