/* Shared styling for the standalone pages (terms, privacy, returns).
 *
 * index.html keeps its CSS inline and self-contained. These pages are mostly
 * long-form text, so they share one small stylesheet rather than carrying a
 * copy of the whole site's CSS each.
 *
 * The tokens are copied from index.html's :root. If the palette changes
 * there, change it here too — there is no build step to do it for us. The
 * file is the biltong site's page.css with that site's browns swapped for
 * this site's greens. */

:root{
  --ink:#171c14; --ink-2:#1f261b; --panel:#243021;
  --cream:#dbd7c1; --cream-dim:#a7a893; --straw:#b9b494;
  --leaf:#445b43; --leaf-light:#6f8c62;
  --line:#3a4a35;
  --max:1080px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--cream-dim);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:1.02rem; line-height:1.65;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}

header{border-bottom:1px solid var(--line); background:var(--ink-2)}
.bar{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 20px}
.brand{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  font-size:.95rem; text-decoration:none; color:var(--cream);
}
.brand span{color:var(--leaf-light)}
.back{color:var(--cream-dim); text-decoration:none; font-size:.9rem}
.back:hover{color:var(--straw)}

main{padding:64px 0 80px}
.doc{max-width:74ch}

h1{
  font-family:Georgia,"Times New Roman",serif;
  color:var(--cream); font-size:clamp(1.9rem,4vw,2.7rem);
  line-height:1.15; margin:0 0 10px;
}
h2{
  font-family:Georgia,"Times New Roman",serif;
  color:var(--cream); font-size:1.28rem; line-height:1.3;
  margin:42px 0 12px; padding-top:22px; border-top:1px solid var(--line);
}
h3{color:var(--cream); font-size:1.02rem; margin:26px 0 8px}
p,li{margin:0 0 14px}
ul,ol{padding-left:22px; margin:0 0 18px}
a{color:var(--straw)}
strong{color:var(--cream)}

.updated{color:var(--cream-dim); opacity:.7; font-size:.9rem; margin-bottom:0}

/* Plain-language summary at the top of each page. Nobody reads terms; this
   is the bit that actually gets read, so it must be true on its own. */
.summary{
  background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--leaf-light);
  padding:20px 22px; margin:30px 0 10px; border-radius:4px;
}
.summary p:last-child{margin-bottom:0}
.summary h2{margin:0 0 10px; padding:0; border:0; font-size:1.05rem}

table{border-collapse:collapse; width:100%; margin:0 0 18px; font-size:.97rem}
th,td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top}
th{color:var(--cream); font-weight:600}

footer{border-top:1px solid var(--line); padding:34px 0; font-size:.9rem}
footer a{color:var(--cream-dim)}

@media (max-width:640px){
  main{padding:40px 0 56px}
}