/* =================================================================
   $&C Xchange Centre — stylesheet

   Palette: "clean + warm amber". A white page, charcoal bands and a
   single amber accent. It replaces the colours that were sampled off
   the shop's printed name card — see decision 25 in PROJECT_PLAN.md.

   Variables are named for the JOB they do, not the colour they are
   (--accent, not --orange). Change a value here and the whole site
   follows, without the names turning into lies.
   ================================================================= */

/* Inter, self-hosted. One variable-weight file covers 400–700, which
   is why there is a single @font-face and not three. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

:root {
  /* Page */
  --bg:           #FFFFFF;
  --bg-alt:       #F6F5F2;
  --surface:      #FFFFFF;

  /* Text */
  --ink:          #16181D;
  --ink-soft:     #5B6169;

  /* Lines */
  --line:         #E3E1DC;
  --line-strong:  #C9C5BE;

  /* The one accent. Passes AA on white at every size, so unlike the
     old palette it does not need a second, darker version. */
  --accent:       #B4530A;
  --accent-hover: #8E4108;
  --accent-soft:  #FDF4EC;

  /* The same amber, lightened for the charcoal bands. --accent on
     --dark-soft measures only 2.31:1, which fails even the 3:1 that
     large text needs. This reaches 5.47:1, so it is safe at any size
     while still reading as the same brand colour. */
  --accent-on-dark: #F0A05A;

  /* Dark bands and footer */
  --dark:         #1F2933;
  --dark-soft:    #2D3A47;

  /* Stock status — a text colour and a tint for each, so the pills
     sit quietly instead of shouting in a column of five. */
  --ok:           #1F6F37;
  --ok-bg:        #E9F4EC;
  --warn:         #9A5206;
  --warn-bg:      #FDF1E4;
  --muted:        #545C66;
  --muted-bg:     #EFF1F3;

  --error:        #A32020;

  --radius:       10px;
  --wrap:         1080px;

  /* Both point at Inter. Kept as two names so headings can diverge
     later without another sweep through the file. */
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Rates must line up down the column. Without tabular figures the
   decimal points wander, which is the clearest sign of an amateur
   rate board. */
.rate-card__figure,
.rate-card__compare,
.num,
.converter__result,
.cur__code,
.cur__unit {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ----------------------------------------------------------------
   Base
   ---------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(1.9rem, 5.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; }

a { color: var(--accent); }

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Amber on charcoal only reaches about 2.4:1, under the 3:1 a focus
   indicator needs. On the dark bands and the footer the ring goes
   white instead. */
.section--dark a:focus-visible,
.section--dark button:focus-visible,
.section--dark summary:focus-visible,
.site-footer a:focus-visible {
  outline-color: #FFFFFF;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.15rem;
}

/* app.js hides things with the hidden attribute. Without this, any
   element given its own display (flex, grid…) would ignore it. */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem; top: 1rem;
  z-index: 100;
  background: var(--surface);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
}

.muted { color: var(--ink-soft); }
.small { font-size: 0.9rem; }
.lead  { font-size: 1.12rem; }

/* ----------------------------------------------------------------
   Draft banner
   ---------------------------------------------------------------- */

.draft-banner {
  background: var(--error);
  color: #fff;
  padding: 0.7rem 1.15rem;
  font-size: 0.92rem;
  line-height: 1.45;
}
.draft-banner__list {
  display: block;
  opacity: 0.9;
  font-size: 0.85rem;
  word-break: break-word;
}

/* ----------------------------------------------------------------
   Header
   ---------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.2s ease;
}

/* Added by app.js once you scroll away from the top, so the header
   reads as floating above the page rather than welded to it. */
.site-header.is-scrolled {
  box-shadow: 0 2px 12px rgba(22, 24, 29, 0.10);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 62px;
  flex-wrap: wrap;
}

/* The whole stacked logo, sized to sit inside the header with a little
   breathing room above and below. */
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-right: auto;
  padding: 0.3rem 0;
}
.brand__logo { height: 64px; width: auto; }

.nav {
  display: flex;
  gap: 1.1rem;
  font-size: 0.97rem;
}
.nav a {
  color: var(--ink);
  text-decoration: none;
  padding: 0.6rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--accent); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 0.85rem;
  background: transparent;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 17px; height: 2px;
  background: var(--ink);
  content: "";
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -5px; }
.nav-toggle__bars::after  { position: absolute; top:  5px; }

