/* =========================================================
   MOBILEXY · GLOBAL OVERRIDES + SECTION STYLES
   Loaded after all legacy theme CSS so this is the source of truth.
   ========================================================= */

/* ---------- HARD RESET of legacy body theme ---------- */
html,
body {
    background: var(--bg-page) !important;
    color: var(--text) !important;
    font-family: var(--font-body) !important;
    font-variant-numeric: tabular-nums;
    line-height: var(--lh-body);
}

html[data-theme="dark"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% -10%, rgba(255, 163, 98, 0.06), transparent 60%),
        radial-gradient(ellipse 60% 40% at 90% 110%, rgba(61, 182, 201, 0.05), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

html[data-theme="light"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% -10%, rgba(240, 121, 30, 0.08), transparent 60%),
        radial-gradient(ellipse 60% 40% at 90% 110%, rgba(232, 112, 42, 0.05), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* In light mode the topbar needs a real shadow to separate from page */
html[data-theme="light"] .topbar {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 0 var(--border-subtle);
}

html[data-theme="light"] .finder,
html[data-theme="light"] .destinations,
html[data-theme="light"] .stats-wide,
html[data-theme="light"] .explainer,
html[data-theme="light"] .feature,
html[data-theme="light"] .plan-inner,
html[data-theme="light"] .blog-card,
html[data-theme="light"] .review,
html[data-theme="light"] .quote,
html[data-theme="light"] .process-step,
html[data-theme="light"] .faq-item,
html[data-theme="light"] .destination-row {
    box-shadow: var(--elev-1);
}

html[data-theme="light"] .finder { box-shadow: var(--elev-3); }
html[data-theme="light"] .stats-wide,
html[data-theme="light"] .explainer,
html[data-theme="light"] .destinations,
html[data-theme="light"] .referral-rich,
html[data-theme="light"] .cta-banner { box-shadow: var(--elev-2); }

/* In light mode the cta-banner needs better contrast — go warm */
html[data-theme="light"] .cta-banner {
    background:
        linear-gradient(135deg, #fff5ec 0%, #fff8f1 100%);
    border-color: rgba(240, 121, 30, 0.2);
}

html[data-theme="light"] .cta-banner::before {
    background: radial-gradient(circle at 50% 0%, rgba(240,121,30,0.1), transparent 60%);
}

/* Process step number badge needs dark text on mint in light theme */
html[data-theme="light"] .process-step::before { color: #ffffff; }

/* ============================================================
   SCROLL PROGRESS BAR (top of viewport)
   ============================================================ */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%);
    z-index: 1000;
    box-shadow: 0 0 12px var(--accent-glow);
    transition: width var(--dur-instant) linear;
    pointer-events: none;
}

/* ============================================================
   STICKY CTA (bottom-right floating button)
   ============================================================ */
.sticky-cta {
    position: fixed;
    bottom: var(--s-5);
    right: var(--s-5);
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--accent-ink);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 12px 30px var(--accent-glow), 0 4px 8px rgba(0,0,0,0.3);
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background var(--dur-fast);
}

.sticky-cta.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.sticky-cta:hover {
    background: var(--accent-hover);
    color: var(--accent-ink);
    transform: translateY(-2px);
}

.sticky-cta svg { width: 14px; height: 14px; }

@media (max-width: 560px) {
    .sticky-cta { bottom: var(--s-3); right: var(--s-3); padding: 12px 18px; font-size: 13px; }
}

/* ============================================================
   ANIMATED COUNTERS — JS toggles .is-counting class
   ============================================================ */
[data-count] { transition: opacity var(--dur-base); }
[data-count][data-counting="true"] { animation: countPulse 0.3s var(--ease-out); }

@keyframes countPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ============================================================
   PRODUCTS SECTION (eSIM + Virtual Numbers comparison)
   ============================================================ */
.products-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5);
}

.product-card {
    padding: var(--s-6);
    border-radius: var(--r-xl);
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    position: relative;
    overflow: hidden;
    transition: border-color var(--dur-base), transform var(--dur-base);
}

.product-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
}

.product-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, var(--accent-soft), transparent 60%);
    opacity: 0.6;
    pointer-events: none;
}

.product-card > * { position: relative; z-index: 1; }

.product-card-head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-2);
}

.product-card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--r-lg);
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--accent);
}

.product-card-icon svg { width: 28px; height: 28px; }

.product-card-tag {
    font-size: 11px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-family: var(--font-mono);
}

.product-card h3 {
    font-size: 28px;
    margin: 0;
    color: var(--text-hi);
    letter-spacing: -0.02em;
}

.product-card .lede {
    color: var(--text-mute);
    font-size: 15px;
    line-height: 1.55;
}

.product-card-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: var(--s-3) 0 var(--s-4);
}

.product-card-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text);
}

.product-card-features li svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
    flex: none;
}

.product-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding-top: var(--s-4);
    border-top: 1px dashed var(--border-subtle);
    margin-top: auto;
}

.product-card-price {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-mute);
}

.product-card-price strong {
    color: var(--text-hi);
    font-size: 18px;
    font-weight: 600;
    font-family: var(--font-display);
}

@media (max-width: 760px) {
    .products-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TRIP PLANNER WIDGET
   ============================================================ */
.trip-planner {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-xl);
    padding: var(--s-6);
    box-shadow: var(--elev-2);
}

.trip-planner-steps {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
}

.trip-step {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    border: 1px solid var(--border-default);
    background: var(--bg-page);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.trip-step.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.trip-step-no {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-mute);
    letter-spacing: var(--tracking-caps);
}

.trip-step.is-active .trip-step-no { color: var(--accent); }

.trip-step-label {
    font-size: 14px;
    color: var(--text);
    font-weight: 500;
}

.trip-fields {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--s-4);
    margin-bottom: var(--s-4);
}

.trip-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
    min-height: 52px;
    background: var(--bg-page);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    align-items: center;
}

.trip-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 12px;
    font-weight: 500;
}

.trip-chip-remove {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.trip-chip-remove:hover { background: rgba(255, 163, 98, 0.2); }

.trip-chip-input {
    flex: 1;
    min-width: 120px;
    background: transparent;
    border: none;
    color: var(--text-hi);
    font: inherit;
    font-size: 14px;
    outline: none;
}

.trip-chip-input::placeholder { color: var(--text-dim); }

.trip-suggestions {
    position: relative;
}

.trip-suggestions-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--bg-overlay);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    padding: 6px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: var(--elev-4);
    display: none;
}

.trip-suggestions.show .trip-suggestions-list { display: block; }

.trip-days {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.trip-days-label {
    font-size: 11px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-family: var(--font-mono);
}

.trip-days-input {
    height: 52px;
    background: var(--bg-page);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    color: var(--text-hi);
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 500;
    padding: 0 14px;
    outline: none;
    width: 100%;
}

.trip-result {
    padding: var(--s-5);
    border-radius: var(--r-lg);
    background:
        radial-gradient(ellipse 60% 80% at 90% 50%, var(--accent-soft), transparent 60%),
        var(--bg-raised);
    border: 1px solid var(--accent);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-4);
    align-items: center;
}

.trip-result.is-empty {
    background: var(--bg-raised);
    border: 1px dashed var(--border-default);
    color: var(--text-mute);
    text-align: center;
    grid-template-columns: 1fr;
    padding: var(--s-6);
    font-size: 14px;
}

.trip-result-meta {
    font-size: 11px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-family: var(--font-mono);
}

.trip-result h4 {
    font-size: 22px;
    margin: 6px 0 4px;
}

.trip-result-sub {
    color: var(--text-mute);
    font-size: 13px;
}

.trip-result-price {
    text-align: right;
}

.trip-result-price-val {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--accent);
    font-weight: 600;
    line-height: 1;
}

.trip-result-price-unit {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}

@media (max-width: 760px) {
    .trip-fields { grid-template-columns: 1fr; }
    .trip-planner-steps { grid-template-columns: 1fr; gap: 6px; }
    .trip-result { grid-template-columns: 1fr; text-align: center; }
    .trip-result-price { text-align: center; }
}

/* ============================================================
   DEVICE COMPATIBILITY CHECKER
   ============================================================ */
.compat {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-xl);
    padding: var(--s-6);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--s-6);
    align-items: center;
}

.compat-input-group {
    display: flex;
    gap: var(--s-2);
}

.compat-select {
    flex: 1;
    height: 52px;
    padding: 0 14px;
    background: var(--bg-page);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    color: var(--text-hi);
    font-family: var(--font-body);
    font-size: 14px;
    cursor: pointer;
}

.compat-result {
    margin-top: var(--s-4);
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-4);
    border-radius: var(--r-lg);
    border: 1px dashed var(--border-default);
    background: var(--bg-raised);
    text-align: center;
}

.compat-result.is-supported {
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    color: var(--accent);
}

.compat-result.is-unsupported {
    background: var(--error-soft);
    border: 1px solid var(--error);
    color: var(--error);
}

.compat-result-content { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.compat-result-icon { width: 36px; height: 36px; }
.compat-result-text { font-weight: 600; font-size: 16px; color: inherit; }
.compat-result-sub { font-size: 12px; color: var(--text-mute); font-family: var(--font-mono); }

.compat-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.compat-phone {
    width: 180px;
    height: 320px;
    background: var(--bg-page);
    border: 6px solid var(--neutral-5);
    border-radius: 32px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--elev-3);
}

.compat-phone::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 16px;
    background: var(--neutral-5);
    border-radius: 12px;
}

.compat-phone-screen {
    width: 80%;
    height: 70%;
    border-radius: var(--r-md);
    background:
        radial-gradient(circle at 50% 30%, var(--accent-soft), transparent 60%),
        var(--bg-raised);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.compat-phone-screen svg { width: 48px; height: 48px; color: var(--accent); }
.compat-phone-screen-label { font-size: 11px; color: var(--text-mute); font-family: var(--font-mono); }

@media (max-width: 760px) { .compat { grid-template-columns: 1fr; } .compat-phone { width: 140px; height: 260px; } }

/* ============================================================
   ROAMING SAVINGS CALCULATOR
   ============================================================ */
.savings {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-xl);
    padding: var(--s-6);
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--s-6);
    align-items: center;
}

.savings-form { display: flex; flex-direction: column; gap: var(--s-4); }

.savings-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.savings-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.savings-field-label {
    font-size: 12px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-family: var(--font-mono);
}

.savings-field-value {
    font-family: var(--font-mono);
    font-size: 16px;
    color: var(--accent);
    font-weight: 600;
}

.savings-slider {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--neutral-3);
    outline: none;
    cursor: pointer;
}

.savings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg-page);
    box-shadow: 0 4px 12px var(--accent-glow);
    cursor: pointer;
}

.savings-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg-page);
    box-shadow: 0 4px 12px var(--accent-glow);
    cursor: pointer;
}

.savings-result {
    padding: var(--s-5);
    border-radius: var(--r-xl);
    background:
        radial-gradient(circle at 50% 0%, var(--accent-soft), transparent 60%),
        var(--bg-raised);
    border: 1px solid var(--accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}

.savings-result-label {
    font-size: 11px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-family: var(--font-mono);
}

.savings-result-big {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: -0.025em;
    line-height: 1;
}

.savings-result-sub {
    color: var(--text-mute);
    font-size: 13px;
    margin-top: 6px;
}

.savings-result-vs {
    display: flex;
    width: 100%;
    margin-top: var(--s-3);
    border-top: 1px dashed var(--border-subtle);
    padding-top: var(--s-3);
    gap: var(--s-3);
}

.savings-result-vs > div {
    flex: 1;
    text-align: center;
}

.savings-result-vs .k {
    font-size: 10px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-family: var(--font-mono);
}

.savings-result-vs .v {
    font-family: var(--font-mono);
    font-size: 16px;
    color: var(--text-hi);
    font-weight: 500;
    margin-top: 2px;
}

.savings-result-vs .v.is-bad { color: var(--text-mute); text-decoration: line-through; }

@media (max-width: 760px) { .savings { grid-template-columns: 1fr; } .savings-result-big { font-size: 44px; } }

/* ============================================================
   LIVE ACTIVITY TICKER
   ============================================================ */
.ticker-band {
    margin: var(--s-5) 0;
    padding: 0;
    overflow: hidden;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-page);
}

.ticker-track {
    display: flex;
    gap: var(--s-7);
    padding: 14px 0;
    animation: tickerScroll 60s linear infinite;
    white-space: nowrap;
    width: max-content;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-mute);
    font-family: var(--font-mono);
}

.ticker-item .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
    animation: pulse 1.8s ease-in-out infinite;
}

.ticker-item strong { color: var(--text-hi); font-weight: 600; }
.ticker-item .flag-tiny { width: 18px; height: 13px; border-radius: 2px; vertical-align: middle; }

@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.ticker-band:hover .ticker-track { animation-play-state: paused; }

/* ============================================================
   SKELETON LOADERS
   ============================================================ */
.skeleton-line {
    height: 14px;
    border-radius: var(--r-sm);
    background: linear-gradient(90deg, var(--neutral-2) 0%, var(--neutral-3) 50%, var(--neutral-2) 100%);
    background-size: 200% 100%;
    animation: skel 1.4s linear infinite;
}

.skeleton-line.lg { height: 22px; }
.skeleton-line.sm { height: 10px; }

.skeleton-card {
    padding: var(--s-4);
    border-radius: var(--r-md);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ============================================================
   ANTI-AI POLISH PASS
   - Strip glows on most sections, keep only on hero + CTA banner
   - Add editorial type rules for serif headlines
   - Add Field Notes, Press strip, Comparison table, Status chip
   - Asymmetric hero with polaroid
   ============================================================ */

/* Strip radial glows from non-hero surfaces */
.finder::before,
.product-card::before {
    display: none;
}

.savings,
.compat,
.trip-planner,
.destinations,
.stats-wide,
.explainer,
.referral-rich {
    background: var(--bg-surface) !important;
}

/* Headlines use serif now — let italic = accent emphasis */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display) !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em;
}

h1.t-display, .hero h1 {
    font-weight: 500 !important;
    letter-spacing: -0.02em;
    line-height: 1.02;
}

.hero h1 em {
    font-style: italic;
    color: var(--accent);
    font-weight: 400;
}

/* Eyebrows + section mono labels stay grotesque (clinical) */
.mx-eyebrow,
.section-eyebrow,
.t-mono,
.t-caption,
.t-h6,
.feature-num,
.principle-no,
.trip-step-no,
.savings-field-label,
.savings-field-value,
.product-card-tag,
.review-author-country,
.stats-badge,
.rating-banner-count,
.client-strip-label,
.foot,
.site-foot-bottom {
    font-family: var(--font-grotesk) !important;
}

/* Big numbers/stats also use the grotesque sans so they read clinical */
.savings-result-big,
.trip-result-price-val,
.referral-stat-value,
.coverage-stat .num,
.usage-big,
.plan-price {
    font-family: var(--font-grotesk) !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
}

/* Hero headline: tighter, gets italic-emphasis treatment */
.hero h1.t-display {
    font-size: clamp(44px, 5vw, 68px);
    line-height: 1.04;
}

/* Asymmetric hero — text 62%, finder 38% offset down */
.hero-grid {
    grid-template-columns: 1.65fr 1fr;
    gap: var(--s-8);
}

@media (max-width: 960px) {
    .hero-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   POLAROID IN HERO (asymmetric editorial element)
   ============================================================ */
.polaroid {
    position: absolute;
    right: 0;
    bottom: -40px;
    width: 168px;
    background: #f5f1e8;
    padding: 8px 8px 28px;
    border-radius: 2px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.2);
    transform: rotate(4deg);
    z-index: 5;
}

.polaroid img {
    width: 100%;
    height: 168px;
    object-fit: cover;
    display: block;
}

.polaroid-caption {
    position: absolute;
    bottom: 6px;
    left: 10px;
    right: 10px;
    font-family: "Caveat", "Comic Sans MS", cursive;
    font-size: 13px;
    color: #2a2924;
    text-align: center;
    transform: rotate(-2deg);
}

@media (max-width: 960px) { .polaroid { display: none; } }

/* ============================================================
   FIELD NOTES (editorial single-column block)
   ============================================================ */
.field-notes {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--s-7) 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.field-notes-meta {
    font-family: var(--font-grotesk);
    font-size: 11px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    margin-bottom: var(--s-4);
}

.field-notes-body {
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1.45;
    color: var(--text-hi);
    font-weight: 400;
    letter-spacing: -0.005em;
}

.field-notes-body p { margin: 0 0 var(--s-4); }
.field-notes-body p:last-child { margin: 0; }

.field-notes-body em {
    font-style: italic;
    color: var(--accent);
}

.field-notes-pullquote {
    font-size: 32px;
    font-style: italic;
    color: var(--text-hi);
    line-height: 1.2;
    margin: var(--s-5) 0;
    padding-left: var(--s-5);
    border-left: 3px solid var(--accent);
}

.field-notes-author {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px dashed var(--border-subtle);
    font-family: var(--font-grotesk);
}

.field-notes-author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-default);
}

.field-notes-author-name { color: var(--text-hi); font-weight: 600; font-size: 14px; }
.field-notes-author-role { color: var(--text-mute); font-size: 12px; }
.field-notes-author-sig {
    margin-left: auto;
    font-family: "Caveat", cursive;
    font-size: 24px;
    color: var(--text-mute);
    transform: rotate(-4deg);
}

/* ============================================================
   PRESS STRIP (Selected mentions)
   ============================================================ */
.press-strip {
    padding: var(--s-6) 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.press-strip-head {
    font-family: var(--font-grotesk);
    font-size: 11px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    text-align: center;
    margin-bottom: var(--s-5);
}

.press-strip-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--s-7);
    flex-wrap: wrap;
    filter: grayscale(1);
    opacity: 0.55;
    transition: opacity var(--dur-base);
}

.press-strip-row:hover { opacity: 0.85; }

.press-logo {
    display: inline-flex;
    align-items: center;
    color: var(--text-hi);
}

/* Hand-lettered text-style press marks (no real logos) */
.press-logo.tc { font-family: "Inter", sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -0.04em; }
.press-logo.tc::before { content: ""; width: 14px; height: 14px; background: var(--text-hi); margin-right: 6px; border-radius: 50%; display: inline-block; }
.press-logo.wired { font-family: var(--font-display); font-weight: 700; font-size: 24px; font-style: italic; letter-spacing: -0.02em; }
.press-logo.verge { font-family: var(--font-grotesk); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: 0.12em; }
.press-logo.tnw { font-family: var(--font-grotesk); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.press-logo.tnw::after { content: ""; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; margin-left: 4px; display: inline-block; }
.press-logo.lh { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.press-logo.pkt { font-family: var(--font-grotesk); font-weight: 700; font-size: 18px; }

.press-strip-foot {
    text-align: center;
    margin-top: var(--s-4);
    font-family: var(--font-grotesk);
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: var(--tracking-wide);
}

.press-strip-foot a { color: var(--text-mute); }
.press-strip-foot a:hover { color: var(--accent); }

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.comparison {
    overflow-x: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-xl);
    background: var(--bg-surface);
}

.comparison table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
}

.comparison th,
.comparison td {
    padding: 18px 20px;
    text-align: left;
    font-size: 14px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}

.comparison thead th {
    background: var(--bg-raised);
    color: var(--text-mute);
    font-family: var(--font-grotesk);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-weight: 600;
}

.comparison thead th.is-us {
    background: var(--accent-soft);
    color: var(--accent);
}

.comparison th:first-child,
.comparison td:first-child { width: 28%; font-weight: 500; color: var(--text-hi); }

.comparison td.is-us {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
    font-family: var(--font-grotesk);
}

.comparison .check {
    color: var(--accent);
    display: inline-flex;
    align-items: center;
}

.comparison .check svg { width: 16px; height: 16px; }

.comparison .x {
    color: var(--text-dim);
    display: inline-flex;
    align-items: center;
}

.comparison .x svg { width: 16px; height: 16px; }

.comparison tbody tr:last-child th,
.comparison tbody tr:last-child td { border-bottom: none; }

@media (max-width: 760px) {
    .comparison th, .comparison td { padding: 12px 14px; font-size: 13px; }
}

/* ============================================================
   STATUS CHIP (footer)
   ============================================================ */
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-default);
    background: var(--bg-raised);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-mute);
    text-decoration: none;
}

.status-chip:hover { color: var(--text-hi); border-color: var(--border-strong); }

.status-chip .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #5BFFBD;
    box-shadow: 0 0 8px rgba(91,255,189,0.6);
    animation: pulse 2.2s ease-in-out infinite;
}

.status-chip strong { color: var(--text); font-family: var(--font-mono); }

/* ============================================================
   HOW + WHY TIMELINE (combined editorial process section)
   ============================================================ */
.how-why-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 1px solid var(--border-default);
    position: relative;
}

.how-why-step {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: var(--s-5);
    padding: var(--s-6) 0 var(--s-6) var(--s-5);
    border-bottom: 1px solid var(--border-subtle);
    position: relative;
}

.how-why-step:last-child { border-bottom: none; }

.how-why-num {
    font-family: var(--font-grotesk);
    font-size: 32px;
    font-weight: 600;
    color: var(--accent);
    line-height: 1;
    letter-spacing: -0.02em;
    position: relative;
}

.how-why-num::before {
    content: "";
    position: absolute;
    left: -57px;
    top: 14px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--bg-page);
}

.how-why-step.is-bonus .how-why-num { color: var(--text-mute); font-size: 36px; }

.how-why-body { max-width: 720px; }

.how-why-body h3 {
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 1.2;
    margin: 0 0 var(--s-3);
    color: var(--text-hi);
    font-weight: 500;
    letter-spacing: -0.015em;
}

.how-why-do {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    margin: 0 0 var(--s-3);
}

.how-why-do strong { color: var(--accent); font-family: var(--font-grotesk); font-weight: 600; }

.how-why-why {
    margin: 0;
    padding: var(--s-3) var(--s-4);
    background: var(--bg-page);
    border-left: 2px solid var(--accent);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-mute);
}

.how-why-why-label {
    display: block;
    font-family: var(--font-grotesk);
    font-size: 11px;
    color: var(--accent);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 600;
}

@media (max-width: 760px) {
    .how-why-step { grid-template-columns: 1fr; gap: var(--s-3); padding-left: var(--s-4); }
    .how-why-num::before { left: -50px; }
    .how-why-body h3 { font-size: 22px; }
}

/* ============================================================
   TRIP PLANNER — compact rebuild
   ============================================================ */
.trip-planner-steps {
    display: flex;
    gap: 0;
    margin-bottom: var(--s-5);
    position: relative;
}

.trip-step {
    flex: 1;
    padding: 12px 16px;
    border-radius: 0;
    border: none;
    border-bottom: 2px solid var(--border-default);
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: border-color var(--dur-fast), color var(--dur-fast);
}

.trip-step.is-active {
    background: transparent;
    border-bottom-color: var(--accent);
}

.trip-step-no {
    font-family: var(--font-grotesk);
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.trip-step.is-active .trip-step-no { color: var(--accent); }

.trip-step-label {
    font-size: 13px;
    color: var(--text-mute);
    font-weight: 500;
}

.trip-step.is-active .trip-step-label { color: var(--text-hi); }

.trip-days-input {
    height: 52px;
    max-width: 100%;
    text-align: left;
    font-size: 18px;
    font-family: var(--font-grotesk);
}

.trip-result.is-empty {
    padding: var(--s-4);
    background: var(--bg-page);
    border: 1px dashed var(--border-default);
    color: var(--text-mute);
    text-align: center;
    font-size: 13px;
    font-family: var(--font-grotesk);
}

main, header, footer, section, .container, .shell {
    position: relative;
    z-index: 1;
}

/* Force new typography on existing tags so legacy markup picks it up */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display) !important;
    color: var(--text-hi) !important;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
    font-weight: 600;
}

p, li, td, label, span, div { color: inherit; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

::selection { background: var(--accent); color: var(--accent-ink); }

/* Kill legacy chrome */
.preloader, .body-overlay, .scroll-top { display: none !important; }

/* Container width sync */
.container { max-width: var(--container); }
.shell { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* Section padding standard */
.section-padding, section.section-padding, .py-120, .my-120 {
    padding: var(--s-9) 0 !important;
    margin: 0 !important;
}

/* ---------- TOPBAR ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    background: color-mix(in srgb, var(--bg-page) 78%, transparent);
    border-bottom: 1px solid var(--border-subtle);
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    height: 72px;
}

.topbar-nav {
    display: flex;
    gap: var(--s-5);
    flex-wrap: wrap;
    align-items: center;
}

.topbar-nav a {
    color: var(--text-mute);
    font-size: 13px;
    font-weight: 500;
    transition: color var(--dur-fast);
}

.topbar-nav a:hover,
.topbar-nav a.active,
.topbar-nav a.menu-active,
.topbar-nav a[aria-current="page"] {
    color: var(--text-hi);
}

.topbar-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    flex-shrink: 0;
}

.topbar-burger { display: none; }

/* ---------- DROPDOWNS (own JS, not Bootstrap) ---------- */
.dropdown { position: relative; }

.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 200;
    min-width: 220px;
    background: var(--bg-overlay);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    padding: 8px;
    box-shadow: var(--elev-3);
}

.dropdown.is-open > .dropdown-menu,
.dropdown.show > .dropdown-menu {
    display: block;
    animation: dropdown-in var(--dur-fast) var(--ease-out);
}

@keyframes dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Items inside dropdowns reuse sidebar-item style from base */
.dropdown-menu .sidebar-item { width: 100%; }

/* ---------- MOBILE NAV ---------- */
@media (max-width: 960px) {
    .topbar-nav {
        display: none;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 4px;
        background: var(--bg-overlay);
        border-top: 1px solid var(--border-default);
        border-bottom: 1px solid var(--border-default);
        padding: var(--s-3);
    }

    .topbar-nav.is-open { display: flex; }

    .topbar-nav a {
        padding: 10px 12px;
        border-radius: var(--r-sm);
        font-size: 14px;
    }

    .topbar-nav a:hover { background: var(--neutral-3); }

    .topbar-burger { display: inline-flex !important; }
}

/* ---------- THEME TOGGLE ---------- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 8px;
    border: 1px solid var(--border-default);
    border-radius: var(--r-pill);
    background: var(--bg-raised);
    color: var(--text-mute);
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    transition: color var(--dur-fast), border-color var(--dur-fast);
}

.theme-toggle:hover { color: var(--text-hi); border-color: var(--border-strong); }
.theme-toggle .dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
    transition: background var(--dur-fast);
}

html[data-theme="light"] .theme-toggle .dot { background: var(--cta); box-shadow: 0 0 10px rgba(232, 112, 42, 0.4); }

/* ============================================================
   TOPBAR v2 · BEAUTIFUL NAV — ye-sim inspired
   Cleaner left/right balance, currency chip, iconic theme toggle,
   pill controls, real "Get an eSIM" CTA
   ============================================================ */
.topbar-v2 .topbar-inner {
    gap: var(--s-3);
    height: 68px;
}

.topbar-v2 .logo {
    flex: none;
    margin-right: var(--s-2);
}

.topbar-v2 .topbar-nav {
    flex: 1;
    gap: var(--s-4);
    justify-content: center;
}

.topbar-v2 .topbar-nav a {
    position: relative;
    padding: 8px 4px;
    font-size: 14px;
}

.topbar-v2 .topbar-nav a.menu-active::after,
.topbar-v2 .topbar-nav a.active::after {
    content: "";
    position: absolute;
    left: 4px; right: 4px; bottom: -2px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}

@media (max-width: 1180px) {
    .topbar-link-hide-sm { display: none; }
}

/* Currency chip — small pill with globe icon */
.topbar-currency-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--r-pill);
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    color: var(--text-mute);
    font-size: 12px;
    font-family: var(--font-grotesk);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.topbar-currency-chip svg { color: var(--accent); }

