/* --- css/normalize.css --- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/* --- css/tokens.css --- */
/**
 * Avelo design tokens — GENERATED from Figma, do not edit by hand.
 *
 * Source: Avelo Foundations (IIvqnHXDtFgLmxZ39kqNFf)
 *   Primitive  — raw ramps, single mode
 *   Semantic   — role tokens, Light/Dark
 *   Component  — per-component roles, Light/Dark
 *
 * Regenerate rather than patch. Every value below is aliased in Figma; editing
 * here silently forks the code from the design source, which is the exact
 * problem these tokens exist to remove.
 *
 * Generated 2026-08-25.
 */

:root {
  /* Typeface. Krub in Medium/SemiBold/Bold only — Regular and Light are not
     authorised brand weights. */
  --xp-font-family: 'Krub', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* ---------------------------------------------------------------- Primitive */
  --xp-color-neutral-0: #ffffff;
  --xp-color-neutral-50: #f0eff8;
  --xp-color-neutral-100: #e1e0e9;
  --xp-color-neutral-150: #d2d1da;
  --xp-color-neutral-200: #c4c3cb;
  --xp-color-neutral-250: #b6b5bd;
  --xp-color-neutral-300: #a7a7ae;
  --xp-color-neutral-350: #9a99a0;
  --xp-color-neutral-400: #8c8b92;
  --xp-color-neutral-450: #7f7e84;
  --xp-color-neutral-500: #717177;
  --xp-color-neutral-550: #646469;
  --xp-color-neutral-600: #58575c;
  --xp-color-neutral-650: #4c4b50;
  --xp-color-neutral-700: #403f43;
  --xp-color-neutral-750: #343437;
  --xp-color-neutral-800: #29282c;
  --xp-color-neutral-850: #1e1e20;
  --xp-color-neutral-900: #141316;
  --xp-color-neutral-950: #0a0a0b;
  --xp-color-neutral-1000: #000000;
  --xp-color-violet-100: #ede7f6;
  --xp-color-violet-200: #dbd0ec;
  --xp-color-violet-300: #998ad9;
  --xp-color-violet-400: #7054c1;
  --xp-color-violet-450: #4c3099;
  --xp-color-violet-500: #4c12a1;
  --xp-color-violet-600: #3d0088;
  --xp-color-violet-650: #350d70;
  --xp-color-violet-700: #2e0069;
  --xp-color-violet-800: #1f004c;
  --xp-color-violet-900: #110031;
  --xp-color-yellow-100: #fef7e2;
  --xp-color-yellow-200: #fdedc0;
  --xp-color-yellow-300: #ffe394;
  --xp-color-yellow-400: #ffd864;
  --xp-color-yellow-500: #ffcd00;
  --xp-color-yellow-600: #a68400;
  --xp-color-yellow-700: #816700;
  --xp-color-yellow-800: #5a4600;
  --xp-color-yellow-900: #312600;
  --xp-color-teal-100: #e8fbfe;
  --xp-color-teal-200: #c3ecf2;
  --xp-color-teal-300: #96dfe9;
  --xp-color-teal-400: #5fd1e0;
  --xp-color-teal-500: #00c1d4;
  --xp-color-teal-600: #0097a6;
  --xp-color-teal-650: #10a3ba;
  --xp-color-teal-675: #1996a9;
  --xp-color-teal-700: #007582;
  --xp-color-teal-800: #00525a;
  --xp-color-teal-900: #002c31;
  --xp-color-red-100: #fff4f3;
  --xp-color-red-200: #ffccc7;
  --xp-color-red-300: #ffa199;
  --xp-color-red-400: #f7766f;
  --xp-color-red-500: #e74948;
  --xp-color-red-600: #d23739;
  --xp-color-red-700: #b82d30;
  --xp-color-red-800: #892324;
  --xp-color-red-900: #4d1111;
  --xp-color-green-100: #edfbed;
  --xp-color-green-200: #cdebcd;
  --xp-color-green-300: #aaddaa;
  --xp-color-green-400: #84ce87;
  --xp-color-green-500: #61bd67;
  --xp-color-green-600: #3f9947;
  --xp-color-green-700: #267a30;
  --xp-color-green-800: #17541f;
  --xp-color-green-900: #0a2e0e;
  --xp-color-blue-300: #8ca2d1;
  --xp-color-blue-500: #2d59ad;
  --xp-color-grey-cool-400: #9ca3af;
  --xp-color-grey-cool-600: #5e5777;
  --xp-color-ink-body: #414042;
  --xp-color-ink-heading: #212121;
  --xp-color-warm-50: #f9f8f6;

  --xp-space-0: 0px;
  --xp-space-2: 2px;
  --xp-space-4: 4px;
  --xp-space-8: 8px;
  --xp-space-12: 12px;
  --xp-space-16: 16px;
  --xp-space-20: 20px;
  --xp-space-24: 24px;
  --xp-space-32: 32px;
  --xp-space-40: 40px;
  --xp-space-48: 48px;
  --xp-space-64: 64px;
  --xp-space-80: 80px;
  --xp-space-96: 96px;
  --xp-space-128: 128px;

  --xp-radius-none: 0px;
  --xp-radius-xs: 4px;
  --xp-radius-sm: 8px;
  --xp-radius-md: 12px;
  --xp-radius-lg: 16px;
  --xp-radius-xl: 24px;
  --xp-radius-full: 9999px;

  /* ------------------------------------------------------------- Elevation
     From the Foundations file's EFFECT STYLES, not its variables — Figma
     cannot express a shadow as a variable, which is why the generator above
     has never emitted these and why every shadow in the library was until now
     a hand-written one-off. Transcribed from `Elevation/*` and kept in the
     same order; regenerate from the effect styles, not from memory. */
  --xp-shadow-none: none;
  --xp-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1);
  --xp-shadow-float: 0 4px 8px rgba(0, 0, 0, 0.16);
  --xp-shadow-modal: 0 8px 24px -4px rgba(0, 0, 0, 0.18), 0 2px 6px -2px rgba(0, 0, 0, 0.1);
  --xp-shadow-sticky: 0 -2px 8px rgba(0, 0, 0, 0.12);
  --xp-shadow-sticky-bottom: 0 -4px 8px rgba(0, 0, 0, 0.06);
  --xp-shadow-ambient: 0 0 10px rgba(0, 0, 0, 0.4);
  --xp-shadow-card: 0 8px 16px rgba(0, 0, 0, 0.16);
  --xp-shadow-panel: 0 4px 15px rgba(0, 0, 0, 0.16);
  --xp-shadow-dropdown: 0 10px 30px rgba(0, 0, 0, 0.08);

  --xp-border-none: 0px;
  --xp-border-thin: 1px;
  --xp-border-thick: 2px;
  --xp-border-focus: 3px;

  --xp-breakpoint-sm: 640px;
  --xp-breakpoint-md: 768px;
  /* The rung the system was missing. Eighteen components had invented their
     own stop between md and lg -- 800, 820, 860 and 900 -- because a content
     band with three columns runs out of room well before the 1000px desktop
     switch. They are all pegged here now. */
  --xp-breakpoint-ml: 900px;
  --xp-breakpoint-lg: 1000px;
  --xp-breakpoint-xl: 1280px;
  --xp-breakpoint-xxl: 1440px;
  --xp-container-default: 1100px;
  --xp-container-inset-1920: 410px;

  /* ----------------------------------------------------------------- Semantic */
  --xp-text-primary: #1e1e20;
  --xp-text-secondary: #343437;
  --xp-text-tertiary: #58575c;
  --xp-text-disabled: #8c8b92;
  --xp-text-placeholder: #717177;
  --xp-text-inverse: #ffffff;
  --xp-text-heading: #212121;
  --xp-text-brand: #4c12a1;
  --xp-text-link: #4c12a1;
  --xp-text-link-hover: #3d0088;
  --xp-text-link-visited: #2e0069;
  --xp-text-on-brand: #ffffff;
  --xp-text-on-accent: #1e1e20;
  --xp-text-on-teal: #1e1e20;
  --xp-text-accent: #ffcd00;
  --xp-text-teal: #007582;
  --xp-text-error: #b82d30;
  --xp-text-success: #267a30;
  --xp-text-warning: #816700;

  --xp-background-canvas: #f0eff8;
  --xp-background-canvas-booking: #f9f8f6;
  --xp-background-surface: #ffffff;
  --xp-background-muted: #e1e0e9;
  --xp-background-subtle: #ede7f6;
  --xp-background-inverse: #1e1e20;
  --xp-background-disabled: #e1e0e9;
  --xp-background-brand: #4c12a1;
  --xp-background-brand-hover: #3d0088;
  --xp-background-brand-pressed: #2e0069;
  --xp-background-brand-subtle: #ede7f6;
  --xp-background-brand-deep: #1f004c;
  --xp-background-band-deep: #350d70;
  --xp-background-accent: #ffcd00;
  --xp-background-accent-hover: #a68400;
  --xp-background-accent-subtle: #fef7e2;
  --xp-background-teal: #00c1d4;
  --xp-background-teal-subtle: #e8fbfe;
  --xp-background-error: #fff4f3;
  --xp-background-success: #edfbed;
  --xp-background-warning: #fef7e2;
  --xp-background-destructive: #d23739;
  --xp-background-destructive-hover: #b82d30;
  --xp-background-destructive-pressed: #892324;
  --xp-background-transparent: rgba(0, 0, 0, 0);

  --xp-surface-raised: #ffffff;
  --xp-surface-overlay: #ffffff;
  --xp-surface-sunken: #f0eff8;

  --xp-border-default: #d2d1da;
  --xp-border-muted: #e1e0e9;
  --xp-border-strong: #7f7e84;
  --xp-border-divider: #d2d1da;
  --xp-border-inverse: #403f43;
  --xp-border-disabled: #e1e0e9;
  --xp-border-brand: #4c12a1;
  --xp-border-focus-color: #4c12a1;
  --xp-border-focus-inner: #ffffff;
  --xp-border-focus-inverse: #ffcd00;
  --xp-border-teal: #007582;
  --xp-border-error: #e74948;
  --xp-border-success: #3f9947;
  --xp-border-warning: #a68400;

  --xp-icon-primary: #1e1e20;
  --xp-icon-secondary: #58575c;
  --xp-icon-tertiary: #8c8b92;
  --xp-icon-disabled: #a7a7ae;
  --xp-icon-inverse: #ffffff;
  --xp-icon-brand: #4c12a1;
  --xp-icon-on-brand: #ffffff;
  --xp-icon-accent: #ffcd00;
  --xp-icon-on-accent: #1e1e20;
  --xp-icon-teal: #007582;
  --xp-icon-error: #d23739;
  --xp-icon-success: #3f9947;
  --xp-icon-warning: #816700;

  --xp-overlay-scrim: rgba(0, 0, 0, 0.6);
  --xp-overlay-hover: rgba(0, 0, 0, 0.04);
  --xp-overlay-pressed: rgba(0, 0, 0, 0.08);
  --xp-overlay-selected: rgba(76, 18, 161, 0.08);
  --xp-overlay-scrim-media: rgba(0, 0, 0, 0.3);

  /* ---------------------------------------------------------------- Component */
  --xp-seat-standard: #ffffff;
  --xp-seat-standard-border: #8c8b92;
  --xp-seat-label: #1e1e20;
  --xp-seat-stretch: #ede7f6;
  --xp-seat-stretch-border: #4c12a1;
  --xp-seat-stretch-plus: #e8fbfe;
  --xp-seat-stretch-plus-border: #0097a6;
  --xp-seat-blocked: #e1e0e9;
  --xp-seat-unavailable: #e1e0e9;
  --xp-seat-unavailable-glyph: #58575c;
  --xp-seat-selected: #007582;
  --xp-seat-selected-text: #ffffff;
  --xp-journey-depart: #0097a6;
  --xp-journey-return: #1e1e20;
  --xp-journey-marker: #ffffff;
  --xp-footer-ground: #2e0069;
  --xp-footer-heading: #ffffff;
  --xp-footer-link: #dbd0ec;
  --xp-widget-cta: #10a3ba;
  --xp-widget-cta-hover: #1996a9;
  --xp-widget-cta-idle: #2d59ad;
  --xp-widget-cta-idle-text: #ffffff;
  --xp-widget-cta-disabled: #dbd0ec;
  --xp-widget-cta-disabled-text: #58575c;
  --xp-widget-icon: #5e5777;
  --xp-widget-icon-disabled: #9ca3af;
  --xp-widget-icon-active: #4c12a1;
  --xp-widget-text-disabled: #9ca3af;
  --xp-widget-field-text: #414042;
  --xp-sweepstakes-hero: #4c3099;
  --xp-sweepstakes-map-ground: #ede7f6;
  --xp-sweepstakes-form-panel: #ffcd00;
  /* What the live Legacy campaigns actually set the entry panel to. The
     yellow above is the system default; production runs violet with white
     labels and keeps the yellow for the SUBMIT pill alone. */
  --xp-sweepstakes-form-panel-violet: #4c12a1;

  /* --------------------------------------------------------------- Elevation
     Four steps, and they ascend. The old set had ten that did not: dropdown
     carried the widest blur (30px) at the LIGHTEST alpha (0.08), so a dropdown
     read as less raised than a card sitting under it — the one thing an
     elevation scale exists to prevent. card (y8 b16) and panel (y4 b15) were
     the same shadow twice, and ambient sat at 0.40 alpha, more than double the
     darkest of the others.

     Every step is two shadows, which is not decoration: the tight one is the
     contact shadow directly under the element, the wide one is the ambient
     light it occludes. One shadow can be tight or soft, not both, and that is
     what makes a single-shadow elevation read as a sticker.

     Tinted with violet-500 (#4c12a1) rather than black. A shadow is the
     absence of the light in the room, and the room here is Avelo violet;
     pure black on white reads cold and slightly dirty next to the brand. This
     is the tint already shipping on the mega menu. */
  --xp-elevation-none: none;

  /* Resting: buttons, cards sitting on the page. Barely there. */
  --xp-elevation-raised:
    0 1px 2px -1px rgb(76 18 161 / 0.12),
    0 1px 3px rgb(76 18 161 / 0.08);

  /* Lifted: hovered cards, tiles that have come up to meet the cursor. */
  --xp-elevation-float:
    0 2px 4px -2px rgb(76 18 161 / 0.12),
    0 4px 8px -1px rgb(76 18 161 / 0.08);

  /* Overlaying the page: dropdowns, popovers, the mega menu's panels.
     Figma has documented this level by name for months without one existing. */
  --xp-elevation-overlay:
    0 4px 6px -4px rgb(76 18 161 / 0.12),
    0 10px 20px -3px rgb(76 18 161 / 0.10);

  /* Above everything: dialogs. The top of the scale, so it may be the darkest. */
  --xp-elevation-modal:
    0 8px 10px -6px rgb(76 18 161 / 0.14),
    0 20px 32px -5px rgb(76 18 161 / 0.14);

  /* Kept so nothing breaks, but they are the ramp above under older names.
     Prefer raised / float / overlay / modal in new work. */
  --xp-elevation-card: var(--xp-elevation-float);
  --xp-elevation-panel: var(--xp-elevation-float);
  --xp-elevation-dropdown: var(--xp-elevation-overlay);

  /* Not part of the ramp: these point UP, for a bar pinned to the bottom of
     the viewport casting onto the content scrolling beneath it. */
  --xp-elevation-sticky: 0 -2px 8px rgb(76 18 161 / 0.10);
  --xp-elevation-sticky-bottom: 0 -4px 8px rgb(76 18 161 / 0.06);

  /* Also not elevation — a glow with no offset, for a focused element on a
     dark ground. Was 0.40 alpha, which is a smudge rather than a light. */
  --xp-elevation-ambient: 0 0 12px rgb(76 18 161 / 0.18);
}

