/*
 * Fare Radar
 * Design rules:
 *  - One photo behind everything, slightly blurred. Content sits on dark liquid glass over it.
 *  - One warm accent (amber) for actions and "this is a deal". Green only for money actually spent.
 *  - Display serif for headlines only; system sans for everything you read or tap.
 */

:root {
  color-scheme: dark;
  --bg: #0e1d22;
  --surface: rgba(12, 27, 33, .52);
  --surface-solid: #13262d;
  --surface-2: rgba(255, 255, 255, .07);
  --fg: #f5f7f4;
  --fg-2: rgba(236, 242, 238, .8);
  --fg-3: rgba(226, 235, 231, .6);
  --hair: rgba(255, 255, 255, .13);
  --accent: #f6b443;
  --accent-ink: #231703;
  --accent-soft: rgba(246, 180, 67, .18);
  --ring: rgba(246, 180, 67, .35);
  --ok: #5ad48a;
  --bad: #ff7a70;
  --warn: #f6c86e;

  /* glass */
  --glass-fill: rgba(16, 32, 38, .42);
  --glass-rim: rgba(255, 255, 255, .22);
  --glass-edge: rgba(255, 255, 255, .14);
  --glass-shadow: 0 10px 30px rgba(0, 0, 0, .28), 0 1px 2px rgba(0, 0, 0, .2);

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans);
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.page { width: min(1080px, calc(100% - 32px)); margin: 0 auto; }

/* ---------- type scale: H1 / H2 / body / small / label ---------- */
h1 { margin: 0; font-size: clamp(28px, 4vw, 40px); line-height: 1.14; letter-spacing: -.022em; font-weight: 700; max-width: 24em; }
h2 { margin: 0; font-size: 24px; line-height: 1.2; letter-spacing: -.015em; font-weight: 650; }
.sub, .fine, .foot { font-size: 13px; color: var(--fg-3); }
.field-label, .board-head { font-size: 12px; font-weight: 600; color: var(--fg-3); letter-spacing: .02em; }

/* ---------- liquid glass: controls only ---------- */
.glass, .glass-btn {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 0 0 1px rgba(255, 255, 255, .06), var(--glass-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-btn { background: var(--surface-solid); }
}

/* nav */
.nav {
  position: sticky; top: 10px; z-index: 20; margin: 10px auto 0; width: min(1080px, calc(100% - 24px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 6px 6px 18px; border-radius: 999px;
}
.wordmark { color: var(--fg); text-decoration: none; font-weight: 700; letter-spacing: -.01em; font-size: 17px; }
.segmented { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-radius: 999px; padding: 3px; }
.segmented a {
  position: relative; z-index: 1; padding: 7px 16px; border-radius: 999px; text-align: center;
  color: var(--fg-2); text-decoration: none; font-size: 15px; font-weight: 550; white-space: nowrap;
}
.segmented a[aria-current="page"] { color: var(--fg); }
.segmented .thumb {
  position: absolute; inset: 3px auto 3px 3px; width: calc(50% - 3px); border-radius: 999px;
  background: rgba(255, 255, 255, .2); box-shadow: 0 1px 4px rgba(0, 0, 0, .12), inset 0 1px 0 var(--glass-rim);
  transition: transform .35s cubic-bezier(.3, 1.3, .5, 1);
}
.segmented[data-active="signup"] .thumb { transform: translateX(100%); }

.view { position: relative; }
.intro { padding: 48px 0 30px; }
.rules { margin: 16px 0 0; max-width: 36em; color: var(--fg-2); font-size: 17px; }
.rules b { color: var(--fg); font-weight: 600; }
.status { margin: 14px 0 0; font-size: 14px; color: var(--fg-3); }
.demo-note { margin: 6px 0 0; font-size: 14px; color: var(--warn); max-width: 40em; }

/* ---------- toolbar ---------- */
.toolbar {
  position: sticky; top: 72px; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 8px; border-radius: 22px; margin-bottom: 18px;
}
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--hair); }
.seg button {
  font: inherit; font-size: 14px; font-weight: 550; padding: 6px 13px; border: 0; border-radius: 999px;
  background: transparent; color: var(--fg-2); cursor: pointer;
}
.seg button[aria-checked="true"], .seg button[aria-pressed="true"] {
  background: rgba(255, 255, 255, .2); color: var(--fg); box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.seg.wide { display: flex; }
.seg.wide button { flex: 1; padding: 9px 12px; font-size: 15px; }
.range { display: flex; align-items: center; gap: 10px; flex: 1 1 200px; font-size: 14px; color: var(--fg-2); }
.range output { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.toolbar .range span { white-space: nowrap; min-width: 9.5em; padding-left: 6px; }

input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 90px; height: 28px; margin: 0; background: transparent; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) var(--pct, 100%), var(--hair) var(--pct, 100%)); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--hair); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--accent); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; border: 0;
  background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .25);
}
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 600;
  font-size: 15px; padding: 10px 18px; border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.glass-btn { color: var(--fg); }