/* ----------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
}

.btn--wa {
  background: var(--accent);
  color: #fff;
}
.btn--wa:hover { background: var(--accent-hover); }

.btn--outline {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
.btn--outline:hover { background: var(--bg-alt); }

.btn--ghost {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn--ghost:hover { background: var(--bg-alt); }

.btn--ghost-light {
  background: transparent;
  border-color: rgba(255,255,255,0.7);
  color: #fff;
}
.btn--ghost-light:hover { background: rgba(255,255,255,0.14); }

.btn--lg { font-size: 1.05rem; padding: 0.8rem 1.5rem; }

/* The deeper accent, not the standard one: this link sits on the
   striped rows of the rate table, where plain --accent measures 4.51
   against a 4.5 minimum. Too close to the line to rely on. */
.link-wa {
  color: var(--accent-hover);
  font-weight: 600;
  text-decoration: underline;
}

.link-arrow {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
}
.link-arrow::after { content: " →"; }

/* Links whose destination is not yet known */
.is-unavailable {
  color: var(--ink-soft);
  text-decoration: line-through;
  cursor: not-allowed;
  opacity: 0.7;
}

/* ----------------------------------------------------------------
   Sections
   ---------------------------------------------------------------- */

.section { padding: 3rem 0; }
.section--tint { background: var(--bg-alt); }

.section--dark {
  background: var(--dark);
  color: #fff;
}
.section--dark h2,
.section--dark h3 { color: #fff; }
.section--dark a { color: #fff; }

.hero {
  position: relative;
  overflow: hidden;
  padding: 2.5rem 0 3rem;
  background: var(--bg);
}

/* The soft wash behind the headline and converter. Purely decorative,
   sitting under the content, and faded out by app.js as you scroll.
   Very low opacity on purpose — it should register as "this page was
   made by someone", not as a colour. */
.hero__glow {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1200px, 150%);
  aspect-ratio: 1 / 1;

  /* Percentages in translate() are of the element's OWN size, unlike
     a percentage `top`, which is of the hero's height — and the hero
     is tall on a phone, which pushed the glow completely off-screen.
     This keeps roughly the top third of the circle above the fold
     whatever the hero height turns out to be. */
  transform: translate(-50%, -38%);

  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    circle,
    rgba(180, 83, 10, 0.14) 0%,
    rgba(180, 83, 10, 0.07) 38%,
    rgba(180, 83, 10, 0) 68%
  );
}

/* The content has to sit above the wash. */
.hero > .wrap { position: relative; z-index: 1; }

.hero__title { max-width: 18ch; }
.hero__accent { color: var(--accent); display: block; }
.hero__lead { max-width: 56ch; font-size: 1.12rem; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 1rem;
}
.hero__subhead { margin-top: 2.25rem; }

.sample-notice {
  background: var(--warn-bg);
  border-left: 4px solid var(--accent);
  padding: 0.7rem 0.9rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.95rem;
  margin: 1rem 0;
}

.last-updated {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin: 0 0 1rem;
}

/* ----------------------------------------------------------------
   Callouts
   ---------------------------------------------------------------- */

.callout {
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  margin: 1.25rem 0;
}
.callout--warn {
  background: var(--warn-bg);
  border-left: 5px solid var(--warn);
}
.callout--error {
  background: #FCECEC;
  border-left: 5px solid var(--error);
}
.callout--error p { margin-bottom: 0.75rem; }

.disclaimer {
  font-size: 0.9rem;
  color: var(--ink-soft);
  max-width: 68ch;
  margin-top: 1.25rem;
}

/* ----------------------------------------------------------------
   Featured rate cards — the hero of the site
   ---------------------------------------------------------------- */

.rate-cards {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* 3 x 2 for the six featured */
}

.rate-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1rem 1.05rem;
}

/* flex-wrap matters: with the flag added, flag + code + "Available"
   no longer fit across a 150px card on a 360px phone, and the pill
   was being clipped by the hero. It now drops onto its own line. */
.rate-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.15rem;
}

/* margin-right:auto keeps the flag and the code together on the left
   and pushes the stock pill to the right edge, despite space-between. */
.rate-card__code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  margin-right: auto;
}

.rate-card__name {
  color: var(--ink-soft);
  font-size: 0.87rem;
  margin: 0 0 0.6rem;
}

.rate-card__figure {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.05;
  color: var(--accent);
  margin: 0;
}

.rate-card__caption {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0.3rem 0 0;
}

.rate-card__compare {
  font-variant-numeric: tabular-nums;
  font-size: 0.87rem;
  margin: 0.55rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}

.rate-card__fallback {
  display: inline-block;
  margin-top: 0.4rem;
  font-weight: 600;
}

/* ----------------------------------------------------------------
   Stock pills
   ---------------------------------------------------------------- */

/* Tinted rather than solid: a column of five solid pills shouts over
   the rates themselves, which are the point of the page. The text
   colour still carries the meaning for anyone not seeing the tint. */
