/* Shared by /privacy and /terms. Same tokens as index.html -- these pages are
   part of the product, not a bolted-on legal annex, and a store reviewer opens
   them straight from the listing. */
:root {
  --ink:#241E1B; --ink80:#4A403A; --ink60:#6B5D53; --ink45:#7A6C60;
  --cream:#FBF6EE; --sand:#F2E7D5; --sandDeep:#E8DCC8; --border:#E0D3BE;
  --gold:#F5C542; --goldText:#7A5D0C; --creamOnInk:#F7F1E6; --mutedOnInk:#C9BAA9;
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--cream); color:var(--ink);
  font-family:"Baloo 2", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight:500; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--goldText); }
.wrap { max-width:760px; margin:0 auto; padding:0 24px; }
h1, h2 { margin:0; font-weight:800; line-height:1.2; letter-spacing:-0.01em; }
h1 { font-size:40px; }
h2 { font-size:23px; margin-top:44px; }
p, ul { margin:14px 0 0; color:var(--ink80); }
ul { padding-left:22px; }
li { margin-top:8px; }

.topbar { padding:22px 0; }
.topbar .wrap { display:flex; align-items:center; gap:14px; }
.topbar img { height:74px; width:auto; margin:-10px 0; }
.topbar nav { margin-left:auto; display:flex; gap:26px; font-size:15px; font-weight:600; }
.topbar nav a { color:var(--ink60); text-decoration:none; }
.topbar nav a:hover { color:var(--ink); }

.head { padding:26px 0 8px; }
.updated { color:var(--ink45); font-size:14px; font-weight:600; margin-top:10px; }

/* The one-paragraph version, for the large majority of readers who will not
   read the rest. It is not a summary that softens what is below -- if the two
   ever disagree, the page is wrong. */
.summary {
  background:var(--sand); border:1px solid var(--sandDeep); border-radius:22px;
  padding:22px 24px; margin-top:26px;
}
.summary p { margin:0; color:var(--ink); }

main { padding-bottom:70px; }

footer { background:var(--ink); color:var(--mutedOnInk); padding:34px 0; font-size:14px; }
footer .wrap { display:flex; flex-wrap:wrap; gap:18px; align-items:center; }
footer a { color:var(--creamOnInk); text-decoration:none; }
footer .sp { margin-left:auto; }

@media (max-width:640px) {
  h1 { font-size:31px; }
  .topbar img { height:58px; }
  .topbar nav { gap:16px; font-size:14px; }
  /* The company name takes the whole line on a phone. It is long enough that
     only the first link fitted beside it, so Terms sat up on the company's line
     while Privacy and Contact dropped below -- one word that would not come
     back down to the row with the others. The margin-left:auto that pushed
     Terms to the right has nothing to push against once the row is just the
     three links, so it goes too. */
  footer .co { flex-basis:100%; }
  footer .sp { margin-left:0; }
}