/* RemitPK — Meridian Ledger web system */
:root {
  --ink: #0A2540; --mute: #5E6E7E; --paper: #fff; --card: #F5F8FF;
  --hairline: #DDE5F4; --royal: #2450C9; --royal-deep: #16307E;
  --gold: #CEA860; --gold-deep: #8C6A24; --up: #157A4A; --down: #B3403A;
  --gold-grad: linear-gradient(180deg, #FFE99E 0%, #F2BE46 55%, #A8741A 100%);
  --blue-grad: linear-gradient(135deg, #2F5EDE 0%, #16307E 100%);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: "Instrument Sans", -apple-system, sans-serif; color: var(--ink);
       background: var(--paper); line-height: 1.65; }
h1,h2,h3,h4 { font-family: "Bricolage Grotesque", sans-serif; line-height: 1.12;
              letter-spacing: -0.5px; }
a { color: var(--royal); text-decoration: none; }
img { max-width: 100%; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 720px; }
.kicker { font-size: 12px; font-weight: 700; letter-spacing: 2.5px;
          text-transform: uppercase; color: var(--royal); }
.gold-text { background: var(--gold-grad); -webkit-background-clip: text;
             background-clip: text; color: transparent; }
.btn { display: inline-block; background: var(--royal); color: #fff !important;
       font-weight: 700; font-size: 15px; padding: 12px 24px; border-radius: 12px;
       transition: transform .18s, box-shadow .18s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(36,80,201,.28); }
.btn.ghost { background: #fff; color: var(--royal) !important;
             border: 1.5px solid var(--hairline); }
.btn.ghost:hover { border-color: var(--royal); box-shadow: none; }
.soon { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
        color: var(--gold-deep); border: 1px solid rgba(206,168,96,.55);
        border-radius: 99px; padding: 8px 16px; }

/* nav */
nav.site { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9);
      backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline); }
nav.site .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
nav.site img { height: 30px; }
nav.site .links { display: flex; gap: 26px; margin-left: auto; font-size: 14.5px;
             font-weight: 600; align-items: center; }
nav.site .links a { color: var(--ink); transition: color .15s; }
nav.site .links a:hover, nav.site .links a.on { color: var(--royal); }
nav.site .links a.btn { color: #fff; padding: 9px 18px; }

/* ticker */
.ticker { background: var(--card); border-bottom: 1px solid var(--hairline);
          overflow: hidden; white-space: nowrap; }
.ticker-track { display: inline-block; padding: 8px 0;
                animation: tickerscroll 46s linear infinite; }
.ticker span { margin-right: 26px; font-size: 13px; font-weight: 600; }
.ticker .code { color: var(--ink); } .ticker .rate { color: var(--royal); }
.ticker .u { color: var(--up); font-size: 11px; }
.ticker .d { color: var(--down); font-size: 11px; }
@keyframes tickerscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* hero */
.hero { padding: 84px 0 56px; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -40% -20% auto;
  height: 140%; background:
  radial-gradient(600px 400px at 78% 20%, rgba(36,80,201,.07), transparent 70%),
  radial-gradient(500px 340px at 12% 80%, rgba(242,190,70,.08), transparent 70%);
  pointer-events: none; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px;
              align-items: start; position: relative; }
.hero h1 { font-size: 56px; font-weight: 800; }
.hero p.lead { font-size: 19px; color: var(--mute); margin: 20px 0 28px; }
.badges { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.trust { margin-top: 28px; font-size: 13.5px; color: var(--mute); }
.trust b { color: var(--ink); }

/* calculator */
.calc { background: #fff; border: 1px solid var(--hairline); border-radius: 22px;
        box-shadow: 0 24px 70px rgba(36,80,201,.12); padding: 26px; }
.calc h3 { font-size: 15px; margin-bottom: 14px; display: flex; align-items: center;
           justify-content: space-between; }
.live-dot { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--up); }
.live-dot::before { content: "●"; margin-right: 4px; }
.calc .controls { display: flex; gap: 10px; margin-bottom: 16px; }
.calc select, .calc input { font: 600 16px "Instrument Sans", sans-serif;
  color: var(--ink); padding: 12px 14px; border: 1px solid var(--hairline);
  border-radius: 12px; background: var(--card); outline: none; min-width: 0; }
.calc select:focus, .calc input:focus { border-color: var(--royal); }
.calc input { flex: 1; }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 4px;
       border-top: 1px solid var(--hairline); font-size: 14px; }
