/* ==== tokens: written by pages/buying/tokens.py, do not edit ==== */
:root {
  /* ---- Plans: design/component/PlansTokens.kt, object PlansTokens ---- */
  --plans-background: var(--palette-background);
  --plans-side-margin: var(--spacing-screen-margin);
  --plans-hero-top: 10px;
  --plans-hero-to-control: 10px;
  --plans-control-to-countries: var(--spacing-sm);
  --plans-control-to-heading: var(--spacing-lg);
  --plans-heading-style: var(--typography-heading);
  --plans-heading-color: var(--palette-brand);
  --plans-heading-to-body: 9px;
  --plans-body-style: var(--typography-caption-medium);
  --plans-body-color: var(--palette-text-secondary);
  --plans-body-line-height: 18px;
  --plans-body-to-cards: 23px;
  --plans-card-gap: var(--spacing-sm);
  --plans-cards-to-note: var(--spacing-sm);
  --plans-note-style: var(--typography-caption);
  --plans-note-color: var(--palette-text-secondary);
  --plans-cards-to-banner: var(--spacing-sm);
  --plans-fixed-bottom-padding: 16px;
  --plans-countries-to-rows: 15px;
  --plans-row-gap: var(--spacing-sm);
  --plans-rows-to-note: var(--spacing-sm);
  --plans-rows-to-links: var(--spacing-lg);
  --plans-link-gap: var(--spacing-sm);
  --plans-limited-bottom-padding: 16px;
  --plans-control-to-promo: var(--spacing-lg);
  --plans-countries-to-promo: var(--spacing-lg);
  --plans-promo-to-section-header: 15px;
  --plans-section-header-icon-width: 28px;
  --plans-section-header-icon-height: 30px;
  --plans-section-header-icon-tint: var(--palette-brand);
  --plans-section-header-icon-to-title: 10px;
  --plans-section-header-title-style: var(--typography-title);
  --plans-section-header-title-color: var(--palette-text-emphasis);
  --plans-section-header-to-hint: var(--spacing-sm);
  --plans-hint-style: var(--typography-caption-loose);
  --plans-hint-color: var(--palette-text-secondary);
  --plans-hint-to-groups: var(--spacing-sm);
  --plans-groups-to-features: var(--spacing-lg);
  --plans-groups-to-notes: var(--spacing-md);
  --plans-features-to-links: var(--spacing-lg);
  --plans-unlimited-bottom-padding: 24px;
  --plans-control-to-placeholders: var(--spacing-lg);
  --plans-row-placeholder-count: 5;
  --plans-control-to-status: 40px;

  /* ---- 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);

  /* ---- 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);

  /* ---- FeatureStrip: design/component/BannerTokens.kt, object FeatureStripTokens ---- */
  --feature-strip-height: 80px;
  --feature-strip-radius: var(--radius-card);
  --feature-strip-fill: rgba(207, 223, 255, 0.5);
  --feature-strip-inset: var(--spacing-lg);
  --feature-strip-min-gap: var(--spacing-xs);
  --feature-strip-circle-size: 30px;
  --feature-strip-circle-to-label: 5px;
  --feature-strip-label-style: var(--typography-label);
  --feature-strip-label-color: var(--palette-text-emphasis);
  --feature-strip-label-max-lines: 2;
  --feature-strip-label-min-scale: var(--sizing-min-text-scale);
  --feature-strip-features-1-icon-width: 14px;
  --feature-strip-features-1-icon-height: 14px;
  --feature-strip-features-1-icon-tint: var(--palette-on-brand);
  --feature-strip-features-1-circle-fill: #29A5FF;
  --feature-strip-features-2-icon-width: 16px;
  --feature-strip-features-2-icon-height: 16px;
  --feature-strip-features-2-icon-tint: var(--palette-on-brand);
  --feature-strip-features-2-circle-fill: var(--palette-positive);
  --feature-strip-features-3-icon-width: 14px;
  --feature-strip-features-3-icon-height: 14px;
  --feature-strip-features-3-icon-tint: var(--palette-on-brand);
  --feature-strip-features-3-circle-fill: #5FD9CB;
  --feature-strip-features-4-icon-width: 12px;
  --feature-strip-features-4-icon-height: 16px;
  --feature-strip-features-4-icon-tint: var(--palette-on-brand);
  --feature-strip-features-4-circle-fill: var(--palette-highlight);

  /* ---- PlanDetails: design/component/PlanDetailsTokens.kt, object PlanDetailsTokens ---- */
  --plan-details-background: var(--palette-background);
  --plan-details-side-margin: var(--spacing-screen-margin);
  --plan-details-back-icon-size: 16px;
  --plan-details-back-icon-tint: var(--palette-text-secondary);
  --plan-details-back-inset: 15px;
  --plan-details-back-top: 18px;
  --plan-details-back-touch-target: var(--sizing-min-touch-target);
  --plan-details-flag-top: 12px;
  --plan-details-flag-size: 50px;
  --plan-details-badge-fill: var(--palette-brand-wash);
  --plan-details-badge-icon-size: 24px;
  --plan-details-badge-icon-tint: var(--palette-brand);
  --plan-details-flag-to-name: var(--spacing-lg);
  --plan-details-name-style: var(--typography-heading);
  --plan-details-name-color: var(--palette-text-emphasis);
  --plan-details-name-to-summary: var(--spacing-lg);
  --plan-details-summary-to-facts: 15px;
  --plan-details-summary-to-check-row: 15px;
  --plan-details-group-gap: 15px;
  --plan-details-group-heading-style: var(--typography-title);
  --plan-details-group-heading-color: var(--palette-brand);
  --plan-details-groups-to-notes: 15px;
  --plan-details-facts-to-declarations: var(--spacing-lg);
  --plan-details-bottom-padding: 40px;
  --plan-details-placeholder-fill: var(--palette-surface);
  --plan-details-placeholder-summary-height: 82px;
  --plan-details-placeholder-group-height: 233px;
  --plan-details-placeholder-radius: var(--radius-card);

  /* ---- 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);

  /* ---- 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);

  /* ---- PackageDisc: design/component/PackageDiscTokens.kt, object PackageDiscTokens ---- */
  --package-disc-size: 40px;
  --package-disc-icon-size: 20px;
  --package-disc-on-brand-fill: var(--palette-brand);
  --package-disc-on-brand-tint: var(--palette-on-brand);
  --package-disc-on-brand-icon-size: 20px;
  --package-disc-on-white-fill: var(--palette-background);
  --package-disc-on-white-tint: var(--palette-brand);
  --package-disc-on-white-icon-size: 20px;
  --package-disc-whole-fill: var(--palette-background);
  --package-disc-whole-tint: var(--palette-brand);
  --package-disc-whole-icon-size: 40px;

  /* ---- Stepper: design/component/PlanBuilderTokens.kt, object StepperTokens ---- */
  --stepper-height: 40px;
  --stepper-radius: var(--radius-xs);
  --stepper-fill: var(--palette-surface);
  --stepper-segment-inset: 4px;
  --stepper-segment-gap: 4px;
  --stepper-segment-height: 32px;
  --stepper-segment-radius: 8px;
  --stepper-current-fill: var(--palette-brand);
  --stepper-divider-width: 2px;
  --stepper-divider-height: 32px;
  --stepper-divider-color: var(--palette-background);
  --stepper-current-label-style: var(--typography-label-bold);
  --stepper-current-label-color: var(--palette-on-brand);
  --stepper-label-style: var(--typography-label);
  --stepper-label-color: var(--palette-icon-muted);
  --stepper-change-millis: var(--motion-selection-millis);

  /* ---- QuestionCard: design/component/PlanBuilderTokens.kt, object QuestionCardTokens ---- */
  --question-card-radius: var(--radius-pill);
  --question-card-fill: var(--palette-surface);
  --question-card-padding: 15px;
  --question-card-gap: 15px;
  --question-card-icon-size: 30px;
  --question-card-icon-tint: var(--palette-brand);
  --question-card-icon-to-title: var(--spacing-sm);
  --question-card-title-style: var(--typography-title-bold);
  --question-card-title-color: var(--palette-text-emphasis);
  --question-card-title-to-suffix: var(--spacing-sm);
  --question-card-suffix-style: var(--typography-body-medium);
  --question-card-suffix-color: var(--palette-text-emphasis);
  --question-card-title-to-subtitle: var(--spacing-sm);
  --question-card-subtitle-style: var(--typography-label);
  --question-card-subtitle-color: var(--palette-text-muted);
  --question-card-header-to-answers: 15px;
  --question-card-answer-fill: var(--palette-background);
  --question-card-answer-radius: var(--radius-md);
  --question-card-selected-border-width: 1px;
  --question-card-selected-border-color: var(--palette-brand);
  --question-card-tick-size: 20px;
  --question-card-tick-tint: var(--palette-brand);
  --question-card-unticked-fill: var(--palette-surface);
  --question-card-row-field-height: 50px;
  --question-card-row-field-inset: 15px;
  --question-card-row-flag-size: 20px;
  --question-card-row-flag-ring: 1px;
  --question-card-row-flag-ring-color: var(--palette-background);
  --question-card-row-flag-overlap: 7px;
  --question-card-row-flags-to-label: var(--spacing-sm);
  --question-card-row-label-style: var(--typography-label-strong);
  --question-card-row-label-color: var(--palette-text-muted);
  --question-card-row-chosen-color: var(--palette-text-emphasis);
  --question-card-row-arrow-width: 20px;
  --question-card-row-arrow-height: 15px;
  --question-card-row-arrow-tint: var(--palette-icon-muted);
  --question-card-chips-per-row: 4;
  --question-card-chip-gap: 6px;
  --question-card-chip-height: 50px;
  --question-card-chip-style: var(--typography-title-large);
  --question-card-chip-color: var(--palette-icon-muted);
  --question-card-chip-selected-color: var(--palette-brand);
  --question-card-tile-height: 100px;
  --question-card-tile-gap-of-three: 8px;
  --question-card-tile-gap-of-two: var(--spacing-sm);
  --question-card-tile-picture-size: 30px;
  --question-card-tile-picture-top: 20px;
  --question-card-tile-label-top: 61px;
  --question-card-tile-label-style: var(--typography-body-strong);
  --question-card-tile-label-color: var(--palette-text-muted);
  --question-card-tile-tick-inset: 5px;
  --question-card-option-height: 50px;
  --question-card-option-gap: var(--spacing-sm);
  --question-card-option-inset: 15px;
  --question-card-option-picture-size: 20px;
  --question-card-option-picture-to-name: var(--spacing-sm);
  --question-card-option-name-style: var(--typography-label-strong);
  --question-card-option-name-color: var(--palette-text-muted);
  --question-card-option-hint-to-tick: var(--spacing-sm);
  --question-card-option-hint-style: var(--typography-caption-medium);
  --question-card-option-hint-color: var(--palette-text-muted);

  /* ---- PlanBuilder: design/component/PlanBuilderTokens.kt, object PlanBuilderTokens ---- */
  --plan-builder-background: var(--palette-background);
  --plan-builder-side-inset: var(--spacing-screen-margin);
  --plan-builder-title-to-stepper: 29px;
  --plan-builder-stepper-to-content: var(--spacing-sm);
  --plan-builder-section-gap: 15px;
  --plan-builder-bottom-inset: 6px;
  --plan-builder-banner-height: 140px;
  --plan-builder-banner-radius: var(--radius-card);
  --plan-builder-banner-text-inset: var(--spacing-lg);
  --plan-builder-banner-title-top: 25px;
  --plan-builder-banner-title-style: var(--typography-title-large);
  --plan-builder-banner-title-color: var(--palette-brand);
  --plan-builder-banner-subtitle-top: 73px;
  --plan-builder-banner-subtitle-width: 193px;
  --plan-builder-banner-title-width: 193px;
  --plan-builder-banner-title-max-lines: 1;
  --plan-builder-banner-title-max-letters: 20;
  --plan-builder-banner-subtitle-style: var(--typography-caption-medium);
  --plan-builder-banner-subtitle-color: var(--palette-text-muted);
  --plan-builder-estimate-top-gap: 20px;
  --plan-builder-estimate-height: 120px;
  --plan-builder-estimate-radius: var(--radius-card);
  --plan-builder-estimate-text-inset: var(--spacing-lg);
  --plan-builder-estimate-value-top: 28px;
  --plan-builder-estimate-value-style: var(--typography-headline-bold);
  --plan-builder-estimate-unit-style: var(--typography-button);
  --plan-builder-estimate-value-color: var(--palette-brand);
  --plan-builder-estimate-value-to-unit: 6px;
  --plan-builder-estimate-label-top: 76px;
  --plan-builder-estimate-label-style: var(--typography-label-strong);
  --plan-builder-estimate-label-color: var(--palette-text-muted);
  --plan-builder-button-height: 60px;
  --plan-builder-button-radius: var(--radius-md);
  --plan-builder-button-horizontal-padding: 50px;
  --plan-builder-button-fill: var(--palette-brand);
  --plan-builder-button-label-color: var(--palette-on-brand);
  --plan-builder-button-label-style: var(--typography-body-strong);
  --plan-builder-button-top-gap: 20px;
  --plan-builder-match-top-gap: 30px;
  --plan-builder-match-size: 80px;
  --plan-builder-match-to-headline: 20px;
  --plan-builder-headline-style: var(--typography-title-bold);
  --plan-builder-headline-color: var(--palette-brand);
  --plan-builder-headline-to-body: var(--spacing-sm);
  --plan-builder-body-width: 347px;
  --plan-builder-body-style: var(--typography-body-medium);
  --plan-builder-body-color: var(--palette-inactive);
  --plan-builder-body-to-card: 20px;
  --plan-builder-why-title-to-first-line: 26px;
  --plan-builder-why-line-gap: 20px;
  --plan-builder-why-tick-size: 16px;
  --plan-builder-why-tick-tint: var(--palette-text-emphasis);
  --plan-builder-why-tick-inset: 30px;
  --plan-builder-why-tick-to-text: var(--spacing-sm);
  --plan-builder-why-text-style: var(--typography-body-medium);
  --plan-builder-why-text-color: var(--palette-text-muted);
  --plan-builder-why-bottom-padding: 23px;
  --plan-builder-edit-top-gap: 20px;
  --plan-builder-placeholder-circle: 80px;
  --plan-builder-placeholder-card-height: 228px;
  --plan-builder-placeholder-card-radius: var(--radius-card);
  --plan-builder-placeholder-why-height: 185px;
  --plan-builder-placeholder-why-radius: var(--radius-pill);
  --plan-builder-placeholder-fill: var(--palette-surface);
  --plan-builder-sharing-yes-tint: var(--palette-brand);
  --plan-builder-sharing-no-tint: var(--palette-icon-off);

  /* ---- Checkout: design/component/CheckoutTokens.kt, object CheckoutTokens ---- */
  --checkout-background: var(--palette-background);
  --checkout-side-inset: var(--spacing-screen-margin);
  --checkout-title-to-card: 34px;
  --checkout-card-to-offer: 20px;
  --checkout-card-to-facts: 20px;
  --checkout-to-voucher-heading: 20px;
  --checkout-voucher-heading-style: var(--typography-title-bold);
  --checkout-voucher-heading-color: var(--palette-brand);
  --checkout-voucher-heading-to-field: 15px;
  --checkout-to-declarations: 20px;
  --checkout-declaration-gap: 15px;
  --checkout-placeholder-height: 143px;
  --checkout-placeholder-radius: var(--radius-card);
  --checkout-placeholder-fill: var(--palette-surface);

  /* ---- Paying: design/component/CheckoutTokens.kt, object PayingTokens ---- */
  --paying-background: var(--palette-background);
  --paying-side-inset: var(--spacing-screen-margin);
  --paying-title-to-card: 34px;
  --paying-card-to-status: 40px;
  --paying-status-style: var(--typography-body-medium);
  --paying-status-color: var(--palette-text-emphasis);
  --paying-card-to-total: 30px;
  --paying-total-label-style: var(--typography-label);
  --paying-total-label-color: var(--palette-text-secondary);
  --paying-total-style: var(--typography-title-large);
  --paying-total-color: var(--palette-brand);
  --paying-total-to-notice: var(--spacing-lg);
  --paying-button-height: 60px;
  --paying-button-radius: var(--radius-card);
  --paying-button-horizontal-padding: 50px;
  --paying-button-fill: var(--palette-brand);
  --paying-button-label-color: var(--palette-on-brand);
  --paying-button-label-style: var(--typography-body-strong);
  --paying-notice-to-button: var(--spacing-xl);
  --paying-button-to-cancel: var(--spacing-md);

  /* ---- ResultCard: design/component/ResultCardTokens.kt, object ResultCardTokens ---- */
  --result-card-scrim: var(--palette-scrim);
  --result-card-fill: var(--palette-background);
  --result-card-radius: var(--radius-lg);
  --result-card-side-inset: var(--spacing-screen-margin);
  --result-card-height: 400px;
  --result-card-bottom-inset: 40px;
  --result-card-bottom-safe-gap: 6px;
  --result-card-open-millis: var(--motion-sheet-millis);
  --result-card-picture-top: 70px;
  --result-card-picture-size: 120px;
  --result-card-picture-to-title: 20px;
  --result-card-title-style: var(--typography-headline-bold);
  --result-card-title-color: var(--palette-brand);
  --result-card-title-to-wait: 33px;
  --result-card-wait-style: var(--typography-label-strong);
  --result-card-wait-color: var(--palette-text-emphasis);
  --result-card-wait-to-body: 20px;
  --result-card-body-style: var(--typography-label-regular);
  --result-card-body-color: var(--palette-text-emphasis);
  --result-card-text-inset: var(--spacing-lg);
  --result-card-to-order-line: 16px;
  --result-card-order-line-style: var(--typography-label-tall);
  --result-card-order-line-color: var(--palette-text-emphasis-soft);
  --result-card-button-height: 60px;
  --result-card-button-radius: var(--radius-card);
  --result-card-button-horizontal-padding: 50px;
  --result-card-button-fill: var(--palette-brand);
  --result-card-button-label-color: var(--palette-on-brand);
  --result-card-button-label-style: var(--typography-body-strong);
  --result-card-button-inset: var(--spacing-lg);
  --result-card-picture-top-with-button: 40px;
  --result-card-title-to-wait-with-button: 16px;
  --result-card-wait-to-body-with-button: var(--spacing-sm);

  /* ---- FamilyScreen: design/component/FamilyTokens.kt, object FamilyScreenTokens ---- */
  --family-screen-background: var(--palette-background);
  --family-screen-side-inset: var(--spacing-screen-margin);
  --family-screen-hero-top: 10px;
  --family-screen-hero-to-sample: var(--spacing-sm);
  --family-screen-sample-style: var(--typography-caption-medium);
  --family-screen-sample-color: var(--palette-text-muted);
  --family-screen-heading-icon-width: 30px;
  --family-screen-heading-icon-height: 30px;
  --family-screen-heading-icon-tint: var(--palette-brand);
  --family-screen-heading-icon-to-title: 10px;
  --family-screen-heading-title-style: var(--typography-title);
  --family-screen-heading-title-color: var(--palette-text-muted);
  --family-screen-block-to-heading: 15px;
  --family-screen-heading-to-block: var(--spacing-sm);
  --family-screen-placeholder-fill: var(--palette-surface);

  /* ---- 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);

  /* ---- MemberAvatar: design/component/FamilyTokens.kt, object MemberAvatarTokens ---- */
  --member-avatar-size: 40px;
  --member-avatar-fill: var(--palette-brand);
  --member-avatar-letter-style: var(--typography-body-strong);
  --member-avatar-letter-color: var(--palette-on-brand);

  /* ---- MemberTile: design/component/FamilyTokens.kt, object MemberTileTokens ---- */
  --member-tile-per-row: 4;
  --member-tile-gap: var(--spacing-xs);
  --member-tile-radius: var(--radius-md);
  --member-tile-fill: var(--palette-surface);
  --member-tile-avatar-top: 15px;
  --member-tile-name-top: 61px;
  --member-tile-name-inset: 4px;
  --member-tile-name-style: var(--typography-body-strong);
  --member-tile-name-color: var(--palette-text-emphasis);
  --member-tile-empty-label-max-lines: 2;
  --member-tile-label-min-scale: var(--sizing-min-text-scale);
  --member-tile-empty-label-bottom: var(--spacing-sm);
  --member-tile-empty-disc-fill: var(--palette-brand);
  --member-tile-empty-icon-size: 14px;
  --member-tile-empty-icon-tint: var(--palette-on-brand);
  --member-tile-empty-border-width: 1px;
  --member-tile-empty-border: var(--palette-brand-half);
  --member-tile-empty-border-dash: 4px;
  --member-tile-empty-border-gap: 4px;
  --member-tile-checkout-height: 100px;
  --member-tile-checkout-empty-disc-size: 40px;
  --member-tile-checkout-empty-disc-top: 15px;
  --member-tile-checkout-empty-label-top: 61px;
  --member-tile-checkout-empty-label-style: var(--typography-body-strong);
  --member-tile-checkout-empty-label-color: var(--palette-text-emphasis);
  --member-tile-members-height: 120px;
  --member-tile-members-empty-disc-size: 30px;
  --member-tile-members-empty-disc-top: 32px;
  --member-tile-members-empty-label-top: 72px;
  --member-tile-members-empty-label-style: var(--typography-label-strong);
  --member-tile-members-empty-label-color: var(--palette-brand);
  --member-tile-pill-height: 24px;
  --member-tile-pill-radius: 12px;
  --member-tile-pill-inset: 5px;
  --member-tile-pill-fill: var(--palette-positive-wash);
  --member-tile-pill-label-style: var(--typography-caption-strong);
  --member-tile-pill-label-color: var(--palette-positive-deep);
  --member-tile-menu-icon-width: 4px;
  --member-tile-menu-icon-height: 14px;
  --member-tile-menu-icon-inset: 10px;
  --member-tile-menu-icon-top: 10px;
  --member-tile-menu-icon-tint: var(--palette-text-emphasis-half);
  --member-tile-menu-touch-target: var(--sizing-min-touch-target);

  /* ---- FamilyCheckout: design/component/FamilyTokens.kt, object FamilyCheckoutTokens ---- */
  --family-checkout-plan-price-inset: var(--spacing-lg);
  --family-checkout-tiles-to-strip: 15px;
  --family-checkout-strip-to-countries: 15px;
  --family-checkout-strip-height: 40px;
  --family-checkout-strip-vertical-inset: var(--spacing-xs);
  --family-checkout-strip-max-lines: 3;
  --family-checkout-strip-radius: var(--radius-chip);
  --family-checkout-strip-fill: var(--palette-text-emphasis);
  --family-checkout-strip-icon-size: 20px;
  --family-checkout-strip-content-color: var(--palette-on-brand);
  --family-checkout-strip-leading-inset: 15px;
  --family-checkout-strip-icon-to-text: var(--spacing-sm);
  --family-checkout-strip-trailing-inset: var(--spacing-sm);
  --family-checkout-strip-text-style: var(--typography-caption-medium);
  --family-checkout-price-radius: var(--radius-card);
  --family-checkout-price-fill: var(--palette-surface);
  --family-checkout-price-row-height: 46px;
  --family-checkout-price-divider-height: 2px;
  --family-checkout-price-divider: var(--palette-background);
  --family-checkout-price-inset: 15px;
  --family-checkout-price-label-style: var(--typography-label);
  --family-checkout-price-label-color: var(--palette-text-emphasis);
  --family-checkout-price-amount-style: var(--typography-body-strong);
  --family-checkout-price-amount-color: var(--palette-brand);
  --family-checkout-price-discount-color: var(--palette-positive);
  --family-checkout-price-total-label-style: var(--typography-label-bold);
  --family-checkout-price-total-amount-style: var(--typography-title-bold);
  --family-checkout-voucher-to-declarations: var(--spacing-lg);
  --family-checkout-declarations-to-button: 23px;
  --family-checkout-button-height: 60px;
  --family-checkout-button-radius: var(--radius-md);
  --family-checkout-button-horizontal-padding: 50px;
  --family-checkout-button-fill: var(--palette-brand);
  --family-checkout-button-label-color: var(--palette-on-brand);
  --family-checkout-button-label-style: var(--typography-body-strong);
  --family-checkout-button-to-text-button: 19px;
  --family-checkout-text-button-style: var(--typography-body-strong);
  --family-checkout-text-button-color: var(--palette-text-emphasis);
  --family-checkout-text-button-touch-height: var(--sizing-min-touch-target);
  --family-checkout-bottom-padding: 40px;
  --family-checkout-placeholder-plan-height: 90px;
  --family-checkout-placeholder-plan-radius: var(--radius-card);
  --family-checkout-placeholder-tiles: 4;
  --family-checkout-placeholder-price-rows: 2;
}
/* ==== end of the written tokens ==== */

