:root {
  color-scheme: dark;
  --bg: #070a18;
  --bg-2: #0c1228;
  --panel: rgba(12, 18, 40, 0.78);
  --panel-strong: rgba(10, 14, 32, 0.92);
  --line: rgba(255, 79, 207, 0.28);
  --line-cyan: rgba(46, 230, 255, 0.32);
  --text: #f6f7fb;
  --muted: #9a98b8;
  --muted-2: #746f8d;
  --pink: #ff4fcf;
  --pink-hot: #ff2fc3;
  --pink-glow: #ff7ae1;
  --cyan: #2ee6ff;
  --cyan-glow: #69f2ff;
  --yellow: #ffd166;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --shadow-pink: 0 0 32px rgba(255, 79, 207, 0.26), 0 0 72px rgba(255, 79, 207, 0.12);
  --shadow-cyan: 0 0 32px rgba(46, 230, 255, 0.18), 0 0 90px rgba(46, 230, 255, 0.1);
  --max: 1060px;
  --od-announcement-height: 0px;
  --od-announcement-gap: 0px;
  --nav-offset: calc(4.5rem + var(--od-announcement-height) + var(--od-announcement-gap));
  /* Border system — brighter navy-violet, not neon */
  --od-border: rgba(168, 176, 220, 0.22);
  --od-border-strong: rgba(190, 198, 240, 0.34);
  --od-border-muted: rgba(150, 158, 200, 0.12);
  --od-border-accent: rgba(46, 230, 255, 0.38);
  --od-border-focus: rgba(105, 242, 255, 0.72);
  /* Aliases used by existing rules */
  --border: var(--od-border);
  --border-muted: var(--od-border-muted);
  --border-accent: rgba(255, 79, 207, 0.36);
  --card-bg: linear-gradient(180deg, rgba(16, 22, 44, 0.88), rgba(10, 14, 30, 0.94));
  --panel-bg: rgba(10, 14, 28, 0.72);
  --shadow-soft: 0 12px 36px rgba(0, 0, 0, 0.28);
  --shadow-accent: 0 10px 28px rgba(255, 79, 207, 0.14);
  --space-1: 0.5rem;
  --space-2: 0.85rem;
  --space-3: 1.25rem;
  --space-4: 1.75rem;
  --space-5: 2.5rem;
  --radius-card: 16px;
  --radius-control: 11px; /* buttons, inputs, FAQ controls — game-menu rounded rect */
  --radius-btn: 11px;
  --icon-chip-bg: rgba(12, 16, 36, 0.78);
  --icon-chip-border: rgba(168, 176, 220, 0.28);
  --icon-chip-color: #9adcf0;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  font-size: 120%;
  background: var(--bg);
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-offset);
}

html:not(.od-announcement--dismissed):not(.od-announcement--disabled) {
  /* Bar body + notch safe-area; gap separates bar from floating nav */
  --od-announcement-height: calc(3.5rem + env(safe-area-inset-top, 0px));
  --od-announcement-gap: 0.5rem;
}

body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 50% -10%, #151c38 0%, var(--bg) 55%, #060912 100%);
  color: var(--text);
  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  line-height: 1.62;
}

img, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

p, h1, h2, h3 { margin-top: 0; }

button, input { font: inherit; }

.od-svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.od-icon {
  display: block;
  flex-shrink: 0;
}

.od-icon[hidden] {
  display: none !important;
}

.od-apple-icon {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: 0.95rem;
}

.od-apple-icon--cta {
  height: 1.35rem;
}

/* Background */

.od-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.od-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(255, 255, 255, 0.25), transparent),
    radial-gradient(1px 1px at 80% 20%, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255, 255, 255, 0.15), transparent);
  background-size: 200px 200px;
}

.od-bg__ring {
  position: absolute;
  width: 52rem;
  aspect-ratio: 1;
  border: 1px solid rgba(46, 230, 255, 0.1);
  border-radius: 50%;
}

.od-bg__ring--one {
  top: 8rem;
  left: calc(50% - 46rem);
  box-shadow: inset 0 0 50px rgba(46, 230, 255, 0.04);
}

.od-bg__ring--two {
  right: calc(50% - 48rem);
  bottom: 10rem;
  border-color: rgba(255, 79, 207, 0.12);
  box-shadow: inset 0 0 50px rgba(255, 79, 207, 0.05);
}

.od-bg__glow {
  position: absolute;
  width: 32rem;
  aspect-ratio: 1;
  border-radius: 999px;
  opacity: 0.28;
  filter: blur(74px);
}

.od-bg__glow--pink {
  top: 20rem;
  right: -12rem;
  background: var(--pink);
}

.od-bg__glow--cyan {
  bottom: 14rem;
  left: -14rem;
  background: var(--cyan);
}

.od-skip {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  transform: translateY(-180%);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-btn);
  background: #fff;
  color: #000;
  font-weight: 800;
}

.od-skip:focus { transform: translateY(0); }

/* Top announcement (dismissible; height drives nav offset) */

.od-announcement {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--od-announcement-height);
  min-height: var(--od-announcement-height);
  padding: env(safe-area-inset-top, 0px) 0 0;
  border-bottom: 1px solid rgba(168, 176, 220, 0.22);
  background-color: rgba(8, 11, 24, 0.97);
  background-image:
    linear-gradient(
      135deg,
      rgba(255, 79, 207, 0.14),
      rgba(46, 230, 255, 0.08) 52%,
      rgba(12, 18, 40, 0.06)
    );
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.45;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.28s ease, transform 0.28s ease;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.od-announcement.is-closing {
  opacity: 0;
  transform: translateY(-100%);
}

html.od-announcement--dismissed .od-announcement,
html.od-announcement--disabled .od-announcement {
  display: none;
}

.od-announcement__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(var(--max), calc(100vw - 2rem));
  margin: 0 auto;
  padding: 0 0.15rem;
}

.od-announcement__text {
  margin: 0;
  flex: 1;
  text-align: center;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(246, 247, 251, 0.92);
}

.od-announcement__link {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 800;
}

.od-announcement__link:hover,
.od-announcement__link:focus-visible {
  color: var(--cyan-glow);
  text-decoration-thickness: 2px;
  outline: none;
}

@media (min-width: 641px) {
  .od-announcement__text { text-align: left; }
}

