/* Due Together site: the app's fridge-door palette, plain and readable.
   Hand-written; no build step. Amplify publishes this folder as-is. */

:root {
  --paper: #fbfaf5;
  --card: #ffffff;
  --ink: #1a1d24;
  --muted: #5b606c;
  --rule: #d9d6cc;
  --note: #ffd84a;
  --note-ink: #1a1d24;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141519;
    --card: #1e2026;
    --ink: #eceef3;
    --muted: #a3a8b4;
    --rule: #33363f;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 16px 64px;
}

h1 { font-size: 34px; line-height: 1.15; margin: 8px 0 12px; }
h2 { font-size: 22px; margin: 36px 0 8px; }
h3 { font-size: 17px; margin: 24px 0 4px; }
p, li { margin: 8px 0; }
ul { padding-left: 22px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.muted { color: var(--muted); }

.note {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: var(--note);
  color: var(--note-ink);
  font-size: 36px;
  font-weight: 700;
}

.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  border-radius: 12px;
  padding: 12px 20px;
  font-weight: 600;
  text-decoration: none;
}
/* Not a link yet: the app isn't on the App Store. */
.btn-soon {
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--muted);
}

.lead { font-size: 20px; color: var(--muted); margin: 0 0 24px; }

.points { list-style: none; padding: 0; margin: 24px 0; }
.points li {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 10px 0;
}
.points strong { display: block; }

footer {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 15px;
}
footer a { margin-right: 16px; }