/*
 * ranplan.app — shared styling.
 *
 * The palette is the app's, not a website's: the sky gradient behind, amber for
 * anything anchored to your wake time, indigo for Pro. A marketing site in
 * different colours than the product it sells reads as a different company.
 *
 * Deliberately one stylesheet and no framework. These four pages exist mostly
 * because the App Store requires a working privacy policy and support URL, and
 * a dependency graph for four static pages would be its own liability.
 */

:root {
  /* Matches the landing page, which is dark. A legal page in a different
     palette than the site it belongs to reads as someone else's page. */
  --ink: #FFFFFF;
  --ink-2: rgba(255, 255, 255, 0.72);
  --muted: rgba(255, 255, 255, 0.5);
  --faint: rgba(255, 255, 255, 0.38);
  --amber: #F0742B;
  --amber-lt: #FF9E4A;
  --indigo: #8F94FF;
  --line: rgba(255, 255, 255, 0.1);
  --page: 720px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Text",
        system-ui, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  /* The landing page's own gradient, same four stops. */
  background: linear-gradient(175deg, #0C0F1E 0%, #141833 40%, #2E2A4A 72%, #54406A 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 24px; }

/* ── header ─────────────────────────────────────────────────────────────── */

header { padding: 34px 0 0; }

.lockup {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
}
.mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(160deg, var(--amber-lt), var(--amber));
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(240, 116, 43, 0.32);
}
.wordmark { font-weight: 800; font-size: 18px; letter-spacing: -0.4px; }
.wordmark span { color: var(--amber); }

/* ── type ───────────────────────────────────────────────────────────────── */

h1 {
  font-size: clamp(34px, 7vw, 52px);
  font-weight: 250;
  letter-spacing: -1.5px;
  line-height: 1.08;
  margin: 44px 0 0;
}
h1 b { font-weight: 700; }
h1 .dot { color: var(--amber); }

.lede { font-size: 19px; color: var(--ink-2); margin: 18px 0 0; max-width: 34em; }

h2 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.4px;
  margin: 44px 0 10px;
}
h3 { font-size: 17px; font-weight: 700; margin: 28px 0 6px; }
p, li { color: var(--ink-2); }
main p:first-of-type { margin-top: 12px; }
a { color: var(--indigo); text-decoration-thickness: 1px; text-underline-offset: 2px; }
strong { color: var(--ink); font-weight: 600; }

.updated {
  font-size: 13px; color: var(--muted);
  padding-bottom: 18px; border-bottom: 1px solid var(--line);
}

/* ── landing bits ───────────────────────────────────────────────────────── */

.demo {
  margin: 40px 0 0; padding: 22px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35);
}
.demo-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.demo-row:last-child { border-bottom: 0; }
.pill {
  min-width: 46px; text-align: center;
  font: 800 11px/1 ui-monospace, Menlo, monospace;
  color: var(--amber); background: rgba(255, 152, 56, 0.14);
  border: 1px solid rgba(255, 152, 56, 0.4);
  border-radius: 12px; padding: 6px 8px;
}
.demo-row .t { flex: 1; font-size: 15px; color: var(--ink); font-weight: 500; }
.demo-row .when {
  font: 600 13px/1 ui-monospace, Menlo, monospace;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.demo-cap { font-size: 13.5px; color: var(--muted); margin: 14px 0 0; }

.features { list-style: none; padding: 0; margin: 8px 0 0; }
.features li {
  padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: 16px;
}
.features li:last-child { border-bottom: 0; }
.features b { color: var(--ink); font-weight: 600; }

/* ── footer ─────────────────────────────────────────────────────────────── */

footer {
  margin-top: 64px; padding: 26px 0 40px;
  border-top: 1px solid var(--line);
  font-size: 14px; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
}
footer a { color: var(--ink-2); text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .spacer { flex: 1; }

@media (prefers-reduced-motion: no-preference) {
  .demo-row { transition: background 160ms ease; }
}

/* Focus is visible on a dark ground too — a keyboard user must never lose the
   caret on a legal page. */
a:focus-visible { outline: 2px solid var(--amber-lt); outline-offset: 3px; border-radius: 4px; }