/* ============================================================================
   SELF-HOSTED FONTS (5 Aug 2026). Nothing is fetched from Google or a CDN any
   more - every byte is same-origin, so there are no third-party DNS+TLS
   handshakes on the critical path. Both files are preloaded in each page head.
   url() is relative to THIS stylesheet, so it resolves at any page depth.
   ============================================================================ */

/* Geist (Vercel) - TRIAL typeface (Sayeed 24 Jul). Was loaded from jsDelivr;
   now self-hosted. Variable weight 100-900, latin subset, 29 KB. */
@font-face{
  font-family:"Geist Variable";
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url("fonts/geist-variable.woff2?v=202608250836") format("woff2-variations");
}

/* Material Symbols Outlined - a 6.7 KB SUBSET containing only the 43 icons this
   site uses, replacing the 447 KB render-blocking font from fonts.gstatic.com
   (a 98.5% cut). Ligature names are preserved, so the markup is unchanged:
   <span class="material-symbols-outlined">call</span> still works.
   The FILL axis is kept because .stars uses 'FILL' 1 for the gold review stars.
   REBUILD: `python builders/subset-material-symbols.py` - it re-scans the site
   for icon names and FAILS LOUDLY if a used icon is missing from the font, so a
   newly added icon can never silently render as its own text. */
@font-face{
  font-family:"Material Symbols Outlined";
  font-style:normal;
  font-weight:400;
  font-display:block;
  src:url("fonts/material-symbols-subset.woff2?v=202608250836") format("woff2-variations");
}
/* Base icon rules - these used to come from Google's stylesheet, so they have to
   live here now. TMEX's own size/alignment override follows further down. */
.material-symbols-outlined{
  font-family:"Material Symbols Outlined";
  font-weight:normal;
  font-style:normal;
  font-size:24px;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  display:inline-block;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  -webkit-font-feature-settings:'liga';
  font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
  /* RESERVE THE GLYPH BOX. Every Material Symbols glyph has a 1em advance (verified: 16px icon
     measures 16.0px, 20px measures 20.0px). Until the icon font arrives the browser lays the
     LIGATURE NAME out in the fallback font, so "location_on" reserves ~82px instead of 16px - the
     utility strip's right block measured 289px pre-font vs 215px after, a 74px reflow on every
     load. Pinning the width to 1em makes the box identical before and after the font lands, so
     nothing around it moves. No overflow:hidden on purpose - that would change inline-block
     baseline alignment and fight the vertical-align used below; font-display:block already
     renders nothing during the swap period, so the wider text is never visible. */
  width:1em;
}
/* ICON-CONTENT:START - generated by builders/fix-icons.js, do not hand-edit */
/* One rule per icon in use. The name lives here, in generated content, instead of in the
   DOM text where crawlers and AI extractors would read it as part of the heading or link. */
.i-account_balance::before{content:"account_balance"}
.i-arrow_forward::before{content:"arrow_forward"}
.i-arrow_upward::before{content:"arrow_upward"}
.i-call::before{content:"call"}
.i-check::before{content:"check"}
.i-chevron_left::before{content:"chevron_left"}
.i-chevron_right::before{content:"chevron_right"}
.i-close::before{content:"close"}
.i-contactless::before{content:"contactless"}
.i-credit_card::before{content:"credit_card"}
.i-currency_exchange::before{content:"currency_exchange"}
.i-directions::before{content:"directions"}
.i-directions_bus::before{content:"directions_bus"}
.i-euro_symbol::before{content:"euro_symbol"}
.i-event_available::before{content:"event_available"}
.i-expand_more::before{content:"expand_more"}
.i-flight_takeoff::before{content:"flight_takeoff"}
.i-handshake::before{content:"handshake"}
.i-inventory_2::before{content:"inventory_2"}
.i-list::before{content:"list"}
.i-local_atm::before{content:"local_atm"}
.i-local_parking::before{content:"local_parking"}
.i-location_on::before{content:"location_on"}
.i-lock::before{content:"lock"}
.i-menu::before{content:"menu"}
.i-money_off::before{content:"money_off"}
.i-open_in_full::before{content:"open_in_full"}
.i-open_in_new::before{content:"open_in_new"}
.i-payments::before{content:"payments"}
.i-percent::before{content:"percent"}
.i-public::before{content:"public"}
.i-restaurant::before{content:"restaurant"}
.i-reviews::before{content:"reviews"}
.i-schedule::before{content:"schedule"}
.i-search::before{content:"search"}
.i-shield_person::before{content:"shield_person"}
.i-star::before{content:"star"}
.i-storefront::before{content:"storefront"}
.i-sync_alt::before{content:"sync_alt"}
.i-train::before{content:"train"}
.i-update::before{content:"update"}
.i-verified::before{content:"verified"}
.i-verified_user::before{content:"verified_user"}
.i-volunteer_activism::before{content:"volunteer_activism"}
/* ICON-CONTENT:END */
/* ============================================================================
   TMEX BRAND PALETTE - FINAL AND PERMANENT (Sayeed, 13 Aug 2026).
   THREE colours, nothing else:
       BLACK  #000000  structure, type, rate values, buttons at rest, dark bands
       WHITE  #ffffff  the canvas
       BRAND  #00006c  the single brand colour - CTAs, active states, links, dots

   This is the LOCKED brand colour. It replaced the temporary electric blue #00006c
   used during the 4-11 Aug trial, and the 4-colour palette before that. There is no
   revert path any more: palette-backup/, revert-palette.bat and revert-palette.js
   were deleted when this was locked. Do not reintroduce another accent.

   CONTRAST, measured (WCAG 2.1 relative luminance):
       #00006c on white ......... 17.26:1  AAA
       white on #00006c ......... 17.26:1  AAA  (so brand buttons take white text)
       #00006c on --soft ........ 15.96:1  AAA
       #00006c on BLACK .......... 1.22:1  UNREADABLE
   That last number is why --brand-lite exists. NEVER put --brand text or icons on a
   black surface; every dark band (footer, store band, drawer, utility strip, mobile
   bar) uses --brand-lite instead, which measures 7.54:1 on black.

   EXCEPTIONS that survive every palette change, both Google authenticity signals
   rather than TMEX accents: the gold review stars (--star) and the official
   4-colour Google "G" mark on "Posted on Google".
   ============================================================================ */
:root{
  --ink:#000000;          /* black: structure, type, rate values, buttons, dark bands */
  --paper:#ffffff;        /* white: the canvas */
  --brand:#00006c;        /* THE brand colour - light surfaces only */
  --brand-lite:#8f8fff;   /* the brand lifted for BLACK surfaces (7.54:1); see above */
  --brand-tint:#ebebf3;   /* an 8% brand tint - the selected row in the currency picker */
  --soft:#f5f6f8;
  --line:#e2e4e9;
  --mut:#585d68;
  --ok:#0e7a4f;
  --star:#f4b400;         /* Google review stars - documented exception, not a TMEX accent */
  --font:"Geist Variable",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;border-radius:0}
/* Make the `hidden` ATTRIBUTE actually work. The browser's own [hidden]{display:none} lives in the
   UA stylesheet, so ANY author rule that sets display beats it - and several of ours do, e.g.
   `.util .st{display:inline-flex}`. The open/closed status spans ship with `hidden` and are revealed
   by JS once the Sydney clock is read, so without this the strip rendered its BAKED placeholder
   ("Closed", with an empty hint) on every load and then swapped to the real state - showing wrong
   information to anyone arriving while the store is open, and reflowing the row when the text
   changed. tmex.js is a `defer` script, so it runs before first paint and the correct state is what
   actually gets painted. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button{color:inherit}/* iOS Safari defaults button text to system blue; inherit the ink colour instead */
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
.material-symbols-outlined{font-size:20px;vertical-align:-4px}
.tnum{font-variant-numeric:tabular-nums}
.k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.more{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:650;color:var(--brand);text-decoration:none;border-bottom:2px solid var(--brand);padding-bottom:2px}
/* Hover nudges the ARROW right (not the whole label) - a gap grow shifts right-aligned
   labels (e.g. "Read all reviews") leftward, which reads backwards. */
.more .material-symbols-outlined{transition:transform .18s ease}
.more:hover .material-symbols-outlined{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){.more .material-symbols-outlined{transition:none}}

