/* Pomelo Travel: the glossy travel monthly's opening feature.
   White stock, photographs the size of the screen, Besley (a Clarendon, solid at every size) for headlines, prices and
   pulled-out numbers, Hanken Grotesk for every sentence and control at 17px or more. Pomelo green is the magazine's spot
   colour: the department rules, the map's pins, the pull-quote marks and the one primary button. Departments are
   divided by running-head rules; the masthead's department slot follows the reader (masthead.js). */
:root {
  --green: #789d4a;            /* the spot colour: rules, middots, marks, pins. Never small text on white (3.1:1) */
  --green-700: #5f7d3a;        /* the primary button and green text on white (4.7:1) */
  --green-800: #4b652d;        /* hover; the Premium house page and the welcome offer (white 6.3:1) */
  --ink: #15170f;              /* headlines, body */
  --ink-2: #4a4e42;            /* standfirsts, running text in departments (8.1:1) */
  --ink-3: #656a5e;            /* fine print, captions, ghost features, placeholders (5.4:1) */
  --stock: #ffffff;
  --stock-2: #f4f5f0;          /* the ground behind a photograph while it loads; read-only fields */
  --rule: #d9ddd0;             /* hairlines */
  --on-photo: #ffffff;
  --on-green: #ffffff;
  --on-green-2: #e4ecd6;       /* secondary text on the green page (5.2:1 on green-800) */
  --on-ink-2: #c9ccc1;         /* secondary text on the ink page (10.9:1) */
  --error: #b3261e;            /* 6.5:1 on white; the only red */
  --success: var(--green-700);
  --focus: var(--green-700);
  --display: Besley, "Iowan Old Style", Georgia, serif;
  --text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mast-h: 3.5rem;
  --hair: 1px solid var(--rule);
  --radius-s: 6px;             /* buttons, fields, the Log in outline, the nav toggle (Chris, 24 Oct: rounded, not square) */
  --radius: 8px;               /* photographs, deal tiles, the subscribe box */
  --radius-l: 16px;            /* the membership cards and the welcome offer (Chris, 28 Oct: a generous radius) */
}
@font-face { font-family: Besley; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/join/assets/fonts/besley-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("/join/assets/fonts/hanken-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@media (min-width: 861px) { :root { --mast-h: 4.5rem; } }

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--mast-h) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; font-family: var(--text); font-size: 1.0625rem; line-height: 1.55; color: var(--ink);
  background: var(--stock); font-variant-numeric: lining-nums; overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--green); color: var(--on-green); }
img { max-width: 100%; display: block; }
a { color: var(--green-700); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--green-800); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.on-photo, .on-green, .on-ink { --focus: var(--on-photo); }
/* Headlines in Besley, roman, 700 to 800: a Clarendon's thins hold at 1x and on a phone. */
h1, h2, h3 { margin: 0 0 .5em; font-family: var(--display); font-weight: 800; line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: clamp(2.5rem, 7.2vw, 6.5rem); line-height: .96; letter-spacing: -.025em; }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
h3 { font-size: 1.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
p, li, blockquote, dd { text-wrap: pretty; overflow-wrap: break-word; }
p { margin: 0 0 1em; }
.features li, .trust li, .fineprint, .small, .answer, .plan-note, .passport-line { overflow-wrap: anywhere; }
.wrap { width: 100%; max-width: 82rem; margin: 0 auto; padding: 0 1rem; }
/* Grid and flex children shrink below their longest word, so a headline breaks instead of pushing the page wide at 200% text. */
.hero .wrap > *, .hero-copy > *, .form-row > *, .closing-grid > *, .past-grid > *, .stack > *, .flow-band .wrap > *, .two-col > *, .split > *, .compare > *, .paid-grid > *, .share > *, .band-copy > *, .line > *, .step > *, .story figure > * { min-width: 0; }
.notice strong, .checkout-head h1 span, .summary .row > span:first-child { overflow-wrap: anywhere; }
@media (min-width: 600px) { .wrap { padding: 0 2rem; } }
@media (min-width: 1100px) { .wrap { padding: 0 3rem; } }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--stock); color: var(--ink); font-weight: 600; padding: .75rem 1rem; text-decoration: none; }
.skip-link:focus { top: .5rem; }
.muted { color: var(--ink-3); }
.small { font-size: 1.0625rem; }
.center { text-align: center; }
.flush { margin: 0; }
.lead { font-size: 1.25rem; line-height: 1.45; max-width: 38rem; color: var(--ink-2); }
@media (min-width: 861px) { .lead { font-size: 1.375rem; } }
/* Tracked capitals: running heads, the map key, field labels in the subscribe box, a plan's unit. Never above a heading. */

