/* Shared styles for privacy-policy.html and terms-of-service.html.
   Mirrors the palette and type of index.html. */

:root{
  --ink:#1B3A37;
  --paper:#ECECEE;
  --accent:#FFA53C;
  --white:#fff;
  --muted:#5C6F6C;
  --shell:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:32px}

/* the supplied SVG is a #1B3A37 square with the wordmark inset —
   crop to the wordmark (viewBox 9 331 783 140) so it sits flush */
.logo{
  display:block;
  height:34px;
  aspect-ratio:783/140;
  background:url("high-resolution-color-logo.svg") no-repeat;
  background-size:102.171% 571.429%;
  background-position:52.941% 50.152%;
}

/* ---------- top bar ---------- */
.legal-nav{background:var(--ink);color:var(--paper)}
.legal-nav-in{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:24px;
}
.back{
  color:rgba(236,236,238,.72);
  text-decoration:none;
  font-size:.9375rem;
  transition:color .18s ease;
}
.back:hover{color:var(--accent)}

/* ---------- document ---------- */
.legal{padding-block:72px 96px}
.prose{max-width:78ch;margin-inline:auto}

.prose h1,.prose h2,.prose h3{
  font-family:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:1.15;
  text-wrap:balance;
}
.prose h1{font-size:clamp(2.1rem,4vw,3rem);margin:0 0 .5rem;letter-spacing:-0.035em}
.prose h2{font-size:1.5rem;margin:3rem 0 1rem}
.prose h3{font-size:1.125rem;margin:2rem 0 .6rem}

.prose p{margin:0 0 1.15rem;text-wrap:pretty}
.prose ul{margin:0 0 1.4rem;padding-left:1.35rem}
.prose li{margin-bottom:.55rem;text-wrap:pretty}
.prose li::marker{color:var(--accent)}
.prose strong{font-weight:600}

.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose a:hover{color:#C2701A}

.prose hr{
  border:0;
  border-top:1px solid rgba(27,58,55,.12);
  margin:2.75rem 0;
}

/* "Last Updated" sits right under the H1 */
.prose .updated{
  color:var(--muted);
  font-size:.9375rem;
  margin-bottom:2rem;
}
.prose .updated strong{font-weight:600}

/* ---------- footer (matches index.html) ---------- */
.footer{
  background:var(--ink);
  color:var(--paper);
  padding-block:36px;
}
.footer-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px 32px;
}
.footer-links{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.footer-links a{
  color:rgba(236,236,238,.66);
  text-decoration:none;
  font-size:.9375rem;
  transition:color .18s ease;
}
.footer-links a:hover{color:var(--accent)}
.footer small{color:rgba(236,236,238,.6);font-size:.8125rem}

@media (max-width:960px){
  .legal{padding-block:56px 72px}
  .footer-in{justify-content:center;text-align:center;flex-direction:column}
}
@media (max-width:560px){
  .shell{padding-inline:20px}
  .logo{height:28px}
  .prose h2{font-size:1.3125rem;margin-top:2.5rem}
  .footer-links{gap:18px;justify-content:center}
}