/* ==========================================================================
   Flight search - design system
   Mobile-first. Desktop gets a two-month calendar and inline popovers;
   phones get bottom sheets and single-month calendars.
   ========================================================================== */

:root{
  /* Bumped whenever app.css changes. The page compares this against the value it
     expects and warns if the server is serving an older stylesheet - a stale CSS
     upload is otherwise invisible except as a broken-looking site. Must match
     the data-build on <html> in index.html. */
  --build:17;

  --brand:#1266f1;
  --brand-600:#0b57d0;
  --brand-700:#0a4bb5;
  --brand-50:#eef4ff;
  --brand-100:#dbe7ff;

  --ink:#0f172a;
  --ink-2:#334155;
  --muted:#64748b;
  --muted-2:#94a3b8;

  --line:#e2e8f0;
  --line-2:#eff3f9;
  --bg:#f5f7fb;
  --panel:#fff;

  --dark:#0b1526;
  --dark-2:#132138;

  /* Skyscanner marks stop counts and next-day arrivals in pink. It reads as a
     caution rather than an error, which is right for a two-stop red-eye. */
  --pink:#d6336c;

  --ok:#0f9d58;
  --ok-bg:#e7f6ee;
  --warn:#b45309;
  --warn-bg:#fef3c7;
  --danger:#b91c1c;
  --danger-bg:#fef2f2;

  --r-lg:20px;
  --r:14px;
  --r-sm:10px;

  --sh-1:0 1px 2px rgba(15,23,42,.06);
  --sh-2:0 1px 2px rgba(15,23,42,.04), 0 10px 30px -12px rgba(15,23,42,.20);
  --sh-3:0 24px 60px -18px rgba(15,23,42,.32);
  --ring:0 0 0 3px rgba(18,102,241,.20);
  --ring-err:0 0 0 3px rgba(185,28,28,.16);

  --ease:cubic-bezier(.2,.8,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  /* Nothing on this page is wider than the screen, so any sideways movement is
     accidental - the page being dragged/panned by a stray overflow. overflow-x
     :clip stops that WITHOUT turning the element into a scroll container, which
     is what would break the sticky header (overflow-x:hidden does exactly that). */
  overflow-x:clip;
  /* No rubber-banding the page itself, and no pull-to-refresh mid-search. */
  overscroll-behavior-x:none;
  overscroll-behavior-y:none;
}
body{
  background:var(--bg);
  color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{max-width:100%}
button{font:inherit;color:inherit}
a{color:var(--brand)}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------------------------------------------------------------- top bar */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(11,21,38,.92);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar .wrap{display:flex;align-items:center;gap:20px;height:80px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700;letter-spacing:-.01em}
.brand .mark{
  width:30px;height:30px;border-radius:9px;flex:0 0 auto;
  background:linear-gradient(140deg,var(--brand),#4f9dff);
  display:grid;place-items:center;color:#fff;
  box-shadow:0 4px 14px -4px rgba(18,102,241,.8);
}
.brand .mark svg{width:17px;height:17px;display:block}
.topbar .tag{color:#8fa3c0;font-size:12.5px;font-weight:500}
@media (max-width:640px){ .topbar .tag{display:none} }

/* ------------------------------------------------------------------- hero */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 400px at 12% -10%, rgba(18,102,241,.42), transparent 60%),
    radial-gradient(700px 340px at 88% 0%, rgba(79,157,255,.26), transparent 62%),
    linear-gradient(180deg,var(--dark) 0%, var(--dark-2) 100%);
  padding:44px 0 96px;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 70%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 70%);
}
.hero .wrap{position:relative;z-index:1;text-align:center}
.hero h1{
  margin:0;color:#fff;font-size:clamp(26px,4.6vw,42px);line-height:1.12;
  letter-spacing:-.03em;font-weight:800;
}
.hero h1 em{font-style:normal;color:#7fb2ff}
.hero p{
  margin:12px auto 0;max-width:560px;color:#a9bcd8;font-size:clamp(14px,1.6vw,16.5px);
}

/* ----------------------------------------------------------- search card */
.searchcard{
  /* Deliberately NOT given a z-index: that would create a stacking context and
     trap the date/traveller popovers underneath the page-level backdrop, no
     matter how high their own z-index is. Sitting after the hero in the DOM is
     what keeps the card on top of it. */
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-3);
  padding:16px;
  margin-top:-64px;
}
.searchcard.invalid{border-color:#f3c6c6}

/* trip type */
.seg{
  display:inline-flex;gap:2px;padding:4px;border-radius:999px;
  background:var(--line-2);border:1px solid var(--line);
  margin-bottom:14px;position:relative;
}
.seg button{
  border:0;background:transparent;cursor:pointer;
  padding:8px 16px;border-radius:999px;font-weight:600;font-size:13.5px;
  color:var(--muted);display:inline-flex;align-items:center;gap:7px;
  transition:background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
  white-space:nowrap;
}
.seg button:hover{color:var(--ink-2)}
.seg button[aria-selected="true"]{
  background:#fff;color:var(--brand);box-shadow:var(--sh-1);
}
.seg button svg{width:15px;height:15px;flex:0 0 auto}

/* Collapsed state: once results are on screen the form folds down to a summary
   bar, which is what keeps the page usable on a phone. */
.summary{display:none}
.searchcard.collapsed .seg,
.searchcard.collapsed .fgrid,
.searchcard.collapsed .gorow{display:none}
.searchcard.collapsed .summary{display:block}

.sum-main{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  border:0;background:var(--line-2);border-radius:var(--r);padding:10px 12px;cursor:pointer;
  transition:background .16s;
}
.sum-main:hover{background:#e9eef7}
.sum-ico{
  width:34px;height:34px;flex:0 0 34px;border-radius:9px;background:var(--brand);
  color:#fff;display:grid;place-items:center;
}
.sum-ico svg{width:17px;height:17px}
.sum-txt{flex:1;min-width:0}
.sum-route{
  display:block;font-weight:700;font-size:14.5px;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sum-sub{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.sum-chev{width:16px;height:16px;flex:0 0 16px;color:var(--muted)}
.sum-dates{display:flex;gap:8px;margin-top:10px}
.nudge{
  flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;
  gap:4px;background:var(--line-2);border-radius:11px;padding:3px;
}
.nudge button{
  width:30px;height:30px;flex:0 0 30px;border:0;border-radius:8px;background:#fff;
  color:var(--ink-2);cursor:pointer;display:grid;place-items:center;
  transition:color .16s,background .16s;
}
.nudge button:hover:not(:disabled){color:var(--brand);background:var(--brand-50)}
.nudge button:disabled{opacity:.35;cursor:not-allowed}
.nudge button svg{width:15px;height:15px}
.nudge span{
  font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:center;flex:1;
}

/* grid of fields */
.fgrid{display:grid;gap:10px;grid-template-columns:repeat(12,1fr)}
.a3{grid-column:span 3}.a2{grid-column:span 2}
.a4{grid-column:span 4}.a6{grid-column:span 6}.a12{grid-column:span 12}

.field{position:relative;min-width:0}
.field > label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin:0 0 5px 3px;
}
.ctrl{
  width:100%;min-height:52px;
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  cursor:text;text-align:left;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.ctrl:hover{border-color:#cbd5e1}
.ctrl:focus-within,.ctrl.is-open{border-color:var(--brand);box-shadow:var(--ring)}
.ctrl input{
  border:0;outline:0;background:transparent;padding:0;margin:0;width:100%;
  font:inherit;font-weight:600;color:var(--ink);min-width:0;
}
.ctrl input::placeholder{font-weight:500;color:var(--muted-2)}
.ctrl .ico{width:17px;height:17px;flex:0 0 auto;color:var(--muted-2)}
.ctrl.is-filled .ico{color:var(--brand)}
.ctrl .txt{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.3}
.ctrl .big{
  display:block;font-weight:700;font-size:15px;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ctrl .small{
  display:block;font-size:12px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ctrl .small:empty{display:none}
.ctrl .ph{display:block;font-weight:500;color:var(--muted-2);font-size:15px}
button.ctrl{cursor:pointer}
button.ctrl:disabled{cursor:not-allowed;background:#f8fafc;border-style:dashed}
button.ctrl:disabled .big,button.ctrl:disabled .ph{color:var(--muted-2)}

/* swap */
.swapwrap{position:relative}
.swap{
  position:absolute;right:-17px;top:50%;transform:translateY(-50%);
  z-index:5;width:34px;height:34px;border-radius:50%;
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);
  display:grid;place-items:center;cursor:pointer;color:var(--ink-2);
  transition:transform .3s var(--ease), color .16s, border-color .16s;
}
.swap:hover{color:var(--brand);border-color:var(--brand-100)}
.swap:active{transform:translateY(-50%) rotate(180deg)}
.swap svg{width:16px;height:16px}

/* autocomplete */
.ac{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-3);max-height:320px;overflow:auto;display:none;
  padding:6px;
}
.ac.open{display:block}
.ac button{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  border:0;background:#fff;padding:10px 11px;border-radius:var(--r-sm);
  cursor:pointer;
}
.ac button:hover,.ac button.hi{background:var(--brand-50)}
.ac .pin{width:15px;height:15px;color:var(--muted-2);flex:0 0 auto}
.ac .body{min-width:0;flex:1;overflow:hidden}
.ac .code{
  font-weight:700;font-size:13px;color:var(--brand);
  background:var(--brand-50);border-radius:6px;padding:2px 7px;flex:0 0 auto;
}
/* display:block is load-bearing: overflow/text-overflow do NOTHING on an inline
   element, so as inline <span>s these rendered at full text width and spilled
   out past the right edge of the screen on a phone. Block also stacks the city
   over the airport name deliberately instead of relying on a lucky wrap. */
.ac .where{display:block;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac .sub{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac .none{padding:14px 12px;color:var(--muted);font-size:13.5px;text-align:center}

/* search button */
.gorow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.primary{
  border:0;cursor:pointer;
  background:linear-gradient(180deg,var(--brand),var(--brand-600));
  color:#fff;font-weight:700;font-size:16px;letter-spacing:-.01em;
  padding:15px 30px;border-radius:var(--r);
  display:inline-flex;align-items:center;gap:9px;
  box-shadow:0 8px 22px -10px rgba(18,102,241,.9);
  transition:transform .14s var(--ease), box-shadow .2s var(--ease), filter .2s;
  margin-left:auto;
}
.primary:hover{filter:brightness(1.06);box-shadow:0 12px 28px -10px rgba(18,102,241,.95)}
.primary:active{transform:translateY(1px)}
.primary:disabled{opacity:.65;cursor:progress;box-shadow:none}
.primary svg{width:18px;height:18px}
.hint{color:var(--muted);font-size:12.5px}

/* direct-only pill */
.pill{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:9px 15px 9px 11px;font-size:13.5px;font-weight:600;color:var(--ink-2);
  transition:border-color .16s,background .16s,color .16s;
  user-select:none;
}
.pill:hover{border-color:#cbd5e1}
.pill input{position:absolute;opacity:0;pointer-events:none}
.pill .box{
  width:18px;height:18px;border-radius:5px;border:1.5px solid #cbd5e1;flex:0 0 auto;
  display:grid;place-items:center;background:#fff;transition:background .16s,border-color .16s;
}
.pill .box svg{width:12px;height:12px;color:#fff;opacity:0;transition:opacity .16s}
.pill input:checked + .box{background:var(--brand);border-color:var(--brand)}
.pill input:checked + .box svg{opacity:1}
.pill input:focus-visible + .box{box-shadow:var(--ring)}
.pill:has(input:checked){background:var(--brand-50);border-color:var(--brand-100);color:var(--brand-700)}

/* The filters trigger is a button, not a checkbox label, but it sits in the same
   row and should look like its neighbour. */
.pillbtn{gap:8px;padding:9px 14px;font-family:inherit}
.pillbtn svg{width:15px;height:15px;color:var(--ink-2);flex:0 0 auto}
.pillbtn[aria-expanded="true"]{border-color:var(--brand-100);background:var(--brand-50);color:var(--brand-700)}
.pillbtn[aria-expanded="true"] svg{color:var(--brand)}
.fcount{
  display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--brand);color:#fff;font-size:11.5px;font-weight:800;
}
.fcount[hidden]{display:none}

/* ---------------------------------------------------------- filter panel */
.fpop{width:344px}
.fpop .sheet-head{display:none}
.frow{padding:11px 0;border-bottom:1px solid var(--line-2)}
.frow .lbl{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:7px}
.fctl{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;padding:0 11px}
.fctl:focus-within{border-color:var(--brand);box-shadow:var(--ring)}
.fctl .cur{color:var(--muted);font-size:13.5px;font-weight:600;padding-right:4px}
.fctl input,.fctl select{
  flex:1;min-width:0;border:0;background:none;font:inherit;font-size:14px;font-weight:600;
  color:var(--ink);padding:10px 0;outline:none;cursor:pointer;
}
.fctl input{cursor:text}
.fwin{display:flex;align-items:center;gap:9px}
.fwin select{
  flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);padding:9px 10px;cursor:pointer;
}
.fwin .sep{color:var(--muted);font-size:12.5px;font-weight:600}
.fhint{color:var(--muted);font-size:12px;margin-top:6px;line-height:1.4}
.fclear{text-align:center;padding:12px 0 2px;border-top:1px solid var(--line-2)}

/* Applied filters, shown under the results heading so a shared link's filters are
   never invisible to the person who opened it. */
.fchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.fchips[hidden]{display:none}
.fchip{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  border:1px solid var(--brand-100);background:var(--brand-50);color:var(--brand-700);
  border-radius:999px;padding:6px 11px;font-size:12.5px;font-weight:700;font-family:inherit;
}
.fchip:hover{border-color:var(--brand)}
.fchip b{font-size:14px;line-height:1;opacity:.7}
.fchip:hover b{opacity:1}
.fchip.clear{background:#fff;border-color:var(--line);color:var(--ink-2)}
.fchip.clear:hover{border-color:#cbd5e1}

/* ------------------------------------------------- the docked filter column */
/* On a desktop or a tablet the filter panel leaves the search card and becomes a
   column of its own beside the results (see syncFilterDock in index.html). It is
   docked only while there are results to filter, so the home page and the
   searching panel are untouched. On a phone the query never matches and none of
   this applies: the panel keeps its bottom-sheet treatment further down. */
.resmain{min-width:0}
.filtcol{display:none}
html.dockfilters .reslay{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:22px;
  align-items:start;
}
html.dockfilters .filtcol{display:block}
/* position:static and no internal scrolling: the column is part of the page and
   scrolls with it, so nothing is ever trapped behind an inner scrollbar. */
html.dockfilters #filtPop{
  display:block;position:static;width:auto;
  box-shadow:var(--sh-2);
  overflow:visible;
}
/* The Filters button only makes sense for a panel you open and close, so it steps
   aside while the panel is permanently on screen. The Apply button stays - it is
   the only thing that re-runs the search, because filtering costs an API call. */
html.dockfilters #filtBtn{display:none}

/* The Apply button, by contrast, has to stay: while the panel is permanently on
   screen it is the only thing that re-runs the search. Full width at the foot of
   the column, and quiet until there is something waiting to be applied. */
html.dockfilters #filtPop .tp-foot{
  position:static;margin-top:16px;padding:12px 0 0;
  flex-wrap:wrap;justify-content:center;
}
html.dockfilters #filtPop .d-only,
html.dockfilters #filtPop .m-only{display:none}
html.dockfilters #filtPop .dock-only{display:inline}
html.dockfilters #filtPop .tp-foot button.done{width:100%}
html.dockfilters #filtPop .tp-foot button.done:not(.dirty){
  background:#fff;border-color:var(--line);color:var(--muted);
}
/* Says out loud what the button is for, and only while it matters. */
.fp-note{
  flex:1 1 100%;text-align:center;color:var(--pink);font-size:12px;
  font-weight:600;margin-bottom:9px;
}

/* The card lays itself out from the width of the RESULTS COLUMN, not the window.
   Docked, the column is a third narrower than the page, and a card that assumed
   a full-width row had its legs squeezed below what their own text needs - the
   times are white-space:nowrap, so they spilled across the stops line and each
   other. The container only exists while docked, so nothing about the phone or
   the undocked page can be affected by the rules that use it. */
html.dockfilters .resmain{container:rescol / inline-size}

/* And the times keep their own width while docked. min-width:0 lets a flex item
   shrink below its own text, which is fine at page width but not here: the times
   are white-space:nowrap, so a single pixel of squeeze puts the departure time
   over the stops line beside it. The column has room for them to hold their
   width, and the container rules above stack the legs before it runs out. */
html.dockfilters .leg .lt,
html.dockfilters .leg .rt{flex:0 0 auto}

/* --------------------------------------------------------------- calendar */
.dp{position:relative}
.pop{
  position:absolute;top:calc(100% + 8px);z-index:80;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);padding:16px;display:none;
  /* Set per-open by the page so a tall panel scrolls instead of overflowing. */
  overflow:auto;overscroll-behavior:contain;
}
.pop.open{display:block}
/* Flipped above the field when there is not enough room below it, so a tall
   panel can never end up hanging off the bottom of the viewport. */
.pop.up{top:auto;bottom:calc(100% + 8px)}
/* The popovers are direct children of the search card, so they are positioned
   by id rather than by an ancestor class. z-index must stay above the backdrop
   (70), otherwise the dimming layer covers the panel it belongs to. */
#calPop{left:16px;width:min(680px,calc(100vw - 36px))}
#calPop.right{left:auto;right:16px}
#travPop{left:auto;right:16px;width:min(360px,calc(100vw - 36px))}

.dp-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:12px;margin-bottom:10px;border-bottom:1px solid var(--line-2);
}
.dp-sum{font-size:13.5px;color:var(--muted);font-weight:600}
.dp-sum b{color:var(--ink);font-weight:700}
.dp-nav{display:flex;gap:6px}
.dp-nav button{
  width:34px;height:34px;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--ink-2);
  transition:border-color .16s,color .16s,background .16s;
}
.dp-nav button:hover:not(:disabled){border-color:var(--brand);color:var(--brand);background:var(--brand-50)}
.dp-nav button:disabled{opacity:.35;cursor:not-allowed}
.dp-nav svg{width:15px;height:15px}

.months{display:flex;gap:22px}
.month{flex:1;min-width:0}
.month h4{
  margin:0 0 10px;font-size:14px;font-weight:700;text-align:center;letter-spacing:-.01em;
}
.dow{
  display:grid;grid-template-columns:repeat(7,1fr);gap:2px;
  margin-bottom:4px;
}
.dow span{
  text-align:center;font-size:11px;font-weight:700;color:var(--muted-2);
  text-transform:uppercase;letter-spacing:.04em;
}
.grid7{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.day{
  /* A fixed height, not aspect-ratio:1/1 - on a wide two-month panel square
     cells grow with the column width and make the whole calendar needlessly
     tall, which is what forced a scrollbar. */
  position:relative;height:36px;
  border:0;background:transparent;cursor:pointer;border-radius:var(--r-sm);
  font-size:13.5px;font-weight:600;color:var(--ink);
  display:grid;place-items:center;padding:0;
  transition:background .13s var(--ease),color .13s var(--ease);
}
.day:hover:not(:disabled){background:var(--brand-50);color:var(--brand-700)}
.day.pad{visibility:hidden;pointer-events:none}
.day:disabled{color:#cbd5e1;cursor:not-allowed;text-decoration:line-through;text-decoration-thickness:1px}
.day.today{box-shadow:inset 0 0 0 1.5px var(--brand-100)}
.day.in-range{background:var(--brand-50);border-radius:0;color:var(--brand-700)}
.day.edge{background:var(--brand);color:#fff;border-radius:var(--r-sm);z-index:1}
.day.edge:hover{background:var(--brand-600);color:#fff}
.dp-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--line-2);
  font-size:12.5px;color:var(--muted);flex-wrap:wrap;
}
.dp-foot .kb{display:flex;gap:6px;flex-wrap:wrap}
.dp-foot kbd{
  font:inherit;font-size:11px;background:var(--line-2);border:1px solid var(--line);
  border-bottom-width:2px;border-radius:5px;padding:1px 6px;color:var(--muted);
}

/* ------------------------------------------------------------- travellers */
.tp-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--line-2);
}
.tp-row:last-of-type{border-bottom:0}
.tp-row .lbl{font-weight:600;font-size:14.5px}
.tp-row .note{font-size:12px;color:var(--muted);margin-top:1px}
.stepper{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.stepper button{
  width:34px;height:34px;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--brand);
  display:grid;place-items:center;font-size:18px;font-weight:600;line-height:1;
  transition:border-color .16s,background .16s,color .16s;
}
.stepper button:hover:not(:disabled){border-color:var(--brand);background:var(--brand-50)}
.stepper button:disabled{color:#cbd5e1;cursor:not-allowed;border-color:var(--line-2)}
.stepper .val{width:34px;text-align:center;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.tp-cabin{margin-top:6px;padding-top:14px;border-top:1px solid var(--line-2)}
.tp-cabin .t{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px;
}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.chip{
  border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);
  padding:9px 11px;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-2);
  text-align:left;transition:border-color .16s,background .16s,color .16s;
}
.chip:hover{border-color:#cbd5e1}
.chip[aria-pressed="true"]{background:var(--brand-50);border-color:var(--brand);color:var(--brand-700)}
/* Sticky so the panel can scroll on a short screen without the Done button
   scrolling out of reach. */
.tp-foot{
  display:flex;justify-content:flex-end;gap:8px;
  margin-top:12px;padding:12px 0 16px;border-top:1px solid var(--line-2);
  position:sticky;bottom:-16px;z-index:1;background:#fff;
}
.tp-foot button{
  border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);
  padding:9px 18px;font-weight:600;font-size:13.5px;cursor:pointer;
}
.tp-foot button.done{background:var(--brand);border-color:var(--brand);color:#fff}

/* Phone-only page header and cabin dropdown, matching how Skyscanner presents
   its travellers screen. Both are hidden on desktop, where the same markup
   stays a floating panel with cabin chips instead. */
.sheet-head{display:none}
.tp-class{display:none}
.selectwrap{position:relative}
.selectwrap select{
  width:100%;appearance:none;-webkit-appearance:none;
  border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);
  padding:12px 38px 12px 13px;font:inherit;font-weight:600;font-size:14.5px;color:var(--ink);
  cursor:pointer;
}
.selectwrap .caret{
  position:absolute;right:13px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--muted);pointer-events:none;
}
.d-only{display:inline}
.m-only{display:none}
/* A third label for the same button: while the panel is docked there is no
   "done" to do, so it says what it actually does. */
.dock-only{display:none}

/* -------------------------------------------------------------- results */
main{padding:30px 0 70px}
.bar{margin-bottom:14px}
.bar-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.bar h2{margin:0;font-size:26px;letter-spacing:-.03em;font-weight:800}
.bar .sub{color:var(--muted);font-size:13.5px;font-weight:500;display:block;margin-top:2px}
.sortlink{
  border:0;background:none;cursor:pointer;color:var(--ink-2);font-size:13.5px;font-weight:700;
  text-decoration:underline;text-underline-offset:3px;padding:6px 2px;white-space:nowrap;
}
.sortlink[aria-pressed="true"]{color:var(--brand)}
.bar-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
/* Share has no pressed state, so it keeps the accent colour; it turns green for
   a moment to confirm the link reached the clipboard. */
.sortlink.share{color:var(--brand)}
.sortlink.share.ok{color:var(--ok);text-decoration-color:transparent}

/* The three-column price band. The ranking in force is filled dark, as
   Skyscanner does, so it is obvious at a glance which one is applied. */
.band{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin-top:12px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
}
.band button{
  border:0;background:#fff;cursor:pointer;text-align:left;
  padding:12px 14px;display:flex;flex-direction:column;gap:3px;
  transition:background .16s var(--ease),color .16s;
}
.band button:hover{background:#fbfcfe}
.band .k{font-size:13px;font-weight:600;color:var(--muted)}
.band .v{font-size:21px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.band .n{font-size:12px;color:var(--muted)}
.band button[aria-selected="true"]{background:var(--dark)}
.band button[aria-selected="true"] .k,
.band button[aria-selected="true"] .n{color:#9db8e8}
.band button[aria-selected="true"] .v{color:#fff}
.bar-foot{margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);margin-bottom:12px;overflow:hidden;
  transition:box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.card:hover{box-shadow:var(--sh-3);border-color:#d5dde8}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px 0}
.cname{min-width:0;font-size:14.5px;font-weight:700;letter-spacing:-.01em;line-height:1.4}
.cname b{font-weight:800}
.cname .op{font-weight:500;color:var(--muted)}
.fav{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:0;background:none;
  cursor:pointer;color:var(--ink-2);display:grid;place-items:center;margin:-4px -6px 0 0;
  transition:background .16s,color .16s,transform .16s var(--ease);
}
.fav:hover{background:var(--line-2);color:var(--pink)}
.fav:active{transform:scale(.9)}
.fav svg{width:21px;height:21px}
.fav[aria-pressed="true"]{color:var(--pink)}
.fav[aria-pressed="true"] svg{fill:var(--pink)}
.badges{display:flex;gap:7px;flex-wrap:wrap;padding:9px 18px 0}
.logo{width:26px;height:26px;border-radius:6px;object-fit:contain;background:#fff;flex:0 0 auto}
.logo-fallback{
  width:26px;height:26px;border-radius:6px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--brand-50);color:var(--brand);font-weight:800;font-size:12px;border:1px solid var(--brand-100);
}
/* Each leg carries its own logo, because the outbound and the return can be
   flown by different carriers and it is the operating airline that matters. */
.legday{font-size:12px;color:var(--muted);font-weight:600;padding:14px 18px 0}
.leg{display:flex;align-items:center;gap:12px;padding:7px 18px 0}
.leg .llogo{flex:0 0 26px;display:flex}
.leg .lt,.leg .rt{display:flex;flex-direction:column;gap:1px;min-width:0}
.leg .rt{align-items:flex-end;text-align:right;margin-left:auto}
.leg .lt b,.leg .rt b{
  font-size:17px;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.leg .rt b sup{font-size:11px;font-weight:800;color:var(--pink);margin-left:1px;vertical-align:super}
.leg .ap{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.02em}
.leg .mid{flex:1;min-width:96px;display:flex;flex-direction:column;align-items:center;gap:3px}
.leg .mid .d{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap}
.leg .mid .s{font-size:12px;color:var(--pink);font-weight:600;white-space:nowrap}
.leg .ln{position:relative;width:100%;height:1px;background:var(--line);display:block}
/* The two dots sit together mid-line, marking the stops, rather than at the
   ends - the same read Skyscanner gives. */
.leg .ln i{position:absolute;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--pink)}
.leg .ln i.a{left:calc(50% - 9px)}
.leg .ln i.b{left:calc(50% + 3px)}

/* Wrapper for the two directions. On a phone it is a plain block, so the mobile
   card is byte-for-byte the layout it was before - the desktop rules below are
   the only thing that changes. */
.legs{display:block}

@media (min-width:880px){
  /* A desktop card is wide, and stacking everything into one column wasted that
     width: outbound over return over the price made a card roughly 330px tall
     while leaving most of its 900px empty. Swapping that for two legs side by
     side plus the price as a rail gets it near half the height and uses the
     space it already had. */
  .card{
    display:grid;
    grid-template-columns:minmax(0,1fr) 264px;
    grid-template-areas:"top top" "note note" "legs foot";
    align-items:stretch;
  }
  .card-top{grid-area:top;align-items:center;padding:14px 18px 0}
  /* Placed explicitly: an auto-placed child would pick a cell by accident if the
     template ever changes. */
  .card-note{grid-area:note;margin:0;padding:9px 18px}
  /* The badges ride alongside the airline name rather than taking a row of their
     own. There is room for both on a desktop row, and a whole row of chips was
     32px of nothing on a card whose point is to be short. On a phone .chead is a
     plain block, so the name stays above the chips exactly as it was. */
  .chead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-width:0}
  .badges{padding:0}
  .legs{
    grid-area:legs;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 30px;padding:12px 20px 16px 18px;
    align-items:start;
  }
  /* Each direction keeps its date and its route together. Without this wrapper
     the four pieces flow into the grid in order, which pairs the outbound date
     with the return leg. */
  .legcol{min-width:0}
  /* One-way: a lone leg in a two-column grid hugs the left half and leaves the
     route line looking short and stranded, so give it the full width. */
  .legs.solo{grid-template-columns:minmax(0,1fr)}
  .legs .legday{padding:0 0 2px}
  .legs .leg{padding:4px 0 0}
  /* This one sits outside .legs, so it needs placing explicitly. */
  .card > .legday{grid-column:1 / -1;padding:10px 18px 0}

  /* The price stops being a strip under the card and becomes a rail beside it.
     Kept to one row - stacking deals, price and button made the rail the tallest
     thing in the card and the legs stretched to match it. */
  .card-foot{
    grid-area:foot;margin-top:0;height:100%;
    flex-direction:row;align-items:center;justify-content:flex-end;gap:11px;
    padding:14px 16px;
    border-top:0;border-left:1px solid var(--line-2);
  }
  /* min-width:0 lets the deal column shrink rather than push the price across the
     divider when there are three-digit deal counts. */
  .card-foot .deal{margin-right:0;align-items:flex-end;min-width:0}
  .card-foot .select{flex:0 0 auto;padding:12px 15px}
  .card-foot .hint{text-align:right;max-width:112px}
  .allopts{grid-column:1 / -1}
}

/* ---- the docked column decides the card layout, not the window -------------
   Measured on the docked page: a leg row needs about 300px of its own, so two
   side by side want roughly 680px of column, and the 264px price rail beside
   them wants about 900. Below those the card restacks rather than squeezing.
   These only match while docked, because the container is only defined then. */
@container rescol (max-width:899px){
  /* Price rail under the legs, so both directions get the whole column. */
  .card{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "note" "legs" "foot"}
  .card-note{grid-area:note;margin:0;padding:9px 18px}
  .card-foot{
    border-left:0;border-top:1px solid var(--line-2);
    justify-content:flex-end;padding:12px 18px;
  }
}
@container rescol (max-width:679px){
  /* Not even room for the two directions side by side. */
  .legs{grid-template-columns:minmax(0,1fr);gap:0}
  .legcol + .legcol{margin-top:14px}
}

/* The panel shown in place of the cards when a search finds nothing. It has to
   look like an answer: a search that quietly returns to a blank form reads as a
   broken site, which is exactly how it was reported. */
.nofares{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:26px 22px;text-align:center;box-shadow:var(--sh-2);
}
.nofares .nf-ico{
  width:46px;height:46px;margin:0 auto 12px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-50);color:var(--brand);
}
.nofares h3{margin:0 0 8px;font-size:18px;font-weight:800;letter-spacing:-.01em}
.nofares p{margin:0 0 14px;color:var(--muted);font-size:14px}
.nofares ul{
  margin:0 auto;padding:0;list-style:none;max-width:430px;text-align:left;
  color:var(--muted);font-size:13.5px;
}
.nofares li{padding:6px 0 6px 22px;position:relative}
.nofares li::before{
  content:"";position:absolute;left:6px;top:12px;width:6px;height:6px;
  border-radius:50%;background:var(--brand);
}
.nofares .nf-clear{
  margin-top:16px;border:1px solid var(--line);background:#fff;
  border-radius:var(--r-sm);padding:10px 16px;font-weight:600;font-size:13.5px;
  cursor:pointer;color:var(--brand);
}
.nofares .nf-clear:hover{border-color:var(--brand)}
.badge{
  display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;
  background:var(--line-2);color:var(--muted);text-transform:capitalize;
}
.badge.self{background:var(--warn-bg);color:var(--warn)}
.badge.verified{background:var(--ok-bg);color:var(--ok)}

/* Bottom strip of a card: how many suppliers were found, the cheapest price,
   and the Select button. */
.card-foot{
  display:flex;align-items:center;justify-content:flex-end;gap:12px;
  margin-top:16px;padding:12px 18px;border-top:1px solid var(--line-2);background:#fcfdff;
}

/* A fare no airline sells, being offered through one of the approved agents.
   The note sits above the price strip so the reason is read before the button,
   not discovered on the agent's checkout page. Hidden on every ordinary card. */
.card-note{
  display:flex;align-items:flex-start;gap:8px;
  margin:12px 0 0;padding:10px 18px;
  background:#fffaeb;border-top:1px solid #f6e4b4;border-bottom:1px solid #f6e4b4;
  color:#7a5a12;font-size:12.5px;font-weight:600;line-height:1.45;
}
.card-note[hidden]{display:none}
.card-note svg{flex:0 0 auto;width:14px;height:14px;margin-top:2px}
.deal{display:flex;flex-direction:column;align-items:flex-end;margin-right:auto;min-width:0}

/* A lookup that failed leaves a "Try again" button in the foot. It reuses the
   .select look so a retry reads as the same control the user already clicked,
   with the arrow dropped in favour of the word. */
.card-foot .retry{
  background:#fff;color:var(--brand-600);border:1px solid var(--line);
  box-shadow:none;
}
.card-foot .retry:hover{background:var(--brand-50);border-color:var(--brand-200,#bcd3fb)}
/* The label must never wrap: a long one used to stack into three lines and tear
   the foot apart, because the button beside it is nowrap and cannot shrink. */
.deal .n{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
.deal .amt{font-size:22px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.select{
  border:0;background:var(--dark);color:#fff;font-weight:700;font-size:14.5px;
  padding:12px 20px;border-radius:var(--r-sm);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-family:inherit;
  transition:background .16s,transform .12s var(--ease);
}
.select:hover{background:#1b2b47}
.select:active{transform:translateY(1px)}
.select .arw{width:15px;height:15px}
.select.is-busy{opacity:.5;pointer-events:none}
/* An agent booking is not the airline's own page, so it never wears the same
   solid dark as "Book direct". Amber matches the note explaining why. */
.select.agent{background:#7a5a12}
.select.agent:hover{background:#684c0e}

/* The full supplier comparison, folded away. The foot already names the
   cheapest, so this only opens when there is genuinely a choice to make. */
.allopts{border-top:1px solid var(--line-2)}
.allopts summary{
  cursor:pointer;padding:12px 18px;font-size:13.5px;font-weight:700;color:var(--brand);
  list-style:none;
}
.allopts summary::-webkit-details-marker{display:none}
.allopts summary::before{content:"▾";display:inline-block;margin-right:7px;transition:transform .2s var(--ease)}
.allopts[open] summary::before{transform:rotate(180deg)}
.opt{display:flex;align-items:center;gap:13px;padding:11px;border:1px solid var(--line);border-radius:var(--r);margin:0 18px 8px;transition:border-color .16s,background .16s}
.opt:hover{border-color:var(--brand-100);background:#fcfdff}
.opt:last-child{margin-bottom:14px}
.opt .who{flex:1;min-width:0}
.opt .who .n{font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.go{
  border:0;background:var(--brand);color:#fff;font-weight:700;font-size:14px;padding:10px 18px;
  border-radius:var(--r-sm);cursor:pointer;text-decoration:none;display:inline-block;white-space:nowrap;
  transition:background .16s,transform .12s var(--ease);
}
.go:hover{background:var(--brand-600)}
.go:active{transform:translateY(1px)}
.link{background:none;border:0;color:var(--brand);font-weight:700;cursor:pointer;padding:8px 4px;text-decoration:underline}
.type{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:999px}
.type.airline{background:#e0f2fe;color:#075985}
.type.third_party{background:#f3e8ff;color:#6b21a8}

.state{
  padding:34px 22px;text-align:center;color:var(--muted);background:var(--panel);
  border:1px dashed var(--line);border-radius:var(--r-lg);font-size:14.5px;
}
.err{
  background:var(--danger-bg);border:1px solid #fecaca;color:#991b1b;
  padding:14px 16px;border-radius:var(--r);margin-bottom:14px;font-size:14px;font-weight:500;
}
.spinner{
  width:16px;height:16px;border:2px solid #cbd5e1;border-top-color:var(--brand);
  border-radius:50%;display:inline-block;animation:spin .7s linear infinite;vertical-align:-3px;margin-right:9px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.skel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;margin-bottom:12px}
.skel .l{height:13px;border-radius:6px;background:linear-gradient(90deg,#eef2f7,#e2e8f0,#eef2f7);background-size:200% 100%;animation:shim 1.3s linear infinite;margin-bottom:10px}
.skel .l.w40{width:40%}.skel .l.w70{width:70%}.skel .l.w55{width:55%}
@keyframes shim{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* --------------------------------------------------------- hotel handoff */
.hotelnote{
  position:fixed;right:16px;bottom:16px;z-index:80;
  max-width:min(460px,calc(100vw - 32px));
  background:var(--dark);color:#fff;border-radius:var(--r);
  padding:15px 17px;box-shadow:var(--sh-3);
  display:flex;gap:11px;align-items:center;flex-wrap:wrap;
  animation:rise .32s var(--ease);
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hotelnote[hidden]{display:none}
.hotelnote .hn-text{font-size:13.5px;line-height:1.5;flex:1 1 100%;color:#dbe4f0}
.hotelnote .hn-go{
  background:#fff;color:var(--dark);text-decoration:none;font-weight:700;
  font-size:13px;padding:9px 16px;border-radius:var(--r-sm);
}
.hotelnote button.link{background:transparent;border:0;color:#9db8e8;font-weight:600;font-size:13px;cursor:pointer;padding:9px 4px;text-decoration:none}

/* ------------------------------------------------- offers (hotel and car) */
/* Shown at the top of the results, above the price band. Both are links that are
   already built, so they ask nothing of the visitor - which is the point: the
   redirect on a Book click is easy to miss or block, and this is not. */
.offers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 16px}
.offers[hidden]{display:none}
.offer{
  display:flex;align-items:center;gap:12px;text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;
  padding:14px 16px;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.offer:hover{border-color:var(--brand-100);box-shadow:0 6px 20px rgba(15,23,42,.07)}
.offer .oic{
  flex:0 0 auto;width:40px;height:40px;border-radius:11px;
  display:grid;place-items:center;background:var(--brand-50);color:var(--brand);
}
.offer .oic svg{width:21px;height:21px}
.offer .otxt{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:2px}
.offer .otxt b{
  font-size:14.5px;font-weight:750;color:var(--ink);letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.offer .otxt em{font-style:normal;font-size:12.5px;color:var(--muted)}
.offer .oprice{flex:0 0 auto;font-size:13.5px;font-weight:800;color:var(--brand-700);text-align:right;white-space:nowrap}
.offer .oprice:empty{display:none}
.offer .oprice.loading{color:var(--muted);font-weight:600}
.offer .oarrow{flex:0 0 auto;color:var(--muted);font-size:16px;transition:transform .18s var(--ease)}
.offer:hover .oarrow{transform:translateX(3px);color:var(--brand)}

/* On a phone, two boxes side by side clips the price off the edge - and the price
   is the reason the box exists, so stack them instead. */
@media (max-width:640px){
  .offers{grid-template-columns:1fr;gap:10px;margin:12px 0 14px}
  .offer{padding:13px 14px}
  .offer .otxt b{white-space:normal}
}

footer{color:var(--muted);font-size:12.5px;text-align:center;padding:0 0 46px;line-height:1.7}
footer .sep{color:var(--line)}

/* --------------------------------------------------------------- sheets */
.backdrop{
  position:fixed;inset:0;background:rgba(11,21,38,.5);z-index:70;display:none;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  /* Dragging the dim area must not move anything at all - not the sheet, and not
     the page behind it. */
  overscroll-behavior:contain;touch-action:none;
}
.backdrop.open{display:block}
.sheet-x{display:none}

/* -------------------------------------------------------- responsive */
/* On a wide screen the collapsed summary sits on one line - the route, then the
   two date steppers at their natural width - rather than two steppers stretched
   across the whole card. */
@media (min-width:641px){
  .searchcard.collapsed .summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .sum-main{flex:1 1 340px;min-width:0}
  .sum-dates{flex:0 0 auto;margin-top:0}
  .nudge span{padding:0 10px;min-width:104px}
}

@media (max-width:980px){
  .a3{grid-column:span 6}
  .a2{grid-column:span 6}
  .a4{grid-column:span 6}
  .a6{grid-column:span 12}
  .dp .pop{width:min(420px,calc(100vw - 36px))}
  .months .month:nth-child(2){display:none}
}
@media (max-width:640px){
  .wrap{padding:0 14px}
  .hero{padding:16px 0 58px}
  .hero h1{font-size:23px}
  .hero p{display:none}
  .searchcard{padding:10px;border-radius:16px;margin-top:-44px}

  /* Trip type becomes a full-width pair of pills. */
  .seg{display:flex;width:100%;padding:3px;margin-bottom:8px}
  .seg button{flex:1;justify-content:center;padding:6px 10px;font-size:13px}
  .seg button svg{width:14px;height:14px}

  /* The fields collapse from separate labelled boxes into ONE bordered card of
     divider-separated rows, the way Skyscanner does it on a phone. That is what
     keeps the form near a third of the screen instead of a full-height column.
     The per-field labels are only hidden visually - they stay in the DOM as the
     accessible names for the date and traveller controls. */
  .fgrid{
    display:grid;grid-template-columns:1fr 1fr;gap:0;
    border:1px solid var(--line);border-radius:var(--r);background:#fff;
  }
  .fgrid .field{min-width:0}
  .fgrid .field > label{display:none}
  #fromField,#destField,#travField{grid-column:1 / -1}
  #departField{grid-column:1}
  #returnField{grid-column:2}
  .fgrid.oneway #departField{grid-column:1 / -1}

  .ctrl{
    min-height:44px;padding:6px 12px;border-radius:0;
    border:0;border-bottom:1px solid var(--line-2);
  }
  .ctrl:hover{border-color:var(--line-2)}
  .ctrl:focus-within{box-shadow:none}
  .ctrl .big{font-size:14.5px}
  #departField .ctrl{border-right:1px solid var(--line-2)}
  .fgrid.oneway #departField .ctrl{border-right:0}
  #travField .ctrl{border-bottom:0}
  /* Keep the set-to text clear of the swap button sitting on the row boundary. */
  #destField .ctrl{padding-right:48px}

  /* Swap rides the From/To boundary on the right edge, as Skyscanner has it. */
  .swap{
    right:10px;left:auto;top:auto;bottom:-15px;transform:none;
    width:30px;height:30px;z-index:6;
  }
  .swap:active{transform:rotate(180deg)}

  .gorow{gap:8px;margin-top:8px}
  .pill{order:1;padding:6px 12px 6px 8px;font-size:13px}
  #hint{display:none}
  .primary{
    width:100%;justify-content:center;margin-left:0;order:2;
    padding:11px 20px;font-size:15.5px;
  }
  /* results */
  .bar h2{font-size:22px}
  .band{margin-top:10px}
  .band button{padding:10px 11px}
  .band .k{font-size:12px}
  .band .v{font-size:17px}
  .band .n{font-size:11px}
  .card-top{padding:14px 14px 0}
  .badges{padding:8px 14px 0}
  .legday{padding:12px 14px 0}
  .leg{padding:6px 14px 0;gap:9px}
  .leg .lt b,.leg .rt b{font-size:15.5px}
  .leg .mid .d,.leg .mid .s{font-size:11.5px}
  .card-foot{padding:11px 14px;gap:9px}
  .deal .amt{font-size:19px}
  .select{padding:11px 16px;font-size:14px}
  .allopts summary{padding:11px 14px}
  .opt{margin:0 14px 8px;flex-wrap:wrap}
  .opt:last-child{margin-bottom:12px}

  /* popovers become bottom sheets */
  #calPop,#travPop,#filtPop{
    position:fixed;left:0;right:0;bottom:0;top:auto;
    width:100%;max-width:none;
    border-radius:18px 18px 0 0;border-bottom:0;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom));
    /* vh is measured against the TALLEST the viewport ever gets (URL bar hidden),
       so a sheet sized in vh can hang past the bottom of the screen while the URL
       bar is showing. dvh tracks the height actually visible, and the vh line
       above it stays as the fallback for browsers without dvh. */
    max-height:88vh;
    max-height:88dvh;
    overflow:auto;overscroll-behavior:contain;
    animation:sheetup .28s var(--ease);
  }
  @keyframes sheetup{from{transform:translateY(100%)}to{transform:none}}
  .sheet-x{
    display:flex;align-items:center;justify-content:space-between;
    margin:-4px 0 12px;
  }
  .sheet-x .grab{width:38px;height:4px;border-radius:99px;background:var(--line);margin:0 auto}
  .sheet-x .close{
    border:0;background:var(--line-2);width:30px;height:30px;border-radius:50%;
    display:grid;place-items:center;cursor:pointer;color:var(--ink-2);flex:0 0 auto;
  }
  .sheet-x .close svg{width:14px;height:14px}
  .dp-foot .kb{display:none}
  .hotelnote{right:10px;left:10px;bottom:10px;max-width:none}

  /* Travellers becomes a full-screen page rather than a bottom sheet, the way
     Skyscanner presents it: a back arrow, a title, and a pinned Apply. */
  #travPop{
    top:0;bottom:0;max-height:100vh;max-height:100dvh;border-radius:0;
    padding:0 0 calc(14px + env(safe-area-inset-bottom));
  }
  #travPop.open{display:flex;flex-direction:column}
  #travPop .sheet-x{display:none}
  #travPop .sheet-head,#filtPop .sheet-head{
    display:flex;align-items:center;gap:6px;padding:12px 12px;
    border-bottom:1px solid var(--line-2);flex:0 0 auto;margin:0;
  }
  /* The filter panel is a scrolling column like the travellers page, so the
     Apply button can stay pinned to the bottom of it. */
  #filtPop .sheet-x{display:none}
  #filtPop .frow:first-of-type{margin-top:2px}
  .sheet-head h3{margin:0;font-size:15.5px;font-weight:700;letter-spacing:-.01em}
  .sheet-head .back{
    width:36px;height:36px;border:0;background:none;cursor:pointer;color:var(--ink);
    display:grid;place-items:center;flex:0 0 auto;border-radius:50%;
  }
  .sheet-head .back:active{background:var(--line-2)}
  .sheet-head .back svg{width:20px;height:20px}
  #travPop .tp-class{display:block;padding:16px 14px 2px}
  .tp-class .t{font-size:15.5px;font-weight:700;margin-bottom:9px}
  .tp-cabin{display:none}   /* superseded by the dropdown above on a phone */
  #travPop .tp-row{padding:13px 14px}
  .tp-foot{
    position:sticky;bottom:0;margin-top:auto;
    padding:12px 14px calc(12px + env(safe-area-inset-bottom));
    background:#fff;border-top:1px solid var(--line-2);border-radius:0;
  }
  .tp-foot button.done{width:100%;padding:14px;font-size:15.5px;border-radius:var(--r)}
  .d-only{display:none}
  .m-only{display:inline}
}

/* A phone held sideways is wide but very short: the width query above misses it,
   so the floating panel would have nowhere to go and the calendar would be
   clipped. Give the sheets the same bottom-anchored treatment whenever the window
   is short, so the date picker and traveller list stay fully visible. */
@media (max-height:520px) and (min-width:641px) and (max-width:1000px){
  #calPop,#travPop,#filtPop{
    position:fixed;left:0;right:0;bottom:0;top:auto;
    width:100%;max-width:none;
    border-radius:16px 16px 0 0;border-bottom:0;
    padding:12px 14px calc(12px + env(safe-area-inset-bottom));
    max-height:100vh;max-height:100dvh;
    overflow:auto;overscroll-behavior:contain;
    animation:sheetup .28s var(--ease);
  }
  #calPop{left:0;right:0}
  .dp-foot .kb{display:none}
  .tp-foot{
    position:sticky;bottom:0;margin-top:auto;background:#fff;
    padding:12px 14px calc(12px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line-2);
  }
  .tp-foot button.done{width:100%;padding:13px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ======================================================================
   The niche notice
   ====================================================================== */
.niche{
  display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:11px 15px;
  background:var(--brand-50);border:1px solid var(--brand-100);border-radius:var(--r);
  color:var(--brand-700);font-size:13px;font-weight:600;line-height:1.5;
}
.niche svg{width:17px;height:17px;flex:0 0 auto}

/* Why a fare is offered by an agent, inside the details panel. Same sentence as
   the card note, with room to read it. */
.dtl-why{
  margin:10px 0 0;padding:9px 11px;border-radius:var(--r-sm);
  background:#fffaeb;border:1px solid #f6e4b4;
  font-size:12.5px;line-height:1.5;color:#7a5a12;font-weight:600;
}

/* ======================================================================
   The searching state
   A search takes a second or two against live airline systems, and an empty
   screen in that gap reads as a broken site. This says what is being done and
   that it is still happening.
   ====================================================================== */
.searching{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:30px 24px 26px;
  margin:0 0 16px;text-align:center;overflow:hidden;animation:fade .34s var(--ease);
}
/* A soft brand wash drifting across the top of the card. Enough to feel alive,
   not so much that it competes with the fares that land underneath it. */
.searching::before{
  content:"";position:absolute;left:-20%;right:-20%;top:-72px;height:175px;
  background:radial-gradient(50% 100% at 50% 100%,rgba(18,102,241,.14),transparent 72%);
  pointer-events:none;animation:wash 4.5s var(--ease) infinite;
}
@keyframes wash{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.searching .route{position:relative;height:62px;max-width:460px;margin:0 auto 4px}
/* Dashed, and masked so it fades out at both ends: a route rather than a ruler. */
.searching .rail{
  position:absolute;left:20px;right:20px;top:50%;height:2px;transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,var(--line) 14%,var(--line) 86%,transparent);
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 11px);
  mask-image:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 11px);
}
.searching .dot{
  position:absolute;top:50%;width:8px;height:8px;border-radius:50%;
  background:var(--brand);transform:translateY(-50%);
  animation:pulse 1.9s ease-in-out infinite;
}
.searching .dot.a{left:14px}
.searching .dot.b{right:14px;background:var(--ink);animation-delay:.95s}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(18,102,241,.30)}
                 70%{box-shadow:0 0 0 10px rgba(18,102,241,0)}}
.searching .plane{
  position:absolute;top:50%;left:0;color:var(--brand);transform:translate(-50%,-50%);
  filter:drop-shadow(0 4px 9px rgba(18,102,241,.34));
  animation:flutter 3.4s cubic-bezier(.5,.05,.5,.95) infinite;
}
.searching .plane svg{width:23px;height:23px;display:block;transform:rotate(45deg)}
@keyframes flutter{
  0%{left:5%;opacity:0} 14%{opacity:1}
  50%{left:95%;opacity:1} 86%{opacity:1} 100%{left:5%;opacity:0}
}
.searching h3{
  position:relative;margin:4px 0 6px;font-size:17px;font-weight:700;
  letter-spacing:-.015em;color:var(--ink);
}
/* Re-applied on every swap so each line arrives instead of snapping in. */
.searching h3.txt-swap{animation:stepin .42s var(--ease)}
@keyframes stepin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.searching p{
  position:relative;margin:0 auto;max-width:430px;
  color:var(--muted);font-size:13.5px;line-height:1.5;
}
/* One sweeping bar. Three blinking dots read as a decoration; this reads as work.
   The track uses --line rather than the fainter --line-2, which disappeared
   against the white panel. */
.searching .track{
  position:relative;height:4px;width:200px;margin:20px auto 0;
  background:var(--line);border-radius:99px;overflow:hidden;
}
.searching .track i{
  position:absolute;top:0;bottom:0;left:0;width:45%;border-radius:99px;
  background:linear-gradient(90deg,rgba(18,102,241,0),var(--brand),rgba(18,102,241,0));
  animation:sweep 1.3s var(--ease) infinite;
}
@keyframes sweep{from{transform:translateX(-120%)}to{transform:translateX(340%)}}

/* ======================================================================
   Flight details
   ====================================================================== */
.card-tools{display:flex;align-items:center;gap:6px;flex:0 0 auto}
/* A quiet filled pill rather than an outlined one: it sits beside the favourite
   heart without competing with the price rail directly beneath it. */
.detbtn{
  display:inline-flex;align-items:center;gap:6px;
  border:0;background:var(--line-2);color:var(--ink-2);cursor:pointer;
  font-size:12.5px;font-weight:700;letter-spacing:-.005em;
  padding:8px 13px;border-radius:999px;white-space:nowrap;
  transition:background .16s,color .16s,transform .1s;
}
.detbtn svg{width:14px;height:14px;flex:0 0 auto}
.detbtn:hover{background:var(--brand-50);color:var(--brand-700)}
.detbtn:active{transform:translateY(1px)}

.modal{
  position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  padding:18px;
}
.modal[hidden]{display:none}
.modal-card{
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-3);
  width:min(720px,100%);max-height:86vh;max-height:86dvh;
  display:flex;flex-direction:column;overflow:hidden;
  animation:popin .24s var(--ease);
}
@keyframes popin{from{opacity:0;transform:translateY(10px) scale(.98)}
                 to{opacity:1;transform:none}}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 18px;border-bottom:1px solid var(--line-2);flex:0 0 auto;
}
.modal-head h3{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em}
.modal-x{
  border:0;background:var(--line-2);width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:var(--ink-2);flex:0 0 auto;
}
.modal-x svg{width:15px;height:15px}
.modal-body{padding:16px 18px;overflow:auto;flex:1 1 auto;overscroll-behavior:contain}
.modal-foot{
  padding:13px 18px;border-top:1px solid var(--line-2);flex:0 0 auto;
  display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap;
}
.modal-foot .note{margin-right:auto;font-size:12.5px;color:var(--muted)}
.modal-foot .bookbtn{
  display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;
  text-decoration:none;font-weight:700;font-size:14px;padding:11px 20px;border-radius:var(--r-sm);
}
.modal-foot .bookbtn:hover{background:var(--brand-600)}
/* Same amber as the card: this is an agent's page, not the airline's. */
.modal-foot .bookbtn.agent{background:#7a5a12}
.modal-foot .bookbtn.agent:hover{background:#684c0e}

.dtl-leg{margin-bottom:20px}
.dtl-leg:last-child{margin-bottom:0}
.dtl-leg > h4{
  margin:0 0 10px;font-size:11.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);
}
.dtl-leg > h4 span{float:right;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink-2)}
.dtl-seg{border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;margin-bottom:8px}
.dtl-row1{display:flex;align-items:center;gap:9px;margin-bottom:11px;flex-wrap:wrap}
.dtl-row1 .fn{font-weight:800;font-size:13.5px}
.dtl-row1 .ac{
  font-size:11.5px;color:var(--muted);background:var(--line-2);
  padding:2px 8px;border-radius:99px;font-weight:600;
}
.dtl-times{display:flex;align-items:flex-start;gap:10px}
.dtl-end{flex:1;min-width:0}
.dtl-end .t{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.dtl-end .ap{font-size:12.5px;color:var(--ink-2);font-weight:700}
.dtl-end .tz{font-size:11.5px;color:var(--muted-2);margin-top:1px}
.dtl-end.r{text-align:right}
.dtl-mid{flex:0 0 auto;text-align:center;color:var(--muted);font-size:11.5px;min-width:82px}
.dtl-mid .ln{display:block;height:1px;background:var(--line);margin:5px 0}
.dtl-lay{
  display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:9px 13px;
  background:#fff8e6;border:1px solid #f2dfa6;border-radius:var(--r-sm);
  font-size:12.5px;color:#8a6413;font-weight:600;
}
.dtl-lay svg{width:14px;height:14px;flex:0 0 auto}
.dtl-sec{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2)}
.dtl-sec h4{
  margin:0 0 10px;font-size:11.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);
}
.dtl-kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13.5px}
.dtl-kv dt{color:var(--muted);font-weight:600}
.dtl-kv dd{margin:0;font-weight:700;text-align:right}
.dtl-warn{
  display:flex;gap:9px;align-items:flex-start;margin-top:14px;padding:11px 13px;
  background:#fff4f4;border:1px solid #f5cccc;border-radius:var(--r-sm);
  font-size:12.5px;color:#9b2c2c;font-weight:600;
}
.dtl-warn svg{width:15px;height:15px;flex:0 0 auto;margin-top:1px}

@media (max-width:640px){
  .modal{padding:0;align-items:flex-end}
  .modal-card{
    width:100%;max-height:92vh;max-height:92dvh;
    border-radius:18px 18px 0 0;animation:sheetup .28s var(--ease);
  }
  .modal-foot .bookbtn{width:100%;justify-content:center;order:2}
  .modal-foot .note{order:1;width:100%;text-align:center;margin:0 0 4px}
  .detbtn span{display:none}
  .detbtn{padding:7px 10px}
}

/* ======================================================================
   Saved flights

   The heart used to be a dead toggle: it wrote a flag to localStorage and
   nothing ever read it back, so saving a fare did nothing a visitor could
   see. These are the styles for the two things that now read it - the Saved
   control in the results bar, and the list of favourites from earlier
   searches that are not in the current results.
   ====================================================================== */
.savedbtn{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  border:1px solid var(--line);background:var(--panel);color:var(--ink-2);
  font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  border-radius:999px;padding:6px 12px;
  transition:background .16s,border-color .16s,color .16s;
}
.savedbtn:hover{border-color:#d8e2f0;background:var(--line-2)}
.savedbtn b{
  font-weight:800;font-size:11.5px;color:var(--brand);
  background:var(--brand-50);border-radius:999px;padding:1px 7px;
  min-width:18px;text-align:center;
}
.savedbtn[aria-pressed="true"]{border-color:#f3cede;background:#fff5f8;color:var(--pink)}
.savedbtn[aria-pressed="true"] svg{fill:var(--pink)}
.savedbtn[aria-pressed="true"] b{color:var(--pink);background:#fdeaf1}

.savedstrip{margin-top:4px}
.sstrip-head{
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-2);padding:12px 2px 7px;
}
.savedrow{
  display:flex;align-items:center;gap:14px;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--pink);
  border-radius:var(--r-sm);box-shadow:var(--sh-1);
  padding:11px 14px;margin-bottom:8px;
}
.swho{min-width:0;flex:1}
.swho b{
  display:block;font-size:14px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.swho .sroute{
  display:block;color:var(--muted);font-size:12px;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sright{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.snap{font-size:12px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.recheck{
  font-size:12.5px;font-weight:700;color:var(--brand);text-decoration:none;
  border:1px solid #d8e2f0;border-radius:999px;padding:5px 11px;white-space:nowrap;
}
.recheck:hover{background:var(--brand-50);border-color:#c3d6f5}
.unfav{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;border:0;background:none;
  color:var(--muted-2);font-size:19px;line-height:1;cursor:pointer;
  display:grid;place-items:center;
}
.unfav:hover{background:var(--line-2);color:var(--pink)}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  background:var(--dark);color:#fff;font-size:13px;font-weight:600;
  padding:10px 16px;border-radius:999px;box-shadow:var(--sh-2);
  opacity:0;pointer-events:none;z-index:80;
  max-width:calc(100vw - 32px);text-align:center;
  transition:opacity .2s,transform .2s var(--ease);
}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:640px){
  .savedrow{flex-wrap:wrap;gap:9px}
  .swho{flex:1 1 100%}
  .sright{flex:1 1 auto;justify-content:space-between}
  .toast{bottom:16px}
  .savedbtn{width:100%;justify-content:center}
}

/* ======================================================================
   Brand

   The header sits on dark navy and the wordmark is navy, so the light
   logo variant is used there; logo.png is the version for light surfaces.
   ====================================================================== */
.brandlogo{display:block;width:auto;height:60px;flex:0 0 auto}
/* 80px was as tall as the whole bar, so on a phone there was not the width for
   it: a flex row squeezes what will not fit, and the wordmark came out squashed
   - 9% narrow at 390px, 27% at 320px. This is the tallest size that still fits
   the narrowest screen we support, so the logo is bigger than it was without
   ever being distorted. */
@media (max-width:640px){ .brandlogo{height:44px} }

/* ======================================================================
   Footer

   Four columns on a desktop, stacked on a phone. The standing pages use the
   same markup, so the footer cannot drift between them.
   ====================================================================== */
.sitefoot{
  margin-top:56px;padding:44px 0 26px;text-align:left;
  background:linear-gradient(180deg,var(--dark) 0%,var(--dark-2) 100%);
  color:#93a6c0;
}
.sitefoot .footgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.15fr;gap:28px}
.sitefoot .fcol h2{
  font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  color:#7d92b0;margin:0 0 10px;font-weight:700;
}
.sitefoot .fcol a{
  display:block;color:#c2d2e8;text-decoration:none;font-size:13.5px;
  padding:5px 0;transition:color .15s var(--ease);
}
.sitefoot .fcol a:hover{color:#fff}
.sitefoot .fbrandcol p{margin:14px 0 0;font-size:13.5px;line-height:1.65;max-width:34ch}
.sitefoot .flogo{display:block;height:30px;width:auto}
.sitefoot .fbase{
  margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;
}
.sitefoot .fnote{margin:0;font-size:12.5px;line-height:1.65;max-width:74ch}
.sitefoot .fmark{margin:0;font-size:12.5px;color:#7d92b0;white-space:nowrap}
.sitefoot .sep{color:rgba(255,255,255,.22);margin:0 2px}

@media (max-width:900px){
  .sitefoot .footgrid{grid-template-columns:1fr 1fr;gap:24px}
  .sitefoot .fbrandcol{grid-column:1 / -1}
}
@media (max-width:560px){
  .sitefoot{margin-top:40px;padding:34px 0 22px}
  .sitefoot .footgrid{grid-template-columns:1fr;gap:22px}
  .sitefoot .fbase{flex-direction:column;gap:12px}
  .sitefoot .fmark{white-space:normal}
}

/* ======================================================================
   Standing pages

   index.html is the app; about, contact and privacy are the pages linked
   from the footer. They share app.css so a brand change lands in one place,
   and they are plain HTML rather than PHP includes so each one works on its
   own - upload a single file and it renders, with nothing to forget.
   ====================================================================== */
/* The standing pages use the same .topbar markup as the app - same logo, same
   menu, same sticky bar - rather than a second, nearly-identical header that
   would slowly stop matching. All they add is a pill back to the search, in the
   slot the app uses for its tagline, and it steps aside on a phone where there
   is no room for it. */
.topbar .backhome{
  margin-right:auto;font-size:13px;font-weight:650;color:#dbe6f5;
  text-decoration:none;padding:9px 14px;border-radius:10px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  white-space:nowrap;transition:background .15s var(--ease),color .15s var(--ease);
}
.topbar .backhome:hover{background:rgba(255,255,255,.14);color:#fff}
@media (max-width:1099px){ .topbar .backhome{display:none} }

.docmain{max-width:760px;margin:0 auto;padding:46px 22px 84px}
.docmain h1{font-size:34px;line-height:1.16;letter-spacing:-.02em;margin:0 0 10px;color:var(--ink)}
.docmain .lede{font-size:17px;line-height:1.6;color:var(--ink-2);margin:0 0 28px}
.docmain h2{font-size:19px;letter-spacing:-.01em;margin:34px 0 10px;color:var(--ink)}
.docmain p,.docmain li{font-size:15px;line-height:1.75;color:var(--ink-2)}
.docmain p{margin:0 0 14px}
.docmain ul{margin:0 0 14px;padding-left:20px}
.docmain li{margin:0 0 8px}
.docmain a{color:var(--brand-600);font-weight:600}
.docmain .updated{color:var(--muted);font-size:12.5px;margin:0 0 30px}
.docmain .card{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:24px 26px;margin:0 0 18px;box-shadow:var(--sh-1)}
.docmain .contactbig{display:inline-block;font-size:19px;font-weight:700;color:var(--brand-600);
  text-decoration:none;border-bottom:2px solid var(--brand-100);padding-bottom:2px;margin:2px 0 8px}
.docmain .contactbig:hover{border-bottom-color:var(--brand)}
.docmain .back{display:inline-block;margin-top:34px;font-size:14px;font-weight:600;
  color:var(--ink-2);text-decoration:none}
.docmain .back:hover{color:var(--brand)}
/* The call to action on the hotels and cars pages. */
.docmain .btn{
  display:inline-block;margin:6px 0 4px;padding:13px 20px;border-radius:var(--r-md);
  background:var(--brand);color:#fff;font-weight:650;font-size:15px;
  text-decoration:none;box-shadow:0 12px 24px -14px rgba(18,102,241,.95);
  transition:background .15s var(--ease),transform .15s var(--ease);
}
.docmain .btn:hover{background:var(--brand-600);transform:translateY(-1px)}
@media (max-width:560px){
  .docmain{padding:30px 18px 70px}
  .docmain h1{font-size:27px}
  .docmain .lede{font-size:16px}
}

/* ======================================================================
   Header menu

   Above 1100px the five links sit inline, which is what a desktop visitor
   expects. Below that they collapse behind the button, because five links
   plus a wordmark do not fit a phone and a wrapped row of links looks like
   a mistake. The panel is a child of the sticky bar, so it stays with the
   bar while the list is open instead of scrolling away from it.
   ====================================================================== */
.topbar .tag{margin-right:auto}

.burger{
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:44px;height:44px;flex:0 0 auto;margin-left:auto;padding:0;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  border-radius:12px;cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease);
}
.burger:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26)}
.burger:focus-visible{outline:2px solid #6fb0ff;outline-offset:2px}
.burger .bl{
  display:block;width:18px;height:2px;border-radius:2px;background:#fff;
  transition:transform .2s var(--ease),opacity .12s var(--ease);
}
.topbar.menuopen .burger .bl:nth-child(1){transform:translateY(7px) rotate(45deg)}
.topbar.menuopen .burger .bl:nth-child(2){opacity:0}
.topbar.menuopen .burger .bl:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav{
  position:absolute;left:0;right:0;top:100%;z-index:60;
  padding:4px 18px 14px;margin:0;
  /* Fully opaque on purpose. A near-opaque gradient still let the page read
     through the panel, because the bar itself carries a backdrop-filter and the
     child composites against that blurred backdrop. A menu you can read the page
     through looks broken, so this is a flat colour. */
  background:#0a1322;
  border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 22px 34px -20px rgba(0,0,0,.78);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
.topbar.menuopen .nav{opacity:1;visibility:visible;transform:none}
.nav a{
  display:block;padding:14px 2px;color:#dbe6f5;text-decoration:none;
  font-size:15px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.08);
}
.nav a:last-child{border-bottom:0}
.nav a:hover{color:#fff}

@media (max-width:1099px){
  .topbar .tag{display:none}
  .burger{display:flex}
}

@media (min-width:1100px){
  .burger{display:none}
  .nav{
    position:static;left:auto;right:auto;top:auto;z-index:auto;
    display:flex;align-items:center;gap:2px;
    padding:0;background:none;border:0;box-shadow:none;
    opacity:1;visibility:visible;transform:none;
  }
  .nav a{
    display:inline-block;padding:9px 13px;border-bottom:0;border-radius:10px;
    font-size:13.5px;color:#c6d4e6;
  }
  .nav a:hover{background:rgba(255,255,255,.09);color:#fff}
}

/* ======================================================================
   Home content

   What fills the page before anyone searches. It is hidden the moment a
   search starts, because a traveller who has just asked for fares wants the
   fares, not a brochure.
   ====================================================================== */
#homeBlocks{padding:6px 0 0}
.hblock{margin-top:48px}
.hblock h2{font-size:22px;letter-spacing:-.015em;color:var(--ink);margin:0 0 6px}
.hsub{margin:0 0 20px;color:var(--ink-2);font-size:14.5px;max-width:62ch}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.steps li{
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:20px;box-shadow:var(--sh-1);
}
.stepn{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(140deg,var(--brand),#4f9dff);color:#fff;
  font-size:13px;font-weight:700;margin-bottom:12px;
  box-shadow:0 6px 16px -6px rgba(18,102,241,.75);
}
.steps h3{margin:0 0 6px;font-size:15.5px;color:var(--ink)}
.steps p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.6}

.hcards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hcard{
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:18px;box-shadow:var(--sh-1);
}
.hcard h3{margin:0 0 6px;font-size:14.5px;color:var(--ink)}
.hcard p{margin:0;color:var(--ink-2);font-size:13.5px;line-height:1.62}

.routes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.route{
  display:block;padding:15px 16px;background:var(--panel);
  border:1px solid var(--line-2);border-radius:var(--r-md);text-decoration:none;
  box-shadow:var(--sh-1);
  transition:transform .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.route b{display:block;font-size:15px;color:var(--ink);margin-bottom:2px}
.route span{display:block;font-size:12.5px;color:var(--muted)}
.route:hover{transform:translateY(-2px);border-color:var(--brand-100);box-shadow:var(--sh-2)}
.route:hover b{color:var(--brand-600)}

.bigcards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.bigcard{
  display:block;padding:22px;border-radius:var(--r-lg);text-decoration:none;
  background:linear-gradient(140deg,rgba(18,102,241,.07),rgba(79,157,255,.05));
  border:1px solid var(--brand-100);
  transition:transform .15s var(--ease),box-shadow .15s var(--ease);
}
.bigcard h3{margin:0 0 8px;font-size:18px;color:var(--ink)}
.bigcard p{margin:0 0 14px;color:var(--ink-2);font-size:14px;line-height:1.6}
.bgo{font-size:14px;font-weight:700;color:var(--brand-600)}
.bigcard:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}

.faqs{
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-1);
}
.faqs details{border-bottom:1px solid var(--line-2)}
.faqs details:last-child{border-bottom:0}
.faqs summary{
  padding:16px 20px;cursor:pointer;font-weight:650;font-size:15px;color:var(--ink);
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{
  content:"";width:9px;height:9px;flex:0 0 auto;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .2s var(--ease);
}
.faqs details[open] summary::after{transform:rotate(-135deg)}
.faqs summary:hover{background:rgba(18,102,241,.04)}
.faqs p{margin:0;padding:0 20px 18px;color:var(--ink-2);font-size:14px;line-height:1.65}

@media (max-width:900px){
  .steps{grid-template-columns:1fr}
  .hcards{grid-template-columns:repeat(2,1fr)}
  .routes{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .hblock{margin-top:34px}
  .hblock h2{font-size:19px}
  .hsub{font-size:14px}
  .hcards{grid-template-columns:1fr}
  .bigcards{grid-template-columns:1fr}
  .steps li,.hcard{padding:17px}
}