/* WhispVoice site. Dark theme locked page-wide.
   Radius rule: buttons are pill, cards 16px, inputs 10px.
   One accent (emerald), zinc neutrals, Outfit variable font. */

@font-face {
  font-family: "Outfit";
  src: url("/fonts/outfit-var.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --bg: #09090b;
  --bg-raised: #101014;
  --surface: #131318;
  --border: #232329;
  --border-strong: #33333c;
  --text: #f2f2f5;
  --muted: #9c9ca8;
  --placeholder: #7c7c88;
  --accent: #34d399;
  --accent-strong: #10b981;
  --accent-ink: #052e21;
  --danger: #f87171;
  --radius-card: 16px;
  --radius-input: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* <picture> only carries the WebP sources, so it stays out of layout and the
   <img> remains the flex/grid item its own rules were written against. The
   <source> elements have to be hidden explicitly: display:contents would
   otherwise promote them into the parent grid, where they take up a cell.
   Source selection is an HTML-level algorithm and ignores display. */
picture { display: contents; }
picture > source { display: none; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 380;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; z-index: 100; top: 0.75rem; left: 0.75rem;
  transform: translateY(-180%); padding: 0.6rem 0.9rem;
  border-radius: var(--radius-input); background: var(--accent); color: var(--accent-ink);
  font-weight: 650;
}
.skip-link:focus { transform: none; }

h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; }

.icon { width: 22px; height: 22px; flex: none; }
.icon-sm { width: 17px; height: 17px; }
.icon-lg { width: 28px; height: 28px; }

main { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }

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

.site-header {
  display: flex; justify-content: space-between; align-items: center;
  height: 76px;
  max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; width: 100%;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-weight: 620; font-size: 1.4rem; color: var(--text); letter-spacing: -0.025em;
}
.brand:hover { text-decoration: none; }
/* The mark carries the brand on a page with no logotype anywhere else, so it is
   sized to lead the header rather than sit inside the nav's type scale. */
.brand-mark { width: 30px; height: 30px; color: var(--accent); }
.brand-sm { font-size: 1.15rem; }
.brand-sm .brand-mark { width: 22px; height: 22px; }
.desktop-nav { display: flex; gap: 1.4rem; align-items: center; }
.desktop-nav a { color: var(--muted); font-size: 0.95rem; transition: color 0.15s ease; }
.desktop-nav a:hover { color: var(--text); text-decoration: none; }
.desktop-nav a.btn { color: inherit; }

.mobile-nav { display: none; position: relative; }
.mobile-nav summary {
  list-style: none; width: 2.75rem; height: 2.75rem; border: 1px solid var(--border-strong);
  border-radius: 999px; display: grid; place-items: center; color: var(--text); cursor: pointer;
  background: var(--bg-raised);
}
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav[open] summary { border-color: var(--accent); }
.mobile-nav nav {
  position: absolute; z-index: 20; top: calc(100% + 0.65rem); right: 0;
  width: min(19rem, calc(100vw - 2rem)); padding: 0.75rem;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
  display: flex; flex-direction: column; align-items: stretch; gap: 0.2rem;
}
.mobile-nav nav a:not(.btn) {
  color: var(--text); padding: 0.7rem 0.8rem; border-radius: var(--radius-input);
}
.mobile-nav nav a:not(.btn):hover { text-decoration: none; background: var(--bg-raised); }

/* ---------- buttons (pill) ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.55rem 1.3rem; border-radius: 999px;
  font-weight: 550; border: 1px solid transparent; cursor: pointer;
  font-family: inherit; font-size: 0.98rem; white-space: nowrap;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary { background: var(--accent); color: var(--accent-ink) !important; }
.btn-primary:hover { background: var(--accent-strong); }
.btn-ghost { border-color: var(--border-strong); color: var(--text) !important; }
.btn-ghost:hover { border-color: var(--muted); background: var(--bg-raised); }
.btn-lg { padding: 0.8rem 1.6rem; font-size: 1.02rem; }
.btn-sm { padding: 0.4rem 1rem; font-size: 0.9rem; }
.btn-block { width: 100%; }

/* ---------- hero (split) ---------- */

.hero {
  display: grid;
  /* Asymmetric on purpose: the copy gets the wider column and the product shot
     is allowed to run past the grid edge, so the split does not read as 50/50. */
  grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
  gap: 4rem;
  align-items: start;
  padding: 4rem 0 5.5rem;
}
.hero-copy h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 640;
}
.eyebrow {
  color: var(--accent); font-size: 0.78rem; font-weight: 650;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.hero-copy .eyebrow { margin-bottom: 0.9rem; }
.lede {
  color: var(--muted);
  font-size: 1.12rem;
  max-width: 34rem;
  margin-top: 1.3rem;
}
.cta-row { display: flex; gap: 0.9rem; margin-top: 2.1rem; flex-wrap: wrap; }
.cta-note { margin-top: 0.75rem; color: var(--muted); font-size: 0.86rem; }

.hero-visual {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  animation: rise 0.7s ease both;
}
.hero-pill {
  width: min(240px, 58%); height: auto;
  position: relative; z-index: 3;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.55));
}
.hero-pill-break {
  position: absolute;
  top: -0.35rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: min(240px, 58%);
  pointer-events: none;
}
.hero-pill-break .hero-pill { width: 100%; margin: 0; }