/*
 * Maak on the web: what the buying pages add to the kit.
 *
 * The plans of a destination, a plan's details, the plan builder, the checkout
 * review, the family checkout, paying and the result. A page of pages/buying/
 * links this file after css/maak.css.
 *
 * Three kinds of thing are here.
 *
 *   1. The look the owner chose (looks/x2.html), which the kit does not draw
 *      yet: a blue band across the top of the page, the page's content rising
 *      onto it, white panels on a pale blue ground. Web only: .page--ground,
 *      .page-band, .band-body, .panel. On a phone the same markup is the apps'
 *      own page: the band is the hero, the body the white page with a round top.
 *
 *   2 to 6. The components these pages need and the kit lacks, each named
 *      after the Android component it mirrors and drawn from that component's
 *      tokens (the block above): .promo-banner, .feature-banner,
 *      .feature-strip, .countries-row, .global-plan-row, .covered-countries,
 *      .device-brand, .builder-banner, .stepper, .question-card, .answer,
 *      .estimate-card, .result-card, .family-plan-row, .member-tile,
 *      .price-panel and their parts; and a few parts the kit's own components
 *      lack (.day-option__badge, .plan-review-card__features,
 *      .result-sheet__note). What only a website has says so where it starts
 *      (.payment-mount, .step-ending, .total-row).
 *
 *   7. The design's own marks, which are never part of the website: a state
 *      of a page shown under the one it opens in (.variant), a word to
 *      whoever wires the page (.design-note), the list of the pages.
 *
 * Written phone first, as kit.css is: the rules as they stand are the phone,
 * then a tablet (768) and a desktop (1100). Nothing says left or right.
 */

