/* ==== tokens: written by pages/browse/tokens.py, do not edit ==== */
:root {
  /* ---- CatalogueList: design/component/CatalogueListTokens.kt, object CatalogueListTokens ---- */
  --catalogue-list-background: var(--palette-background);
  --catalogue-list-side-margin: var(--spacing-screen-margin);
  --catalogue-list-header-height: 290px;
  --catalogue-list-header-bottom-radius: var(--radius-card);
  --catalogue-list-back-icon-size: 16px;
  --catalogue-list-back-icon-tint: var(--palette-on-brand);
  --catalogue-list-back-top: 18px;
  --catalogue-list-back-touch-target: var(--sizing-min-touch-target);
  --catalogue-list-back-to-title: 36px;
  --catalogue-list-title-style: var(--typography-headline-bold);
  --catalogue-list-title-to-subtitle: var(--spacing-sm);
  --catalogue-list-subtitle-style: var(--typography-body-medium);
  --catalogue-list-subtitle-to-tabs: var(--spacing-lg);
  --catalogue-list-header-text-color: var(--palette-on-brand);
  --catalogue-list-header-to-body: var(--spacing-sm);
  --catalogue-list-search-height: 50px;
  --catalogue-list-search-radius: var(--radius-pill);
  --catalogue-list-search-fill: var(--palette-surface);
  --catalogue-list-search-icon-inset: var(--spacing-lg);
  --catalogue-list-search-icon-tint: var(--palette-placeholder);
  --catalogue-list-search-placeholder-color: var(--palette-placeholder);
  --catalogue-list-search-text-color: var(--palette-text-primary);
  --catalogue-list-search-text-style: var(--typography-body);
  --catalogue-list-top-to-rows: var(--spacing-sm);
  --catalogue-list-plans-to-links: var(--spacing-lg);
  --catalogue-list-plans-to-note: var(--spacing-sm);
  --catalogue-list-note-style: var(--typography-caption);
  --catalogue-list-note-color: var(--palette-text-secondary);
  --catalogue-list-bottom-padding: var(--spacing-lg);
  --catalogue-list-placeholder-count: 6;
  --catalogue-list-special-gap: var(--spacing-sm);
  --catalogue-list-special-placeholder-count: 3;
  --catalogue-list-row-placeholder-height: 50px;
  --catalogue-list-row-placeholder-radius: var(--radius-md);
  --catalogue-list-header-to-status: 40px;

  /* ---- CountriesRow: design/component/GlobalPlanTokens.kt, object CountriesRowTokens ---- */
  --countries-row-height: 50px;
  --countries-row-radius: var(--radius-md);
  --countries-row-fill: var(--palette-background);
  --countries-row-border-width: 1px;
  --countries-row-border-color: var(--palette-border);
  --countries-row-flag-size: 20px;
  --countries-row-flag-inset: 15px;
  --countries-row-flag-ring-width: 1px;
  --countries-row-flag-ring-color: var(--palette-on-brand);
  --countries-row-flag-overlap: 8px;
  --countries-row-icon-size: 20px;
  --countries-row-icon-tint: var(--palette-brand);
  --countries-row-flags-to-label: var(--spacing-sm);
  --countries-row-label-style: var(--typography-label-strong);
  --countries-row-label-color: var(--palette-text-muted);
  --countries-row-arrow-width: 20px;
  --countries-row-arrow-height: 15px;
  --countries-row-arrow-tint: var(--palette-icon-muted);
  --countries-row-arrow-trailing-inset: 15px;
  --countries-row-count-to-arrow: var(--spacing-sm);
  --countries-row-count-style: var(--typography-caption-medium);
  --countries-row-count-color: var(--palette-text-muted);

  /* ---- GlobalPlanRow: design/component/GlobalPlanTokens.kt, object GlobalPlanRowTokens ---- */
  --global-plan-row-radius: var(--radius-card);
  --global-plan-row-gap: var(--spacing-sm);
  --global-plan-row-size-inset: 15px;
  --global-plan-row-size-style: var(--typography-title-large);
  --global-plan-row-size-to-validity: var(--spacing-sm);
  --global-plan-row-validity-style: var(--typography-subhead);
  --global-plan-row-circle-size: 24px;
  --global-plan-row-circle-fill: var(--palette-on-brand);
  --global-plan-row-circle-trailing-inset: var(--spacing-lg);
  --global-plan-row-details-icon-size: 16px;
  --global-plan-row-details-icon-tint: var(--palette-brand);
  --global-plan-row-details-touch-target: var(--sizing-min-touch-target);
  --global-plan-row-price-to-circle: 15px;
  --global-plan-row-price-style: var(--typography-price);
  --global-plan-row-per-gb-style: var(--typography-caption-medium);
  --global-plan-row-height: 80px;
  --global-plan-row-plain-background: #F2F2F2 0%, #E5E5E5 100%;
  --global-plan-row-size-top: 26px;
  --global-plan-row-validity-top: 30px;
  --global-plan-row-price-top: 17px;
  --global-plan-row-per-gb-top: 48px;
  --global-plan-row-size-color: var(--palette-text-emphasis);
  --global-plan-row-validity-color: var(--palette-text-emphasis);
  --global-plan-row-price-color: var(--palette-brand);
  --global-plan-row-per-gb-color: var(--palette-text-muted);
  --global-plan-row-badged-height: 100px;
  --global-plan-row-badged-size-top: 52px;
  --global-plan-row-badged-validity-top: 57px;
  --global-plan-row-badged-price-top: 27px;
  --global-plan-row-badged-per-gb-top: 58px;
  --global-plan-row-badged-text-color: var(--palette-on-brand);
  --global-plan-row-badge-height: 24px;
  --global-plan-row-badge-radius: var(--radius-chip);
  --global-plan-row-badge-fill: var(--palette-on-brand);
  --global-plan-row-badge-inset: 15px;
  --global-plan-row-badge-top: 15px;
  --global-plan-row-badge-padding: var(--spacing-sm);
  --global-plan-row-badge-image-width: 12px;
  --global-plan-row-badge-image-height: 14px;
  --global-plan-row-badge-image-to-label: 5px;
  --global-plan-row-badge-label-style: var(--typography-micro-strong);
  --global-plan-row-badge-label-color: var(--palette-brand);
  --global-plan-row-placeholder-fill: var(--palette-surface);

  /* ---- UnlimitedCard: design/component/GlobalPlanTokens.kt, object UnlimitedCardTokens ---- */
  --unlimited-card-height: 136px;
  --unlimited-card-radius: var(--radius-card);
  --unlimited-card-title-max-width: 140px;
  --unlimited-card-caption-max-width: 138px;
  --unlimited-card-text-min-scale: var(--sizing-min-text-scale);
  --unlimited-card-title-icon-size: 31px;
  --unlimited-card-title-icon-inset: 12px;
  --unlimited-card-title-icon-top: 22px;
  --unlimited-card-title-icon-tint: var(--palette-on-brand);
  --unlimited-card-title-icon-to-title: 5px;
  --unlimited-card-title-top: 15px;
  --unlimited-card-title-style: var(--typography-headline-bold);
  --unlimited-card-title-color: var(--palette-on-brand);
  --unlimited-card-caption-inset: 15px;
  --unlimited-card-caption-top: 65px;
  --unlimited-card-caption-style: var(--typography-label);
  --unlimited-card-caption-color: var(--palette-on-brand);
  --unlimited-card-price-trailing-inset: 15px;
  --unlimited-card-price-top: 20px;
  --unlimited-card-price-style: var(--typography-price);
  --unlimited-card-price-color: var(--palette-on-brand);
  --unlimited-card-track-top: 90px;
  --unlimited-card-track-side-inset: 17px;
  --unlimited-card-track-height: 32px;
  --unlimited-card-track-radius: var(--radius-xs);
  --unlimited-card-track-fill: rgba(20, 94, 238, 0.3);
  --unlimited-card-day-style: var(--typography-label);
  --unlimited-card-day-color: rgba(255, 255, 255, 0.6);
  --unlimited-card-selected-inset-x: 1px;
  --unlimited-card-selected-inset-y: 3px;
  --unlimited-card-selected-radius: var(--radius-xs);
  --unlimited-card-selected-fill: var(--palette-on-brand-faint);
  --unlimited-card-selected-day-style: var(--typography-body-strong);
  --unlimited-card-selected-day-color: var(--palette-on-brand);
  --unlimited-card-slot-touch-target: var(--sizing-min-touch-target);

  /* ---- NoteCard: design/component/SpecialListTokens.kt, object NoteCardTokens ---- */
  --note-card-closed-height: 60px;
  --note-card-radius: var(--radius-card);
  --note-card-fill: var(--palette-surface);
  --note-card-padding: var(--spacing-lg);
  --note-card-icon-size: 20px;
  --note-card-icon-tint: var(--palette-brand);
  --note-card-icon-to-label: var(--spacing-sm);
  --note-card-label-style: var(--typography-body-medium);
  --note-card-label-color: var(--palette-text-emphasis);
  --note-card-caret-width: 12px;
  --note-card-caret-height: 8px;
  --note-card-caret-tint: var(--palette-placeholder);
  --note-card-title-top: 50px;
  --note-card-top-line-to-title: var(--spacing-sm);
  --note-card-title-style: var(--typography-body-bold);
  --note-card-title-color: var(--palette-brand);
  --note-card-title-to-bullets: var(--spacing-sm);
  --note-card-bullet-gap: var(--spacing-sm);
  --note-card-bullet-icon-size: 20px;
  --note-card-bullet-icon-tint: var(--palette-text-emphasis);
  --note-card-bullet-icon-to-text: var(--spacing-sm);
  --note-card-bullet-lead-style: var(--typography-caption-tall-strong);
  --note-card-bullet-lead-color: var(--palette-brand);
  --note-card-bullet-text-style: var(--typography-caption-tall);
  --note-card-bullet-text-color: var(--palette-text-emphasis);
  --note-card-change-millis: var(--motion-selection-millis);

  /* ---- FamilyPlanRow: design/component/SpecialListTokens.kt, object FamilyPlanRowTokens ---- */
  --family-plan-row-height: 90px;
  --family-plan-row-radius: var(--radius-card);
  --family-plan-row-gap: var(--spacing-sm);
  --family-plan-row-placeholder-fill: var(--palette-surface);
  --family-plan-row-leading-inset: 15px;
  --family-plan-row-size-top: 15px;
  --family-plan-row-size-style: var(--typography-figure);
  --family-plan-row-size-color: var(--palette-text-emphasis);
  --family-plan-row-facts-top: 61px;
  --family-plan-row-calendar-width: 13px;
  --family-plan-row-calendar-height: 14px;
  --family-plan-row-esim-icon-width: 14px;
  --family-plan-row-esim-icon-height: 13px;
  --family-plan-row-fact-icon-tint: var(--palette-brand);
  --family-plan-row-fact-icon-to-text: 5px;
  --family-plan-row-fact-gap: var(--spacing-sm);
  --family-plan-row-fact-style: var(--typography-caption-medium);
  --family-plan-row-fact-color: var(--palette-text-emphasis);
  --family-plan-row-circle-size: 24px;
  --family-plan-row-circle-fill: var(--palette-on-brand);
  --family-plan-row-circle-trailing-inset: var(--spacing-lg);
  --family-plan-row-price-to-circle: 15px;
  --family-plan-row-price-style: var(--typography-price);
  --family-plan-row-price-color: var(--palette-brand);

  /* ---- SampleNote: design/component/SpecialListTokens.kt, object SampleNoteTokens ---- */
  --sample-note-style: var(--typography-caption);
  --sample-note-color: var(--palette-text-secondary);
  --sample-note-top-gap: var(--spacing-md);

  /* ---- Tours: design/component/ToursTokens.kt, object ToursTokens ---- */
  --tours-background: var(--palette-background);
  --tours-side-margin: var(--spacing-screen-margin);
  --tours-header-height: 210px;
  --tours-header-bottom-radius: var(--radius-card);
  --tours-subtitle-to-bottom: 24px;
  --tours-header-to-tabs: 15px;
  --tours-tabs-to-cards: var(--spacing-lg);
  --tours-header-to-cards: var(--spacing-lg);
  --tours-bottom-padding: var(--spacing-lg);
  --tours-placeholder-count: 3;
  --tours-placeholder-fill: var(--palette-surface);
  --tours-header-to-status: 40px;
  --tours-pill-bottom-inset: 15px;
  --tours-pill-trailing-inset: 15px;
  --tours-pill-to-text: var(--spacing-sm);

  /* ---- HeroPill: design/component/ToursTokens.kt, object HeroPillTokens ---- */
  --hero-pill-height: 30px;
  --hero-pill-radius: var(--radius-pill);
  --hero-pill-padding: var(--spacing-sm);
  --hero-pill-fill: rgba(32, 55, 81, 0.2) 0%, rgba(129, 22, 22, 0.4) 100%;
  --hero-pill-icon-size: 14px;
  --hero-pill-icon-to-label: 5px;
  --hero-pill-label-style: var(--typography-caption-strong);
  --hero-pill-content-color: var(--palette-on-brand);
  --hero-pill-label-min-scale: var(--sizing-min-text-scale);
  --hero-pill-min-touch-target: var(--sizing-min-touch-target);

  /* ---- TourCard: design/component/ToursTokens.kt, object TourCardTokens ---- */
  --tour-card-height: 180px;
  --tour-card-radius: var(--radius-card);
  --tour-card-gap: var(--spacing-sm);
  --tour-card-plain-fill: var(--palette-card-plain);
  --tour-card-fade: rgba(20, 94, 238, 0) 17%, rgba(20, 94, 238, 0.8) 95.5%;
  --tour-card-inset: var(--spacing-lg);
  --tour-card-flags-top: 70px;
  --tour-card-flag-size: 30px;
  --tour-card-flag-ring-width: 1px;
  --tour-card-flag-ring-color: var(--palette-on-brand);
  --tour-card-flag-step: 15px;
  --tour-card-max-flags: 6;
  --tour-card-name-top: 110px;
  --tour-card-name-style: var(--typography-button);
  --tour-card-price-top: 144px;
  --tour-card-price-style: var(--typography-label);
  --tour-card-text-color: var(--palette-on-brand);

  /* ---- TourPlanner: design/component/TourPlannerTokens.kt, object TourPlannerTokens ---- */
  --tour-planner-background: var(--palette-background);
  --tour-planner-side-margin: var(--spacing-screen-margin);
  --tour-planner-hero-height: 200px;
  --tour-planner-hero-bottom-radius: var(--radius-card);
  --tour-planner-hero-title-to-subtitle: 15px;
  --tour-planner-hero-subtitle-to-bottom: var(--spacing-lg);
  --tour-planner-hero-to-section: var(--spacing-lg);
  --tour-planner-section-header-icon-width: 30px;
  --tour-planner-section-header-icon-height: 30px;
  --tour-planner-section-header-icon-tint: var(--palette-brand);
  --tour-planner-section-header-icon-to-title: var(--spacing-sm);
  --tour-planner-section-header-title-style: var(--typography-title);
  --tour-planner-section-header-title-color: var(--palette-text-emphasis);
  --tour-planner-section-to-card: var(--spacing-sm);
  --tour-planner-card-radius: var(--radius-card);
  --tour-planner-card-fill: var(--palette-surface);
  --tour-planner-card-padding: 15px;
  --tour-planner-card-gap: 15px;
  --tour-planner-card-icon-size: 30px;
  --tour-planner-card-icon-tint: var(--palette-brand);
  --tour-planner-card-icon-to-title: var(--spacing-sm);
  --tour-planner-card-title-style: var(--typography-title);
  --tour-planner-card-title-color: var(--palette-text-emphasis);
  --tour-planner-header-to-chips: 15px;
  --tour-planner-chip-width: 70px;
  --tour-planner-chip-height: 60px;
  --tour-planner-chip-gap: 5px;
  --tour-planner-chip-radius: var(--radius-chip);
  --tour-planner-chip-fill: var(--palette-background);
  --tour-planner-chip-flag-top: 10px;
  --tour-planner-chip-flag-size: 20px;
  --tour-planner-chip-name-top: 35px;
  --tour-planner-chip-flag-to-name-room: 2px;
  --tour-planner-chip-name-style: var(--typography-caption-strong);
  --tour-planner-chip-name-color: var(--palette-text-emphasis);
  --tour-planner-chip-name-side-inset: 4px;
  --tour-planner-chip-name-min-font-size: 8px;
  --tour-planner-chip-name-max-lines: 2;
  --tour-planner-chip-name-line-letters: 16;
  --tour-planner-remove-size: 14px;
  --tour-planner-remove-tint: var(--palette-badge-grey);
  --tour-planner-remove-outset: 5px;
  --tour-planner-remove-touch-target: var(--sizing-min-touch-target);
  --tour-planner-add-fill: var(--palette-brand);
  --tour-planner-add-icon-size: 20px;
  --tour-planner-add-content-color: var(--palette-on-brand);
  --tour-planner-header-to-tiles: var(--spacing-sm);
  --tour-planner-tile-max-columns: 3;
  --tour-planner-tile-column-gap: 8px;
  --tour-planner-tile-row-gap: var(--spacing-sm);
  --tour-planner-tile-height: 80px;
  --tour-planner-tile-selected-border-width: 1px;
  --tour-planner-tile-selected-border-color: var(--palette-brand);
  --tour-planner-tick-tint: var(--palette-brand);
  --tour-planner-select-millis: var(--motion-selection-millis);
  --tour-planner-tiles-to-unlimited: var(--spacing-sm);
  --tour-planner-unlimited-top-height: 54px;
  --tour-planner-unlimited-radius: var(--radius-md);
  --tour-planner-unlimited-fill: var(--palette-background);
  --tour-planner-unlimited-title-style: var(--typography-heading);
  --tour-planner-unlimited-title-color: var(--palette-text-neutral);
  --tour-planner-day-chips-per-row: 4;
  --tour-planner-day-chip-height: 50px;
  --tour-planner-day-chip-gap: var(--spacing-sm);
  --tour-planner-day-chip-row-gap: var(--spacing-sm);
  --tour-planner-day-chips-inset: var(--spacing-sm);
  --tour-planner-day-chip-radius: var(--radius-chip);
  --tour-planner-day-chip-fill: var(--palette-surface);
  --tour-planner-day-chip-style: var(--typography-numeral-medium);
  --tour-planner-day-chip-color: var(--palette-text-muted-veil);
  --tour-planner-day-chip-selected-style: var(--typography-title-large);
  --tour-planner-day-chip-selected-color: var(--palette-brand);
  --tour-planner-day-chip-selected-border-width: 1px;
  --tour-planner-day-chip-selected-border-color: var(--palette-brand);
  --tour-planner-placeholder-tiles: 6;
  --tour-planner-placeholder-fill: var(--palette-background);
  --tour-planner-card-status-padding: var(--spacing-lg);
  --tour-planner-card-to-foot: var(--spacing-lg);
  --tour-planner-banner-height: 120px;
  --tour-planner-banner-radius: var(--radius-card);
  --tour-planner-banner-text-inset: var(--spacing-lg);
  --tour-planner-banner-title-top: 29px;
  --tour-planner-banner-title-style: var(--typography-title-bold);
  --tour-planner-banner-title-min-scale: var(--sizing-min-text-scale);
  --tour-planner-banner-title-to-body: 15px;
  --tour-planner-banner-body-width: 213px;
  --tour-planner-banner-body-style: var(--typography-label);
  --tour-planner-banner-body-max-lines: 3;
  --tour-planner-banner-body-min-scale: var(--sizing-min-text-scale);
  --tour-planner-banner-text-bottom: 15px;
  --tour-planner-banner-text-color: var(--palette-on-brand);
  --tour-planner-foot-status-padding: var(--spacing-lg);
  --tour-planner-foot-to-button: 17px;
  --tour-planner-button-height: 60px;
  --tour-planner-button-radius: var(--radius-md);
  --tour-planner-button-horizontal-padding: 50px;
  --tour-planner-button-fill: var(--palette-brand);
  --tour-planner-button-label-color: var(--palette-on-brand);
  --tour-planner-button-label-style: var(--typography-body-strong);
  --tour-planner-button-to-help: var(--spacing-lg);
  --tour-planner-help-style: var(--typography-body-strong);
  --tour-planner-help-color: var(--palette-text-emphasis);
  --tour-planner-help-touch-target: var(--sizing-min-touch-target);
  --tour-planner-bottom-padding: var(--spacing-md);
  --tour-planner-min-touch-target: var(--sizing-min-touch-target);

  /* ---- TourResultCard: design/component/TourPlannerTokens.kt, object TourResultCardTokens ---- */
  --tour-result-card-height: 143px;
  --tour-result-card-radius: var(--radius-card);
  --tour-result-card-inset: var(--spacing-lg);
  --tour-result-card-skin-fill: var(--palette-brand), var(--palette-brand-deep);
  --tour-result-card-skin-name-style: var(--typography-body-bold);
  --tour-result-card-skin-name-color: var(--palette-on-brand);
  --tour-result-card-skin-pill-fill: var(--palette-background);
  --tour-result-card-skin-pill-label-color: var(--palette-brand);
  --tour-result-card-skin-label-color: var(--palette-on-brand-soft);
  --tour-result-card-skin-value-color: var(--palette-on-brand);
  --tour-result-card-skin-disc-fill: var(--palette-background);
  --tour-result-card-skin-disc-tint: var(--palette-brand);
  --tour-result-card-skin-disc-icon-size: 20px;
  --tour-result-card-flags-top: 20px;
  --tour-result-card-flag-size: 30px;
  --tour-result-card-flag-step: 25px;
  --tour-result-card-flag-ring-width: 1px;
  --tour-result-card-flag-ring-color: var(--palette-on-brand);
  --tour-result-card-max-flags: 8;
  --tour-result-card-pill-top: var(--spacing-sm);
  --tour-result-card-pill-trailing-inset: var(--spacing-sm);
  --tour-result-card-pill-height: 30px;
  --tour-result-card-pill-padding: 17px;
  --tour-result-card-pill-radius: var(--radius-pill);
  --tour-result-card-pill-label-style: var(--typography-caption-strong);
  --tour-result-card-labels-top: 77px;
  --tour-result-card-label-style: var(--typography-label);
  --tour-result-card-values-top: 100px;
  --tour-result-card-value-style: var(--typography-title-large);
  --tour-result-card-column-gap: var(--spacing-sm);
  --tour-result-card-value-min-scale: var(--sizing-min-text-scale);

  /* ---- CoveredCountriesSheet: design/component/CoveredCountriesSheetTokens.kt, object CoveredCountriesSheetTokens ---- */
  --covered-countries-sheet-columns: 3;
  --covered-countries-sheet-gap: var(--spacing-sm);
  --covered-countries-sheet-search-to-tiles: var(--spacing-sm);
  --covered-countries-sheet-tiles-bottom: var(--spacing-lg);
  --covered-countries-sheet-tile-height: 100px;
  --covered-countries-sheet-tile-radius: var(--radius-md);
  --covered-countries-sheet-tile-fill: var(--palette-surface);
  --covered-countries-sheet-flag-size: 30px;
  --covered-countries-sheet-flag-top: 18px;
  --covered-countries-sheet-flag-to-name: 16px;
  --covered-countries-sheet-name-bottom: 4px;
  --covered-countries-sheet-name-style: var(--typography-label-strong);
  --covered-countries-sheet-name-color: var(--palette-text-emphasis);
  --covered-countries-sheet-name-padding: var(--spacing-xs);
  --covered-countries-sheet-name-min-font-size: 12px;
  --covered-countries-sheet-name-max-lines: 2;
  --covered-countries-sheet-search-to-no-match: var(--spacing-lg);
  --covered-countries-sheet-no-match-style: var(--typography-body);
  --covered-countries-sheet-no-match-color: var(--palette-text-secondary);

  /* ---- CruiseCheckSheet: design/component/CruiseCheckSheetTokens.kt, object CruiseCheckSheetTokens ---- */
  --cruise-check-sheet-height-fraction: 0.71;
  --cruise-check-sheet-title-top: 23px;
  --cruise-check-sheet-title-style: var(--typography-title);
  --cruise-check-sheet-title-color: var(--palette-text-emphasis);
  --cruise-check-sheet-close-size: 20px;
  --cruise-check-sheet-close-inset: var(--spacing-lg);
  --cruise-check-sheet-close-top: 23px;
  --cruise-check-sheet-close-tint: var(--palette-inactive);
  --cruise-check-sheet-close-touch-target: var(--sizing-min-touch-target);
  --cruise-check-sheet-search-height: 50px;
  --cruise-check-sheet-search-radius: var(--radius-pill);
  --cruise-check-sheet-search-fill: var(--palette-surface);
  --cruise-check-sheet-search-icon-inset: 15px;
  --cruise-check-sheet-search-icon-tint: var(--palette-brand);
  --cruise-check-sheet-search-placeholder-color: var(--palette-placeholder);
  --cruise-check-sheet-search-text-color: var(--palette-text-emphasis);
  --cruise-check-sheet-search-text-style: var(--typography-body-medium);
  --cruise-check-sheet-search-top: 64px;
  --cruise-check-sheet-search-side-inset: var(--spacing-lg);
  --cruise-check-sheet-search-to-list: 4px;
  --cruise-check-sheet-list-inset: var(--spacing-lg);
  --cruise-check-sheet-line-header-height: 46px;
  --cruise-check-sheet-name-style: var(--typography-label-strong);
  --cruise-check-sheet-name-color: var(--palette-text-emphasis);
  --cruise-check-sheet-name-to-caret: var(--spacing-sm);
  --cruise-check-sheet-caret-width: 12px;
  --cruise-check-sheet-caret-height: 8px;
  --cruise-check-sheet-caret-tint: var(--palette-caret-grey);
  --cruise-check-sheet-caret-trailing-inset: 29px;
  --cruise-check-sheet-separator-height: 1px;
  --cruise-check-sheet-separator-color: var(--palette-surface);
  --cruise-check-sheet-header-to-chips: 5px;
  --cruise-check-sheet-open-bottom: 20px;
  --cruise-check-sheet-chip-height: 30px;
  --cruise-check-sheet-chip-radius: var(--radius-chip);
  --cruise-check-sheet-chip-padding: 11px;
  --cruise-check-sheet-chip-gap: var(--spacing-sm);
  --cruise-check-sheet-chip-row-gap: 5px;
  --cruise-check-sheet-chip-fill: var(--palette-surface);
  --cruise-check-sheet-chip-label-style: var(--typography-micro-strong);
  --cruise-check-sheet-chip-label-color: var(--palette-text-secondary);
  --cruise-check-sheet-search-to-message: var(--spacing-lg);
  --cruise-check-sheet-placeholder-count: 6;
  --cruise-check-sheet-placeholder-height: 30px;
  --cruise-check-sheet-placeholder-radius: var(--radius-chip);
  --cruise-check-sheet-search-to-placeholders: 12px;
  --cruise-check-sheet-placeholder-gap: 17px;
  --cruise-check-sheet-placeholder-fill: var(--palette-surface);
  --cruise-check-sheet-sample-note-top: var(--spacing-sm);
  --cruise-check-sheet-sample-note-bottom: 15px;
  --cruise-check-sheet-list-bottom: var(--spacing-lg);

  /* ---- DevicesSheet: design/component/DevicesSheetTokens.kt, object DevicesSheetTokens ---- */
  --devices-sheet-scrim: var(--palette-scrim);
  --devices-sheet-fill: var(--palette-background);
  --devices-sheet-radius: var(--radius-lg);
  --devices-sheet-side-inset: var(--spacing-screen-margin);
  --devices-sheet-bottom-inset: 40px;
  --devices-sheet-bottom-safe-gap: 6px;
  --devices-sheet-height-fraction: 0.71;
  --devices-sheet-open-millis: var(--motion-sheet-millis);
  --devices-sheet-title-top: 21px;
  --devices-sheet-title-style: var(--typography-title);
  --devices-sheet-title-color: var(--palette-text-emphasis);
  --devices-sheet-close-size: 20px;
  --devices-sheet-close-inset: var(--spacing-lg);
  --devices-sheet-close-top: 21px;
  --devices-sheet-close-tint: var(--palette-inactive);
  --devices-sheet-close-touch-target: var(--sizing-min-touch-target);
  --devices-sheet-search-height: 50px;
  --devices-sheet-search-radius: var(--radius-pill);
  --devices-sheet-search-fill: var(--palette-surface);
  --devices-sheet-search-icon-inset: 15px;
  --devices-sheet-search-icon-tint: var(--palette-brand);
  --devices-sheet-search-placeholder-color: var(--palette-placeholder);
  --devices-sheet-search-text-color: var(--palette-text-emphasis);
  --devices-sheet-search-text-style: var(--typography-body-medium);
  --devices-sheet-search-top: 62px;
  --devices-sheet-search-side-inset: var(--spacing-lg);
  --devices-sheet-notice-style: var(--typography-micro);
  --devices-sheet-notice-color: var(--palette-text-secondary);
  --devices-sheet-notice-gap: var(--spacing-xxs);
  --devices-sheet-notice-to-search: var(--spacing-sm);
  --devices-sheet-list-inset: var(--spacing-lg);
  --devices-sheet-brand-header-height: 46px;
  --devices-sheet-brand-name-style: var(--typography-label-bold);
  --devices-sheet-brand-name-color: var(--palette-text-emphasis);
  --devices-sheet-caret-width: 12px;
  --devices-sheet-caret-height: 8px;
  --devices-sheet-caret-tint: var(--palette-placeholder);
  --devices-sheet-caret-trailing-inset: 29px;
  --devices-sheet-separator-height: 1px;
  --devices-sheet-separator-color: var(--palette-border);
  --devices-sheet-header-to-chips: 5px;
  --devices-sheet-chips-to-note: 9px;
  --devices-sheet-open-bottom: 15px;
  --devices-sheet-note-style: var(--typography-micro);
  --devices-sheet-note-color: var(--palette-text-emphasis);
  --devices-sheet-note-line-height: 14px;
  --devices-sheet-chip-height: 30px;
  --devices-sheet-chip-radius: var(--radius-chip);
  --devices-sheet-chip-padding: var(--spacing-sm);
  --devices-sheet-chip-gap: 5px;
  --devices-sheet-chip-fill: var(--palette-border);
  --devices-sheet-chip-label-style: var(--typography-micro);
  --devices-sheet-chip-label-color: var(--palette-text-secondary);
  --devices-sheet-search-to-results: 15px;
  --devices-sheet-search-to-no-match: var(--spacing-lg);
  --devices-sheet-search-to-failure: 40px;
  --devices-sheet-placeholder-count: 3;
  --devices-sheet-placeholder-height: 30px;
  --devices-sheet-placeholder-radius: var(--radius-chip);
  --devices-sheet-placeholder-gap: 17px;
  --devices-sheet-placeholder-fill: var(--palette-surface);

  /* ---- DestinationSheet: design/component/PlanBuilderTokens.kt, object DestinationSheetTokens ---- */
  --destination-sheet-row-height: 46px;
  --destination-sheet-flag-size: 24px;
  --destination-sheet-flag-leading-inset: var(--spacing-lg);
  --destination-sheet-flag-to-name: var(--spacing-sm);
  --destination-sheet-name-style: var(--typography-label-bold);
  --destination-sheet-name-color: var(--palette-text-emphasis);
  --destination-sheet-tick-size: 20px;
  --destination-sheet-tick-trailing-inset: var(--spacing-lg);
  --destination-sheet-tick-tint: var(--palette-brand);
  --destination-sheet-separator-height: 1px;
  --destination-sheet-separator-inset: var(--spacing-lg);
  --destination-sheet-separator-color: var(--palette-border);
  --destination-sheet-search-to-no-match: var(--spacing-lg);
  --destination-sheet-no-match-style: var(--typography-body);
  --destination-sheet-no-match-color: var(--palette-text-secondary);

  /* ---- AirlineMark: design/component/FlightCheckTokens.kt, object AirlineMarkTokens ---- */
  --airline-mark-code-color: var(--palette-on-brand);
  --airline-mark-large-size: 40px;
  --airline-mark-large-radius: var(--radius-xs);
  --airline-mark-large-code-style: var(--typography-label-bold);
  --airline-mark-medium-size: 30px;
  --airline-mark-medium-radius: 8px;
  --airline-mark-medium-code-style: var(--typography-caption-bold);
  --airline-mark-small-size: 20px;
  --airline-mark-small-radius: 6px;
  --airline-mark-small-code-style: var(--typography-micro-strong);
  --airline-mark-brand: var(--palette-brand);
  --airline-mark-navy: var(--palette-navy);
  --airline-mark-positive: var(--palette-positive);
  --airline-mark-coffee: var(--palette-place-coffee);
  --airline-mark-danger: var(--palette-danger);
  --airline-mark-warning: var(--palette-warning);
  --airline-mark-sky: var(--palette-sky);
  --airline-mark-landmark: var(--palette-place-landmark);

  /* ---- FlightCheck: design/component/FlightCheckTokens.kt, object FlightCheckTokens ---- */
  --flight-check-background: var(--palette-background);
  --flight-check-side-inset: var(--spacing-screen-margin);
  --flight-check-header-to-banner: 20px;
  --flight-check-banner-height: 130px;
  --flight-check-banner-radius: var(--radius-md);
  --flight-check-banner-text-inset: 15px;
  --flight-check-banner-title-top: 19px;
  --flight-check-banner-title-style: var(--typography-title-bold);
  --flight-check-banner-title-color: var(--palette-brand);
  --flight-check-banner-title-to-body: var(--spacing-sm);
  --flight-check-banner-body-style: var(--typography-label-tall);
  --flight-check-banner-body-color: var(--palette-text-emphasis);
  --flight-check-banner-body-width: 240px;
  --flight-check-banner-body-max-lines: 3;
  --flight-check-banner-text-min-scale: var(--sizing-min-text-scale);
  --flight-check-banner-text-min-padding: var(--spacing-sm);
  --flight-check-banner-to-label: 15px;
  --flight-check-label-icon-box: 20px;
  --flight-check-label-icon-tint: var(--palette-brand);
  --flight-check-label-icon-to-text: var(--spacing-sm);
  --flight-check-label-style: var(--typography-body-strong);
  --flight-check-label-color: var(--palette-text-emphasis);
  --flight-check-label-to-field: var(--spacing-sm);
  --flight-check-field-to-label: 15px;
  --flight-check-field-height: 50px;
  --flight-check-field-radius: var(--radius-md);
  --flight-check-field-fill: var(--palette-surface);
  --flight-check-field-text-inset: 15px;
  --flight-check-field-text-style: var(--typography-body-medium);
  --flight-check-field-text-color: var(--palette-text-emphasis);
  --flight-check-field-placeholder-color: var(--palette-placeholder);
  --flight-check-field-cursor-color: var(--palette-brand);
  --flight-check-airline-mark-size: 40px;
  --flight-check-airline-mark-radius: var(--radius-xs);
  --flight-check-airline-mark-code-style: var(--typography-label-bold);
  --flight-check-airline-mark-inset: 5px;
  --flight-check-airline-mark-to-name: var(--spacing-sm);
  --flight-check-airline-name-style: var(--typography-label);
  --flight-check-airline-name-color: var(--palette-text-emphasis);
  --flight-check-caret-width: 12px;
  --flight-check-caret-height: 8px;
  --flight-check-caret-tint: var(--palette-caret-grey);
  --flight-check-caret-trailing-inset: var(--spacing-lg);
  --flight-check-field-to-error: var(--spacing-xs);
  --flight-check-error-leading-inset: 15px;
  --flight-check-error-style: var(--typography-label);
  --flight-check-error-color: var(--palette-error);
  --flight-check-field-to-lookup-note: var(--spacing-xs);
  --flight-check-lookup-note-leading-inset: 15px;
  --flight-check-lookup-note-style: var(--typography-label);
  --flight-check-lookup-note-color: var(--palette-text-muted);
  --flight-check-route-height: 60px;
  --flight-check-route-gap: var(--spacing-sm);
  --flight-check-route-radius: var(--radius-md);
  --flight-check-route-fill: var(--palette-surface);
  --flight-check-route-text-inset: 15px;
  --flight-check-route-caption-top: 10px;
  --flight-check-route-caption-style: var(--typography-caption-medium);
  --flight-check-route-caption-color: var(--palette-text-emphasis);
  --flight-check-route-value-top: 30px;
  --flight-check-route-value-style: var(--typography-body-strong);
  --flight-check-route-value-color: var(--palette-text-emphasis);
  --flight-check-route-placeholder-color: var(--palette-placeholder);
  --flight-check-date-icon-width: 18px;
  --flight-check-date-icon-height: 20px;
  --flight-check-date-icon-tint: var(--palette-text-emphasis);
  --flight-check-date-icon-trailing-inset: 15px;
  --flight-check-field-to-note: 15px;
  --flight-check-note-to-sample-note: var(--spacing-sm);
  --flight-check-sample-note-style: var(--typography-caption-medium);
  --flight-check-sample-note-color: var(--palette-text-muted);
  --flight-check-to-heading: 15px;
  --flight-check-sample-note-to-heading: var(--spacing-sm);
  --flight-check-heading-icon-size: 30px;
  --flight-check-heading-icon-tint: var(--palette-brand);
  --flight-check-heading-icon-to-title: var(--spacing-sm);
  --flight-check-heading-style: var(--typography-title);
  --flight-check-heading-color: var(--palette-text-emphasis);
  --flight-check-heading-to-tiles: var(--spacing-sm);
  --flight-check-tile-columns: 3;
  --flight-check-tile-height: 100px;
  --flight-check-tile-gap: var(--spacing-xs);
  --flight-check-tile-row-gap: var(--spacing-sm);
  --flight-check-tile-radius: var(--radius-card);
  --flight-check-tile-fill: var(--palette-surface);
  --flight-check-tile-mark-size: 40px;
  --flight-check-tile-mark-radius: var(--radius-xs);
  --flight-check-tile-mark-code-style: var(--typography-label-bold);
  --flight-check-tile-mark-top: 20px;
  --flight-check-tile-name-top: 67px;
  --flight-check-tile-name-style: var(--typography-label);
  --flight-check-tile-name-color: var(--palette-text-neutral);
  --flight-check-tile-name-inset: var(--spacing-xs);
  --flight-check-tile-name-min-scale: var(--sizing-min-text-scale);
  --flight-check-placeholder-tiles: 6;
  --flight-check-placeholder-fill: var(--palette-surface);
  --flight-check-to-status: var(--spacing-lg);
  --flight-check-tiles-to-button: 26px;
  --flight-check-button-height: 60px;
  --flight-check-button-radius: var(--radius-md);
  --flight-check-button-horizontal-padding: 50px;
  --flight-check-button-fill: var(--palette-brand);
  --flight-check-button-label-color: var(--palette-on-brand);
  --flight-check-button-label-style: var(--typography-body-strong);
  --flight-check-message-to-button: var(--spacing-sm);
  --flight-check-message-style: var(--typography-label);
  --flight-check-message-color: var(--palette-error);
  --flight-check-bottom-inset: var(--spacing-lg);
  --flight-check-list-side-inset: var(--spacing-sm);
  --flight-check-list-top: 34px;
  --flight-check-list-height: 250px;
  --flight-check-list-radius: var(--radius-md);
  --flight-check-list-fill: var(--palette-background);
  --flight-check-list-border-width: 1px;
  --flight-check-list-border-color: #D9D9D9;
  --flight-check-list-shadow: 0px 20px 20px rgba(0, 0, 0, 0.1);
  --flight-check-list-search-grey: #A6A6A6;
  --flight-check-list-search-height: 40px;
  --flight-check-list-search-radius: var(--radius-xs);
  --flight-check-list-search-fill: var(--palette-surface);
  --flight-check-list-search-icon-inset: 10px;
  --flight-check-list-search-icon-tint: #A6A6A6;
  --flight-check-list-search-placeholder-color: #A6A6A6;
  --flight-check-list-search-text-color: var(--palette-text-emphasis);
  --flight-check-list-search-text-style: var(--typography-label);
  --flight-check-list-search-placeholder-style: var(--typography-label);
  --flight-check-list-search-icon-to-text: 5px;
  --flight-check-list-search-top: 9px;
  --flight-check-list-search-inset: var(--spacing-sm);
  --flight-check-list-search-to-rows: 11px;
  --flight-check-row-height: 40px;
  --flight-check-row-touch-height: var(--sizing-min-touch-target);
  --flight-check-row-mark-size: 30px;
  --flight-check-row-mark-radius: 8px;
  --flight-check-row-mark-code-style: var(--typography-caption-bold);
  --flight-check-row-mark-inset: var(--spacing-sm);
  --flight-check-row-mark-to-text: 4px;
  --flight-check-row-name-style: var(--typography-caption-strong);
  --flight-check-row-other-name-style: var(--typography-micro-regular);
  --flight-check-row-text-color: var(--palette-text-emphasis);
  --flight-check-row-name-to-other: 18px;
  --flight-check-row-text-trailing-inset: var(--spacing-lg);
  --flight-check-list-bottom-padding: var(--spacing-sm);
  --flight-check-list-thumb-width: 5px;
  --flight-check-list-thumb-color: #D9D9D9;
  --flight-check-list-thumb-trailing-inset: var(--spacing-xs);
  --flight-check-list-thumb-end-inset: var(--spacing-xs);
  --flight-check-list-thumb-min-length: 24px;
  --flight-check-list-search-to-message: var(--spacing-lg);

  /* ---- FlightAnswerSheet: design/component/FlightCheckTokens.kt, object FlightAnswerSheetTokens ---- */
  --flight-answer-sheet-text-inset: var(--spacing-lg);
  --flight-answer-sheet-title-style: var(--typography-screen-title);
  --flight-answer-sheet-title-color: var(--palette-text-emphasis);
  --flight-answer-sheet-body-style: var(--typography-label-tall);
  --flight-answer-sheet-body-color: var(--palette-text-muted);
  --flight-answer-sheet-body-to-sample-note: var(--spacing-sm);
  --flight-answer-sheet-sample-note-style: var(--typography-caption-medium);
  --flight-answer-sheet-sample-note-color: var(--palette-text-muted);
  --flight-answer-sheet-fact-count: 3;
  --flight-answer-sheet-fact-inset: var(--spacing-lg);
  --flight-answer-sheet-fact-gap: 9px;
  --flight-answer-sheet-fact-height: 124px;
  --flight-answer-sheet-fact-radius: var(--radius-card);
  --flight-answer-sheet-fact-fill: var(--palette-surface);
  --flight-answer-sheet-fact-picture-box: 40px;
  --flight-answer-sheet-fact-picture-top: 20px;
  --flight-answer-sheet-fact-mark-size: 40px;
  --flight-answer-sheet-fact-mark-radius: var(--radius-xs);
  --flight-answer-sheet-fact-mark-code-style: var(--typography-label-bold);
  --flight-answer-sheet-fact-icon-tint: var(--palette-brand);
  --flight-answer-sheet-fact-label-top: 70px;
  --flight-answer-sheet-fact-label-style: var(--typography-caption-medium);
  --flight-answer-sheet-fact-label-color: var(--palette-text-emphasis);
  --flight-answer-sheet-fact-value-top: 89px;
  --flight-answer-sheet-fact-value-style: var(--typography-label-tall-bold);
  --flight-answer-sheet-fact-value-color: var(--palette-brand);
  --flight-answer-sheet-fact-text-inset: 6px;
  --flight-answer-sheet-fact-text-min-scale: var(--sizing-min-text-scale);
  --flight-answer-sheet-tiles-to-note: 20px;
  --flight-answer-sheet-note-to-button: 20px;
  --flight-answer-sheet-tiles-to-button: 20px;
  --flight-answer-sheet-supported-picture-width: 80px;
  --flight-answer-sheet-supported-picture-height: 80px;
  --flight-answer-sheet-supported-picture-top: 35px;
  --flight-answer-sheet-supported-picture-to-title: 15px;
  --flight-answer-sheet-supported-title-to-body: 15px;
  --flight-answer-sheet-supported-body-to-tiles: 26px;
  --flight-answer-sheet-not-supported-picture-width: 96px;
  --flight-answer-sheet-not-supported-picture-height: 90px;
  --flight-answer-sheet-not-supported-picture-top: 29px;
  --flight-answer-sheet-not-supported-picture-to-title: 11px;
  --flight-answer-sheet-not-supported-title-to-body: 15px;
  --flight-answer-sheet-not-supported-body-to-tiles: 16px;
}
/* ==== end of the written tokens ==== */