.od-announcement__close {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(190, 198, 240, 0.28);
  border-radius: var(--radius-btn);
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(10, 14, 28, 0.45);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.od-announcement__close:hover,
.od-announcement__close:focus-visible {
  outline: none;
  border-color: rgba(105, 242, 255, 0.55);
  background: rgba(14, 20, 40, 0.72);
}

.od-announcement__close:active {
  transform: scale(0.96);
}

/* Floating nav (Chroma pattern) */

.od-top--float {
  position: fixed;
  top: calc(var(--od-announcement-height) + var(--od-announcement-gap));
  left: 0;
  right: 0;
  z-index: 90;
  padding: max(6px, env(safe-area-inset-top)) clamp(10px, 3.5vw, 22px) 8px;
  pointer-events: none;
  transition: top 0.28s ease;
}

html:not(.od-announcement--dismissed):not(.od-announcement--disabled) .od-top--float {
  /* Safe-area is already consumed by the announcement bar */
  padding-top: 0;
}

.od-top__inner {
  pointer-events: auto;
  width: min(var(--max), calc(100vw - 2rem));
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 10px 14px;
  border: 1px solid var(--od-border-strong);
  border-top-color: rgba(200, 208, 245, 0.28);
  border-radius: var(--radius-lg);
  background: rgba(8, 10, 28, 0.86);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.od-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.od-brand__mark {
  width: 1.85rem;
  height: 1.85rem;
  aspect-ratio: 1;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 22.5%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0a0610;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.od-brand__mark-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

.od-brand__name { white-space: nowrap; }

.od-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.od-nav a,
.od-nav__more-btn {
  padding: 0.52rem 0.72rem;
  border-radius: var(--radius-btn);
  color: rgba(246, 247, 251, 0.78);
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.od-nav a:hover,
.od-nav a:focus-visible,
.od-nav__more-btn:hover,
.od-nav__more-btn:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.od-nav a[aria-current="page"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-btn);
}

.od-nav__download {
  position: relative;
  isolation: isolate;
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid rgba(255, 79, 207, 0.55) !important;
  color: #fff !important;
  background: #05060f !important;
  box-shadow: 0 0 18px rgba(255, 79, 207, 0.16);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.od-nav__download:hover,
.od-nav__download:focus-visible {
  color: #fff !important;
  border-color: rgba(255, 154, 216, 0.8) !important;
  background: rgba(255, 79, 207, 0.12) !important;
  box-shadow: 0 0 22px rgba(255, 79, 207, 0.24);
  outline: none;
}

.od-nav__more {
  position: relative;
}

.od-nav__more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.od-nav__chevron {
  opacity: 0.75;
  transition: transform 160ms ease;
}

.od-nav__more.is-open .od-nav__chevron,
.od-nav__more:hover .od-nav__chevron {
  transform: rotate(180deg);
}

.od-nav__dropdown {
  position: absolute;
  top: calc(100% + 0.2rem);
  right: 0;
  z-index: 40;
  min-width: 11rem;
  padding: 0.4rem;
  border: 1px solid var(--od-border-strong);
  border-radius: var(--radius-card);
  background: rgba(8, 12, 28, 0.96);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  display: grid;
  gap: 0.15rem;
}

/* Invisible bridge so the pointer can move from trigger → menu without closing */
.od-nav__more::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0.55rem;
}

/* Class display:grid must not override the hidden attribute */
.od-nav__dropdown[hidden] {
  display: none !important;
}

.od-nav__dropdown a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-btn);
  color: rgba(246, 247, 251, 0.86);
  white-space: nowrap;
}

.od-nav__dropdown a:hover,
.od-nav__dropdown a:focus-visible,
.od-nav__dropdown a[aria-current="page"] {
  color: #fff;
  background: rgba(255, 79, 207, 0.14);
  outline: none;
}

.od-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-left: auto;
  border: 1px solid var(--od-border);
  border-radius: var(--radius-btn);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  cursor: pointer;
}

.od-nav__toggle:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.od-nav__toggle-icon--close { display: none; }

.od-nav__toggle[aria-expanded="true"] .od-nav__toggle-icon--open { display: none; }
.od-nav__toggle[aria-expanded="true"] .od-nav__toggle-icon--close { display: block; }

.od-nav__overlay {
  position: fixed;
  inset: 0;
  z-index: 35;
  padding: calc(var(--nav-offset) + 0.75rem) 1rem 1.5rem;
  background: rgba(4, 7, 16, 0.92);
  backdrop-filter: blur(10px);
}

.od-nav__overlay[hidden] {
  display: none !important;
}

.od-nav__panel {
  display: grid;
  gap: 0.35rem;
  width: min(100%, 22rem);
  margin: 0 auto;
  padding: 1rem;
  border: 1px solid var(--od-border-strong);
  border-radius: var(--radius-lg);
  background: rgba(10, 14, 32, 0.96);
}

.od-nav__panel a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-btn);
  color: rgba(246, 247, 251, 0.88);
  font-weight: 700;
}

.od-nav__panel a:hover,
.od-nav__panel a:focus-visible,
.od-nav__panel a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  outline: none;
}

.od-nav__panel .od-nav__download {
  justify-content: center;
  margin-top: 0.35rem;
}

body.od-nav-open {
  overflow: hidden;
}

.od-wrap {
  width: min(var(--max), calc(100vw - 2rem));
  margin: 0 auto;
}

/* Hero */

.od-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
  align-items: center;
  gap: clamp(1.25rem, 3.5vw, 2.5rem);
  padding: calc(var(--nav-offset) + 0.75rem) 0 1.25rem;
}

.od-hero__copy { min-width: 0; }

.od-kicker, .od-section__label, .od-footer__eyebrow {
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.od-kicker {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 1rem;
  padding-top: 0.85rem;
  text-shadow: 0 0 20px rgba(46, 230, 255, 0.4);
}

.od-logo-shell {
  position: relative;
  width: min(448px, 80%);
  margin-bottom: 0.85rem;
}

.od-logo-shell::after {
  content: "";
  position: absolute;
  inset: 20% 2% 4%;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(255, 79, 207, 0.36), transparent 62%);
  filter: blur(28px);
}

.od-hero__logo {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 22px rgba(255, 79, 207, 0.36)) drop-shadow(0 0 28px rgba(46, 230, 255, 0.12));
}

.od-hero h1 {
  max-width: 14ch;
  margin-bottom: 1rem;
  font-size: clamp(1.875rem, 4.375vw, 2.625rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}

.od-hero__lede {
  max-width: 520px;
  margin-bottom: 1.4rem;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  font-weight: 600;
}

.od-hero__actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

.od-btn {
  min-height: 3.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin: 0;
  border: 0;
  border-radius: var(--radius-btn);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  color: inherit;
  background: transparent;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.od-btn:hover, .od-btn:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.od-btn--store {
  flex-direction: row;
  padding: 0.65rem 1.25rem;
  border: 1px solid rgba(255, 79, 207, 0.74);
  background: linear-gradient(135deg, rgba(255, 47, 195, 0.95), rgba(145, 47, 255, 0.72));
  color: #fff;
  box-shadow: var(--shadow-pink);
}

.od-btn__store-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.od-btn__small {
  font-size: 0.68rem;
  line-height: 1.05;
  opacity: 0.86;
  font-weight: 700;
}

.od-btn__big {
  font-size: 1.05rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.od-btn--ghost {
  padding: 0 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}

.od-btn--ghost:hover, .od-btn--ghost:focus-visible {
  border-color: rgba(46, 230, 255, 0.65);
  box-shadow: var(--shadow-cyan);
}

.od-btn__play-icon {
  width: 1.35rem;
  height: 1.35rem;
  color: #fff;
  flex-shrink: 0;
}

.od-hero__note {
  color: var(--muted-2);
  font-size: 0.85rem;
  font-weight: 600;
}

.od-hero__media {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  min-width: 0;
}

.od-hero-slider {
  --od-hero-fade-ms: 1000ms;
  position: relative;
  display: block;
  width: min(100%, 420px);
  flex-shrink: 0;
}

.od-hero-slider::before {
  content: "";
  position: absolute;
  inset: 8% 4% 4%;
  z-index: -1;
  border-radius: 2rem;
  background: radial-gradient(ellipse at center, rgba(255, 79, 207, 0.32), transparent 70%);
  filter: blur(28px);
  pointer-events: none;
}

.od-hero-slider__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 759 / 1385;
  overflow: hidden;
  background: transparent;
}

.od-hero-slider__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  margin: 0;
  border: 0;
  border-radius: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--od-hero-fade-ms) ease;
  z-index: 0;
  background: transparent;
}

