@font-face{font-family:Bricolage;src:url(/rates/assets/bricolage-latin.woff2) format("woff2");
  font-weight:200 800;font-display:swap}
@font-face{font-family:InterV;src:url(/rates/assets/inter-latin.woff2) format("woff2");
  font-weight:100 900;font-display:swap}
:root{
  --ink:#0b140f;--text:#63746b;--muted:#8d998f;--line:#e2e9e6;
  --green:#12b76a;--green-l:#32d583;--green-d:#04622d;--green-t:#077441;
  --bg:#fcfdfc;--sec:#f2f7f5;--acc:#ebfaf2;
  --red:#d64545;--amber:#b7791f;
  --r:20px;--maxw:1200px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--text);font-family:InterV,-apple-system,
  Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;letter-spacing:-.005em;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:Bricolage,Georgia,serif;color:var(--ink);letter-spacing:-.034em;
  margin:0;font-weight:600;line-height:1.05}
h1{font-size:clamp(40px,5.6vw,68px);line-height:1.02}
/* THE HERO KEEPS A SMALLER h1 than the site scale above. The hero here is a two
   column grid - copy on the left, live ticker on the right - so the headline gets
   about 600px, not the full width the persona heroes give it. At 68px it ran to
   five lines against the ticker. */
.hero h1{font-size:clamp(36px,3.2vw,46px)}
h2{font-size:clamp(30px,3.8vw,48px);line-height:1.06}
h3{font-size:20px;line-height:1.25;letter-spacing:-.02em}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
/* THE DOWNLOAD CLUSTER, the same rules /for-travellers, /for-digital-nomads and
   /for-freelancers carry, verbatim, so the four surfaces cannot drift. The badges are
   the official store artwork and need no plate - they bring their own black ground.
   The QR scales up on hover and hides below 700px, where nobody is scanning their own
   screen. data-store is what lets GA4 tell iOS from Android; a plain text button
   reports one undifferentiated click. */
.dlwrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dlbadge{display:inline-block;transition:transform .2s ease;background:none;padding:0;height:auto}
.dlbadge:hover{transform:scale(1.03)}
.dlbadge img{height:52px;width:auto;display:block}
.dlqr{height:52px;width:52px;cursor:pointer;transition:transform .3s ease;transform-origin:bottom center}
.dlqr:hover{transform:scale(3.3);position:relative;z-index:59;
  filter:drop-shadow(0 20px 45px rgba(0,0,0,.45))}
@media(max-width:700px){.dlqr{display:none}}
.fn{color:var(--green-t);font-weight:700}
/* PHOSPHOR ICONS ARE FILLED, NOT STROKED, and that is the whole reason this block
   exists. Every icon in the page body is a Phosphor glyph at 0 0 256 256 now, and a
   Phosphor glyph is a filled outline - the stroke rules that drew the old 24-unit
   line icons render nothing at all if they are left applying to one.

   EACH RULE BELOW IS THE .ph TWIN of an icon rule above it, one class more specific,
   so it wins without those rules being rewritten. The colour is carried across from
   stroke to fill rather than reset to currentColor, so nothing changes hue.

   THE ILLUSTRATIONS ARE DELIBERATELY NOT IN HERE. The chart line (.plot .ln), the
   grid, the crosshair and the how-it-works scenes (.sc .dash, .sc .tick and the
   rest) are drawn WITH strokes and are not icons - they target inner shapes by
   class, never an <svg>, so none of them match and none of them move. */
/* A SIZE ON THE BASE RULE, not just a colour. The search icon in the currency
   dropdown measured 0x0: an inline <svg> with a viewBox and no width attribute
   takes its size entirely from CSS, and the only rule that named it was written
   for a selector it does not actually match. 15px is the common icon size on
   these pages; every rule below overrides it where the size differs. */
