/* Transfer comparator, version 2.
   Built on the design-taste-frontend tokens (palette, type, spacing, soft radius, motion) dealt for a fintech page:
   palette mint-pink-accounts, type Instrument Sans + DM Mono, brand green ground (header and comparator band), solid buttons.
   One system: do not add a second spacing, type or radius scale. */

/* ---------------------------------------------------------------- fonts (local files, so the page also works offline) */
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/dm-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/dm-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- tokens */
:root {
  --p-bg: #f8f8f8; --p-surface: #eeeeee; --p-ink: #0a0a0a; --p-muted: #6a6a6a;
  --p-accent: #1f6b3a; --p-accent-ink: #ffffff; --p-action: #1f6b3a; --p-action-ink: #ffffff;
  --p-inv-bg: #0a0a0a; --p-inv-surface: #171717; --p-inv-ink: #f8f8f8; --p-inv-muted: #939393;
  --p-inv-accent: #5fb381; --p-inv-accent-ink: #0a0a0a; --p-inv-action: #1f6b3a; --p-inv-action-ink: #ffffff;
  /* the sand ground: no longer carries the hero frame or the footer (the brand green and a light surface do); some bars of the charts still use its colours */
  --ground-bg: #d9ccb7; --ground-surface: #e9e0d2; --ground-ink: #2a2622; --ground-muted: #5a534a; --ground-accent: #a8794a;

  --font-display: "Instrument Sans", system-ui, sans-serif;
  --font-text: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display-weight: 500;
  --display-tracking: -0.028em;
  --display-stretch: 96%;

  --nav: 72px; --container: 1280px; --gut: 80px; --gutter: 24px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --t-label: 13px; --t-small: 14px; --t-body: 16px; --t-lead: 18px; --t-card: 18px; --t-h3: 24px;
  --t-h2: clamp(30px, 1.72vw + 23.3px, 48px);
  --t-h1: clamp(38px, 3.24vw + 25.4px, 72px);
  --t-stat: clamp(28px, .952vw + 24.29px, 38px);
  --r-sm: 14px; --r-md: 18px; --r-lg: 24px; --r-btn: 999px;
  --btn-h: 44px; --btn-h-sm: 36px; --field-h: 48px;
  --ease: cubic-bezier(.2, .8, .2, 1); --ease-enter: cubic-bezier(.22, 1, .36, 1); --dur: 180ms;
  --m-in: 150ms; --m-out: 120ms; --m-press: 90ms;

  --good: #175a2f; --warn: #6e4500; --bad: #a3231b;
  --error: color-mix(in oklab, #d92d20 72%, var(--p-ink));
}
@media (max-width: 639px) { :root { --nav: 56px; --gut: 24px; --gutter: 12px; } }
@media (min-width: 640px) and (max-width: 1023px) { :root { --gut: 48px; } }
@media (min-width: 1024px) { :root { --t-lead: 20px; --t-card: 20px; --t-h3: 28px; } }

/* grounds: the roles every component reads */
:root, .ground-base {
  --bg: var(--p-bg); --surface: var(--p-surface); --ink: var(--p-ink); --muted: var(--p-muted);
  --accent: var(--p-accent); --accent-ink: var(--p-accent-ink); --card: var(--p-surface);
  --action: var(--p-action); --action-ink: var(--p-action-ink);
}
.ground-surface {
  --bg: var(--p-surface); --surface: var(--p-bg); --card: var(--p-bg);
}
.ground-inverse {
  --bg: var(--p-inv-bg); --surface: var(--p-inv-surface); --ink: var(--p-inv-ink); --muted: var(--p-inv-muted);
  --accent: var(--p-inv-accent); --accent-ink: var(--p-inv-accent-ink); --card: var(--p-inv-surface);
  --action: var(--p-inv-action); --action-ink: var(--p-inv-action-ink);
}
.ground-lit {
  --bg: var(--ground-bg); --surface: var(--ground-surface); --ink: var(--ground-ink); --muted: var(--ground-muted);
  --accent: var(--ground-accent); --card: var(--ground-surface);
  --action: var(--p-action); --action-ink: var(--p-action-ink);
}
/* the brand ground: the green of the logo with white text. The header and the band that carries the comparator sit on it. */
.ground-brand {
  --bg: var(--p-accent); --surface: color-mix(in oklab, #ffffff 12%, var(--p-accent)); --ink: #ffffff; --muted: color-mix(in oklab, #ffffff 82%, var(--p-accent));
  --accent: #ffffff; --accent-ink: var(--p-accent); --card: var(--surface);
  --action: #ffffff; --action-ink: var(--p-accent);
}
:root, .ground-base, .ground-surface, .ground-inverse, .ground-lit, .ground-brand {
  --line: color-mix(in oklab, var(--ink) 11%, transparent);
  --line-strong: color-mix(in oklab, var(--ink) 22%, transparent);
}
.ground-surface, .ground-inverse, .ground-lit, .ground-brand { background: var(--bg); color: var(--ink); }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; margin: 0; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--t-body)/1.55 var(--font-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); letter-spacing: var(--display-tracking); text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
h1 { font-size: var(--t-h1); line-height: 1.04; }
h2 { font-size: var(--t-h2); line-height: 1.1; }
h3 { font-size: var(--t-h3); line-height: 1.2; }
p { text-wrap: pretty; }
.lead { font-size: var(--t-lead); line-height: 1.5; }
.fine { font-size: var(--t-label); line-height: 1.5; color: var(--muted); }
.muted { color: var(--muted); }
:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
::selection { background: color-mix(in oklab, var(--accent) 30%, transparent); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--gut); top: 8px; z-index: 30; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { width: auto; height: var(--btn-h); padding: 0 var(--s-5); clip-path: none; display: inline-flex; align-items: center; background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-btn); font-weight: 500; }
.wrap { width: min(100% - 2 * var(--gut), var(--container)); margin-inline: auto; }
.flag { width: 20px; height: 15px; flex: none; object-fit: cover; box-shadow: 0 0 0 1px var(--line-strong); }
svg { flex: none; }

/* links: a faint hairline at rest, the ink line draws in on hover */
.link, .prose a, .prose-wrap .lead a, .fine a, .faq-item p a, .cmp-stamp a, .provider-rows a, .breadcrumb a {
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--line-strong), var(--line-strong));
  background-size: 0 1px, 100% 1px; background-position: left bottom, left bottom; background-repeat: no-repeat; padding-bottom: 2px;
  transition: background-size var(--m-out) var(--ease);
}
.link { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; font-weight: 500; color: var(--ink); cursor: pointer; background-color: transparent; border: 0; padding-inline: 0; }
@media (hover: hover) and (pointer: fine) {
  .link:hover, .prose a:hover, .prose-wrap .lead a:hover, .fine a:hover, .cmp-stamp a:hover, .provider-rows a:hover, .breadcrumb a:hover { background-size: 100% 1px, 100% 1px; transition-duration: var(--m-in); }
  .link:hover svg { transform: translateX(3px); }
}
.link svg { transition: transform var(--m-out) var(--ease); }

