/* AUTO-GENERATED by scripts/build-destinations.mjs — extracted from esim/index.html.
   Single source of truth for the destination-page styling (cards/modal/chrome match /esim).
   Do not edit by hand; re-run the generator. */

    /* ============================================================
     * Background gradient — Frame 1 cinematic mood (§5.1) [copied verbatim from home]
     * ========================================================== */
    /* Liquid aurora floor — component styles in /css/liquid-aurora.css */
    html { background: var(--bg-primary); }
    body { background: transparent; position: relative; }

    /* ============================================================
     * FRAME 1 — Navbar (NOT sticky initially, becomes sticky past hero) [copied verbatim]
     * ========================================================== */
    .nav {
      position: absolute;
      inset-block-start: 0;
      inset-inline: 0;
      z-index: 100;
      transition: all var(--duration-medium) var(--ease-snap);
    }

    .nav.sticky {
      position: fixed;
      background: rgba(248, 250, 251, 0.85);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-block-end: 1px solid var(--border-subtle);
      box-shadow: 0 1px 12px rgba(10, 26, 46, 0.05);
    }

    @media (prefers-color-scheme: dark) {
      .nav.sticky {
        background: rgba(5, 13, 26, 0.85);
      }
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      block-size: 72px;
    }

    .nav-logo {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      text-decoration: none;
      color: var(--text-primary);
      font-family: var(--font-display);
      font-weight: var(--weight-syne-extrabold);
      font-size: var(--text-xl);
      letter-spacing: -0.02em;
    }

    .nav-logo-svg {
      inline-size: 36px;
      block-size: 36px;
      flex-shrink: 0;
    }

    .nav-logo-svg .cls-1 { fill: var(--wyra-cyan); }
    .nav-logo-svg .cls-2 { fill: var(--wyra-navy); }

    @media (prefers-color-scheme: dark) {
      .nav-logo-svg .cls-2 { fill: var(--wyra-white); }
    }

    .nav-logo-svg #logo-bridge > *,
    .nav-logo-svg #logo-w > * {
      opacity: 0;
      clip-path: inset(0 100% 0 0);
      animation: logo-reveal 600ms var(--ease-wyra) forwards;
    }

    .nav-logo-svg #logo-bridge > *:nth-child(1) { animation-delay:   0ms; }
    .nav-logo-svg #logo-bridge > *:nth-child(2) { animation-delay: 100ms; }
    .nav-logo-svg #logo-bridge > *:nth-child(3) { animation-delay: 100ms; }
    .nav-logo-svg #logo-w      > *:nth-child(1) { animation-delay: 300ms; }
    .nav-logo-svg #logo-w      > *:nth-child(2) { animation-delay: 400ms; }
    .nav-logo-svg #logo-w      > *:nth-child(3) { animation-delay: 500ms; }

    @keyframes logo-reveal {
      from { opacity: 0; clip-path: inset(0 100% 0 0); }
      to   { opacity: 1; clip-path: inset(0 0 0 0); }
    }

    .nav-logo-wordmark {
      display: none;
    }

    @media (min-width: 640px) {
      .nav-logo-wordmark { display: inline; }
    }

    .nav-services {
      display: none;
      align-items: center;
      gap: var(--space-1);
      padding: var(--space-1);
      background: var(--bg-secondary);
      border: 1px solid var(--border-subtle);
      border-radius: 100px;
      transition: all var(--duration-medium) var(--ease-wyra);
    }

    @media (min-width: 1024px) {
      .nav-services { display: inline-flex; }
    }

    .nav-pill {
      display: inline-flex;
      align-items: center;
      gap: var(--space-1);
      padding-block: var(--space-2);
      padding-inline: var(--space-4);
      border-radius: 100px;
      font-family: var(--font-body);
      font-size: var(--text-sm);
      font-weight: var(--weight-poppins-medium);
      color: var(--text-secondary);
      text-decoration: none;
      transition: all var(--duration-quick) var(--ease-snap);
      white-space: nowrap;
    }

    .nav-pill:hover { color: var(--text-primary); background: var(--wyra-cyan-mist); }
    .nav-pill.is-active { color: var(--wyra-cyan-deep); }
    .nav-pill.is-active::before {
      content: "";
      inline-size: 6px;
      block-size: 6px;
      border-radius: 50%;
      background: var(--wyra-cyan);
    }
    .nav-pill .pill-emoji { font-size: 1em; line-height: 1; }

    .nav.sticky .nav-pill {
      padding-inline: var(--space-2);
      font-size: 0;
      gap: 0;
    }
    .nav.sticky .nav-pill .pill-emoji { font-size: var(--text-base); }
    .nav.sticky .nav-pill .pill-label { display: none; }

    .nav-right {
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }

    .nav-lang {
      display: inline-flex;
      align-items: center;
      gap: var(--space-1);
      padding-block: var(--space-2);
      padding-inline: var(--space-3);
      background: transparent;
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      font-family: var(--font-body);
      font-size: var(--text-sm);
      font-weight: var(--weight-poppins-medium);
      color: var(--text-secondary);
      cursor: pointer;
      transition: all var(--duration-quick) var(--ease-snap);
    }
    .nav-lang:hover { background: var(--wyra-cyan-mist); color: var(--text-primary); }
    .nav-lang .lang-globe { inline-size: 14px; block-size: 14px; }

    .nav-cta { padding-block: var(--space-2); padding-inline: var(--space-4); font-size: var(--text-sm); }

    @media (max-width: 1023px) {
      .nav-services-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 40px;
        block-size: 40px;
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        color: var(--text-secondary);
        cursor: pointer;
        background: transparent;
      }
    }

    @media (min-width: 1024px) {
      .nav-services-toggle { display: none; }
    }

    /* Footer [copied verbatim from home] */
    .footer {
      padding-block: var(--space-16) var(--space-8);
      padding-inline: clamp(var(--space-4), 5vw, var(--space-16));
      background: var(--wyra-navy-deep);
      color: rgba(255, 255, 255, 0.7);
      position: relative;
    }

    .footer::before {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block-start: 0;
      block-size: 2px;
      background: linear-gradient(90deg, transparent 0%, var(--wyra-cyan) 50%, transparent 100%);
    }

    .footer-statement {
      max-inline-size: 80rem;
      margin-inline: auto;
      margin-block-end: var(--space-16);
      font-family: var(--font-display);
      font-weight: var(--weight-syne-semibold);
      font-size: clamp(1.5rem, 3.5vw, 2.5rem);
      line-height: 1.2;
      letter-spacing: -0.02em;
      color: var(--wyra-white);
      text-align: center;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-8);
      max-inline-size: 80rem;
      margin-inline: auto;
      margin-block-end: var(--space-12);
    }

    @media (min-width: 768px) {
      .footer-grid { grid-template-columns: repeat(4, 1fr); }
    }

    .footer-col-title {
      font-family: var(--font-display);
      font-weight: var(--weight-syne-semibold);
      font-size: var(--text-sm);
      color: var(--wyra-white);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-block-end: var(--space-4);
    }

    .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .footer-col a {
      font-family: var(--font-body);
      font-size: var(--text-sm);
      color: rgba(255, 255, 255, 0.6);
      transition: color var(--duration-quick) var(--ease-snap);
    }
    .footer-col a:hover { color: var(--wyra-cyan-glow); }

    .footer-bottom {
      max-inline-size: 80rem;
      margin-inline: auto;
      padding-block-start: var(--space-6);
      border-block-start: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      font-family: var(--font-body);
      font-size: var(--text-xs);
      color: rgba(255, 255, 255, 0.4);
    }

    .footer-langs {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
    }

    .footer-lang {
      padding-block: var(--space-1);
      padding-inline: var(--space-2);
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 6px;
      color: rgba(255, 255, 255, 0.6);
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: var(--weight-poppins-medium);
      cursor: pointer;
      transition: all var(--duration-quick) var(--ease-snap);
    }
    .footer-lang:hover           { color: var(--wyra-cyan-glow); border-color: rgba(77, 221, 240, 0.3); }
    .footer-lang[aria-current="true"] { color: var(--wyra-white); background: rgba(0, 196, 216, 0.15); border-color: var(--wyra-cyan); }

    /* ============================================================
     * Mobile drawer + nav lang dropdown [copied verbatim from home]
     * ========================================================== */
    .mobile-drawer {
      position: fixed;
      inset-block-start: 72px;
      inset-inline: 0;
      inset-block-end: 0;
      background: var(--bg-primary);
      z-index: 99;
      overflow-y: auto;
      overscroll-behavior: contain;
      visibility: hidden;
      opacity: 0;
      transform: translateY(-10px);
      transition:
        opacity var(--duration-medium) var(--ease-wyra),
        transform var(--duration-medium) var(--ease-wyra),
        visibility 0s linear var(--duration-medium);
      padding-block-end: max(var(--space-8), env(safe-area-inset-bottom));
    }

    .mobile-drawer.open {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
      transition:
        opacity var(--duration-medium) var(--ease-wyra),
        transform var(--duration-medium) var(--ease-wyra);
    }

    @media (min-width: 1024px) {
      .mobile-drawer { display: none; }
    }

    .drawer-inner {
      padding-block: var(--space-6);
      padding-inline: clamp(var(--space-4), 5vw, var(--space-8));
      max-inline-size: 640px;
      margin-inline: auto;
    }

    .drawer-section { margin-block-end: var(--space-8); }

    .drawer-section-title {
      font-family: var(--font-display);
      font-size: var(--text-xs);
      font-weight: var(--weight-syne-semibold);
      color: var(--wyra-cyan-deep);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      margin-block-end: var(--space-3);
    }

    .drawer-link {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding-block: var(--space-3);
      font-family: var(--font-body);
      font-size: var(--text-base);
      font-weight: var(--weight-poppins-semibold);
      color: var(--text-primary);
      text-decoration: none;
      border-block-end: 1px solid var(--border-subtle);
      transition: color var(--duration-quick) var(--ease-snap);
      min-block-size: 44px;
    }
    .drawer-link:hover { color: var(--wyra-cyan-deep); }
    .drawer-link .drawer-link-icon {
      font-size: 1.25rem;
      line-height: 1;
      inline-size: 28px;
      display: inline-flex;
      justify-content: center;
    }

    .drawer-lang { display: flex; flex-wrap: wrap; gap: var(--space-2); }

    .drawer-lang .lang-btn,
    .nav-lang-list .lang-btn {
      padding-block: var(--space-2);
      padding-inline: var(--space-3);
      background: var(--bg-secondary);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      font-family: var(--font-body);
      font-size: var(--text-sm);
      font-weight: var(--weight-poppins-medium);
      color: var(--text-secondary);
      cursor: pointer;
      transition: all var(--duration-quick) var(--ease-snap);
      min-block-size: 36px;
    }
    .drawer-lang .lang-btn:hover,
    .nav-lang-list .lang-btn:hover {
      background: var(--wyra-cyan-mist);
      color: var(--text-primary);
      border-color: var(--wyra-cyan);
    }
    .drawer-lang .lang-btn.active,
    .nav-lang-list .lang-btn.active {
      background: var(--wyra-cyan);
      color: var(--wyra-white);
      border-color: var(--wyra-cyan);
    }

    .drawer-text {
      font-family: var(--font-body);
      font-size: var(--text-sm);
      color: var(--text-secondary);
      line-height: 1.6;
    }

    .drawer-apps { display: flex; flex-wrap: wrap; gap: var(--space-3); }

    .drawer-app {
      display: inline-flex;
      align-items: center;
      padding-block: var(--space-3);
      padding-inline: var(--space-5);
      background: var(--wyra-navy);
      color: var(--wyra-white);
      border-radius: 10px;
      font-family: var(--font-body);
      font-size: var(--text-sm);
      font-weight: var(--weight-poppins-semibold);
      text-decoration: none;
      transition: background var(--duration-quick) var(--ease-snap);
      min-block-size: 44px;
    }
    .drawer-app:hover { background: var(--wyra-navy-light); }

    .nav-services-toggle svg line {
      transition: transform var(--duration-medium) var(--ease-snap), opacity var(--duration-medium) var(--ease-snap);
      transform-origin: center;
    }
    .nav-services-toggle.open svg line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .nav-services-toggle.open svg line:nth-child(2) { opacity: 0; }
    .nav-services-toggle.open svg line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    body.drawer-open { overflow: hidden; }

    .nav-lang-wrap { position: relative; }

    .nav-lang-menu {
      position: absolute;
      inset-block-start: calc(100% + var(--space-2));
      inset-inline-end: 0;
      min-inline-size: 240px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-subtle);
      border-radius: 12px;
      padding: var(--space-2);
      box-shadow: 0 12px 32px rgba(10, 26, 46, 0.12);
      opacity: 0;
      transform: translateY(-8px);
      visibility: hidden;
      transition:
        opacity var(--duration-quick) var(--ease-snap),
        transform var(--duration-quick) var(--ease-snap),
        visibility 0s linear var(--duration-quick);
      z-index: 50;
    }

    .nav-lang-menu.open {
      opacity: 1;
      transform: translateY(0);
      visibility: visible;
      transition:
        opacity var(--duration-quick) var(--ease-snap),
        transform var(--duration-quick) var(--ease-snap);
    }

    .nav-lang-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-1);
    }
    .nav-lang-list .lang-btn { text-align: start; }

    /* ============================================================
     * eSIM landing — page sections (NEW; chrome above is verbatim home)
     * ========================================================== */
    html { scroll-padding-block-start: 88px; }
    @media (prefers-reduced-motion: no-preference) {
      html { scroll-behavior: smooth; }
    }

    /* Hero shell — reused from home .hero (light cinematic; dark-mode override in body block above).
       B2 will replace the inner .esim-hero content (WyraGlobe Three.js) WITHOUT touching this shell. */
    .hero {
      padding-block-start: calc(72px + var(--space-24));
      padding-block-end: var(--space-16);
      padding-inline: clamp(var(--space-4), 5vw, var(--space-16));
      text-align: center;
      position: relative;
      /* Light: transparent so the aurora reads through; navy text has ample contrast on the pastel. */
      background: transparent;
    }

    /* Dark: scrim behind the hero copy so it stays legible over the aurora (placed AFTER the .hero rule so it wins in dark). */
    @media (prefers-color-scheme: dark) {
      .hero { background: radial-gradient(ellipse 64% 56% at 50% 42%, rgba(5, 13, 26, 0.58) 0%, rgba(5, 13, 26, 0) 72%); }
    }

    @media (max-width: 640px) {
      .hero {
        padding-block-start: calc(72px + var(--space-12));
        padding-block-end: var(--space-12);
      }
    }

    .esim-hero { max-inline-size: 860px; margin-inline: auto; }

    .esim-hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding-block: var(--space-1);
      padding-inline: var(--space-3);
      border: 1px solid var(--wyra-cyan);
      border-radius: 100px;
      background: var(--wyra-cyan-mist);
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: var(--weight-poppins-semibold);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--wyra-cyan-deep);
      margin-block-end: var(--space-6);
    }

    .esim-hero-title {
      font-family: var(--font-display);
      font-weight: var(--weight-syne-extrabold);
      font-size: clamp(2.25rem, 7vw, 4.5rem);
      line-height: 1.02;
      letter-spacing: -0.035em;
      color: var(--text-primary);
      max-inline-size: 16ch;
      margin-inline: auto;
      margin-block-end: var(--space-6);
    }

    .esim-hero-arc {
      display: block;
      inline-size: min(320px, 70vw);
      block-size: auto;
      margin-inline: auto;
      margin-block-end: var(--space-8);
    }
    .esim-hero-arc path { stroke: var(--wyra-cyan); }
    .esim-hero-arc .arc-dot-home { fill: var(--wyra-navy); }
    .esim-hero-arc .arc-dot-away { fill: var(--wyra-cyan); }
    @media (prefers-color-scheme: dark) {
      .esim-hero-arc .arc-dot-home { fill: var(--wyra-white); }
    }

    .esim-hero-sub {
      max-inline-size: 600px;
      margin-inline: auto;
      font-family: var(--font-body);
      font-weight: var(--weight-poppins-regular);
      font-size: var(--text-xl);
      line-height: 1.55;
      color: var(--text-secondary);
      margin-block-end: var(--space-8);
    }

    .esim-hero-cta { font-size: var(--text-base); }

    /* Hero load reveals (above-fold → animate on load, not scroll). Disabled under reduced motion. */
    @media (prefers-reduced-motion: no-preference) {
      .esim-hero-eyebrow,
      .esim-hero-title,
      .esim-hero-sub,
      .esim-hero-cta {
        opacity: 0;
        transform: translateY(12px);
        animation: esim-rise 600ms var(--ease-wyra) forwards;
      }
      .esim-hero-title { animation-delay: 120ms; }
      .esim-hero-sub { animation-delay: 600ms; }
      .esim-hero-cta { animation-delay: 800ms; }
      .esim-hero-arc .arc-draw {
        stroke-dasharray: 600;
        stroke-dashoffset: 600;
        animation: esim-arc-draw 1400ms var(--ease-wyra) 400ms forwards;
      }
      .esim-hero-arc .arc-dot {
        opacity: 0;
        animation: esim-fade 500ms var(--ease-wyra) 1500ms forwards;
      }
    }

    @keyframes esim-rise { to { opacity: 1; transform: translateY(0); } }
    @keyframes esim-arc-draw { to { stroke-dashoffset: 0; } }
    @keyframes esim-fade { to { opacity: 1; } }

    /* Generic section scaffolding */
    .esim-section {
      padding-block: clamp(var(--space-16), 8vw, var(--space-24));
      padding-inline: clamp(var(--space-4), 5vw, var(--space-16));
    }

    .esim-section-head {
      max-inline-size: 720px;
      margin-inline: auto;
      text-align: center;
      margin-block-end: var(--space-12);
    }

    .esim-eyebrow {
      display: inline-block;
      font-family: var(--font-display);
      font-size: var(--text-xs);
      font-weight: var(--weight-syne-semibold);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--wyra-cyan-deep);
      margin-block-end: var(--space-3);
    }

    .esim-section-title {
      font-family: var(--font-display);
      font-weight: var(--weight-syne-semibold);
      font-size: clamp(1.75rem, 4.5vw, 3rem);
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--text-primary);
      margin-block-end: var(--space-4);
    }

    .esim-section-sub {
      font-family: var(--font-body);
      font-size: clamp(1.05rem, 2.2vw, 1.25rem);
      line-height: 1.55;
      color: var(--text-secondary);
      max-inline-size: 56ch;
      margin-inline: auto;
    }

    /* ITEM-301 — compatibility chip (navy context) */
    .compat-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      border: 1.5px solid #00C4D8;
      border-radius: 999px;
      background: rgba(0, 196, 216, 0.12);
      color: #3DDCEF;
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 0.95rem;
      text-decoration: none;
      transition: background .2s, box-shadow .2s, transform .2s;
    }
    .compat-chip:hover {
      background: rgba(0, 196, 216, 0.22);
      box-shadow: 0 4px 16px rgba(0, 196, 216, 0.28);
      transform: translateY(-1px);
    }
    .compat-chip .chip-ico { font-size: 1.05em; line-height: 1; }

    /* How it works — 3 steps */
    .esim-steps {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-6);
      max-inline-size: 980px;
      margin-inline: auto;
    }
    @media (min-width: 768px) {
      .esim-steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
    }

    .esim-step { padding: var(--space-6); }
    .esim-step-num {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      font-family: var(--font-display);
      font-weight: var(--weight-syne-extrabold);
      font-size: clamp(2rem, 5vw, 2.75rem);
      line-height: 1;
      color: var(--wyra-cyan);
      margin-block-end: var(--space-4);
    }
    .esim-step-num .step-emoji { font-size: 1.5rem; }
    .esim-step-title {
      font-family: var(--font-display);
      font-weight: var(--weight-syne-semibold);
      font-size: var(--text-xl);
      color: var(--text-primary);
      margin-block-end: var(--space-2);
    }
    .esim-step-body {
      font-family: var(--font-body);
      font-size: var(--text-base);
      line-height: 1.6;
      color: var(--text-secondary);
    }

    /* Value props — light-mid band */
    .esim-values { background: var(--bg-secondary); }
    .esim-value-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-6);
      max-inline-size: 1100px;
      margin-inline: auto;
    }
    @media (min-width: 640px)  { .esim-value-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .esim-value-grid { grid-template-columns: repeat(3, 1fr); } }

    .esim-value-card {
      padding: var(--space-6);
      border-radius: 16px;
      background: var(--bg-primary);
      border: 1px solid var(--border-subtle);
    }
    .esim-value-icon { display: block; font-size: 2rem; line-height: 1; margin-block-end: var(--space-4); }
    .esim-value-title {
      font-family: var(--font-display);
      font-weight: var(--weight-syne-semibold);
      font-size: clamp(1.05rem, 2vw, 1.2rem);
      color: var(--text-primary);
      margin-block-end: var(--space-2);
    }
    .esim-value-body {
      font-family: var(--font-body);
      font-size: var(--text-sm);
      line-height: 1.6;
      color: var(--text-secondary);
    }

    /* Closing navy ring — trust + waitlist (flows into navy footer per L49 Surface Strategy) */
    .esim-close {
      background: var(--wyra-navy-deep);
      color: rgba(255, 255, 255, 0.72);
      position: relative;
    }
    .esim-close::before {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block-start: 0;
      block-size: 2px;
      background: linear-gradient(90deg, transparent 0%, var(--wyra-cyan) 50%, transparent 100%);
    }

    .esim-trust { max-inline-size: 720px; margin-inline: auto; text-align: center; margin-block-end: var(--space-12); }
    .esim-trust .esim-eyebrow { color: var(--wyra-cyan-glow); }
    .esim-trust-title {
      font-family: var(--font-display);
      font-weight: var(--weight-syne-semibold);
      font-size: clamp(1.5rem, 4vw, 2.5rem);
      line-height: 1.15;
      color: var(--wyra-white);
      margin-block-end: var(--space-4);
    }
    .esim-trust-body {
      font-family: var(--font-body);
      font-size: clamp(1.05rem, 2.2vw, 1.25rem);
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.72);
      margin-block-end: var(--space-8);
    }
    .esim-trust-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
    .esim-trust-chip {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding-block: var(--space-2);
      padding-inline: var(--space-4);
      border: 1px solid rgba(77, 221, 240, 0.35);
      border-radius: 100px;
      background: rgba(0, 196, 216, 0.1);
      color: var(--wyra-white);
      font-family: var(--font-body);
      font-size: var(--text-sm);
      font-weight: var(--weight-poppins-medium);
    }
    .esim-trust-chip .chip-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--wyra-cyan); }

    /* ITEM-353 traveler landing — hero trustline + inline company-context links + checkout trust */
    .esim-hero-trust {
      max-inline-size: 600px;
      margin-inline: auto;
      margin-block-start: var(--space-2);
      font-family: var(--font-body);
      font-size: var(--text-sm);
      line-height: 1.6;
      color: var(--text-secondary);
    }
    .esim-trust-context {
      margin-block-start: var(--space-8);
      font-family: var(--font-body);
      font-size: var(--text-sm);
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.6);
    }
    .esim-trust-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--space-2) var(--space-5);
      margin-block-start: var(--space-3);
    }
    .esim-trust-links a {
      font-family: var(--font-body);
      font-size: var(--text-sm);
      font-weight: var(--weight-poppins-medium);
      color: var(--wyra-cyan-glow);
      text-decoration: none;
    }
    .esim-trust-links a:hover { text-decoration: underline; }
    .esim-modal-trust {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      line-height: 1.5;
      color: var(--text-secondary);
      margin-block-end: var(--space-2);
    }

    /* ITEM-353: tighten the traveler-landing hero so the chooser reaches the fold (mobile-first).
       Placed AFTER the .esim-hero-* base rules so these overrides win at equal specificity. */
    .hero + .esim-picker { padding-block-start: var(--space-10); }
    @media (max-width: 640px) {
      .hero { padding-block-end: var(--space-6); }
      .esim-hero-title { font-size: clamp(1.9rem, 8vw, 2.5rem); margin-block-end: var(--space-4); }
      .esim-hero-sub { font-size: var(--text-lg); margin-block-end: var(--space-4); }
      .hero + .esim-picker { padding-block-start: var(--space-6); }
      .esim-picker .esim-section-head { margin-block-end: var(--space-6); }
    }

    .esim-waitlist-card {
      max-inline-size: 560px;
      margin-inline: auto;
      padding: clamp(var(--space-6), 4vw, var(--space-10));
      border-radius: 20px;
      background: linear-gradient(160deg, rgba(0, 196, 216, 0.14), rgba(10, 26, 46, 0.2));
      border: 1px solid rgba(77, 221, 240, 0.25);
      text-align: center;
    }
    .esim-waitlist-title {
      font-family: var(--font-display);
      font-weight: var(--weight-syne-semibold);
      font-size: clamp(1.4rem, 3vw, 1.85rem);
      color: var(--wyra-white);
      margin-block-end: var(--space-3);
    }
    .esim-waitlist-sub {
      font-family: var(--font-body);
      font-size: var(--text-base);
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.7);
      margin-block-end: var(--space-6);
    }
    .esim-waitlist-form { display: flex; flex-direction: column; gap: var(--space-3); }
    @media (min-width: 520px) { .esim-waitlist-form { flex-direction: row; } }
    .esim-waitlist-input {
      flex: 1;
      padding-block: var(--space-3);
      padding-inline: var(--space-4);
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.95);
      color: var(--wyra-navy-deep);
      font-family: var(--font-body);
      font-size: var(--text-base);
      min-block-size: 48px;
    }
    .esim-waitlist-input::placeholder { color: rgba(10, 26, 46, 0.5); }
    .esim-waitlist-input:focus-visible { outline: 2px solid var(--wyra-cyan); outline-offset: 2px; }

    /* ---------- eSIM picker (Fase 2, ITEM-243) ---------- */
    .esim-picker-search {
      display: block;
      inline-size: 100%;
      max-inline-size: 460px;
      margin-inline: auto;
      margin-block-end: var(--space-6);
    }
    .esim-picker-featured-label {
      text-align: center;
      font-family: var(--font-body);
      font-size: var(--text-sm);
      font-weight: var(--weight-poppins-semibold);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-secondary);
      margin-block-end: var(--space-4);
    }
    .esim-picker-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
      gap: var(--space-3);
      max-inline-size: 1120px;
      margin-inline: auto;
    }
    .esim-picker-country {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-1);
      padding: var(--space-4);
      border-radius: 16px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-subtle);
      text-align: center;
      transition:
        transform var(--duration-medium) var(--ease-wyra),
        border-color var(--duration-medium) var(--ease-wyra),
        box-shadow var(--duration-medium) var(--ease-wyra);
    }
    .esim-picker-country:hover {
      transform: translateY(-3px);
      border-color: var(--wyra-cyan);
      box-shadow: 0 10px 24px rgba(0, 196, 216, 0.12);
    }
    .esim-picker-country:focus-visible { outline: 2px solid var(--wyra-cyan); outline-offset: 2px; }
    .esim-picker-flag { font-size: 2rem; line-height: 1; }
    .esim-picker-cname {
      font-family: var(--font-display);
      font-weight: var(--weight-syne-semibold);
      font-size: var(--text-base);
      color: var(--text-primary);
    }
    .esim-picker-cprice {
      font-family: var(--font-body);
      font-size: var(--text-sm);
      color: var(--text-secondary);
    }
    .esim-picker-seeall { display: block; margin: var(--space-8) auto 0; }
    .esim-picker-detail { max-inline-size: 1120px; margin-inline: auto; }
    .esim-picker-back {
      display: inline-flex;
      align-items: center;
      gap: var(--space-1);
      font-family: var(--font-body);
      font-weight: var(--weight-poppins-medium);
      font-size: var(--text-sm);
      color: var(--wyra-cyan-deep);
      padding-block: var(--space-2);
      margin-block-end: var(--space-4);
      transition: color var(--duration-quick) var(--ease-snap);
    }
    .esim-picker-back:hover { color: var(--wyra-cyan); }
    .esim-picker-country-name {
      font-family: var(--font-display);
      font-weight: var(--weight-syne-bold);
      font-size: var(--text-xl);
      color: var(--text-primary);
      text-align: center;
      margin-block-end: var(--space-8);
    }
    .esim-picker-state {
      grid-column: 1 / -1;
      text-align: center;
      font-family: var(--font-body);
      color: var(--text-secondary);
      padding-block: var(--space-8);
    }
    .esim-waitlist-btn { white-space: nowrap; min-block-size: 48px; }
    .esim-waitlist-note {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      color: rgba(255, 255, 255, 0.5);
      margin-block-start: var(--space-4);
    }
    .esim-waitlist-success {
      font-family: var(--font-body);
      font-size: var(--text-xl);
      line-height: 1.5;
      color: var(--wyra-white);
      padding-block: var(--space-4);
    }
    .esim-waitlist-success .success-emoji { display: block; font-size: 1.75rem; margin-block-end: var(--space-2); }

    /* ============================================================
     * eSIM plan selector (Path B3b — static frozen grid; checkout = B3c)
     * ========================================================== */
    .esim-tier { max-inline-size: 1120px; margin-inline: auto; margin-block-end: var(--space-16); }
    .esim-tier:last-of-type { margin-block-end: 0; }

    .esim-tier-head { text-align: center; margin-block-end: var(--space-8); }
    .esim-tier-flag {
      display: inline-block;
      padding-block: var(--space-1);
      padding-inline: var(--space-3);
      border-radius: 100px;
      background: var(--wyra-cyan);
      color: var(--wyra-white);
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: var(--weight-poppins-semibold);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-block-end: var(--space-3);
    }
    .esim-tier-name {
      font-family: var(--font-display);
      font-weight: var(--weight-syne-semibold);
      font-size: clamp(1.35rem, 3.5vw, 1.9rem);
      line-height: 1.15;
      color: var(--text-primary);
      margin-block-end: var(--space-2);
    }
    .esim-tier-cov {
      font-family: var(--font-body);
      font-size: var(--text-sm);
      color: var(--text-secondary);
      max-inline-size: 46ch;
      margin-inline: auto;
    }
    .esim-global-tagline {
      font-family: var(--font-display);
      font-weight: var(--weight-syne-semibold);
      font-size: var(--text-base);
      color: var(--wyra-cyan-deep);
      letter-spacing: -0.01em;
      margin-block-start: var(--space-2);
    }

    .esim-plan-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-4);
    }
    @media (min-width: 560px)  { .esim-plan-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .esim-plan-grid--4 { grid-template-columns: repeat(4, 1fr); } }
    .esim-plan-grid--1 { grid-template-columns: 1fr; max-inline-size: 360px; margin-inline: auto; }

    .esim-plan-card {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-1);
      padding: var(--space-6);
      border-radius: 16px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-subtle);
      text-align: center;
      transition:
        transform var(--duration-medium) var(--ease-wyra),
        border-color var(--duration-medium) var(--ease-wyra),
        box-shadow var(--duration-medium) var(--ease-wyra);
    }
    .esim-plan-card:hover {
      transform: translateY(-4px);
      border-color: var(--wyra-cyan);
      box-shadow: 0 12px 28px rgba(0, 196, 216, 0.12);
    }
    .esim-tier--featured .esim-plan-card { border-color: rgba(0, 196, 216, 0.35); }

    .esim-plan-badge {
      display: inline-block;
      padding-block: 2px;
      padding-inline: var(--space-2);
      border-radius: 100px;
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: var(--weight-poppins-semibold);
      margin-block-end: var(--space-1);
    }
    .esim-plan-badge--nous {
      background: rgba(255, 107, 91, 0.12);
      color: var(--wyra-sunset);
      border: 1px solid rgba(255, 107, 91, 0.4);
    }

    .esim-plan-gb {
      font-family: var(--font-display);
      font-weight: var(--weight-syne-extrabold);
      font-size: clamp(2.1rem, 6vw, 2.9rem);
      line-height: 1;
      color: var(--text-primary);
    }
    .esim-plan-gb-unit {
      font-size: 0.42em;
      font-weight: var(--weight-syne-semibold);
      color: var(--text-secondary);
      margin-inline-start: 0.3em;
    }
    .esim-plan-valid {
      font-family: var(--font-body);
      font-size: var(--text-sm);
      color: var(--text-secondary);
    }
    .esim-plan-price {
      font-family: var(--font-display);
      font-weight: var(--weight-syne-bold);
      font-size: var(--text-2xl);
      color: var(--wyra-cyan-deep);
      margin-block: var(--space-2) var(--space-4);
    }
    .esim-plan-cta { inline-size: 100%; }

    .esim-plan-card--global {
      background: linear-gradient(160deg, rgba(0, 196, 216, 0.12), rgba(0, 196, 216, 0.02)), var(--bg-secondary);
      border-color: var(--wyra-cyan);
    }

    /* ITEM-292-B: global / regional featured section (reuses .esim-plan-* system) */
    .esim-global { max-inline-size: 1120px; margin-inline: auto; }
    .esim-global-group { margin-block-end: var(--space-10); }
    .esim-global-grouphead { text-align: center; margin-block-end: var(--space-6); }
    .esim-global-grouptitle {
      font-family: var(--font-display); font-weight: var(--weight-syne-semibold);
      font-size: clamp(1.3rem, 3vw, 1.75rem); color: var(--text-primary); margin-block-end: var(--space-2);
    }
    .esim-global-coverage { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-secondary); margin-block-start: var(--space-2); }
    /* ITEM-323 — full-width section banner: bg photo + navy scrim + title/coverage overlay. EU flag is blue,
       so the scrim is biased dark (bottom-up gradient over a navy base #0B1220) to keep the white title legible.
       Only sections with a GROUP_IMAGE entry get .--banner; the rest keep the text-only head. */
    .esim-global-grouphead--banner {
      position: relative; overflow: hidden; border-radius: 16px;
      min-block-size: 200px; padding: var(--space-8) var(--space-5);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
    }
    .esim-global-bannerimg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; z-index: 0; }
    .esim-global-grouphead--banner::after {
      content: ''; position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(to top, rgba(11, 18, 32, 0.90) 0%, rgba(11, 18, 32, 0.64) 60%, rgba(11, 18, 32, 0.56) 100%);
    }
    .esim-global-bannerinner { position: relative; z-index: 2; }
    .esim-global-grouphead--banner .esim-global-grouptitle { color: var(--wyra-white); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); }
    .esim-global-grouphead--banner .esim-global-coverage { color: rgba(255, 255, 255, 0.88); }
    @media (max-width: 560px) {
      .esim-global-grouphead--banner { min-block-size: 150px; padding: var(--space-6) var(--space-4); }
    }
    /* ITEM-323 Fase 1 — collapse-by-banner: the banner IS the <summary>. Kill the default disclosure marker
       so it reads as a clean clickable banner; body sits below when the <details> is open. */
    .esim-global-summary { list-style: none; cursor: pointer; display: block; }
    .esim-global-summary::-webkit-details-marker { display: none; }
    .esim-global-summary::marker { content: ''; }
    .esim-global-summary .esim-global-grouphead--banner { margin-block-end: 0; }
    .esim-global-body { margin-block-start: var(--space-6); }
    /* ITEM-323 Fase 1 — region tier sub-toggle (Europa / Europa + US): reuses .toggle-bilateral (design-system
       pill); center it under the banner + space the per-tier coverage line. */
    .esim-region-toggle { display: flex; justify-content: center; margin-block-end: var(--space-5); }
    .esim-region-tiermeta { text-align: center; margin-block-end: var(--space-1); }
    .esim-region-tierpanel > .esim-global-coverage { text-align: center; margin-block-end: var(--space-4); }
    .esim-plan-badge--hot { background: var(--wyra-cyan-mist); color: var(--wyra-cyan-deep); border: 1px solid rgba(0, 196, 216, 0.4); }
    /* ITEM-320 — per-card "streamer" badge (solid cyan-deep so it stays legible on the .esim-plan-card--global cyan gradient). Reusable by ITEM-323. */
    .esim-plan-badge--streamer { background: var(--wyra-cyan-deep); color: var(--wyra-white); border: 1px solid var(--wyra-cyan-deep); }
    /* ITEM-306 — premium tier visual differentiation (solid cyan badge + emphasized card + stronger FUP accent) */
    .esim-plan-badge--premium { background: var(--wyra-cyan); color: var(--wyra-white); border: 1px solid var(--wyra-cyan-deep); }
    .esim-plan-card--premium { border-color: rgba(0, 196, 216, 0.5); box-shadow: 0 6px 20px rgba(0, 196, 216, 0.10); }
    .esim-unlimited-fup--premium { background: rgba(0, 196, 216, 0.10); border-color: rgba(0, 196, 216, 0.40); }
    /* ITEM-314 — Max (3GB) = sunset accent; Full Speed (no throttle) = apex gradient. Visual ladder:
       base (cyan light) → Plus (cyan solid) → Max (sunset solid) → Full Speed (cyan→sunset gradient). */
    .esim-plan-badge--max { background: var(--wyra-sunset); color: var(--wyra-white); border: 1px solid var(--wyra-sunset); }
    .esim-plan-card--max { border-color: rgba(255, 107, 91, 0.5); box-shadow: 0 6px 20px rgba(255, 107, 91, 0.10); }
    .esim-unlimited-fup--max { background: rgba(255, 107, 91, 0.08); border-color: rgba(255, 107, 91, 0.35); }
    .esim-plan-badge--full { background: linear-gradient(135deg, var(--wyra-cyan-deep), var(--wyra-sunset)); color: var(--wyra-white); border: 1px solid transparent; }
    .esim-plan-card--full { border-color: rgba(255, 107, 91, 0.6); box-shadow: 0 8px 26px rgba(255, 107, 91, 0.16); }
    .esim-unlimited-fup--full { background: rgba(255, 107, 91, 0.10); border-color: rgba(255, 107, 91, 0.40); }
    .esim-global-viewbtn {
      display: inline-block; margin-block-start: var(--space-4); background: none; border: none; cursor: pointer;
      font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-poppins-semibold);
      color: var(--wyra-cyan-deep); text-decoration: underline;
    }
    .esim-global-viewbtn:hover { color: var(--wyra-cyan); }
    /* ITEM-322 — collapsible section: cards past the fold are hidden until "Ver más" expands them.
       The author .esim-plan-card{display:flex} rule beats the UA [hidden] rule, so hide explicitly. */
    .esim-plan-card[hidden] { display: none; }
    .esim-collapse-btn {
      display: block; margin: var(--space-4) auto 0; background: none; border: none; cursor: pointer;
      font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-poppins-semibold);
      color: var(--wyra-cyan-deep); text-decoration: underline;
    }
    .esim-collapse-btn:hover { color: var(--wyra-cyan); }
    .esim-global-countries { margin-block-start: var(--space-4); }
    .esim-global-csearch {
      inline-size: 100%; max-inline-size: 360px; margin: 0 auto var(--space-4); display: block;
      padding: var(--space-2) var(--space-3); border-radius: 10px; border: 1px solid var(--border-subtle);
      background: var(--bg-secondary); font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-primary);
    }
    .esim-global-clist { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); max-block-size: 220px; overflow-y: auto; }
    .esim-global-cchip {
      display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 100px;
      background: var(--bg-secondary); border: 1px solid var(--border-subtle);
      font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap;
    }
    .esim-global-longstay > summary {
      cursor: pointer; text-align: center; list-style: none; padding-block: var(--space-3);
      font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-poppins-semibold); color: var(--wyra-cyan-deep);
    }
    .esim-global-longstay > summary::-webkit-details-marker { display: none; }
    .esim-global-divider { text-align: center; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-secondary); margin-block: var(--space-10) var(--space-6); }
    .esim-global-state { text-align: center; color: var(--text-secondary); font-size: var(--text-sm); padding-block: var(--space-8); }

    .esim-tier-upsell {
      margin-block-start: var(--space-6);
      text-align: center;
      font-family: var(--font-body);
      font-size: var(--text-sm);
      color: var(--text-secondary);
    }
    .esim-tier-upsell a {
      color: var(--wyra-cyan-deep);
      font-weight: var(--weight-poppins-semibold);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .esim-tier-upsell a:hover { color: var(--wyra-cyan); }

    /* Tier 4 — hidden behind native expander (long-stay / heavy) */
    .esim-tier-expander {
      max-inline-size: 1120px;
      margin-inline: auto;
      margin-block-start: var(--space-16);
      border-block-start: 1px solid var(--border-subtle);
      padding-block-start: var(--space-8);
    }
    .esim-tier-expander-summary {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      cursor: pointer;
      list-style: none;
      font-family: var(--font-display);
      font-weight: var(--weight-syne-semibold);
      font-size: var(--text-lg);
      color: var(--text-primary);
      min-block-size: 44px;
    }
    .esim-tier-expander-summary::-webkit-details-marker { display: none; }
    .esim-tier-expander-summary::after {
      content: "\25BE";
      color: var(--wyra-cyan-deep);
      transition: transform var(--duration-quick) var(--ease-snap);
    }
    .esim-tier-expander[open] .esim-tier-expander-summary::after { transform: rotate(180deg); }
    .esim-tier-expander-summary:focus-visible {
      outline: 3px solid var(--wyra-cyan);
      outline-offset: 4px;
      border-radius: 6px;
    }
    .esim-tier-expander-body { margin-block: var(--space-8) 0; }

    /* ITEM-325 — reuse the section expander INSIDE the compact unlimited card. Additive overrides only:
       the base .esim-tier-expander is sized for a full-width section. Summary mimics the old FUP label
       (uppercase cyan, left-aligned) and keeps a tappable target; expander body margins tightened. */
    .esim-unlimited-fup .esim-tier-expander {
      max-inline-size: none; margin-block-start: var(--space-1);
      border-block-start: none; padding-block-start: 0;
    }
    .esim-unlimited-fup .esim-tier-expander-summary {
      justify-content: flex-start; gap: var(--space-1);
      font-family: var(--font-body); font-size: var(--text-xs);
      text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--wyra-cyan-deep); min-block-size: 0;
      padding-block: var(--space-1);
    }
    .esim-unlimited-fup .esim-tier-expander-body { margin-block: var(--space-1) 0; }

    /* ITEM-305 — FUP disclosure rendered INSIDE each unlimited card (honesty-first: always visible, never collapsed) */
    .esim-unlimited-fup {
      inline-size: 100%;
      margin-block: 0 var(--space-3);
      padding: var(--space-2);
      background: rgba(0, 196, 216, 0.06);
      border: 1px solid rgba(0, 196, 216, 0.25);
      border-radius: 10px;
      text-align: start;
    }
    .esim-unlimited-fup-label {
      display: block;
      font-family: var(--font-display);
      font-weight: var(--weight-syne-semibold);
      font-size: var(--text-xs);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--wyra-cyan-deep);
      margin-block-end: var(--space-1);
    }
    .esim-unlimited-fup p {
      font-family: var(--font-body);
      font-size: 0.78rem;
      line-height: 1.5;
      color: var(--text-secondary);
      margin: 0;
    }
    /* ITEM-311: code-derived spec line (cap → throttle). Higher specificity than the generic
       `.esim-unlimited-fup p` so it reads as the prominent honest number. dir="ltr" + isolate
       keep the digits/arrow correctly ordered inside the RTL (Arabic) container. */
    .esim-unlimited-fup .esim-unlimited-fup-spec {
      font-family: var(--font-display);
      font-weight: var(--weight-syne-semibold);
      font-size: 0.95rem;
      color: var(--wyra-cyan-deep);
      margin-block: var(--space-1) var(--space-1);
      letter-spacing: 0.01em;
      unicode-bidi: isolate;
    }
    .esim-unlimited-fup .esim-unlimited-fup-tags {
      margin-block-start: var(--space-2);
      font-size: 0.72rem;
      opacity: 0.8;
    }

    /* ============================================================
     * eSIM checkout modal (ITEM-286 wiring)
     * Overlay mirrors the .mobile-drawer pattern. OTP UI inside uses
     * the .wyra-otp-* classes from /css/otp.css (already loaded).
     * ========================================================== */
    #esim-checkout-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; }
    #esim-checkout-modal[hidden] { display: none; }
    .esim-modal-backdrop { position: absolute; inset: 0; background: rgba(13,27,42,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
    .esim-modal-card { position: relative; z-index: 1; background: #FFFFFF; border: 1px solid #E8ECF2; border-radius: 20px; padding: 28px 24px; max-inline-size: 420px; inline-size: 100%; box-shadow: 0 16px 48px rgba(0,0,0,0.18); max-block-size: calc(100vh - 32px); overflow-y: auto; }
    .esim-modal-x { position: absolute; inset-block-start: 12px; inset-inline-end: 14px; background: none; border: none; font-size: 24px; line-height: 1; color: #8A9BB0; cursor: pointer; padding: 4px; }
    .esim-modal-title { font-size: 18px; font-weight: 700; color: #0D1B2A; margin: 0 0 14px; padding-inline-end: 24px; }
    .esim-modal-summary { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; background: #F4F7FA; border: 1px solid #E8ECF2; border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; }
    .esim-modal-plan-label { font-size: 14px; font-weight: 600; color: #0D1B2A; }
    .esim-modal-plan-price { font-size: 16px; font-weight: 700; color: #00C4D8; white-space: nowrap; }
    .esim-modal-redirecting { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 24px 0; font-size: 14px; color: #5A6B7F; }
    .esim-modal-spin { display: inline-block; width: 18px; height: 18px; border: 2px solid #E8ECF2; border-top-color: #00C4D8; border-radius: 50%; animation: wyra-otp-spin 0.7s linear infinite; }
    .esim-modal-error { background: #FFF0F0; color: #E53E3E; border: 1px solid rgba(229,62,62,0.2); border-radius: 10px; padding: 12px 14px; font-size: 13px; margin-top: 14px; }
    .esim-modal-confirm { display: flex; flex-direction: column; gap: 12px; }
    .esim-modal-confirm-btn { width: 100%; }
    .esim-modal-consent { font-size: 12px; line-height: 1.5; color: #5A6B7F; text-align: center; margin: 0; }
    .esim-modal-consent a { color: #00C4D8; text-decoration: underline; }
    .esim-modal-delivery { font-size: 12px; line-height: 1.5; color: #5A6B7F; text-align: center; margin: 0; }
  


    #ih-fab-wrap{position:fixed;left:16px;bottom:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:1200}
    #ih-fab{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#00C4D8,#008C9A);color:#fff;border:none;border-radius:999px;padding:12px 18px;font-family:'Poppins',sans-serif;font-size:13.5px;font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(0,140,154,.40);transition:transform .2s,box-shadow .2s}
    #ih-fab:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,140,154,.50)}
    #ih-fab:focus-visible{outline:3px solid rgba(0,196,216,.5);outline-offset:2px}
    #ih-fab .ih-fab-ico{font-size:1.15em;line-height:1}
    @media(max-width:360px){#ih-fab{padding:11px 14px;font-size:12.5px}}
    .ih-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px}
    .ih-modal[hidden]{display:none}
    .ih-backdrop{position:absolute;inset:0;background:rgba(13,27,42,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
    .ih-dialog{position:relative;background:#fff;border-radius:22px;max-width:360px;width:100%;padding:30px 26px 26px;text-align:center;box-shadow:0 24px 60px rgba(13,27,42,.30);animation:ihpop .22s ease}
    @keyframes ihpop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
    @media(prefers-reduced-motion:reduce){.ih-dialog{animation:none}}
    .ih-close{position:absolute;top:10px;right:12px;background:none;border:none;font-size:26px;line-height:1;color:#8A9BB0;cursor:pointer;width:36px;height:36px;border-radius:50%}
    html[dir=rtl] .ih-close{right:auto;left:12px}
    .ih-close:hover{background:#F4F7FA;color:#0D1B2A}
    .ih-emoji{font-size:40px;line-height:1;margin-bottom:8px}
    .ih-title{font-family:'Syne',sans-serif;font-size:21px;font-weight:800;color:#0D1B2A;line-height:1.2}
    .ih-body{font-size:14.5px;color:#5A6B7F;line-height:1.55;margin:10px 0 22px}
    .ih-cta{display:inline-block;background:linear-gradient(135deg,#00C4D8,#008C9A);color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:13px 26px;border-radius:12px;transition:filter .2s}
    .ih-cta:hover{filter:brightness(1.07)}
  

/* ITEM-354 destination pages — content prose + plans table */
.destino-main { max-inline-size: 880px; margin-inline: auto; padding-inline: clamp(var(--space-4), 5vw, var(--space-8)); }
.destino-hero { text-align: center; padding-block: calc(72px + clamp(var(--space-8), 6vw, var(--space-16))) var(--space-8); }
.destino-h1 { font-family: var(--font-display); font-weight: var(--weight-syne-extrabold); font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--text-primary); margin-block-end: var(--space-4); }
.destino-subhead { font-family: var(--font-body); font-size: var(--text-lg); line-height: 1.5; color: var(--text-secondary); max-inline-size: 620px; margin-inline: auto; }
.destino-section { padding-block: var(--space-8); border-block-start: 1px solid var(--hairline, rgba(127,127,127,0.16)); }
.destino-section h2 { font-family: var(--font-display); font-weight: var(--weight-syne-semibold); font-size: clamp(1.4rem, 3.5vw, 2rem); color: var(--text-primary); margin-block-end: var(--space-4); }
.destino-prose p { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65; color: var(--text-secondary); margin-block-end: var(--space-4); }
.destino-prose ul { margin-block: var(--space-3); padding-inline-start: var(--space-6); }
.destino-prose li { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--text-secondary); margin-block-end: var(--space-2); }
.destino-prose strong { color: var(--text-primary); }
.plans-table-wrap { overflow-x: auto; margin-block: var(--space-4); }
.plans-table { inline-size: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: var(--text-sm); }
.plans-table th, .plans-table td { text-align: start; padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--hairline, rgba(127,127,127,0.16)); }
.plans-table th { color: var(--text-secondary); font-weight: var(--weight-poppins-semibold); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--text-xs); }
.plans-table td { color: var(--text-primary); }
.plans-row--unlimited td:first-child { font-weight: var(--weight-poppins-semibold); }
.plans-fup { display: block; font-weight: var(--weight-poppins-regular); font-size: var(--text-xs); color: var(--text-secondary); margin-block-start: 2px; }
.destino-faq details { border-block-end: 1px solid var(--hairline, rgba(127,127,127,0.16)); padding-block: var(--space-3); }
.destino-faq summary { font-family: var(--font-body); font-weight: var(--weight-poppins-medium); color: var(--text-primary); cursor: pointer; font-size: var(--text-base); }
.destino-faq .faq-a { margin-block-start: var(--space-2); }
.destino-faq .faq-a p { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--text-secondary); }
.destino-buy { padding-block: var(--space-6); }
.destino-other { text-align: center; padding-block: var(--space-8) var(--space-12); }
.destino-other a { color: var(--wyra-cyan-glow, var(--wyra-cyan)); font-family: var(--font-body); font-weight: var(--weight-poppins-medium); text-decoration: none; }
.destino-other a:hover { text-decoration: underline; }