/* ==========================================================================
   1. The look: ground, band, body, panel. Web only.
   ========================================================================== */

:root {
  /* How far the page's body climbs onto the band's foot. */
  --band-rise: var(--spacing-xl);
  /* The band's own height before what it holds makes it taller. */
  --band-height: 170px;
  /* The row of tabs or steps that stands on the band's foot, from a tablet up. */
  --band-bar: var(--segmented-control-height);
  /* The two pale discs behind a band that has no picture. */
  --band-disc-large: clamp(260px, 46vw, 620px);
  --band-disc-small: clamp(220px, 38vw, 520px);
  /* A panel: a white card on the pale ground. */
  --panel-padding: var(--spacing-xl);
  --panel-radius: var(--radius-lg);
  --panel-shadow: 0 var(--spacing-xs) var(--spacing-xl) color-mix(in srgb, var(--palette-navy) 7%, transparent);
  /* The narrowest a day's cell can be and still say "most requested" beside its mark. */
  --badged-cell: 136px;
  /* The narrowest a question of the builder can be and still hold its answers: under it, the questions go one to a row. */
  --question-min: 300px;
}
@media (min-width: 768px) {
  :root { --band-rise: calc(var(--spacing-xxl) * 2); --band-height: 180px; }
}
@media (min-width: 1100px) {
  :root { --band-rise: calc(var(--spacing-xl) * 3); --band-height: 190px; --panel-padding: calc(var(--spacing-md) * 2); }
}

/* The ground. A phone keeps the apps' white page; from a tablet up it is the pale blue the panels stand on. */
.page--ground { background: var(--palette-background); }
@media (min-width: 768px) {
  .page--ground { background: var(--palette-brand-wash); }
}

/* The band: the brand colour across the whole window, with what the page is about.
   It stands directly in <main>, outside any container, and holds one .container. */
.page-band {
  --web-focus-color: var(--palette-on-brand);
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: var(--spacing-xs) calc(var(--band-rise) + var(--spacing-lg));
  color: var(--palette-on-brand);
  background: linear-gradient(calc(180deg + var(--mirror) * 55deg), var(--palette-brand-shade) 0%, var(--palette-brand) 45%, color-mix(in srgb, var(--palette-brand) 40%, var(--palette-sky)) 100%);
}
.page-band::before, .page-band::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; background: var(--palette-on-brand); pointer-events: none; }
.page-band::before { inset-block-start: calc(var(--band-disc-large) * -0.28); inset-inline-end: calc(var(--band-disc-large) * -0.22); inline-size: var(--band-disc-large); block-size: var(--band-disc-large); opacity: 0.08; }
.page-band::after { inset-block-end: calc(var(--band-disc-small) * -0.5); inset-inline-start: calc(var(--band-disc-small) * -0.24); inline-size: var(--band-disc-small); block-size: var(--band-disc-small); opacity: 0.06; }
.page-band__inner { display: flex; flex-direction: column; gap: var(--spacing-sm); min-block-size: var(--band-height); }

/* A band that holds a title and nothing else is shorter. */
.page-band--short { --band-height: 104px; }
/* A band that holds nothing at all: the colour a page's one card rises onto, where the state has no title to put on it. */
.page-band--bare { --band-height: var(--spacing-md); }
/* The band's first row: the way back, and at the far end what the hero's corner holds in the apps (a chip). */
.page-band__top { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); }
/* The way back. A round arrow on a phone, as in the apps; from a tablet up the state's own word for it stands beside the arrow.
   (Where it leads is not in the state yet: the day it is, that name is what the label says.) */
.page-band__back { display: inline-flex; align-items: center; gap: var(--spacing-xs); min-block-size: var(--sizing-min-touch-target); min-inline-size: var(--sizing-min-touch-target); margin-inline-start: calc(var(--spacing-sm) * -1); padding-inline: var(--spacing-sm); border-radius: calc(var(--sizing-min-touch-target) / 2); color: var(--palette-on-brand); font: var(--typography-label-strong) var(--font-family); transition: background-color var(--motion-selection-millis) var(--motion-easing); }
.page-band__back:hover { background: var(--palette-on-brand-faint); }
.page-band__back .icon { --icon-size: var(--plan-details-back-icon-size); margin-inline: var(--spacing-xxs); }
.page-band__back-label { display: none; }

/* What the page is about: a flag or a disc, the title, a line under it, and at the far end a chip or the figures. */
.page-band__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--spacing-md) var(--spacing-lg); margin-block-start: auto; }
.page-band__lead { flex: none; }
.page-band__text { flex: 1 1 60%; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--spacing-xs); }
.page-band__title { font: var(--typography-headline-bold) var(--font-family); }
.page-band__subtitle { max-inline-size: 56ch; color: var(--palette-on-brand); font: var(--typography-body-medium) var(--font-family); line-height: var(--typography-body-loose-line); }
.page-band__aside { flex: 0 1 auto; min-inline-size: 0; }
.page-band--stacked .page-band__head { flex-direction: column; align-items: flex-start; }
.page-band--stacked .page-band__text { flex-basis: auto; }
.page-band--stacked .page-band__aside { align-self: stretch; }

/* A destination's picture. On a phone it fills the band, with the brand colour rising from the foot
   (PlansHero.kt); from a tablet up it lies at the band's far end and melts into the colour. The
   pictures are drawn for a right-to-left page: see --mirror and --art-weak-side in base.css. */
.page-band__picture { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 35%; transform: scaleX(var(--mirror)); }
.page-band--picture::before { content: none; }
.page-band--picture::after { inset: 0; inline-size: auto; block-size: auto; border-radius: 0; opacity: 0.92; background: linear-gradient(to bottom, color-mix(in srgb, var(--palette-brand-shade) 45%, transparent) 0%, transparent 28%, var(--palette-brand) 100%); }

/* The figures of a plan, on the band: SummaryCard.kt without its own fill. */
.summary-card--on-band { background: none; box-shadow: inset 0 0 0 1px var(--palette-on-brand-faint); }
@media (min-width: 768px) {
  .summary-card--on-band { min-inline-size: var(--web-aside); }
}

/* A region's map where a country has its flag (PlansHero.kt, PackageDisc.kt): white on clear, in a ring. */
.package-disc { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--package-disc-size); block-size: var(--package-disc-size); border-radius: 50%; overflow: hidden; background: var(--package-disc-on-brand-fill); color: var(--package-disc-on-brand-tint); }
.package-disc .icon { --icon-size: var(--package-disc-icon-size); }
.package-disc img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.package-disc--on-white { background: var(--plan-details-badge-fill); color: var(--package-disc-on-white-tint); }
.package-disc--ring { box-shadow: 0 0 0 var(--plans-hero-map-ring-width) var(--plans-hero-map-ring-color); background: var(--palette-on-brand-faint); }
.package-disc--50 { --package-disc-size: var(--plan-details-flag-size); --package-disc-icon-size: var(--plan-details-badge-icon-size); }
.package-disc--70 { --package-disc-size: var(--plans-hero-flag-size); --package-disc-icon-size: var(--plans-hero-badge-icon-size); }

/* The page's body: the container that follows the band and climbs onto its foot.
   On a phone it is the apps' white page with a round top; from a tablet up it is clear, and its panels are the cards. */
.band-body { position: relative; z-index: 1; margin-block-start: calc(var(--band-rise) * -1); padding-block-start: var(--spacing-lg); background: var(--palette-background); border-start-start-radius: var(--radius-lg); border-start-end-radius: var(--radius-lg); }
.band-body__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-sm); margin-block-end: var(--spacing-lg); }
.band-body__bar > * { flex: 1 1 100%; }

