/* Yuwi — Slate & Mint, on the web.
 *
 * The same palette as the apps: one dark neutral ground, a single mint accent
 * for Agent, and cream held back for Yuwi. Token names match the app's so a
 * colour changed in one place can be found in the other.
 *
 * This file is published, so it says nothing about where anything lives.
 *
 * Only what actually repeats across pages lives here. The phone mockups keep
 * their inline styles: each is a one-off drawing, and pulling them apart into
 * classes would buy nothing and let the two drift.
 */

:root {
  /* Ground */
  --ink: #101216;
  --deep: #0E1014;
  --page: #131519;
  --surface: #171A20;
  --raised: #1F242C;
  --bubble: #242932;

  /* Lines */
  --hairline: #1C2026;
  --hairline-strong: #23272F;
  --border: #2A303A;
  --border-bright: #333A46;
  --border-hover: #4A505A;

  /* Text, brightest to faintest */
  --text-bright: #EFF1F5;
  --text: #E8EAEE;
  --text-body: #D5D9E0;
  --text-secondary: #C2C8D1;
  --text-muted: #8B929E;
  --text-dim: #6C7280;
  --text-faint: #5A606B;

  /* Mint — Agent's colour */
  --accent: #7FE0C4;
  --accent-lo: #B4EFDF;
  --accent-deep: #3FA98C;
  --accent-hi: #A9F0DC;
  --accent-surface: #152B26;
  --accent-border: #24564A;
  --accent-track: #243830;
  --on-accent: #0B231D;

  /* Cream — Yuwi's colour. Deliberately scarce. */
  --cream: #E9E7D8;
  --cream-hi: #F4F2E6;
  --cream-lo: #D9D6C2;
  --cream-dim: #A5A497;
  --cream-surface: #1A1A15;
  --cream-border: #4E4E3C;
  --on-cream: #14140E;

  --danger: #F2777A;
  --danger-surface: #3A1E20;
  --danger-border: #6B3034;

  --sans: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

html, body { margin: 0; padding: 0; overflow-x: hidden; }

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-lo); }

*:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ── Layout ─────────────────────────────────────────────────────────── */

.yw-wrap { max-width: 1120px; margin: 0 auto; padding: 0 52px; box-sizing: border-box; }
.yw-h1 { font-size: 60px; }
.yw-h2 { font-size: 34px; }
.yw-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 56px;
  align-items: center;
}
.yw-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1px; }
.yw-rail { display: flex; gap: 26px; align-items: flex-start; }
.yw-cmp-hide { display: inline; }

/* Wide content scrolls inside its own box. `min-width: 0` is the load-bearing
 * half: a flex/grid child defaults to `min-width: auto`, which lets it grow to
 * its content instead of scrolling — so `overflow-x: auto` alone does nothing
 * here and the table pushes the page sideways.
 */
.yw-tablewrap { overflow-x: auto; min-width: 0; max-width: 100%; -webkit-overflow-scrolling: touch; }

/* The Agent-vs-Yuwi comparison, shared by both pages.
 *
 * ⚠️ Here rather than in either page's own `<style>`, and not only to avoid the
 * duplication: a page-level block loads AFTER this file, so an identical
 * selector there beats the mobile override below. That is exactly how
 * `min-width: 560px` survived being reset to 0 and kept the table 560px wide
 * inside a 390px phone. Same trap as the nav; same rule — shared component,
 * shared file. */
.yw-cmp { width: 100%; border-collapse: collapse; font-family: var(--sans); min-width: 560px; }
.yw-cmp td { border-bottom: 1px solid var(--hairline); }
.yw-cmp .lbl { padding: 15px 14px 15px 0; font: 400 14.5px/1.5 var(--sans); color: var(--text-secondary); }
.yw-cmp .a { padding: 15px 14px; }
.yw-cmp .b { padding: 15px 0 15px 14px; }

/* ── Buttons ────────────────────────────────────────────────────────────
 * The design carried `style-hover="…"` attributes. Nothing renders them —
 * the canvas runtime has no hover handling at all — so they are real CSS
 * here, which is what they were describing anyway.
 */

.btn { display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box; transition: background .16s, border-color .16s, color .16s; }

.btn-cream { background: var(--cream); color: var(--on-cream); }
.btn-cream:hover { background: var(--cream-hi); color: var(--on-cream); }

.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover { background: var(--accent-lo); color: var(--on-accent); }

.btn-ghost { border: 1px solid var(--border-bright); color: var(--text-secondary); }
.btn-ghost:hover { border-color: var(--border-hover); color: var(--text); }

/* ── Header / footer ────────────────────────────────────────────────── */

.yw-header {
  border-bottom: 1px solid var(--hairline-strong);
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(12px);
}
.yw-header .yw-wrap { height: 68px; display: flex; align-items: center; gap: 14px; }
.yw-navlinks { display: flex; align-items: center; gap: 26px; font: 400 13.5px/1 var(--sans); }
.yw-navlinks a { color: var(--text-muted); }
.yw-navlinks a:hover { color: var(--text); }

