/* Perebrim Lite · one stylesheet, no scripts.
   Colours follow Perebrim/BRANDKIT.md: blue is the accent, green is
   decorative only and never sits next to a rate. */

:root {
  --ground: #fbfbfc;
  --panel: #ffffff;
  --panel-2: #f4f5f8;
  --line: #e0e3ea;
  --line-strong: #c4c9d4;
  --text: #14171c;
  --text-dim: #3d4450;
  --muted: #5f6773;
  --accent: #2027c7;
  --accent-deep: #141986;
  --accent-tint: #eceefc;
  --accent-tint-strong: #dde1fb;
  /* Brand green: decoration only. Never on the rate board, never beside a rate. */
  --green: #27761f;
  --on-accent: #ffffff;
  --shadow: 0 1px 2px rgba(20, 23, 28, 0.04), 0 8px 24px rgba(20, 23, 28, 0.05);
  --shadow-raised: 0 1px 2px rgba(20, 23, 28, 0.05), 0 18px 48px -12px rgba(20, 23, 28, 0.16);
  --btn-shadow: 0 1px 2px rgba(20, 25, 134, 0.18), 0 8px 18px -8px rgba(32, 39, 199, 0.55);

  --col-sell: #f3f4fe;

  /* Decorative washes (blue only) */
  --glow: rgba(32, 39, 199, 0.16);
  --head-wash: rgba(32, 39, 199, 0.07);
  --head-ring: rgba(32, 39, 199, 0.12);

  /* Depth: the slab edge, the lifted ledger row, the scene's grid floor */
  --edge: #d9ddf0;
  --edge-deep: #c3c9e6;
  --slab-shadow: 0 30px 60px -30px rgba(20, 25, 134, 0.35);
  --lift-shadow: 0 2px 4px rgba(20, 23, 28, 0.05), 0 22px 40px -18px rgba(20, 25, 134, 0.45);
  --floor-line: rgba(32, 39, 199, 0.16);
  --header-glass: rgba(251, 251, 252, 0.78);

  /* Chart */
  --chart-grid: #e8eaf0;
  --chart-sell: #2027c7;
  --chart-buy: #5f6773;
  --chart-area: rgba(32, 39, 199, 0.14);
  --chart-band: rgba(32, 39, 199, 0.07);


  /* The hero coins are objects, not surfaces: gold in both themes,
     declared once, never flipped. The faces are photographs
     (assets/coins/); these colours are only for the milled edge, sampled
     from the same photograph. */
  --coin-edge: #b8862a;
  --coin-edge-dark: #5e3f0e;
  --coin-sheen: rgba(255, 244, 214, 0.5);

  --font-display: "Sora", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --shell: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 12px;
  --card-pad: clamp(1.15rem, 4vw, 1.5rem);

  /* Motion. Everything that moves lives in the
     prefers-reduced-motion: no-preference block at the end. */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-hover: 180ms;
  --dur-enter: 560ms;
  --dur-card: 640ms;
  --dur-head: 400ms;
  --dur-page: 240ms;
  --stagger: 70ms;
  --rise: 14px;
  --lift: -2px;
  --nudge: 3px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0a0b0d;
    --panel: #121417;
    --panel-2: #1a1d22;
    --line: #24282f;
    --line-strong: #3a414c;
    --text: #edeff3;
    --text-dim: #b4b9c3;
    --muted: #8f97a4;
    --accent: #8b9cff;
    --accent-deep: #c9d2ff;
    --accent-tint: #181c33;
    --accent-tint-strong: #232a4d;
    --green: #4fbf48;
    --on-accent: #0a0b0d;
    --shadow: none;
    --shadow-raised: 0 18px 48px -16px rgba(0, 0, 0, 0.7);
    --btn-shadow: none;

    --col-sell: #151930;

    --glow: rgba(107, 128, 255, 0.2);
    --head-wash: rgba(107, 128, 255, 0.09);
    --head-ring: rgba(139, 156, 255, 0.14);

    --edge: #1d2130;
    --edge-deep: #151823;
    --slab-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
    --lift-shadow: 0 22px 40px -18px rgba(0, 0, 0, 0.9);
    --floor-line: rgba(139, 156, 255, 0.16);
    --header-glass: rgba(10, 11, 13, 0.72);

    --chart-grid: #20242b;
    --chart-sell: #8b9cff;
    --chart-buy: #8f97a4;
    --chart-area: rgba(139, 156, 255, 0.18);
    --chart-band: rgba(139, 156, 255, 0.08);

  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 16px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); text-wrap: balance; }
h3 { font-size: 1.05rem; letter-spacing: -0.01em; }
p { margin: 0; }

