/*
 * Prontei site. Tokens copied from design/system/tokens.css (same --pr-* names and values).
 * Light by default; dark via prefers-color-scheme. Site-only tokens use --site-*.
 * No web fonts, no @import, no inline styles: the CSP is style-src 'self'.
 */
:root {
  --pr-iris: #5b4bf5;
  --pr-iris-hover: #4b3bd9;
  --pr-on-iris: #ffffff;
  --pr-accent: #5b4bf5;
  --pr-coral: #ff7a59;
  --pr-surface: #f7f5ff;
  --pr-raised: #ffffff;
  --pr-page: #f2f0f8;
  --pr-panel: #ffffff;
  --pr-text: #111b21;
  --pr-ink: #252337;
  --pr-muted: #66617a;
  --pr-line: #e4dff4;
  --pr-track: #e4dff7;
  --pr-shadow-card: 0 1px 2px #0b141a14;
  --pr-shadow-trigger: 0 2px 5px #0b141a24;
  --pr-font: "Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Arial, Ubuntu, Cantarell, "Fira Sans", sans-serif;
  --pr-body: 14.2px;
  --pr-body-lh: 19px;
  --pr-heading: 12px;
  --pr-meta: 11px;
  --pr-action: 11.5px;
  --pr-weight-strong: 600;
  --pr-radius-card: 7.5px;
  --pr-radius-button: 6px;
  --pr-card-pad-x: 12px;
  --pr-trigger: 34px;
  --pr-gap-side: 8px;
  --site-bubble: #e8e8ee;
  --site-wrap: 1040px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pr-accent: #b3a8ff;
    --pr-coral: #ff967d;
    --pr-surface: #242438;
    --pr-raised: #202c33;
    --pr-page: #151520;
    --pr-panel: #20202e;
    --pr-text: #e9edef;
    --pr-ink: #eeedf7;
    --pr-muted: #b2aec7;
    --pr-line: #3c3854;
    --pr-track: #403a5b;
    --pr-shadow-card: 0 1px 3px #0003;
    --pr-shadow-trigger: 0 2px 5px #0006;
    --site-bubble: #2e2e3b;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--pr-page);
  color: var(--pr-ink);
  font-family: var(--pr-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ol {
  margin: 0;
}

h1 {
  font-size: clamp(44px, 9vw, 78px);
  font-weight: 700;
  line-height: 0.99;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
  text-wrap: balance;
}

code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--pr-track);
  color: var(--pr-ink);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;
}

a {
  color: var(--pr-accent);
}

:focus-visible {
  outline: 2px solid var(--pr-accent);
  outline-offset: 3px;
}

.wrap {
  width: min(calc(100% - 40px), var(--site-wrap));
  margin-inline: auto;
}

/* Mark and lockup */
.mark {
  width: 28px;
  height: 28px;
  flex: none;
  color: var(--pr-accent);
}

.spark {
  fill: var(--pr-coral);
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Header */
.site-header {
  border-bottom: 1px solid var(--pr-line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
}

.header-link {
  padding: 6px 2px;
  font-weight: var(--pr-weight-strong);
  text-decoration: none;
}

.header-link:hover {
  text-decoration: underline;
}

/* Hero */
.hero {
  padding: clamp(40px, 8vw, 96px) 0 clamp(48px, 7vw, 88px);
}

.hero-grid {
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

.hero-mark {
  display: block;
  width: 72px;
  height: 72px;
  margin-bottom: 24px;
  transform: rotate(-7deg);
}

.accent {
  color: var(--pr-accent);
}

.lede {
  max-width: 32em;
  margin-top: 24px;
  color: var(--pr-muted);
  font-size: 19px;
  line-height: 1.5;
}

.cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 32px;
}

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: var(--pr-radius-button);
  background: var(--pr-iris);
  color: var(--pr-on-iris);
  font-size: 16px;
  font-weight: var(--pr-weight-strong);
  text-decoration: none;
}

.btn:hover {
  background: var(--pr-iris-hover);
}

.cta-note,
.small {
  color: var(--pr-muted);
  font-size: 14px;
}

/* Inline UI illustration: a neutral voice-note bubble, the trigger and the transcript card */
.mock {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--pr-line);
  border-radius: 16px;
  background: var(--pr-panel);
  box-shadow: var(--pr-shadow-card);
}

.mock-row {
  display: flex;
  align-items: center;
  gap: var(--pr-gap-side);
}

.vn {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 52px;
  padding: 6px 14px 6px 8px;
  border-radius: var(--pr-radius-card);
  background: var(--site-bubble);
  color: var(--pr-muted);
}

.vn-play {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--pr-raised);
  color: var(--pr-ink);
}