@media (max-width: 760px) {
    .topbar-currency-chip { display: none; }
}

/* Iconic theme toggle — single icon, no label, square pill */
.theme-toggle-iconic {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0;
}

.theme-toggle-iconic .theme-toggle-icon { display: inline-flex; }
.theme-toggle-iconic .theme-toggle-icon-light { display: none; }
html[data-theme="light"] .theme-toggle-iconic .theme-toggle-icon-dark { display: none; }
html[data-theme="light"] .theme-toggle-iconic .theme-toggle-icon-light { display: inline-flex; }
.theme-toggle-iconic svg { width: 16px; height: 16px; color: var(--text-mute); }
.theme-toggle-iconic:hover svg { color: var(--accent); }

/* Generic topbar pill — language, user, burger */
.topbar-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-raised);
    border-radius: var(--r-pill);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--dur-fast), color var(--dur-fast);
}

.topbar-pill:hover {
    border-color: var(--border-strong);
    color: var(--text-hi);
}

.topbar-pill svg { color: var(--text-mute); }
.topbar-pill:hover svg { color: var(--accent); }

.topbar-pill-user {
    padding: 0 10px 0 4px;
}

.topbar-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-grotesk);
    font-weight: 700;
    font-size: 12px;
}

/* Sign-in text-link */
.topbar-signin {
    color: var(--text-mute);
    font-size: 14px;
    font-weight: 500;
    padding: 0 var(--s-2);
    transition: color var(--dur-fast);
}

.topbar-signin:hover { color: var(--text-hi); }

@media (max-width: 760px) {
    .topbar-signin { display: none; }
}

/* CTA stays prominent */
.topbar-cta {
    height: 36px;
    padding: 0 16px;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 13px;
}

/* Burger — show only mobile, hide normal pill on desktop */
.topbar-v2 .topbar-burger { display: none; }

@media (max-width: 960px) {
    .topbar-v2 .topbar-burger { display: inline-flex; }
}

/* sr-only fallback for theme toggle */
.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;
}

/* ---------- HERO ---------- */
.hero {
    /* Less bottom padding so the coverage card sits closer (visual lift
       without the negative-margin hack that ate hero content last time). */
    padding: var(--s-9) 0 var(--s-5);
    position: relative;
    border-bottom: none;
    overflow: hidden;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--s-7);
    align-items: center;
}

.hero h1.t-display {
    font-size: clamp(40px, 4.8vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    max-width: 14ch;
}
.hero .lede { font-size: 17px; color: var(--text-mute); max-width: 480px; line-height: 1.55; margin-top: var(--s-4); }

.hero-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-top: var(--s-5);
}

/* ---------- PLAN FINDER (smart hero widget) ---------- */
.finder {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--r-xl);
    padding: var(--s-5);
    box-shadow: var(--elev-3);
    position: relative;
    overflow: hidden;
}

.finder::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: linear-gradient(135deg, var(--accent-glow), transparent 40%, var(--secondary-soft) 100%);
    border-radius: var(--r-xl);
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
}

.finder > * { position: relative; z-index: 1; }

/* The field containing the search needs to sit ABOVE its sibling stats
   so the absolutely-positioned .finder-results dropdown can render on top
   of the country/plan stat numbers (otherwise both siblings have z-index:1
   and document order wins, putting stats above the dropdown). */
.finder-field:has(.finder-search) { z-index: 50; }

.finder-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-4);
}

.finder-head h3 {
    font-size: 20px;
    margin: 4px 0 0;
}

.finder-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 10px;
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.finder-badge .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
    animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.finder-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: var(--s-4);
}

.finder-field-label {
    font-size: 11px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-family: var(--font-mono);
}

.finder-search {
    position: relative;
}

.finder-search .input {
    height: 52px;
    padding-left: 44px;
    font-size: 15px;
    background: var(--bg-page);
}

.finder-search .input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-mute);
    pointer-events: none;
}

.finder-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--bg-overlay);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    padding: 6px;
    max-height: 280px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: var(--elev-4);
    display: none;
}

.finder-search.show .finder-results { display: block; }
.finder-results .sidebar-item { cursor: pointer; }

.finder-selected {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--r-md);
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 14px;
    font-weight: 500;
}

.finder-selected.show { display: flex; }

.finder-selected .close {
    margin-left: auto;
    cursor: pointer;
    color: var(--accent);
    background: transparent;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.finder-selected .close:hover { background: rgba(255, 163, 98, 0.2); }

.finder-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-2);
    padding: var(--s-3) 0;
    margin-top: var(--s-3);
    border-top: 1px dashed var(--border-subtle);
}

.finder-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
}

.finder-stat .v {
    font-family: var(--font-mono);
    font-size: 16px;
    color: var(--text-hi);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.finder-stat .k {
    font-size: 10px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}

.finder-cta {
    width: 100%;
    margin-top: var(--s-3);
}

.finder-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px dashed var(--border-subtle);
    font-size: 11px;
    color: var(--text-mute);
    flex-wrap: wrap;
}

.finder-foot span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.finder-foot svg { width: 12px; height: 12px; color: var(--accent); }

/* ---------- MOBILE HERO ADJUSTMENTS ---------- */
@media (max-width: 960px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }
    .finder { margin-top: var(--s-5); }
}

/* ============================================================
   APP RATING BANNER (top of hero, social proof)
   ============================================================ */
.rating-banner {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 8px 14px 8px 10px;
    border-radius: var(--r-pill);
    background: var(--bg-raised);
    border: 1px solid var(--border-default);
    margin-bottom: var(--s-5);
}

.rating-banner-score {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--r-pill);
    background: var(--success-soft);
    color: var(--success);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 12px;
}

.rating-banner-score svg { width: 12px; height: 12px; fill: currentColor; }

.rating-banner-stores {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    font-size: 12px;
}

.rating-banner-stores .store {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: var(--bg-page);
    border: 1px solid var(--border-default);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
}

.rating-banner-stores .store svg { width: 12px; height: 12px; }

.rating-banner-count {
    font-family: var(--font-mono);
    color: var(--text-hi);
    font-size: 12px;
    font-weight: 500;
}

.rating-banner-divider { width: 1px; height: 18px; background: var(--border-default); }

/* ============================================================
   POPULAR DESTINATIONS  (tabs + country list with prices)
   ============================================================ */
.destinations {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-xl);
    padding: var(--s-6);
}

.destinations-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--s-4);
    margin-bottom: var(--s-5);
    flex-wrap: wrap;
}

.destinations-head h2 { font-size: 28px; margin: 0; }

.destinations-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-page);
    border: 1px solid var(--border-default);
    border-radius: var(--r-pill);
}

.destinations-tab {
    padding: 8px 16px;
    border-radius: var(--r-pill);
    background: transparent;
    border: none;
    color: var(--text-mute);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
}

.destinations-tab:hover { color: var(--text-hi); }
.destinations-tab.is-active {
    background: var(--accent);
    color: var(--accent-ink);
}

.destinations-promo {
    margin-bottom: var(--s-5);
    padding: var(--s-5);
    border-radius: var(--r-lg);
    background:
        radial-gradient(circle at 80% 20%, rgba(255, 163, 98, 0.18), transparent 60%),
        linear-gradient(135deg, rgba(255, 200, 87, 0.10) 0%, rgba(255, 107, 126, 0.12) 100%);
    border: 1px solid rgba(255, 200, 87, 0.25);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-4);
    align-items: center;
}

.destinations-promo h3 { font-size: 20px; margin: 0 0 4px; color: var(--text-hi); }
.destinations-promo p { color: var(--text-mute); font-size: 13px; line-height: 1.5; margin: 0; max-width: 420px; }

.destinations-promo-icon {
    width: 80px; height: 80px;
    border-radius: var(--r-xl);
    background: radial-gradient(circle, var(--cta) 0%, var(--cta-press) 100%);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 30px rgba(255, 163, 98, 0.4);
    color: var(--cta-ink);
}

.destinations-promo-icon svg { width: 40px; height: 40px; }

.destinations-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2);
    grid-auto-rows: 1fr;
}

.destination-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-3);
    padding: 12px 14px;
    border-radius: var(--r-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-page);
    transition: border-color var(--dur-fast), background var(--dur-fast);
    cursor: pointer;
    min-height: 64px;
}

.destination-row:hover { border-color: var(--accent); background: var(--bg-raised); }

/* Country-flag <img> (countries tab) — keep original 36×27 flag chip */
.destination-row > img {
    width: 36px; height: 27px;
    border-radius: 4px;
    object-fit: cover;
}

/* Vertical text stack inside the row — name on top, price/meta below.
   Single grid cell keeps row height predictable even with multi-word names. */
.destination-row .dest-row-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.destination-row .name {
    color: var(--text-hi);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.destination-row .price {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-mute);
    line-height: 1.3;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Section heading inside the destinations grid */
.destinations-subhead {
    grid-column: 1 / -1;
    font-family: var(--font-grotesk);
    font-size: 12px;
    color: var(--text-mute);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: var(--s-3) var(--s-1) 0;
    opacity: 0.7;
}

.destination-row .price strong { color: var(--text-hi); font-weight: 500; }

.destination-row .arrow {
    color: var(--text-mute);
    transition: transform var(--dur-fast), color var(--dur-fast);
}

.destination-row:hover .arrow { color: var(--accent); transform: translateX(2px); }

.destinations-foot {
    margin-top: var(--s-5);
    display: flex;
    justify-content: center;
}

/* ---------- Coverage pre/post bands ---------- */
.coverage-pre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: 12px 0 var(--s-4);
    margin-bottom: var(--s-4);
    border-bottom: 1px solid var(--border-subtle);
    flex-wrap: wrap;
    font-family: var(--font-grotesk);
}

.coverage-pre-stats {
    display: inline-flex;
    align-items: center;
    gap: var(--s-5);
    flex-wrap: wrap;
}

.coverage-pre-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    color: var(--text-mute);
    letter-spacing: 0.02em;
}

.coverage-pre-stat strong {
    color: var(--text-hi);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
}

.coverage-pre-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}

.coverage-pre-live .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
    animation: pulse 1.8s ease-in-out infinite;
}

.coverage-post {
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    font-family: var(--font-grotesk);
    font-size: 11px;
    color: var(--text-mute);
    letter-spacing: 0.02em;
}

.coverage-post-trending {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.coverage-post-trending-label {
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--text-dim);
    margin-right: 4px;
}

.coverage-post-chip {
    padding: 4px 10px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-default);
    background: var(--bg-page);
    color: var(--text);
    font-size: 12px;
    text-decoration: none;
    transition: border-color var(--dur-fast), color var(--dur-fast);
}

.coverage-post-chip:hover { border-color: var(--accent); color: var(--accent); }

.coverage-post-sync {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.coverage-post-sync .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #5BFFBD;
    box-shadow: 0 0 8px rgba(91,255,189,0.6);
}

/* ---------- Search inside destinations ---------- */
.destinations-search {
    position: relative;
    margin-bottom: var(--s-4);
}

.destinations-search .input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-mute);
    pointer-events: none;
    z-index: 2;
}

.destinations-search input {
    width: 100%;
    height: 48px;
    padding: 0 16px 0 46px;
    background: var(--bg-page);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    color: var(--text-hi);
    font-family: var(--font-body);
    font-size: 14px;
    transition: border-color var(--dur-fast);
}

.destinations-search input:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.destinations-search input::placeholder { color: var(--text-dim); }

.destinations-list .destination-row.is-hidden { display: none; }

/* Region icons (replace the text-code box for region rows) */
.region-icon {
    width: 44px;
    height: 32px;
    border-radius: 6px;
    background: var(--bg-elev-1);
    color: var(--text-hi);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border: 1px solid var(--border-subtle);
    padding: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.region-icon svg { width: 18px; height: 18px; }

/* PNG continent silhouettes inside .region-icon — always ember-tinted so the
   icons aren't ghostly white outlines. Brightens slightly on hover. */
.region-icon .region-map-png {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 36px;
    max-height: 24px;
    object-fit: contain;
    object-position: center;
    opacity: 0.9;
    filter: brightness(0) saturate(100%) invert(70%) sepia(40%) saturate(800%) hue-rotate(355deg) brightness(100%) contrast(95%);
    transition: opacity .15s, filter .15s;
}
.destination-row:hover .region-icon .region-map-png {
    opacity: 1;
}

/* Trip-bundle variant — accent-tinted background frame */
.region-icon.is-bundle {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}
.region-icon.is-bundle .region-map-png {
    opacity: 1;
}

/* ============================================================
   DESTINATION PAGE
   ============================================================ */
.dest-page {
    padding: var(--s-7) 0 var(--s-9);
}

.dest-page-head {
    margin-bottom: var(--s-6);
    max-width: 720px;
}

.dest-page-head h1 {
    font-size: clamp(40px, 4.5vw, 56px);
    line-height: 1.05;
    margin: var(--s-3) 0;
    letter-spacing: -0.02em;
    font-weight: 500;
}

.dest-page-head .lede {
    font-size: 17px;
    color: var(--text-mute);
    line-height: 1.55;
    max-width: 600px;
}

.dest-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-5);
    flex-wrap: wrap;
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--border-subtle);
}

.dest-controls-search {
    position: relative;
    flex: 1;
    min-width: 280px;
    max-width: 480px;
}

.dest-controls-search input {
    width: 100%;
    height: 48px;
    padding: 0 16px 0 46px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    color: var(--text-hi);
    font-family: var(--font-body);
    font-size: 14px;
}

.dest-controls-search input:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.dest-controls-search .input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-mute);
    pointer-events: none;
}

.dest-controls-meta {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--font-grotesk);
    font-size: 12px;
    color: var(--text-mute);
}

.dest-controls-meta strong { color: var(--text-hi); }
.dest-controls-meta .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
}

.dest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--s-3);
}

.dest-card {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    align-items: center;
    gap: var(--s-3);
    padding: 10px 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    text-decoration: none;
    transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
    overflow: hidden;
}

.dest-card:hover {
    border-color: var(--accent);
    background: var(--bg-raised);
    transform: translateY(-1px);
}

.dest-card-thumb {
    position: relative;
    width: 88px;
    height: 64px;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--bg-raised);
    flex: none;
}

.dest-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.dest-card:hover .dest-card-thumb img { transform: scale(1.08); }

.dest-card-thumb-fallback {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(8px) saturate(1.3);
    transform: scale(1.2);
}

.dest-card-thumb-fallback-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dest-card-thumb-fallback-overlay img {
    width: 60%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.2);
    transition: none;
}

.dest-card-thumb-iso {
    position: absolute;
    bottom: 4px;
    right: 4px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.05em;
    border-radius: 3px;
}

/* Region-icon stays compatible (small flag) */
.dest-card .flag-fallback {
    width: 88px;
    height: 64px;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 12px;
    border: 1px solid var(--accent);
    border-radius: var(--r-sm);
}

.dest-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dest-card-name { font-size: 15px; font-weight: 500; color: var(--text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dest-card-meta { font-size: 12px; color: var(--text-mute); font-family: var(--font-mono); }
.dest-card-meta strong { color: var(--text); font-weight: 500; }

.dest-card-arrow {
    color: var(--text-dim);
    transition: color var(--dur-fast), transform var(--dur-fast);
}

.dest-card:hover .dest-card-arrow {
    color: var(--accent);
    transform: translateX(2px);
}

.dest-card.is-hidden { display: none; }

.dest-empty {
    grid-column: 1 / -1;
    padding: var(--s-7);
    text-align: center;
    color: var(--text-mute);
    border: 1px dashed var(--border-default);
    border-radius: var(--r-md);
    background: var(--bg-page);
    font-family: var(--font-grotesk);
    font-size: 14px;
}

/* Reuse .destinations-tabs from homepage */
.dest-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--r-pill);
}

.dest-tab {
    padding: 8px 16px;
    border-radius: var(--r-pill);
    background: transparent;
    border: none;
    color: var(--text-mute);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
    font-family: var(--font-body);
}

.dest-tab:hover { color: var(--text-hi); }
.dest-tab.is-active { background: var(--accent); color: var(--accent-ink); }

/* Region card with extra context */
.dest-card.is-region img,
.dest-card.is-region .flag-fallback {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

/* ============================================================
   DESTINATION PAGE — Travel inspiration variant
   ============================================================ */
.dest-stats {
    display: flex;
    gap: var(--s-6);
    padding: var(--s-4) 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--s-6);
    flex-wrap: wrap;
}

.dest-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--font-grotesk);
}

.dest-stat-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-hi);
    letter-spacing: -0.02em;
    line-height: 1;
}

.dest-stat-label {
    font-size: 11px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}

/* Top picks — editorial cards */
.picks-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
    margin-bottom: var(--s-7);
}

.pick {
    padding: var(--s-4);
    border-radius: var(--r-lg);
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    transition: border-color var(--dur-fast), transform var(--dur-fast);
}

.pick:hover { border-color: var(--border-strong); transform: translateY(-2px); }

.pick-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pick-eyebrow {
    font-family: var(--font-grotesk);
    font-size: 10px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-weight: 600;
}

.pick-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pick-icon svg { width: 16px; height: 16px; }

.pick h3 {
    font-size: 17px;
    margin: 0;
    color: var(--text-hi);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.pick-countries {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pick-country {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    text-decoration: none;
    border-bottom: 1px dashed var(--border-subtle);
}

.pick-country:last-child { border-bottom: none; }

.pick-country img,
.pick-country .flag-fallback {
    width: 22px;
    height: 17px;
    border-radius: 3px;
    object-fit: cover;
    flex: none;
    border: 1px solid var(--border-subtle);
}

.pick-country .flag-fallback {
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
}

.pick-country-name { flex: 1; color: var(--text); font-size: 13px; font-weight: 500; }
.pick-country-price {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-mute);
}
.pick-country-price strong { color: var(--text-hi); font-weight: 600; }

.pick-foot {
    margin-top: auto;
    font-family: var(--font-grotesk);
    font-size: 11px;
    color: var(--text-mute);
    letter-spacing: 0.02em;
}

@media (max-width: 960px) { .picks-row { grid-template-columns: 1fr; } }

/* Continent filter chips */
.filter-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: var(--s-5);
}

.filter-chip {
    padding: 8px 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-body);
    transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}

.filter-chip:hover { color: var(--text-hi); border-color: var(--border-strong); }
.filter-chip.is-active {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
}

.filter-chip-count {
    margin-left: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    opacity: 0.65;
}

.filter-chip.is-active .filter-chip-count { opacity: 0.85; }

/* Continent section bands */
.continent-section { margin-bottom: var(--s-7); }

.continent-section.is-hidden { display: none; }

.continent-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-3);
    border-bottom: 1px solid var(--border-subtle);
}

.continent-head h3 {
    font-size: 22px;
    margin: 0;
    color: var(--text-hi);
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.015em;
}

.continent-head h3 .count {
    font-family: var(--font-grotesk);
    font-size: 13px;
    color: var(--text-mute);
    margin-left: 8px;
    font-weight: 500;
}

.continent-head .from {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-mute);
}

.continent-head .from strong { color: var(--text-hi); font-weight: 600; }

.dest-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-grotesk);
    font-size: 12px;
    color: var(--text-mute);
}

.dest-sort select {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--r-sm);
    color: var(--text);
    padding: 6px 28px 6px 10px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23818d9d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

/* ============================================================
   DESTINATION PAGE V3 — ye-sim style hero + popular card
   ============================================================ */
.dest-v3 {
    padding: var(--s-7) 0 var(--s-9);
}

.dest-v3-hero {
    text-align: center;
    padding: var(--s-7) 0 var(--s-7);
    max-width: 720px;
    margin: 0 auto;
}

.dest-v3-rating {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--s-3);
    font-family: var(--font-grotesk);
}

.dest-v3-rating-score {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--success-soft);
    color: var(--success);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
}

.dest-v3-rating-score svg { width: 12px; height: 12px; fill: currentColor; }

.dest-v3-rating-count {
    color: var(--text-mute);
    font-size: 13px;
    letter-spacing: 0.02em;
}

.dest-v3-rating-count strong {
    color: var(--text-hi);
    font-weight: 600;
    font-family: var(--font-mono);
}

.dest-v3-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(32px, 4.5vw, 56px);
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin: 0 0 var(--s-3);
}

.dest-v3-hero-sub {
    font-family: var(--font-grotesk);
    font-size: 13px;
    color: var(--text-mute);
    letter-spacing: 0.02em;
    margin-bottom: var(--s-5);
    text-transform: uppercase;
}

.dest-v3-search {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
}

.dest-v3-search input {
    width: 100%;
    height: 64px;
    padding: 0 28px 0 60px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--r-pill);
    color: var(--text-hi);
    font-family: var(--font-body);
    font-size: 16px;
    box-shadow: var(--elev-3);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.dest-v3-search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft), var(--elev-3);
}

.dest-v3-search .input-icon {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-mute);
    pointer-events: none;
}

.dest-v3-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--bg-overlay);
    border: 1px solid var(--border-default);
    border-radius: var(--r-lg);
    padding: 8px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 50;
    box-shadow: var(--elev-4);
    display: none;
    text-align: left;
}

.dest-v3-search.show .dest-v3-search-results { display: block; }

/* Popular destinations card */
.popular-card {
    margin-top: var(--s-6);
    padding: var(--s-5);
    background: var(--bg-surface);
    border-radius: var(--r-xl);
    border: 1px solid var(--border-subtle);
}

.popular-card h2 {
    font-family: var(--font-display);
    font-size: 22px;
    margin: 0 0 var(--s-3);
    color: var(--text-hi);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.popular-card-tabs {
    display: inline-flex;
    gap: 4px;
    margin-bottom: var(--s-4);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--border-subtle);
}

.popular-card-tab {
    padding: 8px 16px;
    border-radius: var(--r-pill);
    background: transparent;
    border: none;
    color: var(--text-mute);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
}

.popular-card-tab:hover { color: var(--text-hi); }
.popular-card-tab.is-active {
    background: var(--bg-page);
    color: var(--text-hi);
}

/* Featured plug row (matches ye-sim "Tired of planning…") */
.popular-feature {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 14px 16px;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    margin-bottom: var(--s-3);
    text-decoration: none;
    transition: border-color var(--dur-fast);
}

.popular-feature:hover { border-color: var(--accent); }

.popular-feature-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.popular-feature-icon svg { width: 18px; height: 18px; }

.popular-feature-body { flex: 1; min-width: 0; }
.popular-feature-title { color: var(--text-hi); font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.popular-feature-sub { color: var(--text-mute); font-size: 12px; }

.popular-feature-arrow { color: var(--text-dim); }

/* ============================================================
   POPULAR PROMO BANNER — animated hero card
   (Magenta variant on Countries, ember variant on Regions)
   ============================================================ */
.popular-promo {
    position: relative;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: var(--r-lg);
    padding: 0;
    margin-bottom: var(--s-4);
    text-decoration: none;
    color: #fff;
    min-height: 196px;
    isolation: isolate;
    background:
        radial-gradient(ellipse at 75% 50%, rgba(255, 80, 130, 0.4) 0%, transparent 55%),
        linear-gradient(135deg, #e91e63 0%, #c2185b 45%, #6a1b4d 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.1) inset,
        0 18px 44px -16px rgba(168, 30, 90, 0.55);
    transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s ease;
    will-change: transform;
}

.popular-promo:hover {
    transform: translateY(-3px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12) inset,
        0 28px 56px -16px rgba(168, 30, 90, 0.75);
}

.popular-promo-body {
    position: relative;
    z-index: 3;
    padding: var(--s-5) var(--s-5);
    max-width: 56%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--s-2);
}

.popular-promo-title {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.3vw, 30px);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: #fff;
}

.popular-promo-sub {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.45;
    max-width: 40ch;
}

.popular-promo-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--s-3);
    align-self: flex-start;
    height: 42px;
    padding: 0 20px;
    background: #fff;
    color: #1a1a1a;
    border-radius: var(--r-pill);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.popular-promo:hover .popular-promo-cta {
    transform: translateX(3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.popular-promo-visual {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

/* Background glows that breathe */
.mx-promo-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.55;
    pointer-events: none;
    will-change: transform, opacity;
}
.popular-promo .mx-promo-glow-a {
    right: 12%;
    top: -10%;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, rgba(255,182,210,0.2) 50%, transparent 70%);
    animation: mxBreath 6s ease-in-out infinite;
}
.popular-promo .mx-promo-glow-b {
    right: -4%;
    bottom: -20%;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255,150,200,0.4) 0%, transparent 70%);
    animation: mxBreath 7.5s ease-in-out infinite 1.2s;
}

/* Animated visual stage on the right */
.mx-promo-stage {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 260px;
    height: 220px;
    pointer-events: none;
}

/* Orbital rings (slow rotation) */
.mx-promo-rings {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: mxSpinSlow 28s linear infinite;
    transform-origin: 50% 50%;
}

/* Tiny dot that orbits on the inner ring */
.mx-promo-orbiter {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: mxSpinSlow 7s linear infinite;
    transform-origin: 50% 50%;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.8));
}

/* Infinity — figure-8 with flowing energy spark */
.mx-promo-infinity {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 240px;
    height: 120px;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.35));
}
.mx-promo-infinity .inf-flow {
    stroke-dasharray: 60 360;
    stroke-dashoffset: 0;
    animation: mxFlow 3.5s linear infinite;
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.95));
}

/* Globe — circle disc + lat/long grid + pulsing pins (ember variant) */
.mx-promo-globe {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 220px;
    height: 220px;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.3));
}

/* Subtle "spin" illusion — squish the longitudes side-to-side */
.mx-promo-globe .globe-longs {
    transform-origin: 100px 100px;
    animation: mxGlobeSpin 14s ease-in-out infinite;
}

/* Pulsing destination pins around the globe */
.mx-promo-pin {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    animation: mxPinPulse 2.6s ease-out infinite;
    animation-delay: var(--d, 0s);
}

/* Hover: punch the stage forward */
.popular-promo:hover .mx-promo-stage {
    transform: translateY(-50%) scale(1.05);
    transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.popular-promo .mx-promo-stage {
    transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}

@media (max-width: 720px) {
    .popular-promo { min-height: 160px; }
    .popular-promo-body { max-width: 100%; padding: var(--s-4); }
    .popular-promo-sub { display: none; }
    .mx-promo-stage { width: 180px; height: 150px; right: -10px; opacity: 0.55; }
    .mx-promo-infinity { width: 160px; height: 80px; }
    .mx-promo-globe { width: 150px; height: 150px; }
    .mx-promo-pin { width: 8px; height: 8px; }
}

/* ----- Ember variant (Regions tab) ----- */
.popular-promo.popular-promo-ember {
    background:
        radial-gradient(ellipse at 75% 50%, rgba(255, 163, 98, 0.45) 0%, transparent 55%),
        linear-gradient(135deg, #ff7e2f 0%, #e8702a 45%, #8a3309 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12) inset,
        0 18px 44px -16px rgba(184, 72, 13, 0.5);
}

.popular-promo.popular-promo-ember:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 28px 56px -16px rgba(184, 72, 13, 0.75);
}

.popular-promo-ember .mx-promo-glow-a {
    background: radial-gradient(circle, rgba(255,200,120,0.55) 0%, rgba(255,150,80,0.2) 50%, transparent 70%);
}
.popular-promo-ember .mx-promo-glow-b {
    background: radial-gradient(circle, rgba(255,140,60,0.45) 0%, transparent 70%);
}

/* ----- Keyframes ----- */
@keyframes mxBreath {
    0%, 100% { transform: scale(1); opacity: 0.45; }
    50%      { transform: scale(1.18); opacity: 0.7; }
}
@keyframes mxSpinSlow { to { transform: rotate(360deg); } }

@keyframes mxFlow {
    to { stroke-dashoffset: -420; }
}

@keyframes mxPinPulse {
    0%        { transform: scale(1);   box-shadow: 0 0 0 0 rgba(255,255,255,0.65); opacity: 1; }
    70%       { transform: scale(1.6); box-shadow: 0 0 0 12px rgba(255,255,255,0); opacity: 0.7; }
    100%      { transform: scale(1);   box-shadow: 0 0 0 0 rgba(255,255,255,0);    opacity: 1; }
}

@keyframes mxGlobeSpin {
    0%, 100% { transform: scaleX(1);     opacity: 0.55; }
    50%      { transform: scaleX(0.55);  opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
    .mx-promo-rings,
    .mx-promo-orbiter,
    .mx-promo-globe .globe-longs,
    .mx-promo-glow,
    .mx-promo-pin,
    .inf-flow {
        animation: none !important;
    }
}

/* ============================================================
   PLANS-V2 COVERAGE CTA — "View N countries" pill on /region-plans/{slug}
   ============================================================ */
.plans-v2-coverage-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--s-3);
    padding: 10px 20px 10px 12px;
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-pill);
    color: var(--text-hi);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.plans-v2-coverage-cta:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.plans-v2-coverage-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.plans-v2-coverage-icon svg { width: 16px; height: 16px; }
