:root {
  color-scheme: light dark;
  --bg: #faf7f4;
  --surface: #ffffff;
  --surface-muted: #f1ebe6;
  --text: #1a1410;
  --text-secondary: #66594d;
  --text-tertiary: #9f9080;
  --hairline: #e3dcd2;
  --brand: #2563eb;
  --brand-soft: #dbeafe;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161214;
    --surface: #1f1a1d;
    --surface-muted: #2a2226;
    --text: #f6f1ea;
    --text-secondary: #b5a99a;
    --text-tertiary: #7a6e5f;
    --hairline: #3a2f35;
    --brand: #5b9bff;
    --brand-soft: #17324f;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Top bar */
header.top {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--hairline);
}
header.top .container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
header.top a.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
}
header.top .glyph-sm {
  width: 22px;
  height: 22px;
}

/* Hero */
section.hero {
  padding: 5rem 0 4rem;
  text-align: center;
}
section.hero .glyph-lg {
  width: 88px;
  height: 88px;
  margin: 0 auto 1.5rem;
}
section.hero h1 {
  font-family: ui-serif, "New York", Georgia, serif;
  font-weight: 600;
  font-size: 3rem;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  line-height: 1.05;
}
section.hero .tagline {
  color: var(--text-secondary);
  font-size: 1.25rem;
  max-width: 32ch;
  margin: 0 auto 2rem;
  line-height: 1.4;
}

/* Features */
section.features {
  padding: 3rem 0;
  border-top: 1px solid var(--hairline);
}
section.features h2 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 2rem;
  text-align: center;
}
.feature-grid {
  display: grid;
  gap: 2rem;
}
.feature h3 {
  font-family: ui-serif, "New York", Georgia, serif;
  font-weight: 600;
  font-size: 1.375rem;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.feature p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 1rem;
}

/* Privacy callout */
section.privacy-callout {
  margin: 3rem 0;
  padding: 2rem;
  background: var(--surface-muted);
  border-radius: 16px;
}
section.privacy-callout h2 {
  font-family: ui-serif, "New York", Georgia, serif;
  font-weight: 600;
  font-size: 1.5rem;
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}
section.privacy-callout p {
  color: var(--text-secondary);
  margin: 0 0 1rem;
}
section.privacy-callout p:last-child { margin-bottom: 0; }

/* Footer */
footer {
  border-top: 1px solid var(--hairline);
  padding: 2rem 0 4rem;
  margin-top: 3rem;
  color: var(--text-tertiary);
  font-size: 0.875rem;
}
footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
}
footer nav a {
  color: var(--text-secondary);
  margin-right: 1.25rem;
}
footer nav a:last-child { margin-right: 0; }

/* Document pages (privacy, support) */
article.doc {
  padding: 3rem 0 2rem;
}
article.doc h1 {
  font-family: ui-serif, "New York", Georgia, serif;
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: -0.015em;
  margin: 0 0 0.25rem;
}
article.doc .effective {
  color: var(--text-tertiary);
  font-size: 0.875rem;
  margin: 0 0 2.5rem;
}
article.doc h2 {
  font-family: ui-serif, "New York", Georgia, serif;
  font-weight: 600;
  font-size: 1.375rem;
  margin: 2.5rem 0 0.75rem;
  letter-spacing: -0.01em;
}
article.doc p,
article.doc li {
  color: var(--text);
  font-size: 1rem;
}
article.doc p {
  margin: 0 0 1rem;
}
article.doc ul {
  padding-left: 1.25rem;
  margin: 0 0 1.25rem;
}
article.doc li { margin-bottom: 0.5rem; }
article.doc strong { font-weight: 600; }
article.doc .summary {
  background: var(--surface-muted);
  padding: 1.25rem 1.5rem;
  border-radius: 12px;
  margin: 0 0 2rem;
}
article.doc .summary p { margin: 0; color: var(--text-secondary); }

/* The old `max-width: 480px` hero block lived here. Removed 2026-09-10:
   the fluid `clamp()` values in the responsive layer at the end of this
   file supersede all three of its declarations and already won on source
   order, so it was dead weight that read as if it were in charge. */

/* Hero: the canonical one-sentence definition runs longer than the old
   tagline, so give it room rather than breaking it across many short lines. */
section.hero .tagline { max-width: 46ch; }

/* ---------------------------------------------------------------
   Guide pages (answer-first articles, e.g. how-to-tell-if-an-image-
   is-ai-generated). Built on article.doc, which already covers
   h1/h2/p/ul/li/strong/.summary.
   --------------------------------------------------------------- */

/* The short, direct answer at the top. Deliberately the first thing
   both a reader and a retrieval system encounter. */
