/* Dawn palette, matching the extension so the site and the product agree. */
:root {
  --ink: #2d3d47;
  --ink-strong: #293842;
  --muted: #6d8290;
  --accent: #526f84;
  --line: rgb(82 111 132 / 15%);
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(circle at 22% 28%, #f7dfe2 0, transparent 32%), radial-gradient(circle at 82% 74%, #b5d9e1 0, transparent 38%), linear-gradient(135deg, #e7edf2, #d5e5e6);
  background-attachment: fixed;
  color: var(--ink);
  font: 16px/1.7 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

main { width: min(100% - 40px, 660px); margin: 0 auto; padding: clamp(56px, 10vh, 104px) 0 80px; }

.brand { display: flex; align-items: center; gap: 11px; margin-bottom: 44px; color: var(--accent); font-size: 11px; font-weight: 760; letter-spacing: .22em; text-decoration: none; }
.brand svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

h1 { margin: 0 0 10px; color: var(--ink-strong); font-family: Georgia, "Times New Roman", serif; font-size: clamp(28px, 5vw, 38px); font-weight: 400; letter-spacing: -.02em; }
h2 { margin: 34px 0 10px; color: var(--ink-strong); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.lede { margin: 0 0 6px; color: var(--muted); font-size: 14px; }

.card { margin-top: 30px; padding: 30px 30px 26px; border: 1px solid rgb(255 255 255 / 58%); border-radius: 22px; background: rgb(255 255 255 / 40%); box-shadow: 0 22px 65px rgb(56 81 92 / 12%); backdrop-filter: blur(20px); }
.card > :first-child { margin-top: 0; }

p { margin: 0 0 14px; }
ul { margin: 0 0 14px; padding-left: 20px; }
li { margin-bottom: 7px; }
a { color: var(--accent); }
strong { color: var(--ink-strong); }

footer { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
footer a { margin-right: 16px; }
.heart { color: #3f9e6a; }