/* ---------------------------------------------------------------- buttons (solid) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: var(--btn-h); padding: 0 var(--s-5);
  border-radius: var(--r-btn); border: 1px solid transparent; font: 500 var(--t-body)/1 var(--font-text); white-space: nowrap; cursor: pointer;
  transition: background-color var(--m-out) var(--ease), color var(--m-out) var(--ease), border-color var(--m-out) var(--ease), transform var(--m-press) var(--ease);
}
.btn--primary { background: var(--action); color: var(--action-ink); }
.btn--primary:hover { background: color-mix(in oklab, var(--action) 86%, var(--ink)); }
.ground-brand .btn--primary:hover { background: color-mix(in oklab, #ffffff 88%, var(--p-accent)); }
.btn--secondary { background: var(--bg); color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { background: color-mix(in oklab, var(--bg) 94%, var(--ink)); border-color: color-mix(in oklab, var(--ink) 35%, transparent); }
.btn--sm { height: var(--btn-h-sm); padding: 0 var(--s-4); font-size: var(--t-small); }
.btn:active { transform: translateY(1px) scale(.985); }
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(1px) scale(.985); } }
.btn--xl { width: 100%; height: clamp(56px, 3vw + 40px, 88px); padding-inline: var(--s-6); justify-content: space-between; font: 500 clamp(18px, .6vw + 16px, 26px)/1 var(--font-display); letter-spacing: var(--display-tracking); }
@media (hover: hover) and (pointer: fine) { .btn--xl:hover { transform: translateY(-2px); } }
.icon-btn { width: var(--btn-h); height: var(--btn-h); border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: var(--bg); font-size: 20px; line-height: 1; cursor: pointer; }
.icon-btn:disabled { opacity: .4; cursor: default; }

/* ---------------------------------------------------------------- header */
#app-header { position: sticky; top: 0; z-index: 10; }
.nav { background: var(--bg); }
.nav-row { display: flex; align-items: center; gap: var(--s-6); height: var(--nav); }
/* the logo: the mark, the name as typed ("Au Final", Instrument Sans SemiBold with no tracking and no case change: the drawing of the outlined wordmark of the brand kit) and, in the header, the descriptor under it */
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; min-height: 44px; }
.brand-mark { display: grid; place-items: center; flex: none; width: 36px; height: 36px; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-text { display: grid; gap: 4px; min-width: 0; }
.brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 600 24px/1 var(--font-display); letter-spacing: 0; }
.brand-tag { overflow: hidden; text-overflow: ellipsis; font: 500 12px/1.1 var(--font-text); color: var(--muted); }
.brand--footer .brand-mark { width: 40px; height: 40px; }
.brand--footer .brand-name { font-size: 28px; }
.nav-links { display: flex; align-items: center; gap: var(--s-2); margin-inline: auto; }
.nav-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-3); font: 500 15px/1 var(--font-text); position: relative; }
.nav-link::after { content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: 10px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform var(--m-out) var(--ease); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); transition-duration: var(--m-in); }
.nav-actions { display: flex; align-items: center; gap: var(--s-3); }
.lang-switch { display: inline-flex; gap: 4px; }
/* each language shows the flag of the country it stands for (France, the USA) beside its two letters */
.lang-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 10px; background: none; border: 1px solid transparent; border-radius: var(--r-btn); font: 500 14px/1 var(--font-text); letter-spacing: .02em; color: var(--muted); cursor: pointer; transition: color var(--m-out) var(--ease), border-color var(--m-out) var(--ease); }
.lang-btn .flag { border-radius: 2px; }
.lang-btn:hover { color: var(--ink); }
.lang-btn.on { color: var(--ink); border-color: var(--line-strong); }
.nav-toggle { display: none; place-items: center; width: 44px; height: 44px; background: none; border: 1px solid var(--line-strong); border-radius: var(--r-btn); cursor: pointer; }
.nav-cta-panel { display: none; }
/* phones: only the other language is offered, so the wordmark keeps its room (and the descriptor goes) */
@media (max-width: 479px) {
  .lang-btn.on { display: none; }
  .lang-btn { border-color: var(--line-strong); }
  .brand-tag { display: none; }
  .brand-name { font-size: 22px; }
  .brand-mark { width: 32px; height: 32px; }
}
@media (max-width: 359px) {
  .nav-row { width: min(100% - 32px, var(--container)); }
  .brand { gap: 6px; }
  .brand-name { font-size: 20px; }
  .brand-mark { width: 28px; height: 28px; }
}
@media (min-width: 960px) and (max-width: 1199px) { .nav-cta { display: none; } }
@media (max-width: 959px) {
  .nav-cta { display: none; }
  .nav-toggle { display: grid; }
  .nav-row { gap: var(--s-3); }
  .nav-actions { margin-left: auto; }
  .nav-links { display: none; position: absolute; top: var(--nav); left: 0; right: 0; margin: 0; flex-direction: column; align-items: stretch; gap: 0; padding: var(--s-3) var(--gut) var(--s-5); background: var(--bg); border-bottom: 1px solid var(--line); }
  .nav.is-open .nav-links { display: flex; }
  .nav-link { min-height: 52px; font-size: 18px; border-bottom: 1px solid var(--line); padding: 0; }
  .nav-link::after { display: none; }
  .nav-cta-panel { display: inline-flex; margin-top: var(--s-5); width: 100%; }
}

/* ---------------------------------------------------------------- forms */
.field { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.field > label, .field-label { font: 500 var(--t-small)/1.3 var(--font-text); }
.field .hint { font-size: var(--t-label); color: var(--muted); }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--s-4) var(--s-5); }
.fields > .field-wide { grid-column: 1 / -1; }
.input-wrap { position: relative; }
.input-wrap input, .select-wrap select, .fund-name, .fund-cur, .fund-share {
  width: 100%; height: var(--field-h); padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink); font: 400 var(--t-body)/1.4 var(--font-text); transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.input-wrap.has-suffix input { padding-right: 76px; }
.input-wrap input { font-size: 18px; font-variant-numeric: tabular-nums; }
.suffix { position: absolute; right: 0; top: 0; height: 100%; min-width: 56px; padding: 0 var(--s-3); display: grid; place-items: center; font: 500 13px/1 var(--font-mono); color: var(--muted); border-left: 1px solid var(--line); pointer-events: none; }
.select-wrap { position: relative; }
.select-wrap select, .fund-cur, .inline-label select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='1.7'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; }
.field :is(input, select):focus-visible, .fund-name:focus-visible, .fund-cur:focus-visible, .fund-share:focus-visible { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px color-mix(in oklab, var(--action) 25%, transparent); }
.field-checkbox { align-content: center; }
.check { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; font-size: var(--t-small); font-weight: 500; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--action); }
.inline-label { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-small); color: var(--muted); }
.inline-label select { height: 44px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font: 500 var(--t-small)/1 var(--font-text); }

/* radio groups: short lists */
.seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--s-2); }
.seg-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 var(--s-3); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-sm); font: 500 var(--t-body)/1.2 var(--font-text); text-align: left; cursor: pointer; transition: background-color var(--m-out) var(--ease), border-color var(--m-out) var(--ease), box-shadow var(--m-out) var(--ease); }
@media (pointer: coarse) { .seg-btn { min-height: 44px; } }
.seg-btn small { margin-left: auto; font: 400 13px/1 var(--font-mono); color: var(--muted); }
.seg-btn:hover { background: color-mix(in oklab, var(--bg) 94%, var(--ink)); }
.seg-btn.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.seg-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.cmp-mode { min-height: 32px; font-size: var(--t-small); }

