/* Sticky notes: a planning wall on graph paper. Playbooks are pastel notes pinned to the grid, marker blue for ink, highlighter yellow for emphasis. Friendly, hands-on, made for owners who plan on paper. */
:root {
  --paper: #ffffff;
  --grid: #e3eaf6;
  --sheet: #ffffff;
  --ink: #1d2433;
  --ink-2: #2a5bd7;
  --muted: #566074;
  --rule: #d5dcea;
  --chip: #eef3ff;
  --accent: #ffe15a;
  --on-accent: #1d2433;
  --panel: #2a5bd7;
  --on-panel: #ffffff;
  --note-ink: #1d2433;
  --note-y: #fff1a8;
  --note-g: #c8f0d8;
  --note-p: #ffd7e2;
  --note-b: #d6e5ff;
  --note-shadow: rgba(29, 36, 51, 0.22);
  --display: "Fredoka", "Trebuchet MS", sans-serif;
  --body: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --hand: "Caveat", "Comic Sans MS", cursive;
  --logo-back: #c8f0d8;
  --logo-front: #ffe98a;
  --logo-fold: #f2cf4a;
  --logo-ink: #2a5bd7;
  --on-ink-2: #ffffff;
  --note-link: #2a5bd7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #131a28; --grid: #1e2738; --sheet: #182133; --ink: #eef2fa; --ink-2: #8fb0ff; --muted: #a3adc2;
    --rule: #2b3549; --chip: #1f2a40; --panel: #2a4fb8; --note-shadow: rgba(0, 0, 0, 0.5); --on-ink-2: #131a28; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #131a28; --grid: #1e2738; --sheet: #182133; --ink: #eef2fa; --ink-2: #8fb0ff; --muted: #a3adc2;
  --rule: #2b3549; --chip: #1f2a40; --panel: #2a4fb8; --note-shadow: rgba(0, 0, 0, 0.5); --on-ink-2: #131a28; color-scheme: dark;
}

body {
  background-color: var(--paper);
}
h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; }
.eyebrow { font: 700 1.45rem/1.1 var(--hand); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.logo { flex: 0 0 auto; }
.brand b { font-weight: 700; }
nav.top a.pill { background: var(--ink-2); color: var(--on-ink-2); }

.hero h1 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.02; }
.hero h1 mark { background: none; color: var(--ink-2); padding: 0; }
.btn { border-radius: 12px; }
.btn.accent { box-shadow: 0 3px 0 var(--note-ink); }
.signup input { border-radius: 12px; border-width: 2px; }

.today { background: var(--note-y); color: var(--note-ink); border-radius: 3px; transform: rotate(1.2deg); box-shadow: 0 22px 30px -18px var(--note-shadow); position: relative; }
.today::before { content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; margin-left: -55px; background: rgba(255, 255, 255, 0.55); transform: rotate(-3deg); }
.today .top span:first-child { color: var(--note-link); }
.today .top { font-family: var(--hand); font-size: 1.15rem; text-transform: none; letter-spacing: 0; }
.today .snip { background: rgba(255, 255, 255, 0.6); border: 1.5px dashed rgba(29, 36, 51, 0.35); color: var(--note-ink); }
.today .btn.accent { background: var(--note-ink); color: #ffffff; box-shadow: none; }

.log { background: transparent; border: 0; }
.log .cell { border-radius: 4px; }
.log .cell.on { background: var(--note-g); border-color: var(--note-ink); color: var(--note-ink); }

.chip { border-radius: 10px; border-width: 2px; }
.chip[aria-current="page"] { background: var(--ink-2); border-color: var(--ink-2); color: var(--on-ink-2); }
.search input { border-radius: 12px; border-width: 2px; }
.grid-cards { gap: 22px; }
.card { border: 0; border-radius: 3px; color: var(--note-ink); background: var(--note-y); box-shadow: 0 14px 22px -16px var(--note-shadow); transform: rotate(-0.7deg); }
.card:nth-child(4n + 2) { background: var(--note-g); transform: rotate(0.8deg); }
.card:nth-child(4n + 3) { background: var(--note-p); transform: rotate(-0.4deg); }
.card:nth-child(4n + 4) { background: var(--note-b); transform: rotate(0.6deg); }
.card:hover { transform: rotate(0deg) translateY(-3px); }
.card p, .card .meta { color: rgba(29, 36, 51, 0.78); }
.card .tags span { background: rgba(255, 255, 255, 0.65); }

.how { background: var(--panel); }
.how li { border-top: 3px solid var(--accent); }
.how li .mono { font-family: var(--hand); font-size: 1.6rem; color: var(--accent); }
.band { border-radius: 4px; transform: rotate(-0.5deg); box-shadow: 0 18px 26px -18px var(--note-shadow); }
.sponsor-tease { border: 2px dashed var(--ink-2); border-radius: 12px; background: var(--sheet); }
.tier { border-radius: 10px; }

.prompt { border-radius: 6px; }
.risk { background: var(--note-p); color: var(--note-ink); border: 0; border-radius: 3px; }
.risk:nth-child(even) { background: var(--note-g); }
.side { border-radius: 8px; }
.side.sub { background: var(--note-y); border-radius: 3px; transform: rotate(0.8deg); }
.strip { border-block: 2px solid var(--ink-2); }
ol.steps li::before { font-family: var(--hand); font-size: 1.4rem; color: var(--ink-2); }
footer.site { background: var(--paper); }
@media (prefers-reduced-motion: reduce) { .card, .today, .band, .side.sub { transform: none !important; } }