/* ============================================================
   Fonts
   ============================================================
   Self-hosted, not linked from Google: the privacy policy promises that no
   request leaves the browser for a third party, and a font CDN is exactly such
   a request. Both families are SIL OFL 1.1 (licences next to the files in
   /fonts). Latin + Latin Extended only — Latvian needs the second, nothing we
   show needs more. swap: the text is readable in the fallback while they load.
   ============================================================ */
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url(/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url(/fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/dm-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/dm-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Design tokens
   ============================================================ */
:root {
  color-scheme: light;

  --bg: #f5f4f7;
  --bg-elev: #eeecf2;
  --surface: #ffffff;
  --surface-2: #faf9fb;
  --border: #e2dfe7;
  --border-strong: #cdc8d6;
  --text: #17141d;
  --muted: #5c5767;
  --faint: #858090;

  /* Violet, from the landing ("C2"): one saturated accent on a near-white,
     faintly violet ground, everything else ink and rule. Shared by the landing
     and the signed-in pages so they read as one product. --on-accent is the
     text on an accent fill — white here, ink in dark mode, where the accent is
     light enough that white on it would fail contrast. */
  --accent: #5227d6;
  --accent-hover: #4419b8;
  --accent-soft: #efeafd;
  --on-accent: #ffffff;

  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-display: 'Bricolage Grotesque', 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Landing: the vivid top half ... */
  --lp-bg: #fff7ef; --lp-bg2: #fdebdc; --lp-card: #ffffff;
  --lp-ink: #1a0b2e; --lp-ink2: #4a3a5c; --lp-muted: #6b5b7d; --lp-line: #1a0b2e;
  --lp-pink: #ff4f8b; --lp-orange: #ff8a3d; --lp-violet: #6b3cff; --lp-yellow: #ffd23f;
  /* the gradient text on the cream ground, deepened until it holds 3:1 */
  --lp-hot1: #e0245e; --lp-hot2: #d9530a;
  --lp-chart: #6b3cff;
  --lp-good: #0b7f50; --lp-good-soft: #d8f7e8; --lp-on-good: #ffffff;
  --lp-c1: #ff9ec4; --lp-c2: #ffd25a; --lp-c3: #a9bcff; --lp-c4: #7fe6cc; --lp-c5: #ffb184; --lp-c6: #cfb2ff;
  --lp-deals-bg: #1a0b2e; --lp-deals-ink: #fff7ef; --lp-deals-ink2: #dccfe6;
  /* ... and the calm lower half. */
  --lp-s1: #ffffff; --lp-s2: #f5f4f7; --lp-t1: #17141d; --lp-t2: #4f4a58; --lp-t3: #66616f; --lp-rule: #e2dfe7;
  --lp-ph-bg: #fff8e6; --lp-ph-bd: #c98a00; --lp-ph-t: #7a5200;
  --good: #157a49;
  --good-soft: #e6f3ec;
  --warn: #9a5700;
  --warn-soft: #fdf1e1;
  --danger: #c8382c;
  --danger-soft: #fdeceb;

  /* Categorical series slots. Fixed order — a series keeps its colour when
     others are filtered out, so the eye can track one airport across toggles.
     Validated (adjacent CVD ΔE >= 8, normal-vision ΔE >= 15) for both modes. */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;

  /* C2's shape language, calm edition: rounder cards and pill controls, and
     the landing's hard offset shadow re-stepped to a faint one, so a card on
     a neutral surface still reads as an object rather than a box outline. */
  --radius: 20px;
  --radius-sm: 12px;
  --card-shadow: 4px 4px 0 rgb(23 20 29 / .07);
  --card-shadow-hover: 6px 6px 0 color-mix(in srgb, var(--accent) 20%, transparent);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, .08);
  --shadow-lg: 0 18px 48px rgba(16, 24, 40, .18);
}

/* Dark is selected, not derived: the same tokens are re-stepped for a dark
   ground rather than inverted. The theme attribute is stamped on <html> by a
   boot script in index.html, which resolves 'auto' from the OS. Binding to the
   attribute (not the media query) is what lets the toggle override the OS. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #121016;
    --bg-elev: #1a1720;
    --surface: #1b1822;
    --surface-2: #211d29;
    --border: #2f2939;
    --border-strong: #433b50;
    --text: #f1eef5;
    --muted: #aba4b6;
    --faint: #7f7889;

    /* Re-stepped for the dark ground, not an inversion of the light value. */
    --accent: #b39cff;
    --accent-hover: #c7b6ff;
    --accent-soft: #2a2340;
    --on-accent: #17141d;

    --lp-bg: #150a22; --lp-bg2: #1f1030; --lp-card: #24143a;
    --lp-ink: #fff3fa; --lp-ink2: #e2d4ee; --lp-muted: #b3a1c6; --lp-line: #000000;
    --lp-hot1: #ff5c95; --lp-hot2: #ff9a52;
    --lp-chart: #a58bff;
    --lp-good: #3fe29a; --lp-good-soft: #123a2a; --lp-on-good: #06281a;
    --lp-deals-bg: #2a1545; --lp-deals-ink: #fff3fa; --lp-deals-ink2: #d7c6e6;
    --lp-s1: #16131b; --lp-s2: #1f1b26; --lp-t1: #f1eef5; --lp-t2: #c3bccd; --lp-t3: #9a93a6; --lp-rule: #332d3d;
    --lp-ph-bg: #2a2210; --lp-ph-bd: #d9a62e; --lp-ph-t: #f0cf7a;
    --good: #4ec98a;
    --good-soft: #10281d;
    --warn: #e0a458;
    --warn-soft: #2a2114;
    --danger: #f0716a;
    --danger-soft: #2d1917;

    /* Same eight hues, re-stepped for the dark surface — not an auto-flip. */
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;

    --card-shadow: 4px 4px 0 rgb(0 0 0 / .5);
    --card-shadow-hover: 6px 6px 0 color-mix(in srgb, var(--accent) 28%, transparent);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .45);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
/* Headings in the landing's display face, everywhere, so a signed-in page is
   visibly the same product as the one that sold it. */
h1, h2, h3, .section-title, .brand-name { font-family: var(--font-display); }

.hidden { display: none !important; }

/* ============================================================
   Shell
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1140px; margin: 0 auto;
  padding: 12px 24px;
  display: flex; justify-content: space-between; align-items: center;
}
.brand { font-weight: 660; font-size: 16px; letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; }
.brand-mark {
  display: grid; place-items: center;
  width: 27px; height: 27px; border-radius: 8px;
  background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #7f5bd6));
  color: var(--on-accent); font-size: 14px;
}
/* min-width:0 lets the email chip shrink instead of pushing the row past the
   viewport — without it the header overflowed by 8px on a 375px screen. */
.userbox { display: flex; align-items: center; gap: 10px; min-width: 0; }
.planbadge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 20px; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  background: var(--bg-elev); color: var(--muted); border: 1px solid var(--border);
  transition: border-color .13s, color .13s;
}
.planbadge:hover { border-color: var(--accent); color: var(--text); }
.planbadge.premium {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #7f5bd6));
  color: var(--on-accent); border-color: transparent;
}

.topbar-right { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* Language: flags, because a flag is read at a glance in any language — with a
   title for the screen reader, since a flag is a country, not a language. */
.langpick { display: flex; gap: 2px; }
.flagbtn {
  border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center;
  width: 32px; height: 30px; border-radius: 7px; padding: 0;
  opacity: .42; transition: opacity .13s, background .13s;
}
.flagbtn svg {
  width: 21px; height: 14px; display: block; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}
.flagbtn:hover { opacity: .78; }
.flagbtn.active { opacity: 1; background: var(--surface); box-shadow: var(--shadow-sm); }

.iconbtn {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--muted); font-size: 15px; line-height: 1;
  transition: border-color .13s, color .13s, background .13s;
}
.iconbtn:hover { border-color: var(--accent); color: var(--text); }

/* ---------- toasts ----------
   Replaces alert(): a modal dialog for "the price is €84" stops the app dead
   and has to be dismissed before anything else can happen. */
.toasts {
  position: fixed; z-index: 200; right: 18px; bottom: 18px;
  display: flex; flex-direction: column; gap: 9px;
  max-width: min(380px, calc(100vw - 36px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  padding: 12px 14px; font-size: 13.5px;
  display: flex; gap: 11px; align-items: flex-start;
  animation: toast-in .18s ease-out;
}
.toast.good { border-left-color: var(--good); }
.toast.warn { border-left-color: var(--warn); }
.toast.bad  { border-left-color: var(--danger); }
.toast.out { animation: toast-out .16s ease-in forwards; }
.toast-body { flex: 1; min-width: 0; }
.toast-title { font-weight: 650; margin-bottom: 3px; }
.toast-body small { color: var(--muted); display: block; font-size: 12.5px; line-height: 1.5; }
.toast button {
  border: 0; background: transparent; cursor: pointer; color: var(--faint);
  font: inherit; font-size: 17px; line-height: 1; padding: 0 2px;
}
.toast button:hover { color: var(--text); }
@keyframes toast-in  { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px) } }
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.out { animation: none; }
}
@media (max-width: 640px) {
  .toasts { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}

.userchip {
  font-size: 13px; color: var(--muted);
  background: var(--bg-elev); border: 1px solid var(--border);
  padding: 4px 11px; border-radius: 20px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

.view { max-width: 1140px; margin: 0 auto; padding: 26px 24px 60px; }
.view-narrow { max-width: 460px; }

.card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 22px;
  box-shadow: var(--card-shadow);
}
.card h2 { margin: 0; font: 700 clamp(22px, 2.4vw, 28px)/1.15 var(--font-display); letter-spacing: -.025em; }
.card h3 { margin: 24px 0 8px; font: 700 16px/1.25 var(--font-display); letter-spacing: -.01em; }
.card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 18px;
}
.card-head .hint { margin: 4px 0 0; }

/* The "new tracking" form is a 12-field panel. A returning user opens this app
   to read prices, not to configure, so it collapses once there is anything to
   read; loadSearches() opens it when the list is empty. */
.card-collapsible { padding: 0; }
.card-collapsible > summary {
  display: flex; align-items: center; gap: 16px;
  padding: 24px 28px; cursor: pointer; list-style: none;
  border-radius: var(--radius);
}
.card-collapsible > summary::-webkit-details-marker { display: none; }
.card-collapsible > summary:hover { background: var(--surface-2); }
.card-collapsible[open] > summary { border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.sum-plus {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--accent-soft); color: var(--accent);
  border: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font-size: 24px; font-weight: 700; line-height: 1;
  transition: transform .18s;
}
.card-collapsible[open] .sum-plus { transform: rotate(45deg); }
/* A page is not a drawer: its "+" stays a "+" rather than turning into a close. */
.card-collapsible.is-page[open] .sum-plus { transform: none; }
.sum-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sum-text b { font: 700 clamp(22px, 2.4vw, 28px)/1.15 var(--font-display); letter-spacing: -.025em; }
.sum-text small { color: var(--muted); font-size: 15px; }
.card-collapsible > form { padding: 20px 28px 28px; }
.sum-tag {
  margin-left: auto; flex: none;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px;
  background: var(--accent-soft); color: var(--accent);
}
.sum-ai { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #7f5bd6)); color: var(--on-accent); }
.checkline { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text); cursor: pointer; }
.checkline input { width: auto; }

/* AI suggestions */
.ai-results { display: flex; flex-direction: column; gap: 12px; padding: 0 28px 28px; }
.ai-results:empty { display: none; }
.ai-card {
  border: 1.5px solid var(--border); border-radius: 16px;
  background: var(--surface-2); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 9px;
}
.ai-card h4 { margin: 0; font-size: 16px; font-weight: 660; display: flex; align-items: center; gap: 9px; }
.ai-card h4 .ai-flagname { color: var(--muted); font-weight: 400; font-size: 13.5px; }
.ai-line { font-size: 13.5px; color: var(--muted); }
.ai-line b { color: var(--text); font-weight: 620; }
.ai-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.ai-warn { color: var(--warn); }

.auth-card { margin-top: 56px; }
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-head h1 { font: 800 clamp(26px, 3vw, 32px)/1.1 var(--font-display); margin: 0 0 8px; letter-spacing: -.035em; text-wrap: balance; }

/* ============================================================
   Forms
   ============================================================ */
.fset {
  border: 0; border-top: 1px solid var(--border);
  margin: 0 0 4px; padding: 22px 0 24px; min-width: 0;
}
.fset:first-of-type { border-top: 0; padding-top: 4px; }
/* The landing's calm eyebrow: small, spaced, in the accent. */
.fset > legend {
  padding: 0 10px 0 0;
  font: 700 12.5px var(--font-sans);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 16px 18px;
}
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }

label { font-size: 13.5px; font-weight: 600; color: var(--text); }
label small { font-weight: 400; color: var(--muted); }

input, select {
  min-height: 46px;
  padding: 11px 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit; font-size: 15px;
  width: 100%;
  transition: border-color .13s, box-shadow .13s, background .13s;
}
input[type="checkbox"], input[type="radio"] { min-height: 0; accent-color: var(--accent); }
input:hover, select:hover { border-color: color-mix(in srgb, var(--text) 45%, var(--border-strong)); }
input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
input::placeholder { color: var(--faint); }

/* ---------- date range picker ----------
   Replaces two native <input type="date"> fields. The native control shows a
   locale-guessed segmented value and opens one month at a time, which cannot
   express "a window" — the thing this app is actually about. One field, one
   popover, two months side by side, presets in the rail. */
.daterange { position: relative; }

.rangefield {
  display: flex; align-items: center; gap: 16px;
  width: 100%; padding: 12px 16px; cursor: pointer;
  border: 1.5px solid var(--border-strong); border-radius: 16px;
  background: var(--surface); color: var(--text); font: inherit; text-align: left;
  transition: border-color .13s, box-shadow .13s, background .13s;
}
.rangefield:hover { border-color: color-mix(in srgb, var(--text) 45%, var(--border-strong)); }
.rangefield[aria-expanded="true"] {
  border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.rangeside { display: flex; flex-direction: column; gap: 1px; min-width: 116px; }
.rangecap { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.rangeval { font: 700 17px var(--font-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rangearrow { color: var(--faint); font-size: 15px; }
.rangelen { margin-left: auto; font-size: 12.5px; color: var(--muted); white-space: nowrap; }

.rangepop {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  display: flex; gap: 0;
  background: var(--surface); border: 1.5px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.rangepresets {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px; border-right: 1px solid var(--border);
  background: var(--surface-2);
}
.rangepresets button {
  padding: 9px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--muted);
  font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; white-space: nowrap;
  transition: background .13s, color .13s;
}
.rangepresets button:hover { background: var(--bg-elev); color: var(--text); }
.rangepresets button.active { background: var(--accent-soft); color: var(--accent); }

.rangecal { padding: 12px 14px 12px; }
.calbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.calspan { font-size: 13.5px; font-weight: 640; }
.calnav {
  width: 36px; height: 36px; flex: none; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--muted); font-size: 17px; line-height: 1;
}
.calnav:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.calnav:disabled { opacity: .35; cursor: not-allowed; }

.calmonths { display: flex; gap: 22px; }
.calmonth { width: 224px; }
.calmonth h4 { margin: 0 0 7px; font-size: 12.5px; font-weight: 640; text-align: center; }
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calgrid .dow {
  text-align: center; font-size: 10.5px; font-weight: 700;
  color: var(--faint); padding-bottom: 4px; text-transform: uppercase;
}
.calday {
  aspect-ratio: 1; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--text);
  font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums;
  display: grid; place-items: center;
  transition: background .1s, color .1s;
}
/* Excludes the selected states explicitly: :hover:not(:disabled) outranks
   .calday.edge on specificity, so without this the day under the cursor loses
   its selection colour exactly while you are choosing it. */
.calday:hover:not(:disabled):not(.edge):not(.in) { background: var(--bg-elev); }
.calday:disabled { color: var(--faint); opacity: .4; cursor: not-allowed; }
.calday.blank { visibility: hidden; }
.calday.today { box-shadow: inset 0 0 0 1px var(--border-strong); font-weight: 700; }
/* Square inner ends, rounded outer ends: the run reads as one continuous
   window rather than a row of separate selected days. */
.calday.in { background: var(--accent-soft); border-radius: 0; color: var(--accent); }
.calday.edge { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.calday.edge.start { border-radius: 7px 0 0 7px; }
.calday.edge.end { border-radius: 0 7px 7px 0; }
.calday.edge.start.end { border-radius: 7px; }

.calfoot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
}

@media (max-width: 720px) {
  .rangepop { flex-direction: column; left: 0; right: 0; }
  .rangepresets { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); }
  .calmonths { flex-direction: column; gap: 16px; }
  .calmonth { width: 100%; }
  .rangefield { flex-wrap: wrap; gap: 10px 16px; }
  .rangelen { margin-left: 0; width: 100%; }
}
input[type="number"] { font-variant-numeric: tabular-nums; }

.formbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-top: 22px; border-top: 1px solid var(--border);
}

/* ============================================================
   Buttons, chips, tabs
   ============================================================ */
/* C2's pill buttons, calm edition. Primary is ink (the landing's plan cards
   use the same), and on hover it lifts onto a violet offset shadow — the one
   loud touch a button gets. Ghost is a plain outlined pill. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: 700 15px/1.1 var(--font-sans);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  background: var(--bg-elev); color: var(--text);
  transition: background .13s, border-color .13s, color .13s, transform .15s, box-shadow .15s;
}
.btn:hover:not(:disabled) { transform: translate(-1px, -1px); }
.btn:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: none; }
.btn-primary { background: var(--lp-t1); color: var(--lp-s1); border-color: var(--lp-t1); }
.btn-primary:hover:not(:disabled) { box-shadow: 3px 3px 0 var(--accent); }
.btn-ghost { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover:not(:disabled) { border-color: var(--text); box-shadow: 3px 3px 0 color-mix(in srgb, var(--text) 14%, transparent); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 13.5px; }

.segmented {
  display: flex; gap: 3px; padding: 4px;
  border: 1.5px solid var(--border-strong); border-radius: 999px;
  background: var(--surface-2);
}
.seg {
  flex: 1; min-height: 36px; padding: 7px 10px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--muted);
  font: inherit; font-size: 14px; font-weight: 650;
  transition: background .13s, color .13s;
}
.seg:hover { color: var(--text); }
.seg.active { background: var(--accent); color: var(--on-accent); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip {
  min-height: 40px; padding: 8px 15px; border-radius: 999px;
  border: 1.5px solid var(--border-strong); background: var(--surface);
  color: var(--text); font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background .13s, border-color .13s, color .13s, transform .13s;
}
.chip:hover { border-color: var(--text); transform: translateY(-1px); }
.chip:active { transform: scale(.97); }
.chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.tabs, .viewtabs { display: flex; gap: 4px; margin-bottom: 18px; }
.tabs { padding: 4px; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 999px; }
.tab, .vtab {
  min-height: 40px; padding: 8px 16px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 650;
  transition: background .13s, color .13s;
}
.tab { flex: 1; }
.vtab { border: 1px solid var(--border); }
.tab:hover, .vtab:hover { color: var(--text); }
.tab.active, .vtab.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.error { color: var(--danger); font-size: 13px; margin: 6px 0 0; }
.hint { color: var(--muted); font-size: 12.5px; margin: 0; }
.statusline {
  background: var(--surface-2); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 14px;
}

/* ============================================================
   Autocomplete
   ============================================================ */
.autocomplete { position: relative; }
.suggestions {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: 16px;
  max-height: 268px; overflow-y: auto;
  box-shadow: var(--shadow-lg);
  padding: 6px;
}
.sug {
  padding: 10px 12px; cursor: pointer; border-radius: 10px;
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
}
.sug:hover, .sug.active { background: var(--accent-soft); }
.sug .code {
  font-weight: 680; font-variant-numeric: tabular-nums;
  background: var(--bg-elev); border-radius: 5px; padding: 1px 6px;
  margin-right: 7px; font-size: 12.5px;
}
.sug .meta { color: var(--faint); font-size: 12.5px; white-space: nowrap; }

/* ============================================================
   Lists
   ============================================================ */
.list { display: flex; flex-direction: column; gap: 14px; }
.row {
  border: 1.5px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  padding: 18px 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  flex-wrap: wrap;
  box-shadow: var(--card-shadow);
  transition: border-color .13s, box-shadow .16s, transform .16s;
}
.row:hover { border-color: var(--border-strong); box-shadow: var(--card-shadow-hover); transform: translate(-1px, -1px); }
.row-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 220px; }
.row-title { font: 700 17px/1.25 var(--font-display); letter-spacing: -.015em; }
.row-sub { color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.row-actions { display: flex; gap: 7px; align-items: center; }

.price { font: 800 24px/1.1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price.good { color: var(--good); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 650;
  background: var(--bg-elev); color: var(--muted); border: 1.5px solid var(--border);
}
.badge.good { background: var(--good-soft); color: var(--good); border-color: transparent; }
.badge.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge-route { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
/* The threshold is the one setting that decides whether you get told at all,
   so it carries weight the other chips do not. */
.badge-alert {
  background: var(--accent); color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 700; padding: 3px 11px;
}

/* Multi-airport picker */
.picker { display: flex; flex-direction: column; gap: 7px; }
.picked { display: flex; flex-wrap: wrap; gap: 6px; }
.picked:empty { display: none; }
.chip-pick {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 5px 4px 10px; border-radius: 20px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  font-size: 12.5px;
}
.chip-pick b { font-weight: 700; letter-spacing: .04em; }
.chip-pick button {
  border: 0; background: transparent; cursor: pointer;
  color: inherit; font: inherit; font-size: 15px; line-height: 1;
  padding: 0 4px; border-radius: 50%; opacity: .65;
}
.chip-pick button:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 18%, transparent); }

.empty { color: var(--muted); padding: 26px; text-align: center; font-size: 14px; }

/* ============================================================
   Tracked search panel — the "Kurss" layout
   One panel per tracked search: the current cheapest fare as the headline,
   its history as the argument, and the other airports as a switchable rail.
   ============================================================ */
/* Each tracked search is an independent unit, so it reads as its own card:
   own border, own header band, and a wide gutter between siblings. */
.panel {
  position: relative;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: border-color .13s, box-shadow .16s, transform .16s;
}
.panel:hover { border-color: var(--border-strong); box-shadow: var(--card-shadow-hover); transform: translate(-2px, -2px); }

/* The header carries a wash in the destination's own colour. Mixed against the
   surface rather than painted over it, so the same rule works in both themes
   and the title keeps its contrast — the tint is a hint, never a background
   the text has to fight. */
.panel-top {
  position: relative;
  padding: 20px 26px 16px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(
      120% 180% at 100% 0%,
      color-mix(in srgb, hsl(var(--dest-hue, 200) 62% 52%) 16%, transparent),
      transparent 62%),
    linear-gradient(
      100deg,
      color-mix(in srgb, hsl(var(--dest-hue, 200) 55% 50%) 9%, var(--surface-2)),
      var(--surface-2) 70%);
}
/* A hairline of the full-strength hue where the header meets the body: enough
   to name the trip at a glance while scrolling. */
.panel-top::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(
    90deg,
    hsl(var(--dest-hue, 200) 58% 45%),
    transparent 68%);
  opacity: .5;
}
:root[data-theme="dark"] .panel-top::after { opacity: .65; }
.panel-name .panel-dot { background: hsl(var(--dest-hue, 200) 58% 45%); }
/* The name gets its own line and its own weight. Previously it sat at 15.5px
   in a row of 12.5px chips, so the eye had nothing to anchor on and adjacent
   panels ran together. */
