/* ─────────────────────────────────────────────────────────────────────────
   Even — website styles.

   Two registers live in this file.

   1. THE LEGAL PAGES (privacy, terms, delete-account) reproduce the geometry
      of the reference site exactly: a 768px column, 24/32px gutters, 64/96px
      vertical padding, a 48px bold H1 over a 2px rule, and 17px body at 1.8
      line-height in a warm grey. Every number below is that spec, written out
      rather than generated, so there is no build step and no Tailwind.
   2. THE LANDING PAGE uses Even's own palette and display face — ink on warm
      paper — because it is the only page that has to sound like the app.

   The greys are the reference site's neutral ramp. The accent is Even's, and
   it is the one place the two registers meet: links are the app's violet
   rather than a generic blue, so the legal pages still belong to this app.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Neutral ramp — structure, rules, body copy. */
  --g-900: #111827;
  --g-800: #1f2937;
  --g-700: #374151;
  --g-600: #4b5563;
  --g-500: #6b7280;
  --g-300: #d1d5db;
  --g-200: #e5e7eb;
  --g-100: #f3f4f6;
  --g-50:  #f9fafb;
  --white: #ffffff;

  /* Even's palette — see Fair/src/theme/palette.ts. */
  --paper:        #FBF9F6;
  --paper-alt:    #F5F2ED;
  --ink:          #272320;
  --ink-muted:    #5A534A;
  --ink-soft:     #6B645D;
  --hairline:     #E9E3DA;
  --accent:       #5C4C98;
  --accent-deep:  #493A7D;
  --accent-tint:  #E7E5FA;
  --sprig:        #8A8C6A;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --hand: "Shantell Sans", var(--sans);
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--white);
  color: var(--g-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* Nothing may widen the page; a phone that scrolls sideways reads as broken. */
html, body { overflow-x: clip; }
h1, h2, h3 { overflow-wrap: break-word; }

a { color: inherit; }

/* Keyboard focus must stay visible everywhere. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Skip link ─────────────────────────────────────────────────────────── */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  z-index: 100;
  text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

/* ── Nav ───────────────────────────────────────────────────────────────── */

.nav {
  width: 100%;
  padding: 16px 24px;
  border-bottom: 1px solid var(--g-100);
  background: var(--white);
}

.nav-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wordmark {
  font-family: var(--display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--g-900);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
/* The dot is the app's accent — the one mark of colour in the chrome. */
.wordmark::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  display: inline-block;
  margin-left: 1px;
}

.nav-links {
  display: none;
  align-items: center;
  gap: 32px;
}
.nav-links a {
  color: var(--g-700);
  text-decoration: none;
  font-size: 14px;
  transition: color .15s ease;
}
.nav-links a:hover { color: var(--g-900); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s ease;
  white-space: nowrap;
}
.nav-cta:hover { background: #3a342d; }

@media (min-width: 768px) {
  .nav { padding: 16px 48px; }
  .nav-links { display: flex; }
}

/* ── The legal-page column ─────────────────────────────────────────────── */

.page   { min-height: 100vh; background: var(--white); }
.legal  { max-width: 768px; margin: 0 auto; padding: 64px 24px; }

@media (min-width: 1024px) {
  .legal { padding: 96px 32px; }
}

/* Headings. Fraunces carries them; the scale and rhythm are the reference's. */
.legal h1, .legal h2, .legal h3, .legal h4 {
  font-family: var(--display);
  line-height: 1.15;
  color: var(--g-900);
}

.legal h1 {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 32px;
  padding-bottom: 32px;
  border-bottom: 2px solid var(--g-100);
}

.legal h2 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 80px 0 32px;
}

.legal h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--g-800);
  margin: 64px 0 24px;
}

.legal h4 {
  font-size: 20px;
  font-weight: 500;
  color: var(--g-700);
  margin: 48px 0 16px;
}

.legal p,
.legal li {
  font-size: 17px;
  line-height: 1.8;
  color: var(--g-600);
}

.legal p  { margin: 0 0 24px; }
.legal ul,
.legal ol { margin: 0 0 40px; padding-left: 32px; }
.legal li { margin-bottom: 16px; }
.legal li > p { margin-bottom: 8px; }
.legal li:last-child { margin-bottom: 0; }

