@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/exact-serif-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{--paper:#faf9f6;--white:#fff;--green:#15594a;--green-dark:#103f35;--pale:#edf4ef;--amber:#9a6a20;--amber-bg:#fbf3e6;--ink:#182c27;--muted:#59675f;--line:#e0e5df;--radius:20px;--shadow:0 8px 32px #233d2e07;--serif:"Source Serif 4",Georgia,serif;--sans:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:104px;overflow-x:clip}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans)}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,input,summary{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.1;letter-spacing:-.035em}h1{font-size:clamp(40px,4.7vw,66px)}h2{font-size:clamp(30px,3vw,40px)}h3{font-size:18px;line-height:1.35}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #33836e;outline-offset:5px}a:hover .link,.text-link:hover{text-decoration:underline;text-underline-offset:4px}.wrap{width:min(1240px,calc(100% - 64px));margin-inline:auto}.skip{position:absolute;left:16px;top:-80px;background:white;padding:12px;z-index:99}.skip:focus{top:12px}.header{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line);background:#fff;background:#fffffff2;backdrop-filter:saturate(1.4) blur(9px)}.header-inner{min-height:88px;display:flex;align-items:center;gap:24px}.brand{display:inline-flex;align-items:center;gap:12px;flex-shrink:0}.wordmark{font:600 40px/1 var(--serif);letter-spacing:-1.5px;color:var(--green)}/* The mark: a figure resting on a rule, inside a disc. Replaces the four
   squares, which read as a loading spinner at small sizes. */
.brand-mark{display:block;width:34px;height:34px;flex:none}
.bm-disc{fill:var(--green)}.bm-fig{fill:#fff}.nav{display:flex;gap:4px;margin:auto;flex-wrap:wrap}
/* The tabs were 15px grey text with nothing but a colour change on hover and
   no sign of which page you were on. */
.nav a {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 11px 12px; min-height: 44px;
  border-radius: 11px;
  font-size: 15.5px; font-weight: 600; color: var(--muted);
  transition: background-color .14s, color .14s;
}
.nav a:hover { background: var(--pale); color: var(--green); }
.nav a:active { background: #dde9e1; }
.nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px;
  height: 2px; border-radius: 2px; background: var(--green);
  transform: scaleX(0); transform-origin: left;
  transition: transform .18s ease;
}
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current] { color: var(--green); background: var(--pale); }
.nav a[aria-current]::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .nav a, .nav a::after { transition: none; } }
.languages{display:flex;border:1px solid var(--line);border-radius:11px;overflow:hidden}.languages a{display:grid;place-items:center;min-width:45px;min-height:44px;font-size:13px;font-weight:700}.languages a[aria-current]{background:var(--green);color:white}.menu-button{display:none;background:none;border:1px solid var(--line);border-radius:10px;width:44px;height:44px}.hero{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;padding:46px 0 34px;align-items:center}.eyebrow{display:block;font:700 12px/1.5 var(--sans);letter-spacing:.16em;color:var(--amber);text-transform:uppercase;margin-bottom:18px}.intro{margin-top:22px;max-width:590px;color:var(--muted);font-size:18px;line-height:1.7}.search-form{display:flex;gap:10px;margin-top:30px}.input-wrap{position:relative;flex:1;min-width:0}.input-wrap svg{position:absolute;top:20px;left:18px;color:var(--green)}.input-wrap input{height:62px;width:100%;padding:12px 16px 12px 50px;border:1px solid #cad5cc;border-radius:12px;background:white;color:var(--ink);font-size:16.5px}.button{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:48px;padding:12px 22px;border:1px solid var(--green);border-radius:11px;background:var(--green);color:white;font-size:15px;font-weight:700}.button:hover{background:var(--green-dark)}.button.secondary{background:transparent;color:var(--green)}.button.secondary:hover{background:var(--pale)}.search-form .button{min-height:62px}.popular{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:16px;font-size:14px;color:var(--muted)}.popular button{border:1px solid var(--line);background:transparent;padding:7px 14px;border-radius:30px;min-height:38px;color:var(--green);font-size:14px;font-weight:700}.popular button:hover{background:var(--pale)}.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.promise{padding:30px}.promise h2{font-size:30px;max-width:300px;margin:18px 0 24px}.badge{width:44px;height:44px;border-radius:13px;background:var(--pale);color:var(--green);display:grid;place-items:center;flex-shrink:0}.promise-row{display:flex;align-items:flex-start;gap:12px;margin-top:20px}.state-icon{border:1px solid currentColor;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--green);flex-shrink:0;font-weight:bold;font-size:13px}.state-icon.amber{color:var(--amber)}.promise-row strong{font-size:15.5px}.promise-row p{color:var(--muted);font-size:14.5px;line-height:1.6;margin-top:5px}.promise .text-link{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:18px;margin-top:24px;font-size:14px;color:var(--green);font-weight:700}.independence{display:flex;align-items:flex-start;gap:11px;font-size:15px;line-height:1.6;color:var(--ink);padding:14px 18px;margin-top:20px;background:var(--white);border:1px solid var(--line);border-left:3px solid var(--green);border-radius:12px}.independence svg{width:19px;height:19px;color:var(--green);margin-top:2px}.stats{display:grid;grid-template-columns:repeat(4,1fr);padding:24px 8px}.stat{display:flex;align-items:center;gap:14px;padding:0 24px;border-right:1px solid var(--line)}.stat:last-child{border:0}.stat strong{display:block;font:700 32px/1.1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-1px}.stat span:not(.badge){display:block;color:var(--muted);font-size:13.5px;margin-top:6px}.section{padding-top:46px}

/* Section grounds.

   The home page ran from the header to the footer on one unbroken paper field,
   every section the same height apart, so it read as a single block. A band
   changes the ground under a section and runs edge to edge out of the 1240px
   container without touching the layout: the painted box stays put and the
   shadow spreads sideways, clipped so it cannot bleed up or down. No viewport
   units, so a scrollbar can never push the page sideways. */
.band {
  --band-bg: var(--pale);
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  background: var(--band-bg);
  padding-block: 52px 84px;
  margin-top: 50px;
}
.band--white { --band-bg: var(--white); }

/* A soft edge where the ground changes, instead of a ruled line across the
   page. A custom property cannot be read from inside a background SVG, so the
   shape carries its own colour and each band names the file it needs. The
   first attempt used var(--wave) inside the data URI and painted a black bar
   the width of the page. */
/* The curve at the foot of a band is drawn in the colour of the ground BELOW
   it, cutting up into the band. Painted in the band's own colour it is a pale
   shape on a pale field and the edge stays flat, which is what the first
   attempt did. The curve above a band is the band's colour reaching up. */
.band::after, .band--wave-top::before {
  content: ""; position: absolute; left: 0; right: 0; height: 48px;
  pointer-events: none;
}
.band::after {
  bottom: -1px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 48" preserveAspectRatio="none"><path d="M0 48V24c160 0 240-22 400-22s240 22 400 22 240-22 400-22 160 11 240 16v30z" fill="%23faf9f6"/></svg>') bottom / 1440px 48px repeat-x;
}
.band--wave-top::before { background: var(--wave-img) bottom / 1440px 48px repeat-x; }
.band { --wave-img: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 48" preserveAspectRatio="none"><path d="M0 48V24c160 0 240-22 400-22s240 22 400 22 240-22 400-22 160 11 240 16v30z" fill="%23edf4ef"/></svg>'); }
.band--white { --wave-img: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 48" preserveAspectRatio="none"><path d="M0 48V24c160 0 240-22 400-22s240 22 400 22 240-22 400-22 160 11 240 16v30z" fill="%23ffffff"/></svg>'); }
.band--wave-top::before { top: -47px; }
.band--first { margin-top: 0; padding-top: 30px; }
.band + .section--ruled { border-top: 0; padding-top: 26px; }
.band + .section, .band + .band { margin-top: 0; }
.band > .section:first-child, .band .section { padding-top: 0; }

/* Where the ground does not change, a hairline marks the start of the section
   so the eye still has an edge to catch. */
.section--ruled { border-top: 1px solid var(--line); padding-top: 42px; }.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px}.section-heading p{color:var(--muted);font-size:16px;line-height:1.6;margin-top:12px;max-width:62ch}.text-link{color:var(--green);font-size:15px;font-weight:700;display:inline-flex;align-items:center;gap:8px}.category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.category{padding:23px;display:flex;align-items:flex-start;flex-direction:column;transition:border-color .15s,transform .15s}.category:hover{border-color:#94b4a3;transform:translateY(-2px)}.category h3{margin-top:18px}.category p{font-size:14.5px;line-height:1.55;color:var(--muted);margin:10px 0 22px}.category .card-note{margin:-16px 0 22px;font-size:13.5px}.link{color:var(--green);display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;margin-top:auto}.link svg{width:17px}.coverage{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:34px}.coverage p{color:var(--muted);font-size:14px;margin-top:14px}.coverage .text-link{margin-top:22px}.coverage-summary{display:grid;gap:18px}.coverage-row{display:grid;grid-template-columns:12px 1fr auto;gap:12px;align-items:center;font-size:15px}.dot{width:10px;height:10px;border-radius:3px;background:var(--green)}.dot.amber{background:var(--amber)}.dot.gray{background:#cbd1cc}.coverage-row strong{font-size:23px;font-variant-numeric:tabular-nums}.segment-bar{display:flex;height:14px;border-radius:4px;overflow:hidden;gap:3px}.segment-bar span:nth-child(1){background:var(--green);flex:88}.segment-bar span:nth-child(2){background:var(--amber);flex:26}.segment-bar span:nth-child(3){background:#cbd1cc;flex:265}.coverage-caption{font-size:13.5px!important}.updates{padding-inline:26px}.update{display:flex;gap:24px;align-items:center;justify-content:space-between;padding:22px 0;border-bottom:1px solid var(--line)}.update:last-child{border:0}.update h3{font-size:17px;margin:5px 0}.meta{font-size:13.5px;color:var(--muted)}.update-value{display:flex;align-items:center;gap:20px;flex-shrink:0;color:var(--green);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}.update:hover h3{text-decoration:underline;text-underline-offset:3px}.insight{margin-top:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}.insight summary{cursor:pointer;color:var(--green);font-size:14px;font-weight:700;min-height:32px}.insight p{color:var(--muted);font-size:15px;line-height:1.65;margin:12px 0}.range-row{display:flex;gap:24px;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line);font-size:15px}.range-row strong{white-space:nowrap;font-variant-numeric:tabular-nums}.contribution{margin:50px 0 0;padding:26px 32px;display:flex;justify-content:space-between;align-items:center;gap:24px;background:var(--pale);border:1px solid var(--line);border-radius:20px}.contribution h2{font-size:26px}.contribution p{font-size:15px;color:var(--muted);margin-top:7px}main{padding-bottom:58px}

.footer{background:var(--green);color:white;padding:52px 0 26px}.footer-grid{display:grid;grid-template-columns:1.3fr repeat(5,minmax(0,1fr));gap:30px}.footer .wordmark{color:white}.footer .footer-brand p{font-size:14.5px;line-height:1.75;color:#e1ebe5;margin-top:18px;max-width:290px}.footer details{min-width:0}.footer summary{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;list-style:none;pointer-events:none;cursor:default;padding-top:8px}.footer summary::-webkit-details-marker{display:none}.footer nav{display:flex;flex-direction:column;gap:4px;margin-top:16px}.footer nav a{font-size:15px;min-height:38px;display:flex;align-items:center;color:#eef4ef}.footer a:hover{text-decoration:underline}.footer-legal{border-top:1px solid #ffffff30;margin-top:34px;padding-top:24px}.footer-legal p{font-size:13.5px;color:#e6efe9;max-width:800px}.footer-bottom{display:flex;align-items:center;gap:24px;justify-content:space-between;margin-top:24px;font-size:13px}
.footer-bottom small{font-size:inherit}.legal-links{display:flex;gap:24px;flex-wrap:wrap}.footer .languages{border-color:#ffffff70}.footer .languages a{min-height:36px}.footer .languages a[aria-current]{background:white;color:var(--green)}.search-results{margin-top:24px;padding:26px 28px}
.rempty__h{font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:-.02em}
.rempty__b{margin:10px 0 16px;color:var(--muted);font-size:14px;max-width:56ch}
.rfail{color:var(--amber);font-size:14px}
.rcat{display:block;font-size:13.5px;color:var(--muted);margin-top:4px}
.ramt{display:block;margin-top:6px;font-weight:700;font-size:14px;color:var(--green);font-variant-numeric:tabular-nums}
.rnm{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--ink)}
.search-result:hover .rnm{text-decoration:underline;text-underline-offset:3px}.search-results h2{font-size:26px;margin-bottom:8px}.search-result{display:block;padding:18px 0;border-bottom:1px solid var(--line)}.search-result:last-child{border:0}.search-result p{font-size:15px;color:var(--muted)}.search-result strong{color:var(--green);font-variant-numeric:tabular-nums}.preview-notice{font-size:14px;color:var(--muted);padding:12px 16px;background:var(--pale);border-radius:10px;margin-bottom:16px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}[hidden]{display:none!important}.route-dialog{border:1px solid var(--line);border-radius:20px;padding:28px;width:min(520px,calc(100% - 32px));color:var(--ink);background:var(--paper)}.route-dialog::backdrop{background:#102c2355}.route-dialog h2{font-size:28px}.route-dialog p{margin:16px 0;font-size:14px}.route-dialog code{overflow-wrap:anywhere;font-size:12px}.route-dialog button{margin-top:20px}
@media(min-width:901px){.footer details:not([open]) nav{display:flex}.nav[hidden]{display:flex!important}}
@media(max-width:1100px){.hero{gap:32px}.category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.stat{padding-inline:16px;gap:10px}.stat .badge{display:none}.footer-grid{gap:24px}}
@media(max-width:900px){.header-inner{min-height:76px;gap:12px;flex-wrap:wrap}.header .languages{margin-left:auto}.menu-button{display:grid;place-items:center}.nav{order:4;flex-basis:100%;margin:0;display:none;gap:0;padding-bottom:16px}.nav.is-open{display:flex;flex-direction:column}.nav a{padding:12px 4px;border-bottom:1px solid var(--line)}.hero{grid-template-columns:1fr 1fr;gap:24px;padding-top:44px}.hero h1{font-size:46px}.intro{font-size:16px}.promise{padding:22px}.promise h2{font-size:26px}.search-form{flex-wrap:wrap}.search-form .button{min-height:50px}.coverage{gap:30px}.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-brand{grid-column:1/-1}.footer-brand p{max-width:450px}.category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.wrap{width:calc(100% - 36px)}.header-inner{min-height:72px}.wordmark{font-size:34px}.brand{gap:9px}.brand-mark{grid-template-columns:repeat(2,11px);gap:3px}.brand-mark i{width:11px;height:11px}.header .languages a{min-width:38px}.hero{grid-template-columns:1fr;padding:36px 0 22px;gap:24px}.hero h1{font-size:44px}.eyebrow{font-size:11.5px;margin-bottom:14px}.intro{margin-top:18px;font-size:16px;line-height:1.65}.search-form{margin-top:24px;gap:8px}.input-wrap input{font-size:14px;height:56px;padding-left:44px}.input-wrap svg{left:14px;top:18px;width:20px}.search-form .button{min-height:48px;width:100%}.popular{gap:7px}.popular span{flex-basis:100%;margin-bottom:2px}.popular button{min-height:44px}.promise{padding:24px}.promise h2{font-size:29px;max-width:280px;margin-bottom:20px}.promise-row{margin-top:16px}.promise-row strong{font-size:15px}.promise-row p{font-size:14px}.promise .text-link{min-height:44px;padding-top:16px}.independence{font-size:14.5px;padding:14px 16px;margin-top:20px}.independence svg{margin-top:3px}.stats{grid-template-columns:1fr 1fr;padding:0}.stat{padding:22px 20px;border:0}.stat:nth-child(odd){border-right:1px solid var(--line)}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}.stat strong{font-size:30px}.stat span:not(.badge){font-size:13.5px}.section{padding-top:42px}.section-heading{align-items:flex-start;flex-direction:column;gap:12px;margin-bottom:20px}.section-heading h2{font-size:32px}.section-heading p{font-size:14px}.section-heading .text-link{min-height:44px}.category-grid{grid-template-columns:1fr;gap:12px}.category{padding:22px;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;align-items:start}.category .badge{grid-row:1/4}.category h3{font-size:16px;margin:0}.category p{font-size:14px;margin:8px 0 12px}.category .card-note{grid-column:2;margin:-8px 0 12px;font-size:13px}.category .link{grid-column:2;min-height:30px;font-size:13.5px}.coverage{grid-template-columns:1fr;padding:24px;gap:28px}.coverage h2{font-size:29px}.coverage-row{font-size:14.5px}.coverage-row strong{font-size:22px}.updates{padding:0 20px}.update{align-items:start;flex-direction:column;gap:10px;padding:20px 0}.update h3{font-size:16px;line-height:1.5}.update-value{justify-content:space-between;width:100%;min-height:30px}.meta{font-size:13.5px}.range-row{flex-direction:column;gap:4px}.contribution{margin-top:40px;padding:24px;flex-direction:column;align-items:stretch;gap:18px}.contribution h2{font-size:27px}.contribution p{font-size:14px}.footer{padding-top:32px}.footer-grid{grid-template-columns:1fr;gap:0}.footer-brand{margin-bottom:24px}.footer-brand p{font-size:14px}.footer details{border-bottom:1px solid #ffffff35}.footer summary{pointer-events:auto;cursor:pointer;padding:16px 0;min-height:54px;display:flex;justify-content:space-between;align-items:center;font-size:12px}.footer summary:after{content:'+';font-size:20px;letter-spacing:0}.footer details[open] summary:after{content:'−'}.footer nav{margin-top:0;padding-bottom:14px;gap:0}.footer nav a{min-height:44px;font-size:14px}.footer-legal{margin-top:26px;padding-top:22px}.footer-legal p{font-size:13px;line-height:1.7}.footer-bottom{align-items:start;flex-direction:column;gap:20px}.legal-links{flex-direction:column;gap:0;order:1}.legal-links a{min-height:44px;display:flex;align-items:center;font-size:13px}.footer .languages{order:0}.footer .languages a{min-height:44px;min-width:54px}.footer-bottom small{order:2}.search-results{padding:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media print{.header,.footer,.contribution,.popular,.search-form{display:none}.wrap{width:100%}.card{box-shadow:none}.hero{padding-top:0}.category-grid{grid-template-columns:repeat(3,1fr)}.section{break-inside:avoid}.eyebrow{color:#333}}


/* =======================================================================
   Pages other than the home page still use the earlier components. They
   are kept here, mapped onto the new tokens, until each page type is
   rebuilt to its own supplied design.
   ======================================================================= */
:root {
  --ink-2: var(--muted);
  --surface: var(--white);
  --band: var(--pale);
  --rule: var(--line);
  --rule-strong: #b9b5a8;
  --verified: var(--green);
  --uncited: var(--amber);
  --figures: var(--sans, Arial, Helvetica, system-ui, sans-serif);
  --ui: var(--sans, Arial, Helvetica, system-ui, sans-serif);
  --display: var(--serif);
  --body: var(--serif);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --gutter: 18px;
  --r1: 8px; --r2: 12px; --r3: 16px; --r4: 20px;
}
.langbar { --focus: #ffffff; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.answer { margin-block: var(--s5) 0; }
.answer__band {
  background: var(--band);
  border-top: 3px solid var(--verified);
  padding: var(--s5) var(--s4) var(--s4);
  /* full bleed out of the reading column */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.answer__label {
  font-family: var(--ui);
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--ink-2); margin: 0 0 var(--s3);
}
.answer__figure {
  font-family: var(--figures);
  font-size: 4rem; line-height: 1; font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em; margin: 0; color: var(--ink);
}
.answer__unit {
  font-family: var(--ui); font-size: 0.9375rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-2); margin: var(--s2) 0 0;
}
.answer__unit code {
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 400;
  letter-spacing: 0; margin-left: var(--s2); opacity: 0.8;
}
.answer__eur { font-family: var(--ui); font-size: 0.875rem; color: var(--ink-2); margin: var(--s3) 0 0; }
.answer__none {
  font-size: 1.375rem; line-height: 1.25; margin: 0; color: var(--ink);
}
.answer__why { font-family: var(--ui); font-size: 0.875rem; color: var(--ink-2); margin: var(--s3) 0 0; }
.source {
  background: var(--verified); color: #fff;
  margin-inline: calc(var(--gutter) * -1);
  padding: var(--s5) var(--gutter);
  --focus: var(--paper);
}
.source__label {
  font-family: var(--ui); font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  opacity: 0.72; margin: 0 0 var(--s2);
}
.source__name { font-size: 1.0625rem; line-height: 1.35; margin: 0; }
.source__name a { color: var(--source); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.source--none {
  color: var(--ink);
  background:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--uncited) 13%, transparent) 0 6px, transparent 6px 12px);
  border: 1px dashed var(--uncited);
  border-top: 0;
  padding-block: var(--s4);
  --focus: var(--verified);
}
.source--none .source__label { opacity: 1; color: var(--ink-2); }
.source--none .source__name { font-size: 0.9375rem; }
.stamp {
  font-family: var(--ui); font-size: 0.75rem; color: var(--ink-2);
  margin: var(--s3) 0 var(--s6); display: grid; gap: 2px;
}
.stamp b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.independence {
  font-family: var(--ui); font-size: 0.75rem; color: var(--ink-2);
  border-left: 2px solid var(--rule-strong); padding-left: var(--s3);
  margin: var(--s4) 0 var(--s6);
}
.rail { display: contents; }
.facts { margin: var(--s5) 0; border-top: 1px solid var(--rule); }
.facts div { display: grid; gap: var(--s1); padding-block: var(--s3); border-bottom: 1px solid var(--rule); }
.facts dt { font-size: 0.8125rem; color: var(--muted); }
.facts dd { margin: 0; font-size: 0.9375rem; }
.tablewrap {
  overflow-x: auto; margin-block: var(--s5);
  /* Scrolling shadows: the table was clipping at 390px with nothing to say so. */
  background:
    linear-gradient(to right, var(--paper) 30%, transparent) left / 40px 100% no-repeat,
    linear-gradient(to left, var(--paper) 30%, transparent) right / 40px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.14), transparent) left / 14px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.14), transparent) right / 14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.vtable { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.vtable caption { text-align: left; font-size: 0.8125rem; color: var(--muted); padding-bottom: var(--s2); }
.vtable th, .vtable td { text-align: left; padding: var(--s3) var(--s2); border-bottom: 1px solid var(--rule); }
.vtable thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.vtable td:last-child, .vtable th:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vtable tbody tr:last-child td { border-bottom: 0; }
.vtable .nofee { color: var(--muted); font-style: italic; }
.prose { margin-block: var(--s5); }
.prose h2 { margin-bottom: var(--s3); }
.note {
  font-size: 0.875rem; color: var(--muted);
  background: color-mix(in srgb, var(--uncited) 7%, transparent);
  border-radius: var(--r2); padding: var(--s3) var(--s4); margin-block: var(--s5);
}
.related { margin-block: var(--s6); }
.related ul { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s1); }
.related li { border-bottom: 1px solid var(--rule); }
.related a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  padding-block: 14px; min-height: 44px; text-decoration: none; font-size: 0.9375rem;
}
.related a:hover .nm { color: var(--verified); }
.related .nm { flex: 1 1 auto; min-width: 0; }
.related .amt {
  flex: 0 0 auto; color: var(--muted); font-size: 0.8125rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.langbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  background: var(--ink); color: var(--paper);
  padding: var(--s2) var(--gutter); font-size: 0.875rem;
}
.langbar a { color: var(--source); }
.langbar button {
  background: none; border: 0; color: inherit; font-size: 1.25rem; line-height: 1;
  padding: var(--s1) var(--s2); cursor: pointer; opacity: 0.7;
}
.langbar button:hover { opacity: 1; }







