/* ---------------------------------------------------------------------------
   Shared footer colour tokens (WCAG 2.1 SC 1.4.3, normal text >= 4.5:1).

   The v2 footer shipped its text as alpha over white, which composites to far
   less contrast than the ink colour suggests:
     rgba(11,37,69,.45) -> #919dab  2.76:1   column headings and copyright
     rgba(11,37,69,.55) -> #798799  3.66:1   tagline
   Both failed. They are defined ONCE here and referenced by every footer, so
   the fix is one edit rather than one per page. Footer links were already
   rgba(11,37,69,.7) -> #54667d 5.88:1 and are unchanged.

   The relative hierarchy of the approved light design is preserved: the
   tagline stays darker than the column headings.
   --------------------------------------------------------------------------- */
:root{
  --v2-foot-subtle:#5b6b80;   /* 5.44:1 on #fff - column headings, copyright */
  --v2-foot-body:#4a5a70;     /* 7.03:1 on #fff - tagline */
  /* General small-text scale. The v2 design expressed muted copy as ink at an
     alpha, which composites well below 4.5:1 on the light surfaces it sits on:
       .40/.45 -> 2.69:1   .50/.55 -> 3.10-3.55:1   .58/.60/.62 -> 3.9-4.34:1
     These three tokens replace those levels for NORMAL-size text only, keeping
     the design's relative hierarchy (faint < subtle < muted). Large text keeps
     its alpha, because SC 1.4.3 asks 3:1 there and it already meets it.
     Worst case measured across every light surface in the design
     (#fff, #f7faff, #f4f8ff, #eef4ff). */
  --v2-text-faint:#5b6b80;    /* 4.93:1 worst case - replaces .40 and .45 */
  --v2-text-subtle:#54637a;   /* 5.52:1 worst case - replaces .50 and .55 */
  --v2-text-muted:#4a5a70;    /* 6.37:1 worst case - replaces .58, .60, .62 */
}