.plans-v2-coverage-cta > svg:last-child { color: var(--text-dim); }

/* ============================================================
   COVERAGE SECTION — clean dark card under the hero, no overlap.
   (Earlier "card climbs on hero" attempt ate the hero content; reverted.)
   ============================================================ */
/* Tighten coverage's own top padding — the card itself provides breathing
   room via its border-radius + shadow, no need for the full --s-9 above. */
.mx-section#coverage {
    padding-top: var(--s-5);
    border-top: none;
}

.mx-section#coverage .destinations {
    background: var(--bg-elev-1, #14171c);
    border: 1px solid var(--border-subtle);
    border-radius: 28px;
    padding: clamp(20px, 3vw, 36px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 32px 80px -32px rgba(0, 0, 0, 0.55);
    /* Narrower like ye-sim — Plan Finder covers the full breadth in hero,
       so this card sits as a tighter "browse" panel under it. */
    max-width: 760px;
    margin: 0 auto;
}

/* Centered tab pill (when .is-centered is present) */
.destinations-tabs.is-centered {
    display: inline-flex;
    margin: 0 auto var(--s-4);
    justify-content: center;
}
.destinations-tabs.is-centered + .destinations-list { margin-top: 0; }
/* When the head is gone, the tabs row needs the wrapper to actually center */
.mx-section#coverage .destinations {
    text-align: initial;
}
.mx-section#coverage .destinations-tabs.is-centered {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   USER DASHBOARD LAYOUT — sidebar + main content area
   ============================================================ */
.dash-wrap {
    padding: var(--s-6) 0 var(--s-9);
    min-height: calc(100vh - 80px);
}

.dash-grid {
    display: grid;
    grid-template-columns: 256px 1fr;
    gap: var(--s-6);
    align-items: start;
}

@media (max-width: 960px) {
    .dash-grid { grid-template-columns: 1fr; }
}

.dash-side {
    position: sticky;
    top: 96px;
    background: var(--bg-elev-1, #14171c);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: var(--s-4);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}

.dash-side-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: var(--s-4);
    margin-bottom: var(--s-3);
    border-bottom: 1px solid var(--border-subtle);
}

.dash-side-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-grotesk);
    font-weight: 600;
    font-size: 16px;
    flex: none;
}

.dash-side-user-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dash-side-user-name {
    color: var(--text-hi);
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-side-user-handle {
    color: var(--text-mute);
    font-size: 12px;
    font-family: var(--font-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-side-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dash-side-section {
    font-family: var(--font-grotesk);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-mute);
    padding: 16px 10px 6px;
}

.dash-side-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background var(--dur-fast), color var(--dur-fast);
}

.dash-side-link:hover {
    background: var(--bg-page);
    color: var(--text-hi);
}

.dash-side-link.is-active {
    background: var(--accent-soft);
    color: var(--accent);
}

.dash-side-link.is-danger {
    color: #FF8B8B;
    margin-top: 8px;
}
.dash-side-link.is-danger:hover {
    background: rgba(255, 110, 110, 0.08);
    color: #FFA0A0;
}

.dash-side-link svg { flex: none; }
.dash-side-link span:not(.dash-side-badge) { flex: 1; }

.dash-side-badge {
    background: var(--accent);
    color: var(--accent-ink, #000);
    padding: 1px 8px;
    border-radius: 999px;
    font-family: var(--font-grotesk);
    font-size: 11px;
    font-weight: 700;
}

.dash-main {
    min-width: 0;
}

.dash-side-mobile-toggle {
    display: none;
    margin-bottom: var(--s-4);
}

/* Mobile slide-in sidebar */
@media (max-width: 960px) {
    .dash-side {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1100;
        width: 280px;
        max-width: 85vw;
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(.2,.7,.2,1);
        overflow-y: auto;
    }
    .dash-side.is-open { transform: translateX(0); }
    .dash-side-mobile-toggle { display: inline-flex; }
}

/* ============================================================
   USER DASHBOARD — shared design system
   (forms, pills, pagination, tabs, empty state, action bar, list,
   detail-page header — used across every LK page)
   ============================================================ */

/* Action bar at top of every LK page */
.dash-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
    flex-wrap: wrap;
}
.dash-action-bar h1 {
    font-family: var(--font-display);
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 500;
    color: var(--text-hi);
    margin: 0;
    letter-spacing: -0.01em;
}
.dash-action-bar-sub {
    color: var(--text-mute);
    font-size: 13px;
    margin: 4px 0 0;
}
.dash-action-bar-end {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.dash-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-grotesk);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-mute);
    text-decoration: none;
    margin: 0 0 8px;
    transition: color .15s ease, gap .15s ease;
}
.dash-back-link:hover {
    color: var(--accent);
    gap: 9px;
}

/* Sub-tabs row */
.dash-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-pill);
    margin-bottom: var(--s-4);
}
.dash-tab {
    padding: 8px 16px;
    border-radius: var(--r-pill);
    color: var(--text-mute);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.dash-tab:hover { color: var(--text-hi); }
.dash-tab.is-active {
    background: var(--bg-elev-1, var(--bg-raised));
    color: var(--text-hi);
}

/* Status pills */
.dash-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-family: var(--font-grotesk);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--border-subtle);
    background: var(--bg-page);
    color: var(--text-mute);
    line-height: 1.4;
    white-space: nowrap;
}
.dash-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.dash-pill.is-success { border-color: rgba(85,200,130,0.45); background: rgba(85,200,130,0.12); color: #6FE3A2; }
.dash-pill.is-warning { border-color: rgba(255,200,80,0.45); background: rgba(255,200,80,0.12); color: #FFD27A; }
.dash-pill.is-danger  { border-color: rgba(255,110,110,0.45); background: rgba(255,110,110,0.12); color: #FFA0A0; }
.dash-pill.is-info    { border-color: rgba(91,141,239,0.45); background: rgba(91,141,239,0.12); color: #8FB5FF; }
.dash-pill.is-accent  { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* Form primitives */
.dash-form {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}
.dash-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: var(--s-4);
}
@media (max-width: 720px) { .dash-form-grid { grid-template-columns: 1fr; } }

.dash-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dash-field label,
.dash-field .dash-field-label {
    font-family: var(--font-grotesk);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-mute);
    font-weight: 600;
}
.dash-field .input,
.dash-field input[type="text"]:not(.input),
.dash-field input[type="email"]:not(.input),
.dash-field input[type="password"]:not(.input),
.dash-field input[type="number"]:not(.input),
.dash-field input[type="tel"]:not(.input),
.dash-field input[type="url"]:not(.input),
.dash-field input[type="date"]:not(.input),
.dash-field select:not(.input),
.dash-field textarea:not(.input) {
    height: 48px;
    padding: 0 14px;
    border-radius: var(--r-md);
    border: 1px solid var(--border-default);
    background: var(--bg-raised);
    color: var(--text-hi);
    font-family: var(--font-body);
    font-size: 14px;
    width: 100%;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
    box-sizing: border-box;
}
.dash-field textarea:not(.input) { height: auto; min-height: 100px; padding: 12px 14px; resize: vertical; }
.dash-field .input:focus,
.dash-field input:focus,
.dash-field select:focus,
.dash-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.dash-field .dash-field-hint {
    color: var(--text-mute);
    font-size: 12px;
    margin-top: 2px;
}
.dash-field .dash-field-error {
    color: #FFA0A0;
    font-size: 12px;
    margin-top: 2px;
}

.dash-form-actions {
    display: flex;
    gap: 10px;
    margin-top: var(--s-3);
    flex-wrap: wrap;
}

/* Empty state */
.dash-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-mute);
}
.dash-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    color: var(--text-mute);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--s-3);
}
.dash-empty-icon svg { width: 24px; height: 24px; }
.dash-empty h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    color: var(--text-hi);
    margin: 0 0 6px;
}
.dash-empty p {
    margin: 0 0 var(--s-4);
    font-size: 14px;
    line-height: 1.5;
}

/* Pagination */
.dash-pagination {
    display: flex;
    gap: 6px;
    margin-top: var(--s-5);
    justify-content: center;
    flex-wrap: wrap;
}
.dash-pagination > * {
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-page);
    color: var(--text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    transition: border-color var(--dur-fast), background var(--dur-fast);
}
.dash-pagination > a:hover {
    border-color: var(--accent);
    color: var(--text-hi);
}
.dash-pagination .is-active,
.dash-pagination .active span,
.dash-pagination .active a {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}
.dash-pagination .is-disabled,
.dash-pagination .disabled span {
    opacity: 0.4;
    cursor: not-allowed;
}
/* Tame Laravel paginator default markup */
.dash-pagination nav { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-pagination ul.pagination {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
}
.dash-pagination ul.pagination li.page-item .page-link {
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-page);
    color: var(--text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
.dash-pagination ul.pagination li.active .page-link {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

/* Generic "list of items" container — eSIMs, VNs, Orders rows */
.dash-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dash-list-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: var(--s-4);
    padding: 16px 18px;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    color: var(--text-hi);
    text-decoration: none;
    transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.dash-list-row:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.dash-list-flag {
    width: 44px;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border-subtle);
    flex: none;
}
.dash-list-flag img { width: 100%; height: 100%; object-fit: cover; }

.dash-list-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dash-list-title { color: var(--text-hi); font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-list-meta { color: var(--text-mute); font-size: 12px; font-family: var(--font-mono); }

.dash-list-end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

/* Detail-page hero (eSIM detail, VN detail, Order detail) */
.dash-detail-hero {
    background: var(--bg-elev-1, var(--bg-raised));
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: var(--s-5);
    margin-bottom: var(--s-5);
}
.dash-detail-hero-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-4);
    flex-wrap: wrap;
}
.dash-detail-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    color: var(--text-hi);
    margin: 0 0 4px;
    line-height: 1.2;
}
.dash-detail-subtitle {
    color: var(--text-mute);
    font-size: 13px;
    margin: 0;
    font-family: var(--font-mono);
}
.dash-detail-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px var(--s-5);
}
@media (max-width: 720px) { .dash-detail-rows { grid-template-columns: 1fr; } }

.dash-detail-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dash-detail-row-label {
    font-family: var(--font-grotesk);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-mute);
    font-weight: 600;
}
.dash-detail-row-value {
    color: var(--text-hi);
    font-size: 15px;
    font-weight: 500;
}

/* My eSIMs — ye-sim style expanded card per eSIM */
.esim-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.esim-card {
    position: relative;
    background: var(--bg-elev-1, #14171c);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: 22px 24px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        0 8px 24px -16px rgba(0,0,0,0.4);
    transition: border-color var(--dur-fast);
}
.esim-card:hover { border-color: var(--border-default); }
.esim-card.is-expired { opacity: 0.7; }

.esim-card-head {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.esim-card-flag {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.esim-card-flag img { width: 100%; height: 100%; object-fit: cover; }
.esim-card-flag svg { width: 26px; height: 26px; color: var(--accent); }

.esim-card-title-wrap { min-width: 0; }
.esim-card-title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 500;
    color: var(--text-hi);
    margin: 0 0 4px;
    line-height: 1.2;
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.esim-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    color: var(--text-mute);
    font-size: 13px;
}
.esim-card-dot { color: var(--text-mute); }
.esim-card-status { align-self: center; }

/* Status notice banner between head and actions */
.esim-card-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 500;
}
.esim-card-notice.is-warning {
    background: rgba(255, 200, 80, 0.12);
    border: 1px solid rgba(255, 200, 80, 0.35);
    color: #FFD27A;
}
.esim-card-notice.is-danger {
    background: rgba(255, 110, 110, 0.12);
    border: 1px solid rgba(255, 110, 110, 0.35);
    color: #FFA0A0;
}
.esim-card-notice svg { flex: none; }

/* Stacked action buttons (Install + Archive/Details), full-width */
.esim-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.esim-install {
    background: #ffffff;
    color: #1a1a1a;
    border: none;
    height: 52px;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    width: 100%;
    transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.esim-install:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.esim-secondary {
    background: var(--bg-page);
    color: var(--text-hi);
    border: 1px solid var(--border-subtle);
    height: 52px;
    border-radius: var(--r-pill);
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    text-decoration: none;
    transition: border-color var(--dur-fast), background var(--dur-fast);
}
.esim-secondary:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

/* Data-usage block */
.esim-usage {
    margin-bottom: 14px;
    padding: 12px 14px;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
}
.esim-usage-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.esim-usage-label {
    font-family: var(--font-grotesk);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-mute);
    font-weight: 700;
}
.esim-usage-value {
    font-family: var(--font-grotesk);
    font-size: 14px;
    color: var(--text-hi);
}
.esim-usage-value strong { font-weight: 600; }

.esim-usage-bar {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--bg-elev-1, rgba(255,255,255,0.04));
    overflow: hidden;
    border: 1px solid var(--border-subtle);
}
.esim-usage-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
    transition: width 0.4s cubic-bezier(.2,.7,.2,1);
}
.esim-usage-bar-fill.is-warning { background: #FFD27A; }
.esim-usage-bar-fill.is-danger  { background: #FFA0A0; }

/* Activation timeline */
.esim-timeline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-bottom: 14px;
    font-size: 12px;
    color: var(--text-mute);
}
.esim-timeline-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-grotesk);
    font-weight: 500;
}
.esim-timeline-item.is-done { color: #6FE3A2; }
.esim-timeline-item.is-pending { color: var(--text-mute); }
.esim-timeline-sep { opacity: 0.5; }

/* ICCID footer */
.esim-card-iccid {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
}
.esim-card-iccid-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.esim-card-iccid-body { display: flex; flex-direction: column; min-width: 0; }
.esim-card-iccid-label {
    font-family: var(--font-grotesk);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-mute);
}
.esim-card-iccid-value {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text);
    word-break: break-all;
}

.esim-card-iccid-copy {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-mute);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.esim-card-iccid-copy:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}
.esim-card-iccid-copy.is-copied {
    color: #6FE3A2;
    border-color: rgba(85,200,130,0.45);
    background: rgba(85,200,130,0.12);
}

@media (max-width: 540px) {
    .esim-card { padding: 18px 16px; border-radius: 16px; }
    .esim-card-head { grid-template-columns: 40px 1fr; gap: 10px; }
    .esim-card-flag { width: 40px; height: 40px; }
    .esim-card-status {
        grid-column: 1 / -1;
        justify-self: flex-start;
        margin-top: 4px;
    }
    .esim-card-title { font-size: 17px; }
}

/* eSIM detail — QR + install steps two-column + info-grid below */
.esim-detail-grid {
    display: grid;
    grid-template-columns: minmax(320px, 380px) 1fr;
    gap: var(--s-4);
    margin-bottom: var(--s-4);
    align-items: start;
}
@media (max-width: 760px) { .esim-detail-grid { grid-template-columns: 1fr; } }

.esim-detail-qr-card,
.esim-detail-steps-card {
    background: var(--bg-elev-1, #14171c);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: var(--s-5);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px -16px rgba(0,0,0,0.4);
}

.esim-detail-qr-head {
    margin-bottom: var(--s-4);
}
.esim-detail-qr-eyebrow {
    font-family: var(--font-grotesk);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    font-weight: 700;
}
.esim-detail-qr-head h2 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    color: var(--text-hi);
    margin: 6px 0 4px;
    line-height: 1.2;
}
.esim-detail-qr-head p {
    margin: 0;
    color: var(--text-mute);
    font-size: 13px;
    line-height: 1.5;
}

.esim-detail-qr {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--s-4);
}
.esim-detail-qr img {
    width: 100%;
    max-width: 280px;
    height: auto;
    display: block;
}

.esim-detail-manual {
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 14px;
}
.esim-detail-manual-label {
    font-family: var(--font-grotesk);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-mute);
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
}
.esim-detail-manual-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.esim-detail-manual-row input {
    flex: 1;
    background: var(--bg-elev-1, transparent);
    border: 1px solid var(--border-subtle);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 8px 12px;
    border-radius: 8px;
    width: 100%;
    min-width: 0;
}
.esim-detail-manual-row .btn { white-space: nowrap; }

/* Install steps list */
.esim-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.esim-steps li {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 14px;
    align-items: flex-start;
}
.esim-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent);
    font-family: var(--font-grotesk);
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.esim-steps li h3 {
    margin: 0 0 4px;
    color: var(--text-hi);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
}
.esim-steps li p {
    margin: 0;
    color: var(--text-mute);
    font-size: 13px;
    line-height: 1.55;
}

/* Bottom info-grid (eSIM info + Plan info) */
.esim-detail-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
    align-items: start;
}
@media (max-width: 760px) { .esim-detail-info-grid { grid-template-columns: 1fr; } }
.esim-detail-card-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    color: var(--text-hi);
    margin: 0 0 var(--s-3);
}

/* Our own simple modal mechanism — Bootstrap's modal-toggle dance
   conflicts with our LK layout (containing block from grid parents
   stops position:fixed from filling the viewport). Markup tagged with
   .mx-modal-root opens via .is-open class set by JS in mx-modal-init. */
.mx-modal-root {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.22s ease;
}
.mx-modal-root.is-open {
    display: flex;
    opacity: 1;
}
.mx-modal-root .modal-dialog {
    margin: 0 auto !important;
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    transform: translateY(20px) scale(0.98);
    transition: transform 0.28s cubic-bezier(.2,.7,.2,1);
    box-sizing: border-box;
}
.mx-modal-root.is-open .modal-dialog { transform: translateY(0) scale(1); }
.mx-modal-root .modal-content {
    background: var(--bg-elev-1, #14171c);
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    color: var(--text-hi);
    width: 100%;
    overflow: hidden;
}
.mx-modal-root .modal-dialog-scrollable .modal-content { max-height: 88vh; overflow-y: auto; }

body.mx-modal-open { overflow: hidden; }

/* Tame default bootstrap backdrop layer so we don't double-dim */
.modal-backdrop.fade,
.modal-backdrop.show { display: none !important; }

/* ====== eSIM INSTALL gate page ====== */
.esim-install-wrap {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.esim-install-hero {
    margin-bottom: var(--s-2);
}
.esim-install-hero h2 {
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 500;
    color: var(--text-hi);
    margin: 0 0 6px;
    letter-spacing: -0.015em;
    line-height: 1.1;
}
.esim-install-hero p {
    color: var(--text-mute);
    font-size: 14px;
    margin: 0;
}

.esim-install-card {
    background: var(--bg-elev-1, #14171c);
    border-radius: 18px;
}
.esim-install-card-title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 500;
    color: var(--text-hi);
    margin: 0 0 var(--s-4);
}
.esim-install-card-sub {
    margin: -10px 0 var(--s-3);
    color: var(--text-mute);
    font-size: 13px;
}

.esim-tips {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s-4);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.esim-tips li {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 14px;
    align-items: center;
    color: var(--text);
    font-size: 14px;
    line-height: 1.45;
}
.esim-tip-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
}
.esim-tip-icon svg { width: 16px; height: 16px; }
.esim-tip-icon.is-warning { color: #FFD27A; background: rgba(255,200,80,0.10); border-color: rgba(255,200,80,0.30); }
.esim-tip-icon.is-success { color: #6FE3A2; background: rgba(85,200,130,0.10); border-color: rgba(85,200,130,0.30); }
.esim-tip-icon.is-info    { color: #8FB5FF; background: rgba(91,141,239,0.10); border-color: rgba(91,141,239,0.30); }
.esim-tip-icon.is-accent  { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }

.esim-install-compat-btn {
    height: 36px;
    padding: 0 14px;
    border-radius: var(--r-pill);
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-mute);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--dur-fast), color var(--dur-fast);
}
.esim-install-compat-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Platform radio row */
.esim-platform-radio {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: var(--s-4);
}
.esim-platform-opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color var(--dur-fast), background var(--dur-fast);
}
.esim-platform-opt:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.esim-platform-opt input { position: absolute; opacity: 0; pointer-events: none; }
.esim-platform-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border-default);
    flex: none;
    position: relative;
}
.esim-platform-opt:has(input:checked) .esim-platform-dot {
    border-color: var(--accent);
    background: var(--accent);
}
.esim-platform-opt:has(input:checked) .esim-platform-dot::after {
    content: "";
    position: absolute;
    inset: 4px;
    background: #fff;
    border-radius: 50%;
}
.esim-platform-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-hi);
    font-weight: 500;
    font-size: 14px;
}
.esim-platform-label svg { color: var(--text-mute); }
.esim-platform-opt:has(input:checked) .esim-platform-label svg { color: var(--accent); }

.esim-install-cta {
    width: 100%;
    height: 56px;
    background: #fff;
    color: #1a1a1a;
    border: none;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.esim-install-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.28);
    color: #1a1a1a;
}

/* ====== eSIM Compatibility modal ====== */
.esim-compat-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--dur-fast), color var(--dur-fast);
}
.esim-compat-close:hover { border-color: var(--accent); color: var(--accent); }

.esim-compat-search {
    position: relative;
    margin-bottom: var(--s-3);
}
.esim-compat-search svg {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-mute);
}
.esim-compat-search input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 40px;
    border-radius: var(--r-pill);
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    color: var(--text-hi);
    font-family: var(--font-body);
    font-size: 14px;
    outline: none;
}
.esim-compat-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.esim-compat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    margin-bottom: var(--s-3);
}
.esim-compat-tab {
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--text-mute);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--r-pill);
    transition: background var(--dur-fast), color var(--dur-fast);
    white-space: nowrap;
}
.esim-compat-tab:hover { color: var(--text-hi); }
.esim-compat-tab.is-active { background: var(--bg-elev-1, rgba(255,255,255,0.06)); color: var(--text-hi); }

.esim-compat-section {
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    margin-bottom: 8px;
    overflow: hidden;
}
.esim-compat-section summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 18px;
    color: var(--text-hi);
    font-weight: 600;
    font-size: 14px;
    position: relative;
    padding-right: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background var(--dur-fast);
}
.esim-compat-section summary:hover { background: var(--bg-elev-1, rgba(255,255,255,0.04)); }
.esim-compat-brand-label { flex: 1; min-width: 0; }
.esim-compat-brand-icon {
    flex: none;
    width: 20px;
    height: 20px;
    background-color: var(--text-mute);
    mask-image: var(--brand-icon);
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--brand-icon);
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    transition: background-color var(--dur-fast);
}
.esim-compat-section[open] .esim-compat-brand-icon,
.esim-compat-section summary:hover .esim-compat-brand-icon {
    background-color: var(--accent);
}
.esim-compat-section summary::-webkit-details-marker { display: none; }
.esim-compat-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--bg-elev-2, rgba(255,255,255,0.06));
    border: 1px solid var(--border-subtle);
    font-family: var(--font-grotesk, var(--font-display));
    font-size: 11px;
    font-weight: 600;
    color: var(--text-mute);
    letter-spacing: 0.04em;
}
.esim-compat-section[open] .esim-compat-count {
    background: var(--accent-soft);
    border-color: transparent;
    color: var(--accent);
}
.esim-compat-footnote {
    margin: 14px 2px 4px;
    padding: 12px 14px;
    background: var(--bg-elev-1, rgba(255,255,255,0.04));
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    color: var(--text-mute);
    font-size: 12px;
    line-height: 1.55;
}
.esim-compat-section summary::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-mute);
    border-bottom: 2px solid var(--text-mute);
    transform: translateY(-65%) rotate(45deg);
    transition: transform var(--dur-fast);
}
.esim-compat-section[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.esim-compat-list {
    list-style: none;
    padding: 0 18px 14px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
}
.esim-compat-device {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    color: var(--text);
    font-size: 13px;
    border-bottom: 1px solid var(--border-subtle);
}
.esim-compat-device:last-child { border-bottom: none; }
.esim-compat-device svg { flex: none; }

/* ====== Install modal heading inside ====== */
.esim-install-modal-h3 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-hi);
    margin: 0 0 var(--s-3);
}

/* VN detail — SMS message bubbles */
.vn-sms-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vn-sms {
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 14px 16px;
    transition: border-color var(--dur-fast);
}
.vn-sms:hover { border-color: var(--border-default); }

.vn-sms-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: 8px;
}

.vn-sms-from {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-mute);
    font-size: 12px;
    font-family: var(--font-mono);
}
.vn-sms-from span { color: var(--text-hi); font-weight: 500; }

.vn-sms-time {
    color: var(--text-mute);
    font-size: 12px;
    font-family: var(--font-mono);
}

.vn-sms-text {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.vn-sms-otp {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-subtle);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.vn-sms-otp-label {
    font-family: var(--font-grotesk);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-mute);
    font-weight: 700;
}

.vn-sms-otp-code {
    font-family: var(--font-grotesk);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 4px 12px;
    border-radius: 8px;
    border: 1px solid var(--accent);
}

/* ----- Light theme adjustments for the dashboard surfaces ----- */
html[data-theme="light"] .dash-side,
html[data-theme="light"] .dash-card,
html[data-theme="light"] .dash-stat,
html[data-theme="light"] .dash-detail-hero {
    background: #ffffff;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        0 8px 24px -16px rgba(20,18,12,0.18);
}
html[data-theme="light"] .dash-list-row,
html[data-theme="light"] .dash-pagination > *,
html[data-theme="light"] .dash-tabs {
    background: #ffffff;
}
html[data-theme="light"] .dash-table tbody tr:hover td {
    background: rgba(232,112,42,0.04);
}

/* ============================================================
   USER DASHBOARD CONTENT — stats grid, cards, tables, notices
   ============================================================ */
.dash-head {
    margin-bottom: var(--s-5);
}
.dash-head h1 {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.4vw, 30px);
    font-weight: 500;
    color: var(--text-hi);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}
.dash-head p {
    margin: 0;
    color: var(--text-mute);
    font-size: 14px;
}

.dash-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: var(--s-5);
}
@media (max-width: 720px) { .dash-stats { grid-template-columns: repeat(2, 1fr); } }

.dash-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    background: var(--bg-elev-1, #14171c);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    color: var(--text-hi);
    text-decoration: none;
    transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.dash-stat:hover { border-color: var(--accent); transform: translateY(-1px); }
.dash-stat.is-accent { border-color: rgba(255, 163, 98, 0.4); }
.dash-stat.is-success .dash-stat-value { color: #6FE3A2; }
.dash-stat.is-muted .dash-stat-value { color: var(--text-mute); }
.dash-stat.is-accent .dash-stat-value { color: var(--accent); }

.dash-stat-label {
    font-family: var(--font-grotesk);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-mute);
}
.dash-stat-value {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
}

.dash-card {
    background: var(--bg-elev-1, #14171c);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: var(--s-5);
}

.dash-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}
.dash-card-head h2 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    color: var(--text-hi);
    margin: 0;
    line-height: 1.2;
}