/*
 * Maak on the web: the browse pages' own components.
 *
 * The lists of destinations and packages (local, regional, global, cruise,
 * family, in-flight), the tours list, "Plan your tour", the sheets of
 * countries and of cruises, and the in-flight check with its two answers.
 * A page of pages/browse/ links this file after maak.css.
 *
 * Written as the kit is: a component is a class named after the Android
 * component it mirrors (GlobalPlanRow.kt is .global-plan-row), its parts are
 * .component__part, its looks .component--look, its states the ARIA attribute
 * that says them. Every size and colour is a token: the kit's (css/tokens.css)
 * or this family's own, written above from the Kotlin objects by
 * pages/browse/tokens.py. Phone first, then 768 and 1100, and nothing says
 * which side is which: see css/base.css.
 */

/* ==========================================================================
   1. The ground, the band and the panel. Web only.
   ========================================================================== */

:root {
  /* How far what follows a band rises over its foot. Nothing on a phone, where the page is the apps' own. */
  --browse-overlap: 0px;
  /* The band's own blues, from the chosen look: the brand colour between a deeper and a lighter one. */
  --browse-band: var(--palette-brand-shade) 0%, var(--palette-brand) 45%, color-mix(in srgb, var(--palette-brand) 62%, var(--palette-on-brand)) 100%;
  /* The shadow of a white card lying on the pale ground. */
  --browse-card-shadow: 0 var(--spacing-xs) var(--spacing-xl) var(--palette-shadow-soft);
}
@media (min-width: 768px) {
  :root { --browse-overlap: calc(var(--spacing-xl) * 3); }
  /* From a tablet up a browse page stands on a pale ground, and what it lists lies in white cards. */
  .page--ground { background: var(--palette-brand-wash); }
}

