/* --- typefaces (self-hosted, OFL) --------------------------------------- */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD,U+20B9;
}
@font-face{
  font-family:'Jakarta';font-style:normal;font-weight:500 800;font-display:swap;
  src:url('/assets/fonts/jakarta-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD,U+20B9;
}
/* Metric-matched fallback: keeps the swap from shifting layout (CLS). */
@font-face{
  font-family:'Inter-fallback';src:local('Segoe UI'),local('Arial');
  size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%;
}

/* ==========================================================================
   Visa Flight Ticket - design system
   Boarding-pass inspired. Light + dark. No external assets.
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */
:root{
  --bg:#ffffff;
  --bg-alt:#f5f7fa;
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --ink:#111827;
  --ink-2:#3f4855;   /* body copy. Darker than it needs to be for WCAG,
                        because passing a ratio and being comfortable to
                        read for a page are not the same thing. */
  --ink-3:#5f6a77;   /* hints, captions, table headers. The old value was
                        3.3:1 on our own tinted panels, i.e. below AA for
                        body text on every surface the site actually uses. */
  --line:#e4e8ee;
  --line-strong:#c9d1dc;
  --brand:#193b92;
  --brand-ink:#0f2861;
  --brand-soft:#e9edf8;
  --accent:#7d5f10;  /* gold, but only ever used as TEXT here. The
                        brighter original was 2.8:1 on tinted panels,
                        which failed even the large-text threshold. */
  --accent-soft:#fdf4dc;
  /* Success is green, not brand blue. They used to be the same hex, so
     "verified", "delivered" and "payment received" looked identical to every
     button and link on the page. The order and payment screens are exactly
     where a customer needs confirmation to read as confirmation. */
  --ok:#0e7a4d;
  --ok-soft:#e7f5ee;
  --danger:#c0392b;
  --shadow-sm:0 1px 2px rgba(16,32,26,.05),0 2px 6px rgba(16,32,26,.04);
  --shadow-md:0 2px 6px rgba(16,32,26,.05),0 12px 28px -12px rgba(16,32,26,.15);
  --shadow-lg:0 4px 12px rgba(16,32,26,.06),0 24px 56px -20px rgba(16,32,26,.22);
  --radius:14px;
  --radius-lg:20px;
  --maxw:1140px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:'Inter','Inter-fallback',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --display:'Jakarta','Inter','Inter-fallback',-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  /* vertical rhythm */
  --sp-section:clamp(3.5rem,7vw,6rem);
  --sp-block:clamp(1.6rem,3vw,2.6rem);
}
:root[data-theme="dark"]{
  --bg:#0a0f18; --bg-alt:#0f1521; --surface:#131a27; --surface-2:#19212f;
  --ink:#e8eef7; --ink-2:#aebbcd; --ink-3:#818ea2;
  --line:#232c3c; --line-strong:#313c50;
  --brand:#8aa6ea; --brand-ink:#adc2f2; --brand-soft:#16213f;
  --accent:#e3b04b; --accent-soft:#2e2512;
  --ok:#4fc98d; --ok-soft:#10281d; --danger:#ff8a7a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
  --shadow-md:0 2px 6px rgba(0,0,0,.35),0 12px 28px -12px rgba(0,0,0,.6);
  --shadow-lg:0 4px 12px rgba(0,0,0,.4),0 24px 56px -20px rgba(0,0,0,.7);
}

/* --- base --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:86px}
body{
  margin:0;font-family:var(--sans);background:var(--bg);color:var(--ink);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;overflow-x:hidden;
  font-feature-settings:'cv05' 1,'cv11' 1;letter-spacing:-.006em;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{
  font-family:var(--display);line-height:1.14;margin:0 0 .5em;
  letter-spacing:-.028em;font-weight:750;text-wrap:balance;
}
h1{font-size:clamp(2.05rem,1.4rem + 2.4vw,3.05rem);letter-spacing:-.036em;font-weight:800}
h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.35rem);letter-spacing:-.032em}
h3{font-size:clamp(1.14rem,1.04rem + .48vw,1.36rem);letter-spacing:-.022em;font-weight:700}
h4{font-size:1.02rem}
p{text-wrap:pretty}
p{margin:0 0 1.1em}
ul,ol{padding-left:1.25em}
li{margin:.35em 0}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}
::selection{background:var(--brand);color:#fff}
.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:#fff;padding:.7rem 1rem;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* --- layout ------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:20px}
.wrap--narrow{max-width:780px}
section{padding:var(--sp-section) 0}
section.tight{padding:clamp(2rem,4vw,3rem) 0}
.band{background:var(--bg-alt)}
.center{text-align:center}
.stack>*+*{margin-top:1rem}
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.lede{font-size:clamp(1.05rem,1rem + .3vw,1.19rem);color:var(--ink-2);max-width:60ch;line-height:1.58;letter-spacing:-.01em}
.center .lede{margin-inline:auto}
/* Small mono type at wide tracking needs more weight and more contrast than
   it looks like it does. The old version sat at --brand on --brand-soft, and
   on a .band section that pill was almost the same colour as the background
   behind it, so the whole label floated and read as disabled text. */
.eyebrow{
  display:inline-block;font-family:var(--mono);font-size:.75rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brand-ink);
  background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 18%,transparent);
  padding:.42rem .75rem;border-radius:999px;margin-bottom:1rem;
}

/* --- header ------------------------------------------------------------- */
/* No backdrop-filter here, deliberately. A blur behind a sticky header has to
   be recomputed every scroll frame, on every page, for the whole session - it
   is the most expensive thing a site can ask for on scroll. At 96% opacity the
   frosted look is almost indistinguishable and costs nothing. */
.hdr{
  position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--surface) 96%,transparent);
  border-bottom:1px solid var(--line);
}
.hdr__in{display:flex;align-items:center;gap:14px;min-height:66px}
.logo{display:flex;align-items:center;gap:9px;font-weight:750;color:var(--ink);font-size:1.03rem;letter-spacing:-.02em;flex:none}
.logo:hover{text-decoration:none}
.logo svg{width:32px;height:32px;flex:none}
/* the brand artwork is a detailed illustration, so it needs more room
   than a flat mark to stay legible */
.logo__img{width:40px;height:40px;flex:none;object-fit:contain}
.ftr .logo__img{width:46px;height:46px}
.logo span b{color:var(--brand)}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a:not(.btn){
  color:var(--ink-2);font-size:.93rem;font-weight:550;padding:.5rem .68rem;border-radius:9px;white-space:nowrap;
}
.nav a:not(.btn):hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.nav a[aria-current="page"]:not(.btn){color:var(--brand);background:var(--brand-soft)}
.hdr .btn{margin-left:8px}
.wa{
  display:inline-flex;align-items:center;gap:.5rem;margin-left:10px;
  color:var(--ink);font-weight:700;font-size:.94rem;white-space:nowrap;
  padding:.45rem .85rem .45rem .7rem;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--surface);
}
.wa:hover{text-decoration:none;border-color:#25d366;background:#e9faf0;color:var(--ink)}
.wa svg{width:20px;height:20px;color:#25d366;flex:none}
:root[data-theme="dark"] .wa:hover{background:#122a1c}
.burger{
  display:none;margin-left:auto;background:var(--surface-2);border:1px solid var(--line);
  border-radius:10px;width:42px;height:42px;cursor:pointer;color:var(--ink);align-items:center;justify-content:center;
}
.burger svg{width:20px;height:20px}
@media (max-width:1000px){
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;background:var(--surface);border-bottom:1px solid var(--line);
    padding:12px 20px 18px;gap:2px;box-shadow:var(--shadow-md);max-height:78vh;overflow-y:auto;
  }
  .nav.open{display:flex}
  .nav a:not(.btn){padding:.72rem .6rem;font-size:1rem}
  .hdr .btn{margin:10px 0 0}
  .wa{margin:10px 0 0;justify-content:center;padding:.7rem 1rem}
  .burger{display:flex}
}

/* --- buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:inherit;font-size:.95rem;font-weight:650;line-height:1;
  padding:.82rem 1.3rem;border-radius:11px;border:1px solid transparent;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;text-align:center;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--brand);color:#fff;box-shadow:0 6px 16px -6px color-mix(in srgb,var(--brand) 70%,transparent)}
.btn--primary:hover{background:var(--brand-ink);color:#fff}
:root[data-theme="dark"] .btn--primary,
:root[data-theme="dark"] .btn--primary:hover{color:#04101f}
.btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.btn--ghost:hover{background:var(--surface-2);color:var(--ink)}
/* An inline icon inside a button had no intrinsic height, and the global
   img,svg{height:auto} collapsed it. Inside .btn-row the button is itself a
   flex item, so the icon was shrunk to nothing and every WhatsApp CTA on the
   site rendered text-only. Every other icon rule here carries flex:none for
   the same reason; .btn svg was simply never written. */
.btn svg{width:18px;height:18px;flex:none}
.btn--wa{background:#1fab55;color:#fff}
.btn--wa:hover{background:#178f46;color:#fff}
.btn--lg{padding:1rem 1.7rem;font-size:1.02rem;border-radius:13px}
.btn--block{display:flex;width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:560px){
  .hero .btn-row{gap:10px}
  .hero .btn-row .btn{flex:1 1 100%}
}
.center .btn-row{justify-content:center}

/* --- THE TICKET --------------------------------------------------------- */
.ticket-slot{container-type:inline-size}
.ticket{
  position:relative;display:grid;grid-template-columns:1fr 118px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);isolation:isolate;height:100%;
}
.ticket--flat{box-shadow:var(--shadow-sm)}
.ticket{transition:transform .22s cubic-bezier(.22,.61,.36,1),box-shadow .22s ease}
.ticket-slot:hover .ticket{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.ticket__main{padding:24px 22px 22px;min-width:0;display:flex;flex-direction:column}
.ticket__main .btn{margin-top:auto}
.ticket__stub{
  position:relative;padding:24px 12px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;
  border-left:2px dashed var(--line-strong);
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--brand-soft) 55%,transparent));
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
}
/* punched notches ride on the perforation itself, so they follow either layout */
.ticket__stub::before,.ticket__stub::after{
  content:"";position:absolute;z-index:2;width:24px;height:24px;border-radius:50%;
  background:var(--bg);border:1px solid var(--line);left:-13px;
}
.ticket__stub::before{top:-13px;clip-path:inset(13px 0 0 0 round 0 0 12px 12px)}
.ticket__stub::after{bottom:-13px;clip-path:inset(0 0 13px 0 round 12px 12px 0 0)}
.band .ticket__stub::before,.band .ticket__stub::after{background:var(--bg-alt)}
.ticket__price{font-family:var(--display);font-size:2.05rem;font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1;font-feature-settings:'tnum' 1}
.ticket__price small{display:block;font-size:.7rem;font-weight:600;color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;margin-top:.5rem}
.ticket__barcode{
  width:100%;height:44px;margin-top:4px;
  background-image:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 9px,var(--ink) 9px 12px,transparent 12px 14px);
  opacity:.72;border-radius:2px;
}
.ticket__code{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--ink-3)}
.ticket h3{margin-bottom:.35rem}
.ticket__desc{color:var(--ink-2);font-size:.95rem;margin-bottom:1rem}
.ticket__list{list-style:none;padding:0;margin:0 0 1.2rem;font-size:.93rem}
.ticket__list li{display:flex;gap:.6rem;align-items:flex-start;margin:.45rem 0;color:var(--ink-2)}
.ticket__list li::before{
  content:"";flex:none;width:17px;height:17px;margin-top:.2rem;border-radius:50%;
  background:var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7a4d' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.ticket__route{
  display:flex;align-items:center;gap:12px;margin:0 0 1rem;padding-bottom:1rem;
  border-bottom:1px dashed var(--line-strong);
}
.ticket__iata{font-family:var(--mono);font-size:1.45rem;font-weight:700;letter-spacing:.04em;color:var(--ink)}
.ticket__plane{flex:1;height:20px;position:relative;color:var(--ink-3)}
.ticket__plane::before{content:"";position:absolute;top:50%;left:0;right:0;border-top:2px dotted currentColor;opacity:.6}
.ticket__plane svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:19px;height:19px;background:var(--surface);padding:0 3px;color:var(--brand)}
.ticket__meta{display:flex;flex-wrap:wrap;gap:18px;font-size:.78rem}
.ticket__meta div span{display:block;font-family:var(--mono);text-transform:uppercase;letter-spacing:.11em;color:var(--ink-3);font-size:.66rem;margin-bottom:2px}
.ticket__meta div b{font-weight:650;color:var(--ink);font-size:.9rem}
.ticket--featured{border-color:var(--brand);box-shadow:var(--shadow-lg)}
.ticket--featured .ticket__stub{background:linear-gradient(180deg,var(--brand-soft),color-mix(in srgb,var(--brand) 16%,transparent))}
.tag-best{
  position:absolute;z-index:3;top:-11px;left:22px;background:var(--accent);color:#2a1f02;
  font-size:.66rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase;
  padding:.3rem .65rem;border-radius:999px;box-shadow:var(--shadow-sm);
}
/* Narrow card OR narrow screen -> stub drops below and runs horizontally.
   Container query drives it; the media query is the no-support fallback. */