.dash-table-wrap {
    overflow-x: auto;
    margin: 0 calc(-1 * var(--s-2));
}

.dash-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.dash-table thead th {
    text-align: left;
    padding: 10px 12px;
    font-family: var(--font-grotesk);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-mute);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}
.dash-table tbody td {
    padding: 14px 12px;
    color: var(--text);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: top;
}
.dash-table tbody tr:last-child td { border-bottom: none; }
.dash-table tbody tr:hover td { background: var(--bg-page); }

.dash-trx-id {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-hi);
    font-weight: 600;
}

.dash-table-sub {
    color: var(--text-mute);
    font-size: 12px;
    font-family: var(--font-mono);
    margin-top: 2px;
}

.dash-amount.is-positive { color: #6FE3A2; font-weight: 600; }
.dash-amount.is-negative { color: #FFA0A0; font-weight: 600; }

.dash-table-empty {
    text-align: center;
    padding: 32px 0 !important;
    color: var(--text-mute);
}

.dash-notice {
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: var(--s-4);
    border: 1px solid var(--border-subtle);
}
.dash-notice strong { display: block; color: var(--text-hi); margin-bottom: 2px; font-size: 14px; }
.dash-notice p { margin: 0; color: var(--text); font-size: 13px; line-height: 1.5; }
.dash-notice a { color: var(--accent); font-weight: 500; }
.dash-notice.is-danger { border-color: rgba(255,110,110,0.4); background: rgba(255,110,110,0.08); }
.dash-notice.is-info { border-color: rgba(91,141,239,0.4); background: rgba(91,141,239,0.08); }
.dash-notice.is-warning { border-color: rgba(255,200,80,0.4); background: rgba(255,200,80,0.08); }
.dash-notice.is-success { border-color: rgba(85,200,130,0.4); background: rgba(85,200,130,0.08); }

/* Native <dialog> styled to match dash cards */
.dash-dialog {
    width: min(560px, 92vw);
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    background: var(--bg-surface);
    color: var(--text);
    box-shadow: 0 28px 70px rgba(0,0,0,.55);
}
.dash-dialog::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(4px); }
.dash-dialog form { margin: 0; }
.dash-dialog-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
}
.dash-dialog-head h3 {
    font-family: var(--font-display);
    font-size: 16px; font-weight: 500; color: var(--text-hi);
    margin: 0;
}
.dash-dialog-close {
    background: transparent; border: none; color: var(--text-mute);
    cursor: pointer; padding: 4px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
}
.dash-dialog-close:hover { color: var(--text-hi); background: var(--bg-page); }
.dash-dialog-body { padding: 18px 20px; max-height: 60vh; overflow: auto; }
.dash-dialog-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-subtle);
}

/* eSIM top-up modal (Add more data) */
.esim-topup-dialog { width: min(640px, 94vw); }
.esim-topup-dialog .dash-dialog-body { max-height: 70vh; }
.esim-topup-balance {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    color: var(--text-mute);
    font-size: 13px;
    margin-bottom: var(--s-4);
}
.esim-topup-balance strong { color: var(--text-hi); font-family: var(--font-mono); font-size: 15px; }
.esim-topup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}
.esim-topup-card {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-page);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, background .15s, transform .15s;
}
.esim-topup-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.esim-topup-card.is-selected {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.esim-topup-card-spec { display: flex; flex-direction: column; gap: 2px; }
.esim-topup-card-data { color: var(--text-hi); font-weight: 600; font-size: 14px; }
.esim-topup-card-period { color: var(--text-mute); font-size: 12px; font-family: var(--font-mono); }
.esim-topup-card-price { color: var(--text-hi); font-weight: 600; font-family: var(--font-mono); font-size: 15px; }
.esim-topup-card.is-selected .esim-topup-card-price { color: var(--accent); }
.esim-topup-foot-meta { color: var(--text-mute); font-size: 12px; flex: 1; }
.esim-topup-feedback {
    margin-top: var(--s-3);
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-page);
}
.esim-topup-feedback.is-success { color: #6FE3A2; border-color: rgba(85,200,130,0.4); background: rgba(85,200,130,0.08); }
.esim-topup-feedback.is-error   { color: #FFA0A0; border-color: rgba(255,110,110,0.4); background: rgba(255,110,110,0.08); }
.esim-topup-feedback.is-warning { color: #FFD27A; border-color: rgba(255,200,80,0.4); background: rgba(255,200,80,0.08); }
.esim-topup-dialog .dash-dialog-foot { gap: 12px; align-items: center; }
@media (max-width: 480px) {
    .esim-topup-grid { grid-template-columns: 1fr; }
}

/* Referral hero card — single big number + supporting stats */
.dash-share {
    display: flex;
    gap: 6px;
    align-items: stretch;
}
.dash-share input {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 13px;
}

/* Virtual Numbers — recurring cost summary above the list */
.vn-summary {
    display: flex; align-items: center; gap: var(--s-4);
    padding: 18px 24px;
    margin-bottom: var(--s-4);
    border-radius: 16px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-elev-1, #14171c);
}
.vn-summary.is-warning { border-color: rgba(255, 200, 80, 0.45); background: rgba(255, 200, 80, 0.04); }
.vn-summary-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vn-summary-label {
    color: var(--text-mute); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500;
}
.vn-summary-value {
    color: var(--text-hi);
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 600;
}
.vn-summary-hint { color: var(--text-mute); font-size: 12px; }
.vn-summary-divider {
    width: 1px; height: 44px; background: var(--border-subtle);
    flex: none;
}
.vn-summary .btn { margin-left: auto; flex: none; }

@media (max-width: 640px) {
    .vn-summary { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
    .vn-summary-divider { width: 100%; height: 1px; }
    .vn-summary .btn { margin-left: 0; width: 100%; justify-content: center; }
}

/* Purchase History — Plans tab card grid */
.purchase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--s-3);
}
.purchase-card {
    border-radius: 16px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.purchase-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.purchase-flag {
    width: 40px; height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
}
.purchase-flag img { width: 100%; height: 100%; object-fit: cover; }
.purchase-flag.is-globe { color: var(--accent); }
.purchase-flag.is-globe svg { width: 22px; height: 22px; }
.purchase-card-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-hi);
    line-height: 1.2;
}
.purchase-card-meta {
    color: var(--text-mute);
    font-size: 12px;
    margin-top: 2px;
    font-family: var(--font-mono);
}
.purchase-card-rows {
    display: flex; flex-direction: column;
    border-top: 1px solid var(--border-subtle);
    padding-top: 14px;
    gap: 10px;
}
.purchase-card-row {
    display: flex; align-items: center; justify-content: space-between;
    color: var(--text);
    font-size: 13px;
}
.purchase-card-row > span:first-child {
    color: var(--text-mute);
    display: inline-flex; align-items: center;
}
.purchase-card-foot { display: flex; justify-content: stretch; }
.purchase-card-foot .btn { width: 100%; justify-content: center; }

/* Balance tab — vertical list of wallet movements */
.purchase-balance-list { display: flex; flex-direction: column; }
.purchase-balance-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-subtle);
}
.purchase-balance-row:last-child { border-bottom: none; }
.purchase-balance-body {
    display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.purchase-balance-title {
    color: var(--text-hi);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.purchase-balance-meta {
    color: var(--text-mute);
    font-size: 12px;
}
.purchase-balance-end {
    display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
    flex: none;
}
.purchase-balance-amount {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 600;
}
.purchase-balance-amount.is-positive { color: #6FE3A2; }
.purchase-balance-amount.is-negative { color: #FFA0A0; }
.purchase-balance-time {
    color: var(--text-mute);
    font-size: 11px;
    font-family: var(--font-mono);
}

@media (max-width: 480px) {
    .purchase-grid { grid-template-columns: 1fr; }
    .purchase-balance-row { padding: 12px 14px; }
}

/* Bootstrap-compatible form inside dash-card (e.g. viser-form output) */
.dash-form-bootstrap .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: 0; }
.dash-form-bootstrap .row > [class*="col-"] { padding: 0; max-width: 100%; flex: none; width: auto; }
.dash-form-bootstrap .row > .col-md-12,
.dash-form-bootstrap .row > .col-sm-12,
.dash-form-bootstrap .row > .col-12 { grid-column: 1 / -1; }
@media (max-width: 640px) {
    .dash-form-bootstrap .row { grid-template-columns: 1fr; }
}
.dash-form-bootstrap .form-group { margin-bottom: 0; display: flex; flex-direction: column; gap: 6px; }
.dash-form-bootstrap .form-label,
.dash-form-bootstrap .form--label {
    color: var(--text-mute);
    font-size: 12px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.04em;
    margin: 0;
}
.dash-form-bootstrap .form-control,
.dash-form-bootstrap .form--control,
.dash-form-bootstrap .form-select {
    width: 100%;
    height: 42px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-page);
    color: var(--text-hi);
    font-size: 14px;
    font-family: var(--font-body);
}
.dash-form-bootstrap textarea.form-control,
.dash-form-bootstrap textarea.form--control {
    height: auto;
    min-height: 100px;
    padding: 12px 14px;
    resize: vertical;
}
.dash-form-bootstrap .form-control:focus,
.dash-form-bootstrap .form--control:focus,
.dash-form-bootstrap .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}
.dash-form-bootstrap .input-group { display: flex; gap: 6px; }
.dash-form-bootstrap .input-group-text {
    display: inline-flex; align-items: center;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-page);
    color: var(--text-mute);
    font-size: 13px;
}
.dash-form-bootstrap .form-check {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-page);
    cursor: pointer;
}
.dash-form-bootstrap .form-check:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}
.dash-form-bootstrap .form-check .form-check-input { margin: 0; accent-color: var(--accent); }
.dash-form-bootstrap .form-check .form-check-label { margin: 0; color: inherit; font-size: 13px; cursor: pointer; }
.dash-form-bootstrap .text--danger { color: #FFA0A0; font-size: 12px; }
.dash-form-bootstrap pre.text--base {
    background: transparent; padding: 0; margin: 0;
    font-family: var(--font-mono); font-size: 11px;
    color: var(--text-mute);
}
.dash-form-bootstrap .select2-container--default .select2-selection--single {
    height: 42px; border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-page);
}
.dash-form-bootstrap .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px; padding-left: 14px; color: var(--text-hi);
}
.dash-form-bootstrap .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }
.dash-form-bootstrap .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--text-mute); }
.dash-form-bootstrap input[type="file"].form-control,
.dash-form-bootstrap input[type="file"].form--control {
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-mute);
}

/* Support thread — chat-like reply list */
.dash-thread { display: flex; flex-direction: column; gap: 14px; }
.dash-thread-msg {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-page);
}
.dash-thread-msg.is-staff {
    border-color: rgba(255, 163, 98, 0.35);
    background: rgba(255, 163, 98, 0.05);
}
.dash-thread-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 600; font-size: 14px;
    color: var(--text-hi);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
}
.dash-thread-msg.is-staff .dash-thread-avatar {
    background: var(--accent-soft); color: var(--accent);
    border-color: rgba(255, 163, 98, 0.4);
}
.dash-thread-body { min-width: 0; }
.dash-thread-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px; margin-bottom: 6px;
}
.dash-thread-name { color: var(--text-hi); font-weight: 600; font-size: 14px; }
.dash-thread-role { color: var(--accent); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.dash-thread-time { color: var(--text-mute); font-size: 11px; }
.dash-thread-text { color: var(--text); font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; margin: 0; }
.dash-thread-files {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
}
.dash-thread-files a {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--bg-surface); border: 1px solid var(--border-subtle);
    color: var(--accent); font-size: 12px; text-decoration: none;
}
.dash-thread-files a:hover { border-color: var(--accent); }

/* Compact file picker chip for attachment lists */
.dash-file-chip {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px dashed var(--border-subtle);
    background: var(--bg-page);
}
.dash-file-chip input[type="file"] {
    flex: 1; min-width: 0; font-size: 12px; color: var(--text-mute);
    background: transparent !important; border: none !important; padding: 0 !important;
}
.dash-file-chip button {
    background: transparent; border: none; cursor: pointer;
    color: #FFA0A0; padding: 2px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
}
.dash-file-chip button:hover { background: rgba(255,110,110,0.12); }

/* Payment gateway picker — radio grid with logo */
.gateway-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.gateway-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px;
    padding: 16px 10px;
    border-radius: 14px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-page);
    cursor: pointer;
    transition: border-color .15s, transform .15s, background .15s;
}
.gateway-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.gateway-card input { position: absolute; opacity: 0; pointer-events: none; }
.gateway-card img { width: 56px; height: 38px; object-fit: contain; }
.gateway-card-name { color: var(--text); font-size: 13px; font-weight: 500; text-align: center; }
.gateway-card-check {
    position: absolute; top: 8px; right: 8px;
    width: 18px; height: 18px; border-radius: 50%;
    border: 1.5px solid var(--border-subtle);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-surface);
}
.gateway-card input:checked ~ .gateway-card-check {
    border-color: var(--accent); background: var(--accent);
}
.gateway-card input:checked ~ .gateway-card-check::after {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff;
}
.gateway-card:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.gateway-toggle-more {
    width: 100%;
    padding: 10px;
    border-radius: 12px;
    border: 1px dashed var(--border-subtle);
    background: transparent;
    color: var(--text-mute);
    font-size: 13px; font-weight: 500;
    cursor: pointer; margin-top: 10px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.gateway-toggle-more:hover { color: var(--accent); border-color: var(--accent); }

/* Deposit summary panel — sticky on desktop */
.deposit-summary {
    display: flex; flex-direction: column; gap: 14px;
}
.deposit-summary-row {
    display: flex; align-items: center; justify-content: space-between;
    color: var(--text); font-size: 14px;
}
.deposit-summary-row.is-total {
    padding-top: 12px; margin-top: 4px;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-hi); font-weight: 600; font-size: 16px;
}
.deposit-summary-row .label { color: var(--text-mute); display: inline-flex; align-items: center; gap: 4px; }

/* ============================================================
   AUTH PAGES — login / register / forgot password
   ============================================================ */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-6) var(--gutter, 24px);
    position: relative;
    box-sizing: border-box;
}
.auth-wrap *, .auth-wrap *::before, .auth-wrap *::after { box-sizing: border-box; }
.auth-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(255, 163, 98, 0.08), transparent 65%);
}

.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    background: var(--bg-elev-1, #14171c);
    border: 1px solid var(--border-subtle);
    border-radius: 24px;
    padding: clamp(24px, 4vw, 36px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 32px 80px -32px rgba(0, 0, 0, 0.6);
}

.auth-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text-hi);
    text-decoration: none;
    margin-bottom: var(--s-5);
}

.auth-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 30px);
    font-weight: 500;
    color: var(--text-hi);
    margin: 0 0 8px;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.auth-sub {
    margin: 0 0 var(--s-5);
    color: var(--text-mute);
    font-size: 14px;
    line-height: 1.5;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field label {
    font-family: var(--font-grotesk);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-mute);
    font-weight: 600;
}
.auth-field .input { height: 48px; }

.auth-password { position: relative; }
.auth-password .input { padding-right: 44px; }
.auth-password-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: var(--text-mute);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: color var(--dur-fast), background var(--dur-fast);
}
.auth-password-toggle:hover { color: var(--text-hi); background: rgba(255,255,255,0.04); }

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    font-size: 13px;
}
.auth-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}
.auth-check input {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.auth-link { color: var(--accent); text-decoration: none; font-weight: 500; }
.auth-link:hover { text-decoration: underline; }

.auth-submit { width: 100%; justify-content: center; }

.auth-foot {
    margin: var(--s-5) 0 0;
    text-align: center;
    color: var(--text-mute);
    font-size: 14px;
}
.auth-foot a {
    color: var(--accent);
    font-weight: 500;
    text-decoration: none;
    margin-left: 4px;
}
.auth-foot a:hover { text-decoration: underline; }

/* Legacy markup that might bleed in from social_login or other partials */
.auth-card .account-section,
.auth-card .account-left,
.auth-card .account-content,
.auth-card .account-form,
.auth-card .account-heading { all: unset; display: contents; }

@media (max-width: 540px) {
    .auth-card { padding: 22px 18px; border-radius: 18px; }
    .auth-title { font-size: 22px; }
}

/* ============================================================
   HERO FINDER CHIPS — top-6 destinations under the search input
   ============================================================ */
.finder-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--s-3);
}

.finder-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 8px;
    border-radius: var(--r-pill);
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.finder-chip:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--text-hi);
    transform: translateY(-1px);
}
.finder-chip img {
    width: 22px;
    height: 16px;
    border-radius: 3px;
    object-fit: cover;
}

/* ============================================================
   HOME TEASE LINKS — small redirector pills to /savings & /compatibility
   ============================================================ */
.home-tease-link {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 18px 22px;
    border-radius: var(--r-md);
    background: var(--bg-elev-1, #14171c);
    border: 1px solid var(--border-subtle);
    color: var(--text-hi);
    text-decoration: none;
    margin-bottom: 10px;
    transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.home-tease-link:last-child { margin-bottom: 0; }
.home-tease-link:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.home-tease-link-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.home-tease-link-eyebrow {
    font-family: var(--font-grotesk);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-mute);
    font-weight: 600;
}
.home-tease-link-title {
    color: var(--text-hi);
    font-size: 15px;
    font-weight: 500;
}
.home-tease-link svg { color: var(--accent); flex: none; }

/* ============================================================
   VIRTUAL NUMBERS LANDING — service icons + benefits grid + FAQ
   ============================================================ */

/* Service circle icon (WhatsApp/Telegram/etc) — colored bg, white glyph */
.vn-service-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.vn-service-icon svg {
    width: 22px;
    height: 22px;
    color: #fff;
}
/* When using service-icon, the grid template's first column is 40 — overshoot OK */
.popular-row:has(.vn-service-icon) {
    grid-template-columns: 44px 1fr auto;
}

/* Benefits — 3-card grid inside .popular-card */
.vn-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 720px) {
    .vn-benefits-grid { grid-template-columns: 1fr; }
}

.vn-benefit {
    padding: var(--s-4);
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vn-benefit-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.vn-benefit-icon svg { width: 22px; height: 22px; }
.vn-benefit h3 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
    color: var(--text-hi);
    margin: 0;
    line-height: 1.25;
}
.vn-benefit p {
    margin: 0;
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
}

/* FAQ — minimal native <details> styling */
.vn-faq {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vn-faq-item {
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--bg-page);
    overflow: hidden;
    transition: border-color var(--dur-fast);
}
.vn-faq-item[open] { border-color: var(--accent); }
.vn-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 20px;
    font-weight: 500;
    color: var(--text-hi);
    font-size: 15px;
    position: relative;
    padding-right: 44px;
    transition: color var(--dur-fast);
}
.vn-faq-item summary::-webkit-details-marker { display: none; }
.vn-faq-item summary::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--text-mute);
    border-bottom: 2px solid var(--text-mute);
    transform: translateY(-65%) rotate(45deg);
    transition: transform var(--dur-fast);
}
.vn-faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.vn-faq-item p {
    margin: 0;
    padding: 0 20px 18px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.55;
}

/* ============================================================
   VIRTUAL NUMBER ROWS — reuse .plan-row layout but show feature pills
   under the phone number instead of GB / days.
   ============================================================ */
.vn-row-number {
    font-family: var(--font-grotesk);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-hi);
    letter-spacing: 0.02em;
    line-height: 1.15;
    word-break: break-all;
}

.vn-row-features {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.vn-feat {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    font-family: var(--font-grotesk);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    border: 1px solid var(--border-subtle);
    background: var(--bg-page);
    color: var(--text);
}

.vn-feat-voice-in,
.vn-feat-sms-in {
    border-color: rgba(85, 200, 130, 0.35);
    background: rgba(85, 200, 130, 0.12);
    color: #6FE3A2;
}
.vn-feat-voice-out,
.vn-feat-sms-out {
    border-color: rgba(91, 141, 239, 0.35);
    background: rgba(91, 141, 239, 0.12);
    color: #8FB5FF;
}
.vn-feat-t38 {
    border-color: var(--border-default);
    background: var(--bg-elev-1);
    color: var(--text-mute);
}
.vn-feat-emergency {
    border-color: rgba(255, 110, 110, 0.35);
    background: rgba(255, 110, 110, 0.12);
    color: #FFA0A0;
}

/* ============================================================
   RECOMMENDATIONS PANEL — "Also recommended for eSIM X"
   Glow-framed card with global eSIM + best region + nearby countries
   ============================================================ */
.recommend-card {
    position: relative;
    border-radius: var(--r-xl, 24px);
    background:
        radial-gradient(ellipse 80% 60% at 50% -10%, rgba(255, 163, 98, 0.10), transparent 70%),
        var(--bg-elev-1, #14171c);
    border: 1px solid rgba(255, 163, 98, 0.18);
    padding: clamp(20px, 3vw, 32px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 24px 60px -24px rgba(0, 0, 0, 0.55);
}
.recommend-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 163, 98, 0.06);
}

.recommend-card-title {
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 500;
    color: var(--text-hi);
    margin: 0 0 var(--s-4);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.recommend-hero {
    grid-column: 1 / -1;
    margin-bottom: var(--s-3);
}
.recommend-hero .popular-row-photo-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.recommend-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 640px) { .recommend-grid { grid-template-columns: 1fr; } }

.recommend-all {
    display: block;
    margin-top: var(--s-4);
    padding: 14px 20px;
    text-align: center;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-pill);
    color: var(--text-hi);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: border-color var(--dur-fast), background var(--dur-fast);
}
.recommend-all:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ============================================================
   PLAN DETAILS / ABOUT TABS (country & region plan pages)
   ============================================================ */
.plan-info {
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--border-subtle);
}

.plan-info-tabs {
    display: inline-flex;
    gap: 4px;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-pill);
    padding: 4px;
    margin-bottom: var(--s-4);
}

.plan-info-tab {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text-mute);
    padding: 8px 18px;
    border-radius: var(--r-pill);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.plan-info-tab:hover { color: var(--text-hi); }
.plan-info-tab.is-active {
    background: var(--bg-elev-1);
    color: var(--text-hi);
}

.plan-info-panel { min-height: 80px; }

.plan-info-coverage {
    display: grid;
    grid-template-columns: 40px 1fr 16px;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.plan-info-coverage:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.plan-info-coverage-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.plan-info-coverage-icon svg { width: 20px; height: 20px; }

.plan-info-coverage-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.plan-info-coverage-label {
    font-family: var(--font-grotesk);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-mute);
    font-weight: 600;
}
.plan-info-coverage-value {
    color: var(--text-hi);
    font-size: 15px;
    font-weight: 500;
}
.plan-info-coverage-arrow { color: var(--text-dim); }

.plan-info-about p {
    margin: 0 0 var(--s-3);
    color: var(--text);
    font-size: 14px;
    line-height: 1.55;
}
.plan-info-about p:last-child { margin-bottom: 0; }

.plan-info-foot {
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--border-subtle);
    font-size: 14px;
    color: var(--text);
}
.plan-info-foot a {
    color: var(--accent);
    text-decoration: none;
    margin-left: 4px;
    font-weight: 600;
}
.plan-info-foot a:hover { text-decoration: underline; }

/* ============================================================
   COVERAGE LINK CHIP — clickable "N countries" in region rows
   ============================================================ */
.coverage-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: rgba(232, 112, 42, 0.35);
    text-underline-offset: 3px;
    transition: color var(--dur-fast), text-decoration-color var(--dur-fast);
    user-select: none;
}

.coverage-link:hover,
.coverage-link:focus-visible {
    color: var(--accent-hover, var(--accent));
    text-decoration-color: var(--accent);
    outline: none;
}

/* ============================================================
   COVERAGE MODAL
   ============================================================ */
body.mx-modal-open { overflow: hidden; }

.mx-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-4);
    opacity: 0;
    transition: opacity 0.22s ease;
}
.mx-modal.is-open { opacity: 1; }

.mx-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.mx-modal-card {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: min(86vh, 760px);
    display: flex;
    flex-direction: column;
    background: var(--bg-elev-1, #1a1a1a);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg, 18px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    padding: var(--s-5) var(--s-4) var(--s-4);
    transform: translateY(20px) scale(0.98);
    transition: transform 0.28s cubic-bezier(.2,.7,.2,1);
}
.mx-modal.is-open .mx-modal-card { transform: translateY(0) scale(1); }

.mx-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-elev-2, rgba(255,255,255,0.08));
    color: var(--text);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast);
}
.mx-modal-close:hover { background: var(--bg-elev-3, rgba(255,255,255,0.15)); }

.mx-modal-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    margin: 0 0 var(--s-4);
    color: var(--text-hi);
    line-height: 1.2;
    padding: 0 36px;
}

.mx-modal-search {
    position: relative;
    margin-bottom: var(--s-3);
}
.mx-modal-search svg {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
}
.mx-modal-search input {
    width: 100%;
    height: 48px;
    padding: 0 16px 0 44px;
    border-radius: var(--r-pill);
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    outline: none;
    transition: border-color var(--dur-fast);
}
.mx-modal-search input:focus { border-color: var(--accent); }

.mx-modal-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: rgba(91, 141, 239, 0.08);
    border: 1px solid rgba(91, 141, 239, 0.2);
    margin-bottom: var(--s-3);
}
.mx-modal-info-icon {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mx-modal-info p {
    margin: 0;
    color: var(--text);
    font-size: 13px;
    line-height: 1.4;
}

.mx-modal-list {
    list-style: none;
    margin: 0;
    padding: 4px 4px 4px 0;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
}
.mx-modal-list::-webkit-scrollbar { width: 6px; }
.mx-modal-list::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 3px; }

.mx-modal-row { margin: 0; padding: 0; list-style: none; }

.mx-modal-row-link {
    display: grid;
    grid-template-columns: 36px 1fr 16px;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-pill);
    color: var(--text-hi);
    text-decoration: none;
    transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.mx-modal-row-link:hover {
    border-color: var(--accent);
    transform: translateX(2px);
}

.mx-modal-row-flag {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.mx-modal-row-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mx-modal-row-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-hi);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mx-modal-row-arrow { color: var(--text-dim); flex: none; }

/* Expandable variant — country with operators visible below */
.mx-modal-row-expandable { display: block; }
.mx-modal-row-toggle {
    display: grid;
    grid-template-columns: 36px 1fr 16px;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-pill);
    color: var(--text-hi);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    font-size: 15px;
    transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.mx-modal-row-toggle:hover { border-color: var(--accent); transform: translateX(2px); }