/* -------------------------------------------------------------------- Type
   Shorthand is usable directly as `font: var(--xp-type-body-m-medium)`.
   The -size / -lh / -weight parts exist for the cases where you need one axis
   without resetting the rest of the font shorthand. */
:root {
  /* Medium exists at every heading step from 20 to 44, then stops: the top of
     the ramp had Semibold and Bold only. Figma's careers h1 is 65/500/70 and
     production ships the same, so the missing column — not a new size — is
     what was blocking it. 64/70 is the existing step; only the weight is new. */
  --xp-type-display-xl-medium: 500 64px/70px var(--xp-font-family);
  --xp-type-display-xl-medium-size: 64px;
  --xp-type-display-xl-medium-lh: 70px;
  --xp-type-display-xl-medium-weight: 500;
  --xp-type-display-xl-semibold: 600 64px/70px var(--xp-font-family);
  --xp-type-display-xl-semibold-size: 64px;
  --xp-type-display-xl-semibold-lh: 70px;
  --xp-type-display-xl-semibold-weight: 600;
  --xp-type-display-xl-bold: 700 64px/70px var(--xp-font-family);
  --xp-type-display-xl-bold-size: 64px;
  --xp-type-display-xl-bold-lh: 70px;
  --xp-type-display-xl-bold-weight: 700;
  --xp-type-display-l-semibold: 600 56px/60px var(--xp-font-family);
  --xp-type-display-l-semibold-size: 56px;
  --xp-type-display-l-semibold-lh: 60px;
  --xp-type-display-l-semibold-weight: 600;
  --xp-type-display-l-bold: 700 56px/60px var(--xp-font-family);
  --xp-type-display-l-bold-size: 56px;
  --xp-type-display-l-bold-lh: 60px;
  --xp-type-display-l-bold-weight: 700;
  --xp-type-display-m-medium: 500 44px/48px var(--xp-font-family);
  --xp-type-display-m-medium-size: 44px;
  --xp-type-display-m-medium-lh: 48px;
  --xp-type-display-m-medium-weight: 500;
  --xp-type-display-m-semibold: 600 44px/48px var(--xp-font-family);
  --xp-type-display-m-semibold-size: 44px;
  --xp-type-display-m-semibold-lh: 48px;
  --xp-type-display-m-semibold-weight: 600;
  --xp-type-display-m-bold: 700 44px/48px var(--xp-font-family);
  --xp-type-display-m-bold-size: 44px;
  --xp-type-display-m-bold-lh: 48px;
  --xp-type-display-m-bold-weight: 700;
  --xp-type-heading-xl-medium: 500 36px/44px var(--xp-font-family);
  --xp-type-heading-xl-medium-size: 36px;
  --xp-type-heading-xl-medium-lh: 44px;
  --xp-type-heading-xl-medium-weight: 500;
  --xp-type-heading-xl-semibold: 600 36px/44px var(--xp-font-family);
  --xp-type-heading-xl-semibold-size: 36px;
  --xp-type-heading-xl-semibold-lh: 44px;
  --xp-type-heading-xl-semibold-weight: 600;
  --xp-type-heading-xl-bold: 700 36px/44px var(--xp-font-family);
  --xp-type-heading-xl-bold-size: 36px;
  --xp-type-heading-xl-bold-lh: 44px;
  --xp-type-heading-xl-bold-weight: 700;
  --xp-type-heading-l-medium: 500 32px/40px var(--xp-font-family);
  --xp-type-heading-l-medium-size: 32px;
  --xp-type-heading-l-medium-lh: 40px;
  --xp-type-heading-l-medium-weight: 500;
  --xp-type-heading-l-semibold: 600 32px/40px var(--xp-font-family);
  --xp-type-heading-l-semibold-size: 32px;
  --xp-type-heading-l-semibold-lh: 40px;
  --xp-type-heading-l-semibold-weight: 600;
  --xp-type-heading-l-bold: 700 32px/40px var(--xp-font-family);
  --xp-type-heading-l-bold-size: 32px;
  --xp-type-heading-l-bold-lh: 40px;
  --xp-type-heading-l-bold-weight: 700;
  --xp-type-heading-m-medium: 500 28px/36px var(--xp-font-family);
  --xp-type-heading-m-medium-size: 28px;
  --xp-type-heading-m-medium-lh: 36px;
  --xp-type-heading-m-medium-weight: 500;
  --xp-type-heading-m-semibold: 600 28px/36px var(--xp-font-family);
  --xp-type-heading-m-semibold-size: 28px;
  --xp-type-heading-m-semibold-lh: 36px;
  --xp-type-heading-m-semibold-weight: 600;
  --xp-type-heading-m-bold: 700 28px/36px var(--xp-font-family);
  --xp-type-heading-m-bold-size: 28px;
  --xp-type-heading-m-bold-lh: 36px;
  --xp-type-heading-m-bold-weight: 700;
  --xp-type-heading-s-medium: 500 24px/32px var(--xp-font-family);
  --xp-type-heading-s-medium-size: 24px;
  --xp-type-heading-s-medium-lh: 32px;
  --xp-type-heading-s-medium-weight: 500;
  --xp-type-heading-s-semibold: 600 24px/32px var(--xp-font-family);
  --xp-type-heading-s-semibold-size: 24px;
  --xp-type-heading-s-semibold-lh: 32px;
  --xp-type-heading-s-semibold-weight: 600;
  --xp-type-heading-s-bold: 700 24px/32px var(--xp-font-family);
  --xp-type-heading-s-bold-size: 24px;
  --xp-type-heading-s-bold-lh: 32px;
  --xp-type-heading-s-bold-weight: 700;
  --xp-type-heading-xs-medium: 500 20px/28px var(--xp-font-family);
  --xp-type-heading-xs-medium-size: 20px;
  --xp-type-heading-xs-medium-lh: 28px;
  --xp-type-heading-xs-medium-weight: 500;
  --xp-type-heading-xs-semibold: 600 20px/28px var(--xp-font-family);
  --xp-type-heading-xs-semibold-size: 20px;
  --xp-type-heading-xs-semibold-lh: 28px;
  --xp-type-heading-xs-semibold-weight: 600;
  --xp-type-heading-xs-bold: 700 20px/28px var(--xp-font-family);
  --xp-type-heading-xs-bold-size: 20px;
  --xp-type-heading-xs-bold-lh: 28px;
  --xp-type-heading-xs-bold-weight: 700;
  --xp-type-heading-xxs-semibold: 600 18px/24px var(--xp-font-family);
  --xp-type-heading-xxs-semibold-size: 18px;
  --xp-type-heading-xxs-semibold-lh: 24px;
  --xp-type-heading-xxs-semibold-weight: 600;
  --xp-type-heading-xxs-bold: 700 18px/24px var(--xp-font-family);
  --xp-type-heading-xxs-bold-size: 18px;
  --xp-type-heading-xxs-bold-lh: 24px;
  --xp-type-heading-xxs-bold-weight: 700;
  /* Regular (400) is the DEFAULT running-text weight, and the only role that
     gets it — Body. Brand Guidelines p.12 authorises Medium, Semibold and Bold;
     the Typography foundations amend that for running text only, on the reading
     that a paragraph of Krub Medium sets a darker type colour than body copy
     should, leaving genuine emphasis nowhere to go. Medium is not retired: it
     becomes the lead-paragraph weight.

     Each Regular step carries the size and leading of its Medium sibling
     exactly, so swapping weight never reflows a layout. Label, Overline and
     everything under 14px stay on Medium as their lightest weight — small,
     open-tracked, often on Avelo purple, and Krub thins out fast there. */
  --xp-type-body-l-regular: 400 18px/28px var(--xp-font-family);
  --xp-type-body-l-regular-size: 18px;
  --xp-type-body-l-regular-lh: 28px;
  --xp-type-body-l-regular-weight: 400;
  --xp-type-body-l-medium: 500 18px/28px var(--xp-font-family);
  --xp-type-body-l-medium-size: 18px;
  --xp-type-body-l-medium-lh: 28px;
  --xp-type-body-l-medium-weight: 500;
  --xp-type-body-l-semibold: 600 18px/28px var(--xp-font-family);
  --xp-type-body-l-semibold-size: 18px;
  --xp-type-body-l-semibold-lh: 28px;
  --xp-type-body-l-semibold-weight: 600;
  --xp-type-body-l-bold: 700 18px/28px var(--xp-font-family);
  --xp-type-body-l-bold-size: 18px;
  --xp-type-body-l-bold-lh: 28px;
  --xp-type-body-l-bold-weight: 700;
  --xp-type-body-m-regular: 400 16px/24px var(--xp-font-family);
  --xp-type-body-m-regular-size: 16px;
  --xp-type-body-m-regular-lh: 24px;
  --xp-type-body-m-regular-weight: 400;
  --xp-type-body-m-medium: 500 16px/24px var(--xp-font-family);
  --xp-type-body-m-medium-size: 16px;
  --xp-type-body-m-medium-lh: 24px;
  --xp-type-body-m-medium-weight: 500;
  --xp-type-body-m-semibold: 600 16px/24px var(--xp-font-family);
  --xp-type-body-m-semibold-size: 16px;
  --xp-type-body-m-semibold-lh: 24px;
  --xp-type-body-m-semibold-weight: 600;
  --xp-type-body-m-bold: 700 16px/24px var(--xp-font-family);
  --xp-type-body-m-bold-size: 16px;
  --xp-type-body-m-bold-lh: 24px;
  --xp-type-body-m-bold-weight: 700;
  --xp-type-body-s-regular: 400 14px/20px var(--xp-font-family);
  --xp-type-body-s-regular-size: 14px;
  --xp-type-body-s-regular-lh: 20px;
  --xp-type-body-s-regular-weight: 400;
  --xp-type-body-s-medium: 500 14px/20px var(--xp-font-family);
  --xp-type-body-s-medium-size: 14px;
  --xp-type-body-s-medium-lh: 20px;
  --xp-type-body-s-medium-weight: 500;
  --xp-type-body-s-semibold: 600 14px/20px var(--xp-font-family);
  --xp-type-body-s-semibold-size: 14px;
  --xp-type-body-s-semibold-lh: 20px;
  --xp-type-body-s-semibold-weight: 600;
  --xp-type-body-s-semibold-italic: italic 600 14px/20px var(--xp-font-family);
  --xp-type-body-s-semibold-italic-size: 14px;
  --xp-type-body-s-semibold-italic-lh: 20px;
  --xp-type-body-s-semibold-italic-weight: 600;
  --xp-type-body-s-bold: 700 14px/20px var(--xp-font-family);
  --xp-type-body-s-bold-size: 14px;
  --xp-type-body-s-bold-lh: 20px;
  --xp-type-body-s-bold-weight: 700;
  --xp-type-label-l-medium: 500 16px/20px var(--xp-font-family);
  --xp-type-label-l-medium-size: 16px;
  --xp-type-label-l-medium-lh: 20px;
  --xp-type-label-l-medium-weight: 500;
  --xp-type-label-l-semibold: 600 16px/20px var(--xp-font-family);
  --xp-type-label-l-semibold-size: 16px;
  --xp-type-label-l-semibold-lh: 20px;
  --xp-type-label-l-semibold-weight: 600;
  --xp-type-label-m-medium: 500 14px/20px var(--xp-font-family);
  --xp-type-label-m-medium-size: 14px;
  --xp-type-label-m-medium-lh: 20px;
  --xp-type-label-m-medium-weight: 500;
  --xp-type-label-m-semibold: 600 14px/20px var(--xp-font-family);
  --xp-type-label-m-semibold-size: 14px;
  --xp-type-label-m-semibold-lh: 20px;
  --xp-type-label-m-semibold-weight: 600;
  --xp-type-label-s-medium: 500 12px/16px var(--xp-font-family);
  --xp-type-label-s-medium-size: 12px;
  --xp-type-label-s-medium-lh: 16px;
  --xp-type-label-s-medium-weight: 500;
  --xp-type-label-s-semibold: 600 12px/16px var(--xp-font-family);
  --xp-type-label-s-semibold-size: 12px;
  --xp-type-label-s-semibold-lh: 16px;
  --xp-type-label-s-semibold-weight: 600;
  --xp-type-label-s-bold: 700 12px/16px var(--xp-font-family);
  --xp-type-label-s-bold-size: 12px;
  --xp-type-label-s-bold-lh: 16px;
  --xp-type-label-s-bold-weight: 700;
  --xp-type-overline-l-medium: 500 16px/20px var(--xp-font-family);
  --xp-type-overline-l-medium-size: 16px;
  --xp-type-overline-l-medium-lh: 20px;
  --xp-type-overline-l-medium-weight: 500;
  --xp-type-overline-l-semibold: 600 16px/20px var(--xp-font-family);
  --xp-type-overline-l-semibold-size: 16px;
  --xp-type-overline-l-semibold-lh: 20px;
  --xp-type-overline-l-semibold-weight: 600;
  --xp-type-overline-m-semibold: 600 12px/16px var(--xp-font-family);
  --xp-type-overline-m-semibold-size: 12px;
  --xp-type-overline-m-semibold-lh: 16px;
  --xp-type-overline-m-semibold-weight: 600;
  --xp-type-overline-s-medium: 500 11px/16px var(--xp-font-family);
  --xp-type-overline-s-medium-size: 11px;
  --xp-type-overline-s-medium-lh: 16px;
  --xp-type-overline-s-medium-weight: 500;
  --xp-type-overline-s-semibold: 600 11px/16px var(--xp-font-family);
  --xp-type-overline-s-semibold-size: 11px;
  --xp-type-overline-s-semibold-lh: 16px;
  --xp-type-overline-s-semibold-weight: 600;
}