@font-face{font-family:Archivo;font-style:normal;font-weight:400 800;font-display:swap;src:url(/v2/fonts/archivo-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:Archivo;font-style:normal;font-weight:400 800;font-display:swap;src:url(/v2/fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Archivo;font-style:normal;font-weight:400 800;font-display:swap;src:url(/v2/fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
body{margin:0;background:#e8edf6;font-family:Archivo,system-ui,sans-serif;color:#0b2545}
*{box-sizing:border-box}
a{color:#1463ff;text-decoration:none}
a:hover{color:#0b3fd1}
button,input{font-family:Archivo,system-ui,sans-serif}
::selection{background:rgba(20,99,255,.16)}
div{scrollbar-width:none}
div::-webkit-scrollbar{display:none}

/* ---------------------------------------------------------------- language
   The control was inherited from the previous dark theme: #0b1016 menu on
   #2c3943 borders, navy text on a near-black list, white translucent overlays,
   a heavy black shadow, and .lang-switch-name{display:none} at every width, so
   the selected language was never named even on a 1363px desktop. It also
   referenced --uvpn-text and --uvpn-cyan, which this stylesheet does not
   define, so those declarations resolved to nothing.

   Restyled here in the redesign's own palette. Behaviour is untouched: lang.js
   still owns keyboard navigation, Escape, outside-click and selected state. */
.lang-switch-wrap{display:inline-flex;align-items:center}
.lang-switch{position:relative;display:inline-flex}

.lang-switch-btn{
  display:inline-flex;align-items:center;gap:8px;
  min-height:38px;padding:9px 12px;
  border:1px solid rgba(11,37,69,.14);border-radius:12px;
  background:#fff;color:#0b2545;
  font:600 13px/1 Archivo,system-ui,sans-serif;cursor:pointer;
  transition:border-color .15s,background .15s}
.lang-switch-btn:hover{background:#f4f8ff;border-color:rgba(20,99,255,.35);color:#0b2545}
.lang-switch-btn:focus-visible{outline:2px solid #1463ff;outline-offset:2px;border-color:#1463ff}
.lang-switch-btn[aria-expanded="true"]{background:#eef4ff;border-color:rgba(20,99,255,.45)}

/* lang.js puts the class on the <img> itself, not on a wrapper. */
.lang-switch-flag{flex:none;display:block;width:20px;height:14px;
  border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(11,37,69,.10)}
.lang-switch-name{display:inline;white-space:nowrap}
.lang-switch-chevron{display:inline-flex;flex:none;opacity:.55;transition:transform .15s}
.lang-switch-btn[aria-expanded="true"] .lang-switch-chevron{transform:rotate(180deg)}

.lang-switch-list{
  position:absolute;z-index:80;top:calc(100% + 8px);inset-inline-end:0;
  min-width:216px;max-height:min(60vh,340px);overflow-y:auto;
  padding:6px;margin:0;list-style:none;
  background:#fff;color:#0b2545;
  border:1px solid rgba(11,37,69,.12);border-radius:14px;
  box-shadow:0 18px 40px rgba(11,37,69,.16),0 2px 6px rgba(11,37,69,.06)}

.lang-switch-option{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 10px;border:0;border-radius:9px;background:transparent;
  color:#0b2545;font:500 13.5px/1.2 Archivo,system-ui,sans-serif;
  text-align:start;cursor:pointer}
.lang-switch-option:hover{background:#f4f8ff}
.lang-switch-option.is-active,.lang-switch-option:focus-visible{background:#eef4ff;color:#0b2545}
.lang-switch-option:focus-visible{outline:2px solid #1463ff;outline-offset:-2px}
.lang-switch-option[aria-selected="true"]{background:#eef4ff;color:#0b3fd1;font-weight:700}

/* RTL: the menu hangs from the other edge, and the chevron mirrors. */
[dir="rtl"] .lang-switch-chevron{transform:scaleX(-1)}
[dir="rtl"] .lang-switch-btn[aria-expanded="true"] .lang-switch-chevron{transform:scaleX(-1) rotate(180deg)}

/* Flag-only compact mode ONLY where the header genuinely runs out of room. */
@media (max-width:560px){
  .lang-switch-name{display:none}
  .lang-switch-btn{padding:9px 10px;gap:6px}
  .lang-switch-list{min-width:200px}
}

/* ------------------------------------------------------- long-form documents
   The legal pages are built from the same inline-style vocabulary as every
   other v2 page. Only what an inline style attribute cannot express lives here,
   once, for all 100 pages: ::before (list bullets and numbers), :hover, and
   :focus-visible.

   This replaces an 8.5 KB per-page block that existed to keep pre-redesign
   markup alive by re-skinning ~40 legacy class names. Nothing here re-skins a
   legacy class: these selectors only match markup build_v2_legal.py generates.

   LINK COLOUR. Prose links are #0b3fd1, not the #1463ff used elsewhere.
   #1463ff is 4.93:1 on white and passes, but the translation notice sits on a
   #eef4ff tint where the same blue measures 4.47:1 and fails SC 1.4.3 by three
   hundredths. #0b3fd1 is the design's own hover colour and measures 7.9:1 on
   white and 7.2:1 on the tint, so nothing in this component sits near the
   threshold where a later tweak could push it under.

   HERO LINKS. Inside the blue hero, a link inheriting the site's #1463ff would
   be blue on blue -- measured contrast 1.00, invisible. /legal/abuse/ leads
   with a mailto: in exactly that position, so hero links are white (4.93:1 on
   #1463ff) and underlined so they do not rely on colour alone.

   SCOPING. An earlier draft styled a bare .skip here. /v2/site.css is loaded by
   all 365 v2 pages, so it reached the 184 that still define their own .skip
   inline; on the Arabic pages the two disagreed -- inset-inline-start is the
   right edge in RTL, the older rule said left:0 -- and the clipped link jumped
   from x=-1 to x=1440. Nothing here may match an element on a page this
   session did not rebuild.
   ------------------------------------------------------------------------- */
.v2prose a{color:#0b3fd1;text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px}
.v2prose a:hover{color:#082e9c}
.v2prose strong{font-weight:700;color:#0b2545}
.v2prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.94em}
.v2prose li:first-child{border-top:0}
.v2prose ul>li::before{content:"";position:absolute;inset-inline-start:6px;top:21px;
  width:8px;height:8px;border-radius:50%;background:#1463ff}
.v2prose ol{counter-reset:v2p}
.v2prose ol>li{counter-increment:v2p}
.v2prose ol>li::before{content:counter(v2p);position:absolute;inset-inline-start:0;
  top:13px;width:22px;height:22px;border-radius:50%;background:#1463ff;color:#fff;
  font:800 12px/22px Archivo;text-align:center}

.v2hero a{color:#fff;text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px}
.v2hero a:hover{color:#e8edf6}

/* Skip link, on the rebuilt legal pages ONLY -- hence .v2skip, not .skip.
   Off-screen but focusable: never display:none, which drops it out of the tab
   order entirely (WCAG 2.1 SC 2.4.1). It carries its own background and ink
   because while clipped it sits on the #e8edf6 page backdrop, where the
   inherited link blue measures 4.2:1 and fails SC 1.4.3. */
.v2skip{position:fixed;top:0;inset-inline-start:0;width:1px;height:1px;margin:-1px;
  padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  background:#fff;color:var(--v2-text-muted);text-decoration:none}
.v2skip:focus-visible{width:auto;height:auto;margin:0;inset-inline-start:16px;top:12px;
  z-index:100;padding:12px 18px;overflow:visible;clip-path:none;border-radius:12px;
  background:#1463ff;color:#fff;font:800 14px/1 Archivo;text-decoration:none}