.legal strong { color: var(--g-900); font-weight: 600; }

.legal a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color .15s ease;
}
.legal a:hover { color: var(--accent-deep); }

/* The "Last updated" line: the first paragraph after the H1. */
.legal .updated {
  font-size: 16px;
  font-weight: 500;
  color: var(--g-500);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-bottom: 48px;
}

/* Adjacency rules — a heading that follows prose sits closer than one that
   opens a section, exactly as the reference page does it. */
.legal p  + h2, .legal ul + h2, .legal ol + h2 { margin-top: 64px; }
.legal p  + h3, .legal ul + h3, .legal ol + h3 { margin-top: 48px; }
.legal p  + h4, .legal ul + h4, .legal ol + h4 { margin-top: 40px; }
.legal ul + p,  .legal ol + p                  { margin-top: 32px; }
.legal p  + ul, .legal p  + ol                 { margin-top: 16px; }
.legal h1 + .updated { margin-top: 0; }

/* A pulled-out note — used where the policy says something a reader should
   not skim past, e.g. what a partner can see. */
.legal .note {
  border-left: 3px solid var(--accent);
  background: var(--accent-tint);
  padding: 20px 24px;
  margin: 0 0 32px;
  border-radius: 0 8px 8px 0;
}
.legal .note p { margin: 0; color: var(--g-700); }
.legal .note p + p { margin-top: 16px; }

/* Definition tables inside the policy. */
.legal .table-wrap { overflow-x: auto; margin: 0 0 40px; }
.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  min-width: 480px;
}
.legal th, .legal td {
  text-align: left;
  vertical-align: top;
  padding: 14px 16px;
  border-bottom: 1px solid var(--g-200);
  line-height: 1.7;
  color: var(--g-600);
}
.legal th {
  color: var(--g-900);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--g-200);
}

/* ── Buttons (support / delete-account / download) ─────────────────────── */

.btn-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 420px;
  margin: 0 auto;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 16px 32px;
  font-size: 17px;
  font-weight: 600;
  border-radius: 12px;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.btn-primary {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 8px 20px -8px rgba(92, 76, 152, .55);
}
.btn-primary:hover { background: var(--accent-deep); }

.btn-secondary {
  color: var(--g-700);
  background: var(--white);
  border: 2px solid var(--g-300);
}
.btn-secondary:hover { background: var(--g-50); border-color: #9ca3af; }

.centered { text-align: center; }
.centered h1 { border-bottom: 0; padding-bottom: 0; margin-bottom: 32px; }
.centered .lead {
  font-size: 20px;
  line-height: 1.7;
  color: var(--g-600);
  max-width: 620px;
  margin: 0 auto 48px;
}

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

.footer {
  border-top: 1px solid var(--g-200);
  padding: 48px 24px;
  background: var(--white);
}

.footer-inner { max-width: 1280px; margin: 0 auto; }

.footer-top {
  display: grid;
  gap: 40px;
}

.footer-brand .wordmark { font-size: 24px; }
.footer-tagline {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--g-600);
  max-width: 320px;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.footer-cols h3 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--g-900);
  margin: 0 0 16px;
}

.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { margin-bottom: 8px; }
.footer-cols a {
  color: var(--g-600);
  font-size: 14px;
  text-decoration: none;
  transition: color .15s ease;
}
.footer-cols a:hover { color: var(--g-900); }

.footer-bottom {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--g-200);
}
.footer-bottom p {
  text-align: center;
  font-size: 14px;
  color: var(--g-500);
  margin: 0;
}

