/* James Travel Planner — Marketing page styles */

/* ── Hero visual mockup ─────────────────────────────────────────── */
.hero-visual {
  margin-top: 64px;
  border: 1px solid var(--border-default);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface-1);
  box-shadow: var(--shadow-xl);
  position: relative;
}
.hv-chrome {
  height: 32px; background: var(--surface-2);
  display: flex; align-items: center; padding: 0 12px; gap: 6px;
  border-bottom: 1px solid var(--border-subtle);
}
.hv-chrome .d { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.hv-chrome .d--red   { background: #f2635a; }
.hv-chrome .d--amber { background: #f5b83a; }
.hv-chrome .d--green { background: #4cb857; }
.hv-chrome .u {
  margin-left: 14px; padding: 2px 10px;
  background: white; border-radius: 4px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-tertiary); border: 1px solid var(--border-subtle);
}
/* App nav bar */
.hv-nav {
  height: 44px; background: var(--surface-1); border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; padding: 0 16px; gap: 0;
}
.hv-brand { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; margin-right: 20px; white-space: nowrap; }
.hv-nav-links { display: flex; gap: 2px; flex: 1; }
.hv-nav-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.hv-nav-link {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500;
  color: var(--text-secondary); white-space: nowrap; cursor: default;
}
.hv-nav-link--active { background: var(--brand-50); color: var(--brand-600); }

/* Body: form panel + results */
.hv-body { display: grid; grid-template-columns: 200px 1fr; height: 476px; }
.hv-form-panel {
  background: var(--surface-1); border-right: 1px solid var(--border-subtle);
  padding: 16px; overflow: hidden;
}
.hv-results { background: var(--surface-0); padding: 20px; overflow: hidden; }

/* Form panel micro-components */
.hv-label { font-size: 10px; color: var(--text-tertiary); margin-bottom: 3px; font-weight: 500; }
.hv-input {
  font-size: 11px; color: var(--text-primary);
  background: var(--surface-0); border: 1px solid var(--border-subtle);
  border-radius: 5px; padding: 4px 7px;
}
.hv-segment {
  flex: 1; text-align: center; font-size: 10px; font-weight: 500;
  padding: 4px 6px; border-radius: 5px; border: 1px solid var(--border-subtle);
  color: var(--text-secondary); cursor: default;
}
.hv-segment--active { background: var(--brand-500); color: white; border-color: var(--brand-500); }

/* ── Feature grid ────────────────────────────────────────────────── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.feature {
  padding: 28px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-1);
  display: flex; flex-direction: column; gap: 16px;
  min-height: 260px;
  position: relative; overflow: hidden;
}
.feature .ico {
  width: 36px; height: 36px;
  background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand-600);
}
.feature h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.feature p  { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.55; }
.feature__detail {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-tertiary); padding: 10px 12px;
  background: var(--surface-inset); border-radius: 6px;
  margin-top: auto;
}

/* ── How it works steps ─────────────────────────────────────────── */
.step-card {
  padding: 24px;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 12px;
}
.step-card__num {
  font-family: var(--font-mono); font-size: 14px;
  font-weight: 500; color: var(--brand-500);
}
.step-card__title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.step-card__desc  { font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin: 0; }

/* ── Pricing preview cards ──────────────────────────────────────── */
.price-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.price-card {
  padding: 20px; background: var(--surface-1);
  border: 1px solid var(--border-subtle); border-radius: 12px;
  display: flex; flex-direction: column; gap: 12px;
}
.price-card--hl {
  border-color: var(--brand-500);
  background: linear-gradient(180deg, var(--brand-50), var(--surface-1) 40%);
}
.price-card__name  { font-size: 15px; font-weight: 600; }
.price-card__amt   { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.price-card__per   { font-size: 12px; color: var(--text-tertiary); margin-left: 4px; }
.tick-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.tick-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-secondary); }
.tick-list li .k { color: var(--accent-500); flex-shrink: 0; margin-top: 2px; }

/* ── CTA banner ─────────────────────────────────────────────────── */
.cta-banner {
  border-radius: 16px; padding: 60px 56px;
  background: linear-gradient(135deg, var(--brand-800), var(--brand-600) 60%, var(--accent-600));
  color: white;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; position: relative; overflow: hidden;
}
.cta-banner__heading {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.05;
  margin: 0 0 12px;
}
.cta-banner__lede { font-size: 16px; color: rgba(255,255,255,0.8); line-height: 1.5; margin: 0; }
.cta-banner__actions { display: flex; gap: 12px; flex-shrink: 0; }

/* ── Full pricing page ──────────────────────────────────────────── */
.pr-hero { padding: 60px 20px 40px; max-width: 1280px; margin: 0 auto; text-align: center; }
.pr-hero h1 { font-size: clamp(48px, 6vw, 72px); font-weight: 600; letter-spacing: -0.03em; margin: 0 0 16px; line-height: 1; }
.pr-hero p  { font-size: 18px; color: var(--text-secondary); max-width: 560px; margin: 0 auto 28px; }

.pr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1280px; margin: 0 auto; padding: 0 40px 40px; }
.pr-card {
  background: var(--surface-1); border: 1px solid var(--border-subtle);
  border-radius: 14px; padding: 28px; display: flex; flex-direction: column;
  gap: 18px; position: relative;
}
.pr-card--hl { border-color: var(--brand-500); box-shadow: 0 0 0 4px var(--brand-50); }
.pr-card__name  { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.pr-card__price { display: flex; align-items: baseline; gap: 4px; }
.pr-card__price b { font-size: 42px; font-weight: 600; letter-spacing: -0.02em; }
.pr-card__price span { font-size: 13px; color: var(--text-tertiary); }
.pr-card__desc  { font-size: 13px; color: var(--text-secondary); line-height: 1.5; min-height: 40px; }
.pop-chip {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  padding: 3px 10px; background: var(--brand-500); color: white;
  font-size: 11px; font-family: var(--font-mono);
  letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px;
}

/* ── Comparison table ───────────────────────────────────────────── */
.cmp-tbl { max-width: 1100px; margin: 0 auto; padding: 40px; }
.cmp-tbl h2 { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 24px; }
.cmp-tbl table { width: 100%; border-collapse: collapse; }
.cmp-tbl th, .cmp-tbl td { padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; text-align: left; }
.cmp-tbl th { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); font-weight: 500; }
.cmp-tbl td.center, .cmp-tbl th.center { text-align: center; }
.cmp-tbl td.feat { color: var(--text-primary); font-weight: 500; }
.cmp-tbl tr.section td { background: var(--surface-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }

/* ── FAQ ────────────────────────────────────────────────────────── */
.faq-block { max-width: 820px; margin: 0 auto; padding: 60px 40px 100px; }
.faq-block h2 { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; text-align: center; margin: 0 0 32px; }
.faq-item { padding: 18px 0; border-bottom: 1px solid var(--border-subtle); }
.faq-item h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.faq-item p  { margin: 0; font-size: 14px; color: var(--text-secondary); line-height: 1.55; }

/* ── Onboarding ─────────────────────────────────────────────────── */
.onb { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.onb-left  { padding: 40px 60px; display: flex; flex-direction: column; }
.onb-right {
  background: linear-gradient(135deg, var(--brand-800), var(--brand-600) 55%, var(--accent-600));
  color: white; padding: 40px 60px; display: flex; flex-direction: column;
  justify-content: space-between; position: relative; overflow: hidden;
}
.onb-right::before {
  content: ""; position: absolute; inset: -20%;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15), transparent 40%);
}
.onb-top   { display: flex; justify-content: space-between; align-items: center; margin-bottom: 48px; }
.onb-steps { display: flex; gap: 6px; align-items: center; }
.onb-dot   { width: 8px; height: 8px; border-radius: 50%; background: var(--border-default); transition: all 200ms; }
.onb-dot--active { background: var(--brand-500); width: 28px; border-radius: 4px; }
.onb-dot--done   { background: var(--accent-500); }
.onb-form  { max-width: 440px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.onb-form .eyebrow { margin-bottom: 8px; }
.onb-form h1 { font-size: 36px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 10px; line-height: 1.1; }
.onb-form .lede { color: var(--text-secondary); margin: 0 0 28px; font-size: 15px; line-height: 1.5; }
.onb-nav   { display: flex; justify-content: space-between; margin-top: 36px; }
.plan-tile {
  padding: 16px; border: 1.5px solid var(--border-subtle); border-radius: 10px;
  cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  background: var(--surface-1); transition: all 150ms;
}
.plan-tile:hover { border-color: var(--border-strong); }
.plan-tile--active { border-color: var(--brand-500); background: var(--brand-50); box-shadow: 0 0 0 3px var(--brand-100); }
.vibe-tile {
  padding: 14px; border: 1.5px solid var(--border-subtle); border-radius: 10px;
  cursor: pointer; display: flex; flex-direction: column; gap: 6px; background: var(--surface-1);
}
.vibe-tile--active { border-color: var(--brand-500); background: var(--brand-50); }
.vibe-tile .ico { width: 32px; height: 32px; border-radius: 8px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.vibe-tile--active .ico { background: var(--brand-100); color: var(--brand-600); }

/* ── Share view ─────────────────────────────────────────────────── */
.sh-banner {
  background: var(--brand-50); border-bottom: 1px solid var(--brand-100);
  padding: 10px 24px; text-align: center; font-size: 13px; color: var(--brand-700);
}
.sh-hero   { position: relative; overflow: hidden; }
.sh-hero .sh-img { height: 320px; }
.sh-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(7,30,40,0.6)); }
.sh-hero-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 48px; color: white;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
}
.sh-hero-body h1 { font-size: 48px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 10px; line-height: 1; color: white; }
.sh-hero-meta   { display: flex; gap: 18px; color: rgba(255,255,255,0.85); font-size: 14px; }
.sh-wrap, .share-layout {
  max-width: 1200px; margin: 0 auto; padding: 40px 40px 100px;
  display: grid; grid-template-columns: 1fr 320px; gap: 40px;
}
.share-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.share-overview-card {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 20px;
}
.share-cta-box {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}
.share-cta-box p {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--text-secondary);
}
.sh-day-box { margin-bottom: 28px; }
.sh-day-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 8px; }
.sh-tl-item { display: grid; grid-template-columns: 60px 1fr auto; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border-subtle); align-items: start; }
.sh-tl-item:first-child { border-top: none; }
.sh-aux-card { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 20px; margin-bottom: 14px; }

