:root {
  --bg: #06100e;
  --bg-2: #091613;
  --panel: #0c1815;
  --panel-2: #101f1a;
  --text: #f5f8f6;
  --muted: #a6b5ac;
  --muted-2: #75877d;
  --lime: #cfff58;
  --lime-2: #a9f04b;
  --green: #72bf69;
  --line: rgba(207,255,88,.16);
  --line-2: rgba(255,255,255,.08);
  --shadow: 0 28px 90px rgba(0,0,0,.42);
  --radius: 28px;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 82% 5%, rgba(139,204,93,.09), transparent 23%),
    radial-gradient(circle at 12% 22%, rgba(134,226,122,.06), transparent 24%),
    var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.017) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.017) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 86%);
  z-index: -1;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input { font: inherit; }
::selection { background: var(--lime); color: #07110f; }

.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.announcement {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 7px 16px;
  font-size: 13px;
  color: #dce9df;
  background: #0c1814;
  border-bottom: 1px solid var(--line-2);
  text-align: center;
}
.announcement .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 18px var(--lime);
}
.announcement a { color: var(--lime); text-decoration: none; font-weight: 750; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(18px);
  background: rgba(6,16,14,.76);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; min-width: 192px; }
.brand img { width: 190px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: #c1cec6; text-decoration: none; font-size: 14px; font-weight: 650; }
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: 999px;
  color: #07110f !important; background: var(--lime);
  box-shadow: 0 0 32px rgba(207,255,88,.13);
}
.menu-button { display: none; border: 0; background: transparent; color: white; font-size: 25px; cursor: pointer; }

/* Top padding reduced from 84px: the headline sat too low with the
   App Store mockup gone. Hero only — no other section changes. */