.shell {
  width: 100%;
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.narrow { max-width: calc(760px + 2 * var(--gutter)); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.eyebrow::before {
  content: "";
  width: 1.25rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.6;
}
.lead { font-size: 1.125rem; color: var(--text-dim); max-width: 38rem; margin-top: 1.25rem; text-wrap: pretty; }
.small { font-size: 0.875rem; }
.muted { color: var(--muted); }

.text-link {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
}
.text-link:hover, .text-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.arr { display: inline-block; }

/* ------------------------------------------------------------ buttons -- */
.btn {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
}
.btn:hover, .btn:focus-visible { border-color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: var(--btn-shadow); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--accent-deep); border-color: var(--accent-deep); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ------------------------------------------------------------- header -- */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--ground);
  view-transition-name: site-header;
}
/* Sticky from tablet up. On a phone the header wraps to two rows, too tall to pin. */
@media (min-width: 700px) {
  html { scroll-padding-top: 92px; }
  .site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--header-glass);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
  }
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.brand img { height: 46px; width: auto; }
.brand span { display: flex; flex-direction: column; line-height: 1; }
.brand strong {
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--accent);
}
.brand small {
  margin-top: 0.35rem;
  font-size: 0.6rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--muted);
}
.site-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; }
.site-nav a {
  position: relative;
  padding: 0.4rem 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-dim);
  text-decoration: none;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current] { color: var(--accent); }
.site-nav a:hover::after, .site-nav a:focus-visible::after, .site-nav a[aria-current]::after { transform: scaleX(1); }
@media (max-width: 520px) {
  .site-nav { width: 100%; justify-content: space-between; gap: 0.25rem 0.75rem; }
  .site-nav a { font-size: 0.9rem; padding: 0.6rem 0; }
}

/* ----------------------------------------------------------- sections -- */
.hero { padding: clamp(3rem, 8vw, 6rem) 0; overflow: hidden; overflow: clip; }
.hero-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; } }
/* Currency pages (src/currency.ts): the currency's two figures under the H1. */
.hero-rate { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 0; }
.hero-rate > div { flex: 1 1 10rem; max-width: 16rem; min-width: 0; padding: 0.8rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.hero-rate > .hero-rate-sell { background: var(--col-sell); }
.hero-rate dt { font-size: 0.8rem; color: var(--muted); }
.hero-rate dd { margin: 0.15rem 0 0; font-family: var(--font-display); font-size: clamp(1.25rem, 5.2vw, 2.2rem); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.hero-rate-sell dt { color: var(--accent); }

/* Inner page heads: a soft blue wash and two faint rings, top right. */
.page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom: 1px solid var(--line);
  background: radial-gradient(90% 120% at 100% 0%, var(--head-wash), transparent 70%);
}
.page-head::before,
.page-head::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  border: 1px solid var(--head-ring);
  pointer-events: none;
}
.page-head::before {
  width: clamp(280px, 55vw, 620px);
  aspect-ratio: 1;
  top: clamp(-320px, -28vw, -150px);
  right: clamp(-240px, -16vw, -110px);
}
.page-head::after {
  width: clamp(180px, 34vw, 380px);
  aspect-ratio: 1;
  top: clamp(-200px, -16vw, -90px);
  right: clamp(-150px, -8vw, -60px);
  background: radial-gradient(closest-side, var(--head-wash), transparent);
}
.page-head h1 { max-width: 20ch; }

.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section.tight { padding-top: clamp(2rem, 4vw, 3rem); }
.band { background: var(--panel-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 2rem;
}

.split { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.faq-layout { align-items: start; }
@media (min-width: 900px) { .faq-layout { grid-template-columns: 1.5fr 1fr; } }

/* -------------------------------------------------------------- cards -- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--card-pad);
  box-shadow: var(--shadow);
}

.code {
  display: inline-block;
  min-width: var(--badge-w, 3.1rem);
  margin-right: var(--badge-gap, 0.55rem);
  padding: 0.18rem 0.4rem;
  border-radius: 6px;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-align: center;
  vertical-align: 0.08em;
}
/* The publication time: a plain printed label, nothing that reads as "live". */
.stamp {
  display: inline-block;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--panel);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-dim);
}

.step-n {
  display: inline-grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--accent-tint);
  box-shadow: inset 0 0 0 1px var(--accent-tint-strong);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 600;
}

/* ------------------------------------------------------------ bureaux -- */
/* A two-column list of rows: name, address and directions on the left,
   the phone buttons on the right. One column on a phone. */
