:root {
  --bg:#070c18; --bg2:#0a1122; --card:#0f182c; --card-h:#14213d; --line:rgba(255,255,255,.1); --line2:rgba(255,255,255,.07);
  --gold:#f59e0b; --gold-l:#fbbf24; --gold-d:#d97706; --glow:rgba(245,158,11,.35); --sky:#38bdf8; --ok:#22c55e; --red:#ef4444;
  --txt:#f8fafc; --mut:#94a3b8; --pill:rgba(255,255,255,.05); --pill-b:rgba(255,255,255,.14); --shadow:0 10px 30px rgba(0,0,0,.4); --shadow-h:0 16px 40px rgba(0,0,0,.6);
  --menu:#0f182c; --menu-t:#f8fafc; color-scheme:dark;
}
[data-theme="light"] { --bg:#f5f7fb; --bg2:#ffffff; --card:#ffffff; --card-h:#ffffff; --line:rgba(15,23,42,.1); --line2:rgba(15,23,42,.07); --txt:#0f172a; --mut:#64748b; --pill:rgba(15,23,42,.04); --pill-b:rgba(15,23,42,.12); --shadow:0 10px 30px rgba(15,23,42,.08); --shadow-h:0 16px 40px rgba(15,23,42,.14); --glow:rgba(245,158,11,.25); --menu:#fff; --menu-t:#0f172a; --gold-l:#b45309; --ok:#15803d; color-scheme:light }
[data-theme="light"] .eyebrow { background:rgba(245,158,11,.14); color:#92400e; border-color:#d97706 }
* { margin:0; padding:0; box-sizing:border-box; font-family:'Plus Jakarta Sans',-apple-system,Segoe UI,Roboto,sans-serif }
html { scroll-behavior:smooth }
body { background:var(--bg); color:var(--txt); line-height:1.55; overflow-x:hidden }
a { color:inherit; text-decoration:none }
button { font:inherit; cursor:pointer }
.wrap { max-width:1360px; margin:0 auto; padding:0 20px }
/* ticker */
.ticker { background:#000; color:#fff; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; min-height:32px; display:flex; align-items:center; overflow:hidden }
.ticker .wrap { display:flex; align-items:center; gap:14px; width:100%; min-width:0 }
.ticker .dot { width:8px; height:8px; border-radius:50%; background:var(--ok); animation:pulse 1.6s infinite; flex:none }
@keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(34,197,94,.6) } 70% { box-shadow:0 0 0 7px rgba(34,197,94,0) } 100% { box-shadow:0 0 0 0 rgba(34,197,94,0) } }
.ticker .msg { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0 } .ticker .msg b { color:var(--gold-l) }
.ticker a { color:var(--gold-l); white-space:nowrap }
/* header */
header { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg2) 92%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line) }
.nav { display:flex; align-items:center; gap:16px; height:70px }
.brand { display:flex; align-items:center; gap:12px; flex:none }
.brand img { width:46px; height:46px; border-radius:12px; background:linear-gradient(135deg,var(--gold),var(--gold-d)); padding:4px; box-shadow:0 0 22px var(--glow) }
.brand b { font-size:20px; font-weight:900; display:block; line-height:1.1 } .brand b span { color:var(--gold) }
.brand small { font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mut) }
.search { flex:1; max-width:470px; margin:0 auto; position:relative }
.search input { width:100%; padding:12px 16px 12px 44px; border-radius:999px; border:1px solid var(--line); background:var(--pill); color:var(--txt); font-size:14.5px; outline:0 }
.search input:focus { border-color:var(--gold) }
.search svg { position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; stroke:var(--mut); fill:none; stroke-width:2 }
.sugg { position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--menu); color:var(--menu-t); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-h); display:none; overflow:hidden; z-index:30 }
.sugg.on { display:block }
.sugg div { padding:10px 14px; display:flex; justify-content:space-between; gap:10px; cursor:pointer; font-size:14px } .sugg div:hover, .sugg div.on { background:rgba(245,158,11,.12) }
.sugg div b { font-weight:800 } .sugg div span { color:var(--mut); font-size:12.5px; white-space:nowrap }
.sugg .h { padding:6px 14px; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); cursor:default }
.acts { display:flex; gap:8px; align-items:center; margin-left:auto; flex:none }
.btn { display:inline-flex; align-items:center; gap:6px; padding:10px 16px; border-radius:999px; border:1px solid var(--pill-b); background:var(--pill); color:var(--txt); font-weight:800; font-size:13.5px; transition:.15s }
.btn:hover { border-color:var(--gold) }
.btn.gold { background:linear-gradient(135deg,var(--gold),var(--gold-d)); color:#000; border:0; box-shadow:0 6px 20px var(--glow) }
.btn.gold:hover { transform:translateY(-1px); box-shadow:0 10px 26px var(--glow) }
.curwrap { position:relative; display:inline-flex }
.curwrap select { appearance:none; -webkit-appearance:none; padding:10px 34px 10px 16px; border-radius:999px; border:1px solid var(--gold); background:var(--pill); color:var(--txt); font-weight:800; font-size:13.5px; cursor:pointer; outline:0 }
.curwrap::after { content:"▾"; position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--gold-l); font-size:12px }
select option { color:var(--menu-t); background:var(--menu) }
/* hero */
.hero { text-align:center; padding:48px 20px 20px; position:relative }
.hero::before { content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 0%, rgba(245,158,11,.16), transparent 70%); pointer-events:none }
.eyebrow { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--gold); color:var(--gold-l); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:8px 18px; border-radius:999px; background:rgba(245,158,11,.08); position:relative }
h1 { font-size:clamp(26px,3.6vw,52px); font-weight:900; line-height:1.1; letter-spacing:-1px; margin:20px auto 0; position:relative; white-space:nowrap }
h1 span { color:var(--gold) }
/* carousel */
.carousel-wrap { padding:18px 0 6px }
.shead { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:10px 0 16px }
h2 { font-size:clamp(22px,2.6vw,30px); font-weight:900; letter-spacing:-.5px }
.carnav { display:flex; gap:6px } .carnav .btn { padding:8px 14px }
.carousel { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:18px 4px 22px; scrollbar-width:none } .carousel::-webkit-scrollbar { display:none }
.hot { flex:0 0 calc((100% - 36px) / 3); min-width:240px; scroll-snap-align:center; transform:scale(.94); opacity:.82; position:relative; border-radius:22px; overflow:hidden; aspect-ratio:16/9; background:linear-gradient(135deg,#1e3a8a,#0369a1); box-shadow:var(--shadow); border:1px solid var(--line); transition:.2s }
.hot.focus { transform:scale(1.04); opacity:1; z-index:2; box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(245,158,11,.35) } .hot:hover { opacity:1 }
@media (max-width:760px) { .carousel { gap:18px; padding:8px 0 16px; scroll-snap-type:x mandatory } .hot { flex:0 0 100%; aspect-ratio:4/3; transform:none; opacity:1; scroll-snap-align:center; scroll-snap-stop:always } .hot.focus { transform:none; box-shadow:var(--shadow) } .hot .in { padding:14px } .hot h3 { font-size:17px } .hot .pr b { font-size:24px } .hot .pr s { display:none } .hot .ribbon { font-size:10px; width:140px; right:-40px; top:16px } .hot .go { font-size:12.5px; padding:8px 12px } }
.hot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.hot::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,12,24,.1) 30%, rgba(7,12,24,.92) 100%) }
.hot .in { position:absolute; inset:0; padding:18px; display:flex; flex-direction:column; justify-content:space-between; z-index:2; color:#fff }
.hot .top { display:flex; justify-content:space-between; align-items:flex-start }
.hot .rank { background:var(--gold); color:#000; font-weight:900; font-size:12px; padding:5px 11px; border-radius:999px; letter-spacing:.06em }
.hot .pct { background:var(--ok); color:#000; font-weight:900; font-size:15px; padding:6px 12px; border-radius:999px }
.hot .pct.err { background:var(--red); color:#fff } .hot .pct.lux { background:linear-gradient(135deg,var(--gold),var(--gold-d)); color:#000 }
.hot .ribbon { position:absolute; top:22px; right:-38px; z-index:3; width:160px; text-align:center; transform:rotate(45deg); background:linear-gradient(135deg,#ef4444,#b91c1c); color:#fff; font-weight:900; font-size:11px; letter-spacing:.14em; padding:6px 0; box-shadow:0 4px 14px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.25) } .hot .ribbon.err { background:linear-gradient(135deg,#f59e0b,#b45309); color:#000 }
.hot .top { padding-right:44px }
.hot h3 { font-size:20px; font-weight:900; line-height:1.2; text-shadow:0 2px 14px rgba(0,0,0,.7) }
.hot .pr { display:flex; align-items:baseline; gap:10px; margin-top:6px } .hot .pr b { font-size:30px; font-weight:900; color:var(--gold-l) } .hot .pr s { color:#cbd5e1; font-size:14px } .hot .pr small { color:#cbd5e1; font-size:12.5px }
.hot .go { margin-top:10px; display:inline-flex; background:linear-gradient(135deg,var(--gold),var(--gold-d)); color:#000; font-weight:800; font-size:13px; padding:9px 14px; border-radius:10px; width:max-content }
/* filters */
.filters { display:flex; gap:8px; flex-wrap:wrap; margin:22px 0 22px; align-items:center } .filters::-webkit-scrollbar { display:none }
.filters .pill { flex:0 0 auto; white-space:nowrap }
.fsel { position:relative; display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; padding:0 0 0 10px; border-radius:999px; border:1px solid var(--pill-b); background:var(--pill); font-weight:800; font-size:13.5px; color:var(--txt) } .fsel span { color:var(--mut); font-size:11px; letter-spacing:.04em; text-transform:uppercase } .fsel select { appearance:none; -webkit-appearance:none; border:0; background:transparent; color:var(--txt); font:inherit; font-weight:800; padding:10px 24px 10px 2px; cursor:pointer; outline:0; max-width:150px; font-size:13px; text-overflow:ellipsis } .fsel::after { content:"▾"; position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--mut); font-size:12px }
.fsel select option { color:#111; background:#fff }
.pill { display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; border:1px solid var(--pill-b); background:var(--pill); font-weight:800; font-size:13.5px; color:var(--txt); transition:.15s }
.pill:hover { border-color:var(--gold) }
.pill.on { background:linear-gradient(135deg,var(--gold),var(--gold-d)); color:#000; border-color:transparent; box-shadow:0 6px 18px var(--glow) }
.pill i { font-style:normal; font-size:11px; font-weight:900; padding:2px 7px; border-radius:999px; background:rgba(0,0,0,.35); color:#fff }
.fromwrap { }
.count { border:1px solid var(--gold); color:var(--gold-l); font-size:12.5px; font-weight:800; padding:6px 14px; border-radius:999px }
/* cards */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); column-gap:20px; row-gap:52px }
.card { background:var(--card); border:1px solid var(--line); border-radius:22px; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow); transition:.22s; position:relative }
.card:hover { transform:translateY(-5px); box-shadow:var(--shadow-h); border-color:rgba(245,158,11,.4); background:var(--card-h) }
.card.expired { opacity:.72 } .card.expired:hover { transform:none }
.photo { position:relative; aspect-ratio:2/1; background:linear-gradient(135deg,#1e3a8a,#0369a1); overflow:hidden; display:block }
.photo img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s } .card:hover .photo img { transform:scale(1.05) }
.photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,12,24,.05) 40%, rgba(7,12,24,.85) 100%) }
.card.expired .photo img { filter:grayscale(.7) }
.stamp { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-18deg); z-index:3; border:5px solid var(--red); color:var(--red); font-weight:900; font-size:34px; letter-spacing:.2em; padding:6px 18px; border-radius:10px; text-transform:uppercase; background:rgba(7,12,24,.35); text-shadow:0 2px 8px rgba(0,0,0,.6); box-shadow:0 0 0 2px rgba(239,68,68,.3) }
.badges { position:absolute; top:14px; left:14px; right:14px; display:flex; justify-content:space-between; align-items:flex-start; z-index:2; gap:8px }
.b { background:rgba(0,0,0,.72); backdrop-filter:blur(6px); color:#fff; font-size:11.5px; font-weight:800; letter-spacing:.04em; padding:6px 11px; border-radius:999px; border:1px solid rgba(255,255,255,.14) }
.b.pct { background:var(--ok); color:#000; border:0; font-size:13px } .b.pct.err { background:var(--red); color:#fff } .b.lux { background:linear-gradient(135deg,var(--gold),var(--gold-d)); color:#000; border:0; font-size:12px } .b.trip { background:rgba(255,255,255,.14); font-size:10.5px }
.bl { display:flex; gap:6px; flex-wrap:wrap; min-width:0 } .b.multi { background:linear-gradient(135deg,var(--gold),var(--gold-d)); color:#000; border:0 }
.photo .place { position:absolute; left:16px; bottom:14px; z-index:2; color:#fff; font-weight:900; font-size:15px; text-shadow:0 2px 12px rgba(0,0,0,.7) }
.body { padding:12px 16px 14px; display:flex; flex-direction:column; gap:6px; flex:1 }
.grid2 { display:grid; grid-template-columns:auto 1fr; column-gap:12px; row-gap:2px; align-items:baseline }
.grid2 .o { grid-column:1 / -1; font-size:22px; font-weight:900; line-height:1.2; letter-spacing:-.3px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px } .grid2 .o em { font-style:normal; color:var(--gold); font-size:12px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; padding:0 4px; vertical-align:middle }
.grid2 .price { text-align:right } .grid2 .save { text-align:right } .grid2 .trip { color:var(--mut); font-size:12.5px; font-weight:700; letter-spacing:.02em; text-align:left }
.type { font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--gold) } .type span { color:var(--mut) }
.route3 { display:flex; flex-direction:column; gap:0; min-height:0; letter-spacing:-.3px; min-width:0; flex:1 } .route3 .o, .route3 .d { font-size:22px; font-weight:900; line-height:1.15; color:var(--txt) } .route3 .o { white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .route3 em { font-style:normal; font-size:12px; font-weight:900; letter-spacing:.2em; text-transform:uppercase; color:var(--gold) } .route3 .d { font-size:26px; font-weight:900; line-height:1.15; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.meta { color:var(--mut); font-size:12.5px; font-weight:600; display:flex; gap:8px; align-items:center; flex-wrap:wrap; min-height:20px } .meta .tag { background:var(--pill); border:1px solid var(--pill-b); color:var(--txt); font-size:11.5px; font-weight:800; padding:3px 9px; border-radius:999px } .meta b { color:var(--txt); font-weight:700 }
.pricebox { display:none }
.was { color:var(--mut); font-size:12px; text-decoration:line-through; font-weight:600 }
.price { font-size:28px; font-weight:900; color:var(--gold-l); line-height:1.1; letter-spacing:-.5px; white-space:nowrap } .price small { display:block; font-size:11.5px; color:var(--mut); font-weight:700; letter-spacing:0; line-height:1 }
.save { color:var(--ok); font-weight:800; font-size:12.5px; white-space:nowrap } .note { color:var(--mut); font-size:12.5px; min-height:19px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cta { margin-top:auto; padding-top:10px } .cta .btn.gold { width:100%; justify-content:center; padding:12px 16px; border-radius:12px; font-size:14px }
.cta .btn.dead { width:100%; justify-content:center; padding:13px 16px; border-radius:12px; opacity:.6; cursor:not-allowed }
video { width:100%; border-radius:12px; background:#000; margin-top:4px }
.more { text-align:center; margin:26px 0 8px } .more .btn { padding:13px 26px; border-color:var(--gold); color:var(--gold-l) }
.empty { text-align:center; color:var(--mut); padding:46px 20px; background:var(--card); border:1px dashed var(--line); border-radius:20px }
/* pricing */
.pricing { margin:60px 0 10px } .phead { text-align:center; margin-bottom:22px } .phead h2 { margin-top:14px; font-size:clamp(28px,3.4vw,44px); background:linear-gradient(90deg,#fff 0%,var(--gold-l) 50%,#fff 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; background-size:200% auto; animation:shine 4s linear infinite } .lead { color:var(--mut); margin:6px auto 0; max-width:640px }
[data-theme="light"] .phead h2 { background:linear-gradient(90deg,#0f172a 0%,var(--gold-d) 50%,#0f172a 100%); -webkit-background-clip:text; background-clip:text }
@keyframes shine { to { background-position:200% center } }
.billing { display:inline-flex; align-items:center; gap:12px; margin:18px auto 0; background:var(--pill); border:1px solid var(--pill-b); border-radius:999px; padding:6px 8px 6px 16px; font-weight:800; font-size:13.5px }
.billing .sw { position:relative; width:52px; height:28px; border-radius:999px; background:linear-gradient(135deg,var(--gold),var(--gold-d)); cursor:pointer; border:0; box-shadow:0 0 18px var(--glow) }
.billing .sw::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:.2s; box-shadow:0 2px 6px rgba(0,0,0,.3) }
.billing .sw.y::after { left:27px }
.billing .save { color:var(--ok); font-size:12px; font-weight:900; background:rgba(34,197,94,.14); padding:3px 9px; border-radius:999px; min-height:0 }
.billing .on { color:var(--gold-l) }
.tiers { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:22px; margin-top:26px; align-items:stretch }
.tier { position:relative; border-radius:26px; padding:34px 28px 28px; display:flex; flex-direction:column; gap:12px; overflow:hidden; border:1px solid var(--line); background:var(--card); box-shadow:var(--shadow); transition:.25s }
.tier:hover { transform:translateY(-6px); box-shadow:var(--shadow-h) }
.tier::before { content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.08) 45%, transparent 60%); display:none }
@keyframes sheen { 0% { background-position:150% 0 } 60%, 100% { background-position:-150% 0 } }
.tier.lite { background:linear-gradient(160deg, #1b2438 0%, var(--card) 60%) } [data-theme="light"] .tier.lite { background:linear-gradient(160deg,#eef2f8,#fff 60%) }
.tier.premium { background:linear-gradient(160deg, rgba(245,158,11,.22) 0%, var(--card) 55%); border-color:rgba(245,158,11,.45) }
.tier.luxury { background:linear-gradient(160deg, #2a1d05 0%, #0b0a0a 45%, #1a1408 100%); border:2px solid transparent; background-clip:padding-box; box-shadow:0 0 70px rgba(245,158,11,.22), inset 0 0 40px rgba(245,158,11,.08) }
.tier.luxury::after { content:""; position:absolute; inset:-2px; border-radius:28px; padding:2px; background:linear-gradient(135deg,#fde68a,#f59e0b,#b45309,#fde68a); background-size:300% 300%; animation:border 5s linear infinite; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none }
@keyframes border { to { background-position:300% 300% } }
[data-theme="light"] .tier.luxury { color:#f8fafc } [data-theme="light"] .tier.luxury .tl, [data-theme="light"] .tier.luxury .py, [data-theme="light"] .tier.luxury li.no { color:#cbd5e1 }
.tier .tag { position:absolute; top:18px; right:18px; background:linear-gradient(135deg,#fde68a,#f59e0b); color:#000; font-weight:900; font-size:11px; letter-spacing:.12em; padding:6px 14px; border-radius:999px; text-transform:uppercase; box-shadow:0 4px 14px rgba(0,0,0,.4), 0 0 18px rgba(245,158,11,.5); z-index:2 }
.tier .name { font-size:38px; font-weight:900; letter-spacing:-1px; line-height:1; background:linear-gradient(180deg,#fff 0%,#cbd5e1 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }
.tier.premium .name { background:linear-gradient(180deg,#fff7d6 0%,#f59e0b 100%); -webkit-background-clip:text; background-clip:text }
.tier.luxury .name { font-size:44px; background:linear-gradient(90deg,#fde68a 0%,#f59e0b 35%,#fff7d6 50%,#f59e0b 65%,#fde68a 100%); background-size:200% auto; -webkit-background-clip:text; background-clip:text; animation:shine 3s linear infinite; filter:drop-shadow(0 0 14px rgba(245,158,11,.45)) }
[data-theme="light"] .tier .name { background:linear-gradient(180deg,#0f172a,#475569); -webkit-background-clip:text; background-clip:text }
[data-theme="light"] .tier.premium .name { background:linear-gradient(180deg,#b45309,#f59e0b); -webkit-background-clip:text; background-clip:text }
.tier .sub { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-l); font-weight:900 }
.tier .tl { color:var(--mut); font-size:14px; min-height:42px }
.tier .p { font-size:50px; font-weight:900; color:var(--gold-l); line-height:1; letter-spacing:-1px } .tier .p span { font-size:14px; color:var(--mut); font-weight:600; letter-spacing:0 } .tier .py { color:var(--mut); font-size:13px; min-height:18px }
.tier ul { list-style:none; display:flex; flex-direction:column; gap:8px; margin:6px 0; position:relative } .tier li { display:flex; gap:10px; font-size:14px } .tier li::before { content:"✓"; color:var(--ok); font-weight:900; flex:none }
.tier li.no { color:var(--mut) } .tier li.no::before { content:"–"; color:var(--mut) }
.tier .btn { margin-top:auto; justify-content:center; padding:14px; border-radius:14px; font-size:15px; position:relative }
.tier.luxury .btn.gold { background:linear-gradient(135deg,#fde68a,#f59e0b 50%,#d97706); box-shadow:0 10px 30px rgba(245,158,11,.45) }
.fine { color:var(--mut); font-size:12.5px; margin-top:14px }
/* modal */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:20px; z-index:50 } .modal.on { display:flex }
.mbox { width:min(520px,100%); background:var(--card); border:2px solid var(--gold); border-radius:24px; padding:30px; position:relative; box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(245,158,11,.2) }
.mbox .x { position:absolute; top:14px; right:16px; background:none; border:0; color:var(--mut); font-size:24px }
.mbox h3 { font-size:28px; font-weight:900; line-height:1.15; margin:12px 0 6px } .mbox p { color:var(--mut); font-size:14.5px }
.mbox input, .mbox select { width:100%; padding:13px 14px; border-radius:12px; border:1px solid var(--line); background:var(--pill); color:var(--txt); font-size:15px; margin-top:10px; outline:0 }
.mbox .btn.gold { width:100%; justify-content:center; margin-top:14px; padding:14px; border-radius:12px; font-size:15px }
.mbox ul { list-style:none; margin-top:14px; display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--mut) } .mbox li::before { content:"✓ "; color:var(--ok) }
/* panels */
.panel { background:var(--card); border:1px solid var(--line); border-radius:24px; padding:44px 28px; margin:54px 0; box-shadow:var(--shadow) }
.panel h2 { text-align:center } .panel .lead { text-align:center; margin-bottom:30px }
.feat { display:grid; grid-template-columns:repeat(6,1fr); gap:12px }
.f { background:var(--bg); border:1px solid var(--line2); border-radius:16px; padding:16px 14px; min-width:0 }
.f .ic { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-size:19px; background:rgba(245,158,11,.12); margin-bottom:10px }
.f h3 { font-size:14px; font-weight:800; margin-bottom:4px; line-height:1.25 } .f p { color:var(--mut); font-size:12.5px; line-height:1.45 }
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px }
.s { background:var(--bg); border:1px solid var(--line2); border-radius:18px; padding:24px } .s .n { width:34px; height:34px; border-radius:50%; background:var(--gold); color:#000; font-weight:900; display:grid; place-items:center; margin-bottom:14px }
.s h3 { font-size:17px; margin-bottom:6px } .s p { color:var(--mut); font-size:14px }
.faq { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px }
.q { background:var(--bg); border:1px solid var(--line2); border-radius:18px; padding:22px } .q h3 { font-size:16px; margin-bottom:6px } .q p { color:var(--mut); font-size:14px }
footer { border-top:1px solid var(--line); padding:44px 20px; text-align:center; color:var(--mut); font-size:13px } footer p { max-width:820px; margin:0 auto 8px } footer b { color:var(--txt) } footer a { color:var(--gold-l) }
footer .social { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 14px; margin:18px auto 22px } footer .social > span { color:var(--mut) }
footer .social a { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:1px solid var(--line); border-radius:999px; color:var(--txt); font-weight:700; text-decoration:none; transition:border-color .15s, color .15s, transform .15s }
footer .social a svg { width:18px; height:18px; fill:currentColor; flex:none } footer .social a:hover { border-color:var(--gold-l); color:var(--gold-l); transform:translateY(-1px) }
@media (max-width:600px) { footer .social > span { width:100% } footer .social a b { display:none } footer .social a { padding:11px } footer .social a svg { width:22px; height:22px } }
/* genie */
.genie-fab { position:fixed; right:22px; bottom:22px; z-index:40; display:inline-flex; align-items:center; gap:8px; padding:14px 18px; border-radius:999px; border:0; background:linear-gradient(135deg,var(--gold),var(--gold-d)); color:#000; font-weight:900; font-size:15px; box-shadow:0 12px 34px var(--glow); }
.genie-fab:hover { transform:translateY(-2px) }
.genie { position:fixed; right:22px; bottom:86px; width:min(380px, calc(100vw - 32px)); height:min(500px, calc(100vh - 120px)); background:var(--card); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-h); z-index:41; display:flex; flex-direction:column; overflow:hidden; transform-origin:100% 100%; transform:translate(20px, 60px) scale(.2); opacity:0; visibility:hidden; transition:transform .32s cubic-bezier(.2,.9,.3,1.2), opacity .25s, visibility 0s .32s }
.genie.on { transform:none; opacity:1; visibility:visible; transition:transform .32s cubic-bezier(.2,.9,.3,1.2), opacity .25s, visibility 0s }
.ghead { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); background:linear-gradient(135deg, rgba(245,158,11,.14), transparent) }
.ghead > div { flex:1 } .ghead b { display:block; font-size:16px } .ghead small { color:var(--mut); font-size:12px } .ghead .x { background:none; border:0; color:var(--mut); font-size:22px }
.gbody { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px }
.gm { max-width:88%; padding:10px 13px; border-radius:14px; font-size:14px; line-height:1.5; white-space:pre-wrap }
.gm.bot { background:var(--pill); border:1px solid var(--line2); align-self:flex-start; border-bottom-left-radius:4px }
.gm.me { background:linear-gradient(135deg,var(--gold),var(--gold-d)); color:#000; align-self:flex-end; border-bottom-right-radius:4px; font-weight:600 }
.gm.wait { color:var(--mut); font-style:italic }
.gchips { display:flex; flex-wrap:wrap; gap:6px } .gchips button { border:1px solid var(--pill-b); background:var(--pill); color:var(--txt); border-radius:999px; padding:6px 11px; font-size:12.5px; font-weight:700 } .gchips button:hover { border-color:var(--gold) }
.gform { display:flex; gap:8px; padding:12px; border-top:1px solid var(--line) }
.gform input { flex:1; padding:11px 13px; border-radius:12px; border:1px solid var(--line); background:var(--pill); color:var(--txt); font-size:14px; outline:0 } .gform input:focus { border-color:var(--gold) }
.gform .btn { border-radius:12px; padding:10px 16px }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#000; color:#fff; padding:12px 18px; border-radius:12px; font-size:14px; font-weight:700; z-index:60; opacity:0; transition:.25s; pointer-events:none } .toast.on { opacity:1 }
/* account page */
.acct { max-width:1100px; margin:30px auto 60px; padding:0 20px; display:grid; grid-template-columns:1fr; gap:22px }
.box { background:var(--card); border:1px solid var(--line); border-radius:22px; padding:28px; box-shadow:var(--shadow) }
.box h2 { margin-bottom:6px } .box .lead { margin:0 0 16px }
.box input, .box select { width:100%; padding:13px 14px; border-radius:12px; border:1px solid var(--line); background:var(--pill); color:var(--txt); font-size:15px; margin-top:10px; outline:0 } .box input:focus { border-color:var(--gold) }
.box .btn.gold { width:100%; justify-content:center; margin-top:14px; padding:14px; border-radius:12px; font-size:15px }
.demo { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:12px }
.demo button { text-align:left; background:var(--bg); border:1px solid var(--line2); border-radius:14px; padding:14px } .demo button:hover { border-color:var(--gold) }
.demo b { display:block; font-size:16px } .demo small { color:var(--mut); font-size:12.5px }
.tierbadge { display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,var(--gold),var(--gold-d)); color:#000; font-weight:900; padding:6px 14px; border-radius:999px; font-size:13px; letter-spacing:.06em; text-transform:uppercase }
.two { display:grid; grid-template-columns:1fr 1fr; gap:22px }
.picks { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px } .picks .pill { cursor:pointer }
.alerts { display:flex; flex-direction:column; gap:10px; margin-top:12px }
.al { display:flex; gap:12px; align-items:center; background:var(--bg); border:1px solid var(--line2); border-radius:14px; padding:12px }
.al .t { width:70px; height:56px; border-radius:10px; flex:none; overflow:hidden; background:linear-gradient(135deg,#1e3a8a,#0369a1) } .al .t img { width:100%; height:100%; object-fit:cover }
.al .h { font-weight:800; font-size:14px; line-height:1.3 } .al .d { color:var(--mut); font-size:12px; margin-top:2px }
.al .lock { margin-left:auto; color:var(--mut); font-size:12px; white-space:nowrap }
@media (max-width:1100px) { .feat { grid-template-columns:repeat(3,1fr) } }
@media (max-width:900px) { .nav { height:auto; min-height:60px; flex-wrap:wrap; gap:10px; padding-top:8px; padding-bottom:10px } .brand img { width:38px; height:38px } .brand b { font-size:17px } .brand small { display:none } .search { order:3; flex:0 0 100%; max-width:none; margin:0 } .search input { padding:11px 14px 11px 40px; font-size:14px } .acts .btn.gold { padding:9px 12px; font-size:13px } .two { grid-template-columns:1fr } h1 { white-space:normal } }
@media (max-width:600px) { .feat { grid-template-columns:repeat(2,1fr) } .ticker { padding:0 } .ticker a { display:none } html, body { overflow-x:hidden; overflow-x:clip; max-width:100vw; width:100% } .wrap { max-width:100vw; box-sizing:border-box } .ticker .msg { max-width:100%; display:block } .carousel { width:100%; max-width:100vw; box-sizing:border-box } .hot { max-width:100% } .acts .hide-m { display:none } .grid { grid-template-columns:1fr } .genie-fab span { display:none } .genie-fab { padding:14px } .genie { height:min(480px, 58vh) } }

/* consent line under the signup forms, and the terms page */
.consent { display:flex; gap:10px; align-items:flex-start; margin-top:12px; font-size:12.5px; line-height:1.45; color:var(--mut); text-align:left } .consent input { width:auto; flex:none; margin:3px 0 0; accent-color:var(--gold) } .consent a { color:var(--gold-l) }
.legal { max-width:820px; margin:30px auto 70px; padding:0 20px } .legal h1 { font-size:30px; font-weight:900; margin:34px 0 8px } .legal h2 { font-size:16px; font-weight:800; margin:18px 0 4px; color:var(--gold-l) } .legal p, .legal li { color:var(--mut); font-size:15px; line-height:1.6 } .legal p b { color:var(--txt) } .legal ul { margin:6px 0 0 20px } .legal section { padding-top:6px; border-top:1px solid var(--line); margin-top:26px } .legal a { color:var(--gold-l) }
.legal-nav { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px } .legal-nav a { padding:8px 14px; border:1px solid var(--line); border-radius:999px; background:var(--pill); color:var(--txt); font-size:13px; text-decoration:none } .legal-nav a:hover { border-color:var(--gold) }

/* filter dropdowns */
.filters { flex-wrap:nowrap; overflow:visible }
.dd { position:relative; flex:0 0 auto } .ddb { display:inline-flex; align-items:center; gap:6px; padding:9px 13px; border-radius:999px; border:1px solid var(--pill-b); background:var(--pill); color:var(--txt); font:inherit; font-weight:800; font-size:13px; cursor:pointer; white-space:nowrap } .ddb i { font-style:normal; color:var(--mut); font-size:11px }
.dd.on .ddb { background:linear-gradient(135deg,var(--gold),var(--gold-d)); color:#000; border-color:transparent } .dd.on .ddb i { color:#000 } .ddb:hover { border-color:var(--gold) }
.ddm { display:none; position:absolute; top:calc(100% + 8px); left:0; min-width:220px; max-height:340px; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:6px; z-index:40; box-shadow:0 24px 60px rgba(0,0,0,.5) } .dd.open .ddm { display:block }
.ddm button { display:flex; width:100%; justify-content:space-between; align-items:center; gap:12px; padding:9px 12px; border:0; background:transparent; color:var(--txt); font:inherit; font-weight:700; font-size:13.5px; border-radius:10px; cursor:pointer; text-align:left } .ddm button:hover { background:var(--pill) } .ddm button.sel { background:rgba(245,158,11,.16); color:var(--gold-l) }
.ddm button em { font-style:normal; font-size:11px; font-weight:900; padding:2px 7px; border-radius:999px; background:rgba(0,0,0,.35); color:#fff }
@media (max-width:640px) { .filters { overflow-x:auto; scrollbar-width:none } .filters::-webkit-scrollbar { display:none } .ddm { position:fixed; left:12px; right:12px; top:auto; bottom:12px; min-width:0 } }

/* members closed: deals only */
.no-members .members-only, .no-members #signin, .no-members .acts .btn.gold, .no-members #pricing, .no-members .foot-members, .no-members #modal { display:none !important }
/* free alerts: the two channels with their QR codes */
.alerts { margin:60px 0 10px }
.chans { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; margin-top:26px }
.chan { display:flex; gap:22px; align-items:center; padding:24px; border-radius:26px; border:1px solid var(--line); background:var(--card); box-shadow:var(--shadow); color:inherit; text-decoration:none; transition:.25s }
.chan:hover { transform:translateY(-4px); box-shadow:var(--shadow-h) }
.chan .qr { width:168px; height:168px; flex:none; background:#fff; padding:10px; border-radius:16px; box-sizing:border-box }
.chan .cname { font-weight:900; font-size:20px; margin-bottom:6px }
.chan p { color:var(--mut); font-size:14px; line-height:1.5; margin:0 0 14px }
.chan .btn { display:inline-block }
.chan.wa { background:linear-gradient(160deg, rgba(37,211,102,.16), var(--card) 65%) }
.chan.tg { background:linear-gradient(160deg, rgba(56,189,248,.16), var(--card) 65%) }
@media (max-width:560px) { .chan { flex-direction:column; text-align:center } }
.card .when { font-size:12.5px; color:var(--mut); margin:-4px 0 10px; font-weight:600 }
.card .checked { font-size:12px; color:var(--ok); margin:-4px 0 10px; font-weight:700 } .card .checked.gone { color:var(--mut) }

.gm .btn { display:inline-block; margin:6px 6px 2px 0; padding:7px 12px; font-size:13px; text-decoration:none }

.gchips.wiz { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:4px 0 6px; width:100% } .gchips.wiz button { width:100%; text-align:left; padding:10px 12px; border-radius:12px; font-size:13.5px; font-weight:700; line-height:1.25; white-space:normal } .gchips button.wide { grid-column:1 / -1; text-align:center } .gchips button.pri { border-color:var(--gold-l); color:var(--gold-l); font-weight:800 } .gchips button:disabled { opacity:.45; cursor:default }
.gtype { display:flex; gap:6px; align-items:center; margin:2px 0 8px; flex-wrap:wrap } .gtype input { flex:1; min-width:140px; padding:8px 10px; border-radius:10px; border:1px solid var(--line2); background:var(--bg); color:var(--txt); font:inherit }
.gtype label { display:flex; flex-direction:column; font-size:11.5px; color:var(--mut); gap:3px } .gtype .btn { padding:8px 14px }
.gchips button.nav { background:transparent; color:var(--mut); border-style:dashed }
.gnav { display:flex; gap:14px; margin:-2px 0 10px 4px } .gnav button { background:none; border:0; color:var(--mut); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; padding:2px 0; text-decoration:underline; text-underline-offset:3px } .gnav button:hover { color:var(--txt) }
.gtype.dates .flex { flex-basis:100%; background:transparent; border:1px dashed var(--line2); color:var(--txt); border-radius:10px; padding:8px 10px; font:inherit; font-size:13px; cursor:pointer }

/* the Genie as a side drawer on wide screens: half the window, full height */
.genie-fab.rub { animation:rub .35s ease-in-out 4 }
@keyframes rub { 0%,100% { transform:rotate(0) } 25% { transform:rotate(-8deg) scale(1.05) } 75% { transform:rotate(8deg) scale(1.05) } }
.genie.on .gavatar { animation:poof .7s cubic-bezier(.2,.9,.3,1.3) both }
.gavatar { width:64px; height:64px; margin:-14px 0 -12px -6px; filter:drop-shadow(0 6px 16px var(--glow)) }
@keyframes poof { 0% { transform:translateY(40px) scale(.3); opacity:0 } 60% { transform:translateY(-6px) scale(1.08); opacity:1 } 100% { transform:none; opacity:1 } }
.gcal { background:var(--bg); border:1px solid var(--line2); border-radius:14px; padding:10px; margin:4px 0 10px; max-width:360px }
.gcal-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px } .gcal-h b { font-size:14px } .gcal-h button { width:30px; height:30px; border-radius:8px; border:1px solid var(--line2); background:var(--card); color:var(--txt); font-size:16px; cursor:pointer }
.gcal-g { display:grid; grid-template-columns:repeat(7,1fr); gap:3px } .gcal-g i { font-style:normal; font-size:10.5px; color:var(--mut); text-align:center; padding:2px 0 } .gcal-g s { display:block }
.gcal-g button { aspect-ratio:1; border-radius:8px; border:1px solid transparent; background:var(--card); color:var(--txt); font:inherit; font-size:13px; font-weight:700; cursor:pointer } .gcal-g button:hover { border-color:var(--gold-l) } .gcal-g button:disabled { opacity:.25; cursor:default }
.gcal-g button.dep, .gcal-g button.ret { background:var(--gold); color:#000 } .gcal-g button.mid { background:rgba(245,158,11,.22) }
.gcal-f { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; font-size:12.5px; color:var(--mut) } .gcal-f .btn { padding:7px 12px; font-size:13px } .gcal-f .flex { background:transparent; border:1px dashed var(--line2); color:var(--txt); border-radius:10px; padding:7px 10px; font:inherit; font-size:12.5px; cursor:pointer }

/* Genie makeover: a vibrant palette of its own, like the membership tiers */
:root { --g-sky:#38bdf8; --g-violet:#a78bfa; --g-teal:#2dd4bf; --g-rose:#fb7185; --g-lime:#a3e635; --g-orange:#fb923c }
.genie { border:1px solid transparent; background:linear-gradient(var(--card),var(--card)) padding-box, linear-gradient(135deg,#fde68a,#f59e0b,#a78bfa,#38bdf8,#2dd4bf,#fde68a) border-box; background-size:100% 100%, 100% 100%; box-shadow:0 20px 60px rgba(0,0,0,.45), 0 0 40px rgba(245,158,11,.14) }
.ghead { position:relative; overflow:hidden; background:linear-gradient(120deg, rgba(245,158,11,.28) 0%, rgba(167,139,250,.22) 50%, rgba(56,189,248,.22) 100%); border-bottom:1px solid var(--line) }
.ghead::before { content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 45%, transparent 60%); background-size:250% 100%; animation:sheen 6s ease-in-out infinite; pointer-events:none }
.ghead b { background:linear-gradient(90deg,#fde68a 0%,#f59e0b 35%,#fff7d6 50%,#f59e0b 65%,#fde68a 100%); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:shine 3s linear infinite; font-size:17px }
[data-theme="light"] .ghead b { background:linear-gradient(90deg,#b45309,#f59e0b,#b45309); background-size:200% auto; -webkit-background-clip:text; background-clip:text }
.gbody { background:radial-gradient(60% 40% at 100% 0%, rgba(167,139,250,.10), transparent 70%), radial-gradient(50% 35% at 0% 100%, rgba(56,189,248,.10), transparent 70%) }
.gm.bot { border-left:3px solid var(--g-violet); background:linear-gradient(135deg, rgba(167,139,250,.12), var(--pill) 60%) }
.gm.wait { border-left-color:var(--g-sky) }
/* the quick chips under the header: one colour each */
.gchips:not(.wiz) button { border:1px solid; font-weight:800; transition:.18s; box-shadow:0 2px 10px rgba(0,0,0,.18) }
.gchips:not(.wiz) button:hover { transform:translateY(-1px); color:#000 }
/* the guided flow: choices cycle through four colours, the wide one is gold */
.gchips.wiz button { border:1px solid; font-weight:800; transition:.18s; box-shadow:0 2px 10px rgba(0,0,0,.15) }
.gchips.wiz button:hover:not(:disabled) { transform:translateY(-1px); color:#000 }
.gchips.wiz button:nth-child(4n+1) { color:var(--g-sky); border-color:rgba(56,189,248,.6); background:rgba(56,189,248,.12) } .gchips.wiz button:nth-child(4n+1):hover:not(:disabled) { background:var(--g-sky) }
.gchips.wiz button:nth-child(4n+2) { color:var(--g-violet); border-color:rgba(167,139,250,.6); background:rgba(167,139,250,.14) } .gchips.wiz button:nth-child(4n+2):hover:not(:disabled) { background:var(--g-violet) }
.gchips.wiz button:nth-child(4n+3) { color:var(--g-teal); border-color:rgba(45,212,191,.6); background:rgba(45,212,191,.12) } .gchips.wiz button:nth-child(4n+3):hover:not(:disabled) { background:var(--g-teal) }
.gchips.wiz button:nth-child(4n+4) { color:var(--g-rose); border-color:rgba(251,113,133,.6); background:rgba(251,113,133,.12) } .gchips.wiz button:nth-child(4n+4):hover:not(:disabled) { background:var(--g-rose) }
[data-theme="light"] .gchips.wiz button:nth-child(4n+1) { color:#0369a1 } [data-theme="light"] .gchips.wiz button:nth-child(4n+2) { color:#6d28d9 } [data-theme="light"] .gchips.wiz button:nth-child(4n+3) { color:#0f766e } [data-theme="light"] .gchips.wiz button:nth-child(4n+4) { color:#be123c }
.gchips.wiz button.wide, .gchips.wiz button.wide:nth-child(n) { color:#000; background:linear-gradient(135deg,#fde68a,#f59e0b); border-color:transparent; box-shadow:0 6px 18px var(--glow) }
.gchips.wiz button:disabled { opacity:.4; box-shadow:none; transform:none }
.gnav button { color:var(--g-sky); text-decoration:none; border:1px solid rgba(56,189,248,.4); border-radius:999px; padding:4px 12px; font-size:12px } .gnav button:last-child { color:var(--g-rose); border-color:rgba(251,113,133,.4) } .gnav button:hover { color:#000; background:var(--g-sky) } .gnav button:last-child:hover { background:var(--g-rose) }
.gtype input { border-color:rgba(56,189,248,.5) } .gtype input:focus { border-color:var(--g-sky); outline:0; box-shadow:0 0 0 3px rgba(56,189,248,.2) }
.gcal { border:1px solid rgba(167,139,250,.35); background:linear-gradient(160deg, rgba(167,139,250,.08), var(--bg) 60%) }
.gcal-g button.dep { background:linear-gradient(135deg,#38bdf8,#2563eb); color:#fff; border-color:transparent } .gcal-g button.ret { background:linear-gradient(135deg,#a78bfa,#7c3aed); color:#fff; border-color:transparent } .gcal-g button.mid { background:rgba(167,139,250,.22) }
.gcal-f .flex { border-color:var(--g-teal); color:var(--g-teal) }
.gform { background:linear-gradient(0deg, rgba(245,158,11,.08), transparent) } .gform input { border-color:rgba(245,158,11,.35) }
.gchips.wiz button.wide:nth-child(n):hover:not(:disabled) { background:linear-gradient(135deg,#fff3c4,#fbbf24); color:#000 }

/* tips & tricks: short original cards under the deals; a tap opens the three steps and a live deal to try it on */
.tips-wrap { margin:54px 0 10px } .tips-lead { color:var(--mut); margin:-6px 0 14px; font-size:14px }
.tipcats { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px } .tipcats button { font:inherit; font-size:12.5px; font-weight:700; padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--mut); cursor:pointer } .tipcats button.on { border-color:var(--gold-l); color:var(--gold-l) }
.tips { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.tip { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px 16px 16px; min-width:0; cursor:pointer; position:relative; box-shadow:var(--shadow); transition:transform .15s, border-color .15s } .tip:hover { transform:translateY(-2px); border-color:var(--gold-l) }
.tip .ic { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:24px; background:rgba(245,158,11,.14); margin-bottom:10px; transform:rotate(-6deg) }
.tip .cat { position:absolute; top:14px; right:14px; font-size:10.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--gold-l); background:rgba(245,158,11,.12); padding:4px 8px; border-radius:999px }
.tip h3 { font-size:17px; font-weight:800; line-height:1.2; margin-bottom:6px } .tip .hook { color:var(--mut); font-size:13.5px; line-height:1.45 }
.tip .open { margin-top:10px; font-size:12px; font-weight:700; color:var(--gold-l) } .tip.on .open { display:none }
.tip .detail { display:none; margin-top:12px; text-align:left } .tip.on .detail { display:block }
.tip ol { margin:0 0 10px 18px; padding:0; font-size:13.5px; line-height:1.5 } .tip ol li { margin-bottom:5px } .tip ol li::marker { color:var(--gold-l); font-weight:800 }
.tip .body { color:var(--mut); font-size:13px; line-height:1.5 }
.tip .try { display:flex; align-items:center; gap:10px; margin-top:12px; padding:10px 12px; border:1px dashed var(--line2); border-radius:12px; font-size:13px; text-decoration:none; color:var(--txt) } .tip .try b { color:var(--ok) } .tip .try small { color:var(--mut) }
.tip .src { margin-top:8px; font-size:11.5px; color:var(--mut) } .tip .src a { color:var(--mut) }
@media (max-width:1000px) { .tips { grid-template-columns:repeat(2,1fr) } } @media (max-width:600px) { .tips { grid-template-columns:1fr } }

/* live fare search bar (pilot) */
.fsearch { max-width:1100px; width:100%; box-sizing:border-box; margin:18px auto 14px; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:16px 18px 12px; box-shadow:var(--shadow) }
.fs-row { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,.9fr) auto; gap:10px; align-items:end }
.fs-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px }
.fs-seg { display:inline-flex; background:var(--pill); border:1px solid var(--line); border-radius:999px; padding:3px } .fs-seg button { border:0; background:none; color:var(--mut); font:inherit; font-size:13px; font-weight:800; padding:7px 14px; border-radius:999px; cursor:pointer } .fs-seg button.on { background:linear-gradient(135deg,var(--gold),var(--gold-d)); color:#000; box-shadow:0 4px 14px var(--glow) }
.fs-f[hidden] { display:none } .fs-f input[type=date] { display:block; width:100%; max-width:100%; height:44px; line-height:20px }
.fs-f { display:flex; flex-direction:column; gap:4px; min-width:0; position:relative; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--mut) }
.fs-f input, .fs-f select { width:100%; min-width:0; box-sizing:border-box; -webkit-appearance:none; appearance:none; padding:11px 12px; border-radius:12px; border:1px solid var(--line); background:var(--pill); color:var(--txt); font:inherit; font-size:14px; font-weight:600; outline:0; text-transform:none; letter-spacing:0 }
.fs-f input:focus, .fs-f select:focus { border-color:var(--gold) }
.fs-go { white-space:nowrap; padding:12px 18px; border-radius:12px; font-size:14px }
.fs-hint { margin-top:10px; font-size:12.5px; color:var(--mut) } .fs-genie { background:none; border:0; color:var(--gold-l); font:inherit; font-size:12.5px; font-weight:800; cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:0 }
.fs-results { max-width:1100px; margin:0 auto 26px; text-align:left; display:flex; flex-direction:column; gap:10px }
.fs-head b { font-size:15px } .fs-note { color:var(--mut); font-size:13px; margin:4px 0 0 }
.fs-msg { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; color:var(--mut); font-size:14px; display:flex; gap:12px; align-items:center; flex-wrap:wrap } .fs-wait { color:var(--gold-l) }
.fs-o { display:grid; grid-template-columns:1.4fr auto auto; gap:14px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px }
.fs-o.best { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 10px 30px var(--glow) }
.fs-air b { display:block; font-size:15px } .fs-air small { color:var(--mut); font-size:12.5px }
.fs-p { font-size:24px; font-weight:900; color:var(--gold-l); text-align:right; line-height:1 } .fs-p small { display:block; font-size:11px; color:var(--mut); font-weight:700; margin-top:3px }
.fs-act { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end } .fs-act .btn { padding:9px 13px; font-size:13px; border-radius:10px; text-decoration:none }
@media (max-width:900px) { .fsearch { padding:14px 14px 10px; border-radius:18px } .fs-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px } .fs-s { grid-column:1 / -1 } .fs-go { grid-column:1 / -1 } .fs-o { grid-template-columns:1fr auto } .fs-act { grid-column:1 / -1; justify-content:flex-start } }
@media (max-width:480px) { .fs-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr) } .fs-ac { grid-column:1 / -1 } .fs-f input[type=date] { font-size:13px; padding:11px 8px } .fs-f select { padding-right:26px; background-image:linear-gradient(45deg, transparent 50%, var(--mut) 50%), linear-gradient(135deg, var(--mut) 50%, transparent 50%); background-position:calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat } }
.fs-f select { padding-right:30px; background-image:linear-gradient(45deg, transparent 50%, var(--mut) 50%), linear-gradient(135deg, var(--mut) 50%, transparent 50%); background-position:calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat }
.fs-sug { position:absolute; left:0; right:0; top:100%; z-index:30; margin-top:4px; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-h); overflow:hidden; text-transform:none; letter-spacing:0 }
.fs-sug button { display:block; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--line2); color:var(--txt); font:inherit; font-size:13.5px; padding:9px 12px; cursor:pointer } .fs-sug button:last-child { border-bottom:0 }
.fs-sug button b { color:var(--gold-l); margin-right:6px } .fs-sug button small { display:block; color:var(--mut); font-size:11.5px } .fs-sug button.on, .fs-sug button:hover { background:var(--pill) }
.gqr { margin-top:8px; font-size:12px; color:var(--mut) } .gqr-img { margin-top:6px; width:132px; height:132px; background:#fff; border-radius:10px; padding:6px; box-sizing:border-box } .gqr-img svg { width:100%; height:100% }


.fs-verdict { display:flex; flex-direction:column; gap:3px; padding:12px 16px; border-radius:14px; border:1px solid var(--line); background:var(--card); font-size:13px; color:var(--mut) }
.fs-verdict b { font-size:15px; color:var(--txt) } .fs-verdict.good { border-color:rgba(34,197,94,.5); background:rgba(34,197,94,.08) } .fs-verdict.good b { color:var(--ok) }
.fs-verdict.high { border-color:rgba(245,158,11,.5); background:rgba(245,158,11,.08) } .fs-verdict.high b { color:var(--gold-l) }
.fs-verdict.typical b { color:var(--txt) }

/* phones: the fare search is the hero. The header's deal filter goes, the headline shrinks and the form becomes a compact card
   (floating labels, From | To, Depart | Return, trip and cabin on one line) so the deals start within the first screen. */
@media (max-width:600px) {
  header .search { display:none }
  .hero { padding:14px 12px 4px } .hero::before { display:none }
  h1 { font-size:21px; letter-spacing:-.4px; margin:0 0 10px; line-height:1.15 }
  .fsearch { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; margin:0 auto 8px; padding:10px; border-radius:16px }
  .fs-row { display:contents }
  .fs-top { order:-2; margin:0; grid-column:1 / 2 } .fs-s { order:-1; grid-column:2 / 3 }
  .fs-seg { width:100%; padding:2px; box-sizing:border-box } .fs-seg button { flex:1; padding:8px 2px; font-size:11px; white-space:nowrap; letter-spacing:-.1px; min-width:0 }
  .fs-s span { display:none } .fs-s select { height:40px; padding:0 28px 0 10px; font-size:13px; border-radius:999px }
  .fs-ac, .fs-d { grid-column:auto } .fsearch:has(.fs-ret[hidden]) .fs-d { grid-column:1 / -1 }
  .fs-f:not(.fs-s) > span { position:absolute; top:7px; left:11px; z-index:1; font-size:9.5px; letter-spacing:.06em; pointer-events:none }
  .fs-f:not(.fs-s) input { height:50px; padding:20px 10px 6px; font-size:14px; border-radius:12px }
  .fs-f input[type=date] { font-size:13.5px; padding:20px 8px 6px; line-height:1.3 }
  .fs-go { grid-column:1 / -1; padding:13px; font-size:14.5px }
  .fs-hint { display:none }
  .fs-results { margin-bottom:14px }
  .carousel-wrap { padding-top:2px } .carousel-wrap .shead { margin-top:0 }
}

/* route pages (/flights/<pair>): the search bar pre-filled, the numbers, the logged fares, the drops, tips and FAQ */
.crumbs { font-size:13px; color:var(--mut); margin-bottom:10px } .crumbs a { color:var(--mut); text-decoration:none } .crumbs a:hover { color:var(--gold-l) } .crumbs span { color:var(--txt) }
.route-hero { background-image:linear-gradient(180deg, color-mix(in srgb, var(--bg) 78%, transparent), var(--bg) 92%), var(--photo, none); background-size:cover; background-position:center 35% }
@media (max-width:600px) { .route-hero { background-image:linear-gradient(180deg, color-mix(in srgb, var(--bg) 78%, transparent), var(--bg) 92%), var(--photo-sm, var(--photo, none)) } } /* a phone gets the 960px thumbnail, not the original */
.route-hero h1 { white-space:normal; font-size:clamp(24px,3.2vw,44px); margin-top:4px } .route-hero h1 span { display:block; font-size:.5em; color:var(--gold-l); letter-spacing:.08em; margin-top:6px }
.route-hero .lead { color:var(--mut); font-size:15px; margin:10px auto 0; max-width:760px }
.route h2 { font-size:22px; font-weight:900; margin:0 0 10px } .route section { margin:34px 0 }
.rtiles { display:grid; grid-template-columns:repeat(4,1fr); gap:12px }
.rt { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px; box-shadow:var(--shadow) } .rt small { display:block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--mut) } .rt b { display:block; font-size:26px; font-weight:900; color:var(--gold-l); margin:4px 0 2px; line-height:1.1 } .rt span { font-size:12.5px; color:var(--mut) }
.route .lead { text-align:left; margin:0 0 12px; max-width:860px; color:var(--mut); font-size:15px }
.rblurb { color:var(--mut); font-size:15px; line-height:1.6; margin-top:14px; max-width:860px }
.rhist .spark { width:100%; height:auto; max-width:760px; display:block; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:8px; box-sizing:border-box } .spark .dots circle { fill:var(--gold) } .spark .typ { stroke:var(--mut); stroke-dasharray:4 4; stroke-width:1.5 } .spark .lbl { fill:var(--mut); font-size:11px; font-weight:700 }
.rtips ul { margin:0; padding:0 0 0 22px; max-width:860px } .rtips li { color:var(--txt); font-size:15px; line-height:1.6; margin-bottom:8px } .rtips li::marker { color:var(--gold-l); font-weight:800 }
.rq { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 16px; margin-bottom:8px; max-width:860px } .rq summary { cursor:pointer; font-weight:800; font-size:15px } .rq p { color:var(--mut); font-size:14.5px; line-height:1.6; margin:8px 0 0 }
.rmore .pills, .route .pills { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px } .rmore .pill, .route .pill { text-decoration:none; font-size:13px }
.rlist { display:grid; grid-template-columns:repeat(2,1fr); gap:12px } .rrow { display:grid; grid-template-columns:1fr auto; gap:2px 14px; align-items:center; text-decoration:none; color:var(--txt); background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px; box-shadow:var(--shadow); transition:border-color .15s, transform .15s } .rrow:hover { border-color:var(--gold-l); transform:translateY(-2px) }
.rrow b { font-size:17px } .rrow small { color:var(--mut); font-size:12.5px; grid-column:1 } .rrow .typ { grid-column:2; grid-row:1; font-weight:900; color:var(--gold-l) } .rrow .lv { grid-column:2; grid-row:2; font-size:12px; color:var(--mut); text-align:right }
@media (max-width:900px) { .rtiles { grid-template-columns:repeat(2,1fr) } .rlist { grid-template-columns:1fr } }
@media (max-width:600px) { .route-hero { padding-top:14px } .route-hero h1 { font-size:21px } .route-hero .lead { font-size:13.5px; margin:6px auto 10px } .crumbs { font-size:12px; margin-bottom:6px } .rt b { font-size:22px } .route section { margin:26px 0 } .route h2 { font-size:19px } }

/* deal pages (/deals/<id>) and the track record (/record) */
.grid2 a.o { color:inherit; text-decoration:none } .grid2 a.o:hover { color:var(--gold-l) }
.deal-hero h1 { font-size:clamp(22px,2.8vw,38px) } .deal-hero h1 span { letter-spacing:0; text-transform:none; font-size:.42em; color:var(--mut); font-weight:700 }
.dcta { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:16px } .btn.big { padding:14px 22px; font-size:16px; border-radius:14px } .btn.dead.big { cursor:default }
.dnote { margin:14px auto 0; max-width:760px; padding:12px 16px; border-radius:14px; font-size:14px; background:var(--card); border:1px solid var(--line); color:var(--mut) } .dnote.bad { border-color:rgba(239,68,68,.45); background:rgba(239,68,68,.08); color:var(--txt) }
.rt.ok b { color:var(--ok) } .rt.bad b { color:#f87171 }
.timeline { list-style:none; margin:0 0 12px; padding:0 0 0 18px; border-left:2px solid var(--line); max-width:760px } .timeline li { position:relative; padding:0 0 16px 18px } .timeline li::before { content:""; position:absolute; left:-24px; top:5px; width:10px; height:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px var(--bg) } .timeline time { display:block; font-size:12px; color:var(--mut); font-weight:700 } .timeline b { display:block; font-size:15px } .timeline span { font-size:13.5px; color:var(--mut) }
.dminis { display:grid; grid-template-columns:repeat(3,1fr); gap:12px } .dmini { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--txt); background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px 12px; transition:border-color .15s } .dmini:hover { border-color:var(--gold-l) } .dmini img { width:56px; height:56px; border-radius:10px; object-fit:cover; flex:none } .dmini .t { font-weight:700; font-size:14px; flex:1; min-width:0 } .dmini .p { font-weight:900; color:var(--gold-l); white-space:nowrap }
.record { width:100%; border-collapse:collapse; font-size:14px; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden } .record th, .record td { padding:12px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line2) } .record th { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); background:var(--pill) } .record td.num, .record th.num { text-align:right; white-space:nowrap } .record td small { display:block; color:var(--mut); font-size:12px; margin-top:2px } .record td a { color:var(--txt); text-decoration:none; font-weight:700 } .record td a:hover { color:var(--gold-l) } .record tr.expired td a, .record tr.expired td.num { color:var(--mut) }
.st { font-weight:800; font-size:13px } .st.confirmed { color:var(--ok) } .st.live { color:var(--gold-l) } .st.expired { color:#f87171 }
.rtable { overflow-x:auto; -webkit-overflow-scrolling:touch }
@media (max-width:900px) { .dminis { grid-template-columns:1fr } .record { font-size:13px; min-width:640px } .record th, .record td { padding:10px } }

/* ---- polish: motion and depth, the same hand as the dashboard. Transforms and opacity only; reduced-motion switches it off ---- */
::selection { background:rgba(245,158,11,.35) }
* { scrollbar-width:thin; scrollbar-color:rgba(148,163,184,.45) transparent } *::-webkit-scrollbar { width:9px; height:9px } *::-webkit-scrollbar-thumb { background:rgba(148,163,184,.35); border-radius:999px; border:2px solid transparent; background-clip:padding-box }
:focus-visible { outline:2px solid rgba(245,158,11,.75); outline-offset:2px; border-radius:8px }
header { transition:box-shadow .3s ease, background .3s ease } header.scrolled { box-shadow:0 12px 34px -20px rgba(0,0,0,.6); background:color-mix(in srgb, var(--bg2) 84%, transparent) }
.brand img { transition:transform .35s cubic-bezier(.2,.9,.3,1.3) } .brand:hover img { transform:rotate(-6deg) scale(1.06) }
@keyframes rise { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes menuRow { from { opacity:0; transform:translateX(-6px) } to { opacity:1; transform:none } }
/* filter dropdowns and the search suggestions: fade and lift in */
.ddm { display:block; visibility:hidden; opacity:0; transform:translateY(6px) scale(.985); transform-origin:top left; transition:opacity .2s ease, transform .26s cubic-bezier(.2,.8,.2,1), visibility 0s linear .26s; backdrop-filter:blur(14px) }
.dd.open .ddm { visibility:visible; opacity:1; transform:none; transition:opacity .18s ease, transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s }
.dd.open .ddm button { animation:menuRow .32s cubic-bezier(.2,.8,.2,1) both } .ddm button:nth-child(2) { animation-delay:.03s } .ddm button:nth-child(3) { animation-delay:.06s } .ddm button:nth-child(4) { animation-delay:.09s } .ddm button:nth-child(5) { animation-delay:.12s } .ddm button:nth-child(n+6) { animation-delay:.15s }
.ddm button { transition:background .16s ease, padding-left .18s ease } .ddm button:hover { padding-left:16px }
.ddb i { transition:transform .25s ease } .dd.open .ddb i { transform:rotate(180deg) }
.sugg { display:block; visibility:hidden; opacity:0; transform:translateY(6px); transition:opacity .2s ease, transform .26s cubic-bezier(.2,.8,.2,1), visibility 0s linear .26s } .sugg.on { visibility:visible; opacity:1; transform:none; transition:opacity .18s ease, transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s }
.fs-sug { animation:rise .25s cubic-bezier(.2,.8,.2,1) both }
/* entrance and scroll reveal */
.hero h1, .route-hero h1 { animation:rise .6s cubic-bezier(.2,.8,.2,1) both } .fsearch { animation:rise .6s .08s cubic-bezier(.2,.8,.2,1) both } .route-hero .lead, .crumbs { animation:rise .6s .04s cubic-bezier(.2,.8,.2,1) both } .dcta { animation:rise .6s .12s cubic-bezier(.2,.8,.2,1) both }
.grid .card { animation:rise .55s cubic-bezier(.2,.8,.2,1) both } .grid .card:nth-child(2) { animation-delay:.05s } .grid .card:nth-child(3) { animation-delay:.1s } .grid .card:nth-child(4) { animation-delay:.15s } .grid .card:nth-child(5) { animation-delay:.2s } .grid .card:nth-child(6) { animation-delay:.25s } .grid .card:nth-child(n+7) { animation-delay:.3s }
.reveal { opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .6s cubic-bezier(.2,.8,.2,1) } .reveal.in { opacity:1; transform:none }
.fs-results > * { animation:rise .45s cubic-bezier(.2,.8,.2,1) both } .fs-results > *:nth-child(2) { animation-delay:.05s } .fs-results > *:nth-child(3) { animation-delay:.1s } .fs-results > *:nth-child(4) { animation-delay:.15s } .fs-results > *:nth-child(n+5) { animation-delay:.2s }
/* hover, press, focus */
.btn, .pill, .ddb, .gchips button, .fs-seg button, .tipcats button, .rmore .pill { transition:transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease }
.btn:hover:not(:disabled), .pill:hover, .gchips button:hover:not(:disabled) { transform:translateY(-1px) } .btn:active:not(:disabled), .pill:active, .gchips button:active { transform:translateY(0) scale(.98) }
.rt, .rrow, .dmini, .tip, .rq, .fs-o, .fs-verdict, .tier, .hot, .phase, .dealc { transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .22s ease, background .22s ease }
.rt:hover, .fs-o:hover { transform:translateY(-2px); box-shadow:var(--shadow-h); border-color:rgba(245,158,11,.4) }
.fs-o.best:hover { box-shadow:0 0 0 1px var(--gold), 0 16px 40px var(--glow) }
.fs-f input:focus, .fs-f select:focus, .gform input:focus, .search input:focus, #mjoin input:focus, #mjoin select:focus { box-shadow:0 0 0 4px rgba(245,158,11,.16); transition:box-shadow .2s ease, border-color .2s ease }
.search input, .gform input, .fs-f input, .fs-f select { transition:border-color .2s ease, box-shadow .2s ease }
.card .photo img { transition:transform .6s cubic-bezier(.2,.8,.2,1) } .card:hover .photo img { transform:scale(1.04) }
.record tbody tr { transition:background .14s ease } .record tbody tr:hover { background:var(--pill) }
.rq summary { transition:color .16s } .rq summary:hover { color:var(--gold-l) } .rq[open] p { animation:fadeIn .3s ease both }
.toast { transition:opacity .25s ease, transform .3s cubic-bezier(.2,.9,.3,1.2) }
.shead h2, .route h2 { position:relative } .shead h2::after, .route h2::after { content:""; display:block; width:38px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--gold),transparent); margin-top:6px; transform-origin:left; animation:grow .6s .2s cubic-bezier(.2,.8,.2,1) both }
@keyframes grow { from { transform:scaleX(0) } to { transform:scaleX(1) } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important } html { scroll-behavior:auto } .reveal { opacity:1; transform:none } }

/* ---- Wings Genie polish: the pop-up gets the same motion, the airplane genie floats, messages and chips enter in turn ---- */
.gbody { scroll-behavior:smooth; overscroll-behavior:contain }
.gavatar { width:72px; height:72px; margin:-18px 0 -14px -8px; filter:drop-shadow(0 8px 18px var(--glow)) }
.genie.on .gavatar { animation:poof .7s cubic-bezier(.2,.9,.3,1.3) both, hover 3.2s .8s ease-in-out infinite alternate }
@keyframes hover { from { transform:translateY(0) rotate(-1.5deg) } to { transform:translateY(-4px) rotate(1.5deg) } }
.ghead .x { transition:transform .25s ease, color .2s ease; border-radius:50%; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center } .ghead .x:hover { transform:rotate(90deg); color:var(--txt); background:rgba(255,255,255,.08) }
@keyframes gmBot { from { opacity:0; transform:translateY(8px) translateX(-6px) scale(.98) } to { opacity:1; transform:none } }
@keyframes gmMe { from { opacity:0; transform:translateY(8px) translateX(6px) scale(.98) } to { opacity:1; transform:none } }
.gm.bot { animation:gmBot .38s cubic-bezier(.2,.8,.2,1) both; transform-origin:left bottom } .gm.me { animation:gmMe .34s cubic-bezier(.2,.8,.2,1) both; transform-origin:right bottom }
.gm.wait::after { content:""; display:inline-block; width:1.4em; text-align:left; animation:dots 1.2s steps(4,end) infinite } @keyframes dots { 0% { content:"" } 25% { content:"." } 50% { content:".." } 75% { content:"..." } }
.gchips { animation:gmBot .4s .08s cubic-bezier(.2,.8,.2,1) both }
.gchips button { animation:rise .35s cubic-bezier(.2,.8,.2,1) both } .gchips button:nth-child(2) { animation-delay:.05s } .gchips button:nth-child(3) { animation-delay:.1s } .gchips button:nth-child(4) { animation-delay:.15s } .gchips button:nth-child(5) { animation-delay:.2s } .gchips button:nth-child(n+6) { animation-delay:.25s }
.gchips button:active:not(:disabled) { transform:translateY(0) scale(.97) }
.gnav button { transition:color .16s, transform .16s } .gnav button:hover { color:var(--gold-l); transform:translateX(-1px) }
.gcal { animation:rise .4s cubic-bezier(.2,.8,.2,1) both } .gcal-g button { transition:background .15s ease, transform .12s ease, border-color .15s ease } .gcal-g button:hover { transform:scale(1.08) } .gcal-g button.dep, .gcal-g button.ret { box-shadow:0 4px 12px var(--glow) }
.gqr { animation:fadeIn .4s ease both } .gqr-img { transition:transform .25s ease } .gqr-img:hover { transform:scale(1.04) }
.gform { background:linear-gradient(0deg, rgba(245,158,11,.06), transparent) } .gform input { transition:border-color .2s ease, box-shadow .2s ease, background .2s ease } .gform input:focus { box-shadow:0 0 0 4px rgba(245,158,11,.16); background:var(--card) }
.gform .btn { transition:transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease } .gform .btn:active { transform:scale(.96) }
.genie-fab { transition:transform .22s cubic-bezier(.2,.9,.3,1.2), box-shadow .25s ease; animation:fabGlow 3s ease-in-out infinite } .genie-fab:hover { transform:translateY(-3px) scale(1.03); box-shadow:0 18px 44px var(--glow) }
@keyframes fabGlow { 0%, 100% { box-shadow:0 12px 34px var(--glow) } 50% { box-shadow:0 12px 44px rgba(245,158,11,.55), 0 0 0 6px rgba(245,158,11,.08) } }
.genie.on ~ .genie-fab, body:has(.genie.on) .genie-fab { animation:none }
.gm .btn { transition:transform .16s ease, box-shadow .2s ease } .gm .btn:hover { transform:translateY(-1px) }
@media (prefers-reduced-motion:reduce) { .gavatar, .gm, .gchips, .gchips button, .genie-fab { animation:none !important } }

/* ===== comparison cards: the usual fare struck through beside the price, one savings pill, one meta line ===== */
.grid2 { grid-template-columns:1fr auto; align-items:center }
.grid2 .price { display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right } .grid2 .price s.was { font-size:13px; color:var(--mut); font-weight:700; letter-spacing:0; line-height:1 }
.saverow { margin:6px 0 0 } .savepill { display:inline-flex; align-items:baseline; gap:4px; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.3); color:var(--ok); font-weight:800; font-size:12.5px; padding:4px 10px; border-radius:999px; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis } .savepill em { font-style:normal; color:var(--mut); font-weight:700 }
.card .meta2 { display:flex; flex-wrap:wrap; align-items:center; gap:0 6px; color:var(--mut); font-size:12.5px; font-weight:600; margin:10px 0 8px; line-height:1.6 } .card .meta2 b { color:var(--ok); font-weight:800 } .card .meta2 { gap:4px 16px } .card .meta2 .gone { color:var(--mut) }

/* ===== proof: the record's numbers and three confirmed deals ===== */
.proof { margin:60px 0 10px }
.proof .strip { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:22px; overflow:hidden; background:var(--card); box-shadow:var(--shadow) }
.proof .st { padding:22px 20px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:2px } .proof .st:last-child { border-right:0 }
.proof .st b { font-size:40px; font-weight:900; letter-spacing:-1px; line-height:1; background:linear-gradient(180deg,#fde68a,#f59e0b); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }
.proof .st span { font-weight:800; font-size:13.5px; margin-top:6px } .proof .st small { color:var(--mut); font-size:12px }
.proof .stories { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px }
.story { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:22px; overflow:hidden; background:var(--card); box-shadow:var(--shadow); color:inherit; text-decoration:none; transition:transform .25s, box-shadow .25s }
.story:hover { transform:translateY(-5px); box-shadow:var(--shadow-h); border-color:rgba(245,158,11,.4) }
.story img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block }
.story .in { padding:16px 18px 18px; display:flex; flex-direction:column; gap:4px }
.story .r { font-size:19px; font-weight:900; letter-spacing:-.3px } .story .r em { font-style:normal; color:var(--gold); font-size:11px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; padding:0 4px; vertical-align:middle }
.story .p b { font-size:26px; font-weight:900; color:var(--gold-l); letter-spacing:-.5px } .story .p s { color:var(--mut); font-size:13px; font-weight:700; margin-left:6px }
.story .sv { color:var(--ok); font-weight:800; font-size:13px } .story .ft { color:var(--mut); font-size:12.5px; font-weight:600; margin-top:4px }
.pricing .pitch { color:var(--gold-l); font-weight:900 } .pricing .urgency { text-align:center; color:var(--mut); font-size:14px; margin:-6px 0 0; min-height:0 } .pricing .urgency b { color:var(--txt) }
@media (max-width:760px) { .proof .strip { grid-template-columns:1fr 1fr } .proof .st { border-bottom:1px solid var(--line) } .proof .st:nth-child(2n) { border-right:0 } .proof .st b { font-size:32px } .proof .stories { grid-template-columns:1fr } }

/* ===== explore map ===== */
.xbar { display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:14px 18px; box-shadow:var(--shadow); margin-bottom:14px }
.xbar label { display:flex; align-items:center; gap:10px; font-weight:800; font-size:13.5px; color:var(--mut) } .xbar select { font:inherit; font-weight:700; color:var(--txt); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:8px 10px }
.xbar .xbud b { color:var(--gold-l); font-size:18px; min-width:92px } .xbar input[type=range] { width:min(320px,60vw); accent-color:#f59e0b }
.xmonths { display:flex; flex-wrap:wrap; align-items:center; gap:6px } .xmonths .xml { color:var(--mut); font-size:12.5px; font-weight:800; margin-right:4px } .xmonths .pill { padding:5px 10px; font-size:12px }
.xcount { margin-left:auto; color:var(--mut); font-size:13px; font-weight:700 }
.xmap { height:min(62vh,560px); border-radius:22px; border:1px solid var(--line); box-shadow:var(--shadow); background:#0b1020; overflow:hidden } .xmap .leaflet-container { background:#0b1020; font-family:inherit }
.xpin span { display:inline-block; white-space:nowrap; font:800 12px/1 "Plus Jakarta Sans", system-ui, sans-serif; padding:5px 8px; border-radius:999px; background:#111827; color:#e5e7eb; border:1px solid rgba(255,255,255,.18); box-shadow:0 4px 14px rgba(0,0,0,.45); transform:translate(-50%,-50%) }
.xpin.ok span { background:linear-gradient(135deg,#fde68a,#f59e0b); color:#111; border-color:transparent } .xpin.ok.live span { box-shadow:0 0 0 3px rgba(34,197,94,.45), 0 4px 14px rgba(0,0,0,.45) }
.xpin.far span { opacity:.42 } .xpin.xhome span { background:#fff; color:#111; font-weight:900 }
.leaflet-popup-content-wrapper { background:var(--card); color:var(--txt); border-radius:14px; font-family:inherit } .leaflet-popup-tip { background:var(--card) } .leaflet-popup-content a { color:var(--gold-l) }
.xh { margin:26px 0 10px } .route-hero h1 em.xb { font-style:normal; color:var(--gold-l); display:inline } .route-hero h1 span i { font-style:normal; color:var(--txt) }
.xtiles { filter:invert(1) hue-rotate(195deg) saturate(.35) brightness(.75) contrast(1.05) } [data-theme="light"] .xtiles { filter:saturate(.5) brightness(1.02) } [data-theme="light"] .xmap, [data-theme="light"] .xmap .leaflet-container { background:#e8edf5 }
.route-photo { width:min(100%,520px); aspect-ratio:16/7; object-fit:cover; border-radius:18px; margin:0 auto 14px; display:block; box-shadow:var(--shadow) }
.rrow em.lv { font-style:normal; color:var(--ok); font-weight:800 }
@media (max-width:760px) { .xbar input[type=range] { width:100% } .xbar label.xbud { flex-wrap:wrap } .xcount { margin-left:0 } .xmap { height:58vh } }

/* ===== capture after the verdict ===== */
.fs-capture { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:10px 0 12px; padding:12px 16px; border-radius:16px; background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.3) }
.fs-capture div { display:flex; flex-direction:column; gap:2px; min-width:0 } .fs-capture b { font-size:15px } .fs-capture span { color:var(--mut); font-size:13px }
.mwatch { color:var(--gold-l); font-weight:800; font-size:14px; margin:-6px 0 10px }

/* ===== pay-per-watch ===== */
.fs-capture.pay { display:block } .fs-capture.pay > div { gap:6px }
.fs-capture .payrow { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; align-items:center } .fs-capture .payrow input { flex:1 1 220px; min-width:0; font:inherit; color:var(--txt); background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:10px 12px }
.fs-capture .payrow .btn { white-space:nowrap } .fs-capture small { color:var(--mut); font-size:12.5px; margin-top:6px } .fs-capture small a { color:var(--gold-l) }
.fs-capture.done { border-color:rgba(34,197,94,.4); background:rgba(34,197,94,.08) } .fs-capture.done .row { flex-wrap:wrap; gap:10px; align-items:center } .fs-capture.done code { font-size:12px; background:var(--pill); padding:2px 6px; border-radius:6px }

/* ===== deal page: the story, the example dates, sharing ===== */
.dstory p { max-width:820px; font-size:16px; line-height:1.65; margin:0 0 12px } .dstory h3 { margin:18px 0 6px }
.dchips { display:flex; flex-wrap:wrap; gap:8px } .dchip { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:8px 12px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:inherit; text-decoration:none; font-size:13px; transition:.2s }
.dchip:hover { border-color:rgba(245,158,11,.5); transform:translateY(-1px) } .dchip b { font-weight:800 } .dchip i { font-style:normal; color:var(--gold) } .dchip small { color:var(--mut); width:100%; font-size:11.5px }
.share { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:14px 0 4px } .share > span { color:var(--mut); font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-right:4px }
.card .photo, .hot { cursor:pointer }

.tgline { text-align:center; margin:18px 0 4px; color:var(--mut); font-weight:600 } .tgline .btn { font-size:14px; margin-left:6px }
.joincard { position:fixed; right:20px; bottom:20px; z-index:58; width:min(360px, calc(100vw - 32px)); background:var(--card); color:var(--txt); border:1px solid var(--line); border-radius:18px; padding:18px 18px 14px; box-shadow:var(--shadow-h); opacity:0; transform:translateY(16px); transition:opacity .3s ease, transform .35s cubic-bezier(.2,.9,.3,1.1) }
.joincard.on { opacity:1; transform:none }
.joincard b { display:block; font-size:17px; font-weight:900; letter-spacing:-.01em; padding-right:28px }
.joincard p { margin:6px 0 12px; color:var(--mut); font-size:13.5px; line-height:1.45 }
.joincard .jbtns { display:grid; gap:8px } .joincard .jbtns .btn { justify-content:center; font-size:14px }
.joincard .jx { position:absolute; top:10px; right:12px; background:none; border:0; color:var(--mut); font-size:22px; line-height:1; cursor:pointer }
.joincard .jno { display:block; margin:10px auto 0; background:none; border:0; color:var(--mut); font-size:12.5px; font-weight:700; cursor:pointer }
@media (max-width:600px) { .joincard { right:12px; left:12px; bottom:12px; width:auto } }

/* Genie, tidied: uniform chips, channel icons in the header, a one-line footer */
.gchips:not(.wiz) { gap:8px; margin-top:2px } .gchips:not(.wiz) button { border:1px solid var(--pill-b); background:var(--pill); color:var(--txt); font-weight:800; font-size:13px; padding:8px 13px; box-shadow:none }
.gchips:not(.wiz) button:hover { border-color:var(--gold); color:var(--txt); transform:translateY(-1px) }
.gchips:not(.wiz) button.pri { color:#000; background:linear-gradient(135deg,#fde68a,#f59e0b); border-color:transparent; box-shadow:0 6px 18px var(--glow) } .gchips:not(.wiz) button.pri:hover { color:#000 }
.ghead { gap:12px; padding:12px 12px 12px 14px } .ghead .gavatar { width:52px; height:52px } .ghead small { display:block; margin-top:1px; line-height:1.3 }
.gsocial { display:flex; gap:6px; flex:none } .gsocial a { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.25); transition:transform .16s } .gsocial a:hover { transform:translateY(-2px) }
.gsocial svg { width:18px; height:18px; fill:currentColor } .gsocial .tg { background:#229ED9 } .gsocial .wa { background:#25D366 }
.ghead .x { width:30px; height:30px; display:grid; place-items:center; border-radius:10px; flex:none; cursor:pointer } .ghead .x:hover { background:var(--pill); color:var(--txt) }
.gfoot { padding:7px 14px 10px; font-size:11.5px; color:var(--mut); text-align:center; border-top:1px solid var(--line2) }
/* the channel QR codes: in the Genie's footer and in the alerts pop-up; each tile is also a link for phones */
.gqrs { display:flex; justify-content:center; gap:14px; margin-top:6px }
.gqrs a { display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--txt); text-decoration:none; font-weight:700; font-size:11px }
.gqrs img { width:72px; height:72px; background:#fff; padding:5px; border-radius:10px; box-sizing:border-box }
.joincard .gqrs { gap:22px; margin:12px 0 8px }
.joincard .gqrs img { width:120px; height:120px; padding:8px; border-radius:14px }
.joincard .gqrs a { font-size:13px } .gfoot a { color:var(--gold-l); font-weight:800; text-decoration:none } .gfoot a:hover { text-decoration:underline }
.gform { padding:10px 12px 8px }
.dchip.on { border-color:var(--gold); box-shadow:0 0 0 2px var(--glow) }
.share-week { margin-top:28px } .share-week .share { margin:10px 0 12px } .share-pre { white-space:pre-wrap; font-size:13px; line-height:1.5; background:var(--pill); border:1px solid var(--line); border-radius:12px; padding:14px; color:var(--txt); font-family:inherit }

.statlist { margin:34px 0 10px } .statlist h2 { font-size:20px } .statlist .lead { font-size:14px; color:var(--mut); margin:6px 0 12px } .statlist .lead a { color:var(--gold-l); font-weight:700 }
.statlist ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:4px 18px; font-size:13.5px } .statlist li { padding:5px 0; border-bottom:1px solid var(--line2); color:var(--mut) } .statlist li a { color:var(--txt); text-decoration:none; font-weight:700 } .statlist li a:hover { color:var(--gold-l) } .statlist li b { color:var(--gold-l); margin-left:6px }
/* deal page: the answer first (route, price, saving, status, one button), the plan in plain words, the analysis folded */
.dtop { display:grid; grid-template-columns:1.35fr 1fr; gap:22px; align-items:center; text-align:left; margin-top:8px }
.droute h1 { text-align:left; margin:0 } .droute h1 i { font-style:normal; color:var(--gold) } .droute h1 span { letter-spacing:.04em }
.dposted { color:var(--mut); font-size:13px; margin:10px 0 0 }
.dprice { position:relative; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:20px 22px; box-shadow:var(--shadow) }
.dnow { font-size:clamp(36px,4.2vw,54px); font-weight:900; color:var(--gold-l); line-height:1; letter-spacing:-.02em } .dnow small { display:block; font-size:12.5px; color:var(--mut); font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-top:8px }
.dwas { margin-top:12px; font-size:14.5px; color:var(--mut); line-height:1.5 } .dwas b { color:var(--txt) }
.dpct { position:absolute; top:14px; right:16px; background:var(--ok); color:#06240f; font-weight:900; font-size:14px; padding:4px 11px; border-radius:999px }
.dstat { margin-top:12px; font-size:13.5px; font-weight:800 } .dstat.ok { color:var(--ok) } .dstat.bad { color:var(--red) }
.deal-hero .dcta { margin-top:20px }
.dplan-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.dp { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px 18px; box-shadow:var(--shadow); min-width:0 }
.dp small { display:block; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); font-weight:800 }
.dp b { display:block; font-size:19px; margin:6px 0 4px; line-height:1.25 } .dp span { display:block; color:var(--mut); font-size:14px; line-height:1.5 } .dp .dchips { margin-top:10px }
.dnerd { border:1px solid var(--line); border-radius:18px; background:var(--bg2); padding:0 18px }
.dnerd summary { cursor:pointer; padding:16px 0; font-weight:800; font-size:15px; list-style:none; color:var(--txt) } .dnerd summary::-webkit-details-marker { display:none }
.dnerd summary::before { content:"▸ "; color:var(--gold) } .dnerd[open] summary::before { content:"▾ " } .dnerd section { margin:10px 0 26px }
@media (max-width:760px) { .dtop { grid-template-columns:1fr; gap:14px } .dplan-grid { grid-template-columns:1fr } .droute h1 { text-align:center } .dposted { text-align:center } .dnow { font-size:38px } }
.dp .dchip { padding:8px 10px } .dp .dchip b { font-size:14px } .dp .dchip small { font-size:10px }
.dplan-grid { align-items:start }
.dpdates { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px } .dpdates > span { color:var(--mut); font-size:13.5px; font-weight:700 } .dpdates .dchips { gap:8px }
/* deal hero: two matching panels that read over any photo, with the membership section's shine, rise and badge */
.deal-hero .crumbs { text-align:left }
.dtop { align-items:stretch }
.droute, .dprice { background:color-mix(in srgb, var(--card) 90%, transparent); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px) }
.droute { padding:24px 26px; display:flex; flex-direction:column; justify-content:center; animation:rise .6s cubic-bezier(.2,.8,.2,1) both }
.droute h1 { font-size:clamp(28px,3.4vw,46px); line-height:1.05; background:linear-gradient(90deg,#fff 0%,var(--gold-l) 50%,#fff 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; background-size:200% auto; animation:shine 4s linear infinite }
[data-theme="light"] .droute h1 { background:linear-gradient(90deg,#0f172a 0%,var(--gold-d) 50%,#0f172a 100%); -webkit-background-clip:text; background-clip:text }
.droute h1 i { -webkit-text-fill-color:var(--gold) }
.droute h1 span { -webkit-text-fill-color:var(--txt); color:var(--txt); font-size:.42em; font-weight:800; letter-spacing:.04em; margin-top:10px }
.dposted { color:var(--txt); opacity:.72; font-size:13.5px; margin-top:10px }
.dprice { border-color:rgba(245,158,11,.45); box-shadow:var(--shadow), 0 0 28px rgba(245,158,11,.16); animation:rise .6s .08s cubic-bezier(.2,.8,.2,1) both }
.dnow { text-shadow:0 0 26px rgba(245,158,11,.35) } .dnow small { color:var(--txt); opacity:.7 }
.dwas { color:var(--txt); opacity:.88; font-size:15px } .dwas b { opacity:1 }
.dpct { background:linear-gradient(135deg,#fde68a,#f59e0b); color:#000; letter-spacing:.04em; box-shadow:0 4px 14px rgba(0,0,0,.4), 0 0 18px rgba(245,158,11,.5); animation:pop .5s .45s cubic-bezier(.2,.8,.2,1) both }
@keyframes pop { from { opacity:0; transform:scale(.6) } to { opacity:1; transform:none } }
.dstat { font-size:14px }
.deal-hero .dcta { animation:rise .6s .16s cubic-bezier(.2,.8,.2,1) both }
.dplan h2, .dsearch h2 { background:linear-gradient(90deg,#fff 0%,var(--gold-l) 50%,#fff 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; background-size:200% auto; animation:shine 4s linear infinite; display:inline-block }
[data-theme="light"] .dplan h2, [data-theme="light"] .dsearch h2 { background:linear-gradient(90deg,#0f172a 0%,var(--gold-d) 50%,#0f172a 100%); -webkit-background-clip:text; background-clip:text }
.dp { animation:rise .6s cubic-bezier(.2,.8,.2,1) both } .dp:nth-child(2) { animation-delay:.08s } .dp:nth-child(3) { animation-delay:.16s }
.dp b { font-size:20px } .dp span { color:var(--txt); opacity:.8; font-size:14.5px } .dp small { color:var(--gold-l) }
.dpdates > span { color:var(--txt); opacity:.8 }
@media (max-width:760px) { .droute { text-align:center; padding:18px } .droute h1 { font-size:30px } }
/* the deal page calendar: the travel months, gold departure days, tappable returns, a plane between the picks */
.dcal { position:relative }
.dcal-legend { display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--mut); margin-top:6px; font-weight:700 }
.dcal-legend i { display:inline-block; width:12px; height:12px; border-radius:4px; vertical-align:-1px; margin-right:6px }
.dcal-legend .l-out { background:linear-gradient(135deg,#fde68a,#f59e0b) } .dcal-legend .l-ret { background:var(--sky) } .dcal-legend .l-sel { background:transparent; outline:2px solid var(--txt); outline-offset:-1px }
.dcal-months { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px; margin-top:14px; max-width:760px }
.dcal-m { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:14px 14px 12px; box-shadow:var(--shadow); animation:rise .6s cubic-bezier(.2,.8,.2,1) both } .dcal-m:nth-child(2) { animation-delay:.1s }
.dcal-m h3 { margin:0 0 8px; font-size:17px; font-weight:900; text-align:center }
.dcal-w, .dcal-g { display:grid; grid-template-columns:repeat(7,1fr); gap:5px }
.dcal-w span { font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); text-align:center; padding:2px 0 6px; font-weight:800 }
.cd { aspect-ratio:1; border-radius:10px; border:1px solid transparent; background:var(--pill); color:var(--txt); font:inherit; font-weight:700; font-size:14px; cursor:pointer; transition:transform .18s, box-shadow .18s, background .18s, border-color .18s; position:relative; padding:0 }
.cd:hover:not(:disabled):not(.blank) { transform:scale(1.1); border-color:rgba(245,158,11,.55); z-index:1 }
.cd:disabled { opacity:.22; cursor:default } .cd.blank { background:transparent; border:0; cursor:default }
.cd.today::after { content:""; position:absolute; left:50%; bottom:4px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--gold) }
.cd.out { background:linear-gradient(135deg,#fde68a,#f59e0b); color:#000; animation:beat 2.2s ease-in-out infinite }
@keyframes beat { 0%,100% { box-shadow:0 0 0 0 rgba(245,158,11,.6) } 50% { box-shadow:0 0 0 7px rgba(245,158,11,0) } }
.cd.ret { border-color:rgba(56,189,248,.45) }
.cd.ret-on { background:var(--sky); color:#03131c; animation:beat2 1.3s ease-in-out infinite }
@keyframes beat2 { 0%,100% { box-shadow:0 0 0 0 rgba(56,189,248,.65) } 50% { box-shadow:0 0 0 7px rgba(56,189,248,0) } }
.cd.sel { outline:3px solid var(--txt); outline-offset:1px; transform:scale(1.12); z-index:1 } .cd.range { background:rgba(245,158,11,.2) }
.dcal-foot { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:14px } .dcal-pick { font-weight:800; color:var(--gold-l); font-size:15px }
.dcal-plane { position:absolute; font-size:28px; line-height:1; pointer-events:none; z-index:3; margin:-14px 0 0 -14px; transition:transform 1.1s cubic-bezier(.4,0,.2,1); filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)) }
@media (max-width:600px) { .cd { font-size:13px; border-radius:8px } .dcal-m { padding:10px 8px 8px } }
@media (max-width:600px) { .dpdates .dchips { display:grid; grid-template-columns:1fr 1fr; width:100% } .dpdates .dchip { padding:8px 10px } .dpdates .dchip b { font-size:13px } }
/* compact calendar: months beside the pick panel, cells the size of a chip, trip switch in the heading */
.dcal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap } .dcal-head h2 { margin:0 }
.dcal-trip { display:flex; background:var(--pill); border:1px solid var(--pill-b); border-radius:999px; padding:3px }
.dcal-trip button { border:0; background:transparent; color:var(--mut); font:inherit; font-weight:800; font-size:13px; padding:7px 14px; border-radius:999px; cursor:pointer } .dcal-trip button.on { background:var(--gold); color:#000 }
.dcal .lead { margin:8px 0 12px; font-size:14px }
.dcal-body { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:16px; align-items:start }
.dcal-months { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin-top:0; max-width:none }
.dcal-m { padding:10px 10px 8px; border-radius:14px } .dcal-m h3 { font-size:14px; margin-bottom:6px }
.dcal-w, .dcal-g { gap:3px } .dcal-w span { font-size:9.5px; padding:0 0 4px }
.cd { font-size:12.5px; border-radius:7px } .cd.sel { outline-width:2px; transform:scale(1.08) }
.cd[data-price]::after { content:attr(data-price); position:absolute; left:0; right:0; bottom:1px; font-size:8px; font-weight:900; letter-spacing:-.02em; line-height:1; opacity:.9 }
.cd.ret-on { padding-bottom:8px }
.dcal-side { display:flex; flex-direction:column; gap:10px }
.dcal-side .dcal-legend { margin:0; gap:10px; font-size:11.5px }
.dcal-pickbox { background:var(--card); border:1px solid rgba(245,158,11,.4); border-radius:14px; padding:12px 14px; box-shadow:var(--shadow), 0 0 22px rgba(245,158,11,.12); display:flex; flex-direction:column; gap:6px }
.dcal-pickbox small { font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-l); font-weight:800 }
.dcal-pickbox b { font-size:15px; line-height:1.3 } .dcal-pickbox span { font-size:12.5px; color:var(--mut); line-height:1.45 }
.dcal-pickbox .btn { margin-top:4px; width:100%; text-align:center } .dcal-pickbox .btn:disabled { opacity:.45; cursor:default; box-shadow:none }
.dcal-side .dpdates { margin-top:0; gap:6px } .dcal-side .dpdates > span { font-size:11.5px; width:100% } .dcal-side .dpdates .dchips { gap:6px } .dcal-side .dchip { padding:6px 9px } .dcal-side .dchip b { font-size:12.5px } .dcal-side .dchip small { font-size:9.5px }
.dcal-foot { display:none }
@media (max-width:860px) { .dcal-body { grid-template-columns:1fr } .dcal-months { grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) } }
@media (max-width:600px) { .dcal-side .dpdates .dchips { display:grid; grid-template-columns:1fr 1fr; width:100% } }
.dcal-months { grid-template-columns:repeat(auto-fit,300px); justify-content:start }
@media (max-width:860px) { .dcal-months { grid-template-columns:repeat(auto-fit,minmax(230px,300px)); justify-content:center } }
.dcal-body { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start } .dcal-months { flex:0 0 auto; display:flex; gap:12px; flex-wrap:wrap } .dcal-m { width:300px; max-width:100% } .dcal-side { flex:1 1 280px; max-width:380px }
@media (max-width:600px) { .dcal-months { justify-content:center; width:100% } }
/* price colours on the calendar, as fare sites do it: green at the deal price, orange typical, red high */
.cd.p-low { background:#15803d; color:#fff } .cd.p-typ { background:#b45309; color:#fff } .cd.p-high { background:#9f1239; color:#fff }
.cd.out { background:var(--pill); color:var(--txt); box-shadow:inset 0 0 0 2px var(--gold); animation:none }
.cd.out.p-low { background:#15803d } .cd.out.p-typ { background:#b45309 } .cd.out.p-high { background:#9f1239 }
.cd.ret-on { background:var(--sky); color:#03131c } .cd.ret-on.p-low { background:#15803d; color:#fff } .cd.ret-on.p-typ { background:#b45309; color:#fff } .cd.ret-on.p-high { background:#9f1239; color:#fff }
.cd[data-price] { padding-bottom:9px } .cd[data-price]::after { color:#fff; opacity:.95 }
.dcal-legend .l-low { background:#15803d } .dcal-legend .l-typ { background:#b45309 } .dcal-legend .l-high { background:#9f1239 } .dcal-legend .l-out { background:transparent; box-shadow:inset 0 0 0 2px var(--gold) }
/* ---- the date picker, final form: one card, a month pager on the left, the pick and the source's pairs on the right ---- */
.dcal-card { background:var(--card); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); padding:20px 22px 22px }
.dcal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px }
.dcal-head h2 { margin:0 0 6px } .dcal-head p { margin:0; color:var(--mut); font-size:13.5px; line-height:1.5; max-width:620px }
.dcal-body { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; align-items:start }
.dcal-left { min-width:0 }
.dcal-nav { display:flex; align-items:center; justify-content:space-between; margin:0 0 10px }
.dcal-nav button { width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--pill); color:var(--txt); font-size:20px; line-height:1; cursor:pointer; font-family:inherit } .dcal-nav button:disabled { opacity:.3; cursor:default }
.dcal-range { font-weight:900; font-size:15px; letter-spacing:.01em }
.dcal-strip { overflow:hidden } .dcal-track { display:flex; gap:14px }
.dcal-m { flex:1 1 0; min-width:0; width:auto; max-width:none; background:var(--bg2); border:1px solid var(--line2); border-radius:16px; padding:12px 12px 10px; box-shadow:none; animation:none }
.dcal-m.off { display:none } .dcal-m h3 { font-size:14px; font-weight:800; margin:0 0 8px; text-align:center; color:var(--txt) }
.dcal-w, .dcal-g { display:grid; grid-template-columns:repeat(7,1fr); gap:4px }
.dcal-w span { font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); text-align:center; padding:0 0 4px; font-weight:800 }
.cd { aspect-ratio:auto; height:42px; border-radius:9px; border:1px solid transparent; background:var(--pill); color:var(--txt); font:inherit; cursor:pointer; padding:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; transition:transform .15s, box-shadow .15s, background .15s; position:relative; outline:0 }
.cd .n { font-size:13px; font-weight:800; line-height:1 } .cd .p { font-size:8.5px; font-weight:800; line-height:1; letter-spacing:-.02em; min-height:8.5px; opacity:.95 }
.cd:hover:not(:disabled):not(.blank) { transform:scale(1.06); border-color:rgba(245,158,11,.5); z-index:1 }
.cd:disabled { opacity:.22; cursor:default } .cd.blank { background:transparent; border:0; cursor:default; height:42px }
.cd.today::after { content:""; position:absolute; top:4px; right:5px; width:4px; height:4px; border-radius:50%; background:var(--gold) }
.cd.out { background:var(--pill); box-shadow:inset 0 0 0 2px var(--gold); animation:none; padding-bottom:0 }
.cd.ret { border-color:rgba(56,189,248,.35) }
.cd.p-low, .cd.out.p-low, .cd.ret-on.p-low { background:#15803d; color:#fff } .cd.p-typ, .cd.out.p-typ, .cd.ret-on.p-typ { background:#b45309; color:#fff } .cd.p-high, .cd.out.p-high, .cd.ret-on.p-high { background:#9f1239; color:#fff }
.cd.ret-on { background:var(--sky); color:#03131c; animation:none; padding-bottom:0 }
.cd.sel { box-shadow:inset 0 0 0 2px var(--txt), 0 0 0 3px rgba(248,250,252,.25); transform:scale(1.06); z-index:1 } .cd.out.sel { box-shadow:inset 0 0 0 2px var(--txt), 0 0 0 3px var(--gold) }
.cd.range { background:rgba(245,158,11,.18) }
.cd[data-price] { padding-bottom:0 } .cd[data-price]::after { content:none }
.dcal-left .dcal-legend { margin-top:12px; gap:14px; font-size:12px; color:var(--mut); justify-content:center }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; vertical-align:-1px; margin-right:6px } .dot.p-low { background:#15803d } .dot.p-typ { background:#b45309 } .dot.p-high { background:#9f1239 } .dot.ring { background:transparent; box-shadow:inset 0 0 0 2px var(--gold) }
.dcal-side { display:flex; flex-direction:column; gap:14px; max-width:none }
.dcal-pickbox { background:var(--bg2); border:1px solid rgba(245,158,11,.4); border-radius:16px; padding:14px 16px; box-shadow:0 0 22px rgba(245,158,11,.1); display:flex; flex-direction:column; gap:6px }
.dcal-pickbox small { font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-l); font-weight:800 }
.dcal-pickbox b { font-size:15px; line-height:1.3 } .dcal-pickbox span { font-size:12.5px; color:var(--mut); line-height:1.45 }
.dcal-pickbox .btn { margin-top:6px; width:100%; text-align:center } .dcal-pickbox .btn:disabled { opacity:.45; cursor:default; box-shadow:none }
.dcal-list { background:var(--bg2); border:1px solid var(--line2); border-radius:16px; padding:10px 8px 8px }
.dcal-list h4 { margin:0 8px 6px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); font-weight:800 }
.dcal-row { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:10px; width:100%; padding:9px 8px; border:0; border-radius:10px; background:transparent; color:var(--txt); font:inherit; text-align:left; cursor:pointer }
.dcal-row:hover { background:var(--pill) } .dcal-row b { font-size:13px; font-weight:800 } .dcal-row small { color:var(--mut); font-size:11.5px } .dcal-row em { font-style:normal; font-weight:900; font-size:13px; color:var(--gold-l) } .dcal-row .dot { margin-right:0 }
.dcal-plane { position:absolute; font-size:26px; line-height:1; pointer-events:none; z-index:3; margin:-13px 0 0 -13px; transition:transform 1.1s cubic-bezier(.4,0,.2,1); filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)) }
.dcal .lead, .dcal-foot, .dcal-side .dpdates, .dcal > .dcal-legend { display:none }
@media (max-width:900px) { .dcal-body { grid-template-columns:1fr } .dcal-side { max-width:none } }
@media (max-width:600px) { .dcal-card { padding:16px 14px 16px } .cd { height:40px } .dcal-head { gap:10px } }
.dcal-body { grid-template-columns:minmax(0,1fr) 330px } .dcal-row { gap:8px; padding:8px 8px } .dcal-row b { white-space:nowrap; font-size:12.5px } .dcal-row small { white-space:nowrap } .dcal-row em { font-size:12.5px }
@media (max-width:900px) { .dcal-body { grid-template-columns:1fr } }
/* the sticky header is ~72px tall: anything the page scrolls to stops under it, not behind it */
html { scroll-padding-top:88px }
.dcal, .fsearch, #fs-results, .dsearch, .dnerd, .dsim, .dmore, .rfacts, .dstory, .dtime { scroll-margin-top:88px }
.dcal-card { position:relative; z-index:0 }
/* the picker, lush: layered gradients and a gold hairline on the card, glassy months, tiles with depth, bigger digits */
.dcal-card { background:radial-gradient(900px 420px at 100% 0%, rgba(245,158,11,.14), transparent 60%), radial-gradient(700px 380px at 0% 100%, rgba(56,189,248,.12), transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--card) 92%, #fff 8%) 0%, var(--card) 45%, var(--bg2) 100%); border:1px solid rgba(245,158,11,.35); box-shadow:var(--shadow), 0 0 0 1px rgba(255,255,255,.03) inset, 0 0 40px rgba(245,158,11,.08) }
.dcal-m { background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), color-mix(in srgb, var(--bg2) 70%, transparent); border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.25); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px) }
[data-theme="light"] .dcal-m { background:linear-gradient(180deg, #fff, #f3f6fb); border-color:rgba(15,23,42,.08); box-shadow:0 8px 24px rgba(15,23,42,.08) }
.dcal-m h3 { font-size:15px; letter-spacing:.01em }
.dcal-w span { color:var(--gold-l); opacity:.8 }
.cd { background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); border:1px solid rgba(255,255,255,.06); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 6px rgba(0,0,0,.25) }
[data-theme="light"] .cd { background:linear-gradient(180deg, #fff, #eef2f8); border-color:rgba(15,23,42,.08); box-shadow:0 1px 3px rgba(15,23,42,.08) }
.cd .n { font-size:15.5px; font-weight:800; letter-spacing:-.01em } .cd .p { font-size:8.5px }
.cd:disabled { background:transparent; box-shadow:none; border-color:transparent; opacity:.3 }
.cd:hover:not(:disabled):not(.blank) { box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 6px 16px rgba(0,0,0,.35), 0 0 0 1px rgba(245,158,11,.4) }
.cd.p-low, .cd.out.p-low, .cd.ret-on.p-low { background:linear-gradient(180deg,#22a04f,#15803d); border-color:rgba(255,255,255,.12) }
.cd.p-typ, .cd.out.p-typ, .cd.ret-on.p-typ { background:linear-gradient(180deg,#d97706,#b45309); border-color:rgba(255,255,255,.12) }
.cd.p-high, .cd.out.p-high, .cd.ret-on.p-high { background:linear-gradient(180deg,#be123c,#9f1239); border-color:rgba(255,255,255,.12) }
.cd.p-low, .cd.p-typ, .cd.p-high { box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 4px 12px rgba(0,0,0,.35) }
.cd.out { box-shadow:inset 0 0 0 2px var(--gold), 0 0 14px rgba(245,158,11,.35), 0 4px 12px rgba(0,0,0,.3) }
.cd.ret-on:not(.p-low):not(.p-typ):not(.p-high) { background:linear-gradient(180deg,#5cc8fb,#38bdf8) }
.cd.sel { box-shadow:inset 0 0 0 2px #fff, 0 0 0 3px rgba(245,158,11,.55), 0 0 18px rgba(245,158,11,.45) }
.cd.range { background:linear-gradient(180deg, rgba(245,158,11,.28), rgba(245,158,11,.14)); border-color:rgba(245,158,11,.25) }
.dcal-nav button { background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border-color:rgba(255,255,255,.1); box-shadow:0 2px 8px rgba(0,0,0,.3) } .dcal-nav button:hover:not(:disabled) { border-color:var(--gold); color:var(--gold-l) }
.dcal-range { font-size:16px; background:linear-gradient(90deg,#fff 0%,var(--gold-l) 50%,#fff 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; background-size:200% auto; animation:shine 4s linear infinite }
[data-theme="light"] .dcal-range { background:linear-gradient(90deg,#0f172a 0%,var(--gold-d) 50%,#0f172a 100%); -webkit-background-clip:text; background-clip:text }
.dcal-pickbox { background:linear-gradient(160deg, rgba(245,158,11,.14), transparent 55%), color-mix(in srgb, var(--bg2) 80%, transparent); border-color:rgba(245,158,11,.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 28px rgba(245,158,11,.14), 0 10px 30px rgba(0,0,0,.25) }
.dcal-list { background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), color-mix(in srgb, var(--bg2) 75%, transparent); border-color:rgba(255,255,255,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.05) }
.dcal-row:hover { background:linear-gradient(90deg, rgba(245,158,11,.12), transparent) }
.dcal-list .dot, .dcal-left .dot { box-shadow:0 0 8px currentColor } .dot.p-low { color:#22c55e } .dot.p-typ { color:#f59e0b } .dot.p-high { color:#f43f5e } .dot.ring { color:var(--gold) }
.dcal-track { justify-content:center } .dcal-m { max-width:560px }
.cd { height:48px } .cd.blank { height:48px } .cd .n { font-size:15px } .cd .p { font-size:10.5px; min-height:10.5px; font-weight:900 }
@media (max-width:600px) { .cd, .cd.blank { height:46px } .cd .p { font-size:9.5px } }
/* the sticky header always paints above the page, Safari included: no backdrop blur on the panels beneath it */
header { z-index:100; isolation:isolate }
.droute, .dprice, .dcal-m { backdrop-filter:none; -webkit-backdrop-filter:none }
.droute, .dprice { background:color-mix(in srgb, var(--card) 94%, transparent) }
.cd.blank { background:transparent; border:0; box-shadow:none }
.dcal-nav { max-width:560px; margin-left:auto; margin-right:auto }
.dcal-list h4 + .dcal-row { margin-top:0 } .dcal-list h4:not(:first-child) { margin-top:10px; padding-top:10px; border-top:1px solid var(--line2) }
.dot.p-none { background:transparent; box-shadow:inset 0 0 0 2px var(--mut); color:transparent } .dcal-row em.hint, .dcal-row .dot.p-none ~ em { color:var(--mut); font-weight:700; font-size:11.5px }

/* the skip link: invisible until a keyboard reaches it, then a gold pill at the top left */
.skip { position:absolute; left:16px; top:-60px; z-index:1000; background:var(--gold); color:#1a1200; font-weight:800; padding:10px 14px; border-radius:999px; text-decoration:none; transition:top .15s }
.skip:focus { top:12px; outline:3px solid #fff }

/* a multi-city post: one chip per departure airport, with a booking link beside each */
.dorigins { margin:22px 0 } .dorigins h2 { margin:0 0 4px } .dorigs { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px }
.dorig { display:inline-flex; align-items:stretch; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--card) }
.dorig .dchip { border:0; border-radius:0; margin:0; display:flex; flex-direction:column; padding:8px 12px } .dorig .dchip small { font-size:11px; letter-spacing:.08em; color:var(--mut) }
.dorig .dgo { display:flex; align-items:center; padding:0 12px; border-left:1px solid var(--line); color:var(--gold-l); text-decoration:none; font-weight:900 } .dorig .dgo:hover { background:rgba(245,158,11,.12) }

/* growth: share buttons and "I booked this" on a deal page, the share button on a card, the wall on the home page */
.dsocial { display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:14px }
.dshare { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px } .dshare b { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); margin-right:4px }
.dshare .sh { display:inline-flex; align-items:center; gap:5px; padding:7px 12px; border-radius:999px; border:1px solid var(--pill-b); background:var(--pill); color:var(--txt); font-weight:800; font-size:12.5px; text-decoration:none; cursor:pointer; font-family:inherit; transition:.15s } .dshare .sh:hover { border-color:var(--gold); transform:translateY(-1px) }
.dbooked { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px } .dbcount { font-size:13px; font-weight:800; color:var(--ok) }
.dbform { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; width:100%; max-width:640px; padding:12px; border-radius:14px; background:var(--card); border:1px solid var(--line) } .dbform input { flex:1 1 140px; min-width:0; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--txt); font-family:inherit; font-size:14px } .dbform small { flex-basis:100%; text-align:center; color:var(--mut); font-size:12px }
.cta { display:flex; gap:8px } .cta .btn.gold { flex:1 } .cta .shc { padding:0 14px; border-radius:12px; font-size:16px; flex:0 0 auto } .cta .shc:hover { border-color:var(--gold) }
.wall { margin:50px 0 10px } .wall .strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); border:1px solid var(--line); border-radius:22px; overflow:hidden; background:var(--card); box-shadow:var(--shadow) }
.wall .st { padding:22px 20px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:2px } .wall .st:last-child { border-right:0 }
.wall .st b { font-size:34px; font-weight:900; letter-spacing:-1px; line-height:1; background:linear-gradient(180deg,#fde68a,#f59e0b); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }
.wall .st span { font-weight:800; font-size:13.5px; margin-top:6px } .wall .st small { color:var(--mut); font-size:12px }
.wlist { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; margin-top:16px } .wlist .empty { grid-column:1/-1 }
.wb { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 6px; padding:12px 14px; border-radius:14px; background:var(--card); border:1px solid var(--line); color:var(--txt); text-decoration:none; font-size:14px; transition:border-color .15s } .wb:hover { border-color:var(--gold-l) } .wb b { font-weight:800 } .wb em { font-style:normal; color:var(--ok); font-weight:800 } .wb small { flex-basis:100%; color:var(--mut); font-size:12px }
.invite { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px } .invite code { flex:1 1 220px; padding:10px 12px; border-radius:10px; background:var(--pill); border:1px solid var(--line); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
@media (max-width:600px) { .wall .strip { grid-template-columns:1fr } .wall .st { border-right:0; border-bottom:1px solid var(--line) } .wall .st:last-child { border-bottom:0 } }
@media (max-width:600px) { .dshare .sh span { display:none } .dshare .sh { padding:8px 11px; font-size:15px } }

/* seat maps behind a priced fare: one small cabin grid per flight */
.fs-seatmap { grid-column:1/-1; width:100%; margin-top:8px; padding:12px 14px; border-radius:14px; background:var(--pill); border:1px solid var(--line); font-size:13px }
.sm-seg + .sm-seg { margin-top:12px; padding-top:12px; border-top:1px solid var(--line) } .sm-head { font-weight:800; margin-bottom:4px } .sm-sum { color:var(--mut); margin-bottom:8px } .sm-sum b { color:var(--txt) }
.sm-grid { display:flex; flex-direction:column; gap:3px; overflow-x:auto; padding-bottom:4px } .sm-row { display:flex; align-items:center; gap:3px } .sm-row i { width:22px; font-style:normal; font-size:10px; color:var(--mut); text-align:right; margin-right:4px; flex:0 0 auto }
.sm-row b, .sm-key b { display:inline-block; width:14px; height:14px; border-radius:4px 4px 2px 2px; flex:0 0 auto } .sm-row s { display:inline-block; width:14px; height:14px; flex:0 0 auto } .sm-row u { display:inline-block; width:12px; height:14px; flex:0 0 auto }
.sm-row b.free, .sm-key b.free { background:var(--ok) } .sm-row b.paid, .sm-key b.paid { background:var(--gold) } .sm-row b.taken, .sm-key b.taken { background:var(--line); opacity:.7 }
.sm-key { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px; font-size:12px; color:var(--mut) } .sm-key b { margin-left:6px; margin-right:2px } .sm-note { color:var(--mut) }

/* report cards: a long value in a tile, the airline facts */
.rt b.sm { font-size:17px; line-height:1.25 } .rtiles.facts .rt b.sm { font-size:16px } .rtiles.facts .rt small { margin-bottom:4px }

/* lanes: the regional and premium-cabin channels */
.lanes { margin:22px auto 10px; max-width:920px; text-align:center } .lanes h3 { font-size:20px; margin-bottom:4px } .lanes-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin-top:14px } .lane { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px } .lane b { display:block; margin-bottom:8px } .lane .row { display:flex; gap:6px; justify-content:center; flex-wrap:wrap } .lane .btn { padding:8px 12px; font-size:12.5px }

/* book now or wait */
.fs-advice { display:flex; flex-direction:column; gap:3px; padding:12px 16px; border-radius:14px; border:1px solid var(--line); background:var(--card); font-size:13px; color:var(--mut); margin-top:8px } .fs-advice b { font-size:15px; color:var(--txt) } .fs-advice.book { border-color:rgba(34,197,94,.5); background:rgba(34,197,94,.08) } .fs-advice.book b { color:var(--ok) } .fs-advice.wait { border-color:rgba(245,158,11,.5); background:rgba(245,158,11,.08) } .fs-advice.wait b { color:var(--gold-l) } .fs-advice.watch { border-color:rgba(56,189,248,.5) } .fs-advice a, .fs-advice .lnk { color:var(--gold-l); font-weight:800; background:none; border:0; padding:0; font:inherit; cursor:pointer }

/* pricing trimmings: the trial line and the first-year price */
.tier .fy { font-size:13px; color:var(--txt); margin-top:4px } .tier .fy b { color:var(--gold-l) } .tier .trial { display:inline-block; margin-top:8px; font-size:12px; font-weight:800; color:var(--ok); background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.3); border-radius:999px; padding:3px 10px }
.prize { margin:14px auto 0; max-width:720px; text-align:center; font-size:13.5px; color:var(--mut); background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 16px } .prize b { color:var(--txt) }

/* the home-airport pill: the pill plus a small change/forget menu */
.homegrp { display:inline-flex; align-items:center; gap:2px; flex:0 0 auto } .homegrp .pill.mini { padding:9px 10px; font-size:12px; border-radius:999px } .homegrp .dd { position:relative } .homegrp .ddm .h { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); padding:6px 10px 2px }

/* Premium & Luxury: gold on midnight, with the bling: rotating gold frames, a light sweep, gold dust, jewelled badges */
.luxe { position:relative; overflow:hidden; padding:30px 0 14px; background:
  radial-gradient(900px 380px at 12% -10%, rgba(245,158,11,.22), transparent 60%),
  radial-gradient(700px 320px at 92% 110%, rgba(167,139,250,.16), transparent 60%),
  linear-gradient(180deg, #070a16, #0a0f22 50%, #070a16); border-top:1px solid rgba(245,158,11,.35); border-bottom:1px solid rgba(245,158,11,.35) }
.luxe::before, .luxe::after { content:""; position:absolute; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(253,230,138,.9), transparent) } .luxe::before { top:0 } .luxe::after { bottom:0 }
.luxe .dust { position:absolute; inset:0; pointer-events:none; background-image:
  radial-gradient(2px 2px at 8% 30%, rgba(253,230,138,.9), transparent 60%), radial-gradient(1.5px 1.5px at 22% 70%, rgba(253,230,138,.7), transparent 60%), radial-gradient(2px 2px at 37% 18%, rgba(253,230,138,.8), transparent 60%),
  radial-gradient(1.5px 1.5px at 51% 82%, rgba(253,230,138,.6), transparent 60%), radial-gradient(2px 2px at 64% 28%, rgba(253,230,138,.8), transparent 60%), radial-gradient(1.5px 1.5px at 78% 64%, rgba(253,230,138,.7), transparent 60%),
  radial-gradient(2px 2px at 90% 22%, rgba(253,230,138,.9), transparent 60%), radial-gradient(1.5px 1.5px at 95% 78%, rgba(253,230,138,.6), transparent 60%); animation:luxdust 9s ease-in-out infinite alternate; opacity:.8 }
@keyframes luxdust { from { transform:translateY(0); opacity:.55 } to { transform:translateY(-10px); opacity:.95 } }
.luxe .wrap { position:relative } .luxe .shead { align-items:flex-start }
.luxe .eyebrow.gold { background:linear-gradient(135deg,#fde68a,#f59e0b 55%,#d97706); color:#1a0f00; border:0; letter-spacing:.14em; box-shadow:0 0 0 1px rgba(253,230,138,.5), 0 8px 30px rgba(245,158,11,.35) }
.luxe h2 { font-size:clamp(26px,3.2vw,40px); letter-spacing:-.6px; background:linear-gradient(90deg,#fff7d6 0%,#fde68a 25%,#f59e0b 55%,#fb7185 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 2px 18px rgba(245,158,11,.25)) } .luxe h2 span { font-weight:600 }
.luxe .lead { max-width:760px; margin-top:4px; color:rgba(226,232,240,.78) }
.luxe .carnav .btn { border-color:rgba(245,158,11,.5); color:#fde68a; background:rgba(245,158,11,.08) } .luxe .carnav .btn:hover { border-color:#fde68a; background:rgba(245,158,11,.18) }
.luxrule { display:flex; align-items:center; gap:12px; margin:14px 0 4px } .luxrule i { flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(253,230,138,.7), transparent) } .luxrule b { color:#fde68a; font-size:14px; text-shadow:0 0 12px rgba(253,230,138,.9) }
.luxrow { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:16px 6px 22px; scrollbar-width:none } .luxrow::-webkit-scrollbar { display:none }
/* big gold arrows on both sides of a row (the Hot row and the Premium row), always visible; the row wraps around at either end */
.luxstage { position:relative }
.luxarrow { position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:54px; height:54px; border-radius:50%; border:2px solid #fff7d6; background:linear-gradient(135deg,#fde68a,#f59e0b 55%,#d97706); color:#1a0f00; font-size:34px; font-weight:900; line-height:1; padding:0 0 4px; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 12px 30px rgba(0,0,0,.6), 0 0 28px rgba(245,158,11,.6); transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease; animation:luxpulse 2.6s ease-in-out infinite }
.luxarrow.prev { left:0 } .luxarrow.next { right:0 }
.luxstage > .carousel, .luxstage > .luxrow { padding-left:60px; padding-right:60px; scroll-padding:0 60px }  /* the cards live between the arrows, never under them */
.luxarrow:hover { transform:translateY(-50%) scale(1.12); box-shadow:0 14px 34px rgba(0,0,0,.65), 0 0 44px rgba(253,230,138,.8); animation:none } .luxarrow:active { transform:translateY(-50%) scale(1.02) }
@keyframes luxpulse { 0%, 100% { box-shadow:0 12px 30px rgba(0,0,0,.6), 0 0 22px rgba(245,158,11,.5) } 50% { box-shadow:0 12px 30px rgba(0,0,0,.6), 0 0 40px rgba(253,230,138,.85) } }
@media (max-width:600px) { .luxarrow { width:38px; height:38px; font-size:24px; padding-bottom:3px } .luxarrow.prev { left:-2px } .luxarrow.next { right:-2px } .luxstage > .carousel, .luxstage > .luxrow { padding-left:36px; padding-right:36px; scroll-padding:0 36px } .luxstage .luxc, .luxstage .hot { flex:0 0 100% } .luxstage .cta .btn.gold { padding:12px 8px; font-size:13.5px } }
@media (prefers-reduced-motion:reduce) { .luxarrow { animation:none } }
/* Premium & Luxury cards: the economy card, unchanged in layout and labels, inside a spinning gold frame with a sheen */
.luxc { flex:0 0 calc((100% - 36px) / 3); min-width:290px; scroll-snap-align:start; position:relative; display:flex; border-radius:24px; overflow:hidden; isolation:isolate; box-shadow:0 20px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(245,158,11,.25); transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease }
.luxc:hover { transform:translateY(-5px); box-shadow:0 30px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(253,230,138,.6), 0 0 48px rgba(245,158,11,.28) }
.luxc .frame { position:absolute; inset:0; border-radius:24px; padding:2px; background:conic-gradient(from var(--a,0deg), #fde68a, #f59e0b, #7c2d12 30%, #fde68a 50%, #f59e0b 70%, #fff7d6 85%, #fde68a); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; z-index:3; pointer-events:none; animation:luxspin 9s linear infinite }
.luxc .sheen { position:absolute; top:-40%; bottom:-40%; left:-70%; width:50%; background:linear-gradient(105deg, transparent 35%, rgba(255,247,214,.22) 50%, transparent 65%); transform:skewX(-18deg); z-index:2; animation:luxsheen 7s ease-in-out infinite; pointer-events:none } .luxc:nth-child(2) .sheen { animation-delay:2.3s } .luxc:nth-child(3) .sheen { animation-delay:4.6s } .luxc:hover .sheen { animation-duration:1.4s }
.luxc .card { flex:1; width:100%; min-width:0; border-radius:24px; border-color:transparent; background:linear-gradient(180deg,#141c36,#0b1020); box-shadow:none; animation:none } .luxc .card:hover { transform:none; border-color:transparent; background:linear-gradient(180deg,#182143,#0d1226) }
.luxc .card .photo img { filter:saturate(1.15) contrast(1.05) }
.luxc .card .b.lux { box-shadow:0 0 14px rgba(245,158,11,.45) }
.luxfoot { display:flex; justify-content:center; gap:10px; align-items:center } .luxfoot a { color:#fde68a } .luxfoot span { color:rgba(253,230,138,.6) }
@media (max-width:900px) { .luxc { flex:0 0 calc((100% - 18px) / 2) } } @media (max-width:600px) { .luxc { flex:0 0 88%; min-width:0 } .luxe .shead { flex-direction:column; gap:10px } }
@media (prefers-reduced-motion:reduce) { .luxc .frame, .luxc .sheen, .luxe .dust { animation:none } }
@property --a { syntax:"<angle>"; initial-value:0deg; inherits:false } @keyframes luxspin { to { --a:360deg } }
@keyframes luxsheen { 0%, 60% { left:-70% } 100% { left:140% } }

/* How it works: three numbered steps on one line, the numbers from the record, no paragraphs */
.how { margin:54px 0; padding:38px 28px 34px; border:1px solid var(--line); border-radius:24px; background:var(--card); box-shadow:var(--shadow); position:relative; overflow:hidden }
.how::before { content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 50% 0%, rgba(245,158,11,.12), transparent 70%); pointer-events:none }
.how .shead { position:relative; align-items:flex-end; margin-bottom:26px } .how .shead h2 { margin:6px 0 0; font-size:clamp(24px,3vw,34px); letter-spacing:-.5px } .how .lead { margin:0; text-align:right; max-width:320px }
.how .steps { position:relative; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:none }
.how .steps::before { content:""; position:absolute; left:12%; right:12%; top:27px; height:2px; background:linear-gradient(90deg, transparent, rgba(245,158,11,.55) 20%, rgba(245,158,11,.55) 80%, transparent) }
.how .steps li { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:0 8px }
.how .n { width:54px; height:54px; border-radius:50%; display:grid; place-items:center; font-size:22px; font-weight:900; color:#1a0f00; background:linear-gradient(135deg,#fde68a,#f59e0b 55%,#d97706); border:3px solid var(--card); box-shadow:0 0 0 1px rgba(253,230,138,.5), 0 10px 26px rgba(245,158,11,.35) }
.how h3 { font-size:19px; font-weight:900; margin:0 0 6px; letter-spacing:-.2px }
.how p { margin:0; color:var(--mut); font-size:14.5px; line-height:1.55; max-width:340px } .how p b { color:var(--text); font-weight:800 } .how p em { font-style:normal; color:var(--red); font-weight:800 } .how p a { color:var(--gold-l); font-weight:700 }
@media (max-width:800px) { .how { padding:28px 18px 24px } .how .shead { flex-direction:column; align-items:flex-start; gap:6px } .how .lead { text-align:left; max-width:none } .how .steps { grid-template-columns:1fr; gap:22px } .how .steps::before { display:none } .how .steps li { flex-direction:row; text-align:left; align-items:flex-start } .how .n { flex:0 0 44px; width:44px; height:44px; font-size:18px } }

/* hero: two balanced lines, a one-line promise and three buttons; the search form has its own section below the rows */
.hero { padding:44px 20px 10px } .hero h1 { white-space:normal; max-width:1040px; text-wrap:balance } .hero h1 span { display:block }
.hero .lead { font-size:clamp(15px,1.4vw,18px); max-width:680px; margin:16px auto 0 }
.hero .ctas { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:22px 0 6px } .hero .ctas .btn { padding:12px 20px; border-radius:12px; font-size:14px }
.fsec { padding:8px 0 4px } .fsec .shead { align-items:flex-end; margin-bottom:0 } .fsec .shead h2 { margin:6px 0 0; font-size:clamp(22px,2.6vw,30px) } .fsec .lead { margin:0; text-align:right; max-width:420px }
.fsec .fsearch { margin:14px auto 10px; max-width:none } .fsec .fs-results { max-width:none }
@media (max-width:800px) { .fsec .shead { flex-direction:column; align-items:flex-start; gap:6px } .fsec .lead { text-align:left; max-width:none } .hero .ctas .btn { flex:1 1 40%; justify-content:center } }
.hero .ctas .btn { white-space:nowrap }
@media (max-width:600px) { .hero .ctas .btn { flex:1 1 auto; padding:12px 14px; font-size:13.5px } }