.glass-btn:hover { background: rgba(255, 255, 255, .16); }
.btn.small { padding: 6px 13px; font-size: 14px; }
.btn.primary {
  border: 0; color: var(--accent-ink); background: var(--accent); padding: 13px 22px; font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 14px rgba(246, 180, 67, .3);
}
.btn.primary:hover { filter: brightness(1.06); }
.btn.primary[disabled] { opacity: .6; cursor: progress; }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ---------- best deal (the one dominant element) ---------- */
.best { background: var(--surface); border-radius: 18px; padding: 22px 24px; margin-bottom: 14px; border: 1px solid var(--hair); }
.best-why { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--accent); }
.best-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.best-route { font-size: clamp(24px, 3vw, 32px); }
.best-route .codes-inline { font-family: var(--mono); font-size: .62em; color: var(--fg-3); font-weight: 500; margin-left: 10px; letter-spacing: 0; }
.best-detail { margin: 6px 0 0; color: var(--fg-2); }
.best-buy { display: flex; align-items: center; gap: 16px; }
.best-price { font-size: 44px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }

/* ---------- departures board ---------- */
.board { background: var(--surface); border-radius: 18px; border: 1px solid var(--hair); overflow: hidden; }
.board-head, .row {
  display: grid; grid-template-columns: minmax(150px, 1.3fr) minmax(170px, 1.3fr) minmax(120px, 1fr) 70px 80px 92px;
  align-items: center; gap: 12px; padding: 0 18px;
}
.board-head { padding-top: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
.board-head .r, .c-price { text-align: right; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { min-height: 62px; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--surface-2); }
.codes { font-family: var(--mono); font-size: 16px; display: block; }
.codes b { font-weight: 700; }
.arrow { color: var(--fg-3); margin: 0 6px; }
.city, .sub { display: block; font-size: 13px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dates { display: block; font-variant-numeric: tabular-nums; }
.c-stops, .c-air { color: var(--fg-2); font-size: 15px; }
.c-air { font-family: var(--mono); }
.c-price { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.c-go { text-align: right; }
.empty { margin: 0; padding: 22px 18px; color: var(--fg-2); }
.loading .rows { opacity: .5; transition: opacity .15s; }

/* ---------- sign up ---------- */
.signup { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: start; padding: 54px 0 30px; }
.signup-copy > p { color: var(--fg-2); font-size: 17px; max-width: 34em; margin: 16px 0 0; }
.form { margin-top: 28px; display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
.form input[type="email"] {
  font: inherit; font-size: 17px; padding: 12px 14px; border-radius: 12px; color: var(--fg);
  background: var(--surface-2); border: 1px solid var(--hair); outline: none;
}
.form input[type="email"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.form input[type="email"][aria-invalid="true"] { border-color: var(--bad); }
.field-set { border: 0; padding: 0; margin: 12px 0 0; }
.field-set legend { padding: 0; margin-bottom: 8px; }
.limits { display: grid; gap: 14px; margin-top: 16px; }
.limits .range { flex-direction: column; align-items: stretch; gap: 2px; }
.limits input[type="range"] { width: 100%; }
.form .btn.primary { margin-top: 18px; align-self: flex-start; }
.form-msg { min-height: 1.5em; margin: 6px 0 0; font-weight: 550; }
.form-msg.ok { color: var(--ok); }
.form-msg.err { color: var(--bad); }
.fine { margin: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* the real email, previewed */
.preview { margin: 0; }
.preview figcaption { font-size: 13px; color: var(--fg-3); margin-bottom: 10px; }
.preview figcaption span { margin-left: 6px; }
.mail { background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; box-shadow: 0 12px 32px rgba(16, 24, 40, .08); }
.mail-head { padding: 14px 18px; border-bottom: 1px solid var(--hair); display: grid; gap: 2px; }
.mail-from { font-size: 13px; color: var(--fg-3); }
.mail-subject { font-weight: 600; }
.mail-body { padding: 18px; }
.mail-body p { margin: 0; }
.pv-route { font-size: 20px; font-weight: 650; }
.pv-price { margin-top: 4px !important; color: var(--fg-2); }
.pv-price span { font-size: 30px; font-weight: 700; color: var(--fg); letter-spacing: -.02em; margin-right: 4px; }
.pv-dates { margin-top: 6px !important; color: var(--fg-2); }
.pv-btn { display: inline-block; margin: 16px 0; padding: 10px 18px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 600; font-size: 15px; }
.pv-fine { font-size: 12px; color: var(--fg-3); }

.foot { padding: 28px 0 44px; }

/* ---------- section headings ---------- */
.section-title { font-size: 22px; margin: 40px 0 12px; }
.section-sub { margin: -4px 0 14px; color: var(--fg-2); font-size: 15px; max-width: 46em; }

/* ---------- route search ---------- */
.search { background: var(--surface); border: 1px solid var(--hair); border-radius: 18px; padding: 22px 24px; margin-bottom: 8px; }
.search h2 { font-size: 22px; margin: 0 0 6px; }
.search .section-sub { margin: 0 0 16px; }
.search-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.pick { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.pick.grow { flex: 1 1 220px; }
select {
  font: inherit; font-size: 16px; color: var(--fg); background: var(--surface-2); border: 1px solid var(--hair);
  border-radius: 12px; padding: 10px 34px 10px 12px; -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%), linear-gradient(135deg, var(--fg-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.search-form .btn.primary { padding: 11px 26px; }
.s-msg { min-height: 1.4em; margin: 10px 0 0; font-size: 15px; color: var(--fg-2); }
.s-msg.err { color: var(--bad); }
.s-results { margin-top: 6px; }
.s-summary { margin: 0 0 12px; font-size: 16px; }
.s-summary b { font-variant-numeric: tabular-nums; }

/* month calendar of prices */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal .dow { font-size: 12px; font-weight: 600; color: var(--fg-3); text-align: center; padding-bottom: 2px; }
.cal .day {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 58px;
  border-radius: 12px; background: var(--surface-2); color: var(--fg); text-decoration: none; border: 1px solid transparent;
}
.cal a.day:hover { border-color: var(--accent); }
.cal .day .n { font-size: 12px; color: var(--fg-3); }
.cal .day .p { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cal .day.none .p { color: var(--fg-3); font-weight: 400; }
.cal .day.low { background: var(--accent-soft); }
.cal .day.min { border-color: var(--accent); background: rgba(246, 180, 67, .28); }
.cal .day.min .p { color: var(--accent); }
.cal .day.deal { background: rgba(90, 212, 138, .16); }
.cal .day.deal .p { color: var(--ok); }
.cal .gap { visibility: hidden; }

/* recently checked */
.checks .board-head, .checks .row { grid-template-columns: minmax(150px, 1.3fr) minmax(190px, 1.6fr) 120px 70px 100px; }
.checks .r, .checks .num { text-align: right; }
.checks .num { font-variant-numeric: tabular-nums; }
.checks .over { color: var(--fg-2); }
.checks .under { color: var(--ok); font-weight: 700; }
.checks .row { min-height: 56px; }

/* ---------- nav account ---------- */
.nav-right { display: flex; align-items: center; gap: 8px; }
#account-btn { padding: 7px 14px; }

/* ---------- sheets (sign in, booking): glass, like system sheets ---------- */
.sheet {
  width: min(460px, calc(100% - 24px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 24px;
  border-radius: 24px; color: var(--fg); background: color-mix(in srgb, var(--surface) 82%, transparent);
}
.sheet.wide { width: min(720px, calc(100% - 24px)); }
.sheet::backdrop { background: rgba(10, 14, 20, .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet h2 { font-size: 22px; margin: 0 40px 8px 0; }
.sheet h3 { font-size: 17px; margin: 0 0 6px; }
.sheet-close { position: absolute; top: 14px; right: 14px; margin: 0; }
.sheet-close button {
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; font-size: 14px;
  color: var(--fg-2); background: var(--hair);
}
.muted-p { color: var(--fg-2); margin: 0 0 14px; }
#signin-form { display: flex; flex-direction: column; gap: 8px; }
#signin-form input, .book-form input[type="date"] {
  font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 12px; color: var(--fg);
  background: var(--surface-2); border: 1px solid var(--hair); outline: none;
}
#signin-form .btn.primary { align-self: flex-start; margin-top: 8px; }
.mode-note { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; font-size: 14px; background: rgba(240, 180, 90, .18); color: var(--warn); }
.mode-note.live { background: rgba(255, 122, 112, .14); color: var(--bad); }
.setup-note { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; font-size: 14px; background: var(--hair); color: var(--fg-2); }
.setup-note code { font-family: var(--mono); font-size: 13px; color: var(--fg); }

.book-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.travelers { border: 0; padding: 0; margin: 0; }
.travelers > div { display: flex; gap: 6px; flex-wrap: wrap; }
.chk { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--hair); font-size: 15px; cursor: pointer; }
.chk input { accent-color: var(--accent); }
.chk.off { opacity: .55; cursor: not-allowed; }

.offers { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.offer {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 12px 14px;
  border-radius: 14px; border: 1px solid var(--hair); background: var(--surface-2); cursor: pointer;
}
.offer:hover { border-color: var(--fg-3); }
.offer[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.offer .legs { display: grid; gap: 4px; font-size: 15px; }
.offer .leg { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.offer .leg b { font-variant-numeric: tabular-nums; }
.offer .leg .sub { display: inline; }
.offer .o-price { text-align: right; }
.offer .o-price b { font-size: 22px; font-variant-numeric: tabular-nums; }
.offer .o-price span { display: block; font-size: 12px; color: var(--fg-3); }
.offer .o-meta { grid-column: 1 / -1; font-size: 13px; color: var(--fg-3); }

.confirm { margin-top: 14px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--hair); }
.confirm p { margin: 0 0 8px; }
.terms { margin: 0 0 12px; padding-left: 18px; color: var(--fg-2); font-size: 14px; }
.btn.buy { border: 0; color: #fff; background: var(--ok); padding: 13px 26px; font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 14px rgba(0, 0, 0, .25); }
.btn.buy[disabled] { opacity: .6; cursor: progress; }
.b-result { margin: 12px 0 0; font-weight: 600; }
.b-result.ok { color: var(--ok); }
.b-result.err { color: var(--bad); }
.cal button.day { font: inherit; cursor: pointer; }
.cal button.day:hover { border-color: var(--accent); }
.row .btn.buy-small { border: 0; color: #fff; background: var(--accent); }

/* ---------- account ---------- */
.segmented[data-active="account"] .thumb { opacity: 0; }
.account { padding: 48px 0 20px; max-width: 760px; }
.lead-p { color: var(--fg-2); font-size: 17px; margin: 14px 0 22px; max-width: 40em; }
.acct-list { display: grid; gap: 16px; margin-bottom: 22px; }
.traveler { background: var(--surface); border: 1px solid var(--hair); border-radius: 18px; padding: 20px 22px; }
.t-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.t-name { font-size: 20px; margin: 0; }
.t-status { font-size: 13px; font-weight: 600; color: var(--fg-3); }
.t-status.ready { color: var(--ok); }
.t-status.todo { color: var(--warn); }
.t-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 14px; }
.f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.f input, .f select {
  font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 12px; color: var(--fg);
  background-color: var(--surface-2); border: 1px solid var(--hair); outline: none; width: 100%;
}
.f select { padding-right: 34px; }
.f input:focus, .f select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.f [aria-invalid="true"] { border-color: var(--bad); }
.f-err { font-size: 13px; color: var(--bad); min-height: 0; }
.f-err:empty { display: none; }
.passport { border: 0; border-top: 1px solid var(--hair); margin: 16px 0 0; padding: 14px 0 0; }
.passport legend { padding: 0 0 8px; }
.t-actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.t-msg { font-size: 14px; font-weight: 550; }
.t-msg.ok { color: var(--ok); }
.t-msg.err { color: var(--bad); }

/* ---------- nav: three tabs ---------- */
.segmented { grid-template-columns: repeat(3, 1fr); }
.segmented .thumb { width: calc((100% - 6px) / 3); }
.segmented[data-active="logic"] .thumb { transform: translateX(100%); }
.segmented[data-active="signup"] .thumb { transform: translateX(200%); }

/* ---------- deals: two columns ---------- */
.deals-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.deals-head .section-title { margin-bottom: 12px; }
.deals-head .toolbar { margin-bottom: 14px; position: static; }
.deal-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.deal-col { background: var(--surface); border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; }
.col-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--hair); }
.col-head h3 { margin: 0; font-size: 18px; letter-spacing: -.01em; }
.col-rule { margin: 4px 0 0; font-size: 13px; color: var(--fg-3); }
.deal-list { list-style: none; margin: 0; padding: 0; }
.deal-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--hair); }
.deal-row:last-child { border-bottom: 0; }
.deal-row:hover { background: var(--surface-2); }
.deal-row p { margin: 0; }
.dr-main { min-width: 0; }
.dr-route { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dr-route .codes { font-size: 15px; }
.dr-route .city { display: inline; font-size: 14px; }
.dr-when { font-size: 14px; color: var(--fg-2); margin-top: 2px !important; }
.dr-usual { font-size: 13px; color: var(--fg-3); margin-top: 2px !important; }
.dr-usual .why { color: var(--ok); font-weight: 600; }
.dr-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 6px; flex: none; }
.dr-price { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; display: flex; align-items: center; gap: 6px; }
.ping-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.deal-row.pinged { box-shadow: inset 3px 0 0 var(--ok); }
.deal-col .empty { padding: 18px; margin: 0; }
.legend { margin: 10px 2px 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---------- logic panel ---------- */
.logic { padding: 48px 0 20px; }
.logic-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.logic-cat { background: var(--surface); border: 1px solid var(--hair); border-radius: 18px; padding: 20px 22px; }
.lc-title { font-size: 20px; margin: 0; }
.lc-summary { margin: 6px 0 4px; font-size: 14px; color: var(--fg-2); min-height: 3em; }
.lc-group { border: 0; border-top: 1px solid var(--hair); margin: 14px 0 0; padding: 14px 0 0; }
.lc-group legend { font-size: 12px; font-weight: 600; color: var(--fg-3); letter-spacing: .02em; padding: 0 0 6px; }
.lc-line { margin: 0; font-size: 16px; line-height: 2.4; }
.num {
  font: inherit; font-size: 16px; width: 4.2em; padding: 6px 8px; margin: 0 2px; border-radius: 10px; text-align: center;
  color: var(--fg); background: var(--surface-2); border: 1px solid var(--hair); font-variant-numeric: tabular-nums;
}
.num.wide { width: 5.4em; }
.num:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.num[aria-invalid="true"] { border-color: var(--bad); }
.num:disabled, .lc-choice input:disabled { opacity: .7; }
.lc-choice { display: flex; align-items: center; gap: 10px; margin: 2px 0; font-size: 16px; line-height: 2.4; cursor: pointer; }
.lc-choice input[type="radio"] { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; flex: none; }
.lc-help { margin: 4px 0 0 28px; font-size: 14px; color: var(--fg-2); line-height: 2.2; }
.lc-help .num { font-size: 14px; width: 3.6em; padding: 4px 6px; }
.logic-cat .f-err { display: block; }
.logic-actions { margin-top: 18px; }
.learned .board-head, .learned .row { grid-template-columns: minmax(160px, 1.6fr) 1fr 90px 100px; }
.learned .r, .learned .num-c { text-align: right; font-variant-numeric: tabular-nums; }
.learned .row { min-height: 52px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .board-head { display: none; }
  .row {
    grid-template-columns: 1fr auto; grid-template-areas: "route price" "dates go" "meta go";
    gap: 2px 12px; padding: 12px 16px;
  }
  .c-route { grid-area: route; } .c-price { grid-area: price; }
  .c-dates { grid-area: dates; } .c-go { grid-area: go; align-self: center; }
  .c-stops, .c-air { display: none; }
  .deal-cols, .logic-cols { grid-template-columns: 1fr; }
  .learned .row { grid-template-columns: 1fr auto; }
  .learned .l-typ, .learned .l-n { display: none; }
  .checks .row { grid-template-columns: 1fr auto; grid-template-areas: "route price" "dates when"; }
  .checks .k-route { grid-area: route; } .checks .k-dates { grid-area: dates; } .checks .k-price { grid-area: price; }
  .checks .k-when { grid-area: when; } .checks .k-limit { display: none; }
  .row .days::after { content: attr(data-meta); }
  .signup { grid-template-columns: 1fr; gap: 32px; padding-top: 30px; }
}
@media (max-width: 600px) {
  .intro { padding-top: 30px; }
  .toolbar { position: static; padding: 8px; gap: 8px; }
  .toolbar .seg { flex: 1 1 auto; justify-content: space-between; }
  .toolbar .seg button { flex: 1; }
  .toolbar .range span { min-width: 0; }
  .best { padding: 18px; }
  .search { padding: 18px 16px; }
  .pick { flex: 1 1 45%; min-width: 0; }
  .pick.grow { flex: 1 1 100%; }
  .search-form .btn.primary { flex: 1 1 100%; }
  .cal { gap: 4px; }
  .cal .day { min-height: 50px; border-radius: 10px; }
  .cal .day .p { font-size: 13px; }
  .best-price { font-size: 36px; }
  .segmented a { padding: 7px 12px; font-size: 14px; }
  .wordmark { font-size: 15px; }
  .nav { padding-left: 14px; }
  .nav-right { gap: 4px; }
  #account-btn { padding: 6px 10px; font-size: 13px; }
  .segmented a { padding: 7px 9px; font-size: 13px; }
  .sheet { padding: 20px 16px; }
  .book-form .pick { flex: 1 1 40%; }
  .book-form .btn.primary { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* the note under the price calendar wraps */
.s-results .sub { white-space: normal; overflow: visible; }

/* booking sheet: let flight details wrap so prices stay visible on phones */
.offer { grid-template-columns: minmax(0, 1fr) auto; }
.offer .leg .sub { white-space: normal; overflow: visible; }
.sheet .offers, .sheet .confirm { max-width: 100%; }
.t-note { margin: -6px 0 12px; font-size: 13px; color: var(--fg-3); }
.t-note code { font-family: var(--mono); }
.wordmark { white-space: nowrap; }
@media (max-width: 600px) { .acct-who { display: none; } }

/* =====================================================================
   Photo + glass
   ===================================================================== */

/* the photo: fixed behind every page, slightly blurred, with a scrim that deepens toward the bottom */
body { background: var(--bg); isolation: isolate; }
body::before, body::after { content: ""; position: fixed; z-index: -2; pointer-events: none; }
body::before {
  inset: -24px; background: var(--bg) url("/bg.jpg") center 35% / cover no-repeat;
  filter: blur(5px) saturate(1.08);
}
body::after {
  inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6, 18, 22, .38) 0%, rgba(6, 18, 22, .18) 30%, rgba(6, 18, 22, .55) 75%, rgba(6, 18, 22, .78) 100%);
}

/* headlines in a display serif */
h1 { font-family: var(--display); font-weight: 400; letter-spacing: -.01em; font-size: clamp(36px, 5vw, 54px); line-height: 1.04; }
a { color: var(--accent); }

/* content panels are liquid glass now, darker than the controls so text stays readable */
.best, .board, .search, .confirm, .traveler, .deal-col, .logic-cat, .mail {
  background: var(--surface);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 40px rgba(0, 0, 0, .22);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .best, .board, .search, .confirm, .traveler, .deal-col, .logic-cat, .mail { background: var(--surface-solid); }
}
.deal-row:hover, .row:hover { background: rgba(255, 255, 255, .05); }

/* nav floats over the photo */
.nav { --glass-fill: rgba(14, 30, 36, .34); }
.wordmark { display: inline-flex; align-items: center; gap: 9px; font-size: 18px; }
.wordmark::before {
  content: ""; width: 22px; height: 22px; border-radius: 7px; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center / 16px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* primary actions: the one warm color */
.btn.primary {
  color: var(--accent-ink); background: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 20px rgba(246, 180, 67, .28);
}
.btn.primary:hover { filter: brightness(1.05); }
.row .btn.buy-small { color: var(--accent-ink); background: var(--accent); }

/* ---------- hero ---------- */
.hero {
  min-height: min(78vh, 760px); display: flex; flex-direction: column; justify-content: flex-end;
  padding: 120px 0 56px;
}
.hero h1 {
  font-size: clamp(52px, 9vw, 112px); line-height: .95; letter-spacing: -.02em; max-width: 10em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .25);
}
.hero h1 em { font-style: italic; color: var(--accent); }
.hero-sub { margin: 20px 0 0; font-size: clamp(17px, 1.6vw, 20px); color: rgba(245, 247, 244, .9); max-width: 30em; text-shadow: 0 1px 12px rgba(0, 0, 0, .3); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hero-cta .btn { padding: 14px 24px; font-size: 16px; }
.hero .status { margin-top: 22px; font-size: 13px; color: rgba(245, 247, 244, .7); display: flex; align-items: center; gap: 8px; }
.hero .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(90, 212, 138, .2); }
.hero .status:empty { display: none; }

/* sections below the hero */
.section-title { font-size: 26px; letter-spacing: -.015em; }
.deals-sec { scroll-margin-top: 80px; padding-top: 8px; }
.deals-head .section-title { margin-top: 8px; }
.col-head h3 { font-size: 19px; }
.dr-price { font-size: 24px; }

/* a deal worth pinging wears the accent */
.ping-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.deal-row.pinged { box-shadow: inset 3px 0 0 var(--accent); background: linear-gradient(90deg, rgba(246, 180, 67, .09), transparent 60%); }
.dr-usual .why { color: var(--accent); }
.checks .under { color: var(--accent); }
.cal .day.deal { background: var(--accent-soft); }
.cal .day.deal .p { color: var(--accent); }

/* sheets: more opaque glass so forms read cleanly */
.sheet { background: rgba(16, 32, 38, .82); border: 1px solid var(--glass-edge); }
.sheet::backdrop { background: rgba(4, 12, 16, .45); }
.sheet-close button { background: rgba(255, 255, 255, .1); }

/* inputs on dark glass */
select, .num, .f input, .f select, #signin-form input, .book-form input[type="date"], .form input[type="email"] { color-scheme: dark; }
.form input[type="email"], #signin-form input, .book-form input[type="date"] { background: var(--surface-2); }
.foot { color: rgba(226, 235, 231, .55); }

@media (max-width: 600px) {
  .hero { min-height: 72vh; padding: 100px 0 40px; }
  .hero-cta .btn { flex: 1 1 auto; }
  .wordmark::before { width: 20px; height: 20px; }
}
.route-search { margin-top: 44px; }
@media (max-width: 600px) { .wordmark { font-size: 15px; gap: 7px; } }
@media (max-width: 440px) { .nav .wordmark span { display: none; } .nav { padding-left: 10px; } }

/* ---------- self-hosted display font (no third-party requests) ---------- */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/instrument-serif.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/instrument-serif-italic.woff2") format("woff2"); }

/* pages that aren't one of the three tabs leave the tab thumb hidden */
.segmented:not([data-active="browse"]):not([data-active="logic"]):not([data-active="signup"]) .thumb { opacity: 0; }

/* ---------- reading pages: about, privacy, terms, accessibility, contact ---------- */
.prose {
  max-width: 720px; margin: 48px 0 24px; padding: 34px 38px; border-radius: 22px;
  background: var(--surface); -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 40px rgba(0, 0, 0, .22);
}
.prose h1 { margin-bottom: 10px; }
.prose h2 { font-size: 19px; margin: 30px 0 8px; letter-spacing: -.01em; }
.prose p, .prose li { color: var(--fg-2); font-size: 16px; line-height: 1.65; }
.prose p { margin: 0 0 12px; }
.prose ul { margin: 0 0 12px; padding-left: 20px; }
.prose li { margin: 0 0 8px; }
.prose li b, .prose p b { color: var(--fg); font-weight: 600; }
.prose code { font-family: var(--mono); font-size: 14px; color: var(--fg); background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }
.prose .lead-p { margin-top: 6px; }
.callout-p { padding: 12px 16px; border-radius: 14px; background: var(--accent-soft); color: var(--fg) !important; border: 1px solid rgba(246, 180, 67, .3); }
.prose details { border-top: 1px solid var(--hair); }
.prose details:last-of-type { border-bottom: 1px solid var(--hair); }
.prose summary {
  cursor: pointer; list-style: none; padding: 14px 28px 14px 0; position: relative; font-weight: 600; color: var(--fg);
}
.prose summary::-webkit-details-marker { display: none; }
.prose summary::after { content: "+"; position: absolute; right: 4px; top: 11px; font-size: 22px; font-weight: 400; color: var(--accent); transition: transform .2s; }
.prose details[open] summary::after { transform: rotate(45deg); }
.prose details p { margin: 0 0 16px; }

.contact-form { display: grid; gap: 14px; margin-top: 18px; }
.f textarea {
  font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 12px; color: var(--fg); resize: vertical; min-height: 140px;
  background-color: var(--surface-2); border: 1px solid var(--hair); outline: none; width: 100%;
}
.f textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.f textarea[aria-invalid="true"] { border-color: var(--bad); }
.contact-form .t-actions { margin-top: 4px; }

/* ---------- footer ---------- */
.site-foot {
  margin-top: 64px; padding: 44px 0 34px; border-top: 1px solid var(--hair);
  background: rgba(6, 16, 20, .55); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; }
.foot-brand p { margin: 12px 0 16px; color: var(--fg-2); font-size: 15px; max-width: 22em; }
.foot-col { display: flex; flex-direction: column; gap: 9px; }
.foot-col h2 { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); margin: 6px 0 4px; }
.foot-col a { color: var(--fg-2); text-decoration: none; font-size: 15px; width: fit-content; }
.foot-col a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.foot-base { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; }
.foot-base p { margin: 0; font-size: 13px; color: var(--fg-3); }

@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .prose { margin-top: 28px; padding: 24px 18px; border-radius: 18px; }
  .site-foot { margin-top: 44px; }
}

/* ---------- member account ---------- */
.acct-card {
  margin: 0 0 16px; padding: 22px 24px; border-radius: 20px;
  background: var(--surface); -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 40px rgba(0, 0, 0, .22);
}
.acct-card h2 { font-size: 20px; margin: 0 0 12px; }
.acct-card .muted-p { margin: -4px 0 14px; }
.acct-card .fine { margin-top: 10px; }
.acct-card .limits { max-width: 520px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-head h2 { margin: 0 0 12px; }
#acct-alerts.is-off .field-set, #acct-alerts.is-off .limits { opacity: .45; }
.f input[readonly] { color: var(--fg-2); cursor: default; }
.welcome-note { margin: 0 0 18px; padding: 14px 18px; border-radius: 16px; background: var(--accent-soft);
  border: 1px solid rgba(246, 180, 67, .35); color: var(--fg); font-weight: 550; }
.data-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn.danger { border: 1px solid rgba(255, 122, 112, .45); color: #ffb3ad; background: rgba(255, 122, 112, .12); }
.btn.danger:hover { background: rgba(255, 122, 112, .2); }
#delete-confirm { font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 12px; color: var(--fg); width: 100%;
  background: var(--surface-2); border: 1px solid var(--hair); outline: none; margin: 6px 0 4px; letter-spacing: .08em; }
#delete-confirm:focus { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(255, 122, 112, .25); }
#acct-signout { margin-top: 4px; }

/* iOS-style switch */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 12px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch span { position: relative; width: 50px; height: 30px; border-radius: 999px; background: rgba(255, 255, 255, .18);
  transition: background .2s; flex: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .25s cubic-bezier(.3, 1.3, .5, 1); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-label { font-size: 15px; color: var(--fg-2); min-width: 2em; }

/* alerts tab when signed in */
.signup-member { margin-top: 24px; max-width: 460px; }
.signup-member p { margin: 0 0 14px; color: var(--fg-2); }
.signup-member b { color: var(--fg); }
.signup-hint { margin-top: 14px !important; }
@media (max-width: 600px) { .acct-card { padding: 18px 16px; } .data-actions .btn { flex: 1 1 100%; } }

/* =====================================================================
   Accounts, paywall, deal details
   ===================================================================== */

/* deal rows are buttons that open the detail card */
.deal-row { padding: 0; }
.dr-open {
  all: unset; box-sizing: border-box; display: flex; justify-content: space-between; gap: 12px; width: 100%;
  padding: 12px 18px; cursor: pointer; color: inherit; font: inherit;
}
.dr-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 12px; }
.dr-open .dr-main, .dr-open .dr-side { display: flex; flex-direction: column; }
.dr-open .dr-route { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dr-open .dr-when { font-size: 14px; color: var(--fg-2); margin-top: 2px; }
.dr-open .dr-usual { font-size: 13px; color: var(--fg-3); margin-top: 2px; }
.dr-side { align-items: flex-end; justify-content: space-between; gap: 6px; flex: none; }
.dr-more { font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.deal-row:hover .dr-more { text-decoration: underline; text-underline-offset: 3px; }

/* columns: 10 visible, the rest scroll inside the card */
.col-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.col-count { font-size: 13px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.deal-list.scrolls { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .25) transparent; }
.deal-list:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.col-more { margin: 0; padding: 9px 18px; font-size: 13px; font-weight: 600; color: var(--fg-3); text-align: center;
  border-top: 1px solid var(--hair); background: rgba(0, 0, 0, .12); }
.col-more::after { content: " ↓"; }
.col-more.done { opacity: .5; }

/* one deal, at a glance */
.deal-sheet { width: min(560px, calc(100% - 24px)); }
.eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.deal-sheet h2 { font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1.1; margin: 0 40px 2px 0; }
.deal-codes { margin: 0 0 14px; font-family: var(--mono); font-size: 14px; color: var(--fg-3); }
.deal-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.deal-price b { font-size: 46px; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.deal-price span { color: var(--fg-3); font-size: 14px; }
.why-pill { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--accent-soft);
  border: 1px solid rgba(246, 180, 67, .35); color: var(--fg); font-weight: 600; font-size: 15px; }
.deal-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0 0 12px;
  border-radius: 14px; overflow: hidden; background: var(--hair); border: 1px solid var(--hair); }
.deal-facts div { background: rgba(12, 27, 33, .9); padding: 10px 12px; min-width: 0; }
.deal-facts dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.deal-facts dd { margin: 2px 0 0; font-size: 15px; font-weight: 550; overflow-wrap: anywhere; }
.deal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 8px; }
@media (max-width: 520px) { .deal-facts { grid-template-columns: 1fr 1fr; } .deal-actions .btn { flex: 1 1 100%; } }

/* paywall */
.locked {
  margin: 8px 0 16px; padding: 22px 24px; border-radius: 20px; max-width: 640px;
  background: linear-gradient(rgba(246, 180, 67, .10), rgba(246, 180, 67, .04)), var(--surface);
  -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px);
  border: 1px solid rgba(246, 180, 67, .35);
}
.locked h3 { margin: 0 0 6px; font-size: 19px; display: flex; align-items: center; gap: 8px; }
.locked h3::before { content: ""; width: 16px; height: 16px; flex: none; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H5v13h14V9h-2zm-8-2a3 3 0 0 1 6 0v2H9V7z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H5v13h14V9h-2zm-8-2a3 3 0 0 1 6 0v2H9V7z'/%3E%3C/svg%3E") center / contain no-repeat; }
.locked p { margin: 0 0 14px; color: var(--fg-2); }
.search .locked { margin-top: 4px; }

/* auth dialog */
.auth-tabs { margin: 4px 0 16px; }
.auth-tabs button[aria-selected="true"] { background: rgba(255, 255, 255, .2); color: var(--fg); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.oauth { display: grid; gap: 10px; margin-bottom: 4px; }
.oauth-btn { width: 100%; background: #fff; color: #1f1f1f; border: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.oauth-btn.apple { background: #000; color: #fff; border: 1px solid rgba(255, 255, 255, .25); }
.oauth-btn:hover { filter: brightness(.96); }
.or { display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; color: var(--fg-3); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
#auth-form, #pw-form { display: grid; gap: 12px; }
#auth-form .t-actions, #pw-form .t-actions { margin-top: 4px; }
.linkish { all: unset; cursor: pointer; color: var(--accent); font-size: 14px; font-weight: 550; }
.linkish:hover { text-decoration: underline; text-underline-offset: 3px; }
.linkish:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.f input[type="password"] { letter-spacing: .04em; }
.form-msg:empty { display: none; }

/* membership card */
.pill { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px;
  border-radius: 999px; background: rgba(255, 255, 255, .12); color: var(--fg-2); margin-bottom: 12px; }
.pill[data-kind="member"], .pill[data-kind="admin"] { background: var(--accent-soft); color: var(--accent); }
.perks { margin: 0 0 14px; padding-left: 20px; color: var(--fg-2); }
.perks li { margin-bottom: 4px; }
.rules-line { font-size: 14px; }

/* ---------- how it works, stats, plans ---------- */
.how { margin-top: 48px; }
.steps { list-style: none; counter-reset: step; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.steps li { counter-increment: step; position: relative; padding: 52px 20px 20px; border-radius: 18px; color: var(--fg-2); font-size: 15px;
  background: var(--surface); -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); border: 1px solid var(--glass-edge); }
.steps li::before { content: counter(step); position: absolute; top: 16px; left: 20px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--accent); color: var(--accent-ink); }
.steps b { display: block; color: var(--fg); margin-bottom: 4px; font-size: 16px; }
.stats { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 6px 0 8px; }
.stat { display: flex; align-items: baseline; gap: 8px; color: var(--fg-2); font-size: 14px; }
.stat b { font-family: var(--display); font-weight: 400; font-size: 34px; color: var(--accent); line-height: 1; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 820px; }
.plan { padding: 24px; border-radius: 20px; background: var(--surface); -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px);
  border: 1px solid var(--glass-edge); display: flex; flex-direction: column; }
.plan-member { border-color: rgba(246, 180, 67, .5); background: linear-gradient(rgba(246, 180, 67, .10), rgba(246, 180, 67, .03)), var(--surface); }
.plan h3 { margin: 0; font-size: 18px; }
.plan-price { margin: 6px 0 12px; font-size: 38px; font-weight: 700; letter-spacing: -.02em; }
.plan-price span { font-size: 15px; font-weight: 500; color: var(--fg-3); }
.plan ul { margin: 0 0 18px; padding-left: 20px; color: var(--fg-2); flex: 1; }
.plan li { margin-bottom: 6px; }
.plan .btn { align-self: flex-start; }
.plan .btn[disabled] { opacity: .7; cursor: default; }
@media (max-width: 760px) { .steps, .plans { grid-template-columns: 1fr; } .steps li { padding-top: 50px; } }

/* deal card extras */
.save-pill { margin: -4px 0 12px; font-size: 15px; font-weight: 650; color: var(--ok); }
.howto { margin: 0 0 6px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--hair); }
.howto summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.howto ol { margin: 10px 0 4px; padding-left: 20px; color: var(--fg-2); font-size: 14px; }
.howto li { margin-bottom: 6px; }

/* alert preferences */
.dest-pick { margin-top: 12px; display: grid; gap: 12px; max-height: 320px; overflow-y: auto; padding: 12px;
  border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--hair); }
.dest-group { display: flex; flex-wrap: wrap; gap: 6px; }
.dest-group .field-label { width: 100%; margin: 0 0 2px; }
.dest-group .chk { font-size: 14px; padding: 6px 10px; }
.switch.nonstop { margin: 14px 0 4px; }
.switch.nonstop b { font-weight: 550; }