.bureaux { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 3rem; }
@media (min-width: 900px) { .bureaux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bureau {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "name" "where" "phones" "dir";
  row-gap: 0.45rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 560px) {
  .bureau {
    grid-template-columns: minmax(0, 1fr) auto;
    /* The last row soaks up the height of a second phone button, so the
       name, address and directions stay together. */
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "name phones" "where phones" "dir phones" ". phones";
    column-gap: 1.25rem;
  }
  .bureau .phones { flex-direction: column; align-items: flex-end; margin: 0; }
}
.bureau h3 { grid-area: name; font-size: 1.1rem; }
.bureau .where { grid-area: where; }
.bureau .phones { grid-area: phones; }
.bureau .text-link { grid-area: dir; justify-self: start; }
.bureau .where {
  position: relative;
  padding-left: 1.45rem;
  color: var(--text-dim);
  font-size: 0.95rem;
}
/* Pin drawn as a mask so it takes the theme's accent. */
.bureau .where::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1rem;
  height: 1.1rem;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7.5 7.5 0 0 0-7.5 7.5C4.5 15 12 22 12 22s7.5-7 7.5-12.5A7.5 7.5 0 0 0 12 2Zm0 10.25a2.75 2.75 0 1 1 0-5.5 2.75 2.75 0 0 1 0 5.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7.5 7.5 0 0 0-7.5 7.5C4.5 15 12 22 12 22s7.5-7 7.5-12.5A7.5 7.5 0 0 0 12 2Zm0 10.25a2.75 2.75 0 1 1 0-5.5 2.75 2.75 0 0 1 0 5.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bureau .phones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.25rem 0;
  font-variant-numeric: tabular-nums;
}
.bureau .phones a,
.bureau .phones span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}
.bureau .phones a {
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-strong);
  color: var(--accent);
}
.bureau .phones a:hover, .bureau .phones a:focus-visible {
  background: var(--accent-tint-strong);
  border-color: var(--accent);
  color: var(--accent-deep);
}
.bureau .phones a:focus-visible { border-radius: 999px; }
/* A number that has not been published yet: deliberate, not broken. */
.bureau .phones span {
  border: 1px dashed var(--line-strong);
  font-size: 0.875rem;
  font-weight: 500;
  font-style: italic;
}
.bureau .text-link { font-size: 0.9rem; }
.provenance { margin-top: 2rem; max-width: 46rem; }
/* Each bureau's name links to its page (src/bureau-pages.ts). */
.bureau h3 a { color: inherit; text-decoration: none; }
.bureau h3 a:hover, .bureau h3 a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
/* Bureau pages: the bureau's details under the H1. */
.bureau-card { margin-top: 1.5rem; max-width: 34rem; }
.contact-card.bureau-card dl { margin-top: 0; padding-top: 0; border-top: 0; }
/* About page: the twelve members, each linking to its page. */
.member-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 2.5rem; }
@media (min-width: 640px) { .member-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .member-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.member-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.member-list a { font-weight: 500; color: var(--text); text-decoration: none; }
.member-list a:hover, .member-list a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.about-contact { max-width: 40rem; }

/* ---------------------------------------------------------- corporate -- */
.features { display: grid; gap: 1.75rem; }
.features > div { padding-left: 1.1rem; border-left: 2px solid var(--accent-tint-strong); }
.features h3 { font-size: 1.1rem; }
.features p { margin-top: 0.4rem; color: var(--text-dim); }
.contact-card { border-top: 3px solid var(--accent); }
.contact-card h2 { font-size: 1.3rem; margin-bottom: 0.75rem; }
.contact-card > p { color: var(--text-dim); }
.contact-card > p + p { margin-top: 1.25rem; }
.contact-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem 1.25rem;
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
}
.contact-card dt { color: var(--muted); }
.contact-card dd { margin: 0; overflow-wrap: anywhere; }
.contact-card dd a { color: var(--accent); text-decoration: none; }
.contact-card dd a:hover, .contact-card dd a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- faq -- */
.faq-group + .faq-group { margin-top: 3rem; }
.faq-group > h2 { font-size: 1.35rem; margin-bottom: 0.5rem; }
.faq { padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.faq h3 { margin-bottom: 0.5rem; }
.faq p { color: var(--text-dim); }
.faq-narrow { max-width: 46rem; }

/* ------------------------------------------------------------- footer -- */
.site-footer {
  margin-top: 2rem;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
}
.footer-grid {
  display: grid;
  gap: 2.5rem;
  padding-top: 3rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.6fr 0.7fr 1fr; } }
.footer-about { margin-top: 1.25rem; max-width: 26rem; }
.footer-h {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; font-size: 0.95rem; }
.footer-links a { color: var(--text-dim); text-decoration: none; overflow-wrap: anywhere; }
.footer-links a:hover, .footer-links a:focus-visible { color: var(--accent); }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  border-top: 1px solid var(--line);
}
.footer-base p:first-child { max-width: 40rem; }
.footer-base a { color: var(--text-dim); text-underline-offset: 0.2em; }
.footer-base a:hover, .footer-base a:focus-visible { color: var(--accent); }


.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.head-aside { max-width: 22rem; }

/* ================================================================ 3D ==
   Four kinds of depth, all static until motion is allowed:
   the hero's coins over a grid floor, the ledger slab and its lifting
   rows, the converter's slab and currency drums, and planes that settle
   flat as they scroll in. */