.row .rank { width: 18px; font-family: "Bricolage Grotesque"; font-weight: 700;
             color: var(--mute); }
.row.first .rank { color: var(--gold-deep); }
.row .prov { font-weight: 700; }
.row .meta { color: var(--mute); font-size: 12px; }
.row .amt { margin-left: auto; text-align: right; font-weight: 700;
            font-variant-numeric: tabular-nums; }
.row .amt small { display: block; font-weight: 500; color: var(--mute); }
.best-badge { font-size: 9px; font-weight: 700; letter-spacing: 1px; color: var(--ink);
              background: var(--gold-grad); border-radius: 99px; padding: 2px 8px;
              margin-left: 6px; vertical-align: middle; }
.calc .note { font-size: 11px; color: var(--mute); margin-top: 12px; }
.delta-line { font-size: 13px; font-weight: 600; color: var(--gold-deep);
              margin-top: 12px; }

/* sections */
section { padding: 84px 0; }
section.alt { background: var(--card); border-top: 1px solid var(--hairline);
              border-bottom: 1px solid var(--hairline); }
.sec-head { max-width: 680px; margin-bottom: 48px; }
.sec-head h2 { font-size: 40px; font-weight: 800; margin-top: 10px; }
.sec-head p { color: var(--mute); margin-top: 14px; font-size: 17px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.feature { background: #fff; border: 1px solid var(--hairline); border-radius: 18px;
           padding: 28px; transition: transform .2s, box-shadow .2s; }
.feature:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(36,80,201,.10); }
.feature .icon { font-size: 28px; }
.feature h3 { font-size: 19px; margin: 14px 0 8px; }
.feature p { font-size: 14.5px; color: var(--mute); }
.feature .tag { display: inline-block; margin-top: 12px; font-size: 10px;
  font-weight: 700; letter-spacing: 1.2px; color: var(--royal); background: var(--card);
  border: 1px solid var(--hairline); padding: 3px 9px; border-radius: 99px; }

/* stats band */
.stats { background: var(--blue-grad); color: #fff; }
.stats .grid { grid-template-columns: repeat(4, 1fr); text-align: center; }
.stats .n { font-family: "Bricolage Grotesque"; font-size: 44px; font-weight: 800; }
.stats .n em { font-style: normal; background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats .l { font-size: 13px; opacity: .75; letter-spacing: 1px;
            text-transform: uppercase; }

/* fee bar */
.feebar { background: #fff; border: 1px solid var(--hairline); border-radius: 18px;
          padding: 28px; }
.feebar .bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden;
               margin: 14px 0 10px; }
.feebar .fee { background: var(--gold-grad); width: 18%; }
.feebar .fx { background: var(--royal); flex: 1; }
.legend { font-size: 13px; color: var(--mute); display: flex; gap: 18px;
          flex-wrap: wrap; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 99px;
            margin-right: 5px; }

/* corridors */
.corridors { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
             gap: 12px; }
.corridor { background: #fff; border: 1px solid var(--hairline); border-radius: 14px;
            padding: 16px; text-align: center; transition: transform .18s; }
.corridor:hover { transform: translateY(-3px); }
.corridor .flag { font-size: 26px; }
.corridor .pair { font-family: "Bricolage Grotesque"; font-weight: 700;
                  font-size: 15px; margin-top: 6px; }
.corridor .r { color: var(--royal); font-weight: 700; font-size: 14px;
               font-variant-numeric: tabular-nums; }
.corridor .tag { font-size: 10px; letter-spacing: 1px; color: var(--gold-deep); }

/* vs table */
table.vs { width: 100%; border-collapse: collapse; background: #fff;
           border: 1px solid var(--hairline); border-radius: 18px; overflow: hidden; }
.vs th, .vs td { padding: 14px 18px; font-size: 14.5px; text-align: left;
                 border-bottom: 1px solid var(--hairline); }
.vs th { font-family: "Bricolage Grotesque"; font-size: 14.5px; background: var(--card); }
.vs th.hl, .vs td.hl { color: var(--royal); font-weight: 700; }
.vs td.yes { font-weight: 700; color: var(--up); }
.vs td.no { color: var(--mute); }

/* faq */
details { border-bottom: 1px solid var(--hairline); padding: 18px 0; }
summary { font-weight: 700; cursor: pointer; font-size: 16.5px; }
details p { color: var(--mute); margin-top: 10px; font-size: 15px; max-width: 740px; }

/* blog */
.post-card { background: #fff; border: 1px solid var(--hairline); border-radius: 18px;
             padding: 28px; display: block; color: var(--ink);
             transition: transform .2s, box-shadow .2s; }
.post-card:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(36,80,201,.10); }
.post-card .date { font-size: 12px; color: var(--mute); letter-spacing: 1px;
                   text-transform: uppercase; }