.od-hero-slider__slide.is-active {
  opacity: 1;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .od-hero-slider__slide {
    transition: none;
  }
}

/* Sections */

.od-section {
  padding: 1.75rem 0;
}

.od-hero + .od-section {
  padding-top: 1rem;
}

.od-section__label {
  margin-bottom: 0.85rem;
  color: var(--cyan);
}

/* At a glance */

.od-glance {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
    var(--panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(16px);
}

.od-glance__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 10rem;
}

.od-glance__orbits {
  position: relative;
  width: 9rem;
  aspect-ratio: 1;
}

.od-glance__ring {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
  border: 2px solid rgba(46, 230, 255, 0.35);
}

.od-glance__ring--outer {
  width: 100%;
  height: 100%;
  box-shadow: 0 0 20px rgba(46, 230, 255, 0.15);
}

.od-glance__ring--mid {
  width: 68%;
  height: 68%;
  border-color: rgba(255, 79, 207, 0.4);
  box-shadow: 0 0 16px rgba(255, 79, 207, 0.2);
}

.od-glance__ring--inner {
  width: 38%;
  height: 38%;
  border-color: rgba(46, 230, 255, 0.5);
}

.od-glance__core {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18%;
  height: 18%;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 24px var(--pink), 0 0 48px rgba(255, 79, 207, 0.5);
}

.od-glance__copy p {
  color: var(--muted);
  font-size: 0.98rem;
  font-weight: 600;
}

.od-glance__copy p + p { margin-top: 0.85rem; }
.od-glance__copy p:last-child { margin-bottom: 0; }

/* Feature cards */

.od-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.od-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 16rem;
  padding: 1.15rem;
  border: 1px solid var(--od-border);
  border-top-color: var(--od-border-strong);
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
    var(--panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(16px);
  overflow: hidden;
}

.od-card__icon {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  margin-bottom: 0.85rem;
  border-radius: 50%;
  border: 1px solid var(--icon-chip-border);
  color: var(--icon-chip-color);
  background: var(--icon-chip-bg);
  box-shadow: none;
}

.od-card__icon .od-icon {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

.od-card h3 {
  margin-bottom: 0.4rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
}

.od-card p {
  flex: 1;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.od-card__art {
  position: relative;
  margin-top: 1rem;
  min-height: 4.5rem;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Jump art */
.od-card__art--jump {
  display: flex;
  align-items: center;
  justify-content: center;
}

.od-card__lane {
  position: absolute;
  left: 10%;
  right: 10%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--pink), transparent);
  box-shadow: 0 0 8px var(--pink);
}

.od-card__lane--top { top: 35%; transform: rotate(-8deg); }
.od-card__lane--bottom { bottom: 30%; transform: rotate(8deg); }

.od-card__dot {
  position: relative;
  z-index: 1;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 12px var(--pink);
}

/* Pickup art */
.od-card__art--pickups {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}

.od-card__pickup {
  display: grid;
  place-items: center;
}

.od-card__pickup--spark { color: var(--yellow); filter: drop-shadow(0 0 8px var(--yellow)); }
.od-card__pickup--shield { color: var(--cyan); filter: drop-shadow(0 0 8px var(--cyan)); }
.od-card__pickup--core { color: var(--yellow); filter: drop-shadow(0 0 8px var(--yellow)); }

/* Gamepad art */
.od-card__art--pad {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pink);
  filter: drop-shadow(0 0 10px rgba(255, 79, 207, 0.4));
}

.od-card__pad-svg {
  width: 70%;
  max-width: 7rem;
  height: auto;
}

/* Compatibility bar */

.od-compat {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 4vw, 2.5rem);
  margin: 1rem 0 0;
  padding: 1rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  background: rgba(8, 10, 28, 0.6);
  backdrop-filter: blur(12px);
}

.od-compat__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.od-compat__icon {
  color: var(--cyan);
  opacity: 0.85;
}

/* Footer */

.od-footer {
  margin-top: 0;
  padding: 0 0 2rem;
  background:
    linear-gradient(180deg, transparent, rgba(255, 79, 207, 0.05)),
    radial-gradient(circle at 50% 0%, rgba(120, 20, 70, 0.14), transparent 38%);
}

.od-footer__shell {
  width: min(var(--max), calc(100vw - 2rem));
  margin: 0 auto;
}

.od-footer__divider {
  display: block;
  width: min(22rem, 58%);
  height: 1px;
  margin: 1.75rem auto;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 79, 207, 0.45) 35%,
    rgba(255, 79, 207, 0.55) 50%,
    rgba(120, 20, 70, 0.35) 65%,
    transparent
  );
}

.od-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 0.9rem;
}

.od-footer__card, .od-footer__panel {
  border: 1px solid var(--od-border);
  border-top-color: var(--od-border-strong);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
    var(--panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
}

.od-footer__brand-card {
  min-height: 18rem;
  padding: clamp(1.2rem, 3vw, 1.7rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  position: relative;
  overflow: hidden;
}

.od-footer__brand-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 82% 12%, rgba(120, 20, 70, 0.18), transparent 42%);
}

.od-footer__brand-body {
  position: relative;
  z-index: 1;
}

.od-footer__team-art {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-top: auto;
  position: relative;
  z-index: 1;
  border-radius: calc(var(--radius-md) - 2px);
  opacity: 1;
}

.od-footer__brand-title {
  margin-bottom: 0.5rem;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
}

.od-footer__brand-copy {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
}

.od-footer__brand-actions {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.od-footer__stack {
  display: grid;
  gap: 0.9rem;
}

.od-footer__panel { padding: 1.2rem; }

.od-footer__panel-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
}

.od-footer__panel-icon {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid var(--icon-chip-border);
  background: var(--icon-chip-bg);
  color: var(--icon-chip-color);
  box-shadow: none;
}

.od-footer__panel-icon .od-icon {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
}

.od-footer__panel-title {
  margin: 0;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
}

.od-footer__panel-copy {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.od-footer__panel-note {
  margin: 0.65rem 0 0;
  color: var(--muted-2);
  font-size: 0.78rem;
  font-weight: 600;
}

.od-footer__signup {
  display: flex;
  gap: 0.55rem;
  margin-top: 0.85rem;
}

.od-footer__input {
  min-width: 0;
  flex: 1;
  min-height: 2.7rem;
  border: 1px solid var(--od-border);
  border-radius: var(--radius-control);
  padding: 0 0.95rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.26);
  outline: none;
  font-weight: 600;
}

.od-footer__input::placeholder { color: var(--muted-2); }

.od-footer__input:focus {
  border-color: var(--od-border-focus);
  box-shadow: 0 0 0 3px rgba(46, 230, 255, 0.14);
}

