/* ===========================================================================
   Money2Travel - per-currency page sections (/buy-currency/[code]-[name]/).
   Loads AFTER m2t-home.css, which it reuses for nav, drawer, hero, converter,
   compare, trust strip, steps, fees, FAQ, CTA, footer, buttons + .m2t-reveal.
   This file only adds the currency-specific blocks. Scoped under .m2t, flat.
   ========================================================================= */

/* ---- breadcrumb (sits at the top of the dark hero) ---- */
.m2t-bc{ max-width:var(--wrap); margin:0 auto 24px; padding:0 24px; }   /* align with the hero container */
.m2t-bc ol{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:0; padding:0; list-style:none;
  font-size:13px; color:rgba(255,255,255,.6); }
.m2t-bc li{ display:flex; align-items:center; gap:9px; }
.m2t-bc li + li::before{ content:""; width:5px; height:5px; border-right:1.5px solid rgba(255,255,255,.35); border-bottom:1.5px solid rgba(255,255,255,.35); transform:rotate(-45deg); }
.m2t-bc a{ color:rgba(255,255,255,.6); transition:color .15s; }
.m2t-bc a:hover{ color:#fff; }
.m2t-bc [aria-current]{ color:#fff; font-weight:600; }

/* the currency hero reuses .m2t-hero; the copy stays vertically centred (like the homepage) */
.m2t-cur-hero{ padding-top:118px; padding-bottom:92px; }
.m2t-cur-h1 span{ color:var(--cyan); }
.m2t-cur-lede{ margin:0 0 22px; max-width:560px; font-size:1.19rem; line-height:1.6; color:rgba(220,233,247,.85); }

/* ---- generic content section + headings ---- */
.m2t-cur-sec{ padding:66px 24px; background:#fff; }
.m2t-cur-sec--alt{ background:#f4f8fc; }
/* Content sections now match the SITE container (--wrap 1240px) so they line up with the
   nav, hero, trust strip and rate grids. Only genuine long-form reading (prose, tables)
   gets the narrower measure via --narrow, which is a deliberate typographic choice. */
.m2t-cur-wrap{ max-width:var(--wrap); margin:0 auto; }
.m2t-cur-wrap--narrow{ max-width:940px; }        /* long-form prose + data tables */
.m2t-cur-wrap--wide{ max-width:var(--wrap); }    /* kept for existing markup (same as default now) */
/* Section headings are CENTRED and large by default - a strong brand moment like
   Travelex, not a left-aligned document heading. Two-column contexts (Key info,
   places slider) opt back to left alignment below. */
.m2t-cur-h2{ margin:0 0 16px; font-size:clamp(28px,3.6vw,42px); font-weight:800; line-height:1.12; letter-spacing:-.02em; color:var(--navy); }
.m2t-cur-sub{ margin:0; font-size:19px; line-height:1.65; color:var(--muted); }
.m2t-cur-head{ text-align:center; max-width:720px; margin:0 auto 46px; }
.m2t-cur-head--center{ text-align:center; max-width:680px; margin-left:auto; margin-right:auto; }
/* Headings meant to sit on ONE line on desktop. The 720px cap above wraps a ~40
   character H2 at the top of the clamp (42px needs roughly 885px). Lift the cap on
   large screens only - below 1100px it falls back to 720px and wraps as normal. */
@media (min-width:1100px){ .m2t-cur-head--wide{ max-width:1000px; } }
/* left-aligned exceptions: headings that sit beside something in a 2-col layout */
.m2t-keyinfo-copy .m2t-cur-head,
.m2t-places-head .m2t-cur-head{ text-align:left; max-width:none; margin-left:0; margin-right:0; }
@media (max-width:760px){
  .m2t-cur-head{ margin-bottom:34px; }
  .m2t-cur-sub{ font-size:17px; }
}

/* ---- long-form prose ("Your journey starts here") ---- */
.m2t-prose p{ margin:0 0 20px; font-size:18px; line-height:1.78; color:var(--ink); }
.m2t-prose p:last-child{ margin-bottom:0; }
.m2t-prose .m2t-prose-tip{ margin-top:24px; padding:18px 20px; border:1px solid var(--line); border-left:4px solid var(--cyan); border-radius:7px; background:#fff; font-size:17px; line-height:1.7; color:var(--ink); }

/* ---- REMOVED July 2026: .m2t-ticks / .m2t-tick-dot (repeated green-tick bullet lists).
   Sayeed rejected them as cheap-looking, and no premium currency site uses them - Travelex,
   S Money, Wise, Travel Money Oz and XE all use numbered chips, icon+value tiles or
   key-value tables instead. Deliberately NOT re-added: use .m2t-listrows (numbered hairline
   rows), .m2t-reasons (hairline cell grid) or .m2t-costgrid (icon + value tiles). ---- */

/* two-column split (text + side card) */
.m2t-split{ display:grid; grid-template-columns:1.15fr .85fr; gap:46px; align-items:start; }

/* ---- "what things cost" table ---- */
.m2t-cost{ width:100%; border:1px solid var(--line); border-radius:7px; overflow:hidden; background:#fff; border-collapse:collapse; }
.m2t-cost caption{ caption-side:top; text-align:left; font-size:13px; color:var(--muted); padding:0 0 12px; }
.m2t-cost th,.m2t-cost td{ text-align:left; padding:15px 20px; font-size:15.5px; border-bottom:1px solid var(--line); }
.m2t-cost thead th{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; background:#f8fbfe; }
.m2t-cost thead th:last-child{ text-align:right; }   /* header lines up with the right-aligned cost values */
.m2t-cost tbody tr:last-child td{ border-bottom:0; }
.m2t-cost td:first-child{ font-weight:600; color:var(--navy); }
.m2t-cost td:last-child{ text-align:right; font-weight:700; color:var(--cyan-d); white-space:nowrap; }

/* ---- currency snapshot / facts + denominations ---- */
.m2t-facts{ width:100%; border:1px solid var(--line); border-radius:7px; overflow:hidden; background:#fff; border-collapse:collapse; }
.m2t-facts th,.m2t-facts td{ text-align:left; padding:14px 20px; font-size:15.5px; border-bottom:1px solid var(--line); }
.m2t-facts tr:last-child th,.m2t-facts tr:last-child td{ border-bottom:0; }
.m2t-facts th{ width:42%; font-weight:600; color:var(--muted); background:#f8fbfe; }
.m2t-facts td{ font-weight:700; color:var(--navy); }
.m2t-facts .m2t-sym{ font-size:18px; }

.m2t-denom{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px; }
.m2t-denom-card{ border:1px solid var(--line); border-radius:7px; padding:22px 22px 24px; background:#fff; }
.m2t-denom-card h3{ margin:0 0 14px; font-size:14px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.m2t-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.m2t-chip{ display:inline-flex; align-items:center; justify-content:center; min-width:48px; padding:8px 12px; border:1.5px solid var(--line); border-radius:7px; font-size:15px; font-weight:700; color:var(--navy); }
.m2t-chip--coin{ border-radius:999px; }

/* ---- cities grid ("Where your money travels") ---- */
.m2t-cities{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.m2t-city{ border:1px solid var(--line); border-radius:7px; padding:20px; background:#fff; }
.m2t-city h3{ margin:0 0 6px; font-size:16px; font-weight:800; color:var(--navy); }
.m2t-city p{ margin:0; font-size:13.5px; line-height:1.5; color:var(--muted); }
.m2t-cities-note{ max-width:800px; margin:26px auto 0; text-align:center; font-size:17px; line-height:1.7; color:var(--ink); }

/* ---- related currencies (reuses .m2t-rates-grid / .m2t-rate-card from m2t-home.css) ---- */
.m2t-related .m2t-rates-grid{ margin-top:6px; }

/* ---- currency-page CTA (standalone: NOT merged with the footer, unlike the homepage) ---- */
.m2t-cur-end{ background:#fff; padding:10px 20px 48px; }

/* ---- responsive ---- */
@media (max-width:900px){
  .m2t-split{ grid-template-columns:1fr; gap:30px; }
  .m2t-cities{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .m2t-cur-hero{ padding-top:104px; }
  .m2t-cur-sec{ padding:50px 18px; }
  .m2t-denom{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .m2t-cities{ grid-template-columns:1fr; }
}

/* ---- premium heading accent (cyan bar under each section H2) - centred by default ---- */
.m2t-cur-head .m2t-cur-h2::after{ content:""; display:block; width:56px; height:3px; border-radius:3px;
  background:var(--cyan); margin:18px auto 0; }
.m2t-cur-head--center .m2t-cur-h2::after{ margin-left:auto; margin-right:auto; }
/* left-aligned exceptions keep the bar on the left */
.m2t-keyinfo-copy .m2t-cur-head .m2t-cur-h2::after,
.m2t-places-head .m2t-cur-head .m2t-cur-h2::after{ margin-left:0; margin-right:0; }

/* ---- locked currency: on /buy-currency/ pages the converter + compare are FIXED to that currency ---- */
.m2t-cur.is-locked{ cursor:default; }
.m2t-cur.is-locked .m2t-chev{ display:none; }
.m2t-cmp-ctl-pick.is-locked{ cursor:default; }
.m2t-cmp-ctl-pick.is-locked .m2t-chev{ display:none; }

/* ---- premium info cards (icon-led) ---- */
.m2t-cardgrid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.m2t-infocard{ border:1px solid var(--line); border-radius:7px; background:#fff; padding:30px 32px 32px; transition:border-color .2s; }
.m2t-infocard:hover{ border-color:rgba(0,154,218,.45); }
.m2t-infocard-ic{ display:grid; place-items:center; width:46px; height:46px; border-radius:7px; margin-bottom:18px; color:var(--cyan-d); background:rgba(0,154,218,.1); }
.m2t-infocard-ic svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.m2t-infocard h3{ margin:0 0 16px; font-size:21px; font-weight:800; color:var(--navy); }
.m2t-reasoncard{ border:1px solid var(--line); border-radius:7px; background:#fff; padding:34px 36px; }

/* ---- must-visit places slider ---- */
.m2t-places-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; }
.m2t-places-head .m2t-cur-head{ margin-bottom:0; }
.m2t-places-nav{ display:flex; gap:10px; flex:none; }
.m2t-places-arrow{ width:46px; height:46px; display:grid; place-items:center; border:1.5px solid var(--line); border-radius:50%; background:#fff; color:var(--navy); cursor:pointer; transition:.18s; }
.m2t-places-arrow:hover{ border-color:var(--cyan); background:var(--cyan); color:#fff; }
.m2t-places-arrow svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.m2t-places-track{ display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:4px 4px 14px; margin:0 -4px; -ms-overflow-style:none; scrollbar-width:none; }
.m2t-places-track::-webkit-scrollbar{ display:none; }
.m2t-place{ flex:0 0 300px; scroll-snap-align:start; border:1px solid var(--line); border-radius:7px; overflow:hidden; background:#fff; transition:border-color .2s; }
.m2t-place:hover{ border-color:rgba(0,154,218,.45); }
.m2t-place-img{ aspect-ratio:16 / 11; overflow:hidden; background:#eef3f8; }
.m2t-place-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.m2t-place:hover .m2t-place-img img{ transform:scale(1.05); }
.m2t-place-body{ padding:18px 20px 22px; }
.m2t-place-body h3{ margin:0 0 6px; font-size:19.5px; font-weight:800; color:var(--navy); }
.m2t-place-body p{ margin:0; font-size:15px; line-height:1.55; color:var(--muted); }

@media (max-width:760px){ .m2t-cardgrid{ grid-template-columns:1fr; } }
@media (max-width:560px){ .m2t-place{ flex-basis:78%; } .m2t-places-head{ flex-wrap:wrap; } .m2t-cost th,.m2t-cost td{ padding:13px 15px; } }

/* keep the breadcrumb left edge matched to the hero container at every breakpoint */
@media (max-width:980px){ .m2t-bc{ padding:0 18px; } .m2t-cur-hero .m2t-cur-lede{ margin-left:auto; margin-right:auto; } }
@media (max-width:520px){ .m2t-bc{ padding:0 16px; } }

/* ---- 3-card variant of the info cards (Before / How locals pay / Cash rules) ---- */
.m2t-cardgrid--3{ grid-template-columns:repeat(3,1fr); }
.m2t-cardgrid--3 .m2t-infocard{ padding:26px 26px 28px; }
@media (max-width:980px){ .m2t-cardgrid--3{ grid-template-columns:1fr; } }

/* ---- photo of the physical cash (currency snapshot section) ---- */
.m2t-cash-figure{ margin:0 0 20px; border:1px solid var(--line); border-radius:7px; overflow:hidden; background:#eef3f8; }
.m2t-cash-figure img{ display:block; width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover; }

/* optional per-denomination note gallery (renders only when note_gallery data exists) */
.m2t-notes-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; margin-top:24px; }
.m2t-note-card{ margin:0; border:1px solid var(--line); border-radius:7px; overflow:hidden; background:#fff; }
.m2t-note-card img{ display:block; width:100%; aspect-ratio:2 / 1; object-fit:cover; background:#eef3f8; }
.m2t-note-card figcaption{ padding:10px 14px; font-size:13.5px; font-weight:700; color:var(--navy); border-top:1px solid var(--line); }

/* ---- AUD conversion guide note ---- */
.m2t-cheat-note{ margin:20px auto 0; max-width:760px; text-align:center; font-size:15px; line-height:1.6; color:var(--muted); }

/* ---- /buy-currency/ index page: search + all-41 grid ---- */
.m2t-allsearch{ position:relative; max-width:430px; margin:0 0 28px; }
.m2t-allsearch svg{ position:absolute; left:15px; top:50%; transform:translateY(-50%); width:18px; height:18px; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; }
.m2t-allsearch input{ width:100%; padding:13px 16px 13px 44px; border:1.5px solid var(--line); border-radius:7px; background:#fff; font:inherit; font-size:15px; color:var(--ink); }
.m2t-allsearch input:focus{ outline:none; border-color:var(--cyan); }
.m2t-allsearch input::placeholder{ color:var(--muted); }
.m2t-all-grid .m2t-rate-card{ position:relative; }
.m2t-rate-pop{ position:absolute; top:10px; right:12px; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--cyan-d); }
.m2t-all-empty{ margin:20px 0 0; font-size:15px; color:var(--muted); }

/* ---- "Key information" spec cards (S Money-style layout, our brand) ----
   Uses the STANDARD 940px wrap so its left/right edges line up with every other
   content section. Both cards stretch to the SAME height and their rows share the
   height evenly, so the card bottoms always align regardless of row counts. */
.m2t-keyinfo{ display:grid; grid-template-columns:1fr 1fr; gap:30px 48px; align-items:center; margin-bottom:32px; }
/* no cash photo sourced yet for this currency -> single column, no empty half */
.m2t-keyinfo--nofig{ grid-template-columns:1fr; max-width:780px; }
.m2t-keyinfo-copy .m2t-cur-head{ margin-bottom:18px; }
.m2t-keyinfo-lede{ margin:0; max-width:470px; font-size:17.5px; line-height:1.7; color:var(--ink); }
.m2t-keyinfo-figure{ margin:0; }
.m2t-kcards{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }
.m2t-kcard{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:7px; background:#fff; overflow:hidden; }
.m2t-kcard-head{ display:flex; align-items:center; gap:11px; padding:14px 18px; background:var(--navy); }
.m2t-kcard-head svg{ width:18px; height:18px; flex:none; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.m2t-kcard-head h3{ margin:0; font-size:17px; font-weight:700; color:#fff; letter-spacing:.005em; }
.m2t-krows{ margin:0; flex:1; display:flex; flex-direction:column; }
.m2t-krow{ flex:1 1 auto; min-height:52px; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:12px 18px; border-bottom:1px solid var(--line); }
.m2t-krow:last-child{ border-bottom:0; }
.m2t-krow dt{ flex:none; font-size:15.5px; font-weight:700; color:var(--navy); }
.m2t-krow dd{ margin:0; max-width:62%; display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:7px; text-align:right; font-size:15.5px; font-weight:600; line-height:1.55; color:var(--ink); }
.m2t-krow-flag{ border-radius:2px; flex:none; }
.m2t-krow-sym{ font-size:16.5px; }
.m2t-krow dd a{ color:var(--cyan-d); font-weight:700; }
.m2t-krow dd a:hover{ text-decoration:underline; }
@media (max-width:900px){
  .m2t-keyinfo{ grid-template-columns:1fr; gap:22px; margin-bottom:26px; }
  .m2t-keyinfo-lede{ max-width:none; }
  .m2t-kcards{ grid-template-columns:1fr; gap:18px; }
  .m2t-krow{ min-height:0; }             /* stacked cards size naturally */
}
@media (max-width:520px){
  .m2t-kcard-head{ padding:12px 14px; gap:9px; }
  .m2t-kcard-head h3{ font-size:14.5px; }
  .m2t-krow{ padding:11px 14px; gap:12px; }
  .m2t-krow dt{ font-size:13px; }
  .m2t-krow dd{ font-size:13px; max-width:58%; line-height:1.45; }
  .m2t-krow-flag{ width:19px; height:13px; }
}

/* ===========================================================================
   HOW IT WORKS - premium sections (zigzag process, stat band, comparison).
   Built to replace text-only blocks with designed, composed sections.
   ========================================================================= */

/* ---- zigzag process: copy one side, a real visual the other, alternating ---- */
.m2t-zig{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.m2t-zig + .m2t-zig{ margin-top:84px; }
.m2t-zig--rev .m2t-zig-visual{ order:-1; }
.m2t-zig-step{ display:inline-flex; align-items:center; gap:11px; margin-bottom:18px; }
.m2t-zig-num{ display:grid; place-items:center; width:36px; height:36px; flex:none; border-radius:7px;
  background:var(--navy); color:#fff; font-size:15px; font-weight:800; }
.m2t-zig-label{ font-size:13px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--cyan-d); }
.m2t-zig-copy h3{ margin:0 0 14px; font-size:clamp(22px,2.4vw,29px); font-weight:800; line-height:1.2;
  letter-spacing:-.01em; color:var(--navy); }
.m2t-zig-copy p{ margin:0 0 14px; font-size:17.5px; line-height:1.75; color:var(--ink); }
.m2t-zig-copy p:last-of-type{ margin-bottom:0; }
.m2t-zig-note{ display:inline-block; margin-top:16px; padding:10px 16px; border-radius:7px;
  background:rgba(0,154,218,.09); font-size:16px; font-weight:700; color:var(--cyan-d); }

/* ---- visual: product mockups (flat cards, on-brand 7px radius - no phone frames) ---- */
.m2t-mock{ border:1px solid var(--line); border-radius:7px; background:#fff; padding:26px 26px 28px; }
.m2t-mock-cap{ display:block; margin-top:14px; font-size:12.5px; color:var(--muted); text-align:center; }

/* mini converter (mirrors our real converter) */
.m2t-mock-conv{ border-radius:7px; background:#0b2340; padding:22px; }
.m2t-mock-conv-head{ font-size:13px; font-weight:700; color:rgba(255,255,255,.72); text-align:center; margin-bottom:15px; }
.m2t-mock-row{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#fff; border-radius:7px; padding:13px 15px; margin-bottom:9px; }
.m2t-mock-cur{ display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:800; color:var(--navy); }
.m2t-mock-cur img{ width:23px; height:16px; border-radius:2px; }
.m2t-mock-amt{ font-size:19px; font-weight:800; color:var(--navy); letter-spacing:-.01em; }
.m2t-mock-rate{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:13px;
  padding:9px; border-radius:7px; background:rgba(255,255,255,.07); font-size:13px; font-weight:700; color:#fff; }
.m2t-mock-btn{ display:block; margin-top:11px; padding:12px; border-radius:7px; background:var(--cyan);
  color:#fff; font-size:14.5px; font-weight:800; text-align:center; }

/* payment confirmed card */
.m2t-mock-pay{ text-align:center; }
.m2t-mock-check{ display:grid; place-items:center; width:56px; height:56px; margin:4px auto 16px; border-radius:50%;
  background:rgba(0,154,218,.12); }
.m2t-mock-check svg{ width:28px; height:28px; fill:none; stroke:var(--cyan-d); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.m2t-mock-pay h4{ margin:0 0 6px; font-size:17px; font-weight:800; color:var(--navy); }
.m2t-mock-pay .m2t-mock-big{ display:block; margin:14px 0 4px; font-size:30px; font-weight:800; color:var(--navy); letter-spacing:-.02em; }
.m2t-mock-pill{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; padding:8px 15px; border-radius:999px;
  background:rgba(10,34,64,.06); font-size:13px; font-weight:700; color:var(--navy); }
.m2t-mock-meta{ margin-top:16px; padding-top:15px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }

/* order-ready notification card */
.m2t-mock-notif-top{ display:flex; align-items:center; gap:11px; padding-bottom:15px; margin-bottom:15px; border-bottom:1px solid var(--line); }
.m2t-mock-dot{ width:9px; height:9px; border-radius:50%; background:var(--cyan); flex:none; }
.m2t-mock-notif-top strong{ font-size:15px; font-weight:800; color:var(--navy); }
.m2t-mock-line{ display:flex; align-items:flex-start; gap:11px; margin-bottom:13px; font-size:14px; line-height:1.5; color:var(--ink); }
.m2t-mock-line:last-child{ margin-bottom:0; }
.m2t-mock-line svg{ width:17px; height:17px; flex:none; margin-top:2px; fill:none; stroke:var(--cyan-d); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.m2t-mock-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; padding-top:15px; border-top:1px solid var(--line); }
.m2t-mock-chip{ padding:6px 12px; border-radius:999px; background:rgba(0,154,218,.1); font-size:12.5px; font-weight:700; color:var(--cyan-d); }

/* photo visual */
.m2t-zig-photo{ margin:0; border:1px solid var(--line); border-radius:7px; overflow:hidden; background:#eef3f8; }
.m2t-zig-photo img{ display:block; width:100%; height:100%; aspect-ratio:4 / 3; object-fit:cover; }

/* ---- navy stat band (replaces the old facts table) ---- */
.m2t-statband{ background:var(--navy); padding:66px 24px; position:relative; overflow:hidden; }
.m2t-statband-inner{ max-width:var(--wrap); margin:0 auto; position:relative; z-index:1; }
.m2t-statband-head{ text-align:center; max-width:620px; margin:0 auto 44px; }
.m2t-statband-head h2{ margin:0 0 12px; font-size:clamp(25px,3vw,36px); font-weight:800; line-height:1.15; color:#fff; letter-spacing:-.01em; }
.m2t-statband-head p{ margin:0; font-size:18px; line-height:1.6; color:rgba(220,233,247,.82); }
.m2t-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.m2t-stat{ text-align:center; padding:26px 16px; border-radius:7px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1); }
.m2t-stat-num{ display:block; font-size:clamp(32px,4.4vw,50px); font-weight:800; line-height:1;
  color:var(--cyan); letter-spacing:-.02em; }
.m2t-stat-label{ display:block; margin-top:12px; font-size:16px; font-weight:600; line-height:1.45; color:rgba(255,255,255,.8); }

/* ---- comparison: airport vs Money2Travel ---- */
.m2t-vs{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.m2t-vs-card{ border:1px solid var(--line); border-radius:7px; background:#fff; padding:30px 32px 34px; }
.m2t-vs-card--win{ border-color:rgba(0,154,218,.5); background:#fff; }
.m2t-vs-head{ display:flex; align-items:center; gap:12px; padding-bottom:18px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.m2t-vs-ic{ display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:7px; }
.m2t-vs-card .m2t-vs-ic{ background:rgba(91,107,128,.12); color:var(--muted); }
.m2t-vs-card--win .m2t-vs-ic{ background:var(--cyan); color:#fff; }
.m2t-vs-ic svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.m2t-vs-head h3{ margin:0; font-size:19.5px; font-weight:800; color:var(--navy); }
.m2t-vs-list{ list-style:none; margin:0; padding:0; display:grid; gap:15px; }
.m2t-vs-list li{ display:flex; align-items:flex-start; gap:12px; font-size:16.5px; line-height:1.55; color:var(--ink); }
.m2t-vs-mark{ display:grid; place-items:center; width:22px; height:22px; flex:none; border-radius:50%; margin-top:1px; }
.m2t-vs-mark svg{ width:13px; height:13px; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.m2t-vs-no .m2t-vs-mark{ background:rgba(91,107,128,.13); }
.m2t-vs-no .m2t-vs-mark svg{ stroke:var(--muted); }
.m2t-vs-no{ color:var(--muted); }
.m2t-vs-yes .m2t-vs-mark{ background:rgba(0,154,218,.14); }
.m2t-vs-yes .m2t-vs-mark svg{ stroke:var(--cyan-d); }

/* ---- responsive ---- */
@media (max-width:980px){
  .m2t-zig{ grid-template-columns:1fr; gap:34px; }
  .m2t-zig + .m2t-zig{ margin-top:60px; }
  .m2t-zig--rev .m2t-zig-visual{ order:0; }      /* visual always AFTER copy on mobile */
  .m2t-stats{ grid-template-columns:repeat(2,1fr); gap:18px; }
  .m2t-vs{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .m2t-statband{ padding:52px 18px; }
  .m2t-statband-head{ margin-bottom:32px; }
  .m2t-stat{ padding:20px 12px; }
  .m2t-vs-card{ padding:24px 22px 28px; }
  .m2t-mock{ padding:20px; }
  .m2t-mock-conv{ padding:18px; }
}
@media (max-width:400px){
  .m2t-stats{ grid-template-columns:1fr; }
}

/* ===========================================================================
   CURRENCY PAGE - designed content blocks (July 2026).
   These replace the repeated tick-bullet lists and the plain data tables.
   Sayeed's brief: repeated tick marks read cheap, and text-only sections read
   like a document. Everything below is a composed section instead: hairline
   grids, numbered editorial rows, icon cards and photography.
   ========================================================================= */

/* ---- reasons: a hairline cell grid (no ticks) ----
   Hairlines are drawn as CELL BORDERS, not as gap-bleed, so a short final row leaves no
   dead grey cells. A lone trailing item is CENTRED (10 items = 3/3/3/1 in the middle);
   with two trailing items they centre as a pair. Works for any count, any currency. */
.m2t-reasons{ display:grid; grid-template-columns:repeat(6,1fr); background:#fff;
  border:1px solid var(--line); border-radius:7px; overflow:hidden; }
.m2t-reason{ grid-column:span 2; background:#fff; padding:24px 26px 26px; transition:background .2s;
  border-top:1px solid var(--line); border-left:1px solid var(--line); }
.m2t-reason:hover{ background:#f8fbfe; }
.m2t-reason:nth-child(-n+3){ border-top:0; }        /* first row */
.m2t-reason:nth-child(3n+1){ border-left:0; }       /* first column */
/* ONE item left over (e.g. 10 reasons = 3/3/3/1) -> sit it dead centre */
.m2t-reason:last-child:nth-child(3n+1){ grid-column:3 / span 2;
  border-left:1px solid var(--line); border-right:1px solid var(--line); }
/* TWO left over (e.g. 11) -> centre the pair; the second cell flows in beside it */
.m2t-reason:nth-last-child(2):nth-child(3n+1){ grid-column:2 / span 2; border-left:1px solid var(--line); }
.m2t-reason:nth-last-child(2):nth-child(3n+1) ~ .m2t-reason:last-child{ border-right:1px solid var(--line); }
.m2t-reason-n{ display:block; margin-bottom:10px; font-size:13px; font-weight:800; letter-spacing:.08em;
  color:var(--cyan-d); font-variant-numeric:tabular-nums; }
.m2t-reason-t{ display:block; font-size:17px; font-weight:700; line-height:1.45; color:var(--navy); }

/* ---- advice lists: numbered hairline rows (no ticks) ---- */
.m2t-listrows{ list-style:none; margin:0; padding:0; }
.m2t-listrows li{ display:flex; align-items:flex-start; gap:14px; padding:14px 0;
  border-top:1px solid var(--line); font-size:16.5px; line-height:1.62; color:var(--ink); }
.m2t-listrows li:first-child{ border-top:0; padding-top:0; }
.m2t-listrows li:last-child{ padding-bottom:0; }
.m2t-listrows .m2t-lr-n{ flex:none; min-width:19px; padding-top:2px; font-size:13.5px; font-weight:800;
  letter-spacing:.03em; color:var(--cyan-d); font-variant-numeric:tabular-nums; }

/* ---- "how much should you take": traveller tiers + price tiles ----
   Icon-left / text-right tiles. The AMOUNT is the dominant element and the label is a
   small eyebrow above it - S Money runs this module with the price as plain body copy
   under a 20px heading, which wastes the most useful number on the page. */
.m2t-tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:20px; }
.m2t-costgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.m2t-tier,
.m2t-costcard{ display:flex; align-items:flex-start; gap:18px; border:1px solid var(--line);
  border-radius:7px; background:#fff; padding:24px 26px; transition:border-color .2s; }
.m2t-tier:hover,
.m2t-costcard:hover{ border-color:rgba(0,154,218,.45); }
.m2t-tier-ic,
.m2t-cost-ic{ display:grid; place-items:center; width:52px; height:52px; flex:none; border-radius:7px;
  background:rgba(0,154,218,.09); color:var(--cyan-d); }
.m2t-tier-ic svg,
.m2t-cost-ic svg{ width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.m2t-tier-body,
.m2t-cost-body{ min-width:0; }
.m2t-tier-label,
.m2t-cost-label{ display:block; margin-bottom:7px; font-size:13.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); line-height:1.3; }
.m2t-tier-val,
.m2t-cost-val{ display:block; font-size:clamp(21px,2vw,26px); font-weight:800; line-height:1.25;
  letter-spacing:-.015em; color:var(--navy); font-variant-numeric:tabular-nums; }
.m2t-tier-aud,
.m2t-cost-aud{ display:block; margin-top:7px; font-size:15.5px; font-weight:600; color:var(--cyan-d); }
/* "a day" rides small beside the amount so the number never breaks onto a second line */
.m2t-tier-unit{ font-size:15px; font-weight:700; color:var(--muted); letter-spacing:0; }
/* the price tiles keep the narrower measure Sayeed approved, while the tiers above
   them use the full container - they need the width to stay on one line */
.m2t-costs-inner{ margin-top:34px; }
/* an odd number of price tiles centres the last one instead of stranding it left */
.m2t-costcard:last-child:nth-child(2n+1){ grid-column:1 / -1; max-width:calc(50% - 10px); margin:0 auto; }
.m2t-costs-sub{ margin:0 0 20px; text-align:center; font-size:18px; font-weight:700; color:var(--navy); }
.m2t-costs-note{ margin:26px auto 0; max-width:760px; text-align:center; font-size:15px; line-height:1.6; color:var(--muted); }

/* ---- "how far your AUD goes": value cards driven by the live rate ---- */
.m2t-guide{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:7px; overflow:hidden; }
.m2t-guide-cell{ background:#fff; padding:24px 22px 26px; text-align:center; }
.m2t-guide-from{ display:block; font-size:15px; font-weight:700; letter-spacing:.02em; color:var(--muted); }
.m2t-guide-to{ display:block; margin-top:9px; font-size:clamp(26px,2.8vw,34px); font-weight:800;
  line-height:1.15; letter-spacing:-.015em; color:var(--navy); font-variant-numeric:tabular-nums; }
.m2t-guide-code{ display:block; margin-top:6px; font-size:14px; font-weight:700; color:var(--cyan-d); }
.m2t-guide-live{ display:inline-flex; align-items:center; gap:8px; margin:0 auto 26px; padding:8px 15px;
  border-radius:999px; background:rgba(0,154,218,.09); font-size:15.5px; font-weight:700; color:var(--cyan-d); }
.m2t-guide-live::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--cyan);
  animation:m2t-pulse 1.6s infinite; }

/* ---- denominations as visual chips (replaces two spec-table rows) ---- */
.m2t-denoms{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px; }
.m2t-denoms--notes-only{ grid-template-columns:1fr; }   /* currency has no circulating coins */
.m2t-denom-block h4{ margin:0 0 14px; font-size:13px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); }
.m2t-denom-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.m2t-denom-chip{ display:inline-flex; align-items:center; justify-content:center; min-width:52px;
  padding:9px 14px; border:1.5px solid var(--line); border-radius:5px; background:#fff;
  font-size:16.5px; font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums; }
.m2t-denom-chip--coin{ border-radius:999px; min-width:46px; padding:8px 13px; font-size:14px; }

/* ---- intro zigzag: country photography beside the opening story ---- */
.m2t-introzig{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start; }
.m2t-introzig .m2t-cur-head{ text-align:left; max-width:none; margin:0 0 22px; }
.m2t-introzig .m2t-cur-head .m2t-cur-h2::after{ margin-left:0; margin-right:0; }
/* No country photo (Tonga, and any future currency we cannot source imagery for):
   collapse to a single full-width column. Without this the copy sits in a 1.05fr
   column and the .95fr photo column stays empty, leaving a half-blank section.
   Same convention as .m2t-keyinfo--nofig further down. */
.m2t-introzig--nofig{ grid-template-columns:1fr; }
.m2t-introzig--nofig .m2t-introzig-copy{ max-width:var(--narrow, 940px); }
/* the photo tracks the reader down the opening story instead of stranding at the top */
.m2t-introfig{ margin:0; position:sticky; top:96px; border-radius:7px; overflow:hidden; background:#eef3f8; }
.m2t-introfig img{ display:block; width:100%; height:100%; aspect-ratio:4 / 5; object-fit:cover; }
.m2t-introfig figcaption{ position:absolute; left:0; right:0; bottom:0; padding:38px 24px 20px;
  background:linear-gradient(to top, rgba(6,20,42,.88) 0%, rgba(6,20,42,0) 100%);
  font-size:15.5px; font-weight:700; line-height:1.45; color:#fff; }
.m2t-introzig-more{ margin-top:30px; }

@media (max-width:980px){
  /* 2-up: reset the 3-column border + centring rules, then re-derive them for 2 columns */
  .m2t-reasons{ grid-template-columns:repeat(4,1fr); }
  .m2t-reason:nth-child(-n+3){ border-top:1px solid var(--line); }
  .m2t-reason:nth-child(3n+1){ border-left:1px solid var(--line); }
  .m2t-reason:last-child:nth-child(3n+1),
  .m2t-reason:nth-last-child(2):nth-child(3n+1){ grid-column:span 2; border-right:0; }
  .m2t-reason:nth-last-child(2):nth-child(3n+1) ~ .m2t-reason:last-child{ border-right:0; }
  .m2t-reason:nth-child(-n+2){ border-top:0; }
  .m2t-reason:nth-child(2n+1){ border-left:0; }
  .m2t-reason:last-child:nth-child(2n+1){ grid-column:2 / span 2; border-left:1px solid var(--line); border-right:1px solid var(--line); }
  .m2t-guide{ grid-template-columns:repeat(2,1fr); }
  .m2t-introzig{ grid-template-columns:1fr; gap:30px; }
  /* MUST stay 'relative', never 'static': the figcaption is absolutely positioned, so a
     static figure hands it to the nearest positioned ancestor and the caption jumps up
     the page into the hero (seen on mobile, July 2026). */
  .m2t-introfig{ order:-1; position:relative; top:auto; }
  .m2t-introfig img{ aspect-ratio:16 / 10; }
}
@media (max-width:900px){
  .m2t-tiers{ grid-template-columns:1fr; gap:14px; margin-bottom:14px; }
}
@media (max-width:760px){
  .m2t-costgrid{ grid-template-columns:1fr; gap:14px; }
  .m2t-tier,
  .m2t-costcard{ padding:20px; gap:15px; }
  .m2t-tier-ic,
  .m2t-cost-ic{ width:46px; height:46px; }
  .m2t-tier-ic svg,
  .m2t-cost-ic svg{ width:22px; height:22px; }
  .m2t-denoms{ grid-template-columns:1fr; gap:20px; }
}
@media (max-width:560px){
  /* 1-up: every cell is a full-width row, so all the centring rules switch off */
  .m2t-reasons{ grid-template-columns:1fr; }
  .m2t-reason{ grid-column:1 / -1; padding:18px 20px 20px; border-left:0; border-right:0;
    border-top:1px solid var(--line); }
  .m2t-reason:last-child:nth-child(3n+1),
  .m2t-reason:nth-last-child(2):nth-child(3n+1),
  .m2t-reason:last-child:nth-child(2n+1){ grid-column:1 / -1; border-left:0; border-right:0; }
  .m2t-reason:first-child{ border-top:0; }
  .m2t-guide{ grid-template-columns:1fr; }
  .m2t-guide-cell{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; text-align:left; padding:16px 20px; }
  .m2t-guide-to{ margin-top:0; font-size:21px; }
  .m2t-guide-code{ display:none; }
}

/* ===========================================================================
   COLLECTION BAND - Australia Post, the one real collection route (was the Sydney store band; 717 George St is an office and hands over nothing - 10 Sep 2026).
   Travel Money Oz leans on "90+ stores"; a single-store operator wins the other
   way, by making ONE address feel certain - a photo, the street, the hours, and
   a directions link. Navy band so it breaks the light section rhythm.
   ========================================================================= */
.m2t-store{ background:var(--navy); padding:76px 24px; }
.m2t-store-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:56px; align-items:center; }
.m2t-store-grid--nofig{ grid-template-columns:1fr; max-width:760px; }   /* no photo yet -> single column */

.m2t-store-fig{ position:relative; margin:0; border-radius:7px; overflow:hidden; background:#0e2b4f; }
.m2t-store-fig img{ display:block; width:100%; height:100%; aspect-ratio:4 / 3; object-fit:cover; }
.m2t-store-pin{ position:absolute; left:16px; right:16px; bottom:16px; display:flex; align-items:center; gap:13px;
  padding:14px 16px; border-radius:7px; background:rgba(255,255,255,.96); }
.m2t-store-pin-ic{ display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:7px;
  background:rgba(0,154,218,.12); color:var(--cyan-d); }
.m2t-store-pin-ic svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.m2t-store-pin b{ display:block; font-size:16.5px; font-weight:800; color:var(--navy); line-height:1.3; }
.m2t-store-pin span{ display:block; margin-top:3px; font-size:14.5px; color:var(--muted); }

/* No eyebrow label above the heading - the heading leads on its own. The cyan accent
   rule is the SAME brand device every other section heading uses, left-aligned here
   because this is a two-column context (same exception as Key information). */
.m2t-store-h2{ margin:0 0 18px; font-size:clamp(30px,3.6vw,42px); font-weight:800; line-height:1.12;
  letter-spacing:-.02em; color:#fff; }
.m2t-store-h2::after{ content:""; display:block; width:56px; height:3px; border-radius:3px;
  background:var(--cyan); margin:20px 0 0; }
.m2t-store-lede{ margin:0 0 30px; max-width:530px; font-size:18px; line-height:1.7; color:rgba(220,233,247,.85); }

.m2t-store-rows{ display:grid; gap:1px; margin-bottom:32px; background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.13); border-radius:7px; overflow:hidden; }
.m2t-store-row{ display:flex; align-items:flex-start; gap:15px; padding:18px 22px; background:#0b2545; }
.m2t .m2t-store-row a{ color:var(--cyan); font-weight:700; }
.m2t .m2t-store-row a:hover{ text-decoration:underline; }
.m2t-store-row svg{ width:21px; height:21px; flex:none; margin-top:2px; fill:none; stroke:var(--cyan);
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.m2t-store-row b{ display:block; font-size:16px; font-weight:700; color:#fff; }
.m2t-store-row span{ display:block; margin-top:3px; font-size:15.5px; line-height:1.55; color:rgba(220,233,247,.72); }

.m2t-store-actions{ display:flex; flex-wrap:wrap; gap:14px; }
/* .m2t prefix is REQUIRED here - the global `.m2t a{ color:inherit }` reset (0,1,1)
   outranks a single class, so a plain .m2t-store-btn rule loses and the label renders
   in the inherited dark ink instead of white. */
.m2t .m2t-store-btn{ display:inline-flex; align-items:center; gap:9px; padding:15px 26px; border-radius:5px;
  background:var(--cyan); color:#fff; font-size:16px; font-weight:800; transition:background .18s, border-color .18s; }
.m2t .m2t-store-btn:hover{ background:var(--cyan-d); color:#fff; }
.m2t .m2t-store-btn--ghost{ background:transparent; border:1.5px solid #fff; color:#fff; }
.m2t .m2t-store-btn--ghost:hover{ background:#fff; border-color:#fff; color:var(--navy); }
.m2t-store-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

@media (max-width:980px){
  .m2t-store-grid{ grid-template-columns:1fr; gap:34px; }
  .m2t-store-lede{ max-width:none; }
}
@media (max-width:560px){
  .m2t-store{ padding:56px 18px; }
  .m2t-store-actions{ flex-direction:column; align-items:stretch; }
  .m2t-store-btn{ justify-content:center; }
  .m2t-store-pin{ left:12px; right:12px; bottom:12px; padding:12px 14px; gap:11px; }
}

/* ---- COMPACT COLLECTION BAND (currency pages - Sayeed, 11 Sep 2026) ----
   It was one 760px column - heading, a five-line paragraph, four hairline rows, two
   buttons - with the right half of the navy band empty on desktop (949px tall at 1440,
   1279px on a phone). Now: heading + one-line lede with the buttons beside them, then
   the three facts people need - where, when, what to bring - as value tiles across the
   full wrap. Navy, heading and buttons still come from .m2t-store above, which the office
   blocks on /about-us/, /sydney/ and the Locations hub keep using unchanged. */
.m2t-collect{ padding:64px 24px; }
/* The heading has a row of its own so it never breaks early beside the buttons (at 1024px
   "Collecting your Japanese Yen" dropped "Yen" onto a line alone); the lede and buttons share
   the row under it. .m2t-collect-copy is only a wrapper in the markup - display:contents
   hands its heading and lede to this grid as items. */
.m2t-collect-grid{ display:grid; grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"head head" "lede actions" "facts facts"; align-items:end; column-gap:48px; }
.m2t-collect-copy{ display:contents; }
.m2t-collect .m2t-store-h2{ grid-area:head; }
.m2t-collect-lede{ grid-area:lede; max-width:700px; margin:0; font-size:18px; line-height:1.65; color:rgba(220,233,247,.85); }
.m2t-collect .m2t-store-actions{ grid-area:actions; }
.m2t-collect-facts{ grid-area:facts; margin-top:32px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.m2t-collect-fact{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:24px 26px;
  border-radius:7px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); }
.m2t-collect-ic{ display:grid; place-items:center; width:46px; height:46px; flex:none; border-radius:7px;
  background:rgba(0,154,218,.16); color:var(--cyan); }
.m2t-collect-ic svg{ width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.m2t-collect-body{ display:block; min-width:0; }
/* the small caps line names the VALUE under it - 4.9b's allowed case, like .m2t-tier-label */
.m2t-collect-label{ display:block; font-size:13.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  line-height:1.3; color:rgba(220,233,247,.66); }
.m2t-collect-val{ display:block; margin-top:6px; font-size:clamp(22px,2vw,26px); font-weight:800; line-height:1.2;
  letter-spacing:-.015em; color:var(--cyan); }
.m2t-collect-text{ display:block; margin-top:8px; font-size:16.5px; line-height:1.55; color:rgba(220,233,247,.75); }

@media (max-width:980px){
  .m2t-collect{ padding:56px 24px; }
  .m2t-collect-grid{ grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "lede" "facts" "actions"; }
  .m2t-collect-facts{ margin-top:26px; grid-template-columns:minmax(0,1fr); gap:12px; }
  .m2t-collect .m2t-store-actions{ margin-top:26px; }
  .m2t-collect-fact{ flex-direction:row; padding:20px 22px; }
}
@media (max-width:560px){
  .m2t-collect{ padding:48px 18px; }
  .m2t-collect-fact{ gap:14px; padding:18px; }
  .m2t-collect-ic{ width:42px; height:42px; }
  .m2t-collect-ic svg{ width:21px; height:21px; }
}

/* ---- travel essentials tile grid ---- */
.m2t-ess-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.m2t-ess{ display:flex; flex-direction:column; gap:6px; border:1px solid var(--line); border-radius:7px; background:#fff; padding:18px 20px; transition:border-color .2s; }
.m2t-ess:hover{ border-color:rgba(0,154,218,.45); }
.m2t-ess-label{ font-size:13px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--muted); }
.m2t-ess-value{ font-size:17px; font-weight:700; color:var(--navy); line-height:1.35; }
@media (max-width:900px){ .m2t-ess-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:400px){ .m2t-ess-grid{ grid-template-columns:1fr; } }

/* ===========================================================================
   ABOUT PAGE  -  template-about.php  (/about-us/)
   Three blocks only: the hero credentials card, the "in short" fact panel and
   the principles grid. Everything else on that page reuses existing components.
   =========================================================================== */

/* ---- hero credentials card: sits where the converter sits on other templates ----
   Frosted, matching .m2t-stat on the navy band rather than the white converter -
   this is a credential plate, not a form, and it should not read as one. */
.m2t-cred{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:7px; padding:24px 26px 22px;
  backdrop-filter:blur(10px) saturate(160%); -webkit-backdrop-filter:blur(10px) saturate(160%); }
@supports not (backdrop-filter:blur(2px)){ .m2t-cred{ background:rgba(10,32,58,.75); } }
.m2t-cred-head{ display:flex; align-items:center; gap:11px; padding-bottom:16px; margin-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.14);
  font-size:15.5px; font-weight:700; line-height:1.35; color:#fff; }
.m2t-cred-head svg{ width:22px; height:22px; flex:none; fill:none; stroke:var(--cyan);
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.m2t-cred-list{ margin:0; }
.m2t-cred-row{ display:grid; grid-template-columns:118px 1fr; gap:16px; padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.08); }
.m2t-cred-row:last-child{ border-bottom:0; padding-bottom:4px; }
.m2t-cred-row dt{ font-size:14px; font-weight:600; line-height:1.45; color:rgba(214,230,247,.7); }
.m2t-cred-row dd{ margin:0; font-size:15.5px; font-weight:700; line-height:1.45; color:#fff; }
/* the .m2t prefix is REQUIRED here - the global `.m2t a{ color:inherit }` reset (0,1,1)
   outranks a single class (0,1,0), which is what turned the store button white-on-white */
.m2t .m2t-cred-link{ display:inline-flex; align-items:center; gap:9px; margin-top:18px;
  font-size:15px; font-weight:700; line-height:1.4; color:var(--cyan); }
.m2t .m2t-cred-link:hover{ color:#fff; }
.m2t-cred-link svg{ width:17px; height:17px; flex:none; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.m2t-cred-link:hover svg{ transform:translateX(3px); }

/* ---- "in short" fact panel: stands in for the country photo used on currency pages.
   We have no team or store photography yet, and generic stock on a trust page reads
   as exactly what it is. Swap for a real photo only when the client supplies one. ---- */
.m2t-factpanel{ position:sticky; top:96px; background:#f4f8fc; border:1px solid var(--line);
  border-radius:7px; padding:26px 28px 28px; }
.m2t-factpanel-h{ margin:0 0 16px; padding-bottom:15px; border-bottom:1px solid var(--line);
  font-size:19px; font-weight:800; line-height:1.3; color:var(--navy); letter-spacing:-.01em; }
.m2t-factlist{ list-style:none; margin:0; padding:0; }
.m2t-factlist li{ padding:14px 0; border-bottom:1px solid var(--line); }
.m2t-factlist li:last-child{ border-bottom:0; padding-bottom:0; }
.m2t-factlist b{ display:block; margin-bottom:5px; font-size:15px; font-weight:700; color:var(--cyan-d); }
.m2t-factlist span{ display:block; font-size:17px; line-height:1.55; color:var(--ink); }

/* ---- principles: 2x2 hairline grid, flat cyan icon tiles (no gradients) ---- */
.m2t-principles{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:7px; overflow:hidden; }
.m2t-principle{ background:#fff; padding:30px 32px 32px; }
.m2t-principle-ic{ display:grid; place-items:center; width:48px; height:48px; margin-bottom:18px;
  border-radius:7px; background:rgba(0,154,218,.09); }
.m2t-principle-ic svg{ width:24px; height:24px; fill:none; stroke:var(--cyan-d);
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.m2t-principle h3{ margin:0 0 11px; font-size:20px; font-weight:800; line-height:1.3;
  color:var(--navy); letter-spacing:-.01em; }
.m2t-principle p{ margin:0; font-size:17px; line-height:1.65; color:var(--muted); }

@media (max-width:980px){
  .m2t-factpanel{ position:static; top:auto; }
  .m2t-cred-row{ grid-template-columns:110px 1fr; gap:14px; }
}
@media (max-width:760px){
  .m2t-principles{ grid-template-columns:1fr; }
  .m2t-principle{ padding:26px 24px 28px; }
}
@media (max-width:560px){
  .m2t-cred{ padding:20px 20px 18px; }
  .m2t-cred-row{ grid-template-columns:1fr; gap:3px; padding:11px 0; }
  .m2t-factpanel{ padding:22px 22px 24px; }
}

/* ---- city pages: Australia Post collection-area tiles ----
   They sit inside a zig column (half width), so the 4-up essentials grid drops to 2-up
   here. Values are suburb lists, so they get body colour rather than the navy headline. */
.m2t-ess-grid--areas{ grid-template-columns:repeat(2,1fr); gap:12px; }
.m2t-ess-grid--areas .m2t-ess-value{ font-size:15.5px; font-weight:600; line-height:1.45; color:var(--ink); }
@media (max-width:480px){ .m2t-ess-grid--areas{ grid-template-columns:1fr; } }

/* ---- Locations hub (14 Aug 2026): the city cards can carry a link to that city's page ---- */
.m2t-city .m2t-rates-link{ margin-top:12px; font-size:14px; }

/* ============================================================================
   /exchange-rates/ - the informational rate-lookup page (template-exchange-rates.php)
   Added 9 Sep 2026. Scope + intent split: research/EXCHANGE-RATES-PAGE-PLAN-2026-09.md.
   Flat design, no box-shadow, radius 3-7px only (CONSIDERATIONS 4).
   ========================================================================== */

/* screen-reader-only utility (first use on the site: table caption + sort labels) */
.m2t-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; }

/* The hero now reuses the shared .m2t-cur-hero + .m2t-converter block, so this page
   matches the other seven templates. No page-specific hero CSS. */
.m2t-xr-sec{ padding:44px 0 64px; }

/* ---- control bar above the table ---- */
.m2t-xr-bar{ display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; margin:0 0 16px; }
.m2t-xr-stamp{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--muted); }
.m2t-xr-stamp strong{ color:var(--navy); font-weight:700; }
.m2t-xr-dot{ width:8px; height:8px; border-radius:50%; background:var(--cyan); flex:none; }

.m2t-xr-search{ position:relative; display:flex; align-items:center; }
.m2t-xr-search svg{ position:absolute; left:13px; width:17px; height:17px; fill:none;
  stroke:var(--muted); stroke-width:2; stroke-linecap:round; pointer-events:none; }
.m2t-xr-search input{ font:inherit; font-size:15px; color:var(--ink); width:280px; max-width:100%;
  padding:11px 14px 11px 38px; background:#fff; border:1.5px solid var(--line); border-radius:6px;
  outline:none; transition:border-color .15s ease; }
.m2t-xr-search input:focus{ border-color:var(--cyan); }

/* ---- the table ---- */
.m2t-xr-tablewrap{ overflow-x:auto; border:1px solid var(--line); border-radius:7px; background:#fff; }
.m2t-xr-table{ width:100%; border-collapse:collapse; }
/* border:0 first. On the live site the parent theme's style.css sets `table td, table th{
   border:1px solid #eaeaea }` (never loaded in the previews): it drew vertical column lines
   here and boxed every cell on phones (8 Oct 2026). Only the row line is ours. */
.m2t-xr-table th,.m2t-xr-table td{ text-align:left; padding:14px 20px; font-size:15.5px;
  border:0; border-bottom:1px solid var(--line); }
/* Headers are plain labels, not controls. Sorting was removed 9 Sep 2026 (Sayeed):
   the arrow read as clickable, sorting rates across currencies of different magnitudes
   is meaningless, and sorting by name destroys the deliberate popular-first order. */
.m2t-xr-table thead th{ position:sticky; top:0; z-index:1; padding:13px 20px; background:#f8fbfe;
  font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; }
.m2t-xr-table tbody tr:last-child td{ border-bottom:0; }
.m2t-xr-table tbody tr:hover{ background:#f8fbfe; }

/* These must out-specify `.m2t-xr-table th,.m2t-xr-table td{text-align:left}` above
   (0,1,1). A bare `.m2t-xr-r` (0,1,0) loses, which is why the rate values sat left of
   their right-aligned header. Widths stop Currency swallowing the whole table. */
.m2t-xr-table th.m2t-xr-c,   .m2t-xr-table td.m2t-xr-c   { width:96px;  text-align:left; }
.m2t-xr-table th.m2t-xr-rate,.m2t-xr-table td.m2t-xr-rate{ width:190px; text-align:right; }
.m2t-xr-table th.m2t-xr-act, .m2t-xr-table td.m2t-xr-act { width:128px; text-align:right; }

/* The CELL must stay a table-cell. Flexing the <td> itself pulled it out of the table
   layout, which is what made the row rules look broken just before the Code column.
   Flex the inner wrapper instead. */
.m2t-xr-curin{ display:flex; align-items:center; gap:11px; }
.m2t-xr-flag{ width:32px; height:22px; border-radius:3px; object-fit:cover; flex:none;
  border:1px solid var(--line); }
.m2t-xr-curin a{ font-weight:600; color:var(--navy); text-decoration:none; }
.m2t-xr-curin a:hover{ color:var(--cyan-d); text-decoration:underline; }
.m2t-xr-pop{ font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:700;
  color:var(--cyan-d); background:#eaf7fd; border-radius:3px; padding:3px 7px; }

.m2t-xr-code{ font-size:13px; font-weight:700; color:var(--muted); letter-spacing:.03em; }
.m2t-xr-val{ font-size:17px; font-weight:700; color:var(--cyan-d); white-space:nowrap;
  font-variant-numeric:tabular-nums; }

.m2t-xr-go{ display:inline-flex; align-items:center; gap:5px; font-size:13.5px; font-weight:600;
  color:var(--muted); text-decoration:none; white-space:nowrap; transition:color .15s ease; }
.m2t-xr-go svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; }
.m2t-xr-go:hover{ color:var(--cyan-d); }

.m2t-xr-empty{ margin:0; padding:26px 20px; text-align:center; font-size:15px; color:var(--muted); }
.m2t-xr-note{ margin:14px 0 0; font-size:13.5px; line-height:1.6; color:var(--muted); max-width:88ch; }

/* ---- "check all currencies" link under the card grid ---- */
.m2t-xr-all{ text-align:center; margin-top:30px; }
.m2t-xr-allbtn{ display:inline-flex; align-items:center; gap:9px; padding:14px 26px;
  border:1.5px solid var(--line); border-radius:6px; background:#fff; font-size:15.5px;
  font-weight:700; color:var(--navy); text-decoration:none;
  transition:border-color .15s ease, color .15s ease; }
.m2t-xr-allbtn:hover{ border-color:var(--cyan); color:var(--cyan-d); }
.m2t-xr-allbtn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; }

/* ---- the three explainer tiles under the prose ---- */
.m2t-xr-notes{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:30px; }
.m2t-xr-note-tile{ border:1px solid var(--line); border-radius:7px; padding:22px; background:#fff; }
.m2t-xr-note-ico{ display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:6px; background:#eaf7fd; margin-bottom:13px; }
.m2t-xr-note-ico svg{ width:20px; height:20px; fill:none; stroke:var(--cyan-d); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; }
.m2t-xr-note-tile h3{ margin:0 0 6px; font-size:15.5px; font-weight:700; color:var(--navy); }
.m2t-xr-note-tile p{ margin:0; font-size:14px; line-height:1.6; color:var(--muted); }

/* ---- responsive ---- */
@media (max-width:860px){
  .m2t-xr-notes{ grid-template-columns:1fr; }
  .m2t-xr-bar{ flex-direction:column; align-items:stretch; }
  .m2t-xr-search input{ width:100%; }
}

/* Below 640px the table becomes stacked cards. A squashed 4-column table is unreadable
   on a phone, and this page's whole job is being readable at a glance. */
@media (max-width:640px){
  .m2t-xr-tablewrap{ border:0; border-radius:0; background:none; overflow:visible; }
  .m2t-xr-table thead{ display:none; }
  .m2t-xr-table,.m2t-xr-table tbody,.m2t-xr-table tr,.m2t-xr-table td{ display:block; width:auto; }
  /* The desktop column widths above are (0,2,1) and beat that width:auto (0,1,1), which left
     the code and Details cells as 96px and 128px boxes. Same specificity, later: auto wins. */
  .m2t-xr-table td.m2t-xr-c,.m2t-xr-table td.m2t-xr-rate,.m2t-xr-table td.m2t-xr-act{ width:auto; }
  .m2t-xr-table tr{ position:relative; border:1px solid var(--line); border-radius:7px;
    background:#fff; padding:14px 16px; margin-bottom:10px; }
  .m2t-xr-table tr:hover{ background:#fff; }
  .m2t-xr-table td{ padding:0; border:0; }
  .m2t-xr-curin{ padding-right:96px; }
  .m2t-xr-table td.m2t-xr-c{ padding:6px 0 0 43px; }
  .m2t-xr-table td.m2t-xr-r{ text-align:left; }
  .m2t-xr-val{ position:absolute; top:14px; right:16px; font-size:19px; }
  .m2t-xr-go{ margin-top:10px; padding-left:43px; }
}

/* ============================================================================
   /contact/ - the NAP anchor (template-contact.php). Added 9 Sep 2026.
   Reuses .m2t-cred from the About hero for the details card; only the map link,
   the two-column body and the Contact Form 7 skin are new.
   ========================================================================== */

/* hero side: ONE primary action, not a details list */
.m2t-cmail{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:7px; padding:30px; text-align:center; }
.m2t-cmail-ico{ display:grid; place-items:center; width:52px; height:52px; margin:0 auto 16px;
  border-radius:7px; background:rgba(0,154,218,.16); }
.m2t-cmail-ico svg{ width:24px; height:24px; fill:none; stroke:var(--cyan); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; }
.m2t-cmail-lab{ display:block; font-size:13px; text-transform:uppercase; letter-spacing:.06em;
  font-weight:700; color:rgba(214,230,247,.7); margin-bottom:8px; }
.m2t-cmail-addr{ display:block; font-size:19px; font-weight:800; color:#fff; text-decoration:none;
  word-break:break-word; }
.m2t-cmail-addr:hover{ color:var(--cyan); }
.m2t-cmail-note{ margin:12px 0 22px; font-size:14px; line-height:1.6; color:rgba(214,230,247,.7); }
.m2t-cmail-btn{ display:inline-block; padding:13px 30px; border-radius:6px; background:var(--cyan);
  color:#fff; font-size:15.5px; font-weight:700; text-decoration:none; transition:background .15s ease; }
.m2t-cmail-btn:hover{ background:var(--cyan-d); }

/* the three contact-method tiles */
.m2t-cmethods{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.m2t-cmethod{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:7px;
  background:#fff; padding:28px 26px; }
.m2t-cmethod-ico{ display:grid; place-items:center; width:46px; height:46px; margin-bottom:16px;
  border-radius:7px; background:#eaf7fd; }
.m2t-cmethod-ico svg{ width:22px; height:22px; fill:none; stroke:var(--cyan-d); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; }
.m2t-cmethod-h{ margin:0 0 8px; font-size:18px; font-weight:800; letter-spacing:-.01em; color:var(--navy); }
.m2t-cmethod p{ margin:0 0 16px; font-size:14.5px; line-height:1.65; color:var(--muted); }
.m2t-cmethod-link{ margin-top:auto; font-size:15px; font-weight:700; color:var(--cyan-d);
  text-decoration:none; word-break:break-word; }
.m2t-cmethod-link:hover{ text-decoration:underline; text-underline-offset:3px; }

/* the form, centred and given the whole column */
.m2t-cform{ max-width:760px; margin:0 auto; border:1px solid var(--line); border-radius:7px;
  background:#fff; padding:32px; }
.m2t-cform p{ margin:0 0 16px; }
/* CF7's output on this site is wrapped in Bootstrap grid classes that come from the
   envy-banking plugin's stylesheet. Do NOT depend on a plugin for our layout: reproduce
   the two bits this form needs, scoped to .m2t-cform, so the fields sit two-up whether
   or not Bootstrap happens to load. */
.m2t-cform .row{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.m2t-cform .col-lg-12,.m2t-cform .row > p{ grid-column:1 / -1; }
.m2t-cform .form-group{ margin:0; }
.m2t-cform .wpcf7-list-item-label{ font-size:14px; color:var(--muted); }
.m2t-cform .wpcf7-list-item-label a{ color:var(--cyan-d); }
@media (max-width:560px){ .m2t-cform .row{ grid-template-columns:1fr; } }
.m2t-cform label{ display:block; font-size:14px; font-weight:600; color:var(--navy); margin-bottom:6px; }
.m2t-cform input[type=text],.m2t-cform input[type=email],.m2t-cform input[type=tel],
.m2t-cform input[type=number],.m2t-cform textarea,.m2t-cform select{
  width:100%; font:inherit; font-size:15px; color:var(--ink); background:#fff;
  padding:12px 14px; border:1.5px solid var(--line); border-radius:6px; outline:none;
  transition:border-color .15s ease; }
.m2t-cform input:focus,.m2t-cform textarea:focus,.m2t-cform select:focus{ border-color:var(--cyan); }
.m2t-cform textarea{ min-height:160px; resize:vertical; }
.m2t-cform input[type=submit],.m2t-cform button[type=submit]{
  width:auto; font:inherit; font-size:15.5px; font-weight:700; color:#fff; cursor:pointer;
  background:var(--cyan); border:0; border-radius:6px; padding:14px 32px;
  transition:background .15s ease; }
.m2t-cform input[type=submit]:hover,.m2t-cform button[type=submit]:hover{ background:var(--cyan-d); }
.m2t-cform input[type=checkbox]{ width:auto; margin-right:8px; }
.m2t-cform .wpcf7-list-item{ margin:0; }
.m2t-cform .wpcf7-not-valid-tip{ font-size:13px; color:#c0392b; margin-top:5px; }
.m2t-cform .wpcf7-response-output{ margin:18px 0 0; padding:12px 14px; border-radius:6px;
  border:1.5px solid var(--line); font-size:14.5px; }
.m2t-cform-fallback p{ font-size:16px; line-height:1.65; color:var(--ink); }

/* the two profile rows inside the Follow tile */
.m2t-csocial{ margin-top:auto; display:grid; gap:8px; }
.m2t-csocial-link{ display:flex; align-items:center; gap:11px; padding:9px 11px;
  border:1px solid var(--line); border-radius:6px; text-decoration:none;
  transition:border-color .15s ease, background .15s ease; }
.m2t-csocial-link:hover{ border-color:var(--cyan); background:#f8fbfe; }
.m2t-csocial-ico{ display:grid; place-items:center; width:26px; height:26px; flex:none;
  color:var(--navy); }
.m2t-csocial-ico svg{ width:19px; height:19px; stroke-linecap:round; stroke-linejoin:round; }
.m2t-csocial-link:hover .m2t-csocial-ico{ color:var(--cyan-d); }
.m2t-csocial-txt{ display:flex; flex-direction:column; min-width:0; }
.m2t-csocial-txt b{ font-size:14px; font-weight:700; color:var(--navy); }
.m2t-csocial-txt span{ font-size:12.5px; color:var(--muted); }

@media (max-width:1100px){
  .m2t-cmethods{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .m2t-cmethods{ grid-template-columns:1fr; gap:14px; }
  .m2t-cmethod{ padding:22px; }
}
@media (max-width:560px){
  .m2t-cform{ padding:20px; }
  .m2t-cmail{ padding:24px; }
}

/* ============================================================================
   /partnerships/ - template-partnerships.php. Added 9 Sep 2026.
   The client's copy is four paragraphs, so the work here is structure and rhythm
   rather than volume. Nothing below implies a figure the client has not given us.
   ========================================================================== */

/* hero side: the three collaboration types, in the client's own words */
.m2t-pways{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:7px; padding:28px; }
.m2t-pways-lab{ display:block; font-size:13px; text-transform:uppercase; letter-spacing:.06em;
  font-weight:700; color:rgba(214,230,247,.7); margin-bottom:16px; }
.m2t-pways-list{ list-style:none; margin:0 0 24px; padding:0; }
.m2t-pways-list li{ display:flex; align-items:center; gap:12px; padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.1); font-size:16.5px; font-weight:600; color:#fff; }
.m2t-pways-list li:last-child{ border-bottom:0; }
.m2t-pways-list svg{ width:19px; height:19px; flex:none; fill:none; stroke:var(--cyan);
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.m2t-pways-btn{ display:block; text-align:center; padding:13px 24px; border-radius:6px;
  background:var(--cyan); color:#fff; font-size:15.5px; font-weight:700; text-decoration:none;
  transition:background .15s ease; }
.m2t-pways-btn:hover{ background:var(--cyan-d); }

/* the two "why partner" cards */
.m2t-pgrid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.m2t-pcard{ border:1px solid var(--line); border-radius:7px; background:#fff; padding:32px; }
.m2t-pcard-ico{ display:grid; place-items:center; width:50px; height:50px; margin-bottom:18px;
  border-radius:7px; background:#eaf7fd; }
.m2t-pcard-ico svg{ width:24px; height:24px; fill:none; stroke:var(--cyan-d); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; }
.m2t-pcard-h{ margin:0 0 10px; font-size:20px; font-weight:800; letter-spacing:-.01em;
  color:var(--navy); line-height:1.25; }
.m2t-pcard p{ margin:0; font-size:16px; line-height:1.7; color:var(--ink); }

@media (max-width:860px){
  .m2t-pgrid{ grid-template-columns:1fr; gap:16px; }
  .m2t-pcard{ padding:24px; }
}


/* ===========================================================================
   LEGAL PAGES - /privacy-policy/ (and /terms/ when the client supplies the text)
   Client legal copy in our shell. Scannable via a sticky contents list, readable
   at a 68ch measure. Radius stays 3-7px and there are no shadows, per section 4.
   =========================================================================== */
.m2t-hero--legal .m2t-hero-inner{ padding-bottom:56px; }
.m2t-legal-chips{ display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 0; padding:0; list-style:none; }
.m2t-legal-chips li{ padding:7px 14px; border:1px solid rgba(255,255,255,.24); border-radius:5px;
                     font-size:13.5px; font-weight:600; color:rgba(220,233,247,.9); }

.m2t-legal{ padding:76px 24px 84px; background:#fff; }
.m2t-legal-grid{ display:grid; grid-template-columns:262px 1fr; gap:56px; align-items:start; }
/* The Terms holding page (template-terms.php, logged-out view) has no contents rail, so its body is
   the grid's only child and fell into the 262px rail column on desktop. Span both (8 Oct 2026). */
.m2t-legal-grid > .m2t-legal-body:only-child{ grid-column:1 / -1; }

.m2t-legal-toc{ position:sticky; top:104px; }
.m2t-legal-toc-h{ margin:0 0 14px; font-size:13px; font-weight:800; letter-spacing:.08em;
                  text-transform:uppercase; color:var(--muted); }
.m2t-legal-toc ol{ margin:0; padding:0; list-style:none; border-left:2px solid #e6edf5; }
.m2t-legal-toc li{ margin:0; }
.m2t-legal-toc a{ display:flex; gap:8px; padding:8px 0 8px 16px; margin-left:-2px;
                  border-left:2px solid transparent; font-size:14.5px; line-height:1.45;
                  color:#4a5b73; text-decoration:none; transition:color .15s, border-color .15s; }
.m2t-legal-toc a span{ flex:none; font-weight:700; color:var(--cyan-d); }
.m2t-legal-toc a:hover{ color:var(--navy); border-left-color:var(--cyan); }

.m2t-legal-body{ max-width:68ch; }
.m2t-legal-sec{ scroll-margin-top:104px; }
.m2t-legal-sec + .m2t-legal-sec{ margin-top:44px; padding-top:44px; border-top:1px solid #eef2f7; }
.m2t-legal-h2{ display:flex; align-items:baseline; gap:12px; margin:0 0 16px;
               font-size:clamp(21px,2.2vw,25px); font-weight:800; line-height:1.25; color:var(--navy); }
.m2t-legal-num{ display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:6px;
                background:var(--navy); color:#fff; font-size:14px; font-weight:800; }
.m2t-legal-body p{ margin:0 0 16px; font-size:16.5px; line-height:1.78; color:#3d4d63; }
.m2t-legal-body p:last-child{ margin-bottom:0; }
/* Inline links in legal copy. The global `.m2t a{ color:inherit }` reset made the Terms holding
   page's links to FAQ, How it works and Privacy read as plain text. Same look as .m2t-legal-foot a. */
.m2t .m2t-legal-body p a{ color:var(--cyan-d); font-weight:700; }
.m2t .m2t-legal-body p a:hover{ text-decoration:underline; }
.m2t-legal-list{ margin:0 0 16px; padding:0; list-style:none; }
.m2t-legal-list li{ position:relative; padding:0 0 0 26px; margin-bottom:9px;
                    font-size:16.5px; line-height:1.7; color:#3d4d63; }
.m2t-legal-list li::before{ content:""; position:absolute; left:6px; top:11px; width:7px; height:7px;
                            border-radius:50%; background:var(--cyan); }

.m2t-legal-officer{ display:flex; flex-direction:column; gap:3px; margin:0 0 16px; padding:20px 22px;
                    border:1px solid #dfe8f2; border-left:3px solid var(--cyan); border-radius:6px;
                    background:#f7fafd; }
.m2t-legal-officer-role{ font-size:16px; font-weight:800; color:var(--navy); }
.m2t-legal-officer-org{ font-size:15.5px; color:#4a5b73; }
.m2t-legal-officer-mail{ margin-top:5px; font-size:15.5px; font-weight:700; color:var(--cyan-d); }
.m2t-legal-officer-mail:hover{ text-decoration:underline; }

.m2t-legal-foot{ margin-top:44px; padding-top:26px; border-top:1px solid #eef2f7;
                 font-size:15px; color:var(--muted); }
.m2t .m2t-legal-foot a{ color:var(--cyan-d); font-weight:700; }
.m2t .m2t-legal-foot a:hover{ text-decoration:underline; }

@media (max-width:960px){
  .m2t-legal{ padding:56px 22px 64px; }
  .m2t-legal-grid{ grid-template-columns:1fr; gap:34px; }
  /* The list stops being a sidebar and becomes a summary box at the top. */
  .m2t-legal-toc{ position:static; padding:20px 22px; border:1px solid #e6edf5; border-radius:7px;
                  background:#f7fafd; }
  .m2t-legal-toc ol{ border-left:0; columns:2; column-gap:26px; }
  .m2t-legal-toc a{ padding:6px 0; border-left:0; }
  .m2t-legal-body{ max-width:none; }
}
@media (max-width:560px){
  .m2t-legal-toc ol{ columns:1; }
}


/* ===========================================================================
   /faq/ - the FAQ hub. Groups of accordion rows plus a "still stuck" block.
   The rows themselves reuse .m2t-faq-item / .m2t-faq-q / .m2t-faq-a from the
   shared FAQ block, so an accordion looks identical wherever it appears.
   =========================================================================== */
.m2t-faqhub{ padding:76px 24px 40px; background:#fff; }
.m2t-faqhub-group + .m2t-faqhub-group{ margin-top:52px; padding-top:52px; border-top:1px solid #eef2f7; }
.m2t-faqhub-head{ margin-bottom:22px; }
.m2t-faqhub-h2{ margin:0; font-size:clamp(23px,2.5vw,29px); font-weight:800; color:var(--navy); line-height:1.2; }
.m2t-faqhub-h2::after{ content:""; display:block; width:48px; height:3px; border-radius:3px;
                       background:var(--cyan); margin-top:13px; }
.m2t-faqhub-sub{ margin:13px 0 0; max-width:62ch; font-size:16px; line-height:1.7; color:var(--muted); }

/* ---- still stuck ---- */
.m2t-faqhub-help{ padding:40px 24px 84px; background:#fff; }
.m2t-faqhub-helpgrid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:start;
                      padding:38px 40px; border:1px solid #dfe8f2; border-radius:7px; background:#f7fafd; }
.m2t-faqhub-helpcopy h2{ margin:0 0 12px; font-size:clamp(21px,2.2vw,26px); font-weight:800; color:var(--navy); }
.m2t-faqhub-helpcopy p{ margin:0 0 18px; font-size:16px; line-height:1.7; color:#3d4d63; }
.m2t-faqhub-mail{ font-size:16.5px; font-weight:700; color:var(--cyan-d); }
.m2t-faqhub-mail:hover{ text-decoration:underline; }

.m2t-faqhub-links{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.m2t .m2t-faqhub-links a{ display:block; padding:17px 19px; border:1px solid #dfe8f2; border-radius:6px;
                          background:#fff; text-decoration:none; transition:border-color .15s, transform .15s; }
.m2t .m2t-faqhub-links a:hover{ border-color:var(--cyan); transform:translateY(-2px); }
.m2t-faqhub-links span{ display:block; font-size:16px; font-weight:700; color:var(--navy); }
.m2t-faqhub-links small{ display:block; margin-top:5px; font-size:14px; line-height:1.55; color:var(--muted); }

@media (max-width:960px){
  .m2t-faqhub{ padding:56px 22px 30px; }
  .m2t-faqhub-help{ padding:30px 22px 64px; }
  .m2t-faqhub-helpgrid{ grid-template-columns:1fr; gap:30px; padding:30px 26px; }
}
@media (max-width:560px){
  .m2t-faqhub-links{ grid-template-columns:1fr; }
}


/* ===========================================================================
   BLOG - the hub (template-blog.php) and one article (single.php)
   Lead story + grid, then a 68ch reading column. Radius 3-7px, no shadows.
   =========================================================================== */
.m2t-blog{ padding:74px 24px 84px; background:#fff; }

/* ---- category chips ---- */
.m2t-blog-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-bottom:38px;
                   padding-bottom:28px; border-bottom:1px solid #eef2f7; }
.m2t-blog-filters-label{ margin-right:5px; font-size:13px; font-weight:800; letter-spacing:.08em;
                         text-transform:uppercase; color:var(--muted); }
.m2t .m2t-blog-filters a{ display:inline-flex; align-items:center; gap:7px; padding:7px 14px;
                          border:1px solid #dfe8f2; border-radius:999px; background:#fff;
                          font-size:14.5px; font-weight:600; color:#3d4d63; text-decoration:none;
                          transition:border-color .15s, color .15s; }
.m2t .m2t-blog-filters a:hover{ border-color:var(--cyan); color:var(--navy); }
.m2t-blog-filters a small{ font-size:12px; font-weight:700; color:var(--cyan-d); }

/* ---- lead story ---- */
.m2t-blog-lead{ display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:center;
                margin-bottom:56px; padding-bottom:56px; border-bottom:1px solid #eef2f7; }
.m2t-blog-lead-fig{ display:block; border-radius:7px; overflow:hidden; background:#eef3f9; }
.m2t-blog-lead-fig img{ display:block; width:100%; height:100%; aspect-ratio:16/10; object-fit:cover;
                        transition:transform .4s cubic-bezier(.4,0,.2,1); }
.m2t-blog-lead-fig:hover img{ transform:scale(1.03); }
.m2t-blog-badge{ display:inline-block; margin-bottom:15px; padding:5px 12px; border-radius:5px;
                 background:var(--navy); color:#fff; font-size:12px; font-weight:800;
                 letter-spacing:.08em; text-transform:uppercase; }
.m2t-blog-lead-h{ margin:0 0 15px; font-size:clamp(26px,3.2vw,38px); font-weight:800; line-height:1.18; }
.m2t .m2t-blog-lead-h a{ color:var(--navy); text-decoration:none; }
.m2t .m2t-blog-lead-h a:hover{ color:var(--cyan-d); }
.m2t-blog-lead-x{ margin:0 0 16px; font-size:17px; line-height:1.72; color:#3d4d63; }

/* ---- grid ---- */
.m2t-blog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:38px 34px; }
.m2t-blog-card{ display:flex; flex-direction:column; }
.m2t-blog-card-fig{ display:block; margin-bottom:17px; border-radius:7px; overflow:hidden; background:#eef3f9; }
.m2t-blog-card-fig img{ display:block; width:100%; height:100%; aspect-ratio:16/10; object-fit:cover;
                        transition:transform .4s cubic-bezier(.4,0,.2,1); }
.m2t-blog-card-fig:hover img{ transform:scale(1.03); }
.m2t-blog-noimg{ display:block; width:100%; aspect-ratio:16/10;
                 background:linear-gradient(135deg,#e8eff7,#dbe6f2); }
.m2t-blog-card-h{ margin:0 0 10px; font-size:20px; font-weight:800; line-height:1.32; }
.m2t .m2t-blog-card-h a{ color:var(--navy); text-decoration:none; }
.m2t .m2t-blog-card-h a:hover{ color:var(--cyan-d); }
.m2t-blog-card-x{ margin:0 0 12px; font-size:15.5px; line-height:1.68; color:#3d4d63; }

.m2t-blog-meta{ display:flex; align-items:center; gap:9px; margin:0; font-size:13.5px; color:var(--muted); }
.m2t-blog-more{ display:inline-flex; align-items:center; gap:9px; margin-top:20px;
                font-size:16px; font-weight:700; color:var(--cyan-d); }
.m2t-blog-more svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2;
                    stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.m2t-blog-more:hover svg{ transform:translateX(4px); }
.m2t-blog-empty{ font-size:17px; line-height:1.7; color:#3d4d63; }
.m2t .m2t-blog-empty a{ color:var(--cyan-d); font-weight:700; }

/* ---- pager ---- */
.m2t-blog-pager{ margin-top:52px; padding-top:32px; border-top:1px solid #eef2f7; }
.m2t-blog-pager ul{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.m2t-blog-pager a, .m2t-blog-pager span{ display:grid; place-items:center; min-width:42px; height:42px;
                                          padding:0 14px; border:1px solid #dfe8f2; border-radius:6px;
                                          font-size:15px; font-weight:700; color:#3d4d63; text-decoration:none; }
.m2t .m2t-blog-pager a:hover{ border-color:var(--cyan); color:var(--navy); }
.m2t-blog-pager .current{ background:var(--navy); border-color:var(--navy); color:#fff; }

/* =========================== ONE ARTICLE =========================== */
/* The featured image OVERLAPS the hero rather than sitting under a SECOND, flat
   dark band of its own. The old build painted #0a2240 behind the top 46% of the
   figure, but the hero's real background is a 135deg gradient that has already
   travelled to nearly #05101f by its bottom edge - so the two darks met in a
   visible stripe exactly where the image started. Now there is only one dark
   background on the page and no seam is possible. The hero grows by the same
   amount the image is lifted, so the dark showing above the image is unchanged. */
.m2t-post{ --m2t-fig-lift:240px; }
.m2t-hero--post{ padding-bottom:calc(92px + var(--m2t-fig-lift)); }
.m2t-hero--post .m2t-hero-inner{ padding-bottom:60px; }
.m2t-post-head{ max-width:830px; }
.m2t-post-cats{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.m2t .m2t-post-cats a{ padding:5px 12px; border:1px solid rgba(255,255,255,.26); border-radius:999px;
                       font-size:13px; font-weight:600; color:rgba(220,233,247,.92); text-decoration:none; }
.m2t .m2t-post-cats a:hover{ border-color:var(--cyan); color:#fff; }
.m2t-post-h1{ font-size:clamp(30px,4.2vw,50px); line-height:1.12; }
.m2t-post-meta{ display:flex; align-items:center; gap:9px; margin:20px 0 0;
                font-size:14.5px; color:rgba(220,233,247,.75); }

.m2t-post-fig{ position:relative; z-index:3; margin:calc(var(--m2t-fig-lift) * -1) 0 0; padding:0 24px; }
.m2t-post-fig img{ display:block; width:100%; max-height:520px; object-fit:cover;
                   border-radius:7px; aspect-ratio:16/9; }

.m2t-post-body{ padding:56px 24px 84px; background:#fff; }
.m2t-post-prose{ max-width:68ch; }
.m2t-post-prose > *{ margin:0 0 22px; }
.m2t-post-prose p{ font-size:18px; line-height:1.8; color:#33425a; }
.m2t-post-prose h2{ margin:44px 0 16px; font-size:clamp(23px,2.6vw,29px); font-weight:800;
                    line-height:1.25; color:var(--navy); }
.m2t-post-prose h3, .m2t-post-prose h4{ margin:36px 0 13px; font-size:20px; font-weight:800; color:var(--navy); }
.m2t-post-prose ul, .m2t-post-prose ol{ padding-left:0; list-style:none; }
.m2t-post-prose li{ position:relative; padding-left:28px; margin-bottom:11px;
                    font-size:18px; line-height:1.72; color:#33425a; }
.m2t-post-prose ul li::before{ content:""; position:absolute; left:7px; top:12px; width:7px; height:7px;
                               border-radius:50%; background:var(--cyan); }
.m2t-post-prose ol{ counter-reset:m2tol; }
.m2t-post-prose ol li{ counter-increment:m2tol; }
.m2t-post-prose ol li::before{ content:counter(m2tol) "."; position:absolute; left:0; top:0;
                               font-weight:800; color:var(--cyan-d); }
/* pull quote - breaks wider than the reading column on purpose */
.m2t-post-prose blockquote{ margin:38px 0; padding:26px 30px; border:1px solid #dfe8f2;
                            border-left:3px solid var(--cyan); border-radius:6px; background:#f7fafd; }
.m2t-post-prose blockquote p{ margin:0; font-size:18.5px; line-height:1.7; font-weight:600; color:var(--navy); }
.m2t-post-prose img{ width:100%; height:auto; border-radius:7px; }
.m2t .m2t-post-prose a{ color:var(--cyan-d); font-weight:600; text-decoration:underline; }

.m2t-post-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; max-width:68ch;
                margin:44px 0 0; padding-top:26px; border-top:1px solid #eef2f7; }
.m2t-post-tags span{ font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
                     color:var(--muted); margin-right:4px; }
.m2t .m2t-post-tags a{ padding:5px 12px; border:1px solid #dfe8f2; border-radius:999px;
                       font-size:14px; color:#3d4d63; text-decoration:none; }
.m2t .m2t-post-tags a:hover{ border-color:var(--cyan); color:var(--navy); }
.m2t-post-back{ margin:30px 0 0; }
.m2t .m2t-post-back a{ font-size:16px; font-weight:700; color:var(--cyan-d); }

.m2t-post-rel{ padding-top:0; border-top:1px solid #eef2f7; padding-bottom:84px; }
.m2t-post-rel .m2t-faqhub-h2{ margin-bottom:32px; padding-top:64px; }

/* The hero copy is centred from 980px down (.m2t-hero-copy in m2t-home.css), but
   text-align cannot move a flex row: the breadcrumb, the category chips and the
   date/read-time all lay out with display:flex and stayed hard left under a
   centred headline. They are centred here at the same breakpoint. */
@media (max-width:980px){
  .m2t-hero--post .m2t-bc ol{ justify-content:center; }
  .m2t-hero--post .m2t-post-cats{ justify-content:center; }
  .m2t-hero--post .m2t-post-meta{ justify-content:center; }
  .m2t-post-head{ max-width:none; margin-left:auto; margin-right:auto; }
}

@media (max-width:960px){
  .m2t-blog{ padding:54px 22px 64px; }
  .m2t-blog-lead{ grid-template-columns:1fr; gap:24px; margin-bottom:42px; padding-bottom:42px; }
  /* image first on mobile, but shorter - a phone should reach the words fast */
  .m2t-blog-lead-fig img{ aspect-ratio:16/9; }
  .m2t-blog-grid{ grid-template-columns:1fr; gap:34px; }
  /* 176px is the 34% of a 520px image the old two-tone band showed, kept exact.
     The image is 520 tall at every width - it carries width/height attributes, so
     the CSS aspect-ratio never applies and max-height is what decides. */
  .m2t-post{ --m2t-fig-lift:176px; }
  .m2t-post-fig{ padding:0 22px; }
  .m2t-post-body{ padding:40px 22px 64px; }
  .m2t-post-prose p, .m2t-post-prose li{ font-size:17px; }
  .m2t-post-rel{ padding-bottom:64px; }
  .m2t-post-rel .m2t-faqhub-h2{ padding-top:48px; }
}


/* ===========================================================================
   BLOG, PART 2 - the reading furniture (10 Sep 2026)
   Category chips, progress bar, contents list, pull quotes, display numerals.
   All presentation. The article reads correctly with CSS or JS disabled.
   =========================================================================== */

/* ---- category chip over a card image ---- */
.m2t-blog-lead-fig, .m2t-blog-card-fig{ position:relative; }
.m2t-blog-chip{ position:absolute; left:13px; top:13px; z-index:2; padding:5px 12px; border-radius:5px;
                background:rgba(10,34,64,.9); color:#fff; font-size:12px; font-weight:800;
                letter-spacing:.06em; text-transform:uppercase; }

/* ---- card lift ---- */
.m2t-blog-card{ transition:transform .22s cubic-bezier(.4,0,.2,1); }
.m2t-blog-card:hover{ transform:translateY(-3px); }

/* ---- meta row with a clock ---- */
.m2t-blog-clock{ width:15px; height:15px; margin-right:-3px; flex:none; fill:none;
                 stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.m2t-post-meta .m2t-blog-clock{ opacity:.8; }

/* ---- reading progress ---- */
.m2t-post-progress{ position:fixed; left:0; top:0; z-index:120; width:100%; height:3px;
                    background:transparent; pointer-events:none; }
.m2t-post-progress span{ display:block; width:100%; height:100%; transform:scaleX(0);
                         transform-origin:left center; background:var(--cyan); }

/* ---- article layout: contents beside the prose ----
   BOTH children carry an explicit grid-row. Without it the aside - which comes
   first in the markup and is pinned to column 2 - took row 1, and grid's sparse
   auto-placement then pushed the prose down to row 2. The article opened 392px
   BELOW the contents list with a slab of white beside it.
   The reading block and the rail are capped as one unit and sit at the LEFT edge
   of the container, so the article, the breadcrumb, the featured image, the tags
   and the prev/next links all share one left margin (Sayeed, 10 Sep 2026). The
   rail therefore sits close to the text it indexes instead of floating off at the
   far right edge of the 1240px container. */
.m2t-post-layout{ display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:56px;
                  align-items:start; max-width:1020px; }
.m2t-post-layout .m2t-post-prose{ grid-column:1; grid-row:1; }
.m2t-post-toc{ grid-column:2; grid-row:1; position:sticky; top:104px; }
.m2t-post-toc-h{ display:block; margin:0 0 14px; padding-top:13px; border-top:2px solid var(--cyan);
                 font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
                 color:var(--navy); }
/* Numerals come from a CSS counter, not from the JS - the list is a plain <ol>
   and stays one if the stylesheet never loads. */
.m2t-post-toc ol{ counter-reset:m2ttoc; margin:0; padding:0; list-style:none; border-left:2px solid #e6edf5; }
.m2t-post-toc li{ counter-increment:m2ttoc; margin:0; }
.m2t .m2t-post-toc a{ display:grid; grid-template-columns:17px 1fr; gap:9px; align-items:baseline;
                      padding:8px 0 8px 15px; margin-left:-2px;
                      border-left:2px solid transparent; font-size:13.5px; line-height:1.5;
                      font-weight:500; color:#5b6b82; text-decoration:none;
                      transition:color .15s, border-color .15s; }
.m2t .m2t-post-toc a::before{ content:counter(m2ttoc); font-size:11.5px; font-weight:800;
                              color:var(--cyan-d); opacity:.55; transition:opacity .15s; }
.m2t .m2t-post-toc a:hover{ color:var(--navy); }
.m2t .m2t-post-toc a:hover::before{ opacity:1; }
.m2t .m2t-post-toc a.is-current{ color:var(--navy); font-weight:700; border-left-color:var(--cyan); }
.m2t .m2t-post-toc a.is-current::before{ opacity:1; }

/* ---- lead-in paragraph ---- */
.m2t-post-prose > p:first-child{ font-size:20.5px; line-height:1.7; color:#2b3a51; font-weight:500; }

/* ---- display numerals on numbered sections ---- */
.m2t-post-prose h2.is-numbered{ display:flex; align-items:baseline; gap:14px; }
.m2t-post-num{ flex:none; font-size:36px; font-weight:800; line-height:1;
               color:var(--cyan); opacity:.32; letter-spacing:-.02em; }

/* ---- pull quote: a quote, not a boxed note ---- */
.m2t-post-prose blockquote{ margin:40px 0; padding:4px 0 4px 26px;
                            border:0; border-left:3px solid var(--cyan);
                            border-radius:0; background:none; }
.m2t-post-prose blockquote p{ margin:0; font-size:21px; line-height:1.6; font-weight:600;
                              color:var(--navy); letter-spacing:-.005em; }

/* ---- prev / next ---- */
.m2t-post-nav{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:68ch;
               margin:38px 0 0; }
.m2t .m2t-post-nav a{ display:block; padding:18px 20px; border:1px solid #dfe8f2; border-radius:6px;
                      text-decoration:none; transition:border-color .15s, transform .15s; }
.m2t .m2t-post-nav a:hover{ border-color:var(--cyan); transform:translateY(-2px); }
.m2t-post-nav span{ display:block; margin-bottom:6px; font-size:12px; font-weight:800;
                    letter-spacing:.08em; text-transform:uppercase; color:var(--cyan-d); }
.m2t-post-nav b{ display:block; font-size:15.5px; font-weight:700; line-height:1.4; color:var(--navy); }
.m2t-post-nav-next{ text-align:right; }
.m2t-post-nav-prev:only-child{ grid-column:1; }
.m2t-post-nav-next:only-child{ grid-column:2; }

@media (max-width:1100px){
  /* The contents list stops being a sidebar and sits above the article. */
  .m2t-post-layout{ grid-template-columns:1fr; gap:0; }
  .m2t-post-layout .m2t-post-prose, .m2t-post-toc{ grid-column:1; grid-row:auto; }
  .m2t-post-toc{ position:static; order:-1; margin-bottom:34px; padding:20px 22px;
                 border:1px solid #e6edf5; border-radius:7px; background:#f7fafd; }
  .m2t-post-toc-h{ padding-top:0; border-top:0; }
  .m2t-post-toc ol{ border-left:0; columns:2; column-gap:26px; }
  .m2t .m2t-post-toc a{ padding:6px 0; border-left:0; }
}
@media (max-width:700px){
  .m2t-post-toc ol{ columns:1; }
  .m2t-post-prose > p:first-child{ font-size:18.5px; }
  .m2t-post-num{ font-size:28px; }
  .m2t-post-prose blockquote p{ font-size:19px; }
  .m2t-post-nav{ grid-template-columns:1fr; }
  .m2t-post-nav-next{ text-align:left; }
  .m2t-post-nav-next:only-child{ grid-column:1; }
}