/* Yello — shared styles. Tokens mirror DESIGN.md so the site and app match. */

:root {
  --bg: #0A0A0B;
  --bg-elevated: #101012;
  --surface: #141415;
  --surface-high: #1C1C1E;
  --text: #F2F2F7;
  --text-secondary: #8E8E93;
  --text-tertiary: #48484A;
  --accent: #06B6D4;
  --accent-soft: rgba(6, 182, 212, 0.13);
  --sep: rgba(255, 255, 255, 0.07);
  --success: #34D399;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;

  --measure: 68ch;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 32px; }
.narrow { max-width: var(--measure); }

/* ── Header ── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 10, 11, 0.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--sep);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 62px; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
/* The app icon itself, not an emoji standing in for it. The icon already
   carries its own mint ground and rounded corners, so the gradient tile it used
   to sit on is gone. */
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px;
  display: block;
}
.brand-name { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.nav { display: flex; gap: 22px; align-items: center; }
.nav a {
  white-space: nowrap;
  color: var(--text-secondary); text-decoration: none;
  font-size: 14px; font-weight: 600;
  transition: color .15s;
}
.nav a:hover, .nav a:focus-visible { color: var(--text); }

/* ── Type ── */
h1 {
  font-size: clamp(2.15rem, 6.4vw, 4.4rem);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.05;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.35rem, 3.4vw, 2.3rem);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
  text-wrap: balance; margin-bottom: 14px;
}
h3 {
  font-size: 1.06rem; font-weight: 700; letter-spacing: -0.01em;
  margin-bottom: 8px; color: var(--text);
}
p { color: var(--text-secondary); }
p + p { margin-top: 14px; }
a { color: var(--accent); }
strong { color: var(--text); font-weight: 650; }

.eyebrow {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.11em; color: var(--accent); margin-bottom: 14px;
}
.lede { font-size: clamp(1.06rem, 1.5vw, 1.3rem); line-height: 1.6; max-width: 46ch; }

/* ── Hero ── */
.hero { padding: clamp(72px, 9vw, 132px) 0 clamp(60px, 7vw, 104px); }
.hero .lede { margin-top: 20px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px; border-radius: var(--r-md);
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  text-decoration: none; border: 1px solid transparent;
  transition: transform .12s ease, opacity .15s ease, background .15s ease;
}
.btn:active { transform: scale(.985); }
.btn-primary { background: linear-gradient(135deg, var(--accent), #0891B2); color: #fff; }
.btn-primary:hover { opacity: .9; }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--sep); }
.btn-secondary:hover { background: var(--surface-high); }

.note { font-size: 14px; color: var(--text-tertiary); margin-top: 18px; }

/* ── Sections ── */
section { padding: 60px 0; border-top: 1px solid var(--sep); }
section:first-of-type { border-top: none; }

.grid {
  display: grid; gap: 16px; margin-top: 32px;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
.card {
  background: var(--surface);
  border: 1px solid var(--sep);
  border-radius: var(--r-lg);
  padding: 24px;
}
.card p { font-size: 15px; margin: 0; }
.card-icon {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--accent-soft);
  display: grid; place-items: center;
  margin-bottom: 14px; font-size: 18px; line-height: 1;
}

/* Steps encode a real sequence, so they are numbered. */
.steps { counter-reset: step; margin-top: 30px; display: grid; gap: 4px; }
.step {
  display: grid; grid-template-columns: 34px 1fr; gap: 16px;
  align-items: start; padding: 18px 0;
  border-bottom: 1px solid var(--sep);
}
.step:last-child { border-bottom: none; }
.step::before {
  counter-increment: step; content: counter(step);
  width: 30px; height: 30px; border-radius: 15px;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.step p { font-size: 15px; margin: 0; }

/* ── Legal / doc pages ── */
.doc { padding: 56px 0 88px; }
.doc h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin-bottom: 10px; }
.doc .updated { font-size: 14px; color: var(--text-tertiary); margin-bottom: 40px; }
.doc h2 { margin-top: 40px; font-size: 1.28rem; }
.doc h2:first-of-type { margin-top: 28px; }
.doc ul { margin: 14px 0 0 22px; color: var(--text-secondary); }
.doc li { margin-bottom: 9px; }
.doc li::marker { color: var(--text-tertiary); }

.callout {
  background: var(--surface);
  border: 1px solid var(--sep);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 18px 20px; margin: 26px 0;
}
.callout p { font-size: 15px; color: var(--text); }

table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 15px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--sep); }
th { color: var(--text); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
td { color: var(--text-secondary); vertical-align: top; }
.table-scroll { overflow-x: auto; }

/* ── Footer ── */
.site-footer {
  border-top: 1px solid var(--sep);
  padding: 40px 0 56px;
  margin-top: 20px;
}
.footer-inner { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-links a { color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 600; }
.footer-links a:hover { color: var(--text); }
.copyright { font-size: 14px; color: var(--text-tertiary); }

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

@media (max-width: 620px) {
  body { font-size: 16px; }
  .hero { padding: 60px 0 50px; }
  section { padding: 46px 0; }
  .wrap { padding: 0 20px; }
  .nav { gap: 14px; }
  .nav a { font-size: 13px; }
  .btn { width: 100%; justify-content: center; }
}

/* Conspicuousness matters for disclaimers and limitations of liability: courts
   look at whether a consumer could reasonably miss them. Capitals alone read
   badly on screen, so these are set apart by weight and a rule as well. */
.legal-caps {
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--text);
  border-left: 2px solid var(--sep);
  padding-left: 16px;
  margin: 18px 0;
}

/* The not-an-emergency-service line sits in the hero, where people decide,
   rather than only in the terms. Quiet enough not to fight the page, present
   enough that nobody can say they never saw it. */
.note-warn {
  margin-top: 10px;
  padding-left: 12px;
  border-left: 2px solid var(--sep);
  color: var(--text-tertiary);
}