.panel-titlebar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
}
.panel-name {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  font: 700 23px/1.2 var(--font-display); letter-spacing: -.025em;
}
.panel-name .panel-dot {
  flex: none; width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--surface) 70%, transparent);
}
.panel-body { padding: 26px 26px 0; }
/* Quieter than the title, but still readable. They were transparent, which
   worked on a plain band and disappeared the moment a photograph went behind
   it — a chip has to carry its own background to survive any backdrop. */
.panel-meta {
  color: var(--muted); font-size: 12px; margin-top: 11px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.panel-meta .badge {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
  font-weight: 600;
  padding: 4px 11px;
}
.panel-meta .badge.badge-alert { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
/* Over a photo they need to lift off it as well as sit on it. */
.panel-top.has-photo .panel-meta .badge {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
  border-color: color-mix(in srgb, var(--border-strong) 70%, transparent);
}
.panel-top.has-photo .panel-since {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border-radius: 20px; padding: 3px 10px; width: fit-content;
  backdrop-filter: blur(3px);
}
.panel-since {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 7px; font-size: 12px; color: var(--muted);
}
/* Dates break badly mid-value ("11." / "aug.") when the row wraps. */
.panel-since > span { white-space: nowrap; }
.panel-since .sep { color: var(--faint); }
.panel-since b { color: var(--text); font-weight: 620; }
/* Explains why a search made today already has a week of history: the price
   record is shared per route, not per user. */
.tag-inherit {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px; font-size: 11px; color: var(--faint);
}
.panel-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* A ghost button is transparent, which was fine over a flat header and invisible
   the moment a photograph went behind it. Over the picture they get their own
   surface — still quiet next to the primary action, but unmistakably buttons. */
.panel-top.has-photo .panel-actions .btn-ghost {
  background: var(--surface);
  border-color: var(--border-strong, var(--border));
  color: var(--text);
  box-shadow: 0 1px 3px rgb(0 0 0 / .16);
  font-weight: 600;
}
.panel-top.has-photo .panel-actions .btn-ghost:hover {
  background: var(--bg-elev);
  border-color: var(--accent);
  color: var(--accent);
}

.panel-hero {
  display: grid; grid-template-columns: minmax(260px, 350px) minmax(0, 1fr);
  gap: 36px;
  /* Was `align-items: end`, which pinned the price column to the bottom of the
     row and pushed the Book button down into the chart's baseline. Both columns
     start at the top instead, and the chart carries its own bottom padding. */
  align-items: start;
}
.hero-label {
  font: 700 12px var(--font-sans); letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.hero-pair { margin: 10px 0 0; font: 700 20px/1.25 var(--font-display); letter-spacing: -.015em; }
.hero-pair span { color: var(--muted); font-weight: 500; font-family: var(--font-sans); }
/* The landing's price face: heavy display type, tight, cents raised small. */
.hero-price {
  font: 800 clamp(52px, 6.5vw, 82px)/.92 var(--font-display);
  letter-spacing: -.055em; margin: 14px 0 0;
  font-variant-numeric: lining-nums tabular-nums;
}
.hero-price sup { font-size: .36em; font-weight: 800; vertical-align: top; position: relative; top: .28em; letter-spacing: -.02em; color: var(--muted); }
.hero-move { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 14px; flex-wrap: wrap; }
.hero-chg {
  font: 700 13.5px var(--font-display); font-variant-numeric: tabular-nums;
  border-radius: 999px; padding: 4px 11px;
  background: var(--bg-elev); color: var(--muted); border: 1.5px solid var(--border);
}
.hero-chg.down { background: var(--good-soft); color: var(--good); border-color: transparent; }
.hero-chg.up { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.hero-move span { color: var(--muted); }
/* The one action that spends money gets the accent, not the ink. */
.hero-book { margin-top: 18px; margin-bottom: 4px; }
.hero-book.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); min-height: 46px; padding: 0 24px; font-size: 15px; }
.hero-book.btn-primary:hover { box-shadow: 3px 3px 0 var(--lp-t1); }

/* The chart sits a little lower than the price block so the two read as
   headline and evidence, and never overlap. */
.panel-plot { position: relative; padding-top: 18px; }
.panel-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.panel-plot polyline { stroke-width: 3; }
.panel-axis {
  display: flex; justify-content: space-between; margin-top: 7px;
  font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums;
}
.plot-empty {
  display: grid; place-items: center; min-height: 140px;
  border: 1.5px dashed var(--border-strong); border-radius: 16px; background: var(--surface-2);
  color: var(--muted); font-size: 13px; text-align: center; padding: 16px;
}

/* Airport rail: a hairline grid, not cards — the numbers should line up. */
.panel-rail {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--border);
  border-top: 1px solid var(--border); margin-top: 28px;
}
.rail-cell {
  background: var(--surface); border: 0; cursor: pointer;
  padding: 16px 20px 18px; text-align: left; font: inherit; color: var(--text);
  transition: background .13s;
  border-top: 3px solid transparent;
}
.rail-cell:hover { background: var(--surface-2); }
.rail-cell[aria-current="true"] { background: var(--accent-soft); border-top-color: var(--accent); }
.rail-cell:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.rail-iata { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; }
.rail-iata small { font-weight: 400; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.rail-amt {
  font: 800 24px var(--font-display); margin-top: 4px; letter-spacing: -.03em;
  font-variant-numeric: lining-nums tabular-nums;
}
.rail-trend { font-size: 12px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.rail-trend.down { color: var(--good); }
.rail-trend.up { color: var(--warn); }

.panel-empty {
  color: var(--muted); font-size: 14px;
  background: var(--surface-2); border: 1.5px dashed var(--border-strong);
  border-radius: 16px; padding: 18px; text-align: center;
}
.panel-empty b { color: var(--text); }

@media (max-width: 760px) {
  .panel-hero { grid-template-columns: 1fr; gap: 20px; }
}

/* On a phone the price sat ~650px down, below the fold, buried under seven
   config chips. The settings are still there on a wider screen and in the
   detail view; what a phone opens for is the number. */
@media (max-width: 640px) {
  .badge-opt, .badge-opt-inline, .sep-opt { display: none; }
  .panel-top { padding: 16px 18px 14px; }
  .panel-body { padding: 20px 18px 0; }
  .panel-name { font-size: 19px; }
  .panel-since { margin-top: 5px; font-size: 11.5px; }
  .hero-price { margin-top: 8px; }
  .panel-actions { width: 100%; }
  .panel-actions .btn { flex: 1; }
  /* 34px was under every platform's thumb-target guidance. */
  .btn-sm { min-height: 44px; padding: 10px 12px; }
  .rail-cell { padding: 13px 4px 14px; }
  .seg { min-height: 42px; }
  .planbadge { min-height: 36px; }
  .statusline { font-size: 12px; padding: 8px 11px; }
}

/* ============================================================
   Modal
   ============================================================ */
.backdrop {
  position: fixed; inset: 0; background: rgba(8, 12, 18, .55);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 34px 16px; overflow-y: auto; z-index: 60;
}
.modal { max-width: 940px; width: 100%; margin: 0; box-shadow: var(--shadow-lg); }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 9px 11px; border-bottom: 1px solid var(--border); }
th { color: var(--faint); font-weight: 640; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
tbody tr:hover { background: var(--surface-2); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; }

/* ============================================================
   Chart
   ============================================================ */
.chart-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin: 4px 0 10px;
}
.chart-wrap {
  position: relative;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 8px 6px 2px;
}
.chart { display: block; width: 100%; height: auto; overflow: visible; }

.grid-line { stroke: var(--border); stroke-width: 1; }
.axis-text { fill: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.series-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* 2px surface ring keeps overlapping markers legible where lines cross. */
.series-dot { stroke: var(--surface-2); stroke-width: 2; }
.series-label { font-size: 11.5px; font-weight: 640; }
.crosshair { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; }

.chart-tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 8px; box-shadow: var(--shadow-md);
  padding: 8px 10px; font-size: 12.5px; min-width: 150px;
  transform: translate(-50%, -100%);
  white-space: nowrap;
}
.chart-tip .tip-date { color: var(--faint); font-size: 11px; margin-bottom: 5px; }
.chart-tip .tip-row { display: flex; align-items: center; gap: 14px; justify-content: space-between; }
.chart-tip .tip-row > span { display: flex; align-items: center; gap: 7px; }
.chart-tip .tip-row b { font-variant-numeric: tabular-nums; }

.legend { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.legend-item {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 5px 13px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--surface-2);
  font-size: 12.5px; cursor: pointer;
  transition: border-color .13s, opacity .13s;
  color: var(--text);
}
.legend-item:hover { border-color: var(--border-strong); }
.legend-item.off { opacity: .42; }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend-item b { font-variant-numeric: tabular-nums; }
.legend-item .delta { font-size: 11.5px; }
.delta.good { color: var(--good); }
.delta.warn { color: var(--warn); }

.single-note {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 9px 12px;
  background: var(--accent-soft); border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--muted);
}

@media (max-width: 640px) {
  .view { padding: 16px 14px 40px; }
  .topbar-inner { padding: 10px 14px; gap: 10px; }
  .brand { font-size: 15px; }
  .card { padding: 20px 18px; }
  .card-collapsible > summary { padding: 20px 18px; gap: 13px; }
  .card-collapsible > form { padding: 16px 18px 22px; }
  .ai-results { padding: 0 18px 20px; }
  .sum-plus { width: 40px; height: 40px; font-size: 21px; }
  .row { flex-direction: column; align-items: stretch; }
  .row-actions { justify-content: flex-end; }
  /* A primary action the thumb has to hunt for is a primary action missed. */
  .authform .btn, .formbar .btn { width: 100%; }
  .formbar { flex-direction: column; align-items: stretch; }
}

/* Below this the address is worth less than the room it costs — the plan badge
   and the way out are what the header is actually for. */
@media (max-width: 460px) {
  .userchip { display: none; }
}

/* ============================================================
   Landing
   ============================================================ */
.hero {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 44px; align-items: center;
  padding: 40px 0 52px;
}
.hero-copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hero-title {
  margin: 0; font-size: clamp(30px, 4.6vw, 50px); line-height: 1.06;
  letter-spacing: -.035em; font-weight: 700; text-wrap: balance;
}
.hero-lede { margin: 0; color: var(--muted); font-size: 17px; max-width: 52ch; }
.hero-actions { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 4px; }
.btn-lg { padding: 13px 24px; font-size: 15px; border-radius: 11px; }

/* The one animated thing on the page, and it is the product itself: a fare
   drifting down until it crosses the line you set. */
.hero-viz {
  position: relative; margin: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: 18px 16px 14px;
}
.viz { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------------------------------------------------------------------------
   One 9-second cycle, shared by every element.
   ---------------------------------------------------------------------------
   Each label is timed to the moment the LINE REACHES ITS POINT, not to a queue
   of delays running after the drawing finishes. The first version staggered
   everything with animation-delay, and it read as two separate events — a chart
   being drawn, then some captions arriving — instead of one thing happening.

   The arithmetic, so it can be checked rather than guessed at. The line spans
   x=10..310 over the first 30% of the cycle, so a point at x sits at:

       (x - 10) / 300 * 30%

       x=96  ->  8.6%     first check, too dear
       x=182 -> 17.2%     second check, still too dear
       x=268 -> 25.8%     third check, still above your line
       x=310 -> 30%       it crosses, and we say so

   Each badge opens a beat behind its own point and closes as the next opens, so
   the eye is led along the line rather than asked to read three at once.
   --------------------------------------------------------------------------- */

.viz-threshold {
  stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 5 5;
}
.viz-thresholdlabel {
  font-size: 9px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; fill: var(--faint);
  opacity: 0; animation: viz-thr 9s linear infinite;
}

.viz-line {
  fill: none; stroke: var(--accent); stroke-width: 2.5;
  stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 420;
  animation: viz-draw 9s linear infinite;
}
/* The crossing, drawn over the top in green. It is the moment the whole thing
   is about, so it gets its own stroke rather than a colour change. */
.viz-drop {
  fill: none; stroke: var(--good); stroke-width: 3;
  stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 60;
  animation: viz-drop 9s linear infinite;
}

/* Both fills track the drawing instead of appearing once it stops. */
.viz-area { fill-opacity: 0; animation: viz-area 9s linear infinite; }
.viz-win  { fill-opacity: 0; animation: viz-win 9s linear infinite; }

.viz-pt { fill: var(--accent); opacity: 0; }
.viz-pt.p1 { animation: viz-pt1 9s linear infinite; }
.viz-pt.p2 { animation: viz-pt2 9s linear infinite; }
.viz-pt.p3 { animation: viz-pt3 9s linear infinite; }

/* "Hold": the honest majority of days, when nothing needs doing. */
.viz-hold { opacity: 0; }
.viz-hold rect {
  fill: var(--surface); stroke: var(--border-strong); stroke-width: 1;
}
.viz-hold text {
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em;
  fill: var(--muted); text-anchor: middle;
}
.viz-hold.h1 { animation: viz-hold1 9s linear infinite; }
.viz-hold.h2 { animation: viz-hold2 9s linear infinite; }
.viz-hold.h3 { animation: viz-hold3 9s linear infinite; }

/* The hit: a ring that expands once, the way a notification lands. */
.viz-hit {
  fill: none; stroke: var(--good); stroke-width: 2;
  opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: viz-hit 9s linear infinite;
}
.viz-dot { fill: var(--good); opacity: 0; animation: viz-dot 9s linear infinite; }

.viz-tag {
  position: absolute; right: 20px; bottom: 34px;
  display: flex; align-items: baseline; gap: 9px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 11px; padding: 8px 12px; box-shadow: var(--shadow-md);
  opacity: 0; animation: viz-tag 9s linear infinite;
}
.viz-tag-price { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.viz-tag-drop { font-size: 12.5px; font-weight: 700; color: var(--good); }
.viz-tag-buy {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--good);
  padding: 3px 8px; border-radius: 20px;
  animation: viz-buy 9s linear infinite;
}

/* The line you drew is stated first — the badges only mean anything against it. */
@keyframes viz-thr {
  0%   { opacity: 0 }
  4%   { opacity: 1 }
  92%  { opacity: 1 }
  100% { opacity: 0 }
}
@keyframes viz-draw {
  0%   { stroke-dashoffset: 420; opacity: 1 }
  30%  { stroke-dashoffset: 0 }
  92%  { stroke-dashoffset: 0; opacity: 1 }
  100% { stroke-dashoffset: 0; opacity: 0 }
}
@keyframes viz-drop {
  0%, 25% { stroke-dashoffset: 60; opacity: 1 }
  30%     { stroke-dashoffset: 0 }
  92%     { stroke-dashoffset: 0; opacity: 1 }
  100%    { stroke-dashoffset: 0; opacity: 0 }
}
@keyframes viz-area {
  0%   { fill-opacity: 0 }
  30%  { fill-opacity: 1 }
  92%  { fill-opacity: 1 }
  100% { fill-opacity: 0 }
}
@keyframes viz-win {
  0%, 26% { fill-opacity: 0 }
  34%     { fill-opacity: 1 }
  92%     { fill-opacity: 1 }
  100%    { fill-opacity: 0 }
}

/* Points light up as the line passes through them. */
@keyframes viz-pt1 { 0%, 7%  { opacity: 0 } 10% { opacity: 1 } 92% { opacity: 1 } 100% { opacity: 0 } }
@keyframes viz-pt2 { 0%, 16% { opacity: 0 } 19% { opacity: 1 } 92% { opacity: 1 } 100% { opacity: 0 } }
@keyframes viz-pt3 { 0%, 24% { opacity: 0 } 27% { opacity: 1 } 92% { opacity: 1 } 100% { opacity: 0 } }

@keyframes viz-hold1 {
  0%, 7%  { opacity: 0; transform: translateY(3px) }
  11%     { opacity: 1; transform: none }
  20%     { opacity: 1; transform: none }
  25%     { opacity: 0; transform: translateY(-3px) }
  100%    { opacity: 0 }
}
@keyframes viz-hold2 {
  0%, 16% { opacity: 0; transform: translateY(3px) }
  20%     { opacity: 1; transform: none }
  27%     { opacity: 1; transform: none }
  32%     { opacity: 0; transform: translateY(-3px) }
  100%    { opacity: 0 }
}
@keyframes viz-hold3 {
  0%, 24% { opacity: 0; transform: translateY(3px) }
  28%     { opacity: 1; transform: none }
  34%     { opacity: 1; transform: none }
  39%     { opacity: 0; transform: translateY(-3px) }
  100%    { opacity: 0 }
}

@keyframes viz-hit {
  0%, 28% { opacity: 0; transform: scale(.4) }
  33%     { opacity: .9; transform: scale(1) }
  45%     { opacity: 0; transform: scale(2.1) }
  100%    { opacity: 0; transform: scale(2.1) }
}
@keyframes viz-dot {
  0%, 27% { opacity: 0 }
  31%     { opacity: 1 }
  92%     { opacity: 1 }
  100%    { opacity: 0 }
}
/* The verdict arrives WITH the crossing, not after a pause for effect. */
@keyframes viz-tag {
  0%, 28% { opacity: 0; transform: translateY(6px) }
  34%     { opacity: 1; transform: none }
  88%     { opacity: 1; transform: none }
  96%     { opacity: 0; transform: translateY(-6px) }
  100%    { opacity: 0 }
}
@keyframes viz-buy {
  0%, 33% { transform: scale(1) }
  37%     { transform: scale(1.14) }
  42%     { transform: scale(1) }
  100%    { transform: scale(1) }
}

@media (prefers-reduced-motion: reduce) {
  /* Not a slower animation — none. The end state is the informative one, so
     that is what a reader who asked for stillness gets. */
  .viz-line, .viz-drop { stroke-dashoffset: 0; animation: none; }
  .viz-area, .viz-win { fill-opacity: 1; animation: none; }
  .viz-pt, .viz-dot, .viz-tag, .viz-thresholdlabel { opacity: 1; animation: none; transform: none; }
  /* Three badges at once is clutter when nothing moves; the last one, the one
     the line ends on, is the one that carries the point. */
  .viz-hold { opacity: 0; animation: none; }
  .viz-hold.h3 { opacity: 1; }
  .viz-hit { display: none; }
  .viz-tag-buy { animation: none; }
}

.section-title { margin: 34px 0 6px; font-size: 21px; letter-spacing: -.02em; }
.section-sub { margin-bottom: 18px; }

.steps {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px;
}
.step {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
}
.step-n {
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 8px; background: var(--accent-soft); color: var(--accent);
  font-size: 13px; font-weight: 700; margin-bottom: 3px;
}
.step b { font-size: 15px; font-weight: 650; }
.step span:last-child { color: var(--muted); font-size: 13.5px; }

/* ---------- plan cards ---------- */
/* Four tiers have to sit on one row on a wide screen — a ladder that wraps
   3 + 1 reads as two groups rather than one scale. */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 14px; }
.plan-card { padding: 20px; }
.feature-list li small { color: var(--faint); }
.plan-card {
  position: relative;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--card-shadow);
  display: flex; flex-direction: column; gap: 14px;
}
.plan-card.featured { border-color: var(--accent); box-shadow: var(--shadow-md); }
.plan-card.current { border-style: dashed; }
.plan-name { font-size: 17px; font-weight: 680; letter-spacing: -.01em; }
.plan-for { color: var(--muted); font-size: 13px; margin-top: 2px; }
.plan-price { display: flex; align-items: baseline; gap: 5px; }
.plan-price b { font-size: 38px; font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.plan-price span { color: var(--muted); font-size: 13.5px; }
.plan-tag {
  position: absolute; top: -10px; right: 18px;
  background: var(--accent); color: var(--on-accent);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 20px;
}
.feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.feature-list li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; }
.feature-list li::before {
  content: "\2713"; color: var(--accent); font-weight: 700; flex: none; line-height: 1.5;
}
.feature-list li.off { color: var(--faint); }
.feature-list li.off::before { content: "\2013"; color: var(--faint); }
.plan-card .btn { margin-top: auto; }

/* ============================================================
   Account menu
   ============================================================ */
.usermenu { position: relative; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--accent-soft);
  color: var(--accent); font: inherit; font-size: 13px; font-weight: 700;
  display: grid; place-items: center; text-transform: uppercase;
}
.avatar:hover { border-color: var(--accent); }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 216px; padding: 6px;
  background: var(--surface); border: 1.5px solid var(--border-strong);
  border-radius: 16px; box-shadow: var(--shadow-lg);
}
.menu-head { padding: 9px 11px 10px; border-bottom: 1px solid var(--border); margin-bottom: 5px; }
.menu-name { font-weight: 640; font-size: 14px; }
.menu-mail { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.menu-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 14px; padding: 9px 11px; border-radius: 7px;
}
.menu-item:hover { background: var(--surface-2); }
.menu-item.danger { color: var(--danger); }

/* ============================================================
   Profile
   ============================================================ */
.prof-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px; background: var(--border); border: 1.5px solid var(--border);
  border-radius: 16px; overflow: hidden; margin-bottom: 22px;
}
.prof-cell { background: var(--surface); padding: 16px 18px; }
.prof-k {
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 6px;
}
.prof-v { font: 700 16px/1.3 var(--font-display); }
.prof-v small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.pay-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.pay-row:last-child { border-bottom: 0; }
.pay-amount { font-weight: 660; font-variant-numeric: tabular-nums; }

/* ============================================================
   Checkout
   ============================================================ */
.checkout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items: start; }
.summary { position: sticky; top: 84px; }
.summary h3 { margin: 0 0 14px; font-size: 14px; }
.summary-row, .summary-total {
  display: flex; justify-content: space-between; gap: 12px; padding: 9px 0;
  font-size: 14px;
}
.summary-total {
  border-top: 1px solid var(--border); margin-top: 4px; padding-top: 13px;
  font-size: 16px; font-weight: 680;
}
.summary-total b, .summary-row b { font-variant-numeric: tabular-nums; }
.summary .feature-list { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.sandbox {
  background: var(--warn-soft); color: var(--warn);
  border-radius: var(--radius-sm); padding: 10px 13px;
  font-size: 12.5px; margin: 0 0 18px;
}
.pay-done { text-align: center; padding: 26px 10px; }
.pay-done .tick {
  width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: 26px;
  background: var(--good-soft); color: var(--good);
}
.pay-done h3 { margin: 0 0 6px; font-size: 20px; }
/* Payments not switched on: said plainly, in the place the Pay button would be. */
.pay-off {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--warn-soft); color: var(--warn); padding: 14px 16px;
}
.pay-off b { display: block; margin-bottom: 4px; }
.pay-off .hint { margin: 0; color: inherit; }
#payPanel .btn { width: 100%; margin: 6px 0 10px; }
.pay-mor { font-size: 12px; margin-top: 12px; }