.yw-mark {
  width: 28px; height: 28px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.yw-mark-cream { background: linear-gradient(135deg, #EFEDE0, #B8B49C); color: var(--on-cream); }
.yw-mark-accent { background: linear-gradient(135deg, var(--accent-hi), var(--accent-deep)); color: var(--on-accent); }

.yw-footer { border-top: 1px solid var(--hairline-strong); }
.yw-footer .yw-wrap { padding-top: 36px; padding-bottom: 44px; display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.yw-footlinks { display: flex; flex-wrap: wrap; gap: 24px; font: 400 13px/1 var(--sans); }
.yw-footlinks a { color: var(--text-muted); }
.yw-footlinks a:hover { color: var(--text); }

/* ── Small parts ────────────────────────────────────────────────────── */

/* The vertical rhythm between sections. One value, so tightening it for
 * phones is one edit rather than twelve inline styles. */
.yw-sec { padding-top: 72px; padding-bottom: 72px; }
.yw-sec-hero { padding-top: 78px; padding-bottom: 78px; }

.yw-eyebrow { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; color: var(--text-dim); }

.yw-chip {
  height: 26px; padding: 0 11px; border-radius: 13px;
  display: inline-flex; align-items: center;
  font: 500 10.5px/1 var(--mono); letter-spacing: .12em;
  border: 1px solid var(--border); color: var(--text-muted);
}
.yw-chip-cream { border-color: var(--cream-border); background: var(--cream-surface); color: var(--cream-lo); }
.yw-chip-accent { border-color: var(--accent-border); background: var(--accent-surface); color: var(--accent); }

.yw-lead { margin: 0; font: 400 15.5px/1.65 var(--sans); color: var(--text-muted); text-wrap: pretty; }
.yw-serif { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.2; color: var(--text-bright); text-wrap: pretty; }

/* ── Waitlist (shared by the iPhone notify box) ─────────────────────── */

/* ── Policy / terms pages ───────────────────────────────────────────── */

.yw-doc {
  max-width: 760px; margin: 0 auto;
  padding: 56px 24px 96px;
  font: 400 16px/1.7 var(--sans);
  color: var(--text-body);
}
.yw-doc h1 {
  margin: 0 0 6px; font-family: var(--serif); font-weight: 400;
  font-size: 42px; line-height: 1.15; color: var(--text-bright);
}
.yw-doc h2 {
  margin: 48px 0 14px; font-family: var(--serif); font-weight: 400;
  font-size: 25px; line-height: 1.25; color: var(--text-bright);
}
.yw-doc h3 { margin: 32px 0 10px; font: 600 16px/1.4 var(--sans); color: var(--text); }
.yw-doc p { margin: 0 0 16px; text-wrap: pretty; }
.yw-doc strong { color: var(--text); font-weight: 600; }
.yw-doc ul, .yw-doc ol { margin: 0 0 16px; padding-left: 22px; }
.yw-doc li { margin-bottom: 9px; }
.yw-doc hr { border: 0; border-top: 1px solid var(--hairline-strong); margin: 40px 0; }
.yw-doc code {
  font: 400 13.5px/1.5 var(--mono);
  background: var(--surface); border: 1px solid var(--hairline-strong);
  border-radius: 5px; padding: 1px 5px; color: var(--text-secondary);
}
.yw-doc blockquote {
  margin: 0 0 20px; padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-left: 2px solid var(--cream-lo);
  border-radius: 0 12px 12px 0;
  color: var(--text-secondary);
}
.yw-doc blockquote p:last-child { margin-bottom: 0; }

.yw-doc .yw-tablewrap { margin: 0 0 20px; }
.yw-doc table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; }
.yw-doc th {
  text-align: left; padding: 0 14px 12px 0;
  font: 500 10.5px/1.4 var(--mono); letter-spacing: .1em;
  color: var(--text-dim); text-transform: uppercase;
  border-bottom: 1px solid var(--hairline-strong);
}
.yw-doc td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }

.yw-docnav {
  border-bottom: 1px solid var(--hairline-strong);
  background: rgba(16, 18, 22, .92);
  position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px);
}
.yw-docnav .yw-wrap { height: 60px; display: flex; align-items: center; gap: 12px; }
.yw-docnav a { color: var(--text-muted); font: 400 13.5px/1 var(--sans); }
.yw-docnav a:hover { color: var(--text); }

/* ── Responsive ─────────────────────────────────────────────────────────
 * Deliberately last in the file. These rules have the same specificity as the
 * base ones they override, so ordering is the only thing that decides which
 * wins — and when this block sat higher up, `.yw-navlinks { display: flex }`
 * further down silently re-showed the desktop nav on phones. Nothing looked
 * broken, because `overflow-x: hidden` on the body was quietly cropping the
 * result. Keep new base rules ABOVE this line.
 */

@media (max-width: 900px) {
  .yw-wrap { padding: 0 24px; }
  .yw-h1 { font-size: 38px; }
  .yw-h2 { font-size: 27px; }
  .yw-two { gap: 36px; }
  .yw-rail { flex-direction: column; align-items: center; gap: 32px; }
  .yw-navlinks { display: none; }
}

@media (max-width: 640px) {
  .yw-doc { padding: 36px 22px 72px; font-size: 15.5px; }
  .yw-doc h1 { font-size: 31px; }
  .yw-doc h2 { font-size: 21px; }
  /* 72px of air between sections is generous on a desktop and about a fifth
     of the viewport on a phone, repeated six times down the page. */
  .yw-sec { padding-top: 52px; padding-bottom: 52px; }
  .yw-sec-hero { padding-top: 56px; padding-bottom: 56px; }
}

@media (max-width: 560px) { .yw-cmp-hide { display: none; } }

/* ── Tables become lists on a phone ──────────────────────────────────────
 * A three-column table cannot fit 390px, and `overflow-x: auto` on its wrapper
 * is a worse answer than it sounds: mobile scrollbars are invisible until you
 * are already dragging, so what a reader actually sees is a sentence cut off at
 * the right edge with nothing to suggest it moves. "The text doesn't fit and
 * there's no way to scroll" is the correct reading of that.
 *
 * So each row becomes a small block instead. The column header can't come with
 * it — `<thead>` is gone — so it rides along on each cell as `data-col` /
 * `data-label` and is printed back by `::before`. Comparison cells are written
 * in at build time; policy cells by build_policies.py, off the table's own
 * header row, so a renamed column cannot go stale.
 */
@media (max-width: 640px) {
  .yw-cmp,
  .yw-cmp tbody,
  .yw-cmp tr { display: block; min-width: 0; width: 100%; }
  .yw-cmp thead { display: none; }
  .yw-cmp tr { padding: 14px 0; border-bottom: 1px solid var(--hairline); }
  .yw-cmp tr:last-child { border-bottom: 0; }
  .yw-cmp td,
  .yw-cmp .lbl,
  .yw-cmp .a,
  .yw-cmp .b { display: block; padding: 0; border: 0; }
  .yw-cmp .lbl { font: 500 14.5px/1.45 var(--sans); color: var(--text); margin-bottom: 9px; }
  .yw-cmp .a,
  .yw-cmp .b { display: flex; align-items: center; gap: 9px; padding: 3px 0 3px 2px; }
  .yw-cmp .a::before,
  .yw-cmp .b::before {
    content: attr(data-col);
    flex: none;
    min-width: 88px;
    font: 500 10px/1.4 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-dim);
  }

  .yw-doc .yw-tablewrap { overflow-x: visible; }
  .yw-doc table,
  .yw-doc tbody,
  .yw-doc tr { display: block; min-width: 0; width: 100%; }
  .yw-doc thead { display: none; }
  .yw-doc tr {
    padding: 14px 0;
    border-bottom: 1px solid var(--hairline);
  }
  .yw-doc tr:last-child { border-bottom: 0; }
  .yw-doc td {
    display: block;
    padding: 0 0 8px;
    border: 0;
    font-size: 14.5px;
  }
  .yw-doc td:last-child { padding-bottom: 0; }
  .yw-doc td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font: 500 10px/1.4 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  /* A cell whose header the generator could not read prints nothing rather
     than an empty label block. */
  .yw-doc td:not([data-label])::before { content: none; }
}

