/* Self-hosted fonts: Inter (body/tables) + Space Grotesk (headings/prices).
   Latin subsets only; Indic scripts fall back to system fonts by design. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/static/fonts/Inter-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/static/fonts/Inter-var-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: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/static/fonts/SpaceGrotesk-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/static/fonts/SpaceGrotesk-var-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 {
  --bg: #0e1113;
  --panel: #171c1f;
  --panel2: #1e2529;
  --line: #2a3237;
  --ink: #eef2f4;
  --ink-soft: #c9d3d8;
  --muted: #93a1a8;
  --gold: #e8b64c;
  --green: #3ecf8e;
  --red: #ff6b6b;
  --amber: #d97706;
  --wa: #147a3d; /* WhatsApp button: dark enough for white text at 4.5:1 */
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  background-image: radial-gradient(circle at 50% -180px, rgba(232,182,76,.09), transparent 560px);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px; line-height: 1.6;
}
h1, h2, h3, .brand-word, .cell-price, .total-num {
  font-family: 'Space Grotesk', 'Inter', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
h1, h2 { letter-spacing: -0.015em; }
/* form controls do NOT inherit fonts by default — force the brand font */
button, input, select, textarea { font: inherit; }
/* rate tables and price figures: digits align in neat columns */
table, .cell-price, .total-num, .quick-out {
  font-variant-numeric: tabular-nums;
}
/* visible keyboard focus, sitewide */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* state changes ease instead of jumping */
a, button, select, summary, .chip, .tab, .seg button, .signup-btn, .wa-share, .fb-fab {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease,
    box-shadow .15s ease, transform .15s ease, filter .15s ease;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
/* screen-reader-only text (labels that shouldn't render visually) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* keyboard users can jump straight past the header */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { position: fixed; top: 10px; left: 10px; z-index: 300;
  background: var(--gold); color: #1a1408; font-weight: 700;
  padding: 10px 16px; border-radius: 8px; }
iframe { max-width: 100%; }
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
/* spacing utilities: replace one-off inline styles in templates */
.mb0 { margin-bottom: 0; }
.mt8 { margin-top: 8px; }
.mt14 { margin-top: 14px; }
.mt16 { margin-top: 16px; }
.m10v { margin: 10px 0; }
.mt10 { margin: 10px 0 0; }
.w100 { width: 100%; }
.widget-frame { display: block; width: 100%; max-width: 360px; border: 0; border-radius: 12px; }
.codebox { padding: 12px; overflow-x: auto; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-head { border-bottom: 1px solid var(--line); background: var(--panel); }
.head-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; gap: 18px; row-gap: 2px; flex-wrap: wrap; }
a.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.4rem; font-weight: 800; letter-spacing: .5px; color: var(--ink); }
a.brand:hover { text-decoration: none; }
.brand-word span { color: var(--gold); }
.logo-mark { flex: 0 0 auto; display: block; }
.lang-menu { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); color: var(--ink); font: inherit; font-size: .9rem; cursor: pointer; }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { border-color: var(--gold); }
.lang-btn .lang-globe { color: var(--gold); }
.lang-caret { color: var(--muted); font-size: .65rem; }
.lang-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 175px; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.5); display: flex; flex-direction: column; }
.lang-panel.hidden { display: none; }
.lang-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; color: var(--ink); font-size: .93rem; }
.lang-item:hover { background: var(--panel); text-decoration: none; }
.lang-item.lang-cur { color: var(--gold); font-weight: 600; }
.lang-tick { font-size: .875rem; }

h1 { font-size: 1.9rem; margin: 28px 0 10px; }
h2 { font-size: 1.25rem; margin: 34px 0 10px; }
.intro { color: var(--ink-soft); max-width: 70ch; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin-top: 18px;
  box-shadow: 0 14px 36px rgba(0,0,0,.14); }
