/* Shared styling for the legal pages (/privacy, /terms).
   Tokens mirror index.html — that page stays deliberately self-contained, so if you change a
   colour there, change it here too. Light-only, same as the rest of the site. */
:root{
  --sand:#F5EDE7; --sand-2:#EFE6DD; --card:#FFFFFF;
  --ink:#22201E; --muted:#857B72; --faint:#B5AAA0; --border:#EBE1D8;
  --coral:#F2704F; --coral-lt:#FF8767;
  color-scheme:light;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--sand); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap{width:min(760px,100% - 2.5rem); margin-inline:auto}
a{color:var(--coral)}
a:hover{text-decoration:none}

/* ---- nav ---- */
nav{background:var(--sand); border-bottom:1px solid var(--border)}
.nav-in{display:flex; align-items:center; gap:1rem; padding:.85rem 0}
.brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:inherit}
.wm-name{display:block; font-weight:700; font-size:1.18rem; letter-spacing:-.015em; line-height:1.05}
.wm-tail{display:block; font-size:.72rem; font-weight:500; color:var(--faint); opacity:.7;
  letter-spacing:.02em; line-height:1.1; margin-top:1px}
.nav-links{margin-left:auto; display:flex; gap:1.3rem}
.nav-links a{color:var(--muted); text-decoration:none; font-size:.93rem; font-weight:500}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--coral); font-weight:600}

/* ---- document ---- */
main{padding:clamp(2rem,5vw,3.5rem) 0 clamp(2.5rem,6vw,4rem)}
.doc{background:var(--card); border:1px solid var(--border); border-radius:20px;
  padding:clamp(1.5rem,4vw,2.8rem)}
h1{font-size:clamp(1.8rem,4vw,2.4rem); line-height:1.15; letter-spacing:-.025em; margin:0 0 .3rem; font-weight:800}
.updated{color:var(--muted); font-size:.9rem; margin:0 0 1.8rem}
h2{font-size:1.2rem; letter-spacing:-.015em; margin:2.2rem 0 .5rem; font-weight:700}
h2:first-of-type{margin-top:1.6rem}
p{margin:0 0 1rem}
ul{margin:0 0 1rem; padding-left:1.2rem}
li{margin-bottom:.45rem}
strong{font-weight:650}
hr{border:0; border-top:1px solid var(--border); margin:2rem 0}
.contact{background:var(--sand-2); border-radius:14px; padding:1.1rem 1.3rem; margin-top:.5rem}
.contact p{margin:0}

/* ---- FAQ ---- */
.lead{font-size:1.05rem; color:var(--muted); margin:0 0 1.6rem}
h3{font-size:1.03rem; letter-spacing:-.01em; margin:1.7rem 0 .4rem; font-weight:700}
.toc{display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.8rem; padding:0; list-style:none}
.toc a{display:inline-block; background:var(--sand-2); border-radius:999px; padding:.4rem .9rem;
  font-size:.87rem; font-weight:600; color:var(--muted); text-decoration:none}
.toc a:hover{background:var(--coral); color:#fff}
.callout{background:var(--coral-tint); border:1px solid rgba(242,112,79,.28); border-radius:16px;
  padding:1.3rem 1.4rem; margin:1.2rem 0 1.6rem}
.callout h3{margin-top:0}
.callout ol{margin:.6rem 0; padding-left:1.3rem}
.callout li{margin-bottom:.5rem}
.callout > p:last-child{margin-bottom:0}
.mailbtn{display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; font-weight:600;
  background:linear-gradient(180deg,var(--coral-lt),var(--coral)); color:#fff;
  border-radius:999px; padding:.7rem 1.3rem; margin-top:.5rem;
  box-shadow:0 8px 20px rgba(242,112,79,.28)}
.mailbtn:hover{filter:brightness(1.05)}
section[id]{scroll-margin-top:1.5rem}

/* ---- footer ---- */
footer{border-top:1px solid var(--border); padding:2rem 0 2.5rem}
.foot{display:flex; gap:1.2rem; flex-wrap:wrap; align-items:center}
.foot-links{margin-left:auto; display:flex; gap:1.3rem; flex-wrap:wrap}
.foot a{color:var(--muted); text-decoration:none; font-size:.9rem}
.foot a:hover{color:var(--ink); text-decoration:underline}
.legal{margin:1.3rem 0 0; font-size:.82rem; color:var(--faint)}
@media (max-width:600px){ .foot-links{margin-left:0; width:100%} }