@font-face {
  font-family: Vazirmatn;
  src: url('/fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('/fonts/vazirmatn/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('/fonts/vazirmatn/Vazirmatn-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('/fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('/fonts/vazirmatn/Vazirmatn-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* The titles and the navigation are set in a second face, because the one that
   reads well at thirteen pixels is not the one that carries a headline:
   Estedad, under the Open Font Licence, kept here with its licence beside it.

   The variable cut rather than a stack of static ones. It is asked to be a
   headline at 800 and a navigation link at 500, and two static weights come to
   more bytes than the whole range does — one file covers every weight the site
   will ever ask this face for. Everything that is neither a title nor a link
   in the bar stays in Vazirmatn. */
@font-face {
  font-family: Estedad;
  src: url('/fonts/estedad/Estedad-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --display: Estedad, Vazirmatn, ui-sans-serif, system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Vazirmatn, ui-sans-serif, system-ui, sans-serif;
  background: #f7f7f9;
  color: #1b2436;
}

a {
  color: #194b9b;
  text-decoration: none;
}

a:hover {
  color: #123a7a;
}

img,
svg {
  display: block;
}

.skip-link {
  position: absolute;
  inset-inline-start: 12px;
  top: -40px;
  z-index: 100;
  padding: 8px 12px;
  border-radius: 8px;
  background: #194b9b;
  color: #fff;
}

.skip-link:focus {
  top: 12px;
}

/* Said to a screen reader and to anything parsing the page, not drawn. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The bar is white glass over a white page, and nothing at all over the hero:
   there it has the sky and the globe behind it and needs no surface of its
   own, and every colour in it is turned over to the light half of the palette.
   Which of the two it is, is decided in three places — the markup starts it
   clear on the one page with a dark hero under it, app.js turns it white the
   moment that hero has been scrolled past, and a rule in base.html.twig darkens
   it instead if app.js never runs, since a clear bar over a white page is a bar
   nobody can read.

   How high it stands is published, because the hero is pulled up behind it by
   exactly that much. The figures here are the ones the bar settles at on its
   own; app.js replaces them with what it actually measured, and until then —
   or without it — they are generous enough that nothing is covered. */
:root {
  --header-h: 68px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fffffff2;
  border-bottom: 1px solid #eceef2;
  transition:
    background-color 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

@supports ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) {
  .site-header {
    background: #ffffffbf;
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border-bottom-color: #eceef2cc;
  }
}

/* Standing on the hero. The blur stays — what is behind the bar is the globe,
   and it is worth softening — and everything else goes. */
.site-header--clear {
  background: #ffffff0a;
  border-bottom-color: #ffffff1f;
  box-shadow: none;
}

.site-header--clear .brand,
.site-header--clear .brand__name {
  color: #fff;
}

.site-header--clear .site-nav a {
  color: #c2d2ec;
}

.site-header--clear .site-nav a:hover {
  color: #fff;
}

.site-header--clear .btn--primary {
  background: #2f72dd;
}

.site-header--clear .btn--primary:hover {
  background: #1f5cc0;
}

.site-header__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* The mark is drawn in currentColor, so this is the colour of the logo as well
   as of the link around it, and the bar can change its mind about both at once
   on the way past the hero. */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #194b9b;
  transition: color 0.28s ease;
}

.brand:hover {
  color: #194b9b;
}

/* The name is set in the title face, since it is one: it stands at the top of
   every page and reads as a headline rather than as text.

   And with no letter-spacing on it. Persian joins, and space added between the
   letters of a joined word pulls the strokes apart — what that 0.3px was
   widening is a word that is drawn as one. */
.brand__name {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 800;
  color: #1b2436;
  transition: color 0.28s ease;
}

.brand--on-dark .brand__name {
  color: #fff;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  overflow-x: auto;
  max-width: 100%;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.site-nav::-webkit-scrollbar {
  display: none;
}

.site-nav a {
  font-family: var(--display);
  color: #3c4459;
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.28s ease;
}

.site-nav a:hover {
  color: #194b9b;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* On a narrow screen the header is two lines: the brand and the two account
   buttons on the first, the sections underneath them on the second. The order
   is set here rather than in the markup, so the logo stays the first thing a
   screen reader meets. */
@media (max-width: 900px) {
  :root {
    --header-h: 112px;
  }

  .site-header__inner {
    gap: 10px 14px;
    padding-bottom: 10px;
  }

  .brand {
    order: 1;
  }

  .site-header__actions {
    order: 2;
    margin-inline-start: auto;
  }

  .site-nav {
    order: 3;
    flex-basis: 100%;
    gap: 20px;
    padding-top: 2px;
  }

  .site-header__actions .btn {
    padding: 8px 14px;
    font-size: 13.5px;
  }

  .site-header__actions .btn--primary {
    padding-inline: 16px;
  }
}

/* Tighter still where the two buttons and the brand share 360 pixels. */
@media (max-width: 400px) {
  .brand__name {
    font-size: 17px;
  }

  .site-header__actions {
    gap: 8px;
  }

  .site-header__actions .btn {
    padding: 8px 11px;
    font-size: 13px;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  border: 1px solid transparent;
}

.btn--ghost {
  border-color: #d8dce4;
  color: #1b2436;
}

.btn--primary {
  padding-inline: 20px;
  background: #194b9b;
  color: #fff;
  font-weight: 700;
}

.btn--primary:hover {
  color: #fff;
  background: #123a7a;
}

.btn--lg {
  padding: 14px 30px;
  border-radius: 12px;
  font-size: 16px;
}

.btn--on-brand {
  display: inline-block;
  padding: 14px 34px;
  border-radius: 12px;
  background: #fff;
  color: #194b9b;
  font-size: 16px;
  font-weight: 700;
}

.btn--on-brand:hover {
  color: #123a7a;
}

/* ── The hero ─────────────────────────────────────────────────────────────
   The one dark band on a light page: a night sky the width of the window,
   lit blue where the globe is and falling away to almost black at the foot,
   so the section ends on the page's own white rather than on a line. */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* A screenful and not a line less, with the row centred in it: the world
     wants the room, and the page is better for opening on one whole thing
     rather than on one and a half. In small viewport units rather than dynamic
     ones — the address bar on a phone comes and goes, and a hero that changed
     height with it would re-cut the grid and re-measure the globe every time
     it did. */
  min-height: 100vh;
  min-height: 100svh;
  /* Up behind the bar, and padded back down by the same amount: the sky starts
     at the top of the window with nothing above it, and the words start where
     they would have anyway. */
  margin-top: calc(var(--header-h) * -1);
  padding-top: var(--header-h);
  /* Lit from behind the globe, which stands at the far end of the row from
     the swap box, and falling away to almost black under it. */
  background:
    radial-gradient(112% 84% at 79% 4%, #235ebb 0%, transparent 56%),
    radial-gradient(86% 70% at 12% 94%, #123c80 0%, transparent 62%),
    linear-gradient(180deg, #10387b 0%, #0a2454 46%, #050f2a 100%);
  color: #fff;
}

.hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 88px) clamp(16px, 4vw, 32px) clamp(30px, 5vw, 60px);
  display: grid;
  /* A column is 320 pixels wide or the whole row, whichever is *less*: a bare
     minmax(320px, …) is a floor the track keeps even on a screen narrower than
     it, and the hero would then be 320 pixels of content in 288 of window. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 48px;
  align-items: center;
}

/* Where the globe is drawn. The canvas is told how big it is by the box,
   never the other way round, so the hero is sized by its words and the world
   is fitted into whatever room they leave. */
.hero__sky {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero__globe {
  display: block;
  width: 100%;
  height: 100%;
}

/* The squares behind the hero, now ruled in the banner's white rather than
   the cards' grey. The ruling is the container's own background, so a line is
   drawn once between two squares instead of once per square; a square under
   the cursor is then outlined on all four sides rather than on the two it
   owns. The mask thins the whole thing out on the way down, so the grid is
   gone well before the globe is. */
.hero__grid {
  --hero-cell: 44px;

  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(var(--hero-columns, 12), 1fr);
  grid-auto-rows: var(--hero-cell);
  background-image:
    linear-gradient(to right, transparent calc(100% - 1px), #ffffff12 calc(100% - 1px)),
    linear-gradient(to bottom, transparent calc(100% - 1px), #ffffff12 calc(100% - 1px));
  background-size: calc(100% / var(--hero-columns, 12)) 100%, 100% var(--hero-cell);
  /* The cursor is followed by hand, so the grid takes no part in hit testing
     and never comes between the visitor and the words on top of it. */
  pointer-events: none;
  mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 96%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 96%);
}

.hero__grid span {
  /* Slow on the way out: a square the cursor crossed keeps its colour for a
     second and a half, so a pass over the hero leaves a trail behind it. */
  transition:
    background-color 1.5s ease-out,
    box-shadow 1.5s ease-out;
}

.hero__grid span.is-lit {
  background-color: #ffffff14;
  box-shadow: inset 0 0 0 1px #ffffff45;
  transition-duration: 0.08s;
}

.hero__copy,
.hero__panel-wrap {
  position: relative;
}

.hero__copy {
  min-width: min(280px, 100%);
  /* The words share their half of the row with the night side of the globe.
     They are white on deep blue either way; this is what keeps them white on
     deep blue where a lit dot passes behind them. */
  text-shadow: 0 2px 20px #04102a80;
}

.eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: #194b9b14;
  color: #194b9b;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 20px;
}

.hero .eyebrow {
  background: #ffffff1f;
  color: #d5e4ff;
  box-shadow: inset 0 0 0 1px #ffffff26;
}

.hero h1 {
  font-family: var(--display);
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  line-height: 1.28;
  font-weight: 800;
  margin: 0 0 20px;
  color: #fff;
}

.hero__lead {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.9;
  color: #b7c8e8;
  max-width: 520px;
  margin: 0 0 32px;
}

.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

/* The outlined button is drawn in the sky's own white here, since the grey it
   is bordered with everywhere else disappears into the blue. */
.hero .btn--ghost,
.site-header--clear .btn--ghost {
  border-color: #ffffff3d;
  color: #fff;
  background: #ffffff0f;
}

.hero .btn--ghost:hover,
.site-header--clear .btn--ghost:hover {
  border-color: #ffffff7a;
  background: #ffffff1f;
  color: #fff;
}

/* The one press the hero is asking for, and it asks: wider than a button needs
   to be, lifting under the cursor, and every few seconds a ring leaves it and a
   glint crosses it — the same two gestures the globe behind it makes when a
   signal lands, so the button belongs to the picture instead of sitting on it.

   Neither gesture is allowed to escape or to be clipped, which is why the ring
   is one layer and the glint another. The glint is a band moved across a wide
   background rather than a box slid over the button, so nothing has to be
   hidden to keep it inside; and the ring is on a layer of its own so the
   button's own shadow is left free to answer the cursor. */
.hero__cta {
  position: relative;
  gap: 10px;
  padding-inline: clamp(34px, 5vw, 56px);
  min-width: min(15rem, 100%);
  box-shadow: 0 18px 34px -18px #04102ae6;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.hero__cta::before,
.hero__cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* A band of the hero's own blue crossing a white button, which is the only way
   to catch light on something that is already white. */
.hero__cta::before {
  background: linear-gradient(
    104deg,
    transparent 40%,
    #194b9b1a 47%,
    #194b9b2e 50%,
    #194b9b1a 53%,
    transparent 60%
  );
  background-size: 260% 100%;
  background-position: 135% 0;
  animation: hero-cta-glint 4.8s ease-in-out infinite;
}

.hero__cta::after {
  animation: hero-cta-ring 3.6s ease-out infinite;
}

@keyframes hero-cta-glint {
  0% {
    background-position: 135% 0;
  }

  36% {
    background-position: -35% 0;
  }

  100% {
    background-position: -35% 0;
  }
}

@keyframes hero-cta-ring {
  0% {
    box-shadow: 0 0 0 0 #ffffff5c;
  }

  55% {
    box-shadow: 0 0 0 15px #ffffff00;
  }

  100% {
    box-shadow: 0 0 0 0 #ffffff00;
  }
}

.hero__cta span {
  transition: transform 0.18s ease;
}

.hero__cta:hover,
.hero__cta:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 24px 44px -18px #04102af2,
    0 0 0 5px #ffffff2e;
}

.hero__cta:hover span,
.hero__cta:focus-visible span {
  transform: translateX(-4px);
}

.hero__cta:active {
  transform: translateY(0);
}

/* Asked for less motion, it is a wider button and nothing else. */
@media (prefers-reduced-motion: reduce) {
  .hero__cta,
  .hero__cta::before,
  .hero__cta::after,
  .hero__cta span {
    animation: none;
    transition: none;
  }
}

.hero__highlights {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: #93a8ce;
}

.hero__highlights span[aria-hidden] {
  color: #ffffff40;
}

.hero__panel-wrap {
  position: relative;
  min-width: min(280px, 100%);
}

.hero__glow {
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(circle at 30% 20%, #4f8ffb33, transparent 62%),
    radial-gradient(circle at 78% 82%, #0b1f4a55, transparent 58%);
  border-radius: 40%;
  filter: blur(6px);
}

/* The swap box floats over the globe on a sheet of its own. The box itself is
   the portal's, class for class, and it is written for a white page; rather
   than restate it in blue, the sheet gives it the white page back. */
.hero__card {
  position: relative;
  width: 100%;
  max-width: 34.5rem;
  margin-inline: auto;
  padding: 14px;
  border-radius: 26px;
  /* The sheet is the white page the box was drawn for. The hero's own
     colour is white, for the words on the sky; without this the name and
     the chevron in the pill inherit it and vanish on the pill's white. */
  color: oklch(0.2 0.015 265);
}

/* The sheet the swap box floats on, and it is glass rather than paper: milky
   at the head, where the box wants a white page under it, and thinning all the
   way down until the world is showing through the last of it — frosted, so
   what shows through is the colour of the globe rather than the globe.

   It is drawn on a layer of its own rather than on the card itself for two
   reasons. A backdrop filter makes its element the containing block for
   anything fixed inside it, and the currency picker inside this one is fixed.
   And the layer needs no z-index to sit behind the box: both are positioned,
   and the box comes second. */
.hero__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(168deg, #fffffff7 0%, #ffffffe0 44%, #ffffffbf 100%);
  box-shadow:
    inset 0 0 0 1px #ffffff5c,
    0 34px 70px -34px #01081ce6,
    0 4px 18px -10px #01081c8c;
}

@supports ((backdrop-filter: blur(22px)) or (-webkit-backdrop-filter: blur(22px))) {
  .hero__card::before {
    background: linear-gradient(168deg, #ffffffe8 0%, #ffffffc4 46%, #ffffff8c 100%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
  }
}

/* The one line of the box that ends up over the thin end of the glass. It is
   grey on white in the portal, which is a shade too light to be read on this. */
.hero__card .trade-rates-hint {
  color: oklch(0.44 0.02 265);
}

/* Stacked, the world has the words on top of it rather than beside them, so it
   is taken down to a light behind them. */
@media (max-width: 900px) {
  .hero__sky {
    opacity: 0.5;
  }
}

/* ── The swap box ─────────────────────────────────────────────────────────
   Lifted from the portal's own swap form, class for class, so the box a
   visitor prices a trade in on the way in is the box they place it in once
   they are through the door. The portal writes these in oklch through
   Tailwind; they are spelled out here because this site carries no build
   step, and they must be read against assets/styles/trade.css when either
   side moves. */

.swap-box {
  position: relative;
  width: 100%;
  max-width: 32.5rem;
  margin-inline: auto;
  color: oklch(0.2 0.015 265);
}

.swap-box button {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

.swap-box [hidden] {
  display: none;
}

@keyframes trade-rise-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes trade-swap-down {
  0% {
    transform: translateY(0) scale(1);
  }

  45% {
    transform: translateY(14px) scale(0.975);
    opacity: 0.55;
  }

  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes trade-swap-up {
  0% {
    transform: translateY(0) scale(1);
  }

  45% {
    transform: translateY(-14px) scale(0.975);
    opacity: 0.55;
  }

  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes trade-swap-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(180deg);
  }
}

.trade-swap-root {
  position: relative;
}

.trade-pay-panel,
.trade-receive-panel {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  padding: 1rem 1.125rem 1.125rem;
}

.trade-pay-panel {
  background: linear-gradient(
    135deg,
    oklch(0.42 0.17 280 / 0.16) 0%,
    oklch(0.55 0.14 258 / 0.07) 48%,
    white 100%
  );
  /* A defined edge rather than a hint of one: the panel is the object the
     eye lands on first, and a ring at a tenth of an alpha reads as a smudge. */
  box-shadow: inset 0 0 0 1.5px oklch(0.45 0.15 270 / 0.28);
}

.trade-receive-panel {
  padding: 1.125rem 1.125rem 1rem;
  background: linear-gradient(
    135deg,
    oklch(0.62 0.15 190 / 0.18) 0%,
    oklch(0.68 0.12 165 / 0.07) 48%,
    white 100%
  );
  box-shadow: inset 0 0 0 1.5px oklch(0.55 0.13 190 / 0.3);
}

.trade-pay-panel::before,
.trade-receive-panel::before {
  content: '';
  position: absolute;
  width: 11.25rem;
  height: 11.25rem;
  border-radius: 9999px;
  pointer-events: none;
}

.trade-pay-panel::before {
  top: -4.375rem;
  inset-inline-start: -2.5rem;
  background: radial-gradient(circle, oklch(0.55 0.2 285 / 0.22) 0%, transparent 70%);
}

.trade-receive-panel::before {
  bottom: -4.375rem;
  inset-inline-end: -2.5rem;
  background: radial-gradient(circle, oklch(0.7 0.16 185 / 0.24) 0%, transparent 70%);
}

.trade-panel--swap-a.trade-pay-panel,
.trade-panel--swap-b.trade-pay-panel {
  animation: trade-swap-down 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.trade-panel--swap-a.trade-receive-panel,
.trade-panel--swap-b.trade-receive-panel {
  animation: trade-swap-up 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.trade-panel-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.trade-panel-label {
  font-size: 0.75rem;
  font-weight: 700;
}

.trade-pay-panel .trade-panel-label {
  color: oklch(0.4 0.16 280);
}

.trade-receive-panel .trade-panel-label {
  color: oklch(0.44 0.12 190);
}

.trade-panel-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.71875rem;
  color: oklch(0.55 0.015 265);
}

.trade-panel-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
}

.trade-currency-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: white;
  border: none;
  border-radius: 0.75rem;
  padding: 0.5625rem 0.75rem;
  box-shadow: 0 1px 3px oklch(0.25 0.04 265 / 0.12);
  flex: 0 1 auto;
  min-width: 0;
  max-width: 58%;
  overflow: hidden;
  transition:
    box-shadow 0.18s ease,
    transform 0.16s ease;
}

.trade-currency-btn:hover {
  box-shadow: 0 4px 12px oklch(0.25 0.04 265 / 0.16);
  transform: translateY(-1px);
}

.swap-chevron {
  flex: none;
  width: 14px;
  height: 14px;
  opacity: 0.5;
}

.trade-currency-flag {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: 50%;
  object-fit: contain;
}

.currency-flag--text {
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(0.94 0.006 265);
  color: oklch(0.45 0.015 265);
  font-size: 0.625rem;
  font-weight: 700;
}

.trade-currency-name {
  flex: 0 1 auto;
  min-width: 3.5ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 700;
}

.trade-amount-input,
.trade-receive-value {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: none;
  background: transparent;
  outline: none;
  text-align: left;
  direction: ltr;
  font-family: inherit;
  font-size: clamp(1.125rem, 5vw, 1.875rem);
  font-weight: 800;
  color: oklch(0.2 0.015 265);
  padding: 0;
}

.trade-amount-input::placeholder {
  color: oklch(0.75 0.01 265);
}

.trade-receive-value--empty {
  color: oklch(0.75 0.01 265);
}

.trade-swap-mid {
  display: flex;
  justify-content: center;
  margin: -1rem 0;
  position: relative;
  z-index: 5;
}

.trade-swap-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 9999px;
  border: 3px solid oklch(0.978 0.004 265);
  background: linear-gradient(135deg, oklch(0.42 0.18 285), oklch(0.52 0.15 220));
  color: white;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.2s ease;
}

.trade-swap-btn:hover {
  transform: rotate(180deg);
  background: linear-gradient(135deg, oklch(0.5 0.2 285), oklch(0.62 0.17 200));
}

.trade-swap-btn--spin {
  animation: trade-swap-spin 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Oversized, tilted flag sitting behind a panel's content. Decorative only:
   the panels already clip overflow, and content above it is positioned. */
.currency-watermark {
  position: absolute;
  z-index: 0;
  inset-inline-start: -2.25rem;
  top: 50%;
  width: 10.5rem;
  height: 10.5rem;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0.13;
  transform: translateY(-50%) rotate(-14deg);
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.currency-watermark--end {
  inset-inline-start: auto;
  inset-inline-end: -2.25rem;
  transform: translateY(-50%) rotate(12deg);
}

.trade-pay-panel:hover .currency-watermark,
.trade-receive-panel:hover .currency-watermark {
  opacity: 0.18;
}

.trade-rate-card {
  background: white;
  border-radius: 0.875rem;
  padding: 0.875rem 1.125rem;
  margin-top: 0.875rem;
}

.trade-rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.78125rem;
}

.trade-rate-label {
  color: oklch(0.55 0.015 265);
}

.trade-rate-value {
  font-weight: 700;
  text-align: end;
  color: oklch(0.24 0.015 265);
}

.trade-cta {
  width: 100%;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5625rem;
  border: none;
  padding: 0.875rem 0;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  background: oklch(0.93 0.006 265);
  color: oklch(0.6 0.015 265);
  transition:
    background 0.2s ease,
    transform 0.16s ease;
}

.trade-cta:hover {
  color: oklch(0.6 0.015 265);
}

/* Ready is the only state that looks pressable — until then the box is a
   quote, and the button says what is missing rather than inviting a click. */
.trade-cta--ready {
  background: oklch(0.68 0.18 25);
  color: white;
  box-shadow: 0 6px 18px oklch(0.68 0.18 25 / 0.28);
}

.trade-cta--ready:hover {
  transform: translateY(-1px);
  background: oklch(0.6 0.18 25);
  color: white;
}

.trade-rates-hint {
  text-align: center;
  font-size: 0.6875rem;
  line-height: 1.9;
  color: oklch(0.6 0.015 265);
  margin: 0.625rem 0 0;
}

/* ── The currency picker ──────────────────────────────────────────────────
   A rate board of its own: somebody opening it is usually deciding *which*
   currency, and they decide on the numbers. */

.trade-selector-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: oklch(0.2 0.02 265 / 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.trade-selector-card {
  display: flex;
  flex-direction: column;
  width: min(28rem, 100%);
  max-height: min(80vh, 32rem);
  background: white;
  border: 1px solid oklch(0.94 0.006 265);
  border-radius: 0.875rem;
  padding: 0.5rem;
  box-shadow: 0 12px 40px oklch(0.2 0.03 265 / 0.18);
  animation: trade-rise-in 0.2s ease both;
}

.trade-selector-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid oklch(0.965 0.005 265);
  margin-bottom: 0.25rem;
}

.trade-selector-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: oklch(0.55 0.015 265);
}

.trade-selector-unit {
  font-size: 0.625rem;
  font-weight: 600;
  color: oklch(0.62 0.015 265);
}

/* Outside the scrolling list on purpose: hunting for the lira should never
   mean losing the field you were typing in. */
.selector-search {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  margin: 0 0.25rem 0.375rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.625rem;
  background: oklch(0.965 0.005 265);
}

.selector-search__icon {
  flex: none;
  opacity: 0.45;
}

.selector-search__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.78125rem;
  color: oklch(0.24 0.015 265);
}

.selector-search__input::-webkit-search-cancel-button {
  appearance: none;
}

.selector-scroll {
  position: relative;
  display: flex;
  min-height: 0;
}

.selector-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-gutter: stable;
  min-height: 0;
  margin-top: 0.25rem;
}

/* A row half-hidden under a fade is what tells somebody to keep going. Both
   the fade and the arrow are drawn only while there is something below. */
.selector-scroll::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2.5rem;
  pointer-events: none;
  background: linear-gradient(to top, white 20%, transparent);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.selector-scroll:has(.selector-more:not([hidden]))::after {
  opacity: 1;
}

.selector-more {
  position: absolute;
  /* Above the fade, not under it: a cue you cannot see is not a cue. */
  z-index: 1;
  bottom: 0.375rem;
  inset-inline-start: 50%;
  transform: translateX(50%);
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  pointer-events: none;
  background: white;
  color: oklch(0.4 0.15 265);
  box-shadow: 0 2px 8px oklch(0.2 0.03 265 / 0.22);
  animation: selector-more-nudge 1.6s ease-in-out infinite;
}

@keyframes selector-more-nudge {
  0%,
  100% {
    transform: translateX(50%) translateY(0);
  }

  50% {
    transform: translateX(50%) translateY(0.1875rem);
  }
}

/* One grid, used by the head and by every row, so the columns are the same
   columns: the labels are said once at the top instead of on each line. */
.selector-columns,
.trade-selector-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.25rem 5.25rem;
  gap: 0.75rem;
  align-items: center;
}

.selector-columns {
  padding: 0.25rem 0.625rem 0.4375rem;
  margin: 0 0.125rem;
  border-bottom: 1px solid oklch(0.96 0.005 265);
  font-size: 0.625rem;
  font-weight: 700;
  color: oklch(0.62 0.015 265);
}

.selector-columns span:not(:first-child) {
  text-align: end;
}

/* The first column carries two things — the mark and the name — so it is a
   cell of its own rather than two tracks that would drift apart. */
.selector-cell {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  min-width: 0;
}

.selector-name {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  flex: 1;
  min-width: 0;
}

/* One line each, whatever the name: a name that wraps turns a table into a
   paragraph. */
.selector-name .trade-currency-name,
.selector-code {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selector-code {
  font-size: 0.65625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: oklch(0.58 0.015 265);
}

.selector-rate {
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: oklch(0.34 0.015 265);
  text-align: end;
}

.selector-rate--none {
  font-weight: 500;
  color: oklch(0.72 0.015 265);
}

.trade-selector-row .selector-rate:nth-of-type(2) {
  color: oklch(0.4 0.14 265);
}

.trade-selector-row {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0.5625rem 0.625rem;
  border-radius: 0.625rem;
  text-align: start;
  transition:
    background-color 0.14s ease,
    box-shadow 0.14s ease,
    color 0.14s ease;
}

/* A row somebody is about to pick should look picked-able: the whole line
   lifts into the brand colour rather than shading a shade greyer. */
.trade-selector-row:hover,
.trade-selector-row:focus-visible {
  background: oklch(0.4 0.15 265 / 0.07);
  box-shadow: inset 0 0 0 1.5px oklch(0.4 0.15 265 / 0.22);
  outline: none;
}

.trade-selector-row:hover .trade-currency-name,
.trade-selector-row:focus-visible .trade-currency-name {
  color: oklch(0.28 0.09 265);
}

.trade-selector-row:hover .selector-code,
.trade-selector-row:focus-visible .selector-code {
  color: oklch(0.48 0.08 265);
}

.trade-selector-note {
  margin: 0.5rem 0.25rem 0;
  padding-top: 0.5rem;
  border-top: 1px solid oklch(0.96 0.005 265);
  font-size: 0.625rem;
  line-height: 1.8;
  color: oklch(0.62 0.015 265);
}

/* ── The box on a phone ───────────────────────────────────────────────────
   The row stays a row: the pill and the amount share one line at every
   width. Padding and the picker's price columns tighten; the amount is
   already a clamp, and the name ellipsis inside the pill if the two no
   longer both fit at full size. */
@media (max-width: 480px) {
  .hero__card {
    padding: 10px;
  }

  .trade-pay-panel,
  .trade-receive-panel {
    padding-inline: 0.875rem;
  }

  .trade-panel-row {
    gap: 0.5rem;
  }

  .trade-currency-btn {
    gap: 0.375rem;
    padding: 0.5rem 0.625rem;
  }

  .trade-selector-overlay {
    padding: 0.75rem;
  }

  .selector-columns,
  .trade-selector-row {
    grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem;
    gap: 0.5rem;
    padding-inline: 0.5rem;
  }
}

/* One currency's own page: the article opens on the two numbers the visitor
   came for, in the currency's own colour off the board. */
.rate-hero {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 40px) clamp(16px, 4vw, 32px) clamp(24px, 4vw, 44px);
  position: relative;
}

.rate-hero__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 78% 18%,
      color-mix(in srgb, var(--accent) 16%, transparent),
      transparent 58%
    ),
    radial-gradient(circle at 12% 84%, #194b9b12, transparent 55%);
  border-radius: 32px;
  pointer-events: none;
}

.crumbs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #8791a3;
  margin-bottom: clamp(18px, 3vw, 30px);
}

.crumbs a {
  color: #5b6478;
}

.crumbs a:hover {
  color: #194b9b;
}

.rate-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}

.rate-hero h1 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.3;
  font-weight: 800;
  margin: 0 0 18px;
  color: #111729;
}

.rate-hero .eyebrow {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: color-mix(in srgb, var(--accent) 78%, #111729);
}

.rate-hero__lead {
  font-size: 15px;
  line-height: 2;
  color: #5b6478;
  margin: 0 0 26px;
}

.rate-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.rate-board {
  background: #fff;
  border: 1px solid #eceef2;
  border-radius: 20px;
  padding: clamp(20px, 3vw, 26px);
  box-shadow: 0 30px 60px -48px #111d3466;
}

.rate-board__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid #f1f3f6;
  margin-bottom: 18px;
}

.rate-board__name {
  font-size: 16px;
  font-weight: 800;
  color: #1b2436;
}

.rate-board__pair {
  font-size: 12px;
  color: #8791a3;
}

.rate-board__spark {
  margin-inline-start: auto;
  color: var(--accent);
}

.rate-board__quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

/* Buying and selling are the desk's, and they are read at a glance: what we
   pay in green, what we charge in red. */
.rate-quote {
  --quote: #1a8f5a;

  padding: 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--quote) 7%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--quote) 16%, transparent);
}

.rate-quote--sell {
  --quote: #a71c28;
}

.rate-quote__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--quote);
  margin-bottom: 8px;
}