/* A panel: one group of the page. Plain on a phone, a white card from a tablet up. */
.panel { display: flex; flex-direction: column; gap: var(--panel-gap, var(--spacing-lg)); min-inline-size: 0; }
.panel + .panel { margin-block-start: var(--spacing-xl); }
.panel--tight { --panel-gap: var(--spacing-sm); }
.panel__title { color: var(--plans-heading-color); font: var(--plans-heading-style) var(--font-family); }
.panel__lede { max-inline-size: 64ch; margin-block-start: calc(var(--plans-heading-to-body) - var(--panel-gap, var(--spacing-lg))); color: var(--plans-body-color); font: var(--plans-body-style) var(--font-family); line-height: var(--plans-body-line-height); }
.panel__note { color: var(--plans-note-color); font: var(--plans-note-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
.panel__ending { display: flex; flex-direction: column; gap: var(--spacing-xs); }

/* SectionHeader.kt inside a panel: the title keeps its size at every width. */
.section-header--panel { min-block-size: 0; margin-block-end: 0; gap: var(--plans-section-header-icon-to-title); }
.section-header--panel .section-header__icon { color: var(--plans-section-header-icon-tint); --icon-size: var(--plans-section-header-icon-height); }
.section-header--panel .section-header__title { color: var(--plans-section-header-title-color); font: var(--plans-section-header-title-style) var(--font-family); }

@media (min-width: 768px) {
  .page-band { padding-block: var(--spacing-md) calc(var(--band-rise) + var(--spacing-xl)); }
  .page-band--bar { padding-block-end: calc(var(--band-rise) + var(--band-bar) + var(--spacing-lg) + var(--spacing-xl)); }
  .page-band--bare { --band-height: 104px; }
  .page-band__inner { gap: var(--spacing-md); }
  .page-band__back { padding-inline-end: var(--spacing-md); color: var(--palette-on-brand-soft); }
  .page-band__back:hover { color: var(--palette-on-brand); }
  .page-band__back-label { display: inline; }
  .page-band__head, .page-band--stacked .page-band__head { flex-direction: row; flex-wrap: nowrap; align-items: center; }
  .page-band__text, .page-band--stacked .page-band__text { flex: 1 1 0; }
  .page-band--stacked .page-band__aside { align-self: auto; }
  .page-band__title { font: var(--typography-hero) var(--font-family); }
  .page-band__subtitle { font: var(--typography-subhead-large) var(--font-family); line-height: 1.5; color: var(--palette-on-brand-soft); }
  .page-band__picture { inset-inline: auto 0; inline-size: min(60%, 860px); -webkit-mask-image: linear-gradient(to var(--art-weak-side), #000 30%, transparent 100%); mask-image: linear-gradient(to var(--art-weak-side), #000 30%, transparent 100%); }
  .page-band--picture::after { opacity: 1; background: linear-gradient(to bottom, transparent 55%, color-mix(in srgb, var(--palette-brand-shade) 70%, transparent) 100%); }

  .band-body { padding-block-start: 0; background: none; border-radius: 0; }
  .band-body--bar { margin-block-start: calc((var(--band-rise) + var(--band-bar) + var(--spacing-lg)) * -1); }
  .band-body__bar { min-block-size: var(--band-bar); flex-wrap: nowrap; }
  .band-body__bar > * { flex: 0 1 auto; }

  .panel { padding: var(--panel-padding); border-radius: var(--panel-radius); background: var(--palette-background); box-shadow: var(--panel-shadow); }
  .panel + .panel { margin-block-start: var(--spacing-lg); }
  .panel--clear { padding: 0; border-radius: 0; background: none; box-shadow: none; }
}
@media (min-width: 1100px) {
  /* The side column written first: it comes first on a phone, and still stands at the far side on a desktop. */
  .layout-split--aside-first > .layout-split__aside { grid-column: 2; grid-row: 1; }
  .layout-split--aside-first > .layout-split__main { grid-column: 1; grid-row: 1; }
}

/* SegmentedControl.kt and the stepper, standing on the band from a tablet up: white seen through, the chosen one white. */
@media (min-width: 768px) {
  .segmented-control--on-band { background: var(--palette-on-brand-faint); -webkit-backdrop-filter: blur(var(--spacing-xs)); backdrop-filter: blur(var(--spacing-xs)); }
  .segmented-control--on-band .segmented-control__segment { color: var(--palette-on-brand); }
  .segmented-control--on-band .segmented-control__segment:hover { color: var(--palette-on-brand); background: var(--palette-on-brand-faint); }
  .segmented-control--on-band .segmented-control__segment[aria-selected="true"] { background: var(--palette-on-brand); color: var(--palette-brand); }
}

/* ==========================================================================
   2. The plans of a destination
   ========================================================================== */

/* The plan cards of a country: one column on a phone, two from a tablet up. */
.plan-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--plans-card-gap); }
@media (min-width: 768px) {
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-md); }
}
@media (min-width: 1100px) {
  .plan-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The pictures behind a banner or a row are drawn for a right-to-left page, their subject at their own
   left end: each keeps that end and is turned round on a left-to-right page, as in the apps. */
.promo-banner__picture, .feature-banner__picture, .builder-banner__picture, .estimate-card__picture, .global-plan-row__picture, .family-plan-row__picture {
  position: absolute; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: var(--art-strong-side) center; transform: scaleX(var(--mirror));
}

/* PromoBanner.kt: the unlimited tab's banner. A dark picture, a pill, a title and a line. */
.promo-banner { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--promo-banner-gap); min-block-size: var(--promo-banner-height); padding: var(--spacing-md) var(--promo-banner-inset); border-radius: var(--promo-banner-radius); background: var(--palette-navy-deep); }
/* The picture's quiet end is where the words are: the navy rises there, so they can be read in any language. */
.promo-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to var(--inline-end), var(--palette-navy-deep) 42%, transparent 88%); }
.promo-banner__title { max-inline-size: max(var(--promo-banner-title-max-width), 58%); color: var(--promo-banner-title-color); font: var(--promo-banner-title-style) var(--font-family); }
.promo-banner__body { max-inline-size: max(var(--promo-banner-body-max-width), 58%); color: var(--promo-banner-body-color); font: var(--promo-banner-body-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
@media (min-width: 768px) {
  .promo-banner { min-block-size: calc(var(--promo-banner-height) + var(--spacing-xxl)); padding-inline: var(--spacing-xxl); }
  .promo-banner__title { font: var(--typography-title-large) var(--font-family); }
  .promo-banner__body { font: var(--typography-label-tall) var(--font-family); }
}

/* FeatureBanner.kt: the fixed tab's banner. A pale picture, a title, four features: a disc over two words. */
.feature-banner { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-md); min-block-size: var(--feature-banner-height); padding: var(--feature-banner-title-top) var(--feature-banner-inset); border-radius: var(--feature-banner-radius); background: var(--palette-brand-wash); }
.feature-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to var(--inline-end), var(--palette-brand-wash) 38%, transparent 80%); }
.feature-banner__title { max-inline-size: 58%; color: var(--feature-banner-fixed-title-color); font: var(--feature-banner-title-style) var(--font-family); }
.feature-banner__features { display: flex; gap: var(--feature-banner-feature-gap); }
.feature-banner__feature { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xs); min-inline-size: var(--feature-banner-feature-min-width); color: var(--feature-banner-fixed-label-color); font: var(--feature-banner-fixed-label-style) var(--font-family); text-align: center; white-space: pre-line; }
@media (min-width: 768px) {
  .feature-banner { justify-content: center; min-block-size: calc(var(--feature-banner-height) + var(--spacing-xl)); padding-inline: var(--spacing-xxl); }
  .feature-banner__features { gap: var(--spacing-xl); }
  .feature-banner__feature { flex-direction: row; text-align: start; }
}
/* The disc of a feature, on a banner and on a strip: the page names its colour, as FeatureStyle does. */
.feature-disc { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--feature-strip-circle-size); block-size: var(--feature-strip-circle-size); border-radius: 50%; background: var(--_disc, var(--palette-brand)); color: var(--palette-on-brand); }
.feature-disc .icon { --icon-size: var(--feature-strip-features-1-icon-width); }
.feature-disc--duration { --_disc: var(--feature-banner-fixed-features-1-circle-fill); }
.feature-disc--sharing { --_disc: var(--feature-banner-fixed-features-2-circle-fill); }
.feature-disc--control { --_disc: var(--feature-banner-fixed-features-3-circle-fill); }
.feature-disc--sizes { --_disc: var(--feature-banner-fixed-features-4-circle-fill); }
.feature-disc--stable { --_disc: var(--feature-strip-features-1-circle-fill); }
.feature-disc--hotspot { --_disc: var(--feature-strip-features-2-circle-fill); }
.feature-disc--coverage { --_disc: var(--feature-strip-features-3-circle-fill); }
.feature-disc--instant { --_disc: var(--feature-strip-features-4-circle-fill); }

/* FeatureStrip (Banners.kt): the unlimited tab's four features on a pale panel, each a disc beside two words. */
.feature-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--spacing-md) var(--feature-strip-min-gap); align-items: center; min-block-size: var(--feature-strip-height); padding: var(--spacing-md) var(--feature-strip-inset); border-radius: var(--feature-strip-radius); background: var(--feature-strip-fill); }
.feature-strip__feature { display: flex; align-items: center; gap: var(--feature-strip-circle-to-label); color: var(--feature-strip-label-color); font: var(--feature-strip-label-style) var(--font-family); white-space: pre-line; }

/* CountriesRow.kt: the countries a package works in, as a row that opens their list. */
.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-radius: var(--countries-row-radius); background: var(--countries-row-fill); box-shadow: inset 0 0 0 var(--countries-row-border-width) var(--countries-row-border-color); text-align: start; cursor: pointer; transition: box-shadow var(--motion-selection-millis) var(--motion-easing); }
.countries-row:hover { box-shadow: inset 0 0 0 2px var(--palette-brand-outline); }
.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); }
.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 package's plan as a row. The row opens the review of the plan;
   the circle at its far end is a control of its own and opens the plan's details. */
.global-plan-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--plans-row-gap); }
.global-plan-row { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: stretch; 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); 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__plan { flex: 1 1 0; min-inline-size: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); padding-inline-start: var(--global-plan-row-size-inset); text-align: start; border-start-start-radius: inherit; border-end-start-radius: inherit; }
.global-plan-row__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-xxs) var(--global-plan-row-size-to-validity); }
.global-plan-row__size { color: var(--global-plan-row-size-color); 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); }
.global-plan-row__cost { display: flex; flex-direction: column; align-items: flex-start; 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); }
.global-plan-row__details { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: calc(var(--global-plan-row-circle-size) + var(--global-plan-row-price-to-circle) + var(--global-plan-row-circle-trailing-inset)); min-block-size: var(--global-plan-row-details-touch-target); padding-inline: var(--global-plan-row-price-to-circle) var(--global-plan-row-circle-trailing-inset); color: var(--global-plan-row-details-icon-tint); border-start-end-radius: inherit; border-end-end-radius: inherit; }
.global-plan-row__details > span { display: inline-flex; align-items: center; justify-content: center; 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); transition: box-shadow var(--motion-selection-millis) var(--motion-easing); }
.global-plan-row__details:hover > span { box-shadow: 0 0 0 2px var(--palette-brand); }
.global-plan-row__details .icon { --icon-size: var(--global-plan-row-details-icon-size); }
/* The most requested plan: taller, on its picture, in white, with its badge. */
.global-plan-row--badged { --web-focus-color: var(--palette-on-brand); min-block-size: var(--global-plan-row-badged-height); background: var(--palette-brand); }
.global-plan-row--badged .global-plan-row__plan { align-items: flex-end; padding-block-end: var(--spacing-md); }
.global-plan-row--badged .global-plan-row__size, .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: var(--global-plan-row-badged-text-color); }
.global-plan-row__badge { position: absolute; inset-block-start: var(--global-plan-row-badge-top); inset-inline-start: var(--global-plan-row-badge-inset); display: inline-flex; align-items: center; gap: var(--global-plan-row-badge-image-to-label); block-size: var(--global-plan-row-badge-height); padding-inline: var(--global-plan-row-badge-padding); border-radius: var(--global-plan-row-badge-radius); background: var(--global-plan-row-badge-fill); color: var(--global-plan-row-badge-label-color); font: var(--global-plan-row-badge-label-style) var(--font-family); white-space: nowrap; pointer-events: none; }
.global-plan-row__badge img { inline-size: var(--global-plan-row-badge-image-width); block-size: var(--global-plan-row-badge-image-height); }
.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); }
@media (min-width: 768px) {
  .global-plan-row__plan { padding-inline-start: var(--spacing-xl); }
  .global-plan-row__cost { min-inline-size: 110px; }
}

/* A day option's "most requested" badge (DayOptions.kt, DayOptionTokens): a dark pill with a flame, at the cell's
   leading top corner. It hugs its words and never reaches the mark at the other corner: where the cell is narrow
   the words are drawn smaller, down to the tokens' smallest scale, and past that they are cut at the pill's end. */
.day-option:has(> .day-option__badge) { container-type: inline-size; }
.day-option__badge {
  /* What the cell keeps beside the pill: its inset, the gap to the mark, the mark and the mark's inset. */
  --_beside-pill: calc(var(--day-option-badge-inset) + var(--day-option-badge-to-mark) + var(--day-option-mark-size) + var(--day-option-mark-trailing-inset));
  /* And beside the words, counted from the cell's own padding: that, the pill's two ends, the flame and its gap. */
  --_beside-words: calc(var(--_beside-pill) + 2 * var(--day-option-badge-padding) + var(--day-option-badge-image-width) + var(--day-option-badge-image-to-label) - 2 * var(--spacing-sm));
  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);
  max-inline-size: calc(100% - var(--_beside-pill)); block-size: var(--day-option-badge-height); padding-inline: var(--day-option-badge-padding);
  overflow: hidden; 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;
  /* The longest wording the catalogues may hold (DayOptionTokens.badgeLabelMaxLetters) is eight and a half times its letters' size wide. */
  font-size: clamp(calc(var(--typography-micro-strong-size) * var(--day-option-badge-label-min-scale)), calc((100cqi - var(--_beside-words)) / 8.5), var(--typography-micro-strong-size));
}
.day-option__badge img { flex: none; inline-size: var(--day-option-badge-image-width); block-size: var(--day-option-badge-image-height); }
.day-group + .day-group { margin-block-start: calc(var(--day-group-gap) - var(--panel-gap, var(--spacing-lg))); }
/* How many cells run to a row on a phone is DayOptionTokens.columnsFor's answer: the page names it. */
.day-group--of-2 { --day-option-max-columns: 2; }
.day-group--of-3 { --day-option-max-columns: 3; }
/* A panel that holds the badge gives its cells the room for it: under the mark, and across. Its cells run as many
   to a row as the page names while each is wide enough for the badge's words, and fewer where it is not. */
.day-group--badged .day-option { padding-block-start: calc(var(--day-option-inset) + var(--spacing-md)); }
.day-group__options { --_badged-tracks: repeat(auto-fill, minmax(max(var(--badged-cell), calc((100% - (var(--day-option-max-columns) - 1) * var(--day-option-column-gap)) / var(--day-option-max-columns) - 1px)), 1fr)); }
.day-group--badged .day-group__options { grid-template-columns: var(--_badged-tracks); }
@media (min-width: 768px) {
  /* In a panel the cells of every group are one width: four to a row, and where one of the panel's cells carries
     the badge, as many as have the room for it, in every group of the panel. */
  .panel .day-group { --day-option-max-columns: 4; }
  .panel .day-group__options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .panel:has(.day-group--badged) .day-group__options { grid-template-columns: var(--_badged-tracks); }
}
/* A package's one panel of days has no name: its cells start at its top. */
.day-group--unnamed .day-group__options { margin-block-start: 0; }

