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

   The full design spec is docs/webpagedesign.md (decision 37).
   Direction: simple, clean and easy to navigate. Warm amber on white
   with charcoal bands (decision 39); Raleway for headings, Arimo for
   the rest (decision 37).

   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.
   ================================================================= */

/* Two fonts, both self-hosted and free (SIL Open Font Licence; the
   licence files sit beside them). Each is one variable-weight file,
   so a single @font-face covers every weight. */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/raleway-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

@font-face {
  font-family: "Arimo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/arimo-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 {
  /* Colours: the warm-amber palette of decision 25, restored by
     decision 39 after the orange + dark blue of decision 37 was tried
     and turned down. Fonts stay as decision 37 set them. */

  /* 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 it serves
     buttons, links and the big rate figures alike. */
  --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;

  --font-body:    "Arimo", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-display: "Raleway", "Arimo", 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;
  line-height: 1.15;
  margin: 0 0 0.5em;
  /* Raleway's default numbers are old-style and sit at uneven heights. */
  font-variant-numeric: lining-nums;
}

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
   ---------------------------------------------------------------- */

/* A dark header, after xe.com (decision 42). It shares the charcoal of
   the home page's top section, "How to" and "Common questions". */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--dark);
  transition: box-shadow 0.2s ease;
}

/* app.js adds these as you scroll. Over white or grey content a soft
   shadow separates the header from the page; while a dark band is
   right underneath, the shadow is dropped so the two merge into one
   block (a shadow on the same colour shows up as a seam). */
.site-header.is-scrolled { box-shadow: 0 2px 14px rgba(0, 0, 0, 0.30); }
.site-header.is-over-dark { box-shadow: none; }

/* Amber focus rings vanish on charcoal (about 2.4:1); use white. */
.site-header a:focus-visible,
.site-header button:focus-visible { outline-color: #FFFFFF; }

.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: #FFFFFF;
  text-decoration: none;
  padding: 0.6rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--accent-on-dark); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 0.85rem;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.95rem;
  color: #FFFFFF;
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 17px; height: 2px;
  background: #FFFFFF;
  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: 700;
  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; }

/* The top of the home page: the same charcoal as the header, so the two
   read as one block (decision 42). It holds only the headline and the
   converter; the featured rates sit on white below it. */
.hero {
  padding: 2.5rem 0 3.25rem;
  background: var(--dark);
  color: #FFFFFF;
}
.hero a:focus-visible { outline-color: #FFFFFF; }

.hero__title { max-width: 18ch; color: #FFFFFF; }
.hero__accent { color: var(--accent-on-dark); display: block; }   /* 6.9:1 on charcoal */
.hero__lead { max-width: 56ch; font-size: 1.12rem; margin-bottom: 0.35rem; }
.hero__licence {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.78);   /* 9.5:1 on charcoal */
  margin-top: 0;
}
.hero__licence a { font-weight: 600; color: var(--accent-on-dark); }
.hero__subhead { margin-top: 0.5rem; }

/* Featured rates, on white below the dark top. */
.featured-band { padding-top: 2.25rem; }

/* Headline and converter side by side on wide screens, stacked on
   phones (decision 41). */
.hero__grid {
  display: grid;
  gap: 1.5rem;
}
.hero__grid .converter { margin-top: 0.5rem; }

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 3rem;
    align-items: center;
  }
  .hero__grid .converter { margin-top: 0; }
  .hero__title { font-size: clamp(2.2rem, 3.6vw, 3rem); }
}

/* "View all rates", right under the featured cards (decision 38). */
.featured-more { margin: 1.25rem 0 0; }

.rates-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}


.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-body);   /* rates stay in Arimo */
  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-body);   /* rates stay in Arimo */
  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;
}

/* "Based on market rate" (decision 46): quiet, but always present on a
   market-based rate. */
.rate-card__basis {
  font-size: 0.76rem;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0.25rem 0 0;
}

