/* Shared styles for the legal pages (privacy, terms, security).
   Tokens mirror index.html so the pages read as the same site. */
:root{
  --navy-900:#0A1426; --navy-800:#0C2742; --navy-700:#143657;
  --slate-600:#475569; --slate-500:#6B7A90;
  --n-0:#FFFFFF; --n-50:#FAF9F5; --n-100:#F4F2EB; --n-200:#E5E1D5; --n-300:#D4CFC1;
  --teal-700:#0A6F64; --teal-600:#0D8A7C; --teal-500:#12A594; --teal-100:#CFEEE8; --teal-50:#E6F6F3;
  --gold-50:#FBF3E2; --gold-700:#946315;
  --font-serif:'Newsreader',Georgia,'Times New Roman',serif;
  --font-sans:'Hanken Grotesk',ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --ls-tight:-0.021em; --ls-eyebrow:0.12em;
  --radius-sm:10px; --radius-md:14px;
  --shadow-sm:0 1px 2px rgba(12,39,66,.06), 0 1px 3px rgba(12,39,66,.05);
  --ring:0 0 0 3px rgba(18,165,148,.28);
  --gutter:28px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--n-50);color:var(--navy-800);
  font-family:var(--font-sans);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
a{color:var(--teal-600);text-decoration:none;font-weight:500}
a:hover{text-decoration:underline}
::selection{background:var(--teal-100);color:var(--navy-900)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}

.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gutter)}

header{position:sticky;top:0;z-index:50;background:rgba(250,249,245,.88);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--n-200)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand img{display:block;height:32px;width:auto}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{color:var(--slate-600);font-weight:500;font-size:.93rem}
.nav-links a[aria-current="page"]{color:var(--navy-800);font-weight:600}
.nav-links a:hover{color:var(--navy-800);text-decoration:none}
@media(max-width:640px){.nav-links{gap:14px}.nav-links a{font-size:.85rem}}

/* padding-top/bottom only: shorthand would wipe .wrap's side gutter */
.page{display:grid;grid-template-columns:240px 1fr;gap:56px;padding-top:56px;padding-bottom:80px}
@media(max-width:860px){.page{grid-template-columns:1fr;gap:0;padding-top:36px;padding-bottom:64px}}

.toc{position:sticky;top:92px;align-self:start;font-size:.9rem}
.toc p{margin:0 0 10px;color:var(--slate-500);font-weight:700;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;font-size:.72rem}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--n-200)}
.toc li a{display:block;padding:6px 0 6px 14px;color:var(--slate-600);font-weight:500}
.toc li a:hover{color:var(--navy-800);text-decoration:none;border-left:2px solid var(--teal-500);margin-left:-1px}
/* On a phone a twelve-item list would push the title below the fold; the
   headings and the cross-links at the end of each page do the job instead. */
@media(max-width:860px){.toc{display:none}}

article{max-width:760px;min-width:0}
.eyebrow{display:inline-block;color:var(--teal-600);font-weight:700;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;font-size:.74rem}
article h1{
  font-family:var(--font-serif);font-weight:600;letter-spacing:var(--ls-tight);
  font-size:clamp(2rem,4vw,2.8rem);line-height:1.12;margin:10px 0 10px;color:var(--navy-800);
}
.meta{color:var(--slate-500);font-size:.9rem;margin:0 0 28px}
.meta .mono{font-family:var(--font-mono)}
.lead{font-size:1.12rem;color:var(--slate-600);margin:0 0 28px;line-height:1.6}
article h2{
  font-family:var(--font-serif);font-weight:600;letter-spacing:var(--ls-tight);
  font-size:1.55rem;margin:44px 0 12px;color:var(--navy-800);scroll-margin-top:92px;
}
article h3{font-size:1.08rem;font-weight:700;margin:26px 0 8px;color:var(--navy-800)}
article p{margin:0 0 14px;color:var(--navy-800)}
article ul,article ol{margin:0 0 16px;padding-left:22px}
article li{margin:0 0 7px}
article li::marker{color:var(--teal-600)}
article strong{color:var(--navy-900)}
article code{font-family:var(--font-mono);font-size:.88em;background:var(--n-100);padding:1px 6px;border-radius:5px}

.callout{
  background:var(--n-0);border:1px solid var(--n-200);border-left:4px solid var(--teal-500);
  border-radius:var(--radius-sm);padding:16px 18px;margin:18px 0 22px;box-shadow:var(--shadow-sm);
}
.callout.gold{border-left-color:#C8922B;background:var(--gold-50)}
.callout p:last-child{margin-bottom:0}
.callout b{color:var(--navy-900)}

table{width:100%;border-collapse:collapse;margin:8px 0 22px;font-size:.93rem;background:var(--n-0);border:1px solid var(--n-200);border-radius:var(--radius-sm);overflow:hidden}
th,td{text-align:left;vertical-align:top;padding:11px 13px;border-bottom:1px solid var(--n-200)}
th{background:var(--n-100);color:var(--navy-800);font-weight:700;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase}
tr:last-child td{border-bottom:0}
@media(max-width:640px){
  table,thead,tbody,tr,th,td{display:block}
  thead{display:none}
  tr{border-bottom:1px solid var(--n-200);padding:8px 0}
  td{border:0;padding:5px 13px}
  td::before{content:attr(data-th);display:block;font-size:.72rem;font-weight:700;color:var(--slate-500);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
}

.secgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:14px 0 26px}
@media(max-width:640px){.secgrid{grid-template-columns:1fr}}
.secgrid .card{background:var(--n-0);border:1px solid var(--n-200);border-radius:var(--radius-md);padding:20px;box-shadow:var(--shadow-sm)}
.secgrid .card b{display:block;color:var(--navy-800);margin-bottom:6px;font-size:1rem}
.secgrid .card span{color:var(--slate-600);font-size:.93rem;line-height:1.55}

.legal-nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin:36px 0 0;padding-top:22px;border-top:1px solid var(--n-200);font-size:.92rem}

footer{border-top:1px solid var(--n-200);padding:36px 0 28px;color:var(--slate-500);font-size:.9rem;background:#fff}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.foot .brand img{height:26px}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a{color:var(--slate-600)}
.foot-links a:hover{color:var(--navy-800)}