/* Every dollar amount is set in Besley with lining figures (proportional: Besley's tabular zero is a thin glyph); packages.js rewrites the plan slots. */
.price, .summary .row > span:last-child { font-variant-numeric: lining-nums; }
.price { font-family: var(--display); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.btn [data-premium-price], .btn [data-passport-price] { font: inherit; }

/* ---------- Masthead ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--stock); border-bottom: var(--hair); }
.site-header .wrap { display: flex; align-items: center; gap: 1rem; min-height: var(--mast-h); }
/* The black horizontal logo on the white stock, no flag; the white logo stays on the ink footer. */
.logo { display: inline-flex; align-items: center; min-height: 2.75rem; }
.logo img { height: 22px; width: auto; }
@media (min-width: 861px) { .logo img { height: 30px; } }
.mast-dept { display: none; }
@media (min-width: 861px) {
  .mast-dept { display: block; margin-left: .5rem; padding-left: 1.25rem; border-left: var(--hair); color: var(--ink-2); font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
}
.nav { margin-left: auto; display: flex; gap: 1.5rem; }
@media (min-width: 861px) and (max-width: 1179px) { .mast-dept { display: none; } .nav { gap: 1.25rem; } .nav a { white-space: nowrap; } }
.nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 1rem; padding: .35rem 0; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.nav a:hover::after, .nav a:focus-visible::after { transform: none; }
.login { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem 1.1rem; border: 1px solid var(--ink); border-radius: var(--radius-s); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1rem; }
.login:hover { background: var(--ink); color: var(--stock); }
.nav-toggle { display: none; }
.steps-ind { margin-left: auto; color: var(--ink-2); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 860px) {
  .nav { position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: .25rem 1rem .75rem; background: var(--stock); border-bottom: var(--hair); flex-direction: column; gap: 0; display: none; }
  .nav.open { display: flex; }
  .nav a { padding: .8rem 0; border-bottom: var(--hair); font-size: 1.0625rem; }
  .nav a:last-child { border-bottom: 0; }
  .nav a::after { display: none; }
  .login { margin-left: auto; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--ink); border-radius: var(--radius-s); background: transparent; color: var(--ink); cursor: pointer; padding: 0; }
  .nav-toggle svg { width: 20px; height: 20px; }
}

/* ---------- The opener ---------- */
/* One photograph the size of the screen; the headline and standfirst knocked out over its foot on a scrim, the subscribe box printed
   on the page beside them (Chris, 28 Oct: side by side, the box level with the headline-and-lead block). */
.hero { position: relative; isolation: isolate; color: var(--on-photo); }
.hero-photo { position: absolute; left: 0; right: 0; top: 0; height: 100%; margin: 0; background: var(--stock-2); z-index: -1; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
/* The scrim: the only overlay on any photograph. Clear at the top so the sky stays clean, full by 40% because the copy is centred on the
   photograph (Angelo, 28 Oct); the headline's lines read at 4.5:1 or better. */
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 6, 0) 4%, rgba(8, 12, 6, .45) 16%, rgba(8, 12, 6, .7) 28%, rgba(8, 12, 6, .74) 40%, rgba(8, 12, 6, .74) 100%); }
.hero .wrap { display: grid; gap: 1rem; }
.hero-copy { display: contents; }
.hero h1 { color: var(--on-photo); max-width: 11em; margin: 0; }
.hero h1 span { display: block; }
.hero .lead { color: var(--on-photo); margin: 0; }
/* "Found by real people since 2014." (Chris's line): one sentence under the lead, a short green rule before it. */
.hero-note { display: flex; align-items: center; gap: .75rem; margin: 1rem 0 0; font-weight: 500; color: var(--on-photo); }
.hero-note::before { content: ""; width: 1.5rem; height: 3px; background: var(--green); flex: none; }
/* The subscribe box. */
.hero-form { background: var(--stock); color: var(--ink); padding: 1.25rem 1rem 1rem; border-radius: var(--radius); }
.hero-form .box-title { font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 .9rem; }
.signup-form .field label { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.signup-form .fineprint { margin: .75rem 0 0; color: var(--ink-3); }
.signup-form .fineprint a { color: var(--green-700); }
.signup-form .btn { width: 100%; }
/* Phone (Scott, 28 Oct: less busy): the photograph fills the opener; the headline and standfirst sit high on it, white on the scrim, and
   the subscribe box follows as a narrower white card inset from the edges so it stands out. The scrim darkens from the top because the
   type now sits where the sky was. No second photograph before the deals. */
@media (max-width: 860px) {
  .hero-photo::after { background: linear-gradient(180deg, rgba(8, 12, 6, .55) 0%, rgba(8, 12, 6, .62) 45%, rgba(8, 12, 6, .72) 100%); }
  .hero .wrap { padding-top: 1.75rem; padding-bottom: 1.75rem; gap: .75rem; }
  .hero h1 { font-size: min(clamp(2.125rem, 9.2vw, 3rem), 12vw); text-shadow: 0 2px 18px rgba(0, 0, 0, .3); }
  .hero .lead { font-size: 1.0625rem; max-width: 26rem; text-shadow: 0 1px 10px rgba(0, 0, 0, .3); }
  .hero-note { margin: .25rem 0 0; font-size: 1rem; text-shadow: 0 1px 10px rgba(0, 0, 0, .3); }
  .hero-form { width: min(100%, 20rem); margin: .75rem auto 0; padding: 1.25rem 1.125rem 1.125rem; box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .5); }
  .hero-form .box-title { font-size: 1.375rem; margin-bottom: .75rem; }
  .hero-form .fineprint { font-size: .9375rem; }
}
@media (min-width: 861px) {
  .hero { min-height: calc(100vh - var(--mast-h)); min-height: calc(100svh - var(--mast-h)); max-height: 56rem; display: flex; align-items: center; }
  /* Two columns centred on the photograph (Angelo, 28 Oct: not hugging its foot): the headline and standfirst left (7 of 12), the box right
     (5 of 12), the two centred on each other. */
  .hero .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; column-gap: 4rem; padding-top: 4rem; padding-bottom: 4rem; }
  .hero-copy { display: block; grid-column: 1; }
  .hero h1 { font-size: clamp(2.5rem, 4.6vw, 4.5rem); max-width: none; margin-bottom: 1rem; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
  .hero .lead { max-width: 34rem; text-shadow: 0 1px 12px rgba(0, 0, 0, .3); }
  .hero-note { text-shadow: 0 1px 12px rgba(0, 0, 0, .3); }
  .hero-form { grid-column: 2; width: 100%; max-width: 30rem; justify-self: end; padding: 1.75rem 1.75rem 1.5rem; box-shadow: 0 28px 56px -20px rgba(0, 0, 0, .45); }
  html.js .hero-form { animation: settle .22s cubic-bezier(.16, 1, .3, 1) both; }
}
@media (min-width: 861px) and (max-width: 1099px) { .hero .wrap { column-gap: 2.5rem; } }
@keyframes settle { from { transform: translateY(6px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { html.js .hero-form { animation: none; } }

/* ---------- Motion ---------- */
/* Each department arrives as the reader reaches it (reveal.js adds .in): the running-head rule draws across the page,
   headings and photographs rise 14px, and grouped items (tiles, steps, letters, plan columns, pins) follow one another at 45ms.
   Interactions answer in the same curve: the nav underline draws in, the subscribe line grows green from the left, a pin's
   label slides out, a button presses. Nothing moves under reduced motion or without JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); }
  html.js [data-reveal].in { opacity: 1; transform: none; }
  html.js .runhead[data-reveal] { opacity: 1; transform: none; }
  html.js .runhead { background-size: 0 3px; transition: background-size .9s cubic-bezier(.16, 1, .3, 1); }
  html.js .runhead.in { background-size: 100% 3px; }
  html.js [data-reveal-stagger] > * { opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * 45ms); }
  html.js [data-reveal-stagger].in > * { opacity: 1; transform: none; }
  /* The map's arrival (Scott, 31 Oct: start clean, then get busier): land only until map.js adds .arrived, then each pin pops in
     when the west-to-east sweep reaches it (--d, set by map.js); the dots follow in longitude bands (below). */
  html.js .map .pins > .pin { opacity: 0; transition: opacity .4s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--d, 0ms); }
  html.js .map.arrived .pins > .pin { opacity: 1; }
  html.js .map .pins > .pin .mark { transform: scale(0); transition: transform .5s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--d, 0ms); }
  html.js .map.arrived .pins > .pin .mark { transform: scale(calc(1 / var(--zoom))); transition-delay: var(--d, 0ms); }
  html.js .map.arrived .pins > .pin:hover .mark, html.js .map.arrived .pins > .pin:focus-visible .mark, html.js .map.arrived .pins > .pin.lit .mark { transform: scale(calc(1.5 / var(--zoom))); transition-delay: 0s; }
  @media (max-width: 860px) { html.js .map.arrived .pins > .pin .mark { transform: scale(calc(1.6 / var(--zoom))); } html.js .map.arrived .pins > .pin-reach .mark { transform: scale(calc(1.15 / var(--zoom))); } html.js .map.arrived .pins > .pin:hover .mark, html.js .map.arrived .pins > .pin:focus-visible .mark, html.js .map.arrived .pins > .pin.lit .mark { transform: scale(calc(2.2 / var(--zoom))); } }
  .mast-dept.swap { animation: slot-swap .35s cubic-bezier(.16, 1, .3, 1); }
  .faq details[open] .answer { animation: answer-in .3s cubic-bezier(.16, 1, .3, 1); }
  .btn:active { transform: translateY(1px); }
}
@keyframes slot-swap { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes answer-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Departments ---------- */
/* A running-head rule opens every department: the department name left, the magazine right, a 3px green rule beneath. */
.dept { padding: 2.5rem 0 3.5rem; }
@media (min-width: 861px) { .dept { padding: 3rem 0 5rem; } }
.runhead { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem 2rem; flex-wrap: wrap; padding-bottom: .6rem; margin-bottom: 2rem; background: linear-gradient(var(--green), var(--green)) left bottom / 100% 3px no-repeat; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--green-700); }
.runhead .mag { color: var(--ink-2); }
@media (min-width: 861px) { .runhead { margin-bottom: 3rem; } }
.section-head { max-width: 46rem; margin-bottom: 2rem; }
.section-head p { margin: 0; }
.section-head p + p { margin-top: .5em; }
@media (min-width: 861px) { .section-head { margin-bottom: 3rem; } }