.rate-quote__value {
  font-size: clamp(1.5rem, 3.2vw, 1.9rem);
  font-weight: 800;
  color: #111729;
  line-height: 1.3;
}

.rate-quote__unit {
  font-size: 12.5px;
  color: #8791a3;
  margin-top: 2px;
}

.rate-quote__note {
  font-size: 12.5px;
  color: #5b6478;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, var(--quote) 22%, transparent);
}

.rate-board__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f7f8fa;
  font-size: 13px;
  color: #5b6478;
}

.rate-board__foot strong {
  color: #1b2436;
}

.rate-board__live {
  font-size: 12.5px;
  color: #8791a3;
  margin: 12px 0 0;
  text-align: center;
}

/* The cross rates. A table this wide scrolls inside its own frame rather than
   pushing the page sideways. */
.rate-table {
  overflow-x: auto;
  border: 1px solid #eceef2;
  border-radius: 16px;
  background: #fff;
}

.rate-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 460px;
}

.rate-table th,
.rate-table td {
  text-align: start;
  padding: 14px 16px;
  font-size: 14px;
  color: #1b2436;
  border-bottom: 1px solid #f1f3f6;
}

.rate-table thead th {
  font-size: 12.5px;
  font-weight: 700;
  color: #5b6478;
  background: #fafbfc;
  white-space: nowrap;
}