@container (max-width:430px){
  .ticket{grid-template-columns:1fr}
  .ticket__main{padding:22px 20px 20px}
  .ticket__stub{
    border-left:0;border-top:2px dashed var(--line-strong);
    border-radius:0 0 var(--radius-lg) var(--radius-lg);flex-direction:row;
    justify-content:space-between;align-items:center;padding:16px 20px;text-align:left;
    background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--brand-soft) 55%,transparent));
  }
  .ticket__price{font-size:1.7rem;display:flex;align-items:baseline;gap:.5rem}
  .ticket__price small{margin-top:0}
  .ticket__barcode{width:88px;height:36px;margin:0}
  .ticket__code{display:none}
  .ticket__stub::before,.ticket__stub::after{top:-12px;bottom:auto}
  .ticket__stub::before{left:-13px;clip-path:inset(0 0 0 13px round 0 12px 12px 0)}
  .ticket__stub::after{left:auto;right:-13px;clip-path:inset(0 13px 0 0 round 12px 0 0 12px)}
}
@media (max-width:640px){
  .ticket{grid-template-columns:1fr}
  .ticket__main{padding:22px 20px 20px}
  .ticket__stub{
    border-left:0;border-top:2px dashed var(--line-strong);
    border-radius:0 0 var(--radius-lg) var(--radius-lg);flex-direction:row;
    justify-content:space-between;align-items:center;padding:16px 20px;text-align:left;
  }
  .ticket__price{font-size:1.7rem;display:flex;align-items:baseline;gap:.5rem}
  .ticket__price small{margin-top:0}
  .ticket__barcode{width:88px;height:36px;margin:0}
  .ticket__code{display:none}
  .ticket__stub::before,.ticket__stub::after{top:-12px;bottom:auto}
  .ticket__stub::before{left:-13px;clip-path:inset(0 0 0 13px round 0 12px 12px 0)}
  .ticket__stub::after{left:auto;right:-13px;clip-path:inset(0 13px 0 0 round 12px 0 0 12px)}
}

/* --- decorative flight path --------------------------------------------- */
.hero{position:relative}
.hero > .wrap{position:relative;z-index:1}
.cta{position:relative;overflow:hidden}
.cta > *:not(.fpath){position:relative;z-index:1}
.fpath{
  /* Natural aspect, not stretched to fill: stretching turns the pin and the
     plane into ovals. */
  position:absolute;left:0;right:0;bottom:2%;width:100%;height:auto;
  z-index:0;pointer-events:none;color:currentColor;opacity:.28;
}
/* The colour has to follow what it is drawn on. It used to be white
   everywhere, which is correct inside the dark CTA slab and completely
   invisible on the light hero, so the whole flourish only existed in dark
   mode. */