/* Recent deals: ten fares Pomelo emailed in October 2026 as tiles, the old price struck beside the fare; the first two span two cells. */
.past-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.25rem 1.25rem; }
.past-grid .deal-card { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; align-items: start; }
.past-grid .deal-card .body { display: contents; }
.past-grid .deal-card > *, .past-grid .deal-card .body > * { min-width: 0; }
.past-grid .lead-deal { grid-column: 1 / -1; }
.lead-deal img { aspect-ratio: 2 / 1; }
@media (min-width: 600px) { .past-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.25rem; } .past-grid .lead-deal { grid-column: span 3; } }
@media (min-width: 1025px) { .past-grid { grid-template-columns: repeat(4, 1fr); gap: 2.5rem 1.5rem; } .past-grid .lead-deal { grid-column: span 2; } .lead-deal .dest { font-size: 1.5rem; } .lead-deal .price { font-size: 2.5rem; } }

.deal-card { margin: 0; position: relative; }
.deal-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--stock-2); margin-bottom: .9rem; border-radius: var(--radius); }
.deal-card .dest { font-family: var(--display); font-weight: 700; font-size: 1.375rem; line-height: 1.3; letter-spacing: -.01em; }
.deal-card .price { font-size: 2rem; margin: .35rem 0 .25rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .6rem; }
.deal-card .price .from { font-family: var(--text); font-weight: 500; font-size: 1rem; letter-spacing: 0; color: var(--ink-2); margin-right: -.2rem; }
/* What the trip normally costs, struck through beside the fare (Chris, 24 Oct: prominent and crossed out). */
.deal-card .price .was { font-family: var(--text); font-weight: 600; font-size: 1.125rem; color: var(--ink-2); letter-spacing: 0; text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--ink-3); }
.deal-card .meta { font-size: .9375rem; color: var(--ink-3); }
/* A deal that went only to paid members carries a small Premium badge in the top corner of its photograph (Angelo, 28 Oct): a solid Green 700
   label with white type, so it reads on any photo and the meta line keeps to one line; free deals carry none. */
.deal-card .tier { position: absolute; top: .75rem; left: .75rem; z-index: 1; padding: .3rem .55rem; background: var(--green-700); color: var(--on-green); border-radius: 4px; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; }
/* Phones (Scott, 28 Oct): the small tiles take smaller type, price included, and more room between them; a long name wraps to two lines, never three. The two lead tiles span the row and keep their size. */
@media (max-width: 599px) {
  .past-grid .deal-card:not(.lead-deal) .dest { font-size: 1.125rem; line-height: 1.25; }
  .past-grid .deal-card:not(.lead-deal) .price { font-size: 1.5rem; margin: .3rem 0 .2rem; gap: 0 .4rem; }
  .past-grid .deal-card:not(.lead-deal) .price .from { font-size: .875rem; margin-right: -.1rem; }
  .past-grid .deal-card:not(.lead-deal) .price .was { font-size: .9375rem; }
  .past-grid .deal-card:not(.lead-deal) .meta { font-size: .875rem; line-height: 1.4; }
  .past-grid .deal-card:not(.lead-deal) .tier { top: .5rem; left: .5rem; font-size: .625rem; padding: .25rem .45rem; }
  .past-grid .deal-card:not(.lead-deal) img { margin-bottom: .75rem; }
}
.deals-more { margin: 2.5rem 0 0; }

/* The share: a pull-quote band. */
.share { display: grid; gap: 2rem; }
@media (min-width: 861px) { .share { grid-template-columns: 7fr 5fr; gap: 5rem; align-items: start; } }
.share h2 { max-width: 14em; }
.share .btn { margin-top: .5rem; }
.share-lines { margin: 0; border-top: var(--hair); }
.share-lines .line { padding: 1rem 0; border-bottom: var(--hair); }
.share-lines dt { font-family: var(--display); font-weight: 700; font-size: 1.25rem; min-width: 6rem; }
.share-lines dd { margin: 0; color: var(--ink-2); }

/* A share line: the plan name, then what it gets. */
.line { display: flex; align-items: baseline; gap: .3rem .6rem; }

/* Photographs: plates with an 8px corner; a place is named only in a tile's own line or a photo's alt, never in a caption the source cannot back. */
.photo { margin: 0; min-width: 0; }
.photo img { width: 100%; height: auto; object-fit: cover; background: var(--stock-2); border-radius: var(--radius); }