/* A page under a sheet does not scroll: the sheet is all there is to do. The page is cut at the window's foot. */
html:has(> .page--locked) { overflow: hidden; }
.page--locked { block-size: 100vh; overflow: hidden; }

/* PictureHeader (ToursScreen.kt), and the catalogue list's header: a picture
   with the page's title on it. On a phone it is the apps' header, edge to
   edge with a round foot. From a tablet up it is the band of the chosen look:
   the brand colour across the whole window, the title and the search in its
   middle, and what follows rising over its foot. It stands outside a
   .container and holds one. */
.picture-header {
  --web-focus-color: var(--palette-on-brand);
  /* The room under the picture that still belongs to the header: the search field, or the tabs of the tours, on a phone. */
  --_below: 0px;
  position: relative; isolation: isolate; color: var(--catalogue-list-header-text-color);
}
.picture-header--search { --_below: calc(var(--catalogue-list-search-height) + var(--catalogue-list-header-to-body)); }
.picture-header--tabs { --_below: calc(var(--segmented-control-compact-touch-target) + var(--tours-header-to-tabs)); }
/* The colour under the picture, and in its place while it is read. */
.picture-header::before {
  content: ""; position: absolute; inset-block: 0 var(--_below); inset-inline: 0; z-index: -2;
  background: linear-gradient(to bottom, var(--plans-hero-plain-background));
  border-end-start-radius: var(--catalogue-list-header-bottom-radius); border-end-end-radius: var(--catalogue-list-header-bottom-radius);
}
.picture-header__picture {
  position: absolute; inset-block-start: 0; inset-inline: 0; z-index: -1;
  inline-size: 100%; block-size: calc(100% - var(--_below)); object-fit: cover; object-position: center 20%;
  border-end-start-radius: var(--catalogue-list-header-bottom-radius); border-end-end-radius: var(--catalogue-list-header-bottom-radius);
}
/* A picture drawn for a right-to-left page, turned round on a left-to-right one so that its fade stays under the title. */
.picture-header__picture--mirrors { transform: scaleX(var(--mirror)); }
.picture-header__inner { position: relative; display: flex; flex-direction: column; padding-block-start: var(--spacing-xs); }
.picture-header__back {
  align-self: flex-start; display: inline-flex; align-items: center; justify-content: center;
  inline-size: var(--catalogue-list-back-touch-target); block-size: var(--catalogue-list-back-touch-target); margin-inline-start: calc(var(--spacing-sm) * -1);
  border-radius: 50%; color: var(--catalogue-list-back-icon-tint);
}
.picture-header__back .icon { --icon-size: var(--catalogue-list-back-icon-size); }
.picture-header__title { margin-block-start: var(--spacing-md); font: var(--catalogue-list-title-style) var(--font-family); }
.picture-header__subtitle { margin-block-start: var(--catalogue-list-title-to-subtitle); font: var(--catalogue-list-subtitle-style) var(--font-family); }
/* The six kinds, standing on the picture's foot: the selected one runs into the page. */
.picture-header__tabs { margin-block-start: var(--catalogue-list-subtitle-to-tabs); }
/* The search of the local and regional lists. Under the picture on a phone, as in the apps. */
.picture-header__search { --web-focus-color: var(--palette-brand); margin-block-start: var(--catalogue-list-header-to-body); }
/* A header with no tabs ends a little under its subtitle. */
.picture-header__foot { block-size: var(--tours-subtitle-to-bottom); }

