/* Cert to Table site: shared tokens, header, footer and the plain legal pages.
   Colors and type come from the app (lib/design_system): navy #12233A,
   green #1FB57A, amber #F5A623, off-white #F7F8F5; Manrope ExtraBold display,
   DM Sans body. Red is kept for "no signal" and safety cues only. */
@font-face{font-family:"Manrope";font-weight:800;font-display:swap;src:url("/assets/fonts/Manrope-ExtraBold.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-weight:400;font-display:swap;src:url("/assets/fonts/DMSans-Regular.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-weight:700;font-display:swap;src:url("/assets/fonts/DMSans-Bold.woff2") format("woff2")}

:root{
  --navy:#12233A; --navy-deep:#0C1826; --on-navy:#F7F8F5; --on-navy-muted:#B9C7D6;
  --green:#1FB57A; --green-bright:#2ECC8F; --amber:#F5A623; --red:#FF8A8E;
  --bg:#F7F8F5; --surface:#FFFFFF; --ink:#12233A; --muted:#4E6177;
  --link:#0E7A50; --line:#DDE4DF; --quote-bg:#EAF5EF;
  --draft-bg:#FFF4DC; --draft-ink:#6B4500;
  --display:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --body:"DM Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --gutter:clamp(1rem,4vw,2rem);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0E1B2B; --surface:#152A42; --ink:#E9EEF3; --muted:#A6B6C7;
  --link:#2ECC8F; --line:#243A54; --quote-bg:#16314A;
  --draft-bg:#3A2D10; --draft-ink:#F5D48A; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E1B2B; --surface:#152A42; --ink:#E9EEF3; --muted:#A6B6C7;
  --link:#2ECC8F; --line:#243A54; --quote-bg:#16314A;
  --draft-bg:#3A2D10; --draft-ink:#F5D48A; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); min-height:100vh; display:flex; flex-direction:column;
  font:400 1.0625rem/1.65 var(--body)}
::selection{background:var(--green); color:var(--navy)}
a{color:var(--link); text-underline-offset:.18em; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--amber); outline-offset:3px; border-radius:.25rem}
strong{font-weight:700}
img{max-width:100%; height:auto}

.skip{position:absolute; left:-999px; top:0; background:var(--on-navy); color:var(--navy); padding:.75rem 1rem; z-index:10; font-weight:700}
.skip:focus{left:.5rem; top:.5rem}

/* Header: one navy band shared by every page. */
.site-header{background:var(--navy); color:var(--on-navy); padding-block:.5rem}
.bar{max-width:72rem; margin:0 auto; padding-inline:var(--gutter); display:flex; align-items:center; gap:.5rem 1.5rem; flex-wrap:wrap}
.brand{display:inline-flex; align-items:center; gap:.625rem; min-height:44px; color:var(--on-navy); text-decoration:none;
  font:800 1.25rem/1 var(--display); letter-spacing:-0.02em}
.brand img{width:1.125rem; height:auto}
.site-nav{margin-left:auto; display:flex; gap:.25rem}
.site-nav a{display:inline-flex; align-items:center; min-height:44px; padding:0 .625rem; color:var(--on-navy-muted);
  text-decoration:none; font-size:.9375rem; border-radius:.375rem}
.site-nav a:hover{color:var(--on-navy); background:rgba(247,248,245,.08)}
.site-nav a[aria-current="page"]{color:var(--on-navy); box-shadow:inset 0 -2px 0 var(--green)}
@media (max-width:26rem){ .bar{flex-wrap:nowrap; gap:.5rem} .brand{font-size:1.125rem; gap:.5rem} .site-nav a{padding:0 .4rem; font-size:.875rem} }

/* Plain reading pages: privacy, terms, support. */
main.doc{max-width:44rem; margin:0 auto; padding:2.5rem var(--gutter) 4rem; flex:1; width:100%}
.doc h1{font:800 clamp(1.75rem,5vw,2.25rem)/1.15 var(--display); letter-spacing:-0.02em; margin:0 0 .5rem; text-wrap:balance}
.doc h2{font:800 1.3125rem/1.3 var(--display); letter-spacing:-0.01em; margin:2.5rem 0 .75rem; text-wrap:balance}
.doc h3{font-size:1.0625rem; font-weight:700; margin:1.75rem 0 .5rem}
.doc p{margin:.75rem 0} .doc ul{margin:.75rem 0; padding-left:1.375rem} .doc li{margin:.375rem 0}
.lede{font-size:1.1875rem; color:var(--muted); margin:.5rem 0 1.5rem}
.effective{color:var(--muted); margin:0 0 1.5rem; font-size:.9375rem}
blockquote{margin:1.25rem 0; padding:.875rem 1.125rem; background:var(--quote-bg); border-radius:.5rem}
blockquote p{margin:.25rem 0}
.draft{margin:0 0 1.5rem; padding:.75rem 1rem; background:var(--draft-bg); color:var(--draft-ink);
  border:1px solid var(--amber); border-radius:.5rem; font-size:.9375rem}
.cards{display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); margin:1rem 0}
.card{background:var(--surface); border:1px solid var(--line); border-radius:.625rem; padding:1rem 1.125rem; text-decoration:none; color:inherit; display:block}
.card strong{display:block; color:var(--link)}
.card span{color:var(--muted); font-size:.9375rem}
table{width:100%; border-collapse:collapse; font-size:.9375rem; margin:1rem 0}
th,td{text-align:left; vertical-align:top; padding:.5rem .625rem; border-bottom:1px solid var(--line)}
th{font-weight:700}
.tablewrap{overflow-x:auto}

/* Footer */
.site-footer{border-top:1px solid var(--line); color:var(--muted); font-size:.875rem; padding-block:1.5rem 3rem}
.site-footer p{max-width:72rem; margin:.375rem auto; padding-inline:var(--gutter)}
.site-footer a{display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; vertical-align:middle}

/* Two languages in one page: each phrase is written twice, and the page's
   own lang attribute (set in <head> before first paint) hides the other. */
html:not([lang|="es"]) [data-l="es"], html[lang|="es"] [data-l="en"]{display:none !important}
/* The language switch on paper pages (the home page styles its own on navy). */
.lang-switch-doc{display:inline-flex; margin:0 0 1.5rem; padding:.25rem; gap:.25rem; border:1px solid var(--line); border-radius:999px}
.lang-switch-doc button{min-height:44px; min-width:44px; padding:0 1.125rem; border:0; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--ink); font:700 1rem/1 var(--body)}
.lang-switch-doc button[aria-pressed="true"]{background:var(--navy); color:var(--on-navy)}
.lang-switch[hidden]{display:none}