/* The long horizon: one full-width photograph opens a department. */
.horizon { margin-bottom: 2.5rem; }
.horizon img { aspect-ratio: 16 / 7; max-height: 34rem; }
@media (max-width: 860px) { .horizon img { aspect-ratio: 16 / 10; } }
/* Destinations: the world map (land from Natural Earth, public domain) with a small dot on every destination of the last year (.pin-reach, label on hover; the busiest carry their label from 861px) and labelled pins for the recent deals, the members' stories (the member's photo in a ring, linking to the stories) and Passport's rare trips; the pins land west to east as the map arrives, then the map tours the labelled pins, lighting each in turn as if hovered (map.js adds .lit). */
.map { margin: 0 0 2rem; --zoom: 1; }
/* The map fits its column on every screen; instead of panning, it zooms. The world group glides to the highlighted pin at 3x (map.js sets the
   transform and --zoom); marks counter-scale so a dot stays a dot, labels hide while zoomed, and the card at the foot names the place. */
.map-scroll { position: relative; overflow: hidden; border-radius: var(--radius); }
.map-svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 428; overflow: hidden; }
/* On a phone the map is cropped to 5:4 (the Pacific and the far east sit outside the overview; the tour and a tap bring them in). */
/* On a phone the whole world shows at rest (no crop, no glide, no tour; map.js lists the featured pins beneath it), with darker land so it reads at 390px. */
@media (max-width: 860px) { .map .reach { stroke-width: 3.5px; } .map-card { display: none; } }
.map .world { transform-origin: 0 0; }
@media (prefers-reduced-motion: no-preference) { .map .world { transition: transform .9s cubic-bezier(.16, 1, .3, 1); } }
.map.zoomed .pin text, .map.zoomed .origin text { opacity: 0 !important; }
.map-card { position: absolute; left: .75rem; bottom: .75rem; max-width: min(22rem, calc(100% - 1.5rem)); display: flex; align-items: center; gap: .75rem; padding: .5rem .9rem .5rem .5rem; background: var(--stock); border: var(--hair); border-radius: var(--radius); box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .4); }
.map-card-photo { width: 4rem; height: 4rem; object-fit: cover; border-radius: var(--radius-s); flex: none; background: var(--stock-2); }
.map-card-text { display: grid; gap: .1rem; min-width: 0; line-height: 1.3; }
.map-card-text strong { font-family: var(--display); font-weight: 700; font-size: 1.0625rem; }
.map-card-price { font-weight: 600; }
.map-card-note { font-size: .9375rem; color: var(--ink-3); }
@media (max-width: 860px) { .map-card { left: .5rem; bottom: .5rem; gap: .6rem; padding: .35rem .7rem .35rem .35rem; max-width: calc(100% - 1rem); } .map-card-photo { width: 2.75rem; height: 2.75rem; } .map-card-text strong { font-size: 1rem; } .map-card-price { font-size: .9375rem; } .map-card-note { display: none; } }
/* The land (Chris and Scott, 28 Oct: softer, less harsh): the coastline is drawn as curves through the midpoints of the simplified polygon
   (scripts/smooth-map-land.py), filled a shade deeper than the page with no darker outline; a same-colour round-joined stroke rounds the
   last corners. The sea is the page. */