.rate-table tbody tr:last-child th,
.rate-table tbody tr:last-child td {
  border-bottom: 0;
}

.rate-table tbody th {
  font-weight: 700;
}

.rate-table tbody th > span {
  display: inline-flex;
  flex-direction: column;
}

.rate-table__mark {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  margin-inline-end: 10px;
}

.rate-table tbody th {
  display: flex;
  align-items: center;
}

.rate-table__name {
  font-size: 14px;
}

.rate-table__code {
  font-size: 11.5px;
  font-weight: 400;
  color: #8791a3;
}

.rate-table td {
  font-weight: 700;
  white-space: nowrap;
}

.rate-table td span {
  font-size: 12px;
  font-weight: 400;
  color: #8791a3;
}

.rate-table__note {
  font-size: 13px;
  line-height: 2;
  color: #8791a3;
  margin: 14px 0 0;
}

.related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.related-links__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid #eceef2;
  background: #fff;
  font-size: 13.5px;
  font-weight: 700;
  color: #1b2436;
}

.related-links__item:hover {
  border-color: #194b9b33;
  color: #194b9b;
}

.related-links__item--board {
  background: #194b9b0d;
  border-color: #194b9b1f;
  color: #194b9b;
}

@media (prefers-reduced-motion: reduce) {
  .currency-watermark,
  .selector-more,
  .trade-selector-card,
  .trade-panel--swap-a,
  .trade-panel--swap-b,
  .trade-swap-btn--spin {
    animation: none;
    transition: none;
  }
}

