:root {
  --of-red:     #e2001a;
  --bg:         #111111;
  --text-soft:  rgba(255, 255, 255, 0.92);
  --text-muted: rgba(255, 255, 255, 0.52);
  --border:     rgba(255, 255, 255, 0.16);
  --border-dim: rgba(255, 255, 255, 0.13);
  --dot-off:    rgba(255, 255, 255, 0.38);

  --pad-x:   clamp(18px, 5.5vw, 28px);
  --body-fs: clamp(14px, 4.2vw, 18px);
  --note-fs: clamp(11px, 3vw, 13px);
  --btn-h:   clamp(50px, 13vw, 62px);
  --btn-fs:  clamp(16px, 5vw, 20px);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }

html, body {
  width: 100%; height: 100%;
  font-family: 'Source Sans 3', system-ui, sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: stretch;
  background-color: #0f0f10;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,.82) 100%),
    url('../img/epstein.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #f2f2f2;
  padding-left:  env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ── App shell ── */
.app {
  width: 100%; max-width: 430px;
  min-height: 100%; min-height: 100dvh;
  position: relative; overflow: hidden;
}

/* ════════════════════════════════════
   SPLASH
════════════════════════════════════ */
.splash {
  position: absolute; inset: 0;
  background: #fff;
  display: flex; justify-content: center; align-items: center;
  z-index: 10;
  transition: opacity .5s ease, transform .5s ease;
}
.splash.hidden {
  opacity: 0; transform: scale(1.03); pointer-events: none;
}
#splash-logo {
  width: clamp(130px, 48vw, 200px);
  height: auto;
}

/* ════════════════════════════════════
   DARK CARD (outer frame)
════════════════════════════════════ */
.dark-layer {
  position: absolute; inset: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity .45s ease .1s;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 16px);
}
.dark-layer.visible { opacity: 1; pointer-events: auto; }

/* ════════════════════════════════════
   SLIDER TRACK
════════════════════════════════════ */
.slides-track {
  flex: 1;
  display: flex;
  width: 200%;
  min-height: 0;
  transition: transform .38s cubic-bezier(.4, 0, .2, 1);
}

.slide {
  width: 50%;          /* = 100% of visible card */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.slide::-webkit-scrollbar { display: none; }

/* ════════════════════════════════════
   SHARED INNER LAYOUT
   Both slides share logo → content → dots → note → btn
════════════════════════════════════ */
.slide-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 7vw, 40px) var(--pad-x) 0;
}

/* ── Logo ── */
.of-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: clamp(20px, 6vw, 32px);
  flex-shrink: 0;
}
.of-logo img {
  width: clamp(88px, 26vw, 110px);
  height: auto;
  display: block;
}

/* ── Inner card (frosted glass over background image) ── */
.inner-card {
  flex: 1;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(17, 17, 18, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: clamp(12px, 3.5vw, 16px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: clamp(18px, 5vw, 28px);
}



/* ── Disclaimer note ── */
.note {
  border: 1px solid var(--border-dim);
  border-radius: 10px;
  padding: clamp(12px, 3.5vw, 16px) clamp(12px, 3.5vw, 16px);
  color: var(--text-muted);
  font-size: var(--note-fs);
  line-height: 1.35;
  flex-shrink: 0;
}

/* ── CTA button ── */
.btn-next {
  width: 100%; height: var(--btn-h);
  border: none; border-radius: 4px;
  background: var(--of-red); color: #fff;
  font-family: inherit;
  font-size: var(--btn-fs);
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity .15s ease, transform .15s ease;
  flex-shrink: 0;
}
.btn-next:hover  { opacity: .92; }
.btn-next:active { transform: scale(.985); }

/* ════════════════════════════════════
   SLIDE 1 — title + body text
════════════════════════════════════ */
.s1-title {
  color: var(--of-red);
  font-size: clamp(26px, 8.5vw, 38px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.02em;
  margin-bottom: clamp(18px, 5vw, 28px);
  flex-shrink: 0;
}

.s1-body {
  color: var(--text-soft);
  font-size: var(--body-fs);
  font-weight: 400;
  line-height: 1.28;
  flex-shrink: 0;
}
.s1-body p + p { margin-top: clamp(14px, 4vw, 22px); }

/* pager sits below text with breathing room */
.s1-pager-wrap { margin: clamp(24px, 7vw, 40px) 0 clamp(18px, 5vw, 26px); }

/* note then button at bottom */
.s1-note-wrap { margin-bottom: clamp(16px, 4.5vw, 24px); }
.s1-btn-wrap  { margin-bottom: 0; }

/* ════════════════════════════════════
   SLIDE 2 — top bar with back arrow
════════════════════════════════════ */
.s2-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(16px, 5vw, 26px);
  flex-shrink: 0;
}

/* invisible spacer mirrors the arrow to keep logo centred */
.s2-topbar-spacer {
  width: 22px;
  flex-shrink: 0;
}

/* override .of-logo margin when inside the topbar */
.s2-topbar .of-logo {
  margin-bottom: 0;
}

.btn-back-arrow {
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s;
}
.btn-back-arrow:hover  { opacity: .7; }
.btn-back-arrow:active { opacity: .5; }

/* ════════════════════════════════════
   SLIDE 2 — image + instruction
════════════════════════════════════ */
/* Preview image */
.instruction-img {
  width: 100%;
  height: clamp(140px, 42vw, 190px);
  border-radius: 10px;
  overflow: hidden;
  background: #222;
  margin-bottom: clamp(12px, 3.5vw, 16px);
  flex-shrink: 0;
}
.instruction-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* Instruction text */
.instruction-text {
  font-size: var(--body-fs);
  font-weight: 400;
  line-height: 1.28;
  color: var(--text-soft);
  letter-spacing: -.01em;
  margin-bottom: clamp(14px, 4vw, 20px);
  flex-shrink: 0;
}

/* pager + note + button inside the card */
.s2-pager-wrap { margin-bottom: clamp(14px, 4vw, 20px); }
.s2-note-wrap  { margin-bottom: clamp(14px, 4vw, 20px); flex: 1; display: flex; align-items: center; }
.s2-note-wrap .note { width: 100%; }

/* ── Landscape compact ── */
@media (max-height: 500px) and (orientation: landscape) {
  .instruction-img { height: 90px; }
  .s1-title        { font-size: 22px; }
  .slide-inner     { padding-top: 16px; }
}

/* note on slide 1 — slightly larger */
.s1-note-ia {
  font-size: clamp(13px, 3.5vw, 15px);
  line-height: 1.5;
}