/* Touch targets.
 *
 * The small text links — footers, the document nav, the "→" links in the
 * comparison tables — are 13–17px tall, which is fine to click and genuinely
 * hard to tap. 44px is the documented minimum on both platforms.
 *
 * Two conditions, OR'd. `pointer: coarse` is the honest one — what matters is
 * the finger, not the screen — but it cannot be exercised in a desktop browser,
 * and a rule nobody can watch work is a rule nobody knows is broken. The width
 * clause is the half that can be measured, and it covers every phone. Keep both:
 * dropping the width makes this unverifiable, dropping the pointer clause loses
 * touch laptops.
 */
@media (max-width: 900px), (pointer: coarse) {
  .yw-footlinks a,
  .yw-docnav a,
  .yw-links a,
  .yw-navlinks a,
  .yw-cmp a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* The brand links and the header button. Written with an ancestor in the
     selector on purpose: both pages define `.yw-cta-sm` in their own `<style>`,
     which loads after this file, so a bare `.yw-cta-sm` here would lose on
     source order. Specificity does not care about order. */
  .yw-header .yw-wrap > a,
  .yw-footer .yw-wrap > a,
  .yw-docnav .yw-wrap > a { min-height: 44px; }
  .yw-header .yw-cta-sm { height: 44px; border-radius: 22px; }
}