/* Shared by the pages that are documents rather than the product: FAQ, privacy,
   terms. The landing keeps its own stylesheet inline because it is one page of
   heavily bespoke layout; these three are the same page with different words. */

:root {
  --paper:      #0E0810;
  --paper-lift: #191020;
  --cream:      #F6EDF2;
  --ink-soft:   #A2919F;
  --pink:       #FF2E93;
  --pink-lift:  #FF80BF;
  --line:       color-mix(in srgb, var(--cream) 12%, transparent);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --gutter: clamp(20px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: #000; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background:
    radial-gradient(90% 42% at 50% -8%, #3A1530 0%, #1E0F24 32%, #120C16 60%, var(--paper) 86%)
    var(--paper);
  background-attachment: fixed;
  color: var(--cream);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 4px; }

.shell { width: min(860px, 100%); margin-inline: auto; padding-inline: var(--gutter); }

/* ── Bar ──────────────────────────────────────────────────────────────── */
.bar { padding-block: 22px; display: flex; align-items: center; justify-content: space-between; }
.bar-mark { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.bar-mark img { width: 26px; height: auto; }
.bar-mark span { font-weight: 600; font-size: 19px; letter-spacing: -0.03em; }
.bar-back { font: 500 13px/1 var(--mono); color: var(--ink-soft); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .bar-back:hover { color: var(--cream); } }

/* ── Document ─────────────────────────────────────────────────────────── */
.doc { padding-block: clamp(40px, 6vw, 84px) clamp(64px, 8vw, 110px); }
.doc h1 {
  font-weight: 800; font-size: clamp(34px, 5.4vw, 60px);
  line-height: 1.02; letter-spacing: -0.03em;
}
.doc .lede { margin-top: 14px; color: var(--ink-soft); max-width: 52ch; }
.doc h2 {
  margin-top: clamp(34px, 4vw, 52px); margin-bottom: 10px;
  font-weight: 700; font-size: 21px; letter-spacing: -0.02em;
}
.doc p + p { margin-top: 12px; }
.doc p, .doc li { color: var(--ink-soft); }
.doc strong { color: var(--cream); font-weight: 600; }
.doc ul { margin-top: 10px; padding-left: 20px; display: grid; gap: 8px; }
.doc a { color: var(--pink-lift); text-decoration-color: color-mix(in srgb, var(--pink-lift) 40%, transparent); }
.stamp {
  font: 500 11px/1 var(--mono); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-soft);
}
.updated { margin-top: 8px; font: 500 12px/1 var(--mono); color: var(--ink-soft); }

/* ── Accordion ────────────────────────────────────────────────────────────
   `details` rather than a scripted widget: it is open/closed state with a
   heading, which is what the element is, and it keeps working with the
   keyboard, with find-in-page and with JavaScript off. */
.faq { margin-top: clamp(28px, 4vw, 44px); display: grid; gap: 10px; }
.faq details {
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper-lift) 72%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.faq summary {
  list-style: none; cursor: pointer;
  padding: 18px 54px 18px 22px; position: relative;
  font-weight: 600; font-size: 17px; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
/* A cross that becomes a minus: one shape, so the state change is a rotation
   rather than a swap. */
.faq summary::after,
.faq summary::before {
  content: ""; position: absolute; right: 22px; top: 50%;
  width: 13px; height: 2px; border-radius: 2px; background: var(--pink);
  transition: transform 260ms var(--ease-out), opacity 260ms var(--ease-out);
}
.faq summary::before { transform: translateY(-50%); }
.faq summary::after  { transform: translateY(-50%) rotate(90deg); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.faq details[open] summary { padding-bottom: 6px; }
.faq .answer { padding: 0 22px 20px; color: var(--ink-soft); }
.faq .answer p + p { margin-top: 10px; }
@media (hover: hover) and (pointer: fine) {
  .faq summary:hover { background: color-mix(in srgb, var(--paper-lift) 55%, transparent); }
}

/* ── Foot ─────────────────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--line); padding-block: 30px 44px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.foot a, .foot small { font: 500 13px/1 var(--mono); color: var(--ink-soft); text-decoration: none; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: var(--cream); } }