.hero { position: relative; overflow: hidden; padding: 26px 0 48px; }
.hero::after {
  content: ""; position: absolute; width: 780px; height: 780px; border: 1px solid rgba(207,255,88,.07);
  border-radius: 50%; right: -280px; top: -320px; pointer-events: none;
  box-shadow: inset 0 0 90px rgba(207,255,88,.02);
}
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; align-items: start; gap: 48px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  color: #d9e7dd; font-size: 13px; font-weight: 760; letter-spacing: .08em; text-transform: uppercase;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(207,255,88,.04);
}
.eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--lime); box-shadow: 0 0 14px var(--lime); }
h1 { font-size: clamp(48px, 6vw, 82px); line-height: .98; letter-spacing: -.055em; margin: 24px 0 24px; max-width: 780px; }
.hero h1 .accent { color: var(--lime); }
.hero-copy { color: #b5c4bb; font-size: clamp(17px, 1.8vw, 21px); max-width: 650px; margin: 0 0 28px; }
.hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.app-badge img { width: 198px; }
.secondary-button { display: inline-flex; align-items:center; justify-content:center; min-height: 58px; padding: 0 21px; border-radius: 13px; text-decoration: none; border: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.035); font-weight: 760; color:#edf4ef; }
.secondary-button:hover { border-color: rgba(207,255,88,.45); background: rgba(207,255,88,.06); }
.hero-note { display: flex; align-items: center; gap: 12px; margin-top: 23px; color: #87988e; font-size: 13px; }
.hero-note span:first-child { color: var(--lime); }

.phone-stage { min-height: 610px; position: relative; display: grid; place-items: center; }
.phone-glow { position:absolute; inset: 18% 12%; border-radius: 50%; background: rgba(177,244,88,.16); filter: blur(75px); }
.phone {
  position: absolute; width: 310px; border-radius: 44px; padding: 8px; background: #030705; border: 1px solid rgba(255,255,255,.17); box-shadow: 0 36px 90px rgba(0,0,0,.55), 0 0 44px rgba(207,255,88,.07); overflow: hidden;
}
.phone img { border-radius: 36px; width: 100%; }
.phone.left { transform: rotate(-8deg) translate(-92px, 20px); z-index: 3; }
.phone.right { transform: rotate(7deg) translate(100px, -22px); z-index: 2; opacity: .98; }
.float-pill {
  position: absolute; z-index: 5; display:flex; align-items:center; gap:9px; padding: 11px 14px; border-radius: 999px; border: 1px solid rgba(207,255,88,.25); background: rgba(9,22,18,.88); box-shadow: var(--shadow); font-size:13px; color:#e8f2eb; backdrop-filter: blur(12px);
}
.float-pill i { width: 9px; height: 9px; border-radius:50%; background:var(--lime); box-shadow: 0 0 12px var(--lime); }
.float-pill.p1 { left: 0; top: 17%; }
.float-pill.p2 { right: 0; bottom: 18%; }

.trust-strip { border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: rgba(255,255,255,.014); }
.trust-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.trust-item { padding: 26px 24px; border-right:1px solid var(--line-2); }
.trust-item:last-child { border-right:0; }
.trust-item strong { display:block; color:var(--lime); font-size:26px; line-height:1; margin-bottom:8px; }
.trust-item span { color:#91a198; font-size:13px; }

.section { padding: 96px 0; }
.section.compact { padding: 70px 0; }
.section-kicker { color: var(--lime); font-size: 12px; font-weight: 800; letter-spacing:.13em; text-transform:uppercase; margin-bottom: 13px; }
.section-title { margin:0; font-size: clamp(36px,4vw,58px); line-height:1.06; letter-spacing:-.04em; }
.section-lead { color:#9eaea5; font-size:18px; max-width:720px; margin:18px 0 0; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom: 40px; }
.section-head .section-lead { max-width:520px; margin:0; }

.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { border:1px solid var(--line-2); background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.012)); border-radius:24px; padding:26px; position:relative; overflow:hidden; }
.card::after { content:""; position:absolute; width:110px; height:110px; right:-45px; top:-45px; border:1px solid rgba(207,255,88,.09); border-radius:50%; }
.card-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:13px; background:rgba(207,255,88,.08); border:1px solid rgba(207,255,88,.16); color:var(--lime); font-size:20px; margin-bottom:22px; }
.card h3 { margin:0 0 8px; font-size:21px; letter-spacing:-.02em; }
.card p { margin:0; color:#93a49a; font-size:14px; }

.plans { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.plan { border:1px solid rgba(255,255,255,.08); border-radius:22px; padding:22px; background:#0b1713; transition:.25s ease; }
.plan:hover { transform:translateY(-4px); border-color:rgba(207,255,88,.25); }
.plan-top { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
.plan .flag { font-size:25px; }
.plan h3 { font-size:18px; margin:8px 0 4px; }
.plan .type { color:#83958a; font-size:12px; }
.plan .price { color:var(--lime); font-size:22px; font-weight:830; letter-spacing:-.03em; }
.plan .price small { display:block; color:#7d9084; font-size:11px; font-weight:600; margin-top:4px; text-align:right; }
.plan-meta { margin-top:18px; padding-top:15px; border-top:1px solid var(--line-2); color:#90a198; display:flex; justify-content:space-between; font-size:12px; }
.disclaimer { color:#74867c; font-size:12px; margin-top:18px; }

.coverage-shell { border:1px solid var(--line-2); border-radius:28px; background:#091511; overflow:hidden; }
.coverage-toolbar { padding:22px; display:flex; gap:12px; align-items:center; border-bottom:1px solid var(--line-2); }
.search-wrap { flex:1; position:relative; }
.search-wrap input { width:100%; background:#06100e; color:white; border:1px solid rgba(255,255,255,.09); border-radius:14px; padding:14px 16px 14px 44px; outline:none; }
.search-wrap input:focus { border-color:rgba(207,255,88,.46); box-shadow:0 0 0 3px rgba(207,255,88,.08); }
.search-icon { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:#7f9287; }
.region-chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { border:1px solid rgba(255,255,255,.09); background:transparent; color:#97a89e; border-radius:999px; padding:10px 13px; cursor:pointer; font-size:12px; font-weight:700; }
.chip.active, .chip:hover { color:#08110f; background:var(--lime); border-color:var(--lime); }
.country-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:0; }
.country { display:flex; gap:10px; align-items:center; min-height:54px; padding:10px 16px; border-bottom:1px solid rgba(255,255,255,.045); border-right:1px solid rgba(255,255,255,.045); color:#c8d4cc; font-size:13px; }
.country .dot { width:7px; height:7px; border-radius:50%; background:#51705d; flex:0 0 auto; }
.country:hover .dot { background:var(--lime); box-shadow:0 0 11px var(--lime); }
.coverage-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 22px; color:#788b80; font-size:12px; }
.show-more { border:0; background:transparent; color:var(--lime); font-weight:750; cursor:pointer; }

.how-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset: steps; }
.step { position:relative; padding-top:17px; }
.step::before { counter-increment:steps; content:"0" counter(steps); display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; border:1px solid rgba(207,255,88,.2); border-radius:14px; color:var(--lime); font-weight:800; margin-bottom:20px; background:rgba(207,255,88,.05); }
.step h3 { margin:0 0 8px; font-size:20px; }
.step p { margin:0; color:#8ea096; font-size:14px; }
.step:not(:last-child)::after { content:""; position:absolute; height:1px; width:50%; right:-25%; top:38px; background:linear-gradient(90deg, rgba(207,255,88,.25), transparent); }

.showcase { display:grid; grid-template-columns: .8fr 1.2fr; gap:56px; align-items:center; }
.showcase-copy ul { list-style:none; padding:0; margin:26px 0 0; display:grid; gap:13px; }
.showcase-copy li { display:flex; gap:11px; color:#a9b8af; font-size:14px; }
.showcase-copy li::before { content:"✓"; color:var(--lime); font-weight:900; }
.screens-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; transform:rotate(1deg); }
.screen-card { border-radius:26px; overflow:hidden; border:1px solid rgba(255,255,255,.1); background:#06100e; box-shadow:0 20px 55px rgba(0,0,0,.34); }
.screen-card:nth-child(2), .screen-card:nth-child(4) { transform: translateY(28px); }

.testimonials { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.quote { border-radius:24px; padding:26px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.022); }
.stars { color:var(--lime); letter-spacing:2px; margin-bottom:17px; }
.quote p { margin:0; font-size:17px; line-height:1.5; color:#dce6df; }
.quote footer { margin-top:20px; color:#7f9287; font-size:12px; }
.quote-note { margin-top:16px; color:#6f8177; font-size:11px; }

.faq { max-width:900px; margin:0 auto; }
.faq-item { border-bottom:1px solid var(--line-2); }
.faq-q { width:100%; display:flex; justify-content:space-between; gap:20px; background:transparent; border:0; color:white; padding:22px 0; text-align:left; font-size:17px; font-weight:740; cursor:pointer; }
.faq-q span:last-child { color:var(--lime); transition:.2s ease; }
.faq-a { color:#93a49a; font-size:14px; max-width:760px; padding:0 0 22px; display:none; }
.faq-item.open .faq-a { display:block; }
.faq-item.open .faq-q span:last-child { transform:rotate(45deg); }

.cta { padding:34px; border-radius:30px; background:linear-gradient(135deg, #baf44e, #d8ff67); color:#07110f; display:flex; align-items:center; justify-content:space-between; gap:28px; overflow:hidden; position:relative; }
.cta::after { content:""; position:absolute; width:300px; height:300px; border:1px solid rgba(6,16,14,.13); border-radius:50%; right:-80px; top:-120px; }
.cta h2 { margin:0 0 8px; font-size:clamp(28px,4vw,45px); letter-spacing:-.04em; }
.cta p { margin:0; color:#2a382e; max-width:650px; }
.cta a { display:inline-flex; background:#07110f; color:white; text-decoration:none; padding:15px 20px; border-radius:14px; font-weight:800; white-space:nowrap; z-index:2; }

.site-footer { margin-top:90px; border-top:1px solid var(--line-2); background:#040b09; }
.footer-grid { padding:54px 0 38px; display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:40px; }
.footer-brand img { width:190px; margin-bottom:14px; }
.footer-brand p { color:#7f9187; font-size:13px; max-width:360px; }
.footer-col h4 { font-size:13px; margin:0 0 14px; color:#eaf0ec; }
.footer-col a { display:block; margin:8px 0; color:#819388; font-size:13px; text-decoration:none; }
.footer-col a:hover { color:var(--lime); }
.footer-bottom { padding:20px 0 28px; border-top:1px solid rgba(255,255,255,.05); display:flex; justify-content:space-between; gap:20px; color:#62746a; font-size:12px; }

/* Blog */
.page-hero { padding:84px 0 56px; text-align:center; }
.page-hero h1 { margin-left:auto; margin-right:auto; max-width:900px; }
.page-hero p { max-width:760px; margin:0 auto; color:#9aaca0; }
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.blog-card { border:1px solid var(--line-2); border-radius:24px; padding:26px; background:#0a1512; text-decoration:none; min-height:280px; display:flex; flex-direction:column; }
.blog-card .tag { color:var(--lime); font-size:11px; text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.blog-card h2 { margin:20px 0 12px; font-size:27px; line-height:1.12; letter-spacing:-.035em; }
.blog-card p { color:#8fa096; font-size:14px; margin:0; }
.blog-card .read { margin-top:auto; padding-top:28px; color:#c4d2c9; font-size:13px; font-weight:700; }
.article { max-width:820px; margin:0 auto; }
.article h1 { font-size:clamp(42px,6vw,68px); }
.article .meta { color:#71847a; font-size:13px; margin-bottom:34px; }
.article .intro { font-size:20px; color:#c1cec6; }
.article h2 { margin-top:48px; font-size:32px; letter-spacing:-.03em; }
.article h3 { margin-top:30px; font-size:22px; }
.article p, .article li { color:#a2b1a8; font-size:16px; }
.article ul, .article ol { padding-left:22px; }
.article .callout { margin:30px 0; padding:22px 24px; border-radius:18px; border:1px solid rgba(207,255,88,.18); background:rgba(207,255,88,.045); color:#c8d6cd; }
.breadcrumbs { font-size:12px; color:#73867b; margin-bottom:18px; }
.breadcrumbs a { color:#9db0a5; text-decoration:none; }

/* Utility pages */
.utility { max-width:900px; margin:0 auto; }
.utility h1 { font-size:clamp(42px,6vw,66px); }
.utility h2 { margin-top:40px; }
.utility p, .utility li { color:#9fb0a6; }
.contact-card { margin-top:32px; border:1px solid var(--line-2); border-radius:26px; padding:28px; background:#0a1512; }
.contact-card a { color:var(--lime); text-decoration:none; font-size:20px; font-weight:800; }

@media (max-width: 1050px) {
  .hero-grid { grid-template-columns:1fr; }
  .hero-copy { max-width:720px; }
  .phone-stage { min-height:620px; max-width:650px; width:100%; margin:0 auto; }
  .showcase { grid-template-columns:1fr; }
  .screens-grid { max-width:760px; }
  .country-grid { grid-template-columns:repeat(4,1fr); }
  .cards, .plans { grid-template-columns:repeat(2,1fr); }
  .blog-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 780px) {
  .container { width:min(100% - 26px, var(--max)); }
  .nav { min-height:68px; }
  .nav-links { position:absolute; left:13px; right:13px; top:70px; display:none; flex-direction:column; align-items:stretch; padding:18px; border:1px solid var(--line-2); border-radius:18px; background:#07110f; box-shadow:var(--shadow); }
  .nav-links.open { display:flex; }
  .menu-button { display:block; }
  .hero { padding:58px 0 42px; }
  .phone-stage { min-height:515px; transform:scale(.86); margin-top:-25px; margin-bottom:-30px; }
  .float-pill { display:none; }
  .trust-grid { grid-template-columns:repeat(2,1fr); }
  .trust-item:nth-child(2) { border-right:0; }
  .trust-item:nth-child(-n+2) { border-bottom:1px solid var(--line-2); }
  .section { padding:72px 0; }
  .section-head { align-items:flex-start; flex-direction:column; }
  .cards, .plans, .testimonials, .blog-grid { grid-template-columns:1fr; }
  .how-grid { grid-template-columns:1fr 1fr; }
  .step::after { display:none; }
  .coverage-toolbar { flex-direction:column; align-items:stretch; }
  .country-grid { grid-template-columns:repeat(2,1fr); }
  .cta { align-items:flex-start; flex-direction:column; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1/-1; }
}

@media (max-width: 560px) {
  h1 { font-size:47px; }
  .hero-actions { align-items:stretch; flex-direction:column; }
  .app-badge img { width:100%; max-width:220px; }
  .secondary-button { width:220px; }
  .phone-stage { min-height:450px; transform:scale(.7); width:140%; margin-left:-20%; }
  .trust-item { padding:22px 16px; }
  .trust-item strong { font-size:22px; }
  .how-grid { grid-template-columns:1fr; }
  .country-grid { grid-template-columns:1fr 1fr; }
  .country { padding:10px 12px; font-size:12px; }
  .screens-grid { gap:9px; }
  .screen-card { border-radius:16px; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-brand { grid-column:auto; }
  .footer-bottom { flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}


/* --- Updated homepage visuals --- */
.store-cta { gap:10px; }
.apple-mark { font-size:18px; line-height:1; }
.platform-pills { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.platform-pill {
  display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.03);
  color:#c7d4cc; font-size:12px; font-weight:700;
}
.platform-pill.live { color:#eef7e8; border-color:rgba(207,255,88,.24); background:rgba(207,255,88,.08); }

.hero-media-stack {
  display:grid; gap:18px; width:100%; max-width:560px; justify-self:end;
}
.media-card {
  border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-radius:30px; padding:16px; box-shadow:0 24px 80px rgba(0,0,0,.4); overflow:hidden;
}
.media-card img { width:100%; border-radius:22px; }
.media-card-primary { transform: rotate(-1.2deg); }
.media-card-secondary { transform: rotate(1deg); }
.media-card-head {
  display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px;
}
.media-chip {
  display:inline-flex; align-items:center; padding:7px 11px; border-radius:999px;
  color:#07110f; background:var(--lime); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.11em;
}
.media-card-head a, .media-note { color:#9eb0a6; font-size:12px; text-decoration:none; font-weight:700; }
.media-card-head a:hover { color:var(--lime); }

.showcase { display:grid; grid-template-columns: .9fr 1.1fr; gap:48px; align-items:start; }
.gallery-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.gallery-card {
  margin:0; border:1px solid rgba(255,255,255,.08); border-radius:26px; overflow:hidden; background:#091310;
  box-shadow:0 20px 55px rgba(0,0,0,.3);
}
.gallery-card img { width:100%; display:block; }
.gallery-card figcaption { padding:16px 18px 18px; display:grid; gap:6px; }
.gallery-card strong { font-size:16px; }
.gallery-card span { color:#8fa096; font-size:13px; line-height:1.45; }

@media (max-width: 1050px) {
  .hero-media-stack { max-width:680px; justify-self:center; }
  .showcase { grid-template-columns:1fr; }
}

@media (max-width: 780px) {
  .platform-pills { gap:8px; }
  .hero-media-stack { max-width:100%; }
  .media-card { padding:12px; border-radius:22px; }
  .media-card img { border-radius:16px; }
  .gallery-grid { grid-template-columns:1fr; }
}

/* --- Purchase CTAs (Phase 2) ---
   The site's primary action is now "buy an eSIM here", not "download the
   app". This is the inline counterpart to forms.css's full-width
   .primary-button, defined here because the marketing pages (homepage,
   blog) load only this stylesheet. */
.buy-button {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:58px; padding:0 26px; border-radius:13px; text-decoration:none;
  background:linear-gradient(135deg,#baf44e,#d8ff67); color:#07110f;
  font-weight:830; letter-spacing:-.01em; white-space:nowrap;
}
.buy-button:hover { filter:brightness(1.05); }
.cta .buy-button { background:#07110f; color:#fff; }

/* Secondary row under the hero buttons — the App Store badge lives here
   now rather than competing with the buy action. */
.hero-secondary { display:flex; align-items:center; gap:14px; margin-top:20px; flex-wrap:wrap; }
.hero-secondary span { color:var(--muted-2); font-size:13px; font-weight:650; }
.hero-secondary .app-badge img { height:40px; width:auto; display:block; }
@media (max-width:720px){ .buy-button { width:100%; } }

/* Destination tiles in the coverage directory are links into that
   destination's plan list now. Only the ones we can actually sell become
   links (see COUNTRY_CODES in site.js); the rest stay plain divs, so this
   only ever styles a real buy path. */
a.country { text-decoration:none; color:inherit; cursor:pointer; }
a.country:hover { background:rgba(207,255,88,.07); color:var(--lime); }

/* App Store badge sitting beside the hero's primary buy button — matched to
   the button height so the row reads as one set of options. */
.hero-badge { display:inline-flex; align-items:center; }
.hero-badge img { height:58px; width:auto; display:block; }
@media (max-width:720px){ .hero-badge img { height:52px; } }

/* --- Header: store badges + account controls (Phase 2) --- */
.nav-stores { display:inline-flex; align-items:center; gap:8px; }
.store-badge { display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.store-badge img { height:36px; width:auto; display:block; }
.store-badge.is-soon { opacity:.55; cursor:default; }
.store-badge.is-soon img { filter:grayscale(1); }
.soon-tag {
  font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted-2); border:1px solid var(--line-2); border-radius:999px; padding:3px 6px; white-space:nowrap;
}
.nav-account { color:#c1cec6; text-decoration:none; font-size:14px; font-weight:650; }
.nav-account:hover { color:var(--lime); }
.nav-logout { color:var(--muted-2); text-decoration:none; font-size:13px; font-weight:650; white-space:nowrap; }
.nav-logout:hover { color:var(--lime); text-decoration:underline; }
.nav-logout[hidden] { display:none !important; }

@media (max-width:1180px){ .nav-stores { display:none; } }

/* --- Secondary "install with the app" block --- */
.app-cta {
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
  border:1px solid var(--line-2); border-radius:22px; background:var(--panel);
  padding:22px 26px; margin-top:28px;
}
.app-cta-copy h3 { margin:0 0 6px; font-size:17px; letter-spacing:-.02em; }
.app-cta-copy p { margin:0; color:var(--muted); font-size:13.5px; max-width:52ch; }
.app-cta-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.app-cta-actions img { height:42px; width:auto; display:block; }
.app-cta-actions .store-badge img { height:42px; }
@media (max-width:640px){ .app-cta { padding:20px; } .app-cta-actions img { height:38px; } }

/* Hero action row: buy first, App Store beside it, explore on its own
   clean line rather than orphaned mid-wrap. */
.hero-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hero-explore { margin-top:14px; }

/* Both store badges always sit side by side, in the header and in every
   secondary app block — they read as one pair of options, so they must not
   stack onto separate lines even on a narrow phone. */
.nav-stores, .app-cta-actions { flex-wrap: nowrap; }
@media (max-width:420px){
  .app-cta-actions img { height:34px; }
}

/* --- Footer store badges --- */
.footer-stores { display:flex; align-items:center; gap:10px; margin-top:16px; flex-wrap:nowrap; }
.footer-stores img { height:38px; width:auto; display:block; }
.footer-stores .store-badge.is-soon { opacity:.5; }

/* --- Persistent app-download bar ---
   Fixed to the viewport so it survives scrolling, dismissible, and it adds
   matching padding to the page so it never covers the footer or a form
   field. Deliberately absent from checkout and the order/confirmation
   screens: interrupting someone mid-payment, or while they are installing
   the eSIM they just paid for, would cost more than the install it wins. */
.app-bar {
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
  padding:12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  background:rgba(9,22,19,.96); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); box-shadow:0 -10px 40px rgba(0,0,0,.4);
}
.app-bar[hidden] { display:none !important; }
.app-bar-copy { color:var(--text); font-size:14px; font-weight:700; }
.app-bar-copy small { display:block; color:var(--muted); font-size:12px; font-weight:600; margin-top:2px; }
.app-bar-actions { display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }
.app-bar-actions img { height:36px; width:auto; display:block; }
.app-bar-close {
  position:absolute; right:10px; top:8px; border:0; background:transparent; cursor:pointer;
  color:var(--muted-2); font-size:20px; line-height:1; padding:4px 8px; border-radius:8px;
}
.app-bar-close:hover { color:var(--text); background:rgba(255,255,255,.06); }
html.has-app-bar body { padding-bottom:104px; }
@media (max-width:720px){
  .app-bar { gap:10px; padding:10px 42px calc(10px + env(safe-area-inset-bottom, 0px)) 14px; justify-content:flex-start; }
  .app-bar-copy { font-size:13px; }
  .app-bar-copy small { display:none; }
  .app-bar-actions img { height:32px; }
  html.has-app-bar body { padding-bottom:88px; }
}

/* --- Account page --- */
.account-grid { display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:34px; }
.account-card {
  border:1px solid var(--line-2); border-radius:22px; background:var(--panel); padding:24px;
}
.account-card h2 { margin:0 0 18px; font-size:18px; letter-spacing:-.02em; }
.account-row { display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line-2); font-size:14px; color:var(--muted); }
.account-row:last-child { border-bottom:0; }
.account-row strong { color:var(--text); font-weight:700; text-align:right; word-break:break-word; }
.account-row a { color:var(--lime); text-decoration:none; }

.order-row {
  display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-2);
  text-decoration:none; color:inherit;
}
.order-row:last-child { border-bottom:0; }
.order-row:hover .order-name { color:var(--lime); }
.order-flag { font-size:26px; line-height:1; }
.order-main { flex:1; min-width:0; }
.order-name { font-size:15px; font-weight:760; margin:0 0 3px; }
.order-meta { color:var(--muted-2); font-size:12.5px; }
.order-right { text-align:right; white-space:nowrap; }
.order-price { color:var(--lime); font-weight:800; font-size:15px; letter-spacing:-.02em; }
@media (max-width:560px){ .order-flag { display:none; } .order-right { text-align:right; } }

/* The header gained store badges, an account slot and a Log out link, and
   with nothing preventing it the labels began wrapping onto two lines
   ("Browse plans", "My account", "Buy your eSIM now") even though the row
   still fitted. Keep every header item on one line and let the row tighten
   its spacing instead. */
.nav-links a, .nav-account, .nav-logout, .nav-cta { white-space: nowrap; }
@media (max-width:1320px){ .nav-links { gap: 14px; } }
@media (max-width:1240px){ .nav-stores { display: none; } }

/* --- Featured live pricing grid --- */
.price-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.price-card {
  border:1px solid var(--line-2); border-radius:22px; background:#0b1713; padding:20px;
  display:flex; flex-direction:column; transition:.25s ease;
}
.price-card:hover { transform:translateY(-4px); border-color:rgba(207,255,88,.25); }
.price-card-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.price-card-head .flag { font-size:24px; line-height:1; }
.price-card-head h3 { margin:0; font-size:16px; letter-spacing:-.02em; }
.price-tier {
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:9px 0; border-top:1px solid var(--line-2); text-decoration:none; color:inherit;
}
.price-tier:first-of-type { border-top:0; }
.price-tier span { color:var(--muted); font-size:13px; font-weight:650; }
.price-tier strong { color:var(--lime); font-size:16px; font-weight:820; letter-spacing:-.02em; }
.price-tier:hover strong { filter:brightness(1.12); }
.price-tier:hover span { color:var(--text); }
.price-tier.is-missing strong { color:var(--muted-2); font-weight:650; font-size:13px; }
.price-card-foot {
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line-2);
  font-size:12px; font-weight:750; color:var(--lime); text-decoration:none;
}
.price-note { color:var(--muted-2); font-size:12px; margin-top:8px; }
@media (max-width:1080px){ .price-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px){ .price-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .price-grid { grid-template-columns:1fr; } }

/* --- Hero: compact live destination showcase --- */
/* Deliberately NOT a heavy panel — no card background or blur — so the hero
   keeps its original open composition and the App-preview card below it
   still reads as part of the same column. */
/* Grid children default to min-width:auto, so the destination cards' widest
   unbreakable line ("5 GB $12.83 · 10 GB $21.38") was setting a floor on the
   right column and squeezing the headline into extra lines. */
.hero-grid > * { min-width: 0; }
.hero-dest, .hero-dest-grid, .dest-card { min-width: 0; }
.hero-dest { margin-bottom: 18px; }
.hero-dest-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.hero-dest-head h2 { margin:0; font-size:15px; letter-spacing:-.02em; color:var(--text); }
.hero-dest-head span { color:var(--lime); font-size:12px; font-weight:800; letter-spacing:.02em; white-space:nowrap; }
.hero-dest-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.hero-dest-status { color:var(--muted); font-size:13px; padding:10px 0; }

.dest-card { position:relative; border-radius:13px; overflow:hidden; background:#0b1713; border:1px solid var(--line-2); transition:.22s ease; }
.dest-card:hover { transform:translateY(-3px); border-color:rgba(207,255,88,.32); }
.dest-card-link { display:block; text-decoration:none; color:inherit; }
.dest-photo { position:relative; display:block; aspect-ratio:3/2; background:#0e1a16; }
.dest-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.dest-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,16,14,0) 30%, rgba(6,16,14,.94) 100%); }
.dest-photo .dest-flag { position:absolute; left:7px; bottom:6px; font-size:14px; line-height:1; z-index:2; }
.dest-photo .dest-name { position:absolute; left:26px; right:6px; bottom:6px; z-index:2; font-size:11px; font-weight:800; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dest-body { display:block; padding:6px 9px 8px; }
.tier-row { display:flex; align-items:baseline; justify-content:space-between; gap:6px; padding:3px 0; }
.tier-row + .tier-row { border-top:1px solid rgba(255,255,255,.05); }
.tier-label { color:var(--muted-2); font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.tier-price { color:var(--lime); font-size:12.5px; font-weight:820; letter-spacing:-.01em; }
.tier-row.is-missing .tier-price { color:var(--muted-2); font-weight:650; }
.hero-dest-note { color:var(--muted-2); font-size:11px; margin:10px 0 0; }
.hero-dest-note[hidden] { display:none; }
.dest-from { display:block; color:var(--lime); font-size:13.5px; font-weight:830; letter-spacing:-.02em; line-height:1.15; }
.dest-from small { display:block; color:var(--muted-2); font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-top:1px; }
.dest-alt { display:block; color:var(--muted-2); font-size:10px; font-weight:700; margin-top:4px; letter-spacing:.01em; }
/* Unsplash's API guidelines require photographer + Unsplash credit wherever
   one of their photos appears — kept outside the card link so anchors do not
   nest, and muted so it reads as compliance credit rather than UI. */
.dest-credit { position:absolute; top:4px; right:6px; z-index:3; font-size:8px; color:rgba(255,255,255,.55); text-shadow:0 1px 3px rgba(0,0,0,.85); max-width:88%; text-align:right; line-height:1.25; }
.dest-credit a { color:inherit; text-decoration:none; }
.dest-credit a:hover { color:#fff; text-decoration:underline; }
.hero-dest-all { display:inline-block; margin-top:11px; color:var(--lime); font-size:12.5px; font-weight:750; text-decoration:none; }
.hero-dest-all:hover { text-decoration:underline; }

/* Hero background photograph. The source image is a bright, near-white sky,
   so it needs heavy darkening and partial desaturation to sit inside this
   dark palette at all — left as texture rather than a picture competing with
   the foreground. Two gradients sit on top: a horizontal one that keeps the
   left column solid behind the headline, and a vertical one that fades the
   photo out into the section below. */
.hero-photo { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.hero-photo img {
  width:100%; height:100%; object-fit:cover; object-position:58% 42%; display:block;
  filter:grayscale(.45) brightness(.66) contrast(1.04); opacity:.82;
}
.hero-photo::after {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(6,16,14,.95) 0%, rgba(6,16,14,.82) 32%, rgba(6,16,14,.4) 62%, rgba(6,16,14,.5) 100%),
    linear-gradient(180deg, rgba(6,16,14,.4) 0%, rgba(6,16,14,.06) 45%, rgba(6,16,14,.88) 100%);
}
.hero-grid { position:relative; z-index:1; }
@media (max-width:980px){ .hero-photo img { opacity:.4; object-position:50% 45%; } }

/* The app-preview phone card moved out of the hero and now introduces the
   "download our app" block. */
/* Sized for the hero's narrow column originally; full-bleed here made it
   dominate the download block it is meant to introduce. */
.app-preview-row { margin-bottom:18px; display:flex; justify-content:center; }
.app-preview-row .media-card { max-width:720px; width:100%; }
@media (max-width:560px){ .hero-dest-grid { grid-template-columns:repeat(2,1fr); } }

/* Photo failed to load (expired Unsplash URL) — fall back to a flat brand
   panel with the flag, rather than an empty frame. */
.dest-photo.no-photo { background:linear-gradient(135deg,#0e1f1a,#0b1713); }
.dest-photo.no-photo::after { background:linear-gradient(180deg, rgba(6,16,14,0) 45%, rgba(6,16,14,.9) 100%); }

/* --- Travel photo band, directly below the live-pricing packages --- */
.travel-band { position:relative; overflow:hidden; isolation:isolate; }
.travel-band img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 38%;
  z-index:-2; filter:grayscale(.35) brightness(.62) contrast(1.04);
}
/* Dark wash so the copy stays readable over a bright photo and the band
   still reads as part of this dark theme rather than a stock-photo slab. */
.travel-band::after {
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(6,16,14,.94) 0%, rgba(6,16,14,.78) 44%, rgba(6,16,14,.34) 100%),
    linear-gradient(180deg, rgba(6,16,14,.9) 0%, rgba(6,16,14,.25) 40%, rgba(6,16,14,.92) 100%);
}
.travel-band-inner { padding:88px 0 92px; max-width:var(--max); }
.travel-band-inner h2 { margin:0 0 12px; font-size:clamp(28px,3.4vw,44px); letter-spacing:-.04em; }
.travel-band-inner p { margin:0 0 26px; color:#c9d8cf; max-width:52ch; font-size:15.5px; }
@media (max-width:720px){
  .travel-band-inner { padding:60px 0 64px; }
  .travel-band img { object-position:60% 40%; }
}