/* Finance: period and export controls on one wrapping row. */
.fin-controls { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin-bottom: 14px; }
.fin-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.fin-controls select, .fin-controls input { min-height: 34px; width: auto; max-width: 100%; }
.fin-note {
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elev);
  padding: 12px 14px; margin-bottom: 16px; font-size: 13.5px;
}
.fin-note p { margin: 0 0 4px; }
.fin-note p:last-child { margin: 0; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 28px; padding: 22px 0 34px; }
  .checkout { grid-template-columns: 1fr; }
  .summary { position: static; }
}

/* A Ryanair quote is the cheapest single seat, so for a party it is a floor,
   not the price. Said in the number itself rather than only in a footnote. */
.price-from {
  font-size: .34em; font-weight: 640; letter-spacing: 0;
  color: var(--muted); vertical-align: middle;
}
.price-note { margin-top: 6px; max-width: 44ch; }

/* ============================================================
   Panel emphasis
   ============================================================ */
/* Each tracked trip is its own object, so it gets its own edge: a coloured
   rail down the side and a lift on hover. Adjacent panels were still reading
   as one long column at a glance. */


/* Flight dates are the answer, not a footnote: they get chips of their own. */
.datetags {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 12px;
}
.datetag {
  display: inline-flex; align-items: baseline; gap: 7px;
  background: var(--surface-2); color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 14px; padding: 8px 13px;
  font: 700 15px var(--font-display); font-variant-numeric: tabular-nums;
}
.datetag b {
  font: 700 10.5px var(--font-sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
}
.datetag-arrow { color: var(--faint); font-size: 14px; }
.datetag-len { font-size: 12.5px; color: var(--muted); }

/* A settings chip you can hover for an explanation should look hoverable. */
.panel-meta .badge[title] { cursor: help; }
.panel-meta .badge[title]:hover { border-color: var(--border-strong); color: var(--text); }

/* A tier below the one you pay for: visible, so the ladder still reads, but
   plainly not on offer. */
.plan-card.locked { opacity: .55; }
.plan-card.locked .plan-price b { color: var(--muted); }

/* ============================================================
   Buy or wait
   ============================================================ */
.forecast { margin-top: 16px; }
.fc {
  display: flex; flex-direction: column; gap: 4px;
  border: 1.5px solid var(--border); border-left: 4px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface-2);
  padding: 12px 15px;
  font-size: 13.5px;
  width: 100%; text-align: left;
}
.fc-verdict { font: 700 15px/1.3 var(--font-display); letter-spacing: -.01em; }
.fc-why { color: var(--muted); line-height: 1.45; }
.fc-conf { color: var(--faint); font-size: 11.5px; }

.fc-buy   { border-left-color: var(--good); background: var(--good-soft); }
.fc-buy .fc-verdict { color: var(--good); }
.fc-wait  { border-left-color: var(--warn); background: var(--warn-soft); }
.fc-wait .fc-verdict { color: var(--warn); }
.fc-watch { border-left-color: var(--accent); }
.fc-unknown { border-left-color: var(--border-strong); }
.fc-unknown .fc-verdict { color: var(--muted); font-weight: 620; }

.fc-locked {
  border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, var(--border-strong)); border-left-width: 4px;
  border-left-style: solid; border-left-color: var(--accent);
  cursor: pointer; font: inherit; color: inherit;
  transition: background .13s, transform .15s;
}
.fc-locked:hover { transform: translate(-1px, -1px); }
.fc-locked:hover { background: var(--accent-soft); }
.fc-locked .fc-verdict { color: var(--accent); font-size: 14px; }

/* A tracked price is an observation from a moment and a source, not a quote we
   can honour. Saying so turns a number that looks wrong into one that is
   simply older than the page you compared it against. */
.observed { margin-top: 8px; font-size: 11.5px; color: var(--faint); cursor: help; }

/* ============================================================
   Destination photo
   ============================================================ */
/* The picture sits UNDER a scrim, never behind bare text. The gradient stays
   in place beneath it, so a destination with no photo — or a request that
   404s — degrades to the tinted header rather than to a broken box. */
.panel-top.has-photo {
  background:
    linear-gradient(
      100deg,
      color-mix(in srgb, var(--surface-2) 94%, transparent) 0%,
      color-mix(in srgb, var(--surface-2) 86%, transparent) 42%,
      color-mix(in srgb, var(--surface-2) 34%, transparent) 100%),
    var(--dest-photo) center 38% / cover no-repeat,
    linear-gradient(100deg,
      color-mix(in srgb, hsl(var(--dest-hue, 200) 55% 50%) 9%, var(--surface-2)),
      var(--surface-2) 70%);
}
:root[data-theme="dark"] .panel-top.has-photo {
  background:
    linear-gradient(
      100deg,
      color-mix(in srgb, var(--surface-2) 95%, transparent) 0%,
      color-mix(in srgb, var(--surface-2) 88%, transparent) 42%,
      color-mix(in srgb, var(--surface-2) 42%, transparent) 100%),
    var(--dest-photo) center 38% / cover no-repeat,
    linear-gradient(100deg,
      color-mix(in srgb, hsl(var(--dest-hue, 200) 55% 50%) 12%, var(--surface-2)),
      var(--surface-2) 70%);
}
/* Taller with a photo, so there is something to see behind the chips. */
.panel-top.has-photo { padding-top: 18px; padding-bottom: 16px; }

@media (max-width: 640px) {
  /* On a phone the header is almost entirely text, so the photo would be a
     texture behind words rather than a picture. Keep the tint instead. */
  .panel-top.has-photo { background-image: none; }
}

/* ============================================================
   Footer and contact
   ============================================================ */
/* The brand is the way home, so it has to look and behave like a control
   rather than a label sitting in the corner. */
.brand {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
  font-weight: 660; font-size: 16px; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 9px;
  border-radius: 9px;
}
.brand:hover .brand-mark { filter: brightness(1.1); }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.contact-grid .step a { color: var(--accent); text-decoration: none; font-weight: 620; }
.contact-grid .step a:hover { text-decoration: underline; }

.sitefoot { border-top: 1px solid var(--border); margin-top: 42px; background: var(--surface); }
.sitefoot-inner {
  max-width: 1140px; margin: 0 auto; padding: 26px 24px 34px;
  display: flex; flex-direction: column; gap: 9px;
}
.sitefoot p { margin: 0; color: var(--muted); font-size: 13px; }
.sitefoot-links { display: flex; gap: 18px; flex-wrap: wrap; }
.sitefoot-links a { color: var(--muted); font-size: 13px; text-decoration: none; }
.sitefoot-links a:hover { color: var(--accent); text-decoration: underline; }
/* The disclosures: what we are, where the numbers come from, whose photographs
   these are. Small, but they are the difference between a product and a demo. */
.sitefoot-fine { font-size: 11.5px !important; color: var(--faint) !important; max-width: 78ch; }

/* ============================================================
   Header: command bar
   ============================================================ */
/* The bar was a wordmark and a row of loose controls — nothing said where you
   were or where you could go. Three parts now: identity left, place centre,
   account right. The centre is a segmented control because a segmented control
   answers "where am I" without being read; a row of buttons does not. */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  /* The blur is what stops content scrolling into an opaque slab and makes the
     bar feel attached to the page rather than parked on top of it. */
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.topbar-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* centre stays centred whatever flanks it */
  align-items: center;
  gap: 16px;
  max-width: 1140px; margin: 0 auto; padding: 11px 24px;
}
.topbar-right { justify-self: end; }

.brand-mark {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #7c5cff));
  color: #fff; font-size: 15px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: transform .18s ease, box-shadow .18s ease;
}
.brand:hover .brand-mark { transform: translateY(-1px); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent); }

/* ---- segmented navigation ---- */
.navrail {
  position: relative;
  display: flex; align-items: center; gap: 2px;
  padding: 4px;
  background: var(--bg-elev);
  border: 1.5px solid var(--border);
  border-radius: 999px;
}
.navseg {
  position: relative; z-index: 1;
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--muted);
  padding: 8px 15px; border-radius: 999px;
  white-space: nowrap;
  transition: color .18s ease;
}
.navseg:hover { color: var(--text); }
.navseg.active { color: var(--accent); font-weight: 700; }
.navseg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* One indicator that SLIDES between segments. A border per segment would blink
   from one place to another; this reads as the same object moving, which is
   what makes the bar feel built rather than assembled. */
.navseg-ink {
  position: absolute; top: 4px; bottom: 4px; left: 0;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent), 2px 2px 0 color-mix(in srgb, var(--accent) 18%, transparent);
  transition: transform .26s cubic-bezier(.34, 1.4, .5, 1), width .26s cubic-bezier(.34, 1.4, .5, 1), opacity .18s ease;
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .navseg-ink { transition: opacity .18s ease; }
}

/* ---- avatar and account menu ---- */
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  border: 0; cursor: pointer;
  font: inherit; font-weight: 680; font-size: 13px; color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #7c5cff));
  /* The ring separates the avatar from the bar without a hard border, and grows
     on hover so the target feels bigger than it is. */
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
  transition: box-shadow .18s ease, transform .18s ease;
}
.avatar:hover { transform: translateY(-1px); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent); }
.avatar[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }

.menu { min-width: 244px; padding: 6px; }
.menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 9px 10px; border-radius: 9px;
}
.menu-ico {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--bg-elev); color: var(--muted);
  font-size: 12px; flex: none;
}
.menu-item:hover .menu-ico { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.menu-item.accent { color: var(--accent); font-weight: 620; }
.menu-item.accent .menu-ico { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.menu-tag {
  margin-left: auto;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 20px;
  background: linear-gradient(135deg, #d4a017, #f0c75e); color: #3b2c05;
}
.menu-sep { height: 1px; margin: 5px 8px; background: var(--border); }

@media (max-width: 1120px) {
  /* Five destinations plus two flags, a theme switch, a plan badge and an
     avatar do not fit one line much under a desktop width — measured, not
     guessed: at 930px the rail was sitting on top of the language flags.
     Below this the three-column grid cannot hold a centred rail and the
     controls without one crushing the other, so the rail drops to its own
     row — still one navigation, just stacked. */
  .topbar-inner { grid-template-columns: auto 1fr; row-gap: 10px; padding: 10px 18px; }
  .topbar-right { grid-row: 1; grid-column: 2; }
  .navrail { grid-row: 2; grid-column: 1 / -1; justify-content: stretch; }
  .navseg { flex: 1; text-align: center; padding: 8px 10px; }
}

/* ============================================================
   Suggestions page
   ============================================================ */
.section-title.sm { font-size: 15px; margin-top: 26px; }
.chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.chipset .chip {
  border: 1.5px solid var(--border-strong); background: var(--surface);
  border-radius: 999px; padding: 8px 15px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text);
  transition: background .13s, border-color .13s, color .13s, transform .13s;
}
.chipset .chip:hover { border-color: var(--text); }
.chipset .chip.on {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: var(--accent); color: var(--accent); font-weight: 620;
}
#fbText {
  width: 100%; resize: vertical; min-height: 120px;
  padding: 12px 14px; border-radius: 14px;
  border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text);
  font: inherit; line-height: 1.55;
}
#fbText:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

.fb-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start;
  padding: 12px 0; border-top: 1px solid var(--border);
}
.fb-row p { margin: 0; }

.faq { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
  border: 1px solid var(--border); border-radius: 11px;
  padding: 12px 15px; background: var(--surface);
}
.faq-item summary { cursor: pointer; font-weight: 600; }
.faq-item[open] summary { margin-bottom: 8px; color: var(--accent); }
.faq-item p { margin: 0; color: var(--muted); line-height: 1.6; }

/* A card that IS the page has nothing to fold away, so the summary stops
   pretending to be a control and becomes the page's heading. */
.card-collapsible.is-page > summary { cursor: default; list-style: none; }
.card-collapsible.is-page > summary::-webkit-details-marker { display: none; }
.card-collapsible.is-page > summary::after { display: none; }

/* The planner is the one paid-feature entry point in the bar, so it carries a
   hint of the Gold gradient — enough to draw the eye, not enough to shout. */
