/* ============================================================
   Airport Pickup Guide — Aviation theme
   Sky blue + jet navy + sunset amber. Boarding-pass & departure-board motifs.
   ============================================================ */
:root{
  --sky-50:#f0f9ff; --sky-100:#e0f2fe; --sky-200:#bae6fd; --sky-300:#7dd3fc;
  --sky-400:#38bdf8; --sky-500:#0ea5e9; --sky-600:#0284c7; --sky-700:#0369a1;
  --jet:#0b2239; --jet-2:#13314f; --ink:#0b2239; --muted:#577089;
  --cloud:#f5fbff; --bg:#f3f9ff; --surface:#ffffff;
  --sunset:#f97316; --sunset-2:#fb923c; --amber:#f59e0b;
  --success:#0ea15a; --danger:#e11d48;
  --border:#dceaf6; --border-2:#e8f1fa;
  --soft:0 8px 26px -10px rgba(2,132,199,.28);
  --soft-lg:0 18px 40px -14px rgba(2,132,199,.34);
  --btn:0 8px 20px -6px rgba(2,132,199,.5);
  --sun:0 10px 30px -8px rgba(249,115,22,.45);
  --r:18px;
  --mono:'Space Mono',ui-monospace,monospace;
  --sans:'Plus Jakarta Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--sky-600);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.grad{background:linear-gradient(100deg,var(--sky-500),var(--sky-700));-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-sun{background:linear-gradient(100deg,var(--sunset),var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.mono{font-family:var(--mono)}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(243,249,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.nav .logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;font-size:1.05rem;color:var(--jet)}
.nav .logo:hover{text-decoration:none}
.logo-badge{height:34px;width:34px;border-radius:10px;background:linear-gradient(135deg,var(--sky-400),var(--sky-700));display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--btn)}
.nav .links{display:flex;gap:6px;align-items:center}
.nav .links a{color:#3d5973;font-weight:600;font-size:.9rem;padding:8px 12px;border-radius:9px}
.nav .links a:hover{background:#e3f1fd;text-decoration:none}
.nav .links a.active{color:var(--sky-700);background:#dceffd}
.nav-tools{display:flex;align-items:center;gap:8px}
.burger{display:none;background:none;border:1px solid var(--border);border-radius:9px;padding:7px;cursor:pointer;color:var(--jet)}
@media(max-width:900px){
  .nav .links{position:fixed;top:64px;left:0;right:0;flex-direction:column;background:#fff;border-bottom:1px solid var(--border);padding:10px 22px;gap:2px;display:none;box-shadow:var(--soft)}
  .nav .links.open{display:flex}
  .nav .links a{padding:11px 12px}
  .burger{display:inline-flex}
  .hide-sm{display:none}
}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border:none;border-radius:999px;font-family:inherit;font-weight:700;font-size:.94rem;cursor:pointer;background:linear-gradient(100deg,var(--sky-500),var(--sky-700));color:#fff;box-shadow:var(--btn);transition:transform .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-2px);text-decoration:none}
.btn.sun{background:linear-gradient(100deg,var(--sunset),var(--amber));box-shadow:var(--sun)}
.btn.ghost{background:#fff;color:#2c4a64;border:1px solid var(--border);box-shadow:none}
.btn.ghost:hover{border-color:var(--sky-300);background:#f5fbff}
.btn.sm{padding:9px 16px;font-size:.84rem}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- CARDS ---------- */
.card{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r);box-shadow:var(--soft);transition:transform .2s ease,box-shadow .2s ease}
.card.lift:hover{transform:translateY(-4px);box-shadow:var(--soft-lg)}

/* ---------- SKY HERO ---------- */
.sky{position:relative;overflow:hidden;background:linear-gradient(180deg,#7dd3fc 0%,#9fdcfb 30%,#cdeafd 60%,#eaf6ff 86%,var(--bg) 100%)}
.sky .sun{position:absolute;top:-90px;right:8%;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,#fff7e6 0%,#ffe6b8 35%,rgba(255,214,140,.0) 70%);filter:blur(2px)}
.sky .cloud{position:absolute;opacity:.9;color:#fff}
.sky .c1{top:60px;left:-20px;width:200px}
.sky .c2{top:150px;right:6%;width:150px;opacity:.7}
.sky .c3{bottom:80px;left:12%;width:120px;opacity:.6}
.sky .plane{position:absolute;color:#fff;filter:drop-shadow(0 8px 14px rgba(3,55,90,.25))}
.sky .contrail{position:absolute;height:3px;border-radius:3px;background:repeating-linear-gradient(90deg,#fff 0 14px,transparent 14px 26px);opacity:.65}
.hero-inner{position:relative;z-index:2;padding:70px 0 90px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sky-700);background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);padding:6px 14px;border-radius:999px}
h1{font-size:clamp(2.1rem,5.2vw,3.7rem);line-height:1.05;font-weight:800;letter-spacing:-.025em;margin:18px 0 14px;color:var(--jet)}
.lede{font-size:clamp(1.02rem,2vw,1.25rem);color:#274863;max-width:660px}
@media(min-width:600px){.hero-inner{padding-bottom:120px}}

/* runway divider under hero */
.runway{height:14px;background:repeating-linear-gradient(90deg,var(--amber) 0 36px,transparent 36px 72px);opacity:.65;border-radius:3px;margin-top:-2px}

/* ---------- SECTIONS ---------- */
section{padding:62px 0}
.sec-head{margin-bottom:30px;max-width:720px}
.sec-head .eyebrow{color:var(--sky-700);background:#e3f1fd;border-color:#cfe8fb;margin-bottom:12px}
.sec-head h2{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:800;letter-spacing:-.02em;margin:0 0 10px;color:var(--jet)}
.sec-head p{color:var(--muted);margin:0;font-size:1.02rem}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* ---------- FORM ---------- */
.field label{display:block;font-size:.82rem;font-weight:700;color:#33506b;margin-bottom:6px}
input,select{width:100%;padding:13px 15px;border:1px solid var(--border);border-radius:11px;background:#fff;font-family:inherit;font-size:.96rem;color:var(--ink)}
input:focus,select:focus{outline:none;border-color:var(--sky-500);box-shadow:0 0 0 3px rgba(14,165,233,.2)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}

/* tool panel */
.tool{padding:28px;border-radius:24px}
.tool h2{margin:0 0 4px;font-size:1.4rem;font-weight:800;display:flex;align-items:center;gap:10px;color:var(--jet)}
.tool .hint{margin:0 0 18px;color:var(--muted);font-size:.93rem}

/* ---------- CHIPS ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:9px 15px;border:1px solid var(--border);border-radius:999px;background:#fff;font-size:.86rem;font-weight:600;color:#3d5973;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:7px}
.chip:hover{border-color:var(--sky-300)}
.chip.active{background:linear-gradient(100deg,var(--sky-500),var(--sky-700));color:#fff;border-color:transparent;box-shadow:var(--btn)}

/* ---------- RECOMMENDER RESULTS ---------- */
.rec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.rec-card{padding:20px;border-radius:16px;border:1px solid var(--border-2);background:#fff;box-shadow:var(--soft);position:relative;overflow:hidden}
.rec-card .tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:5px 11px;border-radius:999px;margin-bottom:12px}
.tag.cheap{background:#e7f9ef;color:#047a47}
.tag.fast{background:#e3f1fd;color:var(--sky-700)}
.tag.secure{background:#efeaff;color:#6d28d9}
.tag.free{background:#fff2dc;color:#b45309}
.rec-card h4{margin:0 0 4px;font-size:1.08rem;color:var(--jet)}
.rec-card .price{font-size:1.55rem;font-weight:800;letter-spacing:-.02em}
.rec-card .meta{font-size:.84rem;color:var(--muted);margin:7px 0}

/* ---------- BOARDING PASS (airport cards) ---------- */
.iata{font-family:var(--mono);font-size:.74rem;font-weight:700;letter-spacing:.1em;color:#fff;background:linear-gradient(135deg,var(--jet),var(--jet-2));padding:5px 10px;border-radius:8px}
.free-badge{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:999px}
.free-yes{background:#e7f9ef;color:#047a47}
.free-no{background:#fdecef;color:#be123c}

.boarding{position:relative;background:#fff;border:1px solid var(--border-2);border-radius:18px;box-shadow:var(--soft);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
.boarding.lift:hover{transform:translateY(-4px);box-shadow:var(--soft-lg)}
.boarding .bp-top{padding:18px 20px;background:linear-gradient(120deg,#0b2239,#15426b);color:#fff;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.boarding .bp-top h3{margin:6px 0 0;font-size:1.3rem;font-weight:800;color:#fff;letter-spacing:-.01em}
.boarding .bp-top .region{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:#9fd3f5;text-transform:uppercase}
.boarding .bp-strip{height:0;border-top:2px dashed var(--border);position:relative}
.boarding .bp-strip::before,.boarding .bp-strip::after{content:"";position:absolute;top:-11px;width:20px;height:20px;border-radius:50%;background:var(--bg)}
.boarding .bp-strip::before{left:-10px}
.boarding .bp-strip::after{right:-10px}
.boarding .bp-body{padding:18px 20px;flex:1}
.boarding .bp-foot{padding:16px 20px;border-top:1px solid var(--border-2);display:flex;flex-wrap:wrap;gap:8px}

/* option rows */
.opt{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px dashed var(--border)}
.opt:last-child{border-bottom:none}
.opt .ic{flex:0 0 38px;height:38px;width:38px;border-radius:11px;background:#e3f1fd;color:var(--sky-700);display:flex;align-items:center;justify-content:center}
.opt .l1{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.opt .name{font-weight:700;font-size:.93rem;color:var(--jet)}
.opt .price{font-weight:800;font-size:.95rem;white-space:nowrap;font-family:var(--mono)}
.opt .d{font-size:.81rem;color:var(--muted);margin-top:3px}
.pm{display:inline-block;font-size:.66rem;font-weight:700;font-family:var(--mono);color:#6d28d9;background:#efeaff;padding:2px 7px;border-radius:6px;margin-top:6px;letter-spacing:.04em}

.tipbox{margin-top:14px;background:#f1f8ff;border:1px solid #dcecfb;border-radius:13px;padding:12px 14px;font-size:.85rem;color:#284863}
.tipbox b{color:#047a47}
.tipbox.pay{background:#fff;border-color:var(--border-2)}
.tipbox.pay b,.tipbox.sec b{color:var(--jet)}

/* ---------- DIRECTORY GRID ---------- */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:22px}
@media(max-width:640px){.grid-cards{grid-template-columns:1fr}}
.filterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:24px}
.search{position:relative;flex:1;min-width:200px;max-width:320px}
.search input{padding-left:40px}
.search i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);width:18px}

/* ---------- STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{padding:22px;border-radius:16px;background:#fff;border:1px solid var(--border-2);box-shadow:var(--soft);text-align:center}
.stat .n{font-family:var(--mono);font-size:2rem;font-weight:700;color:var(--sky-600);letter-spacing:-.02em}
.stat .l{font-size:.84rem;color:var(--muted);margin-top:4px}

/* ---------- FEATURE TILES ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.tile{padding:26px;border-radius:18px;background:#fff;border:1px solid var(--border-2);box-shadow:var(--soft);display:flex;flex-direction:column}
.tile .ic{height:50px;width:50px;border-radius:14px;background:linear-gradient(135deg,var(--sky-400),var(--sky-700));color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:var(--btn)}
.tile h3{margin:0 0 6px;font-size:1.16rem;color:var(--jet)}
.tile p{margin:0 0 16px;color:var(--muted);font-size:.92rem;flex:1}

/* ---------- DEPARTURE BOARD TABLE ---------- */
.board{overflow-x:auto;border-radius:18px;border:1px solid var(--border-2);box-shadow:var(--soft);background:#fff}
table{border-collapse:collapse;width:100%;min-width:820px;font-size:.88rem}
thead th{background:linear-gradient(120deg,#0b2239,#15426b);color:#cfe8fb;font-family:var(--mono);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:14px 16px;position:sticky;top:0}
tbody td{padding:14px 16px;border-bottom:1px solid var(--border-2)}
tbody tr:hover{background:#f3f9ff}
td.free0{color:#047a47;font-weight:700;font-family:var(--mono)}
.money{font-family:var(--mono);font-weight:700}

/* ---------- AIRPORT DETAIL ---------- */
.ap-hero{position:relative;overflow:hidden}
.ap-hero .inner{position:relative;z-index:2;padding:46px 0 40px}
.bp-ticket{background:#fff;border-radius:18px;box-shadow:var(--soft-lg);overflow:hidden;display:flex;flex-wrap:wrap;border:1px solid var(--border-2)}
.bp-ticket .main{flex:1;min-width:260px;padding:26px 28px}
.bp-ticket .stub{width:200px;background:linear-gradient(160deg,#0b2239,#15426b);color:#fff;padding:26px 22px;position:relative;display:flex;flex-direction:column;justify-content:center;gap:6px}
.bp-ticket .stub::before{content:"";position:absolute;left:-9px;top:0;bottom:0;width:18px;background:radial-gradient(circle at left,transparent 9px,#fff 9px) repeat-y;background-size:18px 26px}
@media(max-width:640px){.bp-ticket .stub{width:100%}}
.kv{display:flex;flex-wrap:wrap;gap:22px;margin-top:18px}
.kv .k{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.kv .v{font-weight:700;color:var(--jet)}
.map{width:100%;height:340px;border:0;border-radius:18px;box-shadow:var(--soft)}
.detail-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:start}
@media(max-width:880px){.detail-grid{grid-template-columns:1fr}}
.opt-detail{padding:18px 20px;border-radius:15px;border:1px solid var(--border-2);box-shadow:var(--soft);background:#fff;margin-bottom:14px}
.opt-detail .l1{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.opt-detail h4{margin:0;font-size:1.05rem;color:var(--jet);display:flex;align-items:center;gap:9px}
.opt-detail .big{font-family:var(--mono);font-weight:700;font-size:1.1rem;color:var(--sky-700)}
.opt-detail .row{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0;font-size:.85rem;color:var(--muted)}
.opt-detail .row b{color:var(--jet)}

/* best-for table */
.bestfor{width:100%;min-width:0;border-collapse:collapse;font-size:.88rem}
.bestfor td{padding:11px 12px;border-bottom:1px solid var(--border-2)}
.bestfor td:first-child{font-weight:700;color:var(--jet)}

/* ---------- GUIDE / EDITORIAL ---------- */
.prose{max-width:780px}
.prose h2{font-size:1.6rem;color:var(--jet);margin:38px 0 12px;letter-spacing:-.01em}
.prose h3{font-size:1.18rem;color:var(--jet);margin:26px 0 8px}
.prose p{color:#2c455c;margin:0 0 14px}
.prose ul{color:#2c455c;padding-left:20px}
.prose li{margin:6px 0}
.callout{display:flex;gap:14px;padding:18px 20px;border-radius:15px;margin:18px 0;font-size:.92rem}
.callout .ic{flex:0 0 24px}
.callout.tip{background:#e7f9ef;border:1px solid #c6efd8;color:#1d6b45}
.callout.warn{background:#fff4e0;border:1px solid #ffe0ad;color:#9a5a00}
.callout.info{background:#e3f1fd;border:1px solid #cfe8fb;color:#235a86}
.glossary{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:10px}
.glossary .g{padding:16px;border-radius:13px;background:#fff;border:1px solid var(--border-2);box-shadow:var(--soft)}
.glossary .g b{font-family:var(--mono);color:var(--sky-700);font-size:.85rem}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{padding:24px;border-radius:16px;background:#fff;border:1px solid var(--border-2);box-shadow:var(--soft);position:relative}
.step .num{font-family:var(--mono);font-size:.8rem;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--sunset),var(--amber));height:34px;width:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;box-shadow:var(--sun)}
.step h4{margin:0 0 6px;color:var(--jet)}
.step p{margin:0;color:var(--muted);font-size:.9rem}

/* ---------- DISCLAIMER ---------- */
.disc{background:#fff4e0;border:1px solid #ffe0ad;border-radius:15px;padding:16px 18px;font-size:.87rem;color:#8a5200;display:flex;gap:12px;align-items:flex-start}

/* ---------- FOOTER ---------- */
footer.site{background:linear-gradient(160deg,#0b2239,#13314f);color:#a9c8e2;padding:50px 0 30px;margin-top:40px;position:relative;overflow:hidden}
footer.site .plane{position:absolute;right:-10px;top:24px;color:rgba(255,255,255,.06);width:240px}
footer.site h3{color:#fff;margin:0 0 10px}
footer.site a{color:#8fc4ee}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px;position:relative;z-index:2}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}}
.foot-links{display:flex;flex-direction:column;gap:7px;font-size:.9rem}

/* ---------- MODAL ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(11,34,57,.6);display:none;align-items:center;justify-content:center;z-index:60;padding:20px}
.modal-bg.open{display:flex}
.modal{background:#fff;border-radius:20px;max-width:470px;width:100%;padding:28px;box-shadow:var(--soft-lg)}
.modal h3{margin:0 0 6px;color:var(--jet)}
.modal p{color:var(--muted);font-size:.9rem;margin:0 0 14px}
.note{font-size:.78rem;color:var(--muted);margin-top:10px}

/* ---------- LIVE FLIGHT TRACKER (departure-board card) ---------- */
.ft-card{position:relative;overflow:hidden;background:linear-gradient(160deg,#0b2239,#15426b);color:#fff;border-radius:24px;padding:28px;box-shadow:var(--soft-lg);margin-top:22px}
.ft-card .bg-plane{position:absolute;right:-30px;bottom:-30px;color:rgba(255,255,255,.05);width:260px;pointer-events:none}
.demo-tag{position:absolute;top:16px;right:16px;font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.12em;color:#ffd591;background:rgba(124,74,0,.45);border:1px solid rgba(245,158,11,.4);padding:5px 9px;border-radius:7px}
.ft-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;position:relative;z-index:2}
.ft-flno{font-family:var(--mono);font-size:1.6rem;font-weight:700;letter-spacing:.05em;line-height:1}
.ft-air{color:#9fd3f5;font-size:.84rem;margin-top:5px}
.badge-st{font-family:var(--mono);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:8px 14px;border-radius:999px;display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.badge-st .pulse{height:8px;width:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.st-sched{background:#1e3a55;color:#bcd7ee}
.st-board{background:#7c4a00;color:#ffd591}
.st-air{background:#0b4f7a;color:#9fe0ff}
.st-land{background:#0f5132;color:#9be8bd}
.st-warn{background:#5b1620;color:#ffb3bf}

.ft-route{display:flex;align-items:flex-start;gap:16px;margin:30px 0 6px;position:relative;z-index:2}
.ft-end{text-align:center;min-width:70px}
.ft-end.r{text-align:center}
.ft-iata{font-family:var(--mono);font-size:1.7rem;font-weight:700;line-height:1}
.ft-city{font-size:.72rem;color:#9fd3f5;margin-top:5px;max-width:90px}
.ft-time{font-size:1rem;margin-top:6px;font-weight:700}
.ft-sub{font-size:.66rem;color:#7fb3d8;font-family:var(--mono);margin-top:2px}
.ft-track{flex:1;position:relative;height:32px;margin-top:14px}
.ft-track .line{position:absolute;top:50%;left:0;right:0;height:3px;transform:translateY(-50%);background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 8px,transparent 8px 16px);border-radius:3px}
.ft-track .fill{position:absolute;top:50%;left:0;height:3px;transform:translateY(-50%);background:linear-gradient(90deg,#38bdf8,#fb923c);border-radius:3px;transition:width 1s ease}
.ft-track .pl{position:absolute;top:50%;color:#fff;transform:translate(-50%,-50%);filter:drop-shadow(0 3px 6px rgba(0,0,0,.45));transition:left 1s ease}

.ft-steps{display:flex;justify-content:space-between;margin:24px 0 6px;position:relative;z-index:2}
.ft-steps::before{content:"";position:absolute;top:12px;left:8%;right:8%;height:2px;background:rgba(255,255,255,.16)}
.ft-step{display:flex;flex-direction:column;align-items:center;gap:9px;flex:1;position:relative;z-index:2}
.ft-step .dot{height:26px;width:26px;border-radius:50%;background:#1e3a55;border:2px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;color:#9fd3f5}
.ft-step.done .dot{background:linear-gradient(135deg,#38bdf8,#0284c7);border-color:transparent;color:#fff}
.ft-step.current .dot{background:linear-gradient(135deg,#fb923c,#f59e0b);border-color:#fff;color:#fff;box-shadow:0 0 0 5px rgba(251,146,60,.28)}
.ft-step .lbl{font-size:.62rem;color:#7fb3d8;text-align:center;font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em;line-height:1.2}
.ft-step.done .lbl,.ft-step.current .lbl{color:#fff}

.ft-eta{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);border-radius:15px;padding:16px 18px;margin-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;position:relative;z-index:2}
.ft-eta .lab{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;color:#9fd3f5}
.ft-eta .big{font-family:var(--mono);font-size:1.5rem;font-weight:700;line-height:1.1}
.ft-stats{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px;font-size:.78rem;color:#9fd3f5;position:relative;z-index:2}
.ft-stats b{color:#fff;font-family:var(--mono)}
.ft-cta{margin-top:18px;position:relative;z-index:2}
.btn.white{background:#fff;color:var(--jet);box-shadow:0 6px 16px -6px rgba(0,0,0,.4)}
.btn.white:hover{background:#eef6ff}
.ft-pickup{margin-top:16px;background:linear-gradient(110deg,rgba(56,189,248,.16),rgba(251,146,60,.14));border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;position:relative;z-index:2}
.ft-pickup .lhs{display:flex;align-items:center;gap:13px;min-width:0}
.ft-pickup .pin{height:42px;width:42px;border-radius:12px;background:linear-gradient(135deg,#38bdf8,#0284c7);display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 42px;box-shadow:0 6px 14px -4px rgba(2,132,199,.6)}
.ft-pickup .t1{font-size:.66rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.07em;color:#9fd3f5}
.ft-pickup .t2{font-weight:700;color:#fff;font-size:1.02rem;line-height:1.2}
@media(max-width:560px){
  .ft-pickup{justify-content:center;text-align:center}
  .ft-pickup .btn{width:100%}
  .ft-step .lbl{font-size:.55rem}
  .ft-city{font-size:.66rem}
}

/* reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .fly{animation:none!important}
}
/* plane flight animation */
@keyframes fly{0%{transform:translateX(-12vw) translateY(8px)}100%{transform:translateX(112vw) translateY(-22px)}}
.fly{animation:fly 26s linear infinite}

/* ---------- HERO STORY SCENE (plane lands → car collects) ---------- */
.hero-scene{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.55;pointer-events:none}
@media(max-width:560px){.hero-scene{opacity:.4}}

/* ---------- HERO TRACKER + LINKS ---------- */
.hero-track{margin-top:24px;max-width:660px}
.hero-track .btn-row{align-items:center}
.hero-track select{flex:1 1 170px;min-width:0}
.track-btn{width:100%;margin-top:14px;justify-content:center;font-size:1rem}
/* dropdown styled as a clear pill button */
.picker{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:auto;max-width:100%;min-height:44px;border:1px solid var(--border);border-radius:999px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232c4a64' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center;padding:11px 42px 11px 18px;font-family:inherit;font-weight:700;font-size:.9rem;color:#2c4a64;cursor:pointer;box-shadow:none}
.picker:hover{border-color:var(--sky-300);background-color:#f5fbff}
.picker:focus{outline:none;border-color:var(--sky-500);box-shadow:0 0 0 3px rgba(14,165,233,.2)}
.hero-links{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:20px}
.hero-links a{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.9rem;color:var(--sky-700);min-height:44px}
.hero-links a:hover{text-decoration:none;color:var(--sky-600)}

/* ---------- WHEN-TO-LEAVE PLANNER ---------- */
.planner-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.planner-grid{grid-template-columns:1fr}}
.loc-status{font-size:.8rem;color:var(--muted);margin-top:6px;min-height:1em}
.leaveby{background:linear-gradient(160deg,#0b2239,#15426b);color:#fff;border-radius:16px;padding:22px;margin-top:18px;position:relative;overflow:hidden}
.leaveby .lab{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:#9fd3f5}
.leaveby .big{font-family:var(--mono);font-size:2.4rem;font-weight:700;line-height:1.05;margin:2px 0}
.leaveby .sub{color:#bcd7ee;font-size:.86rem}
.brk{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;font-size:.8rem;color:#bcd7ee}
.brk span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:6px 10px}
.brk b{color:#fff;font-family:var(--mono)}

/* ---------- SEARCH-BAR (flight number + attached button) ---------- */
.search-group{display:flex;gap:8px;align-items:stretch}
.search-group input{flex:1;min-width:0}
.search-group .search-btn{flex:0 0 auto;border-radius:12px;padding:0 20px;min-height:46px;white-space:nowrap;gap:7px}

/* ---------- TOUCH TARGETS (>=44px) ---------- */
.btn{min-height:44px}
.btn.sm{min-height:40px}
select,input{min-height:46px}

/* ---------- MOBILE POLISH ---------- */
@media(max-width:560px){
  .wrap{padding:0 16px}
  .hero-inner{padding:44px 0 52px}
  section{padding:46px 0}
  .tool{padding:18px;border-radius:18px}
  .ft-card{padding:18px}
  /* stack hero tracker controls full-width for big, thumb-friendly taps */
  .hero-track .btn-row{flex-direction:column;align-items:stretch;gap:10px}
  .hero-track .btn-row>.btn,.hero-track .btn-row>select{width:100%}
  .hero-links{gap:4px 18px}
  .btn.sm{min-height:44px;padding:11px 16px}
  .chip{padding:11px 16px}
  .sec-head h2{font-size:1.55rem}
  .ft-eta{flex-direction:column;align-items:flex-start;gap:8px}
  .ft-eta>div:last-child{text-align:left!important}
}
@media(max-width:400px){
  .nav .logo{font-size:.95rem}
  .logo-badge{height:30px;width:30px}
}

/* ---------- FAQ accordion ---------- */
.faq-item{padding:16px 18px;border-radius:13px;background:#fff;border:1px solid var(--border-2);box-shadow:var(--soft);margin-bottom:12px}
.faq-item summary{font-weight:700;color:var(--jet);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--sky-600);font-weight:700;font-size:1.2rem;flex:0 0 auto}
.faq-item[open] summary::after{content:"\2013"}
.faq-item p{margin:10px 0 0;color:#2c455c;font-size:.92rem}

/* ---------- MOBILE DECLUTTER ---------- */
@media(max-width:560px){
  .sky .cloud.c2,.sky .cloud.c3{display:none}
  .hero-inner{padding:36px 0 44px}
  h1{font-size:clamp(1.85rem,7vw,2.3rem)}
  .lede{font-size:1rem}
  .tool h2{font-size:1.05rem}
  .tool .hint{font-size:.86rem}
  .hero-links{gap:8px 14px}
  .hero-links a{font-size:.85rem;min-height:40px}
  .sec-head{margin-bottom:20px}
  .opt-detail{padding:16px}
}