/* Colour and type follow the host's own tokens — Fredoka for anything read as
   a control, Inter for footer utility text — so the chooser belongs to the page
   instead of overriding it. The surface tokens are the only literals, because a
   dark host (site/v1.html) has no cream equivalent to inherit. */
:root{
  --site-ui-ink:var(--ink,#241d3a);
  --site-ui-line:var(--line,#e7ddc6);
  /* One quiet tone for the whole component. The host --mut is not usable here:
     it varies per template (#6a637e landing, #635a75 account, #7c7592 utility)
     and the utility value is only 3.9:1 on cream — below AA. */
  --site-ui-quiet:#6a637e;
  --site-ui-focus:#6041cc;
  --site-ui-display:'Fredoka',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --site-ui-text:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --site-ui-surface:#fff;
  --site-ui-hover:#fff8ec;
  --site-ui-onink:#fff;
  --site-ui-shadow:0 14px 30px -12px rgba(36,29,58,.3);
}
body.site-ui-dark{
  /* The kinetic landing is an Inter-only design with no display face of its
     own, so the chooser follows its typography instead of importing ours. */
  --site-ui-display:var(--site-ui-text);
  --site-ui-quiet:#8b8c98;
  --site-ui-focus:#9b8cff;
  --site-ui-surface:#0d0e12;
  --site-ui-hover:#15161d;
  --site-ui-onink:#060608;
  --site-ui-shadow:0 18px 40px -14px rgba(0,0,0,.75);
}
.site-language-standalone-footer{max-inline-size:1120px;margin:32px auto 0;padding:20px 26px;border-top:1px solid var(--site-ui-line);color:var(--site-ui-quiet)}
body.site-language-error-page{flex-direction:column;min-block-size:100vh;min-block-size:100dvh;gap:32px;padding:32px 24px 16px}
.site-language-error-page main{margin-block:auto}
footer.site-language-compact-footer{position:static;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;inline-size:100%}
.site-language-compact-footer .site-language-footer{margin-inline-start:12px}
footer.site-language-host{margin-block-end:var(--site-language-consent-space,0px)}
/* The entry keeps a 44px touch box, so the row it joins has to centre its own
   one-line neighbours against it instead of letting them sit at the top. */
.site-language-host .foot,.site-language-host .foot-bot,footer.site-language-host{align-items:center}
.site-language-actions{display:flex;align-items:center;justify-content:flex-end;gap:24px;flex-wrap:wrap;max-inline-size:100%;min-inline-size:0;margin-inline-start:auto}
.site-language-actions>.site-language-footer{margin-inline-start:0}
.site-language-footer{display:flex;align-items:center;justify-content:flex-end;margin-inline-start:auto;min-inline-size:0}
/* The footer entry is one of the utility links around it, so it carries their
   weight and colour — never more than the copyright it sits beside. */
.site-language-trigger{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-block-size:44px;min-inline-size:44px;max-inline-size:100%;padding:6px 0;border:0;border-radius:8px;background:transparent;color:var(--site-ui-quiet);font:400 13px/1.5 var(--site-ui-text);text-align:start;cursor:pointer;text-decoration:none;box-shadow:none;letter-spacing:normal;text-transform:none}
.site-language-trigger:hover{color:var(--site-ui-ink);background:transparent;text-decoration:none;transform:none}
.site-language-trigger svg{inline-size:15px;block-size:15px;flex:none}
#siteLanguageCurrent,[data-site-language-current]{min-inline-size:0;overflow-wrap:anywhere}
.site-language-dialog,.site-language-dialog *{box-sizing:border-box}
dialog.site-language-dialog{position:fixed;inset:0;inline-size:min(720px,calc(100vw - 32px));max-inline-size:720px;max-block-size:calc(100vh - 32px);max-block-size:calc(100dvh - 32px);margin:auto;padding:0;overflow:hidden;border:2.5px solid var(--site-ui-ink);border-radius:20px;background:var(--site-ui-surface);color:var(--site-ui-ink);font:400 15px/1.5 var(--site-ui-text);text-align:start;letter-spacing:normal;box-shadow:var(--site-ui-shadow)}
dialog.site-language-dialog[open]{display:flex;flex-direction:column}
dialog.site-language-dialog::backdrop{background:rgba(36,29,58,.42)}
body.site-ui-dark dialog.site-language-dialog::backdrop{background:rgba(0,0,0,.62)}
.site-language-dialog .site-language-heading{display:flex;flex:none;align-items:center;justify-content:space-between;gap:16px;margin:0;padding:16px 20px 12px;border:0;border-bottom:2px solid var(--site-ui-line);background:transparent;position:static;min-height:0;box-shadow:none}
.site-language-dialog #siteLanguageTitle{display:block;position:static;margin:0;padding:0;color:var(--site-ui-ink);font:700 22px/1.3 var(--site-ui-display);letter-spacing:normal;text-transform:none;overflow-wrap:anywhere}
.site-language-dialog #siteLanguageTitle::after{display:none}
.site-language-dialog .site-language-close{display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:44px;block-size:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--site-ui-quiet);cursor:pointer;box-shadow:none;transform:none}
.site-language-dialog .site-language-close:hover{background:var(--site-ui-hover);color:var(--site-ui-ink)}
.site-language-dialog .site-language-close svg{inline-size:20px;block-size:20px}
.site-language-dialog .site-language-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;min-block-size:0;margin:0;padding:12px;overflow:auto;overscroll-behavior:contain;scroll-padding-block:12px;scrollbar-gutter:stable}
.site-language-dialog .site-language-option{display:flex;align-items:center;justify-content:space-between;gap:8px;min-inline-size:0;min-block-size:44px;margin:0;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:var(--site-ui-ink);font:500 14px/1.5 var(--site-ui-display);text-decoration:none;text-align:start;letter-spacing:normal;text-transform:none;box-shadow:none;overflow-wrap:anywhere;transform:none}
.site-language-dialog .site-language-option:hover{background:var(--site-ui-hover);color:var(--site-ui-ink)}
/* Selection is marked the way the site marks it everywhere else: ink block,
   reversed text — not a tint borrowed from another palette. */
