/* worldsms.io — light, wide, product-led. One accent, one grey ramp, no
   gradients doing work that type and spacing should be doing. */

/* ─────────────────────────────────────────────────────────────── fonts ── */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/inter-400.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/inter-ext-400.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/inter-500.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/inter-ext-500.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/inter-600.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/inter-ext-600.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/inter-700.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/inter-ext-700.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JB Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/mono-400.woff2) format("woff2")}
@font-face{font-family:"JB Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/mono-500.woff2) format("woff2")}

/* ────────────────────────────────────────────────────────────── tokens ── */
:root{
  --paper:#fff;
  --tint:#F5F6FB;
  --ink:#0B1020;
  --ink-2:#333B52;
  --muted:#5A6379;
  --rule:#E4E7F0;
  --rule-2:#EEF0F6;
  --accent:#4338CA;
  --accent-2:#6366F1;
  --accent-wash:#F0F1FE;
  --ok:#0A6E4D;
  --ok-wash:#E8F6F0;

  --wrap:1400px;
  --pad:clamp(20px,5vw,64px);
  --r:14px;
  --r-s:9px;
  --shadow:0 1px 2px rgba(11,16,32,.04),0 12px 32px -12px rgba(11,16,32,.10);

  --f:Inter,ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --m:"JB Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ─────────────────────────────────────────────────────────────── base ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.65 var(--f);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#372BB0}
h1,h2,h3{margin:0;letter-spacing:-.022em;line-height:1.08;font-weight:700}
h1{font-size:clamp(31px,3.7vw,46px);line-height:1.1}
h2{font-size:clamp(23px,2.3vw,31px);line-height:1.16}
h3{font-size:17.5px;line-height:1.34;letter-spacing:-.012em;font-weight:600}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2.5px solid var(--accent-2);outline-offset:2px;border-radius:4px}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:99;background:var(--ink);color:#fff;padding:12px 18px;border-end-end-radius:var(--r-s)}
.skip:focus{inset-inline-start:0}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* ───────────────────────────────────────────────────────────── header ── */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--rule)}
.hdr__in{display:flex;align-items:center;gap:34px;height:68px}
.logo{display:inline-flex;align-items:center;gap:9px;color:var(--accent);text-decoration:none;flex:0 0 auto}
.logo__m{width:29px;height:29px}
.logo__t{font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.logo__t b{font-weight:700;color:var(--accent)}
.nav{flex:1 1 auto;min-width:0}
.nav__list{display:flex;gap:4px}
.nav__list a{display:block;padding:8px 12px;border-radius:var(--r-s);color:var(--ink-2);
  font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap}
.nav__list a:hover{background:var(--tint);color:var(--ink)}
.nav__list a[aria-current=page]{color:var(--accent);background:var(--accent-wash)}
.hdr__cta{display:flex;gap:10px;flex:0 0 auto}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 17px;border-radius:var(--r-s);border:1px solid transparent;
  font:600 15px/1 var(--f);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}