.od-footer__signup-status {
  margin: 0.55rem 0 0;
  font-size: 0.82rem;
  font-weight: 700;
}

.od-footer__signup-status--success { color: var(--cyan); }
.od-footer__signup-status--error { color: #ff6b8a; }

.od-footer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.7rem;
  padding: 0 0.95rem;
  border-radius: var(--radius-btn);
  border: 1px solid var(--od-border);
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.od-footer__btn:hover, .od-footer__btn:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.od-footer__btn--primary {
  border-color: rgba(46, 230, 255, 0.48);
  background: linear-gradient(135deg, rgba(46, 230, 255, 0.22), rgba(255, 79, 207, 0.12));
  box-shadow: var(--shadow-cyan);
}

.od-footer__btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

.od-footer__btn--kofi {
  margin-top: 0.85rem;
  border-color: rgba(255, 79, 207, 0.54);
  background: linear-gradient(135deg, rgba(255, 47, 195, 0.38), rgba(255, 79, 207, 0.16));
}

.od-footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.od-footer__bar-brand {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.od-footer__bar p { margin: 0; }

.od-footer__bar-left {
  color: rgba(246, 247, 251, 0.9);
}

.od-footer__bar a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(46, 230, 255, 0.5);
  text-underline-offset: 0.2em;
}

.od-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  font-size: 0.78rem;
}

.od-footer__links a {
  color: rgba(246, 247, 251, 0.78);
  text-decoration: none;
}

.od-footer__links a:hover,
.od-footer__links a:focus-visible {
  color: #fff;
  outline: none;
}

.od-footer__panel--support .od-footer__btn--primary {
  margin-top: 0.15rem;
}

.od-footer__panel--support .od-footer__btn--kofi {
  margin-top: 0.55rem;
}

.od-footer__social {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(46, 230, 255, 0.5);
  text-underline-offset: 0.2em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.od-footer__social:hover, .od-footer__social:focus-visible {
  color: #fff;
  text-decoration-color: rgba(46, 230, 255, 0.85);
  outline: none;
}

.od-footer__status {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.od-footer__status-dot {
  width: 0.5rem;
  height: 0.5rem;
  display: inline-block;
  margin-right: 0.36rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan);
  vertical-align: middle;
}

.od-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Responsive */

@media (min-width: 900px) {
  .od-top--float {
    padding: max(8px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 14px max(20px, env(safe-area-inset-left));
  }

  html:not(.od-announcement--dismissed):not(.od-announcement--disabled) .od-top--float {
    padding-top: 0;
  }

  .od-top__inner { flex-wrap: nowrap; }
}

@media (min-width: 521px) and (max-width: 899px) {
  .od-top__inner {
    flex-wrap: nowrap;
    gap: 10px 12px;
  }

  .od-nav {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
}

@media (max-width: 900px) {
  .od-hero {
    grid-template-columns: 1fr;
    padding: calc(var(--nav-offset) + 0.5rem) 0 1rem;
  }

  .od-hero__media { justify-content: center; }
  .od-feature-grid, .od-footer__grid { grid-template-columns: 1fr; }
  .od-glance { grid-template-columns: 1fr; }
  .od-glance__visual { min-height: 8rem; }
}

@media (max-width: 720px) {
  .od-top--float {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }

  .od-top__inner {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
    padding: 9px 10px;
  }

  .od-nav {
    display: none;
  }

  .od-nav__toggle {
    display: inline-flex;
  }

  .od-section { padding: 1.5rem 0; }
  .od-footer__bar { align-items: flex-start; flex-direction: column; }
  .od-footer__signup { flex-direction: column; }
  .od-footer__signup .od-footer__btn { width: 100%; }
  .od-compat { flex-direction: column; gap: 0.75rem; }
}

@media (max-width: 520px) {
  .od-wrap, .od-top__inner { width: min(100% - 1rem, var(--max)); }

  .od-top__inner { padding: 8px 7px; gap: 5px 6px; }
  .od-brand__name { display: none; }
  .od-hero { padding-top: calc(var(--nav-offset) + 0.35rem); }
  .od-logo-shell { width: min(80%, 336px); }
  .od-btn { width: 100%; }
  .od-btn--store { justify-content: center; }
  .od-hero-slider { width: min(100%, 360px); }
  .od-footer { padding-left: 0; padding-right: 0; }
}

/* ==========================================================================
   Interior pages
   ========================================================================== */

.od-page .od-bg__ring,
.od-page .od-bg__glow {
  opacity: 0.55;
}

.od-page-hero {
  position: relative;
  max-width: 40rem;
  padding: calc(var(--nav-offset) + 1.75rem) 0 1.5rem;
}

.od-page-hero--with-icon {
  display: flex;
  align-items: center;
  gap: 1.35rem 1.75rem;
  max-width: 48rem;
}

.od-page-hero__icon {
  flex-shrink: 0;
}

.od-page-hero__text {
  min-width: 0;
  flex: 1;
}

.od-page-hero__kicker {
  margin: 0 0 0.65rem;
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.od-page-hero__title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.85rem, 4vw, 2.55rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-shadow: 0 0 40px rgba(255, 79, 207, 0.18);
}

.od-page-hero__lede {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 38rem;
}

.od-page-hero__meta {
  margin: 0.9rem 0 0;
  color: var(--muted-2);
  font-size: 0.86rem;
}

/* Apple-style app icon (squircle + soft neon shadow) */
.od-app-icon {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 22.5%;
  background: #0a0610;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 10px 28px rgba(0, 0, 0, 0.42),
    0 0 18px rgba(255, 79, 207, 0.12);
}

.od-app-icon--hero {
  width: 5.75rem;
  height: 5.75rem;
}

.od-app-icon--lg {
  width: 4.75rem;
  height: 4.75rem;
}

.od-app-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.15rem 1.35rem;
  align-items: center;
  margin-top: 1.5rem;
  margin-bottom: 0;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card-bg);
  box-shadow: var(--shadow-soft);
}

.od-app-callout__title {
  margin: 0 0 0.35rem;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 900;
}

.od-app-callout__text {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 36rem;
}

.od-btn--store-compact {
  min-height: 2.85rem;
  padding: 0.45rem 1rem;
}

.od-btn--store-compact .od-btn__big {
  font-size: 0.95rem;
}

.od-btn--store-compact .od-apple-icon--cta {
  height: 1.15rem;
}

.od-page-shell {
  padding-bottom: 0;
}

.od-page-shell > :last-child {
  margin-bottom: 0;
}

.od-content-card,
.od-callout {
  border: 1px solid var(--od-border);
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(18, 24, 48, 0.88), rgba(10, 14, 32, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.od-callout {
  padding: 0.9rem 1.05rem;
  margin: 1.15rem 0 1.6rem;
  border-color: var(--od-border-accent);
  background: rgba(46, 230, 255, 0.05);
}

.od-callout--quiet {
  border-color: var(--od-border);
  background: rgba(255, 255, 255, 0.03);
}

.od-callout p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.od-callout strong {
  color: #fff;
}

.od-prose {
  max-width: 48rem;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.75;
}

.od-prose h2 {
  margin: 2.25rem 0 0.75rem;
  color: #fff;
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1.25;
}

.od-prose h3 {
  margin: 1.5rem 0 0.55rem;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
}

.od-prose p { margin: 0 0 1rem; }

.od-prose ul,
.od-prose ol {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
}

.od-prose li { margin: 0.35rem 0; }

.od-prose a {
  color: var(--cyan);
  text-decoration: underline;
  text-decoration-color: rgba(46, 230, 255, 0.45);
  text-underline-offset: 0.18em;
}

.od-prose a:hover,
.od-prose a:focus-visible {
  color: #fff;
  outline: none;
}

.od-toc {
  margin: 0 0 2rem;
}

.od-toc__summary {
  cursor: pointer;
  list-style: none;
  color: #fff;
  font-weight: 800;
}

.od-toc__summary::-webkit-details-marker { display: none; }

.od-toc__list {
  display: grid;
  gap: 0.35rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}

.od-toc__list a {
  color: rgba(246, 247, 251, 0.78);
  font-size: 0.9rem;
  font-weight: 700;
}

.od-toc__list a:hover,
.od-toc__list a:focus-visible {
  color: var(--cyan);
  outline: none;
}

.od-privacy-layout {
  display: grid;
  gap: 1.75rem;
}

.od-guide-layout {
  display: grid;
  gap: 1.75rem;
}

.od-privacy-sidebar,
.od-guide-sidebar {
  display: none;
}

.od-privacy-sidebar__title {
  margin: 0 0 0.75rem;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .od-privacy-layout {
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: 2.5rem;
    align-items: start;
  }

  .od-guide-layout {
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: 2.5rem;
    align-items: start;
  }

  .od-privacy-sidebar,
  .od-guide-sidebar {
    display: block;
    position: sticky;
    top: calc(var(--nav-offset) + 1rem);
  }

  .od-toc--mobile { display: none; }
}

.od-support-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 1.75rem;
}

.od-support-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--od-border);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, rgba(18, 24, 48, 0.88), rgba(10, 14, 32, 0.92));
  min-height: 100%;
  transition: border-color 160ms ease, transform 160ms ease;
}

