/* WholeAway site styles. The palette and spacing mirror the app's design
   tokens so the site and the product read as one thing. System fonts only:
   no external request, nothing to consent to. */

:root {
  --ink: #0d1b2a;
  --ink-soft: #566a80;
  --canvas: #ffffff;
  --canvas-tint: #f2f7fd;
  --surface: #ffffff;
  --line: #dde7f2;
  --accent: #1668dc;
  --accent-dark: #0f52b3;
  --accent-soft: #e8f1fe;
  --live: #0f8a6a;
  --estimated: #b06a12;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --content: 1120px;
  --shadow: 0 10px 30px rgba(13, 27, 42, 0.07);
  --shadow-lift: 0 18px 44px rgba(13, 27, 42, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eaf1f9;
    --ink-soft: #9fb2c7;
    --canvas: #0b1420;
    --canvas-tint: #101d2c;
    --surface: #121e2c;
    --line: #23344a;
    --accent: #58a0ff;
    --accent-dark: #3b86ec;
    --accent-soft: #16283e;
    --live: #3fc39c;
    --estimated: #e0a44e;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    --shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.55);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 24px;
}

a { color: inherit; }

/* Header */

.site-header {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  font-size: 19px;
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* The real app icon, so the site and the store listing are the same product.
   It is set here rather than as an <img> in each page so every page — including
   the generated article and legal pages — picks it up from one place. */
.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: inline-block;
  flex: none;
  /* Plain url() first for anything that does not understand image-set, then
     the prefixed form for older Safari, then the standard one. */
  background-image: url("/assets/logo-52.png");
  background-image: -webkit-image-set(
    url("/assets/logo-26.png") 1x,
    url("/assets/logo-52.png") 2x,
    url("/assets/logo-78.png") 3x
  );
  background-image: image-set(
    url("/assets/logo-26.png") 1x,
    url("/assets/logo-52.png") 2x,
    url("/assets/logo-78.png") 3x
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 15px;
}

.header-nav a { color: var(--ink-soft); text-decoration: none; }
.header-nav a:hover { color: var(--ink); }

.lang-switch {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 14px;
  text-decoration: none;
  color: var(--ink-soft);
}

.language-menu {
  position: relative;
  color: var(--ink-soft);
}

.language-menu summary {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  min-width: 92px;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  text-align: center;
  white-space: nowrap;
  user-select: none;
}

.language-menu summary::-webkit-details-marker { display: none; }
.language-menu summary::after { content: "▾"; margin-inline-start: 7px; }
.language-menu[open] summary::after { content: "▴"; }
.language-menu summary:hover { color: var(--ink); border-color: var(--ink-soft); }
.language-menu summary:focus-visible,
.language-options a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 2px;
}

.language-options {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline-end: 0;
  width: min(300px, calc(100vw - 32px));
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  z-index: 20;
}

.language-options a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--ink-soft);
  text-decoration: none;
  line-height: 1.35;
}

.language-options a:hover { color: var(--ink); background: var(--canvas-tint); }
.language-options a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); font-weight: 600; }

.language-menu-footer { display: inline-block; margin-bottom: 22px; }
.language-menu-footer .language-options { inset-inline-start: 0; inset-inline-end: auto; inset-block-start: auto; inset-block-end: calc(100% + 8px); }

/* Navigation labels are one word in English and can be longer elsewhere; left
   to wrap they break down the middle of a word rather than pushing the row. */
.header-nav > a { white-space: nowrap; }

/* The web app swaps the link for a <select> once ten languages exist. A select
   does not shrink to its content the way the link did, and the native control
   brings its own font and background, so it has to be told to match. */
select.lang-switch {
  appearance: none;
  background: var(--surface);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  padding-block: 4px;
  padding-inline: 12px 28px;
  max-width: 11rem;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  background-position:
    right 14px center,
    right 9px center;
}

[dir="rtl"] select.lang-switch {
  background-position:
    left 9px center,
    left 14px center;
}

/* Hero */

.hero-band {
  background:
    radial-gradient(90rem 40rem at 12% -18%, var(--accent-soft), transparent 62%),
    linear-gradient(180deg, var(--canvas-tint), var(--canvas) 72%);
  border-bottom: 1px solid var(--line);
}

.hero {
  padding: 84px 0 76px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 36px; }
  .hero-figure { display: none; }
}

/* Illustrative result card. The figures are an example, not a quote, and the
   card says so — the same rule the product follows. */

.hero-figure {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: 22px 24px 20px;
}

.hero-figure .example-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

.hero-figure .place {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.hero-figure .place h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 640;
  letter-spacing: -0.01em;
}

.hero-figure .total { font-size: 20px; font-weight: 640; }

.hero-figure .meta { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 16px; }

.breakdown { list-style: none; margin: 0; padding: 0; font-size: 15px; }

.breakdown li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.breakdown .label { color: var(--ink-soft); }

/* Source labels read the same everywhere they appear — list, detail table and
   comparison — because they carry meaning, not decoration. */
/* The source label sits on every figure — that is the product's promise. But
   set in spaced uppercase and coloured amber it read as a warning on four rows
   out of five, which is the opposite of the reassurance it exists to give. The
   colour moved to a dot and the word went quiet: the distinction is still
   visible at a glance, and the word still carries it for anyone who cannot
   distinguish the colours. */
.src {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.src::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-soft);
  flex: none;
}

.breakdown .src, .compare-table .src { margin-left: 10px; }

.src-live::before { background: var(--live); }
.src-est::before { background: var(--estimated); }
.src-none::before { background: var(--line); }

.hero h1 {
  font-size: clamp(34px, 5.5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  max-width: 16ch;
  font-weight: 680;
}

.hero p.lede {
  font-size: clamp(18px, 2.2vw, 21px);
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 0 0 32px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 28%, transparent);
}
.btn-primary:hover { background: var(--accent-dark); }

.btn-secondary {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
.btn-secondary:hover { border-color: var(--ink-soft); }

.btn-store {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink-soft);
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 8px 20px;
  line-height: 1.25;
  cursor: default;
}

.btn-store strong { color: var(--ink); font-size: 15px; font-weight: 620; }
.btn-store span { font-size: 12.5px; letter-spacing: 0.02em; }

/* Sections */

section { padding: 56px 0; }

section h2 {
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  font-weight: 660;
}

section p.section-lede {
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0 0 32px;
}

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }

.card .icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}

.card .icon svg { width: 22px; height: 22px; }

.card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 640;
  letter-spacing: -0.01em;
}

.card p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }

/* Source labels, matching the app's vocabulary */

.tag {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
  margin-bottom: 12px;
}

.tag-live { color: var(--live); }
.tag-estimated { color: var(--estimated); }

.note {
  border-inline-start: 3px solid var(--line);
  padding-block: 4px;
  padding-inline-start: 18px;
  color: var(--ink-soft);
  font-size: 15.5px;
  max-width: 68ch;
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 40px 0;
  font-size: 15px;
  color: var(--ink-soft);
}

.footer-cols {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 28px;
}

.footer-cols h4 {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 10px;
}

.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { margin-bottom: 7px; }
.footer-cols a { color: var(--ink-soft); text-decoration: none; }
.footer-cols a:hover { color: var(--ink); text-decoration: underline; }

/* Simple document pages */

.doc { padding: 56px 0 72px; max-width: 74ch; }
.doc h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.02em; margin: 0 0 8px; }
.doc .updated { color: var(--ink-soft); font-size: 15px; margin: 0 0 32px; }
.doc h2 { font-size: 21px; margin: 36px 0 10px; letter-spacing: -0.01em; }
.doc p, .doc li { color: var(--ink-soft); }
.doc strong { color: var(--ink); }

/* Centred status page */

.status {
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
}

.status-inner { max-width: 46ch; }
.status h1 { font-size: 30px; letter-spacing: -0.02em; margin: 0 0 12px; }
.status p { color: var(--ink-soft); margin: 0 0 26px; }

.status-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 24px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--live) 14%, transparent);
  color: var(--live);
  font-size: 26px;
}

.status-mark.pending {
  background: color-mix(in srgb, var(--estimated) 14%, transparent);
  color: var(--estimated);
}

.status-mark.failed {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .hero { padding: 48px 0 40px; }
  section { padding: 40px 0; }
  .header-nav { gap: 14px; font-size: 14px; }
  .header-nav .hide-sm { display: none; }
}

@media (max-width: 760px) {
  .header-nav { gap: 12px; }
  .header-nav .hide-sm,
  .header-nav .nav-guide { display: none; }
}