.vtable.listing th[scope="row"] { font-weight: 400; padding-right: var(--s3); }
.vtable.listing th[scope="row"] a { text-decoration: none; }
.vtable.listing th[scope="row"] a:hover { color: var(--verified); text-decoration: underline; }
.rowcat { display: block; font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
.vtable .dt { font-size: 0.8125rem; color: var(--muted); white-space: nowrap; text-align: left !important; }
.vtable.listing td:last-child { text-align: right; }
.minlist { list-style: none; margin: 0; padding: 0; }
.minlist li { border-bottom: 1px solid var(--rule); }
.minlist a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  padding-block: 14px; min-height: 44px; text-decoration: none; font-size: 0.9375rem;
}
.minlist a:hover .nm { color: var(--verified); }
.minlist .amt { color: var(--muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.spread { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.spread a {
  display: grid; gap: var(--s1); padding-block: 14px; min-height: 44px;
  text-decoration: none; border-bottom: 1px solid var(--rule);
}
.spread a:hover .spread__name { color: var(--verified); }
.spread__bar { background: var(--verified); }
.spread a:hover .spread__bar { background: var(--verified); }
.spread__name { font-size: 0.9375rem; }
.spread__track {
  display: block; height: 8px; border-radius: var(--r2);
  background: color-mix(in srgb, var(--rule) 60%, transparent);
}
.spread__bar {
  display: block; height: 100%; min-width: 4px;
  background: color-mix(in srgb, var(--verified) 75%, var(--rule));
  transition: background 140ms ease;
}
.spread__range {
  font-size: 0.75rem; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.spread__range i { font-style: normal; margin-inline: 0.4em; opacity: 0.7; }
.changelog { list-style: none; margin: 0; padding: 0; }
.changelog li {
  display: grid; gap: 2px;
  padding-block: var(--s3); padding-left: var(--s5);
  border-bottom: 1px solid var(--rule); position: relative;
}
.changelog li::before {
  content: ""; position: absolute; left: 6px; top: 22px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rule-strong); box-shadow: 0 0 0 3px var(--paper);
}
.changelog li:first-child::before { background: var(--verified); }
.changelog li::after {
  content: ""; position: absolute; left: 9px; top: 26px; bottom: -1px;
  width: 1px; background: var(--rule);
}
.changelog li:last-child::after { display: none; }
.changelog time { font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.changelog a { font-size: 0.9375rem; text-decoration: none; display: inline-block; padding-block: 4px; }
.changelog a:hover { color: var(--verified); text-decoration: underline; }
.changelog__meta { font-size: 0.75rem; color: var(--muted); }
.changelog__meta b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.banner {
  margin-block: var(--s5) var(--s6);
  padding: var(--s4);
  background: linear-gradient(var(--raised), var(--surface));
  border: 1px solid var(--rule);
  border-radius: var(--r2);
}
.banner svg { display: block; width: 100%; height: auto; }
.banner__key {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  margin-top: var(--s3); font-size: 0.75rem; color: var(--muted);
}
.banner__key span { display: inline-flex; align-items: center; gap: 6px; }
.banner__key i { width: 10px; height: 10px; border-radius: 2px; display: block; }
.banner__key span { font-family: var(--ui); }
.quilt {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r3);
  box-shadow: var(--shadow); padding: var(--s5); margin-block: var(--s7);
}
.quilt__head { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.quilt__head h2 { font-size: 1.5rem; }
.quilt__head p { margin: 0; font-family: var(--ui); font-size: 0.875rem; color: var(--ink-2); }
.quilt svg { display: block; width: 100%; height: auto; }
.banner__key { font-family: var(--ui); margin-top: var(--s4); }
.banner__key i { border-radius: 3px; }
.quilt { margin-block: 0; }
.quilt__head h2 { font-size: 1.375rem; }
.crumbs:has(ol > li:only-child) { display: none; }
.quilt { margin-block: var(--s7); }
.quilt { margin-block: 0; }
.changelog a {
  display: inline-flex; align-items: center; min-height: 44px; padding-block: 0;
}
.changelog li { padding-block: var(--s2); }
.spread__range { padding-left: var(--s3); }
.spread__range::after { content: " FCFA"; opacity: .65; }
.changelog a { line-height: 1.3; }
.source__label, .eyebrow, .answer__label, .quilt .banner__key,
.cardmeta, .rowcat, .changelog time, .changelog__meta, .spread__range,
.foot h2, .foot__stamp, .stamp, .independence, .scalenote, .blocknote {
  font-size: max(0.75rem, 12px);
}

/* =======================================================================
   Header language system, built to the supplied four state spec.
   The chosen language stays visible in the control; both languages are
   named in full inside the menu.
   ======================================================================= */
.langpick { position: relative; }
.langpick__btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 14px;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px;
  font-family: var(--serif); font-size: 1rem; cursor: pointer;
}
.langpick__btn:hover { border-color: var(--green); }
.langpick__btn .globe { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: var(--green); stroke-width: 1.5; }
.langpick__btn .chev { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms ease; }
.langpick__btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.langpick__code { display: none; font-weight: 700; letter-spacing: .02em; }

.langpick__menu {
  position: absolute; z-index: 60; right: 0; top: calc(100% + 8px);
  min-width: 240px; background: var(--white);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 44px #233d2e1f; padding: 6px;
}
.langpick__menu ul { list-style: none; margin: 0; padding: 0; }
.langpick__menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 0 12px; border-radius: 10px;
  font-family: var(--serif); font-size: 1.0625rem;
  color: var(--ink); text-decoration: none;
}
.langpick__menu a:hover { background: var(--pale); }
.langpick__menu .tick { width: 18px; height: 18px; fill: none; stroke: var(--green); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.langpick__note {
  margin: 6px 0 2px; padding: 10px 12px 2px;
  border-top: 1px solid var(--line);
  font-family: var(--sans, Arial, Helvetica, sans-serif); font-size: .8125rem; color: var(--muted);
}

/* the discreet suggestion strip, state 4 of the spec */
.langhint { background: var(--pale); border-bottom: 1px solid var(--line); }
.langhint__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 12px;
}
.langhint p { margin: 0; font-family: var(--sans, Arial, Helvetica, sans-serif); font-size: .9375rem; color: var(--ink); }
.langhint a {
  display: inline-block; margin-left: 10px; color: var(--green);
  font-weight: 700; text-underline-offset: 3px;
}
.langhint button {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  font-size: 1.5rem; line-height: 1; min-width: 44px; min-height: 44px;
}
.langhint button:hover { color: var(--ink); }

@media (max-width: 56.25em) {
  .langpick__full { display: none; }
  .langpick__code { display: inline; }
  .langpick__btn { padding: 0 10px; gap: 7px; }
  .langhint__bar { align-items: flex-start; }
}

/* ---- footer bottom row -------------------------------------------------
   `.footer nav { flex-direction: column }` also matches the legal links and
   the language control, since both are nav elements, and it outranks their
   own rules. The prototype was never rendered in a browser, so this went
   unnoticed there: it squeezed both into narrow vertical stacks.
   ----------------------------------------------------------------------- */
.footer .legal-links { flex-direction: row; flex-wrap: wrap; gap: 24px; margin-top: 0; }
.footer .languages { flex-direction: row; gap: 0; margin-top: 0; }
.footer .legal-links a { min-height: 44px; display: inline-flex; align-items: center; }
.footer-bottom { flex-wrap: wrap; }

@media (max-width: 620px) {
  .footer .legal-links { flex-direction: column; gap: 0; }
  .footer .languages { align-self: flex-start; }
}

/* =======================================================================
   Inner pages, on the same system as the home page.
   ======================================================================= */
/* The page header.

   Every page but the home page used to open with a bare eyebrow, heading and
   paragraph floating on the page background, capped at 760px inside a 1240px
   container, so two fifths of the screen was empty beside it and the page had
   no opening at all. It is now a filled block that holds the title, and takes
   a second column of facts where the page has any, so the width is used by
   something true rather than by nothing. */
.pagehead {
  background: var(--pale);
  border: 1px solid #d7e4da;
  border-radius: var(--radius);
  padding: 34px 40px;
  margin-top: 20px;
  display: grid;
  gap: 40px;
}
.pagehead--split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; }
/* The document the page is about, sitting behind its header. One of the ten is
   a photograph of the real thing, the Cameroonian passport cover, which is the
   only such document Wikimedia Commons holds; the other nine are drawings in
   the site's own ink rather than another country's paperwork borrowed to fill
   a space. */
/* The one thing people are asking about today, given the weight of a front
   page item. A page earns this card by declaring a headline in its own front
   matter, so it empties itself when the moment passes rather than needing to
   be remembered and taken down. */
/* What readers report paying, beside what the law sets. The panel states the
   count and the spread; it never shows one person's report on its own. */
.reports__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; }
.reports__panel, .reports__form { padding: 26px 28px; }
.reports__figures { display: grid; gap: 0; }
.reports__figures div {
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.reports__figures div:last-child { border-bottom: 0; }
.reports__figures dt { color: var(--muted); font-size: 14.5px; }
.reports__figures dd {
  margin: 0; font: 600 16px/1.35 var(--sans); text-align: right;
  font-variant-numeric: tabular-nums;
}
.reports__figures dd.is-figure { font-size: 23px; color: var(--green); letter-spacing: -.5px; }
.reports__meta { margin-top: 14px; color: var(--muted); font-size: 13.5px; }
.reports__notes { margin: 14px 0 0; padding-left: 18px; color: var(--ink); font-size: 14.5px; }
.reports__notes li { margin-top: 6px; }
.reports__warn {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 13.5px; line-height: 1.6;
}
.reports__warn svg { width: 18px; flex: none; margin-top: 2px; }
.reports__empty { display: grid; justify-items: start; gap: 8px; padding: 6px 0; }
.reports__empty svg { width: 30px; color: var(--green); opacity: .7; }
.reports__empty-h { font: 600 17px/1.4 var(--serif); }
.reports__empty-b { color: var(--muted); font-size: 15px; max-width: 46ch; }
.reports__form h3 { font-size: 18px; margin-bottom: 14px; }
.paid-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.field__hint { margin-top: 6px; color: var(--muted); font-size: 13px; }
@media (max-width: 1000px) {
  .reports__grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .reports__panel, .reports__form { padding: 22px 20px; }
  .paid-row { grid-template-columns: 1fr; gap: 10px; }
  .reports__figures div { grid-template-columns: 1fr auto; gap: 12px; }
}

/* A source we hold is a link to our own copy of it. One that we do not hold
   stays plain text, because there is nothing to show. */
.longform .srclink { color: var(--green); text-decoration: underline;
  text-decoration-color: #9cbcab; text-underline-offset: 3px; }
.longform .srclink:hover { text-decoration-color: var(--green); }
.srclink__tag {
  display: inline-block; margin-left: 7px; padding: 1px 7px;
  border: 1px solid var(--line); border-radius: 999px;
  font: 600 11.5px/1.7 var(--sans); letter-spacing: .04em;
  color: var(--muted); text-decoration: none; vertical-align: 1px;
  white-space: nowrap;
}

.focus {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 26px;
  align-items: center;
  margin: 20px 0 26px;
  padding: 30px 34px 30px 30px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(31, 77, 56, .07);
  overflow: hidden;
}
/* the spine down the left edge, inside the rounded corner */
.focus::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--green);
}
.focus__badge {
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 15px;
  background: var(--pale); color: var(--green);
  align-self: start;
}
.focus__badge svg { width: 26px; height: 26px; }
.focus__body { min-width: 0; }
.focus__rule { display: flex; align-items: center; gap: 18px; }
.focus__rule .eyebrow { margin: 0; white-space: nowrap; }
.focus__line { flex: 1; height: 1px; background: var(--line); }
.focus__date {
  color: var(--muted); font-size: 12.5px; font-weight: 600;
  letter-spacing: .14em; white-space: nowrap;
}
.focus h2 {
  margin-top: 14px;
  font-size: clamp(25px, 2.6vw, 37px);
  line-height: 1.14;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.focus h2 a { color: var(--green); }
.focus h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.focus__sub { margin-top: 12px; color: var(--muted); font-size: 16.5px; }
.focus__tag { margin-top: 16px; }
.focus__tag span {
  display: inline-block; padding: 8px 17px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink); font-size: 14px;
}
.focus__go {
  align-self: center; white-space: nowrap;
  padding-left: 30px; padding-right: 30px;
  border-left: 1px solid var(--line);
  margin-left: 4px; border-radius: 13px;
}
/* the hairline between the text and the button is a divider in the layout,
   not a border on the button itself */
