/* The site's plain pages (src/lib/site/html.ts): the privacy and terms pages, and / while the site is hidden. The link
   pages' shell (public/link-page.css), set for long reading: the yellow header with the mascot, the wordmark and the
   language picker, then the page on a white box with the navy outline. No fonts, nothing from another site, no
   animation, light only; once public, their head carries Google's ad tag (plan M6A), which nothing here loads. The
   tokens are home.css's, value for value (src/lib/links/linkPageCss.test.ts). */
:root{
  --sun:#f7b41b; --sun-hi:#fcba2a; --sun-deep:#ec991e; --sun-pale:#fff1c9;
  --red:#df2e3b; --red-ink:#b81f2b;
  --navy:#202038; --navy-soft:#3a3a5c;
  --cream:#fff8e8; --paper:#ffffff; --mint:#dff5e6; --mint-ink:#16653a;
  --line:4px solid var(--navy);
  --pop:8px 8px 0 var(--navy);
  --pop-sm:5px 5px 0 var(--navy);
  --round:"SF Pro Rounded", ui-rounded, "Arial Rounded MT Bold", "Varela Round", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{margin:0; background:var(--cream); color:var(--navy); font:20px/1.65 var(--round); -webkit-font-smoothing:antialiased; overflow-wrap:break-word}
img{max-width:100%}
a{color:var(--navy); text-decoration-thickness:2px; text-underline-offset:4px}
a:hover{color:var(--red-ink); text-decoration-thickness:3px}
:focus-visible{outline:4px solid var(--navy); outline-offset:4px; box-shadow:0 0 0 8px #fff}
/* A link's ring gets soft corners; a button and the picker keep their pill shape, and a button its hard shadow. */
a:focus-visible{border-radius:6px}

/* ---------- The header: the mascot, the wordmark, the language picker ---------- */
.top{background:var(--sun); border-bottom:var(--line)}
.bar{display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:14px; max-width:820px; min-height:80px; margin:0 auto; padding:10px 20px}
picture{display:contents}
.m{display:inline-block; flex:none; object-fit:contain; vertical-align:middle}
.logo{display:inline-flex; align-items:center; gap:10px; min-width:0; color:var(--navy); text-decoration:none; font:900 30px/1 var(--round); letter-spacing:.04em; text-transform:uppercase}
.logo .m{width:54px; height:54px; transform:rotate(-8deg)}
a.logo:hover{color:var(--navy); text-decoration:underline}
.logo .word{padding-top:2px}
.lang-pick{position:relative; flex:none}
.lang-pick summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; min-height:48px; background:#fff; border:3px solid var(--navy); border-radius:999px; padding:8px 14px; font:900 19px/1 var(--round); box-shadow:3px 3px 0 var(--navy)}
.lang-pick summary::-webkit-details-marker{display:none}
.lang-pick summary::after{content:""; flex:none; border-style:solid; border-width:8px 6px 0; border-color:var(--navy) transparent transparent; margin-inline-start:2px}
.lang-pick[open] summary{background:var(--sun-pale)}
.lang-pick[open] summary::after{border-width:0 6px 8px; border-color:transparent transparent var(--navy)}
.lang-code{display:none}
.lang-menu{position:absolute; top:calc(100% + 10px); inset-inline-end:0; z-index:40; display:grid; min-width:210px; background:#fff; border:var(--line); border-radius:16px; box-shadow:var(--pop-sm); padding:8px; font-weight:800}
.lang-menu a,.lang-menu span{display:block; padding:10px 14px; border-radius:10px; text-decoration:none; white-space:nowrap; font-size:20px; line-height:1.3}
.lang-menu a:hover{background:var(--sun-pale); color:var(--navy)}
.lang-menu [aria-current]{background:var(--sun)}
.globe{position:relative; flex:none; width:22px; height:22px; border:2.5px solid var(--navy); border-radius:50%; background:#fff}
.globe::before{content:""; position:absolute; top:-2.5px; bottom:-2.5px; left:4.5px; right:4.5px; border:2px solid var(--navy); border-radius:50%}
.globe::after{content:""; position:absolute; left:0; right:0; top:calc(50% - 1px); border-top:2px solid var(--navy)}

/* ---------- The page on its box, for long reading: a 68-character measure, room between sections ---------- */
.box{width:calc(100% - 40px); max-width:780px; margin:44px auto 36px; background:var(--paper); border:var(--line); border-radius:24px; box-shadow:var(--pop); padding:40px 48px 44px}
.box > :last-child{margin-bottom:0}
.box > *{max-width:68ch}
h1,h2{font-family:var(--round); font-weight:900; letter-spacing:-.01em; overflow-wrap:anywhere; text-wrap:balance}
h1{font-size:clamp(34px, 5.4vw, 46px); line-height:1.12; margin:0 0 .5em}
h2{font-size:clamp(24px, 3.2vw, 29px); line-height:1.25; margin:1.8em 0 .5em; padding-top:.9em; border-top:3px dashed rgba(32,32,56,.25)}
p{margin:0 0 1em}
ul{margin:0 0 1.1em; padding-inline-start:1.3em}
li{margin:.5em 0; padding-inline-start:.2em}
li::marker{color:var(--red)}
strong{font-weight:900}
/* Long addresses and links wrap instead of running off a phone. */
.box p,.box li{overflow-wrap:anywhere}
mark{background:var(--sun-pale); color:var(--navy); padding:0 .2em; border-radius:4px; box-shadow:inset 0 -3px 0 var(--sun)}
.updated{font-size:18px; font-weight:700; color:var(--navy-soft)}
.translation-note{background:var(--sun-pale); border:3px solid var(--navy); border-inline-start-width:10px; border-radius:14px; padding:12px 18px; font-size:19px; font-weight:700}

/* ---------- The footer: the company, the other pages, and (once public) every language ---------- */
footer{max-width:820px; margin:0 auto 48px; padding:0 20px; font-size:18px; line-height:1.55; text-align:center}
footer p{margin:0 0 .35em}
footer nav{margin-top:.8em; font-weight:800}
footer nav.langs{font-weight:700}
footer [aria-current]{font-weight:900; text-decoration:underline; text-decoration-color:var(--sun); text-decoration-thickness:4px; text-underline-offset:5px}

/* ---------- Phones (320 to 600 CSS px; WCAG 1.4.10: nothing runs off the side) ---------- */
@media (max-width:600px){
  body{font-size:19px}
  .bar{min-height:72px; padding:8px 16px}
  .logo{font-size:26px; gap:8px}
  .logo .m{width:46px; height:46px}
  .box{width:calc(100% - 37px); margin:26px auto 28px 16px; border-radius:20px; box-shadow:var(--pop-sm); padding:26px 20px 28px}
  h2{margin-top:1.5em}
}
@media (max-width:420px){
  .bar{gap:10px}
  .logo{font-size:22px; gap:6px}
  .logo .m{width:40px; height:40px}
  .lang-pick summary{padding:7px 12px; font-size:18px}
  .lang-name{display:none}
  .lang-code{display:inline}
}
@media (max-width:380px){
  .box{padding:22px 16px 24px}
  h1{font-size:31px}
}

/* ---------- Languages ---------- */
:lang(ar) body,:lang(hi) body{line-height:1.8}
/* Arabic letters sit small beside Latin ones at the same size (the system's Arabic face): a step up, for older eyes. */
:lang(ar) body{font-size:22px}
@media (max-width:600px){:lang(ar) body{font-size:21px}}
:lang(ar) h1,:lang(ar) h2,:lang(hi) h1,:lang(hi) h2{line-height:1.35; letter-spacing:0}
:lang(zh) h1,:lang(zh) h2{line-height:1.25}
[dir="rtl"] .logo .m{transform:rotate(8deg)}