/* The public site, shared by every page on it.
 *
 * Still self-hosted — no CDN font, no external stylesheet. This file is served
 * by the same box as the page that links it, so nothing here phones anywhere,
 * which is the rule the inline version was protecting. It is a file rather than
 * three copies of the same block because there are three pages now, and the
 * terms page drifting away from the front door is how a site starts looking
 * abandoned.
 *
 * Dark, and not only when the system asks for it. The emblem is a pair of wings
 * that run blue -> violet -> magenta out of a transparent background. The old
 * palette was warm paper with a rust-orange accent, the one colour family those
 * wings actively fight: on cream they read as a sticker stuck on the page; on
 * near black they are the light source. So this is a brand decision rather than
 * a preference to be toggled.
 *
 * The variable NAMES are the old ones on purpose. dashboard/static/tokens.css
 * resolves every colour through `var(--bg2, var(--card, #fff))` so the tokens
 * and plans page can live inside the dashboard AND on this site. Rename --card,
 * --fg, --line or --muted and that page quietly falls back to white on white.
 */
:root {
  --bg:     #07080e;
  --card:   #11131f;
  --fg:     #edecf4;
  --muted:  #9a98ad;
  --line:   #21243a;
  --accent: #8b6bff;
  --radius: 14px;

  /* Straight off the emblem, so everything lit on the page is lit by the same
     three colours the wings are. */
  --wing-blue:    #2f6dff;
  --wing-violet:  #7b3fe4;
  --wing-magenta: #e93fd0;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* A wash of the emblem's own colour behind the top of the page, so the wings
   sit in light rather than on top of a flat rectangle. Fixed and behind
   everything; it never intercepts a click. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60rem 34rem at 18% -8%, rgba(47,109,255,.20), transparent 62%),
    radial-gradient(48rem 30rem at 82% -14%, rgba(233,63,208,.14), transparent 60%);
}
.wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.4rem; }

/* The hero is centred as a block. Centring the emblem and leaving the sentence
   under it ranged left reads as a mistake rather than a choice, so the headline
   and lede come with it. */
header { padding: 4.5rem 0 2.6rem; text-align: center; }
/* The emblem sits above the wordmark rather than replacing it: the front door
   has to say the product's NAME to someone who has never heard of it, and a
   mark alone does not. No box or plate — the wings are a cut-out, so they sit
   straight on the background. */
.mark { margin-bottom: 1.8rem; }
.mark img {
  display: block; width: 104px; height: 104px; margin: 0 auto .5rem;
  /* The glow is the emblem's own silhouette, not a rectangle behind it. */
  filter: drop-shadow(0 6px 26px rgba(123,63,228,.45));
}
/* The wordmark carries the name, so it is sized to be read as one rather than
   as a caption under a picture. */
.mark span {
  display: block;
  font-size: clamp(1.5rem, 5vw, 2.1rem); letter-spacing: .22em;
  text-transform: uppercase; font-weight: 700; line-height: 1;
  /* The tracking is all on the right of each letter, which throws a centred
     line left by half a space. */
  text-indent: .22em;
  background: linear-gradient(95deg, var(--wing-blue), var(--wing-magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mark a { text-decoration: none; }
/* Smaller than it was: the emblem and the name are the loud part of this page,
   and a headline competing with them left nothing to look at first. */
h1 {
  font-size: clamp(1.45rem, 3.4vw, 1.85rem); line-height: 1.2;
  margin: 0 0 .8rem; letter-spacing: -0.01em; font-weight: 600;
}
.lede { font-size: .98rem; color: var(--muted); margin: 0 auto; max-width: 32rem; }

h2 {
  font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin: 3.5rem 0 1.2rem;
}
section { border-top: 1px solid var(--line); padding-top: .4rem; }
.points { display: grid; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .points { grid-template-columns: 1fr 1fr; } }
.points h3 { margin: 0 0 .35rem; font-size: 1rem; font-weight: 600; }
.points p { margin: 0; color: var(--muted); font-size: .95rem; }

.dl { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .dl { grid-template-columns: 1fr 1fr; } }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.4rem;
  /* A hairline of light along the top edge — the only thing separating a
     raised surface from a flat one when everything is nearly black. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.card h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.card .meta { color: var(--muted); font-size: .85rem; margin: 0 0 1rem; }

.btn {
  display: inline-block; color: #fff;
  background: linear-gradient(95deg, var(--wing-blue), var(--wing-violet) 55%,
                              var(--wing-magenta));
  text-decoration: none; padding: .65rem 1.15rem; border-radius: 10px;
  font-weight: 600; font-size: .95rem;
  box-shadow: 0 6px 20px rgba(91,63,228,.34);
}
.btn:hover { filter: brightness(1.1); }
.btn:focus-visible { outline: 2px solid var(--wing-magenta); outline-offset: 3px; }

.note {
  margin: 1rem 0 0; padding: .8rem .9rem; font-size: .85rem;
  color: var(--muted); background: rgba(255,255,255,.028);
  border: 1px solid var(--line); border-radius: 9px;
}
.note strong { color: var(--fg); font-weight: 600; }
a { color: var(--accent); }
a:hover { color: var(--wing-magenta); }
code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .88em; background: rgba(255,255,255,.05);
  border: 1px solid var(--line); border-radius: 5px; padding: .1em .35em;
}
footer {
  margin-top: 4.5rem; border-top: 1px solid var(--line);
  padding: 1.6rem 0 3.5rem; color: var(--muted); font-size: .875rem;
}
footer nav { margin-bottom: .6rem; display: flex; gap: 1.1rem; flex-wrap: wrap; }
footer nav a { text-decoration: none; }
footer nav a:hover { text-decoration: underline; }

/* ── The legal pages ─────────────────────────────────────────────── */
/* Long prose, so it gets a narrower measure than the landing page: ~34rem is
   about 75 characters, which is where reading stops being work. */
.legal { max-width: 38rem; }
.legal header { text-align: left; padding: 3.2rem 0 1.4rem; }
.legal h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin-bottom: .5rem; }
.legal .updated { color: var(--muted); font-size: .85rem; margin: 0; }
.legal h2 {
  font-size: 1.02rem; text-transform: none; letter-spacing: 0;
  color: var(--fg); margin: 2.4rem 0 .6rem;
}
.legal section { border-top: none; padding-top: 0; }
.legal p, .legal li { color: var(--muted); }
.legal strong { color: var(--fg); font-weight: 600; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin: .3rem 0; }
/* The plain-language summary at the top. Every one of these documents is
   readable, but nobody reads them, so the part that matters is said once in
   a box before the part that is binding. */
.summary {
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--wing-violet);
  border-radius: var(--radius); padding: 1.1rem 1.3rem; margin: 0 0 1.6rem;
}
.summary p { margin: .4rem 0 0; }
.summary p:first-child { margin-top: 0; }
.summary b { color: var(--fg); }
/* Where a real name, address or jurisdiction still has to be filled in. Loud
   on purpose: a placeholder that looks like prose is a placeholder that ships. */
.todo {
  background: rgba(233,63,208,.10); border: 1px dashed var(--wing-magenta);
  border-radius: 7px; padding: .15em .5em; color: var(--fg);
  font-size: .9em; font-weight: 600;
}