/* Public-site reading scale. Loaded after each page's component styles.
   Keep typography independent of the legacy geometry/density scale. */
:root {
  --reading-scale: 1.1;
  --reading-card-facts-gap: 22px;
  --reading-body: calc(13px * var(--reading-scale));
  --reading-detail: calc(14px * var(--reading-scale));
  --reading-caption: calc(12px * var(--reading-scale));
  --reading-fine: calc(11px * var(--reading-scale));
}

/* The existing page path follows the title and introduction in DOM order. */
:root .breadcrumb {
  font-size: var(--reading-caption);
}
:root .catalog-intro > .breadcrumb:last-child {
  margin: 22px 0 0;
}
:root .catalog-intro > .breadcrumb [aria-current] {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* A tour's existing return link shares the reading order and baseline of its path. */
:root .detail-masthead .tour-intro-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 22px;
}
:root .detail-masthead .tour-intro-navigation > .breadcrumb {
  min-width: 0;
  margin: 0;
  font-size: var(--reading-caption);
}
:root .detail-masthead .tour-intro-navigation [aria-current] {
  min-width: 0;
  overflow-wrap: anywhere;
}
:root .detail-masthead .tour-intro-navigation > .back-to-tours {
  flex: 0 0 auto;
  margin: 0;
  font-size: var(--reading-caption);
}
@media (min-width: 768px) {
  :root .listing-masthead .catalog-intro > p {
    max-width: 40ch;
    min-height: 3.6em;
    line-height: 1.8;
    text-wrap: balance;
  }
  :root .listing-masthead .catalog-intro[data-catalog-intro-measure="short"] > p {
    max-width: 28ch;
  }
  :root .listing-masthead .catalog-intro[data-catalog-intro-measure="medium"] > p {
    max-width: 56ch;
  }
  :root .listing-masthead .catalog-intro[data-catalog-intro-measure="wide"] > p {
    max-width: 72ch;
  }
  :root .detail-masthead .tour-title-layout > div {
    min-width: 0;
  }
  :root .detail-masthead .tour-title-layout p {
    max-width: 40ch;
    min-height: 3.6em;
    line-height: 1.8;
    text-wrap: balance;
  }
  :root .detail-masthead .tour-title-layout[data-tour-intro-measure="medium"] p {
    max-width: 56ch;
  }
  :root .detail-masthead .tour-title-layout[data-tour-intro-measure="wide"] p {
    max-width: 72ch;
  }
}
@media (max-width: 767px) {
  :root .catalog-intro > .breadcrumb:last-child {
    margin-top: 18px;
  }
  :root .detail-masthead .tour-intro-navigation {
    margin-top: 18px;
  }
}
@media (min-width: 768px) and (max-height: 550px) {
  :root .catalog-intro > .breadcrumb:last-child {
    margin-top: 12px;
  }
  :root .detail-masthead .tour-intro-navigation {
    margin-top: 12px;
  }
}

/* Supporting hero copy follows the existing viewport baselines. Its title,
   image crop, content origin and surrounding layout remain unchanged. */
:root .hero.full-hero .hero-description {
  font-size: calc(13px * var(--reading-scale));
}
@media (min-width: 768px) {
  :root .hero.full-hero .hero-description {
    font-size: calc(clamp(12.5px, .81vw, 16px) * var(--reading-scale));
  }
}
@media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
  :root .hero.full-hero .hero-description {
    font-size: calc(16px * var(--reading-scale));
  }
}
@media (max-width: 767px) and (max-height: 650px),
       (min-width: 768px) and (max-width: 1100px) and (max-height: 500px) {
  :root .hero.full-hero .hero-description {
    font-size: calc(12px * var(--reading-scale));
  }
}
@media (max-width: 767px) {
  :root .hero.full-hero.corporate-hero .hero-description {
    font-size: calc(13px * var(--reading-scale));
  }
}