.stock {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.stock--ok    { background: var(--ok-bg);    color: var(--ok);    border-color: #C9E3D1; }
.stock--warn  { background: var(--warn-bg);  color: var(--warn);  border-color: #F0D8BC; }
.stock--muted { background: var(--muted-bg); color: var(--muted); border-color: #D8DDE2; }

/* On the dark bands the tints disappear, so invert to solid. */
.section--dark .stock--ok,
.section--dark .stock--warn,
.section--dark .stock--muted { color: #fff; border-color: transparent; }
.section--dark .stock--ok    { background: var(--ok); }
.section--dark .stock--warn  { background: var(--warn); }
.section--dark .stock--muted { background: var(--muted); }

/* ----------------------------------------------------------------
   Flags

   The outline matters: several flags (Japan, Indonesia, Singapore's
   neighbours) are mostly white, and without a border they dissolve
   into a white table row.
   ---------------------------------------------------------------- */

.flag {
  width: 24px;
  height: 18px;
  flex: none;
  border-radius: 2px;
  border: 1px solid var(--line-strong);
  object-fit: cover;
  display: block;
}

/* ----------------------------------------------------------------
   Rates table
   ---------------------------------------------------------------- */

.table-wrap { overflow-x: auto; }

.rates-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.rates-table th,
.rates-table td {
  padding: 0.55rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

/* A quiet header rule instead of the old heavy coloured slab — the
   numbers below it should be the darkest thing in the table. */
.rates-table thead th {
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  border-bottom: 2px solid var(--line-strong);
}

.rates-table tbody tr:nth-child(even) { background: var(--bg-alt); }

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

/* The two rate columns line up on the right, the way a rate board does. */
.rates-table thead th:nth-child(2),
.rates-table thead th:nth-child(3),
.rates-table td.num { text-align: right; }

.cur {
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.cur__text { min-width: 0; }
.cur__code {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
}
.cur__name {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.cur__unit {
  display: inline-block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--ink-soft);
  background: var(--bg-alt);
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
}

.num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 1.02rem;
  white-space: nowrap;
}
.num--fallback { font-weight: 600; font-size: 0.92rem; white-space: normal; }

.action-cell { white-space: nowrap; }

/* ----------------------------------------------------------------
   Converter
   ---------------------------------------------------------------- */

/* Sitting in the hero on a white page, the converter needs to read as
   a distinct panel — hence the tinted fill rather than white-on-white. */
.converter {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.25rem;
  margin-top: 1.75rem;
}

/* An h2 for document structure, but sized like the h3 it replaced —
   the headline above it should stay the largest thing in the hero. */
.converter__title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.converter h3 { margin-top: 0; }

.converter__row {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: start;
}

.field { display: block; }
.field__label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 0.35rem;
}
.field select,
.field input {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.65rem;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
}

.field--radio {
  border: none;
  margin: 0;
  padding: 0;
}
.field--radio legend { padding: 0; }
.radio {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 34px;
  cursor: pointer;
}
.radio input { width: 20px; height: 20px; accent-color: var(--accent); }

.converter__result {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 1.9rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--accent);
  margin: 1.1rem 0 0.4rem;
}

.converter__result--empty {
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink-soft);
}

/* Inline, not a flex item: on a narrow phone the result wraps onto two
   lines, and as a flex item the flag was left stranded on a line of
   its own above the number. */
.converter__result .flag {
  display: inline-block;
  vertical-align: -0.12em;
  margin-right: 0.45rem;
}

.converter__prompt {
  background: var(--warn-bg);
  border-left: 4px solid var(--warn);
  padding: 0.6rem 0.8rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.93rem;
  margin: 0.5rem 0;
}

.converter__note {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0.4rem 0 0;
}

/* ----------------------------------------------------------------
   Columns, cards, FAQ
   ---------------------------------------------------------------- */

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

.card-dark {
  background: var(--dark-soft);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.card-dark h3 { margin-top: 0; }

/* ----------------------------------------------------------------
   Steps in "How to"

   A big amber numeral above a bold white heading. The numeral is
   sized in its own right rather than inherited, so the three cards
   stay aligned whatever the heading length.
   ---------------------------------------------------------------- */

.step__num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-on-dark);
  margin-bottom: 0.6rem;
}

/* The button sits at the foot of the card, so the three line up even
   when one has more text than the others. */
.step {
  display: flex;
  flex-direction: column;
}
.step > p:last-of-type { margin-bottom: 1.1rem; }
.step .btn { align-self: flex-start; margin-top: auto; }

.note-dark {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  background: rgba(0,0,0,0.18);
  border-radius: var(--radius);
  font-size: 0.97rem;
}

.faq details {
  background: var(--dark-soft);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  margin-bottom: 0.6rem;
  padding: 0 1rem;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.85rem 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.faq details p { margin: 0 0 1rem; }

/* ----------------------------------------------------------------
   Visit us

   The licence-block, reviews and photos rules that used to live here
   went with the About section on 23 Sep 2026 (decision 28). They are
   in the git history if the licence block has to come back on-page
   after the compliance review.

   .photos is kept: the storefront and counter photos return here once
   the renovation is finished.
   ---------------------------------------------------------------- */

.photos {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: 1.5rem;
}
.photo-placeholder,
.map-placeholder {
  background: var(--bg-alt);
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  min-height: 170px;
  font-size: 0.93rem;
}
.map-placeholder { min-height: 300px; }

.visit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.map-frame {
  width: 100%;
  min-height: 300px;
  border: 0;
  border-radius: var(--radius);
}

.address { font-size: 1.1rem; font-weight: 600; }

/* ----------------------------------------------------------------
   Contact
   ---------------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 1.5rem 0;
}

.contact-btn {
  display: block;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.95rem 1.1rem;
  min-height: 44px;
  text-decoration: none;
  color: var(--ink);
}
.contact-btn:hover { border-color: var(--accent); background: var(--bg-alt); }

.contact-btn__label {
  display: block;
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--accent);
}
.contact-btn__value {
  display: block;
  font-size: 0.93rem;
  color: var(--ink-soft);
}

/* ----------------------------------------------------------------
   Footer
   ---------------------------------------------------------------- */

.site-footer {
  background: var(--dark);
  color: #fff;
  padding: 2.5rem 0 2rem;
  font-size: 0.93rem;
}
.site-footer a { color: #fff; }

.footer-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
}
.footer-legal, .footer-address { margin-bottom: 0.4rem; }
.footer-small {
  font-size: 0.85rem;
  opacity: 0.88;
  max-width: 70ch;
  margin-top: 1rem;
}
.footer-links { margin-top: 1.25rem; }
.footer-copy {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.25);
  opacity: 0.85;
  margin-bottom: 0;
}

/* ================================================================
   Mobile — everything below must work at 360px wide with no
   sideways scrolling.
   ================================================================ */

@media (max-width: 820px) {

  .nav-toggle { display: inline-flex; }

  .nav {
    display: none;
    flex-direction: column;
    gap: 0;
    width: 100%;
    order: 3;
    border-top: 1px solid var(--line);
    padding-bottom: 0.5rem;
  }
  .nav.is-open { display: flex; }
  .nav a {
    padding: 0.85rem 0;
    min-height: 44px;
    border-bottom: 1px solid var(--line);
  }

  .site-header__wa { order: 2; }
}

/* Phones: a slightly smaller logo so the header stays on one row. */
@media (max-width: 480px) {
  .brand__logo { height: 54px; }
}

@media (max-width: 600px) {

  body { font-size: 1rem; }

  .section { padding: 2.25rem 0; }

  /* 2 x 3 on phones. minmax(0, …) lets a column shrink below its
     content, so a long figure can never push the page sideways. */
  .rate-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .rate-card { padding: 0.8rem 0.75rem 0.9rem; }
  .rate-card__code { font-size: 1.15rem; }
  .rate-card__figure { font-size: 1.4rem; }
  .rate-card__caption,
  .rate-card__compare { font-size: 0.78rem; }

  .hero__actions .btn { width: 100%; }

  /* The table turns into stacked cards, one per currency, so nothing
     is cut off and the page never scrolls sideways. */
  .table-wrap { overflow-x: visible; }

  .rates-table,
  .rates-table tbody,
  .rates-table tr,
  .rates-table td,
  .rates-table th { display: block; width: 100%; }

  /* ...except the currency cell, which keeps its flag beside the code
     rather than dropping it onto its own line. */
  .rates-table th.cur { display: flex; }

  .rates-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .rates-table { background: transparent; border: none; }

  /* Stacked cards, so the zebra striping and the right-alignment from
     the desktop table both have to be switched back off. */
  .rates-table tbody tr,
  .rates-table tbody tr:nth-child(even) {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    padding: 0.85rem 1rem;
  }

  .rates-table td.num { text-align: left; }

  .rates-table th,
  .rates-table td { border-bottom: none; padding: 0.2rem 0; }

  .rates-table .cur { margin-bottom: 0.5rem; }

  /* Each value gets its own label, since the column headings are hidden */
  .rates-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.78rem;
    color: var(--ink-soft);
    font-weight: 400;
  }

  .rates-table td.num { font-size: 1.15rem; padding-bottom: 0.45rem; }

  /* Stock and the WhatsApp link sit side by side on one line.
     Neither carries a data-label, so neither gets a heading above it. */
  .rates-table .stock-cell,
  .rates-table .action-cell {
    display: inline-block;
    width: auto;
    padding-top: 0.5rem;
  }
  .rates-table .action-cell { margin-left: 1rem; }
}