/* Shared by terms.html, privacy.html and dmca.html.
   CLAUDE.md kept CSS inline per page while there were two; at four it said to pull the tokens into
   one stylesheet rather than copy them a fourth time, which is what this is. index.html stays a
   single file: it is the marketing page and shares almost none of this.
   The values here mirror index.html. If a token changes there, change it here too. */
:root{
  --sky:#82B8E6;
  --grass:#79B145; --grass-light:#8CC24E; --grass-deep:#4B7C3F;
  --honey:#FDC44E; --honey-deep:#D98E22;
  --rose:#E2718F; --rose-deep:#A0354F;
  --mint:#C0F3E6; --mint-deep:#63BFA6;
  --cream:#FFF7E8; --paper:#FFFDF7;
  --ink:#33261F; --ink-soft:#6B564A;
  --display:"Baloo 2",Verdana,sans-serif;
  --body:"Nunito",system-ui,sans-serif;
  --edge:3px solid #33261F;
  --lift:0 6px 0 rgba(51,38,31,.14);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--cream); color:var(--ink); font-family:var(--body);
  /* lighter and looser than the marketing page: these are read, not scanned */
  font-size:17px; font-weight:400; line-height:1.7; -webkit-font-smoothing:antialiased;
  /* iOS Safari otherwise inflates text of its own accord when a phone is turned sideways */
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  /* bare domains and the contact email have nowhere to break on a 320px screen */
  overflow-wrap:break-word;
}
.wrap{width:min(760px,92vw); margin-inline:auto}
.sticker{background:var(--paper); border:var(--edge); border-radius:22px; box-shadow:var(--lift)}

.top{padding:26px 0 6px; text-align:center}
.mark{display:inline-block; font-family:var(--display); font-weight:800; font-size:1.3rem;
  padding:.4rem 1.15rem; text-decoration:none; color:var(--ink); border-radius:999px}
.mark span{color:var(--rose-deep)}

.eyebrow{display:block; text-align:center; font-family:var(--display); font-weight:700;
  color:var(--rose-deep); letter-spacing:.12em; text-transform:uppercase; font-size:.8rem;
  margin-top:1.6rem}
h1{font-family:var(--display); font-weight:800; font-size:clamp(2rem,6vw,3rem); line-height:1.1;
  margin:.2rem 0 .2rem; text-align:center; text-shadow:3px 3px 0 #fff}
.updated{text-align:center; color:var(--ink-soft); font-weight:600; margin:0 0 1.6rem}

main.doc{padding:1.6rem 1.6rem .4rem; margin-bottom:2rem}
.intro{font-weight:600}
h2{font-family:var(--display); font-weight:700; font-size:1.35rem; line-height:1.25;
  margin:2rem 0 .5rem}
h2:first-of-type{margin-top:.4rem}
h3{font-family:var(--display); font-weight:700; font-size:1.1rem; margin:1.4rem 0 .4rem}
p{margin:0 0 1rem}
ul,ol{margin:0 0 1rem; padding-left:1.3rem}
li{margin-bottom:.5rem}
a{color:var(--rose-deep)}
strong{font-weight:700}

/* the privacy policy's data table. It is wider than a phone, so it scrolls in its own box
   rather than pushing the page sideways. */
.scroll{overflow-x:auto; margin:0 0 1rem; border:2px solid rgba(51,38,31,.18); border-radius:14px}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:.95rem}
th,td{text-align:left; padding:.7rem .9rem; border-bottom:2px solid rgba(51,38,31,.12);
  vertical-align:top}
th{font-family:var(--display); font-weight:700; background:var(--mint)}
tr:last-child td{border-bottom:0}

/* the other two documents, linked from the foot of each one */
.also{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:0 0 3rem}
.also a{display:inline-flex; align-items:center; min-height:44px; padding:.5rem 1.3rem;
  border-radius:999px; text-decoration:none; color:var(--ink); font-family:var(--display);
  font-weight:700; font-size:1rem; background:var(--paper); border:var(--edge);
  box-shadow:0 6px 0 rgba(51,38,31,.18); transition:transform .12s ease, box-shadow .12s ease}
.also a:hover{transform:translateY(3px); box-shadow:0 3px 0 rgba(51,38,31,.18)}
.also a[aria-current="page"]{background:var(--mint); box-shadow:0 6px 0 var(--mint-deep)}

footer{background:var(--grass); border-top:var(--edge); color:#1F3A1C; padding:clamp(36px,5vw,56px) 0 0}
footer .wrap{width:min(1120px,92vw); display:flex; justify-content:space-between; gap:24px;
  flex-wrap:wrap; padding-bottom:32px}
footer a{color:#1F3A1C}
.foot-note{font-size:.95rem; max-width:40ch; font-weight:600}
.kerb{height:26px; background:var(--grass-deep)}

a:focus-visible{outline:3px solid var(--rose-deep); outline-offset:3px; border-radius:10px}
/* inline links are only as tall as their own text, which is a poor target for a fingertip */
@media (pointer:coarse){
  main.doc a{display:inline-block; padding:.7rem 0}
  /* the horizontal padding and min-width are for the short Privacy / Terms / DMCA labels, which
     are narrower than 44px on their own */
  .foot-note a{display:inline-block; padding:.7rem .4rem; min-width:44px; text-align:center}
  .also a{padding-block:.5rem}   /* already 44px tall, do not double it */
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .also a{transition:none}
}