article.doc .answer {
  background: var(--brand-soft);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin: 0 0 2.5rem;
}
article.doc .answer p { margin: 0; }
article.doc .answer p + p { margin-top: 0.75rem; }

article.doc h3 {
  font-family: ui-serif, "New York", Georgia, serif;
  font-weight: 600;
  font-size: 1.125rem;
  margin: 1.75rem 0 0.5rem;
  letter-spacing: -0.005em;
}

/* Numbered method list — each step is a self-contained check. */
article.doc ol { padding-left: 1.25rem; margin: 0 0 1.25rem; }
article.doc ol li { margin-bottom: 0.75rem; }

/* Signal-strength table. Scrolls rather than squashing on phones. */
article.doc .table-wrap { overflow-x: auto; margin: 0 0 1.5rem; }
article.doc table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9375rem;
}
article.doc th,
article.doc td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
article.doc th {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
  white-space: nowrap;
}
article.doc td:first-child { white-space: nowrap; font-weight: 500; }

/* Caveats worth interrupting the flow for. */
article.doc .note {
  border-left: 3px solid var(--hairline);
  padding: 0.25rem 0 0.25rem 1rem;
  margin: 0 0 1.25rem;
  color: var(--text-secondary);
}
article.doc .note p { margin: 0; }

/* Clearly-fenced product section, so the guide reads as a guide. */
article.doc .app-box {
  background: var(--surface-muted);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2.5rem 0 1.5rem;
}
article.doc .app-box h2 { margin-top: 0; }
article.doc .app-box p:last-child { margin-bottom: 0; }

article.doc .backlink {
  font-size: 0.875rem;
  color: var(--text-tertiary);
  margin: 0 0 1.5rem;
}

/* App Store call to action under the hero tagline. */
.cta {
  margin: 0 0 0.5rem;
}
.cta a {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.cta a:hover { opacity: 0.85; }

/* Real App Store icon replaces the old line-art glyph. The PNG already
   carries the iOS squircle in its alpha channel, so no border-radius here —
   rounding it again would clip the corners twice. `display:block` is what
   makes the hero rule's `margin: 0 auto` actually centre an <img>. */
img.glyph-sm,
img.glyph-lg {
  display: block;
  object-fit: contain;
}
img.glyph-sm { border-radius: 5px; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE + POLISH LAYER — added 2026-09-10
   ═══════════════════════════════════════════════════════════════════
   🔴 SYNCHRONISED ACROSS ALL FOUR APP STYLESHEETS (mimic, postcard,
   refract, verdict). They were already near-identical copies differing
   only in brand colour, so this block is byte-identical in each and
   uses `var(--brand)` rather than a literal. **Edit all four, or none.**

   Appended at the end on purpose: these rules restate earlier ones at
   the same specificity and must win on source order.

   What was wrong: the site *fitted* on a phone (viewport meta, single
   column, no horizontal overflow at 375px — measured) but nothing
   adapted. One fixed design sat centred in whatever window it got, so
   the hero was the same size at 1280 as at 360, the feature grid was
   one column on a 27" display, and phone padding was chosen for a
   desktop. The fix is fluid type and spacing rather than more
   breakpoints — a `clamp()` covers every width, including the ones
   nobody thought to test.
   ─────────────────────────────────────────────────────────────────── */

:root {
  /* One knob for the reading column, so the breakpoint that widens it
     lives in exactly one place. 640px is a comfortable measure; 720
     stops it looking marooned on a large display without pushing the
     line length past what is pleasant to read. */
  --measure: 640px;
  --gutter: 1.5rem;
}

/* 🔑 Two steps, and they exist to keep the hero's WRAP stable.
   The headline grows with the viewport but the column did not, so
   between ~850 and 1000px the type outgrew a 640px measure and the
   hero went two lines → three → back to two as the window widened.
   Measured, not guessed: 48px/2 lines at 768, 56px/3 lines at 900.
   Widening the column in step with the type holds it at two lines
   from 640px up. */
@media (min-width: 820px) {
  :root { --measure: 700px; }
}
/* 940, not 1000: the headline reaches its 3.75rem cap at 6.2vw = 968px,
   and a 20px-step sweep showed the last three-line band sitting at
   960-980px — max type in a column that had not stepped up yet. The
   column now widens just before the type stops growing. */
@media (min-width: 940px) {
  :root { --measure: 740px; }
}

/* Very small phones (SE, and any phone with large text). The old
   1.5rem gutter cost 48px of a 320px screen. */
@media (max-width: 380px) {
  :root { --gutter: 1.125rem; }
}

.container {
  /* `min()` replaces max-width + padding: the column shrinks with the
     viewport and never needs a media query to stop overflowing. */
  width: min(100% - (var(--gutter) * 2), var(--measure));
  max-width: none;
  margin-inline: auto;
  padding: 0;
}

/* Landscape on a notched iPhone puts the safe area at the sides, where
   it would otherwise clip the first and last characters of every line. */
@supports (padding: max(0px)) {
  @media (orientation: landscape) {
    .container {
      padding-left: max(0px, env(safe-area-inset-left));
      padding-right: max(0px, env(safe-area-inset-right));
    }
  }
}

/* ── Fluid type ─────────────────────────────────────────────────────
   Replaces the fixed sizes AND the old `max-width: 480px` hero block,
   which only knew about two widths. */

section.hero {
  padding: clamp(2.5rem, 9vw, 6rem) 0 clamp(2.25rem, 6vw, 4rem);
}
section.hero .glyph-lg {
  width: clamp(68px, 17vw, 96px);
  height: clamp(68px, 17vw, 96px);
}
section.hero h1 {
  /* 6.2vw is what makes "Voice cloning that never leaves your iPhone."
     land on three lines at 375 and two at 1280, instead of the same
     three lines at every width. */
  font-size: clamp(2.0625rem, 6.2vw, 3.75rem);
  line-height: 1.04;
  /* A long product name ("Voice Clone & Changer") has nowhere to break
     on a narrow phone. */
  overflow-wrap: break-word;
}
section.hero .tagline {
  font-size: clamp(1.0625rem, 2.6vw, 1.375rem);
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}

section.features { padding: clamp(2.25rem, 6vw, 4rem) 0; }
section.features h2 { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }

.feature h3 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); }

