/* === FLIGHTRISK brand theme ===
   Installed as a NEW theme layer alongside design-tokens.css/style.css, per
   design_handoff_flightrisk_brand/README.md's own instruction ("install these
   tokens as a new theme rather than overwriting existing ones"). Loaded on every
   page, but every rule below is scoped to markup that only exists on the public
   header and the landing page — nothing here touches a bare tag (h1, .btn, ...)
   or the admin-only .nav/.deal/.deal-* classes, so /review, /dashboard and the
   smaller public-wrap prose pages (about/privacy/terms/contact) render exactly
   as they did before this file existed. */

/* ── Self-hosted fonts ────────────────────────────────────────────────────────
   Self-hosted rather than a live Google Fonts request: app.py's CSP has no
   font-src/connect-src directive (both fall back to default-src 'self'), so a
   cross-origin font request would be blocked outright, and design-tokens.css
   already documents the same CDN-availability concern for the system font
   stack. latin + latin-ext subsets only — this is an English-language AU site,
   the other Google-served subsets (cyrillic, greek, vietnamese, ...) are dead
   weight. Unicode ranges are Google's own standard latin/latin-ext values. */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/space-grotesk-400-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: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/space-grotesk-400-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: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/space-grotesk-500-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: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/space-grotesk-500-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: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/space-grotesk-600-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: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/space-grotesk-600-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: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-700-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: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-700-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: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/manrope-400-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: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/manrope-400-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: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/manrope-500-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: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/manrope-500-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: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/manrope-600-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: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/manrope-600-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: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/manrope-700-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: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/manrope-700-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: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/manrope-800-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: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/manrope-800-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;
}

/* ── Brand tokens ─────────────────────────────────────────────────────────────
   Ported verbatim from design_handoff_flightrisk_brand/tokens.css. */

:root {
  --fr-navy: #1A2B5F;
  --fr-navy-ink: #0E2340;
  --fr-sky: #3FA9F5;
  --fr-orange: #FF6B35;
  --fr-teal: #00C2A0;
  --fr-cream: #FDF7EC;
  --fr-white: #FFFFFF;

  --fr-text: var(--fr-navy);
  --fr-text-muted: rgba(26, 43, 95, 0.6);
  --fr-text-subtle: rgba(26, 43, 95, 0.45);
  --fr-border: rgba(26, 43, 95, 0.12);
  --fr-border-soft: rgba(26, 43, 95, 0.08);

  --fr-on-navy: var(--fr-cream);
  --fr-on-navy-muted: rgba(253, 247, 236, 0.72);
  --fr-on-navy-subtle: rgba(253, 247, 236, 0.55);
  --fr-on-navy-border: rgba(253, 247, 236, 0.14);

  --fr-chip-sky: rgba(63, 169, 245, 0.16);
  --fr-chip-teal: rgba(0, 194, 160, 0.18);
  --fr-chip-orange: rgba(255, 107, 53, 0.16);

  --fr-font-display: "Space Grotesk", system-ui, sans-serif;
  --fr-font-text: "Manrope", system-ui, sans-serif;
  --fr-track-display: -0.03em;
  --fr-track-display-sm: -0.01em;
  --fr-track-eyebrow: 0.2em;

  --fr-space-1: 4px;
  --fr-space-2: 8px;
  --fr-space-3: 12px;
  --fr-space-4: 16px;
  --fr-space-5: 24px;
  --fr-space-6: 32px;
  --fr-space-7: 40px;
  --fr-space-8: 56px;

  --fr-radius-chip: 3px;
  --fr-radius-sm: 4px;
  --fr-radius-md: 5px;
  --fr-radius-card: 6px;
  --fr-radius-window: 10px;
  --fr-radius-app-card: 14px;
  --fr-radius-phone: 44px;

  --fr-shadow-card: 0 24px 48px -26px rgba(26, 43, 95, 0.30);
  --fr-shadow-hero: 0 30px 60px -28px rgba(26, 43, 95, 0.45);
  --fr-shadow-float: 0 34px 60px -30px rgba(26, 43, 95, 0.55);
  --fr-shadow-print: 0 18px 34px -22px rgba(26, 43, 95, 0.35);

  --fr-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fr-dur-fast: 150ms;
  --fr-dur: 200ms;
  --fr-dur-slow: 250ms;
}