.focus { --focus-divider: 1px solid var(--line); }
.focus__go { border-left: 0; position: relative; }
.focus__go::before {
  content: ""; position: absolute; left: -30px; top: -42px; bottom: -42px;
  width: 1px; background: var(--line);
}
@media (max-width: 980px) {
  .focus { grid-template-columns: auto minmax(0, 1fr); row-gap: 20px; padding: 26px 24px 26px 22px; }
  .focus__go { grid-column: 2; justify-self: start; }
  .focus__go::before { display: none; }
}
@media (max-width: 620px) {
  .focus { margin: 16px 0 20px; padding: 22px 20px 22px 18px; gap: 16px; }
  .focus__badge { width: 46px; height: 46px; border-radius: 13px; }
  .focus__badge svg { width: 22px; height: 22px; }
  .focus__rule { gap: 12px; }
  .focus__date { font-size: 11.5px; letter-spacing: .1em; }
  .focus h2 { margin-top: 12px; }
  .focus__sub { font-size: 15px; }
  .focus__go { width: 100%; justify-content: center; }
}

.pagehead--doc { position: relative; overflow: hidden; }
.pagehead--doc > :not(.pagehead__art) { position: relative; z-index: 1; }
.pagehead--doc h1 { max-width: 15ch; }
.pagehead--doc .intro { max-width: 46ch; }
.pagehead__art {
  position: absolute; inset: 0 0 0 auto; z-index: 0;
  width: min(42%, 400px);
  background-image: var(--doc-art);
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: contain;
  pointer-events: none;
}
.pagehead--plate .pagehead__art { opacity: .5; }
.pagehead--photo .pagehead__art {
  background-size: cover; background-position: center 26%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 52%);
  mask-image: linear-gradient(to right, transparent, #000 52%);
}
@media (max-width: 860px) {
  /* no room to put a document beside a heading, so it becomes a mark under it */
  .pagehead--doc h1, .pagehead--doc .intro { max-width: none; }
  .pagehead__art {
    position: static; width: 100%; height: 76px; margin-top: 4px;
    background-position: right center; background-size: contain;
  }
  .pagehead--photo .pagehead__art {
    height: 104px; background-size: contain; background-position: right center;
    -webkit-mask-image: none; mask-image: none;
  }
}
.pagehead h1 { font-size: clamp(31px, 3.5vw, 49px); max-width: 17ch; }
.pagehead .intro { margin-top: 16px; max-width: 54ch; font-size: 17px; }
.pagehead .eyebrow { margin-bottom: 14px; }
.pagehead__facts {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 8px 22px;
}
.pagehead__facts div {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline;
  padding-block: 14px; border-bottom: 1px solid var(--line);
}
.pagehead__facts div:last-child { border-bottom: 0; }
.pagehead__facts dt { font-size: 14.5px; color: var(--muted); }
.pagehead__facts dd {
  margin: 0; font: 700 21px/1.1 var(--sans); font-variant-numeric: tabular-nums;
  letter-spacing: -.5px; color: var(--green);
}
@media (max-width: 900px) {
  .act-about { grid-template-columns: 1fr; gap: 14px; }
  .pagehead { padding: 26px 22px; grid-template-columns: 1fr; gap: 26px; }
  .pagehead h1 { max-width: none; }
}

