/* Emerald comparison theme. Layout, brand artwork and routing remain shared. */
:root {
  color-scheme: dark;
  --bg: #071d1a;
  --bg-alt: #092720;
  --panel-top: #10382e;
  --panel-bottom: #0a2923;
  --line: #254c3f;
  --text: #f4faf6;
  --text-soft: #c5ddd2;
  --muted: #a2bfb2;
  --emerald: #4ee4a0;
  --emerald-light: #b6ffda;
  --gold: #4ee4a0;
  --silver: #d8ede1;
  --chip: #f3faf5;
  --gold-fill: linear-gradient(180deg, #83f5b5 0%, #35df90 42%, #14b86f 100%);
  --silver-fill: linear-gradient(180deg, #174d3c, #0c352a);
  --orange-fill: var(--gold-fill);
  --panel-fill: linear-gradient(145deg, #10382e, #0a2923 90%);
}
body { background: var(--bg); }
::selection { background: #3cdd95; color: #042b1c; }
a:hover { color: var(--emerald-light); }
.eyebrow { color: #8bd5b1; }
.eyebrow::before { background: linear-gradient(90deg, #239265, #adf8cd); }
.accent { color: #72efac; }
/* Emerald letters and silver digits keep the two parts distinct. */
.hero__title .brand-wordmark,
.cta__title .accent { color: #72efac; }
.hero__title .brand-wordmark__letters,
.cta__title .brand-wordmark__letters { color: var(--brand-letters-color, #8cffbd); }
.hero__title .brand-wordmark__digits,
.cta__title .brand-wordmark__digits { color: var(--brand-digits-color, #fafcff); }
@supports ((background-clip:text) or (-webkit-background-clip:text)) {
  .hero__title .brand-wordmark__letters,
  .hero__title .brand-wordmark__digits,
  .cta__title .brand-wordmark__letters,
  .cta__title .brand-wordmark__digits {
    filter: drop-shadow(0 .018em .012em #001c0e99);
  }
  .hero__title .brand-wordmark__letters,
  .cta__title .brand-wordmark__letters {
    background-image: var(--brand-letters-fill, linear-gradient(165deg, #e4fff0 7%, #a4ffcd 27%, #caffdf 39%, #64f7a5 52%, #35c77b 67%, #87ffba 82%, #d6ffe7 96%));
    -webkit-text-stroke-color: var(--brand-letters-stroke, #b5ffd5);
  }
  .hero__title .brand-wordmark__digits,
  .cta__title .brand-wordmark__digits {
    background-image: var(--brand-digits-fill, linear-gradient(165deg, #fff 0%, #fff 24%, #e8edf0 34%, #fff 45%, #c4cdd2 49%, #e6edf0 54%, #fff 64%, #fafcff 84%, #d9e1e5 100%));
    -webkit-text-stroke-color: var(--brand-digits-stroke, #f0f5f7);
  }
}
@media (forced-colors:active) {
  .hero__title .brand-wordmark__letters,
  .hero__title .brand-wordmark__digits,
  .cta__title .brand-wordmark__letters,
  .cta__title .brand-wordmark__digits {
    color: CanvasText; background: none; -webkit-text-fill-color: currentColor;
    -webkit-text-stroke: 0; filter: none;
  }
}
.site-header {
  background: rgba(6,26,23,.96);
  border-color: #244d3d;
  box-shadow: 0 4px 28px #00170f24;
}
.nav__links a { color: #d8e9df; }
.nav__links a:hover, .nav__links a:focus-visible,
.nav__links a[aria-current], .nav__links .nav__live-chat[aria-expanded="true"] { color: var(--emerald); }
.skip-link { background: var(--emerald); color: #042b1c; }

/* Green light sits behind the original hands and device, without tinting them. */
.hero {
  background: radial-gradient(ellipse at 92% 14%, #0d6242 0%, transparent 55%),
    radial-gradient(ellipse at 66% 88%, #0c4835 0%, transparent 50%), #071d1a;
}
.hero::before {
  background: linear-gradient(90deg, #071d1ac9, #071d1a55 40%, transparent 70%);
}
.hero::after { background: linear-gradient(180deg, transparent 60%, #071d1a); }
.hero__title, .section-title, .cta__title { color: var(--text); }
.hero__lead { color: var(--text-soft); }
.hero__note { color: var(--muted); }
.hero__app-icon {
  border-color: #acf5c5;
  background: linear-gradient(145deg, #113b2d, #0a211c 80%);
  box-shadow: 0 0 5px #a3f0ba, 0 0 22px #24d88075, 0 0 44px #19b56b45;
}
.hero__loading-bar { background: #22513a; box-shadow: inset 0 1px 1px #beffda33; }
.hero__loading-bar::before {
  background: linear-gradient(180deg, #c5ffdb, #5af2a3 52%, #22d37d);
  box-shadow: 0 0 1cqw #61eea377, 0 0 2.2cqw #20c67444;
}
.hero__artwork .hero__sparkle {
  opacity: .9;
  filter: hue-rotate(78deg) saturate(1.8) drop-shadow(0 0 4px #45ef9e80);
}
.facts { background: #0a2b23; border-color: #254d3f; }
.facts__list dt { color: #8bd5b1; }
.facts__list dd { color: #e3f5eb; }
.about, .features, .topup, .faq { background: var(--bg); }
.install { background: linear-gradient(130deg, #0a2922, #071e1b); }
.panel { background: var(--panel-fill); border-color: #2a5242; box-shadow: 0 12px 32px #001d151f; }
.feature__art {
  border-color: #2e5745;
  background: radial-gradient(circle at 50% 45%, #1b63443d, transparent 72%), #0c2b24;
}
.feature__art svg [stroke="#FFC83D"] { stroke: #67e9a5; }
.feature__art svg [fill="#0C0C0E"] { fill: #0c2b24; }
.feature__num, .feature__num--silver { color: #c6d7a1; }
.feature.is-selected, .feature:focus-within { border-color: #4edb98; box-shadow: 0 10px 30px #18c3741c; }
.feature.is-selected h3, .feature-detail h3 { color: var(--emerald-light); }
.feature-select, .text-toggle, .guide-detail summary, .page-link { color: var(--emerald); }
.enhanced .quick-steps li { background: #0b2b23; border-color: #2c5543; }
.quick-steps span { color: #f0d78e; }
.steps__num, .steps[data-panel="ios"] .steps__num { color: #a6d8bd; }
.topup__list li { background: #f3faf5; border-color: #c9e3d4; }
.brand-icon, .app-id img, .cta__icon { background: #09281f; }
.brand-icon { border: 1px solid #305a43; box-shadow: 0 12px 32px #00190e30; }
.brand-icon img, .app-id .brand-icon img { background: transparent; }
.cta__icon { box-shadow: 0 0 0 8px #3ccc8110, 0 18px 50px #19d37b24; }
.closing {
  border-color: #2d5441;
  background: radial-gradient(ellipse at 50% 20%, #155b3b 0%, #0a3026 48%, #071d1a 90%);
}
.closing::before { display: none; }
.footer { border-color: #326044; color: var(--muted); }
.footer a { color: #c5e6d2; }

/* Bright emerald primary actions, outlined green secondary actions. */
.btn { --glow: 56,221,145; border: 1px solid transparent; text-shadow: none; }
.btn--gold, .btn--gold:hover, .btn--orange, .btn--orange:hover,
.btn--gold:focus-visible, .btn--orange:focus-visible,
.btn--gold.is-touch-pressed, .btn--orange.is-touch-pressed {
  background: var(--gold-fill); color: #042b1c; border-color: #5eec9e;
  box-shadow: inset 0 1px 0 #e3ffe780, 0 14px 30px -12px #20d58266;
  filter: none; text-shadow: none;
}
.btn--silver, .btn--silver:hover, .btn--silver:focus-visible,
.btn--silver:active, .btn--silver.is-touch-pressed {
  --glow: 56,221,145;
  background: var(--silver-fill); color: #d4ffe7; border-color: #53ae80;
  box-shadow: inset 0 1px 0 #dbffe21a, 0 10px 26px -14px #00190f;
  filter: none; text-shadow: none;
}
.btn:focus-visible { outline-color: #acf5c5; box-shadow: 0 0 0 4px #43e59633, 0 12px 28px #12b26933; }
.btn.is-touch-pressed, .mobile-actions .btn.is-touch-pressed { box-shadow: 0 0 0 3px #43e59633, 0 8px 22px #12b26944; }
.mobile-actions { background: rgba(6,27,22,.97); border-color: #2c5742; box-shadow: 0 -5px 22px #00191033; }

.language-switch, .tabs.tabs--sliding { background: #0c2c23; border-color: #315542; box-shadow: inset 0 1px 3px #00150c55; }
.language-switch__indicator, .tabs__indicator { background: var(--gold-fill); box-shadow: inset 0 1px 0 #effff0aa, 0 0 14px #34df8f26; }
.tabs__indicator::after { background: var(--gold-fill); }
.tabs[data-active="ios"]>.tabs__indicator { box-shadow: inset 0 1px 0 #effff0aa, 0 0 14px #34df8f26; }
.language-switch .language-option, .tabs.tabs--sliding button[data-tab][aria-pressed=false] { color: #a5c8b5; }
.language-switch .language-option[aria-pressed=true],
.tabs.tabs--sliding button[data-tab][aria-pressed=true],
.tabs.tabs--sliding button[data-tab][aria-pressed=true]:focus-visible,
.tabs.tabs--sliding button[data-tab][aria-pressed=true].is-touch-pressed { color: #042b1c; }
.menu-toggle, .menu-close, .detail-close { background: #0c2c23; border-color: #345743; color: #b6f0d1; box-shadow: none; }
.menu-toggle span { background: #b6f0d1; }
#mobile-menu { background: #09231d; border-color: #315542; }
#mobile-menu::backdrop { background: #00100aca; }
#mobile-menu nav a { color: #d8e9df; border-color: #2a4c3d; }
#mobile-menu nav a[aria-current] { color: var(--emerald); }

.faq .faq__list>details { background: linear-gradient(135deg, #0d3027, #09251f); border-color: #29513e; box-shadow: none; }
.faq .faq__list>details[open] { background: linear-gradient(135deg, #123b2d, #0b2c24); border-color: #53966e; box-shadow: 0 6px 24px #0bc36d0d; }
.faq .faq__list>details>summary { color: #e1f1e7; }
.faq .faq__list>details[open]>summary { color: #bcf5d4; }
.faq .faq__list>details>summary svg,
.faq .faq__list>details[open]>summary svg { background: #103a2b; border-color: #36654a; stroke: #76e5ac; box-shadow: none; }
.faq .faq__list>details>summary:focus-visible { outline-color: #76e5ac; box-shadow: 0 0 0 3px #43e59622; }
.chat { background: linear-gradient(120deg, #143c2b, #0b2c22); border-color: #48734d; }
.chat__title { color: #e1f5e5; }
:is(.language-option,.menu-toggle,.menu-close,.detail-close,.feature-select,.text-toggle):focus-visible { outline-color: #acf5c5; box-shadow: 0 0 0 3px #43e59622; }
:is(.language-option,.menu-toggle,.menu-close,.detail-close,.feature-select,.text-toggle,.page-link).is-touch-pressed { color: var(--emerald-light); border-color: #53ae80; box-shadow: 0 0 18px #43e59633; }
.feature.is-touch-pressed, .feature:has(.is-touch-pressed), .topup__list li.is-touch-pressed { border-color: #53ae80; box-shadow: 0 6px 24px #43e59622; }
.faq .faq__list>details:has(>summary.is-touch-pressed) { border-color: #53ae80; box-shadow: 0 6px 24px #43e59622; }
.faq .faq__list>details>summary.is-touch-pressed, .guide-detail summary.is-touch-pressed, #mobile-menu nav a.is-touch-pressed { color: #bcf5d4; background: #15432f; }
.tabs.tabs--sliding button[data-tab].is-touch-pressed { box-shadow: inset 0 0 0 1px #83e8b3, 0 0 12px #43e59622; }
@media (hover:hover) and (pointer:fine) {
  .btn--gold:hover, .btn--orange:hover { background: linear-gradient(180deg, #a0ffcd, #36e899 65%, #20c77b); color: #042b1c; box-shadow: 0 12px 30px -8px #20d58266; }
  .btn--silver:hover { color: #edfff5; border-color: #80e6ac; background: linear-gradient(180deg, #1b5a43, #104631); box-shadow: 0 10px 24px -8px #20d58244; }
  .feature:hover { border-color: #53ae80; box-shadow: 0 12px 32px #43e59617; }
  .feature:hover .feature__art svg { filter: drop-shadow(0 3px 6px #43e59644); }
  .feature:hover h3 { color: var(--emerald-light); }
  .topup__list li:hover { border-color: #53ae80; box-shadow: 0 10px 24px #43e59622; }
  :is(.menu-toggle,.menu-close,.detail-close):hover { color: var(--emerald-light); border-color: #53ae80; background: #164632; box-shadow: 0 0 0 3px #43e59622; }
  :is(.feature-select,.text-toggle):hover { color: var(--emerald-light); background: #16463255; box-shadow: none; }
  .language-switch .language-option[aria-pressed=false]:hover,
  .tabs.tabs--sliding button[data-tab][aria-pressed=false]:hover { color: #d4ffe7; background: #265740; box-shadow: none; }
  .language-switch .language-option[aria-pressed=true]:hover,
  .tabs.tabs--sliding button[data-tab][aria-pressed=true]:hover { color: #042b1c; background: #ffffff14; box-shadow: none; }
  .faq .faq__list>details:has(>summary:hover) { border-color: #53ae80; box-shadow: 0 6px 24px #43e59617; }
  .faq .faq__list>details>summary:hover { color: #bcf5d4; }
  .faq .faq__list>details>summary:hover svg { background: #1b4c32; border-color: #68bc8e; box-shadow: none; }
  .guide-detail summary:hover, #mobile-menu nav a:hover { color: #bcf5d4; background: #16463255; }
}
@media (max-width:700px) {
  .hero { background: radial-gradient(ellipse at 90% 65%, #105038, transparent 66%), #071d1a; }
  .hero::before { background: linear-gradient(180deg, #071d1a 0%, #071d1a99 35%, transparent 70%); }
  .feature__art { background: radial-gradient(circle, #1b634455, transparent 75%); }
  .mobile-actions .btn { box-shadow: none; }
  .mobile-actions .mobile-actions__chat { background: #143e2e; border-color: #4b946c; color: #a2f4c6; box-shadow: none; }
}

/* Preserve visible label feedback for mouse, keyboard and touch. */
.btn--gold:focus-visible, .btn--orange:focus-visible,
.btn--gold:active, .btn--orange:active,
.btn--gold.is-touch-pressed, .btn--orange.is-touch-pressed {
  color: #f4fff8;
  background: linear-gradient(180deg, #168052, #09613f);
  border-color: #8ef5b6;
  text-shadow: none;
}
.btn--silver:focus-visible, .btn--silver:active, .btn--silver.is-touch-pressed {
  color: #89ffb6;
  background: linear-gradient(180deg, #1b5a43, #104631);
  border-color: #80e6ac;
  text-shadow: none;
}
@media (hover:hover) and (pointer:fine) {
  .btn--gold:hover, .btn--orange:hover {
    color: #f4fff8;
    background: linear-gradient(180deg, #168052, #09613f);
    border-color: #8ef5b6;
  }
  .btn--silver:hover { color: #89ffb6; }
}

/* Compact disclosures: quiet cards, clearly bounded actions and stable spacing. */
.features .feature:hover,
.features .feature:focus-within { transform: none; box-shadow: none; }
.features .feature:hover .feature__art svg { transform: none; filter: none; }
.features .feature.is-selected {
  border-color: #62dca0;
  background: linear-gradient(145deg, #143d2f, #0b2c24 90%);
  box-shadow: 0 0 0 1px #62dca026;
}
.features .feature-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px solid #39644f;
  border-radius: 12px;
  background: #0b2a22;
  color: #b8f6d3;
  line-height: 1.4;
  box-shadow: none;
  text-decoration: none;
  transform: none;
}
.features .feature-select[aria-expanded="true"] {
  color: #063322;
  border-color: #8aefb9;
  background: #86ecb7;
  box-shadow: inset 0 1px 0 #d9ffe64d;
}
.features .feature-select > span {
  position: relative;
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  font-size: 0;
}
.features .feature-select > span::before,
.features .feature-select > span::after,
.install .guide-detail > summary::before,
.install .guide-detail > summary::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.features .feature-select > span::before,
.features .feature-select > span::after { top: 50%; left: 50%; }
.features .feature-select > span::after,
.install .guide-detail > summary::after { transform: translate(-50%, -50%) rotate(90deg); }
.features .feature-select[aria-expanded="true"] > span::after,
.install .guide-detail[open] > summary::after { opacity: 0; }
.install .guide-detail > summary {
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 48px;
  padding: 12px 48px 12px 18px;
  border: 1px solid #39644f;
  border-radius: 12px;
  background: #0b2a22;
  color: #b8f6d3;
  line-height: 1.5;
  list-style: none;
  box-shadow: none;
  transition: color .2s, background .2s, border-color .2s;
}
.install .guide-detail > summary::-webkit-details-marker { display: none; }
.install .guide-detail > summary::marker { content: ""; }
.install .guide-detail > summary::before,
.install .guide-detail > summary::after { top: 50%; left: calc(100% - 24px); }
.install .guide-detail[open] > summary {
  background: #174a35;
  border-color: #5bac80;
  color: #c5ffde;
}
.install .guide-detail > ol { margin-top: 20px; border-top: 1px solid #2c5342; }
.features .feature-select:focus-visible,
.install .guide-detail > summary:focus-visible {
  outline: 2px solid #b6ffda;
  outline-offset: 4px;
  box-shadow: none;
}
.features .feature-select.is-touch-pressed,
.install .guide-detail > summary.is-touch-pressed {
  background: #235c40;
  border-color: #8aefb9;
  color: #f2fff7;
  box-shadow: none;
}
@media (hover:hover) and (pointer:fine) {
  .features .feature-select:hover,
  .install .guide-detail > summary:hover {
    color: #f2fff7;
    background: #235c40;
    border-color: #8aefb9;
    box-shadow: none;
    text-decoration: none;
  }
  .features .feature-select[aria-expanded="true"]:hover {
    background: #a5f7cd;
    color: #063322;
  }
}
@media (max-width:700px) {
  .features .feature-select { padding: 11px 12px; min-height: 46px; gap: 8px; border-radius: 10px; }
  .install .guide-detail > summary { font-size: 13px; border-radius: 10px; }
}

/* Classic logo keeps the existing navigation height. */
.site-header .nav__brand img{height:46.5px;object-fit:contain}
@media(max-width:700px){.site-header .nav__brand img{height:38.5px}}