/* ── My Trips account page ──────────────────────────────────────── */
.acc-wrap { max-width: 1200px; margin: 0 auto; padding: 40px 40px 100px; display: grid; grid-template-columns: 220px 1fr; gap: 40px; }
.acc-side  { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 96px; align-self: flex-start; }
.acc-head  { padding-bottom: 28px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 28px; display: flex; justify-content: space-between; align-items: center; }
.acc-head h1 { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.plan-quota-card {
  background: linear-gradient(135deg, var(--brand-800), var(--brand-600));
  color: white; border-radius: 14px; padding: 28px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 32px; margin-bottom: 24px;
}
.plan-quota-card .meter { background: rgba(255,255,255,0.15); }
.plan-quota-card .meter-bar { background: var(--accent-300); }
.trip-row {
  display: flex;
  flex-direction: column;
  gap: 20px; padding: 16px; background: var(--surface-1);
  border: 1px solid var(--border-subtle); border-radius: 12px;
  align-items: center; margin-bottom: 10px;
  transition: border-color 150ms, transform 150ms;
}
.trip-row:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.trip-thumb { width: 88px; height: 72px; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, var(--brand-100), var(--accent-100)); }
.stat-card  { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 16px; }
.stat-card__n { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.stat-card__l { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }

/* ── AI Ideas page ──────────────────────────────────────────────── */
.ai-wrap { display: grid; grid-template-columns: 380px 1fr 320px; min-height: calc(100vh - 56px); }
.ai-form    { background: var(--surface-1); border-right: 1px solid var(--border-subtle); padding: 28px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; }
.ai-results { padding: 28px 32px; background: var(--surface-0); overflow-y: auto; }
.ai-chat    { background: var(--surface-1); border-left: 1px solid var(--border-subtle); padding: 20px; display: flex; flex-direction: column; }

.sug-card {
  background: var(--surface-1); border: 1px solid var(--border-subtle);
  border-radius: 14px; overflow: hidden; display: flex;
  transition: border-color 150ms;
}
.sug-card:hover { border-color: var(--border-strong); }
.sug-card--selected { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.sug-photo { width: 220px; flex-shrink: 0; position: relative; }
.sug-body  { flex: 1; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sug-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.sug-region { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
.sug-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.sug-meta .lbl { font-size: 11px; color: var(--text-tertiary); }
.sug-meta .val { font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.hili { display: flex; gap: 6px; flex-wrap: wrap; }
.hili span { padding: 3px 9px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 999px; font-size: 12px; color: var(--text-secondary); }
.cheaper-tip { background: var(--sand-50); border: 1px solid var(--sand-100); padding: 8px 12px; border-radius: 8px; font-size: 12px; color: var(--sand-500); display: flex; gap: 6px; align-items: center; }
.route-rail { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface-2); border-radius: 8px; font-size: 13px; color: var(--text-secondary); }
.route-rail .city { font-weight: 600; color: var(--text-primary); }
.route-rail .mode { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.chat-msg { padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; max-width: 260px; }
.chat-msg--user { background: var(--brand-500); color: white; align-self: flex-end; }
.chat-msg--ai   { background: var(--surface-2); color: var(--text-primary); align-self: flex-start; }
.skel { border-radius: 12px; background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: skel-shim 1.6s infinite; }
@keyframes skel-shim { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } }

/* ── Footer layout ──────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--border-subtle);
  padding: 40px 48px;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px; background: var(--surface-1);
}
.foot h5 { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 500; margin: 0 0 12px; }
.foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.foot a  { color: var(--text-secondary); font-size: 13px; }
.foot a:hover { color: var(--text-primary); }


@media (min-width: 600px) {
  .c-travel-planner__tab-btn.is-active {
    color: var(--brand-500)!important;
  }
}
/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 900px) {

  #trip-row-list { grid-template-columns: repeat(2, 1fr); }

  .planner { grid-template-columns: 1fr; }
  .planner-side, .planner-aux { display: none; }
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .price-row, .pr-grid { grid-template-columns: 1fr 1fr; }
  .ai-wrap { grid-template-columns: 1fr; }
  .ai-chat { display: none; }
  .onb { grid-template-columns: 1fr; }
  .onb-right { display: none; }
  .sh-wrap, .share-layout { grid-template-columns: 1fr; }
  .share-sidebar {
    flex-direction: row;
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
  .share-overview-card, #share-details {
    flex: 1;
  }
  .acc-wrap { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr 1fr; padding: 32px 24px; }
  .cta-banner { flex-direction: column; text-align: center; padding: 40px 32px; gap: 20px; }
  .cta-banner__actions { flex-direction: column; align-items: center; width: 100%; gap: 10px; }
  .cta-banner__actions .btn { width: 100%; max-width: 320px; justify-content: center; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .section-head p { max-width: 100%; }
}

@media (max-width: 600px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .price-row, .pr-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 40px; }
  .hero-lede { font-size: 16px; }
  .hero-ctas { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero-meta { flex-wrap: wrap; gap: 20px 32px; }
  .section { padding: 36px 20px; }
  .feature { padding: 20px; min-height: 0; }

  .sh-wrap, .share-layout { padding: 24px 16px 60px; }
  .share-sidebar {
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
  }
  .share-overview-card, #share-details {
    flex: 1;
    padding: 16px;
  }
  .share-cta-box {
    padding: 20px;
  }
  .share-cta-box p {
    font-size: 13px;
    margin-bottom: 12px;
  }

  /* Share page */
  .share-hero-inner {
    height: 240px;
  }
  .share-hero-inner > div[style*="padding"] {
    padding: 24px 20px 20px !important;
  }
  .share-hero-inner h1 {
    font-size: 28px !important;
  }

  /* Hero visual mockup */
  .hero-visual { margin-top: 28px; border-radius: 10px; }
  .hv-body { grid-template-columns: 1fr; height: auto; min-height: 340px; }
  .hv-form-panel { display: none; }
  .hv-results { padding: 14px; }
  .hv-nav { padding: 0 10px; height: 38px; }
  .hv-nav-link { padding: 3px 6px; font-size: 10px; gap: 3px; }
  .hv-brand { font-size: 11px; margin-right: 6px; }
  .hv-nav-right .avatar { width: 22px; height: 22px; font-size: 9px; }

  /* Trip rows on my-trips page */
  .trip-row { grid-template-columns: 60px 1fr; }

  /* Suggestion cards on AI Ideas page */
  .sug-card { flex-direction: column; }
  .sug-photo { width: 100%; height: 120px; min-width: 0; flex-shrink: 0; }

  /* Pricing comparison table: horizontal scroll */
  .cmp-tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 20px 16px; }
  .cmp-tbl table { min-width: 680px; }
}

/* ── Footer on very small screens (≤480px) ────────────────────────── */
@media (max-width: 480px) {
  .foot { grid-template-columns: 1fr; padding: 24px 16px; }
}

button#ai-add-origin {
    width: max-content !important;
}


/* ── WordPress admin bar offset ─────────────────────────────────── */


/* ── Chip selector (AI form preferences) ────────────────────────── */
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 5px 10px; border: 1px solid var(--border-default);
  border-radius: 999px; font-size: 12px; background: var(--surface-1); cursor: pointer;
}
.chip--on { background: var(--brand-500); color: white; border-color: var(--brand-500); }

