/* Dictate — marketing site. System fonts, no dependencies, dark-mode aware. */

:root {
  --bg: #ffffff;
  --ink: #18191b;
  --muted: #61656b;
  --accent: #1f7a3d;
  --stage-bg: #0b0d0f;
  --green: #30d158;          /* system green — the app's arc colour */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1012;
    --ink: #e9eaeb;
    --muted: #98a0a6;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

a { color: inherit; }
img, svg { display: block; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }

kbd {
  display: inline-flex;
  align-items: flex-end;              /* "fn" engraves low-left, like the real cap */
  justify-content: flex-start;
  padding: 0.14em 0.38em;
  height: 2.2em;
  min-width: 2.5em;
  background: linear-gradient(#e9edf3, #cad1da);
  border: 1px solid #a7b0ba;
  border-radius: 0.45em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.5);
  color: #2e333a;
  font: 600 0.6em var(--mono);
  line-height: 1;
  vertical-align: -0.1em;
  white-space: nowrap;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;   /* outline buttons grow by their border; keep every pill the same height */
  border-radius: 999px;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--ink); color: var(--bg); padding: 0.7em 1.4em; }
.btn-primary:hover { filter: brightness(0.82); }

.btn-lg { padding: 0.85em 1.8em; font-size: 1.05rem; }
.btn-sm { padding: 0.5em 1.1em; font-size: 0.92rem; }

.plan .btn-block {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 1.4em;
  white-space: nowrap;
  margin-top: auto;
}
.btn-outline {
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  color: var(--ink);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0.8rem clamp(1.2rem, 4vw, 3rem);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.brand-mark { width: 1.35em; height: 1.35em; }

.links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.4vw, 1.7rem);
  font-size: 0.95rem;
}
.links > a:not(.btn) { text-decoration: none; color: var(--muted); }
.links > a:not(.btn):hover { color: var(--ink); }

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

.hero { max-width: 1200px; margin: 0 auto; }

.wrap {
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4rem);
}

.hero-copy {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.lede { font-size: clamp(1.1rem, 2vw, 1.25rem); color: var(--muted); max-width: 40rem; margin: 1.2rem auto 0; }

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.8rem;
}
.cta-note { color: var(--muted); font-size: 0.92rem; }

/* the dark full-width "desktop" band the demo plays on — deliberately not a box */