/* -------------------------------------------------------------------- Dark
   Only the tokens whose value actually changes are redeclared. Primitive is
   single-mode by design and never appears here — dark mode is expressed by
   re-aliasing Semantic and Component roles, not by changing the ramps. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --xp-text-primary: #f0eff8;
    --xp-text-secondary: #d2d1da;
    --xp-text-tertiary: #a7a7ae;
    --xp-text-disabled: #58575c;
    --xp-text-placeholder: #a7a7ae;
    --xp-text-inverse: #1e1e20;
    --xp-text-brand: #998ad9;
    --xp-text-link: #998ad9;
    --xp-text-link-hover: #dbd0ec;
    --xp-text-link-visited: #7054c1;
    --xp-text-teal: #5fd1e0;
    --xp-text-error: #ffa199;
    --xp-text-success: #84ce87;
    --xp-text-warning: #ffd864;
    --xp-background-canvas: #141316;
    --xp-background-surface: #1e1e20;
    --xp-background-muted: #29282c;
    --xp-background-subtle: #110031;
    --xp-background-inverse: #f0eff8;
    --xp-background-disabled: #29282c;
    --xp-background-brand-hover: #7054c1;
    --xp-background-brand-pressed: #998ad9;
    --xp-background-brand-subtle: #110031;
    --xp-background-brand-deep: #110031;
    --xp-background-accent-hover: #ffd864;
    --xp-background-accent-subtle: #312600;
    --xp-background-teal-subtle: #002c31;
    --xp-background-error: #4d1111;
    --xp-background-success: #0a2e0e;
    --xp-background-warning: #312600;
    --xp-background-destructive: #f7766f;
    --xp-background-destructive-hover: #ffa199;
    --xp-background-destructive-pressed: #ffccc7;
    --xp-surface-raised: #29282c;
    --xp-surface-overlay: #343437;
    --xp-surface-sunken: #0a0a0b;
    --xp-border-default: #403f43;
    --xp-border-muted: #29282c;
    --xp-border-strong: #717177;
    --xp-border-divider: #403f43;
    --xp-border-inverse: #d2d1da;
    --xp-border-disabled: #29282c;
    --xp-border-brand: #998ad9;
    --xp-border-focus-color: #dbd0ec;
    --xp-border-focus-inner: #1e1e20;
    --xp-border-teal: #5fd1e0;
    --xp-border-error: #f7766f;
    --xp-border-success: #84ce87;
    --xp-border-warning: #ffd864;
    --xp-icon-primary: #f0eff8;
    --xp-icon-secondary: #a7a7ae;
    --xp-icon-tertiary: #717177;
    --xp-icon-disabled: #58575c;
    --xp-icon-inverse: #1e1e20;
    --xp-icon-brand: #998ad9;
    --xp-icon-teal: #5fd1e0;
    --xp-icon-error: #f7766f;
    --xp-icon-success: #84ce87;
    --xp-icon-warning: #ffd864;
    --xp-overlay-scrim: rgba(0, 0, 0, 0.75);
    --xp-overlay-hover: rgba(255, 255, 255, 0.06);
    --xp-overlay-pressed: rgba(255, 255, 255, 0.12);
    --xp-overlay-selected: rgba(163, 148, 228, 0.16);
    --xp-seat-standard-border: #717177;
    --xp-seat-stretch: #110031;
    --xp-seat-stretch-border: #998ad9;
    --xp-seat-stretch-plus: #002c31;
    --xp-seat-stretch-plus-border: #5fd1e0;
    --xp-seat-blocked: #29282c;
    --xp-seat-unavailable: #29282c;
    --xp-seat-unavailable-glyph: #a7a7ae;
    --xp-seat-selected: #5fd1e0;
    --xp-seat-selected-text: #1e1e20;
    --xp-journey-depart: #5fd1e0;
    --xp-journey-return: #f0eff8;
    --xp-journey-marker: #1e1e20;
    --xp-footer-ground: #110031;
    --xp-widget-cta-disabled: #1f004c;
  }
}

/* --- css/avelo.css --- */
/* Avelo Airlines — Global Styles */