@media (min-width: 768px) {
  .picture-header { overflow: hidden; padding-block: calc(var(--spacing-xxl) * 2) var(--browse-overlap); text-align: center; }
  .picture-header::before { inset: 0; border-radius: 0; background: linear-gradient(125deg, var(--browse-band)); }
  /* Two pale discs, as the chosen look draws them. Laid out for a right-to-left page and turned round with it. */
  .picture-header::after {
    content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(var(--mirror));
    background:
      radial-gradient(circle at 12% -10%, color-mix(in srgb, var(--palette-on-brand) 9%, transparent) 0 calc(var(--spacing-xxl) * 10), transparent calc(var(--spacing-xxl) * 10 + 1px)),
      radial-gradient(circle at 94% 130%, color-mix(in srgb, var(--palette-on-brand) 7%, transparent) 0 calc(var(--spacing-xxl) * 8), transparent calc(var(--spacing-xxl) * 8 + 1px));
  }
  /* The picture is the band's grain: the brand colour reads through it. */
  .picture-header__picture {
    inset: 0; z-index: -2; block-size: 100%; border-radius: 0; opacity: 0.42; mix-blend-mode: luminosity;
    /* It keeps to the two ends: the middle stays clear for the title. */
    -webkit-mask-image: linear-gradient(90deg, #000 4%, transparent 40%, transparent 60%, #000 96%); mask-image: linear-gradient(90deg, #000 4%, transparent 40%, transparent 60%, #000 96%);
  }
  .picture-header::before { z-index: -3; }
  .picture-header__inner { align-items: center; padding-block-start: 0; }
  .picture-header__back { display: none; }
  .picture-header__title { margin-block-start: 0; font: var(--typography-hero) var(--font-family); }
  .picture-header__subtitle { max-inline-size: 56ch; margin-block-start: var(--spacing-md); color: var(--palette-on-brand-soft); font: var(--typography-subhead-large) var(--font-family); line-height: 1.5; }
  .picture-header__search {
    --web-focus-color: var(--palette-on-brand); --_fill: var(--palette-background);
    order: 1; inline-size: 100%; max-inline-size: calc(var(--web-sheet-width) * 1.5); margin-block-start: var(--spacing-xl);
    box-shadow: 0 var(--spacing-lg) calc(var(--spacing-lg) * 2) color-mix(in srgb, var(--palette-brand-deep) 35%, transparent);
  }
  .picture-header__tabs { order: 2; position: relative; z-index: 1; inline-size: 100%; max-inline-size: calc(var(--web-sheet-width) * 1.5); margin-block-start: var(--spacing-xxl); }
  .picture-header__foot { block-size: var(--spacing-xxl); }
}

/* What a browse page lists, under its band: on a phone the page itself, from
   a tablet up a white panel that rises over the band's foot, so that the
   selected tab runs into it. */
.browse-panel { padding-block-start: var(--catalogue-list-top-to-rows); }
@media (min-width: 768px) {
  .browse-panel {
    position: relative; margin-block-start: calc(var(--browse-overlap) * -1); padding: var(--spacing-xl);
    border-radius: var(--radius-lg); background: var(--palette-background); box-shadow: var(--browse-card-shadow);
  }
  .browse-panel .grid-auto--rows { gap: var(--spacing-md); }
}
@media (min-width: 1100px) {
  .browse-panel { padding: var(--spacing-xxl); }
}

/* The other states of a page, drawn under it for whoever builds it. A design
   note: no part of the website. */
.state-board { margin-block-start: var(--web-section-gap); padding-block-start: var(--spacing-xl); border-block-start: 2px dashed var(--palette-brand-outline); }
.state-board__title { color: var(--palette-text-emphasis); font: var(--typography-title-large) var(--font-family); }
.state-board__note { max-inline-size: 80ch; margin-block-start: var(--spacing-xs); color: var(--palette-text-secondary); font: var(--typography-label-tall) var(--font-family); }
.state-board__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-xl) var(--web-grid-gap); margin-block-start: var(--spacing-lg); }
.state-board__item { display: flex; flex-direction: column; gap: var(--spacing-xs); min-inline-size: 0; }
.state-board__item--wide { grid-column: 1 / -1; }
.state-board__label { color: var(--palette-text-secondary); font: var(--typography-caption-strong) var(--font-family); }
.state-board__frame { flex: 1 1 auto; padding: var(--spacing-lg); border-radius: var(--radius-card); background: var(--palette-background); box-shadow: inset 0 0 0 1px var(--palette-brand-outline); }
/* A frame that stands for the window: what is fixed to the window (a scrim, a sheet) stays inside it. */
.state-board__frame--window { position: relative; overflow: hidden; block-size: calc(var(--web-sheet-width) * 1.5); padding: 0; background: var(--palette-surface); transform: translateZ(0); }
.state-board__frame--window .scrim, .state-board__frame--window .sheet { animation: none; }
@media (min-width: 768px) {
  .state-board__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .state-board__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .state-board__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   2. What the lists of packages hold: rows, cards, notes
   ========================================================================== */

/* A list of plans with what goes with it. On a phone, top to bottom as the
   apps draw it: the switch (the cruise list's two coverages), the lead (the
   note, the row of countries or the check row), the plans, then the rest
   (the link rows). On a desktop the plans keep the wide column, and the lead
   and the rest stand beside them. Web only. */
.plans-layout { display: flex; flex-direction: column; gap: var(--catalogue-list-special-gap); }
.plans-layout__switch, .plans-layout__lead, .plans-layout__plans, .plans-layout__extra, .plans-layout__more { display: flex; flex-direction: column; gap: var(--catalogue-list-special-gap); min-inline-size: 0; }
/* The link rows bring their own gap. */
.plans-layout__more { gap: 0; margin-block-start: calc(var(--catalogue-list-plans-to-links) - var(--catalogue-list-special-gap)); }
@media (min-width: 1100px) {
  .plans-layout {
    display: grid; column-gap: calc(var(--spacing-lg) * 2); row-gap: 0; align-items: start;
    grid-template-columns: minmax(0, 1fr) var(--web-aside); grid-template-rows: auto auto 1fr;
    grid-template-areas: "plans lead" "plans more" "plans ." "note note";
  }
  .plans-layout--switch { grid-template-rows: auto auto auto 1fr; grid-template-areas: "switch lead" "plans lead" "plans more" "plans ." "note note"; }
  .plans-layout--extra { grid-template-rows: auto auto auto 1fr; grid-template-areas: "plans lead" "plans extra" "plans more" "plans ." "note note"; }
  .plans-layout__extra { grid-area: extra; margin-block-start: var(--catalogue-list-special-gap); }
  .plans-layout__switch { grid-area: switch; margin-block-end: var(--spacing-md); }
  .plans-layout__lead { grid-area: lead; }
  .plans-layout__plans { grid-area: plans; }
  .plans-layout__more { grid-area: more; margin-block-start: var(--catalogue-list-special-gap); }
  .plans-layout > .sample-note { grid-area: note; }
}

/* CountriesRow.kt: a few flags, a label, how many countries, an arrow. With an
   icon where the flags are and no count it is the check row of the cruise and
   in-flight lists. The whole row is one control. */
.countries-row {
  display: flex; align-items: center; gap: var(--countries-row-flags-to-label);
  inline-size: 100%; min-block-size: var(--countries-row-height);
  padding-inline: var(--countries-row-flag-inset) var(--countries-row-arrow-trailing-inset);
  border: var(--countries-row-border-width) solid var(--countries-row-border-color); border-radius: var(--countries-row-radius);
  background: var(--countries-row-fill); text-align: start; cursor: pointer;
  transition: border-color var(--motion-selection-millis) var(--motion-easing);
}
.countries-row:hover { border-color: var(--palette-brand-outline); }
.countries-row:disabled, .countries-row[aria-disabled="true"] { cursor: default; pointer-events: none; }
/* Each flag is drawn over the one before it. */
.countries-row__flags { display: flex; flex: none; }
.countries-row__flags .flag { --flag-size: var(--countries-row-flag-size); --flag-ring: var(--countries-row-flag-ring-width); }
.countries-row__flags .flag + .flag { margin-inline-start: calc(var(--countries-row-flag-overlap) * -1); }
.countries-row__icon { color: var(--countries-row-icon-tint); --icon-size: var(--countries-row-icon-size); }
.countries-row__label { flex: 1 1 0; min-inline-size: 0; color: var(--countries-row-label-color); font: var(--countries-row-label-style) var(--font-family); }
.countries-row__count { color: var(--countries-row-count-color); font: var(--countries-row-count-style) var(--font-family); white-space: nowrap; }
.countries-row__arrow { color: var(--countries-row-arrow-tint); inline-size: var(--countries-row-arrow-width); block-size: var(--countries-row-arrow-height); }

/* GlobalPlanRow.kt: a plan as a row over its picture. Its size and how long it
   lasts at the reading side, its price over the price of one gigabyte at the
   far end, then a white disc. On the global list the disc is a control of its
   own, the plan's details, and the rest of the row opens the review of the
   plan; on the cruise and in-flight lists the whole row is one control. */
.global-plan-row {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: stretch; inline-size: 100%; min-block-size: var(--global-plan-row-height);
  border-radius: var(--global-plan-row-radius); background: linear-gradient(to bottom, var(--global-plan-row-plain-background));
  color: var(--global-plan-row-size-color); text-align: start;
  transition: box-shadow var(--motion-selection-millis) var(--motion-easing);
}
.global-plan-row:hover { box-shadow: 0 0 0 2px var(--palette-brand-outline); }
.global-plan-row__picture { position: absolute; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* The cruise and in-flight pictures are turned round on a left-to-right page, so that their pale end stays under the price. */
.global-plan-row__picture--mirrors { transform: scaleX(var(--mirror)); }
.global-plan-row__plan {
  flex: 1 1 0; min-inline-size: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm);
  padding-block: var(--spacing-sm); padding-inline-start: var(--global-plan-row-size-inset);
}
/* The size, then how long it lasts, on one baseline. Where there is no room the second goes under the first, whole. */
.global-plan-row__amount { min-inline-size: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-xxs) var(--global-plan-row-size-to-validity); }
.global-plan-row__size { font: var(--global-plan-row-size-style) var(--font-family); }
.global-plan-row__validity { color: var(--global-plan-row-validity-color); font: var(--global-plan-row-validity-style) var(--font-family); white-space: nowrap; }
.global-plan-row__cost { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-xxs); }
.global-plan-row__price { color: var(--global-plan-row-price-color); font: var(--global-plan-row-price-style) var(--font-family); }
.global-plan-row__per-gb { color: var(--global-plan-row-per-gb-color); font: var(--global-plan-row-per-gb-style) var(--font-family); }
/* The disc. Drawn 24 across; as a control it takes a finger's 44 around it. */
.global-plan-row__circle, .global-plan-row__details {
  flex: none; display: inline-flex; align-items: center; justify-content: center; align-self: center;
  inline-size: var(--global-plan-row-details-touch-target); block-size: var(--global-plan-row-details-touch-target);
  margin-inline: calc(var(--global-plan-row-price-to-circle) - (var(--global-plan-row-details-touch-target) - var(--global-plan-row-circle-size)) / 2) calc(var(--global-plan-row-circle-trailing-inset) - (var(--global-plan-row-details-touch-target) - var(--global-plan-row-circle-size)) / 2);
  border-radius: 50%; color: var(--global-plan-row-details-icon-tint);
}
.global-plan-row__circle::before, .global-plan-row__details::before {
  content: ""; position: absolute; z-index: -1; inline-size: var(--global-plan-row-circle-size); block-size: var(--global-plan-row-circle-size);
  border-radius: 50%; background: var(--global-plan-row-circle-fill);
}
.global-plan-row__details .icon { --icon-size: var(--global-plan-row-details-icon-size); }
.global-plan-row__details:hover::before { box-shadow: 0 0 0 2px var(--palette-brand-outline); }
/* The row with a badge: taller, on the brand colour, everything white. */
.global-plan-row--badged { min-block-size: var(--global-plan-row-badged-height); background: var(--palette-brand); color: var(--global-plan-row-badged-text-color); --web-focus-color: var(--palette-on-brand); }
/* The figures stand under the badge, and keep its room over them: on a phone too narrow for them in one line the row grows, and nothing is drawn under the badge. */
.global-plan-row--badged .global-plan-row__amount { align-self: flex-end; margin-block-end: var(--spacing-sm); padding-block-start: calc(var(--global-plan-row-badge-top) + var(--global-plan-row-badge-height) - var(--spacing-sm) + var(--spacing-xxs)); }
.global-plan-row--badged .global-plan-row__validity, .global-plan-row--badged .global-plan-row__price, .global-plan-row--badged .global-plan-row__per-gb { color: inherit; }
.global-plan-row__badge { position: absolute; inset-block-start: var(--global-plan-row-badge-top); inset-inline-start: var(--global-plan-row-badge-inset); }
/* While the plans are read. */
.placeholder--global-plan-row { block-size: var(--global-plan-row-height); border-radius: var(--global-plan-row-radius); background: var(--global-plan-row-placeholder-fill); }
.placeholder--family-plan-row { block-size: var(--family-plan-row-height); border-radius: var(--family-plan-row-radius); background: var(--family-plan-row-placeholder-fill); }
.placeholder--countries-row { block-size: var(--catalogue-list-row-placeholder-height); border-radius: var(--catalogue-list-row-placeholder-radius); }

/* UnlimitedCard.kt: the plan with no cap, and the lengths it comes in as the
   slots of a track. The card outside its track is one control, the details of
   the plan with the selected days; each slot is a control of its own. */