.code-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #194b9b10;
  color: #194b9b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

/* The flag artwork is already masked to a circle; the hairline keeps the pale
   flags — the dirham, the lira's white field — off a white card. */
.currency-mark {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  border: 1px solid #1b24361a;
}

.section {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(30px, 5vw, 60px) clamp(16px, 4vw, 32px);
}

.section--narrow {
  max-width: 840px;
}

.section__intro {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 44px;
}

.section__intro h2,
.cta-banner h2 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  margin: 0 0 12px;
  color: #111729;
}

.section__intro p {
  font-size: 15px;
  color: #5b6478;
  line-height: 1.8;
  margin: 0;
}

/* The minute the board was set. Quieter than the lead above it — it is a
   footnote to a reader and a fact to everything else. */
.section__intro p.section__updated {
  font-size: 13px;
  color: #8791a3;
  margin-top: 10px;
}

.section__updated time {
  font-variant-numeric: tabular-nums;
}

.currency-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.currency-card,
.feature-card {
  background: #fff;
  border: 1px solid #eceef2;
  border-radius: 16px;
}

.currency-card {
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

/* The currency's own flag, blown up and faded into the corner of its card.
   It is decoration under the numbers, so the content layers sit above it. */
.currency-card__ghost {
  position: absolute;
  inset-inline-start: -46px;
  bottom: -52px;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  opacity: 0.09;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.currency-card__head,
.currency-card__labels,
.currency-card__prices {
  position: relative;
}

.currency-card:hover {
  transform: translateY(-3px);
  border-color: #194b9b33;
  box-shadow: 0 12px 26px -18px #111d3459;
}

.currency-card:hover .currency-card__ghost {
  opacity: 0.16;
  transform: scale(1.06);
}

.currency-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.currency-card__name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.currency-card__name > div > div:first-child {
  font-size: 14.5px;
  font-weight: 700;
  color: #1b2436;
}

.currency-card__pair {
  font-size: 11.5px;
  color: #8791a3;
}

.currency-card .code-mark {
  width: 38px;
  height: 38px;
  font-size: 12.5px;
}

.currency-card .currency-mark {
  width: 38px;
  height: 38px;
}

.currency-card__labels,
.currency-card__prices {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* The link to the currency's own page covers its whole card, so the card is
   the target and the words are what says so. */
.currency-card__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f1f3f6;
  width: 100%;
  font-size: 13px;
  font-weight: 700;
  color: #194b9b;
}

.currency-card__link::after {
  content: '';
  position: absolute;
  inset: -1000px;
}

.currency-card__link span {
  margin-inline-start: auto;
  transition: transform 0.18s ease;
}

.currency-card:hover .currency-card__link span {
  transform: translateX(-4px);
}

.currency-card__labels {
  font-size: 13px;
  color: #8791a3;
  margin-bottom: 4px;
}

.currency-card__prices span {
  font-size: 15px;
  font-weight: 700;
  color: #1b2436;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.feature-card {
  /* Each card on the landing page overrides this with its own; the contact
     page's channels keep the brand blue. */
  --accent: #194b9b;

  padding: 26px;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

/* A single brand wash behind the mark: the section stays flat, but the cards
   are not bare white rectangles. */
.feature-card::before {
  content: '';
  position: absolute;
  inset-inline-start: -54px;
  top: -66px;
  width: 176px;
  height: 176px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent) 9%, transparent),
    transparent 70%
  );
  pointer-events: none;
}