.cta .fpath{color:#fff;opacity:.30}
.hero .fpath{color:var(--brand);opacity:.14;bottom:14%}
:root[data-theme="dark"] .hero .fpath{color:#9fb6ee;opacity:.26}
.fpath__line{
  stroke-dashoffset:0;
  animation:fp-draw 2.2s cubic-bezier(.4,0,.2,1) both;
}
@keyframes fp-draw{from{stroke-dasharray:1 13;stroke-dashoffset:420}to{stroke-dashoffset:0}}
.fpath__pin{opacity:.95}
/* The pin's inner hole should read as a hole, so it takes the page behind it. */
.fpath__hole{fill:var(--bg)}
.cta .fpath__hole{fill:#1b3f8f}

.fpath__plane{animation:fp-float 6s ease-in-out infinite;opacity:1}
@keyframes fp-float{0%,100%{transform:translate(1068px,112px) rotate(42deg)}
                    50%{transform:translate(1074px,104px) rotate(42deg)}}
@media (max-width:920px){.fpath{opacity:.09}}
@media (prefers-reduced-motion:reduce){
  .fpath__line,.fpath__plane{animation:none}
}

/* --- route divider ------------------------------------------------------ */
.rdiv{
  display:flex;align-items:center;gap:16px;max-width:520px;
  margin:2.6rem auto .4rem;color:var(--ink-3);
}
.rdiv__code{
  font-family:var(--mono);font-size:.82rem;font-weight:700;letter-spacing:.16em;
  color:var(--ink-3);flex:none;
}
.rdiv__svg{flex:1;height:44px;color:var(--line-strong)}


/* --- boarding-pass texture on banded sections --------------------------- */
.band{
  background-color:var(--bg-alt);
  background-image:radial-gradient(color-mix(in srgb,var(--line-strong) 55%,transparent) 1px,transparent 1px);
  background-size:28px 28px;
  background-position:-14px -14px;
}
.band::before,.band::after{z-index:1}

/* --- hero refinements --------------------------------------------------- */
.hero__seal{margin-top:1.5rem}
.hero .lede{margin-bottom:2rem}
/* start, not center: the booking widget grows when Multi City adds a leg,
   and centring made the whole left column jump down to re-balance against it.
   Layout that moves under the reader is worse than layout that is slightly
   less balanced. */
.hero__grid{align-items:start}

/* --- focus: visible, on-brand, never clipped ---------------------------- */
:focus-visible{
  outline:2.5px solid var(--brand);outline-offset:3px;border-radius:6px;
}
.btn:focus-visible{outline-offset:4px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
.ac__i:focus-visible{outline:2.5px solid var(--brand);outline-offset:-3px}

/* --- press feedback ----------------------------------------------------- */
.btn:active{transform:translateY(1px) scale(.994)}
.bw__tab:active,.ac__i:active{transform:scale(.985)}

/* --- section rhythm ----------------------------------------------------- */
section > .wrap > .center{margin-bottom:var(--sp-block)}
.band{position:relative}
/* hairline instead of a hard colour step between stacked sections */
.band::before,.band::after{
  content:"";position:absolute;left:0;right:0;height:1px;background:var(--line);
}
.band::before{top:0}
.band::after{bottom:0}

/* --- generic card ------------------------------------------------------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow-sm);position:relative;
}
.card h3{margin-bottom:.4rem}
.card p:last-child{margin-bottom:0}
.card--link{transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease,border-color .2s ease}
.card--link:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--brand)}
.card--link:hover .card__ico{transform:scale(1.08) rotate(-3deg)}

/* A whole card is one anchor, so the global a:hover underline was striking
   through the eyebrow, the description and the "read the guide" line all at
   once, which reads as a rendering fault rather than a hover state. Only the
   heading should respond, the way it would if the heading were the link. */
.card--link:hover,
.card--link:hover .tagline,
.card--link:hover p,
.card--link:hover .more{text-decoration:none}
.card--link:hover h3{
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:.16em;
  text-decoration-color:color-mix(in srgb,var(--brand) 45%,transparent);
}
.card__ico{
  width:44px;height:44px;border-radius:13px;background:var(--brand-soft);color:var(--brand);
  transition:transform .25s cubic-bezier(.22,.61,.36,1),background .2s ease;
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.card__ico svg{width:21px;height:21px}
.num{
  width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;
  font-family:var(--mono);margin-bottom:12px;
}
:root[data-theme="dark"] .num{color:#04101f}

/* --- hero --------------------------------------------------------------- */
.hero{
  position:relative;padding:clamp(2.8rem,6vw,4.8rem) 0 clamp(3rem,6vw,5rem);
  background:
    radial-gradient(820px 380px at 84% -10%,color-mix(in srgb,var(--brand) 6%,transparent),transparent 72%),
    var(--bg);
  overflow:hidden;
}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
@media (max-width:920px){.hero__grid{grid-template-columns:1fr;gap:34px}}
.hero h1{margin-bottom:.7rem;max-width:15ch}
.hero .lede{font-size:1.15rem;margin-bottom:1.7rem}
.trustline{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:1.7rem;font-size:.87rem;color:var(--ink-2)}
.trustline b{display:flex;align-items:center;gap:.45rem;font-weight:600}
.trustline svg{width:16px;height:16px;color:var(--ok);flex:none}

/* --- sticky conversion bar ---------------------------------------------- */
.scta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:color-mix(in srgb,var(--surface) 98%,transparent);
  border-top:1px solid var(--line);box-shadow:0 -6px 28px -14px rgba(16,32,26,.3);
  transform:translateY(105%);transition:transform .34s cubic-bezier(.22,.61,.36,1);
}
.scta.is-up{transform:none}
.scta[data-hidden]{pointer-events:none}
.scta.is-up{pointer-events:auto}
.scta__in{display:flex;align-items:center;gap:18px;padding-block:11px;min-height:66px}
.scta__txt{min-width:0;flex:1}
.scta__txt b{display:block;font-family:var(--display);font-size:.98rem;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.scta__txt span{
  display:flex;align-items:center;gap:.35rem;font-size:.82rem;color:var(--ink-3);
  margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.scta__txt svg{width:14px;height:14px;color:var(--ok);flex:none}
.scta__act{display:flex;align-items:center;gap:10px;flex:none}
.scta__price{
  font-family:var(--display);font-size:1.4rem;font-weight:800;letter-spacing:-.035em;
  color:var(--ink);display:flex;align-items:baseline;gap:.3rem;font-feature-settings:'tnum' 1;
}
.scta__price em{font-style:normal;font-size:.7rem;font-weight:600;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.scta__wa{padding-inline:.85rem}
.scta__wa svg{width:20px;height:20px}
@media (max-width:820px){
  .scta__txt span{display:none}
  .scta__txt b{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:560px){
  .scta__in{gap:10px;padding-block:9px;min-height:60px}
  .scta__txt{display:none}
  .scta__act{flex:1}
  .scta__act .btn--primary{flex:1}
  .scta__price{font-size:1.25rem}
}
/* keep the footer clear of the bar once it is up */
body.has-scta .ftr{padding-bottom:96px}
@media (prefers-reduced-motion:reduce){.scta{transition:none}}

/* --- reading progress --------------------------------------------------- */
.rprog{
  position:fixed;top:0;left:0;height:3px;z-index:80;width:0;
  background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 55%,var(--accent)));
  transition:width .1s linear;pointer-events:none;
}

/* --- highlight strip ---------------------------------------------------- */
.hl{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.2rem;justify-content:center}
.hl__i{flex:1 1 240px;max-width:360px}
.hl__i{
  position:relative;display:flex;align-items:center;gap:.55rem;
  min-width:0;padding:.8rem 1.1rem .8rem .9rem;border-radius:13px;
  background:var(--surface);border:1.5px solid var(--line-strong);box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.hl__i:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.hl__i svg{width:24px;height:24px;flex:none;stroke-width:1.7}
.hl__i b{display:block;font-size:.9rem;font-weight:750;letter-spacing:-.02em;color:var(--ink);line-height:1.2;white-space:nowrap}
.hl__i small{display:block;font-size:.7rem;color:var(--ink-3);line-height:1.3;margin-top:2px;white-space:nowrap}
.hl__i--real{border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:var(--ok-soft)}
.hl__i--real svg{color:var(--ok)}
.hl__i--pnr{border-color:color-mix(in srgb,var(--brand) 40%,transparent);background:var(--brand-soft)}
.hl__i--pnr svg{color:var(--brand)}
.hl__i--price{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:var(--accent-soft)}
.hl__i--price svg{color:var(--accent)}
.hl__i--price b{font-size:1.1rem}
.hl__i--price em{font-style:normal;font-size:.8rem;font-weight:650;color:var(--ink-2)}
/* one slow pulse on the price so the eye lands there first */
.hl__i--price::after{
  content:"";position:absolute;inset:-1.5px;border-radius:13px;pointer-events:none;
  border:1.5px solid var(--accent);opacity:0;animation:hl-pulse 3.2s ease-out infinite;
}
@keyframes hl-pulse{
  0%{opacity:.85;transform:scale(1)}
  55%,100%{opacity:0;transform:scale(1.055)}
}
@media (max-width:520px){
  .hl{gap:8px}
  .hl__i{flex:1 1 100%;padding:.6rem .85rem}
  .hl__i b,.hl__i small{white-space:normal}
}

/* --- airport autocomplete ----------------------------------------------- */
.ac-wrap{position:relative}
.ac{
  position:absolute;z-index:40;top:calc(100% + 6px);left:0;right:0;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;
  box-shadow:var(--shadow-lg);max-height:274px;overflow-y:auto;display:none;
  animation:ac-in .14s ease-out;
}
.ac.is-open{display:block}
@keyframes ac-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.ac__i{
  display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;
  padding:.6rem .8rem;background:none;border:0;border-bottom:1px solid var(--line);
  cursor:pointer;font:inherit;color:var(--ink);
}
.ac__i:last-child{border-bottom:0}
.ac__i:hover,.ac__i.is-on{background:var(--brand-soft)}
.ac__code{
  font-family:var(--mono);font-size:.76rem;font-weight:700;letter-spacing:.06em;
  background:var(--surface-2);border:1px solid var(--line);border-radius:6px;
  padding:.28rem .4rem;color:var(--brand);flex:none;min-width:44px;text-align:center;
}
.ac__i.is-on .ac__code,.ac__i:hover .ac__code{background:var(--surface);border-color:var(--brand)}
.ac__txt{min-width:0}
.ac__txt b{display:block;font-size:.9rem;font-weight:650;line-height:1.25}
.ac__txt small{
  display:block;font-size:.74rem;color:var(--ink-3);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* --- multi-city legs ---------------------------------------------------- */
.bw__leg{
  border:1px dashed var(--line-strong);border-radius:12px;padding:12px;margin-bottom:11px;
  background:var(--surface-2);animation:leg-in .22s ease-out;
}
@keyframes leg-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.bw__leghd{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.bw__leghd span{
  font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--brand);
}
.bw__rm{
  background:none;border:0;font:inherit;font-size:.74rem;font-weight:650;color:var(--ink-3);
  cursor:pointer;padding:.2rem .35rem;border-radius:6px;
}
.bw__rm:hover{color:var(--danger);background:var(--surface)}
.bw__leg .bw__f:last-child{margin-bottom:0}
.bw__add{
  display:block;width:100%;font:inherit;font-size:.84rem;font-weight:650;
  padding:.62rem;margin-bottom:11px;cursor:pointer;color:var(--brand);
  background:var(--brand-soft);border:1px dashed color-mix(in srgb,var(--brand) 45%,transparent);
  border-radius:10px;transition:background .14s ease;
}
.bw__add:hover{background:color-mix(in srgb,var(--brand) 14%,transparent)}

/* --- scroll reveal ------------------------------------------------------
   The hidden state is declared in CSS under .js-anim, which a tiny inline
   script in <head> sets before first paint. Deferred JS adding the class
   would paint the content, then hide it -- a visible flash -- and would
   leave the page blank if the script ever failed to run. The hero is
   excluded: above-the-fold content must never depend on an observer.
   ------------------------------------------------------------------------ */
/* :not(:first-of-type) matters more than it looks. Only the home page puts
   class="hero" on its opening section; on the other 76 pages the first
   section matched this rule, so everything above the fold was invisible from
   first paint until main.js ran and revealed it. The fold is not something
   CSS can measure, but "the first section" is a good enough stand-in for it
   and needs no JavaScript at all. */
.js-anim section:not(.hero):not(:first-of-type) > .wrap > *,
.js-anim section:not(.hero):not(:first-of-type) .grid > *,
.js-anim section:not(.hero):not(:first-of-type) .steps > *,
.js-anim section:not(.hero):not(:first-of-type) .trust-panel > .trust-card,
.js-anim section:not(.hero):not(:first-of-type) .stats > .stat,
.js-anim section:not(.hero):not(:first-of-type) .mq,
.js-anim section:not(.hero):not(:first-of-type) .tbl-wrap,
.js-anim section:not(.hero):not(:first-of-type) .faq,
.js-anim section:not(.hero):not(:first-of-type) .note{
  opacity:0;transform:translateY(18px);
  transition:opacity .35s cubic-bezier(.22,.61,.36,1) var(--rvd,0ms),
             transform .35s cubic-bezier(.22,.61,.36,1) var(--rvd,0ms);
}
/* Above the fold on arrival: visible immediately, and explicitly with no
   transition, so even a late frame snaps rather than fading in halfway. */
.js-anim .rv-now{opacity:1!important;transform:none!important;transition:none!important}
.js-anim .rv-in{opacity:1;transform:none}

/* Hero animates on load, never on scroll -- and deliberately NOT the h1 or
   lede. Those are the LCP candidates; fading them in delays Largest
   Contentful Paint, which is a Core Web Vitals ranking signal. Everything
   secondary still moves, so the section reads as animated without paying
   for it at the metric that matters. */
.hero .eyebrow,.hero .btn-row,.hero .trustline,
.hero .hl,.hero .stats,.hero .bw,.hero .pass{
  animation:hero-in .6s cubic-bezier(.22,.61,.36,1) both;
}
.hero .btn-row{animation-delay:.06s}
.hero .trustline{animation-delay:.12s}
.hero .bw,.hero .pass{animation-delay:.04s}
.hero .hl{animation-delay:.18s}
.hero .stats{animation-delay:.24s}
@keyframes hero-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .js-anim section:not(.hero) > .wrap > *,
  .js-anim section:not(.hero) .grid > *,.js-anim section:not(.hero) .steps > *,
  .js-anim section:not(.hero) .trust-panel > .trust-card,
  .js-anim section:not(.hero) .stats > .stat,.js-anim section:not(.hero) .mq,
  .js-anim section:not(.hero) .tbl-wrap,.js-anim section:not(.hero) .faq,
  .js-anim section:not(.hero) .note{
    opacity:1;transform:none;transition:none;
  }
  .hero .eyebrow,.hero .btn-row,.hero .trustline,
  .hero .hl,.hero .stats,.hero .bw,.hero .pass{animation:none}
}

/* --- booking widget ----------------------------------------------------- */
.bw{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:14px;max-width:470px;width:100%;margin-inline:auto;
}
.bw__tabs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:12px;padding:5px;margin-bottom:12px;
}
.bw__tab{
  font:inherit;font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.68rem .4rem;border-radius:8px;border:1px solid transparent;background:transparent;
  color:var(--ink-2);cursor:pointer;transition:background .12s ease,color .12s ease;
}
.bw__tab:hover{color:var(--ink)}
.bw__tab.is-on{background:var(--brand);color:#fff;box-shadow:var(--shadow-sm)}
:root[data-theme="dark"] .bw__tab.is-on{color:#04101f}
.bw__trip{
  display:flex;flex-wrap:wrap;gap:4px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:11px;padding:5px;margin-bottom:14px;
}
.bw__trip label{
  display:flex;align-items:center;gap:.45rem;flex:1;justify-content:center;cursor:pointer;
  padding:.5rem .5rem;border-radius:8px;font-size:.76rem;font-weight:650;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}
.bw__trip label:hover{color:var(--ink-2)}
.bw__trip input{width:15px;height:15px;flex:none;accent-color:var(--brand);margin:0}
.bw__trip input:checked+span{color:var(--brand)}
.bw__trip span{transition:color .12s ease}
.bw__f{margin-bottom:11px}
.bw__f label{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--brand);margin-bottom:5px;
}
.bw__f input{padding:.72rem .8rem;font-size:.94rem}
.bw__row{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.bw__row .bw__f{margin-bottom:11px}
.bw__row .bw__f[hidden]{display:none}
.bw .btn{margin-top:3px}
.bw__note{
  font-size:.76rem;color:var(--ink-3);text-align:center;margin:11px 0 2px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem .6rem;
}
.bw__note b{font-weight:600;display:inline-flex;align-items:center;gap:.3rem}
.bw__note svg{width:13px;height:13px;color:var(--ok)}
@media (max-width:420px){.bw__row{grid-template-columns:1fr}}

/* --- visitor visa flag panel -------------------------------------------- */
.vv{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(165deg,#2952b8,#193b92 62%,#0f2861);
  padding:32px 20px 30px;text-align:center;box-shadow:var(--shadow-lg);height:100%;
  display:flex;flex-direction:column;justify-content:center;
}
.vv::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 220px at 82% 8%,rgba(255,255,255,.16),transparent 70%);
}
.vv__k{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.75);margin:0 0 .5rem;
}
.vv h2{color:#fff;font-size:clamp(1.5rem,1.2rem + 1.1vw,1.95rem);margin-bottom:.5rem}
.vv p{color:rgba(255,255,255,.86);font-size:.95rem;max-width:40ch;margin:0 auto 1.4rem}
.vv__windows{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:1.5rem}
.vv__win{
  width:50px;height:68px;border-radius:25px/31px;overflow:hidden;position:relative;
  border:2.5px solid rgba(255,255,255,.92);box-shadow:0 6px 18px -6px rgba(0,0,0,.45);
  background:#fff;flex:none;
}
.vv__win svg{width:100%;height:100%;object-fit:cover}
.vv__win span{
  position:absolute;left:0;right:0;bottom:0;font-size:.53rem;font-weight:700;letter-spacing:.06em;
  text-align:center;background:rgba(0,0,0,.55);color:#fff;padding:2px 0;
}
.vv .btn{align-self:center}
.vv__cta{background:#fff;color:#0f2861;border-color:transparent}
.vv__cta:hover{background:#eaf6f0;color:#0f2861}
@media (max-width:520px){.vv__win{width:48px;height:66px}}

/* --- boarding pass hero art -------------------------------------------- */
.pass{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;max-width:440px;margin-inline:auto;width:100%;
}
.pass__top{
  display:flex;justify-content:space-between;align-items:center;padding:14px 20px;
  background:var(--brand);color:#fff;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;font-weight:600;
}
:root[data-theme="dark"] .pass__top{color:#04101f}
.pass__body{padding:22px 20px}
.pass__row{display:flex;justify-content:space-between;gap:16px;margin-bottom:18px}
.pass__f span{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.pass__f b{font-weight:650;font-size:.98rem;color:var(--ink)}
.pass__route{display:flex;align-items:center;gap:14px;margin:4px 0 20px}
.pass__route .ticket__iata{font-size:2rem}
.pass__foot{
  border-top:2px dashed var(--line-strong);padding:16px 20px;display:flex;
  align-items:center;justify-content:space-between;gap:14px;background:var(--surface-2);flex-wrap:wrap;
}
.pnr-chip{
  font-family:var(--mono);font-weight:700;letter-spacing:.2em;font-size:1.05rem;color:var(--ink);
  background:var(--accent-soft);border:1px dashed var(--accent);padding:.35rem .7rem;border-radius:8px;
}
.verified{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:650;color:var(--ok);background:var(--ok-soft);padding:.35rem .65rem;border-radius:999px}
.verified svg{width:14px;height:14px}

/* --- numbered feature cards --------------------------------------------- */
.fc-grid{
  display:grid;gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
}
.fc{
  position:relative;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:28px 26px 26px;
  box-shadow:0 1px 2px rgba(16,32,26,.05),0 10px 30px -18px rgba(16,32,26,.35);
  transition:transform .24s cubic-bezier(.22,.61,.36,1),box-shadow .24s ease,border-color .24s ease;
}
.fc:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--brand)}
.fc__n{
  position:absolute;top:14px;right:20px;font-family:var(--display);
  font-size:2.9rem;font-weight:800;line-height:1;letter-spacing:-.05em;
  color:var(--ink);opacity:.07;font-feature-settings:'tnum' 1;pointer-events:none;
  transition:opacity .24s ease,transform .24s ease;
}
.fc:hover .fc__n{opacity:.13;transform:translateY(-2px)}
.fc__i{
  display:block;width:46px;height:46px;color:var(--brand);margin-bottom:1.4rem;
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.fc__i svg{width:46px;height:46px;stroke-width:1.4}
.fc:hover .fc__i{transform:scale(1.07) rotate(-3deg)}
.fc h3{font-size:1.18rem;margin-bottom:.5rem;letter-spacing:-.025em}
.fc p{font-size:.94rem;color:var(--ink-2);margin:0;line-height:1.6}
@media (max-width:560px){
  .fc{padding:24px 22px}
  .fc__n{font-size:2.3rem;top:12px;right:16px}
  .fc__i,.fc__i svg{width:40px;height:40px}
}

/* --- back to top -------------------------------------------------------- */
.totop{
  position:fixed;right:20px;bottom:20px;z-index:65;width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--surface);border:1px solid var(--line-strong);color:var(--ink-2);
  box-shadow:var(--shadow-md);cursor:pointer;
  opacity:0;transform:translateY(10px) scale(.9);pointer-events:none;
  transition:opacity .25s ease,transform .25s cubic-bezier(.22,.61,.36,1),color .16s ease,border-color .16s ease;
}
.totop.is-on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{color:var(--brand);border-color:var(--brand)}
.totop svg{width:20px;height:20px}
body.has-scta .totop{bottom:88px}
@media (max-width:560px){.totop{right:14px;bottom:14px;width:42px;height:42px}
  body.has-scta .totop{bottom:76px}}
@media (prefers-reduced-motion:reduce){.totop{transition:opacity .01ms}}

/* --- trust: stat bar ---------------------------------------------------- */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:0;border-radius:var(--radius-lg);overflow:hidden;margin:2rem 0 0;
  background:linear-gradient(180deg,var(--brand-soft),color-mix(in srgb,var(--brand-soft) 35%,var(--surface)));
  border:1px solid color-mix(in srgb,var(--brand) 22%,transparent);
  box-shadow:0 1px 2px rgba(16,32,26,.05),0 14px 34px -22px color-mix(in srgb,var(--brand) 60%,transparent);
  position:relative;
}
/* a thin brand rule across the top ties it to the buttons above it */
.stats::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 55%,var(--accent)));
}
.stats .stat{
  padding:22px 18px 20px;text-align:center;position:relative;
}
/* dividers drawn as insets so they stop short of the edges */
.stats .stat+.stat::before{
  content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;
  background:color-mix(in srgb,var(--brand) 22%,transparent);
}
.stats .stat b{
  display:block;font-family:var(--display);
  font-size:clamp(1.45rem,1.1rem + 1.1vw,1.95rem);font-weight:800;
  letter-spacing:-.035em;color:var(--brand-ink);line-height:1.05;
  margin-bottom:.35rem;font-feature-settings:'tnum' 1;
}
.stats .stat span{
  display:block;font-size:.83rem;line-height:1.4;color:var(--ink-2);font-weight:500;
}
.hero .stats{margin-top:2.2rem}
@media (max-width:520px){
  .stats{grid-template-columns:1fr 1fr}
  .stats .stat{padding:18px 12px 16px}
  /* on two columns the vertical rule is wrong for every other cell */
  .stats .stat+.stat::before{display:none}
  .stats .stat:nth-child(2n)::before{display:block}
  .stats .stat:nth-child(n+3)::after{
    content:"";position:absolute;top:0;left:12%;right:12%;height:1px;
    background:color-mix(in srgb,var(--brand) 18%,transparent);
  }
}

/* --- trust: three-up panel --------------------------------------------- */
.trust-panel{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:0;
  background:var(--surface);border:1px solid var(--brand);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-md);
}
.trust-panel--2{grid-template-columns:repeat(2,1fr)}
.trust-panel--2 .trust-card:nth-child(2n){border-right:0}
.trust-panel--2 .trust-card:nth-child(-n+2){border-bottom:1px solid var(--line)}
@media (max-width:560px){
  .trust-panel--2{grid-template-columns:1fr}
  .trust-panel--2 .trust-card{border-right:0;border-bottom:1px solid var(--line)}
  .trust-panel--2 .trust-card:last-child{border-bottom:0}
}
.trust-card{padding:30px 26px;text-align:center;border-right:1px solid var(--line);transition:background .2s ease}
.trust-card:hover{background:var(--surface-2)}
.trust-card svg{transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.trust-card:hover svg{transform:scale(1.12) rotate(-4deg)}
.trust-card:last-child{border-right:0}
@media (max-width:719px){
  .trust-card{border-right:0;border-bottom:1px solid var(--line)}
  .trust-card:last-child{border-bottom:0}
}
.trust-card svg{
  width:42px;height:42px;margin:0 auto 14px;color:var(--brand);stroke-width:1.7;
}
.trust-card h3{font-size:1.08rem;margin-bottom:.45rem;color:var(--ink)}
.trust-card p{font-size:.9rem;color:var(--ink-2);margin:0}

/* --- trust: IATA badge -------------------------------------------------- */
/* Reads as a credential, not a tag. Gold rather than brand blue, because the
   blue pills elsewhere on the page are navigation and this is not one of
   them, and because gold is already the logo's second colour. */
.badge{
  display:inline-flex;align-items:center;gap:.7rem;position:relative;
  padding:.6rem 1.05rem .6rem .8rem;border-radius:12px;
  background:linear-gradient(135deg,#fffaf0,#fdf4dc);
  border:1.5px solid #e3c988;
  box-shadow:0 1px 2px rgba(90,66,10,.08),0 10px 24px -16px rgba(140,100,10,.55);
  color:#7a5606;
}
.badge::before{
  content:"";position:absolute;inset:-1.5px;border-radius:12px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.9),transparent 45%);
  opacity:.6;
}
.badge svg{
  width:26px;height:26px;flex:none;color:#b8860d;stroke-width:1.7;
  filter:drop-shadow(0 1px 1px rgba(120,86,6,.25));
}
.badge__txt{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.badge__txt b{
  font-size:.87rem;font-weight:750;letter-spacing:-.01em;color:#6b4a05;
  white-space:nowrap;
}
.badge__num{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  color:#9a7415;margin-top:1px;
}
/* no accreditation number set: say what it means instead of showing a gap */
.badge__txt b:only-child::after{
  content:"Accredited travel agent";display:block;
  font-family:var(--sans);font-size:.68rem;font-weight:500;letter-spacing:.04em;
  color:#9a7415;margin-top:2px;
}
.badge--sm{padding:.42rem .8rem .42rem .6rem;gap:.5rem;border-radius:10px}
.badge--sm svg{width:20px;height:20px}
.badge--sm .badge__txt b{font-size:.76rem}
.badge--sm .badge__txt b:only-child::after{font-size:.63rem}
:root[data-theme="dark"] .badge{
  background:linear-gradient(135deg,#2c2411,#231c0d);border-color:#4d3d17;color:#e0c179;
}
:root[data-theme="dark"] .badge__txt b{color:#f0dca8}
:root[data-theme="dark"] .badge svg{color:#e3b04b}
:root[data-theme="dark"] .badge__num,
:root[data-theme="dark"] .badge__txt b:only-child::after{color:#bfa068}

/* --- trust: airline wordmark strip -------------------------------------- */
.marks{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin-top:2rem;
}
.marks .mark{
  display:inline-flex;align-items:center;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:.55rem 1rem;
  font-size:.86rem;font-weight:650;color:var(--ink-2);letter-spacing:-.01em;
  box-shadow:var(--shadow-sm);white-space:nowrap;
}
.marks .mark:hover{border-color:var(--brand);color:var(--brand)}

/* --- logo marquee ------------------------------------------------------- */
.mq{
  position:relative;overflow:hidden;padding:7px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.mq+.mq{margin-top:12px}
.mq__track{
  display:flex;gap:13px;width:max-content;
  animation:mq-ltr 58s linear infinite;
}
/* will-change:transform used to sit here. An element that is already running
   a transform animation is composited anyway, so the hint bought nothing and
   pinned three layers in GPU memory for the life of the page. */
/* Paused unless the strip is actually on screen. Three infinite animations
   that never stop are the difference between a page that idles and one that
   keeps the compositor busy while you read something else entirely. */
.mq:not(.is-live) .mq__track{animation-play-state:paused}
.mq--b .mq__track{animation-duration:74s}
.mq--c .mq__track{animation-duration:64s}
/* content travels left -> right; the track is duplicated so -50% wraps seamlessly */
@keyframes mq-ltr{
  from{transform:translate3d(-50%,0,0)}
  to{transform:translate3d(0,0,0)}
}
.mq:hover .mq__track,.mq:focus-within .mq__track{animation-play-state:paused}
.mq__item{
  flex:none;display:flex;align-items:center;justify-content:center;gap:.55rem;
  height:62px;min-width:146px;padding:0 20px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;
  box-shadow:0 1px 2px rgba(16,32,26,.06),0 4px 12px -6px rgba(16,32,26,.14);
}
.mq__item--logo{gap:.6rem;padding-left:14px}
.mq__item img{
  width:30px;height:30px;flex:none;object-fit:contain;
  transition:filter .2s ease,transform .2s ease;
}
/* The resting state used to carry filter:saturate(.92). A filter on 84 images
   that are permanently in motion is re-evaluated every frame; the hover state
   below still gets one, but only on the image under the cursor. */
.mq__item:hover img{filter:saturate(1.1);transform:scale(1.06)}
.mq__item b{
  font-size:.9rem;font-weight:700;letter-spacing:-.015em;color:var(--ink-2);
  white-space:nowrap;text-align:center;
}
@media (prefers-reduced-motion:reduce){
  .mq{mask-image:none;-webkit-mask-image:none;overflow-x:auto}
  .mq__track{animation:none;transform:none}
}
@media (max-width:600px){
  .mq__item{height:54px;min-width:124px;padding:0 15px}
  .mq__item img{max-height:28px;max-width:98px}
  .mq__item b{font-size:.82rem}
}

/* --- steps -------------------------------------------------------------- */
.steps{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.step h3{font-size:1.06rem}
.step p{font-size:.94rem;color:var(--ink-2);margin:0}

/* --- visa: how to apply steps ------------------------------------------- */
.vsteps{list-style:none;padding:0;margin:2rem 0 0;counter-reset:vs}
.vstep{
  display:flex;gap:18px;padding:0 0 26px 0;position:relative;margin:0;
}
.vstep:not(:last-child)::before{
  content:"";position:absolute;left:17px;top:40px;bottom:4px;width:2px;
  background:linear-gradient(var(--line-strong),color-mix(in srgb,var(--line-strong) 20%,transparent));
}
.vstep__n{
  flex:none;width:36px;height:36px;border-radius:50%;background:var(--brand-soft);
  color:var(--brand);display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:.95rem;z-index:1;
  border:2px solid var(--surface);box-shadow:0 0 0 2px var(--brand-soft);
}
.vstep h3{font-size:1.09rem;margin:.35rem 0 .3rem}
.vstep p{margin:0;color:var(--ink-2);font-size:.97rem}

/* --- visa: fees table --------------------------------------------------- */
table.fees{min-width:420px}
/* Any <small> inside a table cell is a sub-label under the bold line above
   it, not a continuation of that sentence. It was rendering inline and
   colliding: "Before the booking is createdUsually within 30 minutes". */
.tbl-wrap td small, table.fees td small{
  display:block;font-size:.8rem;color:var(--ink-3);margin-top:3px;font-weight:400;line-height:1.4;
}
/* The stub note must be allowed to wrap. Forcing white-space:nowrap here to
   tidy "PER APPLICATION" gave the stub an unbreakable minimum width, which
   widened every ticket, widened the grid, and pushed the pricing page 27px
   past the viewport. A slightly awkward line break is cheaper than a page
   that scrolls sideways. */
.ticket__price small{
  display:block;margin-top:2px;line-height:1.25;
}
/* Grid and flex children default to min-width:auto, so a long unbreakable
   word in a ticket could still push the column out. */
.ticket, .ticket__main, .ticket__stub, .ticket-slot{min-width:0}
td.vfee{
  font-family:var(--display);font-weight:800;font-size:1.05rem;white-space:nowrap;
  color:var(--ink);text-align:right;font-feature-settings:'tnum' 1;
}
.fee-note{
  font-size:.87rem;color:var(--ink-3);margin-top:1rem;padding-left:14px;
  border-left:3px solid var(--accent);
}

/* --- travel doodles ----------------------------------------------------- */
.doods{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(20px,4vw,46px);margin:1.8rem 0 .4rem;color:var(--brand);
  opacity:.3;pointer-events:none;
}
.doods svg{width:46px;height:46px;display:block}
.dood{display:block}
/* a little rotation so the row reads as sketched, not stamped */
.dood--0{transform:rotate(-7deg)}
.dood--1{transform:rotate(5deg) translateY(-4px)}
.dood--2{transform:rotate(-3deg) translateY(3px)}
.dood--3{transform:rotate(8deg)}
.dood--4{transform:rotate(-5deg) translateY(-3px)}
.dood--5{transform:rotate(4deg) translateY(2px)}
@media (max-width:640px){
  .doods{gap:18px}
  .doods svg{width:34px;height:34px}
  .dood--4,.dood--5{display:none}
}

/* --- visa status badge -------------------------------------------------- */
.vstat{
  display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;
  padding:.32rem .7rem;font-size:.76rem;font-weight:700;letter-spacing:.02em;
  border:1.5px solid;white-space:nowrap;
}
.vstat svg{width:14px;height:14px;flex:none}
.vstat--vf {color:#0f7a4a;background:#e7f6ee;border-color:#a9dcc3}
.vstat--voa{color:#0b6ea8;background:#e6f3fb;border-color:#a7d3ec}
.vstat--ev {color:#8a5a06;background:#fdf3de;border-color:#e8cf98}
.vstat--vr {color:#7a2e2e;background:#fbeceb;border-color:#e8bdb9}
.vstat--lg{
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:.1rem;
  border-radius:12px;padding:.55rem .95rem;font-size:.86rem;margin-bottom:1rem;
}
.vstat--lg svg{display:none}
.vstat--lg small{font-weight:500;font-size:.75rem;opacity:.85;letter-spacing:0}

/* --- visa index cards --------------------------------------------------- */
/* Photo band on a visa card. Bleeds to the card edge by cancelling the 26px
   padding, and rounds only its top corners so it sits inside the card's own
   radius. Lazy, because the visa index is a long grid and only the first row
   is ever on screen. */
.vcard{display:flex;flex-direction:column;height:100%}
.vcard__img{
  display:block;width:calc(100% + 52px);height:104px;object-fit:cover;
  /* The global img rule sets max-width:100%, which clamped this back to the
     card's content box and left a 52px gap on the right. */
  max-width:none;
  margin:-26px -26px 16px;border-radius:var(--radius) var(--radius) 0 0;
}
/* Banner on a guide page. This one is above the fold and is deliberately NOT
   lazy: a lazy above-fold image is fetched later than an eager one, which is
   the opposite of what LCP needs. */
.vhero{
  display:block;width:100%;height:170px;object-fit:cover;
  border-radius:var(--radius);margin-bottom:1.6rem;
}
@media (max-width:640px){.vhero{height:120px;margin-bottom:1.2rem}}
.vcard__hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:.7rem}
.vcard__c{line-height:1.2}
.vcard__hd .vstat{margin-top:2px}
.vcard__c{font-family:var(--display);font-size:1.16rem;font-weight:750;letter-spacing:-.02em;color:var(--ink)}
.vcard p{font-size:.92rem;color:var(--ink-2);flex:1;margin-bottom:.7rem}
.vcard .more{font-size:.87rem;font-weight:650;color:var(--brand)}

/* --- travel tips -------------------------------------------------------- */
.tips__list{list-style:none;padding:0;margin:1.4rem 0 0;counter-reset:tip}
.tips__list li{
  position:relative;padding:0 0 0 44px;margin:0 0 1.1rem;color:var(--ink-2);
  font-size:.99rem;line-height:1.6;
}
.tips__list li::before{
  counter-increment:tip;content:counter(tip);
  position:absolute;left:0;top:-1px;width:30px;height:30px;border-radius:9px;
  background:var(--accent-soft);color:#8a5a06;border:1px solid #e8cf98;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:.85rem;
}

/* --- comparison table --------------------------------------------------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.94rem}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--surface-2);font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:650;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td b{font-weight:650}
.yes,.no{display:inline-flex;align-items:center;gap:.4rem;font-weight:650}
.yes::before,.no::before{
  content:"";width:17px;height:17px;flex:none;border-radius:50%;
  background-position:center;background-repeat:no-repeat;background-size:11px;
}
.yes{color:#0f7a4a}
.yes::before{background-color:#e7f6ee;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a4a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.no{color:#a33228}
.no::before{background-color:#fbeceb;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a33228' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")}

/* the column that is ours: tinted, bordered, and labelled */
table th.col-ours,table td.col-ours{
  background:color-mix(in srgb,var(--brand-soft) 60%,transparent);
  border-left:2px solid var(--brand);border-right:2px solid var(--brand);
}
thead th.col-ours{border-top:2px solid var(--brand);border-radius:10px 10px 0 0;color:var(--brand)}
tbody tr:last-child td.col-ours{border-bottom:2px solid var(--brand);border-radius:0 0 10px 10px}
th.col-ours small{display:block;font-size:.68rem;font-weight:700;letter-spacing:.1em;color:var(--brand);opacity:.75;margin-top:2px}
tbody tr:hover td{background:color-mix(in srgb,var(--surface-2) 70%,transparent)}
tbody tr:hover td.col-ours{background:color-mix(in srgb,var(--brand-soft) 80%,transparent)}

/* --- FAQ / details ------------------------------------------------------ */
.faq{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden;box-shadow:var(--shadow-sm)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{
  cursor:pointer;padding:17px 52px 17px 20px;font-weight:650;position:relative;list-style:none;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:20px;top:50%;width:11px;height:11px;margin-top:-6px;
  border-right:2.2px solid var(--ink-3);border-bottom:2.2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq summary:hover{background:var(--surface-2)}
.faq .faq__a{padding:0 20px 18px;color:var(--ink-2);font-size:.96rem;animation:faq-in .24s ease-out}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq .faq__a> :last-child{margin-bottom:0}

/* --- callouts ----------------------------------------------------------- */
.note{
  border-left:4px solid var(--brand);background:var(--brand-soft);color:var(--ink);
  padding:16px 20px;border-radius:0 var(--radius) var(--radius) 0;margin:1.6rem 0;font-size:.96rem;
}
.note--warn{border-left-color:var(--accent);background:var(--accent-soft)}
.note--ok{border-left-color:var(--ok);background:var(--ok-soft)}
.note strong{display:block;margin-bottom:.25rem}
.note> :last-child{margin-bottom:0}

/* --- pill links --------------------------------------------------------- */
.pills{display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:0;list-style:none}
.pills a{
  display:inline-flex;align-items:center;gap:.4rem;background:var(--surface);border:1px solid var(--line);
  padding:.5rem .9rem;border-radius:999px;font-size:.89rem;color:var(--ink-2);font-weight:550;box-shadow:var(--shadow-sm);
}
.pills a{transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease}
.pills a:hover{border-color:var(--brand);color:var(--brand);text-decoration:none;background:var(--brand-soft);transform:translateY(-2px)}

/* --- CTA band ----------------------------------------------------------- */
.cta{
  background:linear-gradient(135deg,#0f2861,#193b92 55%,#14316f);
  color:#fff;border-radius:var(--radius-lg);padding:clamp(2rem,5vw,3.2rem);text-align:center;box-shadow:var(--shadow-lg);
}
.cta h2{color:#fff;margin-bottom:.4rem}
.cta p{color:rgba(255,255,255,.92);max-width:56ch;margin-inline:auto}
.cta .btn--ghost{background:#fff;color:#0f2861;border-color:transparent}
.cta .btn--ghost:hover{background:#eaf6f0;color:#0f2861}

/* --- forms -------------------------------------------------------------- */
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,3vw,30px);box-shadow:var(--shadow-md)}
.field{margin-bottom:16px}
.field label{display:block;font-size:.83rem;font-weight:650;margin-bottom:6px;color:var(--ink)}
.field .hint{font-size:.79rem;color:var(--ink-3);font-weight:450;margin-top:5px;display:block}
input,select,textarea{
  width:100%;font:inherit;font-size:.96rem;padding:.78rem .9rem;border-radius:11px;
  border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:.75}
input:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
/* the whole box opens the picker, so it should look like it does */
input[type="date"],input[type="month"],input[type="time"],select{cursor:pointer}
input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.55}
input[type="date"]:hover::-webkit-calendar-picker-indicator{opacity:1}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
input[aria-invalid="true"]{border-color:var(--danger)}
input[aria-invalid="true"]:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 18%,transparent)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.row3{display:grid;grid-template-columns:104px 1fr 1fr;gap:16px}
/* Title plus three name parts. Flex rather than grid: a four-column grid
   squeezed the names to about 90px between 560 and 780px, and the two-column
   mobile fallback dropped Middle name into the 104px title slot, because grid
   auto-placement does not care what a cell is for. Here the title takes what a
   four-character select needs and the three names share the rest, wrapping
   together once they fall under 140px each. */
/* Two-up by default, four-up only when the card is genuinely wide enough.
   Flex wrapping alone produced 3+1 across a band of widths, which left Last
   name alone on a row stretching the full width. The query is on the card, not
   the viewport, because this form sits beside a sidebar on desktop: the
   viewport width says nothing useful about how much room the fields have. */
.pax{container-type:inline-size}
.row4{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.row4>.field{min-width:0;margin-bottom:0}
.row4>.field:first-child select{max-width:120px}
@container (min-width:520px){
  .row4{grid-template-columns:94px 1fr 1fr 1fr}
  .row4>.field:first-child select{max-width:none}
}
@media (max-width:560px){
  .row2{grid-template-columns:1fr}
  /* Title stays beside Surname; a six-character select does not earn a
     full-width row of its own on a phone. */
  .row3{grid-template-columns:104px 1fr}
  .row3>:last-child{grid-column:1/-1}
}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:0 0 20px}
legend{font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:650;padding:0 8px}
.opt{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line-strong);border-radius:11px;padding:14px;margin-bottom:10px;cursor:pointer;background:var(--surface-2)}
.opt:hover{border-color:var(--brand)}
.opt input{width:auto;flex:none;margin-top:4px}
.opt b{display:block}
.opt small{color:var(--ink-3)}

/* --- article ------------------------------------------------------------ */
.article{max-width:760px;margin-inline:auto}
.article h2{margin-top:2.4rem;padding-top:.2rem}
.article h3{margin-top:1.8rem}
.article ul,.article ol{margin-bottom:1.2em}
.meta{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--ink-3);font-size:.86rem;margin-bottom:1.6rem}
.crumbs{font-size:.83rem;color:var(--ink-3);margin-bottom:1.2rem;display:flex;flex-wrap:wrap;gap:.15rem .4rem;align-items:center;line-height:1.9}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--brand)}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;margin:0 0 2rem}
.toc b{display:block;font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.6rem}
.toc ol{margin:0;padding-left:1.2em;font-size:.93rem}
.toc li{margin:.28em 0}
.post-card{display:flex;flex-direction:column;height:100%}
.post-card .tagline{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--brand);margin-bottom:.6rem}
.post-card h3{font-size:1.1rem}
.post-card p{font-size:.93rem;color:var(--ink-2);flex:1}
.post-card .more{font-size:.88rem;font-weight:650;margin-top:.6rem}

/* --- repeatable travellers ---------------------------------------------- */
.pax{
  border:1px solid var(--line);border-radius:13px;padding:18px;margin-bottom:12px;
  background:var(--surface-2);
}
.pax[data-lead]{background:var(--surface);border-color:var(--line-strong)}
.pax:not([data-lead]){animation:pax-in .22s cubic-bezier(.22,.61,.36,1)}
@keyframes pax-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.pax__hd{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:14px;padding-bottom:10px;border-bottom:1px dashed var(--line-strong);
}
.pax__n{
  font-family:var(--display);font-size:.82rem;font-weight:750;letter-spacing:.04em;
  text-transform:uppercase;color:var(--brand);
}
.pax__tag{font-size:.75rem;color:var(--ink-3)}
.pax__rm{
  font:inherit;font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:none;border:0;color:var(--ink-3);cursor:pointer;padding:.25rem .45rem;border-radius:6px;
}
.pax__rm:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent)}
.pax .field:last-child{margin-bottom:0}
.pax__add{
  display:block;width:100%;font:inherit;font-size:.88rem;font-weight:650;
  padding:.75rem;cursor:pointer;color:var(--brand);
  background:var(--brand-soft);border:1px dashed color-mix(in srgb,var(--brand) 45%,transparent);
  border-radius:11px;transition:background .14s ease;
}
.pax__add:hover{background:color-mix(in srgb,var(--brand) 14%,transparent)}

/* --- UPI payment panel -------------------------------------------------- */
.upi{display:flex;gap:22px;align-items:flex-start;margin:1.1rem 0 0;flex-wrap:wrap}
.upi__qr{
  flex:none;width:168px;height:168px;padding:8px;background:#fff;
  border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow-sm);
}
.upi__qr svg{width:100%;height:100%;display:block}
.upi__side{flex:1;min-width:220px}
.upi__scan{font-size:.92rem;color:var(--ink-2);margin:0 0 .8rem}
.upi__kv{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;margin:0 0 .7rem;font-size:.93rem}
.upi__kv dt{color:var(--ink-3);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;font-weight:650;align-self:center}
.upi__kv dd{margin:0;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.upi__kv code{font-family:var(--mono);font-size:.9rem;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:.15rem .4rem}
.upi__copy{
  font:inherit;font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:var(--brand-soft);color:var(--brand);border:0;border-radius:6px;
  padding:.24rem .5rem;cursor:pointer;
}
.upi__copy:hover{background:color-mix(in srgb,var(--brand) 18%,transparent)}
.upi__note{font-size:.83rem;color:var(--ink-3);margin:0}
.upi__confirm{margin-top:1.4rem;padding-top:1.2rem;border-top:1px dashed var(--line-strong)}
.upi__confirm label{display:block;font-weight:650;font-size:.93rem;margin-bottom:.5rem}
.upi__row{display:flex;gap:10px}
.upi__row input{flex:1}
.upi__row .btn{flex:none}
.upi__confirm .field-err{display:none;margin-top:.5rem}
@media (max-width:520px){
  .upi{gap:16px}
  .upi__qr{width:150px;height:150px;margin-inline:auto}
  .upi__row{flex-direction:column}
}

/* --- article typography ------------------------------------------------- */
.article{max-width:70ch;font-size:1.075rem;line-height:1.72}
.article > p:first-of-type,.article .lede{
  font-size:1.2rem;line-height:1.6;color:var(--ink-2);letter-spacing:-.012em;
}
.article h2{
  margin-top:2.9rem;padding-top:1.6rem;border-top:1px solid var(--line);
  font-size:clamp(1.42rem,1.2rem + .9vw,1.85rem);
}
.article h3{margin-top:2.1rem}
.article p{margin-bottom:1.25em}
.article li{margin:.55em 0;padding-left:.15em}
.article ul li::marker{color:var(--brand)}
.article ol li::marker{color:var(--brand);font-weight:700}
.article strong{font-weight:680;color:var(--ink)}
.article a:not(.btn){
  color:var(--brand);text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:.18em;text-decoration-color:color-mix(in srgb,var(--brand) 35%,transparent);
  transition:text-decoration-color .16s ease;
}
.article a:not(.btn):hover{text-decoration-color:var(--brand)}
.article code{
  font-family:var(--mono);font-size:.86em;background:var(--surface-2);
  border:1px solid var(--line);border-radius:6px;padding:.12em .38em;
}
.article hr{margin:3rem 0}
.article .tbl-wrap,.article .note,.article .toc{margin-block:2rem}

.toc{
  background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:0 var(--radius) var(--radius) 0;padding:20px 24px;
}
.toc ol{font-size:.95rem}
.toc a{color:var(--ink-2);text-decoration:none}
.toc a:hover{color:var(--brand);text-decoration:underline}

.meta{
  padding-bottom:1.4rem;border-bottom:1px solid var(--line);
  font-size:.85rem;letter-spacing:.01em;
}
.meta span{display:inline-flex;align-items:center;gap:.35rem}
.meta span+span::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--line-strong)}

/* --- order page: sticky summary ---------------------------------------- */
.order-aside{position:sticky;top:88px}
@media (max-width:920px){.order-aside{position:static}}
.field-err{
  display:none;font-size:.79rem;color:var(--danger);font-weight:600;margin-top:5px;
}
.field.is-bad .field-err{display:block}
.field.is-bad input,.field.is-bad textarea{border-color:var(--danger)}

/* --- footer ------------------------------------------------------------- */
.ftr{background:var(--bg-alt);border-top:1px solid var(--line);padding:64px 0 30px}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
@media (max-width:860px){.ftr__grid{grid-template-columns:1fr 1fr;gap:28px}}
@media (max-width:480px){.ftr__grid{grid-template-columns:1fr}}
.ftr__h{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 1rem;line-height:1.3}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin:.42em 0}
.ftr__sep{
  font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);opacity:.75;margin:.9em 0 .35em;
}
.ftr__grid > div:first-child + div + div li:first-child{margin-top:0}
.ftr a{color:var(--ink-2);font-size:.92rem}
.ftr a:hover{color:var(--brand)}
.ftr__bottom{
  border-top:1px solid var(--line);margin-top:38px;padding-top:22px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;color:var(--ink-3);font-size:.84rem;
}
.ftr__note{color:var(--ink-3);font-size:.86rem;max-width:44ch;margin-top:.9rem}
.theme-btn{
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);border-radius:9px;
  width:40px;height:40px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none;
}
.theme-btn:hover{color:var(--brand);border-color:var(--brand)}
.theme-btn svg{width:18px;height:18px}

/* --- misc --------------------------------------------------------------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Priceless ticket stub: services quoted per request rather than listed. */
.ticket__quote{font-size:1.35rem;letter-spacing:-.01em}

/* ==========================================================================
   UX pass. Targeted fixes, not a redesign: the visual language above is
   settled and none of this changes how the site looks on a desktop at rest.
   ========================================================================== */

/* Anchor links landed underneath the sticky header. Every blog post has a
   table of contents, so this was mis-scrolling on the most-read pages. */
:target,
h2[id], h3[id] { scroll-margin-top: 5.5rem; }

/* Long pages are mostly below the fold. Letting the browser skip layout and
   paint for offscreen sections is the single biggest rendering win available
   on a 31-guide site, and it costs nothing visually.
   contain-intrinsic-size is a height ESTIMATE that reserves space so the
   scrollbar does not jump; it does not need to be exact. */
/* content-visibility removed. contain-intrinsic-size is a GUESS at how tall
   an unrendered section is, and every section that is not 600px tall left a
   white gap that only closed once you scrolled into it. On a phone, where the
   real heights vary from 200px to 2000px, that was constant. The rendering
   saving was never worth a page that visibly reflows as you scroll it. */

/* iOS zooms the page when a focused input is under 16px. That zoom does not
   reverse on blur, so a traveller filling the order form on an iPhone ends up
   stranded at 1.3x with the layout cut off. */
@media (max-width: 767px) {
  input, select, textarea { font-size: 16px; }
}

/* Touch targets. WCAG asks for 44px; nav and footer links were smaller. */
@media (pointer: coarse) {
  /* Breadcrumbs are excluded on purpose. Forcing them to 44px made each
     link twice the height of the "/" between them, so the trail sat on two
     different baselines and looked broken. They are a secondary aid, not a
     primary tap target. */
  .nav a, .ftr a, .pills a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* The grey flash Android paints over a tapped link looks like a rendering
   fault next to our own :active states, which already give feedback. */
a, button, summary, label, .ticket, .card { -webkit-tap-highlight-color: transparent; }

/* Stop iOS inflating text in landscape, which breaks the ticket layouts. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Scrolling the open mobile nav should not drag the page behind it. */
.nav.open { overscroll-behavior: contain; }

/* The scroll-hint gradient that used to live here was removed. It was
   absolutely positioned inside .tbl-wrap, which is the scrolling container,
   so it anchored to the content box rather than the visible edge and drifted
   into the middle of the table as you scrolled: a white band straight through
   the middle of a word. The comparison table stacks on phones now, so there
   is nothing left to hint at. */
.tbl-wrap { scrollbar-width: thin; }


/* A disabled submit button should say so to the cursor as well as the eye. */
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .62; }

/* Printing a visa guide or an order confirmation is a real thing people do at
   an embassy. Drop the furniture that wastes ink and page space. */
@media print {
  .hdr, .ftr, .scta, .totop, .mq, .doodle, .theme-btn { display: none !important; }
  a[href^="/"]::after { content: " (visaflightticket.com" attr(href) ")"; font-size: .8em; }
  .ticket, .card, .pass { break-inside: avoid; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   "By travellers, for travellers". Quieter than the sales sections around it
   on purpose: the copy is doing the work, so the styling stays out of its way.
   -------------------------------------------------------------------------- */
.creed { max-width: 46rem; margin-inline: auto; }
.creed h2 { margin-bottom: 1.1rem; }
/* Full-strength ink, not the secondary tone. This section is prose to be
   read start to finish, and mixing --ink for the opening paragraph with
   --ink-2 for the rest made everything after the first sentence look
   faded, as though it mattered less. */
.creed p { color: var(--ink); line-height: 1.75; margin: 0 0 1.05rem; }
.creed__lead { font-size: 1.12rem; }

.creed__list {
  list-style: none; padding: 0;
  margin: 1.6rem 0; display: grid; gap: .55rem;
}
.creed__list li {
  position: relative; padding-left: 1.6rem;
  color: var(--ink); font-size: .99rem;
}
/* An em dash would be the obvious mark here. The site does not use them, so
   a rule keeps the list feeling like a set of quiet asides instead. */
.creed__list li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: .85rem; height: 2px; border-radius: 2px;
  background: var(--brand); opacity: .5;
}

.creed__sign {
  margin-top: 1.8rem !important; padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.creed__sign b { font-weight: 700; }

@media (max-width: 640px) {
  .creed__lead { font-size: 1.05rem; }
}

/* Footer email line. Plain text you can select and copy, because a mailto
   link is a dead end for anyone without a mail client registered. */
.ftr__mail{margin:.9rem 0 0;font-size:.88rem;color:var(--ink-3)}
.ftr__mail a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}

/* Hero typing effect.
   Characters are laid out from the first frame and only made visible in
   turn, so the block never reflows. visibility, not display or opacity:
   display would collapse the layout we are trying to preserve, and opacity
   would still be painted by some screen readers as visible text. */
.tc{visibility:hidden}
.tc--on{visibility:visible}

/* Caret drawn off the current character. Absolutely positioned so it takes
   no space and therefore cannot nudge the text along as it moves. */
.tc--cur{position:relative}
.tc--cur::after{
  content:"";position:absolute;left:100%;top:.1em;
  width:.055em;height:.82em;background:var(--brand);
  animation:type-blink 1s steps(1) infinite;
}
@keyframes type-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .tc{visibility:visible}
  .tc--cur::after{display:none}
}

/* ==========================================================================
   Mobile fixes
   ========================================================================== */
@media (max-width: 640px) {
  /* The fees table is two columns. min-width:420px forced it to overflow a
     375px phone and scroll sideways, so both edges were clipped and the
     first column was unreadable. It fits perfectly well without the floor. */
  table.fees { min-width: 0; }
  table.fees td, table.fees th { padding-left: .7rem; padding-right: .7rem; }
  table.fees td.vfee { white-space: nowrap; vertical-align: top; }

  /* Wider comparison tables genuinely do need to scroll, since the point of
     them is comparing columns side by side. Tighten them so less is lost. */
  .tbl-wrap table { font-size: .88rem; }
  .tbl-wrap th, .tbl-wrap td { padding-left: .65rem; padding-right: .65rem; }

  /* "WhatsApp us" was breaking across two lines inside its own button. */
  .ftr .btn { white-space: nowrap; }
  .ftr .btn-row { align-items: center; gap: .6rem; }
}



/* --------------------------------------------------------------------------
   Grid and flex children default to min-width:auto, which means they refuse
   to shrink below their own content and push out of the container instead.
   That is what made the order form 295px wide inside a 265px column on a
   320px phone, and it is the single most common cause of a page that scrolls
   sideways by a few pixels for no visible reason.
   -------------------------------------------------------------------------- */
.grid > *, .hero__grid > *, .order-grid > *, .ftr__grid > *,
.g2 > *, .g3 > *, .g4 > * { min-width: 0; }

/* Very narrow phones need the gutter back more than they need the padding. */
@media (max-width: 359px) {
  .wrap { padding-inline: 14px; }
}

/* --------------------------------------------------------------------------
   Vertical rhythm on phones.
   --sp-section is clamp(3.5rem, 7vw, 6rem). At 375px the 7vw term is only
   26px, so the 3.5rem floor wins and every section boundary spent 56px above
   plus 56px below: 112px of empty screen between one block of content and the
   next, on the device with the least screen to spare. The floor was chosen
   for a desktop and never revisited for a phone.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root {
    --sp-section: 2.3rem;   /* ~74px per boundary instead of 112px */
    --sp-block: 1.25rem;
  }
  h2 { line-height: 1.18; }
  section > .wrap > .center { margin-bottom: 1.4rem; }
  .grid { gap: 1rem; }
  .ticket-slot + .ticket-slot { margin-top: 1rem; }
}

/* The order submit button carries a label and a live price. On a phone the
   two do not fit one line, and the middot between them was being orphaned
   onto the second line with the price hanging off to the right. Laid out as
   flex so it wraps predictably, and stacked with the separator removed once
   there is genuinely no room. */
#order-submit{
  display:flex;align-items:center;justify-content:center;
  gap:.45rem;flex-wrap:wrap;line-height:1.3;
}
@media (max-width:430px){
  #order-submit{flex-direction:column;gap:.1rem}
  #order-submit .btn__sep{display:none}
  #order-submit #price-out{font-size:.94em;opacity:.92}
}

/* Dollar figure sits beside the rupee one, on the same line, so the two read
   as one price in two currencies rather than as a second thing being charged.
   Quieter weight and colour keep the rupee figure the primary one. */


/* Dollar figure next to a rupee one outside the ticket stubs. Same colour and
   weight as the rupee price, just smaller, so the two read as one price in two
   currencies rather than as two different numbers. */


/* The WhatsApp button's label plus its icon is wide, and it was wrapping to
   two and sometimes three lines inside its own pill. It reads as broken
   rather than as a button. */
.btn--wa { white-space: nowrap; }
/* The sticky bar's own button was breaking as "Get my / ticket" on a narrow
   screen. It sits in a fixed row, so it should shrink its padding rather than
   its line count. */
.scta .btn{white-space:nowrap}
@media (max-width:420px){
  .scta .btn--primary{padding-left:.9rem;padding-right:.9rem}
  .scta__price{font-size:1.15rem}
}

/* --------------------------------------------------------------------------
   The dollar figure beside a rupee price. ONE rule for every placement, so a
   button and a ticket stub cannot end up with different sizes, weights and
   opacities, which is exactly what happened when they had separate rules.
   Same colour and weight as the rupee price; only the size steps down.
   -------------------------------------------------------------------------- */
.ticket__usd, .usd-alt{
  /* Identical to the rupee price in every respect: same family, same size,
     same weight, same tracking, same colour. The two are one price written
     twice, and anything that makes the dollar look like a footnote makes it
     read as a different, lesser number. */
  margin-left:.28rem;
  font:inherit;
  font-size:inherit;
  font-weight:inherit;
  letter-spacing:inherit;
  color:inherit;
  white-space:nowrap;
}
.ticket__usd::before, .usd-alt::before{
  content:"/";
  margin-right:.22rem;
  opacity:.45;
  font-weight:inherit;
}

/* Currency toggle on the order form. */
.curswitch{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin:0 0 1.2rem;font-size:.86rem;
}
.curswitch__lbl{color:var(--ink-3);margin-right:2px}
.curswitch__b{
  border:1px solid var(--line-strong);background:var(--surface);
  color:var(--ink-2);font:inherit;font-weight:650;
  padding:.34rem .7rem;border-radius:999px;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.curswitch__b:hover{border-color:var(--brand);color:var(--brand)}
.curswitch__b.is-on{
  background:var(--brand);border-color:var(--brand);color:#fff;
}

/* --------------------------------------------------------------------------
   Consultation hero card. A file with its documents checked off, standing in
   for the boarding pass, which advertises the wrong product on this page.
   -------------------------------------------------------------------------- */
.fcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);overflow:hidden;
}
.fcard__top{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--brand);color:#fff;padding:.8rem 1.15rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
}
.fcard__list{list-style:none;margin:0;padding:.5rem .4rem}
.fcard__row{
  display:flex;align-items:center;gap:.7rem;
  padding:.62rem .8rem;border-radius:10px;
}
.fcard__row + .fcard__row{border-top:1px solid var(--line)}
.fcard__tick{
  flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--ok-soft);color:var(--ok);
  display:inline-flex;align-items:center;justify-content:center;
}
.fcard__tick svg{width:13px;height:13px}
.fcard__tick--muted{background:var(--surface-2);color:var(--ink-3)}
.fcard__lbl{flex:1;font-weight:650;font-size:.95rem;color:var(--ink)}
.fcard__st{font-size:.8rem;color:var(--ink-3);text-align:right;white-space:nowrap}
.fcard__foot{
  display:flex;align-items:center;gap:.5rem;
  border-top:1px dashed var(--line-strong);
  padding:.8rem 1.15rem;background:var(--surface-2);
  font-size:.85rem;color:var(--ink-2);
}
.fcard__foot svg{width:15px;height:15px;color:var(--ok);flex:none}
@media (max-width:520px){
  .fcard__st{display:none}
}