/* ── Site header ──────────────────────────────────────────────────────────────
   The one public header, on every public page (there is no per-page hook in
   base.html to make this landing-only, and a single shared "site header" is
   what was actually asked for). Fixed light-brand palette always — no dark
   variant exists in the handoff, so the theme toggle is dropped here entirely
   (it is untouched in the separate, admin-only .nav branch). */

.fr-header {
  background: var(--fr-navy);
  position: sticky;
  top: 0;
  z-index: 10;
}
.fr-header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 20px var(--fr-space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fr-space-4);
  position: relative;
}
.fr-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: none;
}
.fr-logo { display: block; flex: none; }
.fr-wordmark {
  font-family: var(--fr-font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: var(--fr-track-display-sm);
  color: var(--fr-cream);
}
.fr-wordmark-accent { color: var(--fr-sky); }

.fr-nav-links {
  display: flex;
  align-items: center;
  gap: var(--fr-space-5);
  font-family: var(--fr-font-text);
  font-size: 13px;
  font-weight: 600;
}
.fr-nav-links a {
  color: var(--fr-on-navy-muted);
  text-decoration: none;
}
.fr-nav-links a:hover { color: var(--fr-cream); }
.fr-nav-links a.fr-cta {
  background: var(--fr-orange);
  color: var(--fr-cream);
  padding: 9px 18px;
  border-radius: var(--fr-radius-sm);
  font-weight: 700;
}
.fr-nav-links a.fr-cta:hover { background: #e85f2d; } /* orange, ~8% darker */
.fr-nav-links a:focus-visible,
.fr-hamburger:focus-visible {
  outline: 2px solid var(--fr-sky);
  outline-offset: 2px;
}

.fr-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.fr-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--fr-cream);
  border-radius: 1px;
}

@media (max-width: 767px) {
  .fr-hamburger { display: flex; }
  .fr-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--fr-navy);
    border-top: 1px solid var(--fr-on-navy-border);
    padding: var(--fr-space-2) 0;
  }
  .fr-nav-links.fr-nav-open { display: flex; }
  .fr-nav-links a { padding: 14px var(--fr-space-5); }
  .fr-nav-links a.fr-cta { margin: var(--fr-space-2) var(--fr-space-5) 0; text-align: center; }
}

/* ── Hero ─────────────────────────────────────────────────────────────────────
   Restyles the EXISTING .hero/.hero-copy/.hero-display/.hero-sub/.signup-inline/
   .origin-row/.hero-note/.proof* selectors from style.css — landing.html's own
   functional structure (real double opt-in form, real origin checkboxes) is
   kept as-is; only its visual language changes. These class names are used
   nowhere except templates/public/landing.html, confirmed, so this is safe to
   do globally without a landing-only scope. */

.hero { background: var(--fr-cream); }
.hero-display, .hero-title {
  font-family: var(--fr-font-display);
}
.hero .hero-display {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: var(--fr-track-display);
  line-height: 1.05;
  color: var(--fr-navy);
}
.hero .hero-sub { font-family: var(--fr-font-text); color: var(--fr-text-muted); }
.hero .hero-note { font-family: var(--fr-font-text); color: var(--fr-text-subtle); }

