/* ==========================================================================
   MehaiPay — inner page stylesheet.
   Loaded AFTER home.css, which owns the palette, header, footer, buttons,
   phone mockup, .feat rows, .svc tiles, .wcard colour cards, .stats band,
   .quote cards, .stepc steps, .ticks lists, .sec-head and the .rv reveal.

   Everything here is what an inner page needs on top of that: the page hero,
   generic sections, card grids, prose/legal layout, tables, FAQ accordion,
   forms and the commission calculator.
   ========================================================================== */

/* -------------------------------------------------------------- page hero -- */
/* A slim title band: breadcrumb, page title, one-line description. Nothing
   else goes in here - the page's own sections carry the artwork and CTAs. */
.phero{position:relative;background:var(--navy-ink);color:#fff;overflow:hidden;
  padding:clamp(1.65rem,3vw,2.15rem) 0 clamp(2rem,3.6vw,2.85rem)}
.phero::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(880px 420px at 78% 40%, rgba(249,115,22,.2), transparent 62%),
    radial-gradient(740px 500px at 8% 0%, rgba(60,110,220,.42), transparent 60%),
    linear-gradient(112deg,#0A2F73 0%,#0B3D91 46%,#123C86 74%,#0A2A64 100%)}
.phero .wrap{position:relative;z-index:1}
/* The headline sits on a single line. The vw term is tuned to the longest
   headline on the site (become-a-retailer, 58 characters) so that it still
   fits the 1132px content width at the top of the clamp. */
.phero h1{font-size:clamp(1.55rem,2.95vw,2.25rem);font-weight:800;line-height:1.16;color:#fff}
.phero h1 em{font-style:normal;color:var(--orange)}
@media (min-width:900px){
  /* white-space also resets the text-wrap:balance inherited from home.css */
  .phero h1{white-space:nowrap}
}
.phero .lede{color:#C3D6F3;font-size:1.02rem;margin:.85rem 0 0;max-width:64ch}

/* breadcrumb */
.crumb{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;font-size:.8rem;color:#9FBAE8;
  margin-bottom:1.1rem}
.crumb a{text-decoration:none;color:#9FBAE8}
.crumb a:hover{color:#fff}
.crumb svg{width:10px;height:10px;opacity:.6}
.crumb [aria-current]{color:#fff;font-weight:600}

/* ------------------------------------------------------- generic sections -- */
.sec{padding:clamp(3rem,5vw,4.5rem) 0}
.sec.grey{background:var(--grey)}
.sec.tight{padding:clamp(2.25rem,4vw,3.25rem) 0}
.sec-head.left{text-align:left;margin-left:0;max-width:62ch}

/* ------------------------------------------------------------ card grids -- */
.cards{display:grid;gap:1.1rem}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.cards.c4{grid-template-columns:repeat(2,1fr)}.cards.c3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards.c2,.cards.c3,.cards.c4{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.5rem 1.4rem;
  display:flex;flex-direction:column;gap:.55rem;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.card.link:hover{transform:translateY(-3px);border-color:#C8D8F3;
  box-shadow:0 16px 32px -20px rgba(10,22,40,.55)}
a.card{text-decoration:none;color:inherit}
.card i.ico{width:48px;height:48px;border-radius:15px;background:#EEF3FC;display:grid;place-items:center;
  margin-bottom:.35rem}
.card i.ico svg{width:25px;height:25px;color:var(--navy)}
.card h3{font-size:1.05rem;font-weight:800;line-height:1.3}
.card p{font-size:.9rem;color:var(--slate)}
.card .more{margin-top:auto;padding-top:.7rem;font-family:Manrope,sans-serif;font-weight:700;
  font-size:.85rem;color:var(--navy);display:inline-flex;align-items:center;gap:.4rem}
.card .more svg{width:12px;height:12px}
.sec.grey .card{border-color:#DFE7F4}

/* numbered card, used for "how it works" */
.card.step{padding-top:1.35rem}
.card.step .n{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;flex:none;
  display:grid;place-items:center;font-family:Manrope,sans-serif;font-weight:800;font-size:.9rem;
  margin-bottom:.4rem}

/* commission / price highlight inside a card */
.card .rate{font-family:Manrope,sans-serif;font-weight:800;font-size:1.5rem;color:var(--navy);
  letter-spacing:-.03em;line-height:1.1}
.card .rate small{display:block;font-family:"IBM Plex Mono",monospace;font-size:.66rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:#8797B2;margin-top:.3rem}

/* ------------------------------------------------------------------ table -- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff}
table.tbl{width:100%;border-collapse:collapse;min-width:520px;font-size:.92rem}
table.tbl th,table.tbl td{padding:.85rem 1.1rem;text-align:left;border-bottom:1px solid var(--line)}
table.tbl thead th{background:var(--grey);font-family:Manrope,sans-serif;font-weight:700;
  font-size:.8rem;letter-spacing:.02em;color:var(--navy);white-space:nowrap}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:#FAFCFF}
table.tbl td.num{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
table.tbl td b{font-weight:600}
.tbl-note{font-size:.8rem;color:var(--slate);margin-top:.8rem}

/* ------------------------------------------------------------------- FAQ --- */
.faq{display:flex;flex-direction:column;gap:.7rem;max-width:840px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  transition:border-color .18s,box-shadow .18s}
.faq details[open]{border-color:#C8D8F3;box-shadow:0 14px 30px -22px rgba(10,22,40,.5)}
.faq summary{list-style:none;cursor:pointer;padding:1.05rem 3rem 1.05rem 1.25rem;position:relative;
  font-family:Manrope,sans-serif;font-weight:700;font-size:.98rem;letter-spacing:-.015em;line-height:1.45}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:1.25rem;top:1.32rem;width:10px;height:10px;
  border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg);
  transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--navy)}
.faq .a{padding:0 1.25rem 1.2rem;font-size:.93rem;color:var(--slate);line-height:1.72}
.faq .a p + p{margin-top:.7rem}
.faq .a ul{margin:.6rem 0 0;padding-left:1.15rem}
.faq .a li{margin-bottom:.35rem}

/* ------------------------------------------------------- prose / legal ----- */
.legal{display:grid;grid-template-columns:250px 1fr;gap:clamp(1.75rem,4vw,3.5rem);align-items:start}
@media (max-width:900px){.legal{grid-template-columns:1fr}}
.toc{position:sticky;top:96px;border:1px solid var(--line);border-radius:14px;padding:1.15rem 1.2rem;
  background:var(--white)}
@media (max-width:900px){.toc{position:static}}
.toc h4{font-family:Manrope,sans-serif;font-size:.74rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--navy);margin-bottom:.8rem}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:t;display:flex;flex-direction:column;gap:.5rem}
.toc li{counter-increment:t}
.toc a{display:flex;gap:.55rem;text-decoration:none;font-size:.85rem;color:var(--slate);line-height:1.45}
.toc a::before{content:counter(t) ".";font-family:"IBM Plex Mono",monospace;font-size:.76rem;
  color:#A9B8D0;flex:none}
.toc a:hover{color:var(--navy)}

.prose{max-width:74ch;color:var(--ink)}
.prose h2{font-size:clamp(1.25rem,2.2vw,1.55rem);font-weight:800;line-height:1.25;
  margin:2.4rem 0 .75rem;scroll-margin-top:96px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.02rem;font-weight:700;margin:1.5rem 0 .5rem}
.prose p{font-size:.95rem;line-height:1.78;color:var(--slate)}
.prose p + p{margin-top:.85rem}
.prose ul,.prose ol{margin:.85rem 0 0;padding-left:1.3rem;font-size:.95rem;line-height:1.78;color:var(--slate)}
.prose li{margin-bottom:.5rem}
.prose li::marker{color:var(--orange)}
.prose b,.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--navy);font-weight:600}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.2rem 0}
.prose .updated{display:inline-flex;align-items:center;gap:.5rem;background:var(--grey);
  border-radius:var(--pill);padding:.4rem .95rem;font-family:"IBM Plex Mono",monospace;font-size:.72rem;
  letter-spacing:.06em;color:var(--slate);margin-bottom:1.75rem}
.prose .updated svg{width:13px;height:13px;color:var(--orange)}
.callout{border:1px solid var(--line);border-left:3px solid var(--orange);background:var(--grey);
  border-radius:0 12px 12px 0;padding:1.05rem 1.2rem;margin:1.5rem 0;font-size:.9rem;color:var(--slate)}
.callout b{display:block;color:var(--ink);font-family:Manrope,sans-serif;font-weight:700;
  font-size:.92rem;margin-bottom:.3rem}

/* ------------------------------------------------------------------ form --- */
.form-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.75rem,4vw,3.25rem);align-items:start}
@media (max-width:900px){.form-grid{grid-template-columns:1fr}}
.form{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(1.4rem,3vw,2rem);
  box-shadow:0 22px 44px -34px rgba(10,22,40,.6)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:520px){.fields{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.4rem}
.field.wide{grid-column:1/-1}
.field label{font-family:Manrope,sans-serif;font-weight:700;font-size:.8rem;letter-spacing:-.005em}
.field label .req{color:var(--orange)}
.field input,.field select,.field textarea{font-family:inherit;font-size:.92rem;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:11px;padding:.72rem .85rem;
  width:100%;transition:border-color .16s,box-shadow .16s}
.field textarea{resize:vertical;min-height:112px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(11,61,145,.12)}
.field .hint{font-size:.76rem;color:#8797B2}
.form .btn{margin-top:1.2rem;width:100%;justify-content:center}
.form .consent{display:flex;gap:.6rem;align-items:flex-start;margin-top:1.1rem;font-size:.8rem;
  color:var(--slate);line-height:1.6}
.form .consent input{width:16px;height:16px;flex:none;margin-top:.15rem;accent-color:var(--navy)}
.form-ok{display:none;align-items:center;gap:.6rem;background:#EAF7F1;border:1px solid #BCE5D3;
  border-radius:11px;padding:.8rem 1rem;margin-top:1.1rem;font-size:.88rem;color:#0B6B4A}
.form-ok.on{display:flex}
.form-ok svg{width:17px;height:17px;flex:none;color:var(--green)}

/* contact channel tiles */
.chan{display:flex;gap:1rem;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:1.15rem 1.2rem}
.chan + .chan{margin-top:.8rem}
.chan i{width:44px;height:44px;border-radius:14px;background:#EEF3FC;color:var(--navy);flex:none;
  display:grid;place-items:center}
.chan i svg{width:22px;height:22px}
.chan b{display:block;font-family:Manrope,sans-serif;font-weight:700;font-size:.95rem}
.chan span{display:block;font-size:.87rem;color:var(--slate);margin-top:.15rem}
.chan a{color:var(--navy);text-decoration:none;font-weight:600}
.chan a:hover{text-decoration:underline}

/* ------------------------------------------------------------ calculator --- */
.calc{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.5rem,3.5vw,2.5rem);align-items:start}
@media (max-width:900px){.calc{grid-template-columns:1fr}}
.calc-panel{background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:clamp(1.3rem,3vw,1.9rem);box-shadow:0 22px 44px -34px rgba(10,22,40,.6)}
.calc-row{display:grid;grid-template-columns:1fr auto;gap:.6rem 1rem;align-items:center;
  padding:1rem 0;border-bottom:1px solid var(--line)}
.calc-row:last-of-type{border-bottom:0}
.calc-row .lab{font-family:Manrope,sans-serif;font-weight:700;font-size:.9rem;line-height:1.35}
.calc-row .lab small{display:block;font-family:"IBM Plex Sans",sans-serif;font-weight:400;
  font-size:.76rem;color:#8797B2;letter-spacing:0;margin-top:.1rem}
.calc-row .val{font-family:"IBM Plex Mono",monospace;font-size:.92rem;font-weight:600;
  font-variant-numeric:tabular-nums;background:var(--grey);border-radius:9px;padding:.3rem .7rem;
  min-width:96px;text-align:right}
.calc-row input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--navy);height:22px}
.calc-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.calc-foot .reset{background:none;border:1px solid var(--line);border-radius:var(--pill);
  padding:.5rem 1.1rem;font-family:Manrope,sans-serif;font-weight:700;font-size:.82rem;color:var(--slate);
  cursor:pointer;transition:border-color .16s,color .16s}
.calc-foot .reset:hover{border-color:var(--navy);color:var(--navy)}

.calc-out{background:linear-gradient(155deg,#0B3D91 0%,#072B69 66%,#0E4099 100%);color:#fff;
  border-radius:18px;padding:clamp(1.4rem,3vw,2rem);position:relative;overflow:hidden;
  box-shadow:0 26px 50px -30px rgba(11,61,145,.9)}
.calc-out::after{content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;
  border-radius:50%;background:radial-gradient(circle,rgba(249,115,22,.3),transparent 66%)}
.calc-out > *{position:relative;z-index:1}
.calc-out .lbl{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:#9DBBEE;display:block}
.calc-out .big{font-family:Manrope,sans-serif;font-weight:800;letter-spacing:-.045em;line-height:1.05;
  font-size:clamp(2.4rem,5.5vw,3.3rem);font-variant-numeric:tabular-nums;margin-top:.35rem}
.calc-out .per{display:flex;gap:.75rem;margin-top:1.4rem;flex-wrap:wrap}
.calc-out .per div{flex:1;min-width:120px;background:rgba(255,255,255,.1);border-radius:12px;
  padding:.85rem .95rem}
.calc-out .per b{display:block;font-family:Manrope,sans-serif;font-weight:800;font-size:1.22rem;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:.25rem}
.calc-bd{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.2)}
.calc-bd .r{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-size:.87rem;padding:.4rem 0;color:#D7E3FA}
.calc-bd .r b{font-family:"IBM Plex Mono",monospace;font-weight:600;color:#fff;
  font-variant-numeric:tabular-nums}
.calc-note{font-size:.78rem;color:#9DBBEE;margin-top:1.2rem;line-height:1.6}

/* ------------------------------------------------------------- CTA band ---- */
.cta-band{background:var(--navy-ink);color:#fff;padding:clamp(2.75rem,5vw,4rem) 0;
  position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;left:-140px;bottom:-180px;width:460px;height:460px;
  border-radius:50%;background:radial-gradient(circle,rgba(249,115,22,.22),transparent 65%)}
.cta-band .wrap{position:relative;z-index:1;display:flex;justify-content:space-between;
  align-items:center;gap:2rem;flex-wrap:wrap}
.cta-band h2{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:800;line-height:1.18;max-width:20ch}
.cta-band p{color:#BFD2F0;margin-top:.55rem;max-width:46ch;font-size:.98rem}
.cta-band .acts{display:flex;gap:.7rem;flex-wrap:wrap}

/* ------------------------------------------------------------- misc bits --- */
.pill-tabs{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.75rem}
.pill-tabs button{background:#fff;border:1px solid var(--line);border-radius:var(--pill);
  padding:.5rem 1.15rem;font-family:Manrope,sans-serif;font-weight:700;font-size:.84rem;color:var(--slate);
  cursor:pointer;transition:background-color .16s,color .16s,border-color .16s}
.pill-tabs button:hover{border-color:#C8D8F3;color:var(--navy)}
.pill-tabs button[aria-selected=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.tabpanel[hidden]{display:none}

.logo-row{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem}
@media (max-width:980px){.logo-row{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.logo-row{grid-template-columns:repeat(2,1fr)}}
.logo-row span{background:#fff;border:1px solid var(--line);border-radius:12px;min-height:66px;
  display:grid;place-items:center;text-align:center;padding:.6rem;font-family:Manrope,sans-serif;
  font-weight:700;font-size:.84rem;color:var(--slate);letter-spacing:-.01em;line-height:1.25}

.tl{list-style:none;margin:0;padding:0 0 0 1.6rem;position:relative}
.tl::before{content:"";position:absolute;left:5px;top:.6rem;bottom:.6rem;width:2px;background:var(--line)}
.tl li{position:relative;padding-bottom:1.5rem}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-1.6rem;top:.45rem;width:12px;height:12px;
  border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px #fff}
.tl .yr{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.14em;color:var(--orange)}
.tl b{display:block;font-family:Manrope,sans-serif;font-weight:700;font-size:1rem;margin:.2rem 0 .25rem}
.tl p{font-size:.9rem;color:var(--slate)}

/* value / pillar cards on a dark band */
.dark-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media (max-width:900px){.dark-cards{grid-template-columns:1fr}}
.dcard{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:16px;
  padding:1.5rem 1.4rem;transition:background-color .18s,border-color .18s,transform .18s}
.dcard:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.26);transform:translateY(-3px)}
.dcard i{width:46px;height:46px;border-radius:15px;background:rgba(249,115,22,.18);color:var(--orange);
  display:grid;place-items:center;margin-bottom:.9rem}
.dcard i svg{width:23px;height:23px}
.dcard h3{font-size:1.05rem;font-weight:800;color:#fff;line-height:1.3}
.dcard p{font-size:.89rem;color:#BFD2F0;margin-top:.45rem}

/* map / address block */
.addr{font-style:normal;font-size:.9rem;color:var(--slate);line-height:1.75}
.addr b{display:block;font-family:Manrope,sans-serif;font-weight:700;color:var(--ink);font-size:.95rem;
  margin-bottom:.25rem}