/* =====================================================================
   DOTS — one stylesheet for every page outside the main app.
   Before this, each page had grown its own look: privacy.html was Nunito
   Sans on a light blue with 14px rounded cards, the landing page was
   two headline faces on DOTS navy with 6px corners. Two sites, one
   company. This is the one that wins, taken from the landing page: the
   Sand & Navy skin the rider app uses: cream, and DM Sans throughout.
   ===================================================================== */

:root {
  --navy: #0D2A7A;
  --navy-deep: #071B55;
  --ink-navy: #071B55;
  --blue: #0D2A7A;
  --blue-hover: #071B55;
  --sand: #C8873D;
  --sand-deep: #A66A24;
  --sand-soft: #F2E4D2;
  --ink: #1B1B1F;
  --muted: #6F6A62;
  --line: #E6DFD2;
  --line-soft: #EFE9DE;
  --bg: #F4F0E8;
  --card: #FFFDF9;
  --green: #1F7A4D;
  --red: #B3261E;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.65;
}

a { color: var(--blue); }
a:hover { color: var(--navy); }

.wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; }
.wrap-wide { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ---------- type ---------- */
h1, h2 { font-family: 'DM Sans', sans-serif; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
h3 { font-family: 'DM Sans', sans-serif; color: var(--ink); }
h1 { font-size: 40px; line-height: 1.1; margin: 0 0 14px; }
h2 { font-size: 26px; margin: 34px 0 10px; }
h3 { font-size: 16.5px; font-weight: 600; margin: 22px 0 6px; }
p, li { font-size: 16px; }
ul, ol { padding-left: 22px; }
li { margin-bottom: 7px; }
.lede { font-size: 17.5px; color: var(--muted); margin: 0 0 8px; }
.muted { color: var(--muted); font-size: 14px; }
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--sand-deep); margin-bottom: 10px;
}

/* ---------- page furniture ---------- */
/* The bar is cream with a navy wordmark, as on the landing page. */
.dots-header {
  background: rgba(244,240,232,.92); color: var(--ink);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.dots-header .bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; height: 68px;
}
.dots-header .brand {
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 24px;
  letter-spacing: 0.18em; color: var(--navy); text-decoration: none;
}
.dots-header nav { display: flex; gap: 24px; align-items: center; }
.dots-header nav a {
  color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 500;
  padding: 8px 12px; border-radius: 999px;
}
.dots-header nav a:hover, .dots-header nav a[aria-current="page"] { color: var(--navy); background: rgba(13,42,122,.06); }
@media (max-width: 720px) {
  .dots-header .bar { height: auto; padding: 12px 0 14px; flex-direction: column; align-items: flex-start; }
  .dots-header nav { flex-wrap: wrap; gap: 14px 18px; }
}

.page-head { background: var(--bg); color: var(--ink); padding: 56px 0 44px; border-bottom: 1px solid var(--line); }
.page-head h1 { color: var(--ink); margin: 0 0 10px; }
.page-head p { margin: 0; color: var(--muted); max-width: 60ch; font-size: 17px; }

main { padding: 34px 0 70px; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 20px; padding: 24px 26px; margin: 16px 0;
}
.card h3:first-child, .card h2:first-child { margin-top: 0; }

.btn {
  display: inline-block; padding: 13px 26px; border-radius: 999px;
  background: var(--navy); color: #fff; text-decoration: none;
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 15px;
  border: 0; cursor: pointer;
}
.btn:hover { background: var(--blue-hover); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid #D8D0C2; }
.btn.ghost:hover { background: transparent; color: var(--ink); border-color: var(--ink); }

/* Account forms (delete account, reset password): a label over a full-width
   field, one clear button, and a message line that says what happened. */
.card label { display: block; margin: 14px 0 0; font-weight: 600; font-size: 14px; color: var(--ink); }
.card input[type=email], .card input[type=password], .card input[type=text] {
  display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 12px 14px;
  font: inherit; font-weight: 400; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 12px; }
.card input:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
.card button.primary, .card button.danger {
  margin-top: 18px; padding: 13px 22px; border: 0; border-radius: 999px; font: inherit; font-weight: 600;
  color: #fff; background: var(--navy); cursor: pointer; }
.card button.danger { background: var(--red); }
.card button:disabled { opacity: 0.55; cursor: default; }
.card .msg { margin-top: 12px; font-size: 14px; }
.card .msg.bad { color: var(--red); }
.card .msg.good { color: var(--green); }

.notice {
  background: var(--sand-soft); border: 1px solid #E6CBA6; border-left-width: 5px;
  border-radius: 14px; padding: 16px 20px; color: #5C4116; margin: 16px 0;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.dots-footer { background: var(--navy-deep); color: #D7DEF2; padding: 52px 0 34px; font-size: 14px; }
.dots-footer a { color: #D7DEF2; text-decoration: none; }
.dots-footer a:hover { color: #fff; }
.dots-footer .cols {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 40px;
  padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 860px) { .dots-footer .cols { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 520px) { .dots-footer .cols { grid-template-columns: 1fr; } }
.dots-footer .brand {
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 24px;
  letter-spacing: 0.18em; color: #fff; display: block; margin-bottom: 12px;
}
.dots-footer h4 {
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: #B7C3E6; margin: 0 0 12px;
}
.dots-footer ul { list-style: none; margin: 0; padding: 0; }
.dots-footer li { margin-bottom: 9px; }
.dots-footer .legal {
  padding-top: 20px; display: flex; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; font-size: 13px;
}
.dots-footer .company { margin: 10px 0 0; line-height: 1.7; }