.unlimited-card {
  --web-focus-color: var(--palette-on-brand);
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; inline-size: 100%; min-block-size: var(--unlimited-card-height);
  border-radius: var(--unlimited-card-radius); background: var(--palette-navy-deep); color: var(--unlimited-card-title-color);
}
.unlimited-card__picture { position: absolute; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%; object-fit: cover; transform: scaleX(var(--mirror)); }
/* The apps draw the title and the caption small enough to stay clear of the picture's light. Here they keep their size, and the reading side is darkened under them. */
.unlimited-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to var(--inline-end), var(--palette-navy-deep) 12%, transparent 62%); opacity: 0.8; pointer-events: none; }
.unlimited-card__plan {
  flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; row-gap: var(--spacing-xs);
  grid-template-areas: "title price" "caption price";
  padding: var(--unlimited-card-title-top) var(--unlimited-card-price-trailing-inset) 0 var(--unlimited-card-title-icon-inset); text-align: start;
}
.unlimited-card__title { grid-area: title; display: flex; align-items: center; gap: var(--unlimited-card-title-icon-to-title); font: var(--unlimited-card-title-style) var(--font-family); }
.unlimited-card__title .icon { --icon-size: var(--unlimited-card-title-icon-size); color: var(--unlimited-card-title-icon-tint); }
.unlimited-card__caption { grid-area: caption; padding-inline-start: calc(var(--unlimited-card-caption-inset) - var(--unlimited-card-title-icon-inset)); color: var(--unlimited-card-caption-color); font: var(--unlimited-card-caption-style) var(--font-family); }
.unlimited-card__price { grid-area: price; padding-block-start: calc(var(--unlimited-card-price-top) - var(--unlimited-card-title-top)); color: var(--unlimited-card-price-color); font: var(--unlimited-card-price-style) var(--font-family); }
/* The track is drawn 32 tall, and each slot takes a finger's 44 over it. */
.unlimited-card__track { position: relative; display: flex; margin: 0 var(--unlimited-card-track-side-inset) calc(var(--spacing-xs)); }
.unlimited-card__track::before {
  content: ""; position: absolute; inset-inline: 0; inset-block: calc((var(--unlimited-card-slot-touch-target) - var(--unlimited-card-track-height)) / 2); z-index: -1;
  border-radius: var(--unlimited-card-track-radius); background: var(--unlimited-card-track-fill); box-shadow: inset 0 0 0 1px var(--palette-on-brand-faint);
}
.unlimited-card__day {
  position: relative; flex: 1 1 0; min-inline-size: 0; display: inline-flex; align-items: center; justify-content: center;
  block-size: var(--unlimited-card-slot-touch-target); color: var(--unlimited-card-day-color); font: var(--unlimited-card-day-style) var(--font-family); cursor: pointer;
  transition: color var(--motion-selection-millis) var(--motion-easing);
}
.unlimited-card__day:hover { color: var(--unlimited-card-selected-day-color); }
.unlimited-card__day[aria-checked="true"], .unlimited-card__day.is-selected { color: var(--unlimited-card-selected-day-color); font: var(--unlimited-card-selected-day-style) var(--font-family); }
.unlimited-card__day[aria-checked="true"]::before, .unlimited-card__day.is-selected::before {
  content: ""; position: absolute; z-index: -1;
  inset-inline: var(--unlimited-card-selected-inset-x); inset-block: calc((var(--unlimited-card-slot-touch-target) - var(--unlimited-card-track-height)) / 2 + var(--unlimited-card-selected-inset-y));
  border-radius: var(--unlimited-card-selected-radius); background: var(--unlimited-card-selected-fill);
}

/* NoteCard (SpecialList.kt): a card that opens. Its top line is the control. */
.note-card { padding-inline: var(--note-card-padding); border-radius: var(--note-card-radius); background: var(--note-card-fill); }
.note-card__top { display: flex; align-items: center; gap: var(--note-card-icon-to-label); inline-size: 100%; min-block-size: var(--note-card-closed-height); text-align: start; cursor: pointer; border-radius: var(--radius-chip); }
.note-card__icon { color: var(--note-card-icon-tint); --icon-size: var(--note-card-icon-size); }
.note-card__label { flex: 1 1 0; min-inline-size: 0; color: var(--note-card-label-color); font: var(--note-card-label-style) var(--font-family); }
.note-card__caret { color: var(--note-card-caret-tint); inline-size: var(--note-card-caret-width); block-size: var(--note-card-caret-height); transition: transform var(--note-card-change-millis) var(--motion-easing); }
.note-card__top[aria-expanded="true"] .note-card__caret { transform: rotate(180deg); }
.note-card__body { padding-block-end: var(--note-card-padding); }
.note-card__title { color: var(--note-card-title-color); font: var(--note-card-title-style) var(--font-family); }
.note-card__bullets { display: flex; flex-direction: column; gap: var(--note-card-bullet-gap); margin-block-start: var(--note-card-title-to-bullets); }
.note-card__bullet { display: flex; align-items: flex-start; gap: var(--note-card-bullet-icon-to-text); color: var(--note-card-bullet-text-color); font: var(--note-card-bullet-text-style) var(--font-family); }
.note-card__bullet .icon { color: var(--note-card-bullet-icon-tint); --icon-size: var(--note-card-bullet-icon-size); }
.note-card__lead { color: var(--note-card-bullet-lead-color); font: var(--note-card-bullet-lead-style) var(--font-family); }

/* FamilyPlanRow (SpecialList.kt): a shared plan. Its size over two facts, how
   long it lasts and how many eSIMs share it; its price and a disc at the far
   end. The whole row is one control. */
.family-plan-row {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; grid-template-areas: "size price circle" "facts price circle";
  inline-size: 100%; min-block-size: var(--family-plan-row-height); padding-inline: var(--family-plan-row-leading-inset) var(--family-plan-row-circle-trailing-inset);
  border-radius: var(--family-plan-row-radius); background: linear-gradient(to bottom, var(--global-plan-row-plain-background)); text-align: start;
  transition: box-shadow var(--motion-selection-millis) var(--motion-easing);
}
.family-plan-row:hover { box-shadow: 0 0 0 2px var(--palette-brand-outline); }
.family-plan-row__picture { position: absolute; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%; object-fit: cover; transform: scaleX(var(--mirror)); }
.family-plan-row__size { grid-area: size; align-self: end; color: var(--family-plan-row-size-color); font: var(--family-plan-row-size-style) var(--font-family); }
.family-plan-row__facts { grid-area: facts; align-self: start; display: flex; flex-wrap: wrap; gap: var(--spacing-xxs) var(--family-plan-row-fact-gap); margin-block-start: var(--spacing-sm); color: var(--family-plan-row-fact-color); font: var(--family-plan-row-fact-style) var(--font-family); }
.family-plan-row__fact { display: inline-flex; align-items: center; gap: var(--family-plan-row-fact-icon-to-text); }
.family-plan-row__fact .icon { color: var(--family-plan-row-fact-icon-tint); --icon-size: var(--family-plan-row-calendar-height); }
.family-plan-row__price { grid-area: price; color: var(--family-plan-row-price-color); font: var(--family-plan-row-price-style) var(--font-family); }
.family-plan-row__circle { grid-area: circle; inline-size: var(--family-plan-row-circle-size); block-size: var(--family-plan-row-circle-size); margin-inline-start: var(--family-plan-row-price-to-circle); border-radius: 50%; background: var(--family-plan-row-circle-fill); }

/* The line that explains the star on an estimated validity. */
.estimate-note { color: var(--catalogue-list-note-color); font: var(--catalogue-list-note-style) var(--font-family); }
/* SampleNote (SpecialList.kt): that what a list shows is sample content. */
.sample-note { margin-block-start: var(--sample-note-top-gap); color: var(--sample-note-color); font: var(--sample-note-style) var(--font-family); text-align: center; }

/* ==========================================================================
   3. The tours list
   ========================================================================== */

/* The subtitle and, at the far end of the same line, the header's pill. */
.picture-header__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--tours-pill-to-text); margin-block-start: var(--catalogue-list-title-to-subtitle); }
.picture-header__row .picture-header__subtitle { flex: 1 1 0; min-inline-size: 0; margin-block-start: 0; padding-block-end: calc((var(--hero-pill-min-touch-target) - var(--hero-pill-height)) / 2); }

/* HeroPill.kt: a small pill laid over a header's picture, which is a control:
   "Plan your tour". It is drawn 30 tall and takes a finger's 44: the drawing
   is its inner shape. From a tablet up it is a white button under the subtitle. */
.hero-pill { flex: none; display: inline-flex; align-items: center; min-block-size: var(--hero-pill-min-touch-target); border-radius: var(--hero-pill-radius); cursor: pointer; }
.hero-pill > span {
  display: inline-flex; align-items: center; gap: var(--hero-pill-icon-to-label); block-size: var(--hero-pill-height); padding-inline: var(--hero-pill-padding);
  border-radius: var(--hero-pill-radius); background: linear-gradient(to var(--inline-end), var(--hero-pill-fill)); color: var(--hero-pill-content-color);
  font: var(--hero-pill-label-style) var(--font-family); white-space: nowrap;
  transition: background-color var(--motion-selection-millis) var(--motion-easing);
}
.hero-pill .icon { --icon-size: var(--hero-pill-icon-size); }

/* The collections of the tours list: the compact segmented control, under the
   picture on a phone. Each segment is as wide as its word asks, and the five share the row. */
.picture-header__collections { --web-focus-color: var(--palette-brand); margin-block-start: var(--tours-header-to-tabs); }
.picture-header__collections .segmented-control__segment { flex: 1 1 auto; padding-inline: var(--spacing-xs); }
/* A name is one line, and where the track is too narrow for them all (five on the narrowest phones) they are drawn smaller together, never into each other. */
.picture-header__collections { container-type: inline-size; }
.picture-header__collections .segmented-control__segment, .picture-header__collections .segmented-control__segment[aria-selected="true"] { white-space: nowrap; font-size: min(var(--typography-label-size), 4.2cqi); }

@media (min-width: 768px) {
  .picture-header__row { flex-direction: column; align-items: center; gap: var(--spacing-xl); margin-block-start: var(--spacing-md); }
  .picture-header__row .picture-header__subtitle { flex: none; padding-block-end: 0; }
  .hero-pill > span {
    gap: var(--spacing-xs); block-size: var(--search-field-on-page-height); padding-inline: var(--spacing-xl); border-radius: var(--radius-md);
    background: var(--palette-background); color: var(--palette-brand); font: var(--typography-body-strong) var(--font-family);
    box-shadow: 0 var(--spacing-lg) calc(var(--spacing-lg) * 2) color-mix(in srgb, var(--palette-brand-deep) 35%, transparent);
  }
  .hero-pill:hover > span { background: var(--palette-brand-wash); }
  .hero-pill .icon { --icon-size: 20px; }
  /* On the band: a pale track, and the selected collection in white. */
  .picture-header__collections {
    --web-focus-color: var(--palette-on-brand);
    order: 2; inline-size: 100%; max-inline-size: calc(var(--web-sheet-width) * 1.5); margin-block: var(--spacing-xxl) var(--spacing-lg);
    background: color-mix(in srgb, var(--palette-on-brand) 18%, transparent);
  }
  .picture-header__collections .segmented-control__segment { color: var(--palette-on-brand); }
  .picture-header__collections .segmented-control__segment:hover { color: var(--palette-on-brand); background: color-mix(in srgb, var(--palette-on-brand) 14%, transparent); }
  .picture-header__collections .segmented-control__segment[aria-selected="true"] { background: var(--palette-background); color: var(--palette-brand); }
}

/* What rises over the band's foot without a panel: the tour cards. Web only. */
.browse-rise { padding-block-start: var(--tours-tabs-to-cards); }
@media (min-width: 768px) {
  .browse-rise { position: relative; margin-block-start: calc(var(--browse-overlap) * -1); padding-block-start: 0; }
}

/* TourCard.kt: a tour as a card. Its picture under the brand colour, which is
   strongest behind the text; the flags of its countries, its name and a
   "from" price. The whole card is one control. */
.tour-card {
  --web-focus-color: var(--palette-brand);
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  inline-size: 100%; min-block-size: var(--tour-card-height); padding: var(--tour-card-inset);
  border-radius: var(--tour-card-radius); background: var(--tour-card-plain-fill); color: var(--tour-card-text-color); text-align: start;
  transition: transform var(--motion-selection-millis) var(--motion-easing);
}
.tour-card:hover { transform: translateY(calc(var(--spacing-xxs) * -1)); }
.tour-card__picture { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; }
.tour-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to var(--inline-start), var(--tour-card-fade)); }
/* Each flag starts a step after the one before it, and is drawn over it. */
.tour-card__flags { display: flex; }
.tour-card__flags .flag { --flag-size: var(--tour-card-flag-size); --flag-ring: var(--tour-card-flag-ring-width); }
.tour-card__flags .flag + .flag { margin-inline-start: calc(var(--tour-card-flag-step) - var(--tour-card-flag-size)); }
.tour-card__name { max-inline-size: 100%; margin-block-start: var(--spacing-sm); font: var(--tour-card-name-style) var(--font-family); }
.tour-card__price { margin-block-start: var(--spacing-sm); font: var(--tour-card-price-style) var(--font-family); }
.placeholder--tour-card { block-size: var(--tour-card-height); border-radius: var(--tour-card-radius); background: var(--tours-placeholder-fill); }
@media (min-width: 768px) {
  /* On the pale ground a card is taller, and casts a shadow. */
  .tour-card, .placeholder--tour-card { aspect-ratio: 8 / 5; block-size: auto; box-shadow: var(--browse-card-shadow); }
}

/* ==========================================================================
   4. "Plan your tour"
   ========================================================================== */

/* PlannerCard (TourPlannerScreen.kt): a pale card with a header, an icon and a title, over what is chosen in it. */
.planner-card { container-type: inline-size; padding: var(--tour-planner-card-padding); border-radius: var(--tour-planner-card-radius); background: var(--tour-planner-card-fill); }
.planner-card + .planner-card { margin-block-start: var(--tour-planner-card-gap); }
.planner-card__header { display: flex; align-items: center; gap: var(--tour-planner-card-icon-to-title); }
.planner-card__icon { color: var(--tour-planner-card-icon-tint); --icon-size: var(--tour-planner-card-icon-size); }
.planner-card__title { color: var(--tour-planner-card-title-color); font: var(--tour-planner-card-title-style) var(--font-family); }
/* The chosen countries, then the chip that adds one. The apps slide the row sideways; a page lets it run onto a second line. */
.planner-card__chips { display: flex; flex-wrap: wrap; gap: var(--spacing-sm) var(--tour-planner-chip-gap); margin-block-start: var(--tour-planner-header-to-chips); }
/* The durations: as many to a row as the state says (--of-N), on a phone and on a desktop alike, and a last row with
   fewer shares the width, as in the apps: four are two and two, never three and one. With no word from the state
   (the empty shapes) it is the most the apps put in a row. */
.planner-card__tiles { --_across: var(--tour-planner-tile-max-columns); display: flex; flex-wrap: wrap; gap: var(--tour-planner-tile-row-gap) var(--tour-planner-tile-column-gap); margin-block-start: var(--tour-planner-header-to-tiles); }
.planner-card__tiles > * { flex: 1 1 calc((100% - (var(--_across) - 1) * var(--tour-planner-tile-column-gap)) / var(--_across) - 1px); min-inline-size: 0; }
.planner-card__tiles--of-1 { --_across: 1; }
.planner-card__tiles--of-2 { --_across: 2; }
.planner-card__tiles--of-3 { --_across: 3; }
.planner-card__status { padding: var(--tour-planner-card-status-padding); }
.planner-card__status .status-message { padding-block: 0; }
.placeholder--day-option { block-size: var(--day-option-height); border-radius: var(--day-option-radius); background: var(--tour-planner-placeholder-fill); }
.placeholder--tour-unlimited { block-size: var(--tour-planner-unlimited-top-height); margin-block-start: var(--tour-planner-tiles-to-unlimited); border-radius: var(--tour-planner-unlimited-radius); background: var(--tour-planner-placeholder-fill); }

