/* StagingPlan — the look of the two legal pages.
 *
 * ONE FILE FOR BOTH, and shared with nothing else. terms.html and privacy.html
 * are the only prose-only pages on the site; index.html inlines its styles
 * because it is one page with one job, and duplicating forty lines of it twice
 * more is how the three of them drift apart.
 *
 * The tokens are index.html's, unchanged. If the landing page's palette moves,
 * move these with it — they are meant to look like the same company. */

:root{
  --ink:#363535; --ink-strong:#1F1F1F; --ink-soft:#6E6B69;
  --line:#E6E2DD; --paper:#FFFFFF; --paper-warm:#FAF8F5;
  --accent:#9B6841; --accent-soft:#F3EAE2;
  --track:0.49px; --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
     font:300 16px/1.72 Poppins,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
     letter-spacing:var(--track);-webkit-font-smoothing:antialiased}
.wrap{max-width:940px;margin:0 auto;padding:0 24px}
a{color:var(--accent)}

nav{display:flex;align-items:center;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}
.mark{font-weight:500;letter-spacing:1.2px;text-transform:uppercase;font-size:15px;color:var(--ink-strong);
      text-decoration:none}
.mark span{color:var(--accent)}
nav .sp{margin-left:auto}
.btn{display:inline-block;border:1px solid var(--line);background:var(--paper);color:var(--ink);
     border-radius:999px;padding:11px 22px;font-size:14px;letter-spacing:.5px;cursor:pointer;
     text-decoration:none;font-family:inherit;font-weight:400}
.btn:hover{border-color:var(--accent);color:var(--accent)}

/* ── The document itself ──
 * Narrower than the landing page's 940. This is the one kind of page people
 * actually have to read a paragraph at a time, and 34em is where that stops
 * being work. */
main{max-width:36em;margin:0 auto;padding:64px 0 40px}
h1{font-size:clamp(28px,4.6vw,38px);line-height:1.2;font-weight:300;margin:0 0 10px;
   color:var(--ink-strong);letter-spacing:0}
.stamp{font-size:13.5px;color:var(--ink-soft);margin:0 0 44px}
h2{font-size:20px;font-weight:500;color:var(--ink-strong);margin:46px 0 14px;letter-spacing:0}
h2:first-of-type{margin-top:0}
h3{font-size:16.5px;font-weight:500;color:var(--ink-strong);margin:30px 0 10px}
p{margin:0 0 16px}
ul{margin:0 0 16px;padding-left:22px}
li{margin:0 0 9px}
strong,b{font-weight:500;color:var(--ink-strong)}

/* The plain-language summary that opens each page. It is not the agreement and
 * says so — but it is the part most people will actually read, so it goes
 * first and it is honest. */
.gist{background:var(--paper-warm);border:1px solid var(--line);border-radius:var(--radius);
      padding:22px 24px 8px;margin:0 0 44px}
.gist h2{margin:0 0 12px;font-size:15px;text-transform:uppercase;letter-spacing:1.1px;
         color:var(--ink-soft);font-weight:500}
.gist p:last-child{margin-bottom:14px}

/* Something the reader should not skim past. Used sparingly — three times
 * across both pages — or it stops meaning anything. */
.note{border-left:2px solid var(--accent);background:var(--accent-soft);
      border-radius:0 var(--radius) var(--radius) 0;padding:16px 20px;margin:0 0 20px}
.note p:last-child{margin-bottom:0}

/* UNFINISHED, AND SAYING SO. The entity was TO BE CONFIRMED for a few hours on
 * 9 September 2026 before Boing Media Limited went in, and this is what marked
 * it meanwhile. Kept, because the guard behind it is worth keeping: anything
 * on these pages that is not settled gets this class AND the literal words
 * TO BE CONFIRMED, health.php fails its "Legal pages name the company" check
 * while either page carries them, and test/ui/legal-uitest.mjs asserts health
 * is reporting it. A legal page that names nobody is worse than no legal page,
 * so it is deliberately loud and impossible to ship quietly. */
.tbc{background:#FDF0CB;border-bottom:1px dashed #B08B2E;color:#6B5316;
     font-weight:500;padding:0 3px}

footer.foot{padding:40px 0 70px;font-size:13.5px;color:var(--ink-soft);
            display:flex;gap:18px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line)}
footer.foot .sp{margin-left:auto}

@media (max-width:620px){
  main{padding:44px 0 32px}
  h2{margin-top:38px}
}