.rate-basis-note {
  font-size: 0.9rem;
  color: var(--ink-soft);
  max-width: 68ch;
  margin-top: 0.5rem;
}

.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; }

/* "Check stock": stock not confirmed, so the label is a WhatsApp button.
   Amber, bordered and a little taller so it reads as something to tap. */
.stock--check {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.25rem 0.75rem;
  background: var(--accent-soft);
  color: var(--accent-hover);          /* 6.9:1 on the tint */
  border-color: var(--accent);
  text-decoration: none;
}
.stock--check:hover { background: var(--accent); color: #fff; }

/* 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-body);   /* rates stay in Arimo */
  font-weight: 700;
  font-size: 1.05rem;
}
.cur__name {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.cur__basis {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  font-style: italic;
  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
   ---------------------------------------------------------------- */

/* The converter as a tool, not a form (decision 41): a white card, a
   two-part toggle for the direction, "You give" and "You get" boxes,
   and a swap button between them. */
.converter {
  color: var(--ink);   /* don't inherit the hero's white text */
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  padding: 1.35rem;
  margin-top: 1.75rem;
}

/* An h2 for document structure, but sized small on purpose — the
   headline beside 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;
}

.field { display: block; }
.field__label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 0.35rem;
}
.field select {
  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);
}

/* Two-part toggle. The real radio buttons stay in the page, so the
   keyboard and screen readers work as normal; only the labels show. */
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 1rem 0;
  padding: 4px;
  border: none;
  background: var(--bg-alt);
  border-radius: 12px;
}
.seg input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.seg label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 0.97rem;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: center;
  padding: 0 0.5rem;
}
.seg input:checked + label {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(22, 24, 29, 0.14);
}
.seg input:focus-visible + label {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.conv-boxes {
  position: relative;
  display: grid;
  gap: 0.5rem;
}
.conv-box {
  display: block;
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 0.6rem 0.85rem 0.7rem;
  background: var(--surface);
}
.conv-box:focus-within { border-color: var(--accent); }
.conv-box__label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.conv-box__input,
.conv-box__value {
  min-height: 44px;
  font-family: var(--font-body);   /* rates stay in Arimo */
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.conv-box__input {
  width: 100%;
  border: none;
  padding: 0.15rem 0 0;
  color: var(--ink);
  background: transparent;
}
.conv-box__input:focus-visible { outline: none; }   /* the box shows focus */
/* The "e.g. 500" hint must not look like a real amount. */
.conv-box__input::placeholder { font-weight: 400; color: #8A9098; }
.conv-box--out { background: var(--bg-alt); border-color: var(--bg-alt); }
.conv-box__value {
  margin: 0.15rem 0 0;
  display: flex;
  align-items: center;
  color: var(--accent);
}

/* The swap button sits on the join between the two boxes. */
.conv-swap {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--accent);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 1;
}
.conv-swap:hover { border-color: var(--accent); }
.conv-swap .icon { width: 20px; height: 20px; }

/* The one-unit rate under the boxes (S$1 = 0.7722 USD). Quieter than
   the estimate, because the big number lives in "You get". */
.converter__result {
  font-family: var(--font-body);   /* rates stay in Arimo */
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0.85rem 0 0.2rem;
}

/* Inline, not a flex item, so the flag stays beside the text if the
   line wraps on a narrow phone. */
.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;
  font-variant-numeric: lining-nums;
  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-note {
  max-width: 68ch;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* Line icons (Lucide, ISC licence in assets/icons/), used on the
   Contact buttons only (decision 41). One stroke width everywhere,
   coloured by the text around them. */
.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  stroke-width: 1.9;
}

.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 { position: relative; padding-left: 3.4rem; }
.contact-btn__icon {
  position: absolute;
  left: 1.05rem;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  color: var(--accent);
}

.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 rgba(255, 255, 255, 0.15);
    padding-bottom: 0.5rem;
  }
  .nav.is-open { display: flex; }
  .nav a {
    padding: 0.85rem 0;
    min-height: 44px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  .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; }

  /* 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; }
}