.card > h2:first-child { margin-top: 0; }
.card-top { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.pill { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 14px; font-size: .9rem; }
.tabs { display: flex; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.tab { background: none; border: 0; color: var(--muted); padding: 9px 16px; min-height: 44px; font-size: .95rem; cursor: pointer; }
.tab:hover { color: var(--ink); background: var(--panel); }
.tab.active, .tab.active:hover { background: var(--gold); color: #1a1408; font-weight: 700; }

.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 16px; }
.price-cell { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.price-cell.price-primary { border-color: rgba(232,182,76,.5);
  background: linear-gradient(145deg, rgba(232,182,76,.09), var(--panel2) 58%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.price-cell.hidden { display: none; }
.cell-label { color: var(--muted); font-size: .875rem; }
.cell-price { font-size: 1.7rem; font-weight: 800; margin: 2px 0; }
.chg { font-size: .875rem; }
.up { color: var(--green); }
.down { color: var(--red); }

/* Day-on-day movement. The badge carries the number so direction reads at a
   glance; the comparison date sits outside it, quieter, because it qualifies
   the badge rather than competing with it. */
.chg-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 6px; min-height: 24px;
}
.chg-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: .82rem; font-weight: 600; line-height: 1.3;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  border: 1px solid transparent;
}
/* Tinted rather than solid: on a dark card a saturated block would outweigh
   the price itself, which is the number people actually came for. */
.chg-pill.up {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 14%, transparent);
  border-color: color-mix(in srgb, var(--green) 30%, transparent);
}
.chg-pill.down {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 14%, transparent);
  border-color: color-mix(in srgb, var(--red) 30%, transparent);
}
.chg-pill.flat {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  border-color: color-mix(in srgb, var(--muted) 24%, transparent);
}
.chg-since { font-size: .78rem; color: var(--muted); white-space: nowrap; }

select.place-sel { cursor: pointer; color: var(--ink); font-size: .9rem; max-width: 200px; min-height: 44px; }
.place-row { display: flex; gap: 8px; flex-wrap: wrap; }

.picker { position: relative; }
.picker-btn { cursor: pointer; color: var(--ink); min-height: 44px;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; }
.picker-btn:hover { border-color: var(--gold); }
.picker-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; width: 270px; max-width: calc(100vw - 24px);
  background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.picker-panel.hidden { display: none; }
#pickerSearch { width: 100%; background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; font-size: .95rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip { display: inline-flex; align-items: center; background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: 8px 14px; min-height: 44px; font-size: .875rem; cursor: pointer; }
.chip:hover { border-color: var(--gold); }
.chip-recent { color: var(--gold); border-color: var(--gold); }
.picker-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; }
.picker-item { text-align: left; background: none; border: 0; color: var(--ink);
  padding: 10px 8px; border-radius: 8px; cursor: pointer; font-size: .9rem; }
.picker-item:hover { background: var(--panel); }
.city-chips { margin: 4px 0 14px; align-items: center; }
.city-chips .chip { text-decoration: none; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--gold); }