.map .land { fill: #e9ece2; stroke: #e9ece2; stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
@media (max-width: 860px) { .map .land { fill: #d3d9c6; stroke: #d3d9c6; stroke-width: 1.6; } }
.map .origin rect { fill: var(--ink); }
.map .origin text, .map .pin text { font-family: var(--text); font-weight: 600; font-size: .75rem; fill: var(--ink); paint-order: stroke; stroke: var(--stock); stroke-width: 4px; stroke-linejoin: round; }
.map .pin text tspan { font-weight: 400; fill: var(--ink-2); }
.map .pin { cursor: default; outline: none; }
.map .hit { fill: transparent; stroke: none; }
.map .leader { stroke: var(--ink-3); stroke-width: 1; }
.map .true { fill: var(--ink-3); }
.map .pin-deal .mark { fill: var(--green-700); }
.map .pin-reach .mark circle:not(.hit) { fill: var(--green); opacity: .6; r: 2.2; }
/* The other destinations: one path of points, stroked with round caps at a screen-constant width, so a dot stays a dot at any zoom and costs one DOM node. */
.map .reach { fill: none; stroke: var(--green); stroke-width: 4.5px; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .45; pointer-events: none; }
html.js .map .reach { opacity: 0; }
html.js .map.arrived .reach { opacity: .45; }
@media (prefers-reduced-motion: no-preference) { html.js .map .reach { transition: opacity .9s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--d, 0ms); } }
.map .pin-story .mark .ring { fill: var(--stock); stroke: var(--green-700); stroke-width: 2; }
.map .pin-story image { pointer-events: none; }
.map a.pin-story { cursor: pointer; }
.map .pin-passport .mark { fill: var(--green-800); }
.map .pin text { opacity: 0; transform: translateX(-4px); transition: opacity .25s cubic-bezier(.16, 1, .3, 1), transform .25s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.map .pin:hover text, .map .pin:focus-visible text, .map .pin.lit text { opacity: 1; transform: none; }
@media (min-width: 861px) { .map .pin-labelled text { opacity: 1; transform: none; } }
.map .mark { transform-box: fill-box; transform-origin: center; transform: scale(calc(1 / var(--zoom))); transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.map .pin:hover .mark, .map .pin:focus-visible .mark, .map .pin.lit .mark { transform: scale(calc(1.5 / var(--zoom))); }
.map .pin:focus-visible .hit { stroke: var(--green-700); stroke-width: 2; }
@media (max-width: 860px) { .map .pin text { font-size: 1.25rem; } .map .origin text { font-size: 2.1rem; } .map .origin text { y: -16px; } .map .mark { transform: scale(calc(1.6 / var(--zoom))); } .map .pin-reach .mark { transform: scale(calc(1.15 / var(--zoom))); } .map .pin:hover .mark, .map .pin:focus-visible .mark, .map .pin.lit .mark { transform: scale(calc(2.2 / var(--zoom))); } .map .origin rect { transform: scale(calc(2.4 / var(--zoom))); transform-box: fill-box; transform-origin: center; } }
.map-list { list-style: none; margin: 1.75rem 0 0; padding: 0; border-top: var(--hair); }
@media (min-width: 861px) { .map-list { display: none; } }
.map-list-item { border-bottom: var(--hair); }
.map-list-link { display: flex; align-items: center; gap: .9rem; padding: .6rem 0; color: inherit; text-decoration: none; min-height: 3.5rem; }
.map-list-link img { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: var(--radius-s); flex: none; background: var(--stock-2); }
.map-list-text { display: grid; gap: .1rem; min-width: 0; line-height: 1.3; }
.map-list-title { font-family: var(--display); font-weight: 700; font-size: 1.0625rem; }
.map-list-price { font-weight: 600; color: var(--green-700); }
.map-list-note { font-size: .9375rem; color: var(--ink-3); }
.map-list-deal .map-list-note { display: none; }
.map-list-passport .map-list-link { padding-left: .9rem; border-left: 3px solid var(--green-800); margin: .5rem 0; padding-top: .4rem; padding-bottom: .4rem; min-height: 0; }
.map-key { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: 1rem; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.map-key .key { display: inline-flex; align-items: center; gap: .55rem; }
.map-key .key::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--green-700); }
.map-key .key-reach::before { width: .4rem; height: .4rem; background: var(--green); }
.map-key .key-story::before { background: var(--stock); border: 2px solid var(--green-700); box-sizing: border-box; }
.map-key .key-passport::before { border-radius: 0; background: var(--green-800); transform: rotate(45deg) scale(.85); }

/* Two-column department bodies: the heading to one side, the text to the other. */
.split { display: grid; gap: 2rem; }
@media (min-width: 861px) { .split { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; } }
.split-text .section-head { margin-bottom: 1rem; }
@media (min-width: 861px) { .split-text .section-head { position: sticky; top: calc(var(--mast-h) + 1.5rem); margin-bottom: 0; } }

/* How it works: three numbered steps, the numerals in Besley. */
.steps { list-style: none; margin: 0; padding: 0; border-top: var(--hair); }
.step { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.25rem; padding: 1.5rem 0; border-bottom: var(--hair); }
.step .n { font-family: var(--display); font-weight: 800; font-size: 2.5rem; line-height: 1; color: var(--green-700); letter-spacing: -.02em; }
.step h3 { margin-bottom: .35rem; }
.step p { margin: 0; color: var(--ink-2); }

/* Letters: five member stories from pomelotravel.com/member-stories, each with the member's own photograph, signed with the place and the saving.
   Three across then two from 1025px (a six-column grid), two across from 600px with the fifth full width, one column on a phone. */
.stories { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem 1.5rem; }
.story { min-width: 0; }
.story figure { margin: 0; }
.story img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 35%; background: var(--stock-2); margin-bottom: 1rem; border-radius: var(--radius); }
.story-low img { object-position: center 85%; }   /* the members stand at the foot of the frame */
.story blockquote { margin: 0 0 .75rem; font-size: 1.0625rem; line-height: 1.5; max-width: 38rem; }
.story figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; font-size: 1rem; color: var(--ink-2); }
/* The saving ("Saved $600") or "Pomelo member" in the brand green (Chris, 28 Oct); Green 700 for AA on white. The stories run biggest saving first. */
.story figcaption .amount { font-size: 1.125rem; font-weight: 600; color: var(--green-700); }
@media (min-width: 600px) { .stories { grid-template-columns: repeat(2, 1fr); } .story:last-child { grid-column: 1 / -1; } .story:last-child img { aspect-ratio: 2 / 1; } }
@media (min-width: 1025px) {
  .stories { grid-template-columns: repeat(6, 1fr); gap: 3rem 1.5rem; }
  .story { grid-column: span 2; }
  .story:nth-child(n + 4) { grid-column: span 3; }
  .story:nth-child(n + 4) img { aspect-ratio: 2 / 1; }
  .story:last-child img { aspect-ratio: 2 / 1; }
}

/* ---------- Memberships ---------- */
/* The plan card (Angelo, 28 Oct, on his reference; one set of styles for the homepage, the welcome offer and the plan pages): white, a
   1px Rule border, the large radius and generous padding; the name, the big price, one short line under it, the round check-and-X list,
   and a full-width button at the foot, outlined on the plain cards. The featured card is the same white card with a Pomelo-green rim
   (a 1px border doubled by an inset ring, so its box matches its neighbours'), the ribbon over its top edge, a soft shadow and the filled
   green button. Side by side from 861px, sharing rows through subgrid so the prices and the buttons sit level; stacked on a phone. */
.compare { display: grid; gap: 1.25rem; }
.plan { display: flex; flex-direction: column; min-width: 0; padding: 2rem 1.5rem; border: 1px solid var(--rule); border-radius: var(--radius-l); background: var(--stock); }
.plan h3, .plan h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; margin-bottom: .75rem; }
.price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin-bottom: .5rem; }
.price-line .big { font-size: min(clamp(2.75rem, 4.5vw, 3.5rem), 12vw); }
.price-line .per { font-size: 1rem; color: var(--ink-3); }
.renews { color: var(--ink-2); margin-bottom: 1.25rem; }
.plan-body { display: grid; align-content: start; }
.plan .btn { margin: 1.75rem 0 0; align-self: stretch; }
.plan-fine { margin: .75rem 0 0; font-size: .9375rem; color: var(--ink-3); text-align: center; }
/* Feature lists (Angelo, 28 Oct, on his reference): a small round icon before each line, centred on its first line: a pale green circle
   (On Green 2) carrying a Green 700 check for what the plan includes, a pale grey circle (Rule) carrying an Ink 3 X for what it leaves
   out. The circle is ::before, the mark a currentColor mask on ::after, so the two scale with the text. */
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; align-content: start; }
.features li { padding-left: 2rem; position: relative; line-height: 1.5; }
.features li::before, .features li::after { content: ""; position: absolute; left: 0; top: .75em; width: 1.25rem; height: 1.25rem; transform: translateY(-50%); }
.features li::before { border-radius: 50%; background: var(--on-green-2); }
.features li::after { background: var(--green-700); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3L14.5 7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3L14.5 7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.features li.no { color: var(--ink-3); }
.features li.no::before { background: var(--rule); }
.features li.no::after { background: var(--ink-3); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 7l6 6M13 7l-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 7l6 6M13 7l-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.plan-adds { margin-top: 1.25rem; padding-top: 1.25rem; border-top: var(--hair); }
.plan-adds h4 { margin: 0 0 .75rem; font-family: var(--text); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green-700); }
/* The founder's line on why Passport is limited: the department's closing note under the three cards, in the lead's grey. */
.plan-note { margin: 1.5rem 0 0; max-width: 46rem; color: var(--ink-2); }
/* The featured card: the rim is a 1px Pomelo-green border doubled by an inset ring, so the card keeps the same box as its neighbours and
   the buttons stay level; the one shadow on a card set in the page (Angelo, 28 Oct), soft and low. */
.plan-featured { position: relative; border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green), 0 24px 48px -20px rgba(21, 23, 15, .3); padding-top: 2.5rem; }
/* The ribbon: "Every deal" in tracked capitals, a Green 700 pill printed over the featured card's top edge. */
.ribbon { position: absolute; top: 0; left: 1.5rem; transform: translateY(-50%); padding: .4rem .9rem; background: var(--green-700); color: var(--on-green); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; border-radius: 999px; }
@media (min-width: 861px) {
  .compare { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto auto auto; gap: 1.5rem; margin-top: 1.25rem; }
  .plan { display: grid; grid-template-rows: subgrid; grid-row: span 5; align-items: start; padding: 2.25rem 2rem; }
  .plan > * { margin-bottom: 0; }
  .plan h3 { align-self: end; }
  .plan .price-line { margin-bottom: 0; }
  .plan .renews { margin-bottom: .5rem; }
  .plan-adds { align-self: start; }
  .plan .btn { align-self: end; margin-top: 2rem; }
  .plan-featured { padding-top: 2.75rem; }
  .ribbon { left: 2rem; }
}
@media (min-width: 1100px) { .plan { padding-left: 2.5rem; padding-right: 2.5rem; } .ribbon { left: 2.5rem; } }

