:root {
  --color-text-secondary: #4e607c;
  --color-border-subtle: #d9e4f2;
  --color-bg-tint: #f3f8fe;
  --color-accent-solid: #075fd1;
  --color-focus: #0557bc;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

html { scroll-padding-top: 1.5rem; }
body { font-family: "Avenir Next", Inter, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif; }
html[lang="zh-CN"] body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  font-weight: 400;
}
html[lang="zh-CN"] .brand,
html[lang="zh-CN"] .assistant-header strong { font-family: "Avenir Next", "PingFang SC", sans-serif; }
::selection { color: #fff; background: #075fd1; }
a { text-underline-position: from-font; text-decoration-skip-ink: auto; }
button {
  transition-property: background-color, border-color, color, box-shadow, transform;
  transition-duration: 280ms;
  transition-timing-function: var(--ease-out);
}
button:active { transform: scale(.965); }
.button { transition: background-color 280ms var(--ease-out), box-shadow 280ms var(--ease-out), transform 280ms var(--ease-out); }
html { scroll-behavior: smooth; }
:focus-visible,
.button:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.site-header { max-width: 1460px; gap: 1rem; }
.site-header nav { gap: clamp(1rem, 1.8vw, 2rem); }
.site-header nav a { white-space: nowrap; }
.language-button {
  min-width: 44px;
  min-height: 44px;
  padding: .45rem .65rem;
  border: 1px solid transparent;
  border-radius: .55rem;
  font-weight: 650;
}
.language-button:hover { border-color: var(--color-border-subtle); background: var(--color-bg-tint); }
.brand { flex: 0 0 auto; }

.hero {
  width: min(1460px, calc(100% - 48px));
  min-height: min(780px, calc(100vh - 82px));
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 6.4rem) 0 clamp(4rem, 6vw, 6rem);
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(2.5rem, 5vw, 6.5rem);
  align-items: center;
}
.hero-copy { min-width: 0; }
.hero h1 {
  max-width: 11ch;
  font-size: clamp(3.15rem, 5.1vw, 5.5rem);
  line-height: 1.035;
  letter-spacing: -.04em;
  text-wrap: balance;
}
html[lang="zh-CN"] .hero h1 {
  max-width: 11em;
  font-size: clamp(2.5rem, 4.15vw, 4.45rem);
  font-weight: 650;
  line-height: 1.22;
  letter-spacing: -.025em;
}
.hero h1 .nowrap { white-space: nowrap; }
.hero-subtitle {
  max-width: 52ch;
  margin: 1.6rem 0 2.15rem;
  color: var(--color-text-secondary);
  font-size: clamp(1rem, 1.38vw, 1.16rem);
  line-height: 1.62;
  text-wrap: pretty;
}
.demo-route {
  display: grid;
  gap: 0;
  max-width: 550px;
  border-block: 1px solid var(--color-border-subtle);
}
.demo-route > div {
  display: grid;
  grid-template-columns: minmax(7rem, .44fr) 1fr;
  gap: .75rem;
  padding: .8rem 0;
  align-items: baseline;
}
.demo-route > div + div { border-top: 1px solid var(--color-border-subtle); }
.demo-route span {
  color: #63738d;
  font-size: .84rem;
  font-weight: 620;
}
.demo-route strong { font-size: .98rem; font-weight: 700; line-height: 1.4; }
.demo-context {
  max-width: 47ch;
  margin: 1rem 0 0;
  color: #687a95;
  font-size: .85rem;
  line-height: 1.5;
}
.assistant-panel {
  min-width: 0;
  overflow: hidden;
  border: 2px solid #a5caf4;
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 34px 90px rgba(12, 48, 93, .18), 0 5px 18px rgba(12, 48, 93, .06);
}
.assistant-header {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.15rem 1.5rem;
  color: #fff;
  background: #092d57;
}
.assistant-avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: .65rem;
  color: #fff;
  background: #1675e3;
}
.assistant-avatar svg { width: 29px; }
.assistant-header strong, .assistant-header span { display: block; }
.assistant-header strong { font-size: 1.12rem; line-height: 1.3; }
.assistant-header div:nth-child(2) span { color: #c2d9f4; font-size: .86rem; }
.assistant-progress-track { height: 4px; overflow: hidden; background: #dceaf9; }
.assistant-progress-track span {
  width: 100%;
  height: 100%;
  display: block;
  background: #1675e3;
  transform: scaleX(.3333);
  transform-origin: left center;
  transition: transform 420ms var(--ease-out);
}
.assistant-body { padding: clamp(1.2rem, 2.5vw, 1.8rem); }
.assistant-progress-row {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}
.assistant-progress {
  margin: 0;
  color: #5b6e89;
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .04em;
}
.assistant-back {
  min-height: 38px;
  padding: .4rem .6rem;
  border: 1px solid transparent;
  border-radius: .5rem;
  color: #0b5cb6;
  background: transparent;
  font-size: .83rem;
  font-weight: 700;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .assistant-back:hover { border-color: #c4dbf5; background: #eef6ff; }
}
.chat-message { display: flex; align-items: flex-end; gap: .55rem; margin: 0 0 .75rem; }
.chat-message.user { justify-content: flex-end; margin-block: .9rem 1.1rem; }
.chat-avatar {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  border-radius: .45rem;
  color: #fff;
  background: #0c3c73;
  font-size: .8rem;
  font-weight: 800;
}
.chat-bubble {
  width: fit-content;
  max-width: min(88%, 53ch);
  margin: 0;
  padding: .76rem 1rem;
  border-radius: .9rem .9rem .9rem .3rem;
  color: #172f50;
  background: #edf4fc;
  font-size: .96rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.chat-message.user .chat-bubble {
  border-radius: .9rem .9rem .3rem .9rem;
  color: #fff;
  background: #0b5ec4;
}
.choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  padding-inline-start: 2.25rem;
  margin: .85rem 0 0;
}
.choice-button {
  min-height: 44px;
  padding: .6rem .9rem;
  border: 1px solid #b8cde6;
  border-radius: .65rem;
  color: #134476;
  background: #fff;
  font-size: .9rem;
  font-weight: 650;
  text-align: start;
  cursor: pointer;
}
@media (hover: hover) {
  .choice-button:hover, .option-select:hover { border-color: #0a68d5; background: #eaf4ff; }
}
.assistant-loading { margin: 1rem 0 2rem; color: var(--color-text-secondary); }
.assistant-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.assistant-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: .4rem 1rem;
  padding: .85rem 1.5rem;
  border-top: 1px solid var(--color-border-subtle);
  color: #60718a;
  background: #f9fbfe;
  font-size: .78rem;
  line-height: 1.4;
}
.assistant-footer span:last-child { font-weight: 600; }
.assistant-composer {
  padding: 1rem clamp(1.2rem, 2.5vw, 1.8rem) .85rem;
  border-top: 1px solid var(--color-border-subtle);
  background: #fff;
}
.assistant-composer label {
  display: block;
  margin-bottom: .5rem;
  color: #243e61;
  font-size: .84rem;
  font-weight: 750;
}
.composer-field {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .35rem .35rem .9rem;
  border: 1px solid #aec8e7;
  border-radius: .8rem;
  background: #f8fbff;
  transition: border-color 280ms var(--ease-out), box-shadow 280ms var(--ease-out), background-color 280ms var(--ease-out);
}
.composer-field:focus-within {
  border-color: #287bd9;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(22, 117, 227, .12);
}
.composer-field input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: .3rem 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #122b4b;
  font: inherit;
  font-size: .9rem;
}
.composer-field input::placeholder { color: #637996; opacity: 1; }
.composer-send {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 0;
  border-radius: .58rem;
  color: #fff;
  background: #0b5ec4;
  box-shadow: 0 5px 12px rgba(11, 94, 196, .18);
  cursor: pointer;
}
.composer-send:hover { background: #074a9e; box-shadow: 0 7px 16px rgba(11, 94, 196, .25); }
.composer-send:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.composer-send svg { width: 20px; height: 20px; }
.assistant-composer p { margin: .55rem 0 0; color: #687c96; font-size: .75rem; line-height: 1.4; }
.chat-message.is-thinking .chat-bubble { color: #59718e; }
.results-bar {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  margin: 1.45rem 0 .75rem;
  color: #60718a;
  font-size: .78rem;
}
.results-bar strong { color: var(--ink); font-size: .9rem; }
.demo-options { display: grid; gap: .7rem; }
.demo-option {
  padding: .9rem 1rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: .78rem;
  background: #fff;
  transition: border-color 340ms var(--ease-out), background-color 340ms var(--ease-out), box-shadow 340ms var(--ease-out), transform 340ms var(--ease-out);
}
.demo-option.is-selected {
  border-color: #438ee7;
  background: #f3f8ff;
  box-shadow: 0 8px 22px rgba(17, 80, 156, .08);
}
@media (hover: hover) and (pointer: fine) { .demo-option:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(17, 80, 156, .1); } }
.option-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.option-tag {
  display: inline-block;
  margin-bottom: .35rem;
  color: #0756af;
  font-size: .71rem;
  font-weight: 770;
}
.demo-option h3 { margin: 0; font-size: .98rem; line-height: 1.35; }
.option-route { margin: .2rem 0 0; color: #5d6f89; font-size: .8rem; }
.option-price {
  flex: 0 0 auto;
  color: #0b3970;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}
.option-facts {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1rem;
  margin: .65rem 0 .7rem;
  color: #4f637f;
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
}
.option-select {
  min-height: 35px;
  padding: .4rem .65rem;
  border: 1px solid #bfd7f2;
  border-radius: .48rem;
  color: #0c5bb8;
  background: #eff6ff;
  font-size: .78rem;
  font-weight: 710;
  cursor: pointer;
}
.selected-details {
  margin: 1.25rem 0 0;
  padding: 1.1rem 1.15rem 1.2rem;
  border-radius: .86rem;
  color: #fff;
  background: #09294f;
}
.selected-details h3 { margin: 0; font-size: 1.06rem; line-height: 1.4; }
.selected-reason { margin: .3rem 0 1rem; color: #c7d9ef; font-size: .84rem; line-height: 1.5; }
.detail-grid { margin: 0; display: grid; gap: .55rem; }
.detail-grid > div {
  display: grid;
  grid-template-columns: minmax(8.5rem, .42fr) 1fr;
  gap: .6rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid rgba(255, 255, 255, .17);
}
.detail-grid dt { color: #a9c5e4; font-size: .84rem; }
.detail-grid dd { margin: 0; font-size: .88rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.detail-caution { margin: .7rem 0 1rem; color: #b6cae2; font-size: .75rem; }
.selected-details .next-title { margin-top: 1.05rem; }
.next-body { margin: .35rem 0 1rem; color: #c7d9ef; font-size: .83rem; line-height: 1.52; }
.assistant-actions .button { min-height: 42px; box-shadow: none; }
.assistant-actions .button:disabled { cursor: default; opacity: .78; }
.saved-message { margin: .7rem 0 0; color: #d5e9ff; font-size: .8rem; }
.reset-button {
  min-height: 40px;
  margin: 1rem 0 .2rem;
  padding: .4rem .2rem;
  border: 0;
  color: #0a5bb7;
  background: transparent;
  font-size: .83rem;
  font-weight: 670;
  cursor: pointer;
}
.sample-disclaimer { margin: .2rem 0 0; color: #596d87; font-size: .75rem; line-height: 1.5; }

.section { padding-block: clamp(5rem, 7vw, 7.5rem); }
.section-heading { margin-bottom: 3.1rem; }
h2 { font-size: clamp(2.3rem, 3.7vw, 4.1rem); letter-spacing: -.04em; }
html[lang="zh-CN"] h2 { font-weight: 650; line-height: 1.22; letter-spacing: -.025em; }
html[lang="zh-CN"] .hero-subtitle,
html[lang="zh-CN"] .chat-bubble,
html[lang="zh-CN"] .steps p,
html[lang="zh-CN"] .decision-copy > p:not(.eyebrow),
html[lang="zh-CN"] .support-copy p,
html[lang="zh-CN"] .faq-list p {
  line-height: 1.75;
  letter-spacing: 0;
}
.steps article { padding-top: 1.6rem; }
.steps h3 { margin-top: .7rem; }
.steps p, .decision-copy > p:not(.eyebrow), .support-copy p, .faq-list p { line-height: 1.65; }
.comfort-copy small { color: #b2c5df; }
.boundary-note { border-left-width: 1px; border-color: #a7c8ee; }
.fare-breakdown { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.15fr); }
.fare-breakdown > div { min-width: 0; }
.fare-breakdown strong { overflow-wrap: anywhere; }
.fare-disclaimer { max-width: 68ch; line-height: 1.6; }
.text-link { text-decoration: none; }
.final-cta .button { display: inline-block; }

@media (max-width: 1180px) {
  .hero { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 2rem; }
  .hero h1 { font-size: clamp(2.8rem, 4.5vw, 4.5rem); }
}
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; min-height: 0; gap: 2.7rem; }
  .hero h1 { max-width: 17ch; }
  .hero-copy { max-width: 760px; }
  .assistant-panel { max-width: 790px; width: 100%; }
  .fare-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hero { width: min(100% - 32px, 680px); padding-block: 1.55rem 4rem; gap: 1.55rem; }
  .hero h1 { max-width: 13ch; font-size: clamp(2.5rem, 9.6vw, 3.25rem); }
  html[lang="zh-CN"] .hero h1 { max-width: none; font-size: clamp(2.35rem, 7.5vw, 3rem); }
  .hero-subtitle { margin-block: .95rem 0; font-size: 1rem; }
  .demo-route { display: none; }
  .assistant-header { padding-inline: 1.1rem; }
  .assistant-footer { padding-inline: 1.1rem; }
  .choice-group { padding-inline-start: 0; }
  .choice-button { font-size: .86rem; }
  .detail-grid > div { grid-template-columns: minmax(7rem, .4fr) 1fr; }
  .fare-breakdown { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .hero { width: calc(100% - 28px); }
  .assistant-body { padding-inline: .9rem; }
  .option-head { flex-direction: column; gap: .35rem; }
  .option-price { font-size: 1.04rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  button, .button, .demo-option, .composer-field { transition: none; }
  button:active { transform: none; }
  .assistant-progress-track span { transition: none; }
}