/* ==========================================================================
   eSIM Platform — Base, layout, components, motion
   ========================================================================== */

/* ---------- Bengali ----------
   Kalpurush, by Md. Tanbin Islam Siyam of the Ekushey project, under the SIL
   Open Font License. Self-hosted beside Font Awesome, so no third-party font
   request and nothing new in the Content-Security-Policy.

   The file is a subset — the Bengali block, basic Latin and the punctuation
   these pages use — cut from 314 KB down to 57 KB. Every OpenType layout table
   was kept: Bengali conjuncts are built in GSUB, and without it "ক্ত" falls
   apart into three loose letters.

   font-display: swap, so a slow font never leaves the sentence blank.
   Licence: assets/vendor/kalpurush/kalpurush.LICENSE.txt
   ---------------------------------------------------------------------- */
@font-face {
  font-family: "Kalpurush";
  src: url("../vendor/kalpurush/kalpurush.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0980-09FF, U+200C-200D, U+25CC;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
/* Zoom is off by request: pan only, and no double-tap-to-zoom delay either. */
html, body { touch-action: pan-x pan-y; }
body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  color-scheme: var(--scheme);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  /* overflow-x: hidden on <body> turns the body into a scroll container, and
     that quietly kills every `position: sticky` on the page — the app header
     included. `clip` does the same trimming without creating a scrollport, so
     sticky keeps working. `hidden` stays as the fallback for old browsers. */
  overflow-x: hidden;
}
@supports (overflow-x: clip) {
  body { overflow-x: clip; }
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.18; letter-spacing: -.02em; }
h1 { font-size: clamp(28px, 6.4vw, 44px); }
h2 { font-size: clamp(22px, 4.4vw, 30px); }
h3 { font-size: 18px; letter-spacing: -.01em; }
h4 { font-size: 16px; letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: .92em; letter-spacing: -.01em; }
.overline { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.strong { font-weight: 600; }
.accent-text { color: var(--accent-text); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: 18px; }
.page { padding-top: 18px; padding-bottom: calc(var(--tabbar-h) + 40px); }
@media (min-width: 900px) { .page { padding-bottom: 80px; } }
.section { margin-top: 34px; }
.section:first-child { margin-top: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-head h2, .section-head h3 { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.col { display: flex; flex-direction: column; }
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.stack > * + * { margin-top: 12px; }
.spacer { flex: 1; }
.gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-16 { gap: 16px; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; }
.hide-mobile { display: none; }
@media (min-width: 900px) { .hide-mobile { display: revert; } .hide-desktop { display: none !important; } }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 40;
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.header-inner { height: 100%; display: flex; align-items: center; gap: 14px; }
.brand { display: inline-flex; align-items: center; gap: 0; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.03em; }

.nav-desktop { display: none; gap: 4px; margin-left: 14px; }
@media (min-width: 900px) { .nav-desktop { display: flex; } }
.nav-link {
  padding: 8px 13px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500;
  color: var(--text-muted); transition: color var(--t-fast), background var(--t-fast);
}
.nav-link:hover { color: var(--text); background: var(--surface-2); }
.nav-link.is-active { color: var(--text); background: var(--surface-2); font-weight: 600; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* Who is signed in: the avatar, or Log in. A slot the header can refill without moving anything. */
.hdr-acct { display: contents; }
.btn.hdr-login { flex: none; padding-inline: 16px; font-weight: 700; white-space: nowrap; }
.hero-act .hdr-login { margin-left: 4px; background: var(--block-cta); color: var(--block-cta-ink); }
.hero-act .hdr-login:hover { background: var(--block-cta); filter: brightness(1.08); }
.balance-chip {
  display: none; align-items: center; gap: 7px; height: 36px; padding: 0 12px;
  border-radius: var(--r-full); background: var(--accent-soft); border: 1px solid var(--accent-line);
  font-size: 13px; font-weight: 600; color: var(--accent-text);
}
.balance-chip { display: inline-flex; }
/* On a phone the header is tight, so the chip keeps the number and drops the
   unit — the coin mark already says what the number is. */
@media (max-width: 560px) {
  .balance-chip { height: 32px; padding: 0 9px; font-size: 12px; gap: 5px; }
  .balance-chip .u { display: none; }
}
@media (max-width: 360px) { .balance-chip { padding: 0 7px; font-size: 11.5px; } }
.icon-btn {
  width: 38px; height: 38px; border-radius: var(--r-full); display: grid; place-items: center;
  color: var(--text-muted); border: 1px solid transparent; transition: all var(--t-fast);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.avatar {
  width: 34px; height: 34px; border-radius: var(--r-full); display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; font-weight: 700;
  overflow: hidden; position: relative;
}
/* With a picture the initial stays underneath, so a slow or broken one never
   leaves an empty circle in the header. */
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar.has-photo { background: var(--surface-3, var(--surface-2)); }

/* ---------- Bottom tab bar (mobile) ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--border);
}
@media (min-width: 900px) { .tabbar { display: none; } }
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--text-dim); font-size: 11px; font-weight: 500; position: relative;
  transition: color var(--t-base);
}
.tab svg { width: 22px; height: 22px; transition: transform var(--t-base) var(--e-out); }
.tab.is-active { color: var(--accent-text); font-weight: 600; }
.tab.is-active svg { transform: translateY(-1px) scale(1.06); }
.tab.is-active::after {
  content: ""; position: absolute; top: 6px; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent);
}
.tab:active svg { transform: scale(.9); }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: var(--r-md);
  font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
  transition: transform var(--t-fast) var(--e-out), background var(--t-fast), box-shadow var(--t-base), border-color var(--t-fast), opacity var(--t-fast);
  user-select: none;
}
.btn:active { transform: scale(.975); }
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--text-dim); }
.btn-ghost { color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-danger { background: var(--danger-soft); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
.btn-block { display: flex; width: 100%; }
.btn-lg { height: 52px; font-size: 16px; border-radius: var(--r-md); padding-inline: 22px; }
.btn-sm { height: 36px; font-size: 13px; padding-inline: 13px; border-radius: var(--r-sm); }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; color: var(--accent-ink);
  animation: spin .7s linear infinite;
}
.btn-secondary.is-loading::after, .btn-ghost.is-loading::after { color: var(--text); }
.link { color: var(--accent-text); font-weight: 600; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px; box-shadow: var(--shadow-sm);
}
@media (min-width: 720px) { .card { padding: 20px; } }
.card-hover { transition: transform var(--t-base) var(--e-out), border-color var(--t-base), box-shadow var(--t-base); }
.card-hover:hover { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: var(--shadow-md); }
.card-flat { background: var(--surface-2); border-color: transparent; }
.divider { height: 1px; background: var(--border); margin: 14px -16px; }
@media (min-width: 720px) { .divider { margin-inline: -20px; } }

/* ---------- Flags ---------- */
.flag {
  width: 40px; height: 40px; border-radius: 12px; overflow: hidden; flex: none;
  background: var(--surface-2); border: 1px solid var(--border);
  display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--text-muted);
}
.flag img { width: 100%; height: 100%; object-fit: cover; }
.flag-lg { width: 52px; height: 52px; border-radius: 15px; }
.flag-sm { width: 30px; height: 30px; border-radius: 9px; font-size: 10px; }
.flag-globe { background: var(--surface-2); color: var(--text-muted); }

/* ---------- Chips / badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: var(--r-full); font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--surface-2); color: var(--text-muted);
}
.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-success { background: var(--success-soft); color: var(--success); }
.chip-warning { background: var(--warning-soft); color: var(--warning); }
.chip-danger  { background: var(--danger-soft);  color: var(--danger); }
.chip-info    { background: var(--info-soft);    color: var(--info); }
.chip-accent  { background: var(--accent-soft);  color: var(--accent-text); }
.badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 3px 9px; border-radius: var(--r-full); font-size: 11px; font-weight: 700;
  background: var(--accent); color: var(--accent-ink); letter-spacing: .01em;
}

/* ---------- Filter chips (scroll row) ---------- */
.chip-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 18px 2px; margin-inline: -18px; scrollbar-width: none; scroll-snap-type: x proximity; }
.chip-row::-webkit-scrollbar { display: none; }
.fchip {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px;
  border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border);
  font-size: 13.5px; font-weight: 500; color: var(--text-muted); scroll-snap-align: start;
  transition: all var(--t-fast);
}
.fchip:hover { color: var(--text); border-color: var(--text-dim); }
.fchip.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.fchip img { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; }

/* ---------- Destination cards — the browse row on the home page ----------
   Photo first, name as a caption. Same scroll mechanics as .chip-row so the
   two rows feel like one family. */
.dest-row {
  display: flex; gap: 10px; overflow-x: auto;
  padding: 3px 18px 8px; margin-inline: -18px; scroll-padding-inline: 18px;
  scrollbar-width: none; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.dest-row::-webkit-scrollbar { display: none; }
.dest-row::after { content: ""; flex: 0 0 8px; }

.dest {
  flex: none; width: 102px; scroll-snap-align: start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.dest:hover { transform: translateY(-2px); border-color: var(--text-dim); box-shadow: 0 8px 18px rgba(0, 0, 0, .11); }
.dest:active { transform: translateY(0); }
.dest-ph { display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--surface-2); }
.dest-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A destination without artwork shows its flag, on a card the same size as the rest. */
.dest-ph.dest-flag { display: grid; place-items: center; }
.dest-ph.dest-flag img { width: 58%; height: auto; aspect-ratio: 3 / 2; border-radius: 6px; border: 1px solid var(--border); }
/* Fixed height, so a two-word destination does not make its card taller
   than the one beside it. */
.dest-name {
  display: flex; align-items: center; justify-content: center; text-align: center;
  height: 38px; padding: 0 6px;
  font-size: 12.5px; font-weight: 600; color: var(--text); letter-spacing: -.01em;
  line-height: 1.15; overflow: hidden;
}

/* ---- Which of the two routes? ----------------------------------------------
   Asked once, on the home screen, where the tile cannot know it. */
.flow-pick { display: grid; gap: 10px; }
.flow-opt {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 14px; border-radius: var(--r-lg);
  background: var(--surface-2); border: 1.5px solid var(--border); color: var(--text);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.flow-opt:hover { border-color: var(--accent); }
.flow-opt:active { transform: scale(.985); }
.flow-opt .ic {
  display: grid; place-items: center; flex: none; width: 42px; height: 42px;
  border-radius: 13px; background: var(--accent); color: var(--accent-ink);
}
.flow-opt.is-joytel .ic { background: var(--ic-blue); color: #fff; }
.flow-opt .ic svg { width: 21px; height: 21px; }
.flow-opt .tx { flex: 1; min-width: 0; }
.flow-opt .tx b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.2; }
.flow-opt .tx em { display: block; margin-top: 3px; font-size: 12px; font-style: normal; color: var(--text-dim); }
.flow-opt .go { flex: none; color: var(--text-dim); }
.flow-opt .go svg { width: 17px; height: 17px; }

/* ==========================================================================
   The two call-to-action cards — "Order করুন এখন'ই" under the buy tiles on the
   home page, and the JoyTel line above the footer on every browsing page.

   COLOUR
   They are one pair, not two unrelated cards: the brand's own two colours,
   swapped. Deep warm ink and the brand gold, nothing else.

       .cta-order   ink panel,  gold words,  GOLD button on ink
       .cta-buy     gold panel, ink words,   INK button on gold

   Each button is its own card's opposite, so it carries the most contrast
   available and still cannot clash — the combination is the card's.

   Like the buy tiles above them, each card carries its own colour and so looks
   the same in the light and the dark theme. The ink card gets a gold hairline
   and a gold glow so it reads as a panel on a dark page, not a hole in it.

   ALIGNMENT
   Everything is centred, at every width: the words, the rule under them, and
   the button beneath. A centred block reads as one offer; the old split, with
   words left and a button far right, read as two.

   MOTION
   The highlight is the same trick the "eSIM" wordmark uses — a gradient swept
   across the letters with background-clip. The global prefers-reduced-motion
   rule near the top of this file switches all of it off.
   ========================================================================== */
.cta-band { margin-top: 48px; }
.cta-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 20px; padding: 30px 22px; border-radius: var(--r-xl);
  color: var(--cta-ink);
  background: var(--cta-bg);
  border: 1px solid var(--cta-edge);
  box-shadow: 0 14px 34px -18px var(--cta-shadow);
}

/* ---- ink panel, gold words ---- */
.cta-card.cta-order {
  --cta-bg: linear-gradient(135deg, #241E10 0%, #2E2614 42%, #17130A 100%);
  --cta-ink: #FFF8E6;
  --cta-edge: rgba(255, 199, 44, .28);
  --cta-hl-a: #FFE9A8;
  --cta-hl-b: #FFC72C;
  --cta-rule: linear-gradient(90deg, transparent, #FFC72C, transparent);
  --cta-ring: rgba(255, 199, 44, .22);
  --cta-shadow: rgba(255, 199, 44, .22);
  --cta-btn-bg: linear-gradient(135deg, #FFD65C, #FFC72C 55%, #F2AE00);
  --cta-btn-ink: #14110A;
  --cta-btn-ring: rgba(255, 199, 44, .45);
  --cta-glow-1: rgba(255, 199, 44, .26);
  --cta-glow-2: rgba(255, 149, 0, .16);
}
/* ---- gold panel, ink words ---- */
.cta-card.cta-buy {
  --cta-bg: linear-gradient(135deg, #FFDC74 0%, #FFC72C 46%, #EFA400 100%);
  --cta-ink: #14110A;
  --cta-edge: rgba(20, 17, 10, .16);
  --cta-hl-a: #6B4A00;
  --cta-hl-b: #14110A;
  --cta-rule: linear-gradient(90deg, transparent, #14110A, transparent);
  --cta-ring: rgba(20, 17, 10, .16);
  --cta-shadow: rgba(239, 164, 0, .5);
  --cta-btn-bg: linear-gradient(135deg, #2A2414, #14110A 60%);
  --cta-btn-ink: #FFC72C;
  --cta-btn-ring: rgba(20, 17, 10, .4);
  --cta-glow-1: rgba(255, 255, 255, .46);
  --cta-glow-2: rgba(255, 149, 0, .3);
}

/* ---- the light that drifts behind the words ----
   Two soft blobs on a slow loop, in the card's own colours. No hard shadow,
   no 3D: just enough that the card is never quite still. */
.cta-aurora { position: absolute; inset: -40%; z-index: -1; pointer-events: none; }
.cta-aurora::before, .cta-aurora::after {
  content: ''; position: absolute; width: 56%; aspect-ratio: 1; border-radius: 50%; filter: blur(30px);
}
.cta-aurora::before {
  right: 4%; top: -6%; background: radial-gradient(circle, var(--cta-glow-1), transparent 68%);
  animation: ctaDrift 15s var(--e-in-out) infinite;
}
.cta-aurora::after {
  left: 2%; bottom: -10%; background: radial-gradient(circle, var(--cta-glow-2), transparent 70%);
  animation: ctaDrift 19s var(--e-in-out) -8s infinite reverse;
}
@keyframes ctaDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-12%, 8%, 0) scale(1.18); }
}

/* ---- a signal leaving the corner, as on the buy tiles above ---- */
.cta-rings { position: absolute; z-index: -1; right: -12%; top: -70%; width: 52%; aspect-ratio: 1; pointer-events: none; }
.cta-rings i {
  position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--cta-ring);
  transform: scale(.3); opacity: 0; animation: ctaRing 4.2s ease-out infinite;
}
.cta-rings i:nth-child(2) { animation-delay: 1.4s; }
.cta-rings i:nth-child(3) { animation-delay: 2.8s; }
@keyframes ctaRing {
  0%   { transform: scale(.3); opacity: 0; }
  14%  { opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* ---- the words ---- */
.cta-tx { position: relative; max-width: min(100%, 54rem); }
.cta-tx h3 {
  font-size: 21px; font-weight: 700; line-height: 1.5; letter-spacing: -.01em;
  color: var(--cta-ink); margin: 0;
}
/* Bengali gets the Bengali face and more room between the lines, because the
   matras sit above the line and the conjuncts hang below it. */
.cta-tx h3[lang="bn"], .cta-btn[lang="bn"] { font-family: var(--font-bn); }
.cta-tx h3[lang="bn"] { font-size: 22px; line-height: 1.75; letter-spacing: 0; }

/* The half of the sentence that matters, lit by a highlight that sweeps across
   it every few seconds and then waits. */
.cta-hl {
  background-image: linear-gradient(100deg,
    var(--cta-ink) 0%, var(--cta-ink) 34%,
    var(--cta-hl-a) 46%, var(--cta-hl-b) 52%, var(--cta-hl-a) 58%,
    var(--cta-ink) 70%, var(--cta-ink) 100%);
  background-size: 280% 100%; background-position: 100% 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: ctaSweep 5.5s var(--e-in-out) 1.2s infinite;
}
@keyframes ctaSweep {
  0%, 16%   { background-position: 100% 0; }
  64%, 100% { background-position: 0 0; }
}
/* A thin rule under the lit words, drawn out from the middle as the card
   arrives — centred, like everything else on the card. */
.cta-hl-u { position: relative; }
.cta-hl-u::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; border-radius: 2px;
  background: var(--cta-rule);
  transform: scaleX(0); transform-origin: center;
  animation: ctaRule 800ms var(--e-out) 650ms forwards;
}
[data-reveal]:not(.revealed) .cta-hl-u::after { animation-play-state: paused; }
@keyframes ctaRule { to { transform: scaleX(1); } }

/* ---- the button: the card's own colours, inverted ---- */
.cta-acts { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; width: 100%; }
.cta-acts svg { width: 18px; height: 18px; flex: none; }
.cta-btn {
  min-width: 190px; padding-inline: 26px; height: 46px;
  background: var(--cta-btn-bg); color: var(--cta-btn-ink); border: 0;
  font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6);
  transition: transform 200ms var(--e-out), filter 200ms var(--e-out), box-shadow 200ms var(--e-out);
}
.cta-btn:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .65); }
.cta-btn:active { transform: scale(.975); }
/* One slow breath in the card's own accent, so the eye finds it without the
   page feeling busy. */
.cta-btn::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  animation: ctaPulse 4s var(--e-out) infinite;
}
@keyframes ctaPulse {
  0%, 62%, 100% { box-shadow: 0 0 0 0 var(--cta-btn-ring); }
  82%           { box-shadow: 0 0 0 10px transparent; }
}

@media (max-width: 400px) {
  .cta-btn { min-width: 0; width: 100%; }
}
@media (min-width: 720px) {
  .cta-card { gap: 22px; padding: 38px 32px; }
  .cta-tx h3 { font-size: 27px; }
  .cta-tx h3[lang="bn"] { font-size: 28px; }
}

/* The same card again on the home page, under the two buy tiles. The band
   above the footer carries its own .container; this one is already inside
   the page's. */
.home-order { margin-top: 28px; }
@media (min-width: 720px) { .home-order { margin-top: 32px; } }

/* ---- Destination tiles ------------------------------------------------------
   The home screen browses places, not packages: a round flag, the name under it,
   three across on a phone. The same tile serves a country and a whole region. */
.ctile-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ctile {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 14px 7px 12px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.ctile:hover { transform: translateY(-2px); border-color: var(--text-dim); box-shadow: 0 8px 18px rgba(0, 0, 0, .11); }
.ctile:active { transform: translateY(0); }
.ctile-ph {
  position: relative; display: block; width: 54px; height: 54px; flex: none;
  border-radius: var(--r-full); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border);
}
.ctile-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A region wears the flags of the places it covers, overlapped, with how many. */
.ctile-ph.is-multi {
  width: auto; min-width: 54px; padding: 0 2px; overflow: visible;
  background: none; border: 0; display: flex; align-items: center; justify-content: center;
}
.ctile-ph.is-multi img {
  width: 34px; height: 34px; border-radius: var(--r-full);
  border: 2px solid var(--surface); margin-left: -13px;
}
.ctile-ph.is-multi img:first-of-type { margin-left: 0; }
.ctile-more {
  position: absolute; right: -2px; bottom: -4px;
  min-width: 20px; height: 18px; padding: 0 5px; border-radius: var(--r-full);
  background: var(--accent); color: var(--accent-ink);
  font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Two lines, then it ends — a long name never makes its tile taller than the rest. */
.ctile-n {
  font-size: 12.5px; font-weight: 600; line-height: 1.2; text-align: center;
  letter-spacing: -.01em; height: 30px; width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 560px) { .ctile-grid { gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ctile-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ctile-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

/* A segmented control that carries the width of the page, not of its labels. */
.segmented.seg-wide { display: flex; width: 100%; }
.segmented.seg-wide button { flex: 1 1 auto; min-width: 0; }
@media (max-width: 430px) { .segmented.seg-wide button { padding: 9px 7px; font-size: 11.5px; } }
@media (min-width: 700px) { .segmented.seg-wide { display: inline-flex; width: auto; } .segmented.seg-wide button { padding-inline: 26px; } }

/* Two lengths of the same sentence — the short one is all that fits on a phone. */
.narrow-only { display: none; }
@media (max-width: 560px) {
  .wide-only { display: none; }
  .narrow-only { display: inline; }
}

@media (max-width: 380px) {
  .dest-row { margin-inline: -14px; padding-inline: 14px; scroll-padding-inline: 14px; gap: 8px; }
  .dest { width: 92px; }
  .dest-name { font-size: 11.5px; height: 36px; padding: 0 5px; }
}
@media (max-width: 330px) {
  .dest-row { margin-inline: -12px; padding-inline: 12px; scroll-padding-inline: 12px; }
  .dest { width: 86px; }
}

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.input, .select, .textarea {
  width: 100%; height: 48px; padding: 0 14px; border-radius: var(--r-sm);
  background: var(--input-bg); border: 1px solid var(--border); color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  font-size: 15px;
}
.textarea { height: auto; padding: 12px 14px; resize: vertical; min-height: 96px; }
.input::placeholder { color: var(--text-dim); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.input.is-error { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.input.is-valid { border-color: var(--success); }
.field-error { font-size: 12.5px; color: var(--danger); font-weight: 500; }
.field-hint { font-size: 12.5px; color: var(--text-dim); }
.input-group { display: flex; gap: 8px; }
.input-group .input { flex: 1; }

/* A password box with its show / hide eye inside (UI.peekPasswords, Font Awesome). */
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 52px; }
.pw-eye {
  position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: calc(var(--r-sm) - 2px); background: transparent; color: var(--text-dim); cursor: pointer;
  font-size: 17px; transition: color var(--t-fast), background var(--t-fast);
}
.pw-eye:hover, .pw-eye:focus-visible { color: var(--text); background: var(--surface-2); outline: none; }
.pw-eye i { line-height: 1; }
.pw-eye:active i { transform: scale(.9); }

/* Order details: an order saved but not paid, with its Pay now button. */
.paynow { border-color: var(--accent-line); background: linear-gradient(0deg, var(--accent-softer), var(--accent-softer)), var(--surface); }
.paynow.is-failed { border-color: var(--danger); background: linear-gradient(0deg, var(--danger-soft), var(--danger-soft)), var(--surface); }
.paynow-head { display: flex; align-items: flex-start; gap: 12px; }
.paynow-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-text); }
.paynow.is-failed .paynow-ic { background: var(--danger-soft); color: var(--danger); }
.paynow-ic svg { width: 20px; height: 20px; }
.paynow h4 { font-size: 16px; }
.paynow .btn { animation: pulse 2.4s var(--e-in-out) infinite; }
@media (prefers-reduced-motion: reduce) { .paynow .btn { animation: none; } }

/* "Continue with Google" — Google's own white button and coloured mark, in both themes. */
.or-line { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--text-dim); font-size: 12.5px; }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.btn-google {
  width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; gap: 12px;
  border-radius: var(--r-sm); border: 1px solid #DADCE0; background: #FFFFFF; color: #1F1F1F;
  font-family: Roboto, var(--font-body); font-size: 15px; font-weight: 600; text-decoration: none;
  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn-google:hover { background: #F8FAFF; box-shadow: 0 1px 3px rgba(60,64,67,.25); }
.btn-google:active { transform: scale(.99); }
.btn-google svg { width: 20px; height: 20px; flex: none; }
.btn-google.is-loading { pointer-events: none; opacity: .7; }
.g-finish-who { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-sm); background: var(--surface-2); }
.g-finish-who svg { width: 22px; height: 22px; flex: none; }
.g-finish-who .t { min-width: 0; }
.g-finish-who .t b { display: block; font-size: 14px; overflow-wrap: anywhere; }
.g-finish-who .t span { font-size: 12px; color: var(--text-dim); }

/* OTP boxes */
.otp { display: flex; gap: 9px; justify-content: center; }
.otp input {
  width: 46px; height: 56px; text-align: center; font-size: 22px; font-weight: 700;
  font-variant-numeric: tabular-nums; border-radius: var(--r-sm);
  background: var(--input-bg); border: 1.5px solid var(--border); color: var(--text);
  transition: all var(--t-fast);
}
.otp input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); transform: translateY(-2px); }
.otp input.filled { border-color: var(--accent-line); background: var(--accent-softer); }
@media (max-width: 380px) { .otp input { width: 42px; height: 52px; font-size: 20px; } }

/* Toggle / segmented */
.segmented { display: inline-flex; padding: 4px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--border); gap: 2px; }
.segmented button {
  padding: 7px 15px; border-radius: var(--r-full); font-size: 13px; font-weight: 600; color: var(--text-muted);
  transition: all var(--t-fast);
}
.segmented button.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
/* A choice that is not sold here stays in place, switched off, so the row never
   changes shape from one destination to the next. */
.segmented button:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; background: none; }
:root[data-theme="dark"] .segmented button.is-active { background: var(--surface-3); }

/* Search */
.search { position: relative; }
.search .input { height: 54px; padding-left: 46px; font-size: 15.5px; border-radius: var(--r-md); }
.search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--text-dim); pointer-events: none; }
.search-hero .input { height: 60px; background: var(--surface); box-shadow: var(--shadow-md); border-color: var(--border); }
.search-hero .input:focus { box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-md); }