/* ---------------------------------------------------------------- cards, messages, results of the calculators */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); }
.card + .card, .tool-main > * + * { margin-top: var(--s-5); }
.card-title { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; margin-bottom: var(--s-3); }
.card-intro { color: var(--ink); margin-bottom: var(--s-4); }
.tool-card .results:not(:empty) { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.msg { padding: var(--s-4) 0; }
.msg-warn { color: var(--warn); }
.verdict { display: grid; gap: 2px; padding: var(--s-4) var(--s-5); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg); margin-bottom: var(--s-4); }
.verdict strong { font: 500 var(--t-card)/1.3 var(--font-text); }
.verdict-good { border-color: var(--good); } .verdict-good strong { color: var(--good); }
.verdict-warn { border-color: var(--warn); } .verdict-warn strong { color: var(--warn); }
.verdict-bad { border-color: var(--bad); } .verdict-bad strong { color: var(--bad); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: var(--s-4); margin-bottom: var(--s-4); }
.stat { display: grid; gap: var(--s-1); align-content: start; padding: var(--s-4) var(--s-5); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); container-type: inline-size; }
.stat-label { font-size: var(--t-small); color: var(--muted); }
.stat-value { font: 500 22px/1.15 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* the big figure follows the width of its card, so a long amount such as "181 236 FCFA" stays on one line */
.stat-big .stat-value { font-size: min(var(--t-stat), 12.5cqi); }
.stat-sub { font-size: var(--t-label); color: var(--muted); }
.stat-good .stat-value { color: var(--good); } .stat-warn .stat-value { color: var(--warn); } .stat-bad .stat-value { color: var(--bad); }
.cards-one { grid-template-columns: 1fr; }
.bar-block { margin: var(--s-5) 0; }
.bar-block h3 { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; margin-bottom: var(--s-3); }
.bar { display: flex; height: 14px; background: color-mix(in oklab, var(--ink) 8%, transparent); }
.bar-part { height: 100%; }
.bar-fee, .bar-0 { background: var(--ink); } .bar-fx, .bar-1 { background: var(--accent); } .bar-good, .bar-2 { background: var(--good); } .bar-3 { background: var(--ground-accent); } .bar-4 { background: #8a8a8a; }
.legend { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.legend li { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-small); }
.legend strong { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
.dot { width: 10px; height: 10px; flex: none; }
.table-block { margin: var(--s-5) 0; }
.table-block h3, .table-block summary { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; margin-bottom: var(--s-3); cursor: pointer; }
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
table.data th, table.data td { padding: 10px var(--s-3); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data thead th { font-size: var(--t-label); font-weight: 500; color: var(--muted); border-bottom-color: var(--line-strong); white-space: nowrap; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tr.best td, table.data tr.best th { background: color-mix(in oklab, var(--accent) 8%, transparent); }
.notes { display: grid; gap: var(--s-2); padding-left: var(--s-5); list-style: disc; color: var(--muted); font-size: var(--t-small); margin-top: var(--s-4); }
.result-links { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.sub-title { font: 500 var(--t-card)/1.3 var(--font-text); margin: var(--s-5) 0 var(--s-3); }
.lbl { font-size: var(--t-label); color: var(--muted); }

/* family fund */
.fund-rows { display: grid; gap: var(--s-3); }
.fund-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr) var(--btn-h); gap: var(--s-3); align-items: end; }
.fund-cell { display: grid; gap: var(--s-1); }
@media (max-width: 639px) { .fund-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fund-row .icon-btn { grid-column: 2; justify-self: end; } }

/* rate history */
.spark-wrap { margin: var(--s-4) 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); padding: var(--s-3); }
.spark { width: 100%; height: auto; }
.spark-axis { stroke: var(--line-strong); stroke-width: 1; }
.spark-area { fill: color-mix(in oklab, var(--accent) 10%, transparent); }
.spark-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.spark-dot { fill: var(--accent); } .spark-dot-last { fill: var(--ink); }
.spark-label { font: 400 13px var(--font-mono); fill: var(--muted); }

/* ---------------------------------------------------------------- advertisements (labelled placeholders) */
.ad { border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); margin-top: var(--s-6); background: transparent; }
.ad-label { display: flex; justify-content: space-between; gap: var(--s-3); font: 400 13px/1.4 var(--font-mono); color: var(--muted); margin-bottom: var(--s-2); }
.ad-creative { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: 56px; }
.ad-creative strong { display: block; font-weight: 500; }
.ad-creative small { color: var(--muted); font-size: var(--t-label); }
.ad-art { width: 64px; height: 48px; background: repeating-linear-gradient(135deg, var(--line) 0 6px, transparent 6px 12px); flex: none; }
.ad-rect { min-height: 280px; } .ad-rect .ad-creative { min-height: 200px; flex-direction: column; align-items: flex-start; justify-content: center; }
.ad-fill { min-height: 90px; }

/* ---------------------------------------------------------------- the comparator (its card is styled in the last section of this file) */
.unavailable { margin-top: var(--s-4); font-size: var(--t-small); }
.unavailable summary { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; font-weight: 500; }
.unavailable ul { padding-left: var(--s-5); list-style: disc; color: var(--muted); }
.unavailable summary, .faq-item summary { list-style: none; cursor: pointer; }
.unavailable summary::-webkit-details-marker, .faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after, .unavailable summary::after { content: ""; width: 14px; height: 14px; background: currentColor; transition: transform var(--m-out) var(--ease); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E") center / contain no-repeat; }
details[open] > summary::after { transform: rotate(180deg); }
.wz-form, .tool-main > .tool-host { scroll-margin-top: calc(var(--nav) + var(--s-4)); }
/* provider logos: the provider's own icon in a round frame (assets/providers); the initials stand in if the file is missing */
.plogo { --s: 40px; display: grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line-strong); color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: calc(var(--s) * .34); line-height: 1; letter-spacing: -0.02em; }
.plogo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plogo.is-contain img { object-fit: contain; padding: 14%; box-sizing: border-box; }
.plogo.is-initials { background: var(--surface); }
.plogo--row { --s: 36px; }
.plogo--compact { --s: 30px; }
.plogo--marquee { --s: 32px; }

/* phone summary bar */
.sumbar { position: fixed; top: var(--nav); left: 0; right: 0; z-index: 9; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 0 var(--gut); min-height: 48px; background: var(--bg); border-bottom: 1px solid var(--line-strong); font: 500 var(--t-small)/1.2 var(--font-text); }
.sumbar-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 640px) { .sumbar { display: none; } }

/* ---------------------------------------------------------------- the home page */
.proof { font: 400 13px/1.5 var(--font-mono); color: var(--muted); }
.hero-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 55% at var(--mx) var(--my), color-mix(in oklab, #ffffff 13%, transparent), transparent 70%); }

.marquee { border-block: 1px solid var(--line); padding: var(--s-5) 0; }
.marquee-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-6); }
.marquee-label { font: 400 13px/1.4 var(--font-mono); color: var(--muted); }
.marquee-window { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.marquee-track li { display: flex; align-items: center; gap: var(--s-3); padding-right: var(--s-8); font: 500 19px/1.2 var(--font-display); letter-spacing: -0.01em; white-space: nowrap; }
.marquee-window:hover .marquee-track, .marquee.is-paused .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-pause { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: var(--bg); cursor: pointer; }
.marquee-pause:hover { background: color-mix(in oklab, var(--bg) 92%, var(--ink)); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 719px) { .marquee-wrap { grid-template-columns: minmax(0, 1fr) auto; } .marquee-label { grid-column: 1 / -1; } }

.section { padding-block: var(--s-9) var(--s-8); }
.section > .wrap > h2, .section-head h2 { margin-bottom: var(--s-7); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-7); }
.section-head h2 { margin-bottom: 0; }
@media (max-width: 639px) { .section { padding-block: var(--s-8) var(--s-7); } .section > .wrap > h2, .section-head { margin-bottom: var(--s-6); } }

.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); gap: var(--s-6) var(--s-7); }
.board-head { display: flex; align-items: center; gap: var(--s-3); font: 500 var(--t-card)/1.2 var(--font-text); letter-spacing: -0.01em; padding-bottom: var(--s-3); border-bottom: 1px solid var(--line-strong); }
.rows > li { border-bottom: 1px solid var(--line); }
.route-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-4); min-height: 68px; padding: var(--s-3) 0; transition: background-color var(--m-out) var(--ease); }
.route-row:hover { background: color-mix(in oklab, var(--ink) 3%, transparent); }
.route-dest { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.route-dest > span, .route-amount { display: grid; gap: 1px; min-width: 0; }
.route-dest strong, .route-amount strong { font-weight: 500; }
.route-amount { margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
.route-dest small, .route-amount small { font-size: var(--t-label); color: var(--muted); }
.route-dest strong { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: left bottom; transition: background-size var(--m-out) var(--ease); width: fit-content; }
.route-row:hover .route-dest strong { background-size: 100% 1px; transition-duration: var(--m-in); }

.band { padding-block: var(--s-9); }
.band-head { display: grid; gap: var(--s-4) var(--s-7); margin-bottom: var(--s-7); }
.band-head .lead { max-width: 56ch; }
@media (min-width: 1024px) { .band-head { grid-template-columns: 5fr 6fr; align-items: end; } }
.loss { display: grid; }
.loss-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(0, 4fr) minmax(150px, 1fr); gap: var(--s-5); align-items: center; padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.loss-row:first-child { border-top: 1px solid var(--line); }
.loss-label { display: grid; gap: 2px; }
.loss-label span { font-size: var(--t-small); color: var(--muted); }
.loss-track { height: 14px; background: color-mix(in oklab, var(--ink) 9%, transparent); }
.loss-bar { display: block; height: 100%; width: var(--w); background: #8a8a8a; }
.loss-best .loss-bar { background: var(--accent); } .loss-worst .loss-bar { background: #d4d4d4; } .loss-bank .loss-bar { background: var(--ground-bg); }
.loss-value { display: grid; gap: 2px; text-align: right; font-variant-numeric: tabular-nums; }
.loss-value strong { font: 500 var(--t-card)/1.2 var(--font-display); }
.loss-value span { font: 400 13px/1.2 var(--font-mono); color: var(--muted); }
.band .fine { margin-top: var(--s-5); }
@media (max-width: 719px) { .loss-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-4); } .loss-track { grid-column: 1 / -1; grid-row: 2; } }

.tool-rows { display: grid; }
.tool-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-5); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); min-height: 76px; transition: background-color var(--m-out) var(--ease); }
.tool-rows .tool-row:first-child { border-top: 1px solid var(--line); }
.tool-row:hover { background: color-mix(in oklab, var(--ink) 3%, transparent); }
.tool-row-text { display: grid; gap: 2px; }
.tool-row-text strong { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; }
.tool-row-text span { color: var(--muted); font-size: var(--t-small); max-width: 70ch; }
.tool-row-arrow { transition: transform var(--m-out) var(--ease); }
.tool-row:hover .tool-row-arrow { transform: translateX(3px); }
.tool-group { margin-top: var(--s-8); }
.tool-group h2 { font-size: var(--t-h3); margin-bottom: var(--s-5); }

