/* Daylight: a light look on top of site.css, for a site that must not look
   like its sister sites (Settings → Theme). Only colours, type and shapes
   change; the page structure stays the same. */

:root {
  --bg: #f6f7f9;
  --bg-2: #eef0f4;
  --surface: #ffffff;
  --surface-2: #f3f4f7;
  --line: #e2e5ea;
  --line-2: #cfd4dc;
  --text: #14161b;
  --muted: #545b67;
  --faint: #8a909b;
  --on-accent: #ffffff;
  --accent-text: color-mix(in srgb, var(--accent) 78%, #000000);
  --good: #13834f;
  --bad: #c62f3a;
  --radius: 20px;
  --radius-sm: 12px;
  --wrap: 1040px;
  --shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 10px 28px -16px rgba(17, 24, 39, .22);
  --head: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

body { background: var(--bg); color: var(--text); }
h1, h2, h3 { letter-spacing: -0.02em; font-weight: 800; }

/* A round logo, as in the icons drawn for this look. */
.logo-mark, .logo-mark.big { border-radius: 50%; }

.site-header { background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.preview-bar { background: #fff4d6; color: #6b4e00; }

.hero { padding: 44px 0 16px; background: radial-gradient(900px 380px at 50% -120px, color-mix(in srgb, var(--accent) 16%, transparent), transparent); }
.hero .lead { color: var(--muted); }

.tool { border: 0; box-shadow: 0 2px 4px rgba(17, 24, 39, .04), 0 18px 40px -18px rgba(17, 24, 39, .28); }
.tool input { background: var(--surface-2); border-color: var(--line); color: var(--text); border-radius: 14px; }
.tool-go, .btn-accent, .q-btn.best { border-radius: 999px; }
.tool-go:hover, .q-btn.best:hover, .btn-accent:hover { background: color-mix(in srgb, var(--accent) 88%, #000000); }

.prose { color: #2a2f38; }
.prose p, .prose li { color: #353b46; }
.prose a { color: var(--accent-text); }
.prose h2 { margin-top: 1.6em; }
.prose table { background: var(--surface); }

.result-msg.error { color: var(--bad); }
.result-thumb .dur { background: rgba(17, 24, 39, .78); }

.age-gate, .interstitial { background: rgba(246, 247, 249, .97); }

.card, .faq-item, .plan { background: var(--surface); border-color: var(--line); }

.site-footer { background: var(--surface); border-top: 1px solid var(--line); }

.sites-table th[scope="row"] a { color: var(--accent-text); }