/* ─────────────────────────────────────────────────────────────────────────
   Inner pages: download, contact, privacy, terms, delete-account and
   confirm-delete.

   These pages were built on the previous design system. The 12 Oct rewrite of
   styles.css replaced it with the homepage's, and 54 of the 61 classes these
   pages use went with it — the deletion page Google Play links to rendered
   with browser-default purple links, grey language buttons and a bare email
   box. This restyles those same classes in the homepage's language (glass,
   lime, the night map) rather than restoring the old look, and leaves the
   markup alone: it carries the FR/DE translations and the hooks forms.js and
   legal.js depend on.

   Loaded after styles.css and refresh.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Header contents ─────────────────────────────────────────────────────── */

a.brand { color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; }
.brand__mark { height: 36px; width: auto; display: block; }
.brand__name--light { font-weight: inherit; }

.nav__right { display: flex; align-items: center; gap: 10px; }

/* Segmented, quiet, inside the pill. These pages keep FR and DE — the legal
   ones especially need them — so the switcher stays, it just stops looking
   like three unstyled browser buttons. */
.lang {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .06);
}
.lang__btn {
  border: 0;
  background: transparent;
  color: var(--mute);
  font: 600 12px/1 'Poppins', system-ui, sans-serif;
  letter-spacing: .04em;
  padding: 8px 10px;
  border-radius: 999px;
  cursor: pointer;
  min-width: 34px;
}
.lang__btn:hover { color: var(--ink); }
.lang__btn.is-on { background: rgba(255, 255, 255, .12); color: var(--ink); }

@media (max-width: 420px) {
  .brand__name { display: none; } /* the mark is enough; the switcher is not optional */
  .lang__btn { padding: 8px 8px; min-width: 30px; }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn--lime { background: var(--lime); color: #0a0b10; }
.btn--sm { min-height: 40px; padding: 9px 18px; font-size: 14px; }
.btn--lg { min-height: 54px; padding: 15px 30px; font-size: 16px; }
.btn--ghost {
  background: rgba(255, 255, 255, .04);
  color: var(--ink);
  border: 1px solid var(--glassb);
}
.btn--ghost:hover { box-shadow: none; border-color: rgba(255, 255, 255, .25); }

/* Destructive actions are red, as they are in the app. Lime is this site's
   "yes, go" colour — on "Delete my account", sitting next to a lime Cancel,
   it made the irreversible button and the safe one look the same. */
.btn--danger { background: #e5484d; color: #fff; }
.btn--danger:hover { box-shadow: 0 10px 30px rgba(229, 72, 77, .3); }

/* ── Page frame ──────────────────────────────────────────────────────────── */

.wrap--narrow { max-width: 880px; }

.pagehead { padding: clamp(40px, 6vw, 72px) 0 12px; }
.section { padding: 20px 0 clamp(60px, 8vw, 96px); }
.section--dark { padding-top: 0; }

.pagehead h1, main.doc h1 {
  font-size: clamp(34px, 4.6vw, 58px);
  margin: 0 0 14px;
  text-wrap: balance;
}
.pagehead p { color: var(--mute); font-size: clamp(16px, 1.3vw, 19px); max-width: 60ch; margin: 0; }

.eyebrow {
  display: block;
  color: var(--lime);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.doc__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--mute);
  font-size: 14px;
  text-decoration: none;
  margin-bottom: 26px;
}
.doc__back::before { content: "←"; transition: transform .2s; }
.doc__back:hover { color: var(--ink); }
.doc__back:hover::before { transform: translateX(-3px); }

.sechead-lite { margin-bottom: 22px; }
.sechead-lite h2 { font-size: clamp(26px, 3vw, 40px); margin: 0 0 10px; }
.sechead-lite p { color: var(--mute); margin: 0; max-width: 60ch; }

/* ── Glass surfaces ──────────────────────────────────────────────────────── */

.form, .soon, .doc__toc, .doc__note:not(:empty), .notice {
  background: var(--glass);
  border: 1px solid var(--glassb);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 12px 40px rgba(0, 0, 0, .28);
  border-radius: 24px;
}

/* ── Alerts ──────────────────────────────────────────────────────────────── *
   These were inline light-theme colours — pale yellow, mint, pink — that
   glowed off a dark page. Same meaning, tinted for the dark ground. */

.alert {
  border-radius: 16px;
  padding: 14px 18px;
  border: 1px solid;
  font-size: 15px;
  line-height: 1.55;
}
.alert p { margin: 0; }
.alert + .form__actions, .alert + p { margin-top: 18px; }
.alert--warn { background: rgba(245, 166, 35, .08); border-color: rgba(245, 166, 35, .35); color: #f5c46b; }
.alert--ok   { background: rgba(201, 238, 10, .08); border-color: rgba(201, 238, 10, .35); color: var(--lime); }
.alert--err  { background: rgba(229, 72, 77, .09);  border-color: rgba(229, 72, 77, .4);   color: #ff9a9d; }

.notice { padding: 16px 18px; border-left: 3px solid rgba(201, 238, 10, .6); }
.notice strong { display: block; color: var(--ink); margin-bottom: 4px; }
.notice p { color: var(--mute); margin: 0; font-size: 14px; }

/* ── Forms ───────────────────────────────────────────────────────────────── */

.form { padding: clamp(20px, 4vw, 34px); }
.form__body { display: flex; flex-direction: column; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 8px; }
.field > label { font-size: 14px; font-weight: 600; color: var(--ink); }
.field small { color: var(--mute); font-size: 12px; }

.input,
.field input[type="email"],
.field input[type="text"],
.field textarea,
.field select {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid var(--glassb);
  background: rgba(255, 255, 255, .04);
  color: var(--ink);
  font: 400 15px/1.5 'Poppins', system-ui, sans-serif;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 120px; resize: vertical; }
.input::placeholder, .field input::placeholder, .field textarea::placeholder { color: rgba(139, 144, 163, .7); }
.input:focus, .field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: rgba(201, 238, 10, .6);
  box-shadow: 0 0 0 3px rgba(201, 238, 10, .14);
}
/* Red only after a submit attempt — not while someone is still typing. */
.form.is-touched .input:invalid,
.form.is-touched input:invalid,
.form.is-touched textarea:invalid { border-color: #e5484d; }

.checkbox-label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 14px; color: var(--ink); }
.checkbox-label input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--lime); flex: none; cursor: pointer; }

.form__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 4px; }