/* Autocomplete */
.suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); overflow: hidden; max-height: 320px; overflow-y: auto;
}
.suggest button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 14px; text-align: left; transition: background var(--t-fast); }
.suggest button:hover, .suggest button.is-cursor { background: var(--surface-2); }

/* ---------- Package card ---------- */
/* Every package card is a flex column of equal height, with the spec strip
   pinned to the bottom — so a row of cards is scannable as a single grid. */
.pkg { position: relative; display: flex; flex-direction: column; height: 100%; }
/* Reserved row so every card keeps identical geometry, badge or not */
.pkg-badge-row { min-height: 26px; margin-bottom: 4px; }
.pkg-top { display: flex; align-items: flex-start; gap: 12px; }
.pkg-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pkg-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.pkg-price { margin-left: auto; text-align: right; flex: none; }
.pkg-price .amount { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.pkg-price .per { font-size: 11.5px; color: var(--text-dim); }
.pkg-specs { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
/* inside a card, push the strip to the bottom so rows of cards line up */
.pkg .pkg-top { margin-bottom: 14px; }
.pkg .pkg-specs { margin-top: auto; }
.pkg-specs > div { text-align: center; position: relative; }
.pkg-specs > div + div::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--border); }
.pkg-specs .k { font-size: 11px; color: var(--text-dim); font-weight: 500; }
.pkg-specs .v { font-size: 15px; font-weight: 700; font-family: var(--font-display); letter-spacing: -.01em; margin-top: 1px; }

/* ---------- eSIM card ---------- */
.esim-card { position: relative; overflow: hidden; }
.esim-head { display: flex; align-items: center; gap: 12px; }
.esim-name { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; letter-spacing: -.01em; }
.esim-meta { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.meter { height: 7px; border-radius: var(--r-full); background: var(--ring-track); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: var(--r-full); background: var(--accent); width: 0; transition: width 900ms var(--e-out); }
.meter.is-low > i { background: var(--warning); }

/* ---------- Ring gauge ---------- */
.ring { position: relative; width: 200px; height: 130px; margin-inline: auto; }
.ring svg { width: 100%; height: 100%; overflow: visible; }
.ring .track { stroke: var(--ring-track); }
.ring .fill { stroke: var(--accent); transition: stroke-dashoffset 1.1s var(--e-out); }
.ring.is-low .fill { stroke: var(--warning); }
.ring-center { position: absolute; inset: auto 0 6px; text-align: center; }
.ring-value { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ring-label { font-size: 12px; color: var(--text-dim); margin-top: 1px; }

/* ---------- Stat tiles ---------- */
.stat { padding: 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border-soft); }
.stat .k { font-size: 11.5px; color: var(--text-dim); font-weight: 500; }
.stat .v { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ---------- List rows ---------- */
.list { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.list-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; width: 100%; text-align: left; transition: background var(--t-fast); }
.list-row + .list-row { border-top: 1px solid var(--border-soft); }
.list-row:hover { background: var(--surface-2); }
.list-row .chev { margin-left: auto; color: var(--text-dim); flex: none; transition: transform var(--t-fast); }
.list-row:hover .chev { transform: translateX(2px); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 36px 0 30px; border-bottom: 1px solid var(--border); }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: var(--r-full); background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-text); font-size: 12.5px; font-weight: 600; }
.hero h1 { margin-top: 16px; max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--accent-text); }
.hero p.lead { margin-top: 12px; font-size: 15.5px; color: var(--text-muted); max-width: 46ch; }
@media (min-width: 900px) {
  .hero { padding: 66px 0 50px; }
  .hero h1 { max-width: 18ch; }
  .hero p.lead { font-size: 17px; }
}

/* ---------- Steps (how it works) ---------- */
.steps { display: grid; gap: 12px; counter-reset: s; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.step { display: flex; gap: 13px; align-items: flex-start; padding: 15px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border-soft); }
.step-n {
  flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 13px;
}
.step h4 { font-size: 14.5px; }
.step p { font-size: 13px; color: var(--text-muted); margin-top: 3px; }

/* ---------- Trust strip ---------- */
.trust { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.trust div { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-muted); }
.trust svg { width: 18px; height: 18px; color: var(--accent-text); flex: none; }

/* ---------- Sticky buy bar ---------- */
.buybar {
  /* sits directly above the bottom tab bar, never on top of it */
  position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index: 44;
  padding: 12px 18px;
  background: var(--bg); border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px;
  transform: translateY(110%); transition: transform var(--t-slow) var(--e-out);
}
.buybar.is-visible { transform: none; }
.buybar .btn { flex: 1; max-width: 260px; margin-left: auto; }
@media (min-width: 900px) { .buybar { display: none; } }

/* ---------- Sheet / modal ---------- */
.backdrop {
  position: fixed; inset: 0; z-index: 60; background: var(--overlay);
  opacity: 0; transition: opacity var(--t-slow);
}
.backdrop.is-open { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  background: var(--bg-elevated); border-top: 1px solid var(--border);
  border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow-lg);
  padding: 8px 18px calc(22px + env(safe-area-inset-bottom));
  max-height: 88dvh; overflow-y: auto;
  transform: translateY(100%); transition: transform var(--t-slow) var(--e-out);
}
.sheet.is-open { transform: none; }
.sheet-grab { width: 40px; height: 4px; border-radius: var(--r-full); background: var(--border); margin: 6px auto 14px; }
@media (min-width: 720px) {
  .sheet {
    left: 50%; right: auto; bottom: auto; top: 50%; width: min(520px, calc(100vw - 40px));
    border-radius: var(--r-xl); border: 1px solid var(--border);
    transform: translate(-50%, -46%) scale(.96); opacity: 0;
    transition: transform var(--t-slow) var(--e-out), opacity var(--t-base);
  }
  .sheet.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .sheet-grab { display: none; }
}
.sheet-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-h) + 16px); z-index: 80; display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
@media (min-width: 900px) { .toast-wrap { bottom: 24px; } }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-radius: var(--r-md);
  background: var(--bg-elevated); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  font-size: 13.5px; font-weight: 500;
  animation: toastIn var(--t-slow) var(--e-out) both;
}
.toast svg { width: 18px; height: 18px; flex: none; }
.toast.ok svg { color: var(--success); }
.toast.err svg { color: var(--danger); }
.toast.is-out { animation: toastOut 180ms ease-in both; }

/* ---------- QR ---------- */
.qr-plate {
  background: #FFFFFF; border-radius: var(--r-lg); padding: 16px;
  width: min(280px, 78vw); margin-inline: auto; display: grid; place-items: center;
  box-shadow: 0 10px 40px rgba(0,0,0,.28);
}
.qr-plate canvas, .qr-plate img, .qr-plate svg { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.copyrow {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border);
}
.copyrow .val { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 12.5px; overflow-wrap: anywhere; }
.copybtn { flex: none; width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-muted); transition: all var(--t-fast); }
.copybtn:hover { background: var(--surface-3); color: var(--text); }

/* ---------- Skeleton ---------- */
.sk { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--r-sm); }
.sk::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 7%, transparent), transparent);
  animation: shimmer 1.4s infinite;
}
.sk-line { height: 12px; margin-bottom: 8px; }
.sk-card { height: 148px; border-radius: var(--r-lg); }

/* The whole-page outline layout.js puts in #main / #wrap until the page has
   its data. It fades in only after a short moment, so a page that is already
   fast never flashes it, and the real content fades in over it. */
.page-skel { animation: skIn 260ms ease 150ms both; }
@keyframes skIn { from { opacity: 0; } to { opacity: 1; } }
.page-skel { --sk-fill: color-mix(in srgb, var(--text) 10%, transparent); --sk-shine: rgba(255, 255, 255, .75); }
:root[data-theme="dark"] .page-skel { --sk-fill: color-mix(in srgb, var(--text) 9%, transparent); --sk-shine: rgba(255, 255, 255, .07); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page-skel { --sk-fill: color-mix(in srgb, var(--text) 9%, transparent); --sk-shine: rgba(255, 255, 255, .07); }
}
.page-skel .sk { background: var(--sk-fill); }
.page-skel .sk::after { background: linear-gradient(90deg, transparent, var(--sk-shine), transparent); }
.page-skel .hero-block .sk { background: var(--block-hover); }
.page-skel .hero-block .sk::after { display: none; }
.page-skel .sk-line { height: 12px; margin-bottom: 9px; border-radius: 6px; max-width: 100%; }
.page-skel .sk-line:last-child { margin-bottom: 0; }
.sk-circle { border-radius: 50%; flex: none; }
.sk-banner { aspect-ratio: 2.09 / 1; border-radius: var(--r-lg); }
.sk-wallet { min-height: 206px; border-radius: 24px; }
.sk-sq { aspect-ratio: 1 / 1; border-radius: 24px; }
.sk-bar { height: 54px; border-radius: var(--r-md); }
.sk-pill { height: 46px; border-radius: var(--r-full); }
.sk-tile { height: 104px; border-radius: var(--r-lg); }
.sk-dest { flex: none; width: 102px; height: 120px; border-radius: var(--r-lg); }
.sk-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sk-strip { display: flex; gap: 10px; overflow: hidden; }
.sk-row {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
}
.sk-row + .sk-row { margin-top: 10px; }
.page-content-in { animation: skIn 320ms ease both; }

/* For screen readers only. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* On pages with a footer, the page is at least one screen tall: the footer
   waits below the fold, even while the content is still on its way. */
body[data-footer="1"] > main { min-height: 100vh; min-height: 100dvh; }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 44px 20px; }
.empty-icon {
  width: 60px; height: 60px; border-radius: 20px; margin: 0 auto 16px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-text);
}
.empty-icon svg { width: 26px; height: 26px; }
.empty h3 { font-size: 17px; }
.empty p { color: var(--text-muted); font-size: 14px; margin-top: 6px; max-width: 34ch; margin-inline: auto; }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.tl-item { position: relative; padding-bottom: 18px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -22px; top: 4px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border);
}
.tl-item.done::before { background: var(--success); border-color: var(--success); }
.tl-item.active::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); animation: pulse 1.6s infinite; }
.tl-title { font-size: 14px; font-weight: 600; }
.tl-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }

/* ---------- Accordion ---------- */
.acc { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.acc + .acc { margin-top: 8px; }
.acc summary { padding: 14px 16px; font-weight: 600; font-size: 14.5px; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; margin-left: auto; font-size: 19px; color: var(--text-dim); transition: transform var(--t-base); }
.acc[open] summary::after { transform: rotate(45deg); }
.acc .acc-body { padding: 0 16px 15px; font-size: 14px; color: var(--text-muted); }
/* A fold that sits inside a card already: no second border around it. */
.acc.acc-flat { border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; }
.acc.acc-flat summary { padding: 12px 0 11px; font-size: 13.5px; }
.acc.acc-flat .acc-body { padding: 0 0 10px; }

/* ---------- Progress / stepper ---------- */
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper i { flex: 1; height: 3px; border-radius: var(--r-full); background: var(--border); overflow: hidden; }
.stepper i.done { background: var(--accent); }
.stepper i.now::after { content: ""; display: block; height: 100%; width: 55%; background: var(--accent); border-radius: var(--r-full); animation: grow 1.2s var(--e-out) both; }

/* ---------- Success check ---------- */
.check-wrap { width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: var(--success-soft); animation: pop 420ms var(--e-out) both; }
.check-wrap svg { width: 40px; height: 40px; color: var(--success); }
.check-wrap path { stroke-dasharray: 48; stroke-dashoffset: 48; animation: draw 460ms 180ms var(--e-out) forwards; }

/* ---------- Reveal on scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(16px); }
[data-reveal].revealed { opacity: 1; transform: none; transition: opacity 520ms var(--e-out), transform 520ms var(--e-out); }

/* ---------- Animations ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 100% { transform: translateX(100%); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }
@keyframes pop { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes grow { from { width: 0; } }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 4px var(--accent-soft); } 50% { box-shadow: 0 0 0 8px transparent; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.anim-in { animation: fadeUp 460ms var(--e-out) both; }
.d1 { animation-delay: 60ms; } .d2 { animation-delay: 120ms; } .d3 { animation-delay: 180ms; }
.d4 { animation-delay: 240ms; } .d5 { animation-delay: 300ms; } .d6 { animation-delay: 360ms; }

/* View transitions between pages (progressive enhancement) */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   Home / account app surfaces — solid colour only, no gradients or glows
   ========================================================================== */

/* ---------- Greeting strip ---------- */
.greet { display: flex; align-items: center; gap: 12px; padding: 16px 0 4px; }
.greet-av {
  width: 46px; height: 46px; border-radius: var(--r-full); flex: none; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font-family: var(--font-display);
  font-weight: 800; font-size: 18px;
}
.greet-name { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.greet-sub { font-size: 12.5px; color: var(--text-dim); }

/* ---------- Balance strip ---------- */
.balance {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 14px 16px;
}
.balance-ic {
  width: 40px; height: 40px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-text);
}
.balance-ic svg { width: 20px; height: 20px; }
.balance-val { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* ---------- The coin mark ------------------------------------------------
   The EN coin: the owner's gold artwork (assets/img/en-coin.png, 256px, a
   transparent square), shown in its own colours. Gold with dark lettering
   reads on the white card and on the dark one alike. */
.coin {
  display: inline-block; flex: none; width: 20px; height: 20px;
  background: url(../img/en-coin.png) no-repeat center / contain;
}
.coin-sm, .coin-md { width: 18px; height: 18px; }   /* header chip, list rows */
.coin-lg { width: 38px; height: 38px; }
@media (max-width: 380px) { .coin-lg { width: 34px; height: 34px; } }


/* ---------- Quick actions (4 up) ---------- */
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.qa { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.qa-ic {
  width: 50px; height: 50px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.qa-ic svg { width: 21px; height: 21px; }
.qa:hover .qa-ic { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.qa:active .qa-ic { transform: scale(.94); }
.qa span:last-child { font-size: 11.5px; font-weight: 500; color: var(--text-muted); line-height: 1.25; }

/* ---------- Segmented data gauge ("speed meter") ---------- */
.gauge { position: relative; width: 100%; max-width: 260px; margin-inline: auto; }
.gauge svg { width: 100%; height: auto; display: block; }
.gauge .bar { stroke: var(--surface-3); stroke-width: 6; stroke-linecap: round; }
.gauge .bar.on { stroke: var(--accent); }
.gauge.is-low .bar.on { stroke: var(--warning); }
.gauge .bar.on { animation: barIn 260ms var(--e-out) both; }
.gauge-center { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; }
.gauge-value {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em;
  font-size: 30px; font-variant-numeric: tabular-nums; line-height: 1.05;
}
.gauge-unit { font-size: 16px; font-weight: 600; margin-left: 2px; }
.gauge-label { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.gauge-foot { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); margin-top: 4px; padding-top: 12px; }
.gauge-foot > div { text-align: center; position: relative; }
.gauge-foot > div + div::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px; background: var(--border); }
.gauge-foot .k { font-size: 11px; color: var(--text-dim); }
.gauge-foot .v { font-size: 14px; font-weight: 700; font-family: var(--font-display); margin-top: 1px; font-variant-numeric: tabular-nums; }
@keyframes barIn { from { opacity: .12; } to { opacity: 1; } }

/* ---------- Horizontal pager (multiple eSIMs) ---------- */
.pager { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: -18px; padding-inline: 18px; }
.pager::-webkit-scrollbar { display: none; }
.pager > * { flex: 0 0 100%; scroll-snap-align: center; }
@media (min-width: 720px) { .pager > * { flex: 0 0 calc(50% - 6px); } }
@media (min-width: 1000px) { .pager > * { flex: 0 0 calc(33.333% - 8px); } }
.dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--surface-3); transition: all var(--t-base); }
.dots i.on { background: var(--accent); width: 18px; border-radius: var(--r-full); }

/* ---------- List rows with a leading icon ---------- */
.list-row .row-ic {
  width: 36px; height: 36px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center;
  background: var(--surface-2); color: var(--text-muted);
}
.list-row .row-ic svg { width: 18px; height: 18px; }
.list-row:hover .row-ic { color: var(--text); }

/* ---------- Profile header ---------- */
.profile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 22px 18px 0; text-align: center;
}
.profile-av {
  width: 74px; height: 74px; border-radius: var(--r-full); margin: 0 auto 12px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 800; font-size: 28px;
}
.profile h1 { font-size: 21px; }
.profile-contact { font-size: 13px; color: var(--text-muted); margin-top: 4px; overflow-wrap: anywhere; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; border-top: 1px solid var(--border); }
.profile-stats > div { padding: 14px 6px; position: relative; }
.profile-stats > div + div::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--border); }
.profile-stats .v { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.profile-stats .k { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }

/* ---------- Section label used above lists ---------- */
.group-label { font-size: 13px; font-weight: 600; color: var(--text-dim); margin: 0 0 8px 2px; }

/* ==========================================================================
   Detailing pass — crafted section headers, ticket cards, stat strips
   ========================================================================== */

/* ---------- Section header with an overline ---------- */
.section-head .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-dim); display: block; margin-bottom: 3px; }
.section-head .titlewrap { flex: 1; min-width: 0; }
.section-head .titlewrap h2, .section-head .titlewrap h3 { font-size: 18px; }

/* ---------- Card header (title + action inside a card) ---------- */
.panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.panel-head .overline { margin: 0; }
.panel-head .spacer { flex: 1; }

/* ---------- Boarding-pass style cut ---------- */
.ticket-cut { position: relative; height: 0; margin: 16px -16px; border-top: 1px dashed var(--border); }
@media (min-width: 720px) { .ticket-cut { margin-inline: -20px; } }
.ticket-cut::before, .ticket-cut::after {
  content: ""; position: absolute; top: -8px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border);
}
.ticket-cut::before { left: -8px; border-right-color: transparent; border-top-color: transparent; }
.ticket-cut::after  { right: -8px; border-left-color: transparent; border-top-color: transparent; }

/* ---------- Balance card ---------- */
.balance { align-items: flex-start; }
.balance-actions { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }

/* ---------- Compact stat strip ---------- */
.stat-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden;
}
.stat-strip > div { padding: 13px 10px; text-align: center; position: relative; }
.stat-strip > div + div::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: var(--border); }
.stat-strip .k { font-size: 11px; color: var(--text-dim); }
.stat-strip .v { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.02em;
  margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ---------- Quick action badge ---------- */
.qa-ic { position: relative; }
.qa-badge {
  position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: var(--r-full); background: var(--accent); color: var(--accent-ink);
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
  border: 2px solid var(--surface);
}

/* ---------- Attention strip ---------- */
.notice {
  display: flex; align-items: center; gap: 13px;
  border: 1px solid var(--info); background: var(--info-soft);
  border-radius: var(--r-lg); padding: 14px 16px;
}
.notice-ic { width: 36px; height: 36px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center;
  background: var(--info); color: #fff; }
.notice-ic svg { width: 19px; height: 19px; }

/* ---------- Contextual footer link on a card ---------- */
.card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 14px -16px -16px; padding: 12px 16px;
  border-top: 1px solid var(--border); background: var(--surface-2);
  border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px);
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  transition: color var(--t-fast), background var(--t-fast);
}
@media (min-width: 720px) { .card-foot { margin: 16px -20px -20px; padding-inline: 20px; } }
.card-foot:hover { color: var(--text); background: var(--surface-3); }

/* ---------- Profile header band ---------- */
.profile { padding-top: 0; overflow: hidden; }
.profile-band { height: 76px; margin: 0 -18px; background: var(--surface-2); border-bottom: 2px solid var(--accent); }
.profile-av { margin-top: -40px; border: 4px solid var(--surface); }
.profile-meta { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- Definition rows ---------- */
.dl { display: grid; gap: 10px; }
.dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 13.5px; }
.dl .k { color: var(--text-muted); }
.dl .v { font-weight: 600; text-align: right; }

/* ==========================================================================
   Profile header — compact. One row of identity, one strip of numbers.
   No hero band, no oversized avatar: the useful controls stay above the fold.
   ========================================================================== */
.profile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px; text-align: left; overflow: hidden;
}
.profile-band { display: none; }
.profile-top { display: flex; align-items: center; gap: 13px; }
.profile-av {
  width: 52px; height: 52px; border-radius: var(--r-full); flex: none; margin: 0; border: 0;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 800; font-size: 21px;
}
/* The picture is the button that changes it: one tap, with a camera badge so
   it reads as something you can do, not as decoration. */
.profile-av { position: relative; overflow: visible; cursor: pointer; }
.profile-av img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: var(--r-full); object-fit: cover;
}
.profile-av .profile-av-i { position: relative; }
.profile-av.has-photo .profile-av-i { visibility: hidden; }
.profile-av-cam {
  position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: var(--r-full);
  display: grid; place-items: center; font-size: 10px;
  background: var(--surface); color: var(--text-muted); border: 1px solid var(--border);
  transition: color var(--t-fast), background var(--t-fast);
}
.profile-av:hover .profile-av-cam { color: var(--text); background: var(--surface-2); }
.profile-av:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.profile-av.is-busy { pointer-events: none; }
.profile-av.is-busy::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-full);
  background: rgba(0, 0, 0, .45);
  border: 2px solid transparent; border-top-color: #fff;
  animation: spin .7s linear infinite;
}

.profile h1 { font-size: 18px; }
.profile-contact { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; overflow-wrap: anywhere; }

/* ---------- A saved JoyTel SIM, on the account and at checkout ---------- */
.sim-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; }
.sim-row + .sim-row { border-top: 1px solid var(--border-soft); }
.sim-row .row-ic {
  width: 34px; height: 34px; flex: none; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--surface-2); color: var(--text-muted);
}
.sim-row .row-ic svg { width: 18px; height: 18px; }
.sim-row .icon-btn { width: 32px; height: 32px; flex: none; font-size: 12px; }
/* The saved numbers offered above the SN box at checkout. */
.sim-picks { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.sim-pick {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
  border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface-2);
  font-size: 12.5px; font-weight: 600; color: var(--text-muted); transition: all var(--t-fast);
}
.sim-pick:hover { color: var(--text); border-color: var(--border-strong, var(--border)); }
.sim-pick.is-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }
.sim-pick .mono { font-size: 11.5px; }

/* ---------- The ways to pay, in the footer ----------
   Logos sit on white tiles in both themes: brand marks are drawn for white, and a
   purple or dark-red logo on a dark tile is simply not readable. */
.pay-strip {
  display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap;
  margin-top: 22px; padding: 14px 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
}
.pay-strip-h { font-family: var(--font-display); font-weight: 700; font-size: 15px; white-space: nowrap; }
.pay-strip-logos { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.pay-strip-logos { gap: 6px; }
.pay-logo {
  display: grid; place-items: center; height: 34px; min-width: 44px; padding: 4px 6px;
  border-radius: 7px; background: #fff; border: 1px solid rgba(0, 0, 0, .06);
}
.pay-logo img { height: 22px; width: auto; max-width: 62px; object-fit: contain; display: block; }
.pay-strip-by {
  display: flex; align-items: center; gap: 10px; padding-left: 16px; border-left: 1px solid var(--border);
  font-size: 12px; color: var(--text-muted); white-space: nowrap;
}
.pay-strip-by img { height: 28px; width: auto; padding: 4px 8px; border-radius: 8px; background: #fff; }
@media (max-width: 640px) {
  .pay-strip { padding: 12px; gap: 10px; }
  .pay-strip-h { width: 100%; font-size: 14px; }
  .pay-logo { height: 32px; min-width: 44px; padding: 4px 6px; }
  .pay-logo img { height: 21px; max-width: 64px; }
  .pay-strip-by { width: 100%; padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--border); }
}
.profile-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; justify-content: flex-start; }
.profile-meta .chip { height: 24px; font-size: 11.5px; }
.profile-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 14px -16px -16px; border-top: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px);
}
.profile-stats > div { padding: 11px 6px; text-align: center; position: relative; }
.profile-stats > div + div::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: var(--border); }
.profile-stats .v { font-size: 16px; }
.profile-stats .k { font-size: 11px; margin-top: 1px; }

/* ==========================================================================
   Small-phone pass (360px and below) — the account header must stay one
   compact block, not spill into four stacked lines.
   ========================================================================== */
@media (max-width: 380px) {
  .container { padding-inline: 14px; }
  .profile { padding: 14px; }
  .profile-av { width: 46px; height: 46px; font-size: 19px; }
  .profile h1 { font-size: 16.5px; }
  .profile-top { gap: 11px; }
  .profile-meta { margin-top: 10px; gap: 5px; }
  .profile-meta .chip { height: 22px; font-size: 11px; padding: 0 8px; }
  .profile-stats { margin: 12px -14px -14px; }
  .profile-stats > div { padding: 10px 4px; }
  .profile-stats .v { font-size: 15px; }
  .profile-stats .k { font-size: 10.5px; }
  .list-row { padding: 12px 13px; gap: 10px; }
  .list-row .row-ic { width: 32px; height: 32px; }
  .list-row .row-ic svg { width: 16px; height: 16px; }
  .group-label { font-size: 12.5px; }
  .btn-sm { height: 32px; padding-inline: 11px; font-size: 12.5px; }
}