/* ── Planner-specific overrides ─────────────────────────────────── */
.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
.field-grid .fg-full { grid-column: 1 / -1; }
.dest-card { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-1); align-items: center; }
.dest-card__drag { color: var(--text-tertiary); cursor: grab; }
.dest-thumb { width: 48px; height: 48px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, var(--brand-100), var(--accent-100)); }
.timeline-row {
  display: grid; grid-template-columns: 68px 1fr auto;
  gap: 14px; padding: 12px; border: 1px solid var(--border-subtle);
  border-radius: 10px; background: var(--surface-1);
  align-items: center; margin-bottom: 6px; transition: border-color 120ms;
}
.timeline-row:hover { border-color: var(--border-strong); }
.timeline-row .time { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); }
.day-head { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-subtle); }
.day-head .date { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.day-head .sub  { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.bud-row { display: grid; grid-template-columns: 24px 1fr auto 180px; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.bud-row:last-child { border-bottom: none; }
.bud-ico { width: 24px; height: 24px; border-radius: 6px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.exp-table { width: 100%; border-collapse: collapse; }
.exp-table th { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 500; text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); }
.exp-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; }
.exp-table tr:last-child td { border-bottom: none; }
.map-ph {
  aspect-ratio: 16/9;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.5), transparent 60%),
    repeating-linear-gradient(0deg, rgba(26,107,138,0.06) 0 24px, transparent 24px 25px),
    repeating-linear-gradient(90deg, rgba(26,107,138,0.06) 0 24px, transparent 24px 25px),
    linear-gradient(135deg, #e6ebf1, #c8e1ec);
  border-radius: 10px; position: relative; overflow: hidden; border: 1px solid var(--border-subtle);
}
.map-pin { position: absolute; transform: translate(-50%,-100%); color: var(--brand-600); font-size: 11px; font-weight: 600; display: flex; flex-direction: column; align-items: center; }
.map-pin .p { width: 14px; height: 14px; border-radius: 50%; background: var(--brand-500); border: 3px solid white; box-shadow: var(--shadow-sm); }
.map-pin .l { background: white; padding: 2px 8px; border-radius: 4px; font-size: 11px; margin-top: 2px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-subtle); white-space: nowrap; }
.route-line { position: absolute; border: 1.5px dashed var(--brand-500); }