.form__msg { display: none; margin: 16px 0 0; padding: 14px 16px; border-radius: 14px; font-size: 14px; border: 1px solid; }
.form__msg.is-ok  { display: block; background: rgba(201, 238, 10, .08); border-color: rgba(201, 238, 10, .35); color: var(--lime); }
.form__msg.is-err { display: block; background: rgba(229, 72, 77, .09);  border-color: rgba(229, 72, 77, .4);   color: #ff9a9d; }
.form.is-done .form__body { display: none; }
.form.is-done .form__msg { margin-top: 0; }

/* The bot trap. Unstyled since the rewrite, it was showing a "Website" box to
   real people — and anyone who filled it in was silently treated as a bot. */
.hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.reveal-box { margin-top: 20px; }

/* ── Download ────────────────────────────────────────────────────────────── *
   `.dl` is also the homepage's download card, so here it would inherit a
   card background and lose the page gutter. On this page it is the layout. */

.pagehead .wrap.dl {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* Bottom space of its own: this header runs on through the badge, the
     notice and three steps, so the next section needs a real break rather
     than the short gap that suits a title followed by a form. */
  padding: 0 clamp(20px, 5vw, 96px) clamp(48px, 7vw, 88px);
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 520px) { .pagehead .wrap.dl { padding: 0 16px 48px; } }

.dl__actions { margin: 26px 0 22px; }
.store-btn { display: inline-block; border-radius: 12px; }
.store-btn img { display: block; height: 60px; width: auto; }

.dlsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: step; }
.dlsteps li { position: relative; padding-left: 48px; counter-increment: step; display: flex; flex-direction: column; gap: 3px; }
.dlsteps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--glassb);
  color: var(--lime);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
}
.dlsteps strong { color: var(--ink); font-size: 16px; }
.dlsteps span { color: var(--mute); font-size: 14px; }
.dlsteps a { color: var(--lime); font-size: 13px; word-break: break-all; text-decoration: none; }

.dl__right { justify-self: center; }
/* White on purpose: a QR code has to be dark-on-light to scan reliably. */
.qrbig {
  background: #fff;
  border-radius: 24px;
  padding: 22px;
  text-align: center;
  color: #3b3f55;
  font-size: 13px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .4);
}
.qrbig img { width: 100%; height: auto; display: block; }

/* ── iPhone card ─────────────────────────────────────────────────────────── */

.soon { padding: clamp(20px, 4vw, 30px); }
.soon__row { display: flex; gap: 14px; align-items: flex-start; color: var(--ink); }
.soon__row svg { flex: none; margin-top: 3px; }
.soon__row strong { display: block; font-size: 17px; }
.soon__row em { display: block; font-style: normal; color: var(--mute); font-size: 14px; }
.soon__cta { margin: 20px 0 14px; }
.soon__steps { margin: 0; padding-left: 20px; color: var(--mute); font-size: 14px; display: grid; gap: 4px; }

/* ── Legal documents ─────────────────────────────────────────────────────── */

main.doc { padding: clamp(40px, 6vw, 72px) 0 clamp(60px, 8vw, 96px); }
.doc__updated { color: var(--mute); font-size: 13px; margin: 0 0 18px; }
.doc__lead { font-size: clamp(16px, 1.3vw, 19px); color: var(--ink); opacity: .86; max-width: 65ch; margin: 0 0 24px; }
.doc__note:empty { display: none; }
.doc__note:not(:empty) { padding: 16px 18px; border-left: 3px solid rgba(201, 238, 10, .6); color: var(--mute); font-size: 14px; margin: 0 0 24px; }

.doc__toc { padding: 18px 22px; margin: 0 0 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
.doc__toc:empty { display: none; }
.doc__toc a { color: var(--mute); text-decoration: none; font-size: 14px; padding: 5px 0; }
.doc__toc a:hover { color: var(--lime); }
@media (max-width: 640px) { .doc__toc { grid-template-columns: 1fr; } }

.doc__sec { padding: 0; margin: 0 0 34px; }
.doc__sec h2 { font-size: clamp(20px, 2vw, 24px); margin: 0 0 12px; letter-spacing: -.01em; }
.doc__sec p, .doc__sec li { color: rgba(244, 246, 239, .78); line-height: 1.75; max-width: 70ch; }
.doc__sec ul, .doc__sec ol { padding-left: 22px; }
.doc__sec a, main.doc p a { color: var(--lime); }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--line); margin-top: 20px; padding: 28px 0 40px; }
.foot__bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: var(--mute); font-size: 13px; }
.foot__bar a { color: var(--mute); text-decoration: none; }
.foot__bar a:hover { color: var(--ink); }
@media (max-width: 560px) { .foot__bar { flex-direction: column; align-items: center; text-align: center; } }