/*
  PLAYRS-ORACLE-V1 -- public ORACLE V1 page (/oracle/).
  Voice control for FL Studio + Ableton Live (ORACLE V1 page handoff,
  2026-10-09). Replaces the story/writing ORACLE pitch, which is set
  aside in archive/ORACLE-ORIGINAL-PAGE-SIDELINED-*.

  PLAYRS look: black / white / gray from the shared theme tokens.
  Red is a MARK only: the ■ in eyebrows (and the primary CTA hover once
  it goes live). No rounded corners, no shadows, no gradients, no
  scroll animation. IBM Plex Mono via playrs-type-v1.css.
*/
body.oracle-v1 {
  --o-bg: var(--playrs-bg);
  --o-ink: var(--playrs-text);
  --o-dim: var(--playrs-text-muted);
  --o-line: var(--playrs-border);
  --o-line-2: var(--playrs-border-strong);
  --o-red: #e3261c;

  margin: 0;
  background: var(--o-bg);
  color: var(--o-ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* light theme: the shared muted token is ~4:1 on the warm field; darken
   dim text here so small eyebrows clear WCAG AA (4.5:1) */
html[data-playrs-theme="light"] body.oracle-v1 { --o-dim: rgba(28,27,23,.74); }
body.oracle-v1 * { box-sizing: border-box; }
body.oracle-v1 a { color: inherit; text-decoration: none; }

.o-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 22px) 24px 64px;
}

/* ---- top bar ---- */
.o-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--o-line);
  font-size: 10px;
  letter-spacing: .16em;
}
.o-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.o-brand img { width: 15px; height: auto; display: block; }
html[data-playrs-theme="light"] .o-brand img { filter: invert(1); }
.o-top-links { display: flex; gap: 20px; color: var(--o-dim); }
.o-top a:hover, .o-top a:focus-visible { color: var(--o-ink); }

/* ---- shared type ---- */
html body .o-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.5;
  color: var(--o-dim);
}
.o-mark { color: var(--o-red); margin-right: .55em; }
.o-body {
  margin: 20px 0 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--o-ink);
}
.o-body + .o-body { margin-top: 12px; }

/* ---- buttons ---- */
.o-btn {
  display: inline-block;
  padding: 15px 20px;
  border: 1px solid var(--o-ink);
  background: var(--o-ink);
  color: var(--o-bg);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1;
  border-radius: 0;
}
.o-btn[disabled] {
  background: transparent;
  color: var(--o-dim);
  border-color: var(--o-line-2);
  cursor: default;
}
.o-btn:not([disabled]):hover,
.o-btn:not([disabled]):focus-visible { background: var(--o-red); border-color: var(--o-red); color: #fff; }

/* ---- hero ---- */
.o-hero {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 64px 0 72px;
}
.o-hero.no-media { grid-template-columns: minmax(0, 760px); }
html body .o-hero h1 {
  margin: 20px 0 0;
  font-size: clamp(52px, 6.6vw, 96px);   /* one line beside the 9:16 frame */
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.02em;
}
.o-line {
  margin: 22px 0 0;
  font-size: clamp(16px, 2.2vw, 20px);
  font-weight: 700;
  letter-spacing: .08em;
}
.o-cta { margin-top: 34px; }
.o-price {
  margin: 0 0 16px;
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 700;
  line-height: 1;
}
.o-offer {
  margin: -6px 0 18px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--o-dim);
}
.o-offer b { color: var(--o-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.o-offer[hidden] { display: none; }
.o-price span {
  margin-left: 12px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--o-dim);
  vertical-align: middle;
}
.o-works {
  margin: 16px 0 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--o-dim);
}

/* launch video: 9:16 frame beside the copy, never full width */
.o-media { justify-self: end; width: min(360px, 100%); margin: 0; }
.o-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--o-line);
  background: #000;
  overflow: hidden;
}
.o-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.o-media-controls {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
}
.o-ctl {
  padding: 0;
  border: 0;
  background: none;
  color: var(--o-dim);
  font: inherit;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  cursor: pointer;
}
.o-ctl:hover, .o-ctl:focus-visible { color: var(--o-ink); }

/* ---- sections ---- */
.o-sec { padding: 56px 0; border-top: 1px solid var(--o-line); }
html body .o-sec h2.o-title {
  margin: 18px 0 0;
  font-size: clamp(32px, 6vw, 56px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
}

/* status screenshot: real V1 window capture, hairline frame */
.o-shot { margin: 32px 0 0; max-width: 880px; border: 1px solid var(--o-line); }
.o-shot img { display: block; width: 100%; height: auto; }

/* how it works: 01 / 02 / 03 */
.o-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--o-line);
}
.o-steps li { padding: 22px 24px 0 0; }
.o-steps li + li { padding-left: 24px; border-left: 1px solid var(--o-line); }
.o-num { display: block; font-size: 11px; font-weight: 500; letter-spacing: .16em; color: var(--o-dim); }
html body .o-steps h3 { margin: 14px 0 0; font-size: 16px; font-weight: 700; letter-spacing: .08em; }
.o-steps p { margin: 12px 0 0; font-size: 14px; line-height: 1.65; }

/* commands grid */
.o-cmds { margin: 28px 0 0; border-top: 1px solid var(--o-line); }
.o-cmd {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--o-line);
}
.o-cmd dt { font-size: 11px; font-weight: 500; letter-spacing: .16em; color: var(--o-dim); padding-top: 2px; }
.o-cmd dd { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.6; }
.o-cmd dd span { display: block; }
.o-foot { margin: 16px 0 0; font-size: 12px; line-height: 1.6; color: var(--o-dim); }