/* The badge of a day option: "Most requested", on one tile at most. A part DayOptions.kt has and the kit does not draw. */
.day-option__badge {
  position: absolute; inset-block-start: var(--day-option-badge-top); inset-inline-start: var(--day-option-badge-inset);
  display: inline-flex; align-items: center; gap: var(--day-option-badge-image-to-label); block-size: var(--day-option-badge-height); padding-inline: var(--day-option-badge-padding);
  border-radius: var(--day-option-badge-radius); background: var(--day-option-badge-fill); color: var(--day-option-badge-label-color);
  font: var(--day-option-badge-label-style) var(--font-family); white-space: nowrap;
}
.day-option__badge img { flex: none; inline-size: var(--day-option-badge-image-width); block-size: var(--day-option-badge-image-height); }
/* The badge never reaches the tile's circle, by the apps' own rule (DayOptionTokens): in a tile too narrow for it the
   words are drawn smaller, down to the smallest share of their size, and in one too narrow for that the pill holds
   the flame alone (a screen reader is told either way: the words are in the tile's own label). The words' room is the
   tile's, less the badge's own parts and the circle's; a letter is about half its size wide, and the longest label
   the apps allow is counted. */
.planner-card__tiles .day-option { container-type: inline-size; }
.planner-card__tiles .day-option__badge {
  max-inline-size: calc(100% - var(--day-option-badge-inset) - var(--day-option-badge-to-mark) - var(--day-option-mark-size) - var(--day-option-mark-trailing-inset)); overflow: hidden;
  font-size: clamp(
    calc(var(--typography-micro-strong-size) * var(--day-option-badge-label-min-scale)),
    calc((100cqi + 2 * var(--spacing-sm) - var(--day-option-badge-inset) - var(--day-option-badge-to-mark) - var(--day-option-mark-size) - var(--day-option-mark-trailing-inset) - 2 * var(--day-option-badge-padding) - var(--day-option-badge-image-width) - var(--day-option-badge-image-to-label)) / (var(--day-option-badge-label-max-letters) * 0.52)),
    var(--typography-micro-strong-size));
}
/* 97px is the tile, inside its padding, in which the longest label at its smallest just fits: a condition cannot read a token. */
@container (max-width: 97px) {
  .planner-card__tiles .day-option__badge { gap: 0; font-size: 0; }
}

/* TourDestinationChip (TourPlannerParts.kt): a country of the trip, a flag over
   a name. Not a control: its badge is, and takes the country away. The apps draw
   a long name smaller; here the chip grows with its name, up to twice its width. */
.tour-destination-chip {
  position: relative; display: flex; flex-direction: column; align-items: center;
  min-inline-size: var(--tour-planner-chip-width); max-inline-size: calc(var(--tour-planner-chip-width) * 2); block-size: var(--tour-planner-chip-height); padding-block-start: var(--tour-planner-chip-flag-top);
  border-radius: var(--tour-planner-chip-radius); background: var(--tour-planner-chip-fill);
}
.tour-destination-chip .flag { --flag-size: var(--tour-planner-chip-flag-size); --flag-ring: 0px; }
.tour-destination-chip__name {
  max-inline-size: 100%; margin-block-start: calc(var(--tour-planner-chip-name-top) - var(--tour-planner-chip-flag-top) - var(--tour-planner-chip-flag-size));
  padding-inline: var(--spacing-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--tour-planner-chip-name-color); font: var(--tour-planner-chip-name-style) var(--font-family); line-height: 1.5; text-align: center;
}
/* The badge sits on the chip's far corner, a little outside it. Drawn 14 across; it takes a finger's 44 around it. */
.tour-destination-chip__remove {
  position: absolute; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  inline-size: var(--tour-planner-remove-touch-target); block-size: var(--tour-planner-remove-touch-target);
  inset-block-start: calc((var(--tour-planner-remove-size) - var(--tour-planner-remove-touch-target)) / 2 - var(--tour-planner-remove-outset));
  inset-inline-end: calc((var(--tour-planner-remove-size) - var(--tour-planner-remove-touch-target)) / 2 - var(--tour-planner-remove-outset));
  border-radius: 50%; color: var(--tour-planner-remove-tint); cursor: pointer;
}
.tour-destination-chip__remove .icon { --icon-size: var(--tour-planner-remove-size); }
.tour-destination-chip__remove:hover { color: var(--palette-error); }
/* TourAddChip: the chip that adds a destination, always the last of the row. */
.tour-add-chip {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--tour-planner-chip-name-top) - var(--tour-planner-chip-flag-top) - var(--tour-planner-add-icon-size));
  inline-size: var(--tour-planner-chip-width); block-size: var(--tour-planner-chip-height); padding-block-start: var(--tour-planner-chip-flag-top);
  border-radius: var(--tour-planner-chip-radius); background: var(--tour-planner-add-fill); color: var(--tour-planner-add-content-color);
  font: var(--tour-planner-chip-name-style) var(--font-family); line-height: 1.5; cursor: pointer;
  transition: background-color var(--motion-selection-millis) var(--motion-easing);
}
.tour-add-chip:hover { background: var(--palette-brand-shade); }
.tour-add-chip .icon { --icon-size: var(--tour-planner-add-icon-size); }

/* TourUnlimitedTile: the "Unlimited" tile of the duration card. Its top is one
   control; chosen, it opens on its days, each a control of its own. */
.tour-unlimited-tile { margin-block-start: var(--tour-planner-tiles-to-unlimited); border-radius: var(--tour-planner-unlimited-radius); background: var(--tour-planner-unlimited-fill); transition: box-shadow var(--tour-planner-select-millis) var(--motion-easing); }
.tour-unlimited-tile:has(.tour-unlimited-tile__top[aria-pressed="true"]) { box-shadow: 0 0 0 2px var(--palette-brand); }
.tour-unlimited-tile__top {
  position: relative; display: flex; align-items: center; justify-content: center; inline-size: 100%; min-block-size: var(--tour-planner-unlimited-top-height);
  border-radius: var(--tour-planner-unlimited-radius); color: var(--tour-planner-unlimited-title-color); font: var(--tour-planner-unlimited-title-style) var(--font-family); cursor: pointer;
}
.tour-unlimited-tile__top::after { content: ""; position: absolute; inset-block-start: var(--day-option-mark-top); inset-inline-end: var(--day-option-mark-trailing-inset); inline-size: var(--day-option-mark-size); block-size: var(--day-option-mark-size); border-radius: 50%; background: var(--day-option-mark-fill) center / contain no-repeat; }
.tour-unlimited-tile__top[aria-pressed="true"]::after { background-image: url("../assets/pictures/check_circle.svg"); }
.tour-unlimited-tile__days { display: grid; grid-template-columns: repeat(var(--tour-planner-day-chips-per-row), minmax(0, 1fr)); gap: var(--tour-planner-day-chip-row-gap) var(--tour-planner-day-chip-gap); padding: 0 var(--tour-planner-day-chips-inset) var(--tour-planner-day-chips-inset); }
.tour-day-chip {
  display: inline-flex; align-items: center; justify-content: center; block-size: var(--tour-planner-day-chip-height);
  border-radius: var(--tour-planner-day-chip-radius); background: var(--tour-planner-day-chip-fill); color: var(--tour-planner-day-chip-color);
  font: var(--tour-planner-day-chip-style) var(--font-family); cursor: pointer;
  transition: color var(--tour-planner-select-millis) var(--motion-easing), box-shadow var(--tour-planner-select-millis) var(--motion-easing);
}
.tour-day-chip:hover { color: var(--tour-planner-day-chip-selected-color); }
.tour-day-chip[aria-checked="true"] { color: var(--tour-planner-day-chip-selected-color); font: var(--tour-planner-day-chip-selected-style) var(--font-family); box-shadow: inset 0 0 0 var(--tour-planner-day-chip-selected-border-width) var(--tour-planner-day-chip-selected-border-color); }

/* What stands between the cards and the button. */
.planner-foot { display: flex; flex-direction: column; }
.planner-foot__button { margin-block-start: var(--tour-planner-foot-to-button); }
.planner-foot__help { margin-block-start: calc(var(--tour-planner-button-to-help) - (var(--tour-planner-help-touch-target) - var(--typography-body-strong-line)) / 2); color: var(--tour-planner-help-color); }
.planner-foot__status { padding: var(--tour-planner-foot-status-padding); border-radius: var(--tour-planner-card-radius); background: var(--tour-planner-card-fill); }
.planner-foot__status .status-message { padding-block: 0; }
/* Banner (TourPlannerScreen.kt): before the search, a picture with two lines of text on it. Not a control. */
.tour-planner-banner {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: var(--tour-planner-banner-title-to-body);
  min-block-size: var(--tour-planner-banner-height); padding: var(--tour-planner-banner-text-bottom) var(--tour-planner-banner-text-inset);
  border-radius: var(--tour-planner-banner-radius); background: var(--palette-brand); color: var(--tour-planner-banner-text-color);
}
.tour-planner-banner__picture { position: absolute; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--art-strong-side) center; }
/* A picture drawn for a right-to-left page, turned round on a left-to-right one so that its fade stays under the text. */
.tour-planner-banner__picture--mirrors { transform: scaleX(var(--mirror)); }
.tour-planner-banner__title { font: var(--tour-planner-banner-title-style) var(--font-family); }
.tour-planner-banner__body { max-inline-size: var(--tour-planner-banner-body-width); font: var(--tour-planner-banner-body-style) var(--font-family); line-height: var(--typography-label-tall-line); }
/* TourResultCard.kt: what the planner found. The kit's review card in its brand look, with the trip's flags where that one has a flag and a name. */
.tour-result-card__flags { flex: 1 1 0; min-inline-size: 0; display: flex; }
.tour-result-card__flags .flag { --flag-size: var(--tour-result-card-flag-size); --flag-ring: var(--tour-result-card-flag-ring-width); }
.tour-result-card__flags .flag + .flag { margin-inline-start: calc(var(--tour-result-card-flag-step) - var(--tour-result-card-flag-size)); }
/* A figure of the result is one line and never runs into the next ("Unlimited" is wider than a third of a phone's
   card): a long one takes room from the other two, the card's own gap apart, and where the card is too narrow for
   the three, all are drawn smaller together. The apps fit each figure to its third. */
.planner-foot .plan-review-card__figures { container-type: inline-size; grid-auto-columns: minmax(min-content, 1fr); column-gap: var(--tour-result-card-column-gap); }
.planner-foot .plan-review-card__value { white-space: nowrap; font-size: clamp(calc(var(--typography-title-large-size) * var(--tour-result-card-value-min-scale)), 7.5cqi, var(--typography-title-large-size)); }

/* ==========================================================================
   5. The sheets that list: the countries a package covers, the cruises
   ========================================================================== */

/* The frame the two sheets share (DevicesSheet.kt's): a title and a way to
   close it, a search that stays put, and what scrolls under them. A sheet on
   a phone; from a tablet up a dialog in the middle of the window, wider. */
.sheet--list { display: flex; flex-direction: column; block-size: calc(100vh * var(--devices-sheet-height-fraction)); overflow: hidden; }
.sheet--list .sheet__title { font: var(--devices-sheet-title-style) var(--font-family); }
.sheet--list .sheet__close { inset-block-start: calc(var(--devices-sheet-close-top) - (var(--devices-sheet-close-touch-target) - var(--devices-sheet-close-size)) / 2); inset-inline-end: calc(var(--devices-sheet-close-inset) - (var(--devices-sheet-close-touch-target) - var(--devices-sheet-close-size)) / 2); color: var(--devices-sheet-close-tint); }
.sheet__head { flex: none; padding: var(--devices-sheet-title-top) var(--devices-sheet-search-side-inset) 0; }
.sheet__head .search-field { margin-block-start: var(--spacing-lg); }
/* DevicesSheetUi.disclaimer and .updated: that the phones listed appear to support eSIM, and when the list was
   published. Two quiet lines between the title and the field; they stay put while the list scrolls. */
.sheet__notice { display: flex; flex-direction: column; gap: var(--devices-sheet-notice-gap); margin-block-start: var(--devices-sheet-notice-to-search); color: var(--devices-sheet-notice-color); font: var(--devices-sheet-notice-style) var(--font-family); line-height: var(--typography-caption-loose-line); text-align: center; }
.sheet__head .sheet__notice + .search-field { margin-block-start: var(--devices-sheet-notice-to-search); }
/* A placeholder longer than a phone's field ends in an ellipsis, not at the field's edge. */
.sheet__head .search-field__input { text-overflow: ellipsis; }
.sheet__scroll { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; padding: var(--covered-countries-sheet-search-to-tiles) var(--devices-sheet-list-inset) var(--covered-countries-sheet-tiles-bottom); }
.sheet__foot { flex: none; padding: var(--cruise-check-sheet-sample-note-top) var(--devices-sheet-list-inset) var(--cruise-check-sheet-sample-note-bottom); color: var(--sample-note-color); font: var(--sample-note-style) var(--font-family); text-align: center; }
@media (min-width: 768px) {
  .sheet--wide { max-inline-size: calc(var(--web-sheet-width) * 1.75); }
  .sheet--roomy { max-inline-size: calc(var(--web-sheet-width) * 1.35); }
}

/* CoveredCountriesSheet.kt: the countries as tiles, a flag over a name. A tile is not a control. */
.covered-countries { display: grid; grid-template-columns: repeat(var(--covered-countries-sheet-columns), minmax(0, 1fr)); gap: var(--covered-countries-sheet-gap); }
.covered-country {
  display: flex; flex-direction: column; align-items: center; min-block-size: var(--covered-countries-sheet-tile-height);
  padding: var(--covered-countries-sheet-flag-top) var(--covered-countries-sheet-name-padding) var(--covered-countries-sheet-name-bottom);
  border-radius: var(--covered-countries-sheet-tile-radius); background: var(--covered-countries-sheet-tile-fill); text-align: center;
}
.covered-country .flag { --flag-size: var(--covered-countries-sheet-flag-size); --flag-ring: 0px; }
/* A name takes the lines it needs and is never cut: its tile grows, and its row with it. The apps draw a long name smaller to keep it to two lines, which a style sheet cannot measure. */
.covered-country__name { margin-block-start: calc(var(--covered-countries-sheet-flag-to-name) - 2px); color: var(--covered-countries-sheet-name-color); font: var(--covered-countries-sheet-name-style) var(--font-family); overflow-wrap: anywhere; }
.covered-countries__no-match { padding-block-start: calc(var(--covered-countries-sheet-search-to-no-match) - var(--covered-countries-sheet-search-to-tiles)); color: var(--covered-countries-sheet-no-match-color); font: var(--covered-countries-sheet-no-match-style) var(--font-family); text-align: center; }
@media (min-width: 768px) {
  .covered-countries { grid-template-columns: repeat(auto-fill, minmax(calc(var(--covered-countries-sheet-tile-height) + var(--spacing-sm)), 1fr)); }
}