.site-language-dialog .site-language-option[aria-current=true]{background:var(--site-ui-ink);color:var(--site-ui-onink)}
.site-language-dialog .site-language-check{inline-size:16px;block-size:16px;flex:none;visibility:hidden}
.site-language-dialog [aria-current=true] .site-language-check{visibility:visible}
.site-language-trigger:focus-visible,.site-language-dialog .site-language-option:focus-visible,.site-language-dialog .site-language-close:focus-visible{outline:3px solid var(--site-ui-focus);outline-offset:2px}
/* Every "back" link on the site draws its arrow here rather than carrying the
   glyph in its text: out of 34 translations per page, out of the copy the mobile
   menu makes of the link, and mirrored in RTL so it points at the brand instead
   of away from it. */
a.back::before{content:"\2190";margin-inline-end:.4em;font-weight:600}
[dir="rtl"] a.back::before{content:"\2192"}
/* The same controls fit the landing, utility, account and error headers. The
   row keeps whatever height its own template sets. */
.site-navigation-host .site-navigation-row{display:flex;align-items:center;gap:16px;padding-block:10px}
.site-navigation-row>.brand,.site-navigation-row>.logo{flex:none;margin:0}
.site-navigation-row>.back{margin-inline-start:auto}
.site-navigation-row>.nav-links{margin-left:0;margin-inline-start:auto;gap:clamp(12px,1.5vw,22px);min-inline-size:0}
.site-navigation-row>.nav-links a{white-space:normal;text-align:center}
.site-navigation-row>.dlmenu,.site-navigation-row>a.btn{flex:none}
.site-navigation-row .dlmenu-list{left:auto;right:auto;inset-inline-end:0;max-inline-size:calc(100vw - 48px)}
.site-navigation-controls{display:flex;align-items:center;flex:none;gap:8px;margin-inline-start:auto}
.site-navigation-row>.back~.site-navigation-controls,.site-navigation-row--landing>.site-navigation-controls{margin-inline-start:0}
/* Desktop-only control, so it wears the bar's own pill instead of a 44px touch
   target that would tower over the download button beside it. */
.site-navigation-controls .site-language-trigger{gap:6px;min-block-size:34px;min-inline-size:0;max-inline-size:220px;padding:5px 11px;border:2px solid var(--site-ui-line);border-radius:9px;font:500 13px/1.4 var(--site-ui-display);white-space:nowrap}
.site-navigation-controls .site-language-trigger:hover{border-color:var(--site-ui-ink)}
/* No chevron in the bar: this opens a dialog, not a dropdown, and the arrow
   costs the width that the section links need on a narrow desktop. */