/* --------------------------------------------------------- hero scene -- */
.hero { padding-top: clamp(2rem, 6vw, 4.5rem); padding-bottom: clamp(1rem, 3vw, 2rem); }
.hero-scene {
  position: relative;
  height: 220px;
  perspective: 900px;
  perspective-origin: 50% 30%;
  isolation: isolate;
}
@media (min-width: 900px) { .hero-scene { height: 360px; } }
.hero-scene::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -10% -5%;
  background: radial-gradient(closest-side, var(--glow), transparent);
}
.scene-floor {
  position: absolute;
  z-index: -1;
  left: -30%;
  right: -30%;
  bottom: 0;
  height: 75%;
  overflow: hidden;
  transform: rotateX(72deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: radial-gradient(60% 90% at 50% 100%, #000 30%, transparent 75%);
  mask-image: radial-gradient(60% 90% at 50% 100%, #000 30%, transparent 75%);
}
.scene-floor::before {
  --cell: 44px;
  content: "";
  position: absolute;
  inset: calc(-1 * var(--cell)) 0 0;
  background:
    repeating-linear-gradient(90deg, var(--floor-line) 0 1px, transparent 1px var(--cell)),
    repeating-linear-gradient(0deg, var(--floor-line) 0 1px, transparent 1px var(--cell));
}

.coin {
  --size: 150px;
  position: absolute;
  width: var(--size);
  height: var(--size);
  transform-style: preserve-3d;
}
.coin-a { --size: clamp(110px, 16vw, 190px); left: 24%; top: 12%; }
.coin-b { --size: clamp(64px, 9vw, 110px); left: 66%; top: 4%; }
.coin-c { --size: clamp(52px, 7vw, 84px); left: 70%; top: 58%; }
.coin-d { --size: clamp(58px, 8vw, 96px); left: 4%; top: 52%; }
@media (max-width: 899px) {
  .coin-a { left: 30%; top: 8%; }
  .coin-b { left: 62%; top: 2%; }
  .coin-c { left: 76%; top: 52%; }
  .coin-d { left: 8%; top: 44%; }
}
.coin-spin {
  --t: calc(var(--size) * 0.09);
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(12deg) rotateY(-28deg);
}
.coin-b .coin-spin { transform: rotateX(-8deg) rotateY(38deg); }
.coin-c .coin-spin { transform: rotateX(18deg) rotateY(62deg); }
.coin-d .coin-spin { transform: rotateX(-10deg) rotateY(-48deg); }
.coin-face,
.coin-spin i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
/* Edge discs. The fine conic stripes break up each disc's silhouette, which
   reads as a reeded (milled) edge when the coin turns side-on. */
.coin-spin i {
  background:
    repeating-conic-gradient(var(--coin-edge) 0 2deg, var(--coin-edge-dark) 2deg 4deg);
  transform: translateZ(calc((var(--z) / 12 - 0.5) * var(--t)));
}
/* The faces are cut from a photograph of struck coins, so the relief,
   wear and scratches are real. A soft sheen on top keeps them alive as
   they turn. */
.coin-face {
  background: center / cover no-repeat;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.coin-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(125deg, transparent 30%, var(--coin-sheen) 45%, transparent 60%);
  mix-blend-mode: soft-light;
}
.face-cedi { background-image: url("coins/cedi.webp?v=2"); }
.face-dollar { background-image: url("coins/dollar.webp?v=2"); }
.face-euro { background-image: url("coins/euro.webp?v=2"); }
.face-pound { background-image: url("coins/pound.webp?v=2"); }
.coin-front { transform: translateZ(calc(var(--t) / 2)); }
.coin-back { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); }

/* ---------------------------------------------------- rate board -- */
/* One ledger on one slab, not a grid of cards. It lies back and stands up
   as it scrolls in (motion block, 3). The row under the pointer or keyboard
   lifts toward the reader; nothing else on the board moves. */
.board-section { padding-top: clamp(1.5rem, 4vw, 3rem); }
.board-section .section-head { margin-bottom: 0.75rem; }
.board-key { margin-bottom: 1.5rem; max-width: 40rem; }
.board-key strong { color: var(--text-dim); font-weight: 600; }
/* Added by the Worker when the board is older than STALE_AFTER_HOURS. */
.stale-note {
  max-width: 40rem;
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--accent-tint-strong);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-tint);
  font-size: 0.925rem;
}
.stale-note strong { font-weight: 600; }
.stale-note a { color: var(--accent); font-weight: 500; }
.board-stage { perspective: 1600px; perspective-origin: 50% 0%; }
.ledger {
  --cols: minmax(0, 1fr) 7.5rem 7.5rem 3rem;
  position: relative;
  padding: 0.35rem 0.5rem 0.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  transform-style: preserve-3d;
  transform-origin: 50% 0%;
  box-shadow:
    0 1px 0 var(--edge), 0 2px 0 var(--edge), 0 3px 0 var(--edge),
    0 4px 0 var(--edge), 0 5px 0 var(--edge), 0 6px 0 var(--edge),
    0 7px 0 var(--edge-deep), 0 8px 0 var(--edge-deep),
    var(--slab-shadow);
}
@media (min-width: 1000px) { .ledger { --cols: minmax(0, 1fr) 10rem 10rem 3.5rem; } }
/* Narrow screens: the figure columns are sized for the longest figure on the
   board (9 characters, e.g. NGN 0.0087476), and the currency column takes
   what is left. Under 360px the figures step down again. */
@media (max-width: 519px) { .ledger { --cols: minmax(0, 1fr) 5.6rem 5.6rem 2.4rem; padding: 0.25rem 0.3rem 0.35rem; } }
@media (max-width: 359px) { .ledger { --cols: minmax(0, 1fr) 5rem 5rem 2.3rem; } }
.ledger-head,
.rate {
  display: grid;
  grid-template-columns: var(--cols);
  align-items: center;
}
.rate-figs { grid-column: 2 / span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0; align-self: stretch; }
.ledger-head span {
  padding: 0.6rem 0.9rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}