.mx-modal-row-expandable.is-open .mx-modal-row-toggle {
    border-color: var(--accent);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.mx-modal-row-arrow-down { transition: transform var(--dur-fast); }
.mx-modal-row-expandable.is-open .mx-modal-row-arrow-down { transform: rotate(180deg); }

.mx-modal-row-ops {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px 14px;
    margin-top: -1px;
    background: var(--bg-page);
    border: 1px solid var(--accent);
    border-top: 0;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.mx-modal-op {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
}
.mx-modal-op-name {
    color: var(--text);
    font-size: 14px;
    font-family: var(--font-body);
}
.mx-modal-op-net {
    font-family: var(--font-grotesk);
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: 0.04em;
}

.mx-modal-op-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: var(--accent);
    text-decoration: none;
    font-family: var(--font-grotesk);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.mx-modal-op-link:hover { color: var(--accent-hover, var(--accent)); }

.mx-modal-empty {
    text-align: center;
    padding: 24px 0;
    color: var(--text-mute);
    font-size: 14px;
}

@media (max-width: 540px) {
    .mx-modal-card {
        max-height: 92vh;
        padding: 20px 16px;
    }
    .mx-modal-title { font-size: 20px; }
}

/* ============================================================
   REGION ROW ICONS — silhouette glyph (44×32 panel matching flag)
   ============================================================ */
.popular-row-region-icon {
    width: 52px;
    height: 40px;
    border-radius: 8px;
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    color: var(--text-hi);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    padding: 4px;
}

.popular-row-region-icon svg {
    width: 22px;
    height: 22px;
    color: inherit;
}

/* Continent silhouettes — pre-rendered PNGs (white-on-transparent), recoloured to
   currentColor via CSS filter. Simple <img> approach: browser respects width/height,
   no overflow risk, no mask-image quirks. */
.popular-row-region-icon .region-map-png {
    display: block;
    /* Fill the inner padded box, keep aspect ratio, center via flex parent. */
    width: 100%;
    height: 100%;
    max-width: 44px;
    max-height: 32px;
    object-fit: contain;
    object-position: center;
    /* PNGs are pure white silhouettes on transparent. Filter dims them to match
       text color, then ember-tints on hover/bundle states. */
    opacity: 0.85;
    transition: opacity .15s, filter .15s;
}
.popular-row-region-icon:hover .region-map-png,
.popular-row.is-active .popular-row-region-icon .region-map-png {
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(70%) sepia(40%) saturate(800%) hue-rotate(355deg) brightness(100%) contrast(95%);
}

.popular-row-region-icon.is-bundle {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}
.popular-row-region-icon.is-bundle .region-map-png {
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(70%) sepia(40%) saturate(800%) hue-rotate(355deg) brightness(100%) contrast(95%);
}

/* Sub-section heading inside the popular-card */
.popular-section-head {
    margin: var(--s-5) 0 var(--s-3);
    padding-top: var(--s-4);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.popular-section-head h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    color: var(--text-hi);
    margin: 0;
    line-height: 1.2;
}

.popular-section-head span {
    font-size: 13px;
    color: var(--text-mute);
}

/* Compact 2-col country grid */
.popular-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.popular-row {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: var(--s-3);
    padding: 12px 16px;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    text-decoration: none;
    transition: border-color var(--dur-fast), transform var(--dur-fast);
}

.popular-row:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.popular-row-flag {
    /* Rounded-rectangle so the full flag is visible (no circular crop that
       eats e.g. UAE's red vertical stripe). Wider than tall, like a real flag. */
    width: 44px;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.popular-row-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.popular-row-flag.is-fallback {
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-grotesk);
    font-size: 11px;
    font-weight: 700;
    border-color: var(--accent);
    letter-spacing: 0.5px;
}

/* ============================================================
   POPULAR ROW · REGIONS / GLOBAL placeholder
   (Countries use plain .popular-row-flag — flag visible in full, no photos)
   ============================================================ */
.popular-row-photo-placeholder {
    width: 44px;
    height: 32px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.popular-row-photo-placeholder svg {
    width: 18px;
    height: 18px;
}

/* Grid column matches the new flag width */
.popular-row {
    grid-template-columns: 44px 1fr auto;
}

.popular-row-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.popular-row-name { color: var(--text-hi); font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.popular-row-price { color: var(--text-mute); font-size: 12px; font-family: var(--font-mono); }

.popular-row-arrow { color: var(--text-dim); transition: color var(--dur-fast), transform var(--dur-fast); }
.popular-row:hover .popular-row-arrow { color: var(--accent); transform: translateX(2px); }

.popular-row.is-hidden { display: none; }

.popular-foot {
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--border-subtle);
    text-align: center;
}

.popular-foot button {
    background: var(--bg-page);
    border: 1px solid var(--border-default);
    color: var(--text);
    padding: 12px 24px;
    border-radius: var(--r-pill);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    transition: border-color var(--dur-fast), color var(--dur-fast);
}

.popular-foot button:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 760px) {
    .popular-grid { grid-template-columns: 1fr; }
    .dest-v3-search input { height: 56px; padding: 0 20px 0 52px; font-size: 14px; }
}

/* ============================================================
   DESTINATION FEATURES · "Reliable eSIM with seamless coverage"
   ============================================================ */
.dest-features { padding-top: var(--s-7); padding-bottom: var(--s-7); }

.dest-features-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--s-6);
}

.dest-features-head .mx-eyebrow { justify-content: center; }
.dest-features-head h2 { margin: var(--s-2) 0; }
.dest-features-head .lede { color: var(--text-mute); }

.dest-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
}

.dest-feature {
    padding: var(--s-5);
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    transition: border-color var(--dur-fast), transform var(--dur-fast);
}

.dest-feature:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.dest-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    background: var(--accent-soft);
    color: var(--accent);
    margin-bottom: var(--s-3);
}

.dest-feature-icon svg {
    width: 22px;
    height: 22px;
}

.dest-feature h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    color: var(--text-hi);
    margin: 0 0 var(--s-2);
    letter-spacing: -0.01em;
}

.dest-feature p {
    color: var(--text-mute);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 900px) {
    .dest-features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .dest-features-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   COUNTRY PLANS PAGE
   ============================================================ */
.plans-page { padding: var(--s-6) 0 var(--s-9); }

.country-hero {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--s-5);
    align-items: center;
    padding: var(--s-5) 0;
    margin-bottom: var(--s-5);
    border-bottom: 1px solid var(--border-subtle);
}

.country-hero-flag {
    width: 96px;
    height: 72px;
    border-radius: var(--r-md);
    object-fit: cover;
    border: 1px solid var(--border-default);
    box-shadow: var(--elev-2);
}

.country-hero-flag-fallback {
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 28px;
    border-color: var(--accent);
}

.country-hero-text { min-width: 0; }

.country-hero-eyebrow {
    font-family: var(--font-grotesk);
    font-size: 11px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-weight: 600;
    margin-bottom: 4px;
}

.country-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.4vw, 44px);
    margin: 0 0 6px;
    color: var(--text-hi);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.country-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    font-family: var(--font-grotesk);
    font-size: 12px;
    color: var(--text-mute);
}

.country-hero-meta strong { color: var(--text-hi); font-weight: 600; }

.country-hero-back {
    align-self: flex-start;
    color: var(--text-mute);
    font-family: var(--font-grotesk);
    font-size: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.country-hero-back:hover { color: var(--text-hi); }

@media (max-width: 760px) {
    .country-hero {
        grid-template-columns: auto 1fr;
        gap: var(--s-3);
    }
    .country-hero-flag { width: 64px; height: 48px; }
    .country-hero-back { grid-column: 1 / -1; order: -1; margin-bottom: var(--s-2); }
}

/* Layout: plans + sticky summary */
.plans-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--s-5);
    align-items: start;
}

@media (max-width: 960px) {
    .plans-layout { grid-template-columns: 1fr; }
}

/* Plan filter chips (reuse filter-chip style) */
.plan-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: var(--s-4);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--border-subtle);
}

.plan-filters .filter-chip-count { color: var(--text-mute); }

.plan-empty {
    padding: var(--s-7);
    text-align: center;
    color: var(--text-mute);
    border: 1px dashed var(--border-default);
    border-radius: var(--r-md);
    background: var(--bg-page);
    font-family: var(--font-grotesk);
    font-size: 14px;
    display: none;
}

/* Sticky summary sidebar */
.plan-summary {
    position: sticky;
    top: 96px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    box-shadow: var(--elev-2);
}

.plan-summary-head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-4);
    border-bottom: 1px solid var(--border-subtle);
}

.plan-summary-head-flag {
    width: 40px;
    height: 30px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid var(--border-subtle);
}

.plan-summary-head-flag-fallback {
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 12px;
    border-color: var(--accent);
}

.plan-summary-head-text { min-width: 0; }

.plan-summary-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-hi);
    line-height: 1.3;
}

.plan-summary-sub {
    font-size: 12px;
    color: var(--text-mute);
    font-family: var(--font-grotesk);
}

.plan-summary-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: var(--s-4);
}

.plan-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px dashed var(--border-subtle);
    font-family: var(--font-grotesk);
    font-size: 13px;
}

.plan-summary-row:last-child { border-bottom: none; }

.plan-summary-row .label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-mute);
}

.plan-summary-row .label svg {
    width: 14px;
    height: 14px;
    color: var(--text-dim);
}

.plan-summary-row .value {
    color: var(--text-hi);
    font-weight: 500;
    font-family: var(--font-mono);
}

.plan-summary-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: var(--s-3) 0;
    margin: var(--s-3) 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.plan-summary-total .label {
    font-family: var(--font-grotesk);
    font-size: 12px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}

.plan-summary-total .value {
    font-family: var(--font-grotesk);
    font-size: 28px;
    color: var(--accent);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.plan-summary-btn {
    width: 100%;
    height: 52px;
    font-size: 15px;
}

.plan-summary-foot {
    margin-top: var(--s-3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    font-family: var(--font-grotesk);
    font-size: 10px;
    color: var(--text-mute);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-wrap: wrap;
}

.plan-summary-foot span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.plan-summary-foot svg { width: 10px; height: 10px; color: var(--accent); }

/* Plan grid: hide cards when filter doesn't match */
.plan.is-hidden { display: none; }

/* ============================================================
   PLAN PICKS (3 curated cards above the deduped grid)
   ============================================================ */
.plan-picks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
    margin-bottom: var(--s-5);
}

.plan-pick {
    position: relative;
    padding: var(--s-4);
    border-radius: var(--r-lg);
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    cursor: pointer;
    transition: border-color var(--dur-fast), transform var(--dur-fast);
}

.plan-pick:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.plan-pick-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-grotesk);
    font-size: 10px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-weight: 600;
}

.plan-pick-eyebrow svg { width: 12px; height: 12px; }

.plan-pick-title {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text-hi);
    font-weight: 500;
    margin: 0;
    line-height: 1.15;
}

.plan-pick-meta {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-mute);
}

.plan-pick-price {
    font-family: var(--font-grotesk);
    font-size: 24px;
    color: var(--accent);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-top: auto;
    padding-top: 8px;
}

.plan-pick-price .cur { font-size: 14px; color: var(--text-mute); font-weight: 500; margin-right: 1px; }

@media (max-width: 760px) { .plan-picks { grid-template-columns: 1fr; } }

/* Dedup-mode note on a plan card showing how many variants behind */
.plan-variants-note {
    position: absolute;
    top: 8px;
    right: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-mute);
    background: var(--bg-page);
    padding: 2px 8px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-subtle);
    letter-spacing: 0.02em;
}

/* Show-all toggle */
.plan-show-all {
    margin-top: var(--s-4);
    padding-top: var(--s-3);
    border-top: 1px dashed var(--border-subtle);
    text-align: center;
    font-family: var(--font-grotesk);
    font-size: 12px;
    color: var(--text-mute);
}

.plan-show-all button {
    background: transparent;
    border: 1px solid var(--border-default);
    color: var(--text);
    padding: 8px 16px;
    border-radius: var(--r-pill);
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    transition: border-color var(--dur-fast), color var(--dur-fast);
    margin-top: 6px;
}

.plan-show-all button:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   PLANS PAGE V2 — ye-sim style: photo + row list
   ============================================================ */
.plans-v2 {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--s-7);
    /* No align-items here — let the left column stretch to row height so
       .country-cover's position:sticky has room to actually stick during
       scroll. With align-items:start the column collapsed to the cover's
       own height, defeating the sticky. */
    padding: var(--s-5) 0 var(--s-9);
}

@media (max-width: 960px) { .plans-v2 { grid-template-columns: 1fr; } }

.plans-v2-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-grotesk);
    font-size: 12px;
    color: var(--text-mute);
    margin-bottom: var(--s-3);
    letter-spacing: 0.02em;
}

.plans-v2-breadcrumb a { color: var(--text-mute); text-decoration: none; }
.plans-v2-breadcrumb a:hover { color: var(--text-hi); }

/* Country cover — photo or flag-bg hero card */
.country-cover {
    position: sticky;
    top: 96px;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--elev-3);
    background: var(--bg-raised);
}

.country-cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.country-cover-flag-strip {
    position: absolute;
    top: var(--s-4);
    left: var(--s-4);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    /* Dark glass — reads on both bright and dark hero photos. The light
       variant (rgba(255,255,255,0.18)) disappeared on bleached skies / sand. */
    background: rgba(15, 18, 24, 0.55);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    color: #fff;
    border-radius: var(--r-pill);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
    font-family: var(--font-grotesk);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    z-index: 1;
}

.country-cover-flag-strip img {
    width: 18px;
    height: 13px;
    border-radius: 2px;
    object-fit: cover;
}

/* Procedural placeholder — gradient + flag blown up */
.country-cover.is-fallback {
    background: var(--bg-raised);
}

.country-cover-fallback-flag {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(40px) saturate(1.3);
    opacity: 0.5;
    transform: scale(1.2);
}

.country-cover-fallback-emblem {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56%;
    aspect-ratio: 1 / 0.75;
    border-radius: var(--r-md);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.15);
    z-index: 1;
}

.plans-v2-main { min-width: 0; }

.plans-v2-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 500;
    color: var(--text-hi);
    margin: 0 0 6px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.plans-v2-subtitle {
    color: var(--text-mute);
    font-size: 15px;
    margin: 0 0 var(--s-3);
}

.plans-v2-meta {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
    flex-wrap: wrap;
}

/* Notice */
.country-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: 14px 16px;
    border-radius: var(--r-md);
    background: var(--bg-raised);
    border: 1px solid var(--border-default);
    margin-bottom: var(--s-4);
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
}

.country-notice-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--info-soft);
    color: var(--info);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-top: 1px;
}

.country-notice-icon svg { width: 12px; height: 12px; }

/* Trip calc CTA */
.trip-calc-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-default);
    background: var(--bg-raised);
    color: var(--accent);
    font-family: var(--font-grotesk);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: var(--s-4);
    transition: border-color var(--dur-fast), background var(--dur-fast);
}

.trip-calc-cta:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.trip-calc-cta svg { width: 14px; height: 14px; }

/* Pill tabs */
.plans-v2-tabs {
    display: flex;
    background: var(--bg-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--r-pill);
    padding: 4px;
    margin-bottom: var(--s-4);
    gap: 0;
}

.plans-v2-tab {
    flex: 1;
    padding: 10px 16px;
    border-radius: var(--r-pill);
    background: transparent;
    border: none;
    color: var(--text-mute);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
}

.plans-v2-tab.is-active {
    background: var(--bg-page);
    color: var(--text-hi);
}

/* Plan ROW (replaces grid cards) */
.plan-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plan-row-wrap { position: relative; }
.plan-row-wrap label { display: block; cursor: pointer; }
.plan-row-wrap input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.plan-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--s-5);
    padding: 22px 24px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--bg-surface);
    transition: border-color var(--dur-fast), background var(--dur-fast);
}

.plan-row:hover { border-color: var(--border-strong); background: var(--bg-raised); }

.plan-row-wrap input[type="radio"]:checked ~ label .plan-row {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent);
}

.plan-row-spec { display: flex; flex-direction: column; gap: 4px; }

.plan-row-data {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-hi);
    font-family: var(--font-grotesk);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.plan-row-period {
    font-size: 13px;
    color: var(--text);
    font-family: var(--font-mono);
}

.plan-row-price-block {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.plan-row-price-now {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-hi);
    font-family: var(--font-grotesk);
    letter-spacing: -0.02em;
    line-height: 1;
}

.plan-row-price-now .cur { font-size: 15px; color: var(--text-mute); margin-right: 1px; font-weight: 500; }

.plan-row-price-was {
    font-size: 13px;
    color: var(--text-dim);
    text-decoration: line-through;
    font-family: var(--font-mono);
    margin-left: 6px;
}

.plan-row-pergb {
    font-size: 12px;
    color: var(--text);
    font-family: var(--font-mono);
    font-weight: 500;
}

/* Yellow ticket-style badge (ye-sim parity) — pops harder than ember on dark */
.plan-row-discount {
    background: #FFE600;
    color: #1a1a1a;
    padding: 5px 11px;
    border-radius: var(--r-sm);
    font-family: var(--font-grotesk);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    align-self: center;
}

.plan-row-popular {
    position: absolute;
    top: -8px;
    right: 16px;
    background: var(--accent);
    color: var(--accent-ink);
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-family: var(--font-grotesk);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    z-index: 2;
}

.plan-row-wrap.is-hidden { display: none; }

/* Sticky buy bar at bottom of viewport */
.plans-v2-buybar {
    position: fixed;
    bottom: var(--s-4);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 80;
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: 12px 12px 12px 20px;
    background: var(--bg-overlay);
    border: 1px solid var(--border-default);
    border-radius: var(--r-pill);
    box-shadow: var(--elev-4);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base), transform var(--dur-base);
    max-width: calc(100vw - var(--s-4));
}

.plans-v2-buybar.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.plans-v2-buybar-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--font-grotesk);
    font-size: 13px;
    color: var(--text-mute);
    white-space: nowrap;
}

.plans-v2-buybar-info strong { color: var(--text-hi); font-weight: 600; }

.plans-v2-buybar .btn { height: 44px; padding: 0 22px; font-size: 14px; }

@media (max-width: 560px) {
    .plans-v2-buybar { left: var(--s-3); right: var(--s-3); transform: translateY(20px); width: auto; max-width: none; }
    .plans-v2-buybar.is-visible { transform: translateY(0); }
}

.destinations-empty {
    grid-column: 1 / -1;
    padding: var(--s-7);
    text-align: center;
    color: var(--text-mute);
    border: 1px dashed var(--border-default);
    border-radius: var(--r-md);
    background: var(--bg-page);
    font-size: 13px;
    font-family: var(--font-grotesk);
}

.destinations-empty {
    grid-column: 1 / -1;
    padding: var(--s-7);
    text-align: center;
    color: var(--text-mute);
    border: 1px dashed var(--border-default);
    border-radius: var(--r-md);
    background: var(--bg-page);
}

@media (max-width: 760px) {
    .destinations-list { grid-template-columns: 1fr; }
    .destinations-promo { grid-template-columns: 1fr; }
    .destinations-promo-icon { width: 60px; height: 60px; }
}

/* ============================================================
   REFERRAL — photo + stat cards, unified palette
   ============================================================ */
.referral-rich {
    padding: var(--s-7);
    border-radius: var(--r-xl);
    background:
        radial-gradient(ellipse 70% 60% at 78% 30%, var(--accent-soft), transparent 65%),
        radial-gradient(ellipse 60% 50% at 12% 90%, var(--secondary-soft), transparent 60%),
        var(--bg-surface);
    border: 1px solid var(--border-subtle);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-7);
    align-items: center;
    position: relative;
    overflow: hidden;
}

.referral-rich h2 { font-size: 32px; margin: 0 0 var(--s-3); color: var(--text-hi); max-width: 16ch; }
.referral-rich .lede { color: var(--text-mute); font-size: 15px; line-height: 1.6; margin: 0 0 var(--s-5); }
.referral-rich .lede strong { color: var(--accent); font-family: var(--font-mono); font-weight: 600; }

.referral-visual {
    position: relative;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--s-3);
    align-items: stretch;
}

.referral-photo {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--border-default);
    box-shadow: var(--elev-3);
}

.referral-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-slow);
}

.referral-photo:hover img { transform: scale(1.04); }

.referral-stats {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    justify-content: center;
}

.referral-stat {
    padding: var(--s-4);
    border-radius: var(--r-lg);
    border: 1px solid var(--border-default);
    background: var(--bg-raised);
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
    transition: transform var(--dur-fast);
}

.referral-stat:hover { transform: translateY(-2px); }

.referral-stat-value {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--accent);
    line-height: 1;
}

.referral-stat-label {
    font-size: 11px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-family: var(--font-mono);
}

.referral-stat.is-bonus {
    background: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg-raised) 100%);
    border-color: var(--accent);
}

.referral-stat.is-bonus .referral-stat-value { color: var(--accent); }

@media (max-width: 960px) {
    .referral-rich { grid-template-columns: 1fr; padding: var(--s-5); gap: var(--s-5); }
    .referral-visual { grid-template-columns: 1fr 1fr; }
    .referral-photo { aspect-ratio: 4 / 3; }
}

@media (max-width: 560px) {
    .referral-visual { grid-template-columns: 1fr; }
    .referral-photo { aspect-ratio: 16 / 10; }
}

/* ============================================================
   STATS WIDE  (social proof banner)
   ============================================================ */
.stats-wide {
    padding: var(--s-7);
    border-radius: var(--r-xl);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    position: relative;
    overflow: hidden;
}

.stats-wide-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
}

.stats-wide-head h2 {
    font-size: 32px;
    margin: 0 0 6px;
}

.stats-wide-head .lede {
    color: var(--text-mute);
    font-size: 14px;
    margin: 0;
}

.stats-wide-badges {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.stats-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    background: var(--bg-raised);
    border: 1px solid var(--border-default);
    color: var(--text-hi);
    font-size: 12px;
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.stats-badge svg { width: 14px; height: 14px; color: var(--accent); }

.review-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--s-3);
}

.review {
    padding: var(--s-4);
    border-radius: var(--r-lg);
    border: 1px solid var(--border-subtle);
    background: var(--bg-page);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.review-author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.review-flag {
    width: 24px;
    height: 18px;
    border-radius: 3px;
    object-fit: cover;
}

.review-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-default);
}

.review-author-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.review-author-country {
    font-size: 11px;
    color: var(--text-mute);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.review-name {
    font-size: 13px;
    color: var(--text-hi);
    font-weight: 500;
}

.review-stars {
    display: inline-flex;
    color: var(--accent);
    gap: 1px;
}

.review-stars svg { width: 13px; height: 13px; fill: currentColor; }

.review-title {
    color: var(--text-hi);
    font-weight: 600;
    font-size: 14px;
    margin: 0;
}

.review-body { color: var(--text-mute); font-size: 13px; line-height: 1.55; margin: 0; }

/* ============================================================
   WHAT IS ESIM EXPLAINER
   ============================================================ */
.explainer {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--s-7);
    padding: var(--s-7);
    border-radius: var(--r-xl);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    align-items: center;
}

.explainer h2 { font-size: 32px; margin: 0 0 var(--s-3); }
.explainer p { color: var(--text-mute); font-size: 15px; line-height: 1.6; margin: 0 0 var(--s-3); max-width: 520px; }

.explainer-visual {
    position: relative;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.esim-card-visual {
    width: 220px;
    height: 140px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 163, 98, 0.18), transparent 60%),
        linear-gradient(135deg, var(--cta) 0%, var(--cta-press) 100%);
    box-shadow: 0 28px 60px rgba(255, 163, 98, 0.3);
    padding: 16px;
    position: relative;
    transform: rotate(-8deg);
    color: var(--cta-ink);
    font-family: var(--font-mono);
}

.esim-card-visual::after {
    content: "";
    position: absolute;
    bottom: 16px; left: 16px;
    width: 32px; height: 24px;
    border-radius: 4px;
    background:
        linear-gradient(135deg, #d4af37 0%, #f5d77a 50%, #d4af37 100%);
    background-size: 12px 12px;
    background-image:
        repeating-linear-gradient(90deg, rgba(0,0,0,0.2) 0 1px, transparent 1px 6px),
        repeating-linear-gradient(0deg, rgba(0,0,0,0.2) 0 1px, transparent 1px 6px);
}

.esim-card-visual-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    opacity: 0.8;
}

.esim-card-visual-number {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

.esim-card-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-glow), transparent 60%);
    pointer-events: none;
}

@media (max-width: 760px) {
    .explainer { grid-template-columns: 1fr; padding: var(--s-5); }
    .destinations { padding: var(--s-4); }
    .stats-wide { padding: var(--s-5); }
}


.hero-search {
    margin-top: var(--s-5);
    position: relative;
    max-width: 520px;
}

.hero-search .input {
    height: 56px;
    padding-left: 52px;
    padding-right: 16px;
    font-size: 15px;
}

.hero-search .input-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-mute);
    pointer-events: none;
    z-index: 2;
}

.hero-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--bg-overlay);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    padding: 8px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 50;
    box-shadow: var(--elev-3);
    display: none;
}

.hero-search.show .hero-search-results { display: block; }

.hero-search-results .sidebar-item { cursor: pointer; }

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-5);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-mute);
    margin-top: var(--s-6);
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--s-4);
}

.hero-meta span strong { color: var(--text-hi); font-weight: 500; }

/* ---------- SECTION FRAME (used by all section files) ---------- */
.mx-section {
    padding: var(--s-9) 0;
    border-top: 1px solid var(--border-subtle);
    position: relative;
}

.mx-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-5);
    margin-bottom: var(--s-7);
    flex-wrap: wrap;
}

.mx-section-head h2 { font-size: var(--fs-h2); max-width: 720px; }
.mx-section-head .lede { color: var(--text-mute); max-width: 480px; }

.mx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--tracking-caps);
    color: var(--accent);
    margin-bottom: var(--s-3);
    text-transform: uppercase;
}

.mx-eyebrow::before {
    content: "";
    width: 6px; height: 6px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--accent-glow);
    display: inline-block;
}

/* ---------- FEATURE GRID (services / why-us / principles) ---------- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s-4);
}

.feature {
    padding: var(--s-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    background: var(--bg-surface);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    transition: border-color var(--dur-fast), transform var(--dur-fast);
}

.feature:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
}

.feature-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.feature-icon svg { width: 22px; height: 22px; }
.feature-icon img { width: 22px; height: 22px; filter: brightness(0) saturate(100%) invert(91%) sepia(57%) saturate(411%) hue-rotate(95deg) brightness(102%) contrast(101%); }

.feature h4 { font-size: 18px; color: var(--text-hi); margin: 0; }
.feature p { color: var(--text-mute); font-size: 14px; line-height: 1.55; margin: 0; }

.feature-num {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent);
    letter-spacing: var(--tracking-caps);
}

/* ---------- COVERAGE COUNTRY GRID ---------- */
.coverage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--s-3);
}

.coverage-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--bg-surface);
    transition: border-color var(--dur-fast);
}

.coverage-item:hover { border-color: var(--accent); }
.coverage-item img { width: 28px; height: 21px; border-radius: 3px; object-fit: cover; flex: none; }
.coverage-item span { color: var(--text); font-size: 13px; font-weight: 500; }

.coverage-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--s-4);
    border-radius: var(--r-md);
    background: var(--accent-soft);
    color: var(--accent);
    min-width: 160px;
}

.coverage-stat .num {
    font-family: var(--font-mono);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
}

.coverage-stat .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--text-mute);
}

/* ---------- WORK PROCESS (stepper hero) ---------- */
.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4);
}

.process-step {
    position: relative;
    padding: var(--s-5);
    border-radius: var(--r-lg);
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.process-step::before {
    content: counter(step);
    position: absolute;
    top: -16px;
    left: var(--s-5);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 18px var(--accent-glow);
}

.process-grid { counter-reset: step; }
.process-step { counter-increment: step; }

.process-step h4 { font-size: 18px; color: var(--text-hi); margin: 4px 0 0; }
.process-step p { color: var(--text-mute); font-size: 14px; margin: 0; line-height: 1.55; }

/* ---------- FAQ ACCORDION ---------- */
.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--s-7);
    align-items: start;
}

.faq-side h2 { font-size: var(--fs-h2); }
.faq-side .lede { color: var(--text-mute); margin: var(--s-3) 0 var(--s-5); }

.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.faq-item {
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--bg-surface);
    overflow: hidden;
    transition: border-color var(--dur-fast);
}