/* Contact lines never push the Edit button off-screen */
.profile-contact { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-contact + .profile-contact { margin-top: 0; }

/* Secondary line in a list row never wraps on a narrow phone */
.list-row .row-sub { display: block; }
@media (max-width: 400px) {
  .list-row .row-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Contextual card footer stays on one line on narrow phones */
@media (max-width: 400px) {
  .card-foot { font-size: 12.5px; padding-block: 11px; }
  .card-foot > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .card-foot > span:last-child { flex: none; white-space: nowrap; }
}

/* ==========================================================================
   Coin wallet
   ========================================================================== */
.pack {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 13px 14px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border); text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.pack:hover { border-color: var(--text-dim); }
.pack.is-active { border-color: var(--accent); background: var(--accent-soft); }
.pack-coins { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -.02em; }
.pack-tk { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pack-badge {
  position: absolute; top: -8px; right: 10px;
  padding: 2px 7px; border-radius: var(--r-full);
  background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight: 700;
}
.coin-row { display: flex; align-items: center; gap: 14px; }
.coin-sub { font-size: 12px; color: var(--text-dim); margin-top: 1px; }

/* ==========================================================================
   App bar (home) — profile + name left, brand centred, actions right
   ========================================================================== */
.appbar { position: relative; height: 100%; display: flex; align-items: center; }
.appbar-brand {
  position: absolute; left: 50%; transform: translateX(-50%);
  pointer-events: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -.03em;
}
.appbar-user {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  max-width: calc(50% - 62px);
}
.appbar-av {
  width: 36px; height: 36px; border-radius: var(--r-full); flex: none; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
}
.appbar-name { min-width: 0; line-height: 1.15; }
.appbar-name .hi { font-size: 11px; color: var(--text-dim); display: block; }
.appbar-name .who {
  font-size: 14.5px; font-weight: 600; letter-spacing: -.01em;
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.appbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
@media (max-width: 420px) { .appbar-brand span.word { display: none; } }

/* notification bell + unread badge */
.bell { position: relative; }
.bell-dot {
  position: absolute; top: 3px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: var(--r-full); background: var(--danger); color: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 1; display: grid; place-items: center;
  border: 1.5px solid var(--surface); letter-spacing: -.02em;
}
.bell svg { width: 19px; height: 19px; }

/* ==========================================================================
   Verified status chip
   ========================================================================== */
.chip svg { width: 13px; height: 13px; flex: none; }
.chip-verified { background: var(--success-soft); color: var(--success); font-weight: 700; }

/* ==========================================================================
   Quantity stepper
   ========================================================================== */
.qty { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--border);
  background: var(--surface-2); border-radius: var(--r-md); padding: 3px; }
.qty button {
  width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center;
  color: var(--text); font-size: 18px; font-weight: 600; transition: background var(--t-fast);
}
.qty button:hover:not(:disabled) { background: var(--surface-3); }
.qty button:disabled { color: var(--text-dim); cursor: not-allowed; }
.qty output { min-width: 34px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Reference code block
   ========================================================================== */
.refbox {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--r-sm);
  padding: 9px 12px;
}
.refbox .code { font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; letter-spacing: .02em; flex: 1; min-width: 0; }

/* ==========================================================================
   Chip rows never end flush against the screen edge
   ========================================================================== */
.chip-row::after { content: ""; flex: 0 0 4px; }
.chip-row { scroll-padding-inline: 18px; }

/* ==========================================================================
   Notification feed
   ========================================================================== */
.notif { display: flex; gap: 12px; padding: 14px 16px; width: 100%; text-align: left;
  transition: background var(--t-fast); position: relative; }
.notif + .notif { border-top: 1px solid var(--border-soft); }
.notif:hover { background: var(--surface-2); }
.notif-ic { width: 38px; height: 38px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center; }
.notif-ic svg { width: 19px; height: 19px; }
.notif-title { font-size: 14.5px; font-weight: 600; }
.notif-body { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.notif-time { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; }
.notif.is-unread { background: var(--accent-softer); }
.notif.is-unread .notif-title::after {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-left: 7px; vertical-align: 1px;
}

/* App bar text never wraps; on small phones the greeting yields to the name */
.appbar-name .hi, .appbar-name .who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) {
  .appbar-user { max-width: calc(50% - 34px); }
  .appbar-name .hi { display: none; }
  .appbar-name .who { font-size: 15px; }
}

/* Wordmark only — no icon tile. Stays legible when the app bar gets tight. */
.appbar-brand { font-size: 16px; }
@media (max-width: 420px) {
  .appbar-brand { font-size: 15px; }
  .appbar-user { max-width: calc(50% - 40px); }
}

/* Single-line destination row: scrolls edge to edge, first chip lines up with
   the page gutter, last chip keeps a little air so the end never looks clipped. */
.chip-row { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.chip-row::after { content: ""; flex: 0 0 10px; }
@media (max-width: 380px) { .chip-row { margin-inline: -14px; padding-inline: 14px; } }

/* ==========================================================================
   Onboarding — full-screen intro slides for a first-time visitor
   ========================================================================== */
.ob { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.ob-top {
  height: 58px; flex: none; display: flex; align-items: center; gap: 12px;
  padding-inline: 18px; max-width: var(--page-max); width: 100%; margin-inline: auto;
}
.ob-track {
  flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain;
}
.ob-track::-webkit-scrollbar { display: none; }
.ob-slide {
  flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 8px 26px 20px; text-align: center;
}
.ob-art {
  width: min(230px, 58vw); aspect-ratio: 1; margin-bottom: 30px;
  display: grid; place-items: center;
  border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border);
}
.ob-art svg { width: 62%; height: auto; }
.ob-slide h1 { font-size: clamp(24px, 6.6vw, 32px); max-width: 15ch; }
.ob-slide p { margin-top: 12px; color: var(--text-muted); font-size: 15px; max-width: 30ch; line-height: 1.55; }
.ob-foot {
  flex: none; padding: 16px 18px calc(20px + env(safe-area-inset-bottom));
  max-width: 460px; width: 100%; margin-inline: auto;
}
.ob-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 18px; }
.ob-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--surface-3); transition: all var(--t-base); }
.ob-dots i.on { background: var(--accent); width: 20px; border-radius: var(--r-full); }
@media (min-width: 720px) {
  .ob-slide h1 { font-size: 34px; }
  .ob-art { width: 250px; }
}

/* ==========================================================================
   Home hero block — a solid identity panel with the balance card lapping over
   it, the pattern telecom apps use so the first screen answers "how much do I
   have?" before anything else.
   ========================================================================== */
.hero-block {
  position: sticky; top: 0; z-index: 30;
  background: var(--block); color: var(--block-text);
  padding-top: max(14px, env(safe-area-inset-top));
  /* the card below overlaps, so the block only needs to reach behind its top half */
  padding-bottom: 58px;
}
.hero-row { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.hero-av {
  width: 44px; height: 44px; border-radius: var(--r-full); flex: none; display: grid; place-items: center;
  background: var(--hero-av-bg); color: var(--hero-av-ink);
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
}
.hero-who { min-width: 0; flex: 1; }
.hero-who .nm {
  font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-who .sub { font-size: 12.5px; color: var(--block-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-act { display: flex; align-items: center; gap: 4px; flex: none; }
.hero-act .icon-btn { color: var(--block-dim); }
.hero-act .icon-btn:hover { background: var(--block-hover); color: var(--block-text); border-color: transparent; }
/* the unread ring is cut out of the block, whatever colour it is */
.hero-act .bell-dot { border-color: var(--block); }
.hero-lift { margin-top: -46px; position: relative; z-index: 1; }

/* ---------- Quick stats ---------- */
.statline { display: flex; align-items: center; gap: 10px; padding: 11px 12px; flex: 1; min-height: 0; text-align: left; }
.statline + .statline { border-top: 1px solid var(--border); }
.statline:hover { background: var(--surface-2); }
.statline-ic { width: 30px; height: 30px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-text); }
.statline-ic svg { width: 16px; height: 16px; }
.statline .v { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; letter-spacing: -.02em; line-height: 1.15; }
.statline .k { font-size: 11px; color: var(--text-dim); }
.statline .chev { margin-left: auto; color: var(--text-dim); flex: none; }


/* ==========================================================================
   Section header with an icon chip and a "see all" on the right
   ========================================================================== */
.sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sec-ic {
  width: 32px; height: 32px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-text);
}
.sec-ic svg { width: 17px; height: 17px; }
.sec-head h2 { flex: 1; min-width: 0; font-size: 17px; }
.sec-more { font-size: 13px; font-weight: 600; color: var(--accent-text); flex: none; white-space: nowrap; }
.sec-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Promo banner — the "today's best deal" slot
   ========================================================================== */
.promo {
  display: flex; align-items: center; gap: 14px;
  background: var(--promo-bg); color: var(--promo-ink);
  border-radius: var(--r-lg); padding: 16px; position: relative; overflow: hidden;
}
.promo-tag { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.promo h3 { font-size: 18px; margin-top: 3px; letter-spacing: -.02em; }
.promo p { font-size: 12.5px; margin-top: 3px; opacity: .78; }
.promo .price { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.03em; color: var(--promo-accent); }
.promo .btn { background: var(--promo-accent); color: var(--promo-btn-ink); }
.promo .btn:hover { filter: brightness(1.08); }

/* ==========================================================================
   Quick actions in a card, icons in bordered tiles
   ========================================================================== */
.quick-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 10px; }
.quick-card .quick { grid-template-columns: repeat(4, 1fr); gap: 4px; }
.quick-card .qa-ic { background: var(--surface-2); border-color: var(--border); }

/* ==========================================================================
   Bottom nav — active item sits in a filled tile
   ========================================================================== */
.tab-ic {
  width: 40px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  transition: background var(--t-base), color var(--t-base);
}
.tab.is-active .tab-ic { background: var(--accent); color: var(--accent-ink); }
.tab.is-active svg { transform: none; }
.tab.is-active::after { display: none; }

/* ==========================================================================
   Typography pass — three clear levels, numbers that line up, prices that lead
   ========================================================================== */
body { line-height: 1.5; }
p { line-height: 1.55; }

/* Currency mark: the taka glyph comes from a fallback face, so give it its own
   size and baseline instead of letting it float next to the figures. */
.cur { font-size: .78em; font-weight: 600; margin-right: 1px; position: relative; top: -.06em; opacity: .95; }
/* Prices written in the site's coins (Admin → Settings → Currencies & pricing). */
.cur-en { font-size: .5em; font-weight: 700; margin-left: .3em; letter-spacing: .02em; color: var(--text-muted); }
.px { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.02; vertical-align: top; }
.px-tk { font-family: var(--font-body); font-size: clamp(10.5px, .46em, 14px); font-weight: 600; letter-spacing: 0;
         color: var(--text-dim); margin-top: .3em; font-variant-numeric: tabular-nums; }
.pkg-price .px, .co-total .px { align-items: flex-end; }

.overline { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; }
.small  { font-size: 13px; line-height: 1.45; }
.tiny   { font-size: 11.5px; line-height: 1.4; }
.strong { font-weight: 600; }

/* ---------- Package card: destination leads, price answers, specs support --- */
.pkg-title { font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; }
.pkg-sub { font-size: 12px; font-weight: 500; color: var(--text-dim); margin-top: 3px; }
.pkg-price .amount { font-size: 21px; font-weight: 800; letter-spacing: -.035em; }
.pkg-price .per { font-size: 11px; font-weight: 500; color: var(--text-dim); margin-top: 1px; }

/* the three facts read as one block, not three floating greys */
.pkg-specs {
  background: var(--surface-2); border: 0; border-radius: var(--r-sm);
  padding: 10px 6px; margin-top: 14px;
}
.pkg-specs > div + div::before { top: 6px; bottom: 6px; background: var(--border); }
.pkg-specs .k {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-dim);
}
.pkg-specs .v { font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; margin-top: 3px; }
.card-hover:hover .pkg-specs { background: var(--surface-3); }

/* ---------- List rows ---------- */
.list-row { padding: 15px 16px; }
.list-row .strong { font-size: 15px; letter-spacing: -.01em; }
.list-row .tiny { font-size: 11.5px; }

/* ---------- Section heads get a touch more air above them ---------- */
.section { margin-top: 32px; }
.sec-head h2 { font-size: 18px; letter-spacing: -.025em; }
.sec-head { margin-bottom: 13px; }

/* ---------- Every figure in the product uses lining, tabular digits -------- */
.pkg-price .amount, .pkg-specs .v, .en-card-v, .statline .v, .promo .price,
.stat-strip .v, .profile-stats .v, .gauge-value, .list-row .num, .dl .v {
  font-variant-numeric: tabular-nums;
}

/* ---------- Flags read as objects ---------- */
.flag { border-radius: 11px; }
.flag-lg { border-radius: 14px; }

/* ---------- Chips: one size, one weight ---------- */
.chip { height: 25px; font-size: 11.5px; font-weight: 600; letter-spacing: .005em; }
.badge, .pack-badge { letter-spacing: .01em; }

/* ---------- Status chip in an order row shouldn't shout over the price ----- */
.list-row .chip { height: 22px; font-size: 11px; padding: 0 8px; }

/* ==========================================================================
   Small phones (300–360px). Everything on the home screen has to survive a
   272px content column: nothing wraps into a mess, nothing gets clipped.
   ========================================================================== */
@media (max-width: 360px) {
  /* hero row */
  .hero-row { gap: 10px; }
  .hero-av { width: 38px; height: 38px; font-size: 16px; }
  .hero-act .icon-btn { width: 34px; height: 34px; }
  .hero-who .nm { font-size: 15px; }
  .hero-who .sub { font-size: 11.5px; }

  /* stat lines */
  .statline { padding: 9px 6px; }
  .statline .v { font-size: 13.5px; }
  .statline .k { font-size: 10px; }

  /* attention strip */
  .notice { padding: 12px; gap: 10px; }
  .notice-ic { width: 32px; height: 32px; }
  .notice-ic svg { width: 17px; height: 17px; }

  /* the deal banner stacks: copy, then price and button on one line */
  .promo { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
  .promo h3 { font-size: 16px; }
  .promo p { font-size: 11.5px; }
  .promo > div:last-child {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; text-align: left !important;
  }
  .promo .btn { margin-top: 0 !important; }
  .promo .price { font-size: 20px; }

  /* section heads */
  .sec-head { gap: 8px; }
  .sec-ic { width: 28px; height: 28px; }
  .sec-ic svg { width: 15px; height: 15px; }
  .sec-head h2 { font-size: 16.5px; }
  .sec-more { font-size: 12px; }
  .sec-head .icon-btn { width: 32px; height: 32px; }

  /* eSIM card */
  .esim-head { gap: 10px; }
  .esim-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .esim-meta { font-size: 11.5px; }
  .gauge { max-width: 200px; }
  .gauge-value { font-size: 26px; }
  .gauge-foot .v { font-size: 13px; }
  .gauge-foot .k { font-size: 10px; }
  .card-foot { font-size: 11.5px; padding: 10px 14px; }

  /* quick actions keep one baseline even when a label wraps */
  .quick-card { padding: 12px 6px; }
  .qa-ic { width: 44px; height: 44px; }
  .qa-ic svg { width: 19px; height: 19px; }
  .qa span:last-child { font-size: 10.5px; min-height: 26px; }

  /* package cards */
  .pkg-title { font-size: 15.5px; }
  .pkg-price .amount { font-size: 19px; }
  .pkg-specs { padding: 9px 4px; }
  .pkg-specs .v { font-size: 14px; }
  .pkg-specs .k { font-size: 9.5px; letter-spacing: .05em; }

  /* list rows */
  .list-row { padding: 13px 13px; }
  .list-row .strong { font-size: 14px; }
}

@media (max-width: 330px) {
  .container { padding-inline: 12px; }
  .tab span:last-child { font-size: 10px; }
  .tab-ic { width: 36px; }
  .statline .v { font-size: 12.5px; }
  .gauge { max-width: 180px; }
  .gauge-value { font-size: 24px; }
}

/* A few more that only bite below 360px */
@media (max-width: 360px) {
  .balance-val { font-size: 20px; }          /* "1,250 coins" stays on one line */
  .balance-ic { width: 34px; height: 34px; }
  .balance-ic svg { width: 17px; height: 17px; }
  .segmented button { padding: 6px 10px; font-size: 12px; }
  .profile-stats .v { font-size: 15px; }
  .profile-stats .k { font-size: 10px; }
  .refbox { padding: 8px 10px; }
  .refbox .code { font-size: 12.5px; }
  .qty button { width: 30px; height: 30px; font-size: 16px; }
  .qty output { min-width: 28px; }
}

/* ==========================================================================
   Hero identity — the greeting and name must read at a glance on the block
   ========================================================================== */
.hero-who .sub {
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--block-dim); text-transform: none;
}
.hero-who .nm {
  font-family: var(--font-display); font-size: 17.5px; font-weight: 800;
  letter-spacing: -.025em; color: var(--block-text); margin-top: 1px;
}
.hero-act .icon-btn { color: var(--block-text); opacity: .85; }
.hero-act .icon-btn:hover { opacity: 1; }

/* ==========================================================================
   Quick actions — each shortcut gets its own tint so it is recognised by
   colour as well as by icon
   ========================================================================== */
.qa-1 .qa-ic { background: var(--accent-soft);  color: var(--accent-text);  border-color: var(--accent-line); }
.qa-2 .qa-ic { background: var(--info-soft);    color: var(--info);         border-color: color-mix(in srgb, var(--info) 28%, transparent); }
.qa-3 .qa-ic { background: var(--success-soft); color: var(--success);      border-color: color-mix(in srgb, var(--success) 28%, transparent); }
.qa-4 .qa-ic { background: var(--warning-soft); color: var(--warning);      border-color: color-mix(in srgb, var(--warning) 28%, transparent); }
.qa:hover .qa-ic { filter: brightness(1.04); transform: translateY(-1px); }
.qa .qa-ic { transition: transform var(--t-fast), filter var(--t-fast); }
.qa span:last-child { font-weight: 600; color: var(--text-muted); }

/* ==========================================================================
   Contextual page header — title on phones, full nav on desktop
   ========================================================================== */
.hdr-title {
  flex: 1; min-width: 0; font-family: var(--font-display); font-size: 17px; font-weight: 700;
  letter-spacing: -.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header-inner > .icon-btn:first-child { margin-left: -8px; }
/* A sticky element can only travel inside its containing block. These
   wrappers are exactly as tall as the header they hold, so the header had
   nowhere to go and scrolled straight off. Sticking the wrapper instead gives
   it the whole page to travel through. */
.hdr-mobile, .hdr-desktop { position: sticky; top: 0; z-index: 40; }
.hdr-desktop { display: none; }
@media (min-width: 900px) {
  .hdr-mobile { display: none; }
  .hdr-desktop { display: block; }
}

/* ==========================================================================
   Stat lines on a phone
   ========================================================================== */
@media (max-width: 400px) {
  .statline { padding: 8px 9px; gap: 8px; }
  .statline-ic { width: 26px; height: 26px; }
  .statline-ic svg { width: 14px; height: 14px; }
  .statline .chev { display: none; }
  .statline .v { font-size: 13px; }
  .statline .k { font-size: 10px; }
}

/* ==========================================================================
   Package detail — app-sized, with a colour cue on every section
   ========================================================================== */
.pd-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.pd-ic { width: 28px; height: 28px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center; }
.pd-ic svg { width: 15px; height: 15px; }
.pd-head h3 { flex: 1; min-width: 0; font-size: 16px; letter-spacing: -.02em; }
/* A section folded away until asked for ("How activation works"): the heading is the button. */
.pd-fold summary { padding: 12px 14px; gap: 9px; }
.pd-fold-t { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; }
.pd .pd-fold .acc-body { padding: 2px 14px 14px; color: var(--text); }
.tone-accent  { background: var(--accent-soft);  color: var(--accent-text); }
.tone-success { background: var(--success-soft); color: var(--success); }
.tone-info    { background: var(--info-soft);    color: var(--info); }
.tone-warning { background: var(--warning-soft); color: var(--warning); }

.pd .section { margin-top: 22px; }
.pd h1 { font-size: 21px; letter-spacing: -.03em; }
.pd .blurb { font-size: 13px; line-height: 1.5; margin-top: 4px; }
.pd .card { padding: 14px; }
.pd .step { padding: 12px; }
.pd .step h4 { font-size: 13.5px; }
.pd .step p { font-size: 12px; margin-top: 2px; }
.pd .acc summary { padding: 12px 14px; font-size: 13.5px; }
.pd .acc .acc-body { padding: 0 14px 13px; font-size: 13px; }
.pd .acc + .acc { margin-top: 6px; }
.pd .tick-t { font-size: 13.5px; font-weight: 600; }
.pd .tick-s { font-size: 12px; color: var(--text-muted); display: block; margin-top: 1px; line-height: 1.45; }
.pd .chip { height: 24px; font-size: 11px; }

/* ==========================================================================
   Icons: solid tiles, deep colours, white marks.
   Washed-out tint chips read as generic; a solid fill with a line icon on top
   is the flat-icon language and it holds up as a brand.
   Palette is deliberately short — brand yellow plus three deep neutrals.
   ========================================================================== */
:root {
  --ic-blue:  #1D4ED8;
  --ic-green: #047857;
  --ic-slate: #334155;
}
:root[data-theme="dark"], :root:not([data-theme="light"]) {
  --ic-blue:  #2563EB;
  --ic-green: #059669;
  --ic-slate: #475569;
}

/* quick action tiles */
.qa-ic { border: 0; }
.qa-1 .qa-ic { background: var(--accent);    color: var(--accent-ink); }
.qa-2 .qa-ic { background: var(--ic-blue);   color: #fff; }
.qa-3 .qa-ic { background: var(--ic-green);  color: #fff; }
.qa-4 .qa-ic { background: var(--ic-slate);  color: #fff; }
.qa:hover .qa-ic { filter: brightness(1.1); }

/* section chips: monochrome, sharp */
.sec-ic { background: var(--text); color: var(--surface); }

/* the small icons inside dense cards stay quiet */
.statline-ic { background: var(--surface-3); color: var(--text-muted); border: 0; }
.balance-ic  { background: var(--text); color: var(--surface); }
.notice-ic   { background: var(--ic-blue); color: #fff; }
.row-ic      { background: var(--surface-3); color: var(--text-muted); }
.empty-icon  { background: var(--surface-3); color: var(--text-muted); }

/* package detail section chips — solid, one colour per idea */
.tone-accent  { background: var(--accent);    color: var(--accent-ink); }
.tone-success { background: var(--ic-green);  color: #fff; }
.tone-info    { background: var(--ic-blue);   color: #fff; }
.tone-warning { background: var(--ic-slate);  color: #fff; }

/* notification rows */
.notif-ic { color: #fff; }

/* ==========================================================================
   Quick actions, third pass.
   Filled tiles made four loud squares floating in an empty card. A shortcut
   row should be a quiet strip: one line icon per column, hairline dividers,
   no decoration. Colour is spent only where it means something — the count
   badge — so the row reads as tools, not as a toy.
   ========================================================================== */
.quick-card { padding: 2px 0; }
.quick { grid-template-columns: repeat(4, 1fr); gap: 0; }
.qa { position: relative; padding: 12px 4px; gap: 7px; }
.qa + .qa::before {
  content: ""; position: absolute; left: 0; top: 13px; bottom: 13px;
  width: 1px; background: var(--border);
}
/* the tile is gone — the icon carries itself */
.qa-1 .qa-ic, .qa-2 .qa-ic, .qa-3 .qa-ic, .qa-4 .qa-ic,
.qa-ic {
  width: 24px; height: 24px; background: none; border: 0;
  color: var(--text); border-radius: 0;
}
.qa-ic svg { width: 22px; height: 22px; }
.qa:hover .qa-ic { color: var(--accent-text); transform: none; filter: none; }
.qa:active .qa-ic { transform: scale(.92); }
.qa span:last-child { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.qa:hover span:last-child { color: var(--text); }
.qa-badge { top: -6px; right: -10px; border-color: var(--surface); }

@media (max-width: 360px) {
  .qa { padding: 11px 2px; gap: 6px; }
  .qa-ic svg { width: 20px; height: 20px; }
  .qa span:last-child { font-size: 10.5px; min-height: 0; }
}

/* ==========================================================================
   Spacing scale — one rhythm, applied everywhere
     14px  between cards that belong to the same cluster
     24px  between named sections (32px from 900px up)
     16px  card padding (14px under 360px, 20px from 720px up)
   ========================================================================== */
.section { margin-top: 24px; }
.section-tight { margin-top: 14px; }
@media (min-width: 900px) {
  .section { margin-top: 32px; }
  .section-tight { margin-top: 16px; }
}
.card { padding: 16px; }
@media (min-width: 720px) { .card { padding: 20px; } }
@media (max-width: 360px) { .card { padding: 14px; } .container { padding-inline: 14px; } }
@media (max-width: 330px) { .container { padding-inline: 12px; } }

/* the hero card overlap and the first gap under it stay in step */
.hero-lift { margin-top: -46px; }

/* Secondary buttons sitting on a dark card need a real step, not a hairline */
:root[data-theme="dark"] .btn-secondary { background: var(--surface-3); border-color: #33343C; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-secondary { background: var(--surface-3); border-color: #33343C; }
}

/* ==========================================================================
   Value/label pairs sit tight — the number and its caption are one thought,
   so the leading between them should be smaller than the gap to the next row.
   ========================================================================== */
.statline .v      { line-height: 1.08; display: block; }
.statline .k      { line-height: 1.15; display: block; margin-top: 1px; }
.gauge-foot .v    { line-height: 1.1; margin-top: 0; }
.gauge-foot .k    { line-height: 1.15; }
.stat-strip .v    { line-height: 1.1; margin-top: 1px; }
.stat-strip .k    { line-height: 1.15; }
.pkg-specs .v     { line-height: 1.1; margin-top: 2px; }
.pkg-specs .k     { line-height: 1.15; }
.profile-stats .v { line-height: 1.1; }
.profile-stats .k { line-height: 1.15; margin-top: 1px; }

/* ==========================================================================
   Package detail on a phone — sections sit on the page, not inside boxes.
   A card inside a card inside the page gutter is three paddings for one line
   of text; that is what made this screen feel like a web page.
   ========================================================================== */
.pd-list { border-top: 1px solid var(--border); }
.pd-list li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 2px; border-bottom: 1px solid var(--border);
}
.pd-list .tick {
  flex: none; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px;
  background: var(--ic-green); color: #fff; display: grid; place-items: center;
}
.pd-list .tick svg { width: 11px; height: 11px; }

.pd-steps { counter-reset: s; }
.pd-steps li { display: flex; gap: 11px; align-items: flex-start; padding: 10px 2px; }
.pd-steps li + li { border-top: 1px solid var(--border); }
.pd-steps .n {
  flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 12px;
}
.pd-steps h4 { font-size: 13.5px; }
.pd-steps p { font-size: 12px; color: var(--text-muted); margin-top: 1px; }

.pd-note {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--surface-2); border-radius: var(--r-md); padding: 12px;
}
.pd-note p { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.45; }

.pd-cover { display: flex; flex-wrap: wrap; gap: 7px; }

@media (max-width: 420px) {
  .pd .section { margin-top: 18px; }
  .pd-head { margin-bottom: 9px; }
  .pd-head h3 { font-size: 15px; }
  .pd-ic { width: 26px; height: 26px; }
  .pd-ic svg { width: 14px; height: 14px; }
  .pd .tick-s { display: none; }        /* the headline says it on a phone */
  .pd-list li { padding: 9px 2px; }
  .pd .tick-t { font-size: 13px; }
  .pd-steps p { font-size: 11.5px; }
  .pd h1 { font-size: 19px; }
  .pd .blurb { font-size: 12.5px; }
  .pd .acc summary { padding: 11px 12px; font-size: 13px; }
  .pd .acc .acc-body { padding: 0 12px 11px; font-size: 12.5px; }
}

/* ==========================================================================
   Page-ending call to action
   ========================================================================== */
.page-cta { margin-top: 24px; }

/* ==========================================================================
   Feature grid — two columns of small fact tiles
   ========================================================================== */
.feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.feat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 12px; min-width: 0;
}
.feat-ic {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  margin-bottom: 8px;
}
.feat-ic svg { width: 14px; height: 14px; }
.feat .t {
  font-family: var(--font-display); font-weight: 700; font-size: 14.5px; letter-spacing: -.02em;
  line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feat .s { font-size: 11.5px; color: var(--text-muted); line-height: 1.3; margin-top: 2px; }
@media (max-width: 360px) {
  .feat { padding: 10px; }
  .feat-ic { width: 24px; height: 24px; margin-bottom: 6px; }
  .feat .t { font-size: 13.5px; }
  .feat .s { font-size: 11px; }
}

/* ==========================================================================
   Package hero — price then a full-width action
   ========================================================================== */
.pd-price { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pd-price .amt {
  font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -.035em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
@media (max-width: 360px) { .pd-price .amt { font-size: 26px; } }

/* ==========================================================================
   Checkout pay bar — the amount and the action stay on screen the whole way
   down the page, so nobody has to scroll back to pay.
   ========================================================================== */
.paybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px rgba(0,0,0,.06);
}
:root[data-theme="dark"] .paybar { box-shadow: 0 -6px 24px rgba(0,0,0,.4); }
.paybar-inner {
  max-width: 560px; margin-inline: auto; display: flex; align-items: center; gap: 14px;
}
.paybar .k { font-size: 11.5px; color: var(--text-dim); line-height: 1.2; }
.paybar .v {
  font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.paybar .btn { flex: 1; max-width: 230px; margin-left: auto; }
@media (max-width: 360px) {
  .paybar { padding-inline: 14px; }
  .paybar .v { font-size: 19px; }
  .paybar .btn { max-width: 175px; padding-inline: 12px; font-size: 14px; }
}

/* compact reference row inside the order card */
.ref-line { display: flex; align-items: center; gap: 7px; }
.ref-line .code { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.ref-line .copybtn { width: 26px; height: 26px; }
.ref-line .copybtn svg { width: 14px; height: 14px; }

/* ==========================================================================
   Checkout — one card of rows instead of five stacked cards
   ========================================================================== */
.co-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.co-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; width: 100%; text-align: left; }
.co-row + .co-row, .co-sum { border-top: 1px solid var(--border); }
.co-row.is-tappable:hover { background: var(--surface-2); }
.co-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; }
.co-ic svg { width: 16px; height: 16px; }
.co-t { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; }
.co-s { display: block; font-size: 11.5px; color: var(--text-dim); line-height: 1.3; margin-top: 2px; overflow-wrap: anywhere; }
.co-a { margin-left: auto; flex: none; display: flex; align-items: center; gap: 8px; }

.co-panel { padding: 0 16px 14px; }

/* A row that holds boxes to fill in: the heading sits beside its icon, and the boxes
   drop below it across the whole card — an input indented by the icon's column looks
   like an afterthought and loses width on a phone. */
.co-row-form { flex-wrap: wrap; row-gap: 10px; align-items: flex-start; }
.co-form { flex: 1 0 100%; min-width: 0; }
.co-form .input, .co-form .co-fields { width: 100%; }
.co-fields { display: grid; gap: 10px; }
@media (min-width: 560px) {
  .co-fields { grid-template-columns: 1fr 1fr; }
  .co-fields .fld:first-child { grid-column: 1 / -1; }
}
.co-fields .fld { display: block; min-width: 0; }
.co-fields .fld.is-hidden { display: none; }
.co-fields .fld > span {
  display: block; font-size: 11.5px; font-weight: 600; color: var(--text-dim);
  margin-bottom: 4px; letter-spacing: .01em;
}



/* How to pay: two cards, one tap, each showing what this order costs that way.
   The chosen one carries the accent border and a filled tick; the logos sit on
   white chips so they read in both themes. */
.co-payrow { display: block; }
.co-payrow > .co-t { margin-bottom: 10px; }
.co-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 380px) { .co-pay { grid-template-columns: 1fr; } }
.pay-opt {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  min-width: 0; padding: 12px 12px 13px; border-radius: var(--r-md);
  border: 1.5px solid var(--border); background: var(--surface-2);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.pay-opt:hover { border-color: var(--text-dim); }
.pay-opt:active { transform: scale(.985); }
.pay-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pay-opt.is-on { border-color: var(--accent); background: var(--accent-soft); }
.pay-opt-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; min-height: 28px; }
.pay-opt-logos { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
.pay-chip {
  display: grid; place-items: center; height: 24px; padding: 2px 5px; border-radius: 6px;
  background: #fff; border: 1px solid rgba(0, 0, 0, .06);
}
.pay-chip img { height: 16px; width: auto; max-width: 42px; object-fit: contain; display: block; }
/* A phone's half-width card holds three logos on one line; the fourth waits for more room. */
@media (max-width: 460px) { .pay-opt-logos { flex-wrap: nowrap; } .pay-opt-logos .pay-chip:nth-child(n+4) { display: none; } }
.pay-opt .coin { flex: none; }
.pay-opt-tick {
  flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border);
  background: var(--surface); transition: all var(--t-fast);
}
.pay-opt.is-on .pay-opt-tick {
  border-color: var(--accent); background: var(--accent);
  box-shadow: inset 0 0 0 3.5px var(--surface);
}
.pay-opt-t { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.pay-opt.is-on .pay-opt-t { color: var(--accent-text); }
.pay-opt-s { display: block; font-size: 11px; color: var(--text-dim); line-height: 1.3; margin-top: 3px; overflow-wrap: anywhere; }
.pay-opt-v {
  display: block; margin-top: auto; padding-top: 8px; font-family: var(--font-display); font-size: 17px;
  font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.pay-opt.is-off { opacity: .8; }
.pay-opt.is-off .pay-opt-v { font-size: 13px; color: var(--accent-text); }
.co-sum { padding: 13px 16px; display: grid; gap: 8px; }
.co-sum .line { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.co-sum .line .muted { color: var(--text-muted); }
.co-sum .save { color: var(--ic-green); font-weight: 600; font-variant-numeric: tabular-nums; }

.co-total {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; background: var(--accent-soft); border-top: 1px solid var(--accent-line);
}
.co-total .k { font-size: 13.5px; font-weight: 700; }
.co-total .v {
  font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.save-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px;
  border-radius: var(--r-full); background: var(--ic-green); color: #fff;
  font-size: 11px; font-weight: 700;
}
@media (max-width: 360px) {
  .co-row { padding: 12px 13px; gap: 10px; }
  .co-sum, .co-total { padding-inline: 13px; }
  .co-panel { padding-inline: 13px; }
  .co-total .v { font-size: 20px; }
}

/* ==========================================================================
   Home banner slider — artwork only. The creative carries its own message,
   so the component adds no text, no overlay, nothing to fight the image.
   ========================================================================== */
.carousel { position: relative; min-width: 0; }
/* The frame: one slide at a time, nothing past its edges. */
.carousel-view {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 2.09 / 1; border-radius: 20px;
  background: var(--surface-2); border: 1px solid var(--border);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.carousel-track {
  position: absolute; inset: 0; display: flex;
  transition: transform 640ms cubic-bezier(.22, .8, .2, 1); will-change: transform;
}
.carousel.is-dragging .carousel-track { cursor: grabbing; }
.slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; display: block; -webkit-user-drag: none; }
/* The artwork is never cropped. If the frame is a different shape from the
   image (a laptop's taller row, an owner's banner of another size), a softly
   blurred copy of the same picture fills the space around it. */
.slide-fill {
  position: absolute; inset: -32px; width: calc(100% + 64px); height: calc(100% + 64px);
  object-fit: cover; filter: blur(26px) saturate(1.1); opacity: .9; pointer-events: none;
}
.slide-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none;
  transition: transform 900ms var(--e-out);
}
.slide:hover .slide-img { transform: scale(1.015); }
.slide:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

/* Dots, with the active one filling while its slide waits; arrows from a laptop up. */
.carousel-bar { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; }
.carousel.is-single .carousel-bar { display: none; }
.cdots { display: flex; align-items: center; gap: 2px; }
.cdot { display: grid; place-items: center; height: 22px; padding: 0 3px; border-radius: var(--r-full); }
.cdot-bar {
  position: relative; display: block; width: 7px; height: 7px; overflow: hidden; border-radius: var(--r-full);
  background: var(--surface-3); transition: width 360ms var(--e-out), background var(--t-base);
}
.cdot:hover .cdot-bar { background: var(--text-dim); }
.cdot.on .cdot-bar { width: 30px; background: var(--surface-3); }
.cdot-bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--accent); }
.cdot.on .cdot-bar i { width: 100%; }
.carousel.is-ticking .cdot.on .cdot-bar i { animation: cdotFill var(--carousel-ms, 5500ms) linear both; }
.carousel.is-held .cdot.on .cdot-bar i { animation-play-state: paused; }
@keyframes cdotFill { from { width: 0; } to { width: 100%; } }
.carousel-arrow {
  display: none; place-items: center; width: 32px; height: 32px; border-radius: var(--r-full);
  color: var(--text-muted); background: var(--surface); border: 1px solid var(--border);
  transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.carousel-arrow svg { width: 16px; height: 16px; }
.carousel-arrow:hover { color: var(--text); border-color: var(--text-dim); }
.carousel-arrow:active { transform: scale(.92); }
@media (min-width: 900px) { .carousel-arrow { display: grid; } }
@media (prefers-reduced-motion: reduce) {
  .carousel-track { transition-duration: 1ms; }
}

/* ==========================================================================
   Splash screen (assets/js/splash.js)
   Three arcs find the signal, the wordmark settles, a bar fills, done.
   Every colour is a token, so it follows the phone's theme.
   ========================================================================== */
.splash-on, .splash-on body { overflow: hidden; }

.splash {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--bg);
  opacity: 1; transition: opacity .34s ease, transform .34s ease;
}
.splash.is-out { opacity: 0; transform: scale(1.015); pointer-events: none; }

.splash-in { display: flex; flex-direction: column; align-items: center; gap: 18px; }

.splash-sig { width: 48px; height: 36px; color: var(--brand-go); }
.splash-sig > * { opacity: 0; animation: splashArc .42s cubic-bezier(.2, .8, .3, 1) forwards; }
.splash-sig .s4 { animation-delay: .05s; }
.splash-sig .s3 { animation-delay: .14s; }
.splash-sig .s2 { animation-delay: .23s; }
.splash-sig .s1 { animation-delay: .32s; }
@keyframes splashArc { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.splash-word {
  font-family: var(--font-display); font-weight: 800; font-size: 34px;
  color: var(--text); line-height: 1;
  opacity: 0; animation: splashWord .5s cubic-bezier(.2, .8, .3, 1) .2s forwards;
}
.splash-word span { color: var(--brand-go); }
@keyframes splashWord {
  from { opacity: 0; transform: translateY(9px); letter-spacing: .10em; }
  to   { opacity: 1; transform: none;           letter-spacing: -.03em; }
}

.splash-bar { width: 104px; height: 3px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.splash-bar i {
  display: block; height: 100%; border-radius: 2px; background: var(--brand-go);
  transform: scaleX(0); transform-origin: left;
  animation: splashBar .62s cubic-bezier(.35, .1, .2, 1) .28s forwards;
}
@keyframes splashBar { to { transform: scaleX(1); } }

/* Motion off: show the mark, hold it, leave. */
@media (prefers-reduced-motion: reduce) {
  .splash-sig > *, .splash-word, .splash-bar i { animation: none; opacity: 1; }
  .splash-bar i { transform: scaleX(1); }
  .splash-word { letter-spacing: -.03em; }
}


/* ==========================================================================
   Home rebuild — banner first, then the EN balance, then the two buy routes
   ========================================================================== */

/* The banner sits directly under the header now, so the block no longer has
   to reach behind an overlapping card. */
.hero-block.is-flat { padding-bottom: 16px; }
.hero-block.is-flat + .container { margin-top: 16px; }

/* A statline that is a plain action, not a figure: one label, one chevron. */
.statline.is-act { min-height: 52px; }
.statline.is-act .v { font-size: 13.5px; font-weight: 600; }
.statline.is-act .k { font-size: 11px; }

/* ==========================================================================
   Home: the EN balance card and the two ways to buy.

   Built from the theme itself, so it sits with every other card on the site:
   the card is a normal surface with a hairline border, the "EN balance" label
   is an accent tag, the figure is large, Recharge and Order history are the
   theme's primary and secondary buttons. What makes it feel alive is motion,
   not decoration: a soft accent light drifts behind the coin, the coin floats
   and turns over now and then, Recharge sends out a quiet ring, and rings
   leave the corner of each buy square like a signal. No heavy shadows.

   Everything that moves waits for the splash to leave, uses transform and
   opacity only, and stops for anyone who asked their phone for less motion
   (the global prefers-reduced-motion rule).
   ========================================================================== */
.home-money { display: grid; gap: 12px; }

/* Arrival: the card, then the two squares, one after the other. */
.home-in { animation: homeIn 620ms var(--e-out) backwards; }   /* backwards: hover and press still move it afterwards */
.home-in.d-1 { animation-delay: 90ms; }
.home-in.d-2 { animation-delay: 180ms; }
.home-in.d-3 { animation-delay: 260ms; }
html.splash-on .home-in, html.splash-on .home-in * { animation-play-state: paused; }
@keyframes homeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- The EN balance card ---------- */
.en-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; min-width: 0;
  padding: 18px 18px 16px; border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
/* A soft accent light behind the coin, drifting slowly. */
.en-card::before {
  content: ''; position: absolute; z-index: -1; top: -70px; right: -60px; width: 220px; height: 220px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent);
  animation: enDrift 9s ease-in-out infinite alternate;
}
@keyframes enDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-16px, 12px) scale(1.1); } }

/* A faint band of light crosses the card every few seconds. */
.en-card-shine {
  position: absolute; z-index: 0; top: -20%; bottom: -20%; left: 0; width: 34%; pointer-events: none;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--accent) 9%, transparent), transparent);
  transform: translateX(-160%) skewX(-16deg);
  animation: enShine 7s ease-in-out 1.6s infinite;
}
@keyframes enShine { 0% { transform: translateX(-160%) skewX(-16deg); } 30%, 100% { transform: translateX(400%) skewX(-16deg); } }

.en-card-head, .en-card-actions { position: relative; z-index: 1; }
.en-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.en-card-figs { min-width: 0; }

/* The label as an accent tag, with a live dot. */
.en-card-k {
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px 0 9px;
  border-radius: var(--r-full); background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent-text); font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.en-card-k .dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.en-card-k .dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); opacity: 0;
  animation: enDot 2.2s ease-out infinite;
}
@keyframes enDot { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3); opacity: 0; } }

.en-card-v {
  display: block; margin-top: 12px;
  font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -.045em;
  color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.en-card-sub {
  display: block; margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* The EN coin itself, floating and turning over now and then. */
.en-card-coin { flex: none; position: relative; width: 60px; height: 60px; perspective: 400px; animation: enFloat 3.8s ease-in-out infinite; }
.en-card-coin .face { display: block; width: 100%; height: 100%; animation: enFlip 6.5s ease-in-out 2.4s infinite; }
.en-card-coin .coin { width: 100%; height: 100%; }
@keyframes enFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes enFlip { 0%, 78% { transform: rotateY(0); } 92%, 100% { transform: rotateY(360deg); } }

/* The two actions: the theme's own primary and secondary buttons, a size up. */
.en-card-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 20px; }
.en-card-actions .btn { height: 48px; min-width: 0; padding-inline: 12px; gap: 8px; font-size: 15px; }
.en-card-actions .btn svg { width: 18px; height: 18px; flex: none; }
.en-card-actions .en-recharge { flex: 1.35 1 0; font-weight: 700; }
/* Recharge sends out a quiet ring now and then. */
.en-card-actions .en-recharge::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px var(--accent-line); opacity: 0;
  animation: enPulse 2.8s ease-out 1.2s infinite;
}
@keyframes enPulse { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(1.08, 1.3); opacity: 0; } }
.en-card-actions .en-history { flex: 1 1 0; }