/* Utility strip */
/* The utility strip scrolls away normally with the page; it is never pushed by the drawer. */
.util{background:var(--ink);color:#c9cbd4;font-size:12.5px}
.util .wrap{display:flex;justify-content:space-between;align-items:center;min-height:36px;gap:14px}
/* nowrap is LOAD-BEARING: the status text is injected by JS and its length varies with the day
   ("Opens 9:30 AM Tomorrow" / "Opens 9:30 AM Wednesday" / "Open now"). Without this the longest
   string wraps inside .s-hint and the whole ink strip grows, pushing the page down. */
.util .st{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.util .st .dot{width:7px;height:7px;background:#8a8f9c;display:inline-block}
.util .st.open .dot{background:var(--brand)}
.util a{color:#fff;text-decoration:none;font-weight:600;white-space:nowrap}
.util .uright{display:inline-flex;align-items:center;gap:18px}
.util .uright a{display:inline-flex;align-items:center;gap:6px}
.util .uright .material-symbols-outlined{font-size:16px}
.util .hrs{white-space:nowrap}
/* Drop the hours sentence at 960px, NOT 700px. Measured 13 Aug 2026: .hrs is white-space:nowrap,
   so between roughly 768px and 950px it refuses to shrink and squeezes the status instead - the
   strip went 36px -> 42px -> 63px, nearly double, and shoved the whole page down with it. The old
   700px value was set when .util was 12.5px; the type-scale pass later raised it to 13.5px and
   moved the real break point without anyone re-measuring. 960px clears it with margin to spare. */
@media(max-width:960px){.util .hrs{display:none}}
@media(max-width:560px){.util .st .s-hint{display:none}}

/* Header: the real five-page nav */
header.top{border-bottom:2px solid var(--ink);background:var(--paper)}
/* Smart header: scrolls away naturally at the top; once past its own height it pins
   fixed and HIDES; ANY upward scroll slides it back in; at the very top it returns
   to normal flow under the strip. (Reference-build mechanic, native-scroll version.) */
header.top.is-fixed{position:fixed;top:0;left:0;right:0;z-index:55;transition:transform .18s}
header.top.is-hidden{transform:translateY(-102%)}
header.top.noanim{transition:none!important}
@media(prefers-reduced-motion:reduce){header.top.is-fixed{transition:none}}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:16px}
.logo{display:flex;align-items:baseline;gap:10px;text-decoration:none;flex-shrink:0}
.logo b{font-size:26px;letter-spacing:.03em;color:var(--ink)}
.logo span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.logo img{display:block;height:32px;width:auto}
@media(max-width:600px){.logo img{height:27px}}
nav.main{display:flex;align-items:center}
nav.main a{text-decoration:none;font-size:14.5px;margin-left:22px;white-space:nowrap}
nav.main a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
/* Active nav = navy + a "bold" look via text-stroke (NOT font-weight), so the glyphs thicken in
   place and the link's width never changes - it can't push the other links. Plain links get a
   thick underline; the Currency Rates dropdown trigger goes bold only, no underline. */
nav.main a.on{color:var(--ink);-webkit-text-stroke:.4px currentColor;text-decoration:underline;text-decoration-thickness:2.5px;text-underline-offset:4px}
nav.main .navdrop>a.on{text-decoration:none}
/* Currency pages in the nav (Travelex pattern, sharp execution) */
.navdrop{position:relative;display:inline-flex;align-items:center;margin-left:22px}
.navdrop>a{margin-left:0;display:inline-flex;align-items:center;gap:4px}
.navdrop .material-symbols-outlined{font-size:18px;vertical-align:-3px}
.navdrop .panel{display:none;position:absolute;top:100%;left:0;min-width:230px;background:var(--paper);border:1px solid var(--ink);z-index:57;padding:4px 0}
.navdrop:hover .panel,.navdrop:focus-within .panel{display:block}
.navdrop .panel a{display:block;margin:0;padding:10px 16px;font-size:14px;border-bottom:1px solid var(--line)}
.navdrop .panel a:hover{background:var(--soft);text-decoration:none}
/* "All 21 currencies": a see-all text link (navy, underlined, arrow that nudges) matching the
   other .more links, not the old navy bar (Sayeed 24 Jul). The label is wrapped so the count
   span stops splitting into gapped flex items ("All  21  currencies"). */
.navdrop .panel a.all{background:var(--paper);color:var(--ink);border-bottom:0;font-weight:650;gap:6px}
.navdrop .panel a.all .txt{border-bottom:2px solid var(--ink);padding-bottom:1px}
.navdrop .panel a.all .material-symbols-outlined{font-size:18px;transition:transform .18s ease}
.navdrop .panel a.all:hover{background:var(--soft)}
.navdrop .panel a.all:hover .material-symbols-outlined{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.navdrop .panel a.all .material-symbols-outlined{transition:none}}
/* The currency list scrolls inside a fixed six-row window, so adding currencies makes the list
   longer to scroll rather than making the panel taller. "All currencies" is pinned BELOW the
   scroller so it is always reachable without scrolling to the end.
   The max-height here is only a FALLBACK (about six rows) - tmex.js measures six real rows and
   overrides it once the webfont has settled, so the window is exact.
   overscroll-behavior:contain matters: without it, scrolling past either end of the list chains to
   the page, which fires the close-on-scroll handler and shuts the panel under the user's cursor. */
.navdrop .panel .np-list{display:block;overflow-y:auto;overscroll-behavior:contain;max-height:264px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.navdrop .panel .np-list::-webkit-scrollbar{width:8px}
.navdrop .panel .np-list::-webkit-scrollbar-track{background:transparent}
.navdrop .panel .np-list::-webkit-scrollbar-thumb{background:var(--line)}
.navdrop .panel .np-list::-webkit-scrollbar-thumb:hover{background:var(--mut)}
.navdrop .panel .np-list a:last-child{border-bottom:0}
.navdrop .panel a.all{border-top:1px solid var(--line)}
/* Mobile: nav collapses behind a menu icon + ink drawer */
.burger{display:none;width:44px;height:44px;border:1px solid var(--ink);background:var(--paper);align-items:center;justify-content:center;cursor:pointer;font-family:var(--font);color:var(--ink)}
.burger .material-symbols-outlined{font-size:24px}
@media(max-width:900px){
  nav.main{display:none}
  .burger{display:inline-flex}
}
/* PUSH behaviour: opening the drawer pushes the whole site left EXCEPT the utility strip
   (status + hours + phone), which stays pinned full-width on top. The drawer and backdrop
   start BELOW the strip. */
@media(max-width:900px){
  header.top,main,footer{transition:transform .22s}
  body.nav-open header.top,body.nav-open main,body.nav-open footer{transform:translateX(calc(-1*min(320px,86vw)))}
}
@media(prefers-reduced-motion:reduce){header.top,main,footer{transition:none}}
.drawer-back{position:fixed;top:36px;left:0;right:0;bottom:0;background:rgba(32,32,32,.5);opacity:0;pointer-events:none;transition:opacity .18s;z-index:60}
.drawer{position:fixed;top:36px;right:0;bottom:0;width:min(320px,86vw);background:var(--ink);color:#fff;transform:translateX(102%);transition:transform .22s;z-index:70;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;border-left:1px solid #2a2a2a}
body.nav-open .drawer{transform:none}
body.nav-open .drawer-back{opacity:1;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.drawer,.drawer-back{transition:none}}
@media(min-width:901px){.drawer,.drawer-back{display:none}}
.drawer .dhead{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid #2a2a2a}
.drawer .dhead .k{color:#9a9ca8}
.dclose{width:44px;height:44px;border:1px solid #fff;background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:var(--font)}
.drawer nav{display:flex;flex-direction:column;flex:1}
.drawer nav a{color:#fff;text-decoration:none;font-size:18px;font-weight:600;padding:16px 18px;border-bottom:1px solid #2a2a2a}
.drawer nav a.on{background:var(--ink)}
.drawer .dfoot{padding:18px;border-top:1px solid #2a2a2a}
.drawer .dfoot .st{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#c9cbd4;margin-bottom:14px}
.drawer .dfoot .st .dot{width:8px;height:8px;background:#8a8f9c}
.drawer .dfoot .st.open .dot{background:var(--brand)}
.drawer .dfoot .st b{color:#fff}
.drawer .dfoot .btn{background:#fff;color:var(--ink);border-color:#fff;width:100%;justify-content:center}
.drawer .dfoot .btn.dir{background:transparent;color:#fff;border-color:#fff;margin-bottom:10px}
.drawer .dfoot .btn.dir:hover{background:rgba(255,255,255,.12)}

/* Hero: headline + calculator card */
.hero{border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px 48px;align-items:center;padding-top:60px;padding-bottom:60px}
/* Hero: headline (+ CTAs) left, calculator right, vertically centered. */
.hero .cta{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
@media(min-width:901px){
  .hero .htext{grid-column:1}
  .hero .calc{grid-column:2}
}
@media(max-width:900px){
  .hero .wrap{grid-template-columns:minmax(0,1fr);gap:28px}
  .hero .cta{display:none}
}
.nb{white-space:nowrap}
h1{font-size:44px;line-height:1.06;letter-spacing:-.015em;font-weight:750}
h1 em{font-style:normal;color:var(--ink)}
.sub{margin-top:16px;font-size:16.5px;color:var(--mut);max-width:48ch}
@media(max-width:900px){h1{font-size:33px}}

/* Calculator card (sharp) */
.calc{border:2px solid var(--ink);background:var(--paper);min-width:0}
.calc-head{background:var(--ink);color:#fff;padding:13px 18px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.calc-head b{font-size:15px;font-weight:600}
@media(max-width:900px){.calc-head{justify-content:center}.calc-head .status{display:none}}
.status{font-size:12.5px;display:inline-flex;align-items:center;gap:7px;color:#d7d9e0}
.status .dot{width:7px;height:7px;background:#8a8f9c;display:inline-block}
.status.open .dot{background:var(--brand)}
.status.open{color:#c9efd9}
.calc-body{padding:18px}
.seg{display:flex;border:1px solid var(--ink);margin-bottom:14px}
.seg button{flex:1;font-family:var(--font);font-size:14.5px;font-weight:600;padding:11px 8px;background:var(--paper);border:0;cursor:pointer;color:var(--mut)}
.seg button.on{background:var(--brand);color:#fff}
.crow{border:1px solid var(--line);padding:11px 14px;margin-bottom:10px}
.crow label{display:block;font-size:13px;font-weight:500;color:var(--mut);margin-bottom:5px}
/* Fixed row height so the two input rows stay identical: the AUD chip (raw text, line-height 1.55)
   is ~3.8px taller than the picker <button> chip (line-height normal), which otherwise made
   whichever row holds the picker shorter, swapping on every buy/sell toggle. */
.crow-in{display:flex;align-items:center;gap:10px;min-width:0;min-height:38px}
.crow input{flex:1;min-width:0;border:0;outline:0;font-family:var(--font);font-size:22px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink);background:transparent;text-align:right;order:1}
.crow-in .chip{order:0}
/* Currency chips: AUD fixed, the other opens the picker. Borderless (Sayeed 24 Jul),
   real flag proportions (4:3, not square). */
.chip{display:inline-flex;align-items:center;gap:9px;font-size:16px;font-weight:650;border:0;padding:6px 6px;background:transparent;color:var(--ink);white-space:nowrap;flex-shrink:0}
/* min-width scoped to beat the board's .cur rule (both chips share the .cur class);
   equal chip width => the two input boxes never resize when buy/sell swaps them. */
.crow-in .chip{min-width:124px}
/* Small phones (<=359px): the row is ~202px, so a 124px chip left the amount 68px - not enough for
   "1,000,000" (IDR sell default) even at the 13px floor. 104px is the picker chip's natural width
   at the tighter gap/padding, so both chips stay equal and the boxes still never resize on a swap. */
@media(max-width:359px){.crow-in{gap:8px}.crow-in .chip{min-width:104px;gap:9px;padding:6px 4px}}
.chip .cflag{width:26px;height:19px;border:1px solid var(--line)}
.chip.cur{cursor:pointer;font-family:var(--font)}
.chip.cur:hover{background:var(--soft)}
.chip.cur .material-symbols-outlined{font-size:20px;color:var(--ink);margin-left:-2px}
.chip.cur.locked{cursor:default}
.chip.cur.locked:hover{background:transparent}
/* Picker: modal (desktop) / bottom sheet (mobile) */
.cpick-back{position:fixed;inset:0;background:rgba(32,32,32,.5);opacity:0;pointer-events:none;transition:opacity .15s;z-index:85}
body.pick-open .cpick-back{opacity:1;pointer-events:auto}
.cpick{position:fixed;z-index:86;background:var(--paper);border:2px solid var(--ink);display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;top:50%;left:50%;transform:translate(-50%,-46%);width:min(430px,92vw);max-height:80vh}
body.pick-open .cpick{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
@media(max-width:600px){
  .cpick{top:auto;bottom:0;left:0;transform:translateY(100%);width:100%;max-height:86vh}
  body.pick-open .cpick{transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){.cpick,.cpick-back{transition:none}}
.cpick-head{display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:#fff;padding:12px 16px;flex-shrink:0}
.cpick-head b{font-size:15px}
.cpick-x{width:34px;height:34px;border:1px solid #fff;background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:var(--font)}
.cpick-search{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding:0 16px;flex-shrink:0}
.cpick-search .material-symbols-outlined{color:var(--mut)}
.cpick-search input{flex:1;border:0;outline:0;font-family:var(--font);font-size:16px;padding:13px 0;background:transparent}
.cpick-list{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;min-height:0}
.cpick-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--paper);border:0;border-bottom:1px solid var(--line);padding:12px 16px;cursor:pointer;font-family:var(--font)}
.cpick-item:hover{background:var(--soft)}
.cpick-item.sel{background:var(--brand-tint)}
.cpick-item .cflag{width:28px;height:21px;border:1px solid var(--line);flex-shrink:0}
.cpick-item .nm{flex:1;min-width:0}
.cpick-item .nm b{display:block;font-size:14.5px;font-weight:600}
.cpick-item .nm span{font-size:12.5px;color:var(--mut)}
.cpick-item .tick{color:var(--ink);font-size:20px;opacity:0;flex-shrink:0}
.cpick-item.sel .tick{opacity:1}
.cpick-empty{padding:22px 16px;font-size:14.5px;color:var(--mut)}
.rateline{font-size:13.5px;color:var(--mut);margin:4px 0 12px}
.rateline b{color:var(--ink)}
/* Mobile: stack the two rate directions on their own lines (Sayeed 24 Jul). */
@media(max-width:600px){.rateline #rate,.rateline #rate-inv{display:block}.rateline #rate{margin-bottom:3px}}
.upd{font-size:12.5px;color:var(--mut)}
.rt-val{white-space:nowrap}
.calc .cgo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--ink)}
.calc .cgo a{position:relative;overflow:hidden;z-index:0;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-size:14.5px;font-weight:600;padding:14px 8px;white-space:nowrap}
.calc .cgo .dir{background:var(--paper);color:var(--ink)}
.calc .cgo .call{background:var(--paper);color:var(--ink);border-left:1px solid var(--ink)}
.calc .cfoot-status{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-top:1px solid var(--line);font-size:14px}
.calc .cfoot-status[hidden]{display:none}
.calc .cfoot-status .dot{width:8px;height:8px;background:#8a8f9c}
.calc .cfoot-status.open .dot{background:var(--brand)}
.calc .cfoot-status b{color:var(--ink)}
.calc .cfoot-status .s-hint{color:var(--mut)}
@media(min-width:901px){.calc .cfoot-status{display:none}}
.calc.stale .rateline,.calc.stale .upd{opacity:.55}
.skel{position:relative;color:transparent!important}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#eceef2 25%,#f6f7f9 50%,#eceef2 75%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}
/* inputs are replaced elements and ignore ::after, so shimmer their own background */
input.skel{background-image:linear-gradient(90deg,#eceef2 25%,#f6f7f9 50%,#eceef2 75%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.skel::after{animation:none}}

/* Trust ticker: front-loaded trust as a slow scrolling headline */
.creds{background:var(--ink);color:#fff;overflow:hidden}
.ticker{overflow:hidden}
.track{display:inline-flex;align-items:center;white-space:nowrap;animation:tick 40s linear infinite;will-change:transform}
.ticker:hover .track{animation-play-state:paused}
/* paused while the band is off screen (JS toggles .ticker-off) - pausing keeps the position, so
   the strip resumes where it left off instead of restarting */
.ticker.ticker-off .track{animation-play-state:paused}
.ti{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;font-size:16.5px;font-weight:500;color:#e7e8ec;position:relative}
.ti::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:15px;background:#2a2a2a}
.ti b{color:#fff;font-weight:700}
.ti .stars{margin-right:2px}
.ti .stars .material-symbols-outlined{font-size:17px}
.ti-ic{font-size:18px;color:#9a9a9a}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:820px){.ti{font-size:14px;padding:13px 22px}}
@media(prefers-reduced-motion:reduce){.track{animation:none}}

/* Rates preview: compact board, links to the hub page */
.board{padding:64px 0}
.bhead{margin-bottom:16px}
.bhead h2{font-size:29px;letter-spacing:-.01em}
.bctl{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.bctl .m{font-size:12.5px;color:var(--mut)}
.bseg{display:inline-flex;border:1px solid var(--ink)}
.bseg button{font-family:var(--font);font-size:13.5px;font-weight:600;padding:9px 14px;background:var(--paper);border:0;cursor:pointer;color:var(--mut)}
.bseg button.on{background:var(--brand);color:#fff}
/* Fixed-height scroll area (Sayeed 14 Aug). The board now carries EVERY stocked currency but keeps
   the height of the old 8-row preview, so the homepage stays compact and the whole list is still in
   the DOM. --board-h is deliberately set to a HALF row (46px sticky head + 8.5 x 64px): with the
   scrollbar hidden, a row cut by the bottom edge is the ONLY thing telling a visitor the list
   continues, so never round this to a whole number of rows.
   overscroll-behavior is left at its default (auto) ON PURPOSE - that default is what chains the
   scroll on to the page once the list bottoms out. Setting `contain` here would trap the page. */
.bwrap{--board-h:590px;max-height:var(--board-h);overflow-x:auto;overflow-y:auto;border-top:2px solid var(--ink);scrollbar-width:none;-ms-overflow-style:none}
.bwrap::-webkit-scrollbar{width:0;height:0;display:none}
/* Column labels must survive the scroll. box-shadow rather than border-bottom: a sticky element's own
   border detaches from it in some engines, an inset shadow does not. */
.rates thead th{position:sticky;top:0;z-index:1;background:var(--paper);border-bottom:0;box-shadow:inset 0 -1px 0 var(--line)}
/* Fixed layout so columns DON'T reflow/snap when the buy/sell toggle changes header + value widths. */
table.rates{width:100%;border-collapse:collapse;table-layout:fixed}
.rates th:nth-child(1){width:46%}
.rates th:nth-child(2){width:26%}
.rates th:nth-child(3){width:28%}
@media(max-width:700px){.rates th:nth-child(1){width:60%}.rates th:nth-child(2){width:40%}}
.rates th{text-align:right;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);font-weight:600;padding:12px 10px;border-bottom:1px solid var(--line)}
.rates th:first-child{text-align:left;padding-left:2px}
.rates td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
.rates td:first-child{text-align:left;padding-left:2px}
.rates tbody tr{cursor:pointer}
/* Drag-to-scroll: rows keep the pointer cursor because they really are clickable; only an
   in-progress pull switches to grabbing and freezes text selection. */
.bwrap.dragging,.bwrap.dragging .rates tbody tr{cursor:grabbing;user-select:none;-webkit-user-select:none}
.rates tbody tr:hover{background:var(--soft)}
.cur{display:flex;align-items:center;gap:12px;min-width:0}
.cur img{width:29px;height:22px;border:1px solid var(--line)}
.cur b{font-size:15.5px;display:block;line-height:1.2}
.cur i{font-style:normal;font-size:12.5px;color:var(--mut);display:block;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.rates .v{font-size:16px;font-weight:650;color:var(--ink);display:block;line-height:1.3;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rates .v .pre{font-size:14px;font-weight:500;font-style:normal;color:var(--mut)}
.rates .v2{display:block;font-size:18px;font-weight:500;color:var(--mut);margin-top:3px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rates .v2 .pre{font-size:14px;font-weight:500;font-style:normal}
.rates .eq{font-size:17px;color:var(--mut)}
@media(max-width:700px){.rates .eqcol{display:none}}
.bfoot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px}
.bnote{font-size:13px;color:var(--mut);max-width:60ch}

/* Currency showcase: flag tiles linking to each currency page */
.spokes{padding:64px 0;border-top:1px solid var(--line)}
.spokes .head h2{font-size:34px;letter-spacing:-.01em;margin-bottom:8px}
.spokes .head p{font-size:16.5px;color:var(--mut);max-width:60ch}
.ctiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
@media(max-width:820px){.ctiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.ctiles{grid-template-columns:minmax(0,1fr)}}
.ctiles a{display:flex;align-items:center;gap:14px;border:1px solid var(--line);padding:15px 18px;text-decoration:none;color:var(--ink);transition:border-color .18s ease,transform .13s ease,background-color .18s ease}
.ctiles a:hover{border-color:var(--ink);transform:translateY(-2px)}
.ctiles .tflag{width:40px;height:30px;object-fit:cover;border:1px solid var(--line);flex-shrink:0}
.ctiles b{font-size:16px;font-weight:600;flex:1;min-width:0}
.ctiles span{font-size:13px;color:var(--mut);font-weight:600}
.ctiles a.all{background:var(--ink);color:#fff;border-color:var(--ink);justify-content:space-between}
.ctiles a.all b{flex:1;white-space:nowrap}
.ctiles a.all span{color:#fff}
.ctiles a.all:hover{background:var(--ink);border-color:var(--ink)}

/* About teaser: photo slot + trust narrative */
.about-teaser{padding:64px 0;border-top:1px solid var(--line)}
.at{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:44px;align-items:center}
@media(max-width:820px){.at{grid-template-columns:minmax(0,1fr);gap:26px}}
.at-photo{border:1px solid var(--line);background:var(--soft);min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px}
.at-photo .material-symbols-outlined{font-size:46px;color:#b8bdc9}
.at-photo .ph-label{font-size:14.5px;font-weight:600;color:var(--mut)}
.at-photo .ph-label i{font-style:normal;font-weight:400;font-size:12.5px;color:var(--mut);display:block;margin-top:5px}
/* Placeholder images (PREVIEW ONLY): a stock photo fills the slot, with a corner tag so it
   never reads as the real store. Swap for the client's real photo (Q7) before launch. */
.at-photo.has-img,.store .sphoto.has-img{position:relative;padding:0;overflow:hidden}
.at-photo.has-img>img,.store .sphoto.has-img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---- .at-photo crop anchor (21 Aug 2026) ------------------------------------------------
   The About TMEX photo is a 1.900 street view, but its slot is 300px tall at ANY width, so the
   box ratio swings from 1.09 on a phone to 2.57 at the 820px restack. Below a 618px viewport the
   box is narrower than the photo, so `cover` crops the SIDES - and centred it was taking the
   middle 57%, which cut "TMEX CURRENCY EXCHANGE" on the fascia down to "EXCHANGE" while leaving
   the neighbouring cafe's sign as one of the most legible things on the phone view.
   Anchoring left keeps the whole fascia and pushes the cafe out of frame. Above 618px the crop
   turns vertical and the horizontal value stops mattering, so this costs nothing there; on
   desktop the slot is 1.887 against a 1.900 source, an 8px trim that now comes off one side
   instead of being split.
   DELIBERATELY NOT ON .sphoto, which shares the rule above: that photo is the interior counter,
   it is framed centre, and anchoring it left would cut the counter out. If the About photo is
   ever swapped for one with centred branding, drop this rule rather than tuning the percentage. */
.at-photo.has-img>img{object-position:left center}
.ph-tag{position:absolute;left:0;bottom:0;z-index:1;background:rgba(32,32,32,.82);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.01em;padding:6px 11px}
.at-txt .k{display:block;margin-bottom:10px}
.at-txt h2{font-size:32px;letter-spacing:-.01em;margin-bottom:12px}
.at-txt p{font-size:16.5px;color:var(--mut);max-width:56ch;margin-bottom:16px}

/* How it works: hairline strip */
.how{padding:60px 0;border-top:1px solid var(--line)}
.how .strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink)}
@media(max-width:820px){.how .strip{grid-template-columns:minmax(0,1fr)}}
.how .cell{padding:22px 22px 22px 0;border-bottom:1px solid var(--line)}
@media(min-width:821px){.how .cell{border-right:1px solid var(--line);border-bottom:0}.how .cell:last-child{border-right:0}.how .cell+.cell{padding-left:22px}}
.how .n{font-size:12px;font-weight:700;color:var(--ink);letter-spacing:.14em}
.how h3{font-size:18px;margin:9px 0 5px}
.how p{font-size:14.5px;color:var(--mut)}

/* Buy-back band: the differentiator vs banks, given its own moment */
.buyback{border-top:1px solid var(--line);padding:56px 0}
.bb{display:flex;align-items:center;gap:26px;border:2px solid var(--ink);padding:28px 32px;flex-wrap:wrap}
.bb-ic{width:52px;height:52px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bb-ic .material-symbols-outlined{font-size:28px}
.bb-txt{flex:1;min-width:240px}
.bb-txt h2{font-size:25px;letter-spacing:-.01em;margin-bottom:6px}
.bb-txt p{font-size:16px;color:var(--mut);max-width:62ch}
@media(max-width:700px){.bb{padding:22px;gap:18px}.bb-txt h2{font-size:20px}.bb .btn{width:100%;justify-content:center}}

/* Promises: concrete, checkable claims only (Travel Money Oz pattern, TMEX facts) */
.promises{padding:60px 0 64px;border-top:1px solid var(--line)}
.promises h2{font-size:27px;margin-bottom:24px;letter-spacing:-.01em}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;border-top:2px solid var(--ink)}
@media(max-width:820px){.pgrid{grid-template-columns:minmax(0,1fr)}}
.prom{display:flex;gap:14px;padding:20px 0;border-bottom:1px solid var(--line)}
.prom .ic{width:34px;height:34px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.prom .ic .material-symbols-outlined{font-size:19px}
.prom h3{font-size:16.5px;margin-bottom:4px}
.prom p{font-size:14px;color:var(--mut)}

/* Store snapshot band */
.store{background:var(--ink);color:#e7e8ec;padding:56px 0}
.store .head{margin-bottom:32px}
.store .head h2{font-size:34px;color:#fff;letter-spacing:-.01em;margin-bottom:8px}
.store .head p{font-size:16.5px;color:#c9cbd4;max-width:60ch}
.store .sgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:44px;align-items:stretch}
@media(max-width:820px){.store .sgrid{grid-template-columns:minmax(0,1fr);gap:28px}}
.store .sphoto{border:1px solid #2a2a2a;background:#0d0d0d;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px}
.store .sphoto .material-symbols-outlined{font-size:46px;color:#555555}
.store .sphoto .ph-label{font-size:14.5px;font-weight:600;color:#c9cbd4}
.store .sphoto .ph-label i{font-style:normal;font-weight:400;font-size:12.5px;color:#9a9ca8;display:block;margin-top:5px}
.store .sinfo{display:flex;flex-direction:column;gap:24px}
.store h2{font-size:27px;color:#fff;letter-spacing:-.01em;margin-bottom:10px}
.store p{font-size:14.5px;color:#c9cbd4}
.store .big{font-size:18px;font-weight:650;color:#fff;line-height:1.45}
.store .k{color:#9a9ca8;display:block;margin-bottom:10px}
.store .st{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:14.5px;color:#c9cbd4}
.store .st .dot{width:8px;height:8px;background:#8a8f9c}
.store .st.open .dot{background:var(--brand)}
.store .st b{color:#fff}
.store .btns{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:14.5px;font-weight:600;padding:12px 18px;border:1px solid var(--ink)}
.btn.solid{background:var(--ink);color:#fff}
.btn.ghost{color:var(--ink)}
.store .btn{border-color:#fff;color:#fff}
.store .btn.solid{background:#fff;color:var(--ink);border-color:#fff}
.store a.line{color:#fff;text-decoration:underline;text-underline-offset:3px}
.store .morelight{color:#fff;border-bottom-color:#fff}

/* Reviews: live Google reviews band (baked cards + live refresh when key exists) */
.trust{padding:64px 0;background:var(--soft);border-bottom:1px solid var(--line)}
.trust .head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.trust h2{font-size:27px;letter-spacing:-.01em}
.tsum{display:flex;justify-content:space-between;align-items:center;gap:18px;border:2px solid var(--ink);background:var(--paper);padding:15px 20px;margin-bottom:20px;flex-wrap:wrap}
.tsum .r{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tsum b{font-size:30px;color:var(--ink);letter-spacing:-.01em}
.stars{color:var(--star);display:inline-flex}
.stars .material-symbols-outlined{font-variation-settings:'FILL' 1;font-size:18px}
.tsum .lbl{font-size:14px;color:var(--mut)}
.tsum a{font-size:14px;font-weight:650;color:var(--ink)}
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:820px){.tgrid{grid-template-columns:minmax(0,1fr)}}
.tcard{border:1px solid var(--line);background:var(--paper);padding:20px}
.tcard .who{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.tcard .av{width:34px;height:34px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;flex-shrink:0;overflow:hidden} /* initials-only fallback (baked cards, reviewer without a photo) */
.tcard .av.av-img{background:transparent;color:transparent} /* a Google profile photo gets NO box at all - no background, no border - the circle sits straight on the white card (Sayeed, 23 Aug) */
.tcard .av img{width:100%;height:100%;object-fit:cover}
.tcard .who b{font-size:14px}
.tcard .who i{font-style:normal;font-size:12px;color:var(--mut);display:block}
.tcard p{font-size:14.5px;margin-top:6px}
.tcard .src{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mut);margin-top:10px}
.gmark{width:14px;height:14px;flex-shrink:0}
/* "All reviews" tile: closes the grid with the real Google total instead of another quoted card -
   the honest way to fill the last slot without inventing a review. Same .tcard box lifted onto the
   brand tint so it reads as a destination, not a testimonial. The count and rating carry
   js-count/js-rating so the live Google feed keeps them in sync with every other rating on the page. */
.tcard-all{display:flex;flex-direction:column;justify-content:center;gap:8px;background:var(--brand-tint);border-color:var(--brand);text-decoration:none}
.tcard-all .gmark{width:28px;height:28px}
.tcard-all b{font-size:16px;letter-spacing:-.01em;color:var(--ink)}
.tcard-all p{margin-top:0;color:var(--mut)}
.tcard-all .all-cta{display:inline-flex;align-items:center;gap:6px;font-weight:650;color:var(--brand)}
.tcard-all .all-cta .material-symbols-outlined{font-size:18px}
/* Underline the LABEL only on hover, never the arrow glyph - an underline running under an icon reads
   as a rendering fault, not as a link affordance (Sayeed 14 Aug). Hence the .txt wrapper. */
.tcard-all:hover .all-cta .txt{text-decoration:underline}
.tacts{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.tacts .btn .material-symbols-outlined{font-size:18px}
@media(max-width:600px){.tacts{flex-direction:column;align-items:stretch}.tacts .btn{width:100%;justify-content:center}}
/* The G-logo sprite holds a non-rendered <symbol>; take it out of flow so its inline line-box
   stops pushing the utility strip + header down (was a ~25px gap at the top of the page). */
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
/* Consent banner - built by JS (measurement block at the top of tmex.js), so the HTML carries
   nothing and there is no layout shift. One line of plain language + two real buttons, in the
   site's own .btn styles: no overlay, no dimming, no "we value your privacy" theatre. It sits
   above the mobile call bar (z 78) and hides that bar while open so the two never stack. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--paper);border-top:1px solid var(--ink);padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));display:flex;gap:16px 24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.consent p{margin:0;font-size:14px;line-height:1.45;max-width:760px;color:var(--ink)}
.consent a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.consent-act{display:flex;gap:10px;flex-shrink:0}
.consent .btn{font-size:14px;padding:10px 16px;cursor:pointer;background:var(--paper);font-family:inherit}
.consent .btn.solid{background:var(--ink)}
body.consent-open .mbar{display:none}
@media (max-width:640px){
  .consent{padding-left:16px;padding-right:16px;gap:12px}
  .consent-act{width:100%}
  .consent-act .btn{flex:1;justify-content:center}
}

/* Sticky mobile action bar: persistent Call + Directions with the live open/closed status
   (our distinct touch). Mobile only; hidden when the drawer or picker is open. */
.mbar{display:none}
@media(max-width:900px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px))}
  .mbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:78;background:var(--paper);border-top:1px solid var(--ink);padding-bottom:env(safe-area-inset-bottom, 0px);transform:translateY(100%);transition:transform .3s ease;will-change:transform}
  .mbar.show{transform:translateY(0)}
  body.nav-open .mbar,body.pick-open .mbar{display:none}
  .mbar-st{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11.5px;color:var(--mut);padding:5px 12px;border-bottom:1px solid var(--line);background:var(--soft)}
  .mbar-st[hidden]{display:none}
  .mbar-st .dot{width:7px;height:7px;background:#8a8f9c;display:inline-block}
  .mbar-st.open .dot{background:var(--brand)}
  .mbar-st b{color:var(--ink);font-weight:600}
  .mbar-act{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
  .mbar-act a{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 8px;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap}
  .mbar-call{background:var(--ink);color:#fff}
  .mbar-dir{background:var(--paper);color:var(--ink);border-left:1px solid var(--line)}
  .mbar-act .material-symbols-outlined{font-size:20px}
}
@media(prefers-reduced-motion:reduce){.mbar{transition:none}}
.trust .foot{margin-top:20px}

/* FAQ: sharp accordion (tap a question to open its answer) */
.faq{padding:60px 0}
.faq h2{font-size:27px;margin-bottom:24px;letter-spacing:-.01em}
.faq .list{max-width:820px}
.faq-item{border:1px solid var(--line);border-bottom:0;background:var(--paper)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
/* FAQ question is an h3 wrapping the button: heading weight for AEO, zero visual change.
   The h3 must not introduce UA defaults (1.17em, bold, 1em margins) - the button styles it. */
.faq-q{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit}
.faq-trigger{width:100%;text-align:left;background:var(--paper);border:0;font-family:var(--font);font-size:16px;font-weight:650;padding:16px 18px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--ink)}
.faq-trigger .material-symbols-outlined{transition:transform .15s;flex-shrink:0}
@media(prefers-reduced-motion:reduce){.faq-trigger .material-symbols-outlined{transition:none}}
.faq-content{display:none;padding:0 18px 16px;font-size:14.5px;color:var(--mut);max-width:70ch}
.faq-item.open .faq-content{display:block}
.faq-item.open .faq-trigger .material-symbols-outlined{transform:rotate(180deg)}

/* Extra-narrow board tightening (360px Android floor) */
@media(max-width:380px){.rates td{padding:10px 6px}.rates .v{font-size:13.5px}.cur i{max-width:110px}.cur img{width:24px;height:24px}}

/* Footer: the full site map */
footer{background:var(--ink);color:#c9cbd4;padding:52px 0 26px;font-size:14px}
footer .grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:36px;margin-bottom:34px}
@media(max-width:820px){footer .grid{grid-template-columns:minmax(0,1fr)}}
footer h3{color:#fff;font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:13px}
/* overflow-wrap:anywhere is LOAD-BEARING, not cosmetic. Between 821px and ~1000px the footer is
   still a 4-column grid, so each column is only ~146px, and "accounts@tmexchange.com.au" is a
   26-character string with no break opportunity that wants 214px. It overflowed its column by
   68px and dragged the whole DOCUMENT 44px wider, giving every page a horizontal scrollbar in
   that band (measured 13 Aug 2026). The grid already uses minmax(0,1fr), so the columns were
   shrinking correctly - the string simply could not wrap. "anywhere" also feeds the min-content
   calculation, which "break-word" does not, so it is the right one of the two here. */
footer a{color:#c9cbd4;text-decoration:none;display:block;margin-bottom:8px;overflow-wrap:anywhere}
footer a:hover{color:#fff}
.fbrand b{color:#fff;font-size:20px;letter-spacing:.03em}
.fbrand>span{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#9a9ca8;margin-top:2px}
.fbrand .flogo{display:block;height:34px;width:auto;filter:brightness(0) invert(1)}
.fbrand p{margin-top:14px;max-width:36ch}
footer .fine{border-top:1px solid #2a2a2a;padding-top:20px;font-size:12.5px;color:#9a9ca8}

/* ================= TYPE SCALE v2 - bigger, stronger presence (Travelex-inspired, 24 Jul 2026)
   Overrides sit LAST so equal-specificity rules win by source order. ================= */
h1{font-size:54px;line-height:1.04}
@media(max-width:900px){h1{font-size:39px}}
@media(max-width:600px){h1{font-size:32px}}
.sub{font-size:19px;line-height:1.5}
.util{font-size:13.5px}
nav.main a{font-size:16px}
.navdrop .material-symbols-outlined{font-size:20px}
.bhead h2,.promises h2,.store h2,.trust h2,.faq h2{font-size:34px}
@media(max-width:600px){.bhead h2,.promises h2,.store h2,.trust h2,.faq h2{font-size:27px}}
.bnote,.store p,.faq-content,.tcard p,.how p,.prom p{font-size:16px}
.tsum .lbl,.tsum a,.chips a,.navdrop .panel a{font-size:15px}
.how h3,.faq-trigger{font-size:19px}
.prom h3,.step h3{font-size:18.5px}
.store .big{font-size:20px}
.rates .v{font-size:19px}
.cur b{font-size:16.5px}
.cur i{font-size:13px}
.rates th{font-size:14px}
.rates td{padding:14px 12px}
@media(max-width:600px){
  /* Currency-Wise-style responsive: on phones drop the scrolling table - stack each row as a flex
     card (currency left, rate right) so nothing overflows (NO horizontal scrollbar) and the rate
     has room to be bigger. Client 31 Jul. */
  /* overflow-x must be HIDDEN, not visible: a box cannot be visible on one axis and auto on the
     other - the browser coerces visible to auto, which would put back the horizontal scrollbar the
     31 Jul stacked-row fix removed. --board-h is retuned for the shorter stacked rows and kept well
     under half the viewport, so there is always page-scroll surface above and below the list. */
  .bwrap{overflow-x:hidden;--board-h:354px} /* 2px border + 5.5 x 64px stacked rows = 42% of a 812px viewport */
  table.rates{table-layout:auto}
  .rates thead{display:none}
  .rates tbody{display:block}
  .rates tr{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 2px;border-bottom:1px solid var(--line)}
  .rates td{display:block;padding:0;border:0;text-align:right}
  .rates td:first-child{flex:1 1 auto;min-width:0;text-align:left}
  .rates td:nth-child(2){flex:0 0 auto}
  .rates .v{font-size:17px}
  .rates .v .pre{font-size:13px}
  .rates .v2{font-size:15px}
  .rates .v2 .pre{font-size:13px}
}
.tsum b{font-size:36px}
.btn{font-size:16px;padding:14px 22px}
.seg button{font-size:15.5px;padding:13px 8px}
.bseg button{font-size:14.5px}
.calc-head b{font-size:16px}
.calc .cgo a{font-size:15px}
.k{font-size:12px}
footer{font-size:15px}

/* Submenu: flags + alignment to the nav text, and it CLOSES on scroll.
   The trigger <a> loses its inherited 22px margin (nav.main a beats .navdrop>a on
   specificity) so the panel's left:0 lines up with the "Currency Rates" text. */
nav.main .navdrop>a{margin-left:0}
.navdrop .panel{left:0;min-width:264px}
.navdrop .panel a{display:flex;align-items:center;gap:10px;padding:11px 16px}
.navdrop .panel .pflag{width:22px;height:16px;border:1px solid var(--line);flex-shrink:0}
.navdrop .panel a.all{justify-content:flex-start}
.navdrop.scrolled-hide .panel{display:none!important}

/* ---- hover motion: smooth feedback on interactive controls ---- */
.btn,.chips a,.calc .cgo a,.seg button,.bseg button,.chip.cur,.navdrop .panel a,.cpick-item,.rates tbody tr,.faq-trigger,.dclose,.cpick-x{transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .13s ease}
.btn.solid:hover{background:var(--ink);transform:translateY(-2px)}
.btn.ghost:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.store .btn:hover{transform:translateY(-2px)}
.store .btn.solid:hover{background:#e7e8ec;color:var(--ink)}
.store a.btn:not(.solid):hover{background:#fff;color:var(--ink)}
/* Hover: navy fills each button bottom-to-top; label + icon flip to white (Sayeed 24 Jul).
   ::before sits at z-index:-1 (above the button's own paper background, below the inline
   label) so the text stays readable as the fill rises; overflow:hidden clips the fill. */
.calc .cgo a::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:0;background:var(--ink);z-index:-1;transition:height .25s ease}
.calc .cgo a:hover::before{height:100%}
.calc .cgo a:hover{color:#fff}
@media(prefers-reduced-motion:reduce){.calc .cgo a::before{transition:none}}
.chips a:hover{transform:translateY(-2px)}
.faq-trigger:hover{background:var(--soft)}
.cpick-x:hover{background:rgba(255,255,255,.15)}
/* animated sliding underline for the top nav links */
nav.main>a,.navdrop>a{background-image:linear-gradient(var(--ink),var(--ink));background-size:0 2px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .22s ease,color .18s ease}
nav.main>a:hover,.navdrop>a:hover{background-size:100% 2px;text-decoration:none}

/* ===== Currency browse grid (hub /currency-rates/) ===== */
.browse{padding:56px 0}
.browse .head{margin-bottom:18px}
.browse-ctl{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.hbseg{display:inline-flex;border:1px solid var(--ink)}
.hbseg button{font-family:var(--font);font-size:14px;font-weight:600;padding:11px 18px;background:var(--paper);border:0;cursor:pointer;color:var(--mut)}
.hbseg button.on{background:var(--brand);color:#fff}
.browse-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:0 14px;flex:1;min-width:200px;max-width:340px}
.browse-search .material-symbols-outlined{color:var(--mut);font-size:20px}
.browse-search input{flex:1;min-width:0;border:0;outline:0;font-family:var(--font);font-size:15px;padding:12px 0;background:transparent;color:var(--ink)}
.bs-clear{display:flex;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;color:var(--mut);padding:4px;margin-right:-4px}
.bs-clear[hidden]{display:none} /* the [hidden] attr alone loses to display:flex - restore it */
.bs-clear:hover{color:var(--ink)}
.bs-clear .material-symbols-outlined{font-size:19px}
.browse-ctl .m{font-size:12.5px;color:var(--mut);margin-left:auto}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.ccard{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--paper);text-decoration:none;color:var(--ink);transition:border-color .15s ease}
.ccard:hover{border-color:var(--ink)}
.ccard-top{display:flex;align-items:center;gap:11px;padding:15px 16px 0}
.ccard-top img{width:32px;height:24px;border:1px solid var(--line);flex-shrink:0}
.ccard-id b{display:block;font-size:15.5px;font-weight:650;line-height:1.2}
.ccard-id i{display:block;font-style:normal;font-size:12.5px;color:var(--mut);line-height:1.2}
.ccard-rate{padding:10px 16px 14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ccard-rate .v{font-size:19px;font-weight:650;color:var(--ink)}
.ccard-rate .per{font-size:13px;color:var(--mut);margin-left:6px;font-weight:500}
@media(max-width:600px){.ccard-rate .per{display:block;margin-left:0;margin-top:2px}}
.ccard-cta{display:flex;align-items:center;justify-content:center;gap:7px;font-size:14px;font-weight:600;color:var(--ink);border-top:1px solid var(--line);padding:12px 8px;margin-top:auto}
.ccard-cta .material-symbols-outlined{font-size:19px;transition:transform .18s ease}
.ccard:hover .ccard-cta{background:var(--ink);color:#fff}
.ccard:hover .ccard-cta .material-symbols-outlined{transform:translateX(4px)}
.cgrid-empty{font-size:15px;color:var(--mut);padding:20px 2px;line-height:1.6}
.cgrid-empty a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}
@media(prefers-reduced-motion:reduce){.ccard-cta .material-symbols-outlined{transition:none}}
@media(max-width:600px){.cgrid{grid-template-columns:1fr 1fr;gap:10px}.browse-ctl .m{margin-left:0;width:100%}}
@media(max-width:380px){.cgrid{grid-template-columns:1fr}}

/* Breadcrumb (inner pages) */
.crumb{border-bottom:1px solid var(--line);font-size:13px}
.crumb .wrap{display:flex;align-items:center;gap:9px;padding-top:11px;padding-bottom:11px}
.crumb a{color:var(--mut);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.crumb .sep{color:var(--line)}
.crumb .here{color:var(--ink);font-weight:600}
.rates-hero{padding:44px 0 8px}
.rates-hero .sub{max-width:60ch}

/* ============ CONTACT PAGE ============ */
.chero{padding:46px 0 40px;border-bottom:1px solid var(--line)}
.chero h1{max-width:18ch}
.chero .sub{margin-top:15px;max-width:62ch}

.contact{padding:52px 0}
.contact .cwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:44px;align-items:stretch}
@media(max-width:820px){.contact .cwrap{grid-template-columns:minmax(0,1fr);gap:26px}}
.cdetails{display:flex;flex-direction:column;gap:22px}
.cblock .k{display:block;margin-bottom:7px}
.contact .big{font-size:19px;font-weight:650;color:var(--ink);line-height:1.4}
.cblock a.line{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:1px}
.cblock a.line:hover{color:var(--ink);border-bottom-color:var(--ink)}
/* The contact-page ADDRESS is tappable but carries no rule - Sayeed, 24 Aug 2026. Phone and email
   above it keep theirs, so the block still reads as a list of actions. */
.cblock a.line.plain{border-bottom:0;padding-bottom:0}
/* In-copy NAP links (FAQ answers, paragraphs, the store band): tappable, 1px underline, and they
   inherit colour and font so the sentence still reads as a sentence - Sayeed, 24 Aug 2026. */
.txtlink{color:inherit;font:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.txtlink:hover,.txtlink:focus-visible{text-decoration-thickness:2px}
/* The store-band address sits under an "Address" label as a display block, not inside a sentence,
   so it stays clean - tappable, no rule. Same call as the contact page. Sayeed, 24 Aug 2026.
   Covers the band on home, reviews, about and all 21 currency pages in one rule. */
.store .txtlink,.store .txtlink:hover,.store .txtlink:focus-visible{text-decoration:none}
/* NO underline in any hero standfirst - home, the 21 currency pages, about. It is intro copy set
   large, and a rule through it breaks the visual line. Clickable, just unmarked. Sayeed, 24 Aug 2026
   (first scoped to the homepage, then extended to every hero on his follow-up). */
.hero .txtlink,.hero .txtlink:hover,.hero .txtlink:focus-visible,
.chero .txtlink,.chero .txtlink:hover,.chero .txtlink:focus-visible,
.rev-top .txtlink,.rev-top .txtlink:hover,.rev-top .txtlink:focus-visible{text-decoration:none}
/* iOS Safari auto-detects phone numbers and addresses in plain text and restyles them as blue
   underlined links of its own. The format-detection meta on every page asks it not to, but that
   meta is only reliably honoured for telephone, so this neutralises whatever still slips through.
   Our own .txtlink anchors are unaffected - iOS only tags the ones IT created. */
a[x-apple-data-detectors],
a[x-apple-data-detectors] span{color:inherit!important;font:inherit!important;text-decoration:none!important;pointer-events:auto}
.cblock .st{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:14.5px;color:var(--mut)}
.cblock .st .dot{width:8px;height:8px;background:#9a9ca8}
.cblock .st.open .dot{background:var(--brand)}
.cblock .st b{color:var(--ink)}
.hours{border-collapse:collapse;width:100%;max-width:340px;font-size:15px}
.hours th{text-align:left;font-weight:500;color:var(--mut);padding:8px 0;border-bottom:1px solid var(--line)}
.hours td{text-align:right;font-weight:650;color:var(--ink);padding:8px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.cbtns{display:flex;gap:12px;flex-wrap:wrap;margin-top:2px}
/* Contact: store photo in the details grid, linked to the Google listing (the map embed moved to
   the full-width band below - Sayeed's layout, 24 Aug 2026). Sharp edges, brand button on white
   text per the locked palette. */
.cphoto{position:relative;display:block;border:2px solid var(--ink);background:var(--soft);min-height:360px;overflow:hidden}
.cphoto img{display:block;width:100%;height:100%;min-height:360px;object-fit:cover}
.cphoto-btn{position:absolute;left:0;bottom:0;display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;font-size:14.5px;font-weight:600;padding:12px 18px}
.cphoto-btn .material-symbols-outlined{font-size:19px}
.cphoto:hover .cphoto-btn,.cphoto:focus-visible .cphoto-btn{background:var(--ink)}
.cphoto:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.cmap-band{padding:0 0 52px}
.cmap-band iframe{display:block;width:100%;height:440px;border:2px solid var(--ink);background:var(--soft)}
@media(max-width:820px){.cmap-band{padding-bottom:34px}.cmap-band iframe{height:340px}}


.getting-here .strip{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:820px){.getting-here .strip{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.getting-here .strip{grid-template-columns:1fr}}
.getting-here .gh-title{font-size:27px;letter-spacing:-.01em;margin-bottom:22px}
.getting-here .cell .material-symbols-outlined{font-size:30px;color:var(--ink)}
.getting-here .cell h3{margin-top:10px}
.cta-band{padding:48px 0 60px}

/* ============ FAST NAV: hover/tap prefetch opens internal pages instantly; this slim navy bar
   is only loading feedback for a slow load. Navigation is NEVER blocked. The faint 1px light ring
   keeps the navy bar visible on the dark utility strip at the very top. ============ */
#tmexbar{position:fixed;top:0;left:0;right:0;height:3px;background:var(--ink);z-index:10000;transform:scaleX(0);transform-origin:left center;opacity:0;pointer-events:none;box-shadow:0 0 0 1px rgba(255,255,255,.3)}
@media(prefers-reduced-motion:reduce){#tmexbar{display:none!important}}

/* ============ CURRENCY PAGE (/currency-rates/<currency>/) ============
   Reuses the hero grid, how-strip, faq and store band. Adds: a currency identity block,
   a baked+live rate snapshot, a "what is X" facts box, and an optional photo-hero variant.
   Two heroes are in preview for A/B choice: index.html (design+flag), photo.html (destination). */

/* currency identity: flag + code + name, above the h1 */
.cur-id{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.cur-flag-lg{display:block;width:64px;height:48px;object-fit:cover;border:1px solid var(--line)}
.cur-id-t{display:flex;flex-direction:column;line-height:1.1}
.cur-code-lg{font-size:26px;font-weight:750;letter-spacing:.04em;color:var(--ink)}
.cur-name-lg{font-size:15px;color:var(--mut);margin-top:2px}

/* baked + live rate snapshot (the data-rate spans refresh from the feed via tmex.js) */
.ratesnap{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:24px}
.rs{display:flex;flex-direction:column;gap:3px}
.rs-k{font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.rs-v{font-size:22px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}

/* hero variant B: destination photo behind a white-text identity (calc card stays solid on top) */
.cur-hero.has-photo{position:relative;border-bottom:0;background:var(--ink)}
.cur-hero .hero-photo{position:absolute;inset:0;overflow:hidden}
.cur-hero .hero-photo>img{width:100%;height:100%;object-fit:cover;display:block}
.cur-hero.has-photo .hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,20,20,.88) 0%,rgba(20,20,20,.66) 48%,rgba(20,20,20,.28) 100%)}
.cur-hero.has-photo .wrap{position:relative;z-index:1}
.cur-hero.has-photo .htext .cur-code-lg,.cur-hero.has-photo .htext h1{color:#fff}
.cur-hero.has-photo .htext .cur-name-lg,.cur-hero.has-photo .htext .sub{color:rgba(255,255,255,.86)}
.cur-hero.has-photo .htext .rs-k{color:rgba(255,255,255,.78)}
.cur-hero.has-photo .htext .rs-v{color:#fff}
.cur-hero.has-photo .cur-flag-lg{border-color:rgba(255,255,255,.4)}
.cur-hero .hero-photo .ph-tag{position:absolute;left:0;bottom:0;z-index:2;background:var(--ink);color:#fff;font-size:11px;letter-spacing:.02em;padding:4px 8px}

/* "What is the US Dollar?" facts box + explanatory copy */
.cur-facts{border-bottom:1px solid var(--line)}
.cur-facts .wrap{padding-top:52px;padding-bottom:52px}
.facts-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px 48px;align-items:start;margin-top:22px}
.factbox{border:1px solid var(--line)}
.fb{display:flex;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line)}
.fb:last-child{border-bottom:0}
.fb-k{color:var(--mut);font-size:14.5px}
.fb-v{font-weight:600;color:var(--ink);text-align:right}
.facts-copy p{font-size:16.5px;line-height:1.7;color:var(--ink)}
.facts-copy p+p{margin-top:14px}
.facts-main{display:flex;flex-direction:column;gap:22px}
.note-fig{margin:0;max-width:460px}
.note-shot{position:relative;display:block}
.note-fig img{display:block;width:100%;height:auto;border:1px solid var(--line);background:#fff;padding:12px}
.note-fig figcaption{font-size:13px;color:var(--mut);margin-top:8px}
/* hover "view larger" eye button over the note image */
.note-zoom{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(32,32,32,0);border:0;padding:0;cursor:zoom-in;opacity:0;transition:opacity .18s ease,background-color .18s ease}
/* Hover scrim is LIGHT, not dark (changed 5 Aug). --brand on a dark surface measures just
   1.22:1 - the same reason every dark band uses --brand-lite - so a white veil is what lets the
   brand icon read at full strength (--brand on white is 17.26:1) while still signalling
   "this is clickable". Do not darken this scrim; the icon would vanish into it. */
.note-shot:hover .note-zoom,.note-zoom:focus-visible{opacity:1;background:rgba(255,255,255,.45)}
/* No box behind the glyph (Sayeed 5 Aug): the icon used to sit in a filled square with a
   border and padding. Now it is just the mark itself, in the brand colour, sized up to stay an
   obvious target without the box. */
.note-zoom .material-symbols-outlined{font-size:36px;color:var(--brand);background:none;border:0;padding:0;display:flex}
/* Touch devices: NO visible eye icon (Sayeed 5 Aug) - tapping the image itself opens the preview.
   The button stays in place and still covers the whole image (inset:0), so the entire photo is the
   tap target; only its glyph is hidden. Keeping the button (rather than moving the handler onto the
   <img>) preserves the aria-label and keyboard focus for screen-reader and keyboard users.
   Queried on hover:none rather than a width, because the eye was a hover-only affordance and a
   device with no hover can never reveal it - that is the real condition, not screen size. */
@media(hover:none){
  .note-zoom{opacity:1;background:transparent;padding:0}
  .note-zoom .material-symbols-outlined{display:none}
}

/* lightbox (image viewer) - JS-created, used by the note images */
.lbox{position:fixed;inset:0;z-index:10050;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(18,18,20,.92)}
.lbox.on{display:flex}
.lbox-fig{margin:0;max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;gap:12px}
.lbox-img{display:block;max-width:100%;max-height:78vh;object-fit:contain;background:#fff;padding:14px;border:1px solid rgba(255,255,255,.25)}
.lbox-cap{font-size:14px;color:#e7e8ec;text-align:center}
.lbox-x{position:absolute;top:16px;right:16px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;background:var(--ink);color:#fff;border:1px solid rgba(255,255,255,.5);cursor:pointer}
.lbox-x .material-symbols-outlined{font-size:26px}
body.lbox-open{overflow:hidden}
@media(max-width:600px){.lbox{padding:14px}.lbox-img{max-height:70vh;padding:8px}.lbox-x{top:10px;right:10px}}

/* section-rhythm background band (so the page is not a white wall of text) */
.soft-band{background:var(--soft)}

/* highlights strip under the hero: three real features with meaningful icons (not filler) */
.cur-hilite{background:var(--soft);border-bottom:1px solid var(--line)}
.cur-hilite .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 32px;padding-top:22px;padding-bottom:22px}
.hl{display:flex;gap:12px;align-items:flex-start}
.hl>.material-symbols-outlined{color:var(--ink);font-size:26px;flex:0 0 auto}
.hl b{display:block;font-size:15.5px;color:var(--ink)}
.hl span{font-size:13.5px;color:var(--mut)}

/* travel tips as icon-led items */
.tip-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 36px;margin-top:22px}
.tip{display:flex;gap:14px;align-items:flex-start}
.tip>.material-symbols-outlined{color:var(--ink);font-size:26px;flex:0 0 auto}
.tip b{display:block;font-size:16px;color:var(--ink);margin-bottom:4px}
.tip p{font-size:14.5px;line-height:1.6;color:var(--mut);margin:0}

/* things-to-see: sharp place chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.chip-x{border:1px solid var(--line);background:#fff;padding:7px 12px;font-size:14px;color:var(--ink)}

/* place slider (things to see): scroll-snap track + prev/next buttons */
.slider{position:relative;margin-top:22px}
.sl-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.sl-track::-webkit-scrollbar{display:none}
.sl-card{flex:0 0 300px;max-width:82%;scroll-snap-align:start;background:#fff;border:1px solid var(--line)}
.sl-card img{display:block;width:100%;height:190px;object-fit:cover}
.sl-card figcaption{padding:12px 14px}
.sl-card figcaption b{display:block;font-size:16px;color:var(--ink)}
.sl-card figcaption span{display:block;font-size:13.5px;color:var(--mut);margin-top:2px}
.sl-nav{position:absolute;top:95px;transform:translateY(-50%);z-index:2;width:40px;height:40px;padding:0;background:var(--ink);color:#fff;border:1px solid rgba(255,255,255,.55);cursor:pointer;display:flex;align-items:center;justify-content:center}
.sl-prev{left:6px}
.sl-next{right:6px}
.sl-nav:disabled{opacity:.32;cursor:default}
.sl-nav .material-symbols-outlined{font-size:24px}
.ph-note{font-size:12.5px;color:var(--mut);margin-top:12px}
@media(max-width:600px){
  .sl-card{flex-basis:260px}
}

/* "good to know" callout: bordered highlight with a navy accent bar */
.callout{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-left:4px solid var(--ink);background:var(--soft);padding:16px 18px;margin-top:22px}
.callout>.material-symbols-outlined{color:var(--ink);font-size:26px;flex:0 0 auto}
.callout b{display:block;font-size:16px;color:var(--ink);margin-bottom:4px}
.callout p{font-size:14.5px;line-height:1.6;color:var(--mut);margin:0}

/* related-currencies strip: live mini-rate cards linking to sibling currency pages */
.cur-rel{border-bottom:1px solid var(--line)}
.cur-rel .wrap{padding-top:52px;padding-bottom:52px}
.rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:8px}
.relcard{display:flex;align-items:center;gap:12px;padding:14px;background:#fff;border:1px solid var(--line);text-decoration:none;transition:border-color .15s ease}
.relcard:hover{border-color:var(--ink)}
.relcard img{width:30px;height:auto;border:1px solid var(--line);flex:0 0 auto}
.relcard-id{flex:1 1 auto;min-width:0}
.relcard-id b{font-size:15.5px;font-weight:650;color:var(--ink)}
.relcard-code{font-size:13px;font-weight:600;letter-spacing:.03em;color:var(--mut);flex:0 0 auto}
.rel-all{margin-top:18px}
@media(max-width:900px){ .rel-grid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .rel-grid{grid-template-columns:minmax(0,1fr)} }

/* back-to-top button (site-wide, injected by JS). On mobile it sits low in the normal spot and is
   pushed up ONLY while the sticky action bar is showing - driven by the .mbar.show sibling state
   (#totop is appended after #mbar in <body>, so the ~ combinator reaches it). */
#totop{position:fixed;right:16px;bottom:24px;z-index:70;width:44px;height:44px;padding:0;display:none;align-items:center;justify-content:center;background:var(--ink);color:#fff;border:1px solid rgba(255,255,255,.28);cursor:pointer;transition:bottom .3s ease}
#totop.show{display:flex}
#totop .material-symbols-outlined{font-size:24px}
@media(max-width:600px){
  #totop{right:12px;bottom:calc(24px + env(safe-area-inset-bottom, 0px))}
  .mbar.show ~ #totop{bottom:calc(86px + env(safe-area-inset-bottom, 0px))}
}
@media(prefers-reduced-motion:reduce){#totop{transition:none}}

/* ============ ABOUT US PAGE ============ */
.abt-hero-img,.abt-img{position:relative;margin:0}
.abt-hero-img img,.abt-img img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.abt-lead{margin-top:14px;font-size:16px;line-height:1.7;color:var(--ink);max-width:52ch}
.abt-herolink{margin-top:20px}
@media(min-width:901px){.abt-hero .abt-hero-img{grid-column:2}}

.abt-story{border-bottom:1px solid var(--line)}
.abt-story .wrap{padding-top:56px;padding-bottom:56px}
.abt-story-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:28px 48px;align-items:center}
.abt-copy p{font-size:16.5px;line-height:1.75;color:var(--ink)}
.abt-copy p+p{margin-top:14px}
.abt-copy .abt-copylink{margin-top:20px}

.abt-values,.abt-trust{border-bottom:1px solid var(--line)}
.abt-values .wrap,.abt-trust .wrap{padding-top:56px;padding-bottom:56px}
.abt-values .head p,.abt-trust .head p{color:var(--mut);font-size:16.5px;margin-top:8px;max-width:62ch}

.abt-tgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.abt-tcard{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);background:#fff;padding:18px 20px}
.abt-tcard>.material-symbols-outlined{color:var(--ink);font-size:26px;flex:0 0 auto}
.abt-tcard b{display:block;font-size:16px;color:var(--ink);margin-bottom:4px}
.abt-tcard p{font-size:14.5px;line-height:1.6;color:var(--mut);margin:0}
.abt-ilink{color:var(--brand);border-bottom:1px solid var(--brand);text-decoration:none}
.ph-inline{color:var(--brand);font-weight:600}

.abt-story h2,.abt-values h2,.abt-trust h2,.abt-cta h2{font-size:30px;letter-spacing:-.01em;line-height:1.14}
.abt-story h2{margin-bottom:16px}

.abt-cta{text-align:center}
.abt-cta h2{margin-bottom:10px}
.abt-cta p{color:var(--mut);font-size:16.5px;max-width:56ch;margin:10px auto 22px}
.abt-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

@media(max-width:900px){.abt-story-grid{grid-template-columns:minmax(0,1fr);gap:24px}}
@media(max-width:600px){.abt-tgrid{grid-template-columns:minmax(0,1fr)}}

/* ============ REVIEWS PAGE ============ */
.rev-top{border-bottom:1px solid var(--line);text-align:center}
.rev-top .wrap{padding-top:56px;padding-bottom:48px}
.rev-top .sub{margin:14px auto 0;max-width:56ch}
.rev-summary{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:30px}
.rev-big{font-size:60px;font-weight:750;line-height:1;color:var(--ink);letter-spacing:-.02em}
.stars-lg .material-symbols-outlined{font-size:30px}
.rev-count{font-size:15px;color:var(--mut);margin-top:2px}
.rev-write{margin-top:16px}
.rev-list .wrap{padding-top:44px;padding-bottom:44px}
/* flex (not grid) so the last row's 2 cards centre instead of sitting left with an empty slot */
.rev-list .tgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.rev-list .tgrid .tcard{flex:0 0 calc((100% - 32px)/3)}
@media(max-width:820px){.rev-list .tgrid .tcard{flex:0 0 100%}}
.rev-all{text-align:center;margin-top:26px}
.rev-share{border-top:1px solid var(--line)}
.rev-share .wrap{padding-top:52px;padding-bottom:52px;text-align:center}
.rev-share .head{margin-bottom:22px}
.rev-share h2{font-size:30px;letter-spacing:-.01em;line-height:1.14}
.rev-share .head p{color:var(--mut);font-size:16.5px;max-width:62ch;margin:10px auto 0}

/* travel tips / things to see: single-column reading blocks */
.cur-tips,.cur-see{border-bottom:1px solid var(--line)}
.cur-tips .wrap,.cur-see .wrap{padding-top:52px;padding-bottom:52px}
.cur-see p{font-size:16.5px;line-height:1.75;color:var(--ink);max-width:70ch;margin-top:14px}

@media(max-width:900px){
  .facts-wrap{grid-template-columns:minmax(0,1fr);gap:22px}
  .cur-hilite .wrap{grid-template-columns:minmax(0,1fr);gap:14px}
  .tip-grid{grid-template-columns:minmax(0,1fr);gap:18px}
}
@media(max-width:600px){
  .cur-flag-lg{width:54px;height:40px}
  .cur-code-lg{font-size:23px}
  .rs-k{font-size:12px}
  .rs-v{font-size:16px}
  .ratesnap{gap:10px 22px;margin-top:20px}
  .cur-hero.has-photo .hero-photo::after{background:linear-gradient(180deg,rgba(20,20,20,.5) 0%,rgba(20,20,20,.84) 100%)}
  /* mobile: centre the note image + caption, and the highlights items (icon/title/tagline stacked) */
  .note-fig img{margin-left:auto;margin-right:auto}
  .note-fig figcaption{text-align:center}
  .hl{flex-direction:column;align-items:center;text-align:center;gap:8px}
}

/* ============================================================================
   BRAND APPLICATION - where the brand colour is allowed to appear.
   The palette itself is defined once at the top of this file; this block only
   ASSIGNS it. Black is the base; the brand marks interaction, live state and
   the calculator CTAs. Same idea as Currency Wise using gold only where it counts.
   ============================================================================ */
/* interaction = blue (buttons rest black, turn electric on hover) */
.btn.solid:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.ghost:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.more:hover{color:var(--brand);border-bottom-color:var(--brand)}
nav.main > a:hover,nav.main .navdrop > a:hover{color:var(--brand)}
.faq-trigger:hover{color:var(--brand)}
/* the calculator's Store directions / Call now stay blue (Sayeed likes these) */
.calc .cgo .dir,.calc .cgo .call{color:var(--brand)}
/* DARK surfaces: --brand on black measures 1.22:1 and is effectively invisible, so every
   dark band uses --brand-lite instead (same hue, 7.54:1 on black). Never change these
   back to var(--brand) - it would look like the text had disappeared. */
footer a:hover{color:var(--brand-lite)}
.store a.line:hover,.store .morelight:hover{color:var(--brand-lite)}
.util .uright a:hover{color:var(--brand-lite)}
.drawer nav a:hover{color:var(--brand-lite)}
.store .st.open .dot,.util .st.open .dot,.drawer .st.open .dot,.mbar-st.open .dot{background:var(--brand-lite)}

/* --- palette v2b (Sayeed, 4 Aug round 2): put the blue back where it SIGNALS something -
   identity (logo), "you are here" (active nav), every underlined arrow link, the feature
   icons, and the contact details you can act on. Structure/type/values stay black. --- */
nav.main a.on{color:var(--brand)}      /* the selected page in the header */
.prom .ic{background:var(--brand)}     /* "our promises" icon chips: blue + white */
/* feature icons on light surfaces (getting-here train/bus/parking/area, currency-page
   highlights + tips + callout, about-page trust cards) */
.getting-here .cell .material-symbols-outlined,
.hl > .material-symbols-outlined,
.tip > .material-symbols-outlined,
.callout > .material-symbols-outlined,
.abt-tcard > .material-symbols-outlined{color:var(--brand)}
/* contact details you can tap: phone + email + address (the dark store band keeps white) */
.contact a.line,.cdetails a.line{color:var(--brand)}
.contact a.line:hover,.cdetails a.line:hover{color:var(--ink)}

/* --- palette v2c (Sayeed, 4 Aug round 3): pull the eye to anything about RATES, and let the
   OPEN FAQ question read blue. The rate CTAs are matched by DESTINATION rather than by a
   per-page class, because these pages are generated by clone scripts - a hand-added class
   would be lost on the next rebuild. The hero "Check today's rates" (href="#rates") stays
   black on purpose; Sayeed excluded it. --- */
.faq-item.open .faq-trigger{color:var(--brand)}
/* "Check our rates" (contact), "Check today's rates" (about, reviews), "See sell-back rates"
   (homepage buy-back band). Both the preview's relative href and the production clean URL are
   listed, so the deploy bake to /currency-rates/ cannot silently drop the colour. */
.btn.solid[href$="currency-rates/index.html"],
.btn.solid[href$="/currency-rates/"],
#bb-sell.btn.solid{background:var(--brand);border-color:var(--brand);color:#fff}
/* Blue at rest, black on hover - the inverse of the black-at-rest buttons. Without this the
   v2 `.btn.solid:hover{background:var(--brand)}` rule would make hover a no-op on these. */
.btn.solid[href$="currency-rates/index.html"]:hover,
.btn.solid[href$="/currency-rates/"]:hover,
#bb-sell.btn.solid:hover{background:var(--ink);border-color:var(--ink);color:#fff}
/* homepage currency-teaser "All currency rates" tile: black -> blue, hover black */
.ctiles a.all{background:var(--brand);border-color:var(--brand)}
.ctiles a.all:hover{background:var(--ink);border-color:var(--ink)}

/* ============================================================================
   LEGAL PAGES - /privacy-policy/ and /terms-and-conditions/ (5 Aug 2026).
   Sticky section nav + a readable measure + a plain-English summary box, so a
   long legal document stays navigable. Sharp edges and the existing palette
   only - no new colours. Reuses .callout, .cta-band and .store from elsewhere.
   ============================================================================ */
.legal-head{padding:44px 0 30px;border-bottom:1px solid var(--line)}
.legal-head h1{font-size:44px;line-height:1.1;letter-spacing:-.02em}
@media(max-width:900px){.legal-head h1{font-size:34px}}
@media(max-width:600px){.legal-head h1{font-size:29px}}
.legal-updated{display:inline-flex;align-items:center;gap:7px;margin-top:15px;font-size:14px;font-weight:600;color:var(--mut)}
.legal-updated .material-symbols-outlined{font-size:18px;color:var(--brand)}
.legal-intro{margin-top:12px;font-size:17px;color:var(--mut);max-width:70ch;line-height:1.6}

/* "In short" plain-English summary. Explicitly labelled as a summary so it can
   never be mistaken for the operative text. */
.legal-sumwrap{padding:30px 0 0}
.legal-sum{border:1px solid var(--line);border-left:4px solid var(--brand);background:var(--soft);padding:24px 28px;max-width:900px}
.legal-sum h2{font-size:19px;letter-spacing:-.01em}
.legal-sum-note{font-size:13px;color:var(--mut);margin-top:5px}
.legal-sum ul{margin:16px 0 0;padding-left:20px}
.legal-sum li{font-size:15.5px;line-height:1.62;margin-bottom:10px}
.legal-sum li:last-child{margin-bottom:0}

/* Body: sticky table of contents beside the text */
.legal-main{padding:38px 0 64px}
.legal-grid{display:grid;grid-template-columns:252px minmax(0,1fr);gap:52px;align-items:start}
@media(max-width:900px){.legal-grid{grid-template-columns:minmax(0,1fr);gap:24px}}
.legal-nav{position:sticky;top:92px}
@media(max-width:900px){.legal-nav{position:static}}
.legal-toc{border:1px solid var(--line)}
.legal-toc summary{display:flex;align-items:center;gap:8px;padding:13px 16px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;background:var(--soft);list-style:none}
.legal-toc summary::-webkit-details-marker{display:none}
.legal-toc summary .material-symbols-outlined{font-size:19px;color:var(--brand)}
.legal-toc ol{list-style:none;margin:0;padding:8px 0;max-height:calc(100vh - 190px);overflow-y:auto}
@media(max-width:900px){.legal-toc ol{max-height:none}}
.legal-toc li a{display:flex;gap:9px;padding:7px 16px;font-size:14px;color:var(--mut);text-decoration:none;line-height:1.4;transition:color .18s ease,background-color .18s ease}
.legal-toc li a:hover{color:var(--brand);background:var(--soft)}
.legal-toc .ln-n{flex-shrink:0;font-variant-numeric:tabular-nums;font-weight:650;color:var(--line2,#b9bdc7)}
.legal-toc li a.on{color:var(--brand);font-weight:650}
.legal-toc li a.on .ln-n{color:var(--brand)}

.legal-body{max-width:74ch}
.legal-sec{padding-bottom:30px;scroll-margin-top:110px}
.legal-sec h2{font-size:23px;letter-spacing:-.01em;line-height:1.25;margin-bottom:12px;display:flex;gap:10px}
@media(max-width:600px){.legal-sec h2{font-size:20px}}
.legal-sec .ls-n{color:var(--brand);font-variant-numeric:tabular-nums;flex-shrink:0}
.legal-sec p{font-size:16px;line-height:1.72;color:var(--mut);margin-bottom:12px}
.legal-sec p:last-child{margin-bottom:0}
.legal-sec b{color:var(--ink);font-weight:650}
.legal-list{margin:4px 0 14px;padding-left:20px}
.legal-list li{font-size:16px;line-height:1.68;color:var(--mut);margin-bottom:7px}
.legal-sec .callout{margin:6px 0 4px}
.legal-sec .callout p{margin-bottom:0}
.legal-link{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.legal-link:hover{color:var(--ink)}
.legal-nowrap{white-space:nowrap}
.legal-cross{margin-top:8px;padding-top:22px;border-top:1px solid var(--line);font-size:16px;color:var(--mut)}

/* ============ 404 ============
   Sharp-edged link cards reusing the .hl icon-led pattern and the .sl-card border, so the
   not-found page reads as the same site rather than a bolted-on error screen. */
.nf{padding:8px 0 64px}
.nf-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:820px){.nf-grid{grid-template-columns:1fr}}
.nf-card{display:block;background:#fff;border:1px solid var(--line);padding:20px 22px;text-decoration:none;transition:border-color .12s ease}
.nf-card:hover{border-color:var(--ink)}
.nf-card>.material-symbols-outlined{color:var(--ink);font-size:26px;display:block;margin-bottom:10px}
.nf-card b{display:block;font-size:16.5px;color:var(--ink);margin-bottom:4px}
.nf-card span{display:block;font-size:14px;line-height:1.6;color:var(--mut)}
.nf-back{margin-top:28px}