/* The floating button on phones (Scott, 28 Oct, after Going's): a compact button fixed to the foot of the screen, shown by sticky-cta.js
   once the reader has scrolled past the opener's form and hidden while either subscribe form is on screen; a tap returns to the opener's form. */
.sticky-cta { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 30; width: max-content; max-width: calc(100% - 2rem); padding: .8rem 1.75rem; box-shadow: 0 12px 32px -10px rgba(0, 0, 0, .45); }
@media (prefers-reduced-motion: no-preference) { .sticky-cta:active { transform: translateX(-50%) translateY(1px); } }
@media (min-width: 861px) { .sticky-cta { display: none !important; } }

/* ---------- Closing subscription card ---------- */
.closing-grid { display: grid; gap: 2rem; }
@media (min-width: 861px) { .closing-grid { grid-template-columns: 7fr 5fr; gap: 5rem; align-items: start; } }
.closing h2 { max-width: 14em; }
.closing .lead { margin: 0; }
.foot-form { display: grid; gap: .9rem; max-width: 30rem; }
.foot-form .fineprint { margin: 0; }

/* ---------- FAQ ---------- */
.faq { max-width: 52rem; border-top: var(--hair); }
.faq details { border-bottom: var(--hair); }
.faq summary { list-style: none; cursor: pointer; padding: 1.1rem 2.5rem 1.1rem 0; font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.3; letter-spacing: -.01em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: .25rem; top: 50%; width: 1rem; height: 2px; background: var(--green-700); transform: translateY(-50%); }
.faq summary::after { transform: translateY(-50%) rotate(90deg); transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(0); }
.faq .answer { padding: 0 0 1.25rem; max-width: 44rem; color: var(--ink-2); }

/* ---------- Buttons and fields ---------- */
.btn {
  display: inline-flex; transition: background-color .15s, color .15s, border-color .15s, transform .12s; align-items: center; justify-content: center; gap: .5rem; min-height: 3.25rem;
  padding: .8rem 1.5rem; border: 1px solid var(--green-700); border-radius: var(--radius-s); cursor: pointer;
  font: inherit; font-weight: 700; font-size: 1.0625rem; line-height: 1.2; text-decoration: none; text-align: center;
}
.btn-primary { background: var(--green-700); color: var(--on-green); }
.btn-primary:hover { background: var(--green-800); border-color: var(--green-800); color: var(--on-green); }
.btn-secondary { background: transparent; color: var(--green-700); }
.btn-secondary:hover { background: var(--green-700); color: var(--on-green); }
.btn-lg { min-height: 3.5rem; }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--ink-3); border-color: var(--ink-3); color: var(--stock); cursor: not-allowed; }
/* A button that is sending keeps its own colours and turns a small ring before its label (Scott, 31 Oct: grey reads as broken);
   grey stays for a button that really cannot be used (Pay while the email needs the app's login). busy-button.js sets aria-busy. */
.btn-primary[aria-busy="true"], .btn-primary[aria-busy="true"]:disabled { background: var(--green-700); border-color: var(--green-700); color: var(--on-green); cursor: progress; }
.btn[aria-busy="true"]::before { content: ""; flex: none; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .btn[aria-busy="true"]::before { animation: spin .8s linear infinite; } }
@keyframes spin { to { transform: rotate(360deg); } }
.field { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.field label, .field-label { font-weight: 600; font-size: 1rem; margin: 0; }
.input, .stripe-el {
  width: 100%; min-height: 3.25rem; padding: .75rem .9rem; border: 1px solid var(--ink-3); border-radius: var(--radius-s); background: var(--stock); color: var(--ink);
  font: inherit; font-size: 1.0625rem; caret-color: var(--green-700);
}
.input::placeholder { color: var(--ink-3); }
.input:hover { border-color: var(--ink); }
.input:focus-visible, .stripe-el:focus-within { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--green-700); }
.input:read-only { background: var(--stock-2); border-color: var(--rule); }
.input.invalid, .stripe-el.invalid { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.stripe-el { display: flex; align-items: center; }
.stripe-el > * { flex: 1; } /* Stripe's own element would shrink to 1px in the flex row */
/* Until Stripe's card element is ready (checkout-page.js removes .loading) the field says what is coming and pulses softly,
   instead of standing empty (Scott, 31 Oct). */
.stripe-el.loading { position: relative; background: var(--stock-2); }
.stripe-el.loading > * { opacity: 0; }
.stripe-el.loading::before { content: "Loading the secure card form…"; position: absolute; left: .9rem; right: .9rem; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 1rem; }
@media (prefers-reduced-motion: no-preference) { .stripe-el.loading { animation: field-pulse 1.6s ease-in-out infinite; } }
@keyframes field-pulse { 50% { background: #e9ece2; } }
/* The subscribe form's email line: a ruled line that turns green on focus, the button on its own full-width row beneath. */
.form-row { display: flex; flex-direction: column; gap: .75rem; }
.form-row .field { flex: 1; }
.signup-form .input { border-width: 0 0 2px; border-color: var(--ink); border-radius: 0; padding-left: .25rem; padding-right: .25rem; }
.signup-form .field { position: relative; }
.signup-form .field::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--green-700); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.signup-form .field:focus-within::after { transform: none; }
.signup-form .input:focus-visible { outline: none; }
.signup-form .input.invalid { border-color: var(--error); box-shadow: 0 2px 0 0 var(--error); }
.field-hint { margin: 0; font-size: .9375rem; color: var(--ink-3); }
.field-hint.ok { color: var(--success); font-weight: 500; }
.field-hint.bad, .field-error { color: var(--error); font-size: .9375rem; }
.field-error:empty { display: none; }
.fineprint { color: var(--ink-3); }
.form-status { position: relative; padding-left: 1.7rem; margin: 0; font-weight: 500; }
.form-status::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.1rem; height: 1.1rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.form-status-error { color: var(--error); }
.form-status-error::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M10 5.5v5.5M10 13.5v1' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M10 5.5v5.5M10 13.5v1' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E"); }
.form-status-success { color: var(--success); }
.signup-form .form-status { margin-top: .75rem; }
.linkpad { display: inline-block; padding: .65rem 0; }

/* ---------- Flow pages ---------- */
/* Each step opens on a status line (gone after ten seconds, see auto-hide below), the headline and the lead. */
.flow-band { padding: 0; }
#captcha-field { min-height: 78px; }
.flow-band .wrap { display: grid; gap: 1.25rem; }
.band-copy { padding-top: 1rem; }
.flow-band h1, .flow-page h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.02; letter-spacing: -.02em; max-width: 20ch; margin-bottom: .6rem; }
.flow-band p:last-child, .flow-page .band-copy p:last-child { margin-bottom: 0; }
.flow-band .band-copy > p, .flow-page .band-copy > p { color: var(--ink-2); font-size: 1.25rem; max-width: 36rem; }
@media (max-width: 860px) { .flow-band h1, .flow-page h1 { font-size: 2rem; margin-bottom: .4rem; } .flow-band .band-copy > p, .flow-page .band-copy > p { font-size: 1.0625rem; } .flow-body { padding-top: 1rem; } .band-copy { padding-top: .5rem; } }
.notice::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.1rem; height: 1.1rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (min-width: 861px) { .band-copy { padding-top: 2.5rem; } }
.flow-body { padding: 2rem 0 4rem; }
.flow-body.has-hero { padding-top: 0; }
/* Flow pages (welcome, confirmation): the photo header, then the copy and its actions in one column. */
.flow-page { padding: 2.5rem 0 4rem; }
@media (max-width: 860px) { .flow-page { padding-top: 0; } }
.stack { display: grid; gap: 1.25rem; }
.column { max-width: 34rem; }
.flow-alt { margin: .25rem 0 0; }
.flow-alt a.muted { color: var(--ink-2); }
/* The welcome and confirmation pages (Angelo, 28 Oct, then Scott, 31 Oct, on the confirmation's empty right side): the copy and its
   actions sit in a 36rem column centred under the photo header. On the welcome page that column holds the featured Premium card, the
   Passport line and the quiet button; on the confirmation, the next steps, the button and the lines under it, which are centred. */
.flow-main > .column { max-width: 36rem; margin: 0 auto; }
.flow-main .charged, .flow-main .flow-alt { text-align: center; }
/* The photo header's copy is centred over that column too, so the page has one axis from the headline to the last line. */
.flow-page .flow-hero .band-copy { width: 100%; text-align: center; }
.flow-page .flow-hero .band-copy > h1, .flow-page .flow-hero .band-copy > p { margin-left: auto; margin-right: auto; }
.offer-column .plan { margin-top: .75rem; }
.passport-line { margin: 0; padding: 1rem 0; border-top: var(--hair); border-bottom: var(--hair); text-align: center; color: var(--ink-2); }

/* The photo header (Chris, 28 Oct, after the legacy upgrade page's kayak photograph): the welcome, checkout and confirmation pages open on
   one landscape photograph to the column with the page's header knocked out in white over its foot on the opener's scrim. The copy keeps
   the flow band's type; only its ground changes. */
.flow-hero { position: relative; isolation: isolate; margin: 1.5rem 0 2rem; min-height: 18rem; display: flex; align-items: flex-end; color: var(--on-photo); border-radius: var(--radius); overflow: hidden; background: var(--stock-2); }
.flow-hero-photo { position: absolute; inset: 0; margin: 0; z-index: -1; }
.flow-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.flow-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 6, .08) 0%, rgba(8, 12, 6, .5) 24%, rgba(8, 12, 6, .68) 48%, rgba(8, 12, 6, .78) 100%); }
.flow-hero .band-copy { padding: 4rem 1.5rem 1.5rem; }
.flow-hero h1 { color: var(--on-photo); text-shadow: 0 2px 20px rgba(0, 0, 0, .3); }
.flow-hero .band-copy > p, .flow-page .flow-hero .band-copy > p { color: var(--on-photo); text-shadow: 0 1px 12px rgba(0, 0, 0, .3); }
/* One line shows under each heading (the other plan's is hidden after it), so none keeps a bottom margin to unbalance the photo. */
.flow-hero .band-copy > p { margin-bottom: 0; }
/* Desktop: the heading sits in the middle of the photo (Scott, 31 Oct); phones keep it low with room beneath. */
@media (min-width: 861px) { .flow-hero { min-height: 22rem; margin-top: 2rem; margin-bottom: 2.5rem; align-items: center; } .flow-hero .band-copy { padding: 2.5rem; } }
@media (max-width: 860px) { .flow-hero { margin: 0 -1rem 1.5rem; border-radius: 0; min-height: 19rem; } .flow-hero .band-copy { padding: 3rem 1rem 2.75rem; } .flow-hero-photo::after { background: linear-gradient(180deg, rgba(8, 12, 6, .3) 0%, rgba(8, 12, 6, .58) 35%, rgba(8, 12, 6, .76) 100%); } }
/* The quiet alternative under the offer (Scott, 28 Oct): an outlined button, plainly a button, set apart from the green block. */
.btn-quiet { background: transparent; color: var(--ink-2); border-color: var(--ink-3); }
.btn-quiet:hover { background: var(--stock-2); color: var(--ink); border-color: var(--ink); }
/* Status and confirmation lines go away after ten seconds (Scott, 28 Oct): auto-hide.js adds .gone to every [data-auto-hide] line. The
   line fades on the one curve (at once under reduced motion), keeps its space so nothing shifts under the reader's hand, and stays in its
   live region at opacity 0, so a screen reader still has it. */
[data-auto-hide].gone { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { [data-auto-hide] { transition: opacity .6s cubic-bezier(.16, 1, .3, 1); } }
/* The free-list notice (Scott and Chris, 28 Oct): a line at the top of the screen, not body text; it goes with the other status lines.
   On a phone it floats over the photo header's top; from 861px it straddles the header's top edge, as the ribbon does a card's. */
.notice { position: fixed; top: calc(var(--mast-h) + .75rem); left: 1rem; right: 1rem; width: fit-content; max-width: 36rem; margin: 0 auto; z-index: 40; padding: .9rem 1.1rem .9rem 2.6rem; background: var(--stock); border: 1px solid var(--rule); border-radius: var(--radius-s); box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .4); font-weight: 500; color: var(--green-700); }
.notice::before { left: 1rem; top: 1.05rem; }
/* On a page with no photo header (signup) the notice is the same card, in the content column above the headline, so it can never cover it however long the email; its space stays after it fades. */
.notice.in-flow { position: relative; top: auto; left: auto; right: auto; margin: 1.5rem 0 .5rem; }
@media (min-width: 861px) { .notice.in-flow { top: auto; margin: 2rem 0 .75rem; } }
@media (min-width: 861px) { .notice { top: calc(var(--mast-h) + 2.75rem); } }
@media (prefers-reduced-motion: no-preference) { .notice { animation: notice-in .35s cubic-bezier(.16, 1, .3, 1); } }
@keyframes notice-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* The home airport as a type-to-search field (Chris, 28 Oct): a text field and a list of matching airports beneath it; picking one fills the hidden value the form posts. */
.combo { position: relative; }
.combo-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 10; margin: .25rem 0 0; padding: .25rem 0; list-style: none; max-height: 16rem; overflow-y: auto; background: var(--stock); border: 1px solid var(--ink-3); border-radius: var(--radius-s); box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .35); }
.combo-list li { padding: .7rem .9rem; cursor: pointer; line-height: 1.3; }
.combo-list li[aria-selected="true"], .combo-list li:hover { background: var(--stock-2); }
.combo-list li .iata { float: right; margin-left: 1rem; font-weight: 600; color: var(--ink-3); }
.combo-empty { padding: .7rem .9rem; color: var(--ink-3); cursor: default; }
.combo-empty:hover { background: transparent; }

/* Checkout: the order form beside the bill. */
.two-col { display: grid; gap: 3rem; }
@media (min-width: 861px) { .two-col { grid-template-columns: 7fr 5fr; gap: 4rem; align-items: start; } }
.checkout-head h1 { font-size: clamp(2rem, 4vw, 3.25rem); margin-bottom: .5rem; }
.checkout-head p { font-size: 1.25rem; margin: 0; }
.flow-hero .checkout-head h1 { max-width: 20ch; }
.name-row { display: grid; gap: 1.25rem; }
@media (min-width: 480px) { .name-row { grid-template-columns: 1fr 1fr; } }
.promo-row { display: flex; gap: .75rem; }
.promo-row .input { flex: 1; min-width: 0; }
.price-disclosure { margin: 0; color: var(--ink-2); }
#email-note { color: var(--ink-2); font-size: 1rem; }
.charged { margin: 0; color: var(--ink-2); }
.charged strong { font-family: var(--display); font-weight: 800; font-size: 1.25rem; font-variant-numeric: lining-nums; color: var(--ink); }
.price-disclosure strong { font-family: var(--display); font-weight: 800; font-size: 1.25rem; font-variant-numeric: lining-nums; }
.trust { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .9375rem; color: var(--ink-2); }
.trust li { display: flex; align-items: center; gap: .5rem; }
.summary { border-top: 3px solid var(--green); padding-top: 1rem; }
.summary h2 { font-size: 1.5rem; margin-bottom: .75rem; }
/* The bill: item left, amount flush right on the same baseline; hairlines are the only rules. */
.summary .row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .75rem 0; border-bottom: var(--hair); }
.summary .row > span:last-child { font-family: var(--display); font-weight: 800; font-size: 1.25rem; white-space: nowrap; }
.summary .row.small { font-size: 1rem; color: var(--green-700); }
.summary .row.small > span:last-child { font-size: 1.0625rem; }
.summary .row.total { border-bottom: 0; padding-top: 1rem; font-weight: 600; }
.summary .row.total > span:last-child { font-size: 1.75rem; line-height: 1; }
.summary .features { margin: 1rem 0 0; }
.summary .plan-benefits { gap: .45rem; }
.summary .plan-benefits li { font-size: 1rem; line-height: 1.45; }
.summary .features li { font-size: 1.0625rem; }
.next-steps { margin: 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--on-ink-2); padding: 3rem 0 2rem; margin-top: 2rem; }
.site-footer a { color: var(--on-photo); }
.site-footer a:hover { color: var(--green); }
.footer-logo { height: 22px; width: auto; margin-bottom: 1rem; }
.site-footer .cols { display: grid; gap: 2rem; }
@media (min-width: 761px) { .site-footer .cols { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; } }
.site-footer p { max-width: 26rem; margin: 0; }
.foot-h { font-family: var(--text); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-photo); margin: 0 0 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.site-footer .copy { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .2); font-size: .9375rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.site-footer.slim { padding: 1.5rem 0; margin-top: 0; }
.site-footer.slim .copy { margin: 0; padding: 0; border: 0; }

/* Desktop-only lead text: the map tour and hover exist only on desktop, so phones get the sentence about the list;
   the hero lead drops its extra clauses on phones (Scott, 31 Oct). */
.lead-phone { display: none; }
@media (max-width: 860px) {
  .lead-desk { display: none; }
  .lead-phone { display: inline; }
}

/* ---------- Phones: headings centred ---------- */
/* On a phone the headline blocks are centred (Scott, 28 and 31 Oct: centred is the default for headers on mobile): the opener's
   headline, standfirst and note, every department's heading and its lead, the share and closing headlines, and the flow pages'
   photo headers. Lists, forms, deal tiles and running text stay ranged left, where centred lines are hard to read. */
@media (max-width: 860px) {
  .hero h1, .hero .lead, .section-head, .share > div:first-child, .closing-grid > div:first-child, .band-copy { text-align: center; }
  .hero h1, .hero .lead, .section-head .lead, .share h2, .share .lead, .closing h2, .closing .lead, .band-copy > h1, .band-copy > p { margin-left: auto; margin-right: auto; }
  .hero-note { justify-content: center; }
}