/* Shared chrome for privacy.html and terms.html. The home page keeps its own
   self-contained <style> block; these two are the only pages that share, so a
   single stylesheet keeps them from drifting apart. */
@font-face{font-family:'Nunito Sans';src:url(fonts/nunito-var.woff2) format('woff2');
  font-weight:200 1000;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url(fonts/lora-var.woff2) format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap}

:root{
  /* v2 palette, sampled from site-concept2.jpeg */
  --green:#243836; --green-2:#314744; --green-deep:#1B2B29; --green-soft:#85957B;
  --tint:#E7EAE1; --page:#F4F5F0; --white:#FCFDF9;
  --ink:#232B28; --muted:#5A6360; --line:rgba(36,56,54,.17); --line-2:rgba(36,56,54,.10);
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --sans:'Nunito Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --gutter:24px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--page);color:var(--ink);
  font-size:16.5px;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:var(--green)}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.18}
.wrap{max-width:820px;margin:0 auto;padding:0 var(--gutter)}

/* nav */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line-2)}
.nav-in{max-width:1200px;margin:0 auto;padding:0 var(--gutter);display:flex;
  align-items:center;justify-content:space-between;gap:20px;height:78px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:44px;width:auto;flex:none}
.back{font-size:.76rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;color:var(--ink)}
.back:hover{color:var(--green-soft)}

/* page head */
.head{background:var(--white);border-bottom:1px solid var(--line-2);padding:64px 0 52px}
.head .eyebrow{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--green-soft);margin-bottom:14px}
.head h1{font-size:clamp(2.1rem,4.4vw,3rem)}
.head p{color:var(--muted);font-size:.9rem;margin-top:16px}

/* body copy */
main{padding:56px 0 76px}
main h2{font-size:1.35rem;margin:44px 0 14px}
main h2:first-of-type{margin-top:0}
main h3{font-family:var(--sans);font-size:.95rem;font-weight:600;margin:26px 0 8px}
main p{margin-bottom:16px;color:#474F4C}
main ul,main ol{margin:0 0 18px 22px;color:#474F4C}
main li{margin-bottom:8px}
main table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:.93rem}
main th,main td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-2);
  vertical-align:top}
main th{background:var(--tint);font-weight:600;font-size:.82rem;letter-spacing:.04em;
  text-transform:uppercase}
main a{word-break:break-word}

/* the unresolved bits, deliberately loud so they cannot ship by accident */
/* No white-space:nowrap here. Several of these markers run to a full sentence,
   and nowrap pushed terms.html 164px wider than the viewport. */
.todo{background:#FFF3D6;color:#6B4E00;padding:1px 7px;font-weight:600;
  font-size:.92em;border-bottom:1.5px solid #D9A400;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.draft{background:#FFF3D6;border:1.5px solid #D9A400;padding:20px 22px;margin-bottom:36px}
.draft h2{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#6B4E00;margin:0 0 10px}
.draft p{color:#6B4E00;font-size:.9rem;margin-bottom:0}

/* footer */
.foot-bar{background:var(--green-deep);color:#9FB3A3}
.foot-bar .in{max-width:1200px;margin:0 auto;padding:17px var(--gutter);display:flex;
  align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot-bar p,.foot-bar a{font-size:.79rem;color:#9FB3A3;text-decoration:none}
.foot-bar a:hover{color:#F3F7F2}
.foot-bar nav{display:flex;gap:16px;align-items:center}
.foot-bar .sep{opacity:.4}

@media (max-width:680px){
  .brand img{height:36px}
  .head{padding:46px 0 38px}
  main{padding:42px 0 56px}
  .foot-bar .in{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}