/* Tour cards: retain fluid desktop sizes and the existing mobile baselines. */
:root .tour-card-detailed .tour-description {
  font-size: calc(clamp(11px, .74vw, 13px) * var(--reading-scale));
  flex: 0 0 auto;
}
:root .tour-card-detailed .tour-trip-facts,
:root .tour-card-detailed .tour-inclusions li {
  font-size: calc(clamp(10px, .7vw, 12px) * var(--reading-scale));
}
:root .tour-card-detailed .tour-date {
  font-size: calc(clamp(10px, .75vw, 12px) * var(--reading-scale));
}
:root .tour-card-detailed .tour-cta {
  font-size: calc(var(--button-font) * var(--reading-scale));
}
:root .tour-card-detailed .tour-description + .tour-trip-facts {
  margin-top: var(--reading-card-facts-gap);
}
/* Surplus row height belongs below the facts, not inside a paragraph. */
:root .tour-card-detailed .tour-card-footer {
  margin-top: auto;
  padding-top: 12px;
}
:root .tour-card-detailed .tour-trip-facts {
  margin-bottom: 14px;
}
:root .tour-card-detailed .tour-card-copy {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-width: 0;
}

/* Share heading and description tracks within each visual row so copy, facts
   and footers start together. The longest description keeps the normal 22px
   facts gap; shorter copy has the additional space needed for alignment.
   Subgrid follows filtering, sorting, font loading and column changes without
   fixed text heights or a script that measures and shifts loaded cards. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 601px) {
    :root .tour-grid > .tour-card-detailed:not([hidden]):has(> .tour-card-link > .tour-details > .tour-card-copy) {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
    :root .tour-grid > .tour-card-detailed > .tour-card-link:has(> .tour-details > .tour-card-copy) {
      display: grid;
      grid-row: 1 / -1;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
    :root .tour-grid > .tour-card-detailed > .tour-card-link > .tour-details:has(> .tour-card-copy) {
      display: grid;
      grid-row: 2 / -1;
      grid-template-rows: subgrid;
      row-gap: 0;
      min-width: 0;
    }
    :root .tour-grid > .tour-card-detailed .tour-details:has(> .tour-card-copy) > .tour-title-row {
      align-self: start;
    }
    :root .tour-grid > .tour-card-detailed .tour-card-copy {
      display: grid;
      grid-row: 2 / span 2;
      grid-template-rows: subgrid;
      row-gap: 0;
      align-self: stretch;
    }
    :root .tour-grid > .tour-card-detailed .tour-card-copy > :is(.tour-description, .tour-trip-facts) {
      align-self: start;
    }
    :root .tour-grid > .tour-card-detailed .tour-details:has(> .tour-card-copy) > .tour-card-footer {
      margin-top: 0;
    }
  }
}

/* The atlas popover has its own compact baseline. */
:root .atlas-card .tour-card-detailed .tour-description {
  font-size: calc(11px * var(--reading-scale));
}
:root .atlas-card .tour-card-detailed .tour-date,
:root .atlas-card .tour-card-detailed .tour-trip-facts,
:root .atlas-card .tour-card-detailed .tour-cta {
  font-size: calc(10px * var(--reading-scale));
}
:root .atlas-card .tour-card-detailed .tour-inclusions li {
  font-size: calc(9px * var(--reading-scale));
}

/* Homepage sections and catalog introductions. */
:root .finder-heading p {
  font-size: calc(clamp(12px, .81vw, 14px) * var(--reading-scale));
}
:root .finder-controls .travel-tab {
  font-size: calc(clamp(11px, .76vw, 13px) * var(--reading-scale));
}
:root .site-sections .visa-intro p,
:root .site-sections .stories-intro,
:root .site-sections .stories-dialog p,
:root .catalog-intro p,
:root .catalog-faq-header > p,
:root .faq-answer p,
:root #home-faq .home-faq-header > p,
:root #home-faq .home-faq-answer p {
  font-size: calc(13px * var(--reading-scale));
}
:root .category-guide p {
  font-size: calc(14px * var(--reading-scale));
}
:root .site-sections .visa-footnote p,
:root .catalog-control {
  font-size: calc(12px * var(--reading-scale));
}
:root .faq-list summary,
:root #home-faq summary {
  font-size: calc(16px * var(--reading-scale));
}