.site-navigation-controls .site-language-chevron{display:none}
.site-navigation-controls [data-site-language-current]{overflow:hidden;overflow-wrap:normal;text-overflow:ellipsis;white-space:nowrap}
.site-navigation-trigger{display:none;align-items:center;justify-content:center;flex:none;inline-size:44px;block-size:44px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--site-ui-ink);cursor:pointer;box-shadow:none;transform:none}
.site-navigation-trigger svg{inline-size:22px;block-size:22px}
.site-navigation-trigger [data-site-navigation-menu-label]{display:none}
.site-navigation-error-header{inline-size:100%;max-inline-size:1080px;margin-inline:auto}
.site-navigation-dialog,.site-navigation-dialog *{box-sizing:border-box}
dialog.site-navigation-dialog{position:fixed;inset:0;inline-size:min(440px,calc(100vw - 32px));max-inline-size:440px;max-block-size:calc(100vh - 32px);max-block-size:calc(100dvh - 32px);margin:auto;padding:0;overflow:hidden;border:2.5px solid var(--site-ui-ink);border-radius:20px;background:var(--site-ui-surface);color:var(--site-ui-ink);font:400 15px/1.5 var(--site-ui-text);text-align:start;letter-spacing:normal;box-shadow:var(--site-ui-shadow)}
dialog.site-navigation-dialog[open]{display:flex;flex-direction:column}
dialog.site-navigation-dialog::backdrop{background:rgba(36,29,58,.42)}
body.site-ui-dark dialog.site-navigation-dialog::backdrop{background:rgba(0,0,0,.62)}
.site-navigation-dialog .site-navigation-heading{display:flex;flex:none;align-items:center;justify-content:space-between;gap:16px;margin:0;padding:16px 20px 12px;border:0;border-bottom:2px solid var(--site-ui-line);background:transparent;position:static;min-height:0;box-shadow:none}
.site-navigation-dialog #siteNavigationTitle{display:block;position:static;margin:0;padding:0;color:var(--site-ui-ink);font:700 22px/1.3 var(--site-ui-display);letter-spacing:normal;text-transform:none;overflow-wrap:anywhere}
.site-navigation-dialog #siteNavigationTitle::after{display:none}
.site-navigation-dialog .site-navigation-close{display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:44px;block-size:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--site-ui-quiet);cursor:pointer;box-shadow:none;transform:none}
.site-navigation-dialog .site-navigation-close svg{inline-size:20px;block-size:20px}
.site-navigation-dialog .site-navigation-links{display:flex;flex-direction:column;gap:4px;min-block-size:0;margin:0;padding:12px;overflow:auto;overscroll-behavior:contain;scroll-padding-block:12px}
.site-navigation-dialog .site-navigation-link{display:flex;align-items:center;min-block-size:44px;margin:0;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:var(--site-ui-ink);font:500 15px/1.5 var(--site-ui-display);text-decoration:none;text-align:start;letter-spacing:normal;text-transform:none;box-shadow:none;overflow-wrap:anywhere;transform:none}
.site-navigation-dialog .site-navigation-language{flex:none;margin:0;padding:12px 24px;border-top:2px solid var(--site-ui-line)}
.site-navigation-dialog .site-language-trigger{inline-size:100%;justify-content:flex-start;color:var(--site-ui-ink);font:500 15px/1.5 var(--site-ui-display)}
.site-navigation-dialog .site-language-chevron{margin-inline-start:auto}
.site-navigation-dialog .site-navigation-link:hover,.site-navigation-dialog .site-navigation-close:hover,.site-navigation-trigger:hover{background:var(--site-ui-hover);color:var(--site-ui-ink);transform:none}
.site-navigation-trigger:focus-visible,.site-navigation-dialog .site-navigation-link:focus-visible,.site-navigation-dialog .site-navigation-close:focus-visible{outline:3px solid var(--site-ui-focus);outline-offset:2px}
/* Matches each landing template's own breakpoint: above it the section links
   belong in the bar, below it they move into the menu with the language. */
@media(max-width:760px){
  .site-navigation-row>.nav-links,.site-navigation-row>.back,.site-navigation-row>.crumb,.site-navigation-controls>#siteLanguageHeaderTrigger{display:none}
  .site-navigation-trigger{display:inline-flex}
  .site-navigation-host .site-navigation-row{gap:12px}
  .site-navigation-row--landing>.dlmenu,.site-navigation-row--landing>a.btn{margin-inline-start:auto}
  .site-navigation-row--simple>.site-navigation-controls,.site-navigation-row--simple>.back~.site-navigation-controls{margin-inline-start:auto}
}
/* Just above the breakpoint every pixel is spoken for: the longest nav copy
   (pt-PT) needs ~20px more than the default spacing leaves it. */
@media(max-width:820px){
  .site-navigation-host .site-navigation-row{gap:10px}
  .site-navigation-row>.nav-links{gap:10px}
  .site-navigation-controls{gap:6px}
  .site-navigation-controls .site-language-trigger{padding-inline:8px}
}
@media(max-width:720px){
  .site-language-actions{justify-content:flex-start;gap:8px 24px;margin-inline-start:0}
}
@media(max-width:600px){
  dialog.site-navigation-dialog{inline-size:calc(100vw - 24px);max-block-size:calc(100vh - 24px);max-block-size:calc(100dvh - 24px);border-radius:16px}
  .site-navigation-dialog .site-navigation-heading{padding:12px 16px 8px}
  .site-navigation-dialog .site-navigation-links{padding:8px}
  .site-navigation-dialog .site-navigation-language{padding:12px 20px}
  .site-navigation-row--landing>.dlmenu>summary,.site-navigation-row--landing>a.btn{padding-inline:10px;font-size:13px}
  dialog.site-language-dialog{inline-size:calc(100vw - 24px);max-block-size:calc(100vh - 24px);max-block-size:calc(100dvh - 24px);border-radius:16px}
  .site-language-dialog .site-language-options{grid-template-columns:repeat(2,minmax(0,1fr));padding:8px;scroll-padding-block:8px}
  .site-language-dialog .site-language-option{padding:10px 8px;font-size:13px}
  .site-language-dialog .site-language-heading{padding:12px 16px 8px}
}