/* FlightScope v3.8.0 — minimal light neumorphism.
   One surface color everywhere; depth comes from paired light/dark soft shadows.
   Raised = interactive/resting, inset = pressed/active/input. Teal is the only accent.
   Selectors and layout metrics match v3.7.x exactly — this is chrome only. */
:root {
  --ink: #2f3b52;
  --muted: #76829a;
  --line: #d3dae8;
  --surface: #e4e9f2;
  --bg: #e4e9f2;
  --well: #dde3ee;
  /* Accent (v3.8.1: orange — variable names kept from the teal era to avoid churn) */
  --teal: #e97312;
  --teal-dark: #b1560c;
  --teal-soft: rgba(233, 115, 18, .14);
  --navy: #35415c;
  --amber: #f5a524;
  --sh-dark: #c2cadb;
  --sh-light: #ffffff;
  --out-sm: 4px 4px 9px var(--sh-dark), -4px -4px 9px var(--sh-light);
  --out: 8px 8px 18px var(--sh-dark), -8px -8px 18px var(--sh-light);
  --out-lg: 14px 14px 30px #bcc5d7, -14px -14px 30px var(--sh-light);
  --in-sm: inset 2px 2px 5px var(--sh-dark), inset -2px -2px 5px var(--sh-light);
  --in: inset 4px 4px 9px var(--sh-dark), inset -4px -4px 9px var(--sh-light);
  --shadow: var(--out-lg);
}
* { box-sizing: border-box; }
body { margin: 0; padding-top: 36px; background: var(--bg); color: var(--ink); font-family: Inter, system-ui, sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.promo-strip { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; height: 36px; background: var(--bg); box-shadow: 0 4px 12px rgba(178, 188, 208, .55); color: var(--teal-dark); text-align: center; font: 800 11px/36px Inter, sans-serif; letter-spacing: .14em; }
.app-shell { min-height: 100vh; background: var(--bg); }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(28px, calc((100vw - 1180px)/2)); background: rgba(228, 233, 242, .9); backdrop-filter: blur(12px); position: sticky; top: 36px; z-index: 20; box-shadow: 0 6px 16px rgba(178, 188, 208, .35); }
.brand { display: flex; align-items: center; gap: 10px; font-family: Manrope, sans-serif; font-size: 20px; font-weight: 800; color: var(--ink); text-decoration: none; }
.brand-mark { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--bg); color: var(--teal); box-shadow: var(--out-sm); }
.topnav { display: flex; align-items: center; gap: 8px; }
.nav-link { border: 0; background: transparent; color: var(--muted); font-weight: 600; padding: 10px 14px; border-radius: 999px; }
.nav-link.active { color: var(--teal-dark); box-shadow: var(--in-sm); }
.count-pill { background: var(--bg); color: var(--teal-dark); border-radius: 999px; font-size: 11px; padding: 2px 8px; margin-left: 3px; box-shadow: var(--in-sm); }
.avatar { border: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--bg); color: var(--ink); font-size: 12px; font-weight: 700; margin-left: 8px; box-shadow: var(--out-sm); }
main { max-width: 1180px; margin: 0 auto; padding: 58px 28px 90px; }
.hero { display: flex; justify-content: space-between; gap: 40px; align-items: flex-end; margin-bottom: 34px; }
.eyebrow, .section-label { margin: 0 0 8px; color: var(--teal-dark); font-weight: 800; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; }
h1, h2, h3 { font-family: Manrope, sans-serif; margin-top: 0; }
h1 { max-width: 720px; font-size: clamp(38px, 5vw, 62px); line-height: 1.03; letter-spacing: -.045em; margin-bottom: 18px; }
h1 span { color: var(--teal); }
.hero-copy { max-width: 760px; color: var(--muted); font-size: 17px; line-height: 1.65; margin: 0; }
.hero-stat { min-width: 245px; display: flex; gap: 12px; align-items: center; padding: 15px 18px; background: var(--bg); border-radius: 16px; box-shadow: var(--out-sm); }
.hero-stat strong, .hero-stat small { display: block; }
.hero-stat strong { font-size: 13px; }
.hero-stat small { color: var(--muted); margin-top: 3px; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 6px rgba(233, 115, 18, .16); }
.search-card { background: var(--bg); box-shadow: var(--out-lg); border-radius: 28px; padding: 30px; }
.search-card-header, .filter-header, .results-header, .form-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.search-card h2 { margin-bottom: 0; font-size: 24px; }
.mode-switch { display: flex; background: var(--bg); padding: 5px; border-radius: 999px; box-shadow: var(--in); }
.mode-switch button { border: 0; background: transparent; padding: 9px 16px; border-radius: 999px; color: var(--muted); font-size: 13px; font-weight: 700; }
.mode-switch button.active { background: var(--bg); color: var(--teal-dark); box-shadow: var(--out-sm); }
.grid { display: grid; gap: 18px; }
.grid-main { grid-template-columns: 1.5fr 1fr 1fr; margin-top: 28px; }
.grid-filters { grid-template-columns: repeat(4, 1fr); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > span { color: #4a5670; font-weight: 700; font-size: 12px; }
.field-wide { grid-column: span 2; }
input, select { width: 100%; border: 0; background: var(--bg); color: var(--ink); border-radius: 14px; min-height: 46px; padding: 0 15px; outline: none; box-shadow: var(--in); }
input:focus, select:focus { box-shadow: var(--in), 0 0 0 3px rgba(233, 115, 18, .2); }
.input-wrap { position: relative; }
.input-wrap > span { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); z-index: 1; }
.input-wrap input { padding-left: 38px; text-transform: uppercase; }
.airport-picker { display: flex; gap: 12px; }
.airport-chip { flex: 1; position: relative; text-align: left; border: 0; background: var(--bg); min-height: 62px; padding: 10px 42px 10px 15px; border-radius: 16px; box-shadow: var(--out-sm); transition: box-shadow .15s, color .15s; }
.airport-chip strong, .airport-chip small { display: block; }
.airport-chip strong { font-size: 16px; }
.airport-chip small { color: var(--muted); margin-top: 3px; }
.airport-chip i { display: none; position: absolute; right: 14px; top: 20px; width: 22px; height: 22px; border-radius: 50%; background: var(--teal); color: #fff; font-style: normal; text-align: center; line-height: 22px; }
.airport-chip.selected { box-shadow: var(--in); color: var(--teal-dark); }
.airport-chip.selected strong { color: var(--teal-dark); }
.airport-chip.selected i { display: block; }
.divider { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--sh-dark), var(--sh-light)); opacity: .55; margin: 30px 0; }
.filter-header { margin-bottom: 18px; }
.filter-header h3 { font-size: 18px; margin-bottom: 0; }
.text-button { border: 0; background: transparent; color: var(--teal-dark); font-size: 12px; font-weight: 700; }
.preference-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.toggle-label { border: 0; background: var(--bg); box-shadow: var(--out-sm); border-radius: 14px; padding: 14px; display: flex; gap: 11px; align-items: center; cursor: pointer; }
.toggle-label input { display: none; }
.toggle { width: 40px; height: 23px; background: var(--bg); box-shadow: var(--in-sm); border-radius: 999px; position: relative; flex: none; transition: .2s; }
.toggle:after { content: ''; position: absolute; width: 15px; height: 15px; border-radius: 50%; background: var(--bg); top: 4px; left: 4px; transition: .2s; box-shadow: 2px 2px 5px var(--sh-dark), -1px -1px 3px var(--sh-light); }
.toggle-label input:checked + .toggle { background: var(--teal); box-shadow: inset 2px 2px 5px rgba(122, 60, 4, .5); }
.toggle-label input:checked + .toggle:after { transform: translateX(17px); background: #fff; }
.toggle-label strong, .toggle-label small { display: block; }
.toggle-label strong { font-size: 12px; }
.toggle-label small { color: var(--muted); font-size: 10px; line-height: 1.35; margin-top: 3px; }
.form-footer { margin-top: 28px; }
#providerStatus { margin: 0; color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 8px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.primary-button { border: 0; background: linear-gradient(135deg, #f08118, #d2690b); color: #fff; min-height: 50px; padding: 0 8px 0 20px; border-radius: 16px; display: inline-flex; align-items: center; gap: 17px; font-weight: 800; box-shadow: 6px 6px 14px rgba(196, 103, 10, .38), -5px -5px 12px var(--sh-light); transition: box-shadow .15s, transform .12s; }
.primary-button:hover { transform: translateY(-1px); }
.primary-button:active { transform: translateY(0); box-shadow: inset 3px 3px 8px rgba(122, 60, 4, .45); }
.primary-button b { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .18); font-size: 20px; }
.results-section { margin-top: 42px; }
.hidden { display: none !important; }
.results-header { align-items: flex-end; margin-bottom: 18px; }
.results-header h2 { margin-bottom: 7px; font-size: 28px; }
.results-header p { color: var(--muted); margin: 0; font-size: 13px; }
.sort-control { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 700; }
.sort-control select { width: 160px; }
.results-list { display: grid; gap: 18px; }
/* NO overflow:hidden here — the airport tooltip rises above the card and was
   being sliced in half by it (Denis, Jul 26). The footer strip carries its own
   bottom radius instead, and the card lifts its stacking order on hover so the
   tooltip paints over the neighbouring cards. */
