: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; }

.hero { position: relative; overflow: hidden; padding: 84px 0 70px; }
.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: center; gap: 64px; }
.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; } }