svg.ph{width:15px;height:15px;flex:none;fill:currentColor;stroke:none}
.lnk svg.ph{width:15px;height:15px;fill:currentColor;stroke:none}
.pick>button svg.cv.ph{width:12px;height:12px;fill:var(--muted);stroke:none;transition:transform .2s}
.menu .srch svg.ph{width:15px;height:15px;fill:var(--muted);stroke:none;flex:none}
.swap svg.ph{width:15px;height:15px;fill:#fff;stroke:none}
.card .ic svg.ph{width:20px;height:20px;fill:var(--green-t);stroke:none}
.pg svg.ph{width:15px;height:15px;fill:currentColor;stroke:none}
.lab2 svg.ph{width:15px;height:15px;fill:currentColor;stroke:none}
.cta2-i svg.ph{width:64px;height:64px;fill:var(--green-t);stroke:none}
.farr.ph{width:19px;height:19px;fill:var(--muted);stroke:none;flex:none;transition:transform .42s cubic-bezier(.2,.7,.3,1)}
.hubc .ex svg.ph{width:15px;height:15px;flex:none;fill:currentColor;stroke:none}
/* CHIPS AND HEROPOINTS, not pills (item 5). The bundle put three rgba-white plates in
   the hero's left column. This is the compare pages' component instead, value for
   value: a centred baseline row under the hero grid, 13.5px at .72, a Phosphor check at
   14px in #6ce9a6, and a full-bleed hairline above it drawn with a 100vw ::before rather
   than a border, so the line runs edge to edge while the text stays inside the wrap.
   The chips lose their plate entirely - no background, no border, no radius - which is
   what makes them read as points rather than tags. */
.hero .heropoints{position:relative;display:flex;justify-content:center;
  align-items:baseline;gap:26px;flex-wrap:wrap;margin:28px auto 0;padding:20px 24px 0;
  font-size:13.5px;color:rgba(255,255,255,.72)}
.hero .heropoints::before{content:"";position:absolute;top:0;left:50%;
  transform:translateX(-50%);width:100vw;height:1px;background:rgba(255,255,255,.14)}
.hero .heropoints .chip{display:inline-flex;align-items:center;gap:7px;padding:0;
  border:0;border-radius:0;background:none;color:inherit;font-size:inherit;
  font-weight:450}
.hero .heropoints svg.ph{width:14px;height:14px;flex:none;color:#6ce9a6;
  fill:currentColor}
@media(max-width:760px){
  .hero .heropoints{gap:8px 20px;padding:16px 24px 0;font-size:12.5px;margin-top:22px}
}
/* ONE LINE PER SECTION HEADING FROM 1024px UP (item 7), by the same mechanism .usd
   uses for its own title: nowrap plus a reduced cap, scoped to a breakpoint so that
   below it every heading is free to wrap rather than running off the page.

   44px, AND THE NUMBER IS MEASURED, NOT CHOSEN. The longest heading on these pages is
   "How your money gets from one currency to the other" - 50 characters against 1144px
   of wrap - and it needs 47.8px to fit on one line. The old cap was 48px, so it was
   overflowing by a fraction at every width from 1280px up. 44px leaves about 9% of
   headroom, which is the margin .usd settled on for the same reason: text metrics vary
   enough across platforms that sitting on the limit is not safe.

   .band h2 IS NOT AFFECTED. It carries its own nowrap rule at this breakpoint and, at
   one class more specificity, wins over this one. */
@media(min-width:1024px){
  section h2{white-space:nowrap;font-size:clamp(30px,3.4vw,44px)}
}
/* THE HERO IS THE SAME HEIGHT ON ALL FOUR PAGES, and getting there meant trimming
   rather than padding, because the two right-hand columns are not the same size: the
   hub's ticker is four rows, the leaves' is an interactive converter, and measured at
   1440 that was 337px against 560px. The hero is padding plus the taller column, so the
   leaves ran to 893px and over an 800px fold while the hub sat at 638px.

   WHAT MOVED. The card gives up padding in every block - the field boxes, the tab row,
   the rate line, the CTA and the in-card note - and the hero's own padding comes down
   from 140/76 to 112/48, which keeps the visible top and bottom gaps level with each
   other the way they were. .grid then carries a min-height so the hub's shorter column
   sits in a box the same size, which is the one cost no arrangement avoids: the hub
   gains empty space under its ticker. Nothing was invented to fill it.

   .rate ALSO GETS A min-height. On the two crypto pages that line wraps to a second row
   and on the currency page it does not, which is where the 30px spread between the
   three leaves came from. */
/* NO min-height FLOOR ON .hero .grid. It was 477px - the tallest converter card,
   measured at 1440 - and it pinned all four heroes to one height. The hub's right
   column is a four-row ticker at 337px, so the floor left ~140px of empty space under
   the hub's card. The floor is gone: the hub's hero is now ~614px against the leaves'
   754px, and the four heroes deliberately no longer match. Filling the gap with two
   more ticker rows was the alternative and was declined. */
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-t)}
/* NO ch CAP on section copy (item 10): the lede runs to the wrap width like the
   rest of the page. The hero sub and the closing card keep their own caps. */
.head{max-width:none}
.head.mid{margin-left:auto;margin-right:auto;text-align:center}
.sub .aside{color:rgba(255,255,255,.55)}
.head h2{margin-top:14px}
.head .lede{margin-top:16px;font-size:18px;max-width:none}
/* 104px, NOT the 88px this bundle shipped. Every other section on the site is
   104px top and bottom, and these pages sit inside the same site. */
section{padding:104px 0}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;
  padding:0 24px;border-radius:999px;font-weight:600;font-size:16px;
  border:1px solid transparent;transition:.16s;cursor:pointer;font-family:inherit}