.hero .signup-inline input[type="email"] {
  background: var(--fr-white);
  border: 1px solid var(--fr-border);
  border-radius: var(--fr-radius-md);
  padding: 14px 16px;
  font-family: var(--fr-font-text);
  font-size: 13px;
  font-weight: 600;
  color: var(--fr-text);
}
.hero .signup-inline .btn.btn-primary {
  background: var(--fr-navy);
  color: var(--fr-cream);
  border-color: var(--fr-navy);
  border-radius: var(--fr-radius-md);
  padding: 14px 24px;
  font-family: var(--fr-font-text);
  font-size: 13px;
  font-weight: 700;
}
.hero .signup-inline .btn.btn-primary:hover { background: var(--fr-navy-ink); }
.hero .origin-row label { font-family: var(--fr-font-text); color: var(--fr-text); }

.hero .proof {
  background: var(--fr-white);
  border-color: var(--fr-border-soft);
  border-radius: var(--fr-radius-card);
  box-shadow: var(--fr-shadow-card);
}
.hero .proof-head { background: var(--fr-cream); border-color: var(--fr-border-soft); }
.hero .proof-label { font-family: var(--fr-font-text); color: var(--fr-text-muted); }
.hero .proof-route { font-family: var(--fr-font-display); color: var(--fr-text); }
.hero .proof-price { font-family: var(--fr-font-display); color: var(--fr-orange); }
.hero .proof-ccy { font-family: var(--fr-font-text); color: var(--fr-text-muted); }
.hero .proof-was { font-family: var(--fr-font-text); color: var(--fr-text-subtle); }
.hero .proof-verdict { font-family: var(--fr-font-text); color: var(--fr-text-muted); }
.hero .proof .badge-success {
  background: var(--fr-chip-orange);
  color: var(--fr-navy);
  border-radius: var(--fr-radius-chip);
}

/* Decorative discount chips under the signup form — sourced from real feed
   data (see blueprints/public.py::_deal_feed()), not hardcoded placeholder
   text, so the page keeps one honesty policy throughout. */
.fr-chip-row { display: flex; flex-wrap: wrap; gap: var(--fr-space-2); margin-top: var(--fr-space-2); }
.fr-chip {
  font-family: var(--fr-font-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: var(--fr-radius-chip);
  color: var(--fr-navy);
}
.fr-chip-sky { background: var(--fr-chip-sky); }
.fr-chip-teal { background: var(--fr-chip-teal); }
.fr-chip-orange { background: var(--fr-chip-orange); }

@media (prefers-reduced-motion: no-preference) {
  .fr-nav-links a.fr-cta,
  .fr-deal-card {
    transition: background var(--fr-dur-fast) var(--fr-ease),
                box-shadow var(--fr-dur) var(--fr-ease),
                transform var(--fr-dur) var(--fr-ease);
  }
  .fr-deal-card:hover { transform: translateY(-2px); }
}

/* ── Deal feed ────────────────────────────────────────────────────────────────
   New section. Namespaced .fr-deal-* throughout — style.css already defines
   .deal/.deal-score/.deal-route/.deal-meta/.deal-price/.deal-was for the ADMIN
   review queue (/review), so reusing that name (or a partial rename of it)
   would leak new styling in there. Compact cards, no per-card price-history
   chart — that level of detail already lives on /review/<id> for admin. */

.fr-deal-feed {
  padding: var(--fr-space-7) 0;
}
.fr-deal-feed-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fr-space-4);
  margin-bottom: var(--fr-space-5);
}
.fr-deal-feed-title {
  font-family: var(--fr-font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: var(--fr-track-display-sm);
  color: var(--fr-navy);
  margin: 0;
}
.fr-deal-feed-note {
  font-family: var(--fr-font-text);
  font-size: 12px;
  color: var(--fr-text-subtle);
}
.fr-deal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--fr-space-4);
}
.fr-deal-card {
  background: var(--fr-white);
  border: 1px solid var(--fr-border-soft);
  border-radius: var(--fr-radius-app-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
}
.fr-deal-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fr-space-3);
}
.fr-deal-city {
  font-family: var(--fr-font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fr-navy);
}
.fr-deal-meta {
  font-family: var(--fr-font-text);
  font-size: 12px;
  font-weight: 600;
  color: var(--fr-text-muted);
  margin-top: 4px;
}
.fr-deal-badge {
  font-family: var(--fr-font-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 6px 9px;
  border-radius: var(--fr-radius-chip);
  white-space: nowrap;
  flex: none;
}
/* >=60% off: orange fill + cream text. Below that: teal fill + navy-ink text.
   Matches the handoff's own threshold exactly. */
.fr-deal-badge-high { background: var(--fr-orange); color: var(--fr-cream); }
.fr-deal-badge-low { background: var(--fr-teal); color: var(--fr-navy-ink); }
.fr-deal-example-tag {
  font-family: var(--fr-font-text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fr-text-subtle);
}
.fr-route-bar {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--fr-sky) 0%, var(--fr-teal) 100%);
}
.fr-route-bar-reverse { background: linear-gradient(90deg, var(--fr-teal) 0%, var(--fr-sky) 100%); }
.fr-deal-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.fr-deal-price {
  font-family: var(--fr-font-display);
  font-size: 27px;
  font-weight: 700;
  color: var(--fr-navy);
}
.fr-deal-was {
  font-family: var(--fr-font-text);
  font-size: 12px;
  font-weight: 600;
  color: var(--fr-text-subtle);
  text-decoration: line-through;
}