.act-head { padding: 52px 0 28px; max-width: 760px; }
.act-head h1 { font-size: clamp(32px, 3.6vw, 50px); }
.act-min { margin-top: 14px; color: var(--muted); font-size: 14px; }
.act-head .intro { margin-top: 18px; }

.act-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; align-items: start; }

.fee { padding: 34px; }
.fee-figure {
  font: 700 clamp(44px, 5vw, 68px)/1 var(--sans);
  font-variant-numeric: tabular-nums; letter-spacing: -2px;
  margin-top: 14px; color: var(--ink);
}
.fee-figure span { font-size: .3em; font-weight: 700; letter-spacing: .06em; margin-left: .35em; color: var(--muted); }
.fee-figure--none { font-family: var(--serif); font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.02em; font-weight: 600; }
.fee-figure--md { font-size: clamp(32px, 3.6vw, 46px); letter-spacing: -1.4px; line-height: 1.05; }
.fee-figure--sm {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(23px, 2.3vw, 30px); line-height: 1.2;
}
.fee-qual { margin-top: 10px; color: var(--muted); font-size: 15px; }
.fee-warn {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 10px 13px; border-radius: 11px;
  background: var(--amber-bg); color: var(--amber);
  font-size: 13px; font-weight: 700;
}
.fee-warn svg { width: 17px; height: 17px; }
.fee-eur { margin-top: 15px; color: var(--muted); font-size: 15px; }