.ledger-head span:first-child { text-align: left; }
.ledger-head span:last-child { text-align: center; }
.ledger-head .rate-sell { color: var(--accent); background: var(--col-sell); border-radius: 10px 10px 0 0; }
.board {
  list-style: none;
  padding: 0;
  margin: 0;
  transform-style: preserve-3d;
}
.rate {
  position: relative;
  border-top: 1px solid var(--line);
  transform-style: preserve-3d;
}
.rate-cur { display: flex; align-items: center; gap: 0.6rem; min-width: 0; padding: 0.7rem 0.9rem; }
.rate-cur .code { margin: 0; flex: none; }
.rate-name { font-size: 0.92rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Each name links to its currency page; the page's own row is marked current. */
a.rate-name { text-decoration: none; }
a.rate-name:hover, a.rate-name:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.rate-name[aria-current="page"] { color: var(--text); font-weight: 600; }
.rate-figs > div { display: flex; align-items: center; justify-content: flex-end; padding: 0 0.9rem; }
.rate-figs .rate-sell { background: var(--col-sell); }
.board > .rate:last-child .rate-sell { border-radius: 0 0 10px 10px; }
.rate-figs dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rate-figs dd {
  margin: 0;
  font: 600 1.12rem / 1.2 var(--font-sans);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.rate-link {
  justify-self: center;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--accent);
}
.rate-link:hover, .rate-link:focus-visible { background: var(--accent-tint); }
/* The lift. Static styles here; the transition lives in the motion block. */
.rate:focus-within {
  z-index: 1;
  border-radius: 10px;
  background: var(--accent-tint);
  border-top-color: transparent;
  box-shadow: 0 0 0 1px var(--accent-tint-strong), var(--lift-shadow);
}
.rate:focus-within + .rate { border-top-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .rate:hover {
    z-index: 1;
    border-radius: 10px;
    background: var(--accent-tint);
    border-top-color: transparent;
    box-shadow: 0 0 0 1px var(--accent-tint-strong), var(--lift-shadow);
  }
  .rate:hover + .rate { border-top-color: transparent; }
}
@media (max-width: 519px) {
  .rate-cur { flex-wrap: wrap; row-gap: 0.15rem; padding: 0.6rem 0.5rem; }
  .rate-name { flex-basis: 100%; font-size: 0.8rem; white-space: normal; }
  .rate-figs > div { padding: 0 0.35rem; }
  .rate-figs dd { font-size: 0.92rem; }
  .ledger-head span { padding: 0.55rem 0.35rem 0.45rem; font-size: 0.64rem; letter-spacing: 0.05em; }
  .ledger-head span:first-child { padding-left: 0.5rem; }
  .ledger-head span:last-child { visibility: hidden; }
}
@media (max-width: 359px) {
  .rate-cur { padding: 0.6rem 0.35rem; }
  .rate-figs > div { padding: 0 0.3rem; }
  .rate-figs dd { font-size: 0.84rem; }
  .ledger-head span { padding-inline: 0.3rem; }
  .ledger-head span:first-child { padding-left: 0.35rem; }
}
/* Ways to pay: a ticker in a recessed strip across the foot of the slab. The
   strip bleeds to the slab's edges (negative margins = the ledger's padding).
   The track holds the list and two aria-hidden copies; the slide is in the
   motion block (8). Without motion the copies are hidden and the one list
   scrolls by hand. The MoMo tile is MTN's own artwork and stays yellow in
   both themes, like the coins; --momo-edge is declared once. */
.pay-tray {
  --momo-edge: #c79a00;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "label window pause";
  align-items: center;
  column-gap: 1rem;
  margin: 0.5rem -0.5rem -0.5rem;
  padding: 0.7rem 0.9rem 0.75rem 1.1rem;
  border-top: 1px solid var(--line);
  border-radius: 0 0 17px 17px;
  background: var(--ground);
  box-shadow: inset 0 6px 10px -8px var(--glow);
}
.pay-label {
  grid-area: label;
  padding-right: 1rem;
  border-right: 1px solid var(--line);
  font: 600 0.7rem / 1.2 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.pay-window {
  grid-area: window;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
}
/* No horizontal padding on the track: the slide is a third of its width,
   which equals one list only if the lists are all it holds. */
.pay-track { display: flex; width: max-content; padding: 0.35rem 0; }
.pay-methods { list-style: none; margin: 0; display: flex; flex: none; gap: 2.25rem; padding: 0 2.25rem 0 0; }
.pay-clone { display: none; }
.pay { display: flex; align-items: center; gap: 0.65rem; white-space: nowrap; }
.pay p { display: flex; align-items: baseline; gap: 0.45rem; margin: 0; }
.pay strong { font-weight: 600; font-size: 0.9rem; }
.pay p span { font-size: 0.82rem; color: var(--text-dim); }
.pay-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 1.8rem;
  border-radius: 7px;
  background: linear-gradient(145deg, var(--accent), var(--accent-deep));
  color: var(--on-accent);
  box-shadow: 0 2px 0 var(--accent-deep);
}
.pay-icon svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pay-logo { object-fit: cover; background: none; box-shadow: 0 2px 0 var(--momo-edge); }
/* Pause button, added by site.js. Hidden unless the ticker moves (8). */
.pay-pause {
  grid-area: pause;
  display: none;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
}
.pay-pause:hover, .pay-pause:focus-visible { color: var(--accent); border-color: var(--accent-tint-strong); }
.pay-pause svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pay-pause .i-play { display: none; fill: currentColor; stroke: none; }
.is-paused .pay-pause .i-pause { display: none; }
.is-paused .pay-pause .i-play { display: inline; }
@media (max-width: 519px) {
  .pay-tray { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label pause" "window window"; row-gap: 0.5rem; margin: 0.35rem -0.3rem -0.35rem; padding: 0.75rem 0.6rem 0.6rem 0.8rem; }
  .pay-label { border: 0; padding: 0; }
  .pay-window { margin-inline: -0.25rem; }
}
.board-note { margin-top: 1.75rem; max-width: 46rem; }

/* ------------------------------------------------------------ history -- */
.depth-stage { perspective: 1400px; perspective-origin: 50% 0%; }
.chart-card { padding: clamp(1rem, 3.5vw, 1.75rem); border-radius: 18px; box-shadow: var(--slab-shadow); }
.chart-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip,
.chip-select select {
  min-height: 38px;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text-dim);
  font: 600 0.85rem / 1 var(--font-sans);
  letter-spacing: 0.02em;
  cursor: pointer;
}
.chip:hover, .chip-select select:hover { border-color: var(--accent); color: var(--accent); }
.chip[aria-pressed="true"],
.chip-select.is-on select {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.chip-select select { width: 5.75rem; padding-right: 0.4rem; }
.segmented { padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); gap: 2px; }
.segmented .chip { border-color: transparent; background: transparent; min-height: 32px; }
.segmented .chip[aria-pressed="true"] { background: var(--panel); color: var(--accent); border-color: var(--line); box-shadow: var(--shadow); }

.chart-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.5rem 0 0.5rem;
}
@media (min-width: 700px) { .chart-stats { grid-template-columns: repeat(4, 1fr); } }
.chart-stats dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.chart-stats dd { margin: 0.2rem 0 0; font: 600 1.25rem / 1.25 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--text); }
.chart-stats [data-stat="range"] { font-size: 1.02rem; padding-top: 0.2rem; }

