/* Teseria coming-soon site. index.html uses the shared base and the "Home" block (logo, "Coming soon.", footer); the policy pages use the shared
   base and the ".lg" block. Home rules are all scoped to body.home, so the policy pages never see them.
   Colours mirror src/blocks/tokens.css (light by default, dark by the OS setting). */
:root {
  color-scheme: light dark;
  --ts-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ts-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ts-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --ts-page: #ffffff; --ts-raised: #ffffff; --ts-sunken: #f5f6f8;
  --ts-tint-1: #f5f6f8; --ts-tint-2: #eef0f3; --ts-tint-3: #e6e8ed;
  --ts-fg: #14161b; --ts-fg-rgb: 20, 22, 27;
  --ts-fg-secondary: #373b45; --ts-fg-tertiary: #555a65; --ts-fg-muted: #6a6f7b; --ts-fg-faint: #858a96; --ts-fg-inverse: #ffffff;
  --ts-border: rgba(20, 22, 27, 0.11);
  --ts-accent: #3446eb; --ts-focus: #3446eb;
  --ts-success: #13804a; --ts-warning: #a9650b; --ts-danger: #df474e;

  /* page-only: link colour */
  --link: #3446eb;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ts-page: #000000; --ts-raised: #1a1b1f; --ts-sunken: #0c0d10; /* page is pure black here (tokens.css has #08090b) */
    --ts-tint-1: #111215; --ts-tint-2: #17191c; --ts-tint-3: #1f2125;
    --ts-fg: #f4f5f7; --ts-fg-rgb: 244, 245, 247;
    --ts-fg-secondary: #b5b8c0; --ts-fg-tertiary: #999da6; --ts-fg-muted: #838791; --ts-fg-faint: #6b6f79; --ts-fg-inverse: #08090b;
    --ts-border: rgba(244, 245, 247, 0.13);
    --ts-focus: #7f8cff;
    --ts-success: #3ccf80; --ts-warning: #efa130;
    --link: #8c97ff;
  }
}

/* ---------- Shared: body, header, footer ---------- */
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--ts-page); color: var(--ts-fg); font: 16px/1.55 var(--ts-font);
  -webkit-font-smoothing: antialiased;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
header, main, footer { width: 100%; max-width: 1040px; margin-inline: auto; }
header { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; padding-block: 8px; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
header svg { flex: none; display: block; }
main { flex: 1; }
h1 { margin: 0; font-size: clamp(40px, 8vw, 72px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 650; }
p { margin: 20px 0 0; max-width: 46ch; color: var(--ts-fg-tertiary); font-size: 18px; }
a { color: var(--link); text-underline-offset: 3px; border-radius: 4px; }
a:focus-visible { outline: 2px solid var(--ts-focus); outline-offset: 3px; }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding-block: 16px 12px; color: var(--ts-fg-tertiary); font-size: 14px; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer a { color: var(--ts-fg-tertiary); text-decoration: none; }
@media (hover: hover) { footer a:hover { color: var(--ts-fg); } }
a.brand { display: flex; align-items: center; gap: 10px; color: var(--ts-fg); text-decoration: none; }

/* ---------- Policy pages: /privacy, /terms, /refunds, /license are one reading column ---------- */
main.lg { display: block; flex: 1; padding-block: 24px 64px; }
.lg > * { max-width: 720px; }
.lg > * + * { margin-top: 14px; }
.lg h1 { font-size: clamp(32px, 6vw, 52px); font-weight: 650; }
.lg h2 { margin-top: 32px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.lg p, .lg li { margin-bottom: 0; color: var(--ts-fg-tertiary); font-size: 15px; line-height: 1.65; }
.lg .lg-date { font-size: 13px; }
.lg b { color: var(--ts-fg); font-weight: 600; }
.lg ul { display: grid; gap: 8px; padding-left: 20px; }

/* ---------- Home (index.html) ---------- */
body.home {
  padding-left: max(clamp(16px, 4vw, 32px), env(safe-area-inset-left));
  padding-right: max(clamp(16px, 4vw, 32px), env(safe-area-inset-right));
}
.home header { padding-block: 12px; }
.home footer { border-top: 1px solid var(--ts-border); padding-top: 20px; }
.home main { display: grid; place-items: center; text-align: center; touch-action: pan-y; }
.home main canvas {
  display: block; width: 100%; height: clamp(200px, 22vw, 260px);
  mask-image: linear-gradient(90deg, transparent, #000 10% 90%, transparent), linear-gradient(transparent, #000 20% 80%, transparent);
  mask-composite: intersect;
}
.home main canvas[hidden] { display: none; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.home h1 { font-size: clamp(40px, 7vw, 64px); font-weight: 600; letter-spacing: -0.045em; }