/* The price list, rate table or schedule that sits under the headline figure.
   Most services price through one of these, so it is a primary element of the
   page and not an appendix. */
.pricetable { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.pricetable__h {
  font: 700 12px/1.5 var(--sans); letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.pricetable dl { margin: 0; }
.pricetable div {
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: baseline;
  padding-block: 11px; border-bottom: 1px solid var(--line);
}
.pricetable div:last-child { border-bottom: 0; padding-bottom: 0; }
.pricetable dt { font-size: 15px; color: var(--ink); }
.pricetable dd {
  margin: 0; font-weight: 700; font-size: 15px; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--green);
}
.source-row {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line);
}
.source-why { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin-top: 6px; }
.source-name { font-size: 16px; color: var(--ink); margin-top: 4px; font-family: var(--serif); }
.fee--none { background: linear-gradient(0deg, var(--amber-bg), var(--amber-bg)) padding-box; }

.act-facts { padding: 26px; }
.act-facts dl { margin: 0; display: grid; gap: 0; }
.act-facts div { padding-block: 13px; border-bottom: 1px solid var(--line); }
.act-facts div:last-of-type { border-bottom: 0; }
.act-facts dt { font-size: 13.5px; color: var(--muted); }
.act-facts dd { margin: 3px 0 0; font-size: 14px; }
.act-facts code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.act-facts .text-link { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); min-height: 44px; }

.act-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 44px; align-items: start; }
.act-about h2 { font-size: clamp(24px, 2.3vw, 31px); margin: 0; }
.act-about p { color: var(--muted); font-size: 16.5px; line-height: 1.7; max-width: 66ch; }

.update-value.is-none { color: var(--amber); font-weight: 400; font-family: var(--serif); }
.update h3 { font-family: var(--serif); }

.longform { padding: 38px; max-width: 760px; }
.longform h2 { font-size: clamp(24px, 2.3vw, 30px); margin: 34px 0 12px; }
.longform h2:first-child { margin-top: 0; }
.longform h3 { font-size: 18px; margin: 24px 0 8px; font-family: var(--serif); }
.longform p, .longform li { color: var(--muted); font-size: 16px; line-height: 1.8; margin-bottom: 14px; }
.longform ul, .longform ol { padding-left: 22px; margin-bottom: 18px; }
.longform a { color: var(--green); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.longform-stamp { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; }

.crumbs { padding-block: 22px 0; font-size: 14px; color: var(--muted); }
.crumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: 2px 8px; margin: 0; padding: 0;
}
/* Every crumb is the same box, linked or not, so the trail keeps one baseline.
   Only the links were given a height before, and the final crumb, which is
   plain text, rode above them. */
