/* Cortexa — legal and support pages.
 *
 * The colours are the app's own, read out of the asset catalogue rather than
 * eyeballed: accent #5B45D6, ground #F4F4F8, ink #0D0D12. The motif is the 3x3
 * matrix from the icon.
 *
 * This deliberately shares nothing with the other legal sites on this developer
 * account. Six apps were rejected under 4.3(a) for looking like instances of one
 * template, and a support page that matches five other support pages is the same
 * signal in a quieter place — the reviewer opens the privacy URL too.
 */

:root {
  --accent: #5b45d6;
  --accent-soft: #ede9fb;
  --ground: #f4f4f8;
  --surface: #ffffff;
  --ink: #0d0d12;
  --ink-2: #53535f;
  --ink-3: #8a8a96;
  --hairline: rgba(13, 13, 18, 0.09);
  --radius: 18px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 17px/1.62 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 56px 22px 90px;
}

/* Masthead ---------------------------------------------------------------- */

header.mast {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 38px;
}

.glyph {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: linear-gradient(150deg, #6d55e8, #4a35c2);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  padding: 12px;
  flex: none;
}

.glyph i { background: rgba(255, 255, 255, 0.9); border-radius: 2px; }
.glyph i.dim { background: rgba(255, 255, 255, 0.28); }

.mast h1 { font-size: 27px; letter-spacing: -0.02em; margin: 0; }
.mast p { margin: 2px 0 0; color: var(--ink-2); font-size: 15px; }

/* Cards ------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin: 0 0 18px;
}

.card h2 {
  font-size: 19px;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.card h2 + p { margin-top: 0; }
.card p { margin: 0 0 12px; color: var(--ink-2); }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

.card ul { margin: 0 0 12px; padding-left: 20px; color: var(--ink-2); }
.card li { margin-bottom: 7px; }

strong { color: var(--ink); font-weight: 600; }
em { font-style: normal; color: var(--ink); font-weight: 600; }

/* The six domains, as chips. Wraps to as many rows as the width allows rather
 * than being a fixed grid, because "six across" is a lie on a phone. */

.domains {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.domains span {
  font-size: 14px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 5px 13px;
}

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
a:hover { border-bottom-color: var(--accent); }

/* The one loud statement on the page ------------------------------------- */

.headline {
  background: var(--accent-soft);
  border: 1px solid rgba(91, 69, 214, 0.16);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin-bottom: 18px;
}

.headline p {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #291d63;
}

.stamp {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 12px;
}

/* Footer ------------------------------------------------------------------ */

footer {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  color: var(--ink-3);
  font-size: 14px;
}

footer a { color: var(--ink-2); border-bottom-color: var(--hairline); }
footer nav { margin-bottom: 8px; }
footer nav a { margin-right: 16px; }

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0e0e13;
    --surface: #17171f;
    --ink: #f5f5f8;
    --ink-2: #a9a9b6;
    --ink-3: #6e6e7c;
    --hairline: rgba(255, 255, 255, 0.1);
    --accent: #a394f5;
    --accent-soft: rgba(91, 69, 214, 0.2);
  }
  .headline p { color: #dcd5ff; }
}