.calc { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 16px; }
.wrow { display: flex; gap: 6px; }
.wrow input { flex: 1 1 90px; min-width: 0; }
.wrow select { flex: 1 1 120px; min-width: 0; }
.wrow select { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
.weights { margin-top: 18px; }
.weights h2 { margin: 0 0 8px; font-size: 1.05rem; }
.weights table { font-size: .95rem; }
.calc-row { display: flex; gap: 14px 16px; flex-wrap: wrap; align-items: flex-end; }
/* every field shares one flexible width so labels and boxes line up in columns
   instead of each control sizing itself to its own content */
.calc-row > .field { flex: 1 1 170px; min-width: 0; }
.calc-row > .wfield { flex: 1.5 1 250px; }
.field label { display: block; color: var(--muted); font-size: .875rem; margin-bottom: 6px; }
.field input, .field select {
  background: var(--panel2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 12px; font-size: 1rem;
  width: 100%; max-width: 100%; min-width: 0;
  /* one fixed height for every control so the labels above them and the
     boxes themselves sit on the same two lines, input or select */
  height: 44px;
}
/* purity buttons fill the same column width and height as the inputs beside them */
.field .seg { width: 100%; }
.field .seg button { flex: 1 1 0; min-width: 0; padding: 9px 8px; min-height: 44px; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { background: var(--panel2); color: var(--muted); border: 0; padding: 9px 16px; min-height: 44px; cursor: pointer; font-size: .95rem; }
.seg button:hover { color: var(--ink); background: var(--panel); }
.seg button.active, .seg button.active:hover { background: var(--gold); color: #1a1408; font-weight: 700; }

.calc-out { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-top: 18px; }
.hide { display: none; }
.hidden { display: none; }
.mode-seg { display: inline-flex; margin-bottom: 14px; }
.total .pulse, .total-num.pulse { animation: revpulse .35s ease; }
.breakup { width: 100%; border-collapse: collapse; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; }
.breakup td, .breakup th { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.breakup td:last-child { text-align: right; font-weight: 600; }
/* quick-calc result box lines up with the inputs beside it, and gets
   enough width to keep the whole total on one line */
.quick-out-field { align-self: flex-end; }
.calc-row > .quick-out-field { flex: 2 1 300px; }
.total { background: #16251d; border: 1px solid #29513c; border-radius: 10px; padding: 14px; text-align: center; }
.total-num { font-size: 1.6rem; font-weight: 800; color: var(--green); }
@keyframes revpulse { 0% { transform: scale(.95); opacity: .35; } 100% { transform: scale(1); opacity: 1; } }

.compare { margin-top: 18px; }
.compare > h2:first-child { margin-top: 0; }
.tablebox { overflow-x: auto; }
.tablebox[data-keyboard-scroll="true"]:focus-visible { outline: 2px solid var(--gold);
  outline-offset: 3px; border-radius: 6px; }
table.cmp { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); font-size: .92rem; }
.cmp th, .cmp td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp th { background: var(--panel2); }
.cmp th[scope="row"] { background: transparent; font-weight: 600; }
.cmp tr.benchmark { background: #14202a; }
.cmp .fail { color: var(--red); font-style: italic; text-align: left; }
/* comparison table: site name left, price columns spread evenly — no dead gap */
.compare .cmp th:first-child { width: 40%; }
.compare .cmp th:not(:first-child), .compare .cmp td:not(:first-child) { text-align: right; white-space: nowrap; }
/* phones: tighter tables so all three purity columns fit on a 375px screen */
@media (max-width: 640px) {
  .cmp th, .cmp td { padding: 9px 7px; font-size: .875rem; white-space: nowrap; }
  .compare .cmp th:first-child { width: auto; }
  .compare .cmp td:first-child, .compare .cmp th:first-child { white-space: normal; }
}

.states { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.states a { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: .9rem; color: var(--ink); }
.states a:hover { border-color: var(--gold); text-decoration: none; }
/* phones: two columns, not a 1,200px single-file scroll */
@media (max-width: 480px) { .states { grid-template-columns: repeat(2, 1fr); } .states a { font-size: .875rem; padding: 9px 10px; } }

.site-foot { border-top: 1px solid var(--line); margin-top: 48px; padding: 22px 0 40px; background: var(--panel); }
@media (max-width: 760px) { .calc-out { grid-template-columns: 1fr; } }

/* LIVE badge: green pulse while data is fresh (<90 min), amber when older */
.live-pill { display: inline-flex; align-items: center; gap: 8px; border-color: rgba(62,207,142,.45); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: 0 0 auto;
  animation: livepulse 1.8s ease-out infinite; }
@keyframes livepulse {
  0% { box-shadow: 0 0 0 0 rgba(62,207,142,.55); }
  70% { box-shadow: 0 0 0 7px rgba(62,207,142,0); }
  100% { box-shadow: 0 0 0 0 rgba(62,207,142,0); }
}
.live-pill.is-stale { border-color: rgba(217,119,6,.5); }
.live-pill.is-stale .live-dot { background: var(--amber); animation: none; }

/* Plain text carries the meaning; colour and the dot are secondary cues. */
.data-state-badge { display: inline-flex; align-items: flex-start; gap: 8px;
  max-width: 100%; line-height: 1.45; }
.data-state-dot { width: 9px; height: 9px; margin-top: .34em; border-radius: 50%;
  flex: 0 0 auto; background: var(--amber); }
.data-state-badge.state-current { border-color: rgba(62,207,142,.45); }
.data-state-badge.state-current .data-state-dot { background: var(--green); }
.data-state-badge.state-failed { border-color: rgba(255,107,107,.55); }
.data-state-badge.state-failed .data-state-dot { background: var(--red); }
.data-state-badge.state-stale, .data-state-badge.state-unknown {
  border-color: rgba(217,119,6,.55); }
.price-source-status { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .875rem; line-height: 1.45; }
.price-source-status strong { color: var(--ink-soft); }
.price-source-status.state-failed strong { color: var(--red); }
.comparison-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin: 14px 0; }
.comparison-status-grid .data-state-badge { width: 100%; }

/* currency picker on country pages — must be impossible to miss */
.ccy-pick { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border: 1px solid var(--gold); border-radius: 10px; background: var(--panel2);
  cursor: pointer; box-shadow: 0 0 0 3px rgba(232,182,76,.08); }
.ccy-pick:hover, .ccy-pick:focus-within { box-shadow: 0 0 0 3px rgba(232,182,76,.22); }
.ccy-pick .ccy-icon { font-size: 1rem; }
.ccy-pick select { appearance: none; -webkit-appearance: none; background: transparent; border: 0;
  color: var(--gold); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; padding: 8px 2px; }
.ccy-pick select option { color: var(--ink); background: var(--panel); font-weight: 400; }
.ccy-pick .lang-caret { color: var(--gold); }

/* comparison table section headers: 22K boards vs pure-gold bars never mix */
.cmp-sec td { background: var(--panel2); color: var(--gold); font-weight: 700; font-size: .88rem;
  letter-spacing: .3px; padding: 9px 14px; border-top: 2px solid var(--line); }

/* Country source tables contain prose as well as numbers. Keep explanatory
   text from squeezing the source column into a tall, word-by-word strip. */
.source-observation-table { table-layout: fixed; }
.source-observation-table .source-col { width: 32%; }
.source-observation-table .price-col { width: 17%; }
.source-observation-table .date-col { width: 33%; }
.source-observation-table .difference-col { width: 18%; }
.compare .source-observation-table th:first-child { width: auto; }
.compare .source-observation-table th,
.compare .source-observation-table td { text-align: left; white-space: normal; overflow-wrap: break-word; }
.compare .source-observation-table .source-price-cell,
.compare .source-observation-table .source-difference-cell { text-align: right; white-space: nowrap; }
.source-name-cell > a { font-weight: 650; }
.source-date-cell { color: var(--muted); font-size: .875rem; line-height: 1.45; }
.source-details { margin-top: 5px; color: var(--muted); font-size: .875rem; }
.source-details > summary { width: fit-content; cursor: pointer; color: var(--muted); }
.source-details > summary:hover { color: var(--ink); }
.source-details > p { margin: 5px 0 0; line-height: 1.45; }
.source-status-details { margin-top: 7px; font-size: .875rem; }
.source-status-details > summary { display: inline-flex; align-items: center; cursor: pointer;
  border: 1px solid rgba(240,180,41,.36); border-radius: 999px; padding: 3px 8px;
  background: rgba(240,180,41,.07); color: var(--amber); font-weight: 650; }
.source-status-details > p { margin: 6px 0 0; color: var(--amber); line-height: 1.4; }

/* main navigation: inline with the logo on desktop, wraps below it on phones */
.main-nav { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.main-nav a { color: var(--muted); font-size: .92rem; padding: 9px 13px; border-radius: 8px; white-space: nowrap; }
.main-nav a:hover { color: var(--ink); background: var(--panel2); text-decoration: none; }
.main-nav a.nav-on { color: var(--gold); background: var(--panel2); font-weight: 600; }
@media (max-width: 920px) {
  .main-nav { order: 3; flex-basis: 100%; margin: 4px -5px 0; padding: 2px 0 0;
    overflow-x: auto; flex-wrap: nowrap; scroll-snap-type: x proximity;
    scrollbar-width: thin; scrollbar-color: var(--muted) transparent;
    -webkit-overflow-scrolling: touch; }
  .main-nav::-webkit-scrollbar { display: block; height: 5px; }
  .main-nav::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 999px; }
  .main-nav a { flex: 0 0 auto; text-align: center; min-height: 44px; scroll-snap-align: start; }
}

/* market watch */
.drv .drv-meaning { margin: 8px 0 4px; line-height: 1.45; }
.newslist { display: flex; flex-direction: column; gap: 4px; }
.newsitem { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
/* calm the gold: headlines read in ink, gold appears on hover only */
.newsitem a { color: var(--ink-soft); }
.newsitem a:hover { color: var(--gold); }
.news-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.newscat { cursor: default; flex: 0 0 auto; }
.news-meaning { margin: 6px 0 0; }
.news-meta { margin: 5px 0 0; }
.news-age { color: var(--ink-soft); }

/* signup */
.signup-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.signup-form input:not([type=checkbox]) { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: .95rem; flex: 1 1 180px; }
/* The label holds a checkbox + a run of text. Flex must see exactly TWO
   children, or every text run and the <a> becomes its own column. */
.consent { display: flex; gap: 10px; align-items: flex-start; color: var(--muted);
  font-size: .875rem; line-height: 1.55; flex: 1 1 100%; cursor: pointer; }
.consent > input[type=checkbox] { flex: 0 0 auto; width: 16px; height: 16px;
  margin: 2px 0 0; accent-color: var(--gold); cursor: pointer; }
.consent > span { flex: 1 1 auto; min-width: 0; }
.signup-form input[name=phone] { flex: 1.35 1 210px; }
.signup-btn { background: var(--gold); color: #1a1408; font-weight: 700; border: 0; border-radius: 8px; padding: 11px 22px; min-height: 44px; font-size: .95rem; cursor: pointer; }
.signup-btn { box-shadow: 0 7px 18px rgba(232,182,76,.12); }
.signup-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* compare */
.cmp-pick { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.verdict { background: #16251d; border: 1px solid #29513c; border-radius: 10px; padding: 12px 16px; }
.tips-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.tips-h { margin: 0 0 6px; font-size: 1rem; }
.tips-2col ul { margin: 0; padding-left: 20px; }
.tips-2col li { margin-bottom: 8px; }
.refund-grid { margin: 16px 0; }
.refund-control { background: var(--panel2); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; }
.refund-control:empty { display: none; }
.refund-control p { margin: 8px 0; }
.calc-limit { margin: 12px 0 0; }

/* quick calc on rate pages */
.quick-out { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
.quick-out strong { font-size: 1.05rem; }

/* market story */
.storyline { font-size: 1.05rem; margin: 10px 0; max-width: 75ch; }
.story-honest { color: var(--muted); font-size: .95rem; border-top: 1px solid var(--line); padding-top: 12px; }
.datacard summary { cursor: pointer; color: var(--gold); font-weight: 600; padding: 8px 0; }
.datacard summary:hover { text-decoration: underline; }
.datacard { margin-top: 8px; }

/* history chart: readable on phones by scrolling instead of shrinking */
.chart-scroll { overflow-x: auto; }
.chart-scroll svg { min-width: 560px; }

/* mobile tables: sticky label column + a visible swipe cue */
.swipe-hint { display: none; }
@media (max-width: 640px) {
  .swipe-hint { display: block; margin: 6px 0 0; }
  .cmp tr:not(.cmp-sec) > th:first-child,
  .cmp tr:not(.cmp-sec) > td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--panel); box-shadow: 2px 0 6px rgba(0,0,0,.35);
    width: 40vw; min-width: 40vw; max-width: 40vw;
    white-space: normal; font-size: .875rem;
  }
  /* highlighted rows keep their tint in the sticky column too */
  .cmp tr.benchmark td:first-child { background: #14202a; }
  .cmp .cmp-sec > td { position: static; width: auto; min-width: 0; max-width: none;
    white-space: normal; box-shadow: none; }
  .cmp th, .cmp td { white-space: nowrap; }
  .cmp td:first-child { white-space: normal; }
}

/* Source observations become scan-friendly cards on phones instead of a
   cramped four-column table. This applies to every country page. */
@media (max-width: 700px) {
  .source-tablebox { overflow: visible; }
  .source-observation-table { display: block; border: 0; background: transparent; }
  .source-observation-table colgroup { display: none; }
  .source-observation-table > tbody { display: block; }
  .source-observation-table .source-columns { display: none; }
  .source-observation-table .cmp-sec { display: block; margin: 18px 0 8px; }
  .source-observation-table .cmp-sec:first-child { margin-top: 0; }
  .source-observation-table .cmp-sec > td { display: block; padding: 9px 11px;
    border: 1px solid var(--line); border-radius: 9px; }
  .source-observation-table .source-row { display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(110px, auto); margin-bottom: 10px;
    border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
    background: var(--panel); }
  .source-observation-table .source-row > td { display: block; position: static;
    width: auto; min-width: 0; max-width: none; padding: 10px 12px; border: 0;
    box-shadow: none; white-space: normal; text-align: left; overflow-wrap: anywhere; }
  .source-observation-table .source-name-cell { grid-column: 1 / -1;
    background: var(--panel2); border-bottom: 1px solid var(--line); }
  .source-observation-table .source-price-cell { font-size: 1.02rem; font-weight: 750; }
  .source-observation-table .source-difference-cell { text-align: right; }
  .source-observation-table .source-date-cell { grid-column: 1 / -1;
    border-top: 1px solid var(--line); }
  .source-observation-table td[data-label]::before { content: attr(data-label); display: block;
    margin-bottom: 3px; color: var(--muted); font-size: .875rem; font-weight: 650;
    letter-spacing: .04em; text-transform: uppercase; }
}

/* shop-quote comparison with the calculator estimate */
.quote-check { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.quote-check label { display: block; color: var(--muted); margin-bottom: 6px; font-size: .92rem; }
.quote-check input { width: 100%; max-width: 320px; background: var(--panel2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; font-size: 1rem; }
.quote-verdict { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; font-size: .95rem; }
.quote-verdict.hidden { display: none; }
.v-fair  { background: rgba(62,207,142,.12); border: 1px solid rgba(62,207,142,.45); }
.v-high  { background: rgba(232,182,76,.12); border: 1px solid rgba(232,182,76,.45); }
.v-vhigh { background: rgba(255,107,107,.12); border: 1px solid rgba(255,107,107,.5); }
.v-low   { background: rgba(88,166,255,.10); border: 1px solid rgba(88,166,255,.4); }
.v-neutral { background: var(--panel2); border: 1px solid var(--line); }

.lang-note { margin: 10px 0 0; }

/* FAQ accordions */
.faq-item { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq-item summary { cursor: pointer; padding: 9px 4px; font-weight: 600; }
.faq-item summary:hover { color: var(--gold); }
.faq-item p { margin: 4px 4px 12px; color: var(--muted); line-height: 1.6; }

/* WhatsApp share */
.wa-row { margin: 10px 0 0; }
.wa-share { display: inline-block; background: var(--wa); color: #fff; font-weight: 600;
  padding: 10px 16px; border-radius: 10px; text-decoration: none; font-size: .93rem; }
.wa-share:hover { background: #0f6a34; text-decoration: none; }

/* footer money-page links: tidy icon grid */
.foot-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 4px 14px; padding: 16px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.foot-links a { display: flex; align-items: center; color: var(--muted);
  font-size: .88rem; padding: 9px; border-radius: 8px; }
.foot-links a:hover { color: var(--ink); background: var(--panel2); text-decoration: none; }
.rate-declaration { margin: 14px 0 12px; padding: 13px 15px; border: 1px solid var(--line);
  border-left: 3px solid var(--gold); border-radius: 10px; background: rgba(240,180,41,.035);
  color: var(--muted); font-size: .9rem; line-height: 1.55; }
.rate-declaration > strong { display: block; margin-bottom: 3px; color: var(--ink); }
.rate-declaration p { margin: 0; }

/* Advertising is emitted only when the backend explicitly enables it. */
.ad-slot { display: block; position: relative; margin-top: 22px; min-height: 110px;
  padding: 28px 8px 8px;
  background: var(--panel); border: 1px dashed var(--line); border-radius: 10px; }
.ad-tag { position: absolute; top: 7px; right: 11px; color: var(--muted);
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; }
.ad-inner { width: 100%; min-height: 90px; }
.ad-placeholder { color: var(--muted); font-size: .875rem; }
@media (max-width: 640px) { .ad-slot { min-height: 100px; } }

/* floating feedback button */
.fb-fab { position: fixed; right: max(18px, env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 80;
  width: 52px; height: 52px; border-radius: 50%; background: var(--gold); color: #1a1408;
  display: flex; align-items: center; justify-content: center; font-size: 1.45rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.45); text-decoration: none; }
.fb-fab:hover { transform: scale(1.07); text-decoration: none; }
.fb-label { display: none; }
@media (max-width: 640px) {
  .site-foot { padding-bottom: calc(36px + env(safe-area-inset-bottom)); }
  .fb-fab { position: static; width: 100%; height: 44px; border-radius: 10px;
    margin-top: 14px; gap: 8px; box-shadow: none; font-size: 1rem; font-weight: 700; }
  .fb-fab:hover { transform: none; }
  .fb-label { display: inline; }
}

/* feedback form */
.fb-form textarea { width: 100%; background: var(--panel2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; padding: 12px; font: inherit; font-size: 1rem; }
.fb-form .signup-btn { margin-top: 12px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Non-blocking first-visit preferences: rates remain visible and usable. */
.wel-back { position: relative; z-index: 30; background: #12181b;
  border-bottom: 1px solid var(--line); padding: 12px 0; }
.wel-back.hidden { display: none; }
.wel { position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding-top: 16px; padding-bottom: 16px; }
.wel-summary { display: flex; align-items: center; gap: 16px; padding-right: 42px; }
.wel-copy { flex: 1 1 auto; min-width: 0; }
.wel-title { margin: 0 0 4px; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em;
  font-family: 'Space Grotesk', 'Inter', -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.wel-sub { margin: 0; }
.wel-open { min-height: 44px; background: transparent; border: 1px solid var(--gold);
  color: var(--gold); border-radius: 8px; padding: 8px 14px; cursor: pointer; white-space: nowrap; }
.wel-open:hover, .wel-open[aria-expanded="true"] { background: var(--panel2); }
.wel-q { margin: 16px 0 8px; font-weight: 600; }
.wel-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wel-chips button { background: var(--panel2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: 10px 16px; min-height: 44px; font-size: .92rem; cursor: pointer; }
.wel-chips button:hover { border-color: var(--gold); }
.wel-chips button.active, .wel-chips button.active:hover { background: var(--gold); color: #1a1408; font-weight: 700; border-color: var(--gold); }
.wel-go { margin-top: 18px; width: 100%; }
.wel-x { position: absolute; top: 4px; right: 4px; background: none; border: 0;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 1.2rem; cursor: pointer; }
.wel-x:hover { color: var(--ink); }
.wel-location { margin-top: 10px; }
.wel-locate { min-height: 44px; padding: 8px 14px; border: 1px solid var(--line);
  border-radius: 8px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.wel-locate:hover { border-color: var(--gold); color: var(--ink); }
.wel-locate:disabled { cursor: wait; opacity: .7; }
.wel-location p { margin: 6px 0 0; }
.js .currency-pending .px, .js .currency-pending .pxd { visibility: hidden; }

/* Progressive disclosure for the long home-page evidence sections. */
.home-more { margin-top: 18px; }
.home-more > summary { cursor: pointer; list-style: none; min-height: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; color: var(--gold); font-weight: 650; }
.home-more > summary::-webkit-details-marker { display: none; }
.home-more > summary::after { content: "+"; font-size: 1.2rem; }
.home-more[open] > summary::after { content: "−"; }

.data-notice { margin: 12px 0; padding: 11px 14px; border-radius: 10px;
  background: rgba(217,119,6,.11); border: 1px solid rgba(217,119,6,.5);
  color: var(--ink-soft); }
.freshness-disclosure { padding: 0; }
.freshness-disclosure > summary { cursor: pointer; list-style: none; min-height: 44px;
  display: flex; align-items: center; gap: 5px; padding: 9px 42px 9px 14px;
  position: relative; line-height: 1.45; }
.freshness-disclosure > summary::-webkit-details-marker { display: none; }
.freshness-disclosure > summary::after { content: "+"; position: absolute; right: 14px;
  top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 1.15rem; }
.freshness-disclosure[open] > summary::after { content: "−"; }
.freshness-disclosure > p { margin: 0; padding: 0 14px 12px; color: var(--muted); }
.source-status { display: block; margin-top: 3px; color: var(--amber); font-size: .875rem; }
.source-detail { display: block; margin-top: 3px; }

/* Home-page answer hierarchy: show the rate card before sharing and travel links. */
.home-hero { margin-bottom: 10px; }
.home-hero .intro { margin-bottom: 8px; }
.trust-line { margin-top: 0; }
.rate-card { margin-top: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.012), var(--panel)); }
.home-actions { margin: 16px 0 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.home-actions .ibja-note { margin: 0 0 10px; }
.home-action-row { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.home-action-row .wa-row { margin: 0; }
.home-action-row .city-chips { flex: 1 1 470px; margin: 0; }

/* The calculator page already has an H1; the form starts immediately. */
.calculator-form { margin-top: 16px; padding-top: 16px; }
.calc-intro { margin-bottom: 12px; }
.calculator-card > .data-notice { font-size: .88rem; }

/* ============================================================
   Phone alignment (<=560px)
   On a wide screen these controls sit side by side. When they
   wrap onto a phone each one keeps its own content width, so
   the column ends up as a ragged staircase. Below 560px every
   control stretches to the same width: left AND right edges
   line up, and each tap target is full-thumb width.
   ============================================================ */
@media (max-width: 560px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .head-row { gap: 10px; padding-top: 10px; padding-bottom: 8px; }
  a.brand { font-size: 1.25rem; }
  .lang-btn { padding: 7px 10px; }
  .main-nav { margin-top: 2px; }
  .main-nav a { padding: 8px 12px; font-size: .88rem; }

  h1 { font-size: 1.65rem; line-height: 1.2; margin-top: 22px; }
  .home-hero .intro { line-height: 1.5; }

  .wel-back { padding: 8px 0; }
  .wel { padding-top: 10px; padding-bottom: 10px; }
  .wel-summary { flex-direction: column; align-items: stretch; gap: 8px; padding-right: 46px; }
  .wel-title { font-size: 1rem; line-height: 1.25; margin: 0; }
  .wel-sub { display: none; }
  .wel-open { width: 100%; min-height: 44px; padding: 7px 10px; font-size: .875rem; white-space: normal; }
  .wel-x { top: 1px; right: 1px; width: 44px; height: 44px; }
  .wel-locate { width: 100%; }

  /* card header: LIVE pill, metal tabs, country + city pickers */
  .card-top { align-items: stretch; gap: 10px; }
  .card-top > * { flex: 1 1 100%; width: 100%; }
  .card-top .metal-pane .data-state-badge { width: 100%; }
  .card-top .tabs .tab { flex: 1 1 0; min-width: 0; }
  .place-row { flex-direction: row; align-items: stretch; flex-wrap: nowrap; }
  .place-row > * { flex: 1 1 0; width: 50%; min-width: 0; }
  select.place-sel { max-width: none; width: 100%; }
  .picker-btn { width: 100%; display: flex; min-width: 0; }
  .picker-btn > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .picker-panel { left: 0; right: 0; width: auto; }

  .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .price-cell { padding: 11px 12px; }
  .price-cell.price-primary { grid-column: 1 / -1; }
  .price-cell:not(.price-primary) .cell-price { font-size: 1.4rem; }
  .home-action-row { align-items: stretch; }
  .home-action-row .wa-row, .home-action-row .wa-share { width: 100%; text-align: center; }
  .home-action-row .city-chips { flex-basis: 100%; }

  .calculator-page .crumb { display: none; }
  .calculator-page h1 { margin-bottom: 8px; }
  .calculator-page .calc-intro { margin-top: 0; line-height: 1.5; }
  .calculator-card { padding: 14px; margin-top: 14px; }
  .calculator-form { margin-top: 14px; padding-top: 14px; }

  /* calculator + contact: one field per row, all the same width */
  .calc-row > .field, .calc-row > .wfield { flex: 1 1 100%; }
  .quick-out-field { align-self: stretch; }
  .quote-check input { max-width: none; }
  .mode-seg { display: flex; width: 100%; }
  .mode-seg button { flex: 1 1 0; min-width: 0; }

  /* signup: full-width button is easier to hit with a thumb */
  .signup-btn { width: 100%; }

  /* chip rows: the intro label takes its own line instead of
     stealing the first chip slot and pushing the rest off-grid */
  .city-chips > span { flex: 1 1 100%; margin-bottom: 2px; }

  /* compare picker: two country selects + button, stacked */
  .cmp-pick { flex-direction: column; align-items: stretch; }
  .cmp-pick > * { width: 100%; }
  .cmp-pick > .muted { text-align: center; }
}

/* "Is today's rate out yet?" strip. Green = that board has published today,
   amber = still on an older day. Same colour vocabulary as the LIVE pill so
   a returning visitor does not have to learn a second one. */
.rate-clock { margin-top: 14px; }
.clock-list { list-style: none; margin: 12px 0 6px; padding: 0; }
.clock-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--line); }
.clock-row:last-child { border-bottom: 0; }
.clock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  flex: 0 0 auto; align-self: center; }
.clock-row.is-waiting .clock-dot { background: var(--amber); }
.clock-name { font-weight: 600; min-width: 8.5rem; }
.clock-state { color: var(--ink-soft); font-size: .9rem; }
.clock-row.is-waiting .clock-state { color: var(--amber); }
.clock-px { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); }
.clock-notes p { margin: 8px 0 0; }
@media (max-width: 480px) {
  /* On narrow screens every row breaks the same way — name, then status,
     then price. Without this the short statuses stay inline and the long
     ones wrap, so the list looks ragged. */
  /* leave room for the 8px dot + 10px gap so it stays on the name's line */
  .clock-name { min-width: 0; width: calc(100% - 20px); }
  .clock-state, .clock-px { width: 100%; margin-left: 0; }
  .clock-dot { align-self: baseline; position: relative; top: -2px; }
}

/* Top ticker: the answer at a glance, without pushing the headline price
   down the page. Fixed height so it never causes layout shift. */
.ticker { background: var(--panel2); border-bottom: 1px solid var(--line);
  height: 48px; overflow: hidden; }
.ticker-inner { display: flex; align-items: center; gap: 10px; height: 48px; }
.ticker-view { flex: 1 1 auto; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.ticker-track { display: flex; width: max-content;
  animation: tk-scroll 60s linear infinite; }
.ticker-seq { display: flex; }
/* Pause on hover and on keyboard focus, plus the explicit button below. */
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track,
.ticker.is-paused .ticker-track { animation-play-state: paused; }
@keyframes tk-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.tk-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 0 18px; font-size: .875rem; color: var(--ink-soft); text-decoration: none;
  border-right: 1px solid var(--line); }
.tk-item:hover .tk-name { text-decoration: underline; }
.tk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: 0 0 auto; }
.tk-item.is-wait .tk-dot { background: var(--amber); }
.tk-name { font-weight: 600; color: var(--ink); }
.tk-px { font-variant-numeric: tabular-nums; color: var(--gold); }
.tk-item.is-wait .tk-say { color: var(--amber); }
.tk-world .tk-say { color: var(--muted); }
.tk-kind { color: var(--muted); font-size: .875rem; text-transform: uppercase;
  letter-spacing: .035em; }

@media (max-width: 640px) {
  .comparison-status-grid { grid-template-columns: 1fr; }
}

.ticker-pause { flex: 0 0 auto; background: transparent; border: 1px solid var(--line);
  color: var(--muted); border-radius: 8px; width: 44px; height: 44px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.ticker-pause:hover { color: var(--ink); border-color: var(--gold); }

/* Reduce-motion: no movement at all. The strip becomes a normal
   side-scrolling row the visitor drags themselves. */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker-view { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .ticker-seq:nth-child(2) { display: none; }
}

/* Big-move alert. Quiet days show nothing in the strip at all — the absence
   is the message. In the card the line always shows, including "no change". */
.clock-moves { display: flex; flex-direction: column; gap: 4px; }
.mv strong { color: var(--ink); }
.mv-big { color: var(--ink); }
.mv-up strong, .tk-up .tk-px { color: var(--green); }
.mv-down strong, .tk-down .tk-px { color: var(--red); }
.mv-none { color: var(--muted); }
.tk-move .tk-px { font-weight: 700; }