/* Hohm — the two pages Stripe sends a landlord to, and the front door.
 *
 * Palette lifted from apps/mobile/tailwind.config.js. NOT generated: this is a
 * static site with no build step, so the four values below are transcribed and
 * will go stale if the tokens move. They are the page ground and the prose
 * colour only — deliberately the two least likely tokens to change, and nothing
 * here is close enough to a product surface for a drift to mislead anyone.
 *
 * DESIGN_SYSTEM.md's rule that colour never carries meaning on its own holds
 * here too: every state below is a sentence first. */
:root {
  --canvas: #FBF1E2;   /* page */
  --card:   #F5EAD9;   /* raised */
  --ink:    #423B33;   /* prose — 9.86 on canvas */
  --quiet:  #5A5148;   /* metadata — 6.94 on canvas */
  --mint:   #CEDCC9;   /* the plate; unchanged in dark by design */
  --deep:   #2E3C2D;   /* marks on the plate — 8.17 */
  --line:   rgba(66, 59, 51, .14);
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #2A2722;
    --card:   #34302A;
    --ink:    #F0E7D6;  /* 12.12 on night */
    --quiet:  #BDB3A2;  /* 7.18 */
    --line:   rgba(240, 231, 214, .14);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--canvas);
  color: var(--ink);
  font: 16px/1.55 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex; align-items: center; justify-content: center;
  min-height: 100svh; padding: 24px;
}
main { width: 100%; max-width: 30rem; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 24px;
}
.mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--mint); color: var(--deep);
  font-weight: 700; font-size: 19px; letter-spacing: -.02em;
  margin-bottom: 18px;
}
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 10px; letter-spacing: -.015em; }
p  { margin: 0 0 14px; color: var(--quiet); }
p.lead { color: var(--ink); }
p:last-child { margin-bottom: 0; }
.sep { height: 1px; background: var(--line); margin: 22px 0 18px; border: 0; }
.small { font-size: .875rem; }
a { color: var(--ink); text-underline-offset: 3px; }