.feature-card__icon,
.feature-card__media,
.feature-card__title,
.feature-card p {
  position: relative;
}

.feature-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
  box-shadow: 0 12px 26px -18px #111d3459;
}

.feature-card__icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--accent) 12%, transparent),
    color-mix(in srgb, var(--accent) 3%, transparent)
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: transform 0.18s ease;
}

.feature-card:hover .feature-card__icon {
  transform: scale(1.05);
}

.feature-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.feature-card h3 {
  font-size: 16.5px;
  font-weight: 700;
  color: #1b2436;
  margin: 0;
}

.feature-card p {
  font-size: 14px;
  color: #5b6478;
  line-height: 1.8;
  margin: 0;
}

/* The band across the top of a feature card: one shape, six pictures. The
   band and everything drawn in it read the card's own --accent, so the grid
   holds together while no two cards look alike. */
.feature-card__media {
  height: 118px;
  margin-bottom: 18px;
  border-radius: 12px;
  overflow: hidden;
  color: var(--accent);
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--accent) 16%, #fff),
    color-mix(in srgb, var(--accent) 4%, #fff)
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* Every layer of a picture is stacked in the middle of the band. */
.feature-viz {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.feature-viz > * {
  grid-area: 1 / 1;
}

.feature-viz__glyph {
  /* The mark in the middle is the point of the band: it stays at full
     strength and above every layer moving behind it, hover or no hover. */
  position: relative;
  z-index: 2;
  color: var(--accent);
  transition: transform 0.18s ease;
}

.feature-card:hover .feature-viz__glyph {
  transform: scale(1.06);
}

/* A glyph that sits on its own picture needs the picture to stop under it. */
.feature-viz__glyph--halo {
  box-sizing: content-box;
  padding: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent),
    0 10px 22px -12px #111d3480;
}

/* Security: the shield, with the checks going out from it. */
.feature-viz__pulse {
  position: relative;
  width: 58px;
  height: 58px;
}

.feature-viz__pulse span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  animation: feature-pulse 3.3s ease-out infinite;
}

.feature-viz__pulse span:nth-child(2) {
  animation-delay: 1.1s;
}

.feature-viz__pulse span:nth-child(3) {
  animation-delay: 2.2s;
}

@keyframes feature-pulse {
  from {
    transform: scale(0.7);
    opacity: 0.55;
  }

  to {
    transform: scale(2);
    opacity: 0;
  }
}

/* Privacy: a page of details nobody else gets to read. */
.feature-viz__doc {
  width: 150px;
  padding: 15px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 22px -18px #111d3499;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.feature-viz__line {
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 30%, #fff);
  filter: blur(2.4px);
}

.feature-viz__line--short {
  width: 62%;
}

.feature-viz__scan {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent) 22%, transparent),
    transparent
  );
  animation: feature-scan 3.6s ease-in-out infinite;
}

@keyframes feature-scan {
  from {
    transform: translateX(-130%);
  }

  to {
    transform: translateX(130%);
  }
}

/* The board: the marks of every currency the desk trades, passing through. */
/* The mask is the whole band, not the height of the line: a mark that drifts
   above or below the row is clipped by the card's own edge, not cut off in
   mid-air. */
.feature-viz__marquee {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  /* The line leaves the band rather than stopping at its edge. */
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.feature-viz__row {
  display: flex;
  /* The line is wider than the band and stays that way: a flex item that is
     allowed to shrink would be squeezed back to the band's width. */
  flex: none;
  width: max-content;
  animation: feature-marquee 20s linear infinite;
}

.feature-viz__set {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-inline-end: 26px;
}

/* Each mark bobs on its own clock while the line carries it past. */
.feature-viz__float {
  display: flex;
  align-items: center;
  opacity: var(--mark-fade, 1);
  animation: feature-float var(--float-time, 5s) ease-in-out var(--float-delay, 0s)
    infinite alternate;
}

.feature-viz__mark {
  width: var(--mark-size, 30px);
  height: var(--mark-size, 30px);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px #ffffffcc,
    0 8px 16px -12px #111d3499;
}

@keyframes feature-float {
  from {
    transform: translateY(calc(var(--float-shift, 10px) * -0.5));
  }

  to {
    transform: translateY(calc(var(--float-shift, 10px) * 0.5));
  }
}

.feature-viz__mark--code {
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent);
  background: #fff;
}

/* The set is printed three times, so sliding one of them over lands the line
   exactly where it started and the marks never run out. The page is
   right-to-left: the track hangs off to the left of the band, so it travels
   right to bring the next set in. */
@keyframes feature-marquee {
  to {
    transform: translateX(33.3333%);
  }
}

/* Speed: the bolt, with the page going past it. */
.feature-viz__streaks {
  position: absolute;
  inset: 0;
}

