/* Marketing site (Home + Pricing). Most styling is inline, as in the design
   handoff; this file holds what inline styles can't do: hovers, breakpoints,
   Leaflet overrides and the few states toggled from JS. */

/* The one vertical rhythm on Home: every band's top and bottom padding.
   Bands carry no margins, so a gap is never counted twice. */
:root { --sec: clamp(48px, 5.5vw, 72px); }

html, body { margin: 0; padding: 0; background: #ffffff; }
body { font-family: 'Figtree', system-ui, sans-serif; -webkit-font-smoothing: antialiased; color: #24231f; }
a { color: #24231f; text-decoration: none; }
a:hover { color: #9E5A0B; }
::selection { background: #F6DFB4; }
:focus-visible { outline: 2px solid #24231f; outline-offset: 3px; }
[hidden] { display: none !important; }
button { -webkit-tap-highlight-color: transparent; }

/* Hovers (the design's style-hover). !important because the base colours
   are inline. */
.h-ink:hover { background: #171714 !important; color: #ffffff !important; }
.h-amber:hover { background: #F0AB43 !important; color: #24231f !important; }
.h-outline:hover { border-color: #24231f !important; color: #24231f !important; }
.h-fill-ink:hover { background: #24231f !important; color: #ffffff !important; }
.h-note:hover { color: #9E5A0B !important; }
/* Overview columns: the whole column is the link, only the headline turns. */
.ov-cell:hover { color: #24231f; }
.ov-cell:hover .ov-h { color: #9E5A0B; }

/* Header: full nav from 1080px, CTA + MENU below. */
.nav-mobile { display: none !important; }
.menu-panel { display: none; }
@media (max-width: 1079px) {
  .nav-desktop { display: none !important; }
  .nav-mobile { display: flex !important; }
  .menu-open .menu-panel { display: flex; }
}
/* Pricing header drops "How it works" below 640px. */
@media (max-width: 639px) { .wide-only { display: none !important; } }

/* Leaflet, restyled to sit with the product UI. */
.leaflet-container { background: #edeae3 !important; font-family: 'Source Sans 3', sans-serif; }
.leaflet-tile-pane { filter: saturate(.55) sepia(.12) brightness(1.05) contrast(.9) hue-rotate(-6deg); }
.leaflet-div-icon { background: transparent; border: none; }
/* Tile seams. On scaled displays (125%, 150%, 2x) and at fractional zoom,
   Chromium draws each scaled tile with soft edges, and the light container
   shows through as a white grid. Leaflet's own fix (mix-blend-mode:
   plus-lighter) only covers tiles at fractional positions, not those edges.
   Drawing each tile one pixel larger than its 256px slot, with normal
   blending, lays every soft edge over its neighbour's solid pixels instead.
   The imagery shifts by at most 1px at a tile edge. */
.leaflet-container img.leaflet-tile { mix-blend-mode: normal; width: 257px !important; height: 257px !important; }
.leaflet-control-attribution { background: rgba(251,250,247,.88) !important; color: #72716a !important; font-size: 10px !important; padding: 1px 6px !important; }
.leaflet-control-attribution a { color: #72716a !important; }
.leaflet-tooltip.up-tip { background: rgba(255,255,255,.97); border: 1px solid #ddd8cf; color: #24231f; font-family: 'Source Sans 3', sans-serif; font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: 4px; box-shadow: none; white-space: nowrap; }
.leaflet-tooltip.up-tip:before { display: none; }
.leaflet-bar { border: 1px solid #ddd8cf !important; border-radius: 4px !important; box-shadow: none !important; }
.leaflet-bar a { background: rgba(255,255,255,.94) !important; color: #44443f !important; border-bottom-color: #ddd8cf !important; }

/* Request modal */
.modal-input { height: 46px; padding: 0 12px; border: 1px solid #d4cfc6; border-radius: 8px; font-family: 'Figtree', sans-serif; font-size: 16px; color: #24231f; box-sizing: border-box; width: 100%; }
.modal-input:focus { outline: 2px solid #24231f; outline-offset: 1px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }


/* ---- Section type --------------------------------------------------------
   Eyebrows are mono caps; the colour is set per section inline (green for
   map/states, ochre for ask/import, grey for the overview). */
/* Section eyebrows. The numeral ties each section back to its cell in the
   #how overview grid, which links here — so the numbers must stay in step
   with that grid's 01-04 if either is ever reordered. */
/* Every eyebrow is Planned's darker burnt orange (#a44a2a, the Planned outline), bold,
   which clears 4.5:1 on white and on the paper bands. 600 is the
   heaviest IBM Plex Mono weight the page loads; 700 would be faux bold. */
.eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #a44a2a; display: flex; align-items: baseline; gap: 12px; }
.eyebrow-n { letter-spacing: .06em; }
.h2 { margin: 14px 0 0; font-size: clamp(32px, 3.8vw, 52px); line-height: 1.03; font-weight: 800; letter-spacing: -.035em; color: #24231f; text-wrap: balance; }
/* The line under an h2 that carries the section's argument. Bigger than body
   copy, quieter than the heading. */
/* The copy column: half the content width in every section but the hero.
   Two halves plus the rows' 64px gap fill the row exactly, so a copy column
   beside a card, photo or table lines up with the stacked ones (01-03).
   Below 960px the side-by-side rows can't fit a card beside a half-width
   column, so the column goes full width. Headings and copy inside fill it. */
.copy-col { box-sizing: border-box; width: calc(50% - 32px); flex: 0 0 auto; min-width: 0; }
@media (max-width: 959px) { .copy-col { width: 100%; } }
/* Headings that should run the full width of their copy: balance would even
   the lines out and leave them visibly shorter than the paragraph. */
.h2-fill { text-wrap: pretty; }
.body-copy { display: flex; flex-direction: column; gap: 12px; font-size: 17.5px; line-height: 1.6; color: #44443f; }
.body-copy p { margin: 0; text-wrap: pretty; }
/* Ask's payoff line under the two panels: display size, one step below
   the section headline, two rows (one per sentence). */
.ask-payoff { margin: 0; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.08; font-weight: 800; letter-spacing: -.03em; color: #24231f; text-wrap: pretty; }
/* Section header: eyebrow, headline, then the copy under it, in the copy
   column on the left. */
.sec-head .body-copy { margin-top: 18px; }

/* ---- Hero ----------------------------------------------------------------- */
.hero-top { padding: clamp(28px, 4vw, 56px) 0 0; }
.hero-grid {
  max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px);
  display: flex; flex-wrap: wrap; gap: 40px; align-items: center;
}
.hero-copy { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.hero-stage { flex: 1.9 1 600px; min-width: 0; display: flex; flex-direction: column; }
@media (max-width: 1179px) { .hero-copy, .hero-stage { flex-basis: 100%; } }

.hero-eyebrow {
  margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; line-height: 1.3;
  letter-spacing: .11em; text-transform: uppercase; color: #a44a2a;
  font-weight: 600;
}
.hero-h1 {
  margin: 0; font-size: clamp(38px, 4.4vw, 62px); line-height: 1.02; font-weight: 800;
  letter-spacing: -.04em; color: #24231f; max-width: 16ch; text-wrap: balance;
}
.hero-h1 span { color: #9E5A0B; }
.hero-sub { margin: 0; max-width: 44ch; font-size: clamp(16.5px, 1.2vw, 18.5px); line-height: 1.5; color: #44443f; text-wrap: pretty; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-cta-primary {
  display: flex; align-items: center; height: 52px; padding: 0 24px; border-radius: 9px;
  background: #E39A2E; color: #24231f; font-size: 16.5px; font-weight: 700; white-space: nowrap;
}
.hero-cta-secondary {
  display: flex; align-items: center; height: 52px; padding: 0 22px; border: 1.5px solid #ddd8cf;
  border-radius: 9px; color: #24231f; font-size: 16.5px; font-weight: 500; white-space: nowrap;
}
.frame-caption { margin: 12px 0 0; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .06em; color: #8a8981; }

/* ---- App window ----------------------------------------------------------
   The frame every product view sits in: the app's own surface, border and
   shadow, in the app's UI face. */
.app-frame {
  box-sizing: border-box; width: 100%; border: 1px solid #ddd8cf; border-radius: 12px; overflow: hidden;
  background: #fbfaf7; box-shadow: 0 24px 60px rgba(40, 34, 24, .12); font-family: 'Source Sans 3', sans-serif;
}

/* The app's top strip, from web/src/components/AppStrip.jsx: 46px, #f0ede5,
   symbol and wordmark, a hairline, the trip name with caret and mono dates,
   then Ask outlined beside Add filled. Nothing here is clickable. */
.app-strip {
  flex: 0 0 46px; height: 46px; box-sizing: border-box; display: flex; align-items: center; gap: 12px;
  padding: 0 12px 0 16px; background: #f0ede5; border-bottom: 1px solid #d7d1c6; position: relative; z-index: 950;
}
.app-strip-brand { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.app-strip-brand img { height: 22px; width: auto; display: block; }
.app-strip-brand span { font-size: 11px; font-weight: 600; letter-spacing: .18em; color: #24231f; }
.app-strip-rule { flex: 0 0 auto; width: 1px; height: 20px; background: #e4dfd6; }
.app-strip-trip { display: flex; align-items: baseline; gap: 7px; min-width: 0; flex: 1; }
.app-strip-name { font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: #24231f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-strip-caret { font-size: 8.5px; color: #8a8981; flex: 0 0 auto; }
.app-strip-dates { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #8a8981; white-space: nowrap; overflow: hidden; }
.app-strip-tag { flex: 0 0 auto; padding: 2px 7px; border: 1px solid #ddd8cf; border-radius: 4px; font-family: 'IBM Plex Mono', monospace; font-size: 8.5px; letter-spacing: .1em; color: #8a8981; }
.app-strip-ask { flex: 0 0 auto; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 1px solid #d7d1c6; border-radius: 5px; font-size: 12px; font-weight: 500; color: #24231f; }
.app-strip-add { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 11px; border-radius: 5px; background: #24231f; color: #fff; font-size: 12px; font-weight: 600; }
@media (max-width: 560px) {
  .app-strip { gap: 8px; padding: 0 10px; }
  .app-strip-brand span, .app-strip-tag, .app-strip-dates { display: none; }
}

/* ---- Itinerary panel -----------------------------------------------------
   From ItineraryPanel.jsx and ui.jsx FilterTab. Rows are rendered by
   js/home.js. */
.ap-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #fbfaf7; border-right: 1px solid #ddd8cf; }
.ap-tabs { display: flex; gap: 16px; padding: 14px 20px 0; border-bottom: 1px solid #ebe7df; flex: 0 0 auto; }
.ap-tab {
  border: none; background: none; cursor: pointer; font-size: 12.5px; padding: 0 0 8px;
  display: flex; align-items: baseline; gap: 5px; font-family: 'Source Sans 3', sans-serif;
}
.ap-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 10px 20px 20px;
  scrollbar-width: thin; scrollbar-color: #d7d1c6 transparent;
}
.ap-dayhead { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 9px; border-radius: 4px; }
.ap-dayadd {
  height: 20px; padding: 0 7px; border-radius: 4px; background: #24231f; color: #fff; font-size: 10.5px;
  font-weight: 600; display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
}
.ap-dayadd span { font-size: 11px; line-height: 1; font-weight: 400; }
.ap-row { display: flex; align-items: center; gap: 7px; padding: 6px 8px 6px 0; }
.ap-title { display: block; font-size: 13px; color: #24231f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-sub { display: block; font-size: 11.5px; color: #72716a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-reorder { display: flex; flex-direction: column; line-height: .8; flex: 0 0 auto; color: #a3a199; font-size: 8px; }

/* Map overlays */
.map-box { min-width: 0; position: relative; background: #edeae3; }
.map-box > .map-el { position: absolute; inset: 0; }
.map-btns { position: absolute; top: 10px; left: 10px; z-index: 500; display: flex; gap: 6px; }
.map-btns button {
  height: 26px; padding: 0 9px; border: 1px solid #ddd8cf; border-radius: 4px; background: rgba(255,255,255,.93);
  color: #44443f; font-family: 'Source Sans 3', sans-serif; font-size: 11.5px; cursor: pointer;
}
.map-btns.lg button { height: 28px; padding: 0 10px; background: rgba(255,255,255,.94); font-size: 12px; }
.map-legend {
  position: absolute; left: 10px; bottom: 10px; z-index: 500; padding: 9px 11px; border: 1px solid #ddd8cf;
  border-radius: 6px; background: rgba(251,250,247,.96); display: flex; flex-direction: column; gap: 5px;
  font-size: 11px; color: #72716a; pointer-events: none;
}
.map-legend > span { display: flex; align-items: center; gap: 7px; }
.map-legend i { width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; }

/* ---- Ask panel -----------------------------------------------------------
   From AskPanel.jsx and AnswerText.jsx. Static. */
.ask-panel { display: flex; flex-direction: column; background: #fff; font-family: 'Source Sans 3', sans-serif; }
.ask-head { padding: 14px 16px 11px; border-bottom: 1px solid #ede9e1; display: flex; align-items: flex-start; gap: 10px; }
.ask-label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: .14em; color: #72716a; }
.ask-trip { font-size: 15px; font-weight: 600; color: #24231f; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-looking { font-size: 11.5px; color: #8a8981; margin-top: 2px; }
.ask-convs { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; font-size: 11.5px; color: #72716a; }
.ask-convs b { color: #8a8981; font-size: 13px; font-weight: 400; }
.ask-body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 14px 16px; display: flex; flex-direction: column; gap: 16px; }
.ask-q { display: flex; justify-content: flex-end; }
.ask-q > div { max-width: 86%; background: #f2f1ec; border-radius: 6px; padding: 8px 11px; font-size: 13px; color: #24231f; }
.ask-a { font-size: 13px; line-height: 1.55; color: #44443f; display: flex; flex-direction: column; gap: 9px; }
.ask-a p { margin: 0; }
.ask-a ol { margin: 4px 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.ask-a strong { font-weight: 600; color: #24231f; }
.ask-foot { border-top: 1px solid #ede9e1; padding: 10px 14px 12px; }
.ask-input { display: flex; align-items: flex-end; gap: 8px; }
.ask-input > div { flex: 1 1 auto; height: 46px; box-sizing: border-box; padding: 8px 9px; border: 1px solid #d4cfc6; border-radius: 5px; background: #fff; font-size: 13px; line-height: 1.45; color: #a3a199; }
.ask-input > span { height: 32px; padding: 0 13px; border-radius: 5px; background: #d7d1c6; color: #fff; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; }
.ask-links { margin-top: 7px; display: flex; gap: 12px; font-size: 11px; color: #a3a199; }

/* ---- Hero frame ----------------------------------------------------------
   Static staged view: itinerary (Thu + Fri, at zoom .86), live map, Ask.
   Stacks under the copy below 1180px; Ask drops out below 900px; the
   itinerary goes over the map below 760px. */
.hero-cols { display: flex; flex-wrap: nowrap; height: 468px; }
.hero-panel { flex: 1 1 260px; max-width: 260px; }
.hero-panel-zoom { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; zoom: .86; }
.hero-budget { border-top: 1px solid #e4dfd6; padding: 8px 12px 10px; background: #fff; }
.hero-budget-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 600; color: #24231f; }
.hero-budget-head span:last-child { font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.hero-budget-rows { margin-top: 4px; display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 2px 10px; font-size: 10.5px; color: #72716a; }
.hero-budget-rows span:nth-child(even) { font-family: 'IBM Plex Mono', monospace; }
.hero-map { flex: 999 1 300px; min-height: 300px; }
.hero-ask { flex: 0 0 230px; min-width: 0; display: flex; flex-direction: column; border-left: 1px solid #ddd8cf; background: #fff; }
.hero-ask .ask-panel { flex: 1 1 auto; min-height: 0; zoom: .86; }
@media (max-width: 1179px) { .hero-cols { height: 440px; } }
@media (max-width: 899px) { .hero-ask { display: none; } }

/* ---- Overview (#how) ------------------------------------------------------
   1px rules between cells come from the grid's background showing through
   the gap. */
.overview {
  margin-top: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: #ddd8cf; border-top: 1px solid #24231f; border-bottom: 1px solid #ddd8cf;
}
@media (max-width: 999px) { .overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .overview { grid-template-columns: 1fr; } }
.ov-cell { display: flex; flex-direction: column; min-height: 320px; padding: 24px 26px 26px; background: #fff; color: #24231f; box-sizing: border-box; }
.ov-h { font-size: 22px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.ov-p { margin-top: 10px; margin-bottom: 22px; font-size: 15.5px; line-height: 1.5; color: #44443f; text-wrap: pretty; }
.ov-micro { margin-top: auto; height: 118px; box-sizing: border-box; border: 1px solid #ddd8cf; border-radius: 6px; overflow: hidden; position: relative; font-family: 'Source Sans 3', sans-serif; }

/* ---- Map section and states section frames -------------------------------
   Side by side from 760px (panel fixed width); stacked below with the panel
   capped at 380px and the map underneath. */
.feat-frame { display: flex; flex-direction: column; height: 700px; }
.feat-cols { flex: 1 1 auto; min-height: 0; display: flex; flex-wrap: nowrap; }
.feat-panel { flex: 1 1 300px; max-width: 380px; }
.feat-map { flex: 999 1 320px; min-height: 420px; }
.budget-collapsed {
  flex: 0 0 auto; border-top: 1px solid #e4dfd6; padding: 10px 20px; background: #fff; display: flex;
  justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 600; color: #24231f;
}
.budget-collapsed i { color: #8a8981; font-weight: 400; font-style: normal; }

.st-frame { display: flex; flex-wrap: nowrap; height: 620px; }
.st-panel { flex: 1 1 300px; max-width: 380px; }
.st-map { flex: 999 1 260px; min-height: 320px; }

@media (max-width: 759px) {
  .hero-cols, .feat-cols, .st-frame { flex-wrap: wrap; height: auto; }
  .feat-frame { height: auto; }
  .hero-panel, .feat-panel, .st-panel { max-width: 100%; flex-basis: 100%; border-right: none; border-bottom: 1px solid #ddd8cf; }
  .hero-panel-zoom { max-height: 320px; }
  .feat-panel, .st-panel { max-height: 380px; }
  .hero-map { flex-basis: 100%; min-height: 320px; }
  .feat-map, .st-map { flex-basis: 100%; }
  .st-map { min-height: 360px; }
}

/* ---- States definitions -------------------------------------------------- */
/* The three states: equal columns in the overview's ruled grid (1px rules
   from the background showing through the gap), one column on phones. */
.st-grid {
  margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: #ddd8cf; border-top: 1px solid #24231f; border-bottom: 1px solid #ddd8cf;
}
@media (max-width: 759px) { .st-grid { grid-template-columns: 1fr; } }
.st-cell { padding: 24px 26px 26px; background: #fff; }
.st-name { display: flex; align-items: center; gap: 10px; font-size: 22px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: #24231f; }
.st-name .dot { width: 14px; height: 14px; }
.st-cell p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.5; color: #24231f; text-wrap: pretty; }
.st-cell p + p { margin-top: 2px; color: #72716a; }
.dot { display: inline-block; border-radius: 50%; box-sizing: border-box; flex: 0 0 auto; }
.dot-booked { background: #3f7a4f; border: 1.5px solid #2f5d3c; }
.dot-planned { background: #c45e39; border: 1.5px solid #a44a2a; }
.dot-unplanned { background: #fbfaf7; border: 1.5px solid #86877f; }

/* ---- Travel Style (panels/TravelStyleSection.jsx) ------------------------ */
.ts-q { margin-bottom: 10px; }
.ts-key { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .14em; color: #a3a199; display: block; margin-bottom: 2px; }
.ts-label { font-size: 13px; color: #24231f; }
.ts-hint { font-size: 11px; color: #8a8981; margin: 1px 0 5px; }
.ts-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ts-chips span { padding: 4px 9px; font-size: 12px; border-radius: 5px; border: 1px solid #d7d1c6; background: #fff; color: #72716a; font-weight: 400; }
.ts-chips span.on { border-color: #596a56; background: #e9ede7; color: #3f4c3d; font-weight: 600; }

/* Ask section: three panels. The chat on the left sets the row's height; on
   the right the questionnaire fills whatever the summary leaves (contain:
   size keeps its own length out of the sum) and fades out where it is cut,
   the way the app's panel scrolls. One gap all round. */
.ask-trio { --trio-gap: 28px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 8fr); gap: var(--trio-gap); margin-top: 40px; }
.ask-trio-chat, .ask-trio-card { border: 1px solid #ddd8cf; border-radius: 10px; background: #fff; overflow: hidden; box-shadow: 0 18px 44px rgba(40,34,24,.08); font-family: 'Source Sans 3', sans-serif; }
.ask-trio-chat { display: flex; flex-direction: column; }
.ask-trio-chat .ask-panel { flex: 1 1 auto; }
.ask-trio-side { display: flex; flex-direction: column; gap: var(--trio-gap); min-width: 0; }
.ask-trio-title { padding: 12px 16px 10px; border-bottom: 1px solid #ede9e1; font-size: 15px; font-weight: 600; color: #24231f; }
.ts-card { flex: 1 1 0; min-height: 240px; contain: size; position: relative; }
.ts-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(rgba(255,255,255,0), #fff); pointer-events: none; }
.ts-card-body { padding: 14px 16px; }
.ts-summary { flex: 0 0 auto; padding: 14px 16px 16px; }
.ts-summary-title { font-size: 15px; font-weight: 700; color: #24231f; margin-bottom: 4px; }
.ts-summary-intro { font-size: 12.5px; line-height: 1.5; color: #72716a; margin: 0 0 12px; }
.ts-summary-text { padding: 12px 14px; background: #faf8f4; border: 1px solid #ede9e1; border-radius: 6px; font-size: 13.5px; line-height: 1.6; color: #24231f; text-wrap: pretty; }
.ts-summary-actions { display: flex; gap: 8px; margin-top: 12px; }
.ts-summary-actions span { padding: 8px 14px; border-radius: 5px; background: #f1eee8; color: #24231f; font-size: 13px; font-weight: 600; }
.ts-summary-actions span.primary { flex: 1 1 auto; text-align: center; background: #596a56; color: #fff; }
/* Stacked: nothing to line up against, so the questionnaire takes its own
   height, capped, and keeps the fade. */
@media (max-width: 959px) {
  .ask-trio { grid-template-columns: minmax(0, 1fr); --trio-gap: 20px; }
  .ts-card { contain: none; flex: none; min-height: 0; max-height: 440px; }
}

/* ---- Import steps --------------------------------------------------------- */
.imp-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 12px; padding: 14px 0; border-top: 1px solid #ddd8cf; }
.imp-step > span { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #72716a; }
.imp-step b { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; font-weight: 400; letter-spacing: .1em; color: #24231f; }
.imp-step div div { margin-top: 3px; font-size: 15px; color: #44443f; }
.imp-arrow { padding-left: 56px; font-size: 14px; color: #a3a29a; line-height: 1; }