.how { display: grid; gap: var(--s-7); }
.how .link { margin-top: var(--s-5); }
.steps { display: grid; }
.steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5) 0; border-top: 1px solid var(--line-strong); }
.steps li:last-child { border-bottom: 1px solid var(--line-strong); }
.step-n { font: 500 13px/1.8 var(--font-mono); color: var(--muted); }
.steps strong { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; }
.steps p { margin-top: var(--s-1); max-width: 56ch; }
@media (min-width: 1024px) { .how { grid-template-columns: 4fr 7fr; gap: var(--gutter); } }

.faq-wrap { display: grid; gap: var(--s-6) var(--gutter); }
.faq-wrap > h2 { margin: 0; }
@media (min-width: 1024px) { .faq-wrap { grid-template-columns: 4fr 7fr; } }
/* from 1200 px the two split sections use the hero's column lines, so the page has one pair of lines */
@media (min-width: 1200px) {
  .how, .faq-wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gutter); }
  .how > :first-child, .faq-wrap > :first-child { grid-column: 1 / span 5; }
  .how > :last-child, .faq-wrap > :last-child { grid-column: 7 / span 6; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .how > :last-child, .faq-wrap > :last-child { grid-column: 6 / span 7; }
}
.faq { display: grid; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 64px; padding: var(--s-3) 0; font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; }
.faq-item p { padding: 0 0 var(--s-5); max-width: 66ch; }
.section.close { padding-block: var(--s-9); }
.close .wrap { display: grid; gap: var(--s-5); }
.section.close > .wrap > h2 { margin: 0; max-width: 18ch; }
.close .lead { max-width: 52ch; }
.close .btn--xl { margin-top: var(--s-4); }

/* ---------------------------------------------------------------- inner pages */
.page { padding-block: var(--s-5) var(--s-9); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--t-small); color: var(--muted); margin-bottom: var(--s-6); }
.breadcrumb a { color: var(--ink); }
.page-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-7); max-width: 860px; }
.page-head h1 { font-size: var(--t-h2); line-height: 1.08; }
.page-head .lead { max-width: 62ch; }
.tool-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-5); max-width: none; }
.tool-head > div:first-child { display: grid; gap: var(--s-3); max-width: 860px; }
.tool-head-actions { display: flex; gap: var(--s-3); }
.tool-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-items: start; }
@media (min-width: 1024px) { .tool-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-8); } .tool-side { position: sticky; top: calc(var(--nav) + var(--s-5)); } }
.tool-main > .prose { margin-top: var(--s-8); }
.tool-side { display: grid; gap: var(--s-5); align-content: start; }
.tool-side .ad { margin-top: 0; }
.market-rate { font: 500 var(--t-h3)/1.15 var(--font-display); letter-spacing: -0.02em; margin-bottom: var(--s-2); font-variant-numeric: tabular-nums; }
.market .link { margin-top: var(--s-3); }
.related .rows li { padding: var(--s-1) 0; }
.related .rows .link { background-size: 0 1px, 0 1px; }
.related .rows .link:hover { background-size: 100% 1px, 0 1px; }
.related .link { margin-top: var(--s-2); }
.prose { max-width: 70ch; }
.prose h2 { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.prose p + p { margin-top: var(--s-3); }
.prose ol, .prose ul:not(.rows) { padding-left: var(--s-5); display: grid; gap: var(--s-2); }
.prose ol { list-style: decimal; }
.prose-wrap { max-width: 860px; }
.prose-wrap .prose { margin-top: var(--s-7); }
.about-cta { margin-top: var(--s-7); }
/* the About page and the legal pages */
.doc-updated { margin-top: calc(-1 * var(--s-1)); }
.prose p + .doc-list, .prose .doc-list + p, .prose p + .doc-facts { margin-top: var(--s-3); }
.prose .doc-list { list-style: disc; }
.prose .doc-list li::marker { color: var(--muted); }
.doc-facts { display: grid; margin: 0; border-top: 1px solid var(--line); }
.doc-facts > div { display: grid; gap: 2px var(--s-5); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.doc-facts dt { font: 500 var(--t-small)/1.4 var(--font-text); color: var(--muted); }
.doc-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 720px) { .doc-facts > div { grid-template-columns: 15rem minmax(0, 1fr); align-items: baseline; } }
.prose .seo-table { width: 100%; border-collapse: collapse; margin-top: var(--s-4); font-size: var(--t-small); }
.seo-table th, .seo-table td { padding: var(--s-3) var(--s-4) var(--s-3) 0; text-align: left; vertical-align: top; border-top: 1px solid var(--line); font-weight: 400; }
.seo-table thead th { border-top: 0; padding-top: 0; font-weight: 500; color: var(--muted); }
.seo-table tbody th { font-weight: 500; white-space: nowrap; }
.seo-table td { font-variant-numeric: tabular-nums; }
.seo-table tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
.prose .seo-table + .fine { margin-top: var(--s-3); }
.seo-extra h3 { font-size: var(--t-card); margin: var(--s-7) 0 var(--s-3); }
@media (max-width: 639px) {
  .seo-table th, .seo-table td { padding-right: var(--s-3); }
  .seo-table td:last-child { white-space: nowrap; }
}

/* the page is drawn in two steps: the text first, then the app (js/app.js). While the app has not arrived, a page it will draw keeps the height of a screen,
   so the text below it (the facts of a route page, the footer) does not jump when the app fills the space: that jump counted as a large layout shift. */
@media (scripting: enabled) { main.is-prerendered { min-height: 100vh; min-height: 100svh; } }

/* a country hub page: one line per route, the figures at the right where there is room */
.route-list { display: grid; margin-top: var(--s-4); }
.route-list li { display: grid; gap: 2px var(--s-5); padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.route-list li:last-child { border-bottom: 1px solid var(--line); }
.route-list a { font-weight: 500; }
.route-list span { font-size: var(--t-small); color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 720px) { .route-list li { grid-template-columns: minmax(0, 17em) minmax(0, 1fr); align-items: baseline; } }
.provider-rows { margin-top: var(--s-4); }
.provider-rows li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5); padding: var(--s-3) 0; }
.prov-name { display: grid; gap: 1px; }
.prov-name small { color: var(--muted); font-size: var(--t-label); }
.prov-src { font: 400 13px/1.6 var(--font-mono); color: var(--muted); max-width: 46ch; }

/* ---------------------------------------------------------------- footer */
.footer { margin-top: 0; padding: var(--s-9) 0 var(--s-6); }
.footer-statement { font: var(--display-weight) clamp(26px, 2.6vw + 12px, 44px)/1.12 var(--font-display); letter-spacing: -0.026em; max-width: 24em; text-wrap: balance; margin-bottom: var(--s-8); }
.footer-grid { display: grid; gap: var(--s-6) var(--gutter); padding-bottom: var(--s-6); border-bottom: 1px solid var(--line-strong); }
.footer-brand { display: grid; gap: var(--s-4); max-width: 56ch; justify-items: start; }
.footer-slogan { font: 500 var(--t-card)/1.3 var(--font-display); letter-spacing: -0.012em; }
.footer-docs { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); padding: var(--s-3) 0; border-bottom: 1px solid var(--line-strong); }
.footer-docs a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.footer-docs a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); align-content: start; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-weight: 500; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-routes { display: grid; gap: var(--s-1); padding: var(--s-5) 0 var(--s-4); border-bottom: 1px solid var(--line-strong); }
.footer-routes-title { font: 500 var(--t-label)/1.3 var(--font-text); color: var(--muted); }
.footer-routes ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); }
.footer-routes a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.footer-routes a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 639px) { .footer-routes ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-4); } .footer-routes a { line-height: 1.25; } }
.footer-legal { display: grid; gap: var(--s-2); padding-top: var(--s-5); font-size: var(--t-label); color: var(--muted); }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 6fr 5fr; } .footer-links { justify-content: flex-end; } .footer-legal { grid-template-columns: repeat(3, auto); justify-content: space-between; } }

