/* Shared styling for the site's plain pages — the privacy notice and the four mailing-list
   outcome pages. It exists so those pages can be a heading and a paragraph each instead of
   fifty lines of copied CSS, and so a change of palette reaches all of them at once.
   The home page keeps its own inline styles: it is one long designed document, not a page
   of this kind. */
:root{
  color-scheme:dark;
  --ground:#070b14;--panel:#0e1728;--edge:#1e2c44;--edge-soft:#172441;
  --ink:#d6e4ff;--dim:#8497b8;--faint:#5d6e91;--accent:#6fd6ff;--ok:#5be08f;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,"Roboto Mono",monospace;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--ink);line-height:1.65;
  background:radial-gradient(900px 600px at 4% 2%,#0f1b33 0%,rgba(15,27,51,0) 55%),var(--ground);
  -webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin:0 auto;padding:0 22px}
a{color:var(--accent)}
header{border-bottom:1px solid var(--edge-soft);padding:18px 0}
header .wrap{display:flex;align-items:center;gap:10px;max-width:1080px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);
  text-decoration:none}
.brand img{width:22px;height:22px;border-radius:50%}
main{padding:44px 0 64px}
h1{font-size:clamp(26px,4vw,34px);margin:0 0 6px;letter-spacing:-.01em}
.stamp{color:var(--faint);font-family:var(--mono);font-size:13px;margin:0 0 30px}
h2{font-size:19px;margin:34px 0 8px}
p,li{color:var(--dim)}
ul{padding-left:20px}
table{width:100%;border-collapse:collapse;margin:12px 0;font-size:14px}
th,td{text-align:left;padding:9px 10px;border:1px solid var(--edge);vertical-align:top;
  color:var(--dim)}
th{color:var(--ink);background:var(--panel);font-weight:600}
.note{border:1px solid var(--edge);border-left:3px solid var(--accent);border-radius:8px;
  padding:14px 16px;margin:22px 0;background:rgba(14,23,40,.6)}
.note p{margin:0;color:var(--dim);font-size:14px}
footer{border-top:1px solid var(--edge-soft);padding:24px 0 40px;color:var(--faint);font-size:13px}

/* The mailing-list outcome pages: one short statement, centred, nothing to do but read it. */
.outcome{text-align:center;padding:72px 0 40px}
.outcome .mark{font-size:44px;line-height:1;margin-bottom:14px}
.outcome h1{margin-bottom:14px}
.outcome p{max-width:52ch;margin:0 auto 12px}
.outcome .btn{display:inline-block;margin-top:22px;padding:11px 20px;border-radius:10px;
  font-weight:700;text-decoration:none;color:#04121f;
  background:linear-gradient(180deg,#8fe3ff,#4bb6ef)}

/* ---- cookie consent (marketing only) ------------------------------------- */
/* Declining is as easy as accepting: same size, same weight, side by side, no dark pattern
   and no "manage preferences" maze. The banner only exists when measurement is configured. */
#cc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
  background: rgba(8,12,22,.97); border-top: 1px solid var(--edge, #1e2c44);
  box-shadow: 0 -14px 40px rgba(0,0,0,.5); backdrop-filter: blur(6px); }
#cc .cc-in { max-width: 920px; margin: 0 auto; padding: 16px 20px 18px;
  display: grid; gap: 6px; }
#cc .cc-t { margin: 0; font-weight: 600; }
#cc .cc-b { margin: 0; color: var(--dim, #8497b8); font-size: 13.5px; line-height: 1.55; }
#cc .cc-a { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
#cc .cc-a .btn { flex: 0 0 auto; min-width: 132px; text-align: center; }
@media (max-width: 560px) { #cc .cc-a .btn { flex: 1 1 auto; } }

/* ---- the sign-up form, shared by the pages that carry one ------------------ */
/* It lives here rather than in each page's own <style> because two pages now use it, and a
   second copy is how two forms end up looking — and eventually behaving — differently. */
.signup-block { border-top: 1px solid var(--edge-soft); margin-top: 40px; padding-top: 34px; }
.signup-block h2 { margin: 0 0 6px; }
.signup { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 0; max-width: 520px; }
.signup input[type=email] { flex: 1 1 260px; padding: 14px 16px; border-radius: 10px;
  border: 1px solid var(--edge); background: #0b1424; color: inherit; font: inherit; }
.signup input[type=email]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* The tick sits on its own row under the field: a consent you have to hunt for is not
   informed consent. */
.consent { flex: 1 1 100%; display: flex; gap: 10px; align-items: flex-start;
  color: var(--dim); font-size: 13px; line-height: 1.5; }
.consent input[type=checkbox] { margin-top: 3px; accent-color: var(--accent);
  width: 16px; height: 16px; flex: none; }
.btn { display: inline-block; font-weight: 700; border-radius: 10px; padding: 11px 20px;
  font-size: 15px; cursor: pointer; border: 1px solid transparent; text-decoration: none; }
.btn-primary { color: #04121f; background: linear-gradient(180deg, #8fe3ff, #4bb6ef); }
.fineprint { color: var(--dim); font-size: 13px; margin: 12px 0 0; max-width: 520px; }