@media (min-width: 768px) {
  .footer { padding: 64px 48px; }
  .footer-top { grid-template-columns: 1fr auto; gap: 64px; align-items: start; }
  .footer-cols { grid-template-columns: repeat(3, minmax(140px, auto)); gap: 48px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   THE LANDING PAGE — Even's own register: ink on warm paper.
   ───────────────────────────────────────────────────────────────────────── */

.home { background: var(--paper); color: var(--ink); }
.home .nav { background: var(--paper); border-bottom-color: var(--hairline); }
.home .footer { background: var(--paper); border-top-color: var(--hairline); }
.home .footer-bottom { border-top-color: var(--hairline); }
.home .footer-cols a { color: var(--ink-soft); }
.home .footer-cols a:hover { color: var(--ink); }
.home .footer-cols h3 { color: var(--ink); }
.home .footer-tagline { color: var(--ink-muted); }
.home .footer-bottom p { color: var(--ink-soft); }
.home .nav-links a { color: var(--ink-muted); }
.home .nav-links a:hover { color: var(--ink); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* Hero */
.hero { padding: 64px 0 72px; }
.hero-grid { display: grid; gap: 48px; align-items: center; }

.eyebrow {
  display: inline-block;
  font-family: var(--hand);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-tint);
  border-radius: 999px;
  padding: 7px 16px;
  margin: 0 0 28px;
}

.hero h1 {
  font-family: var(--display);
  font-size: clamp(40px, 7vw, 62px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 24px;
}
.hero h1 em {
  font-style: italic;
  color: var(--accent);
}

.hero-sub {
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0 0 36px;
  max-width: 30em;
}

.hero-art { justify-self: center; width: 100%; max-width: 460px; }

/* The hero art is a screenshot panel, not a line drawing: it carries its own
   lilac ground, a shade off --accent-tint, and the phones bleed off its bottom
   edge. Rounding it is what stops it reading as a screenshot dropped onto the
   page rather than a deliberate panel. */
.hero-art img {
  display: block;
  width: 100%;
  border-radius: 20px;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: #fff;
  padding: 12px 22px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: background .18s ease;
}
.store-badge:hover { background: #3a342d; }
.store-badge svg { flex: none; }

.cta-note {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 16px 0 0;
}

@media (min-width: 900px) {
  .hero { padding: 88px 0 104px; }
  .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 64px; }
}

/* Section scaffolding */
.section { padding: 72px 0; border-top: 1px solid var(--hairline); }

.section-head { max-width: 620px; margin: 0 0 48px; }
.section-head h2 {
  font-family: var(--display);
  font-size: clamp(30px, 4.4vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 16px;
}
.section-head p {
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink-muted);
  margin: 0;
}

/* The two-roles explainer */
.roles { display: grid; gap: 24px; }
.role {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 32px;
}
.role h3 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--ink);
}
.role p { font-size: 16px; line-height: 1.75; color: var(--ink-muted); margin: 0; }
.role .tag {
  display: inline-block;
  font-family: var(--hand);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sprig);
  margin: 0 0 14px;
}
.role.is-accent .tag { color: var(--accent); }

@media (min-width: 768px) { .roles { grid-template-columns: 1fr 1fr; gap: 32px; } }

/* Feature list */
.features { display: grid; gap: 40px; }
.feature h3 {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
}
.feature p { font-size: 16px; line-height: 1.75; color: var(--ink-muted); margin: 0; }
.feature .rule {
  width: 28px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  margin: 0 0 18px;
}

@media (min-width: 700px)  { .features { grid-template-columns: 1fr 1fr; gap: 40px 48px; } }
@media (min-width: 1000px) { .features { grid-template-columns: repeat(3, 1fr); } }

/* Split feature block with art */
.split { display: grid; gap: 40px; align-items: center; }
.split-art { justify-self: center; width: 100%; max-width: 420px; }
.split-art img { width: 100%; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 72px; }
  .split.reverse .split-art { order: -1; }
}

/* FAQ */
.faq { border-top: 1px solid var(--hairline); }
.faq details {
  border-bottom: 1px solid var(--hairline);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 4px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  transition: color .15s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq .answer {
  padding: 0 4px 26px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-muted);
  margin: 0;
  max-width: 62ch;
}

/* Closing call to action */
.closing {
  text-align: center;
  padding: 88px 0 96px;
  border-top: 1px solid var(--hairline);
}
.closing h2 {
  font-family: var(--display);
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 16px;
}
.closing p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-muted);
  max-width: 34em;
  margin: 0 auto 32px;
}
.closing .cta-row { justify-content: center; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}