/* ── Photo placeholder (Unsplash loading state) ──────────────────── */
.dest-photo-ph {
  background: linear-gradient(135deg, var(--brand-100), var(--accent-100));
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--brand-600);
}

/* ── Hero: full-viewport travel redesign ────────────────────────── */
.hero--fullscreen {
  min-height: 100vh;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  background-size: cover;
  background-position: center 40%;
}
.hero--fullscreen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(7, 30, 40, 0.82) 0%, rgba(7, 30, 40, 0.55) 50%, rgba(7, 30, 40, 0.15) 100%);
  pointer-events: none;
}
.hero--fullscreen .hero-inner {
  position: absolute;
  bottom: 25%;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 0 var(--space-8);
  max-width: var(--container-2xl);
  margin: 0 auto;
}
.hero--fullscreen .hero-eyebrow { color: rgba(255, 255, 255, 0.7); }
.hero--fullscreen h1 { color: white; max-width: 820px; }
.hero--fullscreen h1 em {
  background: linear-gradient(100deg, var(--sand-100), var(--sand-300));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero--fullscreen .hero-lede { color: rgba(255, 255, 255, 0.85); }
.hero--fullscreen .hero-ctas { margin-bottom: 0; }
.hero--fullscreen .hero-meta {
  border-top-color: rgba(255, 255, 255, 0.2);
  max-width: 560px;
}
.hero--fullscreen .hero-meta-item .n { color: white; }
.hero--fullscreen .hero-meta-item .l { color: rgba(255, 255, 255, 0.65); }

/* Scroll cue */
.hero-scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255, 255, 255, 0.6);
  animation: bounce-down 2s ease-in-out infinite;
}
@keyframes bounce-down {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* ── Mockup section ────────────────────────────────────────────── */
.section--mockup {
  padding: var(--space-16) var(--space-8);
  max-width: var(--container-2xl);
  margin: 0 auto;
}
.section--mockup .hero-visual { margin-top: 0; max-width: 960px; margin-left: auto; margin-right: auto; }

/* ── Destinations section ────────────────────────────────────────── */
.destinations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.dest-card-lg {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  display: block;
  text-decoration: none;
  color: inherit;
}
.dest-card-lg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 30, 40, 0.75) 0%, rgba(7, 30, 40, 0.1) 55%, transparent 100%);
  transition: opacity var(--dur-med);
}
.dest-card-lg:hover::after,
.dest-card-lg:focus::after {
  background: linear-gradient(to top, rgba(7, 30, 40, 0.85) 0%, rgba(7, 30, 40, 0.35) 70%, rgba(7, 30, 40, 0.1) 100%);
}
.dest-card-lg:focus {
  outline: 2px solid var(--brand-500);
  outline-offset: -2px;
}
.dest-card-lg__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 22px;
  z-index: 1;
}
.dest-card-lg__city {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: white;
  margin: 0 0 4px;
}
.dest-card-lg__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.dest-card-lg__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: white;
  color: var(--brand-700);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
  pointer-events: none;
}
.dest-card-lg:hover .dest-card-lg__cta {
  opacity: 1;
  transform: translateY(0);
}