.od-support-card:hover,
.od-support-card:focus-visible {
  border-color: rgba(46, 230, 255, 0.35);
  transform: translateY(-2px);
  outline: none;
}

.od-support-card__icon {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  color: var(--icon-chip-color);
  border: 1px solid var(--icon-chip-border);
  background: var(--icon-chip-bg);
  box-shadow: none;
}

.od-support-card__icon .od-icon {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

.od-support-card h2 {
  margin: 0;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
}

.od-support-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
  flex: 1;
}

.od-support-card__cta {
  color: var(--pink-glow);
  font-size: 0.86rem;
  font-weight: 800;
}

.od-section-block {
  margin: 2.5rem 0;
}

.od-section-block__label {
  margin: 0 0 0.85rem;
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.od-section-block__title {
  margin: 0 0 0.75rem;
  color: #fff;
  font-size: 1.45rem;
  font-weight: 900;
}

.od-section-block__copy {
  margin: 0 0 1.15rem;
  max-width: 42rem;
  color: var(--muted);
  line-height: 1.7;
}

.od-faq-group {
  margin: 0 0 1.75rem;
}

.od-faq-group__title {
  margin: 0 0 0.75rem;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
}

.od-faq {
  display: grid;
  gap: 0.55rem;
}

.od-faq__item {
  border: 1px solid var(--od-border);
  border-radius: var(--radius-card);
  background: rgba(10, 14, 32, 0.72);
  overflow: hidden;
}

.od-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.05rem;
  cursor: pointer;
  list-style: none;
  color: #fff;
  font-weight: 800;
  line-height: 1.35;
}

.od-faq__item summary::-webkit-details-marker { display: none; }

.od-faq__item summary::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  flex-shrink: 0;
  border-right: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.od-faq__item[open] summary::after {
  transform: rotate(-135deg);
}

.od-faq__item summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

.od-faq__body {
  padding: 0 1.05rem 1.05rem;
  color: var(--muted);
  line-height: 1.7;
}

.od-faq__body p { margin: 0 0 0.75rem; }
.od-faq__body p:last-child { margin-bottom: 0; }

.od-faq__body .od-kbd,
.od-faq__body code.od-kbd {
  display: inline-block;
  margin: 0 0.08em;
  padding: 0.12rem 0.45rem;
  border: 1px solid var(--od-border);
  border-radius: var(--radius-control);
  background: var(--icon-chip-bg);
  color: #fff;
  font: inherit;
  font-size: 0.86em;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.35;
  vertical-align: baseline;
  white-space: nowrap;
}

.od-checklist {
  margin: 0 0 1.25rem;
  padding-left: 1.15rem;
  color: var(--muted);
  line-height: 1.7;
}

.od-checklist li { margin: 0.35rem 0; }

.od-report-panel {
  margin-top: 0;
  padding: 1.25rem;
  border: 1px solid var(--od-border-strong);
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(18, 24, 48, 0.72), rgba(8, 12, 28, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.od-report-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}

.od-report-group {
  padding: 0.15rem 0.25rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.od-report-group__title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.85rem;
  color: #fff;
  font-size: 0.98rem;
  font-weight: 800;
}

.od-report-group__num {
  display: inline-grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  border: 1px solid var(--icon-chip-border);
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 900;
  background: var(--icon-chip-bg);
  box-shadow: none;
}

.od-report-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

.od-report-list li {
  display: grid;
  gap: 0.18rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--od-border-muted);
}

.od-report-list li:first-child {
  padding-top: 0;
  border-top: 0;
}

.od-report-list__label {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
}

.od-report-list__hint {
  color: var(--muted-2);
  font-size: 0.82rem;
  line-height: 1.45;
}

.od-report-panel__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.15rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--od-border-muted);
}

.od-report-attach {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 28rem;
}

.od-report-attach__icon { display: none; }

.od-report-attach__title {
  margin: 0 0 0.2rem;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
}

.od-report-attach__copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .od-report-panel__grid {
    grid-template-columns: 1fr;
  }

  .od-report-panel__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .od-report-panel__footer .od-actions .od-btn {
    width: 100%;
    justify-content: center;
  }
}

.od-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.od-btn--pink,
.od-btn--primary {
  padding: 0 1.25rem;
  border: 1px solid rgba(255, 79, 207, 0.55);
  background: linear-gradient(135deg, rgba(255, 47, 195, 0.5), rgba(255, 79, 207, 0.22));
  box-shadow: var(--shadow-accent);
  color: #fff;
}

.od-btn--secondary {
  padding: 0 1.15rem;
  border: 1px solid var(--od-border);
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}

.od-btn--secondary:hover,
.od-btn--secondary:focus-visible {
  border-color: var(--od-border-accent);
  outline: none;
}

.od-btn--secondary:focus-visible {
  border-color: var(--od-border-focus);
  box-shadow: 0 0 0 3px rgba(46, 230, 255, 0.14);
}

.od-btn--compact {
  min-height: 2.55rem;
  padding: 0 0.95rem;
  gap: 0.45rem;
  font-size: 0.86rem;
}

.od-btn--tertiary {
  padding: 0 0.35rem;
  min-height: 2.5rem;
  border: 0;
  background: transparent;
  color: rgba(246, 247, 251, 0.78);
  text-decoration: underline;
  text-decoration-color: rgba(46, 230, 255, 0.35);
  text-underline-offset: 0.18em;
  box-shadow: none;
}

