/* ==========================================================================
   orbitmemo.com — the public site.

   The app's tokens (CLAUDE.md), in a stylesheet of its own because this site shares no build with the app:
   every stylesheet there is content-hashed and lives in another bucket. Same palette, same 8px radii, same
   1px borders, so the two do not look like different products.

   One file, no framework, no script. The CSP on this distribution is `default-src 'none'` with `style-src
   'self'`, which this is the whole of.
   ========================================================================== */

:root {
  --indigo: #5558d9;
  --ink: #1a1a21;
  --slate: #6b6b76;
  --soft: #eeeefc;
  --paper: #fafafa;
  --border: #e6e6e9;
  --r: 8px;
}

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

html {
  /* Anchored headings in the legal pages should not land under the sticky header. */
  scroll-padding-top: 80px;
}

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

/* Larger than the app's 13.5px on purpose: the app is a dense working surface, this is prose somebody
   reads once. */

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

:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

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

/* ---------- header ---------- */

header {
  border-bottom: 1px solid var(--border);
  background: #fff;
  position: sticky;
  top: 0;
}

header .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}

.brand img {
  width: 28px;
  height: 28px;
  display: block;
}

.brand .orbit {
  color: var(--indigo);
}

nav {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
}

nav a {
  color: var(--slate);
  text-decoration: none;
}

nav a:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* ---------- hero ---------- */

.hero {
  padding: 72px 0 56px;
  text-align: center;
}

h1 {
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 650;
}

.tagline {
  color: var(--slate);
  font-size: 17px;
  margin-top: 14px;
}

.btn {
  display: inline-block;
  margin-top: 28px;
  background: var(--indigo);
  color: #fff;
  border: 1px solid var(--indigo);
  border-radius: var(--r);
  padding: 11px 22px;
  font-weight: 500;
  text-decoration: none;
}

.btn.quiet {
  background: #fff;
  color: var(--ink);
  border-color: var(--border);
}

.under {
  display: block;
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--slate);
}

/* ---------- sections ---------- */

section {
  padding: 44px 0;
  border-top: 1px solid var(--border);
}

h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--slate);
  font-weight: 600;
  margin-bottom: 20px;
}

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

p {
  margin-bottom: 14px;
}

ul {
  margin: 0 0 14px 20px;
}

li {
  margin-bottom: 7px;
}

.features {
  list-style: none;
  margin: 0;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.features li {
  margin: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px 18px;
}

.features strong {
  display: block;
  margin-bottom: 3px;
}

.features span {
  color: var(--slate);
  font-size: 14px;
}

.price {
  background: var(--soft);
  border-radius: var(--r);
  padding: 22px 24px;
  text-align: center;
}

.price .amount {
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.price .per {
  color: var(--slate);
  font-size: 15px;
}

/* ---------- legal pages ---------- */

.legal {
  padding: 44px 0 64px;
}

.legal h1 {
  font-size: 28px;
  text-align: left;
}

.legal .updated {
  color: var(--slate);
  font-size: 13.5px;
  margin: 8px 0 28px;
}

.legal h2 {
  font-size: 18px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  margin: 30px 0 8px;
}

.note {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--indigo);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-bottom: 20px;
}

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--border);
  padding: 28px 0 44px;
  color: var(--slate);
  font-size: 13.5px;
}

footer nav {
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

@media (max-width: 640px) {
  h1 {
    font-size: 30px;
  }

  .hero {
    padding: 48px 0 36px;
  }
}