.chart-frame { position: relative; margin-top: 0.5rem; }
.chart { display: block; width: 100%; overflow: visible; touch-action: pan-y; cursor: crosshair; }
.chart:focus-visible { outline-offset: 6px; border-radius: 8px; }
.chart .grid line { stroke: var(--chart-grid); stroke-width: 1; }
.chart .grid text { fill: var(--muted); font: 500 11px var(--font-sans); font-variant-numeric: tabular-nums; }
.chart .area-top { stop-color: var(--chart-sell); stop-opacity: 0.16; }
.chart .area-bottom { stop-color: var(--chart-sell); stop-opacity: 0; }
.chart .band { fill: var(--chart-band); }
.chart .line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chart .line-sell { stroke: var(--chart-sell); stroke-width: 2.25; }
.chart .line-buy { stroke: var(--chart-buy); stroke-width: 1.5; }
.chart .cursor-line { stroke: var(--line-strong); stroke-dasharray: 3 3; }
.chart .dot { fill: var(--panel); stroke-width: 2; }
.chart .dot-sell { stroke: var(--chart-sell); }
.chart .dot-buy { stroke: var(--chart-buy); }
.chart-tip {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 0.15rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow-raised);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(14px, -100%);
}
.chart-tip.flip { transform: translate(calc(-100% - 14px), -100%); }
.chart-tip[hidden] { display: none; }
.key { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 0.4rem; vertical-align: middle; }
.key-sell { background: var(--chart-sell); }
.key-buy { background: var(--chart-buy); }
.chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin-top: 0.75rem; }
.chart-legend .key-buy { margin-left: 0.75rem; }
.legend-hint { margin-left: auto; }
@media (hover: none) { .legend-hint { display: none; } }
.chart-fallback { padding: 2rem 0; }
/* Before there are two published days to draw. */
.chart-empty { margin: 0; padding: 4rem 1rem; text-align: center; }
.chart-empty[hidden], .chart-frame.is-empty .chart { display: none; }

