/* ── Warm Analog tokens (mirrors apps/mobile/constants/Colors.ts) ── */
:root {
  --surface: #FAF7F2;
  --surface-2: #F0EBE3;
  --surface-chat: #FFFDF9;
  --ink: #2C2825;
  --ink-2: #6B645B;
  --ink-3: #706A61;
  --accent: #C4471F;
  --accent-soft: #FCEEE9;
  --teal: #307665;
  --teal-soft: #E6F5F0;
  --line: #E2DDD6;
  --ink-on-accent: #FFFFFF;
  --shadow: 0 18px 50px -24px rgba(44, 40, 37, 0.35);
  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #1C1B1A; /* the app icon's ground */
    --surface-2: #2A2622;
    --surface-chat: #242019;
    --ink: #EDE8E0;
    --ink-2: #9B9389;
    --ink-3: #958C80;
    --accent: #F07A5C;
    --accent-soft: #3D2A22;
    --teal: #5BC4A8;
    --teal-soft: #1E3A30;
    --line: #3A3530;
    --ink-on-accent: #2C2825;
    --shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.7);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.12; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.muted { color: var(--ink-2); }
.skip {
  position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--ink-on-accent);
  padding: 8px 12px; border-radius: 8px; z-index: 10;
}
.skip:focus { left: 16px; }

/* ── Nav ── */
.nav { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 18px; }
/* The brand mark: inline SVG written into each page by design/icon/build-icon.ts
   (between <!--owey-mark:N--> markers, N = the ring's diameter in px). No tile:
   the ring takes the text colour, the arrow the accent, and the halo that cuts
   it out of the ring is painted in whatever surface the mark sits on. The
   viewBox is centred on the ring, so centring the box centres the ring. */
.mark { display: block; flex: none; --mark-ground: var(--surface); }
.mark-ring { stroke: currentColor; }
.mark-arrow { fill: var(--accent); }
.mark-halo { stroke: var(--mark-ground); }
.nav a.quiet { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 15px; }
.nav a.quiet:hover { color: var(--ink); text-decoration: underline; }

/* ── Hero ── */
.hero { padding-top: 40px; padding-bottom: 72px; display: grid; gap: 40px; align-items: center; }
@media (min-width: 860px) { .hero { grid-template-columns: 1.05fr 0.95fr; gap: 56px; padding-top: 64px; padding-bottom: 96px; } }
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px;
  background: var(--teal-soft); color: var(--teal); font-weight: 600; font-size: 13px; letter-spacing: 0.01em; margin-bottom: 22px;
  max-width: 100%; line-height: 1.35;
}
.pill > span:last-child { min-width: 0; }
.pill .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.hero h1 { font-size: clamp(40px, 6.4vw, 66px); font-weight: 800; margin-bottom: 18px; }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero .sub { font-size: clamp(18px, 2vw, 21px); color: var(--ink-2); max-width: 30em; }
.hero .stores { margin-top: 26px; color: var(--ink-3); font-size: 15px; }

/* ── Chat mock ── */
.phone {
  background: var(--surface-chat); border: 1px solid var(--line); border-radius: 28px; padding: 22px 18px 18px;
  box-shadow: var(--shadow); max-width: 400px; width: 100%; margin: 0 auto;
}
.phone .top { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 16px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.phone .top .who { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.phone .mark { --mark-ground: var(--surface-chat); }
.phone .top .time { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.thread { display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 84%; padding: 11px 14px; border-radius: 18px; font-size: 15.5px; line-height: 1.45; }
.bubble.me { align-self: flex-end; background: var(--accent); color: var(--ink-on-accent); border-bottom-right-radius: 6px; font-weight: 500; }
.bubble.owey { align-self: flex-start; background: var(--surface-2); color: var(--ink); border-bottom-left-radius: 6px; }
.bubble .amt { font-family: var(--mono); font-weight: 500; white-space: nowrap; }
.bubble .cat { color: var(--teal); font-weight: 600; }
.phone .input { margin-top: 18px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; color: var(--ink-3); font-size: 15px; background: var(--surface); }
.phone .input .send { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-on-accent); font-size: 14px; }

/* ── Sections ── */
section { padding: 56px 0; }
@media (min-width: 860px) { section { padding: 80px 0; } }
.eyebrow { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
section h2 { font-size: clamp(30px, 4vw, 42px); margin-bottom: 14px; }
.lede { color: var(--ink-2); font-size: 18px; max-width: 34em; }

.features { display: grid; gap: 18px; margin-top: 36px; }
@media (min-width: 700px) { .features { grid-template-columns: 1fr 1fr; gap: 22px; } }
.feature { background: var(--surface-chat); border: 1px solid var(--line); border-radius: 22px; padding: 26px 24px 22px; display: flex; flex-direction: column; gap: 14px; }
.feature h3 { font-size: 26px; }
.feature p { color: var(--ink-2); font-size: 16px; }
.feature .thread { margin-top: 6px; }
.feature .bubble { font-size: 14.5px; }

.split { display: grid; gap: 28px; align-items: start; }
@media (min-width: 860px) { .split { grid-template-columns: 0.9fr 1.1fr; gap: 56px; } }
.list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.list li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; color: var(--ink); font-size: 16.5px; }
.list li .tick { width: 28px; height: 28px; border-radius: 50%; background: var(--teal-soft); color: var(--teal); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; margin-top: 1px; }
.list li span.txt strong { font-weight: 600; }
.band { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ── Footer ── */
footer { padding-top: 40px; padding-bottom: 56px; color: var(--ink-2); font-size: 15px; }
footer .row { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 24px; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer a { color: var(--ink-2); text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; }
footer .made { margin-top: 18px; font-size: 14px; color: var(--ink-3); text-align: center; }

/* ── Document pages (privacy, terms, delete-account) ── */
.doc { max-width: 680px; padding-top: 28px; padding-bottom: 80px; }
.doc h1 { font-size: clamp(34px, 5vw, 46px); font-weight: 800; margin-bottom: 10px; }
.doc .updated { font-family: var(--mono); font-size: 13px; color: var(--ink-3); margin-bottom: 30px; }
.doc h2 { font-size: 24px; margin: 38px 0 10px; }
.doc p { color: var(--ink-2); margin-bottom: 14px; }
.doc ul { color: var(--ink-2); margin: 0 0 14px 22px; padding: 0; }
.doc li { margin-bottom: 8px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc .note { border-left: 3px solid var(--accent); padding: 4px 0 4px 16px; margin: 26px 0; color: var(--ink-2); }
.doc .card { background: var(--surface-chat); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; margin-bottom: 14px; }
.doc .step { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.doc code { font-family: var(--mono); font-size: 14px; background: var(--surface-2); border-radius: 6px; padding: 2px 7px; }