.od-btn--tertiary:hover,
.od-btn--tertiary:focus-visible {
  color: #fff;
  outline: none;
}

.od-roadmap {
  display: grid;
  gap: 1.75rem;
}

.od-roadmap__group {
  display: grid;
  gap: 0.85rem;
}

.od-roadmap__group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
}

.od-roadmap__group-title {
  margin: 0;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 900;
}

.od-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(246, 247, 251, 0.86);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.04);
}

.od-status-pill--available {
  border-color: rgba(46, 230, 255, 0.45);
  color: var(--cyan);
  background: rgba(46, 230, 255, 0.1);
}

.od-status-pill--in-progress {
  border-color: rgba(255, 79, 207, 0.5);
  color: var(--pink-glow);
  background: rgba(255, 79, 207, 0.12);
}

.od-status-pill--up-next {
  border-color: rgba(167, 139, 250, 0.5);
  color: #c4b5fd;
  background: rgba(167, 139, 250, 0.12);
}

.od-status-pill--planned {
  border-color: rgba(46, 230, 255, 0.32);
  color: var(--cyan);
  background: rgba(46, 230, 255, 0.07);
}

.od-status-pill--ongoing {
  border-color: rgba(255, 209, 102, 0.4);
  color: var(--yellow);
  background: rgba(255, 209, 102, 0.08);
}

.od-status-pill--exploring {
  border-color: rgba(255, 255, 255, 0.22);
}

.od-status-pill--later {
  color: var(--muted);
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

.od-status-pill--not-planned {
  color: var(--muted-2);
  border-color: rgba(255, 255, 255, 0.08);
  opacity: 0.8;
}

.od-roadmap-card {
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--od-border);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, rgba(18, 24, 48, 0.88), rgba(10, 14, 32, 0.92));
}

.od-roadmap-card h3 {
  margin: 0 0 0.45rem;
  color: #fff;
  font-size: 1.02rem;
  font-weight: 800;
}

.od-roadmap-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.od-roadmap-card ul {
  margin: 0.75rem 0 0;
  padding-left: 1.1rem;
  color: var(--muted);
}

.od-roadmap-card li { margin: 0.28rem 0; }

.od-roadmap-card__note {
  margin-top: 0.75rem !important;
  color: var(--muted-2) !important;
  font-size: 0.88rem;
}

.od-product-hero {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: 1.75rem 2rem;
  align-items: start;
  padding: calc(var(--nav-offset) + 1.5rem) 0 1.75rem;
}

.od-product-hero__art {
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 79, 207, 0.28);
  box-shadow: var(--shadow-pink);
  background: #000;
}

.od-product-hero__art img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.od-product-hero__copy {
  max-width: 36rem;
}

.od-product-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.85rem;
  margin: 1rem 0 1.25rem;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.od-product-hero__stats li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.od-product-hero__note {
  margin: 0.9rem 0 0;
  color: var(--muted-2);
  font-size: 0.86rem;
  line-height: 1.55;
}

.od-featured-previews {
  display: grid;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--panel-bg);
}

.od-featured-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.85rem 1.25rem;
  align-items: center;
  padding: 0.95rem 1.1rem;
  border: 0;
  border-top: 1px solid var(--border-muted);
  border-radius: 0;
  background: transparent;
}

.od-featured-preview:first-child {
  border-top: 0;
}

.od-featured-preview__title {
  margin: 0 0 0.25rem;
  color: #fff;
  font-size: 1.02rem;
  font-weight: 800;
}

.od-featured-preview__label {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.od-featured-preview__meta {
  margin: 0.35rem 0 0;
  color: var(--muted-2);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.od-preview-control {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.od-preview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-btn);
  border: 1px solid var(--od-border);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  cursor: pointer;
}

.od-preview-btn:hover,
.od-preview-btn:focus-visible {
  outline: none;
  border-color: rgba(255, 79, 207, 0.45);
  background: rgba(255, 79, 207, 0.12);
}

.od-preview-btn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.od-preview-btn[disabled],
.od-preview-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.od-preview-btn[aria-pressed="true"] {
  border-color: var(--od-border-accent);
  border-width: 2px;
  background: linear-gradient(135deg, rgba(46, 230, 255, 0.28), rgba(255, 79, 207, 0.12));
}

.od-preview-btn__pause { display: none; }
.od-preview-btn[aria-pressed="true"] .od-preview-btn__play { display: none; }
.od-preview-btn[aria-pressed="true"] .od-preview-btn__pause { display: block; }

.od-preview-soon {
  color: var(--muted-2);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.od-include-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.od-include-card {
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--od-border);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, rgba(18, 24, 48, 0.88), rgba(10, 14, 32, 0.92));
}

.od-include-card__icon {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  margin-bottom: 0.65rem;
  border-radius: 50%;
  border: 1px solid var(--icon-chip-border);
  background: var(--icon-chip-bg);
  color: var(--icon-chip-color);
}

.od-include-card h3 {
  margin: 0 0 0.4rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
}

.od-include-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.od-track-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--od-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: rgba(10, 14, 32, 0.72);
}

.od-track-list__item {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.od-track-list__item:first-child {
  border-top: 0;
}

.od-track-list__num {
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.od-track-list__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  color: #fff;
  font-weight: 800;
}

.od-track-list__tag {
  display: inline-flex;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(46, 230, 255, 0.28);
  color: var(--cyan);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.od-track-list__duration {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
  font-weight: 700;
}

.od-cta-band {
  margin-top: 2.5rem;
  margin-bottom: 0;
  padding: 1.5rem 1.35rem;
  border: 1px solid var(--od-border-strong);
  border-radius: var(--radius-card);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 79, 207, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(18, 24, 48, 0.92), rgba(10, 14, 32, 0.96));
}

.od-cta-band h2 {
  margin: 0 0 0.55rem;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 900;
}

.od-cta-band p {
  margin: 0 0 1.1rem;
  max-width: 40rem;
  color: var(--muted);
  line-height: 1.65;
}

@media (max-width: 900px) {
  .od-support-grid,
  .od-include-grid,
  .od-product-hero {
    grid-template-columns: 1fr;
  }

  .od-product-hero__art {
    max-width: 18rem;
  }
}

@media (max-width: 720px) {
  .od-featured-preview {
    grid-template-columns: 1fr;
  }

  .od-page-hero {
    padding-top: calc(var(--nav-offset) + 1.15rem);
  }

  .od-page-hero--with-icon {
    flex-direction: column;
    align-items: flex-start;
  }

  .od-app-icon--hero {
    width: 4.5rem;
    height: 4.5rem;
  }

  .od-app-callout {
    grid-template-columns: 1fr;
  }

  .od-app-callout__actions .od-btn {
    width: 100%;
    justify-content: center;
  }

  .od-track-list__item {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .od-track-list__duration {
    grid-column: 2;
  }
}

@media (max-width: 520px) {
  .od-support-grid {
    grid-template-columns: 1fr;
  }

  .od-actions .od-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .od-preview-btn[aria-pressed="true"] {
    box-shadow: none;
  }
}

/* ==========================================================================
   Visual polish pass — FAQ tabs, compact footer, quieter surfaces
   ========================================================================== */

.od-section-block__label {
  margin-bottom: 0.55rem;
}

.od-section-block__title {
  margin-bottom: 0.55rem;
}

.od-section-block--secondary {
  opacity: 0.96;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-muted);
}

.od-support-lower {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 2rem 0 0.5rem;
}

.od-support-lower .od-section-block {
  margin: 0;
}

.od-faq-mobile {
  display: none;
  margin: 0 0 1rem;
}

.od-faq-mobile__label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.od-faq-mobile__select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: rgba(8, 12, 24, 0.92);
  color: #fff;
}