/* Every container holding a price is a flex box with its own gap, and each
   gap differed: 8px in a button and a ticket stub, 4.8px in the sticky bar,
   none at all in the hero chip. So the same markup rendered four different
   spacings. Zero the gap where a dollar figure sits, and let one margin
   define the spacing everywhere. */
.ticket__price, .scta__price{ column-gap:0; }
/* Zeroing the container gap also removed the space before the note that
   follows the price, so "$4.5" and "PER TRAVELLER" collided. Give those
   siblings their spacing back explicitly, rather than through a gap that
   also lands between the two halves of one price. */
.ticket__price small{ margin-left:.55rem; }
.scta__price em{ margin-right:.34rem; }
.btn:has(.usd-alt){ column-gap:0; }
/* Fallback for browsers without :has(), which would otherwise keep the gap. */
@supports not selector(:has(*)) {
  .btn .usd-alt{ margin-left:calc(.28rem - .5rem); }
}

/* The stub turns horizontal in a narrow card, and that layout was drawn for a
   phone-width card: one price, a short note, a barcode, all on one line. A
   four-up grid makes cards about 270px wide, where the rupee figure, the
   dollar figure, "PER APPLICATION" and the barcode want roughly 360px between
   them - so the note ran off the card and the barcode was squeezed to a
   sliver. Below 380px of card the note takes its own line under the price,
   which is the one part of the stub that reads perfectly well stacked, and
   the price and barcode step down to leave it room. */
