/* Shared styling for the standalone legal pages (terms.html, privacy.html).
   ---------------------------------------------------------------------------
   DELIBERATELY FORMAL, NOT INVITING. These read as a legal instrument rather
   than a designed web page: small justified serif, long measure, tight
   leading, no decorative callouts, all-caps disclaimer sections per the usual
   convention for warranty and liability limitations.

   What is deliberately NOT done, and should stay that way:
   - contrast is full black-on-white. Greying the text down would be the one
     change that actually undermines Terms section 5 -- an unusual term like
     liquidated damages is easier to enforce when it was conspicuous and the
     reader had fair notice. Dense is defensible; hidden is not.
   - every section keeps a real, findable heading, and the liquidated-damages
     paragraph stays bold.
   - the acknowledgment line on the quote page stays plainly legible; that is
     the click that ties a reader to these terms.
   The site chrome (top bar) stays branded so the pages are obviously ours.
--------------------------------------------------------------------------- */
:root{
  --navy:#14293E;
  --navy-deep:#0C1B2A;
  --ice:#EBF1F6;
  --gold:#C08A22;
  --ink:#000;
  --line:#B9C6D2;
  --disp:"Barlow Condensed",Impact,sans-serif;
  --body:"Source Sans 3","Segoe UI",sans-serif;
  --legal:Georgia,"Times New Roman",Times,serif;
  --mono:"IBM Plex Mono","Courier New",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--legal);
  color:var(--ink);
  background:#fff;
  -webkit-text-size-adjust:100%;
}

/* Site chrome — kept branded, so the document is plainly ours. */
.topbar{background:var(--navy);color:#fff;border-bottom:3px solid var(--gold)}
.topbar .inner{
  max-width:1000px;margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.topbar img{height:34px;width:auto;background:#fff;border-radius:5px;padding:3px 6px}
.topbar .ttl{font-family:var(--disp);font-size:18px;letter-spacing:.06em;text-transform:uppercase;line-height:1.1}
.topbar .ttl small{display:block;font-family:var(--body);font-size:11px;letter-spacing:.09em;color:#9FC3DC;text-transform:uppercase}
.topbar .spacer{flex:1}
.topbar a.back{
  color:#CFE0EC;text-decoration:none;font-size:13px;font-family:var(--body);
  border:1px solid #2C4E73;border-radius:6px;padding:7px 13px;white-space:nowrap;
}
.topbar a.back:hover{background:var(--navy-deep);color:#fff}

/* The document itself. Long measure + small justified serif + tight leading:
   the visual language of fine print, at full contrast. */
.wrap{max-width:1000px;margin:0 auto;padding:26px 24px 80px}
.doc{
  font-size:11.5px;
  line-height:1.28;
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
}
/* 12px is about as small as this can go while staying genuinely legible at
   arm's length. Below that it stops reading as fine print and starts reading
   as an attempt to prevent reading, which is the line described above. */
@media(max-width:700px){
  .doc{font-size:12px;text-align:left;hyphens:manual}
  .wrap{padding:14px 14px 50px}
}

h1{
  font-family:var(--legal);
  font-size:12.5px;font-weight:bold;text-transform:uppercase;letter-spacing:.03em;
  text-align:center;margin-bottom:1px;
}
.stamp{
  font-family:var(--legal);font-size:10.5px;text-align:center;
  border-bottom:1px solid var(--ink);padding-bottom:5px;margin-bottom:8px;
}
/* Headings sit tight against their paragraph so sections run together into a
   single block of text rather than reading as browsable chunks. */
h2{
  font-family:var(--legal);
  font-size:11.5px;font-weight:bold;text-transform:uppercase;letter-spacing:.01em;
  margin:8px 0 0;text-align:left;
}
h3{font-size:11.5px;font-weight:bold;font-style:italic;margin:4px 0 0;text-align:left}
p{margin:0 0 4px}
ul{margin:0 0 4px 22px}
li{margin-bottom:0}
a{color:var(--ink);text-decoration:underline}
a:hover{color:var(--navy)}
strong,b{font-weight:bold}

/* Formerly the highlighted callouts. Now plain prose that still reads as
   important — bold, not boxed, not coloured. */
.callout{margin:0 0 7px}
.callout p{margin:0 0 7px;font-weight:bold}

/* Warranty and liability limitations in caps, the long-standing convention
   for conspicuous disclaimers. Applied in CSS so the underlying text is
   unchanged and screen readers still announce it normally. */
.caps{text-transform:uppercase}

.foot{
  margin-top:10px;padding-top:6px;border-top:1px solid var(--ink);
  font-size:10.5px;text-align:left;
}
.foot a{white-space:nowrap}