/* Shared shell for the two prose pages the store listing needs: the
   privacy policy and the account-deletion route.

   The tokens are the landing page's own, lifted from it verbatim so the
   three pages are one site rather than a marketing page with two
   strangers attached. index.html keeps its copy inline because it is a
   single self-contained file on purpose; these two are documents that
   will be edited over time, and a document that has to be re-styled in
   two places is a document that drifts.

   Light only, like the landing page: colour-scheme is declared and every
   colour is painted from a token, so nothing borrows the host's dark
   background. */

:root {
  color-scheme: light;

  --ground:      #F9F3FB;
  --ground-deep: #EAE5EE;
  --surface:     #FFFFFF;
  --surface-alt: #F7F1FA;
  --ink:         #2B2640;
  --ink-soft:    #4E4763;
  --muted:       #8B87A0;
  --line:        #E4E0F0;
  --line-strong: #D5CEE7;
  --accent:      #6C4FD6;
  --accent-ink:  #FFFFFF;
  --accent-wash: #EDE7FB;
  --shadow:      0 18px 44px -24px rgba(43, 27, 92, .38);

  --step--1: clamp(.8rem, .77rem + .12vw, .86rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.06rem);
  --step-1:  clamp(1.15rem, 1.08rem + .3vw, 1.3rem);
  --step-2:  clamp(1.4rem, 1.28rem + .5vw, 1.7rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.4vw, 2.8rem);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Public Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: min(100% - 2.5rem, 46rem);
  margin-inline: auto;
}

/* ---- masthead ------------------------------------------------------ */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.6rem;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: inherit;
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--step-1);
}

.brand img {
  width: 2rem;
  height: 2rem;
  border-radius: .55rem;
}

.masthead nav {
  display: flex;
  gap: 1.2rem;
  font-size: var(--step--1);
}

.masthead nav a {
  color: var(--muted);
  text-decoration: none;
}

.masthead nav a:hover,
.masthead nav a[aria-current="page"] { color: var(--accent); }

/* ---- document ------------------------------------------------------ */

.doc { padding-bottom: 3rem; }

.doc__head {
  padding-block: 1.5rem 2.2rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2.4rem;
}

.eyebrow {
  margin: 0 0 .5rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}

h1 {
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 .8rem;
  text-wrap: balance;
}

.lede {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
}

.stamp {
  margin: 1.2rem 0 0;
  font-size: var(--step--1);
  color: var(--muted);
}

h2 {
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 2.6rem 0 .7rem;
  text-wrap: balance;
}

h3 {
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--step-1);
  font-weight: 600;
  margin: 1.7rem 0 .4rem;
}

p, li { color: var(--ink-soft); }
p { margin: 0 0 1rem; }

ul, ol {
  margin: 0 0 1rem;
  padding-left: 1.3rem;
}

li { margin-bottom: .45rem; }

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

a { color: var(--accent); }

code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--accent-wash);
  border-radius: .3rem;
  padding: .12em .35em;
}

/* ---- pieces -------------------------------------------------------- */

/* A rule worth reading twice: the three location promises, the deletion
   summary. Same lilac card the landing page uses for its panels. */
.card {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  padding: 1.4rem 1.5rem;
  margin: 1.4rem 0;
}

.card > :last-child { margin-bottom: 0; }
.card h3:first-child { margin-top: 0; }

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 1.2rem 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.6rem;
  margin-bottom: 1rem;
  min-height: 1.9rem;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -.05em;
  width: 1.85rem;
  height: 1.85rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--step--1);
  font-weight: 600;
}

/* What each third party gets, and why. A table rather than prose
   because that is the shape a reviewer reads it in. */
.table-scroll { overflow-x: auto; margin: 1.2rem 0; }

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: var(--step--1);
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--line);
}

th {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--line-strong);
}

td { color: var(--ink-soft); }

.mailto {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 600;
  padding: .7rem 1.3rem;
  border-radius: .7rem;
  box-shadow: var(--shadow);
}

.mailto:hover { filter: brightness(1.08); }

footer {
  border-top: 1px solid var(--line);
  padding-block: 1.6rem 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  font-size: var(--step--1);
  color: var(--muted);
}

footer a { color: var(--muted); }