/* One process component across home, visa and about, regardless of wrapper. */
:root :is(.why-experience, .visa-advice-section) :is(.why-intro, .about-heading > p, .why-step-copy p) {
  font-size: var(--reading-body);
  font-weight: 400;
  line-height: 1.85;
}
:root :is(.why-experience, .visa-advice-section) :is(.why-closing p, .about-process-note) {
  font-size: var(--reading-caption);
  font-weight: 400;
  line-height: 1.75;
  color: #61676b;
}
:root :is(.why-experience, .visa-advice-section) :is(.why-title h2, .about-heading h2) {
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -1.8px;
}
:root :is(.why-experience, .visa-advice-section) .why-step-heading h3 {
  font-size: clamp(18px, 1.4vw, 21px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.5px;
}
:root :is(.why-experience, .visa-advice-section) :is(.eyebrow, .visa-section-kicker, .about-kicker) {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 1.65px;
}
:root :is(.why-experience, .visa-advice-section) .why-step {
  display: flex;
  flex-direction: column;
}
:root :is(.why-experience, .visa-advice-section) .why-step-card {
  height: auto;
  min-height: calc(var(--card-height) - var(--offset));
  flex: 1;
}

/* Matching text roles on the remaining public-page families. Headings keep
   their authored hierarchy; paragraphs, hints and controls share one scale. */
:root :is(.about-heading > p, .about-service-card > p, .about-story-note > span,
  .contact-form-intro, .contact-field label, .contact-status,
  .references-filters button, .references-contact .contact-address,
  .reference-contact-actions a, .legal-section p, .legal-section li,
  .legal-section dd, .legal-section dt, .visa-country-contact > p,
  .visa-source-body .visa-source-intro, .visa-source-body dd) {
  font-size: var(--reading-body);
}
:root :is(.about-page .about-story-copy > p, .about-preview-dialog p,
  .contact-context > p, .contact-address-block address, .contact-preview-dialog p,
  .references-contact p, .visa-section-heading > p) {
  font-size: var(--reading-detail);
}
:root :is(.about-page .about-process-note, .about-reference-closing p,
  .about-service-link, .about-page .about-button.button, .contact-channel-action,
  .contact-form-actions p, .contact-form-card .contact-privacy-note,
  .contact-preview-note, .contact-field label .optional, .contact-field .field-error,
  .references-count, .legal-notice, .legal-toc a, .legal-page .legal-choice,
  .visa-inline-action, .visa-planner-intro, .visa-source-action) {
  font-size: var(--reading-caption);
}
:root :is(.reference-name, .legal-meta, .about-story-photo figcaption,
  .visa-destination-label small, .visa-field-label, .visa-purpose legend,
  .visa-source-credit, .visa-source-footer > p) {
  font-size: var(--reading-fine);
}
:root .visa-purpose span {
  font-size: var(--reading-fine);
}
:root :is(.contact-field input, .contact-field select, .contact-field textarea,
  .contact-field .visa-select-control, .contact-page .visa-select-options,
  .visa-page .visa-select-wrap .visa-select-control,
  .visa-page .visa-select-wrap .visa-select-options,
  .risk-field input, .risk-field select, .risk-field textarea,
  .visa-page .risk-select .visa-select-control, .visa-page .risk-select .visa-select-options) {
  font-size: var(--reading-detail);
}
:root .contact-page .contact-submit.button {
  font-size: var(--reading-body);
}
:root :is(#mr-germany-documents, #mr-guide-documents) :is(.de-select > select, .visa-select-control, .visa-select-options) {
  font-size: var(--reading-detail);
}
:root :is(#mr-germany-documents, #mr-guide-documents) :is(.gd-label, .gd-extras label) {
  font-size: var(--reading-body);
}
:root :is(#mr-germany-documents, #mr-guide-documents) #gd-purpose-name {
  font-size: var(--reading-detail);
}
:root :is(#mr-germany-documents, #mr-guide-documents) :is(.gd-change, .gd-source, .gd-official-list) {
  font-size: var(--reading-fine);
}
:root .tour-request :is(.tour-request-heading p, .request-select > select,
  .visa-select-control, .visa-select-options, textarea) {
  font-size: var(--reading-detail);
}
:root .tour-request textarea::placeholder { font-size: inherit; }
:root .tour-request :is(.request-field > label, .request-contact-button) {
  font-size: var(--reading-body);
}
:root .tour-request :is(.detail-eyebrow, .request-field > label span, .request-hint) {
  font-size: var(--reading-caption);
}
:root .risk-dialog :is(.risk-intro, .risk-fieldset legend, .risk-field > label,
  .risk-back, .risk-text-button, .risk-review-group strong,
  .risk-complete > p, .risk-complete-summary dd) {
  font-size: var(--reading-detail);
}
:root .risk-dialog :is(.risk-plan-header, .risk-stages strong, .risk-choice > span,
  .risk-hint, .risk-error, .risk-context p, .risk-permission label,
  .risk-review dl, .risk-route, .risk-complete-summary dt) {
  font-size: var(--reading-body);
}
:root .risk-dialog :is(.risk-stages small, .risk-step-count, .risk-field > label small,
  #risk-footer-hint, .risk-review-group button, .risk-preview-note,
  .risk-complete-eyebrow, .risk-complete > .risk-demo-message) {
  font-size: var(--reading-caption);
}

/* Tour detail reading copy, services, tabs and supporting information. */
/* Keep the full summary inside its frame without clipping room menus. */
:root .detail-page .booking-card {
  height: auto;
  top: 24px;
}
:root .detail-page .booking-selection {
  flex-shrink: 0;
}
@media (min-width: 801px) {
  /* Both overview columns size the same row, including longer hotel names.
     The thumbnail strip and summary frame therefore share their bottom edge. */
  :root .detail-page .detail-layout {
    grid-template-rows: minmax(var(--overview-height), auto) auto;
  }
  :root .detail-page .booking-column {
    grid-row: 1 / 3;
    display: grid;
    grid-template-rows: subgrid;
    align-self: stretch;
  }
  :root .detail-page .booking-card {
    position: sticky;
    top: min(24px, calc(100dvh - var(--booking-height, var(--overview-height)) - 24px));
    grid-row: 1;
    align-self: start;
    min-width: 0;
    min-height: 100%;
  }
  :root .detail-page .tour-gallery {
    height: auto;
    min-height: var(--overview-height);
    align-self: stretch;
  }
}
:root .detail-page .day-panel p,
:root .detail-page .service-card-list li,
:root .detail-page .tour-visa-intro p {
  font-size: calc(14px * var(--reading-scale));
}
:root .detail-page .detail-content-heading > p,
:root .detail-page .travel-note p,
:root .detail-page .tour-visa-point p,
:root .detail-page .tour-visa-guide p,
:root .detail-page .detail-tabs > button,
:root .detail-page .timeline-date,
:root .detail-page .booking-meta dd {
  font-size: calc(13px * var(--reading-scale));
}
:root .detail-page .day-route,
:root .detail-page .detail-footnote,
:root .detail-page .flight-card-header,
:root .detail-page .flight-card .flight-airport > span,
:root .detail-page .flight-card .flight-airport > b,
:root .detail-page .hotel-card-meta {
  font-size: calc(12px * var(--reading-scale));
}
:root .detail-page .timeline-label,
:root .detail-page .day-panel .detail-eyebrow,
:root .detail-page .booking-note,
:root .detail-page .booking-facts dt,
:root .detail-page .flight-card-footer,
:root .detail-page .hotel-details dt {
  font-size: calc(11px * var(--reading-scale));
}
:root .catalog-detail .hotel-card-meta > span:last-child {
  font-size: calc(11px * var(--reading-scale));
}

/* The summary uses the same reading scale for every text role, including
   content replaced when the visitor changes the package or room choice. */
:root .detail-page .booking-heading > .detail-eyebrow {
  font-size: calc(11px * var(--reading-scale));
  color: #66716c;
}
:root .detail-page .booking-meta dd,
:root .detail-page .booking-facts dd {
  font-size: calc(14px * var(--reading-scale));
  line-height: 1.6;
  min-width: 0;
  overflow-wrap: anywhere;
}
:root .detail-page .booking-meta dt,
:root .detail-page .booking-facts small,
:root .detail-page .price-kicker,
:root .detail-page .price-kicker small,
:root .detail-page .booking-note {
  font-size: calc(12px * var(--reading-scale));
  line-height: 1.65;
  color: #66716c;
}
:root .detail-page .booking-facts dt,
:root .detail-page .room-trigger,
:root .detail-page .room-options > button,
:root .detail-page .booking-cta {
  font-size: calc(13px * var(--reading-scale));
  line-height: 1.5;
}
:root .detail-page .booking-facts dt {
  color: #66716c;
}
:root .detail-page .booking-facts > div {
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
}
:root .detail-page .booking-meta > div,
:root .detail-page .room-trigger > span,
:root .detail-page .room-options > button > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
:root .detail-page .booking-price {
  flex-wrap: wrap;
  gap: 10px 16px;
}
:root .detail-page .price-kicker {
  margin-left: auto;
  max-width: 100%;
}
:root .detail-page .booking-contact-actions {
  --action-height: 52px;
}
:root .detail-page .booking-contact-actions > .button,
:root .detail-page .booking-contact-actions > .booking-whatsapp {
  height: auto;
  max-height: none;
}
:root .detail-page .booking-cta {
  min-width: 0;
  gap: 10px;
  padding-inline: 12px;
  white-space: normal;
  text-align: left;
}
:root .detail-page .booking-cta > .icon {
  flex-shrink: 0;
}
@media (min-width: 601px) and (max-width: 800px) {
  :root .detail-page .booking-card {
    display: flex;
    flex-direction: column;
  }
  :root .detail-page .booking-selection {
    border-left: 0;
    border-top: 1px solid #e5e7e3;
  }
}
:root .detail-page .mobile-booking span {
  font-size: calc(11px * var(--reading-scale));
  color: #66716c;
}
:root .detail-page .mobile-booking .button {
  font-size: calc(12px * var(--reading-scale));
}

/* Country guides share these verified text roles; heading scales stay intact. */
:root :is(#mr-germany-intro, #mr-guide-intro) :is(.mr-intro, .mr-copy, .mr-source-panel p),
:root :is(#mr-germany-purpose, #mr-guide-purpose) :is(.gp-intro, .gp-overview > p, .gp-points, .gp-tabs button),
:root :is(#mr-germany-process, #mr-guide-process) :is(.gs-intro, .gs-step > p),
:root :is(#mr-germany-documents, #mr-guide-documents) :is(.gd-intro, .gd-selection-intro, .gd-group-intro, .gd-document-body, .gd-risk-copy p),
:root :is(#mr-germany-templates, #mr-guide-templates) :is(.gt-intro, .gt-card > p, .gt-official-copy > p:last-child),
:root :is(#mr-germany-fees, #mr-guide-fees) :is(.gf-intro, .gf-copy),
:root :is(#mr-germany-faq, #mr-guide-faq) :is(.gq-intro, .gq-answer) {
  font-size: calc(13px * var(--reading-scale));
}
:root :is(#mr-germany-documents, #mr-guide-documents) summary,
:root :is(#mr-germany-faq, #mr-guide-faq) summary {
  font-size: calc(14px * var(--reading-scale));
}
:root :is(#mr-germany-intro, #mr-guide-intro) .mr-foot p,
:root :is(#mr-germany-purpose, #mr-guide-purpose) .gp-footer p,
:root :is(#mr-germany-process, #mr-guide-process) .gs-footer p,
:root :is(#mr-germany-documents, #mr-guide-documents) :is(.gd-context-note, .gd-footer p),
:root :is(#mr-germany-templates, #mr-guide-templates) .gt-footer p,
:root :is(#mr-germany-fees, #mr-guide-fees) :is(.gf-details > p, .gf-details strong, .gf-closing > p) {
  font-size: calc(12px * var(--reading-scale));
}
:root :is(#mr-germany-intro, #mr-guide-intro) :is(.mr-card-note, .mr-source),
:root :is(#mr-germany-fees, #mr-guide-fees) :is(.gf-rate-note, .gf-source),
:root :is(#mr-germany-faq, #mr-guide-faq) .gq-source {
  font-size: calc(11px * var(--reading-scale));
}

/* Footer links retain their existing size relationship and wrapping behavior. */
:root .site-sections .footer-signature .signature-action p {
  font-size: calc(13px * var(--reading-scale));
}
:root .site-sections .footer-signature .signature-brand p,
:root .site-sections .footer-signature .signature-directory nav a,
:root .site-sections .footer-signature .signature-directory nav button {
  font-size: calc(12px * var(--reading-scale));
}
:root .site-sections .signature-bottom {
  font-size: calc(11px * var(--reading-scale));
}

@media (max-width: 1100px) {
  :root .faq-list summary,
  :root #home-faq summary {
    font-size: calc(14px * var(--reading-scale));
  }
}
@media (min-width: 1001px) and (max-width: 1200px) {
  :root :is(.why-experience, .visa-advice-section) .why-step-copy p {
    font-size: var(--reading-caption);
  }
}
@media (min-width: 1800px) {
  :root .visa-planner-intro { font-size: var(--reading-detail); }
  :root :is(.visa-field-label, .visa-purpose legend, .visa-purpose span, .visa-destination-label small) {
    font-size: var(--reading-caption);
  }
}
@media (max-width: 1100px), (pointer: coarse) {
  :root .atlas-card .tour-card-detailed .tour-description,
  :root .atlas-card .tour-card-detailed .tour-cta {
    font-size: calc(13px * var(--reading-scale));
  }
  :root .atlas-card .tour-card-detailed .tour-date,
  :root .atlas-card .tour-card-detailed .tour-trip-facts,
  :root .atlas-card .tour-card-detailed .tour-inclusions li {
    font-size: calc(12px * var(--reading-scale));
  }
}
@media (max-width: 767px) {
  :root :is(.why-experience, .visa-advice-section) :is(.why-title h2, .about-heading h2) {
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -1.5px;
  }
  :root :is(.about-page .about-story-copy > p, .contact-context > p, .contact-address-block address) {
    font-size: var(--reading-body);
  }
  :root :is(.references-filters button, .reference-contact-actions a) {
    font-size: var(--reading-caption);
  }
  /* Preserve the existing mobile input floor to avoid focus-triggered zoom. */
  :root :is(#mr-germany-documents, #mr-guide-documents) :is(.de-select > select, .visa-select-control, .visa-select-options) {
    font-size: max(16px, var(--reading-detail));
  }
  :root .tour-request :is(.request-select > select, .visa-select-control, .visa-select-options, textarea) {
    font-size: max(16px, var(--reading-detail));
  }
  :root :is(.contact-field input, .contact-field select, .contact-field textarea,
    .contact-field .visa-select-control, .contact-page .visa-select-options,
    .visa-page .visa-select-wrap .visa-select-control, .visa-page .visa-select-wrap .visa-select-options,
    .risk-field input, .risk-field select, .risk-field textarea,
    .visa-page .risk-select .visa-select-control, .visa-page .risk-select .visa-select-options) {
    font-size: max(16px, var(--reading-detail));
  }
  :root .tour-card-detailed .tour-description {
    font-size: calc(13px * var(--reading-scale));
  }
  :root .tour-card-detailed .tour-date,
  :root .tour-card-detailed .tour-trip-facts,
  :root .tour-card-detailed .tour-inclusions li {
    font-size: calc(12px * var(--reading-scale));
  }
  :root .finder-heading p,
  :root .site-sections .visa-intro p,
  :root .site-sections .stories-intro {
    font-size: calc(14px * var(--reading-scale));
  }
  :root .catalog-intro p {
    font-size: calc(12px * var(--reading-scale));
  }
  :root .catalog-control {
    font-size: calc(11px * var(--reading-scale));
  }
}
@media (max-width: 600px) {
  :root .visa-section-heading > p { font-size: var(--reading-body); }
  :root .site-sections .footer-signature .signature-directory nav a,
  :root .site-sections .footer-signature .signature-directory nav button {
    font-size: calc(11px * var(--reading-scale));
  }
}
@media (max-width: 640px) {
  :root :is(.why-experience, .visa-advice-section) .why-step-card { min-height: 0; }
  :root :is(.why-experience, .visa-advice-section) .why-step-heading h3 {
    font-size: 20px;
    letter-spacing: -.55px;
  }
}
@media (max-width: 359px) {
  :root :is(.why-experience, .visa-advice-section) .why-step-heading h3 { font-size: 18px; }
}
@media (min-width: 768px) and (max-height: 550px) {
  :root .catalog-intro p {
    font-size: calc(12px * var(--reading-scale));
  }
}
@container (max-width: 440px) {
  :root .detail-page .hotel-card-meta {
    font-size: calc(11px * var(--reading-scale));
  }
  :root .detail-page .hotel-details dt {
    font-size: calc(10px * var(--reading-scale));
  }
}