@container (max-width:380px){
  .ticket__price{flex-wrap:wrap;min-width:0;font-size:1.5rem}
  .ticket__price small{flex:1 0 100%;margin-left:0;margin-top:4px;letter-spacing:.07em}
  .ticket__barcode{width:62px;height:30px;flex:none}
}
/* A four-up grid does not stop at 270px: auto-fit holds four columns down to
   its 210px floor, around a 950px viewport. At that size even the price alone
   wrapped between the rupee figure and the dollar figure, which reads as two
   prices rather than one. One more step down keeps them on the same line. */
@container (max-width:266px){
  .ticket__price{font-size:1.28rem}
  .ticket__price small{font-size:.64rem}
  .ticket__barcode{width:50px;height:26px}
}
/* At the very bottom of the range the barcode is the only thing still pushing
   the price onto two lines, and it is decoration - the price is the point. */
@container (max-width:242px){
  .ticket__barcode{display:none}
}

/* Country tiles. The reference design uses photography; this uses a
   slug-derived gradient, so a country is always the same colour, it costs no
   bytes, and it cannot break the no-external-hosts rule. To move to photos
   later, set a background-image on .ccard - the markup does not change. */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:16px}
.ccard{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:230px;padding:16px;border-radius:16px;overflow:hidden;
  color:#fff;text-decoration:none;
  background:linear-gradient(180deg,transparent 34%,rgba(0,0,0,.5) 100%),
             linear-gradient(155deg,hsl(var(--h) 46% 38%),hsl(var(--h2) 54% 16%));
  transition:transform .18s ease,box-shadow .18s ease;
}
.ccard:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.24)}
.ccard:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
/* The photo sits under the text as a real element, not a background-image:
   no browser lazy-loads a CSS background, and 38 of these fetched eagerly is
   1.8 MB. The gradient stays behind it, so a slow or missing photo degrades
   into something deliberate rather than a blank card. */