/* Mac laptop device mock — Otter/Wispr craft density without logo theft */
.hero-device {
  position: relative;
  width: 100%;
  z-index: 1;
  padding-top: 2.4rem; /* room for frame-breaking notch pill */
}
.hero-device-bezel {
  background: #1a1a18;
  border-radius: 18px 18px 0 0;
  border: 1px solid rgba(29, 29, 27, 0.35);
  border-bottom: 0;
  padding: 0.7rem 0.7rem 0.55rem;
  box-shadow: 0 28px 70px rgba(52, 47, 38, 0.28);
}
.hero-device-camera {
  width: 0.42rem; height: 0.42rem; border-radius: 50%;
  background: #2e2e2c; margin: 0 auto 0.55rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.hero-device-screen {
  border-radius: 8px;
  overflow: hidden;
  background: #0f0f0e;
  border: 1px solid rgba(255,255,255,0.06);
}
.hero-menubar {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.35rem 0.7rem;
  background: rgba(255,253,247,0.96);
  color: #1d1d1b;
  font-size: 0.68rem;
  font-weight: 560;
  border-bottom: 1px solid rgba(29,29,27,0.1);
}
.hero-menubar-apple { font-size: 0.85rem; line-height: 1; }
.hero-menubar-spacer { flex: 1; }
.hero-menubar-whisp {
  color: #0d7c5d;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.hero-device-chin {
  height: 0.85rem;
  background: linear-gradient(180deg, #222220, #151514);
  border-left: 1px solid rgba(29,29,27,0.35);
  border-right: 1px solid rgba(29,29,27,0.35);
}
.hero-device-base {
  height: 0.55rem;
  margin: 0 -1.2% ;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #2a2a28, #121211);
  box-shadow: 0 10px 24px rgba(52,47,38,0.25);
}
.hero-frame {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), 0 0 90px rgba(52, 211, 153, 0.07);
}
.hero-frame img { display: block; width: 100%; height: auto; max-height: 440px; object-fit: cover; object-position: top; }

/* Hero dictation product proof — before/after sell (not IDE chat dump) */
.hero-proof-card {
  width: 100%;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #191918;
  color: #f8f5ee;
}
.hero-proof-chrome {
  min-height: 2.6rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #9c988f;
  font-size: 0.74rem;
}
.hero-proof-chrome span {
  width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #625f58;
}
.hero-proof-chrome p { margin-left: auto; }
.hero-proof-grid { display: grid; grid-template-columns: 1fr; }
.hero-proof-panel { padding: 1.35rem 1.4rem 1.55rem; min-height: 0; }
.hero-proof-panel + .hero-proof-panel {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.hero-proof-raw blockquote {
  color: #a8a49b;
  font-size: 0.98rem;
  line-height: 1.5;
}
.hero-proof-clean {
  position: relative;
  background: linear-gradient(145deg, rgba(13, 124, 93, 0.28), transparent 72%);
  padding-bottom: 3rem;
}
.hero-proof-clean > p:not(.demo-label) {
  font-size: 1.05rem;
  line-height: 1.5;
}
.hero-proof-clean .demo-ready {
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- steps ---------- */

.steps { padding: 5.5rem 0; border-top: 1px solid var(--border); }
.steps h2, .features h2, .pricing h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  letter-spacing: -0.028em;
  /* Wide enough that these headings set on one line at desktop. At 20ch the
     features heading dropped a single orphaned word onto a second line. */
  max-width: 32ch;
  text-wrap: balance;
}

/* Numbered rows rather than three equal cards. Each row is a wide grid so the
   number, the label and the explanation land on their own vertical rails, which
   reads as a sequence instead of three interchangeable tiles. */
.steps-row { margin-top: 3rem; border-top: 1px solid var(--border); }
.step {
  display: grid;
  grid-template-columns: 4rem minmax(0, 15rem) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.9rem 0;
  border-bottom: 1px solid var(--border);
}
.step-num {
  font-variant-numeric: tabular-nums;
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--accent);
  letter-spacing: -0.03em;
}
.step h3 { font-size: 1.18rem; letter-spacing: -0.02em; }
.step p { color: var(--muted); max-width: 46ch; }

