@font-face {
  font-family: Onest;
  src: url('/fonts/Onest.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Palette, gradients and corner sizes measured in the supplied SberPrime page.
   Typography deliberately uses Onest throughout, as requested. */
:root {
  --paper: #053242;
  --surface: #1c4f5f;
  --surface-deep: #082d3a;
  --ink: #fff;
  --muted: #b9cbd0;
  --line: #ffffff29;
  --green: #7ee17f;
  --accent: #01d256;
  --glass: #ffffff19;
  --gradient: linear-gradient(135deg, #a1d609 0%, #1dac20 23%, #10aa56 69%, #119fea 100%);
  --gradient-hover: linear-gradient(90deg, #019cd9 0%, #01be01 100%);
  --card-radius: 20px;
  --tile-radius: 32px;
  --button-radius: 12px;
  font-family: Onest, Arial, sans-serif;
  font-synthesis: none;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: 112px;
}
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body { min-width: 320px; background: var(--paper); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea, kbd, code { font-family: inherit; }
button, input, select, textarea { font-size: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; color: inherit; }
button:disabled { cursor: default; }
a, button, input, select { touch-action: manipulation; }
:focus-visible { outline: 3px solid #93de6b; outline-offset: 5px; }
input[type=checkbox] { accent-color: #17bc69; }
[hidden] { display: none !important; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
h1 { font-size: 44px; letter-spacing: -1.5px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
em { font-style: normal; }
strong { font-weight: 600; }
s { color: #b8cbd0; font-weight: 400; text-decoration-thickness: 1px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; clip: rect(0,0,0,0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 24px; z-index: 100; padding: 14px 20px; background: #0c8250; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.container { width: 100%; max-width: 1232px; margin: 0 auto; padding: 0 32px; }
.site-header { position: sticky; top: 0; z-index: 25; background: #053242ee; backdrop-filter: blur(20px); }
.header-inner { max-width: 1232px; margin: auto; padding: 0 32px; min-height: 84px; display: flex; align-items: center; gap: 30px; border-bottom: 1px solid #ffffff14; }
.wordmark { display: inline-flex; align-items: baseline; color: #fff; font-weight: 650; font-size: 26px; line-height: 1.2; letter-spacing: -1.5px; white-space: nowrap; }
.wordmark-code { color: #88e877; }
.wordmark-code>span { color: #65ddb1; font-weight: 450; }
.logo-dot { color: #65ddb1; margin-left: 1px; }
.main-nav { display: flex; flex: 1; align-items: center; justify-content: flex-end; gap: 21px; font-size: 13px; color: #c9d8dc; }
.main-nav>a { padding: 27px 0; white-space: nowrap; transition: color .2s; }
.main-nav>a:hover, .main-nav>a[aria-current] { color: #fff; }
.main-nav>a[aria-current] { text-decoration: underline; text-decoration-color: #73da84; text-underline-offset: 9px; text-decoration-thickness: 2px; }
.header-promo { background: #ffffff19; padding: 12px 16px; border-radius: 12px; white-space: nowrap; font-size: 13px; }
.header-promo:hover { background: #ffffff29; }
.header-promo>span { font-size: 18px; color: #9ae486; margin-right: 5px; }
.mobile-menu-button { display: none; }
.disabled-nav { opacity: .55; }
.disabled-nav small { font-size: 10px; margin-left: 4px; }

/* First screen: teal-to-green light, white type and a glass card illustration. */
.hero { position: relative; isolation: isolate; min-height: 570px; padding: 65px 0 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.hero::before { content: ''; position: absolute; z-index: -2; width: 100vw; height: calc(100% + 140px); top: -140px; left: 50%; transform: translateX(-50%); background: linear-gradient(200deg, #389f71 0%, #053242 43%); opacity: .7; pointer-events: none; }
.hero-copy { position: relative; z-index: 2; padding-bottom: 12px; }
.eyebrow { color: #9dd8c6; font-size: 11px; line-height: 1.5; font-weight: 500; letter-spacing: .11em; margin-bottom: 18px; text-transform: uppercase; }
.hero .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 23px; }
.live-dot { background: #8be379; width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 0 5px #7be77b12; }
.hero h1 { font-size: 44px; line-height: 1.1; font-weight: 600; letter-spacing: -1.5px; }
.hero h1 em { color: inherit; }
.hero-description { max-width: 445px; margin-top: 24px; color: #d0dfe2; font-size: 18px; line-height: 1.5; }
.hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 32px; max-width: 365px; }
.button { min-height: 54px; padding: 16px 24px; border: 0; border-radius: var(--button-radius); background: var(--gradient); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 22px; font-size: 16px; line-height: 1.25; font-weight: 600; transition: box-shadow .2s, transform .2s, background .2s; }
.button:hover { background: var(--gradient-hover); box-shadow: 0 8px 32px #04c76c1a; }
.button:active { transform: translateY(1px); background: linear-gradient(90deg, #018ac1 0%, #00ad00 100%); }
.button.secondary { background: #ffffff19; color: #fff; border: 1px solid transparent; }
.button.secondary:hover { background: #ffffff29; box-shadow: none; }
.hero-actions .button { min-height: 62px; font-size: 17px; }
.hero-actions .secondary { min-height: 50px; background: transparent; font-size: 14px; font-weight: 400; color: #c5d9df; }
.hero-actions .secondary:hover { background: #ffffff0a; }
.hero-proof { display: flex; align-items: center; gap: 13px; margin-top: 26px; color: #9dbfc7; font-size: 11px; line-height: 1.6; }
.hero-proof strong { color: #dcebe9; font-weight: 500; }
.proof-icon { display: grid; place-items: center; border: 1px solid #ffffff29; border-radius: 50%; width: 34px; height: 34px; font-size: 23px; color: #8be8a6; }
.proof-rule { width: 1px; height: 26px; background: var(--line); margin: 0 7px; }
.hero-art { width: 100%; height: 470px; position: relative; isolation: isolate; pointer-events: none; }
.hero-art-aura { position: absolute; inset: 10px -5px 0; border-radius: 50%; background: radial-gradient(ellipse, #67e1563d, #04b98412 48%, transparent 70%); filter: blur(12px); }
.hero-orb { position: absolute; width: 360px; height: 360px; top: 50px; left: 90px; border-radius: 45% 55% 55% 45% / 55% 40% 60% 45%; transform: rotate(-24deg); background: radial-gradient(circle at 26% 19%, #b8ff8e 0%, #60dd57 18%, #18a979 48%, #068980 65%, #097e77 78%); box-shadow: inset 10px 7px 14px #d5ffb67a, inset -10px -17px 28px #004354aa, 0 20px 70px #031f2833; }
.hero-orb::before { content: ''; position: absolute; inset: 16px; border-radius: inherit; border: 1px solid #b5ff9c38; background: radial-gradient(ellipse at 50% 80%, transparent 45%, #b4fc5e26 67%, transparent 68%); }
.orb-core { position: absolute; inset: 45px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #1ea35c, #12a975 55%, #2bdb6d 75%, #79e557); box-shadow: inset 15px 15px 35px #156e5f9c, 0 -5px 30px #a1ff6866; filter: blur(.4px); }
.orb-orbit { width: 510px; height: 190px; border: 1px solid #9bebc559; border-radius: 50%; position: absolute; top: 180px; left: 14px; transform: rotate(-27deg); }
.orbit-back { z-index: -1; border-width: 2px; opacity: .55; }
.orbit-front { border-top-color: transparent; border-right-color: transparent; z-index: 4; opacity: .8; }
.hero-bank-card { position: absolute; width: 274px; height: 174px; padding: 22px; border: 1px solid #caffcd90; border-radius: 20px; box-shadow: 0 20px 40px #002d3e55, inset 0 1px 1px #fff9; color: #fff; backdrop-filter: blur(10px); }
.bank-card-back { z-index: 1; top: 75px; left: 165px; transform: rotate(17deg); background: linear-gradient(120deg, #85de49c9, #21a47bc9 42%, #2197b4e6); }
.bank-card-front { z-index: 3; top: 194px; left: 65px; transform: rotate(-13deg); background: linear-gradient(115deg, #9fe257d9 0%, #24b472ee 35%, #169ba5ed 100%); }
.mini-card-logo { display: block; font-size: 22px; font-weight: 600; letter-spacing: -1px; }
.bank-card-back .mini-card-logo { font-size: 32px; color: #fff; }
.card-digits { position: absolute; left: 22px; bottom: 23px; font-size: 14px; letter-spacing: 1px; color: #e4ffe9; }
.card-caption { position: absolute; right: 20px; bottom: 18px; font-size: 6px; letter-spacing: .13em; opacity: .6; }
.card-chip { position: absolute; top: 65px; left: 23px; width: 34px; height: 26px; border: 1px solid #fff6; border-radius: 6px; background: linear-gradient(0deg, transparent 47%, #9dd9bd 48%, #9dd9bd 51%, transparent 52%), linear-gradient(90deg, #d6e8ca66 31%, #9dd9bd 32%, #9dd9bd 35%, #e6f6c655 36%, #e6f6c655 65%, #9dd9bd 66%, #9dd9bd 69%, #ecf7ce66 70%); }
.card-contactless { position: absolute; top: 66px; right: 22px; font-size: 19px; letter-spacing: -4px; opacity: .75; transform: rotate(-6deg); }
.floating-code { position: absolute; z-index: 5; top: 320px; right: 12px; display: flex; align-items: center; gap: 14px; padding: 16px 23px 16px 16px; border-radius: 20px; transform: rotate(8deg); background: linear-gradient(120deg, #fff, #e7ffe9); box-shadow: 0 18px 35px #00293655, inset 0 -3px 1px #ceedd7; color: #10544b; }
.floating-code-symbol { border-radius: 50%; width: 43px; height: 43px; background: linear-gradient(135deg, #a1d609, #0fb56a 75%); color: #fff; font-size: 24px; display: grid; place-items: center; }
.floating-code strong { display: block; font-size: 29px; line-height: 1.1; letter-spacing: -1px; }
.floating-code small { font-size: 10px; color: #4d8271; }
.floating-globe { width: 70px; height: 70px; background: linear-gradient(130deg, #96ed4d, #39cc8a); box-shadow: inset 2px 3px 3px #d3ff9eaa, 0 15px 25px #023b4d66; border: 1px solid #cbffb280; border-radius: 22px; color: #fbffe9; position: absolute; left: 27px; top: 82px; transform: rotate(-14deg); z-index: 5; }
.floating-globe svg { width: 100%; height: 100%; padding: 8px; }
.art-spark { position: absolute; color: #aeec72; z-index: 6; font-size: 43px; line-height: 1; }
.spark-one { top: 31px; right: 20px; transform: rotate(16deg); }
.spark-two { left: 15px; bottom: 57px; font-size: 21px; color: #6fe8b6; }

/* Shared sections and cards. */
.divider { display: none; }
.section { margin: 72px 0; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 30px; }
.section-heading .eyebrow { margin-bottom: 12px; }
.section-heading p.muted { margin-top: 16px; font-size: 15px; line-height: 1.55; max-width: 720px; }
.text-link { font-size: 15px; color: #91e2a9; white-space: nowrap; }
.text-link:hover { color: #c3f4be; }
.featured-section { margin-top: 28px; }
.featured-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.featured-card { border-radius: 20px; padding: 28px 32px 24px; background: #1c4f5f; position: relative; overflow: hidden; border: 1px solid #ffffff14; }
.featured-card:first-child { background: linear-gradient(125deg, #256956, #1c4f5f 80%); }
.featured-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brand-name { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.brand-name h3 { font-size: 22px; font-weight: 500; }
.brand-name small { display: block; color: #a8c5ce; font-size: 10px; line-height: 1.5; font-weight: 400; margin-top: 3px; }
.brand-icon { width: 42px; height: 42px; flex-shrink: 0; display: inline-flex; justify-content: center; align-items: center; border-radius: 12px; background: #fff; border: 1px solid #ffffff45; overflow: hidden; padding: 6px; }
.brand-icon img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 3px; }
.brand-icon-unverified { background: #e1eaed; }
.pill { display: inline-flex; align-items: center; background: #ffffff19; border-radius: 8px; padding: 5px 9px; color: #d6e6e8; font-size: 11px; line-height: 1.4; }
.pill.green { color: #b9f4b5; background: #54d58421; }
.featured-top .pill { font-size: 10px; }
.featured-offer { font-size: 38px; font-weight: 600; letter-spacing: -1px; line-height: 1.2; color: #c4f790; margin-top: 24px; }
.featured-offer>span { color: #b2cbd0; font-size: 13px; margin-left: 12px; font-weight: 400; letter-spacing: 0; }
.featured-card:nth-child(2) .featured-offer { font-size: 32px; }
.mini-specs { display: grid; gap: 13px; margin: 24px 0 21px; font-size: 14px; }
.mini-specs>div { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.mini-specs dt { color: #adc6ce; }
.mini-specs dd { margin: 0; }
.price>span { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.price strong { font-weight: 600; white-space: nowrap; }
.featured-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid #ffffff1a; }
.featured-bottom>a { font-size: 14px; }
.featured-bottom>a:hover { color: #b6f9bb; }
.promo-code { min-height: 34px; border: 1px dashed #a6c6a580; border-radius: 8px; padding: 8px 10px; background: #052f3c55; color: #d3f6d0; display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12px; font-weight: 600; white-space: nowrap; transition: background .2s; }
.promo-code:hover { background: #41817080; }
.promo-code>span+span { color: #8acbaa; font-size: 15px; }
.offer-caption { color: #89adb7; font-size: 12px; line-height: 1.6; margin-top: 16px; }
.route-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.route-grid>a { position: relative; border-radius: 32px; padding: 24px; min-height: 228px; overflow: hidden; transition: transform .2s; isolation: isolate; }
.route-grid>a:hover { transform: translateY(-4px); }
.route-grid>a:nth-child(1) { background: radial-gradient(circle at 25% 10%, #03be25, #3aa107); }
.route-grid>a:nth-child(2) { background: radial-gradient(circle at 25% 10%, #7104ba, #640d93 98%); }
.route-grid>a:nth-child(3) { background: radial-gradient(circle at 25% 10%, #fe6486, #f54d71); }
.route-grid>a:nth-child(4) { background: radial-gradient(circle at 25% 10%, #320aad, #210566); }
.route-grid>a:after { content: ''; position: absolute; width: 190px; height: 190px; right: -95px; bottom: -86px; border: 26px solid #ffffff12; border-radius: 50%; z-index: -1; }
.route-number { color: #ffffffb3; font-size: 14px; }
.route-grid h3 { margin-top: 34px; font-size: 22px; font-weight: 500; }
.route-grid p { color: #ffffffe0; font-size: 13px; line-height: 1.5; max-width: 180px; margin-top: 12px; }
.route-grid>a>span:last-child { position: absolute; top: 20px; right: 22px; font-size: 23px; color: #ffffffb3; }
.service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.service-card { display: flex; align-items: center; gap: 16px; padding: 25px; background: #ffffff19; border: 1px solid transparent; border-radius: 20px; transition: background .2s, border-color .2s; }
.service-card:hover { background: #ffffff25; border-color: #7bd7aa66; }
.service-card h3 { font-size: 20px; font-weight: 500; }
.service-card p { font-size: 12px; color: #adc6ce; margin-top: 7px; }
.service-arrow { color: #a1d7c5; margin-left: auto; font-size: 20px; }

/* Catalogue controls and dense comparison tables. */
.catalogue-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; }
.catalogue-head .section-heading { flex: 1; }
.count-label { border-radius: 8px; background: #ffffff14; padding: 6px 10px; white-space: nowrap; font-size: 12px; color: #c5dce2; margin-bottom: 31px; }
.toolbar { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.catalogue-searches { display: grid; grid-template-columns: 1fr 1.35fr; gap: 16px; width: 100%; flex-basis: 100%; }
.search-field { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; min-height: 56px; padding: 13px 17px; background: #ffffff19; border: 1px solid transparent; border-radius: 12px; }
.search-field:focus-within { background: #ffffff20; border-color: #78dbac; }
.search-field>span:first-child { color: #acc9d0; font-size: 28px; line-height: 1; }
.search-field input { width: 100%; min-width: 0; border: 0; background: transparent; color: #fff; font-size: 15px; outline: none; }
.search-field input::placeholder { color: #a9c6cd; opacity: 1; }
.search-field input:focus-visible { outline: none; }
.search-field kbd { border-radius: 5px; background: #ffffff12; padding: 2px 5px; font-size: 10px; color: #adc7ce; white-space: nowrap; }
.catalogue-searches kbd { display: none; }
.select-label select { max-width: 100%; min-height: 45px; padding: 10px 35px 10px 14px; border: 1px solid #ffffff1f; border-radius: 12px; background-color: #1c4f5f; color: #e1eff0; font-size: 13px; }
.select-label option { background: #1c4f5f; color: #fff; }
.toggle { display: inline-flex; align-items: center; gap: 10px; color: #c2d8de; font-size: 13px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch { width: 34px; height: 20px; background: #6b8b9780; border-radius: 99px; position: relative; flex-shrink: 0; }
.switch:after { content: ''; position: absolute; width: 14px; height: 14px; top: 3px; left: 3px; border-radius: 50%; background: #c8d9df; transition: transform .2s, background .2s; }
.toggle input:checked+.switch { background: #1fbd6b; }
.toggle input:checked+.switch:after { background: white; transform: translateX(14px); }
.toggle input:focus-visible+.switch { outline: 3px solid #93de6b; outline-offset: 4px; }
.table-scroll { position: relative; border: 1px solid #ffffff14; border-radius: 20px; background: #0b394a; overflow: auto; scrollbar-width: thin; scrollbar-color: #4d7887 #0b394a; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; line-height: 1.5; }
thead { color: #cee1e5; background: #1c4f5f; }
td, th { padding: 20px 14px; border-bottom: 1px solid #ffffff14; vertical-align: middle; }
th { font-weight: 500; }
thead th { padding-top: 17px; padding-bottom: 17px; font-size: 12px; font-weight: 400; white-space: nowrap; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody tr:hover { background: #ffffff05; }
.provider-table { min-width: 1360px; }
.provider-table th:nth-child(2) { width: 190px; }
.provider-table td:first-child, .provider-table th:first-child { padding-left: 24px; }
.provider-table .brand-name { font-size: 14px; min-width: 170px; }
.provider-table .brand-icon { width: 35px; height: 35px; font-size: 20px; border-radius: 10px; }
.provider-table .brand-name small { font-size: 9px; max-width: 120px; }
.provider-table .price>span { flex-direction: column; gap: 4px; white-space: nowrap; }
.provider-table .price strong { color: #b1ed92; font-size: 14px; }
.provider-table .price s { font-size: 11px; color: #829fa9; }
.rank { font-size: 12px; color: #8cb1be; }
.provider-table .pill { font-size: 10px; max-width: 96px; padding: 7px 9px; text-align: center; }
.compatibility-cell { min-width: 145px; max-width: 175px; font-size: 11px; color: #adc6ce; line-height: 1.8; }
.funding-cell { min-width: 120px; max-width: 150px; font-size: 11px; color: #adc6ce; line-height: 1.8; }
.compare-check { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #adc7cf; cursor: pointer; white-space: nowrap; }
.compare-check input { margin: 0; width: 15px; height: 15px; }
.review-link, .round-link { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid #ffffff29; background: #ffffff0a; padding: 9px 11px; font-size: 11px; color: #d0e5e9; white-space: nowrap; }
.review-link:hover, .round-link:hover { background: #ffffff20; border-color: #96dbad; }
.historical-review { display: inline-flex; align-items: center; gap: 7px; color: #c7e6dc; background: #80d6ad15; border-radius: 8px; padding: 7px 9px; white-space: nowrap; font-size: 12px; }
.historical-review span { font-size: 10px; color: #8bbdb2; }
.range-price, .unknown-price { font-size: 12px; font-weight: 500; }
.table-foot { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 19px 1px; color: #8cb1bd; font-size: 12px; }
.text-button { border: 0; background: none; color: #8fd7af; padding: 3px; font-size: 13px; font-weight: 400; }
.text-button:hover { color: #bef2be; text-decoration: underline; }
.data-note { background: #ffffff0a; border: 1px solid #ffffff14; color: #96b7c1; font-size: 11px; line-height: 1.8; border-radius: 12px; padding: 13px 16px; margin: 0; }
.data-note>span:first-child { color: #99cdb9; margin-right: 5px; }
.data-note a { color: #9adfb8; text-decoration: underline; text-underline-offset: 3px; margin-left: 4px; }
.empty-state { padding: 40px 24px; text-align: center; border: 1px solid #ffffff14; border-radius: 20px; color: #bed4db; background: #ffffff08; font-size: 14px; }
.esim-section .data-note { margin-top: 24px; }
.esim-section>.muted { font-size: 12px; line-height: 1.8; margin-top: 18px; }
.esim-table { min-width: 900px; }
.official-price { display: block; min-width: 130px; max-width: 230px; color: #b1ed92; font-size: 14px; line-height: 1.5; }
.provider-table td { max-width: 260px; }
.esim-group h2 { margin: 0 0 24px; }
.esim-group td { max-width: 260px; }
.esim-table td, .esim-table th { padding: 22px 20px; }
.esim-table .brand-name { font-size: 15px; white-space: nowrap; }
.esim-table .price>span { flex-direction: column; gap: 3px; }

/* Promotional panels, illustrations and journal cards. */
.esim-banner { display: flex; align-items: center; justify-content: space-between; min-height: 375px; padding: 52px 56px; border-radius: 32px; position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(120deg, #116650, #125b61 48%, #1c4f5f); }
.esim-banner>div:first-child { position: relative; z-index: 2; }
.esim-banner .eyebrow { color: #a6e3bb; }
.esim-banner h2 { font-size: 43px; font-weight: 500; }
.esim-banner p:not(.eyebrow) { font-size: 16px; color: #bdd9d9; margin: 20px 0 28px; }
.esim-visual { width: 42%; height: 250px; position: relative; }
.esim-visual:before { content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, #86e64680, #10bd8b26 45%, transparent 70%); left: -15px; top: -25px; }
.orbit { position: absolute; width: 310px; height: 310px; top: -30px; left: 5px; border: 1px solid #5caea659; border-radius: 50%; transform: rotate(-30deg); }
.orbit-two { width: 425px; height: 425px; top: -88px; left: -53px; }
.esim-chip { position: absolute; top: 15px; left: 80px; width: 145px; height: 205px; border: 1px solid #c2ffac80; border-radius: 24px 24px 48px 24px; background: linear-gradient(130deg, #b4ef6f, #2bc17b 55%, #219fa9); box-shadow: 12px 16px 0 #1a817b, inset 0 2px 1px #fff6, 0 15px 40px #063b4b66; display: flex; align-items: center; justify-content: center; color: white; font-size: 33px; font-weight: 600; letter-spacing: -1px; transform: rotate(14deg); }
.esim-chip:before { position: absolute; content: ''; width: 64px; height: 45px; border: 1px solid #efffe080; border-radius: 8px; top: 24px; background: linear-gradient(90deg, transparent 32%,#d5f5c680 33%,#d5f5c680 35%,transparent 36%,transparent 65%,#d5f5c680 66%,#d5f5c680 68%,transparent 69%),linear-gradient(0deg, transparent 48%, #e6ffd680 49%, #e6ffd680 51%, transparent 52%),#cdeeb333; }
.esim-chip>span { color: #dcffc6; font-style: italic; font-weight: 400; }
.esim-chip small { position: absolute; bottom: 29px; left: 16px; font-size: 6px; letter-spacing: 1px; }
.signal-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #94e05a; border: 3px solid #d2ffd6; box-shadow: 0 0 18px #70d87799; }
.dot-one { top: 17px; left: 14px; }
.dot-two { bottom: 4px; right: 10px; }
.article-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.article-card { border-radius: 20px; background: #ffffff19; overflow: hidden; transition: background .2s, transform .2s; }
.article-card:hover { background: #ffffff25; transform: translateY(-4px); }
.article-art { height: 190px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.art-0 { background: radial-gradient(circle at 30% 20%, #03be25, #3aa107); flex-direction: column; gap: 15px; }
.art-0>span { border: 1px dashed #ffffff8c; border-radius: 12px; padding: 8px 20px; font-size: 34px; font-weight: 600; letter-spacing: -1px; transform: rotate(-7deg); background: #ffffff14; }
.art-0>small { font-size: 8px; letter-spacing: 1.6px; color: #e6ffe7; }
.art-1 { background: radial-gradient(circle at 30% 20%, #7104ba, #640d93); gap: 22px; }
.art-1>span { color: #e5d4ff; font-size: 25px; line-height: 1.5; }
.art-lines { width: 120px; height: 102px; background: repeating-linear-gradient(0deg, transparent, transparent 22px, #ead6ff66 23px, #ead6ff66 26px, transparent 27px, transparent 37px); transform: rotate(-5deg); }
.art-2 { background: radial-gradient(circle at 30% 20%, #fe6486, #f54d71); }
.card-drawing { width: 180px; height: 110px; border: 1px solid #ffffff59; border-radius: 12px; position: relative; transform: rotate(-10deg); background: linear-gradient(130deg, #ffffff4d,#ffffff0a); box-shadow: 8px 10px 0 #ab2b5966; padding: 16px; }
.card-drawing>span { font-size: 9px; letter-spacing: 1px; }
.card-drawing>b { position: absolute; right: 15px; top: 10px; font-size: 24px; letter-spacing: -8px; }
.card-drawing>small { position: absolute; bottom: 16px; left: 15px; font-size: 10px; letter-spacing: 1px; }
.article-content { padding: 26px; }
.article-meta { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 16px; font-size: 12px; color: #9cd9be; }
.article-meta>span { color: #8db3bd; }
.article-content h3 { font-size: 22px; line-height: 1.25; font-weight: 500; letter-spacing: -.02em; }
.article-content h3>span { color: #a5c8d0; margin-left: 5px; font-size: 20px; }
.article-content p { color: #adc6ce; font-size: 14px; line-height: 1.6; margin-top: 16px; }
.site-footer { max-width: 1232px; margin: 90px auto 0; padding: 0 32px; }
.footer-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 40px; border-top: 1px solid var(--line); padding: 42px 0; }
.footer-top p { color: #8db1bc; font-size: 13px; line-height: 1.8; margin-top: 16px; }
.footer-top>div:not(:first-child) { display: flex; flex-direction: column; gap: 15px; padding-top: 7px; color: #bdd2d9; font-size: 14px; }
.footer-top a:hover { color: #bdf5bd; }
.footer-bottom { border-top: 1px solid #ffffff14; display: flex; justify-content: space-between; gap: 20px; padding: 24px 0 32px; color: #7ea5b3; font-size: 11px; }

/* Inner pages use the same palette, geometry and typography. */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 12px; color: #7ea9b5; margin: 30px 0; }
.breadcrumbs a:hover { color: #b8eacb; }
.breadcrumbs>span:last-child { color: #b2cbd2; }
.page-heading { max-width: 900px; padding: 26px 0 30px; }
.page-heading h1 { font-size: 44px; font-weight: 600; line-height: 1.15; }
.page-heading>p:not(.eyebrow) { color: #bdd4da; max-width: 760px; font-size: 18px; line-height: 1.55; margin-top: 24px; }
.page-heading .brand-name { margin-bottom: 23px; }
.page-heading .brand-name .pill { font-size: 10px; letter-spacing: .05em; }
.page-heading+.section { margin-top: 30px; }
.page-heading+.section .section-heading h2 { font-size: 32px; }
.page-heading+.section .section-heading .eyebrow { display: none; }
.detail-layout { display: grid; grid-template-columns: minmax(0,1fr) 325px; gap: 65px; align-items: start; }
.detail-main .page-heading { padding-top: 12px; }
.detail-aside { position: sticky; top: 110px; padding: 28px; margin-top: 14px; border: 1px solid #ffffff14; border-radius: 20px; background: #1c4f5f; }
.detail-aside h2 { font-size: 34px; margin-bottom: 24px; color: #c6f88e; }
.detail-aside>.promo-code { display: flex; width: 100%; padding: 14px; font-size: 19px; border-radius: 12px; }
.detail-aside>p:not(.eyebrow) { font-size: 13px; line-height: 1.8; color: #abc8d1; margin-top: 20px; }
.aside-price { display: flex; flex-direction: column; gap: 10px; margin-bottom: 25px; color: #a6c4cf; font-size: 12px; }
.detail-aside .button { width: 100%; font-size: 14px; padding: 15px 10px; }
.detail-aside p.fine-print { font-size: 11px; line-height: 1.7; color: #91b1bc; }
.mobile-provider-offer { display: none; }
.prose { font-size: 16px; line-height: 1.8; }
.prose h1 { font-size: 44px; margin: 16px 0 30px; }
.prose h2 { font-size: 30px; line-height: 1.25; margin: 38px 0 20px; font-weight: 500; }
.prose h3 { font-size: 23px; line-height: 1.4; margin: 28px 0 18px; font-weight: 500; }
.prose>p { color: #b6cfd7; margin-bottom: 22px; }
.prose ul, .prose ol { color: #b6cfd7; padding-left: 22px; }
.prose li { padding-left: 5px; margin-bottom: 14px; }
.prose .lead { font-size: 20px; line-height: 1.6; color: #d0e0e4; }
.prose .muted { font-size: 13px; color: #91b4bf; }
.prose a:not(.button):not(.brand-name) { color: #9ce3b6; text-decoration: underline; text-underline-offset: 4px; }
.narrow { max-width: 800px; margin: 0 auto; }
.detail-specs { border-radius: 20px; border: 1px solid #ffffff14; margin: 28px 0; background: #ffffff0a; overflow: hidden; font-size: 14px; }
.detail-specs>div { padding: 18px 22px; display: flex; justify-content: space-between; gap: 25px; border-bottom: 1px solid #ffffff14; }
.detail-specs>div:last-child { border-bottom: 0; }
.detail-specs dt { color: #91b4bf; }
.detail-specs dd { margin: 0; text-align: right; max-width: 60%; }
.detail-specs .price>span { justify-content: flex-end; }
.tag-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.tag-links>a { padding: 7px 13px; border-radius: 8px; background: #ffffff14; font-size: 13px; }
.tag-links>a:hover { background: #ffffff25; }
.source-link { display: inline-block; font-size: 13px; color: #96d8b7; margin: 7px 0; }
.source-link:hover { color: #c2f9c6; }
.history-observations { overflow-wrap: anywhere; }
.history-observations .muted { font-size: 11px; }
.task-nav { display: flex; flex-wrap: wrap; gap: 24px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 15px 0 35px; font-size: 14px; color: #afcfd7; }
.task-nav a:hover { color: #9ae4ad; }
.passport-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; margin: 30px 0; }
.passport-metrics>div { display: flex; flex-direction: column; padding: 25px; border-radius: 20px; background: #ffffff19; }
.passport-metrics strong { font-size: 38px; line-height: 1.2; color: #c0f39c; }
.passport-metrics span { font-size: 12px; line-height: 1.6; color: #aac8d1; margin-top: 12px; }
.evidence-list { margin: 25px 0; border-radius: 20px; background: #ffffff0a; overflow: hidden; border: 1px solid #ffffff14; }
.evidence-list>div { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 17px 22px; border-bottom: 1px solid #ffffff14; font-size: 14px; }
.evidence-list>div:last-child { border: 0; }
.evidence-list span { color: #9dbec9; }
.faq-item { border-radius: 12px; background: #ffffff0a; padding: 20px 24px; margin: 12px 0; }
summary { cursor: pointer; }
.faq-item summary { font-weight: 500; }
.faq-item p { color: #adc9d2; margin-top: 18px; }
.blog-grid { margin: 30px 0; }
.article-page { max-width: 800px; margin: 0 auto; }
.article-page .page-heading { margin-top: 16px; }
.article-page .page-heading h1 { font-size: 44px; }
.article-date { display: block; color: #8eb1bd; font-size: 13px; margin-top: 26px; }
.article-page>.data-note { margin-bottom: 25px; }
.promo-list { margin: 28px 0; border-radius: 20px; border: 1px solid #ffffff14; background: #ffffff0a; overflow: hidden; }
.promo-list>div { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; border-bottom: 1px solid #ffffff14; }
.promo-list>div:last-child { border-bottom: 0; }
.promo-list .brand-name { font-size: 15px; }
.recovery-page { margin-top: 48px; }
.recovery-page>.button { margin-top: 24px; }
.not-found { padding: 90px 0; }
.not-found p:not(.eyebrow) { color: #adc9d2; margin: 24px 0 34px; }
.reference-figure { margin: 28px 0; }
.reference-figure img { display: block; width: 100%; height: auto; border-radius: 20px; }
.reference-figure figcaption { color: #89adb8; font-size: 12px; line-height: 1.6; margin-top: 14px; }
.historical-contact { display: flex; flex-direction: column; gap: 14px; padding: 28px; margin: 28px 0; border-radius: 20px; background: #ffffff19; }
.historical-contact code { color: #c0efb8; font-size: 22px; overflow-wrap: anywhere; }
.historical-contact span { font-size: 13px; color: #a5c4cf; }
.search-observation { border-radius: 20px; padding: 25px; background: #ffffff14; margin: 24px 0; }
.search-observation .eyebrow { font-size: 10px; }
.search-observation blockquote { margin: 0; font-size: 15px; color: #bdd3db; line-height: 1.8; }
.title-observation { border-radius: 12px; padding: 18px 22px; background: #ffffff0a; font-size: 14px; margin: 25px 0; }
.title-observation p { margin-top: 16px; overflow-wrap: anywhere; }
.title-observation, .source-observations { overflow-wrap: anywhere; }
.related-materials { margin: 42px 0; }
.related-materials h2 { font-size: 27px; margin-bottom: 24px; }
.recovered-offer { padding: 30px; border-radius: 20px; background: #ffffff19; margin: 25px 0; }
.recovered-offer h2 { font-size: 28px; }
.offer-row { display: flex; align-items: center; gap: 20px; margin: 25px 0; }
.recovered-offer>p { color: #aec9d2; font-size: 14px; line-height: 1.8; margin-bottom: 22px; }

/* Material directory and dialog controls. */
.material-directory .section-heading { align-items: center; }
.material-directory .count-label { margin: 0; }
.material-directory .toolbar .toggle { margin-left: auto; }
.material-list { border-radius: 20px; background: #ffffff0a; border: 1px solid #ffffff14; overflow: hidden; }
.material-link { display: flex; align-items: center; gap: 24px; padding: 22px 25px; border-bottom: 1px solid #ffffff14; }
.material-link:last-child { border: 0; }
.material-link:hover { background: #ffffff0a; }
.material-link>div { min-width: 0; flex: 1; }
.material-link h3 { font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: -.01em; }
.material-path { display: block; color: #83a9b6; font-size: 11px; margin-top: 7px; overflow-wrap: anywhere; }
.material-status { padding: 6px 10px; border-radius: 8px; background: #ffffff12; color: #a3c9d3; white-space: nowrap; font-size: 10px; }
.directory-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 22px 0; color: #9ec0ca; font-size: 13px; }
.directory-pagination .button { min-height: 44px; padding: 12px 18px; font-size: 13px; }
.directory-pagination .button:disabled { opacity: .35; box-shadow: none; transform: none; }
.toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 90; background: #123b49; border: 1px solid #83c6ac80; border-radius: 12px; padding: 16px 24px; color: #e1f2e6; box-shadow: 0 12px 40px #00192366; font-size: 14px; max-width: 90vw; text-align: center; }
.compare-bar { position: fixed; z-index: 40; bottom: 20px; left: 50%; transform: translateX(-50%); width: min(880px,calc(100vw - 32px)); border: 1px solid #7bc6b659; border-radius: 20px; background: #124454f5; backdrop-filter: blur(20px); box-shadow: 0 20px 80px #001f3066; display: flex; align-items: center; gap: 20px; padding: 18px 22px; }
.compare-bar>div:first-child { display: flex; flex-direction: column; white-space: nowrap; font-size: 14px; }
.compare-bar #compare-count { color: #98bdc8; font-size: 12px; margin-top: 3px; }
.compare-names { flex: 1; color: #abc9d2; font-size: 12px; }
.compare-bar .text-button { font-size: 12px; }
.compare-bar .button { min-height: 46px; font-size: 13px; padding: 13px 20px; white-space: nowrap; }
dialog { width: min(960px,calc(100vw - 32px)); max-height: 90vh; border-radius: 24px; background: #0f3d4e; color: #fff; border: 1px solid #5f9d9b80; box-shadow: 0 30px 120px #001b2b80; padding: 32px; }
dialog::backdrop { background: #001d2eaa; backdrop-filter: blur(8px); }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 28px; }
.dialog-heading h2 { font-size: 32px; }
.dialog-heading .eyebrow { margin-bottom: 10px; }
.dialog-close { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: #ffffff19; color: #c9dde3; font-size: 28px; font-weight: 300; line-height: 1; }
dialog .table-scroll { margin-bottom: 20px; }
dialog table { min-width: 550px; }
dialog td { min-width: 150px; }
dialog .brand-name { font-size: 15px; white-space: normal; }
dialog .data-note { margin-top: 20px; }

@media (min-width:1440px) {
  .hero { gap: 55px; }
}
@media (max-width:1150px) {
  .header-promo { display: none; }
  .header-inner { gap: 25px; }
  .main-nav { gap: 22px; }
  .hero { gap: 20px; }
  .hero h1 { font-size: 44px; }
  .hero-art { transform: scale(.92); transform-origin: center; }
  .hero-orb { left: 55px; }
  .hero-bank-card { width: 255px; }
  .bank-card-back { left: 130px; }
  .bank-card-front { left: 35px; }
  .orb-orbit { left: -35px; }
  .floating-code { right: -5px; }
  .route-grid>a { padding: 22px; }
  .route-grid h3 { font-size: 20px; }
  .service-card { padding: 22px; gap: 12px; }
  .service-card h3 { font-size: 18px; }
  .detail-layout { gap: 40px; }
}
@media (max-width:900px) {
  .container, .header-inner { padding-left: 24px; padding-right: 24px; }
  .header-inner { min-height: 75px; justify-content: space-between; }
  .mobile-menu-button { display: grid; place-items: center; width: 40px; height: 40px; background: #ffffff19; border: 0; border-radius: 12px; font-size: 21px; margin-left: auto; }
  .main-nav { display: none; position: absolute; top: 75px; left: 0; right: 0; padding: 12px 24px 24px; background: #0f3e4f; border-bottom: 1px solid #ffffff14; border-radius: 0 0 20px 20px; align-items: stretch; gap: 0; flex-direction: column; font-size: 16px; }
  .main-nav.is-open { display: flex; }
  .main-nav>a { padding: 13px 0; }
  .main-nav>a[aria-current] { text-decoration: none; color: #9eebb1; }
  .hero { min-height: 520px; padding-top: 40px; gap: 5px; grid-template-columns: 1.1fr .9fr; }
  .hero h1 { font-size: 38px; }
  .hero-description { font-size: 16px; }
  .hero .eyebrow { font-size: 10px; }
  .hero-art { transform: scale(.76); transform-origin: 35% center; width: 430px; margin-left: -55px; }
  .hero-actions { max-width: 315px; }
  .hero-actions .button { min-height: 56px; font-size: 15px; }
  .hero-actions .secondary { min-height: 40px; font-size: 12px; }
  .hero-proof { gap: 9px; font-size: 10px; }
  .proof-icon { display: none; }
  .section { margin: 56px 0; }
  .section-heading h2 { font-size: 34px; }
  .featured-grid { gap: 18px; }
  .featured-card { padding: 25px; }
  .featured-top .pill { font-size: 8px; }
  .featured-offer { font-size: 34px; }
  .featured-card:nth-child(2) .featured-offer { font-size: 27px; }
  .featured-offer>span { display: block; font-size: 12px; margin: 8px 0 0; }
  .mini-specs { font-size: 12px; gap: 12px; }
  .mini-specs>div { gap: 10px; }
  .route-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
  .route-grid>a { min-height: 205px; padding: 25px; }
  .route-grid h3 { margin-top: 25px; font-size: 23px; }
  .route-grid p { max-width: 220px; }
  .service-grid { gap: 14px; }
  .service-card { padding: 20px 17px; gap: 10px; }
  .service-card .brand-icon { width: 36px; height: 36px; font-size: 21px; }
  .service-card h3 { font-size: 17px; }
  .service-card p { font-size: 10px; }
  .service-arrow { display: none; }
  .article-grid { gap: 18px; }
  .article-content { padding: 22px; }
  .article-content h3 { font-size: 20px; }
  .article-content p { font-size: 13px; }
  .article-art { height: 165px; }
  .art-0>span { font-size: 25px; padding: 8px 15px; }
  .article-meta { font-size: 10px; }
  .esim-banner { padding: 40px; }
  .esim-banner h2 { font-size: 36px; }
  .esim-visual { width: 40%; }
  .esim-chip { left: 45px; }
  .orbit { left: -35px; }
  .orbit-two { left: -93px; }
  .detail-layout { grid-template-columns: minmax(0,1fr) 270px; gap: 28px; }
  .detail-main .page-heading h1 { font-size: 38px; }
  .detail-aside { padding: 22px; }
  .detail-aside h2 { font-size: 29px; }
  .detail-specs>div { padding: 16px; font-size: 12px; }
  .passport-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .material-link { gap: 15px; padding: 20px; }
  .material-status { font-size: 9px; }
  .material-directory .toolbar .toggle { margin-left: 0; }
}
@media (max-width:650px) {
  :root { font-size: 15px; scroll-padding-top: 90px; }
  .container { padding: 0 20px; }
  .header-inner { padding: 0 20px; min-height: 70px; }
  .wordmark { font-size: 26px; }
  .main-nav { top: 70px; padding-left: 20px; padding-right: 20px; }
  .mobile-menu-button { width: 36px; height: 36px; border-radius: 10px; font-size: 19px; }
  .hero { display: flex; flex-direction: column; min-height: 0; padding: 38px 0 0; gap: 0; }
  .hero::before { height: calc(100% + 130px); top: -130px; opacity: .55; }
  .hero-copy { align-self: stretch; padding: 0; }
  .hero .eyebrow { font-size: 9px; margin-bottom: 19px; gap: 9px; }
  .hero h1 { font-size: clamp(32px,8.7vw,44px); line-height: 1.1; letter-spacing: -1.1px; }
  .hero-description { margin-top: 20px; font-size: 16px; line-height: 1.5; max-width: 365px; }
  .hero-actions { max-width: 100%; margin-top: 26px; gap: 10px; }
  .hero-actions .button { min-height: 58px; font-size: 16px; }
  .hero-actions .secondary { min-height: 39px; font-size: 13px; }
  .hero-proof { margin-top: 21px; font-size: 10px; gap: 10px; }
  .proof-rule { margin: 0 9px; }
  .hero-art { width: 420px; height: 390px; margin: -3px 0 -24px; transform: scale(.83); transform-origin: center top; }
  .hero-orb { width: 320px; height: 320px; left: 61px; top: 30px; }
  .hero-bank-card { width: 244px; height: 155px; padding: 20px; border-radius: 18px; }
  .bank-card-back { top: 55px; left: 129px; }
  .bank-card-front { top: 164px; left: 38px; }
  .mini-card-logo { font-size: 20px; }
  .card-digits { left: 20px; bottom: 20px; font-size: 12px; }
  .card-chip { top: 59px; left: 21px; }
  .card-contactless { top: 59px; }
  .card-caption { font-size: 5px; }
  .floating-code { top: 287px; right: 7px; border-radius: 18px; padding: 13px 19px 13px 13px; }
  .floating-code strong { font-size: 26px; }
  .floating-code small { font-size: 10px; }
  .floating-globe { left: 11px; top: 61px; }
  .orb-orbit { width: 425px; left: -8px; height: 160px; top: 154px; }
  .spark-one { top: 15px; right: 7px; }
  .spark-two { left: 20px; bottom: 31px; }
  .section { margin: 44px 0; }
  .featured-section { margin-top: 0; }
  .section-heading { align-items: flex-start; gap: 16px; margin-bottom: 24px; }
  .section-heading h2 { font-size: 30px; line-height: 1.2; letter-spacing: -.025em; }
  .section-heading .eyebrow { font-size: 9px; margin-bottom: 12px; }
  .section-heading p.muted { margin-top: 14px; font-size: 13px; }
  .section-heading .text-link { font-size: 11px; margin-top: 26px; }
  .featured-grid { grid-template-columns: 1fr; gap: 16px; }
  .featured-card { padding: 24px; }
  .featured-top .pill { font-size: 9px; }
  .brand-name h3 { font-size: 21px; }
  .featured-offer { font-size: 36px; margin-top: 23px; }
  .featured-card:nth-child(2) .featured-offer { font-size: 31px; }
  .featured-offer>span { display: inline; margin-left: 12px; font-size: 11px; }
  .mini-specs { font-size: 13px; margin: 22px 0; }
  .featured-bottom { padding-top: 19px; }
  .offer-caption { font-size: 11px; line-height: 1.7; }
  .route-grid { gap: 12px; }
  .route-grid>a { min-height: 199px; padding: 20px 16px; border-radius: 24px; }
  .route-number { font-size: 12px; }
  .route-grid h3 { font-size: 19px; margin-top: 30px; line-height: 1.2; }
  .route-grid p { font-size: 11px; line-height: 1.5; margin-top: 11px; }
  .route-grid>a>span:last-child { right: 16px; top: 15px; font-size: 21px; }
  .service-grid { grid-template-columns: 1fr; gap: 12px; }
  .service-card { padding: 22px; gap: 15px; }
  .service-card h3 { font-size: 19px; }
  .service-card p { font-size: 12px; }
  .service-card .brand-icon { width: 41px; height: 41px; font-size: 23px; }
  .service-arrow { display: inline; }
  .catalogue-head { align-items: flex-start; gap: 12px; }
  .catalogue-head .section-heading h2 { font-size: 28px; }
  .count-label { font-size: 9px; padding: 5px 7px; margin-bottom: 0; margin-top: 27px; }
  .toolbar { gap: 12px; }
  .catalogue-searches { grid-template-columns: 1fr; gap: 12px; }
  .search-field { min-height: 54px; padding: 12px 15px; flex-basis: 100%; }
  .search-field input { font-size: 14px; }
  .search-field kbd { display: none; }
  .select-label { max-width: 62%; }
  .select-label select { min-height: 42px; padding: 10px 25px 10px 12px; font-size: 11px; border-radius: 10px; }
  .toggle { font-size: 11px; gap: 8px; }
  .switch { width: 29px; height: 18px; }
  .switch:after { width: 12px; height: 12px; }
  .toggle input:checked+.switch:after { transform: translateX(11px); }
  .table-scroll { border-radius: 16px; }
  .table-foot { font-size: 10px; align-items: flex-start; gap: 18px; padding: 16px 0; }
  .table-foot>span { max-width: 190px; }
  .table-foot .text-button { font-size: 10px; white-space: nowrap; }
  .data-note { font-size: 10px; padding: 12px 14px; }
  .esim-banner { min-height: 492px; padding: 30px 25px; align-items: flex-start; border-radius: 24px; }
  .esim-banner h2 { font-size: 33px; line-height: 1.15; }
  .esim-banner .eyebrow { font-size: 8px; }
  .esim-banner p:not(.eyebrow) { max-width: 220px; font-size: 13px; margin: 17px 0 23px; }
  .esim-banner .button { font-size: 14px; min-height: 50px; padding: 14px 19px; }
  .esim-visual { position: absolute; width: 230px; height: 195px; right: 9px; bottom: 2px; }
  .esim-chip { transform: rotate(17deg) scale(.75); left: 75px; top: -12px; }
  .orbit { width: 245px; height: 245px; left: 32px; top: -12px; }
  .orbit-two { width: 330px; height: 330px; left: -11px; top: -55px; }
  .dot-one { left: 53px; top: 8px; }
  .dot-two { right: 13px; bottom: 20px; }
  .article-grid { grid-template-columns: 1fr; gap: 20px; }
  .article-art { height: 195px; }
  .article-content { padding: 25px; }
  .article-content h3 { font-size: 23px; line-height: 1.25; }
  .article-content p { font-size: 14px; }
  .article-meta { font-size: 12px; }
  .art-0>span { font-size: 34px; }
  .site-footer { margin-top: 60px; padding: 0 20px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 30px 20px; padding: 32px 0; }
  .footer-top>div:first-child { grid-column: span 2; }
  .footer-top p { font-size: 12px; }
  .footer-top>div:not(:first-child) { font-size: 12px; gap: 14px; }
  .footer-bottom { flex-direction: column; gap: 10px; font-size: 10px; line-height: 1.7; padding: 22px 0 30px; }
  .breadcrumbs { font-size: 10px; gap: 7px; margin: 25px 0 20px; }
  .page-heading { padding: 16px 0 25px; }
  .page-heading h1, .detail-main .page-heading h1 { font-size: 34px; line-height: 1.15; letter-spacing: -1px; }
  .page-heading>p:not(.eyebrow) { font-size: 15px; line-height: 1.6; margin-top: 20px; }
  .page-heading+.section { margin-top: 18px; }
  .page-heading+.section .section-heading h2 { font-size: 27px; }
  .page-heading .brand-name { gap: 10px; margin-bottom: 22px; }
  .page-heading .brand-name .pill { font-size: 8px; max-width: 225px; }
  .detail-layout { display: block; }
  .detail-aside { display: none; }
  .mobile-provider-offer { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px; margin: 0 0 20px; background: #1c4f5f; border-radius: 20px; }
  .mobile-provider-offer .eyebrow { font-size: 8px; margin-bottom: 9px; letter-spacing: .08em; }
  .mobile-provider-offer strong { font-size: 22px; color: #c6f69b; }
  .mobile-provider-offer .promo-code { font-size: 13px; padding: 11px; }
  .prose { font-size: 15px; line-height: 1.8; }
  .prose h1 { font-size: 34px; margin: 15px 0 25px; letter-spacing: -1px; }
  .prose h2 { font-size: 27px; margin: 32px 0 20px; }
  .prose h3 { font-size: 21px; }
  .prose .lead { font-size: 18px; line-height: 1.6; }
  .prose .muted { font-size: 12px; }
  .detail-specs>div { padding: 16px; gap: 16px; font-size: 12px; }
  .detail-specs dt { max-width: 45%; }
  .detail-specs dd { max-width: 55%; }
  .detail-specs .price>span { flex-direction: column; align-items: flex-end; gap: 3px; }
  .detail-specs .price strong { font-size: 12px; }
  .history-observations .muted { font-size: 10px; }
  .task-nav { gap: 12px 20px; padding: 16px 0; font-size: 12px; margin-bottom: 28px; }
  .passport-metrics { gap: 12px; margin: 24px 0; }
  .passport-metrics>div { padding: 20px; }
  .passport-metrics strong { font-size: 32px; }
  .passport-metrics span { font-size: 11px; margin-top: 10px; }
  .evidence-list>div { flex-direction: column; align-items: flex-start; gap: 7px; padding: 17px 20px; font-size: 13px; }
  .faq-item { padding: 18px 20px; font-size: 14px; }
  .esim-table td, .esim-table th { padding: 20px 18px; }
  .article-page .page-heading h1 { font-size: 34px; }
  .article-date { font-size: 11px; }
  .promo-list>div { padding: 17px; gap: 13px; }
  .promo-list .brand-name { font-size: 13px; gap: 9px; }
  .promo-list .brand-icon { width: 33px; height: 33px; font-size: 19px; border-radius: 10px; }
  .promo-list .promo-code { font-size: 11px; gap: 10px; }
  .recovery-page { margin-top: 30px; }
  .not-found { padding: 60px 0; }
  .not-found h1 { font-size: 37px; }
  .reference-figure img { border-radius: 16px; }
  .reference-figure figcaption { font-size: 10px; }
  .historical-contact { padding: 22px; }
  .historical-contact code { font-size: 20px; }
  .historical-contact span { font-size: 11px; }
  .search-observation { padding: 22px; }
  .search-observation blockquote { font-size: 14px; }
  .title-observation { padding: 17px 20px; font-size: 13px; }
  .related-materials h2 { font-size: 24px; }
  .related-materials .button { font-size: 13px; padding: 15px 20px; }
  .recovered-offer { padding: 23px; }
  .recovered-offer h2 { font-size: 24px; }
  .recovered-offer>p { font-size: 13px; }
  .material-directory .section-heading { align-items: flex-start; }
  .material-directory .count-label { font-size: 9px; padding: 5px 7px; margin-top: 5px; }
  .material-directory .toolbar .select-label { flex-basis: 100%; max-width: 100%; }
  .material-directory .toolbar select { width: 100%; font-size: 13px; }
  .material-directory .toggle { font-size: 12px; }
  .material-link { flex-wrap: wrap; gap: 12px; padding: 20px; }
  .material-link>div { flex-basis: calc(100% - 30px); order: 0; }
  .material-link>.material-status { order: 2; font-size: 9px; }
  .material-link>span:last-child { order: 1; }
  .material-link h3 { font-size: 15px; }
  .material-path { font-size: 10px; }
  .directory-pagination { font-size: 11px; }
  .directory-pagination .button { font-size: 11px; padding: 11px 15px; min-height: 42px; }
  .compare-bar { width: calc(100vw - 20px); bottom: 10px; padding: 14px; gap: 12px; border-radius: 16px; }
  .compare-bar>div:first-child { flex: 1; font-size: 12px; }
  .compare-bar #compare-count { font-size: 10px; }
  .compare-names { display: none; }
  .compare-bar .text-button { font-size: 10px; }
  .compare-bar .button { min-height: 42px; padding: 12px 14px; font-size: 11px; }
  .toast { bottom: 98px; padding: 14px 18px; width: max-content; max-width: 90vw; font-size: 12px; }
  dialog { width: calc(100vw - 24px); padding: 22px 16px; border-radius: 20px; }
  .dialog-heading { gap: 15px; margin-bottom: 23px; }
  .dialog-heading h2 { font-size: 27px; }
  .dialog-heading .eyebrow { font-size: 9px; }
  .dialog-close { width: 34px; height: 34px; font-size: 24px; border-radius: 10px; }
  dialog table { min-width: 520px; }
}
@media (max-width:359px) {
  .hero-art { transform: scale(.72); margin-bottom: -65px; }
  .featured-card { padding: 20px; }
  .featured-top .pill { font-size: 8px; padding: 5px 6px; }
  .featured-offer>span { font-size: 10px; }
  .featured-card:nth-child(2) .featured-offer { font-size: 27px; }
  .featured-bottom { gap: 12px; }
  .route-grid h3 { font-size: 17px; }
  .route-grid>a { min-height: 205px; }
  .mobile-provider-offer { padding: 18px; gap: 10px; }
}
@media (prefers-reduced-motion:reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Shared local brand assets across directories, cards and comparison. */
.page-heading > .brand-icon { width: 56px; height: 56px; margin-bottom: 20px; padding: 9px; border-radius: 16px; }
.tag-links > a { display: inline-flex; align-items: center; gap: 8px; }
.tag-links .brand-icon { width: 26px; height: 26px; border-radius: 7px; padding: 4px; }
.compatibility-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.provider-table .compatibility-icons .brand-icon { width: 27px; height: 27px; border-radius: 7px; padding: 4px; }
.compatibility-count { white-space: nowrap; font-size: 11px; }
.evidence-list .brand-name { display: flex; align-items: center; gap: 10px; }
.evidence-list .brand-icon { width: 28px; height: 28px; padding: 4px; border-radius: 8px; }
.material-link > .brand-icon { width: 38px; height: 38px; }
@media (max-width: 600px) {
  .material-link > .brand-icon { width: 32px; height: 32px; order: 0; }
  .material-link:has(> .brand-icon) > div { flex-basis: calc(100% - 76px); }
}
.brand-icon:is([data-brand="supercell"], [data-brand="fxreplay"], [data-brand="grizzlysms"]) { background: #1b252b; }

.compare-names { display: flex; align-items: center; gap: 14px; }
.compare-names .brand-name { display: inline-flex; align-items: center; gap: 7px; }
.compare-names .brand-icon { width: 25px; height: 25px; padding: 3px; border-radius: 7px; }

/* Rating icons fill their tiles without an added white frame. */
.provider-table .brand-icon,
.provider-table .compatibility-icons .brand-icon,
.esim-table .brand-icon {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.provider-table .brand-icon img,
.esim-table .brand-icon img {
  object-fit: cover;
  border-radius: 0;
}

/* These transparent marks need a white tile to remain legible. */
.brand-icon:is([data-brand="plativputi"], [data-brand="betterroaming"], [data-brand="esim365"], [data-brand="instabridge"]) {
  background: #fff;
  padding: 5px;
}
.brand-icon:is([data-brand="plativputi"], [data-brand="betterroaming"], [data-brand="esim365"], [data-brand="instabridge"]) img {
  object-fit: contain;
}
.brand-icon:is([data-brand="mts"], [data-brand="quantek"]) {
  padding: 0;
  border: 0;
}
.brand-icon[data-brand="mts"] { background: #ff0032; }
.brand-icon[data-brand="quantek"] { background: #0c0a0d; }
.brand-icon:is([data-brand="mts"], [data-brand="quantek"]) img {
  object-fit: cover;
  border-radius: 0;
}

.material-category { display: block; margin-top: 5px; color: #a3c9d3; font-size: 12px; }

/* Three ratings share the same reading order and product facts. */
.ratings-hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: center; padding: 68px 0 64px; }
.ratings-hero h1 { font-size: clamp(38px,4.1vw,54px); line-height: 1.1; letter-spacing: -.045em; }
.ratings-hero h1 em { color: #a5e779; }
.ratings-hero>div>p { max-width: 480px; margin-top: 24px; font-size: 17px; line-height: 1.7; color: #bbd0d7; }
.rating-section { margin-bottom: 64px; scroll-margin-top: 110px; }
.rating-heading { display: grid; grid-template-columns: 58px 1fr auto; gap: 24px; align-items: start; margin: 0 0 26px; padding-top: 38px; border-top: 1px solid #ffffff21; }
.rating-category-mark { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: #9cde1b; color: #123b3c; font-size: 20px; font-weight: 650; }
.rating-section-esim .rating-category-mark { background: #6ed7be; }
.rating-section-payments .rating-category-mark { background: #7bc6f0; }
.rating-heading .eyebrow { font-size: 10px; color: #9ebcc6; margin-bottom: 13px; }
.rating-heading h2 { max-width: 760px; font-size: 36px; line-height: 1.18; }
.rating-heading div>p:last-child { color: #bbd0d7; max-width: 720px; font-size: 14px; line-height: 1.75; margin-top: 16px; }
.rating-count { padding: 9px 13px; border-radius: 20px; background: #ffffff0c; font-size: 12px; color: #b7d3db; white-space: nowrap; }
.ranking-list { display: grid; gap: 12px; }
.ranking-row { display: grid; grid-template-columns: 30px 192px minmax(0,1fr) 112px; column-gap: 22px; row-gap: 16px; align-items: start; padding: 26px; border-radius: 20px; background: #ffffff09; border: 1px solid #ffffff13; }
.ranking-row-first { background: linear-gradient(110deg,#1c4f5f,#17474e); border-color: #9ae68c55; }
.ranking-position { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; font-size: 12px; font-weight: 550; color: #9dbbc6; background: #ffffff0a; }
.ranking-row-first .ranking-position { background: #a5e779; color: #073943; }
.ranking-identity { min-width: 0; }
.ranking-brand { display: flex; align-items: center; gap: 12px; min-height: 46px; }
.ranking-brand .brand-icon { flex: 0 0 42px; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 12px; background: transparent; }
.ranking-brand .brand-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.ranking-brand .brand-icon:is([data-brand="plativputi"], [data-brand="betterroaming"], [data-brand="esim365"], [data-brand="instabridge"]) { background: white; padding: 5px; }
.ranking-brand .brand-icon:is([data-brand="plativputi"], [data-brand="betterroaming"], [data-brand="esim365"], [data-brand="instabridge"]) img { object-fit: contain; }
.ranking-brand h3 { font-size: 17px; line-height: 1.25; letter-spacing: -.02em; overflow-wrap: anywhere; }
.ranking-brand div>span { display: block; color: #a8c3cd; font-size: 10px; margin-top: 5px; }
.ranking-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 19px 20px; margin: 0; }
.ranking-facts>div { min-width: 0; }
.ranking-facts dt { font-size: 10px; line-height: 1.4; color: #9fbdc9; margin-bottom: 6px; }
.ranking-facts dd { font-size: 12px; font-weight: 450; line-height: 1.55; margin: 0; overflow-wrap: anywhere; }
.ranking-facts>div:first-child dd { color: #c2efaa; font-weight: 550; }
.ranking-coupon { display: grid; justify-items: start; gap: 8px; margin-top: 16px; padding: 12px; border: 1px dashed #a5e77955; border-radius: 12px; background: #a5e77908; font-size: 11px; color: #c9edb8; }
.coupon-empty { font-size: 11px; color: #a8c3ce; }
.ranking-coupon .promo-code { font-size: 11px; min-height: 28px; padding: 5px 8px; }
.ranking-offer { display: inline-block; font-size: 11px; line-height: 1.6; color: #c2efaa; margin-top: 13px; }
.ranking-actions { display: grid; gap: 13px; text-align: center; padding-top: 2px; }
.ranking-actions .button { min-height: 42px; padding: 10px 13px; font-size: 12px; border-radius: 12px; white-space: nowrap; }
.ranking-review { font-size: 11px; color: #b9d4dc; text-underline-offset: 4px; }
.ranking-review:hover { text-decoration: underline; color: white; }
.ranking-extra { grid-column: 3 / -1; min-width: 0; }
.ranking-services { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ranking-services>span { display: inline-flex; align-items: center; gap: 5px; border-radius: 7px; padding: 5px 7px; background: #ffffff09; font-size: 10px; color: #c8dde4; }
.ranking-services .brand-icon { width: 15px; height: 15px; padding: 0; border: 0; border-radius: 4px; background: transparent; }
.ranking-services .brand-icon img { width: 100%; height: 100%; object-fit: contain; }
.ranking-services .more-services { color: #a5e779; }
.ranking-details { margin-top: 12px; color: #a8c3ce; font-size: 11px; line-height: 1.8; }
.ranking-details:first-child { margin-top: 0; }
.ranking-details summary { cursor: pointer; width: fit-content; color: #b9d4dc; }
.ranking-details p { padding-top: 12px; max-width: 780px; }
.ranking-scope { color: #b9d4dc; font-size: 11px; line-height: 1.7; }
.rating-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; }
.rating-footer>p { color: #98b9c6; font-size: 12px; }
.rating-footer .button { min-height: 48px; padding: 14px 24px; font-size: 13px; }
.ratings-note { color: #9fbdc9; font-size: 12px; line-height: 1.8; margin: -16px 0 60px; max-width: 760px; }
.ratings-note a { color: #c5e9d1; text-decoration: underline; text-underline-offset: 4px; }
.payment-page-heading { max-width: 880px; }
.payment-page-heading h1 { font-size: 52px; }
.payment-catalogue { margin: 40px 0 72px; scroll-margin-top: 110px; }
.payment-catalogue-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.payment-catalogue-heading h2 { font-size: 30px; max-width: 750px; }
.payment-toolbar { display: grid; grid-template-columns: 1.5fr 1fr 1fr .8fr; gap: 10px; margin-bottom: 20px; }
.payment-toolbar .search-field, .payment-toolbar .select-label { width: 100%; min-width: 0; }
.payment-toolbar input { min-width: 0; }
.payment-toolbar select { width: 100%; font-size: 12px; padding-left: 14px; padding-right: 24px; }
.payment-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 11px; color: #9fbdc9; padding: 22px 0; }
.payment-bottom button { font-size: 12px; }
.payment-how { padding: 40px; border-radius: 32px; background: #ffffff09; margin: 0 0 60px; }
.payment-how h2 { max-width: 680px; font-size: 36px; }
.payment-how ol { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; margin: 32px 0 0; }
.payment-how li>span { display: inline-block; color: #a5e779; font-size: 14px; margin-bottom: 16px; }
.payment-how h3 { font-size: 19px; }
.payment-how li>p { font-size: 13px; line-height: 1.7; color: #b3cbd4; margin-top: 12px; }
.payment-profile { max-width: 900px; margin: 0 auto 60px; }
.payment-profile-card { background: #ffffff0b; border: 1px solid #ffffff17; border-radius: 24px; padding: 36px; margin-bottom: 30px; }
.payment-profile-card h2 { font-size: 26px; margin-bottom: 26px; }
.payment-profile-card .ranking-facts { gap: 28px; }
.payment-profile-card .ranking-facts dt { font-size: 12px; }
.payment-profile-card .ranking-facts dd { font-size: 15px; }
.payment-profile-card .ranking-coupon { margin: 28px 0; }
.payment-profile-card>p { margin: 20px 0; font-size: 14px; line-height: 1.8; color: #b6d0d9; }
.payment-profile-card>.button { margin-top: 8px; }
@media(max-width:1100px) {
  .ratings-hero { gap: 32px; }
  .ratings-hero h1 { font-size: 43px; }
  .ranking-row { grid-template-columns: 26px 168px minmax(0,1fr) 100px; gap: 18px; padding: 22px; }
  .ranking-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rating-heading h2 { font-size: 32px; }
  .rating-heading { grid-template-columns: 50px 1fr; gap: 20px; }
  .rating-category-mark { width: 50px; height: 50px; border-radius: 15px; }
  .rating-count { grid-column: 2; justify-self: start; margin-top: -5px; }
  .payment-toolbar { grid-template-columns: 1fr 1fr; }
}
@media(max-width:760px) {
  .ratings-hero { grid-template-columns: 1fr; padding: 44px 0 40px; gap: 30px; }
  .ratings-hero h1 { font-size: clamp(34px,6vw,46px); }
  .ratings-hero>div>p { margin-top: 20px; font-size: 15px; max-width: 520px; }
  .ranking-row { grid-template-columns: 26px minmax(0,1fr) 110px; padding: 22px; gap: 18px; }
  .ranking-identity { grid-column: 2 / 3; }
  .ranking-facts { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(3,minmax(0,1fr)); padding-top: 18px; border-top: 1px solid #ffffff14; gap: 18px; }
  .ranking-actions { grid-column: 3; grid-row: 1; }
  .ranking-extra { grid-column: 1 / -1; }
  .ranking-brand h3 { font-size: 18px; }
  .ranking-brand .brand-icon { width: 36px; height: 36px; flex-basis: 36px; }
  .ranking-facts dt { font-size: 11px; }
  .ranking-facts dd { font-size: 13px; }
  .rating-section { margin-bottom: 48px; }
  .rating-heading h2 { font-size: 30px; }
  .rating-footer { align-items: flex-start; flex-direction: column; }
  .rating-footer .button { width: 100%; }
  .payment-page-heading h1 { font-size: 40px; }
  .payment-catalogue-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  .payment-catalogue-heading h2 { font-size: 30px; }
  .payment-how { padding: 28px; border-radius: 24px; }
  .payment-how h2 { font-size: 30px; }
  .payment-how ol { grid-template-columns: 1fr; gap: 24px; }
  .payment-how li>span { margin-bottom: 10px; }
}
@media(max-width:480px) {
  .ratings-hero { padding-top: 32px; }
  .ratings-hero h1 { font-size: 33px; }
  .rating-heading { grid-template-columns: 38px 1fr; gap: 14px; padding-top: 26px; }
  .rating-category-mark { width: 38px; height: 38px; border-radius: 12px; font-size: 15px; }
  .rating-heading h2 { font-size: 26px; }
  .rating-heading .eyebrow { font-size: 9px; margin-bottom: 10px; }
  .rating-heading div>p:last-child { font-size: 13px; margin-top: 12px; }
  .rating-count { font-size: 11px; }
  .ranking-row { grid-template-columns: 24px minmax(0,1fr); gap: 16px 12px; padding: 20px 18px; border-radius: 18px; }
  .ranking-position { width: 24px; height: 26px; font-size: 10px; border-radius: 8px; }
  .ranking-identity { grid-column: 2; }
  .ranking-brand .brand-icon { width: 40px; height: 40px; flex-basis: 40px; }
  .ranking-facts { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 16px; }
  .ranking-actions { grid-column: 1 / -1; grid-row: 4; display: flex; align-items: center; gap: 20px; padding-top: 4px; }
  .ranking-actions .button { flex: 1; font-size: 13px; min-height: 44px; }
  .ranking-review { flex: 1; font-size: 12px; }
  .ranking-extra { grid-row: 3; }
  .ranking-coupon { margin-top: 13px; font-size: 11px; }
  .ranking-details { font-size: 12px; }
  .ranking-services>span { font-size: 10px; padding: 6px 7px; }
  .payment-page-heading h1 { font-size: 34px; }
  .payment-catalogue-heading h2 { font-size: 26px; }
  .payment-toolbar { gap: 8px; }
  .payment-toolbar .search-field { grid-column: 1 / -1; }
  .payment-toolbar .select-label:last-child { grid-column: 1 / -1; }
  .payment-bottom { flex-direction: column; align-items: flex-start; line-height: 1.7; }
  .payment-profile-card { padding: 24px; }
  .payment-profile-card .ranking-facts { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .payment-profile-card .ranking-facts dd { font-size: 13px; }
}

/* Shared bright coupon control for previews, tables and company pages. */
.promo-widget { display: inline-flex; flex-direction: column; align-items: stretch; gap: 7px; max-width: 100%; vertical-align: top; }
.promo-widget .promo-code { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; min-width: 142px; min-height: 74px; padding: 12px 14px; border: 1px solid #d7ffa1; border-radius: 12px; background: #b5f368; color: #123b30; box-shadow: 0 4px 18px #a5e77920; text-align: left; white-space: nowrap; }
.promo-widget .promo-code:hover { background: #ccff8a; border-color: #eaffd6; }
.promo-widget .promo-code:active { background: #a7e65b; }
.promo-widget .promo-code.is-copied { background: #7ee6c4; border-color: #bbffe9; }
.promo-widget .promo-code-value { color: #123b30; font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: .04em; }
.promo-widget .promo-copy-label { display: block; padding-top: 8px; border-top: 1px solid #123b3026; color: #214b36; font-size: 11px; font-weight: 550; line-height: 1.2; letter-spacing: 0; }
.promo-status { font-size: 10px; font-weight: 400; color: #a8c3ce; line-height: 1.4; }
.ranking-coupon .promo-widget { width: 100%; }
.ranking-coupon .promo-code { min-width: 0; padding: 11px 12px; }
.ranking-coupon .promo-code-value { font-size: 18px; }
.ranking-coupon .promo-status { color: #a8c3ce; }
.detail-aside .promo-widget { width: 100%; margin-top: 20px; }
.detail-aside .promo-widget .promo-code { width: 100%; }
.promo-list .promo-widget { flex-shrink: 0; }
@media (max-width:480px) {
  .ranking-coupon { padding: 12px; }
  .ranking-coupon .promo-code { min-height: 76px; }
  .ranking-coupon .promo-code-value { font-size: 20px; }
  .ranking-coupon .promo-copy-label { font-size: 12px; }
}

/* Layered campaign illustration with individual high-resolution alpha images. */
.ratings-hero { grid-template-columns: 1.05fr 1fr; gap: 22px; padding: 46px 0 56px; min-height: 610px; }
.ratings-hero .savings-copy { position: relative; z-index: 2; padding: 22px 0; }
.ratings-hero h1 { font-size: clamp(38px,4.25vw,54px); }
.ratings-hero .savings-copy>p { max-width: 490px; font-size: 16px; line-height: 1.8; }
.savings-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 30px; }
.savings-hero-actions .button { min-height: 52px; padding: 15px 25px; font-size: 15px; gap: 22px; }
.savings-hero-actions>span { max-width: 130px; font-size: 12px; line-height: 1.6; color: #a2c4c7; }
.savings-visual { min-width: 0; width: 100%; align-self: center; }
.savings-scene { position: relative; isolation: isolate; width: 100%; aspect-ratio: 1; max-width: 570px; margin: 0 auto; }
.savings-scene::before { content: ''; position: absolute; inset: 15% -6% -4%; border-radius: 50%; background: radial-gradient(ellipse,#8ee65d22,transparent 68%); pointer-events: none; }
.savings-sprite { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; pointer-events: none; }
.savings-sprite>img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.scene-plush { position: absolute; width: 108%; left: -2%; top: 6%; transform: rotate(-12deg); pointer-events: none; }
.scene-link { position: absolute; display: block; width: 48%; border-radius: 30px; -webkit-tap-highlight-color: transparent; }
.scene-link>.savings-sprite { filter: drop-shadow(0 14px 12px #011c2850); transform: rotate(var(--rest-angle,0deg)); transition: transform .45s cubic-bezier(.2,.75,.25,1.3),filter .35s; transform-origin: 50% 65%; }
.scene-cards { left: 9%; top: 4%; z-index: 3; --rest-angle:-7deg; }
.scene-esim { right: -1%; top: 20%; width: 42%; z-index: 4; --rest-angle:8deg; }
.scene-payments { width: 47%; left: 28%; top: 43%; z-index: 5; --rest-angle:-5deg; }
.scene-link:is(:hover,:focus-visible,.is-active) { z-index: 10; }
.scene-link:is(:hover,:focus-visible,.is-active)>.savings-sprite { transform: translateY(-15px) rotate(calc(var(--rest-angle,0deg) + 6deg)) scale(1.08); filter: drop-shadow(0 22px 20px #07332680) drop-shadow(0 0 14px #bdff9b45); }
.scene-link:focus-visible { outline: 2px solid #b7f486; outline-offset: 3px; }
.scene-caption { display: inline-flex; gap: 14px; align-items: center; position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); white-space: nowrap; border: 1px solid #c2f7d045; border-radius: 20px; padding: 7px 13px; background: #073542e8; color: #fff; box-shadow: 0 6px 18px #02242f33; font-size: 12px; line-height: 1.3; font-weight: 550; transition: transform .35s,background .35s; }
.scene-caption>span { color: #b5f368; }
.scene-link:is(:hover,:focus-visible,.is-active)>.scene-caption { transform: translate(-50%,-7px); background: #194f4c; }
.scene-tooltip { position: absolute; width: 242px; max-width: 72vw; left: 50%; bottom: calc(100% - 16px); padding: 18px; transform: translate(-50%,8px); opacity: 0; visibility: hidden; pointer-events: none; color: #123d40; background: #efffe4; border: 1px solid #e5ffd3; border-radius: 18px; box-shadow: 0 15px 40px #00192366; transition: opacity .2s,transform .25s,visibility .2s; z-index: 20; text-align: left; }
.scene-tooltip::after { content: ''; width: 11px; height: 11px; position: absolute; bottom: -6px; left: calc(50% - 6px); background: #efffe4; transform: rotate(45deg); }
.scene-tooltip strong { display: block; font-size: 14px; line-height: 1.35; letter-spacing: -.015em; }
.scene-tooltip>span { display: block; margin-top: 9px; font-size: 11px; line-height: 1.65; color: #456b65; }
.scene-tooltip em { display: block; margin-top: 12px; color: #176639; font-size: 11px; font-weight: 600; }
.scene-cards .scene-tooltip { bottom: auto; top: calc(100% - 8px); }
.scene-cards .scene-tooltip::after { top: -6px; bottom: auto; }
.scene-link:is(:hover,:focus-visible,.is-active)>.scene-tooltip { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%,0); }
.savings-scene[data-tooltip-dismissed] .scene-tooltip { opacity: 0; visibility: hidden; pointer-events: none; }
.scene-esim .scene-tooltip { left: auto; right: 0; transform: translate(0,8px); }
.scene-esim:is(:hover,:focus-visible,.is-active)>.scene-tooltip { transform: translate(0,0); }
.scene-esim .scene-tooltip::after { left: auto; right: 28%; }
.scene-percent { position: absolute; z-index: 6; width: 26%; top: 48%; left: -3%; transform: rotate(-15deg); pointer-events: none; filter: drop-shadow(0 8px 12px #013d3440); }
.scene-coupon { position: absolute; z-index: 7; width: 42%; right: -4%; bottom: -1%; transform: rotate(13deg); pointer-events: none; filter: drop-shadow(0 12px 15px #022b3240); }
.scene-spark { position: absolute; color: #bdff8e; font-size: 27px; line-height: 1; text-shadow: 0 0 24px #a2ff5870; pointer-events: none; }
.scene-spark-one { top: 8%; right: 10%; transform: rotate(15deg); }
.scene-spark-two { bottom: 5%; left: 16%; font-size: 16px; }
.scene-hint { display: flex; justify-content: center; align-items: flex-start; gap: 8px; max-width: 330px; margin: 17px auto 0; padding: 0 8px; font-size: 11px; line-height: 1.6; color: #aacbc6; text-align: center; }
.scene-hint>span:first-child { color: #b5f368; }
.scene-hint-touch { display: none; }
@media(max-width:1100px) {
  .ratings-hero { min-height: 540px; gap: 16px; }
  .ratings-hero h1 { font-size: 44px; }
  .ratings-hero .savings-copy>p { font-size: 15px; }
  .savings-hero-actions { gap: 14px; }
  .scene-caption { font-size: 11px; padding: 6px 11px; }
}
@media(max-width:760px) {
  .ratings-hero { grid-template-columns: 1fr; padding: 24px 0 38px; gap: 0; min-height: 0; }
  .ratings-hero .savings-copy { padding: 16px 0 0; }
  .ratings-hero h1 { font-size: clamp(35px,6vw,46px); }
  .ratings-hero .savings-copy>p { font-size: 15px; margin-top: 20px; max-width: 530px; }
  .savings-hero-actions { margin-top: 24px; }
  .savings-visual { max-width: 510px; margin: 0 auto; }
  .scene-hint { margin-top: 8px; }
}
@media(max-width:480px) {
  .ratings-hero h1 { font-size: 34px; }
  .ratings-hero .savings-copy>p { font-size: 14px; }
  .savings-hero-actions .button { min-height: 50px; font-size: 14px; padding: 14px 20px; }
  .savings-hero-actions>span { max-width: 105px; font-size: 11px; }
  .savings-visual { margin-top: 12px; }
  .scene-tooltip { width: 210px; padding: 15px; border-radius: 14px; }
  .scene-tooltip strong { font-size: 13px; }
  .scene-tooltip>span { font-size: 11px; }
  .scene-caption { font-size: 10px; padding: 5px 9px; gap: 7px; }
}
@media(hover:none), (pointer:coarse) {
  .scene-hint-pointer { display: none; }
  .scene-hint-touch { display: inline; }
}
@media(prefers-reduced-motion:reduce) {
  .scene-link>.savings-sprite, .scene-caption, .scene-tooltip { transition: none; }
  .scene-link:is(:hover,:focus-visible,.is-active)>.savings-sprite { transform: rotate(var(--rest-angle,0deg)); }
}

/* Restored editorial content uses the same Onest / teal design system. */
.live-provider-actions { display:flex;align-items:center;flex-wrap:wrap;gap:20px;padding:22px 26px;margin:28px 0;background:rgba(255,255,255,.055);border:1px solid rgba(200,235,226,.16);border-radius:26px; }
.live-provider-actions>.brand-name { margin-right:auto;font-size:21px; }
.live-content { max-width:100%;margin:34px 0 72px;overflow-wrap:anywhere; }
.live-content>h1,.live-content h1 { max-width:1080px;font-size:clamp(32px,4.2vw,64px);line-height:1.12;letter-spacing:-.045em; }
.live-content h2 { margin:36px 0 20px;font-size:clamp(25px,3vw,38px);line-height:1.2;letter-spacing:-.025em; }
.live-content h3 { margin:24px 0 14px;font-size:22px;line-height:1.3; }
.live-content p,.live-content li { max-width:1050px;line-height:1.7; }
.live-content-section { margin:24px 0;padding:26px;background:rgba(255,255,255,.035);border:1px solid rgba(200,235,226,.1);border-radius:26px; }
.live-content-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px; }
.live-content-card { padding:22px;border:1px solid rgba(200,235,226,.13);border-radius:22px;background:rgba(255,255,255,.045);min-width:0; }
.live-content img.live-content-icon { width:36px;max-height:40px;height:auto;object-fit:contain;vertical-align:middle;border-radius:9px;margin:4px 7px 4px 0; }
.live-content img.live-content-image { display:block;max-width:100%;max-height:600px;width:auto;height:auto;object-fit:contain;border-radius:20px;margin:22px 0; }
.live-content .table-scroll { max-width:100%;overflow:auto;border:1px solid rgba(200,235,226,.15);border-radius:20px; }
.live-content table { width:100%;border-collapse:collapse;font-size:14px; }
.live-content th,.live-content td { min-width:90px;padding:15px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(200,235,226,.13); }
.live-content th { color:var(--text,#fff);background:rgba(255,255,255,.04); }
.live-content a { color:#acf278;text-decoration-thickness:1px;text-underline-offset:4px; }
.live-content a:hover { color:#d9ffbe; }
.live-content button[data-copy] { max-width:100%;padding:10px 16px;border:0;border-radius:12px;background:#a4e66f;color:#063744;font:inherit;font-weight:750;cursor:pointer; }
.live-content button[data-copy]:focus-visible { outline:3px solid #fff;outline-offset:3px; }
.live-content .faq-item { border:1px solid rgba(200,235,226,.15);border-radius:18px;padding:18px 22px;margin:12px 0;background:rgba(255,255,255,.035); }
.live-content summary { cursor:pointer;font-weight:650; }
.live-content dl { display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,2fr);gap:10px 20px; }
.live-content dt { color:#b5cfd5; }.live-content dd { margin:0; }
.live-content-supplement { margin-top:50px; }
@media(max-width:650px) { .live-provider-actions { padding:18px;gap:14px; }.live-provider-actions>.brand-name { width:100%; }.live-provider-actions .button { width:100%;text-align:center; }.live-content-section,.live-content-card { padding:18px; }.live-content th,.live-content td { padding:11px;font-size:13px; } }

.live-content img.live-content-icon:is([src="/assets/brands/plativputi.png"],[src="/assets/brands/betterroaming.png"],[src="/assets/brands/esim365.png"],[src="/assets/brands/instabridge.ico"]) { background:#fff;padding:4px;border-radius:10px; }
.live-content img.live-content-icon[src="/assets/brands/mts.png"] { background:#ff0032; }

.provider-service-list { columns:3 240px;column-gap:28px;margin-top:20px; }.provider-service-list li { break-inside:avoid;padding:3px 0; }.provider-service-list a { color:#b3ec8d; }.provider-services-full summary { cursor:pointer; }

.blog-categories { margin:0 0 24px; }.blog-categories a { padding:9px 16px;border:1px solid rgba(200,235,226,.15);border-radius:999px;color:#d9ece8; }.blog-categories a[aria-current="page"] { background:#a5e779;color:#073442; }.blog-cover { display:block;width:100%;height:210px;object-fit:cover;border-radius:24px 24px 0 0; }.article-card .article-content h2 { font-size:22px;line-height:1.25; }.article-card time { color:#a8c8cf;font-size:12px; }.blog-pagination { display:flex;justify-content:center;align-items:center;gap:24px;margin:35px 0 70px; }