/* allsum.io pages outside the app (web/legal, copied into web/dist by web/scripts/build.ts): the
   landing page (signed-out `/`) and /privacy, /terms. The look of the sign-in page (web/src/auth/auth.css):
   warm neutral page, a large soft serif title, flat frosted-glass controls over the background light. */
:root {
  color-scheme: light dark;
  --bg: light-dark(#f7f6f3, #131312);
  --fg: light-dark(#1f1e1c, #e6e4df);
  --soft: light-dark(#3d3b37, #bebbb4);
  --muted: light-dark(#6f6c65, #87847d);
  --faint: light-dark(#a19e97, #5a5852);
  --line: light-dark(#e6e3dc, #2a2a28);
  --accent: light-dark(#3b63ff, #7f9dff);
  --glass: light-dark(rgba(255, 255, 255, 0.5), rgba(40, 40, 38, 0.42));
  --glass-hover: light-dark(rgba(255, 255, 255, 0.72), rgba(64, 64, 62, 0.55));
  --glass-strong: light-dark(rgba(255, 255, 255, 0.9), rgba(78, 78, 75, 0.62));
  --glass-press: light-dark(rgba(240, 240, 238, 0.7), rgba(28, 28, 27, 0.6));
  --glass-edge: light-dark(rgba(20, 30, 60, 0.16), rgba(255, 255, 255, 0.16));
  --glass-edge-hover: light-dark(rgba(20, 30, 60, 0.24), rgba(255, 255, 255, 0.24));
  --glass-shine: light-dark(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05));
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0; background-color: var(--bg); color: var(--fg);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- home ---------------------------------------------------------------------------------- */
.home { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.wave { position: fixed; left: -6%; top: 6vh; z-index: 0; width: 112%; height: 84vh; color: var(--bg); filter: blur(26px); pointer-events: none; animation: wave-in 1.4s ease-out; }
@keyframes wave-in { from { opacity: 0; transform: translateY(24px); } }
.hero { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 16px 22vh; }
.hero h1 { margin: 0 0 12px; font-family: Fraunces, Georgia, "Songti SC", "STSong", "Noto Serif SC", serif; font-variation-settings: "SOFT" 100, "opsz" 72; font-size: 44px; font-weight: 450; line-height: 1.15; letter-spacing: -0.02em; }
.lead { margin: 0; color: var(--muted); font-size: 15px; }
/* Docs, Sites: two quiet lines, the product name in the foreground color. */
.products { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.products strong { margin-right: 8px; color: var(--fg); font-weight: 500; }
.cta {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: min(100%, 320px); height: 42px; margin-top: 32px;
  border: 1px solid var(--glass-edge); border-radius: 999px; background: var(--glass); color: var(--fg); font-size: 14px; font-weight: 500;
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--glass-shine);
  transition: background-color 0.15s, border-color 0.15s, transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.cta svg { flex: none; }
.cta:hover { text-decoration: none; border-color: var(--glass-edge-hover); background: var(--glass-hover); }
.cta:active { background: var(--glass-press); transform: scale(0.985); box-shadow: none; transition-duration: 0.06s; }
/* allsum.ai first: the same glass as the page, only bigger and bolder, with the allsum.ai mark in its lime. */
.cta--primary {
  gap: 12px; width: min(100%, 340px); height: 54px; margin-top: 36px; padding: 0 22px;
  border-color: var(--glass-edge-hover); background: var(--glass-hover); font-size: 16px; font-weight: 600;
}
.cta--primary:hover { background: var(--glass-strong); }
/* The brand lime; on the pale light-mode glass a deeper lime so the thin strokes still read. */
.cta .cta__mark { width: 30px; height: 30px; background-color: light-dark(#7cc400, #b5f700); }
/* Google sign-in is only for accounts on this service itself: asked for under a line of its own,
   with the rule written beneath it, so Allsum.ai users don't take it for their way in. */
.direct { margin: 40px 0 0; color: var(--muted); font-size: 13px; }
.cta--secondary { gap: 9px; width: min(100%, 260px); height: 40px; margin-top: 10px; padding: 0 20px; font-size: 14px; color: var(--soft); }
.restricted { max-width: 340px; margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
/* Allsum.ai in running text: the text's own color, underlined, rather than the blue link accent. */
.lead a, .restricted a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; transition: text-decoration-color 0.15s; }
.lead a:hover, .restricted a:hover { text-decoration-color: currentColor; }
.fine a { color: inherit; transition: color 0.15s; }
.fine a:hover { color: var(--fg); text-decoration: none; }
.fine { position: relative; z-index: 1; display: flex; justify-content: center; gap: 18px; padding: 0 16px max(20px, env(safe-area-inset-bottom)); font-size: 12px; color: var(--muted); }

/* theme switch (top right): quiet, three small icons, no frame; the chosen one simply darker */
.theme { position: fixed; top: max(16px, env(safe-area-inset-top)); right: 16px; z-index: 2; display: inline-flex; gap: 2px; }
.theme button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--faint); cursor: pointer; transition: color 0.15s; }
.theme button:hover, .theme button.is-active { color: var(--muted); }

@media (max-width: 480px) { .hero h1 { font-size: 36px; } }
@media (prefers-reduced-motion: reduce) { .wave { animation: none; } .cta, .theme button { transition: none; } }

/* ---- privacy / terms ------------------------------------------------------------------------ */
.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }
header { border-bottom: 1px solid var(--line); }
header .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { font-family: Fraunces, Georgia, serif; font-variation-settings: "SOFT" 100; font-weight: 500; font-size: 19px; color: var(--fg); letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
nav a { margin-left: 18px; color: var(--muted); font-size: 14px; }
main.doc-main { padding: 56px 0 72px; }
h2 { font-size: 20px; margin: 40px 0 8px; }
.doc h1 { font-size: 32px; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 16px; }
.doc p, .doc li { color: var(--fg); }
.updated { color: var(--muted); font-size: 14px; }
footer.site { border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
footer.site .wrap { padding: 22px 20px; display: flex; gap: 18px; flex-wrap: wrap; }
footer.site a { color: var(--muted); }

/* The shared Option 1 mark follows the page's foreground in both themes. */
.allsum-mark { display: inline-block; width: 28px; height: 28px; flex: none; background-color: currentColor; mask: url("/legal/allsum-logo.svg") center / contain no-repeat; }
.brand { display: inline-flex; align-items: center; gap: 8px; }