.steps-media {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}
.steps-media img { width: 100%; height: auto; display: block; }
.steps-aside { color: var(--muted); max-width: 34ch; }
.steps-pill {
  justify-self: center;
  width: min(340px, 90%);
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, 0.55));
}

@media (max-width: 860px) {
  .step { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .step p { grid-column: 2; }
  .steps-media { grid-template-columns: 1fr; }
}

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

.features { padding: 5.5rem 0; border-top: 1px solid var(--border); }
.features h2 { text-align: left; }
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin-top: 2.75rem;
}
.cell {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg-raised);
  padding: 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: flex-start;
  min-height: 12rem;
}
.cell .icon { color: var(--accent); margin-bottom: 0.3rem; }
.cell h3 { font-size: 1.06rem; letter-spacing: -0.015em; }
.cell p { color: var(--muted); font-size: 0.95rem; }

/* Deliberate rhythm rather than six equal tiles: a wide lead cell, two narrow
   companions, then the row inverts. Spans are set per cell, not by repetition. */
.cell-lead { grid-column: span 4; }
.cell-pair { grid-column: span 2; }
.cell-trio { grid-column: span 2; }
.cell-tail { grid-column: span 4; }

.cell-tinted {
  background:
    radial-gradient(115% 130% at 0% 0%, rgba(52, 211, 153, 0.15), transparent 58%),
    var(--bg-raised);
}
/* A quiet ruled field, so this cell reads as a different material from its
   neighbours without needing another screenshot. */
.cell-ruled {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.022) 0 1px,
      transparent 1px 9px
    ),
    var(--surface);
}
.cell-inked {
  background: linear-gradient(155deg, rgba(52, 211, 153, 0.09), transparent 62%), var(--surface);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
}

/* The screenshot used to sit behind the copy, which made the last line of text
   unreadable where it crossed the image. It now occupies its own column and the
   copy keeps a solid background. */
.cell-imaged {
  /* Spans the full six so the grid closes cleanly: 4+2, 2+2+2, 6. No empty cell. */
  grid-column: span 6;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: 2rem;
  align-items: center;
  padding-right: 0;
  overflow: hidden;
}
.cell-imaged-copy {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: flex-start;
}
.cell-shot {
  align-self: stretch;
  border-radius: var(--radius-input) 0 0 var(--radius-input);
  border-left: 1px solid var(--border);
  /* The PNG shorthand is the fallback; browsers that understand image-set()
     override it and fetch only the WebP. */
  background: url("/img/history-list.png") left top / cover no-repeat;
  background-image: image-set(
    url("/img/history-list-744.webp") type("image/webp"),
    url("/img/history-list.png") type("image/png")
  );
  min-height: 12rem;
}

@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; }
  .cell-lead, .cell-pair, .cell-trio, .cell-tail, .cell-imaged { grid-column: auto; }
  .cell-imaged { grid-template-columns: 1fr; padding-right: 1.7rem; }
  .cell-shot { display: none; }
}

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

.faq {
  padding: 5.5rem 0; border-top: 1px solid var(--border);
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 4rem; align-items: start;
}
.faq-heading { position: sticky; top: 2rem; }
.faq-heading h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-top: 0.5rem; }
.faq-heading > p:last-child { color: var(--muted); margin-top: 0.85rem; max-width: 38ch; }
.faq-list { border-top: 1px solid var(--border); }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list summary {
  list-style: none; cursor: pointer; padding: 1.25rem 2.5rem 1.25rem 0;
  font-weight: 560; position: relative;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; position: absolute; right: 0; top: 1.05rem;
  color: var(--accent); font-size: 1.4rem; font-weight: 350;
}
.faq-list details[open] summary::after { content: "−"; }
.faq-list summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.faq-list details p { color: var(--muted); padding: 0 2.5rem 1.3rem 0; max-width: 58ch; }