/* CruiseCheckSheet.kt: the cruise lines, each a row that opens on its ships when it lists any. */
.cruise-lines { margin-block-start: calc(var(--cruise-check-sheet-search-to-list) - var(--covered-countries-sheet-search-to-tiles)); }
.cruise-line { border-block-end: var(--cruise-check-sheet-separator-height) solid var(--cruise-check-sheet-separator-color); }
.cruise-line__header {
  display: flex; align-items: center; gap: var(--cruise-check-sheet-name-to-caret); inline-size: 100%; min-block-size: var(--cruise-check-sheet-line-header-height);
  padding-inline-end: calc(var(--cruise-check-sheet-caret-trailing-inset) - var(--cruise-check-sheet-list-inset)); text-align: start; border-radius: var(--radius-chip);
}
button.cruise-line__header { cursor: pointer; }
/* A cruise line's name is Latin text: it reads left to right in every language, and stands at the reading side of the row. */
.cruise-line__name { flex: 0 1 auto; min-inline-size: 0; margin-inline-end: auto; unicode-bidi: plaintext; color: var(--cruise-check-sheet-name-color); font: var(--cruise-check-sheet-name-style) var(--font-family); }
.cruise-line__caret { color: var(--cruise-check-sheet-caret-tint); inline-size: var(--cruise-check-sheet-caret-width); block-size: var(--cruise-check-sheet-caret-height); transition: transform var(--motion-selection-millis) var(--motion-easing); }
/* As the apps draw it: the caret points down on an open line, and is turned half round on a closed one. */
.cruise-line__header[aria-expanded="false"] .cruise-line__caret { transform: rotate(180deg); }
.cruise-line__ships { display: flex; flex-wrap: wrap; gap: var(--cruise-check-sheet-chip-row-gap) var(--cruise-check-sheet-chip-gap); padding-block: var(--cruise-check-sheet-header-to-chips) var(--cruise-check-sheet-open-bottom); }
/* A ship: a chip that hugs its name. Not a control. */
.ship-chip { display: inline-flex; align-items: center; block-size: var(--cruise-check-sheet-chip-height); padding-inline: var(--cruise-check-sheet-chip-padding); border-radius: var(--cruise-check-sheet-chip-radius); background: var(--cruise-check-sheet-chip-fill); color: var(--cruise-check-sheet-chip-label-color); font: var(--cruise-check-sheet-chip-label-style) var(--font-family); direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
/* While the lines are read. */
.cruise-lines--loading { display: flex; flex-direction: column; gap: var(--cruise-check-sheet-placeholder-gap); padding-block-start: calc(var(--cruise-check-sheet-search-to-placeholders) - var(--covered-countries-sheet-search-to-tiles)); }
.placeholder--cruise-line { block-size: var(--cruise-check-sheet-placeholder-height); border-radius: var(--cruise-check-sheet-placeholder-radius); background: var(--cruise-check-sheet-placeholder-fill); }

/* The rows of the sheet that adds a destination (the plan builder's DestinationSheet): a flag, a name. Each is a control. */
.destination-row { display: flex; align-items: center; gap: var(--destination-sheet-flag-to-name); inline-size: 100%; min-block-size: var(--destination-sheet-row-height); border-block-end: var(--destination-sheet-separator-height) solid var(--destination-sheet-separator-color); color: var(--destination-sheet-name-color); font: var(--destination-sheet-name-style) var(--font-family); text-align: start; cursor: pointer; }
.destination-row:hover { color: var(--palette-brand); }
.destination-row .flag { --flag-size: var(--destination-sheet-flag-size); --flag-ring: 0px; }

/* ==========================================================================
   6. "Check the airline", and its two answers
   ========================================================================== */

/* AirlineMark.kt: a round-cornered square in the airline's colour holding its
   code. It stands where a logo would, and is drawn in code. Not a control. */
.airline-mark {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  inline-size: var(--airline-mark-large-size); block-size: var(--airline-mark-large-size); border-radius: var(--airline-mark-large-radius);
  background: var(--airline-mark-brand); color: var(--airline-mark-code-color); font: var(--airline-mark-large-code-style) var(--font-family);
  direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums;
}
.airline-mark--medium { inline-size: var(--airline-mark-medium-size); block-size: var(--airline-mark-medium-size); border-radius: var(--airline-mark-medium-radius); font: var(--airline-mark-medium-code-style) var(--font-family); }
.airline-mark--small { inline-size: var(--airline-mark-small-size); block-size: var(--airline-mark-small-size); border-radius: var(--airline-mark-small-radius); font: var(--airline-mark-small-code-style) var(--font-family); }
.airline-mark--navy { background: var(--airline-mark-navy); }
.airline-mark--positive { background: var(--airline-mark-positive); }
.airline-mark--coffee { background: var(--airline-mark-coffee); }
.airline-mark--danger { background: var(--airline-mark-danger); }
.airline-mark--warning { background: var(--airline-mark-warning); }
.airline-mark--sky { background: var(--airline-mark-sky); }
.airline-mark--landmark { background: var(--airline-mark-landmark); }

/* The page of the check. A phone: top to bottom, as the apps draw it. A
   desktop: the banner across, the form in the wide column with its button,
   and the popular airlines beside it. Web only. */
.flight-check { display: flex; flex-direction: column; }
.flight-check__banner { margin-block-start: calc(var(--flight-check-header-to-banner) - var(--screen-header-title-top)); }
.flight-check__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--flight-check-field-to-label); margin-block-start: var(--flight-check-banner-to-label); }
.flight-check__notes { margin-block-start: var(--flight-check-field-to-note); }
.flight-check__popular { margin-block-start: var(--flight-check-to-heading); }
.flight-check__action { margin-block-start: var(--flight-check-tiles-to-button); }
@media (min-width: 768px) {
  .flight-check__form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--web-grid-gap); }
}
@media (min-width: 1100px) {
  .flight-check { display: grid; grid-template-columns: minmax(0, 1fr) var(--web-aside); column-gap: calc(var(--spacing-lg) * 2); align-items: start; grid-template-areas: "banner banner" "form popular" "notes popular" "action popular"; grid-template-rows: auto auto auto 1fr; }
  .flight-check__banner { grid-area: banner; margin-block-start: 0; }
  .flight-check__form { grid-area: form; margin-block-start: var(--spacing-xl); }
  .flight-check__notes { grid-area: notes; }
  .flight-check__popular { grid-area: popular; margin-block-start: var(--spacing-xl); }
  .flight-check__action { grid-area: action; }
}

/* FlightBanner (FlightCheckParts.kt): a picture with two pieces of text on it. Not a control. */
.flight-banner {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: var(--flight-check-banner-title-to-body);
  min-block-size: var(--flight-check-banner-height); padding: var(--flight-check-banner-text-min-padding) var(--flight-check-banner-text-inset);
  border-radius: var(--flight-check-banner-radius); background: var(--palette-surface);
}
.flight-banner__picture { position: absolute; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--art-strong-side) center; }
/* A picture drawn for a right-to-left page, turned round on a left-to-right one so that the plane stays clear of the text. */
.flight-banner__picture--mirrors { transform: scaleX(var(--mirror)); }
/* On a phone the text reaches over the plane: its side is veiled with the banner's own pale blue. */
.flight-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to var(--inline-end), var(--palette-surface) 45%, transparent 82%); opacity: 0.94; }
/* Two lines: the break is in the text. */
.flight-banner__title { color: var(--flight-check-banner-title-color); font: var(--flight-check-banner-title-style) var(--font-family); line-height: 1.3; white-space: pre-line; }
.flight-banner__body { max-inline-size: min(var(--flight-check-banner-body-width), 64%); color: var(--flight-check-banner-body-color); font: var(--flight-check-banner-body-style) var(--font-family); }
@media (min-width: 768px) {
  .flight-banner { min-block-size: calc(var(--flight-check-banner-height) + var(--spacing-xxl)); padding-inline: var(--spacing-xxl); }
  .flight-banner::after { content: none; }
  .flight-banner__title { font: var(--typography-title-large) var(--font-family); line-height: 1.3; }
  .flight-banner__body { max-inline-size: 44ch; font: var(--typography-body-loose) var(--font-family); }
}

/* FlightFieldLabel: the line over a field, an icon and the field's name. Not a control. */
.flight-field-label { display: flex; align-items: center; gap: var(--flight-check-label-icon-to-text); margin-block-end: var(--flight-check-label-to-field); color: var(--flight-check-label-color); font: var(--flight-check-label-style) var(--font-family); }
.flight-field-label .icon { color: var(--flight-check-label-icon-tint); --icon-size: var(--flight-check-label-icon-box); }

/* The fields of the check: 50 tall, a softer corner than the kit's form field. */
.flight-field {
  display: flex; align-items: center; gap: var(--spacing-sm); inline-size: 100%; min-block-size: var(--flight-check-field-height); padding-inline: var(--flight-check-field-text-inset);
  border-radius: var(--flight-check-field-radius); background: var(--flight-check-field-fill); color: var(--flight-check-field-text-color); text-align: start; cursor: text;
}
.flight-field:focus-within { outline: var(--web-focus-width) solid var(--web-focus-color); outline-offset: var(--web-focus-offset); }
.flight-field__input { flex: 1 1 0; min-inline-size: 0; align-self: stretch; min-block-size: var(--flight-check-field-height); color: inherit; caret-color: var(--flight-check-field-cursor-color); font: var(--flight-check-field-text-style) var(--font-family); text-align: start; appearance: none; -webkit-appearance: none; }
.flight-field__input::placeholder { color: var(--flight-check-field-placeholder-color); opacity: 1; }
.flight-field__input:focus-visible { outline: none; }
.flight-field__icon { color: var(--flight-check-date-icon-tint); inline-size: var(--flight-check-date-icon-width); block-size: var(--flight-check-date-icon-height); }
.flight-field--error { box-shadow: inset 0 0 0 2px var(--flight-check-error-color); }
.flight-field:has(:disabled), .flight-field:disabled { opacity: var(--button-disabled-opacity); cursor: not-allowed; }
/* The line under a field: what is wrong with it, or what is being looked up. */
.flight-field__error, .flight-field__note { margin-block-start: var(--flight-check-field-to-error); padding-inline-start: var(--flight-check-error-leading-inset); font: var(--flight-check-error-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.flight-field__error { color: var(--flight-check-error-color); }
.flight-field__note { color: var(--flight-check-lookup-note-color); }

/* AirlineField: the whole field is one control, which opens the list of airlines and closes it. */
.airline-picker { position: relative; }
.airline-field { cursor: pointer; padding-inline: var(--flight-check-airline-mark-inset) var(--flight-check-caret-trailing-inset); }
.airline-field__name { flex: 1 1 0; min-inline-size: 0; color: var(--flight-check-airline-name-color); font: var(--flight-check-airline-name-style) var(--font-family); }
/* With no airline chosen the field holds its placeholder, in the placeholder's colour. */
.airline-field--empty { padding-inline-start: var(--flight-check-field-text-inset); }
.airline-field--empty .airline-field__name { color: var(--flight-check-field-placeholder-color); font: var(--flight-check-field-text-style) var(--font-family); }
.airline-field__caret { color: var(--flight-check-caret-tint); inline-size: var(--flight-check-caret-width); block-size: var(--flight-check-caret-height); }

/* AirlineListPanel: the list of airlines, open under its field. A search that stays put over rows that scroll. */
.airline-list-panel {
  position: absolute; z-index: 5; inset-block-start: var(--flight-check-list-top); inset-inline: var(--flight-check-list-side-inset);
  display: flex; flex-direction: column; block-size: var(--flight-check-list-height);
  border: var(--flight-check-list-border-width) solid var(--flight-check-list-border-color); border-radius: var(--flight-check-list-radius);
  background: var(--flight-check-list-fill); box-shadow: var(--flight-check-list-shadow);
}
/* The search is drawn 40 tall and takes a finger's 44; its text is 16px, so that a phone does not zoom into it. */
.airline-list-panel__search {
  flex: none; display: flex; align-items: center; gap: var(--flight-check-list-search-icon-to-text); min-block-size: var(--flight-check-row-touch-height);
  margin: var(--flight-check-list-search-top) var(--flight-check-list-search-inset) 0; padding-inline: var(--flight-check-list-search-icon-inset);
  border-radius: var(--flight-check-list-search-radius); background: var(--flight-check-list-search-fill); color: var(--flight-check-list-search-text-color); cursor: text;
}
.airline-list-panel__search:focus-within { outline: var(--web-focus-width) solid var(--web-focus-color); outline-offset: var(--web-focus-offset); }
.airline-list-panel__search .icon { color: var(--flight-check-list-search-icon-tint); --icon-size: var(--search-field-icon-size); }
.airline-list-panel__input { flex: 1 1 0; min-inline-size: 0; align-self: stretch; min-block-size: var(--flight-check-row-touch-height); color: inherit; font: var(--typography-body) var(--font-family); appearance: none; -webkit-appearance: none; }
.airline-list-panel__input::placeholder { color: var(--flight-check-list-search-placeholder-color); opacity: 1; }
.airline-list-panel__input:focus-visible { outline: none; }
.airline-list-panel__rows { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; margin-block-start: calc(var(--flight-check-list-search-to-rows) - (var(--flight-check-row-touch-height) - var(--flight-check-row-height)) / 2); padding-block-end: var(--flight-check-list-bottom-padding); }
.airline-list-panel__message { padding: var(--flight-check-list-search-to-message) var(--spacing-md); color: var(--status-message-message-color); font: var(--status-message-message-style) var(--font-family); text-align: center; }
/* AirlineRow: the mark, then the airline's name over its name in the other script. The whole row is the control. */
.airline-row { display: flex; align-items: center; gap: var(--flight-check-row-mark-to-text); inline-size: 100%; min-block-size: var(--flight-check-row-touch-height); padding-inline: var(--flight-check-row-mark-inset) var(--flight-check-row-text-trailing-inset); color: var(--flight-check-row-text-color); text-align: start; cursor: pointer; }
.airline-row:hover { background: var(--palette-brand-wash); }
.airline-row__text { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--spacing-xxs); padding-inline-start: var(--spacing-xxs); }
.airline-row__name { font: var(--flight-check-row-name-style) var(--font-family); }
.airline-row__other { font: var(--flight-check-row-other-name-style) var(--font-family); }

/* RouteBox: one box of the route, a caption over a field for a city's name. */
.route-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--flight-check-route-gap); }
.route-box { position: relative; display: block; border-radius: var(--flight-check-route-radius); background: var(--flight-check-route-fill); cursor: text; }
.route-box:focus-within { outline: var(--web-focus-width) solid var(--web-focus-color); outline-offset: var(--web-focus-offset); }
.route-box__caption { position: absolute; inset-block-start: var(--flight-check-route-caption-top); inset-inline: var(--flight-check-route-text-inset); color: var(--flight-check-route-caption-color); font: var(--flight-check-route-caption-style) var(--font-family); pointer-events: none; }
/* The field fills the box, so that a tap anywhere in it writes; its text sits under the caption. */
.route-box__input {
  display: block; inline-size: 100%; block-size: var(--flight-check-route-height);
  padding: calc(var(--flight-check-route-value-top) - var(--spacing-xxs)) var(--flight-check-route-text-inset) var(--spacing-xs);
  color: var(--flight-check-route-value-color); caret-color: var(--flight-check-field-cursor-color); font: var(--flight-check-route-value-style) var(--font-family); text-align: start; appearance: none; -webkit-appearance: none;
}
.route-box__input::placeholder { color: var(--flight-check-route-placeholder-color); opacity: 1; font-weight: var(--font-weights-medium); }
.route-box__input:focus-visible { outline: none; }

/* The line that says what the page shows is sample content. */
.flight-check__sample { margin-block-start: var(--flight-check-note-to-sample-note); color: var(--flight-check-sample-note-color); font: var(--flight-check-sample-note-style) var(--font-family); }
/* Why the question could not be asked, over the button. */
.flight-check__message { margin-block-end: var(--flight-check-message-to-button); color: var(--flight-check-message-color); font: var(--flight-check-message-style) var(--font-family); }

/* FlightPopularHeading, and the tiles under it: three to a row. */
.flight-popular-heading { display: flex; align-items: center; gap: var(--flight-check-heading-icon-to-title); margin-block-end: var(--flight-check-heading-to-tiles); color: var(--flight-check-heading-color); font: var(--flight-check-heading-style) var(--font-family); }
.flight-popular-heading .icon { color: var(--flight-check-heading-icon-tint); --icon-size: var(--flight-check-heading-icon-size); }
.airline-tiles { display: grid; grid-template-columns: repeat(var(--flight-check-tile-columns), minmax(0, 1fr)); gap: var(--flight-check-tile-row-gap) var(--flight-check-tile-gap); }
/* AirlineTile: the mark over the airline's name. A control: it chooses that airline in the field. */
.airline-tile {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--flight-check-tile-name-top) - var(--flight-check-tile-mark-top) - var(--flight-check-tile-mark-size));
  min-block-size: var(--flight-check-tile-height); padding: var(--flight-check-tile-mark-top) var(--flight-check-tile-name-inset) var(--spacing-xs);
  border-radius: var(--flight-check-tile-radius); background: var(--flight-check-tile-fill); color: var(--flight-check-tile-name-color);
  font: var(--flight-check-tile-name-style) var(--font-family); text-align: center; cursor: pointer;
  transition: box-shadow var(--motion-selection-millis) var(--motion-easing);
}
.airline-tile:hover { box-shadow: 0 0 0 2px var(--palette-brand-outline); }
.placeholder--airline-tile { block-size: var(--flight-check-tile-height); border-radius: var(--flight-check-tile-radius); background: var(--flight-check-placeholder-fill); }