.feature-viz__streaks span {
  position: absolute;
  inset-inline-start: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent) 45%, transparent)
  );
  animation: feature-streak 2.4s ease-in-out infinite;
}

.feature-viz__streaks span:nth-child(1) {
  top: 22px;
  width: 34%;
}

.feature-viz__streaks span:nth-child(2) {
  top: 44px;
  width: 46%;
  animation-delay: 0.45s;
}

.feature-viz__streaks span:nth-child(3) {
  top: 70px;
  width: 40%;
  animation-delay: 0.9s;
}

.feature-viz__streaks span:nth-child(4) {
  top: 92px;
  width: 28%;
  animation-delay: 1.35s;
}

@keyframes feature-streak {
  0% {
    transform: translateX(70%);
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    transform: translateX(-280%);
    opacity: 0;
  }
}

/* The rate: the market moving, and the number the request is held at. */
.feature-viz__chart,
.feature-viz__trend {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.feature-viz__jitter {
  stroke: color-mix(in srgb, var(--accent) 28%, transparent);
  stroke-dasharray: 3 5;
}

.feature-viz__locked {
  stroke: var(--accent);
  animation: feature-dash 1.8s linear infinite;
}

@keyframes feature-dash {
  to {
    /* Two dashes on, so the line comes back to where it was. */
    stroke-dashoffset: -26;
  }
}

/* Investing: the balance kept, and what it is kept for. */
.feature-viz__bars {
  position: absolute;
  inset-inline: 26px;
  bottom: 16px;
  height: 70px;
  display: flex;
  align-items: flex-end;
  gap: 9px;
}

.feature-viz__bars span {
  flex: 1;
  border-radius: 6px 6px 0 0;
  transform-origin: bottom;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 52%, transparent),
    color-mix(in srgb, var(--accent) 14%, transparent)
  );
  animation: feature-bar 3.4s ease-in-out infinite alternate;
}

.feature-viz__bars span:nth-child(1) {
  height: 34%;
}

.feature-viz__bars span:nth-child(2) {
  height: 52%;
  animation-delay: 0.2s;
}

.feature-viz__bars span:nth-child(3) {
  height: 44%;
  animation-delay: 0.4s;
}

.feature-viz__bars span:nth-child(4) {
  height: 74%;
  animation-delay: 0.6s;
}

.feature-viz__bars span:nth-child(5) {
  height: 96%;
  animation-delay: 0.8s;
}

@keyframes feature-bar {
  from {
    transform: scaleY(0.55);
  }

  to {
    transform: scaleY(1);
  }
}

.feature-viz__trend polyline {
  stroke: var(--accent);
}

.badge {
  font-size: 11px;
  font-weight: 700;
  color: #a71c28;
  background: #a71c2812;
  padding: 2px 8px;
  border-radius: 999px;
}

/* ── The four steps ──────────────────────────────────────────────────────
   Drawn as the thing it is: four stations on a dashed line with a signal
   running between them, lighting each one as it arrives. It is the gesture the
   globe makes overhead — a route, a signal along it, a ring where it lands —
   brought down onto the page and straightened out.

   The line is cut per card rather than run under the row, so no rule here has
   to know how wide a column is; and the same two layers turn from a row into a
   column at the breakpoint by being measured the other way.

   Which way the signal travels is the one thing the page's direction decides,
   and a background position is not a logical property, so it is named here
   once and read from the keyframes. */
:root {
  --run-from: 0%;
  --run-to: 100%;
}

[dir='rtl'] {
  --run-from: 100%;
  --run-to: 0%;
}

.step-grid {
  --gap: 24px;

  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.step-card {
  --beat: 0s;

  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 2px 16px;
  padding-bottom: 30px;
}

.step-card:last-child {
  padding-bottom: 0;
}

/* Each card starts a beat after the one before it — and is reached by the
   signal a beat after it, which is the same order counted in seconds. */
.step-card:nth-child(2) {
  --beat: 1.5s;
  --reveal-delay: 0.09s;
}

.step-card:nth-child(3) {
  --beat: 3s;
  --reveal-delay: 0.18s;
}

.step-card:nth-child(4) {
  --beat: 4.5s;
  --reveal-delay: 0.27s;
}

/* The rail to the next station, and the signal on it. */
.step-card::before,
.step-card::after {
  content: '';
  position: absolute;
  top: 52px;
  bottom: 6px;
}

.step-card::before {
  inset-inline-start: 22px;
  width: 2px;
  background-image: repeating-linear-gradient(
    to bottom,
    #c9d4e6 0 5px,
    transparent 5px 12px
  );
}

.step-card::after {
  inset-inline-start: 18px;
  width: 10px;
  background-image: radial-gradient(
    closest-side,
    #ffffff 0%,
    #3178e0 38%,
    #3178e000 100%
  );
  background-size: 10px 20px;
  background-repeat: no-repeat;
  background-position: 50% var(--run-from);
  animation: step-signal-down 6s linear infinite;
  animation-delay: var(--beat);
}

/* Nothing leaves the last station: it is where the money arrives. */
.step-card:last-child::before,
.step-card:last-child::after {
  display: none;
}

@keyframes step-signal-down {
  0% {
    background-position: 50% 0%;
    opacity: 0;
  }

  2% {
    opacity: 1;
  }

  23% {
    opacity: 1;
  }

  25% {
    background-position: 50% 100%;
    opacity: 0;
  }

  100% {
    background-position: 50% 100%;
    opacity: 0;
  }
}

.step-card__n {
  grid-row: span 2;
  align-self: start;
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(152deg, #3178e0, #194b9b 58%, #123a7a);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15.5px;
  font-weight: 800;
  /* The outer ring is the page's own colour: it is what the rail stops at
     rather than runs through. */
  box-shadow:
    0 0 0 5px #f7f7f9,
    0 10px 20px -12px #194b9bcc;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

/* The ring the station puts out as the signal reaches it. */
.step-card__n::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: step-station 6s ease-out infinite;
  animation-delay: var(--beat);
}

@keyframes step-station {
  0% {
    box-shadow: 0 0 0 0 #3178e07a;
  }

  14% {
    box-shadow: 0 0 0 13px #3178e000;
  }

  100% {
    box-shadow: 0 0 0 0 #3178e000;
  }
}

.step-card:hover .step-card__n {
  transform: scale(1.06);
  box-shadow:
    0 0 0 5px #f7f7f9,
    0 12px 24px -12px #194b9bcc;
}

/* Wide enough for the four of them, and the route lies down across the row. */
@media (min-width: 900px) {
  .step-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
  }

  .step-card {
    display: block;
    text-align: center;
    padding-bottom: 0;
  }

  .step-card__n {
    margin: 0 auto 18px;
  }

  .step-card::before,
  .step-card::after {
    /* From the middle of this station to the middle of the next one, which is
       one column and one gap away, less the room the two rings take. */
    top: 23px;
    bottom: auto;
    inset-inline-start: calc(50% + 29px);
    width: calc(100% + var(--gap) - 58px);
  }

  .step-card::before {
    height: 2px;
    margin-top: -1px;
    background-image: repeating-linear-gradient(
      to right,
      #c9d4e6 0 5px,
      transparent 5px 12px
    );
  }

  .step-card::after {
    height: 10px;
    margin-top: -5px;
    background-size: 20px 10px;
    background-position: var(--run-from) 50%;
    animation-name: step-signal-across;
  }
}

@keyframes step-signal-across {
  0% {
    background-position: var(--run-from) 50%;
    opacity: 0;
  }

  2% {
    opacity: 1;
  }

  23% {
    opacity: 1;
  }

  25% {
    background-position: var(--run-to) 50%;
    opacity: 0;
  }

  100% {
    background-position: var(--run-to) 50%;
    opacity: 0;
  }
}

/* Asked for less motion, the route is a route and stands still. */
@media (prefers-reduced-motion: reduce) {
  .step-card::after {
    display: none;
  }

  .step-card__n::after {
    animation: none;
  }
}

/* The reveal: the script arms the group, so the cards are only ever hidden
   while there is something running that will bring them back. The played-out
   state is left to the plain rules above — `backwards` fills the wait before
   each card's turn and then lets go, so hovering still moves the badge. */
[data-reveal].is-armed:not(.is-revealed) > * {
  opacity: 0;
}

[data-reveal].is-armed:not(.is-revealed) .step-card__n {
  transform: scale(0.78);
}

[data-reveal].is-revealed > * {
  animation: reveal-rise 0.5s cubic-bezier(0.22, 0.8, 0.3, 1) var(--reveal-delay, 0s) backwards;
}

[data-reveal].is-revealed .step-card__n {
  animation: reveal-pop 0.5s cubic-bezier(0.34, 1.4, 0.5, 1) var(--reveal-delay, 0s) backwards;
}

@keyframes reveal-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes reveal-pop {
  from {
    transform: scale(0.78);
  }
}

.step-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: #1b2436;
  margin: 0 0 8px;
}