.faq-item.is-open { border-color: var(--accent); }

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 18px;
    background: transparent;
    border: none;
    color: var(--text-hi);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.faq-q-icon {
    width: 22px; height: 22px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-default);
    color: var(--text-mute);
    transition: transform var(--dur-fast), color var(--dur-fast);
}

.faq-item.is-open .faq-q-icon { transform: rotate(45deg); color: var(--accent); border-color: var(--accent); }

.faq-a {
    display: none;
    padding: 0 18px 18px;
    color: var(--text-mute);
    font-size: 14px;
    line-height: 1.65;
}

.faq-item.is-open .faq-a { display: block; }

/* ---------- TESTIMONIAL CARDS ---------- */
.quote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--s-4);
}

.quote {
    padding: var(--s-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    background: var(--bg-surface);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.quote-body { color: var(--text); font-size: 15px; line-height: 1.6; }
.quote-body::before { content: "“"; font-family: var(--font-display); font-size: 56px; color: var(--accent); display: block; line-height: 0.6; margin-bottom: 8px; }

.quote-author {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px dashed var(--border-subtle);
    padding-top: var(--s-3);
}

.quote-author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 600;
}

.quote-author-name { color: var(--text-hi); font-weight: 500; font-size: 14px; }
.quote-author-meta { color: var(--text-mute); font-size: 12px; font-family: var(--font-mono); }

/* ---------- BLOG CARDS ---------- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--s-4);
}

.blog-card {
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    background: var(--bg-surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color var(--dur-fast), transform var(--dur-fast);
}

.blog-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }

.blog-card-image {
    aspect-ratio: 16 / 9;
    background: var(--neutral-3);
    overflow: hidden;
}

.blog-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.blog-card-body {
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.blog-card h4 { color: var(--text-hi); font-size: 16px; line-height: 1.3; margin: 0; }
.blog-card-date { color: var(--text-mute); font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.blog-card-link { color: var(--accent); font-size: 13px; font-weight: 500; margin-top: auto; padding-top: 8px; }

/* ---------- REFERRAL PROMO ---------- */
.referral-promo {
    padding: var(--s-7);
    border: 1px solid var(--accent);
    border-radius: var(--r-xl);
    background: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg-surface) 60%);
    box-shadow: var(--elev-mint);
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--s-5);
    align-items: center;
}

.referral-promo h2 { font-size: var(--fs-h2); }
.referral-promo .lede { color: var(--text-mute); margin: var(--s-3) 0 var(--s-4); }

/* ---------- CLIENT LOGOS STRIP ---------- */
.client-strip {
    padding: var(--s-6) 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.client-strip-label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-mute);
    text-align: center;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    margin-bottom: var(--s-4);
}

.client-strip-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-7);
    flex-wrap: wrap;
    opacity: 0.6;
}

.client-strip-row img { height: 28px; filter: grayscale(1) brightness(2); opacity: 0.7; }

/* ---------- CTA BANNER ---------- */
.cta-banner {
    padding: var(--s-8);
    border-radius: var(--r-xl);
    background: linear-gradient(135deg, var(--bg-raised) 0%, var(--bg-surface) 100%);
    border: 1px solid var(--border-default);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, var(--accent-soft), transparent 60%);
    pointer-events: none;
}

.cta-banner h2 { font-size: var(--fs-h2); margin-bottom: var(--s-3); position: relative; }
.cta-banner .lede { color: var(--text-mute); max-width: 560px; margin: 0 auto var(--s-5); position: relative; }
.cta-banner .row { justify-content: center; gap: var(--s-3); position: relative; }

/* ---------- FOOTER (already styled, kept for completeness) ---------- */
.site-foot {
    padding: var(--s-8) 0 var(--s-5);
    border-top: 1px solid var(--border-subtle);
    margin-top: var(--s-9);
}

.site-foot-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--s-7);
    margin-bottom: var(--s-7);
}

.site-foot h6 {
    font-size: 11px;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-mute);
    margin: var(--s-4) 0 var(--s-3);
    font-weight: 600;
}

.site-foot ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.site-foot ul a { color: var(--text); font-size: 13px; }
.site-foot ul a:hover { color: var(--accent); }
.site-foot-brand-desc { color: var(--text-mute); font-size: 13px; line-height: var(--lh-loose); margin-top: var(--s-3); max-width: 320px; }

.site-foot-social { display: flex; gap: 8px; margin-top: var(--s-4); }

.site-foot-social a {
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
    background: var(--bg-raised);
    border: 1px solid var(--border-default);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-mute);
    transition: color var(--dur-fast), border-color var(--dur-fast);
}

.site-foot-social a:hover { color: var(--accent); border-color: var(--accent); }
.site-foot-social a svg,
.site-foot-social a i { width: 16px; height: 16px; font-size: 16px; }

.site-foot-bottom {
    padding-top: var(--s-5);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-3);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-mute);
    letter-spacing: var(--tracking-wide);
}

/* ---------- PLAN GRID ---------- */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--s-4);
}

.plan { position: relative; }
.plan label { cursor: pointer; display: block; }

.plan input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.plan input[type="radio"]:checked + .plan-inner {
    border-color: var(--accent);
    background: linear-gradient(180deg, var(--accent-soft) 0%, var(--bg-surface) 60%);
    box-shadow: var(--elev-mint);
}

.plan-inner {
    padding: var(--s-5);
    border-radius: var(--r-lg);
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}

.plan-inner:hover { border-color: var(--border-strong); transform: translateY(-2px); }

.plan-badge-popular {
    position: absolute;
    top: -10px;
    right: var(--s-4);
    background: var(--accent);
    color: var(--accent-ink);
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    z-index: 2;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 960px) {
    .hero-grid, .faq-grid, .referral-promo { grid-template-columns: 1fr; }
    .process-grid { grid-template-columns: 1fr; }
    .site-foot-grid { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
}

@media (max-width: 560px) {
    .site-foot-grid { grid-template-columns: 1fr; }
    .hero { padding: var(--s-8) 0 var(--s-7); }
    .mx-section { padding: var(--s-7) 0; }
}

/* ---------- LEGACY COOKIE BANNER ---------- */
.cookies-card {
    background: var(--bg-overlay) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--r-lg) !important;
    color: var(--text) !important;
}

.cookies-card__content { color: var(--text-mute) !important; }

.cookies-card__btn .btn--base {
    background: var(--cta) !important;
    color: var(--cta-ink) !important;
    border: none !important;
    border-radius: var(--r-md) !important;
}

/* ===================== eSIM Install — step flow ===================== */
.esim-install-flow {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin-top: var(--s-3);
}
.esim-step-card {
    text-align: center;
    padding: var(--s-5) var(--s-4) var(--s-5);
    /* Lazy-render: browser skips painting offscreen step-cards until they scroll into view */
    content-visibility: auto;
    contain-intrinsic-size: 0 720px;
}
.esim-method-group { content-visibility: auto; contain-intrinsic-size: 0 1200px; }

/* ===================== Plan summary ===================== */
.esim-plan-summary {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
}
.esim-plan-flag {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 2px var(--border-subtle), 0 4px 12px rgba(0,0,0,0.20);
    background: var(--bg-page);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.esim-plan-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.esim-plan-flag-fallback { color: var(--accent); }
.esim-plan-info { min-width: 0; flex: 1; }
.esim-plan-name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 20px;
    color: var(--text-hi);
    margin: 0 0 8px;
    line-height: 1.2;
}
.esim-plan-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.esim-plan-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: var(--bg-elev-1, rgba(255,255,255,0.05));
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: 0.01em;
}

/* ===================== One-tap install banner ===================== */
.esim-one-tap {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    margin: 0 0 var(--s-3);
    background: linear-gradient(135deg, var(--accent), #FF8B4D);
    border: none;
    border-radius: 16px;
    color: var(--accent-ink, #fff);
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(255, 106, 44, 0.30);
    transition: transform var(--dur-fast), box-shadow var(--dur-fast);
    position: relative;
    overflow: hidden;
}
.esim-one-tap::after {
    content: "";
    position: absolute;
    top: -40%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
    pointer-events: none;
}
.esim-one-tap:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(255, 106, 44, 0.40);
}
.esim-one-tap-icon {
    flex: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: rgba(255,255,255,0.18);
    border-radius: 12px;
    backdrop-filter: blur(4px);
}
.esim-one-tap-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.esim-one-tap-text strong {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
}
.esim-one-tap-text small {
    font-size: 12px;
    opacity: 0.85;
    line-height: 1.35;
}
.esim-one-tap-disabled {
    opacity: 0.55;
    pointer-events: none;
    background: linear-gradient(135deg, #6b6b70, #8e8e93);
    box-shadow: none;
}
.esim-one-tap-disabled .esim-one-tap-text strong::after {
    content: " (iOS only)";
    font-weight: 400;
    opacity: 0.7;
}

/* ===================== eSIM Detail page ===================== */
/* Chip row inside top hero card */
.esim-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

/* Right column: compact 4 steps + CTA to full guide */
.esim-steps-compact li { padding: 8px 0; }
.esim-steps-compact h3 { font-size: 14px; margin: 0; line-height: 1.3; }
.esim-steps-compact p { display: none; }
.esim-detail-guide-cta {
    margin-top: var(--s-3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    background: var(--accent-soft, rgba(255,106,44,0.10));
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    width: fit-content;
    transition: background var(--dur-fast), transform var(--dur-fast);
}
.esim-detail-guide-cta:hover {
    background: var(--accent);
    color: var(--accent-ink, #fff);
    transform: translateY(-1px);
}
.esim-detail-guide-row {
    margin-top: var(--s-3);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.esim-detail-guide-row .esim-detail-guide-cta { margin-top: 0; }
.esim-detail-guide-cta-ghost {
    background: transparent;
    border-color: var(--border-subtle);
    color: var(--text-mute);
    cursor: pointer;
}
.esim-detail-guide-cta-ghost:hover {
    background: var(--bg-elev-1, rgba(255,255,255,0.05));
    border-color: var(--text-mute);
    color: var(--text-hi);
    transform: translateY(-1px);
}

/* Lazy-rendered + collapsible info cards */
.esim-detail-info-lazy {
    content-visibility: auto;
    contain-intrinsic-size: 0 400px;
}
.esim-detail-info-card { padding: 0; }
.esim-detail-info-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: var(--s-3) var(--s-4);
    transition: background var(--dur-fast);
}
.esim-detail-info-summary:hover { background: var(--bg-elev-1, rgba(255,255,255,0.03)); }
.esim-detail-info-summary::-webkit-details-marker { display: none; }
.esim-detail-info-summary .esim-detail-card-title { margin: 0; }
.esim-detail-info-chevron {
    color: var(--text-mute);
    transition: transform var(--dur-fast);
}
.esim-detail-info-card[open] .esim-detail-info-chevron { transform: rotate(180deg); }
.esim-detail-info-card > .dash-detail-rows { padding: 0 var(--s-4) var(--s-3); }
/* Force-hide content when details is closed (overrides .dash-detail-rows display:grid) */
.esim-detail-info-card:not([open]) > .dash-detail-rows { display: none; }

/* Coverage value (flag + name or stacked flags + link) */
.esim-coverage-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.esim-coverage-flag {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1.5px var(--border-subtle);
}
.esim-coverage-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
    text-decoration: none;
}
.esim-coverage-flags {
    display: inline-flex;
}
.esim-coverage-flags img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px var(--bg-overlay, #111);
    margin-left: -8px;
}
.esim-coverage-flags img:first-child { margin-left: 0; }

/* Sticky bottom CTA — mobile only */
.esim-detail-sticky-cta {
    display: none;
    position: fixed;
    left: var(--s-4);
    right: var(--s-4);
    bottom: var(--s-4);
    z-index: 50;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink, #fff);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 12px 32px rgba(255, 106, 44, 0.40);
    transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.esim-detail-sticky-cta.is-near-bottom {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}
@media (max-width: 768px) {
    .esim-detail-sticky-cta { display: inline-flex; }
    /* leave room at the bottom so sticky doesn't cover content */
    body.has-sticky-esim { padding-bottom: 80px; }
}

/* Conditional layout based on device platform:
   - iOS: One-tap banner is primary; QR card secondary (slightly muted, smaller)
   - Android/desktop: QR card stays as the main visual */
.esim-detail-grid.is-ios .esim-detail-qr-card {
    opacity: 0.92;
}
.esim-detail-grid.is-ios .esim-detail-qr-card .esim-detail-qr {
    transform: scale(0.85);
    transform-origin: center top;
    margin-bottom: -20px;
}
.esim-detail-grid.is-ios .esim-detail-qr-card .esim-detail-qr-head h2::before {
    content: "✋ ";
}

/* ===================== Quick actions (Check compatibility) ===================== */
.esim-quick-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
}
.esim-quick-action {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px var(--s-4);
    border-radius: 16px;
    background: var(--bg-overlay);
    border: 1px solid var(--border-subtle);
    color: var(--text-hi);
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
    width: 100%;
    font: inherit;
}
.esim-quick-action:hover {
    border-color: var(--accent);
    background: var(--bg-elev-1, rgba(255,255,255,0.03));
    transform: translateY(-1px);
}
.esim-quick-action-icon {
    flex: none;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft, rgba(255,106,44,0.12));
    border-radius: 10px;
    color: var(--accent);
}
.esim-quick-action-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.esim-quick-action-text strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-hi);
}
.esim-quick-action-text small {
    font-size: 12px;
    color: var(--text-mute);
}
.esim-quick-action > svg:last-child { color: var(--text-mute); flex: none; }

/* ===================== Tips collapsible ===================== */
.esim-tips-collapse { padding: 0; }
.esim-tips-collapse > .esim-install-card-title {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--s-3) var(--s-4);
    margin: 0;
    transition: background var(--dur-fast);
}
.esim-tips-collapse > .esim-install-card-title:hover {
    background: var(--bg-elev-1, rgba(255,255,255,0.03));
}
.esim-tips-collapse > .esim-install-card-title::-webkit-details-marker { display: none; }
.esim-tips-collapse > .esim-install-card-title > span:first-child { flex: 1; }
.esim-tips-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--bg-elev-2, rgba(255,255,255,0.08));
    font-family: var(--font-grotesk, var(--font-display));
    font-size: 11px;
    font-weight: 600;
    color: var(--text-mute);
}
.esim-tips-chevron {
    color: var(--text-mute);
    transition: transform var(--dur-fast);
    flex: none;
}
.esim-tips-collapse[open] .esim-tips-chevron { transform: rotate(180deg); }
.esim-tips-collapse > .esim-tips { padding: 0 var(--s-4) var(--s-3); }
.esim-tips-collapse > .esim-install-compat-btn { margin: 0 var(--s-4) var(--s-4); }
/* Re-affirm compact sizing when button lives inside the collapsible card */
.esim-tips-collapse > .esim-install-compat-btn {
    width: auto;
    height: 36px;
    padding: 0 14px;
    font-size: 12px;
}
.esim-step-badge {
    display: inline-block;
    color: #6FE3A2;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: var(--s-2);
    letter-spacing: 0.02em;
}
.esim-step-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.2;
    color: var(--text-hi);
    margin: 0 0 8px;
}
.esim-step-sub {
    color: var(--text-mute);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 auto var(--s-4);
    max-width: 540px;
}
.esim-step-note {
    margin: var(--s-4) auto 0;
    padding: 10px 14px;
    max-width: 540px;
    background: var(--bg-elev-1, rgba(255,255,255,0.04));
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    color: var(--text-mute);
    font-size: 12px;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
}
.esim-step-note svg { flex: none; margin-top: 2px; color: var(--accent); }

/* "Already installed" notice */
.esim-install-already {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: var(--s-3) auto 0;
    padding: 8px 14px;
    background: rgba(111, 227, 162, 0.10);
    border: 1px solid rgba(111, 227, 162, 0.30);
    border-radius: 999px;
    color: #6FE3A2;
    font-size: 12px;
    font-weight: 600;
}

/* Method bar (Manual / QR-code) — global selector for iOS 26 flow */
.esim-method-bar {
    display: flex;
    justify-content: center;
    margin-bottom: var(--s-3);
}
.esim-method-bar .esim-method-tabs { margin: 0; padding: 5px; }
.esim-method-bar .esim-method-tab { padding: 10px 56px; font-size: 14px; }

/* Method tabs: Manual / QR-code */
.esim-method-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    margin: 0 auto var(--s-3);
}
.esim-method-tab {
    padding: 8px 24px;
    border: none;
    background: transparent;
    color: var(--text-mute);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 999px;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.esim-method-tab:hover { color: var(--text-hi); }
.esim-method-tab.is-active {
    background: var(--bg-elev-1, rgba(255,255,255,0.06));
    color: var(--text-hi);
}
.esim-method-pane { margin: 0 auto var(--s-3); max-width: 540px; }

/* Credentials card (SM-DP+ Address + Activation code) */
.esim-credentials {
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: var(--s-3);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.esim-credentials-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.esim-credentials-row > div { min-width: 0; flex: 1; }
.esim-credentials-label {
    display: block;
    color: var(--text-mute);
    font-size: 12px;
    margin-bottom: 2px;
}
.esim-credentials-value {
    display: block;
    color: var(--text-hi);
    font-size: 15px;
    font-weight: 600;
    word-break: break-all;
    overflow-wrap: anywhere;
    line-height: 1.3;
}
.esim-credentials-copy {
    flex: none;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elev-1, rgba(255,255,255,0.06));
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    color: var(--text-mute);
    cursor: pointer;
    transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.esim-credentials-copy:hover { color: var(--accent); border-color: var(--accent); }
.esim-credentials-copy.is-copied { color: #6FE3A2; border-color: #6FE3A2; background: rgba(111, 227, 162, 0.10); }

/* QR display */
.esim-qr-block {
    text-align: center;
}
.esim-qr-block img {
    max-width: 240px;
    background: #fff;
    padding: 12px;
    border-radius: 14px;
}
.esim-qr-hint {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--text-mute);
}

/* Big QR block (centered, prominent) — for QR-code step 1 in iOS 26 flow */
.esim-qr-big {
    display: flex;
    justify-content: center;
    margin-top: var(--s-3);
}
.esim-qr-big img {
    width: 280px;
    height: 280px;
    background: #fff;
    padding: 16px;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

/* Wide credentials block (full-width for Step 1 in iOS 26 flow) */
.esim-credentials-wide {
    max-width: 640px;
    margin: 0 auto;
}

/* ===================== iPhone mockups (CSS-rendered) ===================== */
.esim-mock-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 14px;
    margin-top: var(--s-3);
}
.esim-mock {
    width: 180px;
    flex: none;
    background: #fff;
    border-radius: 26px;
    padding: 8px 8px 12px;
    box-shadow:
        inset 0 0 0 5px #1c1c1e,
        0 4px 14px rgba(0,0,0,0.40);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
    color: #000;
    position: relative;
    overflow: hidden;
}
.esim-mock::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 18px;
    background: #1c1c1e;
    border-radius: 12px;
    z-index: 2;
}
.esim-mock-status {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 14px 16px;
    color: #000;
}
.esim-mock-icons { letter-spacing: -1px; font-size: 8px; }
.esim-mock-h1 {
    font-size: 22px;
    font-weight: 700;
    padding: 4px 12px 8px;
    color: #000;
}
.esim-mock-h1-sm {
    font-size: 15px;
    font-weight: 600;
    padding: 4px 8px 6px;
    color: #000;
}
.esim-mock-h2 {
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    color: #000;
    margin: 4px 8px 4px;
    line-height: 1.2;
}
.esim-mock-body {
    font-size: 9px;
    color: #6b6b70;
    text-align: center;
    margin: 0 8px 8px;
    line-height: 1.35;
}
.esim-mock-icon-big {
    font-size: 28px;
    text-align: center;
    margin: 2px 0;
    line-height: 1;
    filter: hue-rotate(-15deg);
}
.esim-mock-section-label {
    font-size: 9px;
    color: #6b6b70;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 12px 2px;
    font-weight: 600;
}
.esim-mock-card {
    background: #f2f2f7;
    border-radius: 10px;
    margin: 4px 6px;
    overflow: hidden;
}
.esim-mock-card.is-target {
    box-shadow: 0 0 0 2px #FF6A2C;
    border-radius: 11px;
}
.esim-mock-row-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    font-size: 10.5px;
    color: #000;
    border-bottom: 1px solid rgba(60,60,67,0.08);
    line-height: 1.25;
}
.esim-mock-row-item:last-child { border-bottom: 0; }
.esim-mock-row-item.is-target {
    box-shadow: inset 0 0 0 2px #FF6A2C;
    border-radius: 8px;
    background: #fff;
}
.esim-mock-row-item > .esim-mock-stack {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.esim-mock-row-item .esim-mock-stack strong {
    font-size: 11px;
    font-weight: 600;
    color: #000;
}
.esim-mock-row-item .esim-mock-stack small {
    font-size: 8.5px;
    color: #6b6b70;
    font-weight: 400;
    line-height: 1.25;
}
.esim-mock-row-item > strong {
    flex: 1;
    font-size: 11px;
    font-weight: 500;
    color: #000;
}
.esim-mock-aside {
    margin-left: auto;
    font-size: 9px;
    color: #8e8e93;
}
.esim-mock-dot {
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: inline-block;
}
.esim-mock-dot.is-grey   { background: #c7c7cc; }
.esim-mock-dot.is-orange { background: #ff9500; }
.esim-mock-dot.is-blue   { background: #007aff; }
.esim-mock-dot.is-green  { background: #34c759; }
.esim-mock-radio {
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid #c7c7cc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #fff;
}
.esim-mock-radio.is-checked {
    background: #007aff;
    border-color: #007aff;
}
.esim-mock-switch {
    flex: none;
    width: 28px;
    height: 16px;
    background: #d1d1d6;
    border-radius: 999px;
    position: relative;
    margin-left: auto;
    transition: background var(--dur-fast);
}
.esim-mock-switch::after {
    content: "";
    position: absolute;
    top: 1.5px;
    left: 1.5px;
    width: 13px;
    height: 13px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: transform var(--dur-fast);
}
.esim-mock-switch.is-on { background: #34c759; }
.esim-mock-switch.is-on::after { transform: translateX(12px); }

/* Wider step cards on desktop, full-bleed on mobile */
@media (max-width: 640px) {
    .esim-mock { width: 160px; }
    .esim-step-title { font-size: 18px; }
    .esim-method-tab { padding: 7px 18px; }
}

/* Tall mockup for Step 5 (more iOS settings rows) */
.esim-mock-tall { width: 240px; }

/* Android mockup variant — beige Samsung One UI palette */
.esim-mock-android {
    background: #f5f1ea;
    font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
}
.esim-mock-android::before {
    background: #1c1c1e;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    top: 6px;
}
.esim-mock-android .esim-mock-card {
    background: #fff;
    border-radius: 14px;
    margin: 4px 6px;
}
.esim-mock-android .esim-mock-row-item { padding: 8px 10px; }
.esim-mock-android .esim-mock-section-label { color: #888; }

.esim-mock-android-search {
    text-align: right;
    padding: 0 12px;
    font-size: 12px;
    color: #555;
}
.esim-mock-android-account {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 10px;
}
.esim-mock-android-account strong {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #000;
}
.esim-mock-android-account small {
    display: block;
    font-size: 8.5px;
    color: #777;
}
.esim-mock-android-avatar {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffb88a, #ff6a2c);
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.15);
}

.esim-mock-android-scanner {
    background: #1c1c1e;
    margin: 4px 6px;
    border-radius: 12px;
    aspect-ratio: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.esim-mock-android-scanner-text {
    color: #fff;
    font-size: 9px;
    text-align: center;
    padding: 0 10px;
}
.esim-mock-android-scanner-hint {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    background: rgba(255,255,255,0.85);
    color: #000;
    font-size: 7.5px;
    padding: 4px 6px;
    border-radius: 6px;
    line-height: 1.25;
    text-align: center;
}
.esim-mock-android-scanner-qr {
    background: #fff;
    padding: 4px;
    border-radius: 6px;
}
.esim-mock-android-scanner-qr svg { width: 48px; height: 48px; display: block; }
.esim-mock-android-scanner-corners {
    position: absolute;
    inset: 8px;
    pointer-events: none;
}
.esim-mock-android-scanner-corners span {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
}
.esim-mock-android-scanner-corners span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.esim-mock-android-scanner-corners span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.esim-mock-android-scanner-corners span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.esim-mock-android-scanner-corners span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.esim-mock-android-tools {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 8px;
}
.esim-mock-android-tool {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #c7c2bb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.esim-mock-android-input {
    margin: 8px 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid #FF6A2C;
}
.esim-mock-android-input-label {
    display: block;
    font-size: 8px;
    color: #FF6A2C;
    font-weight: 600;
    margin-bottom: 2px;
}
.esim-mock-android-input-value {
    display: block;
    font-size: 9.5px;
    color: #000;
    word-break: break-all;
}
.esim-mock-android-action {
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    margin-top: auto;
    font-size: 10px;
    color: #444;
    border-top: 1px solid rgba(0,0,0,0.08);
}

/* QR scan frame (for Step 1 mockup) */
.esim-mock-qr-frame {
    margin: 4px 8px;
    background: #d1d1d6;
    border-radius: 8px;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.esim-mock-qr-svg {
    width: 64px;
    height: 64px;
    background: #fff;
    padding: 2px;
    border-radius: 2px;
}

/* Form field rows (for Enter Activation Code mockup) */
.esim-mock-form-field {
    margin: 0 12px;
    padding: 9px 0 5px;
    border-bottom: 0.5px solid rgba(60,60,67,0.18);
    font-size: 10px;
    color: #8e8e93;
}
.esim-mock-keyboard {
    margin: 8px 4px 0;
    padding: 7px 4px;
    background: #d1d1d6;
    border-radius: 6px;
    font-size: 9px;
    color: #000;
    text-align: center;
    letter-spacing: 1.5px;
    font-weight: 500;
}
.esim-mock-danger {
    color: #ff3b30;
    font-weight: 600;
    justify-content: center;
}

/* ICCID card */
.esim-iccid-card { padding: var(--s-3) var(--s-4); }
.esim-iccid-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.esim-iccid-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}
.esim-iccid-label {
    font-family: var(--font-grotesk, var(--font-display));
    font-size: 11px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.esim-iccid-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-hi);
    letter-spacing: 0.02em;
    word-break: break-all;
}

/* Note placed at full width (not inside a step card) */
.esim-step-note-full {
    margin-top: var(--s-3);
    max-width: none;
    background: rgba(0, 122, 255, 0.10);
    border-color: rgba(0, 122, 255, 0.30);
    color: var(--text);
}
.esim-step-note-full svg { color: #007aff; }

/* FAQ + Write to support */
.esim-help-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
    margin-top: var(--s-3);
}
@media (max-width: 640px) {
    .esim-help-row { grid-template-columns: 1fr; }
}
.esim-help-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px var(--s-3);
    text-decoration: none;
    transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.esim-help-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.esim-help-icon {
    flex: none;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
}
.esim-help-icon.is-faq { background: #FFC72C; color: #4a3a00; }
.esim-help-icon.is-support { background: var(--accent); color: var(--accent-ink, #fff); }
.esim-help-label {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-hi);
}
.esim-help-chevron { color: var(--text-mute); flex: none; }


/* ============================================================
   VIRTUAL NUMBER DETAIL — How-it-works / Benefits / Reviews
   Mirrors the ye-sim layout but in our dark + ember palette.
   ============================================================ */
.vn-section {
    margin: var(--s-6) auto 0;
    padding: var(--s-5);
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    max-width: 1200px;
}

.vn-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--s-4);
    gap: var(--s-4);
    flex-wrap: wrap;
}
.vn-section-head h2 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--text-hi);
}

/* ---- How it works: 3 numbered steps ---- */
.vn-howto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
}
.vn-howto-step {
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s-2);
}
.vn-howto-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    color: var(--text-mute);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-grotesk);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}
.vn-howto-step h3 {
    margin: 0;
    font-family: var(--font-grotesk);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-hi);
}
.vn-howto-step p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-mute);
}

