/* Nowai — static site.
   Palette and type scale mirror the app's design tokens (design/tokens.md,
   src/theme/tokens.ts): warm off-white ground, near-black text, a single
   terracotta accent, serif for reading and sans for chrome. */

:root {
  --bg: #faf8f4;
  --surface: #fffefb;
  --text: #1a1917;
  --muted: #8a8478;
  --hairline: #e4e0d8;
  --accent: #b5654a;
  --accent-deep: #ae4526;

  /* Fraunces for display only: an editorial serif with enough stroke weight to stay
     legible, unlike a Didone's hairlines. Long-form text is all sans. */
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --measure: 34rem;
  --gutter: clamp(1.5rem, 5vw, 4rem);
}

/* Deliberately light-only: the cream ground is the brand, and the site commits to
   it in both system themes rather than inverting. Every colour is defined above,
   so nothing is inherited from the viewer's theme. */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* A barely-there paper grain, so the cream ground reads as stock rather than #eee. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
  background-image: radial-gradient(var(--hairline) 0.5px, transparent 0.5px);
  background-size: 22px 22px;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--text);
}

img {
  max-width: 100%;
  height: auto;
}

.wrap {
  width: 100%;
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── Chrome ──────────────────────────────────────────────────────── */

.eyebrow {
  font-size: 0.8125rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  margin: 0;
}

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.75rem 0;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  color: var(--text);
  text-decoration: none;
}

.brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.site-nav {
  display: flex;
  gap: 1.75rem;
  font-size: 0.9375rem;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current='page'] {
  color: var(--text);
}

/* ── Hero ────────────────────────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding: clamp(3rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5.5rem);
}

@media (max-width: 46rem) {
  .hero {
    grid-template-columns: 1fr;
  }
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.75rem, 8vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 1.25rem 0 0;
}

.hero h1 em {
  font-style: italic;
  color: var(--accent);
}

.lede {
  font-family: var(--sans);
  font-size: clamp(1.125rem, 2.2vw, 1.3125rem);
  line-height: 1.6;
  color: var(--text);
  max-width: 30rem;
  margin: 1.5rem 0 0;
}

.hero-note {
  color: var(--muted);
  font-size: 0.9375rem;
  margin: 1.75rem 0 0;
}

.cta-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 2.25rem;
}

.btn {
  display: inline-block;
  background: var(--accent-deep);
  color: #faf8f4;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  padding: 0.9rem 1.75rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease;
}

.btn:hover {
  background: var(--accent);
  color: #faf8f4;
  transform: translateY(-1px);
}

/* The phone: a real device silhouette rather than a floating rectangle. */
.device {
  justify-self: center;
  width: min(19rem, 78vw);
  /* Near-black body, as a real handset — against the cream ground a cream-on-cream
     frame reads as a ghost outline rather than a device. */
  background: #1a1917;
  border-radius: 2.25rem;
  padding: 0.6rem;
  box-shadow: 0 32px 60px -30px rgba(26, 25, 23, 0.4);
  transform: rotate(-1.5deg);
}

.device img {
  display: block;
  width: 100%;
  border-radius: 1.85rem;
}

/* ── Sections ────────────────────────────────────────────────────── */

.rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 0;
}

section {
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}

h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0.75rem 0 0;
}

h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 0.4rem;
}

.grid {
  display: grid;
  /* 20rem min lands on a 2x2 at desktop width — four items in three columns
     would leave an orphan on the second row. */
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 2.75rem 4rem;
  margin-top: 3rem;
}

.grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9875rem;
  line-height: 1.65;
}

.grid .num {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--accent);
  display: block;
  margin-bottom: 0.9rem;
}

/* Two-column split used by the "no" list and the sources block. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: start;
}

@media (max-width: 46rem) {
  .split {
    grid-template-columns: 1fr;
  }
}

.plain-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.plain-list li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  gap: 1rem;
  align-items: baseline;
}

.plain-list li::before {
  content: '—';
  color: var(--accent);
  flex: none;
}

/* ── Prose pages (privacy, support) ──────────────────────────────── */

.prose {
  max-width: var(--measure);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 5rem;
}

.prose h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 1rem 0 0.75rem;
}

.prose h2 {
  font-size: 1.375rem;
  margin: 3rem 0 0.5rem;
}

.prose .updated {
  color: var(--muted);
  font-size: 0.875rem;
  margin: 0 0 2.5rem;
}

.prose p,
.prose li {
  color: var(--text);
}

.prose ul {
  padding-left: 1.1rem;
}

.prose li {
  margin: 0.5rem 0;
}

.prose strong {
  font-weight: 700;
}

/* A pull-quote-ish callout for the one line that matters most. */
.callout {
  border-left: 2px solid var(--accent);
  padding: 0.25rem 0 0.25rem 1.5rem;
  margin: 2rem 0;
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.55;
  font-weight: 400;
}

dl.faq {
  margin: 2rem 0 0;
}

dl.faq dt {
  font-weight: 700;
  margin-top: 2rem;
}

dl.faq dd {
  margin: 0.4rem 0 0;
  color: var(--text);
}

/* ── Footer ──────────────────────────────────────────────────────── */

.site-foot {
  border-top: 1px solid var(--hairline);
  padding: 2.5rem 0 3.5rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.site-foot .wrap {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.site-foot a {
  color: var(--muted);
  text-decoration: none;
}

.site-foot a:hover {
  color: var(--text);
}

.site-foot nav {
  display: flex;
  gap: 1.5rem;
}

/* ── Motion ──────────────────────────────────────────────────────── */

.reveal {
  animation: rise 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.reveal:nth-child(2) {
  animation-delay: 90ms;
}
.reveal:nth-child(3) {
  animation-delay: 180ms;
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
  .device {
    transform: none;
  }
}