/* ---------------------------------------------------------------- motion: the hero enters once, nothing else moves on load */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes settle { from { scale: .98; opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; row-gap: var(--s-2); }
  .marquee-copy, .marquee-pause { display: none; }
  .marquee-window { -webkit-mask-image: none; mask-image: none; }
}

/* ---------------------------------------------------------------- phones and tablets */
@media (max-width: 639px) {
  .cmp-mode { min-height: 44px; }
  .tool-head-actions { width: 100%; }
  .card { padding: var(--s-4); }
  .btn--xl { height: 48px; padding-inline: var(--s-4); font-size: 18px; }
  .footer { padding-top: var(--s-8); }
}
/* the smallest phones (320 to 359 px): nothing may sit on anything else, so the pairs stack */
@media (max-width: 359px) {
  .loss-row { grid-template-columns: minmax(0, 1fr); }
  .loss-value { text-align: left; }
  .loss-track { grid-row: auto; }
}

/* ================================================================ the comparator: one white card of fields, tabs and pills.
   A band in the brand green carries the card. In it every offer is a pill: the score ring at the left (it replaces a rank
   number), then the provider, what it costs, when the money arrives and what the recipient gets. From 1200 px the pill is as long as what the
   recipient gets (a fixed scale, see barWidth in compare.js); below that every pill is full width and the length is drawn inside it.
   The shapes follow the radius tokens: soft corners and pills across the site. */
@property --w { syntax: "<percentage>"; inherits: true; initial-value: 100%; }
.wz-hero { position: relative; overflow: clip; padding: var(--s-7) 0 var(--s-9); --mx: 70%; --my: 18%; }
.wz-hero > .wrap { position: relative; }
.wz-hero--page { padding: var(--s-5) 0 var(--s-8); }
.wz-hero--page .breadcrumb { margin-bottom: var(--s-4); }
.wz-head { display: grid; gap: var(--s-4) var(--s-7); margin-bottom: var(--s-7); }
.wz-head h1 { font-size: clamp(38px, 2.4vw + 24px, 62px); line-height: 1.03; letter-spacing: -0.036em; max-width: 14em; }
html[lang="fr"] .wz-head h1 { font-size: clamp(34px, 1.9vw + 23px, 54px); }
.wz-head .lead { max-width: 50ch; }
.wz-head .proof { margin-top: var(--s-3); }
/* the road of the logo, faint, running to the pennant in the empty right corner of the home band (not on small screens) */
.wz-hero:not(.wz-hero--page) > .wrap::before {
  content: ""; position: absolute; top: 0; right: 0; width: min(36vw, 470px); aspect-ratio: 520 / 230; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 230'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0.2' y1='0' x2='0.6' y2='1'%3E%3Cstop offset='0' stop-color='%23F8E08E'/%3E%3Cstop offset='.42' stop-color='%23D4A017'/%3E%3Cstop offset='1' stop-color='%239A6F00'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M10 214 C 120 150, 200 232, 300 152 S 430 122, 470 120' fill='none' stroke='%23fff' stroke-opacity='.4' stroke-width='6' stroke-linecap='round' stroke-dasharray='0.1 15'/%3E%3Cline x1='470' y1='120' x2='470' y2='48' stroke='%23fff' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M473 48 L507 63 L473 78 Z' fill='url(%23g)'/%3E%3C/svg%3E") no-repeat center / contain;
}
@media (max-width: 1199px) { .wz-hero:not(.wz-hero--page) > .wrap::before { display: none; } }
.wz-head--page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); margin-bottom: var(--s-5); }
.wz-head--page h1 { font-size: clamp(30px, 1.5vw + 23px, 44px); line-height: 1.06; }
html[lang="fr"] .wz-head--page h1 { font-size: clamp(28px, 1.3vw + 22px, 40px); }
.wz-head--page .lead { max-width: 62ch; font-size: 18px; }
.wz-hero[data-enter] .wz-head { animation: rise 520ms var(--ease-enter) both; }
.wz-hero[data-enter] .wz-card { animation: settle 900ms var(--ease-enter) both; }

.wz-card { position: relative; background: var(--bg); color: var(--ink); border-radius: 28px; padding: clamp(18px, 3vw, 36px); box-shadow: 0 34px 70px -40px rgba(10, 10, 10, .5); }