@media (max-width: 540px) {
  .site-header .wrap { min-height: 62px; }
  .header-nav > a { display: none; }
  .language-menu summary { min-width: 0; max-width: 132px; overflow: hidden; text-overflow: ellipsis; }
  .language-options { grid-template-columns: 1fr; max-height: min(70vh, 440px); overflow-y: auto; }
}

.photo-section { padding-top: 8px; }
.trust-section { background: var(--canvas-tint); border-block: 1px solid var(--line); }
.trust-section .note { margin-top: 28px; }

/* Store badges. Real download buttons in shape and weight, with a slow shine
   sweep so they read as interactive rather than as flat images. Until the apps
   are published they carry an explicit pending state instead of a dead link. */

.store-row { display: flex; flex-wrap: wrap; gap: 12px; }

.store-badge {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 22px 0 18px;
  border-radius: 14px;
  background: #0d1b2a;
  color: #fff;
  text-decoration: none;
  border: 1px solid #0d1b2a;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.3, 1),
    box-shadow 220ms ease;
}

.store-badge:hover,
.store-badge:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(13, 27, 42, 0.28);
}

.store-badge::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 42%;
  left: -60%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  );
  transform: skewX(-18deg);
  animation: badge-shine 4.6s ease-in-out infinite;
}

.store-badge:nth-of-type(2)::after { animation-delay: 1.1s; }

@keyframes badge-shine {
  0%, 62% { left: -60%; }
  92%, 100% { left: 120%; }
}

.store-badge .glyph { width: 26px; height: 26px; flex: none; }
.store-badge .glyph svg { width: 100%; height: 100%; display: block; }

.store-badge .copy { display: flex; flex-direction: column; line-height: 1.2; }
.store-badge .copy small {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.72;
}
.store-badge .copy strong { font-size: 17px; font-weight: 620; letter-spacing: -0.01em; }

.store-badge[aria-disabled="true"] { cursor: default; opacity: 0.9; }

.store-badge .pending {
  margin-left: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  align-self: center;
}