.od-faq-tabs {
  display: none;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin: 0 0 1rem;
  padding: 0.3rem;
  border: 1px solid var(--od-border);
  border-radius: var(--radius-card);
  background: rgba(8, 12, 24, 0.55);
}

.od-faq-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(246, 247, 251, 0.72);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-btn);
  cursor: pointer;
}

.od-faq-tab:hover,
.od-faq-tab:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

.od-faq-tab[aria-selected="true"] {
  color: #fff;
  background: rgba(46, 230, 255, 0.12);
  box-shadow: inset 0 0 0 2px var(--od-border-accent);
}

.od-faq-fallback-title {
  margin: 0 0 0.75rem;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
}

.od-faq--panel {
  border: 1px solid var(--od-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--panel-bg);
  gap: 0;
}

.od-faq--panel .od-faq__item {
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--border-muted);
  background: transparent;
}

.od-faq--panel .od-faq__item:first-child {
  border-top: 0;
}

.od-faq__item summary {
  padding: 0.9rem 1rem;
  font-size: 0.95rem;
}

.od-faq__body {
  padding: 0 1rem 1rem;
  line-height: 1.7;
  color: rgba(198, 196, 220, 0.95);
}

/* Enhanced FAQ: tabs/select + one panel */
.od-faq-enhanced .od-faq-fallback-title {
  display: none;
}

.od-faq-enhanced .od-faq-panel {
  display: none;
}

.od-faq-enhanced .od-faq-panel.is-active {
  display: block;
}

@media (min-width: 721px) {
  .od-faq-enhanced .od-faq-tabs {
    display: flex;
  }

  .od-faq-enhanced .od-faq-mobile {
    display: none;
  }
}

@media (max-width: 720px) {
  .od-faq-enhanced .od-faq-mobile {
    display: block;
  }

  .od-faq-enhanced .od-faq-tabs {
    display: none;
  }

  .od-support-lower {
    grid-template-columns: 1fr;
  }
}

.od-footer--compact .od-footer__grid {
  display: none;
}

.od-footer--compact .od-footer__bar {
  margin-top: 0;
  padding-top: 1.1rem;
}

.od-footer--compact {
  margin-top: 0;
  padding-top: 0;
}

.od-footer--compact .od-footer__divider {
  margin: 1.75rem auto;
}

.od-privacy-sidebar,
.od-guide-sidebar {
  border-color: var(--od-border);
  background: rgba(10, 14, 28, 0.55);
  box-shadow: none;
}

.od-guide-layout {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .od-guide-layout {
    grid-template-columns: minmax(0, 1fr) 12.5rem;
    gap: 2rem;
  }

  .od-privacy-layout {
    grid-template-columns: minmax(0, 1fr) 13rem;
  }
}

.od-include-card__icon {
  color: var(--icon-chip-color);
  filter: none;
}

.od-include-card__icon .od-icon {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

.od-include-card {
  border-color: var(--border);
  border-radius: var(--radius-card);
  background: var(--panel-bg);
  box-shadow: none;
}

.od-roadmap-card {
  border-color: var(--border);
  border-radius: var(--radius-card);
  box-shadow: none;
}

.od-roadmap-card ul {
  line-height: 1.7;
}

.od-roadmap-card li {
  margin: 0.38rem 0;
}

.od-support-card {
  border-color: var(--border);
  border-radius: var(--radius-card);
  box-shadow: none;
  transition: border-color 160ms ease;
}

.od-support-card:hover,
.od-support-card:focus-visible {
  transform: none;
  border-color: rgba(46, 230, 255, 0.28);
}

.od-cta-band {
  border-color: var(--border);
  border-radius: var(--radius-card);
  box-shadow: none;
  background: var(--card-bg);
}

.od-product-hero__art {
  box-shadow: var(--shadow-soft), 0 0 28px rgba(255, 79, 207, 0.12);
}

.od-track-list {
  border-color: var(--border);
  border-radius: var(--radius-card);
}

.od-track-list__item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.od-preview-btn[aria-pressed="true"] {
  border-color: var(--od-border-accent);
  background: rgba(46, 230, 255, 0.14);
  box-shadow: none;
}

.od-footer__btn--kofi {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}

.od-prose {
  line-height: 1.75;
}

.od-prose h2 {
  margin-top: 2rem;
}

.od-page-hero {
  padding-bottom: 1.25rem;
}

.od-page-hero__kicker {
  margin-bottom: 0.5rem;
}

.od-page-hero--with-icon {
  align-items: flex-start;
  gap: 1.25rem 1.5rem;
}

.od-page-hero--with-icon .od-page-hero__icon {
  margin-top: 0.15rem;
}

.od-nav__panel a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.06);
}

/* —— Shape + border refinement pass —— */

.od-report-shell {
  margin-top: 1.15rem;
}

.od-report-tab {
  display: flex;
  justify-content: flex-end;
  padding-right: 1rem;
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
}

.od-report-tab__btn {
  min-height: 2.35rem;
  padding: 0 0.95rem;
  border-radius: var(--radius-btn) var(--radius-btn) 0 0;
  border-color: var(--od-border-strong);
  border-bottom-color: transparent;
  background: linear-gradient(180deg, rgba(22, 28, 52, 0.96), rgba(18, 24, 48, 0.92));
  box-shadow: none;
  transform: none;
}

.od-report-tab__icon--check {
  display: none;
}

.od-report-tab__btn.is-copied .od-report-tab__icon--copy {
  display: none;
}

.od-report-tab__btn.is-copied .od-report-tab__icon--check {
  display: block;
}

.od-report-tab__btn:hover,
.od-report-tab__btn:focus-visible {
  transform: none;
  border-color: var(--od-border-accent);
  border-bottom-color: transparent;
  background: linear-gradient(180deg, rgba(28, 36, 64, 0.98), rgba(18, 24, 48, 0.95));
}

.od-report-tab__btn:focus-visible {
  outline: 2px solid var(--od-border-focus);
  outline-offset: 2px;
  box-shadow: none;
}

.od-bug-fallback {
  display: block;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--od-border-strong);
  border-radius: var(--radius-control);
  background: rgba(0, 0, 0, 0.35);
  color: var(--muted);
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.55;
  resize: vertical;
}

.od-bug-fallback[hidden] {
  display: none !important;
}

.od-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .od-report-tab {
    padding-right: 0;
    justify-content: stretch;
  }

  .od-report-tab__btn {
    width: 100%;
    justify-content: center;
    border-radius: var(--radius-btn) var(--radius-btn) 0 0;
  }
}

