/* TNX Data — text pages (security, privacy, terms, dpa, 404)
 *
 * A separate, small stylesheet rather than a shared extraction from
 * index.html. That file's stylesheet is pixel-tuned and source-order
 * sensitive — the handover doc flags three separate rules that break if they
 * are moved — so it is left exactly as it is. The tokens below are copied
 * from its :root; keep them in step by hand if the palette changes.
 */
:root{
  --charcoal:#212427; --charcoal-800:#2A2D30; --charcoal-700:#3A3D40;
  --charcoal-600:#4A4D50; --charcoal-500:#55585B;
  --slate:#F2ECE5; --slate-100:#E7E0D7; --slate-rule:#BDBBB5;
  --white:#FFFFFF; --magenta:#FF75EB;
  --cool-700:#666B71; --cool-400:#A8ADB3; --cool-200:#D5D8DC;
  --harbour-600:#426E9C; --harbour-400:#7FA6CE;

  --display:Georgia,'Times New Roman',serif;
  --body:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1280px; --wrap-wide:1400px; --gut:clamp(20px,5vw,64px);
  --r-lg:24px; --r:16px; --r-sm:12px; --pill:999px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;font-family:var(--body);color:var(--charcoal);background:var(--white);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:74ch}

a{color:var(--harbour-600)}
a:hover{color:var(--charcoal)}

.skip{position:absolute;left:-9999px;top:0;background:var(--charcoal);color:#fff;
  padding:.7rem 1.2rem;z-index:99;text-decoration:none}
.skip:focus{left:0}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ─── header ─────────────────────────────────────────────────────── */
/* The same floating pill as the home page, carrying only the logo and the Log
   in button — these pages have no in-page sections to navigate to. Values are
   copied from index.html's inline stylesheet; keep the two in step, and note
   the horizontal padding is one clamp on both sides so the logo's inset from
   the left matches the button's from the right. */
.hdr{position:fixed;inset-inline:0;top:18px;z-index:60}
.hdr .wrap{max-width:var(--wrap-wide)}
.bar{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1.5rem;
  padding:.62rem clamp(1.05rem,calc((100vw - var(--wrap))/2),
    calc((var(--wrap-wide) - var(--wrap))/2));border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.25);background:rgba(33,36,39,.85);
  backdrop-filter:blur(12px);transition:box-shadow .3s,background .3s}
.hdr.stuck .bar{box-shadow:0 10px 34px rgba(0,0,0,.30);background:rgba(33,36,39,.93)}
.bar img{width:clamp(96px,10vw,120px)}
.bar>a:first-child{justify-self:start}
@media (max-width:900px){
  .hdr{top:12px}
  .bar{padding:.55rem 1.05rem;gap:1rem}
}

.btn{display:inline-block;font-family:var(--body);font-size:.87rem;font-weight:600;
  letter-spacing:.015em;padding:.78rem 1.6rem;border:1.5px solid var(--charcoal);
  background:var(--charcoal);color:#fff;text-decoration:none;cursor:pointer;
  border-radius:var(--pill);transition:.18s;white-space:nowrap}
.btn:hover{background:var(--charcoal-700);border-color:var(--charcoal-700);color:#fff}
.bar .btn{justify-self:end;padding:.55rem 1.2rem;font-size:.8rem;background:#fff;
  border-color:#fff;color:var(--charcoal)}
.bar .btn:hover{background:var(--slate-100);border-color:var(--slate-100);color:var(--charcoal)}
.btn-dark{background:var(--charcoal);border-color:var(--charcoal);color:#fff}

/* ─── page body ──────────────────────────────────────────────────── */
/* The top padding clears the fixed header — it sits 18px down and is roughly
   60px tall, so anything under ~100px would start the first line beneath it. */
main{padding:clamp(124px,13vw,168px) 0 clamp(64px,8vw,112px)}

.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.17em;
  text-transform:uppercase;margin:0 0 1.5rem;color:var(--cool-700)}

h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.012em;margin:0}
h1{font-size:clamp(2.1rem,4.4vw,3.1rem);line-height:1.08}
h2{font-size:clamp(1.4rem,2.3vw,1.85rem);line-height:1.2;margin:3.2rem 0 .9rem}
h3{font-size:1.1rem;line-height:1.34;margin:2rem 0 .5rem}

.lede{font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.62;color:var(--charcoal-500);
  margin:1.4rem 0 0;max-width:70ch}

p,li{max-width:74ch}
ul,ol{padding-left:1.3rem}
li{margin-bottom:.5rem}

.updated{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cool-700);margin-top:2.6rem}

/* A statement of what is true today, not a badge. Cool Grey, never Risk Red
   and never accent — see STYLE_GUIDE.md on honesty markers. */
.note{background:var(--slate);border-left:3px solid var(--slate-rule);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:1.15rem 1.4rem;margin:1.6rem 0;
  font-size:.95rem;color:var(--charcoal-500);max-width:74ch}
.note b{color:var(--charcoal)}

.holding{margin-top:2.6rem;padding:2rem 2.2rem;background:var(--slate);
  border-radius:var(--r);max-width:74ch}
.holding p{margin:0 0 1.2rem}
.holding p:last-child{margin:0}

/* ─── footer ─────────────────────────────────────────────────────── */
footer{background:var(--charcoal);color:var(--cool-400);padding:clamp(52px,6vw,76px) 0 3rem;
  border-top:1px solid var(--charcoal-700)}
.frow{display:flex;flex-wrap:wrap;gap:2rem;align-items:flex-start;justify-content:space-between}
footer img{width:118px;opacity:.94}
.flinks{display:flex;gap:1.6rem;list-style:none;padding:0;margin:0;flex-wrap:wrap}
footer a{color:var(--cool-400);text-decoration:none;font-size:.86rem}
footer a:hover{color:#fff}
.legal{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--charcoal-700);
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;
  font-size:.79rem;line-height:1.6;color:var(--charcoal-500)}
/* footer a sets .86rem, which made these links a size larger than the spans
   beside them and left the baselines out of step. One size for the whole row. */
.legal a{font-size:inherit;line-height:inherit}

/* ─── 404 ────────────────────────────────────────────────────────── */
.gone{min-height:52vh;display:grid;align-content:center}