/* ---- Benefits: 3 emoji cards ---- */
.vn-benefits-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
}
.vn-benefit-card {
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vn-benefit-emoji {
    font-size: 32px;
    line-height: 1;
    margin-bottom: 6px;
}
.vn-benefit-card h3 {
    margin: 0;
    font-family: var(--font-grotesk);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-hi);
}
.vn-benefit-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-mute);
}

/* ---- Trust / reviews band ---- */
.vn-trust-head {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}
.vn-trust-head h2 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--text-hi);
}
.vn-trust-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.vn-trust-badge {
    background: var(--success-soft);
    color: var(--success);
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--font-grotesk);
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.vn-trust-badge svg {
    display: inline-block;
}
.vn-trust-badge-mute {
    background: var(--bg-elev-1);
    color: var(--text-mute);
    border: 1px solid var(--border-subtle);
}

.vn-reviews-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
}
.vn-review {
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vn-review-stars {
    color: var(--success);
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 2px;
}
.vn-review h4 {
    margin: 0;
    font-family: var(--font-grotesk);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-hi);
}
.vn-review p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-mute);
}
.vn-review-author {
    margin-top: auto;
    padding-top: 8px;
    font-family: var(--font-grotesk);
    font-size: 12px;
    color: var(--text);
    font-weight: 500;
}

/* Mobile: collapse to single column */
@media (max-width: 720px) {
    .vn-howto-grid,
    .vn-benefits-row,
    .vn-reviews-row {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   VIRTUAL NUMBER — country-page card list (ye-sim style)
   Each row is a link to that number's own checkout page.
   ============================================================ */
.vn-numbers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--s-2);
    margin-top: var(--s-4);
}
.vn-number-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-3);
    padding: 12px 14px;
    border-radius: var(--r-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-page);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.vn-number-card:hover {
    border-color: var(--accent);
    background: var(--bg-raised);
    transform: translateY(-1px);
}
.vn-number-card-flag {
    width: 36px; height: 27px;
    border-radius: 4px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 11px;
}
.vn-number-card-flag img {
    width: 100%; height: 100%; object-fit: cover;
}
.vn-number-card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.vn-number-card-num {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-hi);
    letter-spacing: 0.02em;
}
.vn-number-card-price {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-mute);
}
.vn-number-card-arrow {
    color: var(--text-mute);
    transition: transform var(--dur-fast), color var(--dur-fast);
}
.vn-number-card:hover .vn-number-card-arrow {
    color: var(--accent);
    transform: translateX(2px);
}

/* ============================================================
   VIRTUAL NUMBER — single-number CHECKOUT page (ye-sim style)
   ============================================================ */
.vn-detail-shell {
    padding-top: var(--s-5);
    padding-bottom: var(--s-9);
    max-width: 760px;
    margin: 0 auto;
}

.vn-detail-back {
    margin-bottom: var(--s-3);
}
.vn-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    color: var(--text-hi);
    font-family: var(--font-grotesk);
    font-size: 13px;
    text-decoration: none;
    transition: background var(--dur-fast);
}
.vn-back-btn:hover { background: var(--bg-raised); color: var(--accent); }

.vn-detail-hero {
    padding: var(--s-5);
    border-radius: var(--r-lg);
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
}
.vn-detail-country-label {
    font-family: var(--font-grotesk);
    font-size: 12px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.vn-detail-headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-top: 4px;
}
.vn-detail-number {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 36px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-hi);
}
.vn-detail-flag {
    width: 44px; height: 32px;
    border-radius: 6px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    flex: none;
}
.vn-detail-flag img { width: 100%; height: 100%; object-fit: cover; }
.vn-detail-flag-fallback {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 12px;
    color: var(--text-hi);
}
.vn-detail-privacy-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--s-3);
    padding: 10px 14px;
    border-radius: var(--r-md);
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    color: var(--text-mute);
    font-size: 13px;
    line-height: 1.5;
}
.vn-detail-privacy-hint svg { flex: none; color: var(--accent); }

/* Pricing card — Monthly (only). Yearly stays out of the design for now. */
.vn-pricing-card {
    margin-top: var(--s-4);
    padding: var(--s-4);
    border-radius: var(--r-lg);
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
}
.vn-price-tile {
    position: relative;
    padding: 14px 16px;
    border-radius: var(--r-md);
    border: 2px solid var(--border-subtle);
    background: var(--bg-page);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
}
.vn-price-tile.is-selected {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.vn-price-tile-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.vn-price-tile-name {
    font-family: var(--font-grotesk);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-hi);
}
.vn-price-tile-per {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-mute);
}
.vn-price-tile-total {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 600;
    color: var(--text-hi);
}
.vn-price-tile-dot {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border-subtle);
    background: var(--bg-page);
    flex: none;
}
.vn-price-tile-dot.is-on {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: inset 0 0 0 3px var(--bg-page);
}

.vn-price-setup-row {
    margin-top: var(--s-2);
    padding: 10px 14px;
    border-radius: var(--r-md);
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text);
}
.vn-price-setup-row strong { color: var(--text-hi); }

.vn-wallet-row {
    margin-top: var(--s-2);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    color: var(--text-mute);
    font-family: var(--font-mono);
    font-size: 13px;
}
.vn-wallet-row strong { color: var(--text-hi); }

.vn-buy-form { margin: 0; }
.vn-buy-btn {
    width: 100%;
    margin-top: var(--s-3);
    justify-content: center;
}

.vn-section-title {
    margin: 0 0 var(--s-3);
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--text-hi);
}

/* Supports services pills */
.vn-supports-card { margin-top: var(--s-4); }
.vn-supports-grid {
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
}
.vn-service-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 64px;
}
.vn-service-pill .vn-service-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vn-service-pill .vn-service-icon svg { width: 24px; height: 24px; }
.vn-service-name {
    font-family: var(--font-grotesk);
    font-size: 12px;
    color: var(--text-mute);
}

/* Details list */
.vn-detail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.vn-detail-list li {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    align-items: start;
}
.vn-detail-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    color: var(--text-mute);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.vn-detail-list strong {
    display: block;
    font-family: var(--font-grotesk);
    font-size: 11px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
    font-weight: 600;
}
.vn-detail-list span {
    font-size: 14px;
    color: var(--text-hi);
    line-height: 1.4;
}


/* ============================================================
   HERO DELUXE — Earth backdrop + floating activity chips
   ============================================================ */
.hero-deluxe {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.hero-deluxe .hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
}
.hero-deluxe .hero-bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.45;
    /* Subtle ember-warm tint over the cool blue Earth — helps the brand
       not feel like "space wallpaper" + matches accent ember on text. */
    filter: saturate(0.85) hue-rotate(-10deg);
}
.hero-deluxe .hero-bg-grad {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 50%, transparent 0%, var(--bg-page) 75%),
        linear-gradient(180deg, transparent 0%, var(--bg-page) 85%);
}

/* Lift the headline + finder above the noise */
.hero-deluxe .hero-grid {
    position: relative;
    z-index: 1;
}

/* More vertical breathing room between rating-banner, eyebrow and headline
   now that the headline is larger. */
.hero-deluxe .rating-banner { margin-bottom: var(--s-6); }
.hero-deluxe .section-eyebrow { margin-bottom: var(--s-3); }

/* Display headline — larger + ember-tinted highlight on the <em> */
.hero-deluxe .t-display {
    font-size: clamp(40px, 7vw, 84px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin-bottom: var(--s-4);
}
.hero-deluxe .t-display em {
    color: var(--accent);
    font-style: italic;
    background: linear-gradient(135deg, var(--accent) 0%, var(--cta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Activity chips — 4 floating cards in the corners */
.hero-activity-feed {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.hero-activity-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--r-pill);
    background: rgba(15, 18, 24, 0.78);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    color: #fff;
    font-family: var(--font-grotesk);
    opacity: 0;
    animation: heroChipIn 14s ease-in-out infinite;
}
/* Chips 1+3 hug the left column (over the headline area, safe space).
   Chips 2+4 sit in the OUTER margins between viewport edge and the .shell
   container — never over the Plan Finder which lives in the right column. */
.hero-activity-chip-1 { top: 8%;  left: 2%;   animation-delay: 0s; }
.hero-activity-chip-3 { bottom: 18%; left: 2%; animation-delay: 7s; }
.hero-activity-chip-2 { top: 4%;  right: 2%;  animation-delay: 3.5s; }
.hero-activity-chip-4 { bottom: 4%; right: 2%; animation-delay: 10.5s; }
/* Below 1200px the right-side viewport margin collapses — the Finder fills
   that space — so right-chips would overlap. Hide them then. */
@media (max-width: 1200px) {
    .hero-activity-chip-2,
    .hero-activity-chip-4 { display: none; }
}
@keyframes heroChipIn {
    0%   { opacity: 0; transform: translateY(8px) scale(0.96); }
    5%   { opacity: 1; transform: translateY(0)  scale(1); }
    22%  { opacity: 1; transform: translateY(0)  scale(1); }
    28%  { opacity: 0; transform: translateY(-6px) scale(0.96); }
    100% { opacity: 0; transform: translateY(-6px) scale(0.96); }
}
.hero-activity-flag {
    font-size: 20px;
    line-height: 1;
}
.hero-activity-body {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.hero-activity-body strong {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}
.hero-activity-body span {
    font-size: 11px;
    font-family: var(--font-mono);
    color: rgba(255, 255, 255, 0.65);
}
/* Hide chips on small screens — too much noise on mobile */
@media (max-width: 960px) {
    .hero-activity-feed { display: none; }
}

/* ============================================================
   COUNTRY MARQUEE — two tilted rows of country photos auto-scroll
   in opposite directions. Top-20 destinations from /destinations/.
   ============================================================ */
.country-marquee {
    position: relative;
    padding: var(--s-6) 0;
    overflow: hidden;
    background: var(--bg-page);
}
.country-marquee-track-wrap {
    position: relative;
    transform: rotate(-2deg);
    margin: var(--s-3) -3% var(--s-3);
}
.country-marquee-track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: marqueeScroll 60s linear infinite;
}
.country-marquee-track.reverse {
    animation-direction: reverse;
    animation-duration: 75s;
}
.country-marquee-track:hover { animation-play-state: paused; }

@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.country-marquee-card {
    flex: none;
    width: 240px;
    height: 150px;
    border-radius: var(--r-md);
    overflow: hidden;
    position: relative;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    border: 1px solid var(--border-subtle);
    transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.country-marquee-card:hover {
    transform: scale(1.04);
    box-shadow: 0 10px 26px rgba(255, 163, 98, 0.3);
    border-color: var(--accent);
}
.country-marquee-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.country-marquee-card-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.7) 100%);
}
.country-marquee-card-label {
    position: absolute;
    left: 12px;
    bottom: 10px;
    color: #fff;
    z-index: 1;
}
.country-marquee-card-label strong {
    display: block;
    font-family: var(--font-grotesk);
    font-size: 15px;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.country-marquee-card-label span {
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
/* Edge masks so cards fade into the page edges rather than hard-cut */
.country-marquee::before,
.country-marquee::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}
.country-marquee::before { left: 0;   background: linear-gradient(90deg, var(--bg-page), transparent); }
.country-marquee::after  { right: 0;  background: linear-gradient(270deg, var(--bg-page), transparent); }

.country-marquee-head {
    text-align: center;
    margin-bottom: var(--s-3);
}
.country-marquee-head h2 {
    margin: 0 0 6px;
    font-family: var(--font-serif);
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 600;
    color: var(--text-hi);
}
.country-marquee-head p {
    margin: 0;
    color: var(--text-mute);
    font-size: 14px;
}

/* ============================================================
   STATS BAND — 4 big numbers with countup on scroll
   ============================================================ */
.stats-band {
    padding: var(--s-7) 0;
    background: linear-gradient(135deg, var(--bg-page) 0%, var(--bg-elev-1) 100%);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}
.stats-band-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
    text-align: center;
}
.stat-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.stat-cell-num {
    font-family: var(--font-mono);
    font-size: clamp(40px, 6vw, 80px);
    font-weight: 600;
    line-height: 1;
    color: var(--text-hi);
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--accent) 0%, var(--cta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stat-cell-label {
    font-family: var(--font-grotesk);
    font-size: 13px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}
@media (max-width: 720px) {
    .stats-band-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-5);
    }
}


/* ============================================================
   BENTO PRODUCTS — asymmetric grid: 60% eSIM + 40% VN + 4 stat tiles
   ============================================================ */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-3);
    margin-top: var(--s-5);
}
.bento-card-lg { grid-column: span 3; grid-row: span 2; }
.bento-card-md { grid-column: span 1; grid-row: span 2; }
.bento-stat-tile { grid-column: span 1; }

.bento-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    border: 1px solid var(--border-subtle);
    background: var(--bg-elev-1);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
    display: flex;
    flex-direction: column;
}
.bento-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

/* min-heights for visual presence; grid-column/row defined above */
.bento-card-lg.bento-card-lg { min-height: 480px; }
.bento-card-md.bento-card-md { min-height: 340px; }

.bento-card-content {
    position: relative;
    z-index: 1;
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    flex: 1;
}
.bento-card-lg .bento-card-content { padding: var(--s-6); }

.bento-card-tag {
    display: inline-block;
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-grotesk);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.bento-card-title {
    margin: 4px 0 0;
    font-family: var(--font-serif);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 600;
    line-height: 1;
    color: var(--text-hi);
}
.bento-card-lg .bento-card-title { font-size: clamp(36px, 5vw, 56px); }

.bento-card-desc {
    margin: var(--s-2) 0 0;
    color: var(--text-mute);
    font-size: 14px;
    line-height: 1.55;
    max-width: 460px;
}

.bento-card-feats {
    list-style: none;
    margin: var(--s-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bento-card-feats li {
    font-family: var(--font-grotesk);
    font-size: 13px;
    color: var(--text);
    padding-left: 22px;
    position: relative;
}
.bento-card-feats li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 12px;
    height: 6px;
    border-left: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(-45deg);
}

.bento-card-foot {
    margin-top: auto;
    padding-top: var(--s-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
}
.bento-card-price {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-mute);
}
.bento-card-price strong {
    color: var(--text-hi);
    font-size: 18px;
    font-weight: 600;
}
.bento-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--cta-ink, #fff);
    font-family: var(--font-grotesk);
    font-size: 13px;
    font-weight: 600;
    transition: background var(--dur-fast), transform var(--dur-fast);
}
.bento-card:hover .bento-card-cta {
    background: var(--cta);
    transform: translateX(2px);
}

/* eSIM card art — animated globe + rings */
.bento-card-art {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.65;
}
.bento-esim .bento-card-art {
    right: -40px;
    bottom: -40px;
    left: auto;
    top: auto;
    width: 360px;
    height: 360px;
}
.bento-rings,
.bento-orbit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.bento-orbit { animation: bentoOrbit 16s linear infinite; transform-origin: center; }
@keyframes bentoOrbit {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.bento-globe-core {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}
.bento-globe-core svg {
    width: 120px;
    height: 120px;
    animation: bentoGlobeSpin 30s linear infinite;
    transform-origin: center;
}
@keyframes bentoGlobeSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* VN card art — compact phone tucked into the bottom-right corner. Reduced
   from the initial size so it never overlaps the title/copy. The bento-vn
   content gets a small right-padding so text never runs into the phone. */
.bento-card-art-vn {
    right: -30px;
    top: auto;
    bottom: -30px;
    left: auto;
    width: 140px;
    height: 240px;
    opacity: 0.5;
}
.bento-vn .bento-card-content { padding-right: 100px; }
@media (max-width: 720px) {
    .bento-vn .bento-card-content { padding-right: var(--s-5); }
    .bento-card-art-vn { display: none; }
}
.bento-phone {
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    height: 210px;
    border-radius: 18px;
    background: linear-gradient(180deg, #1a1d24, #0f1218);
    border: 3px solid #1a1d24;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255,255,255,0.05);
    transform: rotate(8deg);
}
.bento-phone-screen {
    position: absolute;
    inset: 4px;
    border-radius: 18px;
    background: linear-gradient(180deg, #181b22, #14161c);
    overflow: hidden;
}
.bento-phone-notify {
    position: absolute;
    left: -20px;
    right: -20px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-grotesk);
    color: #1a1d24;
    transform: rotate(-8deg);
}
.bento-phone-notify-1 { top: 20px; animation: vnNotifyDrift 8s ease-in-out infinite; }
.bento-phone-notify-2 { top: 100px; animation: vnNotifyDrift 8s ease-in-out infinite reverse; animation-delay: 1.5s; }
@keyframes vnNotifyDrift {
    0%, 100% { transform: rotate(-8deg) translateY(0); }
    50%      { transform: rotate(-8deg) translateY(-6px); }
}
.bento-phone-notify-app {
    font-size: 16px;
    line-height: 1;
}
.bento-phone-notify div { display: flex; flex-direction: column; }
.bento-phone-notify strong { font-size: 10px; font-weight: 600; }
.bento-phone-notify span { font-size: 10px; color: rgba(26,29,36,0.65); font-family: var(--font-mono); }

/* Stat tiles row — 4 across, spans full grid */
.bento-stat-tile {
    grid-column: span 1;
    padding: var(--s-4);
    border-radius: var(--r-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-elev-1);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bento-stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}
.bento-stat-tile strong {
    font-family: var(--font-grotesk);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-hi);
}
.bento-stat-tile span {
    font-size: 12px;
    color: var(--text-mute);
    font-family: var(--font-grotesk);
}

@media (max-width: 960px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .bento-card-lg { grid-column: span 2; grid-row: auto; min-height: 360px; }
    .bento-card-md { grid-column: span 2; grid-row: auto; min-height: 280px; }
    .bento-stat-tile { grid-column: span 1; }
}
@media (max-width: 560px) {
    .bento-grid { grid-template-columns: 1fr; }
    .bento-stat-tile { grid-column: 1; }
}


/* ============================================================
   STATIC PAGES — Contact / Policy / API docs / Compatibility
   Shared "mx-page-hero" wrapper for consistent dark+ember look.
   ============================================================ */
.mx-page-hero {
    padding-top: var(--s-7);
    padding-bottom: var(--s-5);
}
.mx-page-hero-inner {
    max-width: 760px;
}
.mx-page-hero h1 {
    margin: var(--s-2) 0 var(--s-3);
    font-family: var(--font-serif);
    font-size: clamp(36px, 5vw, 60px);
    line-height: 1.05;
    font-weight: 600;
    color: var(--text-hi);
    letter-spacing: -0.01em;
}
.mx-page-hero h1 em {
    color: var(--accent);
    font-style: italic;
    background: linear-gradient(135deg, var(--accent) 0%, var(--cta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.mx-page-hero .lede {
    color: var(--text-mute);
    font-size: 16px;
    line-height: 1.6;
    max-width: 640px;
}

/* --- Contact ---------------------------------------------- */
.contact-channels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
}
.contact-channel {
    padding: var(--s-4);
    border-radius: var(--r-lg);
    border: 1px solid var(--border-subtle);
    background: var(--bg-elev-1);
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.contact-channel:hover {
    border-color: var(--accent);
    background: var(--bg-raised);
    transform: translateY(-2px);
}
.contact-channel-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}
.contact-channel strong {
    font-family: var(--font-grotesk);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-hi);
}
.contact-channel > span {
    font-size: 13px;
    color: var(--text);
    line-height: 1.4;
}
.contact-channel-meta {
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 12px !important;
    color: var(--text-mute) !important;
}
@media (max-width: 880px) { .contact-channels { grid-template-columns: 1fr; } }

.contact-card {
    padding: var(--s-6);
    border-radius: var(--r-lg);
    border: 1px solid var(--border-subtle);
    background: var(--bg-elev-1);
    max-width: 880px;
}
.contact-card-head {
    margin-bottom: var(--s-4);
}
.contact-card-head h2 {
    margin: 0 0 6px;
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 600;
    color: var(--text-hi);
}
.contact-card-head p {
    margin: 0;
    color: var(--text-mute);
    font-size: 14px;
    line-height: 1.5;
}
.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.contact-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
}
@media (max-width: 560px) { .contact-form-row { grid-template-columns: 1fr; } }
.contact-form-label {
    font-family: var(--font-grotesk);
    font-size: 12px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.dash-input-area {
    min-height: 140px;
    resize: vertical;
    font-family: var(--font-grotesk);
    line-height: 1.5;
}

/* --- Policy / Terms (long-form doc) ----------------------- */
.policy-doc {
    max-width: 760px;
    color: var(--text);
    font-size: 15px;
    line-height: 1.75;
}
.policy-doc h2,
.policy-doc h3,
.policy-doc h4 {
    margin-top: var(--s-6);
    margin-bottom: var(--s-2);
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--text-hi);
}
.policy-doc h2 { font-size: 24px; }
.policy-doc h3 { font-size: 18px; }
.policy-doc h4 { font-size: 16px; }
.policy-doc p { margin: 0 0 var(--s-3); }
.policy-doc ul,
.policy-doc ol { padding-left: 20px; margin: 0 0 var(--s-3); }
.policy-doc li { margin-bottom: 6px; }
.policy-doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.policy-doc a:hover { color: var(--cta); }
.policy-doc code,
.policy-doc pre {
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-size: 13px;
}
.policy-doc pre { padding: var(--s-3); overflow-x: auto; }

/* --- API docs wrapper ------------------------------------- */
.api-doc-wrap { padding: 0 0 var(--s-9); }
.api-doc-wrap .documentation-menu-wrapper {
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: var(--s-3);
}
.api-doc-wrap .sidebar-menu .menu > li > a {
    color: var(--text-hi);
    font-family: var(--font-grotesk);
    font-weight: 600;
    font-size: 14px;
}
.api-doc-wrap .drp-menu li a {
    color: var(--text-mute);
    font-size: 13px;
}
.api-doc-wrap .drp-menu li.active a,
.api-doc-wrap .drp-menu li a:hover { color: var(--accent); }


/* ============================================================
   COMPATIBILITY PAGE — full reference device list (in-page,
   not modal) + dual CTA at the bottom.
   ============================================================ */
.compat-page-list {
    padding-top: var(--s-5);
    padding-bottom: var(--s-5);
    max-width: 920px;
}
.compat-page-list-head {
    margin-bottom: var(--s-4);
}
.compat-page-list-head h2 {
    margin: 0 0 6px;
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 600;
    color: var(--text-hi);
}
.compat-page-list-head p {
    margin: 0;
    color: var(--text-mute);
    font-size: 14px;
    line-height: 1.55;
}

/* Search input — same vocab as ye-sim's all-devices search */
.compat-page-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 999px;
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    margin-bottom: var(--s-3);
    transition: border-color var(--dur-fast);
}
.compat-page-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.compat-page-search svg { color: var(--text-mute); flex: none; }
.compat-page-search input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--text-hi);
    font-family: var(--font-grotesk);
    font-size: 14px;
}
.compat-page-search input::placeholder { color: var(--text-mute); }

/* Tabs row — Apple / Android / Watches / Laptops / Other */
.compat-page-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    margin-bottom: var(--s-4);
    overflow-x: auto;
}
.compat-page-tab {
    flex: none;
    border: 0;
    background: transparent;
    color: var(--text-mute);
    font-family: var(--font-grotesk);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.compat-page-tab:hover { color: var(--text-hi); }
.compat-page-tab.is-active {
    background: var(--bg-page);
    color: var(--text-hi);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Brand sections — collapsible <details> */
.compat-page-section {
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    margin-bottom: var(--s-2);
    overflow: hidden;
}
.compat-page-section > summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    user-select: none;
}
.compat-page-section > summary::-webkit-details-marker { display: none; }
.compat-page-brand-icon {
    width: 24px; height: 24px;
    background: var(--brand-icon) center / contain no-repeat;
    /* Tinted to ember — same trick as country silhouettes */
    filter: brightness(0) saturate(100%) invert(70%) sepia(40%) saturate(800%) hue-rotate(355deg) brightness(100%) contrast(95%);
    flex: none;
}
.compat-page-brand-label {
    font-family: var(--font-grotesk);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-hi);
    flex: 1;
}
.compat-page-count {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
}
.compat-page-chevron {
    color: var(--text-mute);
    transition: transform var(--dur-fast);
}
.compat-page-section[open] .compat-page-chevron { transform: rotate(180deg); }

/* Device list inside open section */
.compat-page-device-list {
    list-style: none;
    margin: 0;
    padding: 0 18px 14px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px 18px;
    border-top: 1px solid var(--border-subtle);
    padding-top: 14px;
}
.compat-page-device {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 14px;
    color: var(--text-hi);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.compat-page-device svg { flex: none; }

.compat-page-note {
    margin-top: var(--s-3);
    padding: 14px 18px;
    border-radius: var(--r-md);
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    color: var(--text-mute);
    font-size: 13px;
    line-height: 1.55;
}

@media (max-width: 720px) {
    .compat-page-device-list { grid-template-columns: 1fr; }
}

/* ---- Bottom CTA grid (eSIM + Virtual Numbers) ---- */
.compat-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
}
.compat-cta-card {
    display: flex;
    align-items: flex-start;
    gap: var(--s-4);
    padding: var(--s-5);
    border-radius: var(--r-lg);
    border: 1px solid var(--border-subtle);
    background: var(--bg-elev-1);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.compat-cta-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}
.compat-cta-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.compat-cta-icon svg { width: 28px; height: 28px; }
.compat-cta-body { flex: 1; }
.compat-cta-tag {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bg-page);
    color: var(--text-mute);
    font-family: var(--font-grotesk);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
.compat-cta-card h3 {
    margin: 0 0 8px;
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--text-hi);
    line-height: 1.2;
}
.compat-cta-card p {
    margin: 0 0 var(--s-3);
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-mute);
}
.compat-cta-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    font-family: var(--font-grotesk);
    font-weight: 600;
    font-size: 14px;
    transition: transform var(--dur-fast);
}
.compat-cta-card:hover .compat-cta-action { transform: translateX(3px); }

@media (max-width: 720px) {
    .compat-cta-grid { grid-template-columns: 1fr; }
    .compat-cta-card { flex-direction: column; }
}


/* ============================================================
   PASSWORDLESS MAGIC-LINK auth — single-field "send me a link"
   ============================================================ */
.magic-form-fields {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin-top: var(--s-3);
}
.magic-form-foot {
    margin-top: var(--s-3);
    text-align: center;
    color: var(--text-mute);
    font-size: 12px;
    font-family: var(--font-grotesk);
}

.magic-sent {
    text-align: center;
    padding: var(--s-5) var(--s-4);
}
.magic-sent-icon {
    width: 88px;
    height: 88px;
    border-radius: 22px;
    background: var(--accent-soft);
    color: var(--accent);
    margin: var(--s-3) auto var(--s-4);
    display: flex;
    align-items: center;
    justify-content: center;
}
.magic-sent-tips {
    list-style: none;
    padding: 0;
    margin: var(--s-4) 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}
.magic-sent-tips li {
    padding: 10px 14px;
    border-radius: var(--r-md);
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
}
.magic-sent-actions {
    margin-top: var(--s-4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    flex-wrap: wrap;
}


/* ============================================================
   SIGN-IN MODAL — ye-sim style. Apple / Google / Email buttons.
   ============================================================ */
.signin-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-4);
}
.signin-modal[hidden] { display: none; }

.signin-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 8, 12, 0.88);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
}

.signin-modal-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.signin-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-mute);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.signin-modal-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-hi);
}