@media (prefers-color-scheme: dark) {
  .store-badge { background: #f4f8fc; color: #0d1b2a; border-color: #f4f8fc; }
  .store-badge .pending { background: rgba(13, 27, 42, 0.12); }
  .store-badge::after {
    background: linear-gradient(100deg, transparent, rgba(13, 27, 42, 0.14), transparent);
  }
}

/* Mobile workspace -------------------------------------------------------
   The desktop console becomes one compact task surface on a phone. Motion
   communicates hierarchy and state changes only; it never suggests that a
   price or route is updating in real time. */

@keyframes workspace-enter {
  from { opacity: 0; transform: translateY(10px) scale(.992); }
  to { opacity: 1; transform: none; }
}

@keyframes surface-enter {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes result-reveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.app-console-head { animation: workspace-enter .55s cubic-bezier(.2,.75,.25,1) both; }
.app-form { animation: surface-enter .5s .08s cubic-bezier(.2,.75,.25,1) both; }
.app-main { animation: surface-enter .5s .14s cubic-bezier(.2,.75,.25,1) both; }
.result-card { animation: result-reveal .42s cubic-bezier(.2,.75,.25,1) both; }
.result-card:nth-child(2) { animation-delay: .05s; }
.result-card:nth-child(3) { animation-delay: .10s; }
.result-card:nth-child(4) { animation-delay: .15s; }
.product-mode label:has(input:checked) > span { transform: translateY(-1px); }
.btn:active, .result-open:active { transform: translateY(1px) scale(.995); }

@media (max-width: 700px) {
  body:has(.app-shell) {
    background:
      radial-gradient(32rem 24rem at 100% 0%, rgba(64, 156, 255, .13), transparent 62%),
      #eef4fa;
  }
  .site-header .wrap { min-height: 64px; }
  .brand { font-size: 19px; }
  .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
  select.lang-switch { min-height: 44px; }
  .app-shell { gap: 14px; padding: 12px 10px 46px; }
  .app-console-head {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px 20px 0;
    border-radius: 19px;
    box-shadow: 0 16px 36px rgba(7,26,47,.16);
  }
  .app-console-head::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -72px;
    top: -82px;
    border: 1px solid rgba(105, 195, 255, .20);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(62, 157, 240, .035), 0 0 0 58px rgba(62, 157, 240, .025);
    pointer-events: none;
  }
  .app-console-head .hero-kicker { margin-bottom: 7px; font-size: 10px; }
  .app-console-head h1 { max-width: 18ch; font-size: clamp(25px, 7.6vw, 31px); line-height: 1.08; }
  .app-console-head > div:first-child > p:last-child {
    margin: 10px 0 2px;
    max-width: 42ch;
    font-size: 13.5px;
    line-height: 1.48;
  }
  .workspace-status {
    justify-self: stretch;
    max-width: none;
    padding: 10px 12px;
    border-radius: 11px;
    background: rgba(255,255,255,.055);
  }
  .workspace-status span { font-size: 12px; }
  .workspace-status small { display: none; }
  .workspace-steps a { min-width: 0; padding: 11px 4px 12px; gap: 2px; }
  .workspace-steps b { font-size: 9px; }
  .workspace-steps span {
    max-width: 100%;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .app-form { padding: 21px 19px 24px; border-radius: 17px; }
  .app-form h2 { font-size: 25px; }
  .app-form .form-lede { margin-bottom: 20px; font-size: 13.5px; }
  .product-mode { gap: 7px; margin-bottom: 18px; }
  .product-mode legend { margin-bottom: 6px; }
  .product-mode label > span { min-height: 52px; padding: 10px 11px; }
  .product-mode b { font-size: 12.5px; }
  .product-mode small { display: none; }
  .form-section-title {
    margin: 23px -19px 15px;
    padding: 11px 19px 9px;
    font-size: 9.5px;
    letter-spacing: .13em;
  }
  .field { margin-bottom: 16px; }
  .field .hint { line-height: 1.4; }
  .choice-row label { min-height: 44px; display: grid; place-items: center; line-height: 1.25; }
  .advanced-options { margin-top: 18px; }
  .app-form button[type="submit"] {
    width: 100%;
    min-height: 54px;
    border-radius: 13px;
    box-shadow: 0 12px 26px rgba(22,104,220,.24);
  }
  .app-main { min-height: 260px; padding: 16px; border-radius: 17px; }
  .app-main-toolbar { margin: -16px -16px 16px; padding: 14px 16px; }
  .app-main-toolbar strong { font-size: 15px; }
  .results-head { align-items: flex-end; }
  .placeholder { min-height: 160px; padding: 24px 17px; border-radius: 13px; }
  .placeholder::before { transform: scale(.82); margin-bottom: 12px; }
  .result-alert { margin-bottom: 10px; }
  .result-list { gap: 12px; }
  .site-footer { padding: 30px 0; }
}

@media (max-width: 520px) {
  .field-row.money { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .result-card { flex-direction: column; border-radius: 13px; }
  .compare-tick {
    width: auto;
    min-height: 44px;
    padding: 8px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    flex-direction: row;
    justify-content: flex-start;
  }
  .result-open { min-height: 0; padding: 15px; gap: 6px; }
  .result-open .place-name { font-size: 18px; }
  .result-right { margin-top: 6px; padding-top: 11px; }
  .result-costs { grid-template-columns: 1fr; }
  .result-cost-total { grid-column: 1; }
  .result-decision { flex-direction: column; }
  .result-review { margin-top: 3px; }
  body[data-view="detail"] .app-shell { padding-inline: 8px; }
  .trip-overview { padding: 20px 18px; border-radius: 16px; }
  .trip-identity h2 { font-size: 26px; }
  .detail-nav { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .detail-nav::-webkit-scrollbar { display: none; }
  .detail-nav a, .detail-nav button { flex: none; }
  .product-card { padding: 19px 17px; border-radius: 16px; }
  .budget-row { grid-template-columns: minmax(0, 1fr) auto; }
  .budget-row .src { grid-column: 1 / -1; }
  .ranking-details > summary { padding: 15px 17px; }
  .ranking-details > summary span { display: none; }
}

/* Source-backed discovery catalogue. Kept separate from the web app shell so
   crawlable guides remain fast, readable and useful without JavaScript. */
.discovery-main, .guide-main { background: #fff; color: var(--ink); }
.discovery-hero { padding: 74px 0 54px; background: linear-gradient(135deg, #eef8ff, #fff 58%); }
.discovery-hero h1 { max-width: 14ch; margin: 7px 0 14px; font-size: clamp(42px, 7vw, 76px); line-height: .98; letter-spacing: -.055em; }
.discovery-hero > .wrap > p:not(.eyebrow) { max-width: 64ch; color: var(--ink-soft); font-size: 17px; line-height: 1.6; }
.discovery-categories {
  display: flex;
  gap: 8px;
  margin-top: 28px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.discovery-categories::-webkit-scrollbar { display: none; }
.discovery-categories a { flex: 0 0 auto; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none; }
.discovery-categories small { margin-left: 5px; color: var(--ink-soft); }
.discovery-section { padding-top: 42px; padding-bottom: 78px; }
.destination-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 18px; }
.destination-card { display: block; color: var(--ink); text-decoration: none; }
.destination-card .discovery-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px 6px 20px 6px; background: #e9f3fb; }
.destination-card > span { display: block; margin: 12px 0 5px; color: var(--accent-dark); font-size: 11px; font-weight: 800; letter-spacing: .11em; }
.destination-card h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.destination-card p { margin: 7px 0 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; }
.guide-article { max-width: 920px; padding-top: 36px; padding-bottom: 90px; }
.guide-back { display: inline-block; margin-bottom: 22px; color: var(--accent-dark); font-weight: 700; text-decoration: none; }
.guide-hero { display: grid; grid-template-columns: minmax(280px, .9fr) 1.1fr; align-items: end; gap: 32px; }
.guide-hero .discovery-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 30px 8px 30px 8px; background: #e9f3fb; }
.guide-hero h1 { margin: 8px 0 14px; font-size: clamp(38px, 6vw, 64px); line-height: 1; letter-spacing: -.05em; }
.guide-hero p:not(.eyebrow) { color: var(--ink-soft); font-size: 17px; line-height: 1.58; }
.source-checked { margin: 14px 0 0; color: var(--ink-soft); font-size: 12px !important; }
.source-checked span { font-weight: 750; color: var(--ink); }
.image-credit { margin: 9px 0 46px; color: var(--ink-soft); font-size: 10px; }
.guide-article > section { margin: 42px 0; }
.guide-article > section h2 { margin-bottom: 12px; font-size: 26px; letter-spacing: -.03em; }
.guide-article > section p, .guide-article > section li { color: var(--ink-soft); line-height: 1.65; }
.guide-facts { display: grid; grid-template-columns: repeat(2, 1fr); border-block: 1px solid var(--line); }
.guide-facts div { display: grid; gap: 4px; padding: 18px 0; }
.guide-facts span { color: var(--ink-soft); font-size: 12px; }
.guide-facts strong { font-size: 17px; }
.guide-plan-options { display: flex; gap: 9px; margin: 24px 0 4px; }
.guide-plan-options a { background: #e7f5ff; color: #075f9e; border-radius: 8px 16px 8px 16px; padding: 9px 13px; font-weight: 800; text-decoration: none; }
.guide-plan-options a:hover, .guide-plan-options a:focus-visible { background: #ccecff; outline: 3px solid rgba(7, 95, 158, .22); outline-offset: 2px; }
.guide-app-link { margin: 20px 0 0; }
.guide-app-link a { display: inline-flex; gap: 8px; align-items: center; color: #075f9e; font-weight: 800; text-decoration: none; }
.guide-app-link a:hover, .guide-app-link a:focus-visible { text-decoration: underline; outline: none; }
.guide-story { max-width: 760px; }
.guide-story h2 { margin-top: 38px; }
.guide-story h3 { margin: 18px 0 6px; font-size: 17px; }
.guide-highlights { display: grid; gap: 10px; padding-left: 20px; }
.guide-sources { margin: 42px 0 16px; border-top: 1px solid var(--line); padding-top: 16px; color: var(--ink-soft); }
.guide-sources summary { cursor: pointer; color: var(--ink); font-weight: 750; }

/* Publication conversion and browsing ------------------------------------ */

.publication-cta { margin: 22px 0 0; }
.publication-cta a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--accent-dark);
  font-weight: 800;
  text-decoration: none;
}
.publication-cta a:hover, .publication-cta a:focus-visible { text-decoration: underline; }

.guide-budget-cta {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: 32px 0;
  padding: 24px;
  background: linear-gradient(135deg, #edf6ff, #f9fcff 72%);
  border: 1px solid #cfe1f6;
  border-radius: 18px 5px 18px 5px;
}
.guide-budget-cta .eyebrow { margin: 0 0 6px; }
.guide-budget-cta h2 { margin: 0 0 6px; font-size: 23px; letter-spacing: -.035em; }
.guide-budget-cta p:not(.eyebrow) { max-width: 58ch; margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.guide-budget-cta .btn { flex: none; white-space: nowrap; }

.related-reading { border-top: 1px solid var(--line); padding-top: 22px; }
.related-reading .eyebrow { margin: 0 0 10px; }
.related-reading > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 16px; }
.related-reading a { color: var(--accent-dark); font-weight: 700; line-height: 1.35; text-decoration: none; }
.related-reading a:hover, .related-reading a:focus-visible { text-decoration: underline; }

.footer-publication { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px 42px; }
.footer-publication strong { color: var(--ink); font-size: 17px; }
.footer-publication p { max-width: 54ch; margin: 6px 0 0; }
.footer-publication nav { display: flex; flex-wrap: wrap; align-content: start; gap: 8px 16px; }
.footer-publication nav a { color: var(--ink-soft); text-decoration: none; }
.footer-publication nav a:hover { color: var(--ink); text-decoration: underline; }
.footer-publication small { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--line); }

.site-search { min-height: 66vh; padding-bottom: 80px; }
.search-intro { padding-top: 72px; }
.search-intro h1 { max-width: 16ch; margin: 7px 0 12px; font-size: clamp(40px, 6vw, 66px); line-height: .98; letter-spacing: -.052em; }
.search-intro > p:not(.eyebrow):not(#site-search-status) { max-width: 60ch; color: var(--ink-soft); }
.search-intro label { display: block; margin-top: 28px; font-weight: 750; }
.search-intro input { display: block; width: min(680px, 100%); margin-top: 8px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 17px; }
.search-intro input:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 30%, transparent); border-color: var(--accent); }
#site-search-status { color: var(--ink-soft); font-size: 14px; }
.search-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.site-search-result { display: block; min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 14px 5px 14px 5px; background: var(--surface); text-decoration: none; transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.site-search-result:hover, .site-search-result:focus-visible { border-color: #a8c8ef; transform: translateY(-2px); box-shadow: var(--shadow); }
.site-search-result span { display: block; margin-bottom: 6px; color: var(--accent-dark); font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.site-search-result strong { display: block; color: var(--ink); line-height: 1.25; }
.site-search-result p { margin: 8px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.45; }
@media (max-width: 800px) {
  .destination-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-hero { grid-template-columns: 1fr; align-items: start; }
  .search-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .discovery-hero { padding: 48px 0 36px; }
  .discovery-hero h1 { font-size: 43px; }
  /* `1fr` keeps an image's HTML width attribute as the track's min-content
     width. Discovery heroes carry that width for layout stability, so use an
     explicit zero minimum on phones or one blocked remote image can widen the
     entire document past the viewport. */
  .destination-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .destination-card { min-width: 0; }
  .destination-card .discovery-image { display: block; max-width: 100%; }
  .guide-facts { grid-template-columns: 1fr; }
  .guide-budget-cta { display: grid; align-items: start; padding: 20px; }
  .guide-budget-cta .btn { width: 100%; justify-content: center; }
  .related-reading > div { grid-template-columns: 1fr; }
  .footer-publication { grid-template-columns: 1fr; }
  .search-intro { padding-top: 48px; }
  .search-results { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .app-console-head, .app-form, .app-main, .result-card { animation: none; }
  .product-mode label:has(input:checked) > span, .btn:active, .result-open:active { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .store-badge::after { animation: none; display: none; }
  .store-badge:hover { transform: none; }
}

/* Article pages */

.lede-doc {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 34px;
}

.doc h2 { color: var(--ink); }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc em { color: var(--ink); font-style: italic; }

.cta-card {
  margin-top: 48px;
  padding: 30px;
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.cta-card h3 { margin: 0 0 6px; font-size: 20px; letter-spacing: -0.01em; }
.cta-card p { margin: 0 0 18px; color: var(--ink-soft); }

a.article-card { text-decoration: none; display: block; }
a.article-card h3 { color: var(--ink); }
a.article-card p { margin-top: 8px; }

.discover-lede {
  max-width: 60ch;
  margin: 0;
  color: rgba(245, 249, 255, .78);
  font-size: 19px;
  line-height: 1.58;
}

.discover-list {
  width: min(100%, 820px);
  margin-inline: auto;
  border-top: 1px solid var(--line);
}

a.discover-card {
  display: block;
  padding: 28px 2px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: padding-inline 180ms ease, color 180ms ease;
}

a.discover-card:hover {
  padding-inline: 10px;
  color: var(--accent-dark);
}

a.discover-card h3 {
  max-width: 32ch;
  margin: 0;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.25;
  letter-spacing: -.018em;
}

a.discover-card p {
  max-width: 64ch;
  margin: 9px 0 0;
  color: var(--ink-soft);
  line-height: 1.58;
}

/* Photography. Decorative only, so it carries empty alt text and is not
   allowed to push the page around: fixed aspect ratios, lazy loading and a
   smaller file on narrow screens. */

.photo-strip {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 14px;
}

/* <picture> is the grid item now, so it has to carry the cell height and the
   <img> fills it. Without this the picture box collapses to the intrinsic
   image height and the row loses its shape. */
.photo-strip picture {
  display: block;
  height: 100%;
}

.photo-strip img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
  background: var(--canvas-tint);
}

.photo-wide {
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
  background: var(--canvas-tint);
  box-shadow: var(--shadow);
}

.photo-credit {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 10px 0 0;
}

.photo-credit a { color: inherit; }

@media (max-width: 720px) {
  .photo-strip { grid-template-columns: 1fr 1fr; }
  .photo-strip picture:first-child { grid-column: span 2; }
}


/* ------------------------------------------------------------------ web app

   The search screen. It is deliberately one column on a phone and two on a
   desktop: the form on the left stays visible while results build on the
   right, because changing one input and re-running is the normal way people
   use this. */

/* An author `display` rule outranks the user-agent rule behind the `hidden`
   attribute, so grid and flex rows below would stay visible while hidden. The
   date blocks are toggled by `hidden`, so this has to win. */
[hidden] { display: none !important; }

.app-shell {
  max-width: var(--content);
  margin: 0 auto;
  padding: 28px 24px 72px;
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

@media (max-width: 940px) {
  .app-shell { grid-template-columns: 1fr; gap: 24px; padding: 20px 20px 56px; }
}

.app-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px;
}

.app-form h1 {
  font-size: 21px;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
}

.app-form .form-lede {
  color: var(--ink-soft);
  font-size: 14.5px;
  margin: 0 0 20px;
}

.field { margin-bottom: 16px; }

.field > label,
.fieldset > legend {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-bottom: 6px;
  padding: 0;
}

.field .hint {
  display: block;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 5px;
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="search"],
select {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  appearance: none;
  -webkit-appearance: none;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23566a80' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px;
  padding-right: 32px;
}

input:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input[aria-invalid="true"] { border-color: #c0392b; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* The currency name has to survive "TRY — Türk Lirası", so the two halves
   share the row rather than squeezing the select into a code-sized box. */
.field-row.money { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 16px;
}

.choice-row {
  display: flex;
  gap: 8px;
  background: var(--canvas-tint);
  border-radius: var(--radius-sm);
  padding: 4px;
}

.choice-row label {
  flex: 1;
  text-align: center;
  font-size: 13.5px;
  padding: 7px 4px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--ink-soft);
  transition: background 0.15s ease, color 0.15s ease;
}

.choice-row input { position: absolute; opacity: 0; pointer-events: none; }

.choice-row input:checked + span {
  color: var(--ink);
  font-weight: 600;
}

.choice-row label:has(input:checked) {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(13, 27, 42, 0.12);
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
}

.check input { margin-top: 2px; flex: none; width: auto; }

.combo { position: relative; }

.combo-list {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
  max-height: 260px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 4px;
}

.combo-list[hidden] { display: none; }

.combo-list li {
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 14.5px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.combo-list li[aria-selected="true"],
.combo-list li:hover { background: var(--accent-soft); }

.combo-list .code {
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  font-size: 13px;
  flex: none;
}

.combo-list .empty { color: var(--ink-soft); cursor: default; }
.combo-list .empty:hover { background: none; }

.app-form button[type="submit"] {
  width: 100%;
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  margin-top: 4px;
}

.app-form button[type="submit"][disabled] {
  opacity: 0.6;
  cursor: progress;
}

.form-error {
  background: #fdeceb;
  border: 1px solid #f3c2bd;
  color: #8c2d22;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  margin: 0 0 16px;
}

@media (prefers-color-scheme: dark) {
  .form-error { background: rgba(192, 57, 43, 0.14); border-color: rgba(192, 57, 43, 0.4); color: #f0a49a; }
}

/* results ---------------------------------------------------------------- */

.results-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.results-head h2 { font-size: 19px; margin: 0; letter-spacing: -0.01em; }
.results-head p { margin: 0; color: var(--ink-soft); font-size: 14px; }

.result-list {
  display: grid;
  gap: 14px;
}

.result {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.result > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: baseline;
}

.result > summary::-webkit-details-marker { display: none; }
.result > summary:hover { background: var(--canvas-tint); }

.result .place-name {
  font-size: 17.5px;
  font-weight: 640;
  letter-spacing: -0.01em;
  margin: 0;
}

.result .total {
  font-size: 19px;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.result .total.unknown { font-size: 15px; font-weight: 500; color: var(--ink-soft); }

.result .sub {
  grid-column: 1;
  color: var(--ink-soft);
  font-size: 13.5px;
}

.result .sub-right {
  grid-column: 2;
  text-align: right;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.result .body {
  padding: 0 20px 18px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 2px;
}

.result .breakdown li { padding: 7px 0; }

.result .incomplete-note {
  font-size: 13px;
  color: var(--estimated);
  margin: 12px 0 0;
}

.result .observed {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 10px 0 0;
}

.placeholder {
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: 44px 28px;
  text-align: center;
  color: var(--ink-soft);
}

.placeholder h2 { color: var(--ink); font-size: 18px; margin: 0 0 8px; }
.placeholder p { margin: 0 auto; max-width: 46ch; font-size: 15px; }

/* Search recovery is intentionally more actionable than a generic empty
   state. It occupies the same stable result area as a successful response, so
   an intermittent pricing search does not make the page look as if it failed
   or jumped to an unrelated error screen. */
.search-recovery {
  min-height: 252px;
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 10px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--surface), var(--canvas-tint));
}

.search-recovery-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 24px;
  font-weight: 650;
  line-height: 1;
}

.search-recovery h2 {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 21px;
  letter-spacing: -.02em;
}

.search-recovery p {
  max-width: 54ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
}

.search-recovery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 10px;
}

.search-recovery-actions .btn {
  min-height: 40px;
  padding: 9px 13px;
  font-size: 13px;
}

.skeleton {
  height: 96px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--canvas-tint) 25%, var(--line) 50%, var(--canvas-tint) 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}

@keyframes shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  .hero-aircraft,
  .app-console-head::after { animation: none; }
  .hero-aircraft {
    opacity: .72;
    offset-distance: 62%;
    transform: scale(.92);
  }
  .app-console-head::after {
    left: 38%;
    opacity: .45;
    transform: none;
  }
}


/* --------------------------------------------------- web app: the screens

   The results list, one destination on its own, and the comparison are three
   views of the same page. The form is hidden rather than unmounted on the two
   detail views so a search is never lost by opening a result. */

body[data-view="detail"] .app-form,
body[data-view="compare"] .app-form { display: none; }

body[data-view="detail"] .app-shell,
body[data-view="compare"] .app-shell { grid-template-columns: minmax(0, 1fr); }

/* #results is a <section>, so the global `section { padding: 56px 0 }` lands
   on it and pushes the first screen down by an unexplained gap. */
.app-shell #results { padding: 0; }

/* The head has to share the reading column's width or the total floats off on
   its own, far from the table it belongs to. */
.detail-head, .detail-section { max-width: 70ch; }

.back-link {
  display: inline-block;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14.5px;
  margin-bottom: 18px;
}

.back-link:hover { color: var(--accent); }

/* results list ----------------------------------------------------------- */

.result-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.result-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }

.compare-tick {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-right: 1px solid var(--line);
  background: var(--canvas-tint);
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  flex: none;
  width: 82px;
}

.compare-tick input { width: auto; margin: 0; }

.result-open {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, .72fr) minmax(300px, 1.28fr);
  grid-template-rows: auto auto auto;
  gap: 5px 24px;
  align-items: center;
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
}

.result-open .place-name {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-size: 17px;
  font-weight: 640;
  letter-spacing: -0.01em;
}

.result-open .sub {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  color: var(--ink-soft);
  font-size: 13.5px;
}

.result-right {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 22px;
  border-left: 1px solid var(--line);
}

.result-costs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.result-cost {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--canvas-tint);
}

.result-cost-total {
  background: var(--accent-soft);
}

.result-cost-label {
  display: block;
  margin-bottom: 3px;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.result-cost-value {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-cost-total .result-cost-value { color: var(--accent-dark); }
.result-cost-value.unknown { color: var(--ink-soft); font-size: 12px; font-weight: 600; }

.result-decision {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 14px;
  color: var(--ink-soft);
  font-size: 12px;
}

.decision-booking::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #94a3b8;
}

.decision-booking.available { color: #047857; font-weight: 700; }
.decision-booking.available::before { background: var(--live); }

.result-review {
  grid-column: 1;
  grid-row: 3;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 700;
}

.budget-fit {
  font-size: 12px;
  font-weight: 640;
  line-height: 1.3;
}

.budget-fit-over { color: #9a3412; }

.result-alert {
  display: grid;
  gap: 3px;
  margin-bottom: 14px;
  padding: 13px 15px;
  border: 1px solid #f1d39a;
  border-radius: 11px;
  background: #fffbeb;
  color: #7c4a03;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .compare-tick { width: 62px; padding: 0 8px; }
  .result-open { grid-template-columns: 1fr; padding: 16px; }
  .result-right { grid-column: 1; grid-row: 4; margin-top: 8px; padding: 12px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .result-review { grid-row: 3; }
  .result-costs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-cost-total { grid-column: 1 / -1; }
}

.compare-bar {
  position: sticky;
  top: 76px;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.compare-bar .btn { box-shadow: var(--shadow-lift); }

/* detail screen ---------------------------------------------------------- */

.detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 20px;
  align-items: baseline;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}

.detail-head h2 {
  grid-column: 1;
  margin: 0;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.02em;
}

.detail-head .sub { grid-column: 1; margin: 0; color: var(--ink-soft); }

.detail-total {
  grid-column: 2;
  grid-row: 1 / span 2;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.total-label {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.detail-total .total {
  margin: 0;
  font-size: 24px;
  font-weight: 660;
  font-variant-numeric: tabular-nums;
}

.detail-total .total.unknown { font-size: 16px; font-weight: 500; color: var(--ink-soft); }

.detail-section {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  max-width: 70ch;
}

.detail-section:last-of-type { border-bottom: 0; }

.detail-section h3 {
  margin: 0 0 14px;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.detail-note { color: var(--ink-soft); font-size: 15px; margin: 0 0 10px; }

.detail-head, .detail-section, .product-card, .detail-nav, .guide-host { max-width: 980px; margin-inline: auto; }
.detail-nav { position: sticky; top: 72px; z-index: 12; display: flex; gap: 6px; margin-block: 18px 8px; padding: 7px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 8px 22px rgba(7,26,47,.07); backdrop-filter: blur(14px); }
.detail-nav a, .detail-nav button { flex: none; padding: 9px 13px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-soft); font: inherit; font-size: 13px; font-weight: 650; text-decoration: none; cursor: pointer; }
.detail-nav a:hover, .detail-nav button:hover { color: var(--accent-dark); background: var(--accent-soft); }
.product-card { margin-block: 18px; padding: 26px; border: 1px solid #d5e1ed; border-radius: 18px; background: var(--surface); box-shadow: 0 12px 34px rgba(7,26,47,.07); scroll-margin-top: 150px; }
.product-card > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.product-card > header h3 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.product-badge { flex: none; padding: 5px 9px; border-radius: 99px; background: #e8f8f2; color: #087554; font-size: 11px; font-weight: 750; }
.product-price { margin: 3px 0 14px; color: var(--ink); font-size: clamp(27px,4vw,38px); font-weight: 750; letter-spacing: -.035em; }
.product-route { margin: 0; color: var(--accent-dark); font-size: 18px; font-weight: 750; letter-spacing: .03em; }
.property-name { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.product-facts { max-width: 760px; }
.handoff-note, .affiliate-note, .method-intro, .guide-intro { max-width: 72ch; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.provider-button { margin-top: 7px; border: 0; cursor: pointer; }
.provider-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.affiliate-note { margin-bottom: 0; font-size: 12px; }
.method-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 18px; }
.method-item { display: flex; min-height: 142px; padding: 17px; flex-direction: column; border: 1px solid var(--line); border-radius: 13px; background: var(--canvas-tint); }
.method-item h4 { margin: 0 0 12px; font-size: 14px; }
.method-item strong { font-size: 20px; }
.method-item small { margin-top: auto; padding-top: 12px; color: var(--ink-soft); line-height: 1.4; }
.guide-host { scroll-margin-top: 150px; }
.attraction-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.attraction-card { padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--canvas-tint); }
.attraction-card h5 { margin: 0 0 6px; font-size: 15px; }
.attraction-card p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.48; }
.attraction-link {
  display: inline-flex;
  margin-top: 12px;
  color: var(--accent-dark);
  font-size: 12.5px;
  font-weight: 680;
  text-decoration: none;
}
.attraction-link::after { content: "\2197"; margin-left: 5px; }
.attraction-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.official-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.official-links a { padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--accent-dark); font-size: 13px; text-decoration: none; }

@media (max-width: 680px) {
  .product-mode { grid-template-columns: 1fr; }
  .product-mode label > span { min-height: 64px; }
  .detail-nav { top: 62px; margin-inline: -6px; }
  .product-card { padding: 20px; }
  .method-grid, .attraction-grid { grid-template-columns: 1fr; }
  .product-facts li { align-items: flex-start; flex-direction: column; gap: 3px; }
}

.fact-list, .plain-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  font-size: 15px;
}

.fact-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}

.fact-list .label, .plain-list li { color: var(--ink-soft); }
.plain-list li { padding: 4px 0 4px 18px; position: relative; }
.plain-list li::before {
  content: "—";
  position: absolute;
  left: 0;
}

.score-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.score-big { font-size: 34px; font-weight: 660; letter-spacing: -0.02em; }
.score-row span:last-child { color: var(--ink-soft); font-size: 14.5px; }

.bar-list { list-style: none; margin: 16px 0 0; padding: 0; }

.bar-list li {
  display: grid;
  grid-template-columns: minmax(0, 170px) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  font-size: 13.5px;
}

.bar-track {
  height: 6px;
  border-radius: 3px;
  background: var(--canvas-tint);
  overflow: hidden;
}

.bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

/* comparison ------------------------------------------------------------- */

.table-scroll { overflow-x: auto; margin: 8px 0 20px; }

.compare-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: 14.5px;
}

.compare-table th, .compare-table td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
}

.compare-table thead th {
  border-bottom: 2px solid var(--line);
  vertical-align: bottom;
}

.compare-table thead .place-name {
  display: block;
  font-size: 16px;
  font-weight: 640;
  letter-spacing: -0.01em;
}

.compare-table thead .sub {
  display: block;
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 12.5px;
  margin-top: 3px;
}

.compare-table tbody th {
  color: var(--ink-soft);
  font-weight: 500;
  white-space: nowrap;
}

.compare-table .total-row td, .compare-table .total-row th {
  background: var(--canvas-tint);
  font-weight: 600;
}

.compare-table .total-row .total { margin: 0; font-size: 16px; font-variant-numeric: tabular-nums; }
.compare-table .total-row .total.unknown { font-size: 13.5px; font-weight: 500; color: var(--ink-soft); }

/* ----------------------------------------------------- 2026 product polish

   The public site and the web app share a stronger product frame. The hero is
   deliberately a product story rather than a generic travel billboard; the
   workspace uses the available desktop width instead of leaving an empty
   canvas beside a phone-sized form. */

:root {
  --navy: #071a2f;
  --navy-2: #0b2949;
  --electric: #4aa8ff;
  --content: 1280px;
  --shadow: 0 14px 36px rgba(7, 26, 47, 0.08);
  --shadow-lift: 0 24px 70px rgba(7, 26, 47, 0.16);
}

.site-header .wrap { min-height: 78px; }
.brand { gap: 12px; font-size: 21px; font-weight: 720; letter-spacing: -0.025em; }
.brand-mark { width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 6px 16px rgba(22, 104, 220, .24); }
.header-nav { gap: 26px; font-weight: 540; }
.language-menu summary, select.lang-switch { min-height: 38px; padding-block: 7px; }

.hero-band {
  color: #f5f9ff;
  background:
    radial-gradient(56rem 40rem at 82% 10%, rgba(42, 138, 255, .30), transparent 62%),
    radial-gradient(42rem 30rem at 8% 90%, rgba(18, 187, 159, .15), transparent 60%),
    linear-gradient(135deg, var(--navy), #0a213c 55%, #0a3159);
  border-bottom: 0;
  position: relative;
  overflow: hidden;
}

.hero-flight-path {
  position: absolute;
  z-index: 0;
  top: 58px;
  right: max(-150px, calc((100vw - 1440px) / 2 - 90px));
  width: 760px;
  height: 280px;
  pointer-events: none;
  opacity: .58;
  filter: drop-shadow(0 0 14px rgba(78, 184, 255, .18));
}

.hero-flight-path > svg { width: 100%; height: 100%; overflow: visible; }
.flight-route-line { fill: none; stroke: rgba(117, 204, 255, .32); stroke-width: 1.5; stroke-dasharray: 4 10; vector-effect: non-scaling-stroke; }
.hero-flight-path circle { fill: #5fe0bd; stroke: rgba(255,255,255,.5); stroke-width: 2; }
.hero-aircraft {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  color: #f8fcff;
  offset-path: path('M54 232C178 228 202 72 366 86C524 99 548 213 714 54');
  offset-distance: 0%;
  offset-rotate: auto 18deg;
  animation: wholeaway-flight 14s cubic-bezier(.45,.04,.55,.96) infinite;
  filter: drop-shadow(0 4px 10px rgba(64, 184, 255, .62));
}
.hero-aircraft svg { display: block; width: 100%; height: 100%; fill: currentColor; }
@keyframes wholeaway-flight {
  0% { offset-distance: 0%; opacity: 0; transform: scale(.86); }
  7%, 88% { opacity: .95; }
  50% { transform: scale(1); }
  96%, 100% { offset-distance: 100%; opacity: 0; transform: scale(.88); }
}
.hero-band .hero { position: relative; z-index: 1; }

.hero { min-height: 700px; padding: 92px 0 102px; gap: 76px; grid-template-columns: minmax(0, 1.08fr) minmax(440px, .92fr); }
.hero-kicker, .form-step {
  margin: 0 0 18px;
  color: #71b8ff;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero h1 { font-size: clamp(46px, 5.4vw, 72px); max-width: 14ch; line-height: 1.01; font-weight: 750; }
.hero p.lede { color: #bbccdf; max-width: 54ch; font-size: clamp(18px, 2vw, 22px); }
.hero .btn-primary { background: #2e8cff; box-shadow: 0 16px 34px rgba(46, 140, 255, .30); }
.hero .btn-primary:hover { background: #55a4ff; }
.hero .btn-secondary { color: #f5f9ff; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); }
.hero .btn-secondary:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.42); }

.hero-proof { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; margin: 40px 0 0; padding: 24px 0 0; border-top: 1px solid rgba(255,255,255,.16); }
.hero-proof li { min-width: 0; padding-right: 13px; }
.hero-proof strong { display: block; color: #56b6ff; font-size: 11px; letter-spacing: .12em; margin-bottom: 4px; }
.hero-proof span { display: block; color: #d8e5f2; font-size: 13px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hero-figure.product-preview {
  position: relative;
  padding: 0 28px 24px;
  color: #eaf4ff;
  background: linear-gradient(160deg, rgba(15, 51, 87, .96), rgba(6, 24, 44, .98));
  border: 1px solid rgba(151, 199, 246, .24);
  border-radius: 22px;
  box-shadow: 0 36px 90px rgba(0,0,0,.34);
  transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
}
.product-preview::before { content: ""; position: absolute; inset: 18% -22% -20% 28%; z-index: -1; background: #1876d8; opacity: .18; filter: blur(60px); }
.preview-chrome { height: 52px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid rgba(255,255,255,.10); }
.preview-chrome span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.28); }
.preview-chrome b { margin-left: auto; color: #7995b2; font-size: 9px; letter-spacing: .14em; }
.preview-status { display: flex; justify-content: space-between; align-items: center; padding: 22px 0 14px; }
.preview-badge { color: #9eb6cd; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.live-pulse { color: #35d2a0; font-size: 13px; text-shadow: 0 0 12px rgba(53,210,160,.9); }
.preview-overline { margin: 0 0 2px; color: #6fa8dc; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.product-preview .place h3, .product-preview .total { font-size: 27px; font-weight: 720; }
.product-preview .meta, .product-preview .breakdown .label, .product-preview .src { color: #9fb5ca; }
.preview-meter { height: 4px; margin: 18px 0; border-radius: 2px; overflow: hidden; background: rgba(255,255,255,.09); }
.preview-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#2c91ff,#37d2a0); }
.product-preview .breakdown li { border-color: rgba(255,255,255,.10); padding: 12px 0; }
.product-preview figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.10); color: #7894ae; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.product-preview figcaption strong { color: #52d5aa; }

.photo-section { padding: 0 0 42px; background: var(--canvas); }
.photo-section .wrap { transform: translateY(-42px); margin-bottom: -42px; }
.photo-strip { gap: 18px; }
.photo-strip img { min-height: 260px; border: 5px solid var(--canvas); box-shadow: var(--shadow-lift); }

/* Web app workspace */
body:has(.app-shell) { background: #edf3f9; }
.app-shell { max-width: 1380px; padding: 28px 28px 84px; grid-template-columns: minmax(420px, .82fr) minmax(560px, 1.18fr); gap: 24px; }
.app-console-head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: 30px;
  padding: 34px 38px 0;
  border-radius: 22px;
  color: #f2f7fd;
  background: radial-gradient(45rem 24rem at 80% 0%, rgba(45,141,255,.28), transparent 64%), linear-gradient(135deg, var(--navy), var(--navy-2));
  box-shadow: 0 20px 52px rgba(7,26,47,.18);
  overflow: hidden;
  position: relative;
}
.app-console-head::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: -26%;
  bottom: 0;
  width: 26%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #61c8ff 46%, #54e2bd 72%, transparent);
  box-shadow: 0 0 18px rgba(78, 199, 255, .8);
  animation: workspace-route-sweep 8s ease-in-out infinite;
  pointer-events: none;
}
.app-console-head > * { position: relative; z-index: 1; }
@keyframes workspace-route-sweep {
  0%, 12% { transform: translateX(0); opacity: 0; }
  22% { opacity: .9; }
  78% { opacity: .9; }
  90%, 100% { transform: translateX(485%); opacity: 0; }
}
.app-console-head h1 { max-width: 19ch; margin: 0; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.04; letter-spacing: -.035em; }
.app-console-head > div:first-child > p:last-child { max-width: 58ch; margin: 14px 0 30px; color: #b7c9db; font-size: 16px; }
.workspace-status { align-self: center; justify-self: end; max-width: 310px; padding: 18px 20px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
.workspace-status span { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.workspace-status small { display: block; color: #9eb4c9; line-height: 1.45; margin-top: 8px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #7c9ab5; }
.workspace-steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.11); }
.workspace-steps a { display: flex; align-items: center; gap: 10px; padding: 17px 4px 18px; color: #8fa8c0; text-decoration: none; border-bottom: 3px solid transparent; }
.workspace-steps a[aria-current="step"] { color: #fff; border-bottom-color: #49a9ff; }
.workspace-steps b { color: #5aaeff; font-size: 11px; letter-spacing: .10em; }
.workspace-steps span { font-size: 13px; font-weight: 650; }

.app-form, .app-main { background: var(--surface); border: 1px solid #d5e1ed; border-radius: 18px; box-shadow: 0 10px 30px rgba(7,26,47,.06); }
.app-form { padding: 30px; }
.app-form h2 { margin: 0 0 5px; font-size: 27px; letter-spacing: -.025em; }
.app-form .form-lede { margin-bottom: 27px; }
.product-mode { border: 0; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.product-mode legend { grid-column: 1 / -1; margin-bottom: 9px; color: var(--ink); font-size: 13px; font-weight: 700; }
.product-mode label { position: relative; min-width: 0; cursor: pointer; }
.product-mode input { position: absolute; opacity: 0; pointer-events: none; }
.product-mode label > span { display: flex; min-height: 78px; padding: 13px; flex-direction: column; justify-content: center; border: 1px solid #d5e1ed; border-radius: 12px; background: #fbfdff; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.product-mode b { font-size: 13px; line-height: 1.25; }
.product-mode small { margin-top: 4px; color: var(--ink-soft); font-size: 11.5px; line-height: 1.35; }
.product-mode label:has(input:checked) > span { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent); }
.form-section-title { margin: 28px -30px 17px; padding: 12px 30px 10px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 11px; letter-spacing: .11em; text-transform: uppercase; }
.form-section-title:first-of-type { margin-top: 20px; }
.field { margin-bottom: 19px; }
.field > label, .fieldset > legend { font-size: 13.5px; }
input[type="text"], input[type="number"], input[type="date"], input[type="search"], select { min-height: 48px; background-color: #fbfdff; border-color: #cfddea; }
.advanced-options { margin: 22px 0 12px; border: 1px solid #d9e5f0; border-radius: 12px; background: #fbfdff; }
.advanced-options > summary { cursor: pointer; list-style: none; padding: 15px 17px; color: var(--ink); font-size: 13.5px; font-weight: 700; }
.advanced-options > summary::-webkit-details-marker { display: none; }
.advanced-options > summary::after { content: "+"; float: right; color: var(--accent); font-size: 18px; line-height: 1; }
.advanced-options[open] > summary::after { content: "−"; }
.advanced-options > p { margin: -4px 17px 16px; color: var(--ink-soft); font-size: 12px; line-height: 1.45; }
.advanced-options > .field, .advanced-options > .check { margin-left: 17px; margin-right: 17px; }
.advanced-options > :last-child { margin-bottom: 17px; }
.choice-row { padding: 5px; border: 1px solid #d9e5f0; }
.choice-row label { padding: 9px 5px; }
.app-form button[type="submit"] { min-height: 56px; margin-top: 10px; }
.app-main { min-height: 440px; padding: 24px; }
.app-main-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: -24px -24px 24px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.app-main-toolbar .form-step { display: block; margin: 0 0 3px; color: var(--accent); font-size: 9px; }
.app-main-toolbar strong { font-size: 17px; }
.secure-note { max-width: 270px; color: var(--ink-soft); font-size: 12px; text-align: right; }
.secure-note::before { content: "✓"; margin-right: 6px; color: var(--live); font-weight: 800; }
.placeholder { min-height: 220px; display: grid; place-content: center; padding: 34px; border: 0; background: linear-gradient(145deg,#f8fbff,#eff6fc); }
.placeholder::before { content: ""; width: 86px; height: 58px; margin: 0 auto 20px; border: 1px solid #bcd4ea; border-radius: 10px; background: linear-gradient(135deg,transparent 48%,#2f8de9 49%,#2f8de9 51%,transparent 52%), radial-gradient(circle at 22% 66%,#1c76d2 0 4px,transparent 5px), radial-gradient(circle at 78% 34%,#2ac89a 0 4px,transparent 5px); box-shadow: 13px 13px 0 -6px #dceaf7, -13px -11px 0 -7px #e2edf7; }
.placeholder h2 { font-size: 21px; letter-spacing: -.02em; }
.result-list { gap: 16px; }
.result-card { border-radius: 14px; }
.result-open { min-height: 92px; padding: 20px 22px; }
.result-open .place-name { font-size: 19px; }

body[data-view="detail"] .app-main, body[data-view="compare"] .app-main { padding: 34px; }
body[data-view="detail"] .app-shell, body[data-view="compare"] .app-shell { grid-template-columns: 1fr; }
body[data-view="detail"] .app-main, body[data-view="compare"] .app-main { max-width: 1000px; width: 100%; margin: 0 auto; }

@media (max-width: 1040px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-figure { display: block; max-width: 660px; transform: none; }
  .app-shell { grid-template-columns: 1fr; }
  .app-main { min-height: 400px; }
}

@media (max-width: 700px) {
  .site-header .wrap { min-height: 66px; }
  .brand { font-size: 18px; }
  .brand-mark { width: 34px; height: 34px; }
  .hero { padding: 64px 0 74px; gap: 42px; }
  .hero-flight-path {
    top: 92px;
    right: -440px;
    width: 720px;
    height: 265px;
    opacity: .36;
  }
  .hero h1 { font-size: clamp(40px, 12vw, 58px); }
  .hero-proof { grid-template-columns: 1fr 1fr; gap: 18px; }
  .product-preview { padding-inline: 20px; }
  .photo-section .wrap { transform: none; margin-bottom: 0; padding-top: 22px; }
  .app-shell { padding: 14px 12px 54px; }
  .app-console-head { padding: 26px 22px 0; grid-template-columns: 1fr; }
  .workspace-status { justify-self: stretch; max-width: none; }
  .workspace-steps a { flex-direction: column; align-items: flex-start; gap: 1px; }
  .app-form { padding: 23px 20px; }
  .form-section-title { margin-inline: -20px; padding-inline: 20px; }
  .app-main { min-height: 340px; padding: 18px; }
  .app-main-toolbar { margin: -18px -18px 18px; padding: 16px 18px; align-items: flex-start; }
  .secure-note { display: none; }
  .placeholder { min-height: 190px; padding: 26px 18px; }
  .search-recovery { min-height: 0; padding: 25px 20px; }
  .search-recovery-actions { display: grid; width: 100%; grid-template-columns: 1fr; }
  .search-recovery-actions .btn { width: 100%; }
}

/* Trip review ------------------------------------------------------------
   This view is a decision summary, not a long report. Live offers, booking
   availability and planning-only amounts stay visually separate. */

body[data-view="detail"] .app-console-head { display: none; }
body[data-view="detail"] .app-shell { max-width: 1240px; padding-top: 24px; }
body[data-view="detail"] .app-main {
  max-width: 1120px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body[data-view="detail"] .app-main-toolbar { display: none; }
body[data-view="detail"] #results { display: grid; gap: 16px; }
body[data-view="detail"] .back-link { width: max-content; margin: 0 0 2px; }

.trip-overview,
.product-card,
.ranking-details {
  width: 100%;
  max-width: none;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(13, 27, 42, .05);
}

.trip-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  gap: 22px 38px;
  padding: 30px;
  overflow: hidden;
  position: relative;
  scroll-margin-top: 92px;
}
.trip-overview::after {
  content: "";
  position: absolute;
  inset: auto -80px -100px auto;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
  pointer-events: none;
}
.trip-identity, .overview-pricing, .overview-quick { position: relative; z-index: 1; }
.trip-identity .eyebrow {
  margin: 0 0 5px;
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.trip-identity h2 { margin: 0; font-size: clamp(25px, 3vw, 36px); line-height: 1.14; letter-spacing: -.035em; }
.trip-meta { margin: 9px 0 15px; color: var(--ink-soft); font-size: 15px; }
.availability-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e7f7f1;
  color: #087554;
  font-size: 12px;
  font-weight: 720;
}
.availability-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.overview-pricing { align-self: center; padding-left: 24px; border-left: 1px solid var(--line); }
.overview-pricing > span { display: block; }
.overview-amount { display: block; margin: 4px 0 7px; font-size: clamp(27px, 4vw, 38px); line-height: 1; letter-spacing: -.035em; }
.overview-pricing p { margin: 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.45; }
.overview-quick { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.quick-cost { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 14px; border-radius: 11px; background: var(--canvas-tint); }
.quick-cost > span:first-child { color: var(--ink-soft); font-size: 13px; }
.quick-cost > strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.quick-cost .src { grid-column: 1 / -1; width: max-content; margin: 2px 0 0; }

.detail-nav {
  position: sticky;
  top: 76px;
  z-index: 12;
  max-width: none;
  margin: 0;
  padding: 6px;
  gap: 4px;
  border-radius: 13px;
  box-shadow: 0 8px 22px rgba(13, 27, 42, .06);
}
.detail-nav a, .detail-nav button { padding: 8px 12px; font-size: 12.5px; }

.product-card { padding: 26px 28px; scroll-margin-top: 140px; }
.product-card > header { margin-bottom: 16px; }
.product-card > header h3 { font-size: 19px; }
.product-badge { font-size: 10.5px; }
.travel-product { display: grid; gap: 18px; }
.product-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.product-route { padding-top: 5px; font-size: 22px; letter-spacing: .025em; }
.property-name { max-width: 25ch; padding-top: 3px; font-size: 21px; }
.offer-price-block { display: grid; grid-template-columns: auto auto; justify-items: end; align-items: center; gap: 2px 8px; text-align: right; }
.offer-price-block > strong { grid-column: 1 / -1; font-size: 26px; line-height: 1.1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.offer-price-block > span:not(.src) { color: var(--ink-soft); font-size: 11.5px; }
.offer-price-block .src { margin: 0; }

.itinerary-legs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.itinerary-leg { display: grid; grid-template-columns: 1fr auto; gap: 3px 14px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas-tint); }
.leg-name { grid-column: 1 / -1; color: var(--ink-soft); font-size: 11px; font-weight: 720; letter-spacing: .07em; text-transform: uppercase; }
.itinerary-leg strong { font-size: 16px; }
.leg-time { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.product-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; max-width: none; margin: 0; }
.product-facts li { padding: 9px 0; }

.handoff-panel { display: grid; grid-template-columns: 1fr; gap: 3px; padding: 14px 16px; border-radius: 12px; }
.handoff-unavailable { border: 1px solid #eadcc7; background: #fffaf2; }
.handoff-panel strong { font-size: 13.5px; }
.handoff-panel p { max-width: 82ch; margin: 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.5; }
.handoff-state { color: var(--estimated); font-size: 10.5px; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; }
.handoff-available { margin: 0; color: var(--live); }
.provider-actions { margin-top: -10px; }

.budget-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); gap: 18px 26px; }
.budget-card > header { grid-column: 1 / -1; }
.budget-rows { grid-column: 1; }
.budget-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.budget-row > span:first-child { color: var(--ink-soft); font-size: 14px; }
.budget-row strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.budget-row .src { margin: 0; }
.budget-total-row { grid-column: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0 0; }
.budget-total-row span { font-weight: 700; }
.budget-total-row strong { font-size: 19px; }
.reserve-box { grid-column: 2; grid-row: 2 / span 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 17px; border: 1px solid #d9e5f0; border-radius: 13px; background: var(--canvas-tint); }
.reserve-box > div > strong { font-size: 13.5px; }
.reserve-box p { margin: 5px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.reserve-value { white-space: nowrap; font-size: 17px; }
.budget-pending { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 16px; border-radius: 12px; background: #f5f7fa; }
.budget-pending > strong { font-size: 14px; }
.budget-pending p { flex-basis: 100%; margin: 0; color: var(--ink-soft); font-size: 12.5px; }
.missing-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.missing-chips span { padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-soft); font-size: 11px; }
.planned-total { margin-left: auto; font-size: 20px; font-weight: 760; }
.visa-note { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); font-size: 11.5px; line-height: 1.5; }

.planning-card .method-intro { margin-top: -5px; }
.planning-card .method-grid { margin-top: 10px; }
.planning-card .method-item { min-height: 118px; }
.compact-empty { margin: 0; padding: 15px 16px; border-radius: 11px; background: var(--canvas-tint); color: var(--ink-soft); font-size: 13px; }
.guide-host { width: 100%; max-width: none; margin: 0; }
.guide-empty { min-height: 0; }
.guide-empty > p { margin: 0 0 8px; color: var(--ink-soft); font-size: 13.5px; }
.text-link { color: var(--accent-dark); font-size: 13px; font-weight: 700; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.ranking-details { overflow: hidden; }
.ranking-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 22px; cursor: pointer; list-style: none; }
.ranking-details > summary::-webkit-details-marker { display: none; }
.ranking-details > summary::after { content: "+"; order: 3; color: var(--ink-soft); font-size: 20px; }
.ranking-details[open] > summary::after { content: "−"; }
.ranking-details > summary strong { font-size: 14px; }
.ranking-details > summary span { margin-left: auto; color: var(--ink-soft); font-size: 13px; }
.ranking-content { padding: 0 22px 22px; border-top: 1px solid var(--line); }
.ranking-content .score-row { margin-top: 18px; }

@media (max-width: 760px) {
  body[data-view="detail"] .app-shell { padding: 14px 10px 48px; }
  .trip-overview { grid-template-columns: 1fr; padding: 22px 20px; gap: 18px; }
  .overview-pricing { padding: 16px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .overview-quick { grid-template-columns: 1fr; }
  .detail-nav { top: 66px; margin: 0; }
  .product-card { padding: 21px 19px; }
  .product-topline { align-items: flex-start; flex-direction: column; gap: 12px; }
  .offer-price-block { justify-items: start; text-align: left; }
  .itinerary-legs, .product-facts, .budget-card { grid-template-columns: 1fr; }
  .offer-price-block > strong { font-size: 24px; }
  .product-facts li { flex-direction: row; align-items: center; }
  .budget-card > header, .budget-rows, .budget-total-row, .reserve-box, .budget-pending, .visa-note { grid-column: 1; grid-row: auto; }
  .reserve-box { flex-direction: column; gap: 8px; }
  .bar-list li { grid-template-columns: minmax(0, 130px) minmax(0, 1fr); }
}

@media (prefers-color-scheme: dark) {
  .availability-chip { background: #12372f; color: #71d8b8; }
  .handoff-unavailable { border-color: #4a3b27; background: #2b2419; }
  .budget-pending { background: #111c29; }
}

/* Keep these responsive overrides last: the product-detail rules above are
   intentionally later than the shared site styles. */
@media (max-width: 700px) {
  .site-header .wrap { min-height: 64px; }
  .brand { font-size: 19px; }
  select.lang-switch { min-height: 44px; }
  .app-shell { gap: 14px; padding: 12px 10px 46px; }
  .app-console-head {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px 20px 0;
    border-radius: 19px;
  }
  .app-console-head .hero-kicker { margin-bottom: 7px; font-size: 10px; }
  .app-console-head h1 { max-width: 18ch; font-size: clamp(25px, 7.6vw, 31px); line-height: 1.08; }
  .app-console-head > div:first-child > p:last-child { margin: 10px 0 2px; font-size: 13.5px; line-height: 1.48; }
  .workspace-status { justify-self: stretch; max-width: none; padding: 10px 12px; border-radius: 11px; }
  .workspace-status span { font-size: 12px; }
  .workspace-status small { display: none; }
  .workspace-steps a { min-width: 0; padding: 11px 4px 12px; gap: 2px; }
  .workspace-steps b { font-size: 9px; }
  .workspace-steps span { max-width: 100%; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-form { padding: 21px 19px 24px; border-radius: 17px; }
  .app-form h2 { font-size: 25px; }
  .app-form .form-lede { margin-bottom: 20px; font-size: 13.5px; }
  .product-mode { gap: 7px; margin-bottom: 18px; }
  .product-mode legend { margin-bottom: 6px; }
  .product-mode label > span { min-height: 52px; padding: 10px 11px; }
  .product-mode b { font-size: 12.5px; }
  .product-mode small { display: none; }
  .form-section-title { margin: 23px -19px 15px; padding: 11px 19px 9px; font-size: 9.5px; letter-spacing: .13em; }
  .field { margin-bottom: 16px; }
  .choice-row label { min-height: 44px; display: grid; place-items: center; line-height: 1.25; }
  .app-form button[type="submit"] { width: 100%; min-height: 54px; border-radius: 13px; }
  .app-main { min-height: 260px; padding: 16px; border-radius: 17px; }
  .app-main-toolbar { margin: -16px -16px 16px; padding: 14px 16px; }
  .app-main-toolbar strong { font-size: 15px; }
  .placeholder { min-height: 160px; padding: 24px 17px; border-radius: 13px; }
  .placeholder::before { transform: scale(.82); margin-bottom: 12px; }
  .result-list { gap: 12px; }
}

@media (max-width: 520px) {
  .result-card { flex-direction: column; }
  .compare-tick {
    width: auto;
    min-height: 44px;
    padding: 8px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    flex-direction: row;
    justify-content: flex-start;
  }
  .result-open { min-height: 0; padding: 15px; }
  .result-right { margin-top: 6px; padding-top: 11px; }
  .result-costs { grid-template-columns: 1fr; }
  .result-cost-total { grid-column: 1; }
  .result-decision { flex-direction: column; }
  body[data-view="detail"] .app-shell { padding-inline: 8px; }
  .trip-overview { padding: 20px 18px; border-radius: 16px; }
  .detail-nav { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .detail-nav::-webkit-scrollbar { display: none; }
  .detail-nav a, .detail-nav button { flex: none; }
  .product-card { padding: 19px 17px; border-radius: 16px; }
  .budget-row { grid-template-columns: minmax(0, 1fr) auto; }
  .budget-row .src { grid-column: 1 / -1; }
  .ranking-details > summary span { display: none; }
}