/* Shared chrome for every page that is not the landing page: support,
   account deletion, privacy, terms, 404.
   These used to carry the old Vibe Lingo teal-and-gold inline styles, so a
   reviewer following the "Privacy" link left an orange site and arrived at
   what looked like a different company. Same tokens as index.html. */
:root {
  /* The vivid brand orange is for shapes only — it reaches just 2.7:1 on this
     cream, so it fails WCAG AA even under the large-text rule. --orange-ink is
     the same hue taken down until it passes: 4.9:1 as text, 5.2:1 under white. */
  --orange:     #FF6B35;
  --orange-ink: #C2410C;
  --deep:       #F05828;
  --cream:      #FFF8F3;
  --ink:        #1A1A1A;
  --muted:      #6F6A65;
  --faint:      #736E68;
  --line:       #EFEBE6;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(760px, 100% - 40px); margin-inline: auto; }

/* ── nav ──────────────────────────────────────────────────────────── */
nav { border-bottom: 1px solid var(--line); background: var(--cream); }
nav .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; width: min(1080px, 100% - 40px);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; text-decoration: none; color: var(--ink);
}
.mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(160deg, var(--orange), var(--deep));
  color: #fff; display: grid; place-items: center;
  font-family: Georgia, serif; font-size: 22px; line-height: 1; padding-bottom: 4px;
}

/* ── page body ────────────────────────────────────────────────────── */
main { padding: 56px 0 88px; }

h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1.1; letter-spacing: -1px;
}
h1 em { font-style: normal; color: var(--orange-ink); }

.lead { margin-top: 16px; font-size: clamp(17px, 2.1vw, 20px); color: var(--muted); }
.updated { margin-top: 10px; font-size: 14px; color: var(--faint); }

h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 24px; margin: 44px 0 12px; letter-spacing: -0.4px;
}
h3 { font-size: 17px; margin: 26px 0 8px; }

p, li { color: var(--muted); }
p + p { margin-top: 14px; }
ul, ol { margin: 12px 0 0 22px; }
li { margin-bottom: 8px; }
strong, b { color: var(--ink); font-weight: 600; }

/* Underlined, not colour-only: WCAG 1.4.1 — colour must not be the sole
   means of conveying that something is a link. */
main a { color: var(--orange-ink); text-decoration: underline; text-underline-offset: 2px; }

.btn {
  display: inline-block;
  background: var(--orange-ink); color: #fff;
  font-weight: 700; text-decoration: none;
  padding: 13px 26px; border-radius: 12px;
  box-shadow: 0 6px 18px rgba(240, 88, 40, .28);
}
.btn:hover { background: var(--deep); }

.panel {
  margin-top: 28px; padding: 24px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
}
.panel h2 { margin-top: 0; font-size: 20px; }

.steps { counter-reset: step; list-style: none; margin-left: 0; }
.steps li {
  counter-increment: step; position: relative;
  padding-left: 38px; margin-bottom: 16px;
}
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 1px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--orange-ink); color: #fff;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
}

/* ── footer ───────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); padding: 32px 0; }
footer .wrap {
  width: min(1080px, 100% - 40px);
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
}
.links { display: flex; flex-wrap: wrap; gap: 18px; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--orange-ink); text-decoration: underline; }
.fine { color: var(--faint); font-size: 14px; }

/* Skip link — visible only once focused. */
.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px;
}
.skip:focus { left: 12px; top: 12px; z-index: 50; }