/* built for the take: marks */
.o-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
}
.o-marks li::before { content: "■"; margin-right: .6em; }

/* requirements */
.o-reqs { margin: 28px 0 0; border-top: 1px solid var(--o-line); }
.o-req {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--o-line);
}
.o-req dt { font-size: 11px; font-weight: 500; letter-spacing: .16em; color: var(--o-dim); padding-top: 2px; }
.o-req dd { margin: 0; font-size: 14px; line-height: 1.6; }

/* FAQ accordion */
.o-faq { margin: 28px 0 0; border-top: 1px solid var(--o-line); }
.o-faq details { border-bottom: 1px solid var(--o-line); }
.o-faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.o-faq summary::-webkit-details-marker { display: none; }
.o-faq summary::after { content: "+"; font-weight: 400; color: var(--o-dim); }
.o-faq details[open] summary::after { content: "−"; }
.o-faq summary:focus-visible { outline: 1px solid var(--o-ink); outline-offset: 4px; }
.o-faq p { margin: 0 0 20px; max-width: 64ch; font-size: 14px; line-height: 1.65; color: var(--o-dim); }

.o-page a:focus-visible,
.o-btn:focus-visible,
.o-ctl:focus-visible { outline: 1px solid var(--o-ink); outline-offset: 4px; }

@media (max-width: 760px) {
  .o-page { padding-left: 16px; padding-right: 16px; }
  .o-top-links { gap: 14px; }
  .o-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 44px 0 52px; }
  .o-media { justify-self: center; width: min(340px, 100%); }
  .o-sec { padding: 44px 0; }
  .o-steps { grid-template-columns: minmax(0, 1fr); }
  .o-steps li, .o-steps li + li { padding: 20px 0; border-left: 0; }
  .o-steps li + li { border-top: 1px solid var(--o-line); }
  .o-cmd, .o-req { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .o-cmd dd { font-size: 14px; }
}

/* ---- waitlist popup (js/playrs-oracle-waitlist-v1.js) ----
   Hairline panel, no radius / shadow / gradient. Red only on the ■ and
   the primary-action hover (shared .o-btn rule). */
#o-wl[hidden] { display: none; }
#o-wl { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; }
.o-wl-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); }
html[data-playrs-theme="light"] .o-wl-backdrop { background: rgba(21,21,19,.5); }
.o-wl-panel {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 28px 28px 24px;
  background: var(--o-bg);
  color: var(--o-ink);
  border: 1px solid var(--o-line-2);
}
.o-wl-x {
  position: absolute; top: 14px; right: 16px;
  padding: 6px 0; border: 0; background: none; color: var(--o-dim);
  font: inherit; font-size: 10px; font-weight: 500; letter-spacing: .16em; cursor: pointer;
}
.o-wl-x:hover, .o-wl-x:focus-visible { color: var(--o-ink); }
html body .o-wl-title { margin: 16px 0 0; font-size: clamp(26px, 5vw, 36px); font-weight: 700; line-height: 1.05; letter-spacing: -.01em; }
.o-wl-desc { margin: 14px 0 0; font-size: 14px; line-height: 1.6; }
.o-wl-form { margin: 22px 0 0; }
.o-wl-label { display: block; font-size: 10px; font-weight: 500; letter-spacing: .16em; color: var(--o-dim); }
.o-wl-row { display: flex; gap: 10px; margin-top: 8px; }
.o-wl-input {
  flex: 1 1 auto; min-width: 0;
  padding: 13px 12px;
  border: 1px solid var(--o-line-2); border-radius: 0;
  background: transparent; color: var(--o-ink);
  font: inherit; font-size: 15px;
}
.o-wl-input:focus { outline: 1px solid var(--o-ink); outline-offset: 0; border-color: var(--o-ink); }
.o-wl-input[aria-invalid="true"] { border-color: var(--o-ink); }
.o-wl-submit { flex: 0 0 auto; }
.o-wl-submit[disabled] { cursor: progress; }
.o-wl-msg { min-height: 1.5em; margin: 10px 0 0; font-size: 11px; font-weight: 500; letter-spacing: .12em; }
.o-wl-fine { margin: 6px 0 0; font-size: 11px; line-height: 1.6; color: var(--o-dim); }
.o-wl-fine a { text-decoration: underline; text-underline-offset: 3px; }
html.o-wl-open, html.o-wl-open body { overflow: hidden; }
.o-wl-open-btn { margin-left: 12px; }
@media (max-width: 760px) {
  #o-wl { align-items: end; }
  .o-wl-panel { padding: 24px 20px 20px; }
  .o-wl-row { flex-direction: column; }
  .o-wl-open-btn { margin: 12px 0 0; }
}

/* ---- /oracle/download/ (paid delivery page) ---- */
.o-dl { border-top: 0; }
html body .o-dl h1.o-title {
  margin: 18px 0 0;
  font-size: clamp(32px, 6vw, 56px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
}
.o-dl .o-body { margin-top: 18px; max-width: 560px; }
.o-dl .o-dl-key { margin-top: 22px; color: var(--o-dim); }
.o-dl a:not(.o-btn), #o-dl-steps .o-foot a, .o-faq p a { text-decoration: underline; text-underline-offset: 3px; }
html body a.o-btn { text-decoration: none; color: var(--o-bg); }
html body a.o-btn:hover, html body a.o-btn:focus-visible { color: #fff; }
.o-btn[hidden] { display: none; }