/* Shared styles for the legal pages (privacy, data deletion).
   Tokens and type scale are lifted from index.html so the subpages read as
   part of the same site. Kept in one file, linked from both pages, so they
   cannot drift apart again. */

:root{
  --teal:#117B83;
  --teal-dk:#0C6068;
  --ink:#07464B;
  --body:#41605F;
  --mist:#DFF3F4;
  --mist-soft:#F2FAFA;
  --line:#D9EAEB;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:linear-gradient(#EFF9F9,#FFFFFF 640px);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;height:auto}
a{color:var(--teal)}
a:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}

/* Narrower than the landing page's 1200px: this is continuous prose, and a
   comfortable measure matters more here than a wide layout. */
.wrap{max-width:880px;margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}

/* ---------- header ---------- */
.top{display:flex;align-items:center;gap:13px;padding-block:clamp(16px,2.5vw,26px)}
.top img{width:clamp(38px,4vw,46px);height:auto;border-radius:24%}
.top .home{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit}
.top .name{font-weight:800;font-size:clamp(1.05rem,2vw,1.25rem);letter-spacing:.01em}
.top .toplink{
  margin-left:auto;color:var(--teal);text-decoration:none;font-weight:700;
  font-size:.9rem;letter-spacing:.06em;border:1.5px solid var(--line);
  background:#fff;border-radius:999px;padding:.55em 1.15em;white-space:nowrap;
}
.top .toplink:hover{border-color:var(--teal);background:var(--mist-soft)}

/* ---------- page head ---------- */
.pagehead{padding-block:clamp(18px,3vw,34px) clamp(20px,3vw,32px)}
.kicker{
  font-weight:800;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);
}
.pagehead h1{
  margin-top:.45em;
  font-size:clamp(2rem,5vw,3rem);font-weight:800;letter-spacing:-.025em;line-height:1.05;
}
.pagehead .updated{margin-top:.7em;color:var(--body);font-size:.92rem}
.pagehead .intro{margin-top:.9em;color:var(--body);font-size:clamp(1rem,1.5vw,1.12rem);max-width:62ch}

/* ---------- content ---------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 4px 18px rgba(7,70,75,.06);
  padding:clamp(22px,4vw,40px);
  margin-bottom:clamp(16px,2.5vw,24px);
}
.card h2{
  font-size:clamp(1.12rem,2.1vw,1.35rem);font-weight:800;letter-spacing:-.01em;
  line-height:1.25;margin-top:2.1em;
}
.card > h2:first-child{margin-top:0}
.card p{color:var(--body);margin-top:.8em;max-width:68ch}
.card ul,.card ol{color:var(--body);margin-top:.8em;padding-left:1.35em;max-width:68ch}
.card li{margin-top:.5em;line-height:1.55}
.card li::marker{color:var(--teal)}
.card strong{color:var(--ink)}

/* Callout for the one thing we most want read on each page. */
.note{
  background:var(--mist-soft);border:1px solid var(--line);border-left:3px solid var(--teal);
  border-radius:12px;padding:clamp(16px,2.4vw,22px);margin-top:1.4em;
}
.note p{margin-top:0}
.note p + p{margin-top:.7em}

code{
  background:var(--mist);color:var(--teal-dk);
  padding:.15em .5em;border-radius:5px;font-size:.92em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line);padding-block:clamp(26px,3.8vw,44px);
  margin-top:clamp(28px,4.5vw,60px);background:var(--mist-soft);
}
footer .frow{display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(18px,3vw,34px)}
footer img{width:32px;height:auto;border-radius:24%}
footer a{color:var(--body);text-decoration:none;font-size:.92rem;display:inline-block;padding-block:.5em}
footer a:hover{color:var(--ink);text-decoration:underline}
footer .copy{margin-left:auto;color:var(--body);font-size:.92rem}

@media (max-width:560px){
  footer .copy{margin-left:0;width:100%}
}