article.doc { padding: clamp(2rem, 6vw, 3.5rem) 0 2rem; }
article.doc h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.12; }
article.doc h2 { font-size: clamp(1.25rem, 2.6vw, 1.5rem); }

section.privacy-callout {
  margin: clamp(2rem, 6vw, 3.5rem) 0;
  padding: clamp(1.25rem, 4vw, 2.25rem);
}
section.privacy-callout h2 { font-size: clamp(1.3125rem, 3vw, 1.625rem); }

/* ── The feature grid actually uses a wide screen ───────────────────
   Two columns once there is room for two comfortable measures. Keyed
   to the container's own width via the same 640px figure, so it flips
   when the content has space rather than at a device-shaped number. */
@media (min-width: 700px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 3vw, 2.75rem) 2.5rem;
  }
}

/* ── Long unbreakable strings ───────────────────────────────────────
   Support and privacy pages carry email addresses and URLs, which are
   single "words" as far as wrapping is concerned and are exactly what
   pushes a narrow layout sideways. */
article.doc p,
article.doc li,
.feature p,
section.privacy-callout p,
footer {
  overflow-wrap: break-word;
}

/* ── Touch targets ─────────────────────────────────────────────────
   Apple's minimum is 44×44pt. Footer nav links were ~20px tall, set in
   a row a thumb has to hit. Padding is applied on coarse pointers only,
   so the desktop layout is untouched. */
@media (pointer: coarse) {
  footer nav a,
  footer .container > a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
  }
  header.top a.brand { min-height: 44px; }
}

.cta a {
  /* Comfortably tappable at any size, and never wider than the screen. */
  min-height: 48px;
  padding: 0.85rem 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  font-size: clamp(1rem, 1.6vw, 1.0625rem);
}

/* ── Focus visibility ──────────────────────────────────────────────
   🔴 There was no focus style at all, so a keyboard or switch-control
   user had no way to see where they were. `:focus-visible` shows it for
   them without putting a ring on every mouse click. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Hover, only where hovering exists ─────────────────────────────
   On a touch screen a `:hover` rule latches after a tap and the element
   stays faded until something else is touched. */
@media (hover: none) {
  a:hover { text-decoration: none; }
  .cta a:hover { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Images should never be the thing that makes a page scroll sideways. */
img { max-width: 100%; height: auto; }

/* ── Print ─────────────────────────────────────────────────────────
   Privacy policies get printed and filed, and a dark-mode print is a
   waste of toner and unreadable. */
@media print {
  :root {
    --bg: #fff; --surface: #fff; --surface-muted: #f4f4f4;
    --text: #000; --text-secondary: #333; --text-tertiary: #555;
    --hairline: #ccc; --brand: #000; --brand-soft: #f0f0f0;
  }
  header.top, footer nav, .cta { display: none; }
  .container { width: 100%; }
  a { color: #000; text-decoration: underline; }
  article.doc { padding-top: 0; }
}