/* CoveredCountriesSheet.kt: the countries a package works in, as tiles. Said, not pressed.
   A sheet on a phone; on a desktop the same tiles stand in the page's side column. */
.covered-countries { display: grid; grid-template-columns: repeat(var(--covered-countries-sheet-columns), minmax(0, 1fr)); gap: var(--covered-countries-sheet-gap); }
.covered-countries__tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-sm); min-block-size: var(--covered-countries-sheet-tile-height); padding: var(--spacing-sm) var(--covered-countries-sheet-name-padding); border-radius: var(--covered-countries-sheet-tile-radius); background: var(--covered-countries-sheet-tile-fill); color: var(--covered-countries-sheet-name-color); font: var(--covered-countries-sheet-name-style) var(--font-family); text-align: center; }
.covered-countries__tile .flag { --flag-size: var(--covered-countries-sheet-flag-size); }

/* ==========================================================================
   3. Plan details: the compatible devices sheet
   ========================================================================== */

/* DevicesSheet.kt: its title, its close, its field, then one row a brand, which opens on its models.
   As in the apps the sheet takes a share of the height it is given whatever it lists, so it does not jump while
   something is typed, and its title, its close and its field stay put: only what it lists scrolls.
   (On a board of states it is as tall as what it holds: see .variant, at the end.) */
.sheet:has(> .sheet__head) { display: flex; flex-direction: column; block-size: calc(100% * var(--devices-sheet-height-fraction)); overflow: hidden; }
.sheet__head { flex: none; display: grid; grid-template-columns: var(--sizing-min-touch-target) minmax(0, 1fr) var(--sizing-min-touch-target); align-items: center; padding: var(--spacing-sm) var(--spacing-xs) 0; }
.sheet__head .sheet__title { grid-column: 2; color: var(--devices-sheet-title-color); font: var(--devices-sheet-title-style) var(--font-family); }
.sheet__head .sheet__close { position: static; grid-column: 3; color: var(--devices-sheet-close-tint); }
.sheet__head .sheet__close .icon { --icon-size: var(--devices-sheet-close-size); }
/* The field keeps a little clear under it, so that what scrolls is cut a step away from it and not at its edge. */
.sheet__search { flex: none; padding: var(--spacing-md) var(--devices-sheet-search-side-inset) var(--spacing-xs); }
.sheet__content { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--devices-sheet-search-to-results); padding: calc(var(--devices-sheet-search-to-results) - var(--spacing-xs)) var(--devices-sheet-list-inset) var(--spacing-xl); }
.device-brand { border-block-end: var(--devices-sheet-separator-height) solid var(--devices-sheet-separator-color); }
.device-brand__name { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); min-block-size: var(--devices-sheet-brand-header-height); color: var(--devices-sheet-brand-name-color); font: var(--devices-sheet-brand-name-style) var(--font-family); cursor: pointer; list-style: none; }
.device-brand__name::-webkit-details-marker { display: none; }
.device-brand__name .icon { color: var(--devices-sheet-caret-tint); --icon-size: var(--devices-sheet-caret-width); transition: transform var(--motion-selection-millis) var(--motion-easing); }
.device-brand[open] .device-brand__name .icon { transform: rotate(180deg); }
.device-brand__models { display: flex; flex-wrap: wrap; gap: var(--devices-sheet-chip-gap); padding-block: var(--devices-sheet-header-to-chips) var(--devices-sheet-open-bottom); }
.device-chip { display: inline-flex; align-items: center; block-size: var(--devices-sheet-chip-height); padding-inline: var(--devices-sheet-chip-padding); border-radius: var(--devices-sheet-chip-radius); background: var(--devices-sheet-chip-fill); color: var(--devices-sheet-chip-label-color); font: var(--devices-sheet-chip-label-style) var(--font-family); white-space: nowrap; }
.device-brand__note { flex: 1 1 100%; margin-block-start: calc(var(--devices-sheet-chips-to-note) - var(--devices-sheet-chip-gap)); color: var(--devices-sheet-note-color); font: var(--devices-sheet-note-style) var(--font-family); line-height: var(--devices-sheet-note-line-height); }
.placeholder--device-brand { block-size: var(--devices-sheet-placeholder-height); border-radius: var(--devices-sheet-placeholder-radius); background: var(--devices-sheet-placeholder-fill); }
.placeholder--fact-group { block-size: var(--plan-details-placeholder-group-height); border-radius: var(--plan-details-placeholder-radius); background: var(--plan-details-placeholder-fill); }
/* An empty shape on the band: white seen through. */
.placeholder--on-band { min-inline-size: 280px; background: var(--palette-on-brand-faint); }
@media (min-width: 768px) {
  /* On a wide window the list of devices is a dialog with room for its chips. */
  .sheet--wide { max-inline-size: calc(var(--web-sheet-width) * 1.5); }
}

/* ==========================================================================
   4. The plan builder
   ========================================================================== */

/* The builder's banner (PlanBuilderScreen.kt): a pale picture, with a title and a line at the reading side. */
.builder-banner { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-sm); min-block-size: var(--plan-builder-banner-height); padding: var(--spacing-md) var(--plan-builder-banner-text-inset); border-radius: var(--plan-builder-banner-radius); background: var(--palette-brand-wash); }
.builder-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to var(--inline-end), var(--palette-brand-wash) 40%, transparent 82%); }
.builder-banner__title { color: var(--plan-builder-banner-title-color); font: var(--plan-builder-banner-title-style) var(--font-family); }
.builder-banner__subtitle { max-inline-size: 50%; color: var(--plan-builder-banner-subtitle-color); font: var(--plan-builder-banner-subtitle-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
@media (min-width: 768px) {
  .builder-banner { min-block-size: calc(var(--plan-builder-banner-height) + var(--spacing-xl)); padding-inline: var(--spacing-xxl); }
  .builder-banner__title { font: var(--typography-display) var(--font-family); }
  .builder-banner__subtitle { max-inline-size: 44ch; font: var(--typography-body-loose) var(--font-family); }
}

/* Stepper: the builder's three steps. A step already passed is a control and takes a finger's
   height; its drawing is its inner shape, as the voucher's button is. */
.stepper { display: flex; align-items: center; gap: var(--stepper-segment-gap); min-block-size: var(--stepper-height); padding-inline: var(--stepper-segment-inset); border-radius: var(--stepper-radius); background: var(--stepper-fill); }
.stepper__step { position: relative; flex: 1 1 0; min-inline-size: 0; display: flex; align-items: center; justify-content: center; min-block-size: var(--sizing-min-touch-target); margin-block: calc((var(--stepper-height) - var(--sizing-min-touch-target)) / 2); color: var(--stepper-label-color); font: var(--stepper-label-style) var(--font-family); text-align: center; }
.stepper__step > span { display: block; inline-size: 100%; block-size: var(--stepper-segment-height); padding-inline: var(--spacing-xxs); border-radius: var(--stepper-segment-radius); line-height: var(--stepper-segment-height); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background-color var(--stepper-change-millis) var(--motion-easing), color var(--stepper-change-millis) var(--motion-easing); }
.stepper__step[aria-current="step"] > span { background: var(--stepper-current-fill); color: var(--stepper-current-label-color); font: var(--stepper-current-label-style) var(--font-family); line-height: var(--stepper-segment-height); }
a.stepper__step, button.stepper__step { cursor: pointer; }
a.stepper__step:hover, button.stepper__step:hover { color: var(--palette-brand); }
/* A rule between two steps neither of which is the current one. */
.stepper__step:not([aria-current="step"]) + .stepper__step:not([aria-current="step"])::before { content: ""; position: absolute; inset-inline-start: calc((var(--stepper-segment-gap) + var(--stepper-divider-width)) / -2); inline-size: var(--stepper-divider-width); block-size: var(--stepper-divider-height); background: var(--stepper-divider-color); }
@media (max-width: 767px) {
  /* On a phone the three share the window's width, never more: on a narrow one their words are drawn a little smaller. */
  .stepper { container-type: inline-size; min-inline-size: 0; }
  .stepper .stepper__step > span { font-size: min(1em, 4.1cqi); }
}
@media (min-width: 768px) {
  .stepper { min-inline-size: 480px; }
  .stepper--on-band { background: var(--palette-on-brand-faint); -webkit-backdrop-filter: blur(var(--spacing-xs)); backdrop-filter: blur(var(--spacing-xs)); }
  .stepper--on-band .stepper__step { color: var(--palette-on-brand); }
  .stepper--on-band a.stepper__step:hover, .stepper--on-band button.stepper__step:hover { color: var(--palette-on-brand); }
  .stepper--on-band .stepper__step[aria-current="step"] > span { background: var(--palette-on-brand); color: var(--palette-brand); }
  .stepper--on-band .stepper__step:not([aria-current="step"]) + .stepper__step:not([aria-current="step"])::before { background: var(--palette-on-brand-faint); }
}

/* QuestionCard.kt: one question of the builder and its answers, in one of four shapes. */
.question-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--plan-builder-section-gap); }
.question-card { display: flex; flex-direction: column; gap: var(--question-card-header-to-answers); padding: var(--question-card-padding); border-radius: var(--question-card-radius); background: var(--question-card-fill); }
.question-card__header { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--question-card-icon-to-title); row-gap: var(--spacing-xxs); }
.question-card__icon { grid-row: span 2; align-self: start; color: var(--question-card-icon-tint); --icon-size: var(--question-card-icon-size); }
.question-card__title { align-self: center; color: var(--question-card-title-color); font: var(--question-card-title-style) var(--font-family); }
.question-card__icon:has(+ .question-card__title:last-child) { grid-row: auto; }
.question-card__suffix { margin-inline-start: var(--spacing-xs); color: var(--question-card-suffix-color); font: var(--question-card-suffix-style) var(--font-family); }
.question-card__subtitle { grid-column: 2; color: var(--question-card-subtitle-color); font: var(--question-card-subtitle-style) var(--font-family); }
.question-card__answers { display: grid; gap: var(--question-card-option-gap); }
.question-card__answers--chips { grid-template-columns: repeat(var(--question-card-chips-per-row), minmax(0, 1fr)); gap: var(--question-card-chip-gap); }
.question-card__answers--tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--question-card-tile-gap-of-three); }
.question-card__answers--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--question-card-tile-gap-of-two); }
/* An answer: white on the card, outlined once chosen, with a mark that says so. */
.answer { position: relative; display: flex; align-items: center; justify-content: center; min-block-size: var(--question-card-chip-height); border-radius: var(--question-card-answer-radius); background: var(--question-card-answer-fill); color: var(--question-card-tile-label-color); text-align: center; cursor: pointer; transition: box-shadow var(--motion-selection-millis) var(--motion-easing); }
.answer:hover { box-shadow: inset 0 0 0 var(--question-card-selected-border-width) var(--palette-brand-outline); }
.answer[aria-pressed="true"], .answer[aria-checked="true"] { box-shadow: inset 0 0 0 var(--question-card-selected-border-width) var(--question-card-selected-border-color); }
.answer--chip { color: var(--question-card-chip-color); font: var(--question-card-chip-style) var(--font-family); }
.answer--chip[aria-pressed="true"], .answer--chip[aria-checked="true"] { color: var(--question-card-chip-selected-color); }
.answer--tile { flex-direction: column; gap: var(--spacing-sm); min-block-size: var(--question-card-tile-height); padding: var(--spacing-sm) var(--spacing-xxs); font: var(--question-card-tile-label-style) var(--font-family); }
.answer--option { justify-content: flex-start; gap: var(--question-card-option-picture-to-name); min-block-size: var(--question-card-option-height); padding: var(--spacing-xs) var(--question-card-option-inset); font: var(--question-card-option-name-style) var(--font-family); text-align: start; }
.answer__picture { flex: none; inline-size: var(--question-card-tile-picture-size); block-size: var(--question-card-tile-picture-size); object-fit: contain; }
.answer--option .answer__picture { inline-size: var(--question-card-option-picture-size); block-size: var(--question-card-option-picture-size); }
.answer .icon { --icon-size: var(--question-card-tile-picture-size); color: var(--plan-builder-sharing-yes-tint); }
.answer .icon.is-off { color: var(--plan-builder-sharing-no-tint); }
/* An option's name and its hint: at the two ends of one line where the row holds both, and the hint under the name where it does not. */
.answer__text { flex: 1 1 0; min-inline-size: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--spacing-xxs) var(--question-card-option-picture-to-name); }
.answer__hint { color: var(--question-card-option-hint-color); font: var(--question-card-option-hint-style) var(--font-family); }
/* In a narrow list every option stacks the two, so that the rows of one question stay alike. */
.question-card__answers { container-type: inline-size; }
@container (max-width: 310px) {
  .answer__text { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; }
}
/* A tile's name never leaves its tile: in a narrow one it is drawn smaller, down to the tokens' smallest scale. */
.answer--tile { container-type: inline-size; }
.answer--tile .answer__name { flex: none; max-inline-size: 100%; font-size: clamp(calc(1em * var(--sizing-min-text-scale)), 17cqi, 1em); overflow-wrap: anywhere; }
/* The mark: an empty disc, or the tick. In a tile's corner, at the end of a row. */
.answer--tile::after, .answer--option::after { content: ""; flex: none; inline-size: var(--question-card-tick-size); block-size: var(--question-card-tick-size); border-radius: 50%; background: var(--question-card-unticked-fill) center / contain no-repeat; }
.answer--tile::after { position: absolute; inset-block-start: var(--question-card-tile-tick-inset); inset-inline-end: var(--question-card-tile-tick-inset); }
.answer--option::after { margin-inline-start: var(--question-card-option-hint-to-tick); }
.answer--tile[aria-pressed="true"]::after, .answer--tile[aria-checked="true"]::after, .answer--option[aria-pressed="true"]::after, .answer--option[aria-checked="true"]::after { background-image: url("../assets/pictures/check_circle.svg"); }
/* The destination row: a few flags, "Browse countries" or the chosen country, an arrow. It opens the list of countries. */
.destination-row { display: flex; align-items: center; gap: var(--question-card-row-flags-to-label); inline-size: 100%; min-block-size: var(--question-card-row-field-height); padding-inline: var(--question-card-row-field-inset); border-radius: var(--question-card-answer-radius); background: var(--question-card-answer-fill); color: var(--question-card-row-label-color); font: var(--question-card-row-label-style) var(--font-family); text-align: start; cursor: pointer; transition: box-shadow var(--motion-selection-millis) var(--motion-easing); }
.destination-row:hover { box-shadow: inset 0 0 0 var(--question-card-selected-border-width) var(--palette-brand-outline); }
.destination-row.is-chosen { color: var(--question-card-row-chosen-color); }
.destination-row__label { flex: 1 1 0; min-inline-size: 0; }
.destination-row .countries-row__flags .flag + .flag { margin-inline-start: calc(var(--question-card-row-flag-overlap) * -1); }
.destination-row .icon { color: var(--question-card-row-arrow-tint); inline-size: var(--question-card-row-arrow-width); block-size: var(--question-card-row-arrow-height); }
@media (min-width: 768px) {
  /* Two across where each has the room for its answers, and one to a row where it has not: beside a desktop's side column. */
  .question-grid { grid-template-columns: repeat(auto-fit, minmax(max(var(--question-min), calc(50% - var(--spacing-lg))), 1fr)); gap: var(--spacing-lg); align-items: start; }
  /* A question whose tiles run to more than one row takes the grid's whole width, and its tiles one row where there is room:
     the nine things a phone is used for. */
  .question-grid > .question-card:has(> .question-card__answers--tiles > .answer:nth-child(4)), .question-grid > .question-card:has(> .question-card__answers--pair > .answer:nth-child(3)) { grid-column: 1 / -1; }
  .question-grid > .question-card > .question-card__answers--tiles:has(> .answer:nth-child(4)) { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  /* A tall list of options has the two questions after it beside it, one under the other. */
  .question-grid > .question-card:has(> .question-card__answers > .answer--option) { grid-row: span 2; }
}

/* What a step ends with: its button, and under it a quieter way. As wide as the column on a phone. */
.step-ending { display: flex; flex-direction: column; gap: var(--spacing-xs); }
@media (min-width: 768px) {
  .step-ending--end { align-self: flex-end; min-inline-size: 320px; }
}

/* Step 2's estimate: a picture, the amount a day, and what it is. */
.estimate-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-sm); min-block-size: var(--plan-builder-estimate-height); padding: var(--spacing-md) var(--plan-builder-estimate-text-inset); border-radius: var(--plan-builder-estimate-radius); background: var(--palette-brand-wash); }
.estimate-card__value { color: var(--plan-builder-estimate-value-color); font: var(--plan-builder-estimate-value-style) var(--font-family); }
.estimate-card__value small { margin-inline-start: var(--plan-builder-estimate-value-to-unit); font: var(--plan-builder-estimate-unit-style) var(--font-family); }
.estimate-card__label { max-inline-size: 55%; color: var(--plan-builder-estimate-label-color); font: var(--plan-builder-estimate-label-style) var(--font-family); }