.flight-card { position: relative; background: var(--bg); border-radius: 22px; box-shadow: var(--out); transition: transform .18s, box-shadow .18s; }
.flight-card:hover { transform: translateY(-2px); box-shadow: var(--out-lg); }
.flight-card:hover, .flight-card:focus-within { z-index: 4; }
.flight-main { display: grid; grid-template-columns: 115px 1fr 155px; gap: 20px; align-items: center; padding: 22px; }
.airline-block { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.airline-logo { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--bg); color: var(--teal-dark); font-weight: 800; box-shadow: var(--out-sm); }
.airline-block strong { font-size: 12px; }
.airline-block small { color: var(--muted); font-size: 10px; }
.route-block { min-width: 0; }
.route-times { display: grid; grid-template-columns: 95px 1fr 95px; gap: 12px; align-items: center; }
.time strong, .time small { display: block; }
.time strong { font-size: 22px; }
.time small { color: var(--muted); font-size: 11px; margin-top: 3px; }
.time.arrive { text-align: right; }
.route-line { text-align: center; }
.route-line small { color: var(--muted); font-size: 10px; }
.line { height: 2px; border-radius: 2px; background: var(--well); box-shadow: var(--in-sm); position: relative; margin: 7px 0; }
.line:before, .line:after { content: ''; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--bg); border: 2px solid var(--teal); }
.line:before { left: 0; }.line:after { right: 0; }
.stop-dot { position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.flight-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.tag { border-radius: 999px; background: var(--bg); box-shadow: var(--in-sm); color: #5b6880; padding: 5px 10px; font-size: 10px; font-weight: 700; }
.tag.good { color: var(--teal-dark); background: var(--teal-soft); box-shadow: none; }
.price-block { text-align: right; border-left: 2px solid var(--well); padding-left: 20px; }
.match-score { color: var(--teal-dark); font-size: 11px; font-weight: 800; margin-bottom: 8px; }
.price { font-family: Manrope, sans-serif; font-size: 25px; font-weight: 800; }
.price-block small { color: var(--muted); display: block; margin-top: 2px; }
.card-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.secondary-button, .save-button { min-height: 36px; border-radius: 999px; padding: 0 14px; font-size: 11px; font-weight: 800; }
.secondary-button { background: var(--bg); color: var(--teal-dark); border: 0; box-shadow: var(--out-sm); }
.secondary-button:active { box-shadow: var(--in-sm); }
.save-button { background: var(--bg); color: var(--ink); border: 0; box-shadow: var(--out-sm); }
.save-button:active { box-shadow: var(--in-sm); }
.save-button.saved { color: var(--teal-dark); box-shadow: var(--in-sm); }
.card-detail { padding: 12px 22px; display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; background: var(--well); box-shadow: var(--in-sm); border-radius: 0 0 22px 22px; }
.empty-state { text-align: center; padding: 55px 20px; background: var(--bg); border-radius: 22px; box-shadow: var(--out); }
.empty-state > div { font-size: 38px; color: var(--teal); }
.empty-state h3 { margin: 12px 0 6px; }
.empty-state p { color: var(--muted); margin: 0; }
/* Floating dialogs sit ABOVE the surface, so they get a normal soft dark drop
   shadow — the neumorphic white "light side" reads as glare here (Denis, Jul 26). */
dialog { border: 0; border-radius: 28px; padding: 0; background: var(--bg); box-shadow: 0 30px 80px rgba(28, 37, 56, .5); color: var(--ink); }
dialog::backdrop { background: rgba(30, 39, 58, .55); backdrop-filter: blur(5px); }
.seat-dialog { width: min(860px, calc(100vw - 28px)); }
.saved-dialog { width: min(680px, calc(100vw - 28px)); padding: 28px; }
.dialog-close { position: absolute; right: 16px; top: 13px; border: 0; background: var(--bg); box-shadow: var(--out-sm); width: 34px; height: 34px; border-radius: 50%; font-size: 21px; z-index: 2; color: var(--ink); }
.dialog-close:active { box-shadow: var(--in-sm); }
.seat-hero { min-height: 240px; padding: 35px; color: var(--ink); display: flex; align-items: flex-end; background: linear-gradient(150deg, #f0e4d5, var(--bg) 62%); border-radius: 28px 28px 0 0; }
.seat-hero h2 { margin: 4px 0 7px; font-size: 32px; }
.seat-hero p { margin: 0; color: var(--muted); }
.seat-content { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 30px; }
.seat-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.spec { background: var(--bg); box-shadow: var(--in-sm); padding: 13px; border-radius: 13px; }
.spec strong, .spec small { display: block; }
.spec small { color: var(--muted); margin-top: 3px; }
.cabin-visual { background: var(--well); box-shadow: var(--in); border-radius: 90px 90px 20px 20px; padding: 34px 24px 24px; display: grid; grid-template-columns: 1fr 22px 1fr; gap: 10px; }
.seat { height: 38px; background: var(--teal); border-radius: 8px 8px 13px 13px; box-shadow: inset 0 -7px rgba(0, 0, 0, .09); }
.aisle { grid-row: span 4; }
/* Generated per-flight cabin layout diagram */
.cabin-visual2 { background: var(--well); box-shadow: var(--in); border-radius: 60px 60px 18px 18px; padding: 28px 22px 14px; display: flex; flex-direction: column; gap: 8px; }
.cabin-visual2 .seat-row { display: flex; justify-content: center; align-items: center; gap: 6px; }
.cabin-visual2 .seat-row.roomy { margin-bottom: 5px; }
.cabin-visual2 .aisle-gap { width: 22px; flex: none; }
.seat-unit { display: block; width: 26px; height: 22px; background: var(--teal); border-radius: 6px 6px 9px 9px; box-shadow: inset 0 -4px rgba(0, 0, 0, .12); }
.seat-unit.premium { width: 42px; height: 30px; background: var(--navy); border-radius: 9px 9px 13px 13px; box-shadow: inset 0 -5px rgba(255, 255, 255, .14); }
.cabin-config-note { display: block; text-align: center; color: var(--muted); margin-top: 8px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.saved-item { display: grid; grid-template-columns: 1fr auto; gap: 15px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }
.saved-item p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.saved-item button { border: 0; background: var(--bg); box-shadow: var(--out-sm); border-radius: 10px; padding: 8px 10px; color: var(--ink); }
.saved-item button:active { box-shadow: var(--in-sm); }
@media (max-width: 880px) {
  .hero { align-items: flex-start; flex-direction: column; }
  .grid-main { grid-template-columns: 1fr 1fr; }
  .field-wide { grid-column: span 2; }
  .grid-filters, .preference-row { grid-template-columns: 1fr 1fr; }
  .flight-main { grid-template-columns: 80px 1fr; }
  .price-block { grid-column: span 2; border-left: 0; border-top: 2px solid var(--well); padding: 15px 0 0; text-align: left; display: flex; align-items: center; justify-content: space-between; }
}
@media (max-width: 620px) {
  .topbar { padding: 0 16px; }
  .nav-link:first-child { display: none; }
  main { padding: 36px 16px 60px; }
  .hero-stat { width: 100%; }
  .search-card { padding: 20px; border-radius: 22px; }
  .search-card-header, .filter-header, .results-header, .form-footer { align-items: flex-start; flex-direction: column; }
  .grid-main, .grid-filters, .preference-row { grid-template-columns: 1fr; }
  .field-wide { grid-column: span 1; }
  .airport-picker { flex-direction: column; }
  .primary-button { width: 100%; justify-content: space-between; }
  .flight-main { grid-template-columns: 1fr; }
  .airline-block { flex-direction: row; align-items: center; }
  .price-block { grid-column: span 1; }
  .route-times { grid-template-columns: 75px 1fr 75px; }
  .time strong { font-size: 17px; }
  .card-detail { flex-direction: column; gap: 5px; }
  .seat-content { grid-template-columns: 1fr; }
}
.escape-panel{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 22px;margin-bottom:24px;border:0;border-radius:20px;background:var(--bg);box-shadow:var(--out)}.escape-panel h3{margin:2px 0 4px;font-size:22px}.escape-panel p{margin:0;color:var(--muted);font-size:13px}.escape-panel .primary-button{min-width:240px}@media(max-width:700px){.escape-panel{align-items:stretch;flex-direction:column}.escape-panel .primary-button{width:100%;min-width:0}}

/* Destination discovery moods */
.mood-block { margin: 2px 0 4px; }
.mood-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.mood-chip { border: 0; background: var(--bg); box-shadow: var(--out-sm); color: #4a5670; border-radius: 999px; padding: 9px 17px; font-size: 13px; font-weight: 700; transition: box-shadow .15s, color .15s; }
.mood-chip:hover { color: var(--teal-dark); }
.mood-chip.active { box-shadow: var(--in); color: var(--teal-dark); }

/* Cabin preview confidence badges */
.confidence-badge { display: inline-block; margin-left: 8px; border-radius: 999px; padding: 3px 10px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; box-shadow: var(--in-sm); }
.confidence-badge.exact { background: #d7eee2; color: #0b6a48; }
.confidence-badge.close { background: #dbe7f5; color: #1d5e9e; }
.confidence-badge.rep { background: #f2e7cd; color: #8a5f07; }

/* Airport location hover cards */
.airport-hover { position: relative; display: inline-flex; align-items: center; cursor: help; font-weight: 700; color: var(--teal-dark); }
/* Centring uses margin-left, NOT translateX, so `transform` stays free for the
   reveal animation and the flip-below / edge-anchor variants can compose. */
.airport-tooltip { position: absolute; z-index: 50; left: 50%; margin-left: -127px; bottom: calc(100% + 10px); width: 255px; transform: translateY(4px); padding: 12px 14px; border-radius: 14px; background: #3a465f; color: #fff; box-shadow: 10px 12px 30px rgba(84, 96, 122, .45); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s ease, transform .16s ease, visibility .16s ease; text-align: left; white-space: normal; }
.airport-tooltip::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -7px; border: 7px solid transparent; border-top-color: #3a465f; }
.airport-tooltip strong, .airport-tooltip small { display: block; }
.airport-tooltip strong { font-size: 12px; line-height: 1.35; color: #fff; }
.airport-tooltip small { margin-top: 4px; color: rgba(255,255,255,.75) !important; font-size: 11px; line-height: 1.35; }
.airport-hover:hover .airport-tooltip, .airport-hover:focus .airport-tooltip, .airport-hover:focus-within .airport-tooltip { opacity: 1; visibility: visible; transform: translateY(0); }
/* Placement classes set live by placeAirportTip() in app.js. */
.airport-hover.tip-below .airport-tooltip { bottom: auto; top: calc(100% + 10px); transform: translateY(-4px); }
.airport-hover.tip-below .airport-tooltip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #3a465f; }
.airport-hover.tip-right .airport-tooltip { left: auto; right: -10px; margin-left: 0; }
.airport-hover.tip-right .airport-tooltip::after { left: auto; right: 12px; margin-left: 0; }
.airport-hover.tip-left .airport-tooltip { left: -10px; margin-left: 0; }
.airport-hover.tip-left .airport-tooltip::after { left: 22px; margin-left: 0; }
.airport-chip::after { content: attr(title); position: absolute; left: 8px; right: 8px; bottom: calc(100% + 9px); z-index: 40; padding: 9px 10px; border-radius: 10px; background: #3a465f; color: #fff; font: 600 11px/1.35 Inter, sans-serif; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4px); transition: .15s ease; }
.airport-chip:hover::after, .airport-chip:focus::after { opacity: 1; visibility: visible; transform: translateY(0); }

/* Actual seat and cabin photos */
.seat-photo-section { padding: 0 30px 30px; }
.photo-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 14px; }
.photo-heading h3 { margin: 4px 0 0; }
.photo-heading > span { max-width: 310px; color: var(--muted); font-size: 11px; text-align: right; }
.seat-photo-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; min-height: 150px; }
.seat-photo { display: block; overflow: hidden; border: 0; border-radius: 16px; background: var(--bg); box-shadow: var(--out-sm); color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.seat-photo:hover { transform: translateY(-2px); box-shadow: var(--out); }
.seat-photo img { width: 100%; height: 190px; object-fit: cover; display: block; background: var(--well); }
.seat-photo span { display: block; padding: 9px 11px; font-size: 11px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-loading, .photo-empty { grid-column: 1 / -1; min-height: 145px; display: grid; place-items: center; padding: 24px; border: 0; border-radius: 16px; background: var(--well); box-shadow: var(--in-sm); color: var(--muted); text-align: center; }
.photo-search-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.photo-search-actions a { padding: 9px 13px; border-radius: 999px; background: var(--bg); box-shadow: var(--out-sm); border: 0; color: var(--teal-dark); font-size: 12px; font-weight: 700; text-decoration: none; }
.photo-search-actions a:hover { color: var(--teal); }
.photo-disclaimer { margin: 13px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
@media (max-width: 680px) {
  .seat-photo-gallery { grid-template-columns: 1fr 1fr; }
  .seat-photo img { height: 150px; }
  .photo-heading { align-items: start; flex-direction: column; }
  .photo-heading > span { text-align: left; }
  .airport-tooltip { width: 210px; margin-left: -105px; }
  .airport-hover.tip-right .airport-tooltip { right: -8px; }
  .airport-hover.tip-left .airport-tooltip { left: -8px; }
}

/* Ride comfort: chips, dialog, route map, day-by-day outlook */
.ride-chip { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; font-family: inherit; line-height: 1.4; }
.ride-chip.pending { color: var(--muted); background: var(--bg); box-shadow: var(--in-sm); cursor: default; }
.ride-chip.pending .ride-dot { background: #a9b4c6; animation: ridePulse 1.2s ease infinite; }
.ride-chip.err, .ride-chip.far { background: var(--bg); box-shadow: var(--in-sm); color: var(--muted); }
.ride-chip.far { cursor: pointer; }
.ride-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
@keyframes ridePulse { 50% { opacity: .35; } }
.band-calm { background: #d7eee2; color: #0b6a48; border-color: transparent; }
.band-smooth { background: #d8eae6; color: #0b5f57; border-color: transparent; }
.band-light { background: #f2e7cd; color: #8a5f07; border-color: transparent; }
.band-moderate { background: #f4dfc9; color: #94470e; border-color: transparent; }
.band-rough { background: #f2d5d2; color: #9c2a22; border-color: transparent; }
.ride-dialog { width: min(880px, calc(100vw - 28px)); }
.ride-hero { min-height: 210px; }
.route-arrow { color: var(--teal); font-weight: 400; }
.ride-hero .airport-code, .ride-hero .airport-hover { color: var(--ink); }
.ride-score-wrap { display: flex; align-items: center; gap: 15px; margin-top: 16px; }
.ride-score { width: 78px; height: 78px; border-radius: 50%; display: flex; align-items: baseline; justify-content: center; flex: none; padding-top: 22px; border: 0; box-shadow: var(--out-sm); }
.ride-score strong { font-family: Manrope, sans-serif; font-size: 27px; line-height: 1; }
.ride-score span { font-size: 12px; opacity: .75; }
.ride-score.far-score { background: var(--bg); box-shadow: var(--in-sm); color: var(--ink); align-items: center; padding-top: 0; }
.ride-score-label strong { display: block; font-size: 17px; }
.ride-score-label small { color: var(--muted); line-height: 1.45; display: block; margin-top: 3px; max-width: 480px; }
.ride-body { padding: 26px 30px 30px; display: grid; gap: 24px; }
.ride-loading { padding: 60px 30px; text-align: center; color: var(--muted); }
.ride-map { width: 100%; border-radius: 18px; display: block; margin-top: 10px; box-shadow: var(--in-sm); }
.map-water { fill: #d5dcea; }
.map-land { fill: #bfc9dc; stroke: #aab6cd; }
.map-label { fill: #2f3b52; font: 800 20px Manrope, sans-serif; paint-order: stroke; stroke: #e4e9f2; stroke-width: 5px; }
.route-arc { fill: none; stroke: #d2690b; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1 9; }
.route-arc-glow { fill: none; stroke: rgba(210, 105, 11, .3); stroke-width: 8; stroke-linecap: round; }
.endpoint { fill: #fff; stroke: #5b6880; stroke-width: 2.5; }
.wp-dot { stroke: #ffffff; stroke-width: 2; }
.wp-dot.band-calm { fill: #27b98a; }
.wp-dot.band-smooth { fill: #43b3a2; }
.wp-dot.band-light { fill: #e0ac31; }
.wp-dot.band-moderate { fill: #e07f2e; }
.wp-dot.band-rough { fill: #d94a3d; }
.ride-profile-wrap { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 11px; font-weight: 800; color: var(--muted); }
.ride-profile { flex: 1; display: flex; gap: 3px; height: 14px; }
.profile-cell { flex: 1; border-radius: 6px; border: 0; cursor: help; }
.factor-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.factor-list li { display: flex; gap: 10px; align-items: flex-start; background: var(--bg); box-shadow: var(--in-sm); border-radius: 13px; padding: 11px 13px; font-size: 13px; line-height: 1.45; }
.factor-list i { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 4px; }
.factor-list .sev-high i { background: #d94a3d; }
.factor-list .sev-medium i { background: #e07f2e; }
.factor-list .sev-low i { background: #4a90d9; }
.factor-list .sev-good i { background: #27b98a; }
.day-bars { display: flex; gap: 8px; align-items: flex-end; margin-top: 14px; overflow-x: auto; padding-bottom: 4px; }
.day-col { flex: 1; min-width: 52px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; border-radius: 13px; border: 0; cursor: help; }
.day-col.flight { box-shadow: var(--in-sm); background: var(--teal-soft); }
.day-col.best { box-shadow: var(--in-sm); background: #f0e8d2; }
.day-col.best.flight { background: var(--teal-soft); }
.day-score { font-size: 11px; font-weight: 800; color: var(--ink); }
.day-bar { width: 22px; border-radius: 7px 7px 4px 4px; border: 0; box-shadow: 2px 2px 4px rgba(163, 174, 196, .5); }
.day-name { font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.day-date { font-size: 11px; font-weight: 700; color: var(--ink); }
.day-star, .day-flag { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.day-star { color: #8a5f07; }
.day-flag { color: var(--teal-dark); }
.dest-weather { margin: 0; background: var(--bg); box-shadow: var(--in-sm); border-radius: 13px; padding: 12px 14px; font-size: 13px; }
@media (max-width: 680px) {
  .ride-body { padding: 20px 16px 24px; }
  .day-col { min-width: 44px; }
  .ride-score-wrap { align-items: flex-start; }
}
.profile-cell.band-calm { background: #27b98a; }
.profile-cell.band-smooth { background: #43b3a2; }
.profile-cell.band-light { background: #e0ac31; }
.profile-cell.band-moderate { background: #e07f2e; }
.profile-cell.band-rough { background: #d94a3d; }

/* Bag + connection quality filters and risk labels */
.bags-header { margin: 22px 0 12px; }
.bags-header h3 { font-size: 16px; margin: 0; }
.preference-row.bags-row { margin-top: 0; margin-bottom: 4px; }
.tag.warn { background: #f2e7cd; color: #8a5f07; border: 0; box-shadow: none; }
.tag.risk { background: #f2d5d2; color: #9c2a22; border: 0; box-shadow: none; }
.card-alert { margin: 0 22px 14px; padding: 12px 15px; border-radius: 13px; background: #f6dbd8; box-shadow: var(--in-sm); border: 0; color: #7c211a; font-size: 12px; line-height: 1.55; }
.card-alert strong { color: #9c2a22; }
.card-alert .airport-code, .card-alert .airport-hover { color: #9c2a22; font-weight: 800; }
@media (max-width: 880px) { .preference-row.bags-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .preference-row.bags-row { grid-template-columns: 1fr; } }

/* Interactive seat map */
.seatmap-wrap { background: var(--well); box-shadow: var(--in); border-radius: 44px 44px 18px 18px; padding: 18px 14px 14px; }
.seatmap-scroll { max-height: 430px; overflow-y: auto; border-radius: 12px; padding: 4px 2px; }
.seatmap { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.sm-row { display: flex; align-items: center; gap: 4px; position: relative; }
.sm-row.sm-exit { padding: 3px 0; }
.sm-rownum { width: 20px; font-size: 9px; font-weight: 800; color: var(--muted); text-align: center; flex: none; }
.sm-aisle { width: 16px; flex: none; }
.sm-seat { width: 26px; height: 24px; border-radius: 7px 7px 9px 9px; border: 0; font-size: 9px; font-weight: 800; display: grid; place-items: center; padding: 0; transition: transform .1s; box-shadow: 2px 2px 4px rgba(163, 174, 196, .55), -1px -1px 3px rgba(255, 255, 255, .8); }
.sm-seat:hover { transform: scale(1.15); z-index: 2; }
.sm-seat.selected { outline: 2px solid var(--teal-dark); outline-offset: 1px; }
.sm-seat.s-best { background: #b5e6cf; color: #0b6a48; }
.sm-seat.s-good { background: #cfe6e1; color: #0b5f57; }
.sm-seat.s-std { background: #dde3ec; color: #5b6880; }
.sm-seat.s-care { background: #f0e0ba; color: #855a08; }
.sm-seat.s-avoid { background: #efccc7; color: #93251d; }
.sm-exit-tag { font-size: 8px; font-weight: 800; letter-spacing: .06em; color: #b3261e; flex: none; font-style: normal; }
.sm-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; font-size: 10px; font-weight: 700; color: #5b6880; }
.sm-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sm-legend i { width: 13px; height: 12px; border-radius: 4px; display: inline-block; }
.sm-legend .s-best { background: #b5e6cf; }
.sm-legend .s-good { background: #cfe6e1; }
.sm-legend .s-std { background: #dde3ec; }
.sm-legend .s-care { background: #f0e0ba; }
.sm-legend .s-avoid { background: #efccc7; }
.sm-advice { margin: 10px 0 0; min-height: 18px; font-size: 12px; line-height: 1.5; color: var(--ink); }
.ext-map-links { margin-top: 8px; font-size: 11px; color: var(--muted); }
.ext-map-links a { color: var(--teal-dark); font-weight: 700; text-decoration: none; }
.ext-map-links a:hover { text-decoration: underline; }
.sm-note { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }

/* Traveler notes */
.notes-section { padding: 0 30px 26px; }
.notes-section h3 { margin: 4px 0 14px; }
.notes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.note-group { background: var(--bg); box-shadow: var(--in-sm); border-radius: 14px; padding: 14px 16px; }
.note-group h4 { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-dark); }
.note-group ul { margin: 0; padding-left: 17px; }
.note-group li { font-size: 12.5px; line-height: 1.55; color: var(--ink); margin-bottom: 6px; }
.note-group li:last-child { margin-bottom: 0; }
@media (max-width: 680px) { .notes-grid { grid-template-columns: 1fr; } .notes-section { padding: 0 16px 22px; } }

/* Points + value panel */
.value-panel { margin-top: 18px; }
.value-grid { margin-top: 2px; }
.value-disclaimer { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }

/* Related reading from the travel blogs */
.blog-list { display: grid; gap: 10px; }
.blog-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; background: var(--bg); box-shadow: var(--out-sm); border: 0; border-radius: 14px; padding: 11px 14px; text-decoration: none; color: var(--ink); transition: transform .12s, box-shadow .15s; }
.blog-item:hover { transform: translateX(2px); box-shadow: var(--out); }
.blog-src { font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--teal-dark); background: var(--teal-soft); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.blog-title { font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.blog-date { font-size: 10px; color: var(--muted); white-space: nowrap; }
@media (max-width: 680px) { .blog-item { grid-template-columns: 1fr; gap: 5px; } }
.blog-meta { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.blog-why { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #5b6880; background: var(--bg); box-shadow: var(--in-sm); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
@media (max-width: 680px) { .blog-meta { justify-content: flex-start; } }

/* Multi-select pick chips (cabin, departure time) */
.chip-row { display: flex; flex-wrap: wrap; gap: 9px; }
.pick-chip { border: 0; background: var(--bg); box-shadow: var(--out-sm); color: #4a5670; border-radius: 999px; padding: 8px 14px; font-size: 12px; font-weight: 700; transition: box-shadow .15s, color .15s; }
.pick-chip:hover { color: var(--teal-dark); }
.pick-chip.active { box-shadow: var(--in); color: var(--teal-dark); }
.chip-hint { color: var(--muted); font-size: 10px; }

/* Traveler extras strip (meals, menus, amenities) below the seat gallery */
.seat-extra-section { margin-top: 20px; }
.seat-extra-section .photo-heading { margin-bottom: 10px; }
.seat-extra-section h3 { font-size: 15px; }
.seat-extra-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 0; }
.seat-extra-gallery .seat-photo img { height: 118px; }
.seat-extra-gallery .seat-photo span { font-size: 10px; padding: 7px 9px; }
@media (max-width: 680px) { .seat-extra-gallery { grid-template-columns: 1fr 1fr; } }

/* v3.10.0 — Leave Now, door-to-door, window-view forecast */
.results-controls { display: flex; align-items: center; gap: 14px; }
.leave-now-toggle { border: 0; background: var(--bg); color: var(--muted); font-weight: 800; font-size: 13px; padding: 11px 18px; border-radius: 999px; box-shadow: var(--out-sm); transition: box-shadow .15s, color .15s; }
.leave-now-toggle.active { box-shadow: var(--in); color: var(--teal-dark); }
.leave-strip { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 13px 26px; background: var(--well); box-shadow: var(--in-sm); font-size: 13px; }
.leave-strip strong { font-family: Manrope, sans-serif; font-size: 15px; }
.leave-strip .leave-countdown { font-weight: 800; color: var(--teal-dark); }
.leave-strip small { color: var(--muted); margin-left: auto; }
.leave-strip.urgent .leave-countdown { color: #c04437; }
.leave-strip.soon .leave-countdown { color: #b07a1f; }
.drive-edit, .drive-save { border: 0; background: transparent; color: var(--teal-dark); font-size: 11px; font-weight: 700; text-decoration: underline; padding: 0; }
.drive-input { width: 64px; min-height: 30px; border-radius: 8px; padding: 0 8px; }
.card-detail .dtd { font-weight: 700; color: #4a5670; cursor: help; }
.sunview-body { display: flex; flex-direction: column; gap: 10px; }
.sun-advice { display: flex; flex-direction: column; gap: 4px; padding: 15px 18px; border-radius: 14px; background: var(--bg); box-shadow: var(--out-sm); }
.sun-advice strong { font-family: Manrope, sans-serif; font-size: 17px; color: var(--teal-dark); }
.sun-advice span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.sun-line { padding: 10px 14px; border-radius: 12px; background: var(--bg); box-shadow: var(--in-sm); font-size: 13px; line-height: 1.5; }
.sun-line em { color: var(--muted); font-style: normal; font-size: 11px; }
.sun-foot { color: var(--muted); font-size: 11px; }

/* v3.11.0 — scores engine + Decision Mode */
.score-chip { font-weight: 800; cursor: help; }
.score-chip.sc-good { background: rgba(63, 158, 108, .13); color: #2c7d54; }
.score-chip.sc-mid { background: rgba(224, 164, 48, .15); color: #9a6b12; }
.score-chip.sc-low { background: rgba(214, 96, 82, .14); color: #b0473a; }
.decision-card { background: var(--bg); box-shadow: var(--out-lg); border-radius: 28px; padding: 30px; margin-top: 26px; }
.decision-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.decision-head h2 { margin-bottom: 6px; font-size: 24px; }
.decision-sub { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; max-width: 620px; }
.decision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 26px; margin-top: 22px; }
.dq > span { display: block; color: #4a5670; font-weight: 700; font-size: 12px; margin-bottom: 8px; }
.dq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dq-chips button { border: 0; background: var(--bg); color: var(--muted); font-size: 13px; font-weight: 700; padding: 9px 15px; border-radius: 999px; box-shadow: var(--out-sm); transition: box-shadow .15s, color .15s; }
.dq-chips button.active { box-shadow: var(--in); color: var(--teal-dark); }
.decision-result { margin-top: 22px; }
.decision-verdict { background: var(--bg); border-radius: 20px; padding: 24px 26px; box-shadow: var(--in-sm); }
.decision-verdict h3 { font-size: 22px; margin: 4px 0 14px; }
.dv-why { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 22px; }
.dv-why li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.5; color: #4a5670; }
.dv-why li:before { content: '✓'; position: absolute; left: 0; color: var(--teal); font-weight: 800; }
.dv-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dv-runner { color: var(--muted); font-size: 12.5px; }
@media (max-width: 760px) { .decision-grid, .dv-why { grid-template-columns: 1fr; } .decision-head { flex-direction: column; } }

/* v3.12.0 — version pill, changelog, legend */
.version-pill { border: 0; background: var(--bg); color: var(--teal-dark); font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 6px 13px; border-radius: 999px; box-shadow: var(--out-sm); margin-left: 4px; transition: box-shadow .15s; }
.version-pill:hover { box-shadow: var(--in-sm); }
.changelog-dialog { border: 0; border-radius: 24px; background: var(--bg); box-shadow: 0 26px 70px rgba(28, 37, 56, .5); padding: 30px 34px; width: min(560px, 92vw); max-height: 80vh; }
.changelog-dialog::backdrop { background: rgba(30, 39, 58, .55); backdrop-filter: blur(5px); }
.changelog-dialog h3 { font-size: 22px; margin-bottom: 16px; }
.cl-entry { padding: 14px 0; border-top: 1px solid var(--line); }
.cl-entry:first-child { border-top: 0; }
.cl-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.cl-head strong { font-family: Manrope, sans-serif; color: var(--teal-dark); }
.cl-head small { color: var(--muted); }
.cl-entry ul { margin: 0; padding-left: 18px; color: #4a5670; font-size: 13.5px; line-height: 1.6; }
.cl-entry li { margin-bottom: 4px; }
.legend-section { margin-top: 44px; background: var(--bg); border-radius: 28px; box-shadow: var(--out-lg); padding: 30px; }
.legend-section h2 { font-size: 24px; margin-bottom: 20px; }
.legend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 34px; }
.legend-block h4 { font-family: Manrope, sans-serif; font-size: 14px; margin: 0 0 12px; color: var(--ink); }
.legend-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 11px; }
.legend-row > span { flex: none; margin-top: 1px; }
.legend-row p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.legend-num { font-size: 11px; font-weight: 800; color: #4a5670; background: var(--bg); box-shadow: var(--in-sm); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
@media (max-width: 760px) { .legend-grid { grid-template-columns: 1fr; } }

/* v3.13.0 — Fearless Flyer page */
body.fearless-mode .hero, body.fearless-mode .search-card, body.fearless-mode .decision-card,
body.fearless-mode .results-section, body.fearless-mode .legend-section { display: none; }
.fearless-section { display: block; }
.fx-hero { max-width: 860px; margin-bottom: 40px; }
.fx-hero h1 { font-size: clamp(34px, 4.4vw, 54px); }
.fx-hero h1 span { color: var(--teal); }
.fx-block { background: var(--bg); border-radius: 28px; box-shadow: var(--out-lg); padding: 30px; margin-bottom: 26px; }
.fx-block h2 { font-size: 23px; margin-bottom: 18px; }
.fx-grid { display: grid; gap: 16px; }
.fx-grid.three { grid-template-columns: repeat(3, 1fr); }
.fx-grid.two { grid-template-columns: 1fr 1fr; }
.fx-card, .fx-link-card { background: var(--bg); border-radius: 18px; box-shadow: var(--out-sm); padding: 18px 20px; }
.fx-card h4, .fx-link-card strong { font-family: Manrope, sans-serif; font-size: 14.5px; display: block; margin: 0 0 7px; color: var(--ink); }
.fx-card p, .fx-link-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.fx-link-card { display: block; text-decoration: none; transition: box-shadow .15s; }
.fx-link-card:hover { box-shadow: var(--in-sm); }
.fx-link-card span { display: inline-block; margin-top: 10px; color: var(--teal-dark); font-weight: 800; font-size: 12px; }
.fx-timeline { display: flex; flex-direction: column; gap: 12px; }
.fx-phase { display: grid; grid-template-columns: 220px 1fr; gap: 18px; background: var(--bg); box-shadow: var(--in-sm); border-radius: 16px; padding: 16px 20px; }
.fx-phase strong { font-family: Manrope, sans-serif; font-size: 14px; color: var(--teal-dark); }
.fx-phase p { margin: 0; color: #4a5670; font-size: 13.5px; line-height: 1.6; }
.fx-disclaimer { margin: 20px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; border-top: 1px solid var(--line); padding-top: 14px; }
@media (max-width: 860px) { .fx-grid.three, .fx-grid.two { grid-template-columns: 1fr; } .fx-phase { grid-template-columns: 1fr; gap: 6px; } }
.fx-intro { margin: -6px 0 16px; color: var(--muted); font-size: 13.5px; line-height: 1.6; max-width: 720px; }

/* v3.15.0 — Fearless/Relaxed Flyer visual system */
.fx-sky{position:relative;border-radius:26px;overflow:hidden;box-shadow:var(--in);height:340px;margin-bottom:26px}
.fx-sky svg{position:absolute;inset:0;width:100%;height:100%}
.fx-sky-copy{position:absolute;left:38px;bottom:32px;max-width:600px}
.fx-sky-copy h1{font-size:clamp(28px,3.6vw,42px);line-height:1.08;letter-spacing:-.03em;margin:0 0 10px}
.fx-sky-copy h1 em{font-style:normal;color:var(--teal-dark)}
.fx-sky-copy .hero-copy{font-size:14px;color:#5b667e;max-width:560px}
@keyframes fxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes fxCloud{from{transform:translateX(0)}to{transform:translateX(-420px)}}
.fx-cloud{animation:fxCloud 46s linear infinite}
.fx-cloud.slow{animation-duration:78s}
.fx-plane{animation:fxBob 7s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.fx-cloud,.fx-plane,.fx-breath-ball,.fx-wave rect{animation:none!important}}

.fx-rings{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:26px}
.fx-ring{background:var(--bg);border-radius:20px;box-shadow:var(--out-sm);padding:20px;display:flex;gap:16px;align-items:center}
.fx-ring svg{flex:none}
.fx-ring h4{font-family:Manrope,sans-serif;font-size:15px;margin:0 0 5px}
.fx-ring p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.55}
.fx-ring-num{font:800 15px Manrope,sans-serif;fill:#2f3b52}

.fx-breath-row{display:grid;grid-template-columns:300px 1fr;gap:34px;align-items:center}
.fx-breath-stage{display:flex;flex-direction:column;align-items:center;gap:14px}
.fx-breath-outer{width:220px;height:220px;border-radius:50%;box-shadow:var(--in);display:grid;place-items:center}
.fx-breath-ball{width:90px;height:90px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f8a15a,var(--teal));box-shadow:0 14px 34px rgba(233,115,18,.35);display:grid;place-items:center;transition:transform .6s ease}
.fx-breath-ball span{color:#fff;font-weight:800;font-size:11.5px;letter-spacing:.1em}
.fx-breath-ball.running{animation:fxBreathe 16s ease-in-out infinite}
@keyframes fxBreathe{0%{transform:scale(.62)}25%{transform:scale(1.2)}50%{transform:scale(1.2)}75%{transform:scale(.62)}100%{transform:scale(.62)}}
.fx-breath-btn{border:0;background:var(--bg);color:var(--teal-dark);font-weight:800;font-size:13px;padding:12px 22px;border-radius:999px;box-shadow:var(--out-sm)}
.fx-breath-btn.active{box-shadow:var(--in-sm)}
.fx-breath-stage small{color:var(--muted);font-size:11.5px}
.fx-breath-steps{display:flex;flex-direction:column;gap:12px}
.fx-bstep{display:flex;align-items:center;gap:14px;background:var(--bg);border-radius:16px;box-shadow:var(--out-sm);padding:14px 18px;transition:box-shadow .3s}
.fx-bstep.on{box-shadow:var(--in-sm)}
.fx-bstep b{display:block;font-family:Manrope,sans-serif;font-size:15px;color:var(--teal-dark);margin-bottom:3px}
.fx-bstep span{color:var(--muted);font-size:13.5px;line-height:1.5}
.fx-bstep i{width:38px;height:38px;border-radius:12px;box-shadow:var(--in-sm);display:grid;place-items:center;flex:none;font-style:normal;color:var(--teal-dark);font-weight:800;font-size:13px}

.fx-journey{background:var(--bg);border-radius:22px;box-shadow:var(--in-sm);padding:24px}
.fx-journey svg{width:100%;height:210px;display:block}
.fx-jdot{cursor:pointer}
.fx-jhit{fill:transparent}
.fx-jnode{fill:#fff;stroke:var(--teal);stroke-width:3;transition:r .18s}
.fx-jdot:hover .fx-jnode,.fx-jdot.sel .fx-jnode{fill:var(--teal);r:12}
.fx-jlabel{font:700 11px Inter,sans-serif;fill:#4a5670;text-anchor:middle}
.fx-jsub{font:600 10px Inter,sans-serif;fill:#98a2b7;text-anchor:middle}
.fx-jcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.fx-jcard{background:var(--bg);border-radius:16px;box-shadow:var(--out-sm);padding:16px 18px}
.fx-jcard.sel{box-shadow:var(--in-sm)}
.fx-jcard h5{font-family:Manrope,sans-serif;font-size:13.5px;margin:0 0 6px;color:var(--teal-dark)}
.fx-jcard p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.55}
.fx-jcard .dur{display:inline-block;margin-top:9px;font-size:10.5px;font-weight:800;color:#2c7d54;background:rgba(63,158,108,.13);border-radius:999px;padding:4px 9px}

.fx-ic{width:42px;height:42px;margin-bottom:10px;display:block}
.fx-sounds{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fx-sound{background:var(--bg);border-radius:18px;box-shadow:var(--out-sm);padding:18px}
.fx-sound-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.fx-play{width:40px;height:40px;border-radius:50%;box-shadow:var(--out-sm);display:grid;place-items:center;flex:none;color:var(--teal-dark)}
.fx-sound h4{font-family:Manrope,sans-serif;font-size:14px;margin:0}
.fx-sound small{color:var(--muted);font-size:11.5px}
.fx-sound p{margin:10px 0 0;color:var(--muted);font-size:12.5px;line-height:1.55}
.fx-wave{height:44px;width:100%;display:block}
.fx-wave rect{fill:var(--teal);opacity:.55;animation:fxPulse 1.6s ease-in-out infinite}
.fx-wave rect:nth-child(3n){opacity:.8;animation-delay:.2s}
.fx-wave rect:nth-child(4n){animation-delay:.45s;opacity:.35}
.fx-wave rect:nth-child(5n){animation-delay:.7s}
@keyframes fxPulse{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}

.fx-cabin{background:var(--bg);border-radius:22px;box-shadow:var(--in-sm);padding:22px}
.fx-cabin svg{width:100%;height:auto;display:block}
.fx-zone{transition:opacity .2s}
.fx-cabin:hover .fx-zone{opacity:.12}
.fx-zone:hover{opacity:.4!important}
.fx-zt{font:800 13px Inter,sans-serif}
.fx-zt.good{fill:#2c7d54}.fx-zt.warn{fill:#9a6b12}
.fx-zs{font:600 11.5px Inter,sans-serif;fill:#4a5670}
.fx-zone-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.fx-zl{display:flex;align-items:center;gap:8px;background:var(--bg);box-shadow:var(--out-sm);border-radius:999px;padding:8px 14px;font-size:12px;font-weight:700;color:#4a5670}
.fx-zl i{width:12px;height:12px;border-radius:4px;display:block}

.fx-tscale{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fx-tcard{background:var(--bg);border-radius:18px;box-shadow:var(--out-sm);padding:18px}
.fx-tcard svg{width:100%;height:60px;display:block;margin-bottom:12px}
.fx-tcard h4{font-family:Manrope,sans-serif;font-size:14px;margin:0 0 6px}
.fx-tcard p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.55}
.fx-tpill{display:inline-block;margin-top:10px;font-size:10.5px;font-weight:800;border-radius:999px;padding:4px 10px}
.fx-tpill.t1{background:rgba(63,158,108,.14);color:#2c7d54}
.fx-tpill.t2{background:rgba(63,158,108,.1);color:#3c7d5f}
.fx-tpill.t3{background:rgba(224,164,48,.16);color:#9a6b12}
.fx-tpill.t4{background:rgba(214,96,82,.14);color:#b0473a}
@media(max-width:900px){
  .fx-rings,.fx-breath-row,.fx-sounds,.fx-jcards,.fx-tscale{grid-template-columns:1fr}
  .fx-sky{height:300px}.fx-sky-copy{left:22px;right:22px;bottom:22px}
}

/* v3.16.0 — real photography on Relaxed Flyer */
.fx-photo-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:0;background:var(--bg);border-radius:28px;box-shadow:var(--out-lg);overflow:hidden;margin-bottom:26px}
.fx-hero-copy{padding:44px 40px;align-self:center}
.fx-hero-copy h1{font-size:clamp(28px,3.4vw,42px);line-height:1.08;letter-spacing:-.03em;margin:0 0 12px}
.fx-hero-copy h1 em{font-style:normal;color:var(--teal-dark)}
.fx-hero-copy .hero-copy{font-size:15px;line-height:1.65;max-width:520px}
.fx-hero-cta{display:inline-block;margin-top:20px;background:var(--bg);color:var(--teal-dark);font-weight:800;font-size:13px;padding:13px 22px;border-radius:999px;box-shadow:var(--out-sm);text-decoration:none}
.fx-hero-cta:hover{box-shadow:var(--in-sm)}
.fx-hero-photo{position:relative;min-height:380px}
.fx-hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.fx-hero-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,rgba(228,233,242,.35) 22%,transparent 55%)}
.fx-sky-band{height:150px;margin:26px 0}
.fx-photo-band{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:26px}
.fx-photo-card{margin:0;background:var(--bg);border-radius:22px;box-shadow:var(--out-sm);overflow:hidden}
.fx-photo-card img{width:100%;height:280px;object-fit:cover;display:block}
.fx-photo-card figcaption{padding:18px 20px;color:var(--muted);font-size:13px;line-height:1.6}
.fx-photo-card figcaption b{display:block;font-family:Manrope,sans-serif;font-size:14.5px;color:var(--ink);margin-bottom:5px}
@media(max-width:900px){
  .fx-photo-hero{grid-template-columns:1fr}
  .fx-hero-copy{padding:30px 24px}
  .fx-hero-photo{min-height:280px;order:-1}
  .fx-hero-photo:after{background:linear-gradient(180deg,transparent 55%,var(--bg) 100%)}
  .fx-photo-band{grid-template-columns:1fr}
  .fx-sky-band{height:120px}
}