.navseg-ai.active { color: var(--accent); }
.navseg-ai::before {
  content: "✦"; margin-right: 5px; font-size: 11px;
  color: color-mix(in srgb, #d4a017 80%, var(--muted));
}

.empty { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.empty p { margin: 0; }

/* ============================================================
   Back button and role pill
   ============================================================ */
/* A ghost button floating on a card header read as an afterthought — no weight,
   no edge, nothing tying it to the page. It is a real control with a direction,
   so it gets a surface, an arrow and a hover that moves the arrow rather than
   the whole button. */
/* Both header shapes carry a back control: profile uses .card-head, the pages
   added later use .pay-head. Styling one of them left the other looking like
   stray text on the card. */
/* Scoped to buttons that actually go back, not to every quiet button that
   happens to sit in a card header. "Check all now" is not a way out of the
   page, and it wore a back-arrow for a while because the rule was written
   around where a button sits rather than what it does. */
.btn-back {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  color: var(--text);
  font-weight: 650;
  padding: 0 16px 0 13px;
  border-radius: 999px;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .15s, box-shadow .15s;
}
.btn-back::before {
  content: "←";
  font-size: 15px; line-height: 1;
  transition: transform .18s ease;
}
.btn-back:hover {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent);
}
.btn-back:hover::before { transform: translateX(-2px); }

.rolepill {
  display: inline-block;
  padding: 2px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 680; letter-spacing: .01em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, #7c5cff 14%, transparent));
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Each tracked route is an independent thing to read, so the gap between
   panels has to be bigger than the gaps inside one. At 18px the eye grouped a
   panel's rail with the next panel's header; this reads as separate cards. */
#searchList { display: flex; flex-direction: column; gap: 30px; }
@media (max-width: 640px) { #searchList { gap: 22px; } }

/* Heading and its back control belong on one line — stacked, the button read as
   a stray chip floating under the title. */
.pay-head, .card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 16px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.pay-head h2, .card-head h2, .card-head h3 { margin: 0; }

/* ============================================================
   Administration
   ============================================================ */
.statgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px; margin: 18px 0 22px;
}
.stat {
  padding: 14px 16px; border-radius: 12px;
  background: var(--bg-elev); border: 1px solid var(--border);
}
.stat-k { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.stat-v { font-size: 25px; font-weight: 700; letter-spacing: -.02em; margin: 4px 0 2px; }
.stat-sub { font-size: 12px; color: var(--muted); }

.subtabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.subtab {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 560; color: var(--muted);
  padding: 9px 14px; border-radius: 9px 9px 0 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subtab:hover { color: var(--text); background: var(--bg-elev); }
.subtab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 660; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.admin-table th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--faint);
  padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.admin-table td { padding: 11px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table td.num, .admin-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table tr:hover td { background: var(--bg-elev); }
.admin-table small.dim { display: block; color: var(--faint); font-size: 11.5px; }

.mini-select {
  font: inherit; font-size: 13px;
  padding: 5px 9px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  cursor: pointer;
}
.mini-select:hover { border-color: var(--accent); }
.mini-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* An unread suggestion should be findable at a glance in a long list. */
.fb-row.is-new { border-left: 3px solid var(--accent); padding-left: 12px; }

/* The provider's own quota reading, above our derived table. */
.quota { padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev); margin-bottom: 18px; }
.quota-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.quota-bar { height: 8px; border-radius: 20px; background: var(--border); overflow: hidden; }
.quota-bar span { display: block; height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #7c5cff)); transition: width .4s ease; }
.quota-nums { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 9px; font-size: 13px; color: var(--muted); }
/* A disagreement between their count and ours is the one number here worth
   interrupting for, so it is the only one that gets a colour. */
.quota-drift { color: #b4690e; font-weight: 620; }

/* A plan that loses money must be impossible to miss in the table. */
.econ-loss td { background: color-mix(in srgb, #b4690e 8%, transparent); }
.econ-pos { color: var(--good); font-weight: 620; }
.econ-neg { color: #b4690e; font-weight: 700; }

/* A button that has to read as a link: "forgotten your password" is a change of
   direction, not a second thing to submit, so it must not compete with the
   button above it. */
.linkbtn {
  border: 0; background: none; padding: 4px 0; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--muted);
  text-align: left; align-self: flex-start;
}
.linkbtn:hover { color: var(--accent); text-decoration: underline; }
.linkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* The submit button and the "forgotten your password" link were touching, so
   the pair read as one block of controls rather than an action and a way out of
   it. The link gets its own air, and a hairline above it to say the form has
   ended. */
.authform .btn[type="submit"] { margin-top: 6px; }
.authform .linkbtn {
  margin-top: 14px;
  padding-top: 14px;
  width: 100%;
  border-top: 1px solid var(--border);
  text-align: center;
}

/* The irreversible action gets its own enclosure. Not decoration: a delete
   button sitting in the same rhythm as everything else is a delete button
   somebody eventually presses on the way past. */
.danger-zone {
  margin-top: 26px; padding: 18px 20px;
  border: 1px solid color-mix(in srgb, #c0392b 35%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, #c0392b 4%, transparent);
}
.danger-zone h4 { margin: 0 0 6px; font-size: 15px; color: #c0392b; }
.danger-zone .hint { margin: 0 0 14px; }
.btn-danger {
  background: #c0392b; color: #fff; border: 1px solid #a93226;
}
.btn-danger:hover { background: #a93226; }

/* ============================================================
   Legal documents
   ============================================================ */
/* Narrower than the rest of the app on purpose: these are the only pages here
   meant to be READ rather than scanned, and past about seventy characters a
   line stops being comfortable prose. */
.legal { max-width: 68ch; }
.legal-section { margin-top: 26px; }
.legal-section h3 { margin: 0 0 8px; font-size: 15.5px; letter-spacing: -.01em; }
.legal p { margin: 0 0 11px; line-height: 1.68; color: var(--muted); font-size: 14.5px; }
#legalUpdated { margin-bottom: 2px; }

/* A backup problem is the one thing on this screen that cannot wait for the
   next time somebody happens to scroll past it. */
.quota.quota-alarm {
  border-color: #c0392b;
  background: color-mix(in srgb, #c0392b 6%, var(--bg-elev));
}
.quota.quota-alarm .quota-head .hint { color: #c0392b; font-weight: 620; }

/* ============================================================
   Faults
   ============================================================ */
.fault {
  padding: 14px 16px; margin-bottom: 10px;
  border: 1px solid var(--border); border-left: 3px solid #c0392b;
  border-radius: 10px; background: var(--surface);
}
.fault.is-resolved { border-left-color: var(--good); opacity: .62; }
/* A warning is not a crash. Without this the metered-budget notice — the scan
   collecting nothing because the quota is spent — wore the same red edge as an
   uncaught exception, which flattens the one distinction the list is read for. */
.fault.is-warn { border-left-color: var(--warn); }
.fault.is-warn .fault-count { color: var(--warn); }
.fault-filter {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 12px; font-size: 12.5px; color: var(--muted); cursor: pointer;
}
.fault-filter input { cursor: pointer; }
.fault-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fault-head b { font-size: 14px; font-weight: 620; }
/* The count is the whole reason these are grouped, so it is the loudest thing
   in the row after the message itself. */
.fault-count {
  margin-left: auto; font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 13px; color: #c0392b;
}
.fault.is-resolved .fault-count { color: var(--muted); }
.fault-meta { margin-top: 6px; font-size: 12px; color: var(--faint); }
.fault-meta code { font-size: 11.5px; background: var(--bg-elev); padding: 1px 5px; border-radius: 5px; }
.fault-detail { margin-top: 10px; }
.fault-detail summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.fault-detail pre {
  margin: 8px 0 0; padding: 10px 12px; overflow-x: auto;
  background: var(--bg-elev); border-radius: 8px;
  font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.fault .btn { margin-top: 10px; }

/* The clock under a date tag. Quiet: the date is what you plan around, the time
   is what you use to recognise the flight once the booking page opens. */
.datetag-time {
  display: block; margin-top: 2px;
  font-size: 11px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.admin-table small.dim, td small.dim {
  display: block; color: var(--faint); font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Phone
   ============================================================
   Measured at 375px, not guessed: the page overflowed its own width by 112px,
   and every primary control was under the 44px both Apple and Google give as
   the minimum a finger can reliably hit. A tracker whose alerts arrive on a
   phone has to be usable on one.
   ============================================================ */

@media (max-width: 560px) {
  /* ---- the navigation ----
     Five destinations will not fit one row at this width — measured at 487px
     against 375 available. Wrapping them into a scrolling strip keeps every
     destination reachable without hiding any behind a menu, which on a page
     this shallow would cost more taps than it saves. */
  .navrail {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* The rail bleeds to both edges so a half-visible segment at the fold reads
       as "there is more", rather than as a broken layout. */
    margin: 0 -18px;
    padding: 3px 18px;
    border-radius: 0;
    border-left: 0; border-right: 0;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .navrail::-webkit-scrollbar { display: none; }
  .navseg {
    flex: 0 0 auto;
    min-height: 44px;          /* the finger minimum, not a design choice */
    padding: 10px 14px;
    scroll-snap-align: start;
  }
  /* The sliding indicator cannot follow a scrolling strip honestly, so the
     active segment carries its own background instead. */
  .navseg-ink { display: none; }
  .navseg.active {
    background: var(--surface);
    border-radius: 9px;
    box-shadow: 0 1px 3px rgb(0 0 0 / .10);
  }

  /* ---- the header ---- */
  .topbar-inner { padding: 8px 18px; row-gap: 8px; }
  .brand { min-height: 44px; }
  .brand span:last-child { font-size: 15px; }
  .flagbtn { min-width: 44px; min-height: 44px; }
  .iconbtn, .planbadge { min-height: 44px; }
  .avatar { width: 40px; height: 40px; }
  .topbar-right { gap: 6px; }

  /* ---- the panel ----
     `.panel-since` ran past the edge because its parts were laid out in a row
     that could not break. */
  .panel-since {
    flex-wrap: wrap;
    row-gap: 4px;
    font-size: 11.5px;
  }
  .panel-since .sep { display: none; }
  .tag-inherit { white-space: normal; }

  .panel-hero { grid-template-columns: 1fr; gap: 18px; }
  .hero-price { font-size: 44px; }
  .panel-actions { width: 100%; }
  .panel-actions .btn { flex: 1; min-height: 44px; }
  .panel-meta { gap: 6px; }
  .panel-rail { overflow-x: auto; scrollbar-width: none; }
  .panel-rail::-webkit-scrollbar { display: none; }
  .rail-cell { flex: 0 0 auto; min-width: 104px; min-height: 44px; }

  /* ---- forms and buttons ----
     iOS zooms the page when a focused input is under 16px. That zoom does not
     undo itself, so the user is left on a page they now have to pinch back —
     which is why 16px here is a functional requirement rather than taste. */
  input, select, textarea { font-size: 16px; min-height: 44px; }
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  .chipset .chip { min-height: 40px; }
  .mini-select { min-height: 40px; }

  /* ---- everything that is a table ---- */
  .table-scroll { margin: 0 -16px; padding: 0 16px; }
  .admin-table { font-size: 12.5px; }
  .statgrid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 9px; }

  .card, .card-lg { padding: 16px; border-radius: 12px; }
  .section-title { font-size: 18px; }

  /* ---- the footer ---- */
  .sitefoot-inner { padding: 20px 18px 28px; }
  .sitefoot-links { gap: 14px; }
  .sitefoot-links a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Safe areas: with a manifest installed to the home screen the page runs under
   the notch and the home indicator, and neither is somewhere a control may sit. */
@supports (padding: max(0px)) {
  .topbar-inner { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
  .sitefoot-inner { padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + 20px)); }
}


@media (max-width: 560px) {
  /* The wordmark was being squeezed to "Cenu" by the controls beside it. On a
     phone the mark alone identifies the app — the words are what get cut, and a
     half-word is worse than no word. */
  .brand span:last-child {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (max-width: 400px) {
  /* Below this the wordmark cannot survive next to the language, theme, plan
     and account controls without one of them losing. The mark stays. */
  .brand span:last-child { display: none; }
}

/* A tier below the one you hold explains itself in a line, with no control to
   press. There is nothing here for the console to re-enable. */
.plan-locked-note {
  margin: 0; padding: 10px 0 2px;
  font-size: 12.5px; line-height: 1.5; color: var(--faint);
}
.plan-card.locked { opacity: .72; }

/* Said quietly but said. The alternative — showing a two-day-old figure under
   the words "checked today" — is the interface telling a lie on our behalf. */
.scan-note {
  margin: 10px 0 0; padding: 8px 11px;
  border-left: 3px solid #b4690e;
  background: color-mix(in srgb, #b4690e 7%, transparent);
  border-radius: 0 8px 8px 0;
  font-size: 12.5px; line-height: 1.5; color: var(--text);
}

/* "time not known" sits where a time would, but reads as an absence rather than
   a value — so the eye does not mistake it for data. */
.datetag-time.dim { color: var(--faint); font-weight: 500; font-style: italic; }

/* A departed trip is not advice, so it does not wear the colours of advice. */
.fc.fc-departed { border-left-color: var(--faint); }
.fc.fc-departed .fc-verdict { color: var(--muted); }

/* An empty panel with a reason, rather than an empty panel. */
.panel-empty { padding: 26px 4px; text-align: center; }
.panel-empty b { display: block; font-size: 15px; margin-bottom: 6px; }
.panel-empty .hint { max-width: 46ch; margin: 0 auto; line-height: 1.55; }

/* Notification state on the profile. Quiet, because it is a setting rather than
   an action — the loud moment is the offer, made once, when it is relevant. */
#pushState { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.push-on { font-size: 13px; font-weight: 620; color: var(--good); }

/* An alert row carries a whole flight now, so it needs the room the panel gives
   the same information. */
.alert-row { align-items: flex-start; }
.alert-legs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 6px; }
.alert-row .row-actions { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.badge.good { background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--good); border-color: transparent; }

/* ============================================================
   Language picker
   ============================================================ */
.langpick { position: relative; }
.langbtn {
  min-width: 56px; padding: 0 10px;
  font-size: 12.5px; font-weight: 640; letter-spacing: .02em;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.langmenu {
  right: 0; min-width: 210px; max-height: 60vh; overflow-y: auto; padding: 6px;
}
.lang-item { display: flex; align-items: center; gap: 10px; width: 100%; }
.lang-flag { font-size: 15px; line-height: 1; flex: none; }
.lang-name { flex: 1; text-align: left; }
.lang-item.active { background: var(--bg-elev); font-weight: 640; }
/* Says what the choice will and will not change, in the list rather than after
   the fact. */
.lang-partial {
  font-size: 10.5px; color: var(--faint); white-space: nowrap;
  border: 1px solid var(--border); border-radius: 20px; padding: 1px 7px;
}

/* A window that has closed still has something to say. The record is shown
   smaller and greyer than a live price, so it never reads as bookable. */
.panel-empty.closed { text-align: left; padding: 22px 4px; }
.closed-record {
  margin: 16px 0; padding: 14px 16px;
  background: var(--bg-elev); border-radius: 12px;
  border: 1px dashed var(--border);
}
.closed-record .hero-price {
  font-size: 34px; margin: 2px 0 4px; color: var(--muted);
}
.closed-record .hero-label { font-size: 10.5px; }

/* ============================================================
   Wordmark
   ============================================================
   Was a Unicode aeroplane beside plain text. A glyph out of the font stack
   renders differently on every machine, sits on its own baseline, and cannot be
   weighted or animated — which is exactly why it read as cheap. Drawn instead,
   at a fixed size, in a tight lockup with a kicker underneath: the shape a
   modern product header actually uses.
   ============================================================ */
.brand { gap: 11px; align-items: center; }

.brand-mark {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  /* The landing's mark: a warm conic swirl with an ink plane, outlined, the
     same in both themes — a logo does not change colour with the lights. */
  background: conic-gradient(from 200deg, #ff4f8b, #ff8a3d, #ffd23f, #ff4f8b);
  color: #1a0b2e;
  border: 2px solid #1a0b2e;
  box-shadow: 2px 2px 0 #1a0b2e;
  transition: transform .2s cubic-bezier(.34, 1.4, .5, 1), box-shadow .2s ease;
}
.brand-mark svg { width: 21px; height: 21px; display: block; }
.brand:hover .brand-mark {
  transform: translateY(-1px) rotate(-3deg);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--accent) 52%, transparent),
              inset 0 1px 0 rgb(255 255 255 / .3);
}

.brand-words { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.brand-name { font-size: 15.5px; font-weight: 680; letter-spacing: -.015em; }
/* The second line is what most product marks use to say what the thing IS
   without spending a headline on it. Small, spaced, and quiet. */
.brand-kicker {
  font-size: 9px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); margin-top: 2px;
}
@media (max-width: 400px) { .brand-words { display: none; } }

/* ============================================================
   The tier, worn rather than announced
   ============================================================ */
.avatar[data-tier] { position: relative; }
.avatar[data-tier="gold"] {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #d4a017,
              0 0 14px color-mix(in srgb, #d4a017 55%, transparent);
}
.avatar[data-tier="silver"] {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #9aa5b1,
              0 0 12px color-mix(in srgb, #9aa5b1 45%, transparent);
}
.avatar[data-tier="bronze"] {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #b87333,
              0 0 12px color-mix(in srgb, #b87333 45%, transparent);
}
.avatar[data-tier="free"] {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* The badge takes the same metal, so the two read as one statement. */
.planbadge[data-tier="gold"] {
  background: linear-gradient(135deg, #c8940f, #f0c75e); color: #3b2c05; border-color: transparent;
}
.planbadge[data-tier="silver"] {
  background: linear-gradient(135deg, #7f8b98, #c3ccd6); color: #1e242c; border-color: transparent;
}
.planbadge[data-tier="bronze"] {
  background: linear-gradient(135deg, #9c5f28, #d59155); color: #2e1b09; border-color: transparent;
}

/* Where the live list ends and the archive begins. */
.list-sep {
  display: flex; align-items: center; gap: 12px;
  margin: 26px 2px 14px; color: var(--faint);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.list-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* A stopped tracking is a record, not a control.
   Grey and desaturated so it cannot be mistaken for something still running —
   these sit below the divider at the foot of the list — and back to full
   strength under the pointer, because the history in it is worth reading and a
   chart you cannot see is not a kindness. The buttons that would change it are
   simply not rendered, so nothing here has to disable anything. */
.panel.is-stopped {
  opacity: .5; filter: saturate(.25) grayscale(.45);
  transition: opacity .16s, filter .16s;
}
.panel.is-stopped:hover,
.panel.is-stopped:focus-within { opacity: 1; filter: none; }
.tag-stopped {
  margin-left: 9px; vertical-align: middle;
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  background: var(--bg-elev); color: var(--muted);
  border: 1px solid var(--border); border-radius: 20px; padding: 2px 8px;
}

/* Flags: a plain drawing at its own aspect ratio, with a hairline so that the
   white edge of the Finnish or Polish flag does not dissolve into the menu. */
.flag {
  width: 21px; height: 14px; display: block; flex: none;
  border-radius: 2px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .22);
}
.langbtn {
  border: 0; background: none; padding: 5px; margin: 0; cursor: pointer;
  display: inline-flex; align-items: center; border-radius: 6px;
  opacity: .82; transition: opacity .13s, background .13s;
  min-width: 0; min-height: 0;
}
.langbtn:hover { opacity: 1; background: var(--bg-elev); }
.langbtn .flag { width: 25px; height: 17px; }

/* A checkbox that reads as a control rather than a form field. */
.switch { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; color: var(--muted); }
.switch input { width: 16px; height: 16px; min-height: 0; accent-color: var(--accent); cursor: pointer; }
.switch:hover { color: var(--text); }

/* ============================================================
   The planner's answer, as a table
   ============================================================ */

/* Wide content scrolls inside itself. A comparison table is the one thing on
   the page that legitimately does not fit a phone, and the fix is a scrollbar
   on the table rather than a horizontal scrollbar on the whole page. */
.tablewrap { overflow-x: auto; margin: 14px 0 6px; -webkit-overflow-scrolling: touch; }

.ai-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 660px; }
.ai-table th {
  text-align: left; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint); font-weight: 700; padding: 0 12px 8px; white-space: nowrap;
}
.ai-table td { padding: 13px 12px; border-top: 1px solid var(--border); vertical-align: top; }
.ai-table tr:hover td { background: var(--bg-elev); }
.ai-table .num { text-align: right; white-space: nowrap; }
.ai-table b { font-weight: 650; }
.ai-table small.dim { display: block; color: var(--faint); font-size: 11.5px; margin-top: 2px; }
.ai-table .ai-why { max-width: 320px; line-height: 1.45; }

.ai-highlights { margin: 6px 0 0; padding-left: 16px; color: var(--muted); }
.ai-highlights li { margin: 2px 0; }

.ai-warn { margin-top: 6px; color: var(--warn, #b45309); font-size: 12.5px; }

/* How busy the place is in those months — three words, not a number, because
   the model is guessing and a percentage would dress the guess up as data. */
.crowd {
  display: inline-block; margin-top: 5px; padding: 1px 8px; border-radius: 20px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--border); color: var(--muted);
}
.crowd-low { color: #15803d; border-color: #15803d40; }
.crowd-high { color: #b91c1c; border-color: #b91c1c40; }

/* The match score reads as a bar so the rows can be compared at a glance; the
   number stays, because a bar alone is a shape and not an answer. */
.matchbar {
  display: inline-block; position: relative; min-width: 46px; padding: 3px 8px;
  border-radius: 6px; background: var(--bg-elev); overflow: hidden; font-weight: 700;
}
.matchbar::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: var(--m, 0%);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.matchbar b { position: relative; }

.tag-sample {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--border); border-radius: 20px; padding: 2px 8px;
  color: var(--muted); vertical-align: middle; margin-left: 6px;
}

/* A second label inside a fieldset, for the "rather avoid" row under the trip
   types: quieter than a legend, because it is a refinement of the same answer. */
.sublabel {
  display: block; margin: 14px 0 7px;
  font-size: 12px; font-weight: 640; color: var(--muted);
}

/* Our measurement and the model's estimate in one cell, in that order and
   visibly different weights. */
.ai-table td.fare b { font-size: 15px; }
.ai-table td.fare .guess { color: var(--faint); }
.ai-table td.fare small.dim { text-align: right; }

.badge-sea, .badge-visa {
  display: inline-block; margin-top: 5px; margin-right: 5px; padding: 1px 8px;
  border-radius: 20px; font-size: 10.5px; font-weight: 700;
  border: 1px solid var(--border); color: var(--muted);
}
.badge-sea { color: #0369a1; border-color: #0369a140; }
.badge-visa { color: #b45309; border-color: #b4530940; }

/* Several checkboxes on one row read as a group rather than as a column of
   unrelated switches. */
.field-wide .checkline + .checkline { margin-top: 7px; }

/* ------------------------------------------------------------------
   The same answer, at three widths.

   A seven-column comparison is right on a desktop and impossible on a phone:
   the table was 660px wide in a scrolling box, so on a 400px screen the only
   action in the whole section — the button that starts tracking — sat off the
   right-hand edge with nothing to suggest it was there.

   Below 900px each row becomes a card. Not a second rendering: the cells carry
   their column name in data-label, so one piece of markup is a table where
   there is room and a card where there is not.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .tablewrap { overflow: visible; margin: 14px 0 0; }
  .ai-table { min-width: 0; display: block; }
  .ai-table thead { display: none; }
  .ai-table tbody, .ai-table tr, .ai-table td { display: block; width: 100%; }

  .ai-table tr {
    border: 1px solid var(--border); border-radius: 14px;
    padding: 14px 16px; margin-bottom: 12px; background: var(--surface);
  }
  .ai-table tr:hover td { background: none; }

  .ai-table td { border-top: 0; padding: 7px 0; text-align: left; }
  .ai-table td.num { text-align: left; }
  .ai-table td + td { border-top: 1px solid var(--border); }

  /* The column heading moves into the cell, where it is the only thing that
     still explains what the number means. */
  .ai-table td::before {
    content: attr(data-label);
    display: block; margin-bottom: 2px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--faint);
  }
  .ai-table td:first-child::before, .ai-table td.rowgo::before { content: none; }
  .ai-table td:first-child b { font-size: 17px; }
  .ai-table .ai-why { max-width: none; }
  .ai-table td.fare small.dim { text-align: left; }

  /* The action is full width and last, where a thumb is. */
  .ai-table td.rowgo { padding-top: 12px; }
  .ai-table td.rowgo .btn { width: 100%; padding: 11px; font-size: 14.5px; }

  /* Where and Fare read together at the top of the card. */
  .ai-table td.fare b { font-size: 18px; }
}

/* A tablet has room for two cards side by side, and one long column on a
   700px-wide screen is a phone layout on furniture that is not a phone. */
@media (min-width: 640px) and (max-width: 900px) {
  .ai-table tbody { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .ai-table tr { margin-bottom: 0; }
}

/* Tablet portrait keeps the cards; from here up the table has room for all
   seven columns without a scrollbar. */
@media (min-width: 901px) and (max-width: 1150px) {
  .ai-table { font-size: 13px; }
  .ai-table td, .ai-table th { padding-left: 8px; padding-right: 8px; }
  .ai-table .ai-why { max-width: 260px; }
}

/* The planner's own form: two columns on a desktop, one on a phone — the
   grid already does that; these are the bits it does not cover. */
@media (max-width: 620px) {
  .chips { gap: 6px; }
  .chip { font-size: 12.5px; padding: 7px 11px; }
  .sublabel { margin-top: 12px; }
  #aiResults h3 { font-size: 16px; }
}

/* The expandable half of a suggestion: what else to see, what to avoid, how
   safe it is, and what is happening that month. Each block is led by its own
   symbol — a page of thirty facts is scanned by shape long before it is read. */
.ai-more-btn {
  margin-top: 8px; padding: 3px 0; border: 0; background: none; cursor: pointer;
  color: var(--accent); font-size: 12.5px; font-weight: 640; font-family: inherit;
}
.ai-more-btn:hover { text-decoration: underline; }
.ai-more { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.ai-sect + .ai-sect { margin-top: 12px; }
.ai-sect-h {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 5px;
}
.ai-highlights.warn { color: var(--muted); }
.ai-highlights.warn li::marker { color: var(--warn); }
.ai-safe { margin: 0; color: var(--muted); font-size: 13px; }
.ai-safe span {
  display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 20px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  border: 1px solid;
}
.safe-safe { color: #15803d; border-color: #15803d40; }
.safe-care { color: #b45309; border-color: #b4530940; }
.safe-risk { color: #b91c1c; border-color: #b91c1c40; }
.ai-events { list-style: none; margin: 0; padding: 0; }
.ai-events li { margin: 0 0 8px; font-size: 13px; }
.ai-events small { display: block; margin-top: 1px; }

/* What the button will actually do, before it does it. */
.will-track {
  margin-top: 9px; padding: 8px 11px; border-radius: 9px;
  background: var(--bg-elev); color: var(--muted); font-size: 12.5px; line-height: 1.45;
}
.will-track b { color: var(--text); }
.will-track.dim { opacity: .8; }

/* Whole country, or the one city the model named. */
.scope { display: inline-flex; margin-top: 9px; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.scope-opt {
  border: 0; background: none; cursor: pointer; font-family: inherit;
  padding: 5px 10px; font-size: 12px; color: var(--muted);
}
.scope-opt + .scope-opt { border-left: 1px solid var(--border); }
.scope-opt.on { background: var(--accent); color: var(--on-accent); font-weight: 640; }

.ai-quota { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.ai-table td.rowgo .btn + .btn { margin-top: 6px; }
.ai-table td.rowgo .btn[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 900px) {
  .ai-table td.rowgo .btn + .btn { margin-top: 8px; }
}

.btn-reject { color: var(--muted); }
.btn-reject:hover { color: var(--text); }
.blocked-why { display: block; margin-top: 6px; max-width: 160px; line-height: 1.35; }
@media (max-width: 900px) {
  .blocked-why { max-width: none; }
  .ai-table td.rowgo { display: flex; flex-wrap: wrap; gap: 8px; }
  .ai-table td.rowgo .btn { flex: 1 1 auto; }
  .ai-table td.rowgo .btn + .btn { margin-top: 0; }
  .ai-table td.rowgo .btn[data-track] { flex: 1 1 100%; }
}

/* The airport chooser: the adviser's pick, and the other main airports in that
   country. Tapping one changes what the row would track and nothing else. */
.scope-opt { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.scope-opt small { font-size: 9.5px; opacity: .75; font-weight: 400; }
.scope-why { margin-top: 4px; font-size: 11px; color: var(--faint); }

/* A day the plan cannot afford to price is shown, so the ceiling is visible,
   and is not selectable. */
.calday.beyond { opacity: .3; text-decoration: line-through; cursor: not-allowed; }
#windowHint { display: block; margin-top: 8px; }

/* ---- First-run panel: waiting for the first prices, and route context ---- */
.panel-empty.is-waiting { position: relative; padding-top: 34px; }
.wait-pulse {
  position: absolute; top: 12px; left: 50%; width: 10px; height: 10px; margin-left: -5px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
  animation: wait-pulse 1.6s ease-out infinite;
}
@keyframes wait-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}
.route-ctx {
  margin-top: 16px; padding: 14px 16px; border-radius: 16px;
  background: var(--surface); border: 1.5px solid var(--border); text-align: left;
}
.route-ctx-line { margin: 0 0 12px; font-size: 13.5px; color: var(--text); }
.route-ctx-bar { position: relative; height: 10px; }
.route-ctx-track {
  position: absolute; inset: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--good), var(--warn) 60%, var(--danger));
  opacity: .75;
}
.route-ctx-mark {
  position: absolute; top: 50%; left: var(--at); width: 16px; height: 16px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--surface); border: 3px solid var(--text); box-shadow: var(--shadow-sm);
  animation: ctx-mark-in .7s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes ctx-mark-in { from { left: 0; opacity: 0; } }
.route-ctx-ends {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}
/* The product's whole answer in one chip, so it gets the landing's vivid
   green rather than a tint. */
.vs-avg {
  display: inline-block; margin: 12px 0 0; padding: 5px 13px; border-radius: 999px;
  font: 700 14px var(--font-display); letter-spacing: -.005em; font-variant-numeric: tabular-nums;
}
.vs-avg.good { color: var(--lp-on-good); background: var(--lp-good); }
.vs-avg.bad  { color: var(--warn); background: var(--warn-soft); }
@media (prefers-reduced-motion: reduce) {
  .wait-pulse, .route-ctx-mark { animation: none; }
}

/* ---- New-tracking form: trip-length chips, folded advanced settings ---- */
.triplen-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opt {
  padding: 10px 17px; border-radius: 999px; min-height: 44px;
  border: 1.5px solid var(--border-strong); background: var(--surface);
  color: var(--text); font: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.chip-opt:hover { border-color: var(--text); transform: translateY(-1px); }
.chip-opt:active { transform: scale(.97); }
.chip-opt.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 650; }
.fset-more {
  margin: 4px 0 20px; border: 1.5px solid var(--border); border-radius: 16px;
  background: var(--surface-2); padding: 0 18px;
}
.fset-more > summary {
  cursor: pointer; padding: 14px 0; min-height: 48px; color: var(--text); font-size: 14.5px; font-weight: 650;
  list-style: none;
}
.fset-more[open] > summary { border-bottom: 1px solid var(--border); }
.fset-more > summary::-webkit-details-marker { display: none; }
.fset-more > summary::before { content: '＋ '; color: var(--accent); }
.fset-more[open] > summary::before { content: '－ '; }
.fset-more[open] { padding-bottom: 6px; }

/* ---- The panel that was just created: arrive, then settle ---- */
.is-new { animation: panel-arrive .7s cubic-bezier(.2, .8, .2, 1) both, panel-glow 2.4s ease-out .2s both; }
@keyframes panel-arrive { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes panel-glow {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  100% { box-shadow: 0 0 0 12px transparent; }
}
.push-inline { margin: 10px 0 4px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .is-new { animation: none; } }

/* ---- Phone: the navigation becomes a bottom tab bar ----
   A scrolling strip at the top hid two of five destinations behind a swipe
   nobody discovers ("Ale…"). At the bottom all five fit, in thumb reach, which
   is where an installed app keeps them. The header's backdrop blur makes it a
   containing block for fixed children, so on a phone it gets a solid fill
   instead — otherwise the bar would stick to the header, not the screen. */
@media (max-width: 560px) {
  .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
  .navrail {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    margin: 0; border-radius: 0; overflow: visible;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    border: 0; border-top: 1px solid var(--border);
    box-shadow: 0 -4px 18px rgb(0 0 0 / .06);
  }
  .navseg {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 54px; padding: 6px 2px; border-radius: 10px;
    font-size: 10.5px; line-height: 1.15; text-align: center; white-space: normal;
  }
  .navseg::before {
    content: ''; width: 22px; height: 22px; flex: none;
    background: currentColor; opacity: .9;
    -webkit-mask: var(--nav-ico) center / contain no-repeat; mask: var(--nav-ico) center / contain no-repeat;
  }
  .navseg[data-view="home"]     { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
  .navseg[data-view="tracking"] { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l5-5 4 4 8-8'/%3E%3Cpath d='M14 8h6v6'/%3E%3C/svg%3E"); }
  .navseg[data-view="new"]      { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E"); }
  .navseg[data-view="ai"]       { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2l2.2 6.3L20.5 10l-6.3 2.2L12 18.5l-2.2-6.3L3.5 10l6.3-1.7z'/%3E%3C/svg%3E"); }
  .navseg[data-view="alerts"]   { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E"); }
  .navseg-ai::before { margin-right: 0; }
  .navseg { border-radius: 14px; font-weight: 600; }
  .navseg.active { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent); font-weight: 700; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .toasts { bottom: calc(80px + env(safe-area-inset-bottom)); }
}
.party-total { margin: 2px 0 0; font-size: 14px; font-weight: 620; color: var(--text); font-variant-numeric: tabular-nums; }

/* ============================================================
   Signed-in pages — the calm half of C2
   ============================================================
   The landing is loud on top and quiet below; the app is the quiet half. Same
   display face and type scale, same violet, same pill controls and rounded,
   offset-shadowed cards — on neutral surfaces, with colour kept for the few
   things that mean something: the fare, "below average", the chart line, an
   alert threshold, a success.
   ============================================================ */

/* The tracking list and the alerts are pages of cards, not a card of cards:
   the outer wrapper drops its chrome and its title becomes the page heading,
   set like the landing's calm section headings. */
#trackingView > .card, #alertsView > .card {
  background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0;
}
#trackingView > .card > .card-head { margin-bottom: 22px; align-items: flex-end; }
#trackingView > .card > .card-head > h2,
#alertsView > .card > h2 {
  font: 700 clamp(28px, 3.4vw, 40px)/1.12 var(--font-display); letter-spacing: -.03em;
}
#trackingView > .card > .card-head > h2 { flex: 1 1 auto; }
#alertsView > .card > .hint { font-size: 16px; margin: 8px 0 18px; max-width: 60ch; }
#trackingView .switch {
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--surface);
  font-size: 13.5px; font-weight: 600; color: var(--text);
}
#trackingView .switch:hover { border-color: var(--border-strong); }

/* Empty states read as an invitation, not as a gap. */
.empty {
  padding: 40px 24px; border-radius: var(--radius);
  border: 1.5px dashed var(--border-strong); background: var(--surface);
  font-size: 15px;
}

/* The header: a pill rail, and every control on it rounded to match. */
.topbar { background: color-mix(in srgb, var(--surface) 88%, transparent); }
.planbadge { padding: 5px 12px; border-width: 1.5px; }
.langbtn { border-radius: 999px; }
.menu-item { border-radius: 10px; }

/* Auth: the pitch line in the landing's voice, one clear action. */
.auth-card { padding: 32px 30px; }
.authform { display: flex; flex-direction: column; gap: 14px; }
.authform label { display: flex; flex-direction: column; gap: 7px; }
.authform .btn[type="submit"] { width: 100%; min-height: 50px; }

/* Checkout summary and plan cards on the inner pages. */
.summary-total { font: 700 20px var(--font-display); }
.plan-price b { font-family: var(--font-display); }

/* Success states carry the landing's green. */
.pay-done .tick { background: var(--lp-good); color: var(--lp-on-good); }
.push-on { color: var(--good); font-weight: 700; }

.modal { border-radius: var(--radius); }

@media (max-width: 640px) {
  #trackingView > .card, #alertsView > .card { padding: 0; }
  #trackingView > .card > .card-head { align-items: center; }
  .auth-card { margin-top: 28px; padding: 24px 20px; }
  .hero-price { font-size: 52px; }
  .rail-cell { padding: 14px 14px 16px; }
}
@media (max-width: 560px) {
  .card, .card-lg { border-radius: 18px; }
  .btn-sm { min-height: 44px; }
  .chip, .chip-opt { min-height: 44px; }
  .seg { min-height: 44px; }
  .chip-pick { min-height: 44px; padding-left: 13px; font-size: 13.5px; }
  .chip-pick button { min-width: 40px; min-height: 40px; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active, .panel, .panel:hover, .row, .row:hover,
  .chip, .chip:hover, .chip-opt, .chip-opt:hover, .fc-locked:hover {
    transform: none !important; transition: none;
  }
}

/* ============================================================
   Landing — "fun on top, serious below"
   ============================================================
   The top half (hero, how it works, the fares) is loud on purpose: thick ink
   outlines, hard offset shadows, colour. From "How we make money" down it goes
   quieter — soft tints, thinner outlines, smaller shadows — because that is the half a careful
   reader checks before trusting us, and it should look like a statement rather
   than an advert. Colours come from the --lp-* tokens, which are re-stepped for
   dark mode rather than inverted.
   ============================================================ */
.view.lp { max-width: none; padding: 0; }
.lp {
  background: var(--lp-bg); color: var(--lp-ink);
  font-size: 16.5px; line-height: 1.55; overflow-x: clip;
}
.lp .num { font-variant-numeric: tabular-nums; }
.lp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.lp :focus-visible { outline: 3px solid var(--lp-violet); outline-offset: 3px; }
.lp-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* The anchors the menu and the footer scroll to sit under a sticky header. */
#pricingAnchor, #contactAnchor, #dealsSection { scroll-margin-top: 84px; }

/* Buttons. Ink text on the gradient, not white: white on this pink is 3:1,
   ink is over 5:1 on both ends of it. */
.lbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 0 26px; border-radius: 999px;
  border: 2.5px solid #1a0b2e; box-shadow: 4px 4px 0 #1a0b2e;
  font: 800 16.5px/1 var(--font-display); color: #1a0b2e; cursor: pointer;
  white-space: nowrap; transition: transform .15s, box-shadow .15s;
}
.lbtn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #1a0b2e; }
.lbtn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #1a0b2e; }
.lbtn-p { background: linear-gradient(90deg, var(--lp-pink), var(--lp-orange)); }
.lbtn-w { background: #fff; }

/* ---- hero ---- */
.lp-hero { position: relative; padding: 36px 0 40px; overflow: hidden; isolation: isolate; }
.lp-blob {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; z-index: -1;
  animation: lp-float 14s ease-in-out infinite alternate;
}
.lp-b1 { width: 520px; height: 520px; background: var(--lp-pink); top: -160px; right: -120px; }
.lp-b2 { width: 420px; height: 420px; background: var(--lp-orange); bottom: -180px; left: -120px; animation-delay: -5s; }
.lp-b3 { width: 340px; height: 340px; background: var(--lp-violet); top: 120px; right: 30%; opacity: .28; animation-delay: -9s; }
@keyframes lp-float { to { transform: translate(40px, 30px) scale(1.08); } }

.lp-hg { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; padding-top: 28px; }
.lp-hg.solo { grid-template-columns: minmax(0, 820px); }
.lp-hcopy { min-width: 0; }
.lp-pill {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  background: var(--lp-card); color: var(--lp-ink);
  border: 2.5px solid #1a0b2e; border-radius: 999px; box-shadow: 3px 3px 0 #1a0b2e;
  padding: 6px 14px 6px 8px; font: 700 14px var(--font-display);
}
.lp-pill b { background: var(--lp-good); color: var(--lp-on-good); border-radius: 999px; padding: 2px 9px; font-size: 12.5px; }
.lp-h1 {
  font: 800 clamp(42px, 6vw, 76px)/1.02 var(--font-display);
  letter-spacing: -.045em; margin: 22px 0 20px; color: var(--lp-ink); text-wrap: balance;
}
.lp-rot { display: inline-block; position: relative; height: 1.06em; overflow: hidden; vertical-align: bottom; max-width: 100%; }
.lp-rot span {
  display: block; white-space: nowrap; padding-bottom: .06em;
  background: linear-gradient(90deg, var(--lp-hot1), var(--lp-hot2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-pz {
  display: inline-block; margin: .12em 0 0 .12em; padding: 0 .18em;
  background: var(--lp-yellow); color: #1a0b2e;
  border: 3px solid #1a0b2e; border-radius: 18px; box-shadow: 5px 5px 0 #1a0b2e;
  transform: rotate(-3deg);
}
.lp-lede { font-size: 19px; color: var(--lp-ink2); max-width: 31em; margin: 0 0 28px; }
.lp-hbtns { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.lp-hnote { font-size: 14px; color: var(--lp-muted); margin: 16px 0 0; }
.lp .lp-login { color: var(--lp-ink); font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; padding: 4px 2px; }

/* The price card: one route, drawn from the days we checked it. */
.lp-phone {
  position: relative; justify-self: center; width: 100%; max-width: 360px;
  background: var(--lp-card); color: var(--lp-ink);
  border: 3px solid #1a0b2e; border-radius: 34px; box-shadow: 8px 8px 0 var(--lp-line);
  padding: 14px 18px 18px; transform: rotate(2.5deg); transition: transform .4s;
}
.lp-phone:hover { transform: rotate(0) translateY(-4px); }
.lp-ph-photo {
  position: relative; height: 86px; margin: 0 -4px 12px; border-radius: 22px;
  border: 2.5px solid #1a0b2e; background-color: var(--lp-orange);
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat;
}
.lp-credit {
  position: absolute; right: 8px; bottom: 6px; max-width: calc(100% - 16px);
  font: 500 10.5px/1.3 var(--font-sans); color: #fff;
  background: rgb(0 0 0 / .55); border-radius: 6px; padding: 1px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-ph-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 800 14px var(--font-display); }
.lp-ph-top span { font: 500 12.5px var(--font-sans); color: var(--lp-muted); text-align: right; }
.lp-ph-price { font: 800 56px/1 var(--font-display); letter-spacing: -.05em; margin: 10px 0 2px; }
.lp-ph-price sup, .lp-pr sup { font-size: .42em; vertical-align: top; position: relative; top: .3em; }
.lp-ph-sub { font-size: 13px; color: var(--lp-muted); font-weight: 500; }
.lp-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 4px; }
.lp-tag {
  font: 700 12.5px var(--font-display); padding: 4px 10px; border-radius: 999px;
  border: 2px solid #1a0b2e; background: var(--lp-c4); color: #1a0b2e;
}
.lp-tag.alt { background: var(--lp-c2); }
svg.lp-mini { display: block; width: 100%; height: auto; overflow: visible; margin-top: 8px; }
.lp-mini .avg { stroke: var(--lp-hot1); stroke-width: 1.5; stroke-dasharray: 5 5; }
.lp-mini .avg-t { font: 800 10px var(--font-display); fill: var(--lp-hot1); }
.lp-mini .ln { fill: none; stroke: var(--lp-chart); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.lp-mini .gz { stroke: var(--lp-good); }
.lp-mini .dot { fill: var(--lp-yellow); stroke: #1a0b2e; stroke-width: 3; }
.lp-mini .ax { font: 600 10px var(--font-sans); fill: var(--lp-muted); }
.lp-ph-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.lp-ph-stats div { background: var(--lp-bg2); border-radius: 14px; padding: 8px 10px; font-size: 11.5px; color: var(--lp-muted); font-weight: 500; }
.lp-ph-stats b { display: block; font: 800 15.5px var(--font-display); color: var(--lp-ink); }
.lp-ph-fam {
  margin-top: 10px; padding: 9px 11px; border-radius: 16px;
  border: 2px dashed color-mix(in srgb, var(--lp-ink) 35%, transparent);
  font-size: 12.5px; color: var(--lp-ink2); line-height: 1.4;
}
.lp-ph-fam b { display: block; font: 800 15px var(--font-display); color: var(--lp-ink); }
.lp-ph-fn { font-size: 11px; color: var(--lp-muted); margin: 8px 2px 0; }
.lp-stk {
  position: absolute; font: 800 13px var(--font-display); white-space: nowrap;
  background: var(--lp-c3); color: #1a0b2e; border: 2.5px solid #1a0b2e;
  border-radius: 999px; padding: 6px 12px; box-shadow: 3px 3px 0 #1a0b2e;
}
.lp-s1 { right: 34px; bottom: -20px; transform: rotate(5deg); }
.lp-s2 { left: -30px; top: 42%; transform: rotate(-8deg); background: var(--lp-c1); }

/* Where the numbers come from — every part of it read from data. */
.lp-prov {
  margin-top: 56px; display: flex; flex-wrap: wrap; gap: 6px 18px;
  align-items: center; justify-content: center;
  background: var(--lp-card); border: 2px solid var(--lp-line); border-radius: 18px;
  padding: 11px 18px; font-size: 14px; font-weight: 500; color: var(--lp-ink2);
}
.lp-prov:empty { display: none; }
.lp-prov span { display: inline-flex; align-items: center; gap: 7px; }
.lp-prov span + span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lp-muted); margin-right: 11px;
}
.lp-live { width: 9px; height: 9px; border-radius: 50%; background: var(--lp-good); box-shadow: 0 0 0 3px var(--lp-good-soft); flex: none; }

/* ---- vivid sections ---- */
.lp-sec { padding: 80px 0; }
.lp-sh { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.lp-sh p { color: var(--lp-ink2); font-size: 18px; margin: 0; }
.lp-eyeb {
  display: inline-block; font: 800 13px var(--font-display); letter-spacing: .08em; text-transform: uppercase;
  background: var(--lp-ink); color: var(--lp-bg); padding: 5px 12px; border-radius: 999px; transform: rotate(-2deg);
}
.lp-eyeb-y { background: var(--lp-yellow); color: #1a0b2e; }
.lp-h2, .lp-sec .lp-h2 {
  font: 800 clamp(32px, 4.8vw, 56px)/1.04 var(--font-display);
  letter-spacing: -.04em; margin: 16px 0 12px; color: inherit; text-wrap: balance;
}
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lp-step {
  border: 2.5px solid #1a0b2e; border-radius: 28px; padding: 26px;
  box-shadow: 5px 5px 0 var(--lp-line); color: #1a0b2e; transition: transform .25s;
}
.lp-step:hover { transform: translateY(-4px) rotate(-.6deg); }
.lp-step:nth-child(1) { background: var(--lp-c1); }
.lp-step:nth-child(2) { background: var(--lp-c2); }
.lp-step:nth-child(3) { background: var(--lp-c4); }
.lp-n { display: block; font: 800 64px/1 var(--font-display); letter-spacing: -.05em; }
.lp-step h3 { font: 800 22px/1.15 var(--font-display); letter-spacing: -.02em; margin: 10px 0 8px; }
.lp-step p { margin: 0; font-size: 15.5px; }

/* ---- deals ---- */
.lp-deals { background: var(--lp-deals-bg); color: var(--lp-deals-ink); border-radius: 48px; margin: 0 12px; }
.lp-deals .lp-sh p { color: var(--lp-deals-ink2); }
.lp-chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 0 0 30px; }
.lp-chip {
  font: 800 15px var(--font-display); background: transparent; color: inherit;
  border: 2.5px solid currentColor; border-radius: 999px; padding: 9px 16px; min-height: 44px;
  cursor: pointer; transition: transform .2s, background .2s, color .2s;
}
.lp-chip small { font-weight: 600; opacity: .75; margin-left: 5px; }
.lp-chip.on { background: var(--lp-yellow); color: #1a0b2e; border-color: var(--lp-yellow); transform: rotate(-2deg); }
.lp-chip:disabled { opacity: .45; cursor: not-allowed; }
.lp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.lp-deal {
  min-width: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--c); color: #1a0b2e;
  border: 2.5px solid #000; border-radius: 26px; box-shadow: 5px 5px 0 #000;
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s;
}
.lp-deal:hover { transform: translateY(-6px) rotate(-1.2deg); box-shadow: 9px 11px 0 #000; }
.lp-im {
  position: relative; height: 140px; border-bottom: 2.5px solid #000;
  background-color: var(--lp-orange);
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat;
}
.lp-code {
  position: absolute; top: 10px; left: 10px; font: 800 12px var(--font-display); letter-spacing: .04em;
  background: #fff; border: 2px solid #000; border-radius: 999px; padding: 3px 9px;
}
.lp-bd { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.lp-city { font: 800 21px/1.1 var(--font-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.lp-dt { font-size: 13.5px; font-weight: 500; margin-top: 4px; }
.lp-pr { font: 800 40px/1 var(--font-display); letter-spacing: -.05em; margin: 12px 0 4px; }
.lp-pp { font-size: 12px; font-weight: 700; line-height: 1.35; margin-bottom: 14px; }
.lp-fol {
  margin-top: auto; min-height: 44px; border: 0; border-radius: 999px; cursor: pointer;
  background: #1a0b2e; color: #fff; font: 800 14.5px var(--font-display); transition: transform .15s;
}
.lp-fol:active { transform: scale(.94); }
.lp-fol:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.lp-src { text-align: center; font-size: 13.5px; color: var(--lp-deals-ink2); margin: 28px auto 0; max-width: 680px; }

/* ============ calm half ============ */
.lp-calm { background: var(--lp-s1); color: var(--lp-t1); margin-top: 56px; }
.lp-calm .lp-alt { background: var(--lp-s2); }
.lp-calm .lp-sh { text-align: left; margin: 0 0 32px; max-width: 720px; }
.lp-eyec { font: 700 12.5px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.lp-calm h2 { font: 700 clamp(28px, 3.4vw, 40px)/1.12 var(--font-display); letter-spacing: -.025em; margin: 8px 0 10px; color: var(--lp-t1); }
.lp-calm .lp-sh p { color: var(--lp-t2); font-size: 17px; }
.lp-calm h3 { font: 700 18px/1.25 var(--font-display); margin: 0 0 6px; color: var(--lp-t1); }
.lp-calm p { color: var(--lp-t2); }
.cbtn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px;
  border-radius: 12px; border: 1.5px solid var(--lp-t1); background: transparent; color: var(--lp-t1);
  font: 700 15px var(--font-sans); cursor: pointer; text-decoration: none;
}
.cbtn:hover { background: var(--lp-s2); }

.lp-earn { padding: 44px 0; border-bottom: 1px solid var(--lp-rule); }
.lp-earn .lp-wrap { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; }
.lp-earn h2 { font-size: 22px; margin: 4px 0 0; }
.lp-earn ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.lp-earn li { padding: 4px 20px; border-left: 1px solid var(--lp-rule); font-size: 15px; color: var(--lp-t2); }
.lp-earn li b { display: block; color: var(--lp-t1); font: 700 15.5px/1.3 var(--font-sans); margin-bottom: 3px; }

.lp-fam { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; }
.lp-box { background: var(--lp-s1); border: 1px solid var(--lp-rule); border-radius: 16px; padding: 22px; min-width: 0; }
.lp-xch { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.lp-xch b { font: 700 17px var(--font-display); }
.lp-badge {
  font: 700 11.5px var(--font-sans); letter-spacing: .06em; text-transform: uppercase;
  border: 1.5px solid var(--lp-ph-bd); color: var(--lp-ph-t); background: var(--lp-ph-bg); border-radius: 6px; padding: 2px 7px;
}
.lp-soonb { font: 700 11.5px var(--font-sans); letter-spacing: .04em; border: 1.5px solid var(--accent); color: var(--accent); border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.lp-meta { font-size: 13.5px; color: var(--lp-t3) !important; margin: 4px 0 16px; }
.lp-xc table { width: 100%; border-collapse: collapse; font-size: 15px; }
.lp-xc td { padding: 9px 0; border-bottom: 1px solid var(--lp-rule); color: var(--lp-t2); }
.lp-xc td:last-child { text-align: right; color: var(--lp-t1); font-weight: 700; white-space: nowrap; }
.lp-xc td small { display: block; color: var(--lp-t3); font-size: 12.5px; font-weight: 400; }
.lp-xc tr.tot td { border-bottom: 0; padding-top: 12px; }
.lp-xc tr.tot td:last-child { font: 700 24px var(--font-display); }
.lp-xcn { font-size: 13px; color: var(--lp-t3) !important; margin: 14px 0 0; line-height: 1.5; }
.lp-aif { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.lp-aif legend { font: 700 14px var(--font-sans); color: var(--lp-t1); padding: 0; margin-bottom: 10px; }
.lp-aic { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-aic label {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--lp-rule); background: var(--lp-s2);
  border-radius: 10px; padding: 7px 11px; font: 500 14px var(--font-sans); color: var(--lp-t1);
}
.lp-aic input { accent-color: var(--accent); width: 16px; height: 16px; min-height: 0; margin: 0; }
.lp-aip {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px;
  padding: 10px 12px; border: 1px solid var(--lp-rule); border-radius: 10px; font-size: 14px; color: var(--lp-t2);
}
.lp-aip b { color: var(--lp-t1); }
.lp-ai .cbtn { width: 100%; }
.lp-ain { font-size: 14px; margin: 14px 0 0; line-height: 1.5; }

/* Plan cards: the same markup renderPlanCards has always produced, restyled. */
.lp-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.lp-plans .plan-card {
  background: var(--lp-s1); border: 1px solid var(--lp-rule); border-radius: 16px;
  padding: 24px 20px; box-shadow: none; gap: 0;
}
.lp-plans .plan-card.featured { border: 2px solid var(--accent); padding: 23px 19px; box-shadow: none; }
.lp-plans .plan-tag {
  top: -12px; left: 18px; right: auto; border-radius: 6px; padding: 3px 9px;
  background: var(--accent); color: var(--on-accent);
  font: 700 12px var(--font-sans); letter-spacing: .04em; text-transform: none;
}
.lp-plans .plan-name { font: 700 13px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--lp-t3); }
.lp-plans .plan-for { font: 600 15px/1.35 var(--font-sans); color: var(--lp-t2); margin: 4px 0 12px; min-height: 2.7em; }
.lp-plans .plan-price b { font: 700 38px/1 var(--font-display); letter-spacing: -.03em; color: var(--lp-t1); }
.lp-plans .plan-price span { color: var(--lp-t3); font-size: 14.5px; }
.lp-plans .feature-list { margin: 18px 0 22px; gap: 8px; }
.lp-plans .feature-list li { color: var(--lp-t2); font-size: 14.5px; line-height: 1.4; }
.lp-plans .feature-list li::before {
  content: ""; flex: none; width: 14px; height: 8px; margin-top: 5px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.lp-plans .btn { margin-top: auto; width: 100%; min-height: 48px; border-radius: 12px; font: 700 15px var(--font-sans); }
.lp-plans .btn-ghost { background: transparent; border: 1.5px solid var(--lp-t1); color: var(--lp-t1); }
.lp-plans .btn-ghost:hover { background: var(--lp-s2); border-color: var(--lp-t1); }
.lp-plans .btn-primary { background: var(--lp-t1); color: var(--lp-s1); border: 1.5px solid var(--lp-t1); }
.lp-plans .btn-primary:hover { opacity: .9; background: var(--lp-t1); }
.lp-plans .btn:disabled { opacity: .6; }
.lp-plans .plan-locked-note { margin-top: auto; }

.lp-guar {
  list-style: none; margin: 28px 0 0; padding: 18px 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  border: 1px solid var(--lp-rule); border-radius: 14px; background: var(--lp-s2);
}
.lp-guar li { display: flex; gap: 10px; font: 600 14.5px/1.35 var(--font-sans); color: var(--lp-t1); }
.lp-guar li::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--good); background: radial-gradient(circle, var(--good) 0 3px, transparent 3.5px);
}
.lp-cmp, .lp-faq details { color: var(--lp-t1); }
.lp-cmp { margin: 18px 0 0; border: 1px solid var(--lp-rule); border-radius: 14px; background: var(--lp-s1); overflow: hidden; }
.lp-calm summary {
  cursor: pointer; list-style: none; padding: 16px 20px; min-height: 44px;
  font: 700 16px var(--font-sans); color: var(--lp-t1);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.lp-calm summary::-webkit-details-marker { display: none; }
.lp-calm summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-top: -4px;
  border-right: 2px solid var(--lp-t2); border-bottom: 2px solid var(--lp-t2);
  transform: rotate(45deg); transition: transform .2s;
}
.lp-calm details[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.lp-tw { overflow-x: auto; border-top: 1px solid var(--lp-rule); -webkit-overflow-scrolling: touch; }
.lp-tw table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 14.5px; }
.lp-tw th, .lp-tw td { padding: 11px 14px; text-align: center; border-bottom: 1px solid var(--lp-rule); color: var(--lp-t1); }
.lp-tw tbody th { text-align: left; color: var(--lp-t2); font-weight: 500; }
.lp-tw thead th { font: 700 13.5px var(--font-sans); background: var(--lp-s2); }
/* The app's tables set headers in small caps; a comparison reads better in plain case. */
.lp-tw th { text-transform: none; letter-spacing: 0; }
.lp-tw tbody tr:last-child > * { border-bottom: 0; }
.lp-tw .r { background: var(--accent-soft); font-weight: 700; }
.lp-tw th.r { color: var(--accent); }
.lp-y { color: var(--good); font-weight: 700; }
.lp-x { color: var(--lp-t3); }
.lp-soon {
  font: 700 11px var(--font-sans); letter-spacing: .03em; white-space: nowrap;
  border: 1px solid var(--lp-t3); color: var(--lp-t2); border-radius: 5px; padding: 0 6px;
}

.lp-faq { max-width: 820px; }
.lp-faq details { border-bottom: 1px solid var(--lp-rule); }
.lp-faq details:first-child { border-top: 1px solid var(--lp-rule); }
.lp-faq summary { padding: 18px 2px; font-size: 17px; }
.lp-a { padding: 0 2px 20px; color: var(--lp-t2); font-size: 15.5px; max-width: 680px; }
.lp-a p { margin: 0 0 10px; }
.lp-a p:last-child { margin: 0; }
.lp-a ul { margin: 0 0 10px; padding-left: 20px; }
.lp-a li { margin-bottom: 4px; }
.lp-a a, .lp-mailto { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

.lp-about { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lp-about.solo { grid-template-columns: minmax(0, 640px); }
.lp-about .lp-box p { margin: 0 0 10px; font-size: 15.5px; }
.lp-mailto { display: inline-block; font: 700 18px var(--font-sans); margin: 6px 0 8px; }
.lp-made { font: 700 12.5px var(--font-sans) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--lp-t3) !important; }
.lp-fine { font-size: 14px !important; color: var(--lp-t3) !important; }

/* Reveal on scroll. Only ever hidden under .js-reveal, which the script adds
   to <html> once it knows it can bring things back. */
.js-reveal .lp .rv { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.js-reveal .lp-calm .rv { transform: none; transition: opacity .5s ease-out; }
.js-reveal .lp .rv.in { opacity: 1; transform: none; }
.js-reveal .lp-steps .rv:nth-child(2), .js-reveal .lp-fam .rv:nth-child(2) { transition-delay: .08s; }
.js-reveal .lp-steps .rv:nth-child(3) { transition-delay: .16s; }

@media (max-width: 1000px) {
  .lp-hg { grid-template-columns: 1fr; gap: 64px; }
  .lp-grid, .lp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-steps { grid-template-columns: 1fr; }
  .lp-earn .lp-wrap { grid-template-columns: 1fr; gap: 14px; }
  .lp-earn ul { grid-template-columns: repeat(2, 1fr); gap: 14px 0; }
  .lp-fam { grid-template-columns: 1fr; }
  .lp-guar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .lp-wrap { padding: 0 16px; }
  .lp-hero { padding: 20px 0 32px; }
  .lp-hg { padding-top: 0; }
  .lp-h1 { font-size: clamp(38px, 11vw, 56px); }
  .lp-lede { font-size: 17px; }
  .lp-hbtns .lbtn { flex: 1 1 100%; }
  .lp-phone { max-width: 330px; transform: rotate(1.5deg); }
  .lp-s1 { right: 12px; }
  .lp-s2 { left: -6px; }
  .lp-prov { margin-top: 52px; justify-content: flex-start; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 13.5px; }
  .lp-prov span + span::before { display: none; }
  .lp-sec { padding: 56px 0; }
  .lp-deals { border-radius: 32px; margin: 0 6px; }
  .lp-deals .lp-wrap { padding: 0 12px; }
  .lp-grid { gap: 12px; }
  .lp-deal { border-radius: 20px; }
  .lp-im { height: 96px; }
  .lp-bd { padding: 10px 12px 12px; }
  .lp-city { font-size: 17px; }
  .lp-dt { font-size: 12px; }
  .lp-pr { font-size: 30px; margin-top: 8px; }
  .lp-pp { font-size: 11.5px; margin-bottom: 10px; }
  .lp-fol { font-size: 13.5px; }
  .lp-credit { font-size: 9.5px; }
  .lp-earn { padding: 36px 0; }
  .lp-earn ul { grid-template-columns: 1fr; }
  .lp-earn li { border-left: 0; border-top: 1px solid var(--lp-rule); padding: 12px 0 0; }
  .lp-plans { grid-template-columns: 1fr; gap: 20px; }
  .lp-plans .plan-for { min-height: 0; }
  .lp-guar { grid-template-columns: 1fr; }
  .lp-about { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-blob { display: none; }
  .lp-phone, .lp-phone:hover, .lp-step:hover, .lp-deal:hover, .lbtn:hover { transform: none; }
  .lp-phone { transform: none; }
  .lbtn, .lp-deal, .lp-step, .lp-chip, .lp-calm summary::after { transition: none; }
}

.lp-far { margin: -2px 0 4px; font-size: 12.5px; font-weight: 600; opacity: .8; }

.lp-share {
  margin-top: 8px; align-self: center; border: 0; background: none; cursor: pointer;
  font: 700 13px var(--font-display); color: inherit; opacity: .75; text-decoration: underline; text-underline-offset: 3px;
  min-height: 32px; padding: 4px 10px;
}
.lp-share:hover { opacity: 1; }

/* ---- The bell under the budget chips ---- */
.lp-watch {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px;
  margin: 0 auto 22px; max-width: 760px; padding: 12px 16px; border-radius: 18px;
  background: rgb(255 255 255 / .08); border: 1.5px dashed rgb(255 255 255 / .35); color: #fff;
}
.lp-watch-q, .lp-watch-on { font-weight: 700; }
.lp-watch select {
  min-height: 40px; border-radius: 999px; padding: 0 12px; font: 700 15px var(--font-display);
  border: 2px solid #1a0b2e; background: #ffd23f; color: #1a0b2e;
}
.lp-watch-btn {
  min-height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 2px solid #1a0b2e; background: #ffd23f; color: #1a0b2e; font: 800 14px var(--font-display);
}
.lp-watch-btn.ghost { background: transparent; color: #fff; border-color: rgb(255 255 255 / .6); }
.lp-watch-note { flex-basis: 100%; text-align: center; font-size: 12px; opacity: .75; }
/* ---- "From: Vilnius (VNO) · Change" above the deal strip ---- */
.lp-from {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  margin: -6px auto 16px; color: #fff; position: relative;
}
.lp-from-l { font-weight: 700; opacity: .8; }
.lp-from-btn {
  display: inline-flex; align-items: baseline; gap: 8px; min-height: 40px; padding: 6px 16px;
  border-radius: 999px; border: 2px solid rgb(255 255 255 / .55); background: rgb(255 255 255 / .1);
  color: #fff; font: 700 15px var(--font-display); cursor: pointer;
}
.lp-from-edit { font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; opacity: .8; }
.lp-from-ac { position: relative; min-width: 240px; }
.lp-from-ac input {
  width: 100%; min-height: 42px; border-radius: 999px; padding: 0 16px;
  border: 2px solid #ffd23f; font: 600 15px inherit; color: #1a0b2e; background: #fff;
}
.lp-from-ac .suggestions { color: var(--text); text-align: left; }
.lp-from-hint { flex-basis: 100%; text-align: center; font-size: 12px; opacity: .75; }
.lp-empty { text-align: center; color: #fff; font-weight: 600; margin: 0 auto 20px; max-width: 560px; }

/* ---- Waiting for another airport's fares ---- */
.lp-deals.is-loading .lp-grid, .lp-deals.is-loading .lp-chips, .lp-deals.is-loading .lp-watch {
  opacity: .35; pointer-events: none; transition: opacity .2s;
}
.lp-deals.is-loading .lp-empty { display: flex; align-items: center; justify-content: center; gap: 10px; }
.lp-spin {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 3px solid rgb(255 255 255 / .3); border-top-color: #ffd23f;
  animation: lp-spin .8s linear infinite;
}
@keyframes lp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lp-spin { animation-duration: 2.4s; } }

/* ============================================================
   Signed-in pages — the landing's loud half, carried inside
   ============================================================
   The signed-in pages speak the landing's language rather than a calmer third
   one: ink outlines, hard offset shadows, the landing tints, Bricolage display
   type, yellow for "selected". Everything here reuses the --lp-* tokens and the
   .lbtn / .lp-eyeb classes. Tinted surfaces (panels, step cards, alerts) are
   light islands in both themes, exactly like the landing's deal cards, so they
   re-declare the text tokens locally instead of inheriting dark-mode ones.
   ============================================================ */
:root {
  --ui-ink: #1a0b2e;
  --ui-shadow: #1a0b2e;
  --ui-card: #ffffff;
  --bg: var(--lp-bg);
  --surface-2: #fffaf4;
}
:root[data-theme="dark"] {
  --ui-ink: rgb(255 243 250 / .85);
  --ui-shadow: #000000;
  --ui-card: #24143a;
  --bg: var(--lp-bg);
  --surface: #24143a;
  --surface-2: #1f1030;
  --bg-elev: #2d1b47;
  --border: #3f2c5a;
  --border-strong: #5d4880;
  --muted: #c7b8d8;
  --faint: #a893bf;
}
body { background: var(--lp-bg); }

.panel, .fset.step, .alert-row {
  --text: #1a0b2e; --muted: #3a2a4c; --faint: #4a3a5c;
  --surface: #ffffff; --surface-2: #fffaf4; --bg-elev: #ffffff;
  --border: #1a0b2e; --border-strong: #1a0b2e;
  --accent: #4b1fd1; --accent-hover: #3a14a8; --accent-soft: #efeafd; --on-accent: #ffffff;
  --good: #0b6b43; --good-soft: #d8f7e8; --warn: #8a4b00; --warn-soft: #fff1dc;
  --danger: #b3261e; --danger-soft: #fdeceb;
  --lp-t1: #17141d; --lp-s1: #ffffff; --lp-ink: #1a0b2e; --lp-ink2: #4a3a5c;
  --lp-good: #0b7f50; --lp-on-good: #ffffff; --lp-chart: #6b3cff;
  --ui-ink: #1a0b2e; --ui-card: #ffffff;
  color: var(--text); color-scheme: light;
}

/* ---- landing CTA extras ---- */
.lbtn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: 4px 4px 0 #1a0b2e; }
.lbtn:focus-visible { outline: 3px solid var(--lp-violet); outline-offset: 3px; }
.lbtn-wide { width: 100%; }
.pg-head .push-inline .btn-primary,
.authform .btn-primary, #fbSend, #upgradeBtn, #paySubmit, .panel-empty .btn-primary {
  background: linear-gradient(90deg, var(--lp-pink), var(--lp-orange));
  color: #1a0b2e; border: 2.5px solid #1a0b2e; box-shadow: 4px 4px 0 #1a0b2e;
  font: 800 16px/1 var(--font-display); min-height: 50px; padding: 0 24px;
}
.pg-head .push-inline .btn-primary:hover:not(:disabled),
.authform .btn-primary:hover:not(:disabled), #fbSend:hover:not(:disabled),
#upgradeBtn:hover:not(:disabled), #paySubmit:hover:not(:disabled),
.panel-empty .btn-primary:hover:not(:disabled) {
  transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #1a0b2e;
}

/* ---- buttons, chips, fields: ink-edged ---- */
.btn { border-width: 2px; font-family: var(--font-display); font-weight: 800; letter-spacing: -.005em; }
.btn-primary { background: var(--lp-t1); color: var(--lp-s1); border-color: var(--lp-t1); }
.btn-primary:hover:not(:disabled) { box-shadow: 3px 3px 0 var(--lp-pink); }
.btn-ghost, .btn-back { background: var(--ui-card); border: 2px solid var(--ui-ink); color: var(--text); }
.btn-ghost:hover:not(:disabled), .btn-back:hover {
  background: var(--ui-card); border-color: var(--ui-ink); color: var(--text);
  box-shadow: 3px 3px 0 var(--ui-shadow);
}

.chip, .chip-opt, .chipset .chip, .seg, .tab {
  min-height: 44px; padding: 8px 16px; border-radius: 999px;
  border: 2px solid var(--ui-ink); background: var(--ui-card); color: var(--text);
  font: 800 14.5px/1.1 var(--font-display); letter-spacing: -.005em;
}
.chip:hover, .chip-opt:hover, .chipset .chip:hover, .seg:hover {
  border-color: var(--ui-ink); color: var(--text); box-shadow: 2px 2px 0 var(--ui-shadow);
}
.chip.active, .chip-opt.active, .chipset .chip.on, .seg.active, .tab.active {
  background: #ffd23f; color: #1a0b2e; border-color: #1a0b2e;
  box-shadow: 3px 3px 0 var(--ui-shadow); transform: rotate(-2deg); font-weight: 800;
}
.segmented { border: 0; background: transparent; padding: 0; gap: 8px; }
.seg { flex: 1; }
.tabs { background: transparent; border: 0; padding: 0; gap: 10px; }

input:not([type="checkbox"]):not([type="radio"]), select, .rangefield, #fbText {
  border: 2px solid var(--ui-ink); border-radius: 14px; background: var(--ui-card);
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, .rangefield:focus-visible {
  border-color: var(--ui-ink);
  box-shadow: 3px 3px 0 var(--lp-violet);
}
.rangepop, .suggestions {
  border: 2.5px solid #1a0b2e; border-radius: 22px; box-shadow: 6px 6px 0 var(--ui-shadow);
}
.chip-pick {
  background: #ffd23f; color: #1a0b2e; border: 2px solid #1a0b2e;
  font: 700 13px var(--font-display);
}
.chip-pick button:hover { background: rgb(26 11 46 / .12); }
.switch {
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 2px solid var(--ui-ink); background: var(--ui-card); color: var(--text);
  font: 700 14px var(--font-display);
}
#trackingView .switch { border: 2px solid var(--ui-ink); background: var(--ui-card); font: 700 14px var(--font-display); }

/* ---- cards ---- */
.card, .modal {
  background: var(--ui-card); color: var(--text);
  border: 2.5px solid var(--ui-ink); border-radius: 28px;
  box-shadow: 6px 6px 0 var(--ui-shadow);
}
.card h3 { font: 800 20px/1.2 var(--font-display); letter-spacing: -.02em; }
#newSearchCard, #aiCard {
  background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0;
}
#newSearchCard > form, #aiCard > form { padding: 0; }

/* ---- page head: the landing hero, as a band ---- */
.pg-head {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap;
  margin: 4px 0 30px; padding: 34px 38px 36px;
  border: 2.5px solid var(--ui-ink); border-radius: 34px; box-shadow: 6px 6px 0 var(--ui-shadow);
  color: var(--lp-ink);
  background:
    radial-gradient(42% 110% at 96% 0%, color-mix(in srgb, var(--lp-pink) 62%, transparent), transparent 72%),
    radial-gradient(38% 120% at 0% 110%, color-mix(in srgb, var(--lp-orange) 55%, transparent), transparent 72%),
    radial-gradient(30% 80% at 66% 40%, color-mix(in srgb, var(--lp-violet) 26%, transparent), transparent 72%),
    var(--lp-bg);
}
:root[data-theme="dark"] .pg-head {
  background:
    radial-gradient(42% 110% at 96% 0%, color-mix(in srgb, var(--lp-pink) 38%, transparent), transparent 72%),
    radial-gradient(38% 120% at 0% 110%, color-mix(in srgb, var(--lp-orange) 30%, transparent), transparent 72%),
    radial-gradient(30% 80% at 66% 40%, color-mix(in srgb, var(--lp-violet) 30%, transparent), transparent 72%),
    var(--lp-bg);
}
.pg-copy { min-width: 0; flex: 1 1 420px; }
.pg-title, .pg-head .sum-text b {
  display: block; margin: 16px 0 10px; color: inherit;
  font: 800 clamp(40px, 5vw, 56px)/1.02 var(--font-display); letter-spacing: -.045em; text-wrap: balance;
}
.pg-sub, .pg-head .sum-text small {
  display: block; margin: 0; max-width: 46ch;
  font: 500 17.5px/1.45 var(--font-sans); color: var(--lp-ink2);
}
.pg-act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pg-head .push-inline { margin: 0; }
.pg-head .push-on {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--lp-good); color: var(--lp-on-good); border: 2px solid #1a0b2e;
  font: 800 15px var(--font-display);
}
.pg-head .push-inline .hint { font-size: 14px; color: var(--lp-ink2); max-width: 36ch; }
.pg-head .btn-back { min-height: 46px; box-shadow: 3px 3px 0 var(--ui-shadow); }
.pg-tools { justify-content: flex-end; gap: 12px; margin-bottom: 18px !important; }
.pg-note { font-size: 15px !important; margin: 0 0 20px !important; max-width: 70ch; color: var(--muted); }

/* The two form pages keep their <details>; its summary becomes the band. */
#newSearchCard > summary.pg-head, #aiCard > summary.pg-head {
  display: flex; align-items: flex-end; cursor: default;
  padding: 34px 38px 36px; margin: 4px 0 30px;
  border: 2.5px solid var(--ui-ink); border-radius: 34px;
}
#newSearchCard > summary.pg-head:hover { background-color: var(--lp-bg); }
.pg-head .sum-plus { display: none; }
.pg-head .sum-text { display: block; min-width: 0; flex: 1 1 420px; }
.pg-head .sum-text .lp-eyeb { display: inline-block; }

/* AI: the landing's dark deals band. */
#aiCard > summary.pg-head-dark, #aiCard > summary.pg-head-dark:hover {
  background:
    radial-gradient(40% 110% at 98% 0%, color-mix(in srgb, var(--lp-violet) 55%, transparent), transparent 72%),
    radial-gradient(34% 120% at 0% 110%, color-mix(in srgb, var(--lp-pink) 32%, transparent), transparent 72%),
    var(--lp-deals-bg);
  color: var(--lp-deals-ink);
}
.pg-head-dark .sum-text small { color: var(--lp-deals-ink2); }
.pg-head .sum-tag {
  align-self: flex-start; margin-left: auto;
  background: #ffd23f; color: #1a0b2e; border: 2.5px solid #1a0b2e; border-radius: 999px;
  box-shadow: 3px 3px 0 #000; padding: 7px 14px; transform: rotate(4deg);
  font: 800 14px var(--font-display); letter-spacing: 0; text-transform: none;
}

/* ---- New tracking: the landing's "how it works" as the form ---- */
#searchForm > .fset.step {
  background: var(--st); border: 2.5px solid #1a0b2e; border-radius: 28px;
  padding: 24px 26px 28px; margin: 0 0 22px; box-shadow: 5px 5px 0 var(--ui-shadow);
}
.step-1 { --st: var(--lp-c1); }
.step-2 { --st: var(--lp-c2); }
.step-3 { --st: var(--lp-c4); }
#searchForm > .fset.step > legend {
  float: left; width: 100%; padding: 0; margin: 0 0 18px;
  display: flex; align-items: flex-end; gap: 14px;
  font: 800 clamp(24px, 2.6vw, 30px)/1.05 var(--font-display); letter-spacing: -.025em;
  text-transform: none; color: #1a0b2e;
}
#searchForm > .fset.step > legend::before {
  font: 800 64px/.78 var(--font-display); letter-spacing: -.05em;
}
.step-1 > legend::before { content: "1"; }
.step-2 > legend::before { content: "2"; }
.step-3 > legend::before { content: "3"; }
#searchForm > .fset.step > legend + * { clear: both; }
.fset.step label { color: #1a0b2e; font-weight: 700; }
.fset.step .hint { color: var(--muted); }

.fset-more {
  margin: 4px 0 24px; padding: 0 22px;
  background: var(--ui-card); border: 2px solid var(--ui-ink); border-radius: 24px;
  box-shadow: 3px 3px 0 var(--ui-shadow);
}
.fset-more > summary { font: 800 16px/1.3 var(--font-display); color: var(--text); padding: 16px 0; }
.fset-more > summary::before { color: var(--lp-pink); font-weight: 800; }
.fset-more[open] > summary { border-bottom: 2px dashed var(--border-strong); }
.fset-more .fset > legend { color: var(--text); }
#searchForm .formbar { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding-bottom: 8px; }
#searchForm .formbar .lbtn { min-height: 58px; font-size: 18px; }

/* ---- AI planner: fields in chunky white cards ---- */
#aiForm > .fset {
  background: var(--ui-card); border: 2.5px solid var(--ui-ink); border-radius: 26px;
  padding: 22px 24px 24px; margin: 0 0 20px; box-shadow: 5px 5px 0 var(--ui-shadow);
}
#aiForm > .fset > legend {
  float: left; width: 100%; padding: 0; margin: 0 0 14px;
  font: 800 22px/1.15 var(--font-display); letter-spacing: -.02em; text-transform: none; color: var(--text);
}
#aiForm > .fset > legend + * { clear: both; }
#aiForm .sublabel { display: block; font: 700 14px var(--font-display); margin: 6px 0 10px; }
#aiForm .formbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding-bottom: 8px; }
#aiForm .formbar .lbtn { min-height: 56px; }
.ai-results { padding: 0; gap: 18px; margin-top: 10px; }
.ai-card {
  background: var(--ui-card); border: 2.5px solid var(--ui-ink); border-radius: 26px;
  box-shadow: 5px 5px 0 var(--ui-shadow); padding: 20px 22px;
}
.ai-card h4 { font: 800 22px/1.15 var(--font-display); letter-spacing: -.02em; }

/* ---- Tracking panel: a deal card that grew up ---- */
#searchList { gap: 34px; }
#searchList .panel {
  background: var(--c, var(--lp-c1)); border: 2.5px solid #1a0b2e; border-radius: 28px;
  box-shadow: 6px 6px 0 var(--ui-shadow); overflow: hidden;
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s;
}
#searchList .panel:hover { border-color: #1a0b2e; transform: translateY(-3px); box-shadow: 8px 10px 0 var(--ui-shadow); }
#searchList > .panel:nth-child(6n+1) { --c: var(--lp-c1); }
#searchList > .panel:nth-child(6n+2) { --c: var(--lp-c2); }
#searchList > .panel:nth-child(6n+3) { --c: var(--lp-c3); }
#searchList > .panel:nth-child(6n+4) { --c: var(--lp-c4); }
#searchList > .panel:nth-child(6n+5) { --c: var(--lp-c5); }
#searchList > .panel:nth-child(6n+6) { --c: var(--lp-c6); }
#searchList > .panel.is-stopped { --c: #e7e2ee; }

#searchList .panel-top, #searchList .panel-top.has-photo {
  min-height: 176px; padding: 14px 16px 18px 20px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  border-bottom: 2.5px solid #1a0b2e; color: #fff;
  background:
    linear-gradient(180deg, rgb(12 4 24 / .05) 0%, rgb(12 4 24 / .22) 42%, rgb(12 4 24 / .78) 100%),
    linear-gradient(135deg, hsl(var(--dest-hue, 200) 80% 58%), #ffd23f);
}
#searchList .panel-top.has-photo {
  background:
    linear-gradient(180deg, rgb(12 4 24 / .08) 0%, rgb(12 4 24 / .26) 42%, rgb(12 4 24 / .8) 100%),
    var(--dest-photo) center 40% / cover no-repeat,
    linear-gradient(135deg, hsl(var(--dest-hue, 200) 80% 58%), #ffd23f);
}
#searchList .panel-top::after { display: none; }
#searchList .panel-titlebar { align-items: flex-start; gap: 10px; }
#searchList .panel-top .badge-route {
  background: #fff; color: #1a0b2e; border: 2px solid #1a0b2e; border-radius: 999px;
  padding: 4px 11px; font: 800 13px var(--font-display); letter-spacing: .04em; box-shadow: none;
}
#searchList .panel-actions { gap: 8px; width: auto; margin-left: auto; }
#searchList .panel-actions .btn {
  flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px;
  background: #fff; color: #1a0b2e; border: 2px solid #1a0b2e; box-shadow: 2px 2px 0 #1a0b2e;
  font: 800 14px var(--font-display);
}
#searchList .panel-actions .btn-primary { background: #ffd23f; }
#searchList .panel-actions .btn:hover { background: #ffd23f; color: #1a0b2e; border-color: #1a0b2e; box-shadow: 4px 4px 0 #1a0b2e; }
#searchList .panel-name {
  display: block; color: #fff;
  font: 800 clamp(32px, 4.2vw, 48px)/1 var(--font-display); letter-spacing: -.04em;
  text-shadow: 0 2px 14px rgb(0 0 0 / .45); overflow-wrap: anywhere;
}
#searchList .panel-name .panel-dot { display: none; }
#searchList .tag-stopped {
  display: inline-block; vertical-align: middle; margin-left: 10px; text-shadow: none;
  background: #fff; color: #1a0b2e; border: 2px solid #1a0b2e; padding: 3px 10px;
  font: 800 12px var(--font-display);
}

.panel-sub { padding: 16px 24px 0; }
#searchList .panel-meta { margin-top: 0; }
#searchList .panel-meta .badge, #searchList .panel-meta .badge[title]:hover {
  background: rgb(255 255 255 / .72); border: 2px solid #1a0b2e; color: #1a0b2e;
  font: 700 12.5px var(--font-sans); padding: 3px 10px; box-shadow: none;
}
#searchList .panel-meta .badge.badge-alert { background: #ffd23f; border-color: #1a0b2e; color: #1a0b2e; font-weight: 800; }
#searchList .panel-since { color: var(--muted); font-size: 12.5px; margin-top: 10px; background: none; padding: 0; }
.tag-inherit { background: #fff; border: 1.5px solid #1a0b2e; color: #1a0b2e; }

#searchList .panel-body { padding: 20px 24px 26px; }
#searchList .panel-hero { grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 28px; }
#searchList .hero-label { color: #1a0b2e; opacity: .8; }
#searchList .hero-pair { font-size: 21px; }
#searchList .hero-pair span { color: var(--muted); }
#searchList .hero-price {
  font-size: clamp(68px, 8.4vw, 104px); letter-spacing: -.06em; color: #1a0b2e; margin-top: 10px;
}
#searchList .hero-price sup { color: #1a0b2e; opacity: .75; }
#searchList .hero-chg { background: #fff; color: #1a0b2e; border: 2px solid #1a0b2e; font-weight: 800; }
#searchList .hero-chg.down { background: #7fe6cc; }
#searchList .hero-chg.up { background: #ffb184; }
#searchList .vs-avg {
  border: 2.5px solid #1a0b2e; box-shadow: 3px 3px 0 #1a0b2e; transform: rotate(-2deg);
  font: 800 15.5px var(--font-display); padding: 6px 14px; margin-top: 16px;
}
#searchList .vs-avg.good { background: #0b7f50; color: #fff; }
#searchList .vs-avg.bad { background: #ffb184; color: #1a0b2e; }
.datetag {
  background: #fff; color: #1a0b2e; border: 2px solid #1a0b2e; border-radius: 999px;
  box-shadow: 3px 3px 0 #1a0b2e; padding: 9px 15px; font: 800 16px var(--font-display);
}
.datetag b { color: #4b1fd1; }
.datetag-arrow { color: #1a0b2e; font-weight: 800; }
.datetag-len {
  background: #1a0b2e; color: #fff; border-radius: 999px; padding: 5px 11px;
  font: 800 12.5px var(--font-display);
}
#searchList .hero-book, #searchList .hero-book.btn-primary {
  background: #1a0b2e; color: #fff; border: 2px solid #1a0b2e; min-height: 50px; padding: 0 28px;
  font: 800 16px var(--font-display); box-shadow: none;
}
#searchList .hero-book:hover { box-shadow: 4px 4px 0 #fff, 6px 6px 0 #1a0b2e; }
#searchList .fc {
  background: #fff; border: 2px solid #1a0b2e; border-left-width: 7px; border-radius: 18px;
}
#searchList .fc-buy { background: #d8f7e8; border-left-color: #0b7f50; }
#searchList .fc-wait { background: #fff1dc; border-left-color: #d9530a; }
#searchList .fc-watch { border-left-color: #6b3cff; }
#searchList .fc-locked { background: rgb(255 255 255 / .6); border-style: dashed; border-left-style: solid; border-left-color: #1a0b2e; }
#searchList .fc-locked .fc-verdict { color: #1a0b2e; }

#searchList .panel-plot {
  --accent: #6b3cff; --border: #ebe4f2; --faint: #6b5b7d; --surface: #ffffff;
  background: #fff; border: 2.5px solid #1a0b2e; border-radius: 22px;
  box-shadow: 4px 4px 0 #1a0b2e; padding: 16px 16px 12px;
}
#searchList .panel-plot polyline { stroke-width: 4; }
#searchList .panel-plot .plot-empty {
  border: 0; background: transparent; min-height: 150px;
  font: 700 16px/1.4 var(--font-display); color: #1a0b2e;
}

#searchList .panel-rail {
  gap: 10px; background: transparent; border-top: 0; margin-top: 0; padding: 0 24px 24px;
}
#searchList .rail-cell {
  background: #fff; border: 2px solid #1a0b2e; border-radius: 18px; box-shadow: 3px 3px 0 #1a0b2e;
  padding: 12px 14px 14px;
}
#searchList .rail-cell:hover { background: #fffaf4; }
#searchList .rail-cell[aria-current="true"] { background: #ffd23f; border-color: #1a0b2e; transform: rotate(-1deg); }

#searchList .panel-empty {
  background: #fff; border: 2.5px solid #1a0b2e; border-radius: 22px;
  box-shadow: 4px 4px 0 #1a0b2e; padding: 26px 24px; color: var(--muted); font-size: 15px;
}
#searchList .panel-empty > b {
  display: block; margin: 0 auto 8px; max-width: 24ch; color: #1a0b2e;
  font: 800 clamp(24px, 2.8vw, 32px)/1.08 var(--font-display); letter-spacing: -.03em; text-wrap: balance;
}
#searchList .panel-empty.is-waiting { padding-top: 44px; }
#searchList .wait-pulse { top: 18px; width: 14px; height: 14px; margin-left: -7px; background: var(--lp-pink); }
#searchList .panel > .empty { font: 700 18px var(--font-display); color: #1a0b2e; padding: 30px 24px; }
#searchList .route-ctx { background: #fffaf4; border: 2px solid #1a0b2e; }

.list-sep { color: var(--lp-ink2); font: 800 13px var(--font-display); }
.list-sep::after { height: 2px; background: var(--ui-ink); opacity: .35; }

/* Empty pages: an invitation in display type, with the way forward. */
.empty-big {
  border: 2.5px dashed var(--ui-ink); border-radius: 30px; background: var(--ui-card);
  padding: 52px 24px; gap: 22px;
}
.empty-big p {
  margin: 0; max-width: 22ch; color: var(--lp-ink); text-wrap: balance;
  font: 800 clamp(28px, 3.6vw, 40px)/1.08 var(--font-display); letter-spacing: -.035em;
}

/* ---- Alerts: each one a tinted card with the fare up front ---- */
#alertList { gap: 22px; }
#alertList .alert-row {
  background: var(--c, var(--lp-c2)); border: 2.5px solid #1a0b2e; border-radius: 26px;
  box-shadow: 6px 6px 0 var(--ui-shadow); padding: 22px 24px;
}
#alertList .alert-row:hover { border-color: #1a0b2e; box-shadow: 8px 9px 0 var(--ui-shadow); transform: translateY(-3px); }
#alertList > .alert-row:nth-child(6n+1) { --c: var(--lp-c2); }
#alertList > .alert-row:nth-child(6n+2) { --c: var(--lp-c1); }
#alertList > .alert-row:nth-child(6n+3) { --c: var(--lp-c4); }
#alertList > .alert-row:nth-child(6n+4) { --c: var(--lp-c3); }
#alertList > .alert-row:nth-child(6n+5) { --c: var(--lp-c5); }
#alertList > .alert-row:nth-child(6n+6) { --c: var(--lp-c6); }
.alert-row .row-title { font: 800 clamp(22px, 2.6vw, 28px)/1.1 var(--font-display); letter-spacing: -.03em; }
.alert-row .row-sub { color: var(--muted); }
.alert-row .badge { background: rgb(255 255 255 / .72); border: 2px solid #1a0b2e; color: #1a0b2e; font-weight: 700; }
.alert-row .badge.good { background: #0b7f50; color: #fff; border-color: #1a0b2e; }
.alert-row .row-actions { flex-direction: column; align-items: flex-end; gap: 6px; }
.alert-row .price, .alert-row .price.good {
  font: 800 clamp(48px, 5.4vw, 64px)/.95 var(--font-display); letter-spacing: -.05em; color: #1a0b2e;
}
.alert-row .row-actions .btn-primary { background: #1a0b2e; color: #fff; border-color: #1a0b2e; min-height: 46px; }

/* ---- Profile ---- */
.prof-grid { gap: 12px; background: transparent; border: 0; border-radius: 0; overflow: visible; }
.prof-cell {
  --text: #1a0b2e; --muted: #3a2a4c; --faint: #4a3a5c; color: #1a0b2e;
  border: 2px solid #1a0b2e; border-radius: 20px; box-shadow: 3px 3px 0 var(--ui-shadow); padding: 16px 18px;
}
.prof-cell:nth-child(1) { background: var(--lp-c1); }
.prof-cell:nth-child(2) { background: var(--lp-c2); }
.prof-cell:nth-child(3) { background: var(--lp-c4); }
.prof-cell:nth-child(4) { background: var(--lp-c3); }
.prof-v { font: 800 19px/1.25 var(--font-display); }
.pay-row { border-bottom: 1.5px dashed var(--border-strong); }
.danger-zone { border-radius: 22px; border-width: 2px; }

/* ---- Auth: the landing hero behind one chunky card ---- */
body:has(#authView:not(.hidden)) {
  background:
    radial-gradient(40% 55% at 96% 4%, color-mix(in srgb, var(--lp-pink) 58%, transparent), transparent 72%),
    radial-gradient(42% 55% at 0% 100%, color-mix(in srgb, var(--lp-orange) 52%, transparent), transparent 72%),
    radial-gradient(30% 40% at 62% 42%, color-mix(in srgb, var(--lp-violet) 24%, transparent), transparent 72%),
    var(--lp-bg);
  background-attachment: fixed;
}
:root[data-theme="dark"] body:has(#authView:not(.hidden)) {
  background:
    radial-gradient(40% 55% at 96% 4%, color-mix(in srgb, var(--lp-pink) 34%, transparent), transparent 72%),
    radial-gradient(42% 55% at 0% 100%, color-mix(in srgb, var(--lp-orange) 26%, transparent), transparent 72%),
    radial-gradient(30% 40% at 62% 42%, color-mix(in srgb, var(--lp-violet) 30%, transparent), transparent 72%),
    var(--lp-bg);
  background-attachment: fixed;
}
.auth-card { border-radius: 32px; box-shadow: 8px 8px 0 var(--ui-shadow); padding: 36px 32px; }
.auth-head h1 { font: 800 clamp(34px, 4vw, 44px)/1.02 var(--font-display); letter-spacing: -.045em; }
.auth-head .hint { font-size: 15.5px; color: var(--lp-ink2); }
.authform label > span { font: 700 14px var(--font-display); }
.authform .btn[type="submit"] { min-height: 54px; font-size: 17px; }

/* ---- Header and the phone tab bar ---- */
.topbar {
  background: color-mix(in srgb, var(--lp-bg) 90%, transparent);
  border-bottom: 2px solid var(--ui-ink);
}
.navrail { background: var(--ui-card); border: 2px solid var(--ui-ink); box-shadow: 3px 3px 0 var(--ui-shadow); }
.navseg { font: 700 14.5px var(--font-display); color: var(--lp-ink2); }
.navseg:hover { color: var(--lp-ink); }
.navseg.active, .navseg-ai.active { color: #1a0b2e; font-weight: 800; }
.navseg-ink { background: #ffd23f; box-shadow: inset 0 0 0 2px #1a0b2e; }
.iconbtn, .langbtn { border: 2px solid var(--ui-ink); background: var(--ui-card); color: var(--lp-ink); }
.planbadge { border: 2px solid var(--ui-ink); background: var(--ui-card); color: var(--lp-ink); font-family: var(--font-display); }
.planbadge.premium { background: linear-gradient(90deg, var(--lp-pink), var(--lp-orange)); color: #1a0b2e; border-color: #1a0b2e; }
.avatar { background: var(--lp-violet); color: #fff; box-shadow: 0 0 0 2px var(--ui-ink); font-family: var(--font-display); font-weight: 800; }
.menu { border: 2.5px solid var(--ui-ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--ui-shadow); }

@media (max-width: 760px) {
  #searchList .panel-hero { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
  .pg-head, #newSearchCard > summary.pg-head, #aiCard > summary.pg-head {
    padding: 24px 20px 26px; border-radius: 28px; margin-bottom: 24px; box-shadow: 5px 5px 0 var(--ui-shadow);
  }
  .pg-title, .pg-head .sum-text b { font-size: clamp(32px, 9.6vw, 40px); margin: 14px 0 8px; }
  .pg-sub, .pg-head .sum-text small { font-size: 16px; }
  .pg-copy, .pg-head .sum-text { flex-basis: 100%; }
  .pg-act { width: 100%; }
  .pg-act > .lbtn { width: 100%; }
  .pg-head .sum-tag { position: absolute; top: 16px; right: 14px; font-size: 12.5px; padding: 5px 11px; }
  .pg-head-dark .sum-text .lp-eyeb { margin-right: 120px; }

  #searchList { gap: 26px; }
  #searchList .panel { border-radius: 24px; }
  #searchList .panel-top, #searchList .panel-top.has-photo { min-height: 170px; padding: 12px 12px 16px 16px; }
  #searchList .panel-actions { width: auto; }
  #searchList .panel-actions .btn { min-height: 44px; padding: 0 14px; }
  #searchList .panel-name { font-size: clamp(30px, 9vw, 38px); }
  .panel-sub { padding: 14px 16px 0; }
  #searchList .panel-body { padding: 16px 16px 20px; }
  #searchList .panel-rail { padding: 0 16px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #searchList .hero-price { font-size: 72px; }
  #searchList .panel-plot { padding: 12px 10px 10px; }

  #searchForm > .fset.step, #aiForm > .fset { padding: 20px 18px 22px; border-radius: 24px; }
  #searchForm > .fset.step > legend::before { font-size: 52px; }
  .fset-more { padding: 0 16px; }
  #aiForm .formbar { flex-direction: column; align-items: stretch; }
  #aiForm .formbar .lbtn { width: 100%; }

  #alertList .alert-row { padding: 18px; }
  .alert-row .row-actions { align-items: flex-start; }
  .auth-card { padding: 26px 20px; border-radius: 28px; }
  .card { border-radius: 24px; }
}
@media (max-width: 560px) {
  .topbar { background: var(--lp-bg); }
  .navrail {
    background: var(--ui-card); border: 0; border-top: 2.5px solid var(--ui-ink);
    border-radius: 0; box-shadow: none;
  }
  .navseg { font: 700 10.5px/1.15 var(--font-display); }
  .navseg-ink { display: none; }
  .navseg.active {
    background: #ffd23f; color: #1a0b2e;
    box-shadow: inset 0 0 0 2px #1a0b2e; font-weight: 800;
  }
  #searchForm .formbar, #aiForm .formbar { padding-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #searchList .panel, #searchList .panel:hover, #alertList .alert-row, #alertList .alert-row:hover,
  .chip, .chip-opt, .seg, .tab, #searchList .vs-avg, #searchList .rail-cell {
    transition: none; transform: none !important;
  }
  .pg-head .sum-tag { transform: none; }
}

/* ---- odds and ends ---- */
#searchForm .formbar, #aiForm .formbar { border-top: 0; }
@media (min-width: 761px) { #searchList .panel-hero { grid-template-columns: minmax(300px, 460px) minmax(0, 1fr); } }
#aiUnavailable {
  background: #ffd23f; color: #1a0b2e; border: 2.5px solid #1a0b2e; border-radius: 22px;
  box-shadow: 4px 4px 0 var(--ui-shadow); padding: 16px 20px; margin: 0 0 22px;
  font: 700 16px/1.4 var(--font-display); text-align: left;
}
.sitefoot { background: transparent; border-top: 2px solid var(--ui-ink); }

/* ---- Deal alerts at the top of the tracking list ---- */
.dw-list { display: grid; gap: 14px; margin: 0 0 22px; }
.dw-head { font: 800 22px/1.15 var(--font-display); letter-spacing: -.02em; margin: 4px 0 2px; }
.dw-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px;
  padding: 16px 18px; border: 2px solid var(--lp-ink, #1a0b2e); border-radius: 20px;
  background: var(--lp-c2, #ffd23f); color: #1a0b2e; box-shadow: 5px 5px 0 var(--lp-ink, #1a0b2e);
}
.dw-title { font: 800 19px/1.2 var(--font-display); }
.dw-sub { font-size: 13.5px; font-weight: 600; margin-top: 3px; opacity: .85; }
.dw-paused { color: #7a2e00; }
.dw-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dw-price {
  min-height: 44px; border-radius: 999px; padding: 0 14px; font: 700 15px var(--font-display);
  border: 2px solid #1a0b2e; background: #fff; color: #1a0b2e;
}
.dw-teaser {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; border: 2px dashed var(--border-strong); border-radius: 18px; font-weight: 600;
}
.list-hidden { text-align: center; margin: 14px 0 4px; }
@media (max-width: 560px) { .dw-acts { width: 100%; } .dw-acts .lbtn { flex: 1; } }

/* ---- AI planner: grouped choices, required sections ---- */
.ai-groups { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ai-seasons { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.ai-group {
  padding: 12px 14px 14px; border-radius: 18px; border: 2px solid var(--lp-ink, #1a0b2e);
  background: var(--surface);
}
.ai-group-sun { background: color-mix(in srgb, var(--lp-c2, #ffd25a) 35%, var(--surface)); }
.ai-group-winter { background: color-mix(in srgb, var(--lp-c3, #a9bcff) 35%, var(--surface)); }
.ai-group-culture { background: color-mix(in srgb, var(--lp-c6, #cfb2ff) 35%, var(--surface)); }
.ai-group-fun { background: color-mix(in srgb, var(--lp-c1, #ff9ec4) 35%, var(--surface)); }
.ai-group-nature { background: color-mix(in srgb, var(--lp-c4, #7fe6cc) 35%, var(--surface)); }
.ai-group-rest { background: color-mix(in srgb, var(--lp-c5, #ffb184) 35%, var(--surface)); }
.ai-group-spring { background: color-mix(in srgb, var(--lp-c4, #7fe6cc) 30%, var(--surface)); }
.ai-group-summer { background: color-mix(in srgb, var(--lp-c2, #ffd25a) 35%, var(--surface)); }
.ai-group-autumn { background: color-mix(in srgb, var(--lp-c5, #ffb184) 35%, var(--surface)); }
.ai-group-h { font: 800 15px/1.2 var(--font-display); margin-bottom: 10px; display: flex; gap: 8px; align-items: center; }
.ai-group-h span { font-size: 20px; }
.ai-group .chips { margin-bottom: 0; }
.chip-emo { margin-right: 6px; }
.req-hint { margin: -4px 0 12px; font-size: 13px; font-weight: 700; color: var(--accent); }
.fset.is-missing { animation: ai-missing 1.6s ease-out 1; border-radius: 20px; }
@keyframes ai-missing {
  0%, 30% { box-shadow: 0 0 0 4px #ff4f8b; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .fset.is-missing { animation: none; box-shadow: 0 0 0 3px #ff4f8b; } }

/* ============================================================
   Landing, lower half — the same vocabulary, turned down
   ============================================================
   From "How we make money" down the page keeps its job (the part a careful
   reader checks before trusting us) but speaks the landing's language at a
   lower volume: 2px ink outlines, a small hard shadow, one soft tint per
   section, yellow tilted eyebrows, one emoji per item for scanning. Emoji are
   drawn by CSS with empty alt text, so screen readers read only the copy.
   Hover lifts use `translate`, not `transform`, so they never fight the
   reveal-on-scroll rules, which own `transform`.
   ============================================================ */
.lp-calm {
  --cz-ink: #1a0b2e;
  --cz-card: #ffffff;
  --cz-mix: 24%;
  --cz-mix-card: 30%;
  --cz-blob: .55;
  --cz-rule: color-mix(in srgb, #1a0b2e 16%, transparent);
  --lp-t1: var(--lp-ink); --lp-t2: var(--lp-ink2); --lp-t3: var(--lp-muted);
  --lp-rule: var(--cz-rule);
  background: var(--lp-bg); color: var(--lp-t1);
}
:root[data-theme="dark"] .lp-calm {
  --cz-ink: rgb(255 243 250 / .82);
  --cz-card: #24143a;
  --cz-mix: 9%;
  --cz-mix-card: 14%;
  --cz-blob: .32;
  --cz-rule: rgb(255 243 250 / .16);
}

/* one tint per section, and a blurred blob like the hero's, standing still */
.lp-calm > section { position: relative; isolation: isolate; overflow: hidden; }
.lp-calm .lp-earn { background: color-mix(in srgb, var(--lp-c2) var(--cz-mix), var(--lp-bg)); border-bottom: 0; }
.lp-calm #familySection { background: color-mix(in srgb, var(--lp-c6) var(--cz-mix), var(--lp-bg)); --blob: var(--lp-pink); }
.lp-calm #plansSection { background: color-mix(in srgb, var(--lp-c1) var(--cz-mix), var(--lp-bg)); --blob: var(--lp-orange); }
.lp-calm #faqSection { background: color-mix(in srgb, var(--lp-c4) var(--cz-mix), var(--lp-bg)); --blob: var(--lp-violet); }
.lp-calm #aboutSection { background: color-mix(in srgb, var(--lp-c3) var(--cz-mix), var(--lp-bg)); --blob: var(--lp-pink); }
.lp-calm > .lp-sec::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 4%; bottom: 4%; right: -12%; width: min(60%, 640px);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--blob, var(--lp-pink)) 70%, transparent), transparent);
  opacity: var(--cz-blob);
}
.lp-calm #plansSection::before { right: auto; left: -16%; top: 20%; }
.lp-calm #faqSection::before { right: -6%; top: 14%; }
.lp-calm #aboutSection::before { right: auto; left: 34%; }

/* section labels: the hero's yellow tilted chip */
.lp-calm .lp-eyec {
  display: inline-block; font: 800 12.5px/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
  background: var(--lp-yellow); color: #1a0b2e; padding: 5px 12px; border-radius: 999px; transform: rotate(-2deg);
}
.lp-calm h2 {
  font: 800 clamp(30px, 4vw, 48px)/1.06 var(--font-display); letter-spacing: -.035em;
  margin: 14px 0 10px; color: var(--lp-t1); text-wrap: balance;
}
.lp-calm .lp-sh p { color: var(--lp-t2); font-size: 17.5px; }

/* the chunky-but-quiet card, shared */
.lp-calm .lp-box, .lp-calm .lp-plans .plan-card, .lp-calm .lp-guar, .lp-calm .lp-cmp,
.lp-calm .lp-faq details, .lp-calm .lp-earn li {
  border: 2px solid var(--cz-ink); box-shadow: 4px 4px 0 var(--lp-line);
}
.lp-calm .lp-box, .lp-calm .lp-plans .plan-card, .lp-calm .lp-faq details, .lp-calm .lp-earn li,
.js-reveal .lp-calm .lp-box.rv {
  transition: translate .25s cubic-bezier(.3, 1.5, .5, 1), box-shadow .25s ease, opacity .5s ease-out, background-color .2s;
}
.lp-calm .lp-box:hover, .lp-calm .lp-earn li:hover { translate: 0 -3px; box-shadow: 6px 7px 0 var(--lp-line); }

/* ---- how we make money ---- */
.lp-calm .lp-earn { padding: 48px 0; }
.lp-calm .lp-earn h2 { font-size: 26px; margin: 12px 0 0; }
.lp-calm .lp-earn ul { gap: 14px; }
.lp-calm .lp-earn li {
  background: var(--cz-card); border-radius: 20px; padding: 14px 16px 16px;
  box-shadow: 3px 3px 0 var(--lp-line); font-size: 14.5px; color: var(--lp-t2);
}
.lp-calm .lp-earn li::before {
  display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 8px; border-radius: 12px;
  background: color-mix(in srgb, var(--lp-c2) 55%, var(--cz-card)); border: 2px solid var(--cz-ink);
  font-size: 19px; line-height: 1;
}
.lp-calm .lp-earn li:nth-child(1)::before { content: "\1F3AB"; content: "\1F3AB" / ""; }
.lp-calm .lp-earn li:nth-child(2)::before { content: "\1F91D"; content: "\1F91D" / ""; }
.lp-calm .lp-earn li:nth-child(3)::before { content: "\2708\FE0F"; content: "\2708\FE0F" / ""; }
.lp-calm .lp-earn li:nth-child(4)::before { content: "\1F4B6"; content: "\1F4B6" / ""; }
.lp-calm .lp-earn li b { font: 800 16px/1.25 var(--font-display); color: var(--lp-t1); margin-bottom: 4px; }

/* ---- families ---- */
.lp-calm .lp-box { background: var(--cz-card); border-radius: 22px; padding: 24px; }
.lp-calm .lp-ai { background: color-mix(in srgb, var(--lp-c6) var(--cz-mix-card), var(--cz-card)); }
.lp-calm .lp-xc { background: color-mix(in srgb, var(--lp-c2) var(--cz-mix-card), var(--cz-card)); }
.lp-calm .lp-xch b { font: 800 19px/1.2 var(--font-display); letter-spacing: -.01em; }
.lp-calm .lp-soonb, .lp-calm .lp-badge {
  font: 800 12px/1.2 var(--font-display); letter-spacing: .03em; white-space: nowrap;
  border: 2px solid #1a0b2e; color: #1a0b2e; border-radius: 999px; padding: 4px 11px;
  box-shadow: 2px 2px 0 #1a0b2e;
}
.lp-calm .lp-soonb { background: var(--lp-yellow); transform: rotate(3deg); }
.lp-calm .lp-badge { background: #ffffff; text-transform: uppercase; transform: rotate(-2deg); }
.lp-calm .lp-aif legend { font: 800 15px var(--font-display); }
.lp-calm .lp-aic label {
  border: 2px solid var(--cz-ink); background: var(--cz-card); border-radius: 999px;
  padding: 7px 14px 7px 10px; font: 700 14px var(--font-display); color: var(--lp-t1);
}
.lp-calm .lp-aic label:has(input:checked) { background: var(--lp-yellow); color: #1a0b2e; border-color: #1a0b2e; }
.lp-calm .lp-aic input { accent-color: #1a0b2e; }
.lp-calm .lp-aip {
  border: 2px dashed color-mix(in srgb, var(--cz-ink) 55%, transparent); border-radius: 16px;
  background: color-mix(in srgb, var(--cz-card) 70%, transparent);
}
.lp-calm .lp-aip b { font-family: var(--font-display); font-weight: 800; }
.lp-calm .cbtn {
  min-height: 50px; border-radius: 999px; border: 2.5px solid #1a0b2e; background: #ffffff; color: #1a0b2e;
  font: 800 15.5px var(--font-display); box-shadow: 3px 3px 0 #1a0b2e;
  transition: translate .15s, box-shadow .15s;
}
.lp-calm .cbtn:hover { background: #ffffff; translate: -2px -2px; box-shadow: 5px 5px 0 #1a0b2e; }
.lp-calm .cbtn:active { translate: 2px 2px; box-shadow: 1px 1px 0 #1a0b2e; }
.lp-calm .lp-xc td { border-bottom: 2px dotted var(--cz-rule); }
.lp-calm .lp-xc tr.tot td:last-child { font: 800 30px/1 var(--font-display); letter-spacing: -.03em; }
.lp-calm .lp-xc tr.tot td:last-child::after {
  content: ""; display: block; height: 8px; margin: -6px -4px 0 auto; width: 100%;
  background: color-mix(in srgb, var(--lp-pink) 55%, transparent); border-radius: 4px;
}

/* ---- plans ---- */
.lp-calm .lp-plans { gap: 18px; padding-top: 10px; }
.lp-calm .lp-plans .plan-card {
  --band: color-mix(in srgb, var(--lp-ink) 14%, var(--cz-card));
  background: color-mix(in srgb, var(--band) var(--cz-mix-card), var(--cz-card));
  border-radius: 22px; padding: 30px 20px 22px;
  box-shadow: inset 0 12px 0 var(--band), 4px 4px 0 var(--lp-line);
}
.lp-calm .lp-plans .plan-card:nth-child(2) { --band: var(--lp-c5); }
.lp-calm .lp-plans .plan-card:nth-child(3) { --band: var(--lp-c6); }
.lp-calm .lp-plans .plan-card:nth-child(4) { --band: var(--lp-c2); }
.lp-calm .lp-plans .plan-card:hover { translate: 0 -4px; box-shadow: inset 0 12px 0 var(--band), 6px 7px 0 var(--lp-line); }
.lp-calm .lp-plans .plan-card.featured {
  border: 2.5px solid var(--cz-ink); padding: 30px 20px 22px; translate: 0 -8px;
  box-shadow: inset 0 12px 0 var(--band), 6px 7px 0 var(--lp-line);
}
.lp-calm .lp-plans .plan-card.featured:hover { translate: 0 -11px; box-shadow: inset 0 12px 0 var(--band), 8px 9px 0 var(--lp-line); }
.lp-calm .lp-plans .plan-card.current { border-style: dashed; }
.lp-calm .lp-plans .plan-tag {
  top: -15px; left: 16px; right: auto; z-index: 1;
  background: var(--lp-yellow); color: #1a0b2e; border: 2px solid #1a0b2e; border-radius: 999px;
  box-shadow: 2px 2px 0 #1a0b2e; padding: 4px 12px; transform: rotate(-4deg);
  font: 800 13px/1.2 var(--font-display); letter-spacing: .01em; text-transform: none;
}
.lp-calm .lp-plans .plan-name { font: 800 14px var(--font-display); letter-spacing: .09em; color: var(--lp-t1); }
.lp-calm .lp-plans .plan-price b { font: 800 42px/1 var(--font-display); letter-spacing: -.045em; }
.lp-calm .lp-plans .feature-list li::before { border-color: var(--lp-t1); }
.lp-calm .lp-plans .btn {
  border-radius: 999px; border: 2px solid var(--cz-ink); font: 800 15.5px var(--font-display);
  transition: translate .15s, box-shadow .15s, background-color .15s;
}
.lp-calm .lp-plans .btn-ghost { background: var(--cz-card); color: var(--lp-t1); }
.lp-calm .lp-plans .btn-ghost:hover:not(:disabled) {
  background: var(--cz-card); border-color: var(--cz-ink); translate: -1px -1px; box-shadow: 3px 3px 0 var(--lp-line);
}
.lp-calm .lp-plans .btn-primary {
  background: linear-gradient(90deg, var(--lp-pink), var(--lp-orange)); color: #1a0b2e;
  border: 2.5px solid #1a0b2e; box-shadow: 3px 3px 0 #1a0b2e;
}
.lp-calm .lp-plans .btn-primary:hover:not(:disabled) {
  opacity: 1; background: linear-gradient(90deg, var(--lp-pink), var(--lp-orange));
  translate: -2px -2px; box-shadow: 5px 5px 0 #1a0b2e;
}
.lp-calm .lp-plans .btn:disabled { box-shadow: none; }

/* guarantees: one card, one emoji per promise */
.lp-calm .lp-guar { margin-top: 34px; padding: 18px 20px; border-radius: 22px; background: var(--cz-card); gap: 14px 18px; }
.lp-calm .lp-guar li { align-items: center; gap: 12px; font: 700 14.5px/1.35 var(--font-sans); }
.lp-calm .lp-guar li::before {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%;
  border: 2px solid var(--cz-ink); background: color-mix(in srgb, var(--lp-c4) 50%, var(--cz-card));
  font-size: 18px; line-height: 1;
}
.lp-calm .lp-guar li:nth-child(1)::before { content: "\1F4B3"; content: "\1F4B3" / ""; }
.lp-calm .lp-guar li:nth-child(2)::before { content: "\21A9\FE0F"; content: "\21A9\FE0F" / ""; }
.lp-calm .lp-guar li:nth-child(3)::before { content: "\1F515"; content: "\1F515" / ""; }
.lp-calm .lp-guar li:nth-child(4)::before { content: "\1F5D1\FE0F"; content: "\1F5D1\FE0F" / ""; }

/* accordions (compare + FAQ): emoji, text, then the chevron pushed right */
.lp-calm summary { justify-content: flex-start; gap: 14px; }
.lp-calm summary::after {
  margin-left: auto; width: 10px; height: 10px;
  border-right: 2.5px solid var(--lp-t1); border-bottom: 2.5px solid var(--lp-t1);
  transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), margin .25s;
}
.lp-calm .lp-cmp > summary::before, .lp-calm .lp-faq summary::before {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px;
  border: 2px solid var(--cz-ink); background: color-mix(in srgb, var(--lp-c2) 55%, var(--cz-card));
  font-size: 17px; line-height: 1;
}

/* compare table */
.lp-calm .lp-cmp { margin-top: 18px; border-radius: 22px; background: var(--cz-card); }
.lp-calm .lp-cmp > summary { font: 800 17px var(--font-display); padding: 14px 20px; }
.lp-calm .lp-cmp > summary::before { content: "\1F4CA"; content: "\1F4CA" / ""; }
.lp-calm .lp-tw { position: relative; border-top: 2px solid var(--cz-ink); }
.lp-calm .lp-tw th, .lp-calm .lp-tw td { border-bottom: 0; }
.lp-calm .lp-tw thead th {
  background: color-mix(in srgb, var(--lp-c2) var(--cz-mix-card), var(--cz-card));
  border-bottom: 2px solid var(--cz-ink); font: 800 14px var(--font-display);
}
.lp-calm .lp-tw tbody tr:nth-child(even) > * { background: color-mix(in srgb, var(--lp-c1) calc(var(--cz-mix) * .6), var(--cz-card)); }
.lp-calm .lp-tw tr > .r { background: color-mix(in srgb, var(--lp-c6) var(--cz-mix-card), var(--cz-card)); }
.lp-calm .lp-tw tbody tr:nth-child(even) > .r { background: color-mix(in srgb, var(--lp-c6) calc(var(--cz-mix-card) * 1.4), var(--cz-card)); }
.lp-calm .lp-tw th.r { color: var(--lp-t1); }
.lp-calm .lp-tw tbody th { font-size: 14.5px; }
.lp-calm .lp-y {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--lp-good); color: var(--lp-on-good); font: 800 13px/1 var(--font-sans); vertical-align: middle;
}

/* FAQ */
.lp-calm .lp-faq { display: grid; gap: 12px; max-width: 860px; }
.lp-calm .lp-faq details {
  border-radius: 20px; background: var(--cz-card); box-shadow: 3px 3px 0 var(--lp-line);
}
.lp-calm .lp-faq details:hover { translate: 0 -2px; box-shadow: 5px 5px 0 var(--lp-line); }
.lp-calm .lp-faq details[open] {
  background: color-mix(in srgb, var(--lp-c2) var(--cz-mix-card), var(--cz-card)); box-shadow: 5px 5px 0 var(--lp-line);
}
.lp-calm .lp-faq summary { padding: 14px 18px; font: 700 17px/1.3 var(--font-display); }
.lp-calm .lp-faq details[data-q="1"] summary::before { content: "\1F381"; content: "\1F381" / ""; }
.lp-calm .lp-faq details[data-q="2"] summary::before { content: "\1F3F7\FE0F"; content: "\1F3F7\FE0F" / ""; }
.lp-calm .lp-faq details[data-q="3"] summary::before { content: "\1F50E"; content: "\1F50E" / ""; }
.lp-calm .lp-faq details[data-q="4"] summary::before { content: "\1F512"; content: "\1F512" / ""; }
.lp-calm .lp-faq details[data-q="5"] summary::before { content: "\1F6AA"; content: "\1F6AA" / ""; }
.lp-calm .lp-faq details[data-q="6"] summary::before { content: "\23F0"; content: "\23F0" / ""; }
.lp-calm .lp-faq details[open] summary::before { background: var(--lp-yellow); border-color: #1a0b2e; transform: rotate(-6deg); }
.lp-calm .lp-a { padding: 0 22px 20px 68px; max-width: 760px; }

/* contact */
.lp-calm #contactAnchor { background: color-mix(in srgb, var(--lp-c3) var(--cz-mix-card), var(--cz-card)); padding: 26px; }
.lp-calm #aboutIdentity { background: color-mix(in srgb, var(--lp-c4) var(--cz-mix-card), var(--cz-card)); }
.lp-calm #contactAnchor h3 { font: 800 clamp(22px, 2.6vw, 28px)/1.15 var(--font-display); letter-spacing: -.02em; margin: 14px 0 8px; }
.lp-calm #contactAnchor .lp-mailto { font: 800 19px var(--font-display); }
.lp-calm #contactAnchor .lp-mailto::before,
.lp-calm #contactAnchor .lp-mailto + p::before,
.lp-calm #contactAnchor .lp-fine::before {
  display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 10px; vertical-align: middle;
  flex: none; border-radius: 10px; border: 2px solid var(--cz-ink); background: var(--cz-card); font-size: 15px; line-height: 1;
}
.lp-calm #contactAnchor .lp-mailto::before { content: "\2709\FE0F"; content: "\2709\FE0F" / ""; background: var(--lp-yellow); border-color: #1a0b2e; }
.lp-calm #contactAnchor .lp-mailto + p::before { content: "\23F1\FE0F"; content: "\23F1\FE0F" / ""; }
.lp-calm #contactAnchor .lp-fine::before { content: "\1F512"; content: "\1F512" / ""; }
.lp-calm #contactAnchor .lp-mailto + p, .lp-calm #contactAnchor .lp-fine { display: flex; align-items: center; }
.lp-calm #contactAnchor .lp-fine { color: var(--lp-t2) !important; }

/* ---- footer: an ink line, the mark, readable small print ---- */
.sitefoot-inner::before {
  content: ""; width: 30px; height: 30px; border-radius: 9px; margin-bottom: 4px;
  border: 2px solid #1a0b2e; box-shadow: 2px 2px 0 #1a0b2e;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%231a0b2e' d='M25.4 6.2 13.9 12.6l-4.2-1.3a1 1 0 0 0-.9.2l-1.7 1.5a.6.6 0 0 0 .1 1l4.3 2.2 2.2 4.3a.6.6 0 0 0 1 .1l1.5-1.7a1 1 0 0 0 .2-.9l-1.3-4.2 6.4-11.5a.7.7 0 0 0-.9-.9Z'/%3E%3C/svg%3E") center / 20px no-repeat,
    conic-gradient(from 200deg, #ff4f8b, #ff8a3d, #ffd23f, #ff4f8b);
}
.sitefoot p { color: var(--lp-ink2); }
.sitefoot-links a { color: var(--lp-ink2); font-weight: 600; }
.sitefoot-links a:hover { color: var(--lp-ink); }
.sitefoot-fine { color: var(--lp-muted) !important; }

@media (max-width: 1000px) {
  .lp-calm .lp-earn ul { gap: 12px; }
}
@media (max-width: 720px) {
  .lp-calm .lp-earn { padding: 40px 0; }
  .lp-calm .lp-earn li { border: 2px solid var(--cz-ink); padding: 12px 14px 14px; display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; }
  .lp-calm .lp-earn li::before { grid-row: span 2; margin: 0; }
  .lp-calm .lp-plans { gap: 22px; }
  .lp-calm .lp-plans .plan-card.featured { translate: 0 -4px; }
  .lp-calm .lp-a { padding: 0 18px 18px; }
  .lp-calm .lp-faq summary { font-size: 16px; padding: 12px 14px; gap: 12px; }
  .lp-calm #contactAnchor { padding: 22px 18px; }
  .lp-calm > .lp-sec::before { width: 90%; right: -30%; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-calm .lp-box, .lp-calm .lp-plans .plan-card, .lp-calm .lp-faq details, .lp-calm .lp-earn li,
  .js-reveal .lp-calm .lp-box.rv, .lp-calm .cbtn, .lp-calm .lp-plans .btn, .lp-calm summary::after { transition: none; }
  .lp-calm .lp-box:hover, .lp-calm .lp-earn li:hover, .lp-calm .lp-faq details:hover,
  .lp-calm .lp-plans .plan-card:hover, .lp-calm .cbtn:hover, .lp-calm .lp-plans .btn:hover { translate: none; }
  .lp-calm .lp-plans .plan-card.featured, .lp-calm .lp-plans .plan-card.featured:hover { translate: 0 -8px; }
}

/* ---- A renewal that is failing ---- */
.pay-issue {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin: 16px auto 0; max-width: 1100px; padding: 14px 18px; border-radius: 18px;
  border: 2px solid var(--lp-ink, #1a0b2e); box-shadow: 4px 4px 0 var(--lp-ink, #1a0b2e);
  background: #ffe1d6; color: #1a0b2e; font-weight: 650;
}
@media (max-width: 560px) { .pay-issue { margin: 12px 12px 0; } .pay-issue .lbtn { width: 100%; } }

/* ---- Launch mode: plans that are not on sale yet ---- */
/* The sticker sits opposite the "popular" tag, so a featured card can carry both. */
.plan-card .plan-soon {
  position: absolute; top: -14px; right: 14px; z-index: 1;
  background: var(--lp-yellow, #ffd84d); color: #1a0b2e; border: 2px solid #1a0b2e; border-radius: 999px;
  box-shadow: 2px 2px 0 #1a0b2e; padding: 4px 11px; transform: rotate(4deg);
  font: 800 12.5px/1.2 var(--font-display); letter-spacing: .02em; white-space: nowrap;
}
.plan-card .soon-on { opacity: 1; }
.plan-card .soon-on:disabled { cursor: default; }
.plan-card .soon-leave { align-self: center; margin-top: 8px; font-size: 13px; }
.pay-soon {
  position: relative; border: 2.5px solid #1a0b2e; border-radius: 18px; padding: 22px 18px 18px;
  background: color-mix(in srgb, var(--lp-yellow, #ffd84d) 16%, var(--surface)); box-shadow: 4px 4px 0 #1a0b2e;
}
.pay-soon .lp-soonb {
  position: absolute; top: -14px; left: 16px; background: var(--lp-yellow, #ffd84d); color: #1a0b2e;
  border: 2px solid #1a0b2e; border-radius: 999px; box-shadow: 2px 2px 0 #1a0b2e; padding: 4px 11px;
  transform: rotate(-3deg); font: 800 12.5px/1.2 var(--font-display);
}
.pay-soon h3 { margin: 4px 0 6px; font: 800 20px/1.25 var(--font-display); }
.pay-soon-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 14px 0 6px; }
.pay-soon-act .lbtn { flex: 1 1 260px; }
.soon-on-note { font: 800 16px var(--font-display); color: var(--good); }
.pay-soon-privacy { font-size: 12.5px; margin: 10px 0 0; }
.soon-inline { display: block; margin-top: 10px; }
.pay-is-soon .summary-total, .pay-is-soon .summary > p.hint { display: none; }
.soon-profile { margin: 4px 0 14px; }
.soon-profile .linkbtn { margin-left: 6px; }
.sales-paddle { border-radius: var(--radius-sm); padding: 10px 14px; margin: 10px 0 14px; font-weight: 600; }
.sales-paddle.ok { background: var(--good-soft); color: var(--good); }
.sales-paddle.bad { background: var(--warn-soft); color: var(--warn); }
.sales-paddle p { margin: 0 0 6px; }
.sales-paddle ul { margin: 0; padding-left: 20px; font-weight: 500; }
.sales-state { display: inline-block; border-radius: 999px; padding: 2px 10px; font-weight: 700; font-size: 13px; border: 1.5px solid currentColor; }
.sales-state.on { color: var(--good); }
.sales-state.soon { color: var(--warn); }
.sales-why { color: var(--muted); }
@media (max-width: 560px) { .pay-soon-act .lbtn { width: 100%; } }

/* ---- Who makes this ---- */
.lp-founder {
  display: flex; gap: 22px; align-items: flex-start; max-width: 860px;
  padding: 24px 26px; border-radius: 22px; background: var(--surface);
  border: 2px solid var(--lp-ink, #1a0b2e); box-shadow: 4px 4px 0 var(--lp-ink, #1a0b2e);
}
.lp-founder-mark {
  flex: none; width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center; font: 800 32px var(--font-display); color: #1a0b2e;
  background: linear-gradient(135deg, var(--lp-pink, #ff4f8b), var(--lp-orange, #ff8a3d));
  border: 2px solid var(--lp-ink, #1a0b2e);
}
.lp-founder-body p { margin: 0 0 12px; line-height: 1.6; }
.lp-founder-body .lbtn { margin-top: 6px; }
@media (max-width: 560px) { .lp-founder { flex-direction: column; padding: 20px; } }

/* Unconfirmed email: a banner that stays until the address is confirmed. */
.verify-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 12px auto 4px; max-width: 1100px; padding: 12px 16px;
  background: var(--warn-soft); color: var(--warn);
  border: 1px solid currentColor; border-radius: 12px;
}
.verify-banner.hidden { display: none; }
.verify-banner-icon { font-size: 22px; line-height: 1; }
.verify-banner-text { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; }
.verify-banner-text b { color: inherit; }
.verify-banner-text span { color: var(--text, inherit); opacity: .85; font-size: 14px; }
@media (max-width: 600px) {
  .verify-banner { margin: 8px 12px; }
  .verify-banner .btn { width: 100%; }
}