/* Step 3: the mark, the headline and the sentence over the recommended plan. */
.match-intro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.match-intro__picture { inline-size: var(--plan-builder-match-size); block-size: var(--plan-builder-match-size); }
.match-intro__headline { margin-block-start: var(--plan-builder-match-to-headline); color: var(--plan-builder-headline-color); font: var(--plan-builder-headline-style) var(--font-family); }
.match-intro__body { max-inline-size: var(--plan-builder-body-width); margin-block-start: var(--plan-builder-headline-to-body); color: var(--plan-builder-body-color); font: var(--plan-builder-body-style) var(--font-family); line-height: var(--typography-body-loose-line); }
/* Why the plan fits: ticked sentences on a question card's shell. */
.why-list { display: flex; flex-direction: column; gap: var(--plan-builder-why-line-gap); padding-block: var(--spacing-xs); padding-inline-start: var(--spacing-sm); }
.why-list li { display: flex; align-items: flex-start; gap: var(--plan-builder-why-tick-to-text); color: var(--plan-builder-why-text-color); font: var(--plan-builder-why-text-style) var(--font-family); line-height: var(--typography-body-loose-line); }
.why-list .icon { margin-block-start: 3px; color: var(--plan-builder-why-tick-tint); --icon-size: var(--plan-builder-why-tick-size); }
/* The feature strip of the builder's review card (PlanReviewCard.kt): three icons and their words, on white seen through. */
.plan-review-card__features { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center; gap: var(--spacing-xs); min-block-size: var(--plan-review-card-strip-height); margin-inline: calc(var(--plan-review-card-strip-inset) - var(--plan-review-card-inset)); margin-block-end: calc(var(--plan-review-card-strip-inset) - var(--plan-review-card-values-to-bottom)); padding-inline: var(--spacing-sm); border-radius: var(--plan-review-card-strip-radius); background: var(--plan-review-card-strip-fill); }
.plan-review-card__feature { display: flex; align-items: center; justify-content: center; gap: var(--plan-review-card-strip-icon-to-label); color: var(--plan-review-card-strip-label-color); font: var(--plan-review-card-strip-label-style) var(--font-family); text-align: start; }
.plan-review-card__feature .icon { color: var(--plan-review-card-strip-icon-tint); }
/* On a narrow phone the three keep clear of each other: a long word takes room from its neighbours, and all are drawn a little smaller. */
.plan-review-card__features { container-type: inline-size; grid-auto-columns: minmax(min-content, 1fr); }
.plan-review-card__feature { font-size: min(var(--typography-label-size), 4.2cqi); }
.placeholder--review-card { block-size: var(--plan-builder-placeholder-card-height); border-radius: var(--plan-builder-placeholder-card-radius); }
.placeholder--why { block-size: var(--plan-builder-placeholder-why-height); border-radius: var(--plan-builder-placeholder-why-radius); }
.placeholder--match { inline-size: var(--plan-builder-placeholder-circle); block-size: var(--plan-builder-placeholder-circle); border-radius: 50%; margin-inline: auto; }

/* ==========================================================================
   5. Checkout, paying and the result
   ========================================================================== */

/* The voucher's heading over its field (CheckoutTokens). */
.voucher-heading { margin-block-end: var(--checkout-voucher-heading-to-field); color: var(--checkout-voucher-heading-color); font: var(--checkout-voucher-heading-style) var(--font-family); }
/* The declarations stand a little apart, as a pair. */
.declarations { display: flex; flex-direction: column; gap: calc(var(--checkout-declaration-gap) - var(--spacing-md)); }
.declarations .declaration + .declaration { margin-block-start: 0; }
/* OfferCard.kt on a wide column: the words keep to a readable measure and the panel to its own width. */
@media (min-width: 768px) {
  .offer-card { padding-inline: var(--spacing-xl); }
  .offer-card__body { font: var(--typography-subhead) var(--font-family); line-height: 1.5; }
}
/* A plan's review card inside a side panel: its three figures share a narrow column. */
.plan-review-card--side { padding-inline: var(--spacing-md); }
/* A figure of the review card is never broken over two lines ("unlimited" in Arabic is two words): a long one takes
   room from the other two, and where the card is too narrow for the three, all are drawn a little smaller. */
.plan-review-card__figures { container-type: inline-size; grid-auto-columns: minmax(min-content, 1fr); column-gap: var(--spacing-xs); }
.plan-review-card__value { white-space: nowrap; font-size: min(var(--typography-title-large-size), 8cqi); }

.placeholder--review { block-size: var(--checkout-placeholder-height); border-radius: var(--checkout-placeholder-radius); background: var(--checkout-placeholder-fill); }
.placeholder--price-row { block-size: var(--family-checkout-price-row-height); border-radius: var(--radius-md); }
/* A panel that holds one line while something is under way: the line stands in its middle. */
.panel--centred { justify-content: center; min-block-size: 240px; }
/* A panel that holds one form and nothing beside it (the payment provider's): no wider than a form reads well, in the middle of the page. */
.panel--form { inline-size: 100%; max-inline-size: 560px; margin-inline: auto; }

/* The total of an order (PayingScreen.kt): a label and the amount, at the two ends of a line. */
.total-row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); }
.total-row__label { color: var(--paying-total-label-color); font: var(--paying-total-label-style) var(--font-family); }
.total-row__amount { color: var(--paying-total-color); font: var(--paying-total-style) var(--font-family); }
/* One line said while something is under way (PayingScreen.kt's Working): centred, and said aloud when it changes. */
.status-line { color: var(--paying-status-color); font: var(--paying-status-style) var(--font-family); text-align: center; }

/* Where the payment provider draws its own form: the card's fields, the wallets, its own messages.
   Nothing inside it is ours: the page gives it this room and waits. Web only: in the apps it is the provider's sheet. */
.payment-mount { display: flex; flex-direction: column; gap: var(--spacing-md); padding: var(--spacing-lg); border-radius: var(--radius-card); background: var(--palette-background); box-shadow: inset 0 0 0 1px var(--palette-brand-outline); }
/* While the provider's fields arrive the room keeps the height of a card's form, so the button under it does not jump. */
.payment-mount--arriving { min-block-size: 320px; }
.payment-mount.is-busy { opacity: var(--button-disabled-opacity); }
/* The part of the room the provider fills. Nothing of ours stands in it. */
.payment-mount__fields { display: flex; flex-direction: column; gap: var(--spacing-md); min-block-size: 0; }
/* What the provider said of the last try (a declined card), in its own words: the one line of ours inside the room. */
.payment-mount__message { color: var(--palette-error); font: var(--typography-body-medium) var(--font-family); }
.payment-mount__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-sm); }
.placeholder--field { block-size: var(--form-field-height); border-radius: var(--form-field-radius); }
.placeholder--button { block-size: var(--button-brand-height); border-radius: var(--button-brand-radius); }
.placeholder--still { animation: none; }

/* ResultSheet.kt's note: one sentence in a pale box, under the body. */
.result-sheet__note { align-self: stretch; display: flex; align-items: center; gap: var(--result-sheet-note-icon-to-text); min-block-size: var(--result-sheet-note-min-height); margin-block-start: var(--result-sheet-body-to-note); padding: var(--spacing-sm) var(--result-sheet-note-text-trailing-inset) var(--spacing-sm) var(--result-sheet-note-icon-inset); border-radius: var(--result-sheet-note-radius); background: var(--result-sheet-note-fill); color: var(--result-sheet-note-text-color); font: var(--result-sheet-note-text-style) var(--font-family); line-height: var(--typography-caption-loose-line); text-align: start; }
.result-sheet__note .icon { color: var(--result-sheet-note-icon-tint); --icon-size: var(--result-sheet-note-icon-size); }
.result-sheet--failed { padding-block-start: var(--result-sheet-failed-picture-top); }
.result-sheet--failed .result-sheet__picture { inline-size: var(--result-sheet-failed-picture-width); block-size: var(--result-sheet-failed-picture-height); }
.result-sheet--failed .result-sheet__title { margin-block-start: var(--result-sheet-failed-picture-to-title); }
.result-sheet--failed .result-sheet__body { max-inline-size: var(--result-sheet-failed-body-width); margin-block-start: var(--result-sheet-failed-title-to-body); }