@media (max-width: 400px) {
  .en-card-actions .en-recharge { flex-grow: 1.15; }
  .en-card-actions .btn { font-size: 14.5px; gap: 6px; padding-inline: 10px; }
}
@media (max-width: 360px) {
  .en-card { padding: 16px 14px 14px; }
  .en-card-v { font-size: 40px; }
  .en-card-coin { width: 52px; height: 52px; }
  .en-card-actions { gap: 8px; padding-top: 18px; }
  .en-card-actions .btn { height: 46px; font-size: 14px; padding-inline: 8px; gap: 6px; }
  .en-card-actions .btn svg { width: 16px; height: 16px; }
}
@media (max-width: 330px) {
  .en-card-actions .btn { font-size: 13px; }
  .en-card-actions .btn svg { display: none; }
}

/* ---------- The two buy routes: two square cards ---------- */
.buyduo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.buytile {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
  /* Flat and wide: a tile to look at, not a square that eats the first screen. */
  aspect-ratio: 16 / 10; min-width: 0; padding: 12px;
  border-radius: var(--r-xl); border: 0; text-align: left;
  transition: transform 220ms var(--e-out), filter 220ms var(--e-out);
  -webkit-tap-highlight-color: transparent;
}
.buytile.t-joytel { background: var(--ic-blue); color: #fff; }
.buytile.t-esim   { background: var(--accent);  color: var(--accent-ink); }
.buytile:hover { transform: translateY(-2px); filter: brightness(1.04); }
.buytile:active { transform: scale(.97); }

/* A signal leaving the corner: three rings that grow and fade, one after another. */
.bt-rings { position: absolute; z-index: -1; right: -30%; bottom: -30%; width: 110%; aspect-ratio: 1; pointer-events: none; }
.bt-rings i {
  position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .26);
  transform: scale(.25); opacity: 0; animation: btRing 3.6s ease-out infinite;
}
.bt-rings i:nth-child(2) { animation-delay: 1.2s; }
.bt-rings i:nth-child(3) { animation-delay: 2.4s; }
.t-esim .bt-rings i { border-color: rgba(20, 17, 10, .16); }
.t-esim .bt-rings i { animation-delay: .6s; }
.t-esim .bt-rings i:nth-child(2) { animation-delay: 1.8s; }
.t-esim .bt-rings i:nth-child(3) { animation-delay: 3s; }
@keyframes btRing { 0% { transform: scale(.25); opacity: 0; } 15% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

.bt-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
/* Icon and arrow grow with the square, like the words below them. */
.buytile .ic {
  display: grid; place-items: center; width: 60px; height: 60px; width: min(76px, 40cqi, 34cqh); height: min(76px, 40cqi, 34cqh); border-radius: 30%;
  background: rgba(255, 255, 255, .16);
  animation: enFloat 4.2s ease-in-out infinite;
}
.t-esim .ic { background: rgba(20, 17, 10, .08); animation-delay: -2.1s; }
.buytile .ic svg { width: 58%; height: 58%; }
.buytile .go {
  display: grid; place-items: center; width: 36px; height: 36px; width: min(42px, 22cqi, 23cqh); height: min(42px, 22cqi, 23cqh); border-radius: 50%; flex: none;
  background: rgba(255, 255, 255, .16); transition: transform 220ms var(--e-out), background 220ms;
}
.t-esim .go { background: rgba(20, 17, 10, .08); }
.buytile .go svg { width: 48%; height: 48%; }
.buytile:hover .go { transform: translate(2px, -2px); background: rgba(255, 255, 255, .26); }
.t-esim:hover .go { background: rgba(20, 17, 10, .14); }

/* The words are sized to the square itself, as large as "Package" can go
   while staying on one line: bigger squares, bigger words. */
.buytile { container-type: size; }
.buytile .t { display: flex; flex-direction: column; min-width: 0; font-family: var(--font-display); letter-spacing: -.03em; }
.buytile .t1 { font-size: 18px; font-size: min(20px, 12.8cqi, 16cqh); font-weight: 600; line-height: 1.15; opacity: .85; }
.buytile .t2 { font-size: 32px; font-size: min(42px, 22.4cqi, 32cqh); font-weight: 800; line-height: 1.04; white-space: nowrap; }

/* "eSIM", highlighted: a highlighter stroke is drawn under it, a warm light runs
   through the letters, and a spark twinkles at its corner. */
.esim-wrap { position: relative; isolation: isolate; align-self: flex-start; padding-right: 16px; }
.esim-wrap::before {
  content: ''; position: absolute; z-index: -1; left: -3px; right: 13px; bottom: 3px; height: 42%;
  border-radius: 5px; background: rgba(255, 255, 255, .62); transform-origin: left center;
  animation: esimMark 700ms var(--e-out) 900ms backwards;
}
html.splash-on .esim-wrap::before { animation-play-state: paused; }
.hl-esim {
  background: linear-gradient(105deg, #14110A 0%, #14110A 40%, #A36D00 50%, #14110A 60%, #14110A 100%);
  background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: esimText 3.8s ease-in-out 1.6s infinite;
}
.esim-wrap .spark {
  position: absolute; top: -3px; right: 0; width: 14px; height: 14px; background: #14110A;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: esimSpark 3.8s ease-in-out 1.6s infinite;
}
@keyframes esimMark { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes esimText { 0%, 20% { background-position: 100% 0; } 70%, 100% { background-position: 0 0; } }
@keyframes esimSpark { 0%, 50% { transform: scale(.55) rotate(0); } 68% { transform: scale(1.25) rotate(90deg); } 86%, 100% { transform: scale(.55) rotate(180deg); } }

@media (max-width: 360px) {
  .buytile { padding: 12px; }
}

/* The rows further down arrive as they scroll into view. */
.dest-row .dest { animation: homeIn 520ms var(--e-out) backwards; }
.dest-row .dest:nth-child(2) { animation-delay: 50ms; }
.dest-row .dest:nth-child(3) { animation-delay: 100ms; }
.dest-row .dest:nth-child(4) { animation-delay: 150ms; }
.dest-row .dest:nth-child(5) { animation-delay: 200ms; }
.dest-row .dest:nth-child(n+6) { animation-delay: 250ms; }
html.splash-on .dest-row .dest { animation-play-state: paused; }
.sec-head .sec-ic { transition: transform 300ms var(--e-out); }
.section.revealed .sec-head .sec-ic { animation: secIc 700ms var(--e-out) 200ms both; }
@keyframes secIc { 0% { transform: scale(.7); opacity: .4; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: none; } }

/* A wide phone or a small tablet: the squares keep a card's size, not half the screen. */
@media (min-width: 480px) and (max-width: 719px) {
  .buyduo { grid-template-columns: repeat(2, minmax(0, 210px)); justify-content: center; }
}
/* From 720px the wallet card and the two squares share a row. */
@media (min-width: 720px) {
  .home-money { grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 14px; }
  .home-money .buyduo { grid-template-columns: repeat(2, clamp(170px, 16vw, 208px)); gap: 14px; align-self: center; }
}
@media (min-width: 900px) {
  .en-card { padding: 22px 24px 20px; }
  .en-card-v { font-size: 52px; }
  .en-card-coin { width: 70px; height: 70px; }
  .en-card-actions .btn { height: 50px; }
  .buytile { padding: 18px; }
}

/* ==========================================================================
   Refunds and policies — the customer side.
   The terms tick at checkout, a policy read in a sheet, the refund request and
   its status on the order. Built from the theme's own surfaces and tones.
   ========================================================================== */
.co-agree {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.co-agree input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--accent); cursor: pointer; }
.co-agree-t { font-size: 13.5px; line-height: 1.5; color: var(--text); }
.co-agree-t .link { font-size: inherit; padding: 0; }
.co-agree-s { display: block; font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.co-policies { font-size: 12.5px; line-height: 1.6; color: var(--text-dim); text-align: center; max-width: 46ch; margin-inline: auto; }
.co-policies .link { font-size: inherit; padding: 0; }
.co-agree.is-error { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); animation: agreeNudge 360ms var(--e-out); }
@keyframes agreeNudge { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 60% { transform: translateX(4px); } }

.policy-body p, .rf-policy p { font-size: 13.5px; line-height: 1.65; margin-top: 10px; color: var(--text); }
.policy-body p:first-child, .rf-policy p:first-child { margin-top: 0; }
.rf-policy {
  max-height: 190px; overflow-y: auto; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border); overscroll-behavior: contain;
}
.rf-policy p { font-size: 13px; color: var(--text-muted); }

.rf-back {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px;
  border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.rf-back .strong { font-family: var(--font-display); font-size: 18px; }
.rf-reasons { display: grid; gap: 8px; }
.rf-reason {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; font-size: 14px;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.rf-reason input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.rf-reason.is-on { border-color: var(--accent); background: var(--accent-soft); }
.rf-warn {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--warning-soft); color: var(--text); font-size: 13px; line-height: 1.5;
}
.rf-warn svg { width: 18px; height: 18px; flex: none; color: var(--warning); margin-top: 1px; }
.rf-agree { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; cursor: pointer; }
.rf-agree input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }

.rf-card .rf-head { display: flex; align-items: center; gap: 12px; }
.rf-card h4 { font-size: 16px; }
.rf-ic { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; }
.rf-ic svg { width: 20px; height: 20px; }
.rf-card.is-requested { border-color: var(--warning); }
.rf-card.is-requested .rf-ic { background: var(--warning-soft); color: var(--warning); }
.rf-card.is-refunded .rf-ic { background: var(--info-soft); color: var(--info); }
.rf-card.is-declined .rf-ic { background: var(--surface-3); color: var(--text-muted); }
.rf-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rf-step { display: grid; gap: 6px; font-size: 11.5px; color: var(--text-dim); line-height: 1.3; }
.rf-step i { display: block; height: 4px; border-radius: var(--r-full); background: var(--surface-3); }
.rf-step.done { color: var(--text-muted); }
.rf-step.done i { background: var(--success); }
.rf-step.now { color: var(--text); font-weight: 600; }
.rf-step.now i { background: linear-gradient(90deg, var(--warning) 40%, var(--surface-3) 40%); background-size: 250% 100%; animation: rfNow 1.6s ease-in-out infinite; }
@keyframes rfNow { from { background-position: 100% 0; } to { background-position: 0 0; } }
.rf-mini { display: grid; gap: 3px; margin-top: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--warning-soft); }
.rf-mini.is-done { background: var(--info-soft); }