.crumbs li { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: #c3cdc5; }
.crumbs a { color: var(--muted); display: inline-flex; align-items: center; align-self: stretch; }
.crumbs li:last-child { color: var(--ink); }
.crumbs a:hover { color: var(--green); }

@media (max-width: 900px) {
  .act-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .act-head { padding: 30px 0 20px; }
  .fee { padding: 24px; }
  .act-facts { padding: 22px; }
  .longform { padding: 24px; }
  .longform p, .longform li { font-size: 15px; }
}

/* the footer language control needs its own clipping and equal cells */

.brand, .footer .brand { min-height: 44px; }
.text-link { min-height: 44px; }

/* =======================================================================
   Forms, built to the six state board.
   ======================================================================= */
.xform { max-width: 520px; }
.xform__title { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 10px; }
.xform__context { color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 22px; }
.xform__context code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 7px; }
.field .req { color: #b3261e; margin-left: 2px; }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: var(--white); color: var(--ink);
  border: 1px solid #cad5cc; border-radius: 11px;
  font: 16px/1.5 var(--sans); /* 16px or iOS zooms the page on focus */
}
.field textarea { min-height: 92px; resize: vertical; }
.field select { appearance: none; background-image: none; padding-right: 40px; }
.field__wrap { position: relative; }
.field__wrap::after {
  content: ""; position: absolute; right: 16px; top: 21px; pointer-events: none;
  width: 9px; height: 9px; border-right: 1.8px solid var(--muted);
  border-bottom: 1.8px solid var(--muted); transform: rotate(45deg);
}
.field__err { color: #b3261e; font-size: 14.5px; margin-top: 6px; }
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-color: #b3261e; }

.xform__note { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 20px 0 22px; }
.xform .button { width: 100%; min-height: 52px; }
.xform__status { margin-top: 14px; font-size: 14px; color: var(--muted); }
.xform__status.is-bad { color: #b3261e; }

/* the honeypot is clipped, never display:none, and carries a real label */
.hp { position: absolute; left: 0; width: 1px; height: 1px; overflow: hidden;
      clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.xdone { text-align: center; padding: 20px 0 8px; max-width: 520px; }
.xdone__mark {
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto 26px;
}
.xdone__mark svg { width: 34px; height: 34px; stroke-width: 2.4; }
.xdone__mark--ok { background: var(--green); color: #fff; }
.xdone__mark--mail { background: var(--pale); color: var(--green); }
.xdone h2 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 14px; }
.xdone p { color: var(--muted); font-size: 15px; line-height: 1.7; }
.xdone p strong { color: var(--ink); }
.xdone .button { margin-top: 26px; min-width: 200px; }
.xdone__acts { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: center; margin-top: 24px; }

/* A form page is a form and the answer to "what happens to this". The card
   used to sit alone at 620px inside the 1240px container with the other 620px
   empty beside it. */
.formpage { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.formpage__main { display: grid; gap: 28px; min-width: 0; }
.formside { display: grid; gap: 18px; position: sticky; top: 24px; }
.formside__card { padding: 24px 26px; }
.formside__card h2 { font-size: 19px; }
.formside__card p { margin-top: 12px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.formside__card .text-link { margin-top: 16px; }
.formside__steps { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 14px; }
.formside__steps li {
  counter-increment: s; position: relative; padding-left: 34px;
  font-size: 15px; color: var(--muted); line-height: 1.55;
}
.formside__steps li::before {
  content: counter(s); position: absolute; left: 0; top: -1px;
  width: 23px; height: 23px; display: grid; place-items: center;
  background: var(--pale); color: var(--green); border-radius: 8px;
  font: 700 12px/1 var(--sans);
}
@media (max-width: 900px) {
  .formpage { grid-template-columns: 1fr; }
  .formside { position: static; }
}

/* A reading page is centred on its measure, so the gutters are even instead of
   leaving 519px of nothing down one side. */
main.read { width: min(824px, calc(100% - 48px)); }
main.read .pagehead { padding: 34px 36px; }
main.read .longform { max-width: none; }
.formcard { padding: 34px; }
@media (max-width: 620px) { .formcard { padding: 24px; } .xform .button { min-height: 50px; } }
.act-actions { display: grid; gap: 14px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.act-actions .button { width: 100%; }
.act-actions .text-link { justify-content: flex-start; }

/* the form card should not be a wide box around a narrow column */
.formcard { max-width: none; }
.field__wrap { display: block; position: relative; }

/* the footer language pill lost its clipping when base.html was rebuilt */
.footer .languages { overflow: hidden; border-radius: 11px; align-items: stretch; flex-direction: row; gap: 0; }
.footer .languages a {
  /* `.footer nav a` sets display:flex with no justify-content and outranks
     `.languages a`, which left aligned both labels inside their cells. */
  display: flex; align-items: center; justify-content: center;
  min-width: 52px; min-height: 44px; border-radius: 0; padding: 0;
}
.footer .legal-links { flex-direction: row; flex-wrap: wrap; gap: 24px; }
@media (max-width: 620px) {
  .footer .legal-links { flex-direction: column; gap: 0; }
  .footer .languages { align-self: flex-start; }
}

/* =======================================================================
   Source document reader.
   ======================================================================= */
.srcsum { display: grid; gap: 26px; padding: 28px 30px; }
.srcsum h2 { font-size: 24px; margin-bottom: 10px; }
.srcsum__label { font-size: 13.5px; color: var(--muted); margin-bottom: 8px; }
.srcsum__figure { font: 700 32px/1.1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -1px; color: var(--green); }
.srcsum__figure--none { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--amber); letter-spacing: 0; }
.srcsum__ref { font-size: 15px; }
.srcsum__ref a { color: var(--green); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 7px; }
.srcsum__ref a .ico { width: 15px; height: 15px; }
.srcsum__code { margin-top: 7px; font-size: 14px; color: var(--muted); }
.srcsum__code code { font-family: ui-monospace, Menlo, Consolas, monospace; }
.srcsum__date { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }

.srcgrid { display: grid; gap: 20px; margin-top: 20px; }
.srcdoc { padding: 26px; }
.srcdoc__head { display: grid; gap: 16px; margin-bottom: 20px; }
.srcdoc__head h2 { font-size: 22px; }
.srcdoc__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.srcdoc__acts .button { min-height: 46px; font-size: 14px; }
.srcdoc__view {
  background: #eef2ee; border-radius: 14px; padding: 60px 24px;
  display: grid; place-items: center; text-align: center; gap: 6px; color: var(--muted);
}
.srcdoc__view .ico { width: 44px; height: 44px; stroke-width: 1.3; margin-bottom: 12px; }
.srcdoc__view-h { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink); }
.srcdoc__view-b { font-size: 14px; max-width: 42ch; }

.srcside { display: grid; gap: 20px; }
.srcpanel { padding: 24px 26px; }
.srcpanel h2 { font-size: 19px; margin-bottom: 16px; }
.srcpanel dl { margin: 0; }
.srcpanel div { display: flex; justify-content: space-between; gap: 18px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.srcpanel div:last-child { border-bottom: 0; padding-bottom: 0; }
.srcpanel dt { font-size: 14.5px; color: var(--muted); flex: 0 0 auto; }
.srcpanel dd { margin: 0; font-size: 14px; text-align: right; }
.srcpanel dd.is-figure { font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }
.srcpanel dd.is-todo { color: var(--muted); background: #eef2ee; border-radius: 8px; padding: 6px 10px; font-size: 13px; }

.srcfall { display: grid; gap: 18px; padding: 24px 26px; margin-top: 20px; background: #f2f4f2; }
.srcfall__text { display: flex; gap: 14px; align-items: flex-start; }
.srcfall__text .ico { width: 26px; height: 26px; color: var(--muted); flex: 0 0 26px; }
.srcfall h2 { font-size: 17px; margin-bottom: 6px; }
.srcfall p { font-size: 14px; color: var(--muted); line-height: 1.6; }
.srcfall__acts { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.srcfall__acts .text-link .ico { width: 17px; height: 17px; }

.srchist { padding-top: 34px; }
.srchist h2 { font-size: 19px; margin-bottom: 14px; }
.srchist__row { display: flex; gap: 28px; padding-block: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.srchist__row span:first-child { flex: 0 0 160px; font-variant-numeric: tabular-nums; }

@media (min-width: 62em) {
  .srcsum { grid-template-columns: 1.3fr 1.2fr .8fr; gap: 0; }
  .srcsum > div + div { padding-left: 30px; border-left: 1px solid var(--line); }
  .srcgrid { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: start; }
  .srcdoc__head { grid-template-columns: 1fr auto; align-items: center; }
  .srcfall { grid-template-columns: 1fr auto; align-items: center; }
}
.source-go { margin-top: 14px; font-size: 14.5px; }

/* ---- header search -------------------------------------------------------
   The only search on the site used to be the box on the home page, and the
   nav carried a tab called "Search" that was an anchor link to it. This is a
   real control, on every page. */
.hsearch { position: relative; flex: 0 1 270px; min-width: 0; }
.hsearch__icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--muted); pointer-events: none;
}
.hsearch input {
  width: 100%; height: 44px; padding: 8px 14px 8px 40px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--paper); color: var(--ink); font-size: 15px;
}
.hsearch input::placeholder { color: var(--muted); }
.hsearch input:focus { background: #fff; border-color: #9cbcab; }
.hsearch input::-webkit-search-cancel-button { cursor: pointer; }
.hsearch__list {
  /* wider than the input it hangs from, because an act's name is a sentence
     and wrapping it four lines deep in a 290px column reads as broken */
  position: absolute; z-index: 70; top: calc(100% + 7px); right: 0; left: auto;
  width: min(470px, calc(100vw - 48px));
  margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 44px #233d2e1f; max-height: 66vh; overflow-y: auto;
}
.hsearch__list a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px;
  align-items: center; padding: 10px 12px; border-radius: 9px;
}
.hsr__main { min-width: 0; }
.hsr__cat { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.hsr__none { padding: 14px 12px; font-size: 14.5px; color: var(--muted); }
.hsr__all { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.hsr__all a {
  display: block; text-align: center; padding: 11px;
  font-size: 14px; font-weight: 700; color: var(--green);
}
.hsr__all a:hover { background: var(--pale); }
.hsearch__list li[aria-selected="true"] a, .hsearch__list a:hover { background: var(--pale); }
.hsr__nm {
  display: block; font-family: var(--serif); font-size: 15.5px; font-weight: 600;
  line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hsr__amt {
  font-size: 13.5px; font-weight: 700; color: var(--green);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hsearch-toggle { display: none; background: none; border: 1px solid var(--line);
  border-radius: 10px; width: 44px; height: 44px; color: var(--green); }

/* Six tabs and a search box stop fitting on one row well before the menu
   button appears at 880px, and a nav that wraps under itself reads as a
   mistake. The band between the two tightens rather than hides. */
@media (max-width: 1200px) {
  .nav { gap: 0; }
  .nav a { padding-inline: 10px; font-size: 14.75px; }
  .hsearch { flex-basis: 200px; }
}
@media (max-width: 1040px) {
  /* the input would crowd the wordmark, and with six tabs beside it the nav
     wraps under itself, so it drops behind a toggle and spans the header when
     opened. Search is still one click from every page, which is the point of
     putting it in the header at all. */
  .hsearch-toggle { display: grid; place-items: center; }
  .hsearch { position: absolute; left: 0; right: 0; top: 100%; flex: none;
    padding: 0 0 14px; background: #fff; display: none; }
  body.hsearch-open .hsearch { display: block; }
  .hsearch__list { top: calc(100% - 8px); }
}

/* ---- home banner ---------------------------------------------------------
   A photograph behind the headline, with three slides. The pictures are
   ministry buildings in Yaoundé, deliberately not the Presidency: the site
   states on every page that it is not a government body, and the seat of the
   executive behind the headline would say the opposite. */
.hbanner {
  position: relative; isolation: isolate;
  width: 100vw; margin-inline: calc(50% - 50vw);
  padding-block: 44px 30px; margin-top: 0;
  color: #fff; overflow: hidden;
  background: var(--green-dark);
}
.hbanner__media { position: absolute; inset: 0; z-index: -2; }
.hbanner__shot { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.hbanner__shot.is-on { opacity: 1; }
.hbanner__shot img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
/* The text has to stay legible over every frame, so the ground is darkened
   rather than trusting any one photograph's exposure. */
.hbanner::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, #0b2f27f0 0%, #0b2f27d6 46%, #0b2f2766 100%),
    linear-gradient(0deg, #0b2f27cc, #0b2f2733);
}
.hbanner .eyebrow { color: #cfe3d6; }
/* All three slides occupy the same grid cell, so the banner is always as tall
   as the longest of them and never resizes when one replaces another. They
   used to be absolutely positioned with the active one switched back to
   relative, which made the banner exactly as tall as whichever slide was
   showing: the whole page moved by 63px in English and 31px in French every
   time it rotated. */
.hbanner__slides { display: grid; min-height: 214px; }
.hbanner__slide {
  grid-area: 1 / 1; opacity: 0; visibility: hidden;
  transform: translateY(10px); transition: opacity .55s ease, transform .55s ease;
}
.hbanner__slide.is-on { opacity: 1; visibility: visible; transform: none; }
.hbanner h1, .hbanner__h {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.035em;
  line-height: 1.08; font-size: clamp(34px, 4.1vw, 58px);
  max-width: 17ch; margin: 0; color: #fff;
}
.hbanner__lede {
  margin-top: 18px; max-width: 54ch;
  font-size: clamp(16px, 1.3vw, 19px); line-height: 1.65; color: #dce9e0;
}
.hbanner .search-form { margin-top: 30px; max-width: 720px; }
.hbanner .input-wrap input { border-color: #ffffff2e; }
.hbanner .popular { color: #c8ddd0; }
.hbanner .popular button { border-color: #ffffff3d; color: #fff; background: #ffffff14; }
.hbanner .popular button:hover { background: #ffffff29; }
.hbanner__dots { display: flex; }
.hbanner__credit { margin: 0; font-size: 12px; color: #ffffff8a; }


@media (max-width: 1040px) {
  .hbanner__grid { grid-template-columns: 1fr; gap: 30px; }
  .promise--onshot h2 { max-width: none; }
}
@media (max-width: 900px) {
  .hbanner { padding-block: 32px 26px; }
  .hbanner__slides { min-height: 250px; }
  .hbanner::before { background: linear-gradient(0deg, #0b2f27f2 10%, #0b2f27c9 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .hbanner__shot, .hbanner__slide { transition: none; }
}

/* The promise panel sits inside the banner, where it was before the photograph
   went in. On an image a white card fights both the picture and the headline,
   so it is a dark glass panel and the type is reversed out of it. */
.hbanner__grid {
  display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  gap: 54px; align-items: center;
}
.hbanner__footer { padding-top: 14px; }
.promise--onshot {
  background: #0a2a23bf; backdrop-filter: saturate(1.2) blur(10px);
  border: 1px solid #ffffff2b; border-radius: var(--radius);
  padding: 28px 30px; color: #fff; box-shadow: 0 18px 50px #06201a4d;
}
.promise--onshot h2 { color: #fff; font-size: clamp(23px, 1.9vw, 29px); max-width: 15ch; margin: 16px 0 20px; }
.promise--onshot .badge { background: #ffffff1f; color: #fff; }
.promise--onshot .promise-rows { display: grid; gap: 18px; }
.promise--onshot .promise-row { margin-top: 0; }
.promise--onshot .promise-row strong { color: #fff; }
.promise--onshot .promise-row p { color: #d2e2d8; }
.promise--onshot .state-icon { color: #8fd3bb; }
.promise--onshot .state-icon.amber { color: #e8b86a; }
.promise--onshot .text-link {
  display: flex; align-items: center; gap: 8px; color: #fff;
  border-top: 1px solid #ffffff2e; padding-top: 18px; margin-top: 22px; min-height: 44px;
}
@media (max-width: 1040px) {
  .hbanner__grid { grid-template-columns: 1fr; gap: 30px; }
  .promise--onshot h2 { max-width: none; }
}

/* The section label gets a rule of its own, set to the width of the words, so
   it reads as a marker rather than a stray line of small caps. */
.section-heading .eyebrow, .hbanner .eyebrow {
  position: relative; display: inline-block; padding-bottom: 9px; margin-bottom: 16px;
}
.section-heading .eyebrow::after, .hbanner .eyebrow::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%;
  height: 2px; border-radius: 2px; background: var(--amber); opacity: .55;
}
.hbanner .eyebrow::after { background: #e8b86a; opacity: .7; }
/* a heading that is one sentence should use the width it has */
.section-heading h2 { max-width: 22ch; }

/* A fact that is a phrase rather than a figure needs its own size: "Set case by
   case" at 21px tabular looks like a number that failed to load. */
.pagehead__facts dd.is-ref {
  font: 600 15.5px/1.35 var(--serif); letter-spacing: -.01em; color: var(--ink);
  text-align: right; max-width: 22ch;
}
.pagehead__facts dd.is-ref code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; }
.pagehead .act-min { margin-top: 14px; color: var(--muted); font-size: 16px; }

/* The banner dots were a 5px bar, which is not a tap target. The button keeps
   a 44px box and the bar is drawn inside it. */
.hbanner__dots button {
  width: auto; height: auto; padding: 20px 0; background: none;
  border: 0;
  display: grid; align-items: center; min-height: 44px;
}
.hbanner__dots button::before {
  content: ""; display: block; width: 34px; height: 5px; border-radius: 3px;
  background: #ffffff4d; transition: background-color .2s, width .2s;
}
.hbanner__dots button[aria-selected="true"]::before { background: #fff; width: 54px; }
.hbanner__dots button:hover::before { background: #ffffff8f; }
.hbanner__dots { gap: 11px; margin-top: 16px; }

/* ---- editorial pages -----------------------------------------------------
   These pages carry the site's credibility and run long. A single centred
   column left them as one heavy block, and narrowing the page put the header
   out of line with the content, so they read as a different layout. They now
   use the site's width with a companion column. */
.longread {
  display: grid; grid-template-columns: minmax(0, 1fr) 316px;
  gap: 28px; align-items: start; margin-top: 24px;
}
.longside { display: grid; gap: 16px; position: sticky; top: 108px; }
.longside__card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 16px; padding: 22px 24px;
}
.longside__card h2 {
  font: 700 11.5px/1.5 var(--sans); letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 14px;
}
.longside__card ol, .longside__card ul { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.longside__card ol li { counter-increment: toc; }
.longside__card ol a::before {
  content: counter(toc); display: inline-grid; place-items: center;
  width: 20px; height: 20px; margin-right: 10px; flex: 0 0 20px;
  background: var(--pale); color: var(--green); border-radius: 6px;
  font: 700 11px/1 var(--sans);
}
.longside__card a {
  display: flex; align-items: center; min-height: 40px;
  font-size: 14.5px; line-height: 1.4; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.longside__card li:last-child a { border-bottom: 0; }
.longside__card a:hover { color: var(--green); }
.longside__card ul a { justify-content: space-between; gap: 12px; font-weight: 600; color: var(--green); }
.longside__card ul svg { width: 17px; height: 17px; }
.longside__figs dl { margin: 0; }
.longside__figs div {
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: baseline;
  padding-block: 10px; border-bottom: 1px solid var(--line);
}
.longside__figs div:last-child { border-bottom: 0; }
.longside__figs dt { font-size: 14px; color: var(--muted); }
.longside__figs dd {
  margin: 0; font: 700 19px/1.1 var(--sans); color: var(--green);
  font-variant-numeric: tabular-nums; letter-spacing: -.4px;
}
.longform h2 { scroll-margin-top: 112px; }
@media (max-width: 1000px) {
  .longread { grid-template-columns: 1fr; }
  .longside { position: static; }
}

/* ---- the document, readable here ----------------------------------------
   The reader used to link out and print placeholder rows where it had
   nothing. It now shows the opening pages of the copy the register holds,
   rendered at build time rather than through a viewer, because a scanned
   finance law runs to hundreds of pages and nobody on mobile data should
   download one to see whether it is the right document. */
.srcdoc__pages { display: grid; gap: 14px; }
.srcpage { margin: 0; }
.srcpage img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff;
}
.srcpage figcaption {
  margin-top: 7px; font-size: 13px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.srcdoc__more {
  margin-top: 4px; padding: 13px 16px;
  background: var(--pale); border-radius: 11px;
  font-size: 14.5px; color: var(--green); font-weight: 700;
}
.srcpanel dd.is-held { color: var(--green); font-weight: 700; }
.srcpanel dd.is-absent { color: var(--amber); }

/* ---- a fee schedule inside a reading page -------------------------------
   The document guides carry real tables. A grid item defaults to
   min-width:auto, so the article grew to the table's intrinsic width and the
   whole page scrolled sideways: 419px of content in a 390px viewport on the
   passport page, 484px on the carte de sejour. The scroll belongs to the
   table's own wrapper, which already has overflow-x, not to the document. */
.longread > * { min-width: 0; }
.longform .tablewrap { max-width: 100%; }
.longform .vtable { font-size: 0.9375rem; }
.longform .vtable th, .longform .vtable td { line-height: 1.5; }
.longform .vtable thead th { white-space: nowrap; }
.longform blockquote {
  margin: 20px 0; padding: 14px 18px;
  border-left: 3px solid var(--green); border-radius: 0 12px 12px 0;
  background: var(--pale);
}
.longform blockquote p { margin: 0; color: var(--ink); font-size: 15.5px; }
.longform blockquote p + p { margin-top: 10px; }
@media (max-width: 620px) {
  .longform .vtable { font-size: 0.875rem; }
  .longform .vtable th, .longform .vtable td { padding: var(--s3) var(--s2); }
  /* The amount is the column the reader came for, and nowrap pushed it off the
     right edge of a 390px screen behind a scroll. Let it wrap instead, so the
     schedule fits and nothing has to be dragged into view. */
  .longform .vtable td:last-child, .longform .vtable th:last-child { white-space: normal; }
}

/* The language gate, built to the design board: a green brand panel on the
   left, the choice on paper to the right, one column on a phone. It is the
   first thing a new visitor sees and it has to look like the site it opens. */
.choosepage { background: var(--paper); }
.gate { min-height: 100vh; min-height: 100svh; display: grid;
        grid-template-columns: 1fr 2fr; align-items: stretch; }

/* ---- the brand panel ---- */
.gate__brandside {
  position: relative; overflow: hidden;
  background: var(--green-dark); color: #fff;
  display: grid; align-content: start; gap: 0;
  padding: 44px 44px 36px;
}
.gate__brand { margin-bottom: 86px; }
.gate__brandside .wordmark { color: #fff; font-size: 44px; }
.gate__brandside .brand-mark { width: 44px; height: 44px; }
.gate__brandside .bm-disc { fill: #fff; }
.gate__brandside .bm-fig { fill: var(--green-dark); }

.gate__claim {
  font: 600 clamp(30px, 2.9vw, 42px)/1.15 var(--serif);
  letter-spacing: -.03em; color: #fff; text-wrap: balance;
}
.gate__claim-en { margin-top: 14px; font-size: 17px; color: #a9c6b7; }
.gate__doc { width: 44px; height: 44px; margin-top: 40px; color: #7fae97; }

/* the mark again, oversized and bled off the corner, as the board draws it */
.gate__quilt {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 118px;
  display: grid; grid-template-columns: repeat(2, 104px); gap: 16px;
  pointer-events: none;
}
/* Texture, not content. At the opacity it first shipped at these read as four
   empty cards sitting in the middle of the panel; they belong in the corner,
   bleeding off two edges, barely registering. */
.gate__quilt i { width: 104px; height: 104px; border-radius: 26px; background: #ffffff09; }
.gate__quilt i:nth-child(2) { background: #ffffff0b; }
.gate__quilt i:nth-child(3) { background: #ffffff05; }
.gate__quilt i:nth-child(4) { background: #ffffff09; }

.gate__pub {
  position: absolute; left: 44px; right: 44px; bottom: 30px;
  font-size: 15px; color: #cfe3d6;
}
.gate__pub--m { display: none; }

/* ---- the choice ---- */
.gate__pick { display: grid; align-content: center; padding: 56px 6vw; }
.gate__pickinner { width: min(100%, 560px); }
.gate__pick .eyebrow { margin-bottom: 22px; }
.gate__h1 {
  font: 600 clamp(32px, 3.4vw, 46px)/1.1 var(--serif);
  letter-spacing: -.03em; color: var(--green); text-wrap: balance;
}
.gate__h1en {
  margin-top: 6px; font: 400 clamp(22px, 2.3vw, 31px)/1.2 var(--serif);
  letter-spacing: -.02em; color: #6f8a7d;
}
.gate__lede { margin-top: 26px; font-size: 15.5px; line-height: 1.6; }
.gate__lede span { display: block; }
.gate__lede span[lang="fr"] { color: var(--ink); }
.gate__lede span[lang="en"] { color: var(--muted); }

.gate__opts { display: grid; gap: 14px; margin-top: 26px; }
.gate__opts a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 20px; align-items: center;
  padding: 18px 22px; border-radius: 16px;
  background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 6px 20px #233d2e0a;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.gate__opts a:hover, .gate__opts a:focus-visible {
  border-color: #9cbcab; box-shadow: 0 10px 26px #233d2e14; transform: translateY(-1px);
}
.gate__code {
  display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 13px; background: var(--pale); color: var(--green);
  font: 700 15px/1 var(--sans); letter-spacing: .06em;
}
.gate__text { display: grid; gap: 4px; min-width: 0; }
.gate__text strong { font: 700 17.5px/1.25 var(--sans); color: var(--ink); }
.gate__text span { font-size: 14.5px; color: var(--muted); line-height: 1.45; }
.gate__go { width: 22px; color: var(--ink); flex: none; }

.gate__remember {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 30px; font-size: 15.5px; line-height: 1.6;
}
.gate__remember svg { width: 22px; height: 22px; color: var(--muted); flex: none; margin-top: 1px; }
.gate__remember span span { display: block; }
.gate__remember span span[lang="fr"] { color: var(--ink); }
.gate__remember span span[lang="en"] { color: var(--muted); }

.gate__foot {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 46px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 15px; color: var(--muted);
}
/* It is a link, so it has to look like one without being hovered first. */
.gate__foot a {
  color: var(--green); font-weight: 600;
  text-decoration: underline; text-decoration-color: #9cbcab;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.gate__foot a:hover, .gate__foot a:focus-visible {
  text-decoration-color: var(--green); text-decoration-thickness: 2px;
}

/* the mark carries the wordmark on paper for the phone layout, where the
   green panel is not shown; on desktop the panel carries it instead */
.gate__brand--m { display: none; }
.gate__brand--m .brand-mark { width: 40px; height: 40px; }
.gate__brand--m .wordmark { font-size: 38px; }

/* ---- one column on a phone, which is the right half of the board ---- */
@media (max-width: 900px) {
  .gate { grid-template-columns: 1fr; }
  .gate__brandside { display: none; }
  .gate__brand--m { display: inline-flex; margin-bottom: 34px; }
  .gate__pick { padding: 34px 20px 28px; align-content: start; }
  .gate__pickinner { width: 100%; }
  .gate__pub--m {
    display: block; position: static; margin-top: 34px; padding-top: 20px;
    border-top: 1px solid var(--line); color: var(--ink); font-size: 14px;
  }
  .gate__pub--m span { display: block; color: var(--muted); }
  .gate__foot { margin-top: 18px; border-top: 0; padding-top: 0; }
}

/* Wherever the mark lands, the disc must not be the colour behind it.
   It shipped invisible in the footer once: a green disc on the green band. */
.footer .brand-mark .bm-disc { fill: #ffffff; }
.footer .brand-mark .bm-fig  { fill: var(--green); }
.hbanner .brand-mark .bm-disc { fill: #ffffff; }
.hbanner .brand-mark .bm-fig  { fill: var(--green-dark); }