/*
 * One stylesheet for the whole site.
 *
 * Deliberately plain CSS and no build step. The load-bearing thing on this domain is a JSON
 * manifest (see README) — adding a framework here means a build that can break the file Plaid OAuth
 * depends on, in exchange for styling three static pages.
 *
 * Palette and type scale mirror the app's `Theme.swift`, so the website and the product look like
 * the same thing: ink #070707 on canvas #FBFBFB.
 *
 * Note on the two greys: in `Theme.swift`, `secondary` is #9C9C9C and `tertiary` is #6C6C6C —
 * tertiary is the DARKER of the two, which reads backwards but is what the app ships. This file had
 * them swapped, so every "secondary" line here was rendering in the app's tertiary grey. Corrected,
 * with `--body` added for long-form prose, which needs more contrast than either.
 */

:root {
  --ink: #070707;
  --canvas: #fbfbfb;
  --surface: #f5f5f5;
  --line: #e9e9e9;
  --secondary: #9c9c9c;
  --tertiary: #6c6c6c;
  /* Legal prose: #9C9C9C fails WCAG AA at 15px, and these pages exist to be read. */
  --body: #2b2b2b;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* The index links jump to headings; without this the sticky bar covers them. */
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

/*
 * The bar spans the viewport, but its contents align to the same column as the page body — so the
 * wordmark sits directly above the first line of text instead of 250px to its left. Without this the
 * chrome looks detached from the content on any wide screen.
 */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.bar > *,
.foot > * {
  /* Half of (column width - padding), so the two edges land on the text column. */
  max-width: none;
}

.bar-nav {
  display: flex;
  gap: 20px;
  font-size: 15px;
}

.bar-nav a {
  color: var(--tertiary);
  text-decoration: none;
  /* 44px is Apple's minimum tap target and the app enforces it too. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.bar-nav a:hover {
  color: var(--ink);
}

@media (max-width: 460px) {
  /* Three links plus a wordmark do not fit; the footer carries them anyway. */
  .bar-nav {
    display: none;
  }
}

.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  /* The wordmark is an image, so the tap target comes from the link, not the glyph. */
  min-height: 44px;
}

.wordmark img {
  display: block;
  height: 26px;
  width: auto;
}

.foot {
  position: static;
  border-bottom: none;
  border-top: 1px solid var(--line);
  margin-top: 0;
  padding: 32px 24px;
  font-size: 14px;
  color: var(--tertiary);
  flex-wrap: wrap;
  gap: 20px;
  backdrop-filter: none;
  background: var(--canvas);
  align-items: flex-start;
}

.foot-org {
  display: grid;
  gap: 2px;
}

.foot-sub {
  color: var(--secondary);
}

.foot nav {
  display: flex;
  gap: 20px;
}

.foot a {
  color: var(--tertiary);
  /* Tap targets on a phone: 44px is Apple's minimum and the app enforces it too. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ── Legal pages ─────────────────────────────────────────────────────────── */

.prose {
  /* 38rem, not 46rem: at 15px the wider measure ran to ~90 characters a line, where 65-75 is the
     comfortable range. These pages are long, so the line length is what makes them readable. */
  max-width: 38rem;
  margin: 0 auto;
  padding: 56px 24px 72px;
}

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

.prose h1 {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.prose h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 48px 0 12px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.prose h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 28px 0 8px;
}

.prose ul {
  padding-left: 22px;
}

.prose li {
  margin-bottom: 10px;
}

.meta {
  color: var(--tertiary);
  font-size: 15px;
  margin: 0 0 32px;
}

.index {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 20px 20px 40px;
  list-style: none;
  counter-reset: idx;
}

.index li {
  margin-bottom: 8px;
  counter-increment: idx;
}

.index li::before {
  content: counter(idx) ".";
  color: var(--tertiary);
  margin-right: 8px;
}

.index a {
  text-decoration: none;
}

.index a:hover {
  text-decoration: underline;
}

/* ── Landing ─────────────────────────────────────────────────────────────── */

/*
 * Full-width bands with a centred column inside, rather than one narrow column floating on a wide
 * screen. The previous version capped everything at 46rem, so on a 1280px display the three step
 * cards were 216px each and the page looked like a phone layout stranded in the middle.
 */
.band {
  border-top: 1px solid var(--line);
  padding: 72px 24px;
}

.band--alt {
  background: var(--surface);
}

.band-title,
.band > .split .split-lede h2 {
  font-size: clamp(24px, 3.5vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  /* Headings this size need tighter leading than the 1.6 the body sets. */
  line-height: 1.15;
  margin: 0 0 32px;
}

.band-title {
  max-width: 68rem;
  margin-inline: auto;
}

.hero {
  max-width: 46rem;
  margin: 0 auto;
  padding: 88px 24px 80px;
  text-align: center;
}

.mark {
  display: block;
  width: 76px;
  height: 76px;
  margin: 0 auto 30px;
  /* The icon art already sits on #FDFCFB, a hair off the page canvas, so the rounding has to be
     clipped here rather than relying on transparent corners. 22px on 76px matches the squircle
     ratio iOS applies closely enough that the two read as the same icon. */
  border-radius: 22px;
  border: 1px solid var(--line);
}

.hero h1 {
  font-size: clamp(34px, 7vw, 56px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 18px;
  /* Balances the two lines instead of leaving "out." alone on the second one. */
  text-wrap: balance;
}

.lede {
  font-size: clamp(18px, 3vw, 21px);
  color: var(--tertiary);
  /* 38ch keeps "get paid." on the same line as the clause it belongs to. */
  max-width: 38ch;
  margin: 0 auto;
  line-height: 1.5;
}

.steps {
  max-width: 68rem;
  margin: 0 auto;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  /* Cards size to their own content instead of all stretching to the tallest. */
  align-items: start;
}

.step {
  background: var(--surface);
  border: 1px solid var(--line);
  /* 20px is Theme.Radius.card. */
  border-radius: 20px;
  padding: 28px;
}

.band--alt .step {
  background: var(--canvas);
}

.step .n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--canvas);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}

.step h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 6px;
}

.step p {
  margin: 0;
  font-size: 15px;
  color: var(--tertiary);
  line-height: 1.55;
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */

.faq-wrap {
  /* Aligned to the same 68rem grid as the band above, so "Questions" sits on the same left
     edge as "How it works" — but the rows inside are capped, because 68rem of answer text is
     unreadable. */
  max-width: 68rem;
  margin: 0 auto;
}

.faq,
.faq-group {
  max-width: 46rem;
}

.faq-group {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--secondary);
  margin: 40px 0 4px;
}

.faq-group:first-of-type {
  margin-top: 0;
}

.faq {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  /* The default marker sits badly against a custom chevron, and Safari needs both of these. */
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  /* 44px minimum tap target, as everywhere else. */
  min-height: 44px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  /* A chevron drawn from two borders, so there is no icon font and no SVG to load. */
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 1.5px solid var(--secondary);
  border-bottom: 1.5px solid var(--secondary);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
}

.faq[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.faq summary:hover {
  color: var(--tertiary);
}

.faq p {
  margin: 0 0 20px;
  padding-right: 28px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tertiary);
  max-width: 40rem;
}

.faq a {
  color: var(--tertiary);
}

@media (prefers-reduced-motion: reduce) {
  .faq summary::after {
    transition: none;
  }
}

@media (max-width: 520px) {
  .prose {
    padding-top: 32px;
  }
  .hero {
    padding: 56px 24px 56px;
  }
  .band {
    padding: 56px 24px;
  }
  .faq summary {
    font-size: 16px;
  }
}