.step-card p {
  font-size: 13.5px;
  color: #5b6478;
  line-height: 1.8;
  margin: 0;
}

/* The standing pages — the terms, the privacy policy, the contact page. One
   column of reading width, with the clauses addressable one by one. */
.doc {
  padding-top: clamp(30px, 5vw, 56px);
}

.doc__head {
  margin-bottom: 30px;
}

.doc h1 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 800;
  color: #111729;
  margin: 0 0 14px;
  line-height: 1.35;
}

.doc__lead {
  font-size: 15.5px;
  line-height: 2;
  color: #5b6478;
  margin: 0;
}

.doc__updated {
  font-size: 13px;
  color: #8791a3;
  margin: 14px 0 0;
}

.doc__toc {
  background: #fff;
  border: 1px solid #eceef2;
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 34px;
}

.doc__toc-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #1b2436;
  margin-bottom: 12px;
}

.doc__toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px 24px;
}

.doc__toc a {
  font-size: 13.5px;
  color: #5b6478;
  line-height: 1.8;
}

.doc__toc a:hover {
  color: #194b9b;
}

.doc__section {
  /* The anchor lands below the header rather than under it. */
  scroll-margin-top: 90px;
  margin-bottom: 30px;
}

.doc__section h2,
.doc__heading {
  font-size: 17px;
  font-weight: 700;
  color: #1b2436;
  margin: 0 0 12px;
  line-height: 1.7;
}

.doc__heading {
  margin-top: 8px;
}

.doc__section p {
  font-size: 14.5px;
  line-height: 2.1;
  color: #5b6478;
  margin: 0 0 12px;
}

.doc__section ul {
  margin: 0;
  padding-inline-start: 20px;
}

.doc__section li {
  font-size: 14.5px;
  line-height: 2.1;
  color: #5b6478;
  margin-bottom: 8px;
}

/* The one block on these pages a visitor is meant to stop at: what we will
   never ask them for. */
.doc__section--warn {
  background: #a71c2809;
  border: 1px solid #a71c281f;
  border-radius: 16px;
  padding: 22px 24px;
}

.doc__section--warn h2 {
  color: #a71c28;
}

.doc__footnote {
  font-size: 13.5px;
  line-height: 2;
  color: #8791a3;
  border-top: 1px solid #eceef2;
  padding-top: 20px;
  margin: 34px 0 0;
}

.channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 34px;
}

.channel-card {
  display: flex;
  flex-direction: column;
}

.channel-card__action {
  margin-top: auto;
  padding-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #194b9b;
  position: relative;
}

.channel-card__action span {
  transition: transform 0.18s ease;
}

.channel-card:hover .channel-card__action span {
  transform: translateX(-4px);
}

/* ── The four facts ───────────────────────────────────────────────────────
   The one band of night in the middle of the page, and the hero's night: the
   same deep blue lit from a corner, the same glass the swap box floats on, and
   a lit dot on every card of the sort the globe puts on a city. It is read
   after the rates and before the questions, so it is four short claims on four
   panes rather than four paragraphs on a slab.

   The light lines along the top and foot are what keep it from reading as a
   hole cut in the page: the band arrives and leaves on an edge of its own
   rather than on the white simply stopping. */
.trust-band {
  position: relative;
  margin: clamp(30px, 5vw, 60px) 0;
  background:
    radial-gradient(78% 120% at 82% 0%, #1b4a95 0%, transparent 58%),
    radial-gradient(68% 120% at 8% 100%, #102c5e 0%, transparent 56%),
    linear-gradient(180deg, #0a1c3e 0%, #08152f 100%);
}

.trust-band::before,
.trust-band::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    #ffffff2b 20%,
    #ffffff2b 80%,
    transparent
  );
}

.trust-band::before {
  top: 0;
}

.trust-band::after {
  bottom: 0;
}

.trust-band__inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(34px, 5vw, 52px) clamp(16px, 4vw, 32px);
  display: grid;
  /* Two across rather than four: four made four columns of a sentence each,
     and a claim reads better on one line than on three. */
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 760px) {
  .trust-band__inner {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
}

/* A pane each, lit in its own colour from the corner. The colours are the
   feature cards' own, lightened until they carry on a dark ground. */
.trust-card {
  --trust: #5b9cff;

  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6px 15px;
  padding: 20px 20px 22px;
  border-radius: 18px;
  background:
    radial-gradient(
      118% 100% at 100% 0%,
      color-mix(in srgb, var(--trust) 17%, transparent),
      transparent 62%
    ),
    linear-gradient(158deg, #ffffff12, #ffffff06 58%, #ffffff03);
  box-shadow: inset 0 0 0 1px #ffffff14;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease;
}

.trust-card:nth-child(2) {
  --trust: #3ddc9a;
}

.trust-card:nth-child(3) {
  --trust: #ffb457;
}

.trust-card:nth-child(4) {
  --trust: #b58cff;
}

/* The light that crosses the pane once as the cursor arrives. It is given no
   transition at rest, so it snaps back to its corner instead of sweeping
   backwards on the way out. */
.trust-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    104deg,
    transparent 42%,
    #ffffff14 48%,
    #ffffff21 50%,
    #ffffff14 52%,
    transparent 58%
  );
  background-size: 240% 100%;
  background-position: 132% 0;
}

.trust-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--trust) 40%, #ffffff1f),
    0 22px 38px -26px #01081c;
}

.trust-card:hover::after {
  background-position: -32% 0;
  transition: background-position 0.9s ease;
}

.trust-card__icon {
  grid-row: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: var(--trust);
  background: color-mix(in srgb, var(--trust) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--trust) 26%, transparent);
  transition:
    transform 0.22s ease,
    color 0.22s ease,
    background-color 0.22s ease,
    box-shadow 0.22s ease;
}

.trust-card:hover .trust-card__icon {
  transform: scale(1.07);
  color: #fff;
  background: color-mix(in srgb, var(--trust) 62%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--trust) 70%, transparent),
    0 10px 22px -12px color-mix(in srgb, var(--trust) 70%, transparent);
}

.trust-band__title {
  align-self: end;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.trust-band__desc {
  align-self: start;
  font-size: 13.5px;
  color: #9fb0cc;
  line-height: 1.8;
}

@media (prefers-reduced-motion: reduce) {
  .trust-card,
  .trust-card::after,
  .trust-card__icon {
    transition: none;
  }
}

.faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #e6e8ee;
}

.faq-list details {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 28px 8px;
  border-bottom: 1px solid #e6e8ee;
  min-width: 0;
}

.faq-list details:nth-child(odd) {
  padding-inline-end: 40px;
  border-inline-end: 1px solid #e6e8ee;
}

.faq-list details:nth-child(even) {
  padding-inline-start: 40px;
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 16px;
  font-weight: 700;
  color: #111729;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::marker {
  content: '';
}

.faq-list__q {
  flex: 1;
  min-width: 0;
  text-align: start;
  line-height: 1.7;
}

.faq-list__icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
  color: #111729;
}

.faq-list__icon::before,
.faq-list__icon::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
  border-radius: 1px;
}

.faq-list__icon::before {
  width: 14px;
  height: 1.5px;
}