@media (max-width: 767px) {
  .fr-deal-grid { grid-template-columns: 1fr; }
}

/* ── Great / exceptional threshold flag ─────────────────────────────────────
   Shared by the review queue, the review detail page and the public /deals page.
   Exceptional = orange fill, great = teal fill — the same pairing (and text colours)
   as .fr-deal-badge-high / -low above. */
.tier-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--fr-radius-chip);
  font-family: var(--fr-font-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}
.tier-badge-exceptional { background: var(--fr-orange); color: var(--fr-cream); }
.tier-badge-great { background: var(--fr-teal); color: var(--fr-navy-ink); }

/* Left rule on a review-queue row, so tiered deals stand out while scanning. */
.deal-tier-exceptional { box-shadow: inset 4px 0 0 var(--fr-orange); }
.deal-tier-great { box-shadow: inset 4px 0 0 var(--fr-teal); }

/* /deals page (.fr-deals-page): the card is a <div> here (its own CTA is the link), and
   a tiered card carries one extra row naming the threshold that was crossed.
   Scoped under .fr-deals-page so the landing feed's cards, which share the .fr-deal-*
   classes, are untouched. */
.fr-deal-tier-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fr-deals-page .fr-deal-price-row { flex-wrap: wrap; gap: 4px 12px; }
/* Orange and teal mean "great/exceptional" on this page and nowhere else, so the
   percentage-off badge is the neutral sky chip rather than the landing's
   orange-above-60% / teal-below rule. */
.fr-deals-page .fr-deal-badge { background: var(--fr-chip-sky); color: var(--fr-navy); }
/* Travel-style chips (config/travel_styles.yaml) — sky for the same reason as the
   badge above, and smaller than the landing's chips: a card can carry two. */
.fr-deals-page .fr-style-chips { margin-top: 0; }
.fr-deals-page .fr-style-chips .fr-chip { font-size: 10px; padding: 4px 8px; letter-spacing: 0.04em; }
/* The landing's primary button is navy (see .hero .signup-inline .btn.btn-primary);
   the admin-blue .btn-primary would be the one off-brand element on the page. */
.fr-deals-page .btn.btn-primary {
  background: var(--fr-navy);
  border-color: var(--fr-navy);
  color: var(--fr-cream);
  border-radius: var(--fr-radius-md);
  font-family: var(--fr-font-text);
  font-weight: 700;
  text-align: center;
}
.fr-deals-page .btn.btn-primary:hover { background: var(--fr-navy-ink); }