/* ---------- Country chooser ---------- */
.ctry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.ctry {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 14px 8px 12px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.ctry:hover { transform: translateY(-2px); border-color: var(--text-dim); box-shadow: 0 8px 18px rgba(0, 0, 0, .11); }
.ctry img { width: 40px; height: 30px; border-radius: 5px; object-fit: cover; flex: none; border: 1px solid var(--border); }
.ctry .n {
  font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ctry .r { font-size: 10.5px; color: var(--text-dim); }
.ctry-globe {
  width: 40px; height: 30px; flex: none; display: grid; place-items: center;
  border-radius: 5px; background: var(--surface-3); color: var(--text-muted);
}
@media (max-width: 340px) { .ctry-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; } }

/* ---------- "You are shopping for" header on the package list ---------- */
.ctry-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
}
.ctry-head img { width: 42px; height: 32px; border-radius: 5px; object-fit: cover; flex: none; border: 1px solid var(--border); }
.ctry-head .n { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.ctry-head .s { font-size: 11.5px; color: var(--text-dim); margin-top: 1px; }

/* A chip that says which buy route the visitor is on, carried across screens. */
.flow-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: var(--r-full); font-size: 11.5px; font-weight: 600; flex: none;
  background: var(--surface-3); color: var(--text-muted);
}
.flow-chip.is-joytel { background: var(--info-soft); color: var(--info); }

