/* Xzar media store pages (2026-10-24). Placeholder look built on the existing Xzar tokens; the real brand look
   comes from the upcoming "what Xzar looks like" session. Single dark theme by design. */
:root {
  --void: #050409; --panel: #0e0c16; --panel-2: #151222; --ink: #f2f0f8; --soft: #d9d5e8; --muted: #a7a2bb;
  --line: #262238; --violet: #7c3aed; --violet-hi: #a78bfa; --violet-glow: rgba(124, 58, 237, 0.35); --ember: #f6a05b;
  --display: "Sora", "Helvetica Neue", Arial, sans-serif; --body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; --r: 14px; color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { background: var(--void); }
body { margin: 0; color: var(--ink); font: 17px/1.65 var(--body); padding: 0 20px; }
a { color: var(--violet-hi); }
.wrap { max-width: 1120px; margin: 0 auto; }
h1, h2, h3 { font-family: var(--display); line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 6vw, 4.2rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: -0.015em; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 14px; max-width: 64ch; }
.label { font: 600 0.72rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--violet-hi); }
.muted { color: var(--muted); }
nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; flex-wrap: wrap; }
.brand { font: 700 1.3rem var(--display); color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.brand i { width: 14px; height: 14px; border-radius: 50%; background: #000; box-shadow: 0 0 0 2px var(--violet-hi), 0 0 14px 3px var(--violet-glow); }
.navlinks { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.navlinks a { color: var(--muted); text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.navlinks a:hover, .navlinks a[aria-current] { color: var(--ink); }
.btn { display: inline-block; background: var(--ink); color: var(--void); text-decoration: none; font-weight: 700; padding: 11px 20px;
       border-radius: 999px; border: 0; font: 700 0.96rem var(--body); cursor: pointer; }
.btn.violet { background: var(--violet); color: #fff; box-shadow: 0 8px 30px -10px var(--violet-glow); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.navlinks .btn { color: var(--void); }
:focus-visible { outline: 2px solid var(--violet-hi); outline-offset: 3px; }
.hero { text-align: center; padding-block: 90px 70px; }
.hero p.lede { font-size: 1.2rem; color: var(--soft); margin: 20px auto 0; max-width: 48ch; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 28px; }
section { padding-block: 64px; border-top: 1px solid var(--line); }
section > .label { display: block; margin-bottom: 12px; }
section > h2 { margin-bottom: 14px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 26px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.card .tag { font: 600 0.7rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ember); }
.card .price { font: 700 1.4rem var(--display); }
.card .foot { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.video { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: var(--panel-2); border: 1px solid var(--line);
         border-radius: var(--r); display: grid; place-items: center; color: var(--muted); overflow: hidden; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
form.join { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
form.join input[type=email] { flex: 1 1 240px; min-width: 0; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line);
                              border-radius: 999px; padding: 11px 18px; font: inherit; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.consent { font-size: 0.85rem; color: var(--muted); display: flex; gap: 8px; align-items: flex-start; flex-basis: 100%; }
.msg { min-height: 1.5em; font-size: 0.95rem; color: var(--soft); margin-top: 8px; }
.ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 22px; }
.rung { border: 1px solid var(--line); border-radius: var(--r); padding: 16px; background: var(--panel); }
.rung b { display: block; font-family: var(--display); }
footer { border-top: 1px solid var(--line); padding-block: 30px; color: var(--muted); font-size: 0.9rem; display: flex;
         gap: 18px; flex-wrap: wrap; justify-content: space-between; }
footer a { color: var(--muted); }
@media (max-width: 600px) { .hero { padding-block: 60px 50px; } section { padding-block: 48px; } }