/* FlightAnswerSheet.kt: whether the in-flight package works on the flight that
   was asked about. A picture, a title, a sentence, three facts side by side,
   then the kit's sheet ending. Everything centred. */
.flight-answer-sheet { display: flex; flex-direction: column; align-items: center; padding: var(--flight-answer-sheet-supported-picture-top) var(--flight-answer-sheet-text-inset) 0; text-align: center; }
.flight-answer-sheet__picture { inline-size: var(--flight-answer-sheet-supported-picture-width); block-size: var(--flight-answer-sheet-supported-picture-height); }
.flight-answer-sheet__title { margin-block-start: var(--flight-answer-sheet-supported-picture-to-title); color: var(--flight-answer-sheet-title-color); font: var(--flight-answer-sheet-title-style) var(--font-family); }
.flight-answer-sheet__body { margin-block-start: var(--flight-answer-sheet-supported-title-to-body); color: var(--flight-answer-sheet-body-color); font: var(--flight-answer-sheet-body-style) var(--font-family); }
.flight-answer-sheet__sample { margin-block-start: var(--flight-answer-sheet-body-to-sample-note); color: var(--flight-answer-sheet-sample-note-color); font: var(--flight-answer-sheet-sample-note-style) var(--font-family); }
.flight-answer-sheet__facts { display: grid; grid-template-columns: repeat(var(--flight-answer-sheet-fact-count), minmax(0, 1fr)); gap: var(--flight-answer-sheet-fact-gap); inline-size: 100%; margin-block-start: var(--flight-answer-sheet-supported-body-to-tiles); }
.flight-answer-sheet__note { inline-size: 100%; margin-block-start: var(--flight-answer-sheet-tiles-to-note); text-align: start; }
.flight-answer-sheet--not-supported { padding-block-start: var(--flight-answer-sheet-not-supported-picture-top); }
.flight-answer-sheet--not-supported .flight-answer-sheet__picture { inline-size: var(--flight-answer-sheet-not-supported-picture-width); block-size: var(--flight-answer-sheet-not-supported-picture-height); }
.flight-answer-sheet--not-supported .flight-answer-sheet__title { margin-block-start: var(--flight-answer-sheet-not-supported-picture-to-title); }
.flight-answer-sheet--not-supported .flight-answer-sheet__facts { margin-block-start: var(--flight-answer-sheet-not-supported-body-to-tiles); }
.flight-answer-sheet + .sheet__ending { padding-block-start: var(--flight-answer-sheet-tiles-to-button); }
/* FactTile: one of the three facts, a picture over a label over a value. Not a control. */
.fact-tile { display: flex; flex-direction: column; align-items: center; min-block-size: var(--flight-answer-sheet-fact-height); padding: var(--flight-answer-sheet-fact-picture-top) var(--flight-answer-sheet-fact-text-inset) var(--spacing-xs); border-radius: var(--flight-answer-sheet-fact-radius); background: var(--flight-answer-sheet-fact-fill); }
.fact-tile .icon { color: var(--flight-answer-sheet-fact-icon-tint); --icon-size: var(--flight-answer-sheet-fact-picture-box); }
.fact-tile__label { margin-block-start: var(--spacing-sm); color: var(--flight-answer-sheet-fact-label-color); font: var(--flight-answer-sheet-fact-label-style) var(--font-family); }
.fact-tile__value { margin-block-start: var(--spacing-xxs); color: var(--flight-answer-sheet-fact-value-color); font: var(--flight-answer-sheet-fact-value-style) var(--font-family); overflow-wrap: anywhere; }

/* Inside a frame of the state board, a sheet is as tall as its frame allows, not as the window. */
.state-board__frame--window .sheet--list { block-size: auto; max-block-size: 100%; }

/* ==========================================================================
   7. Small things the pages above need
   ========================================================================== */

/* A panel that follows a plain header, not a band: it rises over nothing. */
@media (min-width: 768px) {
  .browse-panel--standing { margin-block-start: var(--spacing-lg); }
}
/* What a field of the check holds when it is not typed in: the chosen date. */
.flight-field__value { flex: 1 1 0; min-inline-size: 0; font: var(--flight-check-field-text-style) var(--font-family); }
/* A figure that stands alone reads as text does: its digits keep their own widths. */
.flight-field__value .num, .family-plan-row__size .num { font-variant-numeric: normal; }
/* A frame of the state board whose content is a card already, and one tall enough for a list that opens under its field. */
.state-board__frame--bare { padding: 0; background: none; box-shadow: none; }
.state-board__frame--tall { min-block-size: calc(var(--flight-check-list-top) + var(--flight-check-list-height) + var(--spacing-xxl) * 3); }
/* A board that is the whole page. */
.state-board--page { margin-block-start: var(--spacing-xl); padding-block-start: 0; border-block-start: 0; }

/* ==========================================================================
   The website's catalogue lists, Figma 2538:713 (local), 2538:3147
   (regional) and the grids of 2163:1959 (packages): the kinds as icon tiles
   standing on the band's foot, each with its word; the countries as wide
   cards; the plans as cards in a grid, under one line of links.
   ========================================================================== */
.placeholder--country-card { aspect-ratio: auto; min-block-size: 176px; border-radius: var(--radius-card); }

/* The search of the lists: one white rounded field, the words at the reading
   start and the magnifier in a small brand-tinted square at the far end. A
   light ring when it has the cursor, never a double one. */
.picture-header__search {
  --_fill: var(--palette-background); --_icon: var(--palette-brand); --_h: var(--catalogue-list-search-height);
  position: relative; min-block-size: var(--_h); padding-inline: var(--spacing-md) var(--spacing-xs);
  border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--palette-brand-outline);
}
.picture-header__search::before {
  content: ""; position: absolute; inset-block: var(--spacing-xs); inset-inline-end: var(--spacing-xs);
  aspect-ratio: 1; border-radius: var(--radius-chip); background: var(--palette-surface);
}
.picture-header__search .search-field__icon { --icon-size: 20px; position: relative; order: 2; margin-inline: var(--spacing-xs) calc((var(--_h) - var(--icon-size)) / 2 - var(--spacing-xs)); }
.picture-header__search .search-field__input { color: var(--palette-text-emphasis); }
.picture-header__search .search-field__input::placeholder { color: var(--palette-text-secondary); }
.picture-header__search:focus-within, .picture-header__search.is-focused { outline: none; box-shadow: inset 0 0 0 1px var(--palette-brand-outline), 0 0 0 3px var(--palette-brand-outline); }

/* The kinds as white tiles of one size in one row, standing on one line
   with room under them. The chosen one is the same white and taller: it
   reaches down and joins what is listed under it, as a tab. */
.picture-header .category-tabs--tiles {
  --_tile: 72px; --_under: var(--spacing-sm);
  flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; gap: var(--spacing-xs);
  overflow-x: auto; scrollbar-width: none;
}
.picture-header .category-tabs--tiles .category-tabs__tab,
.picture-header .category-tabs--tiles .category-tabs__tab[aria-current="page"] {
  flex: none; justify-content: center; gap: var(--spacing-xxs);
  inline-size: var(--_tile); block-size: var(--_tile); padding: 0 var(--spacing-xxs);
  border-radius: var(--radius-md); background: var(--palette-background); color: var(--palette-placeholder);
  box-shadow: none; transform: none;
}
.picture-header .category-tabs--tiles .category-tabs__tab:hover { color: var(--palette-brand); }
.picture-header .category-tabs--tiles .category-tabs__tab .icon { --icon-size: 26px; }
.picture-header .category-tabs--tiles .category-tabs__label { display: block; max-inline-size: 100%; font: var(--typography-label) var(--font-family); }
.picture-header .category-tabs--tiles .category-tabs__tab[aria-current="page"] {
  block-size: calc(var(--_tile) + var(--_under)); padding-block-end: var(--_under);
  border-end-start-radius: 0; border-end-end-radius: 0; color: var(--palette-brand);
}
.picture-header .category-tabs--tiles .category-tabs__tab[aria-current="page"] .icon { --icon-size: 30px; }
.picture-header .category-tabs--tiles .category-tabs__tab[aria-current="page"] .category-tabs__label { font: var(--typography-body-bold) var(--font-family); }
@media (max-width: 767px) {
  /* On a phone the row scrolls across, from one edge of the window to the other. */
  .picture-header .category-tabs--tiles { margin-inline: calc(var(--web-gutter) * -1); padding-block-start: var(--spacing-xs); padding-inline: var(--web-gutter); scroll-padding-inline: var(--web-gutter); }
}
@media (min-width: 768px) {
  /* The band of the Figma frame: the brand colour over its picture, which shows at the reading end. */
  .picture-header__picture { opacity: 0.55; -webkit-mask-image: linear-gradient(to var(--inline-start), #000 10%, transparent 55%); mask-image: linear-gradient(to var(--inline-start), #000 10%, transparent 55%); }
  .picture-header__title { font: var(--typography-site-section) var(--font-family); }
  .picture-header__subtitle { font: var(--typography-site-body) var(--font-family); }
  .picture-header__search { --_h: 64px; max-inline-size: 708px; padding-inline-start: var(--spacing-lg); box-shadow: 0 var(--spacing-md) var(--spacing-xxl) color-mix(in srgb, var(--palette-brand-deep) 22%, transparent); }
  .picture-header__search:focus-within, .picture-header__search.is-focused {
    box-shadow: 0 var(--spacing-md) var(--spacing-xxl) color-mix(in srgb, var(--palette-brand-deep) 22%, transparent), 0 0 0 4px color-mix(in srgb, var(--palette-on-brand) 45%, transparent);
  }
  .picture-header .category-tabs--tiles.picture-header__tabs {
    --_tile: 104px; --_under: var(--spacing-lg);
    justify-content: center; gap: var(--spacing-sm); max-inline-size: none; margin-block-start: var(--spacing-xxl);
    overflow: visible;
  }
  .picture-header .category-tabs--tiles .category-tabs__tab { inline-size: var(--_tile); block-size: calc(var(--_tile) + var(--spacing-xs)); border-radius: var(--radius-card); gap: var(--spacing-xs); }
  /* The chosen tile reaches a hair under the panel's edge, so that the two whites meet with no seam. */
  .picture-header .category-tabs--tiles .category-tabs__tab[aria-current="page"] { block-size: calc(var(--_tile) + var(--spacing-xs) + var(--_under) + 2px); margin-block-end: -2px; padding-block-end: calc(var(--_under) + 2px); }
  .picture-header__search .search-field__input { min-block-size: var(--_h); font: var(--typography-site-body) var(--font-family); }
  .picture-header .category-tabs--tiles .category-tabs__tab .icon { --icon-size: 32px; }
  .picture-header .category-tabs--tiles .category-tabs__tab[aria-current="page"] .icon { --icon-size: 38px; }
  .picture-header .category-tabs--tiles .category-tabs__label { font: var(--typography-site-body) var(--font-family); }
  .picture-header .category-tabs--tiles .category-tabs__tab[aria-current="page"] .category-tabs__label { font: var(--typography-title-bold) var(--font-family); }
  /* The white sheet starts under the tiles, with the frame's padding and radius; its shadow falls only downwards, so the tab joins it clean. */
  .browse-panel { padding: calc(var(--spacing-lg) + var(--spacing-xs)); border-radius: calc(var(--radius-card) * 2); box-shadow: 0 var(--spacing-xxl) calc(var(--spacing-xl) * 2) calc(var(--spacing-md) * -1) var(--palette-shadow-soft); }
  .browse-panel .card-grid { gap: var(--spacing-lg) var(--spacing-xl); }
}
@media (min-width: 1100px) {
  /* The plans' page: the countries row and the links in one line, the switch beside the check row, then the cards. */
  .plans-layout, .plans-layout--switch, .plans-layout--extra {
    grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; column-gap: var(--spacing-lg); row-gap: var(--spacing-lg);
    grid-template-areas: "lead more more" "plans plans plans" "note note note";
  }
  .plans-layout--switch { grid-template-areas: "switch switch lead" "more more more" "plans plans plans" "note note note"; }
  .plans-layout__switch, .plans-layout__more { margin: 0; }
  .plans-layout__more { flex-direction: row; gap: var(--spacing-lg); }
  .plans-layout__more:empty { display: none; }
  .plans-layout__more .link-row { flex: 1 1 0; margin: 0; }
  .plans-layout__plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-lg); }
  .plans-layout--global .plans-layout__plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans-layout__plans > :not(.global-plan-row):not(.unlimited-card):not(.family-plan-row):not([class*="placeholder--"]) { grid-column: 1 / -1; }
  /* A plan as a card: its size at the top of the reading side, its price at the foot of the far side. */
  .plans-layout__plans .global-plan-row { min-block-size: 130px; border-radius: var(--radius-card); }
  .plans-layout__plans .global-plan-row__plan { align-items: stretch; padding: var(--spacing-lg); }
  .plans-layout__plans .global-plan-row__amount { align-self: flex-start; flex-direction: column; align-items: flex-start; }
  .plans-layout__plans .global-plan-row__cost { align-self: flex-end; }
  .plans-layout__plans .global-plan-row__size { font: var(--typography-site-section) var(--font-family); }
  .plans-layout__plans .global-plan-row__circle { display: none; }
  .plans-layout__plans .placeholder--global-plan-row { block-size: 130px; }
}
@media (max-width: 767px) {
  /* A region's name is two words on a map: on a phone the cards stand one across. */
  .card-grid--regions { grid-template-columns: minmax(0, 1fr); }
  /* Two wide country cards across a phone: smaller, with their content whole. */
  .browse-panel .card-grid { gap: var(--spacing-sm); }
  .browse-panel .country-card--wide { min-block-size: 132px; padding-block: var(--spacing-md) var(--spacing-sm); padding-inline: var(--spacing-md); }
  .browse-panel .country-card--wide .flag { inline-size: 34px; block-size: 34px; }
  .browse-panel .country-card--wide .country-card__name { padding-block-start: var(--spacing-sm); font: var(--typography-title-bold) var(--font-family); }
  .placeholder--country-card { min-block-size: 132px; }
}

/* The FAQ panel the packages page closes with, as on Home (launch/FaqPanel.kt):
   the kit's .faq-panel, the words, then the first questions; side by side
   from a tablet up. */
.browse-faq-section { margin-block: var(--spacing-xxl); }
.browse-faq__words { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); }
.browse-faq__title { color: var(--palette-brand); font: var(--typography-site-section) var(--font-family); }
.browse-faq__body { max-inline-size: 48ch; color: var(--palette-text-emphasis); font: var(--typography-site-body) var(--font-family); line-height: 1.6; }
.browse-faq__ask { color: var(--palette-text-emphasis); font: var(--typography-title-bold) var(--font-family); }
.browse-faq__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm); }
@media (min-width: 768px) {
  .browse-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }
}
@media (min-width: 1100px) {
  .browse-faq { padding-inline: calc(var(--spacing-xxl) * 2); }
}

/* ==========================================================================
   The packages page (Figma 2163:1959): the section's head and the kinds as
   pills, then the tab's grid with no band and no panel around it.
   ========================================================================== */
.packages-hub { display: flex; flex-direction: column; gap: var(--spacing-md); padding-block: var(--spacing-xl) var(--spacing-md); }
.packages-hub__tabs { overflow-x: auto; scrollbar-width: none; }
.packages-hub__panel { padding-block-end: var(--spacing-xl); }
.packages-hub__panel > .card-grid { gap: var(--spacing-md); }
@media (max-width: 767px) {
  .packages-hub__head { grid-template-columns: minmax(0, 1fr); row-gap: var(--spacing-xs); }
  .packages-hub__head .section-head__action { grid-column: 1; grid-row: auto; justify-self: start; }
  .packages-hub__tabs { flex-wrap: nowrap; margin-inline: calc(-1 * var(--spacing-md)); padding-inline: var(--spacing-md); }
  .packages-hub__tabs .category-tabs__tab { flex: none; }
}