/* sndflo.com — the marketing page.
   Plain CSS, no build step. Palette and fonts match the app (src/Landing.css,
   src/styles.css) so the site and the product look like one thing. */

@font-face {
  font-family: 'Figtree';
  src: url('/fonts/figtree.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --bg: #070b18;
  --bg2: #0f1729;
  --card: #0f1729;
  --text: #edf0fa;
  --muted: #8e97b5;
  --accent: #6c63e0;
  --moonlight: #e8c87a;
  --line: rgba(255, 255, 255, 0.08);
  --maxw: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--text); }

h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; line-height: 1.15; }

/* ---- header ---- */

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px 24px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 27px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.01em;
}

/* The moon from assets/icon.svg, reduced to a crescent by masking one circle
   with another offset over it. */
.moon {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--moonlight), #b8923f 70%);
  -webkit-mask: radial-gradient(circle at 78% 26%, transparent 52%, #000 53%);
          mask: radial-gradient(circle at 78% 26%, transparent 52%, #000 53%);
}

.site-head nav { display: flex; gap: 22px; }
.site-head nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
}
.site-head nav a:hover { color: var(--text); }

/* ---- hero ---- */

.hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 48px 24px 72px;
}

.hero h1 {
  font-size: clamp(34px, 5.2vw, 56px);
  margin: 0 0 20px;
  letter-spacing: -0.02em;
}

.lede {
  font-size: 19px;
  color: var(--muted);
  margin: 0 0 30px;
  max-width: 34em;
}

.hero-shot img {
  border-radius: 20px;
  border: 1px solid var(--line);
  display: block;
  width: 100%;
}

/* ---- store badges ----
   Apple and Google both require their own artwork, unmodified. Google's PNG
   carries its own clear space inside the image, so it is set ~17% taller than
   the Apple badge to land on the same optical height. */
.badges {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.badges img { display: block; }
.badges a { display: inline-flex; }

/* The strongest line on the page, so it sits directly under the headline at body
   size and weight rather than as fine print under the badges. */
.free-line {
  font-size: 19px;
  color: var(--text);
  margin: 0 0 16px;
}

/* Google Play has a listing but it is not public yet, so the badge is shown
   unlinked with the status said plainly. A live badge pointing at a 404 is worse
   than no badge. Restore the <a> wrapper when open testing publishes. */
.badge-soon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.badge-soon img { opacity: 0.55; }
.soon {
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.disclosure {
  color: var(--muted);
  border-left: 2px solid var(--line);
  padding-left: 16px;
  margin: 0 0 28px;
  max-width: 46em;
}

/* ---- shared section furniture ---- */

section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 56px 24px;
}

section > h2 {
  font-size: clamp(26px, 3.4vw, 34px);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.section-lede {
  color: var(--muted);
  margin: 0 0 28px;
  max-width: 46em;
}

/* ---- features ---- */

.features .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.features article {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
}

.features h3 {
  font-size: 20px;
  margin: 0 0 10px;
  color: var(--moonlight);
}

.features p { margin: 0; color: var(--muted); }

/* ---- screenshots ---- */

.shot-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  margin-top: 28px;
}

.shot-row figure { margin: 0; }

.shot-row img {
  border-radius: 18px;
  border: 1px solid var(--line);
  display: block;
  width: 100%;
}

.shot-row figcaption {
  color: var(--muted);
  font-size: 14px;
  margin-top: 12px;
}

/* ---- sound library ---- */

.sub {
  font-size: 15px;
  font-family: 'Figtree', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin: 26px 0 12px;
}

.chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.chips li {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 15px;
}

.chips.muted-chips li { color: var(--muted); }

/* ---- stories table ---- */

/* Insurance: three columns of story titles are the widest thing on the page, so
   if the copy ever grows the table scrolls inside its own box rather than
   widening the document and pushing every section off-screen. */
.table-wrap {
  overflow-x: auto;
  max-width: 100%;
}

.stories {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 16px;
}

.stories th {
  text-align: left;
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  font-weight: 600;
  padding: 0 12px 10px 0;
  border-bottom: 1px solid var(--line);
}

.stories td {
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.stories td:first-child { color: var(--text); }

.stories .free { color: var(--moonlight); }

.lang {
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ---- pricing ---- */

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  margin-top: 28px;
}

.tier {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
}

.tier-paid { border-color: rgba(108, 99, 224, 0.55); }

.tier h3 { font-size: 22px; margin: 0 0 4px; }

.price {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 40px;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}

.price span {
  font-family: 'Figtree', sans-serif;
  font-size: 15px;
  color: var(--muted);
  margin-left: 9px;
  letter-spacing: 0;
}

.tier ul { margin: 0 0 20px; padding-left: 20px; color: var(--muted); }
.tier li { margin-bottom: 9px; }
.tier em { color: var(--text); font-style: italic; }

.ios-only { font-size: 13px; opacity: 0.8; }

.tier-note { color: var(--muted); font-size: 15px; margin: 0; }

/* ---- faq ---- */

.qa h3 {
  font-size: 19px;
  margin: 26px 0 6px;
  color: var(--moonlight);
}
.qa p { margin: 0; color: var(--muted); max-width: 52em; }

/* ---- footer ---- */

.site-foot {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding: 34px 24px 56px;
  text-align: center;
  color: var(--muted);
}

.foot-brand {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--text);
  margin: 0 0 14px;
  font-size: 18px;
}

.site-foot nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 16px;
}

.site-foot nav a { color: var(--muted); text-decoration: none; font-size: 15px; }
.site-foot nav a:hover { color: var(--text); }

.copy { font-size: 14px; margin: 0; }

/* ---- narrow screens ---- */

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 48px;
  }
  .hero-shot { max-width: 320px; margin: 0 auto; }
  section { padding: 40px 20px; }
  .site-head { padding: 18px 20px; }
  .site-head nav { gap: 16px; }
}

@media (max-width: 520px) {
  .site-head nav { display: none; }
  body { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}