@font-face {
    font-family: 'Krub';
    src: url("../fonts/Krub/Krub-Light.7123dd4c0ffd.woff2") format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Krub';
    src: url("../fonts/Krub/Krub-Regular.f6e5879e0d13.woff2") format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Krub';
    src: url("../fonts/Krub/Krub-Medium.f958ed6bf367.woff2") format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Krub';
    src: url("../fonts/Krub/Krub-SemiBold.826bb0aaf606.woff2") format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Krub';
    src: url("../fonts/Krub/Krub-Bold.e180b51c3a9c.woff2") format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Not yet reconciled with designs/tokens/tokens.json — closest scale values are
       {color.teal.500} (#01c2d4) / {color.teal.400} (#24ebfe), neither matches
       exactly, and {color.brand.teal} ({color.teal.700} = #057F92) is notably darker. */
    --avelo-blue: #1ABED7;

    /* body, h1-h6 and the overlay near the end of this file all ask for
       --font-family-sans-serif, and nothing had ever defined it. An undefined
       custom property makes the whole declaration invalid at computed-value
       time, so font-family fell back to the UA default and every light-DOM
       element rendered in Times. The web components were unaffected, since
       each declares Krub inside its own shadow DOM -- which is why the menu,
       footer and hero looked right while authored content (card headings,
       body copy, button labels) did not.

       Aliased to the generated token rather than restating the stack, so the
       Figma export stays the single source of truth: tokens.css is generated
       from Figma ("Avelo Foundations") and must not be hand-edited, whereas
       this file is hand-maintained.

       NOT by designs/tokens/build_tokens_css.py, which this used to credit.
       That script resolves a previous tokens.json into a different and
       smaller set of variables, none of them --xp-* prefixed; running it over
       tokens.css replaces every custom property the site relies on.

       www.aveloair.com sets `font-family: Krub, sans-serif` on body directly.
       --xp-font-family is that plus the system fallbacks. */
    --font-family-sans-serif: var(--xp-font-family);

    /* Same problem, same cause, and far wider than the font. This stylesheet
       was written against a --color-/--text-/--spacing- naming scheme that
       tokens.css never emitted: the Figma export prefixes everything --xp-.
       An audit of the built bundle found 71 of the 77 custom properties used
       here are undefined, so those declarations are dropped at computed-value
       time and silently do nothing.

       The homepage cards are the visible case. `.hp-cards` asks for
       `background: var(--color-surface-default)` with a 20px radius, and a
       radius on a transparent box is the tell -- www.aveloair.com paints that
       same section #ffffff at 20px.

       Aliased below are the colours that have an exact, unambiguous --xp-
       token. The remaining ~55 are typography, spacing, radius, z-index,
       opacity and easing, where the names do not map one-to-one -- e.g.
       --text-heading-l-font-size is a single value whereas
       --xp-type-heading-l-* is a font shorthand. Those need checking against
       production rather than guessing, and are deliberately left undefined so
       they stay visible to this audit instead of being quietly wrong. */
    --color-surface-default: var(--xp-background-surface);
    --color-surface-inverse: var(--xp-background-inverse);
    --color-white: var(--xp-background-surface);

    --color-brand-primary: var(--xp-background-brand);
    --color-brand-dark-violet: var(--xp-background-brand-deep);
    --color-brand-yellow: var(--xp-background-accent);
    --color-action-primary-subtle: var(--xp-background-brand-subtle);

    --color-text-primary: var(--xp-text-primary);
    --color-text-secondary: var(--xp-text-secondary);
    --color-text-brand: var(--xp-text-brand);
    --color-text-inverse: var(--xp-text-inverse);
    --color-text-link: var(--xp-text-link);
    --color-text-link-hover: var(--xp-text-link-hover);
    --color-text-link-visited: var(--xp-text-link-visited);

    --color-border-default: var(--xp-border-default);
    --color-border-focus: var(--xp-border-focus);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Was var(--border-width-md), which is undefined -- so the whole `outline`
   shorthand was dropped and there was NO global focus ring at all. Components
   set their own inside shadow DOM, which is why this went unnoticed: the
   megamenu and footer focused visibly while light-DOM links and buttons did
   not. That is WCAG 2.4.7, and it was failing site-wide. */
:focus-visible {
    outline: var(--xp-border-focus) solid var(--color-border-focus);
    outline-offset: 2px;
}

::selection {
    background-color: var(--color-action-primary-subtle);
    color: var(--color-text-primary);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------- elements
   These rules existed before and did NOTHING. Every declaration referenced a
   --text-* / --spacing-* / --border-width-* custom property that the Figma
   export has never emitted -- it prefixes everything --xp- -- and an undefined
   custom property invalidates its own declaration at computed-value time. So
   `h2 { font-size: var(--text-heading-l-font-size) }` was discarded by the
   browser, and every light-DOM heading on the site fell back to the UA default.

   That is why cms/core/static/core/styles.css exists at all: its .prose rules
   were never overriding the global typography, they were SUBSTITUTING for
   typography that never applied. Four templates opted in and got type; every
   other page's light DOM rendered at browser defaults.

   Pointed at the real tokens now. The --xp-type-* values are `font`
   shorthands -- weight size/line-height family -- so each replaces four
   declarations, and letter-spacing goes away because no token defines one and
   it was never applied anyway.

   Specificity is deliberately left at element level, and bundle.css is linked
   BEFORE {% block extra_css %} in base.html, so any page stylesheet still wins
   on its own elements. visit-delaware.css and sweepstakes.css keep their type
   exactly as before; this only reaches pages that previously had none. */

body {
    font: var(--xp-type-body-m-regular);
    font-family: var(--font-family-sans-serif);
    color: var(--color-text-primary);
    background-color: var(--color-surface-default);
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-sans-serif);
    color: var(--color-text-brand);
    margin: 0 0 var(--xp-space-16);
}

/* font-family is restated after each shorthand: `font` resets family to the
   shorthand's own value, which would drop Krub for the generic fallback. */
h1 { font: var(--xp-type-heading-xl-bold);  font-family: var(--font-family-sans-serif); }
h2 { font: var(--xp-type-heading-l-bold);   font-family: var(--font-family-sans-serif); }
h3 { font: var(--xp-type-heading-m-bold);   font-family: var(--font-family-sans-serif); }
h4 { font: var(--xp-type-heading-s-bold);   font-family: var(--font-family-sans-serif); }
h5 { font: var(--xp-type-heading-xs-bold);  font-family: var(--font-family-sans-serif); }
h6 { font: var(--xp-type-heading-xxs-bold); font-family: var(--font-family-sans-serif); }

p, ul, ol {
    margin: 0 0 var(--xp-space-16);
}

hr {
    height: var(--xp-border-thin);
    margin: var(--xp-space-32) 0;
    border: none;
    background-color: var(--color-border-default);
}

img, picture, svg, video, canvas {
    display: block;
    max-width: 100%;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

/* ------------------------------------------------------------------ measure
   There is deliberately no --xp-measure token. One existed and capped running
   text at ~71 characters a line; it was removed on 5 Sep 2026 because prose on
   these pages runs the full 1100 column, matching production and the Figma
   frames. Both typography references argue for a 45-75 measure and that is a
   real trade — it was made knowingly, page width over line length.

   If it comes back, it belongs in the token source, not here. */

a {
    color: var(--color-text-link);
    transition: color var(--duration-fast) var(--easing-standard);
}

a:hover {
    color: var(--color-text-link-hover);
}

a:visited {
    color: var(--color-text-link-visited);
}

.container-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 16px;
}


body.page-homepage {
    background-color: #ede7f6;
}

/* ── Homepage feature cards (icon + button) ───────────────
   The two-up pair under the rental banner. Distinct from .hp-cards below,
   which is the previous build's image-topped promo row: these are xp-feature-card
   components, so everything inside a card belongs to the component and only
   the row lives here.

   No height on the cards, and no align-items override. Stretch is the default
   and it is doing real work -- it equalises the two cards so that each
   component's bottom-pinned CTA lands on the same line. Setting a height here,
   or switching this to flex-start, puts the buttons back out of line by
   exactly one line of copy. */
/* xp-image-band is a custom element, so it is inline until told otherwise --
   an inline box takes no vertical margin, which is why the rental banner sat
   flush against the promo row above it with no gap at all. Scoped to the home
   page: the band is used on standard and help pages too, and they set their
   own rhythm. 24px is production's. */
body.page-homepage main > xp-image-band {
    display: block;
    margin-top: 24px;
}

.hp-feature-cards {
    margin-top: 20px;
    display: flex;
    gap: 20px;
}

.hp-feature-cards > xp-feature-card {
    /* Not flex: 1. The cards carry unequal copy, and a content-based basis
       would let the wordier one claim more of the row; production splits it
       evenly at 50% regardless. */
    width: 50%;
}

@media (max-width: 820px) {
    .hp-feature-cards {
        flex-direction: column;
    }

    .hp-feature-cards > xp-feature-card {
        width: 100%;
    }
}

/* ── Homepage 3-up cards ──────────────────────────────── */
.hp-cards {
    max-width: 1100px;
    margin: 24px auto 0;
    display: flex;
    background: var(--color-surface-default);
    border-radius: 20px;
    overflow: hidden;
}

.hp-cards__card {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

.hp-cards__card:last-child {
    border-right: none;
}

.hp-cards__media {
    position: relative;
    flex-shrink: 0;
}

.hp-cards__media img {
    width: 100%;
    height: 263px;
    object-fit: cover;
    display: block;
    max-width: none;
}

.hp-cards__badge {
    position: absolute;
    top: 0;
    left: 0;
    margin: 20px 10px;
    padding: 4px 8px;
    border-radius: 16px;
    background: #fff;
    color: #40178f;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.4;
}

.hp-cards__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 20px 48px;
}

.hp-cards__heading {
    text-align: center;
    font-size: 1.4375rem;
    font-weight: 700;
    color: var(--color-text-brand);
    margin: 0 0 0;
}

.hp-cards__desc,
.hp-cards__desc p {
    text-align: center;
    margin: 16px 0;
    font-size: 1rem;
    color: #40178f;
    line-height: normal;
}

.hp-cards__cta {
    display: block;
    width: 100%;
    max-width: 385px;
    margin: auto auto 0;
    padding: 10px 16px;
    background-color: #ffcd00;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1.25rem;
    text-align: center;
    color: #4c12a1;
    text-decoration: none;
}

.hp-cards__cta:hover,
.hp-cards__cta:visited {
    color: #4c12a1;
}

@media (max-width: 56.25em) {
    .hp-cards {
        flex-direction: column;
        border-radius: 0;
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }

    .hp-cards__card {
        border-right: none;
        border-bottom: 1px solid #d7d7d7;
    }

    .hp-cards__card:last-child {
        border-bottom: none;
    }

    .hp-cards__media img {
        max-height: 316px;
    }

    .hp-cards__content {
        padding: 32px 32px 48px;
    }
}

/* ── Homepage route map ───────────────────────────────── */
.hp-route-map {
    max-width: 1100px;
    margin: 24px auto 0;
    padding: 0 16px;
    text-align: center;
}

.hp-route-map__header {
    margin-bottom: 24px;
}

.hp-route-map__heading {
    font-size: var(--text-heading-xl-font-size);
    font-weight: var(--text-heading-xl-font-weight);
    color: var(--color-text-brand);
    margin: 0 0 8px;
}

.hp-route-map__subtitle {
    font-size: 1rem;
    color: var(--color-text-primary);
    margin: 0;
}

.hp-route-map a {
    display: block;
}

.hp-route-map img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Homepage disclaimers ─────────────────────────────── */
.hp-disclaimers {
    background-color: #350d70;
    margin-top: 24px;
    padding: 40px 16px;
}

.hp-disclaimers__inner {
    max-width: 1100px;
    margin: 0 auto;
    font-size: 0.875rem;
    color: #fff;
}

.hp-disclaimers__inner p {
    margin: 0 0 1em;
    color: inherit;
}

.hp-disclaimers__inner p:last-child {
    margin-bottom: 0;
}

.hp-disclaimers__inner a {
    color: #fff;
    text-decoration: underline;
}

.hp-disclaimers__inner a:hover,
.hp-disclaimers__inner a:visited {
    color: #fff;
}

.booking-widget-section {
    display: block;
    background: #1e0546;
    padding: 40px 16px;
}

/* The banner is hidden while the mobile booking overlay is up (see base.html).
   Needed explicitly because the component sets :host { display: block }, and an
   author style inside the shadow root beats the UA's [hidden] rule — a page-level
   rule on the host element is what actually wins. */
xp-top-banner-carousel[hidden] {
    display: none;
}

/* With no hero image the rules below never apply and the band stays flat
   purple — the image and scrim are opt-in.

   Deliberately NOT `isolation: isolate` (nor any z-index here). That would make
   this section a stacking context, trapping the booking widget's expanded
   mobile sheet inside it — the sheet declares z-index: 300 to clear the promo
   row below, and confining it to a section that itself stacks at auto would put
   the promo back on top. Painting order is established by DOM order instead:
   image, then scrim, then the positioned __inner above both. */
.booking-widget-section--has-image {
    position: relative;
}

.booking-widget-section__bg,
.booking-widget-section__scrim {
    position: absolute;
    inset: 0;
}

.booking-widget-section__inner {
    position: relative;
}

.booking-widget-section__bg {
    width: 100%;
    height: 100%;
    /* The band's height comes from the widget and its width from the viewport,
       so its aspect ratio is never fixed. cover + the inline object-position
       (the editor's focal point) is what keeps the subject in frame. */
    object-fit: cover;
}

.booking-widget-section__scrim {
    background: #1e0546;
}

.booking-widget-section xp-booking-widget {
    display: block;
    width: 100%;
}

/* ── Homepage banner ──────────────────────────────────── */
/* ── The homepage column ──────────────────────────────────
   Every band on the home page sits on exactly these edges. Sharing one rule
   is the point: when each band carried its own max-width and padding they
   drifted, and the drift was visible -- the promo carousel ran 1068 wide
   while the rental banner directly below it ran 1100, a 16px step down each
   side. Production has no such step: its promotions, rental banner and cards
   all span 386..1486 at 1100 wide.

   width + min(), not max-width + padding. Padding insets the CONTENT inside
   the column, so a padded 1100 column draws 1068 of artwork and still
   occupies 1100 -- which is exactly how the two got out of step. min() gives
   a gutter only when the viewport is genuinely narrower than the column.

   This matches what xp-image-band already does internally, which is why the
   banner is not listed here: it reaches the same edges on its own. */
.hp-banner,
.hp-promo-row,
.hp-feature-cards {
    box-sizing: border-box;
    width: min(100% - 32px, 1100px);
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}

/* Production's narrow gutter is 8px a side, not 16.
   This block has to sit AFTER the rule above, not up with the other
   max-width:820 rules earlier in the file: a media query adds no specificity,
   so whichever of two equally specific rules comes last wins. Declared
   earlier, this was dead code that measured 16px and read as though it were
   doing something.

   Narrowing the column rather than setting `margin: 20px 8px 0`: the
   shorthand would reset margin-inline from auto to 8px, so that one band
   would stop centring while its neighbours carried on. */
@media (max-width: 820px) {
    .hp-banner,
    .hp-promo-row,
    .hp-feature-cards {
        width: min(100% - 16px, 1100px);
    }

    /* The band sizes itself inside its own shadow root, where this file
       cannot reach, so it takes the gutter as a custom property instead.
       Without this it keeps its 16px default and sits inset between two
       bands that have moved to 8. */
    body.page-homepage main > xp-image-band {
        --xp-image-band-gutter: 8px;
    }
}

.hp-banner {
    margin-top: 24px;
}

.hp-banner a { display: block; }

.hp-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Homepage promo row (promo card + carousel) ────────── */
.hp-promo-row {
    margin-top: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 20, not 16: production's gap. With a 1100 column it puts each half at
       540, which is the same width the feature cards below resolve to -- so
       the four cards on this page line up in two columns rather than two
       slightly different ones. */
    gap: 20px;
    align-items: stretch;
}

.hp-promo-card {
    position: relative;
    border-radius: 25px;
    overflow: hidden;
    background-size: 136%;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 300px;
}

.hp-promo-card__link {
    display: flex;
    justify-content: center;
    width: 100%;
}

.hp-promo-card img {
    width: 100%;
    height: auto;
    display: block;
}

.hp-carousel {
    border-radius: 25px;
    overflow: hidden;
}

.hp-carousel xp-carousel-slider {
    display: block;
    height: 100%;
}

@media (max-width: 56.25em) {
    .hp-promo-row {
        grid-template-columns: 1fr;
    }

    .hp-promo-card {
        min-height: 200px;
    }
}

/* ── Homepage feature items ────────────────────────────── */
.hp-features {
    max-width: 1100px;
    margin: 24px auto 0;
    background: var(--color-surface-default);
    border-radius: 20px;
}

.hp-features__row {
    display: flex;
    border-bottom: 1px solid #d7d7d7;
    padding: 20px 0;
}

.hp-features__row:last-child {
    border-bottom: none;
}

/* Gradient divider fades to transparent at the bottom for odd rows */
.hp-features__row:nth-child(odd) .hp-features__item:first-child {
    border-right: 1px solid transparent;
    border-image: linear-gradient(to top, rgba(211, 211, 211, 0), #d7d7d7);
    border-image-slice: 1;
}

/* Gradient divider fades to transparent at the top for even rows */
.hp-features__row:nth-child(even) .hp-features__item:first-child {
    border-right: 1px solid transparent;
    border-image: linear-gradient(to bottom, rgba(211, 211, 211, 0), #d7d7d7);
    border-image-slice: 1;
}

.hp-features__item {
    display: flex;
    align-items: flex-start;
    width: 50%;
    padding: 20px 36px;
}

.hp-features__icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    object-fit: contain;
}

.hp-features__text {
    margin-left: 16px;
}

.hp-features__heading {
    color: var(--color-text-brand);
    font-size: var(--text-heading-m-font-size);
    font-weight: var(--text-heading-m-font-weight);
    line-height: var(--text-heading-m-line-height);
    letter-spacing: var(--text-heading-m-letter-spacing);
    margin: 0 0 8px;
}

.hp-features__desc,
.hp-features__desc p {
    margin: 0;
    color: var(--color-text-primary);
}

@media (max-width: 56.25em) {
    .hp-features {
        border-radius: 0;
    }

    .hp-features__row {
        flex-direction: column;
        padding-top: 32px;
        padding-bottom: 0;
    }

    .hp-features__row:nth-child(odd) .hp-features__item:first-child,
    .hp-features__row:nth-child(even) .hp-features__item:first-child {
        border-right: none;
        border-image: none;
        border-bottom: 1px solid #d7d7d7;
        padding-top: 0;
    }

    .hp-features__item {
        width: 100%;
        flex-direction: column;
        align-items: center;
        padding: 32px 20px;
    }

    .hp-features__text {
        margin-left: 0;
    }

    .hp-features__heading {
        text-align: center;
        margin: 16px 0;
    }

    .hp-features__desc,
    .hp-features__desc p {
        text-align: center;
    }
}

.breadcrumbs {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.breadcrumbs a {
    text-decoration: underline;
}

.breadcrumbs-separator {
    margin: 0 4px;
}

.page-title {
    font-size: var(--text-heading-xl-font-size);
    margin-bottom: 8px;
}

.page-title-divider {
    width: 60px;
    height: 4px;
    margin: 0 0 32px;
    border: none;
    background-color: var(--avelo-blue);
}

.promo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-layout-column-gap);
    padding-top: 0;
    padding-bottom: 40px;
}

@media (min-width: 56.25em) {
    .promo-grid {
        grid-template-columns: minmax(280px, 1fr) 2fr;
    }
}

.promo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 22rem;
    padding: var(--spacing-inset-xl);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    color: var(--color-text-inverse);
}

@media (min-width: 56.25em) {
    .promo-card {
        min-height: 32rem;
    }
}

.promo-card--text {
    background-color: var(--color-surface-inverse);
}

.promo-card__media {
    position: absolute;
    inset: 0;
    z-index: var(--z-below);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.promo-card--image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: var(--z-base);
    background: linear-gradient(to top, rgba(0, 0, 0, var(--opacity-60)), rgba(0, 0, 0, var(--opacity-0)) 55%);
}

.promo-card__content {
    position: relative;
    z-index: var(--z-raised);
}

.promo-card__heading {
    color: inherit;
    margin-bottom: var(--spacing-stack-sm);
}

.promo-card--text .promo-card__heading,
.promo-card--image .promo-card__heading {
    font-size: var(--text-heading-l-font-size);
    font-weight: var(--text-heading-l-font-weight);
    line-height: var(--text-heading-l-line-height);
}

.promo-card--image .promo-card__heading {
    max-width: 32ch;
}

.promo-card__description {
    color: inherit;
    opacity: var(--opacity-90);
    margin: 0;
}

.promo-card__wordmark {
    font-size: var(--font-size-40);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-none);
    margin: 0;
}

.promo-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    margin-top: var(--spacing-stack-md);
    padding: var(--spacing-7) var(--spacing-13);
    border: var(--border-width-md) solid currentColor;
    border-radius: var(--radius-pill);
    color: inherit;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--easing-standard),
        color var(--duration-fast) var(--easing-standard);
}