@media (max-width: 800px) {
  .faq { grid-template-columns: 1fr; gap: 2rem; }
  .faq-heading { position: static; }
}

/* ---------- waitlist ---------- */

.waitlist { padding: 4.5rem 0 5.5rem; border-top: 1px solid var(--border); }
.waitlist-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(52, 211, 153, 0.1), transparent 60%),
    var(--bg-raised);
  padding: 2.8rem;
}
.waitlist-copy .icon-lg { color: var(--accent); margin-bottom: 0.8rem; }
.waitlist-copy h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.02em; }
.waitlist-copy p { color: var(--muted); margin-top: 0.7rem; max-width: 38ch; }
.waitlist-form { display: flex; flex-direction: column; gap: 0.45rem; }
.waitlist-form label { font-size: 0.88rem; color: var(--muted); }
.waitlist-form select { margin-bottom: 0.5rem; }
.waitlist-form .btn { margin-top: 0.4rem; align-self: flex-start; }

/* ---------- forms ---------- */

input, select {
  background: var(--bg); border: 1px solid var(--border-strong); color: var(--text);
  padding: 0.65rem 0.9rem; border-radius: var(--radius-input);
  font-size: 1rem; font-family: inherit; width: 100%;
}
input::placeholder { color: var(--placeholder); }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
input[aria-invalid="true"] { border-color: var(--danger); }

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
button:disabled:hover,
button:disabled:active { transform: none; }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: 0.92rem; color: var(--muted); }
.hint { font-size: 0.85rem; color: var(--muted); }
.error { font-size: 0.9rem; color: var(--danger); }
.field-error { font-size: 0.85rem; color: #fecaca; }
.field-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.field-heading a { font-size: 0.82rem; }
.input-group { position: relative; }
.input-group input { padding-right: 3.5rem; }
.input-action {
  position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer;
}
.input-action:hover { color: var(--text); background: var(--surface); }

/* ---------- auth + dashboard ---------- */

.page-auth main { display: flex; align-items: flex-start; justify-content: center; }

.auth-card {
  width: 100%; max-width: 26rem; margin: 4.5rem auto;
  background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 2.5rem;
}
.auth-card h1 { font-size: 1.7rem; margin-top: 0.45rem; }
.auth-intro { color: var(--muted); font-size: 0.94rem; margin: 0.65rem 0 1.4rem; }
.auth-alert {
  color: #fecaca; background: rgba(248, 113, 113, 0.09);
  border: 1px solid rgba(248, 113, 113, 0.28);
  border-radius: var(--radius-input); padding: 0.75rem 0.9rem;
  font-size: 0.9rem; margin-bottom: 1rem;
}
.auth-card form { display: flex; flex-direction: column; gap: 1.1rem; }
.auth-card .alt { margin-top: 1.3rem; color: var(--muted); font-size: 0.92rem; }

.dash { width: 100%; max-width: 58rem; margin: 3.5rem auto; }
.dash h1 { font-size: 1.9rem; letter-spacing: -0.025em; }
.dash .lede { font-size: 1.02rem; margin-top: 0.5rem; }
.dash-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; }
.status-badge, .device-badge {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 0.25rem 0.65rem; font-size: 0.76rem; font-weight: 620;
  color: var(--muted); background: var(--bg-raised);
}
.status-trialing, .status-active {
  color: var(--accent); border-color: rgba(52, 211, 153, 0.34);
  background: rgba(52, 211, 153, 0.08);
}
.status-past_due, .status-canceled {
  color: #fecaca; border-color: rgba(248, 113, 113, 0.34);
  background: rgba(248, 113, 113, 0.08);
}
.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.dash-card {
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--bg-raised); padding: 1.5rem;
  color: var(--text); display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start;
  transition: border-color 0.15s ease, transform 0.12s ease;
}
.dash-card:hover { text-decoration: none; border-color: var(--muted); transform: translateY(-2px); }
.dash-card .icon { color: var(--accent); }
.dash-card h3 { font-size: 1.02rem; }
.dash-card p { color: var(--muted); font-size: 0.92rem; }
.secret-row { display: flex; align-items: center; gap: 0.4rem; max-width: 100%; }
.secret {
  display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  user-select: none;
}
.secret.revealed { user-select: text; }
.icon-button {
  flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--bg); color: var(--muted); cursor: pointer;
}
.icon-button:hover, .icon-button.copied { color: var(--accent); border-color: var(--accent); }

