/*
 * neopodcast.org. Same construction as bingo-factory.app (the site Bingo Generator's palette
 * came from), with NeoPodcast's own values from Sources/Core/Theme.swift. The marketing page
 * inherits the app's palette and type, never the other way round (SPEC.md §19.4): change a hex
 * in Theme.swift and it changes here too.
 */

:root {
  /* Theme.background / surface / surfaceRaised */
  --bg: #0c0c10;
  --surface: #1a1a20;
  --surface-2: #26262e;
  /* Theme.text, Theme.textDim */
  --ink: #f8f2ec;
  --dim: rgba(248, 242, 236, 0.62);
  /* Theme.inkBrown — knockout text on anything orange, pink or gradient. */
  --ink-brown: #160a04;
  /* Theme.accent — actions only. */
  --mark: #f5581e;
  --hot: #ff1f8f;
  --pink: #ff5ca8;
  /* Theme.live — state only (nothing on this page is "live" yet). */
  --live: #2bb673;
  /* Theme.celebration */
  --grad: linear-gradient(118deg, #ff1f8f 0%, #ff5ca8 38%, #f5581e 100%);
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* Theme.display — Fjalla One, not Bingo's Anton (SPEC.md §19.2). */
  --display: "Fjalla One", DisplayFallback, "Arial Narrow", sans-serif;
  /* Theme.note — Noteworthy on Apple devices, the nearest hand on everything else. */
  --note: "Noteworthy", "Bradley Hand", "Segoe Print", cursive;
  --gap: clamp(52px, 7.5vw, 96px);
}

@font-face {
  font-family: "Fjalla One";
  src: url(/fonts/FjallaOne-Regular.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: DisplayFallback;
  src: local("Arial Narrow Bold"), local("Arial Narrow"), local("Impact");
  size-adjust: 96%;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 var(--body);
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; }
a { color: inherit; }
.wrap { width: min(1080px, 100% - 2.5rem); margin-inline: auto; }
section { padding-block: var(--gap); }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.95;
  margin: 0;
}
h1 { font-size: clamp(2.8rem, 8.6vw, 5.6rem); }
h2 { font-size: clamp(2.2rem, 6.5vw, 4rem); }
h3 { font-size: clamp(1.3rem, 3vw, 1.75rem); line-height: 1; }
p { margin: 0 0 1em; }
.lede { font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--dim); max-width: 36ch; }

/* The highlighter — ThemeKit.swift's SlabText. inline-block so the tilt applies, which means a
   slab must hold text that fits one line: keep it to a word or two. */
.slab {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  display: inline-block;
  /* .13em on top, not Bingo's .02em: Fjalla One's capital accents (the É in "ÉTAPES") rise
     above the cap height, and in ink-brown they vanish against the page if they leave the box. */
  padding: 0.13em 0.18em 0.07em;
  color: var(--ink-brown);
  background: var(--grad);
  border-radius: 2px 7px 3px 9px;
  transform: rotate(-1.2deg);
}
.slab.alt {
  transform: rotate(0.9deg);
  border-radius: 7px 2px 9px 3px;
  background: linear-gradient(100deg, #ff5ca8, #f5581e);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--mark);
  color: var(--ink-brown);
  text-decoration: none;
  font: 700 1.05rem/1 var(--body);
  padding: 1.15em 1.6em;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }

.stores { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; margin: 0; }
.store {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  border-radius: 12px;
  padding: 0.5em 0.95em;
  min-width: 9.5rem;
}
.store .lead { font-size: 0.68rem; letter-spacing: 0.02em; opacity: 0.7; line-height: 1.3; }
.store .name {
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1;
  text-transform: uppercase;
}
/* Not a link, and it should not look like one you can press. */
.store.off { background: var(--surface); color: var(--dim); cursor: default; }
.store.off .name { color: var(--ink); opacity: 0.55; }
.store.off .soon {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hot);
  margin-top: 0.15rem;
}

:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

/* A flat CSS gradient reads as a CSS gradient. ~300 bytes of turbulence makes it read as
   printed, at no extra request. */