.promo-card__cta:visited {
    color: inherit;
}

.promo-card__cta:hover {
    background-color: var(--color-text-inverse);
    color: var(--color-surface-inverse);
}

/* ── Newsroom ─────────────────────────────────────────── */
.nr-index__heading {
    font-size: var(--text-heading-xl-size, 2rem);
    font-weight: var(--font-weight-bold);
    margin-bottom: 16px;
}

.nr-index__intro {
    margin-bottom: 24px;
    color: var(--color-text-secondary);
}

.nr-index__tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 32px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 0;
}

.nr-index__tab {
    padding: 8px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-secondary, #555);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.nr-index__tab:hover {
    color: var(--color-brand-primary, #350d70);
}

.nr-index__tab--active {
    color: var(--color-brand-primary, #350d70);
    border-bottom-color: var(--color-brand-primary, #350d70);
}

.nr-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.nr-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nr-card__category {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-brand-primary, #350d70);
}

.nr-card__heading {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
}

.nr-card__heading a {
    color: inherit;
    text-decoration: none;
}

.nr-card__heading a:hover {
    text-decoration: underline;
}

.nr-card__date {
    font-size: 0.8125rem;
    color: var(--color-text-secondary, #666);
    margin-top: auto;
}

.nr-index__empty {
    color: var(--color-text-secondary, #666);
}

.nr-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 40px;
}

.nr-pagination__link {
    font-weight: 600;
    color: var(--color-brand-primary, #350d70);
    text-decoration: none;
}

.nr-pagination__link:hover {
    text-decoration: underline;
}

.nr-pagination__info {
    font-size: 0.875rem;
    color: var(--color-text-secondary, #666);
}

/* The newsroom ARTICLE styles used to live here. They now live in
 * static/css/newsroom.css, loaded per-page like help.css and flights.css.
 * Two copies meant `max-height: 500px` here silently beat `height: 800px`
 * there — the hero was drawn at 500 whatever the newer file said.
 * The index styles below are still owned by this file. */

@media (max-width: 48em) {
    .nr-grid {
        grid-template-columns: 1fr;
    }
}

.ds-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    background: var(--color-brand-dark-violet);
    color: var(--color-text-inverse);
    font-family: var(--font-family-sans-serif);
    padding: 2rem 1.5rem;
}

a.ds-overlay__close {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-white);
    font-size: 1.75rem;
    line-height: 1;
    text-decoration: none;
}

.ds-overlay__close:focus-visible {
    outline: 2px solid var(--color-brand-yellow);
    outline-offset: 2px;
}

.ds-overlay__inner {
    max-width: 640px;
    text-align: center;
}

.ds-overlay__logo {
    width: 180px;
    margin: 0 auto 2rem;
    display: block;
}

.ds-overlay__headline {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--color-white);
}

.ds-overlay__body {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-white);
}

.ds-overlay__body a {
    color: inherit;
    text-decoration: underline;
}

.ds-overlay__links {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}

a.ds-overlay__link {
    color: var(--color-white);
    font-weight: 600;
    text-decoration: underline;
}

.ds-overlay__link:focus-visible {
    outline: 2px solid var(--color-brand-yellow);
    outline-offset: 2px;
}