/* AirZippy shared chrome — tokens, base, buttons, top bar, header, drawer, background scene, footer, auth modal, chat, toast. Inlined on every page by the head partial. */
:root{
  --ink:#0B1F5C;--ink2:#12308A;--ink3:#1B45B8;
  --paper:#FAF9F6;--go:#0F66C6;--go-hi:#0B55A8;
  --amber:#F0B429;--grn:#0B8A5F;--cyan:#35C0F5;
  --slate:#5C6B7A;--rule:#E2E5E9;--rule-d:#24408F;
  --wa:#25D366;
  --r:12px;--r-lg:18px;
  --shadow:0 8px 30px rgba(11,31,92,.08);
  --shadow-lg:0 24px 60px rgba(4,12,28,.28);
  --focus:0 0 0 3px var(--paper),0 0 0 6px var(--go);
  --hdr-h:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-size:15px}
body{margin:0;font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:15px;line-height:1.5;color:var(--ink);background:var(--paper);font-variation-settings:'wdth' 100}
:root{--display:'Manrope','Segoe UI',system-ui,-apple-system,Roboto,sans-serif}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;font-variation-settings:normal;line-height:1.1;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,3.1vw,2.8rem)} /* 42px max */
h2{font-size:clamp(1.25rem,1.7vw,1.5334rem)} /* 23px max */
h3{font-size:1.2rem}
p{margin:0 0 1em}
a{color:var(--go);text-decoration:none}
a:hover{color:var(--go-hi)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
img,svg{display:inline-block;vertical-align:middle}
.i{width:1em;height:1em;stroke-width:2}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}
.container{max-width:1400px;margin:0 auto;padding:0 32px;min-width:0}
/* the layout viewport must never be wider than the phone: this is the last net, every real cause is fixed at its source */
html,body{overflow-x:clip}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[data-inr],.price,.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--go)}
.eyebrow::before{content:'';width:22px;height:2px;background:currentColor}
.sec{padding:64px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.sec-head p{max-width:560px;color:var(--slate);margin:0}
.muted{color:var(--slate)}
.small{font-size:.85rem}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:999px;font-weight:600;line-height:1;border:1.5px solid transparent;transition:background .15s,color .15s,border-color .15s,transform .15s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
a.btn,a.btn:hover{text-decoration:none}
.btn-go{background:var(--go);color:#fff}.btn-go:hover{background:var(--go-hi);color:#fff}
.btn-ghost{border-color:var(--rule);color:var(--ink)}.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn-ink{background:var(--ink);color:#fff}.btn-ink:hover{background:var(--ink2);color:#fff}
.btn-light{background:#fff;color:var(--ink)}.btn-light:hover{background:#fff;color:var(--ink2)}
.btn-wa{background:var(--wa);color:#063;color:#0a3d1f}.btn-wa:hover{background:#2ee07a;color:#0a3d1f}
.btn-sm{padding:8px 14px;font-size:.9rem}
.btn-lg{padding:15px 26px;font-size:1.05rem}
.btn-icon{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);border:1.5px solid transparent}
.btn-icon:hover{background:#fff;border-color:var(--rule)}
.btn-icon .i{width:20px;height:20px}

/* ---------- top bar ---------- */
.topbar{background:var(--ink);color:#c9d3f0;font-size:.82rem}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:36px}
.status{display:inline-flex;align-items:center;gap:8px}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--slate);box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.status.ok .dot{background:#2EE59D;animation:pulse 2s ease-in-out infinite}
.status.down .dot{background:var(--amber)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(46,229,157,.15)}50%{box-shadow:0 0 0 6px rgba(46,229,157,0)}}
.topbar a{color:#fff;display:inline-flex;align-items:center;gap:6px;font-weight:500}
.topbar .i{width:15px;height:15px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(250,249,246,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.hdr .container{display:flex;align-items:center;gap:20px;height:72px;min-width:0}
.logo{display:inline-flex;align-items:center;height:42px;flex:0 1 auto;min-width:0;color:var(--ink)}
.logo-img{height:42px;width:auto;max-width:100%;display:block;object-fit:contain;object-position:left center}
.logo-defs{position:absolute;width:0;height:0;overflow:hidden}
.logo-fallback{display:inline-flex;align-items:center;gap:6px;font-size:1.5rem;font-weight:600;letter-spacing:-.02em;font-family:var(--display);color:var(--ink)}
.logo-fallback .logo-mark{color:var(--go);width:30px;height:30px}
.logo-fallback b{color:var(--go)}
.nav{flex:1;min-width:0}
.nav ul{list-style:none;margin:0;padding:0;display:flex;justify-content:space-evenly;align-items:center;gap:0;width:100%}
.nav a{display:block;white-space:nowrap;padding:8px 8px;border-radius:8px;color:var(--ink);font-family:var(--display);font-weight:600;font-size:13.5px;letter-spacing:.01em}
.nav a:hover{background:#fff;color:var(--ink3)}
.hdr-tools{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.sel{appearance:none;-webkit-appearance:none;border:1.5px solid var(--rule);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230B1F5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center/14px;border-radius:999px;padding:8px 30px 8px 14px;font-size:.9rem;font-weight:500;cursor:pointer}
.sel:hover{border-color:var(--ink)}
.menu-btn{display:none}
.chat-hdr{display:none}
@media (max-width:640px),(max-height:500px){.chat-hdr{display:inline-flex}}
.search-pop{position:absolute;right:32px;top:80px;background:#fff;border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow);padding:12px;width:min(420px,calc(100vw - 64px))}
.search-pop form{display:flex;gap:8px}
.search-pop input{flex:1;border:1.5px solid var(--rule);border-radius:8px;padding:10px 12px}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:70;background:rgba(4,12,28,.5)}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(360px,88vw);background:var(--paper);padding:20px 24px;overflow:auto;display:flex;flex-direction:column;gap:6px}
.drawer-panel a{display:block;padding:12px 8px;border-bottom:1px solid var(--rule);color:var(--ink);font-weight:500;font-size:1.05rem}
.drawer-panel .btn{margin-top:8px}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}

@media (max-width:1400px){.hdr-tools .lang{display:none}}
@media (max-width:1180px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .hdr-tools .lang{display:none}
  .hdr-tools .btn-auth{display:none}
}

/* ---------- background scene (light sections) + the living sprite layers ---------- */
/* One fixed layer behind the page on the paper ground; light sections are transparent so it shows
   through, while the dark hero, the stats slab, the WhatsApp band and the footer cover it with their own. */
.scene-layer{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--paper) url("/assets/img/scene.03c5208710.svg") center/cover no-repeat}
.scene{background-color:transparent}
.scene.on-white{background-color:rgba(255,255,255,.55)}
@media (max-width:900px){.scene-layer{background-image:url("/assets/img/scene-sides.e3be84b626.svg")}}

/* Sprites drift independently over both grounds. The art is pale blue line work, so the same files read
   as soft shading on paper and as pale line art on the dark hero — only the opacity differs.
   Travellers cross the top and bottom bands; the middle 60% of the width is never busy. */
.scene-layer .sc,.hero-sc .sc{position:absolute;display:block;background-repeat:no-repeat;background-size:contain;will-change:transform}
.scene-layer .sc{opacity:0.15}
.hero-sc{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-sc .sc{opacity:.16}   /* tuned by check:contrast: keeps the restored cyan eyebrow at 4.76:1 */
.sc-cloud{width:96px;height:68px;background-image:url("/assets/img/sprite-cloud.8f459162c8.svg")}
.sc-cloud.a{top:11%;left:-8%;animation:sc-drift 210s linear infinite}
.sc-cloud.b{top:4%;left:-14%;width:74px;height:52px;animation:sc-drift 168s linear infinite 40s}
.sc-cloud.c{top:17%;left:-6%;width:60px;height:42px;animation:sc-drift 240s linear infinite 95s}
.sc-plane{width:64px;height:64px;background-image:url("/assets/img/sprite-plane.de1d6241e0.svg")}
.sc-plane.a{top:7%;left:-8%;animation:sc-cross 150s linear infinite}
.sc-plane.b{top:14%;left:-8%;width:44px;height:44px;animation:sc-cross 198s linear infinite 70s}
.sc-paper{width:60px;height:60px;top:88%;left:-8%;background-image:url("/assets/img/sprite-paper.a4bcd54176.svg");animation:sc-cross 174s linear infinite 30s}
.sc-sat{width:68px;height:68px;top:3%;right:-8%;background-image:url("/assets/img/sprite-satellite.b4d359af92.svg");animation:sc-orbit 228s linear infinite}
.sc-cargo{width:272px;height:70px;bottom:6%;left:-20%;background-image:url("/assets/img/sprite-cargo.b68d189dd1.svg");animation:sc-sail 192s linear infinite}
.sc-cruise{width:312px;height:100px;bottom:9%;left:-24%;background-image:url("/assets/img/sprite-cruise.6a8707c865.svg");animation:sc-sail 234s linear infinite 80s}
.sc-wifi{width:60px;height:60px;background-image:url("/assets/img/sprite-wifi.79a79dce3e.svg")}
.sc-wifi.a{top:20%;left:8%;animation:sc-pulse 9s ease-in-out infinite}
.sc-wifi.b{top:74%;right:9%;width:46px;height:46px;animation:sc-pulse 11s ease-in-out infinite 3s}
.sc-arcs{width:200px;height:108px;top:52%;right:2%;background-image:url("/assets/img/sprite-arcs.791b77818b.svg");transform-origin:50% 100%;animation:sc-pulse 13s ease-in-out infinite 1.5s}
/* inside the hero the bottom band is the moving horizon, so the low travellers ride higher */
.hero-sc .sc-paper{top:66%}
.hero-sc .sc-cargo{bottom:26%}
.hero-sc .sc-cruise{bottom:31%}
.hero-sc .sc-wifi.b{top:60%}
@keyframes sc-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(126vw,-2vh,0)}}
@keyframes sc-cross{from{transform:translate3d(0,0,0)}to{transform:translate3d(124vw,-4vh,0)}}
@keyframes sc-sail{from{transform:translate3d(0,0,0)}to{transform:translate3d(140vw,0,0)}}
@keyframes sc-orbit{from{transform:translate3d(0,0,0)}to{transform:translate3d(-124vw,9vh,0)}}
@keyframes sc-pulse{0%,100%{transform:scale(.94);opacity:.55}50%{transform:scale(1.06);opacity:1}}
@media (max-width:900px){.sc-cargo,.sc-cruise,.sc-plane.b,.sc-cloud.c,.sc-arcs{display:none}}

/* ---------- currency note ---------- */
.cur-note{background:#FFF7E0;color:#6b4d00;border-bottom:1px solid #F5DFA0;font-size:.85rem;text-align:center;padding:6px 16px}


/* ---------- footer ---------- */
.foot{background:#040C1C;color:#a9b6d6;padding:44px 0 24px;font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
.foot h4{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.foot a{color:#a9b6d6}.foot a:hover{color:#fff}
.foot .logo{filter:brightness(0) invert(1);opacity:.95}
.foot .logo-fallback,.foot .logo-fallback b,.foot .logo-fallback .logo-mark{color:#fff}
.foot-bottom{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem}
.foot .social{display:flex;gap:10px;margin-top:16px}
.foot .social a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.15);display:inline-flex;align-items:center;justify-content:center}
.foot .social .i{width:17px;height:17px}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ---------- auth modal ---------- */
dialog.auth{border:0;border-radius:var(--r-lg);padding:0;max-width:440px;width:calc(100% - 32px);box-shadow:0 30px 80px rgba(0,0,0,.4);color:var(--ink);background:#fff}
dialog.auth::backdrop{background:rgba(4,12,28,.55);backdrop-filter:blur(3px)}
.auth-in{padding:26px 28px 28px}
.auth-tabs{display:flex;gap:4px;background:var(--paper);padding:4px;border-radius:999px;margin-bottom:20px}
.auth-tabs button{flex:1;padding:9px;border-radius:999px;font-weight:600;color:var(--slate)}
.auth-tabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:.85rem;font-weight:600}
.field input{border:1.5px solid var(--rule);border-radius:10px;padding:11px 12px;background:#fff}
.field input:focus{border-color:var(--go);outline:none;box-shadow:none}
.auth-msg{font-size:.85rem;padding:10px 12px;border-radius:10px;background:#F3F7FD;color:var(--ink);margin-top:8px}
.auth-msg.err{background:#fde8e8;color:#b00020}
.auth-close{position:absolute;top:12px;right:12px}
.sel-block{width:100%;border-radius:10px}
.id-row{display:flex;gap:8px}
.id-row .sel{flex:none;border-radius:10px;padding-right:26px}
.id-row input{flex:1;min-width:0}
.otp-boxes{display:flex;gap:8px;justify-content:space-between}
.otp-boxes input{width:100%;max-width:52px;text-align:center;font-size:1.4rem;font-weight:700;padding:10px 0;font-variant-numeric:tabular-nums}
.linkish{color:var(--go);font-weight:600;font-size:.85rem;padding:4px 0;text-align:left}
.linkish:hover{color:var(--go-hi)}
.auth-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:10px}
.user-menu{position:relative}
.user-menu .i{width:18px;height:18px}
.user-pop{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;background:#fff;border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow);padding:6px;z-index:65;display:flex;flex-direction:column}
.user-pop a,.user-pop button{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--ink);font-weight:500;font-size:.92rem;text-align:left;width:100%}
.user-pop a:hover,.user-pop button:hover{background:var(--paper);color:var(--ink3)}
.user-pop button[data-logout]{color:#b00020}
.drawer-panel [data-user-links]{display:flex;flex-direction:column;gap:6px}
@media (max-width:1180px){.hdr-tools .user-menu{display:none}}

/* ---------- chat widget (bottom right) ---------- */
.chat{position:fixed;right:calc(20px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));z-index:75;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.chat-btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 20px 0 16px;border-radius:999px;background:var(--wa);color:#0a3d1f;font-weight:600;font-family:var(--display);box-shadow:0 12px 30px rgba(0,0,0,.25);border:0}
.chat-btn .i{width:22px;height:22px}
.chat-btn:hover{background:#2ee07a}
.chat-btn .close-i{display:none}
.chat.open .chat-btn .open-i{display:none}.chat.open .chat-btn .close-i{display:inline-block}
.chat-panel{width:340px;max-width:calc(100vw - 40px);background:#fff;border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(4,12,28,.28);overflow:hidden;color:var(--ink)}
.chat-head{background:var(--ink);color:#fff;padding:14px 16px;display:flex;gap:12px;align-items:center}
.chat-head .avatar{width:38px;height:38px;border-radius:50%;background:var(--wa);display:inline-flex;align-items:center;justify-content:center;color:#0a3d1f;flex:none}
.chat-head .avatar .i{width:20px;height:20px}
.chat-head b{display:block;font-family:var(--display);font-weight:600}
.chat-head span{font-size:.78rem;color:#c9d3f0}
.chat-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
.chat-greet{background:var(--paper);border:1px solid var(--rule);border-radius:14px 14px 14px 4px;padding:10px 12px;font-size:.9rem;margin:0}
.chat-thread{display:flex;flex-direction:column;gap:8px;max-height:min(46vh,380px);overflow-y:auto;overscroll-behavior:contain;padding-right:2px}
.chat-msg p{margin:0;padding:9px 12px;border-radius:14px;font-size:.9rem;line-height:1.4;max-width:92%;word-break:break-word}
.chat-msg.bot p{background:var(--paper);border:1px solid var(--rule);border-radius:14px 14px 14px 4px;margin-right:auto}
.chat-msg.me p{background:var(--ink);color:#fff;border-radius:14px 14px 4px 14px;margin-left:auto}
.chat-msg.handoff p{border-color:var(--go);background:#EAF3FF}
.chat-msg.err p{border-color:#F5B3B3;background:#FFF1F1}
.chat-msg.bot p a{color:var(--go);text-decoration:underline}
.chat-typing p{display:inline-flex;gap:4px;align-items:center;padding:10px 12px}
.chat-typing span{width:6px;height:6px;border-radius:50%;background:var(--slate);animation:chat-dot 1s ease-in-out infinite}
.chat-typing span:nth-child(2){animation-delay:.15s}.chat-typing span:nth-child(3){animation-delay:.3s}
@keyframes chat-dot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.chat-handoff{border:1px solid var(--go);border-radius:12px;padding:10px 12px;background:#F3F8FF;display:flex;flex-direction:column;gap:8px}
.chat-handoff .row{display:flex;gap:8px}.chat-handoff input{flex:1;min-width:0;border:1.5px solid var(--rule);border-radius:10px;padding:9px 12px;font:inherit}
.chat-handoff .msg{margin:0;font-size:.85rem}.chat-handoff .msg.ok{color:#0a5a2a}.chat-handoff .msg.err{color:#b00020}
.chat-form .btn-go{width:100%}
.chat-q{display:flex;flex-direction:column;gap:6px}
.chat-q button{text-align:left;padding:9px 12px;border:1.5px solid var(--rule);border-radius:12px;font-size:.88rem;font-weight:500;background:#fff;color:var(--ink)}
.chat-q button:hover{border-color:var(--ink);background:var(--paper)}
.chat-form{display:flex;flex-direction:column;gap:8px}
.chat-form textarea{border:1.5px solid var(--rule);border-radius:12px;padding:10px 12px;font:inherit;font-size:.9rem;resize:none;min-height:64px;color:var(--ink);background:#fff}
.chat-form textarea:focus{border-color:var(--go);outline:none;box-shadow:none}
.chat-form .btn-wa{width:100%}
.chat-foot{font-size:.74rem;color:var(--slate);margin:0;text-align:center}
/* phones, including a phone held sideways (short viewport) */
@media (max-width:640px),(max-height:500px){.chat{right:calc(12px + env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));transition:transform .25s ease,opacity .25s ease}.chat-btn .txt{display:none}.chat-btn{padding:0 15px;width:52px;justify-content:center}
  /* the floating button would sit on prices and footer text while scrolling; on a phone the header icon is the entry
     point and the floating button appears only once the reader reaches the end, over space reserved for it */
  .chat:not(.open) .chat-btn{opacity:0;pointer-events:none;transform:translateY(120px)}
  .chat.is-end:not(.is-away) .chat-btn,.chat.open .chat-btn{opacity:1;pointer-events:auto;transform:none}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .chat-panel{max-height:calc(100dvh - 100px);overflow:auto}
  /* while the reader scrolls down the button steps out of the way; it comes back on the first scroll up */
  .chat.is-away{transform:translateY(120px);opacity:0;pointer-events:none}}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-size:.9rem;z-index:80;box-shadow:0 10px 30px rgba(0,0,0,.3);max-width:calc(100% - 32px)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;scroll-snap-type:none}
  /* the living backdrop stops completely: travellers are hidden, the signal marks hold still */
  .scene-layer .sc,.hero-sc .sc{animation:none!important;transform:none!important}
  .sc-plane,.sc-paper,.sc-cloud,.sc-cargo,.sc-cruise,.sc-sat{display:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .hz-layer,.marquee-track{animation:none!important;transform:none!important}
  .rv-track{transition:none!important}
  .who:hover{transform:none}
}

/* ---------- auth modal: identifier mode switching, tab note, profile step ---------- */
.id-row .cc-wrap{display:flex;flex:none;max-width:140px;overflow:hidden;transition:max-width .22s ease,opacity .22s ease,margin-right .22s ease,visibility 0s linear 0s}
.id-row .cc-wrap .sel{width:100%}
.id-row.is-email .cc-wrap{max-width:0;opacity:0;margin-right:-8px;visibility:hidden;transition:max-width .22s ease,opacity .22s ease,margin-right .22s ease,visibility 0s linear .22s}
.auth-note{font-size:.82rem;color:var(--slate);margin:-8px 0 14px;line-height:1.45}
.auth-in .field select.sel-block{padding:11px 34px 11px 12px}
.auth-links{justify-content:space-between}
dialog.auth a{color:var(--go)}
dialog.auth p{margin:0 0 1em}
dialog.auth .auth-in>p:last-child{margin-bottom:0}

/* ---------- shared plan grid (homepage "plans at a glance", destination and browse pages) ---------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.tab{padding:10px 18px;border-radius:999px;border:1.5px solid var(--rule);font-weight:600;color:var(--ink);background:#fff}
.tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.tab:hover{border-color:var(--ink)}
.table-wrap{overflow:auto;border:1px solid var(--rule);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow)}
/* country-first plan grid: flag · name · carrier line | 7 / 15 / 30 day cells */
.plist{overflow:auto;border:1px solid var(--rule);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow)}
.phead,.prow{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,118px);align-items:center;gap:8px;padding:0 18px}
.phead{position:sticky;top:0;z-index:1;background:var(--paper);border-bottom:1px solid var(--rule);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--slate);font-weight:600;height:42px}
.phead span:not(:first-child),.prow .pc,.prow .na{text-align:right;justify-self:end}
.prow{border-bottom:1px solid var(--rule);min-height:58px}
.prow:last-of-type{border-bottom:0}
.prow:hover{background:#F3F7FD}
.prow .dest-wrap{min-width:0;display:flex;flex-direction:column;gap:1px}
.prow .dest{font-weight:600;display:flex;align-items:center;gap:10px;color:var(--ink);min-width:0}
.prow .dest .flag{font-size:1.3rem;font-family:'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji',sans-serif;flex:none}
.prow .dest>span{min-width:0}
.prow .dest:hover{color:var(--ink3)}
.prow .carriers{display:block;font-size:.76rem;color:var(--slate);font-weight:400;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;padding:0;background:none;border:0;font-family:inherit;max-width:100%}
button.carriers{cursor:pointer}
.prow .carriers.is-open{white-space:normal}
/* price and size are two lines, always: a price read straight into a size ("₹2993 GB") is the one thing this must never do */
.prow .pc{display:inline-flex;flex-direction:column;align-items:flex-end;font-weight:700;padding:5px 10px;border-radius:8px;color:var(--ink3);font-variant-numeric:tabular-nums;line-height:1.15;font-size:15.5px}
.prow .pc .pc-price{display:block}
.prow .pc .pc-data{display:block;font-size:.7rem;font-weight:500;color:var(--slate);white-space:nowrap}
.prow .pc .pc-badge{display:inline-block;margin-top:2px;font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7A5300;background:#FFF3D6;border-radius:100px;padding:1px 6px}
.prow .pc:hover .pc-data{color:#dbe9ff}
.prow .pc:hover{background:var(--go);color:#fff}
.prow .na{color:var(--rule);font-weight:600;padding:6px 10px}
.pmore{display:flex;justify-content:center;padding:10px;border-top:1px solid var(--rule);background:var(--paper)}
.pmore button{font-weight:600;color:var(--go);font-size:.9rem;padding:6px 14px;border-radius:999px}
.pmore button:hover{background:#fff;color:var(--go-hi)}
@media (max-width:760px) and (min-width:601px){.phead,.prow{grid-template-columns:minmax(0,1fr) repeat(3,96px);padding:0 12px}.prow .pc{font-size:14px;padding:5px 6px}}
/* under 600px a row is a card: the country on top, three equal chips (7 / 15 / 30 days) with the price over the size */
@media (max-width:600px){
  .plist .phead{display:none}
  .plist .prow{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:12px 12px 12px;min-height:0}
  .plist .prow .dest-wrap{grid-column:1/-1;margin-bottom:4px}
  .plist .prow .dest{font-size:1rem}
  .plist .prow .carriers{white-space:normal;overflow:visible;text-overflow:clip}
  .plist .prow .pc,.plist .prow .na{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;justify-self:stretch;text-align:right;text-align:center;border:1px solid var(--rule);border-radius:10px;padding:7px 4px 8px;min-height:44px;font-size:15px;color:var(--ink3);background:#fff}
  .plist .prow .pc::before,.plist .prow .na::before{content:attr(data-days) ' days';display:block;font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);margin-bottom:2px}
  .plist .prow .pc .pc-price{font-size:1rem}
  .plist .prow .pc .pc-data{font-size:.72rem;white-space:normal}
  .plist .prow .na{color:var(--slate);font-weight:600}
  .plist .prow .pc:hover{background:var(--go);color:#fff}
  /* the browse list: name, then size and length, price on its own line */
  .plist-plan .prow{grid-template-columns:auto auto minmax(0,1fr);align-items:center}
  .plist-plan .prow .dest-wrap{grid-column:1/-1;margin-bottom:0}
  .plist-plan .prow .pv{font-size:.82rem;color:var(--slate);padding:2px 8px;border:1px solid var(--rule);border-radius:999px;justify-self:start}
  .plist-plan .prow .pc{justify-self:end;align-items:flex-end;border:0;padding:4px 0;min-height:0}
  .plist-plan .prow .pc::before{content:none}
  .plist-plan .prow .pc .pc-data{display:none}
}
.plans-state{padding:28px;border:1px dashed var(--rule);border-radius:var(--r-lg);text-align:center;color:var(--slate);background:#fff}
.ptable{width:100%;border-collapse:collapse;min-width:640px}
.ptable th,.ptable td{padding:12px 18px;text-align:left;border-bottom:1px solid var(--rule)}
.ptable td{font-size:15.5px}
.ptable th{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--slate);font-weight:600;background:var(--paper)}
.ptable th:not(:first-child),.ptable td:not(:first-child){text-align:right;width:130px}
.ptable tr:last-child td{border-bottom:0}
.ptable tbody tr:hover{background:#F3F7FD}
.ptable .dest{font-weight:600;display:flex;align-items:center;gap:10px}
.ptable .dest .flag{font-size:1.3rem;font-family:'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji',sans-serif}
.ptable .carriers{display:block;font-size:.78rem;color:var(--slate);font-weight:400;margin-top:2px}
.ptable a.pc{display:inline-block;font-weight:700;padding:6px 10px;border-radius:8px;color:var(--ink3);font-variant-numeric:tabular-nums}
.ptable a.pc:hover{background:var(--go);color:#fff}
.ptable a.pc small{display:block;font-size:.7rem;font-weight:500;color:var(--slate)}
.ptable a.pc:hover small{color:#dbe9ff}
.plans-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px;flex-wrap:wrap;color:var(--slate);font-size:.88rem}
/* one row per plan — destination / browse: name+coverage | data | validity | price */
.plist-plan .phead,.plist-plan .prow{grid-template-columns:minmax(0,1fr) 96px 96px 118px}
.prow-plan .dest{align-items:flex-start}
.prow .pv{text-align:right;justify-self:end;color:var(--slate);font-size:.9rem;font-variant-numeric:tabular-nums}
.tagx{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;background:#E8F1FD;color:var(--ink2);font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}
@media (max-width:760px) and (min-width:601px){.plist-plan .phead,.plist-plan .prow{grid-template-columns:minmax(0,1fr) 64px 70px 96px}.prow .pv{font-size:.8rem}}
.prow-plan .pc .pc-data{display:none}

/* ---------- phones and tablets ---------- */
@media (max-width:900px){
  /* backdrop blur over a scrolling page is the single most expensive thing a phone GPU is asked to do here */
  .hdr{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(250,249,246,.98)}
  dialog.auth::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (max-width:720px){
  .container{padding:0 max(16px,env(safe-area-inset-left)) 0 max(16px,env(safe-area-inset-right))}
  .hdr .container{height:60px;gap:10px}
  .logo-img{height:34px}
  .logo{height:44px}
  .hdr-tools{gap:4px}
  .topbar .container{min-height:32px;font-size:.8rem}
  /* the animated travellers are decoration; a phone spends its frames on the page instead */
  .scene-layer .sc,.hero-sc .sc{display:none!important;animation:none!important}
  .foot ul a{display:block;padding:12px 0;min-height:44px}
  .foot-bottom{flex-direction:column;gap:10px}
  .ptable{min-width:0}
}
/* every control a finger lands on is at least 44px, and a field never makes iOS zoom the page.
   Matched by width as well as pointer type: a phone always gets it, and so does the audit's emulation. */
@media (pointer:coarse),(max-width:900px){
  /* !important on purpose: every input/select on a phone must be 16px or iOS zooms the page on focus, whatever the component's own size */
  input,select,textarea{font-size:16px!important}
  .topbar a,.topbar .status{min-height:44px}
  .logo{height:44px}
  #az-cur,.sel{min-height:44px}
  .btn,.btn-sm,.btn-icon,.tab,.chip,.stepper button,.pl-row .rm,.foot .social a,.adm-nav a,.rail a,.hz-fig,.user-pop a,.drawer a,.chat-q button{min-height:44px}
  .btn-icon,.stepper button,.pl-row .rm,.foot .social a{min-width:44px;width:44px;height:44px}
  .chip{padding:10px 14px}
  .rv-dots{gap:0}
  .rv-dots button{width:44px;height:44px;border-radius:50%;background:transparent;position:relative}
  .rv-dots button::after{content:'';position:absolute;left:18px;top:18px;width:8px;height:8px;border-radius:50%;background:var(--rule)}
  .rv-dots button[aria-selected="true"]{width:44px;border-radius:50%}
  .rv-dots button[aria-selected="true"]::after{background:var(--ink);left:12px;width:20px;border-radius:4px}
  .crumbs a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 4px}
  .small a,.foot p a,p a,li a:not(.btn),dd a,address a{display:inline;padding:12px 0}
  button,input:not([type=checkbox]):not([type=radio]),select{min-height:44px}
  .row .btn{height:auto;min-height:44px}
  .attention-list li{display:block;padding:6px 0}.attention-list a{display:block;padding:8px 0;min-height:44px}.attention-list .muted{display:block}
  .portal-nav a{min-height:44px}
  .who-body a,.card>a:not(.btn),.pl-why-src a{min-height:44px;display:inline-flex;align-items:center}
  .toc a{min-height:44px;align-items:center}
  .prow{min-height:48px}.prow .dest{min-height:44px;display:flex;align-items:center}.prow .pc{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .pg-mode,.pg-btn,.tab{min-height:44px}
  .foot ul a{display:block;padding:12px 0;min-height:44px}
  .topbar a{display:inline-flex;align-items:center;min-height:44px}
}

/* browse list under 600px (must follow the .plist-plan desktop rules above): name, then size and length pills, price on its own line */
@media (max-width:600px){
  .plist-plan .phead{display:none}
  .plist-plan .prow{grid-template-columns:auto auto minmax(0,1fr);gap:6px 8px;align-items:center;padding:12px}
  .plist-plan .prow .dest-wrap{grid-column:1/-1;margin-bottom:0}
  .plist-plan .prow .pv{font-size:.82rem;color:var(--slate);padding:3px 9px;border:1px solid var(--rule);border-radius:999px;justify-self:start;text-align:left;white-space:nowrap}
  .plist-plan .prow .pc{justify-self:end;align-items:flex-end;border:0;padding:4px 0;min-height:0;background:none}
  .plist-plan .prow .pc::before{content:none}
  .plist-plan .prow .pc .pc-data{display:none}
}