/* ResultCard.kt: where a purchase stands when it is neither of the two sheets. A picture, a title,
   "Please wait...", a sentence, the order's number, and a button when there is something to do. */
.result-card { position: relative; display: flex; flex-direction: column; align-items: center; inline-size: 100%; max-inline-size: var(--web-sheet-width); min-block-size: var(--result-card-height); padding: var(--result-card-picture-top-with-button) var(--result-card-text-inset) var(--result-card-button-inset); border-radius: var(--result-card-radius); background: var(--result-card-fill); box-shadow: var(--elevation-floating); text-align: center; animation: sheet-in var(--result-card-open-millis) var(--motion-easing) both; }
/* With no button the picture stands lower, as the card that is about to leave by itself. */
.result-card--bare { padding-block-start: var(--result-card-picture-top); }
.result-card__picture { inline-size: var(--result-card-picture-size); block-size: var(--result-card-picture-size); }
.result-card__title { margin-block-start: var(--result-card-picture-to-title); color: var(--result-card-title-color); font: var(--result-card-title-style) var(--font-family); }
.result-card__wait { margin-block-start: var(--result-card-title-to-wait-with-button); color: var(--result-card-wait-color); font: var(--result-card-wait-style) var(--font-family); }
.result-card__body { margin-block-start: var(--result-card-wait-to-body-with-button); color: var(--result-card-body-color); font: var(--result-card-body-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.result-card__title + .result-card__body { margin-block-start: var(--result-card-title-to-wait-with-button); }
.result-card__order { margin-block-start: var(--result-card-to-order-line); color: var(--result-card-order-line-color); font: var(--result-card-order-line-style) var(--font-family); }
.result-card__text { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; padding-block-end: var(--spacing-xl); }
.result-card--plain { box-shadow: var(--panel-shadow); animation: none; }

/* ==========================================================================
   6. The family checkout
   ========================================================================== */

/* SampleNote (SpecialList.kt): one quiet line that says what is sample content. */
.sample-note { color: var(--sample-note-color); font: var(--sample-note-style) var(--font-family); text-align: center; }

/* FamilyPlanRow (SpecialList.kt): the family plan under review. Its size, two facts, its price. Not a control here. */
.family-plan-row { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); min-block-size: var(--family-plan-row-height); padding-inline: var(--family-plan-row-leading-inset) var(--family-checkout-plan-price-inset); border-radius: var(--family-plan-row-radius); background: var(--family-plan-row-placeholder-fill); }
.family-plan-row__plan { display: flex; flex-direction: column; gap: var(--spacing-sm); min-inline-size: 0; }
.family-plan-row__size { color: var(--family-plan-row-size-color); font: var(--family-plan-row-size-style) var(--font-family); }
.family-plan-row__facts { display: flex; flex-wrap: wrap; gap: var(--spacing-xxs) var(--family-plan-row-fact-gap); 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 { color: var(--family-plan-row-price-color); font: var(--family-plan-row-price-style) var(--font-family); }
.placeholder--family-plan-row { block-size: var(--family-checkout-placeholder-plan-height); border-radius: var(--family-checkout-placeholder-plan-radius); }

/* MemberTiles (FamilyParts.kt): one tile a place of the plan. A member's disc and name, or a free place to fill.
   Every tile opens "Who will use the plan?". */
.member-tiles { display: grid; grid-template-columns: repeat(var(--member-tile-per-row), minmax(0, 1fr)); gap: var(--member-tile-gap); }
.member-tile { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xs); min-block-size: var(--member-tile-checkout-height); padding: var(--member-tile-avatar-top) var(--member-tile-name-inset) var(--spacing-sm); border-radius: var(--member-tile-radius); background: var(--member-tile-fill); color: var(--member-tile-name-color); font: var(--member-tile-name-style) var(--font-family); text-align: center; cursor: pointer; transition: box-shadow var(--motion-selection-millis) var(--motion-easing); }
.member-tile:hover { box-shadow: 0 0 0 2px var(--palette-brand-outline); }
.member-tile__name { max-inline-size: 100%; }
/* MemberAvatar: the member's first letter on the brand colour. */
.member-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--member-avatar-size); block-size: var(--member-avatar-size); border-radius: 50%; background: var(--member-avatar-fill); color: var(--member-avatar-letter-color); font: var(--member-avatar-letter-style) var(--font-family); }
.member-avatar .icon { --icon-size: var(--member-tile-empty-icon-size); }
/* A free place: a dashed outline, a plus, "Add a member". */
.member-tile--free { background: none; border: var(--member-tile-empty-border-width) dashed var(--member-tile-empty-border); padding-block-start: calc(var(--member-tile-avatar-top) - var(--member-tile-empty-border-width)); color: var(--member-tile-checkout-empty-label-color); font: var(--typography-label-strong) var(--font-family); line-height: 1.2; }
.placeholder--member-tile { block-size: var(--member-tile-checkout-height); border-radius: var(--member-tile-radius); }
@media (min-width: 768px) {
  .member-tile--free { font: var(--member-tile-checkout-empty-label-style) var(--font-family); }
}

/* The dark strip under the tiles (FamilyCheckoutTokens): an icon, one line, an info mark. */
.member-note { display: flex; align-items: center; gap: var(--family-checkout-strip-icon-to-text); min-block-size: var(--family-checkout-strip-height); padding-inline: var(--family-checkout-strip-leading-inset) var(--family-checkout-strip-trailing-inset); border-radius: var(--family-checkout-strip-radius); background: var(--family-checkout-strip-fill); color: var(--family-checkout-strip-content-color); font: var(--family-checkout-strip-text-style) var(--font-family); }
.member-note .icon { --icon-size: var(--family-checkout-strip-icon-size); }
.member-note__text { flex: 1 1 0; min-inline-size: 0; }

/* The price panel (FamilyCheckoutTokens): the plan's price, a voucher's discount, the total last. */
.price-panel { border-radius: var(--family-checkout-price-radius); background: var(--family-checkout-price-fill); overflow: hidden; }
.price-panel__row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); min-block-size: var(--family-checkout-price-row-height); padding-inline: var(--family-checkout-price-inset); }
.price-panel__row + .price-panel__row { border-block-start: var(--family-checkout-price-divider-height) solid var(--family-checkout-price-divider); }
.price-panel__label { color: var(--family-checkout-price-label-color); font: var(--family-checkout-price-label-style) var(--font-family); }
.price-panel__amount { color: var(--family-checkout-price-amount-color); font: var(--family-checkout-price-amount-style) var(--font-family); }
.price-panel__row--discount .price-panel__amount { color: var(--family-checkout-price-discount-color); }
.price-panel__row--total .price-panel__label { font: var(--family-checkout-price-total-label-style) var(--font-family); }
.price-panel__row--total .price-panel__amount { font: var(--family-checkout-price-total-amount-style) var(--font-family); }

/* ==========================================================================
   7. The design's own marks. Never part of the website.
   ========================================================================== */

/* A state of the page, shown under the one the page opens in: its name, then the page as it is drawn then. */
.variant { margin-block-start: var(--web-section-gap); }
.band-body > .variant:first-child, .band-body__bar + .variant { margin-block-start: 0; }
@media (min-width: 768px) {
  /* The first of them stands clear of the band, where its name can be read. */
  .band-body > .variant:first-child, .band-body__bar + .variant { margin-block-start: calc(var(--band-rise) + var(--spacing-xl)); }
}
.variant__label { display: flex; align-items: center; gap: var(--spacing-sm); margin-block-end: var(--spacing-md); color: var(--palette-text-secondary); font: var(--typography-caption-strong) var(--font-family); letter-spacing: 0.04em; text-transform: uppercase; }
.variant__label::after { content: ""; flex: 1 1 0; block-size: 1px; background: repeating-linear-gradient(to var(--inline-end), var(--palette-placeholder) 0 var(--spacing-xxs), transparent var(--spacing-xxs) var(--spacing-xs)); }
.variant__stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-lg); align-items: start; }
.variant__stage--center { justify-items: center; }
.variant__stage > .panel + .panel { margin-block-start: 0; }
/* A sheet that lists, inside a state: there is no window to take a share of, so it is as tall as what it holds. */
.variant .sheet:has(> .sheet__head) { block-size: auto; }
/* A price bar inside a state is drawn where it stands: several of them cannot all be pinned to one window's foot. */
.variant .price-bar { position: static; z-index: auto; border-radius: var(--price-bar-top-radius); }
@media (min-width: 768px) {
  .variant__stage--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .variant__stage--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* A word from whoever drew the page to whoever wires it. */
.design-note { padding-inline-start: var(--spacing-sm); border-inline-start: 2px dashed var(--palette-placeholder); color: var(--palette-text-secondary); font: var(--typography-caption-loose) var(--font-family); }
/* The list of the family's pages. */
.page-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-sm); }
.page-list__item { display: flex; flex-direction: column; gap: var(--spacing-xxs); padding: var(--spacing-md); border-radius: var(--radius-md); background: var(--palette-surface); transition: box-shadow var(--motion-selection-millis) var(--motion-easing); }
.page-list__item:hover { box-shadow: 0 0 0 2px var(--palette-brand-outline); }
.page-list__name { color: var(--palette-brand); font: var(--typography-body-strong) var(--font-family); }
.page-list__line { color: var(--palette-text-secondary); font: var(--typography-label-tall) var(--font-family); }
@media (min-width: 768px) {
  .page-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   7b. What the apps gained on 13 October, and the designer drew none of
       (mobile/design-specs/FOR-THE-DESIGNER.md): a country's networks, the
       devices sheet's lines about the list, a family's order.
   ========================================================================== */

/* The band's far corner when it holds more than the chip: the round button of a country's networks, then the chip. */
.page-band__corner { display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-xs); min-inline-size: 0; }
/* PlansHeroUi.networks: a white disc of the back button's size with the antenna in it, opposite the way back. */
.band-round { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--sizing-min-touch-target); block-size: var(--sizing-min-touch-target); border-radius: 50%; background: var(--palette-background); color: var(--palette-brand); transition: background-color var(--motion-selection-millis) var(--motion-easing); }
.band-round:hover { background: var(--palette-brand-wash); }
.band-round .icon { --icon-size: var(--plan-details-back-icon-size); }

/* NetworksSheet.kt: "Networks in this country". The devices sheet's container with no field: one sentence that the
   list is today's and promises nothing, then a row a network, its name as the price list spells it and the
   generations it offers at the far end, left to right in every language. A row is not a control. */
.sheet__lede { flex: none; padding: var(--spacing-sm) var(--devices-sheet-list-inset) 0; color: var(--devices-sheet-note-color); font: var(--devices-sheet-note-style) var(--font-family); line-height: var(--devices-sheet-note-line-height); }
/* A short list is as tall as what it holds, up to the share of the window the devices list takes. */
.sheet--hug:has(> .sheet__head) { block-size: auto; max-block-size: calc(100% * var(--devices-sheet-height-fraction)); }
.network-list { display: flex; flex-direction: column; }
.network-row:last-child { border-block-end: 0; }
.network-row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); min-block-size: var(--devices-sheet-brand-header-height); border-block-end: var(--devices-sheet-separator-height) solid var(--devices-sheet-separator-color); }
.network-row__name { min-inline-size: 0; color: var(--devices-sheet-brand-name-color); font: var(--devices-sheet-brand-name-style) var(--font-family); overflow-wrap: anywhere; }
.network-row__generations { flex: none; color: var(--palette-text-secondary); font: var(--typography-label-strong) var(--font-family); }

/* 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 { flex: none; display: flex; flex-direction: column; gap: var(--devices-sheet-notice-gap); padding: var(--devices-sheet-notice-to-search) var(--devices-sheet-search-side-inset) 0; 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__notice + .sheet__search { padding-block-start: var(--devices-sheet-notice-to-search); }
/* Under a search's models: where some of them are sold without an eSIM, as a brand's note is drawn. */
.device-results { display: flex; flex-direction: column; }