.account-section {
  margin-top: 2.5rem; border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--bg-raised); overflow: hidden;
}
.section-heading {
  padding: 1.5rem; display: flex; justify-content: space-between; align-items: end;
  gap: 2rem; border-bottom: 1px solid var(--border);
}
.section-heading h2 { font-size: 1.25rem; margin-top: 0.25rem; }
.section-heading > p { color: var(--muted); font-size: 0.9rem; max-width: 34rem; }
.table-wrap { overflow-x: auto; }
.device-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.device-table th, .device-table td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid var(--border); }
.device-table th { color: var(--muted); font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.device-table tbody tr:last-child td { border-bottom: 0; }
.device-table td:nth-child(3) { color: var(--muted); }
.device-action { text-align: right !important; width: 1%; }
.revoke-details { position: relative; }
.revoke-details > summary {
  list-style: none; cursor: pointer; color: var(--muted); font-weight: 550;
  min-height: 2.75rem; padding: 0.35rem 0.6rem; border-radius: 8px;
  display: inline-flex; align-items: center;
}
.revoke-details > summary::-webkit-details-marker { display: none; }
.revoke-details > summary:hover { color: var(--danger); background: rgba(248, 113, 113, 0.08); }
.revoke-confirm {
  position: absolute; z-index: 5; right: 0; top: calc(100% + 0.4rem); width: 15rem;
  padding: 0.9rem; border: 1px solid var(--border-strong); border-radius: var(--radius-input);
  background: var(--surface); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); text-align: left;
}
.revoke-confirm p { color: var(--text); font-size: 0.86rem; margin-bottom: 0.7rem; }
.btn-danger { background: var(--danger); color: #270606 !important; }
.btn-danger:hover { background: #ef4444; }
.empty-state { padding: 2.5rem 1.5rem; text-align: center; color: var(--muted); }
.empty-state .icon { color: var(--accent); margin: 0 auto 0.65rem; }
.empty-state h3 { color: var(--text); font-size: 1rem; }
.empty-state p { margin-top: 0.35rem; font-size: 0.9rem; }

@media (max-width: 700px) {
  .dash-header, .section-heading { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .status-badge { order: -1; }
  .device-table thead { display: none; }
  .device-table, .device-table tbody, .device-table tr, .device-table td { display: block; width: 100%; }
  .device-table tr { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
  .device-table tr:last-child { border-bottom: 0; }
  .device-table td { padding: 0.2rem 0; border: 0; }
  .device-action { text-align: left !important; margin-top: 0.55rem; }
  .revoke-confirm { left: 0; right: auto; }
}

/* ---------- misc ---------- */

.flash {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  padding: 0.65rem 1rem; border-radius: var(--radius-input);
  margin-top: 1.2rem; text-align: center;
}

.site-footer { border-top: 1px solid var(--border); margin-top: 2rem; }
.footer-inner {
  max-width: 1120px; margin: 0 auto; padding: 2.2rem 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  color: var(--muted); font-size: 0.9rem;
}
.brand-sm { font-size: 0.98rem; }

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

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 2.5rem; text-align: left; }
  .hero-visual { max-width: 480px; margin: 0 auto; }
  .step p { max-width: 60ch; }
  .waitlist-inner { grid-template-columns: 1fr; padding: 2rem; gap: 1.8rem; }
  .dash-grid { grid-template-columns: 1fr; }
  .desktop-nav { gap: 0.9rem; }
  .desktop-nav a[href="/#features"] { display: none; }
  .desktop-nav a:not(.btn) { font-size: 0.9rem; }
  /* The header lockup is larger than it was, so at phone widths it is scaled
     back just enough to clear the nav rather than colliding with it. It still
     reads considerably bigger than the 20px mark it replaced. */
  .brand { font-size: 1.15rem; gap: 0.45rem; }
  .brand-mark { width: 24px; height: 24px; }
}

@media (max-width: 560px) {
  .cta-row .btn { width: 100%; }
  .desktop-nav { display: none; }
  .mobile-nav { display: block; }
  .site-header { height: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-visual { animation: none; }
  .btn, .dash-card { transition: none; }
}


/* ---------- compare strip (vs Wispr Flow, factual) ---------- */

.compare {
  text-align: left;
  padding: 4.5rem 0 1rem;
  border-top: 1px solid var(--border);
}
.compare-heading h2 {
  font-size: clamp(1.55rem, 2.8vw, 2.1rem);
  letter-spacing: -0.025em;
  max-width: 22ch;
}
.compare-heading > p:last-child {
  color: var(--muted);
  max-width: 58ch;
  margin-top: 0.85rem;
}
.compare-table-wrap {
  margin-top: 2rem;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg-raised);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 36rem;
  font-size: 0.95rem;
}
.compare-table th,
.compare-table td {
  text-align: left;
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.compare-table thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.03);
}
.compare-table tbody th {
  font-weight: 560;
  color: var(--text);
  width: 28%;
}
.compare-table td { color: var(--muted); }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-footnote {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.85rem;
  max-width: 70ch;
}

.download-gate .plan-list { margin: 1.2rem 0 1.6rem; }
.download-gate .cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- download gate (Soft Taste: cream/forest, not near-black) ---------- */

.page-download {
  --bg: #f5f1e8;
  --bg-raised: #fffdf7;
  --surface: #ebe5da;
  --border: rgba(29, 29, 27, 0.13);
  --border-strong: rgba(29, 29, 27, 0.24);
  --text: #1d1d1b;
  --muted: #625f58;
  --placeholder: #6a675e;
  --danger: #b3261e;
  --accent: #0d7c5d;
  --accent-strong: #096449;
  --accent-ink: #f7fff9;
  background:
    radial-gradient(circle at 50% 3%, rgba(255, 255, 255, 0.9), transparent 32rem),
    var(--bg);
}
.page-download main {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.page-download .site-header {
  border-bottom: 1px solid var(--border);
}
.page-download .desktop-nav a { color: var(--muted); }
.page-download .desktop-nav a:hover { color: var(--text); }
.page-download .auth-card {
  background: var(--bg-raised);
  border-color: var(--border);
  box-shadow: 0 18px 50px rgba(52, 47, 38, 0.1);
  max-width: 28rem;
}
.page-download .site-footer { background: #191918; color: #f8f5ee; }
.page-download .site-footer .brand { color: #f8f5ee; }
.page-download .download-gate .cta-row {
  flex-direction: column;
}
.page-download .download-gate .cta-row .btn { width: 100%; justify-content: center; }


.page-home .compare { border-color: var(--border); }

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

.pricing { text-align: left; padding: 5.5rem 0; border-top: 1px solid var(--border); }
.pricing h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -0.025em; }
.plans {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem; margin-top: 2.5rem; max-width: 46rem;
}
.plan {
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--bg-raised); padding: 1.8rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.plan-featured {
  border-color: rgba(52, 211, 153, 0.4);
  background:
    radial-gradient(110% 130% at 100% 0%, rgba(52, 211, 153, 0.12), transparent 60%),
    var(--bg-raised);
}
.plan h3 { font-size: 1.05rem; }
.plan-price { font-size: 2.1rem; font-weight: 600; letter-spacing: -0.03em; }
.plan-price span { font-size: 0.95rem; font-weight: 400; color: var(--muted); }
.plan-list { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; margin: 0.8rem 0 1.4rem; }
.plan-list li { display: flex; align-items: flex-start; gap: 0.55rem; color: var(--muted); font-size: 0.95rem; }
.plan-list .icon { color: var(--accent); margin-top: 0.15rem; }
.plan .btn { margin-top: auto; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95rem; color: var(--text); letter-spacing: 0.02em; }

@media (max-width: 720px) {
  .plans { grid-template-columns: 1fr; }
}

/* ---------- first-launch note ---------- */

.install-note {
  margin-top: 1.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg-raised);
  padding: 1rem 1.3rem;
}
.install-note summary {
  cursor: pointer;
  font-weight: 550;
  color: var(--text);
}
.install-note summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.install-note p { color: var(--muted); font-size: 0.94rem; margin-top: 0.8rem; }
.install-cmd {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-input);
  padding: 0.7rem 0.9rem;
  /* The command is long enough to run off the box on a laptop. Wrap it rather
     than scroll it: a command you cannot see the end of looks truncated, and
     people select it by eye before copying. Breaking anywhere keeps long paths
     from forcing a horizontal scrollbar back. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.7;
  color: var(--text) !important;
}


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

.section-lede {
  color: var(--muted);
  max-width: 52ch;
  margin: 0.9rem 0 0;
}
.plan-note { color: var(--muted); font-size: 0.9rem; margin-top: -0.4rem; }
.plan-stripe-note {
  margin: 1.1rem auto 0;
  max-width: 36rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
  text-align: center;
}
.page-download .plan-stripe-note {
  margin-top: 1rem;
  text-align: left;
}

.plan-badge {
  align-self: flex-start;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}
/* The feature list sits under both cards rather than being repeated in each,
   because the plans differ only in billing period. */
.plan-list-wide {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.6rem 1.6rem;
  margin-top: 2.2rem;
  color: var(--muted);
}
.plan-list-wide li { display: inline-flex; align-items: center; gap: 0.45rem; }
.plan-list-wide .icon { color: var(--accent); }

.flash-warn {
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
}
.dash-card-cta {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(52, 211, 153, 0.16), transparent 60%),
    var(--bg-raised);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}


/* ---------- legal pages ---------- */

.legal { max-width: 64ch; margin: 0 auto; padding: 3.5rem 0 4.5rem; }
.legal h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.legal h2 { font-size: 1.15rem; margin-top: 2.2rem; }
.legal p { color: var(--muted); margin-top: 0.8rem; }
.legal .alt { margin-top: 0.5rem; font-size: 0.9rem; }


/* ---------- motion ----------
   Deliberately minimal. A scroll-driven opacity reveal was tried here and cut:
   with `animation-timeline: view()` the sections start at opacity 0, so any
   browser that does not run the timeline as expected leaves the page blank
   below the fold. A marketing page that can fail to appear is not worth a fade.
   What remains is the hero load-in and the hover and press states on controls,
   which cannot hide content if they fail. */

@media (prefers-reduced-motion: reduce) {
  .hero-visual { animation: none; }
  .btn { transition: none; }
}

/* ---------- marketing experience ---------- */

.page-home {
  --bg: #f5f1e8;
  --bg-raised: #fffdf7;
  --surface: #ebe5da;
  --border: rgba(29, 29, 27, 0.13);
  --border-strong: rgba(29, 29, 27, 0.24);
  --text: #1d1d1b;
  --muted: #625f58;
  --placeholder: #6a675e;
  --danger: #b3261e;
  --accent: #0d7c5d;
  --accent-strong: #096449;
  --accent-ink: #f7fff9;
  background:
    radial-gradient(circle at 50% 3%, rgba(255, 255, 255, 0.9), transparent 32rem),
    var(--bg);
}

.page-home .site-header {
  position: sticky;
  z-index: 20;
  top: 0.75rem;
  height: 64px;
  margin-top: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 253, 247, 0.9);
  box-shadow: 0 12px 35px rgba(52, 47, 38, 0.08);
  backdrop-filter: blur(18px);
}