.signin-modal-title {
    margin: 0 0 var(--s-4);
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--text-hi);
    text-align: center;
    /* Symmetric padding so the title never collides with the absolute
       Back-pill (left) or Close-button (right). */
    padding: 0 44px;
}
@media (max-width: 480px) {
    .signin-modal-title { font-size: 20px; padding: 0 56px; }
}

.signin-modal-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.signin-modal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--r-pill);
    font-family: var(--font-grotesk);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: transform var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
    border: 1px solid transparent;
    cursor: pointer;
}
.signin-modal-btn:hover { transform: translateY(-1px); }

.signin-modal-btn-apple {
    background: #fff;
    color: #000;
}
.signin-modal-btn-apple:hover { background: #f2f2f2; color: #000; }

.signin-modal-btn-google {
    background: #ea4335;
    color: #fff;
}
.signin-modal-btn-google:hover { background: #d83b2d; color: #fff; }

.signin-modal-btn-email {
    background: var(--bg-page);
    color: var(--text-hi);
    border-color: var(--border-subtle);
}
.signin-modal-btn-email:hover {
    background: var(--bg-raised);
    border-color: var(--accent);
    color: var(--accent);
}

.signin-modal-btn-secondary {
    background: var(--bg-page);
    color: var(--text);
    border-color: var(--border-subtle);
    font-weight: 500;
}

.signin-modal-more {
    margin-top: 4px;
}
.signin-modal-more > summary {
    text-align: center;
    cursor: pointer;
    color: var(--text-mute);
    font-family: var(--font-grotesk);
    font-size: 13px;
    padding: 8px 0;
    list-style: none;
}
.signin-modal-more > summary::-webkit-details-marker { display: none; }
.signin-modal-more > summary:hover { color: var(--text-hi); }
.signin-modal-more[open] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.signin-modal-more[open] > summary { display: none; }

.signin-modal-legal {
    margin: var(--s-4) 0 var(--s-2);
    text-align: center;
    color: var(--text-mute);
    font-size: 12px;
    line-height: 1.55;
}
.signin-modal-legal a { color: var(--text); }
.signin-modal-legal a:hover { color: var(--accent); }

.signin-modal-classic {
    margin: 0;
    text-align: center;
    color: var(--text-mute);
    font-size: 13px;
}
.signin-modal-classic a {
    color: var(--accent);
    font-weight: 600;
}


/* ============================================================
   SIGN-IN MODAL — multi-step (options → email → sent) extras
   ============================================================ */
.signin-step { display: none; }
.signin-step.is-active { display: block; }

.signin-modal-back {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: var(--text-mute);
    font-family: var(--font-grotesk);
    font-size: 12px;
    cursor: pointer;
    transition: color var(--dur-fast), background var(--dur-fast);
}
.signin-modal-back:hover { color: var(--text-hi); background: rgba(255,255,255,0.06); }

.signin-modal-sub {
    text-align: center;
    color: var(--text-mute);
    font-size: 13px;
    line-height: 1.55;
    margin: -8px 0 var(--s-4);
}

.signin-email-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.signin-email-input {
    width: 100%;
    padding: 14px 18px;
    border-radius: var(--r-pill);
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    color: var(--text-hi);
    font-family: var(--font-grotesk);
    font-size: 15px;
    outline: 0;
    transition: border-color var(--dur-fast);
}
.signin-email-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.signin-email-input::placeholder { color: var(--text-mute); }

.signin-modal-btn-primary {
    background: var(--accent);
    color: var(--cta-ink, #fff);
}
.signin-modal-btn-primary:hover { background: var(--cta); }
.signin-modal-btn-primary[disabled] {
    background: var(--bg-elev-1);
    color: var(--text-mute);
    cursor: not-allowed;
    transform: none;
}
.signin-btn-spinner {
    animation: signinSpin 1s linear infinite;
}
@keyframes signinSpin {
    to { transform: rotate(360deg); }
}

.signin-email-error {
    color: var(--error, #f06360);
    font-family: var(--font-grotesk);
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(240, 99, 96, 0.1);
}

/* "Sent" state */
.signin-sent-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--s-3);
    border-radius: 18px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.signin-sent-tips {
    list-style: none;
    padding: 0;
    margin: var(--s-3) 0 var(--s-4);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.signin-sent-tips li {
    padding: 10px 14px;
    border-radius: var(--r-md);
    background: var(--bg-page);
    border: 1px solid var(--border-subtle);
    color: var(--text);
    font-size: 13px;
    line-height: 1.4;
}


/* ============================================================
   HELP CENTER — file-based KB index + article view.
   ============================================================ */
.help-hero { padding-bottom: var(--s-5); }

.help-search-form {
    position: relative;
    margin-top: var(--s-4);
    max-width: 640px;
}
.help-search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-mute);
    pointer-events: none;
}
.help-search-form input {
    width: 100%;
    padding: 16px 48px 16px 50px;
    border-radius: 999px;
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    color: var(--text-hi);
    font-family: var(--font-grotesk);
    font-size: 15px;
    outline: 0;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.help-search-form input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.help-search-form input::placeholder { color: var(--text-mute); }
.help-search-clear {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--bg-page);
    color: var(--text-mute);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
}
.help-search-clear:hover { color: var(--accent); }

/* Categories grid */
.help-categories-wrap { padding-bottom: var(--s-5); }
.help-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--s-4);
}
.help-category-card {
    border-radius: var(--r-lg);
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.help-category-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: var(--elev-3);
}

/* Thematic photo header (ye-sim style) */
.help-category-photo {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.help-category-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.help-category-card:hover .help-category-photo img { transform: scale(1.05); }
.help-category-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,13,18,0.1) 0%, rgba(10,13,18,0.55) 100%);
}
.help-category-photo-emoji {
    position: absolute;
    left: 14px;
    bottom: 12px;
    z-index: 1;
    font-size: 26px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

/* Body padding now that photo is edge-to-edge */
.help-category-card > .help-category-head,
.help-category-card > .help-category-desc,
.help-category-card > .help-category-list,
.help-category-card > .help-category-more {
    padding-left: var(--s-4);
    padding-right: var(--s-4);
}
.help-category-card > .help-category-head { padding-top: var(--s-3); }
.help-category-card > .help-category-list { padding-bottom: 4px; }
.help-category-card > .help-category-more { padding-bottom: var(--s-4); }

.help-category-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--s-2);
}
.help-category-desc { margin-bottom: var(--s-2) !important; }
.help-category-head h2 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-hi);
}
.help-category-count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-mute);
}
.help-category-desc {
    margin: 0;
    color: var(--text-mute);
    font-size: 13px;
    line-height: 1.55;
}
.help-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.help-category-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    margin: 0 -8px;
    border-radius: 8px;
    color: var(--text-hi);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.help-category-list a:hover {
    background: var(--bg-page);
    color: var(--accent);
}
.help-category-list svg {
    flex: none;
    color: var(--text-mute);
}
.help-category-list a:hover svg { color: var(--accent); }
.help-category-more {
    align-self: flex-start;
    color: var(--accent);
    font-family: var(--font-grotesk);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    margin-top: 4px;
}

/* Search results */
.help-results-wrap { padding-bottom: var(--s-5); }
.help-results-head {
    margin: 0 0 var(--s-4);
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 500;
    color: var(--text-hi);
}
.help-results-head em { color: var(--accent); font-style: normal; }
.help-results-head strong {
    color: var(--accent);
    font-family: var(--font-mono);
    font-weight: 600;
}
.help-results-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: var(--s-3);
}
.help-result-card {
    padding: var(--s-4);
    border-radius: var(--r-md);
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.help-result-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.help-result-cat {
    font-family: var(--font-grotesk);
    font-size: 11px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.help-result-card h3 {
    margin: 6px 0 6px;
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--text-hi);
}
.help-result-card p {
    margin: 0;
    font-size: 13px;
    color: var(--text-mute);
    line-height: 1.5;
}

.help-empty {
    padding: var(--s-5);
    border-radius: var(--r-md);
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    color: var(--text-mute);
    text-align: center;
}
.help-empty em { color: var(--accent); font-style: normal; }
.help-empty a { color: var(--accent); }

/* Bottom CTA */
.help-cta {
    padding: var(--s-5);
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--accent-soft) 0%, transparent 100%);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
}
.help-cta h2 {
    margin: 0 0 6px;
    font-family: var(--font-serif);
    font-size: 22px;
    color: var(--text-hi);
}
.help-cta p {
    margin: 0;
    color: var(--text-mute);
    font-size: 14px;
}

/* ---- Article view ---- */
.help-article-shell {
    padding-top: var(--s-5);
    padding-bottom: var(--s-9);
    max-width: 820px;
}
.help-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-family: var(--font-grotesk);
    font-size: 12px;
    color: var(--text-mute);
    margin-bottom: var(--s-4);
}
.help-breadcrumb a {
    color: var(--text-mute);
    text-decoration: none;
}
.help-breadcrumb a:hover { color: var(--accent); }
.help-breadcrumb span {
    color: var(--text-hi);
    font-weight: 600;
}
.help-breadcrumb svg { color: var(--text-dim, var(--text-mute)); }

.help-article-head {
    margin-bottom: var(--s-5);
}
.help-article-head h1 {
    margin: 0 0 var(--s-2);
    font-family: var(--font-serif);
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.15;
    font-weight: 600;
    color: var(--text-hi);
}
.help-article-lede {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-mute);
}
.help-article-body {
    max-width: none;
}
.help-article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-md);
    margin: var(--s-3) 0;
}
.help-article-foot {
    margin-top: var(--s-6);
    padding-top: var(--s-4);
    border-top: 1px solid var(--border-subtle);
}
.help-article-helpful {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    color: var(--text-mute);
    font-size: 14px;
}

.help-related {
    margin-top: var(--s-6);
    padding: var(--s-4);
    border-radius: var(--r-lg);
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
}
.help-related h3 {
    margin: 0 0 var(--s-3);
    font-family: var(--font-grotesk);
    font-size: 13px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.help-related ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.help-related a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-hi);
    text-decoration: none;
    font-size: 14px;
}
.help-related li:last-child a { border-bottom: 0; }
.help-related a:hover { color: var(--accent); }
.help-related svg { color: var(--text-mute); }
.help-related a:hover svg { color: var(--accent); }

.help-back-to {
    margin-top: var(--s-5);
}
.help-back-to a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-mute);
    font-family: var(--font-grotesk);
    font-size: 13px;
    text-decoration: none;
}
.help-back-to a:hover { color: var(--accent); }

@media (max-width: 720px) {
    .help-cta { flex-direction: column; align-items: flex-start; }
    .help-categories-grid { grid-template-columns: 1fr; }
    .help-results-list { grid-template-columns: 1fr; }
}


/* ============================================================
   MOBILE-FIRST PATCH — fills the @media gaps audit found on
   signin-modal, vn-detail, country-marquee, bento, help, compat,
   stats-band, contact-channels.
   ============================================================ */
@media (max-width: 720px) {
    /* VN detail page — number overflowed at 36px on 375vw */
    .vn-detail-shell { padding-top: var(--s-3); padding-bottom: var(--s-6); }
    .vn-detail-hero { padding: var(--s-4); }
    .vn-detail-number { font-size: 26px; letter-spacing: 0; }
    .vn-detail-flag { width: 36px; height: 26px; }
    .vn-pricing-card { padding: var(--s-3); }
    .vn-supports-grid { gap: var(--s-2); }
    .vn-service-pill .vn-service-icon { width: 38px; height: 38px; border-radius: 10px; }
    .vn-detail-list li { gap: 10px; }

    /* Country marquee — shrink cards on phones */
    .country-marquee-card { width: 180px; height: 116px; }
    .country-marquee-card-label strong { font-size: 13px; }
    .country-marquee::before, .country-marquee::after { width: 48px; }
    .country-marquee-head h2 { font-size: 22px; }

    /* Bento — drop oversized min-heights on stacked mobile layout */
    .bento-card-lg.bento-card-lg { min-height: 280px; }
    .bento-card-md.bento-card-md { min-height: 220px; }
    .bento-globe-core svg { width: 80px; height: 80px; }
    .bento-esim .bento-card-art { width: 200px; height: 200px; right: -30px; bottom: -30px; }
    .bento-card-content { padding: var(--s-4); }
    .bento-card-lg .bento-card-content { padding: var(--s-4); }

    /* Help center — relax 320 min for 320vw phones */
    .help-categories-grid { grid-template-columns: 1fr; }
    .help-results-list { grid-template-columns: 1fr; }
    .help-search-form input { font-size: 14px; padding: 14px 40px 14px 44px; }
    .help-search-icon svg { width: 18px; height: 18px; }
    .help-article-head h1 { font-size: 24px; }

    /* Compatibility — bigger tap target for tabs */
    .compat-page-tab { font-size: 14px; padding: 12px 18px; }
    .compat-page-list-head h2 { font-size: 22px; }

    /* Contact channels — go 1-col earlier (already at 880, but tighten copy) */
    .contact-channel { padding: var(--s-3); }
    .contact-card { padding: var(--s-4); }
    .contact-card-head h2 { font-size: 22px; }

    /* Stats band — 4 huge gradient numbers cramped on phone */
    .stats-band { padding: var(--s-5) 0; }
    .stat-cell-num { font-size: 36px; }

    /* Sign-in modal — close + back chip sizing */
    .signin-modal { padding: var(--s-3); }
    .signin-modal-card { padding: var(--s-4); }
    .signin-modal-close { top: 10px; right: 10px; width: 28px; height: 28px; }
    .signin-modal-back { top: 10px; left: 10px; padding: 5px 9px; font-size: 11px; }
    .signin-modal-options { gap: 8px; }
    .signin-modal-btn { padding: 12px 16px; font-size: 14px; }

    /* MX page hero (contact / policy / api) */
    .mx-page-hero { padding-top: var(--s-5); padding-bottom: var(--s-4); }
    .mx-page-hero h1 { font-size: 30px; }
}

@media (max-width: 380px) {
    /* iPhone SE / older Android — extra-tight */
    .vn-detail-number { font-size: 22px; }
    .country-marquee-card { width: 160px; height: 104px; }
    .stat-cell-num { font-size: 30px; }
    .help-article-head h1 { font-size: 22px; }
    .mx-page-hero h1 { font-size: 26px; }
}


/* Dashboard profile-completion nudge — shown when magic-link signup hasn't
   added a name yet (Stripe / KYC will reject without one). */
.dash-profile-nudge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: 14px 18px;
    border-radius: var(--r-md);
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    margin-bottom: var(--s-4);
}
.dash-profile-nudge strong {
    display: block;
    font-family: var(--font-grotesk);
    color: var(--text-hi);
    font-size: 14px;
    font-weight: 600;
}
.dash-profile-nudge span {
    color: var(--text-mute);
    font-size: 13px;
}
.dash-profile-nudge .btn { flex: none; }
@media (max-width: 560px) {
    .dash-profile-nudge { flex-direction: column; align-items: flex-start; }
}


/* ============================================================
   HELP ARTICLE — per-article hero photo + category tag + thumbs
   ============================================================ */
.help-article-cat-tag {
    display: inline-block;
    font-family: var(--font-grotesk);
    font-size: 12px;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 8px;
}
.help-article-hero {
    margin: 0 0 var(--s-5);
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    position: relative;
}
.help-article-hero img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.help-article-hero figcaption {
    position: absolute;
    right: 10px;
    bottom: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(6,8,12,0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: rgba(255,255,255,0.8);
    font-family: var(--font-grotesk);
    font-size: 10px;
}

/* Search result cards — now with thumbnail on the left */
.help-result-card {
    display: flex;
    gap: var(--s-3);
    align-items: stretch;
}
.help-result-thumb {
    flex: none;
    width: 110px;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--bg-page);
}
.help-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.help-result-body { min-width: 0; }
@media (max-width: 480px) {
    .help-result-card { flex-direction: column; }
    .help-result-thumb { width: 100%; aspect-ratio: 16/9; }
}


/* ============================================================
   ABOUT PAGE — ye-sim style: hero polaroids, trust stats,
   alternating pillars, leadership, timeline, values, HQ.
   ============================================================ */
.about-hero { padding: var(--s-7) 0 var(--s-5); text-align: center; }
.about-hero-head { max-width: 720px; margin: 0 auto; }
.about-hero-head h1 {
    margin: var(--s-2) 0 var(--s-3);
    font-family: var(--font-serif);
    font-size: clamp(36px, 6vw, 64px);
    line-height: 1.05;
    font-weight: 600;
    color: var(--text-hi);
    letter-spacing: -0.02em;
}
.about-hero-head h1 em {
    font-style: italic;
    background: linear-gradient(135deg, var(--accent) 0%, var(--cta) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.about-hero-head .lede { max-width: 620px; margin: 0 auto; color: var(--text-mute); }

/* Tilted polaroid row */
.about-polaroids {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-6);
    flex-wrap: wrap;
}
.about-polaroid {
    position: relative;
    width: 280px;
    border-radius: var(--r-md);
    overflow: hidden;
    text-decoration: none;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 14px 36px rgba(0,0,0,0.32);
    transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.about-polaroid img { display: block; width: 100%; height: 230px; object-fit: cover; }
.about-polaroid span {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 28px 16px 14px;
    background: linear-gradient(180deg, transparent, rgba(6,8,12,0.85));
    color: #fff; font-family: var(--font-grotesk); font-weight: 600; font-size: 14px;
}
.about-polaroid-1 { transform: rotate(-4deg); }
.about-polaroid-2 { transform: rotate(1deg) translateY(-14px); z-index: 2; box-shadow: 0 20px 48px rgba(0,0,0,0.4); }
.about-polaroid-3 { transform: rotate(4deg); }
.about-polaroid:hover { transform: rotate(0) translateY(-6px) scale(1.02); box-shadow: 0 24px 56px rgba(255,163,98,0.28); border-color: var(--accent); z-index: 3; }

/* Trust stats */
.about-trust { padding: var(--s-7) 0; text-align: center; }
.about-trust h2 {
    margin: 0 0 var(--s-5);
    font-family: var(--font-serif); font-size: clamp(24px, 4vw, 38px); font-weight: 600; color: var(--text-hi);
}
.about-stat-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); max-width: 880px; margin: 0 auto;
}
.about-stat-card {
    padding: var(--s-4) var(--s-3);
    border-radius: var(--r-lg);
    background: var(--bg-elev-1); border: 1px solid var(--border-subtle);
    display: flex; flex-direction: column; gap: 4px;
}
.about-stat-v {
    font-family: var(--font-mono); font-size: clamp(22px, 3vw, 30px); font-weight: 600; color: var(--text-hi);
}
.about-stat-rating { color: var(--success); }
.about-stat-k { font-family: var(--font-grotesk); font-size: 12px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.05em; }

/* Pillars (vision / mission / expertise) */
.about-pillars { padding: var(--s-6) 0; display: flex; flex-direction: column; gap: var(--s-6); }
.about-pillar {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: center;
}
.about-pillar.is-reverse .about-pillar-text { order: 2; }
.about-pillar-eyebrow {
    font-family: var(--font-grotesk); font-size: 12px; font-weight: 600; color: var(--accent);
    text-transform: uppercase; letter-spacing: 0.08em;
}
.about-pillar-text h3 {
    margin: var(--s-2) 0 var(--s-3);
    font-family: var(--font-serif); font-size: clamp(24px, 3.5vw, 34px); font-weight: 600; color: var(--text-hi); line-height: 1.15;
}
.about-pillar-text p { color: var(--text-mute); font-size: 16px; line-height: 1.65; max-width: 520px; }
.about-pillar-img {
    border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-subtle); box-shadow: var(--elev-2);
}
.about-pillar-img img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* Leadership */
.about-team { padding: var(--s-6) 0; text-align: center; }
.about-team h2 { margin: 0 0 var(--s-5); font-family: var(--font-serif); font-size: clamp(24px, 4vw, 38px); font-weight: 600; color: var(--text-hi); }
.about-team-grid { display: flex; justify-content: center; }
.about-team-card-lead {
    display: grid; grid-template-columns: 280px 1fr; gap: var(--s-5); align-items: center;
    max-width: 820px; text-align: left;
    padding: var(--s-5); border-radius: var(--r-lg);
    background: var(--bg-elev-1); border: 1px solid var(--border-subtle);
}
.about-team-photo { border-radius: var(--r-md); overflow: hidden; }
.about-team-photo img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.about-team-role { font-family: var(--font-grotesk); font-size: 12px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; }
.about-team-meta h3 { margin: 6px 0 var(--s-3); font-family: var(--font-serif); font-size: 28px; font-weight: 600; color: var(--text-hi); }
.about-team-meta p { color: var(--text); font-size: 15px; line-height: 1.6; font-style: italic; }
.about-team-loc { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-3); color: var(--text-mute); font-family: var(--font-grotesk); font-size: 13px; }
.about-team-loc svg { color: var(--accent); }

/* Timeline */
.about-timeline { padding: var(--s-6) 0; }
.about-timeline-head { text-align: center; max-width: 640px; margin: 0 auto var(--s-5); }
.about-timeline-head h2 { margin: 0 0 8px; font-family: var(--font-serif); font-size: clamp(24px, 4vw, 38px); font-weight: 600; color: var(--text-hi); }
.about-timeline-head p { color: var(--text-mute); font-size: 15px; }
.about-timeline-track {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3);
}
.about-milestone {
    padding: var(--s-4); border-radius: var(--r-md);
    background: var(--bg-elev-1); border: 1px solid var(--border-subtle);
    border-top: 3px solid var(--accent);
}
.about-milestone-year {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent);
    font-family: var(--font-mono); font-size: 13px; font-weight: 600; margin-bottom: 10px;
}
.about-milestone h4 { margin: 0 0 8px; font-family: var(--font-grotesk); font-size: 16px; font-weight: 600; color: var(--text-hi); }
.about-milestone p { margin: 0; color: var(--text-mute); font-size: 13px; line-height: 1.5; }

/* Values */
.about-values { padding: var(--s-6) 0; }
.about-values h2 { margin: 0 0 var(--s-5); text-align: center; font-family: var(--font-serif); font-size: clamp(24px, 4vw, 38px); font-weight: 600; color: var(--text-hi); }
.about-values-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-3); }
.about-value {
    padding: var(--s-4); border-radius: var(--r-lg);
    background: var(--bg-elev-1); border: 1px solid var(--border-subtle);
    display: flex; flex-direction: column; gap: 8px;
}
.about-value-icon {
    width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent);
    display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.about-value h3 { margin: 0; font-family: var(--font-grotesk); font-size: 16px; font-weight: 600; color: var(--text-hi); }
.about-value p { margin: 0; color: var(--text-mute); font-size: 13px; line-height: 1.55; }
.about-value-feature {
    grid-row: span 1; padding: 0; position: relative; overflow: hidden; min-height: 320px;
}
.about-value-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-value-overlay {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    padding: var(--s-5);
    background: linear-gradient(180deg, transparent, rgba(6,8,12,0.9));
}
.about-value-overlay h3 { color: #fff; font-family: var(--font-serif); font-size: 24px; margin: 0 0 6px; }
.about-value-overlay p { color: rgba(255,255,255,0.85); font-size: 14px; }

/* HQ */
.about-hq { padding: var(--s-6) 0; }
.about-hq-card { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-subtle); }
.about-hq-card img { display: block; width: 100%; height: 380px; object-fit: cover; }
.about-hq-overlay {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: var(--s-6);
    background: linear-gradient(180deg, transparent, rgba(6,8,12,0.88));
}
.about-hq-pin { font-family: var(--font-grotesk); font-size: 13px; color: var(--accent); font-weight: 600; }
.about-hq-overlay h2 { margin: 6px 0 6px; font-family: var(--font-serif); font-size: clamp(28px, 4vw, 42px); color: #fff; }
.about-hq-overlay p { margin: 0; color: rgba(255,255,255,0.85); font-size: 15px; }

/* Mobile */
@media (max-width: 880px) {
    .about-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .about-pillar, .about-pillar.is-reverse .about-pillar-text { grid-template-columns: 1fr; order: 0; }
    .about-pillar-img { order: -1; }
    .about-team-card-lead { grid-template-columns: 1fr; text-align: center; }
    .about-team-photo { max-width: 220px; margin: 0 auto; }
    .about-team-loc { justify-content: center; }
    .about-timeline-track { grid-template-columns: repeat(2, 1fr); }
    .about-values-grid { grid-template-columns: 1fr; }
    .about-polaroid { width: 240px; }
    .about-polaroid-1, .about-polaroid-2, .about-polaroid-3 { transform: none; }
}
@media (max-width: 520px) {
    .about-stat-grid { grid-template-columns: 1fr; }
    .about-timeline-track { grid-template-columns: 1fr; }
}


/* ============================================================
   REVIEWS MARQUEE — shared, infinite-scroll, 2 rows, 24 cards
   ============================================================ */
.reviews-marquee {
    padding: var(--s-7) 0;
    overflow: hidden;
    position: relative;
}
.reviews-marquee-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto var(--s-5);
}
.reviews-marquee-head h2 {
    margin: var(--s-2) 0 var(--s-2);
    font-family: var(--font-serif);
    font-size: clamp(24px, 4vw, 38px);
    font-weight: 600;
    color: var(--text-hi);
}
.reviews-marquee-head p {
    margin: 0 auto var(--s-3);
    color: var(--text-mute);
    font-size: 15px;
    max-width: 560px;
}
.reviews-marquee-badges {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.reviews-marquee-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.reviews-marquee-row { overflow: hidden; }
.reviews-marquee-track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: revScroll 80s linear infinite;
}
.reviews-marquee-track.reverse {
    animation-direction: reverse;
    animation-duration: 95s;
}
.reviews-marquee-track:hover { animation-play-state: paused; }
@keyframes revScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.rev-card {
    flex: none;
    width: 340px;
    padding: var(--s-4);
    border-radius: var(--r-md);
    background: var(--bg-elev-1);
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rev-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rev-card-flag {
    font-size: 22px;
    line-height: 1;
    flex: none;
}
.rev-card-id {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.rev-card-id strong {
    font-family: var(--font-grotesk);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-hi);
}
.rev-card-id span {
    font-size: 12px;
    color: var(--text-mute);
}
.rev-card-stars {
    color: var(--accent);
    font-size: 12px;
    letter-spacing: 1px;
    flex: none;
}
.rev-card h4 {
    margin: 0;
    font-family: var(--font-grotesk);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-hi);
    line-height: 1.35;
}
.rev-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-mute);
}

/* Edge fades */
.reviews-marquee::before,
.reviews-marquee::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}
.reviews-marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-page), transparent); }
.reviews-marquee::after  { right: 0; background: linear-gradient(270deg, var(--bg-page), transparent); }

.stats-badge-mute {
    background: var(--bg-elev-1);
    color: var(--text-mute);
    border: 1px solid var(--border-subtle);
}

@media (max-width: 720px) {
    .rev-card { width: 280px; }
    .reviews-marquee::before, .reviews-marquee::after { width: 48px; }
}
@media (prefers-reduced-motion: reduce) {
    .reviews-marquee-track { animation: none; flex-wrap: nowrap; overflow-x: auto; }
}


/* Sign-in method banner on the (passwordless) security page */
.dash-signin-method {
    display: flex; align-items: center; gap: 12px;
    max-width: 560px; margin-bottom: var(--s-4);
    padding: 14px 16px; border-radius: var(--r-md);
    background: var(--accent-soft); border: 1px solid var(--accent);
}
.dash-signin-method-icon {
    width: 38px; height: 38px; border-radius: 10px; flex: none;
    background: var(--bg-page); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
}
.dash-signin-method strong { display:block; font-family: var(--font-grotesk); font-size: 14px; color: var(--text-hi); }
.dash-signin-method span { font-size: 13px; color: var(--text-mute); }