/* ---------- Order-history type chooser ---------- */
.pick {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.pick + .pick { margin-top: 10px; }
.pick:hover { transform: translateY(-2px); border-color: var(--text-dim); box-shadow: 0 8px 18px rgba(0, 0, 0, .11); }
.pick .ic { width: 42px; height: 42px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center; }
.pick .ic svg { width: 21px; height: 21px; }
.pick .t { display: block; font-family: var(--font-display); font-weight: 700; font-size: 15.5px; letter-spacing: -.02em; }
.pick .s { display: block; font-size: 12px; color: var(--text-dim); margin-top: 3px; line-height: 1.35; }
.pick .n { font-size: 12px; color: var(--text-dim); flex: none; white-space: nowrap; }
@media (max-width: 400px) { .pick .n { display: none; } }


/* ---------- Order cards on the history list ----------
   Three columns that always line up: the flag, what was bought, and what it
   cost with its status under it. The order number sits in the foot, next to
   the link that uses it, so the head stays about the trip. */
.ord-card + .ord-card { margin-top: 12px; }
.ord-head { display: flex; align-items: flex-start; gap: 12px; }
.ord-head > .flag { flex: none; }
.ord-id { flex: 1 1 auto; min-width: 0; display: block; }
.ord-dest {
  display: block; font-family: var(--font-display); font-size: 16px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.2; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ord-meta { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: var(--text-dim); }
/* The status sits under the words it describes; the price keeps the right edge
   to itself, so the destination line never has to squeeze past a long chip. */
.ord-id > .chip { margin-top: 9px; }
.ord-money { flex: none; }
.ord-amt {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text);
}
.ord-no { font-size: 11.5px; letter-spacing: .02em; color: var(--text-dim); font-weight: 500; }

/* Each SIM on the order gets its own panel, because one order can carry several. */
.ord-sim {
  margin-top: 12px; padding: 11px 12px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2);
}
.ord-sim + .ord-sim { margin-top: 8px; }
.ord-sim-top { display: flex; align-items: center; gap: 9px; }
.ord-sim-top > .chip { flex: none; }
.ord-sim-id { flex: 1 1 auto; min-width: 0; display: block; }
.ord-sim-id .n {
  display: block; font-size: 13.5px; font-weight: 600; line-height: 1.2; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ord-sim-id .c {
  display: block; margin-top: 3px; font-size: 11px; line-height: 1.2; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The actions share the width evenly, so three cards in a list read as one grid. */
.ord-acts { display: flex; gap: 7px; margin-top: 11px; }
.ord-acts > * { flex: 1 1 0; min-width: 0; padding-inline: 6px; white-space: nowrap; }
.bal-box { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.mt-4 { margin-top: 4px; }


/* ==========================================================================
   Bundles — a regional or global plan is not one country, it is a list of them.
   Everywhere one flag would go, a bundle gets a short stack plus the count.
   ========================================================================== */
.flag-stack { display: inline-flex; align-items: center; flex: none; }
.flag-stack img {
  width: 26px; height: 26px; border-radius: var(--r-full); object-fit: cover;
  border: 2px solid var(--surface); background: var(--surface-3);
}
.flag-stack img + img { margin-left: -9px; }
.fs-more {
  margin-left: -9px; height: 26px; min-width: 26px; padding: 0 5px;
  border-radius: var(--r-full); border: 2px solid var(--surface);
  background: var(--surface-3); color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.flag-stack.fs-lg img, .flag-stack.fs-lg .fs-more { width: 40px; height: 40px; min-width: 40px; }
.flag-stack.fs-lg img + img, .flag-stack.fs-lg .fs-more { margin-left: -13px; }
.flag-stack.fs-lg .fs-more { font-size: 12px; }

/* The count reads as a fact, not decoration, so it carries the accent ink. */
.multi-tag { color: var(--accent-text); font-weight: 700; }

/* ---------- Every country a bundle covers, named ---------- */
.cov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.cov-item {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 9px 11px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border);
}
.cov-item img { width: 20px; height: 15px; border-radius: 3px; object-fit: cover; flex: none; border: 1px solid var(--border); }
.cov-item span {
  font-size: 12.5px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cov-more { margin-top: 10px; }
/* The count at the end of a coverage list is a button: it opens the rest. */
.cov-all { cursor: pointer; border-style: dashed; }
.cov-all span { color: var(--accent-text); font-weight: 700; }
.cov-all:hover { border-color: var(--accent); border-style: solid; }
.cov-all:active { transform: scale(.97); }
/* Inside a destination tile the stack stands in for the single flag. */
.ctry .flag-stack { height: 30px; }
.ctry .flag-stack img, .ctry .flag-stack .fs-more { border-color: var(--surface); }
.ctry.is-bundle { background: var(--surface); }
@media (max-width: 360px) { .cov-grid { grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); } }

/* The one thing people get wrong about bundles: it is one shared pool. */
.cov-note {
  display: flex; gap: 10px; margin-top: 14px; padding: 12px 13px;
  border-radius: var(--r-md); background: var(--info-soft); border: 1px solid var(--info-line, var(--border));
}
.cov-note svg { width: 17px; height: 17px; flex: none; color: var(--info); margin-top: 1px; }
.cov-note p { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.cov-note strong { color: var(--text); }


/* ==========================================================================
   Save a package — the heart sits on cards, on the package page and on the
   saved list. Outline means "not saved"; filled means "saved".
   ========================================================================== */
.fav-btn {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-full); color: var(--text-dim);
  background: var(--surface); border: 1px solid var(--border);
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.fav-btn svg { width: 17px; height: 17px; fill: none; transition: fill var(--t-fast); }
.fav-btn:hover { color: var(--danger); border-color: var(--danger); }
.fav-btn:active { transform: scale(.92); }
.fav-btn.is-on { color: var(--danger); border-color: var(--danger); }
.fav-btn.is-on svg { fill: currentColor; }

/* On a card the heart floats in the badge row, opposite the badge. */
.pkg-badge-row { display: flex; align-items: center; gap: 8px; }
.pkg-badge-row .fav-btn { margin-left: auto; }

.fav-lg { width: 40px; height: 40px; align-self: flex-start; }
.fav-lg svg { width: 20px; height: 20px; }

/* The header heart counts what is saved, like the bell counts what is unread. */
.hero-act .icon-btn { position: relative; }

/* ==========================================================================
   Live chat — the customer's full-screen conversation and the bubbles the
   admin inbox shares with it. Times sit outside the bubble, under the last
   message of a run, so the conversation reads as speech rather than labels.
   ========================================================================== */
.bub-day { display: flex; justify-content: center; margin: 16px 0 8px; }
.bub-day span {
  font-size: 11px; font-weight: 600; color: var(--text-dim); background: var(--surface-2);
  border: 1px solid var(--border); padding: 3px 11px; border-radius: var(--r-full);
}
.bub-sys { align-self: center; text-align: center; max-width: 88%; margin: 12px auto 4px; font-size: 12px; line-height: 1.45; color: var(--text-dim); }
/* The chat answering by itself says so, so nobody waits for a person who already wrote. */
.bub-auto {
  display: inline-block; margin-left: 5px; padding: 0 6px; border-radius: var(--r-full);
  background: var(--surface-3); color: var(--text-dim);
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.bub-row { display: flex; flex-direction: column; max-width: min(80%, 560px); margin-top: 3px; }
.bub-row.first { margin-top: 12px; }
.bub-row.me { align-self: flex-end; align-items: flex-end; }
.bub-row.them { align-self: flex-start; align-items: flex-start; }
.bub {
  padding: 9px 14px; border-radius: 18px; font-size: 14.5px; line-height: 1.45;
  overflow-wrap: anywhere; word-break: break-word;
}
.bub-row.me .bub { background: var(--accent); color: var(--accent-ink); }
.bub-row.them .bub { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
/* A run of messages from one side reads as one voice: the corners between them tighten. */
.bub-row.me:not(.first) .bub { border-top-right-radius: 6px; }
.bub-row.me:not(.last) .bub { border-bottom-right-radius: 6px; }
.bub-row.them:not(.first) .bub { border-top-left-radius: 6px; }
.bub-row.them:not(.last) .bub { border-bottom-left-radius: 6px; }
.bub-row.pending .bub { opacity: .65; }
.bub a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.bub-name { font-size: 11.5px; font-weight: 600; color: var(--text-dim); margin: 0 8px 4px; }
.bub-meta { display: flex; align-items: center; gap: 4px; margin: 5px 8px 0; font-size: 11px; color: var(--text-dim); }
.bub-meta .seen { color: var(--success); font-weight: 600; }
.bub-meta .fail { color: var(--danger); font-weight: 600; }
.bub-retry { font-size: 11px; font-weight: 700; color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
/* ---------- The chat button ---------- */
.cw-btn {
  /* Under a sheet's backdrop (60): an open sheet's buttons are never covered by it. */
  position: fixed; right: 16px; z-index: 59;
  bottom: calc(var(--tabbar-h, 0px) + 16px + env(safe-area-inset-bottom));
  width: 52px; height: 52px; border-radius: var(--r-full); display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  transition: transform var(--t-fast);
}
.cw-btn:hover { transform: translateY(-2px); }
.cw-btn svg { width: 23px; height: 23px; }
.cw-btn .dot {
  position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-full); background: var(--danger); color: #fff;
  font-size: 10.5px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg);
}
/* The button carries both icons; an open chat window shows the ×. */
.cw-btn .cw-i-chat, .cw-btn .cw-i-close { display: grid; place-items: center; }
.cw-btn .cw-i-close { display: none; }
.cw-btn .cw-i-close svg { width: 21px; height: 21px; }
/* On a phone or tablet: the whole screen, like a messaging app. The page underneath does not scroll. */
@media (max-width: 899px) {
  html.cw-open, html.cw-open body { overflow: hidden; }
  html.cw-open .cw-btn { display: none; }
}
.cw-screen {
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column;
  height: 100vh; height: 100dvh; background: var(--bg); color: var(--text);
  animation: cwUp .26s var(--e-out);
}
@keyframes cwUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cw-screen { animation: none; } }
/* On a wide screen the conversation keeps a readable column; the bars still span the screen. */
.cw-top, .cw-body, .cw-compose { padding-left: max(16px, calc((100% - 760px) / 2)); padding-right: max(16px, calc((100% - 760px) / 2)); }
.cw-top {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: 10px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.cw-av {
  position: relative; width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-weight: 800; font-size: 17px;
}
.cw-av i { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--success); border: 2px solid var(--surface); }
.cw-who { flex: 1; min-width: 0; display: grid; gap: 1px; }
.cw-who .nm { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.cw-who .st { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-x {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text); transition: background var(--t-fast);
}
.cw-x:hover { background: var(--surface-3); }
.cw-x svg { width: 18px; height: 18px; }
.cw-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding-top: 8px; padding-bottom: 14px; display: flex; flex-direction: column;
}
.cw-intro { text-align: center; padding: 22px 6px 6px; }
.cw-intro .cw-av { width: 60px; height: 60px; font-size: 22px; margin: 0 auto 12px; }
.cw-intro h2 { font-size: 19px; }
.cw-intro p { font-size: 13.5px; line-height: 1.55; color: var(--text-dim); margin: 6px auto 0; max-width: 38ch; }
.cw-quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 4px; }
.cw-quick button {
  font-size: 13.5px; padding: 9px 14px; border-radius: var(--r-full);
  border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: border-color var(--t-fast);
}
.cw-quick button:hover { border-color: var(--accent); }
.cw-log { display: flex; flex-direction: column; }
.cw-gate { margin: 24px auto 0; text-align: center; width: min(100%, 340px); }
.cw-compose {
  flex: none; display: flex; align-items: flex-end; gap: 10px;
  padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border);
}
.cw-compose textarea {
  flex: 1; min-width: 0; height: 46px; min-height: 46px; max-height: 132px; resize: none; padding: 12px 16px;
  border-radius: 23px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font: inherit; font-size: 16px; line-height: 1.35;             /* 16px: iPhone does not zoom into the box */
}
.cw-compose textarea:focus { outline: none; border-color: var(--accent); }
.cw-send {
  width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); transition: opacity var(--t-fast), transform var(--t-fast);
}
.cw-send:disabled { opacity: .4; }
.cw-send:not(:disabled):active { transform: scale(.94); }
.cw-send svg { width: 20px; height: 20px; }



/* ==========================================================================
   Per-day plans — "2 GB a day, pick your length".
   The day strip is the second filter, sitting under Single / Multi regional.
   ========================================================================== */
.chip-day { background: var(--info-soft); color: var(--info); font-weight: 700; }

/* The package's short facts ("Needs JoyTel SIM", "1 GB/day"): one line that
   swipes sideways when a narrow screen cannot hold it, with no scrollbar. */
.pd-tags {
  display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 10px; min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pd-tags::-webkit-scrollbar { display: none; }
.pd-tags .chip { flex: none; }

/* ---------- The pinned filter bar on the package list ----------
   Tabs, trip length and the result count, held under the header while the
   list scrolls. Kept to three tight rows: a sticky bar that eats half the
   screen is worse than none. */
.pkg-filters {
  position: sticky; top: var(--header-h); z-index: 20;
  display: flex; flex-direction: column; gap: 8px;
  margin-inline: -18px; padding: 10px 18px 11px;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.pkg-filters.is-stuck {
  border-bottom-color: var(--border);
  box-shadow: 0 10px 16px -14px rgba(0, 0, 0, .5);
}
/* A zero-height marker above the bar; when it leaves the top, the bar is pinned. */
.stick-sentinel { height: 1px; margin-top: 15px; }

.day-lead { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.day-lead .overline { line-height: 1.1; flex: none; }
.day-lead .tiny { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

@media (max-width: 380px) { .pkg-filters { margin-inline: -14px; padding-inline: 14px; } }
@media (max-width: 330px) { .pkg-filters { margin-inline: -12px; padding-inline: 12px; } }
.day-row {
  display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity;
}
.day-row::-webkit-scrollbar { display: none; height: 0; }
.day {
  flex: none; height: 34px; min-width: 34px; padding: 0 10px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  scroll-snap-align: start; transition: all var(--t-fast); white-space: nowrap;
}
.day:hover:not(.is-off) { border-color: var(--text-dim); color: var(--text); }
.day.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
/* A length nobody sells stays in place, dimmed, so the row never reflows. */
.day.is-off { opacity: .34; cursor: not-allowed; }

/* "2 GB/day" — the unit is a footnote to the number, not part of it. */
.pkg-specs .pd { font-size: .72em; font-weight: 500; color: var(--text-dim); margin-left: 1px; }

/* The arithmetic, shown so the price is never a surprise. */
.pkg-calc {
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--border);
  font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   One destination, one screen (destination.html).

   The traveller makes three choices in one card — how the data works, how much,
   how many days — and the price under them is the price of a real product.
   ========================================================================== */
.ds-head { text-align: center; padding: 4px 0 18px; }
.ds-head h1 { font-size: 23px; letter-spacing: -.03em; margin-top: 12px; }
.ds-head .flag-xl { width: 64px; height: 48px; border-radius: 12px; object-fit: cover; margin: 0 auto; display: block; }
/* A region wears the flags of the places it covers, as its tile does on the home screen. */
.ds-flags { display: flex; align-items: center; justify-content: center; }
.ds-flags img { width: 48px; height: 48px; border-radius: var(--r-full); object-fit: cover; border: 3px solid var(--bg); margin-left: -17px; }
.ds-flags img:first-child { margin-left: 0; }
.ds-globe { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto; border-radius: 16px;
  background: var(--surface-2); color: var(--text-muted); }
.ds-globe svg { width: 26px; height: 26px; }
.ds-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }

.ds-pick { padding: 16px; }
.ds-tabs { display: flex; align-items: center; gap: 8px; }
.ds-tabs .segmented { flex: 1; display: grid; grid-auto-flow: column; }
.ds-help { flex: none; width: 34px; height: 34px; color: var(--text-dim); }
.ds-help svg { width: 18px; height: 18px; }

/* The data choices: wide pills, two or three to a row, like a product page. */
.opt-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; margin-top: 8px; }
.opt {
  min-height: 44px; padding: 8px 10px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1.5px solid var(--border); color: var(--text);
  font-size: 13.5px; font-weight: 600; text-align: center; transition: all var(--t-fast);
}
.opt:hover { border-color: var(--text-dim); }
.opt.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.opt-net { display: grid; gap: 2px; text-align: left; padding: 9px 11px; }
.opt-net .n { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.opt-net .s { font-size: 11.5px; color: var(--text-dim); font-weight: 500; }
.opt-net.is-on .s { color: var(--accent-text); }

.ds-price {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 18px -16px -16px; padding: 14px 16px;
  border-top: 1px solid var(--border); background: var(--surface-2);
  border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px);
}
.ds-price .amt { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.ds-price .btn { flex: none; min-width: 140px; }

.ds-net { margin-top: 16px; padding: 14px 16px; }
.ds-net-row { display: flex; align-items: center; gap: 12px; }
.ds-cov { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }

@media (min-width: 900px) {
  .ds-layout { max-width: 720px; margin-inline: auto; }
  .ds-head h1 { font-size: 27px; }
}

/* ---------- Day chooser on the package page ---------- */
.pd-days { margin-top: 16px; }
.pd-days .day-row { margin-top: 9px; }
.pd-total {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding: 12px 13px; border-radius: var(--r-md);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.pd-total .n { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.03em; }
.pd-total .s { font-size: 12px; color: var(--text-muted); }


/* ==========================================================================
   Filter tabs — Single package / Multi regional.
   These sit next to the day chips and do the same job, so they answer the
   same way: the chosen one goes solid accent. The old pale pill was too
   quiet to read as "this is the filter that is on".
   ========================================================================== */
.segmented.seg-filter { padding: 4px; gap: 4px; }
.segmented.seg-filter button {
  padding: 9px 12px; font-size: 13px; line-height: 1.2;
  border: 1px solid transparent; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.segmented.seg-filter button.is-active,
:root[data-theme="dark"] .segmented.seg-filter button.is-active {
  background: var(--accent); color: var(--accent-ink);
  border-color: var(--accent); box-shadow: none; font-weight: 700;
}
.segmented.seg-filter button .n {
  display: inline-block; margin-left: 5px; font-size: 11px; font-weight: 700;
  opacity: .62; font-variant-numeric: tabular-nums;
}
@media (max-width: 340px) {
  .segmented.seg-filter button { padding: 9px 8px; font-size: 12px; }
  .segmented.seg-filter button .n { display: none; }
}


/* A search that found nothing still has to say something. */
.suggest-empty {
  display: flex; flex-direction: column; gap: 5px; padding: 16px 15px;
}
.suggest-empty strong { font-size: 13.5px; color: var(--text); }
.suggest-empty span { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
.suggest-empty .link { align-self: flex-start; margin-top: 4px; }


/* The line that answers "what am I looking at now". It flashes when the
   filter changes, so a tap on a tab is felt even before you read it. */
.result-line {
  margin-left: auto; flex: none;
  font-size: 12px; color: var(--text-muted);
  padding: 3px 9px; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--border);
  white-space: nowrap;
  transition: background var(--t-mid), border-color var(--t-mid);
}
.result-line strong { color: var(--text); font-variant-numeric: tabular-nums; }
.result-line.is-fresh { animation: resultFlash .9s var(--e-out); }
@keyframes resultFlash {
  0%   { background: var(--accent-soft); border-color: var(--accent); }
  100% { background: var(--surface-2);   border-color: var(--border); }
}
@media (prefers-reduced-motion: reduce) { .result-line.is-fresh { animation: none; } }


/* ==========================================================================
   Tablet, laptop and desktop.
   A phone is designed first; these rules only add room. From 720px wide rows
   and grids open up; from 900px (tablet landscape, laptop) every page has the
   site header; from 1024px long pages use two columns and buying keeps its
   action beside the details, and the home screen puts the offers and the
   balance side by side. Nothing here changes a phone.
   ========================================================================== */
.container.is-narrow { max-width: 560px; }
.home-greet { display: none; }

@media (min-width: 720px) {
  .pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pick-grid .pick + .pick { margin-top: 0; }
}

@media (min-width: 900px) {
  /* The site header takes over from the phone's hero strip on the home screen. */
  body[data-layout="home"] .hero-block { display: none; }
  body[data-layout="home"] .hero-block + .container { margin-top: 0; }
  .home-greet {
    display: block; margin: 22px 0 0; font-family: var(--font-display); font-size: 22px; font-weight: 600;
    letter-spacing: -.02em; color: var(--text-muted);
  }
  .home-greet strong { color: var(--text); font-weight: 800; }
  .home-greet + .home-top > .section-tight:first-child { margin-top: 14px; }

  /* Checkout keeps its pay bar at the bottom until the two-column layout below. */
  .co-page { padding-bottom: 110px; }
}

/* Checkout on a phone or tablet: the column the pay bar lines up with. */
.co-layout { max-width: 560px; }
.co-page { padding-bottom: 110px; }

@media (min-width: 1024px) {
  /* Order, eSIM and account pages: two columns that fill by height, in reading order. */
  .container.cols-lg { max-width: 1080px; columns: 2; column-gap: 24px; }
  .cols-lg > * { break-inside: avoid; -webkit-column-break-inside: avoid; margin-top: 0 !important; margin-bottom: 18px; }
  .cols-lg > .btn-block, .cols-lg > .btn { display: flex; width: 100%; }
  .container.is-wide-lg { max-width: 720px; }

  /* Order history: the cards two by two. */
  .ord-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .ord-grid .ord-card + .ord-card { margin-top: 0; }

  /* Package: the details on the left, the price and Buy Now beside them the whole way down. */
  .pd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; column-gap: 32px; align-items: start; }
  .pd-layout > .pd-buycard {
    grid-column: 2; grid-row: 1 / span 12; position: sticky; top: calc(var(--header-h) + 20px);
  }
  .pd-layout > .section { grid-column: 1; }
  .pd-layout > .pd-buycard + .section { margin-top: 0; }
  .pd-layout #related.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Checkout: the order on the left, the total and Pay now in a card beside it. */
  .co-page {
    display: grid; grid-template-columns: minmax(0, 600px) 360px; justify-content: center; column-gap: 28px;
    align-items: start; padding-bottom: 80px; padding-inline: 18px;
  }
  .co-page > .co-layout { grid-column: 1; max-width: none; padding-inline: 0; margin: 0; }
  .co-page > .paybar {
    grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + 20px); left: auto; right: auto; bottom: auto;
    padding: 20px; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  }
  :root[data-theme="dark"] .co-page > .paybar { box-shadow: var(--shadow-sm); }
  .co-page > .paybar .paybar-inner { flex-direction: column; align-items: stretch; gap: 16px; max-width: none; }
  .co-page > .paybar .v { font-size: 30px; }
  .co-page > .paybar .btn { flex: none; max-width: none; width: 100%; height: 52px; margin-left: 0; font-size: 16px; }
}

@media (min-width: 1100px) {
  /* Home: the offers and the balance share the first screen. */
  .home-top { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(340px, 1fr); column-gap: 22px; align-items: center; }
  .home-top > .section-tight, .home-top > .section { margin-top: 0; }
  .home-greet + .home-top { margin-top: 16px; }
  .home-greet + .home-top > .section-tight:first-child { margin-top: 0; }
  .home-top .home-money { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .home-top .home-money .buyduo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-self: stretch; }
  .home-top .en-card { padding: 18px 20px 16px; }
  .home-top .en-card-v { font-size: 44px; }
  .home-top .en-card-coin { width: 58px; height: 58px; }
}

/* ==========================================================================
   Written pages — Terms, Privacy and Refunds (UI.richText) and legal.html
   ========================================================================== */
.rt { font-size: 14px; line-height: 1.7; color: var(--text-muted); overflow-wrap: anywhere; }
.rt p { font-size: inherit; line-height: inherit; color: inherit; margin-top: 10px; }
.rt .rt-list { list-style: none; padding: 0; margin-top: 10px; }
.rt > :first-child { margin-top: 0; }
.rt .rt-list li { position: relative; padding-left: 18px; }
.rt .rt-list li + li { margin-top: 6px; }
.rt .rt-list li::before {
  content: ""; position: absolute; left: 4px; top: .8em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-dim);
}
.rt .rt-h {
  font-size: 1.1em; font-weight: 700; letter-spacing: -.01em; color: var(--text); margin-top: 26px;
  scroll-margin-top: calc(var(--header-h) + 18px);
}
.rt .rt-meta { font-size: 12px; color: var(--text-dim); }
.rt [lang="bn"], .lg-toc [lang="bn"], .lg-bn { font-family: "Hind Siliguri", var(--font-body); letter-spacing: 0; }
.rt p[lang="bn"], .rt .rt-list[lang="bn"] { font-size: 1.07em; line-height: 1.85; }
.rt .rt-h[lang="bn"] { font-size: 1.2em; }
.rf-policy.rt { font-size: 13px; line-height: 1.6; }
.rf-policy.rt .rt-h { margin-top: 16px; }

.lg-page { padding-top: 14px; }
.lg-wrap { max-width: 760px; }
.lg-tabs-row { display: flex; justify-content: center; margin-bottom: 16px; }
.lg-tabs { width: auto; max-width: 100%; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.lg-tabs::-webkit-scrollbar { display: none; }
.lg-tabs button { flex: none; padding: 9px 14px; white-space: nowrap; }
.lg-toc { display: none; }
.lg-doc {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 22px 18px 24px; animation: fadeUp 420ms var(--e-out) both;
}
.lg-title { font-size: clamp(24px, 6vw, 34px); }
.lg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; font-size: 12.5px; color: var(--text-dim); }
.lg-meta:empty { display: none; }
.lg-bn {
  display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: var(--r-full);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 13.5px; font-weight: 600;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.lg-bn:hover { border-color: var(--accent-line); background: var(--accent-softer); }
.lg-body { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-soft); font-size: 14.5px; }
.lg-body > .rt-h:first-child { margin-top: 0; }
.lg-help {
  display: grid; gap: 2px; margin-top: 28px; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--surface-2); font-size: 13.5px; color: var(--text-muted);
}
.lg-help strong { color: var(--text); }
.lg-toc ol { list-style: none; padding: 0; margin-top: 10px; display: grid; gap: 1px; }
.lg-toc a {
  display: block; padding: 7px 10px; border-radius: var(--r-sm); font-size: 13px; line-height: 1.35; color: var(--text-muted);
  border-left: 2px solid transparent; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.lg-toc a:hover { background: var(--surface-2); color: var(--text); }
.lg-toc a.is-current { background: var(--surface-2); color: var(--text); border-left-color: var(--accent); }

@media (min-width: 720px) {
  .lg-page { padding-top: 22px; }
  .lg-doc { padding: 32px 36px 36px; }
  .lg-body { font-size: 15px; }
}

@media (min-width: 1024px) {
  /* Laptop and desktop: the sections listed beside the page, following the reader. */
  .lg-wrap { max-width: 1100px; }
  .lg-tabs-row { justify-content: flex-start; padding-left: 272px; }
  .lg-tabs { max-width: none; }
  .lg-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .lg-toc:not([hidden]) {
    display: block; grid-column: 1; position: sticky; top: calc(var(--header-h) + 22px);
    max-height: calc(100dvh - var(--header-h) - 44px); overflow-y: auto; padding-right: 4px; scrollbar-width: thin;
  }
  .lg-doc { grid-column: 2; max-width: 820px; }
  .lg-doc { padding: 36px 44px 40px; }
}

/* ==========================================================================
   Saved packages — hearts, counts, the saved list
   ========================================================================== */
.toast-act {
  pointer-events: auto; margin-left: auto; padding: 4px 2px 4px 12px; flex: none;
  font-size: 13.5px; font-weight: 700; color: var(--accent-text); white-space: nowrap; background: none; border: 0; cursor: pointer;
}
.toast-act:hover { text-decoration: underline; text-underline-offset: 3px; }
.toast.fav svg { color: var(--danger); }

/* A heart that has just been filled beats once. */
.fav-btn.fav-pop svg { animation: favBeat 460ms var(--e-out); }
@keyframes favBeat { 0% { transform: scale(1); } 30% { transform: scale(1.32); } 55% { transform: scale(.9); } 100% { transform: scale(1); } }
/* The count in the header answers the tap. */
.bell-dot.is-pop { animation: favCount 420ms var(--e-out); }
@keyframes favCount { 0% { transform: scale(.4); } 55% { transform: scale(1.25); } 100% { transform: scale(1); } }

.fav-head { position: relative; }
.fav-head svg { transition: color var(--t-fast); }
.fav-head:hover svg { color: var(--danger); }

.fav-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fav-title { font-size: 20px; }
.fav-kinds { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.fav-kinds::-webkit-scrollbar { display: none; }
.fav-kinds button { white-space: nowrap; }
.fav-kinds button .dim { font-weight: 500; margin-left: 3px; }
.fav-grid .pkg { transition: opacity 220ms var(--e-out), transform 220ms var(--e-out); }
.fav-grid .pkg.is-leaving { opacity: 0 !important; transform: scale(.96) !important; pointer-events: none; }
.fav-empty { padding: 44px 8px; }
.fav-empty .empty-icon { color: var(--danger); }

@media (min-width: 1024px) {
  .fav-title { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .fav-btn.fav-pop svg, .bell-dot.is-pop { animation: none; }
}

/* A phone header that also carries the saved heart keeps its title readable. */
@media (max-width: 560px) {
  .hdr-mobile .header-inner:has(.fav-head) .header-actions { gap: 0; }
  .hdr-mobile .header-inner:has(.fav-head) .header-actions .icon-btn { width: 35px; }
  .hdr-mobile .header-inner:has(.fav-head) .balance-chip { margin-right: 4px; }
}


/* ==========================================================================
   Rows that scroll sideways (UI.hscroll) — the countries on the home page, the
   day buttons. Swiped to the screen's edges on a phone; inside the page, with
   arrows and a fade where there is more, from a laptop up.
   ========================================================================== */
.hs { position: relative; min-width: 0; }
.hs-btn { display: none; }
@media (hover: hover) and (pointer: fine) { .touch-only { display: none; } }
@media (hover: none), (pointer: coarse) { .mouse-only { display: none; } }

@media (min-width: 900px) {
  .hs > .dest-row, .hs > .day-row {
    margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0;
    --fade-l: 0px; --fade-r: 0px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  }
  .hs.can-prev > .dest-row, .hs.can-prev > .day-row { --fade-l: 56px; }
  .hs.can-next > .dest-row, .hs.can-next > .day-row { --fade-r: 56px; }
  .hs > .dest-row::after { display: none; }

  .hs-btn {
    position: absolute; z-index: 2; top: 50%; display: grid; place-items: center;
    width: 38px; height: 38px; border-radius: var(--r-full);
    color: var(--text); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md);
    opacity: 0; pointer-events: none; transform: translateY(-50%) scale(.9);
    transition: opacity var(--t-base), transform var(--t-base), border-color var(--t-fast);
  }
  .hs-btn svg { width: 18px; height: 18px; }
  .hs-btn:hover { border-color: var(--text-dim); }
  .hs-prev { left: -8px; }
  .hs-next { right: -8px; }
  .hs.can-prev .hs-prev, .hs.can-next .hs-next { opacity: 1; pointer-events: auto; transform: translateY(-50%); }
  .hs-btn:active { transform: translateY(-50%) scale(.92); }

  /* The countries: a little larger, on a row that fits the page. */
  .hs-dest .dest-row { gap: 12px; padding-top: 4px; padding-bottom: 10px; }
  .hs-dest .dest { width: 128px; }
  .hs-dest .dest-name { font-size: 13px; height: 40px; }
  .hs-dest .hs-btn { top: calc(50% - 3px); }

  /* The day buttons are short; their arrows sit a little smaller. */
  .hs-days .hs-btn { width: 32px; height: 32px; }
  .hs-days .hs-btn svg { width: 15px; height: 15px; }
  .hs-days .hs-prev { left: -4px; }
  .hs-days .hs-next { right: -4px; }
}

/* ==========================================================================
   Home on a laptop or desktop: the offers on the left, the balance and the two
   ways to buy on the right, the same height, nothing overlapping.
   ========================================================================== */
@media (min-width: 1100px) {
  /* The offers take the larger share of the width, so they stand taller; the
     balance and the two ways to buy sit in a compact column beside them.
     The column is exactly as tall as the banner itself: the dots and arrows
     hang below the row, so they do not count towards its height. */
  .home-top {
    grid-template-columns: minmax(0, 1fr) clamp(304px, 23vw, 340px);
    column-gap: 20px; align-items: stretch; margin-bottom: 46px;
  }
  .home-top:has(.carousel.is-single), .home-top:not(:has(.carousel)) { margin-bottom: 0; }
  .hero-slider .carousel-bar { position: absolute; left: 0; right: 0; top: 100%; margin-top: 12px; }
  .home-top > .hero-slider { min-width: 0; }
  .hero-slider .carousel-view { border-radius: 28px; }
  /* The offers set the height of the row (the artwork is never stretched or
     cropped); the right column takes exactly that height and shares it out. */
  .home-top > .home-money { contain: size; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .home-top .home-money .en-card { flex: 1 1 0; padding: 16px 18px; border-radius: 24px; }
  .home-top .en-card-v { font-size: 42px; }
  .home-top .en-card-coin { width: 54px; height: 54px; }
  .home-top .en-card-actions { gap: 8px; padding-top: 12px; }
  .home-top .en-card-actions .btn { height: 44px; font-size: 14px; padding-inline: 10px; gap: 6px; }
  .home-top .en-card-actions .btn svg { width: 16px; height: 16px; }
  /* The card and the two squares share the height evenly; the card never below its content. */
  .home-top .home-money .buyduo { flex: 1 1 0; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .home-top .home-money .buytile { aspect-ratio: auto; min-height: 0; container-type: size; padding: 15px; border-radius: 24px; }
  /* Icon and words follow the square's size. */
  .home-top .buytile .ic { width: min(76px, 40cqi, 34cqh); height: min(76px, 40cqi, 34cqh); }
  .home-top .buytile .go { width: min(42px, 24cqi, 22cqh); height: min(42px, 24cqi, 22cqh); }
  .home-top .buytile .t1 { font-size: min(20px, 12.4cqi, 11cqh); }
  .home-top .buytile .t2 { font-size: min(42px, 21.6cqi, 22cqh); }
  .home-top .buytile .t { margin-top: auto; }
}
/* A small laptop has less height to share: the card keeps to its content. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .home-top .home-money .en-card { padding: 14px 16px; }
  .home-top .en-card-v { font-size: 34px; }
  .home-top .en-card-coin { width: 46px; height: 46px; }
  .home-top .en-card-actions { padding-top: 10px; }
  .home-top .en-card-actions .btn { height: 40px; font-size: 13.5px; }
}
/* Phone and tablet: the offers swipe and play by themselves, so no dots or arrows
   under them, and the balance follows at the same gap as the cards below it. */
@media (max-width: 1099px) {
  .hero-slider .carousel-bar { display: none; }
  .home-top > .hero-slider + .home-money { margin-top: 12px; }
}
@media (min-width: 720px) and (max-width: 1099px) {
  .home-top > .hero-slider + .home-money { margin-top: 14px; }
}

/* ==========================================================================
   Recharge EN (wallet.js) — one column on a phone; on a laptop a proper dialog:
   the amount on the left, what you pay and the Pay button beside it, sized to
   fit the window without scrolling.
   ========================================================================== */
.w-pick > .overline { margin-bottom: 12px; }
.w-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.w-sum { margin-top: 16px; }
.w-sum-k { display: none; }
.w-pay { margin-top: 16px; }
.w-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; text-align: center; }
.w-secure svg { width: 15px; height: 15px; flex: none; color: var(--text-dim); }

/* Any sheet shown as a dialog: room at the top now there is no grab handle,
   and never taller than the window. */
@media (min-width: 720px) {
  .sheet { padding: 20px 24px 24px; max-height: calc(100dvh - 48px); scrollbar-width: thin; overscroll-behavior: contain; }
}
@media (min-width: 900px) {
  .sheet.sheet-wallet { width: min(820px, calc(100vw - 64px)); padding: 24px 28px 28px; }
  .sheet-wallet .sheet-head { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
  .sheet-wallet .sheet-head h3 { font-size: 19px !important; }
  .sheet-wallet .w-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
  .sheet-wallet .w-packs { gap: 12px; }
  .sheet-wallet .pack { padding: 16px 16px 15px; }
  .sheet-wallet .pack-coins { font-size: 18px; }
  .sheet-wallet .w-sum {
    margin-top: 0; display: flex; flex-direction: column; padding: 18px 18px 16px;
    border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border);
  }
  .sheet-wallet .w-sum-k { display: block; margin-bottom: 10px; }
  .sheet-wallet .w-dl { margin-top: 0; padding: 0; background: none; border: 0; box-shadow: none; }
  .sheet-wallet .w-dl .dl { gap: 12px; }
  .sheet-wallet .w-dl .dl > div { font-size: 14px; }
  .sheet-wallet .w-dl .dl > div:first-child { padding-bottom: 12px; border-bottom: 1px dashed var(--border); }
  .sheet-wallet .w-dl .dl > div:first-child .v { font-size: 20px; font-family: var(--font-display); }
  .sheet-wallet .w-dl { margin-bottom: 18px; }
  .sheet-wallet .w-pay { margin-top: auto; }
}


/* ==========================================================================
   Live chat on a laptop or desktop: a window of a fixed size above the chat
   button, over the page. The page stays usable; the button (now a ×), the ×
   in the window and Escape close it. Phones keep the full-screen chat.
   ========================================================================== */
@media (min-width: 900px) {
  .cw-btn { right: 24px; bottom: 24px; width: 56px; height: 56px; }
  html.cw-open .cw-btn { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
  html.cw-open .cw-btn .cw-i-chat { display: none; }
  html.cw-open .cw-btn .cw-i-close { display: grid; }
  .cw-screen {
    inset: auto; right: 24px; bottom: calc(24px + 56px + 14px);
    width: 400px; height: min(640px, calc(100vh - 150px)); height: min(640px, calc(100dvh - 150px));
    border-radius: 22px; border: 1px solid var(--border); box-shadow: var(--shadow-lg); overflow: hidden;
    transform-origin: bottom right; animation: cwPop 220ms var(--e-out);
  }
  .cw-top, .cw-body, .cw-compose { padding-left: 16px; padding-right: 16px; }
  .cw-top { padding-top: 12px; padding-bottom: 12px; }
  .cw-x { width: 36px; height: 36px; }
  .cw-intro { padding-top: 16px; }
  .cw-intro h2 { font-size: 17px; }
  .cw-quick button { font-size: 13px; padding: 8px 12px; }
  .cw-compose { padding-top: 10px; padding-bottom: 12px; }
  .cw-compose textarea { font-size: 14.5px; }
}
@media (min-width: 900px) and (max-height: 560px) {
  .cw-screen { height: calc(100dvh - 120px); bottom: calc(16px + 56px + 10px); }
}
@keyframes cwPop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cw-screen { animation: none; } }

/* Contact us: the ways to reach the team, as large buttons above the words. */
.lg-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px; margin-top: 18px; }
.lg-ci {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px; text-align: left;
  border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
a.lg-ci:hover, button.lg-ci:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.lg-ci .ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); }
.lg-ci .ic svg { width: 20px; height: 20px; }
.lg-ci .tx { display: grid; gap: 2px; min-width: 0; }
.lg-ci b { font-size: 13.5px; font-weight: 700; }
.lg-ci em { font-style: normal; font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; }
.lg-ci.is-static { grid-column: 1 / -1; }
/* WhatsApp is a mark people recognise by its colour, so this one keeps it. */
.lg-ci.is-wa .ic { background: #25D366; color: #fff; }
a.lg-ci.is-wa:hover { border-color: #25D366; }

/* ==========================================================================
   Brand logo — two images, one for each theme (theme.js → Brand). The light
   theme shows the logo with dark words; the dark theme the one with white words.
   ========================================================================== */
.brand-logo { display: inline-flex; align-items: center; line-height: 0; }
.logo-img { display: block; height: 30px; width: auto; max-width: none; }
.logo-img.for-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-img.for-light { display: none; }
  :root:not([data-theme="light"]) .logo-img.for-dark { display: block; }
}
:root[data-theme="dark"] .logo-img.for-light { display: none; }
:root[data-theme="dark"] .logo-img.for-dark { display: block; }
.brand-icon { display: block; width: 100%; height: 100%; object-fit: contain; }

.brand .logo-img { height: 34px; }
.appbar-brand .logo-img { height: 26px; }
@media (max-width: 380px) { .appbar-brand .logo-img { height: 22px; } }
.login-brand { display: flex; justify-content: center; margin-bottom: 20px; }
.login-brand .logo-img { height: 46px; }
.hero-av.hero-av-icon { padding: 7px; background: var(--surface-2); border: 1px solid var(--border); }
footer .brand .logo-img { height: 30px; }

/* The splash: the icon arrives, then the name. */
.splash-icon { width: 92px; height: 68px; margin: 0 auto 14px; opacity: 0; animation: splashIcon .5s cubic-bezier(.2, .8, .3, 1) forwards; }
.splash-word .logo-img { height: 56px; margin: 0 auto; }
@media (max-width: 380px) { .splash-word .logo-img { height: 46px; } }
@keyframes splashIcon { from { opacity: 0; transform: scale(.8) translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .splash-icon { animation: none; opacity: 1; } }