/* ============ calculator ============ */
/* Every track here is minmax(0,...) rather than a bare fr. A bare 1fr means
   minmax(auto,1fr), and auto is the item's min-content: the inputs column
   holds a two-button segmented control and number fields whose min-content
   came to 470px, so on a 390px phone the track grew to 470, the layout
   viewport expanded to 490 to contain it, and the whole document scrolled
   sideways. The container was never the problem; the track was. */
.calcwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(26px,3.5vw,54px);align-items:start}
.calcwrap>*{min-width:0}
@media (max-width:940px){.calcwrap{grid-template-columns:minmax(0,1fr)}}
.tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--rule);margin-bottom:38px}
.tab{background:none;border:0;border-bottom:2px solid transparent;font:inherit;font-size:1.02rem;font-weight:600;
  letter-spacing:-.01em;padding:13px 22px 12px;cursor:pointer;color:var(--slate);margin-bottom:-1px}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);border-bottom-color:var(--green)}
.panel{display:none}
.panel.on{display:block}
.inputs{border:1px solid var(--rule);padding:clamp(22px,3vw,34px);background:#fff;min-width:0}
.inputs h2{font-size:1.18rem;margin-bottom:22px;letter-spacing:-.015em}
/* A field can never be wider than the box that holds it. Without this a
   number input keeps its default size attribute and pushes the column out. */
.inputs input,.inputs select,.inputs textarea{max-width:100%;box-sizing:border-box}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 18px}
.row2>*{min-width:0}
@media (max-width:520px){.row2{grid-template-columns:minmax(0,1fr)}}
.seg{display:flex;border:1px solid var(--rule);margin-bottom:22px}
/* flex:1 alone still floors each button at its own min-content, which is what
   made a two-button control 424px wide. */
.seg button{flex:1 1 0;min-width:0;background:none;border:0;font:inherit;font-size:.92rem;font-weight:600;padding:11px 8px;cursor:pointer;color:var(--slate)}
.seg button.on{background:var(--ground-dark);color:#fff}
.hint{font-size:.85rem;color:var(--slate);line-height:1.45;margin:-12px 0 20px}
.money{position:relative}
.money input{padding-left:46px}
.money::before{content:'GHS';position:absolute;left:14px;top:13px;font-size:.8rem;font-weight:600;color:var(--slate);letter-spacing:.06em}
.result{background:var(--ground-dark);color:#fff;padding:clamp(24px,3vw,36px)}
.result .big{font-size:clamp(2.4rem,5vw,3.5rem);font-weight:700;letter-spacing:-.03em;line-height:1;margin:6px 0 4px}
.result .cur{font-size:1.1rem;font-weight:600;color:var(--green-lift);letter-spacing:.04em}
/* The result panel is the soft dark ground now, not near-black, and
   #7E8C87 on it is 3:1. --slate is relit inside every dark ground, so
   reading the token instead of a literal keeps this at 4.9:1. */
.result .sub{font-size:.75rem;text-transform:uppercase;letter-spacing:.16em;color:var(--slate);font-weight:600}
.bar{display:flex;height:12px;margin:26px 0 12px;overflow:hidden}
.bar span{display:block;height:100%;transition:width .35s ease}
.key{display:flex;flex-wrap:wrap;gap:16px;font-size:.78rem;font-weight:600;letter-spacing:.04em;color:#A8B4AF}
.key i{display:inline-block;width:9px;height:9px;margin-right:6px;font-style:normal}
table.brk{width:100%;border-collapse:collapse;margin-top:26px;font-size:.98rem}
table.brk th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.15em;color:var(--slate);
  font-weight:600;padding:0 0 10px;border-bottom:1px solid var(--rule)}
table.brk td{padding:11px 0;border-bottom:1px solid var(--rule);vertical-align:top}
table.brk td:last-child,table.brk th:last-child{text-align:right;font-variant-numeric:tabular-nums}
table.brk tr.tot td{font-weight:700;border-bottom:2px solid var(--ink);border-top:1px solid var(--ink)}
table.brk tr.mut td{color:var(--slate);font-size:.92rem}
table.brk .lbl{font-size:.8rem;color:var(--slate);display:block;margin-top:2px;line-height:1.35}
.note{border-left:3px solid var(--green);background:var(--tint);padding:20px 22px;font-size:.95rem;line-height:1.55;color:#25382C;margin-top:28px}
.note b{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;color:var(--green-deep);margin-bottom:8px}
.warn{border-left-color:#B08A2E;background:#FBF6E9;color:#4A3A16}
.warn b{color:#8A6A18}
.verified{display:flex;gap:14px;align-items:center;border:1px solid var(--rule);padding:16px 18px;background:var(--mist)}
.verified img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none}
.verified p{margin:0;font-size:.9rem;line-height:1.4;color:#3B4448}
.verified b{display:block;font-size:.95rem;color:var(--ink)}
.rates{width:100%;border-collapse:collapse;font-size:.98rem}
.rates th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.15em;color:var(--slate);font-weight:600;padding:0 0 10px;border-bottom:1px solid var(--ink)}
.rates td{padding:12px 14px 12px 0;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums}
.rates td:last-child{text-align:right;padding-right:0;font-weight:600}
.rates tr:hover td{background:var(--mist)}