/* Hallmark · genre: editorial · macrostructure: Tabbed Workbench
 * theme: local (forest/sand/coral) · display: Newsreader · body: Inter
 * audience routes: zh = providers, en = inbound travellers
 */

@font-face {
  font-family: "Inter var";
  src: url("assets/fonts/inter-latin-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader var";
  src: url("assets/fonts/newsreader-latin-var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-body: "Inter var", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: "Newsreader var", Georgia, "Songti SC", STSong, serif;

  /* 4pt scale. Use these, not raw pixels. */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 72px;
  --space-3xl: 104px;

  /* 12px floor: nothing readable ships below it. */
  --text-xs: 12px;
  --text-sm: 13px;

  --ink: #172421;
  --forest: #173a33;
  --forest-soft: #2f5e53;
  --paper: #fff;
  --sand: #f6f2ea;
  --sand-deep: #ece5d9;
  --white: #fff;
  --accent: #ee765a;
  --accent-ink: #9e3d20;  /* text-safe coral; --accent is decorative only */
  --gold: #d5a14c;
  --line: rgba(23, 36, 33, .14);
  --muted: rgba(23, 36, 33, .66);
  --shadow: 0 18px 55px rgba(23, 36, 33, .13);
  --container: min(1200px, calc(100% - 48px));
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-short: 180ms;
  --dur-medium: 320ms;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body { margin: 0; background: var(--paper); color: var(--ink); line-height: 1.6; }
body.nav-open, body.modal-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { margin-bottom: var(--space-md); font-family: var(--font-display); font-weight: 500; letter-spacing: -.035em; line-height: 1.06; }
h1, h2, h3 { overflow-wrap: break-word; text-wrap: balance; }
p { text-wrap: pretty; }
html:lang(zh-CN) { line-break: strict; word-break: normal; }
html:lang(en) { hyphens: none; }
h2 { font-size: clamp(2.2rem, 4vw, 3.65rem); }
.container { width: var(--container); margin-inline: auto; }
.section { padding: var(--space-3xl) 0; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; transform: translateY(-150%); padding: 10px 16px; border-radius: 8px; background: var(--white); }
.skip-link:focus { transform: none; }

.demo-banner { position: relative; z-index: 40; background: #102d28; color: var(--white); }
.demo-banner .container { min-height: 30px; display: flex; justify-content: center; align-items: center; gap: 12px; }
.demo-banner span { color: #b9d4cc; font-size: var(--text-xs); font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.demo-banner p { margin: 0; color: rgba(255,255,255,.82); font-size: var(--text-xs); }

.site-header { position: sticky; z-index: 30; top: 0; height: 78px; background: rgba(255,255,255,.97); border-bottom: 1px solid rgba(23,36,33,.08); transition: box-shadow 180ms ease, height 180ms ease; }
.site-header.is-sticky { height: 68px; box-shadow: 0 8px 30px rgba(23,36,33,.08); backdrop-filter: blur(16px); }
.header-inner { height: 100%; display: flex; justify-content: space-between; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; object-fit: cover; }
.brand-copy { display: grid; line-height: 1.05; }
.brand-copy strong { font-family: var(--font-display); font-size: 1.16rem; font-weight: 500; letter-spacing: -.03em; }
.brand-copy small { margin-top: var(--space-2xs); font-size: var(--text-xs); letter-spacing: .035em; opacity: .64; }
.header-actions { display: flex; align-items: center; gap: 12px; order: 3; }
.site-nav { display: flex; align-items: center; gap: clamp(13px, 1.7vw, 23px); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.account-shortcut { min-height: 36px; padding: 0 var(--space-sm); border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--ink); font-size: var(--text-xs); font-weight: 800; white-space: nowrap; cursor: pointer; }
.account-shortcut:hover { border-bottom-color: currentColor; }
.account-shortcut-compact { display: none; }
.account-plans-shortcut { margin: var(--space-xs) 0 var(--space-md); }

.section-tabs { position: sticky; z-index: 20; top: 78px; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.site-header.is-sticky ~ .section-tabs, .section-tabs.is-compact { top: 68px; }
.section-tabs-strip { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.section-tabs-strip::-webkit-scrollbar { display: none; }
.section-tabs-strip button { position: relative; flex: 0 0 auto; padding: 17px 14px; border: 0; background: transparent; color: var(--muted); font-size: .82rem; font-weight: 700; white-space: nowrap; cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.section-tabs-strip button::after { content: ""; position: absolute; right: 12px; bottom: 0; left: 12px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-medium) var(--ease-out); }
.section-tabs-strip button:hover { color: var(--ink); }
.section-tabs-strip button[aria-selected="true"] { color: var(--ink); }
.section-tabs-strip button[aria-selected="true"]::after { transform: scaleX(1); }
.section-tabs-strip button:focus-visible { outline: 2px solid var(--forest); outline-offset: -4px; border-radius: 6px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.hero-note { max-width: 46ch; color: rgba(255,255,255,.72); font-size: .8rem; }

[data-panel] { display: none; scroll-margin-top: 132px; }
[data-panel].is-active-panel { display: block; animation: panel-enter var(--dur-medium) var(--ease-out) both; }
@keyframes panel-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Cards settle in on panel entry; the stagger reads as one motion, not six. */
.is-active-panel .category-card,
.is-active-panel .city-card,
.is-active-panel .protection-grid article { animation: card-rise var(--dur-medium) var(--ease-out) both; }
.is-active-panel :is(.category-card, .city-card, .protection-grid article):nth-child(2) { animation-delay: 40ms; }
.is-active-panel :is(.category-card, .city-card, .protection-grid article):nth-child(3) { animation-delay: 80ms; }
.is-active-panel :is(.category-card, .city-card, .protection-grid article):nth-child(n+4) { animation-delay: 120ms; }
@keyframes card-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.site-nav > a:not(.button) { position: relative; }
.site-nav > a:not(.button)::after { content: ""; position: absolute; right: 0; bottom: -7px; left: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 180ms ease; }
.site-nav > a:not(.button):hover::after { transform: scaleX(1); transform-origin: left; }
.nav-toggle { display: none; position: relative; z-index: 3; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; }
.nav-toggle > span:not(.sr-only) { position: absolute; top: 17px; right: 10px; left: 10px; height: 2px; background: currentColor; transition: transform 180ms ease; }
.nav-toggle > span:last-child { top: 25px; }
.button { min-height: 50px; display: inline-flex; justify-content: center; align-items: center; gap: 12px; padding: 0 23px; border: 1px solid var(--forest); border-radius: 999px; background: var(--forest); color: var(--white); font-size: .8rem; font-weight: 800; cursor: pointer; transition: transform 170ms ease, background 170ms ease; }
.button:hover { transform: translateY(-2px); background: var(--forest-soft); }
.button-small { min-height: 40px; padding: 0 18px; }
.button-light { border-color: var(--white); background: var(--white); color: var(--forest); }
.button-light:hover { background: var(--sand); }
.button-ghost { border: 1px solid rgba(255,255,255,.5); background: transparent; color: var(--white); }
.button-ghost:hover { border-color: var(--white); background: rgba(255,255,255,.1); }

.hero { position: relative; min-height: 680px; display: grid; align-items: center; overflow: hidden; background: #30413c; color: var(--white); }
.hero-media, .hero-media img, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: center 60%; }
.hero-shade { background: linear-gradient(90deg, rgba(7,20,17,.8) 0%, rgba(7,20,17,.61) 43%, rgba(7,20,17,.12) 78%), linear-gradient(0deg, rgba(7,20,17,.35), transparent 54%); }
.hero-content { position: relative; z-index: 2; padding: 70px 0 62px; }
.eyebrow, .kicker { font-size: var(--text-xs); line-height: 1.3; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { margin-bottom: 20px; color: rgba(255,255,255,.76); }
.hero h1 { max-width: 790px; margin-bottom: 24px; font-size: clamp(3.5rem, 6vw, 5.8rem); text-shadow: 0 2px 22px rgba(0,0,0,.16); }
.hero-subheadline { max-width: 640px; margin: -8px 0 18px; color: rgba(255,255,255,.9); font-family: var(--font-display); font-size: clamp(1.2rem,2.2vw,1.72rem); line-height: 1.25; }
.hero-search { width: min(820px, 100%); display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 8px 8px 8px 20px; border-radius: 16px; background: var(--white); box-shadow: 0 16px 48px rgba(0,0,0,.22); color: var(--ink); }
.hero-search-icon { color: var(--forest-soft); }
.hero-search input { min-width: 0; height: 48px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .88rem; }
.hero-search input::placeholder { color: rgba(23,36,33,.56); text-overflow: ellipsis; }
.hero-search button { min-height: 48px; padding: 0 22px; border: 0; border-radius: 11px; background: var(--accent); color: var(--ink); font-size: .78rem; font-weight: 800; white-space: nowrap; cursor: pointer; transition: background 160ms ease; }
.hero-search button:hover { background: #f08368; }
.hero-quick-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 18px; color: rgba(255,255,255,.72); font-size: var(--text-xs); }
.hero-quick-links button { padding: 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.45); background: transparent; color: var(--white); font-size: inherit; cursor: pointer; }

.trust-bar { border-bottom: 1px solid var(--line); background: var(--white); }
.trust-bar-grid { min-height: 112px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; }
.trust-bar-grid div { min-width: 0; display: grid; gap: var(--space-2xs); padding: 0 var(--space-lg); border-right: 1px solid var(--line); }
.trust-bar-grid div:first-child { padding-left: 0; }
.trust-bar-grid div:last-child { padding-right: 0; border-right: 0; }
.trust-bar-grid strong { font-size: .8rem; }
.trust-bar-grid small { margin-top: 2px; color: var(--muted); font-size: var(--text-xs); line-height: 1.45; }

.kicker { margin-bottom: var(--space-sm); color: var(--accent-ink); }
.section-heading { margin-bottom: 44px; }
.marketplace-heading-simple { display: flex; justify-content: space-between; align-items: end; gap: 36px; }
.marketplace-heading-simple h2 { margin-bottom: 0; }
.marketplace-heading-simple > p { max-width: 380px; margin: 0; color: var(--muted); }
.plans-heading-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.services-heading, .destination-heading { display: flex; justify-content: space-between; align-items: end; gap: 36px; }
.services-heading > div, .destination-heading > div { max-width: 830px; }
.services-heading h2, .destination-heading h2 { margin-bottom: 0; }
.services-heading > div > p:last-child, .destination-heading > div > p:last-child { max-width: 65ch; margin: 14px 0 0; color: var(--muted); }
.text-button { padding: 0 0 6px; border: 0; border-bottom: 1px solid var(--ink); background: transparent; color: var(--ink); font-size: .76rem; font-weight: 800; cursor: pointer; }

.care-types { background: var(--white); }
.category-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 16px; }
.category-card { grid-column: span 2; }
.category-card:nth-child(n+4) { grid-column: span 3; }
.category-card { position: relative; min-width: 0; height: 360px; display: block; padding: 0; overflow: hidden; border: 0; border-radius: 14px; background: #53645f; color: var(--white); text-align: left; cursor: pointer; }
.category-card img, .category-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.category-card img { object-fit: cover; transition: transform 500ms ease; }
.category-overlay { background: linear-gradient(0deg, rgba(7,20,17,.78), rgba(7,20,17,.02) 68%); }
.category-card:hover img { transform: scale(1.045); }
.category-copy { position: absolute; z-index: 2; right: 22px; bottom: 22px; left: 22px; display: grid; }
.category-copy small { color: rgba(255,255,255,.75); font-size: var(--text-xs); }
.category-copy strong { margin-top: 2px; font-family: var(--font-display); font-size: 1.55rem; font-weight: 500; }
.category-copy i { margin-top: 14px; font-size: var(--text-xs); font-style: normal; font-weight: 800; opacity: .86; }

.marketplace { background: var(--sand); }
.marketplace-heading { display: flex; justify-content: space-between; align-items: end; gap: 36px; margin-bottom: 38px; }
.marketplace-heading h2 { margin-bottom: 10px; }
.heading-note { max-width: 600px; margin: 0; color: var(--muted); }
.marketplace-heading > div:first-child .button-small { margin-top: 20px; }
.result-tools { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 14px; }
.result-tools .button-small { margin: 0; }
.preview-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.preview-filters select { height: 42px; padding: 0 34px 0 13px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.8); color: var(--ink); font-size: var(--text-xs); cursor: pointer; }
.planner-section { background: var(--forest); color: var(--white); }
.planner-layout { display: grid; grid-template-columns: minmax(0,.92fr) minmax(430px,1.08fr); gap: clamp(48px,7vw,94px); align-items: center; }
.planner-intro > p:not(.kicker):not(.planner-legal) { max-width: 570px; color: rgba(255,255,255,.7); }
.planner-intro h2 { max-width: 620px; }
.planner-composer { display: grid; gap: 10px; margin-top: 28px; padding: 14px; border-radius: 14px; background: var(--white); color: var(--ink); }
.planner-composer label { padding: 0 2px; }
.planner-composer label span { color: var(--muted); font-size: var(--text-xs); font-weight: 800; }
.planner-composer textarea { width: 100%; min-height: 102px; resize: vertical; padding: 12px 13px; border: 1px solid transparent; border-radius: 10px; outline: 0; background: #f3f4f0; color: var(--ink); font-size: .8rem; line-height: 1.6; }
.planner-composer textarea:focus { border-color: rgba(23,58,51,.42); box-shadow: 0 0 0 3px rgba(23,58,51,.08); }
.planner-examples { display: flex; flex-wrap: wrap; gap: 6px; }
.planner-examples button { padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); color: var(--muted); font-size: var(--text-xs); font-weight: 700; cursor: pointer; }
.planner-examples button:hover { border-color: var(--forest); color: var(--forest); }
.planner-submit { min-height: 48px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; border: 0; border-radius: 10px; background: var(--accent); color: var(--white); font-size: .76rem; font-weight: 800; cursor: pointer; }
.planner-submit:disabled { cursor: wait; opacity: .72; }
.trip-constraints-form { display: grid; gap: 12px; margin-top: 14px; padding: 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(255,255,255,.08); }
.trip-constraints-heading { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.trip-constraints-heading strong { display: block; font-size: .75rem; }
.trip-constraints-heading small { display: block; margin-top: 3px; color: rgba(255,255,255,.62); font-size: var(--text-xs); line-height: 1.45; }
.trip-constraints-heading button { border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 5px 9px; background: transparent; color: var(--white); font-size: var(--text-xs); cursor: pointer; }
.trip-constraints-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.trip-constraints-grid label { display: grid; gap: 4px; }
.trip-constraints-grid label span, .trip-priorities legend { color: rgba(255,255,255,.7); font-size: var(--text-xs); font-weight: 760; }
.trip-constraints-grid input, .trip-constraints-grid select { width: 100%; min-width: 0; min-height: 38px; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: 7px 9px; background: var(--white); color: var(--ink); font: inherit; font-size: var(--text-xs); }
.trip-priorities { display: flex; flex-wrap: wrap; gap: 7px 12px; margin: 0; padding: 0; border: 0; }
.trip-priorities legend { width: 100%; margin-bottom: 2px; }
.trip-priorities label { display: inline-flex; align-items: center; gap: 5px; color: rgba(255,255,255,.76); font-size: var(--text-xs); }
.trip-constraints-message { margin: 0; padding: 8px 9px; border-radius: 8px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); font-size: var(--text-xs); line-height: 1.5; overflow-wrap: anywhere; }
.trip-constraints-message.is-error { background: rgba(166,75,60,.25); color: #fff4ef; }
.trip-constraints-submit { background: var(--white); color: var(--forest); }
.map-preview-fields { display: grid; gap: 10px; margin: 0; padding: 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; }
.map-preview-fields legend { padding: 0 5px; color: var(--white); font-size: .75rem; font-weight: 800; }
.map-preview-fields > p { margin: 0; color: rgba(255,255,255,.68); font-size: var(--text-xs); line-height: 1.5; }
.map-preview-toggle { display: flex; align-items: start; gap: 7px; color: var(--white); font-size: var(--text-xs); font-weight: 760; line-height: 1.45; }
.map-preview-toggle input { margin-top: 2px; }
.map-interest-grid { display: flex; flex-wrap: wrap; gap: 7px 12px; }
.map-interest-grid label { display: flex; align-items: center; gap: 5px; color: rgba(255,255,255,.75); font-size: var(--text-xs); }
.planner-legal { margin: 12px 0 0; color: rgba(255,255,255,.46); font-size: var(--text-xs); }
.planner-result-shell { padding: 30px; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: rgba(255,255,255,.07); }
.ai-plan-card { width: 100%; padding: 20px; border-radius: 16px; background: var(--white); color: var(--ink); box-shadow: 0 28px 75px rgba(0,0,0,.22); }
.ai-plan-header { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; margin-bottom: 14px; }
.ai-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--forest); color: #d3e6df; }
.ai-plan-header > div { display: grid; min-width: 0; }
.ai-plan-header strong { font-size: .76rem; }
.ai-plan-header small { color: var(--muted); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-plan-header > i { padding: 5px 8px; border-radius: 999px; background: #e9f3ee; color: #34715b; font-size: var(--text-xs); font-style: normal; font-weight: 800; }
.planner-bubble { width: fit-content; max-width: 91%; margin-bottom: 9px; padding: 10px 12px; border-radius: 11px; font-size: var(--text-xs); line-height: 1.5; }
.planner-bubble-user { margin-left: auto; border-bottom-right-radius: 3px; background: var(--forest); color: var(--white); }
.planner-bubble-ai { border-bottom-left-radius: 3px; background: #edf2ee; }
.planner-response-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 6px 0 10px; color: var(--muted); font-size: var(--text-xs); font-weight: 760; }
.planner-response-meta button { border: 0; border-radius: 999px; padding: 5px 9px; background: var(--forest); color: var(--white); font: inherit; cursor: pointer; }
.planner-evidence { display: grid; gap: 6px; margin: 8px 0 12px; }
.planner-evidence article { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--white); font-size: var(--text-xs); }
.planner-evidence a, .planner-evidence strong { color: var(--forest); font-weight: 780; }
.planner-evidence span { color: var(--muted); text-align: right; }
.planner-case { margin: 9px 0 12px; padding: 11px 12px; border: 1px solid rgba(180,104,77,.3); border-radius: 10px; background: #fff7f2; }
.planner-case strong { color: var(--forest); font-size: var(--text-xs); }
.planner-case p { margin: 5px 0 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.55; }
.planner-case a { display: inline-flex; margin-top: 8px; color: var(--rust); font-size: var(--text-xs); font-weight: 780; }
.structured-response { min-width: 0; display: grid; gap: 10px; margin: 8px 0 12px; overflow-wrap: anywhere; }
.structured-text { margin: 0; padding: 11px 12px; border-radius: 11px; border-bottom-left-radius: 3px; background: #edf2ee; font-size: var(--text-xs); line-height: 1.55; }
.structured-response h3 { margin: 0 0 7px; color: var(--forest); font-size: var(--text-xs); }
.structured-product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.structured-product-card { min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 9px; }
.structured-product-card h4 { margin: 0 0 5px; font-size: var(--text-xs); line-height: 1.4; }
.structured-product-card p { margin: 0 0 5px; color: var(--muted); font-size: var(--text-xs); line-height: 1.4; }
.structured-product-payment-offer { display: block; margin: 7px 0 4px; color: var(--forest); font-size: var(--text-xs); line-height: 1.35; }
.structured-product-card small { color: #76541c; font-size: var(--text-xs); line-height: 1.35; }
.structured-comparison { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 9px; }
.structured-comparison:focus-visible { outline: 3px solid rgba(23,58,51,.22); outline-offset: 2px; }
.structured-comparison table { width: 100%; min-width: 590px; border-collapse: collapse; font-size: var(--text-xs); }
.structured-comparison caption { padding: 8px 9px; color: var(--forest); font-weight: 780; text-align: left; }
.structured-comparison th, .structured-comparison td { padding: 7px 9px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.structured-comparison thead th { background: #f3f4f0; color: var(--muted); }
.structured-status { padding: 10px 11px; border: 1px solid rgba(213,161,76,.32); border-radius: 9px; background: rgba(213,161,76,.1); }
.structured-status.status-supported { border-color: rgba(52,113,91,.28); background: #edf5f1; }
.structured-status.status-stale, .structured-status.status-unknown { border-color: rgba(180,104,77,.28); background: #fff7f2; }
.structured-status strong { color: var(--forest); font-size: var(--text-xs); }
.structured-status p { margin: 4px 0 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.5; }
.structured-action { min-height: 40px; display: flex; justify-content: center; align-items: center; padding: 0 12px; border: 1px solid rgba(23,58,51,.26); border-radius: 9px; background: #ecf3ef; color: var(--forest); font-size: var(--text-xs); font-weight: 800; text-align: center; cursor: pointer; }
.structured-action:hover, .structured-action:focus-visible { background: var(--forest); color: var(--white); }
.structured-clarification-options { display: flex; flex-wrap: wrap; gap: 6px; }
.structured-clarify-chip { padding: 7px 11px; border: 1px solid rgba(23,58,51,.26); border-radius: 999px; background: #ecf3ef; color: var(--forest); font-size: var(--text-xs); font-weight: 700; cursor: pointer; }
.structured-clarify-chip:hover, .structured-clarify-chip:focus-visible { background: var(--forest); color: var(--white); }
.structured-evidence ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.structured-evidence li { display: flex; justify-content: space-between; gap: 9px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: var(--text-xs); }
.structured-evidence a, .structured-evidence strong { color: var(--forest); font-weight: 780; }
.structured-evidence span { color: var(--muted); text-align: right; }
.planner-search-proof { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0 7px; padding: 8px 10px; border-radius: 9px; background: #f3f4f0; color: var(--muted); font-size: var(--text-xs); }
.planner-search-proof span { font-weight: 760; }
.planner-search-proof strong { color: var(--forest); font-size: var(--text-xs); }
.ai-match { display: grid; grid-template-columns: 92px minmax(0,1fr); align-items: center; gap: 12px; margin-top: 11px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.ai-match img { width: 92px; height: 78px; border-radius: 8px; object-fit: cover; object-position: center; }
.ai-match > div { display: grid; min-width: 0; gap: 3px; }
.ai-match span { color: var(--forest-soft); font-size: var(--text-xs); font-weight: 800; }
.ai-match strong { font-size: .78rem; line-height: 1.35; }
.ai-match small { color: var(--muted); font-size: var(--text-xs); line-height: 1.35; }
.ai-alternatives { display: grid; gap: 6px; margin: 7px 0 9px; }
.ai-alternatives button { width: 100%; display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.ai-alternatives button:hover { border-color: rgba(23,58,51,.45); background: #f6f8f5; }
.ai-alternatives button > span:first-child { color: var(--accent); font-size: var(--text-xs); font-weight: 900; }
.ai-alternatives button > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.ai-alternatives strong { overflow: hidden; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.ai-alternatives small { overflow: hidden; color: var(--muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.ai-alternatives i { color: var(--forest); font-size: var(--text-xs); font-style: normal; }
.planner-match-trace { display: grid; gap: 6px; margin: 9px 0; }
.planner-match-trace section { padding: 8px 10px; border-left: 3px solid var(--forest-soft); border-radius: 7px; background: #f3f4f0; }
.planner-match-trace section.is-unmet { border-left-color: #a64b3c; background: #fff3ef; }
.planner-match-trace section.is-unknown { border-left-color: #8a7440; background: #faf7ec; }
.planner-match-trace section.is-confirmation { border-left-color: var(--accent); background: #fff7f2; }
.planner-match-trace strong { color: var(--forest); font-size: var(--text-xs); }
.planner-match-trace ul { display: grid; gap: 3px; margin: 4px 0 0; padding-left: 14px; color: var(--muted); font-size: var(--text-xs); line-height: 1.4; }
.ai-plan-days { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin: 9px 0; }
.ai-plan-days div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 7px; padding: 8px; border-radius: 8px; background: #f3f4f0; }
.ai-plan-days span { color: var(--accent); font-size: var(--text-xs); font-weight: 900; white-space: nowrap; }
.ai-plan-days p { margin: 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.35; }
.itinerary-preview { display: grid; gap: 12px; margin-top: 14px; padding: 14px; border: 1px solid #dce3dc; border-radius: 12px; background: #f8faf6; }
.itinerary-preview[hidden] { display: none; }
.itinerary-preview-header { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.itinerary-preview-header h3 { margin: 0; font-family: var(--display); font-size: 1.18rem; }
.itinerary-preview-header p { margin: 3px 0 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.45; }
.itinerary-preview-status { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; background: #e4eee6; color: var(--forest); font-size: .66rem; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.itinerary-preview-status.is-confirmation { background: #fff0d9; color: #835518; }
.itinerary-map-shell { overflow: hidden; border: 1px solid #d7dfd8; border-radius: 10px; background: var(--white); }
.itinerary-map-canvas { width: 100%; min-height: 300px; background: linear-gradient(135deg,#eef3ee,#dce7e1); }
.itinerary-map-status { margin: 0; padding: 8px 10px; border-top: 1px solid #e5ebe6; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.itinerary-map-marker { width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid var(--white); border-radius: 50%; box-shadow: 0 4px 12px rgba(23,36,33,.28); background: var(--forest); color: var(--white); font-size: .68rem; font-weight: 900; }
.itinerary-map-marker.is-attraction { background: var(--accent); }
.itinerary-map-marker.is-origin { background: #2f5f8a; }
.itinerary-candidates { display: grid; gap: 6px; }
.itinerary-candidate { display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 8px; border-radius: 8px; background: var(--white); }
.itinerary-candidate > span { color: var(--accent); font-size: var(--text-xs); font-weight: 900; }
.itinerary-candidate strong, .itinerary-candidate small { display: block; }
.itinerary-candidate strong { font-size: .76rem; }
.itinerary-candidate small { margin-top: 2px; color: var(--muted); font-size: .68rem; line-height: 1.4; }
.itinerary-days { display: grid; gap: 9px; }
.itinerary-day { padding: 10px; border-left: 3px solid var(--accent); border-radius: 7px; background: var(--white); }
.itinerary-day h4 { margin: 0 0 7px; font-size: .78rem; }
.itinerary-block { display: grid; grid-template-columns: 92px 1fr; gap: 8px; padding: 6px 0; border-top: 1px solid #e8ece7; }
.itinerary-block:first-of-type { border-top: 0; }
.itinerary-block time { color: var(--forest); font-size: .68rem; font-weight: 800; }
.itinerary-block p { margin: 0; color: var(--ink); font-size: .72rem; line-height: 1.4; }
.itinerary-block small { display: block; margin-top: 2px; color: var(--muted); font-size: .65rem; }
.itinerary-conflicts { margin: 0; padding-left: 18px; color: #76501d; font-size: .7rem; line-height: 1.45; }
.itinerary-refresh, .itinerary-disclaimer { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.5; }
.itinerary-unavailable { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.ai-match-action { width: 100%; min-height: 40px; display: flex; justify-content: space-between; align-items: center; padding: 0 12px; border: 1px solid rgba(23,58,51,.26); border-radius: 9px; background: #ecf3ef; color: var(--forest); font-size: var(--text-xs); font-weight: 800; cursor: pointer; }
.ai-match-action:hover { background: var(--forest); color: var(--white); }
.ai-disclaimer { margin: 8px 2px 0; color: rgba(23,36,33,.46); font-size: var(--text-xs); }

.destinations { background: var(--white); }
.city-grid { display: grid; grid-template-columns: .85fr 1.3fr; gap: 16px; }
.city-card { position: relative; min-width: 0; height: 430px; display: block; padding: 0; overflow: hidden; border: 0; border-radius: 14px; background: #43534e; color: var(--white); text-align: left; cursor: pointer; }
.city-card img, .city-card > span { position: absolute; inset: 0; width: 100%; height: 100%; }
.city-card img { object-fit: cover; transition: transform 500ms ease; }
.city-card > span { background: linear-gradient(0deg, rgba(7,20,17,.82), rgba(7,20,17,.02) 72%); }
.city-card:hover img { transform: scale(1.04); }
.city-card > div { position: absolute; z-index: 2; right: 24px; bottom: 24px; left: 24px; }
.city-card small { color: rgba(255,255,255,.7); font-size: var(--text-xs); }
.city-card h3 { margin: 3px 0 4px; font-family: var(--font-display); font-size: 2rem; font-weight: 500; }
.city-card p { margin: 0; color: rgba(255,255,255,.78); font-size: var(--text-xs); }
.city-card i { display: block; margin-top: 10px; color: var(--white); font-size: var(--text-xs); font-style: normal; font-weight: 800; }
.city-card em { position: absolute; z-index: 2; top: 10px; right: 12px; color: rgba(255,255,255,.58); font-size: var(--text-xs); font-style: normal; }

.protection { background: var(--sand); }
.centered-heading { max-width: 800px; margin-inline: auto; text-align: center; }
.centered-heading > p:last-child { color: var(--muted); }
.protection-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.protection-grid article { min-height: 245px; padding: 26px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.64); }
.protection-grid article > span { color: var(--accent); font-family: var(--font-display); font-size: .78rem; }
.protection-grid h3 { margin: 48px 0 10px; font-size: 1rem; }
.protection-grid p { margin: 0; color: var(--muted); font-size: var(--text-xs); }

.suppliers { background: var(--white); }
.supplier-panel { display: grid; grid-template-columns: 1.05fr .95fr; gap: 80px; align-items: center; padding: 66px; border-radius: 18px; background: var(--forest); color: var(--white); }
.supplier-copy h2 { max-width: 650px; }
.supplier-copy > p:not(.kicker) { max-width: 610px; color: rgba(255,255,255,.7); }
.supplier-steps { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.supplier-steps li { min-height: 96px; display: flex; flex-direction: column; justify-content: center; padding: var(--space-md); border: 1px solid rgba(255,255,255,.15); border-radius: 10px; background: rgba(255,255,255,.06); }
.supplier-steps p { margin: 0; font-size: var(--text-xs); }

.detail-preview { margin: 0 0 var(--space-2xl); }
.detail-preview-heading { display: none; }
.detail-preview-status { min-height: 54px; display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.72); color: var(--muted); font-size: var(--text-sm); }
@keyframes catalog-pulse { to { opacity: .25; transform: scale(.78); } }
.detail-preview-status.is-loading::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--forest); animation: catalog-pulse 900ms ease-in-out infinite alternate; }
.detail-preview-status.is-error { border-color: rgba(158,61,32,.24); color: var(--accent-ink); }
.detail-preview-status button { min-height: 44px; margin-left: auto; padding: 0 17px; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font-weight: 800; cursor: pointer; }
.detail-preview-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-md); }
.detail-preview-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(23,36,33,.11); border-radius: 16px; background: var(--white); box-shadow: 0 10px 32px rgba(23,36,33,.07); }
.detail-preview-card-media { position: relative; min-height: 220px; overflow: hidden; background: var(--sand-deep); }
.detail-preview-card-media > img { width: 100%; height: 240px; object-fit: cover; }
.detail-preview-card-media.has-image-error { display: grid; place-items: center; }
.detail-image-error { max-width: 28ch; align-self: center; justify-self: center; padding: var(--space-lg); color: var(--muted); font-size: var(--text-sm); text-align: center; }
.detail-preview-card-body { flex: 1; display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md); }
.detail-preview-badge { width: fit-content; padding: 4px 8px; border-radius: 999px; background: rgba(238,118,90,.13); color: var(--accent-ink); font-size: var(--text-xs); font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.detail-preview-card h3 { margin: 0; font-family: var(--font-display); font-size: 1.45rem; font-weight: 520; line-height: 1.15; }
.detail-preview-summary { margin: 0; color: var(--muted); font-size: .78rem; }
.detail-preview-card-facts { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 3px 12px; margin: 0; padding-top: var(--space-sm); border-top: 1px solid var(--line); font-size: var(--text-xs); }
.detail-preview-card-facts dt { color: var(--muted); }
.detail-preview-card-facts dd { margin: 0; font-weight: 750; text-align: right; }
.detail-preview-open { min-height: 46px; margin-top: auto; border: 1px solid var(--forest); border-radius: 999px; background: var(--forest); color: var(--white); font-size: .78rem; font-weight: 800; cursor: pointer; }
.detail-preview-open:hover { background: var(--forest-soft); }
.catalog-directory-heading { max-width: 760px; margin: 0 0 var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--line); }
.catalog-directory-heading h3 { margin: 0 0 var(--space-xs); font-family: var(--font-display); font-size: clamp(1.55rem,2.4vw,2.1rem); font-weight: 520; }
.catalog-directory-heading > p:last-child { margin: 0; color: var(--muted); }

body.product-detail-open main > :not(.product-detail-page) { display: none !important; }
body.product-detail-open .site-footer { display: none; }
.product-detail-page { min-height: calc(100svh - 108px); padding-bottom: max(var(--space-3xl),env(safe-area-inset-bottom)); background: var(--sand); }
.product-detail-hero { width: min(1120px,calc(100% - 48px)); display: grid; grid-template-columns: minmax(0,1.05fr) minmax(400px,.95fr); min-height: 460px; margin: 0 auto; overflow: hidden; border-radius: 18px; background: var(--white); }
.product-detail-hero-media { position: relative; min-height: 420px; display: grid; grid-template-rows: minmax(0,1fr) auto; overflow: hidden; background: var(--sand-deep); }
.product-detail-hero-media > img { width: 100%; height: 100%; object-fit: cover; }
.product-detail-hero-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(36px,5vw,64px); }
.product-detail-back { min-height: 44px; margin: 0 0 var(--space-xl); padding: 0; border: 0; background: transparent; color: var(--forest); font-size: .95rem; font-weight: 850; cursor: pointer; }
.product-detail-back::before { content: "←"; margin-right: 10px; font-size: 1.05em; }
.product-detail-back:hover { text-decoration: underline; text-underline-offset: 4px; }
.product-detail-hero h1 { max-width: 820px; margin: var(--space-sm) 0 var(--space-md); font-family: var(--font-display); font-size: clamp(1.9rem,3.4vw,3.1rem); font-weight: 470; letter-spacing: -.03em; line-height: 1.06; }
.product-detail-summary { max-width: 58ch; margin-bottom: var(--space-md); color: var(--muted); font-size: clamp(.9rem,1.5vw,1.05rem); }
.product-detail-duration { margin: 0; padding-top: var(--space-sm); border-top: 1px solid var(--line); color: var(--forest); font-size: .78rem; font-weight: 800; }
.product-detail-body { width: min(1120px,calc(100% - 48px)); display: grid; gap: var(--space-xl); margin: 0 auto; padding: var(--space-2xl) 0 0; }
.product-detail-body h2 { margin-bottom: var(--space-md); font-size: clamp(1.75rem,3vw,2.5rem); }
.product-detail-status-section { padding: clamp(24px,4vw,42px); border-radius: 18px; background: var(--forest); color: var(--white); }
.product-detail-status-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: rgba(255,255,255,.2); }
.product-detail-status-grid > div { min-height: 122px; padding: var(--space-md); background: var(--forest); }
.product-detail-status-grid dt { color: rgba(255,255,255,.65); font-size: var(--text-xs); font-weight: 750; text-transform: uppercase; }
.product-detail-status-grid dd { margin: var(--space-sm) 0 0; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.25; }
.product-detail-quick-facts { padding: clamp(24px,4vw,42px); border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.product-detail-quick-facts dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-md); margin: 0; }
.product-detail-quick-facts dl > div { padding-left: var(--space-md); border-left: 2px solid var(--accent); }
.product-detail-quick-facts dt { color: var(--muted); font-size: var(--text-xs); }
.product-detail-quick-facts dd { margin: var(--space-xs) 0 0; font-weight: 780; }
.product-detail-highlights { padding: clamp(24px,4vw,42px); border-radius: 18px; background: var(--white); }
.product-detail-highlights ul { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: var(--space-sm); margin: 0; padding: 0; list-style: none; counter-reset: detail-highlight; }
.product-detail-highlights li { min-height: 175px; padding: var(--space-md); border: 1px solid var(--line); border-radius: 12px; color: var(--muted); counter-increment: detail-highlight; }
.product-detail-highlights li::before { content: "0" counter(detail-highlight); display: block; margin-bottom: var(--space-lg); color: var(--accent-ink); font-family: var(--font-display); font-size: 1.1rem; }
.product-detail-two-column { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-md); }
.product-detail-list-panel, .product-detail-numbered-list { padding: clamp(24px,4vw,38px); border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.product-detail-list-panel.is-review, .product-detail-list-panel.is-excluded { background: #fbf4ea; }
.product-detail-list-panel ul, .product-detail-numbered-list ul { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.product-detail-list-panel li, .product-detail-numbered-list li { position: relative; padding-left: 24px; color: var(--muted); }
.product-detail-list-panel li::before { content: "✓"; position: absolute; left: 0; color: var(--forest); font-weight: 900; }
.product-detail-list-panel.is-review li::before, .product-detail-list-panel.is-excluded li::before { content: "•"; color: var(--accent-ink); }
.product-detail-itinerary { padding: clamp(24px,4vw,42px); border-radius: 18px; background: var(--white); }
.product-detail-section-note { max-width: 75ch; margin-bottom: var(--space-lg); color: var(--muted); font-size: .78rem; }
.product-detail-itinerary ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: itinerary; }
.product-detail-itinerary li { position: relative; min-height: 130px; padding: 0 0 var(--space-lg) 88px; counter-increment: itinerary; }
.product-detail-itinerary li:not(:last-child)::after { content: ""; position: absolute; top: 46px; bottom: 0; left: 27px; width: 1px; background: var(--line); }
.product-detail-itinerary li::before { content: counter(itinerary); position: absolute; top: 0; left: 0; width: 56px; height: 44px; display: grid; place-items: center; border-radius: 999px; background: var(--forest); color: var(--white); font-family: var(--font-display); font-size: 1.2rem; }
.product-detail-itinerary-stage { color: var(--accent-ink); font-size: var(--text-xs); font-weight: 850; text-transform: uppercase; }
.product-detail-itinerary h3 { margin: var(--space-2xs) 0; font-family: var(--font-display); font-size: 1.35rem; }
.product-detail-itinerary li p { margin: 0; color: var(--muted); }
.product-detail-numbered-list ul { counter-reset: detail-list; }
.product-detail-numbered-list li { padding: var(--space-sm) 0 var(--space-sm) 54px; border-bottom: 1px solid var(--line); counter-increment: detail-list; }
.product-detail-numbered-list li:last-child { border-bottom: 0; }
.product-detail-numbered-list li::before { content: counter(detail-list); position: absolute; top: 10px; left: 0; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--forest); font-weight: 850; }
.product-detail-browse { padding: clamp(20px,3vw,32px) clamp(24px,4vw,44px); border-radius: 18px; background: var(--white); }
.product-detail-browse p { max-width: 62ch; margin: 0 auto; color: var(--muted); text-align: center; }
.product-detail-message { min-height: calc(100svh - 108px); display: grid; align-content: center; justify-items: start; padding: clamp(32px,8vw,120px); background: var(--sand); }
.product-detail-message .product-detail-back { margin-bottom: var(--space-lg); }
.product-detail-message-title { max-width: 760px; margin-bottom: var(--space-md); font-family: var(--font-display); font-size: clamp(2.3rem,5vw,4.4rem); font-weight: 500; line-height: 1.05; }
.product-detail-message.is-loading .product-detail-message-title { color: var(--muted); font-family: var(--font-body); font-size: .9rem; font-weight: 700; }
.product-detail-message-body { max-width: 62ch; color: var(--muted); }
.product-detail-retry { margin-top: var(--space-md); }

.site-footer { padding: 62px 0 28px; background: #102622; color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 34px 50px; align-items: start; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 20px; color: rgba(255,255,255,.76); font-size: var(--text-xs); }
.footer-grid > p { max-width: 580px; margin: 0; color: rgba(255,255,255,.55); font-size: var(--text-xs); }
.footer-meta { display: flex; justify-content: flex-end; gap: 18px; color: rgba(255,255,255,.66); font-size: var(--text-xs); }

.product-modal { width: min(780px, calc(100% - 28px)); max-height: 90vh; padding: 0; overflow: auto; border: 0; border-radius: 16px; background: var(--white); color: var(--ink); box-shadow: 0 28px 90px rgba(0,0,0,.3); }
.product-modal::backdrop { background: rgba(7,20,17,.65); backdrop-filter: blur(5px); }
.modal-close { position: sticky; z-index: 3; top: 12px; float: right; width: 38px; height: 38px; margin: 12px 12px -50px 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--ink); font-size: 1.2rem; cursor: pointer; }
.modal-hero { min-height: 220px; display: flex; flex-direction: column; justify-content: end; padding: 34px; background: linear-gradient(135deg,#3e6a60,#173a33); color: var(--white); }
.modal-hero h2 { max-width: 620px; margin: 8px 0 0; font-size: clamp(2rem,5vw,3.1rem); }
.modal-demo { width: fit-content; padding: 4px 7px; border: 1px solid rgba(255,255,255,.35); border-radius: 5px; font-size: var(--text-xs); }
.modal-body { padding: 32px 34px 38px; }
.modal-facts { display: grid; grid-template-columns: repeat(3,1fr); margin-bottom: 30px; border: 1px solid var(--line); border-radius: 10px; }
.modal-facts div { min-width: 0; padding: 16px; border-right: 1px solid var(--line); }
.modal-facts div:last-child { border-right: 0; }
.modal-facts span { display: block; color: var(--muted); font-size: var(--text-xs); }
.modal-facts strong { display: block; margin-top: 4px; font-size: var(--text-xs); overflow-wrap: anywhere; }
.modal-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.modal-columns h3 { font-size: .9rem; }
.modal-columns ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: var(--text-xs); }
.modal-summary, .modal-confirmation, .modal-source { color: var(--muted); font-size: .76rem; }
.modal-confirmation { padding: 14px; border-radius: 9px; background: rgba(213,161,76,.12); color: #76541c; }
.modal-service-inventory { margin-top: 24px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--sand); }
.modal-service-inventory h3 { margin: 0 0 12px; font-size: .9rem; }
.modal-service-inventory ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 18px; margin: 0; padding: 0; list-style: none; }
.modal-service-inventory li { display: grid; gap: 2px; min-width: 0; }
.modal-service-inventory a { color: var(--forest); font-size: .78rem; font-weight: 800; overflow-wrap: anywhere; }
.modal-service-inventory span, .modal-service-inventory p { color: var(--muted); font-size: .68rem; }
.modal-service-inventory p { margin: 14px 0 0; }
.modal-source a { color: var(--forest); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.modal-price-row { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.modal-price-row span, .modal-price-row p { color: var(--muted); font-size: var(--text-xs); }
.modal-price-row strong { font-size: 1.8rem; }
.product-payment-panel { display: grid; gap: 13px; margin-top: 28px; padding: 24px; border: 1px solid rgba(23,58,51,.16); border-radius: 14px; background: var(--sand); }
.product-payment-panel .kicker { margin: 0; color: var(--forest); }
.product-payment-panel h3 { margin: 0; font-family: var(--font-display); font-size: 1.55rem; font-weight: 500; }
.product-payment-amount { color: var(--forest); font-family: var(--font-display); font-size: clamp(2rem,6vw,3rem); font-weight: 600; }
.product-payment-panel > p:not(.kicker):not(.payment-error) { margin: 0; color: var(--muted); font-size: max(12px,var(--text-xs)); line-height: 1.55; }
.product-payment-acceptance { min-height: 52px; display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 12px; align-items: start; padding: 12px; border-radius: 10px; background: var(--white); cursor: pointer; }
.product-payment-acceptance input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--forest); }
.product-payment-acceptance span { font-size: .8rem; line-height: 1.5; }
.product-payment-panel :is(button,input):focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.product-payment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.product-payment-actions .button { min-height: 48px; }
.product-payment-actions .button:disabled { cursor: not-allowed; opacity: .5; }
.product-payment-actions .payment-secondary-action { min-height: 44px; }
.product-payment-panel .payment-error { margin: 0; }
/* Service (SKU) and date selection: matching box-card options that
   cross-multiply. A checked radio tints its card with the coral accent. */
.product-detail-payment { margin-top: var(--space-2xl); }
.product-detail-payment > h2 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 500; }
.product-detail-payment-heading { margin: var(--space-lg) 0 12px; font-size: 1rem; font-weight: 800; }
.product-detail-sku-options, .product-detail-date-options { margin: 0 0 var(--space-lg); padding: 0; border: 0; }
.product-detail-sku-options legend, .product-detail-date-options legend { padding: 0; margin-bottom: 10px; font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.product-detail-sku-options { display: flex; flex-wrap: wrap; gap: 12px; }
.product-detail-date-grid, .product-detail-date-more { display: flex; flex-wrap: wrap; gap: 10px; }
.product-detail-date-more { margin-top: 10px; }
.product-detail-sku-option, .product-detail-date-option { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 18px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--white); cursor: pointer; transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.product-detail-sku-option { min-width: 220px; }
.product-detail-date-option { min-width: 92px; justify-content: center; text-align: center; }
.product-detail-sku-option:hover, .product-detail-date-option:hover { border-color: var(--forest-soft); }
.product-detail-sku-option input, .product-detail-date-option input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; }
.product-detail-sku-option:has(input:checked), .product-detail-date-option:has(input:checked) { border-color: var(--accent); background: rgba(238,118,90,.08); box-shadow: 0 0 0 1px var(--accent); }
.product-detail-sku-option:has(input:focus-visible), .product-detail-date-option:has(input:focus-visible) { outline: 2px solid var(--forest); outline-offset: 2px; }
.product-detail-sku-option-copy { display: grid; gap: 2px; }
.product-detail-sku-name { font-size: .85rem; font-weight: 700; color: var(--ink); }
.product-detail-sku-city { font-size: var(--text-xs); color: var(--muted); }
.product-detail-sku-price { font-size: .85rem; font-weight: 800; color: var(--forest); }
.product-detail-date-option-copy { display: grid; gap: 2px; }
.product-detail-date-weekday { font-size: var(--text-xs); color: var(--muted); }
.product-detail-date-day { font-size: .85rem; font-weight: 800; color: var(--ink); }
.product-detail-date-more-button { min-height: 40px; margin-top: 12px; padding: 0; border: 0; background: transparent; color: var(--forest); font-size: var(--text-xs); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.product-detail-sku-payment { display: grid; gap: 13px; margin-top: 20px; padding: 24px; border: 1px solid rgba(23,58,51,.16); border-radius: 14px; background: var(--sand); }
.product-detail-sku-payment .kicker { margin: 0; color: var(--forest); }
.product-detail-sku-payment h4 { margin: 0; font-family: var(--font-display); font-size: 1.55rem; font-weight: 500; }
.product-detail-sku-date { margin: 0; color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.product-detail-sku-payment .product-detail-section-note { margin: 0; }
.coordination-modal { width: min(620px, calc(100% - 28px)); max-height: 90vh; padding: 0; overflow: auto; border: 0; border-radius: 16px; background: var(--white); color: var(--ink); box-shadow: 0 28px 90px rgba(0,0,0,.3); }
.coordination-modal::backdrop { background: rgba(7,20,17,.65); backdrop-filter: blur(5px); }
.coordination-modal-body { padding: 42px; }
.coordination-modal-body h2 { margin: 8px 0 12px; font-size: clamp(2rem,5vw,2.8rem); }
.coordination-intro { color: var(--muted); font-size: .78rem; }
.coordination-offer { display: grid; gap: 5px; margin: 24px 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--sand); }
.coordination-offer span, .coordination-result > span { color: var(--muted); font-size: var(--text-xs); }
.coordination-offer strong { font-size: .82rem; }
.coordination-modal form { display: grid; gap: 13px; }
.coordination-modal label { font-size: var(--text-xs); font-weight: 800; }
.coordination-modal input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); font: inherit; }
.coordination-safety { padding: 14px; border-radius: 9px; background: rgba(213,161,76,.12); color: #76541c; }
.coordination-safety strong { font-size: var(--text-xs); }
.coordination-safety p, .coordination-error, .coordination-result p { margin: 6px 0 0; font-size: var(--text-xs); }
.coordination-error { color: #a13737; }
.coordination-result { display: grid; gap: 7px; margin-top: 24px; padding: 20px; border-radius: 10px; background: #eef5f2; }
.coordination-result > strong { overflow-wrap: anywhere; font-size: .82rem; }
.coordination-result .button { width: fit-content; margin-top: 6px; }
.toast { position: fixed; z-index: 100; right: 22px; bottom: 22px; max-width: 380px; padding: 14px 17px; border-radius: 10px; background: var(--forest); color: var(--white); box-shadow: var(--shadow); font-size: var(--text-xs); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity 180ms ease, transform 180ms ease; }
.toast.is-visible { opacity: 1; transform: none; }

html:lang(en) .hero h1 { max-width: 880px; font-size: clamp(3.2rem,5.7vw,5.35rem); }
html:lang(en) .category-copy strong { font-size: 1.42rem; }

@media (max-width: 1120px) {
  :root { --container: min(100% - 36px, 920px); }
  .section { padding: var(--space-2xl) 0; }
  .nav-toggle { display: block; }
  .site-nav { position: fixed; z-index: 2; inset: 0; display: grid; align-content: center; justify-items: center; gap: 22px; padding: 100px 24px; background: var(--white); font-family: var(--font-display); font-size: 1.3rem; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity 180ms ease, transform 180ms ease, visibility 180ms; }
  .nav-open .site-nav { opacity: 1; visibility: visible; transform: none; }
  .nav-open .nav-toggle > span:not(.sr-only) { top: 21px; transform: rotate(45deg); }
  .nav-open .nav-toggle > span:last-child { transform: rotate(-45deg); }
  .category-grid { grid-template-columns: repeat(2,1fr); }
  .category-card, .category-card:nth-child(n+4) { grid-column: auto; }
  .category-card:last-child { grid-column: 1 / -1; }
  .planner-layout { grid-template-columns: 1fr; }
  .planner-intro { max-width: 760px; }
  .planner-result-shell { max-width: 720px; }
  .city-grid { grid-template-columns: 1fr 1fr; }
  .protection-grid { grid-template-columns: repeat(2,1fr); }
  .supplier-panel { grid-template-columns: 1fr; gap: 44px; padding: 50px; }
  .product-detail-hero { grid-template-columns: 1fr; }
  .product-detail-hero-media { min-height: min(62vw,620px); }
  .product-detail-status-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-detail-highlights ul { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 700px) {
  :root { --container: calc(100% - 28px); }
  h2 { font-size: clamp(2rem,10vw,2.8rem); }
  .section { padding: var(--space-2xl) 0; }
  .demo-banner p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .demo-banner span { flex: 0 0 auto; }
  .site-header { height: 68px; }
  .section-tabs { top: 68px; }
  .section-tabs-strip button { padding: 15px 11px; font-size: .78rem; }
  .brand-copy small { max-width: min(210px, 52vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .header-actions { gap: 6px; }
  .account-shortcut { padding: 0 3px; }
  .account-shortcut-full { display: none; }
  .account-shortcut-compact { display: inline; }
  .site-footer .brand-copy small { max-width: none; overflow: visible; white-space: normal; }
  .hero { min-height: 670px; align-items: end; }
  .hero-media img { object-position: 58% center; }
  .hero-shade { background: linear-gradient(0deg, rgba(7,20,17,.9) 0%, rgba(7,20,17,.52) 66%, rgba(7,20,17,.14) 100%); }
  .hero-content { padding: 72px 0 48px; }
  .hero h1, html:lang(en) .hero h1 { font-size: clamp(2.55rem,12vw,3.65rem); }
  .hero-search { grid-template-columns: 24px minmax(0,1fr); gap: 7px; padding: 9px 10px 10px 15px; border-radius: 13px; }
  .hero-search input { height: 45px; font-size: .8rem; }
  .hero-search button { grid-column: 1 / -1; min-height: 47px; }
  .trust-bar-grid { grid-template-columns: 1fr; padding: 12px 0; }
  .trust-bar-grid div { padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .trust-bar-grid div:last-child { border-bottom: 0; }
  .marketplace-heading-simple, .marketplace-heading, .services-heading, .destination-heading { align-items: flex-start; flex-direction: column; gap: 22px; }
  .result-tools { width: 100%; align-items: stretch; }
  .preview-filters { justify-content: flex-start; }
  .preview-filters select { flex: 1 1 45%; }
  .section-heading { margin-bottom: 32px; }
  .category-grid { display: flex; margin-right: -14px; padding-right: 14px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .category-card, .category-card:last-child { min-width: 78vw; height: 340px; grid-column: auto; scroll-snap-align: start; }
  .product-media { height: 245px; }
  .planner-result-shell { padding: 12px; border-radius: 17px; }
  .planner-examples { display: grid; grid-template-columns: 1fr; }
  .planner-examples button { text-align: left; }
  .trip-constraints-grid { grid-template-columns: 1fr; }
  .ai-plan-card { padding: 15px; }
  .city-grid { grid-template-columns: 1fr; }
  .city-card, .city-card-wide { grid-column: auto; grid-row: auto; height: 360px; }
  .protection-grid { grid-template-columns: 1fr; }
  .protection-grid article { min-height: 205px; }
  .protection-grid h3 { margin-top: 34px; }
  .supplier-panel { padding: 34px 23px; }
  .supplier-steps { grid-template-columns: 1fr; }
  .supplier-steps li { min-height: 96px; }
  .detail-preview-grid { grid-template-columns: 1fr; }
  .detail-preview-card-media > img { height: 260px; }
  .product-detail-hero, .product-detail-body { width: calc(100% - 28px); }
  .product-detail-hero { min-height: 0; }
  .product-detail-hero-media { min-height: 64vw; }
  .product-detail-hero-copy { padding: 36px 22px 46px; }
  .product-detail-back { margin-bottom: var(--space-lg); }
  .product-detail-body { gap: var(--space-md); padding-top: var(--space-md); }
  .product-detail-status-grid, .product-detail-quick-facts dl, .product-detail-two-column, .product-detail-highlights ul { grid-template-columns: 1fr; }
  .product-detail-status-grid > div { min-height: 104px; }
  .product-detail-highlights li { min-height: auto; }
  .product-detail-highlights li::before { margin-bottom: var(--space-sm); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-links, .footer-meta { justify-content: flex-start; }
  .footer-meta { flex-direction: column; gap: 6px; }
  .modal-body { padding: 26px 22px 30px; }
  .coordination-modal-body { padding: 34px 22px 28px; }
  .modal-hero { padding: 28px 22px; }
  .modal-facts, .modal-columns, .modal-service-inventory ul { grid-template-columns: 1fr; }
  .modal-facts div { border-right: 0; border-bottom: 1px solid var(--line); }
  .modal-facts div:last-child { border-bottom: 0; }
  .modal-price-row { align-items: stretch; flex-direction: column; }
  .modal-price-row .button { width: 100%; }
  .toast { right: 14px; bottom: 14px; left: 14px; }
}

@media (max-width: 480px) {
  .hero-quick-links { gap: 8px 10px; }
  .product-footer { align-items: stretch; flex-direction: column; }
  .product-action { width: 100%; }
  .ai-match { grid-template-columns: 70px minmax(0,1fr); }
  .ai-match img { width: 70px; height: 68px; }
  .ai-plan-days { grid-template-columns: 1fr; }
  .structured-product-grid { grid-template-columns: 1fr; }
  .structured-evidence li { align-items: flex-start; flex-direction: column; }
  .structured-evidence span { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
  /* Spatial motion collapses to a plain appearance; nothing slides. */
  [data-panel].is-active-panel,
  .is-active-panel :is(.category-card, .city-card, .protection-grid article) { animation: none; }
}

.account-layout { display: grid; gap: var(--space-xl); align-items: start; max-width: 42rem; }
.account-form { display: grid; gap: var(--space-xs); max-width: 34rem; margin-top: var(--space-md); }
.account-form label { font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.account-form input, .account-form select { min-height: 46px; padding: 0 var(--space-sm); border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink); font-size: .92rem; }
.account-form input:focus-visible, .account-form select:focus-visible { outline: 2px solid var(--forest); outline-offset: 1px; }
.account-form .button { margin-top: var(--space-xs); justify-self: start; }
.account-note { max-width: 46ch; color: var(--muted); font-size: .88rem; }
.account-signed-in { display: grid; gap: var(--space-xs); max-width: 34rem; margin-top: var(--space-md); }
.account-signed-in-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0; }
.account-signed-in-email { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0; word-break: break-all; }
.account-signed-in .button { margin-top: var(--space-xs); justify-self: start; }
.account-status { min-height: 1.4em; margin-top: var(--space-sm); color: var(--forest); font-size: .88rem; font-weight: 600; }

/* Account console: one section, three internal tabs (Plans / Purchases /
   Account) with a sticky tab bar under an identity bar. */
.account-console-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-md); flex-wrap: wrap; }
.account-console-bar h2 { margin-bottom: 0; }
.account-console-identity { margin: 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: var(--text-sm); font-weight: 700; }
.account-console-tabs { position: sticky; top: 128px; z-index: 10; display: flex; gap: 4px; margin: var(--space-lg) 0 var(--space-xl); padding-bottom: 2px; border-bottom: 1px solid var(--line); background: var(--paper); }
.account-console-tabs button { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 14px; border: 0; background: transparent; color: var(--muted); font-size: .9rem; font-weight: 800; cursor: pointer; }
.account-console-tabs button::after { content: ""; position: absolute; right: 12px; bottom: -1px; left: 12px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-medium) var(--ease-out); }
.account-console-tabs button:hover { color: var(--ink); }
.account-console-tabs button[aria-selected="true"] { color: var(--ink); }
.account-console-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.account-console-tabs button:focus-visible { outline: 2px solid var(--forest); outline-offset: -4px; border-radius: 6px; }
.account-tab-badge { min-width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0 6px; border-radius: 999px; background: var(--forest); color: var(--white); font-size: 11px; font-weight: 800; }
.account-console-panel[hidden] { display: none; }
.console-empty { display: grid; gap: var(--space-sm); justify-items: start; padding: var(--space-lg) 0; }
.console-empty h4 { margin: 0; font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; }
.console-empty p { margin: 0; color: var(--muted); }

.login-confirmation-modal { width: min(560px, calc(100% - 28px)); padding: 0; border: 0; border-radius: 16px; background: var(--white); color: var(--ink); box-shadow: 0 28px 90px rgba(0,0,0,.3); }
.login-confirmation-modal::backdrop { background: rgba(7,20,17,.65); backdrop-filter: blur(5px); }
.login-confirmation-body { padding: clamp(28px,5vw,46px); }
.login-confirmation-body h2 { margin: var(--space-xs) 0 var(--space-sm); font-size: clamp(2rem,5vw,3rem); }
.login-confirmation-body > p:not(.kicker) { color: var(--muted); }
.login-confirmation-status { min-height: 1.5em; margin: var(--space-md) 0 0; color: #9b2f25 !important; font-size: var(--text-sm); font-weight: 700; }
.login-confirmation-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }

.payments { min-height: calc(100svh - 132px); background: var(--sand); }
.payment-root { width: min(1120px,100%); margin-inline: auto; }
.payment-root :is(button, a, input, summary):focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.payment-root button:disabled { cursor: not-allowed; opacity: .52; transform: none; }
.payment-progress { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; margin: 0 0 var(--space-xl); padding: 0; list-style: none; }
.payment-progress li { position: relative; min-width: 0; display: flex; align-items: center; gap: var(--space-sm); color: var(--muted); font-size: var(--text-sm); font-weight: 700; }
.payment-progress li:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 21px; right: var(--space-md); left: 52px; height: 1px; background: var(--line); }
.payment-progress-marker { position: relative; z-index: 1; width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border: 1px solid rgba(23,58,51,.28); border-radius: 50%; background: var(--sand); color: var(--forest); font-weight: 850; }
.payment-progress .is-complete, .payment-progress .is-current { color: var(--forest); }
.payment-progress .is-complete .payment-progress-marker, .payment-progress .is-current .payment-progress-marker { border-color: var(--forest); background: var(--forest); color: var(--white); }
.payment-progress .is-current .payment-progress-marker { box-shadow: 0 0 0 5px rgba(23,58,51,.1); }
.payment-review-heading { max-width: 760px; margin-bottom: var(--space-lg); }
.payment-review-heading h2 { margin-bottom: var(--space-sm); }
.payment-review-heading > p:last-child { max-width: 62ch; margin: 0; color: var(--muted); }
.payment-review-layout { display: grid; grid-template-columns: minmax(0,1.72fr) minmax(300px,.88fr); gap: var(--space-lg); align-items: start; }
.payment-review-main, .payment-summary, .payment-status-card { border: 1px solid rgba(23,36,33,.1); border-radius: 18px; background: var(--white); box-shadow: 0 12px 40px rgba(23,36,33,.08); }
.payment-review-main { display: grid; gap: var(--space-md); padding: clamp(22px,4vw,38px); }
.payment-quote-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; border: 1px solid var(--line); border-radius: 12px; }
.payment-quote-facts > div { min-width: 0; padding: var(--space-md); }
.payment-quote-facts > div + div { border-left: 1px solid var(--line); }
.payment-quote-facts dt, .payment-status-facts dt, .payment-terms-evidence dt { color: var(--muted); font-size: var(--text-xs); font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.payment-quote-facts dd, .payment-status-facts dd, .payment-terms-evidence dd { margin: var(--space-2xs) 0 0; overflow-wrap: anywhere; font-family: var(--font-display); font-size: 1.12rem; }
.payment-breakdown { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.payment-breakdown h3 { margin: 0; padding: var(--space-md); border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; }
.payment-fee-line, .payment-total, .payment-summary-due { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); }
.payment-fee-line { padding: var(--space-md); background: rgba(23,58,51,.035); }
.payment-fee-line span::before { content: ""; width: 9px; height: 9px; display: inline-block; margin-right: var(--space-sm); border-radius: 50%; background: var(--forest); }
.payment-excluded-fees { margin: 0; padding: var(--space-md); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-sm); }
.payment-total { padding: var(--space-md); border-top: 1px solid var(--line); font-family: var(--font-display); font-size: 1.2rem; }
.payment-total strong, .payment-summary-due strong { color: var(--forest); font-size: 1.55rem; }
.payment-terms { padding: var(--space-md); border: 1px solid var(--line); border-radius: 12px; background: var(--sand); scroll-margin-top: 150px; }
.payment-terms summary { min-height: 44px; display: flex; align-items: center; color: var(--forest); font-weight: 800; cursor: pointer; }
.payment-terms-intro { margin: var(--space-sm) 0 var(--space-xs); color: var(--muted); font-size: var(--text-sm); }
.payment-terms ul { display: grid; gap: var(--space-xs); margin: 0; padding-left: var(--space-md); color: var(--muted); font-size: var(--text-sm); }
.payment-terms-evidence { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: var(--space-md); margin: var(--space-md) 0 0; padding-top: var(--space-md); border-top: 1px solid var(--line); }
.payment-terms-evidence dd { font-family: var(--font-body); font-size: var(--text-xs); }
.payment-terms-hash { word-break: break-all; }
.payment-acceptance { min-height: 52px; display: grid; grid-template-columns: 24px minmax(0,1fr); gap: var(--space-sm); align-items: start; padding: var(--space-sm); border-radius: 10px; cursor: pointer; }
.payment-acceptance:hover { background: rgba(23,58,51,.04); }
.payment-acceptance input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--forest); }
.payment-acceptance span { font-size: var(--text-sm); }
.payment-acceptance a { min-height: 44px; display: inline-flex; align-items: center; margin-block: -10px; color: var(--forest); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.payment-error { margin: -8px 0 0; color: #9b2f25; font-size: var(--text-sm); font-weight: 700; }
.payment-summary { position: sticky; top: 148px; display: grid; gap: var(--space-md); padding: clamp(24px,3vw,34px); }
.payment-summary-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: rgba(23,58,51,.08); color: var(--forest); font-family: var(--font-display); font-size: 1.35rem; }
.payment-summary h3 { margin: 0; font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; }
.payment-summary-due { padding: var(--space-md) 0; border-block: 1px solid var(--line); }
.payment-checkout-button { width: 100%; min-height: 54px; border-radius: 12px; }
.payment-summary-note { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.payment-assurances { display: grid; gap: var(--space-sm); margin: 0; padding: var(--space-md) 0; border-top: 1px solid var(--line); list-style: none; font-size: var(--text-sm); }
.payment-assurances li { position: relative; padding-left: 30px; }
.payment-assurances li::before { content: "✓"; position: absolute; top: -2px; left: 0; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(23,58,51,.08); color: var(--forest); font-weight: 900; }
.payment-secondary-action { min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--accent-ink); font-weight: 800; text-align: left; cursor: pointer; }
.payment-booking-boundary { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: var(--space-sm); align-items: start; margin-top: var(--space-lg); padding: var(--space-md); border: 1px solid rgba(23,58,51,.16); border-radius: 12px; background: rgba(255,255,255,.72); }
.payment-boundary-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(23,58,51,.08); color: var(--forest); font-weight: 900; }
.payment-booking-boundary p { margin: var(--space-2xs) 0 0; color: var(--muted); font-size: var(--text-sm); }
.payment-message { min-height: 420px; display: grid; align-content: center; justify-items: start; padding: clamp(28px,7vw,72px); border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.payment-message-title { max-width: 760px; margin-bottom: var(--space-sm); }
.payment-message-body { max-width: 62ch; color: var(--muted); }
.payment-message .button { margin-top: var(--space-md); }
.payment-status-card { max-width: 900px; margin-inline: auto; padding: clamp(26px,5vw,58px); text-align: center; }
.payment-status-card .kicker { margin-bottom: var(--space-sm); color: var(--forest); }
.payment-status-title { margin-bottom: var(--space-sm); font-size: clamp(2.35rem,5vw,4rem); }
.payment-status-lede { max-width: 650px; margin: 0 auto var(--space-xl); color: var(--muted); }
.payment-status-progress { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 0 0 var(--space-xl); padding: 0; list-style: none; }
.payment-status-progress li { position: relative; min-width: 0; display: grid; justify-items: center; gap: var(--space-xs); color: var(--muted); font-size: var(--text-xs); }
.payment-status-progress li:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 17px; right: -50%; left: 50%; height: 2px; background: var(--line); }
.payment-status-progress .is-complete:not(:last-child)::after { background: var(--forest); }
.payment-status-marker { position: relative; z-index: 1; width: 36px; height: 36px; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 50%; background: var(--white); color: var(--forest); font-weight: 900; }
.payment-status-progress .is-complete .payment-status-marker { border-color: var(--forest); background: var(--forest); color: var(--white); }
.payment-status-progress .is-current .payment-status-marker { border-color: var(--gold); color: #76541c; box-shadow: 0 0 0 4px rgba(213,161,76,.12); }
.payment-status-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; text-align: left; }
.payment-status-facts > div { min-width: 0; padding: var(--space-md); }
.payment-status-facts > div + div { border-left: 1px solid var(--line); }
.payment-status-badge { width: fit-content; padding: 5px 10px; border: 1px solid currentColor; border-radius: 999px; color: #76541c; font-family: var(--font-body) !important; font-size: var(--text-xs) !important; font-weight: 800; }
.payment-status-badge.is-paid { color: #285f4d; }
.payment-status-badge:is(.is-terminal_not_paid,.is-attempt_expired) { color: #9b2f25; }
.payment-processing-note { margin: var(--space-md) 0 0; padding: var(--space-sm) var(--space-md); border-radius: 10px; background: rgba(213,161,76,.12); color: #76541c; font-size: var(--text-sm); }
.payment-status-card .payment-booking-boundary { text-align: left; }
.payment-status-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-sm); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--line); }
.payment-status-actions .button { min-height: 46px; }
.payment-button-secondary { border-color: var(--forest); background: var(--white); color: var(--forest); }
.payment-button-secondary:hover { background: var(--sand); }
.payment-refund-boundary { margin: var(--space-md) 0 0; color: var(--muted); font-size: var(--text-xs); text-align: left; }

@media (max-width: 1120px) {
  .account-layout { gap: var(--space-lg); }
  .payment-review-layout { grid-template-columns: 1fr; }
  .payment-summary { position: static; }
}

@media (max-width: 700px) {
  .payment-progress { gap: var(--space-xs); }
  .payment-progress li { align-content: start; display: grid; justify-items: start; gap: var(--space-xs); }
  .payment-progress li:not(:last-child)::after { top: 21px; right: -4px; left: 48px; }
  .payment-progress-label { font-size: var(--text-xs); }
  .payment-review-main, .payment-summary, .payment-status-card { border-radius: 14px; }
  .payment-quote-facts, .payment-terms-evidence { grid-template-columns: 1fr; }
  .payment-quote-facts > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .payment-fee-line, .payment-total, .payment-summary-due { align-items: flex-start; flex-direction: column; gap: var(--space-xs); }
  .payment-status-card { padding: 28px 18px; }
  .payment-status-progress { grid-template-columns: 1fr; gap: 0; margin-left: var(--space-sm); }
  .payment-status-progress li { min-height: 64px; grid-template-columns: 36px minmax(0,1fr); align-items: start; justify-items: start; gap: var(--space-sm); text-align: left; }
  .payment-status-progress li:not(:last-child)::after { top: 36px; right: auto; bottom: 0; left: 17px; width: 2px; height: auto; }
  .payment-status-facts { grid-template-columns: 1fr; }
  .payment-status-facts > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .payment-status-actions { align-items: stretch; flex-direction: column; }
  .payment-status-actions .button { width: 100%; }
  .product-payment-actions { align-items: stretch; flex-direction: column; }
  .product-payment-actions :is(.button,.payment-secondary-action) { width: 100%; }
}

.plan-card { padding: var(--space-md); margin-bottom: var(--space-md); border: 1px solid var(--line); border-radius: 14px; background: var(--white); transition: box-shadow var(--dur-medium) var(--ease-out), border-color var(--dur-medium) var(--ease-out); }
.plan-card.is-highlighted { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(238,118,90,.24); }
.plan-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-md); }
.plan-card h4 { margin: 0 0 var(--space-2xs); font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; }
.plan-meta { margin: 0 0 var(--space-xs); color: var(--muted); font-size: var(--text-sm); }
.plan-missing-note { margin-top: var(--space-sm); }
.plan-progress { display: grid; gap: 4px; margin: var(--space-sm) 0 var(--space-md); }
.plan-progress-bar { position: relative; height: 6px; border-radius: 999px; background: var(--sand-deep); overflow: hidden; }
.plan-progress-bar span { display: block; height: 100%; border-radius: 999px; background: var(--forest); transition: width var(--dur-medium) var(--ease-out); }
.plan-progress-label { margin: 0; color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.plan-items { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-sm); }
.plan-item { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--line); }
.plan-item:first-child { border-top: 0; padding-top: 0; }
.plan-item-main { display: grid; gap: 2px; min-width: 0; }
.plan-item-main strong { font-weight: 700; color: var(--ink); }
.plan-item-detail, .plan-item-payline { color: var(--muted); font-size: var(--text-sm); }
.plan-item.is-retired .plan-item-main strong { text-decoration: line-through; color: var(--muted); }
.plan-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; text-align: right; }
.plan-item-price, .plan-order-ref { color: var(--muted); font-size: var(--text-sm); font-weight: 700; }
.plan-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: var(--text-xs); font-weight: 800; }
.plan-badge-paid { background: #e4eee6; color: var(--forest); }
.plan-badge-retired { background: var(--sand-deep); color: var(--accent-ink); }

/* Purchases tab: one card per paid service, newest first. */
.purchase-card { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-md); padding: var(--space-md); margin-bottom: var(--space-sm); border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.purchase-main { display: grid; gap: 2px; min-width: 0; }
.purchase-main strong { font-weight: 700; color: var(--ink); }
.purchase-meta { color: var(--muted); font-size: var(--text-sm); }
.purchase-source { font-size: var(--text-sm); color: var(--muted); }
.purchase-source .text-button { font-size: var(--text-sm); }
.purchase-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; text-align: right; }
.purchase-amount { font-weight: 800; color: var(--ink); }

/* Print: the saved plans become the document, everything else disappears. */
@media print {
  .demo-banner,
  .site-header,
  .section-tabs,
  .hero,
  .trust-bar,
  .site-footer,
  .skip-link,
  .account-console-bar,
  .account-console-tabs,
  [data-print-plans],
  [data-panel]:not([data-panel="account"]) { display: none !important; }

  html, body { background: #fff; color: #000; }
  .section { padding: 0; }
  .container { width: 100%; }

  /* Force the account section and its Plans tab visible even if another tab is
     selected, so the export does not depend on which tab happened to be open.
     The other console tabs stay hidden so only saved plans print. */
  [data-panel="account"] { display: block !important; animation: none !important; }
  [data-account-panel="plans"] { display: block !important; }
  [data-account-panel="purchases"],
  [data-account-panel="account"] { display: none !important; }

  .plan-card { break-inside: avoid; border: 1px solid #ccc; }
  .plan-item-side .button { display: none !important; }
  .plan-item-detail, .plan-item-payline, .plan-meta { color: #333; }

  @page { margin: 18mm; }
}

/* hidden is owned by the audience router; the shortlist state uses a class
   so the two do not overwrite each other. */
.ai-save-plan { display: none; }
.ai-save-plan.has-shortlist { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--line); }
.ai-save-plan span { color: var(--forest); font-size: var(--text-sm); font-weight: 600; }

@media (max-width: 720px) {
  .itinerary-map-canvas { min-height: 240px; }
}