/* Gradient fallbacks per city (no Unsplash key) */
.dest-card-lg--fallback-santorini { background: linear-gradient(135deg, var(--brand-300), var(--accent-200)); }
.dest-card-lg--fallback-rome      { background: linear-gradient(135deg, var(--sand-300), var(--sand-500)); }
.dest-card-lg--fallback-barcelona { background: linear-gradient(135deg, var(--accent-300), var(--brand-400)); }
.dest-card-lg--fallback-paris     { background: linear-gradient(135deg, var(--brand-200), var(--brand-400)); }
.dest-card-lg--fallback-lisbon    { background: linear-gradient(135deg, var(--sand-200), var(--accent-400)); }
.dest-card-lg--fallback-prague    { background: linear-gradient(135deg, var(--brand-400), var(--brand-700)); }

/* ── Feature: image-top variant ────────────────────────────────── */
.feature--img-top { padding: 28px; }
.feature--img-top .feature__img {
  display: none;
}
.feature--img-top .feature__content {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

/* Hide inline background-image divs in feature cards */
.feature div[style*="background-image"] {
  display: none !important;
}

.feature .ico--warm {
  background: var(--sand-50);
  border-color: var(--sand-200);
  color: var(--sand-500);
}

/* ── CTA banner: warm update ────────────────────────────────────── */
.cta-banner--warm {
  background: linear-gradient(135deg, #0a3242 0%, #12556e 45%, #0a6a5e 75%, #2d5a1a 100%);
  position: relative;
}
.cta-banner--warm .cta-photo-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.12;
  mix-blend-mode: luminosity;
  border-radius: inherit;
  pointer-events: none;
}

/* Outline-white button variant */
.btn-outline-white {
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: white;
  background: transparent;
}
.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border-color: rgba(255, 255, 255, 0.8);
}

/* ── Destinations responsive ────────────────────────────────────── */
@media (max-width: 900px) {
  .destinations-grid { grid-template-columns: 1fr 1fr; }
  .hero--fullscreen .hero-inner { bottom: 6%; }
}
@media (max-width: 600px) {
  .destinations-grid {
    grid-template-columns: 1fr;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .dest-card-lg {
    min-width: 80vw;
    scroll-snap-align: start;
    aspect-ratio: 3 / 2;
  }
  .hero--fullscreen { min-height: 85vh; }
  .hero--fullscreen .hero-inner {
    position: relative;
    bottom: auto;
    padding: 120px 20px 48px;
  }
  .hero-scroll-cue { display: none; }
}