.stage {
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(2.5rem, 6vw, 4.5rem) max(1.2rem, calc((100vw - 1200px) / 2))
           clamp(3rem, 7vw, 5rem);
  background:
    radial-gradient(130% 110% at 50% 0%, #17191c 0%, var(--stage-bg) 55%),
    var(--stage-bg);
  color: #ffffff;
  min-height: 420px;
}

/* the fake focused window, plus the pill that floats over its lower edge */

.demo { position: relative; width: min(88%, 520px); margin: 0 auto; }

.window {
  width: 100%;
  background: #101315;
  border: 1px solid #2a2e33;
  border-radius: 12px;
  box-shadow: 0 24px 70px -22px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

.window-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #23262b;
}
.traffic { display: flex; gap: 6px; }
.traffic i { width: 11px; height: 11px; border-radius: 50%; background: #3a3f46; }
.traffic i:first-child { background: #ff5f57; }
.traffic i:nth-child(2) { background: #febc2e; }
.traffic i:nth-child(3) { background: #28c840; }
.window-title { font: 500 0.72rem var(--mono); color: #9aa2ab; }

.doc {
  padding: 1.2rem 1.4rem 1.5rem;
  font: 500 0.98rem "SF Mono", ui-monospace, Menlo, monospace;
  min-height: 200px;
}

.doc .line { margin: 0 0 0.7em; min-height: 1.5em; color: #e6ebf1; }
.doc .line.head { color: #7e878f; margin-bottom: 1em; }
.doc .line.done { color: #c9d0d8; }

.cursor { position: relative; display: inline-block; min-width: 2px; white-space: pre-wrap; color: inherit; }

.caret {
  display: none;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.1em;
  border-radius: 1px;
  background: var(--green);
  box-shadow: 0 0 6px rgba(48, 209, 88, 0.9);
}
.line.active .caret { display: inline-block; animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.hint {
  margin: 1.2rem auto 0;
  text-align: center;
  color: #8b939c;
  font-size: 0.88rem;
}

/* the "what was said" readout — a green transcript with a bubble icon,
   typing into view below the pill. It sits in normal flow beneath the window
   (its top margin clears the pill's overhang), so it can never cover the hint
   or be mistaken for text being printed into the note */

.said {
  margin: 2.1rem auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  color: #30d158;
  font: 500 0.8rem var(--mono);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.said.show { opacity: 1; }
.said-icon { flex: none; width: 13px; height: 13px; }

/* the recording pill — mirrors Sources/HUD.swift: five bars, centre-weighted */

.pill {
  position: absolute;
  left: 50%;
  bottom: -0.9rem;            /* straddles the window's lower edge */
  transform: translateX(-50%);
  width: 124px;
  height: 36px;
  border-radius: 18px;
  background: linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.10));
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  opacity: 0;
  transition: opacity 0.14s ease-out;
}
.pill.show { opacity: 1; }
.pill.hide { transition: opacity 0.18s ease-in; }

.bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.bar {
  width: 3.5px;
  height: 25px;                 /* full extent; JS scales this down */
  border-radius: 1.75px;        /* half the width: pill caps, not points */
  background: #ffffff;
  transform-origin: center;
  /* Size changes are pure transforms on the compositor: no reflow, and the
     pill's backdrop blur is not re-run every frame, so the bars move silkily
     instead of shimmering. */
  will-change: transform;
}

.pill.thinking .bar { background: rgba(255, 255, 255, 0.28); }

.arc { position: absolute; inset: 0; display: none; }
.arc rect {
  fill: none;
  stroke: #30d158;
  stroke-width: 2.4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(48, 209, 88, 0.9));
  /* One segment plus one gap per pill perimeter, so travelling a full
     perimeter lands on the identical pattern. Positive offset sweeps the arc
     counter-clockwise, matching the app. */
  stroke-dasharray: 60 212.25;
  animation: arc-travel 1.15s linear infinite;
}
@keyframes arc-travel { to { stroke-dashoffset: 272.25px; } }
.pill.thinking .arc { display: block; }

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

.section {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.2rem, 4vw, 3rem);
  text-align: center;
}
.section h2 { margin-bottom: 1.1rem; }

.features-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.8rem 3.2rem;
  max-width: 800px;
  margin: 3rem auto 0;
}
.feature h3 { font-size: 1.22rem; margin-bottom: 0.4rem; }
.feature p { margin: 0; color: var(--muted); }

/* ---------- privacy ---------- */

.claims { margin: 2rem auto 0; max-width: 46rem; }
.claims p {
  margin: 0 0 0.8rem;
  color: var(--muted);
}
.claims p::before {
  content: "";
  display: inline-block;
  vertical-align: 0.18em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 0.6rem;
}

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

.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  max-width: 620px;
  margin: 2rem auto 0;
}
.plan {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.7rem 1.6rem;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 16px;
  text-align: center;
}
.plan h3 { font-size: 1.1rem; margin: 0; }
.plan-price {
  font: 700 1.9rem/1.1 var(--mono);
  letter-spacing: -0.02em;
  margin: 0.4rem 0 1rem;
}
.plan-period { font: 400 0.85rem var(--mono); color: var(--muted); margin-left: 0.1em; }
.sale-price { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.plan-note { font: 600 0.95rem var(--mono); color: var(--accent); margin: 0.2rem 0 0.6rem; }
.plan-trial { color: var(--muted); font-size: 0.85rem; margin: 0.35rem 0 0; }
.plan-pro { border-color: var(--accent); }
.plan-features {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  text-align: left;
  flex: 1;   /* grows so the button + subtitle sit on the same baseline in both cards */
}
.plan-features li {
  color: var(--muted);
  font-size: 0.94rem;
}
.plan-features li::before {
  content: "";
  display: inline-block;
  vertical-align: 0.18em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 0.6rem;
}

.footnote { color: var(--muted); font-size: 0.9rem; max-width: 40rem; margin: 1.6rem auto 0; }

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

.faq {
  max-width: 620px;
  margin: 2rem auto 0;
  text-align: left;
}
.faq-item { border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);             /* chevron down when closed */
  transition: transform 0.18s ease;
  margin-right: 0.3rem;
}
.faq-item[open] summary::after { transform: rotate(225deg); }   /* …and up when open */
.faq-body p {
  color: var(--muted);
  margin: 0 0 1.2rem;
}

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

footer { padding: 2.5rem clamp(1.2rem, 4vw, 3rem) 3.5rem; }
.footer-inner { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }

/* ---------- responsive ---------- */

@media (max-width: 760px) {
  .links a:not(.btn) { display: none; }
  .stage { min-height: 320px; }
  .doc { font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pill, .caret, .arc rect { animation: none; }
  .pill { opacity: 1; transform: translateX(-50%); display: flex; }
  .bar { transform: scaleY(0.5); }
}