.btn-p{background:var(--ink);color:#fff}
.btn-p:hover{background:#000;transform:translateY(-1px)}
.btn-o{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-o:hover{border-color:#c6dad0;color:var(--green-t)}
.btn-g{background:var(--green);color:#fff}
.btn-g:hover{background:#0ea55d;transform:translateY(-1px)}
.btn svg{width:20px;height:20px;flex:none;fill:currentColor}
.lnk{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15px;
  color:var(--green-t)}
.lnk:hover{gap:11px}
.lnk svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:80;background:transparent;
  border-bottom:1px solid transparent;transition:background .25s,border-color .25s}
header.stuck{background:rgba(252,253,252,.85);
  backdrop-filter:saturate(180%) blur(14px);border-bottom-color:var(--line)}
header:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:1;
  transition:opacity .25s;background:linear-gradient(180deg,rgba(3,46,22,.42),
  rgba(3,46,22,.1) 70%,rgba(3,46,22,0))}
header.stuck:before{opacity:0}
.nav{display:flex;align-items:center;gap:32px;height:74px}
.brand{display:flex;align-items:center;gap:9px;font-family:Bricolage;font-weight:700;
  font-size:23px;color:var(--ink);letter-spacing:-.03em;transition:color .25s}
.brand img{width:28px;height:28px}
.nav nav{display:flex;gap:24px;font-size:15px;transition:color .25s}
.nav nav a:hover{color:var(--green-t)}
.nav nav a.on{color:#fff;font-weight:600}
header.stuck .nav nav a.on{color:var(--green-t)}
.nav .sp{margin-left:auto}
.nav .btn{height:44px;padding:0 20px;font-size:15px}
header:not(.stuck) .brand{color:#fff}
header:not(.stuck) .nav nav{color:rgba(255,255,255,.88)}
header:not(.stuck) .nav nav a:hover{color:#fff}
@media(max-width:1040px){.nav nav{display:none}}

/* ---------- hero ----------
   The chart is the wallpaper. The pair the reader is converting is drawn once,
   very large and very quiet, across the whole hero, so the page announces what
   it is before a word is read. It is the same series the chart section plots,
   fetched once and reused. */
.hero{position:relative;background:
  radial-gradient(120% 130% at 82% -10%,#0a7a3c 0%,transparent 55%),
  linear-gradient(158deg,#04622d 0%,#032e16 62%,#02200f 100%);
  color:#fff;overflow:hidden;/* 140px, not 128: the fixed nav covers the first 64px of the hero, so a 140px top
   pad leaves a 76px visible gap above the eyebrow - equal to the 76px below. */
  /* NO NEGATIVE MARGIN. It was margin-top:-64px, copied from the persona pages -
   but those sit in a layout that reserves the nav height, and these pages do not.
   The nav here is position:fixed and takes no space in flow, so the hero already
   began at y=0 and the -64px simply threw its top 64px off the top of the screen.
   Measured at 1440: the gap from the nav to the breadcrumb was 19px against 84px
   at the foot. Without it the same padding reads 83px against 84px, which is the
   parity the padding was set for. The nav still sits over the hero, because a
   fixed bar overlays whatever starts at y=0 anyway. */
  padding:112px 0 48px}
.hero .glow{position:absolute;width:760px;height:760px;right:-180px;top:-320px;
  background:radial-gradient(circle,rgba(50,213,131,.28),transparent 66%);
  pointer-events:none}
.hero .wall{position:absolute;left:0;right:0;bottom:0;height:72%;pointer-events:none;
  opacity:.62}
.hero .wall svg{width:100%;height:100%}
.hero .wrap{position:relative;z-index:3}
.hero h1{color:#fff;margin-top:16px}
.hero .eyebrow{color:var(--green-l)}
.hero .sub{margin-top:18px;font-size:19px;max-width:40ch;color:rgba(255,255,255,.78)}
.hero .grid{display:grid;grid-template-columns:1fr minmax(400px,470px);gap:56px;
  align-items:start}
.hero /* The compare pages' crumb, value for value: 13.5px at .55, the current page in a
   <b> at .85, and a rsaquo rather than a slash between the levels. */
.crumb{display:flex;gap:8px;align-items:center;font-size:13.5px;
  color:rgba(255,255,255,.55);margin-bottom:26px}
.crumb a{color:rgba(255,255,255,.55)}
.crumb a:hover{color:#fff}
.crumb b{color:rgba(255,255,255,.85);font-weight:500}
.hero .crumb a:hover{color:#fff}
@media(max-width:980px){
  .hero{padding:128px 0 56px}
  .hero .grid{grid-template-columns:1fr;gap:34px}
}
@media(max-width:440px){
  .conv .seg a{font-size:12px;padding:9px 2px;letter-spacing:-.02em}
  .fld input{font-size:28px}
}

/* ---------- the converter card ---------- */
.conv{background:#fff;border-radius:26px;padding:12px;color:var(--text);
  box-shadow:0 34px 90px -30px rgba(2,32,15,.62),0 2px 0 rgba(255,255,255,.5) inset;
  position:relative}
.conv .seg{display:flex;flex-wrap:wrap;gap:4px;background:var(--sec);border-radius:14px;
  padding:4px;margin:4px 6px 10px}
.conv .seg a{flex:1 1 0;min-width:0;text-align:center;font-size:12.5px;font-weight:600;
  padding:9px 3px;border-radius:10px;color:var(--text);transition:.16s;
  letter-spacing:-.015em;white-space:nowrap}
@media(max-width:560px){.conv .seg a{flex:1 1 44%}}
.conv .seg a.on{background:#fff;color:var(--ink);
  box-shadow:0 1px 3px rgba(11,20,15,.1)}
.conv .seg a:not(.on):hover{color:var(--ink)}
.fld{background:var(--sec);border-radius:18px;padding:8px 18px;transition:.16s;
  border:1.5px solid transparent}
.fld:focus-within{background:#fff;border-color:var(--green-l);
  box-shadow:0 0 0 4px rgba(50,213,131,.16)}
.fld+.fld{margin-top:8px}
.fld .lab{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}
.fld .line{display:flex;align-items:center;gap:12px;margin-top:6px}
.fld input{flex:1;min-width:0;border:0;background:transparent;outline:none;
  font-family:Bricolage,Georgia,serif;font-size:32px;font-weight:600;color:var(--ink);
  letter-spacing:-.03em;padding:0;width:100%;font-variant-numeric:tabular-nums}
.fld input::placeholder{color:var(--muted);font-weight:500}
.fld .fiat{margin-top:2px;font-size:13px;color:var(--muted);min-height:20px}

/* the asset button + its dropdown */
.pick{position:relative;flex:none}
.pick>button{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid
  var(--line);border-radius:999px;padding:7px 13px 7px 8px;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);transition:.16s}
.pick>button:hover{border-color:#bcd6c8}
.pick>button svg.cv{width:12px;height:12px;stroke:var(--muted);fill:none;stroke-width:2.4;
  transition:transform .2s}
.pick.open>button svg.cv{transform:rotate(180deg)}
.mark{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.02em;overflow:hidden}
img.mark{object-fit:cover;display:block}
/* flags are 4:3, so a round crop takes a slice off each side, which is what a
   flag chip is meant to look like. Coin marks already carry their own disc. */
img.mark.flag{box-shadow:0 0 0 1px rgba(11,20,15,.09) inset}
.mark.lg{width:34px;height:34px;font-size:11px}
.mark.sm{width:20px;height:20px;font-size:8px}
.menu{position:absolute;z-index:40;top:calc(100% + 8px);right:0;width:302px;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 24px 60px -18px rgba(2,32,15,.34);padding:8px;display:none}
.pick.open .menu{display:block}
.menu .srch{display:flex;align-items:center;gap:8px;background:var(--sec);
  border-radius:11px;padding:0 12px;margin-bottom:6px}
.menu .srch svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2.2;
  flex:none}
.menu .srch input{flex:1;border:0;background:transparent;outline:none;height:40px;
  font-family:inherit;font-size:14.5px;color:var(--ink)}
.menu .list{max-height:330px;overflow-y:auto;overscroll-behavior:contain}
.menu .gh{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);padding:11px 12px 5px}
.menu .it{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:11px;
  cursor:pointer;font-size:14.5px}
.menu .it:hover,.menu .it.cur{background:var(--acc)}
.menu .it b{color:var(--ink);font-weight:600}
.menu .it i{font-style:normal;color:var(--muted);font-size:13px;margin-left:auto;
  white-space:nowrap}
.menu .none{padding:22px 12px;text-align:center;font-size:14px;color:var(--muted)}

/* the swap button straddles the two fields */
.swap{position:relative;height:0;display:flex;justify-content:center;z-index:5}
.swap button{position:absolute;top:-19px;width:38px;height:38px;border-radius:50%;
  background:var(--ink);border:3px solid #fff;cursor:pointer;display:grid;
  place-items:center;transition:.2s;padding:0}
.swap button:hover{background:var(--green-t);transform:rotate(180deg)}
.swap svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.2}

/* 12.5px AND A min-height. At 14px this line ran to a second row on the two crypto
   pages and one row on the currency page, which is exactly where the 30px spread
   between the three leaf heroes came from. One row on all three now, and the
   min-height holds the box the same whichever it is. */
.conv .rate{display:flex;align-items:flex-start;gap:10px;padding:8px 18px 4px;
  font-size:12.5px;flex-wrap:wrap;min-height:42px}
.conv .rate b{color:var(--ink);font-weight:600}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;
  box-shadow:0 0 0 0 rgba(18,183,106,.55);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(18,183,106,0)}
  100%{box-shadow:0 0 0 0 rgba(18,183,106,0)}}
.conv .rate .src{margin-left:auto;font-size:12px;color:var(--muted)}
.conv .go{padding:8px 6px 4px}
.conv .go .btn{width:100%}
.conv .fine{padding:0 18px 8px;font-size:11px;color:var(--muted);line-height:1.35}
.flash{animation:flash .5s ease-out}
@keyframes flash{0%{color:var(--green)}100%{color:var(--ink)}}
.flash-d{animation:flashd .5s ease-out}
@keyframes flashd{0%{color:var(--red)}100%{color:var(--ink)}}

/* quick chips under the card */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.chips a{font-size:13px;font-weight:600;color:rgba(255,255,255,.86);
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);
  border-radius:999px;padding:7px 13px;transition:.16s;cursor:pointer}
.chips a:hover{background:rgba(255,255,255,.17);color:#fff}
.chips a.on{background:#fff;color:var(--green-d);border-color:#fff}

/* ---------- chart ---------- */
/* The section head is a narrow column by house style, which leaves the right
   third of the row empty. A short reading note is the useful thing to put
   there, rather than stretching the paragraph to fill it. */
.csplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);gap:32px;
  align-items:start}
/* the head's 46ch cap left a canyon before the note, so it runs wider here */
.csplit .head{max-width:none}
.csplit .head .lede{max-width:none}
.cnote{background:var(--acc);border:1px solid #d5efe2;border-radius:18px;padding:24px 26px;
  margin-top:8px}
.cnote h3{font-size:16px;letter-spacing:-.018em;color:var(--green-d)}
.cnote ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;
  gap:12px}
.cnote li{display:flex;gap:10px;font-size:14.5px;line-height:1.45;color:#335644}
.cnote li:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--green);margin-top:8px}
@media(max-width:980px){.csplit{grid-template-columns:1fr;gap:26px}}
.chartwrap{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:24px 24px 12px;box-shadow:0 1px 2px rgba(11,20,15,.03)}
.chead{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:6px}
.chead .now{font-family:Bricolage,serif;font-size:34px;font-weight:600;color:var(--ink);
  letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.chead .cpair{font-size:13.5px;color:var(--muted);margin-bottom:3px}
.chg{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:600;
  border-radius:999px;padding:4px 10px;background:var(--acc);color:var(--green-t)}
.chg.dn{background:#fdeceb;color:var(--red)}
.chg svg{width:12px;height:12px;fill:currentColor}
.ranges{display:flex;gap:3px;margin-left:auto;background:var(--sec);border-radius:12px;
  padding:3px}
.ranges button{border:0;background:transparent;font-family:inherit;font-size:13px;
  font-weight:600;color:var(--text);padding:7px 13px;border-radius:9px;cursor:pointer;
  transition:.14s}
.ranges button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(11,20,15,.1)}
.plot{position:relative;height:330px;margin-top:14px}
.plot svg{width:100%;height:100%;overflow:visible}
.plot .ln{fill:none;stroke:var(--green);stroke-width:2.1;stroke-linejoin:round;
  stroke-linecap:round}
.plot .gd{stroke:var(--line);stroke-width:1;stroke-dasharray:3 5}
.plot .yl{font-size:11px;fill:var(--muted);font-family:InterV,sans-serif}
.plot .xl{font-size:11px;fill:var(--muted);font-family:InterV,sans-serif;
  text-anchor:middle}
.plot .cx{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 4;opacity:.3}
.plot .cd{fill:#fff;stroke:var(--green);stroke-width:2.5}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;
  border-radius:11px;padding:9px 13px;font-size:12.5px;line-height:1.45;opacity:0;
  transition:opacity .12s;white-space:nowrap;transform:translate(-50%,-124%);z-index:6;
  box-shadow:0 10px 26px -8px rgba(2,32,15,.5)}
.tip b{display:block;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.tip i{font-style:normal;color:rgba(255,255,255,.6)}
.plot.busy .ln{opacity:.3}
.cfoot{display:flex;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);
  margin-top:10px;padding:13px 0 8px;font-size:12.5px;color:var(--muted)}
.cstat{display:flex;flex-wrap:wrap;gap:0 34px;margin-top:18px}
.cstat div{padding:2px 0}
.cstat .k{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
.cstat .v{font-size:19px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---------- generic panels ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}
.card .ic{width:40px;height:40px;border-radius:12px;background:var(--acc);display:grid;
  place-items:center;margin-bottom:15px}
.card .ic svg{width:20px;height:20px;stroke:var(--green-t);fill:none;stroke-width:1.9}
.card h3{margin-bottom:8px}
.card p{font-size:15px}
@media(max-width:900px){.cards{grid-template-columns:1fr}}

/* ---------- the three scenes ----------
   Inline SVG, CSS keyframes, no library and no script. Each one runs a single
   loop that says the sentence the card used to spend a paragraph on. */
.sccard{text-align:center}
.sccard h3{margin-bottom:9px}
.sccard p{font-size:15px;max-width:30ch;margin:0 auto}
.scwrap{background:var(--acc);border:1px solid #dcf0e6;border-radius:16px;
  padding:20px 14px;margin-bottom:20px}
.sc{width:100%;height:auto;display:block;overflow:visible}
.sc .node{fill:#fff;stroke:#cfe3d8;stroke-width:1.5}
.sc .mono{fill:var(--green-t);font:700 11px InterV,sans-serif;text-anchor:middle;
  dominant-baseline:central}
.sc .rail{fill:none;stroke:#cbe4d6;stroke-width:2.5;stroke-linecap:round}
.sc .dash{fill:none;stroke:var(--green);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:11 49;animation:scdash 2.6s linear infinite}
.sc .dash.d2{animation-delay:.6s}
@keyframes scdash{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
.sc .hub{fill:var(--ink)}
.sc .hubt{fill:#fff;font:600 20px Bricolage,Georgia,serif;text-anchor:middle;
  dominant-baseline:central}
.sc .hubt.big{font-size:24px}
.sc .ring,.sc .pulse{fill:none;stroke:var(--green);stroke-width:2;opacity:0;
  transform-box:fill-box;transform-origin:center}
.sc .ring{animation:scring 2.6s ease-out infinite;animation-delay:1.15s}
@keyframes scring{0%{opacity:.6;transform:scale(.86)}70%,100%{opacity:0;transform:scale(1.4)}}
.sc .pulse{animation:scring 3s ease-out infinite}
.sc .pulse.p2{animation-delay:1.5s}
/* the two stablecoins drift in and are absorbed by the balance */
.sc .drift{transform-box:fill-box;transform-origin:center;
  animation:scdriftL 3s cubic-bezier(.3,.6,.4,1) infinite}
.sc .drift.dr{animation-name:scdriftR;animation-delay:.45s}
@keyframes scdriftL{0%,6%{transform:translateX(0);opacity:0}
  24%{opacity:1}62%,100%{transform:translateX(66px);opacity:0}}
@keyframes scdriftR{0%,6%{transform:translateX(0);opacity:0}
  24%{opacity:1}62%,100%{transform:translateX(-66px);opacity:0}}
/* the card reaches the terminal, the arcs answer, the tick draws itself */
.sc .card2{transform-box:fill-box;transform-origin:center;
  animation:sccard 3.2s cubic-bezier(.4,0,.3,1) infinite}
@keyframes sccard{0%,10%{transform:translateX(0)}40%,62%{transform:translateX(16px)}
  92%,100%{transform:translateX(0)}}
.sc .plastic{fill:var(--green-d)}
.sc .stripe{fill:rgba(255,255,255,.22)}
.sc .chip{fill:var(--green-l)}
.sc .w{fill:none;stroke:var(--green);stroke-width:2.6;stroke-linecap:round;opacity:0;
  animation:scwave 3.2s ease-out infinite}
.sc .w2{animation-delay:.13s}
.sc .w3{animation-delay:.26s}
@keyframes scwave{0%,26%{opacity:0}40%,58%{opacity:1}74%,100%{opacity:0}}
.sc .box{fill:#fff;stroke:#cfe3d8;stroke-width:1.8}
.sc .screen{fill:var(--sec)}
.sc .keys{fill:#e2ece7}
.sc .tick{fill:none;stroke:var(--green);stroke-width:3.4;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:38;stroke-dashoffset:38;
  animation:sctick 3.2s ease-out infinite}
@keyframes sctick{0%,52%{stroke-dashoffset:38}68%,88%{stroke-dashoffset:0}
  100%{stroke-dashoffset:38}}
/* a still frame for anyone who would rather not watch it move */
@media(prefers-reduced-motion:reduce){
  .sc .dash{stroke-dasharray:none;opacity:.95}
  .sc .ring,.sc .pulse{display:none}
  .sc .drift{opacity:1!important;transform:none!important}
  .sc .w{opacity:1!important}
  .sc .tick{stroke-dashoffset:0!important}
  .sc .card2{transform:none!important}
}

table.t{width:100%;border-collapse:collapse;margin-top:30px;font-size:15px;
  background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
table.t th{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding:14px 18px;
  border-bottom:1px solid var(--line);background:var(--sec);white-space:nowrap}
table.t td{padding:13px 18px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t td:first-child{color:var(--ink);font-weight:600}
table.t td.n{font-variant-numeric:tabular-nums;text-align:right;color:var(--ink);
  font-weight:600}
table.t td.free{color:var(--green-t)}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tscroll table.t{min-width:520px}

/* live pair grid */
.pairs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}
.pair{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;
  transition:.16s;display:block}
.pair:hover{border-color:var(--green-l);transform:translateY(-2px);
  box-shadow:0 12px 30px -14px rgba(2,32,15,.22)}
.pair .t{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;
  color:var(--ink)}
.pair .t .mark{margin-right:-13px;border:2px solid #fff}
.pair .t .mark+.mark{margin-right:0}
.pair .t span{margin-left:9px}
.pair .v{font-family:Bricolage,serif;font-size:20px;font-weight:600;color:var(--ink);
  letter-spacing:-.025em;margin-top:11px;font-variant-numeric:tabular-nums}
.pair .c{font-size:12.5px;font-weight:600;color:var(--green-t);margin-top:3px;
  min-height:19px}
.pair .c.dn{color:var(--red)}
@media(max-width:980px){.pairs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.pairs{grid-template-columns:1fr}}
/* a card the pager has put away has to actually go, and .pair sets its own
   display, so the hidden attribute needs saying out loud */
.pairs .pair[hidden]{display:none}
.pairs .pair.in{animation:pairin .34s cubic-bezier(.2,.7,.3,1) both}
@keyframes pairin{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ---------- pager ---------- */
.pgn{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:30px;
  flex-wrap:wrap}
.pgn:empty{display:none}
.pg{min-width:40px;height:40px;padding:0 6px;border-radius:12px;border:1px solid var(--line);
  background:#fff;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--text);
  cursor:pointer;display:grid;place-items:center;transition:.15s;
  font-variant-numeric:tabular-nums}
.pg:hover:not(:disabled){border-color:var(--green-l);color:var(--green-t);
  transform:translateY(-1px)}
.pg.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pg.on:hover{color:#fff;transform:none}
.pg:disabled{opacity:.34;cursor:not-allowed}
.pg:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.pg svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2}
.pgof{padding:0 14px;font-size:14.5px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums}
.pgcount{margin:14px 0 0;text-align:center;font-size:13px;color:var(--muted)}
.pgcount:empty{display:none}

/* the glossary's two-definition card, reused so a term looks the same
   wherever Kite explains it */
.twoup{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:34px 0 0}
.tu{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:24px 26px}
.tu.b{background:linear-gradient(180deg,#fff,var(--acc))}
.lab2{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;color:var(--green-t);margin-bottom:11px}
.lab2 svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9}
.tu p{margin:0;font-size:16.5px;line-height:1.6}
@media(max-width:820px){.twoup{grid-template-columns:1fr}}

/* second CTA, deliberately not another dark band */
.cta2{display:grid;grid-template-columns:1fr 190px;gap:40px;align-items:center;
  background:var(--acc);border:1px solid #d5efe2;border-radius:24px;padding:44px 46px}
.cta2 h2{margin-top:12px;max-width:22ch}
.cta2 p{margin-top:14px;font-size:17px;max-width:56ch}
.cta2 .row{margin-top:26px}
.cta2-i{justify-self:center;width:150px;height:150px;border-radius:38px;background:#fff;
  display:grid;place-items:center;box-shadow:0 18px 40px -20px rgba(2,32,15,.3)}
.cta2-i svg{width:64px;height:64px;stroke:var(--green-t);fill:none;stroke-width:1.3}
@media(max-width:820px){.cta2{grid-template-columns:1fr;padding:34px 26px;gap:26px}
  .cta2-i{display:none}}

/* sources + disclaimer */
/* NO CAP: the disclaimer is the width of the wrap, like the table above it. */
.disc{margin-top:26px;background:var(--sec);border:1px solid var(--line);border-radius:16px;
  padding:20px 24px;font-size:14px;line-height:1.6;color:var(--text)}
.disc b{color:var(--ink);font-weight:600}
.disc a{color:var(--green-t);font-weight:600}
table.t td a{color:var(--green-t);font-weight:600}
.conv .rate .src b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
/* a range with no intraday data behind it says so instead of disappearing */
.ranges button.off{opacity:.42;cursor:not-allowed}
.ranges button.off:hover{background:transparent}

/* faq */
.faq{max-width:820px;margin:34px auto 0}
.q{border-bottom:1px solid var(--line)}
.q summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:Bricolage,serif;font-size:19px;font-weight:600;color:var(--ink);
  letter-spacing:-.022em;line-height:1.3}
.q summary::-webkit-details-marker{display:none}
.q summary:after{content:"";position:absolute;right:8px;top:29px;width:9px;height:9px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .2s}
.q[open] summary:after{transform:rotate(-135deg);top:33px}
.q .a{padding:0 0 24px;font-size:16px;max-width:70ch}
.q .a p+p{margin-top:12px}
.q .a a{color:var(--green-t);font-weight:600}

/* cta band */
/* THE CLOSING CARD IS build-shell's .usd, VALUE FOR VALUE (items 3 and 4). The bundle
   shipped a dark band - linear-gradient(150deg,#04622d,#032e16), left aligned - which is
   not the panel the rest of the site closes on. These are the .usd numbers: the bright
   ramp to bottom right, a 40px radius, 60/32/64 padding, the radial sheen at 60% 120%
   from 50% 0%, centred content, and the h2 going nowrap at 1024px with the clamp coming
   down from 48px to 44px, which is how .usd gets its one-line title. The old .glow layer
   is hidden rather than deleted so the markup stays as the bundle wrote it. */
.band{background:linear-gradient(to bottom right,#12b76a,#027a48);color:#fff;
  border-radius:40px;padding:60px 32px 64px;position:relative;overflow:hidden;
  text-align:center}
.band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 120% at 50% 0%,rgba(255,255,255,.25),transparent 70%)}
.band .glow{display:none}
.band h2{position:relative;color:#fff;max-width:640px;margin:0 auto;
  font-size:clamp(30px,4.4vw,48px);line-height:1.08;letter-spacing:-.025em;
  text-wrap:balance}
@media(min-width:1024px){
  .band h2{max-width:none;white-space:nowrap;font-size:clamp(30px,3.7vw,44px)}
}
.band p{position:relative;margin:20px auto 0;max-width:880px;font-size:18px;
  line-height:1.6;color:rgba(255,255,255,.85)}
/* The download cluster centres inside the card, which is what .usd .dlwrap does. */
.band .row{position:relative;justify-content:center;margin:32px 0 0}
.band .dlwrap{justify-content:center}
@media(max-width:700px){.band{padding:44px 22px 48px;border-radius:28px}}
.band .glow{position:absolute;width:520px;height:520px;right:-140px;top:-220px;
  background:radial-gradient(circle,rgba(50,213,131,.3),transparent 66%)}


.band .row{margin-top:30px;position:relative}
.band .btn-o{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.band .btn-o:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
@media(max-width:680px){}

/* hub: the hero has no converter card, so it gets a live tape instead */
.tick{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:22px;padding:8px;backdrop-filter:blur(10px)}
.tick .th{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);
  padding:12px 16px 10px}
.tick .th .dot{background:var(--green-l)}
.tr{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:15px;
  transition:.16s}
.tr:hover{background:rgba(255,255,255,.09)}
.tr .nm{font-size:14.5px;font-weight:600;color:#fff}
.tr .rt{margin-left:auto;text-align:right}
.tr .rt .v,.tr .rt .c{display:block}
.tr .v{font-size:15px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em}
.tr .c{font-size:12px;font-weight:600;color:var(--green-l);min-height:17px}
.tr .c.dn{color:#ff8b8b}

/* ---------- the tool cards' split-flap ----------
   Currency codes roll into place a character at a time, the way a departure
   board does, which is the right piece of furniture to borrow for an exchange
   rate. The flags and coin marks tumble out and back in behind them, and the
   live rate underneath keeps the whole thing honest rather than decorative. */
.flip{display:flex;align-items:center;justify-content:center;gap:12px;overflow:hidden;
  margin:20px 0 0;padding:22px 0;border-radius:16px;background:var(--sec)}
.fside{display:flex;align-items:center;gap:9px;perspective:420px}
img.fico,span.fico{width:30px;height:30px;border-radius:50%;flex:none;
  backface-visibility:hidden;
  transition:transform .24s cubic-bezier(.34,1.4,.64,1)}
img.fico.out,span.fico.out{transform:rotateY(88deg) scale(.94);
  transition:transform .17s cubic-bezier(.5,0,1,1)}
.roll{display:flex;font-family:Bricolage,Georgia,serif;font-weight:600;font-size:21px;
  color:var(--ink);letter-spacing:.005em}
.cell{height:28px;width:.92em;overflow:hidden;background:#fff;border-radius:5px;
  margin:0 1.5px;box-shadow:0 0 0 1px rgba(11,20,15,.07) inset;
  transition:width .36s cubic-bezier(.2,.7,.3,1),margin .36s}
.cell.blank{width:0;margin:0}
.hubc:hover .cell{box-shadow:0 0 0 1px rgba(7,116,65,.16) inset}
.col{display:block;will-change:transform;
  transition:transform .6s cubic-bezier(.18,.86,.26,1)}
.col i{display:block;height:28px;line-height:28px;font-style:normal;text-align:center}
.farr{width:19px;height:19px;stroke:var(--muted);fill:none;stroke-width:2;flex:none;
  transition:transform .42s cubic-bezier(.2,.7,.3,1)}
.flip.go .farr{transform:translateX(5px)}
.frate{margin-top:13px;font-size:13px;color:var(--muted);text-align:center;
  font-variant-numeric:tabular-nums;min-height:19px}
.hubc:hover .flip{background:var(--acc)}

/* hub */
.hub{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.hubc{display:block;background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:26px 24px;transition:.18s;position:relative;overflow:hidden}
.hubc:hover{border-color:var(--green-l);transform:translateY(-3px);
  box-shadow:0 22px 50px -22px rgba(2,32,15,.3)}
.hubc h3{font-size:21px;letter-spacing:-.028em;text-align:center}
.hubc p{font-size:15px;margin-top:9px}
.hubc{display:flex;flex-direction:column}
.hubc .ex{margin-top:auto;padding-top:18px;font-size:13.5px;font-weight:600;
  color:var(--green-t);display:flex;align-items:center;justify-content:center;gap:7px;
  white-space:nowrap}
.hubc .ex svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;
  stroke-width:2}
.hubc:hover .ex{gap:11px}
@media(max-width:960px){.hub{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.hub{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line);padding:52px 0 40px;font-size:14.5px;
  color:var(--muted);background:var(--bg)}
.fg{display:flex;flex-wrap:wrap;gap:32px 64px;align-items:flex-start}
.fg nav{display:flex;flex-direction:column;gap:10px}
.fg h4{margin:0 0 4px;font-size:11.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink)}
.fg nav a:hover{color:var(--green-t)}
.fb{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;
  max-width:86ch}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;
  animation-duration:.01ms!important;scroll-behavior:auto!important}}