.ccard__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:inherit;z-index:0;
}
/* Scrim, or white text on a bright sky is unreadable. */
.ccard::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.12) 38%,rgba(0,0,0,.72) 100%);
}
.ccard__name,.ccard__strip{position:relative;z-index:2}
.ccard__name{
  font-size:1.04rem;font-weight:750;letter-spacing:.02em;text-transform:uppercase;
  line-height:1.16;margin-bottom:12px;color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.45);
}
.ccard__strip{display:flex;gap:16px;border-top:1px solid rgba(255,255,255,.3);padding-top:10px}
.ccard__strip>span{min-width:0}
.ccard__k{
  display:block;font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:650;color:rgba(255,255,255,.74);margin-bottom:3px;
}
.ccard__v{
  display:block;font-size:.79rem;font-weight:650;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media (prefers-reduced-motion:reduce){.ccard{transition:none}.ccard:hover{transform:none}}
@media (max-width:400px){
  .cgrid{grid-template-columns:1fr 1fr;gap:12px}
  .ccard{min-height:196px;padding:13px}
  .ccard__name{font-size:.92rem}
}

/* Accepted-payment strip under the order button. Wordmarks set in type rather
   than logo files: an approximated trademark looks worse than none, and both
   NPCI and PayPal publish merchant assets that can drop in later without the
   markup changing. Naming a payment method in text is nominative use and needs
   no licence. */
.paystrip{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px;margin-top:14px;
}
.paystrip__lbl{
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:650;color:var(--ink-3);
}
/* Official marks, trimmed of their padding so they optically match at the
   same height rather than one floating in whitespace. Height-constrained with
   width:auto so each keeps its own aspect. */
/* Each mark sits on its own light chip, the way payment badges normally do.
   The first attempt inverted the UPI logo in dark mode, which lifted the grey
   line art but also flipped the saffron and green chevron to blue - and the
   brightness lift on top left the whole thing washed out. A white chip keeps
   both marks on the background they were drawn for, in either theme, with no
   filter touching the brand colours. */
.paylogo{
  height:20px;width:auto;max-width:none;display:block;
  box-sizing:content-box;padding:6px 10px;background:#fff;
  border:1px solid rgba(0,0,0,.10);border-radius:7px;
}
.paystrip__note{
  flex-basis:100%;text-align:center;font-size:.78rem;color:var(--ink-3);margin-top:2px;
}

/* Fare on the specimen stub. Moved here off the guide-page eyebrow, where a
   price sat oddly next to the country name; on a ticket a fare is exactly
   what the stub carries. Sits between the PNR and the verify line, and the
   foot already wraps, so it stacks rather than crowds on a phone. */
.pass__fare{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.pass__fare span{
  font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);font-weight:650;
}
.pass__fare b{font-family:var(--display);font-size:1.12rem;font-weight:800;color:var(--ink)}
.pass__fare small{font-size:.68rem;color:var(--ink-3)}

/* Shorter creed for the consultation page: the home page version runs to a
   list and a signature, which is too much beside a pricing table. */
.creed--tight .creed__lead{font-size:1.06rem}
.creed--tight h2{margin-bottom:.7rem}

/* Consultation prompt on a visa guide. Reads as an aside rather than a second
   sales pitch, so it does not fight the pricing tickets in the next section. */
.note--cta{margin-top:1.8rem}
.note--cta a{font-weight:650;white-space:nowrap}

/* Illustrating photo inside an article. Full column width, and always lazy:
   it sits after the first section so it is never the LCP element. */
.post-img{
  display:block;width:100%;height:auto;max-width:100%;
  border-radius:var(--radius);margin:1.8rem 0;
}

/* .yes/.no are also applied straight to <td>, and inline-flex takes a cell
   out of the table layout entirely: the three verdict cells collapsed into
   one column and the remaining columns rendered empty. Spans keep the flex
   (31 of those); cells stay cells and get the badge as an inline-block. */
td.yes,td.no{display:table-cell}
td.yes::before,td.no::before{
  display:inline-block;vertical-align:-3px;margin-right:.4rem;
}