.faq-list__icon::after {
  width: 1.5px;
  height: 14px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.faq-list details[open] .faq-list__icon::after {
  transform: scaleY(0);
  opacity: 0;
}

.faq-list summary:focus {
  outline: none;
}

.faq-list summary:focus-visible {
  outline: 2px solid #194b9b;
  outline-offset: 6px;
  border-radius: 4px;
}

.faq-list p {
  font-size: 14.5px;
  color: #5b6478;
  line-height: 1.9;
  margin: 12px 0 0;
  padding-inline-end: 34px;
}

@media (max-width: 720px) {
  .faq-list {
    grid-template-columns: 1fr;
  }

  .faq-list details,
  .faq-list details:nth-child(odd),
  .faq-list details:nth-child(even) {
    padding: 22px 0;
    border-inline-end: 0;
  }
}

.cta-wrap {
  max-width: 1240px;
  margin: 0 auto clamp(30px, 5vw, 60px);
  padding: 0 clamp(16px, 4vw, 32px);
}

.cta-banner {
  background: linear-gradient(120deg, #194b9b, #12356f);
  border-radius: 24px;
  padding: clamp(36px, 5vw, 56px);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* The same squares the hero is ruled into, but nobody points at these: app.js
   lights a handful of them at a time on its own, a few a shade brighter than
   the banner and a few a shade darker, and each one takes seconds to arrive
   and to leave. The ruling is the container's own background, as in the hero,
   so a line is drawn once between two squares; the mask thins the whole thing
   out towards the edges so it never reaches the rounded corners. */
.cta-banner__grid {
  --cta-cell: 44px;

  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--cta-columns, 12), 1fr);
  grid-auto-rows: var(--cta-cell);
  background-image:
    linear-gradient(to right, transparent calc(100% - 1px), #ffffff12 calc(100% - 1px)),
    linear-gradient(to bottom, transparent calc(100% - 1px), #ffffff12 calc(100% - 1px));
  background-size: calc(100% / var(--cta-columns, 12)) 100%, 100% var(--cta-cell);
  pointer-events: none;
  mask-image: radial-gradient(115% 115% at 50% 50%, #000 26%, transparent 86%);
  -webkit-mask-image: radial-gradient(115% 115% at 50% 50%, #000 26%, transparent 86%);
}

.cta-banner__grid span {
  /* Nothing here is in a hurry, in either direction: a square is two and a
     half seconds arriving and the same going, which is what keeps the drift
     from reading as blinking. */
  transition:
    background-color 2.5s ease-in-out,
    box-shadow 2.5s ease-in-out;
  /* How far this particular square goes; app.js hands each one its own. */
  opacity: var(--drift, 1);
}

.cta-banner__grid span.is-glow {
  background-color: #ffffff21;
  box-shadow:
    inset 0 0 0 1px #ffffff2b,
    0 0 26px #ffffff17;
}

.cta-banner__grid span.is-shade {
  background-color: #06152e33;
}

/* The words sit above the squares. */
.cta-banner__copy {
  position: relative;
}

.cta-banner h2 {
  color: #fff;
  margin-bottom: 14px;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.cta-banner p {
  font-size: 15px;
  color: #c9d5ec;
  margin: 0 0 26px;
}

.site-footer {
  background: #0d1729;
}

.site-footer__grid {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 60px) clamp(16px, 4vw, 32px) 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 32px;
}

.site-footer__about {
  font-size: 13.5px;
  color: #8b96ad;
  line-height: 1.9;
  max-width: 280px;
  margin: 14px 0 0;
}

.site-footer__heading {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
  color: #8b96ad;
}

.site-footer__links a {
  color: #8b96ad;
}

.site-footer__copy {
  border-top: 1px solid #1c2a44;
  padding: 18px clamp(16px, 4vw, 32px);
  text-align: center;
  font-size: 12.5px;
  color: #5f6a80;
}

/* One currency's own page: the article opens on the two numbers the visitor
   came for, in the currency's own colour off the board. */
.rate-hero {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 40px) clamp(16px, 4vw, 32px) clamp(24px, 4vw, 44px);
  position: relative;
}

.rate-hero__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 78% 18%,
      color-mix(in srgb, var(--accent) 16%, transparent),
      transparent 58%
    ),
    radial-gradient(circle at 12% 84%, #194b9b12, transparent 55%);
  border-radius: 32px;
  pointer-events: none;
}

.crumbs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #8791a3;
  margin-bottom: clamp(18px, 3vw, 30px);
}

.crumbs a {
  color: #5b6478;
}

.crumbs a:hover {
  color: #194b9b;
}

.rate-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}

.rate-hero h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.3;
  font-weight: 800;
  margin: 0 0 18px;
  color: #111729;
}

.rate-hero .eyebrow {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: color-mix(in srgb, var(--accent) 78%, #111729);
}

.rate-hero__lead {
  font-size: 15px;
  line-height: 2;
  color: #5b6478;
  margin: 0 0 26px;
}

.rate-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.rate-board {
  background: #fff;
  border: 1px solid #eceef2;
  border-radius: 20px;
  padding: clamp(20px, 3vw, 26px);
  box-shadow: 0 30px 60px -48px #111d3466;
}

.rate-board__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid #f1f3f6;
  margin-bottom: 18px;
}

.rate-board__name {
  font-size: 16px;
  font-weight: 800;
  color: #1b2436;
}

.rate-board__pair {
  font-size: 12px;
  color: #8791a3;
}

.rate-board__spark {
  margin-inline-start: auto;
  color: var(--accent);
}

.rate-board__quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

/* Buying and selling are the desk's, and they are read at a glance: what we
   pay in green, what we charge in red. */
.rate-quote {
  --quote: #1a8f5a;

  padding: 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--quote) 7%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--quote) 16%, transparent);
}

.rate-quote--sell {
  --quote: #a71c28;
}

.rate-quote__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--quote);
  margin-bottom: 8px;
}

.rate-quote__value {
  font-size: clamp(1.5rem, 3.2vw, 1.9rem);
  font-weight: 800;
  color: #111729;
  line-height: 1.3;
}

.rate-quote__unit {
  font-size: 12.5px;
  color: #8791a3;
  margin-top: 2px;
}

.rate-quote__note {
  font-size: 12.5px;
  color: #5b6478;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, var(--quote) 22%, transparent);
}

.rate-board__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f7f8fa;
  font-size: 13px;
  color: #5b6478;
}

.rate-board__foot strong {
  color: #1b2436;
}

.rate-board__live {
  font-size: 12.5px;
  color: #8791a3;
  margin: 12px 0 0;
  text-align: center;
}

/* The cross rates. A table this wide scrolls inside its own frame rather than
   pushing the page sideways. */
.rate-table {
  overflow-x: auto;
  border: 1px solid #eceef2;
  border-radius: 16px;
  background: #fff;
}

.rate-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 460px;
}

.rate-table th,
.rate-table td {
  text-align: start;
  padding: 14px 16px;
  font-size: 14px;
  color: #1b2436;
  border-bottom: 1px solid #f1f3f6;
}

.rate-table thead th {
  font-size: 12.5px;
  font-weight: 700;
  color: #5b6478;
  background: #fafbfc;
  white-space: nowrap;
}

.rate-table tbody tr:last-child th,
.rate-table tbody tr:last-child td {
  border-bottom: 0;
}

.rate-table tbody th {
  font-weight: 700;
}

.rate-table tbody th > span {
  display: inline-flex;
  flex-direction: column;
}

.rate-table__mark {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  margin-inline-end: 10px;
}

.rate-table tbody th {
  display: flex;
  align-items: center;
}

.rate-table__name {
  font-size: 14px;
}

.rate-table__code {
  font-size: 11.5px;
  font-weight: 400;
  color: #8791a3;
}

.rate-table td {
  font-weight: 700;
  white-space: nowrap;
}

.rate-table td span {
  font-size: 12px;
  font-weight: 400;
  color: #8791a3;
}

.rate-table__note {
  font-size: 13px;
  line-height: 2;
  color: #8791a3;
  margin: 14px 0 0;
}

.related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.related-links__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid #eceef2;
  background: #fff;
  font-size: 13.5px;
  font-weight: 700;
  color: #1b2436;
}

.related-links__item:hover {
  border-color: #194b9b33;
  color: #194b9b;
}

.related-links__item--board {
  background: #194b9b0d;
  border-color: #194b9b1f;
  color: #194b9b;
}

@media (prefers-reduced-motion: reduce) {
  .channel-card__action span,
  .currency-card__link span,
  .hero__grid span,
  .currency-card,
  .currency-card__ghost,
  .feature-card,
  .feature-card__icon,
  .feature-viz__glyph,
  .step-card__n,
  .faq-list__icon::after {
    transition: none;
  }

  /* The feature bands stand still: the picture is the point, not the motion. */
  .feature-viz__pulse span,
  .feature-viz__scan,
  .feature-viz__row,
  .feature-viz__float,
  .feature-viz__streaks span,
  .feature-viz__locked,
  .feature-viz__bars span {
    animation: none;
  }
}