.vn-play svg {
  width: 14px;
  height: 14px;
  margin-left: 2px;
}

.vn-wave {
  flex: 1;
  min-width: 0;
  height: 24px;
  fill: currentColor;
}

.vn-time {
  flex: none;
  color: var(--pr-muted);
  font-size: var(--pr-meta);
  font-variant-numeric: tabular-nums;
}

.mock-trigger {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--pr-trigger);
  height: var(--pr-trigger);
  padding: 7px;
  border-radius: 50%;
  background: var(--pr-raised);
  box-shadow: var(--pr-shadow-trigger);
}

.pr-bird {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--pr-accent);
}

.pr-bird .pr-spark {
  fill: var(--pr-coral);
}

.pr-card {
  box-sizing: border-box;
  width: 100%;
  margin-right: calc(var(--pr-trigger) + var(--pr-gap-side));
  border: 1px solid var(--pr-line);
  border-radius: var(--pr-radius-card);
  background: var(--pr-surface);
  box-shadow: var(--pr-shadow-card);
  color: var(--pr-text);
  font-size: var(--pr-body);
  line-height: var(--pr-body-lh);
  overflow: hidden;
}

.pr-head {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 11px;
}

.pr-head .pr-bird {
  width: 18px;
  height: 18px;
}

.pr-heading {
  font-size: var(--pr-heading);
  font-weight: var(--pr-weight-strong);
}

.pr-meta {
  margin-left: auto;
  color: var(--pr-muted);
  font-size: var(--pr-meta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pr-chevron {
  display: flex;
  color: var(--pr-muted);
}

.pr-chevron svg {
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
}

.pr-body {
  padding: 0 var(--pr-card-pad-x) 4px;
}

.pr-transcript {
  margin: 0;
  padding-bottom: 8px;
}

.pr-actions {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 29px;
}

.pr-action {
  padding: 4px 0;
  color: var(--pr-accent);
  font-size: var(--pr-action);
  font-weight: var(--pr-weight-strong);
  line-height: 20px;
}

.pr-action[data-trailing] {
  margin-left: auto;
  color: var(--pr-muted);
  font-weight: 400;
}

/* Sections */
.section {
  padding-top: clamp(56px, 8vw, 96px);
}

.panel {
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--pr-line);
  border-radius: 12px;
  background: var(--pr-panel);
}

.panel p {
  color: var(--pr-muted);
  font-size: 17px;
}

.panel p + p {
  margin-top: 16px;
}

.panel > .btn {
  margin-top: 24px;
}

.panel .small {
  margin-top: 12px;
  font-size: 14px;
}

/* How it works */
.steps {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  counter-reset: step;
  list-style: none;
}

@media (min-width: 720px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.steps li {
  counter-increment: step;
  padding: 24px;
  border: 1px solid var(--pr-line);
  border-radius: 12px;
  background: var(--pr-panel);
}

.steps li::before {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--pr-iris);
  color: var(--pr-on-iris);
  content: counter(step);
  font-size: 13px;
  font-weight: var(--pr-weight-strong);
  font-variant-numeric: tabular-nums;
}

.steps p {
  font-size: 17px;
  line-height: 1.5;
}

/* Download */
.install {
  margin-top: 24px;
  padding-left: 1.5em;
}

.install li {
  padding-left: 4px;
  margin: 10px 0;
}

.panel .reqs {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--pr-line);
  font-size: 15px;
}

.reqs strong {
  color: var(--pr-ink);
}

/* FAQ */
.faq {
  border-top: 1px solid var(--pr-line);
}

.faq details {
  border-bottom: 1px solid var(--pr-line);
}

.faq summary {
  position: relative;
  padding: 18px 32px 18px 0;
  font-size: 17px;
  font-weight: var(--pr-weight-strong);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  position: absolute;
  top: 12px;
  right: 0;
  color: var(--pr-accent);
  content: "+";
  font-size: 22px;
  font-weight: 400;
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq details p {
  padding: 0 32px 18px 0;
  color: var(--pr-muted);
}

/* Footer */
.site-footer {
  margin-top: clamp(64px, 9vw, 112px);
  padding: 40px 0 48px;
  border-top: 1px solid var(--pr-line);
}

.footer-tag {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: var(--pr-weight-strong);
}

.footer-tag span {
  color: var(--pr-accent);
}

.site-footer .small {
  margin-top: 6px;
}

/* 404 */
.notfound {
  padding: clamp(72px, 14vw, 128px) 0;
}

.notfound h1 {
  font-size: clamp(36px, 7vw, 56px);
  letter-spacing: -0.03em;
}

.notfound p {
  margin-top: 16px;
  color: var(--pr-muted);
  font-size: 17px;
}

.notfound .btn {
  margin-top: 32px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

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