/* ---------------------------------------------------------- converter -- */
.convert-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .convert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; } }
.convert-aside { margin-top: 1.25rem; }
/* The slab: a stack of hard edges under the card reads as physical thickness. */
.slab {
  border-radius: 20px;
  padding: clamp(1.15rem, 4vw, 2rem);
  box-shadow:
    0 1px 0 var(--edge), 0 2px 0 var(--edge), 0 3px 0 var(--edge),
    0 4px 0 var(--edge), 0 5px 0 var(--edge), 0 6px 0 var(--edge),
    0 7px 0 var(--edge-deep), 0 8px 0 var(--edge-deep),
    var(--slab-shadow);
}
.leg-label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.leg-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 68px;
  padding: 0.4rem 0.4rem 0.4rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-2);
}
.leg-row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint-strong); }
.leg-amount {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 600 clamp(1.35rem, 4vw, 1.9rem) / 1.2 var(--font-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.leg-amount:focus, .leg-amount:focus-visible { outline: none; }
.leg-result { overflow-wrap: anywhere; }
.leg-get .leg-row { background: var(--accent-tint); border-color: var(--accent-tint-strong); }
.leg-get .leg-amount { color: var(--accent-deep); }
.leg-currency {
  flex: none;
  width: 11.5rem;
  min-height: 48px;
  padding: 0 0.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font: 600 0.9rem var(--font-sans);
  text-overflow: ellipsis;
  cursor: pointer;
}
@media (max-width: 519px) { .leg-currency { width: 5.5rem; } }
/* The currency drum. site.js builds it beside each select and lays the
   select over it, transparent, so clicks, keys and screen readers still
   use the native control. The drum only shows the value turning. */
.picker { position: relative; flex: none; }
.has-drum .leg-currency { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; font-size: 16px; }
.drum {
  --face: 28px;
  position: relative;
  width: 11.5rem;
  height: 84px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
  perspective: 480px;
}
@media (max-width: 519px) { .drum { width: 5.5rem; } }
.drum-cyl {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - var(--face) / 2);
  height: var(--face);
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--r) * -1)) rotateX(var(--turn, 0deg));
}
.drum-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.7rem;
  background: var(--panel);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  white-space: nowrap;
  overflow: hidden;
  color: var(--muted);
  font: 600 0.9rem / 1 var(--font-sans);
}
.drum-face small { font-weight: 500; font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; }
.drum-face.is-front { color: var(--text); }
.drum-face.is-front small { color: var(--text-dim); }
@media (max-width: 519px) { .drum-face { justify-content: center; } .drum-face small { display: none; } }
/* Fades the faces as they turn away, and marks the window of the chosen one. */
.drum::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(var(--panel), transparent 34%, transparent 66%, var(--panel));
  pointer-events: none;
}
.drum::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0.4rem;
  right: 0.4rem;
  top: calc(50% - var(--face) / 2);
  height: var(--face);
  border-top: 1px solid var(--accent-tint-strong);
  border-bottom: 1px solid var(--accent-tint-strong);
  pointer-events: none;
}
.leg-row:focus-within .drum { border-color: var(--accent); }
.swap-row { position: relative; z-index: 1; display: flex; justify-content: center; margin: -0.35rem 0; }
.swap {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--accent);
  box-shadow: 0 3px 0 var(--edge), var(--shadow);
  cursor: pointer;
  transform: perspective(300px) rotateX(var(--spin, 0deg));
}
.swap:hover { border-color: var(--accent); }
.cv-rate { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--text-dim); }
.cv-rate strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- services -- */
/* Rows divided by hairlines, not cards. */
.services { list-style: none; padding: 0; margin: 0; border-bottom: 1px solid var(--line); }
.service {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1.1rem;
  align-items: center;
  padding: 1.35rem 0;
  border-top: 1px solid var(--line);
}
.service h3 { font-size: 1.1rem; }
.service p, .service .text-link { grid-column: 2; }
.service p { margin-top: 0.35rem; color: var(--text-dim); font-size: 0.95rem; max-width: 40rem; }
.service .text-link { justify-self: start; margin-top: 0.5rem; font-size: 0.92rem; }
@media (min-width: 800px) {
  .service { grid-template-columns: auto minmax(0, 15rem) minmax(0, 1fr); column-gap: 1.5rem; }
  .service p { grid-column: 3; grid-row: 1; margin: 0; }
  .service .text-link { grid-column: 3; }
}
/* Generated tiles (assets/services/, 144px for 3x): the indigo square and its
   lip are in the image, so the box only sizes it. */
.service-icon { display: block; width: 3rem; height: 3rem; }
.service-icon img { display: block; width: 100%; height: 100%; }

.visit {
  list-style: none;
  padding: 2rem 0 0;
  margin: 2.5rem 0 0;
  display: grid;
  gap: 1.5rem;
  border-top: 1px solid var(--line);
}
@media (min-width: 760px) { .visit { grid-template-columns: repeat(3, 1fr); } }
.visit li { display: flex; gap: 1rem; align-items: flex-start; }
.visit .step-n { flex: none; }
.visit h3 { font-size: 1rem; margin: 0.35rem 0 0.25rem; }
.visit p { color: var(--text-dim); font-size: 0.92rem; }

/* ------------------------------------------------------------ find us -- */
.hours { display: grid; gap: 0.15rem; }
.hours strong { font-weight: 500; font-size: 0.95rem; }

