/* Audio Recorder — site styles.
   Colours are taken from the app: recording red and waveform green. */

:root {
  --red: #ef4444;
  --green: #22c55e;

  --bg: #ffffff;
  --bg-soft: #f4f6f5;
  --panel: #ffffff;
  --line: #e3e7e5;
  --ink: #16201c;
  --ink-soft: #5b6b64;
  --accent: #16a34a;
  --shadow: 0 1px 2px rgba(16, 32, 26, 0.06), 0 8px 24px rgba(16, 32, 26, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1512;
    --bg-soft: #141b18;
    --panel: #161e1a;
    --line: #263029;
    --ink: #e8efea;
    --ink-soft: #9aa9a1;
    --accent: #4ade80;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
  }
}

:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-soft: #f4f6f5;
  --panel: #ffffff;
  --line: #e3e7e5;
  --ink: #16201c;
  --ink-soft: #5b6b64;
  --accent: #16a34a;
  --shadow: 0 1px 2px rgba(16, 32, 26, 0.06), 0 8px 24px rgba(16, 32, 26, 0.06);
}

:root[data-theme="dark"] {
  --bg: #0f1512;
  --bg-soft: #141b18;
  --panel: #161e1a;
  --line: #263029;
  --ink: #e8efea;
  --ink-soft: #9aa9a1;
  --accent: #4ade80;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 20px;
}

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

header.site {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.bar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 62px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}

/*
  The brand mark is now the app's own launcher icon (icon.svg), a direct
  transcription of the adaptive icon's vectors, so the site and the app agree.
  It replaced a red circle with a white centre drawn here in CSS.
*/
.brand .dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  display: block;
}

nav.site a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  margin-left: 20px;
}

nav.site a:hover { color: var(--ink); }

@media (max-width: 700px) {
  nav.site a { margin-left: 14px; font-size: 13px; }
  nav.site a.hide-sm { display: none; }
}

.icon-btn {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-soft);
  width: 34px;
  height: 34px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  flex: none;
}

.icon-btn:hover { color: var(--ink); }

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

.hero {
  padding: 76px 0 56px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
}

.hero .lede {
  font-size: clamp(17px, 2.2vw, 20px);
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 auto 30px;
}

.pill {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
}

.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { opacity: 0.88; }

.btn-primary.is-pending {
  background: var(--bg-soft);
  color: var(--ink-soft);
  border-color: var(--line);
  cursor: default;
}

.btn-ghost {
  border-color: var(--line);
  color: var(--ink);
  background: var(--panel);
}

.btn-ghost:hover { border-color: var(--ink-soft); }

/* ---------- Google Play badge ----------
   The badge artwork may not be recoloured or redrawn, only scaled, so it keeps
   its own black plate in both themes. Google asks for clear space around it of
   at least a quarter of its height; the margin below provides that. */

.store-badge {
  display: inline-block;
  line-height: 0;
  margin: 0 4px;
  border-radius: 8px;
}

.store-badge img {
  display: block;
  height: 52px;
  width: auto;
}

.store-badge[href]:hover { opacity: 0.88; }

.store-badge[href]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* No store URL configured yet: the badge stays visible but inert. */
.store-badge.is-pending { opacity: 0.5; cursor: default; }

.cta-note {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}

/* ---------- waveform strip ---------- */

.wave-strip {
  margin: 46px auto 0;
  max-width: 900px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 0; /* square, like the app's waveform panel */
  padding: 0;
  overflow: hidden;
}

.wave-strip svg { display: block; width: 100%; height: 132px; }

/* ---------- sections ---------- */

section { padding: 66px 0; }
section.alt { background: var(--bg-soft); border-block: 1px solid var(--line); }

h2 {
  font-size: clamp(24px, 3.4vw, 33px);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.section-lede {
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 0 36px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  box-shadow: var(--shadow);
}

.card h3 {
  margin: 0 0 8px;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.card p { margin: 0; color: var(--ink-soft); font-size: 15px; }

.card .ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  font-size: 17px;
}

/* ---------- spec table ---------- */

.table-scroll { overflow-x: auto; }

table.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 460px;
}

table.spec th,
table.spec td {
  text-align: left;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

table.spec th {
  width: 210px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

table.spec td { color: var(--ink-soft); }

/* ---------- prose (privacy page) ---------- */

.prose { max-width: 760px; }
.prose h2 { margin-top: 40px; }
.prose h3 { margin-top: 28px; margin-bottom: 6px; font-size: 17px; }
.prose p, .prose li { color: var(--ink-soft); }
.prose strong { color: var(--ink); }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 7px; }

.note {
  border-left: 3px solid var(--accent);
  background: var(--bg-soft);
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  margin: 22px 0;
}

.note p { margin: 0; }

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

footer.site {
  border-top: 1px solid var(--line);
  padding: 34px 0 46px;
  color: var(--ink-soft);
  font-size: 14px;
}

.foot-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

footer.site a { color: var(--ink-soft); text-decoration: none; }
footer.site a:hover { color: var(--ink); text-decoration: underline; }

.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }