/* ==========================================================================
   ELITE TRIP - the design system.

   Built from the supplied brand (static/LOGO/): espresso black, gold, warm
   sand and white, with the arch mark and the Marcellus lockup. Laid out the
   way apple.com is laid out: one quiet type family set large and tight,
   generous space, alternating white, sand and black chapters, pill buttons,
   "Learn more ›" links, rounded tiles, a thin translucent global bar and a
   sticky local bar per page, nothing on a page that does not earn its place.

   One file for everything every page shares: tokens, base type, the shell
   (global nav, flyout menus, phone tab bar, footer, cookie card, language
   picker, the Elite Desk button), and the component vocabulary (buttons,
   links, tiles, cards, fields, notices, steps, carousels). A page
   stylesheet only lays its own page out, with these tokens.

   Two house rules run through it. Seats are full circles (owner,
   2026-10-22; the earlier round-top, flat-feet arch is retired): icon
   seats, step numerals and the Book button are round all the way. And
   nothing lifts or zooms under the pointer: a card answers with a gold
   edge; surfaces open with the Elite motions in motion.css (Unfold, Pass,
   Sunrise), never with a slide or a spring.
   ========================================================================== */

:root {
    /* --- colour ---------------------------------------------------------- */
    --c-ink: #0f1a2c;            /* Trip navy: text on light, 14.9:1 on white */            /* text on light, 16.5:1 on white */
    --c-ink-2: #1c2b45;
    --c-muted: #4f5a6b;          /* secondary text, 7.6:1 on white */          /* secondary text, 5.36:1 on white */
    --c-faint: #7c8595;          /* decoration, large text only */
    --c-line: #e5e5e7;
    --c-line-2: #d4d4d8;
    --c-bg: #ffffff;
    --c-bg-alt: #f5f7fa;         /* the blue-grey chapter */         /* the warm sand chapter (Apple's #f5f5f7) */
    --c-bg-alt-2: #eef1f6;
    --c-espresso: #0f2557;       /* the navy chapter and dark cards */       /* the black chapter, from the logo ground */
    --c-espresso-2: #14306b;
    --c-espresso-3: #1a3a7e;
    --c-gold: #2563eb;           /* the action fill (was gold): white words, 4.9:1 */
    --c-gold-hover: #1d4ed8;
    --c-gold-light: #93c5fd;     /* light blue text on navy, 12:1 */
    --c-primary: #2563eb;        /* Trip blue: tabs, icons, large fills (3.9:1, not for small text) */
    --c-primary-hover: #1d4ed8;
    --c-accent: #1d4ed8;         /* orange: prices, deals, promo marks */
    --c-accent-bg: #eef4ff;
    --c-brand-gold: #2563eb;     /* the logo gold: the dot, prices, the active underline, the hero search button */
    --c-brand-gold-deep: #1d4ed8;  /* gold on white, large text and marks only */
    --c-brand-gold-text: #1d4ed8;  /* gold for small words on white, 5:1 */
    --c-primary-soft: #eef4ff;   /* light blue chips, hero wash, soft panels */     /* gold text on black, 12.8:1 */
    --c-bronze: #1d4ed8;
    --c-link: #1d4ed8;           /* link text on light, 5.3:1 */           /* link text on light, 6.3:1 */
    --c-on-dark: #f4f4f5;
    --c-on-dark-2: #b6c2d9;      /* secondary text on black, 8:1 */
    --c-success: #1f7a4d;
    --c-success-bg: #e8f3ec;
    --c-danger: #c4281c;
    --c-danger-bg: #fbeceb;
    --c-info: #1b5faa;
    --c-info-bg: #e9f1fb;
    --c-warn: #8a5a00;
    --c-warn-bg: #fff7e6;

    /* --- type ------------------------------------------------------------ */
    --f-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
              'Helvetica Neue', Helvetica, Arial, 'Noto Sans', 'Noto Sans CJK SC',
              'Noto Sans KR', 'Noto Sans JP', 'Noto Sans Thai', sans-serif;
    --f-brand: var(--f-sans);
    --t-hero: clamp(2rem, 3.6vw, 2.75rem);     /* 56px desktop, 36px phone (apple scale) */
    --t-display: clamp(1.75rem, 3vw, 2.25rem);  /* 44px desktop, 28px phone */
    --t-section: clamp(1.5rem, 2.2vw, 1.75rem);  /* 40px desktop, 26px phone */
    --t-title: 1.25rem;  /* 28px desktop, 21px phone */
    --t-sub: 1.125rem;   /* 21px desktop, 18px phone */
    --t-lead: clamp(1rem, 1.1vw, 1.0625rem); /* 21px desktop, 17px phone */
    --t-body: 1rem;                             /* 16px, trip.com's body */
    --t-small: 0.875rem;                        /* 14px */
    --t-micro: 0.75rem;

    /* --- shape ----------------------------------------------------------- */
    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 18px;
    --r-lg: 22px;
    --r-xl: 28px;
    --r-pill: 980px;
    --sh-1: 0 1px 2px rgba(15, 26, 44, 0.04), 0 3px 10px rgba(15, 26, 44, 0.05);
    --sh-2: 0 2px 4px rgba(15, 26, 44, 0.04), 0 8px 24px rgba(15, 26, 44, 0.08);
    --sh-3: 0 10px 40px rgba(15, 26, 44, 0.12);
    --sh-4: 0 24px 64px rgba(15, 26, 44, 0.18);
    --ring: 0 0 0 4px rgba(37, 99, 235, 0.35);

    /* --- layout ---------------------------------------------------------- */
    --w-page: 1180px;
    --w-wide: 1440px;
    --w-text: 720px;
    --gutter: max(22px, calc((100vw - var(--w-page)) / 2));
    --pad: clamp(18px, 4vw, 22px);
    --nav-h: 48px;
    --local-h: 52px;
    --tab-h: 62px;
    --sp-chapter: clamp(36px, 5.5vw, 72px);
    --ease: cubic-bezier(0.28, 0.11, 0.32, 1);   /* Apple's own curve */

    /* ----------------------------------------------------------------------
       The names the engine's stylesheets and the first redesign pass read.
       They resolve onto the brand above, so a page not yet redrawn still
       lands on Elite Trip colours with readable contrast.
       ---------------------------------------------------------------------- */
    --et-jade: #0f1a2c;  --et-jade-600: #1c2b45;  --et-jade-700: #000000;
    --et-jade-900: #0f1a2c;  --et-jade-950: #0a1220;
    --et-mint: #eef4ff;  --et-mint-2: #f4f4f5;  --et-mint-3: #93c5fd;
    --et-coral: #2563eb;  --et-coral-600: #1d4ed8;  --et-coral-bright: #2563eb;
    --et-coral-soft: #eef4ff;  --et-coral-ink: #1d4ed8;
    --et-amber: #2563eb;  --et-amber-soft: #eef4ff;  --et-amber-ink: #1d4ed8;
    --et-ink: #0f1a2c;  --et-ink-2: #1c2b45;  --et-muted: #4f5a6b;
    --et-line: #e5e5e7;  --et-line-strong: #d4d4d8;  --et-control: #8792a2;
    --et-bg: #ffffff;  --et-bg-soft: #f5f7fa;  --et-bg-warm: #ffffff;
    --et-success: #1f7a4d;  --et-success-soft: #e8f3ec;
    --et-danger: #c4281c;  --et-danger-soft: #fbeceb;
    --et-info: #1b5faa;  --et-info-soft: #e9f1fb;
    --et-warn: #1d4ed8;  --et-warn-soft: #fff7e6;
    --et-r-xs: 8px;  --et-r-sm: 12px;  --et-r-md: 18px;  --et-r-lg: 22px;  --et-r-xl: 28px;  --et-r-pill: 980px;
    --et-shadow-xs: 0 1px 2px rgba(15, 26, 44, 0.05);
    --et-shadow-sm: var(--sh-1);  --et-shadow-md: var(--sh-2);  --et-shadow-lg: var(--sh-3);
    --et-ring: var(--ring);
    --et-font: var(--f-sans);
    --et-wrap: 1180px;  --et-wrap-narrow: 760px;
    --et-gutter: var(--pad);  --et-header-h: var(--nav-h);  --et-tabbar-h: var(--tab-h);
    --et-section: var(--sp-chapter);
    --et-ease: var(--ease);

    --white: #ffffff;  --canvas: #ffffff;  --surface: #ffffff;
    --surface-soft: #f5f7fa;  --surface-warm: #ffffff;
    --ink: #0f1a2c;  --ink-2: #4f5a6b;  --ink-3: #4f5a6b;  --muted: #4f5a6b;
    --line: #e5e5e7;  --line-2: #d4d4d8;
    --gold: #2563eb;  --gold-2: #93c5fd;  --gold-3: #f4f4f5;  --gold-light: #f4f4f5;  --gold-ink: #1d4ed8;
    --sky: #93c5fd;  --sky-ink: #1c2b45;
    --green: #1f7a4d;  --green-surface: #2f8f5f;  --red: #c4281c;
    --blue: #2563eb;  --blue-deep: #0f2557;
    --orange: #1d4ed8;  --orange-soft: #eef4ff;
    --shadow: var(--sh-2);
    --gradient-hero: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
    --gradient-brand: linear-gradient(180deg, #1a3a7e 0%, #0f2557 100%);
    --gradient-accent: linear-gradient(180deg, #0f1a2c 0%, #1d4ed8 100%);
    --gradient-gold: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    --font-body: var(--f-sans);  --font-display: var(--f-sans);
}

/* ==========================================================================
   BASE
   ========================================================================== */

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

/* An author `display` beats the browser's own [hidden] rule, so without this
   any flex or grid element marked hidden would stay on screen. */
[hidden] { display: none !important; }

/* iPhone (any iOS browser) zooms the whole page in when a field under 16px
   is tapped, and stays zoomed: the site then looks "too big". At 16px it
   never zooms. Only iOS matches this test. */
@supports (-webkit-touch-callout: none) {
    input, select, textarea { font-size: max(16px, 1em) !important; }
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + var(--local-h) + 12px);
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--f-sans);
    font-size: var(--t-body);
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--c-ink);
    background: var(--c-bg);
    font-synthesis: none;
    font-feature-settings: 'kern' 1, 'calt' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--f-sans);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: inherit;
    text-wrap: balance;
}
h1 { font-size: var(--t-display); line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: var(--t-section); line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-size: 1.125rem; line-height: 1.25; letter-spacing: 0; }
h4 { font-size: 1rem; line-height: 1.3; letter-spacing: 0; }
p { text-wrap: pretty; }
b, strong { font-weight: 600; }

a { color: var(--c-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.15em; }

img, svg, video { max-width: 100%; }
img { height: auto; }

/* Form controls do not inherit a font from their parent on their own. */
button, input, select, textarea, optgroup {
    font-family: inherit; font-size: 100%; line-height: inherit;
    letter-spacing: inherit; color: inherit;
}
small { font-size: max(0.8125rem, 13px); }

:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.9); outline-offset: 2px; border-radius: 6px; }
::selection { background: rgba(37, 99, 235, 0.32); color: inherit; }
::selection { background: #f4f4f5; color: var(--c-ink); }

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

/* NOTE for any sideways scroller: give it position:relative, or these
   absolutely placed labels escape its clipping and widen the page. */
.sr-only, .sr-only-x {
    position: absolute !important;
    width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* The skip link is off screen until the keyboard reaches it. */
.sr-only-focusable:focus {
    position: fixed !important; top: 8px; left: 8px; z-index: 3000;
    width: auto; height: auto; margin: 0; padding: 10px 18px;
    clip: auto; white-space: normal; border-radius: var(--r-pill);
    background: var(--c-ink); color: #fff; font-size: 0.9rem; text-decoration: none;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.et-wrap, .ap-wrap {
    width: 100%;
    max-width: calc(var(--w-page) + var(--pad) * 2);
    margin-inline: auto;
    padding-inline: var(--pad);
}
.et-wrap--narrow, .ap-wrap--text { max-width: calc(var(--w-text) + var(--pad) * 2); }
.ap-wrap--wide { max-width: calc(var(--w-wide) + var(--pad) * 2); }

/* A chapter of a page: white, sand or black. */
.et-section, .ap-chapter { padding-block: var(--sp-chapter); }
.et-section--tight, .ap-chapter--tight { padding-block: clamp(40px, 6vw, 72px); }
.et-section--soft, .ap-chapter--sand { background: var(--c-bg-alt); }
.et-section--warm { background: var(--c-bg-alt); }
.et-section--dark, .ap-chapter--dark { background: var(--c-espresso); color: var(--c-on-dark); }
.ap-chapter--black { background: #000; color: var(--c-on-dark); }
.et-section--dark h1, .et-section--dark h2, .et-section--dark h3, .et-section--dark h4,
.ap-chapter--dark h1, .ap-chapter--dark h2, .ap-chapter--dark h3, .ap-chapter--dark h4 { color: #fff; }
.ap-chapter--dark a:not([class]), .et-section--dark a:not([class]) { color: var(--c-gold-light); }

.et-page { padding-block: clamp(28px, 4vw, 48px) var(--sp-chapter); }

.et-grid { display: grid; gap: clamp(14px, 2vw, 24px); }
.et-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.et-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.et-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.et-grid--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 1068px) {
    .et-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .et-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 734px) {
    .et-grid--2 { grid-template-columns: minmax(0, 1fr); }
    /* Small things pack two to a row on a phone rather than one long column. */
    .et-grid--3, .et-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .et-head p, .et-lead, .ap-lead { margin-top: 8px; }
}
.et-stack { display: flex; flex-direction: column; gap: 16px; }
.et-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.et-row--between { justify-content: space-between; }

/* --- the headline block, Apple's centred chapter opener ----------------------- */
.et-head, .ap-head { max-width: 780px; margin-bottom: clamp(20px, 3vw, 36px); }
.et-head--center, .ap-head--center { margin-inline: auto; text-align: center; }
.et-head--split {
    max-width: none; display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px 32px; flex-wrap: wrap;
}
.et-head p, .et-lead, .ap-lead {
    margin-top: 14px; font-size: var(--t-lead); line-height: 1.38;
    letter-spacing: 0.011em; color: var(--c-muted);
}
.ap-chapter--dark .et-head p, .ap-chapter--dark .ap-lead, .et-section--dark .et-head p,
.et-section--dark .et-lead { color: var(--c-on-dark-2); }

/* The small line above a headline. */
.et-eyebrow, .ap-eyebrow {
    display: block; margin-bottom: 10px;
    font-size: var(--t-lead); font-weight: 600; line-height: 1.2; letter-spacing: 0.011em;
    color: var(--c-bronze);
}
.et-eyebrow--plain { color: var(--c-muted); }
.ap-chapter--dark .et-eyebrow, .ap-chapter--dark .ap-eyebrow,
.et-section--dark .et-eyebrow { color: var(--c-gold); }

/* "Learn more ›", the Apple link. */
.et-more, .ap-link {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--t-body); font-weight: 400; letter-spacing: -0.022em;
    color: var(--c-link); text-decoration: none; white-space: nowrap;
}
.et-more::after, .ap-link::after { content: "\203A"; font-size: 1.25em; line-height: 1; transform: translateY(-1px); }
.et-more i, .et-more .et-i { display: none; }
.et-more:hover, .ap-link:hover { text-decoration: underline; }
.ap-chapter--dark .et-more, .ap-chapter--dark .ap-link, .et-section--dark .et-more,
.ap-tile--dark .ap-link { color: var(--c-gold-light); }
.ap-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.et-btn, .ap-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 42px; padding: 10px 20px;
    border: 1px solid transparent; border-radius: var(--r-pill);
    font-size: var(--t-body); font-weight: 400; line-height: 1.18; letter-spacing: -0.022em;
    text-decoration: none; text-align: center; white-space: nowrap;
    cursor: pointer; user-select: none;
    background: var(--c-ink); color: #fff;
    transition: background-color 200ms var(--ease), color 200ms var(--ease),
                border-color 200ms var(--ease), box-shadow 200ms var(--ease), transform 200ms var(--ease);
}
.et-btn:hover, .ap-btn:hover { background: #000; color: #fff; text-decoration: none; }
.et-btn:active, .ap-btn:active { transform: translateY(1px); }
.et-btn:focus-visible, .ap-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.et-btn[disabled], .et-btn.is-disabled { opacity: 0.45; cursor: not-allowed; }

/* The brand action: gold with dark words. Book, request, confirm. */
.et-btn--primary, .ap-btn--gold { background: var(--c-gold); color: #fff; }
.et-btn--primary:hover, .ap-btn--gold:hover { background: var(--c-gold-hover); color: #fff; }

.et-btn--outline, .ap-btn--outline { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.et-btn--outline:hover, .ap-btn--outline:hover { background: var(--c-ink); color: #fff; }
.et-btn--ghost { background: transparent; color: var(--c-link); }
.et-btn--ghost:hover { background: var(--c-bg-alt); color: var(--c-ink); }
.et-btn--soft { background: var(--c-bg-alt); color: var(--c-ink); }
.et-btn--soft:hover { background: var(--c-bg-alt-2); color: var(--c-ink); }
/* On a black chapter. */
.et-btn--light { background: #fff; color: var(--c-ink); }
.et-btn--light:hover { background: var(--c-bg-alt); color: var(--c-ink); }
.et-btn--onDark, .ap-btn--onDark { background: transparent; color: var(--c-gold-light); border-color: var(--c-gold-light); }
.et-btn--onDark:hover, .ap-btn--onDark:hover { background: var(--c-gold-light); color: var(--c-ink); }

.et-btn--sm { min-height: 32px; padding: 5px 14px; font-size: var(--t-small); }
.et-btn--lg { min-height: 48px; padding: 12px 26px; font-size: 1rem; }
.et-btn--block { display: flex; width: 100%; }

/* ==========================================================================
   CHIPS, BADGES, PICKS
   ========================================================================== */

.et-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; border-radius: var(--r-pill);
    font-size: var(--t-micro); font-weight: 600; letter-spacing: 0;
    background: var(--c-bg-alt); color: var(--c-ink-2); white-space: nowrap;
}
.et-chip--line { background: transparent; box-shadow: inset 0 0 0 1px var(--c-line-2); }
.et-chip--coral, .et-chip--amber, .et-chip--gold { background: var(--c-warn-bg); color: var(--c-link); }
.et-chip--dark { background: var(--c-espresso); color: var(--c-gold-light); }
.et-chip--glass { background: rgba(255, 255, 255, 0.86); color: var(--c-ink); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* A chip that is a control: filters, quick picks. */
.et-pick {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 40px; padding: 8px 18px;
    border: 1px solid var(--c-line-2); border-radius: var(--r-pill);
    background: #fff; color: var(--c-ink);
    font-size: var(--t-small); letter-spacing: -0.01em; text-decoration: none; cursor: pointer;
    transition: border-color 200ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease);
}
.et-pick:hover { border-color: var(--c-ink); text-decoration: none; color: var(--c-ink); }
.et-pick[aria-pressed="true"], .et-pick.on, .et-pick.is-on { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }

.et-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.22); }
.et-rating { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: var(--t-small); }
.et-rating i, .et-rating .et-i { color: var(--c-gold); }

/* The Concierge mark: the crest in a gold arch window, wherever Concierge
   speaks. (The class keeps the chapter's code name.) */
.et-premier-mark {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 42px; height: 42px; padding-top: 4px; border-radius: 999px;
    background: var(--c-espresso); color: #fff;
    box-shadow: inset 0 0 0 1.5px var(--c-gold);
    font-size: 1.15rem; vertical-align: middle;
}
.et-premier-mark--lg { width: 66px; height: 76px; padding-top: 6px; font-size: 1.8rem; }

/* ==========================================================================
   TILES AND CARDS
   ========================================================================== */

.et-card, .ap-card {
    background: #fff; border-radius: var(--r-md);
    box-shadow: var(--sh-1);
}
.et-card--pad, .ap-card--pad { padding: clamp(22px, 2.6vw, 32px); }
.et-card--flat { box-shadow: none; border: 1px solid var(--c-line); }
.et-card--soft, .ap-card--sand { background: var(--c-bg-alt); box-shadow: none; }
.et-card--lift, .ap-card--lift { transition: box-shadow 260ms var(--et-ease-glide, var(--ease)); }
.et-card--lift:hover, .ap-card--lift:hover { box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.55), var(--sh-2); }

/* The icon seat used by feature lists: an arch, round top and flat feet. */
.et-ico {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 44px; height: 44px; padding-top: 2px; border-radius: 999px;
    background: var(--c-bg-alt); color: var(--c-ink); font-size: 1.15rem;
}
.et-ico--coral, .et-ico--amber, .et-ico--gold { background: var(--c-espresso); color: #fff; }
.et-ico--dark { background: rgba(255, 255, 255, 0.1); color: var(--c-gold); }
.et-ico--sm { width: 36px; height: 38px; font-size: 1rem; }

/* A feature: icon, title, one or two lines. */
.et-feature { display: flex; gap: 16px; align-items: flex-start; }
.et-feature h3, .et-feature h4 { font-size: 1.0625rem; letter-spacing: -0.022em; margin-bottom: 4px; }
.et-feature p { font-size: var(--t-small); line-height: 1.43; color: var(--c-muted); }
.ap-chapter--dark .et-feature p, .et-section--dark .et-feature p { color: var(--c-on-dark-2); }

/* A photo tile that is one big link. The photograph never zooms or moves
   (the owner's rule), and the tile does not lift: a gold edge answers the
   pointer instead. */
.et-tile {
    position: relative; display: block; overflow: hidden; isolation: isolate;
    border-radius: var(--r-md); background: var(--c-espresso); color: #fff; text-decoration: none;
    transition: box-shadow 260ms var(--et-ease-glide, var(--ease));
}
.et-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.et-tile::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(15, 26, 44, 0) 40%, rgba(15, 26, 44, 0.82) 100%);
}
.et-tile:hover { color: #fff; text-decoration: none; box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.7), var(--sh-2); }

/* ---------------------------------------------------------------------------
   THE APPLE TILE: a full-bleed chapter card with a centred headline, a
   line, two links and a picture. Stacked full width, or two to a row.
   --------------------------------------------------------------------------- */
.ap-tiles { display: grid; gap: 12px; padding: 12px; }
.ap-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ap-tile {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    min-height: 0; padding: clamp(28px, 4vw, 48px) 20px 0;
    background: var(--c-bg-alt); color: var(--c-ink);
}
.ap-tiles > .ap-tile { border-radius: 0; }
.ap-tile--white { background: #fff; }
.ap-tile--dark { background: var(--c-espresso); color: var(--c-on-dark); }
.ap-tile--black { background: #000; color: var(--c-on-dark); }
.ap-tile h2, .ap-tile h3 { font-size: var(--t-display); font-weight: 600; letter-spacing: -0.005em; }
.ap-tiles--2 .ap-tile h2, .ap-tiles--2 .ap-tile h3 { font-size: var(--t-section); }
.ap-tile__sub { margin-top: 8px; font-size: var(--t-sub); line-height: 1.14; letter-spacing: 0.007em; }
.ap-tiles--2 .ap-tile__sub { font-size: var(--t-lead); }
.ap-tile--dark .ap-tile__sub, .ap-tile--black .ap-tile__sub { color: var(--c-on-dark); }
.ap-tile__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; margin-top: 20px; }
.ap-tile__art { position: relative; width: 100%; margin-top: auto; padding-top: 28px; }
.ap-tile__art img { display: block; width: 100%; height: clamp(240px, 32vw, 400px); object-fit: cover; border-radius: var(--r-md) var(--r-md) 0 0; }
.ap-tile--bleed .ap-tile__art { position: absolute; inset: 0; padding: 0; z-index: -1; }
.ap-tile--bleed .ap-tile__art img { height: 100%; border-radius: 0; }
.ap-tile--bleed::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.08) 46%, rgba(0,0,0,0) 100%); }
.ap-tile--bleed { color: #fff; }
.ap-tile--bleed .ap-link { color: #fff; }
@media (max-width: 734px) {
    .ap-tiles--2 { grid-template-columns: minmax(0, 1fr); }
    .ap-tile { min-height: 0; }
}

/* ---------------------------------------------------------------------------
   THE CAROUSEL: a sideways row of tall rounded cards, Apple's "Get to know".
   --------------------------------------------------------------------------- */
.ap-rail { position: relative; }
.ap-rail__track {
    position: relative;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;
    padding: 8px var(--gutter) 24px;
}
.ap-rail__track::-webkit-scrollbar { display: none; }
.ap-rail__track > * { scroll-snap-align: start; }
.ap-rail__paddles { display: none; }
.ap-paddle {
    display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: rgba(212, 212, 216, 0.64); color: rgba(15, 26, 44, 0.7); cursor: pointer;
    transition: background-color 200ms var(--ease), opacity 200ms var(--ease);
}
.ap-paddle:hover { background: rgba(212, 212, 216, 0.9); color: var(--c-ink); }
.ap-paddle[disabled] { opacity: 0.4; cursor: default; }

/* ==========================================================================
   THE LOCAL BAR: page title on the left, links and the action on the right,
   sticky under the global bar, as on every Apple product page.
   ========================================================================== */
.ap-localnav {
    position: sticky; top: 0; z-index: 900;
    height: var(--local-h);
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.ap-localnav__in {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    height: 100%; max-width: calc(var(--w-wide) + var(--pad) * 2); margin-inline: auto; padding-inline: var(--pad);
}
.ap-localnav__title { font-size: 1.3125rem; font-weight: 600; letter-spacing: 0.011em; color: var(--c-ink); text-decoration: none; white-space: nowrap; }
.ap-localnav__title:hover { text-decoration: none; color: var(--c-ink); }
.ap-localnav__menu { display: flex; align-items: center; gap: 22px; }
.ap-localnav__menu a:not(.et-btn) { font-size: var(--t-micro); letter-spacing: -0.01em; color: var(--c-ink); opacity: 0.88; }
.ap-localnav__menu a:not(.et-btn):hover { opacity: 1; color: var(--c-link); text-decoration: none; }
.ap-localnav__menu a[aria-current="page"] { opacity: 0.56; pointer-events: none; }
.ap-localnav .et-btn { min-height: 28px; padding: 4px 13px; font-size: var(--t-micro); }
.ap-localnav--dark { background: rgba(15, 26, 44, 0.72); border-bottom-color: rgba(255, 255, 255, 0.14); }
.ap-localnav--dark .ap-localnav__title, .ap-localnav--dark .ap-localnav__menu a:not(.et-btn) { color: var(--c-on-dark); }
@media (max-width: 734px) {
    .ap-localnav__menu a:not(.et-btn) { display: none; }
}

/* ==========================================================================
   FORMS
   ========================================================================== */

.et-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.et-field > label, .et-label { font-size: var(--t-small); font-weight: 600; color: var(--c-ink); letter-spacing: -0.01em; }
.et-hint { font-size: 0.8125rem; color: var(--c-muted); }
.et-error { font-size: 0.8125rem; color: var(--c-danger); }

.et-input, .et-select, .et-textarea {
    display: block; width: 100%; min-width: 0; min-height: 52px; padding: 14px 16px;
    border: 1px solid var(--c-line-2); border-radius: var(--r-sm);
    background-color: #fff; color: var(--c-ink);
    font-size: var(--t-body); line-height: 1.24;
    transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.et-input::placeholder, .et-textarea::placeholder { color: #8792a2; }
.et-input:hover, .et-select:hover, .et-textarea:hover { border-color: #8792a2; }
.et-input:focus, .et-select:focus, .et-textarea:focus { outline: none; border-color: var(--c-bronze); box-shadow: var(--ring); }
.et-textarea { min-height: 120px; resize: vertical; }
.et-select {
    -webkit-appearance: none; appearance: none; padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%231d1a17' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 17px center; background-size: 12px 8px;
}
.et-input.is-invalid, .et-select.is-invalid, .et-textarea.is-invalid { border-color: var(--c-danger); }
.et-check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--t-small); cursor: pointer; }
.et-check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--c-ink); flex: 0 0 auto; }

/* ==========================================================================
   NOTICES, EMPTY STATES, SKELETONS
   ========================================================================== */

.et-note {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 18px; border-radius: var(--r-sm);
    font-size: var(--t-small); line-height: 1.43;
    background: var(--c-bg-alt); color: var(--c-ink);
}
.et-note > i, .et-note > .et-i { flex: none; margin-top: 3px; color: var(--c-bronze); }
.et-note--success { background: var(--c-success-bg); color: #155a38; }
.et-note--success > i, .et-note--success > .et-i { color: var(--c-success); }
.et-note--warn { background: var(--c-warn-bg); color: #5c4417; }
.et-note--warn > i, .et-note--warn > .et-i { color: var(--c-bronze); }
.et-note--danger { background: var(--c-danger-bg); color: #8f1a12; }
.et-note--danger > i, .et-note--danger > .et-i { color: var(--c-danger); }
.et-note--info { background: var(--c-info-bg); color: #123f73; }
.et-note--info > i, .et-note--info > .et-i { color: var(--c-info); }
.et-note a { color: inherit; text-decoration: underline; }

.et-empty { padding: clamp(32px, 5vw, 56px) 20px; text-align: center; color: var(--c-muted); }
.et-empty i, .et-empty > .et-i { display: block; margin: 0 auto 12px; font-size: 1.8rem; color: var(--c-gold); }
.et-empty strong { display: block; margin-bottom: 6px; font-size: 1.1875rem; color: var(--c-ink); }

/* Placeholders breathe with the Dawn motion (et-dawn, motion.css): the
   light settles down the rows (--row), no band sweeps across. */
.et-skel, .skel {
    background: #f4f4f5;
    animation: et-dawn 2000ms var(--et-ease-glide, ease-in-out) infinite;
    animation-delay: calc(var(--row, 0) * 140ms);
}

/* ==========================================================================
   STEPS, ROWS, CRUMBS
   ========================================================================== */

.et-steps { list-style: none; display: grid; gap: clamp(14px, 2vw, 24px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.et-step { position: relative; padding: clamp(24px, 2.6vw, 32px); border-radius: var(--r-md); background: #fff; box-shadow: var(--sh-1); }
.et-step__n { display: inline-grid; place-items: center; width: 34px; height: 34px; padding-top: 3px; margin-bottom: 18px; border-radius: 999px; background: var(--c-ink); color: #fff; font-weight: 600; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.et-step h3 { margin-bottom: 6px; font-size: 1.1875rem; }
.et-step p { font-size: var(--t-small); color: var(--c-muted); }
@media (max-width: 734px) { .et-steps { grid-template-columns: minmax(0, 1fr); } }

.et-rows { display: grid; gap: 2px; }
.et-rowline { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: var(--t-small); color: var(--c-muted); }
.et-rowline b, .et-rowline strong { color: var(--c-ink); text-align: right; }
.et-rowline--total { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--c-line); font-size: 1.0625rem; font-weight: 600; color: var(--c-ink); }

.et-crumbs { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-bottom: 16px; list-style: none; font-size: var(--t-micro); color: var(--c-muted); }
.et-crumbs a { color: var(--c-muted); }
.et-crumbs a:hover { color: var(--c-ink); }
.et-crumbs li + li::before { content: "\203A"; margin-right: 8px; color: var(--c-faint); }

/* ==========================================================================
   THE SHELL: GLOBAL NAV
   A thin translucent black bar, as on apple.com: the mark, the words of the
   site in small type, and the language and booking at the right.
   ========================================================================== */

.navbar {
    position: sticky; top: 0; z-index: 1000;
    display: flex; align-items: center; gap: 16px;
    height: var(--nav-h);
    /* The page width, not narrower: at 1024px the words of the site ran
       into the mark on the left and the language button on the right. */
    padding-inline: max(var(--pad), calc((100vw - var(--w-page)) / 2));
    background: rgba(15, 26, 44, 0.94);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    color: rgba(255, 255, 255, 0.84);
}
.navbar.scrolled { background: rgba(15, 26, 44, 0.9); }
/* A page with a local bar stacks it under this one. */
.navbar ~ .ap-localnav, main > .ap-localnav { top: var(--nav-h); }

/* --- the mark ---------------------------------------------------------------- */
.nav-logo, .et-logo {
    display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto;
    color: inherit; text-decoration: none;
}
.nav-logo:hover, .et-logo:hover { text-decoration: none; color: inherit; }
.et-logo__mark { display: block; width: 22px; height: 25px; flex: 0 0 auto; }
.et-logo__word {
    font-family: var(--f-brand); font-size: 0.8125rem; letter-spacing: 0.32em; line-height: 1;
    color: #ffffff; white-space: nowrap; margin-right: -0.32em;
}
.et-logo--ink .et-logo__word { color: var(--c-ink); }
.et-logo--lg .et-logo__mark { width: 40px; height: 45px; }
.et-logo--lg .et-logo__word { font-size: 1.1rem; }

/* --- the words of the site ------------------------------------------------------ */
.nav-links {
    display: flex; align-items: center; justify-content: center; gap: 0;
    flex: 1 1 auto; min-width: 0; list-style: none;
}
.nav-links > li { flex: 0 0 auto; }
.nav-links > li > a, .activity-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    height: var(--nav-h); padding: 0 clamp(8px, 1vw, 13px);
    border: 0; background: transparent;
    color: rgba(255, 255, 255, 0.84);
    font-size: var(--t-micro); font-weight: 400; letter-spacing: -0.01em;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: color 240ms var(--ease);
}
.nav-links > li > a:hover, .activity-toggle:hover,
.activity-nav.open .activity-toggle { color: #fff; text-decoration: none; }
.nav-links > li > a[aria-current="page"] { color: #fff; }
.activity-toggle .et-i { font-size: 0.7rem; opacity: 0.6; transition: transform 240ms var(--et-ease-glide, var(--ease)); }
.activity-nav.open .activity-toggle .et-i { transform: rotate(-90deg); }
.nav-links a.nav-premier .et-i { color: var(--c-gold); font-size: 0.85rem; margin-right: 4px; }
.nav-links > li.nav-spacer, .nav-links > li.nav-home { display: none; }
.nav-links > li > a.nav-btn {
    height: auto; min-height: 28px; margin-left: 8px; padding: 4px 13px;
    border-radius: var(--r-pill); background: var(--c-gold); color: #fff; font-weight: 400;
}
.nav-links > li > a.nav-btn .et-i { display: none; }
.nav-links > li > a.nav-btn:hover { background: var(--c-gold-hover); color: #fff; }

/* --- the flyout menus ------------------------------------------------------------
   Apple's global-nav flyout: the full width of the window, opening down from
   the bar, a column of large links in a quiet panel. */
.activity-nav { position: static; }
.activity-dropdown {
    position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 1010;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 280px)); justify-content: center; gap: 4px 28px;
    padding: 36px max(var(--pad), calc((100vw - 980px) / 2)) 56px;
    background: rgba(22, 16, 12, 0.96);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 180ms linear, visibility 0s linear 180ms;
}
/* Opens with Unfold-down (the panel draws down from the bar), closes with
   a plain fade. */
.activity-nav.open .activity-dropdown {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity 120ms linear, visibility 0s;
    animation: et-unfold-down 260ms var(--et-ease-settle, var(--ease)) backwards;
}
.activity-card {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 12px 0; color: #ffffff; text-decoration: none;
}
.activity-card:hover { color: #fff; text-decoration: none; }
.activity-icon {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 36px; height: 36px; padding-top: 2px; border-radius: 999px;
    background: rgba(37, 99, 235, 0.14); color: var(--c-gold); font-size: 1.05rem;
}
.activity-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.activity-copy strong { font-size: 1.1875rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.009em; }
.activity-card:hover .activity-copy strong { color: var(--c-gold-light); }
.activity-copy small { font-size: var(--t-micro); line-height: 1.4; color: var(--c-on-dark-2); white-space: normal; }

/* --- right-hand cluster -------------------------------------------------------------- */
.nav-right { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.lang-picker { position: relative; }
.lang-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 10px; border: 0; border-radius: var(--r-pill);
    background: transparent; color: rgba(255, 255, 255, 0.84);
    font-size: var(--t-micro); cursor: pointer;
}
.lang-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.lang-btn .globe { font-size: 0.95rem; }
.lang-btn .chevron { font-size: 0.6rem; opacity: 0.6; }
.lang-dropdown {
    position: absolute; top: calc(100% + 10px); right: 0;
    width: 248px; max-height: min(440px, 72vh); overflow-y: auto;
    padding: 8px; list-style: none;
    background: rgba(255, 255, 255, 0.96); color: var(--c-ink);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-radius: var(--r-md); box-shadow: var(--sh-4);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 180ms linear, visibility 0s linear 180ms;
    z-index: 1010;
}
.lang-picker.open .lang-dropdown {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity 120ms linear, visibility 0s;
    animation: et-unfold-down 220ms var(--et-ease-settle, var(--ease)) backwards;
}
.lang-dropdown li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: var(--t-small); cursor: pointer; }
.lang-dropdown li > a { display: flex; align-items: center; gap: 10px; width: 100%; color: inherit; }
.lang-dropdown li > a:hover { text-decoration: none; }
.lang-dropdown li:hover { background: var(--c-bg-alt); }
.lang-dropdown li.active { background: var(--c-bg-alt-2); font-weight: 600; }
/* The language code in a hairline gold pill: no flags (a flag is a
   country, not a language). */
.lang-flag {
    display: inline-grid; place-items: center; flex: none; min-width: 30px; padding: 3px 5px;
    border: 1px solid rgba(37, 99, 235, 0.6); border-radius: 6px;
    font-size: 0.6875rem; font-weight: 600; line-height: 1; letter-spacing: 0.06em; color: var(--c-link);
}
.lang-sub { margin-left: auto; font-size: var(--t-micro); color: var(--c-muted); }

/* The translator's own widget is driven by the picker and never shown. */
#google_translate_element { display: none !important; }
.goog-te-banner-frame, .goog-te-balloon-frame, #goog-gt-tt,
.goog-te-spinner-pos, .goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
body { top: 0 !important; }
.skiptranslate iframe { display: none !important; }

/* --- the phone menu: Apple's full-window sheet of big words --------------------------- */
.hamburger {
    display: none; position: relative;
    width: 44px; height: 44px; padding: 0; border: 0;
    background: transparent; cursor: pointer;
}
.hamburger span {
    position: absolute; left: 13px; right: 13px; height: 1.5px; border-radius: 1px;
    background: #ffffff;
    transition: transform 320ms var(--ease), top 320ms var(--ease), opacity 200ms;
}
.hamburger span:nth-child(1) { top: 18px; }
.hamburger span:nth-child(2) { top: 22px; opacity: 0; }
.hamburger span:nth-child(3) { top: 26px; }
.hamburger.active span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.hamburger.active span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

.nav-backdrop { display: none; }

@media (max-width: 1068px) {
    .hamburger { display: block; }
    .navbar { justify-content: space-between; padding-inline: 8px 4px; }
    .nav-logo { padding-left: 8px; }
    .nav-links {
        position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0;
        flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
        padding: 12px clamp(28px, 8vw, 48px) calc(32px + env(safe-area-inset-bottom));
        background: var(--c-espresso);
        overflow-y: auto; overscroll-behavior: contain;
        /* Hidden by clipping, never by sliding off screen: a fixed box parked
           past the edge widens the page on a phone and the browser zooms out. */
        clip-path: inset(0 0 100% 0);
        visibility: hidden;
        transition: clip-path 420ms var(--et-ease-rise, var(--ease)), visibility 0s linear 420ms;
        z-index: 1005;
    }
    .nav-links.active { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 420ms var(--et-ease-rise, var(--ease)), visibility 0s; }
    .nav-links > li > a, .activity-toggle {
        width: 100%; height: auto; min-height: 48px; padding: 6px 0;
        justify-content: space-between;
        font-size: 1.3125rem; font-weight: 600; letter-spacing: 0.007em; color: #ffffff;
    }
    .nav-links > li.nav-home { display: block; }
    .nav-links > li.nav-cta { order: 10; margin-top: 24px; }
    .nav-links > li > a.nav-btn { justify-content: center; min-height: 52px; margin: 0; padding: 12px 22px; font-size: 1.0625rem; font-weight: 400; }
    .activity-toggle .et-i { font-size: 0.95rem; }
    .activity-dropdown {
        position: static; display: none;
        grid-template-columns: minmax(0, 1fr); gap: 0;
        margin: 0 0 12px; padding: 0 0 0 4px;
        background: transparent; box-shadow: none;
        -webkit-backdrop-filter: none; backdrop-filter: none;
        opacity: 1; visibility: visible; pointer-events: auto;
    }
    .activity-nav.open .activity-dropdown { display: grid; animation-duration: 220ms; }
    .activity-copy strong { font-size: 1.0625rem; }
    .activity-icon { width: 30px; height: 34px; font-size: 0.95rem; }
    body.nav-open { overflow: hidden; }
}

/* ==========================================================================
   THE SHELL: PHONE TAB BAR
   ========================================================================== */

.m-tabbar { display: none; }
@media (max-width: 734px) {
    .m-tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
        height: calc(var(--tab-h) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: rgba(255, 255, 255, 0.86);
        -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
    .m-tab {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        color: var(--c-faint); text-decoration: none;
        font-size: 0.6875rem; letter-spacing: 0;
    }
    .m-tab:hover { text-decoration: none; color: var(--c-ink); }
    .m-tab > .et-i { font-size: 1.35rem; }
    .m-tab.is-active { color: var(--c-ink); }
    .m-tab.is-active > .et-i { color: var(--c-bronze); }
    /* The booking door sits in a navy circle with a blue hairline,
       rising above the bar. */
    .m-tab--book .m-tab__seat {
        display: grid; place-items: center;
        width: 50px; height: 50px; margin-top: -20px;
        border-radius: 50%;
        background: var(--c-espresso); color: #fff; font-size: 1.25rem;
        box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.55), 0 6px 16px rgba(15, 26, 44, 0.3);
    }
    .m-tab--book { color: #fff; }
    body.has-tabbar { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); }
    /* ONE BAR AT THE BOTTOM, NEVER THREE (2026-10-29). A page with its own
       action bar under the thumb (pay, continue: .fb-bar, .to-paybar,
       .eb-bar, .hx-bar, .qr-actions) or an open sheet sets has-actionbar /
       has-sheet (base.html, flight_flow.js). The tab bar then steps aside and
       its padding goes with it; iOS 26 Safari adds its own floating address
       bar, so the action bar is the only bar of ours. The bars themselves
       sit at env(safe-area-inset-bottom) (their own stylesheets). */
    body.has-actionbar .m-tabbar, body.has-sheet .m-tabbar { display: none; }
    body.has-tabbar.has-actionbar, body.has-tabbar.has-sheet { padding-bottom: env(safe-area-inset-bottom); }
    body.has-tabbar.has-actionbar .cookie-popup, body.has-tabbar.has-actionbar .pwa-install-banner { bottom: calc(150px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   THE SHELL: FOOTER
   Apple's footer: sand, small type, columns of quiet links, the fine print.
   ========================================================================== */

.footer { background: var(--c-bg-alt); color: var(--c-muted); font-size: var(--t-micro); line-height: 1.33; letter-spacing: -0.01em; }
.footer a { color: #4f5a6b; text-decoration: none; }
.footer a:hover { color: var(--c-ink); text-decoration: underline; }
.footer-content {
    display: grid; gap: 24px 32px;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    max-width: calc(980px + var(--pad) * 2); margin-inline: auto;
    padding: 40px var(--pad) 28px;
    border-bottom: 1px solid var(--c-line-2);
}
.footer-brand p { margin-top: 14px; max-width: 34ch; font-size: var(--t-micro); line-height: 1.5; color: var(--c-muted); }
.footer-brand .et-logo__mark { width: 30px; height: 34px; }
.footer-brand .et-logo__word { color: var(--c-ink); font-size: 0.8125rem; }
.footer-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px; }
.footer-chat {
    display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 13px;
    border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 1px var(--c-line);
    font-size: var(--t-micro); font-weight: 600;
}
.footer .footer-chat { color: var(--c-ink); }
.footer .footer-chat:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--c-gold); }
.footer-chat .et-i { font-size: 1rem; color: var(--c-bronze); }
.footer-phone { font-variant-numeric: tabular-nums; }
.footer-socials { display: flex; gap: 10px; margin-top: 16px; }
.footer-socials a { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--c-ink); }
.footer-col-title { margin-bottom: 10px; font-size: var(--t-micro); font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--c-ink); }
.footer-col-title a { color: var(--c-ink); }
.footer-col ul { list-style: none; display: grid; gap: 9px; }
.footer-install { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; cursor: pointer; color: #4f5a6b; font-size: var(--t-micro); text-align: left; }
.footer-install .et-i { font-size: 1rem; color: var(--c-bronze); }
.footer-install:hover { color: var(--c-ink); text-decoration: underline; }
.footer-bottom {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
    max-width: calc(980px + var(--pad) * 2); margin-inline: auto;
    padding: 16px var(--pad) 24px;
}
.footer-bottom-links { display: flex; flex-wrap: wrap; gap: 6px 0; }
.footer-bottom-links a { padding: 0 10px; border-left: 1px solid var(--c-line-2); }
.footer-bottom-links a:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 834px) {
    .footer-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-brand { grid-column: 1 / -1; }
}
/* Two columns of links on a phone too: a single column made the footer
   longer than most of the pages above it. */
@media (max-width: 480px) {
    .footer-content { gap: 20px 18px; padding-top: 28px; }
    .footer-col ul { gap: 8px; }
}

/* ==========================================================================
   THE SHELL: COOKIE CARD, BACK TO TOP, THE ELITE DESK, INSTALL BANNER
   ========================================================================== */

.cookie-popup {
    position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 1200;
    width: min(380px, calc(100vw - 32px));
    padding: 22px; border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.94); color: var(--c-muted);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    box-shadow: var(--sh-4);
    font-size: var(--t-micro); line-height: 1.5;
    opacity: 0; visibility: hidden;
    transition: opacity 180ms linear, visibility 0s linear 180ms;
}
/* Arrives like a printed ticket (Pass), leaves with a plain fade. */
.cookie-popup.show { opacity: 1; visibility: visible; transition: none; animation: et-pass-in 420ms var(--et-ease-rise, var(--ease)) backwards; }
.cookie-popup.hide { opacity: 0; visibility: hidden; }
.cookie-icon { display: none; }
.cookie-title { margin-bottom: 6px; font-size: var(--t-body); font-weight: 600; color: var(--c-ink); }
.cookie-btns { display: flex; gap: 10px; margin-top: 16px; }
.cookie-btn { flex: 1 1 0; min-height: 36px; padding: 6px 14px; border: 0; border-radius: var(--r-pill); font-size: var(--t-small); cursor: pointer; }
.cookie-btn-accept { background: var(--c-ink); color: #fff; }
.cookie-btn-accept:hover { background: #000; }
.cookie-btn-decline { background: var(--c-bg-alt-2); color: var(--c-ink); }
@media (max-width: 734px) {
    body.has-tabbar .cookie-popup { bottom: calc(var(--tab-h) + 12px + env(safe-area-inset-bottom)); }
}

.back-to-top {
    position: fixed; right: 22px; bottom: 92px; z-index: 940;
    display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, 0.9); color: var(--c-ink); box-shadow: var(--sh-2);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    cursor: pointer; transition: opacity 260ms var(--et-ease-glide, var(--ease)), box-shadow 260ms var(--et-ease-glide, var(--ease));
}
.back-to-top:hover { box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.55), var(--sh-2); }
.back-to-top.at-top { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .back-to-top { display: none; } }

.al-fab {
    position: fixed; right: 22px; bottom: 24px; z-index: 950;
    display: inline-flex; align-items: center; gap: 9px;
    min-height: 52px; padding: 12px 20px;
    border: 0; border-radius: var(--r-pill);
    background: rgba(15, 26, 44, 0.9); color: #ffffff;
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    font-size: var(--t-small); cursor: pointer;
    box-shadow: 0 10px 30px rgba(15, 26, 44, 0.3);
    transition: background-color 240ms var(--et-ease-glide, var(--ease)), box-shadow 240ms var(--et-ease-glide, var(--ease));
}
.al-fab .et-i { font-size: 1.2rem; color: var(--c-gold); }
.al-fab:hover { background: #000; box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.6), 0 10px 30px rgba(15, 26, 44, 0.3); }
.al-fab[disabled] { opacity: 0.7; cursor: progress; }
.al-dot { position: absolute; top: 6px; right: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--c-gold); box-shadow: 0 0 0 2px var(--c-espresso); }
@media (max-width: 760px) {
    /* On a phone the button is a round icon, so it never sits over the
       page's own main button; its words stay for screen readers. */
    .al-fab { right: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 50px; min-height: 50px; height: 50px; padding: 0; justify-content: center; }
    .al-fab > span:not(.al-dot) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .al-fab .et-i { font-size: 1.35rem; }
    /* The floating button keeps clear of the iPhone home bar: the same 24px plus the safe area. */
@supports (padding: env(safe-area-inset-bottom)) { .al-fab { bottom: calc(24px + env(safe-area-inset-bottom)); } .back-to-top { bottom: calc(92px + env(safe-area-inset-bottom)); } }
.al-fab.is-lifted, body.has-tabbar .al-fab { bottom: calc(var(--tab-h) + 14px + env(safe-area-inset-bottom)); }
}

/* The Elite Desk prompts written into articles and the Vietnam Journal. */
.al-inline {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px;
    margin: 28px 0; padding: 18px 22px; border-radius: var(--r-md); background: var(--c-bg-alt);
}
.al-inline-line { font-size: var(--t-body); font-weight: 600; color: var(--c-ink); }
.al-inline-pair { display: flex; flex-wrap: wrap; gap: 8px; }
.al-inline-btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 16px;
    border: 1px solid var(--c-ink); border-radius: var(--r-pill);
    background: transparent; color: var(--c-ink); font-size: var(--t-small); text-decoration: none; cursor: pointer;
}
.al-inline-btn:hover { background: var(--c-ink); color: #fff; text-decoration: none; }
.al-inline-btn-solid { background: var(--c-ink); color: #fff; }
.al-inline-btn-solid:hover { background: #000; }
.al-inline-go { font-size: 0.74rem; opacity: 0.8; }

/* Install-the-app banner, built by pwa.js. */
.pwa-install-banner {
    position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 1150;
    width: min(420px, calc(100vw - 24px));
    /* Kept inside the screen while hidden: anything parked off screen widens the page. */
    transform: translateX(-50%); opacity: 0; visibility: hidden;
    padding: 16px; border-radius: var(--r-md);
    background: rgba(15, 26, 44, 0.94); color: #fff; box-shadow: var(--sh-4);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    transition: opacity 180ms linear, visibility 0s linear 180ms;
}
/* Opens like a phone sheet (Unfold-up), closes with a plain fade. */
.pwa-install-banner.is-visible { opacity: 1; visibility: visible; transition: none; animation: et-unfold-up 420ms var(--et-ease-rise, var(--ease)) backwards; }
.pwa-install-banner .et-i { flex: none; }
.pwa-install-row { display: flex; align-items: center; gap: 12px; padding-right: 40px; }
.pwa-install-icon { width: 44px; height: 44px; border-radius: 10px; flex: 0 0 auto; }
.pwa-install-copy { flex: 1 1 auto; min-width: 0; font-size: var(--t-micro); line-height: 1.4; color: var(--c-on-dark-2); }
.pwa-install-copy strong { display: block; font-size: var(--t-small); color: #fff; }
.pwa-install-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 40px; margin-top: 12px; padding: 8px 16px; border: 0; border-radius: var(--r-pill);
    background: var(--c-gold); color: #fff; font-size: var(--t-small); cursor: pointer;
}
.pwa-install-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; }
.pwa-manual-steps { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: var(--t-micro); line-height: 1.6; color: var(--c-on-dark-2); }
.pwa-step-sep { opacity: 0.5; margin: 0 4px; font-size: 0.85em; }
@media (max-width: 734px) {
    body.has-tabbar .pwa-install-banner { bottom: calc(var(--tab-h) + 12px + env(safe-area-inset-bottom)); }
}
/* Running as the installed app: the offer to install is redundant. */
.pwa-standalone [data-pwa-install], .pwa-standalone .pwa-install-banner { display: none !important; }

/* ==========================================================================
   MOTION
   Older pages mark blocks with data-reveal (new ones use data-et-rise from
   motion.css). Both rise with the Sunrise motion as they scroll in, through
   the shell's small IntersectionObserver in base.html. Hidden only once
   that script is in charge, so nothing is ever invisible without it.
   ========================================================================== */

.et-js [data-reveal]:not(.is-in) { opacity: 0; }
.et-js [data-reveal].is-in { animation: et-sunrise-soft 560ms var(--et-ease-rise, var(--ease)) backwards; }
.et-js [data-reveal="2"].is-in { animation-delay: 90ms; }
.et-js [data-reveal="3"].is-in { animation-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
    .et-js [data-reveal], .et-js [data-reveal]:not(.is-in) { opacity: 1; animation: none; }
}

@media print {
    .navbar, .ap-localnav, .m-tabbar, .footer, .cookie-popup, .al-fab, .back-to-top, .pwa-install-banner { display: none !important; }
}


/* ==========================================================================
   THE SHELL, AIRPAZ ARRANGEMENT (2026-10-20)
   The bar turns white with ink words, as on airpaz.com: the mark at the
   left, a row of products each with a small icon, the quieter row of
   offers, orders and help, the language and the booking button at the
   right. The page you are on is underlined in gold. The flyouts and the
   phone sheet follow it onto white. The footer gains a fifth column of
   links and the one plain line about money. Appended so nothing above
   is rewritten; every rule below only re-colours or re-spaces the shell.
   ========================================================================== */

.navbar, .navbar.scrolled {
    background: rgba(255, 255, 255, 0.96);
    color: var(--c-ink);
    border-bottom: 1px solid var(--c-line);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.navbar .et-logo__word { color: var(--c-ink); }
.nav-links { justify-content: flex-start; gap: 0; }
.nav-links > li > a, .activity-toggle {
    color: var(--c-ink);
    font-size: var(--t-small); font-weight: 600; letter-spacing: -0.012em;
    padding: 0 clamp(7px, 0.8vw, 11px);
    border-bottom: 2px solid transparent;
}
.nav-links > li > a:hover, .activity-toggle:hover,
.activity-nav.open .activity-toggle { color: var(--c-ink); }
.nav-links > li > a[aria-current="page"], .activity-nav.open .activity-toggle {
    color: var(--c-ink); border-bottom-color: var(--c-brand-gold);
}
.nav-product__ico { font-size: 1rem; color: var(--c-bronze); }
.nav-links > li.nav-secondary > a, .nav-links > li.nav-secondary > .activity-toggle {
    color: var(--c-muted); font-weight: 500;
}
.nav-links > li.nav-secondary > a:hover, .nav-links > li.nav-secondary > .activity-toggle:hover,
.nav-links > li.nav-secondary > a[aria-current="page"] { color: var(--c-ink); }
.activity-toggle .et-i--down { color: var(--c-muted); opacity: 1; }
.nav-links a.nav-premier .et-i { color: var(--c-gold-hover); }
.nav-links > li > a.nav-btn { border-bottom: 0; }

/* The flyouts: a white panel under the bar, ink words, bronze icons. */
.activity-dropdown {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 48px rgba(15, 26, 44, 0.14);
    border-bottom: 1px solid var(--c-line);
}
.activity-card { color: var(--c-ink); }
.activity-card:hover { color: var(--c-ink); }
.activity-card:hover .activity-copy strong { color: var(--c-link); }
.activity-copy small { color: var(--c-muted); }
.activity-icon { background: var(--c-bg-alt); color: var(--c-bronze); }

/* Language button and hamburger on white. */
.lang-btn { color: var(--c-ink); }
.lang-btn:hover { color: var(--c-ink); background: var(--c-bg-alt); }
.hamburger span { background: var(--c-ink); }

/* The phone sheet: white, a plain vertical list of every item, 48px rows. */
@media (max-width: 1227px) {
    .nav-links { background: #fff; border-top: 1px solid var(--c-line); }
    .nav-links > li > a, .activity-toggle { color: var(--c-ink); font-size: 1.0625rem; border-bottom: 1px solid var(--c-line); border-radius: 0; }
    .nav-links > li > a[aria-current="page"], .activity-nav.open .activity-toggle { border-bottom-color: var(--c-primary); }
    .nav-links > li.nav-secondary > a, .nav-links > li.nav-secondary > .activity-toggle { color: var(--c-ink); font-weight: 500; }
    .nav-links > li > a.nav-btn { border-bottom: 0; }
    .nav-product__ico { margin-right: 8px; }
    .nav-links > li.nav-product > a { justify-content: flex-start; gap: 0; }
    .activity-dropdown { background: var(--c-bg-alt); border-bottom: 0; box-shadow: none; padding: 4px 12px; border-radius: var(--r-sm); }
    .activity-card { color: var(--c-ink); }
}

/* The footer: the money line, then six columns on a wide screen. */
.footer-pay {
    display: flex; align-items: center; gap: 8px;
    max-width: calc(980px + var(--pad) * 2); margin-inline: auto;
    padding: 14px var(--pad) 0;
    font-size: var(--t-micro); color: var(--c-muted);
}
.footer-pay .et-i { font-size: 1rem; color: var(--c-bronze); flex: 0 0 auto; }
.footer--grid .footer-content { grid-template-columns: minmax(0, 1.3fr) repeat(5, minmax(0, 1fr)); gap: 24px 24px; }
@media (max-width: 1068px) {
    .footer--grid .footer-content { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer--grid .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 834px) {
    .footer--grid .footer-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- fitting the row ---------------------------------------------------------
   Measured in the system font at 13px semibold, the full row (fifteen words,
   six icons, the wide-tracked lockup, the language button and the gold
   button) needs about 1750px. So the sheet behind the hamburger serves every
   window under 1228px, the bar then runs the full window width (centred
   only past 1800px), and each wider band lets one more thing back in:
   1228 the lockup is the mark alone, the words are 13px with 8px padding,
   "Orders" and "Find a Host" stand in for the long labels, the Journal
   flyout and the Become link wait, the product icons wait;
   1360 the ELITETRIP word returns; 1500 the long labels return; 1600 the
   Journal flyout returns; 1800 the icons and the Become link return. Every
   hidden item stays in the hamburger sheet and the footer. */
@media (min-width: 1069px) and (max-width: 1227px) {
    .hamburger { display: block; }
    .navbar { justify-content: space-between; padding-inline: 8px 4px; }
    .nav-logo { padding-left: 8px; }
    .nav-links {
        position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0;
        flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
        padding: 12px clamp(28px, 8vw, 48px) calc(32px + env(safe-area-inset-bottom));
        background: #fff; border-top: 1px solid var(--c-line);
        overflow-y: auto; overscroll-behavior: contain;
        clip-path: inset(0 0 100% 0);
        visibility: hidden;
        transition: clip-path 420ms var(--et-ease-rise, var(--ease)), visibility 0s linear 420ms;
        z-index: 1005;
    }
    .nav-links.active { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 420ms var(--et-ease-rise, var(--ease)), visibility 0s; }
    .nav-links > li > a, .activity-toggle {
        width: 100%; height: auto; min-height: 48px; padding: 6px 0;
        justify-content: space-between; font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.007em;
    }
    .nav-links > li.nav-home { display: block; }
    .nav-links > li.nav-cta { order: 10; margin-top: 24px; }
    .nav-links > li > a.nav-btn { justify-content: center; min-height: 52px; margin: 0; padding: 12px 22px; font-size: 1.0625rem; font-weight: 400; }
    .activity-toggle .et-i { font-size: 0.95rem; }
    .activity-dropdown {
        position: static; display: none;
        grid-template-columns: minmax(0, 1fr); gap: 0;
        margin: 0 0 12px; padding: 4px 12px;
        box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
        opacity: 1; visibility: visible; pointer-events: auto;
    }
    .activity-nav.open .activity-dropdown { display: grid; animation-duration: 220ms; }
    .activity-copy strong { font-size: 1.0625rem; }
    .activity-icon { width: 30px; height: 34px; font-size: 0.95rem; }
    body.nav-open { overflow: hidden; }
}
.nav-find-short, .nav-orders-short { display: none; }
@media (min-width: 1228px) {
    .navbar { gap: 12px; padding-inline: max(var(--pad), calc((100vw - 1800px) / 2)); }
    .nav-links { flex: 1 1 auto; min-width: 0; overflow: clip; overflow-clip-margin: 4px; }
    .nav-right { flex: none; }
    .nav-links > li > a, .activity-toggle { font-size: 0.8125rem; font-weight: 600; padding: 0 8px; }
    .nav-links > li > a.nav-btn { padding: 4px 12px; margin-left: 4px; }
    .nav-product__ico { display: none; }
    .nav-links > li.nav-become { display: none; }
    .nav-links > li#vietnamNav { display: none; }
    .nav-logo .et-logo__word { display: none; }
    .nav-find-long, .nav-orders-long { display: none; }
    .nav-find-short, .nav-orders-short { display: inline; }
}
@media (min-width: 1360px) {
    .nav-logo .et-logo__word { display: inline; }
}
@media (min-width: 1500px) {
    .nav-orders-long { display: inline; }
    .nav-orders-short { display: none; }
}
@media (min-width: 1800px) {
    .nav-links > li#vietnamNav { display: block; }
}
@media (min-width: 1800px) {
    .nav-find-long { display: inline; }
    .nav-find-short { display: none; }
    .nav-product__ico { display: inline-block; }
    .nav-links > li.nav-become { display: block; }
}

/* The gold "Find a Host" button does not fit the compact bar between 1228
   and 1499px and was clipped. The search card on every page carries the
   same action, so the bar drops it there and shows it again from 1500px. */
@media (min-width: 1228px) and (max-width: 1499px) {
    .nav-links > li.nav-cta { display: none; }
}


/* TRIP ARRANGEMENT (2026-10-20): Sign In as a blue outline pill, the Private
   car product in the bar from 1600px (the Transport page and the search card
   lead there below that), and the footer's closing strip. */
.nav-links > li.nav-signin > a {
    border: 1px solid var(--c-primary); border-radius: var(--r-pill);
    color: var(--c-link); height: 36px; min-height: 36px; padding: 0 14px; align-self: center; margin-left: 6px;
}
.nav-links > li.nav-signin > a:hover { background: var(--c-primary-soft); color: var(--c-link); }
.nav-links > li.nav-signin > a[aria-current="page"] { background: var(--c-primary-soft); }
@media (max-width: 1227px) {
    .nav-links > li.nav-signin > a { border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0; height: auto; min-height: 48px; padding: 6px 0; margin: 0; }
}
@media (min-width: 1228px) and (max-width: 1599px) {
    .nav-links > li.nav-private-car { display: none; }
}
.footer-strip {
    display: grid; gap: 16px 32px; grid-template-columns: 1fr;
    max-width: calc(980px + var(--pad) * 2); margin: 24px auto 0; padding: 18px var(--pad) 0;
    border-top: 1px solid var(--c-line); font-size: var(--t-small); color: var(--c-muted);
}
@media (min-width: 700px) { .footer-strip { grid-template-columns: 1.4fr 1.2fr 0.8fr; } }
.footer-strip p { margin: 0; }
.footer-strip__h { font-weight: 600; color: var(--c-ink); margin-bottom: 4px !important; }
.footer-strip__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.footer-strip__chips li { border: 1px solid var(--c-line); border-radius: var(--r-pill); padding: 3px 10px; color: var(--c-ink); font-size: var(--t-micro); font-weight: 600; background: var(--c-bg); }
/* With Private car in the row, the long button label no longer fits at 1920:
   the short one stays at every width. */
@media (min-width: 1800px) {
    .nav-find-long { display: none; }
    .nav-find-short { display: inline; }
}


/* ==========================================================================
   THE et. BRAND, 2026-10-20: the lockup is two SVG images; the footer is
   navy with sand words; gold is the one accent.
   ========================================================================== */
.et-logo { gap: 9px; }
.et-logo__mark { width: 35px; height: 25px; }
.et-logo__word { display: block; height: 18px; width: auto; margin: 0; }
.et-logo--lg .et-logo__mark { width: 56px; height: 40px; }
.et-logo--lg .et-logo__word { height: 28px; }
.footer-brand .et-logo__mark { width: 42px; height: 30px; }
.footer-brand .et-logo__word { height: 21px; }
.footer { background: var(--c-espresso); color: var(--c-on-dark-2); }
.footer a, .footer-col-title, .footer-col-title a, .footer-install { color: var(--c-on-dark); }
.footer a:hover, .footer-install:hover { color: var(--c-gold-light); }
.footer-brand p, .footer-pay { color: var(--c-on-dark-2); }
.footer-content { border-bottom-color: rgba(255, 255, 255, 0.14); }
.footer-bottom-links a { border-left-color: rgba(255, 255, 255, 0.2); }
.footer .footer-chat, .footer-socials a { background: rgba(255, 255, 255, 0.08); color: var(--c-on-dark); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.footer .footer-chat:hover { box-shadow: inset 0 0 0 1px var(--c-brand-gold); }
.footer .footer-chat .et-i, .footer-install .et-i, .footer-pay .et-i { color: var(--c-brand-gold); }
.nav-btn-filled { background: var(--c-ink); color: #fff; }
.nav-product__ico { color: var(--c-ink); }
.nav-links a.nav-premier .et-i { color: var(--c-brand-gold-deep); }

/* The owner's master logo (2026-10-20, evening): PNG cut from the file, sized by height. */
.et-logo__mark, .et-logo--lg .et-logo__mark, .footer-brand .et-logo__mark { width: auto; }
.home-page .hm-hero__eyebrow img { width: auto; }

/* ==========================================================================
   PHONE HEADER AND MENU DRAWER (2026-10-21)
   On a phone the bar turns navy with the sand lockup, a member chip and a
   language pill that breathes gold now and then. The hamburger opens a
   white drawer from the left: the account panel, then three groups of
   plain rows, as the big booking apps do.
   ========================================================================== */
.nav-logo__ink, .nav-logo__sand { display: contents; }
.nav-logo__sand { display: none; }
.nav-member { display: none; }

@media (max-width: 768px) {
    .navbar, .navbar.scrolled { background: var(--c-espresso); border-bottom: 0; box-shadow: none; }
    .nav-logo__ink { display: none; }
    .nav-logo__sand { display: contents; }
    .navbar .et-logo__word { color: var(--c-on-dark); }
    .hamburger span { background: #fff; }

    .nav-member {
        display: inline-flex; align-items: center; gap: 6px;
        height: 32px; padding: 0 10px 0 4px; border-radius: var(--r-pill);
        background: rgba(255, 255, 255, 0.08); color: #fff;
        font-size: 0.8125rem; font-weight: 700; text-decoration: none; white-space: nowrap;
    }
    .nav-member:hover { color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.14); }
    .nav-member__badge {
        display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
        background: linear-gradient(145deg, #93c5fd, var(--c-brand-gold) 55%, var(--c-brand-gold-deep));
        color: var(--c-ink); font-size: 0.8rem;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
    }

    .lang-btn {
        position: relative; height: 32px; padding: 0 10px; color: #fff;
        background: rgba(255, 255, 255, 0.08);
        box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.45);
    }
    .lang-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.14); }
    .lang-btn .globe { color: var(--c-brand-gold); animation: et-globe-turn 9s var(--ease) 1.2s infinite; }
    .lang-btn::after {
        content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55);
        animation: et-lang-breathe 9s ease-out 1.2s infinite;
    }
}
@keyframes et-globe-turn { 0% { transform: rotate(0); } 8% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } }
@keyframes et-lang-breathe { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55); } 10% { box-shadow: 0 0 0 7px rgba(37, 99, 235, 0); } 100% { box-shadow: 0 0 0 7px rgba(37, 99, 235, 0); } }

/* The drawer. Hidden by clipping, never parked past the edge (a fixed box
   off screen widens the page on a phone). */
.m-drawer {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1100;
    width: min(86vw, 380px); overflow-y: auto; overscroll-behavior: contain;
    background: #fff; color: var(--c-ink);
    border-radius: 0 20px 20px 0; box-shadow: var(--sh-4);
    clip-path: inset(0 100% 0 0); visibility: hidden;
    transition: clip-path 380ms var(--et-ease-rise, var(--ease)), visibility 0s linear 380ms;
    padding-bottom: env(safe-area-inset-bottom);
}
.m-drawer.is-open { clip-path: inset(0 0 0 0 round 0 20px 20px 0); visibility: visible; transition: clip-path 380ms var(--et-ease-rise, var(--ease)), visibility 0s; }
body.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 1090; background: rgba(10, 18, 32, 0.45); }

.m-drawer__top {
    position: relative; overflow: hidden; isolation: isolate;
    padding: 28px 22px 24px;
    background: linear-gradient(120deg, #fff 0%, #fff 38%, var(--c-bg-alt) 62%, #f4f4f5 100%);
    box-shadow: 0 1px 0 var(--c-line);
}
.m-drawer__rings {
    position: absolute; z-index: -1; right: -110px; top: -70px; width: 260px; height: auto;
    fill: none; stroke: var(--c-brand-gold); stroke-width: 1; stroke-opacity: 0.6;
}
.m-drawer__rings .m-drawer__sun { fill: var(--c-brand-gold); stroke: none; }
.m-drawer__mark { display: block; width: 40px; height: auto; margin-bottom: 14px; }
.m-drawer__title { max-width: 240px; margin: 0 0 16px; font-size: 1.125rem; font-weight: 700; line-height: 1.3; color: var(--c-ink); }
.m-drawer__btn {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
    border-radius: 10px; background: var(--c-espresso); color: #fff;
    font-size: 0.9375rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 6px 16px rgba(15, 26, 44, 0.22);
}
.m-drawer__btn:hover { background: var(--c-espresso-3); color: #fff; text-decoration: none; }
.m-drawer__close {
    position: absolute; top: 12px; right: 12px; display: grid; place-items: center;
    width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, 0.8); color: var(--c-ink); cursor: pointer;
}

.m-drawer__group { list-style: none; margin: 0; padding: 10px 0; }
.m-drawer__group + .m-drawer__group { border-top: 1px solid var(--c-line-2); }
.m-drawer__group a {
    display: flex; align-items: center; gap: 18px;
    min-height: 50px; padding: 0 24px;
    font-size: 1.0625rem; font-weight: 500; color: var(--c-ink); text-decoration: none;
}
.m-drawer__group a:hover, .m-drawer__group a:focus-visible { background: var(--c-bg-alt); color: var(--c-ink); text-decoration: none; }
.m-drawer__group .et-i { flex: none; width: 22px; height: 22px; font-size: 1.25rem; color: var(--c-espresso); }
.m-drawer__new {
    margin-left: 4px; padding: 3px 10px; border-radius: var(--r-pill);
    background: var(--c-brand-gold); color: #fff;
    font-size: 0.75rem; font-style: normal; font-weight: 700; letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
    .lang-btn .globe, .lang-btn::after { animation: none; }
    .m-drawer, .m-drawer.is-open { transition: none; }
}
/* Fitting the phone bar: 390px wide holds the lockup, chip, pill and menu. */
@media (max-width: 768px) {
    .navbar { gap: 8px; padding-inline: 4px 0; }
    .nav-right { gap: 6px; }
    .lang-btn { gap: 4px; padding: 0 9px; }
    .lang-btn .chevron { display: none; }
    .hamburger { width: 40px; }
}
@media (max-width: 400px) {
    .navbar .et-logo__word { height: 14px; }
    .navbar .et-logo__mark { width: 30px; height: auto; }
}
@media (max-width: 350px) {
    .nav-member > span:last-child { display: none; }
    .nav-member { padding-right: 4px; }
}

/* ==========================================================================
   THE SHELL, 2026-10-21: THE BOOK SHEET, THE CURRENCY PICKER AND THE
   FOOTER IDENTITY (base.html). Home · Deals · [Book] · Trips · Profile.
   ========================================================================== */

/* The Book tab is a control now; its word reads like the other tabs. */
.m-tab--book { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.m-tab--book > span:last-child { color: var(--c-faint); }
.m-tab--book.is-active > span:last-child, .m-tab--book[aria-expanded="true"] > span:last-child { color: var(--c-ink); }
.m-tab--book:focus-visible { outline: none; }
.m-tab--book:focus-visible .m-tab__seat { box-shadow: var(--ring), inset 0 0 0 1px rgba(37, 99, 235, 0.55); }

/* The sheet: hidden by visibility (never parked off screen), opened by the
   script's .is-open or, with no script, by :target. */
.m-sheet {
    position: fixed; inset: 0; z-index: 1080;
    display: flex; align-items: flex-end; justify-content: center;
    visibility: hidden; pointer-events: none;
    transition: visibility 0s linear 320ms;
}
.m-sheet.is-open, html:not(.et-sheet-js) .m-sheet:target {
    visibility: visible; pointer-events: auto; transition: visibility 0s;
}
.m-sheet__backdrop {
    position: absolute; inset: 0; background: rgba(10, 18, 32, 0.5);
    opacity: 0; transition: opacity 240ms linear;
}
.m-sheet.is-open .m-sheet__backdrop, html:not(.et-sheet-js) .m-sheet:target .m-sheet__backdrop { opacity: 1; }
.m-sheet__panel {
    position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 18px calc(20px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0; background: #fff; color: var(--c-ink);
    box-shadow: 0 -12px 40px rgba(15, 26, 44, 0.22);
    transform: translateY(100%);
    transition: transform 320ms var(--et-ease-rise, var(--ease));
}
.m-sheet__panel:focus { outline: none; }
.m-sheet.is-open .m-sheet__panel, html:not(.et-sheet-js) .m-sheet:target .m-sheet__panel { transform: none; }
@media (min-width: 735px) {
    .m-sheet { align-items: center; }
    .m-sheet__panel { border-radius: 22px; }
}
.m-sheet__grip { display: block; width: 40px; height: 4px; margin: 2px auto 10px; border-radius: 4px; background: var(--c-line-2); }
.m-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.m-sheet__title { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--c-ink); }
.m-sheet__close {
    display: grid; place-items: center; flex: none; width: 36px; height: 36px;
    border-radius: 50%; background: var(--c-bg-alt); color: var(--c-ink); text-decoration: none;
}
.m-sheet__close:hover { background: var(--c-bg-alt-2); color: var(--c-ink); text-decoration: none; }
.m-sheet__close:focus-visible, .m-sheet__grid a:focus-visible { outline: none; box-shadow: var(--ring); }

.m-sheet__where {
    display: flex; align-items: center; gap: 8px; min-height: 50px; margin-bottom: 16px; padding: 4px 4px 4px 14px;
    border-radius: var(--r-pill); background: var(--c-bg-alt); box-shadow: inset 0 0 0 1px var(--c-line);
}
.m-sheet__where:focus-within { box-shadow: inset 0 0 0 1px var(--c-brand-gold), var(--ring); }
.m-sheet__where-ico { flex: none; color: var(--c-bronze); font-size: 1.1rem; }
.m-sheet__where input {
    flex: 1 1 auto; min-width: 0; height: 42px; border: 0; background: transparent;
    font: inherit; font-size: 1rem; color: var(--c-ink);
}
.m-sheet__where input:focus { outline: none; }
.m-sheet__where input::placeholder { color: var(--c-muted); }
.m-sheet__go {
    flex: none; height: 42px; padding: 0 18px; border: 0; border-radius: var(--r-pill);
    background: var(--c-ink); color: #fff; font: inherit; font-size: var(--t-small); font-weight: 700; cursor: pointer;
}
.m-sheet__go:hover { background: var(--c-ink-2); }
.m-sheet__go:focus-visible { outline: none; box-shadow: var(--ring); }

.m-sheet__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; }
.m-sheet__grid a {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 6px 2px; border-radius: var(--r-sm);
    font-size: 0.8125rem; font-weight: 600; line-height: 1.2; text-align: center;
    color: var(--c-ink); text-decoration: none;
}
.m-sheet__grid a:hover { background: var(--c-bg-alt); color: var(--c-ink); text-decoration: none; }
.m-sheet__ico {
    display: grid; place-items: center; width: 48px; height: 48px; padding-top: 4px;
    border-radius: 999px; background: var(--c-bg-alt); color: var(--c-espresso); font-size: 1.35rem;
    box-shadow: inset 0 0 0 1px var(--c-line);
}
.m-sheet__grid a[aria-current="page"] .m-sheet__ico { background: var(--c-espresso); color: #fff; box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.55); }
body.sheet-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .m-sheet, .m-sheet.is-open, .m-sheet__panel, .m-sheet__backdrop { transition: none; }
}

/* The currency picker reuses the language picker's look; on a phone it
   lives in the drawer, so the bar keeps to one line. */
.cur-btn__code { font-weight: 700; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.cur-dropdown { width: 260px; }
.cur-dropdown .lang-flag { min-width: 40px; }
.cur-dropdown li > a[aria-current] { font-weight: 600; }
@media (max-width: 768px) {
    .cur-picker { display: none; }
}

.m-drawer__cur { padding: 14px 24px 22px; border-top: 1px solid var(--c-line-2); }
.m-drawer__cur-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 0.9375rem; font-weight: 700; color: var(--c-ink); }
.m-drawer__cur-now { padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-brand-gold); color: #fff; font-size: 0.75rem; }
.m-drawer__cur-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.m-drawer__cur-list a {
    display: inline-grid; place-items: center; min-width: 52px; min-height: 36px; padding: 0 10px;
    border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--c-line-2);
    font-size: 0.8125rem; font-weight: 600; color: var(--c-ink); text-decoration: none;
}
.m-drawer__cur-list a:hover { background: var(--c-bg-alt); color: var(--c-ink); text-decoration: none; }
.m-drawer__cur-list a.is-active { background: var(--c-espresso); color: #fff; box-shadow: none; }

/* The footer: support hours beside the contact block, and the company
   behind the trading name on its own line at the foot. */
.footer-hours { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: var(--t-micro); color: var(--c-on-dark-2); }
.footer-hours .et-i { flex: none; color: var(--c-brand-gold); }
.footer-brand p.footer-hours { margin-top: 12px; max-width: none; }
.footer-legal { flex-basis: 100%; order: 3; margin: 0; max-width: 90ch; font-size: var(--t-micro); line-height: 1.5; color: var(--c-on-dark-2); }

/* ==========================================================================
   ONE SURFACE (2026-10-21, the owner's call; white since the same day,
   --c-cream holds the colour)
   The header, the page and the tab bar are one cream, with no line between
   them; boxes lift off it as white cards with a soft shadow instead of an
   outline. Colour comes from the photographs, the navy cards and a little
   gold, never from painted bands. The ink lockup (dark letters, gold
   ".travel" and dot) is the logo on cream at every width.
   ========================================================================== */
:root { --c-cream: #ffffff; --c-bg: var(--c-cream); --sh-card: 0 1px 2px rgba(15, 26, 44, 0.05), 0 6px 20px rgba(15, 26, 44, 0.06); }
body { background: var(--c-cream); }
.navbar, .navbar.scrolled {
    background: rgba(255, 255, 255, 0.92); color: var(--c-ink);
    border-bottom: 0; box-shadow: none;
}
.navbar .nav-logo__ink { display: contents; }
.navbar .nav-logo__sand { display: none; }
.navbar .et-logo__word { color: var(--c-ink); }
.hamburger span { background: var(--c-ink); }
.activity-dropdown { background: rgba(255, 255, 255, 0.98); border-bottom: 0; }
@media (max-width: 1227px) {
    .nav-links { background: var(--c-cream); border-top: 0; }
}
@media (max-width: 768px) {
    .navbar, .navbar.scrolled { background: rgba(255, 255, 255, 0.92); }
    .nav-member { background: #fff; color: var(--c-ink); box-shadow: var(--sh-card), inset 0 0 0 1px var(--c-line); }
    .nav-member:hover { background: #fff; color: var(--c-ink); }
    .lang-btn { color: var(--c-ink); background: #fff; box-shadow: var(--sh-card), inset 0 0 0 1px rgba(37, 99, 235, 0.45); }
    .lang-btn:hover { color: var(--c-ink); background: #fff; }
}
@media (max-width: 734px) {
    .m-tabbar { background: rgba(255, 255, 255, 0.92); border-top: 0; }
}

/* SITE SCALE (2026-10-21, the owner's call): one knob for the size of the
   whole site. 1 is the designed size; 0.8 is the middle the owner chose. */
:root { --site-scale: 0.8; }
html { zoom: var(--site-scale); }
/* The phone menu drawer at the same medium size. */
@media (max-width: 768px) {
    .m-drawer { width: min(78vw, 320px); }
    .m-drawer__top { padding: 20px 18px 18px; }
    .m-drawer__mark { width: 32px; margin-bottom: 10px; }
    .m-drawer__title { font-size: 1rem; margin-bottom: 12px; }
    .m-drawer__btn { min-height: 38px; padding: 0 16px; font-size: 0.875rem; }
    .m-drawer__group { padding: 6px 0; }
    .m-drawer__group a { min-height: 42px; gap: 14px; padding: 0 18px; font-size: 0.9375rem; }
    .m-drawer__group .et-i { width: 18px; height: 18px; font-size: 1.05rem; }
}
/* The header lockup one step bigger, so it reads at the site's 0.8 scale. */
.navbar .et-logo__mark { width: auto; height: 33px; }
.navbar .et-logo__word { height: 23px; }
@media (max-width: 400px) {
    .navbar .et-logo__mark { width: auto; height: 30px; }
    .navbar .et-logo__word { height: 19px; }
}
/* PURE WHITE (2026-10-21, the owner's call): no sand anywhere. Every large
   surface is #fff; the small fills that used the sand (icon circles,
   hovers, the search bar) take a neutral grey with no warmth in it. */
:root { --c-bg-alt: #f5f7fa; }
.tsc__bar, .bd-results, .tv-hero, .bd-hero { background: #fff !important; }
/* The light chapters were drawn in --c-bg-alt; white now. Dark chapters
   (navy, the gold close) keep their own colour and their light words. */
:root { --c-bg-alt: #f5f7fa; }
/* The footer strip sat in dark words on the navy footer. */
.footer .footer-strip { color: var(--c-on-dark-2); }
.footer .footer-strip__h { color: #fff; }
/* Words that sat in navy on navy (2026-10-21): readable gold and white. */
.ap-chapter--dark .et-eyebrow, .ap-chapter--dark .ap-eyebrow { color: var(--c-gold-light) !important; }
.ap-chapter--dark .pk-step__n { background: none !important; color: var(--c-gold-light) !important; -webkit-text-fill-color: var(--c-gold-light) !important; }
.tp-city .tp-city__code { color: var(--c-gold-light) !important; }

/* ==========================================================================
   THE LEFT RAIL (2026-10-23, the owner's call, after trip.com)
   On a wide screen the products leave the top bar for a rail down the left
   edge: icon + word rows, the page you are on in a soft blue pill, a hairline
   before the quieter links, and "Become a Local Host" at the foot. The
   flyouts open in place as indented lists. The bar keeps the lockup at the
   left and trips, account, language, currency and "Find a Host" at the
   right. Under 1228px nothing changes: the hamburger and drawer serve.
   ========================================================================== */
.nav-top { display: none; }
@media (min-width: 1228px) {
    :root { --rail-w: 232px; }
    body:has(#navLinks) { padding-left: var(--rail-w); }
    body:has(#navLinks) > .navbar,
    body:has(#navLinks) > .app-bar { margin-left: calc(-1 * var(--rail-w)); }
    /* No blur on the bar here: a backdrop-filter would trap the fixed rail
       inside the bar's own box. */
    .navbar, .navbar.scrolled { padding-inline: 28px 24px; gap: 16px; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 -1px 0 var(--c-line) !important; }
    .navbar .et-logo__word, .nav-logo .et-logo__word { display: inline; }
    .nav-right { margin-left: auto; gap: 6px; }

    /* The bar's right-hand actions. */
    .nav-top {
        display: inline-flex; align-items: center; gap: 6px;
        height: 36px; padding: 0 12px; border-radius: var(--r-pill);
        color: var(--c-ink); font-weight: 600; text-decoration: none; white-space: nowrap;
    }
    .nav-top .et-i { width: 16px; height: 16px; color: var(--c-ink); }
    .nav-top:hover { background: var(--c-bg-alt); color: var(--c-ink); text-decoration: none; }
    .nav-top[aria-current="page"] { color: var(--c-link); }
    .nav-top--signin { border: 1px solid var(--c-primary); color: var(--c-link); }
    .nav-top--signin:hover { background: var(--c-primary-soft); color: var(--c-link); }
    .nav-top--signin .et-i { color: var(--c-link); }
    .nav-top--cta { order: 10; background: var(--c-primary); color: #fff; padding: 0 16px; }
    .nav-top--cta:hover { background: var(--c-primary-hover); color: #fff; }

    /* The rail itself. */
    .nav-links {
        position: fixed; top: var(--rail-top, var(--nav-h)); left: 0; bottom: 0; z-index: 990;
        width: var(--rail-w);
        flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px;
        padding: 16px 12px 20px;
        background: #fff; border-right: 1px solid var(--c-line);
        overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
        scrollbar-width: thin;
    }
    .nav-links > li { display: block; }
    .nav-links > li > a, .activity-toggle {
        display: flex; align-items: center; gap: 12px; width: 100%;
        height: auto; min-height: 42px; padding: 0 14px;
        border: 0 !important; border-radius: 10px;
        color: var(--c-ink); font-weight: 600; text-align: left;
    }
    .nav-links > li > a:hover, .activity-toggle:hover { background: var(--c-bg-alt); color: var(--c-ink); }
    .nav-links > li > a[aria-current="page"] { background: var(--c-primary-soft); color: var(--c-link); }
    .nav-links > li > a[aria-current="page"] .et-i { color: var(--c-link); }
    .nav-product__ico, .nav-links a.nav-premier .et-i {
        display: inline-block; flex: none; width: 19px; height: 19px; margin: 0; color: var(--c-ink);
    }
    .activity-toggle .et-i--down { margin-left: auto; width: 12px; height: 12px; transform: rotate(90deg); }
    .activity-nav.open .activity-toggle { background: var(--c-bg-alt); }
    .activity-nav.open .activity-toggle .et-i--down { transform: rotate(-90deg); }

    /* Every product back in view: the rail has room for all of them. */
    .nav-links > li.nav-private-car, .nav-links > li#vietnamNav,
    .nav-links > li.nav-become { display: block; }

    /* The quieter group under a hairline, no icons, muted words. */
    .nav-links > li.nav-product + li.nav-secondary { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-line); }
    .nav-links > li.nav-secondary > a, .nav-links > li.nav-secondary > .activity-toggle { color: var(--c-muted); font-weight: 500; }
    .nav-links > li.nav-secondary > a:hover, .nav-links > li.nav-secondary > .activity-toggle:hover { color: var(--c-ink); }
    /* My trips, Sign In and the button moved up to the bar. */
    .nav-links > li.nav-secondary:has(> a[href*="trips"]),
    .nav-links > li.nav-signin, .nav-links > li.nav-cta { display: none !important; }

    /* The flyouts open in place, as an indented list of titles. */
    .nav-links .activity-dropdown {
        position: static; display: none;
        grid-template-columns: minmax(0, 1fr); gap: 0;
        margin: 2px 0 6px; padding: 0 0 0 45px;
        background: none; border: 0; box-shadow: none;
        -webkit-backdrop-filter: none; backdrop-filter: none;
        opacity: 1; visibility: visible; pointer-events: auto; animation: none;
    }
    .nav-links .activity-nav.open .activity-dropdown { display: grid; }
    .nav-links .activity-card { padding: 7px 10px; border-radius: 8px; color: var(--c-muted); }
    .nav-links .activity-card:hover { background: var(--c-bg-alt); color: var(--c-ink); }
    .nav-links .activity-icon, .nav-links .activity-copy small { display: none; }
    .nav-links .activity-copy strong { font-weight: 500; line-height: 1.3; }

    /* "Become a Local Host" sits at the foot of the rail as a quiet card. */
    .nav-links > li.nav-spacer { display: block; flex: 1 1 auto; min-height: 16px; }
    .nav-links > li.nav-become > a {
        justify-content: center; min-height: 44px;
        background: var(--c-primary-soft); color: var(--c-link); font-weight: 600;
    }
    .nav-links > li.nav-become > a:hover { background: var(--c-primary); color: #fff; }
}