/* Stronger shared borders without neon wash */
.od-top__inner,
.od-nav__dropdown,
.od-nav__panel,
.od-card,
.od-support-card,
.od-faq--panel,
.od-faq-tabs,
.od-featured-previews,
.od-track-list,
.od-include-card,
.od-roadmap-card,
.od-cta-band,
.od-footer__panel,
.od-callout,
.od-toc,
.od-privacy-sidebar,
.od-guide-sidebar {
  border-color: var(--od-border);
}

.od-report-panel,
.od-cta-band--accent,
.od-featured-previews {
  border-color: var(--od-border-strong);
}

.od-faq-tab:focus-visible,
.od-preview-btn:focus-visible,
.od-support-card:focus-visible,
.od-btn:focus-visible {
  outline: 2px solid var(--od-border-focus);
  outline-offset: 2px;
}

.od-btn--tertiary:focus-visible {
  outline-offset: 4px;
}

/* —— Motion: tasteful, minimal, reduced-motion safe —— */

@media (prefers-reduced-motion: no-preference) {
  @keyframes od-rise {
    from {
      opacity: 0;
      transform: translateY(0.7rem);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes od-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes od-ring-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(1.5%, -1.2%, 0) scale(1.02); }
  }

  @keyframes od-ring-drift-alt {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-1.2%, 1.4%, 0) scale(1.015); }
  }

  @keyframes od-glow-breathe {
    0%, 100% { opacity: 0.24; }
    50% { opacity: 0.34; }
  }

  .od-top__inner {
    animation: od-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .od-hero__copy > * {
    animation: od-rise 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .od-hero__copy > *:nth-child(1) { animation-delay: 0.04s; }
  .od-hero__copy > *:nth-child(2) { animation-delay: 0.1s; }
  .od-hero__copy > *:nth-child(3) { animation-delay: 0.16s; }
  .od-hero__copy > *:nth-child(4) { animation-delay: 0.22s; }
  .od-hero__copy > *:nth-child(5) { animation-delay: 0.28s; }
  .od-hero__copy > *:nth-child(6) { animation-delay: 0.34s; }

  .od-hero__media {
    animation: od-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
  }

  .od-page-hero {
    animation: od-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .od-bg__ring--one {
    animation: od-ring-drift 28s ease-in-out infinite;
  }

  .od-bg__ring--two {
    animation: od-ring-drift-alt 34s ease-in-out infinite;
  }

  .od-bg__glow {
    animation: od-glow-breathe 10s ease-in-out infinite;
  }

  .od-bg__glow--cyan {
    animation-delay: -4s;
  }

  html.od-motion .od-reveal {
    opacity: 0;
    transform: translateY(0.85rem);
    transition:
      opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }

  html.od-motion .od-reveal.is-in {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  html.od-motion .od-feature-grid .od-card.od-reveal:nth-child(1),
  html.od-motion .od-support-grid .od-support-card.od-reveal:nth-child(1),
  html.od-motion .od-include-grid .od-include-card.od-reveal:nth-child(1) {
    transition-delay: 0ms;
  }

  html.od-motion .od-feature-grid .od-card.od-reveal:nth-child(2),
  html.od-motion .od-support-grid .od-support-card.od-reveal:nth-child(2),
  html.od-motion .od-include-grid .od-include-card.od-reveal:nth-child(2) {
    transition-delay: 70ms;
  }

  html.od-motion .od-feature-grid .od-card.od-reveal:nth-child(3),
  html.od-motion .od-support-grid .od-support-card.od-reveal:nth-child(3),
  html.od-motion .od-include-grid .od-include-card.od-reveal:nth-child(3) {
    transition-delay: 140ms;
  }

  html.od-motion .od-include-grid .od-include-card.od-reveal:nth-child(4) {
    transition-delay: 210ms;
  }

  html.od-motion .od-roadmap .od-roadmap-card.od-reveal {
    transition-delay: 40ms;
  }

  .od-card,
  .od-include-card,
  .od-roadmap-card {
    transition:
      transform 220ms ease,
      border-color 220ms ease,
      box-shadow 220ms ease;
  }

  .od-card:hover,
  .od-include-card:hover,
  .od-roadmap-card:hover {
    transform: translateY(-2px);
  }

  .od-footer__divider {
    animation: od-fade 1s ease both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .od-bg__ring--one,
  .od-bg__ring--two,
  .od-bg__glow,
  .od-top__inner,
  .od-hero__copy > *,
  .od-hero__media,
  .od-page-hero,
  .od-footer__divider {
    animation: none !important;
  }

  .od-reveal,
  .od-reveal.is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Gameplay teaser modal */

body.od-gameplay-open {
  overflow: hidden;
}

.od-gameplay-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
}

.od-gameplay-modal[hidden] {
  display: none;
}

.od-gameplay-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: rgba(4, 7, 16, 0.72);
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
}

.od-gameplay-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  outline: none;
}

.od-gameplay-modal__close {
  position: fixed;
  top: max(0.85rem, env(safe-area-inset-top));
  right: max(0.85rem, env(safe-area-inset-right));
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(190, 198, 240, 0.34);
  border-radius: 999px;
  color: #fff;
  background: rgba(10, 14, 28, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.od-gameplay-modal__close:hover,
.od-gameplay-modal__close:focus-visible {
  outline: none;
  border-color: rgba(105, 242, 255, 0.72);
  background: rgba(14, 20, 40, 0.9);
}

.od-phone-stage {
  --od-phone-w: 1036;
  --od-phone-h: 2060;
  --od-screen-x: 42;
  --od-screen-y: 29;
  --od-screen-w: 953;
  --od-screen-h: 2004;
  position: relative;
  width: min(
    calc(90vh * var(--od-phone-w) / var(--od-phone-h)),
    calc(100vw - 1.5rem)
  );
  aspect-ratio: var(--od-phone-w) / var(--od-phone-h);
  max-height: 90vh;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.45));
}

.od-phone-stage__screen {
  position: absolute;
  left: calc(var(--od-screen-x) / var(--od-phone-w) * 100%);
  top: calc(var(--od-screen-y) / var(--od-phone-h) * 100%);
  width: calc(var(--od-screen-w) / var(--od-phone-w) * 100%);
  height: calc(var(--od-screen-h) / var(--od-phone-h) * 100%);
  overflow: hidden;
  background: #000;
  -webkit-mask-image: url("/video/phone-mask.svg");
  mask-image: url("/video/phone-mask.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-source-type: alpha;
  mask-mode: alpha;
}

.od-phone-stage__video {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  background: #000;
}

.od-phone-stage__toggle {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  cursor: pointer;
}

.od-phone-stage__dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
}

.od-phone-stage__play {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 280ms ease, transform 280ms ease;
  pointer-events: none;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5));
}

.od-phone-stage__play-icon {
  width: 3.5rem;
  height: 3.5rem;
  color: #fff;
}

.od-phone-stage__screen.is-paused .od-phone-stage__dim,
.od-phone-stage__screen.is-paused .od-phone-stage__play {
  opacity: 1;
}

.od-phone-stage__screen.is-paused .od-phone-stage__play {
  transform: scale(1);
}

.od-phone-stage__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .od-phone-stage__dim,
  .od-phone-stage__play {
    transition: none;
  }
}