/* the form: the amount, then the two countries with the swap button between them */
.wz-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4) var(--s-5); align-items: start; }
@media (min-width: 1200px) { .wz-form { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); } }
.wz-form .field { gap: var(--s-2); }
.wz-form .field > label, .wz-form .field-label-row { display: flex; align-items: center; min-height: 24px; }
.wz-form .field > label, .wz-form .field-label-row label { font: 500 15px/1.3 var(--font-text); }
.wz-form .cmp-mode { min-height: 24px; font-size: 14px; }
.wz-form .input-wrap input { height: 68px; padding: 0 22px; border-radius: var(--r-md); border: 1px solid color-mix(in oklab, var(--ink) 40%, transparent); background: var(--bg); font: 600 32px/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.wz-form .input-wrap.has-suffix input { padding-right: 84px; }
.wz-form .suffix { right: 22px; min-width: 0; padding: 0; border: 0; font: 600 19px/1 var(--font-display); color: var(--muted); }
/* what was typed, as the site read it ("Read as 100,000 XOF"): it hangs under the amount field, out of the flow, so that it never moves the form; the form leaves it room */
.wz-read { position: absolute; left: 4px; right: 4px; top: calc(100% + 3px); margin: 0; overflow: hidden; font: 400 13px/16px var(--font-text); color: var(--muted); text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
@media (max-width: 1199px) { .wz-form .field-money { margin-bottom: 8px; } }
.wz-pair { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s-3); align-items: end; }
.wz-swap { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 8px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bg); color: var(--ink); cursor: pointer; transition: background-color var(--m-out) var(--ease), border-color var(--m-out) var(--ease), transform var(--m-press) var(--ease); }
.wz-swap:active { transform: scale(.94); }
.wz-swap.is-spin svg { animation: swap-spin 460ms var(--ease-enter); }
@keyframes swap-spin { from { transform: rotate(0); } to { transform: rotate(180deg); } }
@media (hover: hover) and (pointer: fine) { .wz-swap:hover { background: color-mix(in oklab, var(--bg) 92%, var(--ink)); border-color: color-mix(in oklab, var(--ink) 40%, transparent); } }
.wz-select { position: relative; height: 64px; border: 1px solid color-mix(in oklab, var(--ink) 40%, transparent); border-radius: var(--r-md); background: var(--bg); transition: border-color var(--m-out) var(--ease), box-shadow var(--m-out) var(--ease); }
.wz-select:focus-within { border-color: var(--action); box-shadow: 0 0 0 3px color-mix(in oklab, var(--action) 25%, transparent); }
.wz-select select { appearance: none; -webkit-appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; padding: 0 48px 0 64px; border: 0; border-radius: inherit; background: transparent; color: var(--ink); font: 600 18px/1 var(--font-text); letter-spacing: -0.01em; cursor: pointer; text-overflow: ellipsis; }
.wz-select select:focus-visible { border-color: transparent; box-shadow: none; }
.wz-flagbox { position: absolute; left: 14px; top: 50%; width: 34px; height: 34px; margin-top: -17px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px rgba(10, 10, 10, .14); pointer-events: none; }
.wz-flagbox .wz-flag { width: 100%; height: 100%; object-fit: cover; box-shadow: none; }
.wz-flagbox.is-missing .wz-flag { display: none; }
.wz-flagbox.is-missing::after { content: attr(data-code); font: 600 12px/1 var(--font-mono); color: var(--muted); }
.wz-select .wz-chev { position: absolute; right: 16px; top: 50%; margin-top: -10px; color: var(--muted); pointer-events: none; }
/* in the other tools the country list is an ordinary field: same height as the fields around it */
.fields .wz-select { height: var(--field-h); border-radius: var(--r-sm); }
.fields .wz-select select { padding: 0 40px 0 50px; font: 500 16px/1 var(--font-text); }
.fields .wz-flagbox { left: 10px; width: 28px; height: 28px; margin-top: -14px; }
.fields .wz-select .wz-chev { right: 12px; }
@media (hover: hover) and (pointer: fine) { .wz-select:hover { border-color: color-mix(in oklab, var(--ink) 65%, transparent); } }
@media (max-width: 639px) {
  .wz-form .cmp-mode { min-height: 44px; }
  .wz-form .input-wrap input { height: 64px; font-size: 30px; }
  /* the two countries stack; the swap button sits on the line between them */
  .wz-pair { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .wz-swap { position: absolute; right: 60px; top: calc(50% - 22px); z-index: 2; width: 44px; height: 44px; margin: 0; box-shadow: 0 6px 14px -8px rgba(10, 10, 10, .5); }
  .wz-swap svg { rotate: 90deg; }
  .wz-select { height: 60px; }
  .wz-select select { padding: 0 44px 0 60px; font-size: 17px; }
  .wz-flagbox { left: 12px; width: 32px; height: 32px; margin-top: -16px; }
}

.wz-out { display: block; margin-top: 0; --best-fill: linear-gradient(115deg, color-mix(in oklab, var(--accent) 72%, #000) 0%, var(--accent) 46%, color-mix(in oklab, var(--accent) 86%, #6fdb9b) 100%); }
/* the payout pills and, where there is room, the market-rate strip (js/market.js) at their right */
.wz-tabrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-5); padding-top: 6px; }
.wz-tabs { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: var(--s-3); }
.wz-tab { position: relative; display: inline-flex; align-items: center; gap: var(--s-3); min-height: 64px; padding: 8px 26px 8px 20px; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; transition: background-color var(--m-out) var(--ease), color var(--m-out) var(--ease); }
@media (hover: hover) and (pointer: fine) { .wz-tab:not(.on):hover { background: color-mix(in oklab, var(--surface) 88%, var(--ink)); } }
/* the selected payout pill wears the same green as the best offer (--best-fill, set on .wz-out) */
.wz-tab.on { background: var(--best-fill); color: var(--accent-ink); box-shadow: 0 14px 24px -16px color-mix(in oklab, var(--accent) 80%, transparent); }
.wz-tab.on .wz-tab-amount { opacity: .92; }
.wz-tab-text { display: grid; gap: 2px; }
.wz-tab-name { font: 500 17px/1.1 var(--font-text); }
.wz-tab-amount { font: 400 14px/1.1 var(--font-text); font-variant-numeric: tabular-nums; opacity: .8; white-space: nowrap; }
.wz-tab-flag { position: absolute; top: -8px; right: 14px; padding: 2px 9px; border-radius: 999px; background: linear-gradient(135deg, #ffe9a0, #ffc83d 60%, #ffb300); color: #4a2f00; font: 700 11px/1.45 var(--font-text); letter-spacing: .03em; text-transform: uppercase; box-shadow: 0 4px 10px -5px rgba(120, 80, 0, .7); }
.wz-panel:focus:not(:focus-visible) { outline: none; }
.wz-ops { margin-top: var(--s-4); font-size: 14px; color: var(--muted); }

/* the line above the offers: sort and share (comparator page), and the label of the big amounts */
.wz-bar { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-4) 0 var(--s-3); }
.wz-bar .wz-label { margin: 0 0 0 auto; }
.wz-sort { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 14px; color: var(--muted); }
.wz-sort-box { position: relative; display: inline-flex; align-items: center; }
.wz-sort select { appearance: none; -webkit-appearance: none; height: 44px; padding: 0 36px 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); color: var(--ink); font: 500 14px/1 var(--font-text); cursor: pointer; }
.wz-sort-box svg { position: absolute; right: 13px; pointer-events: none; }
.wz-label { margin: var(--s-4) 0 var(--s-2); text-align: right; font: 400 15px/1.3 var(--font-text); color: var(--muted); }

/* one row = the score ring, then the pill (and its details when open) */
.wz-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.wz-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--s-3); align-items: center; transition: --w 700ms var(--ease-enter); }
.wz-row.is-new { animation: row-in 520ms var(--ease-enter) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes row-in { from { opacity: 0; transform: translateY(14px); } }
.wz-row.is-best { margin-top: 14px; }
/* The ad of the results sits between two lists of offers (it is not an item of the ranked list) and the three keep the gap of the rows. Its slot has one fixed height,
   the label plus room for a 320 x 100 or 728 x 90 banner, so that whatever creative arrives cannot move the offers: what does not fit is clipped. */
.wz-feed { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.wz-feed .ad-infeed { box-sizing: border-box; display: flex; flex-direction: column; height: 152px; margin-top: 0; overflow: hidden; }
.wz-feed .ad-infeed .ad-label { flex: none; height: 18px; margin-bottom: var(--s-2); line-height: 18px; white-space: nowrap; }
.wz-feed .ad-infeed .ad-label span + span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wz-feed .ad-infeed .ad-creative, .wz-feed .ad-infeed .ad-fill { flex: 1 1 0; min-height: 0; overflow: hidden; }
@media (max-width: 479px) { .wz-feed .ad-infeed .ad-label span + span { display: none; } }

/* the search animation (js/ui.js, searchPanel): for a couple of seconds the offers give way to this panel. --ms is the length of the search, --n the number of chips, --i the place of a chip. */
.wz-loading { display: grid; justify-items: center; align-content: center; gap: var(--s-3); margin-top: var(--s-5); padding: var(--s-7) var(--s-5); border-radius: var(--r-lg); background: var(--surface); text-align: center; animation: load-in 260ms var(--ease-enter) both; }
@keyframes load-in { from { opacity: 0; transform: translateY(8px); } }
.wz-loading-mark { display: grid; gap: 6px; width: 56px; margin-bottom: var(--s-2); }
.wz-loading-mark i { display: block; height: 9px; border-radius: 5px; background: var(--best-fill, var(--accent)); transform-origin: left center; animation: load-rank 1.1s ease-in-out infinite; }
.wz-loading-mark i:nth-child(2) { animation-delay: 140ms; }
.wz-loading-mark i:nth-child(3) { animation-delay: 280ms; }
@keyframes load-rank { 0%, 100% { transform: scaleX(.38); } 40% { transform: scaleX(1); } 70% { transform: scaleX(.64); } }
.wz-loading-title { max-width: 34ch; margin: 0; font: 600 clamp(19px, 1vw + 13px, 24px)/1.25 var(--font-display); letter-spacing: -0.02em; }
.wz-loading-step { min-height: 1.5em; margin: 0; font: 400 16px/1.5 var(--font-text); color: var(--muted); }
.wz-loading-step.is-in { animation: step-in 260ms var(--ease-enter) both; }
@keyframes step-in { from { opacity: 0; transform: translateY(6px); } }
.wz-loading-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); max-width: 560px; margin: var(--s-3) 0 var(--s-2); padding: 0; list-style: none; }
.wz-loading-logos li { animation: logo-on 320ms var(--ease-enter) calc(var(--ms) * (.06 + .74 * var(--i) / var(--n))) both; }
.wz-loading-logo { --s: 48px; }
.wz-loading-more { display: grid; place-items: center; height: 48px; padding: 0 14px; border-radius: 999px; background: var(--bg); box-shadow: 0 0 0 1px var(--line-strong); font: 500 14px/1 var(--font-text); color: var(--muted); }
@keyframes logo-on { from { opacity: .22; filter: grayscale(1); transform: scale(.84); } 60% { transform: scale(1.1); } to { opacity: 1; filter: none; transform: none; } }
.wz-loading-bar { width: min(100%, 320px); height: 6px; margin-top: var(--s-2); overflow: hidden; border-radius: 999px; background: color-mix(in oklab, var(--ink) 10%, transparent); }
.wz-loading-bar i { display: block; height: 100%; border-radius: inherit; background: var(--best-fill, var(--accent)); transform-origin: left center; animation: load-bar var(--ms) cubic-bezier(.3, .1, .25, 1) both; }
@keyframes load-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .wz-loading, .wz-loading * { animation: none !important; } }