/* PlanDetailsUi.familyRow: "Buying for several people?", under the declarations, in the column of what is done. */
.family-way { margin-block-start: var(--spacing-md); }
/* In the side column the row's title is a line of the column, not a heading of the page. */
.family-way .action-row__title { font: var(--typography-body-strong) var(--font-family); }

/* ResultCardUi.rows: on a family's order, one line a member between the title and the sentence: the name where
   reading starts, where their eSIM stands at the far end, in its tone's colour. */
.result-card__rows { align-self: stretch; display: flex; flex-direction: column; margin-block-start: var(--result-card-title-to-wait-with-button); text-align: start; }
.result-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-xs); padding-block: var(--spacing-xs); }
.result-row + .result-row { border-block-start: 1px solid var(--palette-border); }
.result-row__name { min-inline-size: 0; color: var(--result-card-wait-color); font: var(--result-card-wait-style) var(--font-family); overflow-wrap: anywhere; }
.result-row__status { flex: 0 1 auto; max-inline-size: 62%; color: var(--palette-text-secondary); font: var(--result-card-body-style) var(--font-family); line-height: var(--typography-label-tall-line); text-align: end; }
.result-row--ready .result-row__status { color: var(--palette-positive); }
.result-row--waiting .result-row__status { color: var(--palette-text-secondary); }
.result-row--not-delivered .result-row__status { color: var(--palette-error); }
.result-card__rows + .result-card__body { margin-block-start: var(--result-card-title-to-wait-with-button); }

/* ==========================================================================
   8. One width or the other. Last, so that it wins over a component's own display.
   ========================================================================== */

/* What is a sheet on a phone can stand in the page's side column on a desktop: each form is drawn at its own width only. */
@media (max-width: 1099px) {
  .from-desktop { display: none; }
}
@media (min-width: 1100px) {
  .until-desktop { display: none; }
}

/* ==========================================================================
   5. The website's look (Figma 2538:5156 a country, 2538:3806 a region,
      2573:4579 a plan and its checkout). Web only.
   ========================================================================== */

/* The destination hero: the flag (or the region's map), the name and the line under it, centred on the picture. */
.page-band--centred .page-band__head { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: var(--spacing-sm); text-align: center; }
.page-band--centred .page-band__text { flex: none; align-items: center; }
.page-band--centred .page-band__subtitle { margin-inline: auto; }
.page-band--centred .page-band__lead .flag { box-shadow: 0 0 0 var(--flag-ring, 4px) var(--palette-on-brand); border-radius: 50%; }
@media (min-width: 768px) {
  .page-band--centred { --band-height: 230px; }
  .page-band--centred .page-band__head, .page-band--centred.page-band--stacked .page-band__head { flex-direction: column; align-items: center; margin-block: auto; }
  .page-band--centred .page-band__text { flex: none; }
  /* The picture lies across the whole band, the brand colour rising over its far end and its foot. */
  .page-band--centred .page-band__picture { inline-size: 100%; inset-inline: 0; -webkit-mask-image: none; mask-image: none; }
  .page-band--centred.page-band--picture::after { background: linear-gradient(to var(--art-weak-side), color-mix(in srgb, var(--palette-brand) 10%, transparent) 20%, var(--palette-brand) 85%), linear-gradient(to bottom, transparent 60%, color-mix(in srgb, var(--palette-brand-shade) 55%, transparent) 100%); }
}

/* The white sheet that climbs onto the hero's foot and holds the whole page: the tabs, the pills, the plans, the banner. */
@media (min-width: 768px) {
  .band-body--sheet { padding: var(--spacing-lg); border-radius: 30px; background: var(--palette-background); box-shadow: var(--panel-shadow); }
  .band-body--sheet > .panel, .band-body--sheet .layout-split .panel { padding: 0; border-radius: 0; box-shadow: none; background: none; }
  .band-body--sheet .band-body__bar { justify-content: center; }
}
@media (min-width: 1100px) {
  .band-body--sheet { padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-xl); }
}

/* A package's information pills (InfoLinks, PlansScreen.kt): its countries, the device check, the FAQ. */
.plans-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-sm); }
.plans-info > .countries-row, .plans-info > .link-row { min-block-size: 50px; border-radius: var(--radius-md); background: var(--palette-surface); box-shadow: none; }
@media (min-width: 768px) {
  .plans-info { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* A package's plans as cards, two across from a tablet up. */
@media (min-width: 768px) {
  .global-plan-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-md); }
}

/* The facts panel and the pay card of a plan and its checkout. */
.facts-panel { --panel-gap: var(--spacing-md); }
.facts-panel .fact-group { display: flex; flex-direction: column; gap: var(--spacing-xxs); background: none; }
.facts-panel .fact-group__row { border-radius: 10px; background: var(--palette-surface); }
.facts-panel .fact-group__row + .fact-group__row { border-block-start: 0; }
.facts-panel .fact-group__value { color: var(--palette-brand); }
.pay-card { --panel-gap: var(--spacing-md); }
.summary-card--tile { background: var(--palette-surface); color: var(--palette-text-emphasis); box-shadow: none; }
@media (min-width: 768px) {
  .facts-panel, .pay-card { border-radius: 30px; }
  /* The pay card stays in view beside the facts while they scroll. */
  .pay-card { position: sticky; inset-block-start: var(--spacing-lg); }
  .pay-card .price-bar { position: static; inset: auto; margin: 0; padding: var(--spacing-md) var(--spacing-lg); border-radius: 20px; box-shadow: none; }
}

/* ==========================================================================
   The website's unlimited plans as picture cards (Figma 2538:5156,
   PlansScreen.kt PictureCards): the plan's picture washed white on the
   reading side, the infinity disc and "Unlimited" at the top, the badge at
   the far top, the days and the price at the foot. Three across from a
   desktop, two on a tablet, one on a phone.
   ========================================================================== */
.picture-plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-md); }
@media (min-width: 768px) { .picture-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-lg); } }
@media (min-width: 1100px) { .picture-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.picture-plan {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto auto; row-gap: 2px;
  min-block-size: 180px; padding: var(--spacing-md) var(--spacing-lg);
  border-radius: 20px; background: var(--palette-surface); color: var(--palette-navy); text-decoration: none;
  box-shadow: var(--shadow-card-lift);
  transition: transform var(--motion-selection-millis) var(--motion-easing), box-shadow var(--motion-selection-millis) var(--motion-easing);
}
.picture-plan::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to var(--inline-end), rgb(255 255 255 / 0.95) 22%, rgb(255 255 255 / 0.7) 45%, transparent 75%); }
.picture-plan__picture { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 600ms var(--motion-easing); }
.picture-plan:hover, .picture-plan:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-card-lift), 0 0 0 2px var(--palette-brand-outline); }
.picture-plan:hover .picture-plan__picture { transform: scale(1.06); }
.picture-plan__kind { grid-column: 1; grid-row: 1; display: inline-flex; align-items: center; gap: var(--spacing-xs); font: var(--typography-label-strong) var(--font-family); }
.picture-plan__infinity { display: inline-grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 50%; background: var(--palette-navy); color: var(--palette-on-brand); }
.picture-plan__infinity .icon { --icon-size: 18px; }
.picture-plan__badge { grid-column: 2; grid-row: 1; align-self: start; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--palette-navy); color: var(--palette-on-brand); font: var(--typography-caption-strong, var(--typography-label-strong)) var(--font-family); font-size: 12px; animation: kit-pop 500ms var(--motion-easing) 300ms backwards; }
.picture-plan__flame { inline-size: 14px; block-size: 14px; }
.picture-plan__days { grid-column: 1; grid-row: 3; justify-self: start; font: var(--typography-title-bold) var(--font-family); font-size: 16px; }
.picture-plan__price { grid-column: 1; grid-row: 4; justify-self: start; color: var(--palette-brand); font: var(--typography-site-section) var(--font-family); font-size: 26px; line-height: 1.2; }
.picture-plan__note { grid-column: 1 / -1; grid-row: 5; color: var(--palette-text-secondary); font: var(--typography-caption) var(--font-family); }

/* The unlimited band under the picture cards: the four features in a row at its foot. */
.promo-banner--band { margin-block-start: var(--spacing-lg); }
.promo-banner__features { display: flex; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-lg); margin: var(--spacing-xs) 0 0; padding: 0; list-style: none; }
.promo-banner__feature { display: inline-flex; align-items: center; gap: var(--spacing-xs); color: var(--palette-on-brand); font: var(--typography-label-strong) var(--font-family); white-space: pre-line; }

/* A package's plans as the frame's cards (Figma 2538:3806): the size at the top of the reading side, the price at the foot of the far side, the region's map faint behind. */
.global-plan-row__map { position: absolute; inset-block: 8%; inset-inline-end: 4%; z-index: -1; block-size: 84%; inline-size: auto; opacity: 0.16; pointer-events: none; }
@media (min-width: 768px) {
  .global-plan-list--grid .global-plan-row { min-block-size: 130px; border-radius: var(--radius-card); transition: transform var(--motion-selection-millis) var(--motion-easing), box-shadow var(--motion-selection-millis) var(--motion-easing); }
  .global-plan-list--grid .global-plan-row:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-lift); }
  .global-plan-list--grid .global-plan-row__plan { align-items: stretch; padding: var(--spacing-lg); }
  .global-plan-list--grid .global-plan-row__name { align-self: flex-start; flex-direction: column; align-items: flex-start; }
  .global-plan-list--grid .global-plan-row__cost { align-self: flex-end; }
  .global-plan-list--grid .global-plan-row__size { font: var(--typography-site-section) var(--font-family); }
}

/* The companion's band at the foot of the plan page (Figma 2573:4579), and the voucher's place in the pay card. */
.plan-page-band { padding-block: var(--spacing-xl); }
.pay-card__voucher { display: flex; flex-direction: column; gap: var(--spacing-xs); }
@media (min-width: 768px) {
  /* The frame's price block: the price on the reading side, the white "Pay now" beside it. */
  .pay-card .price-bar { flex-direction: row; align-items: center; min-block-size: 110px; }
  .pay-card .price-bar__button { flex: 0 0 auto; inline-size: auto; min-block-size: 60px; padding-inline: var(--spacing-lg); }
  .pay-card .price-bar__price { font-size: 32px; }
}
/* A plan page's pay card settles in after the facts. */
.pay-card { animation: kit-rise 520ms var(--motion-easing) 120ms backwards; }
.facts-panel .fact-group__row { transition: background-color var(--motion-selection-millis) var(--motion-easing); }
.facts-panel .fact-group__row:hover { background: var(--palette-brand-outline); }
@media (prefers-reduced-motion: reduce) { .pay-card, .picture-plan__badge { animation: none; } .picture-plan, .picture-plan__picture { transition: none; } }

/* A region's page (Figma 2538:3806): under the band's head, the regional
   list's search (a button that opens the catalogue's search) and the kinds
   as tiles, the region's raised, as on the catalogue's own band. */
.page-band__tools { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-lg); margin-block-start: var(--spacing-lg); }
.page-band__search { --web-focus-color: var(--palette-on-brand); --_fill: var(--palette-background); inline-size: 100%; max-inline-size: 708px; cursor: pointer; text-align: start; box-shadow: 0 var(--spacing-lg) calc(var(--spacing-lg) * 2) color-mix(in srgb, var(--palette-brand-deep) 35%, transparent); }
.page-band__search-text { flex: 1 1 0; min-inline-size: 0; overflow: hidden; color: var(--_placeholder); font: var(--search-field-on-page-text-style) var(--font-family); white-space: nowrap; text-overflow: ellipsis; }
.page-band__kinds { inline-size: 100%; padding-block-start: var(--spacing-sm); }
/* Every tile carries its word, the region's in brand and raised (as the catalogue's band, family-browse.css). */
.page-band__kinds.category-tabs--tiles .category-tabs__label { display: block; font: var(--typography-label) var(--font-family); }
.page-band__kinds.category-tabs--tiles .category-tabs__tab .icon { --icon-size: 30px; }
.page-band__kinds.category-tabs--tiles .category-tabs__tab { color: var(--palette-text-emphasis); }
.page-band__kinds.category-tabs--tiles .category-tabs__tab[aria-current="page"] { color: var(--palette-brand); }
.page-band__kinds.category-tabs--tiles .category-tabs__tab[aria-current="page"] .category-tabs__label { font-weight: var(--font-weights-semi-bold); }
@media (max-width: 767px) {
  .page-band__kinds.category-tabs--tiles { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
}