.post-card h3 { font-size: 21px; margin: 10px 0; }
.post-card p { color: var(--mute); font-size: 14.5px; }
.post-card .more { font-weight: 700; color: var(--royal); font-size: 14px; }
article.post { padding: 72px 0; }
article.post .date { color: var(--mute); font-size: 13px; letter-spacing: 1px;
                     text-transform: uppercase; }
article.post h1 { font-size: 42px; font-weight: 800; margin: 12px 0 8px; }
article.post .standfirst { font-size: 19px; color: var(--mute); margin: 14px 0 34px; }
article.post h2 { font-size: 26px; margin: 38px 0 12px; }
article.post p, article.post li { font-size: 16.5px; color: #2c3e50; margin-bottom: 16px; }
article.post ul, article.post ol { padding-left: 24px; margin-bottom: 16px; }
article.post blockquote { border-left: 3px solid var(--gold); padding: 4px 0 4px 20px;
  margin: 24px 0; font-size: 18px; color: var(--ink); font-weight: 600; }
.post-cta { background: var(--card); border: 1px solid var(--hairline);
            border-radius: 16px; padding: 22px 26px; margin-top: 40px;
            display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.post-cta strong { font-family: "Bricolage Grotesque"; }

/* app cta */
.app-cta { text-align: center; }
.app-cta img.mark { height: 88px; }
.app-cta h2 { font-size: 38px; margin: 18px 0 12px; }
.app-cta p { color: var(--mute); max-width: 560px; margin: 0 auto 26px; }

footer.site { padding: 52px 0 68px; border-top: 1px solid var(--hairline);
         font-size: 13.5px; color: var(--mute); }
footer.site .wrap { display: flex; gap: 14px 30px; flex-wrap: wrap; align-items: center; }
footer.site img { height: 24px; }
footer.site .links { display: flex; gap: 20px; margin-left: auto; font-weight: 600; }

/* gsap reveal base states (no-js and reduced motion stay visible) */
.gs { opacity: 1; }
html.gsap-on .gs { opacity: 0; transform: translateY(26px); }
@media (prefers-reduced-motion: reduce) {
  html.gsap-on .gs { opacity: 1; transform: none; }
  .ticker-track { animation: none; }
}

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero h1 { font-size: 40px; }
  .sec-head h2 { font-size: 31px; }
  .grid, .grid.two, .stats .grid { grid-template-columns: 1fr 1fr; }
  nav.site .links a:not(.btn) { display: none; }
}
@media (max-width: 560px) {
  .grid, .grid.two { grid-template-columns: 1fr; }
  .stats .grid { grid-template-columns: 1fr 1fr; }
  article.post h1 { font-size: 32px; }
}