/* Floating sticky header (~64px + 0.75rem inset) must not cover #pricing etc. */
.page-home #pricing,
.page-home #features,
.page-home #faq,
.page-home #compare,
.page-home #waitlist,
.page-home #demo,
.page-home #how {
  scroll-margin-top: 6.25rem;
}

.page-home .hero {
  min-height: 42rem;
  align-items: center;
  padding: 5.5rem 0 6.5rem;
}

.page-home .hero-copy h1 {
  font-size: clamp(3.2rem, 6.5vw, 5.8rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
  font-weight: 570;
}

.page-home .hero-copy h1 em {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.045em;
}

.page-home .hero-copy .lede { font-size: 1.2rem; max-width: 38rem; }

.hero-proof {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin-top: 1.4rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.hero-proof li { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero-proof li::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--accent);
}

.page-home .hero-frame {
  transform: rotate(1.5deg);
  border-color: rgba(29, 29, 27, 0.18);
  box-shadow: 0 28px 75px rgba(52, 47, 38, 0.2);
}
.page-home .hero-proof-card {
  transform: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.page-home .hero-device {
  transform: rotate(1.2deg);
}
.page-home .hero-pill-break {
  transform: translateX(-50%) rotate(-1.2deg);
}

.page-home .hero-pill { filter: drop-shadow(0 14px 25px rgba(52, 47, 38, 0.22)); }

.voice-demo {
  padding: 5.5rem;
  margin-bottom: 6.5rem;
  border-radius: 32px;
  background: #191918;
  color: #f8f5ee;
  overflow: hidden;
}

.demo-heading { max-width: 46rem; }
.demo-heading h2, .work-heading h2 {
  font-size: clamp(2.3rem, 4.5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin-top: 0.65rem;
  text-wrap: balance;
}
.demo-heading > p:last-child { color: #b7b3aa; margin-top: 1rem; max-width: 54ch; }

.demo-window {
  margin-top: 3.25rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  overflow: hidden;
  background: #232321;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.35);
}

.demo-toolbar {
  min-height: 3rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #9c988f;
  font-size: 0.8rem;
}
.demo-toolbar span { width: 0.62rem; height: 0.62rem; border-radius: 50%; background: #625f58; }
.demo-toolbar p { margin-left: auto; }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; }
.demo-panel { min-height: 18rem; padding: 2.2rem; }
.demo-panel + .demo-panel { border-left: 1px solid rgba(255, 255, 255, 0.1); }
.demo-label {
  color: #8e8a82;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.demo-raw blockquote { color: #a8a49b; font-size: 1.08rem; }
.demo-clean { position: relative; background: linear-gradient(145deg, rgba(13, 124, 93, 0.22), transparent 70%); }
.demo-clean > p:not(.demo-label) { font-size: 1.2rem; line-height: 1.55; }
.demo-ready {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(52, 211, 153, 0.35);
  border-radius: 999px;
  color: #6ee7b7;
  font-size: 0.76rem;
}

.work-anywhere { padding: 1rem 0 6.5rem; }
.work-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4rem; align-items: end; }
.work-heading .eyebrow { grid-column: 1 / -1; }
.work-heading > p:last-child { color: var(--muted); max-width: 44ch; padding-bottom: 0.35rem; }
.app-strip {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-top: 3.5rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 253, 247, 0.55);
}
.app-strip li { padding: 1rem; text-align: center; font-weight: 560; border-right: 1px solid var(--border); }
.app-strip li:last-child { border-right: 0; }
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.work-grid article {
  min-height: 16rem;
  padding: 1.7rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-raised);
}
.work-grid article > span { color: var(--accent); font-size: 0.78rem; font-weight: 650; }
.work-grid h3 { font-size: 1.35rem; line-height: 1.15; margin-top: 4rem; }
.work-grid p { color: var(--muted); margin-top: 0.8rem; }

.page-home .steps,
.page-home .features,
.page-home .compare,
.page-home .pricing,
.page-home .faq,
.page-home .waitlist { border-color: var(--border); }

.page-home .cell-ruled {
  background: repeating-linear-gradient(-45deg, rgba(29, 29, 27, 0.025) 0 1px, transparent 1px 9px), var(--surface);
}

.page-home .site-footer { background: #191918; color: #f8f5ee; }
.page-home .site-footer .brand { color: #f8f5ee; }

@media (max-width: 900px) {
  .page-home .site-header { margin-inline: 1rem; width: calc(100% - 2rem); }
  .page-home .hero { min-height: 0; padding: 4rem 0 5rem; }
  .page-home .hero-copy h1 { font-size: clamp(3rem, 13vw, 5rem); }
  .page-home .hero-proof-card { transform: none; }
  .page-home .hero-device { transform: none; }
  .page-home .hero-pill-break { transform: translateX(-50%); }
  .page-home #pricing,
  .page-home #features,
  .page-home #faq,
  .page-home #compare,
  .page-home #waitlist,
  .page-home #demo,
  .page-home #how { scroll-margin-top: 5.75rem; }
  .voice-demo { padding: 3rem 1.5rem; margin-inline: -0.5rem; border-radius: 24px; }
  .work-heading { grid-template-columns: 1fr; gap: 1rem; }
  .app-strip { grid-template-columns: repeat(3, 1fr); }
  .app-strip li:nth-child(3) { border-right: 0; }
  .app-strip li:nth-child(-n+3) { border-bottom: 1px solid var(--border); }
  .work-grid { grid-template-columns: 1fr; }
  .work-grid article { min-height: 12rem; }
  .work-grid h3 { margin-top: 2.5rem; }
}

@media (max-width: 640px) {
  .demo-grid { grid-template-columns: 1fr; }
  .demo-panel { min-height: 15rem; padding: 1.5rem; }
  .demo-panel + .demo-panel { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .app-strip { grid-template-columns: repeat(2, 1fr); }
  .app-strip li { border-bottom: 1px solid var(--border); }
  .app-strip li:nth-child(2n+1) { border-right: 1px solid var(--border); }
  .app-strip li:nth-child(2n) { border-right: 0; }
  .app-strip li:nth-last-child(-n+2) { border-bottom: 0; }
}