/* ============================================================= motion ==
   Everything that moves, all opt-out with reduced motion:
   1 hero entrance · 2 inner page head · 3 planes and cards settling in ·
   4 hover, focus, row lift and drums · 5 page crossfade · 6 the coins and the floor ·
   7 the chart drawing and the swap flip.
   Rate figures never move on their own. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  @keyframes settle {
    from { opacity: 0; transform: translateY(var(--rise)); }
    to { opacity: 1; transform: none; }
  }
  @keyframes head-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes scene-in {
    from { opacity: 0; transform: scale(0.92) translateY(20px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes plane-in {
    from { opacity: 0.35; transform: rotateX(24deg) translateY(30px) scale(0.96); }
    to { opacity: 1; transform: none; }
  }
  @keyframes rise-3d {
    from { opacity: 0; transform: rotateX(14deg) translateY(48px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes spin-a { from { transform: rotateX(12deg) rotateY(0deg); } to { transform: rotateX(12deg) rotateY(360deg); } }
  @keyframes spin-b { from { transform: rotateX(-8deg) rotateY(360deg); } to { transform: rotateX(-8deg) rotateY(0deg); } }
  @keyframes bob {
    from { transform: translate3d(0, -6px, 0); }
    to { transform: translate3d(0, 8px, 0); }
  }
  @keyframes floor-run { to { transform: translateY(44px); } }
  @keyframes draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }

  /* 1 · Home hero on load: copy staggers up, the scene rises beside it. */
  .hero-copy > * { animation: settle var(--dur-enter) var(--ease-settle) both; }
  .hero-copy > :nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
  .hero-copy > :nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
  .hero-copy > :nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
  .hero-scene { animation: scene-in 900ms var(--ease-settle) calc(var(--stagger) * 3) both; }

  /* 2 · Inner page head fades up once. */
  .page-head .shell { animation: head-in var(--dur-head) var(--ease-out) both; }

  /* 3 · Scroll-driven: the rate board lies back and stands up flat, the
     chart and converter rise out of the page, cards settle in.
     Nothing is hidden without support. */
  @supports (animation-timeline: view()) {
    .ledger {
      animation: plane-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
    .depth-stage > * {
      animation: rise-3d linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
    .services > li,
    .visit li,
    .bureau,
    .features > div,
    .faq {
      animation: settle var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
  }

  /* 4 · Hover and focus: only interactive things react. */
  .btn {
    transition:
      transform var(--dur-hover) var(--ease-out),
      background-color var(--dur-hover) var(--ease-out),
      border-color var(--dur-hover) var(--ease-out);
  }
  .btn:hover, .btn:focus-visible { transform: translateY(var(--lift)); }
  .btn:active { transform: translateY(0); }
  .arr { transition: transform var(--dur-hover) var(--ease-out); }
  a:hover > .arr, a:focus-visible > .arr { transform: translateX(var(--nudge)); }
  .site-nav a { transition: color var(--dur-hover) var(--ease-out); }
  .site-nav a::after { transition: transform 200ms var(--ease-out); }
  .bureau .phones a,
  .footer-links a,
  .chip,
  .chip-select select,
  .leg-row {
    transition:
      background-color var(--dur-hover) var(--ease-out),
      border-color var(--dur-hover) var(--ease-out),
      box-shadow var(--dur-hover) var(--ease-out),
      color var(--dur-hover) var(--ease-out);
  }
  /* A ledger row lifts toward the reader under the pointer or focus. */
  .rate {
    transition:
      transform 420ms var(--ease-settle),
      box-shadow 300ms var(--ease-out),
      background-color var(--dur-hover) var(--ease-out);
  }
  .rate:focus-within { transform: translateZ(28px); }
  @media (hover: hover) and (pointer: fine) {
    .rate:hover { transform: translateZ(28px); transition-duration: 200ms, 200ms, var(--dur-hover); }
  }
  /* The drum turns to the chosen currency. */
  .drum-cyl { transition: transform 620ms var(--ease-settle); }

  /* 5 · Page-to-page crossfade. The header is its own layer and stays put. */
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--dur-page);
    animation-timing-function: var(--ease-out);
  }
  ::view-transition-group(site-header) { animation: none; }
  ::view-transition-old(site-header) { animation: none; opacity: 0; }
  ::view-transition-new(site-header) { animation: none; }

  /* 6 · Ambient: the coins turn and bob, the floor runs toward the viewer. */
  .coin { animation: bob 4.5s ease-in-out infinite alternate; }
  .coin-b { animation-duration: 5.5s; animation-delay: -2s; }
  .coin-c { animation-duration: 3.8s; animation-delay: -1s; }
  .coin-d { animation-duration: 5s; animation-delay: -3s; }
  .coin-a .coin-spin { animation: spin-a 14s linear infinite; }
  .coin-b .coin-spin { animation: spin-b 18s linear infinite; }
  .coin-c .coin-spin { animation: spin-a 11s linear infinite; animation-delay: -4s; }
  .coin-d .coin-spin { animation: spin-b 15s linear infinite; animation-delay: -6s; }
  .scene-floor::before { animation: floor-run 3.2s linear infinite; }

  /* 7 · The chart draws its lines when the view changes; swap flips over. */
  .chart .line.draw { animation: draw 900ms var(--ease-settle) both; }
  .chart .line-buy.draw { animation-delay: 120ms; }
  .swap { transition: transform 560ms var(--ease-settle), border-color var(--dur-hover) var(--ease-out); }

  /* 8 · Ways to pay: the track slides one list's width (a third of the track,
     since it holds the list and two copies), then repeats. Hovering with a
     mouse or the pause button holds it still. */
  @keyframes pay-run { to { transform: translateX(calc(-100% / 3)); } }
  .pay-window { overflow: hidden; }
  .pay-clone { display: flex; }
  .pay-track { animation: pay-run 30s linear infinite; }
  .pay-pause { display: grid; }
  .pay-tray.is-paused .pay-track { animation-play-state: paused; }
  @media (hover: hover) and (pointer: fine) {
    .pay-tray:hover .pay-track { animation-play-state: paused; }
  }
}