.panel {
  background: var(--grad);
  color: var(--ink-brown);
  border-radius: 28px;
  padding: clamp(24px, 5vw, 44px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.15;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.panel h3 { color: var(--ink-brown); margin-bottom: 0.6rem; }
.panel p { color: rgba(22, 10, 4, 0.78); margin: 0; }
.panels { display: grid; gap: 1rem; margin-top: 2.4rem; }
@media (min-width: 760px) { .panels { grid-template-columns: repeat(3, 1fr); } }
.panels .panel:nth-child(2) { background: linear-gradient(118deg, #ff5ca8, #f5581e); }
.panels .panel:nth-child(3) { background: linear-gradient(118deg, #ff7a3d, #f5581e); }

/* ThemeKit.swift's NoteText: one tilted handwritten aside per screen, never a body font. */
.note {
  font: 700 clamp(18px, 2.4vw, 24px)/1 var(--note);
  color: var(--mark);
  display: inline-block;
  transform: rotate(-7deg);
}

/* ---------- Brand line ---------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-top: 1.4rem;
  text-decoration: none;
  font: 1.35rem/1 var(--display);
  text-transform: uppercase;
}
.brand img { width: 34px; height: 34px; border-radius: 8px; }

/* ---------- Hero ---------- */

.hero {
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  padding-block: clamp(36px, 7vh, 88px) clamp(48px, 7vw, 88px);
  align-items: center;
}
@media (min-width: 900px) { .hero { grid-template-columns: 1.15fr 0.85fr; } }
.hero-copy .lede { margin: 1.6rem 0 2rem; }
.hero-copy .note { margin-top: 1.8rem; }

/* The app itself, captured live rather than mocked up (SPEC.md §19.3). */
.phone {
  justify-self: center;
  width: min(300px, 76vw);
  border-radius: 46px;
  padding: 9px;
  background: var(--surface-2);
  box-shadow: 0 30px 80px rgba(255, 31, 143, 0.16), 0 12px 32px rgba(0, 0, 0, 0.6);
  transform: rotate(2deg);
}
.phone img { display: block; border-radius: 38px; width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .phone { transition: transform 0.4s ease; }
  .phone:hover { transform: rotate(0deg); }
}

/* ---------- Platforms ---------- */

.platforms {
  list-style: none;
  padding: 0;
  margin: 2.2rem 0 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.platforms li {
  background: var(--surface);
  border-radius: 14px;
  padding: 0.9em 1.2em;
  font: 1.35rem/1 var(--display);
  text-transform: uppercase;
}
.after-list { color: var(--dim); max-width: 58ch; }

/* ---------- Reasons ---------- */

.reasons { list-style: none; padding: 0; margin: 2.4rem 0 0; display: grid; gap: 1.1rem; }
@media (min-width: 760px) { .reasons { grid-template-columns: 1fr 1fr; gap: 1.6rem 2.4rem; } }
.reasons li { color: var(--dim); max-width: 46ch; padding-left: 1.6rem; position: relative; }
.reasons li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 3px;
  background: var(--hot);
}
.reasons strong { color: var(--ink); display: block; }

/* ---------- FAQ ---------- */

.faq { max-width: 46rem; margin-top: 2rem; }
.faq details { border-top: 1px solid var(--surface-2); padding: 1.1rem 0; }
.faq details:last-child { border-bottom: 1px solid var(--surface-2); }
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.08rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--dim); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0.8rem 0 0; color: var(--dim); }

.cta-row { margin-top: 2.6rem; }
.closing { text-align: center; }
.closing .stores { justify-content: center; margin-top: 2rem; }

/* ---------- Footer ---------- */

footer {
  border-top: 1px solid var(--surface);
  padding-block: 3rem;
  color: var(--dim);
  font-size: 0.9rem;
}
.langs { margin-top: 1.2rem; }
.langs ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: 0.85rem; }
.langs a { color: var(--dim); text-decoration: none; }
.langs a:hover { color: var(--ink); text-decoration: underline; }
.langs [aria-current] { color: var(--ink); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}