.btn--solid{background:var(--accent);color:#fff}
.btn--solid:hover{background:#372BB0;color:#fff}
.btn--ghost{color:var(--ink-2);background:transparent}
.btn--ghost:hover{background:var(--tint);color:var(--ink)}
.btn--line{border-color:var(--rule);color:var(--ink);background:var(--paper)}
.btn--line:hover{border-color:#C9CEDE;background:var(--tint);color:var(--ink)}
.btn--invert{background:#fff;color:var(--ink)}
.btn--invert:hover{background:#E8EAF4;color:var(--ink)}
.btn--lg{padding:14px 24px;font-size:16px;border-radius:11px}

.burger{display:none;width:42px;height:42px;border:1px solid var(--rule);background:var(--paper);
  border-radius:var(--r-s);cursor:pointer;padding:0;place-content:center;gap:5px}
.burger span{display:block;width:17px;height:1.8px;background:var(--ink);margin:0 auto;border-radius:2px;
  transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

.drawer{position:sticky;top:68px;z-index:49;background:var(--paper);border-bottom:1px solid var(--rule);box-shadow:var(--shadow)}
.drawer__in{padding-top:8px;padding-bottom:18px}
.drawer__i{display:block;padding:13px 0;border-bottom:1px solid var(--rule-2);text-decoration:none}
.drawer__l{display:block;font-weight:600;color:var(--ink);font-size:17px}
.drawer__d{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.drawer__cta{display:flex;gap:10px;margin-top:18px}
.drawer__cta .btn{flex:1}

/* ─────────────────────────────────────────────────────────────── hero ── */
.hero{position:relative;background:#060914;color:#fff;overflow:hidden}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:72% 50%}
/* Two ramps rather than one flat wash: near-solid ink under the headline so the
   type never has to fight the art, easing off to almost nothing on the right
   where the routing arcs are the whole point of the picture. */
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,9,20,.96) 0%,rgba(6,9,20,.92) 28%,rgba(6,9,20,.68) 50%,rgba(6,9,20,.50) 100%),
             linear-gradient(180deg,rgba(6,9,20,.45) 0%,transparent 32%)}
.hero__in{position:relative;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(26px,3.6vw,60px);align-items:center;
  padding:clamp(44px,4.6vw,64px) var(--pad) clamp(34px,3.6vw,48px)}
.eyebrow{font:600 11.5px/1 var(--f);letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.eyebrow--on-ink{color:#A5B0FF}
.hero h1{margin-bottom:17px;letter-spacing:-.028em}
.lead{font-size:clamp(16.5px,1.2vw,18.5px);line-height:1.58;color:var(--ink-2);max-width:660px}
.lead--on-ink{color:#BAC1DB}
.hero__cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
.btn--onink{border-color:rgba(255,255,255,.26);color:#fff;background:rgba(255,255,255,.04)}
.btn--onink:hover{border-color:rgba(255,255,255,.52);background:rgba(255,255,255,.11);color:#fff}

/* ── the sending console ──────────────────────────────────────────────────
   The background art says "global network"; nothing said "one call, tens of
   thousands of handsets, many countries, receipts coming back" — which is what
   is actually being sold. Coded rather than rendered: a screenshot of a product
   that has not shipped would be a fake, and this stays crisp at every width. */
.con{margin:0;position:relative}
/* The panel carries its own near-opaque ground, so the scrim behind it can stay
   light enough for the routing arcs to read. Darkening the whole right side to
   protect this text instead just erased the picture. */
.con__in{background:rgba(10,14,32,.92);border:1px solid rgba(255,255,255,.13);border-radius:14px;
  box-shadow:0 26px 64px -26px rgba(0,0,0,.8);overflow:hidden;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.con__bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 15px;border-bottom:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035)}
.con__file{font:400 12px/1 var(--m);color:#9AA4CC;letter-spacing:.02em}
.con__live{display:inline-flex;align-items:center;gap:7px;font:500 10.5px/1 var(--m);
  text-transform:uppercase;letter-spacing:.1em;color:#6EE7B7}
.con__live i{width:7px;height:7px;border-radius:50%;background:#34D399;
  box-shadow:0 0 0 0 rgba(52,211,153,.55);animation:conpulse 2.4s ease-out infinite}
@keyframes conpulse{70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}

.con__head{padding:17px 15px 15px}
.con__count{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.con__count strong{font:500 clamp(25px,2.2vw,32px)/1 var(--m);color:#fff;letter-spacing:-.03em}
.con__count span{font-size:12.5px;color:#9AA4CC}
.con__track{margin-top:12px;height:6px;border-radius:99px;background:rgba(255,255,255,.10);overflow:hidden}
.con__fill{height:100%;border-radius:99px;width:var(--p);
  background:linear-gradient(90deg,#4338CA,#7C6CFF);
  animation:congrow 1.5s cubic-bezier(.22,.75,.3,1) both}
@keyframes congrow{from{width:0}to{width:var(--p)}}

.con__rows{border-top:1px solid rgba(255,255,255,.09)}
.con__row{display:grid;grid-template-columns:20px minmax(0,1fr) auto auto;align-items:center;gap:11px;padding:8px 15px}
.con__row+.con__row{border-top:1px solid rgba(255,255,255,.055)}
.con__flag{width:20px;height:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.con__ctry{font-size:13px;color:#DCE1F5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.con__n{font:400 12.5px/1 var(--m);color:#fff}
.con__st{font:500 10px/1 var(--m);text-transform:uppercase;letter-spacing:.08em;
  padding:5px 7px;border-radius:5px;white-space:nowrap}
.con__st--ok{color:#6EE7B7;background:rgba(52,211,153,.14)}
.con__st--go{color:#A5B0FF;background:rgba(99,102,241,.2)}

.con__foot{display:flex;flex-wrap:wrap;gap:5px 16px;padding:11px 15px;
  border-top:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);
  font-size:11.5px;color:#9AA4CC}
.con__foot b{color:#fff;font-weight:600}
.con__cap{margin-top:8px;font-size:11px;color:#8B94B8;text-align:end}

.ticks{margin-top:30px;display:grid;gap:9px}
.ticks li{position:relative;padding-inline-start:26px;font-size:15px;color:var(--muted)}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;top:.52em;width:15px;height:9px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg) translateY(-2px)}
.ticks--lg li{font-size:15.5px;color:var(--ink-2)}

/* The proof row lives inside the hero band. As its own black section below the
   fold it cost 110px of height and read as a second, louder headline. */
.hero__stats{position:relative;border-top:1px solid rgba(255,255,255,.13);background:rgba(6,9,20,.5)}
.hero__stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,40px);
  padding-top:20px;padding-bottom:22px}
.stat__k{font:500 clamp(21px,1.8vw,26px)/1 var(--m);letter-spacing:-.02em;color:#fff}
.stat__v{margin-top:6px;font-size:13.5px;font-weight:600;color:#D7DBEC}
.stat__n{margin-top:2px;font-size:12.5px;line-height:1.45;color:#98A2C0}

/* ──────────────────────────────────────────────────────────── section ── */
.sec{padding:clamp(52px,5.4vw,80px) 0}
.sec--tint{background:var(--tint);border-block:1px solid var(--rule)}
.sec--ink{background:var(--ink);color:#fff}
.sec__head{max-width:800px;margin-bottom:clamp(28px,3vw,40px)}
.sec__head--row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.sec__head--mid{margin-inline-start:auto;margin-inline-end:auto;text-align:center}
.sec__head--mid .sec__sub{margin-inline-start:auto;margin-inline-end:auto;max-width:680px}
.sec__sub{margin-top:14px;font-size:16.5px;line-height:1.6;color:var(--muted)}
.sec__sub--on-ink{color:#AEB6D2}
.sec__foot{margin-top:26px;font-size:15.5px;line-height:1.6;color:var(--muted);max-width:780px}
.sec--ink .sec__foot{color:#AEB6D2}

/* ─────────────────────────────────────────────────────────── the wall ── */
.walls{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.wall{background:var(--paper);padding:28px 26px}
.wall__tag{display:inline-block;font:500 12px/1 var(--m);letter-spacing:.04em;
  color:var(--accent);background:var(--accent-wash);padding:6px 9px;border-radius:6px;margin-bottom:16px}
.wall h3{margin-bottom:9px}
.wall p{font-size:15px;line-height:1.6;color:var(--muted)}

/* ────────────────────────────────────────────────────────────── steps ── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(24px,2.6vw,40px)}
.step{display:flex;gap:18px;align-items:flex-start}
.step__n{flex:0 0 auto;font:500 13px/1 var(--m);color:var(--accent);background:var(--paper);
  border:1px solid var(--rule);border-radius:8px;padding:9px 10px}
.step__b h3{margin-bottom:8px}
.step__b p{font-size:15.5px;line-height:1.62;color:var(--muted)}

/* ────────────────────────────────────────────────────── rate highlights ── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:clamp(36px,4vw,52px)}
.card{border:1px solid var(--rule);border-radius:var(--r);padding:16px 16px 15px;background:var(--paper);
  transition:border-color .15s ease,transform .15s ease}
.card:hover{border-color:#C9CEDE;transform:translateY(-2px)}
.card__top{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.card__flag{width:22px;height:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(11,16,32,.09)}
.card__n{font-size:13.5px;font-weight:600;letter-spacing:0;color:var(--ink-2)}
.card__p{font:500 21px/1 var(--m);letter-spacing:-.03em;color:var(--ink)}
.card__was{margin-top:8px;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pill{display:inline-block;font:500 12px/1 var(--m);color:var(--ok);background:var(--ok-wash);
  padding:5px 7px;border-radius:5px;white-space:nowrap}
.pill--solid{color:#fff;background:var(--accent);text-transform:uppercase;letter-spacing:.06em}

/* ────────────────────────────────────────────────────────────── table ── */
.table{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.table__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 18px;border-bottom:1px solid var(--rule);background:var(--tint);flex-wrap:wrap}
.search{flex:1 1 340px}
.search input{width:100%;padding:11px 14px;border:1px solid var(--rule);border-radius:var(--r-s);
  font:400 15px/1.2 var(--f);color:var(--ink);background:var(--paper)}
.search input::placeholder{color:#79839A}
.search input:focus{outline:2.5px solid var(--accent-2);outline-offset:1px;border-color:transparent}
.table__count{font:500 13px/1 var(--m);color:var(--muted);white-space:nowrap}
.table__scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px}
thead th{position:sticky;top:0;background:var(--paper);text-align:start;font-size:12.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  padding:13px 18px;border-bottom:1px solid var(--rule);white-space:nowrap;z-index:1}
tbody th{text-align:start;font-weight:500;color:var(--ink);padding:12px 18px;white-space:nowrap}
tbody td{padding:12px 18px;white-space:nowrap;color:var(--ink-2)}
tbody tr+tr th,tbody tr+tr td{border-top:1px solid var(--rule-2)}
tbody tr:hover th,tbody tr:hover td{background:#FAFBFE}
.num{text-align:end;font-family:var(--m);font-size:14px;font-weight:400}
th.num{font-family:var(--f)}
.strong{color:var(--ink);font-weight:500}
.dim{color:#666F84}
.iso{font:400 11px/1 var(--m);color:#79839A;margin-inline-start:7px;letter-spacing:.05em}
tr.over{display:none}
.table.open tr.over{display:table-row}
.table__more{padding:16px 18px;border-top:1px solid var(--rule);background:var(--tint);text-align:center}
.table__note{font-size:14px;color:var(--muted)}

/* ------------------------------------------------------------------ packs -- */
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px;align-items:stretch}
.pack{position:relative;display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--r);padding:24px 22px 22px;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.pack:hover{border-color:#C2C8DC;transform:translateY(-3px);box-shadow:var(--shadow)}
/* One tier is deliberately louder than the others. A price list where every
   option looks identical hands the choosing back to the visitor. */
.pack--pop{border-color:var(--accent);border-width:1.5px;box-shadow:0 20px 46px -22px rgba(67,56,202,.5)}
.pack__tag{position:absolute;top:-11px;inset-inline-start:22px;background:var(--accent);color:#fff;
  font:600 10.5px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;
  padding:7px 10px;border-radius:6px}
.pack__n{font-size:13.5px;font-weight:600;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.pack__pay{margin-top:12px;font:500 40px/1 var(--m);letter-spacing:-.04em;color:var(--ink)}
.pack__get{margin-top:11px;font-size:14px;color:var(--muted);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pack__credit{font-weight:600;color:var(--ink)}
.pack__msgs{margin-top:14px;padding-top:14px;border-top:1px solid var(--rule-2);font-size:14px;color:var(--ink-2)}
.pack__msgs b{font-family:var(--m);font-weight:500}
.pack__b{margin-top:10px;font-size:13.5px;line-height:1.55;color:var(--muted);flex:1 0 auto}
.pack__cta{margin-top:18px;width:100%}
.packs__note{margin-top:20px;text-align:center;font-size:14.5px;color:var(--muted)}

/* ------------------------------------------------------------- calculator -- */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.calc__form{padding:clamp(24px,2.6vw,34px)}
.field+.field{margin-top:22px}
.field label{display:block;font:600 12px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px}
.field select,.field input{width:100%;padding:13px 14px;border:1px solid var(--rule);
  border-radius:var(--r-s);background:var(--paper);color:var(--ink);
  font:400 16px/1.2 var(--f);appearance:none;-webkit-appearance:none}
.field input{font-family:var(--m);font-weight:500;letter-spacing:-.01em}
.field select{padding-inline-end:38px;background-repeat:no-repeat;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 55%,calc(100% - 13px) 55%;background-size:6px 6px,6px 6px}
.field select:focus,.field input:focus{outline:2.5px solid var(--accent-2);outline-offset:1px;border-color:transparent}
.chips{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.chip{font:500 12.5px/1 var(--m);color:var(--ink-2);background:var(--paper);
  border:1px solid var(--rule);border-radius:7px;padding:8px 11px;cursor:pointer}
.chip:hover{border-color:#C2C8DC;background:var(--tint)}
.chip.is-on{background:var(--accent-wash);border-color:var(--accent);color:var(--accent)}
.calc__fine{margin-top:22px;font-size:13px;line-height:1.55;color:var(--muted)}

/* The answer is the loudest thing here, and it sits on ink so the eye lands on
   the saving rather than on the form that produced it. */
.calc__out{background:var(--ink);color:#fff;padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column}
.calc__lbl{display:block;font:600 11px/1 var(--f);letter-spacing:.13em;text-transform:uppercase;color:#98A2C0}
.calc__big{margin-top:9px;font:500 clamp(30px,3.2vw,42px)/1 var(--m);letter-spacing:-.04em;color:#fff}
.calc__big--ok{color:#5FE3AE}
.calc__unit{margin-top:7px;font-size:13px;color:#9AA4CC}
.calc__vs{margin:20px 0;padding:16px 0;border-block:1px solid rgba(255,255,255,.13)}
.calc__vrow{display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-size:14px;color:#AEB6D2}
.calc__vrow+.calc__vrow{margin-top:9px}
.calc__vrow b{font:400 14px/1 var(--m);color:#DCE1F5}
.calc__cta{margin-top:24px}

/* ------------------------------------------------------------------ bills -- */
.bills{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.bill{border:1px solid rgba(255,255,255,.13);border-radius:var(--r);padding:22px 20px;background:rgba(255,255,255,.03)}
.bill--us{border-color:var(--accent-2);background:rgba(99,102,241,.16);box-shadow:0 20px 48px -22px rgba(99,102,241,.55)}
.bill__n{font-size:14px;font-weight:600;color:#DCE1F5}
.bill__t{margin-top:12px;font:500 clamp(28px,2.7vw,36px)/1 var(--m);letter-spacing:-.04em;color:#fff}
.bill__u{margin-top:8px;font:400 13px/1 var(--m);color:#9AA4CC}
.bill__k{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.11);
  display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:#AEB6D2}
.bill__kyc--no{color:#6EE7B7}
/* Twilio genuinely is cheaper per unit, and the page says so rather than hiding
   it. But a card whose terms exclude this buyer should not read as the winning
   option just because its number is smallest — so the blockers are what carries
   the colour, and the card itself steps back. */
.bill--gated{opacity:.72}
.bill--gated .bill__t{color:#C3CAE6}
.bill--gated .bill__k{color:#F0BE72}

/* ------------------------------------------------------------------- edge -- */
.edge__in{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(28px,4vw,64px);align-items:center}
.edge{display:grid;gap:20px;margin-top:28px}
.edge__i{display:flex;gap:16px;align-items:flex-start}
.edge__k{flex:0 0 auto;font:500 12px/1 var(--m);color:var(--accent);
  background:var(--accent-wash);border-radius:7px;padding:9px}
.edge__i h3{margin-bottom:6px}
.edge__i p{font-size:14.5px;line-height:1.6;color:var(--muted)}
.edge__art img{width:100%;border-radius:16px}

/* ─────────────────────────────────────────────────────────────── api ── */
.api__in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,4vw,64px);align-items:center}
.api__copy .btn{margin-top:30px}
.code{background:#0F142B;border:1px solid #232A4A;border-radius:12px;overflow:hidden}
.code+.code{margin-top:14px}
.code__bar{display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid #232A4A;background:#131938}
.code__dot{width:9px;height:9px;border-radius:50%;background:#6C769C}
.code__dot--ok{background:#31C48D}
.code__f{font:500 12.5px/1 var(--m);color:#A6AFD2}
.code pre{margin:0;padding:18px;overflow-x:auto}
.code code{font:400 13px/1.72 var(--m);color:#DCE1F5;white-space:pre}
.c-c{color:#8A94BB}
.c-s{color:#8FE3B8}
.c-k{color:#A5B0FF}
.c-n{color:#F3C77F}
.code__note{padding:0 18px 16px;font-size:13.5px;line-height:1.55;color:#98A2C0}



/* ───────────────────────────────────────────────────────────────── faq ── */
.faq{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--paper);margin-top:clamp(28px,3vw,40px)}
.qa{border-bottom:1px solid var(--rule)}
.qa:last-child{border-bottom:0}
.qa summary{cursor:pointer;padding:20px 24px;font-size:17px;font-weight:600;color:var(--ink);
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:0 0 auto;width:10px;height:10px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease}
.qa[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.qa summary:hover{background:var(--tint)}
.qa__a{padding:0 24px 22px}
.qa__a p{font-size:16px;line-height:1.65;color:var(--muted);max-width:900px}

/* ─────────────────────────────────────────────────────────────── cta ── */
.cta{background:var(--tint);border-top:1px solid var(--rule);padding:clamp(52px,6vw,84px) 0}
.cta__in{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta h2{margin-bottom:12px}
.cta p{color:var(--muted);font-size:17px}
.cta__b{display:flex;gap:12px;flex-wrap:wrap}

/* ──────────────────────────────────────────────────────────── footer ── */
.ftr{background:var(--ink);color:#fff;padding:clamp(52px,6vw,80px) 0 34px}
.ftr__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(32px,5vw,80px);
  padding-bottom:42px;border-bottom:1px solid #262D4A}
.logo--ftr{color:#A5B0FF}
.logo--ftr .logo__t{color:#fff}
.logo--ftr .logo__t b{color:#A5B0FF}
.ftr__blurb{margin-top:20px;font-size:15px;line-height:1.65;color:#A6AFD2;max-width:520px}
.ftr__coins{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.ftr__coins li{font:500 12px/1 var(--m);color:#C3CAE6;border:1px solid #2C3455;border-radius:5px;padding:7px 9px}
.ftr__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:28px}
.ftr__h{font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#98A2C0;margin:0 0 14px}
.ftr__col li{margin-bottom:9px}
.ftr__col a{font-size:14.5px;color:#C9CFE6;text-decoration:none}
.ftr__col a:hover{color:#fff;text-decoration:underline}
/* Region links across the foot of every page. Chips rather than a fifth
   column: eight region names in a column would be taller than the four
   columns beside it. */
.ftr__regions{margin-top:32px;padding-top:24px;border-top:1px solid #232B4A;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 16px}
.ftr__rh{font:600 11.5px/1 var(--f);letter-spacing:.12em;text-transform:uppercase;color:#7E88AE}
.ftr__regions ul{display:flex;flex-wrap:wrap;gap:8px}
.ftr__regions a{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;
  border:1px solid #2C3455;border-radius:999px;font-size:13.5px;color:#C9CFE6;
  text-decoration:none}
.ftr__regions a:hover{border-color:var(--accent-2);color:#fff}
.ftr__regions i{font-style:normal;font:500 11px/1 var(--m);color:#7E88AE}

.ftr__legal{margin-top:28px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:13.5px;color:#98A2C0}
.ftr__note{max-width:620px}
.ftr__legal a{color:#A5B0FF}

/* ────────────────────────────────────────────────────────── responsive ── */
@media (max-width:1080px){
  .nav,.hdr__cta{display:none}
  .burger{display:grid}
  .hdr__in{justify-content:space-between;gap:16px}
  .hero__in{grid-template-columns:1fr;gap:34px}
  .con{max-width:520px}
  .api__in,.calc,.edge__in{grid-template-columns:1fr}
  .edge__art{max-width:520px;margin-inline:auto;order:-1}
  .ftr__top{grid-template-columns:1fr}
}
@media (max-width:860px){
  .hero__stats-in{grid-template-columns:repeat(2,1fr);gap:22px}
  .hero__bg img{object-position:78% 50%}
  .con__cap{text-align:start}
}
@media (max-width:760px){
  /* The headline's hard breaks are set for a wide measure. Left in place on a
     phone they fight the natural wrap and leave a ragged three-word line. */
  h1 br{display:none}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .hero__in{padding-top:40px;padding-bottom:48px}
  .cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .cta__in{flex-direction:column;align-items:flex-start}
  .qa summary{font-size:16px;padding:17px 18px}
  .qa__a{padding:0 18px 18px}
  .feat,.wall{padding:22px 20px}
}

/* --------------------------------------------------------- flag picker -- */
/* A native <select> cannot draw a flag, so the real control stays in the DOM
   (source of truth, and the fallback when this script never runs) and gets
   swapped for this the moment JS is alive. */
.pick{position:relative}
.pick__btn{display:flex;align-items:center;gap:11px;width:100%;padding:11px 14px;
  border:1px solid var(--rule);border-radius:var(--r-s);background:var(--paper);
  cursor:pointer;text-align:start;font:400 16px/1.25 var(--f);color:var(--ink)}
.pick__btn:hover{border-color:#C2C8DC}
.pick__btn[aria-expanded="true"]{border-color:var(--accent)}
.pick__flag{flex:0 0 auto;width:24px;height:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(11,16,32,.10)}
.pick__name{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick__rate{flex:0 0 auto;font:500 14px/1 var(--m);color:var(--accent)}
.pick__car{flex:0 0 auto;width:8px;height:8px;margin-inline-start:2px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px)}
.pick__btn[aria-expanded="true"] .pick__car{transform:rotate(-135deg) translate(-3px,-3px)}

.pick__pop{position:absolute;z-index:30;top:calc(100% + 6px);inset-inline-start:0;inset-inline-end:0;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  box-shadow:0 24px 56px -20px rgba(11,16,32,.32);overflow:hidden}
.pick__q{width:100%;padding:12px 14px;border:0;border-bottom:1px solid var(--rule);
  background:var(--tint);font:400 15px/1.2 var(--f);color:var(--ink)}
.pick__q:focus{outline:0}
.pick__list{max-height:288px;overflow-y:auto;overscroll-behavior:contain}
.pick__list li{display:flex;align-items:center;gap:11px;padding:9px 14px;cursor:pointer;font-size:15px}
.pick__list li+li{border-top:1px solid var(--rule-2)}
.pick__list li:hover,.pick__list li.is-cur{background:var(--accent-wash)}
.pick__list li[aria-selected="true"] span{font-weight:600}
.pick__list img{flex:0 0 auto;width:24px;height:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(11,16,32,.10)}
.pick__list span{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick__list b{flex:0 0 auto;font:500 13.5px/1 var(--m);color:var(--accent)}
.pick__none{padding:16px 14px;font-size:14px;color:var(--muted)}

/* the rate table reads far faster with a flag anchoring each row */
.rowflag{display:inline-block;vertical-align:-3px;width:22px;height:auto;
  border-radius:2px;box-shadow:0 0 0 1px rgba(11,16,32,.09);margin-inline-end:9px}

/* ------------------------------------------------------- account dialog -- */
/* A credential is being handed over, so the panel is built to feel like one:
   a dark brand rail carrying the promise, and a single lit action beside it. */
.auth{padding:0;border:0;background:transparent;overflow:visible;
  width:min(760px,calc(100vw - 26px));max-width:none}
.auth::backdrop{background:rgba(6,9,20,.66);animation:authFade .25s ease}
.auth[open]{animation:authIn .26s cubic-bezier(.2,.85,.3,1)}
@keyframes authIn{from{opacity:0;transform:translateY(10px) scale(.985)}}
@keyframes authFade{from{opacity:0}}

.auth__grid{display:grid;grid-template-columns:266px minmax(0,1fr);
  border-radius:18px;overflow:hidden;background:var(--paper);
  box-shadow:0 50px 110px -34px rgba(6,9,20,.72),0 0 0 1px rgba(11,16,32,.08)}

/* -- the rail ---------------------------------------------------------- */
.auth__rail{position:relative;background:var(--ink);color:#fff;
  padding:30px 26px;display:flex;flex-direction:column}
.auth__rail::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 70% at 15% 0%,rgba(99,102,241,.34),transparent 62%)}
.auth__mark,.auth__claim,.auth__has,.auth__foot{position:relative}
.auth__mark{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:600;letter-spacing:-.02em}
.auth__mark b{font-weight:700;color:#A5B0FF}
.auth__claim{margin-top:26px;font-size:21px;line-height:1.25;font-weight:600;letter-spacing:-.02em;
  text-wrap:balance}
.auth__claim em{font-style:italic;color:#A5B0FF}
.auth__has{margin-top:22px;display:grid;gap:10px}
.auth__has li{position:relative;padding-inline-start:22px;font-size:13.5px;line-height:1.4;color:#C3CAE6}
.auth__has li::before{content:"";position:absolute;inset-inline-start:0;top:.35em;width:11px;height:6px;
  border-left:1.8px solid #5FE3AE;border-bottom:1.8px solid #5FE3AE;transform:rotate(-45deg)}
.auth__foot{margin-top:auto;padding-top:26px;font-size:12.5px;line-height:1.55;color:#8B94B8}

/* -- the action -------------------------------------------------------- */
/* The rail sets the panel height, so the shorter sign-in step would otherwise
   sit against the top edge with a pool of white beneath it. */
.auth__main{position:relative;padding:clamp(26px,3vw,36px);
  display:flex;flex-direction:column;justify-content:center}
.auth__x{position:absolute;top:14px;inset-inline-end:14px;width:32px;height:32px;display:grid;place-content:center;
  border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.auth__x:hover{background:var(--tint);color:var(--ink)}

.auth__step{display:none}
.auth__step.is-on{display:block;animation:authStep .24s ease both}
@keyframes authStep{from{opacity:0;transform:translateY(6px)}}
.auth__h{font-size:23px;line-height:1.2;letter-spacing:-.022em;margin-bottom:11px}
.auth__p{font-size:14.5px;line-height:1.62;color:var(--muted);margin-bottom:24px}
.auth__wide{width:100%}
.auth__switch{display:block;width:100%;margin-top:14px;padding:6px;border:0;background:transparent;
  font:500 13.5px/1 var(--f);color:var(--muted);cursor:pointer;text-align:center}
.auth__switch:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* -- the credential plaque --------------------------------------------- */
.key{border-radius:13px;background:#0F142B;padding:16px 17px 15px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.key__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.key__lbl{font:600 10.5px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:#98A2C0}
.key__bits{font:400 10.5px/1 var(--m);color:#8B94B8;border:1px solid rgba(255,255,255,.16);
  border-radius:5px;padding:5px 7px}
.key__v{display:block;margin-top:13px;font:500 15px/1.55 var(--m);color:#fff;
  letter-spacing:.055em;word-break:normal;overflow-wrap:break-word;user-select:all}
.key__acts{display:flex;gap:8px;margin-top:15px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
.key__a{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid rgba(255,255,255,.2);border-radius:8px;background:rgba(255,255,255,.05);
  color:#DCE1F5;font:600 13px/1 var(--f);padding:10px 12px;cursor:pointer}
.key__a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34);color:#fff}
.key__a.is-done{color:#6EE7B7;border-color:rgba(110,231,183,.5);background:rgba(52,211,153,.14)}

.auth__chk{display:flex;gap:11px;align-items:flex-start;margin:20px 0 18px;
  font-size:14px;line-height:1.45;color:var(--ink-2);cursor:pointer}
.auth__chk input{flex:0 0 auto;margin-top:1px;width:17px;height:17px;accent-color:var(--accent)}

.auth__inp{width:100%;padding:14px 15px;border:1px solid var(--rule);border-radius:var(--r-s);
  font:500 14px/1.3 var(--m);color:var(--ink);background:var(--paper);letter-spacing:.03em}
.auth__inp::placeholder{color:#9AA2B8;letter-spacing:.03em}
.auth__inp:focus{outline:2.5px solid var(--accent-2);outline-offset:1px;border-color:transparent}
.auth__err{margin-top:10px;font-size:13.5px;line-height:1.5;color:#B3261E}
/* The error sits between the two when it is shown and is display:none when it
   is not, so the gap has to be declared on the general sibling, not on `+`. */
.auth__inp ~ .btn{margin-top:18px}
.auth__note{margin-top:20px;padding-top:16px;border-top:1px solid var(--rule);
  font-size:12.5px;line-height:1.6;color:var(--muted)}
.btn:disabled{opacity:.42;cursor:not-allowed}

@media (max-width:660px){
  .auth__grid{grid-template-columns:1fr}
  .auth__rail{padding:22px 22px 20px}
  .auth__claim{margin-top:16px;font-size:19px}
  /* The reassurance becomes a row of chips so the panel stays short enough to
     read without scrolling on a phone. */
  .auth__has{margin-top:16px;display:flex;flex-wrap:wrap;gap:7px}
  .auth__has li{padding:6px 9px;font-size:11.5px;border-radius:6px;
    background:rgba(255,255,255,.08);color:#C3CAE6}
  .auth__has li::before{display:none}
  .auth__foot{display:none}
  .key__acts{flex-direction:column}
  /* Narrow screens wrap it, so it wraps at the group separators (see the <wbr>
     in main.js) rather than mid-group, which would be far harder to check
     against a saved copy by eye. */
  .key__v{font-size:13.5px;letter-spacing:.03em}
}

/* ===================================================================== *
   INNER PAGES
   Everything below serves /pricing, /coverage, /docs, /faq, /payments,
   /support, /status, /changelog and the three policies. It adds components;
   it overrides nothing above, so the homepage renders byte-identically.
 * ===================================================================== */

/* ------------------------------------------------------------ page hero */
/* The same instrument as the homepage hero, at inner-page height: full-bleed
   ink band, art bled behind it, stat rail welded to the bottom edge. Built on
   its own class rather than reusing .hero because the homepage hero is a
   two-column layout with the console in the second column, and an inner page
   has no console — sharing the class would mean fighting that grid on eleven
   pages.

   Every background is composed with its subject in the RIGHT third and dark
   emptiness on the left, which is where the headline sits. */
.phero{position:relative;background:#060914;color:#fff;overflow:hidden}
.phero__bg{position:absolute;inset:0}
.phero__bg img{width:100%;height:100%;object-fit:cover;object-position:68% 50%}
/* Two ramps, like the homepage: near-solid under the type, easing off to the
   right so the art is still art rather than texture. */
.phero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,9,20,.97) 0%,rgba(6,9,20,.93) 30%,rgba(6,9,20,.66) 56%,rgba(6,9,20,.42) 100%),
             linear-gradient(180deg,rgba(6,9,20,.5) 0%,transparent 34%)}
.phero__in{position:relative;padding:clamp(48px,5vw,78px) var(--pad) clamp(38px,3.8vw,54px)}
.phero--tall .phero__in{padding-top:clamp(60px,6vw,96px)}
.phero h1{font:700 clamp(31px,3.7vw,47px)/1.1 var(--f);letter-spacing:-.028em;color:#fff;
  margin-bottom:17px;max-width:19ch}
.phero .lead{max-width:680px}
.phero__meta{margin-top:24px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:14px;color:#BAC1DB}
.phero__base{font:500 13.5px/1 var(--m);padding:9px 12px;border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-s);background:rgba(255,255,255,.06);color:#DCE1F5}
.phero__meta .pill{background:rgba(255,255,255,.09);color:#C7CCFF}
.phero__meta .pill--solid{background:var(--accent);color:#fff}

/* The fact rail. Full-bleed like the homepage's stat strip, sitting on the
   bottom edge of the band so the page opens on evidence rather than on a
   paragraph. */
.phero__facts{position:relative;border-top:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.028)}
/* One row, however many facts there are: auto-flow column beats a fixed
   template that would leave a gap on a three-fact page. The cells carry no
   outer padding of their own — the .wrap provides it — so the first value
   lines up with the headline above it at every width. */
.phero__facts-in{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.phero__f{padding:20px 0 21px;position:relative}
.phero__f+.phero__f{padding-inline-start:26px}
.phero__f:not(:last-child){padding-inline-end:26px}
.phero__f+.phero__f::before{content:"";position:absolute;inset-inline-start:0;top:16px;bottom:16px;width:1px;
  background:rgba(255,255,255,.12)}
.phero__f b{display:block;font:700 clamp(21px,1.9vw,26px)/1.1 var(--f);color:#fff;
  letter-spacing:-.025em;margin-bottom:5px}
.phero__f span{font-size:13.5px;line-height:1.45;color:#9AA4CC}

/* Prose still needs a measure, but the page around it uses the full width:
   the constraint belongs on the paragraph, not on the container. */
.wrap--read{max-width:none}

/* --------------------------------------------------------------- rules */
.rules{margin-top:clamp(28px,3vw,40px);display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.rules--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.rules--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.rule{background:var(--paper);padding:24px 24px 26px}
.rule__n{font:700 12px/1 var(--m);color:var(--accent);background:var(--accent-wash);
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;margin-bottom:16px}
.rule h3{font:600 17px/1.3 var(--f);color:var(--ink);margin-bottom:9px;letter-spacing:-.012em}
.rule p{font-size:14.5px;line-height:1.62;color:var(--muted)}
.rule--warn .rule__n{color:#9A3412;background:#FEF3E2}

/* ------------------------------------------------------ spec tables */
.spec{margin-top:clamp(28px,3vw,40px)}
.spec__t{width:100%;border-collapse:collapse;border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden;background:var(--paper)}
.spec__t th,.spec__t td{padding:14px 18px;text-align:start;font-size:14.5px;
  border-bottom:1px solid var(--rule-2);vertical-align:top;line-height:1.55}
.spec__t thead th{font:600 11.5px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);background:var(--tint);border-bottom:1px solid var(--rule)}
.spec__t tbody th{font-weight:600;color:var(--ink);white-space:nowrap}
.spec__t tr:last-child th,.spec__t tr:last-child td{border-bottom:0}
.spec__t td.num,.spec__t th.num{text-align:end;font-family:var(--m);font-size:13.5px}
.spec__t code{font:500 12.8px/1 var(--m);background:var(--tint);padding:2px 6px;
  border-radius:5px;color:var(--ink-2)}
.spec__t--flat tbody th{width:170px}
.spec__notes{margin-top:22px;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.note2{padding:20px 20px 21px;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--paper)}
.note2 h3{font:600 15px/1.35 var(--f);color:var(--ink);margin-bottom:8px}
.note2 p{font-size:14px;line-height:1.62;color:var(--muted)}
.note2 code{font:500 12.5px/1 var(--m);background:var(--tint);padding:2px 5px;border-radius:4px}

/* ------------------------------------------------------------ callout */
.callout{margin-top:26px;display:flex;gap:16px;padding:20px 22px;border-radius:var(--r);
  background:#FEF6EC;border:1px solid #F6DFC0}
.callout__i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font:700 14px/1 var(--f);background:#EA9A3E;color:#fff}
.callout h3{font:600 15.5px/1.35 var(--f);color:#7C3E06;margin-bottom:6px}
.callout p{font-size:14.5px;line-height:1.62;color:#7C4A15}
.callout a{color:#7C3E06;text-decoration:underline}
.callout--soft{background:var(--accent-wash);border-color:#D9DBFB}
.callout--soft .callout__i{background:var(--accent)}
.callout--soft h3{color:var(--ink)}
.callout--soft p{color:var(--ink-2)}
.callout--soft a{color:var(--accent)}

/* -------------------------------------------------------- price panel */
.price2{padding:26px 26px 28px;border-radius:var(--r);background:var(--paper);
  border:1px solid var(--rule);box-shadow:var(--shadow)}
.price2__k{font:700 40px/1 var(--f);letter-spacing:-.03em;color:var(--ink)}
.price2__u{margin-top:7px;font-size:14px;color:var(--muted)}
.price2 .ticks{margin-top:22px}
.price2__n{margin-top:20px;padding-top:16px;border-top:1px solid var(--rule);
  font-size:13px;line-height:1.6;color:var(--muted)}
.edge__art--pad{display:grid;align-content:center}
.ticks--grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px 30px}

/* Marks in a rate/coverage row. A letter, not a checkmark: the column means
   "sender ID" or "replies", and a bare tick makes the reader look back up. */
.tick{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;
  font:600 11.5px/1 var(--m);color:var(--ok);background:var(--ok-wash)}
.tick--tw{color:var(--accent);background:var(--accent-wash)}
.tick--warn{color:#9A3412;background:#FEF3E2}

/* ------------------------------------------------------ two-way regions */
.twmap{margin-top:clamp(28px,3vw,40px);display:grid;gap:26px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.twmap__h{display:flex;align-items:center;gap:9px;font:600 12px/1 var(--f);
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  padding-bottom:12px;border-bottom:1px solid var(--rule);margin-bottom:14px}
.twmap__c{font-family:var(--m);font-size:11.5px;color:var(--accent);
  background:var(--accent-wash);padding:3px 7px;border-radius:5px}
.twmap__l{display:grid;gap:9px}
.twmap__l li{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--ink-2)}
.twmap__l img{border-radius:2px;flex:none}

/* ---------------------------------------------------------- throughput */
.tp{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden}
.tp__r{background:var(--paper);display:grid;grid-template-columns:auto 1fr auto;
  align-items:baseline;gap:10px;padding:15px 20px}
.tp__n{font:700 17px/1 var(--m);color:var(--ink);letter-spacing:-.02em}
.tp__d{font-size:13.5px;color:var(--muted)}
.tp__t{font:500 14px/1 var(--f);color:var(--accent)}

/* --------------------------------------------------------- doc layout */
.doc{padding:clamp(40px,4.4vw,64px) 0 clamp(52px,5.4vw,80px)}
.doc__in{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(32px,4vw,72px);
  align-items:start}
.doc__nav{position:sticky;top:88px}
.doc__navh{font:600 11.5px/1 var(--f);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px}
.doc__nav ul{display:grid;gap:2px;border-inline-start:1px solid var(--rule)}
.doc__nav a{display:block;padding:7px 0 7px 15px;margin-inline-start:-1px;font-size:14px;
  color:var(--muted);border-inline-start:1px solid transparent;text-decoration:none}
.doc__nav a:hover{color:var(--accent);border-inline-start-color:var(--accent-2)}
.doc__main{min-width:0}
.doc__s{scroll-margin-top:96px}
.doc__s+.doc__s{margin-top:clamp(40px,4vw,58px);padding-top:clamp(36px,3.6vw,52px);
  border-top:1px solid var(--rule)}
.doc__s h2{font:700 clamp(23px,2.2vw,29px)/1.2 var(--f);letter-spacing:-.022em;
  color:var(--ink);margin-bottom:16px}
.doc__s h3{font:600 17px/1.3 var(--f);color:var(--ink);margin:30px 0 12px;letter-spacing:-.012em}
.doc__s>p{font-size:15.5px;line-height:1.68;color:var(--ink-2);max-width:82ch}
.doc__s>p+p{margin-top:14px}
.doc__s .code,.doc__s .spec__t,.doc__s .api__code{margin-top:20px}
.doc__s code{font:500 13px/1 var(--m)}
.doc__ol{margin-top:18px;display:grid;gap:11px;counter-reset:d;max-width:70ch}
.doc__ol li{position:relative;padding-inline-start:32px;font-size:15px;line-height:1.65;color:var(--ink-2)}
.doc__ol li::before{counter-increment:d;content:counter(d);position:absolute;inset-inline-start:0;top:1px;
  width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
  font:600 11.5px/1 var(--m);color:var(--accent);background:var(--accent-wash)}
.doc__fine{margin-top:16px;font-size:13.5px;line-height:1.62;color:var(--muted);max-width:70ch}

/* An endpoint line: method and path, reading as one object. */
.ep{display:flex;align-items:center;gap:11px;margin-bottom:18px;padding:11px 14px;
  border:1px solid var(--rule);border-radius:var(--r-s);background:var(--tint)}
.ep__m{font:700 11px/1 var(--m);letter-spacing:.08em;padding:5px 8px;border-radius:5px;
  background:var(--ink);color:#fff}
.ep__m--post{background:var(--accent)}
.ep code{font:600 14px/1 var(--m);color:var(--ink)}

/* ---------------------------------------------------------- coin grid */
.coins{margin-top:clamp(28px,3vw,40px);display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.coin{background:var(--paper);padding:22px 22px 24px}
.coin__top{display:flex;align-items:center;gap:13px;margin-bottom:13px}
.coin__i{flex:none}
.coin__n{font:600 16.5px/1.2 var(--f);color:var(--ink);letter-spacing:-.012em}
.coin__net{margin-top:3px;font-size:13px;color:var(--muted)}
.coin__d{font-size:14px;line-height:1.6;color:var(--muted)}

/* ------------------------------------------------------------- flow */
.flow{margin-top:clamp(28px,3vw,40px);display:grid;gap:0;max-width:820px}
.flow__s{display:grid;grid-template-columns:auto 1fr;gap:20px;position:relative;
  padding-bottom:26px}
/* The rail is drawn by the step, not under it, so the last one has no tail
   hanging off the end of the list. */
.flow__s:not(:last-child)::before{content:"";position:absolute;inset-inline-start:17px;top:38px;bottom:0;
  width:1px;background:var(--rule)}
.flow__n{flex:none;width:35px;height:35px;border-radius:50%;display:grid;place-items:center;
  font:700 14px/1 var(--m);color:var(--paper);background:var(--ink);position:relative;z-index:1}
.flow__s--ok .flow__n{background:var(--ok)}
.flow__b h3{font:600 17px/1.3 var(--f);color:var(--ink);margin-bottom:7px;padding-top:6px}
.flow__b p{font-size:14.8px;line-height:1.65;color:var(--muted)}

/* ---------------------------------------------------------- support */
.sup{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(28px,3.4vw,56px);
  align-items:start}
.sup__f{padding:clamp(24px,2.6vw,32px);border:1px solid var(--rule);border-radius:var(--r);
  background:var(--paper);box-shadow:var(--shadow)}
.sup__f .field textarea{width:100%;padding:13px 14px;border:1px solid var(--rule);
  border-radius:var(--r-s);background:var(--paper);color:var(--ink);font:400 15px/1.6 var(--f);
  resize:vertical}
.sup__f .field textarea:focus{outline:2.5px solid var(--accent-2);outline-offset:1px;
  border-color:transparent}
.sup__f .btn{margin-top:24px}
.sup__fine{margin-top:18px;font-size:12.5px;line-height:1.6;color:var(--muted)}
.opt{font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);font-size:11.5px}
.hint2{margin-top:8px;font-size:13px;line-height:1.58;color:var(--muted)}
.hint2 code{font:500 12px/1 var(--m);background:var(--tint);padding:2px 5px;border-radius:4px}
/* Reachable to a bot, announced to nobody, never painted. */
.trap{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.alert{margin-bottom:22px;padding:15px 18px;border-radius:var(--r-s);
  background:#FDECEC;border:1px solid #F5C6C6;color:#8A2020;font-size:14.5px;line-height:1.6}
.alert p+p{margin-top:6px}
.done{padding:clamp(28px,3vw,40px);border:1px solid var(--rule);border-radius:var(--r);
  background:var(--paper);box-shadow:var(--shadow);text-align:center}
.done__i{width:46px;height:46px;margin:0 auto 18px;border-radius:50%;display:grid;
  place-items:center;font-size:22px;color:var(--ok);background:var(--ok-wash)}
.done h2{font:700 25px/1.2 var(--f);letter-spacing:-.02em;color:var(--ink);margin-bottom:10px}
.done p{font-size:15px;color:var(--muted)}
.cpx{margin:16px auto 20px;display:inline-block;padding:13px 20px;border-radius:var(--r-s);
  background:var(--tint);border:1px solid var(--rule)}
.cpx code{font:600 19px/1 var(--m);letter-spacing:.06em;color:var(--ink)}
.done__n{max-width:52ch;margin:0 auto 22px;font-size:14px;line-height:1.65}

.sup__side{display:grid;gap:18px}
.sidecard{padding:22px 22px 24px;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--paper)}
.sidecard h2{font:600 15px/1.3 var(--f);color:var(--ink);margin-bottom:14px;letter-spacing:-.01em}
.sidelist{display:grid;gap:11px}
.sidelist li{font-size:13.8px;line-height:1.55;color:var(--muted)}
.sidelist a{color:var(--accent);font-weight:500}
.sidelist--no li{padding-inline-start:18px;position:relative}
.sidelist--no li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:9px;height:1.5px;
  background:#C2687F;border-radius:1px}
.sidelist--no b{color:var(--ink-2);font-weight:600}
.sidecard--warn{background:#FEF6EC;border-color:#F6DFC0}
.sidecard--warn h2{color:#7C3E06}
.sidecard--warn p{font-size:13.8px;line-height:1.6;color:#7C4A15}

/* ----------------------------------------------------------- status */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.dot--ok{background:var(--ok)}
.dot--idle{background:#9AA3B8}
.dot--degraded{background:#E0A020}
.dot--down{background:#C23B3B}
.dot--unknown{background:#9AA3B8}
.dot--none{background:var(--rule)}
.badge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;
  font:500 13px/1 var(--f);border:1px solid var(--rule);background:var(--paper);color:var(--ink-2)}
.badge--ok{color:var(--ok);background:var(--ok-wash);border-color:#C9E7DA}
.badge--degraded{color:#8A5A08;background:#FDF3DF;border-color:#F0DEB0}
.badge--down{color:#8A2020;background:#FDECEC;border-color:#F5C6C6}
.comp{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.comp__r{display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:20px 24px;border-bottom:1px solid var(--rule-2)}
.comp__r:last-child{border-bottom:0}
.comp__n{font:600 16px/1.3 var(--f);color:var(--ink);letter-spacing:-.012em}
.comp__d{margin-top:4px;font-size:13.8px;line-height:1.55;color:var(--muted);max-width:62ch}
.comp__s{display:flex;align-items:center;gap:14px;flex:none}
.comp__ms{font:500 12.5px/1 var(--m);color:var(--muted)}
/* 90 days in one row. Fixed-width days would overflow a phone, so they share
   the width instead and simply get thinner. */
.strip{margin-top:clamp(24px,2.6vw,34px);display:flex;gap:3px;align-items:stretch;height:38px}
.strip__d{flex:1 1 0;min-width:2px;border-radius:2px;background:var(--rule)}
.strip__d--ok{background:#57B894}
.strip__d--idle{background:#B9C0D0}
.strip__d--unknown{background:#B9C0D0}
.strip__d--degraded{background:#E0A020}
.strip__d--down{background:#C23B3B}
.strip__k{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;color:var(--muted)}
.strip__k span{display:inline-flex;align-items:center;gap:7px}

/* -------------------------------------------------------- changelog */
.tl{display:grid;gap:0}
.tl__e{display:grid;grid-template-columns:160px minmax(0,1fr);gap:30px;position:relative;
  padding:0 0 clamp(34px,3.4vw,46px)}
.tl__e:not(:last-child)::before{content:"";position:absolute;inset-inline-start:160px;top:10px;bottom:0;
  width:1px;background:var(--rule);transform:translateX(-15px)}
.tl__m{display:grid;gap:9px;justify-items:start;position:relative}
.tl__d{font:600 14px/1 var(--m);color:var(--ink)}
.chip2{font:500 11px/1 var(--f);letter-spacing:.08em;text-transform:uppercase;
  padding:5px 8px;border-radius:5px;color:var(--muted);background:var(--tint);
  border:1px solid var(--rule)}
.chip2--pricing{color:var(--ok);background:var(--ok-wash);border-color:#C9E7DA}
.chip2--platform{color:var(--accent);background:var(--accent-wash);border-color:#D9DBFB}
.tl__b h2{font:700 21px/1.25 var(--f);letter-spacing:-.02em;color:var(--ink);margin-bottom:14px}
.tl__l{display:grid;gap:11px;max-width:68ch}
.tl__l li{position:relative;padding-inline-start:20px;font-size:15px;line-height:1.65;color:var(--ink-2)}
.tl__l li::before{content:"";position:absolute;inset-inline-start:0;top:.66em;width:7px;height:7px;
  border-radius:50%;background:var(--rule);border:1px solid #CDD3E2}
.tl__e--now .tl__l li::before{background:var(--accent-wash);border-color:var(--accent-2)}

/* ------------------------------------------------------------ prose */
.prose h2{margin-bottom:14px}
.prose__l{margin-top:16px;display:grid;gap:13px;max-width:70ch}
.prose__l li{position:relative;padding-inline-start:20px;font-size:15px;line-height:1.66;color:var(--ink-2)}
.prose__l li::before{content:"";position:absolute;inset-inline-start:0;top:.68em;width:7px;height:7px;
  border-radius:2px;background:var(--accent-wash);border:1px solid #D9DBFB}
.prose__l b{color:var(--ink);font-weight:600}
.prose__n{margin-top:18px;font-size:13.8px;line-height:1.65;color:var(--muted);max-width:70ch}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.prose .btn{text-decoration:none}

/* Two columns that mean opposite things, so they are coloured as opposites. */
.pp{margin-top:22px;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.pp__c{padding:22px 22px 24px;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--paper)}
.pp__c h3{font:600 14px/1 var(--f);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ok);margin-bottom:15px}
.pp__c ul{display:grid;gap:9px}
.pp__c li{position:relative;padding-inline-start:20px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.pp__c li::before{content:"";position:absolute;inset-inline-start:0;top:.5em;width:11px;height:6px;
  border-left:1.8px solid var(--ok);border-bottom:1.8px solid var(--ok);
  transform:rotate(-45deg)}
.pp__c--no{background:var(--tint)}
.pp__c--no h3{color:#A03050}
.pp__c--no li::before{width:11px;height:1.8px;border:0;background:#C2687F;transform:none;top:.72em}

.mono{font-family:var(--m)}

/* ===================================================================== *
   COUNTRY PAGES  (/sms/<destination>)
 * ===================================================================== */

/* Hero with a second column. The flag is the fastest possible confirmation
   that you landed on the right country — faster than reading the headline. */
.phero__in--split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,3.6vw,64px);align-items:center}
.phero__aside{justify-self:end;width:100%;max-width:400px}
.cflag{padding:26px 28px 28px;border-radius:var(--r);background:rgba(10,14,32,.86);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 26px 64px -26px rgba(0,0,0,.8);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cflag img{width:96px;height:auto;border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.18);
  display:block;margin-bottom:20px}
.cflag__k{display:block;font:700 clamp(30px,3vw,40px)/1 var(--f);color:#fff;letter-spacing:-.03em}
.cflag__u{display:block;margin-top:7px;font-size:13.5px;color:#9AA4CC}
.cflag__s{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.13);
  font-size:13.5px;line-height:1.55;color:#BAC1DB}
.cflag__s b{color:#6EE7B7;font-weight:700}
/* A region has no flag of its own, so it borrows the eight cheapest routes in
   it — recognisable at a glance, and it changes with the rate card. */
.rflags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.rflags img{width:34px;height:auto;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.cflag--region .cflag__k{font-size:clamp(24px,2.4vw,32px)}

/* Breadcrumb. Present for the crawler, but sized so a reader can use it. */
.crumb{margin-bottom:18px}
.crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px}
.crumb li{display:flex;align-items:center;gap:8px;color:#8A93B8}
.crumb li+li::before{content:"/";color:#4B5478}
.crumb a{color:#BAC1DB;text-decoration:none}
.crumb a:hover{color:#fff;text-decoration:underline}
.crumb [aria-current]{color:#fff}

/* The four price cells. */
.cprice{margin-top:clamp(28px,3vw,40px);display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.cprice__c{background:var(--paper);padding:24px 24px 26px}
.cprice__c h3{font:600 11.5px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px}
.cprice__k{font:700 clamp(26px,2.4vw,33px)/1 var(--f);letter-spacing:-.03em;color:var(--ink)}
.cprice__k--dim{color:var(--muted)}
.cprice__n{margin-top:9px;font-size:13px;line-height:1.5;color:var(--muted)}
.cprice__c--us{background:var(--accent-wash)}
.cprice__c--us h3{color:var(--accent)}
.cprice__c--save .cprice__k{color:var(--ok)}
.cprice__c--save h3{color:var(--ok)}

/* Body + rail. */
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(28px,3.4vw,60px);
  align-items:start}
.cgrid__s{display:grid;gap:18px;position:sticky;top:88px}
.ctext{font-size:15.5px;line-height:1.68;color:var(--ink-2);max-width:76ch}
.ctext+.ctext{margin-top:14px}
.ctext code{font:500 13px/1 var(--m);background:var(--tint);padding:2px 6px;border-radius:5px}
.csub{font:600 17px/1.3 var(--f);color:var(--ink);margin:32px 0 12px;letter-spacing:-.012em}
.cgrid .callout{max-width:76ch}

.glance{width:100%;border-collapse:collapse}
.glance th,.glance td{padding:9px 0;font-size:14px;text-align:start;
  border-bottom:1px solid var(--rule-2);vertical-align:top}
.glance tr:last-child th,.glance tr:last-child td{border-bottom:0}
.glance th{font-weight:500;color:var(--muted);white-space:nowrap;padding-inline-end:14px}
.glance td{color:var(--ink);font-weight:600;text-align:end}
.cbuy{font:700 26px/1.1 var(--f);color:var(--ink);letter-spacing:-.025em;margin-bottom:10px}
.cbuy b{color:var(--accent)}
.sidecard .btn{margin-top:16px}

/* A whole card that is a link, without the underline a bare <a> would give
   its heading. */
.card--link{display:block;text-decoration:none;color:inherit}
.card--link:hover{border-color:var(--accent-2)}
.card--link:hover .card__n{color:var(--accent)}

/* Destination names are links wherever they appear — rate card, coverage list,
   two-way lists, homepage tiles. 236 indigo underlined rows would read as a
   page of links rather than a price list, so they inherit the text colour and
   only announce themselves on hover and on focus. */
.table th a,.twmap__l a{color:inherit;text-decoration:none}
.table th a:hover,.twmap__l a:hover{color:var(--accent);text-decoration:underline;
  text-underline-offset:3px}
.table th a:focus-visible,.twmap__l a:focus-visible{outline:2.5px solid var(--accent-2);
  outline-offset:2px;border-radius:3px}
.twmap__l a{display:flex;align-items:center;gap:9px}

@media (max-width:1080px){
  .phero__in--split{grid-template-columns:1fr}
  .phero__aside{justify-self:stretch;max-width:none}
  .cflag{display:grid;grid-template-columns:auto 1fr;gap:0 22px;align-items:center}
  .cflag img{margin-bottom:0}
  .cflag--region{grid-template-columns:1fr}
  .rflags{margin-bottom:16px}
  .cflag__s{grid-column:1/-1}
  .cgrid{grid-template-columns:1fr}
  .cgrid__s{position:static;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
}
@media (max-width:560px){
  .cflag{grid-template-columns:1fr;gap:16px}
  .cflag img{width:72px}
}

/* ------------------------------------------------- using the full width */
/* The page is 1400px wide; a single column of questions across it would set
   lines nobody can track back to the left margin. Two columns use the width
   AND keep the measure — the answer is the thing that has to stay readable. */
/* Multi-column flow, not a grid. A grid puts the two cards of a row on a shared
   baseline, so opening one question stretched the card beside it into a tall
   empty box. Columns let each card keep its own height and the flow simply
   continues underneath. */
.faq--2{columns:2;column-gap:22px;border:0;background:none}
.faq--2 .qa{border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);
  margin-bottom:12px;break-inside:avoid}
.faq--2 .qa summary{padding:17px 20px;font-size:16px}
.faq--2 .qa__a{padding:0 20px 18px}

/* Long policy lists get two tracks for the same reason. */
.prose__l--2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:13px 34px;max-width:none}
.doc__s--wide>p{max-width:78ch}
.tl__l--2{grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:11px 34px;max-width:none}

@media (max-width:980px){
  .faq--2{columns:1}
}
@media (max-width:1080px){
  .doc__in{grid-template-columns:1fr;gap:30px}
  /* Sticky is a desktop affordance; in one column it would sit over the text. */
  .doc__nav{position:static}
  .doc__nav ul{display:flex;flex-wrap:wrap;gap:6px;border-inline-start:0}
  .doc__nav a{padding:8px 12px;border:1px solid var(--rule);border-radius:999px;
    margin-inline-start:0;font-size:13.5px}
  .doc__nav a:hover{border-color:var(--accent-2)}
  .sup{grid-template-columns:1fr}
}
@media (max-width:860px){
  /* Two per row, and the rule between them has to follow the wrap: the cell
     that begins a row must lose the divider and the indent, or its value sits
     a few pixels left of the headline and gets clipped at the viewport edge. */
  .phero__facts-in{grid-auto-flow:row;grid-template-columns:repeat(2,1fr)}
  .phero__f:nth-child(2n+1){padding-inline-start:0}
  .phero__f:nth-child(2n+1)::before{display:none}
  .phero__f:nth-child(n+3){padding-top:18px;border-top:1px solid rgba(255,255,255,.10)}
  .phero h1{max-width:none}
}
@media (max-width:520px){
  .phero__facts-in{grid-template-columns:1fr}
  /* `.phero__f+.phero__f` outranks a bare `.phero__f`, so the reset has to be
     written on the adjacent selector too or every second value stays indented
     by the divider gutter that no longer exists. */
  .phero__f,.phero__f+.phero__f{padding-inline-start:0;padding-inline-end:0}
  .phero__f::before{display:none}
  .phero__f+.phero__f{padding-top:16px;border-top:1px solid rgba(255,255,255,.10)}
}
@media (max-width:760px){
  .tl__e{grid-template-columns:1fr;gap:14px}
  .tl__e:not(:last-child)::before{display:none}
  .tl__m{flex-direction:row;display:flex;align-items:center;gap:12px}
  .comp__r{flex-direction:column;align-items:flex-start;gap:14px}
  .pgh__facts{gap:14px 22px}
  .pgh__facts li{flex:1 1 40%}
}
@media (max-width:560px){
  .flow__s{gap:14px}
  .strip{height:30px;gap:2px}
  .price2__k{font-size:34px}
}

/* ===================================================================== *
   OFF-SCREEN SECTIONS
   Sections below the fold have their layout skipped until they are
   approached — the biggest single lever once styleLayout dominates, and
   these pages run 400 to 3300 nodes. Planned with /root/fleet/cv.sh.

   Two rules this fleet learned the hard way:
   1. `contain-intrinsic-size` sizes the CONTENT box; padding and borders
      are added on top. These are the content heights cvplan reported, NOT
      getBoundingClientRect() — passing the border-box height inflates every
      section by exactly its padding.
   2. A section whose child overflows its frame is excluded, because paint
      containment clips the overflow. That is why the rate table and the FAQ
      are absent from this list.

   Safe here specifically: this site has no IntersectionObserver and no
   .reveal, which is what made the same change regress TBT on buybtcvps.
   `auto` lets the browser replace the estimate with the measured height
   after first render, so a page whose text runs longer self-corrects.
 * ===================================================================== */
.cv{content-visibility:auto}

/* country pages */
#price.cv{contain-intrinsic-size:auto 854px}
#sender.cv{contain-intrinsic-size:auto 1384px}
#nearby.cv{contain-intrinsic-size:auto 925px}

/* /pricing — #calc also exists on the homepage at 930px; one estimate serves
   both, and `auto` corrects the 26px difference after first render. */
#model.cv{contain-intrinsic-size:auto 1261px}
#packs.cv{contain-intrinsic-size:auto 1592px}
#calc.cv{contain-intrinsic-size:auto 916px}

/* homepage */
#offers.cv{contain-intrinsic-size:auto 1566px}
#compare.cv{contain-intrinsic-size:auto 1279px}
#why.cv{contain-intrinsic-size:auto 734px}
#how.cv{contain-intrinsic-size:auto 619px}

/* /coverage */
#sender-id.cv{contain-intrinsic-size:auto 1419px}
#two-way.cv{contain-intrinsic-size:auto 2268px}
#throughput.cv{contain-intrinsic-size:auto 759px}
#regimes.cv{contain-intrinsic-size:auto 1223px}

/* /payments and /status */
#credit.cv{contain-intrinsic-size:auto 1529px}
#history.cv{contain-intrinsic-size:auto 296px}

/* Same guard as the dashboard: an author `display:` overrides [hidden]. */
[hidden]{display:none!important}

/* ─────────────────────────────────────────────── the language switcher ── */
/* Styles markup that DOES NOT EXIST on a one-language build: i18n_switcher()
   returns the empty string until WS_LANGS holds a second code. That is exactly
   why this block was missing for so long — the switcher was written, wired into
   the header, the drawer and the footer, and rendered nowhere, so nothing ever
   pointed at the absent rules. Written to the same tokens as .btn--line and the
   footer's region pills, so it reads as part of the chrome rather than as a
   widget bolted on. */
.lang-sw{position:relative;flex:0 0 auto}
.lang-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;
  border:1px solid var(--rule);background:var(--paper);border-radius:var(--r-s);
  font:500 14.5px/1 var(--f);color:var(--ink-2);cursor:pointer;white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.lang-btn:hover{border-color:#C9CEDE;background:var(--tint);color:var(--ink)}
.lang-btn[aria-expanded=true]{border-color:var(--accent-2);background:var(--accent-wash);color:var(--ink)}
.lang-btn-n{max-width:11ch;overflow:hidden;text-overflow:ellipsis}
.lang-chev{width:6px;height:6px;flex:0 0 auto;opacity:.5;
  border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .15s ease}
.lang-btn[aria-expanded=true] .lang-chev{transform:translateY(1px) rotate(-135deg)}

/* Right-aligned: it is the last control in .hdr__cta, so a menu opening left
   would run off a 1400px wrap on a narrow desktop. */
.lang-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:60;min-width:196px;
  padding:6px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  box-shadow:var(--shadow);max-height:min(62vh,430px);overflow-y:auto;overscroll-behavior:contain}
.lang-opt{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-s);
  font-size:14.5px;color:var(--ink-2);text-decoration:none}
.lang-opt:hover,.lang-opt.is-cur{background:var(--tint);color:var(--ink)}
.lang-opt.is-on{background:var(--accent-wash);color:var(--accent);font-weight:600}
.lang-opt-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The plain list, used where a popup would be the worse answer: stacked in the
   mobile drawer, and as a row of pills on the dark footer. */
.lang-list{display:flex;flex-wrap:wrap;gap:8px}
.lang-list-a{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;
  border:1px solid var(--rule);border-radius:999px;font-size:13.5px;color:var(--ink-2);
  text-decoration:none}
.lang-list-a:hover{border-color:#C9CEDE;background:var(--tint);color:var(--ink)}
.lang-list-a.is-on{border-color:var(--accent-2);background:var(--accent-wash);color:var(--accent);font-weight:600}

.drawer__lang{margin-top:20px;padding-top:18px;border-top:1px solid var(--rule-2)}
.lang-list--dw{margin-top:10px}

/* On the footer the ramp inverts: the same shapes, the dark palette the region
   pills already use two rows above. */
.ftr__lang{margin-top:24px;padding-top:22px;border-top:1px solid #232B4A;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 16px}
.lang-list--ft .lang-list-a{border-color:#2C3455;color:#C9CFE6}
.lang-list--ft .lang-list-a:hover{border-color:var(--accent-2);background:transparent;color:#fff}
.lang-list--ft .lang-list-a.is-on{border-color:var(--accent-2);background:transparent;color:#fff;font-weight:600}

/* >>> language dock — shared with app.css, keep byte-identical >>> */
/* ────────────────────────────────────── the language dock (bottom right) ── */
/* A <details>/<summary>, styled. The pair is a disclosure in HTML itself, so
   opening, closing, Enter, Space and the state a screen reader hears are all
   native — the script beside it only adds Escape, the arrows and click-outside.

   OPAQUE, deliberately. A translucent plate over the #060914 hero computes to a
   grey that is in no token here, and it shifts luminance at every section
   boundary — which, on a fixed element, means it shifts on every scroll. One
   flat --paper reads on the dark hero, on white, on --tint and on the --ink
   footer with no conditional at all.

   ⚠ THE PANEL IS position:absolute, AND THAT IS THE SECOND ATTEMPT. The first
   made <details> a column-reverse flex so the panel would rise above the token
   in normal flow. The browser computes flex-direction:column-reverse on the
   element and then lays <summary> and ::details-content out in DOM order
   anyway — measured, not guessed: summary 581..625, panel 625..815, i.e. the
   panel opening downwards off the bottom of a phone. Absolute positioning
   against the fixed .lp is boring and works in every engine.

   The consequence is that ::details-content must carry NO transform and NO
   translate: either would make it the containing block for the panel, and the
   panel would be positioned against the pseudo-element instead of against .lp.
   The opening therefore fades, and does not rise. */
.lp{
  /* This block is copied verbatim into app.css. It therefore may not
     use a token private to either stylesheet: they spell the same
     colours differently (--ink-2 / --ink2) and, worse, give --r two
     different values. Each alias resolves through whichever sheet it
     lands in; the three below are pinned, because one dock is one dock. */
  --lp-ink-2:var(--ink-2,var(--ink2,#333B52));
  --lp-rule-2:var(--rule-2,var(--rule2,#EEF0F6));
  --lp-accent-2:var(--accent-2,var(--accent2,#6366F1));
  --lp-wash:var(--accent-wash,var(--wash,#F0F1FE));
  --lp-shadow:0 1px 2px rgba(11,16,32,.04),0 12px 32px -12px rgba(11,16,32,.10);
  --lp-r:14px;
  --lp-r-s:9px;

  position:fixed;
  /* 45 sits under the public header's 50. The dashboard has no such
     header; app.css sets --lp-z:35 so the dock stays above the sticky
     bar (30) and under the off-canvas drawer (40) — when the two
     overlap on a phone, navigation has to win. */
  z-index:var(--lp-z,45);
  inset-block-end:max(18px,env(safe-area-inset-bottom));
  inset-inline-end:max(18px,env(safe-area-inset-right));
  max-inline-size:calc(100vw - 36px);
  font-family:inherit;
  pointer-events:none}                             /* the empty box catches nothing… */
.lp__t,.lp__p{pointer-events:auto}                 /* …only the token and the panel */

/* The flag pill, and the two-letter square for a language whose flag
   this site does not carry. Used by every form of the switcher. */
.lang-fl{width:20px;height:15px;border-radius:2px;display:block;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(11,16,32,.08)}
.lang-cc{font:600 11px/1 var(--m);letter-spacing:.06em}

/* ── the token ──────────────────────────────────────────────────────────── */
.lp__t{position:relative;display:flex;align-items:center;gap:9px;
  min-block-size:44px;padding-inline:13px;
  background:var(--paper);color:var(--lp-ink-2);
  border:1px solid var(--rule);border-radius:999px;box-shadow:var(--lp-shadow);
  font:500 14.5px/1.2 var(--f);cursor:pointer;list-style:none;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.lp__t::-webkit-details-marker{display:none}
.lp__t::marker{content:""}
/* Grows the touch target to 50px without moving a pixel of the drawing. */
.lp__t::before{content:"";position:absolute;inset:-3px -6px}
.lp__t:hover{border-color:var(--lp-accent-2);color:var(--ink)}
.lp[open] .lp__t{background:var(--lp-wash);border-color:var(--lp-accent-2);color:var(--ink)}
.lp__t .lang-fl{margin-inline-start:-2px}

.lp__nm{white-space:nowrap;max-inline-size:14ch;overflow:hidden;text-overflow:ellipsis}
.lp__ab{display:none;font:600 13px/1 var(--m);letter-spacing:.07em}
.lp__sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* Physical borders on purpose: up/down is not a reading direction, so this one
   must NOT mirror in RTL the way an inline-end border would. */
.lp__caret{flex:none;inline-size:6px;block-size:6px;opacity:.55;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(-135deg);
  transition:transform .18s ease}
.lp[open] .lp__caret{transform:translateY(1px) rotate(45deg);opacity:1;color:var(--accent)}

/* ── the panel ──────────────────────────────────────────────────────────── */
.lp__p{position:absolute;inset-block-end:calc(100% + 10px);inset-inline-end:0;
  inline-size:min(17.5rem,calc(100vw - 36px));
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--lp-r);
  box-shadow:var(--lp-shadow);overflow:hidden}
.lp__h{margin:0;padding:12px 14px 10px;border-block-end:1px solid var(--lp-rule-2);
  font:600 11px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* The cap is on the LIST, not on the panel, so the heading stays pinned while
   twenty languages scroll under it. The vh line is a fallback: an unsupported
   svh would invalidate the whole declaration and the list would never scroll. */
.lp__list{margin:0;padding:5px;list-style:none;
  max-block-size:min(52vh,25rem);
  max-block-size:min(52svh,25rem);
  overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;
  scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
.lp__list a{display:flex;align-items:center;gap:10px;min-block-size:44px;
  padding-inline:9px;border-radius:var(--lp-r-s);color:var(--lp-ink-2);
  text-decoration:none;font-size:14.5px;scroll-margin-block:6px}
.lp__list a:hover{background:var(--tint);color:var(--ink)}
.lp__list a[aria-current]{background:var(--lp-wash);color:var(--ink);font-weight:600}
/* A positive outline-offset is clipped by a scrolling container: overflow-y
   auto makes the inline axis compute to auto too, which clips on all four. */
.lp__list a:focus-visible{outline-offset:-2px}

/* padding then a negative margin of the same 3px: overflow:hidden clips to the
   padding box, and those 3px are what save the matras of हिन्दी and the tone
   marks of ไทย without changing a single line height. */
.lp__n{flex:1;min-inline-size:0;text-align:start;line-height:1.35;
  padding-block:3px;margin-block:-3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* The code sits right, in the mono this site already uses for prices and dial
   codes — a language read as one more piece of technical data. */
.lp__code{flex:none;margin-inline-start:auto;padding:.16rem .36rem;
  border:1px solid var(--rule);border-radius:6px;background:var(--tint);
  font:600 10.5px/1.35 var(--m);letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);unicode-bidi:isolate}
.lp__list a:hover .lp__code{background:var(--paper);color:var(--lp-ink-2)}
.lp__list a[aria-current] .lp__code{border-color:var(--lp-accent-2);
  background:var(--paper);color:var(--accent)}

/* ── opening ────────────────────────────────────────────────────────────── */
/* @starting-style on ::details-content ITSELF, which is the documented form.
   Chrome only, and that is fine: everywhere else the panel simply appears.
   Opacity ONLY — see the note at the top about why a translate here would
   re-parent the absolutely positioned panel. */
.lp::details-content{opacity:0;
  transition:opacity .18s ease,content-visibility .18s allow-discrete}
.lp[open]::details-content{opacity:1}
@starting-style{.lp[open]::details-content{opacity:0}}


/* ── RTL ────────────────────────────────────────────────────────────────── */
/* Position, alignment, padding and margin are all logical, so the dock moves to
   the bottom LEFT — the end of the line in that direction — with no rule of its
   own. Only two script corrections remain. */
[dir=rtl] .lp__h{letter-spacing:.02em;text-transform:none}
[dir=rtl] .lp__ab{letter-spacing:0}

/* ── narrow ─────────────────────────────────────────────────────────────── */
@media (max-width:560px){
  .lp{inset-block-end:max(14px,env(safe-area-inset-bottom));
      inset-inline-end:max(14px,env(safe-area-inset-right));
      max-inline-size:calc(100vw - 28px)}
  .lp__nm{display:none}
  .lp__ab{display:block}                       /* the token falls back to "EN ⌄" */
  .lp__p{inline-size:min(17.5rem,calc(100vw - 28px))}
  .lp__list{max-block-size:min(46vh,22rem);max-block-size:min(46svh,22rem)}
  .lp__list a{min-block-size:48px}             /* thumb */
}

@media (prefers-reduced-motion:reduce){
  .lp__t,.lp__caret{transition-duration:1ms}
  .lp::details-content,.lp[open]::details-content{
    transition:opacity 1ms,content-visibility 1ms allow-discrete}
}

@media print{.lp{display:none}}
/* <<< language dock <<< */

/* ── the footer keeps its own space ─────────────────────────────────────── */
/* 44 (token) + 18 (inset) + 12 (air) = 74. The alternative was to bury the dock
   under the footer on a z-index, and that hides a FOCUSABLE control: the focus
   ring gets painted underneath it and you tab through links nobody can see. A
   band of empty dark at the very end of the page costs nothing and means the
   dock never covers a link — including "full rate table", which sits exactly
   under it on a wide screen. */
.ftr{padding-block-end:calc(34px + 74px + env(safe-area-inset-bottom))}
@media (max-width:560px){
  .ftr{padding-block-end:calc(34px + 70px + env(safe-area-inset-bottom))}
}

/* ───────────────────────────────────────────────────────────────────────── *
 *  Right to left
 *
 *  Everything above is written in logical properties, so the whole page turns
 *  round on its own. What is left here is the short list of things that have
 *  no logical form: a background-position, a transform, a physical safe-area
 *  keyword. Each one is a drawing instruction, not a layout one.
 *
 *  Deliberately NOT here: the check marks, the carets and the chevrons. They
 *  are two borders of an empty box turned 45 degrees, and a check mark drawn
 *  the other way round is not a mirrored check mark, it is a wrong one. Up and
 *  down is not a reading direction.
 * ───────────────────────────────────────────────────────────────────────── */

/* The select's arrow is painted by two gradients placed from the left edge. */
[dir=rtl] .field select{background-position:19px 55%,13px 55%}

/* env() keywords are physical: the notch on the right in a left-to-right page
   is the one on the left once the page is mirrored. */
[dir=rtl] .lp{inset-inline-end:max(18px,env(safe-area-inset-left))}

/* A vertical rule nudged 15px back along the reading direction. */
[dir=rtl] .tl__e:not(:last-child)::before{transform:translateX(15px)}

/* ⚠ LETTER-SPACING IS NOT A MATTER OF TASTE IN THESE SCRIPTS.

   Arabic is cursive: its letters join, and the shape a letter takes depends on
   whether it has a neighbour. Adding space between them does not loosen the
   word, it CUTS it — the joins are drawn and then pulled apart, so a heading
   reads as a row of separate glyphs. Devanagari has the same problem for a
   different reason: the matras hang off the letter they belong to and the
   shirorekha runs along the top of the word, and both break at the seams.

   Eighty-seven declarations across these two files set letter-spacing, most of
   them the tight negative tracking this face wants. Overriding them one by one
   would be a list that rots; the blanket rule is the honest one, because there
   is no element of this site on which spacing Arabic or Devanagari is right. */
[dir=rtl] *,:lang(hi) *{letter-spacing:normal !important}

/* The system faces that actually carry these scripts, named before the generic
   fallback so a machine that has both does not pick the one with no Arabic. */
[dir=rtl] body{font-family:"Segoe UI",-apple-system,"Noto Naskh Arabic",
  "Geeza Pro","Noto Sans Arabic",Tahoma,var(--f)}
:lang(hi) body{font-family:"Noto Sans Devanagari","Nirmala UI",
  "Kohinoor Devanagari",var(--f)}

/* A number, a price, a dial code or an ISO code inside Arabic prose is a
   left-to-right run in a right-to-left paragraph. <bdi> isolates it; these
   classes are the ones that hold such a run without being marked up. */
[dir=rtl] .num,[dir=rtl] .iso,[dir=rtl] .mono,[dir=rtl] code,[dir=rtl] kbd,
[dir=rtl] pre,[dir=rtl] samp{direction:ltr;unicode-bidi:isolate}
[dir=rtl] .num,[dir=rtl] td.num,[dir=rtl] th.num{text-align:end}
[dir=rtl] pre,[dir=rtl] pre code{text-align:left}