.wz-score { position: relative; display: grid; place-items: center; width: 52px; height: 52px; --tone: #15803d; color: var(--ink); cursor: help; }
.wz-score[data-tone="a"] { --tone: #15803d; }
.wz-score[data-tone="b"] { --tone: #4d8f1b; }
.wz-score[data-tone="c"] { --tone: #7c8c00; }
.wz-score[data-tone="d"] { --tone: #b7791f; }
.wz-score[data-tone="e"] { --tone: #c2570c; }
.wz-score[data-tone="f"] { --tone: #b42318; }
.wz-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.wz-ring-track { fill: var(--bg); stroke: color-mix(in oklab, var(--tone) 16%, transparent); stroke-width: 4; }
.wz-ring-arc { fill: none; stroke: var(--tone); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 850ms var(--ease-enter); }
.wz-score-num { position: relative; font: 700 15px/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wz-row.is-best .wz-score { filter: drop-shadow(0 5px 10px color-mix(in oklab, var(--tone) 38%, transparent)); }

/* the pill: logo, name and fees, arrival, amount, details button. Direct children are placed by area so that the phone can rearrange them. */
.wz-pill { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(140px, 210px) auto 44px; grid-template-areas: "logo name arrive amt tog" "logo fees arrive sub tog"; align-items: center; column-gap: var(--s-4); row-gap: 2px; width: 100%; max-width: 100%; min-height: 84px; padding: 12px 14px; border-radius: 999px; background: var(--surface); color: var(--ink); transition: filter var(--m-out) var(--ease), transform var(--m-out) var(--ease), box-shadow var(--m-out) var(--ease); }
@media (min-width: 1280px) { .wz-pill { width: var(--w, 100%); } }
@media (hover: hover) and (pointer: fine) { .wz-pill:hover { filter: brightness(.97); transform: translateY(-1px); } .wz-row.is-best .wz-pill:hover { filter: brightness(1.06); } }
.wz-logo { grid-area: logo; --s: 56px; }
.wz-name { grid-area: name; align-self: end; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font: 500 20px/1.15 var(--font-text); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.wz-link { color: inherit; }
.wz-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.wz-link:focus-visible { outline: none; }
.wz-link:focus-visible::after { outline: 2px solid var(--action); outline-offset: 3px; }
.wz-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 7px; border-radius: 999px; background: color-mix(in oklab, var(--ink) 9%, transparent); font: 500 12px/1.5 var(--font-text); letter-spacing: 0; white-space: nowrap; }
.wz-fees { grid-area: fees; align-self: start; font: 500 14px/1.3 var(--font-text); color: #b3261e; }
.wz-arrive { grid-area: arrive; display: inline-flex; align-items: center; gap: 7px; font: 500 14px/1.3 var(--font-text); color: var(--muted); }
.wz-arrive svg { width: 16px; height: 16px; }
.wz-amt { grid-area: amt; align-self: end; justify-self: end; font: 600 24px/1.1 var(--font-display); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.wz-out.is-compact .wz-amt { grid-row: 1 / -1; align-self: center; }
.wz-sub { grid-area: sub; align-self: start; justify-self: end; font: 400 13px/1.3 var(--font-text); color: var(--muted); white-space: nowrap; }
.wz-num { white-space: nowrap; }
.wz-approx { margin-right: 6px; font-weight: 400; opacity: .6; }
.wz-out-arrow { grid-area: tog; justify-self: center; opacity: .55; }

/* the best offer: a green pill that glows, a gold badge on its edge, a sheen that sweeps twice, confetti when it first appears */
.wz-row.is-best .wz-pill { padding-top: 18px; padding-bottom: 10px; background: var(--best-fill); color: var(--accent-ink); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent), 0 22px 40px -22px color-mix(in oklab, var(--accent) 75%, transparent); }
.wz-row.is-best .wz-fees { color: color-mix(in oklab, var(--accent-ink) 94%, transparent); }
.wz-row.is-best .wz-arrive, .wz-row.is-best .wz-sub { color: color-mix(in oklab, var(--accent-ink) 92%, transparent); }
.wz-row.is-best .wz-amt { font-size: clamp(28px, 1.6vw + 14px, 36px); }
.wz-row.is-best .wz-logo { box-shadow: none; }
.wz-row.is-best .plogo.is-initials { background: #fff; color: var(--accent); }
.wz-best { position: absolute; z-index: 3; top: -17px; left: 86px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px 7px 11px; overflow: hidden; border-radius: 999px; background: linear-gradient(135deg, #fff1b8 0%, #ffd34d 48%, #ffb800 100%); color: #4a2f00; font: 700 14px/1 var(--font-text); letter-spacing: .01em; white-space: nowrap; box-shadow: 0 10px 18px -8px rgba(122, 80, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .6); pointer-events: none; animation: badge-pop 620ms var(--ease-enter) 160ms both; }
.wz-best svg { width: 16px; height: 16px; fill: currentColor; }
.wz-best::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .8) 50%, transparent 70%); transform: translateX(-130%); animation: badge-shine 1.5s var(--ease) 800ms 2; }
@keyframes badge-pop { 0% { transform: scale(.5) rotate(-8deg); opacity: 0; } 55% { transform: scale(1.1) rotate(2deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes badge-shine { to { transform: translateX(130%); } }
.wz-sheen { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.wz-sheen::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 28%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent); opacity: 0; animation: sheen 1.5s var(--ease) 600ms 2; }
@keyframes sheen { 0% { left: -40%; opacity: 0; } 18% { opacity: 1; } 100% { left: 125%; opacity: 0; } }
@keyframes sheen-hover { 0% { left: -40%; opacity: 0; } 18% { opacity: 1; } 100% { left: 125%; opacity: 0; } }
@media (hover: hover) and (pointer: fine) { .wz-row.is-best .wz-pill:hover .wz-sheen::before { animation: sheen-hover 900ms var(--ease) 1; } }
/* the celebration (js/ui.js, confetti): a flash, a shock ring and a glowing outline, twinkling stars, then the pieces. It plays after every search. */
.confetti { position: absolute; inset: 0; z-index: 5; pointer-events: none; perspective: 900px; }
.confetti > * { position: absolute; display: block; will-change: transform, opacity; }
.confetti-flash { width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 251, 220, .86) 0%, rgba(255, 216, 92, .6) 26%, rgba(255, 196, 40, 0) 66%); }
.confetti-flash--small { width: 300px; height: 300px; }
.confetti-ring { width: 96px; height: 96px; border-radius: 50%; border: 4px solid #ffd34d; box-shadow: 0 0 26px 4px rgba(255, 200, 64, .75); }
.confetti-glow { inset: -5px; border-radius: 999px; box-shadow: 0 0 0 4px rgba(255, 214, 84, .85), 0 0 58px 12px rgba(255, 200, 64, .75); }
.confetti-star { line-height: 0; filter: drop-shadow(0 0 7px rgba(255, 200, 64, .95)); }

/* the details button and what it opens */
.wz-toggle { grid-area: tog; position: relative; z-index: 2; display: grid; place-items: center; justify-self: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in oklab, currentColor 9%, transparent); color: inherit; cursor: pointer; transition: background-color var(--m-out) var(--ease); }
.wz-toggle::before { content: ""; position: absolute; inset: -2px; }
.wz-toggle svg { transition: transform var(--m-out) var(--ease); }
.wz-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.wz-toggle:focus-visible { outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .wz-toggle:hover { background: color-mix(in oklab, currentColor 16%, transparent); } }
.wz-details { grid-column: 2; display: grid; gap: var(--s-3); margin-top: var(--s-2); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
.wz-facts { display: grid; grid-template-columns: minmax(110px, 170px) minmax(0, 1fr); gap: var(--s-2) var(--s-5); font-size: 14px; }
.wz-facts dt { color: var(--muted); }
.wz-facts dd { margin: 0; }
.wz-details .fine { max-width: 62ch; }
.wz-go { justify-self: start; }

.wz-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s-6); margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.wz-more, .wz-detail { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font: 500 16px/1 var(--font-text); color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; cursor: pointer; }
/* Share (under the offers): one small outlined button; on a computer it opens a row of plain links on a line of its own (.wz-sharebox takes no box, so that the row can span the actions) */
.wz-sharebox { display: contents; }
.wz-share, .wz-sharelink { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: var(--bg); font: 500 var(--t-small)/1 var(--font-text); color: var(--ink); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--m-out) var(--ease), border-color var(--m-out) var(--ease), transform var(--m-press) var(--ease); }
.wz-share:hover, .wz-sharelink:hover { background: color-mix(in oklab, var(--bg) 94%, var(--ink)); border-color: color-mix(in oklab, var(--ink) 35%, transparent); }
.wz-share:active, .wz-sharelink:active { transform: translateY(1px) scale(.985); }
.wz-share svg { flex: none; }
.wz-sharemenu { flex: 0 0 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); padding: var(--s-2) 0 var(--s-3); }
.wz-sharemenu[hidden] { display: none; }
/* An offer's details: "Go to {provider}" first, then the secondary buttons (WhatsApp, copy, share), which may wrap onto the next line on a narrow phone */
.wz-offer-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.wz-offer-acts .btn { max-width: 100%; height: auto; min-height: var(--btn-h); padding-block: 10px; white-space: normal; text-align: center; line-height: 1.25; }
.wz-sbtn { font-size: var(--t-small); }
/* "Report a wrong price": a mail link and, beside it, the address as text for visitors with no mail program. Under the offers it is one more item of the line that holds the estimate note. */
.wz-report { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-3); margin: 0; }
.wz-foot .wz-report { display: inline-flex; justify-content: center; }
.wz-details .wz-report { font: 400 var(--t-small)/1.5 var(--font-text); color: var(--muted); }
.wz-details .wz-report a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.wz-report-addr { font-family: var(--font-mono); overflow-wrap: anywhere; }
.wz-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px var(--s-5); margin-top: var(--s-2); font: 400 13px/1.5 var(--font-mono); color: var(--muted); text-align: center; }
.wz-foot a { text-decoration: underline; text-underline-offset: 3px; }
.wz-reverse { max-width: 60ch; margin: var(--s-4) auto 0; text-align: center; }
.wz-basis { max-width: 60ch; margin: var(--s-4) auto 0; text-align: center; }
.wz-reverse + .wz-basis { margin-top: var(--s-1); }
.wz-bank { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px var(--s-3); margin-top: var(--s-4); line-height: 1.4; }
.wz-bank:empty { display: none; }
.wz-bank-big { font: 600 20px/1.2 var(--font-display); color: var(--good); font-variant-numeric: tabular-nums; }
.wz-bank-label, .wz-bank-sub { color: var(--muted); }
.wz-bank-label[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }

/* below 1280 px every pill is full width and its length is drawn inside it, as a meter */
@media (max-width: 1279px) {
  .wz-pill { --bar: var(--surface); --track: color-mix(in oklab, var(--surface) 38%, var(--bg)); background: linear-gradient(to right, var(--bar) var(--w), var(--track) var(--w)); }
}
@media (max-width: 999px) {
  .wz-row { grid-template-columns: 48px minmax(0, 1fr); }
  .wz-score { width: 46px; height: 46px; }
  .wz-score-num { font-size: 14px; }
  .wz-pill { grid-template-columns: 52px minmax(0, 1fr) auto 44px; grid-template-areas: "logo name amt tog" "logo fees amt tog" "logo arrive sub tog"; min-height: 92px; border-radius: 46px; }
  .wz-logo { --s: 52px; }
  .wz-amt { font-size: 22px; }
  .wz-best { left: 74px; }
}
@media (max-width: 639px) {
  .wz-card { margin-inline: calc(var(--s-3) - var(--gut)); padding: 16px 14px 18px; border-radius: 24px; }
  .wz-tabs { display: grid; flex: 1 1 100%; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 6px; }
  .wz-tab { flex-direction: column; justify-content: center; gap: 4px; padding: 10px 6px; min-height: 72px; border-radius: 24px; text-align: center; }
  .wz-tab svg { width: 20px; height: 20px; }
  .wz-tab-text { justify-items: center; }
  .wz-tab-name { font-size: 14px; }
  .wz-tab-amount { font-size: 13px; }
  .wz-tab-flag { right: 50%; transform: translateX(50%); top: -9px; }
  .wz-bar { flex-wrap: wrap; }
  .wz-loading { align-content: start; padding: var(--s-6) var(--s-4); }
  .wz-loading-logos { gap: var(--s-2); }
  .wz-loading-logo { --s: 40px; }
  .wz-loading-more { height: 40px; }
  .wz-bar .wz-label { order: 3; flex-basis: 100%; margin: 0; text-align: right; }
  /* the ring at the left, then a pill of four lines (name, amount, fees, arrival) with the details button at its right: three things cannot share one line at 320 px */
  .wz-row { grid-template-columns: 38px minmax(0, 1fr); column-gap: 6px; }
  .wz-score { width: 38px; height: 38px; }
  .wz-score-num { font-size: 12px; }
  .wz-pill { grid-template-columns: 40px minmax(0, 1fr) 44px; grid-template-areas: "logo name tog" "logo amt tog" "logo fees tog" "logo arrive tog"; column-gap: 8px; row-gap: 1px; min-height: 0; padding: 12px 4px 12px 8px; border-radius: 26px; }
  .wz-logo { --s: 40px; align-self: center; }
  .wz-name { font-size: 16px; }
  .wz-amt, .wz-out.is-compact .wz-amt { grid-area: amt; align-self: center; justify-self: start; text-align: left; white-space: normal; font-size: clamp(17px, 5.4vw, 21px); }
  .wz-row.is-best .wz-amt { font-size: clamp(20px, 6.2vw, 25px); }
  .wz-fees, .wz-arrive { font-size: 13px; }
  .wz-arrive svg { width: 14px; height: 14px; }
  .wz-sub { display: none; }
  .wz-best { left: 54px; top: -13px; padding: 5px 11px 5px 8px; font-size: 12px; }
  .wz-row.is-best .wz-pill { padding-top: 20px; }
  .wz-head .lead, .wz-head--page .lead, .wz-head .proof { display: none; }
  .wz-hero { padding-top: var(--s-5); }
  .wz-head { margin-bottom: var(--s-5); }
  .wz-hero--page { padding-top: var(--s-4); }
  .wz-details { grid-column: 1 / -1; padding: var(--s-4); }
  .wz-facts { grid-template-columns: 1fr; gap: 0; }
  .wz-facts dd { margin-bottom: var(--s-2); }
  .wz-go { justify-self: stretch; }
  .wz-uncovered { padding: var(--s-6) var(--s-2); }
}
@media (max-width: 359px) {
  .wz-row { grid-template-columns: 34px minmax(0, 1fr); column-gap: 4px; }
  .wz-score { width: 34px; height: 34px; }
  .wz-score-num { font-size: 11px; }
  .wz-pill { grid-template-columns: 36px minmax(0, 1fr) 44px; column-gap: 6px; padding-left: 6px; }
  .wz-logo { --s: 36px; }
  .wz-name { font-size: 15px; }
}
@media (max-width: 479px) { .wz-tab-amount { display: none; } .wz-tab-name { font-size: 15px; } }

/* a route we do not compare yet */
.wz-uncovered { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-8) var(--s-5); text-align: center; }
.wz-uncovered-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface); }
.wz-uncovered-title { max-width: 26ch; font: 500 clamp(22px, 1vw + 18px, 30px)/1.2 var(--font-display); letter-spacing: -0.02em; }
.wz-uncovered-sub { max-width: 46ch; color: var(--muted); }
.wz-uncovered-actions { margin-top: var(--s-2); }

/* under the card on the comparator page: the market rate beside the ad, then the explanations */
.wz-under { padding-block: var(--s-7) 0; }
.wz-under-grid { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 900px) { .wz-under-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.wz-under-grid .ad { margin-top: 0; }
.wz-under-grid .ad-banner { grid-column: 1 / -1; }
.wz-market { min-width: 0; }
.wz-after { display: grid; justify-items: start; gap: var(--s-7); }
.wz-after .ad, .wz-after .card { width: min(100%, 70ch); margin: 0; }